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

/* 선별/확정 범례 */
.ch_legend{ }
.ch_legend span{ padding-right:10px;}
.ch_legend span em{ border:1px solid green; display:inline-block; width:12px; height:12px; border:1px solid #232323;}
.ch_legend span:nth-child(1) em{ background:#c4e7f5;}
.ch_legend span:nth-child(2) em{ background:#f9e1e4;}

/* 실시간 : 측정기별 실시간 현황 */
.real_item_wrap{ overflow:hidden; width:100%;}
.real_item_wrap > div{}
.real_item_wrap .left_box{ border:1px solid #ddd; border-top:2px solid #005aab; width:346px; height:722px; float:left; padding:14px;}
.real_item_wrap .right_box{ padding-left:30px; float:right; width:calc( 100% - 380px );}

/* 통계 : 대기질 모니터링 */
.table_air_qview{ width:100%; margin-top:20px; border-top:1px solid #ddd; border-left:1px solid #ddd;}
.table_air_qview thead th,
.table_air_qview tbody th,
.table_air_qview tbody td{ font-size:12px; color:#000; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}
.table_air_qview thead th{ background:#f7f7f7; padding:15px 20px; font-family: 'SCDream5'; position:relative;}
.table_air_qview tbody th{ background:#ffffdc; text-align:center;}
.table_air_qview tbody td{ }
.table_air_qview .viewer{ display:table; table-layout:fixed;}
.table_air_qview .viewer li{ display:table-cell; padding:10px 0;}
.table_air_qview .viewer li img{ width:100%;}

.ctr_btn_wrap{ position:absolute; right:20px; top:7px;}

table.su_chk_table{ width:100%; }
table.su_chk_table td{ padding:6px 15px; font-size:13px;}

.boWrapLeft { border:1px solid #005aab; }
.searchbox { background:#f7f7f7; border:1px solid #d4d4d4;  border-top:2px solid #1a498f; padding:15px; }
.division { position:relative; }
.databox { background:#f7f7f7; border:1px solid #d4d4d4; padding:12px 15px; }
.popbtn img { vertical-align:middle; margin-left:5px; }
.popbtn { display: inline-block; }
.databox b { letter-spacing:-1px; font-family:'dotum'; font-size:12px; }
.scroll2 {  overflow:scroll; overflow-x:hidden !important; border-bottom:1px solid #d4d4d4;  border-top:1px solid #d4d4d4;border-left: 1px solid #d4d4d4; } 
.scroll2 table tbody tr:last-child td { border-bottom:0; }

/* 검색 팝업 */
.search_pop_wrap{ padding:10px;}
.search_top{ margin-bottom:10px;}
.search_wrap{ position:relative; padding-left:303px;}
#lnb{ width:283px; position:absolute; left:0; top:0; font-family: 'dotum';}
.search_top table td{ padding:10px; background:#fff;}

.search_cont_wrap{height: 837px;}
.se_tit{ font-family: 'dotum'; font-size:12px; font-weight:bold; position:relative; background:#00abe6; color:#fff; line-height:30px; height:30px; padding-left:24px;}

#viClc.on{background:url(../images/common/dep2_arrow_up2.png) no-repeat right 20px center #00abe6; color:#fff;cursor: pointer;}	
#viClc{background:url(../images/common/dep2_arrow_down2.png) no-repeat right 20px center #00abe6; color:#fff;cursor: pointer;}

.se_tit:before{content: ''; position: absolute; top:9px; left:7px; width:12px; height:12px; background:#213152; border-radius:30px;}
.se_tit:after{content: ''; position: absolute; top:12px; left:10px; width:6px; height:6px; background:#00abe6; border-radius:30px;}
#lnb a.s_btn{ display:inline-block; padding:0 10px; background:#213152; border-radius:30px; color:#fff; font-size:11px; font-weight:normal; line-height:20px; height:20px; position:absolute; right:10px; top: 50%; transform: translateY(-50%);}
#lnb a.s_btn i{ vertical-align:middle; color:#fff;}

table.table1 {border-collapse:collapse;border-bottom:solid 1px #bfbfbf; border-top:solid 1px #dcdcdc; border-right:solid 1px #dcdcdc; width:100%;}
table.table1 th {border-bottom:solid 1px #dcdcdc;padding:8px 3px;}
table.table1 thead th {font-weight:bold;color:#000;background:url(../images/table_bg01.jpg) repeat-x; background-size:contain; text-align:center;font-size:12px;color:#000;border-right:none;}
table.table1 tbody th { font-weight:normal;background-color:#f8f8f8; text-align:left;border-right:none;}
table.table1 tbody label{font-weight:normal;}
table.table1 tbody td {color:#666;border-bottom:solid 1px #dcdcdc;text-align:center;padding:7px 3px;border-right:none;}

table.table1 td.t_left {padding:7px}
table .text01{ border:solid 1px #dcdcdc; padding:2px; width:40px;}

.table_scroll{ overflow:auto; border-top:1px solid #ddd;}
.table_scroll table{ border-top: none !important;}

table.table2 {border-collapse:collapse;border-bottom:solid 1px #dcdcdc;border-top:solid 1px #dcdcdc;border-left:solid 1px #bfbfbf;width:100%}
table.table2 th {border-bottom:solid 1px #dcdcdc;border-right:solid 1px #dcdcdc;background-color:#f8f8f8;padding:8px 3px;text-align:center;font-size:12px;color:#393939}
table.table2 thead th {font-weight:bold;color:#000;background:url(../img/table_bg01.jpg) repeat-x}
table.table2 td {color:#000;border-bottom:solid 1px #dcdcdc;border-right:solid 1px #dcdcdc;text-align:center;padding:7px 0;font-size:11px; letter-spacing:-1px}
table.table2.color th {background-image:none}
table.table2 .sp02{ background:#ed1c21; color:#fff;}
table.table2 .sp03{ background:#f1671f; color:#fff;}
table.table2 .sp04{ background:#fdc401; color:#fff;}
table.table2 .sp05{ background:#48b84a; color:#fff;}
table.table2 .sp06{ background:#2c318f; color:#fff;}
table.table2 .sp07{ background:#8c2590; color:#fff;}

table.table3 {border-collapse:collapse;border-bottom:none; border-top:none; width:100%;}
table.table3 tbody td {color:#000;border-bottom:solid 1px #dcdcdc;padding:5px 3px 5px 38px;}
table.table3 .ch_on{ background:url(../images/sub/icon_ch_on.png) no-repeat left 12px center #ffefef;}

/* All Check */
table.table3 .ch1_on{ background:url(../images/sub/icon_ch_on.png) no-repeat left 12px center, url(../images/sub/icon_ch_on.png) no-repeat right 12px center #ffefef; color: #000;}      /* 1단계 */
table.table3 .ch2_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center, url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #ed1c21; color:#fff;} /* 2단계 */
table.table3 .ch3_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center, url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #f1671f; color:#fff;} /* 3단계 */
table.table3 .ch4_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center, url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #fdc401; color:#fff;} /* 4단계 */
table.table3 .ch5_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center, url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #48b84a; color:#fff;} /* 5단계 */
table.table3 .ch6_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center, url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #2c318f; color:#fff;} /* 6단계 */
table.table3 .ch7_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center, url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #8c2590; color:#fff;} /* 7단계 */

/* Left Check */
table.table3 .ch1L_on{ background:url(../images/sub/icon_ch_on.png) no-repeat left 12px center;color: #000;}            /* 1단계 */
table.table3 .ch2L_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center #ed1c21; color:#fff;} /* 2단계 */
table.table3 .ch3L_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center #f1671f; color:#fff;} /* 3단계 */
table.table3 .ch4L_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center #fdc401; color:#fff;} /* 4단계 */
table.table3 .ch5L_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center #48b84a; color:#fff;} /* 5단계 */
table.table3 .ch6L_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center #2c318f; color:#fff;} /* 6단계 */
table.table3 .ch7L_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat left 12px center #8c2590; color:#fff;} /* 7단계 */

/* right Check */
table.table3 .ch1R_on{ background:url(../images/sub/icon_ch_on.png) no-repeat right 12px center;color: #000;}                        /* 1단계 */
table.table3 .ch2R_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #ed1c21; color:#fff;} /* 2단계 */
table.table3 .ch3R_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #f1671f; color:#fff;} /* 3단계 */
table.table3 .ch4R_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #fdc401; color:#fff;} /* 4단계 */
table.table3 .ch5R_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #48b84a; color:#fff;} /* 5단계 */
table.table3 .ch6R_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #2c318f; color:#fff;} /* 6단계 */

table.table3 .ch1{ color: #000;}            /* 1단계 */
table.table3 .ch2{ background: #ed1c21; color:#fff;} /* 2단계 */
table.table3 .ch3{ background: #f1671f; color:#fff;} /* 3단계 */
table.table3 .ch4{ background: #fdc401; color:#fff;} /* 4단계 */
table.table3 .ch5{ background: #48b84a; color:#fff;} /* 5단계 */
table.table3 .ch6{ background: #2c318f; color:#fff;} /* 6단계 */
table.table3 .ch7{ background: #8c2590; color:#fff;} /* 7단계 */

table.table3 .ch7R_on{ background:url(../images/sub/icon_ch_wh_on.png) no-repeat right 12px center #8c2590; color:#fff;} /* 7단계 */

/* .search_pop_wrap, .data_wrap{ overflow:auto;} */

.tab3 { border-left: 1px solid #213152; border-top: 1px solid #213152; border-right: 1px solid #213152; display:table; width:100%; box-sizing:border-box;}
.tab3 li {text-align: center; padding:8px 0; background:#fff;  color:#213152; font-size: 12px; font-weight:bold; display:table-cell; cursor:pointer;}
.tab3 li:first-child {}

.tab3 li.active { color:#fff; background:#213152;}
.tabContent3 { display: none;  }
.active { display: block; }

table.table4 {border-collapse:collapse; border:none; width:100%;}
table.table4 th {border-bottom:solid 1px #dcdcdc;padding:8px 3px;}
table.table4 thead th {font-weight:bold;color:#000;background:url(../images/sub/table_bg01.jpg) repeat-x; background-size:contain; text-align:center;font-size:12px;color:#000;border-right:none;  border-top:solid 1px #dcdcdc;}
table.table4 thead tr{border-left:solid 1px #dcdcdc; border-right:solid 1px #dcdcdc;}

table.table4 tbody th { font-weight:normal;background-color:#f8f8f8; text-align:left;border-right:none;}
table.table4 tbody label{font-weight:normal;}
table.table4 tbody td {color:#666;border-bottom:solid 1px #dcdcdc;text-align:center;padding:7px 3px;border-right:none;}

.scroll4 { overflow:auto; border-bottom:1px solid #dcdcdc; border-right:1px solid #dcdcdc; border-left:1px solid #dcdcdc}

.data_sel{}
.data_sel img{ vertical-align:middle;}
.data_sel .d_tit{ border:1px solid #dcdcdc; padding:8px 10px; font-size:12px; font-weight:bold; background:#f8f8f8; position:relative;}
.data_sel .cont{ padding:10px; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;}

/* 유관기관자료 : 수질측정망 현황 : 지도 */
.wq_wrap{ overflow:hidden; min-width:1600px;}
.wq_map{ position:relative; width:450px; height:707px; overflow:hidden; border:2px solid #315298; border-radius:10px; margin-top:20px; float:left;}
.wq_data{ width:calc( 100% - 490px ); vertical-align:middle; float:left; margin-left:30px;}