@charset "utf-8";

.select.v1 > option {color:#585858;/*font-size:15px;font-family:Malgun Gothic;*/cursor:pointer; padding:0 8px; /*height:35px;*/ }
.select.v1 > option:hover{background:#457bf5;color:#fff;}

.menu-total {margin-top: 20px;}
.sub-sort {margin-bottom: 0px !important;}

.menu-group .menu-list {position: relative;}
.menu-group .menu-list > a {width: 100%;}
.menu-group .menu-list > a.active {background-color: #d1f5df;color: #222;font-weight: 700; }
.menu-group .menu-list > a.active:before {background-color: #222; }

.extend-data .chk .div_block{display:none;position: absolute;top: 1px;left: 1px;right: 1px;bottom: 1px;background: rgba(58,58,79,0.2);}
.extend-data .chk .div_block .div_block_msg{position: absolute;top: calc(50% - 25px);left: 0px;right: 0px;height: 50px;background: #565669 /*#6A6A7E*/;text-align: center;padding-top: 14px;}
.extend-data .chk .div_block .div_block_msg span{font-size: 15px;font-weight: 100;color: #eeeaea; /*  #90ef7f */}

.data-wrap ul li.sec01 .graph_bg{position:relative;text-align:center;margin-top: 37px;}
.data-wrap ul li.sec01 .graph_bg span{position:absolute;width:100%;top:63px;right:0px;text-align:center;font-size:22px;color:#333;/*font-weight:500;*/}
.data-wrap ul li.sec01 .graph_bg img{ width : 150px;}

.data-wrap ul li.sec01 .graph_bg .txt_sm01{font-size:15px;}
.data-wrap ul li.sec01 .graph_bg sup{font-size:15px;position:relative;top:5px;}
.data-wrap ul li.sec01 .sa_txt02 {font-size:13px;}

.data-wrap ul li.sec01 .graph_bg.un_shape{position:relative;text-align:center;margin-top: 50px;}
.data-wrap ul li.sec01 .graph_bg.un_shape span{position:absolute;width:100%;top:60px;right:0px;text-align:center;font-size:22px;color:#333;/*font-weight:500;*/}
.data-wrap ul li.sec01 .graph_bg.un_shape img{width : 150px;}

.data-wrap ul li.sec02 .div_basic .txt_box01 .chart {margin-top: 10px;margin-left: 10px;}
/*
.data-wrap ul li.sec03 .txt_box03 .cr02 {top: -5px;}
.data-wrap ul li.sec03 .txt_box03 .cr03 {top: -20px;}
.data-wrap ul li.sec03 .txt_box03 .sa_txt02 {top: -6px;}
.data-wrap ul li.sec03 .txt_box03 .sa_txt03 {top: -21px;}
*/
.data-wrap ul li.sec04 .div_basic .txt_box03 {bottom: 7px;}
.data-wrap ul li.sec04 .div_basic .txt_box03 .sa_txt01.ml16 {margin-left: 16px;}
.data-wrap ul li.sec05 .div_basic .txt_box03 {bottom: 7px;left: 10px;}
.data-wrap ul li.sec06 .div_basic .txt_box03 {bottom: 7px;left: 10px;}
.data-wrap ul li .div_basic .cht_box01 {position: absolute;top: 80px;left: 10px;width: 220px;height: 140px;font-weight: normal;}
.data-wrap ul li .div_basic .cht_box02 {position: absolute;top: 80px;right: 5px;width: 140px;height: 140px;font-weight: normal;}
.data-wrap ul li .div_basic .txt_box03 .sa_txt01 {color: #686868 !important;}
.data-wrap ul li .div_basic .txt_box03 .sa_txt01.mightOverflow {max-width: 80px !important;}
.data-wrap ul li .div_basic .txt_box01 .sa_txt02 {width: 150px !important;font-weight: bold;}
.data-wrap ul li .div_basic a.zoomBox {display: none;}

.extend-search.check_search .value_col03 ._yel {cursor: pointer;}
.extend-data .chk02 {display: none;}
.extend-data .chk03 {display: none;}
.extend-data .chk05 {display: none;}

.chk02_top span.mightOverflow {max-width: 200px;}

.comparison-panel .comparison-header h3{color: #3b80ef;}
.comparison-panel .comparison-body .chart-conbox.type-color01 .color-item01 dt.mightOverflow {max-width: 150px;padding-right: 5px; display: none;}
.comparison-panel .comparison-body .chart-conbox.type-color01 .color-item03 dt.mightOverflow {max-width: 150px;padding-right: 5px; display: none;}
.comparison-btn {display: none;}
.comparison-panel .comparison-body .graph-box .graph-in {padding: 5px 10px;font-weight: 100;}

.select-green select {padding-left: 10px;float: left;width: calc(50% - 2px);height: 30px;border: 2px solid #3ca96e;border-radius: 5px;font-size: 13px;color: #3ca96e;font-weight: 700;text-align: left; }
.select-green select + select {margin-left: 4px;}
.select-green select option {color: #878c8f;}
.rank-list li p.info {display: block;position: relative;font-size: 13px;font-weight: 700;color: #3ca96e;text-align: center;padding-top: 100px;background-color: #fff;}
.rank-list li a.noSel {color: #FF0000 !important;}

.noticeTextPopup {position: absolute; left:15px; bottom:15px; z-index:6; cursor: pointer; display: block; width:270px;}

.mapType,.mapType1,.mapType2,.mapType3,.mapType4 {display: inline-block;width: 40px;height: 40px;padding: 12px 0;background-color: #fff;border-radius: 50%;color: #666666;font-weight: 700;text-align: center;font-size: 13px;margin-top: 3px;margin-left: 6px;}
.selectMapType,.selectMapType1,.selectMapType2,.selectMapType3,.selectMapType4 {display: inline-block;width: 40px;height: 40px;padding: 12px 0;background-color: #fff;border-radius: 50%;color: #666666;font-weight: 700;text-align: center;font-size: 13px;margin-top: 3px;margin-left: 6px;}



.mightOverflow {display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;position: relative;z-index: 99999;}

/* 사용자가이드 */
.urbanTuto {display: none;position: fixed;top: 0;left: 0;min-width: 1024px;min-height: 100%;width: 100%;height: auto;z-index: 99999;}
.urbanTuto.active {display: block;}
/* SGIS4_220211_도시화_수정_시작 */
.urbanTuto.tuto_1 {background: url(/images/urban/tuto/urban_guide_2.png)/*  no-repeat center center fixed */;background-size: cover;background-repeat: round;}
.urbanTuto.tuto_2 {background: url(/images/urban/tuto/urban_guide_1.png)/*  no-repeat center center fixed */;background-size: cover;background-repeat: round;}
.urbanTuto.tuto_3 {background: url(/images/urban/tuto/urban_guide_3.png)/*  no-repeat center center fixed */;background-size: cover;background-repeat: round;}
.urbanTuto.tuto_4 {background: url(/images/urban/tuto/urban_guide_4.png)/*  no-repeat center center fixed */;background-size: cover;background-repeat: round;}
/* SGIS4_220211_도시화_수정_끝 */
.urbanTuto .tutoClose {padding: 10px 60px;border-radius: 35px;background-color: #bb902f;bottom: 30px;position: absolute;left: 0;right: 0;margin-left: auto;font-size: 16px;font-weight: 600;margin-right: auto;color: white;width: 165px;}
.urbanTuto .tutoClose:hover {background-color:#1a1e6f;}

/* 알럿팝업(common.css) 시작 */
.popupWrapper{background:rgba(0,0,0,0.8); position: absolute; top: 0; width: 100%; height: 100%; z-index: 999999;}
.alertPopupWrapper{border:1px solid #ccc;background:#fff;width:400px;height:auto;overflow:hidden;position:absolute;left:50%;margin-left:-200px;font-family: "나눔고딕";font-size:14px;}
.alertPopupWrapper .topbar{border-bottom:1px solid #ccc;width:100%;height:32px;line-height:32px;overflow:hidden;background:#f5f5f5;position:relative;}
.alertPopupWrapper .topbar>span{display:block;margin:0 0 0 10px}
.alertPopupWrapper .topbar a{opacity:.4;display:block;width:32px;height:32px;overflow:hidden;position:absolute;right:0;top:0;background:url(/img/ico/ico_close01.png) no-repeat center center;text-indent:-2000px;  transition-duration: .3s; transition-property: transform; transition-timing-function: ease-in-out; cursor: pointer; }
.alertPopupWrapper .topbar a:hover{transform: rotate(90deg);opacity:1;}
.alertPopupWrapper .popContents{width:100%;height:auto;overflow:hidden;padding:15px 0;}
.alertPopupWrapper .txt{position:relative;display:block;height:auto;padding-left:15px;overflow:hidden;margin:5px 0 0 72px;color:#666;font-size:11px;line-height:1.5em;text-align:left;}
.alertPopupWrapper .txt:before{content:"※";font-size:13px;position:absolute;left:0;top:0;}
.alertPopupWrapper .btnBox{width:100%; height:auto; overflow:hidden;margin:15px auto 0 auto;text-align:center;}
.alertPopupWrapper .messageBox{ width:90%; height:auto; overflow:hidden; text-align:center; margin:20px auto;line-height:25px;font-weight: 300;}
.alertPopupWrapper .btnStyle01 {display:inline-block;padding:5px 10px;font-size:13px;height:30px;line-height:20px;background:#dcdcdc;color:#666;margin:0 5px; cursor: pointer; }
.alertPopupWrapper .btnStyle01:hover, .btnStyle01:focus,.btnStyle01.on{background:#4283ec;color:#fff} /* 2017.12.21 [개발팀] 접근성시정조치 */
/* 알럿팝업(common.css) 끝 */

/* toggle button */
.colorMapLegend{float: left;margin-top: 11px;width: 130px;}
.colorMapLegend a.switchBox{position:relative;display:block;width: 120px;height:24px;margin:0 auto;border-radius: 12px;background:#1778cc;box-shadow:0 0 2px #a4a4a4 inset;overflow:  hidden;}
/* SGIS4_220211_도시화_수정_시작 */
.colorMapLegend a.switchBox .ball{position:absolute;top: 2px;left: 98px;overflow:hidden;width:20px;height:20px;border-radius:100%;background:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.2),0 3px 4px 0 rgba(0,0,0,.1);padding-left: 7px;padding-top: 3px;font-size: 13px;color: #878c8f;}
/* SGIS4_220211_도시화_수정_끝 */
.colorMapLegend a.switchBox .txt{font-size: 14px;line-height:24px;position:absolute;top:0px;left:8px;overflow:hidden;width: 90px;height: 24px;text-align:center;color:#fff;border-radius:100%;}
.colorMapLegend a.switchBox .txt:before{content:'UN 도시 분류';}
.colorMapLegend a.switchBox.off{background:#e05858;box-shadow:0 0 2px #579022 inset;}
.colorMapLegend a.switchBox.off .txt:before{content:'통계청 분류';}
.colorMapLegend a.switchBox.off .ball{left: 2px;}
.colorMapLegend a.switchBox.off .txt{left: 22px;}

/* SGIS4_220211_도시화_수정_시작 */
/* tooltip */
/*.ui-tooltip{line-height:1em;padding:10px;color:#666;border:1px solid #dcdcdc!important;box-shadow:none;}*/
.ui-tooltip *{font-size:11.5px!important;line-height:1.8em;word-spacing:0.1em;font-weight:normal;}
.ui-tooltip .subj{font-weight:bold;line-height:20px;display:block;height:20px;margin:0 0 5px 0;padding-left:20px;background:url(/img/ico/ico_tooltip.png) no-repeat 5px center;}
.ui-tooltip .ui-tooltip-content p.subH{padding-left:7px;}
.ui-tooltip .ui-tooltip-content p.subH.indent2{padding-left: 15px;}
.ui-tooltip .ui-tooltip-content p.subC{padding-left:15px;padding-right:5px;}
.ui-tooltip .ui-tooltip-content p.subC.indent1{padding-left: 23px;}
.ui-tooltip .ui-tooltip-content p.subC.indent3{padding-left: 23px;}
.ui-tooltip .ui-tooltip-content .mb5{margin-bottom: 5px;}
.ui-tooltip .ui-tooltip-content span.bol{font-weight:bold;}
.ui-tooltip .ui-tooltip-content .att{color:#3792de;font-size:10.5px!important;}
.ui-tooltip .ui-tooltip-content .tip_sec01{background:#c4e5d3 /*#dfebfa*/; border-radius:10px;/*width:100%;*/margin:5px 10px 5px 15px;padding:10px 7px 10px 5px;}
.ui-tooltip .bottom{height:0;}
.ui-tooltip{pointer-events: none;}
.ui-tooltip .ui-tooltip-content .subT{border-collapse: collapse;border-top: 3px solid #168;border-bottom: 3px solid #168;}
.ui-tooltip .ui-tooltip-content .subT th, .subT td {padding: 10px;border: 1px solid #ddd;}
.ui-tooltip .ui-tooltip-content .subT th {color: #168;background: #f0f6f9;text-align: center;}
.ui-tooltip .ui-tooltip-content .subT td {text-align: center;}
/* SGIS4_220211_도시화_수정_끝 */

/* SGIS4_도시화 sns_공유 시작*/
.commonUrbanPopupWrap {
	display : none;
	position: fixed;
    left: 50%;
    top: 50%;
    z-index: 10000;
    width: 540px;
    border-radius: 5px;
    boxShadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transform: translate(-50%, -50%);
	msTransform: translate(-50%, -50%);
    webkitTransform: translate(-50%, -50%);
}
.commonUrbanPopTit {
	padding: 8px 11px 8px 20px;
    background-color: #1586d6;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.commonUrbanPopTit > h1 {
	color: white;
	font-size: 14px;
	display: inline-block;
}
.commonUrbanPopcloseBtn {
    width: 15px;
    height: 15px;
    outline: none;
    border: 0;
    background: url(/images/totSurv/MovedeleteBtn.png) no-repeat center;
    background-size: 13px;
    cursor: pointer;
    float: right;
}
.commonUrbanPopCon {
	padding: 8px;
	background-color: #454d5a;
	border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.shareWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'NanumSquare';
}

.shareRow {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.shareRow > input[type="text"] {
    border: 2px solid #ccc;
    padding: 9px 10px;
    border-radius: 5px;
    width: 415px;
}

.shareRow > button {
	margin:0 5px;
	font-size:15px !important;
}

.kakao {
  background: url(/images/totSurv/kakao.png) #FCB316 no-repeat;
  width: 120px;
  padding: 9px 10px 9px 20px;
  border-radius: 5px;
  color: white;
  background-position: 10px center;
}

.kakao:hover, .kakao.on {
  background: url(/images/totSurv/kakao.png) #dd9c10 no-repeat;
  background-position: 10px center;
  padding: 9px 10px 9px 20px;
}

.twitter {
  background: url(/images/totSurv/twitter.png) #2AA8E0 no-repeat;
  width: 120px;
  padding: 9px 10px 9px 25px;
  border-radius: 5px;
  color: white;
  background-position: 10px center;
}

.twitter:hover, .twitter.on {
  background: url(/images/totSurv/twitter.png) #0293d3 no-repeat;
  background-position: 10px center;
  padding: 9px 10px 9px 25px;
}

.face {
  background: url(/images/totSurv/facebook.png) #4670B7 no-repeat;
  width: 120px;
  padding: 9px 10px 9px 30px;
  border-radius: 5px;
  color: white;
  background-position: 10px center;
}

.face:hover, .face.on {
  background: url(/images/totSurv/facebook.png) #325795 no-repeat;
  background-position: 10px center;
  padding: 9px 10px 9px 30px;
}

.band {
  background: url(/images/totSurv/band.png) #19CE60 no-repeat;
  width: 120px;
  padding: 9px 10px 9px 30px;
  border-radius: 5px;
  color: white;
  background-position: 10px center;
}

.band:hover, .band.on {
  background: url(/images/totSurv/band.png) #0D9A44 no-repeat;
  background-position: 10px center;
  padding: 9px 10px 9px 30px;
}

.shareRowBtn {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10px;
	width: 92%;
	align-items: center;
	justify-content: center;
	border-top: 1px solid #747a82;
	padding-top: 18px;
}
.shareRowBtn {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10px;
	width: 92%;
	align-items: center;
	justify-content: center;
	border-top: 1px solid #747a82;
	padding-top: 18px;
}

.urlcopy {
  background-color:#87909d;
  color: white;
  width: 120px;
  padding: 9px 10px;
  border-radius: 5px;
  margin:0 5px;
}

.urlcopy:hover, .urlcopy.on {
  background-color:#6c737e;
}

.txtClose {
  background-color:#F5F5F6;
  color: rgb(37, 40, 36);
  width: 120px;
  padding: 9px 10px;
  border-radius: 5px;
  font-weight: bold;
  margin:0 5px;
}

.txtClose:hover, .txtClose.on {
  background-color:#717985;
  color: white;
}
.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}
.dim {
  display: none;
  z-index : 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}


.marker_cluster { background:url(/js/plugins/jquery-easyui-1.4/images/markercluster/markercluster-7.png) no-repeat center center; background-size:60px; width:60px; height:60px; }
.marker_cluster span { font-size:13px; font-weight:bold; line-height:60px; color:#fff; display:block; width:100%; text-align:center; }

/* SGIS4_도시화  sns_공유 끝 */