body{margin:0px auto; font-size:12px; font-family:"Microsoft YaHei",Arial, Verdana, Helvetica, sans-serif;}
input,textarea{font-family:"Microsoft YaHei",Arial, Verdana, Helvetica, sans-serif;}
ul,ol,dl,dd,h1,h2,h3,h4,p{padding:0px; margin:0px;}
ul,li,ol{list-style:none outside none;}
img{border:0px;}
a{color:#fff; text-decoration:none;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
a:hover{text-decoration:none;}

html,body{-webkit-text-size-adjust: none;}
.clear{clear:both;  height:0px; font-size:1px; overflow:hidden; line-height:0px;}

/*顶部导航*/
.topnav_width{position:fixed;top:0;left:0;width:100%;height:80px;line-height:80px;background:url(../images/bg_nav.png) 0 0 repeat-x; color:#fff; z-index:9999;}
.topnav{ max-width:1240px;min-width:700px; position:relative; margin:0px auto;}
a.nav_logo{ float:left;  margin-left:50px; display:inline-block; width:200px; height:80px;}
a.nav_logo i{ display:block; width:200px; height:80px; background:url(../images/logo_nav.png) 0 0 no-repeat;}
ul.nav_list{ float:right; width:400px; height:80px; text-align:right;}
ul.nav_list li{ float:right; margin:0px; padding:0px; width:100px; text-align:center; height:80px; list-style:none;}
ul.nav_list li a{ display:block; height:80px; color:#fff; font-size:17px;padding:0px 15px;}
ul.nav_list li a:hover{ background-color:rgba(0,0,0,.05);background: transparent\9; border-bottom:#fff solid 1px;}
ul.nav_list span{float:right; width:2px; height:80px;}

html.fsvs #fsvs-pagination li:first-child>span>span{position: relative; top: -4px; background: url(../images/ico_house.png); width: 20px; height: 20px; margin: 0; padding: 2px; border: 0; border-radius: 0;}
html.fsvs #fsvs-pagination li:hover span span{ }

/*返回顶部*/
.quick_list{position:fixed; z-index:100; right:20px; bottom:100px;}
.quick_list a{ position:relative;display:block; width:50px; height:70px;  margin-bottom:10px;-webkit-transition: 0.3s all ease-in;-o-transition: 0.3s all ease-in;-moz-transition: 0.3s all ease-in;transition: 0.3s all ease-in; }
.quick_list a i{ display:block; width:50px; height:70px;background:url(../images/backtotop.png) 0 0 no-repeat; }


.bg{position: absolute; left: 0; top: 0; z-index:1000; width: 100%; height: 100%;}
.bg img{ display: block; width: 100%; height: 100%;}

/*第1屏左侧手机模型*/

.area1_left{ position:absolute; z-index:1005; right:50%; top:17%; width:50%; height:600px; text-align:right;}
.phone_box{position:absolute; z-index:2000; top:0px; right:10%;transform: translate(0,0); -webkit-transform: translate(0,0); -moz-transform: translate(0,0);-webkit-transition:-webkit-transform 0.7s;-moz-transition:transform 0.7s;-ms-transition:transform 0.7s;transition:transform 0.7s;}
.android_box{ position:absolute;z-index:1500;top:57px; right:30%;transform: translate(0,0); -webkit-transform: translate(0,0); -moz-transform: translate(0,0);-webkit-transition:-webkit-transform 0.7s;-moz-transition:transform 0.7s;-ms-transition:transform 0.7s;transition:transform 0.7s;}
.area1_left:hover .phone_box{-webkit-transform:translate(20px,-20px);-moz-transform:translate(20px,-20px);transform:translate(20px,-20px);}
.area1_left:hover .android_box{-webkit-transform:translate(-20px,20px);-moz-transform:translate(-20px,20px);transform:translate(-20px,20px);}

.area1_left .android_box,.area1_left .phone_box,.area1_left:hover .android_box,.area1_left:hover .phone_box{-webkit-transition:-webkit-transform .7s cubic-bezier(0.4, 0, 1, 1);-moz-transition:transform .7s cubic-bezier(0.4, 0, 1, 1);transition:transform .7s cubic-bezier(0.4, 0, 1, 1);}
.area1_left .android_box,.area1_left .phone_box{-webkit-transform:translate(0,0);-moz-transform:translate(0,0);transform:translate(0,0)}

/*第1屏右侧文字描述*/
.area1_right{ position:absolute; z-index:1003; right:0px; top:30%; width:52%; text-align:left;}
p.area1_right_verson{ font-size:16px; width:180px; height:36px; line-height:36px; text-align:center; border-radius:20px; background-color:#fff; color:#ffb119; margin-bottom:20px;}
.area1_right_banner{ position:relative;}
.area1_right_banner img{width:500px; height:100px;}
.area1_right_icolist{display:block; position:absolute; top:2px; left:298px;width:50px; height:50px; overflow:hidden;}
span.area1_right_ico{  width:50px; height:50px; overflow:hidden; animation:ico_scroll 15s infinite cubic-bezier(1,0,0.5,0);-moz-animation:ico_scroll 15s infinite cubic-bezier(1,0,0.5,0);-webkit-animation:ico_scroll 15s infinite cubic-bezier(1,0,0.5,0);}
span.area1_right_ico img{ width:50px; height:50px;}
img.area1_right_erweima{ margin:20px 0px;}
p.area1_right_info{ font-size:18px;}

@keyframes ico_scroll{ 0% { transform: translateY(0px);} 10% { transform: translateY(-50px);} 20% { transform: translateY(-100px);} 30% { transform: translateY(-150px);} 40% { transform: translateY(-200px);} 50% { transform: translateY(-250px);} 60% { transform: translateY(-300px);} 70% { transform: translateY(-350px);} 80% { transform: translateY(-400px);} 90% { transform: translateY(-450px);} 100% { transform: translateY(-500px);}}
@-webkit-keyframes ico_scroll{ 0% { transform: translateY(0px);} 10% { transform: translateY(-50px);} 20% { transform: translateY(-100px);} 30% { transform: translateY(-150px);} 40% { transform: translateY(-200px);} 50% { transform: translateY(-250px);} 60% { transform: translateY(-300px);} 70% { transform: translateY(-350px);} 80% { transform: translateY(-400px);} 90% { transform: translateY(-450px);} 100% { transform: translateY(-500px);}}
@-moz-keyframes ico_scroll{ 0% { transform: translateY(0px);} 10% { transform: translateY(-50px);} 20% { transform: translateY(-100px);} 30% { transform: translateY(-150px);} 40% { transform: translateY(-200px);} 50% { transform: translateY(-250px);} 60% { transform: translateY(-300px);} 70% { transform: translateY(-350px);} 80% { transform: translateY(-400px);} 90% { transform: translateY(-450px);} 100% { transform: translateY(-500px);}}



/*第2屏*/
.toptext_area{ text-align:center; position:absolute; z-index:1105; top:18%; left:50%; margin-left:-400px; width:800px;}
.toptext_area h2{ font-size:50px;  text-align:center;}
#slide-3 .toptext_area{ top:15%;}
.toptext_area p{ font-size:24px; margin-top:5px;}
.bg_area_places{ position:absolute; top:0px; left:0px; z-index:1000;}
ul.area2{ position:absolute; left:50%; top:28%; z-index:1005; width:1000px; height:500px; margin-left:-500px;}
ul.area2 li{ width:300px; height:460px; text-align:center;}
li.area2_left{position:absolute; bottom:0px; left:0px; z-index:1005;}
li.area2_middle{position:absolute; bottom:0px; left:50%; margin-left:-150px; z-index:1005;}
li.area2_right{position:absolute; bottom:0px; right:0px; z-index:1005;}
ul.area2 li p{position:absolute; bottom:0px; left:50%; z-index:1005; width:300px; margin-left:-150px; font-size:20px;}
ul.area2 li p span{ display:block; font-size:30px;}
.area2_bottom{ position:absolute; bottom:0px; left:50%; width:1000px; height:700px; margin-left:-500px; z-index:1002;}

li.area2_left img,li.area2_middle img,li.area2_right img{transform: translate(0,0); -webkit-transform: translate(0,0); -moz-transform: translate(0,0); transition:all 1s; -webkit-transition:all 1s; -moz-transition:all 1s;}
li.area2_left:hover img,li.area2_middle:hover img,li.area2_right:hover img{transform:scale(1.1)translateY(-10px);}

.active-slide li.area2_left,.active-slide li.area2_right{animation:move_down_to_up 1.5s both; -webkit-animation:move_down_to_up 1.5s both; -moz-animation:move_down_to_up 1.5s both;}
.active-slide li.area2_middle{animation:move_up_to_down 1.5s both; -webkit-animation:move_up_to_down 1.5s both; -moz-animation:move_up_to_down 1.5s both;}

@keyframes move_down_to_up{0%{transform: translateY(200px); opacity:0;}100%{transform: translateY(0px);opacity:1;}}
@-webkit-keyframes move_down_to_up{0%{-webkit-transform: translateY(200px); -webkit-opacity:0;}100%{-webkit-transform: translateY(0px);-webkit-opacity:1;}}
@-moz-keyframes move_down_to_up{0%{-moz-transform: translateY(200px); -moz-opacity:0;}100%{-moz-transform: translateY(0px); -moz-opacity:1;}}

@keyframes move_up_to_down{0%{transform: translateY(-200px); opacity:0;}100%{transform: translateY(0px);opacity:1;}}
@-webkit-keyframes move_up_to_down{0%{-webkit-transform: translateY(-200px); -webkit-opacity:0;}100%{-webkit-transform: translateY(0px);-webkit-opacity:1;}}
@-moz-keyframes move_up_to_down{0%{-moz-transform: translateY(-200px); -moz-opacity:0;}100%{-moz-transform: translateY(0px); -moz-opacity:1;}}

@keyframes move_up_to_down_noopacity{0%{transform: translateY(-200px);}100%{transform: translateY(0px);}}
@-webkit-keyframes move_up_to_down_noopacity{0%{-webkit-transform: translateY(-200px);}100%{-webkit-transform: translateY(0px);}}
@-moz-keyframes move_up_to_down_noopacity{0%{-moz-transform: translateY(-200px);}100%{-moz-transform: translateY(0px);}}

/*第3屏*/
.area3_bottom{ position:absolute; bottom:0px; left:50%; width:1000px; height:460px; margin-left:-500px; z-index:1002;}
.area3{position:absolute; left:50%; top:42%; z-index:1005; width:1000px; height:500px; margin-left:-500px;}
.area3_phone_bg{position:absolute; left:50%; top:95px; z-index:1005; width:650px; height:350px; margin-left:-325px;}
.area3_phone_bg img{}
.area3_phone{position:absolute; left:50%; top:0px; z-index:1008; width:350px; height:520px; margin-left:-175px;}
.area3_phone img{}
.area3_phone_shandow{position:absolute; left:50%; top:465px; z-index:1005; width:350px; height:70px; margin-left:-175px;}
.area3_phone_shandow img{}

.active-slide .area3_phone_bg,.active-slide .area3_phone_shandow{animation:move_down_to_up 1.5s both; -webkit-animation:move_down_to_up 1.5s both; -moz-animation:move_down_to_up 1.5s both;}
.active-slide .area3_phone{animation:move_up_to_down 1.5s 0.5s both; -webkit-animation:move_up_to_down 1.5s 0.5s both; -moz-animation:move_up_to_down 1.5s 0.5s both;}

.area3-1_card{position:absolute; left:50%; top:0px; z-index:1005; width:240px; height:400px; margin-left:-490px;}
.area3-2_card{position:absolute; left:50%; top:0px; z-index:1005; width:240px; height:400px; margin-left:-240px;}
.area3-3_card{position:absolute; left:50%; top:0px; z-index:1005; width:240px; height:400px; margin-left:10px;}
.area3-4_card{position:absolute; left:50%; top:0px; z-index:1005; width:240px; height:400px; margin-left:260px;}
.active-slide .area3-2_card,.active-slide .area3-4_card{animation:move_down_to_up 1.5s both; -webkit-animation:move_down_to_up 1.5s both; -moz-animation:move_down_to_up 1.5s both;}
.active-slide .area3-2_card img, .active-slide .area3-4_card img{transform:rotateY(360deg); -webkit-transform:rotateY(360deg); -moz-transform:rotateY(360deg);transition:all 1s; -webkit-transition:all 1s; -moz-transition:all 1s;}
.active-slide .area3-1_card,.active-slide .area3-3_card{animation:move_up_to_down 1.5s 0.5s both; -webkit-animation:move_up_to_down 1.5s 0.5s both; -moz-animation:move_up_to_down 1.5s 0.5s both;}



/*第4屏*/
.area4_people{position:absolute; left:50%; top:60%; z-index:1005; width:700px; height:500px; margin-left:-350px;}
.area4_people1{position:absolute; left:0; top:0; z-index:1005; width:240px; height:450px; }
.area4_people2{position:absolute; left:50%; top:0; z-index:1005; width:180px; height:450px; margin-left:-110px;}
.area4_people3{position:absolute; right:0; top:0; z-index:1005; width:260px; height:450px; }

.area4_text{position:absolute; left:50%; top:42%; z-index:1005; width:560px; height:500px; margin-left:-280px;}
.area4_text1{position:absolute; left:0; top:0; z-index:1005; width:150px; height:180px;}
.area4_text2{position:absolute; left:50%; top:0; z-index:1005; width:150px; height:180px; margin-left:-85px;}
.area4_text3{position:absolute; right:30px; top:0; z-index:1005; width:150px; height:180px;}

.active-slide .area4_people1,.active-slide .area4_people2,.active-slide .area4_people3{animation:move_down_to_up 1.5s both; -webkit-animation:move_down_to_up 1.5s both; -moz-animation:move_down_to_up 1.5s both;}
.active-slide .area4_text{animation:move_up_to_down 1.5s 0.5s both; -webkit-animation:move_up_to_down 1.5s 0.5s both; -moz-animation:move_up_to_down 1.5s 0.5s both;}
.area4_text1 img,.area4_text2 img,.area4_text3 img{transition:all 1s; -webkit-transition:all 1s; -moz-transition:all 1s;}
.area4_text1:hover img,.area4_text2:hover img,.area4_text3:hover img{ transform:rotateY(360deg); -webkit-transform:rotateY(360deg); -moz-transform:rotateY(360deg);}


/*第5屏*/
#slide-5 .toptext_area{ top:15%;}
#slide-5 .toptext_area p{ display:inline-block;  padding:0px 10px 5px 10px;}
.area3{position:absolute; left:50%; top:42%; z-index:1005; width:1000px; height:500px; margin-left:-500px;}
.area5_top{position:absolute; left:50%; top:35%; z-index:1005; width:1000px; height:120px; margin-left:-500px;}
.area5_bottom{position:absolute; left:50%; top:50%; z-index:1005; width:800px; height:500px; margin-left:-400px;}

.area5_ico1{position:absolute; left:50%; top:70%; z-index:1008; width:100px; height:100px; margin-left:-350px;}
.area5_ico2{position:absolute; left:50%; top:55%; z-index:1008; width:100px; height:100px; margin-left:-300px;}
.area5_ico3{position:absolute; left:50%; top:60%; z-index:1008; width:100px; height:100px; margin-left:150px;}
.area5_icoheart_1{position:absolute; left:50%; top:60%; z-index:1005; width:50px; height:50px; margin-left:200px; opacity:0;}
.area5_icoheart_2{position:absolute; left:50%; top:60%; z-index:1005; width:50px; height:50px; margin-left:200px;opacity:0;}

.active-slide .area5_bottom{animation:move_down_to_up 1.5s both; -webkit-animation:move_down_to_up 1.5s both; -moz-animation:move_down_to_up 1.5s both;}
.active-slide .area5_ico1{animation:move_down_to_up 1.5s 1.2s both; -webkit-animation:move_down_to_up 1.5s 1.2s both; -moz-animation:move_down_to_up 1.5s 1.2s both;}
.active-slide .area5_ico2{animation:move_down_to_up 1.5s 0.5s both; -webkit-animation:move_down_to_up 1.5s 0.5s both; -moz-animation:move_down_to_up 1.5s 0.5s both;}
.active-slide .area5_ico3{animation:move_down_to_up 1.5s 1s both; -webkit-animation:move_down_to_up 1.5s 1s both; -moz-animation:move_down_to_up 1.5s 1s both;}
.active-slide .area5_top{animation:move_up_to_down 1.5s 0.5s both; -webkit-animation:move_up_to_down 1.5s 0.5s both; -moz-animation:move_up_to_down 1.5s 0.5s both;}

.active-slide .area5_icoheart_1{animation:piaodong_heart1 4s 2s linear infinite normal; -webkit-animation:piaodong_heart1 4s 2s linear infinite normal;-moz-animation:piaodong_heart1 4s 2s linear infinite normal;}
.active-slide .area5_icoheart_2{animation:piaodong_heart2 8s 1s linear infinite normal; -webkit-animation:piaodong_heart2 8s 1s linear infinite normal;-moz-animation:piaodong_heart2 8s 1s linear infinite normal;}


@keyframes piaodong_heart1{
0%   {transform:scale(0.5)rotate(0deg)translate(0,0);opacity:0;}
25%{transform:scale(0.5)rotate(-10deg)translate(50px,-10px);opacity:0.5;}
50%{transform:scale(0.6)rotate(-30deg)translate(80px,-50px);opacity:1;}
75%{transform:scale(0.8)rotate(-50deg)translate(100px,-80px);opacity:1;}
100% {transform:scale(1)rotate(-20deg)translate(120px,-150px); opacity:0;}}
@-webkit-keyframes piaodong_heart1{
0%   {-webkit-transform:scale(0.5)rotate(0deg)translate(0,0);-webkit-opacity:0;}
25%{-webkit-transform:scale(0.5)rotate(-10deg)translate(50px,-10px);-webkit-opacity:0.5;}
50%{-webkit-transform:scale(0.6)rotate(-30deg)translate(80px,-50px);-webkit-opacity:1;}
75%{-webkit-transform:scale(0.8)rotate(-50deg)translate(100px,-80px);-webkit-opacity:1;}
100% {-webkit-transform:scale(1)rotate(-20deg)translate(120px,-150px);-webkit-opacity:0;}}
@-moz-keyframes piaodong_heart1{
0%   {-moz-transform:scale(0.5)rotate(0deg)translate(0,0);-moz-opacity:0;}
25%{-moz-transform:scale(0.5)rotate(-10deg)translate(50px,-10px);-moz-opacity:0.5;}
50%{-moz-transform:scale(0.6)rotate(-30deg)translate(80px,-50px);-moz-opacity:1;}
75%{-moz-transform:scale(0.8)rotate(-50deg)translate(100px,-80px);-moz-opacity:1;}
100% {-moz-transform:scale(1)rotate(-20deg)translate(120px,-150px);-moz-opacity:0;}}

@keyframes piaodong_heart2{
0%   {transform:scale(0.5)rotate(0deg)translate(0,0);opacity:0;}
25%{transform:scale(0.5)rotate(-10deg)translate(20px,-30px);opacity:0.5;}
50%{transform:scale(0.6)rotate(-20deg)translate(60px,-80px);opacity:1;}
75%{transform:scale(0.8)rotate(-60deg)translate(80px,-120px);opacity:1;}
100% {transform:scale(1)rotate(-40deg)translate(100px,-180px); opacity:0;}}
@-webkit-keyframes piaodong_heart2{
0%   {-webkit-transform:scale(0.5)rotate(0deg)translate(0,0);opacity:0;}
25%{-webkit-transform:scale(0.5)rotate(-10deg)translate(20px,-30px);opacity:0.5;}
50%{-webkit-transform:scale(0.6)rotate(-20deg)translate(60px,-80px);opacity:1;}
75%{-webkit-transform:scale(0.8)rotate(-60deg)translate(80px,-120px);opacity:1;}
100% {-webkit-transform:scale(1)rotate(-40deg)translate(100px,-180px); opacity:0;}}
@-moz-keyframes piaodong_heart2{
0%   {-moz-transform:scale(0.5)rotate(0deg)translate(0,0);opacity:0;}
25%{-moz-transform:scale(0.5)rotate(-10deg)translate(20px,-30px);opacity:0.5;}
50%{-moz-transform:scale(0.6)rotate(-20deg)translate(60px,-80px);opacity:1;}
75%{-moz-transform:scale(0.8)rotate(-60deg)translate(80px,-120px);opacity:1;}
100% {-moz-transform:scale(1)rotate(-40deg)translate(100px,-180px); opacity:0;}}

/*第6屏*/
.area6{position:absolute; left:50%; top:32%; z-index:1005; width:1000px; height:500px; margin-left:-500px;}
.area6_erweima{position:absolute; left:50%; top:10%; z-index:1005; width:240px; height:240px; margin-left:-120px; background-color:#fbb95e; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px;}
.area6_erweima img{ margin-top:20px;}
.area6_bottom{position:absolute; left:50%; top:60%; z-index:1000; width:1000px; height:380px; margin-left:-500px; }
.area6_plane{position:absolute; left:50%; top:42%; z-index:1005; width:200px; height:200px; margin-left:-500px; }
.area6_balloon{position:absolute; right:50%; top:-30%; z-index:1005; width:150px; height:150px; margin-right:-500px; }
.area6_balloon img{animation:move_scroll 3s linear 0s infinite alternate; -webkit-animation:move_scroll 3s linear 0s infinite alternate; -moz-animation:move_scroll 3s linear 0s infinite alternate;}
.area6_plane img{animation:move_scroll 3s linear 0.5s infinite alternate; -webkit-animation:move_scroll 3s linear 0.5s infinite alternate; -moz-animation:move_scroll 3s linear 0.5s infinite alternate;}

.active-slide .area6_bottom{animation:move_down_to_up 1.5s 1s both; -webkit-animation:move_down_to_up 1.5s 1s both; -moz-animation:move_down_to_up 1.5s 1s both;}
.active-slide .area6_plane{animation:move_down_to_up 1.5s 2s both; -webkit-animation:move_down_to_up 1.5s 2s both; -moz-animation:move_down_to_up 1.5s 2s both;}
.active-slide .area6_balloon{animation:move_down_to_up 1.5s 2.5s both; -webkit-animation:move_down_to_up 1.5s 2.5s both; -moz-animation:move_down_to_up 1.5s 2.5s both;}
.active-slide .area6_erweima{animation:move_up_to_down 1.5s 0.5s both; -webkit-animation:move_up_to_down 1.5s 0.5s both; -moz-animation:move_up_to_down 1.5s 0.5s both;}
.copyright{  display: block;z-index: 1100; position: absolute; bottom: 0px;color: #383838; height: 50px; margin: 0 auto; width: 100%; left: 50%; margin-left: -50%;}
.copyright a{ color:#fff;font-size:14px;}

@keyframes move_scroll{
	0%{ transform: translateY(0px) }
	20%{transform: translateY(15px)}
	80%{ transform: translateY(0px)}
	100%{ transform: translateY(-5px) }
	}
@-webkit-keyframes move_scroll{
	0%{ transform: translateY(0px) }
	20%{transform: translateY(15px)}
	80%{ transform: translateY(0px)}
	100%{ transform: translateY(-5px) }
	}
@-moz-keyframes move_scroll{
	0%{ transform: translateY(0px) }
	20%{transform: translateY(15px)}
	80%{ transform: translateY(0px)}
	100%{ transform: translateY(-5px) }
	}