body { margin: 0; padding: 0; background: white; }
body, small, sup, sub, button, input, textarea, select { font: 12px/1 microsoft yahei, Arial, Helvetica, Verdana, SimSun, sans-serif; }
* { margin: 0; padding: 0; list-style: none; }
/*{==========================pc端*/
#banner { position: relative; width: 100%; height: 659px; overflow: hidden; background: white; }
#banner .slides { list-style: none; margin: 0; padding: 0; }
#banner .slide { display: block; width: 100%; height: 662px; border: none; }
#banner .slide .locate { width: 1180px; height: 659px; position: relative; margin: 0 auto; }
#banner .slide .locate .picgif { position: absolute; width: 263px; height: 342px; left: 811px; top: 214px; }
#banner .slide .locate .white { width: 300px; height: 48px; position: absolute; background: url("../images/white.png") no-repeat; left: 793px; top: 529px; z-index: 999; }
#banner .slide.bg1 .locate { background: url("../images/bg1.jpg") no-repeat -370px top }
#banner .slide.bg2 .locate { background: url("../images/bg2.jpg") no-repeat -370px top }
#banner .slide.bg3 .locate { background: url("../images/bg3.jpg") no-repeat -370px top }
#banner .slide.bg1 { background: url("../images/bg1.jpg") no-repeat center top; }
#banner .slide.bg2 { background: url("../images/bg2.jpg") no-repeat center top; }
#banner .slide.bg3 { background: url("../images/bg3.jpg") no-repeat center top; }
#banner .point { position: absolute; bottom: 46px; z-index: 999; width: 100%; }
#banner .pointers { width: 180px; margin: 0 auto; padding-left: 1215px; height: 30px; }
#banner .pointer { float: left; width: 12px; height: 12px; overflow: hidden; border-radius: 50%; background: #d0d0d0; cursor: default; margin: 5px 8px 0 8px;
  -webkit-font-smoothing: antialiased; transform: scale(1, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); transition: transform 1s; -webkit-transition: transform 1s; -moz-transition: transform 1s; }
#banner .pointer:hover,
#banner .pointers a.active,
#banner .pointers a.active:hover { transform: scale(2, 2); -webkit-transform: scale(2, 2); -moz-transform: scale(2, 2); }
#banner .tops { position: absolute; top: 0; z-index: 99; width: 100%; height: 70px; }
#banner .tops .top, #banner .center .downbox { width: 1180px; margin: 0 auto; }
#banner .tops .top { height: 70px; position: relative; }
#banner .tops .top ul { position: absolute; width: 464px; height: 58px; right: 0; top: 0; z-index: 999; }
#banner .tops .top .popbox { width: 218px; height: 274px; position: absolute; z-index: 9; right: 20px; top: 48px; background: url("../images/popbox.png") no-repeat; opacity: 0; transform: translate(0, -340px); transition: transform 1s, opacity 1s; -webkit-transition: transform 1s, opacity 1s; }
#banner .tops .top .popbox.popshow { transform: translate(0, 0); opacity: 1; }
#banner .tops .top .logo { padding: 13px 0 0 20px; float: left; display: block; }
#banner .tops .top .nav { float: right; margin-right: 20px; line-height: 70px; color: #fff; font-size: 14px; cursor: pointer; text-decoration: none; }
#banner .tops .top .nav:hover { color: #fe6262; }
#banner .center { position: absolute; top: 396px; width: 100%; height: 70px; z-index: 99; }
#banner .center .downbox a { display: block; width: 235px; height: 66px; padding-right: 22px; font-size: 25px; -webkit-font-smoothing: antialiased; text-align: right; line-height: 66px; text-decoration: none; border-radius: 36px; float: left; color: #fff; border: solid 1px #fff; }
#banner .center .downbox a.apple { margin-left: 64px; background: url("../images/icons.png") no-repeat 25px center; }
#banner .center .downbox a.apple:hover { border: solid #3ebfff 1px; color: #3ebfff; background: url("../images/icons_hover.png") no-repeat 25px center; }
#banner .center .downbox a.android { margin-left: 32px; background: url("../images/icons.png") no-repeat -281px center; }
#banner .center .downbox a.android:hover { border: solid #88f903 1px; color: #88f903; background: url("../images/icons_hover.png") no-repeat -281px center; }
#content { width: 1180px; margin: 0 auto; position: relative; padding-top: 67px; }
#content h1 { text-align: center; font-size: 40px; color: #666; font-weight: normal; top: -60px; z-index: 99; position: absolute; width: 1180px; }
#content h1 strong { font-size: 120px; padding: 0 25px; }
#content .title { text-align: center; margin: 0; font-size: 24px; color: #666; line-height: 200%; -webkit-font-smoothing: antialiased; padding-top: 22px; }
#content .code { display: block; margin: 10px auto 20px auto; }
#content .stepul { margin: 44px 0 0 -24px; width: 1157px; padding-left: 63px; height: 252px; position: relative; border-top: solid 1px #fe6262; }
#content .stepul li { float: left; width: 289px; margin: 0 48px; position: relative; }
#content .stepul li .icon { width: 160px; height: 44px; margin: -22px 0 23px 0; font-size: 20px; background: #fe6262; border-radius: 22px; color: #fff; text-align: center; line-height: 44px; }
#content .stepul li .icon span { padding-right: 10px; }
#content .stepul li p { color: #666; font-size: 16px; line-height: 170%; }
#content .stepul li p span.red { color: #ff0b0b; }
#footer { background: url("../images/footer.jpg") no-repeat center top; width: 100%; height: 230px; }
#footer .main { width: 1180px; margin: 0 auto; }
#footer .main li { float: left; width: 254px; padding: 60px 66px 0 73px; font-size: 16px; line-height: 220%; color: #fff; }
#footer .main li .icon { float: left; margin-right: 16px; }
#footer .main li.maxline { line-height: 46px; font-size: 20px; }
#footer .main li a { color: #fff; text-decoration: none; }
/*}*/
/*{==========================移动端*/
.phone { background: url("../images/phone_bg.jpg") no-repeat center top; }
#main { width: 720px; margin: 0 auto; padding-bottom: 184px; overflow: hidden; }
#main img { display: block }
#main .top { width: 720px; height: 419px; position: relative; }
#main .top .logo { left: 37px; display: block; position: absolute; top: 20px; }
.slideInDown { animation: slideInDown 1s; -webkit-animation: slideInDown 1s; }
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
#main .top .showimg { width: 240px; height: 259px; position: absolute; top: 90px; left: 82px; }
.bounceInLeft { animation: bounceInLeft 1s; -webkit-animation: bounceInLeft 1s; }
@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
#main .top .txt { position: absolute; width: 302px; height: 90px; right: 76px; top: 155px; }
#main .two { width: 720px; height: 412px; position: relative; }
#main .two .txt { position: absolute; width: 301px; height: 89px; left: 80px; top: 140px; }
#main .two .showimg { width: 267px; height: 259px; position: absolute; right: 78px; top: 48px; }
.bounceInRight { animation: bounceInRight 1s; -webkit-animation: bounceInRight 1s; }
@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
#main .three { width: 720px; height: 414px; position: relative; }
#main .three .txt { position: absolute; width: 301px; height: 79px; right: 79px; top: 145px; }
#main .three .showimg { width: 209px; height: 259px; position: absolute; left: 83px; top: 70px; }
.flipInX { animation: flipInX 1s; -webkit-animation: flipInX 1s; }
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
#main .pianner { text-align: center; line-height: 180%; font-size: 25px; color: #666; }
#main .pianner span { color: #d73a2e; font-size: 71px; padding: 0 18px; }
#main .phoneicon { margin: 30px auto 15px auto; width: 256px; height: 204px; position: relative }
#main .phoneicon .erweima { margin: 0 auto; }
#main .phoneicon .scan { width: 256px; height: 8px; position: absolute; z-index: 9; left: 0; animation: scan 4s linear infinite; -webkit-animation: scan 4s linear infinite; }
@keyframes scan {
  0% { top: 0 }
  50% { top: 200px; }
  100% { top: 0; }
}
@-webkit-keyframes scan {
  0% { top: 0 }
  50% { top: 200px; }
  100% { top: 0; }
}
#main .phonetxt { text-align: center; font-size: 20px; color: #666; }
#main .teltxt { width: 290px; height: 62px; margin: 0 auto; font-size: 34px; color: #666; padding-top: 40px; }
#main .teltxt img { float: left; padding-right: 26px; }
#main .teltxt a { color: #666; text-decoration: none; }
.phone .footer { display: none; width: 720px; height: 164px; background: url("../images/phone/footerbg.jpg") no-repeat; position: fixed; bottom: 0; z-index: 999; }
.phone .footer a { display: block; -webkit-font-smoothing: antialiased; position: absolute; right: 58px; top: 49px; width: 230px; height: 66px; line-height: 66px; text-decoration: none; background: #f23425; border-radius: 33px; color: #fff; font-size: 36px; text-align: center; }
.slideInUp { -webkit-animation: slideInUp 1s; animation: slideInUp 1s; }
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
    opacity: 0;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}