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

/*******************************
 * 파일명 : newWebMain.css
 * 설명	  : 에어코리아
 * update - 2025.07.02_2.
********************************/

:root {

	--white: #fff;
	--airk-main-color: #0073f4;
	--airk-sub-color: #fa6d08;
	--txt-color: #1d1d1d;
	--txt-sub-color: #555;
    --airk-border-line: #d8d8d8;
    --airk-box-line: #afafaf;

    /* Left Legend color */
    --airk-color-01: #0040d3; /* 좋음 */
    --airk-color-02: #35b847; /* 보통 */
    --airk-color-03: #de6e00; /* 나쁨 */
    --airk-color-04: #c60f14; /* 매우나쁨 */
    --airk-color-05: #646464; /* 데이터없음 */

    /* Right Legend color */
    --airk-rcolor-01: #1163ec; /* 좋음 */
    --airk-rcolor-02: #009b24; /* 보통 */
    --airk-rcolor-03: #fda60d; /* 나쁨 */
    --airk-rcolor-04: #dc100f; /* 매우나쁨 */
    --airk-rcolor-05: #646464; /* 데이터없음 */

    /* Table */
    --ce-table-top-line: #0e2b5e;
    --ce-table-line: #d8d8d8;
    --ce-th-bg: #f8f8f8;
}

/****************************************** [공통] 서브 개편시 contents.css 이동 ******************************************/

.new_header{}

.header_top{ position: absolute; left: 0; top: 0; width: 100%; z-index: 99;}

.nuri_wrap{ position: relative; gap: 4px 16px; min-height: 32px; padding-top: 8px; padding-left: 32px; padding-bottom: 8px;}
.nuri_txt{ display: flex; align-items: center; justify-content: flex-start; flex-direction: row; font-size: 14px; line-height: 1; word-break: break-all; color: #323232;}
.nuri_txt::before{ content: ""; position: absolute; display: inline-flex; left: 0; width: 24px; height: 16px; margin-right: 8px; background: url("../images/common/top_ban_ico_flag.svg") no-repeat center; background-size: contain;}

.new_header .headerInner{ display: flex; justify-content: space-between; align-items: center;}

.logo_area{ display: inline-flex; align-items: center; gap: 26px;}
.logo_area h1{ position: relative; left: auto; top: auto;}
.logo_area h1 a{ width: 106px; height: 36px;}
.logo_area h1 a img{ width: 100%; height: 100%;}

.logo_area .lang_sel{ display: flex; gap: 15px;}
.logo_area .lang_sel li{ position: relative;}
.logo_area .lang_sel li a{ color: #646464; font-weight: 800; font-size: 14px;}
.logo_area .lang_sel li.on::before{ content: ""; position: absolute; width: 100%; height: 2px; background: #f88906; left: 0; bottom: -2px;}
.logo_area .lang_sel li.on a{ color: #1d1d1d;}

.newGnb{ display: inline-block;}
.newGnb > ul{text-align:center;}
.newGnb > ul > li{display:inline-block; position:relative;}
.newGnb > ul > li + li{margin:0 0 0 58px;}
.newGnb > ul > li > a{display:block; line-height: 58px; font-size:18px; color:#0a0a0a; font-weight:500;}
.newGnb > ul > li.on > a,
.newGnb > ul > li > a:hover{ text-decoration:none; color:#0f62cc;}
.newGnb > ul > li:hover > a + .gnb2Dep2{display:block;}
.newGnb > ul > li > a:focus + .gnb2Dep2{display:block;}
.newGnb .gnbDep2{ display:none; position:absolute; left:50%; top: 58px; padding:15px 20px 18px; background:#fff; border:1px solid #0f62cc; border-radius:8px; transform:translate(-50%, 0); width: max-content;}

.top_util{ display: flex; align-items: center;}

.top_weather{ display: flex; align-items: center; gap: 12px;}
.icon_wther{ display: inline-block; padding: 28px 0 0 0; width: 38px;}
.icon_wther.ty01{ background:url("../images/newmain/img_day_type01.png") no-repeat center top; background-size: 70%;}
.icon_wther.ty02{ background:url("../images/newmain/img_day_type02.png") no-repeat center top; background-size: 70%;}
.icon_wther.ty03{ background:url("../images/newmain/img_day_type03.png") no-repeat center top 5px; background-size: 70%;}
.icon_wther.ty04{ background:url("../images/newmain/img_day_type04.png") no-repeat center top; background-size: 70%;}
.icon_wther.ty05{ background:url("../images/newmain/img_day_type05.png") no-repeat center top; background-size: 70%;}
.icon_wther.ty06{ background:url("../images/newmain/img_day_type06.png") no-repeat center top; background-size: 70%;}

.icon_wther .w_txt{ text-align: center; display: block; font-size: 11px; line-height: 1; color: #555;}

.weather_date{ font-size: 13px; margin-top: 8px; color: #555;}
.weather_city{ font-size: 16px; margin-top: -3px;}
.weather_city b{ font-size: 20px; margin-left: 2px;}

/* footer */
.footerPrivacy{ padding: 0; height: 50px;}
.footerPrArea{ height: 100%; padding: 0; background: none; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;}
.footerPrivacy a{ font-size: 14px; color: inherit; height: 100%; display: inline-flex; align-items: center;}
.footerPrivacy a:first-child{ color: var(--airk-main-color);}
.footerPrivacy a + a:after{ display: none;}
.goOtherSiteYl{ height: 100%; border-left: 1px solid #dcdcdc;}
.goOtherSiteYl button{ position: relative; font-size: 14px; color: inherit; height: 50px; background: none;}
.goOtherSiteYl button::before,
.goOtherSiteYl button::after{ content: ""; position: absolute; width: 11px; height: 1px; background: #1d1d1d;}
.goOtherSiteYl button::before{ right: 19px; top: 25px;}
.goOtherSiteYl button::after{ right: 19px; top: 25px; transform: rotate(90deg);}
.goOtherSiteOversea{ height: 50px; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; position: relative; z-index: 30;}
.goOtherSiteOversea button{ font-size: 14px; color: inherit; height: 100%; background: none;}
.goOtherSiteOversea button::before,
.goOtherSiteOversea button::after{ content: ""; position: absolute; width: 11px; height: 1px; background: #1d1d1d;}
.goOtherSiteOversea button::before{ right: 19px; top: 25px;}
.goOtherSiteOversea button::after{ right: 19px; top: 25px; transform: rotate(90deg);}

.goOtherDiv{ bottom: 50px !important;}
.goOtherDiv2{ bottom: 50px !important; border: 1px solid #414d5d !important;}

/*************************************************** main ***************************************************/
html,
.main_body{ height: 100%;}
.main_body .wrap{ }

/* 체크박스 */
.form_check{ display: flex; gap: 10px;}
.form_check input[type=radio],
.form_check input[type=checkbox]{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.form_check input[type=radio]:focus ~ label,
.form_check input[type=checkbox]:focus ~ label,
.form_switch [type=checkbox]:focus ~ label{ outline-offset: 0.1rem; outline: 2px solid rgba(0, 0, 0, 0.8);}

.form_check input[type=radio] ~ label{ position: relative; display: inline-flex; min-height: 20px; padding-left: calc(16px + 8px); font-size: 14px; line-height: 1; cursor: pointer; align-items: center;}
.form_check input[type=checkbox] ~ label{ position: relative; display: inline-flex; min-height: 20px; padding-left: calc(16px + 8px); font-size: 14px; line-height: 16px; cursor: pointer; align-items: center;}

.form_check input[type=radio] ~ label:before,
.form_check input[type=radio] ~ label:after,
.form_check input[type=checkbox] ~ label:before,
.form_check input[type=checkbox] ~ label:after{ display: block; content: ""; transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);}

.form_check input[type=radio] ~ label:before,
.form-check input[type=checkbox] ~ label:before{ z-index: 3;}

.form_check input[type=radio] ~ label:after,
.form_check input[type=checkbox] ~ label:after{ z-index: 4;}

.form_check input[type=radio] ~ label:before{ position: absolute; top: 0; left: 0; width: 16px; height: 16px; background-color: #fff; border: 1px solid #0073f5; border-radius: 100%;}

.form_check input[type=radio] ~ label:after{ position: absolute; top: calc((16px - 6px) / 2); left: calc((16px - 6px) / 2); width: 8px; height: 8px; background-color: #fff; border-radius: 100%;
}

.form_check input[type=radio]:checked ~ label:before{ border-color: #0073f5;}
.form_check input[type=radio]:checked ~ label:after{ background-color: #0073f5;}

.form_check input[type=radio]:disabled ~ label:before{ border-color: #C6C6C6; background-color: #E4E4E4;}

.form_check input[type=radio]:disabled + label,
.form_check input[type=checkbox]:disabled + label{ color: #8E8E8E; cursor: default;}
.form_check input[type=radio]:checked:disabled ~ label:after{ display: block; background-color: #C6C6C6;}
.form_check input[type=radio]:disabled ~ label:after{ display: none; background-color: #C6C6C6;}

/* Check Box */
.form_check input[type=checkbox] ~ label:before{ position: absolute; top: 0; left: 0; width: 16px; height: 16px;
    background-color: #fff; border: 1px solid #0073f5; border-radius: 4px;
}
.form_check input[type=checkbox] ~ label:after{
    position: absolute; top: calc((16px - 16px) / 2); left: calc((16px - 16px) / 2);
    width: 16px; height: 16px; background: url("../images/newmain/ico_check_primary_checked.svg") no-repeat 0 0; background-size: contain;
    opacity: 0;
}

.form_check input[type=checkbox]:checked ~ label:before{ background-color: #fff; border-color: #0073f5;}
.form_check input[type=checkbox]:checked ~ label:after{ opacity: 1; transition-delay: 0.2s;}

/* Check Box : disabled */
.form_check input[type=checkbox]:disabled ~ label:before{ border-color: #C6C6C6; background-color: #E4E4E4;}
.form_check input[type=checkbox]:disabled ~ label:after{ background-image: url("../images/newmain/ico_check_primary_disabled.svg");}

.callBtnSearch{ z-index: 99999;}

.main .firstSection{padding:20px 0 0 0; background:url(../images/img_main_bg.png) repeat-x 0 0;}
.container.main .contents{ padding-bottom:0;}

.main_body .new_header{ position: absolute; background: #fff; left: 50%; transform: translateX(-50%); top: 35px; border-radius: 10px; border: 1px solid var(--airk-box-line); z-index: 99;}
.main_body .new_header .headerInner{ padding: 0 24px 0 28px;}

/* UI Show 안내 문구 */
.ui_show_noti{ position: absolute; border-radius: 5px; min-width: 490px; height: 50px; line-height: 50px; background-color: #454545; padding: 0 30px; left: 50%; transform: translateX(-50%); top: 50px; z-index: 999; display: none;}
.ui_show_noti div{ height: 100%; color: #fff; font-size: 17px; display: flex; justify-content: center; align-items: center;}
.ui_show_noti div b{ border: 1px solid #afafaa; width: 30px; height: 30px; border-radius: 5px; display: inline-flex; justify-content: center; align-items: center; margin: 0 6px;}

.btn_ui_show{ position: fixed; width: 50px; height: 50px; right: 50px; top: 50px; border-radius: 10px; background-color: #454545; z-index: 999; justify-content: center; align-items: center; opacity: .3; display: none;}
.btn_ui_show::before{ content: ""; width: 18px; height: 18px; background: url("../images/newmain/btn_ui_show.png") no-repeat; display: inline-flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.btn_ui_show:hover{ opacity: 1;}

.main_container{ position: relative; height: 954px; z-index: 2;}
.main_contents{ position: absolute; width: 1400px; height: 844px; top: 110px; left: 50%; transform: translateX(-50%); z-index: 99; pointer-events: none;}
.main_contents > *{ pointer-events: auto;}

/* 삭제 대기오염통합지도 250619*/
.btn_airpollution_map{ height: 28px; width: 214px; text-align: left; padding-left: 16px; border-radius: 28px; border: 1px solid #fff; font-weight: 500; background: url("../images/newmain/swich_map_off.png") no-repeat right 3px center #1d56bc; color: #fff; transition: all 0.2s; position: absolute; top: 0; right: 0; display: none;}
.btn_airpollution_map.on{ border: 1px solid #fff; background: url("../images/newmain/swich_map_on.png") no-repeat right 3px center #1d56bc;}

.air_info_tab{ width: 559px; border-radius: 5px; padding: 4px; border: 1px solid var(--airk-box-line);
    background-color: rgba(255, 255, 255, 0.9); opacity: 1;
    position: absolute; left: 279px; top: 0; display: flex; z-index: 9999;
}
.air_info_tab li{ flex: 1;}
.air_info_tab li button{ height: 26px; color: #1d1d1d; font-size: 16px; font-weight: 500; width: 100%; display: flex; justify-content: center; align-items: center;}
.air_info_tab li.on button{ background: #24a687; border-radius: 5px; color: #fff;}

.air_info_cont.realinfo{ display: block;}
.air_info_cont.dateinfo{ display: none;}

.map_area{ height: 100%;}

/* Quick Menu */
.quick_menu_warp{ width: 140px; position: fixed; /* right: -101px; */ right: -101px; top: 186px; padding-left: 40px; transition: all 0.3s ease-in; z-index: 999;}
.btn_quick_ctrl{ position: absolute; left: -64px; top: 65px; width: 170px; height: 40px; transform: rotate(90deg); background-color: rgba(244, 244, 244, 0.8); opacity:1; border-radius: 0 0 5px 5px; text-align: left; padding: 0 0 0 50px; text-decoration: none !important; border: 1px solid var(--airk-box-line);}
.btn_quick_ctrl::after{ content: ""; position: absolute; top: 13px; left: 20px; width: 10px; height: 16px; background: url("../images/newmain/arr_quick_down.png") no-repeat; transform: rotate(-90deg);}

.quick_menu_warp.on{ right: 0;}
.btn_quick_ctrl.on::after{ transform: rotate(90deg); top: 10px;}

.quick_menu{ width: 100px; background-color: rgba(244, 244, 244, 0.8); border: 1px solid var(--airk-box-line); border-radius: 0 0 0 5px; padding: 23px 0 25px 0;}
.quick_menu li:not(:first-child){ margin-top: 24px;}
.quick_menu li a{ width: 100%; font-size: 13px; text-align: center; line-height: 14px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px;}
.quick_menu li a:hover{}
.quick_menu li a::before{ content: ""; width: 48px; height: 48px; border-radius: 48px; display: inline-flex; transition: all 0.2s ease-in;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
}
.quick_menu li a:hover::before{ background-color: #fa6d08;}

.quick_01::before{ background-image: url("../images/newmain/quick_icon01.png");}
.quick_02::before{ background-image: url("../images/newmain/quick_icon02.png");}
.quick_03::before{ background-image: url("../images/newmain/quick_icon03.png");}
.quick_04::before{ background-image: url("../images/newmain/quick_icon04.png");}
.quick_05::before{ background-image: url("../images/newmain/quick_icon05.png");}
.quick_06::before{ background-image: url("../images/newmain/quick_icon06.png");}

.quick_01:hover::before{ background-image: url("../images/newmain/quick_icon01_on.png");}
.quick_02:hover::before{ background-image: url("../images/newmain/quick_icon02_on.png");}
.quick_03:hover::before{ background-image: url("../images/newmain/quick_icon03_on.png");}
.quick_04:hover::before{ background-image: url("../images/newmain/quick_icon04_on.png");}
.quick_05:hover::before{ background-image: url("../images/newmain/quick_icon05_on.png");}
.quick_06:hover::before{ background-image: url("../images/newmain/quick_icon06_on.png");}

/*
.quick_01{ padding-top: 54px; background: url("../images/newmain/quick_icon01.png") no-repeat top 15px center;}
.quick_02{ padding-top: 48px; background: url("../images/newmain/quick_icon02.png") no-repeat top 15px center;}
.quick_03{ padding-top: 56px; background: url("../images/newmain/quick_icon03.png") no-repeat top 15px center;}
.quick_04{ padding-top: 56px; background: url("../images/newmain/quick_icon04.png") no-repeat top 15px center;}
.quick_05{ padding-top: 56px; background: url("../images/newmain/quick_icon05.png") no-repeat top 15px center;}
.quick_06{ padding-top: 53px; background: url("../images/newmain/quick_icon06.png") no-repeat top 15px center;}

.quick_01:hover{ background: url("../images/newmain/quick_icon01_on.png") no-repeat top 15px center;}
.quick_02:hover{ background: url("../images/newmain/quick_icon02_on.png") no-repeat top 15px center;}
.quick_03:hover{ background: url("../images/newmain/quick_icon03_on.png") no-repeat top 15px center;}
.quick_04:hover{ background: url("../images/newmain/quick_icon04_on.png") no-repeat top 15px center;}
.quick_05:hover{ background: url("../images/newmain/quick_icon05_on.png") no-repeat top 15px center;}
.quick_06:hover{ background: url("../images/newmain/quick_icon06_on.png") no-repeat top 15px center;}
*/
/* Map Type Tab */
.map_type_swich{ border-radius: 30px; padding: 3px; display: inline-flex; justify-content: space-around; width: 255px; background-color: rgba(255, 255, 255, 0.9); opacity:1; position: absolute; left: 0; top: 0; border: 1px solid var(--airk-box-line); z-index: 9999;}
.map_type_swich li{ position: relative;}
.map_type_swich li button{ height: 28px; border-radius: 24px; font-weight: 500; font-size: 14px; padding: 0 10px; display: flex; align-items: center;}
.map_type_swich li button:disabled{ color: #787878; cursor: default; text-decoration: none;}
.map_type_swich li.on button{ color: #fff; background: #24a687;}

.maptype_tooltip{ position: absolute; font-size: 13px; padding: 11px 15px; background-color: #fff; border-radius: 10px; width: max-content; line-height: 1; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2); display: none;}
.maptype_tooltip::before{ content: ""; position: absolute; display: inline-block; top:0; width:0; height:0;border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #fff; top: -10px; left: 30px;}
.maptype_tooltip strong{ font-weight: 600; font-size: inherit;}
.maptype_tooltip span{ color: #e13938; font-weight: inherit; font-size: inherit;}

.maptype_tooltip.bmap{ top: 46px; left: 0;} /* 기본 지도 */
.maptype_tooltip.nmap{ top: 46px; left: -6px;} /* 네이버 지도 */

/* 2025.06.24.| itnew | 이재현 : 위성지도, 백지도 마우스 오버 추가 */
.map_type_swich li:nth-child(1) button:disabled:hover + .maptype_tooltip{ display: block;}
.map_type_swich li:nth-child(2) button:disabled:hover + .maptype_tooltip{ display: block;}
.map_type_swich li:nth-child(3) button:disabled:hover + .maptype_tooltip{ display: block;}
.map_type_swich li:nth-child(4) button:disabled:hover + .maptype_tooltip{ display: block;}

/* 대기오염통합지도 */
.airpollution_map_cont{ display: none;}
.airpollution_map_cont .map_type_swich{ width: 260px;}

/* 지도 확대 */
.map_zoom_wrap{ position: absolute; right: 360px; top: 91px;}

.map_zoom_range{ position: relative; width: 24px; height: 111px; background: #fff; border: 1px solid var(--airk-box-line); border-radius: 2px;}
.map_zoom_range input[type=range]{ -webkit-appearance: none;}

.map_zoom_range .wrapper-outer{ padding-top: 0px; background: url("../images/newmain/zoom_rage_bg.png") no-repeat top 4px center; height: 109px; overflow: hidden;}
.map_zoom_range .wrapper{ display: table; margin-left: 9px;}
.map_zoom_range .wrapper-inner{ height: 109px;}

.range_bar{ display: block; transform-origin: left top;transform: rotate(-90deg) translate(-100%); white-space: nowrap; width: 109px; height: 3px; background: none; cursor: pointer; border-radius: 0px; transition: background 450ms ease-in;
}
.range_bar::-webkit-slider-thumb{ position:relative; z-index:1; -webkit-appearance: none; background: url("../images/newmain/map_zoom_bar.png") no-repeat; width: 9px; height: 16px; border-radius: 2px; cursor: pointer; transition: .3s ease-in-out;}
.range_bar::-webkit-slider-thumb::after{ content: ""; position: absolute; width: 6px; height: 1px; background: #fff; top: 4px; left: 5px;}

.map_zoom_wrap.move{ top: 159px; right: 0;}
.map_zoom_wrap.air_pollu_zoom{ top: 80px; right: 0;}

.btn_map_zoom{ display: inline-block; width: 24px; height: 24px; border: 1px solid var(--airk-box-line); border-radius: 2px;}
.btn_map_zoom.zoom_in{ margin-bottom: 2px; background: url("../images/newmain/icon_map_zoom_in.png") no-repeat center #fff;}
.btn_map_zoom.zoom_out{ margin-top: 2px; background: url("../images/newmain/icon_map_zoom_out.png") no-repeat center #fff;}

.map_control_uinit{ position: absolute; right: 0; top: 291px; border: 1px solid #dcdcdc; border-radius: 2px; width: 24px; background: #fff; z-index: 999; display: none;}
.map_control_uinit li{ position: relative;}
.map_control_uinit li::after{ content: ""; position: absolute; background: #dcdcdc; width: 12px; height: 1px; bottom: -1px; left: 50%; transform: translateX(-50%);}
.btn_map_ctl{ width: 24px; height: 24px;}
.btn_map_ctl.cu01{ background: url("../images/newmain/icon_cu01.png") no-repeat center;}
.btn_map_ctl.cu02{ background: url("../images/newmain/icon_cu02.png") no-repeat center;}
.btn_map_ctl.cu03{ background: url("../images/newmain/icon_cu03.png") no-repeat center;}

/* Map Zoom Tooltip */
.range_tooltip_wrap{}
.range_tooltip_wrap .range_tooltip{ border: 1px solid #646464; border-radius: 3px; background: #fff; width: 40px; height: 16px; font-size: 11px; color: #646464; position: absolute; left: -44px; display: flex; justify-content: center; align-items: center;}
.range_tooltip_wrap .range_tooltip.tooltip1{ top: 7px; transition: all 0.24s;}
.range_tooltip_wrap .range_tooltip.tooltip2{ top: 36px; transition: all 0.18s;}
.range_tooltip_wrap .range_tooltip.tooltip3{ top: 66px; transition: all 0.12s;}
.range_tooltip_wrap .range_tooltip.tooltip4{ top: 96px; transition: all 0.06s;}

.range_tooltip_wrap .range_tooltip:after{content: ""; position: absolute; display: inline-block; top:50%; transform: translateY(-50%); right: -4px; width:0; height:0; border-left: 4px solid #646464; border-bottom: 4px solid transparent; border-top: 4px solid transparent;}

.map_zoom_wrap .range_tooltip{ transform: scale(0);}
.map_zoom_wrap:hover .range_tooltip{ transform: scale(1); animation-delay: 2s;}
.map_zoom_wrap:hover .wrapper-outer::after{ content: ""; position: absolute; top: 0; left: -37px; width: 37px; height: 151px;}

/* 팝업 : 안내 */
.ak_info_pop{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 330px; background: #edf1f5; border-radius: 10px; padding: 0 10px 10px 10px; display: none; z-index: 999;}
.ak_info_tit{ height: 34px; padding-left: 10px; font-size: 14px; font-weight: 500; display: flex; align-items: center;}
.ak_info_cont{ background: #fff; border-radius: 10px; padding: 7px 10px; font-size: 13px; line-height: 16px;}
.ak_info_cont b{ font-weight: 500;}
.btn_ak_info_pop_close{ position: absolute; width: 19px; height: 19px; right: 10px; top: 9px; background: url(../images/newmain/btn_tad_close.png) no-repeat 0 0;}

/* 팝업 : 측정소 */
.ak_alert_pop{ background: #edf1f5; width: max-content; font-size: 13px; border-radius: 10px; padding: 10px 25px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999;}


/*############################### [01] 실시간 대기정보 ###############################*/

/* 우리동네 대기정보 */
.right_info_wrap{ position: absolute; top: 51px; right: 0; width: 340px; max-height: 766px; background-color:rgba(255, 255, 255, 0.8); opacity:1; border-radius: 10px; padding: 5px; z-index: 9999;}
.mylocal_air_info{ height: 88px; background: url("../images/newmain/mylocal_cloud.png") no-repeat right top #0073f5; border-radius: 5px; padding: 13px 20px 0 20px;}

.mylocal_top{ display: flex; justify-content: space-between; align-items:flex-end;}
.mylocal_top h3{ font-size: 18px; color: #fff;}
.mylocal_top h3 strong{ font-size: 18px; color: #fff; font-weight: 700;}

.mylocal_date{ font-size: 13px; padding-bottom: 2px; display: inline-flex; align-items: center;}
.mylocal_date strong{ font-size: 13px; font-weight: 600; margin: 0 4px;}
.btn_myloca_refresh{ width: 15px; height: 15px; background: url("../images/newmain/icon_mylocal_refresh.png") no-repeat; vertical-align: baseline; margin-bottom: 5px; margin-left: 8px;}

.mylocal_add_wrap{ position: relative; height: 30px; border-radius: 30px; background: #fff; padding: 0 10px 0 10px; margin-top: 3px; display: flex; justify-content: space-between; align-items: center;}
.mylocal_info_wrap{ flex-grow: 1; margin-left: 4px;}
.btn_my_location{ width: 16px; height: 16px; background: url("../images/newmain/icon_my_location.png") no-repeat;}

.my_location_name{ margin-left: 4px; display: inline-flex; align-items: center;}
/* 2025.05.27.| itnew | 이재현 : 문구 변경으로 인행 마진 수정 */
.my_location_name b{ font-size: 16px; margin: 0 4px;}
.my_location_name em{ font-size: 12px;}
/*.my_location_name em{ font-size: 12px; margin-left: 6px;}*/

.mylocal_add_wrap > div{ display: flex; align-items: center;}
.mylocal_add_wrap .right{ display: flex; gap: 8px;}
.mylocal_add_wrap .right span:nth-child(2){ position: relative;}
/*
.mylocal_add_wrap .right span:nth-child(2)::after{ content: ""; position: absolute; width: 1px; height: 18px; background: #d8d8d8; left: -6px; top: 2px;}
*/
.btn_loc_bookmark{ width: 16px; height: 16px; background: url("../images/newmain/icon_bookmark_off.png") no-repeat;}
.btn_loc_bookmark.on{ background: url("../images/newmain/icon_bookmark.png") no-repeat;}
.btn_mylock_search{ display: inline-block; width: 16px; height: 16px; background: url("../images/newmain/icon_myloc_search.png") no-repeat; vertical-align: middle;}

.myloc_bookmark_list{ border: 1px solid #000; width: 100%; position: absolute; left: 0; top: 30px; display: none; z-index: 4;}
.myloc_bookmark_list li{ background: #fff; height: 30px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center;}
.myloc_bookmark_list li:hover{ background: #f8f8f8;}

.myloc_desc{ color: #fff600; font-size: 13px; text-align: right; margin-top: 6px;}

.rcbox_wrap{ position: relative;}
.rcbox_wrap.left{ display: flex; flex-direction: column;}

.btn_box_toggle{ position: absolute; border: 1px solid var(--airk-box-line); width: 50px; height: 21px; border-radius: 0 0 6px 6px; background-color: #fff;}
.btn_box_toggle::before{ content: ""; position: absolute; width: 8px; height: 6px; left: 21px; top: 8px; background: url("../images/newmain/arr_rc_up.png") no-repeat;}
.btn_box_toggle.on::before{ transform: rotate(180deg);}

/* 실시간 대기정보 : 좌측 컨텐츠 */
.air_left_wrap.a_real .btn_lcbox_ctl{ bottom: -26px; left: 50%; transform: translateX(-50%);}
.air_left_wrap.a_real .btn_lcbox_ctl.on{ bottom: -21px;}

/* 오늘/내일/모레 대기정보 : 좌측 컨텐츠 */
.air_left_wrap.a_today .btn_lcbox_ctl{ bottom: -26px; left: 50%; transform: translateX(-50%);}
.air_left_wrap.a_today .btn_lcbox_ctl.on{ bottom: -21px;}

/* 오측 컨텐츠 */
.btn_rcbox_ctl{ bottom: -20px; left: 50%; transform: translateX(-50%);}

.btn_box_toggle{}

/* 오늘의 대기질 */
.today_air_qt_wrap{}

.rc_box{ position: relative; background: #fff; border: 1px solid var(--airk-box-line); border-radius: 5px; padding: 7px 10px 9px 10px;}
.right_info_wrap .rc_box{ margin-top: 5px;}

.rc_tit_wrap{ position: relative; margin-bottom: 1px; display: flex; align-items: center;}
.rc_tit{ font-size: 16px; padding-left: 9px;}
.rc_tit b{ font-weight: 500;}

.btn_today_qt_more{ position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 20px; position: absolute; right: 5px; top: 2px; border: 1px solid var(--airk-border-line);}
.btn_today_qt_more::before,
.btn_today_qt_more::after{ content: ""; position: absolute; background-color: #1d1d1d;}
.btn_today_qt_more::before{ width: 10px; height: 2px; left: 4px; top: 8px;}
.btn_today_qt_more::after{ width: 2px; height: 10px; left: 8px; top: 4px;}

.btn_ye_more{ position: relative; display: inline-block; width: 20px; height: 20px; border-radius: 20px; position: absolute; right: 0; top: 2px; border: 1px solid var(--airk-border-line);}
.btn_ye_more::before,
.btn_ye_more::after{ content: ""; position: absolute; background-color: #1d1d1d;}
.btn_ye_more::before{ width: 10px; height: 2px; left: 4px; top: 8px;}
.btn_ye_more::after{ width: 2px; height: 10px; left: 8px; top: 4px;}

.today_qt_list_wrap{ position: relative;}

.btn_toair_view{ height: 139px; width: 100%; border-radius: 6px; color: #fff; font-size: 15px; font-weight: 500; background-color:rgba(0, 0, 0, 0.45); opacity:0; padding-top: 44px; text-align: center; transition: all 0.3s ease-in; position: absolute; left: 0; top: 0;}
.btn_toair_view::before{ content: ""; width: 28px; height: 28px; background: url(../images/newmain/icon_toaq_more.png) no-repeat; position: absolute; top: 44px; left: 50%; transform: translateX(-50%);}
.today_qt_list_wrap:hover .btn_toair_view{ opacity: 1;}

.today_qt_list{ display: flex; border: 1px solid var(--airk-border-line); border-radius: 5px;}
.today_qt_list > li{ flex: 1; padding-top: 12px; height: 137px;}
.today_qt_list > li:not(:first-child){ border-left: 1px solid var(--airk-border-line);}
.today_qt_list > li > span{ display: block; text-align: center;}

.todayqt01{ font-size: 14px; font-weight: 400; line-height: 15px;}
.todayqt02{ font-size: 12px; color: #717171; margin-top: -2px; margin-bottom: 5px; height: 18px;}
.todayqt03{ padding-top: 35px; background-position: top center; background-repeat: no-repeat; margin-bottom: 4px;}
.todayqt04{ font-size: 11px; color: #646464; line-height: 16px; margin-bottom: 2px;}
.todayqt04 b{ font-size: 14px; font-weight: 600;}
.todayqt05 em{ display: inline-block; width: 72px; height: 20px; border-radius: 20px; font-size: 14px; font-weight: 500; color: #fff;}

.airqt01 .todayqt03{ background-image: url("../images/newmain/character_face01.png");}
.airqt02 .todayqt03{ background-image: url("../images/newmain/character_face02.png");}
.airqt03 .todayqt03{ background-image: url("../images/newmain/character_face03.png");}
.airqt04 .todayqt03{ background-image: url("../images/newmain/character_face04.png");}
.airqt05 .todayqt03{ background-image: url("../images/newmain/character_face05.png");}

.airqt01 .todayqt04 b{ color: var(--airk-rcolor-01);} /* 좋음 */
.airqt02 .todayqt04 b{ color: var(--airk-rcolor-02);} /* 보통 */
.airqt03 .todayqt04 b{ color: #de6e00;} /* 나쁨 */
.airqt04 .todayqt04 b{ color: var(--airk-rcolor-04);} /* 매우나쁨 */
.airqt05 .todayqt04 b{ color: var(--airk-rcolor-05)} /* 없음 */

.airqt01 .todayqt05 em{ background-color: var(--airk-rcolor-01);}
.airqt02 .todayqt05 em{ background-color: var(--airk-rcolor-02);}
.airqt03 .todayqt05 em{ background-color: var(--airk-rcolor-03); color: #1d1d1d;}
.airqt04 .todayqt05 em{ background-color: var(--airk-rcolor-04);}
.airqt05 .todayqt05 em{ background-color: var(--airk-rcolor-05);}

/* 대기질 예보 */
.air_quality_wrap{}
.aq_forecast_tbl_wrap{ border-radius: 5px; border: 1px solid var(--airk-border-line); overflow: hidden;}
.aq_forecast_tbl{}
.aq_forecast_tbl th,
.aq_forecast_tbl td{ text-align: center;}
.aq_forecast_tbl tbody tr:not(:last-child){ border-bottom: 1px solid var(--airk-border-line);}
.aq_forecast_tbl thead th:not(:first-child),
.aq_forecast_tbl tbody td:not(:first-child){ border-left: 1px solid var(--airk-border-line)}

.aq_forecast_tbl thead tr{ background: var(--airk-main-color); border-radius: 5px 5px 0 0;}
.aq_forecast_tbl thead th{ line-height: 26px; font-size: 13px; color: #fff;}
.aq_forecast_tbl tbody th,
.aq_forecast_tbl tbody td{ height: 32px; font-size: 12px;}
.aq_forecast_tbl .day_after_tom{ background: #f8f8f8; color: #717171; line-height: 16px;}

.aq_fo{ padding-left: 28px; font-size: 12px; background-position: left center; background-repeat: no-repeat; background-size: 22px 18px; height: 28px; display: inline-flex; align-items: center; line-height: 12px;}
.aq_fo.ty01{ color: var(--airk-rcolor-01); background-image: url("../images/newmain/character_face01.png");}
.aq_fo.ty02{ color: var(--airk-rcolor-02); background-image: url("../images/newmain/character_face02.png");}
.aq_fo.ty03{ color: #de6e00; background-image: url("../images/newmain/character_face03.png");}
.aq_fo.ty04{ color: var(--airk-rcolor-04); background-image: url("../images/newmain/character_face04.png");}
.aq_fo.ty05{ color: var(--airk-rcolor-05); background-image: url("../images/newmain/character_face05.png");}

/* 예보 발표 */
.rc_tit_wrap.forecast{ }

.foreWrap{ position: relative; margin-top: 15px;}

/* 대기질 예보 */
.frc_date{ font-size: 13px; color: #555; position: absolute; right: 34px; top: 3px;}

.forecRoll{ width: 310px; overflow:hidden; border-radius: 10px; border: 1px solid var(--airk-border-line); padding: 0 10px;}
.forecRoll ul{ width:9999px; overflow:hidden;}
.forecRoll ul li{ position: relative; float:left; display: flex; align-items: center; height: 102px;}
.forecRoll ul li::before{ content: ""; position: absolute; width: 240px; height: 1px; border-top: 1px dashed #d8d8d8; left: 42px; top: 51px;}
.forecRoll ul li span{}

.forecRoll ul li .text_wrap{ display: flex; flex-direction: column; gap: 7px;}
.forecRoll ul li .text_wrap .text_h{ height: 39px; display: flex; align-items: center;}

.forecRoll ul li div p{ width: 245px;
    display: -webkit-box !important;
    overflow: hidden;
    max-height: 39px;
    min-height: 18px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    white-space: normal !important;
    font-size: 14px;
    line-height: 17px;
    vertical-align: middle;
}

.frcBox{ width: 32px; height: 32px; border-radius: 10px; background: #f0f0f0; border: 1px solid var(--airk-border-line); font-size: 13px; font-weight: 500; margin-right: 10px; display: flex; justify-content: center; align-items: center; flex-shrink: 0;}
.frcBox.oc01{}
.frcBox.oc02{}
.frcBox.oc03{}

.frcBanRoll{ position:absolute; right: 0; top: 2px;}
.frcBanRoll:after{display:block; content:""; clear:both;}
.frcBanbWrap{float:left;}
.frcBanbNow{font-size:15px; color:#0f62cc; font-weight:400;}
.frcBanbTot{font-size:15px; color:#6e6e6e; font-weight:400;}
.frcBanBtn{float:left; margin: -2px 0 0 10px;}
.frcBanbStop{display:inline-block; width:6px; height:24px; padding:7px; background:url("../images/newmain/frc_b_stop.png") no-repeat center center; vertical-align:top;}
.frcBanbAuto{display:inline-block; width:5px; height:24px; padding:7px; background:url("../images/newmain/frc_b_auto.png") no-repeat center center; vertical-align:top;}
.frcBanbLeft{display:inline-block; float:left; width:6px; height:24px; padding:8px 7px; background:url("../images/newmain/frc_b_left.png") no-repeat center center; vertical-align:top;}
.frcBanbRight{display:inline-block; float:right; width:6px; height:24px; padding:8px 7px; background:url("../images/newmain/frc_b_right.png") no-repeat center center; vertical-align:top;}

/* 소식 알림창 */
.newsRoll{ width: 310px; overflow:hidden; margin-top: 4px;}
.newsRoll ul{ width:9999px; height:124px; overflow:hidden;}
.newsRoll ul:after{display:block; content:""; clear:both;}
.newsRoll li{float:left;}
.newsRoll li a{display:block; width: 100%; height: 114px; border:1px solid #d2d2d2; border-radius:6px; overflow:hidden;}
.newsRoll li a img{ width: 308px; height: 114px;}

.newsBanRoll{ position:absolute; right: 8px; top: 10px;}
.newsBanRoll:after{display:block; content:""; clear:both;}
.newsBanbWrap{float:left;}
.newsBanbNow{font-size:15px; color:#0f62cc; font-weight:400;}
.newsBanbTot{font-size:15px; color:#6e6e6e; font-weight:400;}
.newsBanBtn{float:left; margin: -2px 0 0 10px;}
.newsBanbStop{display:inline-block; width:6px; height:24px; padding:7px; background:url("../images/newmain/news_b_stop.png") no-repeat center center; vertical-align:top;}
.newsBanbAuto{display:inline-block; width:5px; height:24px; padding:7px; background:url("../images/newmain/news_b_auto.png") no-repeat center center; vertical-align:top;}
.newsBanbLeft{display:inline-block; float:left; width:6px; height:24px; padding:8px 7px; background:url("../images/newmain/news_b_left.png") no-repeat center center; vertical-align:top;}
.newsBanbRight{display:inline-block; float:right; width:6px; height:24px; padding:8px 7px; background:url("../images/newmain/news_b_right.png") no-repeat center center; vertical-align:top;}

/* 오늘의 대기질 : 상세 */
.today_air_detail_wrap{ position: absolute; width: 334px; right: 356px; top: 51px; border-radius: 10px; background: #edf1f5; z-index: 999; display: none;}
.t_air_deail_tit{ height: 35px; font-size: 14px; font-weight: 500; display: flex; align-items: center; padding-left: 15px;}
.t_air_deail_cont{ padding: 0 5px 5px 5px;}
.btn_t_air_deail{ position: absolute; width: 19px; height: 19px; right: 6px; top: 9px; background: url("../images/newmain/btn_tad_close.png") no-repeat 0 0;}

/* 오늘의 대기질 : 상세 : 그래프 */
.tad_grahp_item{ padding: 5px; display: flex; gap: 10px; background: #fff; border-radius: 10px;}
.tad_grahp_item .tad_tit{ width: 77px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #eff5ff; border-radius: 10px;}
.tad_grahp_item .tad_tit b{ display: block; text-align: center; font-size: 13px;}

.tad_grahp_item .tad_tit b + em{ margin-top: 4px;}
.tad_grahp_item .tad_tit em{ display: block; text-align: center; font-size: 13px; color: #555;line-height: 1.2;}
.tad_grahp_item .tad_tit em + em{ font-size: 12px;}

.tad_grahp_item .tad_cont{ flex: 1;}
.tad_tab{ width: 210px; height: 24px; border-radius: 24px; padding: 0 3px; background: #f1f4f7; display: flex; align-items: center;}
.tad_tab li{ flex: 1; display: flex; align-items: center;}
.tad_tab li button{ width: 100%; height: 18px; font-size: 13px;}
.tad_tab li.on button{ border-radius: 18px; background: var(--airk-main-color); color: #fff; font-weight: 500;}

.tad_grahp_box{ height: 114px;}
.tad_grahp_box.tad02{ display: none;}

.tad_grahp_item + .tad_grahp_item{ margin-top: 5px;}

/* 오늘의 대기질 : 상세 : 그외 그래프 */
.today_etc_grahp_wrap{ height: 90px; padding: 9px 15px 12px 15px; background: #fff; border-radius: 10px; margin-top: 6px;}
.today_etc_grahp_wrap ul{ display: flex; flex-wrap: wrap;}
.today_etc_grahp_wrap ul li{ width: calc(50% - 9px);}
.today_etc_grahp_wrap ul li:nth-child(odd){margin-right: 18px;}
.today_etc_grahp_wrap ul li:nth-child(3),
.today_etc_grahp_wrap ul li:nth-child(4){ margin-top: 12px;}

.tetc_grahp_item{}
.tect_top{ margin-bottom: 2px; display: flex; gap: 11px;}
.tect_top span{ font-size: 13px;}
.tect_top .tit{ font-weight: 500;}
.tect_top .tect_num{ position: relative;}
.tect_top .tect_num b{ font-weight: 300;}
.tect_top .tect_num::before{ content: ""; position: absolute; width: 1px; height: 12px; background: #dcdcdc; left: -5px; top: 50%; transform: translateY(-50%);}

.tetc_grahp_item.te01 .tect_num b{ color: var(--airk-rcolor-01);}
.tetc_grahp_item.te02 .tect_num b{ color: var(--airk-rcolor-02);}
.tetc_grahp_item.te03 .tect_num b{ color: #de6e00;}
.tetc_grahp_item.te04 .tect_num b{ color: var(--airk-rcolor-04);}
.tetc_grahp_item.te05 .tect_num b{ color: var(--airk-rcolor-05);}

.tect_bar{ position: relative; height: 6px; border-radius: 6px; background: #dce2ea;}
.tect_bar .bar{ position: absolute; left: 0; top: 0; display: inline-block; height: 6px; border-radius: 6px;}
.tetc_grahp_item.te01 .tect_bar .bar{ background: var(--airk-rcolor-01);}
.tetc_grahp_item.te02 .tect_bar .bar{ background: var(--airk-rcolor-02);}
.tetc_grahp_item.te03 .tect_bar .bar{ background: var(--airk-rcolor-03);}
.tetc_grahp_item.te04 .tect_bar .bar{ background: var(--airk-rcolor-04);}
.tetc_grahp_item.te05 .tect_bar .bar{ background: var(--airk-rcolor-05);}

/* 오늘의 대기질 : 상세 : 정보별 범례보기 */
.byinfo_legend_wrap{ padding: 1px 15px 10px 15px; background: #fff; border-radius: 10px; margin-top: 6px;}
.byinfo_tit{ height: 30px; font-size: 13px; font-weight: 500; display: flex; align-items: center;}

.byinfo_btn_list{ display: flex; flex-wrap: wrap; gap: 3px;}
.byinfo_btn_list li{}
.byinfo_btn_list li button{}
.byinfo_btn_list li button{}

.btn_byi{ border: 1px solid var(--airk-border-line); border-radius: 3px; font-size: 13px; height: 22px; display: flex; justify-content: center; align-items: baseline;}
.btn_byi em{ font-size: 11px;}
.btn_byi.b_pm25,
.btn_byi.b_pm10,
.btn_byi.b_o3,
.btn_byi.b_cai{ width: 144px;}
.btn_byi.b_no2,
.btn_byi.b_co,
.btn_byi.b_so2{ width: 95px;}
.btn_byi.on{ border: 1px solid #f88906;}

.by_legend_list{ margin-top: 7px; flex-wrap: wrap; justify-content: center; background: #eff5ff; border: 1px solid #d8d8d8; border-radius: 10px; padding: 3px 0; display: none;}
.by_legend_list li{}
.by_legend_list li:nth-child(1){ width: 90px;}
.by_legend_list li:nth-child(2){ width: 120px;}
.by_legend_list li:nth-child(3),
.by_legend_list li:nth-child(4){ width: 104px; letter-spacing: -4px;}
.by_legend_list li:nth-child(5){ width: 68px;}

.by_legend_list li span{ position: relative; font-size: 12px; padding-left: 12px; letter-spacing: -0.8px;}
.by_legend_list li span::before{ content: ""; position: absolute; width: 8px; height: 8px; border-radius: 100%; left: 0; top: 50%; transform: translateY(-50%);}
.by_legend_list li:nth-child(1) span::before{ background: var(--airk-rcolor-01);}
.by_legend_list li:nth-child(2) span::before{ background: var(--airk-rcolor-02);}
.by_legend_list li:nth-child(3) span::before{ background: var(--airk-rcolor-03);}
.by_legend_list li:nth-child(4) span::before{ background: var(--airk-rcolor-04);}
.by_legend_list li:nth-child(5) span::before{ background: var(--airk-rcolor-05);}

.by_legend_list.on{ display: flex;}

.map_area_sel{ position: absolute; width: 191px; height: 36px; right: 360px; top: 0; border-radius: 5px; padding: 0 6px 0 15px; background-color: rgba(255, 255, 255, 0.9); opacity:1; display: flex; align-items: center; border: 1px solid var(--airk-box-line);}
.map_area_sel label{ position: relative; font-size: 14px; font-weight: 500; padding-right: 10px; margin-right: 6px; white-space:nowrap;}
.map_area_sel label::after{ content: ""; position: absolute; width: 1px; height: 12px; background: #898989; right: 0; top: 50%; transform: translateY(-50%);}
.map_area_sel select{ appearance: auto; background: none; border: none; height: 100%; color: #646464; flex: 1;}

.admin_district{ position: absolute; right: 175px; top: 0; height: 36px; width: 165px; background-color: rgba(255, 255, 255, 0.9); opacity:1; border-radius: 5px; padding-left: 10px; display: flex; align-items: center; border: 1px solid var(--airk-box-line);}

.menu_hide{ position: absolute; right: 0; top: 0; height: 36px; width: 165px; background-color: rgba(255, 255, 255, 0.9); opacity:1; border-radius: 5px; padding-left: 10px; display: flex; align-items: center; border: 1px solid var(--airk-box-line);}

.air_left_wrap.a_real{ width: 254px; position: absolute; top: 51px; z-index: 999; display: flex; flex-direction: column;}
.air_left_wrap.a_today{ width: 254px; position: absolute; top: 51px; z-index: 999;}

.airstat_tab{ width: 254px; background-color: #fff; border-radius: 6px; padding: 2px; margin-bottom: 10px; position: relative; border: 1px solid var(--airk-box-line); display: flex;}
.airstat_tab li{ flex: 1;}
.airstat_tab li button{ height: 26px; width: 100%; border-radius: 6px;}
.airstat_tab li.on button{ background-color: var(--airk-main-color); font-weight: 500; color: #fff;}

/* 범례 */
.real_legend_box{ position: relative; background: #fff; border-radius: 10px; border: 1px solid var(--airk-box-line); display: block; width: 100%;}
.real_legend_box .top_warp{ position: relative; height: 36px; padding: 0 15px 0 20px; cursor: pointer; display: flex; align-items: center;}
.real_legend_box .top_warp .tit{ font-size: 16px; font-weight: 400;}
.real_legend_box .top_warp .tit em{ font-size: 13px; margin-left: 8px; color: #717171; letter-spacing: 0;}

.btn_realbegend{ position: absolute; right: 11px; top: 7px; height: 24px; justify-content: center; align-items: center; padding: 0 5px 0 40px;}
.btn_realbegend::before{ content: ""; display: inline-flex; width: 12px; height: 7px; background: url("../images/newmain/arr_tw_legend_down.png") no-repeat; transform: rotate(0);}
.btn_realbegend.on::before{ transform: rotate(180deg);}

.real_legend_sel{ position: absolute; border: 1px solid #000; width: 100%; top: 36px; left: 0; background: #fff; display: none; z-index: 9999;}
.real_legend_sel li{ }
.real_legend_sel li button{ padding: 0 15px; line-height: 30px; width: 100%; text-align: left;}
.real_legend_sel li:hover{ background: #f8f8f8;}

/* 범례 : 리스트 */
.air_legendsel_wrap{ padding: 0 4px 4px 4px;}
.air_legend_list{ background: #f8f8f8; padding: 8px 0; border-radius: 0 0 5px 5px; display: none; border-top: 1px solid #e1e1e1;}
.air_legend_list li{ padding: 0 13px; height: 20px;}
.air_legend_list li{ margin-top: 2px;}

.alsitem{ width: 100%; display: flex; align-items: center;}

.al01{ position: relative; width: 100px; display: flex; align-items: center; padding-left: 22px; font-weight: 500;}
.al01::before{ content: ""; position: absolute; width: 18px; height: 19px; left: -2px; top: 1px;}
.al02{ position: relative; flex: 1; text-align: center; font-size: 13px; font-weight: 500; color: #555; height: 20px;}
.al02::after{ content: ""; position: absolute; width: 1px; height: 12px; left: 0; top: 4px; background: #d8d8d8;}
.al03{ font-size: 12px; color: #787878; text-align: right; display: inline-block;}

.air_legend_list li:nth-child(1) .al01{ letter-spacing: 13px; color: var(--airk-color-01)}
.air_legend_list li:nth-child(2) .al01{ letter-spacing: 13px; color: var(--airk-color-02)}
.air_legend_list li:nth-child(3) .al01{ letter-spacing: 13px; color: var(--airk-color-03)}
.air_legend_list li:nth-child(4) .al01{ letter-spacing: 2px; color: var(--airk-color-04)}
.air_legend_list li:nth-child(5) .al01{ letter-spacing: -1px; color: var(--airk-color-05)}
.air_legend_list li:nth-child(5) .al01::after{ content: "-"; position: absolute; width: 12px; height: 12px; top: 4px; left: -1px; font-family: "굴림"; font-size: 11px; color: #fff; display: inline-flex; justify-content: center; align-items: center; z-index: 2;}

.alsitem.als01 .al01::before{ background: url("../images/newmain/icon_tw01.png") no-repeat 0 0;}
.alsitem.als02 .al01::before{ background: url("../images/newmain/icon_tw02.png") no-repeat 0 0;}
.alsitem.als03 .al01::before{ background: url("../images/newmain/icon_tw03.png") no-repeat 0 0;}
.alsitem.als04 .al01::before{ background: url("../images/newmain/icon_tw04.png") no-repeat 0 0;}
.alsitem.als05 .al01::before{ background: url("../images/newmain/icon_tw05.png") no-repeat 0 0;}

/* 주의보/경보 */
.war_alarm_box{ position: relative; background: #fff; border-radius: 10px; border: 1px solid var(--airk-box-line); display: inline-block; width: 100%; margin-top: 5px; overflow: hidden; z-index: 999;}
.war_alarm_box .top_warp{ position: relative; height: 36px; padding: 0 15px 0 20px; display: flex; align-items: center;}
.war_alarm_box .top_warp .tit{ font-size: 16px; font-weight: 400;}

.wa_issued .warnBanbStop{ background:url("../images/newmain/bn_wh_stop.png") no-repeat center center;}
.wa_issued .warnBanbAuto{ background:url("../images/newmain/bn_wh_play.png") no-repeat center center;}
.wa_issued .warnBanbLeft{ background:url("../images/newmain/bn_wh_left.png") no-repeat center center;}
.wa_issued .warnBanbRight{ background:url("../images/newmain/bn_wh_right.png") no-repeat center center;}

.waralarm_wrap{ padding: 0 4px 4px 4px;}
.waralarm_cont{ background: #fff; border-radius: 0 0 5px 5px;}

/* 주의보/경보 발령시 */
.war_alarm_box.wa_issued{ background-color: var(--airk-main-color); border: none;}
.war_alarm_box.wa_issued .top_warp .tit{ color: #fff;}
.wa_issued .warnBanbWrap{ color: #fff;}

.war_legend_list{ display: inline-flex; flex-wrap: wrap; padding: 7px 14px 4px 14px; background-color: #f8f8f8; border-top: 1px solid #e5e5e5;}
.war_legend_list li{ height: 30px; display: flex; align-items: center; gap: 5px;}
.war_legend_list li:nth-child(odd){ width: 120px;}
.war_legend_list li:nth-child(even){ flex: 1;}
.war_legend_list li .wa_icon{ width: 27px; position: relative;}
.war_legend_list li .wa_icon::after{ content: ""; position: absolute; width: 1px; height: 12px; background: #d8d8d8; right: 0px; top: 4px;}
.war_legend_list li .wa_txt{ font-size: 13px;}

.warnRoll{ width: 100%; overflow:hidden;}
.warnRoll ul{ width: 9999px; overflow:hidden; border-radius: 0 0 6px 6px; background-color: #f8f8f8; border-top: 1px solid #e1e1e1;}
.warnRoll ul:after{display:block; content:""; clear:both;}
.warnRoll li{float:left;}
.warnRoll li a{ display:block; width: 100%; height: 100%;}
.warnRoll li a img{ width: 100%; height:100%;}
.warnRoll li a:hover{ text-decoration: none;}
.warnRoll li a:hover .warn_tit{ text-decoration: underline;}

.warnBanRoll{ position:absolute; right: 10px; top: 10px;}
.warnBanRoll:after{display:block; content:""; clear:both;}
.warnBanbWrap{float:left; color: inherit;}
.warnBanbWrap span{ color: inherit;}
.warnBanbNow{font-size:15px; color:#0f62cc; font-weight:400;}
.warnBanbTot{font-size:15px; color:#6e6e6e; font-weight:400;}
.warnBanBtn{float:left; margin: -2px 0 0 10px;}
.warnBanbStop{display:inline-block; width:6px; height:24px; padding:7px; background:url("../images/newmain/bn_bk_stop.png") no-repeat center center; vertical-align:top;}
.warnBanbAuto{display:inline-block; width:5px; height:24px; padding:7px; background:url("../images/newmain/bn_bk_play.png") no-repeat center center; vertical-align:top;}
.warnBanbLeft{display:inline-block; float:left; width:6px; height:24px; padding:8px 7px; background:url("../images/newmain/bn_bk_left.png") no-repeat center center; vertical-align:top;}
.warnBanbRight{display:inline-block; float:right; width:6px; height:24px; padding:8px 7px; background:url("../images/newmain/bn_bk_right.png") no-repeat center center; vertical-align:top;}

/* 발령후 */
.war_alarm_box .top_warp .tit{}
.warnBanbWrap{float:left; color: inherit;}
.warnBanbWrap span{ color: inherit;}

.warn_item_box{ display: flex; padding: 0 4px 0 4px; width: 240px; height: 110px;}
.warn_item_box.warn01{} /* 없음 */
.warn_item_box.warn02{} /* 주의보 */
.warn_item_box.warn03{} /* 경보 */

.warn_tit{ width: 90px; font-size: 14px; font-weight: 500; padding-top: 15px; text-align: center; background-repeat: no-repeat; background-position: bottom 17px center; background-image: url("../images/newmain/icon_warn01.png");}

.warn_cont{ flex: 1; width: 135px; display: inline-flex; flex-direction: column; justify-content: center;}

.warn_date{ text-align: center; font-size: 13px; color: #717171; margin-bottom: 3px;}
.warn_noti{ text-align: center; font-size: 14px; margin-bottom: 6px;}
.warn_num{ text-align: center; font-size: 13px; color: #717171; line-height: 1.2; padding: 5px 4px; border-radius: 24px; background: #fff; display: inline-block; text-align: center;}

.warn_item_box.warn01 .warn_tit{ }
.warn_item_box.warn02 .warn_tit{ background-image: url("../images/newmain/icon_warn02.png");}
.warn_item_box.warn03 .warn_tit{ background-image: url("../images/newmain/icon_warn03.png");}

.warn_item_box.warn01 .warn_noti{}
.warn_item_box.warn02 .warn_noti{ color: #d63200;}
.warn_item_box.warn03 .warn_noti{ color: #d63200;}

/* 기상특보 */
.weather_report_wrap{ border-radius: 10px; background: #fff; border: 1px solid var(--airk-box-line); overflow: hidden; margin-top: 5px;}
.weather_report_wrap .top_wrap{ position: relative; height: 34px; display: flex; align-items: center;}
.weather_report_wrap .top_wrap .wr_tit{ font-size: 16px; font-weight: 500; margin-left: 20px;}

.weather_report_wrap .wr_cont{ position: relative; border-top: 1px solid #e1e1e1; padding: 0 4px 4px 4px;}
.weather_report_wrap .wr_cont ul{ padding: 12px 12px 12px 12px; background: #f8f8f8; overflow: hidden; max-height: 62px; min-height: auto; transition: all 0.3s ease-in; overflow: auto;}
.weather_report_wrap .wr_cont::after{ content: ""; background-color: #f8f8f8; border-radius: 0 0 6px 6px; width: calc(100% - 30px);height: 6px; position: absolute; left: 4px; bottom: 4px;}
.weather_report_wrap .wr_cont ul li{ font-size: 13px;}
.weather_report_wrap .wr_cont ul li:not(:first-child){ margin-top: 7px;}

.weather_report_wrap .wr_cont dl{}
.weather_report_wrap .wr_cont dl dt{ margin-bottom: 3px;}
/* 2025.03.04. | itnew | 이재현 : API 데이터 양식에 맞춰 "white-space: pre-wrap;" 추가 */
.weather_report_wrap .wr_cont dl dd{ font-size: 13px; line-height: 19px; white-space: pre-wrap;}
/*.weather_report_wrap .wr_cont dl dd{ font-size: 13px; line-height: 19px;}*/
.weather_report_wrap .wr_cont .wr_date{ font-size: 12px; height: 18px; border-radius: 18px; background: #dedede; padding: 0 10px; display: inline-flex; align-items: center;}

.btn_air_more{ display: inline-block; width: 20px; height: 20px; border-radius: 20px; border: 1px solid var(--airk-border-line); background-color: #fff; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.btn_air_more::before,
.btn_air_more::after{ content: ""; position: absolute; background-color: #1d1d1d;}
.btn_air_more::before{ width: 10px; height: 2px; left: 4px; top: 8px;}
.btn_air_more::after{ width: 2px; height: 10px; left: 8px; top: 4px;}

.btn_wr_more{ width: 100%; height: 22px; background: url("../images/newmain/arr_wr_more_down.png") no-repeat center #f8f8f8; border-top: 1px solid #d8d8d8;}
.btn_wr_more.on{ background: url("../images/newmain/arr_wr_more_up.png") no-repeat center #f8f8f8;}

.weather_report_wrap .wr_cont.open{ overflow: auto; height: 406px;}

/* 비상저감 조치 및 황사 특보발령 */
.ydust_report_wrap{ border-radius: 10px; background: #fff; border: 1px solid var(--airk-box-line); overflow: hidden; margin-top: 5px;}
.ydust_report_wrap .top_wrap{ position: relative; height: 34px; display: flex; align-items: center;}
.ydust_report_wrap .top_wrap .yd_tit{ font-size: 16px; font-weight: 400; margin-left: 20px;}

.ydust_report_wrap .yd_cont{ position: relative; padding: 0 4px 4px 4px; max-height: calc(100% - 34px);}
.ydust_report_wrap .yd_cont ul{ padding: 12px 12px 12px 12px; background: #f8f8f8; overflow: hidden; max-height: 62px; min-height: auto; transition: all 0.3s ease-in; overflow: auto;}
/*
.ydust_report_wrap .yd_cont::after{ content: ""; background-color: #f8f8f8; border-radius: 0 0 6px 6px; width: calc(100% - 30px);height: 6px; position: absolute; left: 4px; bottom: 4px;}
*/
.yd_cont_inner{ max-height: 248px; background-color: #f4f4f4; border-top: 1px solid #e1e1e1; padding: 11px 15px 12px 15px; border-radius: 0 0 5px 5px; overflow: auto; font-size: 13px;}

.yd_cont_inner .yd_txt{ font-size: inherit;}
.yd_cont_inner .yd_txt + .yd_txt{ margin-top: 20px;}
.yd_cont_inner .yd_txt .tit{ display: block; font-size: 13px; font-weight: 500;}

/* 주의보/경보 : 범례 7개 노출시 : 비상저감 조치 및 황사 특보발령 높이 */
.ydust_report_wrap.hadd .yd_cont_inner{ max-height: 218px;}

/* 주의보/경보 : 사이렌 노출시 : 비상저감 조치 및 황사 특보발령 높이 */
.war_alarm_box + .war_alarm_box.hidden + .ydust_report_wrap .yd_cont_inner{ max-height: 240px;}

/* 주의보/경보 : 텍스트 box : 발령시*/
.ydust_report_wrap.wa_issued{ background-color: var(--airk-main-color); border: none;}
.ydust_report_wrap.wa_issued .top_wrap .yd_tit{ color: #fff;}

/* 지도 축척 */
/* 2025.03.04.| itnew | 이재현 : 축적 길이가 가변으로 늘어남에 따라 최대 길이 스타일 조정으로 인한 "padding: 0 10px" 추가 */
.tw_map_scale{ position: absolute; right: 360px; bottom: 27px; width: 150px; height: 16px; padding: 0 10px; background-color:rgba(255, 255, 255, 0.6); opacity:1; display: flex; justify-content: center; align-items: center; gap: 4px;}
/*.tw_map_scale{ position: absolute; right: 356px; bottom: 21px; width: 150px; height: 16px; background-color:rgba(255, 255, 255, 0.6); opacity:1; display: flex; justify-content: center; align-items: center; gap: 4px;}*/
.tw_map_scale span{ font-size: 12px; font-weight: 400;}
.tw_map_scale em{ display: inline-block; width: 80px; height: 6px; border-right: 2px solid #000; border-bottom: 2px solid #000; border-left: 2px solid #000;}

.tw_map_scale.airpollu{ right: 0; width: 164px;}
.tw_map_scale.move{ right: 0;}

/* 업데이트 정보 */
.tw_update_info{ position: absolute; width: 190px; height: 30px; border-radius: 30px; background-color:rgba(50, 50, 50, 0.6); opacity:1; font-size: 14px; color: #fff; top: 51px; right: 360px; display: flex; justify-content: center; align-items: center; gap: 4px; z-index: 999;}
.tw_update_info.real{}
.tw_update_info.today{}

.tw_map_coord{ position: absolute; width: 214px; height: 30px; right: 0; top: 40px; border-radius: 30px; background-color:rgba(255, 255, 255, 0.8); opacity:1; font-size: 13px; padding-left: 15px; display: flex; align-items: center; gap: 20px; z-index: 999;}
.tw_map_coord span{ position: relative; font-size: 13px; font-weight: 500;}
.tw_map_coord span::after{ content: ""; position: absolute; right: -10px; top: 4px; background: #7c8086; width: 1px; height: 12px;}

/* 범례 */
.tw_legend_wrap{ position: absolute; width: 150px; bottom: 48px; right: 360px;}
.tw_legend_wrap.le_real{ }
.tw_legend_wrap.le_today{ display: none;}
.tw_legend_wrap.le_poll{ right: 0; width: 164px; display: none;} /* 삭제 대기오염통합지도 250619 */
.btn_tw_legend_reset{ height: 25px; width: 80px; border-radius: 25px; color: #1d1d1d; font-size: 13px; font-weight: 500; margin-bottom: 5px; background: url("../images/newmain/icon_tw_reset.png") no-repeat right 12px center #fff; text-align: left; padding-left: 15px; border: 1px solid #323232;}

.tw_legend_wrap.le_real.move{ right: 0;}
.tw_legend_wrap.le_today.move{ right: 0;}

.tw_legend_item{ border: 1px solid var(--airk-box-line); border-radius: 5px; overflow: hidden;}
.tw_legend_item + .tw_legend_item{ margin-top: 5px;}

.tw_legend_item > button{ position: relative; width: 100%; height: 30px; background-color:rgba(255, 255, 255, 0.8); opacity:1; text-align: left; padding-left: 20px; font-size: 14px; font-weight: 500;}
.tw_legend_item > button::before{ content: ""; position: absolute; width: 12px; height: 7px; right: 22px; top: 12px; background: url("../images/newmain/arr_tw_legend_down.png") no-repeat 0 0;}
.tw_legend_item > button.on{ background-color:rgba(255, 255, 255, 1);}
.tw_legend_item > button.on::before{ transform: rotate(180deg);}

.tw_legend_list_wrap{ border-top: 1px solid #d8d8d8; padding: 12px 12px 8px 9px; background-color:rgba(255, 255, 255, 0.8); opacity:1; display: none;}
.tw_legend_list_wrap ul{ }
.tw_legend_list_wrap ul li{ margin-bottom: 4px; height: 20px; position: relative; display: flex; align-items: center; gap: 6px;}
.tw_legend_list_wrap .form_check input[type=checkbox] ~ label,
.tw_legend_list_wrap .form_check input[type=radio] ~ label{ font-size: 13px;}

.tw_legend_item > button.on + .tw_legend_list_wrap{ background-color:rgba(255, 255, 255, 1)}

.tw_legend_wrap.le_poll .tw_legend_list_wrap{ padding: 12px 10px 8px 15px;}

.icon_tw{ margin-right: 4px;}

.relegd_tooltip_wrap{ position: relative;}
.btn_relegd_info{ position: relative; width: 16px; height: 16px; background: #7489a0; color: #fff; font-size: 12px; font-weight: 600; border-radius: 100%; display: inline-flex; justify-content: center; align-items: center;}
.btn_relegd_info::before{ content: "?";}
/* .btn_relegd_info.close::before{ content: "X"; margin-left: -1px;} */

.relegd_info_tooltip{ position: absolute; background-color: rgba(45, 45, 45, 0.8); opacity: 1; border-radius: 5px; width: max-content; padding: 7px 10px; font-size: 13px; line-height: 16px; color: #fff; top: -40px; left: -44px; display: none; z-index: 5;}
.relegd_info_tooltip:after{ content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -9px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid #454c50;}

.btn_relegd_info:active + .relegd_info_tooltip,
.btn_relegd_info:hover + .relegd_info_tooltip{ display: inline-block;}

.sub_slide_wrap{}
.sub_slide_wrap button{ position: relative; margin-bottom: 4px; font-size: 13px; width: 100%; display: flex;}
.sub_slide_wrap button::after{ content: "▼"; position: absolute; top: 1px; right: 5px; font-size: 8px;}
.sub_slide_wrap button.on::after{ content: "▲";}
.sub_slide_wrap button.on{}
.sub_slide_wrap:last-child{ margin-top: 10px;}
.sub_slide_list{ display: none;}
.sub_slide_list.on{ display: block;}

/* 실시간 : 지도 아이콘 */
.tw_icon_wrap{ position: absolute; display: flex;}
.tw_icon_wrap img{ width: fit-content; height: fit-content;}
.tw_icon_wrap img + img{ margin-left: 3px;}

.tw_icon{ position: absolute;}
.tw_icon_wrap .tw_icon{ position: relative;}

/* 툴팁 */
.ak_tooltip{ position: absolute; background-color:rgba(0, 106, 225, 0.95); opacity: 1; border-radius: 6px; width: max-content; min-width: 200px; max-width: 270px; z-index: 9999;}
.ak_tooltip:after{content: ""; position: absolute; display: inline-block; left: 50%; transform: translateX(-50%); bottom: -9px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:9px solid #0c71e1;}
.ak_tooltip.a_up:after{ bottom: auto; top: -9px; bottom: auto; border-left:5px solid transparent; border-right:5px solid transparent; border-top:none; border-bottom:9px solid #0c71e1;}

.ak_tooltip.wari{}/* 주의보/경보 */
.ak_tooltip.firei{}/* 화재 */
.ak_tooltip.eai{}/* 지진정보 */

.ak_tooltip .ak_tit{ height: 30px; padding-left: 14px; margin-top: 2px; font-size: 14px; font-weight: 600; color: #fff; display: flex; align-items: center;}
.ak_tooltip .ak_cont{ padding: 0 5px 5px 5px;}

.ak_tooltip .ak_cont ul{ background-color:rgba(11, 99, 197, 0.95); opacity: 1; border-radius: 4px; border: 1px solid #609be5; padding: 8px 11px;}
.ak_tooltip .ak_cont ul li{ color: #fff; font-size: 12px; font-weight: 300; line-height: 1.2;}
.ak_tooltip .ak_cont ul li span{ color: #ebf5ff; font-size: 12px; font-weight: 300;}

/*############################### [02] 오늘/내일/모레 대기정보 ###############################*/
.forecast_tab{ position: absolute; top: 0; right: 360px; width: 192px; padding: 2px; border-radius: 5px; background: #e3ecf3; display: flex; z-index: 999;}
.forecast_tab li{ flex: 1;}
.forecast_tab li button{ font-size: 14px; font-weight: 400; width: 100%; height: 32px; display: flex; justify-content: center; align-items: center;}
.forecast_tab li.on button{ border-radius: 5px; background: var(--airk-main-color); color: #fff;}

.bnt_forecast_view{ position: absolute; width: 140px; height: 30px; border-radius: 30px; padding-left: 20px; font-size: 14px; font-weight: 500; color: #fff; border: 1px solid #fff; right: 360px; top: 91px; display: flex; align-items: center; z-index: 999;
    background-image: url("../images/newmain/arr_forecast_view.png");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-color:rgba(250, 94, 0, 0.8); opacity: 1;
}

.si_tag{ position: absolute; height: 30px; width: max-content; border-radius: 30px; background: #fff; border: 1px solid #d8d8d8; font-size: 14px; padding: 0 12px; display: flex; align-items: center; gap: 5px; z-index: 3;}
.si_tag strong{ font-weight: 500;}
.si_tag.sit01 strong{ color: var(--airk-color-01);}
.si_tag.sit02 strong{ color: var(--airk-color-02);}
.si_tag.sit03 strong{ color: var(--airk-color-03);}
.si_tag.sit04 strong{ color: var(--airk-color-04);}
.si_tag.sit05 strong{ color: var(--airk-color-05);}

.forecast_exc_info{ position: absolute; right: 360px; bottom: 27px; height: 30px; border-radius: 30px; padding: 5px 5px 5px 38px; background: #eff6fa; display: flex; gap: 10px; z-index: 999;}
.forecast_exc_info::before,
.forecast_exc_info::after{ content: ""; position: absolute; border-radius: 100%; top: 50%; transform: translateY(-50%);}
.forecast_exc_info::before{ width: 16px; height: 16px; background: #fdc41d; left: 15px;}
.forecast_exc_info::after{ width: 8px; height: 8px; background: #db343b; left: 19px;}
.forecast_exc_info.move{ right: 0;}

.btn_forecast_exc_info{ position: relative; width: 20px; height: 20px; background: #2d2d2d; color: #fff; font-size: 14px; border-radius: 100%;}
.btn_forecast_exc_info::before{ content: "?";}
.btn_forecast_exc_info.close::before{ content: "X"; position: absolute; font-size: 11px; left: 7px; top: 3px;}

.exc_info_tooltip{ position: absolute; background-color: rgba(45, 45, 45, 0.8); opacity: 1; border-radius: 5px; width: max-content; padding: 7px 10px; font-size: 13px; line-height: 16px; color: #fff; top: -74px; right: 0px; display: none;}
.exc_info_tooltip:after{ content: ""; position: absolute; right: 10px; bottom: -9px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid #454c50;}

/*############################### [03] 대기오염통합지도 ###############################*/
.btn_layer_source{ height: 25px; width: 100%; border-radius: 25px; background: #323232; color: #fff; font-size: 13px; font-weight: 500; margin-top: 4px;}

.tw_layer_pop{ position: absolute; border-radius: 10px; background: #edf1f5; padding: 0 10px 10px 10px; min-width: 300px; display: none; z-index: 999;}
.tw_layer_pop .layer_pop_top{ height: 34px; display: flex; align-items: center;}
.tw_layer_pop .layer_pop_top .pop_tit{ font-size: 14px; font-weight: 500; padding-left: 10px;}
.tw_layer_pop .layer_pop_cont{ background: #fff; border-radius: 10px; padding: 10px;}

.tw_layer_pop.layer_source_pop{ right: 174px; bottom: 20px;} /* 레이어 출처 팝업 */
.tw_layer_pop.mylocal_air_pop{ right: 174px; bottom: 20px; width: 480px;} /* 우리동네 대기질 정보 측정값 팝업 */
.map_layer_pop{ width: 100%; height: 100%; box-sizing: border-box;}

.sm_tit{ position: relative; font-size: 14px; padding-left: 9px; margin-bottom: 5px;}
.sm_tit::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; background: #1d1d1d;}

.btn_tw_layer_pop_close{ position: absolute; width: 19px; height: 19px; right: 12px; top: 8px; background: url("../images/newmain/btn_tad_close.png") no-repeat 0 0;}

.airpoll_address_wrap{ position: absolute; top: 0; left: 359px; display: flex; gap: 18px;}
.airpoll_address_wrap .admin_district{ position: relative; top: auto; right: auto;}
.airpoll_add_bar{ border-radius: 8px; width: 683px; height: 30px; padding: 0 3px 0 18px;
    background: linear-gradient(300deg, rgba(0,138,245,1) 0%, rgba(0,195,83,1) 100%);
    display: flex; align-items: center; justify-content: space-between;
}
.ap_add_set{ display: flex; align-self: center; gap: 7px;}
.ap_add_set span{}

.ap_sel{ height: 22px; font-size: 13px; padding-left: 10px; border-radius: 5px; border: none; background: url("../images/newmain/ap_sel_bg.png") no-repeat right 14px center #fff; min-width: 60px;}
.ap_sel.sido{ width: 132px;}
.ap_sel.sigun{ width: 132px;}
.ap_sel.dong{ width: 118px;}

.btn_ap_add_search{ width: 106px; height: 22px; color: #fff; font-weight: 400; background: #00407f; border-radius: 5px; font-size: 13px; display: flex; justify-content: center; align-items: center;}

/* 도로명 주소 팝업 */
.juso_pop{ display:none; border:1px solid #000; position:absolute; top:5%; right: 230px; width:395px; background:#fff;}
.jp_tit{ background:#3b3d49; color:#fff; padding:10px 15px; letter-spacing:-1px; font-family:notoKr-bold; position:relative; font-size:14px;}
.btn_jido_close{ position:absolute; top: 8px; right:5px; width: 24px; height: 24px; background: url("../images/newmain/btn_jido_close.png") no-repeat center;}
.juso_search{padding:20px 25px 10px 25px; background:#fff; position:relative;}
.juso_search> input{ border:none !important; font-weight: bold; font-size:15px; color:#000; height: 32px;}
.jp_search_box> span{ font-size:11px; color:#5e5e5e; margin-bottom:10px; letter-spacing:-1px; display:inline-block;}
.juso_search> p{ border-top: 2px solid #333333; padding-top:10px; letter-spacing: -1px; color:#5e5e5e;}
.btn_jido_search{ display: inline-block; position: absolute; top: 25px; right: 26px; width: 28px; height: 28px; background: url("../images/newmain/jido_search.png") no-repeat center;}

.jp_list_wrap{ background:#f4f4f4; padding:20px 25px;}
.jp_list{ background:#fff; width: 360px; height: 285px; overflow-y: scroll;}
.jp_list> a{ padding:10px 8px 8px 8px; display:block; border-top:1px solid #dbdbdb;}
.juso_pop .num{ font-weight:bold; color:#b00000; margin-bottom:10px;}

.juso_info> li{ margin-bottom: 4px; font-size: 12px;}
.juso_info> li:last-child{ margin-bottom: 0px !important;}
.juso_info> li> span{ color:#Fff; padding:3px 5px; letter-spacing:-1px; margin-right:10px; width:30px; text-align:center; font-size:11px; display:inline-block; border-radius: 2px;
}
.jp_list> a:hover{ background:#eef4fb; border-top:1px solid #ccd2d8;}
.j1{ font-weight:bold;}
.j1> span{ background:#4d6e94; font-weight:normal !important;}
.j2> span{ background:#9e9e9e;}

/* 삭제 대기오염 관련정보 통합지도 250619 */
.air_poll_ctrl_wrap{ position: absolute; width: 340px; top: 45px; left: 0; background: #ecf3f7; border-radius: 10px; padding: 5px; display: none;}
.air_poll_top{ height: 45px; border-radius: 5px; background: url("../images/newmain/air_poll_top_bg.png") no-repeat right 0 center #1d56bc; padding: 0 10px 0 22px; display: flex; justify-content: space-between; align-items: center;}
.apol_tit{ font-size: 18px; color: #fff;}

.btn_apol_all_view{ width: 60px; height: 24px; border-radius: 5px; background: url("../images/newmain/arr_apol_down.png") no-repeat left 10px center #fff; padding-left: 28px; display: flex; align-items: center; color: #1d56bc; font-size: 13px; font-weight: 500;}
.btn_apol_all_view.on{ background: url("../images/newmain/arr_apol_up.png") no-repeat left 10px center #fff;}

.air_poll_cont_wrap{ margin-top: 5px; display: none;}
.air_poll_box{ border: 1px solid #e2e2e2; border-radius: 5px; padding: 0 5px 0 5px; background: #fff;}
.apoll_top{ position: relative; height: 36px; font-size: 16px; font-weight: 500; display: flex; align-items: center; padding-left: 16px;}

.air_poll_box + .air_poll_box{ margin-top: 5px;}

.air_poll_cont{ background: #f0f4f7; border-radius: 5px; padding: 8px 10px; margin-bottom: 5px; display: none;}

.btn_apoll_cont_toggle{ position: absolute; width: 16px; height: 16px; border-radius: 100%; background: #b4c4d6; right: 12px; top: 50%; transform: translateY(-50%);}
.btn_apoll_cont_toggle::before,
.btn_apoll_cont_toggle::after{ content: ""; position: absolute; width: 8px; height: 2px; background: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.btn_apoll_cont_toggle.on{ background: #1d56bc;}
.btn_apoll_cont_toggle.on::after{ transform: translate(-50%, -50%) rotate(90deg);}

.apol_btn_wrap{ display: flex; gap: 5px; align-items: center;}
.btn_toggle_ak{ position: relative; height: 22px; border-radius: 22px; background: #8e8e8e; display: flex; gap: 2px; align-items: center; color: #fff; padding: 0 10px 0 0;}
.btn_toggle_ak.on{ padding: 0 0 0 10px;}
.btn_toggle_ak::before,
.btn_toggle_ak::after{ content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 100%; background: #fff; margin: 3px;}
.btn_toggle_ak::after{ display: none;}
.btn_toggle_ak.on::before{ display: none;}
.btn_toggle_ak.on::after{ display: inline-block;}

.btn_toggle_ak.on.st01{ background: #2768ff;}
.btn_toggle_ak.on.st02{ background: #00ad00;}

.apoll_item_top{ display: flex; justify-content: space-between;}
.apoll_item_top .apoi_tit{ display: inline-block;}
.apoi_tit{ font-size: 14px; font-weight: 400; margin: 9px 0 3px 0; display: block; padding-left: 5px;}
.apoi_tit .s_tit{ font-size: 12px;}

.ap_inp{ border-radius: 5px; border: none !important; padding-left: 10px;}

.apoi_date_unit{ width: 100%; display: inline-flex; flex-wrap: wrap; gap: 5px;}
.apoi_date_unit .ap_inp{ flex: 1; background: url("../images/newmain/icon_calen.png") no-repeat right 15px center #fff;}

.apoi_date_unit.ex2 .ap_inp{ flex: none;}

.apoi_sel{ height: 24px; font-size: 13px; padding: 0 28px 0 10px; border-radius: 5px; border: none; background: url("../images/newmain/ap_sel_bg.png") no-repeat right 14px center #fff; min-width: 60px;}
.apoi_date_unit .apoi_sel{ width: 80px;}
.apoi_sel.full{ width: 100%;}

.apoi_mang_list{ border-radius: 3px; background: #fff; padding: 11px 10px; display: flex; flex-wrap: wrap;}
.apoi_mang_list li{ display: flex; align-items: center; gap: 10px; width: 120px;}

.apoi_mang_list li img{ margin-left: 8px; vertical-align: middle;}
.apoi_mang_list label{ cursor: pointer; font-size: 13px;}

.apoi_legend_list{ border-radius: 3px; background: #fff; padding: 10px 10px; display: flex; flex-wrap: wrap;}
.apoi_legend_list li{ flex: 1; text-align: center; display: inline-flex; flex-direction: column; align-items: center;}
.apoi_legend_list em{ display: inline-block; width: 12px; height: 12px; border-radius: 100%; margin-bottom: 4px;}
.apoi_legend_list em.cyc01{ background: var(--airk-color-01);}
.apoi_legend_list em.cyc02{ background: var(--airk-color-02);}
.apoi_legend_list em.cyc03{ background: var(--airk-color-03);}
.apoi_legend_list em.cyc04{ background: var(--airk-color-04);}
.apoi_legend_list em.cyc05{ position: relative; background: var(--airk-color-05);}
.apoi_legend_list em.cyc05::before{ content: "-"; color: #fff; width: 12px; height: 12px; display: flex; align-items: center; justify-content: center;}
.apoi_legend_list span{ text-align: center; font-size: 11px; line-height: 11px;}

.apc_control{ display: flex; gap: 10px; align-items: center; justify-content: space-between;}
.apc_control input[type="text"]{ flex: 1;}
.btn_apc_wrap{ display: flex; gap: 5px; align-items: center;}
.btn_apc{ border-radius: 2px; border: 1px solid #dcdcdc; display: inline-block; width: 24px; height: 24px; background-color: #fff; background-position: center; background-repeat: no-repeat;}
.btn_apc.prev{ background-image: url("../images/newmain/apc_prev.png");}
.btn_apc.play{ background-image: url("../images/newmain/apc_play.png");}
.btn_apc.stop{ background-image: url("../images/newmain/apc_stop.png"); display: none;}
.btn_apc.next{ background-image: url("../images/newmain/apc_next.png");}

.apc_opacity{ margin-top: 10px; display: flex; align-items: center; gap: 8px; justify-content: space-between;}
.apc_opacity_range{ font-size: 12px; display: flex; gap: 5px;}
.apc_opacity_range input[type="range"]{ width: 45px;}

.apc_desc{ font-size: 13px; line-height: 14px; margin-top: 15px; padding-bottom: 3px;}

.tw_tbl{ border-top: 1px solid #2d2d2d;}
.tw_tbl th,
.tw_tbl td{ border-bottom: 1px solid #d8d8d8; padding: 5px 15px; font-size: 13px;}
.tw_tbl th:not(:first-child),
.tw_tbl td:not(:first-child){ border-left: 1px solid #d8d8d8;}
.tw_tbl th{ background: #eff5ff; text-align: center;}
.tw_tbl.thLeft th{ text-align: left;}
.tw_tbl.tdCenter td{ text-align: center; padding: 5px;}

.tw_tbl + .tw_tbl{ margin-top: 10px;}

/* 우리동네 대기질 정보 측정값 */
.my_local_air_info{ border-top: 1px solid #d8d8d8; padding-top: 4px;}
.mylocal_detail_add{ font-size: 13px; color: #717171; margin-bottom: 8px; padding-left: 10px;}

.mylocal_detail_info{ display: flex; gap: 10px; margin-bottom: 4px;}
.mylocal_detail_info > li{ flex: 1; height: 110px;}
.mylocal_detail_info > li:nth-child(1){ text-align: right; padding-top: 4px;}
.mylocal_detail_info > li:nth-child(1) img{ margin-right: 17px;}

#mylocal_detail_info_character{ display: flex; justify-content: center;}
#mylocal_detail_info_character > img{ margin: 0;}

.mylocal_air_box{ height: 100%; background: #edf1f5; border-radius: 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px;}
.mylocal_air_box .air_type{ background: #fff; color: #0a0a0a; height: 26px; border-radius: 26px; border: 1px solid #dcdcdc; padding: 0 10px; width: max-content; display: flex; align-items: center;}
.mylocal_air_box .air_num{ font-size: 13px; color: #0a0a0a; display: inline-block;}
.mylocal_air_box .air_num b{ font-size: 24px; font-weight: 500; margin-right: 4px;}

.ayc01{ color: var(--airk-color-01);} /* 좋음 */
.ayc02{ color: var(--airk-color-02);} /* 보통 */
.ayc03{ color: var(--airk-color-03);} /* 나쁨 */
.ayc04{ color: var(--airk-color-04);} /* 매우나쁨 */
.ayc05{ color: var(--airk-color-05);} /* 없음 */

.mylocal_weth_list{ padding: 9px 12px 0 12px; border-radius: 5px; border: 1px solid #d8d8d8; height: 100%;}
.mylocal_weth_list li{ display: flex; justify-content: space-between;}
.mylocal_weth_list li span{ font-size: 13px; color: #0a0a0a;}
.mylocal_weth_list li span:first-child{ font-weight: 400;}
.mylocal_weth_list li:not(:last-child){ margin-bottom: 3px;}

.mweth_icon img{ width: 20px; height: 20px;}

.mylocal_time_tbl tr td em{ display: block; color: #717171; font-size: 12px; margin-bottom: -3px;}
/* 2025.02.19. | itnew | 이재현 : CE 디자인 변경 요청에 의한 수정 */
.mylocal_time_tbl > tbody > tr:nth-child(2) > th{font-size: 12px;}
.chart_tbl{width: 100%;}

.st_tag_wrap{ width: 875px; position: absolute; bottom: 20px; left: 350px; display: flex; flex-wrap: wrap; gap: 10px; z-index: 99; display: none;}
.st_tag{ position: absolute; display: inline-block; height: 25px; font-size: 13px; border-radius: 5px; background: #f0f3f7; padding: 4px 10px 0 10px; width: max-content; z-index: 99;}
.btn_st_tag_close{ width: 10px; height: 10px; background: url("../images/newmain/st_tag_close.png") no-repeat 0 0; margin: -2px 0 0 10px;}

.st_tag_wrap .st_tag{ position: relative;}
.st_tag_wrap.wide{ width: 1225px; left: 0;}

.maxPos3 > div.whe{ width:70px; height: auto; border:1px solid var(--airk-box-line); border-radius:8px; overflow:hidden; padding: 6px 0 !important; text-align:center; background-color: rgba(255, 255, 255, 0.9); opacity: 1; z-index:3;}
.maxPos3 > div.whe span{display:block; width:100%; height:100%; padding:0 0 0 0; background:transparent;font-size:13px; color:#0a0a0a; font-weight:500; line-height: 1;}
.maxPos3 > div.whe span strong{color:#0f62cc; font-weight:400; font-size:13px; line-height: 1;}

.maxPos3 > div.whe.w01{}
.maxPos3 > div.whe.w01 img{ position:relative; width: 40%;}
.maxPos3 > div.whe.w01 span{ margin-top: 2px;}
.maxPos3 > div.whe.w02{}
.maxPos3 > div.whe.w02 img{ position:relative;}
.maxPos3 > div.whe.w02 span{ margin-top: -4px;}
.maxPos3 > div.whe.w03{}
.maxPos3 > div.whe.w03 span{}
.maxPos3 > div.whe.w03 span strong{display:block; padding:0; margin-top: 4px;}