* {
    margin: 0;
    padding: 0;
    font-family: "microsoft yahei";
    -webkit-user-select: none;
    user-select: none;
    font-weight: normal;
}
html, body {
    position: relative;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
img {
    border-style: none;
}
.swiper-container, .swiper-slide, .swiper-wrapper {
    height: 100%;
    z-index: 4;
    width: 100%;
}
body {
    height: 100%;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/loading_bg.png) no-repeat;
    background-size: 100% 100%;
    z-index: 2;
    overflow: hidden;
}
.page1, .page2, .page3, .page4 {
    width: 100%;
    height: 100%;
    position: relative;
}
.music {
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/btn_music_close.png);
    width: 0.42rem;
    height: 0.42rem;
    background-size: 100% 100%;
    position: absolute;
    right: 0.18rem;
    top: 0.15rem;
    z-index: 9;
}
.pause {
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/btn_music.png);
    background-size: 100% 100%;
}
.bgm {
    display: none;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/btn_music.png);
    width: 0.42rem;
    height: 0.42rem;
    background-size: 100% 100%;
    position: absolute;
    right: 0.18rem;
    top: 0.15rem;
    z-index: 8;
}
.allWord {
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/wording.png);
    width: 2.07rem;
    height: 2.69rem;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    top: 0.2rem;
    margin-left: -1.035rem;
    opacity: 0;
    z-index: 1;
}
.page2_word, .page1_word {
    width: 1.19rem;
    height: 0.66rem;
    position: absolute;
    bottom:0.5rem;
    left: 50%;
    margin-left: -0.6rem;
    text-align: center;
    color: #fefefe;
    font-size: 0.27rem;
    font-weight: 400;
    line-height: 0.33rem;
    letter-spacing: 1px;
}
.page3_word {
    width: 2.64rem;
    height: 0.66rem;
    position: absolute;
    bottom:0.5rem;
    left: 50%;
    margin-left: -1.32rem;
    text-align: center;
    color: #fefefe;
    font-size: 0.27rem;
    font-weight: 400;
    line-height: 0.33rem;
    letter-spacing: 1px;
}
.page3_tip {
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/pop.png) no-repeat;
    background-size: 100% 100%;
    width: 0.85rem;
    height: 0.508rem;
    position: absolute;
    top: 2.58rem;
    left: 50%;
    margin-left: 0.8rem;
}
.button {
    position: absolute;
    left: 50%;
    margin-left: -1.35rem;
    bottom:0.2rem;
    height: 0.43rem;
    width: 2.7rem;
    background-color: rgb(255, 108, 0);
    font-size: 0.24rem;
    text-align: center;
    line-height: 0.43rem;
    color: #fff;
    font-weight: 300;
    border-radius: 5px;
}

.load {
    bottom:0.8rem;
}
.share_mask {
    display: none;
    background: rgba(0, 0, 0, .6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.share_mask img {
    width: 1.15rem;
    height: 1.64rem;
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
}
/* 按钮层级 */
.swiper-pagination {
    z-index: 0;
    bottom: -10px;
}
/*************************************动画部分 start*********************************************/
/*************************************boy1*********************************************/
.bike_hook_1 {
    display: block;
    height: 1.07rem;
    width: 1.87rem;
    position: absolute;
    bottom: 1.8rem;
    left: 50%;
    margin-left: -0.96rem;
}
.bike_wrap_1 {
    display: block;
    height: 1.07rem;
    width: 1.87rem;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: 50% 700%;
    -webkit-transform: rotate(-25deg);
    opacity: 0;
}
.bike_wrap_1 .man {
    display: block;
    height: 1.18rem;
    width: 0.72rem;
    position: absolute;
    left: 0.67rem;
    top: -0.26rem;
    -webkit-transform-origin: 50% 100%;
    z-index: 4
}
.bike_wrap_1 .man .body {
    display: block;
    height: 0.54rem;
    width: 0.92rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat -0.935rem -0.16rem;
    background-size: 3.32rem 2.59em;
    position: absolute;
    left: -0.05rem;
    top: 0.1rem;
     -webkit-transform: scale(1.1);
}
.bike_wrap_1 .man .head {
    display: block;
    height: 0.73rem;
    width: 0.73rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat 0px 0px;
   background-size: 3.32rem 2.59em;
    position: absolute;
    left: 0.08rem;
    top: -0.48rem;
    -webkit-transform-origin: 50% 100%;
    z-index: 1;
}
.bike_wrap_1 .hand_back {
    display: block;
    height: 0.17rem;
    width: 0.45rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat -0.135rem -1.05rem;
    background-size: 3.32rem 2.59em;
    position: absolute;
    left: 0.94rem;
    bottom: 0.90rem;
}
.bike_wrap_1 .leg_back {
    display: block;
    height: 0.66rem;
    width: 0.47rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat -2.47rem -1.05rem;
    background-size: 3.32rem 2.59em;
    position: absolute;
    left: 0.8rem;
    top: 0.15rem;
    -webkit-transform-origin: 0 0;
}
.bike_wrap_1 .leg_front {
    display: block;
    height: 0.74rem;
    width: 0.56rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat -1.87rem -0.105rem;
    background-size: 3.32rem 2.59em;
    position: absolute;
    left: 0.75rem;
    top: 0.23rem;
    -webkit-transform-origin: 0 0;
    z-index: 3
}


.bike_wrap_1 .bike_body {
    display: block;
    height: 0.93rem;
    width: 1.13rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat -0.94rem -0.94rem;
    background-size: 3.32rem 2.59em;
    position: absolute;
    left: 0.47rem;
    top: 0;
}
.bike_wrap_1 .wheel_front {
    display: block;
    height: 0.69rem;
    width: 0.69rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat -2.63rem -0.13rem;
    background-size: 3.32rem 2.59em;
    position: absolute;
    right: -0.05rem;
    top: 0.54rem;
    -webkit-transform-origin: 50% 100%;
}
.bike_wrap_1 .wheel_back {
    display: block;
    height: 0.69rem;
    width: 0.69rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat -2.63rem -0.13rem;
    background-size: 3.32rem 2.59em;
    position: absolute;
    left: 0.20rem;
    top: 0.54rem;
    -webkit-transform-origin: 50% 100%;
}
/******************************************************boy 2********************************************************/
.bike_boy_content {
    width: 100%;
    height: 3rem;
    position: absolute;
    bottom: 0;
    z-index: 3;
}
.bike_hook_2 {
    display: block;
    height: 1.07rem;
    width: 1.87rem;
    position: absolute;
    bottom: 1.71rem;
    left: 15%;
    margin-left: -0.4rem;
    z-index: -1;
}
.bike_wrap_2 {
    display: block;
    height: 1.07rem;
    width: 1.87rem;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: 50% 700%;
    -webkit-transform: rotate(-25deg);
    opacity: 0;
    z-index: -1;
}
.bike_wrap_2 .man {
    display: block;
    height: 1.18rem;
    width: 0.72rem;
    position: absolute;
    left: 0.67rem;
    top: -0.26rem;
    -webkit-transform-origin: 50% 100%;
    z-index: 4
}
.bike_wrap_2 .man .head {
    display: block;
    height: 0.50rem;
    width: 0.53rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat -0.41rem -0.91rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: 0;
    bottom: 0.93rem;
    -webkit-transform-origin: 50% 100%;
    z-index: 1;
}
.bike_wrap_2 .man .body {
    display: block;
    height: 0.43rem;
    width: 0.41rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat -1.37rem -0.16rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: -0.07rem;
    bottom: 0.55rem;
    -webkit-transform: scale(1.1)
}
.bike_wrap_2 .hand_front {
    display: block;
    height: 0.43rem;
    width: 0.43rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat -1.26rem -1.07rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: 0.91rem;
    bottom: 0.7rem;
}
.bike_wrap_2 .hand_back {
    display: block;
    height: 0.14rem;
    width: 0.37rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat -1.96rem -1.13rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: 0.94rem;
    bottom: 0.82rem;
}
.bike_wrap_2 .leg_back {
    display: block;
    height: 0.66rem;
    width: 0.34rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat -2.5rem -0.83rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: 0.8rem;
    bottom: 0.25rem;
    -webkit-transform-origin: 0 0;
}
.bike_wrap_2 .leg_front {
    display: block;
    height: 0.57rem;
    width: 0.44rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat -0.715rem -0.125rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: 0.74rem;
    bottom: 0.25rem;
    -webkit-transform-origin: 0 0;
    z-index: 3
}
.bike_wrap_2 .bike_body {
    display: block;
    height: 0.65rem;
    width: 0.91rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat -1.96rem 0;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: 0.47rem;
    bottom: 0.23rem;
}
.bike_wrap_2 .wheel_front {
    display: block;
    height: 0.57rem;
    width: 0.57rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat 0 -0.09rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    right: 0.21rem;
    bottom: 0;
    -webkit-transform-origin: 50% 100%;
}
.bike_wrap_2 .wheel_back {
    display: block;
    height: 0.57rem;
    width: 0.57rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat 0 -0.085rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: 0.20rem;
    bottom: 0;
    -webkit-transform-origin: 50% 100%;
}
.hand_back, .hand_front {
    -webkit-animation: a_bike_man 0.5s linear infinite;
    -webkit-animation: a_bike_body 0.5s linear infinite;
}
/******************************************************boy 动效********************************************************/
.bike_wrap_1 {
    -webkit-animation: a_bike_wrap 1.5s 0s linear both;
}
.bike_wrap_2 {
    -webkit-animation: a_bike_wrap 1.5s 0s linear both;
}
@-webkit-keyframes a_bike_wrap {
    0% {
        -webkit-transform: rotate(-25deg);
        opacity: 0;
    }
    5% {
        -webkit-transform: rotate(-20deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(0deg);
        opacity: 1;
    }
}
.man {
    -webkit-animation: a_bike_man 1s linear infinite;
}
@-webkit-keyframes a_bike_man {
    0% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
    25% {
        -webkit-transform: translate(0px, 1px) scale(1.02, 0.99);
    }
    50% {
        -webkit-transform: translate(0px, -3px) scale(0.97, 1.03);
    }
    75% {
        -webkit-transform: translate(0px, 0px) scale(1.01, 1);
    }
    100% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
}
.head {
    -webkit-animation: a_bike_man_head 1s linear infinite;
}
@-webkit-keyframes a_bike_man_head {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(8deg);
    }
    50% {
        -webkit-transform: rotate(-6deg);
    }
    75% {
        -webkit-transform: rotate(4deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
.bike_body {
    -webkit-animation: a_bike_body 1s linear infinite;
}
@-webkit-keyframes a_bike_body {
    0% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
    25% {
        -webkit-transform: translate(1px, 1px) scale(1.02, 0.99);
    }
    50% {
        -webkit-transform: translate(-1px, -3px) scale(0.97, 1.03);
    }
    75% {
        -webkit-transform: translate(1px, 0px) scale(1.01, 1);
    }
    100% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
}
.wheel_front {
    -webkit-animation: a_wheel_front 1s linear infinite;
}
.wheel_back {
    -webkit-animation: wheel_back 1s linear infinite;
}
@-webkit-keyframes a_wheel_front {
    0% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
    25% {
        -webkit-transform: translate(1px, 1px) scale(1.07, 0.98);
    }
    50% {
        -webkit-transform: translate(-1px, -1px) scale(0.96, 1.06);
    }
    75% {
        -webkit-transform: translate(1px, 0px) scale(1.05, 0.99);
    }
    100% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
}
@-webkit-keyframes wheel_back {
    0% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
    25% {
        -webkit-transform: translate(1px, 1px) scale(1.07, 0.98);
    }
    50% {
        -webkit-transform: translate(-1px, -1px) scale(0.96, 1.06);
    }
    75% {
        -webkit-transform: translate(1px, 0px) scale(1.05, 0.99);
    }
    100% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
}
.bike_hook {
    -webkit-animation: a_bike_hook 1s 2.4s linear infinite alternate;
}

@-webkit-keyframes a_bike_hook {
    0% {
        -webkit-transform: translate(0, 0);
    }
    25% {
        -webkit-transform: translate(-2px, 0);
    }
    50% {
        -webkit-transform: translate(4px, 0);
    }
    75% {
        -webkit-transform: translate(-1px, 0);
    }
    100% {
        -webkit-transform: translate(0, 0);
    }
}
.leg_back {
    -webkit-animation: a_leg_back 1s  linear infinite;
}
@-webkit-keyframes a_leg_back {
    0% {
        -webkit-transform: translate(0, 0) scale(1, 1) rotate(0deg);
    }
    25% {
        -webkit-transform: translate(0.01rem, .01rem) scale(1.02, 0.99) rotate(15deg);
    }
    50% {
        -webkit-transform: translate(-0.15rem, -0.10rem) scale(0.97, 1.03) rotate(0deg);
    }
    75% {
        -webkit-transform: translate(-0.05rem, -0.08rem) scale(1.01, 1) rotate(-5deg);
    }
    100% {
        -webkit-transform: translate(0, 0) scale(1, 1) rotate(0deg);
    }
}
.leg_front {
    -webkit-animation: a_leg_back 1s linear infinite;
}
/*************************************草地转动*********************************************/
.grass_content {
    display: block;
    height: 2.50rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
}
.grass1_bg1 {
    display: block;
    height: 1.54rem;
    width: 5.95rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/grass_bg_high.png) no-repeat;
    background-size: 5.95rem 1.54rem;
    left: 50%;
    margin-left: -2.98rem;
    position: absolute;
    bottom: 0.3rem;
    -webkit-transform-origin: 50% 7.30rem;
}
.grass1_bg2 {
    display: block;
    height: 1.54rem;
    width: 5.95rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/grass_bg_high.png) no-repeat;
    background-size: 5.95rem 1.54rem;
    left: 50%;
    margin-left: -2.98rem;
    position: absolute;
    bottom: 0.3rem;
    -webkit-transform: rotate(48deg);
    -webkit-transform-origin: 50% 7.30rem;
}
.grass1_bg1 {
    -webkit-animation: grass1_bg1_circle 4s 0.2s linear infinite;
}
.grass1_bg2 {
    -webkit-animation: grass1_bg2_circle 4s 0.2s linear infinite;
}
@-webkit-keyframes grass1_bg1_circle {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-48deg);
    }
}
@-webkit-keyframes grass1_bg2_circle {
    0% {
        -webkit-transform: rotate(48deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
.grass2_bg1 {
    display: block;
    height: 1.96rem;
    width: 5.58rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/grass_bg_mid.png) no-repeat;
    background-size: 5.58rem 1.96rem;
    left: 50%;
    margin-left: -2.79rem;
    position: absolute;
    bottom: -0.8rem;
    -webkit-transform-origin: 50% 7.30rem;
}
.grass2_bg2 {
    display: block;
    height: 1.96rem;
    width: 5.58rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/grass_bg_mid.png) no-repeat;
    background-size: 5.58rem 1.96rem;
    left: 50%;
    margin-left: -2.79rem;
    position: absolute;
    bottom: -0.8rem;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 50% 7.30rem;
}
.grass2_bg1 {
    -webkit-animation: grass2_bg1_circle 1.5s 0.2s linear infinite;
}
.grass2_bg2 {
    -webkit-animation: grass2_bg2_circle 1.5s 0.2s linear infinite;
}
@-webkit-keyframes grass2_bg1_circle {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-45deg);
    }
}
@-webkit-keyframes grass2_bg2_circle {
    0% {
        -webkit-transform: rotate(45deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
/********************************碎片loading*****************************************/
.loading {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1000;
}
.box {
    position: absolute;
    height: 1.3rem;
    width: 1.3rem;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.image {
    position: absolute;
    height: 1.3rem;
    width: 1.3rem;
    opacity: 0;
}

.clip{
    opacity: 0;
}


.active .clip{
    will-change: transform;
    -webkit-animation: noTransform 1s both;
}

.active .clip:first-child {
    opacity: 0;
    -webkit-animation: showTransform .1s 1s both;
}
@-webkit-keyframes noTransform {
    to {
        opacity: 1;
        transform: translate(0, 0) rotate(0);
    }
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.clipGather[style] {
    opacity: 1;
}

.active .clipGather:not([style]) {
    opacity:0;
    /*-webkit-animation: fadeOut 0.1s 0.2s both;*/
}

.diffusebox {
    position: absolute;
    width: 100%;
    height: 2.69rem;
    top: 0.2rem;
    overflow: hidden;
}

.diffuseImage {
    position: absolute;
    height: 2rem;
    width: 2rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

/* ********************增加的建筑物云彩 ***********************/
.ground_wrap {
    display: block;
    height: 2.3rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/rb_ground.png) no-repeat;
    background-size: 100% 100%;
}
.house_container {
    height: 60%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    bottom: -0.06rem;
    z-index: 0;
}
.house_wrap {
    display: block;
    width: 100%;
}
.house_1 {
    display: block;
     height:1.245rem;
    width: 1.155rem; 
    position: absolute;
    left: 50%;
    margin-left: -1.2rem;
    bottom: 2.2rem;
    z-index: 1;
    opacity: 0.8;
}
.house_2 {
    display: block;
   /* 
    height: 0.97rem;
   width: 1.04rem; */
   height: 1.455rem;
   width: 1.56rem;
    position: absolute;
    left: 50%;
    margin-left: 0.3rem;
    bottom: 2.2rem;
    z-index: 1;
    opacity: 0.8;
}
.house_1 i {
    display: block;
    /* height: 0.83rem;
    width: 0.77rem; */
    height:1.245rem;
    width: 1.155rem; 
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/rb_pic_1.png) no-repeat;
    background-size: 100% 100%;
    opacity: 1;
}
.house_2 i {
    display: block;
     height: 1.455rem;
   width: 1.56rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/rb_pic_2.png) no-repeat;
    background-size: 100% 100%;
    opacity: 1;
}
.house_1_i {
   -webkit-animation: a_building 0.3s 0.3s linear both;
 }
 .house_2_i {
   -webkit-animation: a_building_2 0.3s 0.5s linear both;
 }
  .house_2 {
   -webkit-animation: a_house_move_2 5s 1.2s linear infinite;
 }
  .house_1 {
   -webkit-animation: a_house_move_1 5s 0s linear infinite;
} 
@-webkit-keyframes a_house_move_1 {
    0% {
        -webkit-transform: translate(0, 0) rotate(-5deg);
        opacity: 0.8;
    }
    33% {
        -webkit-transform: translate(-1.85rem, 0.2rem) rotate(-10deg);
        opacity: 0.8;
    }
    34% {
        -webkit-transform: translate(-2.55rem, 0.3rem) rotate(0);
        opacity: 0;
    }
    36% {
        -webkit-transform: translate(4.62rem, 0.4rem) rotate(15deg);
        opacity: 0;
    }
    38% {
        -webkit-transform: translate(4.05rem, 0.25rem) rotate(12deg);
        opacity: 0.8;
    }
    70% {
        -webkit-transform: translate(2.1rem, 0.02rem) rotate(8deg);
        opacity: 0.8;
    }
    88% {
        -webkit-transform: translate(0.925rem, -0.05rem) rotate(5deg);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(-5deg);
        opacity: 0.8;
    }
}
@keyframes a_house_move_1 {
    0% {
        -webkit-transform: translate(0, 0) rotate(-5deg);
        opacity: 0.8;
    }
    33% {
        -webkit-transform: translate(-1.85rem, 0.2rem) rotate(-10deg);
        opacity: 0.8;
    }
    34% {
        -webkit-transform: translate(-2.55rem, 0.3rem) rotate(0);
        opacity: 0;
    }
    36% {
        -webkit-transform: translate(4.62rem, 0.4rem) rotate(15deg);
        opacity: 0;
    }
    38% {
        -webkit-transform: translate(4.05rem, 0.25rem) rotate(12deg);
        opacity: 0.8;
    }
    70% {
        -webkit-transform: translate(2.1rem, 0.02rem) rotate(8deg);
        opacity: 0.8;
    }
    88% {
        -webkit-transform: translate(0.925rem, -0.05rem) rotate(5deg);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(-5deg);
        opacity: 0.8;
    }
}
@-webkit-keyframes a_house_move_2 {
    0% {
        -webkit-transform: translate(0, 0) rotate(5deg);
        opacity: 0.8;
    }
    22% {
        -webkit-transform: translate(-93%, -0.03rem) rotate(-8deg);
        opacity: 0.8;
    }
    60% {
        -webkit-transform: translate(-260%, 0.23rem) rotate(-17deg);
        opacity: 0.8;
    }
    62% {
        -webkit-transform: translate(-270%, 0.25rem) rotate(-18deg);
        opacity: 0.8;
    }
    63% {
        -webkit-transform: translate(-270%, 0.28rem) rotate(-10deg);
        opacity: 0;
    }
    64% {
        -webkit-transform: translate(130%, 0.27rem) rotate(10deg);
        opacity: 0;
    }
    70% {
        -webkit-transform: translate(100%, 0.25rem) rotate(8deg);
        opacity: 0.8;
    }
    85% {
        -webkit-transform: translate(50%, 0.1rem) rotate(5deg);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(5deg);
        opacity: 0.8;
    }
}
@-webkit-keyframes a_building {
    0% {
        -webkit-transform: translate(0px, 100px) scale(0.1, 0.1);
        opacity: 0;
    }
    70% {
        -webkit-transform: translate(0px, 0px) scale(1.1, 1.1);
        opacity: 1;
    }
    80% {
        -webkit-transform: translate(0px, 0px) scale(0.9, 0.9);
        opacity: 1;
    }
    90% {
        -webkit-transform: translate(0px, 0px) scale(1.05, 1.05);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0px, 0px) scale(1, 1);
        opacity: 1;
    }
}
@-webkit-keyframes a_building_2 {
    0% {
        -webkit-transform: translate(0px, 100px) scale(0.1, 0.1) rotate(5deg);
        opacity: 0;
    }
    70% {
        -webkit-transform: translate(0px, 0px) scale(1.1, 1.1) rotate(5deg);
        opacity: 1;
    }
    80% {
        -webkit-transform: translate(0px, 0px) scale(0.9, 0.9) rotate(5deg);
        opacity: 1;
    }
    90% {
        -webkit-transform: translate(0px, 0px) scale(1.05, 1.05) rotate(5deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0px, 0px) scale(1, 1) rotate(5deg);
        opacity: 1;
    }
}
/* 云彩 */
.cloun_wrap {
    width: 100%;
    height: 2rem;
    position: absolute;
    left: 0;
    top: 1.2rem;
}
.cloun_pic {
    display: block;
    width: 0.66rem;
    height: 0.27rem;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: 0.8rem;
}
.cloun1 {
    opacity: 0.8;
}
.cloun2 {
    opacity: 0.6;
    margin-left: -1.2rem;
    top: 1rem;
}
.cloun3 {
    opacity: 0.6;
    margin-left: 1rem;
    top: 1.4rem;
}
.cloun2 {
    -webkit-animation: cloun_move_2 6s 1s linear infinite;
}
@-webkit-keyframes cloun_move_2 {
    0% {
        -webkit-transform: translate(0, 0) scale(0.8) rotate(-8deg);
    }
    33% {
        -webkit-transform: translate(-160%, 0.2rem) scale(0.8) rotate(-10deg);
    }
    34% {
        -webkit-transform: translate(-200%, 0.3rem) scale(0.8) rotate(0);
        opacity: 0.6;
    }
    35% {
        -webkit-transform: translate(-250%, 0.3rem) scale(0.8) rotate(0);
        opacity: 0;
    }
    36% {
        -webkit-transform: translate(400%, 0.3rem) scale(0.8) rotate(15deg);
        opacity: 0;
    }
    38% {
        -webkit-transform: translate(400%, 0.2rem) scale(0.8) rotate(12deg);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translate(180%, -0.02rem) scale(0.8) rotate(8deg);
    }
    88% {
        -webkit-transform: translate(80%, -0.05rem) scale(0.8) rotate(5deg);
    }
    100% {
        -webkit-transform: translate(0, 0) scale(0.8) rotate(-5deg);
    }
}
.cloun3 {
    -webkit-animation: cloun_move_3 6s 1s linear infinite;
}
@-webkit-keyframes cloun_move_3 {
    0% {
        -webkit-transform: translate(0, 0) rotate(5deg) scale(0.6);
        opacity: 0.8;
    }
    30% {
        -webkit-transform: translate(-193%, -0.05rem) rotate(0) scale(0.6);
        opacity: 0.8;
    }
    78% {
        -webkit-transform: translate(-480%, 0.2rem) rotate(-10deg) scale(0.6);
        opacity: 0.8;
    }
    79% {
        -webkit-transform: translate(-490%, 0.2rem) rotate(-10deg) scale(0.6);
        opacity: 0.8;
    }
    80% {
        -webkit-transform: translate(130%, 0.19rem) rotate(15deg) scale(0.6);
        opacity: 0;
    }
    81% {
        -webkit-transform: translate(100%, 0.18rem) rotate(10deg) scale(0.6);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(5deg) scale(0.6);
        opacity: 0.8;
    }
}
.cloun1 {
    -webkit-animation: cloun_move_1 5.5s 1s linear infinite;
}
@-webkit-keyframes cloun_move_1 {
    0% {
        -webkit-transform: translate(0, 0) rotate(5deg);
        opacity: 0.9;
    }
    30% {
        -webkit-transform: translate(-193%, -0.05rem) rotate(0);
        opacity: 0.9;
    }
    78% {
        -webkit-transform: translate(-480%, 0.2rem) rotate(-10deg);
        opacity: 0.9;
    }
    79% {
        -webkit-transform: translate(-490%, 0.2rem) rotate(-10deg);
        opacity: 0;
    }
    80% {
        -webkit-transform: translate(120%, 0.19rem) rotate(15deg);
        opacity: 0;
    }
    81% {
        -webkit-transform: translate(100%, 0.18rem) rotate(10deg);
        opacity: 0.9;
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(5deg);
        opacity: 0.93;
    }
}




.loading_ground{
    position: absolute;
    bottom:-1.72rem;
    width: 100%;
    height: 2.72rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/loading_hill.png);
    background-size: 100% 100%;
}

.hill_up{
   -webkit-animation: hill_up_anim 0.5s linear both;
}


@-webkit-keyframes hill_up_anim {
    0% {
        -webkit-transform: translate(0, 0) scale(1); 
    }
   
    70% {
        -webkit-transform: translate(0, -1.3rem) scale(1.2); 
    }

     100% {
        -webkit-transform: translate(0, -1.73rem) scale(1); 
    }
}

.content{
    width: 100%;
    height: 100%;
    opacity: 0;
}

.content_show{
    -webkit-animation: content_show_anim 0.5s  linear both;
}


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

.wording_show{
    -webkit-animation: wording_show_anim 0.5s  linear both;
}

@-webkit-keyframes wording_show_anim {
    0% {
      opacity: 0;
        -webkit-transform: scale(1); 
    }
   
 80% {
       opacity: 1;
    }

     100% {
       opacity: 1;   
    }
}

.logo_without_clip{
-webkit-animation: logo_without_clip_anim 2s  linear both;
}

@-webkit-keyframes logo_without_clip_anim {
    0% {
        opacity: 0;
    }

    30% {
       opacity: 1;
    }

    60% {
       opacity: 1;
    }

     100% {
      opacity: 0;   
    }
}



  .bike_wrap_1 .leg_front_big_1 {
    display: block;
    height: 0.39rem;
    width: 0.52rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat -0.83rem -2.12rem ;
    background-size: 3.32rem 2.59rem ;
    position: absolute;
    left: 0.6rem;
    top: 0.24rem;
    -webkit-transform-origin: 0 0;
    -webkit-transform:rotate(-30deg);
    -webkit-animation: leg_big_anim_1 1s  linear both infinite;
    z-index: 3
}

 .bike_wrap_1 .leg_front_small_1 {
    display: block;
    height:0.5rem ;
    width: 0.26rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew1.png) no-repeat -0.365rem -2.085rem;
    background-size: 3.32rem 2.59rem ;
    position: absolute;
    left: 0.887rem;
    top: 0.44rem;
    -webkit-transform-origin: 0.26rem 0.1rem;
    -webkit-transform:rotate(-15deg);
    -webkit-animation: leg_small_anim_1  1s  linear both infinite;
    z-index: 3
}

@-webkit-keyframes leg_big_anim_1 {
    0% {
        -webkit-transform: translate(0, 0)  rotate(0deg);
    }

      25% {
        -webkit-transform: translate(0, 0)  rotate(10deg);
    }
   
    50% {
        -webkit-transform: translate(0,0) rotate(0deg);
    }

      75%   {
        -webkit-transform: translate(0,0) rotate(-10deg);
    }
  
    100% {
        -webkit-transform: translate(0, 0) rotate(0deg);
    }
}


@-webkit-keyframes leg_small_anim_1{
    0% {
        -webkit-transform: translate(0, 0)  rotate(-15deg);
    }

    25% {
        -webkit-transform: translate(-0.05rem,0.1rem) rotate(0deg);
    }
   
    50% {
        -webkit-transform: translate(0.02rem, 0.07rem) rotate(15deg);
    }

     75%  {
        -webkit-transform: translate(0.08rem, -0.07rem) rotate(0deg);
    }
  
     100% {
        -webkit-transform: translate(0, 0) rotate(-15deg);
    }
}

 .bike_wrap_2 .leg_front_big_2 {
    display: block;
    height:0.245rem ;
    width: 0.405rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat -0.165rem -1.64rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: 0.6rem;
    top: 0.24rem;
    -webkit-transform-origin: 0 0;
    -webkit-transform:rotate(0deg);
    -webkit-animation: leg_big_anim_2 1s  linear both infinite;
    z-index: 3
}

 .bike_wrap_2 .leg_front_small_2 {
    display: block;
    height:0.38rem ;
    width: 0.21rem;
    background: url(https://3gimg.qq.com/tencentMapTouch/app/rideBike/bikeboynew2.png) no-repeat -0.725rem -1.61rem;
    background-size: 2.885rem 2rem ;
    position: absolute;
    left: 0.82rem;
    top: 0.34rem;
    -webkit-transform-origin: 0.26rem 0.03rem;
    -webkit-transform:rotate(0deg);
    -webkit-animation: leg_small_anim_2  1s  linear both infinite;
    z-index: 3
}




@-webkit-keyframes leg_big_anim_2 {
    0% {
        -webkit-transform: translate(0, 0)  rotate(0deg);
    }

      25% {
        -webkit-transform: translate(0, 0)  rotate(10deg);
    }
   
    50% {
        -webkit-transform: translate(0,0) rotate(0deg);
    }

      75%   {
        -webkit-transform: translate(0,0) rotate(-10deg);
    }
  
    100% {
        -webkit-transform: translate(0, 0) rotate(0deg);
    }
}


@-webkit-keyframes leg_small_anim_2 {
    0% {
        -webkit-transform: translate(0, 0)  rotate(-15deg);
    }

    25% {
        -webkit-transform: translate(-0.02rem,0.1rem) rotate(0deg);
    }
   
    50% {
        -webkit-transform: translate(0.03rem, 0.06rem) rotate(15deg);
    }

     75%  {
        -webkit-transform: translate(0.08rem, -0.07rem) rotate(0deg);
    }
  
     100% {
        -webkit-transform: translate(0, 0) rotate(-15deg);
    }

}