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

/*  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: 23650px;
  font-family: 'Jeju Gothic', sans-serif; font-size:12px;
}

.bg {
  width: 100%; height: 100%;
  position: fixed; top: 0px; left: 0px;
  background: #000;
}

h1 {
  position: fixed; top: 50px; left: 90px; z-index: 2; color: #fff; font-size: 30px;
}

h1 img {
}

.gnb {
  position: fixed; top: 80px; right: 100px; z-index: 2;
}

.gnb li {
  float: left; margin-left: 30px;
}

.gnb li a { padding: 5px; letter-spacing: 3px;
  font-size: 18px; font-weight: bold; color: #fff;
  transform: scale(1); transition: all 0.5s;
  opacity: 0.7;
}

.gnb li a:hover {
  transform: scale(1.2); border-top: 2px solid #E61A0F;
  opacity: 1;
}

.sns {
  position: fixed; bottom: 40px; left: 100px; z-index: 2;
}

.sns li {
  float: left; margin-right: 25px;
}

.sns li .fa {
  font-size: 30px; color: #fff;
  transition: all 0.5s;
  transform: scale(1);
  opacity: 0.7;
}

.sns li .fa:hover {
  transform: scale(1.2);
  opacity: 1;
}

.scrollNavi {
  position: fixed; left: 100px; top: 220px; z-index: 2;
}

.scrollNavi li {
  position: relative; width: 265px; height: 35px; margin-bottom: 20px;
  font-size: 18px; color: #fff; text-align: center;
  perspective: 400px; cursor: pointer;
}

.scrollNavi li em {
  position: absolute; top: 8px; left: 20px;
  font-size: 18px; color: #fff;
}

.scrollNavi li em strong {
  margin-right: 10px;
}

.scrollNavi li span {
  display: block; width: 2%; height: 100%;
  position: absolute; background: #E61A0F;
  transform: skewX(-15deg);
}

.scrollNavi li.on span {
  width: 100%;
}

section {
  width: 1200px; height: 700px;
  position: fixed; left: 50%; top: 50%;
  margin-left: -380px; margin-top: -300px;
  perspective: 2500px;
   z-index: 1;
}

section>article {
  width: 1200px; height: 700px;
  position: absolute; top: 0px; left: 0px;
  opacity: 0.2; z-index: 8;
  transition: all 0.5s linear;
}

section article.on {
  opacity: 1; z-index: 9;
}

section>article>img {
  position: absolute;
  width: 430px; height: auto;
}

section>article:nth-child(1) {
  transform: translateZ(0px);
}
section>article:nth-child(2) {
  transform: translateZ(-2500px);
}
section>article:nth-child(3) {
  transform: translateZ(-5000px);
}
section>article:nth-child(4) {
  transform: translateZ(-7500px);
}
section>article:nth-child(5) {
  transform: translateZ(-10000px);
}
section>article:nth-child(6) {
  transform: translateZ(-12500px);
}
section>article:nth-child(7) {
  transform: translateZ(-15000px);
}
section>article:nth-child(8) {
  transform: translateZ(-17500px);
}
section>article:nth-child(9) {
  transform: translateZ(-20000px);
}
section>article:nth-child(10) {
  transform: translateZ(-22500px);
}

section>article>div {
  position: absolute; left: 620px;
  width: 1000px; color: #fff; opacity: : 1;
}

section>article>div>p {
  margin-bottom: 20px;
}

section>article>div>p.title {
  position: relative; left:0px; top: 80px;
  font-size: 50px; line-height: 1.5;
}

section>article:nth-child(10)>div>p.title {
  font-size: 45px;
}

section>article>div>p.title>span {
 font-size: 18px; margin-left: 3px;
}

section>article>div>p.title>span.grade-12 {
  position: absolute; top: -68px; left: -610px;
  display: inline-block; width: 30px; height: 30px; background: rgb(40, 132, 255);
  border-radius: 50%;
  font-size: 18px; text-align: center; padding-top: 3px; box-sizing: border-box;
}

section>article>div>p.title>span.grade-15 {
  position: absolute; top: -68px; left: -610px;
  display: inline-block; width: 30px; height: 30px; background: #fcb80f;
  border-radius: 50%;
  font-size: 18px; text-align: center; padding-top: 3px; box-sizing: border-box;
}

section>article>div>p.title>span.grade-19 {
  position: absolute; top: -68px; left: -610px;
  display: inline-block; width: 30px; height: 30px; background: #e00000;
  border-radius: 50%;
  font-size: 15px; text-align: center; padding-top: 3px; box-sizing: border-box;
}

section>article>div>p.title>span>em.gold {
  border: 2px solid gold; border-radius: 5px; padding: 4px; font-style: normal;
}

section>article>div>p.title>span>em.skyblue {
  border: 2px solid skyblue; border-radius: 5px; padding: 4px; font-style: normal;
}

section>article>div>p.title>span>em.red {
  border: 2px solid red; border-radius: 5px; padding: 4px; font-style: normal;
}

section>article>div>p.title>strong {
  font-size: 24px; display: block; color: #ddd; margin-left: 10px; margin-top: -10px;
}

table {
  width: 530px;
  font-size: 15px; color: #fff;
  position: relative;  top: 80px; left: 0px;
  box-sizing: border-box;
  background: rgba(0,0,0,0.3);
  opacity: 0;
}

th {
  border-bottom: 1px solid #fff; padding: 10px;
}

td {
  border-bottom: 1px solid #fff; padding: 10px;
}

article.on table {
  opacity: 1;
}

section>article>div>ul {
  position: relative; top: 105px; left: 135px; width: 260px; height: 30px;
}

section>article>div>ul>li {
  float: left; display: inline-block; width: 125px; height: 30px;
  font-size: 20px; color: #fff; text-align: center; background: red;
  border-radius: 5px; padding-top: 5px; box-sizing: border-box;
}

section>article>div>ul>li:nth-child(2) {
background: rgb(0, 199, 80); margin-left: 10px;
}

section>article>div>ul>li>a {
  display: block;
  width: 125px; height: 30px; color: #fff;
}


.copyright {
  position: fixed; right: 50px; bottom: 30px;
  width: 100%; height: 30px;
  background: rgba(0,0,0,0.5);
  font-size: 12px; color: #fff; line-height: 3;
  text-align: right;
}