@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Orbitron);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url('https://fonts.googleapis.com/css?family=Delius');
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed');
@font-face {font-family:'NanumSquareR'; src:url('../font/NanumSquareR.woff') format('woff');}
/*    Reset CSS  */
* { margin:0;  padding:0;}
ol,ul {list-style: none; }
body { position:fixed;  width:100%; height:100%; background:#fff;}
a { outline:0; text-decoration:none; color:#bbb;}
img { border:0;}

@keyframes ani {
  0% {transform:rotateY(0deg);}
  35% {transform:rotateY(0deg);}
  50% {transform:rotateY(0deg);}
  90% {transform:rotateY(360deg);}
  100% {transform:rotateY(360deg);}
}

@keyframes ani2 {
  0% {top:600px;}
  100% {top:170px;}
}

header {width: 100%; height: 20%; z-index: 3; position: fixed;}
header h1 {position: fixed; top: 20px; left: 50%; margin-left: -75px; perspective:500px;}
header h1 img {width: 150px; animation:ani 9s linear infinite;}
header .sns {font-size:30px; position: fixed; left: 40px; top:20px;}
header .sns li {margin-right:35px; float: left;}
header .sns li a i {color:#000; opacity: 0.6; transition:all 0.5s;}
header .sns li a:hover i {opacity: 1; transform:scale(1.3);}

header .side {float: right; margin:20px 40px; font:13px 'Open Sans', sans-serif;}
header .side li {float: left; padding:0 10px; border-right: 1px solid #aaa;}
header .side li:last-child {border: none;}
header .side li a {color:#fff;}

section {width: 50%; height: 101%; position: fixed; left:0; top: -5px; overflow: hidden;
        z-index: 1; border-right:3px solid #067655; box-sizing: border-box;}
section img {height: 100%;}

nav { width: 50%; height: 100%; background:#fff; position: relative; float: right;
    background:#d9dd7f; border-left:3px solid #067655; box-sizing: border-box;}
nav>ul {position: absolute; top: 230px; left: 30px; width: 100%; height: 100%; z-index: 2;}
nav>ul>li {font-size: 45px; margin-bottom:40px;}
nav>ul>li>a {color:#fff; position: relative; z-index: 6;
            transition:all 0.5s; font-family: 'Barlow Condensed', sans-serif;}
nav>ul>li>a:hover {color:#000;}

#gnb  {position:fixed; width: 20%; height: 100%; top: 0; right:30px; z-index: 2;}
#gnb div {width: 0; height: 100%; text-align: center; overflow: hidden;
        transition:all 0.5s; float: left;}
#gnb div.on {width: 336px;}
#gnb div ul {padding-top: 230px; box-sizing: border-box;}
#gnb div ul li {width: 100%; padding:20px 0; transition:all 0.5s; width: 336px;}
#gnb a {color:#fff; font-size: 35px; font-family: 'NanumSquareR';
        transition:all 0.5s;}
#gnb li:hover {background: #000;}
#gnb li:hover a {color:#fff;}
#gnb div:nth-child(1) {background: rgba(162,140,62,0.7);}
#gnb div:nth-child(2) {background: rgba(115,33,33,0.7);}
#gnb div:nth-child(3) {background: rgba(139,34,242,0.7);}
#gnb div:nth-child(4) {background: rgba(162,140,62,0.7);}
#gnb div:nth-child(5) {background: rgba(162,140,62,0.7);}
#gnb div:nth-child(6) {background: rgba(162,140,62,0.7);}


footer {position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; background: rgba(0,0,0,0.7);
        z-index:5; font:12px 'Open Sans', sans-serif;}
footer ul {float:left; margin-left: 10px;}
footer li {float: left; margin:8px 10px;}
footer span {color:#ccc; float: right; margin:8px 20px;}

p {position: fixed; width: 4px; height: 10px; z-index: 10; left: 50%; margin-left: -2px;
  background: #fff; top:200px; animation:ani2 4.5s linear infinite Alternate;}