@charset "utf-8";
html:has(.header.open),body:has(.header.open) {overflow-y: hidden;}
.inner {width: calc(100% - 100px); margin-inline: auto; max-width: 1520px;}
.inner.s-inner {max-width: 1320px;}

/* 필요한 섹션(ex.스티키가 들어가는 섹션)에만 따로  overflow: unset; 추가하세요 */
.container > section {width: 100%; overflow: hidden; margin-bottom: var(--space-160);background-color: var(--color-bg1);}
.container > section.bg-color {background-color: var(--color-bg2); padding-block: 100px;}
.container > section .inner:not(.sticky-wrap){display: flex; flex-direction: column; row-gap: var(--space-80);}
.container > section .swiper-container {width: 100%;}

.logo {display: flex; align-items: center; justify-content: center;}
.logo.white img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

.header-banner {height: 44px !important; background-color: var(--color-text1);}
.header-banner .header-banner-content {padding: 10px; display: flex; align-items: center; justify-content: center;}
.header-banner .header-banner-content .banner-label {padding-right: var(--fs-12); margin-right: var(--fs-12); position: relative;}
.header-banner .header-banner-content .banner-label::after {content: ''; width: 1px; height: var(--fs-16); position: absolute; top: 50%; right: 0; transform: translate(-50%,-50%); background-color: var(--color-white);}
.header-banner .header-banner-content .body-small {color: var(--color-white);}

.header {z-index: 999; position: fixed; top: 0; left: 0; width: 100%; transition: background-color 0.2s;}
.header .inner {padding-block: var(--fs-12); display: flex; align-items: center; justify-content: space-between;}
.header .gnb ul {display: flex; align-items: center; column-gap: 48px;}
.header .gnb ul a {position: relative; transition: color 0.2s; padding: var(--fs-12) var(--fs-16); font-size: var(--fs-16); font-weight: 500; line-height: 1.5; color: var(--color-text1);}
.header .gnb ul a::after {transition: width 0.2s; content: ''; position: absolute; left: 0; bottom: 0; display: block; width: 0; height: 2px; background-color: var(--color-static3);}
.footer .logo,
.header .logo {height: calc(var(--fs-20) * 2);}
.footer .logo img,
.header .logo img {transition: filter 0.2s; height: 100%;}

.header:hover,
.header.on,
.header.open {background-color: #fff;}
.header .gnb ul .active a::after,
.header .gnb ul a:hover::after {width: 100%;}

.header .all-menu-btn {width: var(--fs-36); height: var(--fs-36); position:relative;}
.header .all-menu-btn span,
.header .all-menu-btn span:before,
.header .all-menu-btn span:after {display:block; position:absolute; left:0; width: var(--fs-20); height:2px; border-radius:2px; background-color: var(--color-text1); transition:all .3s;}
.header .all-menu-btn span {left:calc(var(--fs-12) / 2); top:50%; transform:translate(0,-50%);}
.header .all-menu-btn span:before,
.header .all-menu-btn span:after {content:''; transform:translate(0,-50%);}
.header .all-menu-btn span:before {top:-4px;}
.header .all-menu-btn span:after {top:7px;}
.header .all-menu-btn.open span {background:transparent !important;}
.header .all-menu-btn.open span:before {top:0; transform:translate(0,-50%) rotate(45deg);}
.header .all-menu-btn.open span:after {top:0; transform:translate(0,-50%) rotate(-45deg);}

.header .header-left {display: flex; align-items: center; column-gap: var(--fs-32);}

.header.open .all-menu {transform: translateX(-100%);}

.header .all-menu {width:100%; max-width:500px; height:calc(100vh - var(--header-height)); position:fixed; top:var(--header-height); left:100%; background-color:var(--color-white); transition:transform .2s; overflow:hidden;}
.header .all-menu-inner {height:100%; display:flex; flex-direction:column;}
.header .all-menu-header {display:grid; grid-template-columns:57.5% 42.5%; height:110px; flex-shrink:0;}
.header .all-menu-title,
.header .all-menu-view {padding-inline:36px; display:flex; align-items:center;}
.header .all-menu-view {justify-content:space-between;}
.header .all-menu-view .arrow {width:24px; height:24px;}
.header .all-menu-content {flex:1; display:grid; grid-template-columns:57.5% 42.5%; min-height:0;}
.header .all-menu-left {background:#F8F7F4; overflow-y:auto;}
.header .all-menu-depth1 {display:flex; flex-direction:column;}
.header .all-menu-depth1 li {}
.header .all-menu-depth1-btn {width:100%; min-height:110px; padding:24px 36px; border:0; background:none; text-align:left; color:var(--color-text2); transition:background-color .2s,color .2s;}
.header .all-menu-depth1 li.active .all-menu-depth1-btn,
.header .all-menu-depth1-btn:hover {background:var(--color-white); color:var(--color-black);}
.header .all-menu-right {overflow-y:auto;}
.header .all-menu-depth2 {display:flex; flex-direction:column;}
.header .all-menu-depth2 li {}
.header .all-menu-depth2 li a {min-height:110px; padding:24px 36px; display:flex; align-items:center; justify-content:space-between; color:var(--color-text2); transition:color .2s;}
.header .all-menu-depth2 li a:hover {color:var(--color-black);}
.header .all-menu-depth2 .arrow {width:24px; height:24px;}

.footer {padding-block: 40px; background-color: var(--color-text1)}
.footer .footer-top {display: flex; align-items: flex-start; justify-content: space-between;}
.footer .footer-top .footer-brand { display: flex; flex-direction: column; align-items: flex-start; row-gap: calc(var(--fs-24) / 2);}
.footer .footer-top .footer-brand .footer-desc {font-size: var(--fs-16); line-height: 1.5; color: rgb(var(--rgb-white) / 70%);}
.footer .footer-top .footer-title {display: block; margin-bottom: calc(var(--fs-24) / 2); font-size: var(--fs-14); line-height: 1.5; color: rgb(var(--rgb-white) / 60%);}
.footer .footer-top .footer-tel {margin-bottom: 4px; font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color: var(--color-white);}
.footer .footer-top p,
.footer .footer-top ul a {font-size: var(--fs-14); line-height: 1.5; color: rgb(var(--rgb-white) / 70%);}
.footer .footer-top ul {display: flex; flex-direction: column; row-gap: 7px;}
.footer .footer-bot {margin-top: var(--fs-20); padding-top: var(--fs-24); border-top: 1px solid rgb(var(--rgb-white) / 8%); display: flex; align-items: center; justify-content: space-between;}
.footer .footer-bot p {font-size: var(--fs-14); color: rgb(var(--rgb-white) / 55%);}
.footer .footer-bot .footer-bot-right {display: flex; flex-direction: column; row-gap: var(--fs-12); align-items: flex-end;}
.footer .footer-bot .footer-sns {display: flex; align-items: center; column-gap: var(--fs-14);}
.footer .footer-bot .footer-sns a {transition: background-color 0.2s; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgb(var(--rgb-white) / 15%);}
.footer .footer-bot .footer-sns a img {width: 18px;}
.footer .footer-bot .footer-sns a:hover {background-color: rgb(var(--rgb-white) / 15%);}

@media screen and (min-width: 501px) {
    .header .all-menu {border-left: 1px solid var(--color-border);}
}

@media screen and (max-width:1440px) {
    .inner {width: calc(100% - 80px);}
}

@media screen and (max-width:1024px) {
    .inner {width: calc(100% - 64px);}
    .footer .footer-bot,
    .footer .footer-bot .footer-bot-right {flex-direction: column; row-gap: var(--fs-12); align-items: flex-start;}
}

@media screen and (max-width:768px) {
    .inner {width: calc(100% - 48px);}
    .footer .footer-top {flex-direction: column; row-gap: var(--fs-24);}
    .footer .footer-top .footer-menu,
    .footer .footer-top .footer-policy {grid-column: 1 / -1;}
    .footer .footer-top ul {flex-direction: unset; gap: 8px;}
}

@media screen and (max-width: 500px) {
    .inner {width: calc(100% - 32px);}
}

@media screen and (max-width:375px) {
    .inner {width: calc(100% - 24px);}
}