@charset "UTF-8";
/* common.css */

:root {
    --default-size: 10px;
    --container-padding: 24px;
    --container-width: 1248px;
    --header-height: 97px;
}
:root {
    --Pretendard: Pretendard;
}

html{font-size: var(--default-size);}
html,body{width: 100%;height: 100%;;overflow: hidden;}
.wrapper{width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto;}
*{font-family: var(--Pretendard), sans-serif;font-weight: 400;}
.container{width: 100%; max-width: var(--container-width);margin: 0 auto;position: relative;padding:0 var(--container-padding);}

.site-header{width: 100%;height:var(--header-height);position: fixed;top: 0;left: 0;z-index: 1;transition-duration: 0.3s;}
.site-header .logo{font-size: 0;background-image: url(../images/logo.svg);background-size:cover;background-repeat: no-repeat;background-position: center;width: 180px;height: auto;aspect-ratio: 180 / 49;transition: color 0.3s ease;}
.site-header .inner{border-bottom: 1px solid #FFFFFF;display: flex;justify-content: space-between;align-items: center;padding:24px 64px;}
.site-header .menu-box{display: flex;align-items: center;column-gap: 32px;}
.site-header .menu-list{display: flex;align-items: center;column-gap: 32px;}
.site-header .menu-list .menu-item{display: flex;align-items: center;}
.site-header .menu-list .menu-item a {font-weight: 700;font-size: 16px;line-height: 1.45;letter-spacing: -0.03em;text-align: center;color: #ffffff;position: relative;text-decoration: none;transition: color 0.3s ease;}
.site-header .menu-list .menu-item a::after {content: '';position: absolute;bottom: -4px;left: 0;width: 0;height: 2px;background: #ffffff;transition: width 0.3s ease;}
.site-header .menu-list .menu-item a:hover::after {width: 100%;}
.site-header.fix{background-color: #ffffff;border-bottom: 1px solid #F0F0F0}
.site-header.fix .logo{background-image: url(../images/logo-fix.svg);}
.site-header.fix .menu-list .menu-item a {color:#292929;}
.site-header .lang-toggle{display: flex;align-items: center;background-color: #53b7e8;border-radius: 999px;padding: 4px 5px;}
.site-header .lang-toggle .lang-option{font-weight: 700;font-size: 14px;line-height: 12px;padding: 8px 14px;color: #ffffff;text-decoration: none;transition: background-color 0.2s ease;border-radius: 999px;}
.site-header .lang-toggle .lang-option:hover{background-color: rgba(255,255,255,0.15);}
.site-header .lang-toggle .lang-option.active{background-color: #017CB8;color: #ffffff;}
.site-header.fix .lang-toggle .lang-option{color: #ffffff;}
.site-header.fix .lang-toggle .lang-option.active{background-color: #017CB8;color: #ffffff;}
.site-header .menu-button{display: none;flex-direction: column;justify-content: center;row-gap: 4px;z-index: 10}
.site-header .menu-button .bar{display: block;width: 18px;height: 2px;border-radius: 2px;background-color:#292929;transition-duration: 0.3s;}


.site-footer{background-color: #292929;padding: 64px 0;}
.site-footer .footer-menu{display: flex;column-gap: 32px;justify-content: center;align-items: center;}
.site-footer .footer-menu .footer-menu-item{font-weight: 500;font-size: 13px;line-height: 1.45;letter-spacing: -0.5%;vertical-align: middle;color:#9B9B9B;}

@media screen and (max-width: 1024px) {
    :root {
        --header-height: 168px;
    }
    .site-header .inner {padding: 24px 24px;}
    .site-header .menu-list{column-gap: 24px;}
    .site-footer{padding:48px 0 ;}
    .site-footer .footer-menu {row-gap: 12px;justify-content: center;flex-direction: column;align-items: flex-start;}
}

@media screen and (max-width: 1024px) {

    .site-header .inner {padding: 32px 24px;align-items: flex-start;}
    .site-header .logo{width: 140px;}
    .site-header .menu-box{flex-direction: column;align-items: flex-end;row-gap: 2px;}
    .site-header .menu-list{flex-direction: column;align-items: flex-end;row-gap: 4px;}
    .site-header.fix{max-height: 102px;}
    .site-header.fix .inner {padding: 32px 24px;align-items: center;}
    .site-header.fix .menu-box{position: fixed;top:0;right: 0;width: 50%;height: 100%;background-color: #ffffff;transform: translateX(100%);padding: 92px 24px;}
    .site-header.fix .menu-list{row-gap: 24px;}
    .site-header.fix .lang-toggle{margin-top: 24px;}
    .site-header.fix .menu-list .menu-item a {font-size: 15px;}
    .site-header.fix .menu-button{display: flex}
    body.menuOpen .site-header.fix {background-color: transparent;    border-bottom: 1px solid transparent;}
    body.menuOpen .site-header.fix .logo{font-size: 0;background-image: url(../images/logo.svg);}
    body.menuOpen .wrapper{overflow: hidden;}
    body.menuOpen::before{content:'';display: block;width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: rgba(0,0,0,0.8);z-index: 1;}

    body.menuOpen .site-header.fix .menu-button .bar:nth-of-type(1){transform: rotate(45deg);transform-origin: left top;}
    body.menuOpen .site-header.fix .menu-button .bar:nth-of-type(2){opacity: 0;}
    body.menuOpen .site-header.fix .menu-button .bar:nth-of-type(3){transform: rotate(-45deg);transform-origin: left bottom;}
}