@charset "uft-8";
body { width: 100px; height: 100%; background: #111; position: fixed; } 


.vid { width: 100%; height: 100%; position: fixed; opacity: .9; top: -60px; left: 0; z-index: -1; } 

.vid video { width: 100%; min-width: 1920px; } 
 

/* --------- 로고 ------------*/
.logo { position: fixed; top: 40px; left: 34px; z-index: 20; background: rgba(255, 255, 255, 0); } 
.logo img { width: 187px; height: auto; background: rgba(255, 255, 255, 0); } 


#sns { position: fixed; top: 60px; right: 50px; } 
#sns li { float: left; margin-right: 30px; } 
#sns .fa { font-size: 25px; color: #fff; opacity: 0.6; -webkit-transition: all 0.6s; transition: all 0.6s; } 
#sns .fa:hover { opacity: 1; -webkit-transform: scale(1.2); transform: scale(1.2); } 


/* 오른쪽 메뉴  */
#side { position: fixed; bottom: 0; width: 800px; background-color: #111; height: 100%; opacity: 0.5; -webkit-transform: skewX(-40deg); transform: skewX(-40deg); right: -800px; -webkit-transition: all 0.6s; transition: all 0.6s; } 
#side:hover { right: -500px; opacity: 0.8; } 
#side:hover .con { left: 50px; } 
#side:hover .con p { -webkit-transform: translateX(0px); transform: translateX(0px); } 
#side:hover .btn { left: 700px; } 
#side .con { width: 400px; height: 100%; position: absolute; left: 150px; bottom: 0; background-color: #000; padding: 10px; -webkit-transition: all 1s; transition: all 1s; } 
#side .con p { width: 300px; height: 100px; position: absolute; left: 0px; } 
#side .con p:nth-child(1) { bottom: 270px; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: all 0.4s; transition: all 0.4s; } 
#side .con p:nth-child(2) { bottom: 160px; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: all 0.6s; transition: all 0.8s; } 
#side .con p:nth-child(3) { bottom: 50px; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: all 1.2s; transition: all 1.2s; } 
#side .con p em { display: inline-block; -webkit-transform: skewX(40deg); transform: skewX(40deg); color: #fff; font: bold 16px/1.7 arial; } 
#side .con p img { width: 300px; height: 70px; opacity: 0.3; -webkit-transition: all 0.6s; transition: all 0.6s; } 
#side .con p img:hover { opacity: 1; } 
#side .btn { width: 150px; height: 50px; position: absolute; bottom: 40px; left: 100px; color: #fff; -webkit-transform: skewX(40deg); transform: skewX(40deg);} 


#side { position: fixed; bottom: 0; width: 800px; background-color: #111; height: 100%; opacity: 0.5; -webkit-transform: skewX(-40deg); transform: skewX(-40deg); right: -800px; -webkit-transition: all 0.6s; transition: all 0.6s; } 
#side:hover { right: -500px; opacity: 0.8; } 
#side:hover .con { left: 50px; } 
#side:hover .con p { -webkit-transform: translateX(0px); transform: translateX(0px); } 
#side:hover .btn { left: 700px; } 
#side .con { width: 400px; height: 100%; position: absolute; left: 150px; bottom: 0; background-color: #000; padding: 10px; -webkit-transition: all 1s; transition: all 1s; } 
#side .con p { width: 300px; height: 100px; position: absolute; left: 0px; } 
#side .con p:nth-child(1) { bottom: 270px; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: all 0.4s; transition: all 0.4s; } 
#side .con p:nth-child(2) { bottom: 160px; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: all 0.6s; transition: all 0.8s; } 
#side .con p:nth-child(3) { bottom: 50px; -webkit-transform: translateX(200px); transform: translateX(200px); -webkit-transition: all 1.2s; transition: all 1.2s; } 
#side .con p em { display: inline-block; -webkit-transform: skewX(40deg); transform: skewX(40deg); color: #fff; font: bold 16px/1.7 arial; } 
#side .con p img { width: 300px; height: 70px; opacity: 0.3; -webkit-transition: all 0.6s; transition: all 0.6s; } 
#side .con p img:hover { opacity: 1; } 
#side .btn { width: 150px; height: 50px; position: absolute; bottom: 40px; left: 100px; color: #fff; -webkit-transform: skewX(40deg); transform: skewX(40deg); } 



/* 화살표 */
.btn i { font-size: 60px; position: absolute; right: 0; } 
.btn i:nth-child(1) { -webkit-animation: ani linear 1.5s 0s infinite; animation: ani linear 1.5s 0s infinite; } 
.btn i:nth-child(2) { -webkit-animation: ani linear 1.5s 0.5s infinite; animation: ani linear 1.5s 0.5s infinite; } 
.btn i:nth-child(3) { -webkit-animation: ani linear 1.5s 1s infinite; animation: ani linear 1.5s 1s infinite; } 


/* 화살표 애니메이션 */
@keyframes ani { 
 0% { right: 0; transform: scale(1); opacity: 1; } 
100% { right: 100px; transform: scale(.8); opacity: 0; } 
 }