@charset 'utf-8';
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

#nav a span,#nav .inside,#nav li,#navbutton a,#navbutton span{
	transition:all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	-webkit-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-moz-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-o-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-ms-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
}

#navbutton a{cursor:pointer;height:48px;position:absolute;right:50px;text-indent:-999em;top:65px;width:52px;z-index:99999;background:#333; }
#navbutton span{background:#bbb;height:4px;left:11px;position:absolute;top:12px;width:30px;}
#navbutton span + span{top:22px;}
#navbutton span + span + span{top:32px;}
#navbutton a.on span:first-child{
	transform:translate3d(0, 6px, 0) rotate(225deg);
	-webkit-transform:translate3d(0, 6px, 0) rotate(225deg);
	-moz-transform:translate3d(0, 6px, 0) rotate(225deg);
	-o-transform:translate3d(0, 6px, 0) rotate(225deg);
	-ms-transform:translate(0, 6px) rotate(45deg);
}
#navbutton a.on span+span{top:22px;opacity:0;
	transform:translate3d(0, 150px, 0) rotate(-720deg);
	-webkit-transform:translate3d(0, 150px, 0) rotate(-720deg);
	-moz-transform:translate3d(0, 150px, 0) rotate(-720deg);
	-o-transform:translate3d(0, 150px, 0) rotate(-720deg);
}
#navbutton a.on span+span+span{top:25px;opacity:1;
	transform:translate3d(0, -6px, 0) rotate(-225deg);
	-webkit-transform:translate3d(0, -6px, 0) rotate(-225deg);
	-moz-transform:translate3d(0, -6px, 0) rotate(-225deg);
	-o-transform:translate3d(0, -6px, 0) rotate(-225deg);
	-ms-transform:translate(0, -6px) rotate(-45deg);
}

#nav{position:fixed;left:-100%;top:0;width:100%;height:100%;z-index:9999;visibility:hidden;}
#nav .back{position:absolute;right:-100%;top:0;width:100%;height:100%;background:#000;opacity:0;}
#nav .back:before{position:absolute;right:0;top:0;width:100%;height:100%;content:'';background:#000;display:block;opacity:0.4;z-index:9999;}
#nav .inside{position:absolute;right:-100%;top:0;width:300px;height:100%;margin-right:-300px;background:#333;z-index:3;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#nav nav{margin:111px 0;}
#nav a{display:block;font-size:17px;color:#878787;line-height:50px;color:#fff;text-align:left; margin-left:50px; text-decoration:none; }
#nav a:hover{color:#fff; text-decoration:none; }
#nav li{
	transform:translate3d(250px, 0px, 0px);
	-webkit-transform:translate3d(250px, 0px, 0px);
	-moz-transform:translate3d(250px, 0px, 0px);
	-o-transform:translate3d(250px, 0px, 0px);
	-ms-transform:translate3d(250px, 0px, 0px);
}

#nav dl{display:none;margin:0 auto 10px;}
#nav dt{font-size:0;line-height:0;visibility:hidden;}
#nav dd a{color:#ccc;font-size:15px;line-height:30px;text-align:left;}
#nav dd a:hover{color:#fff; text-decoration:none;}
#nav .on > a{text-decoration:none;}
#nav .on > a:hover{text-decoration:none;}
#nav .m1{
	transition-delay:0.035s;
	-webkit-transition-delay:0.035s;
	-moz-transition-delay:0.035s;
	-o-transition-delay:0.035s;
	-ms-transition-delay:0.035s;
}
#nav .m2{
	transition-delay:0.07s;
	-webkit-transition-delay:0.07s;
	-moz-transition-delay:0.07s;
	-o-transition-delay:0.07s;
	-ms-transition-delay:0.07s;
}
#nav .m3{
	transition-delay:0.14s;
	-webkit-transition-delay:0.14s;
	-moz-transition-delay:0.14s;
	-o-transition-delay:0.14s;
	-ms-transition-delay:0.14s;
}
#nav .m4{
	transition-delay:0.175s;
	-webkit-transition-delay:0.175s;
	-moz-transition-delay:0.175s;
	-o-transition-delay:0.175s;
	-ms-transition-delay:0.175s;
}
#nav .m5{
	transition-delay:0.21s;
	-webkit-transition-delay:0.21s;
	-moz-transition-delay:0.21s;
	-o-transition-delay:0.21s;
	-ms-transition-delay:0.21s;
}
#nav .m6{
	transition-delay:0.245s;
	-webkit-transition-delay:0.245s;
	-moz-transition-delay:0.245s;
	-o-transition-delay:0.245s;
	-ms-transition-delay:0.245s;
}
#nav .m7{
	transition-delay:0.28s;
	-webkit-transition-delay:0.28s;
	-moz-transition-delay:0.28s;
	-o-transition-delay:0.28s;
	-ms-transition-delay:0.28s;
}
#nav .m8{
	transition-delay:0.315s;
	-webkit-transition-delay:0.315s;
	-moz-transition-delay:0.315s;
	-o-transition-delay:0.315s;
	-ms-transition-delay:0.315s;
}

#nav.show{visibility:visible;z-index:999;}
#nav.show .back{opacity:0.7}
#nav.show .inside{margin-right:0;}
#nav.show .inside,#nav.show li{
	transform:translate3d(0, 0, 0);
	-webkit-transform:translate3d(0, 0, 0);
	-moz-transform:translate3d(0, 0, 0);
	-o-transform:translate3d(0, 0, 0);
	-ms-transform:translate3d(0, 0, 0);
}






@media all and (min-width:769px){
	
	#nav a{font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕",Dotum,"돋움",sans-serif;letter-spacing:0;}
	#nav a:hover{text-decoration:none;}
	#navbutton:hover span:first-child{
		transform:translate3d(0, -3px, 0) rotate(0deg);
		-webkit-transform:translate3d(0, -3px, 0) rotate(0deg);
		-moz-transform:translate3d(0, -3px, 0) rotate(0deg);
		-o-transform:translate3d(0, -3px, 0) rotate(0deg);
		-ms-transform:translate(0, -3px) rotate(0deg);
	}
	#navbutton:hover span+span+span{
		transform:translate3d(0, 3px, 0) rotate(0deg);
		-webkit-transform:translate3d(0, 3px, 0) rotate(0deg);
		-moz-transform:translate3d(0, 3px, 0) rotate(0deg);
		-o-transform:translate3d(0, 3px, 0) rotate(0deg);
		-ms-transform:translate(0, 3px) rotate(0deg);
	}

    .fixed-icon { position: fixed; right: 24px; bottom: 100px; z-index: 10; }
}