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

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { width:100%; height: 31000px; font-family:Orbitron; font-size:12px; }

/*배경*/
.bg {position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: url(../img/bg1.jpg) no-repeat center top; background-size: cover;}
.bg1 {position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; opacity: 0.4;}
/*로고*/
h1 {position: fixed; background: url(../img/logo1.jpg)no-repeat center top; width: 130px; height: 80px; background-size: contain; top: 30px; right: 20px; z-index: 2;}

p {position: fixed; top:30px; left:20px;  font-size:40px; font-weight: bold; color: #fff; z-index: 2; text-shadow: 3px 3px 3px #333;}

/*주 네비*/
.gnb {position: fixed; top:100px; right: 30px; z-index: 2;}
.gnb li {margin-bottom: 20px; color: #fff; }
.gnb li a {font-size: 20px; font-weight: bold; color: #fff; transition: all 0.2s;}
.gnb li:hover a { color: #f00;}
/*sns*/
.sns {position: fixed; top: 30px; right: 180px; z-index: 2;}
.sns li {float: left; margin-left: 30px;}
.sns li .fa {font-size: 18px; color: #ccc;  transform: scale(1); opacity: 0.6; transition: all 0.4s;}
.sns li .fa:hover {transform: scale(1.4); opacity: 1;}

/*스크롤 네비*/
.scrollNav {position: fixed; left: 30px; top: 100px; z-index: 2;}
.scrollNav li {margin-bottom: 20px; color: #fff; font-size: 20px; text-shadow: 3px 3px 3px #000; letter-spacing: 2px; font-weight: bold; cursor: pointer;}
.scrollNav li:nth-child(1).on {color: #DBB04C;}
.scrollNav li:nth-child(2).on {color: #cc0000;}
.scrollNav li:nth-child(3).on {color: #5178E2;}
.scrollNav li:nth-child(4).on {color: #A1BA41;}
.scrollNav li:nth-child(5).on {color: #3A89EA;}
.scrollNav li:nth-child(6).on {color: #38CFE0;}
.scrollNav li:nth-child(7).on {color: #64EAB7;}

/*카피라이트*/
footer {position: fixed; bottom: 0px; left: 0px; width: 100%; height: 30px; z-index: 2; background: #010101; opacity: 0.7;}
footer ul {width: 40%; height: 30px; float: left; margin-left: 30px; margin-top: 3px;}
footer ul li {float: left; width: 16.66%; text-align: center;}
footer ul li a {font: 11px/2.2 arial; color: #ddd;}
footer span {font:8px/2 arial; color: #aaa; float: right; letter-spacing: 1px; margin-right: 40px; margin-top: 4px;}


/*박스*/
section {position: fixed; width: 1200px; height: 700px; left: 50%; top: 50%; margin-left: -600px; margin-top: -350px; perspective: 2300px; z-index: 1; }
section>article {width: 1200px; height: 700px; position: absolute; top: 0px; left: 0px; opacity: 0.5; z-index: 1; font-size: 100px; color: #fff;}
section>article.on {opacity: 1; z-index: 2;}
section>article:nth-child(1) {transform: translateZ(0px);}
section>article:nth-child(2) {transform: translateZ(-5000px);}
section>article:nth-child(3) {transform: translateZ(-10000px);}
section>article:nth-child(4) {transform: translateZ(-15000px);}
section>article:nth-child(5) {transform: translateZ(-20000px);}
section>article:nth-child(6) {transform: translateZ(-25000px);}
section>article:nth-child(7) {transform: translateZ(-30000px);}

section>article>p {position: absolute; width: 450px; padding: 30px 50px; color: #fff; opacity: 1;}
section>article>p>span {font-family: orbitron; font-size: 40px; letter-spacing: 0px; line-height: 1.5;}
section>article>p>em {font-size: 14px; letter-spacing: 2px;}
section>article>img {position: absolute;}

/*1*/
section>article:nth-child(1) p {top: 450px; left: 810px;}
section>article:nth-child(1) p span {color: #CC9F47;}
.obj1 {bottom: -100px; left: 300px;}
.obj11 {top: -125px; right: 460px;}
.obj12 {bottom: -60px; left: 350px;}

/*2*/
section>article:nth-child(2) p {bottom: 20px; left: 100px;}
section>article:nth-child(2) p span {color: #cc0000;}
.obj22 {bottom: 130px; left: 410px;}
.obj2 {bottom: 130px; left: 410px;}
.obj21 {bottom: -30px; left: -170px;}

/*3*/
section>article:nth-child(3) p {top: 120px; left: 100px;}
section>article:nth-child(3) p span {color: #4B6AD8;}
.obj3 {bottom: 80px; right: 30px; transform: scale(1.2);}
.obj31 {bottom: -10px; right: 40px;}

/*4*/
section>article:nth-child(4) p {top: 280px; left: 780px;}
section>article:nth-child(4) p span {color: #A1BA41;}
.obj4 {bottom: -110px; left: 210px; transform: scale(1.2);}
.obj41 {bottom: 270px; left: 200px;}

/*5*/
section>article:nth-child(5) p {top: 390px; left: 10px;}
section>article:nth-child(5) p span {color: #3A89EA;}
.obj5 {bottom: 90px; left: 550px; transform: scale(1.2);}
.obj51 {bottom: 50px; left: 335px;}

/*6*/
section>article:nth-child(6) p {top: 50px; left: 710px;}
section>article:nth-child(6) p span {color: #38CFE0;}
.obj61 {bottom: -50px; left: 290px; }
.obj6 {bottom: -40px; left: 265px;}

/*7*/
section>article:nth-child(7) p {top: 450px; left: 710px;}
section>article:nth-child(7) p span {color: #64EAB7;}
.obj71 {bottom: -140px; left: 230px; }
.obj7 {bottom: -40px; left: 240px;}
.obj72 {bottom: 340px; left: 415px;}