@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,input,p,blockquote,th,td,section,canvas {
    padding: 0;
    margin: 0;
}
img{display: block; width: 100%;}
/*.Inpt{border:0;outline:none;!*去除蓝色边框*!}*/
html,body {
    font-size: 22px;
    color: #000;
    font-family: 'Microsoft YaHei', Arial;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    -webkit-touch-callout:none;  /*禁用长触弹出的下载图片菜单*/
    -webkit-user-select:none; /*禁用长触选择文字等功能*/
    overflow: hidden;
}
li{list-style:none;}
i{ font-style:normal;}
input,textarea{border:none;background: none;resize:none;}
.hide{display: none;}


.loading{position: absolute;left:0;top:0;width:100%;height: 100%;color:white; background:#ffffff;}
.loading>div{position: absolute;top:50%;left:50%;}
/*自行车*/
.load_1{width:5.6rem; height:1.37rem;margin:-0.3rem 0 0 -2.8rem;}
.load_1_1{width: 2.15rem; position: absolute; top: 0; left:0;}
.load_1_1_1{width: 0.69rem; position: absolute; top: 0.65rem;left: 0.04rem;}
.load_1_1_2{width: 0.69rem; position: absolute; top: 0.65rem;left: 1.42rem;}
.load_1_1_3{width: 2.15rem; position: absolute;}

.load_2{width: 5.6rem; height: 0.06rem; background:#bfbfbf; border-radius: 0.2rem; overflow: hidden; margin:1.1rem 0 0 -2.8rem;}
.load_2_1{width: 2.15rem;height: 0.06rem; left:0;top:0; background:#1175c6;-webkit-border-radius: 0.2rem;border-radius:0.2rem;}


.main{ width: 100%; height: 100%;/*position: relative;top:0;left:0;*/}
.page{width: 6.4rem; height:100%;position: relative;/* top:50%; left: 50%;margin: -5.2rem 0 0 -3.2rem;*/ background: #ffffff; margin:auto;}

.page1{width: 100%; height: 100%; position: relative; background: url(../images/bg_1.png) no-repeat center center; background-size: 100%;}
.page1>div{position: absolute; top: 50%; left: 50%;}
.p1_1{width: 5.79rem; margin:-4.34rem 0 0 -2.89rem;}
.p1_2{width: 6.4rem;margin: 0.25rem 0 0 -3.2rem;}
.p1_2_1{width: 0.94rem;position: absolute;top: 2.55rem;left: 0.25rem;}
.p1_2_2{width: 1.87rem;position: absolute;top: 1.75rem;left: 4.25rem;}
.p1_2_3{width: 1.86rem;position: absolute;top: 1.75rem;left: 0.4rem;}
.p1_2_4{width: 6.24rem; position: absolute; top:0; left: 0.15rem;}
.p1_2_5{width:0.27rem;position: absolute;top: 1.62rem;left:0.44rem;}

.page2{width: 100%; height: 100%; position: absolute; background: url(../images/bg_2.png) no-repeat center center; background-size: 100%;}
.page2>div{position: absolute; top: 50%; left: 50%;}
.p2_1{width: 6.4rem;margin:-4.8rem 0 0 -3.2rem;}
.p2_1_1{width: 0.31rem;position: absolute;top: 0;left: 3.14rem;}
.p2_1_2{width: 0.30rem;position: absolute;top: 0;left: 2.64rem;}
.p2_1_3{width: 0.33rem;position: absolute;top: 0;left:2.14rem;}
.p2_1_4{width: 0.27rem; position: absolute; top:1.2rem; left:1.84rem;}
.p2_1_5{width:0.29rem;position: absolute;top: 0.7rem;left:1.28rem;}
.p2_2{width: 6.4rem; margin:-1.06rem 0 0 -2.5rem;}
.p2_2_1{width: 1.55rem; position: absolute; top: 0.75rem; left: 0.76rem;}
.p2_2_2{width: 5.96rem; position: absolute; top: -0.1rem; left: -0.5rem;}
.p2_2_3{width: 1.46rem; position: absolute; top: 1.68rem; left: 0.56rem;}
.p2_2_4{width: 1rem; position: absolute; top: 4rem; left: 4.01rem;}
.p2_2_5{width: 1.48rem; position: absolute; top: 4rem; left: -0.1rem;}


.p2_3{width: 4.93rem; margin:-5rem 0 0 0.6rem;}
.p2_4{width: 8.8rem; height: 2.12rem; margin:1.08rem 0 0 -5rem;background: url(../images/p2_4.png) no-repeat center center; background-size: 100%;}
.p2_4_1{width: 0.51rem; position: absolute; top: 1.35rem;left: 2.78rem;}
.p2_4_2{width: 0.63rem; position: absolute; top: 1.36rem;left: 5.2rem;}

.page3{width: 100%; height: 100%; position: absolute; background: url(../images/bg_3.png) no-repeat center center; background-size: 100%;}
.page3>div{position: absolute; top: 50%; left: 50%;}
.p3_1{width: 5.5rem;margin:-4.56rem 0 0 -2.3rem;animation: mouth 1.3s infinite linear; -webkit-animation: mouth 1.3s infinite linear;}
.p3_2{width: 2.79rem;margin: -0.33rem 0 0 -1.29rem;}
.p3_3{width: 6.7rem;margin: 1.22rem 0 0 -4.67rem;}
.p3_4{width: 6.4rem;margin:-4.8rem 0 0 -3.2rem;}
.p3_4_1{width: 0.33rem;position: absolute;top: 0.14rem;left: 4.38rem;}
.p3_4_2{width: 0.32rem;position: absolute;top: 0;left: 3.78rem;}
/*.p3_4_3{width: 0.28rem;position: absolute;top: 0.28rem;left: 3.74rem;}*/
.p3_5{width:3.71rem;margin:1.24rem 0 0 -3.2rem;animation: mouth 1.3s infinite linear; -webkit-animation: mouth 1.3s infinite linear;}

.page4{width: 100%; height: 100%; position: absolute; background: url(../images/bg_4.png) no-repeat center center; background-size: 100%;}
.page4>div{position: absolute; top: 50%; left: 50%;}
.p4_1{width: 6.4rem;margin:-4.8rem 0 0 -3.2rem;}
.p4_1_1{width: 0.32rem;position: absolute;top: 0;left: 3.5rem;}
.p4_1_2{width: 0.32rem;position: absolute;top: 0.4rem;left: 2.94rem;}
/*.p4_1_3{width: 0.28rem;position: absolute;top: 0.28rem;left: 3.54rem;}*/
.p4_2{width:3.14rem; margin:-1.65rem 0 0 0.9rem;}
.p4_3{width: 3.24rem; margin:2.74rem 0 0 -3.2rem;}
.p4_4{width: 1.64rem; margin:1.25rem 0 0 -2.6rem;}
.p4_5{width: 6.4rem; margin:4.03rem 0 0 -3.2rem;}
.p4_6{width: 5.92rem; margin:2.2rem 0 0 -3.4rem;}
.p4_7{width: 10.72rem; margin:-0.36rem 0 0 -7.05rem;}
.p4_8{width: 6.4rem; height: -2.36rem; margin:1.6rem 0 0 -3.2rem;}
 #squpics{width:6.4rem;height: 2.36rem; position: absolute; top: 0.55rem;}
.p4_9{width: 8.1rem; height: -0.38rem; margin:-0.8rem 0 0 -5.1rem;}


.page5{width: 100%; height: 100%; position: absolute; background: url(../images/bg_5.png) no-repeat center center; background-size: 100%; overflow: hidden;}
.page5>div{position: absolute; top: 50%; left: 50%;}
.p5_1{width: 6.4rem;margin:-4.8rem 0 0 -3.2rem;}
.p5_1_1{width: 0.31rem;position: absolute;top: 0.55rem;left: 4.34rem;}
.p5_1_2{width: 0.32rem;position: absolute;top: 0.1rem;left: 3.77rem;}
.p5_1_3{width: 0.31rem;position: absolute;top: 0.55rem;left: 3.24rem;}
.p5_1_4{width: 0.34rem;position: absolute;top: 0.8rem;left: 2.64rem;}
/*.p5_2{width: 4.13rem; margin:6.2rem 0 0 -5.5rem;}*/
.p5_2{width: 100%;height: 100%;top: 0%!important;left: 0%!important;}
.p5_2>img{width:0.22rem;}

.p5_3{width:6.4rem; margin:1.1rem 0 0 -3.2rem;}


.up{width: 0.59rem; position: absolute; bottom: 0.1rem; left: 50%; margin-left: -0.28rem;    animation: shanghua 1.5s infinite linear;-webkit-animation: shanghua 1.5s infinite linear;}

.page6{width: 100%; height: 100%; position: absolute; background: #ffffff; overflow: hidden;}
/*.page6>div{position: absolute; top: 50%; left: 50%;}*/
.p6_1{width: 6.4rem; margin:-6.2rem 0 0 -3.2rem;position: absolute; top: 50%; left: 50%;}
.p6_2{width: 4.46rem;margin:-5.2rem 0 0 -2.75rem;position: absolute; top: 50%; left: 50%;}
.che{width: 6.4rem;margin: -2rem 0 0 -2.28rem;position: absolute; top: 50%; left: 50%;}
.p6_3{width: 0.79rem;position: absolute;top: 2.15rem;left: 0.1rem;}
.p6_4{width: 1.56rem;position: absolute;top: 1.5rem;left: 3.45rem;}
.p6_5{width: 1.57rem;position: absolute;top: 1.5rem;left: 0.2rem;}
.p6_6{width: 5.37rem; position: absolute; top:0;}
.p6_7{width: 0.27rem;margin:-0.65rem 0 0 -2.04rem;position: absolute; top: 50%; left: 50%;}
.p6_8{width: 4.29rem;margin:2.1rem 0 0 -2.14rem;position: absolute; top: 50%; left: 50%;}
.p6_9{width: 6.4rem; margin:4.08rem 0 0 -3.2rem;position: absolute;bottom: 0.9rem; left: 50%; margin-left:-3.2rem;}
.p6_9_1{width: 3rem; height: 0.7rem; background: #0099FF; font-size: 0.3rem; color: #ffffff; text-align: center; line-height: 0.7rem; border-radius: 1.2rem;
    border: 0.01rem solid #0099ff;margin: auto;letter-spacing: 0.03rem;}


.page7,.page8{width: 100%; height: 100%; position: absolute;top: 0; background:#c4e4f4; background-size: 100%;}
.p7_1{width: 6.4rem;}
.p7_2{width: 6.06rem; height:100%; background: #ffffff;position: absolute;left: 50%; margin-left: -3.03rem;}

.p7_2_1{width:100%; text-align: center; color: #666666; font-size: 0.23rem; margin-top: 0.5rem;}
.p7_2_2{width: 4.44rem; height: 1.43rem; background: url("../images/p7_2_2.jpg") no-repeat center center; background-size: 100%; margin:auto;margin-top: 0.15rem;
    line-height: 1.22rem;text-align: center; font-size: 0.8rem;color: #ffffff;font-weight: bold;}
.p7_2_2>div{width: 0.88rem; height: 1.22rem;float: left;margin-top: 0.1rem;}
.p7_2_2_1{margin-left: 0.25rem;}
.p7_2_2_2{margin-left: 0.15rem;}
.p7_2_2_3{margin-left: 0.11rem;}
.p7_2_2_4{margin-left: 0.16rem;}


.p7_2_3{width:100%; text-align: center; font-size: 0.3rem;letter-spacing: 0.03rem;margin-top: 0.2rem;}
.p7_2_3 span{color:#fc9153;}
.p7_2_3 i{color:#fc9153;}
.p7_2_4{width: 100%; text-align: center; font-size: 0.18rem; color: #999999; margin-top: 0.08rem;}
.p7_2_5{width: 4.56rem; height: 0.86rem; background:#0099FF; border-radius: 1.8rem; line-height: 0.86rem; text-align: center; font-size:0.34rem; color: #ffffff; margin: auto; margin-top: 0.34rem;}
.p7_2_6{width:1.64rem;margin: auto;margin-top: 0.34rem;}
.p7_2_8{width: 100%; text-align: center; font-size: 0.18rem; color: #999999;margin-top: 0.085rem;}



.p8_1{width: 6.4rem;}
.p8_2{width: 6.06rem; height:100%; background: #ffffff;position: absolute;left: 50%; margin-left: -3.03rem;}
.p8_2_1{width:100%; text-align: center; color: #666666; font-size: 0.23rem; margin-top: 0.6rem;}

.p8_2_2{width:100%; text-align: center; font-size: 0.3rem;letter-spacing: 0.03rem;margin-top: 0.35rem;}
.p8_2_2 span{color:#fc9153;}
.p8_2_2 i{color:#fc9153;}


.p8_2_3{width: 100%; text-align: center; font-size: 0.18rem; color: #999999; margin-top: 0.08rem;}
/*.p8_2_4{width: 100%; text-align: center; font-size: 0.18rem; color: #0099FF; margin-top: 0.5rem;}*/
.p8_2_5{width: 4.56rem; height: 0.86rem; background:#0099FF; border-radius: 1.8rem; line-height: 0.86rem; text-align: center; font-size:0.34rem; color: #ffffff; margin: auto; margin-top: 0.4rem;}
.p8_2_6{width:1.64rem;margin: auto;;margin-top: 0.38rem;}
.p8_2_7{width: 100%; text-align: center; font-size: 0.18rem; color: #999999;margin-top: 0.26rem;}




/*另一部分*/
#logo{width: 1.2rem;}
#logo>img{width: 1.2rem; position: fixed; bottom: 0.24rem; left: 50%; margin-left: -0.6rem;}

.pop,.popshare{position: absolute;left:0; top:0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); }

.pop_1{width: 0.7rem; position: absolute; top: 50%; left: 50%; margin:-3.62rem 0 0 1.72rem;}
.pop_2{width:4.8rem; height:5.12rem; background: #0099ff; border-radius: 0.2rem; position: absolute; top: 50%; left: 50%; margin:-2.7rem 0 0 -2.4rem;}
.pop_2_1{width: 1.07rem; margin: auto; margin-top: 0.52rem;}
.pop_2_2{width: 3.66rem; height: 0.86rem; background: #0082d9; border-radius: 1.2rem; margin:auto; margin-top: 1.48rem;}
.pop_2_2 input{width: 3.66rem; height: 0.86rem; font-size: 0.33rem; text-indent:0.36rem; color: #ffffff;}
input::-webkit-input-placeholder {
    color:#82c1ec;font-size: 0.33rem;
}
input:-moz-placeholder {
    color:#82c1ec;font-size: 0.33rem;
}
input:-ms-input-placeholder {
    color:#82c1ec;font-size: 0.33rem;
}

.pop_2_3{width: 3.66rem; height: 0.86rem; background: #80ccff; border-radius: 1.2rem; margin:auto; margin-top: 0.5rem;
    font-size: 0.33rem; text-align: center; color: #0099ff; line-height: 0.86rem;font-weight:200;}
.pop_2_4{width: 100%; text-align:center; font-size: 0.2rem; color: #c5c5c5; margin-top: 0.2rem;}

.pop_3{width:0.7rem; position: absolute; top: 0.2rem; right: 0.4rem;}
.pop_4{width: 5.48rem; height: 8.53rem; background:#0099ff; border-radius:0.3rem; position: absolute; top: 50%; left: 50%; margin:-3.8rem 0 0 -2.72rem;}
#wapr{width: 4.54rem; height: 7.32rem; overflow: hidden; margin:auto; margin-top: 0.7rem;}
.pop_4_1{width: 1.9rem; height: 0.55rem; background: url("http://activity-front.didistatic.com/ddbike180111/images/pop_4_1.png") no-repeat center center; background-size: 100%;
    font-size: 0.3rem; color: #0099FF; text-indent: 0.2rem; line-height: 0.6rem;
}
.pop_4_2{width: 4.3rem; margin:auto;font-size: 0.2rem; color: #ffffff; text-align:justify; margin-top: 0.2rem;line-height: 0.35rem; margin-bottom: 0.34rem;}
.pop_4_3{width: 2.91rem; height: 0.54rem; background: url("http://activity-front.didistatic.com/ddbike180111/images/pop_4_3.png") center center no-repeat; background-size: 100%;
    font-size: 0.3rem; color: #0099FF; text-indent: 0.2rem; line-height: 0.58rem;
}
.pop_4_4{width: 3.58rem; height: 0.55rem; background: url("http://activity-front.didistatic.com/ddbike180111/images/pop_4_4.png") center center no-repeat; background-size: 100%;
    font-size: 0.3rem; color: #0099FF; text-indent: 0.2rem; line-height: 0.6rem;
}
.pop_4_5{width: 2.92rem; height: 0.52rem; background: url("http://activity-front.didistatic.com/ddbike180111/images/pop_4_5.png") center center no-repeat; background-size: 100%;
    font-size: 0.3rem; color: #0099FF; text-indent: 0.2rem; line-height: 0.58rem;
}

.share{width: 1.96rem; position: absolute; top: 0.3rem; right: 0.4rem;}

/*iScroll滑动条*/
.iScrollVerticalScrollbar {
    position: absolute;
    width: 0.042rem;
    bottom: 0.6rem;
    top: 0.7rem;
    right: 0.1rem;
    border-radius: 1rem;
}
/*iScroll滑动条颜色*/
.iScrollIndicator {
    width: 0.042rem;
    background:#80ccff;
    border-radius: 1rem;
}


/*css3*/
.move_1{-webkit-animation:move 7s ease-out forwards;animation:move 7s ease-out forwards; }
@keyframes move {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
 @-webkit-keyframes move {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.move_2{-webkit-animation:move1 0.5s linear infinite;animation:move1 0.5s linear infinite; }
@keyframes move1 {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
 @-webkit-keyframes move1 {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

.yun2 {animation: yun2 7s linear forwards; -webkit-animation: yun2 7s linear forwards; }
@keyframes yun2 {
       0% {
    transform: translate(-0.5rem);
      }
      100% {
        transform: translate(0);
      }
 }
@-webkit-keyframes yun2 {
         0% {
    -webkit-transform: translate(-0.5rem);
  }
  100% {
    -webkit-transform: translate(0);
  }
}



.rotate{
    animation: rotate 0.1s linear forwards;
    -webkit-animation: rotate 0.1s linear forwards;
    transform-origin: right;
    -webkit-transform-origin: right;
}
@-webkit-keyframes rotate{
    0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(-85deg);}
     
 }
@keyframes rotate{
    0%{ transform: rotate(0deg);}
    100%{transform: rotate(-85deg);}
}
.shangxia{
    animation: movee 0.5s infinite alternate ease-in-out;
    -webkit-animation: movee 0.5s infinite alternate ease-in-out;
    transform-origin: right top;
    -webkit-transform-origin: right top;
}
@-webkit-keyframes movee {
    0%{-webkit-transform: rotate(8deg);}
    100%{-webkit-transform: rotate(-3deg);}
}
@keyframes movee {
    0%{ transform: rotate(8deg);}
    100%{transform: rotate(-3deg);}
}

@keyframes mouth {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}

@-webkit-keyframes mouth {
    0%,100% { opacity: 0; }
    50% { opacity: 1; }
}
.yun {animation: yun 20s linear forwards; -webkit-animation: yun 20s linear forwards; }
@keyframes yun {
       0% {
    transform: translate(2.8rem);
      }
      100% {
        transform: translate(0);
      }
 }
@-webkit-keyframes yun {
         0% {
    -webkit-transform: translate(2.8rem);
  }
  100% {
    -webkit-transform: translate(0);
  }
}



.yun1 {animation: yun1 30s linear forwards; -webkit-animation: yun1 30s linear forwards; }
@keyframes yun1 {
    /* 0% {transform: translate(2.8rem);opacity: 1}
     35% {transform: translate(1.8rem);opacity: 1}
     65% {transform: translate(0.8rem);opacity: 1}
     /*100% {transform: translate(0);opacity: 1}*/
     0% {
    transform: translate(3.8rem);
      }
      100% {
        transform: translate(0);
      }
 }
@-webkit-keyframes yun1 {
   /* 0% { -webkit-transform: translate(2.8rem);opacity: 1}
    35% {-webkit-transform: translate(1.8rem);opacity: 1}
    65% {-webkit-transform: translate(0.8rem);opacity: 1}*/
    /*100% { -webkit-transform: translate(0);opacity: 1 }*/
     0% {
    -webkit-transform: translate(3.8rem);
  }
  100% {
    -webkit-transform: translate(0);
  }
}


.moveer{-webkit-animation: moveee 20s infinite linear;animation: moveee 20s infinite linear;}
@-webkit-keyframes moveee{
  0% {
    -webkit-transform: translate(14.4rem);
  }
  100% {
    -webkit-transform: translate(0);
  }
}
@keyframes moveee{
  0% {
    transform: translate(14.4rem);
  }
  100% {
    transform: translate(0);
  }
}


 @keyframes shanghua {
     0% { transform: translateY(5px);opacity: 0; }
     30% { transform: translateY(0);opacity: 1; }
     60% { transform: translateY(-5px);opacity: 1; }
     100% { transform: translateY(-10px);opacity: 0; }
 }
 @-webkit-keyframes shanghua {
     0% { -webkit-transform: translateY(5px);opacity: 0; }
     30% { -webkit-transform: translateY(0);opacity: 1; }
     60% { -webkit-transform: translateY(-5px);opacity: 1; }
     100% { -webkit-transform: translateY(-10px);opacity: 0; }
 }



/*音乐按钮*/
.musicicon{ background: url("../images/musicicon.png") no-repeat; width: 0.38rem; height: 0.38rem; position: absolute; top: 0.3rem; right: 0.3rem;background-size: 100%;}
/*音乐按钮旋转*/
.musicrotate{-webkit-animation: xuanzhuan 5s infinite linear; animation: xuanzhuan 5s infinite linear;}
@keyframes xuanzhuan {
    0% { transform: rotate(0deg)}
    100% { transform: rotate(360deg)}
}
@-webkit-keyframes xuanzhuan {
    0% { -webkit-transform: rotate(0deg)}
    100% { -webkit-transform: rotate(360deg)}
}