/* 首页 */
.page1 {
    background: url(../img/main/bg.png) no-repeat;
    background-size: 100% 100%;
}

.logo {
    position: absolute;
    top: .5rem;
    right: 0.5rem;
}

.p1t1 {
    margin: 3rem auto;
}

.p1t2 {
    position: absolute;
    bottom: 0%;
    left: 0%;
}

.p1train {
    position: absolute;
    /* bottom: 1rem; */
    left: -6rem;
    bottom: 2.5rem;
}

.p1ts {
    position: absolute;
    bottom: 8rem;
    left: 8rem;
    -webkit-animation: p1ts 2s linear infinite;
}

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

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.start {
    position: absolute;
    bottom: 6.5rem;
    left: 6.5rem;
    color: rgb(251, 224, 93);
    font-size: 1rem;
    text-shadow: 2px 3px 1px rgb(189, 66, 29);
    -webkit-animation: p1ts 2s linear infinite;

}

.p1train_act {
    transition: 1s;
    bottom: 1rem;
    left: 0rem;
}

/* 云层 */

.pageyun {
    -webkit-animation: pageyun 3s linear forwards;
}

@-webkit-keyframes pageyun {
    0% {
        background-color: rgba(233, 165, 178, 0);
    }

    50% {
        background-color: rgba(233, 165, 178, 1);
    }

    100% {
        background-color: rgba(233, 165, 178, 0);
    }
}



.yuntop {
    position: absolute;
    top: 0%;
    -webkit-transform: scale(1.5) translateY(-100%);
    -webkit-transform-origin: center;
    -webkit-animation: yuntop 2s linear forwards;
}

.yuncenter {
    position: absolute;
    top: 40%;
    -webkit-transform-origin: center;
    -webkit-animation: yuncenter 2s linear forwards;

}

.yundown {
    position: absolute;
    bottom: 0%;
    -webkit-transform-origin: center;
    -webkit-animation: yundown 2s linear forwards;
}

@-webkit-keyframes yuntop {
    0% {
        -webkit-transform: scale(1.5) translateY(-100%);
    }

    30% {
        -webkit-transform: scale(1) translateY(0);
    }

    70% {
        -webkit-transform: scale(1) translateY(0);
    }

    100% {
        -webkit-transform: scale(1.5) translateY(-100%);
    }
}

@-webkit-keyframes yuncenter {
    0% {
        -webkit-transform: scale(2);
    }

    30% {
        -webkit-transform: scale(1);
    }

    70% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(2);
    }
}

@-webkit-keyframes yundown {
    0% {
        -webkit-transform: scale(1.5) translateY(100%);
    }

    30% {
        -webkit-transform: scale(1) translateY(0);
    }

    70% {
        -webkit-transform: scale(1) translateY(0);
    }

    100% {
        -webkit-transform: scale(1.5) translateY(100%);
    }
}


/* 丽泽商圈 */
.page2 {
    overflow-y: auto;
}

.p2bg {
    width: 100%;
}


.p2rail {
    position: absolute;
    top: 0%;
}

.p2train {
    position: fixed;
    bottom: 100%;
    left: 7.1rem;
    -webkit-animation: p2train 3s ease-in both;
}

@-webkit-keyframes p2train {
    0% {
        -webkit-transform: translateY(0%);
    }

    100% {
        -webkit-transform: translateY(50%);
    }
}

.p2cloud {
    position: absolute;
    top: 0%;
}


.p2a1 {
    position: absolute;
    top: 15.5rem;
    left: 3.1rem;
    -webkit-animation: bounceIn 1s 2s ease-in both;
}

.lzlj {
    width: 4.6rem;
    height: 1.3rem;
    position: absolute;
    top: 19.3rem;
    left: 7.6rem;
    /* background-color: red; */
    z-index: 20;
    border-radius: 20px;
}

.p2logo {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.p2a2 {
    position: absolute;
    top: 23rem;
    left: 0rem;
    -webkit-animation: fadeInUp 1s 2s ease-in both;
}

.p2a3 {
    position: absolute;
    top: 34.35rem;
    left: 0.4rem;
}

.p2a3_box {
    position: absolute;
    top: 36.5rem;
    left: 2.3rem;
    width: 11.4rem;
    height: 23rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.p2a3_box img {
    flex-shrink: 0;
}

.p2a3_box div {
    position: relative;
}

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

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.p2a3_box div::after {
    position: absolute;
    bottom: 0.2rem;
    right: 0.5rem;
    width: 1rem;
    height: 1.7rem;
    display: block;
    content: "";
    background: url(../img/lz/hand.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation: hand 2s linear infinite;
}

.p2a4 {
    position: absolute;
    top: 61.1rem;
    left: 0rem;
}

.p2a4_1 {
    position: absolute;
    top: 65.1rem;
    left: 5rem;
}

.p2a4_2 {
    position: absolute;
    top: 75rem;
    left: 3rem;
}

.p2a4_3 {
    position: absolute;
    top: 76rem;
    left: 7rem;
}

.p2a5 {
    position: absolute;
    top: 108rem;
    left: 3.5rem;
}

.ftlj {
    width: 4.6rem;
    height: 1.3rem;
    position: absolute;
    top: 111.75rem;
    left: 7.9rem;
    /* background-color: red; */
    z-index: 20;
    border-radius: 20px;
}


.p2a6 {
    position: absolute;
    top: 117rem;
    left: -2rem;
}

.p2bg1 {
    position: absolute;
    top: 126.5rem;
    left: 0rem;
}

.p2bg2 {
    position: absolute;
    top: 243.3rem;
    left: 0rem;
}

.p2a7 {
    position: absolute;
    top: 125rem;
    left: -1rem;
}

.p2a8 {
    position: absolute;
    top: 137rem;
    left: -1rem;
}

.p2a8_1 {
    position: absolute;
    top: 147rem;
    left: 5.5rem;
}

.p2a8_2 {
    position: absolute;
    top: 145rem;
    left: 1.5rem;
}

.p2a9 {
    position: absolute;
    top: 159rem;
    left: -7.5rem;
}

.p2a9_1 {
    position: absolute;
    top: 164rem;
    left: 8.5rem;
}

.p2a9_2 {
    position: absolute;
    top: 163rem;
    left: 3.5rem;
}

.p2a9_3 {
    position: absolute;
    top: 168rem;
    left: 0rem;
}

.p2a9_4 {
    position: absolute;
    top: 174rem;
    right: 0rem;
}

.p2a9_5 {
    position: absolute;
    top: 180.8rem;
    left: 0rem;
}

.p2a10 {
    position: absolute;
    top: 189rem;
    left: 0.4rem;
}

.p2a10_box {
    position: absolute;
    top: 191rem;
    left: 2.3rem;
    width: 11.4rem;
    height: 18rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.p2a10_box div {
    position: relative;
}

.p2a10_box div::after {
    position: absolute;
    bottom: 0.2rem;
    right: 0.5rem;
    width: 1rem;
    height: 1.7rem;
    display: block;
    content: "";
    background: url(../img/lz/hand10.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation: hand 2s linear infinite;
}

.p2a11 {
    position: absolute;
    top: 226rem;
    left: 3.3rem;
}

.fzlj {
    width: 4.6rem;
    height: 1.3rem;
    position: absolute;
    top: 229.9rem;
    left: 7.7rem;
    /* background-color: red; */
    z-index: 20;
    border-radius: 20px;
}



.p2a12 {
    position: absolute;
    top: 236rem;
    left: -2rem;
}

.p2a13 {
    position: absolute;
    top: 251.5rem;
    left: 0.5rem;
}

.p2a13_box {
    position: absolute;
    top: 253.5rem;
    left: 2.5rem;
    width: 11.4rem;
    height: 22.7rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.p2a13_box div {
    position: relative;
}

.p2a13_box div::after {
    position: absolute;
    bottom: 0.2rem;
    right: 0.5rem;
    width: 1rem;
    height: 1.7rem;
    display: block;
    content: "";
    background: url(../img/lz/hand.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation: hand 2s linear infinite;
}

.p2a13_box div:last-of-type:after {
    right: 3.5rem;
    -webkit-animation: hand 2s linear infinite;
}

.p2a14 {
    position: absolute;
    top: 279rem;
    left: -3.5rem;
}

.p2a14_1 {
    position: absolute;
    top: 283rem;
    left: 0rem;
}

.p2a15 {
    position: absolute;
    top: 293rem;
    left: 1rem;
}

.p2a15_1 {
    position: absolute;
    top: 293rem;
    right: 0rem;
}

.video_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.5);

}

#v1 {
    width: 16rem;
    height: 9rem;
    position: absolute;
    top: 7rem
}

.close {
    position: absolute;
    top: 16rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
}

.mjpbg {
    position: relative;
}

.b1 {
    position: absolute;
    top: 335rem;
}

.mjplj {
    width: 4.6rem;
    height: 1.3rem;
    position: absolute;
    top: 338.9rem;
    left: 2.7rem;
    /* background-color: red; */
    z-index: 20;
    border-radius: 20px;
}


.b2 {
    position: absolute;
    top: 358rem;
}

.b2_1 {
    position: absolute;
    top: 370rem;
    left: 1rem;
}

.b3bg {
    position: absolute;
    top: 389rem;
    left: 0.4rem;
}



.b3_box {
    position: absolute;
    top: 391.5rem;
    left: 2.3rem;
    width: 11.4rem;
    height: 10.7rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;

}

.b3_box div {
    position: relative;
}

.b3_box div::after {
    position: absolute;
    bottom: 0.2rem;
    right: 0.5rem;
    width: 1rem;
    height: 1.7rem;
    display: block;
    content: "";
    background: url(../img/lz/hand.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation: hand 2s linear infinite;
}

.b4 {
    position: absolute;
    top: 404rem;
    left: 1rem;
}

.b4_1 {
    position: absolute;
    top: 406rem;
    left: 9rem;
}

.b5 {
    position: absolute;
    top: 414rem;
    left: 1rem;
}

.b6 {
    position: absolute;
    top: 427rem;
}

.b7 {
    position: absolute;
    top: 438.5rem;
    left: -3rem;
}

.b8 {
    position: absolute;
    top: 480rem;
    left: 0rem;
}

.huaix {
    width: 4.6rem;
    height: 1.3rem;
    position: absolute;
    top: 483.8rem;
    left: 2.7rem;
     /*background-color: red;*/
    z-index: 20;
    border-radius: 20px;
}

.b9 {
    position: absolute;
    top: 501rem;
    left: -2rem;
}

.b9_1 {
    position: absolute;
    top: 506rem;
    left: 1rem;
}

.b9_2 {
    position: absolute;
    top: 514rem;
    left: 10rem;
}

.b10 {
    position: absolute;
    top: 531rem;
    left: 0.5rem;
}



.b10_box {
    position: absolute;
    top: 533rem;
    left: 2.3rem;
    width: 11.4rem;
    height: 11.7rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.b10_box div {
    position: relative;
}

.b10_box div::after {
    position: absolute;
    bottom: 0.2rem;
    right: 0.5rem;
    width: 1rem;
    height: 1.7rem;
    display: block;
    content: "";
    background: url(../img/lz/hand.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation: hand 2s linear infinite;
}

.b12 {
    position: absolute;
    top: 547rem;
    left: -4rem;
}

.b13 {
    position: absolute;
    top: 561rem;
    left: 1rem;
}

.b14 {
    position: absolute;
    top: 570rem;
    left: -6rem;
}

@-webkit-keyframes b4_1 {
    0% {
        opacity: 1;
        top: 407rem;
        left: 8.5rem;
    }

    20% {
        opacity: 1;
        top: 408rem;
        left: 7rem;
    }

    40% {
        opacity: 1;
        top: 409rem;
        left: 5.5rem;
    }

    60% {
        opacity: 1;
        top: 410rem;
        left: 4rem;
    }

    80% {
        opacity: 1;
        top: 410.2rem;
        left: 2.5rem;
    }

    100% {
        opacity: 1;
        top: 411.3rem;
        left: 0.5rem;
    }
}

.a_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.a_box .l3 .l3cont {
    width: 16rem;
    height: 35.5rem;
}

.a_box .l3 {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
}

.l3close {
    position: absolute;
    top: 7.1rem;
    right: 0.35rem;
}

.page_end {
    background: url(../img/end/bg.png) no-repeat;
    background-size: 100% 100%;
}

.endt {
    margin: 5rem auto 0rem;
}

.endt2 {
    margin: 2rem auto 0rem;
}

.foot {
    position: absolute;
    bottom: 0%;

}

.endtag {
    position: absolute;
    top: 592.8rem;
    width: 1rem;
    height: 1rem;
}