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

/*    Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
body {position:fixed;  width:100%; height:100%; background:#111;  font-family:Ubuntu; }
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:35px; left: 40px; display: inline-block; width: 30px; height:30px; text-align: center; font-size: 40px; color:#000; z-index: 3; animation: ani 0.5s infinite alternate;}
@keyframes ani {
  0% {transform: scale(1); opacity: 1; color: #111;}
  100% {transform: scale(1.2); opacity: 0.8; color: #888;}
}

/*카테고리*/
nav {position: fixed; width: 100%; height:15%; background: #f8f8f8; z-index: 2; transform: rotateX(0deg); transform-origin: top center; opacity:1; transition: all 0.8s;}
nav.on {transform: rotateX(-10deg); opacity: 0.5;}
nav ul li {font: 30px; float: left; margin-left: 30px;}

/*로고*/
nav h1 {width: 10px; position: absolute; top: auto; left:12%; margin-left: -50px;}

/*카테고리 메뉴*/
nav #gnb {position: absolute; top: 25px; left: 16%; width: 600px;}
nav #bar {position: absolute; top: 90px; left: 16%; width: 600px;}
nav #bar li {width: 70px; height: 20px; box-sizing: border-box;  padding: 10px; margin-left: 30px; opacity: 1;}
nav #bar .a {margin-left: 40px;}
nav #bar .b {margin-left: 50px;}
nav #bar .c {margin-left: 50px;}
nav #bar li.on {width: 70px; background: #F45500; animation: ani2 1.5s alternate infinite;}

/*sns*/
.wrap #sns {position: absolute; top: 20px; right: 30px; }
.wrap #sns li {float: left; margin-left: 20px;}
.wrap #sns li i {font-size: 18px; color: #555; z-index: 500;}

@keyframes ani2 {
  0% {opacity: 0; transform: scaleX(0);}
  100% {opacity: 1;  transform: scaleX(1);}
}
nav li a {display: inline-block; box-sizing: border-box; font-size: 20px; color: black; text-align: center; transition: all 0.5s; border: 1px solid black; padding: 10px; width: 90px; height: 90px;}
nav li a:hover {background: black; color: #fff;}


/*콘텐츠 그룹*/
section {position: fixed; width: 100%; height: 85%; z-index: 1; transform-origin: bottom center; transition: all 0.5s; background: #555; top: 15%;}
section.on {transform: rotateX(5deg);}
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);}

/*box1*/
.box1>p {height:30%; float: left; border:2px solid white;}
.box1>p>strong {display: block; text-align: center; position: absolute; width: 100%; top: 50%; font-size: 50px; margin-top: -25px; color: #000;}
.box1>p:nth-child(1) {width: 25%; background:url(../img/p1.jpg) no-repeat center center; background-size: cover;}
.box1>p:nth-child(2) {width: 25%; background: #999;}
.box1>p:nth-child(3) {width: 50%; height: 70%; float: right; background: url(../img/p43.jpg) no-repeat center center; background-size: cover;}
.box1>p:nth-child(4) {width: 15%; height: 40%;  background: url(../img/p23.jpg) no-repeat center center; background-size: cover;}
.box1>p:nth-child(5) {width: 35%; height: 40%; background:  url(../img/26.jpg) no-repeat center center; background-size: cover;}
.box1>p:nth-child(6) {width: 25%; background: #888; background: url(../img/p15.jpg) no-repeat center center; background-size: cover;}
.box1>p:nth-child(7) {width: 50%; background: #777;  background: url(../img/p22.jpg) no-repeat center center; background-size: cover;}
.box1>p:nth-child(8) {width: 25%; background: url(../img/p24.jpg) no-repeat center center; background-size: cover;}

/*box2*/
.box2>p {height: 30%; float: left; }
.box2>p>span {display: block; text-align:center; position: absolute; width: 100%; top: 20%; font-size: 30px;}
.box2>p>span.p1 {letter-spacing: 8px; margin-top: 50px; border-top: 1px solid #111;}
.box2>p>span.p1 em {font-weight: bold;}
.box2>p>span.p2 {display: block; text-align: center; position: absolute; width: 100%; height: 50%; color: #fff;  font-size: 30px;}
.box2>p>strong {display: block; text-align: center; position: absolute; width: 100%; top: 50%; font-size: 50px; margin-top: -25px; color: white;}
.box2>p:nth-child(1) {width: 50%; background: url(https://www.mystartups.ph/images/post_mortem/3.jpg) no-repeat center center; background-size: cover; }
.box2>p:nth-child(2) {width: 20%; background: url(../img/p30.jpg) no-repeat center center; background-size: cover; }
.box2>p:nth-child(3) {width: 30%; background:url(../img/p40.jpg) no-repeat center center; background-size: cover; }
.box2>p:nth-child(4) {width: 20%; height: 40%; background: url(../img/p12.jpg) no-repeat center center; background-size: cover; }
.box2>p:nth-child(5) {width: 20%; height: 40%; background:  url(../img/p39.jpg) no-repeat center center; background-size: cover; }
.box2>p:nth-child(6) {width: 30%; height: 40%; background: #888; }
.box2>p:nth-child(7) {width: 30%; height: 10%; background: #06265E;}
.box2>p:nth-child(8) {width: 30%; background: url(../img/p31.jpg) no-repeat center center; background-size: cover; }
.box2>p:nth-child(9) {width: 30%;  background: url(../img/p11.jpg) no-repeat top center; background-size: cover; float: right;}
.box2>p:nth-child(10) {width: 20%; background: url(../img/p38.jpg) no-repeat top center; background-size: cover; float: right; float: right;}
.box2>p:nth-child(11) {width: 50%; background:url(http://www.yespestpros.com/wp-content/uploads/2017/09/closet-912694_1280.jpg) no-repeat center center; background-size: cover; float: right; }

/*box3*/
.box3>p {height: 30%; float: left;  }
.box3>p>span {display: block; text-align: center; position: absolute; width: 100%; top: 50%; color: white; font-size: 30px;}
.box3>p>span.p1 {display: block; text-align:center; position: absolute; width: 100%; top: 50%; color: #000;  font-size: 30px;}
.box3>p>strong {display: block; text-align: center; position: absolute; width: 100%; top: 50%; font-size: 50px; margin-top: -25px; color: white;}
.box3>p:nth-child(1) {width: 40%; height: 70%; background:url(http://cdn3.digitalartsonline.co.uk/cmsdata/slideshow/3639999/playing-cards-social.jpg) no-repeat bottom center; background-size: cover; }
.box3>p:nth-child(2) {width: 30%; background: #000;}
.box3>p:nth-child(3) {width: 30%; background: url(../img/p5.jpg) no-repeat center center; background-size: cover;}
.box3>p:nth-child(4) {width: 20%; height: 40%; background: #666;}
.box3>p:nth-child(5) {width: 40%; height: 40%; background: url(http://www.dailydesigninspiration.com/diverse/gd/dananglaksono/Visual-Dreams.jpg) no-repeat center center; background-size: cover;}
.box3>p:nth-child(6) {width: 20%; background: url(../img/p14.jpg) no-repeat center center; background-size: cover; float: right;}
.box3>p:nth-child(7) {width: 40%; background: url(https://s-media-cache-ak0.pinimg.com/originals/9d/8f/ec/9d8fecea170464ef098c4be77e31a3e7.jpg) no-repeat center top; background-size: cover; float: right;}
.box3>p:nth-child(8) {width: 20%; background: url(../img/p7.jpg) no-repeat center center; background-size: cover; float: right;}
.box3>p:nth-child(9) {width: 20%; background: #fff;  float: right;}