@charset "utf-8";

/* 폰트 */
@font-face {
    font-family: 'NanumSquare';
    src: url('../fonts/NanumSquareL.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquare';
    src: url('../fonts/NanumSquareR.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquare';
    src: url('../fonts/NanumSquareB.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'NanumSquare';
    src: url('../fonts/NanumSquareEB.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'NotoSerifCJKkr';
    src: url('../fonts/NotoSerifCJKkr-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}


:root {
    --font-NanumSquare: "NanumSquare";
    --font-Montserrat: "Montserrat";
    --font-NotoSerif: "NotoSerifCJKkr";
    --color-main: #EB611F;
}

/* scroll Bar */
body::-webkit-scrollbar {width: 10px;}
body::-webkit-scrollbar-thumb {background-color: var(--color-main);}
body::-webkit-scrollbar-track {background-color: #f9f9f9;}

/* ******************* *
* LAYOUT
* ******************* */
html, body {font-size: 20px;font-family: var(--font-NanumSquare);line-height: 1.4;word-break: keep-all;word-wrap: break-word;color:#000;touch-action: auto;overscroll-behavior: auto;text-size-adjust:100%;scroll-behavior: smooth;}
html.lock,
html.lock body {overflow-y: hidden;}

#wrap {padding-top: 125px;}
#container {display: inline-block;width: calc(100% - 405px);margin: 0 auto;vertical-align: top;}

@media all and (max-width: 1199px){
    .cinner {max-width: 92%;margin: 0 50px;}
    #container {width: 100%;}
}
@media all and (max-width: 768px){
    #wrap {padding-top: 90px;}
    .cinner {max-width: none;margin: 0 30px;}
}

/* ******************* *
* HEADER
* ******************* */
#header {display: inline-block;width: 395px;height: calc(100vh - 125px);vertical-align: top;position: relative;z-index: 10;}
#header .cinner {padding-top: 125px;position: fixed;top: 0;left: 175px;}
.header__logo {margin-bottom: 30px;}
.header__nav .mn-ul1 li a {color: #6E6E64;font-family: var(--font-Montserrat);font-size: 14px;transition: .35s;}
.header__nav .mn-ul1 li a:hover,
.header__nav .mn-ul1 li a:focus,
.header__nav .mn-ul1 li a.active,
.header__nav .mn-ul1 li:hover > .mn-a1 {font-weight: 500;}
.header__nav .mn-li1:not(:last-child) {margin-bottom: 30px;}
.main-nav__depth2 {max-height: 0;opacity: 0;overflow: hidden;transition: max-height .35s ease, opacity .35s ease;}
.main-nav__depth2 .mn-ul2 {margin-top: 25px;padding-left: 30px;}
.main-nav__depth2 .mn-li2:not(:last-child) {margin-bottom: 10px;}
.main-nav__depth2 .mn-a2 {position: relative;}
.main-nav__depth2 .mn-a2::after {content: '';display: block;width: 4px;aspect-ratio: 1 / 1;border-radius: 50%;background: var(--color-main);position: absolute;top: 0;right: -5px;transform: translate(100%, -50%);opacity: 0;transition: .35s;}
.main-nav__depth2 .mn-a2:hover,
.main-nav__depth2 .mn-a2:focus,
.main-nav__depth2 .mn-a2.active {color: var(--color-main);}
.main-nav__depth2 .mn-a2:hover::after,
.main-nav__depth2 .mn-a2:focus::after,
.main-nav__depth2 .mn-a2.active::after {opacity: 1;}
.nav__btn {display: none;}
.nav__btn a {display: flex;align-items: center;width: 50px;height: 25px;position: relative;}
.nav__btn a::before,
.nav__btn a::after {content: '';display: block;width: 100%;height: 2px;background: var(--color-main);position: absolute;left: 0;right: 0;margin: auto;}
.nav__btn a::before {top: 0;}
.nav__btn a::after {bottom: 0;}
.nav__btn a span{display: block;width: 100%;height: 2px;background: var(--color-main);}
.sns-list {display: none;}
.header__bg {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: auto;z-index: 1;opacity: 0;visibility: hidden;}
.header__bg.active {backdrop-filter: blur(10px);opacity: 1;visibility: visible;}

@media all and (max-width: 1199px){
    #header {width: auto;height: auto;position: relative;}
    .header__logo {display: none;}
    #main-nav {max-width: 400px;width: 50%;height: 100%;background: rgba(255,96, 3,.76);position: fixed;top: 0;left: 0;transform: translateX(-100%);transition: .35s;z-index: 999;}
    #main-nav.active {transform: translateX(0);}
    .main-nav__depth1 {min-width: 175px;position: absolute;top: 125px;left: 50%;transform: translateX(-50%);}
    .main-nav__depth1::before {content: '';display: block;width: 130px;height: 85px;margin-bottom: 30px;background: url(../images/logo-w.png) center center / cover no-repeat;}
    .header__nav .mn-ul1 li a {color: #fff;}
    .main-nav__depth2 .mn-a2::after {background: #3a00e2;}
    .main-nav__depth2 .mn-a2:hover,
    .main-nav__depth2 .mn-a2:focus,
    .main-nav__depth2 .mn-a2.active {color: #3a00e2;}

    .nav__btn {display: block;position: fixed;top: 50px;left: 50px;z-index: 999;}
    .close-btn a::before,
    .close-btn a::after {background: #fff;top: 0;bottom: 0;}
    .close-btn a::before {transform: rotate(45deg);}
    .close-btn a::after {transform: rotate(-45deg);}
    .close-btn a span {display: none;}

    .sns-list {display: flex;align-items: center;gap: 20px;position: absolute;left: 50%;bottom: 100px;transform: translateX(-50%);z-index: 999;}
    .sns-list > li > a {color: #fff;font-family: var(--font-Montserrat);font-size: 14px;}
}
@media all and (max-width: 1024px){
    
}
@media all and (max-width: 768px){
    .nav__btn {top: 30px;left: 30px;}
}
@media all and (max-width: 640px){
    #main-nav {min-width: 350px;}
    .main-nav__depth1 {min-width: auto;position: absolute;top: 100px;left: 60px;transform: translateX(0);}
    .nav__btn a {width: 38px;height: 19px;}
    .sns-list {left: 60px;transform: translateX(0);}
}


/* ******************* *
* FOOTER
* ******************* */
#FOOTER {}


/* ******************* *
* QUICK BTN
* ******************* */
#quickBtn {position: fixed;top: 50px;right: 50px;z-index: 999;}

@media all and (max-width: 768px){
    #quickBtn {top: 30px;right: 30px;}
}