/*header*/
#header{
	position:fixed;
	z-index:200;
	width:100%;
	background:var(--main);
	min-height:8rem;
	transition: all .3s;
}


/* 로고 */
#header h1{
	position:absolute;
	top:2.1rem;
	left:3rem;
	z-index:30;
}
#header h1 > a{display:block;}



/* 메뉴 */
.gnb{
	position:relative;
	top:0; left:0;
	width:100%;
	text-align:center;
	z-index:15;
}
.gnb > .gnb_container{
	display:inline-block;
	vertical-align:top;
}
.gnb > .gnb_container > ul > li{float:left; margin: 0 1rem;}
.gnb > .gnb_container > ul > li > a{
	display:block;
	min-width: 8rem;
	padding:2.65rem 3.2rem;
	font-size:1.8rem;
	color:#fff;
}
.gnb > .gnb_container > ul > li > ul{
	position:relative;
	top:-1rem;
	display:none;
}
.gnb > .gnb_container > ul > li > ul > li:last-child{padding-bottom:3.5rem;}
.gnb > .gnb_container > ul > li > ul > li > a{
	display:block;
	padding:1rem;
	font-size:1.6rem;
	color:#fff;
	font-weight:300;
}
.gnb > .gnb_container > ul > li > ul > li > ul{
	list-style: none;
	padding: 0;
	display: none;
}
.gnb > .gnb_container > ul > li > ul > li > ul > li a{
	display:block;
	padding:5px;
	font-size:1.4rem;
	color:#fff;
	font-weight:300;
}
@media(max-width:1700px){
	#header h1 img{max-width: 180px !important;}
	.gnb{margin-left: 5%;}
}
@media(max-width:1500px){
	.gnb{display: none !important;}
}




/* 올메뉴 버튼 */
.gnb_side{
	display:flex;
	align-items: center;
	position:absolute;
	top:2.9rem;
	right:4rem;
	z-index:30;
}
.gnb_side .all_menu_btn button{
	position:relative;
	width:2.8rem;
	height:2.2rem;
	padding:0;
	border:0;
	background:none;
	outline:none;
}
.gnb_side .all_menu_btn button > span{
	position:absolute;
	right: 0;
	height:2px;
	background:#fff;
	transition:all .3s
}
.gnb_side .all_menu_btn button > span:nth-child(1){
	top: 0; width: 100%;
}
.gnb_side .all_menu_btn button > span:nth-child(2){
	top: 50%; width: 70%;
	transform: translateY(-50%);
}
.gnb_side .all_menu_btn button > span:nth-child(3){
	bottom: 0; width: 40%;
}
.gnb_side .all_menu_btn button:hover > span{width:100% !important;}




/*all_menu*/
#gnb_all_menu{
	display:none;
	position:fixed;
	top:0;
	width:100%; height:100%;
	padding:5rem;
	padding-top:18rem;
	background:var(--main);
	overflow:hidden;
	z-index:50;
}
#gnb_all_menu .all_menu_hide{
	position:absolute;
	left:50%;
	top:-10rem;
	transform:translateX(-50%);
	background:none;
	border:none;
	outline: none;
	color:#fff;
	font-size:4rem;
	transition: all .8s ease .7s;
}
#header.all-menu-open #gnb_all_menu .all_menu_hide{
	top:3rem;
}
#gnb_all_menu .cate_container{
	padding:0px 4rem;
}
#gnb_all_menu .cate_container > ul{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
	gap:6rem 4rem;
}
#gnb_all_menu .cate_container > ul > li{
	width:calc((100% / 4) - 3rem);
	padding:1rem;
	opacity:0;
	transform: translateY(-5rem);
	-webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	-moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	-ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	-o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li{
	opacity:1;
	transform: translateY(0);
	-webkit-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	-moz-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	-ms-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	-o-transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
	transition: all 500ms cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(1){
	transition-delay: 0.2s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(2){
	transition-delay: 0.3s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(3){
	transition-delay: 0.4s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(4){
	transition-delay: 0.5s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(5){
	transition-delay: 0.6s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(6){
	transition-delay: 0.7s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(7){
	transition-delay: 0.8s;
}
#header.all-menu-open #gnb_all_menu .cate_container > ul > li:nth-of-type(8){
	transition-delay: 0.9s;
}
#gnb_all_menu .cate_container > ul > li > a{
	color:#fff;
	font-size:2.5rem;
	font-weight:600;
}
#gnb_all_menu .cate_container > ul > li > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding-top:3rem;
	padding-left:1rem;
}
#gnb_all_menu .cate_container > ul > li > ul > li > a{
	color:#fff;
	display:block;
	padding:5px 3px;
	font-size:1.8rem;
}
@media(max-width:1199.98px){
	#gnb_all_menu {
		padding: 3rem 0;
		padding-top: 15rem;
	}
}
@media(max-width:991.98px){
	#header h1{left: 2rem;}
	.gnb_side{right:2rem;}
	#gnb_all_menu{padding-top: 10rem;}
	#gnb_all_menu .cate_container > ul{
		display: block;
		text-align:center;
	}
	#gnb_all_menu .cate_container > ul > li{width: 100%;}
	#gnb_all_menu .cate_container > ul > li > a{display:block;}
	#gnb_all_menu .cate_container > ul > li > ul{
		padding:0;
		display:none;
	}
	#gnb_all_menu .cate_container > ul > li > ul > li{display: inline-block;}
	#gnb_all_menu .cate_container > ul > li > ul > li > a{
		padding: 10px;
		font-size: 2rem;
	}
}