#gnb nav ul {
	list-style:none;
	padding: 0px;
}

button {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	background-color:transparent;
	border:0 none;
	font-size:16px;
	font-weight:300;
	font-family:Noto Sans KR,sans-serif;
}

button#gnbBtn:focus, #gnb button { 	
	border: none;
	outline:none;
}

html,body {
	font-family:Noto Sans KR,sans-serif;
	font-size:16px;
	font-weight:300;
	color:#808285;
	word-break:keep-all;
	line-height:1
}

#header {
	width: 100%;
	position: fixed;
	background-color: #fff;
	border-bottom: 1px solid #dadada;
	z-index: 1000;
}

#header:after {
	width:100%;
	height:100%;
	position:absolute;
	left:100%;
	top:0;
	background-color: #EF621A;
	display:block;
	content:"";
	z-index:-1;
	opacity:0;
	filter:alpha(opacity=0);
	-webkit-transition:all .2s ease;
	-moz-transition:all .2s ease;
	-o-transition:all .2s ease;
	-ms-transition:all .2s ease
}

#header .navbar-header {
    padding: 0 4%;
}

#header .navbar-header h1 {
	width:8.05rem;
	float:left;
	margin:1.3rem 0 0
}

#header .navbar-header h1 img {
	vertical-align:middle
}

#header .navbar-header #gnb {
	width:100%;
	height:100%;
	position:fixed;
	top: 3.8rem;
	right:-100%;
	z-index:500
}

#header .navbar-header #gnb .gnb_wrap {
	width:100%;
	height:calc(100% - 3.8rem);
	position:absolute;
	background-color:#fff;
	right:0;
	overflow-y:scroll;
	box-sizing:border-box
}

#header .navbar-header #gnb nav {
	padding:1rem 0 0
}

#header .navbar-header #gnb nav h2 {
	text-indent:-9999px;
	height:0;
	overflow:hidden
}

#header .navbar-header #gnb nav .depth01>li {
	width:100%;
	border-bottom:1px solid #dadada;
	-webkit-transform:translate(500px, 0);
	-moz-transform:translate(500px, 0);
	-ms-transform:translate(500px, 0);
	-o-transform:translate(500px, 0);
	transform:translate(500px, 0);
	box-sizing:border-box
}

#header .navbar-header #gnb nav .depth01>li button {
	width:100%;
	color:#222;
	font-size:1.3rem;
	line-height:1.6rem;
	font-family:Exo,sans-serif;
	padding:15px 10%;
	text-align:left;
	position:relative;
	font-weight:600;
}

#header .navbar-header #gnb nav .depth01>li button span {
	display:inline-block;
	padding:.15rem .35rem;
	position:relative;
	z-index:10;
	margin:0 0 0 -.35rem
}

#header .navbar-header #gnb nav .depth01>li button span:after {
	width:0;
	height:.6rem;
	display:block;
	content:"";
	background-color:#fc0;
	bottom:0;
	position:absolute;
	left:0;
	z-index:-1;
	-webkit-transition:width .2s ease;
	-moz-transition:width .2s ease;
	-o-transition:width .2s ease;
	-ms-transition:width .2s ease
}

#header .navbar-header #gnb nav .depth01>li button:after,#header .navbar-header #gnb nav .depth01>li button:before {
	width:1.5rem;
	height:2px;
	display:block;
	content:"";
	background-color:#555;
	right:4%;
	position:absolute;
	top:50%
}

#header .navbar-header #gnb nav .depth01>li button:after {
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
	transform:rotate(90deg);
	-webkit-transition:transform .3s ease;
	-moz-transition:transform .3s ease;
	-o-transition:transform .3s ease;
	-ms-transition:transform .3s ease
}

#header .navbar-header #gnb nav .depth01>li.active span:after,#header .navbar-header #gnb nav .depth01>li.on span:after {
	width:100%
}

#header .navbar-header #gnb nav .depth01>li.on button:before {
	margin:0
}

#header .navbar-header #gnb nav .depth01>li.on button:after {
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg)
}

#header .navbar-header #gnb nav .depth02 {
	background-color:#f8f8f8;
	border-top:1px solid #dadada;
	line-height:1.8rem;
	font-size:1.2rem;
	position:relative;
	display:none;
	box-sizing:border-box
}

#header .navbar-header #gnb nav .depth02 li {
	position:relative;
}

#header .navbar-header #gnb nav .depth02 li a {
	font-weight: 500;
	color: #555;
	width: 100%;
	display: inline-block;
	padding:.8rem 15%;
}

#header .navbar-header #gnb nav .depth02 li a:hover {
	color: #fff;
	background-color: #2C4696;
}

#header .navbar-header #gnb nav .depth02 li.active a {
	font-weight: 600;
	color: #555;
}

#header.active:after {
	left:0;
	opacity:1;
	filter:alpha(opacity=100)
}

#wrap {
	max-width:1024px;
	margin:0 auto
}


.menu-trigger,
.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}

.menu-trigger {
	position: relative;
	width: 25px;
	height: 23px;
	margin-top: 8px;
}

.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #222;
	border-radius: 4px;
}

.menu-trigger span:nth-of-type(1) {
	top: 0;
}

.menu-trigger span:nth-of-type(2) {
	top: 10px;
}

.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}

/* type-01 */
/* 중앙 라인이 고정된 자리에서 투명하게 사라지며 상하라인 회전하며 엑스자 만들기 */
.menu-trigger.active-1 span:nth-of-type(1) {
	-webkit-transform: translateY (10px) rotate (-45deg);
	transform: translateY(10px) rotate(-45deg);
}

.menu-trigger.active-1 span:nth-of-type(2) {
	opacity: 0;
}

.menu-trigger.active-1 span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}

/* type-02 */
/* 중앙 라인이 고정된 자리에서 투명하게 사라지며 상하라인  회전하며 엑스자 만들기 */
.menu-trigger.active-2 span:nth-of-type(1) {
	-webkit-transform : translateY(10px) rotate(-315deg);
	transform : translateY(10px) rotate(-315deg);
}
.menu-trigger.active-2 span:nth-of-type(2) {
	opacity : 0;
}
.menu-trigger.active-2 span:nth-of-type(3) {
	-webkit-transform : translateY(-10px) rotate(315deg);
	transform : translateY(-10px) rotate(315deg);
}

/* type-03 */
/* 메뉴 전체가 회전하면서 엑스자 버튼 만들기 */

.menu-trigger.active-3 {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}

.menu-trigger.active-3 span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}

.menu-trigger.active-3 span:nth-of-type(2) {
	-webkit-transform: translateY(0) rotate(45deg);
	transform: translateY(0) rotate(45deg);
}

.menu-trigger.active-3 span:nth-of-type(3) {
	opacity: 0;
}

/* type-04 */
/* 메뉴 전체가 회전하면서 엑스자 버튼 만들기 #2 */
.menu-trigger span.nthtype-04,
.menu-trigger.active-4 span:nth-of-type(3) {
	transition : none;
}
.menu-trigger.active-4 {
	-webkit-transform : rotateX(720deg);
	transform : rotateX(720deg);
}
.menu-trigger.active-4 span:nth-of-type(1) {
	-webkit-transform : translateY(10px) rotate(-45deg);
	transform : translateY(10px) rotate(-45deg);
}
.menu-trigger.active-4 span:nth-of-type(2) {
	-webkit-transform : translateY(0) rotate(45deg);
	transform : translateY(0) rotate(45deg);
}
.menu-trigger.active-4 span:nth-of-type(3) {
	opacity : 0;
}

/* type-05 */
/* 중앙 라인이 밖으로 빠지면서 상하라인 엑스자 만들기 */
.menu-trigger.active-5 span:nth-of-type(1) {
	-webkit-transform : translateY(10px) rotate(-45deg);
	transform : translateY(10px) rotate(-45deg);
}
.menu-trigger.active-5 span:nth-of-type(2) {
	left : 50%;
	opacity : 0;
	-webkit-animation : active-menu-bar05 .8s forwards;
	animation : active-menu-bar05 .8s forwards;
}
@-webkit-keyframes active-menu-bar05 {
	100% {
		height: 0;
	}
}
@keyframes active-menu-bar05 {
	100% {
		height: 0;
	}
}
.menu-trigger.active-5 span:nth-of-type(3) {
	-webkit-transform : translateY(-10px) rotate(45deg);
	transform : translateY(-10px) rotate(45deg);
}

/* type-06 */
/* 중앙 라인이 밖으로 멀리 날아가듯 빠지면서 상하라인 엑스자 만들기 */
.menu-trigger.active-6 span:nth-of-type(1) {
	-webkit-transform : translateY(10px) rotate(-45deg);
	transform : translateY(10px) rotate(-45deg);
}
.menu-trigger.active-6 span:nth-of-type(2) {
	left : 200%;
	opacity : 0;
	-webkit-transform : translateY(10px);
	transform : translateY(10px);
	-webkit-animation : active-menu-bar06 .8s forwards;
	animation : active-menu-bar06 .8s forwards;
}
@-webkit-keyframes active-menu-bar06 {
	100% {
		height : 0;
	}
}
@keyframes active-menu-bar06 {
	100% {
		height : 0;
	}
}
.menu-trigger.active-6 span:nth-of-type(3) {
	-webkit-transform : translateY(-10px) rotate(45deg);
	transform : translateY(-10px) rotate(45deg);
}

/* type-07 */
/* 라인이 하나로 합쳐졌다가 엑스자 만들기 */
.menu-trigger.type7 span:nth-of-type(1) {
	-webkit-animation : menu-bar07-01 .75s forwards;
	animation : menu-bar07-01 .75s forwards;
}
@-webkit-keyframes menu-bar07-01 {
	0% {
		-webkit-transform : translateY(10px) rotate(45deg);
	}
	50% {
		-webkit-transform : translateY(10px) rotate(0);
	}
	100% {
		-webkit-transform : translateY(0) rotate(0);
	}
}
@keyframes menu-bar07-01 {
	0% {
		transform : translateY(10px) rotate(45deg);
	}
	50% {
		transform : translateY(10px) rotate(0);
	}
	100% {
		transform : translateY(0) rotate(0);
	}
}
.menu-trigger.type7 span:nth-of-type(2) {
	transition : all .25s .25s;
	opacity : 1;
}
.menu-trigger.type7 span:nth-of-type(3) {
	-webkit-animation : menu-bar07-02 .75s forwards;
	animation : menu-bar07-02 .75s forwards;
}
@-webkit-keyframes menu-bar07-02 {
	0% {
		-webkit-transform : translateY(-10px) rotate(-45deg);
	}
	50% {
		-webkit-transform : translateY(-10px) rotate(0);
	}
	100% {
		-webkit-transform : translateY(0) rotate(0);
	}
}
@keyframes menu-bar07-02 {
	0% {
		transform : translateY(-10px) rotate(-45deg);
	}
	50% {
		transform : translateY(-10px) rotate(0);
	}
	100% {
		transform : translateY(0) rotate(0);
	}
}
.menu-trigger.active-7 span:nth-of-type(1) {
	-webkit-animation : active-menu-bar07-01 .75s forwards;
	animation : active-menu-bar07-01 .75s forwards;
}
@-webkit-keyframes active-menu-bar07-01 {
	0% {
		-webkit-transform : translateY(0) rotate(0);
	}
	50% {
		-webkit-transform : translateY(10px) rotate(0);
	}
	100% {
		-webkit-transform : translateY(10px) rotate(45deg);
	}
}
@keyframes active-menu-bar07-01 {
	0% {
		transform : translateY(0) rotate(0);
	}
	50% {
		transform : translateY(10px) rotate(0);
	}
	100% {
		transform : translateY(10px) rotate(45deg);
	}
}
.menu-trigger.active-7 span:nth-of-type(2) {
	opacity : 0;
}
.menu-trigger.active-7 span:nth-of-type(3) {
	-webkit-animation : active-menu-bar07-02 .75s forwards;
	animation : active-menu-bar07-02 .75s forwards;
}
@-webkit-keyframes active-menu-bar07-02 {
	0% {
		-webkit-transform : translateY(0) rotate(0);
	}
	50% {
		-webkit-transform : translateY(-10px) rotate(0);
	}
	100% {
		-webkit-transform : translateY(-10px) rotate(-45deg);
	}
}
@keyframes active-menu-bar07-02 {
	0% {
		transform : translateY(0) rotate(0);
	}
	50% {
		transform : translateY(-10px) rotate(0);
	}
	100% {
		transform : translateY(-10px) rotate(-45deg);
	}
}