@charset "utf-8";
.breadcrumb-section {background-color: var(--color-bg3); padding-block: 0; overflow: visible;}
.breadcrumb-section .breadcrumb-list {display: flex; align-items: center; column-gap: var(--fs-40);}
.breadcrumb-section .breadcrumb-list > li {min-width: 180px;}
.breadcrumb-section .breadcrumb-list > li span,
.breadcrumb-section .breadcrumb-list > li button {width: 100%; text-align: center; padding-block: var(--fs-20);}
.breadcrumb-section .breadcrumb-list > li span {color: var(--color-font5);}
.breadcrumb-section .breadcrumb-list > li button {color: var(--color-static3); display: flex; align-items: center; justify-content: center; column-gap: var(--fs-20);}
.breadcrumb-section .breadcrumb-list > li + li::before {content: ''; width: 1px; height: 13px; position: absolute; top: 50%; left: calc(var(--fs-20) * -1); transform: translate(-50%,-50%); background-color: var(--color-border4);}
.breadcrumb-section .breadcrumb-list > li:not(.depth1-menu) {position: relative;}
.breadcrumb-section .breadcrumb-list .depth2-menu-list,
.breadcrumb-section .breadcrumb-list .depth3-menu-list {box-shadow: var(--box-shadow); position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--color-white); display: none;}
.breadcrumb-section .breadcrumb-list > li button img {transition: transform 0.3s;}
.breadcrumb-section .breadcrumb-list > li.open button img {transform: rotate(180deg);}
.breadcrumb-section .breadcrumb-list > li button img {transition: transform 0.3s;}
.breadcrumb-section .breadcrumb-list > li.open button img {transform: rotate(180deg);}
.breadcrumb-section .breadcrumb-list .depth2-menu-item a ,
.breadcrumb-section .breadcrumb-list .depth3-menu-item a {padding: var(--fs-16) var(--fs-20); width: 100%; font-size: var(--fs-16); font-weight: 500; color: var(--color-font1);}
.breadcrumb-section .breadcrumb-list .depth2-menu-item + .depth2-menu-item,
.breadcrumb-section .breadcrumb-list .depth3-menu-item + .depth3-menu-item {border-top: 1px solid var(--color-border1);}
.breadcrumb-section .breadcrumb-list .depth2-menu-item a:hover,
.breadcrumb-section .breadcrumb-list .depth3-menu-item a:hover,
.breadcrumb-section .breadcrumb-list .depth2-menu-item.active a,
.breadcrumb-section .breadcrumb-list .depth3-menu-item.active a {color: var(--color-static1);}
.breadcrumb-section .breadcrumb-list .depth2-menu-item.active a,
.breadcrumb-section .breadcrumb-list .depth3-menu-item.active a {position: relative;}
.breadcrumb-section .breadcrumb-list .depth2-menu-item.active a::before,
.breadcrumb-section .breadcrumb-list .depth3-menu-item.active a::before {content: ''; width: 5px; height: var(--fs-26); background-color: var(--color-static1); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.breadcrumb-section .breadcrumb-list .depth3-menu-list {min-width: fit-content;}
.breadcrumb-section .breadcrumb-list .depth3-menu-item,
.breadcrumb-section .breadcrumb-list .depth3-menu-item a {white-space: nowrap; min-width: fit-content; width: 100%;}

.sub-hero-section {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-section {padding-block: var(--space-60);}
.sub-section.color-bg {padding-block: var(--space-80); background-color: var(--color-bg1);}

.sub-tit-wrap {display: flex; flex-direction: column; align-items: center; row-gap: var(--fs-20);}
.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);}
.sub-tit-wrap .section-sub {color: var(--color-font1);}
.sub-tit-wrap .body-medium {color: var(--color-font2);}

.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);}

.ico-box {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: 1024px) {
  .breadcrumb-section .breadcrumb-list > li {min-width: 140px;}
  .breadcrumb-section .breadcrumb-list > li span {padding-block: var(--fs-16);}
  .breadcrumb-section .breadcrumb-list > li button {padding-block: var(--fs-16); column-gap: var(--fs-16);}
}

@media (max-width: 768px) {
    .breadcrumb-section .inner {width: 100%;}
    .breadcrumb-section .breadcrumb-list {flex-wrap: wrap;}
    .breadcrumb-section .breadcrumb-list .depth1-menu,
    .breadcrumb-section .breadcrumb-list .depth2-menu {flex: 1;}
    .breadcrumb-section .breadcrumb-list .depth2-menu {z-index: 5;}
    .breadcrumb-section .breadcrumb-list .depth3-menu {background-color: var(--color-bg2); width: 100%; z-index: 1;}
    .breadcrumb-section .breadcrumb-list .depth3-menu::before {display: none;}
    .breadcrumb-section .breadcrumb-list > li span,
    .breadcrumb-section .breadcrumb-list > li button {padding-inline: 24px; text-align: left}
    .breadcrumb-section .breadcrumb-list > li button {justify-content: space-between;}
}

@media (max-width: 480px) {
    .breadcrumb-section .breadcrumb-list > li span,
    .breadcrumb-section .breadcrumb-list > li button {padding-inline: 16px;}
    .breadcrumb-section .breadcrumb-list .depth2-menu-item a, .breadcrumb-section .breadcrumb-list .depth3-menu-item a {padding: 12px 16px;}
}

@media (max-width: 375px) {
    .breadcrumb-section .breadcrumb-list > li span,
    .breadcrumb-section .breadcrumb-list > li button {padding-inline: 12px; font-size: 13px; letter-spacing: -0.01em; column-gap: 0;}
    .breadcrumb-section .breadcrumb-list .depth1-menu, .breadcrumb-section .breadcrumb-list .depth2-menu {width: 100%;}
    .breadcrumb-section .breadcrumb-list .depth1-menu::before, .breadcrumb-section .breadcrumb-list .depth2-menu::before {display: none;}
    .breadcrumb-section .breadcrumb-list .depth2-menu {background-color: rgb(var(--rgb-bg2) / 0.25);}
    .breadcrumb-section .breadcrumb-list .depth2-menu-item a, .breadcrumb-section .breadcrumb-list .depth3-menu-item a {padding: 10px 12px; font-size: 13px;}
}