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

/*    Reset CSS  */
* { margin:0;  padding:0;}
ol,ul {list-style: none; }
body { position:fixed;  width:100%; height:100%; background: #111; color:#fff;}
a { outline:0; text-decoration:none; color:#bbb;}
img { border:0; display: block;}
.logo {width: 300px; height: auto; position: absolute; margin: 40px;}
nav>ul {position: absolute; width: 30%; min-width: 360px; height: 40px; opacity: 0.9; z-index: 10; perspective: 700px; transition: all 0.5s;}
nav>ul li {float: left; width: 50%; text-align: center;  padding-top: 10px; transition: all 1s;}
nav>ul>li:hover>a {opacity: 0;}
nav>ul li a {color: white; font:16px bold orbitron; letter-spacing: 1px;}
nav ul.gnb1 {bottom: 50%;}
nav ul.gnb2 {position: fixed; left: 70%; top: 50%; margin-top: 2px;}
nav>ul>li>div {position: absolute; width: 50%; height: 312px; background: #000; opacity: 0.9; }
nav>ul>li>div>h2 {padding: 7px 0; font:20px bold orbitron;}
nav>ul>li>div>p {width: 98%; margin-left: 1%; margin-bottom: 3px; height: 100px; overflow: hidden;}
nav>ul>li>div>p>img {width: 100%;}
nav>ul>li>div>ul {position: absolute;  margin-top: 5px; }
nav>ul>li>div>ul>li {display: block; width: 100%; height: 30px; margin-bottom: 2px; background: #111; opacity: 0.8;}
nav>ul>li>div>ul>li:hover {background: white; color: #111; opacity: 0.6;}
nav>ul>li>div>ul>li:hover a {color: #111;}
nav ul.gnb1>li>div {bottom: 50%; margin-bottom: -20px; transform: rotateX(80deg) rotateY(360deg); transform-origin: bottom; opacity: 0;  transition: all 0.5s;}
nav ul.gnb1>li:hover div {transform: rotateX(0deg) rotateY(0deg); opacity: 1; }
nav ul.gnb2>li>div {top: 50%; margin-top: -20px; transform-origin: top; transform: rotateX(-80deg) rotateY(360deg); opacity: 0;   transition: all 0.5s;}
nav ul.gnb2>li:hover div {transform: rotateX(0deg) rotateY(0); opacity: 1;}

.sns {position: absolute; width: 100%; height: 100%; min-width: 1200px;}
.sns ul {position: absolute; width: 320px; right: 50px; bottom: 50px; height: 60px;}
.sns ul li {float: right; width: 75px; text-align: center;}
.sns ul li a {display: inline-block; transform-origin: center center;}
.sns ul li a p {font-size: 15px;}
.sns ul li a:hover {animation: sns 1.5s infinite;}
@keyframes sns {
  0% {transform: scale(1); transform-origin:center ;}
  80% {transform: scale(2); opacity: 1;}
  100% {transform: scale(2); opacity: 0;}
}
.sns ul li a i {font-size: 50px; color: white;}
/*nav {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;}
nav>ul {position: absolute; width: 1200px; height: 50px; background: #000; opacity: 0.8; bottom: 0; margin-left: 50px; transform-origin: bottom left; transform: rotate(-90deg);}
nav>ul>li {float: left; width: 160px; height: 50px; padding-top: 10px; text-align: center; border-bottom: none; box-sizing: border-box; transition: all 0.5s; perspective: 700px;}
nav>ul>li:hover {border-bottom: 2px solid red; transition: all 0.5s;}
nav>ul>li:hover div {transform:rotate(90deg) rotateY(0deg); opacity: 1; transition: all 0.5s;}
nav>ul>li:hover>a {font-size: 16px; transition: all 0.5s;}
nav>ul>li:nth-child(1) {margin-left: 50px;}
nav>ul>li>a {font:15px orbitron; letter-spacing: 1px; color: #fff; transition: all 0.5s}
nav>ul>li>div {position: absolute; float: left; height: 160px; width: 400px; opacity: 0; background: #000; transition: all 0.5s  opacity: 0.8; transform: rotate(90deg) rotateY(85deg); margin-top: -60px; margin-left: 80px; transform-origin: left;}
nav>ul>li>div>p {position: absolute; color: black; width: auto; height: 110px; padding-left: 7px; margin-top: -100px; overflow: hidden; margin-top: 40px;}
nav>ul>li>div>h2 {position: absolute; font:18px orbitron; letter-spacing: 1px; color: #fff; margin-left: 40px; margin-top: 5px;}
nav>ul>li>div>ul {position: absolute; margin-left: 215px;}
nav>ul>li>div>ul>li {width: 185px; opacity: 0.8; height:40px; padding-top: 6px; text-align: center; border-bottom: none; box-sizing: border-box;}
nav>ul>li>div>ul>li>a {font: 14px orbitron; color: #fff; letter-spacing: 1px;}
nav>ul>li>div>ul>li:hover {background: #000; opacity: 1; border-bottom: 1px solid #fff; }*/

.sec {height: 100%; width: 100%; min-width: 1200px;position: absolute; overflow: hidden;}
.sec1 img { position: absolute; left: 30%; height: auto; width: 70%; bottom: 50%;}
.sec2 img { position: absolute; right: 30%; height: auto; width: 70%; top: 50%;}