@font-face {
    font-family: Marcellus;
    src: url(/assets/fonts/Marcellus-Regular.woff2);
    font-weight: 400;
}
@font-face {
    font-family: NS;
    src: url(/assets/fonts/NanumSquareR.woff2);
    font-weight: 400;
}
@font-face {
    font-family: NS;
    src: url(/assets/fonts/NanumSquareB.woff2);
    font-weight: 700;
}
@font-face {
    font-family: PT;
    src: url(/assets/fonts/Pretendard-Light.woff2);
    font-weight: 300;
}
@font-face {
    font-family: PT;
    src: url(/assets/fonts/Pretendard-Regular.woff2);
    font-weight: 400;
}
@font-face {
    font-family: PT;
    src: url(/assets/fonts/Pretendard-Medium.woff2);
    font-weight: 500;
}
@font-face {
    font-family: PT;
    src: url(/assets/fonts/Pretendard-Bold.woff2);
    font-weight: 700;
}
@font-face {
    font-family: AV;
    src: url(/assets/fonts/Antro_Vectra.woff2);
    font-weight: 400;
}
@font-face {
    font-family: CC;
    src: url(/assets/fonts/CarismaClassic-600DemiBold.woff2);
    font-weight: 600;
}
@font-face {
    font-family: CG;
    src: url(/assets/fonts/CarismaGothic-500Medium.woff2);
    font-weight: 500;
}

@font-face {
    font-family: SPOKA;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: SPOKA;
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

*{margin : 0;padding : 0; box-sizing: border-box;}
li{list-style: none;}
a{text-decoration: none; color : inherit}
img{display: block;max-width: 100%;}

/* 마우스오버 ANIMATION CSS */
.hover_ani{position:relative;/*width:500px;height:500px;*/}
.hover_ani>span.line{position:absolute;transition:width .5s,height .5s;background:#111;z-index: 10;}
.hover_ani>span.line:nth-child(1){width:0px;height:1px;left:0;top:0;}
.hover_ani>span.line:nth-child(2){width:1px;height:0px;right:0;top:0;}
.hover_ani>span.line:nth-child(3){width:0px;height:1px;right:0;bottom:0;}
.hover_ani>span.line:nth-child(4){width:1px;height:0px;left:0;bottom:0;}
.hover_ani:hover>span.line:nth-child(1),.hover_ani:hover>span.line:nth-child(3){width:100%;height:1px;}
.hover_ani:hover>span.line:nth-child(2),.hover_ani:hover>span.line:nth-child(4){width:1px;height:100%;}
/* 마우스오버 ANIMATION CSS END*/

/**/

.header{display: flex;justify-content: center; position : fixed;left : 50%;top : 0;width : 100%;z-index: 1000;transform: translateX(-50%); transition : background .3s, transform .5s;height : 70px;max-width: 750px; border-bottom : 1px solid #ddd; background: #fff;}
.header.sub{position : absolute;}
.header.on{background: #fff; }
.header.hide{transform: translateY(-100%);}
.header-inner{display: flex;justify-content: space-between;align-items: center; width : 100%; padding : 0 20px 0 22px;}

.main-logo{position : absolute;left : 50%;transform: translateX(-50%); width : 199px;}
.main-logo > a{display: flex; justify-content : center;width : 100%;height : 100%; color : #fff; font-size: 27px; line-height: 1em; font-family: PT; transition : color .3s;}
.main-logo > a img { margin: auto; object-fit : contain; object-position : center; transition : opacity .5s;}
.main-logo > a img.dark{position : absolute;top : 0;opacity : 0;}
.header.active .main-logo > a img.dark{opacity: 1;}
.sub .main-logo > a img.dark{opacity : 1;}
.header.active .main-logo > a{color : #111}
.header.dark .main-logo > a{color : #153043;}
.header.on .main-logo > a{color : #153043;}

.header-right{display: flex;align-items: center; gap : 17px}
.header .customer{display: flex;width : 34px; height :31px; background: url(/m/assets/images/common/customer-ico.png)no-repeat center / contain; transition : filter .5s; filter: invert(1);}

/* .header.sub .customer{filter: invert(1);}
.header.active .customer{filter: invert(1);} */
.header .header-tel{display: flex;width : 32px; height :32px; background: url(/m/assets/images/common/header-tel-icon.png)no-repeat center / contain;transition : filter .5s; filter: invert(1);}
/* .header.active .header-tel{filter: invert(1);} */
/* .header.sub .header-tel{filter: invert(1);} */

.hamburger{display: flex;align-items: center;justify-content: center;width : 30px;height : 23px;position : relative;}
.hamburger > span{width : 100%;height : 3px;background: #000;position : absolute; transition : transform .5s, background .5s;}
.header.sub .hamburger > span{background: #000;}
.hamburger > span:nth-child(1){transform: translateY(-350%);}
.hamburger > span:nth-child(3){transform: translateY(350%);}

.header.active .hamburger > span{background: #111;}
.header.active .hamburger > span:nth-child(1){transform: translateY(0) rotate(-45deg);}
.header.active .hamburger > span:nth-child(2){transform: scale(0);}
.header.active .hamburger > span:nth-child(3){transform: translateY(0) rotate(45deg);}

.hamburger-nav{position : absolute;background: #fff;width : 100vw;max-width: 750px;height : 100vh;position : fixed;left : 50%;transform: translateX(-150%);z-index: 999; transition : transform .7s; padding: 70px 0;color : #111;}
.header.active + .hamburger-nav{transform: translateX(-50%);}

.hamburger-nav > ul{border-top: 1px solid #ddd; max-height: calc(100vh - 200px);height : 100%;overflow-y: scroll;}
.hamburger-nav > ul > li > a{display: block; font-size: 20px;font-family: PT; letter-spacing: -0.03em; font-weight: 500;background: #fafafa;padding : 20px 30px; border-bottom: 1px solid #ddd;}
.hamburger-nav > ul > li > ul{background: #f0f0f0;display: none;}
.hamburger-nav > ul > li > ul > li > a{display: block;padding : 15px 50px; font-size: 18px;border-bottom : 1px solid #ddd; font-weight: 500; letter-spacing: -0.03em; font-family: PT;}
/**/


/**/

.footer{display: flex;justify-content: center; background: #000; color : #eee;padding : 50px 20px; font-size: 14px; font-family: PT;position : relative; font-family: PT;}
.footer-inner{ position : relative;width : 100%; max-width: 100%; margin : 0 auto;}

.footer-logo-02{margin-bottom: 14px;}

.footer-ul{display: flex; gap : 30px; font-size: 14px; color: #aaa; margin-bottom: 14px;}

.footer-info{color : #8E8E8E; font-size: 11px; letter-spacing: -0.06em; margin-bottom: 20px;}
.footer-copy{color : #8E8E8E; font-size: 13px; letter-spacing: -0.06em;}
.sigong{position : absolute;right : 0;top : 0;}

.footer-left{display: flex;align-items: flex-start; padding-right: 50px;margin-right: 50px; border-right: 0px solid rgba(255,255,255,0.5);}

.footer-btn-box{display: flex;flex-direction: column; gap : 10px; position :absolute; right : 0; top : 0;}
.footer-btn-box > a{position : relative;}
.footer-btn-box > a::after{position : absolute; content :''; width : 100%;height : 100%; background: rgba(255,255,255,0.2);left : 0;top : 0; transition : clip-path .3s; clip-path: inset(0 100% 0 0);}
.footer-btn-box > a:hover::after{clip-path: inset(0);}
.footer-btn-box > a > img{position : relative; width: 110px; z-index: 1;}


@media(max-width : 720px){

    .header{height : 12.5000vw;}
    .header-inner{padding : 0 4.8611vw 0 5.4167vw;}

    .main-logo > a{font-size: 3.7500vw;}

    .header-right{gap : 2.3611vw}
    .header .customer{width : 4.7222vw; height :4.3056vw;}

    .header .header-tel{width : 4.4444vw; height :4.4444vw;}

    .hamburger{width : 5.4167vw;height : 3.1944vw;}
    .hamburger > span{height : 0.4167vw;}

    .hamburger-nav{padding: 13.8889vw 0;}

    .hamburger-nav > ul{max-height: calc(100vh - 27.7778vw);}
    .hamburger-nav > ul > li > a{font-size: 5.0000vw;padding : 4.1667vw;}
    .hamburger-nav > ul > li > ul > li > a{padding : 2.7778vw; font-size: 3.8889vw;}

    .footer{font-size: 3vw}
    .footer-inner{padding : 8.6111vw 5vw;}

    .footer-top{padding : 0 0 4.1667vw;margin : 0 auto 6.5278vw;}

    .footer-logo{margin-bottom: 5.4167vw; width: 36vw;}

    .footer-ul{gap : 4.1667vw;font-size: 3.2vwn}
    .footer-ul + .footer-ul{margin-top: 1.6667vw; margin-bottom: 4.1667vw;}

    .footer-info{margin-bottom: 2.0833vw; font-size: 3.2vw; margin-bottom: 2.3611vw;}
    .footer-copy{font-size: 3.2vw;}

    .sigong{width : 65.1389vw;margin : 0 auto 6.5278vw;}

    .footer-p{font-size: 3.2000vw; margin-bottom: 3.8889vw;}


    .footer-left{padding-right: 6.9444vw;margin-right: 6.9444vw}

    .top-btn{width : 6.9444vw;right : 8.0556vw}
}n