/** FONT **/
@font-face {font-family: PT; src: url(../fonts/PretendardVariable.woff2); font-weight: 45 920; font-style: normal; font-display: swap;}
@font-face {font-family: AV; src: url(../fonts/Antro_Vectra.woff2); font-weight: 400; font-style: normal; font-display: swap;}
@font-face {font-family: AV; src: url(../fonts/Antro_Vectra_Bolder.woff2); font-weight: 700; font-style: normal; font-display: swap;}
@font-face {font-family: CC; src: url(../fonts/CarismaClassic-600DemiBold.woff2); font-weight: 600; font-style: normal; font-display: swap;}
@font-face {font-family: NS; src: url(../fonts/NanumSquareR.woff2); font-weight: 400; font-style: normal; font-display: swap;}
@font-face {font-family: NS; src: url(../fonts/NanumSquareB.woff2); font-weight: 700; font-style: normal; font-display: swap;}
@font-face {font-family: NM; src: url(../fonts/NanumMyeongjo-Regular.woff2); font-weight: 400; font-style: normal; font-display: swap;}
@font-face {font-family: NM; src: url(../fonts/NanumMyeongjo-Bold.woff2); font-weight: 700; font-style: normal; font-display: swap;}
@font-face {font-family: NM; src: url(../fonts/NanumMyeongjo-ExtraBold.woff2); font-weight: 800; font-style: normal; font-display: swap;}
@font-face {font-family: MM; src: url(../fonts/MinervaModernRegular.woff); font-weight: 400; font-style: normal; font-display: swap;}
@font-face {font-family: GG; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Batang_Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap;}
@font-face {font-family: GG; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Batang_Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap;}

/** RESET **/
*, *::before, *::after{margin : 0;padding : 0; box-sizing: border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior: smooth;}
body{line-height:1; font-family: PT; color:#000;}
ul, ol, li{list-style: none;}
a{text-decoration: none; color : inherit} 
img, picture, svg, video, canvas{display: block;max-width: 100%;}
button, input, textarea, select{font:inherit; color:inherit; border:none; background:none; outline:none;}
button{cursor:pointer;}
table{border-collapse:collapse; border-spacing:0;}
/** RESET END **/


/* 마우스오버 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{width : 100%;height : 100px;position : fixed;left : 0;top : 0;background : rgba(255,255,255,0);z-index: 1001;border-bottom : 1px solid transparent; transition :transform 1s, background .5s, border-color .5s; padding : 0 80px; transform: translateY(-100%);
    &::after{position : absolute;content : '';width : 100%;height : 0;background : #fff;top : calc(100% + 1px);left : 0;transition : height .5s;z-index : -1;}

    &.show{transform: translateY(0);}
    &.dark{
        .main-logo{background : url(../images/common/main-logo-dark.png)no-repeat center / contain}
        .header-nav > ul > li > a{color : #111;}
    }
    &.on{background : #fff;border-bottom : 1px solid rgba(0,0,0,0.2);
        &::after{height : 0;}
        .main-logo{background : url(../images/common/main-logo-dark.png)no-repeat center / contain}
        .header-nav > ul > li > a{color : #111;}
        .header-nav > ul > li:hover > a{font-weight: 700;color : #00372E !important;}
    }

    &.hide{transform: translateY(-100%);pointer-events : none;}

    &.sub{position : absolute;
        .main-logo{background : url(../images/common/main-logo-dark.png)no-repeat center / contain}
        .header-nav > ul > li > a{color : #111;}
    }
}
.header-inner{display: flex;justify-content: space-between; align-items: center; width : 100%; max-width: 1740px;height : 100%; margin : 0 auto;}
.header-right{display: flex;align-items: center;gap : 30px;flex-shrink: 0; height : 100%;}

.header .customer{display : flex; flex-direction : column; align-items : center;}

.header .customer-area{display: flex; color : #00372E; align-items: center; gap : 4px; font-size: 15px; font-weight: 500; transition : color .5s; margin-bottom: 6px;}
.customer-icon{width : 21px;height : 20px; background: url(../images/common/customer-icon.png)no-repeat center / contain; transition : background .5s;}

.header-tel-area{display: flex;align-items: center;gap : 9px;font-size: 24px;color : #000;transition: color .5s; border-top : 1px solid rgba(0,0,0,0.3); padding-top: 8px; transition : .5s; font-family: jost; font-weight: 500;}
.header-tel-icon{width : 18px;height : 17px; background: url(../images/common/header-tel-icon.png) no-repeat center / contain; transition : background .5s;}

.main-logo{width : 234px;height : 35px;background : url(../images/common/main-logo.png)no-repeat center / contain; transition : background .5s;}
.main-logo > a{display: block;width : 100%;height : 100%;font-size: 0;line-height: 0;color : transparent;}

.header-nav{display: flex;justify-content: center;height : 100%;}
.header-nav > ul{display: flex;align-items: center;height : 100%;white-space : nowrap;}
.header-nav > ul > li{display : flex;justify-content : center;height : 100%;position : relative;}
.header-nav > ul > li > a{display: flex;align-items: center;justify-content : center; height : 100%;padding : 0 16px;font-size: 15px;letter-spacing: -0.04em;color : #fff;position : relative;font-family: PT; font-weight: 500; transition : .5s;}

.header-nav > ul > li > a{display: flex;align-items: center;justify-content : center; height : 100%;padding : 0 16px;font-size: 15px;letter-spacing: -0.04em;color : #111;position : relative; font-weight: 500; transition : .5s;
    &::before{clip-path : inset(0 50%);position : absolute;content : '';transform: translateY(-16px) scale(1) rotate(0deg); width : 30px; height : 1px; background : #00372E;opacity : 0; transition : opacity .5s, transform .5s, background .5s, width .5s, height .5s, clip-path .5s;}
}
.header-nav > ul > li:hover > a::before{clip-path : inset(0); width : 5px;height : 5px; transform: translateY(-16px) scale(1) rotate(45deg); opacity : 1; transition : opacity .5s, transform .5s .5s, background .5s, width .3s .5s, height .3s .5s, clip-path .5s;}

.header-nav > ul > li > ul {position : absolute;top : 100%;padding : 20px 0 0;opacity : 0;pointer-events : none;transition : opacity .5s;}
.header.on .header-nav > ul > li > ul{opacity : 1;pointer-events : all;}
.header-nav > ul > li > ul > li > a{display : block;color : #111;font-size : 14px;text-align : center;padding : 3px 0;letter-spacing : -0.04em;
    &:hover{font-weight : 500;color : #144139;}
}


/**/

/**/

.footer{padding :55px 90px 60px;font-family: PT;background: #151515}
.footer-inner{width : 100%;max-width: 1740px;margin : 0 auto;position : relative;}
.footer-logo{margin-bottom: 18px;;}
.footer-ul{display: flex;gap : 28px;color : #aaa;font-size: 14px;letter-spacing: -0.02em;margin-bottom: 22px;}
.footer-ul > li{display: flex;align-items: center; position : relative;font-weight: 300;}
.footer-ul > li:not(:last-child)::after{position :absolute;content: '';width : 1px;height : 10px;background: #aaa;right : -12px;}
.footer-info{font-size: 14px;margin-bottom: 64px;}
.footer-info > li{padding-left: 15px;position : relative;color : #656565;font-size: 14px;letter-spacing: -0.04em;line-height: 1.6em;}
.footer-info > li::before{position : absolute; content: '※';left : 0;;}
.footer-copy{font-size: 14px;color : #F0F0F0}
.footer-bottom{display: flex;align-items: center; position : absolute;bottom : 0;right : 0; gap : 18px;}
.footer-tel{display: flex; gap : 10px; align-items: center;justify-content: center; font-family: jost; color : #fff; font-size: 30px; font-weight: 600;}
/* .footer-tel-icon{width : 38px;height : 38px; background: url(../images/common/header-tel-icon.png)no-repeat center / contain; transition : .5s;} */
/* .sigong{mix-blend-mode : darken} */
/* .sigong{display: flex;justify-content: end;gap : 40px;white-space: nowrap;}
.sigong > li{display: flex;align-items: center;gap : 33px; color : #fff;letter-spacing: -0.02em;font-weight: 600;font-size: 13px;}
.sigong > li > span{display: flex;align-items: center; color : #414141;position : relative;}
.sigong > li > span::after{position : absolute;content: '';width : 1px;height : 10px; background: #414141;right : -14px;} */

.footer-link{display: flex;gap : 28px;color : #fff;font-size: 14px;letter-spacing: -0.02em;position : absolute; right : 0;bottom : 70px;}
.footer-link > li{display: flex;align-items: center; position : relative;font-weight: 300;}
.footer-link > li:not(:last-child)::after{position :absolute;content: '';width : 1px;height : 10px;background: #fff;right : -12px;}

.top-btn{position : absolute;right : 0;top : 0;}

/* 오리발 */
.page_info{display: flex;flex-direction: column;justify-content: center;background : #f7f7f7;max-width : 1408px;border : 1px solid #e5e5e5;padding : 25px 60px 25px 120px;min-height : 120px;font-size: 13px;letter-spacing: -0.04em;color : #777;position : relative;margin : 2em auto 0;}
.page_info::after{display: flex;align-items: center;justify-content: center;color : #fff;font-size: 36px;font-weight: 700;content : '!';position : absolute;width : 70px;height : 70px;border-radius: 50%;background : #ddd;left : 25px;top : 50%;transform: translateY(-50%);}
.page_info > li{position : relative;padding-left : 14px;}
.page_info > li + li{margin-top : 3px;}
.page_info > li::before{content : '※ ';position : absolute;left : 0;font-size: 11px;line-height: 18px;}

.page_info > li p{display : flex; font-size : 12px;gap : 5px;}
.page_info > li p:nth-of-type(1){margin-top: 5px;}
.page_info > li p + p{margin-top: 3px;}

.page_info > li > p b{white-space : nowrap;}

/**/
.hamburger-nav{display: none;}
.hamburger{display: none;}
.hamburger-nav{display : none;}
.hamburger-dim{display : none;}
.moView{display : none !important;}

@media(max-width : 1200px){

    .moView{display : block !important;}
	.pcView{display : none !important;}
	.header{height : 52px;padding : 0 16px; background: #fff; border-color : #ddd; transform : translateY(0)}
	.header.on::after{height : 0;}
	.header-inner{justify-content : space-between;;min-width : 0; padding : 0;}
	.header-nav{display: none;}

	.main-logo{width : 200px;height : 80%;position : absolute;left : 50%;transform : translateX(-50%);}
	.main-logo{background : url(../images/common/main-logo-dark.png)no-repeat center / contain; transition : background .5s;}

	.open{display: none;margin-right: 5px;font-size: 10px;padding : 5px 10px;}
	.header-tel{width : 20px;margin-right: 0;}

	.hamburger{display: flex;align-items: center;justify-content: center;width : 24px;height : 24px;position : relative;}
	.hamburger > span{width : 100%;height : 3px;background: #003A64;position : absolute; transition : transform .5s, background .5s;}
	.hamburger > span:nth-child(1){transform: translateY(-240%);}
	.hamburger > span:nth-child(3){transform: translateY(240%);}

	.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);}

    .header-right{gap : 16px;}

	.hamburger-nav{display : block; 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: 52px 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: 18px;font-family: PT; letter-spacing: -0.03em; font-weight: 500; background: #fafafa;padding : 16px; border-bottom: 1px solid #ddd;}
	.hamburger-nav > ul > li > ul{background: #f0f0f0;display: none;}
	.hamburger-nav > ul > li > ul > li > a{display: block;padding : 14px; font-size: 16px;border-bottom : 1px solid #ddd; font-weight: 500; letter-spacing: -0.03em; font-family: PT;}

    .footer{padding : 48px 16px;}
    .footer-inner{display: flex;flex-direction: column;align-items: start; position : relative; padding : 0;}
    .footer-logo{width : 100px;margin-bottom: 16px;;}
    .footer-ul{display: flex; flex-wrap: wrap; gap : 5px;font-size: 12px; margin-bottom: 16px;}
    .footer-ul > li{display: flex;align-items: center; position : relative;font-weight: 300;}
    .footer-ul > li:not(:last-child)::after{display: none;}
    .footer-info{margin-bottom: 18px;}
    .footer-info > li{padding-left: 10px;font-size: 12px;}
    .footer-copy{font-size: 11px;color : #fff; text-align: center; margin : 0; letter-spacing: -0.06em;}
    .sigong{width : 100%; position : static; margin-top: 16px; max-width: 343px;}
    .footer-tel{font-size: 36px;font-family: CarismaClassic;}

    .footer-link{display: flex;justify-content: center; gap : 28px;color : #fff;font-size: 18px;letter-spacing: -0.02em; margin-bottom: 36px;}
    .footer-link > li{display: flex;align-items: center; position : relative;font-weight: 300;}
    .footer-link > li:not(:last-child)::after{position :absolute;content: '';width : 1px;height : 10px;background: #fff;right : -12px;}

    .top-btn{position : absolute;right : 0px;top : 0px; width : 30px}
}