body,html,div,p,i,h3,h4,ul,li,nav{
  margin:0;padding:0;list-style:none!important;
  font-family:"Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB",
    "Heiti SC","WenQuanYi Micro Hei",sans-serif;
  text-decoration:none;outline:0;
}
i,span{
  display:inline-block;
}
.clear{
  clear:both;
}
nav{
  width:100%;
  height:3.5rem;
  z-index:2001;
  position:fixed;
  background:rgba(0,0,0,.5);
  color:#fff;
  top:0;
}
.navbox{
  width:80%;
  margin:0 auto;
  height:3.5rem;
  line-height:3.5rem;
}
.navboxleft i{
  width:2rem;
  height:2rem;
  background:url("../images/logo.png") no-repeat center;
  background-size:100%;
  margin:.8rem 1rem 0 0;
  float:left;
}
.navboxleft{
  font-size:1rem;
  float:left;
}
.navboxright{
  float:right;
}
.navboxright span{
  padding:0 20px;
  cursor:pointer;
}
a{
  color:#333
}
nav a,
button a,
p a{
  color:#fff
}
a{
  text-decoration:none
}
.section{
    position:relative;
}
.section .bg{
  position:absolute; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%;
  overflow:hidden;
}
@keyframes record-scale{
  0% {
    -webkit-transform:none;
    -moz-transform:none;
    -ms-transform:none;
    -o-transform:none;
    transform:none;
  }
  100% {
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -ms-transform:scale(1.1);
    -o-transform:scale(1.1);
    transform:scale(1.1);
  }
}
.section .bg img{ 
  display:block; 
  width:100%; 
  height:100%;
  webkit-animation:record-scale 5s ease-in-out 1s infinite alternate;
  -moz-animation:record-scale 5s ease-in-out 1s infinite alternate;
  animation:record-scale 5s ease-in-out 1s infinite alternate;
}
.bgleft{
  width:50%;
  height:100%;
  background:0;
  float:left;
}
.bgright{
  width:50%;
  height:100%;
  background:rgba(0,0,0,.2);
  float:left;
}
/*第一部分*/
.indexbox-one{
  width:60%;
  height:auto!important;
  margin:0 auto;
  top:0%!important;
  left:0%!important;
  -webkit-transform:translate(0%, 17%);
  -moz-transform:translate(0%, 17%);
  transform:translate(0%, 17%);
}
.menu{
  width:60%;
  position:fixed;
  bottom:6%;
  -webkit-transform:translate(32%, 0%);
  -moz-transform:translate(32%, 0%);
  transform:translate(32%, 0%);
}
.menu span{
  width:24%;
  text-align:center;
  display:inline-block;
}
.videobtn{
  margin:5% 0 2%;
}
.videobtn div{
  width:50px;
  height:50px;
  margin:0 auto;
  border-radius:50px;
  z-index:1000000000;
  position:relative;
  background:url("../images/play.svg") no-repeat 60% center #fff;
  background-size:40%;
  cursor:pointer;
  -webkit-transition:all .3s cubic-bezier(.39,.575,.565,1);
  -moz-transition:all .3s cubic-bezier(.39,.575,.565,1);transition:all .3s cubic-bezier(.39,.575,.565,1);
  border:1px #1097ff solid;
}
.videobtn a{
  color:#fff;width:52px;display:block;margin:0 auto;
}
@keyframes aaa{
  0%{
    -webkit-transform:translateX(10px);
    -moz-transform:translateX(10px);
    transform:translateX(10px);
  }
  50%{
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    transform:translateX(0);
  }
  100%{
    -webkit-transform:translateX(-10px);
    -moz-transform:translateX(-10px);
    transform:translateX(-10px);
  }
}
.videobtn i{
  width:120%;
  font-size:12px;
  z-index:15;
  cursor:pointer;
  position:absolute;
  top:-40px;left:-15px;
  margin:auto;
  text-align:center;
  font-style:normal;
  padding:6px 8px;
  border-radius:5px;
  background:rgba(0,0,0,.3);
  display:none
}
.videobtn i b{
  content: "";
  position: absolute;
  left: 40%;
  top:28px;
  width: 0;
  height: 0;
  border-color:rgba(0,0,0,.3) transparent transparent transparent;
  border-style:solid;
  border-width:10px; 
}
.videobtn a>div:hover{
  background-color:#1097ff;
  background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOS43IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMTkuNyAyNCI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZn08L3N0eWxlPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOCA5LjZMMy45LjZDMy4zLjIgMi45IDAgMi4zIDAgLjggMCAwIDEuMiAwIDN2MThjMCAxLjguOCAzIDIuMyAzIC42IDAgMS4xLS4yIDEuNy0uNWwxNC05YzEuMS0uNiAxLjYtMS41IDEuNi0yLjUuMS0xLS41LTEuOC0xLjYtMi40em0tNi44IDZMNyAxOC40Yy0uMi4xLS40LjItLjYuMi0uNCAwLS43LS4yLS45LS41LS4zLS41LS4yLTEuMi4zLTEuNmw0LjItMi44Yy41LS4zIDEuMi0uMiAxLjYuMy4yLjYuMSAxLjMtLjQgMS42eiIvPjwvc3ZnPg==)}

.videobtn a>div:hover i{
  display:block;
  -webkit-animation:aaa .05s 4 alternate;
  -moz-animation:aaa .05s 4 alternate;
  animation:aaa .05s 4 alternate;
}
.wkbox .videobtn{
  padding-top:90px;
}
.downloadbtn{
  width:260px;
  margin:0 auto;
  position:relative;
}
.downloadbtn a{
  width:auto;
  display:block;
}
.downloadbtn img{
  margin:0 auto;
  display:block;
}
.downewm{
  width:150px;
  height:170px;
  position:absolute;
  left:-80%;
  top:-40px;
  background:url("../images/qrcode.png") no-repeat center top #fff;
  background-size:100%;
  z-index:1100000000;
  text-align:center;
  line-height:318px;
  font-size:12px;
  display:none;
}
.downewm i{
  content: "";
  position: absolute;
  right:-30px;
  top:45px;
  width: 0;
  height: 0;
  border-top:30px solid transparent;
  border-bottom:30px solid transparent;
  border-left:30px solid rgba(0,0,0,.3);
}
.indexbox-one .text{
  text-align:center;
  color:#fff;
  width:100%;
  height:60px;
  background:url("../images/text.png") no-repeat center;
  margin:20px 0;
}
.mainpic{
  width:100%;
  height:400px;
  position:relative;
}
.mainpic img{
  display:block;
  margin:0 auto;
  height:100%;
}
.mainpic i.ios{
  width:64px;
  height:64px;
  background:url("../images/ios.png") no-repeat center;
  background-size:cover;
  position:absolute;
  right:15%;
  top:30%;
}
.mainpic i.android{
  width:64px;
  height:64px;
  background:url("../images/android.png") no-repeat center;
  background-size:cover;
  position:absolute;
  left:15%;
  top:30%;
}

.section .wk1,
.section .wkedit{
  width:1280px;
  height:auto;
  margin:0 auto;
  padding:5% 0 0;
  z-index:99999;position:relative;
}
.section .download{
  padding:10% 0 0
}
.section .wk1{
  position:relative!important;
}
.wk1top{
  width:100%;
  height:280px;
}
.wk1topleft{
  height:280px;
  width:55%;
  float:left;
  background:url('../images/pic.png') no-repeat right bottom;
  background-size:55%;
}
.wk1topright{
  height:280px;
  width:40%;
  float:right;
}
.wk1top h3{
  color:#3CBA50;
  font-size:48px;
  letter-spacing:3px;
}
.wk1topleft p{
  font-size:22px;
  line-height:35px;
  margin:30px 0;
  width:40%
}
.wk1topleft img{
  margin:0 auto;
  display:block;
}

.wk1btm{
  height:345px;
  margin-top:90px;
  width:1280px;
}
.wkbox{
  width:320px;
  height:auto;
  padding:0 0 20px 0;
  float:left;
}

@keyframes run{
  0%{
      background:url("../images/a1.png") no-repeat center 20px;
      background-size:85%;
  }
  16.66%{
      background:url("../images/a2.png") no-repeat center 20px;
      background-size:85%;
  }
  33.32%{
      background:url("../images/a3.png") no-repeat center 20px;
      background-size:85%;
  }
  49.98%{
      background:url("../images/a4.png") no-repeat center 20px;
      background-size:85%;
  }
  66.64%{
      background:url("../images/a5.png") no-repeat center 20px;
      background-size:85%;
  }
  83.3%{
      background:url("../images/a6.png") no-repeat center 20px;
      background-size:85%;
  }
  100%{
      background:url("../images/a1.png") no-repeat center 20px;
      background-size:85%;
  }
}
.wkbox1{
  width:100%;
  height:220px;
  background:url("../images/a1.png") no-repeat center 20px;
  background-size:85%;
}
@keyframes runn{
  0%{
      background:url("../images/b1.png") no-repeat center 20px;
      background-size:85%;
  }
  25%{
      background:url("../images/b2.png") no-repeat center 20px;
      background-size:85%;
  }
  50%{
      background:url("../images/b3.png") no-repeat center 20px;
      background-size:85%;
  }
  75%{
      background:url("../images/b4.png") no-repeat center 20px;
      background-size:85%;
  }
  100%{
      background:url("../images/b1.png") no-repeat center 20px;
      background-size:85%;
  }
}
.wkbox2{
  width:100%;
  height:220px;
  background:url("../images/b1.png") no-repeat center 20px;
  background-size:85%;
}
@keyframes runnn{
  0%{
      background:url("../images/c1.png") no-repeat center 20px;
      background-size:85%;
  }
  25%{
      background:url("../images/c2.png") no-repeat center 20px;
      background-size:85%;
  }
  50%{
      background:url("../images/c3.png") no-repeat center 20px;
      background-size:85%;
  }
  75%{
      background:url("../images/c4.png") no-repeat center 20px;
      background-size:85%;
  }
  100%{
      background:url("../images/c1.png") no-repeat center 20px;
      background-size:85%;
  }
}
.wkbox3{
  width:100%;
  height:220px;
  background:url("../images/c1.png") no-repeat center 20px;
  background-size:85%;
}
@keyframes runnnn{
  0%{
      background:url("../images/d1.png") no-repeat center 20px;
      background-size:85%;
  }
  25%{
      background:url("../images/d2.png") no-repeat center 20px;
      background-size:85%;
  }
  50%{
      background:url("../images/d3.png") no-repeat center 20px;
      background-size:85%;
  }
  75%{
      background:url("../images/d4.png") no-repeat center 20px;
      background-size:85%;
  }
  100%{
      background:url("../images/d1.png") no-repeat center 20px;
      background-size:85%;
  }
}
.wkbox4{
  width:100%;
  height:220px;
  background:url("../images/d1.png") no-repeat center 20px;
  background-size:85%;
}
.wkbox h4{
  text-align:center;
  font-size:24px;
  padding:15px 0
}
.wkbox p{
  padding:0 25px
}


.wkedit h3{
  color:#3CBA50;
  font-size:48px;
  letter-spacing:3px;
}
.wkedit p{
  font-size:22px;
  line-height:35px;
  margin:30px 0;
  width:40%;
  color:#fff
}
.wkedit img{
  margin:80px auto 0;
}
.wkedit1 img{
  margin-top:50px;
}
.download{
  width:800px!important;
  text-align:center;
  font-size:24px;
  margin-top:10%!important;
  height:350px!important;
}
.downloadleft{
  width:260px;
  height:380px;
  float:left;
}
.downloadright{
  width:260px;
  float:right;
  height:380px;
}
.downloadleft img{
  width:200px;
  display:block;
  margin:30px auto 20px;
}
.downloadright img{
  display:block;
  width:200px;
  margin:30px auto 20px;
}
.download p {
  width:240px;
  margin:0 auto;
  cursor:pointer;
}
.download p img{
  width:240px;
}
.footer{
  text-align:left;
  position:absolute;
  bottom:-20%;
  width:100%;
}
.footer p{
  color:#333!important;
  width:800px;
  margin:0 auto;
}
.footer p span{
  float:right;
}
.toubox{
  position:relative;
}
.toubox .left{
  width:350px;
  height:300px;
  background:url("../images/pic2.gif") no-repeat right 50%;
  background-size:100%;
  float:left;
  z-index:9;
  position:relative;
}
.toubox .mid{
  width:500px;
  height:300px;
  background:url("../images/pic4.png") no-repeat left top;
  background-size:80%;
  float:left;
  margin-left:-20px;
}
.toubox .right{
  width:500px;
  height:300px;
  background:url("../images/pic1.gif") no-repeat right 50%;
  background-size:100%;
  float:left;
  position:absolute;
  right:200px;
  top:-200px;
}
/*.toubox .left i{
  width:340px;
  height:300px;
  background:url("../images/gif.gif") no-repeat center;
  background-size:82%;
}*/

.wkedit1 .vipbtn{
  width:180px;
  height:40px;
  border-radius:20px;
  background:#3CBA50;
  font-size:16px;
  line-height:40px;
  text-align:center;
  margin:20px auto;
}

#dowebok{
  display:none
}
.vipbtnn1{
  display:none
}


#fp-nav{
  position:fixed;
  z-index:100;
  margin-top:-32px;
  top:50%;
  opacity:1;
}
#fp-nav.right{
  right:17px
}
#fp-nav.left{
  left:17px
}
#fp-nav ul li,
.fp-slidesNav ul li{
  display:block;
  width:14px;
  height:13px;
  margin:7px;
  position:relative;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span{
  opacity:1;filter:alpha(opacity=100)
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span{
  top:2px;left:2px;
  width:10px;height:10px;
  background:#666;
  border-radius:50%;
  opacity:.4;
  filter:alpha(opacity=40);
  position:absolute;
  z-index:1;
}

/*.section a.jump{
  border:1px red solid;
  display:inline-block;
  width:100%;

}*/



@media screen and (max-width:767px){
  .vipbtnn{
    display:none;
  }
  .vipbtnn1{
    display:block;
    float:right;
    margin-left:10px;
  }
  .section8{
    height:680px!important;
  }
  .indexbox-one{
    width:95%;
  }
  .mainpic{
    width:100%;
    height:auto!important;
  }
  .downloadbtn img{
    width:70%;
    margin-top:1rem;
  }
  .menu{
    position:inherit;
    height:130px;
    bottom:0%;
  }
  .menu span{
    margin-top:.7rem;
    font-size:1rem;
  }
  .wk1,
  .wkedit{
    width:95%!important;
  }
  .wk1top h3,
  .wkedit h3{
    font-size:1.5rem;
  }
  .wk1top p,
  .wkedit p{
    font-size:1rem;
    margin:.5rem 5px 1rem
  }
  .wk1btm{
    margin-top:2rem;
    width:100%!important;
    height:auto;
    z-index:0!important;
    position:relative;
  }
  .wkbox1{
    background:url("../images/a1.png") no-repeat center 10px;
    background-size:72%;
    animation:run 5s steps(1, start) infinite;
    -webkit-animation:run 5s steps(1, start) infinite;height:270px;
  }
  .wkbox2{
    background:url("../images/b1.png") no-repeat center 10px;
    background-size:72%;
    animation:runn 5s steps(1, start) infinite;
    -webkit-animation:runn 5s steps(1, start) infinite;height:270px;
  }
  .wkbox3{
    background:url("../images/c1.png") no-repeat center 10px;
    background-size:72%;
    animation:runnn 5s steps(1, start) infinite;
    -webkit-animation:runnn 5s steps(1, start) infinite;height:270px;
  }
  .wkbox4{
    background:url("../images/d1.png") no-repeat center 10px;
    background-size:72%;
    animation:runnnn 5s steps(1, start) infinite;
    -webkit-animation:runnnn 5s steps(1, start) infinite;height:270px;
  }
  .wkbox .videobtn{
    padding-top:1rem!important;
    margin:0;
  }
  .wkbox h4{
    font-size:1.2rem;
    padding:.5rem 0;
  }
  .wkbox p{
    padding:0 5px;
    text-align:center;
  }
  .toubox{
    height:auto
  }
  .toubox .left{
    width:100%;
    height:210px;
    background:url("../images/pic2.gif") no-repeat right 10%;
    background-size:70%;
  }
  .toubox .left i{
    width:70%;
    height:160px;
    float:right;
  }
  .toubox .mid{
    width:100%;
    margin:-170px 0 0 -60px;
    transform:rotate(150deg);
  }
  .toubox .right{
    width:100%;
    height:220px;
    background: url(../images/pic1.gif) no-repeat center 10%;
    background-size:90%;
    position: inherit;
    right:0;
    top:-90px;
  }
  .download p.p4,
  .download p.p5{
    font-size:.8rem;
    width:80%;
    margin:2rem auto 0;
    height:85px;
  }
  
  .download1{
    display:none
  }
}

@media screen and (min-width:768px) and (max-width:1300px){
  .indexbox-one{
    width:80%;
  }
  .section8{
    height:1000px!important;
  }
  .mainpic{
    width:90%;
    margin:0 auto;
    height:auto!important;
  }
  .downloadbtn img{
    width:100%;
    margin-top:1rem;
  }
  .menu{
    position:inherit;
    bottom:-13%!important;
    width:90%;
    left:0;
    -webkit-transform:translate(5%, 20%);
    -moz-transform:translate(5%, 20%);
    transform:translate(5%, 20%);
  }
  .menu span{
    margin-top:0;
    height:3rem;
    font-size:1.2rem
  }
  .wk1,
  .wkedit{
    width:76%!important;
  }
  .wk1top h3,
  .wkedit h3{
    font-size:2.4rem;
  }
  .wk1top p,
  .wkedit p{
    font-size:1rem;
    margin:.5rem 5px 1rem;
  }
  .wk1btm{
    margin-top:2rem;
    width:85%!important;
    height:auto;
    z-index:0!important;
    position:relative;
    text-align:center;
    margin:0 auto!important;
  }
  .wkbox1{
    background:url("../images/a1.png") no-repeat center 10px;
    background-size:cover;
    animation:run 5s steps(1, start) infinite;
    -webkit-animation:run 5s steps(1, start) infinite;
    height:500px;
  }
  .wkbox2{
    background:url("../images/b1.png") no-repeat center 10px;
    background-size:cover;
    animation:runn 5s steps(1, start) infinite;
    -webkit-animation:runn 5s steps(1, start) infinite;height:500px;
  }
  .wkbox3{
    background:url("../images/c1.png") no-repeat center 10px;
    background-size:cover;
    animation:runnn 5s steps(1, start) infinite;
    -webkit-animation:runnn 5s steps(1, start) infinite;height:500px;
  }
  .wkbox4{
    background:url("../images/d1.png") no-repeat center 10px;
    background-size:cover;
    animation:runnnn 5s steps(1, start) infinite;
    -webkit-animation:runnnn 5s steps(1, start) infinite;height:500px;
  }
  .wkbox .videobtn{
    padding:2rem 0!important;
    margin:0;
  }
  .wkbox h4{
    font-size:1.6rem;
    padding:.5rem 0;
  }
  .wkbox p{
    padding:0 5px;
    text-align:center;
    font-size:1.2rem
  }
  .toubox{
    position:relative;
    height:700px
  }
  .toubox .left{
    width:350px;
    height:600px;
    background:url("../images/pic2.gif") no-repeat right bottom;
    background-size:100%;
    float:left;
    z-index:9;
    position:relative;
    top:50px;
  }
  .toubox .mid{
    width:500px;
    height:300px;
    background:url("../images/pic4.png") no-repeat left top;
    background-size:80%;
    float:left;
    position:absolute;
    left:20px;
    top:200px;
    transform:rotate(-20deg);
    -webkit-transform:rotate(-20deg);
    -o-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
  }
  .toubox .right{
    width:500px;
    height:300px;
    background:url("../images/pic1.gif") no-repeat right 50%;
    background-size:100%;
    float:left;
    position:absolute;
    right:0;
    top:0;
  }
  .toubox .left i{
    width:340px;
    height:570px;
    background:url("../images/gif.gif") no-repeat center bottom;
    background-size:82%;
  }
  .toubox .right i{
    width:500px;
    height:280px;
    background:url("../images/pic1.gif") no-repeat center bottom;
    background-size:75%;
  }
  .download p.p4,
  .download p.p5{
    font-size:.8rem;
    width:80%;
    height:85px;
  }
  .section14 .bg img{
    animation:none;
  }
  .download{
    display:none;
  }
  .download1{
    display:block;
  }
}



@media screen and (max-width:1300px){
  .section1,.section2,.section3,.section4,.section5,.section6,.section7,.wrap{
    display:none
  }
  nav{
    height:3rem;
    z-index:999999999;
  }
  #dowebok{
    display:block;
    overflow:hidden;
  }
  .navbox{
    width:95%;
    height:3rem;
    line-height:3rem;
  }
  .navboxleft{
    font-size:.8rem;
  }
  .navboxleft i{
    margin:.5rem .5rem 0 0;
    background-size:90%
  }
  .navboxright span{
    padding:0 0 0 10px;
    font-size:.7rem
  }
  .mainpic img{
    width:100%;
  }
  .wk1top{
    height:auto
  }
  .menu span{
    display:block;
    width:100%;
    color:#fff;
    letter-spacing:1px;
  }
  .wk1top h3,
  .wkedit h3{
    padding:0 5px;
    margin-top:2rem;
  }
  .wk1top img,
  .wkedit img{
    display:block;
    margin:2rem auto;
  }
  .wkbox{
    display:block;
    width:100%;
  }
  .wkedit p{
    width:99%;
    line-height:1.3rem
  }
  .download p{
    color:#333;
    text-align:left;
    margin-bottom:0;
    padding:0 1.5rem
  }
  .download p.p1{
    font-size:1.3rem;
    margin-bottom:1.5rem;
  }
  .download p img{
    width:30%;
    margin-bottom:.5rem;
    display:inline-block;
  }
  .download p.p4 img{
    padding:0 2rem 0 0;
    margin:0 auto;
    width:80px;
  }
  .download p.p5{
    margin:.5rem auto;
    height:30px;
  }
  .section14,
  .section13,
  .section12,
  .section11,
  .section10,
  .section9{
    height:auto!important;
    padding:1rem 0
  }
  .wkedit button{
    margin:0 auto;
    display:block;
    background:#3CBA50;
    border-radius:1.5rem;
    border:none;
    color:#fff;
    padding:.5rem 1.5rem;
    font-size:.8rem;
    font-family:"Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB",
    "Heiti SC","WenQuanYi Micro Hei",sans-serif;
  }
  .download p.p5 a{
    color:#333;
  }
  .section13 .wkedit{
    height:auto!important;
  }
  
}


@media screen and (min-width:1024px){
  .section8{
    height:1150px!important;
  }
}