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

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#fff; }
img { border:0;}
body { font:12px/1.6 Righteous; color:#fff; min-width:1400px; } 

h1 { position:fixed; top:10px; right:80px; z-index:10;}



#gnb { position:fixed; top:200px; right:100px; z-index:9;}
#gnb>li {width:300px; height:40px; cursor:pointer; transition:all 0.5s; opacity:0.8; margin-bottom:5px;}
#gnb>li.on { opacity:1;}
#gnb .on ul { position:absolute; right:300px; top:0;}
#gnb>li.on a i { margin-left:20px;}
#gnb>li.on>a { color:#fff;}
#gnb>li:hover { background:#b591d5; opacity:1;}
#gnb>li>a { display:block; width:100%; height:100%; color:#fff; transform:skewX(deg);
     font: 16px/2.5 Righteous; box-sizing:border-box; padding-right:0px; text-align:center;}
#gnb>li:hover>a { background:#b591d5; color:#fff;}

#gnb>li>ul { position:absolute; top:-10px; right:200px;}
#gnb>li>ul>li { width:200px; height:40px; border-bottom:1px solid #b591d5;}
#gnb>li>ul>li>a { display:block; width:200px; height:40px; color:#fff; transform:skewX(0deg);
     font: 16px/2.5 Righteous; box-sizing:border-box; padding-right:20px; text-align:center; background:#271442;
      opacity:1; text-align:center;}
#gnb>li>ul>li:hover a{ background:#b591d5;}



.vid { position:fixed; width:100%; height:100%; background:url(../img/bg.jpg) no-repeat center center; background-size:cover;}
.wrap { position:fixed; width:100%; min-width:1400px; height:100%; background:url(../img/cover.png) no-repeat center center;
     background-size:cover;}
.wrap>p { position:fixed; bottom:25px; left:280px; z-index:10;}
.wrap>p>span {font-size:32px;font-weight:500;font-family:'Noto Sans KR';letter-spacing:1px;color:#dbd5f9;}
.wrap>ul>p {position:fixed; bottom:393px; right:72px; z-index:0;text-align:center;}
.wrap>ul>p>span {font-size:32px;font-weight:800;font-family:'Noto Sans KR';line-height:32px;letter-spacing:1px;color:#131239;}

.wrap>ul>li:nth-of-type(1) { position:fixed; background-color:#06071c; width:140px; height:49px;
     border-radius:60px; bottom:320px; right:180px; z-index:0;text-align:center;}
.wrap>ul>li:nth-of-type(1)>p {font-size:22px;font-weight:400;font-family:'Noto Sans KR';line-height:32px;
     letter-spacing:-1px;margin-top:6px;color:#fff;}
.wrap>ul>li:nth-of-type(2) { display:initial;position:fixed; background-color:#06071c; width:457px; height:268px;
     bottom:27px; right:21px; z-index:0;text-align:center;display:inline-block}

.wrap>ul>li:nth-of-type(2)>video{width:457px; height:257px;}

.origin_img { width:1020px; height:593px; position:fixed; top:50%; left:50%; margin-top:-120px; margin-left:-750px;
          background:url(../img/headset.png) no-repeat left center; background-size:contain; }
.origin { width:1400px; height:950px; position:fixed; top:50%; margin-top:-480px; left:50%; margin-left:-900px;}
.origin>p { position:absolute; width:270px; height:305px; top:45%; margin-top:-160px;
     transform-origin:50px center; opacity:0;}
.origin>p>img { position:absolute; top:0px; left:0px;}
.c1 { transform:rotate(80deg); transition:all 0.8s 0s; }
.c2 { transform:rotate(80deg); transition:all 0.8s 0.3s; }
.c3 { transform:rotate(80deg); transition:all 0.8s 0.6s; }
.c4 { transform:rotate(80deg); transition:all 0.8s 0.9s; }

.origin:hover .c1 { transform:translateY(-230px) translateX(70px); opacity:1;}
.origin:hover .c2 { transform:translateY(-230px) translateX(360px) ; opacity:1;}
.origin:hover .c3 { transform:translateY(-230px) translateX(650px) ; opacity:1;}
.origin:hover .c4 { transform:translateY(-230px) translateX(942px) ; opacity:1;}

#sns { position:fixed; bottom:110px; right:500px;}
#sns li { float:left; margin-right:20px; opacity:0.7; transition:all 0.5s;}
#sns li:hover { opacity:1; transform:scale(1.3);}
#sns li i { font-size:20px; color:#dbd5f9;}
/*
.origin:hover .c1 { transform:rotate(270deg);}
*/