/*header*/
#header{
	position:fixed;
	z-index:200;
	width:100%;
	height:6rem;
	background:rgba(0, 0, 0, 0);
	border-bottom: 1px solid #ffd585;
	transition: all .3s ease-in-out;
}
#header.header_scroll{background:#ffbd47;}
#header .header_inner{
	position: relative;
	height: inherit;
}
#header h1{
	z-index:30;
	position:absolute;
	top:50%;
	left:3rem;
	transform: translateY(-50%);
}
#header h1 > a{display:block;}
.gnb{
	z-index:15;
	position:relative;
	left:0; top:0;
	align-items: center;
	justify-content: flex-end;
	width:100%; height: inherit;
}
.gnb a{
	display: inline-block;
	padding:0 3rem;
	font-size: 2.2rem;
	font-weight: 500;
	color: #222;
}
@media(min-width:576px){
	.gnb{display:flex !important;}
	div.circle.expand{display:none !important;}
}
@media(max-width:991.98px){
	#header{height:8.5rem;}
}
@media(max-width:767.98px){
	#header{height:7.5rem;}
	#header h1 > a img{width: 135px !important;}
	.gnb a {padding: 0 2rem;}
}
@media(max-width:575.98px){
	#header{height:7rem;}
	#header h1{left: 2rem;}
	#header h1 > a img{width: 125px !important;}
}

/*모바일 메뉴*/
div.burger {
	height: 30px;
	width: 26px;
	position: relative;
	cursor: pointer;
	z-index:10;
}
div.x,
div.y,
div.z {
	position: absolute; margin: auto;
	top: 4px;
	background: #422d17;
	border-radius:2px;
	-webkit-transition: all 200ms ease-out;
	   -moz-transition: all 200ms ease-out;
		-ms-transition: all 200ms ease-out;
		 -o-transition: all 200ms ease-out;
			transition: all 200ms ease-out;
}
div.x, div.y, div.z { height: 3px; width: 26px; }
div.y{top: 14px;}
div.z{top: 24px;}
div.coll{
	top: 15px;
	background:#422d17;
	-webkit-transition: all 70ms ease-out;
	   -moz-transition: all 70ms ease-out;
		-ms-transition: all 70ms ease-out;
		 -o-transition: all 70ms ease-out;
			transition: all 70ms ease-out;
}


div.rotate30{
	-ms-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-webkit-transition: all 50ms ease-out;
	   -moz-transition: all 50ms ease-out;
		-ms-transition: all 50ms ease-out;
		 -o-transition: all 50ms ease-out;
			transition: all 50ms ease-out;
}
div.rotate150{
	-ms-transform: rotate(150deg);
	-webkit-transform: rotate(150deg);
	transform: rotate(150deg);
	-webkit-transition: all 50ms ease-out;
	   -moz-transition: all 50ms ease-out;
		-ms-transition: all 50ms ease-out;
		 -o-transition: all 50ms ease-out;
			transition: all 50ms ease-out;
}

div.rotate45{
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
div.rotate135{
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	-webkit-transition: all 100ms ease-out;
	   -moz-transition: all 100ms ease-out;
		-ms-transition: all 100ms ease-out;
		 -o-transition: all 100ms ease-out;
			transition: all 100ms ease-out;
}
div.circle{
	z-index:10;
	width:50%; height:3000px;
	position:absolute;
	top: -1500px;
	right:-100%;
	background:#ffbd47;
	transition: all .5s ease-in-out;
}
div.circle.expand{right:0;}

@media(max-width:575.98px){
	#header .gnb_side{
		z-index:30;
		position:absolute;
		top:50%; right:2rem;
		transform: translateY(-50%);
	}
	.gnb{
		padding-top: 12rem;
		visibility:hidden;
		height:0;
		overflow:hidden;
		flex-direction: column;
		width: 50%;
		margin-left: auto;
	}
	.gnb.open{
		visibility:visible;
		height:auto;
		opacity: 1;
		transition: all .5s ease-in-out .5s;
	}
	.gnb a{
		padding: 1rem 0;
	}
}