@charset "utf-8";

:root{
	--main-color: #003477;
	--area-wide-width: 1720px;
	--area-box-width: 1620px;
	--area-sub-width: 1420px;
	--area-width: 1320px;
	--area-padding: 30px;
	--header-top: 40px;
	--header-height: 85px;
	--sub-visual-height: 100vh;
	--sub-menu-height: 6rem;
	--full-height: 100vh;
	--transition-custom: all 0.4s ease-in-out;
	--transition-custom2: all 0.8s ease-in-out; /* data-scroll */
}

::selection {
    background: var(--main-color);   
    color: #fff;
}
::-moz-selection {
    background: var(--main-color);    
    color: #fff;
}


/* ****************** HEADER ********************** */
#header{position:fixed; height: var(--header-height); top:0; left:0; width:100%; z-index:9999; background:#fff;}
.fullpage-html #header{position:fixed;}
#headerInnerWrap{position:absolute; top:0px; left:50%; transform:translateX(-50%); width:100%; height:var(--header-height); z-index:9999; transition:var(--transition-custom); transition-property:background-color; max-width:var(--area-wide-width);}
#headerInner{position:relative; display:flex; align-items:center; justify-content:space-between; height:var(--header-height); margin:0px auto; box-sizing:border-box;}
#header .logo{position:relative; z-index:100; }
#header .logo a{display:block;}
#header .logo img{width:100%; max-width: 220px;}

#header:before{position: absolute; content:''; width:100vw; height:var(--header-height); transform:translateY(calc(-1 * (var(--header-height) + var(--header-top)))); background: rgba(255, 255, 255, 0.6); top:0; left:0; transition:var(--transition-custom2); backdrop-filter: blur(3rem);}


/* 모바일 사이드 메뉴버튼 */
.sitemap-line-btn{position: relative; width:6rem; height:33px; display:flex; flex-direction:column; justify-content: space-between; margin-left:4rem; box-sizing:border-box;}
.sitemap-line-btn .line{position: relative; top:0; display:block; width:100%; height:4px; background-color:#000; margin: 1px auto; transition:top 0.4s 0.4s, transform 0.4s 0s, background 0.4s ease-in-out;}
.sitemap-line-btn .txt-wrap{position: absolute; top:50%; transform:translateY(-50%); display: block; width:100%; text-align:center; transition: height 0.4s 0.4s; overflow:hidden;}
.sitemap-line-btn .txt{font-size:1.4rem; line-height:1.5; font-weight:800; color:#fff; transition:var(--transition-custom);}
/* active */
.sitemap-line-btn.active{position:relative; z-index:100000;}
.sitemap-line-btn.active .txt-wrap{height:0; transition: height 0.4s 0s;}
.sitemap-line-btn.active .txt-wrap .txt{color:#fff !important;}
.sitemap-line-btn.active .line{transition:top 0.4s 0s, transform 0.4s 0.4s; background:#fff !important;}
.sitemap-line-btn.active .line:nth-child(1){
	top:13px;
	transform: rotate(45deg);
}
.sitemap-line-btn.active .line:nth-child(3){
	top:-13px;
	transform: rotate(-45deg);
}


/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{position:fixed; top:0; left:0; width:100%; height:100%; visibility:hidden; opacity:0; background:rgba(0,0,0,0.5); z-index:9997;  transition:var(--transition-custom); }	/* gnb overlay BG */
.gnb-overlay-bg.open{visibility:visible; opacity:1.0;}
#gnb{position:absolute; text-align:center; top:0; left:0px; width:100%; z-index:99;}
#gnb > ul{display:inline-block;}
#gnb > ul > li{position:relative; float:left; word-break:keep-all;}
#gnb > ul > li > a {
    position: relative;
    z-index: 100;
    display: block;
    line-height: var(--header-height);
    padding: 0 1.5rem;
    text-align: center;
    color: #000;
    font-size: 1.8em;
    letter-spacing: -0.02em;
    font-weight: 700;
    transition: var(--transition-custom);
}
#gnb > ul > li > a span{position: relative;}
#gnb > ul > li > a span em{position: relative; display: inline-block; font-weight:inherit}
#gnb > ul > li > a span:before{display: block; width: 100%; height: 2px; content: ''; position: absolute; bottom: 0; left: 0; background-color: #fff; transform-origin: 100% 50%; transition: transform .6s cubic-bezier(0.3, 0, 0.1, 1); transition-delay: 0s; z-index: 3; transform: scale(0, 1);}
#gnb > ul > li > a span:after{position: absolute; content: attr(data-label); top: 0; left: 0; width: 100%; color: #fff; white-space: nowrap; mix-blend-mode: difference;}
#gnb > ul > li:hover > a span:before{transform: scale(1, 1); transition-delay: 0s; transform-origin: 0% 50%; }


/* GNB :: 2차메뉴 Over (높이변경) */
#gnb.open #gnbBg{height:350px; opacity:1.0;filter:Alpha(opacity=100);}
#gnb.open > ul > li .gnb-2dep{
	height:250px; opacity:1.0;filter:Alpha(opacity=100);
	visibility:visible;
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out 0.2s;
}

/* GNB :: 2차 각각메뉴 */
#gnb.each-menu > ul > li .gnb-2dep{
	position:absolute; 
	top:calc(var(--header-height) - 20px); 
	left:0px; 
	z-index:99;
	width:12rem; 
	text-align:left; 
	visibility:hidden;
	transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);
}
#gnb.each-menu > ul > li .gnb-2dep.nav_cl{
	width:45rem; 
}
#gnb.each-menu > ul > li .gnb-2dep.nav_cl >ul{display:flex; flex-wrap: wrap; }
#gnb.each-menu > ul > li .gnb-2dep.nav_cl >ul> li{width:33%;}

#gnb.each-menu > ul > li .gnb-2dep:before{
	content:""; 
	position:absolute; top:0px; left:0px; right:0px; 
	height:0; 
	background:#fff;
	box-shadow: 0.5rem 0.5rem 2rem rgba(0, 0, 0, 0.1);
	transition:all 0.2s cubic-bezier(0.4, 0, 1, 1);
	border-radius:1rem;
}
#gnb.each-menu > ul > li .gnb-2dep > ul{padding:17px 7px;}
#gnb.each-menu > ul > li .gnb-2dep > ul > li {
    position: relative;
    padding: 0.2rem 1.4rem;
    opacity: 0;
    transition: all 0s 0s;
}
#gnb.each-menu > ul > li .gnb-2dep > ul > li > a{display:block; font-size:1.5em; font-weight:600; text-align:left; line-height:1.4; transition:var(--transition-custom);}
#gnb.each-menu > ul > li .gnb-2dep > ul > li > a > span{display: inline-block; position: relative; color:#555;}
#gnb.each-menu > ul > li .gnb-2dep > ul > li > a > span:before{position: absolute; content: attr(data-label); top: 0; left: 0; width: 0; height: 100%; color: var(--main-color); white-space: nowrap; transition: all 0.2s ease-in-out; overflow: hidden; z-index:9;}
#gnb.each-menu > ul > li .gnb-2dep > ul > li a.active span:before{width:100%;}
#gnb.each-menu > ul > li .gnb-2dep > ul > li:hover a span:before{width:100%;}
/* over했을때 */
#gnb.each-menu > ul > li .gnb-2dep.open{visibility:visible; opacity:1.0;}
#gnb.each-menu > ul > li .gnb-2dep.open:before{height:100%;}
#gnb > ul > li .gnb-2dep.open > ul > li{opacity:1.0; transition:var(--transition-custom2);}
#gnb > ul > li .gnb-2dep.open > ul > li:nth-child(1){transition-delay:0.1s;}
#gnb > ul > li .gnb-2dep.open > ul > li:nth-child(2){transition-delay:0.2s;}
#gnb > ul > li .gnb-2dep.open > ul > li:nth-child(3){transition-delay:0.3s;}
#gnb > ul > li .gnb-2dep.open > ul > li:nth-child(4){transition-delay:0.4s;}
#gnb > ul > li .gnb-2dep.open > ul > li:nth-child(5){transition-delay:0.5s;}
#gnb > ul > li .gnb-2dep.open > ul > li:nth-child(6){transition-delay:0.6s;}
#gnb > ul > li .gnb-2dep.open > ul > li:nth-child(7){transition-delay:0.7s;}
#gnb > ul > li .gnb-2dep.open > ul > li:nth-child(8){transition-delay:0.8s;}
/* 3deps */
#gnb.each-menu > ul > li .gnb-2dep > ul > li > .gnb-3dep{padding:0 0 17px;}
#gnb.each-menu > ul > li .gnb-2dep > ul > li > .gnb-3dep li{position: relative; padding:0.5rem 0 0 0;}
#gnb.each-menu > ul > li .gnb-2dep > ul > li > .gnb-3dep li a{position: relative; display:block; font-size:1.3em; font-weight:400; text-align:left; line-height:1.1; transition:var(--transition-custom);}
#gnb.each-menu > ul > li .gnb-2dep > ul > li > .gnb-3dep li a span{display: inline-block; position: relative; color:#aaa;}
#gnb.each-menu > ul > li .gnb-2dep > ul > li > .gnb-3dep li a span:before{position: absolute; content: attr(data-label); top: 0; left: 0; width: 0; height: 100%; color: var(--main-color); white-space: nowrap; transition: all 0.2s ease-in-out; overflow: hidden; z-index:9;}

#gnb.each-menu > ul > li .gnb-2dep > ul > li > .gnb-3dep li a:hover span:before{width:100%;}


/* -------- Header :: GNB(Mobile) -------- */
.nav-open-btn{display:none;}
#gnbM{display:none}

/* -------- Header :: GNB(Black) -------- */
.header-black{}
.header-black #gnb > ul > li > a{color:#000;}
.header-black #gnb.each-menu > ul > li .gnb-2dep > ul > li > a{color:rgba(255,255,255,0.6);}
.header-black #gnb > ul > li > a span:before{background:#000;}
.header-black .sitemap-line-btn .line{background:#000;}
.header-black .sitemap-line-btn .txt{color:#000;}
.header-black .header-lang .lang-open-btn{background:#f5f5f5; color:#000; backdrop-filter: none;}
.header-black .header-lang > ul {background:#f5f5f5; backdrop-filter: none;}
.header-black .header-lang > ul > li > a{color:#000;}
/* sitemap-white */
.header-black.menu-white .sitemap-line-btn .line{background:#fff;}
.header-black.menu-white .sitemap-line-btn .txt{color:#fff;}

/* -------- Header :: top-fixed -------- */
#wrap #header.top-fixed{top:0;}
#wrap:not(.main-page) #header.top-fixed:not(.not-fixed):before{transform:translateY(0);}
#wrap:not(.main-page) #header.top-fixed:not(.not-fixed) #gnb > ul > li > a{color:#000;}
#wrap:not(.main-page) #header.top-fixed:not(.not-fixed) #gnb.each-menu > ul > li .gnb-2dep ul li a{color:rgba(255,255,255,0.6);}
#wrap:not(.main-page) #header.top-fixed:not(.not-fixed) #gnb > ul > li > a span:before{background:#000;}
#wrap:not(.main-page) #header.top-fixed:not(.not-fixed) .sitemap-line-btn .line{background:#000;}
#wrap:not(.main-page) #header.top-fixed:not(.not-fixed) .sitemap-line-btn .txt{color:#000;}
#wrap:not(.main-page) #header.top-fixed:not(.not-fixed) .header-lang .lang-open-btn{background:#f5f5f5; color:#000; backdrop-filter: none;}
#wrap:not(.main-page) #header.top-fixed:not(.not-fixed) .header-lang > ul {background:#f5f5f5; backdrop-filter: none;}
#wrap:not(.main-page) #header.top-fixed:not(.not-fixed) .header-lang > ul > li > a{color:#000;}

/* -------- Header :: sitemap-open -------- */
#header.sitemap-open:before{opacity:0;}

/* -------- Header :: scroll-down -------- */
#wrap:not(.main-page) #header.scroll-down{transform:translateY(calc(-1 * (var(--header-height))));}

/* ****************** HEADER ********************** */
@media all and (max-width:1780px){
	#headerInner{padding:0 var(--area-padding);}
}
@media all and ( max-width: 1280px ){
     :root{    --header-height: 70px;}
	
	/* .fullpage-html #header{position:relative;} */
	#header{transform:none !important;}
	#header:before{display: none;}
	#headerInnerWrap{position:fixed; z-index:99;}
	#header.top-fixed #headerInnerWrap{background-color:#fff; border-bottom:1px solid #eee;}
	
	/* -------- Header :: UTIL BOX -------- */
	.header-util-box{padding-right:80px;}
	/* Header :: 사이트맵 버튼 */
	.sitemap-line-btn, .sitemap-custom-btn{display:none;}

	/* -------- Header :: GNB(Pc) -------- */
	#gnb{display:none;}
	.gnb-overlay-bg{display:none}

	/* -------- Header :: GNB(Mobile/기본스타일) -------- */
	.gnb-overlay-bg-m{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998;}	
	#gnbM{ 
		display:block; 
		position:fixed; 
		top:0px; 
		right:-82%;
		width:80%; 
		height:100%;  
		max-width:280px; 
		background-color:#fff; 
		z-index:9999; 
		transition:var(--transition-custom);   
		visibility:hidden;
	}
	#gnbM.open{
		right:0px; 
		visibility:visible;
	}
	/* GNB Mobile :: 레이아웃 */
	.gnb-navigation-wrapper{position:relative; height:100%; box-sizing:border-box; padding-top:var(--header-height); overflow-y:auto;}	
	.header-util-menu-box + .gnb-navigation-wrapper{padding-top:0; height:calc(100% - var(--header-height));}
	
	/* GNB Mobile :: 메뉴영역 :: 1차 */
	#navigation > li{border-bottom:1px solid #e7e7e7;}
	#navigation > li:first-child{border-top:1px solid #e7e7e7}
	#navigation > li > a {position:relative; display:block; padding:15px var(--area-padding); color:#333; font-size:17px; font-weight:500; }
	#navigation > li.active > a{color:var(--main-color);}
	#navigation > li.has-2dep > a:before{
		width: 24px;
        height: 24px;
        background: url(../img/fac_i1.png);
        background-size: contain;		
		position:absolute; 
		top:50%; 
		right:var(--area-padding);
        content: "";
        transition: all 0.3s;		
		transform:translateY(-50%);
		}
	#navigation > li.has-2dep.active > a:before{        transform: translateY(-50%) rotate(-180deg);}
	/* GNB Mobile ::  메뉴영역 :: 2차 */
	#navigation > li .gnb-2dep{display:none; padding:15px 0; background-color:#f2f2f2; }
	#navigation > li .gnb-2dep > ul > li{height:auto !important;}
	#navigation > li .gnb-2dep > ul > li > a{display:block; color:#888; font-size:14px; padding:12px var(--area-padding); }
	#navigation > li .gnb-2dep > ul > li.on > a{color:#000; font-weight:500;}
	/* GNB Mobile :: 메뉴영역 ::  3차 */
	#navigation > li .gnb-2dep > ul > li > .gnb-3dep{display:none; padding:10px; background-color:#ddd; margin:0 10px}
	#navigation > li .gnb-2dep > ul > li > .gnb-3dep > li > a{display:block; padding:8px 0; font-size:13px; color:#999;}
	
	/* -------- GNB Mobile :: 스타일2 (Full Style) -------- */
	#gnbM.gnb-style-full{ 
		top:-100%; 
		right:0;
		width:100%; 
		height:100%;  
		max-width:none; 
	}
	#gnbM.gnb-style-full.open{
		top:0px; 
	}
	.gnb-style-full .gnb-navigation-wrapper{height:auto; width:100%; position:absolute; top:0px; bottom:0px; left:0; padding-top:0;}
	.gnb-style-full .header-util-menu-box + .gnb-navigation-wrapper{top:var(--header-height); }
	.gnb-style-full-member .gnb-navigation-wrapper{bottom:var(--header-height);}
	.gnb-style-full .gnb-navigation-inner{display:table; width:100%; height:100%;}
	.gnb-style-full #navigation{
		display:table-cell;
		vertical-align:middle;
	}
	.gnb-style-full #navigation > li{
		text-align:center; 
		border:0; 
		opacity:0;
		transform:translateY(-20px);
		transition:all 0s 0s;
	}
	.gnb-style-full #navigation > li:first-child {border:0}
	.gnb-style-full #navigation > li > a {}
	.gnb-style-full #navigation > li .gnb-icon i{display:none;}
	.gnb-style-full.open #navigation > li{
		opacity:1.0;
		transform:translateY(0px); 
		transition:transform 0.8s, opacity 0.8s;
	}
	.gnb-style-full.open #navigation > li:nth-child(1){transition-delay:0.3s;}
	.gnb-style-full.open #navigation > li:nth-child(2){transition-delay:0.4s;}
	.gnb-style-full.open #navigation > li:nth-child(3){transition-delay:0.6s;}
	.gnb-style-full.open #navigation > li:nth-child(4){transition-delay:0.7s;}
	.gnb-style-full.open #navigation > li:nth-child(5){transition-delay:0.9s;}
	.gnb-style-full.open #navigation > li:nth-child(6){transition-delay:1.1s;}
	.gnb-style-full.open #navigation > li:nth-child(7){transition-delay:1.3s;}
	
	/* -------- GNB Mobile :: 언어선택 및 회원메뉴 -------- */


	/* -------- Header :: 네비게이션 오픈 버튼 -------- */
    .nav-open-btn {
        display: flex;
        position: fixed !important;
        top: 24px;
        right: 30px;
        z-index: 10000;
        width: 36px;
		height: 27px;
        border: 0;
        background: transparent;
    }
	#header .logo img{width:100%; max-width: 180px;}
	
	#header.top-fixed .nav-open-btn .line,
	#header .nav-open-btn.active .line{background-color:#000 !important;}
	#header.top-fixed .nav-open-btn .txt{color:#333}
	

}

@media all and ( max-width: 800px ){
	/*#header .logo a{height:3.8rem;}	*/
}