@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: #111;color: #fff;}
#gnb>li:hover>a{background: #616161;color: #fff;}
#gnb em{display: inline-block;transform: skewX(40deg);}
#gnb em i{margin-right: 20px;}

/* 2depth */
#gnb ul{
  position: absolute; /* 자식의 position:absolute. grouping. */
  left:0px;
  top:0px;
  opacity: 0; /* 안보이게 */ 
  transition: 0.4s; /* 0.4초동안 animation효과 */
}
#gnb>li:hover ul{
  opacity: 0.8; /* 보이게 */
  left:205px; /* 왼쪽에서 오른쪽으로 205px이동 */
} 
#gnb ul a{display: block;width: 150px;height: 40px;background: #222;border-bottom: 1px solid lawngreen;font: bold 16px/2.5 arial;color:#fff;box-sizing: border-box;padding-left: 50px;margin-bottom: 3px;transition:0.5s;}
#gnb ul a:hover{background: lawngreen;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:yellowgreen;opacity: 0.5;transform: scale(1);transition: 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: 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:greenyellow;transform: skewX(40deg);}
#side .con p img{width:300px;height:70px;opacity:0.3;transition: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 1s infinite;}

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