@charset "utf-8";
* {margin: 0;padding: 0;outline: none;}
*:not(input,textarea) {  -webkit-touch-callout: inherit; -webkit-user-select: auto;}

body{
	background:##c5e0ff;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,em,img,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,footer,header,nav,ruby,section{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-weight:normal}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
i,em{font-style:normal}
a img{border:none;}
a{ text-decoration:none; color:#fff;}
footer,header,hgroup,menu,nav,section,summary{display:block}
body { width: 100%;  height:100%; font-size: 12px; font-family:"Droid Sans Fallback","\5fae\8f6f\96c5\9ed1",Arial,sans-serif; color:#fff; }

.w1200{ max-width:100%;height: 100%; margin:0;  position: relative;}
.w100{ width: 100%}
.hh{ height: auto; overflow: hidden;}
img{ width: 100%;}

.section{width:100%; max-width: 750px; position:relative; margin: 0 auto}
.section-1{ background:url(../image/bg_p1.png) no-repeat center top; background-size: 100%;}
.section-2{ background:url(../images/bj_m2.jpg) no-repeat center top; background-size: 100%;}
.section-3{ background:url(../images/bj_m3.jpg) no-repeat center top; background-size: 100%;}
.section-4{ background:url(../images/bj_m4.jpg) no-repeat center top; background-size: 100%;}
.section-5{ background:url(../images/bj_m5.jpg) no-repeat center top; background-size: 100%;}


.fixnav,.down_box .downbtn img.ewm,#fp-nav{ display: none}

.down_box{width:100%; height:100%; text-align: center; position:absolute; left:0; top:0; padding-top:10%;box-sizing:border-box;  }
.down_box .logo_b{ width:100%; height:25%; background: url(../image/tit-m.png) no-repeat center top; background-size: auto 20%; margin-bottom:86%}
.down_box .downbtn a{width: 2.3rem;height: .70rem;line-height:.70rem;text-indent: .50rem;text-align: center;font-size:.24rem;color: #ffffff;display:inline-block;border:1px solid #ffffff;border-radius:.1rem;position: relative;}
.down_box .downbtn a em{ width:.36rem; height: .36rem; display: block; background: url(../image/apple.png) no-repeat; background-size: 100% 100%; position: absolute; top: .15rem; left:.20rem;}
.down_box .downbtn a.down_andr em{background: url("../image/andro.png") no-repeat;background-size: 100% 100%; }
.down_box .downbtn a.down_ios{margin-left: .2rem;}


.textfix{width:100%; height:30%; position: absolute; top:0; }
.phonefix{ position: absolute; bottom:0; }
.text2{ background:url(../images/text2.png) no-repeat center center; background-size:100%;}
.text3{ background:url(../images/text3.png) no-repeat center center; background-size: 100%;}
.text4{ background:url(../images/text4.png) no-repeat center center; background-size: 100%;}
.text5{ background:url(../images/text5.png) no-repeat center center; background-size: 100%;}


.phone1{width: 100%;height: 7rem;position:absolute;top: 15%;background:url(../image/phone_m1.png) no-repeat center top;background-size: auto 100%;}
.phone2,.phone3,.phone4,.phone5{width:100%; height:70%; }
.phone2{ background:url(../images/phone_m2.png) no-repeat center center; background-size:auto 100%;}
.phone3{ background:url(../images/phone_p3.png) no-repeat center center; background-size:auto 100%;}
.phone4{ background:url(../images/phone_p4.png) no-repeat center center; background-size:auto 100%;}
.phone5{ background:url(../images/phone_m5.png) no-repeat center center; background-size:auto 100%;}


/*.active .textmove{animation:fromTop 1.5s 0.5s forwards;}
.active .phonemove{animation:fromDown 1.5s 0.5s forwards;}
*/



/********************************* keyframes **************************************/
@keyframes fromTop{
	from{ top:-220px; opacity:0;}
	to{ top:50%; opacity:1}
}
@keyframes fromDown{
	from{ bottom:-500px; opacity:0;}
	to{ bottom:0; opacity:1}
}