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

/*    wrap */
.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;transition:all 0.8s;}
nav.on {transform:rotateY(15deg); opacity:1;}

/*  logo  */
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 li 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%;}

section>div {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 {box-sizing:border-box; text-align:center;overflow:hidden;transform:rotateY(180deg);transition:all 1.5s;}
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%;font-size:50px;color:#fff;margin-top:-25px;}

	/* 콘텐츠 동영상 설정 */
section>div>p>video {width:100%;}

	/* 콘텐츠 웹 아이콘 설정 */
section>div>p>em>a>i {font-size:30px!import; 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:#333;}
.box1>p:nth-child(2) {width:25%;background:#ccc;background:url(../img/m1.jpg) 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%;background:url(../img/m2.jpg) no-repeat center top;background-size:cover;height:50%;float:right;}
.box1>p:nth-child(5) {width:25%;background:url(../img/m3.jpg) no-repeat left center;background-color:#fff;background-size:contain;float:right;}
.box1>p:nth-child(6) {width:25%;background:#888;float:right;}
.box1>p:nth-child(7) {width:25%;background:#444;float:right;}
.box1>p:nth-child(8) {width:25%;background:url(../img/m4.jpg) no-repeat center center;background-size:cover;float:right;}
.box1>p:nth-child(9) {width:25%;background:#444;}
.box1>p:nth-child(10) {width:50%;background:url(../img/m5.jpg) no-repeat right center;background-size:cover;}
.box1>p:nth-child(11) {width:25%;background:#222;}

/* box2 */
.box2>p {text-align:center; height:25%; float:left;}
.box2>p:nth-child(1) { width:25%; background:#444;}
.box2>p:nth-child(2) { width:25%; background:url(../img/w1.jpg) no-repeat center bottom; background-color:#fff; background-size:contain;}
.box2>p:nth-child(3) { width:50%; background:#222;}
.box2>p:nth-child(4) { width:25%; height:49.9%; background:url(../img/w2.jpg) no-repeat right top; background-color:#fff;	background-size:cover;}
.box2>p:nth-child(5) { width:50%; height:49.9%; background:#fff;	background:url(../img/w3.jpg) no-repeat center center;	background-size:cover;}
.box2>p:nth-child(6) { width:25%; background:url(../img/w4.jpg) no-repeat center center;	background-color:#fff;	background-size:contain;}
.box2>p:nth-child(7) { width:25%; background:#555;}
.box2>p:nth-child(8) { width:25%; background:#fff;	background:url(../img/w5.jpg) no-repeat center center; background-size:cover;}
.box2>p:nth-child(9) { width:25%; background:#555;}
.box2>p:nth-child(10) { width:25%;	background:url(../img/w6.jpg) no-repeat center top; background-size:cover;}
.box2>p:nth-child(11) { width:25%;	background:#fff;	background:url(../img/w7.jpg) no-repeat center center; background-size:cover;}

/* box3 */
.box3>p {	width:25%;height:25%; float:left;}
.box3>p:nth-child(1) { width:50%;height:100%; background:#fff; background:url(../img/k1.jpg) no-repeat center top; background-size:cover;}
.box3>p:nth-child(2) { background:#555;}
.box3>p:nth-child(3) { background:url(../img/k2.jpg) no-repeat center center; background-size:cover;}
.box3>p:nth-child(4) { width:50%; background:#222;}
.box3>p:nth-child(5) { height:50%; background:url(../img/k3.jpg) no-repeat center top; background-size:cover;}
.box3>p:nth-child(6) { background:#777;}
.box3>p:nth-child(7) { background:url(../img/k4.jpg) no-repeat center center;	background-size:cover;}