/* CSS Document */

/*화면 전체틀*/

#main_wrap { padding: 25px 0; background: #e7f1fb; margin-top: 1px; }
#main_conts { }
#main_conts:after { display: block; clear: both; content: ''; }
#sect_left { width: 700px; float: left; /*background: #fff;*/ }
#sect_right { width: 450px; float: right; }

#sect_right { }
#sect_right> li { background: #fff; border: 1px solid #bcd0db; margin-bottom: 15px; position: relative; }
#sect_right> li:last-child { margin-bottom: 0px; }
.img_list img { position: absolute; left: 0px; top: 0px; display: none; z-index: 5555; }
.img_guide> img { z-index: 1; position: relative; }




/*오늘내일모레*/
#mainCnt01 { /*height: 200px;*/ padding: 20px; position: relative; }
.rolling_panel { }
.rolling_panel a:hover { text-decoration: underline; }
.rolling_panel> div { width: 67px; height: 58px; background: url(/eng/images/main_2018/icon5.gif) no-repeat; }
.rolling_panel ul { margin-top: 6px; }
.rolling_panel ul> li { padding-left: 10px; margin-bottom: 5px; font-family: Dotum; font-size: 12px; letter-spacing: -1px; background: url(/eng/images/main_2018/blit1.gif) left 1px no-repeat; }
.rolling_panel ul> li:last-child { margin-bottom: 0px; }

.rolling_panel em { padding: 1px 2px; margin-right: 5px; color: #fff; }
.day1 { background: #638ba9; border: 1px solid #3a6280; }
.day2 { background: #6f85a6; border: 1px solid #4b5774; }
.day3 { background: #565d6f; border: 1px solid #424554; }

.kind1 { color: #3a6280; }
.kind2 { color: #4b5774; }
.kind3 { color: #424554; }
.kind4 { color: #F00; }
.kind5 { color: #0065c7; }

.all_view { font-size: 12px; font-family: Dotum; font-size: 11px; font-weight: bold; letter-spacing: -1px; text-decoration: underline; position: absolute; left: 10px; top: 5px; }






#mainCnt02 { /*height: 200px;*/ padding: 20px; position: relative; }
#main_conts h3 { font-family: 'env_B'; font-size: 22px; text-align: left; }
#main_conts h3> span { color: #1657a3; }
#main_conts h3> span.sky { color: #00b6d7; }
/*#sect_right p { font-family: Dotum; font-size: 11px; color: #555; letter-spacing: -1px; margin-top: 7px; }
#mainCnt02 p b { color: #1657a3; font-size: 14px; }*/


/*우리동네 대기질 정보*/
.btn3 { width: 85px; height: 20px; padding-top: 7px; color: #fff; background: url(/eng/images/main_2018/btn3.png) no-repeat; font-family: Dotum; font-size: 11px; letter-spacing: -1px; display: block; text-indent: 10px; position: absolute; right: 10px; top: 10px; } 
#aq_info { height: 130px; padding: 0 10px; border: 1px solid #becbd4; margin-top: 3px; background: url(/eng/images/main_2018/ban_bg2.gif) repeat-x; position: relative; }
#aq_info> div { position: relative; }
#aq_info> div:nth-child(2) { margin-left: 10px; width: 222px; height: 105px; margin-top: 25px; }
.step { width: 164px; height: 44px; padding-top: 37px; margin-top: 13px; text-align: center; color: #fff; font-size: 22px; font-family: 'notokr-bold'; }
.step span { display: block; font-size: 11px; margin-top: -6px; }
.grade1 { background: url(/eng/images/main_2018/grade1.png) no-repeat; } 
.grade2 { background: url(/eng/images/main_2018/grade2.png) no-repeat; } 
.grade3 { background: url(/eng/images/main_2018/grade3.png) no-repeat; } 
.grade4 { background: url(/eng/images/main_2018/grade4.png) no-repeat; } 
.btn_grede { width: 67px; height: 17px; padding-top: 5px; margin: 6px auto 0 auto; background: url(/eng/images/main_2018/btn2.png) no-repeat; text-align: center; color: #3e3e3e; font-size: 11px; font-family: Dotum; letter-spacing: -1px; display: block; }

.dust { }
.dust dt { background: url(/eng/images/main_2018/blit2.gif) left 3px no-repeat; padding-left: 22px; letter-spacing: -1px; font-size: 16px; font-family: 'notokr-bold'; }
.dust dd { padding-left: 8px; margin-top: 10px; margin-left: 4px; font-family: Dotum; font-size: 12px; background: url(/eng/images/main_2018/blit3.gif) left 5px no-repeat; color: #383838; }
.chr { width: 56px; height: 72px; position: absolute; right: 10px; bottom: 10px; }
.lv1 { background: url(/eng/images/main_2018/211_character01.png) no-repeat; background-size: 56px 72px;}
.lv2 { background: url(/eng/images/main_2018/211_character02.png) no-repeat; }
.lv3 { background: url(/eng/images/main_2018/211_character03.png) no-repeat; }
.lv4 { background: url(/eng/images/main_2018/211_character04.png) no-repeat; }

.zone_info { position: absolute; right: 5px; top: 5px; color: #606060; font-family: Dotum; font-size: 11px; letter-spacing: 0px; }
.reset { width: 23px; height: 23px; margin-left: 4px; border: 1px solid #bfc8d7; background: url(/eng/images/main_2018/icon_reset.gif) center center no-repeat; display: inline-block; vertical-align: middle; }

.st_3 { width: 100%; border-top: 2px solid #167dcc; }
.st_3> thead { background: #fff; } 
.st_3> thead> tr {  } 
.st_3> thead> tr> th { padding: 8px 0; font-weight: bold; letter-spacing: -1px; } 
.st_3> tbody { } 
.st_3> tbody> tr { } 
.st_3> tbody> tr> th { padding: 8px 0; background: #edf7ff; font-weight: bold; letter-spacing: -1px; } 

.st_3> tbody> tr> td { padding: 5px; color: #4a4a4a; text-align: center; } 
.st_3 th, .st_3 td { border-bottom: 1px solid #bfccd5; border-right: 1px solid #dae0e7; text-align: center; font-family: Dotum; font-size: 12px; }
.st_3 th:last-child, .st_3 td:last-child { border-right: 0px; }
.st_3> tbody> tr> td:nth-child(3), .st_3> tbody> tr> td:nth-child(6) { text-align: right; font-family: Verdana; }

.trick { padding: 10px; height: 95px; background: #f9f9f9; border: 1px solid #e2e2e2; }
.trick dl { }
.trick dl dt { width: 58px; height: 58px; border: 1px solid #ddd; float: left; text-align: center; position: relative; }
.trick dl dd { width: 125px; height: 60px; margin-left: 5px; float: left; color: #616161; line-height: 15px; }
.trick dl dd a:hover { text-decoration: underline; }
.trick em { width: 58px; padding: 2px 0; position: absolute; left: 0px; bottom: 0px; color: #fff; background: url(/eng/images/main_2018/opacity-bg.png); }
.trick em, .trick dd { font-family: Dotum; font-size: 11px; letter-spacing: -1px; }
.act1 { background: url(/eng/images/main_2018/act1.gif) no-repeat; }
.act2 { background: url(/eng/images/main_2018/act2.gif) no-repeat; }




#mainCnt03 { /*height: 80px;*/ padding: 20px;  }
#mainCnt03> ul:after { display: block; clear: both; content: ''; }
#mainCnt03> ul> li { width: 111px; border-right: 1px solid #bcd0db; text-align: center; float: left; }
#mainCnt03> ul> li:last-child { border-right: 0px; }
#mainCnt03> ul> li> a { height: 25px; padding-top: 55px; display: block; font-size: 13px; letter-spacing: -1px; }
#mainCnt03> ul> li:nth-child(1)> a { background: url(/eng/images/main_2018/icon1.png) center 10px no-repeat; }
#mainCnt03> ul> li:nth-child(2)> a { background: url(/eng/images/main_2018/icon2.png) center 10px no-repeat; }
#mainCnt03> ul> li:nth-child(3)> a { background: url(/eng/images/main_2018/icon3.png) center 10px no-repeat; }
#mainCnt03> ul> li:nth-child(4)> a { background: url(/eng/images/main_2018/icon4.png) center 10px no-repeat; }






/*map*/
.tab_1dep { border: 1px solid #bccfdb; }
.tab_1dep:after { display: block; clear: both; content: ''; }
.tab_1dep> li { float: left; height: 90px; border-right: 1px dotted #bccfdb; text-align: center; /*letter-spacing: -1px;*/ cursor: pointer; background: #fff; }
.tab_1dep> li:last-child { border-right: 0px; }
.tab_1dep> li.ac { background: #014993; color: #fff; }
.tab_1dep> li> em { width: 23px; height: 21px; display: block; margin: 12px auto 7px auto; /*background: url(/eng/images/main_2018/icon_map_2.png) no-repeat;  background-position: 0px 0px;*/ }

.tab_1dep> li:nth-child(1)> em { background: url(/eng/images/main_2018/icon_map_1.png) no-repeat; background-position: 0px 0px; }
.tab_1dep> li:nth-child(2)> em { background: url(/eng/images/main_2018/icon_map_2.png) no-repeat;  background-position: 0px 0px; }
.tab_1dep> li:nth-child(3)> em { background: url(/eng/images/main_2018/icon_map_3.png) no-repeat;  background-position: 0px 0px; }
.tab_1dep> li:nth-child(4)> em { background: url(/eng/images/main_2018/icon_map_4.png) no-repeat;  background-position: 0px 0px; }
.tab_1dep> li:nth-child(5)> em { background: url(/eng/images/main_2018/icon_map_5.png) no-repeat;  background-position: 0px 0px; }
.ad { background: #51779c; color: #fff; }

.tab_1dep> li:nth-child(1).ac em { background-position: -23px 0px; }
.tab_1dep> li:nth-child(2).ac em { background-position: -23px 0px; }
.tab_1dep> li:nth-child(3).ac em { background-position: -23px 0px; }
.tab_1dep> li:nth-child(4).ac em { background-position: -23px 0px; }
.tab_1dep> li:nth-child(5).ac em { background-position: -23px 0px; }


.box { margin-top: 20px; }
.box:after { display: block; clear: both; content: ''; }

/*------20180619시작------*/
.mapleft { width: 230px; float: left; background: #fff; height: 595px; border: 1px solid #bccfdb; }
.tab_2dep { width: 350px; background: #fbfbfb;  }
.tab_2dep> li { padding: 8px 0 8px 20px; border-bottom: 1px solid #bcd0e8; cursor: pointer; position: relative; }
.tab_2dep> li> em { width: 34px; height: 34px; display: inline-block; position: absolute; right: 10px; top: 3px; }
.tab_2dep sub { font-size: 12px; }
.tab_2dep> li.ad em { background-position: -34px 0px; }

.pm10 { background: url(/eng/images/main_2018/left_icon_1.png) no-repeat; background-position: 0px 0px; }
.pm25 { background: url(/eng/images/main_2018/left_icon_2.png) no-repeat; background-position: 0px 0px; }
.o3 { background: url(/eng/images/main_2018/left_icon_3.png) no-repeat; background-position: 0px 0px; }
.no2 { background: url(/eng/images/main_2018/left_icon_4.png) no-repeat; background-position: 0px 0px; }
.co { background: url(/eng/images/main_2018/left_icon_5.png) no-repeat; background-position: 0px 0px; }
.so2 { background: url(/eng/images/main_2018/left_icon_6.png) no-repeat; background-position: 0px 0px; }

.mapleft dl { width: 340px; margin: 10px auto 0 auto; }
.mapleft dl dt { background: url(/eng/images/main_2018/blit2.gif) left 3px no-repeat; padding-left: 20px; font-size: 14px; font-family: 'notokr-bold'; }
.mapleft dl dd { margin-top: 5px; padding: 2px 10px; border: 1px solid #bcd0e8;  }
.mapleft dl dd label { font-family: Verdana; font-size: 11px; vertical-align: middle; }
.mapleft dl dd label span { font-family: Verdana; }
.mapleft dl dd label img { margin-right: 4px; margin-left: 2px; vertical-align: middle; margin-bottom: 2px; }

/*map*/
.map { width: 402px; height: 538px; padding: 20px; border: 3px solid #52779c; background: #fff; float: right; position: relative; }
.submap_add { width: 492px; height: 590px; padding: 0; background: #f4f9ff; }
/*
.map { width: 492px; height: 578px; border: 3px solid #52779c; background: #f4f9ff; float: right; position: relative; }
*/
.view_top { position: absolute; left: 0px; top: 0px; width: 100%; /*background: #ddd;*/ }
.location { background: #414d5d; color: #fff; padding: 5px 10px; }
.location .name { font-size: 15px; }
.location a { height: 13px; margin-top: 3px; display: block; padding-left: 20px; font-family: Verdana; font-size: 11px; background: url(/eng/images/main_2018/icon6.png) left 0px no-repeat;}



.date { margin-top: 5px; padding: 0 10px; }
.time { font-family: Verdana; font-size: 12px; color: #273445; }
.before { width: 100px; height: 26px; background: url(/eng/images/main_2018/btn1.gif) no-repeat; display: block; font-family: Verdana; font-size: 11px; text-indent: 17px; color: #4a4a4a; cursor: pointer; }
/*------20180619끝------*/




.point1> li, .point2> li, .point3> li { width: 10px; height: 10px; display: block; position:absolute; z-index: 29998; cursor: pointer; }

.spot1 { background: url(/eng/images/main_2018/point_1.png) no-repeat; }
.spot2 { background: url(/eng/images/main_2018/point_2.png) no-repeat; }
.spot3 { background: url(/eng/images/main_2018/point_3.png) no-repeat; }
.spot4 { background: url(/eng/images/main_2018/point_4.png) no-repeat; }
.spot5 { background: url(/eng/images/main_2018/point_5.png) no-repeat; }

/*대기경보정보 범례*/
.gui p { font-family: Verdana; font-size: 11px; }
.gui sub { font-family: Verdana; font-size: 8px; }

.ballon { }
.ballon> li { width: 27px; height: 28px; display: block; position:absolute; z-index: 29999; cursor: pointer; }
.siren1 { background: url(/eng/images/main_2018/icon_siren1.png) no-repeat; }
.siren2 { background: url(/eng/images/main_2018/icon_siren2.png) no-repeat; }






/* .tooltip { min-width: 230px; padding: 10px; border: 1px solid #51779c; background: url(/eng/images/main_2018/tt_bg.gif) repeat-x; letter-spacing: -1px; margin: 20px 0 0 20px; z-index: 29998; }
.tooltip:after { display: block; clear: both; content: ''; }
.tooltip dt { margin-right: 5px; font-size: 14px; font-family: 'notokr-bold'; color: #0062c7; float: left; }
.tooltip dd { font-size: 13px; margin-top: 2px; }
.tooltip dt:nth-child(2) { clear: both; }
 */
.tab-contents .box, .tab-contents .box> .map { display: none;}
.tab-contents .box.on,  .tab-contents .box> .map.on { display: block; }


.tab-contents { position: relative; }


/*날씨 기온*/
.weather, .wind { position: absolute; left: 656px; top: 223px; z-index: 29998; }
.weather> ul, .wind> ul { position: relative; }
.weather> ul> li, .wind> ul> li { width: 52px; padding: 2px 0; border: 1px solid #6b8196; position: absolute; background: url(/eng/images/main_2018/white_bg.png); font-size: 11px; text-align: center; font-family: 'notokr-bold'; }
.weather> ul> li> img, .wind> ul> li> img { display: block; margin: 0px auto; }
.weather> ul> li> em, .wind> ul> li> em { letter-spacing: -1px; }
.tem4 span { display: block; }


/*대기경보정보*/
.warning { z-index: 39998; }
/*
.warning li { width: 52px; padding: 2px 0; border: 1px solid #6b8196; position: absolute; background: url(/eng/images/main_2018/white_bg.png); font-size: 13px; text-align: center; z-index: 9999999999999999999999999999999999999; }
*/
.warning li { width: 52px; padding: 2px 0; border: 1px solid #6b8196; position: absolute; font-size: 11px; text-align: center; z-index: 29999; }
.warning li em { letter-spacing: -1px; position: relative; }
.warning li span { display: block; width: 45px; height: 20px; margin: 3px auto; }

.col1 { background: url(/web/images/main_2018/lv4.png) no-repeat; color: #fff; }
.col2 { background: url(/web/images/main_2018/lv3.png) no-repeat; color: #000; }
.col3 { background: url(/web/images/main_2018/lv2.png) no-repeat; color: #000; }
.col4 { background: url(/web/images/main_2018/lv1.png) no-repeat; color: #fff; }
.siren { width: 52px; position:absolute; top: -20px; text-align: center; }



/*대기질예보*/
a.detail_btn { font-family: Verdana; font-size: 11px; color: #4c586e; position: absolute; right: 10px; top: 10px; }


/*실시간공간분포*/
.zone { position: absolute; right: 10px; top: 10px; }
.zone:after { display: block; clear: both; content: ''; }
.zone dt { padding-left: 7px; margin-top: 4px; margin-right: 10px; background: url(/eng/images/common/blitSt01.gif) left 8px no-repeat; font-size: 14px; letter-spacing: -1px; float: left; }
.zone dd { float: left; font-size: 14px; }
.zone select { padding: 4px 6px; border: 1px solid #cdcdcd; letter-spacing: -1px; color: #666; font-size: 13px; }





/*팝업*/
.popup { width: 230px; height: 310px; border: 1px solid #3b475f; position: absolute; left: 659px; top: 246px; z-index: 29999; background: #fff; }
.popup h3 { padding: 7px 10px; letter-spacing: -1px; background: #52617e; color: #fff; position: relative; }
.popup span { cursor: pointer; }
.pop_close { width: 14px; height: 13px; position: absolute; right: 10px; top: 10px; background: url(/web/images/main_2018/close.png) center center no-repeat; }

.pop_map { text-align: center; padding-top: 12px; position: relative; }
.pop_map> img { vertical-align: middle; }

.pop_map> ul { }
.pop_map> ul> li { width: 15px; height: 13px; position: absolute; cursor: pointer; }
.pop_map> ul> li:hover { }

.alarm1 { background: url(/eng/images/main_2018/icon_siren3.png) no-repeat; }
.alarm2 { background: url(/eng/images/main_2018/icon_siren4.png) no-repeat; }

/*eng*/
.blue_box { margin-top: 15px; padding: 10px 20px; background: #f2f6f9; border: 1px solid #dde3e6; }
.blue_box li { padding-left: 10px; font-size: 14px; color: #000; margin-bottom: 5px; background: url(/eng/images/common/leftMenuLowOn.png) left 7px no-repeat; }
.blue_box li:hover { color: #1657a3; }
.blue_box li:last-child { margin-bottom: 0; }
.btn_more { width: 26px; height: 9px; background: url(/eng/images/main_2018/more.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px; font-size: 0px;}


.etc_box { padding: 15px; background: #f3f0ee; border: 1px solid #e8ded9; position: relative; } 
.white_box { padding: 10px; background: #fff; border: 1px solid #e8ded9; position: relative; } 
.white_box h4, .mapleft h4 { font-family: 'env_B'; font-size: 18px; }
.white_box h4> span, .mapleft h4 span { color: #82479b; }

/*20180621*/
#loading { width: 899px; height: 727px; border: 1px solid #bcd0e8; background: url(/web/images/main_2018/loading_bg.png); position: absolute; top: 116px; z-index: 30000; text-align: center; letter-spacing: -1px; }
#loading div { margin-top: 260px; font-family: 'notokr-bold'; font-size: 20px; color: #0054a6; }
#loading p { margin-top: 5px; margin-bottom: 20px; }
#loading img {  display: block; margin: 0px auto; }


.tab2Map > img {width: 492px;height: 578px;position: absolute;left: 0px;top: 0px;}

.tab2Mapcover .ico2 {
    position: absolute;
    top: 0px;
    left: 0px;
    box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
    color: #222;
    font-size: 14px;
    background-color: #fff;
    border-radius: 32px;
    letter-spacing: -1px;
    padding: 0 10px;
    line-height: 24px;
    height: 24px;
    z-index: 999999;
}

.tab2Mapcover .ico2 em {
    color: #2359c4;
}



.divTooltip sub{font-size: 0px;}

#matter font{ font-family: "notokr-regular"}

.bxslider2 > li >div{ width:280px !important; padding-left:35px;}
#aq_info> div.divi_l { margin-top :10px; }



.divBox { width: 400px; float: left; background: #fff; height: 583px; }

.divBox dl { width: 340px; margin: 10px auto 0 auto; }
.divBox dl dt { background: url(/eng/images/main_2018/blit2.gif) left 3px no-repeat; padding-left: 20px; font-size: 14px; font-family: 'notokr-bold'; }
.divBox dl dd { margin-top: 5px; padding: 2px 10px; }
.divBox dl dd label { font-family: Verdana; font-size: 11px; vertical-align: middle; }
.divBox dl dd label span { font-family: Verdana; }
.divBox dl dd label img { margin-right: 4px; margin-left: 2px; vertical-align: middle; margin-bottom: 2px; }