@charset "utf-8";

/* 충남의 주요지표 */
.zipyo {position: relative; margin-top: 30px;}

.sch_zipyo {padding: 20px; margin-bottom: 20px; background: #dce1e9;}
.sch_zipyo select {height: 32px;}
.sch_zipyo button {cursor: pointer; height: 32px; padding: 0 8px; background: #353f5c; color: #fff; vertical-align: middle;}

.status_box {padding: 20px; margin-bottom: 30px; border: 1px solid #dce1e9; border-radius: 20px; background: #f8fafe; box-sizing: border-box;}
.status_box .title {position: relative; padding-bottom: 5px; border-bottom: 1px solid #173b6e; min-height: 29px;}
.status_box .title {position: relative; padding-bottom: 5px; border-bottom: 1px solid #173b6e; min-height: 29px;}
.status_box .title:after {display: block; clear: both; content: "";}
.status_box .title h4 {width: 100%; height: 29px; margin: 0; padding-left: 0; background: none; font-size: 20px; color: #173b6e;}
.status_box .title h4 span {font-weight: 400; color: #444;}
.status_box .title p {float: right;}
.status_box .title p span {float: left; min-width: 150px; text-align: right;}
.status_box .title p span em {display: inline-block;}
.status_box li {padding: 12px; margin-top: 20px; border: 1px solid #b3b6bf; background: #fff; font-size: 18px;}
.status_box li sub {vertical-align: bottom;}
.status_box li span {display: block; height: 28px;}
.status_box li span em {float: right; margin-top: 3px;}
.status_box span strong {color: #173b6e; font-size: 20px;}
.status_box span em {padding-left: 18px; font-style: normal;}

.status_box2 {padding: 20px 20px 0; margin-bottom: 30px; border: 1px solid #b3b6bf;}
.status_box2 li {padding-bottom: 20px; margin-bottom: 20px; font-size: 18px; border-bottom: 1px solid #b3b6bf;}
.status_box2 li:last-child {margin-bottom: 0; border: none;}
.status_box2 li span {display: block; text-align: right;}
.status_box2 span strong {float: left; color: #173b6e; font-size: 20px;}
.status_box2 span em {display: inline-block; padding-left: 18px; margin-top: 3px; font-style: normal;}
.status_box2 li sub {display: inline-block; margin: 5px 0 0 6px; letter-spacing: -1px;}

.status_box2 .col1 span em {margin-left: 10px;}

.zipyo .over_table {margin: 10px 0 20px;}
.zipyo .over_table h6 {margin: 10px 0;}
.zipyo .over_table h6:after {display: block; clear: both; content: "";}
.zipyo .over_table h6 span {float: right; margin-top: 4px; font-size: .8em; font-weight: 400; color: #444;}
.img_map {width:100%; height: calc(100% - 47px); border: 1px solid #dedede; box-sizing: border-box; overflow-x: auto;}
.grp_area {width:100%; height: 450px; border: 1px solid #dedede; box-sizing: border-box;}

/* 지표 상태변경 */
span.g_down strong, span.r_down strong {color: #d13333;}
span.g_up strong, span.r_up strong {color: #009375;}
span.r_up em, span.g_up em {background: url("/images/sub/zipyo/new_up.png") no-repeat left 8px /12px;}
span.r_down em, span.g_down em {background: url("/images/sub/zipyo/new_down.png") no-repeat left 8px /12px;}

/* 지도 시군 표시 */
.img_map>div {position: relative; width: 678px; margin: auto; overflow: hidden;}
.img_map img {display: block; width: 640px; margin: 30px 0 0 20px;}
.img_map dl {position: absolute; min-width: 85px;}
.img_map dl dt {width: 50px; padding: 0 0 3px; margin: 0 auto; text-align: center; color: #fff; background: #173b6e; border-radius: 20px; font-weight: 600;}
.img_map dl dd {text-align: center;}
/*태안*/.img_map dl.map01 {top: 140px; left: 30px;}
/*서산*/.img_map dl.map02 {top: 140px; left: 130px;}
/*당진*/.img_map dl.map03 {top: 60px; left: 200px;}
/*아산*/.img_map dl.map04 {top: 120px; left: 330px;}
/*천안*/.img_map dl.map05 {top: 100px; left: 440px;}
/*예산*/.img_map dl.map06 {top: 190px; left: 250px;}
/*홍성*/.img_map dl.map07 {top: 250px; left: 170px;}
/*보령*/.img_map dl.map08 {top: 370px; left: 170px;}
/*청양*/.img_map dl.map09 {top: 310px; left: 280px;}
/*공주*/.img_map dl.map10 {top: 280px; left: 380px;}
/*서천*/.img_map dl.map11 {top: 490px; left: 220px;}
/*부여*/.img_map dl.map12 {top: 420px; left: 300px;}
/*논산*/.img_map dl.map13 {top: 450px; left: 410px;}
/*금산*/.img_map dl.map14 {top: 490px; left: 540px;}
/*계룡*/.img_map dl.map15 {top: 370px; left: 500px;}
.img_map dl.map15:after {display: block; position: absolute; top: 53px; left: -15px; width: 6px; height: 6px; content: ""; background: #173b6e; border-radius: 100%;}
.img_map dl.map15:before {display: block; position: absolute; top: 13px; left: -12.5px; width: 1px; height: 40px; content: ""; background: #173b6e;}
.img_map dl.map15 dt:before {display: block; position: absolute; top: 13px; left: -12px; width: 30px; height: 1px; content: ""; background: #173b6e;}

.loading {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255,255,255,0.8); z-index: 9999;}
.loading img {position: absolute; top: 30px; left: calc(50% - 51px); animation: aniImg 3s ease-in-out infinite;}
@keyframes aniImg {0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);}}
.loading span{display: block;position: absolute;top: 170px;width: 100%;text-align: center;color: #2c60cb}

/*데이터없음*/
.data_none {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255,255,255,0.6); z-index: 9999;}
.data_none div {position: absolute; top: 30px; left: 50%; transform: translateX(-50%); padding: 60px 20px; text-align: center; background: #fff; border: 1px solid #2c60cb; width: 80%;}
.data_none .title {font-size: 24px; font-weight: 600; color: #2c60cb;}

/*지표타이틀*/
.zipyo_tit p {padding: 0 0 0 32px; margin: 30px 0 20px; font-size: 28px; font-weight: 600; background: url(/images/common/h4.png) no-repeat 0 14px;}

/* Tablet */
@media all and (min-width:768px) {
.sch_zipyo {margin: 10px 10px 30px;}
	
.zipyo .over_table .scroll_guide {display: none;}
	
.status_box {padding: 30px; margin: 0 10px 30px;}
.status_box .title p {position: absolute; top: 5px; right: 0;}
.status_box ul:after {display: block; clear: both; content: "";}
.status_box li {float: left; width: calc((100% - 40px)/2); height: 97px; padding: 20px 20px 0; margin: 20px 10px 0; box-sizing: border-box;}
	
.status_box2 {padding: 20px 30px 0; margin: 0 10px 30px;}
.status_box2 ul:after {display: block; clear: both; content: "";}
.status_box2 li {float: left; width: calc((100% - 30px)/2); padding: 0 30px 0 0; margin-right: 30px; border: none; border-right: 1px solid #b3b6bf; box-sizing: border-box;}
.status_box2 .col3 li {width: calc((100% - 40px)/3); padding: 0 20px 0 0; margin-right: 20px;}
.status_box2 .col1 li {float: none; width: auto; margin-bottom: 20px;}
.status_box2 li:last-child {margin-right: 0; padding-right: 0;}

.loading img {top: 50px;}
.data_none div {width: auto; top: 50px;}

.zipyo_tit p {margin-bottom: 40px; font-size: 32px; background-position: 0 18px;}
}

/* Desktop */
@media all and (min-width:1023px) {
.zipyo:after {display: block; clear: both; content: "";}
.status_box.left {width: 70%; float: left; margin-right: 20px;}
.status_box.right {width: calc(30% - 50px); float: left;}
	
.status_box li {width: 100%; padding: 20px 10px 0; letter-spacing: -1px;}
.status_box .col4 li {width: calc(25% - 20px);}
.status_box .col3 li {width: calc((100%/3) - 21px);}
.status_box .col2 li {width: calc(50% - 20px); height: 70px;}
.status_box .col2 li span {width: 55%; float: right;}
	
.status_box.right li {margin: 20px 0 0;}
	
.status_box2 li span {width: 54%; float: right;}
.status_box2 .col1 {width: 50%; margin: 0 auto;}
.status_box2 .col3 li span {width: 70%;}
	
.zipyo .col:after {display: block; clear: both; content: "";}
.zipyo .col .over_table {width: calc(50% - 20px); height: 680px; margin: 0 10px 20px; float: left; overflow: hidden;}
.grp_area {height: 450px;}
.col .grp_area {height: calc(100% - 47px)!important;}
.col .grp_area.h50 {height: calc(50% - 47px)!important;}
.col .grp_area.h30 {height: calc(33.3% - 47px)!important;}
.zipyo.half .col .over_table {height: 400px;}
}
@media all and (min-width:1400px) {
.status_box li {padding: 20px 20px 0; letter-spacing: normal;}
}