@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.visible {overflow: visible;}
.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 {z-index: 999; position: fixed; top: 0; left: 0; width: 100%; transition: background-color 0.2s; padding-block: var(--fs-20);}
.header .inner {display: flex; align-items: center; justify-content: space-between;}
.header .gnb {display: none;}
.header .gnb ul {display: flex; align-items: center; column-gap: 48px;}
.header .gnb ul li:last-child {display: none;}
.header .gnb ul a {position: relative; transition: color 0.2s; padding-block: 8px; font-size: var(--fs-16); font-weight: 500; line-height: 1.5; color: var(--color-static1);}
.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-static2);}
.footer .logo,
.header .logo {height: calc(var(--fs-20) * 2);}
.footer .logo img,
.header .logo img {transition: filter 0.2s; height: 100%;}
.header .btn-wrap {}
.header .btn-wrap > *{flex-shrink: 0; white-space: nowrap;}
html[data-theme="blue"] .header .btn-wrap .round-btn img {filter: brightness(0) saturate(100%) invert(67%) sepia(15%) saturate(659%) hue-rotate(154deg) brightness(90%) contrast(86%);}
html[data-theme="wood"] .header .btn-wrap .round-btn img {filter: brightness(0) saturate(100%) invert(70%) sepia(15%) saturate(651%) hue-rotate(328deg) brightness(91%) contrast(85%);}

.header:hover,
.header.on,
.header.open {background-color: #fff;}
.header:not(.open):not(.on):not(:hover) .logo img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.header:not(.open):not(.on):not(:hover) .gnb ul a {color: var(--color-white);}
.header .gnb ul .active a::after,
.header .gnb ul a:hover::after {width: 100%;}

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

.header.open .mobile-menu {transform: translateX(-100%);}
.header .mobile-menu {width: 100%; max-width: 500px; transition: transform 0.2s; display: flex; flex-direction: column; justify-content: space-between; height: calc(100vh - var(--header-height)); padding: var(--fs-20); padding-bottom: calc(var(--fs-20) * 2); position: fixed; top: var(--header-height); left: 100%; background-color: var(--color-white); }
.header .mobile-menu nav ul {display: flex; flex-direction: column;}
.header .mobile-menu nav ul li + li {border-top: 1px solid var(--color-border1);}
.header .mobile-menu nav ul li a {border-radius: 8px; padding-block: var(--fs-24); display: flex; align-items: center; justify-content: space-between;}
.header .mobile-menu nav ul li span {transition: color 0.2s; color: var(--color-text2);}
.header .mobile-menu nav ul li.active a span,
.header .mobile-menu nav ul li a:hover span {color: var(--color-black);}
.header .mobile-menu .contact-box {transition: background-color 0.2s; padding: var(--fs-24); border-radius: 8px; background-color: var(--color-static3); display: flex; align-items: center; column-gap: var(--fs-18);}
.header .mobile-menu .contact-box:hover {background-color: rgb(var(--rgb-static2) / 30%);}
.header .mobile-menu .contact-box .ico-wrap {width: 48px; height: 48px; border-radius: 50%; background-color: var(--color-white); display: flex; align-items: center; justify-content: center;}
.header .mobile-menu .contact-box .contact-info {flex: 1; display: flex; flex-direction: column; align-items: flex-start;}
.header .mobile-menu .contact-box .contact-info span {color: var(--color-text2);}
.header .mobile-menu .contact-box .contact-info p {color: var(--color-static1);}
.header .mobile-menu nav ul li .arrow,
.header .mobile-menu .contact-box .arrow {height: var(--fs-24);}

.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:769px) {
    .header .gnb {display: block;}
    .header .mobile-menu-btn,
    .header.open .mobile-menu {display: none;}
}

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

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

@media screen and (max-width:1280px) {
    .header .btn-wrap {display: none;}
    .header .gnb ul li:last-child {display: inline-block;}
}

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

/* 패치44 Phase 0: 로고 미업로드 시 업체명 워드마크 */
.logo .logo-text {display: inline-block; font-size: var(--fs-24); font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; color: var(--color-static1);
    max-width: min(58vw, 340px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.logo.white .logo-text,
.footer .logo .logo-text {color: var(--color-white);}
.footer .logo .logo-text {max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;}
.header:not(.open):not(.on):not(:hover) .logo .logo-text {color: var(--color-white);}
@media screen and (max-width: 768px) {
    .header .logo .logo-text {max-width: 48vw; font-size: var(--fs-18);}
}