@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Play);
@import url(http://fonts.googleapis.com/css?family=Monoton);

/*    Reset CSS  */
* { margin:0;  padding:0; }
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#bbb;}
img { border:0;}
body { position:fixed;  width:100%; height:100%; background:#111;}

.vid {width:100%; height:100%; position:fixed; top:-60px; left: 0px; opacity:0.9;}
.vid video {width:100%; min-width:1600px;}

h1 {position:fixed; top:40px; left:40px; z-index:10;}
h1 img {width: 280px; height: auto;}
header {width:700px; height: 100%; background:linear-gradient(-45deg,#e6fc55,#b9fb05,#97e031);
		transform:skewX(-40deg);position:fixed;top:0px;left:-420px;z-index:9;
}

/* 1depth */
#gnb {width:220px; position:absolute; top: 150px; right:0px;}
#gnb>li {position:relative;}
#gnb>li>a {display:block; width:220px; height: 50px;font:bold 18px/3 play; color:#222;
			box-sizing:border-box; padding-right:40px; text-align:right;
}
#gnb>li.on>a {background:#111; color:#fff;}
#gnb>li:hover>a {background:#111; color:#fff;}
#gnb em {display:inline-block; transform:skewX(40deg)!important;}
#gnb em i {margin-right:20px;}

/* 2depth */
#gnb ul {position:absolute; left: 0px; top: 0px; opacity:0; transition: all 0.4s;}
#gnb>li:hover ul {opacity:0.8; left: 205px;}
#gnb ul a {display:block;width:150px;height:40px; background:#222; border-bottom:1px solid #b9fb05;
font: bold 16px/2.5 arial; color:#fff;box-sizing:border-box;padding-left:50px;margin-bottom:3px;transition:all 0.5s;
}
#gnb ul a:hover {background:#b9fb05; color:#333;}

#gnb>li.on ul {opacity:0.8;left:205px; top:-10px;}
#gnb li.on ul a {background:#444;opacity:1.0;}
#gnb li.on ul a:hover {background:#b9fb05;color:#333;}

/* SNS */
#sns {position:fixed;top:60px;right:50px;}
#sns li {float:left;margin-right:30px;}
#sns .fa {font-size:25px; color:#b9fb05;opacity:0.5;transform:scale(1);transition:all 0.5s;}
#sns .fa:hover {opacity:1; transform:scale(1.4);}

/* 텍스트 박스 */
.txtBox {width:340px;height:280px;position:fixed; top:200px;right:70px;}
.txt {position:absolute; top:200px; right:0; font-size:34px;font-family:play; color:#bbb; letter-spacing:-2px;}
.txt b {font:bold 34px arial; color:#b9fb05; margin-left: 20px;} 
.tit {position:absolute;top:0px;right:0px;font-size:160px;color:#b9fb05;font-family:Monoton;letter-spacing:-1px;}
.tit em {font-size:50px;font-family:play; color:#fff;}

/* contents */
#side {width:800px; height:100%; position: fixed; bottom:0;right:-800px;background:#111;
	opacity:0.5;transform:skewX(-40deg);transition:all 0.5s;
}
#side:hover {right:-500px;opacity:0.8;}
#side .con {width:400px; height:100%; position:absolute;left:150px;bottom:0;
	background:#000;box-sizing:border-box; padding:10px; transition: all 1s;
}
#side .con:hover {left:50px;}

#side .con p {width:300px; height:100px; position:absolute; left: 50px;}
#side .con p em {display:inline-block; font:bold 16px/1.7 arial; color:#a0bd50; transform:skewX(40deg);}
#side .con p img {width:300px; height:70px; opacity:0.3; transition:a;; 0.5s;}
#side .con p img:hover {opacity:1;}
#side .con p:nth-child(1) {bottom: 270px; transform:translateX(200px);transition:all 0.4s;}
#side .con p:nth-child(2) {bottom: 160px; transform:translateX(200px);transition:all 0.8s;}
#side .con p:nth-child(3) {bottom: 50px; transform:translateX(200px);transition:all 1.2s;}
#side:hover .con p {transform:translateX(0px);}

/* 자동 롤링 버튼 */
#side .btnContents {width:150px; height:50px; position:absolute; bottom:40px; left:100px; color:#b9fb05;transform:skewX(40deg);}
#side:hover .btnContents {left:700px;}
.btnContents i {font-size:60px;position:absolute; bottom:0;right:0;opacity:1;}
.btnContents i:nth-child(1) {animation:ani linear 1.5s 0s infinite;}
.btnContents i:nth-child(2) {animation:ani linear 1.5s 0.5s infinite;}
.btnContents i:nth-child(3) {animation:ani linear 1.5s 1.0s infinite;}

@keyframes ani{ 
	0%{right:0px; transform:scale(1);opacity:1;}
	100%{right:100px; transform:scale(1.5);opacity:0;}
}