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

/*    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:url(../img/back.jpg) no-repeat center top; background-size: cover;}

.vid {width: 100%; height: 100%; position: fixed; top: -34px;left: 0px; opacity: 1;z-index: -50; }
.vid video {width: 100%; height: 100%; min-width: 1600px;}

/*로고*/
h1 {width: 100px; height: 100px; position: fixed; top: 20px; left: 20px; background: url(http://www.ygeshop.com/shopimages/ygnext/001001000120.gif?1470114775) no-repeat center top; background-size: contain; z-index: 10; }


header {width: 600px; height: 1200px; position: fixed; background: -webkit-linear-gradient(top, rgba(183,222,237,1) 0%,rgba(234,182,231,1) 49%,rgba(33,180,226,1) 99%,rgba(33,180,226,1) 100%); ); transform: skewX(-50deg); top: 0px; left:-750px;}

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

/*2depth*/
#gnb ul {position: absolute; left: 0px; top: 0px; opacity: 0; transition: all 0.5s;}
#gnb>li:hover ul {opacity: 0.8; left: 205px;}
#gnb ul a {display: block; width:150px; height:40px; background: #222; border-bottom: 2px solid #EAB6E7; font: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: #EAB6E7; 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: 0px;}
#sns li {float: left; margin-right: 30px;}
#sns .fa {font-size: 25px; color: #fff; opacity: 0.5; transform: scale(1); transition: all 0.5s;}
#sns .fa:hover {opacity: 1; transform: scale(1.3);}

/*text*/
.txtBox {width: 1000px; height: 300px; position: fixed; top: 500px; left: 70px; }
.txt {position: absolute; top: 120px; left: -20px; font-size: 35px; font-family: lobster; color: #444; letter-spacing: 2px;}
.txt b {font:bold 34px; font-family: lobster; color: #fff; margin-left: 20px;}
.tit {position: absolute; top: 0px; left: 0px; font-size: 100px; color: #325CF2; font-family: monoton;}
.tit em {font-size: 30px; font-family: play; color: #444;}

/*side*/
#side {width: 500px; height: 100%; position: fixed; bottom: 0px; right: -800px; background: #111; opacity: 0.5; transform: skewX(-50deg); transition: all 1s;}
#side:hover {right: -300px; 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;}

#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:#EAB6E7; transform: skewX(50deg);}
#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: 250px; transform: translateX(300px); transition: all 0.4s;}
#side .con p:nth-child(2) {bottom: 140px; transform: translateX(300px); transition: all 0.8s;}
#side .con p:nth-child(3) {bottom: 30px; transform: translateX(300px); transition: all 1.2s;}
#side:hover .con p {transform: translateX(0px);}

/*움직 버튼*/
#side .btn {width: 130px; height: 50px; position: absolute; bottom: 40px; left: 20px; color: #EAB6E7; transform: skewX(50deg);}
#side:hover .btn {left: 700px;}
.btn i {font-size: 60px; position: absolute; bottom: 0px; right: 0px; opacity: 1;}
.btn i:nth-child(1) {animation: ani linear 1.5s 0s infinite;}
.btn i:nth-child(2) {animation: ani linear 1.5s 0.5s infinite;}
.btn 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;}
}