@charset "UTF-8"; .sub_contents_wr { padding: 10px 0; } 
.sub_contents_wr .sub_contents_title { position: relative; } 
.sub_contents_wr .sub_contents_title.mb_0 { margin-bottom: 0; } 
.sub_contents_wr .sub_contents_title.my_0 { margin: 0 auto; } 
.sub_contents_wr .sub_contents_title:first-child { margin-top: 0; } 
.sub_contents_wr .sub_contents_title h4 { position: relative; display: inline-block; font-size: 3.2rem; line-height: 1; padding-left: 34px; background: url(../img/layout/stm-tit-bf.png) no-repeat left top / 23px; } 
@media only screen and (max-width: 1023px){
 .sub_contents_wr .sub_contents_title h4 { font-size: 2.8rem; background-size: 18px; padding-left: 25px; } 
 }
@media only screen and (max-width: 767px){
 .sub_contents_wr .sub_contents_title h4 { font-size: 2.3rem; background-size: 15px; padding-left: 21px; } 
 }
.sub_contents_wr .sub_contents_title .label_s { position: absolute; bottom: 4px; right: -55px; display: block; width: 37px; height: 42px; } 
.sub_contents_wr .sub_contents_title .label_s img { width: 100%; height: 100%; display: block; -o-object-fit: contain; object-fit: contain; } 
.sub_contents_wr .sub_contents_title .label_s + .label_s { right: -102px; } 
.sub_contents_wr .sub_contents_title .title_float_btn { position: absolute; right: 0; bottom: 16px; } 
.sub_contents_wr .sub_contents_title span { font-size: 18px; margin-left: 16px; color: #223958; } 
.sub_contents_wr .sub_contents_title em { font-style: normal; color: #223958; } 
.sub_contents_wr .list_contents { padding: 56px 90px 0; } 
.sub_contents_wr .list_contents .list_item { display: flex; align-items: center; justify-content: space-between; gap: 10px 100px; margin-top: 70px; } 
.sub_contents_wr .list_contents .list_item.arrow { margin-top: 132px; } 
.sub_contents_wr .list_contents .list_item.arrow .list_cont { position: relative; } 
.sub_contents_wr .list_contents .list_item.arrow .list_cont::before { content: ""; width: 162px; height: 96px; background: url(../images/vision_arr.png) no-repeat center/contain; position: absolute; top: -96px; left: 50%; transform: translateX(-50%); } 
.sub_contents_wr .list_contents .list_item.mt-10 { margin-top: 10px; } 
.sub_contents_wr .list_contents .list_item.align-start { align-items: flex-start; } 
.sub_contents_wr .list_contents .list_item:first-child { margin-top: 0; } 
.sub_contents_wr .list_contents .list_item .list_title { width: 135px; color: #05141f; font-size: 19px; font-weight: 800; position: relative; } 
.sub_contents_wr .list_contents .list_item .list_title::before { content: ""; display: block; width: 8px; height: 8px; background: #213f66; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); right: -8px; } 
.sub_contents_wr .list_contents .list_item .list_title::after { content: ""; width: 60px; height: 1px; background: var(--bd-color); display: block; position: absolute; top: 50%; transform: translateY(-50%); right: -72px; } 
.sub_contents_wr .list_contents .list_cont { flex: 1; max-width: 974px; } 
.sub_contents_wr .list_contents .list_cont.px-25 { padding: 0 25px; } 
.sub_contents_wr .list_contents .round_step_bx { display: flex; align-items: center; justify-content: space-between; width: 100%; } 
.sub_contents_wr .list_contents .round_step_bx li { width: calc(33.33% - 15.33px); height: 120px; color: #05141f; border: 1px solid #d9e6f2; border-radius: 100px; background: #f3f5f9; position: relative; display: flex; align-items: center; justify-content: center; } 
.sub_contents_wr .list_contents .round_step_bx li span { text-align: right; font-size: 17px; font-weight: 800; position: absolute; top: 16px; right: 49px; } 
.sub_contents_wr .list_contents .round_step_bx li p { font-size: 18px; font-weight: bold; text-align: center; } 
.sub_contents_wr .list_contents .venn_diagram { width: 974px; display: flex; align-items: center; background: url(../images/venn_diagram_bg@3x.png) no-repeat center/contain; } 
.sub_contents_wr .list_contents .venn_diagram .box { width: 487px; height: 177px; padding: 30px 0; color: #fff; font-size: 18px; font-weight: 400; line-height: 26px; text-align: center; transform: translateX(25px); display: flex; flex-direction: column; align-items: center; justify-content: center; } 
.sub_contents_wr .list_contents .venn_diagram .box.box2 { transform: translateX(-25px); } 
.sub_contents_wr .list_contents .venn_diagram .box h6 { font-size: 17px; font-weight: 800; margin-bottom: 20px; } 
.sub_contents_wr .list_contents .quotes_slogan { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; } 
.sub_contents_wr .list_contents .quotes_slogan::before, .sub_contents_wr .list_contents .quotes_slogan::after { content: ""; display: block; width: 25px; height: 20px; background: url(../images/quotes.png) no-repeat center/contain; transform: translateY(-10px); } 
.sub_contents_wr .list_contents .quotes_slogan::after { transform: rotate(180deg) translateY(10px); } 
.sub_contents_wr .list_contents .quotes_slogan p { position: relative; font-size: 21px; line-height: 26px; } 
.sub_contents_wr .list_contents .quotes_slogan p span { position: relative; } 
.sub_contents_wr .list_contents .quotes_slogan p b { font-size: 34px; font-weight: 900; } 
.sub_contents_wr .list_contents .quotes_slogan p::before { content: ""; width: calc(100% + 10px); height: 22px; background: #ffeedb; position: absolute; bottom: -4px; left: -5px; } 
.sub_contents_wr .list_contents .box_slogan { width: 100%; min-height: 100px; background: #fff; border-radius: 100px; text-align: center; color: #213f66; font-size: 25px; font-weight: bold; line-height: 40px; padding: 30px 0; border: 1px solid var(--bd-color); display: flex; align-items: center; justify-content: center; gap: 14px; } 
.sub_contents_wr .list_contents .box_slogan .khra_txt_logo { display: block; font-size: 32px; font-weight: 800; width: 105px; height: 21px; } 
.sub_contents_wr .list_contents .box_slogan .khra_txt_logo img { display: block; width: 100%; height: 100%; } 
.sub_contents_wr .list_contents .box_slogan .khra_txt_logo span { color: #41b0e9; } 
.sub_contents_wr .list_contents .step_box { display: flex; align-items: stretch; gap: 15px; } 
.sub_contents_wr .list_contents .step_box + .step_box { margin-top: 15px; } 
.sub_contents_wr .list_contents .step_box .box { background: #1276c2; border: 1px solid #1276c2; border-radius: 28px; overflow: hidden; flex: 1; } 
.sub_contents_wr .list_contents .step_box .box .step_title { line-height: 1.2; padding: 15px 20px; color: #fff; min-height: 102px; } 
.sub_contents_wr .list_contents .step_box .box .step_title span { display: block; font-size: 14px; line-height: 23px; margin-bottom: 6px; } 
.sub_contents_wr .list_contents .step_box .box .step_title p { font-size: 21px; font-weight: 400; text-align: center; } 
.sub_contents_wr .list_contents .step_box .box .step_title p b { font-weight: 800; } 
.sub_contents_wr .list_contents .step_box .box .step_cont { background: #fff; border-radius: 28px 28px 0 0; height: calc(100% - 102px); padding: 30px 20px 30px 30px; } 
.sub_contents_wr .list_contents .step_box .box .step_cont li { font-size: 17px; line-height: 24px; margin-top: 20px; padding-left: 16px; position: relative; } 
.sub_contents_wr .list_contents .step_box .box .step_cont li:first-child { margin-top: 0; } 
.sub_contents_wr .list_contents .step_box .box .step_cont li::before { content: ""; width: 6px; height: 6px; background: #1276c2; border-radius: 50%; display: block; position: absolute; top: 9px; left: 0; } 
.sub_contents_wr .list_contents .step_box .box.box2 { background: #c27522; border-color: #c27522; } 
.sub_contents_wr .list_contents .step_box .box.box2 li:before { background: #c27522; } 
.sub_contents_wr .list_contents .step_box .box.box3 { background: #ad9138; border-color: #ad9138; } 
.sub_contents_wr .list_contents .step_box .box.box3 li:before { background: #ad9138; } 
.sub_contents_wr .list_contents .step_box .box.box4 { background: #8f8f92; border-color: #8f8f92; } 
.sub_contents_wr .list_contents .step_box .box.box4 li:before { background: #8f8f92; } 
.sub_contents_wr .list_contents .step_box .box.box4 .step_cont { border-radius: 28px 0 0 0; display: flex; justify-content: center; } 
.sub_contents_wr .list_contents .step_box .box.box4 .step_cont ul { display: inline-block; width: auto; } 
.sub_contents_wr .list_contents .step_box .box.box4:first-child .step_cont { border-radius: 0 28px 0 0; } 
.sub_contents_wr.terms_contents_wr .sub_contents_title { padding-top: 120px; margin-top: 0; } 
.sub_contents_wr.terms_contents_wr .sub_contents_title.my_0 { margin-top: 0; } 
.sub_contents_wr.terms_contents_wr .sub_contents_table_bx { padding: 20px 40px; } 
@media (max-width: 1400px){
 .sub_contents_wr .list_contents .list_item { flex-direction: column; } 
 .sub_contents_wr .list_contents .list_item.align-start { align-items: center; } 
 .sub_contents_wr .list_contents .list_item.mt-10 { margin-top: 30px; } 
 .sub_contents_wr .list_contents .list_item .list_title { margin-right: auto; } 
 .sub_contents_wr .list_contents .list_item .list_cont { flex: initial; width: 100%; display: flex; align-items: center; justify-content: center; } 
 .sub_contents_wr .list_contents .list_item .list_cont.row_2 { flex-direction: column; } 
 .sub_contents_wr .list_contents .list_item .list_cont.row_2 .step_box { width: 100%; } 
 .sub_contents_wr .list_contents .venn_diagram { width: 100%; } 
 .sub_contents_wr .list_contents .venn_diagram .box { width: 50%; transform: translateX(2%); } 
 .sub_contents_wr .list_contents .venn_diagram .box h6 { margin-bottom: 10px; } 
 .sub_contents_wr .list_contents .venn_diagram .box.box2 { transform: translateX(-2%); } 
 }
@media (max-width: 768px){
 .sub_contents_wr .sub_contents_title { margin-bottom: 11.6667vw; width: 100%; } 
 .sub_contents_wr .sub_contents_title.btn_st { margin-bottom: 15.8333vw; } 
 .sub_contents_wr .sub_contents_title.btn_st .title_float_btn { width: 100%; text-align: center; bottom: -15.6944vw; } 
 .sub_contents_wr .sub_contents_title span { position: absolute; bottom: -46px; width: 100%; right: 0; text-align: right; font-size: 26px; } 
 .sub_contents_wr .list_contents { padding: 0; } 
 .sub_contents_wr .list_contents .list_item { flex-direction: column; gap: 12.5vw; margin-top: 16.6667vw; } 
 .sub_contents_wr .list_contents .list_item:first-child { margin-top: 0; } 
 .sub_contents_wr .list_contents .list_item.arrow { margin-top: 33.0556vw; } 
 .sub_contents_wr .list_contents .list_item.arrow .list_cont::before { width: 32.5vw; height: 19.3056vw; top: -45.1389vw; } 
 .sub_contents_wr .list_contents .list_item .list_title { font-size: 4.4444vw; line-height: 1; text-align: center; width: 100%; margin: 0 auto; } 
 .sub_contents_wr .list_contents .list_item .list_title br { display: none; } 
 .sub_contents_wr .list_contents .list_item .list_title::before { content: ""; width: 1.1111vw; height: 1.1111vw; border-radius: 50%; top: initial; bottom: -3.8889vw; left: 50%; right: initial; transform: translateX(-50%); } 
 .sub_contents_wr .list_contents .list_item .list_title::after { content: ""; width: 1px; height: 5.5556vw; top: initial; bottom: -11.1111vw; left: 50%; right: initial; transform: translateX(-50%); } 
 .sub_contents_wr .list_contents .list_cont.px-25 { padding: 0; } 
 .sub_contents_wr .list_contents .round_step_bx { flex-direction: column; gap: 3.1944vw; } 
 .sub_contents_wr .list_contents .round_step_bx li { width: 100%; height: 30.1389vw; border-radius: 15vw; } 
 .sub_contents_wr .list_contents .round_step_bx li span { font-size: 3.8889vw; top: 5.4167vw; right: 10vw; } 
 .sub_contents_wr .list_contents .round_step_bx li p { font-size: 4.7222vw; } 
 .sub_contents_wr .list_contents .venn_diagram { width: 100%; display: flex; align-items: center; flex-direction: column; background: url(../images/venn_diagram_bg_mo.png) no-repeat center/contain; } 
 .sub_contents_wr .list_contents .venn_diagram .box { width: 100%; height: 32.9167vw; padding: 6.1111vw 0; font-size: 3.8889vw; line-height: 1.2; transform: translateX(0); } 
 .sub_contents_wr .list_contents .venn_diagram .box.box2 { transform: translateY(-0.2vw); } 
 .sub_contents_wr .list_contents .venn_diagram .box h6 { font-size: 4vw; margin-bottom: 4.1667vw; } 
 .sub_contents_wr .list_contents .quotes_slogan { gap: 2.7778vw; } 
 .sub_contents_wr .list_contents .quotes_slogan::before, .sub_contents_wr .list_contents .quotes_slogan::after { width: 4.7222vw; height: 4.1667vw; transform: translateY(-1.3889vw); } 
 .sub_contents_wr .list_contents .quotes_slogan::after { transform: rotate(180deg) translateY(1.3889vw); } 
 .sub_contents_wr .list_contents .quotes_slogan p { font-size: 3.8889vw; line-height: 1.25; } 
 .sub_contents_wr .list_contents .quotes_slogan p b { font-size: 6.3889vw; } 
 .sub_contents_wr .list_contents .quotes_slogan p::before { width: calc(100% + 1.3889vw); height: 4.1667vw; bottom: 0vw; left: -0.6944vw; } 
 .sub_contents_wr .list_contents .box_slogan { height: 22.2222vw; font-size: 4.4444vw; line-height: 5.5556vw; padding: 5.5556vw 0; flex-direction: column; } 
 .sub_contents_wr .list_contents .box_slogan .khra_txt_logo { font-size: 5.5556vw; width: 20.8333vw; height: 4.1667vw; } 
 .sub_contents_wr .list_contents .step_box { display: flex; align-items: center; flex-direction: column; gap: 10.1389vw; width: 100%; padding: 0 7.6389vw; } 
 .sub_contents_wr .list_contents .step_box .box { width: 100%; } 
 .sub_contents_wr .list_contents .step_box .box .step_title { padding: 4.1667vw 4.1667vw 6.9444vw; min-height: 14.1667vw; } 
 .sub_contents_wr .list_contents .step_box .box .step_title span { font-size: 3.8889vw; line-height: 1.17; margin-bottom: 0; } 
 .sub_contents_wr .list_contents .step_box .box .step_title p { font-size: 5.8333vw; } 
 .sub_contents_wr .list_contents .step_box .box .step_cont { background: #fff; border-radius: 3.8889vw 3.8889vw 0 0; padding: 8.3333vw 1.3889vw 6.9444vw 6.8vw; height: auto; } 
 .sub_contents_wr .list_contents .step_box .box .step_cont li { line-height: 1.34; font-size: 4.4444vw; margin-top: 3.3333vw; padding-left: 3.6111vw; } 
 .sub_contents_wr .list_contents .step_box .box .step_cont li:first-child { margin-top: 0; } 
 .sub_contents_wr .list_contents .step_box .box .step_cont li::before { content: ""; width: 1.1111vw; height: 1.1111vw; top: 2.7778vw; left: 0; } 
 .sub_contents_wr .list_contents .step_box .box.box2 { background: #c27522; border-color: #c27522; } 
 .sub_contents_wr .list_contents .step_box .box.box2 li:before { background: #c27522; } 
 .sub_contents_wr .list_contents .step_box .box.box3 { background: #ad9138; border-color: #ad9138; } 
 .sub_contents_wr .list_contents .step_box .box.box3 li:before { background: #ad9138; } 
 .sub_contents_wr .list_contents .step_box .box.box4 .step_cont { justify-content: flex-start; } 
 .sub_contents_wr.terms_contents_wr .contents_scroll_bx { padding: 0 5.5556vw; } 
 .sub_contents_wr.terms_contents_wr .sub_contents_title { padding-top: 16.6667vw; margin-top: 0; } 
 .sub_contents_wr.terms_contents_wr .sub_contents_title.my_0 { margin-top: 0; } 
 .sub_contents_wr.terms_contents_wr .label_s { display: inline-block; position: relative; right: initial; bottom: initial; width: 5.1389vw; height: 5.8333vw; transform: translateY(1.3889vw); } 
 .sub_contents_wr.terms_contents_wr .sub_contents_table_bx { padding: 2.7778vw 0; } 
 }

.result_bx_wr em { color: var(--main); } 
.result_bx_wr .result_txt { padding: 4rem 0; text-align: center; font-size: clamp(2.4rem, 2vw, 2.8rem); font-weight: 500; } 
.result_bx_wr .result_bx .result_bx_title { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 2rem; } 
.result_bx_wr .result_bx .result_bx_title h4 { display: inline-block; font-size: clamp(2rem, 2vw, 2.8rem); line-height: 1.2; font-weight: 700; } 
 .result_bx_wr .result_bx .result_list_wr .list a { position: relative; padding: 2.2rem 1.5rem; border-bottom: 1px solid var(--bd-color); } 
.result_bx_wr .result_bx .result_list_wr .list:first-child { margin-top: 0; } 
.result_bx_wr .result_bx .result_list_wr .list .title { display: flex; gap: 30px; justify-content: space-between; align-items: center; margin-bottom: 10px; } 
.result_bx_wr .result_bx .result_list_wr .list .title p { font-size: 1.9rem; font-weight: 500; } 
 .total-more { display: flex; gap: .5rem; align-items: center; font-size: clamp(17px,2vw ,1.9rem); font-weight: 600; padding-right: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%231d1d1d' d='M3.943 9.168h10.102L9.988 5.11a.833.833 0 1 1 1.178-1.178l5.48 5.48.057.063a.833.833 0 0 1-.057 1.115l-5.48 5.48a.833.833 0 1 1-1.178-1.178l4.057-4.058H3.943a.833.833 0 1 1 0-1.666'/%3E%3C/svg%3E") no-repeat right center / 20px; } 
.result_bx_wr .result_bx .result_list_wr .list .cont { line-height: 1.4; color: var(--txt-gray); } 
.result_bx_wr .result_bx .result_list_wr .list .route { font-size: 15px; color: #757575; display: flex; align-items: center; gap: 24px; } 
.result_bx_wr .result_bx .result_list_wr .list .route li { position: relative; } 
.result_bx_wr .result_bx .result_list_wr .list .route li::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -20px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23818892' d='M11.509 7.58a.666.666 0 0 1-.046.891L7.08 12.855a.666.666 0 1 1-.942-.942L10.049 8 6.137 4.087a.667.667 0 1 1 .942-.943l4.384 4.385z'/%3E%3C/svg%3E"); } 
.result_bx_wr .result_bx .result_list_wr .list .route li:first-child::before { display: none; } 
.result_bx_wr .btn_more_wr { padding-top: 33px; text-align: center; } 
.result_bx_wr .btn_more_wr .btn_more { width: 172px; height: 50px; line-height: 48px; text-align: center; border-radius: 4px; border: 1px solid #c1c1c1; background: #fff; color: #5a5b5d; font-size: 16px; } 
@media (max-width: 767px) { /* 타이틀 → 본문 → 브레드크럼 순서 (route 를 order 로 재배치) */
 .result_bx_wr .result_bx .result_list_wr .list a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 1.5rem 0; } 
 .result_bx_wr .result_bx .result_list_wr .list .title { display: contents; } 
 .result_bx_wr .result_bx .result_list_wr .list .title > p { order: 1; width: 100%; } 
 .result_bx_wr .result_bx .result_list_wr .list .cont { order: 2; width: 100%; } 
 .result_bx_wr .result_bx .result_list_wr .list .route { position: static; order: 3; font-size: 14px; color: #818892; gap: 20px; } 
 .result_bx_wr .result_bx .result_list_wr .list .route li::before { left: -16px; width: 12px; height: 12px; background-size: 12px; } 
 }

/* 통합검색 - 라벨/값 구분(date-info) */
.result_bx_wr .result_bx .result_list_wr .list .cont .date-info { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } 
.result_bx_wr .result_bx .result_list_wr .list .cont .date-info em { font-style: normal; color: #1d1d1d; } 
/* 통합검색 - 행 호버 타이틀 밑줄 */
.result_bx_wr .result_bx .result_list_wr .list a:hover .title p,
.result_bx_wr .result_bx .result_list_wr .list a:focus-visible .title p { text-decoration: underline; text-underline-position: under; } 
/* 통합검색 부서/직원 - 소속 센터 칩 */
.result_bx_wr .result_bx .result_list_wr .list .dept-label { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 6px 12px; border-radius: 8px; background: var(--bg-light); font-size: 1.7rem; font-weight: 500; color: #004CAF; } 
/* 통합검색 info 그룹 - 모바일 세로 스택 */
@media only screen and (max-width: 767px){
 .result_bx_wr .result_bx .result_list_wr .list .cont .flex.gap40 { flex-direction: column; align-items: flex-start; gap: 8px; } 
 }

.organize_chart_wr { width: 100%; position: relative; color: #223958; } 
 .contents_scroll_bx .contents_inner_4, .contents_scroll_bx .contents_inner_7 { width: 1400px; margin: 0 auto; height: auto; } 
.organize_chart_wr .organize_chart { width: 100%; max-width: 1400px; margin: 0 auto; } 
.organize_chart_wr .organize_chart::-webkit-scrollbar { height: 10px; } 
.organize_chart_wr .organize_chart::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } 
.organize_chart_wr .organize_chart::-webkit-scrollbar-track { background-color: #ebebeb; border-radius: 10px; } 
.organize_chart_wr .organize_chart .organize_chart_scroll { position: relative; width: 1324px; padding: 0 23px; height: 660px; border-radius: 20px; } 
.organize_chart_wr .organize_chart .box { min-height: 54px; line-height: 22px; padding: 15px 4px; border: 1px solid var(--sub-color); border-radius: 10px; background: var(--sub-color); font-size: 18px; color: #fff; text-align: center; width: 143px; display: flex; align-items: center; justify-content: center; } 
.organize_chart_wr .organize_chart .box.blue { background: #1276c2; color: #fff; } 
.organize_chart_wr .organize_chart h3.box { width: 211px; min-height: 60px; line-height: 22px; padding: 18px 4px; background: #39a7c2; font-size: 18px; color: #fff; } 
.organize_chart_wr .organize_chart h3.box.blue { background: var( --main); border: 1px solid var(--main); } 
.organize_chart_wr .organize_chart .point { width: 140px; height: 140px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; position: relative; margin: 0 auto; z-index: 10; border: 1px solid var(--main); } 
.organize_chart_wr .organize_chart .point h2 { width: 105px; height: 105px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: var(--main); } 
.organize_chart_wr .organize_chart .organ_top { position: relative; padding-bottom: 130px; } 
.organize_chart_wr .organize_chart .organ_top::after { content: ""; width: 68%; height: 1px; border-top: 1px solid #909cab; bottom: -1px; left: 50%; position: absolute; transform: translateX(-50%); } 
.organize_chart_wr .organize_chart .organ_top::before { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 1px; height: 130px; border-left: 1px solid #909cab; } /* 센터장 -> 상단 가로 커넥터를 잇는 중앙 세로선 (organ 개수와 무관하게 항상 표시) */
.organize_chart_wr .organize_chart:has(.organ_body > .organ:first-child:nth-last-child(2)) .organ_top::after { width: 51%; } /* organ 2개일 때 커넥터 폭 (기본 3개 = 68%) */
.organize_chart_wr .organize_chart:has(.organ_body > .organ:only-child) .organ_top::after { display: none; } /* organ 1개일 때 커넥터(가로선) 숨김 */
.organize_chart_wr .organize_chart .organ01 { position: absolute; top: 36px; right: 237px; } 
.organize_chart_wr .organize_chart .organ01::before { content: ""; width: 124px; height: 1px; border-top: 1px solid #909cab; position: absolute; top: 30px; left: -122px; } 
.organize_chart_wr .organize_chart .organ01 h3 { margin-bottom: 40px; position: relative; } 
.organize_chart_wr .organize_chart .organ01 h3::before { content: ""; width: 1px; height: 42px; border-left: 1px solid #909cab; position: absolute; bottom: -42px; left: 50%; transform: translateX(-50%); } 
.organize_chart_wr .organize_chart .organ01 .box { width: 211px; min-height: 60px; line-height: 22px; padding: 18px 4px; font-size: 18px; } 
.organize_chart_wr .organize_chart .organ_body { display: flex; gap: 27px; } 
.organize_chart_wr .organize_chart .organ_body .organ { position: relative; padding-top: 175px; flex: 1; } 
.organize_chart_wr .organize_chart .organ_body .organ05 .sub { justify-content: center; } 
.organize_chart_wr .organize_chart .organ_body .sub { display: flex; gap: 6px; position: relative; justify-content: center; } 
.organize_chart_wr .organize_chart .organ_body .sub::before { content: ""; width: 1px; height: 175px; border-left: 1px solid #909cab; position: absolute; top: -175px; left: 50%; transform: translateX(-50%); } 
.organize_chart_wr .organize_chart .organ_body .sub.col2::after { content: ""; position: absolute; width: calc(143px * 1 + 6px * 1); height: 1px; top: -33px; left: 50%; transform: translateX(-50%); border-top: 1px solid #909cab; } 
.organize_chart_wr .organize_chart .organ_body .sub.col2::before { content: ""; width: 1px; height: 142px; border-left: 1px solid #909cab; position: absolute; top: -175px; left: 50%; transform: translateX(-50%); } 
.organize_chart_wr .organize_chart .organ_body .sub.col2 > ul { position: relative; } 
.organize_chart_wr .organize_chart .organ_body .sub.col2 > ul::before { content: ""; position: absolute; width: 1px; height: 33px; top: -33px; left: 50%; transform: translateX(-50%); border-left: 1px solid #909cab; z-index: -1; } 
.organize_chart_wr .organize_chart .organ_body .sub li { margin-top: 9px; } 
.organize_chart_wr .organize_chart .organ_body .sub li:first-child { margin-top: 0; } 
.organize_chart_wr .organize_chart .organ_body .sub.row ul { display: flex; gap: 6px; } 
.organize_chart_wr .organize_chart .organ_body .sub.row ul::after { content: ""; position: absolute; width: 61%; height: 1px; top: -33px; left: 50%; transform: translateX(-50%); border-top: 1px solid #909cab; } 
.organize_chart_wr .organize_chart .organ_body .sub.row ul li { margin-top: 0; } 
.organize_chart_wr .organize_chart .organ_body .sub.row ul li:nth-child(1)::before { content: ""; position: absolute; width: 1px; height: 33px; top: -33px; left: 86px; border-left: 1px solid #909cab; } 
.organize_chart_wr .organize_chart .organ_body .sub.row ul li:nth-child(3)::before { content: ""; position: absolute; width: 1px; height: 33px; top: -33px; right: 86px; border-left: 1px solid #909cab; } 
.organize_chart_wr .organize_chart .organ_body h3.box { position: absolute; top: 45px; left: 50%; transform: translateX(-50%); z-index: 1; } 

/* sub-team — 팀 box 하위 그룹 (예: 사업운영1팀 → 사업운영부). 자연 흐름으로 배치되어 항목이 늘어나면 자동으로 길어짐 */
.organize_chart_wr .organize_chart .organ_body .sub.col2 { align-items: flex-start; } 
.organize_chart_wr .organize_chart .organ_body .sub-team { position: relative; margin-top: 32px; width: 100%; display: flex; flex-direction: column; gap: 6px; } 
.organize_chart_wr .organize_chart .organ_body .sub-team::before { content: ""; position: absolute; left: 50%; top: -32px; width: 1px; height: 32px; background: #909cab; } 
.organize_chart_wr .organize_chart .organ_body .sub-team li { width: 100%; min-height: 54px; padding: 15px 8px; background: var(--bd-color); color: var(--gray-22); font-size: 17px; font-weight: 500; text-align: center; border-radius: 10px; display: flex; align-items: center; justify-content: center; } 
/* organ02 = ul 0개: 위 세로선 짧게(100px) + 가로 커넥터 숨김 */
.organize_chart_wr .organize_chart .organ_body .organ02 .sub.col2::before { height: 100px; } 
.organize_chart_wr .organize_chart .organ_body .organ02 .sub.col2::after,
/* organ03 = ul 1개: 가로 커넥터 숨김 (세로선은 기본 142px 유지) */
.organize_chart_wr .organize_chart .organ_body .organ03 .sub.col2::after { display: none; } 
.organize_chart_wr .organize_chart .organ_body .organ05 .sub.col2::after { width: calc(143px * 2 + 6px * 2); } 
@media only screen and (max-width: 1023px){
 .organize_chart_wr { min-height: 520px; } 
 .contents_scroll_bx .contents_inner_4, .contents_scroll_bx .contents_inner_7 { width: 983px; } 
 .organize_chart_wr .organize_chart { max-width: unset; min-height: unset; } 
 .organize_chart_wr .organize_chart .organ_top { padding-bottom: 60px; } 
 .organize_chart_wr .organize_chart .organ_top::before { height: 60px; } 
 .organize_chart_wr .organize_chart .organ_body .organ { width: 33.3%; } 
 .organize_chart_wr .organize_chart .box { width: 100%; } 
 .organize_chart_wr .organize_chart .organ_body .sub.col2 > ul { flex: 1; } 
 .organize_chart_wr .organize_chart .organ_top::after { width: 68.4%; } 
 .organize_chart_wr .organize_chart .organ_body .organ04 .sub.col2::after { width: 51%; } 
 .organize_chart_wr .organize_chart .organ_body .organ05 .sub.col2::after { width: 68%; } 
 }
 @media only screen and (max-width: 767px){
 .contents_scroll_bx .contents_inner_4, .contents_scroll_bx .contents_inner_7 { width: 100%; } 
 .organize_chart_wr .organize_chart .point { width: 85px; height: 85px; } 
 .organize_chart_wr .organize_chart .point h2 { width: 85px; height: 85px; font-size: 1.9rem; } 
 .organize_chart_wr .organize_chart .organ_top { padding-bottom: 30px; } 
 .organize_chart_wr .organize_chart .organ_top::before { content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 1px; height: 31px; } 
 .organize_chart_wr .organize_chart .organ_body .organ { display: flex; flex-direction: column; align-items: center; padding-top: 30px; } 
 .organize_chart_wr .organize_chart .organ_body .organ02 .sub.col2::before { display: none; } 
 .organize_chart_wr .organize_chart .organ_body { gap: 10px; } 
 .organize_chart_wr .organize_chart .organ_body h3.box { position: relative; top: unset; left: unset; transform: unset; width: 100%; font-size: 16px; } 
 .organize_chart_wr .organize_chart .organ_body .sub { flex-direction: column; gap: 20px; width: 100%; padding-top: 30px; } 
 .organize_chart_wr .organize_chart .organ_body .sub.col2::before { display: none; } 
 .organize_chart_wr .organize_chart .organ_body h3.box::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 1px; height: 30px; background: #909cab; } 
 .organize_chart_wr .organize_chart .organ_top::after { width: 67.8%; } 
 .organize_chart_wr .organize_chart .organ_body .sub.col2:has(.sub-team)::before { display: block; top: 0; height: 240px; } 
 .organize_chart_wr .organize_chart .organ_body .sub.col2 > ul { width: 100%; } 
 .organize_chart_wr .organize_chart .organ_body .sub.col2:has(.sub-team) > ul::before { display: none; } 
 .organize_chart_wr .organize_chart .organ_body .sub-team { margin-top: 20px; } 
 .organize_chart_wr .organize_chart .organ_body .sub-team::before { display: none; } 
 .organize_chart_wr .organize_chart .box { font-size: 16px; } 
 }
 @media only screen and (max-width: 450px){
 .organize_chart_wr .organize_chart .organ_top::after { width: 68.5%; } 
 }

.en .location_info_wr .address_wr .address b { width: 200px; } 
.en .location_info_wr .address_wr .address > ul > li > ul { width: 100%; flex-direction: column; } 
@media (max-width: 768px){
 .en .location_info_wr .address_wr .address b { width: 100%; } 
 .en .location_info_wr .address_wr .address b::after { display: none; } 
 .en .location_info_wr .address_wr .address > ul > li { flex-direction: column; gap: 3vw; } 
 }

/*컨텐츠에 가로축 스크롤이 들어가는 경우*/
.contentsarea.scroll_st { padding: 34px 0; } 
.contentsarea.scroll_st .subtit { width: calc(100% - 80px); margin: 0 auto 30px; position: relative; min-height: 43px; } 
.contentsarea.scroll_st .subtit.mb_0 { margin-bottom: 0; } 
.contentsarea.scroll_st .board_top { width: calc(100% - 80px); margin: 0 auto 24px; } 
.contentsarea.scroll_st .board_top .btn2 { margin-left: 10px; } 
.contentsarea.scroll_st .sub_contents_title { width: calc(100% - 80px); } 
.contentsarea.scroll_st .survey_wr { width: calc(100% - 80px); margin: 100px auto 111px; } 
@media (max-width: 1024px){
 .contentsarea.scroll_st .board_top .boardschbox { display: flex; flex-direction: column; } 
 .contentsarea.scroll_st .board_top .boardschbox .select_box { width: 100%; } 
 .contentsarea.scroll_st .board_top .btn2 { margin-left: auto; width: 107px; } 
 }
@media (max-width: 768px){
 .contentsarea.scroll_st { padding: 6.1111vw 0; } 
 .contentsarea.scroll_st .sub_contents_wr { padding: 0 0 4.1667vw; } 
 .contentsarea.scroll_st .board_top { width: 100%; margin: 0 auto 7.6389vw; } 
 .contentsarea.scroll_st .board_top .btn2 { width: 100%; } 
 .contentsarea.scroll_st .subtit { width: calc(100% - 11.1111vw); margin: 0 auto 7.6389vw; padding: 0; } 
 .contentsarea.scroll_st .subtit.tab_menu_st { flex-direction: column-reverse; gap: 2.7778vw; padding: 0; margin: 0 auto 6.6667vw; } 
 .contentsarea.scroll_st .sub_contents_title { width: calc(100% - 11.1111vw); } 
 .contentsarea.scroll_st .survey_wr { width: calc(100% - 11.1111vw); margin: 19.0278vw auto 7.6389vw; } 
 }

.contents_scroll_bx { width: 100%; margin: 0 auto 40px; } 
.contents_scroll_bx.mb_0 { margin-bottom: 0; } 
.contents_scroll_bx .contents_inner { width: 1320px; margin: 0 auto; height: 310px; } 
.contents_scroll_bx .contents_inner_2 { width: 1400px; margin: 0 auto; height: auto; } 
.contents_scroll_bx .contents_inner_3 { width: 1400px; margin: 0 auto; height: auto; } 

.contents_scroll_bx .contents_inner_5,
.contents_scroll_bx .contents_inner_6 { width: 100%; margin: 0 auto; height: auto; } 
.contents_scroll_bx .swiper-horizontal > .swiper-scrollbar,
.contents_scroll_bx .swiper-scrollbar.swiper-scrollbar-horizontal { height: 9px; left: 50%; transform: translateX(-50%); background: var(--bd-color); width: calc(100% - 80px); } 
.contents_scroll_bx .swiper-horizontal > .swiper-scrollbar .swiper-scrollbar-drag,
.contents_scroll_bx .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag { background: #ababab; } 
.contents_scroll_bx .round_bx_process { width: 100%; padding: 70px 0 30px 80px; display: flex; align-items: center; gap: 57px; } 
.contents_scroll_bx .round_bx_process .round_bx_wr { display: flex; flex-direction: column; gap: 11px; } 
.contents_scroll_bx .round_bx_process .round_bx { width: 248px; height: 99px; border-radius: 100px; font-size: 18px; text-align: center; color: #fff; line-height: 1.4; display: flex; align-items: center; justify-content: center; background: #1276c2; position: relative; } 
.contents_scroll_bx .round_bx_process .round_bx.c_1 { background: #1276c2; } 
.contents_scroll_bx .round_bx_process .round_bx.c_1::after { content: ""; width: 55px; height: 120px; background: url(../images/round_bx_process_arr_1.png) no-repeat center/contain; position: absolute; top: 50%; transform: translateY(-50%); right: -55px; } 
.contents_scroll_bx .round_bx_process .round_bx.c_2 { background: #e3e3e3; color: #05141f; } 
.contents_scroll_bx .round_bx_process .round_bx.c_3 { background: #e3e3e3; color: #05141f; } 
.contents_scroll_bx .round_bx_process .round_bx.c_3::after { content: ""; width: 45px; height: 10px; background: url(../images/round_bx_process_arr_2.png) no-repeat center/contain; position: absolute; top: 50%; transform: translateY(-50%); right: -50px; } 
.contents_scroll_bx .round_bx_process .round_bx.c_4 { margin-top: 110px; background: #6e6e6e; } 
.contents_scroll_bx .round_bx_process .round_bx.c_4::after { content: ""; width: 45px; height: 10px; background: url(../images/round_bx_process_arr_2.png) no-repeat center/contain; position: absolute; top: 50%; transform: translateY(-50%); right: -50px; } 
.contents_scroll_bx .round_bx_process .round_bx.c_5 { margin-top: 110px; background: #39a7c2; } 
@media (max-width: 1160px){
 .contents_scroll_bx .contents_inner_6 { width: 1160px; } 
 }
@media (max-width: 768px){
 .contents_scroll_bx { margin: 0 auto 9.7222vw; } 
 .contents_scroll_bx .contents_inner { width: 177.7778vw; height: 41.6667vw; } 
 .contents_scroll_bx .contents_inner_2,
 .contents_scroll_bx .contents_inner_5 { width: 194.4444vw; } 
 .contents_scroll_bx .contents_inner_3 { width: 170vw; } 
 .contents_scroll_bx .contents_inner_6 { width: 161.1111vw; } 
 .contents_scroll_bx .swiper-horizontal > .swiper-scrollbar,
 .contents_scroll_bx .swiper-scrollbar.swiper-scrollbar-horizontal { height: 1.25vw; width: calc(100% - 11.1111vw); } 
 .contents_scroll_bx .round_bx_process { padding: 5.8333vw 0 5.5556vw 5.5556vw; gap: 7.9167vw; } 
 .contents_scroll_bx .round_bx_process .round_bx_wr { gap: 1.5278vw; } 
 .contents_scroll_bx .round_bx_process .round_bx { width: 34.4444vw; height: 13.75vw; border-radius: 13.8889vw; font-size: 2.5vw; } 
 .contents_scroll_bx .round_bx_process .round_bx.c_1::after { width: 7.6389vw; height: 16.6667vw; right: -7.6389vw; } 
 .contents_scroll_bx .round_bx_process .round_bx.c_3::after { width: 6.25vw; height: 1.3889vw; right: -6.9444vw; } 
 .contents_scroll_bx .round_bx_process .round_bx.c_4 { margin-top: 15.2778vw; } 
 .contents_scroll_bx .round_bx_process .round_bx.c_4::after { width: 6.25vw; height: 1.3889vw; right: -6.9444vw; } 
 .contents_scroll_bx .round_bx_process .round_bx.c_5 { margin-top: 15.2778vw; } 
 }

.sub_contents_table_bx { width: 100%; margin-top: 2.5rem; } 
.sub_contents_table_bx.py_20 { padding: 20px 95px 20px; } 
.sub_contents_table_bx.pb_20 { padding-bottom: 20px; } 
.sub_contents_table_bx .desc { font-size: 16px; color: #d74225; margin-top: 20px; } 
.sub_contents_table_bx table { width: 100%; border-top: 2px solid var(--txt-gray); } 
.sub_contents_table_bx table th { background: var(--light-gray); border-left: 1px solid var(--bd-color); border-bottom: 1px solid var(--bd-color); text-align: center; color: #181C21; font-size: clamp(17px, 2vw,1.9rem ); padding: 2.3rem 0; } 
.sub_contents_table_bx table th:first-child { border-left: 0; } 
.sub_contents_table_bx table th[rowspan] { border-right: 1px solid var(--bd-color); } 
.sub_contents_table_bx table th[rowspan]:last-child { border-right: 0; } 
.sub_contents_table_bx table td { border-bottom: 1px solid var(--bd-color); border-left: 1px solid var(--bd-color); text-align: center; font-size: 17px; padding: 16px 10px; line-height: 1.6; height: 73px; } 
.sub_contents_table_bx table td.align_left { text-align: left; } 
.sub_contents_table_bx table td:first-child { border-left: 0; } 
.sub_contents_table_bx table td[rowspan] { border-right: 1px solid var(--bd-color); } 
.sub_contents_table_bx table td[rowspan]:last-child { border-right: 0; } 
.sub_contents_table_bx table td a { display: block; text-decoration: underline; text-underline-position: under; } 
@media (max-width: 767px){
 .sub_contents_table_bx { margin-top: 1.5rem; } 
 }

 /********** table **********/
.tableA { width: 100%; border-top: 2px solid var(--txt-gray); border-collapse: collapse; } 
.tableA tr { border-bottom: 1px solid var(--bd-color); background: transparent; } 
.tableA tr.no-list td { line-height: 100px; } 
.tableA th, .tableA td { padding: 16px 12px; text-align: center; font-size: 17px; line-height: 1.5; color: #1d1d1d; border-bottom: 1px solid #e0e3e8; border-left: 1px solid #e0e3e8; } 
.tableA th:first-child, .tableA td:first-child { border-left: 0; } 
.tableA thead th { background: #f6f6f7; font-weight: 700; } 
.tableA tbody th { background: #fff; font-weight: 400; } 
.tableA tbody td { background: #fff; } 
.tableA th.bd-lf { border-left: 1px solid var(--gray-dd); } 
.tableA td { padding: 16px 12px; color: #181C21; } 
.tableA td.txt-lf { text-align: left; } 

.tableA .inp-box input { width: 100%; } 
.tableA .inp-flex { flex-grow: 1; display: flex; align-items: center; gap: 5px; } 

.table-scroll-wrap.pc-scroll { position: relative; overflow-x: scroll; } 
 
@media only screen and (max-width: 1023px){
 .table-scroll-wrap .tableA { width: 150%; } 
 }
@media only screen and (max-width: 767px){
 .tableA th { padding: 1.5rem; } 
 .tableA:not(.table-responsive2) thead { display: none; } 
 .tableA, .tableA tbody, .tableA tr, .tableA td { display: block; width: 100%; } 
 .tableA tr { border-bottom: 0; } 
 .tableA td { padding: 1.6rem 2rem; border-bottom: 1px solid var(--bd-color); } 
 .tableA td[data-content]::before { content: attr(data-content); display: block; margin-bottom: 0.8rem; font-weight: 700; font-size: 1.6rem; color: var(--txt-gray); } 
 
.table-responsive1 { width: 100%; } 
.table-responsive1 colgroup,
 .table-responsive1 thead { display: none; } 
 .table-responsive1 tbody tr { position: relative; display: flex; min-height: auto; padding: 10px; text-align: left; flex-direction: column; align-items: baseline; } 
 .table-responsive1 tbody tr td.ac { text-align: left; } 
 .tableA.table-responsive1 tr { border-bottom: 1px solid var(--bd-color); } 
 .tableA.table-responsive1 td { border-bottom: none; border-left: none; } 
 .table-responsive1 tbody tr td { display: flex; width: 100%; padding: 0; color: #555; } 
 .table-responsive1 tbody tr td .ac { text-align: unset; } 
 .table-responsive1 tbody tr td::before { content: attr(data-content); display: inline-block; width: 160px; margin-right: 5px; margin-bottom: 5px; font-weight: 500; color: #757575; text-align: left; flex-shrink: 0; word-break: keep-all; } 
 .table-responsive1 tbody tr td[data-content="번호"] { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 40px; margin: -1px 0 0 0; padding-right: 0; text-align: center; } 
 .table-responsive1 tbody tr td[data-content="번호"]::before { display: none; } 
 .table-responsive1 tbody tr td[data-content="문의제목"] { padding: 0; text-align: left; } 

 .table-responsive1 tbody tr td.bg-light-main { background: unset; padding-top: 15px; border-top: 1px dashed var(--gray-e5); margin-top: 15px; } 
 .table-responsive1 tbody tr td.bg-light-main::before { color: var(--main); } 


.table-scroll-wrap { position: relative; overflow-x: scroll; } 
.table-scroll-event { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: rgba(255,255,255,0.8); } 
.table-scroll-event.hidden { display: none; } 
.table-scroll-event .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.table-scroll-event .inner::before { content:""; display: block; position: absolute; top: -25px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61 64.28'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg%3E%3Cpath class='cls-1' d='M26.24,52.94s-8.39-7.82-8.39-15.08v-8.7c0-2.32,1.88-4.2,4.2-4.2h0c2.32,0,4.2,1.88,4.2,4.2V6.25c0-2.45,2.11-4.42,4.61-4.18,2.18.21,3.79,2.17,3.79,4.36v12.24c0-2.45,2.11-4.42,4.61-4.18,2.18.21,3.79,2.17,3.79,4.36v3.74c0-2.32,1.88-4.2,4.2-4.2h0c2.32,0,4.2,1.88,4.2,4.2v3.12c0-2.59,2.35-4.64,5.04-4.11,1.99.39,3.35,2.26,3.35,4.3h0c0,5.83.45,10.07-.06,15.51-.12,1.25-.34,2.49-.67,3.7l-2.09,7.84h-30.76Z'/%3E%3Cline class='cls-1' x1='26.24' y1='29.16' x2='26.24' y2='35.78'/%3E%3Cline class='cls-1' x1='34.63' y1='18.67' x2='34.63' y2='29.16'/%3E%3Cline class='cls-1' x1='43.03' y1='20.59' x2='43.03' y2='29.16'/%3E%3Cline class='cls-1' x1='51.42' y1='25.71' x2='51.42' y2='29.16'/%3E%3Crect class='cls-1' x='26.24' y='52.94' width='30.76' height='10.34'/%3E%3C/g%3E%3Cline class='cls-1' x1='40.31' y1='7.05' x2='58.94' y2='7.05'/%3E%3Cpolyline class='cls-1' points='52.89 1 58.94 7.05 52.89 13.11'/%3E%3Cline class='cls-1' x1='19.63' y1='7.05' x2='1' y2='7.05'/%3E%3Cpolyline class='cls-1' points='7.05 1 1 7.05 7.05 13.11'/%3E%3C/svg%3E"); animation: leftRight 2.4s infinite linear; } 
@keyframes leftRight { 
 0% { transform: translateX(0px); } 
 50% { transform: translateX(-20px); } 
100% { transform: translateX(0px); } 
 }
.table-scroll-event .inner::after { content:"좌우로 스크롤하세요"; display: block; margin-top: 15px; font-size: 14px; } 
.en .table-scroll-event .inner::after { content:"Scroll horizontally"; } 
.table-scroll-wrap table { width: 130%; } 
 }

 @media only screen and (max-width: 450px){
 .table-responsive1 tbody tr td::before { width: 110px; } 
 }


/* 연혁 */
.history-page { display: block; } 
.history-img-wrap { display: flex; flex-direction: column; gap: 5rem; width: 350px; flex-shrink: 0; } 
.history-img-wrap .item { display: flex; flex-direction: column; gap: 1rem; } 
.history-img-wrap .item .img-wrap { width: 100%; height: 213px; border-radius: 12px; overflow: hidden; } 
.history-img-wrap .item .img-wrap img { width: 100%; height: 100%; object-fit: cover; } 
.history-wrap { width: 100%; } 
.history-bar { position:relative; margin-top:1.2rem; } 
.history-bar:before { content:""; position:absolute; top:3rem; left:417px; bottom:1.4rem; display:block; width:2px; background:var(--bd-color); } 
.history-actbar { content:""; position:absolute; top:3rem; left:417px; display:block; width:2px; height:0; max-height:calc(100% - 3rem); background:var(--main-dark); } 
.history-cont-wrap { position:relative; display: flex; align-items: flex-start; gap: 110px; } 
/* 시대 카드(history-img-wrap)는 해당 연도 그룹 안에 들어가 함께 flex 된다.
 카드가 없는 연도는 align-wrap 을 같은 기준선(350px + 110px)으로 밀어 타임라인 정렬을 맞춘다. */
.history-cont-wrap .align-wrap { flex: 1 1 auto; min-width: 0; max-width: 808px; margin-left: 460px; } 
.history-cont-wrap:has(> .history-img-wrap) .align-wrap { margin-left: 0; } 
.history-cont-wrap .empty-box { width: 500px; flex-shrink: 0; } 
.history-cont-wrap:has( + .history-cont-wrap) { margin-top:2rem; margin-bottom:10rem; } 
.history-cont + .history-cont { margin-top:2.5rem; } 
.history-cont-year { font-size:clamp(1.8rem, 2vw, 2.2rem); margin-bottom:3rem; position:relative; font-weight: 600; color: var(--main-dark); } 
.history-cont-year:before { content:""; position:absolute; top:1rem; left: -50px; display:block; width:1.5rem; height:1.5rem; border-radius:50%; background:#ddd; } 
.history-cont-txt { position:relative; } 
.history-cont-txt > .date { position:absolute; top:0; left:0; font-size:clamp(17px, 2vw, 2rem); color: #666; line-height:160%; background: none; padding-left: 0; } 
.history-cont-txt .txt { display: flex; gap: 3rem; align-items: center; font-size:clamp(17px, 2vw, 2rem); line-height:160%; word-break: keep-all; } 
.history-cont-txt .txt .lf-date { width: 90px; flex-shrink: 0; color: #757575; font-weight: 500; } 
.history-cont-txt .txt p { font-weight: 500; width: 100%; word-break: keep-all; } 
.history-cont-txt.prize .date,
.history-cont-txt.prize .txt { color:var(--main-dark); } 
.history-cont-wrap .history-cont .history-cont-year.act:before,
.history-cont-wrap.first .history-cont .history-cont-year:before { background:var(--main-dark); } 
.history-cont-wrap .history-cont .history-cont-year.act:after,
.history-cont-wrap.first .history-cont .history-cont-year:after { content:""; position:absolute; top:-0.5rem; left: -65px; width:4.5rem; height:4.5rem; background:url(../img/content/sub05/history-tit-af.svg)no-repeat center center / contain; } 

.history-cont-wrap .history-cont .history-cont-txt.act:before { background:var(--main-dark); } 
.history-cont-wrap .history-cont .history-cont-year:before,
.history-cont-wrap .history-cont .history-cont-txt:before { transition:all .3s; } 

@media screen and (max-width:1200px){
 .history-cont-wrap .empty-box { width: 496px; } 
 }
@media screen and (max-width:1023px){
 .history-wrap { width: 100%; padding-left: 0; } 
 .history-bar { width: 100%; max-width: unset; } 
 .history-cont-wrap { flex-direction: column-reverse; gap: 0; } 
 .history-img-wrap { width: 100%; padding-left: 6rem; margin-top: 2rem; } 
 .history-img-wrap .item .img-wrap { height: 280px; } 
.history-cont-wrap .align-wrap { width: 100%; max-width: unset; margin-left: 0; text-align: left; padding-left: 6rem; } 
.history-cont-wrap:nth-child(odd) { display: flex; justify-content: unset; } 
.history-cont-wrap:nth-child(even) .history-cont-txt:before { left:-100px; } 
.history-cont-wrap:nth-child(odd) .history-cont-txt:before { left:-100px; } 
.history-cont-wrap .history-cont .history-cont-year.act:after,
.history-cont-wrap.first .history-cont .history-cont-year:after { left: -50px; } 
 .history-bar:before { left: 30px; } 
 .history-actbar { left: 30px; } 
.history-cont-year:before { left: -35px; } 
 }
@media screen and (max-width:767px){
 .history-bar::before { left: 5px; } 
 .history-actbar { left: 5px; } 
 .history-cont-wrap .align-wrap { padding-left: 3rem; } 
 .history-img-wrap { padding-left: 3rem; } 
 .history-cont-year::before { left: -27px; width: 1rem; height: 1rem; } 
 .history-cont-wrap .history-cont .history-cont-year.act::after, .history-cont-wrap.first .history-cont .history-cont-year::after { left: -37px; top: 0px; width: 3rem; height: 3rem; } 
 .history-cont-txt .txt { gap: .5rem; align-items: flex-start; } 
 .history-cont-txt .txt .lf-date { width: 50px; } 
 .history-cont-txt .txt p { width: calc(100% - 55px); } 
 .history-cont-wrap:has(+ .history-cont-wrap) { margin-bottom: 4rem; } 
 .history-cont-year { margin-bottom: 1.5rem; } 
 .history-cont + .history-cont { margin-top: 1.5rem; } 
 }

 /* 센터소개 */
.intro-cont .intro-tit { text-align: center; margin-bottom: 8rem; font-weight: 700; font-size: clamp(2.0rem, 2vw, 2.6rem); } 
.intro-detail { position: relative; padding: 6rem 0; } 
.intro-detail::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: var(--bg-light); z-index: -1; } 
.intro-detail .flex { gap: 6rem; } 
.intro-detail .img-wrap { width: 100%; max-width: 600px; height: 364px; border-radius: 3rem; overflow: hidden; flex-shrink: 0; } 
.intro-detail .img-wrap img { width: 100%; height: 100%; object-fit: cover; } 
.intro-detail .intro-step { display: inline-block; font-size: clamp(17px, 2vw, 2rem); font-weight: 700; color: #fff; background: var(--main); border-radius: 100px; padding: 8px 16px; } 
@media only screen and (max-width: 1300px){
 .intro-detail .flex { gap: 3rem; } 
 .intro-detail .img-wrap { max-width: 400px; height: 243px; } 
 .intro-detail .txt-wrap strong { font-size: 2.5rem; } 
 .intro-detail .txt-wrap strong br { display: none; } 
 .intro-detail .txt-wrap p { font-size: 2rem; } 
 }
@media only screen and (max-width: 1023px){
 .intro-cont .intro-tit { margin-bottom: 6rem; } 
 }
@media only screen and (max-width: 767px){
 .intro-cont .intro-tit { margin-bottom: 4rem; } 
 .intro-detail { padding: 4rem 0; } 
 .intro-detail.intro-detail-st2 .flex { align-items: baseline; } 
 .intro-detail .flex { flex-direction: column; gap: 2rem; } 
 .intro-detail .img-wrap { max-width: unset; border-radius: 1.5rem; } 
 .intro-detail .txt-wrap strong { font-size: 2rem; margin-bottom: 2rem; } 
 .intro-detail .txt-wrap p { font-size: 16px; font-weight: 400 !important; } 
 .intro-detail .intro-step { padding: 5px 10px; } 
 }

 /* 센터소개 - 센터 인사말/정보/주요사업 (서울외국인주민센터 소개) */
.contentsarea .center-name { margin: 0 0 40px; text-align: center; font-size: clamp(2.6rem, 4vw, 3.8rem); font-weight: 700; line-height: 1.4; color: #1d1d1d; word-break: keep-all; } 
.center-greeting .flex { align-items: center; } 
.center-greeting .txt-wrap strong { display: block; font-size: clamp(2rem, 2.4vw, 2.8rem); line-height: 1.5; color: #1d1d1d; } 
.center-greeting .txt-wrap p { font-size: clamp(16px, 2vw, 1.9rem); font-weight: 500; line-height: 1.6; color: #2f353a; } 
.contentsarea .biz-img { height: 450px; border-radius: 20px; overflow: hidden; } 
.contentsarea .biz-img img { width: 100%; height: 100%; object-fit: cover; } 
.center-info { border: 1px solid #ccd1d8; border-radius: 20px; padding: 40px 40px 48px; } 
.center-info .cinfo-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; } 
.center-info .ci-name { display: flex; align-items: center; gap: 16px; } 
.center-info .ci-name .ci-building { flex-shrink: 0; width: 40px; height: 40px; background: url(../img/content/sub05/icn-building.svg) no-repeat center center / contain; } 
.center-info .ci-name strong { font-size: clamp(2rem, 2.4vw, 2.8rem); font-weight: 700; line-height: 1.5; color: #1d1d1d; word-break: keep-all; } 
.center-info .ci-sns { display: flex; gap: 8px; } 
.center-info .ci-sns a { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid #cdd1d5; border-radius: 1000px; } 
.center-info .ci-sns a img { width: 22px; height: 22px; object-fit: contain; } 
.center-info .ci-body { display: flex; gap: 20px; margin-top: 24px; } 
.center-info .ci-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; } 
.center-info .ci-item dt { display: inline-block; margin-bottom: 8px; font-size: clamp(17px, 1.8vw, 1.9rem); font-weight: 500; line-height: 1.5; color: #56595e; } 
.center-info .ci-item dd { font-size: clamp(17px, 1.8vw, 1.9rem); font-weight: 500; line-height: 1.5; color: #1d1d1d; word-break: break-all; } 
.center-info .ci-item dd a { color: var(--main); } 
@media only screen and (max-width: 1023px){
 .contentsarea .biz-img { height: 320px; } 
 .center-info { padding: 30px; } 
 .center-info .ci-body { gap: 16px; } 
 }
@media only screen and (max-width: 767px){
 .contentsarea .center-name { margin-bottom: 24px; } 
 .contentsarea .biz-img { height: 200px; border-radius: 12px; } 
 .center-info { padding: 24px 20px; } 
 .center-info .cinfo-head { flex-wrap: wrap; gap: 16px; } 
 .center-info .ci-sns { width: 100%; } 
 .center-info .ci-body { flex-direction: column; gap: 24px; } 
 }

/* 통합검색 */
.total-search { position: relative; padding-bottom: 3rem; margin-top: 60px; } 
.total-search::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: var(--bd-color); } 
.total-search .search_bx { display: flex; gap: 2.4rem; align-items: center; width: 100%; padding-left: 44px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3E%3Cpath stroke='%2356595E' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m28 28-5.8-5.8m3.133-7.533c0 5.89-4.775 10.666-10.666 10.666S4 20.558 4 14.667 8.776 4 14.667 4c5.89 0 10.666 4.776 10.666 10.667'/%3E%3C/svg%3E") no-repeat left center / 30px; } 
.total-search .search_bx input[type="text"] { flex: 1; height: 52px; border: none; font-size: clamp(17px, 2vw, 3rem); position: relative; padding: 0 23px; background: transparent; background: #fff; } 
 .total-search .search_bx input::placeholder { font-size:clamp(17px, 2vw, 3rem); font-weight: 600; color: var(--txt-gray); } 
 @media only screen and (max-width: 1023px){
 .total-search { margin-top: 30px; } 
 .total-search .search_bx input[type="text"] { width: 100%; flex: unset; } 
 }
 @media only screen and (max-width: 767px){
 .total-search { margin-top: 20px; } 
 .total-search { padding-bottom: 2rem; } 
 .total-search .search_bx { padding-left: 24px; background-size: 24px; } 
 .total-search .search_bx input[type="text"] { padding: 0 1rem; } 
 }

/* 상담운영 현황 */
.counseling-cont { } 
.country-list { display: flex; flex-wrap: wrap; justify-content: center; } 
.country-list > li { width: 154px; height: 154px; padding: 5px; } 
.country-list > li > .country { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .8rem; width: 100%; height: 100%; border-radius: 20px; text-align: center; font-size: clamp(16px, 2vw, 1.8rem); font-weight: 600; transition: all .3s; } 
.country-list > li > .country > span > b { display: block; font-weight: 400; font-size: 15px; } 
.country-list > li > .country > i { width: 62px; height: 62px; border-radius: 100%; } 
.country-list > li > .country:hover { background: var(--light-gray); } 
.country-list > li > .country.checked { background: var(--main); color: #fff; } 
.country-list > li > .country.checked > span > b { color: #ffffffc8; } 


.filter-wrap { display: flex; align-items: center; gap: 5px; } 
.filter-wrap .item { position: relative; width: 250px; } 
.filter-wrap .item .filter-btn { display: flex; align-items: center; justify-content: space-between; gap: 20px; } 
.filter-wrap .item.on .filter-btn { border: 1px solid var(--main-light); } 
.filter-wrap .item .filter-btn i { display: block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5257 13.3853C10.1984 13.6522 9.71594 13.6334 9.41084 13.3283L3.9307 7.84818C3.60526 7.52274 3.60526 6.99523 3.9307 6.66979C4.25613 6.34436 4.78365 6.34435 5.10908 6.66979L10 11.5607L14.891 6.66979C15.2164 6.34436 15.7439 6.34436 16.0694 6.66979C16.3948 6.99523 16.3948 7.52274 16.0694 7.84818L10.5892 13.3283L10.5257 13.3853Z' fill='%231D1D1D'/%3E%3C/svg%3E%0A"); transition: all .3s; } 
.filter-wrap .item.open .filter-btn i { transform: rotate(180deg); } 
.filter-wrap .item .con { display: none; position: absolute; top: 65px; left: 0; z-index: 1; width: 240px; border-radius: 12px; border: 1px solid var(--Gray-06, #E0E3E8); background: #FFF; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); overflow: hidden; } 
.filter-wrap .item.open .con { display: block; } 
.filter-wrap .check_box { display: block; } 
.filter-wrap .check_box li { padding: 16px; margin-right: unset; transition: all .3s; } 
.filter-wrap .check_box li:hover { background: var(--light-gray); } 
.filter-wrap .check_box input[type="checkbox"] + label { width: 100%; font-size: clamp(1.7rem, 2vw, 1.9rem); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } 


 
@media only screen and (max-width: 560px){
 .filter-wrap { flex-wrap: wrap; } 
 .filter-wrap .item { position: relative; width: calc(50% - 2.5px); } 
 .filter-wrap .item .con { left: 0; width: calc(100vw - 20px); } 
 .filter-wrap .item:nth-child(2n) .con { left: unset; right: 0; width: calc(100vw - 20px); } 
 }

.checked-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } 
.checked-list > li { display: flex; padding: 12px 20px; justify-content: center; align-items: center; gap: 10px; border-radius: 100px; background: var(--light-gray); } 
.checked-list > li > .txt { font-weight: 500; color: var(--txt-gray); } 
.checked-list > li > .del-btn { display: block; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.9469 14.9683C16.2132 15.2346 16.2132 15.6663 15.9469 15.9325C15.6807 16.1988 15.249 16.1988 14.9827 15.9325L4.07854 5.02839C3.81228 4.76212 3.81228 4.33042 4.07854 4.06415C4.34481 3.79788 4.77651 3.79788 5.04278 4.06415L15.9469 14.9683Z' fill='%23818892'/%3E%3Cpath d='M5.04239 15.9468C4.77612 16.2131 4.34442 16.2131 4.07815 15.9468C3.81188 15.6806 3.81189 15.2489 4.07815 14.9826L14.9823 4.07843C15.2486 3.81216 15.6803 3.81216 15.9465 4.07843C16.2128 4.3447 16.2128 4.7764 15.9465 5.04267L5.04239 15.9468Z' fill='%23818892'/%3E%3C/svg%3E"); } 
.checked-list > li.selected { background: var(--bg-light); } 
.checked-list > li.selected > .txt { color: var(--main); } 
.checked-list > li.selected > .del-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.9469 14.9683C16.2132 15.2346 16.2132 15.6663 15.9469 15.9325C15.6807 16.1988 15.249 16.1988 14.9827 15.9325L4.07855 5.02839C3.81228 4.76212 3.81228 4.33042 4.07855 4.06415C4.34482 3.79788 4.77652 3.79788 5.04279 4.06415L15.9469 14.9683Z' fill='%230072CA'/%3E%3Cpath d='M5.0424 15.9468C4.77614 16.2131 4.34443 16.2131 4.07817 15.9468C3.8119 15.6806 3.8119 15.2489 4.07817 14.9826L14.9823 4.07843C15.2486 3.81216 15.6803 3.81216 15.9466 4.07843C16.2128 4.3447 16.2128 4.7764 15.9466 5.04267L5.0424 15.9468Z' fill='%230072CA'/%3E%3C/svg%3E"); } 

.flex-list > .item { display: flex; gap: 3rem; } 
.counseling-list { display: flex; flex-direction: column; gap: 2.5rem; border-top: 1px solid #1d1d1d; padding-top: 4rem; } 
.counseling-list > .item { padding: 3rem 3rem 3rem 3rem; background: #fff; border-radius: 20px; border: 1px solid var(--bd-dark); transition: border .3s; } 
.counseling-list > a.item:hover { border: 1px solid var(--main); } 
.counseling-list > .item > .item-info-wrap { display: flex; } 
.counseling-list > .item > .item-info-wrap > li { width: 33.3%; font-size: clamp(1.7rem, 2vw, 1.9rem); } 

/* 카드형 리스트 이미지 호버 확대 */
.counseling-list > .item .img-wrap img { transition: all 0.3s; } 
.counseling-list > .item:hover .img-wrap img,
.counseling-list > a.item:focus-visible .img-wrap img { transform: scale(1.05); } 
.time-wrap { display: flex; gap: 10px; } 
.time-wrap > li { width: 33.3%; font-size: clamp(1.7rem, 2vw, 1.9rem); } 
.time-wrap > li > .list-st3 > li span { min-width: 130px; font-weight: 500; } 
.time-wrap > li > .list-st3 > li { display: flex; gap: 10px; } 
.sm-lang-list { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; } 
.sm-lang-list > li > i { width: 25px; height: 25px; } 

@media only screen and (max-width: 1023px){
 .flex-list > .item { display: flex; gap: 2rem; } 
 .country-list > li { width: 120px; height: 120px; } 
 .country-list > li > .country > i { width: 50px; height: 50px; } 
 .time-wrap { flex-direction: column; } 
 .time-wrap > li { width: 100%; } 
 .time-wrap .list-st3 { display: flex; flex-wrap: wrap; } 
 .time-wrap > li > .list-st3 > li { width: 50%; align-items: baseline; margin-top: 0; } 
 .counseling-list > .item { position: relative; } 
 }
 @media only screen and (max-width: 767px){
 .mo-country-swiper { z-index: 0 !important; } 
 .mo-country-list { display: grid; grid-template-columns: repeat(4, 100px); } 
 .mo-country-list > li { width: 100px; height: 100px; } 
 .mo-country-list > li > a > i { width: 30px; height: 30px; } 

 .checked-list > li { padding: 8px 12px; } 
 .counseling-list > .item { padding:2rem; } 
 .counseling-list > .item > .item-info-wrap { flex-direction: column; gap: 8px; } 
 .counseling-list > .item > .item-info-wrap > li { width: 100%; } 
 .counseling-list > .item .pd25 { padding: 15px; } 
 .time-wrap .list-st3 { gap: 8px; } 
 .time-wrap > li > .list-st3 > li { width: 100%; } 
 .time-wrap > li > .list-st3 > li span { min-width: 80px; } 
 }
 @media only screen and (max-width: 440px){
 .mo-country-list > li { width: 82px; height: 92px; } 
 .mo-country-list { display: grid; grid-template-columns: repeat(3, auto); } 
 }

 /* 센터일정 */
 .calendar-header { margin-bottom: 20px; } 
.calendar-header .calendar-month { display: flex; align-items: center; justify-content: center; gap: 30px; } 
.calendar-header .calendar-month .btn-prev, .calendar-header .calendar-month .btn-next { display: flex; align-items: center; justify-content: center; width: 30px; height: 40px; } 
.calendar-header .calendar-month button i { display: block; width: 9px; height: 18px; } 
.calendar-header .calendar-month button .arrow-prev { background: url(../img/content/sub05/icon-arrow-prev.svg) no-repeat center center / contain; } 
.calendar-header .calendar-month button .arrow-next { background: url(../img/content/sub05/icon-arrow-next.svg) no-repeat center center / contain; } 
/* 캘린더 이전/다음 버튼 호버 아이콘 */
.calendar-header .calendar-month button:hover .arrow-prev,
.calendar-header .calendar-month button:focus .arrow-prev { background-image: url(../img/content/sub05/icon-arrow-prev-hv.svg); } 
.calendar-header .calendar-month button:hover .arrow-next,
.calendar-header .calendar-month button:focus .arrow-next { background-image: url(../img/content/sub05/icon-arrow-next-hv.svg); } 
/* 지도 이미지 교체 시 높이 흔들림 방지 (모든 지도 840x688 동일) */
.contentsarea .family-map .map-wrap img,
.contentsarea .family-map .map-wrap-mo img { aspect-ratio: 840 / 688; } 

.calendar-st2 { width: 100%; } 
.calendar-st2 thead th { padding: 12px; font-weight: 500; font-size: 18px; background: var(--light-gray); text-align: center; border-top: 1px solid var(--gray-e5); color: var(--txt-gray); } 
.calendar-st2 thead th:first-child { border-left: 1px solid var(--gray-e5); } 
.calendar-st2 thead th:last-child { border-right: 1px solid var(--gray-e5); } 
.calendar-st2 tbody td { position: relative; height: 200px; border: 1px solid var(--gray-e5); border-left: 0; border-top: 0; vertical-align: top; } 
.calendar-st2 tbody td:first-child { border-left: 1px solid var(--gray-e5); } 
.calendar-st2 tbody td.selected::before { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.calendar-st2 tbody td .item { display: flex; flex-direction: column; height: 100%; padding: 12px; font-weight: 500; font-size: 18px; } 
.calendar-st2 tbody td .item:hover { background-color: var(--gray-f6); } 
.calendar-st2 tbody td .item .num { display: block; margin-bottom: 5px; } 
.calendar-st2 tbody td .item .item-list-st5 { margin-top: 15px; } 
.calendar-st2 tbody td .item .item-list-st5 strong { font-weight: 500; } 
.calendar-st2 tbody td:first-child .item .num { color: var(--red); } 
.calendar-st2 tbody td:last-child .item .num { color: var(--red); } 
/* 이번 달의 일요일만 빨강 */
.calendar-st2 tbody td:not(.other-month):first-child .item .num { color: var(--red); } 
/* 다른 달은 모두 회색 (일요일 포함) */
.calendar-st2 tbody td.other-month .item .num { color: var(--gray-75); } 
.calendar-st2 tbody td.today .item .num { display: inline-flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 100px; color: #fff; background: var(--main); } 
@media only screen and (max-width: 1023px){
 .calendar-st2 thead th { padding: 8px; font-size: 15px; } 
 .calendar-st2 tbody td { height: 150px; } 
 .calendar-st2 tbody td .item { padding: 8px; } 
 .calendar-st2 tbody td .item .cate-st2 { font-size: 0; margin-bottom: 10px; } 
 .calendar-st2 tbody td .item .cate-st2::before { width: 8px; height: 8px; } 
 .calendar-st2 tbody td .item .num { font-size: 15px; } 
 .calendar-st2 tbody td .item .item-list-st5 li { font-size: 15px; } 
 }
@media only screen and (max-width: 470px){
 .calendar-st2 tbody td .item .item-list-st5 li { flex-direction: column; align-items: flex-start; gap: 5px; } 
 }

/* ===== 문화달력 calendar-st1 ===== */
.calendar-header-st1 .calendar-month { gap: 30px; } 
.calendar-header-st1 .cal-select { position: relative; } 
.calendar-header-st1 .cal-select-btn { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 24px; font-weight: 700; color: #1d1d1d; } 
.calendar-header-st1 .cal-select-btn .arr { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #1d1d1d; transition: transform .2s; } 
.calendar-header-st1 .cal-select.on .cal-select-btn .arr { transform: rotate(180deg); } 
.calendar-header-st1 .cal-select-list { display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 10; min-width: 90px; max-height: 220px; overflow-y: auto; padding: 8px 0; background: #fff; border: 1px solid var(--bd-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); } 
.calendar-header-st1 .cal-select.on .cal-select-list { display: block; } 
.calendar-header-st1 .cal-select-list li a { display: block; padding: 6px 24px; font-size: 17px; font-weight: 500; color: #1d1d1d; text-align: center; white-space: nowrap; } 
.calendar-header-st1 .cal-select-list li a:hover, .calendar-header-st1 .cal-select-list li a:focus { text-decoration: underline; text-underline-position: under; } 
.calendar-header-st1 .cal-select-list li a.on { color: var(--main); font-weight: 700; } 
.calendar-st1 { width: 100%; table-layout: fixed; } 
.calendar-st1 thead th { padding: 16px 12px; font-weight: 500; font-size: 18px; text-align: center; border-bottom: 2px solid #1d1d1d; color: var(--txt-gray); } 
.calendar-st1 thead th:first-child { color: var(--red); } 
.calendar-st1 thead th:last-child { color: var(--main); } 
.calendar-st1 tbody td { position: relative; height: 185px; border-bottom: 1px solid var(--gray-e5); vertical-align: top; } 
.calendar-st1 tbody td .item { display: flex; flex-direction: column; justify-content: end; height: 100%; padding: 20px; } 
.calendar-st1 tbody td .item:hover { background: var(--gray-f6); border-radius: 10px; } 
.calendar-st1 tbody td .cal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; } 
.calendar-st1 tbody td .num { font-size: clamp(1.8rem,2vw,22px); font-weight: 600; color: #1d1d1d; line-height: 1.4; } 
.calendar-st1 tbody td .count { font-size: clamp(1.6rem,2vw,17px); font-weight: 500; color: var(--gray-75); } 
.calendar-st1 tbody td:first-child .num { color: var(--red); } 
.calendar-st1 tbody td:last-child .num { color: var(--main); } 
.calendar-st1 tbody td.other-month .num { color: var(--gray-cc); } 
.calendar-st1 tbody td .thumb { display: block; position: relative; margin-top: 10px; height: 0; padding-top: 61.6%; border-radius: 10px; overflow: hidden; background: var(--gray-f6); } 
.calendar-st1 tbody td .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 

/* 문화달력 썸네일 호버 확대 */
.calendar-st1 tbody td .item .thumb img { transition: all 0.3s; } 
.calendar-st1 tbody td .item:hover .thumb img,
.calendar-st1 tbody td .item:focus-visible .thumb img { transform: scale(1.05); } 
.calendar-st1 tbody td.today .num { display: inline-flex; justify-content: center; align-items: center; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 100px; color: #fff; background: var(--main); } 
.calendar-st1 tbody td.selected { outline: 2px solid var(--main); outline-offset: 0px; border-radius: 10px; background: var(--bg-light); z-index: 1; } 
@media only screen and (max-width: 1023px){
 .calendar-st1 tbody td { height: 100%; min-height: 115px; } 
 .calendar-st1 tbody td .item { padding: 10px; } 
 }
@media only screen and (max-width: 767px){
 .calendar-st1 { margin-bottom: 50px; } 
 .calendar-header-st1 .cal-select-btn { font-size: 20px; } 
 .calendar-st1 thead th { padding: 10px 4px; font-size: 15px; } 
 .calendar-st1 tbody td .item { padding: 8px 4px; justify-content: center; align-items: center; } 
 .calendar-st1 tbody td .cal-top { flex-direction: column; align-items: center; gap: 2px; } 
 .calendar-st1 tbody td .num { font-size: 16px; } 
 .calendar-st1 tbody td .count { font-size: 12px; text-align: center; } 
 .calendar-st1 tbody td .thumb { display: none; } 
 .calendar-st1 tbody td.today .num { min-width: unset; width: 20px; height: 20px; border-radius: 100px; } 
 }

/* 대관시설 */
.place-swiper-wrap { position: relative; } 
.place-wrap .title_box { align-items: baseline; } 
.place-wrap .title_box h3 { text-align: left; } 
.place-wrap .content_box { padding: 4rem 0; } 

.place-swiper-wrap .swiper-control { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 900px; z-index: 1; } 
.place-swiper-wrap .swiper-button-prev,
.place-swiper-wrap .swiper-button-next { top: 50%; width: 50px; height: 50px; margin-top: -25px; background-color:#757575; opacity: 1; color: #fff; border-radius: 100px; } 
.place-swiper-wrap .swiper-button-prev::after,
.place-swiper-wrap .swiper-button-next::after { font-size: 20px; font-weight: 700; } 
.place-swiper-wrap .swiper-button-prev { left: -70px; } 
.place-swiper-wrap .swiper-button-next { right: -70px; } 

.place-info > ul > li { display: flex; align-items: baseline; } 
.place-info > ul > li > em { min-width: 180px; } 

@media only screen and (max-width: 1070px){
 .board_detail .place-swiper-wrap .swiper-button-prev { left: 20px; } 
 .board_detail .place-swiper-wrap .swiper-button-next { right: 20px; } 
 }
 @media only screen and (max-width: 767px){
 .place-wrap .content_box { padding: 2.5rem 0; } 
 .place-swiper-wrap .swiper-control { display: none; } 
 .place-swiper-wrap .paging-st1 { display: none; } 

 .place-info > ul > li { flex-direction: column; gap: .8rem; } 
 }

/* 프로그램 목록 */
.filt-btn.active { background: var(--light-gray); color: #1d1d1d; border: 1px solid var(--main); } 

.filter-list { position: relative; display: none; padding: 2.5rem; background: var(--light-gray); border-radius: 2rem; } 
.filter-list.gr-bg { background: #f4f4f4; } 
.filter-list.on { display: block; } 
.filter-list .item { position: relative; z-index: 1; display: flex; gap: 2rem; } 
.filter-list .item + .item { margin-top: 1.5rem; } 
.filter-list .item .tit { flex-shrink: 0; width: 150px; padding-top: 1rem; font-size: 1.8rem; color: var(--primary900); } 
.filter-list .item .cont { flex-grow: 1; } 
.reset-btn { position: absolute; bottom: 30px; right: 30px; transition: all .3s; } 

.program-cate > li > span { font-size: clamp(16px, 2vw, 1.9rem) !important; } 
.program-tit-bf { display: block; width: 24px; height: 24px; background: url(../img/content/sub05/program-tit-bf.svg) no-repeat center center / contain; } 
.program-list > li { display: flex; align-items: baseline; } 
.program-list > li > span { width: 130px; flex-shrink: 0; } 
.program-list-flex { display: flex !important; align-items: center; gap: 40px; } 
.program-list-flex > li + li { margin-top: unset; } 
@media only screen and (max-width: 1023px){
 .program-state { position: absolute; top: 2.5rem; left: 3rem; } 
 .counseling-list > .item:has(.program-list) { padding-top: 8.5rem; } 
 }
@media only screen and (max-width: 767px){
 .filter-list { padding: 2rem; } 
 .filter-list .item { flex-direction: column; gap: 1rem; } 
 .filter-list .item .tit { width: 100%; padding-top: 0; font-size: 1.6rem; } 
 .filter-list .item + .item { margin-top: 1.5rem; } 
 
 .program-list-flex { gap: 10px 40px; } 
 .program-list > li > span { width: 80px; flex-shrink: 0; } 
 .program-state { top: 2rem; left: 2rem; } 
 .counseling-list > .item:has(.program-list) { padding-top: 7rem; } 
 }
 @media only screen and (max-width: 600px){
 .filt-btn { flex: unset !important; width: fit-content !important; } 
 .board_top .boardschbox .search_box:has(.filt-btn) { justify-content: end; } 
 }
/* === 상세검색 — 모바일 바텀시트 (≤767px) === */
.bottom-sheet-backdrop { display: none; } 
@media only screen and (max-width: 767px) { /* 백드롭 */
 .bottom-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } 
 .bottom-sheet-backdrop.is-open { opacity: 1; visibility: visible; } 
 /* 시트 본체 (filter-list를 바텀시트로 변신) */
 .filter-list { display: flex !important; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; max-height: 85vh; margin: 0 !important; padding: 0; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1); transform: translateY(100%); transition: transform 0.3s ease; overflow: hidden; } 
 .filter-list.is-open { transform: translateY(0); } 
 /* 헤더 */
 .filter-list .bottom-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--bd-color); flex-shrink: 0; } 
 .filter-list .bottom-sheet-close { width: 24px; height: 24px; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%231D1D1D' stroke-linecap='round' stroke-width='2' d='M6 6l12 12M6 18L18 6'/%3E%3C/svg%3E") no-repeat center / contain; cursor: pointer; } 
 /* 본문 (스크롤 영역) */
 .filter-list .boardview { flex: 1; overflow-y: auto; padding: 10px 20px; } 
 /* 푸터 */
 .filter-list .bottom-sheet-footer { display: flex; gap: 10px; align-items: stretch; padding: 16px 20px; border-top: 1px solid var(--bd-color); flex-shrink: 0; } 
 .filter-list .btn-apply { flex: 1; height: 44px; background: var(--main); color: #fff; border: 0; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; } 
 /* reset-btn absolute 해제 + apply와 동일 너비 */
 .filter-list .bottom-sheet-footer .reset-btn { position: static; bottom: auto; right: auto; flex: 1; height: 44px; line-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0; } 
 .filter-list.is-open .box { max-width:unset } 
 body.bottom-sheet-open { overflow: hidden; } 
 }

/* PC (≥768px): 바텀시트 전용 헤더/푸터 컨테이너 정리 */
@media (min-width: 768px){
 .filter-list .bottom-sheet-header { display: none; } 
 .filter-list .bottom-sheet-footer { display: block; padding: 0; border: 0; } 
 }

/* 프로그램 상세 */
 
.program-detail { display: flex; gap: 50px; } 
.program-detail { position: relative; display: flex; gap: 40px; flex-wrap: wrap; } 
.program-detail .program-detail-lf { width: 380px; } 
.program-detail .program-detail-lf .img-wrap { position: relative; width: 100%; height: 340px; border-radius: 2rem; } 
.program-detail .program-detail-lf .img-wrap img { position: absolute; width: 100%; height: 100%; object-fit: cover; } 
.program-detail .program-detail-rg { width: calc(100% - 380px - 50px); } 

.board_detail .title_box.program-tit { position: relative; border: unset; } 
.pg-det-list > .item { display: flex; } 
.pg-det-list > .item + .item { margin-top: 15px; } 
.pg-det-list > .item > em { width: 180px; flex-shrink: 0; } 

.program-content { border-top: 1px solid var(--bd-color); border-bottom: 1px solid var(--bd-color); padding: 30px 0; line-height: 1.6; word-break: break-all; } 
@media only screen and (max-width:1023px){
 .board_detail .title_box.program-tit { position: absolute; top: 0; right: 0; width: calc(100% - 380px - 50px); align-items: baseline; padding-top: 40px; } 
 .program-cate { position: absolute; top: 40px; right: 0; } 
 .program-detail { flex-direction: column; gap: 3rem; padding-top: 4rem; } 
 .program-detail .program-detail-lf { max-width: 400px; width: 100%; } 
 .program-detail .program-detail-lf .img-wrap { height: 240px; } 
 .program-detail .program-detail-rg { width: 100%; } 
 .pg-det-list { width: 100%; } 
 .pg-det-list > .item > em { width: 120px; } 
 }
@media only screen and (max-width:767px){
 .board_detail .title_box.program-tit { position: static; width: 100%; padding-top: 4rem; } 
 .program-detail { padding-top: unset; } 
 .program-detail .program-detail-lf { max-width: unset; width: 100%; } 
 .program-detail .program-detail-lf .img-wrap { height: 20vh; border-radius: 1rem; } 
 .program-detail .program-detail-rg { width: 100%; } 
 }
 /* 상담 서비스 */

.service-tit-bf { display: block; width: 24px; height: 24px; background: url(../img/content/sub05/sevice-tit-bf.svg) no-repeat center center / contain; } 
.service-list > .item .item-lf { position: relative; width: calc(100% - 3rem - 390px); } 
.service-list > .item .item-lf .item-scroll-wrap { overflow-y: auto; height: 200px; } 
.service-list > .item .item-lf p { word-break: break-all } 
.item-scroll-event { position: absolute; bottom: 10px; right: 10px; z-index: 1; } 
.item-scroll-event.hidden { display: none; } 
.item-scroll-event .scroll-txt { display: inline-flex; gap: .5rem; align-items: center; padding: 10px 20px; border-radius: 99px; background: rgba(246, 246, 247, 0.80); backdrop-filter: blur(4px); } 
.item-scroll-event .scroll-txt i { display: block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.8556 2.47847C13.1158 2.73881 13.1159 3.16035 12.8556 3.42065L8.47125 7.80503L8.42047 7.85034C8.15867 8.06378 7.77311 8.04893 7.52906 7.80503L3.14469 3.42065C2.88451 3.16036 2.88457 2.73879 3.14469 2.47846C3.40504 2.21812 3.82731 2.21812 4.08766 2.47846L8.00015 6.39097L11.9127 2.47847C12.173 2.21812 12.5953 2.21812 12.8556 2.47847ZM12.8556 8.19565C13.1158 8.45598 13.1158 8.87753 12.8556 9.13784L8.47125 13.5222L8.42047 13.5675C8.15866 13.781 7.77312 13.7661 7.52906 13.5222L3.14469 9.13784C2.88453 8.87754 2.88456 8.45597 3.14469 8.19565C3.40503 7.9353 3.82731 7.9353 4.08765 8.19565L8.00015 12.1082L11.9127 8.19565C12.173 7.9353 12.5953 7.9353 12.8556 8.19565Z' fill='%231D1D1D'/%3E%3C/svg%3E")no-repeat center center / contain; } 
.service-list .list-st3 > li { display: flex; } 
.service-list .list-st3 > li > span { width: 130px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.service-list > .item .img-wrap { width: 390px; height: 260px; border: 1px solid var(--gray-e5); } 
.service-list > .item .img-wrap img { width: 100%; height: 100%; object-fit: cover; } 
@media only screen and (max-width: 1023px){
 .service-list > .item .item-lf { width: calc(100% - 3rem - 280px); } 
 .service-list > .item .img-wrap { width: 280px; height: 190px; } 
 }
@media only screen and (max-width: 767px){
 .service-list .item { display: flex; flex-direction: column; gap: unset; } 
 .service-list .item .item-lf { display: contents; } 
 .service-list .item .item-lf > .flex { order: 1; margin-bottom: 15px; } 
 .service-list .item .img-wrap { order: 2; position: relative; width: 100%; height: 0; padding-bottom: 67.86%; } 
 .service-list .item .img-wrap img { position: absolute; top: 0; left: 0; } 
 .service-list .item .item-scroll-wrap { order: 3; margin-top: 15px; } 
 .service-list .list-st3 > li > span { width: 100px; } 

 .item-scroll-event { bottom: 20px; right: 20px; } 
 .item-scroll-event .scroll-txt { justify-content: center; align-items: center; width: 40px; height: 40px; padding: 0; } 
 .item-scroll-event .scroll-txt span { display: none; } 
 }

/* 커뮤니티 목록 */
.communuty-list .item .img-wrap { width: 300px; height: 272px; } 
.communuty-list .item .item-rg { display: flex; flex-direction: column; justify-content: space-between; width: 100%; } 
.communuty-list .item .item-rg strong { display: flex; gap: .5rem; align-items: center; } 
.communuty-list .item .item-rg p { font-size: clamp(17px ,2vw , 1.9rem); } 
.communuty-tit-bf { display: block; width: 24px; height: 24px; background: url(../img/content/sub04/community-tit-bf.svg) no-repeat center center / contain; } 
.key-list { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; } 
.key-list > li span { color: var(--main); font-size: 16px; } 
.key-list > li span::before { content: "#"; margin-right: .5rem; } 
@media only screen and (max-width: 1023px){
 .communuty-list .item .img-wrap { width: 100px; height: 88px; } 
 }
 @media only screen and (max-width: 767px){
 .communuty-list .btn8 { display: none; } 
 .communuty-list .item .item-rg strong { align-items: baseline; } 
 .communuty-tit-bf { width: 18px; height: 18px; margin-top: 10px; } 
 }

/* 만족도 등록 */
.survey-form .survey-item { border-radius: 20px; padding: 3rem; border: 1px solid var(--gray-dd); } 
.survey-form .survey-item + .survey-item { margin-top: 24px; } 
.survey-tip { border-radius: 20px; border: 1px solid var(--main); background: var(--bg-light); color: var(--main); margin: 24px 0; padding: 2rem 4rem; } 
@media only screen and (max-width: 767px){
 .survey-form .survey-item { padding: 2rem; } 
 .survey-form .survey-item + .survey-item { margin-top: 14px; } 
 .survey-tip { margin: 14px 0; padding: 10px 20px; border-radius: 10px; } 
 }

/* 만족도 결과 */
.tableA .inp-flex { flex-grow: 1; display: flex; align-items: center; gap: 5px; } 

/* 만족도 결과 */
.survey-result-table { table-layout: fixed; } 
.survey-result-table th { text-align: left; } 
.survey-result-table th p { font-weight: 400; } 
.survey-result-table td { color: var(--txt-gray); } 
.survey-result-table td .result-bar { display: flex; align-items: center; gap: 12px; --gauge-track: min(580px, 60%); } 
.survey-result-table td .result-bar .gauge { flex-shrink: 0; height: 28px; width: calc(var(--gauge-track) * var(--p, 0) / 100); } 
.survey-result-table td .result-bar .gauge .bar { display: block; width: 100%; height: 100%; background: var(--main-dark); border-radius: 0 6px 6px 0; } 
.survey-result-table td .result-bar .num { flex-shrink: 0; font-size: clamp(15px, 2vw, 1.7rem); color: var(--gray-75); } 
.survey-result-table td .etc-label { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } 
.btn-opinion { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--main); background: #fff; border: 1px solid var(--main); border-radius: 6px; cursor: pointer; } 
.btn-opinion:hover { background: var(--bg-light); } 

@media only screen and (max-width: 767px){
 .survey-result { overflow-x: auto; -webkit-overflow-scrolling: touch; } 
.survey-result-table { min-width: 720px; } 
.survey-result-table col:nth-child(1) { width: 5% !important; } 
.survey-result-table col:nth-child(2) { width: 20% !important; } 
.survey-result-table col:nth-child(3) { width: auto !important; } 
.survey-result-table .survey-result-head { padding: 1.5rem; } 
.survey-result-table td .result-bar { flex-wrap: wrap; gap: 6px; } 
.survey-result-table td .result-bar .num { font-size: 14px; } 
 }
@media only screen and (max-width: 450px){
 .survey-result-table { display: table; width: 100%; } 
.survey-result-table tbody { display: table-row-group; width: auto; } 
.survey-result-table tr { display: table-row; width: auto; border-bottom: 1px solid var(--bd-color); } 
.survey-result-table td { display: table-cell; width: auto; border-bottom: 0; } 
 }

/* 만족도 결과 - 의견 보기 팝업 표 */
.opinion-table { table-layout: fixed; } 
.opinion-table th, .opinion-table td { padding: 1.6rem; text-align: center; font-size: clamp(15px, 2vw, 1.7rem); } 
.opinion-table td.txt-lf { text-align: left; } 

@media only screen and (max-width: 450px){
 .opinion-table { display: table; width: 100%; } 
.opinion-table thead { display: table-header-group; } 
.opinion-table tbody { display: table-row-group; } 
.opinion-table tr { display: table-row; border-bottom: 1px solid var(--bd-color); } 
.opinion-table td { display: table-cell; width: auto; border-bottom: 0; padding: 1.2rem; } 
 }

/* 일자리 찾기 */
.find-job-list { display: flex; flex-direction: column; gap: 2.5rem; border-top: 1px solid #1d1d1d; padding-top: 4rem; } 
.find-job-list > .item { padding: 3rem 3rem 3rem 3rem; background: #fff; border-radius: 20px; border: 1px solid var(--bd-dark); transition: border .3s; } 
.find-job-list > a.item:hover , .find-job-list > a.item.active { border: 1px solid var(--main); } 
.find-job-list .key-list { width: 100%; padding-top: 20px; border-top: 1px solid var(--bd-color); } 
.find-job-bf { display: block; width: 24px; height: 24px; background: url(../img/content/sub01/find-job-bf.svg) no-repeat center center / contain; } 
.icon-building { display: block; width: 24px; height: 24px; background: url(../img/content/sub01/icon-building.svg) no-repeat center center / contain; } 
.fold-btn { display: block; width: 36px; height: 36px; border-radius: 100px; background: var(--light-gray) url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5258 14.3872C10.1985 14.6542 9.71597 14.6354 9.41087 14.3303L3.93073 8.85013C3.60529 8.52469 3.60529 7.99718 3.93073 7.67174C4.25616 7.34631 4.78368 7.34631 5.10911 7.67174L10.0001 12.5627L14.891 7.67175C15.2165 7.34631 15.744 7.34631 16.0694 7.67175C16.3948 7.99718 16.3948 8.52469 16.0694 8.85013L10.5893 14.3303L10.5258 14.3872Z' fill='%2356595E'/%3E%3C/svg%3E%0A") no-repeat center center / 15px; } 
.fold-btn.on { background: var(--light-gray) url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5258 14.3872C10.1985 14.6542 9.71597 14.6354 9.41087 14.3303L3.93073 8.85013C3.60529 8.52469 3.60529 7.99718 3.93073 7.67174C4.25616 7.34631 4.78368 7.34631 5.10911 7.67174L10.0001 12.5627L14.891 7.67175C15.2165 7.34631 15.744 7.34631 16.0694 7.67175C16.3948 7.99718 16.3948 8.52469 16.0694 8.85013L10.5893 14.3303L10.5258 14.3872Z' fill='%230072CA'/%3E%3C/svg%3E%0A") no-repeat center center / 15px; transform: rotate(180deg); } 
.fold-con .program-list { display: flex; flex-wrap: wrap; gap: 10px; } 
.fold-con .program-list > li { flex: 1 1 49%; } 
.fold-con .program-list > li + li { margin-top: unset; } 
.find-job-list .fold-con { display: none; } 
.find-job-list .item.active .fold-con { display: flex; } 
.find-job-list .item.active .fold-summary { display: none; } 
.fold-con .due-date { display: inline-flex; align-items: center; gap: 7px; padding: 20px 30px; border-radius: 20px; background: var(--light-gray); font-weight: 500; flex-shrink: 0; } 
.fold-con .due-date > i { display: block; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M14.9346 1.66016C15.3556 1.66042 15.6971 2.00176 15.6973 2.42285V3.45801H19.2334C19.6545 3.45826 19.9961 3.80047 19.9961 4.22168V19.5791C19.9961 20.0003 19.6545 20.3425 19.2334 20.3428H2.7666C2.34524 20.3428 2.00391 20.0005 2.00391 19.5791V4.22168C2.00391 3.80032 2.34524 3.45801 2.7666 3.45801H6.24805V2.42285C6.24818 2.0016 6.58946 1.66016 7.01074 1.66016C7.43198 1.6602 7.7733 2.00163 7.77344 2.42285V3.45801H14.1709V2.42285C14.171 2.0016 14.5133 1.66016 14.9346 1.66016ZM3.5293 18.8164H18.4707V9.33301H3.5293V18.8164ZM7.04102 14.7109C7.46228 14.7109 7.80355 15.0524 7.80371 15.4736C7.80371 15.895 7.46238 16.2373 7.04102 16.2373C6.61967 16.2373 6.27832 15.895 6.27832 15.4736C6.27848 15.0524 6.61977 14.711 7.04102 14.7109ZM10.9668 14.7109C11.3879 14.7111 11.7293 15.0525 11.7295 15.4736C11.7295 15.8949 11.388 16.2372 10.9668 16.2373C10.5454 16.2373 10.2031 15.895 10.2031 15.4736C10.2033 15.0524 10.5455 14.7109 10.9668 14.7109ZM14.8975 14.7109C15.3187 14.7109 15.661 15.0524 15.6611 15.4736C15.6611 15.895 15.3188 16.2373 14.8975 16.2373C14.4763 16.2371 14.1348 15.8949 14.1348 15.4736C14.1349 15.0525 14.4764 14.7112 14.8975 14.7109ZM7.04102 11.4229C7.46232 11.4229 7.80362 11.7643 7.80371 12.1855C7.80371 12.6069 7.46238 12.9482 7.04102 12.9482C6.61967 12.9482 6.27832 12.6069 6.27832 12.1855C6.27841 11.7643 6.61973 11.4229 7.04102 11.4229ZM10.9668 11.4229C11.388 11.423 11.7294 11.7643 11.7295 12.1855C11.7295 12.6068 11.388 12.9481 10.9668 12.9482C10.5454 12.9482 10.2031 12.6069 10.2031 12.1855C10.2032 11.7643 10.5455 11.4229 10.9668 11.4229ZM14.8975 11.4229C15.3188 11.4229 15.661 11.7643 15.6611 12.1855C15.6611 12.6069 15.3188 12.9482 14.8975 12.9482C14.4763 12.948 14.1348 12.6068 14.1348 12.1855C14.1349 11.7644 14.4763 11.4231 14.8975 11.4229ZM3.5293 7.80762H18.4707V4.98438H15.6973V5.82031C15.6973 6.24151 15.3557 6.58372 14.9346 6.58398C14.5132 6.58398 14.1709 6.24167 14.1709 5.82031V4.98438H7.77344V5.82031C7.77343 6.24164 7.43206 6.58394 7.01074 6.58398C6.58938 6.58398 6.24805 6.24167 6.24805 5.82031V4.98438H3.5293V7.80762Z' fill='%23E23F63'/%3E%3C/svg%3E")no-repeat center center / contain; } 
@media only screen and (max-width: 1023px){
 .fold-con { flex-wrap: wrap; } 
 }
@media only screen and (max-width: 767px){
 .find-job-list > .item { padding: 2rem; } 
 .fold-con .due-date { justify-content: center; width: 100%; padding: 10px; border-radius: 10px; } 
 .find-job-list .key-list { justify-content: center; padding-top: 10px; } 
 }

 .find-job-detail .find-job-bf { width: 30px; height: 30px; } 
 .find-job-detail .title-box-list { display: flex; gap: 30px; font-size: clamp( 17px,2vw, 1.9rem); } 
 .find-job-detail .title-box-list > li { display: flex; } 
 .find-job-detail .title-box-list > li > em { width: 160px; } 
 .find-job-detail .title-box-list > li > span { width: 180px; } 

 .find-job-info { border-top: 1px solid var(--bd-color); } 
 .icon-profile { display: block; width: 24px; height: 24px; background: url(../img/content/sub01/icon-profile.svg) no-repeat center center / contain; } 
 .job-info-lf { width: 300px; } 
 .job-info-rg { width: calc(100% - 300px - 20px); padding-bottom: 20px; border-bottom: 1px solid var(--bd-color); font-size: clamp( 17px,2vw, 1.9rem); } 
 .job-info-rg > ul > li { display: flex; gap: 10px; } 
 .job-info-rg > ul > li + li { margin-top: 15px; } 
 .job-info-rg > ul > li> em { width: 180px; } 
 .job-info-rg > ul > li > span { width: calc(100% - 180px - 10px); } 
 @media only screen and (max-width: 1023px){
 .title_box .title-flex { flex-direction: column; justify-content: flex-start; align-items: baseline; gap: 10px; } 
 .title_box .title-flex > .flex { flex-direction: column; justify-content: flex-start; align-items: baseline; } 
 }
 @media only screen and (max-width: 767px){
 .find-job-detail .title-box-list { flex-direction: column; gap: 10px; } 
 .find-job-info > .flex { flex-direction: column; gap: 15px; } 
 .job-info-rg { width: 100%; } 
 .job-info-rg > ul > li> em { width: 100px; } 
 .job-info-rg > ul > li > span { width: calc(100% - 100px); } 
 }

/* 일자리 등록 버튼 드롭다운(신규 등록 / 기존 내역 확인) */
.regist-drop { position: relative; display: inline-block; } 
.regist-drop .btn_regist .icon-arr-down { transition: transform .2s; } 
.regist-drop.open .btn_regist .icon-arr-down { transform: rotate(180deg); } 
.regist-drop-list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 100%; width: max-content; max-width: 280px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid #e0e3e8; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); display: none; } 
.regist-drop.open .regist-drop-list { display: block; } 
.regist-drop-list li button { display: block; width: 100%; text-align: left; white-space: nowrap; padding: 12px 16px; border: 0; border-radius: 10px; background: none; font-size: 17px; font-weight: 500; line-height: 1.5; color: #56595e; cursor: pointer; transition: background .15s, color .15s; } 
.regist-drop-list li button:hover,
.regist-drop-list li button:focus { background: #f6f6f7; color: #0072ca; } 
@media only screen and (max-width: 767px){
 .regist-drop-list { max-width: none; } 
 }

/* 서울의 역사 (sub01) */
.subtit + .sub-desc { text-align: center; font-size: clamp(17px, 1.8vw, 2rem); font-weight: 500; } 
.contentsarea .lg-tit { display: flex; gap: 12px; margin-bottom: 16px; color: #1d1d1d; word-break: keep-all; } 
.contentsarea .lg-tit::before { content: ""; flex-shrink: 0; width: 22px; height: 25px; background: url(../img/common/tit-bf.png) no-repeat center center / contain; } 
.contentsarea .tit-cont { padding-left: 40px; padding-bottom: 40px; } 
.contentsarea .tit-cont > p.fc-txt { font-size: clamp(16px, 2vw, 2.2rem); line-height: 1.5; color: #56595e; } 
.contentsarea .tit-cont .bg-gray-light { padding: 32px 40px; margin-bottom: 24px; } 
.contentsarea .tit-cont .list-st2 > li { font-size: clamp(16px, 2vw, 2.2rem); color: #56595e; } 
.contentsarea .tit-cont .list-st2 > li + li { margin-top: 13px; } 
.contentsarea .tit-cont .list-st2 > li::before { top: 1.4rem; } 
.contentsarea .tit-img-wrap { display: flex; gap: 20px; margin-top: 24px; } 
.contentsarea .tit-img-wrap img { flex: 1; min-width: 0; width: 100%; height: 400px; object-fit: cover; border-radius: 20px; } 
.contentsarea .tit-img-wrap.img-center { background: #f6f6f7; border-radius: 20px; align-items: center; justify-content: center; } 
.contentsarea .tit-img-wrap.img-center img { flex: none; width: auto; height: 432px; max-width: 100%; border-radius: 0; } 
@media only screen and (max-width: 767px){
 .contentsarea .lg-tit { gap: 8px; } 
 .contentsarea .lg-tit::before { width: 18px; height: 20px; } 
 .contentsarea .tit-cont { padding-left: 0; padding-bottom: 30px; } 
 .contentsarea .tit-cont .bg-gray-light { padding: 20px; } 
 .contentsarea .tit-img-wrap img { height: 220px; } 
 .contentsarea .tit-img-wrap.img-center { height: 320px; } 
 .contentsarea .tit-img-wrap.img-center img { max-height: 280px; } 
 }
/* 위치 소개 - 인포그래픽 이미지(원본 비율 유지, 크롭 없음) */
.contentsarea .tit-img-wrap.img-auto img { flex: none; width: 100%; height: auto; object-fit: contain; border-radius: 0; } 

/* 체류자격변경 등 - 숫자 제목(num-tit) */
.contentsarea .num-tit { display: flex; align-items: center; gap: 16px; margin: 20px 0 16px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.5; color: var(--main); word-break: keep-all; } 
.contentsarea .num-tit .num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--main); color: #fff; font-size: 17px; line-height: 1; } 
/* 번호 없는 파란 소제목(문의처의 기관명 등) */
.contentsarea .org-tit { margin-bottom: 8px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 1.5; color: var(--main); word-break: keep-all; } 
.contentsarea .tit-cont .list-st2 .list-st1 { margin-top: 10px; } 
.contentsarea .tit-cont .list-st2 .list-st1 > li { font-size: clamp(15px, 1.6vw, 1.9rem); line-height: 1.6; color: #56595e; } 
.contentsarea .tit-cont .list-st2 .list-st1 > li::before { top: 1.1rem; } 
@media only screen and (max-width: 767px){
 .contentsarea .num-tit { gap: 10px; } 
 .contentsarea .num-tit .num { width: 26px; height: 26px; font-size: 15px; } 
 }

/* 공통 - 체크 아이콘 타이틀(check-tit) / 블루 카드(check-card) */
.check-tit { display: flex; align-items: center; gap: 8px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; line-height: 1.5; color: #1c2025; word-break: keep-all; } 
.check-tit::before { content: ""; flex-shrink: 0; width: 29px; height: 29px; background: url(../img/common/icn-check-tit.svg) no-repeat center center / contain; } 
.contentsarea .tit-cont .check-card { background: #eff7ff; padding: 40px; border-radius: 20px; } 
.contentsarea .tit-cont .check-card .check-tit { margin-bottom: 4px; } 
@media only screen and (max-width: 767px){
 .contentsarea .tit-cont .check-card { padding: 20px; } 
 .check-tit::before { width: 24px; height: 24px; } 
 }

/* 게시판 상단 이용안내 카드 */
.contentsarea .board-guide-card { background: #eff7ff; border-radius: 20px; padding: 32px 40px; margin-bottom: 20px; } 
.contentsarea .board-guide-card .check-tit { margin-bottom: 14px; } 
.contentsarea .board-guide-card ul li { font-size: 1.7rem; line-height: 1.5; color: var(--txt-gray); word-break: keep-all; } 
.contentsarea .board-guide-card ul li + li { margin-top: 8px; } 
@media only screen and (max-width: 767px){
 .contentsarea .board-guide-card { padding: 20px; border-radius: 10px; } 
 }

/* 이미지 스크롤 리빌(bg-box) - in-view 시 왼쪽에서 오른쪽으로 나타남 */
.bg-box { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1); will-change: clip-path; } 
.bg-box.in-view { clip-path: inset(0 0 0 0); } 
.contentsarea .tit-cont .bg-box { width: 100%; height: clamp(180px, 23vw, 300px); border-radius: 20px; overflow: hidden; } 
.contentsarea .tit-cont .bg-box img { display: block; width: 100%; height: 100%; object-fit: cover; } 
@media (prefers-reduced-motion: reduce){
 .bg-box { clip-path: none; transition: none; } 
 }

/* 파란점 불릿 라벨 + 하위 설명(list-st4 .b-sub) / 전화 아이콘 */
.contentsarea .tit-cont.lead { padding-bottom: 8px; } 
.list-st4 .b-sub { display: block; font-weight: 400; line-height: 1.5; color: #56595e; } 
.list-st4 .b-sub a { color: inherit; } 
.list-st4 .b-sub.b-tel { display: flex; align-items: center; gap: 6px; } 
.icn-tel { flex-shrink: 0; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356595e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain; } 
.icn-tel-blue { flex-shrink: 0; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230072CA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") no-repeat center / contain; } 

/* 긴급지원 절차 흐름도(step-flow) - blue-step-arr.svg 연결 */
.step-flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 40px 32px; padding: 32px; background: #f3f3f3; border-radius: 24px; } 
.step-flow .step { position: relative; flex: 1 1 31%; min-width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 170px; padding: 16px 12px; background: #fff; border: 1px solid #ccd1d8; border-radius: 16px; text-align: center; } 
.step-flow .step::after { content: ""; position: absolute; top: 50%; right: -25px; transform: translateY(-50%); width: 11px; height: 12px; background: url(../img/content/sub02/blue-step-arr.svg) no-repeat center center / contain; } 
.step-flow .step:nth-child(3)::after { left: 50%; top: unset; bottom: -28px; transform: rotate(90deg); } 
.step-flow .step:nth-child(4)::after { transform: rotateY(180deg); } 
.step-flow .step:nth-child(5)::after { display: none; } 
.step-flow .step .s-tit { font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; line-height: 1.4; color: #1d1d1d; } 
.step-flow .step .s-sub { font-size: 15px; line-height: 1.4; color: #818892; word-break: keep-all; } 
@media only screen and (max-width: 1057px){
 .step-flow .step:nth-child(2)::after { top: unset; bottom: -25px; left: 50%; transform: rotate(90deg); } 
 .step-flow .step:nth-child(4)::after { right: unset; left: -20px; } 
 }
@media only screen and (max-width: 767px){
 .step-flow { flex-direction: column; padding: 20px; } 
 .step-flow .step { width: 100%; min-height: 76px; } 
 .step-flow .step:nth-child(1)::after, .step-flow .step:nth-child(4)::after { top: unset; bottom: -25px; left: 50%; transform: rotate(90deg); } 
 .step-flow .step-arr { transform: rotate(90deg); } 
 }

/* 보건복지 콜센터 신고체계 흐름도(flow-wrap) */
.flow-wrap { position: relative; padding: 100px 32px; background: var(--bg-light); border-radius: 20px; } 
.flow-wrap .top-area { display: flex; align-items: center; justify-content: center; gap: 40px; margin-bottom: 10px; } 
.flow-wrap .top-area .center-box { display: inline-flex; align-items: center; justify-content: center; min-height: 68px; padding: 20px 32px; text-align: center; font-size: clamp(15px, 1.5vw, 22px); line-height: 1.4; border-radius: 16px; word-break: keep-all; } 
.flow-wrap .top-area .txt { font-size: clamp(15px, 1.5vw, 22px); font-weight: 600; color: #1d1d1d; flex-shrink: 0; } 
.flow-wrap .top-area .center-box { font-weight: 700; color: #fff; background: var(--main-dark); flex-shrink: 0; } 
.flow-wrap .arrow { max-width: 160px; width: 100%; height: 2px; border-radius: 10px; background: var(--main-light); } 
.flow-wrap .arrow::after { content: ""; position: absolute; top: 50%; width: 8px; height: 13px; background: url(../img/content/sub02/line-arr.svg) no-repeat center center / contain; } 
.flow-wrap .arrow-left::after { left: -2px; transform: translateY(-50%) rotateY(180deg); } 
.flow-wrap .arrow-right::after { right: -2px; transform: translateY(-50%); } 
.flow-wrap .bottom-line { position: relative; display: block; max-width: 850px; width: 100%; height: 84px; margin: 0 auto; border: 2px solid var(--main-light); border-top: none; } 
.flow-wrap .bottom-line::before { content: ""; position: absolute; top: -4px; left: -5px; width: 8px; height: 13px; background: url(../img/content/sub02/line-arr.svg) no-repeat center center / contain; transform: rotate(-90deg); } 
.flow-wrap .bottom-line::after { content: ""; position: absolute; top: -4px; right: -5px; width: 8px; height: 13px; background: url(../img/content/sub02/line-arr.svg) no-repeat center center / contain; transform: rotate(-90deg) } 
@media only screen and (max-width: 1023px){
 .flow-wrap { padding: 50px 32px; } 
 }
@media only screen and (max-width: 767px){
 .flow-wrap { padding: 3rem; } 
 .flow-wrap .top-area { gap: 20px; margin-bottom: 0; flex-direction: column; } 
 .flow-wrap .top-area .center-box { padding: 10px 14px; } 
 .flow-wrap .arrow { width: 2px; height: 30px; } 
 .flow-wrap .arrow-left::after { top: -3px; left: -3px; transform: rotate(270deg); } 
 .flow-wrap .arrow-right::after { top: unset; left: -3px; bottom: -4px; transform: rotate(90deg); } 
 .flow-wrap .bottom-line { display: none; } 
 }

/* 긴급복지 생계지원금 가로형 표(amount-table) - 가구원수가 열 */
.amount-table { overflow-x: auto; } 
.amount-table table { width: 100%; border-collapse: collapse; border-top: 2px solid #56595e; table-layout: fixed; } 
.amount-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } 
.amount-table th,
.amount-table td { padding: 16px 12px; text-align: center; font-size: 17px; line-height: 1.5; color: #1d1d1d; border-bottom: 1px solid #e0e3e8; border-left: 1px solid #e0e3e8; } 
.amount-table th:first-child,
.amount-table td:first-child { border-left: 0; } 
.amount-table thead th { background: #f6f6f7; font-weight: 700; } 
.amount-table tbody th { background: #fff; font-weight: 400; } 
.amount-table tbody td { background: #fff; } 
@media only screen and (max-width: 767px){
 .amount-table table { min-width: 800px; } 
 }

/* 사례 Q&A 블루 카드(질문 아이콘) */
.contentsarea .tit-cont .check-card .q-tit { display: flex; align-items: center; gap: 8px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; line-height: 1.5; color: #1c2025; word-break: keep-all; } 
.contentsarea .tit-cont .check-card .q-tit::before { content: ""; flex-shrink: 0; width: 25px; height: 25px; background: url(../img/common/icon-question.svg) no-repeat center / contain; } 
.contentsarea .tit-cont .check-card .q-desc { font-size: clamp(16px, 2vw, 2.2rem); line-height: 1.5; color: #56595e; word-break: keep-all; } 
.contentsarea .tit-cont .check-card .q-tit + .q-desc { margin-top: 10px; } 
.contentsarea .tit-cont .check-card .q-desc + .q-desc { margin-top: 12px; } 
/* 알아두세요 카드 : info 아이콘 + 소제목(c-label) */
.contentsarea .tit-cont .check-card .info-tit::before { background-image: url(../img/content/sub02/icon-view-bf.svg); } 
.contentsarea .tit-cont .check-card .c-label { font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; line-height: 1.5; color: #1d1d1d; } 
.contentsarea .tit-cont .check-card .q-desc + .c-label { margin-top: 16px; } 
.contentsarea .tit-cont .check-card .c-label + .q-desc { margin-top: 4px; } 
.contentsarea .tit-cont .check-card .q-tit + .c-label { margin-top: 8px; } 
@media only screen and (max-width: 767px){
 .contentsarea .tit-cont .check-card .q-tit { flex-direction: column; align-items: baseline; } 
 }

/* 국제전화 거는 방법(intl-call) - 일반전화/휴대폰 아이콘 + 다이얼 순서 */
.intl-call { } 
.intl-dir { display: flex; align-items: center; gap: 20px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; line-height: 1.5; color: #1c2025; } 
.intl-dir .ico-arr { flex-shrink: 0; width: 11px; height: 12px; background: url(../img/content/sub02/blue-step-arr.svg) no-repeat center center / contain; } 
.intl-call-item { display: flex; align-items: center; gap: 40px; padding: 32px 0; border-bottom: 1px solid #ccd1d8; } 
.intl-call-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 148px; height: 148px; border-radius: 50%; background: #fff; border: 1px solid #eef2f7; box-shadow: 0 4px 14px rgba(29, 29, 29, 0.06); } 
.intl-call-ico img { width: 100px; height: 100px; object-fit: contain; } 
.intl-call-info { flex: 1; min-width: 0; } 
.intl-call-tit { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; line-height: 1.5; color: #1d1d1d; } 
.intl-call-tit::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #1e9def; } 
.dial-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; } 
.dial-grp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } 
.dial-lead, .dial-lb { font-size: 17px; font-weight: 500; line-height: 1.5; color: #1d1d1d; word-break: keep-all; } 
.dial-op { font-size: 17px; font-weight: 500; line-height: 1.5; color: #818892; } 
.dial-box { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 4px; border: 1px solid #ccd1d8; border-radius: 50px; background: #fff; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--main); } 
@media only screen and (max-width: 767px){
 .intl-call { padding: 0 20px; } 
 .intl-call-item { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 0; } 
 .intl-call-ico { width: 96px; height: 96px; } 
 .intl-call-ico img { width: 64px; height: 64px; } 
 .dial-seq { gap: 8px 10px; margin-top: 20px; } 
 }

/* 한국 학교 제도 흐름도(school-flow) - 의무/선택교육 배지 카드 + 화살표 */
.school-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; padding: 32px; background: #f6f6f7; border-radius: 24px; } 
.school-flow .sc-card { flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 12px; background: #fff; border: 1px solid #ccd1d8; border-radius: 16px; text-align: center; } 
.school-flow .sc-label { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; padding: 6px 12px; border-radius: 8px; font-size: 17px; font-weight: 500; line-height: 1.5; } 
.school-flow .sc-label.type-must { background: #eff7ff; color: #0072ca; } 
.school-flow .sc-label.type-opt { background: #f3faf2; color: #008638; } 
.school-flow .sc-name { display: flex; flex-direction: column; gap: 4px; } 
.school-flow .sc-name strong { font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; line-height: 1.5; color: #1d1d1d; } 
.school-flow .sc-name span { font-size: 19px; line-height: 1.5; color: #56595e; } 
.school-flow .sc-arr { flex: 0 0 auto; align-self: center; width: 15px; height: 15px; background: url(../img/content/sub02/blue-step-arr.svg) no-repeat center center / contain; } 
@media only screen and (max-width: 767px){
 .school-flow { flex-direction: column; padding: 20px; } 
 .school-flow .sc-card { width: 100%; } 
 .school-flow .sc-arr { transform: rotate(90deg); } 
 }

/* 컨텐츠 이미지 두개일때 flex 처리 */
.img-flex { display: flex; gap: 40px; } 
.img-flex .tit-img-wrap { flex: 1; flex-direction: column; } 
@media only screen and (max-width: 1023px){
 .img-flex { gap: 20px; } 
 }
 @media only screen and (max-width: 767px){
 .img-flex { flex-wrap: wrap; gap: 0; } 
 .img-flex > div { width: 100%; } 
 }

/* 서울의 역사 탭 콘텐츠 전환(tab-conts) */
.tab-conts > .tab-cont { display: none; } 
.tab-conts > .tab-cont.on { display: block; } 



/* 글로벌 부동산중개사무소 - 제공 서비스 아이콘 카드 */
.service-list { display: flex; flex-wrap: wrap; margin: 0 -10px; } 
.service-list > li { width: 25%; padding: 0 10px; } 
.service-card { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; height: 300px; padding: 28px 32px; border: 1px solid var(--bd-color); border-radius: 20px; margin-bottom: 20px; } 
.service-card .ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; } 
.service-card .ico img { width: 100%; height: 100%; object-fit: contain; } 
.service-card .txt { font-size: clamp(17px, 1.6vw, 1.9rem); font-weight: 600; word-break: keep-all; text-align: center; word-break: keep-all; } 
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } 
.bg-light-main { background-color: #eff7ff; } 
.tableA th.bg-main { background: var(--main); } 
.step-flow .step:last-child::after { display: none; } 
@media only screen and (max-width: 1023px){
 .service-list > li { width: 33.3%; } 
 .service-card { flex: 1 1 calc(50% - 20px); padding: 20px; height: 170px; } 
 .service-card .ico { width: 30px; height: 30px; } 
 }
@media only screen and (max-width: 767px){
 .service-list > li { width: 50%; padding: 0 5px; } 
 .service-card { height: 170px; margin-bottom: 10px; } 
 }
@media only screen and (max-width: 400px){
 .service-card { height: 130px; } 
 .service-list > li { width: 100%; } 
 }


/* 계좌개설(금융_은행) - 제목 보조어구 / 순서 스텝 / 작은 안내 / 앱 다운로드 버튼 */
.btn-download { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; background: var(--main); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap; } 
.btn-download::after { content: ""; flex-shrink: 0; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") no-repeat center / contain; } 

/* 체류기간 연장 - 신청 시기 타임라인 */
.contentsarea .intro-detail + .num-tit { margin-top: 40px; } 
.apply-timeline { background: #f6f6f7; border-radius: 20px; padding: 52px 40px; } 
.apply-flow { display: flex; align-items: flex-start; justify-content: center; gap: clamp(20px, 4vw, 60px); } 
.apply-flow .flow-item { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; } 
.apply-flow .flow-circle { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; padding: 16px; border-radius: 50%; background: #fff; border: 1px solid #bdc2c9; font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; color: #1d1d1d; text-align: center; word-break: keep-all; } 
.apply-flow .flow-chevron { display: block; width: 24px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M6.57999 9.54801L5.51999 8.48701L11.297 2.70801C11.3896 2.61486 11.4996 2.54093 11.6209 2.49048C11.7421 2.44003 11.8722 2.41406 12.0035 2.41406C12.1348 2.41406 12.2648 2.44003 12.3861 2.49048C12.5073 2.54093 12.6174 2.61486 12.71 2.70801L18.49 8.48701L17.43 9.54701L12.005 4.12301L6.57999 9.54801Z' fill='%2356595E'/%3E%3C/svg%3E") no-repeat center / contain; } 
.apply-flow .flow-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } 
.apply-flow .flow-tit { font-size: clamp(17px, 1.8vw, 19px); font-weight: 700; color: var(--main); } 
.apply-flow .flow-desc { font-size: clamp(15px, 1.5vw, 17px); font-weight: 500; color: #56595e; } 
.apply-flow .flow-arrow { flex-shrink: 0; width: 139px; height: 15px; margin-top: 92px; background: url(../img/content/sub03/sub030201-img02.svg) no-repeat center / contain; } 
@media only screen and (max-width: 767px){
 .apply-timeline { padding: 32px 20px; } 
 .apply-flow { gap: 12px; } 
 .apply-flow .flow-circle { width: 150px; height: 150px; } 
 .apply-flow .flow-arrow { width: 88px; height: 88px; margin-top: 30px; } 
 }
@media only screen and (max-width: 500px){
 .apply-flow { flex-direction: column; align-items: center; } 
 .apply-flow .flow-circle { height: 40px; background: unset; border: unset; } 
 .apply-flow .flow-arrow { transform: rotate(90deg); margin-top: unset; } 
 .apply-flow .flow-chevron { display: none; } 
 }

/* 어디서 신청하나요 - 불릿 라벨 / 온라인 신청 흐름도 */
.contentsarea .tit-cont .dot-label { display: flex; gap: 10px; font-size: clamp(17px, 1.8vw, 22px); font-weight: 500; line-height: 1.5; color: #1d1d1d; word-break: keep-all; } 
.contentsarea .tit-cont .dot-label::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 0.7em; border-radius: 50%; background: #1e9def; } 
/* step-flow 6칸(3+3) 대응: 5번째 칸에도 좌향 화살표 보강 (5칸 이하는 마지막 칸이라 영향 없음) */
.step-flow .step:nth-child(5):not(:last-child)::after { display: block; transform: rotateY(180deg); } 
/* step-flow 가로 1줄(단방향 N칸) 변형: 모든 화살표 오른쪽, 마지막 칸 강조 */
.step-flow.flow-line { flex-wrap: nowrap; } 
.step-flow.flow-line .step::after { left: auto; right: -25px; top: 50%; bottom: auto; transform: translateY(-50%); } 
.step-flow.flow-line .step:last-child::after { display: none; } 
.step-flow.flow-line.flow-end .step:last-child { border-color: var(--main); } 
/* step-flow 카드: 아이콘 + STEP 라벨 + 제목 (예: 유학생 근로 4단계) */
.step-flow .step .step-ico { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; } 
.step-flow .step .step-ico img { width: 100%; height: 100%; object-fit: contain; } 
.step-flow .step .step-no { font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; line-height: 1.5; color: var(--main-light); } 
.step-flow .step .step-name { font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; line-height: 1.4; color: #1d1d1d; word-break: keep-all; text-align: center; } 
@media only screen and (max-width: 767px){
 .step-flow.flow-line { flex-wrap: wrap; } 
 .step-flow.flow-line .step::after { left: 50%; right: auto; top: auto; bottom: -25px; transform: translateX(-50%) rotate(90deg); } 
 }

/* ===== 개인정보처리방침 - 주요 개인정보 처리 표시(라벨링) 카드 ===== */
.contentsarea .privacy-cards { display: flex; flex-wrap: wrap; gap: 26px 25px; } 
.contentsarea .privacy-card { flex: 1 1 calc((100% - 50px) / 3); min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; padding: 32px; background: #f6f6f7; border-radius: 20px; text-align: center; } 
.contentsarea .privacy-card .pc-img { flex-shrink: 0; width: 100px; height: 110px; } 
.contentsarea .privacy-card .pc-img img { width: 100%; height: 100%; object-fit: contain; } 
.contentsarea .privacy-card .pc-tit { font-size: 1.9rem; font-weight: 700; line-height: 1.5; color: #1d1d1d; } 
.contentsarea .privacy-card .pc-desc { font-size: 1.7rem; line-height: 1.5; color: #1d1d1d; word-break: keep-all; } 
@media only screen and (max-width: 1023px){
 .contentsarea .privacy-card { flex: 1 1 calc((100% - 25px) / 2); } 
 }
@media only screen and (max-width: 767px){
 .contentsarea .privacy-cards { gap: 10px; } 
 .contentsarea .privacy-card { flex: 1 1 100%; } 
 .contentsarea .privacy-card .pc-img { width: 70px; height: 70px; } 
 }

/* ===== 이메일무단수집거부 ===== */
.contentsarea .email-deny { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 0 80px; } 
.contentsarea .email-deny .ed-tit { font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.5; color: #1d1d1d; word-break: keep-all; } 
.contentsarea .email-deny .ed-ico { width: 102px; height: 102px; margin: 64px 0 24px; } 
.contentsarea .email-deny .ed-ico img { width: 100%; height: 100%; object-fit: contain; } 
.contentsarea .email-deny .ed-desc { font-size: 1.7rem; font-weight: 500; line-height: 1.6; color: #1d1d1d; word-break: keep-all; } 
.contentsarea .email-deny .ed-sub { margin-top: 24px; font-size: 1.7rem; line-height: 1.6; color: #818892; word-break: keep-all; } 
@media only screen and (max-width: 767px){
 .contentsarea .email-deny { padding: 20px 0 50px; } 
 .contentsarea .email-deny .ed-ico { margin: 40px 0 20px; } 
 }

/* ===== 센터위치(지도) ===== */
.contentsarea .map-area { display: flex; flex-direction: column; align-items: center; padding-top: 20px; } 
.contentsarea .map-area .tab-conts, .contentsarea .map-area .tab-cont { width: 100%; } 
.contentsarea .map-area .tab-conts { position: relative; } 
.contentsarea .map-area .tab-conts > .tab-cont { display: block; } 
.contentsarea .map-area .tab-conts > .tab-cont:not(.on) { position: absolute; top: 0; left: 0; visibility: hidden; } 
.contentsarea .map-tit { font-size: clamp(26px, 4vw, 38px); font-weight: 700; line-height: 1.5; color: #1d1d1d; text-align: center; padding-bottom: 40px; } 
.contentsarea .map-tab { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; } 
.contentsarea .map-tab button { flex: 1 1 0; min-width: 0; padding: 18px 20px; border: 1px solid var(--main); border-radius: 50px; background: #fff; color: var(--main); font-size: clamp(15px, 1.5vw, 19px); font-weight: 700; line-height: 1.5; white-space: nowrap; cursor: pointer; transition: all .2s; } 
.contentsarea .map-tab button.on { background: var(--main); color: #fff; } 
.contentsarea .map-box { width: 100%; margin-top: 32px; border: 1px solid #ccd1d8; border-radius: 20px; overflow: hidden; } 
.contentsarea .map-box .root_daum_roughmap { margin: 0 auto; transform-origin: 0 0; } 
.contentsarea .map-info { display: flex; gap: 32px; width: 100%; margin-top: 32px; } 
.contentsarea .map-info > li { flex: 1 1 0; min-width: 0; display: flex; gap: 20px; align-items: center; padding: 32px; background: #f6f6f7; border-radius: 20px; } 
.contentsarea .map-info .mi-label { flex-shrink: 0; display: flex; gap: 8px; align-items: center; width: 200px; font-size: 1.9rem; font-weight: 700; color: #1d1d1d; } 
.contentsarea .map-info .mi-label .ico { flex-shrink: 0; width: 28px; height: 28px; } 
.contentsarea .map-info .mi-label .ico img { width: 100%; height: 100%; object-fit: contain; } 
.contentsarea .map-info .mi-value { font-size: 1.7rem; color: #56595e; line-height: 1.5; word-break: keep-all; } 

.root_daum_roughmap .cont { display: none; } 
.contentsarea .map-select { position: relative; width: 100%; } 
.contentsarea .map-select-trigger { display: flex; width: 100%; height: 40px; padding: 0 16px; justify-content: space-between; align-items: center; gap: 8px; background: #004caf; border: 0; border-radius: 9999px; color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; cursor: pointer; } 
.contentsarea .map-select-trigger::after { content: ""; flex-shrink: 0; width: 10px; height: 6px; transition: transform .2s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' viewBox='0 0 10 6'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M9.834.128a.5.5 0 0 1 .038.706l-4.5 5a.5.5 0 0 1-.743 0l-4.5-5A.5.5 0 0 1 .871.166L5 4.753 9.128.166a.5.5 0 0 1 .706-.038' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain; } 
.contentsarea .map-select.open .map-select-trigger::after { transform: rotate(180deg); } 
.contentsarea .map-select-list { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 100%; padding: 8px; background: #fff; border: 1px solid #e0e3e8; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); } 
.contentsarea .map-select.open .map-select-list { display: block; } 
.contentsarea .map-select-list li { margin: 0; } 
.contentsarea .map-select-list button { display: block; width: 100%; padding: 12px 16px; text-align: left; white-space: nowrap; border: 0; border-radius: 10px; background: transparent; font-size: 15px; font-weight: 500; color: #56595e; cursor: pointer; transition: background .15s, color .15s; } 
.contentsarea .map-select-list button:hover { background: var(--bg-light); color: #0e2b5e; } 
.contentsarea .map-select-list button.on { background: #0e2b5e; color: #fff; } 
.contentsarea .map-box .map-empty { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 300px; color: #818892; font-size: 1.6rem; } 
@media only screen and (max-width: 1023px){
 .contentsarea .map-tab { gap: 10px; } 
 .contentsarea .map-tab button { flex: 1 1 30%; } 
 .contentsarea .map-info { flex-direction: column; gap: 16px; } 
 .contentsarea .map-info .mi-label { width: auto; min-width: 120px; } 
 }
@media only screen and (max-width: 767px){
 .contentsarea .map-tit { font-size: 20px; padding-bottom: 20px; } 
 .contentsarea .map-box { border-radius: 12px; } 
 .contentsarea .map-tab { display: none; } 
 .contentsarea .map-info > li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border-radius: 12px; } 
 .contentsarea .map-info .mi-label { width: auto; gap: 6px; font-size: 15px; } 
 .contentsarea .map-info .mi-label .ico { width: 20px; height: 20px; } 
 .contentsarea .map-info .mi-value { font-size: 14px; } 
 }

/* ===== 에러 페이지 ===== */
.error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 80px 20px 60px; background: #f6f6f7; box-sizing: border-box; } 
.error-page .error-cont { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 1280px; } 
.error-page .error-img { flex-shrink: 0; width: 161px; height: 181px; } 
.error-page .error-img img { width: 100%; height: 100%; object-fit: contain; } 
.error-page .error-tit { font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.5; color: #1d1d1d; text-align: center; word-break: keep-all; } 
.error-page .error-desc { font-size: clamp(15px, 2vw, 19px); font-weight: 400; line-height: 1.5; color: #1d1d1d; text-align: center; word-break: keep-all; } 
.error-page .error-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; width: 100%; } 
.error-page .error-btn { display: inline-flex; align-items: center; justify-content: center; width: 280px; max-width: 100%; min-width: 110px; padding: 20px 32px; border: 1px solid #bdc2c9; border-radius: 16px; background: #fff; color: #56595e; font-size: clamp(17px, 2vw, 22px); font-weight: 600; line-height: 1.5; text-align: center; cursor: pointer; } 
.error-page .error-btn-main { border-color: var(--main); background: var(--main); color: #fff; } 
@media only screen and (max-width: 767px){
 .error-page { padding: 60px 16px 40px; } 
 .error-page .error-cont { gap: 24px; } 
 .error-page .error-img { width: 120px; height: 135px; } 
 .error-page .error-btns { flex-direction: column; align-items: center; } 
 .error-page .error-btn { width: 100%; max-width: 320px; padding: 16px; } 
 }

/* ===== 가족센터 소개 (지원시설 안내 > 센터소개) ===== */
.contentsarea .family-program { display: flex; gap: 16px; width: 100%; } 
.contentsarea .family-program > li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 20px; background: #fff; border: 1px solid #ccd1d8; border-radius: 16px; text-align: center; } 
.contentsarea .family-program > li .ico { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; } 
.contentsarea .family-program > li .ico img { max-width: 100%; max-height: 100%; } 
.contentsarea .family-program > li .txt { font-size: clamp(1.6rem, 1.8vw, 1.9rem); font-weight: 700; line-height: 1.5; color: #1d1d1d; } 
.contentsarea .family-map { width: 100%; display: flex; align-items: center; justify-content: center; padding: 40px; background: #fff; border: 1px solid #ccd1d8; border-radius: 30px; } 
.contentsarea .family-map img { width: 100%; max-width: 840px; height: auto; } 
.contentsarea .family-map-guide { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: clamp(1.8rem, 2vw, 2.6rem); font-weight: 700; line-height: 1.5; color: var(--main); word-break: keep-all; } 
@media only screen and (max-width: 1023px){
 .contentsarea .family-program { flex-wrap: wrap; } 
 .contentsarea .family-program > li { flex: 1 1 calc(50% - 8px); } 
 }
@media only screen and (max-width: 767px){
 .contentsarea .family-program > li { flex: 1 1 100%; padding: 20px; } 
 .contentsarea .family-map { padding: 20px; } 
 .contentsarea .family-map-guide { padding-left: 0; } 
 }

/* 가족센터 현황 - 지도 라벨(앵커) + 센터 리스트 */
.contentsarea .family-map .map-wrap { position: relative; width: 100%; max-width: 840px; } 
.contentsarea .map-label { position: absolute; white-space: nowrap; padding: 6px 20px; background: #fff; border: 1px solid var(--main); border-radius: 50px; font-size: 14px; font-weight: 700; line-height: 1.5; color: #1d1d1d; cursor: pointer; transition: background .2s, color .2s; z-index: 2; } 
.contentsarea .map-label:hover, .contentsarea .map-label:focus { background: var(--bg-light); color: var(--main); } 
.contentsarea .family-center-list { display: none; flex-direction: column; gap: 48px; margin-top: 40px; } 
.contentsarea .family-center-list.show { display: flex; } 
.contentsarea .family-center-list .center-item { scroll-margin-top: 120px; } 
.contentsarea .family-center-list .c-name { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: clamp(2rem, 2.2vw, 2.6rem); font-weight: 700; color: var(--main); } 
.contentsarea .family-center-list .c-ico { width: 32px; height: 32px; flex-shrink: 0; } 
.contentsarea .family-center-list .center-item:target .c-name { text-decoration: underline; text-underline-position: under; } 
.contentsarea .family-center-list .tableA td { text-align: center; } 
.contentsarea .map-label.on { background: var(--bg-light); color: var(--main); border-color: var(--main); } 
.contentsarea .family-map-guide .guide-ico { width: 32px; height: 32px; flex-shrink: 0; } 
.contentsarea .family-map .map-wrap-mo { position: relative; width: 100%; max-width: 840px; } 
.contentsarea .family-map .map-wrap-mo img { display: block; width: 100%; height: auto; } 
@media only screen and (max-width: 1023px){
 .contentsarea .family-center-list .c-name { padding-left: 0; } 
 .contentsarea .map-label { padding: 4px 12px; font-size: 12px; } 
 }
@media only screen and (max-width: 767px){
 .contentsarea .map-label { padding: 2px 8px; font-size: 10px; border-radius: 30px; } 
 .contentsarea .family-center-list .c-ico { width: 20px; height: 20px; } 
 .contentsarea .family-center-list .tableA td { text-align: initial; } 
 .contentsarea .family-map-guide .guide-ico { width: 20px; height: 20px; flex-shrink: 0; } 
 }
/* 가족센터 현황 - 지도에서 클릭한 센터만 노출 / 전체 보기 */
.contentsarea .family-center-list .center-item { display: none; } 
.contentsarea .family-center-list .center-item.active { display: block; } 
.contentsarea .family-center-list.list-all .center-item { display: block; } 
.contentsarea .btn-map-reset { display: none; width: fit-content; margin: 24px auto 0; padding: 10px 28px; background: #fff; border: 1px solid var(--main); border-radius: 50px; font-size: 1.6rem; font-weight: 600; color: var(--main); cursor: pointer; transition: background .2s, color .2s; } 
.contentsarea .btn-map-reset:hover, .contentsarea .btn-map-reset:focus { background: var(--main); color: #fff; } 
.contentsarea .btn-map-reset.is-visible { display: flex; align-items: center; justify-content: center; } 
/* service-list.col3 - 카드가 3개일 때 한 줄을 꽉 채움(기본 4열 25%) + 카드 높이 240 */
.service-list.col3 > li { width: 33.3333%; } 
.service-list.col3 .service-card { height: 240px; } 
@media only screen and (max-width: 1023px){
 .service-list.col3 .service-card { height: 170px; } 
 }
@media only screen and (max-width: 767px){
 .service-list.col3 > li { width: 50%; } 
 }
@media only screen and (max-width: 400px){
 .service-list.col3 > li { width: 100%; } 
 .service-list.col3 .service-card { height: 130px; } 
 }
/* amount-table.noscroll - 열이 적어 좁은 표. 모바일 min-width(800px) 해제해 가로 스크롤 없이 줄바꿈으로 표시 */
.amount-table.noscroll { overflow-x: visible; } 
.amount-table.noscroll table { min-width: unset; } 
/* amount-table 셀 정렬 유틸(.al/.ac)이 기본 center 를 이기도록 */
.amount-table th.al, .amount-table td.al { text-align: left; } 
.amount-table.noscroll th, .amount-table.noscroll td { word-break: keep-all; } 
@media only screen and (max-width: 767px){
 .amount-table.noscroll th, .amount-table.noscroll td { padding: 12px 8px; font-size: 15px; } 
 }

/* amount-table 셀 안 장문 URL 링크 */
.contentsarea .amount-table td .icon-link-blue { word-break: break-all; background-position: left 3px; } 

/* amount-table.sum - 행 헤더·합계 열 회색 강조 (다열 표) */
.amount-table.sum tbody th,
.amount-table.sum tbody td:last-child { background: #f6f6f7; } 
.amount-table.sum tbody th { font-weight: 700; } 
.amount-table.sum td.fc-red { color: var(--red); } 
.amount-table.sum td.fc-main { color: var(--main); } 
@media only screen and (max-width: 767px){
 .amount-table.sum table { min-width: 1100px; } 
 }

/* check-card 안 그래프 박스 */
.check-card .chart-box { display: flex; justify-content: center; margin-top: 20px; padding: 20px; border-radius: 20px; } 
.check-card .chart-box img { width: 100%; max-width: 562px; height: auto; } 

/* 본문에 URL 전문을 그대로 노출하는 링크 - 좁은 화면에서 컨테이너를 넘지 않도록 줄바꿈 (문장 속 인라인 링크는 .b-sub 안에 있어 영향 없음) */
.contentsarea .tit-cont > p.fc-txt > a.inline-block { max-width: 100%; word-break: break-all; } 

/* 자주묻는 질문 - 블루 카드 없이 본문에 바로 놓는 Q&A. 기존 q-tit/q-desc 는 .check-card 안에만 스코프되어 있어 tit-cont 직속에도 동일 스타일 적용 */
.contentsarea .tit-cont > .q-tit { display: flex; align-items: center; gap: 8px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 600; line-height: 1.5; color: #1c2025; word-break: keep-all; } 
.contentsarea .tit-cont > .q-tit::before { content: ""; flex-shrink: 0; width: 24px; height: 24px; background: url(../img/content/sub02/icn-q.svg) no-repeat center / contain; } 
.contentsarea .tit-cont > .q-desc { font-size: clamp(16px, 2vw, 2.2rem); line-height: 1.5; color: #56595e; word-break: keep-all; } 
@media only screen and (max-width: 767px){
 .contentsarea .tit-cont > .q-tit { align-items: flex-start; } 
 }



/* service-list.col2 - 카드가 2개일 때 한 줄 50% + 카드 높이 220 (col3 패턴 미러) */
.service-list.col2 > li { width: 50%; } 
.service-list.col2 .service-card { height: 220px; } 
@media only screen and (max-width: 1023px){
 .service-list.col2 .service-card { height: 170px; } 
 }
@media only screen and (max-width: 767px){
 .service-list.col2 > li { width: 50%; } 
 }
@media only screen and (max-width: 400px){
 .service-list.col2 > li { width: 100%; } 
 .service-list.col2 .service-card { height: 130px; } 
 }

/* service-list.col5 - 5열 */
.service-list.col5 > li { width: 20%; } 
@media only screen and (max-width: 1023px){
 .service-list.col5 > li { width: 33.3333%; } 
 }
@media only screen and (max-width: 767px){
 .service-list.col5 > li { width: 50%; } 
 }
@media only screen and (max-width: 400px){
 .service-list.col5 > li { width: 100%; } 
 }
/* service-list.card-sm - 낮은 카드 (col* 뒤에 선언 유지) */
.service-list.card-sm .service-card { height: 180px; } 
@media only screen and (max-width: 1023px){
 .service-list.card-sm .service-card { height: 140px; } 
 }
@media only screen and (max-width: 767px){
 .service-list.card-sm .service-card { height: 140px; } 
 }
@media only screen and (max-width: 400px){
 .service-list.card-sm .service-card { height: 110px; } 
 }

/* 게시판_FAQ 카드형 - contents.css .bbs-faq 오버라이드, 1023 재선언 필수 */
.bbs-faq .faq-item { border: 1px solid #ccd1d8; } 
.bbs-faq .faq-item.on { border: 1.5px solid var(--main); } 
.bbs-faq .faq-item + .faq-item { margin-top: 24px; } 
.bbs-faq .faq-item .tit { padding: 32px 65px 32px 78px; font-weight: 700; font-size: clamp(1.8rem, 2vw, 2.4rem); } 
.bbs-faq .faq-item .tit::before { left: 32px; font-size: clamp(2rem, 2vw, 2.6rem); } 
.bbs-faq .faq-item .cont .editor-text { padding: 0 32px 32px 78px; font-size: clamp(1.6rem, 2vw, 2.2rem); line-height: 1.5; color: #1d1d1d; } 
.bbs-faq .faq-item .cont .editor-text::before { left: 32px; color: #818892; } 
@media only screen and (max-width: 1023px){
 .bbs-faq .faq-item + .faq-item { margin-top: 16px; } 
 .bbs-faq .faq-item .tit { padding: 20px 55px 20px 50px; } 
 .bbs-faq .faq-item .tit::before { left: 15px; } 
 .bbs-faq .faq-item .cont .editor-text { padding: 0 20px 20px 40px; font-size: 16px; } 
 .bbs-faq .faq-item .cont .editor-text::before { left: 15px; } 
 }











/* 조직도 스타일 추가 */
.sub_contents_wr + .sub_contents_wr { margin-top: 4rem; } 

/* 표 안 전화번호·버튼은 밑줄 없이 (sub_contents_table_bx table td a 규칙 오버라이드) */
.sub_contents_table_bx table td a.phone-dark { text-decoration: none; } 
.sub_contents_table_bx table td a.phone-dark:hover, .sub_contents_table_bx table td a.phone-dark:focus { text-decoration: underline; text-underline-position: under; } 
.sub_contents_table_bx table td a.btn-bace1 { display: inline-flex; text-decoration: none; } 

/* 섹션 마지막이 num-tit(버튼 인라인)로 끝날 때 다음 대제목과의 간격 확보 (.num-tit margin이 .mb40 유틸을 이기는 특이도 보정) */
.contentsarea .num-tit.mb40 { margin-bottom: 4rem; } 

/* baro-link - 홈페이지 아이콘 링크 (호버·키보드 포커스 시 홈페이지명 툴팁) */
.contentsarea .baro-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 16px; vertical-align: middle; } 
.contentsarea .baro-link .icn-home { display: block; width: 32px; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M4.46654 13.8675L15.1332 4.74159C15.6322 4.31466 16.3678 4.31466 16.8668 4.74159L27.5335 13.8675C27.8295 14.1208 28 14.491 28 14.8807V26.9333C28 27.6697 27.403 28.2667 26.6667 28.2667H20.3333C19.597 28.2667 19 27.6697 19 26.9333V20.9336C19 20.5654 18.7015 20.2669 18.3333 20.2669H13.6667C13.2985 20.2669 13 20.5654 13 20.9336V26.9333C13 27.6697 12.403 28.2667 11.6667 28.2667H5.33333C4.59695 28.2667 4 27.6697 4 26.9333V14.8807C4 14.491 4.17046 14.1208 4.46654 13.8675Z' fill='%23004CAF'/%3E%3C/svg%3E") no-repeat center center / contain; } 
.contentsarea .baro-link .baro-tip { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); padding: 10px; background: #fff; border: 1px solid #bdc2c9; border-radius: 6px; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); font-size: 12px; font-weight: 400; line-height: 1; color: #000; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s; pointer-events: none; z-index: 5; } 
.contentsarea .baro-link:hover .baro-tip,
.contentsarea .baro-link:focus .baro-tip { opacity: 1; visibility: visible; } 
/* 툴팁 비표시 - title 속성 기본 툴팁으로 대체 */
.contentsarea .baro-link .baro-tip { display: none; } 

/* map-area - 위치 소개 자치구 지도: SVG는 도형만, 텍스트는 HTML 오버레이 */
.contentsarea .map-area { position: relative; } 
.contentsarea .map-area > img { display: block; width: 100%; } 
.contentsarea .map-area .m-label { position: absolute; transform: translate(-50%, -50%); font-size: clamp(9px, 1.4vw, 19px); font-weight: 700; line-height: 1.5; color: #1d1d1d; white-space: nowrap; } 
.contentsarea .map-area .m-label.m-han { transform: translate(-50%, -50%) rotate(-33deg); } 
.contentsarea .map-area .m-label.m-green { color: #008638; } 
.contentsarea .map-area .m-label.m-blue { color: #0072ca; transform: translate(-50%, -50%) rotate(90deg); } 

/* board list reply icon */
.boardlist table tbody tr td.no .icn-reply, .board-cards .bc-tit .icn-reply { display: inline-block; width: 24px; height: 24px; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%230072CA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 5v8a3 3 0 0 0 3 3h8'/%3E%3Cpath d='m14 12 4 4-4 4'/%3E%3C/svg%3E") no-repeat center / contain; } 
/* 가족센터 지도 라벨 좌표 - 관리자 에디터 style 제거 대비 */
.family-map .map-label.fm-01 { left: 55.06%; top: 8.28%; } 
.family-map .map-label.fm-02 { left: 49.76%; top: 19.48%; } 
.family-map .map-label.fm-03 { left: 69.29%; top: 14.83%; } 
.family-map .map-label.fm-04 { left: 20.35%; top: 85.17%; } 
.family-map .map-label.fm-05 { left: 36.71%; top: 83.58%; } 
.family-map .map-label.fm-06 { left: 53.29%; top: 79.65%; } 
.family-map .map-label.fm-07 { left: 60.47%; top: 70.93%; } 
.family-map .map-label.fm-08 { left: 77.76%; top: 69.33%; } 
.family-map .map-label.fm-09 { left: 10.24%; top: 73.11%; } 
.family-map .map-label.fm-10 { left: 8.71%; top: 63.23%; } 
.family-map .map-label.fm-11 { left: 24.94%; top: 63.66%; } 
.family-map .map-label.fm-12 { left: 1.06%; top: 46.66%; } 
.family-map .map-label.fm-13 { left: 31.53%; top: 75.87%; } 
.family-map .map-label.fm-14 { left: 25.53%; top: 49.56%; } 
.family-map .map-label.fm-15 { left: 29.76%; top: 24.85%; } 
.family-map .map-label.fm-16 { left: 32.82%; top: 42.59%; } 
.family-map .map-label.fm-17 { left: 39.65%; top: 69.48%; } 
.family-map .map-label.fm-18 { left: 43.65%; top: 59.16%; } 
.family-map .map-label.fm-19 { left: 44.71%; top: 52.76%; } 
.family-map .map-label.fm-20 { left: 37.53%; top: 30.23%; } 
.family-map .map-label.fm-21 { left: 53.18%; top: 32.27%; } 
.family-map .map-label.fm-22 { left: 59.06%; top: 54.36%; } 
.family-map .map-label.fm-23 { left: 49.65%; top: 46.51%; } 
.family-map .map-label.fm-24 { left: 70.24%; top: 34.88%; } 
.family-map .map-label.fm-25 { left: 61.88%; top: 39.97%; } 
.family-map .map-label.fm-26 { left: 70.71%; top: 49.27%; } 
.family-map .map-label.fm-27 { left: 84.82%; top: 55.38%; } 

/* 서울의 인구 - 지도 말풍선 라벨(p-label)·범례(map-legend) */
.contentsarea .map-area .p-label { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 0.55vw, 8px); text-align: center; z-index: 1; } 
.contentsarea .map-area .p-label .p-name { font-size: clamp(8px, 1.2vw, 17px); font-weight: 700; line-height: 1.5; color: #fff; white-space: nowrap; } 
.contentsarea .map-area .p-label .p-num { padding: clamp(1px, 0.4vw, 6px) clamp(6px, 1.4vw, 20px); border-radius: 99px; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); font-size: clamp(7px, 0.98vw, 14px); font-weight: 500; line-height: 1.5; color: #fff; white-space: nowrap; } 
.contentsarea .map-area ul.map-legend { position: absolute; left: 2.1%; top: 2.6%; display: flex; flex-direction: column; gap: clamp(2px, 0.7vw, 10px); padding: clamp(6px, 1.4vw, 20px); border-radius: clamp(6px, 1.1vw, 16px); background: rgba(86, 89, 94, 0.85); z-index: 2; margin: 0; } 
.contentsarea .map-area .map-legend li { display: flex; align-items: center; gap: clamp(4px, 0.85vw, 12px); font-size: clamp(7px, 0.98vw, 14px); font-weight: 500; line-height: 1.5; color: #fff; white-space: nowrap; } 
.contentsarea .map-area .map-legend li i { flex-shrink: 0; width: clamp(6px, 1.05vw, 15px); height: clamp(6px, 1.05vw, 15px); border-radius: 50%; } 
.contentsarea .map-area .map-legend .lg1 i { background: #8AC3F0; } 
.contentsarea .map-area .map-legend .lg2 i { background: #439DE4; } 
.contentsarea .map-area .map-legend .lg3 i { background: #0072CA; } 
.contentsarea .map-area .map-legend .lg4 i { background: #01579B; } 
.contentsarea .map-area .map-legend .lg5 i { background: #003863; } 
/* 구별 라벨 좌표 - 전체 인구·외국인 지도 공용 */
.contentsarea .map-area .pl-jongno { left: 50.74%; top: 43.73%; } 
.contentsarea .map-area .pl-jung { left: 53.68%; top: 53.14%; } 
.contentsarea .map-area .pl-yongsan { left: 50.81%; top: 60.08%; } 
.contentsarea .map-area .pl-seongdong { left: 63.16%; top: 53.34%; } 
.contentsarea .map-area .pl-gwangjin { left: 71.62%; top: 55.22%; } 
.contentsarea .map-area .pl-dongdaemun { left: 65.29%; top: 44.73%; } 
.contentsarea .map-area .pl-jungnang { left: 72.72%; top: 38.78%; } 
.contentsarea .map-area .pl-seongbuk { left: 58.01%; top: 37.60%; } 
.contentsarea .map-area .pl-gangbuk { left: 55.88%; top: 24.42%; } 
.contentsarea .map-area .pl-dobong { left: 61.32%; top: 17.09%; } 
.contentsarea .map-area .pl-nowon { left: 69.56%; top: 25.12%; } 
.contentsarea .map-area .pl-eunpyeong { left: 41.18%; top: 29.08%; } 
.contentsarea .map-area .pl-seodaemun { left: 42.13%; top: 47.20%; } 
.contentsarea .map-area .pl-mapo { left: 35.59%; top: 52.05%; } 
.contentsarea .map-area .pl-yangcheon { left: 27.43%; top: 66.22%; } 
.contentsarea .map-area .pl-gangseo { left: 18.97%; top: 49.78%; } 
.contentsarea .map-area .pl-guro { left: 23.82%; top: 74.64%; } 
.contentsarea .map-area .pl-geumcheon { left: 34.63%; top: 83.35%; } 
.contentsarea .map-area .pl-yeongdeungpo { left: 36.91%; top: 65.82%; } 
.contentsarea .map-area .pl-dongjak { left: 44.78%; top: 71.86%; } 
.contentsarea .map-area .pl-gwanak { left: 44.63%; top: 83.65%; } 
.contentsarea .map-area .pl-seocho { left: 56.47%; top: 76.71%; } 
.contentsarea .map-area .pl-gangnam { left: 64.63%; top: 71.07%; } 
.contentsarea .map-area .pl-songpa { left: 77.13%; top: 69.68%; } 
.contentsarea .map-area .pl-gangdong { left: 82.21%; top: 56.12%; } 
/* 서울의 인구 - 성별 인구 인포그래픽(pop-summary) */
.contentsarea .pop-summary { display: flex; align-items: center; gap: clamp(20px, 4.5vw, 64px); padding: 16px 0; } 
.contentsarea .pop-summary .pop-total { position: relative; flex: 0 0 29.5%; max-width: 402px; } 
.contentsarea .pop-summary .pop-total > img { display: block; width: 100%; } 
.contentsarea .pop-summary .pop-total .pop-total-num { position: absolute; left: 89%; top: 23%; transform: translate(-50%, -50%); padding: clamp(4px, 0.7vw, 10px) clamp(10px, 1.7vw, 24px); border-radius: clamp(6px, 0.85vw, 12px); background: rgba(86, 89, 94, 0.9); font-size: clamp(14px, 2vw, 28px); font-weight: 700; color: #fff; white-space: nowrap; } 
.contentsarea .pop-summary .pop-gender { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 36px); } 
.contentsarea .pop-summary .pop-gender > li { display: flex; gap: clamp(14px, 2.7vw, 38px); align-items: flex-start; } 
.contentsarea .pop-summary .pg-icon { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.1vw, 16px); width: clamp(56px, 5.7vw, 80px); } 
.contentsarea .pop-summary .pg-icon img { width: clamp(40px, 4.3vw, 60px); height: auto; } 
.contentsarea .pop-summary .pg-icon .pg-tag { padding: clamp(3px, 0.4vw, 6px) clamp(12px, 1.4vw, 20px); border-radius: 50px; background: #f6f6f7; font-size: clamp(12px, 1.05vw, 15px); font-weight: 700; color: #56595e; white-space: nowrap; } 
.contentsarea .pop-summary .pg-graph { flex: 1; min-width: 0; padding: 4px 0; } 
.contentsarea .pop-summary .pg-bar { display: flex; align-items: center; justify-content: flex-end; height: clamp(40px, 4.6vw, 66px); padding: 0 clamp(10px, 1.4vw, 20px); border-radius: 0 10px 10px 0; font-size: clamp(16px, 1.7vw, 24px); font-weight: 700; color: #fff; } 
.contentsarea .pop-summary .man .pg-bar { width: 93.7%; background: linear-gradient(90deg, rgba(1, 130, 70, 0) 0%, #018246 100%); } 
.contentsarea .pop-summary .woman .pg-bar { width: 100%; background: linear-gradient(90deg, rgba(190, 89, 0, 0) 0%, #be5900 100%); } 
.contentsarea .pop-summary .pg-num { display: flex; align-items: center; gap: 8px; margin-top: clamp(6px, 0.85vw, 12px); flex-wrap: wrap; } 
.contentsarea .pop-summary .pg-num strong { font-size: clamp(1.5rem, 1.35vw, 1.9rem); font-weight: 700; color: #1d1d1d; } 
.contentsarea .pop-summary .pg-num span { font-size: clamp(1.3rem, 1.2vw, 1.7rem); } 
.contentsarea .pop-summary .man .pg-num span { color: #008638; } 
.contentsarea .pop-summary .woman .pg-num span { color: #ae6400; } 
@media (max-width: 767px){
 .contentsarea .pop-summary { flex-direction: column; align-items: stretch; gap: 20px; } 
 .contentsarea .pop-summary .pop-total { flex: none; width: 68%; max-width: 280px; margin: 0 auto; } 
 .contentsarea .pop-summary .pop-total .pop-total-num { font-size: 15px; } 
 .contentsarea .pop-summary .pop-gender > li { gap: 12px; } 
 .contentsarea .pop-summary .pg-icon { width: 52px; gap: 6px; } 
 .contentsarea .pop-summary .pg-icon img { width: 38px; } 
 .contentsarea .pop-summary .pg-bar { height: 36px; font-size: 14px; } 
 .contentsarea .pop-summary .pg-num strong { font-size: 1.4rem; } 
 .contentsarea .pop-summary .pg-num span { font-size: 1.2rem; } 
 }
/* map-area 패딩 없는 변형 - p-label 좌표를 이미지 박스 기준으로 쓰는 지도(서울의 인구) */
.contentsarea .map-area.map-tight { padding: 0; } 

/* 위치 소개 지도 라벨 좌표 - 관리자 에디터 style 제거 대비 */
.contentsarea .map-area .lm-dobong { left: 59.19%; top: 15.65%; } 
.contentsarea .map-area .lm-nowon { left: 67.43%; top: 22.96%; } 
.contentsarea .map-area .lm-gangbuk { left: 53.74%; top: 22.32%; } 
.contentsarea .map-area .lm-eunpyeong { left: 39.04%; top: 26.57%; } 
.contentsarea .map-area .lm-seongbuk { left: 55.54%; top: 35.13%; } 
.contentsarea .map-area .lm-jungnang { left: 70.59%; top: 35.43%; } 
.contentsarea .map-area .lm-dongdaemun { left: 63.08%; top: 40.63%; } 
.contentsarea .map-area .lm-jongno { left: 48.82%; top: 40.80%; } 
.contentsarea .map-area .lm-seodaemun { left: 40.85%; top: 42.40%; } 
.contentsarea .map-area .lm-jung { left: 52.76%; top: 47.50%; } 
.contentsarea .map-area .lm-mapo { left: 35.41%; top: 47.86%; } 
.contentsarea .map-area .lm-gangseo { left: 18.15%; top: 46.46%; } 
.contentsarea .map-area .lm-seongdong { left: 61.02%; top: 48.73%; } 
.contentsarea .map-area .lm-gwangjin { left: 69.48%; top: 50.44%; } 
.contentsarea .map-area .lm-gangdong { left: 80.07%; top: 51.26%; } 
.contentsarea .map-area .lm-yongsan { left: 48.68%; top: 54.87%; } 
.contentsarea .map-area .lm-yangcheon { left: 25.88%; top: 60.12%; } 
.contentsarea .map-area .lm-yeongdeungpo { left: 34.86%; top: 62.49%; } 
.contentsarea .map-area .lm-songpa { left: 75.00%; top: 63.64%; } 
.contentsarea .map-area .lm-gangnam { left: 62.49%; top: 64.91%; } 
.contentsarea .map-area .lm-dongjak { left: 42.65%; top: 65.11%; } 
.contentsarea .map-area .lm-guro { left: 21.14%; top: 68.47%; } 
.contentsarea .map-area .lm-seocho { left: 54.33%; top: 70.06%; } 
.contentsarea .map-area .lm-gwanak { left: 42.49%; top: 76.39%; } 
.contentsarea .map-area .lm-geumcheon { left: 33.63%; top: 77.70%; } 
.contentsarea .map-area .lm-han { left: 21.76%; top: 39.30%; } 
.contentsarea .map-area .lm-wide { left: 49.01%; top: 93.93%; } 
.contentsarea .map-area .lm-tall { left: 90.82%; top: 49.93%; } 

/* 인구 지도 영어판 - 긴 영문 라벨 겹침 방지 */
.contentsarea .map-area.map-en .p-name { font-size: clamp(7px, 1.05vw, 15px); } 
.contentsarea .map-area.map-en .p-num { font-size: clamp(6px, 0.9vw, 13px); padding: clamp(1px, 0.35vw, 5px) clamp(5px, 1.2vw, 17px); } 
.contentsarea .map-area.map-en .pl-mapo { left: 34.8%; top: 53%; } 
/* 위치 소개 - 인포그래픽 텍스트 오버레이(geo-note·time-tag) */
.contentsarea .map-area .geo-note { position: absolute; left: 21.51%; top: 10.27%; z-index: 1; } 
.contentsarea .map-area .geo-note .g-tit { display: flex; align-items: center; gap: clamp(4px, 0.7vw, 10px); font-size: clamp(10px, 1.4vw, 20px); font-weight: 500; line-height: 1.5; color: #1d1d1d; white-space: nowrap; } 
.contentsarea .map-area .geo-note .g-tit img { width: clamp(13px, 1.8vw, 26px); height: auto; } 
.contentsarea .map-area .geo-note .g-coord { margin-top: clamp(7px, 1vw, 15px); font-size: clamp(12px, 1.67vw, 24px); line-height: 1.6; color: #56595e; white-space: nowrap; } 
.contentsarea .map-area .time-tag { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; padding: clamp(5px, 0.85vw, 12px) clamp(8px, 1.4vw, 20px); border-radius: clamp(7px, 1.05vw, 15px); border: 1px solid #fff; background: rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); box-shadow: 0 4px 11px rgba(0, 0, 0, 0.13); font-size: clamp(12px, 1.67vw, 24px); font-weight: 500; line-height: 1.5; color: #000; white-space: nowrap; z-index: 1; } 
.contentsarea .map-area .time-tag strong { font-weight: 700; } 
.contentsarea .map-area .time-tag.tt2 { left: 43.35%; top: 38.41%; } 
.contentsarea .map-area .time-tag.tt1 { left: 43.42%; top: 62.19%; } 
.contentsarea .map-area .time-tag.tt2 strong { color: #e23f63; } 
.contentsarea .map-area .time-tag.tt1 strong { color: #0072ca; } 
/* 위치 소개 지도 영문·베트남어판 - 긴 로마자 구명 겹침 방지 */
.contentsarea .map-area.map-en .m-label { font-size: clamp(8px, 1.15vw, 16px); } 


/* 게시판 목록형 - 카드 리스트(board-cards) + 센터 다중선택 필터 폭(w240) */
.board-cards { border-top: 1px solid var(--bd-color); } 
.board-cards > li { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 32px 20px; border-bottom: 1px solid var(--bd-color); } 
.board-cards .bc-notice { display: inline-flex; align-items: center; justify-content: center; padding: 6px 20px; border-radius: 9999px; background: var(--main); font-size: 1.7rem; font-weight: 700; line-height: 1.5; color: #fff; } 
.board-cards .bc-labels { display: flex; flex-wrap: wrap; gap: 20px; } 
.board-cards .bc-labels span { min-width: 70px; padding: 6px 12px; border-radius: 8px; background: var(--bg-light); font-size: 1.7rem; font-weight: 500; line-height: 1.5; color: var(--main); text-align: center; } 
.board-cards .bc-labels .bc-org { color: #004CAF; } 
.board-cards .bc-tit { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; } 
.board-cards .bc-tit a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 2.2rem; font-weight: 500; color: #1d1d1d; } 
.board-cards > li:not(.bc-reply):hover .bc-tit a { text-decoration: underline; }
.board-cards .bc-reply .bc-tit a:hover .bc-ans { text-decoration: underline; }
.board-cards .bc-tit .new { flex-shrink: 0; width: 24px; height: 24px; } 
.board-cards .bc-meta { display: flex; flex-wrap: wrap; gap: 8px 40px; width: 100%; } 
.board-cards .bc-meta > li { display: flex; align-items: center; gap: 16px; width: calc((100% - 160px) / 5); max-width: 240px; font-size: 1.9rem; font-weight: 500; line-height: 1.5; } 
.board-cards .bc-meta .k { flex-shrink: 0; color: var(--txt-gray); } 
.board-cards .bc-meta .v { color: #1d1d1d; } 
.board-cards .bc-meta .down-file { justify-content: flex-start; } 
.board-cards .bc-nodata { align-items: center; padding: 80px 20px; text-align: center; } 
.board_top .boardschbox .search_box .select-wrap.w240 { max-width: 240px; } 
.board_top .boardschbox .search_box .select-wrap.w240 .con { width: 240px; } 
/* 답글(댓글) 카드 */
.board-cards .bc-tit .icn-reply { flex-shrink: 0; } 
.board-cards .bc-reply .bc-tit a { display: flex; align-items: center; gap: 8px; width: 100%; white-space: normal; overflow: visible; } 
.board-cards .bc-reply .bc-re { flex-shrink: 0; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--main); } 
.board-cards .bc-reply .bc-ans { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: #1d1d1d; } 
@media only screen and (max-width: 1023px){
 .board-cards > li { padding: 24px 12px; gap: 12px; } 
 .board-cards .bc-meta { gap: 6px 24px; } 
 .board-cards .bc-meta > li { width: auto; max-width: none; min-width: 40%; font-size: 1.7rem; } 
 .board-cards .bc-tit a { font-size: 1.9rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 
 .board-cards .bc-reply .bc-tit a { display: flex; white-space: normal; } 
 .board-cards .bc-meta .down-file .hide { overflow: hidden !important; position: absolute; width: 1px; height: 1px; margin: -1px; } 
 }
@media only screen and (max-width: 767px) { /* 모바일 카드 - 메타는 라벨 대신 아이콘 2줄 */
 .board-cards > li { padding: 16px 0; gap: 6px; } 
 .board-cards .bc-notice { font-size: 1.3rem; padding: 2px 12px; margin-bottom: 4px; } 
 .board-cards .bc-labels { gap: 8px; } 
 .board-cards .bc-labels span { font-size: 1.3rem; padding: 2px 12px; min-width: 70px; border-radius: 6px; } 
 .board-cards .bc-tit { gap: 6px; } 
 .board-cards .bc-tit a { font-size: 1.4rem; -webkit-line-clamp: 1; } 
 .board-cards .bc-tit .new { width: 14px; height: 14px; } 
 .board-cards .bc-meta { gap: 6px 0; } 
 .board-cards .bc-meta > li { gap: 3px; min-width: 0; font-size: 1.3rem; font-weight: 400; } 
 .board-cards .bc-meta .k { display: none; } 
 .board-cards .bc-meta .v { color: #818892; } 
 .board-cards .bc-meta > li::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; background: no-repeat center / contain; } 
 .board-cards .bc-meta .bm-writer { width: 33.33%; } 
 .board-cards .bc-meta .bm-writer::before { background-image: url(../img/common/icn-meta-person.svg); } 
 .board-cards .bc-meta .bm-views { width: 33.33%; justify-content: center; } 
 .board-cards .bc-meta .bm-views::before { background-image: url(../img/common/icn-meta-view.svg); } 
 .board-cards .bc-meta .bm-date { width: 33.34%; justify-content: flex-end; } 
 .board-cards .bc-meta .bm-date::before { background-image: url(../img/common/icn-meta-date.svg); } 
 .board-cards .bc-meta .bm-file { width: 50%; order: 1; } 
 .board-cards .bc-meta .bm-file::before { display: none; } 
 .board-cards .bc-meta .bm-file .down-file { gap: 4px; color: #818892; } 
 .board-cards .bc-meta .bm-file .down-file i { width: 16px; height: 16px; background-image: url(../img/common/icn-meta-file.svg); } 
 .board-cards .bc-meta .bm-file .down-file .hide { overflow: visible !important; position: static; width: unset; height: unset; margin: unset; } 
 .board-cards .bc-meta .bm-etc { width: 50%; order: 2; justify-content: flex-end; } 
 .board-cards .bc-meta .bm-etc::before { display: none; } 
 .board-cards .bc-reply .bc-tit a { flex-wrap: wrap; gap: 6px 8px; } 
 .board-cards .bc-tit .icn-reply { width: 18px; height: 18px; } 
 .board-cards .bc-reply .bc-re { flex: 1 1 auto; min-width: 0; max-width: none; } 
 .board-cards .bc-reply .bc-ans { flex: none; width: 100%; } 
 }