html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    list-style: none;
}

body {
    font-family: "Myriad Set Pro", "Lucida Grande", "Helvetica Neue", "Helvetica", "Arial", "Verdana", "sans-serif";
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    background: #fff;
    color: #666;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

html, body {
   box-sizing:border-box;
   height: 100%;
}

.amap li:before {
    position: absolute;
    bottom: 10px;
    left: 50%;
    content: '';
    display: block;
    width: 30px;
    height: 13px;
    margin-left: -15px;
    background-image: url(../img/sharp@2x.png);
    background-size: 30px 13px;
    animation: shake 1s ease-in-out infinite normal;
    -webkit-animation: shake 1s ease-in-out infinite normal;
}

@keyframes shake {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(0, -10px);
    }
    50% {
        transform: translate(0, 0);
    }
    70% {
        transform: translate(0px, -5px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes shake {
    0% {
        -webkit-transform: translate(0, 0);
    }
    25% {
        -webkit-transform: translate(0, -10px);
    }
    50% {
        -webkit-transform: translate(0, 0);
    }
    70% {
        -webkit-transform: translate(0px, -5px);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}

.amap li:last-child:before {
    display: none;
}

/*slide style*/

.amap {
    position: relative;
    overflow: hidden;
}

.amap ul {
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background: gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background: -moz-linear-gradient(top, #fff, #fff);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
    background-size: contain;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.amap li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    /* background: url(../img/build_bg.png) no-repeat right bottom,gradient(linear, left top, left bottom, from(#eaf4ff), to(#d1e7ff));
 background: url(../img/build_bg.png) no-repeat right bottom, -moz-linear-gradient(top, #eaf4ff, #d1e7ff);
 background: url(../img/build_bg.png) no-repeat right bottom,-webkit-gradient(linear, left top, left bottom, from(#eaf4ff), to(#d1e7ff));
  */
    /*background: url(../img/beijing@2x.png) no-repeat;*/
    background-color: #fff;
    background-size: 100% 100%;
    transition: transform .3s ease-in-out;
    -webkit-transition: transform .3s ease-in-out;
    display: none;
    -webkit-transform: translateZ(0);
}

.logo {
   position: absolute;
   display: block;
   top: 50%;
   left: 50%;
   margin-top:-80px;
   margin-left:-55px;
   width: 110px;
   height: 160px;
   /* animation: item1-0-at .8s .4s ease-in-out both;
   -webkit-animation: item1-0-at .8s .4s ease-in-out both; */
}
.play  .logo_logo{
   position: absolute;
   display: block;
   top: 33%;
   margin-top: -80px;
   left: 50%;
   /* margin-top:-80px; */
   margin-left:-55px;
   width: 110px;
   height: 160px;
   background: url(../img/logo@2x.png) no-repeat;
   background-size: 100% 100%;
   /* animation: item1-0-at00 .8s .4s ease-in-out both;
   -webkit-animation: item1-0-at00 .8s .4s ease-in-out both; */
}
@keyframes item1-0-at00 {
  0% {
      opacity: 0;
      transform: translate3d(0, -100px, 0) scale(0.2);
  }
  40% {
      opacity: 1;
      transform: translate3d(0, 80px, 0) scale(0.2);
  }
  80% {
      opacity: 1;
      transform: translate3d(0, 0px, 0) scale(0.2);
  }
  100% {
      opacity: 1;
      transform: translate3d(0, 0px, 0) scale(0.3333333);
  }
}
@-webkit-keyframes item1-0-at00 {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, -100px, 0) scale(0.2);
  }
  40% {
      opacity: 1;
      -webkit-transform: translate3d(0, 80px, 0) scale(0.2);
  }
  80% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0px, 0) scale(0.2);
  }
  100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0px, 0) scale(0.3333333);
  }
}
.lottie {
   position: absolute;
   width: 100%;
   height: 270px;
   top: 50%;
   margin-top: -135px;
   left: 0;
}

/*point style*/

.amap-point {
    position: absolute;
    top: 38%;
    right: 15px;
    display: none;
    width: 9px;
    text-align: center;
    font-size: 0;
    z-index: 90;
}

.amap-point span {
    margin: 8px auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4287FF;
    display: block;
    z-index: 100;
    opacity: 0.24;
}

.amap-point span.current {
    margin: 8px auto;
    opacity: 1;
}

/*.amap-point span:first-child {
    width: 8px;
    height: 7px;
    margin: 4px auto;
    background: url(../img/icon_home.png) no-repeat 50%;
    background-size: 8px;
    opacity: 1;
    border-radius: 0;
}*/

/*point end*/

a {
    color: #666;
}

#downWrap {
    position: absolute;
    width: 100%;
    /*top: 77%;*/
    bottom: 8.5%;
    z-index: 90;
    -webkit-transform: translateZ(0);
}
.toast{
  position: relative;
  top:-10px;

  width:100%;
  background-color: rgba(0, 0, 0, .7);
  text-align: center;
  padding: 10px;
  color:#fff;
  border-radius: 50px;
  left: 12%;
  width: 76%;
  box-sizing: border-box;
  text-align: center;
  display: none;
}

.down {
    position: relative;
    left: 7%;
    width: 86%;
    box-sizing: border-box;
    /* margin: 0 auto; */
    /* width: 136px; */
    text-align: center;
    margin-bottom: 10px;
}

.down a {
   display: inline-block;
   text-decoration: none;
   outline: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   user-select: none;
   -webkit-touch-callout: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   outline: none;
   /* remove highlight outline on samsung */
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   -webkit-tap-highlight-color: transparent;
}

.down #fresh {
    margin: 8px auto;
    width:60px;
    box-sizing: border-box;
    font-size: 13px;
    /* line-height: 25px; */
    text-align: center;
    color: #5c7afc;
    border-bottom: 1px solid #5c7afc;
}

#fresh {
    display: none;
}

#otherVersion {
    display: none;
    color: #666;
}

.dlbox {
    position: relative;
    left: 50%;
    margin-bottom: 10px;
    width: 140px;
    margin-left: -70px;
}

.dl2 {
    width: 120px;
    margin-left: -60px;
}

#otherVersion span {
    display: inline-block;
    width: 120px;
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 5px;
    text-align: center;
    border-bottom: 1px solid #666;
    /*text-decoration: underline;*/
}

#otherVersion a {
    display: inline-block;
    width: 84px;
}

#otherVersion p {
    margin-top: -10px;
    width: 100%;
    text-align: center;
    font-size: 13px;
}

/*.dlbox{
 margin: 10px 20px 0px 20px;
 font-size: 15px;
 line-height: 20px;
 text-align: center;
 color: #686868;
}*/

.appstore, .android, .gp, .harmony{
    box-sizing: border-box;
    height: 48px;
    line-height: 48px;
    border-radius: 24px;
    background: #4287FF;
    background: linear-gradient(90deg, #1A66FF 0%, #1A8CFF 100%);
    border-radius: 16px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    vertical-align: -3px;
}
.android, .gp{
    width: 44%;
}
.gp{
    margin-left: 20px;
}

.appstore:before, .android:before, .gp::before, .harmony::before{
   content: '';
   display: inline-block;
   width: 21px;
   height: 24px;
   padding: 12px 0;
   margin-right: 10px;
   background: no-repeat center center;
   -webkit-background-size: 21px 24px;
   background-size: 21px 24px;
   vertical-align: top;

}
.appstore:before {
   background-image: url(../img/apple.png);
}
.android:before {
   background-image: url(../img/and@2x.png);
}
.gp:before {
    background-image: url(../img/gp@2x.png);
}
.harmony::before{
    background-image: url(../img/hm@2x.png);
}


.appstore strong,
.android strong {
    display: block;
    font-size: 15px;
}

.cloud_bg1 {
    position: absolute;
    top: 5.78%;
    left: 5%;
    width: 43px;
    height: 29px;
    background: url(../img/cloud.png) no-repeat;
    background-size: 43px 29px;
    z-index: 90;
    -webkit-transform: translateZ(0);
}

.cloud_bg2 {
    position: absolute;
    top: 5.78%;
    right: 8.6%;
    width: 31px;
    height: 21px;
    background: url(../img/cloud.png) no-repeat;
    background-size: 31px 21px;
    z-index: 90;
    -webkit-transform: translateZ(0);
}

.cloud_bg3 {
    position: absolute;
    top: 24.5%;
    right: 6%;
    width: 31px;
    height: 21px;
    background: url(../img/cloud.png) no-repeat;
    background-size: 31px 21px;
    z-index: 90;
    -webkit-transform: translateZ(0);
}

.build_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 90;
}

.amap p {
    position: absolute;
}

.amap p img {
    width: 100%;
}

/*page0 style*/

.title, .li2_title {
    position: absolute;
    top: 8.3%;
    text-align: center;
    width: 100%;
}

.main_title {
    color: #333333;
    font-size: 28px;
    font-weight: 600;
}

.sub_title {
    color: #666666;
    font-size: 16px;
}

.item0-0 {
    width: 270px;
    height: 270px;
    border-radius: 270px;
}

.play .item0-0 {
    top: 48%;
    left: 50%;
    margin: -90px 0 0 -135px;
    /*width: 270px;
 height: 270px;*/
    background: gradient(linear, left top, left bottom, from(#71cbff), to(#2c8eef));
    background: -moz-linear-gradient(top, #71cbff, #2c8eef);
    background: -webkit-gradient(linear, left top, left bottom, from(#71cbff), to(#2c8eef));
    /*border-radius: 270px;*/
    animation: item0-0-at 1s ease-in-out both;
    -webkit-animation: item0-0-at 1s ease-in-out both;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
}

@keyframes item0-0-at {
    0% {
        opacity: 0;
        transform: scale(.2);
    }
    100% {
        opacity: 1;
        transform: scale(0.3333333);
    }
}

@-webkit-keyframes item0-0-at {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(0.3333333);
    }
}

.play .item0-1 {
    top: 48%;
    left: 50%;
    margin: 20px 0 0 -29px;
    width: 58px;
    height: 55px;
    background: url(../img/plane.png) no-repeat 0 0;
    overflow: hidden;
    background-size: 58px 55px;
    z-index: 100;
    animation: item0-1-at .4s .4s ease-in-out both;
    -webkit-animation: item0-1-at .4s .4s ease-in-out both;
    -webkit-transform: translateZ(0);
}

@keyframes item0-1-at {
    0% {
        background-position: -58px 55px;
    }
    100% {
        background-position: 0 0;
    }
}

@-webkit-keyframes item0-1-at {
    0% {
        background-position: -58px 55px;
    }
    100% {
        background-position: 0 0;
    }
}

.play .item0-2 {
    top: 42%;
    left: 50%;
    margin: -26px 0 0 -78px;
    width: 78px;
    height: 78px;
    background: gradient(linear, left top, left bottom, from(#f8895b), to(#f7885b));
    background: -moz-linear-gradient(top, #f8895b, #f7885b);
    background: -webkit-gradient(linear, left top, left bottom, from(#f8895b), to(#f7885b));
    border-radius: 100px;
    animation: item0-2-at .5s .6s ease-in-out both;
    -webkit-animation: item0-2-at .5s .6s ease-in-out both;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
}

@keyframes item0-2-at {
    0% {
        opacity: 0;
        transform: translate3d(18px, 18px, 0) scale(.3);
    }
    100% {
        opacity: 1;
        transform: scale(0.3333333);
    }
}

@-webkit-keyframes item0-2-at {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(18px, 18px, 0) scale(.3);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(0.3333333);
    }
}

.play .item0-3 {
    top: 51%;
    left: 50%;
    margin: -24px 0 0 21px;
    ;
    width: 72px;
    height: 72px;
    background: gradient(linear, left top, left bottom, from(#ef64ff), to(#ee64ff));
    background: -moz-linear-gradient(top, #ef64ff, #ee64ff);
    background: -webkit-gradient(linear, left top, left bottom, from(#ef64ff), to(#ee64ff));
    border-radius: 100px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item0-3-at .9s .6s ease-in-out both;
    -webkit-animation: item0-3-at .9s .6s ease-in-out both;
}

.play .item0-4 {
    top: 39%;
    left: 50%;
    margin: -36px 0 0 -36px;
    width: 108px;
    height: 108px;
    background: gradient(linear, left top, left bottom, from(#f87f82), to(#f77e82));
    background: -moz-linear-gradient(top, #f87f82, #f77e82);
    background: -webkit-gradient(linear, left top, left bottom, from(#f87f82), to(#f77e82));
    border-radius: 200px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item0-3-at .8s .8s ease-in-out both;
    -webkit-animation: item0-3-at .8s .8s ease-in-out both;
}

@keyframes item0-3-at {
    0% {
        opacity: 0;
        transform: translate3d(-8px, 8px, 0) scale(.3);
    }
    100% {
        opacity: 1;
        transform: scale(0.3333333);
    }
}

@-webkit-keyframes item0-3-at {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-8px, 8px, 1px) scale(.3);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(0.3333333);
    }
}

.play .item0-5 {
    top: 54%;
    left: 50%;
    margin: -14px 0 0 -78px;
    width: 42px;
    height: 42px;
    background: gradient(linear, left top, left bottom, from(#98cafa), to(#97cafa));
    background: -moz-linear-gradient(top, #98cafa, #97cafa);
    background: -webkit-gradient(linear, left top, left bottom, from(#98cafa), to(#97cafa));
    border-radius: 100px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item0-4-at .9s .9s ease-in-out both;
    -webkit-animation: item0-4-at .9s .9s ease-in-out both;
}

@keyframes item0-4-at {
    0% {
        opacity: 0;
        transform: translate3d(14px, -14px, 0) scale(.3);
    }
    100% {
        opacity: 1;
        transform: scale(0.3333333);
    }
}

@-webkit-keyframes item0-4-at {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(14px, -14px, 0) scale(.3);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(0.3333333);
    }
}

.play .item0-6 {
    top: 36%;
    left: 50%;
    margin: -18px 0 0 -48px;
    width: 54px;
    height: 54px;
    background: gradient(linear, left top, left bottom, from(#49d38a), to(#48d38a));
    background: -moz-linear-gradient(top, #49d38a, #48d38a);
    background: -webkit-gradient(linear, left top, left bottom, from(#49d38a), to(#48d38a));
    border-radius: 100px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item0-2-at 1s .9s ease-in-out both;
    -webkit-animation: item0-2-at 1s .9s ease-in-out both;
}

.play .item0-7 {
    top: 31%;
    left: 50%;
    margin: -10px 0 0 -24px;
    width: 30px;
    height: 30px;
    background: gradient(linear, left top, left bottom, from(#bfe6dd), to(#bee6dd));
    background: -moz-linear-gradient(top, #bfe6dd, #bee6dd);
    background: -webkit-gradient(linear, left top, left bottom, from(#bfe6dd), to(#bee6dd));
    border-radius: 100px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item0-3-at .9s 1.1s ease-in-out both;
    -webkit-animation: item0-3-at .9s 1.1s ease-in-out both;
}

/*page0 end*/

/*page1 start*/

.play .item1-0 {
    top: 36%;
    left: 50%;
    margin: -114px 0 0 -171px;
    width: 342px;
    height: 342px;
    background: url(../img/voice.png) no-repeat 50% 50%, gradient(linear, left top, left bottom, from(#ffb650), to(#ee793f));
    background: url(../img/voice.png) no-repeat 50% 50%, -moz-linear-gradient(top, #ffb650, #ee793f);
    background: url(../img/voice.png) no-repeat 50% 50%, -webkit-gradient(linear, left top, left bottom, from(#ffb650), to(#ee793f));
    background-size: 123px auto, 100% auto;
    border-radius: 342px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item1-0-at .8s .4s ease-in-out both;
    -webkit-animation: item1-0-at .8s .4s ease-in-out both;
}

@keyframes item1-0-at {
    0% {
        opacity: 0;
        transform: translate3d(0, -100px, 0) scale(0.2);
    }
    40% {
        opacity: 1;
        transform: translate3d(0, 80px, 0) scale(0.2);
    }
    80% {
        opacity: 1;
        transform: translate3d(0, 0px, 0) scale(0.2);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0px, 0) scale(0.3333333);
    }
}

@-webkit-keyframes item1-0-at {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100px, 0) scale(0.2);
    }
    40% {
        opacity: 1;
        -webkit-transform: translate3d(0, 80px, 0) scale(0.2);
    }
    80% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0px, 0) scale(0.2);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0px, 0) scale(0.3333333);
    }
}

.play .item1-1 {
    top: 36%;
    left: 50%;
    margin: 0px 0 0 43px;
    width: 18px;
    height: 19px;
    background: url(../img/sound1.png) no-repeat;
    background-size: 18px 19px;
    animation: item1-1-at 1s 1.2s ease-in-out both;
    -webkit-animation: item1-1-at 1s 1.2s ease-in-out both;
}

@keyframes item1-1-at {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes item1-1-at {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.play .item1-2 {
    top: 36%;
    left: 50%;
    margin: -10px 0 0 45px;
    width: 24px;
    height: 26px;
    background: url(../img/sound2.png) no-repeat;
    background-size: 24px 26px;
    animation: item1-1-at .8s 1.8s ease-in-out both infinite;
    -webkit-animation: item1-1-at .8s 1.8s ease-in-out both infinite;
}

/*page1 end*/

/*page2 start*/

.play .item2-0 {
    position: absolute;
    width: 130px;
    height: 130px;
    top: 36%;
    left: 50%;
    margin-left: -65px;
}

.play .item2-0 div {
    position: relative;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    margin: 0 auto;
    background: url(../img/circle_bg.png) no-repeat;
    background-size: 130px 130px;
}

.play .item2-0 i {
    display: block;
    position: absolute;
    left: 40%;
    width: 31px;
    height: 24px;
    background: url(../img/plane3.png) no-repeat 0 0;
    background-size: 31px 24px;
    transform-origin: 12px -60px;
    -webkit-transform-origin: 12px -60px;
    margin-top: -9px;
    transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    animation: item2-0-at 2s 1s ease-in-out both;
    -webkit-animation: item2-0-at 2s 1s ease-in-out both;
}

@keyframes item2-0-at {
    0% {
        opacity: 0;
        transform: rotateZ(0deg);
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: rotateZ(-360deg);
    }
}

@-webkit-keyframes item2-0-at {
    0% {
        opacity: 0;
        -webkit-transform: rotateZ(0deg);
    }
    5% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: rotateZ(-360deg);
    }
}

.play .item2-1 {
    position: absolute;
    top: 36%;
    left: 50%;
    margin: -70px 0 0 -135px;
    width: 270px;
    height: 270px;
    border-radius: 270px;
    background: url(../img/plane_bg.png) no-repeat 50% 50%, gradient(linear, left top, left bottom, from(#71cbff), to(#2c8eef));
    background: url(../img/plane_bg.png) no-repeat 50% 50%, -moz-linear-gradient(top, #71cbff, #2c8eef);
    background: url(../img/plane_bg.png) no-repeat 50% 50%, -webkit-gradient(linear, left top, left bottom, from(#71cbff), to(#2c8eef));
    background-size: 150px 123px, 100% auto;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item0-0-at 1s ease-in-out both;
    -webkit-animation: item0-0-at 1s ease-in-out both;
}

.play .item2-2 {
    position: absolute;
    top: 36%;
    left: 50%;
    margin: 74px 0 0 24px;
    width: 102px;
    height: 102px;
    border-radius: 102px;
    background: #fa8183 url(../img/car_icon.png) no-repeat 50% 50%;
    background-size: 54px 48px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item2-1-at .2s 1.2s ease-in-out both;
    -webkit-animation: item2-1-at .2s 1.2s ease-in-out both;
}

.play .item2-3 {
    position: absolute;
    top: 36%;
    left: 50%;
    margin: -64px 0 0 -1px;
    width: 102px;
    height: 102px;
    border-radius: 102px;
    background: #bc92d2 url(../img/bus_icon.png) no-repeat 50% 50%;
    background-size: 60px 57px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item2-1-at .2s 1.7s ease-in-out both;
    -webkit-animation: item2-1-at .2s 1.7s ease-in-out both;
}

.play .item2-4 {
    position: absolute;
    top: 35.5%;
    left: 50%;
    margin: -34px 0 0 -130px;
    width: 102px;
    height: 102px;
    border-radius: 102px;
    background: #6ada93 url(../img/person_icon.png) no-repeat 50% 50%;
    background-size: 39px 66px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item2-1-at .3s 2s ease-in-out both;
    -webkit-animation: item2-1-at .3s 2s ease-in-out both;
}

@keyframes item2-1-at {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes item2-1-at {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*page2 end*/

/*page3 start*/

.play .item3-0 {
    position: absolute;
    top: 55%;
    left: 50%;
    margin: 0 0 0 -78px;
    width: 156px;
    height: 54px;
    background: url(../img/box.png) no-repeat;
    background-size: 156px 54px;
}

.play .item3-1 {
    position: absolute;
    top: 23%;
    left: 44%;
    margin: -48px 0 0 -48px;
    width: 144px;
    height: 144px;
    border-radius: 144px;
    background: #469cf6 url(../img/item3-1.png) no-repeat 50% 50%;
    background-size: 96px 36px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item3-right-at .4s .3s ease-in-out both;
    -webkit-animation: item3-right-at .4s .3s ease-in-out both;
}

.play .item3-2 {
    position: absolute;
    top: 33.6%;
    left: 34%;
    margin: -36px 0 0 -36px;
    width: 108px;
    height: 108px;
    border-radius: 108px;
    background: #ff728d url(../img/item3-2.png) no-repeat 50% 50%;
    background-size: 72px 30px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item3-left-at .4s .4s ease-in-out both;
    -webkit-animation: item3-left-at .4s .4s ease-in-out both;
}

.play .item3-3 {
    position: absolute;
    top: 34%;
    right: 34%;
    margin: -44px -44px 0 0;
    width: 132px;
    height: 132px;
    border-radius: 100px;
    background: #3bdb8b url(../img/item3-3.png) no-repeat 50% 50%;
    background-size: 96px 30px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item3-right-at .4s .5s ease-in-out both;
    -webkit-animation: item3-right-at .4s .5s ease-in-out both;
}

.play .item3-4 {
    position: absolute;
    top: 42%;
    left: 39%;
    margin: -25px 0 0 -25px;
    width: 75px;
    height: 75px;
    border-radius: 100px;
    background: #73b7ff url(../img/item3-4.png) no-repeat 50% 50%;
    background-size: 57px 27px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item3-left-at .4s .6s ease-in-out both;
    -webkit-animation: item3-left-at .4s .6s ease-in-out both;
}

.play .item3-5 {
    position: absolute;
    top: 50%;
    right: 39%;
    margin: -25px -25px 0 0;
    width: 75px;
    height: 75px;
    border-radius: 100px;
    background: #b69fd6 url(../img/item3-5.png) no-repeat 50% 50%;
    background-size: 57px 27px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item3-right-at .4s .7s ease-in-out both;
    -webkit-animation: item3-right-at .4s .7s ease-in-out both;
}

.play .item3-6 {
    position: absolute;
    top: 49.5%;
    left: 41%;
    margin: -20px 0 0 -20px;
    width: 60px;
    height: 60px;
    border-radius: 100px;
    background: #fd7405 url(../img/item3-4.png) no-repeat 50% 50%;
    background-size: 48px 21px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item3-left-at .4s .8s ease-in-out both;
    -webkit-animation: item3-left-at .4s .8s ease-in-out both;
}

.play .item3-7 {
    position: absolute;
    top: 54%;
    left: 48%;
    margin: -22px 0 0 -22px;
    width: 66px;
    height: 66px;
    border-radius: 100px;
    background: #ff93a8 url(../img/item3-4.png) no-repeat 50% 50%;
    background-size: 48px 21px;
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item3-right-at .4s .85s ease-in-out both;
    -webkit-animation: item3-right-at .4s .85s ease-in-out both;
}

@keyframes item3-left-at {
    0% {
        opacity: 0;
        transform: translate3d(-3px, -3px, 0) scale(0.3333333);
    }
    100% {
        transform: scale(0.3333333);
    }
}

@-webkit-keyframes item3-left-at {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3px, -3px, 0) scale(0.3333333);
    }
    100% {
        -webkit-transform: scale(0.3333333);
    }
}

@keyframes item3-right-at {
    0% {
        opacity: 0;
        transform: translate3d(3px, -3px, 0) scale(0.3333333);
    }
    100% {
        transform: scale(0.3333333);
    }
}

@-webkit-keyframes item3-right-at {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3px, -3px, 0) scale(0.3333333);
    }
    100% {
        -webkit-transform: scale(0.3333333);
    }
}

/*page3 end*/

/*page4 start*/

.item4-0 {
    width: 375px;
    height: 375px;
    border-radius: 375px;
}

.play .item4-0 {
    position: absolute;
    top: 34.4%;
    left: 50%;
    margin: -125px 0 0 -187px;
    background: gradient(linear, left top, left bottom, from(#8cd180), to(#2aaf6d));
    background: -moz-linear-gradient(top, #8cd180, #2aaf6d);
    background: -webkit-gradient(linear, left top, left bottom, from(#8cd180), to(#2aaf6d));
    -webkit-transform: scale(0.3333333);
    -webkit-transform-origin: center center;
    animation: item4-0-at .6s ease-in-out both;
    -webkit-animation: item4-0-at .6s ease-in-out both;
}

@keyframes item4-0-at {
    0% {
        opacity: 0;
        transform: scale(.3);
    }
    100% {
        opacity: 1;
        transform: scale(.3333333);
    }
}

@-webkit-keyframes item4-0-at {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(.3333333);
    }
}

.play .item4-1 {
    position: absolute;
    top: 34.4%;
    left: 50%;
    margin: 30px 0 0 -21px;
    width: 41px;
    height: 65px;
    background: url(../img/battery.png) no-repeat;
    background-size: 41px 65px;
    animation: item4-1-at .4s .6s ease-in-out both;
    -webkit-animation: item4-1-at .4s .6s ease-in-out both;
}

@keyframes item4-1-at {
    0% {
        opacity: 0;
        transform: rotate(172deg);
    }
    100% {}
}

@-webkit-keyframes item4-1-at {
    0% {
        opacity: 0;
        -webkit-transform: rotate(172deg);
    }
    100% {}
}

.play .item4-2 {
    position: absolute;
    top: 34.4%;
    left: 50%;
    margin: 43px 0 0 -13px;
    width: 26px;
    height: 45px;
    background: url(../img/item4-2.png) no-repeat;
    border-radius: 3px;
    animation: item4-2-at 1.2s .6s ease-in-out both;
    -webkit-animation: item4-2-at 1.2s .6s ease-in-out both;
}

@keyframes item4-2-at {
    0% {
        opacity: 0;
        background-position: 0px 30px;
        transform: rotate(172deg);
    }
    30% {
        opacity: 1;
        background-position: 0px 30px;
        transform: rotate(0deg);
    }
    60% {
        opacity: 1;
        background-position: 0px 30px;
        transform: rotate(0deg);
    }
    100% {
        background-position: 0px 0px;
    }
}

@-webkit-keyframes item4-2-at {
    0% {
        opacity: 0;
        background-position: 0px 30px;
        -webkit-transform: rotate(172deg);
    }
    30% {
        opacity: 1;
        background-position: 0px 30px;
        -webkit-transform: rotate(0deg);
    }
    60% {
        opacity: 1;
        background-position: 0px 30px;
        -webkit-transform: rotate(0deg);
    }
    100% {
        background-position: 0px 0px;
    }
}

/*page4 end*/

/*page5 start*/

.item5-0 {
    position: absolute;
    top: 12%;
    left: 0;
    width: 100%;
    height: 38px;
    background: url(../img/item5-title-2016.png) no-repeat 50% 50%;
    background-size: 266px 38px;
}

.item5-0 #item5-title {
    position: absolute;
    left: 60.8%;
    font-size: 23px;
    color: #1596f9;
    top: -3px;
}

.item5-text-container {
   position: absolute;
   bottom: 23.5%;
   left: 0;
   width: 100%;
}

.item5-text-container p {
   position: static;
}

.item5-1 {
   font-size: 20px;
   font-weight: 600;
   color: #333;
   text-align: center;
}

.item5-title {
   display: none;
   margin-top:  2px;
   font-size: 13px;
   color: #777;
   text-align: center;
}

.item5-title p {
   position: static;
   margin-top: 8px;
}

.play .item5-title {
   display: block;
}

.play .item5-2 {
   animation: item5-0-at .6s .4s ease-in-out both;
   -webkit-animation: item5-0-at .6s .4s ease-in-out both;
   padding: 0 32px;
   text-align: justify;
   font-size: 12px;
}

.play .item5-3 {
   animation: item5-0-at .6s 1s ease-in-out both;
   -webkit-animation: item5-0-at .6s 1s ease-in-out both;
   padding: 0 40px;
}

.play .item5-4 {
   animation: item5-0-at .6s 1.6s ease-in-out both;
   -webkit-animation: item5-0-at .6s 1.6s ease-in-out both;
   padding: 0 40px;
}

@keyframes item5-0-at {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes item5-0-at {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*page5 end*/

@media screen and (min-width:410px) {
    .title {
        -webkit-transform: scale(1.2);
    }
    .li2_title {
        -webkit-transform: scale(1.2);
    }
    /* #downWrap {
   -webkit-transform: scale(1.4);
 } */
    .play .item3-0 {
        -webkit-transform: scale(1.2);
    }
    .item5-1 {
        /* -webkit-transform: scale(1.3); */
        font-size: 26px;

    }
    .item5-title {
        margin-top: 18px;
        /* -webkit-transform: scale(1.3); */
        font-size: 130%;
    }
}

@media screen and (max-height: 580px) {
   .lottie {
       position: absolute;
       width: 100%;
       height: 180px;
       top: 50%;
       margin-top: -90px;
       left: 0;
   }
   .item5-text-container {
       position: absolute;
       bottom: 28.5%;
       left: 0;
       width: 100%;
   }
}

@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
   .isInAmap #downWrap {
       /* 68 / 3 */
       margin-bottom: 23px;
   }
   html.isInAmap, body.isInAmap {
       box-sizing:border-box;
       height: 100vh;
   }
}

.mask {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.85);
}
.guard {
    position: absolute;
    /* right: 20px; */
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    margin-left: 32px;
    top: 10px;
    width: 272px;
    height: 408px;
    background: url("") no-repeat;
    background-size: contain;
}
.guard.android {
    background-image: url("../img/mask/android.png");
}
.guard.ios {
    background-image: url("../img/mask/ios.png");
}

/* 版权区块 */
.copyright{
  position: absolute;
  left: 0;
  bottom: 8px;
  height: 40px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #999;
}

.copyright .link{
  margin-top: 6px;
}

.copyright .link a{
  color: #597e9b;
  text-decoration: none;
}

#hasProblem {
    text-align: center;
}

#hasProblem a {
    color: #5c7afc;
    text-decoration: underline;
    font-size: 13px;
    /* line-height: 25px; */
    display: inline-block;
    /*margin: 8px auto*/
}