/***header***/

/*scroll_bar*/
.scroll_progress {
	width: 100%;
	height: 3px;
	background: #f6f6f6;
	position: fixed;
	z-index: 100;
}
.progress {
	height: 3px;
	background: #1fb1c7;
	width: 0%;
}

/*menu*/
.gnb{
	width:200px;
	position: absolute;
	top:100px;
	left:100px;
	z-index: 10;
}
.gnb li{
	transform-style: preserve-3d;
}
.gnb li a{
	display: block;
	position: relative;
	height: 45px;
	line-height: 45px;
}

.gnb li span.gnb_kr{
	position: absolute;
	top:0;
	left:0;
	transform-style: preserve-3d;
	transition: 0.3s;
	transform: rotateX(0deg) rotateY(0px);
	transform-origin: top;
}
.gnb li.active a span.gnb_kr,
.gnb li a:hover span.gnb_kr{
  transform: rotateX(90deg) translateY(-10px);
}

.gnb li span.gnb_eng{
	text-transform: uppercase;
	position: absolute;
	top:0;
	left:0;
	transform-style: preserve-3d;
	transition: 0.3s ease;
	transform: rotateX(90deg) translateY(50px);
	transform-origin: bottom;
	color:#222;
	font-size:35px;
}
.gnb li.active a span.gnb_eng,
.gnb li a:hover span.gnb_eng {
  transform: rotateX(0deg) translateY(0px);
  color:#1fb1c7
}

.util{
	position: fixed;
	right:100px;
	bottom:100px;
	text-align: right;
	z-index: 10;
}
.util a{
	color:#1fb1c7;
}

/***footer***/
#footer{
	text-align: center;
	position: relative;
	background:#222;
	color:#fff;
}
.f_menu{
	position: absolute;
	right:50px;
	bottom:50px;
	text-align: right;
}
.f_menu a{
	color:#1fb1c7;
}
.f_info span{
	display: block;
}
.copy{
	position:absolute;
	bottom:50px;
	left:50px;
}