@charset "utf-8";

*{margin:0;padding:0}
body{font-size:13px;font-family:arial;-webkit-text-size-adjust:none;line-height:1.62;background-color: #000;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body,html{width:100%;height:100%;overflow:hidden;}
table{border-collapse:collapse;border-spacing:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ul,ol,li{list-style:none;}
em{font-style:normal}
img{border:none;}
input,img{vertical-align:middle;}
input,select,textarea{outline:0;-webkit-appearance:none}
q:before, q:after { content:'' }
.fn-clear:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.fn-clear{*zoom:1}
a{color:#666;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
a:active{color:#333;-webkit-tap-highlight-color:rgba(0,0,0,0);}
section,aside,header,footer,hgroup,article{display:block}
.show{display: block}
.hide{display: none}
/*index*/
.p-index {height: 100%; width: 100%; overflow: hidden }
/*模块 m-*/
.m-page { position:absolute; left:0; top:0; height:100%; width:100%}
.m-page.show { z-index:10; display:block; }
.m-page.hide { z-index:5; display:none; }
.m-page.active { z-index:15; display:block; }

.m-box{position:absolute;left:10%;top:50%;width:80%;margin:-120px auto 0;text-align: center;color:#fff;}
.m-img{ width:100%; height:100%;background-position: center;background-position: no-repeat;background-size: 100% 100%}
.m-ico{width:66px;height:66px;margin:0 auto;background-position: center;background-position: no-repeat;background-size: 66px}
/* global */
.p-index{display:none}
.m-page img{position:absolute}
.m-tips{opacity:0;display:block;position:absolute;bottom:-3%;left:50%;margin-left:-29px;width:60px;height:40px;background:url(../images/arrow.png) no-repeat;background-size:58px auto;
		-webkit-animation:tips ease-out 1s infinite;-webkit-animation-delay:2.4s}
@-webkit-keyframes tips{
	0%{
		opacity:0;
		-webkit-transform:translate(0,0px);
	}
	100%{
		opacity:1;
		-webkit-transform:translate(0,-20px);
	}
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity:0;
-webkit-transform:translateY(-200px);
}
100% {
opacity:1;
-webkit-transform:translateY(0);
}
}

@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-90deg);
opacity:0;
}
100% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0);
opacity:1;
}
}
/* page01 */
.m-page01 .m-img{background-image:url(../images/page1.jpg)}
.m-01-img1{opacity: 0;width: 13%;position: absolute;top: 4%;left: 45%;-webkit-animation:fadeInDownBig ease-in-out 1.2s forwards;-webkit-animation-delay:.8s}
.m-01-img2{opacity: 0;position: absolute;bottom: 40%;right: 37%;width: 19%; -webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2s}
.m-01-img3{opacity: 0;width: 11%;position: absolute;bottom: 55%;right: 41%; -webkit-animation:fadeIn ease-in-out 2s forwards;}
.m-01-img4{opacity: 0;width: 25%;position: absolute;bottom: 15%;right: 35%; -webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2.4s}
/* page02 */
.m-page02 .m-img{background-image:url(../images/page2.jpg)}
.m-02-img1{opacity: 0;width: 15%;position: absolute;top: 4%;left: 44%;-webkit-animation:fadeInDownBig ease-in-out 1.2s forwards;-webkit-animation-delay:.8s}
.m-02-img2{opacity: 0;position: absolute;bottom: 75%;right: 17%;width: 66%;-webkit-animation:fadeIn ease-in-out 1.2s forwards;-webkit-animation-delay:2s}
.m-02-img3{opacity: 0;width: 28%;position: absolute;bottom: 53%;right: 37%; -webkit-animation:getBig ease-in-out 2s forwards;}
.m-02-img4{opacity: 0;width: 43%;position: absolute;bottom: 36%;right: 28%;-webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2.4s}
/* page03 */
.m-page03 .m-img{background-image:url(../images/page3.jpg)}
.m-03-img1{opacity: 0;width: 15%;position: absolute;top: 4%;left: 44%;-webkit-animation:fadeInDownBig ease-in-out 1.2s forwards;-webkit-animation-delay:.8s}
.m-03-img2{opacity: 0;position: absolute;bottom: 75%;right: 17%;width: 66%;-webkit-animation:fadeIn ease-in-out 1.2s forwards;-webkit-animation-delay:2s}
.m-03-img3{opacity: 0;width: 38%;position: absolute;bottom: 53%;right: 30%; -webkit-animation:getBig ease-in-out 2s forwards;}
.m-03-img4{opacity: 0;width: 43%;position: absolute;bottom: 36%;right: 28%;-webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2.4s}

/* page04 */
.m-page04 .m-img{background-image:url(../images/page4.jpg)}
.m-04-img1{opacity: 0;width: 36%;position: absolute;top: 4%;left: 31%;-webkit-animation:fadeInDownBig ease-in-out 1.2s forwards;-webkit-animation-delay:.8s}
.m-04-img2{opacity: 0;position: absolute;bottom: 75%;right: 17%;width: 66%;-webkit-animation:fadeIn ease-in-out 1.2s forwards;-webkit-animation-delay:2s}
.m-04-img3{opacity: 0;width: 38%;position: absolute;bottom: 53%;right: 30%; -webkit-animation:getBig ease-in-out 2s forwards;}
.m-04-img4{opacity: 0;width: 54%;position: absolute;bottom: 36%;right: 26%;-webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2.4s}

/* page05 */
.m-page05 .m-img{background-image:url(../images/page5.jpg)}
.m-05-img1{opacity: 0;width: 39%;position: absolute;top: 4%;left: 31%;-webkit-animation:fadeInDownBig ease-in-out 1.2s forwards;-webkit-animation-delay:.8s}
.m-05-img2{opacity: 0;position: absolute;bottom: 75%;right: 17%;width: 66%;-webkit-animation:fadeIn ease-in-out 1.2s forwards;-webkit-animation-delay:2s}
.m-05-img3{opacity: 0;width: 38%;position: absolute;bottom: 53%;right: 30%; -webkit-animation:getBig ease-in-out 2s forwards;}
.m-05-img4{opacity: 0;width: 63%;position: absolute;bottom: 36%;right: 19%;-webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2.4s}
/* page06 */
.m-page06 .m-img{background-image:url(../images/page6.jpg)}
.m-06-img1{opacity: 0;width: 15%;position: absolute;top: 4%;left: 44%;-webkit-animation:fadeInDownBig ease-in-out 1.2s forwards;-webkit-animation-delay:.8s}
.m-06-img2{opacity: 0;position: absolute;bottom: 75%;right: 17%;width: 66%;-webkit-animation:fadeIn ease-in-out 1.2s forwards;-webkit-animation-delay:2s}
.m-06-img3{opacity: 0;width: 38%;position: absolute;bottom: 53%;right: 30%; -webkit-animation:getBig ease-in-out 2s forwards;}
.m-06-img4{opacity: 0;width: 70%;position: absolute;bottom: 36%;right: 13%;-webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2.4s}
/* page07 */
.m-page07 .m-img{background-image:url(../images/page7.jpg)}
.m-07-img1{opacity: 0;width: 24%;position: absolute;top: 3%;left: 38%;-webkit-animation:fadeInDownBig ease-in-out 1.2s forwards;-webkit-animation-delay:.8s}
.m-07-img2{opacity: 0;position: absolute;bottom: 75%;right: 13%;width: 75%;-webkit-animation:fadeIn ease-in-out 1.2s forwards;-webkit-animation-delay:2s}
.m-07-img3{opacity: 0;width: 31%;position: absolute;bottom: 53%;right: 36%; -webkit-animation:getBig ease-in-out 2s forwards;}
.m-07-img4{opacity: 0;width: 74%;position: absolute;bottom: 36%;right: 14%;-webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2.4s}
/* page08 */
.m-page08 .m-img{background-image:url(../images/page8.jpg)}
.m-08-img1{opacity: 0;width: 15%;position: absolute;top: 4%;left: 44%;-webkit-animation:fadeInDownBig ease-in-out 1.2s forwards;-webkit-animation-delay:.8s}
.m-08-img2{opacity: 0;position: absolute;bottom: 75%;right: 18%;width: 59%;-webkit-animation:fadeIn ease-in-out 1.2s forwards;-webkit-animation-delay:2s}
.m-08-img3{opacity: 0;width: 34%;position: absolute;bottom: 53%;right: 32%;-webkit-animation:getBig ease-in-out 2s forwards;}
.m-08-img4{opacity: 0;width: 62%;position: absolute;bottom: 40%;right: 19%;-webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2.4s}
/* page09 */
.m-page09 .m-img{background-image:url(../images/page9.jpg)}
.m-09-img1{opacity: 0;width: 48%;position: absolute;top: 4%;left: 28%;-webkit-animation:fadeInDownBig ease-in-out 1.2s forwards;-webkit-animation-delay:.8s}
.m-09-img2{opacity: 0;position: absolute;bottom: 70%;right: 30%;width: 38%;-webkit-animation:fadeIn ease-in-out 1.2s forwards;-webkit-animation-delay:2s}
.m-09-img3{opacity: 0;width: 11%;position: absolute;bottom: 54%;right: 43%; -webkit-animation:fadeIn ease-in-out 2s forwards;}
.m-09-img4{opacity: 0;width: 78%;position: absolute;bottom: 36%;right: 12%;-webkit-animation:slideUp ease-in-out 1.2s forwards;-webkit-animation-delay:2.4s}


/*动画*/
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes slideUp{
	0%{opacity:0;-webkit-transform:translate(0,20px);}
	100%{opacity:1;-webkit-transform:translate(0,0);}
}
@-webkit-keyframes slideDown{
	0%{opacity:0;-webkit-transform:translate(0,-20px);}
	100%{opacity:1;-webkit-transform:translate(0,0);}
}
@-webkit-keyframes getBig{
0% { -webkit-transform:scale(0,0); opacity:0;}
40% { -webkit-transform:scale(1.5,1.5);opacity:1;}
70% { -webkit-transform:scale(.5,.5);opacity:1;}
100% { -webkit-transform:scale(1,1);opacity:1;}
	}
	
	
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(90deg);
opacity:0;
}
100% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0);
opacity:1;
}
}

@-webkit-keyframes bounceInRight {
0% {
opacity:0;
-webkit-transform:translateX(2000px);
}
60% {
opacity:1;
-webkit-transform:translateX(-30px);
}
80% {
	opacity:1;
-webkit-transform:translateX(10px);
}
100% {
	opacity:1;
-webkit-transform:translateX(0);
}
}

@-webkit-keyframes bounceInLeft {
0% {
opacity:0;
-webkit-transform:translateX(-200px);
}
60% {
opacity:1;
-webkit-transform:translateX(10px);
}
80% {
	opacity:1;
-webkit-transform:translateX(-10px);
}
100% {
opacity:1;
-webkit-transform:translateX(0);
}
}


@-webkit-keyframes vanishIn {
0% {
opacity:0;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(2, 2);
-webkit-filter:blur(90px);
}
100% {
opacity:1;
-webkit-transform-origin:50% 50%;
-webkit-transform:scale(1, 1);
-webkit-filter:blur(0px);
}
}

@-webkit-keyframes rotateIn {
0% {
opacity:0;
-webkit-transform:scale(0, 0);
}
100% {
opacity:1;
-webkit-transform:scale(1, 1);
}
}


@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform:translateX(100%) skewX(-30deg);
opacity:0;
}
60% {
-webkit-transform:translateX(-20%) skewX(30deg);
opacity:1;
}
80% {
-webkit-transform:translateX(0%) skewX(-15deg);
opacity:1;
}
100% {
-webkit-transform:translateX(0%) skewX(0deg);
opacity:1;
}
}


@-webkit-keyframes leftSpeedIn {
0% {
-webkit-transform:translateX(0%) skewX(-30deg);
opacity:0;
}
60% {
-webkit-transform:translateX(20%) skewX(30deg);
opacity:1;
}
80% {
-webkit-transform:translateX(0%) skewX(-15deg);
opacity:1;
}
100% {
-webkit-transform:translateX(0%) skewX(0deg);
opacity:1;
}
}

@-webkit-keyframes FX-Move{
    0%, 100% {-webkit-transform: translateY(0);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(-4px);-webkit-transform: translateX(4px);}
    20%, 40%, 60%, 80% {-webkit-transform: translateX(-4px);-webkit-transform: translateY(4px);}
}



@-webkit-keyframes FX-spin{
    0% {
        opacity:.4;
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0deg); 
    }

  
    100% {
        opacity:1;
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(360deg);
    }
}

.player-button{position:absolute;z-index:10000;display:block;top:10px;right:10px;width:25px;height:25px;background:url(../img/tesla-button.png) 0 0;background-size:50px 25px;cursor:pointer;/*background-position: center;*/background-repeat: no-repeat;}
.player-button-stop{background-position:-25px 0}
.player-tip{position:absolute;top:5px;left:-130px;width:110px;background:rgba(59,89,114,.6);border-radius:4px 0 0 4px;font-size:10px;color:#ccc;line-height:20px;text-align:center}
.player-tip:after{content:"";position:absolute;right:-32px;width:0;height:0;border-left:16px solid rgba(59,89,114,.6);border-top:10px solid transparent;border-right:16px solid transparent;border-bottom:10px solid transparent;}