@charset "utf-8";

#HeaderBack{width:100%;height:75px}
#Header{background-color:#fff;height:75px;color:#1e1d1d;font-family:'GF-L';transition:0.3s;overflow:hidden;position:relative;position:fixed;top:0;width:100%;border-bottom:1px solid #eaeaea;z-index:500;box-shadow:0px 1px 8px 0px #ededed;}
#HeaderIn{width:1200px;height:75px;display:table;margin:0 auto}
.HeaderLogoWrap{width:20%;display:table-cell;vertical-align:middle}
.HeaderMenuWrap{width:100%;display:flex;vertical-align:middle;justify-content:center;}
.HeaderLogoImg{max-height:70px;cursor:pointer;margin-bottom:-1px;}

/*PC*/
.HeaderMenu{display:table;text-align:center;height:75px}
.HeaderMenu > div{display:table-cell;height:75px}
.HdMenu{padding:0 50px;position:relative}
.HdMenu1Dep{font-family:'GF-M';cursor:pointer;font-size:17px;font-weight:bold;height:100%;text-align:center;display:flex;align-items:center;justify-content:center}
.HdQAButton{background-color:#46c3bb;border:none;color:#fff;border-radius:100px;width:100px;height:35px;font-family:'GF-L';font-weight:bold;font-size:14px;cursor:pointer}
.HdMenuBtnWrap{text-align:right}
.HdMenuBtnWrap:last-child{padding-right:0}
.HdMenu2Dep{position:absolute;top:100%;left:0;width:100%;padding:10px 0;display:none}
.HdMenu2DepLine{color:#898989;font-size:14px;padding:5px 0;min-height:30px;box-sizing:border-box;font-family:'nt-L';text-align:center;cursor:pointer;transition:0.3s}
.HdMenu2DepLine:hover{color:#000;font-family:'nt-L'}
.HdBtnSubWrap{width:100px;right:0;left:auto}

/*MOBILE*/
.HeaderMoMenu{cursor:pointer;width:30px;float:right;display:none}
.HeadCateBtn {margin-top:5px;position:relative;z-index:100}
.HeadCateBtn,.HeadCateBtn span {display: inline-block;transition: all .2s;box-sizing: border-box; }
.HeadCateBtn {position: relative;width: 30px;height: 20px;}
.HeadCateBtn span {position: absolute;left: 0;width: 100%;height: 2px;background-color: #000;}
.HeadCateBtn span:nth-of-type(1) {top: 0;}
.HeadCateBtn span:nth-of-type(2) {top: 0px;bottom:0;margin:auto}
.HeadCateBtn span:nth-of-type(3) {bottom: 0;}
.HeadCateBtn.HeadCateBtnActive span:nth-of-type(1) {-webkit-transform: translateY (10px) rotate (-45deg);transform: translateY(10px) rotate(-45deg);}
.HeadCateBtn.HeadCateBtnActive span:nth-of-type(2) {opacity: 0;}
.HeadCateBtn.HeadCateBtnActive span:nth-of-type(3) {-webkit-transform: translateY(-8px) rotate(45deg);transform: translateY(-8px) rotate(45deg);}

.HeaderMoCate{z-index:90;width:100%;height:100vh;position:fixed;top:0;left:0%;background-color:#fff;border-left:1px solid #eaeaea;overflow-y:auto;display:none;}
.HeaderMoCateIn{margin:0 50px;margin-top:80px}
.HeaderMoMenu1Dep{font-family:'GF-M';font-size:22px;margin-bottom:10px;cursor:pointer;}
.HeaderMoMenu2Dep{margin-bottom:40px;cursor:pointer}
.HeaderMoMenuSub{font-family:'NanumSquareR';font-size:17px;color:#888;margin:0 10px;margin-bottom:5px;display:inline-block;transition:0.3s}
.HeaderMoMenuSub:hover{color:#000;}

.HeaderMoCateBack{opacity:0;transition:0.2s;position:fixed;width:200%;height:100vh;background:rgba(0,0,0,0.5);right:100%;top:0;z-index:49;}
.HeaderMoCateBackActive{right:0;display:block;opacity:1;transition:0s}
.HeaderMoCateBackClose{opacity:0;transition:0s}

@keyframes HeaderMoCateDisplay{
	0% {left:100%;}
	100% {left:15%;display:block;opacity:1}
}

@media screen and (min-width:999px){
	#Header:hover::after{content:"";position:absolute;top:75px;left:0;width:100%;border-bottom:1px solid #eaeaea;height:1px}
	#Header:hover .HdMenu2Dep{display:block}
	.HeaderMoCate{display:none !important;}
	.HeaderMoCateBack{display:none !important}
	.HeaderMoCateDisplay{display:none !important}
	
}
@media screen and (max-width:1300px){
	#HeaderIn{width:90%}
	.HdMenu{padding:0 25px}
}
@media screen and (max-width:1000px){
	.HeaderMenu{display:none}
	.HeaderMoMenu{display:block}
	.HeaderMenuWrap{width:80%;display:table-cell;vertical-align:middle}
}
@media screen and (max-width:768px){	/* 모바일 */
	#Header{height:50px;}
	#HeaderIn{height:50px;}
	#HeaderBack{height:50px;}
	.HeaderLogoImg{max-height:30px;}
}