html{color:#333;width:100%;height: 100%;font-size: 12px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
body{font-family:Microsoft Yahei;background: #f4f4f4;width:100%;height: 100%;line-height: 20px;color:#666;position: relative;}
a{color: #666;text-decoration: none;}
a:hover{text-decoration:none; color:c00;}
.fl {float: left;}
.fr {float: right;}
.cc{*zoom:1;}
.cc:after{content:'\20';display:block;height:0;clear:both;visibility: hidden;}
.c{clear:both;}

.page {height: 820px;overflow: hidden;width: 100%;position: relative;}
.center {width: 1000px;margin:0 auto;height: 820px;position: relative;}
#page1 {background: #ffffff;}
#page1 .bg {position: absolute;width: 1920px;height: 820px;background:url(1_4.jpg);top:0px;left:50%;margin-left: -960px;z-index: 0;}
#page1 .center {z-index: 2;}
#page1 .android {position: absolute;top: 40px;left:0px;}
#page1 .ios {position: absolute;top: 130px;left:160px;}
#page1 .down {width: 472px;height: 339px;background:url(1_3.png);position: absolute;right:20px;top:250px;}
#page1 .down a.android_down {left:189px;top:241px;}
#page1 .down a.ios_down {left:189px;top:157px;}
#page2 {background: #d6f0ff;}
#page2 .img {position: absolute;top:50px;left:0px;}
#page3 {background: #ffe1d0;}
#page3 .img {position: absolute;top:50px;left:0px;}
#page3 .txt2 {right:-20px;}
#page4 {background: #d6e4ff;}
#page4 .img {position: absolute;top:50px;left:0px;}
#page5 {background: #f6f6f6;text-align: center;}
#page5 .down {width: 462px;height: 183px;margin:0 auto;background:url(5_3.png);margin-top: 70px;position: relative;}
#page5 .down a.android_down {left:183px;top:1px;}
#page5 .down a.ios_down {left:183px;top:85px;}
#page5 .logo {margin-top: 90px;}
#page5 .txt {margin-top: 50px;}
.down a {width: 279px;height: 75px;display: block;position: absolute;}
.footer {text-align: center;line-height: 30px;padding:30px;}
.txt1 {position: absolute;right:30px;top:350px;font-size: 50px;}
.txt2 {position: absolute;right:0px;top:250px;font-size: 50px;}

#page1.animate-enter .bg {
	-webkit-animation:zoomBigIn 8s ;
	-o-animation:zoomBigIn 8s ;
	animation:zoomBigIn 8s ;
}
#page1.animate-enter .android {
	-webkit-animation: fadeInDown 2s;
	-o-animation: fadeInDown 2s;
	animation: fadeInDown 2s;
}
#page1.animate-enter .ios {
	-webkit-animation: fadeInUp 2s;
	-o-animation: fadeInUp 2s;
	animation: fadeInUp 2s;
}
#page1.animate-enter .down {
	-webkit-animation: fadeInRight 2s;
	-o-animation: fadeInRight 2s;
	animation: fadeInRight 2s;
}
#page2.animate-enter .img,#page3.animate-enter .img,#page4.animate-enter .img{
	-webkit-animation: zoomIn 2s;
	-o-animation: zoomIn 2s ;
	animation: zoomIn 2s;
}
.animate-enter .txt1 {
	-webkit-animation: fadeInLeft 2s forwards;
	-o-animation: fadeInLeft 2s  forwards;
	animation: fadeInLeft 2s forwards;
}
.animate-enter .txt2{
	-webkit-animation: fadeInRight 2s forwards;
	-o-animation: fadeInRight 2s  forwards;
	animation: fadeInRight 2s forwards;
}
#page5.animate-enter .logo,#page5.animate-enter .txt,#page5.animate-enter .down {
	-webkit-animation: fadeInUp 1s;
	-o-animation: fadeInUp 1s;
	animation: fadeInUp 1s;
}

#page2,#page3,#page4 {height: 700px;}