@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:#fff;  font-family:orbitron; }
a { outline:0; text-decoration:none; color:#bbb;}
img {border:0;}

.wrap {position:fixed; width:100%; height:100%; min-width:1024px; min-height:768px; perspective:900px;}

/* 메뉴 호출 버튼 */
.btnMenu {position:fixed; top:50px; left:40px; display:inline-block; width:20px; height:70px; text-align:center; font-size:40px; color:#fff; z-index:3; animation:ani 0.5s infinite alternate;}
@keyframes ani {
  0% {transform:scale(1); opacity:1; color:#fff;}
  100% {transform:scale(1.5); opacity:0.8; color:#888;}
}


/* 카테고리 그룹 */
nav {position:fixed; width:150px; height:100%; background:#eee; z-index:2;
    transform:rotateY(120deg); transform-origin:left center; opacity:0; z-index:2; transition:all 0.8s;}
nav.on {transform:rotateY(15deg); opacity:1;}

/* 로고 */
nav h1 {width:100px; position:absolute; top:80px; left:50%; margin-left:-50px;}
nav h1 img {width:100%; height:auto;}

/* 카테고리 메뉴 */
nav ul {position:absolute; top:35%; left:0px; width:100%;}
nav ul a {display:block; width:100%; box-sizing: border-box; font-size: 18px; line-height:4; color:#000; text-align:center; transition:all 0.5s;}
nav li a:hover {color:#fff; background:#000;}

/* 콘텐츠 그룹 */
section {position:fixed; width:100%; height:100%; background:#555; z-index:1;
        transform-origin:right center; transition:all 0.5s;}
section.on {transform:rotateY(-10deg);}
section>div {position:absolute; width:100%; height:100%; z-index:1; opacity:0; perspective:700px; transition:all 1.5s;}
section>div.on {z-index:2; opacity:1;}
section>div>p {box-sizing:border-box; text-align:center; overflow:hidden; transform:rotateY(180deg); transition:all 1.5s;}
section>div.on>p {transform:rotateY(0deg);}

/* 콘텐츠 폰트 설정 */
section>div>p>span {display:block; text-align:center; position:absolute; width:100%; top:50%; margin-top:-10px; font-size:20px; color:#eee;}
section>div>p>strong {display:block; text-align:center; position:absolute; width:100%; top:50%; margin-top:-25px; font-size:50px; color:#fff;}


/* 콘텐츠 웹 아이콘 설정 */
section>div>p>em>a>i {font-size:30px!important; color:#eee; margin:0px 15px;
position:relative; top:50%; margin-top:-15px; opacity:0.5; transition:all 0.5s;}
section>div>p>em>a>i:hover {transform:scale(1.2); opacity:1;}

/* box1 */
.box1>p {height:25%; float:left; text-align:center; position:relative;}
.box1>p:nth-child(1) {width:50%; background:#fff; padding:100px;}
.box1>p:nth-child(2) {width:25%; background:#ccc; background:url(../img/mixxo1.png) no-repeat right center; background-size:cover;}
.box1>p:nth-child(3) {width:25%; background:#444;}
.box1>p:nth-child(3) ul {position:absolute; top:50%;}
.box1>p:nth-child(4) {width:50%; height:50%; background:url(../img/mixxo2.png) no-repeat center top; background-size:cover; float:right;}
.box1>p:nth-child(5) {width:25%; background:url(../img/mixxo3.png) no-repeat left center; background-color:#fff; background-size:cover;        float:right;}
.box1>p:nth-child(6) {width:25%; background:#888; float:right;}
.box1>p:nth-child(7) {width:25%; background:url(../img/mixxo4.png) no-repeat center center; background-size:cover; float:right;}
.box1>p:nth-child(8) {width:25%; background:url(../img/mixxo6.png) no-repeat center center; background-size:cover; float:right;}
.box1>p:nth-child(9) {width:25%; background:#888;}
.box1>p:nth-child(10) {width:50%; background:url(../img/mixxo5.png) no-repeat right center; background-size:cover;}
.box1>p:nth-child(11) {width:25%; background:#777;}

/* box2 */
.box2>p {text-align:center; height:25%; float:left;}
.box2>p:nth-child(1) {width:20%; height:30%; background:#a8a7a7; text-align:center;}
.box2>p:nth-child(2) {width:30%; height:30%;  background:url(../img/new1.jpg) no-repeat center center; background-size:cover;}
.box2>p:nth-child(3) {width:50%; height:30%; background:#444; padding:100px;}
.box2>p:nth-child(4) {width:25%; height:40%;  background:url(../img/new2.jpg) no-repeat center center;  background-size:cover;}
.box2>p:nth-child(5) {width:50%; height:40%; background:url(../img/new3.jpg) no-repeat center center; background-size:cover;}
.box2>p:nth-child(6) {width:25%; height:40%; background:url(../img/new4.jpg) no-repeat center center;  background-size:cover; }
.box2>p:nth-child(7) {width:25%; height:40%; background:url(../img/new5.jpg) no-repeat center center;  background-size:cover; }
.box2>p:nth-child(8) {width:25%; height:30%; background:#a8a7a7}
.box2>p:nth-child(9) {width:25%; height:30%; background:url(../img/new6.jpg) no-repeat center center;   background-size:cover;}
.box2>p:nth-child(10) {width:25%; height:30%; background:#a8a7a7; }


/* box3 */
.box3>p {width:25%; height:25%; float:left;}
.box3>p:nth-child(1) {width:50%; height:100%; background:url(../img/best1.jpg) no-repeat center center; background-size:cover;}
.box3>p:nth-child(2) {width:25%; height:50%;
background:url(../img/best3.jpg) no-repeat center center;  background-size:cover; }
.box3>p:nth-child(3) {width:25%; background:#555; }
.box3>p:nth-child(4) {width:25%;   background:#fff; padding:100px;}
.box3>p:nth-child(5) {width:25%; height:50%; background:url(../img/best2.jpg) no-repeat center center; background-size:cover; }
.box3>p:nth-child(6) {width:25%;  background:#777; }
.box3>p:nth-child(7) {width:25%;  background:url(../img/best4.jpg) no-repeat center center; background-size: cover;}