/* ************************ 데스크탑 (1200~) ************************ */
@media screen and (min-width: 1200px), print {

	header {z-index:9999; position:absolute; width:100%; min-width:1200px; top:0; left:0;transition:all .2s ease}
	/* header.scrolled {background:rgba(11,14,20,0.5); backdrop-filter:blur(12px);  box-shadow:0 4px 24px rgba(0,0,0,0.25);} */
	header.scrolled {opacity:0; z-index:-99999; }
	header .headerWrap {width:90vw; margin:0 auto; position:relative;}
	header .headerWrap h1 {position:absolute; z-index:99999; left:0; top:0;}
	header .headerWrap h1 a {height:150px; display:flex; align-items:center;}
	header .headerWrap h1 a img { width:100%; height:60px;}
	/* header .headerWrap h1 a img.off { width:100%; height:50px; display:none;} */
	/* header .headerWrap h1 a img.on {display:block;} */
	header .headerWrap h1 .hidden {display:none;}

	header .navBg {
		background:transparent; position:absolute; left:0; top:0; width:100%; height:0;
		/* transition:all .2s ease !important; */
	}

	header .asideWrap {display:flex; align-items:center; gap:20px; height: 150px; position: absolute; right:0; top:0; z-index: 9}
	header .asideWrap a {align-self:center; color: rgba(255, 255, 255, 0.50);font-size:var(--fs14);font-weight: 600; line-height:1;}
	header .asideWrap a.active {color: var(--c_base2);}
	header .asideWrap a+a {padding-left:20px; margin-left:20px; border-left:2px solid #fff;}
	
	header .asideWrap .m-contact-btn {
		display:inline-flex; align-items:center;
		height:46px; padding:0 24px;
		background:var(--c_base3); color:#fff;
		border-radius:999px;
		font-size:15px; font-weight:900;
		transition:background .25s;
	}
	header .asideWrap .m-contact-btn:hover {background:#b80b13;}

	header .asideWrap .m-hamburger {
		width:32px; height:40px;
		display:flex; flex-direction:column; justify-content:center; gap:8px;
	}
	header .asideWrap .m-hamburger span {display:block; width:32px; height:2px; background:#fff; border-radius:2px; transition:transform .25s;}
	
	
	
	nav {height:150px; position:relative; margin:0 auto; overflow:hidden; transition:all .1s;}
	nav .gnb {width:100%; display:flex; justify-content:center; align-items: center; gap: 50px;}
	nav .gnb .dep1 {height:150px; display:flex; gap:4vw;}
	nav .gnb .dep1>li {padding:60px 0;display:flex; flex-direction:column;}
	nav .gnb .dep1>li>a { color:rgba(255, 255, 255, 0.90); font-weight:600; font-size:20px; display:block; position:relative;transition:0.2s;}
	nav .gnb .dep1>li>a:after {width:100%; height:2px; left:0; bottom:0; position:absolute; display:block; content:'';transition:0.2s;}

	nav .gnb .dep2 {opacity:0; top:120px; position:absolute; gap:10px; display:flex; flex-direction:column;transition:all .3s;}
	nav .gnb .dep2>li {}
	nav .gnb .dep2>li a {display:inline-block; color:#333; white-space:nowrap; position:relative; transition:0.2s;}
	nav .gnb .dep2>li a:hover,
	nav .gnb .dep2>li.on a {color:var(--c_base1); border-color:inherit;}
	
	nav .gnb .dep2.rnd>li:nth-child(2) {display:none;}
	nav .gnb .dep2.rnd>li:nth-child(3) {display:none;}

	nav .gnb .dep1>li.on>a:after {background:#fff;}

	header .navBg {background:transparent; position:absolute; left:0; top:0; width:100%; height:0; transition:all .3s ease !important;}

	header.on {}
	/* header.on .headerWrap h1 a img.off {display:block;} */
	/* header.on .headerWrap h1 a img.on {display:none;} */
	header.on .navBg {height:100%; background:#fff;}
	header.on .navBg:after {opacity:1;}
	header.on nav {height:540px; box-shadow:0 0 10px rgba(0,0,0,.2)}
	header.on nav .gnb>ul {height:auto;}
	header.on nav .gnb>ul>li.on>a,
	header.on nav .gnb>ul>li:hover>a {color:var(--c_base1) !important;}
	header.on nav .gnb>ul>li.on>a:after {background:var(--c_base1);}
	header.on nav .gnb>ul>li>ul {opacity:1;}
	header.on .gnb>ul>li>a {color:#000;}
	header.on .asideWrap {}
	header.on .asideWrap .m-hamburger span {background:#000;}

}

/* ************************ 태블릿 이하(~1199) ************************ */
@media screen and (max-width: 1199px) {
	
	header { position:absolute; left:0; top:0; width:100%; z-index:9999; height:70px;}
	header .headerWrap { }
	header .headerWrap h1 { display:inline-block; }
	header .headerWrap h1 a { height:70px; display:flex; align-items:center; padding-left:30px;}
	header .headerWrap h1 a img { height:40px;}
	header .headerWrap h1 a img.off {display:none;}
	header .headerWrap h1 .hidden {display:none;}
	
	header .headerWrap .gnbView {position:absolute; right:0; top:0; width:70px; height:70px;}
	header .headerWrap .gnbView {
		display:flex; flex-direction:column; justify-content:center; gap:8px;
	}
	header .headerWrap .gnbView span {display:block; width:32px; height:2px; background:#fff; border-radius:2px; transition:transform .25s;}
	
	
	header .gnbCover {display:none; background:rgba(0,0,0,.8); width:100%; height:100vh; left:0; top:0; position:fixed; }

	nav {transform:translateX(100%); z-index:9999; position:fixed; right:0; top:0; width:600px; max-width:80%; min-width:320px; height:100%; overflow:hidden; background:#fff; transition:all .3s;}
	nav.active {transform:translateX(0);}
	nav .closeWrap {padding-left:20px; display:flex; gap:20px; align-items:center; position:relative; height:60px; border-bottom: 1px solid rgba(0,0,0,.15); overflow:hidden; font-weight : 500; }
	nav .closeWrap a {font-size:var(--fs14);}
	nav .closeWrap a.lang {color:var(--c_base2);}
	nav .closeWrap .gnbClose {
		position:absolute; right:0; top:0;
		width:60px; height:60px; background:url(/images/common/icon_close.png)center no-repeat; background-size:20px; border-left:1px solid rgba(0,0,0,.15);
	}
	nav .gnb { position:relative; width:100%; height:calc(100% - 60px); overflow-y:auto; text-align:left !important; font-weight : 400; }
	nav .gnb * {width:100% !important; }
	nav .gnb .dep1>li { clear:both; position:relative; border-bottom:1px solid #e5e5e5; }
	nav .gnb .dep1>li>a { display:block; padding:20px; font-size:17px; }
	nav .gnb .dep1>li>a span { font-size:14px; color:#999; padding-left:5px; }
	nav .gnb .dep1>li.on { border-color:var(--c_base1); }
	nav .gnb .dep1>li.on>a { background:var(--c_base1); color:#fff; }
	nav .gnb .dep1>li.on>a span { color:#fff; }

	nav .gnb .dep2 {display:none;}
	nav .gnb .dep2>li {position:relative; border-top: 1px solid #eee; }
	nav .gnb .dep2>li a { display:block; padding:15px 40px; font-size:15px; letter-spacing:-.8px; background:#fff; }
	nav .gnb .dep2>li a span { font-size:14px; color:#999; padding-left:5px; }
	nav .gnb .dep2>li:last-child a { border-color:#e0e0e0; }
	nav .gnb .dep2>li a:hover { color:#000; background-color:#f5f5f5; }
	nav .gnb .dep2>li.on a { color:var(--c_base1); font-weight:700; }
	nav .gnb .dep2>li.on a span { color:var(--c_base1); }
	
	
}

/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	header {height:60px;}
	header .headerWrap h1 a {height:60px; padding-left:20px}
	header .headerWrap .gnbView {width:60px; height:60px; gap:6px;}
	header .headerWrap .gnbView span {width:26px;}
	
	
}
