@charset "UTF-8";

:root {
    --default-size: 10px;
    --container-padding: 24px;
    --container-width: 100%;
}
:root {
    --Pretendard: Pretendard;
    --Manrope: Manrope;
    --Poppins : Poppins;
}

html{font-size: var(--default-size); scroll-behavior: smooth;}
body{background:rgba(0,0,0,1)}
.img-box img{max-width: 100%;display: block;}
*{font-family: var(--Manrope), sans-serif;font-weight: 400}
.container{width: 100%; max-width:var(--container-width);margin: 0 auto;position: relative;padding:0 var(--container-padding);}

.m-view{display: none;}
.button {font-size: 14px;font-weight: 400;color: #C7C3D2;display: inline-flex;justify-content: center;align-items: center;padding:10px 16px;border-radius: 100px;position: relative;transition-duration: 0.3s;}
.button:hover {background-color: rgba(255,255,255,0.2);}
.button::before{content:'';display: block;position: absolute;width: 100%;height: 100%;top:0;left: 0;border-radius: 100px;box-shadow: inset 1px 1px 1px 0 rgba(248, 249, 250, 1);}
.button::after{content:'';display: block;position: absolute;width: 100%;height: 100%;top:0;left: 0;border-radius: 100px;box-shadow: inset 0 0 2px 0 rgba(248, 249, 250, 1);}
.button .icon-arrow{display: inline-block;background-image: url("icon-arrow.svg");width: 20px;height: 21px;margin-left: 8px;}

.mobile-menu{display: none;}

.mobile-order-button ,.site-header .site-header-top .order-button{display: flex;height: 36px;padding: 14px 16px;justify-content: center;align-items: center;gap: 10px;color: #343434;text-align: center;border-radius: 100px;background: #F8F9FA;font-family: var(--Manrope), serif;font-size: 15px;font-style: normal;font-weight: 500;line-height: 1.1;}
.mobile-order-button{display: none;}

.site-header{width: 100%;display: flex;flex-direction:column;justify-content: center;align-items: center;position: fixed;left: 0;top:0;z-index: 5;transition-duration: 0.3s;transition-property: all;}.site-header .top-banner {width: 100%;background: #F8F9FA;backdrop-filter: blur(28px);overflow: hidden;white-space: nowrap;height: 30px;display: flex;align-items: center;transition-duration: 0.3s;transition-property: height;}
.site-header .top-banner .banner-text {display: inline-block;/*animation: scroll-text 60s linear infinite;*/}
.site-header .top-banner .banner-text span {color: #030303;font-family: "Ubuntu Mono", serif;font-size: 16px !important;-webkit-text-size-adjust: none !important;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -0.48px;}
.site-header .logo-box{background-image: url("logo.svg");background-repeat: no-repeat;background-size: cover;width: 58px;height: 41px;display: block;}
.site-header .site-header-top{display: flex;width:100%;justify-content: space-between;padding:4px var(--container-padding);position: relative;}
.site-header .site-header-top .header-button{display: flex;column-gap: 20px}
.site-header .site-header-top .menu-button{display: none;}
.site-header .menu-box{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.site-header .menu-list{display: flex;column-gap: 50px;    position: relative;}
.site-header .menu-list .menu-item{padding: 13px 0;}
.site-header .menu-list .menu-item > a{height: var(--header-height);color: #F8F9FA;font-family:var(--Manrope),sans-serif;font-weight: 400;font-size: 15px;display: inline-flex;align-items: center;transition-duration: 0.2s;transition-property: font-weight;}
.site-header .menu-list .menu-item.doc > a:after{content:'';display: inline-block;background-image: url("icon-link.svg");width: 16px;height: 16px;margin-left: 2px;}
.site-header .menu-list .menu-item.dropdown-menu{display: flex;align-items: center;position: relative;}
.site-header .menu-list .menu-item.dropdown-menu::after{content:'';background-image: url("icon-select.svg");display: inline-block;width: 16px;height: 16px;margin-left: 6px;}
.site-header .menu-list .menu-item.dropdown-menu:hover .submenu-list{opacity: 1;pointer-events: auto;transform: translateY(100%);}
.site-header .menu-list .menu-item .submenu-list{position: absolute;bottom:0;left:0;background: #FFFFFF;padding:8px 0;border-radius: 12px;opacity: 0;pointer-events: none;transition-duration: 0.5s;transform: translateY(90%);}
.site-header .menu-list .menu-item .submenu-list .submenu-item{width: 180px;padding:10px 16px;}
.site-header .menu-list .menu-item .submenu-list .submenu-item > a{width: 100%;height: 100%;display: flex;align-items: center;justify-content: flex-start;font-size: 15px;font-weight: 400;line-height: 1.2;text-align: center;color: #030303;font-family: var(--Manrope),sans-serif;}

.site-header .menu-button{width: 41px;height: 41px;display: none;position: absolute;right: calc(var(--container-padding) - 9px);justify-content: center;align-items: center;overflow: hidden}
.site-header .menu-button .bars{position: relative;width: 20px;height: 10px;transition-duration: 0.1s;transition-property: height;}
.site-header .menu-button .bars .bar{display:block;width: 20px;height: 2px;background-color: #ffffff;position: absolute;left: 0;transition-delay:0.1s;transition-duration: 0.3s;transition-property: transform;}
.site-header .menu-button .bars .bar:nth-of-type(1){top:0;transform-origin: left top;}
.site-header .menu-button .bars .bar:nth-of-type(2){bottom:0;transform-origin: left bottom;}

.site-header.fix {background-color: var(--header-bg-active);backdrop-filter: blur(6px) contrast(90%);-webkit-backdrop-filter: blur(6px) contrast(90%)}


footer{position: relative;padding:120px 0 54px;}
footer .footer-content{max-width: 1400px;padding:0 30px;margin: 0 auto;}
footer .footer-content .footer-item{width: 180px;}
footer .footer-content .footer-item > h3{font-size: 16px;font-weight: 400;line-height: 1.6;color:#FFF;}
footer .footer-menu-box{display: flex;align-items: flex-start;justify-content: space-between;}
footer .footer-menu-box .footer-logo{display: flex;flex-direction: column;row-gap: 24px;width: 135px;}
footer .footer-menu-box .footer-logo > img{width: 100%;height: auto;display: block;}

footer .footer-menu-box .footer-menu{display: flex;column-gap: 48px;}
footer .footer-menu-box .footer-menu-list{width:100%;display: flex;flex-direction: column;row-gap: 16px;margin-top: 24px;}
footer .footer-menu-box .footer-menu-list .footer-menu-item > a {font-size: 14px;font-weight: 400;color: #666;transition-duration: 0.3s;transition-property: color;}
footer .footer-menu-box .footer-menu-list .footer-menu-item > a:hover{color:rgba(255, 255, 255, 1);}
footer .footer-bottom{margin-top: 64px;}

footer .footer-bottom .divider{color: #2D2D2D;text-align: center;font-family: "Instrument Serif", serif;font-size: 28px;font-style: italic;font-weight: 400;line-height: 1;letter-spacing: -1.68px;}
footer .footer-bottom .footer-bottom-content{display: flex;align-items: center;justify-content:space-between;margin-top: 40px;}
footer .footer-bottom .copyright{color: rgba(248, 249, 250, 0.50);text-align: center;font-family: var(--Manrope), serif;font-size: 14px;font-style: normal;font-weight: 500;line-height: 1.8;letter-spacing: -0.2px;}

footer .footer-bottom .sns-box{display: flex;align-items: center;column-gap: 14px;}
footer .footer-bottom .sns-box > a {color: #F8F9FA;font-family: var(--Manrope), serif;font-size: 16px;font-style: normal;font-weight: 500;line-height: 1.35;letter-spacing: -0.36px;display: flex;height:22px;align-items: center;padding:6px 0 ;}
footer .footer-bottom .sns-box > a::before{content:'';display: inline-block;background-image: url("icon-arrow.svg");width: 20px;height: 21px;margin-right: 8px;}

@media screen and (max-width: 900px) {
    body{width: 100%;overflow-x: hidden;overflow-y: auto;}
}

@media screen and (max-width: 750px) {
    .m-view {display: block;}
    .pc-view {display: none;}
    .mobile-order-button{display: flex;position: fixed;left: 50%;bottom: 32px;height: 40px;font-size:16px;transform: translateX(-50%);z-index: 3;}

    .site-header .site-header-top .header-button{display: none;}
    .site-header .site-header-top .menu-button{display: flex;}
    .site-header .menu-box{display: none;}

    .mobile-menu{display:block;position: fixed;width: 100%;height:calc(100%);background: rgba(9, 9, 9, 0.4);top:0;left: 0;z-index: 5;backdrop-filter: blur(8px) contrast(90%);-webkit-backdrop-filter: blur(8px) contrast(90%);padding:0 16px;opacity: 0;pointer-events: none;transition-duration: 0.4s;transition-property: opacity;--mobile-menu-bottom-height:100px}
    .mobile-menu .menu-box{width: 100%;height:calc(100% - var(--mobile-menu-bottom-height));display: flex;align-items: center;}
    .mobile-menu .menu-box .menu-list{width: 100%;}
    .mobile-menu .menu-box .menu-list .menu-item{display: flex;align-items: center;justify-content: space-between;width: 100%;padding:20px 0 ;}
    .mobile-menu .menu-box .menu-list .menu-item:nth-of-type(n + 2){border-top: 1px solid rgba(255, 255, 255, 0.1);}
    .mobile-menu .menu-box .menu-list .menu-item > a{font-family: var(--Manrope),sans-serif;font-size: 30px;font-weight: 400;line-height: 1;letter-spacing: -1px;background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.4) 100%);color: transparent;-webkit-background-clip: text;width: 100%;height: 100%;text-align: left;}
    .mobile-menu .menu-box .menu-list .menu-item.doc > a::after{content:'';display: inline-block;background-image: url("icon-link.svg");background-size:cover;width: 24px;height: 24px;margin-left: 2px;}
    .mobile-menu .menu-box .menu-list .menu-item.dropdown-menu{display: flex;flex-direction: column;}
    .mobile-menu .menu-box .menu-list .menu-item.dropdown-menu > a{display: flex;justify-content: space-between;align-items: center;transition-duration: 0.3s;transition-property: color;}
    .mobile-menu .menu-box .menu-list .menu-item.dropdown-menu > a::after{content:'';display: inline-block;background-image: url("icon-menu-arrow.svg");background-size:cover;width: 16px;height: 16px;transition-duration: 0.3s;transition-property: transform;transform: rotate(90deg);}
    .mobile-menu .menu-box .menu-list .menu-item.dropdown-menu .submenu-list{height:0;overflow:hidden;position: relative;display: flex;width:100%;flex-direction:column;row-gap: 8px;justify-content: flex-start;padding-top: 0;transition-duration: 0.3s;}
    .mobile-menu .menu-box .menu-list .menu-item.dropdown-menu .submenu-list .submenu-item > a{font-family: var(--Manrope);color:#F8F9FA;font-size: 20px;line-height: 1.2;font-weight: 400;}
    .mobile-menu .menu-box .menu-list .menu-item.dropdown-menu.open .submenu-list{height: 88px;margin-top: 20px;}
    .mobile-menu .menu-box .menu-list .menu-item.dropdown-menu.open > a {color: #7E7F80;}
    .mobile-menu .menu-box .menu-list .menu-item.dropdown-menu.open > a::after {transform: rotate(-90deg);}
    .mobile-menu .menu-box .button-box{position: absolute;width: 100%;left: 0;bottom:0;padding: 0 24px 50px;}
    .mobile-menu .menu-box .button-box > a{display: flex;width: 100%;height: 52px;padding: 10px;justify-content: center;align-items: center;align-self: stretch;border-radius: 10px;background: #F8F9FA;color: #000;font-family: var(--Manrope);font-size: 14px;font-style: normal;font-weight: 500;line-height: 1.2}

    body.menuOpen .site-header .menu-button{}
    body.menuOpen .site-header .menu-button .bars {height: 16px;}
    body.menuOpen .site-header .menu-button .bars .bar:nth-of-type(1){transform: rotate(45deg);    width: 21px;}
    body.menuOpen .site-header .menu-button .bars .bar:nth-of-type(2){transform: rotate(-45deg);    width: 21px;}
    body.menuOpen {overflow: hidden;}
    body.menuOpen .mobile-menu{opacity: 1;pointer-events: auto}


    footer {padding: 80px 0 54px;}
    footer .footer-content {padding: 0 var(--container-padding);}
    footer .footer-menu-box {flex-direction: column;row-gap: 40px;}
    footer .footer-menu-box .footer-menu {flex-direction: column;row-gap: 48px;}
    footer .footer-menu-box .footer-menu-list {margin-top: 20px;}
    footer .footer-content .footer-item {width: 100%;}
    footer .footer-bottom .footer-bottom-content {flex-direction: column;margin-top: 40px;row-gap: 40px;}
}