*, *::after, *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 36px;
}

body {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    
}
.wrapper {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-width: 100vw;
    overflow: hidden;
}

.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.img {
    max-width: 750px;
    width: 100%
}

.btn-div {
    position: absolute;
    max-width: 388px;
    width: 100%;
    left: 50%;
    top: 0
}
.desktop-w {
    background: url('./static/BG.jpg') no-repeat;
    background-position: center;
    background-size: cover;
}

.mobi-w {
    background: url('./static/BG-m.png') no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

a {
    color: #6CF8E8;
}

.video-div {
    position: absolute;
    max-width: 696px;
    width: 100%;
    left: 50%;
    bottom: 7%
}



video {
    position: relative;
    width: 100%
}

.btn {
    cursor: pointer
}

.btn-section {
    position: relative
}

@media screen and (max-width:750px) {
    .btn-div {
        max-width: 55vw
    }

    .video-div {
        max-width: 93vw
    }
}
.main-container {
    margin-top: 80px; position: relative;
}
.footer {
    margin-top: -150px;
}
#chat_show {
    display: block;
    background: radial-gradient(#750f6a57, #201742);
    height: 300px;
    z-index: -1;
    overflow: hidden;
    position: relative
}

.yu {
    height: .693333rem;
    padding: 0 .2rem;
    line-height: .693333rem;
    position: absolute;
    background-color: rgba(37, 30, 74, .8);
    border-radius: 1rem;
    z-index: 11111;
    padding-left: 0;
    font-size: .32rem;
    color: #e7e2ff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    white-space: nowrap
}

.yu span {
    margin-left: .2rem
}

.main_img {
    background-color: #dae8f5;
}



@keyframes mymove1 {
    0% {
        right: 20px;
        bottom: -50px
    }

    33.333% {
        right: 20px;
        bottom: 250px
    }

    66.666% {
        right: 20px;
        bottom: 250px
    }

    100% {
        right: 20px;
        bottom: 250px
    }
}

@keyframes mymove2 {
    0% {
        left: 20px;
        bottom: -50px
    }

    33.333% {
        left: 20px;
        bottom: 250px
    }

    66.666% {
        left: 20px;
        bottom: 250px
    }

    100% {
        left: 20px;
        bottom: 250px
    }
}

.po1 {
    animation: mymove2 18s linear 2s infinite normal;
    -webkit-animation: mymove2 18s linear 2s infinite normal
}

.po2 {
    animation: mymove2 18s linear 4s infinite normal;
    -webkit-animation: mymove2 18s linear 4s infinite normal
}

.po3 {
    animation: mymove2 18s linear 6s infinite normal;
    -webkit-animation: mymove2 18s linear 6s infinite normal
}

.po4 {
    animation: mymove2 18s linear 8s infinite normal;
    -webkit-animation: mymove2 18s linear 8s infinite normal
}

.po5 {
    animation: mymove2 18s linear 10s infinite normal;
    -webkit-animation: mymove2 18s linear 10s infinite normal
}

.po6 {
    animation: mymove2 18s linear 12s infinite normal;
    -webkit-animation: mymove2 18s linear 12s infinite normal
}

.po7 {
    animation: mymove2 18s linear 14s infinite normal;
    -webkit-animation: mymove2 18s linear 14s infinite normal
}

.po8 {
    animation: mymove2 18s linear 16s infinite normal;
    -webkit-animation: mymove2 18s linear 16s infinite normal
}

.po9 {
    animation: mymove2 18s linear 18s infinite normal;
    -webkit-animation: mymove2 18s linear 18s infinite normal
}

.po10 {
    animation: mymove1 18s linear 3s infinite normal;
    -webkit-animation: mymove1 18s linear 3s infinite normal
}

.po11 {
    animation: mymove1 18s linear 5s infinite normal;
    -webkit-animation: mymove1 18s linear 5s infinite normal
}

.po12 {
    animation: mymove1 18s linear 7s infinite normal;
    -webkit-animation: mymove1 18s linear 7s infinite normal
}

.po13 {
    animation: mymove1 18s linear 9s infinite normal;
    -webkit-animation: mymove1 18s linear 9s infinite normal
}

.po14 {
    animation: mymove1 18s linear 11s infinite normal;
    -webkit-animation: mymove1 18s linear 11s infinite normal
}

.po15 {
    animation: mymove1 18s linear 13s infinite normal;
    -webkit-animation: mymove1 18s linear 13s infinite normal
}

.po16 {
    animation: mymove1 18s linear 15s infinite normal;
    -webkit-animation: mymove1 18s linear 15s infinite normal
}

.po17 {
    animation: mymove1 18s linear 17s infinite normal;
    -webkit-animation: mymove1 18s linear 17s infinite normal
}

.po18 {
    animation: mymove1 18s linear 19s infinite normal;
    -webkit-animation: mymove1 18s linear 19s infinite normal
}

.yu img {
    width: .693333rem;
    height: .693333rem;
    border-radius: 50%
}
.down_btn {
    user-select: none;
    cursor: pointer;
}


.down_ico {
    margin: .25rem;
    width: 2.5rem;
    float: left;
    height: auto
}

.ico_img {
    height: 2.5rem;
    width: 2.5rem
}

.down_ico img {
    width: 100%;
    height: 100%
}

.down_title {
    width: 3rem;
    height: 100%;
    flex: 1
}

.titleh3 {
    margin-top: .7rem;
    font-size: .8rem
}

.titlespan {
    margin-top: .2rem;
    font-size: .4rem
}

.gobotton {
    display: block;
    width: 3.5rem;
    height: 1.6rem;
    line-height: 1.5rem;
    background: #43c117;
    color: #fff;
    text-align: center;
    font-size: .8rem;
    border-radius: .08rem;
    margin: 25px
}

.gobotton-new {
    display: inline-block
}

.gobotton-new img {
    display: block
}
.ios-down {
    text-align: right;
}
.downbutton {
    display: block;
    margin-left: 10px;
    height: auto;
    padding: 8px;
    background: #43c117;
    color: #fff;
    font-weight: 700;
    text-align: center;
    font-size: .64rem;
    border-radius: 0.08rem;
    margin-right: 4px;
}

.registerbutton {
    display: block;
    width: 2.8rem;
    height: 1.28rem;
    line-height: 1.3rem;
    background: #ffa315;
    color: #fff;
    text-align: center;
    font-size: .64rem;
    border-radius: .08rem;
    margin-right: 10px
}

.game_code {
    font-size: .55rem;
    margin-bottom: 10px
}

.downregister {
    display: flex;
    justify-content: flex-end;
    margin-right: .15rem
}

.first-page {
    position: relative;
    margin-bottom: 0
}

.top-btn-frame {
    position: absolute;
    display: flex;
    top: .5rem;
    left: 3rem
}

.top-img {
    width: 2.9rem;
    padding: .1rem;
    height: intrinsic
}

.top-banner-frame {
    width: 100%;
    max-width: 700px;
    height: 150px;
    position: fixed;
}
.top-banner-frame img {
    width: 100%;
    max-width: 700px;
}

.middle-btn-frame {
    width: 100%;
    position: absolute;
    display: flex;
    top: 19.5rem;
    justify-content: space-around
}

.middle-img {
    width: 10rem;
    padding: .1rem;
    height: intrinsic
}

#contain {
    width: 300px;
    height: 100px;
    position: fixed;
    top: 50%;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0 auto;
    opacity: 0;
    animation: fadeIn 1s 1;
    animation-fill-mode: forwards;
    z-index: 1000
}



.wrap {
    animation: rotate 1s infinite ease-in-out alternate, zindex 2s infinite ease-in-out;
    position: absolute;
    z-index: 0
}

.part {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .1) 65%, rgba(0, 0, 0, .1));
    background-color: #e3746b;
    border-radius: 50%;
    animation: scale 1s infinite ease-in-out alternate;
    animation-delay: -.5s;
    transform: scale(.5)
}

.part:after {
    content: '';
    width: 100px;
    height: 10px;
    background: #77777740;
    position: absolute;
    top: 130px;
    border-radius: 50%
}

#wrap2 {
    animation-delay: -1s
}

#part2 {
    background-color: #397bf9;
    animation-delay: -1.5s
}

#wrap3 {
    animation-delay: -1.5s
}

#part3 {
    background-color: #f4b400;
    animation-delay: -2s
}

#wrap4 {
    animation-delay: -2.5s
}

#part4 {
    background-color: #0f9d58;
    animation-delay: -3s
}

#text-note {
    font-size: 20px;
    text-align: center;
    background: radial-gradient(#0e0e0eba, #282827);
    color: #f3f3f3;
    margin-top: -52px;
    padding: 10px;
    text-shadow: 6px 6px 7px #1a1818;
    /* border: 1px solid #000; */
    border-radius: 50px;
    /* color: black; */
}

@keyframes rotate {
    100% {
        transform: translateX(200px)
    }
}

@keyframes scale {
    100% {
        transform: scale(1)
    }
}

@keyframes zindex {
    25% {
        z-index: 1
    }

    75% {
        z-index: -1
    }
}

@keyframes fadeIn {
    100% {
        opacity: 1
    }
}