@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Archivo+Black');

/*    Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
body {position:fixed;  width:100%; height:100%; background:#03234c;
      font-family: 'Archivo Black', sans-serif; overflow: hidden; perspective:1000px;}
a { outline:0; text-decoration:none; color:#bbb;}
img {border:0;}

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

.btnMenu {position: fixed; top: 50px; left: 40px; display: inline-block; width: 20px;
        height: 70px; font-size: 40px; color: #f00; z-index: 3;}

nav {position: fixed; width: 200px; height: 100%; background: #fff; z-index: 2;
    transform:rotateY(120deg); transform-origin:left center; opacity: 0;
    transition:all 0.8s;}
nav.on {transform:rotateY(15deg); opacity: 1;}

nav h1 {margin:100px 50px; }
nav img {width: 100px;}
nav ul {position: absolute; top: 35%; left: 0; width: 100%;}
nav li {width: 100%;  text-align: center; padding:20px 0; cursor:pointer;
        transition:all 0.5s;}
nav li:hover {background: #03234c; color: #fff;}

section {position: fixed; width: 100%; height: 100%; z-index: 1; background: #03234c;
        transform-origin:right center; transition:all 0.5s;}
section.on {transform:rotateY(-15deg);}
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>strong {display: block; text-align: center; position: absolute; color: #ccc;
                    width: 100%; top: 50%;  margin-top: -40px; font-size: 30px;}
section>div>p>span {display: block; text-align: center; position: absolute; color: #555;
                  width: 100%; top: 50%; margin-top: -10px; font-size: 20px;}
section>div>p>strong>span {display: block; font-size: 40p; color: #fff;}

/*box1*/
.box1>p {float: left;}
.box1>p:nth-child(1) {width: 30%; height: 20%; background: #ddd;}
.box1>p:nth-child(2) {background:#ccc;
                    width: 35%; height: 20%; background-size:cover;}
.box1>p:nth-child(3) {background: #04345d; width: 35%; height: 30%; float: right;}
.box1>p:nth-child(4) {background:url(../img/m1.jpg) no-repeat center center;
                    width: 30%; height: 80%; background-size:cover;}
.box1>p:nth-child(5) {background:url(../img/m3.jpg) no-repeat center center;
                    width: 35%; height: 60%; background-size:cover;}
.box1>p:nth-child(6) {background:url(../img/m2.jpg) no-repeat center center;
                    width: 35%; height: 70%; background-size:cover; float: right;}
.box1>p:nth-child(7) {width: 35%; height: 20%; background: #ccc;}

/*box2*/
.box2>p {float: left;}
.box2>p:nth-child(1) {background: #04345d; width: 35%; height: 40%;}
.box2>p:nth-child(2) {background:url(../img/w1.jpg) no-repeat center center;
                    width: 35%; height: 40%; background-size: cover;}
.box2>p:nth-child(3) {background:url(../img/w2.jpg) no-repeat center center;
                    width: 30%; height: 70%; float: right; background-size: cover;}
.box2>p:nth-child(4) {background:url(../img/w4.jpg) no-repeat center center;
                    width: 35%; height: 60%; background-size:cover;}
.box2>p:nth-child(5) {background:#fff; width: 35%; height: 20%;}
.box2>p:nth-child(6) {background:url(../img/w3.jpg) no-repeat center center;
                    width: 35%; height: 40%; background-size: cover;}
.box2>p:nth-child(7) {background:#fff;
                    width: 30%; height: 30%; float: right; background-size: cover;}

/*box3*/
.box3>p {float: left;}
.box3>p:nth-child(1) {width: 35%; height: 40%; background: #ddd;}
.box3>p:nth-child(2) {width: 35%; height: 40%; background: #ccc;}
.box3>p:nth-child(3) {width: 30%; height: 70%; float: right; background: #bbb;}
.box3>p:nth-child(4) {width: 70%; height: 60%; background: #aaa;}
.box3>p:nth-child(5) {width: 30%; height: 30%; float: right; background: #999;}