/* ************************ 데스크탑 (1249~) ************************ */
@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:150px; display:flex; align-items:center;}
	header .headerWrap h1 a img { width:100%; height:50px;} 
	header .headerWrap h1 a img.off { width:100%; height:50px; display:none;} 
	header .headerWrap h1 a img.on {display:block;} 
	
	header .navBg {
		background:transparent; position:absolute; left:0; top:0; width:100%; height:0;
		transition:all .3s ease !important;
	}
	
    header .asideWrap {display:flex; 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;}
	
	/* gnb */
	nav {height:150px; position:relative; margin:0 auto; overflow:hidden; transition:all .3s;}
	nav .gnb {width:100%; display:flex; justify-content:flex-end; align-items: center; padding-right:6vw; gap: 50px; background:#232323}
	nav .gnb .dep1 {height:150px; display:flex; gap:2vw;}
	
	/* 하위 메뉴가 부모 메뉴 위치를 정확히 추적하도록 기준점(relative) 부여 */
	nav .gnb .dep1>li {padding:60px 0; display:flex; flex-direction:column; position: relative;} 
	
	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;}
	
	/* left: 0;을 명시하여 부모 메뉴의 왼쪽 시작 라인과 정확히 일치시킵니다. */
	nav .gnb .dep2 {opacity:0; top:150px; position:absolute; left:0; gap:10px; display:flex; flex-direction:column; transition:all .3s;}
	nav .gnb .dep2>li {}
	nav .gnb .dep2>li a {display:inline-block; color:#fff; opacity:.5; white-space:nowrap; position:relative; transition:0.2s;}
	nav .gnb .dep2>li a:hover,
	nav .gnb .dep2>li.on a {opacity:1; border-color:inherit;}
	
	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 .navBg:after {opacity:0; width:100%; height:1px; background:#ededef; left:0; top:150px; position:absolute; display:block; content:'';} */

	/* 마우스 올렸을때 */
	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:#232323;}
	header.on .navBg:after {opacity:1;transition:all .5s ease;}
	header.on nav {height:290px; box-shadow:0 0 10px rgba(0,0,0,.2)}
	header.on nav .gnb>ul {height:auto;}
	header.on nav .gnb>ul>li:hover>a {color:#fff !important;}
	header.on nav .gnb>ul>li>ul {opacity:1;}
	header.on .asideWrap {}
	header.on .asideWrap a+a {border-color:#999; color:#fff;}
	header.on .asideWrap a.active {}
}

/* ************************ 배율 130%~160% 대응 중간 구간 완화 조건 설정 ************************ */
@media screen and (min-width: 1200px) and (max-width: 1550px) {
	header .headerWrap h1 a img { height:40px; } /* 왼쪽 로고 폭 살짝 수축해 공간 확보 */
	nav .gnb { gap: 15px; padding-right: 20px; } /* 바깥 여백 및 메뉴 그룹 간격 축소 */
	nav .gnb .dep1 { gap: 12px; }                /* 대메뉴 상호 간격 축소 */
	nav .gnb .dep1>li>a { font-size: 14px; }     /* 대메뉴 텍스트 크기 축소 */
	
	/* [보정 완료] 자식 카테고리 글자 크기를 13px로 줄이고 세로 간격(gap)을 6px로 조밀하게 좁혀 가로 겹침을 방지합니다. */
	nav .gnb .dep2 { gap: 6px; }
	nav .gnb .dep2>li a { font-size: 13px; }
}

/* ************************ 태블릿 이하(~1249) ************************ */
@media screen and (max-width: 1199px) {
	
	/*헤더*/
	header { position:absolute; left:0; top:0; width:100%; z-index:999; height:70px;} 
	header .headerWrap { background:#232323; } 
	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 .gnbView img {} 
	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:32px;}
	header .headerWrap h1 a img.off {display:none;}
	
	/*gnb*/
	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_base2); } 
	nav .gnb .dep1>li.on>a { background:var(--c_base2); 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_base2); font-weight:700; } 
	nav .gnb .dep2>li.on a span { color:var(--c_base2); } 
}

/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
}