@charset "utf-8";
/* CSS Document */

/*******************
수질TMS 배출량 공개시스템
CSS : main.css (old main - 현 실시간 측정자료 : 측정자료(GIS)
update : 2024.09.12.
*******************/

.wrap.main{ background:url(../images/common/main_bg.jpg); background-size:cover;}
.map_wrap .map_top:after{ content:""; display:block; clear:both; }

.map_wrap{ margin:0 auto; background-color: #fff; width: 100%; height:calc(100vh - 120px); }
.map_wrap .map_top{ border-left: 10px solid #1a9ad6; border-top: 10px solid #1a9ad6; border-right: 10px solid #1a9ad6; border-radius:10px 10px 0 0; text-align:center; padding:16px 0;}
.map_top select{ width:100%; border:1px solid #c8c8c8; padding-left:20px; font-family:'Nanumgothic';background:url(../images/common/arrow_02_down.png) no-repeat right 20px center #fff;  border-radius:30px;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance : none;}
.map_top > ul{ display:inline-block; text-align:justify; background:#fff;}
.map_top > ul > li{ float:left; height:38px;  width:250px; position:relative; margin-right:10px;}
.map_top a.op_tit{ border: 1px solid #c8c8c8; border-radius:50px; line-height:36px; height:36px; padding:0 20px; background:url(../images/common/arrow_02_down.png) no-repeat right 20px center #fff; position:absolute; width:100%; z-index:4}
.map_top a.op_tit.on{ background:url(../images/common/arrow_02_up.png) no-repeat right 20px center #fff; transition: all .15s;}
.map_top li:nth-child(3) a.op_tit{ border:1px solid #1a9ad6; color:#1a9ad6; background:url(../images/common/arrow_03_down.png) no-repeat right 20px center #fff;}
.map_top li:nth-child(3) select{ border:1px solid #1a9ad6; background:url(../images/common/arrow_03_down.png) no-repeat right 20px center #fff;}
.map_top li:nth-child(3) a.op_tit.on{background:url(../images/common/arrow_03_up.png) no-repeat right 20px center #fff;}
.map_top ul.op_cont{ position:absolute; border: 1px solid #c8c8c8; width:100%; border-radius:10px; padding:35px 15px 15px 15px; background:#fff; top:10px; display:none; z-index:3;}
.map_top ul.op_cont li a{ font-size:13px; letter-spacing:-1px; display:block; padding:4px 0;}
.map_top li:nth-child(3) ul.op_cont{ position:absolute; border: 1px solid #1a9ad6; }
.map_top li:last-child input{ width:80%; border:none; border-bottom:2px solid #c8c8c8; float:left;}
.of_search{ background:url(../images/common/icon_zoom.png) no-repeat center #3e495f; display:inline-block; width:36px; height:36px; border-radius:3px; float:left;}

/* 지도영역 */
.map_area { border: 4px solid #c8c8c8;width:100%; position:relative; height:764px;}

/* 팝업 */
.popup_layout {background:#3e495f; border-radius:5px; position:absolute; width:380px; right:20px; top:60px;
	box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2)  ; 
	-webkit-box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2)  ; 
	-moz-box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2)  ; 
}
.popup_top{background:#3e495f; border-radius:5px; padding:16px 5px; text-align:center; color:#abb1bd; font-size:13px; font-family: 'NotoKrL';}
.popup_top .popupText{}
.popup_tit{ color:#fff; letter-spacing:-1px; width:100%; background:url(../images/common/wave.png) repeat-x bottom #3e495f; padding:0 0 20px 0; text-align:center; font-size:28px; margin-top:-5px;}
.popup_btn { float:right; }
.popup_btn a { display:inline-block ; }
a.min { display:inline-block ; float:right;}
.popup_cont_warp { background:#fff; width:100%; position:relative; border-radius:0 0 5px 5px;}
.popup_cont{ margin-bottom:10px; padding:0 20px;}
.popup_cont .tit{ padding:10px 0 10px 28px; background:url(../images/common/p_tit01.png) no-repeat left center; font-size:18px; position:relative;}
.popup_cont .tit select{ position:absolute; right:0; top:6px; height:30px; line-height:30px;}
.popup_cont .scroll{ height:310px;}
.popup_bottom{border-radius:0 0 5px 5px; background:url(../images/common/wave_bottom.png) repeat-x top #eff2f8; padding:5px 20px 0px 20px;}
.popup_bottom p{ color:#646464; font-size:13px; padding:10px 20px 10px 40px; background:url(../images/common/icon_info.png) no-repeat left center; word-break: keep-all; }
.popup_layout .selt_option{ text-align:center; position:relative;}
.popup_layout .selt_option .selted a{ display:inline-block; border: 2px solid #1a9ad6; width:200px; padding:6px 0; border-radius:30px; background:url(../images/common/arrow_03_down.png) no-repeat right 15px center #fff; position:absolute; left: 50%; transform: translateX(-50%); top:-25px; z-index:4;}
.popup_layout .selt_option .selted.on a{ background:url(../images/common/arrow_03_up.png) no-repeat right 15px center #fff;}
.popup_layout .selt_option ul{border: 2px solid #1a9ad6; border-radius:0 0 10px 10px; width:200px; background:#fff; position:absolute; left: 50%; transform: translateX(-50%); top:-5px; padding:25px 8px 10px 8px; z-index:3; display:none;}
.popup_layout .selt_option ul li{}
.popup_layout .selt_option ul a{ display:block; padding:4px 0;}
.popup_layout .selt_option ul a:hover{ background:#fffbe9;}
.popup_layout .min { background:url(../images/common/arrow_05_down.png) no-repeat left center; text-indent:-10000px;  width:48px; height:46px; position:absolute; top:2px; right:10px;}
.popup_layout .min.on { background:url(../images/common/arrow_04_up.png) no-repeat left center; }

.tit_corp{ margin-top:10px; margin-bottom:10px; background:url(../images/common/tit02.png) no-repeat; line-height:24px; line-height:24p; padding-left:7%; padding-bottom:10px; border-bottom:2px solid #000}
.tit_corp a{ display:block; background:url(../images/common/arrow_03_down.png) no-repeat right center; font-size:18px; font-family: 'NotoKrM';}
.tit_corp.on a{ display:block; background:url(../images/common/arrow_02_up.png) no-repeat right center;}
.corp_info{}
.corp_info li{ font-size:14px; overflow:hidden; word-break: keep-all; margin-bottom:2px;}
.corp_info span{ color:#0061b7;position:relative; padding-left:8px; float:left; line-height:24px; margin-right:10px;}
.corp_info span:before{content: ''; position: absolute; top:9px; left:0px; width:4px; height:4px; background:#0d8ad0;}

/* 팝업 : 상태 표시 */
.sta{ width:64px; text-align:center; color:#fff; border-radius:3px; padding:4px 0; display:inline-block; font-size:13px;}
.tb_01{ background-color:#237be8;} /* 정상 */
.tb_02{ background-color:#ffc21f;} /* 주의보 */
.tb_03{ background-color:#dc1b00;} /* 기준초과 */
.tb_04{ background-color:#393939;} /* 미수신 */
.tb_05{ background-color:#fff; border:1px solid #0b0907; color:#0b0907;} /* 비정상 */
.tb_06{ background-color:#fff; border:1px solid #0b0907; color:#0b0907;} /* 점검중 */

/* 그래프 팝업 */
.popup_graph{ position:absolute; width:924px; background:#eff2f8; border: 1px solid #373e4d; padding:14px; top:150px; right:440px; z-index:6;
	box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2)  ; 
	-webkit-box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2)  ; 
	-moz-box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.2)  ; 
	}
.popup_graph .cont{ background:#fff; border-radius:10px; padding:20px;}
.popup_graph_top{ position:relative; border-bottom:2px solid #373e4d; padding-bottom:10px; margin-bottom:15px;}
.popup_graph_top .tit{ font-size:28px; margin-right:10px;}
.popup_graph_top .info{ color:#646464; font-size:14px; letter-spacing:-1px;}
.popup_graph_top .btn_close{ background:#1a9ad6; display:inline-block; padding:6px 8px; color:#fff; border-radius: 5px; position:absolute; right:0; top:4px;}
.popup_graph .info_time{ color:#1a9ad6; margin-bottom:15px;}
.popup_graph .graph{}

/* 지도 포인트 */
.m_p{ position:absolute; z-index:2}
.m_cont{ position:relative;}

.m_p_info{ border: 1px solid #373e4d; text-align:center; display:inline-block; border-radius:5px; position: absolute; font-size:12px; width:355px;  left: 50%; transform: translateX(-50%); top:-100px;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3)  ; 
	-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3)  ; 
	-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3)  ; 
	}
.m_p_info:after{content:""; background:url(../images/main/m_info_bottom.png) no-repeat; position:absolute; width:10px; height:13px; left: 50%; transform: translateX(-50%);}
.m_p_info dt{ background:#f5f5f5; padding:4px; border-radius:5px 5px 0 0; font-size:18px;}
.m_p_info dd{ background:#fff; padding:6px; border-radius:0 0 5px 5px; font-size:14px;}

.p_legend{ position:absolute; padding:15px; border:1px solid #373e4d; border-radius:3px; background:#fff; left:5%; bottom:20%;}
.p_legend li{font-size:12px; font-family:"Dotum"; padding:4px 0;}
.p_legend li span{ display:inline-block; width:10px; height:10px; border-radius:50px;}
.p_legend li:nth-child(1) span{ background:#237be8; border: 1px solid #0e6adb;}
.p_legend li:nth-child(2) span{ background:#dc1b00; border: 1px solid #c81800;}
.p_legend li:nth-child(3) span{ background:#ffc21f; border: 1px solid #ffbe12;}
.p_legend li:nth-child(4) span{ background:#393939; border: 1px solid #242424;}
.p_legend li:nth-child(5) span{ background:#fff; border: 1px solid #424242;}

#footer{ margin-top:-2px;}

@media (max-width:1024px) {	
	.map_wrap{ width:100%;}
	.map_wrap .map_top{ border:none; padding:15px 0 15px 20px; border-bottom:2px solid #c8c8c8; background:#fff; position:relative; z-index:6; border-radius:0;}
	.map_wrap .map_top > ul{ display:inherit;}
	.map_top > ul > li{ width:31%; margin-right:2%}
	.map_top > ul > li:nth-child(3){ margin-right:0;}

	.map_top > ul > li:nth-child(4){ margin:0 0 0 0;}
	.map_top ul li:nth-child(1) .op_tit{ z-index:5;}
	.map_top ul li:nth-child(2) .op_tit{ z-index:4}
	.map_top ul li:nth-child(3) .op_tit{ z-index:3}
	.map_top ul li:nth-child(1) .op_cont{ z-index:4}
	.map_top ul li:nth-child(2) .op_cont{ z-index:3}
	.map_top ul li:nth-child(3) .op_cont{ z-index:2}
	.map_top ul li:nth-child(4){ z-index:2;}
	.map_top ul.op_cont li a{ display:block; padding:4px 0;}
	.map_top > ul > li{ height:auto;}

	.popup_layout{ width:100%; right:0; border-radius:0; top:0; z-index:4; top:-600px;}
	.popup_cont{ margin-top:4px;}
	.popup_cont .tit{background-size:16px; font-size:14px; padding: 6px 0px 6px 20px;}
	.popup_top{ padding:10px 0 4px 0; font-size:13px;}
	.popup_tit{ font-size:28px;}
	.popup_cont .tit select{ position:absolute; right:0; top:-2px; height:24px; line-height:24px; font-size:12px;}
	.popup_top .min{ display:none;}
	.popup_bottom { border-radius:0; padding:10px; background:#eff2f8;}
	.popup_bottom p{ padding:0 0 0 20px; background:url(../images/common/icon_info.png) no-repeat left top 2px; background-size:16px; font-size:12px;}
	.switch_up{ position: absolute; left: 50%; transform:translateX(-50%); bottom:-26px; display: block; width: 48px; height: 46px; cursor: pointer; z-index: 3; background:url(../images/common/arrow_05_up.png) no-repeat;}
	.switch_down{ position: absolute; left: 50%; transform:translateX(-50%); bottom:-26px; display: block; width: 48px; height: 46px; cursor: pointer; z-index: 3; background:url(../images/common/arrow_04_down.png) no-repeat; z-index:100;}
	
	.popup_layout .table_p01 th,
	.popup_layout .table_p01 td{ font-size:12px; padding:3px 0;}
	.popup_cont .scroll{ height:200px;}
	.popup_cont{ margin:10px 0 0 0;}
	
	.popup_graph{ position:absolute; width:100%; background:#eff2f8; border:none; padding:20px; top:0; right:0; border:0; z-index:6}
	.popup_graph_top .tit{ font-size:24px; margin-right:10px;}
	.popup_graph_top .info{ color:#646464; font-size:14px; display:block; line-height:18px;}
	.popup_graph .info_time{ margin-bottom:5px; font-size:14px;}
	.popup_graph_top .btn_close{ top:0;  padding:4px 8px;}
	.popup_layout .selt_option .selted a{ display:inline-block; border: 2px solid #1a9ad6; width:200px; padding:4px 0; border-radius:30px; background:url(../images/common/arrow_03_down.png) no-repeat right 15px center #fff; position:absolute; left: 50%; transform: translateX(-50%); top:-25px; z-index:4;}
	.map_top select{ width:100%; border:1px solid #c8c8c8; padding-left:10px; font-family:'Nanumgothic';background:url(../images/common/arrow_02_down.png) no-repeat right 10px center #fff; background-size:15px;  border-radius:30px; height: 30px; line-height: 30px; font-size:13px;}
	.map_top li:last-child input{ line-height:30px; height: 30px; line-height: 30px; font-size:13px;}
	.map_top li:nth-child(3) select{ background:url(../images/common/arrow_03_down.png) no-repeat right 10px center #fff; background-size:15px;}
	
	.sta{ width:64px; text-align:center; color:#fff; border-radius:3px; padding:1px 0; display:inline-block; font-size:12px;}
	.tb_05{ background-color:#fff; border:1px solid #0b0907; color:#0b0907;} /* 비정상 */
	.tb_06{ background-color:#fff; border:1px solid #0b0907; color:#0b0907;} /* 점검중 */
	.map_wrap{ width:100%; height:calc(100vh - 40px);}
	.map_area {height: 100%; border:none; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; overflow: hidden;}
	.of_search{ width:20%; height: 30px;}
	
	.tit_corp{ margin-top:5px; margin-bottom:5px; background:url(../images/common/tit02.png) no-repeat; background-size:14px; line-height:20px; line-height:20p; padding-left:5%; padding-bottom:5px; border-bottom:2px solid #000}
	.tit_corp a{ display:block; background:url(../images/common/arrow_03_down.png) no-repeat right center; font-size:14px; font-family: 'NotoKrM';}
	.corp_info{}
	.corp_info li{ font-size:12px; overflow:hidden; word-break: keep-all; margin-bottom:2px;}
	.corp_info span{ color:#0061b7;position:relative; padding-left:8px; float:left; line-height:20px; margin-right:10px;}
	.corp_info span:before{content: ''; position: absolute; top:9px; left:0px; width:4px; height:4px; background:#0d8ad0;}
}