@import url(http://fonts.googleapis.com/css?family=Play);
@import url(http://fonts.googleapis.com/css?family=Monoton);

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

/* 배경동영상 - full screen */
.vid{width: 100%;height: 100%;position: fixed;top: -60px;left: 0px;opacity: 0.9;}
.vid video{
  width: 100%; 
  min-width: 1600px; /* 1600px이상 */
}

/* Nike Air Max 로고 */
h1{position: fixed;top:40px;left:40px;z-index:10;}
h1 img{width: 280px;height: auto;}
header{width:700px;height: 100%;position:fixed;background: greenyellow; transform: skewX(-40deg);left:-420px;}

/* 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: black; color: white;}
#gnb>li:hover>a {background: #5a5a5a; color: white;}
#gnb em {display: inline-block; transform: skewX(40deg);}  /* 박스형태, 글자위치 정위치 */
#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: 0.7;} */

/* 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:0px; 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', cursive; letter-spacing:-1px;}
.tit em { font-size:50px; font-family:play; color:#fff;}

/* contents 레이아웃 */
#side { width:800px; height:100%; position:fixed; bottom:0px; 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:0px; background:#000; 	box-sizing:border-box; padding:10px; transition:all  1s;}
#side:hover .con { left:50px;}

/* contents내 썸네일 */
#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:all 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:0px; right:0px; opacity:0;}
.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:sclae(1); opacity:0;}
	100% { right:100px; transform:scale(1.5); opacity:1;}
}