@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);
	}
}
/* page01 */
.m-page01 .m-img{background-image:url(../images/1-1.gif)}
.m-01-img1{opacity:0;width: 30%;float: right;margin-right: 10%; padding-top: 29%;-webkit-animation:slideDown ease-in-out .8s forwards;}
.m-01-img2{opacity:0;width: 100%; position:absolute; bottom:17%; -webkit-animation:slideUp ease-in-out .8s forwards;-webkit-animation-delay:1s}

/*.liplace_top{width: 30%;float: right;margin-right: 10%;}
	.liplace_bottom{width: 100%; position:absolute; bottom:7%;}
	.page4_img3{width: 60%;float: right;margin-right: 3%;margin: -20% 5% 5% 0%;}*/

@-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);
	}
}
/* page02 */
.m-page02 .m-img{background-image:url(../images/page2_01.jpg)}
.m-02-img1{opacity:0;width: 35%;position: absolute;top: 10%;left: 32%;-webkit-animation: rotateIn ease-in-out 1.5s forwards;}
.m-02-img2{opacity:0;position: absolute;top: 20%;left: 5%;width:100%;-webkit-animation:vanishIn ease-in-out 1.5s forwards;-webkit-animation-delay:.6s}


/* page03 */
.m-page03 .m-img{background-image:url(../images/page3_01.jpg)}
.m-03-img1{opacity:0;position: absolute;top: 10%;left: 0%;width:100%;-webkit-animation:lightSpeedIn ease-in-out 2s forwards;-webkit-animation-delay:.8s}
.m-03-img2{opacity:0;position: absolute;left:41%;top: 21%;width:25%;-webkit-animation:rotateIn ease-in-out 1.8s forwards;}

/* page04 */
.m-page04 .m-img{background-image:url(../images/page4_01.jpg)}
.m-04-img1{opacity: 0;left: 9%; top:28%;width: 30%;position: absolute;-webkit-animation:slideDown ease-in-out .8s forwards;-webkit-animation-delay:.2s}
.m-04-img2{opacity:0;right: 2%;top: 6%;position: absolute;width: 100%;-webkit-animation:rotateIn ease-in-out 1.8s forwards;-webkit-animation-delay:.6s}


/*动画*/

@-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 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 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;}


/* dialog */
.dialog{display:none;position:absolute;z-index:100;top:0;left:0;width:100%;height:100%;background:url(../img/dialog-bg.jpg);background-size:100% 100%}
.dialog img{position:absolute}
.dialog-txt{position:absolute;top:148px;left:50%;margin-left:-85px;width:170px;height:161px;background:url(../img/dialog-txt.png) no-repeat;background-size:170px auto}
.dialog-share{margin:101px 0 0 14px;display:block;width:138px;height:29px;text-indent:-9999px}
/* copyright */
.copyright{position:absolute;bottom:5px;left:0;width:100%;font-size:13px;color:#000;text-align:right;}
.copyright a{color:#fff}
.mycode{position:absolute;bottom:5px;left:0;width:100%;font-size:13px;color:#000;text-align:left; text-indent:5%;}
.mycode a{color:#fff}
/* loading */
.loading {
    position: fixed;
    top: 30%;
    left: 50%;
    margin: -14px 0 0 -42px;
    padding: 10px;
}
.loading-dot {
    float: left;
    width: 8px;
    height: 8px;
    margin: 0 4px;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;
    -webkit-box-shadow: 0 0 2px black;
    -moz-box-shadow: 0 0 2px black;
    -ms-box-shadow: 0 0 2px black;
    -o-box-shadow: 0 0 2px black;
    box-shadow: 0 0 2px black;
    -webkit-animation: loadingFade 1s infinite;
    -moz-animation: loadingFade 1s infinite;
    animation: loadingFade 1s infinite;
}
.loading-dot:nth-child(1) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    animation-delay: 0s;
}
.loading-dot:nth-child(2) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.loading-dot:nth-child(3) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.loading-dot:nth-child(4) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
@-webkit-keyframes loadingFade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}
@-moz-keyframes loadingFade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}
@keyframes loadingFade {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}