@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: #eee;
  font-family: NanumGothic;
}

a {
  outline: 0;
  text-decoration: none;
  color: #555;
}

img {
  border: 0;
}

#wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1500px;
}

header {
  width: 250px;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0px;
  right: 0px;
  transform: rotateY(-180deg);
  transform-origin: right center;
  transition: all 0.8s;
  z-index: 1;
  opacity: 0;
  border-radius: 5px;
}

header>img {
  display: block;
  width: 50%;
  margin: 200px auto;
}

section {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  transform: rotateY(0deg);
  transform-origin: left center;
  transition: all 1s;
}

header.on {
  transform: rotateY(-47deg);
  opacity: 1;
}

section.on {
  transform: rotateY(6deg);
}

.btnMenu {
  position: fixed;
  top: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  font-size: 30px;
  color: #fff;
  animation: ani 1s infinite alternate;
  z-index: 10;
}

@keyframes ani {
  0% {transform: scale(1); opacity: 1; color: #000;}
  100% {transform: scale(1.3); opacity: 0.5; color: #000;}
}

ul {
width: 100%; height: 100px;
margin-top: -150px;
}

ul>li {
  text-align: center;
  padding: 20px;
}

ul>li>a {
  font-size: 20px;
}

ul>li>a:hover {
  font-weight: bold;
}

section>div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
}

section>div.on {
  z-index: 2;
  opacity: 1;
}

section>div>p {
  box-sizing: border-box; text-align: center; overflow: hidden;
  transform: skewY(10deg); transition: all 2s; opacity: 0.7;
  border:2px solid #fff; box-sizing: border-box;
}

section>div.on>p {
  opacity: 1;
  transform: skewY(0deg);
}


div.box1>p {
  height: 33.333%;
  float: left;
}

div.box1>p>span {
  font-size: 36px;
  color: #fff;
  display: block;
  padding-top: 125px;
}

div.box1>p:nth-child(1) {
  width: 20%;
  background: #aaf0ea;
}

div.box1>p:nth-child(2) {
  width: 30%;
  background: url(../img/img02.jpg) no-repeat center;
  background-size: cover;
}

div.box1>p:nth-child(3) {
  width: 20%;
  background: #f6d999;
}

div.box1>p:nth-child(4) {
  width: 30%;
  background: url(../img/img03.jpg) no-repeat center;
  background-size: cover;
}

div.box1>p:nth-child(5) {
  width: 30%;
  background: url(../img/img04.jpg) no-repeat center;
  background-size: cover;
}

div.box1>p:nth-child(6) {
  width: 20%;
  background: #cfe678;
}

div.box1>p:nth-child(7) {
  width: 30%;
  background: url(../img/img05.jpg) no-repeat bottom center;
  background-size: cover;
}

div.box1>p:nth-child(8) {
  width: 20%;
  background: #ce98e9;
}

div.box1>p:nth-child(9) {
  width: 20%;
  background-color: rgb(236, 250, 154);
  background-image: url(../img/ilogo.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px;
}

div.box1>p:nth-child(10) {
  width: 30%;
  background: url(../img/img01.jpg) no-repeat center;
  background-size: cover;
}

div.box1>p:nth-child(11) {
  width: 20%;
  background: #D59F5F;
}

div.box1>p:nth-child(12) {
  width: 30%;
  background: url(../img/img06.jpg) no-repeat center;
  background-size: cover;
}

div.box2>p {
  width: 25%;
  height: 25%;
  position: relative;
  float: left;
  background: rgb(100, 0, 0);
}

div.box2>p:nth-child(1) {
  width: 30%;
  background-image: url(../img/img23.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

div.box2>p:nth-child(2) {
  width: 20%;
  background:#EEBDA1;
}

div.box2>p:nth-child(3) {
  width: 30%;
  background-image: url(../img/img22.jpg);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
}

div.box2>p:nth-child(4) {
  width: 20%;
  background:#CEC4D8;
}

div.box2>p:nth-child(5) {
  height: 20%;
  background:#AFC5B1;
}

div.box2>p:nth-child(6) {
  width: 50%; height: 50%;
  background-image: url(../img/img21.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div.box2>p:nth-child(7) {
  height: 30%;
  background-image: url(../img/img25.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div.box2>p:nth-child(8) {
  position: absolute;
  height: 30%;
  top: 45%; left: 0px;
  background-image: url(../img/img24.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div.box2>p:nth-child(9) {
  height: 20%;
  background:#F1D8C3;
}

div.box2>p:nth-child(10) {
  float: right;
  width: 30%;

  background-image: url(../img/img27.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div.box2>p:nth-child(11) {
  width: 20%;
  background:#F1D8BA;
}

div.box2>p:nth-child(12) {
  width: 30%;
  background-image: url(../img/img26.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

div.box2>p:nth-child(13) {
  width: 20%;
  background:#D68A86;
}

div.box2>p>span {
  font-size: 32px;
  color: #fff;
  display: block;
  padding-top: 95px;
}

div.box2>p:nth-child(5)>span {
 padding-top: 80px;
}

div.box2>p:nth-child(9)>span {
 padding-top: 80px;
}

div.box3>p {
  width: 25%;
  height: 25%;
  position: relative;
  float: left;
  background: rgb(237, 237, 237);
}

div.box3>p:nth-child(1) {
  width: 25%;
  height: 50%;
  float: left;
  background: #aaa;
  background: url(../img/img33.jpg) no-repeat center;
  background-size: cover;
}

div.box3>p:nth-child(2) {
  width: 25%;
  height: 50%;
  background: rgb(255, 209, 184);
  background: url(../img/img34.jpg) no-repeat center;
  background-size: cover;
}

div.box3>p:nth-child(3) {
  background: #bbb;
  background: url(../img/img31.jpg) no-repeat center;
  background-size: cover;
}

div.box3>p:nth-child(4) {
  background: #7C7479
}

div.box3>p:nth-child(5) {
  background: #e09cb3;
  background-image: url();
  background-size: cover;
  background-position: center center;
}

div.box3>p:nth-child(6) {
  background: #D5BCA3;
  background-image: url();
}

div.box3>p:nth-child(7) {
  float: right;
  height: 50%;
  background: #2dd5cb;
  background: url(../img/img37.jpg) no-repeat center;
  background-size: cover;
}

div.box3>p:nth-child(8) {
  float: right;
  height: 50%;
  background: #ccc;
  background: url(../img/img35.jpg) no-repeat center;
  background-size: cover;
}

div.box3>p:nth-child(9) {
  background: #EDB8B2;
}

div.box3>p:nth-child(10) {
  background: #E0967D;
}

div.box3>p:nth-child(11) {
  background:#fff;
  background: url(../img/img32.jpg) no-repeat center;
  background-size: contain;
}

div.box3>p:nth-child(12) {
  background: #cb7775;
}

div.box3>p>span {
  font-size: 32px;
  color: #fff;
  display: block;
  padding-top: 95px;
}