html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

.chatBar {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.chatBar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(148, 108, 255, 0.43) 0%, rgba(255, 168, 233, 0.38) 50%, rgba(255, 181, 94, 0.42) 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 0.6;
}

.left {
    height: 100%;
    padding: 9.75rem 0rem 1.7188rem 8.25rem;
    box-sizing: border-box;
}


.left .left-top {
    display: flex;
}

.left .left-top .logo {
    width: 7.0625rem;
    height: 7.0625rem;
    position: relative;
    z-index: 1;
    margin-right: 2.125rem;
}

.left .left-top .left-top-right {
    display: flex;
    flex-direction: column;
    height: 7.0625rem;
    position: relative;
    z-index: 1;
}

.left .left-top .left-top-right .bar {
    width: 11.9375rem;
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 30px;
    font-weight: bold;
}

.left .left-top .left-top-right .chat {
    width: 12.9375rem;

}

.left-dow {
    display: flex;
    position: relative;
    margin-top: 2.125rem;
}

.left-dow .dow {
    width: 11.375rem;
    height: 3.3125rem;
    padding: 0;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: left;
    background: #000000;
    border-radius: 2.8125rem;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    box-sizing: border-box;
    color: #fff;
}

.left-dow .dow img {
    width: 1.9rem;
    margin-right: .4375rem;
}

.left-dow .dow .get {
    font-size: .75rem;
}

.left-dow .dow .app {
    font-size: 1rem;
}

.recharge {
    width: 182px;
    height: 45px;
    background: none;
    /* background: linear-gradient(90deg, #7402FF 0%, #FFBE2E 100%); */
    border-radius: 2.8125rem;
    margin-top: 6.5rem;
    display: flex;
    align-items: center;
    font-size: 1rem;
    position: relative;
    border: none;
    outline: none;
    cursor: pointer;

}

.recharge div {
    margin-left: .4375rem;
    margin-right: .3125rem;
    color: #fff;
}

.recharge .img1 {
    width: 1.8125rem;
    height: 1.375rem;
    margin-left: 2.125rem;
}

.recharge img {
    width: .5625rem;
    height: .5625rem;

}

.footer {
    margin-top: 8.5rem;
    display: flex;
    position: relative;
}

.footer button {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    color: #AE6EFF;
    font-size: .75rem;
}

.privacy {
    margin: 0 1.4375rem;
}

.chatBar .right {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.reght-chat {
    width: 1100px;
    height: 20.375rem;
    margin-right: 7.375rem;
    z-index: 1;
}

.wrap {
    height: 1260px;
    position: absolute;
    z-index: 2;
}

.wrap img{
    vertical-align: middle;
    text-align: center;
    width: 120px;
    color: white;
    float: left;
   height: 120px;
   margin-bottom: 20px;
}

.list {
    height: 100%;
    list-style: none;
    position: absolute;
    /*top:0px;向上*/
    bottom: 0px;
    /*向下*/
    animation: mymove 30s 1s infinite linear;

}



@keyframes mymove {
    from {
        bottom: 0px;
    }

    to {
        bottom: 100%;
    }
}


.list1 {
    height: 100%;
    list-style: none;
    position: absolute;
    /*top:0px;向上*/
    bottom: 0px;
    /*向下*/
    animation: mymove1 30s 1s infinite linear;

}



@keyframes mymove1 {
    from {
        bottom: 100%;
    }

    to {
        bottom: 0;
    }
}

.list2 {
    height: 100%;
    list-style: none;
    position: absolute;
    /*top:0px;向上*/
    bottom: 0px;
    /*向下*/
    animation: mymove2 31s 1s infinite linear;

}



@keyframes mymove2 {
    from {
        bottom: 0px;
    }

    to {
        bottom: 100%;
    }
}

.list3 {
    height: 100%;
    list-style: none;
    position: absolute;
    /*top:0px;向上*/
    bottom: 0px;
    /*向下*/
    animation: mymove3 31s 1s infinite linear;

}



@keyframes mymove3 {
    from {
        bottom: 100%;
    }

    to {
        bottom: 0;
    }
}



.list4 {
    height: 100%;
    list-style: none;
    position: absolute;
    /*top:0px;向上*/
    bottom: 0px;
    /*向下*/
    animation: mymove4 32s 1s infinite linear;

}



@keyframes mymove4 {
    from {
        bottom: 0px;
    }

    to {
        bottom: 100%;
    }
}

.list5 {
    height: 100%;
    list-style: none;
    position: absolute;
    /*top:0px;向上*/
    bottom: 0px;
    /*向下*/
    animation: mymove3 32s 1s infinite linear;

}



@keyframes mymove5 {
    from {
        bottom: 100%;
    }

    to {
        bottom: 0;
    }
}


.list6 {
    height: 100%;
    list-style: none;
    position: absolute;
    /*top:0px;向上*/
    bottom: 0px;
    /*向下*/
    animation: mymove6 33s 1s infinite linear;

}



@keyframes mymove6 {
    from {
        bottom: 0px;
    }

    to {
        bottom: 100%;
    }
}

.list7 {
    height: 100%;
    list-style: none;
    position: absolute;
    /*top:0px;向上*/
    bottom: 0px;
    /*向下*/
    animation: mymove3 33s 1s infinite linear;

}



@keyframes mymove7 {
    from {
        bottom: 100%;
    }

    to {
        bottom: 0;
    }
}



.rectangle {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.wrap1{
    left: 100px;
}
.wrap2{
    left: 240px;
}
.wrap3{
    left: 380px;
}
.wrap4{
    left: 520px;
}
.wrap5{
    left: 660px;
}
.wrap6{
    left: 800px;
}
.wrap7{
    left: 940px;
}
.wrap8{
    left: 1080px;
}

@media screen and (min-height: 901px) {
    .left {
        padding: 17.75rem 0 1.7188rem 15.25rem;
    }

    .left-dow {
        margin-top: 3.125rem;
    }

    .recharge {
        margin-top: 9.375rem;
    }

    .footer {
        margin-top: 10rem;
    }
}

@media (max-width: 1640px) {
    .reght-chat {
        width:750px;
        height: 16.375rem;
        margin-right: 7.375rem;
        z-index: 1;
    }
    .wrap {
        height: 900px;
        position: absolute;
        z-index: 2;
    }
    
    .wrap img{
        vertical-align: middle;
        text-align: center;
        width: 80px;
        color: white;
        float: left;
       height: 80px;
       margin-bottom: 20px;
    }
    .wrap1{
        left: 70px;
    }
    .wrap2{
        left: 170px;
    }
    .wrap3{
        left: 270px;
    }
    .wrap4{
        left: 370px;
    }
    .wrap5{
        left: 470px;
    }
    .wrap6{
        left: 570px;
    }
    .wrap7{
        left: 670px;
    }
    .wrap8{
        left: 770px;
    }

  }