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

/*******************************
 * Infomation : 국가 통합물관리정보플랫폼 (물모아)
 * FileName   : /com/web/css/sub.css 
 * Update     : 2026.10.15.
********************************/

/*##############################  분야별 상세검색 ###########################*/

.wide_inner{ padding-bottom: var(--krds-pc-gap-layout-contents-footer); padding-left: 2rem; padding-right: 2rem;}
.category_tab_menu{}

.btn_{ display: inline-flex;
    content: "";
    display: inline-flex;
    width: var(--krds-icon--size-medium);
    height: var(--krds-icon--size-medium);
    background-color: var(--krds-light-color-text-basic);
    forced-color-adjust: none;}

.krds-btn.text.btn_category_view{ font-size: 1.7rem;}
.btn_category_view i{ transform: rotate(90deg);}
.krds-btn.text.btn_cate gory_view i{ transform: rotate(90deg);}

.g-wrap .g-conts-area .sec-tit{ font-size: 2.8rem; color: var(--mma-text-prim);}
.g-wrap .g-conts-area .con-tit{ font-size: 2.4rem;}

.subject_search_cont_wrap .search-list-top .sch-sort .krds-form-select-sort{ background-color: transparent !important;}

@media all and (max-width: 768px){
    .wide_inner{ padding-left: 0; padding-right: 0;}
    .krds-btn.text.btn_category_view{ margin-left: auto;}
}

.tab.line .btn-tab{ border-radius: .8rem .8rem 0 0;}
.tab.line .active .btn-tab{ background-color: #eef2f7;}

.category_tab_wrap{ position: relative; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;}
.category_tab{ display: flex;}
.category_tab li{}
.category_tab li button{ position: relative; display: inline-flex; width: 13rem; height: 10rem; border-radius: .8rem .8rem 0 0; font-size: 1.7rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem;}
.category_tab li button::before{ content: ""; height: 3rem; width: 3rem; background-repeat: no-repeat; background-position: center;}
.category_tab li:nth-child(1) button::before{ background-image: url("../images/sub/subj_tab_icon01.png");}
.category_tab li:nth-child(2) button::before{ background-image: url("../images/sub/subj_tab_icon02.png");}
.category_tab li:nth-child(3) button::before{ background-image: url("../images/sub/subj_tab_icon03.png");}
.category_tab li:nth-child(4) button::before{ background-image: url("../images/sub/subj_tab_icon04.png");}
.category_tab li:nth-child(5) button::before{ background-image: url("../images/sub/subj_tab_icon05.png");}
.category_tab li:nth-child(6) button::before{ background-image: url("../images/sub/subj_tab_icon06.png");}
.category_tab li:nth-child(7) button::before{ background-image: url("../images/sub/subj_tab_icon07.png");}

.category_tab li.on button{ background-color: #e4e9ee; color: var(--mma-color-prim); font-weight: 600;}
.category_tab li.on:nth-child(1) button::before{ background-image: url("../images/sub/subj_tab_icon01_on.png");}
.category_tab li.on:nth-child(2) button::before{ background-image: url("../images/sub/subj_tab_icon02_on.png");}
.category_tab li.on:nth-child(3) button::before{ background-image: url("../images/sub/subj_tab_icon03_on.png");}
.category_tab li.on:nth-child(4) button::before{ background-image: url("../images/sub/subj_tab_icon04_on.png");}
.category_tab li.on:nth-child(5) button::before{ background-image: url("../images/sub/subj_tab_icon05_on.png");}
.category_tab li.on:nth-child(6) button::before{ background-image: url("../images/sub/subj_tab_icon06_on.png");}
.category_tab li.on:nth-child(7) button::before{ background-image: url("../images/sub/subj_tab_icon07_on.png");}

.sjs_tab_util{ margin-left: auto; display: flex; gap: 1rem;}

.sjs_tag_wrap{ display: flex; gap: 1rem;}
.sjt_tag{ font-size: 1.5rem; height: 4rem; border-radius: 4rem; padding: 0 2rem; background-color: var(--sub-bg-color); box-sizing: border-box; border: 1px solid #fff;}
.sjt_tag.on{ color: var(--mma-text-prim); border: 1px solid var(--mma-color-prim);}

@media all and (max-width:1024px){
    .category_tab li button{ border-radius: 0.8rem;}
    .category_tab_wrap { margin-bottom: 2rem;}
}

@media (max-width: 768px) {
    .category_tab_wrap{ flex-direction: column;}
    .category_tab{ overflow: auto; width: 100%; padding: 0 1rem;}
    .category_tab li{}
    .category_tab li button{ flex-direction: row; height: 6rem;}

    .sjs_tab_util{ width: 100%; justify-content: space-between; margin-top: 2rem;}
}

/*
@media (max-width: 768px) {
    .category_tab_wrap{ flex-direction: column;}
    .category_tab{ flex-direction: column; width: 100%; gap: .8rem;}
    .category_tab li{}
    .category_tab li button{ border: 1px solid #e2e8f0; flex-direction: row; width: 100%; justify-content: left; height: auto; padding: 1rem 3rem; border-radius: .8rem;}

    .sjs_tab_util{ width: 100%; justify-content: space-between; margin-top: 2rem;}
}
*/
.subject_search_cont_wrap{ position: relative; min-height: 1000px; padding-top: 2rem;
    background: linear-gradient(180deg,rgba(237, 241, 245, 1) 0%, rgba(237, 241, 245, 1) 20%, rgba(255, 255, 255, 1) 100%); z-index: 2;
}
.subject_search_cont_wrap::after {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    transform: translateX(-50%);
    content: "";
    width: 100vw;
    height: 100%;
    background: url("../images/sub/subj_cont_bg.png") repeat-x top 0 left 0 #fff;
}

.subject_search_cont_wrap .inner{ position: relative; z-index: 2;}

.subj_search_box{ border-radius: 1.5rem; background-color: #fff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);}
.subj_search_box + .subj_search_box{ margin-top: 1rem;}
.subj_search_box + .form{ margin-top: 1rem;}
.subj_search_box + .subj_sch_wrap{ margin-top: 1rem;}
.subj_search_inner{ padding: 2.4rem 3.6rem;}

.subj_sch_wrap{ margin-bottom: 4rem;}

.subsb_top_wrap{ min-height: 4rem; display: flex; align-items: center;}
.susb_tit{ min-width: 19.5rem; color: #555; font-size: 1.9rem; font-weight: 600; display: flex; align-items: center; gap: 1rem;}
.susb_tit em{ background-color: #063a74; color: #fff; font-size: 1.5rem; width: 2.5rem; height: 2.5rem; border-radius: 2.5rem; display: inline-flex; justify-content: center; align-items: center;}

.susb_top_cont{}

.susb_box_cont{ margin-top: 1.2rem;}
.subj_search_bottom{ position: relative; height: 4rem; background-color: #f9fafb; border-radius: 0 0 1.5rem 1.5rem; display: flex; justify-content: center; align-items: center;}

.subj_search_bottom .subj_desc{ position: absolute; right: 3.5rem;}

@media (max-width: 768px) {
    .susb_top_cont{ width: 100%;}
    .subj_search_inner{ padding: 2rem;}
    .subsb_top_wrap{ min-height: auto; flex-direction: column; align-items: flex-start; gap: 1.2rem;}
    .subj_search_bottom{ flex-direction: column; height: auto; padding: 1rem;}
    .subj_search_bottom .subj_desc{ position: relative; margin-top: .8rem; right: auto;}
}

.subj_desc{ color: #555; font-size: 1.3rem;}

.data_type_chip_wrap{ display: flex; gap: 1rem; flex-wrap: wrap;}
.data_type_chip{ font-size: 1.5rem; height: 4rem; border-radius: 4rem; padding: 0 2rem; box-sizing: border-box; border: 1px solid #cdd1d5;}
.data_type_chip.on{ color: var(--mma-text-prim); border: 1px solid var(--mma-color-prim); background-color: var(--sub-bg-color);}
@media (max-width: 768px) {
    .data_type_chip_wrap{ flex-wrap: wrap;}
}


/* 분야별 상세검색 : 카테고리 : 데이터 선택 : 레이어 팝업 */
.category_layerpop .layer_pop_cont_wrap .layerpop_cont{ padding: 0;}

.category_layerpop{ top: 0; right: 0; display: none;}

.category_layerpop .layer_pop{ min-width: 36rem;}

@media (max-width: 768px) {
    .category_layerpop .layer_pop{ height: 85vh;}
    .tree_list_wrap{ height: calc(85vh - 20.4rem) !important;}   
}

/* 데이터 선택 : 수자원 */
.water_reso_tab_wrap{ display: flex; align-items: flex-end; gap: 1.2rem;}
.water_reso_tab{ display: flex; gap: 1.2rem;}
.water_reso_tab button{ width: 23.6rem; font-size: 1.5rem; border: 1px solid #cdd1d5; border-radius: 1rem; height: 5.2rem; padding: 0 1rem; display: flex; align-items: center; justify-content: center; gap: 1rem;}

.water_reso_tab button::before{ content: ""; width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; display: inline-flex; flex-shrink: 0;}
.water_reso_tab button:nth-child(1)::before{ background-image: url("../images/sub/subj_su_icon01.png");}
.water_reso_tab button:nth-child(2)::before{ background-image: url("../images/sub/subj_su_icon02.png");}
.water_reso_tab button:nth-child(3)::before{ background-image: url("../images/sub/subj_su_icon03.png");}
.water_reso_tab button:nth-child(4)::before{ background-image: url("../images/sub/subj_su_icon04.png");}
.water_reso_tab button:nth-child(5)::before{ background-image: url("../images/sub/subj_su_icon05.png");}

.water_reso_tab button.on{ background-color: var(--sub-bg-color); border: 1px solid var(--mma-color-prim); color: #1d56bc; font-weight: 600;}

@media (max-width: 768px) {
    .water_reso_tab_wrap{ flex-direction: column;}
    .water_reso_tab{ width: 100%; flex-direction: column;}
    .water_reso_tab button{ flex: auto; width: 100%; justify-content: left; padding: 0 2rem;}    
}

/* 분야별 상세검색 : 데이터 선텍 : 유역조사 */
.watershed_depth2 {
    display: flex; align-items: center; gap: 1.2rem; max-height: 0;
    flex-wrap: wrap;       /* 모바일에서 자동 줄바꿈 */
    transition: all 0.3s ease;
}
.watershed_depth2 .data-btn {
opacity: 0; transform: scale(0.55) translateY(6px);
pointer-events: none;
transition:
    opacity .28s cubic-bezier(0.34,1.56,0.64,1),
    transform .28s cubic-bezier(0.34,1.56,0.64,1),
    border-color .15s, background .15s, color .15s, box-shadow .15s;
    width: 12rem; height: 4.2rem; border-radius: .6rem; border: 1px solid #3d9fb8; font-size: 1.5rem;
}
.watershed_depth2 .data-btn.on{ background-color: #f0fcff; color: #21839c; font-weight: 600;}

.watershed_depth2.open .data-btn{ opacity: 1; transform: none; pointer-events: auto;}
.watershed_depth2.open .data-btn:nth-child(1) { transition-delay: .00s;}
.watershed_depth2.open .data-btn:nth-child(2) { transition-delay: .06s;}
.watershed_depth2.open .data-btn:nth-child(3) { transition-delay: .12s;}
.watershed_depth2.open .data-btn:nth-child(4) { transition-delay: .18s;}

.watershed_depth2.open{ max-height: 700px;}

.btn_watershed_survey.on{}
.btn_watershed_survey::after{ content: "▶"; font-size: 10px;}

@media (max-width: 768px) {
    .watershed_depth2{ width: 100%;}
    .watershed_depth2 .data-btn{ width: calc(50% - .6rem);}
    .btn_watershed_survey::after{ content: "▼";}
}

.susj_data_chip_wrap{ margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.2rem;}
.data_chi_chip{ font-size: 1.5rem; height: 4rem; border-radius: 4rem; border: 1px solid var(--subj-line-color); padding: 0 .8rem 0 .8rem; display: inline-flex; align-items: center;}
.data_chi_chip span{ padding: 0 .8rem 0 .8rem;}
.data_chi_chip.on{ background-color: var(--mma-color-prim); color: #fff; border: 1px solid #fff;}
.data_chi_chip em{ font-size: 1.3rem; padding: 0 .8rem; height: 2.6rem; border-radius: 2.6rem; display: inline-flex; align-items: center;}
.sdt1{ background-color: #eff5ff; color: #1d56bc;} /* 측정 */
.sdt2{ background-color: #e3f3e6; color: #008a1e;} /* 통계 */
.sdt3{ background-color: #fff8ef; color: #bc591d;} /* 기타 */
.sj_d_tag em{}

/* 세부데이터 */
.detail_data_chip_cont{ margin-top: 2rem; border-radius: 1rem; background-color: #ecf2fe; padding: 1.2rem 2.8rem; display: none;}
.detail_data_chip_inner{ display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center;}
.detail_data_chip_inner.down_show{ display: flex; animation: slideDown 0.2s ease;}

.detail_data_chip_cont .tit{ color: var(--mma-color-prim); font-size: 1.5rem; font-weight: 600;}
.susj_detail_chip_wrap{ display: flex; flex-wrap: wrap; gap: 1.2rem;}
.susj_detail_chip{ font-size: 1.5rem; height: 4rem; border-radius: 4rem; border: 1px solid var(--subj-line-color); background-color: #fff; padding: 0 .8rem 0 .8rem; display: inline-flex; align-items: center;}
.susj_detail_chip span{ padding: 0 .8rem 0 .8rem;}
.susj_detail_chip.on{ background-color: var(--mma-color-prim); color: #fff; border: 1px solid #fff;}
.susj_detail_chip em{ font-size: 1.3rem; padding: 0 .8rem; height: 2.6rem; border-radius: 2.6rem; display: inline-flex; align-items: center;}

@media (max-width: 768px) {
    .detail_data_chip_cont{ padding: 2rem;}
}

.wdataselec_detail_view{ margin-top: 2rem; display: none;}

.subj_wdata_table{ border: 1px solid #b1cefb; border-radius: 1rem; overflow: hidden;}
.subj_wdata_table table{}
.subj_wdata_table table th,
.subj_wdata_table table td{ font-size: 1.5rem; padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb;}
.subj_wdata_table table th{ font-weight: 600; text-align: center; background-color: var(--sub-bg-color);}
.subj_wdata_table table tbody tr:last-child th,
.subj_wdata_table table tbody tr:last-child td{ border-bottom: none;}

@media (max-width: 768px) {
    .subj_wdata_table table colgroup{ display: none;}
    .subj_wdata_table table th,
    .subj_wdata_table table td{ padding: .6rem .8rem; font-size: 14px;}
}

.btn_more_text{ color: var(--mma-color-prim); font-size: 15px; display: inline-flex; align-items: center; gap: .6rem;
}
.btn_more_text::after{ content: ""; font-size: 1rem;
    display: inline-flex;
    width: 1.4rem;
    height: 1.4rem;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_arrow_dropdown.svg");
    mask-image: url("../images/icon/ico_arrow_dropdown.svg");
    background-color: var(--mma-color-prim)
}
.btn_more_text.on::after{ transform: rotate(180deg);}

.wastay_more_data{ display: none; animation: slideDown 0.2s ease;}
.wastay_more_data.in_show{ display: contents; animation: slideDown 0.2s ease;}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px);}
    to { opacity: 1; transform: translateY(0);}
}

.sub-options-bar.show {
    display: flex;
    animation: slideDown 0.2s ease;
}

.susb_top_cont:has(.cont_in_tab) {
    margin-left: auto;
}

.cont_in_tab{ border: 1px solid var(--line-color); background-color: #fff; padding: .5rem; border-radius: 1rem; display: flex;}
.cont_in_tab li{ position: relative;}
.cont_in_tab li:not(:first-child)::before{ content: ""; background-color: var(--line-color); width: 1px; height: 1.4rem; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); display: inline-flex;}
.cont_in_tab li button{ height: 3rem; padding: 0 2rem; font-size: 1.5rem; border-radius: .5rem;}
.cont_in_tab li.on button{ background-color: var(--mma-color-prim); color: #fff;}
.cont_in_tab li.on + li:not(:first-child)::before{ display: none;}

@media (max-width: 768px) {
    .cont_in_tab li{ flex: 1 auto;}
    .cont_in_tab li button{ height: auto; width: 100%; padding: .8rem; line-height: 1.2;}
}

.susb_area_list{ border: 1px solid var(--line-color); border-radius: 1rem; overflow: hidden; display: flex;}
.susb_area_list > li{ flex: 1;}
.susb_area_list > li + li{ border-left: 1px solid var(--line-color);}

.susb_area_tit{ height: 4rem; background-color: #f9fafb; font-size: 1.5rem; border-bottom: 1px solid var(--line-color); display: flex; align-items: center; justify-content: center;}

.susb_area_item_list{ overflow: auto; padding: 1.5rem 2rem 1.6rem 2rem;}
.susb_area_list > li .susb_area_item_list{ height: 20.8rem;}
.susb_area_item_list li{ position: relative;}
.susb_area_item_list li::before{
    position: absolute; right: -4px; top: 3px;
    width: 1.6rem; height: 1.6rem;
    content: "";
    transform: rotate(-90deg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");
    display: inline-flex;
    background-color: #000;
    opacity: .6;
}
.susb_area_item_list li:not(:first-child){ margin-top: 1rem;}
.susb_area_item_list li .area_num{ color: var(--mma-color-prim); font-size: 1.5rem;}

.susb_area_list li:last-child .susb_area_item_list li::before{ display: none;}

@media (max-width: 768px) {
    .susb_area_list{ flex-direction: column;}
    .susb_area_list > li + li{ border-left: none; border-top: 1px solid var(--line-color);}
}

.susb_area_tab_wrap{ display: flex; overflow: hidden;}
.susb_area_tab_wrap .krds-input.small{ border: 1px solid var(--line-color);}

.susb_area_tab_wrap .svg-icon.ico-sch{ background-color: var(--mma-color-prim);}

.sub-options-bar.show {
    display: flex;
    animation: leftMoveSlide 0.2s ease;
}

.subj_name_search_wrap{
    overflow: hidden;
    opacity: 0;
    transform: translateX(-20px);
    max-width: 0;
    
    transition: 
        opacity 1.25s ease-out,
        transform 1.35s cubic-bezier(.22,1,.36,1),
        max-width 1.35s cubic-bezier(.22,1,.36,1);
}
.subj_name_search_wrap.left_show{
    margin-left: 1.2rem;
    opacity: 1;
    transform: translateX(0);
    max-width: 400px; /* 실제 영역보다 약간 크게 */
}
@media (max-width: 768px) {
    .susb_top_cont:has(.cont_in_tab){ margin-left: 0; width: 100%;}
    .susb_area_tab_wrap{ flex-direction: column;}
    .subj_name_search_wrap{ display: none;}
    .subj_name_search_wrap.left_show{ max-width: 100%; margin-left: 0; margin-top: 1rem;}
}
/* 측정항목 선택 */
.measure_info_wrap{ flex: 1; display: flex; align-items: center;}

.measure_summary{ display: flex; gap: 2rem;}
.measure_summary .summary_txt{ font-size: 1.5rem;}

.measure_chk_util{ margin-left: auto;}
.measure_chk_option{ margin-left: auto; gap: 2rem; display: none;}
.measure_chk_option.on{ display: flex;}

.measure_chk_txt{ font-size: 1.5rem; color: #555; margin-left: auto;}

.measure_grid_wrap{ margin-top: 2rem; display: none;}
.measure_grid{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;}

.measure_grid .krds-form-check {
    min-width: 0; /* 🔥 핵심 */
}

.measure_grid > span{ background-color: #ecf2fe; border-radius: 1rem; padding: 1rem 0 1rem 1rem;}
.measure_grid .krds-form-check input[type=radio] ~ label,
.measure_grid .krds-form-check input[type=checkbox] ~ label{ align-items: start; font-size: 1.4rem; word-break: break-all; align-items: center;}

.meas_chk{ cursor: pointer;}
.meas_chk label{ line-height: 1.2;}

@media (max-width: 768px) {
    .measure_grid{ grid-template-columns: repeat(2, 1fr);}
    .measure_info_wrap{ flex-direction: column; width: 100%;}
    .measure_summary{ width: 100%; justify-content: space-between; border-bottom: 1px solid var(--line-color); padding-bottom: 1rem; margin-bottom: 1rem;}
    
    .measure_chk_option{ margin-top: 1rem;}
    .meas_chk label{ word-break: break-word;}
    .measure_grid > span{ padding: 1rem; align-items: center;}
}

/* 조회 기간 */
.sch_filter_box{ display: flex; gap: 4rem; flex-wrap: wrap;}

.sch_filter_box select{ width: auto; color: var(--txt-color);}

@media (max-width: 1023px) {
    .sch_filter_box{ flex-direction: column; width: 100%; gap: 2rem;}
    .sch_filter_box .inp_cal{ flex: 1 auto; width: 100%;}
    .sch_filter_box select{ width: 100%;}
}
.subj_search_btn_wrap{ margin-top: 2.6rem; display: flex; align-items: center;}

.subj_tag_wrap{ display: flex; gap: .8rem; flex-wrap: wrap;}
.subj_tag_tit{ font-size: 1.9rem; font-weight: 600; color: #555; margin: 0 2rem 0 4rem;}
.subj_tag_tit b{ color: var(--mma-color-prim);}
.subj_btn_tag{ border: 1px solid #cdd1d5; background-color: #fff; padding: 0 0.8rem 0 1.2rem; height: 3.4rem; border-radius: 3.4rem; display: inline-flex; align-items: center; gap: .4rem;}
.subj_btn_tag .btn_tag_del{
    width: 1.6rem;
    height: 1.6rem;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_delete.svg");
    mask-image: url("../images/icon/ico_delete.svg");
    -webkit-mask-image: none;
    mask-image: none;
    background-image: url("../images/icon/ico_delete.svg");
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-mask: none;
    mask: none;
    line-height: var(--krds-line-height-none);
}

.subj_btn_wrap{ margin-left: auto; display: flex; gap: .8rem;}
.krds-btn.medium.btn_subj_reset{ height: 4.4rem;}
.krds-btn.medium.btn_subj_serach{ height: 4.4rem; padding: 0 3rem;}

@media (max-width: 768px) {
    .subj_search_btn_wrap{ flex-direction: column; align-items: flex-start; gap: 1.2rem;}
    .subj_tag_tit{ margin: 0;}
    .subj_btn_wrap{ width: 100%; justify-content: flex-end;}
}

.subj_tab + .tab-conts-wrap .search-list-top{ margin-top: 0; align-items: center;}
.search-list-top .sch-sort.line_none li:not(:last-child)::after,
.search-list-top .sch-sort.line_none li:not(:first-child)::after{ display: none;}

@media (max-width: 768px) {
    .subj_tab + .tab-conts-wrap .search-list-top{ align-items: flex-start;}
}

.grid_area{ overflow: auto;}
.graph_area{ overflow: auto;}
.graph_area + .graph_area{ margin-top: 2rem;}

.subj_more_info_wrap{ margin-top: 10rem; padding: 2rem 2.5rem 2.5rem 2.5rem; border-radius: 1.5rem; background-color: #edf1f5;}

.subj_more_tit{ font-size: 1.9rem; font-weight: 600; margin-bottom: 2.2rem; display: flex; align-items: center; gap: 1.2rem;}
.subj_more_tit::before{ content: ""; width: 3.6rem; height: 3.4rem; display: inline-flex; background: url("../images/sub/subj_more_info_tit.png") no-repeat; background-size: 3.6rem 3.4rem;}

.subj_more_info_list{ display: flex; gap: 2rem;}

.subj_more_box{ flex: 1; border-radius: 1rem; background-color: #fff; padding: 1.5rem 2rem 2.5rem 3.5rem;}

.more_box_top{ margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between;}
.moreinfo_tit{ font-size: 1.9rem; font-weight: 600;}
.more_box_cont{ font-size: 1.5rem;}
.more_box_cont b{ color: var(--mma-color-prim);}

.btn_moreinfo_link{ width: 4.2rem; height: 4.2rem; border-radius: 4.2rem; background-color: #edf1f5; display: inline-flex; justify-content: center; align-items: center;}

@media (max-width: 768px) {
    .subj_more_info_list{ flex-wrap: wrap;}
    .subj_more_box{ flex: auto; padding: 1.5rem 2rem;}
}

.tree_wrap{ background: #fff; border-radius: 5px; height: calc(100% - 5rem);}
.tree_top{ background-color: #eef2f7; height: 4rem; display: flex; justify-content: center; margin-bottom: 12px;}

.btn_tree_show{ position: relative; font-size: 1.5rem; text-decoration: underline; display: flex; align-items: center; gap: 1rem;}
.btn_tree_show::after,
.btn_tree_show.off::after{ content: ""; width: 2rem; height: 2rem;}
.btn_tree_show::after{ background: url("../images/sub/icon_tree_plus.png") no-repeat;}
.btn_tree_show.off::after{ background: url("../images/sub/icon_tree_minus.png") no-repeat;}

.tree_list_wrap{ overflow: auto; height: 50rem; padding: 0 1.6rem 0 2rem;}

.tree_list{ margin-bottom: 1rem;}
.tree_list li{ margin-bottom: 1rem;}
.tree_list li:last-child{ margin-bottom: 1.2rem;}
.tree_list input[type=radio]{ margin-right: 5px; vertical-align: middle;}
.tree_list label{ vertical-align: middle; padding-right: 7rem;}

/*
.btn_tree{ width: 2rem; height: 2rem; background: url("../images/sub/icon_tree_minus.png") no-repeat center;}
*/

.btn_tree{ width: 4.9rem; height: 2rem; 
	background-image: url("../images/sub/icon_foder_open.png"),
	url("../images/sub/icon_tree_minus.png");
	background-repeat: no-repeat;
	background-position: left center, right center;	
}
.btn_tree.off{ 
    background-image: url("../images/sub/icon_foder_close.png"),
    url("../images/sub/icon_tree_plus.png");}

.tree_tit{ position: relative; color: #000; margin-bottom: .8rem; display: flex; align-items: center;}
.tree_tit > span{ margin-left: 1.2rem;}
/*
.tree_list > div > .btn_tree.off + span{ background: url("../images/sub/icon_foder_close.png") no-repeat left center; padding-left: 22px;}
*/

.tree_dep2{ margin: 0 0 0 2.9rem; display: block;}
.tree_dep2 > li{}
.tree_dep2 > li > span{}
.tree_dep2 li .form_check input[type=radio] ~ label { display: flex; align-items: center; padding-left: 24px;}

.tree_dep2 li .krds-form-check input[type=radio] ~ label{ display: flex;}

.tt_type{ position: absolute; display: inline-block; width: 5.2rem; padding: .1rem 0; text-align: center; font-size: 1.5rem; right: 4px; top: 0; border-radius: .6rem;}
.tt1{ background: #eff5ff; color: #1d56bc;} /* 측정 */
.tt2{ background: #eaf6ec; color: #228738;} /* 통계 */
.tt3{ background: #fff8f5; color: #a85131;} /* 기타*/
.tt4{ background: #fff8f5; color: #e27500;} /* GIS */

.tt5{ background: #ecf2fe; color: #0b50d0;} /* 관측 */
.tt6{ background: #fdefec; color: #bd2c0f;} /* 예측 */
.tt7{ background: #edf6f8; color: #1f687a;} /* 현황 */
.tt8{ background: #fff3db; color: #8a5c00;} /* 연보 */
.tt9{ background: #e7f4fe; color: #096ab3;} /* 보고서 */

.tree_dep2 li{ position: relative;}
.tree_dep2 li .btn_tree{ }

.tree_dep2 ul{ margin: .6rem 0 0 3rem;}

.tree_dep2.off{ display: none;}
.tree_dep3.off{ display: none;}

.tree_search{ display: flex; gap: 10px; margin-bottom: 10px;}
.tree_search span{ display: flex; gap: .8rem;}
.tree_search input{ width: 100%; height: 4.4rem; border-radius: .6rem; border: 1px solid #717171; font-size: 1.7rem;}

.sd_bg {
    background: #dee9fc;
    color: #1d56ca;
}

/* 데이터 검색 : 카테고리 팝업 */
.krds-modal .modal-dialog.subj_category_pop{ width: 43rem;}
.krds-modal .modal-dialog.subj_category_pop .modal-content{ border: 4px solid #063a74;}
.krds-modal .modal-dialog.subj_category_pop .modal-header{ border-radius: 0; height: 6rem;}
.krds-modal .modal-dialog.subj_category_pop .modal-conts{ overflow-y: hidden; padding: var(--krds-modal--conts-padding-top) 1rem var(--krds-modal--conts-padding-bottom);
}

.krds-modal .modal-dialog.subj_category_pop .modal-header{ padding: 0 0 0 2rem; background-color: #063a74; color: #fff; display: flex; align-items: center;}

.subj_category_pop .krds-modal .modal-dialog .btn-close {
    position: absolute;
    top: var(--krds-modal--btn-close-position);
    right: var(--krds-modal--btn-close-position);
    z-index: 901;
}

.svg-icon.ico-go {
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_go.svg");
    mask-image: url("../images/icon/ico_go.svg");
    
}


/****** 데이터 활용 : 스마트 대시보드 *******/

.sub_cont_info.sub02_01::before{ content: ""; display: inline-flex;
    width: 26.7rem; height: 20.3rem; position: absolute; right: 0; bottom: -2rem;
    background: url("../images/sub/sub02_01_info_bg.png") no-repeat;
    background-size: 26.7rem 20.3rem;
}

@media (max-width: 768px) {
    .sub_cont_info.sub02_01::before{ display: none;}
}

.sub02_01_list{}
.sub02_01_list .sub02_01_list_li{ position: relative; display: flex; justify-content: space-between;}
.sub02_01_list .sub02_01_list_li:not(:first-child){ margin-top: 20rem;}
.sub02_01_list .sub02_01_list_li:not(:first-child)::before{
    content: ""; height: 2px; width: 80%; background-color: #e1e6eb; position: absolute; top: -9.9rem; left: 50%; transform: translateX(-50%);
}
.sub02_01_list .sub02_01_list_li .text_wrap{ width: 44rem;}
.sub02_01_list .sub02_01_list_li .text_wrap .mlwf_tit{ margin-bottom: 2rem;}
.sub02_01_list .sub02_01_list_li .text_wrap .desc{ font-size: 2.1rem; margin-bottom: 2rem;}
.sub02_01_list .sub02_01_list_li .img{ width: 44rem;}

@media (max-width: 768px) {
    .sub02_01_list .sub02_01_list_li{ flex-direction: column; gap: 2rem;}
    .sub02_01_list .sub02_01_list_li .text_wrap,
    .sub02_01_list .sub02_01_list_li .img{ width: 100%;}
    .sub02_01_list .sub02_01_list_li:not(:first-child){ margin-top: 10rem;}
    .sub02_01_list .sub02_01_list_li:not(:first-child)::before{ top: -5.9rem;}
}

.text_list{}
.text_list li{ display: flex; gap: 1.2rem;}
.text_list li:not(:first-child){ margin-top: 1.5rem;}
.text_list li strong{ width: 3rem; height: 3rem; border-radius: .5rem; background-color: #e5effb; font-size: 1.7rem; color: var(--mma-color-prim); display: inline-flex; justify-content: center; align-items: center;}
.text_list li p{}

.text_list.check li strong::before{
	content: "";
	display: inline-flex;
    width: 16px;
    height: 16px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_checkbox_checked.svg");
    mask-image: url("../images/icon/ico_checkbox_checked.svg");	
	background-color: var(--mma-color-prim);
}

/****** 데이터 활용 : 공간정보 GIS *******/
.sub_cont_info.sub02_02_01::before{ content: ""; display: inline-flex;
    width: 46.2rem; height: 26.1rem; position: absolute; right: .6rem; bottom: -8.8rem;
    background: url("../images/sub/sub02_02_01_info_bg.png") no-repeat;
    background-size: 46.2rem 26.1rem;
}
@media (max-width: 768px) {
    .sub_cont_info.sub02_02_01::before{
        display: none;
    }
}

.life_in_use_info.sub02_02_01_life .life_in_use_img{ }

.life_in_use_info.sub02_02_01_life .life_in_use_img img{ box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);}

/****** 데이터 활용 : 주제별 공간검색 *******/
.sub_cont_info.sub02_02_02::before{ content: ""; display: inline-flex;
    width: 46.2rem; height: 26.1rem; position: absolute; right: .6rem; bottom: -4.8rem;
    background: url("../images/sub/sub02_02_02_info_bg.png") no-repeat;
    background-size: 46.2rem 26.1rem;
}
@media (max-width: 768px) {
    .sub_cont_info.sub02_02_02::before{
        display: none;
    }
}

.sub02_02_02_life{ display: flex; flex-wrap: wrap; gap: 2rem;}
.sub02_02_02_life li{ overflow: hidden; border: 1px solid var(--mma-line-color); border-radius: 1rem; flex: 0 0 calc(50% - 1rem); display: flex; flex-direction: column; justify-content: space-between;}
.sub02_02_02_life li .img{ background-color: #eef2f7; padding: 3.5rem 4.9rem;}
.sub02_02_02_life li .text_info{ position: relative; padding: 3rem;}
.sub02_02_02_life li .text_info .tit{ font-size: 2.1rem; font-weight: 600; margin-bottom: 2rem;}
.sub02_02_02_life li .text_info .desc{ color: var(--mma-text-secd); padding-right: 8rem;}

.btn_subjmap_link{ position: absolute; right: 3rem; top: 50%; transform: translateY(-50%); border: .4rem solid #fff; background-color: var(--mma-color-prim); width: 4rem; height: 4rem; border-radius: 4rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);}

.btn_subjmap_link::before{
	content: "";
	display: inline-flex;
    width: 2.2rem;
    height: 2.2rem;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");
	background-color: #fff;
    transform: rotate(-90deg);
    mask-size: 2.2rem;
}
.btn_subjmap_link.go_new::before{
    width: 1.8rem;
    height: 1.8rem;
    -webkit-mask-image: url("../images/icon/ico_go.svg");
    mask-image: url("../images/icon/ico_go.svg");
    transform: rotate(0);
    mask-size: 1.8rem;
}

.btn_subjmap_link:hover,
.btn_subjmap_link:focus{ background-color: #063a74;}

.page_link_desc{ background-color: #f8f8f8; border-radius: 1rem; padding: 1rem 2rem; text-align: center;}

@media (max-width: 768px) {
    .sub02_02_02_life{ flex-direction: column;}
    .sub02_02_02_life li .text_info .desc{ padding-right: 4rem;}
}

/*########### 데이터 활용 : 운영안내 ###########*/

/****** 데이터 활용 : 운영안내 : 수자원 유역조사 ******/
.su_map_info_wrap{ display: flex; align-items: flex-start; gap: 2rem;}
.su_map_info_wrap .img{}

.su_map_info_wrap .krds-table-wrap .tbl.data thead th,
.su_map_info_wrap .krds-table-wrap .tbl.data.center tbody td,
.oper_river_list .krds-table-wrap .tbl.data thead th,
.oper_river_list .krds-table-wrap .tbl.data.center tbody th,
.oper_river_list .krds-table-wrap .tbl.data.center tbody td,
.oper_river_list .krds-table-wrap .tbl.data tfoot th,
.oper_river_list .krds-table-wrap .tbl.data tfoot td { padding: .8rem;}

@media (max-width: 1600px) {
    .su_map_info_wrap .krds-table-wrap .tbl.data thead th,
    .su_map_info_wrap .krds-table-wrap .tbl.data.center tbody td,
    .oper_river_list .krds-table-wrap .tbl.data thead th,
    .oper_river_list .krds-table-wrap .tbl.data.center tbody th,
    .oper_river_list .krds-table-wrap .tbl.data.center tbody td,
    .oper_river_list .krds-table-wrap .tbl.data tfoot th,
    .oper_river_list .krds-table-wrap .tbl.data tfoot td { font-size: 1.5rem !important;}
}


@media (max-width: 1023px) {
    .su_map_info_wrap{ flex-direction: column;}
}


.wenv_operation{ border-radius: var(--mma-radius-md); padding: 5rem 5rem 5rem 16rem; background: url("../images/sub/menv_oper_img.png") no-repeat left 3.6rem center #f8f8f8;}
.wenv_oper_desc{ font-weight: 600; margin-bottom: 1rem;}

.krds-info-list + .wenv_oper_desc{ margin-top: 2rem;}

.wenv_law{ border-radius: var(--mma-radius-md); border: 1px solid var(--mma-line-color); padding: 2rem;}

.wenv_law_icon_wrap{ display: flex; gap: 2rem;}
.wenv_law_icon{ flex: 1; border-radius: var(--mma-radius-md); height: 15.5rem; padding-top: 10.6rem; text-align: center; background-color: #f4f5fa; background-repeat: no-repeat; background-position: top 2.5rem center;}
.wenv_law_icon.law1{ background-image: url("../images/sub/wenv_law_icon01.png");}
.wenv_law_icon.law2{ background-image: url("../images/sub/wenv_law_icon02.png");}

.wenv_law_text_wrap{ margin: 3rem 2rem 1rem 2rem;}
.wenv_law_desc{ font-weight: 600; margin-bottom: 1rem;}

@media (max-width: 768px) {
    .wenv_operation{ padding: 15rem 2rem 2rem 2rem; background: url("../images/sub/menv_oper_img.png") no-repeat top 3rem center #f8f8f8;}
}

.wenv_history{ padding-left: 13.6rem; margin-top: 3rem;}
.wenv_history > li{ position: relative; padding-left: 4.6rem; padding-bottom: 2rem; min-height: 6rem;}
.wenv_history > li:not(:first-child){ margin-top: 3rem;}
.wenv_history > li:not(:last-child){ border-left: 1px solid #cdd1d5;}

.wenv_history > li .we_his_year{ width: 11rem; font-size: 2.1rem; font-weight: 600; position: absolute; left: -13.6rem; top: -.4rem; margin-bottom: 2rem;}

.wenv_history > li > .krds-info-list{ margin-top: -1rem;}
.wenv_history .krds-info-list > li > .krds-info-list{ margin-top: 0;}
.wenv_history .krds-info-list li .krds-info-list li{ color: #58616a;}

.wenv_his_desc{ padding-left: 2rem;}

.wenv_his_cycle{ width: 1.5rem; height: 3rem; background-color: #fff; display: inline-flex; justify-content: center; align-items: center; position: absolute; left: -.8rem; top: -.4rem;}
.wenv_his_cycle::after{ content: ""; width: .5rem; height: .5rem; border-radius: .5rem; background-color: #fff; display: inline-flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.wenv_his_cycle::before{ content: ""; width: 1.5rem; height: 1.5rem; border-radius: 1.5rem; background-color: var(--mma-color-prim); display: inline-flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

@media (max-width: 768px) {
    .wenv_history{ padding-left: 2rem;}
    .wenv_history > li{ padding-left: 2rem;}
    .wenv_history > li .we_his_year{ position: relative; left: auto; top: -.8rem; width: 100%;}
    .wenv_history .krds-info-list li .krds-info-list li{ padding-left: 0;}
    .wenv_his_desc{ padding-left: 1rem;}
    .wenv_his_cycle{ top: -.8rem;}
}

/* 데이터 활용 : 운영안내 : 수질측정망 */
.oper_river_list{ display: flex; gap: 2rem; align-items: flex-start;}

.oper_river_map{ flex: 1; padding: 3rem 1rem; background-color: #eef7fe; border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md); overflow: hidden; display: flex; align-items: center; justify-content: center;}

.oper_river_list .krds-table-wrap{ width: 50rem;}

@media (max-width: 1600px) {
    .oper_river_list .krds-table-wrap{ width: 35rem;}
}


.optd_bg01{ background-color: #f0f7ff !important;}
.colorb{ background-color: #fffcf0 !important;}
.b_tit{ color: var(--mma-text-prim);}

@media (max-width: 1023px) {
    .oper_river_list{ flex-direction: column;}
    .oper_river_map{ width: 100%;}
    .oper_river_list .krds-table-wrap{ width: 100%;}
}

.oper_pic_wrap{ display: flex; gap: 3rem; justify-content: space-between;}
.oper_pic_wrap .oper_pic{ border-radius: var(--mma-radius-md); border: 1px solid var(--mma-line-color); overflow: hidden;}
.oper_pic_wrap .oper_pic img{ width: 100%; height: 25.2rem;}
.oper_pic_wrap .oper_pic p{ font-size: 1.5rem; height: 5rem; background-color: #f4f5fa; display: flex; align-items: center; justify-content: center;}
.oper_pic_wrap.flex_1 .oper_pic{ flex: 1;}

.oper_img_box{ border-radius: var(--mma-radius-md); background-color: #eef2f7; padding: 5rem; text-align: center;}
.oper_img_tit{ margin-bottom: 2rem; font-family: 'Gmarket Sans'; font-weight: 700; font-size: 2.8rem; text-align: left;}
.oper_img_tit span{ color: var(--mma-text-prim);}

@media (max-width: 768px) {
    .oper_img_box{ padding: 2rem;}
    .oper_pic_wrap{ flex-direction: column; width: 100%;}
}

.oper_pic_wrap.sub030205 img{ height: 172px;}

.oper_pic_wrap.airvideo02 img{ width: 30.4rem;}
@media (max-width: 768px) {
    .oper_pic_wrap.airvideo02 img{ width: 100%;}
}

/* 데이터 활용 : 운영안내 : 자동측정망 */
.w_c_list{ border: 1px solid var(--mma-line-color);  border-radius: var(--mma-radius-sm);}
.w_c_list li{ padding: 2rem; display: flex; align-items: center; gap: 3rem;}
.w_c_list li:not(:first-child){ border-top: 1px solid var(--mma-line-color);}
.w_c_list li span{ font-size: 1.9rem; font-weight: 600; width: 11.5rem; height: 10.8rem; border-radius: var(--mma-radius-sm); display: inline-flex; justify-content: center; align-items: center;}

.w_c_list li:nth-child(1) span{ background-color: #eef4ff;}
.w_c_list li:nth-child(2) span{ background-color: #ecf8f3;}
.w_c_list li:nth-child(3) span{ background-color: #edf7fc;}
.w_c_list li:nth-child(4) span{ background-color: #f0f4f8;}
.w_c_list li:nth-child(5) span{ background-color: #f1eeff;}
.w_c_list li:nth-child(6) span{ background-color: #fff8e8;}
.w_c_list li:nth-child(7) span{ background-color: #fff3ea;}
.w_c_list li:nth-child(8) span{ background-color: #fff0f7;}

.w_c_list li div{ flex: 1;}

@media (max-width: 768px) {
    .w_c_list li{ flex-direction: column;}
}

.ji_list{ margin-top: 1rem; padding: 0 0 0 3rem;}
.ji_list li{ margin-bottom:40px; position:relative; display: flex; align-items: center;}
.ji_list:after,
.ji_list li:after { display:block; clear:both; content:"";}
.ji_list dl{ width:100px; height:100px; border-radius:0 50% 50% 50%; margin-right:40px; box-shadow: 7px -7px 0 rgba(232, 232, 234, 1); display: inline-flex; justify-content: center; align-items: center; flex-direction: column;}
.ji_list p{ flex: 1; height:100px; background:#efefef; border-radius:8px; padding: 0 3rem; display: flex; align-items: center;}
.ji_list dt,
.ji_list dd{ vertical-align:middle; width:100%; text-align:center; color:#fff; display: block;}
.ji_list dt{ font-size: 19px;}
.ji_list li:nth-child(1) dl{ background:#2175bd;}
.ji_list li:nth-child(2) dl{ background:#337f34;}
.ji_list li:nth-child(3) dl{ background:#fcd217;}
.ji_list li:nth-child(4) dl{ background:#ff8100;}
.ji_list li:nth-child(5) dl{ background:#cc0001;}

.ji_list li:nth-child(1) dl:before{content: ""; position: absolute; left:100px; top: 47px; width: 40px; height: 5px; background: #2175bd;}
.ji_list li:nth-child(2) dl:before{content: ""; position: absolute; left:100px; top: 47px; width: 40px; height: 5px; background: #337f34;}
.ji_list li:nth-child(3) dl:before{content: ""; position: absolute; left:100px; top: 47px; width: 40px; height: 5px; background: #fcd217;}
.ji_list li:nth-child(4) dl:before{content: ""; position: absolute; left:100px; top: 47px; width: 40px; height: 5px; background: #ff8100;}
.ji_list li:nth-child(5) dl:before{content: ""; position: absolute; left:100px; top: 47px; width: 40px; height: 5px; background: #cc0001;}

@media (max-width: 768px) {
    .ji_list{ padding: 0;}
    .ji_list dl{ margin-right: 1rem; width: 6rem; height: 6rem;}
    .ji_list p{ height: auto; min-height: 6rem; padding: 1rem 2rem; font-size: 1.5rem; z-index: 2;}
    .ji_list dt{ font-size: 1.5rem; line-height: 1.2;}
    .ji_list dd{ font-size: 1.3rem; line-height: 1.2;}
    .ji_list li dl::before{ display: none;}
}

.auto_real_wq{}
.auto_real_wq > li{}
.auto_real_wq > li:not(:first-child){ margin-top: 2.5rem;}
.auto_real_wq li .step{ margin-bottom: 1.6rem; height: 3rem; border-radius: 3rem; padding: 0 1.2rem; font-size: 1.5rem; color: var(--mma-text-prim); border: 1px solid var(--mma-color-prim); background-color: #ebf3fd; display: inline-flex; align-items: center;}

.arwq_item_wrap{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem;}

.arwq_item{ border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md); padding: 3rem;}
.arwq_item .arwq_top{ margin-bottom: 2rem;}
.arwq_item .arwq_top .arwq_tit{ font-size: 1.9rem; display: flex; gap: 1rem;}
.arwq_item .arwq_top .arwq_tit::before{ content: "Q"; font-size: 1.9rem; font-weight: 600; color: #fff; width: 3rem; height: 3rem; border-radius: 100%; background-color: var(--mma-color-prim); display: inline-flex; justify-content: center; align-items: center; line-height: 1; flex-shrink: 0;}

.arwq_item .arwq_body{ border-top: 1px solid var(--mma-line-color); padding: 2.5rem 1rem 0 1rem;}
.arwq_item .arwq_body .arwq_desc{}

@media (max-width: 768px) {
    .auto_real_wq > li .arwq_item_wrap{ grid-template-columns: 1fr;}
    .arwq_item .arwq_top .arwq_tit::before{ font-size: 1.7rem;}
    .arwq_item{ padding: 2rem;}
}

.auto_real_wq.sub03030204 > li:nth-child(3) .arwq_item_wrap{ grid-template-columns: 1fr;}

.arwq_legend_list{ margin-top: 1rem;}
.arwq_legend_list li{ position: relative; padding-left: 2.6rem; font-size: 1.7rem; color: #464c53; display: flex; align-items: center; gap: .8rem;}
.arwq_legend_list li:not(:first-child){ margin-top: .8rem;}
.arwq_legend_list li::before{ content: ""; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 100%; display: inline-flex; position: absolute; left: 0; top: .4rem;}
.arwq_legend_list li:nth-child(1)::before{ background-color: #1064aa;}
.arwq_legend_list li:nth-child(2)::before{ background-color: #287726;}
.arwq_legend_list li:nth-child(3)::before{ background-color: #859500;}
.arwq_legend_list li:nth-child(4)::before{ background-color: #de6f28;}
.arwq_legend_list li:nth-child(5)::before{ background-color: #c91717;}

.auto_info_box{ border-radius: var(--mma-radius-md); border: 1px solid var(--mma-line-color); padding: 2rem;}
.auto_info_box .ainfo_top{ background-color: #f4f5fa; border-radius: var(--mma-radius-md); margin-bottom: 3rem; padding: 3rem; text-align: center;}
.auto_info_box .ainfo_top .rtw_tit{ margin-top: 3rem; color: #464c53; font-weight: 600;}
.auto_info_box .ainfo_body{ padding: 0 2rem;}

/* 데이터 활용 : 운영안내 : 퇴적물측정망 */
.su_si_process{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 2rem;}

.su_si_process .susi_tit{ color:#fff; text-align:center; font-size: 1.7rem; font-weight: 600; border-radius: var(--mma-radius-md) var(--mma-radius-md) 0 0; height: 5rem; display: flex; justify-content: center; align-items: center;}

.su_si_process li:nth-child(1) .susi_tit{ background:#ee3a3a;}
.su_si_process li:nth-child(2) .susi_tit{ background:#21ae71;}
.su_si_process li:nth-child(3) .susi_tit{ background:#4992fa;}
.su_si_process li:nth-child(4) .susi_tit{ background:#7357ce;}

.su_si_process li ul{ border: 1px solid var(--mma-line-color); border-radius: 0 0 var(--mma-radius-md) var(--mma-radius-md); padding: 0 1rem 1rem 1rem; overflow: hidden;}
.su_si_process li ul li{ font-size: 1.7rem; position: relative; border-radius: var(--mma-radius-sm); margin-top: 3rem; min-height: 4rem; display: flex; justify-content: center; align-items: center;}

@media (max-width: 1600px) {
    .su_si_process li ul li{ font-size: 1.4rem;}
}

.su_si_process li:nth-child(1) li{ background-color: #fdeeec;}
.su_si_process li:nth-child(2) li{ background-color: #e7f5ef;}
.su_si_process li:nth-child(3) li{ background-color: #ebf3fd;}
.su_si_process li:nth-child(4) li{ background-color: #f3f0fa;}

.su_si_process li ul li:last-child{ margin-top: 1rem; background-color: #fff;}
.su_si_process li ul li:not(:last-child)::after{ content: ""; background: url("../images/sub/su_si_process_arr.png") no-repeat; width: 1.6rem; height: 1.1rem; background-size: 1.6rem 1.1rem; position: absolute; left: 50%; top: -2rem; transform: translateX(-50%);}

.su_si_process li ul .susi_img{ border-radius: var(--mma-radius-sm); overflow: hidden;}
.su_si_process li ul .susi_img img{ min-width: fit-content;}

@media (max-width: 1023px) {
    .su_si_process{ grid-template-columns: 1fr; grid-gap: 6rem; width: 100%;}
    .su_si_process li ul .susi_img img{ min-width: 100%;}    
}

.susi_pic_wrap{ display: flex; gap: 3.2rem;}
.susi_pic{ position: relative; border-radius: var(--mma-radius-md); padding: 1rem 1rem 0 1rem; background-color: #eef2f7; display: flex; flex-direction: column;}

.susi_pic_wrap .susi_pic:not(:first-child)::before{ content: ""; width: 1rem; height: 1.5rem; background: url("../images/sub/su_si_process_arr_right.png") no-repeat; position: absolute; left: -1.8rem; top: 8rem; background-size: 1rem 1.5rem;}

.susi_pic img{ overflow: hidden; border-radius: var(--mma-radius-md); min-width: fit-content;}

.susi_pic .text_wrap{ padding: 0 1rem; display: flex; justify-content: center; align-items: center; gap: 2px;}

.susi_pic .text{ position: relative; padding: 1rem 0; flex: 1; text-align: center; display: flex; align-items: center; justify-content: center;}

@media (max-width: 1600px) {
    .susi_pic img{ min-width: 100%;}
    .susi_pic .text{ font-size: 13px;}
}
.susi_pic .text_wrap .text:last-child::before{ content: ""; height: calc(100% - 2rem); width: 2px; background-color: #fff; position: absolute; left: -2px; top: 1rem;}

@media (max-width: 1023px) {
    .susi_pic_wrap{ flex-direction: column; width: 100%;}
    .susi_pic_wrap .susi_pic:not(:first-child)::before{ left: 50%; transform: translateX(-50%) rotate(90deg); top: -2.2rem;}
}


/* 데이터 활용 : 운영안내 : 방사성물질측정망 */

.sub030206_pic_wrap{ display: flex; gap: 2rem;}
.sub030206_pic_wrap .algal_pic_wrap{ gap: 1rem;}

.sub030206_1 img,
.sub030206_2 img,
.sub030206_3 img{ height: 12.2rem !important;}

@media (max-width: 768px) {
    .sub030206_pic_wrap{ flex-direction: column; width: 100%;}
    .sub030206_pic_wrap .algal_pic_wrap{ }
    .sub030206_1{ flex-direction: row !important;}
    .sub030206_2{ flex-direction: row !important;}    
    .sub030206_3{ flex-direction: row !important; justify-content: flex-start !important;}
    .sub030206_1 img,
    .sub030206_2 img,
    .sub030206_3 img{ height: 10rem !important;}

    .sub030206_pic_wrap.sub030206_3 > div{ flex: 1; display: flex; flex-direction: column;}
    .sub030206_pic_wrap.sub030206_3 .algal_pic{ }
}

/* 운영안내 : 녹조(조류)정보 : 녹조현상 */
.algal_pic_wrap{ display: flex; gap: 2rem;}
.algal_pic_wrap .algal_pic{ flex: 1; background-color: #f4f5fa; border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md); padding: 0 1rem 1rem 1rem; display: flex; flex-direction: column;}
.algal_pic_wrap .algal_pic img{ border-radius: .6rem;}
.algal_pic_wrap .algal_pic .text{ text-align: center; padding: 2rem; font-size: 1.9rem; font-weight: 600; display: flex; align-items: center; justify-content: center;}
.algal_pic_wrap .algal_pic .text2{ flex: 1; background-color: #fff; border-radius: var(--mma-radius-md); font-size: 1.5rem; padding: 1.5rem;}


@media (max-width: 768px) {
    .algal_pic_wrap{ width: 100%; flex-direction: column;}
    .algal_pic_wrap .algal_pic .text{ font-size: 1.7rem; padding: 1rem;}
    .algal_pic_wrap .algal_pic{ width: 100%;}
    .algal_pic_wrap .algal_pic img{ width: 100%;}
}

/* 운영안내 : 녹조(조류)정보 : 조류항공영상 */
.mul_info_box.air_dron{ gap: 2rem;}
.mul_info_box.air_dron::before {
    content: "";
    width: 7.2rem;
    height: 4.8rem;
    background: url("../images/sub/info_box_img_dron.png") no-repeat;
    display: inline-flex;
}


/* 데이터 활용 : 운영안내 : 수질오염총량 관리제도 */
.suqa_flow{ position: relative; display: flex;}
.suqa_flow > li{ flex: 1; padding: 0 1.6rem;}
.suqa_flow > li:not(:last-child){ border-right: 2px dashed #e5e9ef;}

.suqa_flow li .top{ position: relative;}

.suqa_flow li .top .step{ font-size: 1.3rem; color: var(--mma-text-prim); background-color: #eef2f7; height: 2.5rem; border-radius: 2.5rem; padding: 0 1.2rem; display: inline-flex; align-items: center;}
.suqa_flow li .top .tit{ font-size: 1.9rem; font-weight: 600; padding: 8rem 4rem 0 0; background-repeat: no-repeat; background-position: left 0 top 2.6rem; height: 15rem;}
.suqa_flow li:nth-child(1) .top .tit{ background-image: url("../images/sub/sub03_06_icon01.png");}
.suqa_flow li:nth-child(2) .top .tit{ background-image: url("../images/sub/sub03_06_icon02.png");}
.suqa_flow li:nth-child(3) .top .tit{ background-image: url("../images/sub/sub03_06_icon03.png");}
.suqa_flow li:nth-child(4) .top .tit{ background-image: url("../images/sub/sub03_06_icon04.png");}
.suqa_flow li:nth-child(5) .top .tit{ background-image: url("../images/sub/sub03_06_icon05.png");}

.suqa_flow > li .tit::after{ content: ""; width: calc(100% + 3.6rem); height: 2px; background-color: var(--mma-color-prim); position: absolute; left: -1.8rem; bottom: 0;}
.suqa_flow > li:first-child .tit::before{ content: ""; width: 8px; height: 8px; border-radius: 8px; background-color: #fff; border: 10px var(--mma-color-prim); position: absolute; left: -1.8rem; bottom: -3px; border: 2px solid var(--mma-color-prim); z-index: 2;}
.suqa_flow > li:last-child .tit::before{ content: ""; width: 8px; height: 8px; border-radius: 8px; background-color: var(--mma-color-prim); position: absolute; right: -1.8rem; bottom: -3px;}

.suqa_text_list{ margin-top: 1.5rem;}
.suqa_text_list li{ position: relative; font-size: 1.5rem; font-weight: 600; padding-left: 1.2rem; line-height: 1.2;}
.suqa_text_list li:not(:first-child){ margin-top: 1rem;}
.suqa_text_list li::before{ content: ""; width: .4rem; height: .4rem; border-radius: .4rem; background-color: #555; position: absolute; left: 0; top: .8rem;}
.suqa_text_list li p{ font-weight: 400; color: #58616a;}

@media (max-width: 1679px) {
    .suqa_flow > li::after{ display: none;}
    .suqa_flow li .top .tit{ padding: 8rem 0 0 0;}
}

@media (max-width: 1023px) {
    .suqa_flow{ flex-direction: column; gap: 2rem;}
    .suqa_flow > li{ padding-bottom: 2rem;}
    .suqa_flow > li::after{ display: none;}
    .suqa_flow > li:first-child .tit::before,
    .suqa_flow > li:last-child .tit::before{ display: none;}

    .suqa_flow li .top .tit{ margin-top: 1rem; background-position: left 0 center; height: auto; padding: 1rem 2rem 1rem 6rem; display: flex; align-items: center;}
    .suqa_flow > li .tit::after{ display: none;}

    .suqa_flow > li:not(:last-child){ border-right: none; border-bottom: 2px dashed var(--mma-color-prim);}
}

:root {
    --shl-c01: #1656cd;
	--shl-c02: #009ac0;
}

.suqa_history_wrap{}

.suqa_history_legend{ margin-bottom: 1rem; display: flex; gap: 2rem;}
.suqa_history_legend span{ display: flex; align-items: center; gap: 1rem;}
.suqa_history_legend span::before{ content: ""; width: 1.4rem; height: 1.4rem; border-radius: 1.4rem; display: inline-flex;}
.suqa_history_legend .shl1::before{ background-color: var(--shl-c01);}
.suqa_history_legend .shl2::before{ background-color: var(--shl-c02);}

.suqa_history{ border-top: 1px solid var(--mma-line-color);}
.suqa_history > li{ border-bottom: 1px solid var(--mma-line-color); padding: 4rem 0; display: flex;}

.suqa_his_year{ font-size: 2.1rem; font-weight: 600; width: 18rem; line-height: 1.2;}

.suqa_his_info{ flex: 1;}
.suqa_his_info li{ min-height: 2.6rem; display: flex; align-items: center; gap: 2rem;}
.suqa_his_info li:not(:first-child){ margin-top: 1rem;}
.suqa_his_info li .shl_wrap::before{ content: ""; width: .4rem; height: 2.6rem; border-radius: .4rem; display: inline-flex; margin-right: 1.4rem; flex-shrink: 0;}
.suqa_his_info li.shlw1 .shl_wrap::before{ background-color: var(--shl-c01);}
.suqa_his_info li.shlw2 .shl_wrap::before{ background-color: var(--shl-c02);}
.suqa_his_info li.shlw_all .shl_wrap::before{ background: linear-gradient(0deg,rgba(22, 86, 205, 1) 0%, rgba(0, 154, 192, 1) 100%);}

.suqa_his_info li .suqa_his_desc{ font-size: 1.7rem;}

.shl_wrap{ display: flex; gap: .5rem;}
.shl_wrap .shl{ height: 2.6rem; padding: 0 1.2rem; border-radius: 3px; border: 1px solid; font-size: 1.5rem; font-weight: 600; display: inline-flex; align-items: center;}
.shl_wrap .shl.shl1{ border-color: var(--shl-c01); color: var(--shl-c01); background-color: #f0fcff;}
.shl_wrap .shl.shl2{ border-color: var(--shl-c02); color: var(--shl-c02); background-color: #f7faff;}

@media (max-width: 768px) {    
    .suqa_history > li{ flex-direction: column;}

    .suqa_his_info{ margin-top: 2rem;}
    .suqa_his_info li:not(:first-child){ margin-top: 1.6rem;}
    .suqa_his_info li{ flex-direction: column; align-items: flex-start; gap: .6rem;}

    .suqa_his_info li .suqa_his_desc{ padding: 0 2rem;}
}

.suqa_jap_wrap{ display: flex; gap: 4rem;}
.suqa_jap_wrap .map{ flex: 1 0 50%; display: flex; justify-content: center; align-items: center;}

.suqa_jap_list{}
.suqa_jap_list li{ text-align: left; display: flex; align-items: center; gap: 1rem;}
.suqa_jap_list li:not(:first-child){ margin-top: 1.2rem;}

.suqa_jap_list li .num{ color: #fff; width: 3rem; height: 3rem; border-radius: 3rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;}
.suqa_jap_list li:nth-child(1) .num{ background-color: #7568d9;}
.suqa_jap_list li:nth-child(2) .num{ background-color: #d79e3f;}
.suqa_jap_list li:nth-child(3) .num{ background-color: #e26755;}
.suqa_jap_list li:nth-child(4) .num{ background-color: #2e9b72;}

.suqa_jap_list li .text_wrap{}
.suqa_jap_list li .text_wrap strong{}
.suqa_jap_list li .text_wrap p{ font-size: 1.3rem; color: #58616a;}

@media (max-width: 768px) {    
    .suqa_jap_wrap{ flex-direction: column;}
}

/* 데이터 활용 : 운영안내 : 물환경측정망 : 비점오염물질측정망 */
.bi_map_cont{ flex: 1;}

/* 데이터 활용 : 운영안내 : 수질 및 수생태계 환경기준 : 중권역별 목표기준 및 달성시간 */
.ulTypeFish{ display: flex; justify-content: space-between; gap: .6rem;}
.ulTypeFish li{}
.ulTypeFish li img{ margin-bottom: 1rem; border-radius: var(--mma-radius-sm); width: 90%;}

@media (max-width: 768px) {    
    .ulTypeFish{ display: grid; grid-template-columns: 1fr 1fr;}
}


/*############################ 대용량 데이터셋 #########################*/
.search-list-top .sch-sort{}
.search-list-top .sch-info li:not(:last-child)::after,
.search-list-top .sch-sort li:not(:last-child)::after{ display: none;}

.search-list-top .sch-info li:not(:first-child)::after,
.search-list-top .sch-sort li:not(:first-child)::after {
    content: "";
    display: inline-flex;
    width: var(--search-list-width-border);
    height: var(--krds-size-height-2);
    background-color: var(--search-list-color-border);
    position: absolute;
    bottom: 0.5rem;
    left: -1rem;
}

@media (max-width: 1023px) {
    .search-list-top .sch-info li:not(:first-child)::after,
    .search-list-top .sch-sort li:not(:first-child)::after {
        display: none;
    }
}


.search-between-conts.big_data_search_wrap{ gap: 6.4rem;}
.search-between-conts.big_data_search_wrap .contents{ width: 100%;}
.big_dataset_wrap{ position: relative;}

/* 선택한 항목 quick */
.big_data_search_wrap .krds-in-page-navigation-area{ z-index: 60;}

@media (max-width: 1023px) {
    .search-between-conts .aside {
        display: none;
    }
}

.scroll-down .krds-in-page-navigation-type.bigdataset_type .krds-in-page-navigation-area{ top: 8rem !important;}
.krds-in-page-navigation-type.bigdataset_type .krds-in-page-navigation-area{ top: 36rem;}

.krds-in-page-navigation-type.bigdataset_type .krds-in-page-navigation-area{
    right: calc((100% - var(--krds-contents-wrap-size)) / 2 - 24rem - 0rem) !important;
    width: 24rem;
}

@media (max-width: 1680px) {
    .krds-in-page-navigation-type.bigdataset_type > .inner:not(.in-between) {
        padding-right: var(--krds-contents-padding-x);
    }
}

.search-list-top .sch-sort .w-hide2{ display: none;}
@media (max-width: 1023px) {
    .search-list-top .sch-sort .w-hide2 {
        display: flex !important;
    }
    .search-list-top .sch-sort .m-sort-btn.filter {
        display: flex;
        align-items: center;
    }
}

.search-list-top .sch-info li:not(:last-child)::after,
.search-list-top .sch-sort li:not(:last-child)::after {
    bottom: auto; top: 50%; transform: translateY(-50%);
}

.krds_page_nav_ori{ right: calc((100% - 1248px) / 2 - (16rem - 24px + 4rem));}
:root {
    
    --krds-in-page-navigation--position-right: calc((100% - var(--krds-contents-wrap-size)) / 2 - (var(--krds-in-page-navigation--width) - var(--krds-contents-padding-x) + var(--krds-pc-gap-layout-contents-right)));
    /* 260731 */
    --krds-in-page-navigation--position-rightaaa: calc((100% - var(--krds-contents-wrap-size)) / 2 - (var(--krds-in-page-navigation--width) - 2.4rem + 4rem));
}

.img_box_wrap{ display: flex; gap: 2rem;}

.item_box{ position: relative; border-radius: 1rem; padding: 3rem; width: 100%;}
.item_box.line{ border: 1px solid var(--line-color);}
.item_box.fill{ background-color: #eef1f6;}
.item_box.fill2{ background-color: #f3f8fc;}

.item_box.sm{ padding: 2rem 3rem;}

.img_box{ position: relative; border-radius: 1rem; padding: 4rem 3rem; width: 100%; text-align: center; border: 1px solid var(--line-color);}
.img_box.sm{ padding: 4rem 2rem;}
.img_box.lg{ padding: 5rem 4rem;}
.img_box.fill{ border: none; background-color: var(--mma-bg-01);}
.img_box.fill2{ border: none; background-color: var(--mma-bg-02);}

.img_box.rd img{ border-radius: var(--mma-radius-md);}
.img_box.tw{ display: flex; gap: 2rem; justify-content: center; align-items: center;}

.img_box .krds-info-list li{ text-align: left;}

.img_box2{ text-align: center;}


/* 기관별 수행업무 */
.img_box img[src*="oper_work"]{ /* max-width: fit-content; */}

.img_box .img img{ text-align: center; min-width: auto;}

.img_box_desc{ margin-bottom: 2rem; background-color: #eef2f7; min-height: 4rem; border-radius: 4rem; padding: 0 2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}

.img_info_desc{ position: absolute; font-size: 1.3rem; color: #58616a; top: 5rem;}
.img_info_desc.left{ left: 3rem;}
.img_info_desc.right{ right: 3rem;}

.img_info_desc.right + img{ padding: 0 1rem;}

.sub01_02_box{ padding: 3rem;}

@media (max-width: 768px) {
    .img_box_wrap{ flex-direction: column;}
    .img_box{ padding: 2rem;}
	.img_box.lg{ padding: 2rem;}
    .img_info_desc{ position: relative; top: auto; display: block; text-align: right;}
    .img_info_desc.left{ left: auto;}
    .img_info_desc.right{ right: auto; margin-bottom: 1rem;}

    .img_box.tw{ flex-direction: column;}
    .img_box .img{ text-align: center; display: flex; justify-content: center; flex-direction: column;}

    .img_box_desc{ display: flex; padding: 1rem;}

    .img_box img[src*="oper_work"]{ max-width: 100%;}

    .img_info_desc.right + img{ padding: 0;}
}

/* 대용량 데이터셋 : 검색 필터 */
.bigdata_tab{ }
.bigdata_tab ul{}

.bigdata_tab ul li button{ font-size: 1.5rem !important; line-height: 1.2 !important; margin-top: 0 !important;}

.big_data_search_wrap .tab.full.bigdata_tab > ul > li{ width: calc(50% - 2px); flex: auto;}

.aside .tab.full.bigdata_tab > ul{ gap: .4rem;}
.aside .tab.full.bigdata_tab > ul li button{ height: 4.2rem; border-radius: .6rem; border: 1px solid #b1b8be;}
#bigdatatab04{ margin-bottom: -1rem;}

@media (max-width: 767px) {
    .tab.fill.full.bigdata_tab ul li{ flex: 1;}
    .bigdata_tab ul li button{}
}

.bicdatatab_area{ gap: 2.2rem;}
.bigdata_sel_group{ display: flex; flex-direction: column; gap: .8rem;}

/* 대용량 데이터셋 : 카드 : badge */
.krds-in-page-navigation-type.bigdataset_type .krds-structured-list .card-top{ justify-content: space-between;}
.krds-badge.best_badge {
    background-color: #ffe6dc;
    color: #cc3700;
}

/* 검색필터 */
.search-between-conts.big_data_search_wrap .aside{ width: 240px;}

.filter-list.krds-accordion .accordion-item .accordion-body{}

/* 대용량 데이터셋 : 다운로드 타입 */
.bigdataset_list_type{ border-top: 1px solid #cdd1d5; padding-top: 3rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: flex-end;}

.bigdataset_list_wrap{}
.bigdataset_list_wrap.bigd01{ }
.bigdataset_list_wrap.bigd02{ display: none;}

.bigdataset_type_tab{ display: flex; align-items: center; gap: 1.5rem;}
.bigdataset_type_tab li{}
.bigdataset_type_tab li button{ font-size: 1.7rem; padding: .2rem .5rem; display: inline-flex; align-items: center; gap: .6rem;}
.bigdataset_type_tab li button i{ width: 2rem; height: 2rem;}
.bigdataset_type_tab li.on button{ color: #063a74; border-bottom: 2px solid #063a74;}
.bigdataset_type_tab li.on button i{ background-color: #063a74;}

/* 대용량 데이터셋 : 선택항목 Quick */
.bigdataset_down_wrap{ border-radius: 1rem; background-color: #eef2f7; padding: 2rem 2rem;}

.big_dataset_down_top{ position: relative; color: #052b57; font-size: 1.7rem; font-weight: 600; padding-bottom: 1rem; display: flex; align-items: center;}

.big_dataset_down_top::after{ content: ""; position: absolute; background-color: #cdd1d5; height: 1px; width: 19rem; bottom: 0;}
.big_dataset_down_bottom{ position: relative;}
.big_dataset_down_bottom::before{ content: ""; position: absolute; background-color: #cdd1d5; height: 1px; width: 19rem; top: 0;}

.bds_down_item_total{ color: #052b57; font-size: 1.7rem; font-weight: 600; padding: 1.8rem 0; display: flex; align-items: center; gap: .4rem;}

.big_dataset_down_list{ position: relative; max-height: 30rem; overflow: auto; padding: 1.2rem 0; display: flex; flex-direction: column; gap: .8rem;}

.bds_down_item_decs{ text-align: center; padding-right: 1.2rem;}

.bds_down_item{ padding: .6rem 1rem .6rem 1.4rem; border-radius: 2rem; border: 1px solid #c6c6c6; background-color: #fff; display: inline-flex; align-items: center; justify-content: space-between; gap: .8rem;}
.bds_down_item a{ font-size: 1.5rem; word-break: break-all;}
.bds_down_item .btn-delete{
    width: 1.6rem;
    height: 1.6rem;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_delete_fill.svg");
    mask-image: url("../images/icon/ico_delete_fill.svg");
    -webkit-mask-image: none;
    mask-image: none;
    background-image: url("../images/icon/ico_delete_fill.svg");
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-mask: none;
    mask: none;
    line-height: var(--krds-line-height-none);
    flex-shrink: 0;
}

.bds_down_btn_wrap .krds-btn{ width: 100%;}

@media (max-width: 1023px) {
    .krds-in-page-navigation-type.bigdataset_type .krds-in-page-navigation-area{
        width: 100%;
        margin-top: 2rem;
        position: static;
        width: 100%;
        transition: none;
    }
    .bigdataset_down_wrap{ padding: 2rem;}
    .bds_down_item{ width: calc(100% - 1.6rem);}
    
    .big_dataset_down_top::after,
    .big_dataset_down_bottom::before{ width: calc(100% - 2rem);}    
}



/* 대용량 데이터셋 : 관련정보 */
.bigdataset_link_wrap{ background-color: #fff; border-radius: 1rem; border: 1px solid #b1b8be; padding: 3rem 2rem;}

.big_dataset_link_top{ position: relative; color: #052b57; font-size: 1.7rem; font-weight: 600; padding-bottom: 1rem; border-bottom: 1px solid #cdd1d5; display: flex; align-items: center;}

.big_dataset_link_list li{ padding: 1rem 0;}
.big_dataset_link_list li:not(:last-child){ border-bottom: 1px dashed #cdd1d5;}
.big_dataset_link_list li:last-child{ padding: 1rem 0 0 0;}
.big_dataset_link_list li a strong{ position: relative; font-size: 1.7rem; font-weight: 600; margin-bottom: .6rem; display: flex; align-items: center; justify-content: space-between;}
.big_dataset_link_list li a strong::after{ content: ""; background: url("../images/icon/ico_go.svg") no-repeat; background-size: contain; width: 1.6rem; height: 1.6rem; display: inline-flex;}
.big_dataset_link_list li a p{ font-size: 1.5rem; color: #464c53;}

.krds-table-wrap .tbl.bigdataset_tbl thead th,
.krds-table-wrap .tbl.bigdataset_tbl tbody td{ text-align: center; padding: 1.2rem 1rem; font-size: 1.5rem;}
.krds-table-wrap .tbl.bigdataset_tbl tbody tr td:not(:first-child){ cursor: pointer;}

/* 대용량 데이터셋 카드형 */
.bigdataset_list_wrap .krds-structured-list .card-body .c-text .c-tit::after{ display: none;}
.big_card_info_list{}
.big_card_info_list li{ display: flex;}
.big_card_info_list li:not(:first-child){ margin-top: .6rem;}
.big_card_info_list li strong{ flex-shrink: 0; font-size: 1.7rem; width: 9.4rem; display: inline-flex;}
.big_card_info_list li span{ font-size: 1.7rem; word-break: keep-all;}

.bigdataset_list_wrap .krds-structured-list .card-body .c-text .c-tit{ text-decoration: none; display: flex; align-items: center; gap: .8rem;}

.btn_bigdata_detail_view{ width: 2.4rem; height: 2.4rem; display: inline-flex;}

.bigcard_chip_wrap{ width: 100%; border-top: 1px solid #cdd1d5; padding-top: 2rem; display: flex; gap: .4rem; flex-wrap: wrap;}

.btn_bigcard_chip{flex: 1 auto; border: 1px solid #c6c6c6; border-radius: .5rem; font-size: 1.5rem; height: 3.4rem; display: inline-flex; align-items: center; justify-content: center; gap: .2rem;}
.btn_bigcard_chip::before{
    content: "";
    display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_checkbox.svg");
    mask-image: url("../images/icon/ico_checkbox.svg");
    background-color: #8a979e;
    transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}

.btn_bigcard_chip.on{ color: var(--mma-text-prim); border-color: #246beb; background-color: #eff5ff;}
.btn_bigcard_chip.on::before{ background-color: #246beb;}

.bigdataset_list_wrap .krds-structured-list > li.ch_on{
    border-color: transparent;
    outline: 2px solid var(--mma-color-prim);
}

.data_btn_wrap{ display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center;}
.btn_date_chk{ border: 1px solid #c6c6c6; height: 3.2rem; border-radius: .4rem; font-size: 1.5rem; padding: 0 1rem;}
.btn_date_chk.on{
    border-color: var(--mma-color-prim); background-color: var(--mma-bg-secd-color);  color: var(--mma-text-prim);
}


/* 대용량 데이터셋 : 파일 다운 (레이어 팝업) */

/* 대용량 데이터셋 : 안내 팝업 (레이어 팝업) */
.layerpop_bigdata_info{}

.bdi_tit_logo img{ position: absolute; left: 4rem; top: 4rem;}
.krds-modal.layerpop_bigdata_info .modal-dialog{ width: 96rem;}

.layerpop_bigdata_info .modal-btn.btn-wrap{ justify-content: center;}

.bdi_pop_cont{ padding: 4rem 3rem 0 3rem;}
.bdi_pop_cont .bdi_txt_01{ font-size: 2.4rem; display: block; text-align: center; padding-top: 9rem; background: url("../images/sub/bdi_icon_down.png") no-repeat top 0 center;}
.bdi_pop_cont .bdi_txt_02{ text-align: center; font-size: 1.7rem; color: #464c53; margin-top: 1rem;}

.bdi_flow_list{ margin-top: 2rem; display: flex;}
.bdi_flow_list li{ position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1.5rem;}
.bdi_flow_list li:not(:first-child)::before{ content: "▶"; font-size: 2.2rem; color: #bfc9d9; position: absolute; left: -1rem; top: 7.4rem;}

.bdi_flow_list li strong{ font-size: 1.7rem;}
.bdi_flow_list li strong em{ margin-right: .6rem; background-color: var(--mma-color-prim); width: 2.4rem; height: 2.4rem; border-radius: 2.4rem; color: #fff; font-size: 1.5rem; display: inline-flex; justify-content: center; align-items: center;}
.bdi_flow_list li .icon_box{ width: 10rem; height: 10rem; border-radius: 1rem; border: 1px solid #cdd1d5; display: flex; justify-content: center; align-items: center;}
.bdi_flow_list li p{ text-align: center; font-size: 1.5rem; color: #464c53; padding: 0 1rem;}
.bdi_flow_list li:last-child p{ padding: 0 2rem;}

.bdi_pop_foot{ font-size: 1.7rem; color: #464c53; text-align: center; margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #cdd1d5;}

@media (max-width: 767px) {
    .krds-modal.layerpop_bigdata_info .modal-dialog{ width: 100%;}
    .bdi_pop_cont{ padding: 0;}
    .bdi_tit_logo{ display: none;}
    .bdi_tit_logo img{ position: relative; left: auto; top: auto;}
    .bdi_pop_cont .bdi_txt_01{ margin-top: 2rem;}
    .bdi_flow_list{ flex-direction: column; gap: 4rem;}
    .bdi_flow_list li:not(:first-child)::before{ content: "▼"; top: -3rem; left: 50%; transform: translateX(-50%); font-size: 1.5rem;}
}

/* 공통 레이어 팝업 */
.layerpop_bigdatadown_wrap{
  position: fixed;
  height: 100vh;
  width: 100%;
  z-index: 99;
  background-color: rgba(77, 80, 85, .7);
  top: 0;
  left: 0;
}
.layerpop_bigdatadown{ position: fixed; z-index: 99;
    border-radius: 2rem;
    padding: 3rem 4rem 4rem 4rem;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 40rem;
}

/* 용량 데이터셋 : 파일 다운 (레이어 팝업) */
.layerpop_bigdatadown{ min-width: 81.4rem; min-height: 41.8rem;}
.layerpop_bigdatadown .layerpop_wrap{ width: 98rem;}
.layerpop_bigdatadown .layerpop_top{ border-bottom: 1px solid #6d7882; margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center;}
.layerpop_bigdatadown .layerpop_top .layerpop_tit{ border-bottom: 4px solid #063a74; padding: 0 1rem; height: 6rem; font-size: 1.9rem; display: inline-flex; align-items: center;}
.layerpop_bigdatadown .layerpop_bds_cont{ padding: 3rem; border-radius: 1rem; background-color: #eef2f7;}

.bigdatadown_list{}
.bigdatadown_list li{ display: flex; align-items: center;}
.bigdatadown_list li:not(:first-child){ margin-top: 1rem;}
.bigdatadown_list li strong{ width: 9.8rem; flex-shrink: 0;}
.bigdata_pop_sel{ width: 18rem;}

.layerpop_bigdatadown .layerpop_btn_wrap{ margin-top: 2rem; display: flex; justify-content: flex-end; gap: .6rem;}
.layerpop_bigdatadown .layerpop_btn_wrap .krds-btn{ min-width: 8rem;}

/* 대용량 데이터셋 : 데이터 상세보기(레이어 팝업) */
.layerpop_bigdataset_wrap{
    position: fixed;
    height: 100vh;
    width: 100%;
    z-index: 901;
    background-color: rgba(77, 80, 85, .7);
    opacity: 1;
    top: 0;
    display: none;
}
.layerpop_bigdataset{ border-radius: 2rem; padding: 2rem 4rem 4rem 4rem; background-color: #fff; width: 110rem; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; max-height: 94vh;}

.layerpop_bds_top{ border-bottom: 1px solid #6d7882; display: flex; align-items: center; justify-content: space-between; min-height: 5rem;}

.layerpop_bds_top h3{ font-size: 2.1rem;}

.layerpop_bds_cont{ margin-top: 2rem; overflow: auto; height: calc(100vh - 200px);}

.bds_pop_tab{ display: inline-flex;}
.bds_pop_tab li{}
.bds_pop_tab li button{ position: relative; font-size: 1.9rem; font-weight: 600; color: #8a949e; height: 7.4rem; padding: 0 1.2rem; display: inline-flex; align-items: center;}

.bds_pop_tab li.on button{ color: #464c53;}
.bds_pop_tab li.on button::before{ content: ""; position: absolute; width: 100%; height: 4px; background-color: #063a74; left: 0; bottom: 0;}

@media (max-width: 767px) {
    .bds_pop_tab li button{ position: relative; font-size: 1.5rem; height: 5rem;padding: 0 1.2rem;}
}

.bds_tab_cont{ display: none;}
.bds_tab_cont.bdstc_01{ display: block;}
.bds_tab_cont.bdstc_02{ }

.btn_bdspop_close{ background: url("../images/icon/ico_close.svg"); width: 2.2rem; height: 2.2rem; display: inline-flex;}

.bds_pop_tbl{ border-top: 1px solid #d8d8d8;}
.bds_pop_tbl thead th{ background-color: #eef2f7; border-bottom: 1px solid #9ba1bc; padding: .8rem 2rem; text-align: center;}
.bds_pop_tbl thead th:not(:first-child){ border-left: 1px solid #d8d8d8;}

.bds_pop_tbl tbody th,
.bds_pop_tbl tbody td{ font-size: 15px; text-align: center; border-bottom: 1px solid #d8d8d8;}
.bds_pop_tbl tbody th{ background-color: #eef2f7; padding: .8rem 2rem;}
.bds_pop_tbl tbody td{ padding: .8rem 1.2rem; border-left: 1px solid #d8d8d8; border-right: 1px solid #d8d8d8;}
.bds_pop_tbl tbody td:first-child{ border-left: none;}
.bds_pop_tbl tbody td:last-child{ border-right: none;}

.bdsp_link{ color: #246ffe; text-decoration: underline;}

.bds_pop_tbl_wrap.data_preview{ overflow: auto;}
.bds_pop_tbl_wrap.data_preview th,
.bds_pop_tbl_wrap.data_preview td{ white-space: nowrap;}

@media (max-width: 1023px) {
    .layerpop_bigdataset_wrap{ padding: 2rem;}
    .layerpop_bigdataset{ position: relative; width: 100%;}
    .bds_pop_tbl_wrap {
        overflow: auto;
        width: 100%;
    }

    .bds_pop_tbl_wrap.data_detail .bds_pop_tbl{ width: 110rem;}
    .bds_pop_tbl_wrap.data_preview .bds_pop_tbl{ }
}

@media (max-width: 767px) {
    .layerpop_bigdataset{ max-height: calc(100vh - 2rem); padding: 1.5rem 2rem 2rem 2rem; display: flex;
        flex-direction: column;}
    .layerpop_bds_cont{ overflow: auto;}
}

.bdstc_data_preview_top{ margin-bottom: 2rem; display: flex; align-items: center; justify-content: flex-start; gap: 2rem;}
.bdstc_data_preview_top p{ font-size: 1.5rem;}
.bds_pre_sel{ max-width: fit-content;}

@media (max-width: 767px) {
    .bdstc_data_preview_top{ flex-direction: column; align-items: flex-start; gap: 1rem; position: sticky; top: 0; background-color: #fff; padding-bottom: 1rem;}
    .bds_pre_sel{ max-width: 100%;}
}

/* 대용량 데이터셋 : 파일 다운로드 (레이어 팝업) */
.bigdata_laypop{ width: 98rem;}
.bigdata_laypop .layerpop_bds_cont{}
.bigdata_laypop .bigdata_info_wrap{ margin-bottom: 1.2rem; display: flex; align-items: center; justify-content: space-between;}
.bigdata_laypop .bigdata_info_wrap .file_info{ font-size: 1.5rem;}
.bigdata_laypop .bigdata_info_wrap .file_info strong{ color: var(--mma-color-prim);}

.btn_bigdata_allview{ font-size: 1.5rem; display: inline-flex; align-items: center; gap: .8rem;}
.btn_bigdata_allview em{ position: relative; width: 2rem; height: 2rem; border-radius: 2rem; background-color: #063a74; display: inline-flex;}
.btn_bigdata_allview em::before,
.btn_bigdata_allview em::after{ content: ""; width: 1rem; height: 2px; background-color: #eef2f7; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50% );}
.btn_bigdata_allview em::after{ transform: translate(-50%, -50% ) rotate(90deg);}

.bigdata_wh_box{ background-color: #fff; border-radius: 1rem; padding: 2rem;}
.bigdata_wh_box:has(.bigdata_filelist_wrap){ height: 39.2rem;}
.bigdata_filelist_wrap{ height: 35rem; overflow: auto;}

.bigflist_top{ display: flex; gap: .8rem;}
.bigflist_top strong{ border-bottom: 2px solid #063a74; height: 3.4rem; display: flex; align-items: center; justify-content: center;}
.bigflist_top .bl_file_name{ flex: 1;}
.bigflist_top .bl_file_size{ width: 9.8rem;}

.tree_list{ margin-top: 1rem; padding-left: 2.6rem;}
.tree_list li{ margin-top: .6rem;}
.tree_list > li > ul{ margin-left: 1.2rem; display: none;}
.tree_list li > ul ul{ margin-left: .9rem; display: none;}

.tree_list .tree_list_in .file_size{ width: 9.8rem;}
.tree_list .tree_list_in{ display: flex;}

.category_layerpop .tree_list{ padding-left: 0rem;}

.tf_file_info{ flex: 1; display: flex; align-items: flex-start; gap: .8rem;}

.tf_f_btnwrap{ position: relative; display: inline-flex; gap: 0.8rem;}
.tf_f_btnwrap::before{ content: ""; width: 1rem; height: 2rem; background: url("../images/sub/icon_tf_arr.png") no-repeat center right 0; position: absolute; left: -2rem; top: 0;}
.tf_f_btnwrap.on::before{ background: url("../images/sub/icon_tf_arr_on.png") no-repeat center right 0; width: 1.4rem;}
.tree_list li > ul ul .tf_f_btnwrap::before{ display: none;}

.tf_file_info .tf_chk{ width: 2rem; height: 2rem; background: url("../images/sub/icon_chk.png") no-repeat; display: inline-flex}
.tf_file_info .tf_chk.on{ background: url("../images/sub/icon_chk_on.png") no-repeat;}
.tf_file_info .tf_folder{ width: 2.1rem; height: 2rem; background: url("../images/sub/icon_folder.png") no-repeat center; display: inline-flex;}
.tf_file_info .tf_folder.on{ background: url("../images/sub/icon_folder_on.png") no-repeat center;}
.tf_file_info:has(.tf_folder){}

.file_size_m{ display: none;}

@media (max-width: 767px) {
    .layerpop_bigdatadown{ width: calc(100% - 2rem); min-width: calc(100% - 2rem);}
    .layerpop_bigdatadown{ padding: 2rem;}
    .layerpop_bigdatadown .layerpop_bds_cont{ padding: 2rem;}
    .bigdatadown_list li{ flex-direction: column; align-items: flex-start;}
    .bigdatadown_list li:not(:first-child){ margin-top: 2rem;}
    .bigdatadown_list li strong{ margin-bottom: .8rem;}
    .bigdata_pop_sel{ width: 100%;}
}

@media (max-width: 767px) {
    .bigdata_filelist_wrap{ overflow: auto; height: 100%;}
    .tree_list{ padding-left: 1.6rem;}
    .bigflist_top{ display: none;}
    .tf_file_size{ display: none;}
    .file_size_m{ font-size: 1.3rem; color: #646464; margin-left: .6rem; display: inline-block;}
    .tf_name{ font-size: 14px;}
    .bigdata_wh_box{ padding: .8rem;}
}

.bigdata_laypop .layerpop_bds_cont{ overflow:hidden;}

/* 통합검색 */
.search-between-conts .aside .filter-dl dt h2{ font-size: 2.4rem;}
.total_search_top_box{ margin-bottom: 8rem;}
.total_search_top_box .search-top-box{ height: 18.4rem; display: flex; align-items: center; justify-content: center;}

.search-top-box .sch-form-wrap .krds-input{ width: 71rem;}

.total_search_top_box .search-top-box .sch-form-wrap .krds-input{ width: 71rem;}

@media (max-width: 767px) {
    .total_search_top_box .search-top-box{ height: auto; display: block;}
    .total_search_top_box{}
    .search-top-box .sch-form-wrap .krds-input{ width: 100%; font-size: 1.9rem;}
    .total_search_top_box .search-top-box .sch-form-wrap .krds-input{ width: 100%; height: 6rem; font-size: 1.9rem;}
    .total_search_top_box .search-top-box .krds-btn{ width: 3rem; height: 3rem;}
}

.tod_chip_wrap{ flex-wrap: wrap;}
.tod_chip_wrap .krds-form-chip{ flex: 0 calc(50% - .4rem);}

.krds-form-chip input[type=radio] ~ label, .krds-form-chip input[type=checkbox] ~ label{ height: 4.4rem;}
.search-between-conts .contents{ width: 100%;}

.search-between-conts .aside{ width: 24rem;}
.search-list-top.border{ border-bottom: 2px solid var(--search-list-color-border);}

/* 통합검색 : 검색결과 : 리스트 : 상단 */
.total_search_list_top{ margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between;}
.total_search_list_tit{ font-size: 1.7rem;}
.btn_total_search_list_more{ font-size: 1.7rem; display: inline-flex; align-items: center;}
.btn_total_search_list_more::after{
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");
    
    content: "";
    transform: rotate(-90deg);
    width: 1.8rem;
    height: 1.8rem;
    display: inline-block;
    background-color: #1d1d1d
}

/* 통합검색 : 검색결과 : 리스트 */
.total_all_search_list > li:not(:first-child){ margin-top: 4rem;}

.krds-btn.link:visited,
.total-search-list .info-body a:visited{ color: inherit;}

.total-search-list .total-search-item:first-child{ padding-top: 3rem;}
.total-search-list .total-search-item:not(:first-child){ margin-top: 2rem;}
.total-search-list .total-search-item{ border: 1px solid #b1b8be; border-radius: 1rem; padding: 3rem; gap: var(--krds-gap-4);}

.total-search-list .total-search-item:hover a{ text-decoration: underline;}

.total-search-list .info-top .i-title{ position: relative; font-size: 1.9rem; font-weight: 600; margin-bottom: -4px;}
.total-search-list .info-top .i-title::after{
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");
    
    content: "";
    position: absolute;
    top: .2rem;
    right: -2.4rem;
    transform: rotate(-90deg);
    width: 2.4rem;
    height: 2.4rem;
    display: inline-block;
    background-color: #1d1d1d;
}
@media (max-width: 767px) {
    .total-search-list .info-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .total-search-list .info-top .i-title::after{ display: none;}
}

.total-search-list .info_loc{}

.total-search-list .info_loc a{ color: #0f62fe; font-size: 1.7rem;}

.total-search-list .info_etc{ display: flex; flex-wrap: wrap;}
.total-search-list .info_etc li{ position: relative; font-size: 1.5rem; color: #1e2124;}
.total-search-list .info_etc li:not(:first-child){ margin-left: 2rem;}
.total-search-list .info_etc li:not(:first-child)::before{
    content: ""; background-color: #cdd1d5; width: 1px; height: 1.6rem; position: absolute; left: -1.1rem; top: 3px;
}

/* 통합검색 : 자료/보고서 */
.total-search-list .total-search-item .info_wrap{ display: flex; gap: 2rem;}
.total-search-list .total-search-item .info_wrap .info_in{ flex: 1; display: flex; flex-direction: column; gap: var(--krds-gap-4);}
.total-search-list .total-search-item .info_wrap .info_right{ display: flex;}

/* 통합검색 : 자료/보고서 : 미리보기 */
.btn_report_priview{ flex-shrink: 0;}

.ts_report_priview_wrap{ border-radius: 1rem; border: 1px solid #e6e8ea; overflow: hidden;}
.ts_report_priview_wrap .rp_top{ font-size: 1.7rem; font-weight: 600; background-color: #d6e0eb; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between;}
.ts_report_priview_wrap .rp_cont{ background-color: #eef2f7; padding: 1rem;}
.ts_report_priview_wrap .rp_page_list{}
.ts_report_priview_wrap .rp_page_list li{ background-color: #fff; border-radius: 1rem; padding: 2rem; display: flex; align-items: center; gap: 2rem;}
.ts_report_priview_wrap .rp_page_list li span{ width: 5.4rem; height: 2.5rem; border-radius: 2.5rem; font-size: 1.5rem; color: var(--mma-color-prim); background-color: #eff5ff; display: inline-flex; justify-content: center; align-items: center;}
.ts_report_priview_wrap .rp_page_list li p{ flex: 1; font-size: 1.5rem;}

.ts_report_priview_wrap .rp_page_list li:not(:first-child){ margin-top: 1rem;}

@media (max-width: 767px) {
    .total-search-list .total-search-item .info_wrap{ flex-direction: column;}
    .ts_report_priview_wrap .rp_page_list li{ flex-direction: column;}
    .btn_report_priview{ margin-left: auto;}
}

.total-search-list .info-body .txt {
    -webkit-line-clamp: 1;
}
.krds-btn.link:visited, .total-search-list .info-body a:hover{ text-decoration: none;}

@media (max-width: 767px) {
    .total-search-list .info_loc ul{ border-bottom: none; flex-wrap: wrap;}
    .total-search-list .info_loc ul li a{ text-decoration: underline;}
}
/* 통합검색 : 검색 필터 : 날짜 선택 */
.total_search_calendar .input-group.range{ gap: .6rem;}
.total_search_calendar .input-group.range .mark{ height: 4rem;}
.total_search_calendar .input-group.range .krds-input{ padding: 0 .6rem; text-align: center;}

/*####################################### [ 정보마당 ] ####################################*/

/*************************** [ 정보마당 : 물모아 소개 ] ***************************/
.mma_intro_visual{ border-radius: 2rem; 
    background: linear-gradient(125deg, rgba(18, 58, 140, 1) 0%, rgba(31, 96, 186, 1) 100%);
}

.mma_intro_visual .mma_int_bg{
    padding: 6rem;
    background-image: url("../images/sub/mma_intro_bg.png");
    background-repeat: no-repeat;
    background-position: right -7rem bottom -4rem;
}

.mma_intro_visual .text_wrap{ width: 50rem; padding-right: 6rem;}
.mma_intro_visual .text_wrap strong{ color: #fff; font-size: 3.8rem; font-weight: 600; margin-bottom: 3rem; display: block;}
.mma_intro_visual .text_wrap p{ color: #fff;}

@media (max-width: 1680px) {
    .mma_intro_visual .mma_int_bg{ background-size: 40rem auto; background-position: right -6rem bottom -3rem;}
}

@media (max-width: 768px) {
    .mma_intro_visual .text_wrap{ width: 100%; padding-right: 0;}
    .mma_intro_visual .mma_int_bg{ padding: 3rem 3rem 18rem 3rem; background-size: 36rem auto; background-position: center bottom -4rem;}
    .mma_intro_visual .text_wrap strong{ font-size: 3rem; margin-bottom: 2rem;}
    .mma_intro_visual .text_wrap p{ font-size: 1.5rem;}
}

.total_syslink_list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2.4rem;
}

.total_syslink_list li{
    position: relative;
    display: flex;
    align-items: normal;
    justify-content: flex-start;
    flex-direction: column;
    border-radius: var(--mma-radius-md);
    border: 1px solid var(--mma-line-color);
    background-color: #fff;
    padding: 3rem;
}

.total_syslink_list li .tsl_top{ margin-bottom: 1.5rem;}
.total_syslink_list li .tsl_top .tag{ background-color: #eff5ff; border-radius: var(--mma-radius-sm); color: #1d56bc; font-size: 1.5rem; height: 2.6rem; padding: 0 1.2rem; display: inline-flex; align-items: center;}
.total_syslink_list li .tsl_top .tag.t2{ color: #5917b8; background-color: #f3edfb;}

.total_syslink_list li .tsl_body{ display: flex; flex-direction: column; gap: 1.6rem;}
.total_syslink_list li .tsl_body strong{ font-size: 1.9rem;}
.total_syslink_list li .tsl_body .tsl_desc{ color: #58616a;}
.total_syslink_list li .tsl_body .tsl_desc p{ font-size: 1.5rem;}

.total_syslink_list li .tsl_link{ border-top: 1px solid var(--mma-line-color); padding-top: 1.5rem; margin-top: 2.5rem; display: flex; justify-content: space-between;}
.total_syslink_list li .tsl_link a{ position: relative; font-size: 1.5rem; color: #1d56bc; text-decoration: underline;}
.total_syslink_list li .tsl_link a::after{
	content: "";
	display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_go.svg");
    mask-image: url("../images/icon/ico_go.svg");	
	background-color: #1d56bc;
    position: absolute;
    right: -22px;
    top: 4px;
    mask-size: 1.6rem;
}

.total_syslink_list li .tsl_link span{ font-size: 1.5rem; color: #58616a;}

@media (max-width: 1680px) {
    .total_syslink_list{ grid-template-columns: 1fr 1fr; grid-gap: 1.6rem;}
}
@media (max-width: 1023px) {}
@media (max-width: 768px) {
    .total_syslink_list{ grid-template-columns: 1fr;}
}

.platform_vision_list{ border-radius: var(--mma-radius-md); border: 1px solid var(--mma-line-color); padding: 1rem 3rem;}
.platform_vision_list li{ display: flex; gap: 3rem; align-items: flex-start;}
.platform_vision_list li > div{ padding: 3rem 0;}
.platform_vision_list li:not(:first-child) > div{ border-top: 1px solid var(--mma-line-color);}

.platform_vision_list li .pv_left{ width: 20rem; display: inline-flex; align-items: center; gap: 2rem;}
.platform_vision_list li .pv_left .pv_cion{ width: 5rem; height: 5rem; border-radius: var(--mma-radius-sm); background-position: center; background-repeat: no-repeat; display: inline-flex;}
.platform_vision_list li:nth-child(1) .pv_left .pv_cion{ background-color: #0a3273; background-image: url("../images/sub/pv_icon01.png"); background-size: 2.4rem auto;}
.platform_vision_list li:nth-child(2) .pv_left .pv_cion{ background-color: #0e55ad; background-image: url("../images/sub/pv_icon02.png"); background-size: 2.8rem auto;}
.platform_vision_list li:nth-child(3) .pv_left .pv_cion{ background-color: #1878de; background-image: url("../images/sub/pv_icon03.png"); background-size: 1.9rem auto;}
.platform_vision_list li:nth-child(4) .pv_left .pv_cion{ background-color: #1f93ea; background-image: url("../images/sub/pv_icon04.png"); background-size: 2.4rem auto;}

.platform_vision_list li .pv_left .pv_tit{ font-size: 1.9rem;}

.platform_vision_list li .pv_right{ flex: 1; display: flex; align-items: center;}
.platform_vision_list li .pv_right .b_text{ font-size: 2.1rem; font-weight: 600; color: #083891;}

@media (max-width: 1023px) {
    .platform_vision_list li{ flex-direction: column;}
}

@media (max-width: 1023px) {
    .platform_vision_list{ padding: 0 2rem;}
    .platform_vision_list > li{ gap: 2rem; padding: 3rem 0;}
    .platform_vision_list > li > div{ padding: 0;}    
    .platform_vision_list li:not(:first-child) > div{ border-top: none;}
    .platform_vision_list > li:not(:first-child){ border-top: 1px solid var(--mma-line-color);}

    .platform_vision_list li .pv_left{ width: 100%; gap: 1.6rem;}
    .platform_vision_list li .pv_left .pv_cion{ width: 4rem; height: 4rem;}
    .platform_vision_list li:nth-child(1) .pv_left .pv_cion,
    .platform_vision_list li:nth-child(2) .pv_left .pv_cion,
    .platform_vision_list li:nth-child(4) .pv_left .pv_cion,
    .platform_vision_list li:nth-child(5) .pv_left .pv_cion{ background-size: 50%;}
    .platform_vision_list li:nth-child(3) .pv_left .pv_cion{ background-size: 40%;}
}

.icon_info_list{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.6rem;}
.icon_info_list > li{ border-radius: var(--mma-radius-md); border: 1px solid var(--mma-line-color); padding: 1rem;}

.icon_info_list > li{ display: grid; align-items: stretch;}
.icon_info_list > li .iit_top{ margin-left: 2rem; padding: 2rem 0; display: flex; gap: 2rem;}
.icon_info_list > li .iit_top .iit_icon{ width: 8.4rem; height: 8.4rem; border-radius: 100%; background-repeat: no-repeat; background-position: center; flex-shrink: 0; display: inline-flex;}
.icon_info_list > li:nth-child(1) .iit_top .iit_icon{ background-color: #ebf8ff; background-image: url("../images/sub/mma_intro_icon01.png"); background-size: 4rem auto;}
.icon_info_list > li:nth-child(2) .iit_top .iit_icon{ background-color: #edf1ff; background-image: url("../images/sub/mma_intro_icon02.png"); background-size: 4.5rem auto;}
.icon_info_list > li .iit_top .text_wrap{ padding-right: 2rem; display: flex; flex-direction: column; gap: 1rem;}
.icon_info_list > li .iit_top strong{ font-size: 2.1rem;}
.icon_info_list > li .iit_top p{}
.icon_info_list > li .iit_body{ background-color: #f8f8f8; background-color: #f8f8f8; border-radius: var(--mma-radius-md); padding: 2rem;}

@media (max-width: 768px) {
    .icon_info_list{ grid-template-columns: 1fr;}
}

.intro_step_wrap{}

.intro_step_list{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1.6rem;}
.intro_step_list > li{ padding: 3rem; border-radius: var(--mma-radius-md); background-repeat: no-repeat; background-position: left 2rem top 2rem; display: flex; flex-direction: column;}
.intro_step_list > li:nth-child(1){ background-color: #ebf8ff; background-image: url("../images/sub/isls_icon01.png"); background-size: 8.5rem auto;}
.intro_step_list > li:nth-child(2){ background-color: #e7f2ff; background-image: url("../images/sub/isls_icon02.png"); background-size: 9rem auto;}
.intro_step_list > li:nth-child(3){ background-color: #edf1ff; background-image: url("../images/sub/isls_icon03.png"); background-size: 8rem auto;}

.intro_step_list li .isls_top{ display: flex; flex-direction: column; align-items: center; gap: 1rem;}
.intro_step_list li .isls_top .step{ font-size: 2.1rem; color: var(--mma-text-prim);}
.intro_step_list li .isls_top .step span{ font-weight: normal;}
.intro_step_list li .isls_top .tit{ font-size: 1.9rem; text-align: center;}

.intro_step_list li .isls_body{ margin-top: 1.6rem;}

@media (max-width: 768px) {
    .intro_step_list{ grid-template-columns: 1fr;}
}

.tbg1{ background-color: #f8f8f8 !important;}


/*************************** [ 정보마당 : 물백과사전 ] ***************************/
.mul_info_box{ border: 4px solid #eef2f7; border-radius: 1.2rem; padding: 3rem; display: flex; align-items: center;}
.mul_info_box .mul_desc{}

.mul_info_box .mul_desc strong{ font-size: 1.9rem; display: block;}
.mul_info_box .mul_desc p{ font-size: 1.7rem; margin-top: .4rem;}

.mul_info_box.wdic{ gap: 2rem;}
.mul_info_box.wdic::before{
    content: ""; width: 6.1rem; height: 6.5rem; background: url("../images/sub/info_box_img_dic.png") no-repeat; background-size: 6.1rem auto; display: inline-flex;
}

@media (max-width: 767px) {
    .mul_info_box.wdic{ flex-direction: column;}
    .mul_info_box .mul_desc strong{ text-align: center;}
    .mul_info_box .mul_desc p{ text-align: center; margin-top: 1rem;}
}

.water_dic_search_wrap .search-top-box{ padding: 4rem 8rem;}
.water_dic_keyword{ margin-top: 4rem; padding-top: 4rem; border-top: 1px solid #cdd1d5;}

.water_dic_keyword{ display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap;}
.btn_dic_keyword{ min-width: 3.6rem; height: 3.6rem; border-radius: .4rem; background-color: #fff; border: 1px solid #cdd1d5; display: inline-flex; align-items: center; justify-content: center;}
.btn_dic_keyword.on{ border: 1px solid var(--mma-color-prim); color: var(--mma-text-prim); background-color: #eff5ff;}

.btn_dic_keyword.long{ padding: 0 1.2rem;}

@media (max-width: 767px) {
    .water_dic_search_wrap .search-top-box{ padding: 2rem;}
    .water_dic_keyword{ margin-top: 2.5rem; padding-top: 2.5rem;}
}

.water_dictionary_word_wrap{ margin-top: 2rem; border: 1px solid #cdd1d5; background-color: #eef2f7; border-radius: 1.2rem; padding: 1rem; display: flex; gap: 3rem;}

.water_dicword{ width: 26rem;}
.dicword_top{ margin-left: 2rem; height: 5rem; display: flex; align-items: center; justify-content: space-between;}
.dicword_top strong{ font-size: 1.9rem;}
.dicword_top span{}
.dicword_top span em{ color: var(--mma-text-prim);}

.water_dic_wrod_list{ margin-left: 1rem; padding: .5rem 0; height: 45rem; overflow: auto;}
.water_dic_wrod_list li{ padding-left: 1rem; padding-right: .8rem;}
.water_dic_wrod_list li button{ position: relative; width: 100%; min-height: 3.8rem; font-size: 1.7rem; padding: .6rem .8rem .6rem 1.6rem; border-radius: .4rem; text-align: left; display: block;}

.water_dic_wrod_list li.on button{ color: var(--mma-text-prim); font-weight: 600; background-color: #fff; border: 1px solid var(--mma-color-prim); display: flex; align-items: center; justify-content: space-between;}
.water_dic_wrod_list li.on button::after{
    content: "";
    display: inline-flex;
    width: 20px;
    height: 20px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: var(--mma-color-prim);
    transform: rotate(-90deg);
}

.water_dic_viewer_wrap{ flex: 1; display: flex; flex-direction: column; gap: .5rem;}

.wdic_keyword_top{ padding: 0 2rem; border-radius: var(--mma-radius-md); background-color: #fff; height: 8rem; display: flex; justify-content: center;}

.wdic_keyword{ position: relative; font-size: 2.4rem; display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; line-height: 1.2; word-break: break-all;}
.wdic_keyword::before{ content: ""; width: 2.2rem; height: 2.2rem; background: url("../images/sub/keyword_icon.png") no-repeat; display: inline-flex; flex-shrink: 0;}
.wdic_keyword::after{ content: ""; width: calc(100% + 6px); height: .4rem; background-color: var(--mma-color-prim); position: absolute; left: 2px; bottom: 0;}

.wdic_keyword_cont{ flex: 1; border-radius: var(--mma-radius-md); background-color: #fff; padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;}

.wdic_keyword_desc{ font-size: 1.7rem; height: 29.5rem; overflow: auto;}

.wdic_tag{ display: flex; flex-direction: column; gap: 1rem;}
.wdic_tag dl{ font-size: 1.5rem; display: flex; gap: 1rem;}
.wdic_tag dl dt{ border-radius: var(--mma-radius-sm); background-color: #eef2f7; width: 6rem; height: 2.5rem; display: inline-flex; justify-content: center; align-items: center;}
.wdic_tag dl dd{}

@media (max-width: 1023px) {
    .water_dic_search_wrap .search-top-box{ padding: 2rem;}
}

@media (max-width: 767px) {
    .water_dictionary_word_wrap{ flex-direction: column; padding: 2rem;}
    .water_dicword { margin-left: 0; width: 100%;}
    .wdic_keyword::after { width: calc(100% - 6px);}
    .wdic_keyword_top{ height: auto; min-height: 6rem; padding: 0 1rem;}
    .wdic_keyword_top strong{ font-size: 2.1rem; padding: 2rem 1rem; line-height: 1.1; font-size: 1.9rem;}
    .dicword_top{ margin-left: 0;}
    .water_dic_wrod_list{ margin-left: 0; height: 30rem;}
}

/*************************** [ 정보마당 : 사이트맵 ] ***************************/
.mma_site_map{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1.8rem; align-items: start;}
.mma_site_map > li.span2{ grid-column: span 2;}

.mma_site_map a:hover{ text-decoration: underline;}

.mma_site_map li .msm_tit a{ margin-bottom: 2rem; height: 10rem; font-size: 1.9rem; font-weight: 600; border-radius: var(--mma-radius-md); display: flex; justify-content: center; align-items: center;}

/* 타이틀 배경색 (컬럼별 지정) */
.msm-col1 .msm_tit a{ background-color: #e4f0ff;}
.msm-col2 .msm_tit a{ background-color: #e2f1fa;}
.msm-col3 .msm_tit a{ background-color: #dff4f3;}
.msm-col4 .msm_tit a{ background-color: #e2f3ec;}
.msm-col5 .msm_tit a{ background-color: #e9ebf8;}
.msm-col6 .msm_tit a{ background-color: #eef1f3;}
.msm-col6 .msm_tit a{ margin-bottom: 0;} /* 통합검색: 하위 목록 없음 */

/* 2depth 목록 (컬럼 기본 스택 박스) */
.msm_dep2{}
.msm_dep2 > li{ border-radius: .8rem; border: 1px solid var(--mma-line-color);}
.msm_dep2 > li:not(:first-child){ margin-top: 1rem;}
.msm_dep2 > li > a{ display: block; text-align: center; padding: 1.2rem 1rem;}

/* 데이터 활용 : 엑셀 D열/E열에 대응하는 2단(좌우) 배치 */
.msm_split{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.8rem; align-items: start;}

/* 3depth 목록 (점 불릿, 회색 박스) */
.msm_dep3{ position: relative; background-color: #f0f0f0; border-radius: .8rem; padding: 1rem; margin: .6rem;}
.msm_dep3::before{ content: ""; width: 100%; height: 1px; background-color: var(--mma-line-color); position: absolute; top: -.6rem; left: 0;}
.msm_dep3 > li{ margin-bottom: .4rem;}
.msm_dep3 > li:last-child{ margin-bottom: 0;}
.msm_dep3 > li > a{ position: relative; display: block; font-size: 1.5rem; padding-left: 1rem;}
.msm_dep3 > li > a::before{ content: ""; width: 4px; height: 4px; border-radius: 100%; background-color: #257773; position: absolute; left: 0; top: 7px;}

/* 4depth 목록 ("-" 텍스트 불릿, 3depth 안에 중첩) */
.msm_dep4{ padding: .4rem 0 .2rem 1.2rem;}
.msm_dep4 li a{ position: relative; display: flex; align-items: center; gap: .4rem; font-size: 1.3rem; color: var(--mma-text-secd); padding: .3rem 0 .3rem 0;}
.msm_dep4 li a::before{ content: "-";}

/* 항목이 많은 4depth 목록(오픈 API 서비스 등)은 스크롤 처리 */
.msm_dep4.msm_scroll{ max-height: 26rem; overflow-y: auto;}

@media (max-width: 1023px) {
    .mma_site_map{ grid-template-columns: repeat(2, 1fr);}
    .msm_split{ grid-template-columns: 1fr;}
}
@media (max-width: 768px) {
    .mma_site_map{ grid-template-columns: 1fr; grid-gap: 1.8rem;}
    .mma_site_map > li.span2{ grid-column: span 1;}
    .mma_site_map li .msm_tit a{ height: 8rem;}
    .msm_split{ grid-template-columns: 1fr;}
    .msm_dep3 > li > a{ font-size: 1.5rem; display: block; padding: 1rem;}
    .msm_dep3 > li > a::before{ top: 50%; transform: translateY(-50%);}
    .msm_dep4 li a{ font-size: 1.4rem; padding: 1rem 0 1rem 1rem;}
    .msm_dep4.msm_scroll{ max-height: none;}
}

/*####################################### [ 데이터 활용 ] ####################################*/

/********************** 수질오염총량 관리제도 : 수계현황 **********************/

.water_sysinfo_wrap{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--krds-gap-9);
    width: 100%;
}

.water_sysinfo_conts{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    gap: var(--krds-gap-9);
    width: 100%;
}

@media (max-width: 1440px){
    body:has(.water_sysinfo_wrap){ overflow: auto; width: 1440px !important;}
    #wrap:has(.water_sysinfo_wrap){ width: 1440px !important;}
    .quick_side_wrap{ display: none;}
}


.water_sysinfo_search_wrap{ width: 100%;}

.w_sysinfo_box{ border-radius: 1rem; border: 1px solid var(--line-color); padding: 3rem; display: flex;  justify-content: space-between;}
.w_sysinfo_box:first-child{ margin-bottom: 1rem;}
.wsi_img_box img{ width: 44.8rem; height: 44.8rem;}

.w_sysinfo_data{ width: 44.8rem;}

.wsi_tit{ font-size: 1.7rem; font-weight: 600; color: var(--mma-text-prim); margin-bottom: .8rem;}

.w_sysinfo_data .wsi_tit:not(:first-child){ margin-top: 2rem;}

.krds-in-page-navigation-area.wsysinfo_quick {
    right: calc((100% - var(--krds-contents-wrap-size)) / 2 - 24rem - 0rem) !important;
    width: 24rem;
}
@media (max-width: 1680px) {
    .krds-in-page-navigation-area.wsysinfo_quick {
        right: var(--krds-in-page-navigation--position-right) !important;
        width: 16rem;
    }
}

@media (max-width: 1023px) {
    .krds-in-page-navigation-area.wsysinfo_quick {    
        right: var(--krds-in-page-navigation--position-right);
    }
}

.quick_side_wrap{ 
    position: absolute;
    right: calc((100% - var(--krds-contents-wrap-size)) / 2 - 18rem - 2rem) !important;
    top: 360px;
    z-index: 10;
    transition: top .3s ease;
}

.quick_side_menu{ padding: 3rem; border-radius: 1.2rem; border: 1px solid var(--line-color); background-color: #fff; width: 20rem;}
.qsm_tit{ color: #052b57; margin-bottom: 1rem; display: flex;}
.qsm_list{ padding-top: 1.2rem; border-top: 1px solid #cdd1d5;}
.qsm_list li{}
.qsm_list li a{}

.link_go{ display: flex; justify-content: space-between; align-items: center;}
.link_go::after{
	content: "";
	display: inline-flex;
    width: 22px;
    height: 22px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_go.svg");
    mask-image: url("../images/icon/ico_go.svg");	
	background-color: #1e2124;
    flex-shrink: 0;
}

.wis_local_area{ margin-top: 2rem;}

.wis_local_area{ width: 100%; border-radius: 1.2rem; background-color: #eef2f7; padding: 1rem; display: flex; gap: 1rem; align-items: center;}
.wis_local_area strong{ width: 9rem; display: flex; justify-content: center; align-items: center;}
.wis_local_area ul{ flex: 1; display: flex; gap: 3.5rem;}
.wis_local_area ul li{ flex: 1; position: relative; border-radius: 1rem; height: 4rem; background-color: #fff; display: flex; justify-content: center; align-items: center;}
.wis_local_area ul li:last-child{ color: var(--mma-text-prim); font-weight: 600;}
.wis_local_area ul li:not(:first-child):before{ 
    content: "";
	display: inline-flex;
    width: 16px;
    height: 16px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #1e2124;
    position: absolute;
    left: -2.4rem;
    transform: rotate(-90deg);
}
.cont_tbl{ width: 98rem;}

.wsi_graph_wrap{ width: 100%; display: flex; gap: 1rem;}
.wsi_graph{ flex: 1; height: 40rem;}

/********************** 수질오염총량 관리제도 : 오염도 분석 **********************/
.tab_cont_top{ position: relative; width: 100%;}
.h3_wrap{ display: flex; justify-content: space-between;}
.desc_p{ color: #464c53;}
.desc_p.md{ font-size: 1.5rem !important;}
.desc_p.sm{ font-size: 1.3rem;}
.desc_box{ padding: 1rem; border-radius: 1rem; background-color: #f4f5f6; font-size: 1.5rem; width: 100%;}
/*
.desc_p.bill{ position: relative; padding-left: 1.8rem;}
.desc_p.bill::before{ content: "※"; position: absolute; left: 0; top: 0px;}
*/
.h3_wrap + .desc_box{ margin-top: 1.4rem;}

.water_sysinfo_wrap .krds-step-wrap{ width: 100%;}

.sysinfo_step_wrap{ display: flex; gap: 8rem; padding-left: 3rem;}
.sysinfo_step_wrap li{ position: relative; display: flex; flex-direction: column;}
.sysinfo_step_wrap li:not(:first-child)::before{ content: ""; background-color: #8a949e; width: 5rem; height: 2px; position: absolute; left: -7rem; top: 50%; transform: translateY(-50%);}
.sysinfo_step_wrap li em{ background-color: #fff; position: absolute; width: 1.4rem; height: 1.4rem; border-radius: 1.4rem; border: 2px solid #8d97a1; position: absolute; left: -2.5rem; top: 50%; transform: translateY(-50%);}
.sysinfo_step_wrap li span{ color: #8a949e; font-size: 1.3rem;}
.sysinfo_step_wrap li strong{ color: #8a949e;}

.sysinfo_step_wrap li.active em{ border-color: var(--mma-color-prim); background-color: #fff; width: 2.6rem; height: 2.6rem; border-radius: 2.6rem; left: -3.4rem;}
.sysinfo_step_wrap li.active em::after{ content: ""; background-color: var(--mma-color-prim); width: 1.4rem; height: 1.4rem; border-radius: 1.4rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.sysinfo_step_wrap li.active strong{ color: #1e2124;}

.sysinfo_step_cont{ width: 100%;}
.pollu_area_wrap{ border: 1px solid #cdd1d5; border-radius: 1.2rem; padding: 1rem; display: flex; gap: 1rem;}

.analysis_info_wrap{ flex: 1; border-radius: 1rem; padding: 2rem; background-color: #eef2f7;}

.ana_tit{ margin-bottom: 1rem; font-size: 1.9rem; font-weight: 600; display: flex; align-items: center;}
.ana_tit em{ margin-right: 1rem; color: #fff; background-color: #063a74; font-size: 1.5rem; width: 2.5rem; height: 2.5rem; border-radius: 2.5rem; display: inline-flex; justify-content: center; align-items: center;}

.analysis_map{ position: relative; width: 47.5rem; height: 85.5rem; border-radius: 1rem;}

.ana_sch_form{}
.ana_sch_form dt{ font-size: 1.5rem;}
.ana_sch_form dd{ margin-top: .4rem; display: flex; gap: .6rem;}
.ana_sch_form.name .krds-btn{ width: 8rem;}
.ana_sch_form + .ana_sch_form{ margin-top: 1.6rem;}
.ana_sch_form.name + .tal_wrap{ margin-top: 1rem;}
.ana_tbl thead tr th{ background-color: #e0e6ed !important;}

.ana_btn_wrap{ margin-top: 2rem; display: flex; gap: 1rem; justify-content: flex-end;}

.ana_btn_wrap.step1 button{ width: 100%;}
.btn_ana_step{ display: inline-flex; align-items: center;}
.btn_ana_step:hover{ color: #fff;}
.btn_ana_step::after{
	content: "";
	display: inline-flex;
    width: 20px;
    height: 20px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #fff;
    transform: rotate(-90deg);
}

.ana_map_tooltip{ position: absolute; max-width: 20rem; border-radius: .5rem; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); z-index: 9;}
.ana_map_tooltip::before{ content: ''; position: absolute; display: inline-block; top:50%; transform: translateY(-50%); left: -8px; width:0; height:0; border-right:8px solid #fff; border-bottom: 6px solid transparent; border-top: 6px solid transparent;}
.anqm_top{ position: relative; border-radius: .5rem .5rem 0 0; background-color: var(--mma-color-prim); height: 2.4rem; padding: 0 1rem; display: flex; align-items: center;}
.anqm_top .btn_tooltip_close{ width: 14px; height: 14px; position: absolute; right: 1rem; top: .2rem;}
.anqm_top .btn_tooltip_close::after{
	content: "";
	display: inline-flex;
    width: 14px;
    height: 14px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_close.svg");
    mask-image: url("../images/icon/ico_close.svg");	
	background-color: #fff;
    transform: rotate(-90deg);
}
.anam_cont{ background-color: #fff; padding: 1.5rem; border-radius: 0 0 .5rem .5rem;}
.anam_cont .anam_info p{ font-size: 1.5rem;}
.anam_cont .anam_info p a{ color: var(--mma-text-prim); text-decoration: underline;}
.anam_btnwrap{ margin-top: .8rem;}
.anam_btnwrap button{ font-size: 1.5rem; color: var(--mma-text-prim); text-decoration: underline;}

/* 오염도 분석 : 사전분석 : Step2 분석조건 입력 */
.pollu_step2_top{ margin-bottom: 1rem; display: flex; justify-content: flex-end;}
.pullu_item_list{ padding: 1rem; display: flex; flex-wrap: wrap; gap: 1rem;}
.pullu_item_list li{ flex: 1 30%;}

.pullu_item_list.etc{ margin-top: -1rem; display: none;}

.btn_pullu_item_view{ margin-top: 1rem; width: 100%; background-color: #e0e6ed; border-radius: .5rem; padding: 1rem; font-weight: 400;}
.btn_pullu_item_view::after{
    content: "";
	display: inline-flex;
    width: 16px;
    height: 16px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #000;
}
.btn_pullu_item_view.on::after{ transform: rotate(180deg);}

.pull_form_group{ display: flex; gap: 2rem; align-items: center;}
.pull_form_unit{ display: inline-flex; align-items: center; gap: .8rem;}

.pull_form_group .krds-input{ width: 16.4rem;}

.pull_su_form_warp{ display: flex; justify-content: center}

.buit_dot{ position: relative; padding-left: 1.2rem;}
.buit_dot::before{
    content: "";
    background-color: #555;
    width: 0.4rem;
    height: 0.4rem;
    left: 0;
    top: .9rem;
    border-radius: var(--krds-radius-max);
    position: absolute;
}
.pull_search_wrap{ position: relative; margin-bottom: 2rem;}
.pull_search_wrap > div + div{ margin-top: 1rem;}
.pull_search_wrap .btn_pull_search{ position: absolute; bottom: 0; right: 0; width: 7rem;}


.pull_su_form_group{ margin-left: 1rem; display: flex; flex-wrap: wrap; gap: 1rem;}
.pull_su_form_group .pull_form_unit{ width: calc(50% - 2rem); display: flex; justify-content: space-between;}
.pull_su_form_group .pull_form_unit:nth-child(even){ margin-left: 2rem;}
.pull_su_form_group input{ height: 3rem !important; width: 10rem !important;}

.pull_su_form_warp.twice{ gap: 3rem;}
.pull_su_form_warp.twice .pull_su_form_group{ flex-direction: column; width: 380px;}
.pull_su_form_warp.twice .pull_su_form_group .pull_form_unit:nth-child(even){ margin-left: 0;}
.pull_su_form_warp.twice .pull_su_form_group .pull_form_unit{ width: 100%;}
.pull_su_form_warp > div > strong{ margin-bottom: 1rem; background-color: #edf1f5; display: block; padding: .5rem 1rem; border-radius: .6rem; text-align: center;}

/* 오염도 분석 : 사전분석 : Step3 분석결과 확인 */
.pollu_step3_top{ padding-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 1rem;}
.btn_analy_item{ height: 4rem; padding: 0 1rem; background-color: #e0e6ed; border-radius: .5rem; font-size: 1.5rem;}
.btn_analy_item.on{ background-color: var(--mma-color-prim); color: #fff;}

.form_set{ display: flex; gap: .8rem;}
.form_unit{ display: inline-flex; align-items: center; gap: 1rem;}
.dtic{ display: inline-flex; align-items: center; justify-content: center;}

.analy_item_info_wrap{ border-top: 1px solid #b1b8be;}
.analy_item_info{ position: relative; border: 1px solid #b1b8be; border-top: none; padding: 2rem; display: none;}

.analy_iteminfo_btn_wrap{ display: flex; justify-content: flex-end;}
.btn_analy_iteminfo_more{ font-size: 1.5rem; height: 4rem; border-radius: 0 0 .5rem .5rem; background-color: #e0e6ed; padding: 0 2rem; display: flex; align-items: center; gap: .8rem;}
.btn_analy_iteminfo_more::after{
    content: "";
	display: inline-flex;
    width: 16px;
    height: 16px;
    background: url("../images/icon/ico_angle.svg") no-repeat center;
    background-size: contain;
}
.btn_analy_iteminfo_more.on::after{ transform: rotate(180deg);}

.analy_season_info{ margin-top: 1rem; display: none;}

.pollu_step3_btn_wrap{ margin-top: 2rem; display: flex; justify-content: space-between;}

.pollu_con_tit{ font-size: 1.7rem; font-weight: 600; color: var(--mma-color-prim);}
.pollu_graph_area{ height: 38rem;}

.sysinfo_step_cont .g-tit{ margin-top: 3rem;}

.mt_txt{ color: #999;}
.mt_txt.on{ color: var(--text-color);}

.pollu_step5_map{ position: relative; height: 50rem; border-radius: 1rem; overflow: hidden;}

.rainfall_more_wrap{ margin-top: 1rem;}
.rainfall_more_wrap .tbl{ width: 100%;}

/********************** 운영안내 : 비점오염원 : 소개 **********************/
.nonp_intro_visual{ background-color: #f4f5fa; border-radius: var(--mma-radius-md); padding: 3rem; margin-bottom: 5rem;}

.nonp_intro_visual .tit{ font-size: 3.2rem; text-align: center; margin-top: 2rem;}
.nonp_intro_visual .tit .mpc{ color: var(--mma-text-prim);}
.nonp_intro_visual .niv_img{ text-align: center;}

.nonp_intro_list{ margin-top: 3rem; display: flex; gap: 1rem;}
.nonp_intro_list li{ flex: 1; display: flex; flex-direction: column; gap: 1rem;}
.nonp_intro_list li .nil_top{ display: flex; flex-direction: column; gap: 1rem; justify-content: center; align-items: center;}
.nonp_intro_list li .nil_top .nil_num{ width: 3rem; height: 3rem; border-radius: 3rem; border: 2px solid #fff; font-size: 1.5rem; font-weight: 600; color: #fff; background-color: #0c398a; display: inline-flex; justify-content: center; align-items: center;}
.nonp_intro_list li .nil_top .nil_tit{ font-size: 1.5rem; font-weight: 600; letter-spacing: -.6px;}

.nonp_intro_list li .nil_body{ flex: 1; font-size: 1.5rem; background-color: #e6e9f8; border-radius: var(--mma-radius-md); padding: 1rem; text-align: center;}

@media (max-width: 1023px) {
    .nonp_intro_visual{ padding: 2rem;}
    .nonp_intro_visual .tit{ font-size: 2.4rem;}

	.nonp_intro_list{ flex-direction: column; gap: 2rem;}
}

.info_list_tit{}

.nonpoint_poll_type{}
.nonpoint_poll_type > li{ position: relative; border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md); padding: 3rem; display: flex; flex-direction: column; gap: 1rem;}
.nonpoint_poll_type > li:not(:first-child){ margin-top: 1rem;}

.nonpoint_poll_type li .nop_top .nop_icon{ flex-shrink: 0; position: absolute; left: 3rem; top: 3rem;}
.nonpoint_poll_type li .nop_top .nop_icon img{ width: 8rem;}
.nonpoint_poll_type li .nop_top .info_list_tit{ font-size: 1.9rem; font-weight: 600; margin-left: 10rem;}
.nonpoint_poll_type li .nop_top .info_list_tit em{ font-size: 1.5rem; color: #58616a;}

.nonpoint_poll_type li .nop_body{ display: flex; flex-direction: column; margin-left: 10rem;}

@media (max-width: 768px) {
    .nonpoint_poll_type > li{ padding: 2rem; flex-direction: column; gap: 2rem;}
    .nonpoint_poll_type li .nop_top{ display: flex; align-items: center; gap: 1rem;}
    .nonpoint_poll_type li .nop_top .info_list_tit{ margin-left: 0;}
    .nonpoint_poll_type li .nop_top .info_list_tit em{ display: block;}
    .nonpoint_poll_type li .nop_body{ margin-left: 0;}
    .nonpoint_poll_type li .nop_top .nop_icon{ position: relative; left: auto; top: auto;}
}

.nop_webtoon{ border-radius: var(--mma-radius-md); border: 1px solid var(--mma-line-color); padding: 5rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 5rem;}
.nop_webtoon img{ max-width: fit-content;}

@media (min-width: 679px) and (max-width: 1600px){
  .nop_webtoon img{ max-width: 100%;}
}

@media (max-width: 768px) {
    .nop_webtoon img{ max-width: 100%;}
}

.nop_character{ width: 100%; padding: 3rem; border-radius: var(--mma-radius-md); border: 1px solid var(--mma-line-color); display: flex;}

.nop_character.info{ gap: 4rem;}
.nop_character.ch_pr{ justify-content: center; align-items: center; padding: 5rem;}

.nop_character .nop_char_img{ flex: 1; display: flex; align-items: center; justify-content: center;}
.nop_character .nop_char_down_wrap{ width: 48rem; display: flex; flex-direction: column; gap: 2rem;}

.nop_char_info{ background-color: var(--mma-bg-02); border-radius: var(--mma-radius-sm); padding: 5rem 3rem;}

.nop_char_info > li{ display: flex; gap: 1.6rem;}
.nop_char_info > li:not(:first-child){ margin-top: 2rem;}
.nop_char_info > li > span{ width: 7rem; height: 3rem; border-radius: 3rem; background-color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.nop_char_info > li > div{ padding-top: .4rem;}

.nop_ch_color span{ width: 2.5rem; height: 2.5rem; border-radius: 100%; display: inline-flex;}
.nop_ch_color span:nth-child(1){ background:#acdbf7;}
.nop_ch_color span:nth-child(2){ background:#0071d0;}
.nop_ch_color span:nth-child(3){ background:#f3ac00;}
.nop_ch_color span:nth-child(4){ background:#00a776;}
.nop_ch_color span:nth-child(5){ background:#ff717d;}
.nop_ch_color span:nth-child(6){ background:#bf191a;}
.nop_ch_color span:nth-child(7){ background:#6d6e72;}
.nop_ch_color span:nth-child(8){ background:#ed1b24;}

@media (max-width: 768px) {
    .nop_character{ padding: 2rem;}
	.nop_character.info{ flex-direction: column;}
    .nop_character.ch_pr{ padding: 3rem 2rem;}
    .nop_character .nop_char_down_wrap{ width: 100%;}
    .nop_char_info{ padding: 3rem 2rem;}
    .nop_char_info > li{ flex-direction: column; gap: 1rem;}
}

.nop_sim_info{ background-color: var(--mma-bg-02); border-radius: var(--mma-radius-sm); padding: 5rem 3rem;}

.nop_sim_info > li{ display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem;}
.nop_sim_info > li:not(:first-child){ margin-top: 4rem;}
.nop_sim_info > li > span{ padding: 0 1.2rem; height: 3rem; border-radius: 3rem; background-color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 1rem;}
.nop_sim_info > li > span em{ font-size: 1.5rem; color: #58616a;}
.nop_sim_info > li > div{ padding-top: .4rem;}


.nop_sim_color{ margin-left: 1.6rem;}
.nop_sim_color li{ display: flex; gap: 1rem;}
.nop_sim_color li span{ flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 100%; display: inline-flex;}
.nop_sim_color li:nth-child(1) span{ background:#6596d0;}
.nop_sim_color li:nth-child(2) span{ background:#8cc542;}
.nop_sim_color li:nth-child(3) span{ background:#22c0f0;}
.nop_sim_color li:nth-child(4) span{ background:#fcb913;}
.nop_sim_color li:nth-child(5) span{ background:#fff;}
.nop_sim_color li:nth-child(6) span{ background:#000;}

.nop_sim_color.sub li:nth-child(1) span{ background:#bcbec0;}
.nop_sim_color.sub li:nth-child(2) span{ background:#ac893b;}

.nop_sim_color.row{ display: flex; gap: 1rem; margin-left: 0;}
.nop_sim_color.col{ display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 3rem; grid-row-gap: 1rem;}

.nop_character.jak{ padding: 5rem 3rem; gap: 5rem; justify-content: center; align-items: flex-end;}
.nop_character.jak.type2{ gap: 13rem;}

@media (min-width: 679px) and (max-width: 1600px){
  .nop_character.jak{  flex-direction: column; align-items: center;}
}

@media (max-width: 768px) {
    .nop_character.jak{ padding: 3rem 2rem; flex-direction: column; align-items: center;}
    .nop_sim_color.col{ margin-left: 0; grid-template-columns: 1fr;}
    .nop_sim_info{ padding: 3rem 2rem;}
    .nop_character.jak.type2{ gap: 5rem;}
}

.page_info_box{ border-radius: var(--mma-radius-md); background-color: #f8f8f8;}
.page_info_box_desc{ font-weight: 600;}

.page_info_box.info{ padding: 4rem 4rem 4rem 16rem;
    background-image: url("../images/sub/page_info_icon_noti.png");
    background-repeat: no-repeat;
    background-position: left 3.6rem center;
    background-size: 6.6rem 7.6rem;
}

@media (max-width: 768px) {
    .page_info_box.info{
        padding: 15rem 2rem 2rem 2rem;
        background-position: top 3rem center;
    }
}

.con-tit.nop_tit{ display: flex; gap: 1rem;}
.con-tit.nop_tit::before{ content: ""; width: 2.8rem; height: 2.6rem; background: url("../images/sub/nop_tit.png") no-repeat; display: inline-flex; background-size: 2.8rem 2.6rem;}

.nop_active_tip{ display: flex; gap: .8rem; flex-wrap: wrap;}
.nop_active_tip img{ height: 12.2rem; width: auto; border-radius: var(--mma-radius-sm);}

@media (max-width: 768px) {
    .nop_active_tip{ display: grid; grid-template-columns: 1fr 1fr;}
    .nop_active_tip img{ height: auto;}
}

/********************** 운영안내 : 비점오염원 : 관리방안 **********************/
.nonps_info_list{ display: flex; flex-wrap: wrap; gap: 1.6rem;}
.nonps_info_list > li{ flex: 1 1 calc(50% - .8rem); border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md); padding: 0 1rem 1rem 1rem; display: flex; flex-direction: column;}

.nonps_info_list li .nonps_top{ min-height: 14rem; padding: 0 2rem; display: flex; align-items: center; gap: 2rem;}
.nonps_info_list li .nonps_top .nonps_icon{ flex-shrink: 0;}
.nonps_info_list li .nonps_top .nonps_icon img{ width: 8.4rem;}
.nonps_info_list li .nonps_top .nonps_tit{ font-size: 2.1rem; font-weight: 600;}

.nonps_info_list li .nonps_body{ flex: 1; background-color: var(--mma-bg-03); border-radius: var(--mma-radius-md); padding: 2rem;}

.nonps_info_list li .nonps_body .nonps_body_inner{ padding: 0 2.5rem; margin-top: 2rem;}
.nonps_img_box{ background-color: #fff; border-radius: var(--mma-radius-sm); padding: 3rem; text-align: center;}

.nonps_body_inner .krds-info-list{ margin-top: 2rem;}

@media (max-width: 768px) {
    .nonps_info_list > li{ flex: 1 1 100%;}
    .nonps_info_list li .nonps_top{ padding: 0;}
    .nonps_info_list li .nonps_top .nonps_icon img{ width: 6rem;}
    .nonps_info_list li .nonps_top .nonps_tit{ font-size: 1.7rem;}
    .nonps_info_list li .nonps_body .nonps_body_inner{ padding: 0;}
}

.platform_vision_list.nonp_vision li:nth-child(1) .pv_left .pv_cion{ background-color: #0a3273; background-image: url("../images/sub/nv_icon01.png"); background-size: 2.8rem auto;}
.platform_vision_list.nonp_vision li:nth-child(2) .pv_left .pv_cion{ background-color: #0e55ad; background-image: url("../images/sub/nv_icon02.png"); background-size: 2.4rem auto;}
.platform_vision_list.nonp_vision li:nth-child(3) .pv_left .pv_cion{ background-color: #1878de; background-image: url("../images/sub/nv_icon03.png"); background-size: 2.4rem auto;}

.nonp_text_list{ width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1.6rem;}
.nonp_text_list li{ min-height: 24rem; padding: 3rem; border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md);}
.nonp_text_list li strong{ height: 3.4rem; border-radius: 3.4rem; padding: 0 2rem; background-color: #ebf3fd; display: inline-flex; justify-content: center; align-items: center; gap: .6rem;}
.nonp_text_list li strong span{ color: var(--mma-text-prim);}
.nonp_text_list li p{ margin-top: 2rem;}

@media (max-width: 768px) {
    .nonp_text_list{ grid-template-columns: 1fr;}
    .nonp_text_list li{ min-height: auto;}
}

.icon_text_list{ position: relative; padding: 3rem 0; border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md); display: grid;}
.icon_text_list li{ padding: 1rem; display: flex; flex-direction: column; gap: 2rem; align-items: center;}
.icon_text_list li:not(:first-child){ border-left: 1px solid var(--mma-line-color);}
.icon_text_list li .cot_tit{ font-size: 1.9rem;}
.icon_text_list li .cot_icon{
    width: 6rem; height: 6rem; border-radius: 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-flex; align-items: center; justify-content: center;
}

.icon_text_list li .cot_desc{ text-align: center; font-size: 1.5rem;}

@media (max-width: 768px) {
    .icon_text_list{ padding: 0 3rem;}
    .icon_text_list li{ padding: 3rem 0;}
}

.icon_text_list li:nth-child(1) .cot_icon{ background-color: #0a3273;}
.icon_text_list li:nth-child(2) .cot_icon{ background-color: #0e55ad;}
.icon_text_list li:nth-child(3) .cot_icon{ background-color: #1878de;}
.icon_text_list li:nth-child(4) .cot_icon{ background-color: #1f93ea;}
.icon_text_list li:nth-child(5) .cot_icon{ background-color: #27b6df;}
.icon_text_list li:nth-child(6) .cot_icon{ background-color: #1878de;}

.icon_text_list.type1{ grid-template-columns: repeat(4, 1fr);}


@media (max-width: 768px) {
    .icon_text_list.type1{ grid-template-columns: 1fr;}
    .icon_text_list.type1 li:not(:first-child){ border-left:none; border-top: 1px solid var(--mma-line-color);}
}

.icon_text_list.type1 li:nth-child(1) .cot_icon{ background-image: url("../images/sub/nonb_icon01_01.png"); background-size: 2.5rem auto;}
.icon_text_list.type1 li:nth-child(2) .cot_icon{ background-image: url("../images/sub/nonb_icon01_02.png"); background-size: 3.5rem auto;}
.icon_text_list.type1 li:nth-child(3) .cot_icon{ background-image: url("../images/sub/nonb_icon01_03.png"); background-size: 2rem auto;}
.icon_text_list.type1 li:nth-child(4) .cot_icon{ background-image: url("../images/sub/nonb_icon01_04.png"); background-size: 3.5rem auto;}

.icon_text_list.type2{
    padding: 1rem 3rem;
    grid-template-columns: repeat(6, 1fr);
}
.icon_text_list.type2::before{ content: ""; width: calc(100% - 6rem); height: 1px; background-color: var(--mma-line-color); position: absolute; top: 50%; left: 3rem;}

.icon_text_list.type2 li{ margin: 2rem 0;}
.icon_text_list.type2 li:nth-child(4){ border-left: none;}

.icon_text_list.type2 li{ grid-column: span 2;}
.icon_text_list.type2 li:nth-child(4),
.icon_text_list.type2 li:nth-child(5) {
  grid-column: span 3; /* 50% 너비 (2분할) */
}

@media (max-width: 768px) {
    .icon_text_list.type2{ grid-template-columns: 1fr;}
    .icon_text_list.type2 li{ margin: 0;}
    .icon_text_list.type2::before{ display: none;}
    .icon_text_list.type2 li:not(:first-child){ border-left:none; border-top: 1px solid var(--mma-line-color);}
}

.icon_text_list.type2 li:nth-child(1) .cot_icon{ background-image: url("../images/sub/nonb_icon02_01.png"); background-size: 3.3rem auto;}
.icon_text_list.type2 li:nth-child(2) .cot_icon{ background-image: url("../images/sub/nonb_icon02_02.png"); background-size: 3.4rem auto;}
.icon_text_list.type2 li:nth-child(3) .cot_icon{ background-image: url("../images/sub/nonb_icon02_03.png"); background-size: 2.7rem auto;}
.icon_text_list.type2 li:nth-child(4) .cot_icon{ background-image: url("../images/sub/nonb_icon02_04.png"); background-size: 3.2rem auto;}
.icon_text_list.type2 li:nth-child(5) .cot_icon{ background-image: url("../images/sub/nonb_icon02_05.png"); background-size: 3.2rem auto;}

.icon_text_list.type3{
    padding: 1rem 0;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.icon_text_list.type3::before{ content: ""; width: calc(100% - 6rem); height: 1px; background-color: var(--mma-line-color); position: absolute; top: 50%; left: 3rem;}

.icon_text_list.type3 li{ margin: 2rem 0;}
.icon_text_list.type3 li:nth-child(4){ border-left: none;}

@media (max-width: 768px) {
    .icon_text_list.type3{ grid-template-columns: 1fr;}
    .icon_text_list.type3 li{ margin: 0;}
    .icon_text_list.type3::before{ display: none;}
    .icon_text_list.type3 li:not(:first-child){ border-left:none; border-top: 1px solid var(--mma-line-color);}
}

.icon_text_list.type3 li:nth-child(1) .cot_icon{ background-image: url("../images/sub/nonb_icon03_01.png"); background-size: 3.3rem auto;}
.icon_text_list.type3 li:nth-child(2) .cot_icon{ background-image: url("../images/sub/nonb_icon03_02.png"); background-size: 3.3rem auto;}
.icon_text_list.type3 li:nth-child(3) .cot_icon{ background-image: url("../images/sub/nonb_icon03_03.png"); background-size: 2rem auto;}
.icon_text_list.type3 li:nth-child(4) .cot_icon{ background-image: url("../images/sub/nonb_icon03_04.png"); background-size: 2.7rem auto;}
.icon_text_list.type3 li:nth-child(5) .cot_icon{ background-image: url("../images/sub/nonb_icon03_05.png"); background-size: 3.2rem auto;}
.icon_text_list.type3 li:nth-child(6) .cot_icon{ background-image: url("../images/sub/nonb_icon03_06.png"); background-size: 3.2rem auto;}


.con-tit .sm_num{ margin-right: 1rem; width: 3rem; height: 3rem; border-radius: 3rem; font-size: 1.5rem; font-weight: 600; color: #fff; background-color: var(--mma-color-prim); display: inline-flex; justify-content: center; align-items: center;}

.gv_site_link{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 2rem;}
.gv_site_link li{ }
.gv_site_link li a{ border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md); height: 5rem; display: flex; justify-content: center; align-items: center; gap: .6rem;}
.gv_site_link li a:hover{ text-decoration: underline; background-color: #eef2f7;}

.gv_site_link li a::after{
	content: "";
	display: inline-flex;
    width: 2.2rem;
    height: 2.2rem;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_go.svg");
    mask-image: url("../images/icon/ico_go.svg");	
	background-color: #1e2124;
    mask-size: 2.2rem;
}

@media (max-width: 768px) {
    .gv_site_link{ grid-template-columns: 1fr;}
}

/********************** 운영안내 : 비점오염원 : 설치신고제도 **********************/
.nonpint_webtoon_link{
    position: relative;
    background-color: #256ef4;
    background-repeat: no-repeat;
    background-image: 
        url("../images/sub/nonc_link_bg01.png"),
        url("../images/sub/nonc_link_bg02.png"),
        url("../images/sub/nonc_link_bg03.png");
    background-size: 19.3rem auto, 8.5rem auto, auto 7.8rem;
    background-position: top 2rem left 3rem, bottom 0 right -.4rem, top 3rem right 2rem;
    height: 16.2rem; border-radius: var(--mma-radius-md);
    display: flex; justify-content: center; align-items: center; flex-direction: column;
}

.nonpint_webtoon_link .nonp_wt_tit{ color: #fcd937; font-family: 'Gmarket Sans'; font-size: 3.6rem; font-weight: 700;}
.nonpint_webtoon_link .nonp_wt_tit span{ color: #fff;}
.nonpint_webtoon_link .nonp_wt_desc{ color: #fff;}

.btn_nopc_webtton{ background-color: #fff !important; color: #1e2124; position: absolute; right: 4rem; top: 50%; transform: translateY(-50%); border: none;}
.btn_nopc_webtton:hover{ background-color: #fff;}
.btn_nopc_webtton i{ background-color: #1e2124 !important;}

@media (max-width: 768px) {
    .nonpint_webtoon_link{
        height: auto; padding: 5rem 3rem;
        background-position: bottom -8rem left -2rem, bottom 0 right -.4rem, top 1rem left 2rem;
        background-size: 14rem auto, auto, auto;
        gap: 2rem;
    }
    .nonpint_webtoon_link .nonp_wt_tit{ text-align: center; font-size: 3.8rem;}
    .nonpint_webtoon_link .nonp_wt_desc{ text-align: center;}
    .btn_nopc_webtton{ position: relative; right: auto; top: auto; transform: translateY(0);}
}

/* 비점오염원 설치 신고 웹툰 팝업 */
.nonp_re_webtton_wrap{ display: flex; flex-direction: column; padding: 2rem;}

.nonp_report_wrap{}
.nonp_report_wrap > li:not(:first-child){ margin-top: 1rem;}

.nonp_report_item{ border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md); padding: 3rem;}
.nonp_report_item .nonp_rep_top{ margin-bottom: 2rem; display: flex; justify-content: space-between;}
.nonp_report_item .nonp_rep_top .nonp_rep_tit{ font-size: 1.9rem; display: inline-flex; align-items: center; gap: 1.2rem;}
.nonp_report_item .nonp_rep_top .nonp_rep_tit::before{ content: "Q"; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 100%; font-size: 1.7rem; font-weight: 600; color: #fff; background-color: var(--mma-color-prim); display: inline-flex; justify-content: center; align-items: center;}
.nonp_report_item .nonp_rep_top .nonp_rep_info{ font-size: 1.5rem; color: #58616a;}

.nonp_report_item .nonp_rep_body{ border-top: 1px solid var(--mma-line-color); padding-top: 2rem;}

.nonp_report_item .nonp_rep_foot{ margin-top: 2.5rem; display: flex; justify-content: flex-end; gap: 1rem;}

.nonp_rep_list{}
.nonp_rep_list > li{ display: flex; gap: 2rem;}
.nonp_rep_list > li:not(:first-child){ margin-top: 1rem;}
.nonp_rep_list li .nonpre_tit{ flex-shrink: 0; background-color: #eef2f7; font-weight: normal; width: 9.4rem; height: 3.6rem; border-radius: 3.6rem; display: inline-flex; align-items: center; justify-content: center;}
.nonp_rep_list li .nonpre_body{ margin-top: .6rem;}
.nonp_rep_list .krds-info-list{ gap: .4rem;}

@media (max-width: 768px) {
    .nonp_report_item .nonp_rep_top{ flex-direction: column; gap: .8rem;}
    
    .nonp_rep_list > li{ flex-direction: column; gap: 1rem;}
    .nonp_rep_list > li:not(:first-child){ margin-top: 2rem;}

    .nonp_report_item .nonp_rep_foot{ flex-direction: column;}
}


/*********************** 데이터 활용 : 활용툴공개 : KRF  ***********************/
.krf_box_desc{ background-color: #eef2f7; font-size: 1.5rem; height: 3rem; border-radius: 3rem; padding: 0 1.8rem; display: inline-flex; align-items: center; position: absolute; left: 2rem; top: 2rem;}

@media (max-width: 768px) {
	.krf_box_desc{ position: relative; left: auto; top: auto; margin-bottom: 2rem; width: 100%; justify-content: center;}
}

/* 물환경지리정보 : KRF : 리치파일 */
.krf_map_box{ border: 1px solid #cdd1d5; background-color: #fafafa; border-radius: 1rem; padding: 3rem; width: 100%;}
.krf_map_desc{ background-color: #eef2f7; font-size: 1.5rem; height: 3rem; border-radius: 3rem; padding: 0 1.8rem; display: inline-flex; align-items: center;}
.krf_down_wrap{ display: flex;}

.rich_file_map {position:relative; /* width:600px; */ height:456px;}
.rich_file_map .top_tool {padding:15px 0 0 20px;width:600px;position:relative;}
.rich_file_map .top_tool img {margin:0 10px}
.rich_file_map .top_tool a.rich_file_btn {position:absolute;top:20px;right:20px}
.rich_file_map .bottom_map {width:200px;position:absolute;top:40px;left:0px}
.rich_file_map .bottom_map img {outline:none}
.rich_file_map .bottom_map_right { }
.rich_file_map .bottom_map_right div {display:none}
.rich_file_map .bottom_map_right .bg01_l{padding: 30px 0px 0px 150px; display: none;}
.rich_file_map .bottom_map_right .bg02_l{padding: 10px 0px 0px 200px; display: none;}
.rich_file_map .bottom_map_right .bg03_l{padding: 10px 0px 0px 240px; display: block;}
.rich_file_map .bottom_map_right .bg04_l{padding: 10px 0px 0px 240px; display: none;}

.rich_file_map .bottom_map_right area:focus{}

.krf_down_option{ padding-left: 3rem; flex: 1; height:456px; display: flex; flex-direction: column; justify-content: center; gap: 2rem;}

.river_sel{ margin:20px auto; width:400px; padding:15px 30px; border-radius:8px; overflow:hidden; background:#fff; border-radius:8px;}
.river_sel dl{}
.river_sel dl dd,
.river_sel dl dt{ float:left;}
.river_sel dl dt{ width:20%;}
.river_sel dl dd{ width:80%;  vertical-align:middle; margin-bottom:10px;}
.river_sel dl dd:nth-child(2){ }
.river_sel dl select{ width:100%;}

.krf_down_sarch{ margin-top: 2rem;}
.krf_down_sarch .search-top-box{}
.nomal_bg{ background: #eef2f7 !important;}


@media (max-width: 768px) {
    .krf_map_box{ padding: 1rem;}
	.krf_down_wrap{  flex-direction: column;}
    .rich_file_map{ width: 100%; display: flex; flex-direction: column; height: auto;}
    .rich_file_map .bottom_map{ width: 100%;position:relative; top: auto; left: auto; text-align: center;}
    .rich_file_map .bottom_map_right > div{ padding: 0 !important; width: 100%; text-align: center; overflow: auto;}
    
    .krf_down_option{ flex: auto; padding-left: 0; height: auto;}
}

.krf_down_desc{ position: relative; text-align: right; margin-bottom: 1rem;}
.krf_down_desc::before{ content: ""; background: url("../images/sub/krf_desc_icon.png") no-repeat; width: 5rem; height: 5rem; display: inline-flex; position: absolute; right: 0; top: -6rem;}
.krf_down_desc span{ color: var(--mma-color-prim);}

.krf_down_form{ display: flex; flex-direction: column; gap: 1rem;}
.krf_form_group{ display: flex; align-items: center; gap: 1rem;}
.krf_form_group label{ font-size: 1.7rem; font-weight: 600;}

.krf_down_btn_wrap .krds-btn{ min-width: 30rem;}

.krf_map_box_btn_wrap{ margin-top: 2rem; display: flex; justify-content: flex-end; gap: 1rem;}

@media (max-width: 768px) {
    .krf_down_form{ gap: 2rem;}
    .krf_form_group{ flex-direction: column; align-items: flex-start;}

    .krf_down_desc{ margin-top: 8rem; text-align: left;}
    .krf_down_desc::before{ right: auto; left: 0; display: none;}

    .krf_map_box_btn_wrap{ flex-direction: column;}
}

/* NEW 물환경지리정보 : KRF : 리치파일 */
.krfmap_ver_down_wrap{ margin-top: 2rem;}
.krfdown_map_box{ position: relative; padding: 3rem; border-radius: var(--mma-radius-md); border: 1px solid var(--mma-line-color); display: flex; justify-content: space-between;}

.krf_down_map{ position: relative;}
.krf_down_map .krf_box_desc{ left: 0; top: 0;}

.krf_down_map.left{ padding: 5rem 0 0 4.2rem;}

.krf_down_map.left::before{}

.krf_down_map.right{ padding: 0 0 0 2.5rem;}
.krf_down_map.right > div {display:none}
.krf_down_map.right .bg01_l{ display: none;}
.krf_down_map.right .bg02_l{ display: none;}
.krf_down_map.right .bg03_l{ display: block;}
.krf_down_map.right .bg04_l{ display: none;}


.krfmap_arrow{ width: 4.4rem; height: 4.4rem; border-radius: 100%; background-color: #eef2f7; position: absolute; left: 44%; top: 50%; transform: translateY(-50%); display: inline-flex; justify-content: center; align-items: center;}
.krfmap_arrow::before{
    content: "";
	display: inline-flex;
    width: 22px;
    height: 22px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	transform: rotate(-90deg);
    background-color: #000;
}

@media (max-width: 768px) {
    .krfdown_map_box{ flex-direction: column; padding: 1rem;}
    .krfmap_arrow{ display: none;}
    .krf_down_map.left,
    .krf_down_map.right{ width: 100%; text-align: center; padding: 2rem 0;}
}

/*######################3 참여마당 : 녹조 시민 감시단 : 사용자 인증 start ########################### */
.algae_sns_auth_wrap{ height: 59rem; padding: 2rem; border: 1px solid #d6e0eb; background-color: #f5f8fc; border-radius: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center;}

.algae_sns_auth_wrap .asa_tit{ margin-bottom: 4rem; font-size: 2.5rem; font-weight: 700; color: #1e2124; display: inline-flex; flex-direction: column; align-items: center;}
.algae_sns_auth_wrap .asa_tit::before{ content: ""; width: 11.7rem; height: 10.2rem; background: url("../images/al_report/algae_sns.png") no-repeat; display: inline-flex;}

.btn_asa_auth{ width: 34rem; height: 7rem; border-radius: 1rem; font-size: 2.1rem; font-weight: 600; color: #fff; background-color: var(--main-color); display: inline-flex; align-items: center; justify-content: center;}

.asa_desc{ margin-top: 3.5rem; color: #1e2124; font-size: 1.7rem; text-align: center;}

@media (max-width: 768px) {
	.btn_asa_auth{ width: 100%;}
}

.algae_user_auth_wrap{ border: 1px solid #c6c6c6; border-radius: 1rem; padding: 4rem;}

@media (max-width: 768px) {
	.algae_user_auth_wrap{ padding: 2rem;}
}

.aua_box_sec{
	display: flex;
    align-items: normal;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1.2rem;
}

.aua_box_sec .box_tit2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    position: relative;
    gap: 0.8rem;
    font-size: 2.1rem;
    font-weight: 700;
}

.aua_box_sec .box_tit3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    position: relative;
    gap: 0.8rem;
    font-size: 1.9rem;
    font-weight: 700;
	margin-left: 1rem;
	margin-top: 2rem;
}

.box_tit2 + .box_tit3{ margin-top: 0;}

.aua_box_sec:not(:first-child){ margin-top: 4rem;}

.aua_desc_wrap{ border: 1px solid #d6e0eb; background-color: #eef2f7; border-radius: 1rem; padding: 2rem;}

.aua_add_search_wrap{ margin-top: 1.5rem;}
.aua_add_search_wrap .add_area{ display: flex; gap: .8rem; flex-wrap: wrap;}
.aua_add_search_wrap .add_area .add1,
.aua_add_search_wrap .add_area .add2{ width: calc(50% - .4rem);}
.aua_add_search_wrap .add_area .add3{}

@media (max-width: 768px) {
	.aua_add_search_wrap .add_area .add1,
	.aua_add_search_wrap .add_area .add2{ width: 100%;}
}

.aua_map_search_warp{ margin-top: 2rem; background-color: #f4f5f6; border-radius: 1rem; padding: 2rem;}
.aua_map_search{ display: flex; gap: .8rem;}
.aua_map_search .btn{ flex-shrink: 0;}

@media (max-width: 768px) {
	.aua_map_search_warp{ width: 100%;}
	.aua_map_search{ flex-direction: column;}
}

.aua_desc{ font-size: 1.5rem; color: #555;}

.aua_map_search_warp .aua_desc{ margin-top: 1.2rem;}

/* 지도 */
.auq_map_area{ margin-top: 1.2rem; position: relative; height: 40rem; border-radius: 1rem; overflow: hidden; background-color: #8bb3cc;}

.aua_map_zoom{ background: #fff; border-radius: 5px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); overflow: hidden; position: absolute; top: 1.2rem; left: 1.2rem; z-index: 9;}
.aua_map_zoom li{ position: relative;}
.aua_map_zoom li:not(:first-child){ border-top: 1px solid #ced4da;}
.aua_map_zoom .zoom{ position: relative; display: inline-flex; width: 4.5rem; min-height: 4.4rem;}
.aua_map_zoom .zoom::before,
.aua_map_zoom .zoom::after{ content: ""; position: absolute; width: 1.2rem; height: .2rem; background-color: #343a40; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.aua_map_zoom .zoom.in::after{ transform: translate(-50%, -50%) rotate(90deg);}

.aua_map_zoom .zoom.on,
.aua_map_zoom .zoom:hover{ background-color: #246beb;}

.aua_map_zoom .zoom.on::before,
.aua_map_zoom .zoom.on::after,
.aua_map_zoom .zoom:hover::before,
.aua_map_zoom .zoom:hover::after{ background-color: #fff;}

.aua_map_coordin{ height: 3rem; width: calc(100% - 2.4rem); font-size: 1.3rem; color: #555; padding: 0 1.2rem; background-color: rgba(255, 255, 255, .7); opacity: 1; border-radius: .5rem; display: flex; align-items: center; position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 9;}
.aua_map_coordin span:first-child{ width: 12rem;}

.map_pinter_tooltip{ font-size: 1.3rem; background-color: #fff; border: 1px solid #246beb; border-radius: .5rem; padding: .3rem 1.2rem; box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2); white-space: nowrap; position: absolute; z-index: 9;}

.aua_q_list{ margin-left: 1rem;}
.aua_q_list > li{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    gap: .4rem;
    padding-left: 5rem;
    padding-bottom: 2rem;
}
.aua_q_list > li:not(:last-child):before{
    position: absolute;
    top: 0;
    left: calc(.8rem + 2.4rem / 2);
    content: "";
    width: 1px;
    height: 100%;
    background-color: #d6e0eb;
}
.aua_q_list > li:last-child{ padding-bottom: 0;}

.aua_q_list .num{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    position: absolute;
    top: 0;
    left: 0.8rem;
    width: 2.4rem;
    height: 2.4rem;
    z-index: 2;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background-color: #063a74;
    border-radius: .4rem;
}

.qua_num{
    display: inline-flex;
    align-items: center;
    justify-content: center;        
    width: 2.4rem;
    height: 2.4rem;
    z-index: 2;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background-color: #063a74;
    border-radius: .4rem;
}

.aua_q_list .aq_tit{ color: #063a74; font-weight: 700;}

.aua_chk_list{ margin-top: .8rem;}
.aua_chk_list li:not(:first-child){ margin-top: .6rem;}

.aua_q_etc{ margin-top: .8rem; position: relative; width: 100%;}
.qua_a_text_count{ color: #063a74; position: absolute; right: 0; top: -3.6rem;}

@media (max-width: 768px) {
	.aua_q_list > li{ padding-left: 4rem;}
	.aua_chk_list{ margin-left: 0;}
	.aua_box_sec .box_tit3{ margin-left: 0;}
	.aua_q_list{ margin-left: 0;}
    .aua_chk_list li:not(:first-child){ margin-top: 1rem;}
	
}

.aua_file_up_wrap{ margin: 1rem 0 3rem 1rem;}
.aua_file_up_wrap > li{ }
.aua_file_up_wrap > li > p{ position: relative; padding-left: 1.6rem;}
.aua_file_up_wrap > li > p::before{ content: "•"; position: absolute; top: 0; left: 0;}
.aua_file_up_wrap li:not(:first-child){ margin-top: 2rem;}
.aua_file_up_wrap li p{ }
.aua_file_up_wrap li .formUnit{ margin-left: 2rem; margin-top: .8rem;}

.aua_btn_wrap{ margin-top: 2rem; display: flex; justify-content: flex-end; gap: .8rem;}

@media (max-width: 768px) {
	.aua_file_up_wrap{ margin: 1rem 0 3rem 0;}
	.btn_file_del{ flex-shrink: 0;}
	.aua_file_up_wrap li .formUnit{ margin-left: 0;}
}

.aua_user_list{ position: relative; display: flex; gap: .8rem; align-items: center;}
.aua_user_list .form_sel{ width: 20rem; margin-left: 2rem;}

.aua_user_list .form_inp{ width: 20rem;}

@media (max-width: 768px) {
    .aua_user_list{ flex-direction: column; align-items: flex-start;}
    .aua_user_list .form_sel{ margin-left: 0;}
    .aua_user_list button{ position: absolute; left: 21rem; bottom: 0;}
}

.btn_my_location{
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: absolute;
    bottom: 52px;
    right: 12px;
    z-index: 9;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
}
.btn_my_location::before{
	content: "";
	display: inline-flex;
    width: 20px;
    height: 20px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/al_report/icon_my_loc.svg");
    mask-image: url("../images/al_report/icon_my_loc.svg");	
	background-color: #343a40;
}
.btn_my_location:hover{ background-color: #246beb;}
.btn_my_location:hover::before{ background-color: #fff;}

.aua_chk_list input[type=checkbox], 
.aua_chk_list input[type=radio] {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* radio checkbox */
.chk_area{ display: inline-flex; gap: 2.8rem;}

.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] ~ label { position: relative; display: inline-flex; min-height: 2rem; padding-left: calc(2rem + 0.4rem); font-size: 1.7rem; line-height: 2rem;}
.form_check input[type=checkbox] ~ label { position: relative; display: inline-flex; min-height: 2rem; padding-left: calc(2rem + 0.8rem); font-size: 1.7rem; line-height: 2rem;}

.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: 2rem; height: 2rem; background-color: #fff; border: 1px solid #717171; border-radius: 100%;}

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

.form_check input[type=radio]:checked ~ label:before { border-color: var(--main-color);}
.form_check input[type=radio]:checked ~ label:after { background-color: var(--main-color);}

.form_check input[type=radio]:disabled ~ label:before { border-color: var(--ce-gray-40); background-color: var(--ce-gray-20);}

.form_check input[type=radio]:disabled + label,
.form_check input[type=checkbox]:disabled + label { color: var(--ce-gray-50); cursor: default;}
.form_check input[type=radio]:checked:disabled ~ label:after { display: block; background-color: var(--ce-gray-40);}
.form_check input[type=radio]:disabled ~ label:after { display: none; background-color: var(--ce-gray-40);}

/* Radio button middle Size */
.form_check.md > [type=radio] ~ label { font-size: 1.5rem; line-height: 1.6rem; min-height: 1.6rem; padding-left: calc(1.6rem + 0.8rem);}
.form_check.md > [type=radio] ~ label::before { width: 1.6rem; height: 1.6rem;}
.form_check.md > [type=radio] ~ label::after { top: calc((1.6rem - 0.8rem) / 2); left: calc((1.6rem - 0.8rem) / 2); width: 0.8rem; height: 0.8rem;}

/* Radio button Large Size */
.form_check.lg > [type=radio] ~ label { font-size: 1.9rem; line-height: 2.4rem; min-height: 2.4rem; padding-left: calc(2.4rem + 0.8rem);}
.form_check.lg > [type=radio] ~ label::before { width: 2.4rem; height: 2.4rem;}
.form_check.lg > [type=radio] ~ label::after { top: calc((2.4rem - 1.4rem) / 2); left: calc((2.4rem - 1.4rem) / 2); width: 1.4rem; height: 1.4rem;}

/* Check Box */
.form_check input[type=checkbox] ~ label:before { position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; 
    background-color: #fff; border: 1px solid var(--ce-gray-60); border-radius: 0.4rem;
}
.form_check input[type=checkbox] ~ label:after {
    position: absolute; top: calc((2rem - 2rem) / 2); left: calc((2rem - 2rem) / 2); 
    width: 2rem; height: 2rem; background: url("../images/al_report/ico_check_checked.svg") no-repeat 0 0; background-size: contain;
    opacity: 0;
}

.form_check input[type=checkbox]:checked ~ label:before { background-color: #246BEB; /* border-color: #246BEB; */}
.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: var(--ce-gray-40); background-color: var(--ce-gray-20);}
.form_check input[type=checkbox]:disabled ~ label:after { background-image: url("../images/al_report/ico_check_disabled.svg");}

/* Check Box : Small Size */
.form_check.sm > [type=checkbox] ~ label { font-size: 1.5rem; line-height: 1.6rem; min-height: 1.6rem; padding-left: calc(1.6rem + 0.8rem);}
.form_check.sm > [type=checkbox] ~ label::before { width: 1.6rem; height: 1.6rem;}
.form_check.sm > [type=checkbox] ~ label::after { width: 1.2rem; height: 1.2rem;}

/* Check Box : Large Size */
.form_check.lg > [type=checkbox] ~ label { font-size: 1.9rem; line-height: 2.4rem; min-height: 2.4rem; padding-left: calc(2.4rem + 0.8rem);}
.form_check.lg > [type=checkbox] ~ label::before { width: 2.4rem; height: 2.4rem;}
.form_check.lg > [type=checkbox] ~ label::after { width: 2rem; height: 2rem;}

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

/* select */
.form_sel { appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.form_sel{ width: 100%; height: 4rem; padding: var(--ce-select-pd-lg);
    background-color: #fff; background-image: url("../images/al_report/arr_common_down.svg"); background-repeat: no-repeat; background-position: center right var(--ce-select-rn-lg); border: 1px solid var(--ce-gray-60); border-radius: var(--ce-select-rd-sm); font-family: inherit; color: var(--ce-gray-90);
    opacity: 1;
}
.form_sel.sm{ height: 3rem; border-radius: 3px;}

.inp_m_chk{ position: relative; width: 100%; height: 4rem; padding: 0 1.7rem; background-color: #fff; border: 1px solid var(--ce-gray-60); border-radius: .6rem; font-family: inherit; color: var(--ce-gray-90); transition: 0.4s ease-in-out;}

.form_inp{ position: relative; width: 100%; height: 4rem; padding: 0 1.7rem; background-color: #fff; border: 1px solid var(--ce-gray-60); border-radius: .6rem; font-family: inherit; color: var(--ce-gray-90); transition: 0.4s ease-in-out;}

.form_inp.sm{ height: 3rem; border-radius: 3px; font-size: 1.5rem;}

.inp_date{ position: relative; width: 100%; height: 4rem; padding: 0 1.7rem; background-color: #fff; border: 1px solid var(--ce-gray-60); border-radius: .6rem; font-family: inherit; color: var(--ce-gray-90); transition: 0.4s ease-in-out;}

.form_textarea{ position: relative; width: 100%; padding: 1rem 1.7rem; background-color: #fff; border: 1px solid var(--ce-gray-60); border-radius: .6rem; font-family: inherit; color: var(--ce-gray-90); transition: 0.4s ease-in-out;}

.form_file::file-selector-button { 
	width: 10rem; 
	height: 4rem; 
	background: #fff; 
	border: 1px solid #717171; 
	border-radius: .5rem; 
	cursor: pointer;
}

.form_file.sm{ font-size: 1.5rem;}
.form_file.sm::file-selector-button{ height: 3.2rem; border-radius: 3px;}

.btn_file_del{ width: 1.8rem; height: 1.8rem; border-radius: 100%; border: 1px solid #555; background: url("../images/icon/ico_delete.svg") no-repeat  left 1px top 1px; background-size: 90%;}

/*######################3 참여마당 : 녹조 시민 감시단 : 사용자 인증 end ########################### */

/* 데이터 제공 목록 */
.data_service_list_wrap{}
.dsl_cont{ display: flex; flex-direction: column; gap: 1rem;}
.dsl_cont.die2{ gap: 3.2rem; flex-direction: row;}
.dsl_cont.die2 > div{ flex: 1;}

.dsl_cont + .dsl_cont{ margin-top: 2rem;}

.te2{ color: #fff;}

.dsl_cont .tbl2 tbody th{ width: 6rem;}

@media (max-width: 768px) {
	.dsl_cont.die2{ flex-direction: column;}
}

/*############################## 내 주변 물정보 ###########################*/

.sub_cont_info{ position: relative;}
.sub_cinfo_tit{ font-size: 4rem; z-index: 2; position: relative; z-index: 2;}
.sub_cinfo_tit .txt1{ line-height: 1.2;}
.sub_cinfo_tit .txt2{ color: var(--mma-text-prim); font-weight: 600;  line-height: 1.2;}
.sub_cont_info{ display: flex; flex-direction: column; gap: 2rem;}
.sub_cinfo_desc{ font-size: 1.9rem; position: relative; z-index: 2;}
.sub01_02 .sub_cinfo_desc p{padding-right: 30rem;}

@media (max-width: 768px) {
	.sub01_02 .sub_cinfo_desc p{ padding-right: 0;}
}

/****** 생활 속 물모아 *******/
.sub_cont_info.sub01_01::before{ content: ""; display: inline-flex;
    width: 54.9rem; height: 26.8rem; position: absolute; right: -1rem; bottom: -8.8rem;
    background: url("../images/sub/sub01_01_info_bg.png") no-repeat;
    background-size: 54.9rem 26.8rem;
}

.life_in_water_card{ position: relative; display: flex; gap: 2rem; z-index: 2;}
.life_in_water_card li{ flex: 1; border-radius: 1rem; padding: 2.4rem 3rem; display: flex; flex-direction: column; gap: 1rem;}
.life_in_water_card li .liw_tit{ font-size: 2.1rem; font-weight: 600;}
.life_in_water_card li p{ font-size: 1.5rem; color: #464c53; padding-right: 4rem; word-break: keep-all;}

.life_in_water_card li:nth-child(1){
    border: 1px solid #c1dcec;
    background:
        url("../images/sub/sub01_01_icon01.png") no-repeat right 1.5rem top 1.5rem,
        linear-gradient(180deg,rgba(217, 240, 254, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.life_in_water_card li:nth-child(2){
    border: 1px solid #f4dada;
    background:
        url("../images/sub/sub01_01_icon02.png") no-repeat right 1.5rem top 1.5rem,
        linear-gradient(180deg,rgba(251, 237, 237, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.life_in_water_card li:nth-child(3){
    border: 1px solid #c6e2cb;
    background:
        url("../images/sub/sub01_01_icon03.png") no-repeat right 1.5rem top 1.5rem,
        linear-gradient(180deg,rgba(230, 245, 232, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.life_in_water_card li:nth-child(1) .liw_tit{ color: #053e60;}
.life_in_water_card li:nth-child(2) .liw_tit{ color: #550c18;}
.life_in_water_card li:nth-child(3) .liw_tit{ color: #094615;}

@media (max-width: 768px) {
	.sub_cont_info.sub01_01::before{ display: none;}
    .life_in_water_card{ flex-direction: column;}
    .life_in_water_card li{ height: auto; gap: 1rem;}
}

.life_in_use_info{ display: flex; flex-wrap: wrap; gap: 2rem;}
.life_in_use_info li{ padding: 3rem; flex: 0 0 calc(50% - 1rem); display: flex; flex-direction: column; justify-content: space-between;}


.life_in_use_info li:nth-child(3){ background-color: #eef1f6; border: none;}
.life_in_use_info li:nth-child(4){ background-color: #fff; border: 1px solid var(--line-color);}

.life_in_use_desc{ min-height: 7.8rem; padding: 0 4rem; margin-bottom: 2rem;}
.life_in_use_img{ text-align: center;}

@media (max-width: 768px) {
	.life_in_use_info li{ height: auto; flex: 0 0 100%; gap: 2rem;}
    .life_in_use_desc{ padding: 0 1rem;}

    .life_in_use_info li:nth-child(3){ background-color: inherit; border: 1px solid var(--line-color);}
    .life_in_use_info li:nth-child(4){ background-color: #eef1f6; border: none;}
}


/****** 우리동네 물의 여정 *******/
.sub_cont_info.sub01_02::before{ content: ""; display: inline-flex;
    width: 34.5rem; height: 21.9rem; position: absolute; right: 0; bottom: -2rem;
    background: url("../images/sub/sub01_02_info_bg.png") no-repeat;
    background-size: 34.5rem 21.9rem;
}

@media (max-width: 768px) {
	.sub_cont_info.sub01_02::before{ display: none;}
}

.desc_txt{ color: #464c53;}

.desc_txt.icon_info{ display: flex; gap: .4rem;}
.desc_txt.icon_info::before{
    content: "";
	display: inline-flex;
    width: 1.6rem;
    height: 1.6rem;
    background-image: url("../images/icon/ico_information_fill.svg");
    background-size: contain;
    background-repeat: no-repeat;

    flex-shrink: 0;
    margin-top: 2px;
}

.area_setting_wrap .desc_txt{ margin-top: 2rem;}
.area_set_box{ padding: 3rem; border-radius: 1rem; background-color: #eef2f7;}
.area_set_box .asis_top{ margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between;}
.area_set_box .asis_top .asis_tit{ font-size: 1.9rem; font-weight: 600;}
.area_setting_sch{ display: flex; gap: 2rem;}
.ast_sch_set{ flex: 1; display: flex; gap: 1rem;}

.btn_area_setting_go{ width: 22rem;}

.btn_mylocation_use{ height: 3.5rem; font-size: 1.5rem; border: 1px solid #cdd1d5; border-radius: .5rem; background-color: #fff; padding: 0 1.2rem; display: inline-flex; gap: .4rem; align-items: center;}
.btn_mylocation_use .ico-myhere{
    width: 16px !important;
    height: 16px !important;
}

@media (max-width: 768px) {
	.area_setting_sch{ flex-direction: column;}
    .ast_sch_set{ flex-direction: column;}
    .btn_area_setting_go{ width: 100%;}
}


.mylocal_water_flow_cont{ display: flex; justify-content: space-between; gap: 3rem;}
.mylocal_water_flow_img{ flex-shrink: 0;}
.mylocal_water_flow_img img{ border-radius: 1rem; overflow: hidden; box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1); height: 34.4rem;}

.mlwf_tit{ margin-bottom: 2.6rem; font-size: 2.8rem; font-weight: 600; display: flex; align-items: center; gap: 1.5rem;}
.mlwf_tit .num{ font-size: 1.7rem; color: #fff; width: 3rem; height: 3rem; border-radius: 3rem; background-color: var(--mma-color-prim); display: inline-flex; justify-content: center; align-items: center;}

.mylocal_water_flow_info{ display: flex; flex-direction: column;}

.mylocal_water_flow_list{ flex: 1; border-left: 1px solid var(--mma-color-prim); margin-left: 1.5rem; padding-left: 3rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.2rem;}
.mylocal_water_flow_list li{}

.mylocal_water_flow_list li .mwf_tit{ font-size: 1.7rem; font-weight: 600;}
.mylocal_water_flow_list li .mwf_desc{ font-size: 1.5rem; color: #464c53;}

@media (max-width: 1023px) {	
    .mylocal_water_flow_cont{ flex-direction: column;}
    .mylocal_water_flow_list{ padding-left: 1rem;}
    .mylocal_water_flow_img img{ width: 100%;}
}

@media (max-width: 768px) {
	.mlwf_tit {
        margin-bottom: 2.4rem;
        font-size: 2.2rem;
        gap: 1.2rem;
    }
}

.page_link_btn_wrap{ text-align: center; margin-top: 3rem;}
.btn_page_link{ height: 6rem !important; border-radius: 6rem !important; gap: 1.2rem !important; padding: 0 4rem !important; box-shadow: 0 25px 20px rgba(0, 0, 0, 0.1);}
.btn_page_link:visited,
.btn_page_link:active,
.btn_page_link:hover{ color: #fff;}

/*############################ 참여마당 : 워터포지티브 S #########################*/
:root{
    --ink:#0c2030; --deep:#073049; --ocean:#0a4a6e; --blue:#1271b5; --sky:#4fb8e8;
    --aqua:#1fc4b8; --aqua-d:#0e9b92; --mint:#d7f5f1;
    --pale:#eef7fc; --line:#e3edf3; --muted:#5a7180; --bg:#f6fafd;
    --gold:#e6b54a;
    --r:18px; --shadow:0 18px 50px -20px rgba(8,50,80,.35);
} 
section{position:relative}


.positive_visual{ position: relative; border-radius: 1.5rem; background: linear-gradient(52deg,rgba(19, 105, 165, 1) 0%, rgba(15, 137, 224, 1) 100%);}
.positive_visual{ height: 44rem; padding: 0 8rem; display: flex; align-items: center; justify-content: space-between;}

.wpos_info_text{}
.wpos_info_text .wpos_slogan{ font-size: 4.8rem; color: #fff;}
.wpos_info_text .wpos_slogan .txt1{ line-height: 1.1;}
.wpos_info_text .wpos_slogan .txt2{ line-height: 1.1; font-weight: 600;}
.wpos_info_text .wpos_disc{ font-size: 1.7rem; color: #fff; margin-top: 2rem;}
.wpos_disc2{ color: #fff; font-size: 1.5rem; position: absolute; right: 3rem; bottom: 2.6rem;}

.wpos_btn_wrap{ margin-top: 4rem; display: flex; gap: 1rem;}
.btn_wposi_move{ font-size: 1.7rem; padding: 0 2rem; border-radius: .5rem; height: 4.4rem; background-color: #fff; display: inline-flex; align-items: center; gap: .2rem;}
.btn_wposi_move::after{
	content: "";
	display: inline-flex;
    width: 20px;
    height: 20px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #1e2124;
	transform: rotate(-90deg);
}
.btn_wposi_move:hover{ background-color: #51f2ff;}
/* .btn_wposi_move:hover{transform:translateY(-2px);box-shadow:0 8px 8px 0px rgba(0,0,0,.3)}*/

@media all and (max-width: 1023px){
	.positive_visual{ height: auto; padding: 3rem; flex-direction: column;}
	.wpos_info_text{ order: 2;}
	.hero_img_wrap{ order: 1;}
	.wpos_disc2{ position: relative; right: auto; bottom: auto; order: 3; margin-top: 2rem; width: 100%; text-align: center; margin-left: -10rem;}
}
@media all and (max-width: 768px){
	.wpos_info_text .wpos_slogan{ font-size: 3.8rem;}
	
	.wpos_btn_wrap{ display: inline-flex; flex-direction: column;}
	.wpos_disc2{ text-align: left; margin-left: 0;}
	
}

  /* 히어로 비주얼 - 물방울/지구 + 비커 */
.hero-vis{position:relative;display:grid;place-items:center; height: 34rem; width: 30rem; border-radius: 100%;}
.hero-vis::after{
	content: "";
	background: linear-gradient(-180deg,rgba(13, 115, 212, 1) 0%, rgba(15, 97, 161, 1) 100%);
	width: 30rem;
	height: 30rem;
	border-radius: 100%;
	display: inline-flex;
	position: absolute; z-index: 0;
}
.glassdrop{position:relative;width: 180px;height: 180px;animation:float 6s ease-in-out infinite; z-index: 3; display: inline-flex; justify-content: center; align-items: center;}
.glassdrop img{ width: 12.6rem;}
@keyframes float{0%,100%{transform:translateY(-50px)}50%{transform:translateY(-30px)}}
.ring{position:absolute;inset:40px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.25);animation:spin 30s linear infinite; z-index: 3; font-size: 0;}
@keyframes spin{to{transform:rotate(360deg)}}
.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),rgba(159,216,255,.25));border:1px solid rgba(255,255,255,.4); font-size: 0;}
.bubble.b1{width:26px;height:26px;top:22%;left:24%;animation:rise 7s ease-in-out infinite; z-index: 3;}
.bubble.b2{width:16px;height:16px;top:70%;left:80%;animation:rise 9s ease-in-out infinite 1s; z-index: 3;}
.bubble.b3{width:38px;height:38px;top:70%;left:15%;animation:rise 11s ease-in-out infinite .5s; z-index: 3;}
.bubble.b4{width:12px;height:12px;top:25%;left:80%;animation:rise 8s ease-in-out infinite 2s; z-index: 3;}
@keyframes rise{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-22px);opacity:1}}

@media all and (max-width: 768px){
	.hero-vis{ width: 280px; height: 320px;}
	.hero-vis::after{ width: 260px; height: 260px;}
	.glassdrop{ width: 150px; height: 150px;}
    .glassdrop img{ width: 60%;}
	
	.bubble.b1{ width: 20px; height: 20px;}
	.bubble.b3{ width: 28px; height: 28px;}
	.bubble.b4{ top: 30%; left: 80%;}
}

.wposi_tit_wrap{ margin-bottom: 3rem; padding-left: 1.6rem;}
.wposi_tit{ height: 4rem; border-radius: 4rem; font-size: 1.9rem; color: #fff; padding: 0 2.4rem; background-color: #063a74; display: inline-flex; align-items: center;}

/* 워터포지티브 소개  */
.water_positive_intro{ border-radius: 1.5rem;  height: 38rem; display: flex; overflow: hidden;}

.wposi_txt_wrap{ background-color: #eef2f7; flex: 1; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.wposi_txt_wrap .wposi_txt1{ position: relative; padding: 0 2rem;}
.wposi_txt_wrap .wposi_txt1::before{ content: "“"; font-family: "굴림"; font-size: 300px; color: #fff; position: absolute; left: -95px; top: -120px;}
.wposi_txt_wrap .wposi_txt1 span{  position: relative; font-size: 3.2rem; font-weight: 600; z-index: 2;}

.wposi_txt_wrap .wposi_txt2{ font-size: 1.7rem; margin-top: 3rem;}

.wposi_img_wrap{ width: 54.6rem; display: flex; justify-content: center; align-items: center;
	background: linear-gradient(123deg,rgba(40, 99, 179, 1) 0%, rgba(22, 137, 189, 1) 50%, rgba(24, 189, 205, 1) 100%);
}

.wposi_img_wrap img{ height: 26rem;}

@media all and (max-width: 768px){
	.water_positive_intro{ flex-direction: column; height: auto;}
	.wposi_txt_wrap{ padding: 5rem 5rem 4rem 5rem;}
	.wposi_txt_wrap .wposi_txt1{ word-break: keep-all; padding: 0 2rem;}
	.wposi_txt_wrap .wposi_txt1::before{ left: -40px; top: -90px; font-size: 240px;}
	.wposi_txt_wrap .wposi_txt1 span{ text-align: center; display: block; line-height: 1.2;}
	.wposi_txt_wrap .wposi_txt2{ display: block; text-align: center;}

	.wposi_img_wrap{ width: 100%; padding: 4rem;}
}

.initiative_flow{ width: 100%;}
.initiative_flow ul{ display: flex; gap: 2.6rem;}
.initiative_flow ul li{ position: relative; flex: 1; border-radius: 1.5rem; height: 18.4rem; padding-left: .6rem;}
.initiative_flow ul li::before{ content: ""; width: 100%; height: 100%; border-radius: 1.5rem; background-color: #fff; display: inline-flex; border: 1px solid #cdd1d5; position: absolute;}
.initiative_flow ul li:nth-child(1){ background-color: #3498d8;}
.initiative_flow ul li:nth-child(2){ background-color: #039d9d;}
.initiative_flow ul li:nth-child(3){ background-color: #2e95d7;}

.initiative_flow ul li > div{ position: relative; z-index: 2; padding: 2.5rem;}

.init_flow_tit{ font-size: 2.1rem; color: #052b57; font-weight: 600;}
.init_flow_txt1{ font-size: 1.7rem; font-weight: 500; margin-top: 1rem;}
.init_flow_txt2{ font-size: 1.5rem; color: #464c53; margin-top: 1rem;}

@media all and (max-width: 768px){
	.initiative_flow ul{ flex-direction: column;}
}

/* 워터포지티브 : 주요활동 */
.water_pos_list{ margin-top: 3rem; display: flex; gap: 2rem;}

.water_pos_list li{ flex: 1; border-radius: 1rem; background-color: #eef2f7; height: 23.8rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;}
.water_pos_list li .wpol_icon{ width: 8rem; height: 8rem; border-radius: 100%; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 5rem;}
.water_pos_list li:nth-child(1) .wpol_icon{ background-image: url("../images/positive/wpol_icon01.png");}
.water_pos_list li:nth-child(2) .wpol_icon{ background-image: url("../images/positive/wpol_icon02.png");}
.water_pos_list li:nth-child(3) .wpol_icon{ background-image: url("../images/positive/wpol_icon03.png");}
.water_pos_list li:nth-child(4) .wpol_icon{ background-image: url("../images/positive/wpol_icon04.png");}

.water_pos_list li .wpol_tit{ font-size: 1.9rem; font-weight: 600; text-align: center;}
.water_pos_list li .wpol_desc{ font-size: 1.7rem; text-align: center;}

@media all and (max-width: 768px){
	.water_pos_list{ flex-direction: column;}
	.water_pos_list li{ height: auto; padding: 3rem;}
}

  /* 카드뉴스 갤러리 */
.posi_gallery{ position: relative; display:grid;grid-template-columns:repeat(5,1fr); gap: 20px; margin-top:46px}
.posi_gallery::before,
.posi_gallery::after{ content: ""; position: absolute;}
.posi_gallery::before{ width: calc(100% - 2.4rem); height: 1rem; background-color: #cbdbee; left: 0; bottom: 6rem;}
.posi_gallery::after{
	display: inline-block; bottom: 5.2rem; right: 0; width:0; height:0; 
	border-left: 26px solid #cbdbee;
	border-bottom: 14px solid transparent; border-top: 14px solid transparent;}

.posi_gallery .gcard{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow);transition:.3s; border: 1px solid #cdd1d5;}
.posi_gallery .gcard::after{ content: "";}
.posi_gallery .gcard::after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,48,73,.85),transparent 50%);
    display:flex;align-items:flex-end;padding:16px;opacity:0;transition:.3s}
.posi_gallery .gcard:hover::after{opacity:1}
.posi_gallery .gcard img{aspect-ratio:3/4;object-fit:cover;transition:.4s;opacity:.96}
.posi_gallery .gcard:hover img{transform:scale(1.06);opacity:1}
.posi_gallery .gcard .ov{ position:relative;inset:0;background:linear-gradient(0deg,rgba(7,48,73,.85),transparent 50%);
display:flex;align-items:flex-end;padding:16px;opacity:0;transition:.3s}
.posi_gallery .gcard:hover .ov{opacity:1}
.posi_gallery .ov{ position: relative; margin-top: 2.5rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; z-index: 2;}
.posi_gallery .ov p{ width: 100%; display: flex; justify-content: center;}
.posi_gallery .ov .ov_step{ height: 4rem; width: 9.4rem; font-size: 1.7rem; color: var(--mma-text-prim); border: 1px solid #1e2124; border-radius: .5rem; background-color: #fff; display: inline-flex; align-items: center; justify-content: center;}
.posi_gallery .ov .ov_desc{ font-size: 1.7rem; font-weight: 600;}

@media all and (max-width: 768px){
	.posi_gallery::before,
	.posi_gallery::after{ display: none;}
	.posi_gallery .ov .ov_step{ width: 100%;}
}


  /* 라이트박스 */
.lb_story{display:none;position:fixed;inset:0;z-index:90;background:rgba(5,25,38,.93);place-items:center}
.lb_story.on{display:grid}
.lb_story img{max-height:88vh;max-width:92vw;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb_story .x{position:fixed;top:24px;right:28px;background:none;border:none;color:#fff;font-size:38px;cursor:pointer}
.lb_story .arrow{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:none;color:#fff;width:5.8rem;height:5.8rem;border-radius:50%;font-size:28px;cursor:pointer}
.lb_story .arrow::after{
	content: "";
	display: inline-flex;
    width: 22px;
    height: 22px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #fff;	
}
.lb_story .arrow.pv::after{ transform: rotate(90deg);}
.lb_story .arrow.nx::after{ transform: rotate(-90deg);}
.lb_story .arrow.pv{left:26px}
.lb_story .arrow.nx{right:26px}
.lb_story .cp{position:fixed;bottom:30px;left:0;right:0;text-align:center;color:#cfe6f2;font-weight:700}

@media all and (max-width: 768px){
	.lb_story .arrow{ background: rgba(5, 25, 38, .2);}
}

@media(max-width:980px){
	.hero .wrap,
	.concept,
	.bignum{grid-template-columns:1fr}
	.hero-vis{order:-1;min-height:280px}
	/* .glassdrop{width:240px;height:240px} */
	.acts,
	.stats,
	.inits,
	.posi_gallery,
	.cases,
	.ovs,
	.steps3,
	.logowall{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
	.acts,
	.stats,
	.inits,
	.posi_gallery,
	.cases,
	.ovs,
	.steps3,
	.logowall{grid-template-columns:1fr}
}

.m_ver{ display: none;}
@media all and (max-width: 768px){
	.w_ver{ display: none;}
	.m_ver{ display: block;}
}

/* 워터포지티브 : 정책·제도 안내 */
.wpos_info_list{}
.wpos_info_list li{ flex: 1; border-radius: 1rem; background-color: #eef2f7; height: 19.8rem; padding: 3rem;}

.wpos_info_list li .wposil_tit{ font-size: 1.9rem; font-weight: 600; color: var(--mma-text-prim); padding-top: 5.4rem; background-repeat: no-repeat; background-position: top 0 left 0;}
.wpos_info_list li:nth-child(1) .wposil_tit{ background-image: url("../images/positive/wposil_icon01.png"); background-size: 3rem auto;}
.wpos_info_list li:nth-child(2) .wposil_tit{ background-image: url("../images/positive/wposil_icon02.png"); background-size: 3.8rem auto;}
.wpos_info_list li:nth-child(3) .wposil_tit{ background-image: url("../images/positive/wposil_icon03.png"); background-size: 3.6rem auto;}
.wpos_info_list li:nth-child(4) .wposil_tit{ background-image: url("../images/positive/wposil_icon04.png"); background-size: 3.8rem auto;}

.wpos_info_list li .wposil_desc{ font-size: 1.7rem; line-height: 1.4; margin-top: 1rem;}

@media all and (max-width: 768px){
	.wpos_info_list{ flex-direction: column;}
	.wpos_info_list li{ text-align: center;}
	.wpos_info_list li .wposil_tit{ background-position: top 0 center;}
}

.column_g{ display: flex; gap: 2rem;}
.column_item{ flex: 1 1 0px;}
@media all and (max-width: 768px){
	.column_g{ flex-direction: column;}
}

.fc_blue{ color: var(--mma-text-prim) !important;}
.fc_red{ color: red !important;}

.wpos_guide{}

.wposg_tit{ font-size: 2.1rem; font-weight: 600; padding-left: 2.6rem; margin-bottom: 2rem;}

.gi01 .wposg_tit{ background: url("../images/positive/wposg_tit01.png") no-repeat left 0 center; background-size: 1.4rem auto;}
.gi02 .wposg_tit{ background: url("../images/positive/wposg_tit02.png") no-repeat left 0 center; background-size: 2rem auto;}

.wposg_info{ margin-top: 1rem; display: flex; gap: 2.4rem;}
.wposg_info li{ position: relative; font-size: 1.5rem;}
.wposg_info li:not(:first-child)::before{ content: "·"; position: absolute; left: -1.2rem; top: .1rem;}

.wposg_cont{ margin-top: 2rem;}
.wposg_cont > div{ margin-top: 2rem;}

.wpos_guide .krds-info-list li{ letter-spacing: -.4px;}

.column_item{ flex: 1 1 0px;}
@media all and (max-width: 768px){
	.wposg_cont .krds-table-wrap{ width: calc(100vw - 6rem * 2);}
}

.wpos_comp_list{ display: flex; flex-wrap: wrap; gap: 2rem;}
.wpos_comp_list li{ flex: 1 1 25%; height: 10rem; border: 1px solid #cdd1d5; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center;}

@media all and (max-width: 768px){
	.wpos_comp_list li{ flex: 1 1 100%;}
}

.wposi_case_list{ display: flex; gap: 2rem;}
.wposi_case_list > li{ overflow: hidden; border: 1px solid var(--line-color); border-radius: 1rem;}
.wposic_img img{ width: 100%;}

.wposic_cont{ padding: 2.8rem 3rem;}
.wposic_tit{ font-size: 1.9rem; font-weight: 600;}

.wposic_info_list{ margin-top: 1rem; display: flex; flex-direction: column; gap: .8rem;}
.wposic_info_list li{ display: flex;}
.wposic_info_list .wil_tit{ font-size: 1.5rem; color: #464c53; width: 5rem;}
.wposic_info_list .wil_desc{ font-size: 1.5rem;}

@media all and (max-width: 768px){
	.wposi_case_list{ flex-direction: column;}
}

.wpos_global_list{ }
.wpos_global_list li{ }
.wpoglo_tit{ margin-bottom: 1rem; font-size: 2.8rem; font-weight: 600;}
.wpoglo_info_text{ margin-bottom: 1.4rem; font-size: 1.5rem; color: var(--mma-text-prim); background-color: var(--mma-bg-secd-color); height: 3rem; border-radius: 3rem; padding: 0 2.2rem; display: inline-flex; align-items: center;}

.wpos_global_list .krds-info-list{ gap: .4rem;}

.posnew01 .wposg_tit{ background: url("../images/positive/wponews_tit01.png") no-repeat left 0 center; padding-left: 3.4rem;}
.posnew02 .wposg_tit{ background: url("../images/positive/wponews_tit02.png") no-repeat left 0 center; padding-left: 3.4rem;}

.wpos_news{}
.wpos_news li{ background-color: var(--mma-bg-secd-color); border-radius: 1rem; padding: 1rem 3rem; display: flex;}
.wpos_news li:not(:first-child){ margin-top: .5rem;}
.wpos_news li p{ width: 9.8rem;}
.wpos_news li p strong{ font-size: 1.7rem; color: var(--mma-text-prim);  display: inline-flex;}
.wpos_news li div{ display: flex; flex-direction: column; gap: .5rem;}
.wpos_news li div strong{ font-size: 1.7rem;}
.wpos_news li div span{ font-size: 1.5rem;}

@media all and (max-width: 768px){
	.wpos_news li{ flex-direction: column; gap: 1rem;}
}

.wpsi_slogan{ color: #fff; font-size: 1.9rem; font-weight: 600; border-radius: 1rem; padding: 1.4rem 3rem; display: flex; align-items: center; justify-content: center; gap: 1.6rem;
	background: linear-gradient(123deg,rgba(17, 83, 131, 1) 0%, rgba(20, 99, 188, 1) 100%);
}
.wpsi_slogan::before{ content: ""; width: 3.8rem; height: 3.4rem; display: inline-flex; background: url("../images/positive/wpsi_slogan_icon.png") no-repeat; flex-shrink: 0;}

/*############################ 참여마당 : 워터포지티브 E #########################*/


/*############################ 이용안내 : 이용안내 #########################*/
.site_info_link{ display: flex; flex-wrap: wrap; gap: 1.6rem;}
.site_info_link li{ flex: 0 1 calc(50% - .8rem);}
.site_info_link li a{ height: 20rem; padding: 3rem 3.5rem; border-radius: var(--mma-radius-md); border: 2px solid; border-color: #fff;}
.site_info_link li a{ display: block;}
.site_info_link li .sl_icon{ height: 6rem; display: flex; align-items: flex-start;}

.site_info_link li .sl_tit{ font-size: 1.9rem; font-weight: 600; display: inline-flex; align-items: center; gap: .8rem;}
.site_info_link li .sl_tit::after{
	content: "";
	display: inline-flex;
    width: 2.2rem;
    height: 2.2rem;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");
	background-color: #000;
    transform: rotate(-90deg);
    background-size: 2.2rem;
    mask-size: 2.2rem;
}

@media (min-width: 679px) and (max-width: 1600px){
    .site_info_link li .sl_icon img{ height: 4rem;}
    .site_info_link.mma_menu02 li:nth-child(2) img{ height: 3rem;}
}

.site_info_link li .sl_desc{ margin-top: 1rem; font-size: 1.5rem;}

.site_info_link.mma_menu05 li,
.site_info_link.mma_menu06 li{ flex: 0 1 calc(33% - .8rem);}

.site_info_link.mma_menu01 li a{ background-color: #ecf4ff;}
.site_info_link.mma_menu02 li a{ background-color: #eafaf9;}
.site_info_link.mma_menu03 li a{ background-color: #fdfbec;}
.site_info_link.mma_menu04 li a{ background-color: #fbf2f9;}
.site_info_link.mma_menu05 li a{ background-color: #f1f3ff;}
.site_info_link.mma_menu06 li a{ background-color: #eef2f7;}

.site_info_link.mma_menu01 li:hover a{ border-color: #4983d3;}
.site_info_link.mma_menu02 li:hover a{ border-color: #39b4ac;}
.site_info_link.mma_menu03 li:hover a{ border-color: #dfc927;}
.site_info_link.mma_menu04 li:hover a{ border-color: #ca71b6;}
.site_info_link.mma_menu05 li:hover a{ border-color: #5061cd;}
.site_info_link.mma_menu06 li:hover a{ border-color: #4d729f;}

@media all and (max-width: 1678px){
	.site_info_link.mma_menu05 li,
    .site_info_link.mma_menu06 li{ flex: 0 1 calc(50% - .8rem);}
}

@media all and (max-width: 1023px){	
    .site_info_link li a { padding: 2rem;}
}

@media all and (max-width: 768px){
	.site_info_link{ flex-direction: column;}
}

.g_info_box{ padding: 3.5rem 3rem; border-radius: var(--mma-radius-md);}
.g_info_box.line{ border: 4px solid #eef2f7;}

.g_info_box .g_info_text{ font-size: 1.9rem; font-weight: 600;}
.g_info_box .g_info_desc{ font-size: 1.5rem;}

.g_info_box.site_info{ display: flex; gap: 2.5rem; align-items: center;}
.g_info_box.site_info::before{ content: ""; width: 5.6rem; height: 5.3rem; background: url("../images/sub/site_info_icon.png") no-repeat; background-size: 5.6rem auto; display: inline-flex; flex-shrink: 0;}

.copyright_policy_wrap{ border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-md); padding: 2rem;}
.copyright_policy_wrap .top{ margin-bottom: 3rem; border-radius: var(--mma-radius-md); background-color: #f4f5fa; padding: 2.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;}
.copyright_policy_wrap .top::before{ content: ""; width: 6rem; height: 6rem; background: url("../images/sub/policy_icon.png") no-repeat; background-size: 6rem;}

.copyright_policy_wrap .krds-info-list{ padding: 0 1rem 1rem 1rem;}

/* 자주묻는 질문 : FAQ */
.faq_wrap{ border-top: 2px solid #1d1d1d;}
.faq_list{}
.faq_list li{ border-bottom: 1px solid #d8d8d8;}
.faq_list li button{ position: relative; padding: 3rem; font-size: 1.9rem; width: 100%; text-align: left;}
.faq_list li button::after{ content: ""; position: absolute; width: 2rem; height: 2rem; background: url("../images/icon/ico_angle.svg") no-repeat; background-size: 2rem; right: 3rem; top: 50%; transform: translateY(-50%); transition: all 0.3s ease-in;
}
.faq_list li button.on::after{ transform: translateY(-50%) rotate(180deg);}
.faq_list li button.on{ font-weight: 700;}
.faq_cont{ display: none; position: relative; padding: 4rem 6rem; border-top: 1px solid #d8d8d8; background: #eff5ff; line-height: 1.4; width: 100%;}
.faq_txt{ position: relative;}
.faq_txt::before{ content: "A."; position: absolute; color: #246beb; font-weight: 700; left: -2.4rem; top: -1px;}
.faq_list li:first-child .faq_cont{ display: block;}

@media (max-width: 766px) {
	.faq_list li button{ padding: 2rem 4rem 2rem 2rem;}
	.faq_cont{ padding: 4rem; width: 100%;}
	.faq_list li button::after{ right: 2rem;}
}

.water_trav{ margin-top: .8rem;}
.bigdata_pop_desc{ margin-top: 1rem; text-align: right;}

@media (max-width: 766px) {
	.bigdata_pop_desc{ text-align: left;}
}

/* ============================================================
   분야별 상세검색 — 「지도로 선택」 레이어 팝업
   설계서 : 분야별_상세검색_지도로선택 팝업_261001_2.pptx (슬라이드 1·3)

   ★ 팝업 틀은 공통 .layer_pop 을 그대로 쓴다(common.css:980).
     여기엔 그 안에 들어갈 내용과 모달 배치만 정의한다 — 같은 화면에서 팝업 생김새가 둘로 갈리지 않게.
   ★ 툴팁은 GIS 대시보드와 같은 .tw_tooltip 이다. gis.css 전체를 끌어오면 이 화면 스타일과
     충돌하므로, 필요한 규칙만 옮기고 --gq-* 변수는 값으로 풀어 쓴다(gis.css:81,83).
   ★ 768px 반응형 — 이 화면은 PC·모바일이 같은 URL 을 쓴다.
   ============================================================ */

/* —— 구역선택 「지점」 컬럼 제목의 '지도로 선택' 버튼 (설계서 슬라이드 1 「지점 영역 제목 오른쪽」) ——
   「지점」 글자는 가운데 그대로 두고 버튼만 칸 오른쪽 끝에 붙인다(사용자 결정 2026-10-01).
   제목 바로 옆에 인라인으로 두면 글자가 왼쪽으로 밀려 다른 컬럼 제목과 줄이 안 맞는다. */
.susb_area_tit{ position: relative; }
.btn_station_map{
    position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: .4rem;
    height: 2.6rem; padding: 0 1rem 0 .8rem; font-size: 1.3rem; line-height: 1;
    color: var(--mma-color-prim); background-color: #fff;
    border: 1px solid var(--mma-color-prim); border-radius: var(--mma-radius-sm);
}
.btn_station_map::before{
    content: ""; flex: none; width: 1.4rem; height: 1.4rem;
    background: url("../images/icon/ico_map_pin.svg") no-repeat center/contain;
}
.btn_station_map:hover{ background-color: var(--mma-bg-secd-color); }

/* —— 모달 배치 —— */
.stm_pop{ position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.stm_dim{ position: absolute; inset: 0; background: rgba(0,0,0,.45); }
body.stm_open{ overflow: hidden; }   /* 모달 — 뒤쪽 스크롤 잠금(설계서 슬라이드 2) */

.stm_pop .stm_box{
    position: relative; z-index: 1;
    width: min(100rem, calc(100vw - 4rem));
    height: min(70rem, calc(100vh - 6rem));
    min-width: 0;
}
.stm_pop .layer_pop_cont_wrap{ height: 100%; }

/* —— 안쪽 배치 ——
   설계서(슬라이드 3)처럼 지도와 「선택된 지점」을 팝업 테두리에 붙이지 않고 좌우 2rem 안쪽 카드로 둔다.
   공통 팝업 본문(.layerpop_cont, common.css:1009)도 2rem 여백을 쓰므로 그 관례를 따른다.
   모바일은 폭이 좁아 여백을 없애고 꽉 채운다(아래 미디어쿼리). */

/* —— 데이터명 + 지점 요약 + 사용 안내 줄 —— */
.stm_sub{
    display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
    padding: 1.4rem 2rem 1rem;
}
.stm_sub_l{ display: inline-flex; align-items: center; gap: .8rem; min-width: 0; }
.stm_sub_lbl{ font-size: 1.3rem; color: #8b9199; }
.stm_data_nm{ font-size: 1.6rem; font-weight: 700; color: var(--mma-text-color); white-space: nowrap; }
.stm_data_gubun{
    height: 2.2rem; padding: 0 .8rem; border-radius: 1.1rem; font-size: 1.2rem; font-weight: 600;
    color: var(--mma-text-prim); background: var(--mma-bg-secd-color);
    display: inline-flex; align-items: center;
}
.stm_data_cnt{
    margin-left: .4rem; padding-left: 1.2rem; border-left: 1px solid var(--mma-line-color);
    font-size: 1.3rem; color: var(--mma-text-secd); white-space: nowrap;
}
.stm_data_cnt:empty{ display: none; }
.stm_guide{ display: inline-flex; align-items: center; gap: .6rem; font-size: 1.4rem; color: var(--mma-text-prim); }
.stm_guide::before{
    content: "i"; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    background-color: var(--mma-color-prim); color: #fff;
    font-size: 1.1rem; font-weight: 700; font-style: normal;
    display: inline-flex; align-items: center; justify-content: center;
}

/* —— 지도 —— */
.stm_map_area{
    position: relative; flex: 1; min-height: 0;
    margin: 0 2rem; border: 1px solid var(--mma-line-color);
    border-radius: .8rem; overflow: hidden;         /* 지도 캔버스 모서리까지 둥글게 잘린다 */
}
.stm_map{ width: 100%; height: 100%; background: var(--mma-bg-02); }

/* 「영역선택」 토글 — 모바일 전용이다.
   PC 는 설계서대로 Ctrl+드래그로 영역을 고르므로 버튼이 필요 없고, 두면 지도만 가린다.
   모바일에는 Ctrl 키가 없어 이 버튼이 유일한 영역선택 수단이다(가정 9).
   좌상단은 OpenLayers 기본 줌 컨트롤(+/−)이 쓰므로 우상단에 둔다. */
.stm_map_tools{ display: none; position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2; }
.stm_tool_btn{
    height: 3.2rem; padding: 0 1.2rem; font-size: 1.3rem;
    background: #fff; color: var(--mma-text-secd);
    border: 1px solid var(--mma-line-color); border-radius: var(--mma-radius-sm);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.stm_tool_btn.on{ background: var(--mma-color-prim); border-color: var(--mma-color-prim); color: #fff; }

/* —— 영역선택 안내 : GIS 대시보드 「직접 드래그 선택」 안내와 같은 .noti_pop (gis.css:2659~2677 에서 옮김) ——
   GIS 는 화면 고정(fixed)이지만 여기선 지도 영역 안 위쪽 가운데에 띄운다(absolute).
   줌 버튼(좌상단)·영역선택 버튼(우상단) 아래로 내려 겹치지 않게 한다.
   --gq-* 변수는 값으로 풀어 쓴다(--gq-color-prim #256ef4 · --gq-text-prim #0b50d0 · --gq-radius .4rem). */
/* 한 줄 띠 — 줌 버튼(좌상단, 끝 4.4rem)과 영역선택 버튼(우상단, 폭 약 7.1rem) 「사이」에 같은 높이로 둔다.
   [폐기] 두 줄 박스(top 9rem) : 작은 지도(343×340 실측)의 가운데를 덮어 범위를 그리기 시작할 자리를 가렸다.
   left 5.2rem = 1.2 + 3.2 + 여백 .8 / right 9.4rem = 1.2 + 영역선택 7.1 + 여백 1.1 */
.stm_pop .noti_pop{
    position: absolute; top: 1.2rem; left: 5.2rem; right: 9.4rem; z-index: 3; height: 3.2rem;
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    background: #fff; border: 1px solid #256ef4; border-radius: .4rem;
    padding: 0 .8rem; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.stm_pop .noti_pop_cont{
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding-left: 2.2rem; background: url("../../gis/images/icon_noti_info.png") no-repeat left center/1.6rem;
    color: #0b50d0; font-size: 1.3rem; font-weight: 500; line-height: 1.6rem;
}
/* ✕ 는 그림은 1.1rem 이지만 누르는 영역은 2.4rem 로 넓힌다(손가락 터치) */
.stm_pop .btn_noti_pop_close{
    flex: none; width: 2.4rem; height: 2.4rem; margin-right: -.6rem;
    background: url("../../gis/images/btn_noti_pop_close.svg") no-repeat center/1.1rem;
}

/* —— 마우스오버 툴팁 : GIS 대시보드와 같은 .tw_tooltip (gis.css:2719~2732 에서 옮김) —— */
/* ★ position 은 absolute 가 아니라 unset 이어야 한다.
   이 요소는 ol.Overlay 컨테이너 '안'에 들어가는데, absolute 로 띄우면 컨테이너가 0×0 으로 쪼그라들어
   ol 의 bottom-center 보정(translate(-50%,-100%))이 0 만큼만 적용된다 →
   툴팁이 지점에서 (+91, +80)px 어긋난다(실측 2026-10-01).
   GIS 도 같은 이유로 인라인 position:unset 을 준다(DL_wqPoint.js getTooltipHtml). */
.stm_pop .tw_tooltip{
    position: unset; width: max-content;
    font-size: 1.5rem; background-color: rgba(255,255,255,.95);
    padding: 1.2rem 1.5rem; border-radius: .4rem;
    box-shadow: 0 3px 5px rgba(0,0,0,.2); z-index: 3; pointer-events: none;
}
/* 지점 위에 띄우므로 꼬리는 아래쪽이다(GIS 는 지점 오른쪽에 띄워 왼쪽 꼬리를 쓴다) */
.stm_pop .tw_tooltip::after{
    content: ""; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%);
    width: 0; height: 0;
    border-top: 8px solid #fff; border-left: 5px solid transparent; border-right: 5px solid transparent;
}
.stm_pop .tw_tooltip .tit{ display: flex; justify-content: center; align-items: center; gap: 1rem; }
.stm_pop .tw_tooltip .tit b{
    color: #fff; background-color: #0b50d0; border-radius: .4rem;
    padding: 0 .8rem; font-weight: 400; white-space: nowrap;
    display: inline-flex; align-items: center;
}
.stm_pop .tw_tooltip .tit span{ color: #0b50d0; font-weight: 600; }
.stm_pop .tw_tooltip .sub_info{ margin-top: 6px; }
.stm_pop .tw_tooltip .sub_info li{ font-size: 1.3rem; color: #1e2124; text-align: center; line-height: 2rem; }
.stm_pop .tw_tooltip .sub_info li:empty{ display: none; }

/* 모바일 툴팁 「창 닫기」 — GIS 모바일 툴팁과 같은 버튼(gis.css:2753~2757 에서 옮김).
   PC 는 마우스오버라 닫기가 필요 없어 숨기고, 모바일 미디어쿼리에서만 보인다.
   GIS 의 「상세보기」는 넣지 않는다 — 고르는 중에 상세 창이 뜨면 선택 흐름이 끊긴다. */
.stm_pop .tw_tooltip .m_tool_btn_wrap{ display: none; justify-content: center; align-items: center; margin-top: .8rem; }
.stm_pop .btn_mtooltil_close{
    background: #16408d; width: 11rem; height: 2.8rem; border-radius: 2.6rem;
    color: #fff; font-size: 1.5rem; padding-left: 1.9rem;
    display: flex; align-items: center; gap: 1rem;
}
.stm_pop .btn_mtooltil_close::after{
    content: ""; width: 13px; height: 13px; flex: none;
    background: url("../../gis/images/btn_pop_flag_close.png") no-repeat center/contain;
}

/* 지도 맨 위쪽 지점은 툴팁을 지점 「아래」로 뒤집는다(stationMapPop.js _showTip) — 꼬리도 위로 */
.stm_pop .tw_tooltip.stm_tip_below::after{
    top: -8px; bottom: auto;
    border-top: 0; border-bottom: 8px solid #fff;
}

/* —— 줌(+/−) · 축척 : GIS 지점정보 팝업(/web/waterRsLvPOP)과 같은 모양 ——
   마크업·클래스까지 그 팝업과 같게 맞췄고, 규칙은 gis.css:518~525,537~539 에서 옮겼다.
   gis.css 전체를 끌어오면 이 화면 스타일과 충돌하므로 필요한 규칙만 가져오고
   --gq-radius(.4rem)는 값으로 풀어 쓴다(gis.css:83). */
.stm_pop .gisp_zoom_wrap{
    position: absolute; left: 1.2rem; top: 1.2rem; z-index: 2;
    display: inline-flex; flex-direction: column;
    border-radius: .4rem; overflow: hidden; box-shadow: 0 0 6px rgba(0,0,0,.3);
}
.stm_pop .btn_gisp_zoom{ position: relative; width: 3.2rem; height: 3.2rem; background-color: #fff; }
.stm_pop .btn_gisp_zoom::before,
.stm_pop .btn_gisp_zoom::after{
    content: ""; width: 1.2rem; height: .2rem; background-color: #343a40;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.stm_pop .btn_gisp_zoom::after{ transform: translate(-50%, -50%) rotate(90deg); }
.stm_pop .btn_gisp_zoom.out{ border-top: 1px solid #ced4da; }
.stm_pop .btn_gisp_zoom.out::after{ display: none; }

.stm_pop .gisp_map_scale{
    position: absolute; right: .4rem; bottom: .4rem; z-index: 2;
    background-color: rgba(255,255,255,.7); height: 2.6rem;
    font-size: 1.2rem; font-weight: 600; border-radius: 1rem .5rem .5rem .5rem;
    padding: 0 1.2rem; display: inline-flex; align-items: center; gap: 1rem;
}
.stm_pop .gisp_map_scale em{ height: .8rem; border: 2px solid #1e2124; border-top: none; }
.stm_pop .gisp_map_scale strong{ white-space: nowrap; }

/* ol 기본 줌·축척은 숨긴다 — 위 커스텀 줌·축척과 겹친다(GIS 화면도 같은 이유로 가린다).
   축척 값은 ol 컨트롤이 아니라 stationMapPop.js _updateScale 이 직접 계산해 넣는다(그 주석 참고). */
.stm_pop .ol-zoom,
.stm_pop .ol-scale-line{ display: none; }

/* 헤더 닫기 버튼.
   ★ 공통 class="btn_pop_close" 를 쓰지 않는다 — ui.js:559 가 그 클래스에 `return false` 로
     바인딩돼 있어 이 팝업의 닫기 처리까지 막는다(실측 2026-10-01). 모양만 같게 맞춘다. */
.stm_pop .stm_btn_close{
    position: relative; width: 2.4rem; height: 2.4rem; flex: none;
}
.stm_pop .stm_btn_close::before,
.stm_pop .stm_btn_close::after{
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 1.8rem; height: 2px; background: #fff;
}
.stm_pop .stm_btn_close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.stm_pop .stm_btn_close::after{ transform: translate(-50%,-50%) rotate(-45deg); }
.stm_pop .stm_btn_close:focus{ outline: .1rem solid #fff; outline-offset: .2rem; }

/* —— 지점명 레이블 ON/OFF 스위치 (설계서 슬라이드 5, 지도 좌하단) —— */
.stm_label_sw{
    position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .8rem;
    height: 3rem; padding: 0 .8rem 0 1.2rem;
    background: rgba(255,255,255,.9); border-radius: 1.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.stm_sw_tit{ font-size: 1.3rem; color: var(--mma-text-color); }   /* #1e2124 — 디자이너 요청 2026-10-02 */
.stm_sw{
    position: relative; width: 4.8rem; height: 2.2rem; border-radius: 1.1rem;
    background: #c5ccd4; transition: background .15s;
}
.stm_sw::after{
    content: ""; position: absolute; top: .2rem; left: .2rem;
    width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #fff;
    transition: left .15s;
}
.stm_sw.on{ background: var(--mma-color-prim); }
.stm_sw.on::after{ left: 2.8rem; }
.stm_sw_txt{
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 1.1rem; font-weight: 700; color: #fff; left: .8rem;
}
.stm_sw:not(.on) .stm_sw_txt{ left: auto; right: .6rem; color: #6b7280; }

/* —— 선택된 지점 —— */
.stm_sel_bar{
    display: flex; align-items: flex-start; gap: 1.6rem;
    margin: 1.2rem 2rem 0; padding: 1.2rem 1.6rem;
    border: 1px solid var(--mma-line-color); border-radius: .8rem;
    background: var(--mma-bg-01); min-height: 5.8rem;
}
.stm_sel_tit{
    flex: none; display: inline-flex; align-items: center; gap: .6rem;
    font-size: 1.5rem; font-weight: 600; color: var(--mma-text-secd); height: 3.4rem;
}
/* 건수는 배지로 — 괄호 숫자보다 한눈에 들어온다 */
.stm_sel_cnt{
    min-width: 2.2rem; height: 2.2rem; padding: 0 .7rem; border-radius: 1.1rem;
    background: var(--mma-color-prim); color: #fff; font-size: 1.2rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.stm_sel_max{ font-size: 1.3rem; font-weight: 400; color: #8b9199; }
/* 칩은 2줄까지만 보이고 넘치면 목록 오른쪽에 세로 스크롤(디자이너 요청 2026-10-02).
   2줄 높이 = 칩 3.4rem × 2 + 줄 간격 .8rem = 7.6rem. 칩 높이(.stm_sel_tag)를 바꾸면 이 값도 같이 고친다.
   스크롤은 바 전체가 아니라 목록에만 건다 — 바에 걸면 「선택된 지점」 제목까지 같이 밀려 올라간다. */
.stm_sel_list{
    flex: 1; min-width: 0; display: flex; gap: .8rem; flex-wrap: wrap; align-content: flex-start;
    align-items: center; min-height: 3.4rem; max-height: 7.6rem; overflow-y: auto; padding-right: .4rem;
}
.stm_sel_empty{ font-size: 1.4rem; color: #8b9199; }

/* 하단 버튼 줄 — 위 카드와 같은 2rem 좌우 여백. 위 선(border-top)은 카드 배치에선 선이 겹쳐 보여 뺀다 */
.stm_pop .layerpop_btn_wrap{ padding: 1.6rem 2rem; }

/* 칩은 화면의 기존 선택지점 태그(.subj_btn_tag, sub.css:422)와 같은 모양으로 맞춘다 */
.stm_sel_tag{
    border: 1px solid var(--mma-line-color); background-color: #fff;
    padding: 0 .8rem 0 1.2rem; height: 3.4rem; border-radius: 3.4rem;
    display: inline-flex; align-items: center; gap: .4rem; font-size: 1.4rem;
}
.stm_sel_del{ width: 1.6rem; height: 1.6rem; flex: none; position: relative; }
.stm_sel_del::before, .stm_sel_del::after{
    content: ""; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1px; background: #8b9199;
}
.stm_sel_del::before{ transform: translate(-50%,-50%) rotate(45deg); }
.stm_sel_del::after{ transform: translate(-50%,-50%) rotate(-45deg); }

/* —— 반응형 —— */
@media (max-width: 768px) {
    .stm_map_tools{ display: block; }       /* Ctrl 키가 없어 영역선택은 이 버튼으로만 된다 */
    /* 좁은 폭에선 안쪽 여백이 지도만 줄인다 — 카드 배치를 풀고 꽉 채운다 */
    .stm_map_area{ margin: 0; border: 0; border-radius: 0; }
    .stm_sel_bar{ margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
    /* '지도로 선택' 버튼은 모바일도 PC 와 같다 — 「지점」 가운데, 버튼 오른쪽 끝 (사용자 결정 2026-10-01) */
    .stm_pop .stm_box{ width: 100vw; height: 100vh; border-radius: 0; border-width: 0; }
    .stm_sub{ flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem 1.6rem; }
    .stm_guide{ display: none; }              /* 모바일엔 Ctrl 이 없어 안내가 틀린 말이 된다 */
    /* 모바일은 탭으로 뜨는 툴팁 — 「창 닫기」를 눌러야 하므로 pointer-events 를 살린다 */
    .stm_pop .tw_tooltip{ pointer-events: auto; }
    .stm_pop .tw_tooltip .m_tool_btn_wrap{ display: flex; }
    .stm_sel_bar{ padding: 1rem 1.6rem; flex-direction: column; gap: .6rem; }
    .stm_sel_list{ width: 100%; }           /* 2줄 제한·스크롤은 PC 와 같다 */
    .stm_sel_tit{ padding-top: 0; }
    .stm_pop .layerpop_btn_wrap{ padding: 1.2rem 1.6rem; }
    .stm_pop .layerpop_btn_wrap .krds-btn{ flex: 1; }   /* 터치 타겟 확보 */
}