@charset "UTF-8";

/* ==================================== 서브 공통 ========================================== */
/* ==================================== 서브 공통 ========================================== */
/* ==================================== 서브 공통 ========================================== */





/* ==================================== 서브 개별 본문 컨텐츠 ========================================== */
/* ==================================== 서브 개별 본문 컨텐츠 ========================================== */
/* ==================================== 서브 개별 본문 컨텐츠 ========================================== */


/* ==================== sub0101 ==================================== */
/* ==================== sub0101 ==================================== */
#sub0101{}

#sub0101 .vhome_info{ display: flex; gap: 20px;  }
#sub0101 .vhome_info .con_left{ flex: 1 1 0; position: relative;}


/* 범례 아이콘 */
#sub0101 .vhome_info .legend_ico{ display: inline-block; width: 16px; height: 16px; border-radius: 999px; }
#sub0101 .vhome_info .legend_ico.level_100{ background-color: #6AD5DD; }
#sub0101 .vhome_info .legend_ico.level_80{ background-color: #9CDDC7; }
#sub0101 .vhome_info .legend_ico.level_60{ background-color: #FECDA4; }
#sub0101 .vhome_info .legend_ico.level_40{ background-color: #FFAD88; }
#sub0101 .vhome_info .legend_ico.level_20{ background-color: #FE8483; }

/* 범례 드롭다운 */
#sub0101 .vhome_info .legend_dropdown { position: absolute; top: 20px; left: 20px; border: 1px solid #B6BEC5; background: #fff; border-radius: 5px; }
#sub0101 .vhome_info .legend_toggle { display: flex; justify-content: space-between; align-items: center; min-width: 140px; padding: 6px 10px;  cursor: pointer;  font-size: 15px; font-weight: 600;}
#sub0101 .vhome_info .legend_toggle::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 10px; background: url(/main/images/common/ico_drop_arrow.svg) no-repeat center center; transform: rotate(180deg); transition: transform 0.2s; }
/* 화살표 방향 */
#sub0101 .vhome_info .legend_dropdown.open .legend_toggle::after { transform: rotate(0deg); }
/* 목록 */
#sub0101 .vhome_info .legend_list { width: 100%; display: none; padding: 0 10px 15px 10px; }
#sub0101 .vhome_info .legend_dropdown.open .legend_list { display: block; }
#sub0101 .vhome_info .legend_list li { display: flex; align-items: center; cursor: default;  font-size: 15px;}
#sub0101 .vhome_info .legend_list li .legend_ico { margin-right: 5px; }



#sub0101 .vhome_info .con_right{ flex: 0 0 auto; width: 350px; }
#sub0101 .map_inner{ width: 100%; min-height: 720px; }
#sub0101 .vhome_info .normal_table .legend_ico { margin-left: 5px; }

@media screen and (max-width:1024px) {
  #sub0101 .vhome_info{ flex-direction: column; }
  #sub0101 .vhome_info .con_left{ flex: 1 1 auto; min-height: 400px; }
  #sub0101 .vhome_info .con_right{ flex: 1 1 0;  width: 100%; }
  #sub0101 .map_inner{ min-height: 400px; }
}


/* ==================== sub0102 ==================================== */
/* ==================== sub0102 ==================================== */
#sub0102{}

#sub0102 .vhome_info{ display: flex; gap: 20px;  }
#sub0102 .vhome_info .con_left{ flex: 1 1 0; position: relative;}


/* 범례 아이콘 */
#sub0102 .vhome_info .legend_ico{ display: inline-block; width: 16px; height: 16px; background-color: #000; border-radius: 999px; }
#sub0102 .vhome_info .legend_ico.level_100{ background-color: #6AD5DD; }
#sub0102 .vhome_info .legend_ico.level_80{ background-color: #9CDDC7; }
#sub0102 .vhome_info .legend_ico.level_60{ background-color: #FECDA4; }
#sub0102 .vhome_info .legend_ico.level_40{ background-color: #FFAD88; }
#sub0102 .vhome_info .legend_ico.level_20{ background-color: #FE8483; }

.lv05{ background-color: #6AD5DD; }
.lv04{ background-color: #9CDDC7; }
.lv03{ background-color: #FECDA4; }
.lv02{ background-color: #FFAD88; }
.lv01{ background-color: #FE8483; }

/* 범례 드롭다운 */
#sub0102 .vhome_info .legend_dropdown { position: absolute; top: 20px; left: 20px; border: 1px solid #B6BEC5; background: #fff; border-radius: 5px; }
#sub0102 .vhome_info .legend_toggle { display: flex; justify-content: space-between; align-items: center; min-width: 140px; padding: 6px 10px;  cursor: pointer;  font-size: 15px; font-weight: 600;}
#sub0102 .vhome_info .legend_toggle::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 10px; background: url(/main/images/common/ico_drop_arrow.svg) no-repeat center center; transform: rotate(180deg); transition: transform 0.2s; }
/* 화살표 방향 */
#sub0102 .vhome_info .legend_dropdown.open .legend_toggle::after { transform: rotate(0deg); }
/* 목록 */
#sub0102 .vhome_info .legend_list { width: 100%; display: none; padding: 0 10px 15px 10px; }
#sub0102 .vhome_info .legend_dropdown.open .legend_list { display: block; }
#sub0102 .vhome_info .legend_list li { display: flex; align-items: center; cursor: default;  font-size: 15px;}
#sub0102 .vhome_info .legend_list li .legend_ico { margin-right: 5px; }





#sub0102 .vhome_info .con_right{ flex: 0 0 auto; width: 350px; }

#sub0102 .map_inner{ width: 100%; min-height: 720px; }

#sub0102 .vhome_info .normal_table .legend_ico { margin-left: 5px; }

@media screen and (max-width:1024px) {
  #sub0102 .vhome_info{ flex-direction: column; }
  #sub0102 .vhome_info .con_left{ flex: 1 1 auto; min-height: 400px; }
  #sub0102 .vhome_info .con_right{ flex: 1 1 0;  width: 100%; }
  #sub0102 .map_inner{ min-height: 400px; }
}





/* ==================== sub0201 ==================================== */
/* ==================== sub0201 ==================================== */
#sub0201{}

#sub0201 .vhome_info{ display: flex; flex-direction: row-reverse; gap: 20px;  }
#sub0201 .vhome_info .con_left{ flex: 1 1 0; position: relative;}


/* 범례 아이콘 */
#sub0201 .vhome_info .legend_ico{ display: inline-block; width: 16px; height: 16px; background-color: #000; border-radius: 999px; }
#sub0201 .vhome_info .legend_ico.level_100{ background-color: #6AD5DD; }
#sub0201 .vhome_info .legend_ico.level_80{ background-color: #9CDDC7; }
#sub0201 .vhome_info .legend_ico.level_60{ background-color: #FECDA4; }
#sub0201 .vhome_info .legend_ico.level_40{ background-color: #FFAD88; }
#sub0201 .vhome_info .legend_ico.level_20{ background-color: #FE8483; }

/* 범례 드롭다운 */
#sub0201 .vhome_info .legend_dropdown { position: absolute; top: 20px; right: 20px; border: 1px solid #B6BEC5; background: #fff; border-radius: 5px; }
#sub0201 .vhome_info .legend_toggle { display: flex; justify-content: space-between; align-items: center; min-width: 140px; padding: 6px 10px;  cursor: pointer;  font-size: 15px; font-weight: 600;}
#sub0201 .vhome_info .legend_toggle::after { content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 10px; background: url(/main/images/common/ico_drop_arrow.svg) no-repeat center center; transform: rotate(180deg); transition: transform 0.2s; }
/* 화살표 방향 */
#sub0201 .vhome_info .legend_dropdown.open .legend_toggle::after { transform: rotate(0deg); }
/* 목록 */
#sub0201 .vhome_info .legend_list { width: 100%; display: none; padding: 0 10px 15px 10px; }
#sub0201 .vhome_info .legend_dropdown.open .legend_list { display: block; }
#sub0201 .vhome_info .legend_list li { display: flex; align-items: center; cursor: default;  font-size: 15px;}
#sub0201 .vhome_info .legend_list li .legend_ico { margin-right: 5px; }





#sub0201 .vhome_info .con_right{ flex: 0 0 auto; width: 350px; }

#sub0201 .chart_inner{ width: 100%; min-height: 720px; border: 1px solid #CDD1D5; }

#sub0201 .vhome_info .normal_table .legend_ico { margin-left: 5px; }

@media screen and (max-width:1024px) {
  #sub0201 .vhome_info{ flex-direction: column-reverse; }
  #sub0201 .vhome_info .con_left{ flex: 1 1 auto; min-height: 400px; }
  #sub0201 .vhome_info .con_right{ flex: 1 1 0;  width: 100%; }
  #sub0201 .chart_inner{ min-height: 400px; }
}


/* ==================== sub030101 ==================================== */
/* ==================== sub030101 ==================================== */
@media all and (max-width:860px) {
  /* 모바일: 활용사례 검색필터, LNB 숨김 */
  #sub030101 > .filter_section { display: none; }
  .sub_container:has(#sub030101) .lnb_zone { display: none; }
  .sub_container:has(#sub030101) .sub_body { padding-top: 0; }
  .sub_container:has(#sub030101) .sub_body_top { padding-top: 20px; }
  #sub030101 .control_bar { margin-top: 0; }
}

/* ==================== sub030102 ==================================== */
/* ==================== sub030102 ==================================== */

/* ==================== sub0302 ==================================== */
/* ==================== sub0302 ==================================== */
@media all and (max-width:860px) {
  .sub_container:has(#sub0302) .lnb_zone { display: none; }
  .sub_container:has(#sub0302) .sub_body { padding-top: 0; }
  .sub_container:has(#sub0302) .sub_body_top { padding-top: 20px; }
}
#sub0302 .bt_map_view{ width: 40px; height: 20px; background: url(/main/images/sub/ico_search.svg) no-repeat center center;}

/* custom_modal 경우 */
.custom_modal.modal0302 .body_cnt .map_container{ height: 500px; border: 1px solid #CDD1D5;}
/* bpopup_modal 경우 */
.bpopup_modal_box.modal0302 .body_cnt .map_container{ height: 500px; position: relative; border: 1px solid #CDD1D5;}

@media screen and (max-width:640px) {
  /* custom_modal 경우 */
  .custom_modal.modal0302 .body_cnt .map_container{ height: 300px; }
  /* bpopup_modal 경우 */
  .bpopup_modal_box.modal0302 .body_cnt .map_container{ height: 300px; }
}

/* 말풍선 스타일 */
.marker_label { position: absolute; background: #fff; border: 1px solid #000; padding: 6px 10px; font-size: 14px; line-height: 1.4; border-radius: 4px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.marker_label::after { content: ""; position: absolute; z-index: 2; bottom: -22px; left: 50%; transform: translateX(-50%); width: 19px; height: 23px; background: url(/main/images/common/marker_tail.svg) no-repeat center center; }





/* ==================== sub0401 ==================================== */
/* ==================== sub0401 ==================================== */
#sub0401 .step_ul1{ display: flex; gap: 40px; }
#sub0401 .step_ul1 li{ flex: 1 1 0; position: relative; }
#sub0401 .step_ul1 li:not(:last-child)::after{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -35px; width: 30px; height: 30px; background: url(/main/images/sub/flow_arrow_right.svg) no-repeat center center; }

#sub0401 .step_ul1 li .item{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #CDD1D5; padding: 20px; }
#sub0401 .step_ul1 li .item .circle{ display: flex;  justify-content: center; align-items: center; flex-direction: column; width: 100px; height: 100px; background-color: #244CB1; border-radius: 999px; }
#sub0401 .step_ul1 li:nth-child(even) .item .circle { background: #2186B3;}
#sub0401 .step_ul1 li .item .circle strong{ color: #fff;}
#sub0401 .step_ul1 li .item .circle::after{ content: ''; width: 32px; height: 32px; background: url(/main/images/sub/sub0401_ico_1.svg) no-repeat center center; }
#sub0401 .step_ul1 li .item .t1{ margin-top: 10px; font-weight: 700;}
#sub0401 .step_ul1 li .item .t2{ width: 100%; text-align: center; font-size: 15px; margin-top: 20px; padding: 10px; background-color: #F8F9FA;}
#sub0401 .step_ul1 li .item.box1 .circle::after{ background-image: url(/main/images/sub/sub0401_ico_1.svg); }
#sub0401 .step_ul1 li .item.box2 .circle::after{ background-image: url(/main/images/sub/sub0401_ico_2.svg); }
#sub0401 .step_ul1 li .item.box3 .circle::after{ background-image: url(/main/images/sub/sub0401_ico_3.svg); }
#sub0401 .step_ul1 li .item.box4 .circle::after{ background-image: url(/main/images/sub/sub0401_ico_4.svg); }
@media screen and (max-width:860px) {
  #sub0401 .step_ul1{ gap: 40px; flex-wrap: wrap; }
  #sub0401 .step_ul1 li{ flex: 1 1 calc((100% - 40px)/2);  }
  #sub0401 .step_ul1 li:nth-child(2)::after{ display: none; }
}
@media screen and (max-width:480px) {
  #sub0401 .step_ul1{ flex-direction: column; }
  #sub0401 .step_ul1 li{ flex: 1 1 100%;  }
  #sub0401 .step_ul1 li:nth-child(2)::after{ display: block; }
  #sub0401 .step_ul1 li:not(:last-child)::after{ top: auto; bottom: -35px; right: auto; left: 50%; transform:  translateX(-50%) rotate(90deg); }
}


/* 정비유형 트리 구조도 */
#sub0401 .orgtree { max-width: 1100px; margin: 0 auto; position: relative; text-align: center; }
/* 루트 */
#sub0401 .node_root { display: inline-block; padding: 15px 50px; background: #3a4450; color: #fff; font-weight: 700; font-size: 19px; position: relative; margin-bottom: 30px; }
/* ======== 루트 수직선 */
#sub0401 .node_root::after { content: ""; position: absolute; left: 50%; bottom: -30px; width: 1px; height: 30px; background: #ccc; transform: translateX(-50%); }
/* 1단 영역 컨테이너 */
#sub0401 .orgtree_cols { display: flex; gap: 40px; justify-content: space-between; margin-top: 30px; position: relative; }
/* ======== 수평 선 */
#sub0401 .orgtree_cols::before { content: ""; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 78%; margin: 0 ; height: 1px; background: #ccc; }
/* 개별 branch */
#sub0401 .branch { flex: 1 1 calc( (100% - 120px)/4); position: relative; display: flex; flex-direction: column; gap: 10px; }
/* ==========  각 branch 상단 세로선 */
#sub0401 .branch::before { content: ""; position: absolute; top: -30px; left: 50%; width: 1px; height: 30px; background: #ccc; transform: translateX(-50%); }
/* 1단 파란 노드 */
#sub0401 .node_lvl1 { background: #244CB1; color: #fff; padding: 7px; font-weight: 700; text-align: center; word-break: break-all; }
/* 카드 */
#sub0401 .card { border: 1px solid #ddd; background: #fff; text-align: left; overflow: hidden; }
#sub0401 .card_title { background: #e8f0ff; color: #244CB1; padding: 5px; font-weight: 700; text-align: center; font-size: 15px; word-break: break-all; }
#sub0401 .card_list { border-top: 1px solid #ddd; padding: 5px 0; }
#sub0401 .card_list li { padding: 5px; text-align: center; font-size: 15px; }

@media screen and (max-width:860px) {
  #sub0401 .node_root { margin-bottom: 20px; padding: 15px 30px; }
  #sub0401 .node_root::after { display: none; }
  /* 브랜치 4개 → 2개씩 두 줄 */
  #sub0401 .orgtree_cols { flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 0; }
  #sub0401 .orgtree_cols::before { display: none; }
  #sub0401 .branch { flex: 0 0 calc(50% - 20px); }
  #sub0401 .branch::before { display: none; }

}






/* ==================== sub0402 ==================================== */
/* ==================== sub0402 ==================================== */
/* flex-box */
/* flex-box */
#sub0402 .flex_ul1{ display: flex; gap: 20px; }
#sub0402 .flex_ul1 li{ flex: 1 1 0; }
#sub0402 .flex_ul1 li .item{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #CDD1D5; padding: 20px; }
#sub0402 .flex_ul1 li .item .circle{ display: flex;  justify-content: center; align-items: center; flex-direction: column; width: 100px; height: 100px; background-color: #244CB1; border-radius: 999px; }
#sub0402 .flex_ul1 li:nth-child(even) .item .circle { background: #2186B3;}
#sub0402 .flex_ul1 li .item .circle strong{ color: #fff;}
#sub0402 .flex_ul1 li .item .circle::after{ content: ''; width: 32px; height: 32px; background: url(/main/images/sub/sub0402_ico_1.svg) no-repeat center center; }
#sub0402 .flex_ul1 li .item.box1 .circle::after{ background-image: url(/main/images/sub/sub0402_ico_1.svg); }
#sub0402 .flex_ul1 li .item.box2 .circle::after{ background-image: url(/main/images/sub/sub0402_ico_2.svg); }
#sub0402 .flex_ul1 li .item.box3 .circle::after{ background-image: url(/main/images/sub/sub0402_ico_3.svg); }

#sub0402 .flex_ul1 li .item .t1{ margin-top: 10px; font-weight: 700; font-size: 19px;}
#sub0402 .flex_ul1 li .item .t1_round{ font-size: 15px; margin-top: 10px; font-weight: 700; text-align: center; color: #244CB1; padding: 5px 15px; border-radius: 999px; border: 1px solid #244CB1;}
#sub0402 .flex_ul1 li:nth-child(even) .item .t1_round { color: #2186B3; border-color: #2186B3;}


#sub0402 .flex_ul1 li .item .stxt1{ width: 100%; text-align: center; font-size: 15px; margin-top: 5px;}
#sub0402 .flex_ul1 li .item .stxt2{ width: 100%; text-align: center; font-size: 15px; margin-top: 10px; padding: 20px 10px; background-color: #F8F9FA;}
#sub0402 .flex_ul1 li .item .stxt2 > ul{  width: 100%;}
#sub0402 .flex_ul1 li .item .stxt2 > ul > li{ position: relative; margin-top: 0; text-align: center; }
#sub0402 .flex_ul1 li .item .stxt2 > ul > li::before{ content: ''; display: inline-block; width: 3px; height: 3px; margin-right: 5px; background-color: #777; border-radius: 999px; vertical-align: middle;}

@media screen and (max-width:920px) {
  #sub0402 .flex_ul1{ flex-wrap: wrap; gap: 20px; }
  #sub0402 .flex_ul1 li{ flex: 0 1 calc( 50% - 20px); }
}
@media screen and (max-width:600px) {
  #sub0402 .flex_ul1{ flex-direction: column; }
  #sub0402 .flex_ul1 li{ flex: 0 1 calc( 100%); }
}





/* flow_ul1 */
/* flow_ul1 */
#sub0402 .flow_ul1{ display: flex; flex-wrap: wrap; gap: 20px 0; }
#sub0402 .flow_ul1 > li{ flex: 1 1 auto; width: calc((100% - 120px) / 3); margin-right: 40px; position: relative; }
#sub0402 .flow_ul1 > li:not(:last-child)::after{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -35px; width: 30px; height: 30px; background: url(/main/images/sub/flow_arrow_right.svg) no-repeat center center; }

#sub0402 .flow_ul1 > li .item{ display: flex; flex-direction: column; height: 100%;  }
#sub0402 .flow_ul1 > li .item .title{ flex: 0 0 auto; padding: 7px; background-color: #244CB1; color: #fff; font-weight: 700; text-align: center; }
#sub0402 .flow_ul1 > li .item .txt_ul{ flex: 1 1 0; display: flex; flex-direction: column; justify-content: center;  padding: 5px; border: 1px solid #CDD1D5; }
#sub0402 .flow_ul1 > li .item .txt_ul > li{ text-align: center; font-size: 15px; }


@media screen and (max-width:860px) {
  #sub0402 .flow_ul1 > li{  width: calc((100% - 80px) / 2); }
}
@media screen and (max-width:480px) {
  #sub0402 .flow_ul1{ gap: 40px 0; flex-direction: column; }
  #sub0402 .flow_ul1 > li{  width: calc(100%); }
  #sub0402 .flow_ul1 > li:not(:last-child)::after{ content: ''; position: absolute; top: auto; bottom: -35px; left: 50%; transform: translateX(-50%) rotate(90deg); right: auto;  width: 30px; height: 30px; background: url(/main/images/sub/flow_arrow_right.svg) no-repeat center center; }

}

/* flow_ul2 */
/* flow_ul2 */
#sub0402 .flow_ul2{ display: flex; flex-wrap: wrap; gap: 20px 0; }
#sub0402 .flow_ul2 > li{ flex: 1 1 auto; width: calc((100% - 120px) / 3); margin-right: 40px; position: relative; }
#sub0402 .flow_ul2 > li:not(:last-child)::after{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -35px; width: 30px; height: 30px; background: url(/main/images/sub/flow_arrow_right.svg) no-repeat center center; }

#sub0402 .flow_ul2 > li .item{ display: flex; flex-direction: column; height: 100%;  }
#sub0402 .flow_ul2 > li .item .title{ flex: 0 0 auto; padding: 7px; background-color: #2186B3; color: #fff; font-weight: 700; text-align: center; }
#sub0402 .flow_ul2 > li .item .txt_ul{ flex: 1 1 0; display: flex; flex-direction: column; justify-content: center;  padding: 5px; border: 1px solid #CDD1D5; }
#sub0402 .flow_ul2 > li .item .txt_ul > li{ text-align: center; font-size: 15px; }


@media screen and (max-width:860px) {
  #sub0402 .flow_ul2 > li{  width: calc((100% - 80px) / 2); }
}
@media screen and (max-width:480px) {
  #sub0402 .flow_ul2{ gap: 40px 0; flex-direction: column; }
  #sub0402 .flow_ul2 > li{  width: calc(100%); }
  #sub0402 .flow_ul2 > li:not(:last-child)::after{ content: ''; position: absolute; top: auto; bottom: -35px; left: 50%; transform: translateX(-50%) rotate(90deg); right: auto;  width: 30px; height: 30px; background: url(/main/images/sub/flow_arrow_right.svg) no-repeat center center; }

}





/* ==================== sub0403 ==================================== */
/* ==================== sub0403 ==================================== */


/* step_flow */
/* step_flow */
#sub0403 .step_flow { list-style: none; display: flex; flex-wrap: wrap; gap: 20px 0; margin: 0; padding: 0; justify-content: space-between; position: relative; }
#sub0403 .step_flow li { flex: 1 1 auto; width: 20%; text-align: center; position: relative; padding-top: 40px; }
#sub0403 .step_flow li .dot { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #B3D8E8; position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); }
#sub0403 .step_flow li:not(:last-child) > .dot::after { content: ''; position: absolute; top: 5px; left: 100px; width: 100%; height: 1px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #333; }
#sub0403 .step_flow li .dot::before { content: ''; display: inline-block; width: 10px; height: 10px; background-color: #2186B3; border-radius: 999px; }
#sub0403 .step_flow li::before { content: ""; position: absolute; top: 10px; left: 0; width: 100%; height: 1px; border-top: 1px dashed #ccc; z-index: 1; }
#sub0403 .step_flow li .title { font-size: 17px; font-weight: 700; margin: 10px 0 6px; }
/* 설명 */
#sub0403 .step_flow li .desc { font-size: 15px; padding: 0 25px; word-break: keep-all; }
@media (max-width:940px) {
  #sub0403 .step_flow li { flex: 0 1 auto; width: 33.33%; }
}
@media (max-width:640px) {
  #sub0403 .step_flow { display: block; position: relative; padding-left: 11px; /* 콘텐츠 밀기 */

}
  #sub0403 .step_flow::before { content: ""; position: absolute; top: 0; left: 9px; width: 1px; height: 100%; border-left: 1px dashed #ccc; }
  #sub0403 .step_flow li { position: relative; display: flex; width: 100%; flex-direction: column; align-items: normal; padding-top: 2px; padding-left: 20px; margin-bottom: 20px; }
  #sub0403 .step_flow li .dot { position: absolute; left: -11px; top: 3px; transform: none; }
  #sub0403 .step_flow li::before { display: none; }
  #sub0403 .step_flow li .title { text-align: left; margin: 0 0 4px; }
  #sub0403 .step_flow li .desc { padding-left: 0; text-align: left; }
  #sub0403 .step_flow li .dot::after { display: none };
}

/* flow_ul2 */
/* flow_ul2 */
#sub0403 .flow_ul2{ display: flex; flex-wrap: wrap; gap: 20px 0; }
#sub0403 .flow_ul2 > li{ flex: 1 1 auto; width: calc((100% - 120px) / 3); margin-right: 40px; position: relative; }
#sub0403 .flow_ul2 > li:not(:last-child)::after{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -35px; width: 30px; height: 30px; background: url(/main/images/sub/flow_arrow_right.svg) no-repeat center center; }

#sub0403 .flow_ul2 > li .item{ display: flex; flex-direction: column; height: 100%;  }
#sub0403 .flow_ul2 > li .item .title{ flex: 0 0 auto; padding: 7px; background-color: #2186B3; color: #fff; font-weight: 700; text-align: center; }
#sub0403 .flow_ul2 > li .item .txt_ul{ flex: 1 1 0; display: flex; flex-direction: column; justify-content: center;  padding: 5px; border: 1px solid #CDD1D5; }
#sub0403 .flow_ul2 > li .item .txt_ul > li{ text-align: center; font-size: 15px; }


@media screen and (max-width:860px) {
  #sub0403 .flow_ul2 > li{  width: calc((100% - 80px) / 2); }
}
@media screen and (max-width:480px) {
  #sub0403 .flow_ul2{ gap: 40px 0; flex-direction: column; }
  #sub0403 .flow_ul2 > li{  width: calc(100%); }
  #sub0403 .flow_ul2 > li:not(:last-child)::after{ content: ''; position: absolute; top: auto; bottom: -35px; left: 50%; transform: translateX(-50%) rotate(90deg); right: auto;  width: 30px; height: 30px; background: url(/main/images/sub/flow_arrow_right.svg) no-repeat center center; }

}










/* ==================== sub0404 ==================================== */
/* ==================== sub0404 ==================================== */
#sub0404 {}
#sub0404 .img_ul{ display: flex; gap: 20px; margin-top: 20px;}
#sub0404 .img_ul li{}

/* flex_ul1 */
/* flex_ul1 */
#sub0404 .flex_ul1{ display: flex; gap: 40px; margin-top: 20px; }
#sub0404 .flex_ul1 li{ flex: 1 1 0; position: relative; }
#sub0404 .flex_ul1 li:not(:last-child)::after{ content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -35px; width: 30px; height: 30px; background: url(/main/images/sub/sub0404_ico_plus.svg) no-repeat center center; }

#sub0404 .flex_ul1 li .item{ height: 100%; display: flex; justify-content: space-between; border: 1px solid #CDD1D5; padding: 30px; }
#sub0404 .flex_ul1 li .item::after{ content: ''; flex: 0 0 auto; display: inline-flex; width: 32px; height: 32px; background-color: #ddd; }
#sub0404 .flex_ul1 li .item.box1::after{ background: url(/main/images/sub/sub0404_ico_1.svg) no-repeat center center; }
#sub0404 .flex_ul1 li .item.box2::after{ background: url(/main/images/sub/sub0404_ico_2.svg) no-repeat center center; }
#sub0404 .flex_ul1 li .item.box3::after{ background: url(/main/images/sub/sub0404_ico_3.svg) no-repeat center center; }

#sub0404 .flex_ul1 li .item .t2{ flex: 1 1 auto; padding-right: 30px; max-width: 240px;}

@media screen and (max-width:860px) {
  #sub0404 .flex_ul1{ flex-direction: column; }
  #sub0404 .flex_ul1 li{ flex: 1 1 0; position: relative; }
  #sub0404 .flex_ul1 li:not(:last-child)::after{  top: auto; bottom: -35px; right: auto; left: 50%; transform: translateX(-50%);}
  #sub0404 .flex_ul1 li .item{  padding: 20px; }
  #sub0404 .flex_ul1 li .item .t2{  max-width: 100%; }
}

/* circle_box */
/* circle_box */
#sub0404 .circle_box{ padding-bottom: 60px; position: relative; }
#sub0404 .circle_box::after{ content: ''; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; background: url(/main/images/sub/sub0404_arrow_2.svg) no-repeat center center; }
#sub0404 .circle_box .cir_ul{ display: flex; justify-content: center; }
#sub0404 .circle_box .cir_ul > li{ flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 220px; height: 220px; background: url(/main/images/sub/sub0404_bg_1.png) no-repeat center center / contain;  }
#sub0404 .circle_box .cir_ul > li::before{ content: ''; display: inline-flex; width: 32px; height: 32px;}
#sub0404 .circle_box .cir_ul > li + li{ margin-left: -2.5%;}
#sub0404 .circle_box .cir_ul > li .ti{ font-weight: 700; margin-top: 10px; font-size: 19px;}
#sub0404 .circle_box .cir_ul > li.c1::before{ background: url(/main/images/sub/sub0404_b_ico_1.svg) no-repeat center center; }
#sub0404 .circle_box .cir_ul > li.c2::before{ background: url(/main/images/sub/sub0404_b_ico_2.svg) no-repeat center center; }
#sub0404 .circle_box .cir_ul > li.c3::before{ background: url(/main/images/sub/sub0404_b_ico_3.svg) no-repeat center center; }
#sub0404 .circle_box .cir_ul > li.c4::before{ background: url(/main/images/sub/sub0404_b_ico_4.svg) no-repeat center center; }

@media screen and (max-width:1200px) {
  #sub0404 .circle_box{ padding-bottom: 40px;}
  #sub0404 .circle_box .cir_ul > li{ width: 210px; height: 210px;}
  #sub0404 .circle_box .cir_ul > li + li{ margin-left: -3.8%;}
}
@media screen and (max-width:840px) {
  #sub0404 .circle_box{ width: 100%; max-width: 440px; margin: 0 auto;}
  #sub0404 .circle_box .cir_ul{ flex-wrap: wrap; }
  #sub0404 .circle_box .cir_ul > li + li{ margin: 0; }
  #sub0404 .circle_box .cir_ul > li{ width: 50%; aspect-ratio: 1 / 1; height: auto; }
  #sub0404 .circle_box .cir_ul > li:nth-child(1){  margin-right: -4px; }
  #sub0404 .circle_box .cir_ul > li:nth-child(3){ margin-right: -4px; margin-top: -4px;}
  #sub0404 .circle_box .cir_ul > li:nth-child(4){ margin-top: -4px; }
}


/* 정비유형 트리 구조도 */
#sub0404 .orgtree { max-width: 1100px; margin: 0 auto; position: relative; text-align: center; }
/* 루트 */
#sub0404 .node_root { display: inline-block; padding: 15px 50px; background: #3a4450; color: #fff; font-weight: 700; font-size: 19px; position: relative; margin-bottom: 30px; }
/* ======== 루트 수직선 */
#sub0404 .node_root::after { content: ""; position: absolute; left: 50%; bottom: -30px; width: 1px; height: 30px; background: #ccc; transform: translateX(-50%); }
/* 1단 영역 컨테이너 */
#sub0404 .orgtree_cols { display: flex; gap: 40px; justify-content: space-between; margin-top: 30px; position: relative; }
/* ======== 수평 선 */
#sub0404 .orgtree_cols::before { content: ""; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 78%; margin: 0 ; height: 1px; background: #ccc; }
/* 개별 branch */
#sub0404 .branch { flex: 1 1 calc( (100% - 120px)/4); position: relative; display: flex; flex-direction: column; gap: 10px; }
/* ==========  각 branch 상단 세로선 */
#sub0404 .branch::before { content: ""; position: absolute; top: -30px; left: 50%; width: 1px; height: 30px; background: #ccc; transform: translateX(-50%); }
/* 1단 파란 노드 */
#sub0404 .node_lvl1 { background: #244CB1; color: #fff; padding: 7px; font-weight: 700; text-align: center; word-break: break-all; }


@media screen and (max-width:860px) {
  #sub0404 .node_root { margin-bottom: 20px; padding: 15px 30px; }
  #sub0404 .node_root::after { display: none; }
  /* 브랜치 4개 → 2개씩 두 줄 */
  #sub0404 .orgtree_cols { flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 0; }
  #sub0404 .orgtree_cols::before { display: none; }
  #sub0404 .branch { flex: 0 0 calc(50% - 20px); }
  #sub0404 .branch::before { display: none; }

}










/* ==================== sub0405 ==================================== */
/* ==================== sub0405 ==================================== */
#sub0405 .call_list tr.sub-region{ background: #F8F9FA; }
#sub0405 .call_list .toggle_tr_btn{ width: 20px; height: 20px; border: 1px solid #1E2124; border-radius: 2px; background: url(/main/images/sub/ico_plus_black.svg) no-repeat center center; background-color: #fff; }
#sub0405 .call_list .toggle_tr_btn.opened{ background: url(/main/images/sub/ico_minus_white.svg) no-repeat center center; background-color: #1E2124; }
#sub0405 .call_list tr.sub-region.show{ display: table-row; }
#sub0405 .call_list tr.sub-region.hidden{ display: none; }

#sub0405 .call_list .copy-btn { word-break: keep-all; display: inline-block;}
#sub0405 .call_list a[href^='tel:']{ display: inline-block; width: 20px; height: 20px;  background: url(/main/images/sub/ico_call.svg) no-repeat center center; background-color: #2186B3; border-radius: 999px; margin-left: 10px;}

@media screen and (max-width:640px) {
#sub0405 .call_list col.call_col{ width: 55px;}
#sub0405 .call_list .copy-btn{ display: none; text-align: center; min-width: 55px;}
#sub0405 .call_list .copy-btn .copy_txt{ display: none;}
#sub0405 .call_list a[href^='tel:']{ margin-left: 0px;}
}








/* ==================== sub06t204 ==================================== */
/* ==================== sub06t204 ==================================== */

/* flex-box */
/* flex-box */
#sub06t204 .flex_list{ display: flex; gap: 20px; flex-wrap: wrap; }
#sub06t204 .flex_list li{ flex: 0 1 auto; width: calc((100% - 40px)/3); }
#sub06t204 .flex_list li .item{ height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #CDD1D5; padding: 20px; min-width: 0;}
#sub06t204 .flex_list li .item:hover{ border-color: #000; }

#sub06t204 .flex_list li .item .t_part{ display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; text-align: center; padding: 5px 15px; border-radius: 999px; border: 1px solid #244CB1; color: #244CB1;}
#sub06t204 .flex_list li:nth-child(even) .item .t_part{ color: #2186B3; border-color: #2186B3;}
/* #sub06t204 .flex_list li .item .t_part.color_1{ color: #244CB1; border-color: #244CB1;}
#sub06t204 .flex_list li .item .t_part.color_2{ color: #2186B3; border-color: #2186B3;} */

#sub06t204 .flex_list li .item .t_sbj{ width: 100%; margin-top: 10px; font-weight: 700; font-size: 19px; text-align: center;}
#sub06t204 .flex_list li .item .s_txt{ width: 100%; margin-top: 20px; font-size: 15px; text-align: center; word-break: break-all;  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
/* #sub06t204 .flex_list li .item .s_txt.ellipsis{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;} */
#sub06t204 .flex_list li .item .bottom_btn{ margin-top: 20px; display: flex; align-items: center; gap: 10px;}


@media screen and (max-width:960px) {
  #sub06t204 .flex_list{  }
  #sub06t204 .flex_list li{ width: calc((100% - 20px)/2); }
}
@media screen and (max-width:600px) {
  #sub06t204 .flex_list{ flex-direction: column; }
  #sub06t204 .flex_list li{ width: 100%; }
}





/* ==================== sub06t20502 ==================================== */
/* ==================== sub06t20502 ==================================== */