/* ************************ 데스크탑 (1249~) ************************ */
@media screen and (min-width: 1200px), print {
	
	/*헤더**/
	header {z-index:999; position:absolute; width:100%; min-width:1200px; top:0; left:0;} 
	header:before {position:absolute; left:0; top:100px; content:""; width:100%; height:1px; background:#eee;}
		
	header .headerWrap {width:90vw; margin:0 auto; position:relative; } 

	header .headerWrap h1 {position:absolute; z-index:99999; left:0; top:20px; } 
	header .headerWrap h1 a { } 
	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; gap:13px; height: 45px; position: absolute; right:0; top:24px; z-index: 9; align-items: center;}
	header .asideWrap a {height:45px; display:flex; align-items:center; color: #000;font-size:var(--fs16);font-weight: 300;line-height: normal;}
    header .asideWrap .loginBtn {border-radius: 15px; border: 2px solid #101828; box-shadow: 3px 3px 0 0 #101828; height:45px; padding:0 20px; padding-left:45px; background:#fff url(../../images/common/icon_login.svg)18px center no-repeat;}
	
	header .asideWrap .loginBtn:hover { transform:translate(2px, 2px); box-shadow:1px 1px 0 #111a2b; }
	
	header .asideWrap .logoutBtn {}
	header .asideWrap .homeBtn {width:30px; height:30px; background:#fff url(../../images/common/icon_home.svg) center no-repeat;}
	
    header .asideWrap .joinBtn {border-radius: 15px; border: 2px solid #101828; box-shadow: 3px 3px 0 0 #101828; height:45px; padding:0 20px;}
	header .asideWrap .joinBtn:hover { transform:translate(2px, 2px); box-shadow:1px 1px 0 #111a2b; }
    header .asideWrap .findBtn {}
	
	
	/* gnb */
	nav {height:100px; position:relative; margin:0 auto; overflow:hidden; transition:all .3s;}
	nav .gnb {width:100%; display:flex; justify-content:center; align-items: center; gap: 50px; background:#fff;}
	nav .gnb .dep1 {height:100px; display:flex; gap:4vw;}
	nav .gnb .dep1>li {padding:30px 0; display:flex; flex-direction:column;}
	nav .gnb .dep1>li>a { color:#000; 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;padding:35px 0 50px; top:100px; 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 .dep1>li.on>a:after {background:var(--c_base1);}
	nav .gnb .dep1>li.on>a {color:var(--c_base1);}
	
	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:100px; 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:#fff;}
	header.on .navBg:after {opacity:1;transition:all .5s ease;}
	header.on nav {height:405px; 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 .loginBtn {background-image:url(../../images/common/icon_login.svg);}
	header.on .asideWrap a {color:#000;}
	
	
}

/* ************************ 태블릿 이하(~1249) ************************ */
@media screen and (max-width: 1199px) {
	.pc {display: none;}
	
	/*헤더*/
	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 .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:50px;}
	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:10px; 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 .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:16px; 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:16px; 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 .headerWrap h1 a img { height:35px;}
	
}