@charset "UTF-8";
.hide { display: none; }

#hpf_search_box { position: relative; border: 1px solid #D9DFEE; border-radius: 10px; background-color: #D9DFEE; padding: 20px 150px 20px 20px; }
#hpf_sb_table th:first-child { width: 100px; }
#hpf_sb_table select, #hpf_sb_table option { color: #555; font-size: 12px; font-weight: unset; }
#hpf_sb_table select:focus,
#hpf_sb_table select:focus-within {outline : 2px solid #000 !important;}
#hpf_sb_table select { outline: none; height: 32px; border: 1px solid #BDC5D7; border-radius: 4px; cursor: pointer; background: white }
#hpf_sbt_basic, #hpf_sbt_town { display: none; }

#hpf_sb_div { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); }
#hpf_sb_div button { border: 1px solid #494d57; border-radius: 4px; width: 80px; height: 32px; color: white; font-size: 12px; }
#hpf_sbd_reset { background: #68739d; border-color: #6F79A5; }
#hpf_sbd_search { background: #010C3B; border-color: #010C3B; }
.hpf_sbd_class_svg { width: 12px; fill: white; }

.hpf_class_contents_box { border: 1px solid #0000001A; border-radius: 10px; background-color: white; padding: 20px; box-shadow: 0 3px 5px #0000001A; }
.hpf_class_contests_title { position: relative; display: flex; align-items: center; }
.hpf_class_ct_text:before { display: inline-block; content: ''; position: absolute; left: 0; top: 8px; width: 0; height: 18px; border-left: 4px solid #4366ea; }
.hpf_class_contests_title#hpfmc_d1_title { width: 100%; justify-content: space-between; }
.hpf_class_ct_text { padding-left: 10px; color: black; font-size: 20px; font-weight: 300;}
.hpf_class_ct_info { padding-left: 10px; font-size: 12px; }

/* 온열질환자 발생 예측 정보 & 지역 예측 요약 정보*/
#hpf_middle_container { position: relative; margin-top: 20px; width: 100%; height: 590px; }
#hpfmc_div_1, #hpfmc_div_2 { position: absolute; top: 0; height: 590px; }
#hpfmc_div_1 { width: 640px; left: 0; }
#hpfmc_div_2 { width: 540px; right: 0;}

/* 날짜 선택*/
#hpfmc_d1_navi { position: relative; display: flex; margin-top: 10px; width: 100%;  z-index: 10; }
#hpfmc_d1_navi > .hpf_date_select { border: none; border-radius: 4px; padding: 9px; color: white; font-size: 13px; margin-right: 5px; background-color: rgba(0, 0, 0, 0.5); }
#hpfmc_d1_navi > .hpf_date_select.active {  background-color: rgba(0, 154, 225, 0.7); }


.hpf_class_reative_box { position: relative; height: 100%; }
.hpf_class_info_btn { margin-top: -3px; border-radius: 50%; width: 15px; height: 15px; padding: 0; background: transparent url('../images/icon_caution.png') no-repeat scroll center center; background-size: 15px;  }
#hpf_reative_box_1 { width: 100%; position: relative;}
#hpf_reative_box_2 { width: 100%; position: relative;}

#hpfmc_d1_map { position:absolute; width: 100%; height: 480px; overflow: overlay; z-index: 10; }
#hpfmc_d1_popup { position:absolute; border-radius: 4px; width: 150px; background-color: white; }
#hpfmc_d1p_content { width: 100%; height: 100%; display: flex; justify-content: space-between;}
#hpfmc_d1p_content li { font-size: 13px; height: 30px; line-height: 30px; padding: 0 5px; }
#hpfmc_d1p_content li b { float: right; }


/* 온열질환자 지수 범례*/
#hpfmc_d1_legend { position: absolute; bottom: 0; right: 0; border: 1px solid #5d5d5d; cursor: pointer; z-index: 30 }
#hpfmc_d1_legend li { width: 80px; height: 45px; line-height: 45px; text-align: center; font-weight: 500; }

#hpf_summary_tbl { width: 100%; margin-top: 10px;}
#hpf_summary_tbl th, #hpf_summary_tbl td { height: 80px; font-size: 15px; }
#hpf_summary_tbl th { border: 1px solid #ccc; background-color: #e8ebf0; line-height: 25px; font-weight: 500; }
#hpf_summary_tbl td { border: 1px solid #ccc; text-align: center; height: 100px; line-height: 25px; }

#hpf_summary_tbl th:nth-child(1),
#hpf_summary_tbl td:nth-child(1) { width: 20%;}

#hpf_summary_tbl th:nth-child(2),
#hpf_summary_tbl td:nth-child(2) { width: 20%;}

#hpf_summary_tbl th:nth-child(3),
#hpf_summary_tbl td:nth-child(3) { width: 20%;}

#hpf_summary_tbl th:last-child,
#hpf_summary_tbl td:last-child { width: 20%;}

/* 지역 기상 예측 정보 */
#hpf_bottom_container { position: relative; margin-top: 20px; width: 100%;}

/* 지역 기상 예측 정보 - 전국 아닐 때*/
.highcharts-scrolling::-webkit-scrollbar { width: 8px; height: 8px; }
.highcharts-scrolling::-webkit-scrollbar-track { background-color: #efefef; }
.highcharts-scrolling::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 10px; }
.highcharts-scrolling::-webkit-scrollbar-thumb:active { background: #808080; }
.highcharts-scrolling::-webkit-scrollbar-button { display: none; }

.chart_tooltip_series_name {font-weight: 900; text-align: right;}
.chart_tooltip_series_val {font-weight: 900; text-align: right; padding-left: 5px; color:#000;}



/* 지역 기상 예측 정보 - 전국일 때*/
#hpf_korea_tbl {bottom: 0; width: 100%; table-layout: fixed; margin-top: 10px;}
#hpf_korea_tbl th, #hpf_korea_tbl td { font-size: 15px;}
#hpf_korea_tbl th { border: 1px solid #ccc; background-color: #e8ebf0; line-height: 50px; font-weight: 500; }
#hpf_korea_tbl td {border: 1px solid #ccc; text-align: center; line-height: 28px; }

/* 예측 레벨에 따른 컬러 지정 */
/* level에 따른 색상 변경 시 HPF_LEVEL_COLOR 변수(지도 색칠용) 내 색상값에도 변경 필수! */
.hpf_level_0 { background-color: #d7d7de; color: #2f2f2f; }
.hpf_level_1 { background-color: #ffff00; color: #2f2f2f; }
.hpf_level_2 { background-color: #ffad00; color: #2f2f2f; }
.hpf_level_3 { background-color: #ff0000; color: #ffffff; }


/* 온열질환자 발생 예측 정보 info 내 테이블 */
.hpf_info_tbl { position: relative; bottom: 0; width: 100%; margin-top: 45px;}
.hpf_info_tbl th { padding: 10px 0; border: 1px solid #ccc; background-color: #e8ebf0; font-weight: 500; }
.hpf_info_tbl td { padding: 20px 0; border: 1px solid #ccc; text-align: center; }

.hpf_info_tbl th:first-child,
.hpf_info_tbl td:first-child { width: 14%;}

.hpf_info_tbl th:last-child,
.hpf_info_tbl td:last-child { width: 14%;}

/* 전국 기준일 때*/
.hpf_info_tbl.hpf_korea_info td { padding: 10px 0;}
.hpf_info_tbl.hpf_korea_info th:last-child,
.hpf_info_tbl.hpf_korea_info td:last-child { width: 42%;}




/* Back wall start */
#_back_wall { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000BF; z-index: 1000; }
#_bw_contents { position: relative; top: 0; left: 0; bottom: 100%; right: 100%; width: 100%; height: 100%; padding: 20px; }
#_bw_help_box { position: absolute; transform: translate(-50%, -50%); border-radius: 5px; background: white; box-shadow: 0 3px 5px #0000001A; }
#_bw_hb_btn_close { position: absolute; top: 5px; right: 10px; width: 30px; font-size: 20px; z-index: 10; }
#_bw_footer { bottom: 20px; border-top: 1px solid #EEE; width: calc(100% - 40px); padding-top: 10px; text-align: center; }
#_bw_footer button { border-radius: 5px; width: 80px; height: 30px; background-color: #666; color: #DDD; }
._bw_hb_class_contents {}
._bw_hb_class_contents li { font-size: 20px; padding: 2.5px 0; word-spacing: 2px; }
._bw_hb_class_contents li:nth-child(n+3) { margin-top: 2.5px; }

._bw_hb_class_title:before { content: ''; position: absolute; left: -10px; top: 8px; width: 0; height: 20px; border-left: 4px solid #4366EA; }
._bw_hb_class_title { position: relative; margin-left: 10px; }

._bw_hb_class_main:before { content: '▶'; margin: 0 10px; }
._bw_hb_class_main { margin-left: 32px; text-indent: -32px; }

._bw_hb_class_example { margin-left: 54px; text-indent: -22px; }

._bw_hb_class_explanation:before { content: '▶'; margin: 0 10px; }
._bw_hb_class_explanation { margin-left: 32px; text-indent: -32px; }

._bw_hb_class_formula:before { content: '수식'; position: absolute; left: 5px; top: -40px; font-size: 11px; }
._bw_hb_class_formula { position: relative; margin-top: 20px !important; height: 100px; line-height: 100px; background: lightgray; text-align: center; }

._bw_hb_class_table_1 { border-top: 3px double #CCC; border-bottom: 1px solid #CCC; width: 100%; }
._bw_hb_class_table_1 th,._bw_hb_class_table_1 td { padding: 7px 0; }
._bw_hb_class_table_1 th { background-color: #EEE; text-align: center; border-bottom: 1px solid #CCC; }
._bw_hb_class_table_1 td { border-bottom: 1px dotted #CCC; }
._bw_hb_class_table_1 td:first-child { text-align: center; }
/* Back wall finish */

/* Loading animation start */
#_main_loading_section { position: absolute; transform: translate(-50%, -50%); }
._ml_class_loader {
    color: #AAAAAA; font-size: 90px; text-indent: -9999em; overflow: hidden;
    width: 1em; height: 1em; border-radius: 50%; margin: 72px auto; position: relative;
    -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@-webkit-keyframes load6 {
    0% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
    5%, 95% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
    10%, 59% { box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; }
    20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; }
    38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; }
    100% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
}
@keyframes load6 {
    0% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
    5%, 95% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
    10%, 59% { box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; }
    20% { box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; }
    38% { box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; }
    100% { box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; }
}
@-webkit-keyframes round {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes round {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/* Loading animation finish */