@charset "utf-8";
.breadcrumb-section {position: relative; z-index: 99; background-color: var(--color-bg3); padding-block: 0; overflow: hidden;}

/* 1025px 이상은 칼럼 그리드.
   각 li 는 PHP가 넘긴 --bc-row / --bc-start / --bc-span 좌표에 놓이고,
   하위 ul 은 자기가 차지한 칸을 --bc-span 등분하므로 윗줄 칼럼과 정확히 맞는다. */
.breadcrumb-list {align-items: center; --bc-col: minmax(0, 180px); --bc-gap: var(--fs-40); display: grid; grid-template-columns: repeat(var(--bc-cols, 6), var(--bc-col)); column-gap: var(--bc-gap);}
.breadcrumb-list > li {position: relative; grid-row: var(--bc-row, auto); grid-column: var(--bc-start, auto) / span var(--bc-span, 1);}

.breadcrumb-sublist {display: grid; grid-template-columns: repeat(var(--bc-span, 1), minmax(0, 1fr)); column-gap: var(--bc-gap);}

.breadcrumb-toggle {display: none;} /* 데스크톱에서는 토글 없음 */

.breadcrumb-list a {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding-block: var(--fs-20); text-align: center;}
.breadcrumb-list a {color: var(--color-white); transition: color 0.2s;}
.breadcrumb-list a:hover,
.breadcrumb-list a:focus-visible {color: var(--color-static3);}
.breadcrumb-sublist > li.active a {color: var(--color-static3);}

/* 홈 */
.breadcrumb-list > .home-menu img {flex-shrink: 0; width: 24px; height: 24px; transition: opacity 0.2s;}
.breadcrumb-list > .home-menu a:hover img,
.breadcrumb-list > .home-menu a:focus-visible img {opacity: 0.7;}

.breadcrumb-list > .home-menu::after {content: ''; width: 1px; height: 13px; background-color: var(--color-border4); position: absolute; top: 50%; right: calc(var(--bc-gap) / -2); transform: translate(50%, -50%);}
/* depth3 줄은 더 이상 첫 칼럼에서 시작하지 않으므로 구분선을 넉넉히 깐다(섹션이 overflow:hidden) */
.breadcrumb-list > .depth3-menu::before {content: ''; width: 200vw; height: 1px; background-color: var(--color-border4); position: absolute; top: 0; left: 50%; transform: translateX(-50%);}

.breadcrumb-no-transition .breadcrumb-sublist,
.breadcrumb-no-transition .breadcrumb-toggle img {transition: none;}

.sub-hero-section {min-height: 420px; display: flex; align-items: center; padding-block: var(--space-100); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.sub-hero-section .hero-head {color: var(--color-white);}
.sub-hero-section .body-medium {margin-top: var(--fs-16); color: var(--color-font5);}
.sub-hero-section .card-tit {margin-top: var(--fs-16); color: var(--color-white);}

.sub-section {padding-block: var(--space-60);}
.sub-section.color-bg {padding-block: var(--space-80); background-color: var(--color-bg1);}
.sub-section.color-bg2 {padding-block: var(--fs-40); background-color: var(--color-bg2);}
.sub-section .inner {max-width: 1320px;}

.sub-tit-wrap {display: flex; flex-direction: column; align-items: center; row-gap: var(--fs-20);}
.sub-tit-wrap.no-ico::before {content: none;}
.sub-tit-wrap.left {align-items: flex-start;}
.sub-tit-wrap.border {padding-bottom: var(--space-60); border-bottom: 1px solid var(--color-border1);}
.sub-tit-wrap::before {content: ''; width: var(--fs-60); height: var(--fs-14); background-image: url(/img/sub/sub-tit-ico.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
.sub-tit-wrap.left::before {background-position: left center;}
.sub-tit-wrap .eyebrow {color: var(--color-static1);}
.sub-tit-wrap .section-tit {color: var(--color-font1); word-break: keep-all;}
.sub-tit-wrap .section-sub {color: var(--color-font1); word-break: keep-all;}
.sub-tit-wrap .body-medium {color: var(--color-font2);}
.sub-tit-wrap .txt-wrap {display: flex; flex-direction: column; align-items: flex-start; row-gap: 6px;}
.sub-tit-wrap:not(.left) .section-sub,
.sub-tit-wrap:not(.left) .body-medium {text-align: center;}

.sub-tit-wrap2 {display: flex; flex-direction: column; row-gap: var(--fs-20);}
.sub-tit-wrap2 .eyebrow {color: var(--color-static1); display: flex; align-items: center; column-gap: 10px;}
.sub-tit-wrap2 .eyebrow::before {content: ''; width: var(--fs-24); height: 2px; background-color: var(--color-static1);}
.sub-tit-wrap2 .section-sub {color: var(--color-font1);}

.area-tit-wrap {display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--fs-20);}
.area-tit-wrap.center {align-items: center;}
.area-tit-wrap .eyebrow {color: var(--color-static1); font-weight: 400;}
.area-tit-wrap .section-sub {color: var(--color-font1);}
.area-tit-wrap:has(.body-large) {row-gap: 10px}
.area-tit-wrap .body-large {margin-top: var(--fs-30); color: var(--color-font2);}

.ico-box {flex-shrink: 0; padding: 8px; position: relative; width: fit-content;}
.ico-box::after {content: ''; display: block; width: 7px; height: 7px; background-color: var(--color-static3); position: absolute; right: 0; top: 0;}

/* tablet */
@media (max-width: 1440px) {
    .breadcrumb-list {--bc-col: minmax(0, 1fr); --bc-gap: 20px;}
}
/* 1024px 이하 : 드롭다운 모드 */
@media (max-width: 1024px) {
    .breadcrumb-section {overflow: visible;}
    /* flex 로 되돌리면 --bc-row / --bc-start / --bc-span 좌표는 자동으로 무시된다.
       depth3 정렬은 그리드에서만 필요한 값이라 별도 초기화가 필요 없다. */
    .breadcrumb-list {display: flex; flex-wrap: nowrap; --bc-gap: 16px;}
    .breadcrumb-list > li {flex: 1 1 0; width: auto; min-width: 0; max-width: 200px;}
    .breadcrumb-list > .home-menu {flex: 0 0 auto;}
    .breadcrumb-list > .home-menu a {min-width: 44px; padding-inline: 12px;}
    .breadcrumb-list > .depth3-menu::before {content: none;}
    .breadcrumb-list > .depth3-menu::after {content: ''; width: 1px; height: 13px; background-color: var(--color-border4); position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);}

    .breadcrumb-toggle {display: flex; align-items: center; justify-content: space-between; column-gap: 8px; width: 100%; min-height: 44px; padding: var(--fs-20) 14px; color: var(--color-white);}
    .breadcrumb-toggle-txt {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-static3);}
    .breadcrumb-toggle img {flex-shrink: 0; transition: transform 0.3s; width: 10px;}
    .breadcrumb-list > li.open .breadcrumb-toggle img {transform: rotate(180deg);}

    .breadcrumb-list > .depth2-menu:has(~.depth3-menu) .breadcrumb-toggle img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
    .breadcrumb-list > .depth2-menu:has(~.depth3-menu) .breadcrumb-toggle-txt {color: var(--color-white);}

    .breadcrumb-sublist {display: block; position: absolute; top: 100%; left: 0; width: 100%; min-width: 160px; z-index: 5; background-color: var(--color-white); box-shadow: var(--box-shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s;}
    .breadcrumb-list > li.open .breadcrumb-sublist {opacity: 1; visibility: visible; transform: translateY(0);}
    .breadcrumb-list > .depth3-menu .breadcrumb-sublist {left: auto; right: 0;}

    .breadcrumb-sublist > li {width: 100%;}
    .breadcrumb-sublist > li + li {border-top: 1px solid var(--color-border1);}
    .breadcrumb-sublist a {padding: 12px 14px; color: var(--color-font1);}
    .breadcrumb-sublist a:hover,
    .breadcrumb-sublist > li.active a {color: var(--color-static1);}
}

@media (max-width: 768px) {
    .sub-hero-section {min-height: 375px;}
}

@media (max-width: 375px) {
    .breadcrumb-list {--bc-gap: 10px;}
    .breadcrumb-toggle,
    .breadcrumb-sublist a {padding-inline: 10px; font-size: 13px; letter-spacing: -0.01em;}
    .breadcrumb-list > .home-menu {display: none;}
    /* .breadcrumb-list > .home-menu a {padding-inline: 10px;} */
}