@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: 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{
    width : 100%;
    position : fixed;
    top : 0;
    left : 0;
    z-index: 1000;
    border-bottom : 1px solid #EBEBEB;
    transition : background .5s, opacity .5s;;
    /* background: #fff; */
}
.header.hide{opacity: 0;pointer-events: none;}
.header.white{
    background : #fff;
}
.header.on{
    background : #fff;
}
.header.sub{
	background : #fff;
	position : absolute;
}
.header::after{
	position : absolute;
	content : '';
	left : 0;
	top : 100%;
	background : #fff;
	width : 100%;
	height : 0;
	z-index : -1;
	transition : height .5s, opacity .5s;;
}
.header.on::after{
	/* height : 250px; */
}
.header-top{
    display: flex;
    justify-content: center;
    height : 97px;
    padding : 0 80px;
    border-bottom : 1px solid #EBEBEB;
}
.header-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width : 1758px;
    position : relative;
}
.header-open{
    font-size: 21px;
    letter-spacing: -0.06em;
    font-weight: 500;
    color : #0A2C59;
    font-family: futura-pt, PT;
}

.main-logo{
    width: 115px;
    height : 68px;
    background : url(/assets/images/common/main-logo.png)no-repeat center / contain;
    position : absolute;
    left : 50%;
    top : 50%;
    transform: translate(-50%, -50%);
}
.main-logo > a{
    display: block;
    width : 100%;
    height : 100%;
    font-size: 0;
    line-height: 0;
    color : transparent;
}
.header-right{
    display: flex;
    align-items: center;
    gap : 21px;
}
.header-right > .customer{
    display: flex;
    align-items: center;
    gap : 8px;
    font-size: 15px;
    font-weight: 700;
    color : #1C1C1C; 
    letter-spacing: -0.06em;
}
.header-tel{
    display: flex;
    align-items: center;
    gap : 7px;
    font-size: 28px;
    font-weight: 500;
    font-family: futura-pt;
    color : #1C1C1C;
}
.header-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    width : 100%;
    height : 50px;
}
.header-nav > ul{
    display: flex;
	height : 100%;
	letter-spacing: -0.04em;
}
.header-nav > ul > li{
	display : flex;
	justify-content : center;
	height : 100%;
	position : relative;
}
.header-nav > ul > li::after{
	position : absolute;
	content : '';
	width : 0;
	height : 3px;
	bottom : -1px;
	left : 50%;
	background : #024098;
	transition : left .5s, width .5s;
}
.header-nav > ul > li:hover > a{
    color : #024098;
}
.header-nav > ul > li:hover::after{
	width : 100%;
	left : 0;
}
.header-nav > ul > li > a{
    display: flex;
	align-items : center;
	justify-content : center;
    padding : 0 28px;
	height : 100%;
    font-size: 17px;
    font-weight: 500;
    color : #414141;
    transition : color .3s;
	position : relative;
}

.header-nav > ul > li > ul{
	position : absolute;
	top : 100%;
	text-align : center;
	padding : 10px 0;
	pointer-events : none;
	opacity : 0;
	transition : opacity .5s;
}
.header.on .header-nav > ul > li > ul{
	pointer-events : all;
	opacity : 1;
}
.header-nav > ul > li > ul > li > a{
	display : block;
	padding : 4px 0;
	font-size : 15px;
}
.header-nav > ul > li > ul > li > a:hover{
	font-weight : 500;
	color : #024098;
}


.footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background : #000000;
    padding : 67px 0 74px;
}
.footer-logo{
    margin-bottom: 35px;
}
.footer .sigong{
    display: flex;
    gap : 22px;
    font-size: 15px;
    font-weight: 700;
    color : #fff;
    letter-spacing: -0.04em;
    margin-bottom: 35px;
}
.footer .sigong > li{display : flex; align-items : center;}
.footer .sigong > li > span{
    font-size: 12px;
}
.footer-address{
    display: flex;
    align-items: center;
    gap : 16px;
    color : #7B7B7B;
    position:relative;
    margin-bottom: 35px;
}
.footer-address > li{
    position : relative;
    letter-spacing: -0.02em;
}
.footer-address > li.sedae{
    color : #fff;
    font-size: 15px;
    letter-spacing: -0.04em;
    font-weight: 700;
}
.footer-address > li:not(:last-child){
    padding-right : 16px;
}
.footer-address > li:not(:last-child)::after{
    position : absolute;
    content: '';
    top : 50%;
    right : 0;
    width : 1px;
    height : 10px;
    background : #7B7B7B;
    transform: translateY(-50%);
}
.footer-address > li > span{
    color : #fff;
    font-weight: 700;
}
.footer-info{
    color : #7B7B7B;
    font-size: 14px;
    letter-spacing: -0.02em;
    line-height: 24px;
    text-align: center;
    margin-bottom: 35px;
}
.footer-copy{
    font-size: 14px;
    letter-spacing: -0.02em;
    color : #7B7B7B;
}