@charset "utf-8";
.inner {width: calc(100% - 100px); margin-inline: auto; max-width: 1520px;}
.inner.s-inner {max-width: 1320px;}

/* 필요한 섹션(ex.스티키가 들어가는 섹션)에만 따로  overflow: unset; 추가하세요 */
.container {padding-top: var(--header-height);}
.container > section {width: 100%; overflow: hidden; margin-bottom: 100px;background-color: var(--main-bg); padding-block: 120px;}

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

/* header */
.header {background-color: var(--color-white); border-bottom: 1px solid #D5DFE8; z-index: 999; position: fixed; top: 0; left: 0; width: 100%; transition: background-color 0.2s;}
.header .inner {display: flex; align-items: center; justify-content: space-between;}
.header .logo {height: calc(var(--fs-20) * 2);}
.header .gnb .depth1 {display: flex; align-items: center; column-gap: calc(var(--fs-20) * 6);}
.header .gnb .depth1 a {transition: color 0.2s; padding-block: 7px; font-size: var(--fs-16); font-weight: 400; letter-spacing: -0.2px; line-height: 1.65; color: var(--color-text2);}
.header .gnb .depth1 > li {position: relative; padding-block: var(--fs-20);}
.header .gnb li .depth2 {display: none; border-top: 2px solid var(--color-static3); background-color: var(--color-white); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 200px;}
.header .gnb li .depth2 li {display: block;}
.header .gnb li .depth2 a {text-align: center; width: 100%; padding-block: 12px; color: var(--color-text5);}
.header .gnb li .depth2 a:hover {color: var(--color-text1);}

/* mobile menu */
html:has(.header.open) {overflow-y: hidden;}
.header .mobile-menu-btn {display: none; width: 44px; height: 44px; position: relative;}
.header .mobile-menu-btn span,
.header .mobile-menu-btn span::before,
.header .mobile-menu-btn span::after {content: ''; position: absolute; left: 50%; width: 22px; height: 2px; border-radius: 2px; background-color: var(--color-text1); transition: all .3s ease;}
.header .mobile-menu-btn span {top: 50%; transform: translate(-50%, -50%);}
.header .mobile-menu-btn span::before {top: -7px; left: 0;}
.header .mobile-menu-btn span::after {top: 7px; left: 0;}
.header .mobile-menu-btn.open span {background-color: transparent;}
.header .mobile-menu-btn.open span::before {top: 0; transform: rotate(45deg);}
.header .mobile-menu-btn.open span::after {top: 0; transform: rotate(-45deg);}
.header .mobile-menu {position: fixed; top: var(--header-height); right: -100%; width: 100%; height: calc(100vh - var(--header-height)); overflow-y: auto; background-color: var(--color-white); transition: right .3s ease; z-index: 998;}
.header.open .mobile-menu {right: 0;}
.header .mobile-depth1 {display: flex; flex-direction: column;}
.header .mobile-depth1 > li > a {display: flex; align-items: center; width: 100%; padding: 20px 24px; border-bottom: 1px solid #D5DFE8; font-size: var(--fs-18); font-weight: 500; line-height: 1.5; color: var(--color-text2);}
.header .mobile-depth1 > li.active > a {color: var(--color-static3); background-color: rgb(var(--rgb-static3) / 8%);}
.header .mobile-depth2 {padding-block: 8px; background-color: var(--color-bg2);}
.header .mobile-depth2 li a {display: block; padding: 12px 40px; font-size: var(--fs-16); line-height: 1.6; color: var(--color-text5);}
.header .mobile-depth2 li.active a {font-weight: 500; color: var(--color-static3);}
.header .mobile-btn-wrap {display: flex; gap: 12px; padding: 24px; border-top: 1px solid #D5DFE8;}
.header .mobile-btn-wrap a {flex: 1;}

/* footer */
.footer {padding-block: calc(var(--fs-24) * 2); background-color: var(--color-text1);}
.footer .footer-info {display: flex; flex-direction: column; align-items: center; text-align: center; row-gap: var(--fs-20); padding-bottom: calc(var(--fs-30) * 2);}
.footer .logo {height: calc(var(--fs-24) * 2);}
.footer .footer-info p {font-size: var(--fs-16); line-height: 1.65; letter-spacing: -0.2px; color: var(--color-text6);}
.footer .footer-info p span {color: var(--color-text7);}
.footer .footer-info p span:first-child::after {content: ' |';}
.footer .footer-bot {border-top: 1px solid rgb(var(--rgb-white) / 16%); padding-top: calc(var(--fs-16) * 2); display: flex; flex-direction: column; align-items: center; row-gap: var(--fs-16);}
.footer .footer-link {display: flex; align-items: center; justify-content: center;}
.footer .footer-link li {position: relative; padding-inline: 30px;}
.footer .footer-link li + li::before {content: "|"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: var(--fs-15); line-height: 1.6; letter-spacing: -0.2px; color: var(--color-text7);}
.footer .footer-link a {font-size: var(--fs-15); line-height: 1.6; letter-spacing: -0.2px; color: var(--color-text7);}
.footer .copyright {font-size: var(--fs-15); line-height: 1.6; letter-spacing: -0.2px; color: var(--color-text7);}


@media screen and (min-width:769px) {
    .header .mobile-menu {display: none;}
}

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

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

@media screen and (max-width:768px) {
    .inner {width: calc(100% - 48px);}
    
    .header .gnb {display: none;}
    .header .btn-wrap .login-btn,
    .header .btn-wrap .join-btn {display: none;}
    .header .mobile-menu-btn {display: block;}

    .footer {padding-block: 44px;}
    .footer .footer-info {row-gap: 22px; padding-bottom: 44px;}
    .footer .footer-info p {font-size: var(--fs-14);}
    .footer .footer-link li {padding-inline: 16px;}
    .footer .footer-link a {font-size: var(--fs-14);}
    .footer .copyright {font-size: var(--fs-14);}
}

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

    .footer .logo {height: 34px;}
    .footer .footer-link {flex-wrap: wrap; row-gap: 8px;}
    .footer .footer-link li {padding-inline: 12px;}
}

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