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

	header {z-index:999; position:absolute; width:100%; min-width:1200px; top:0; left:0;}
	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:100px; display:flex; align-items:center;
		color: #222;font-size:var(--fs26);font-weight: 700;
	}
	header .headerWrap h1 a img { width:100%; height:22px;}
	header .headerWrap h1 a img.off { width:100%; height:22px; display:block;}
	header .headerWrap h1 a img.on {display:none;}

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

	header .asideWrap {display:flex; height: 100px; position: absolute; right:0; top:0; z-index: 9}
	header .asideWrap a {align-self:center; color:#666;font-size:var(--fs14);font-weight: 600; line-height:1;}
	header .asideWrap a.active {color: var(--c_base1);}
	header .asideWrap a+a {padding-left:20px; margin-left:20px; border-left:2px solid #ddd;}

	header .asideWrap {align-items:center;}
	header .asideWrap .hd-inquiry,
	header.on .asideWrap .hd-inquiry {display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 24px; border-radius:10px; background:#111; color:#fff; font-size:var(--fs15); font-weight:600; line-height:1;}
	header .asideWrap .hd-inquiry:hover,
	header.on .asideWrap .hd-inquiry:hover {background:var(--c_base1); color:#fff;}

	nav {height:100px; position:relative; margin:0 auto; overflow:hidden; transition:all .3s;}
	nav::before {content:''; position:absolute; left:0; top:0; width:100%; height:100px;z-index:2; border-bottom:1px solid transparent;  pointer-events:none; transition:all .3s;}
	nav .gnb {width:100%; display:flex; justify-content:center; align-items: center; gap: 50px;}
	nav .gnb .dep1 {height:100px; display:flex; gap:4vw;}
	nav .gnb .dep1>li {padding:34px 0;display:flex; flex-direction:column;}
	nav .gnb .dep1>li>a { color:#222; font-weight:600; font-size:var(--fs20); display:block; position:relative;transition:0.2s;}
	nav .gnb .dep1>li>a>h2 {font-size:inherit;}
	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:136px; position:absolute; gap:10px; display:flex; flex-direction:column;transition:all .3s;}
	nav .gnb .dep2>li {}
	nav .gnb .dep2>li a {font-size:var(--fs18); display:inline-block; color:#222; white-space:nowrap; position:relative; transition:0.2s;}
	nav .gnb .dep2>li.on a {color:var(--c_base1); border-color:inherit;}

	nav .gnb .dep1>li.on>a {color:var(--c_base1) !important;}

	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 {color:#222;}
	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;transition:all .5s ease;}
	header.on nav {height:350px; box-shadow:0 0 20px rgba(0,0,0,.2)}
	header.on nav::before { border-bottom-color:#ddd; }
	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>ul {opacity:1;}
	header.on .gnb>ul>li>a {color:#111;}
	header.on .asideWrap {}
	header.on .asideWrap a {color:#111;}
	header.on .asideWrap a+a {border-color:#ddd}
	header.on .asideWrap a.active {color: var(--c_base1);}

}

/* ************************ 태블릿 이하(~1199) ************************ */
@media screen and (max-width: 1199px) {

	header { position:absolute; left:0; top:0; width:100%; z-index:999; height:70px;}
	header .headerWrap { }
	header .headerWrap .gnbView { position:absolute; right:0; top:0; width:70px; height:70px; background:url(/images/common/menu.svg)center /22px no-repeat; } /* ✅ 이미지 경로 교체 허용 */
	header .headerWrap h1 { display:inline-block; }
	header .headerWrap h1 a {
		height:70px; display:flex; align-items:center; padding-left:30px;
		color: #222; font-size:var(--fs26); font-weight: 700;
	}
	header .headerWrap h1 a img { height:40px;}
	header .headerWrap h1 a img.off {display:none;}

	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:#111;}
	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;  color:#222 !important;}
	nav .gnb .dep1>li>a>h2 {font-size:inherit;}
	nav .gnb .dep1>li.on>a {color:#fff !important;}
	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 {padding-left:20px; height:60px; font-size:18px;}
	header .headerWrap .gnbView {width:60px; height:60px;}
	
	
}