table {
    border-collapse: collapse;
    border-spacing: 0
}

ol, ul {
    list-style: none
}

blockquote:after, blockquote:before, q:after, q:before {
    content: ""
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: 100%;
    overflow-y: scroll
}

a:focus {
    outline: thin dotted
}

a:active, a:hover {
    outline: 0 none
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block
}

audio, canvas, video {
    *zoom: 1;
    display: inline-block;
    *display: inline
}

audio:not([controls]) {
    display: none
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    -ms-interpolation-mode: bicubic;
    border: 0
}

button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle
}

button, input {
    line-height: normal;
    *overflow: visible
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

button, input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

textarea {
    overflow: auto;
    vertical-align: top
}

.neon:hover {
    outline: none;
    text-decoration: none;
    transition: .5s
}

.neon:hover div {
    position: absolute
}

.neon:hover div:first-child {
    animation: animate1 1s linear infinite;
    background: linear-gradient(90deg, transparent, #8743ff);
    height: 2px;
    left: -100%;
    top: 0;
    width: 100%
}

.neon:hover div:nth-child(2) {
    animation: animate2 1s linear infinite;
    animation-delay: .25s;
    background: linear-gradient(180deg, transparent, #8743ff);
    height: 100%;
    right: 0;
    top: -100%;
    width: 2px
}

.neon:hover div:nth-child(3) {
    animation: animate3 1s linear infinite;
    animation-delay: .5s;
    background: linear-gradient(270deg, transparent, #8743ff);
    bottom: 0;
    height: 2px;
    right: -100%;
    width: 100%
}

.neon:hover div:nth-child(4) {
    animation: animate4 1s linear infinite;
    animation-delay: .75s;
    background: linear-gradient(0deg, transparent, #8743ff);
    bottom: -100%;
    height: 100%;
    left: 0;
    width: 2px
}


@media screen and (min-width: 851px) {
    #header .middle-header-btn {
        background-color: #6741fd;
        border-radius: 6px;
        color: #fff;
        cursor: pointer;
        display: none;
        font-size: 18px;
        height: 44px;
        left: 40%;
        line-height: 44px;
        margin: 10px auto;
        outline: none;
        overflow: hidden;
        position: absolute;
        text-align: center;
        text-decoration: none;
        top: 0;
        transition: all .25s;
        width: 176px;
        z-index: 2
    }

    #header .middle-header-btn:hover {
        background-color: #8567fd
    }

    #root {
        background-color: #1e1e28;
        position: relative
    }

    #root #area {
        display: flex;
        justify-content: center
    }

    #root #area #left .grid-left .grid-game-3d .btn .btn-wrapper, #root #area #left .grid-left .grid-game-3d .name .btn-wrapper {
        align-items: center;
        background-color: #573e83;
        border-radius: 10px;
        color: #fff;
        display: flex;
        flex-direction: column;
        height: 46px;
        justify-content: center;
        position: relative;
        text-align: center;
        width: 100px;
        z-index: 1
    }

    #root #area #left .grid-left .grid-game-3d .btn .btn-wrapper .game-name, #root #area #left .grid-left .grid-game-3d .name .btn-wrapper .game-name {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        bottom: 5px;
        display: -webkit-box;
        font-size: 12px;
        line-height: 16px;
        overflow: hidden;
        position: absolute;
        text-overflow: ellipsis;
        width: 80%
    }

    #root #area #left .grid-left .grid-game-3d .name span {
        background-color: unset;
        overflow: hidden;
        padding: 0 6px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: unset
    }

    #root #area #middle {
        background-color: #161620;
        border-radius: 10px;
        box-shadow: 0 0 2px #13131d;
        height: max-content;
        max-width: 986px
    }

    #root #area #middle #middle-header {
        display: flex
    }

    #root #area #middle #middle-header .middle-header-btn, #root #area #middle #middle-header .middle-header-btn-group {
        display: none
    }

    #root #area #middle #middle-header .middle-header-imgDiv {
        border-radius: 10px;
        width: 200px;
        margin-bottom: .05rem;
    }

    #root #area #middle #middle-header .middle-header-imgDiv .middle-header-img {
        align-items: center;
        background-color: #10101a;
        border-radius: 10px;
        display: flex;
        height: 200px;
        justify-content: center;
        margin-top: 20px;
        width: 200px
    }

    #root #area #middle #middle-header .middle-header-imgDiv .middle-header-img img {
        border-radius: 10px;
        height: 180px;
        width: 180px
    }

    #root #area #middle #middle-header .middle-header-imgDiv .middle-header-btn {
        align-items: center;
        background-color: #6741fd;
        border-radius: 6px;
        color: #fff;
        cursor: pointer;
        display: none;
        font-size: 18px;
        height: 44px;
        justify-content: center;
        line-height: 44px;
        margin: 10px auto 0;
        outline: none;
        overflow: hidden;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: all .25s;
        width: 176px;
        font-weight: bold;
    }

    #root #area #middle #middle-header .middle-header-imgDiv .middle-header-btn.google-play svg {
        height: 26px;
        margin-right: 10px;
        width: 26px
    }

    #root #area #middle #middle-header .middle-header-imgDiv .middle-header-btn.google-play .qrcode-dialog img {
        height: 100px;
        width: 100px
    }

    #root #area #middle #middle-header .middle-header-imgDiv .middle-header-btn:hover {
        background-color: #8567fd
    }

    #root #area #middle #middle-header .middle-header-text {
        line-height: 30px;
        margin-left: 36px;
        margin-top: 20px;
        margin-right: 10px;
    }

    #root #area #middle #middle-header .middle-header-text .middle-header-text-title .middle-header-img {
        display: none
    }

    #root #area #middle #middle-header .middle-header-text .middle-header-text-title h1 {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: #fff;
        display: -webkit-box;
        font-size: 20px;
        line-height: 30px;
        overflow: hidden;
        padding-right: 20px;
        text-overflow: ellipsis;
        font-weight: bold;
        margin-bottom: .05rem;
    }

    #root #area #middle #middle-header .middle-header-text .middle-header-text-content {
        -webkit-line-clamp: 13;
        -webkit-box-orient: vertical;
        color: #c9c9c9;
        display: -webkit-box;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis
    }

    #root #area #middle #middle-header .middle-header-text .middle-header-text-content p {
        font-size: 14px;
        line-height: 1.5
    }

    #root #area #middle #middle-header .middle-header-text .middle-header-text-content p a {
        color: #fce331;
        text-decoration: none
    }

    #root #area #middle #middle-video #middle-video-lab div {
        background-color: #fff;
        border-radius: 50%;
        height: 16px;
        width: 16px
    }

    #root #area #middle #middle-video #middle-video-lab div div {
        background-color: #878789;
        border-radius: 50%;
        height: 12px;
        margin-left: 7px;
        margin-top: 7px;
        width: 12px
    }

    #root #area #middle #middle-video #middle-video-lab span {
        color: #fff;
        font-size: 20px;
        margin-left: 14px;
        margin-top: 2px
    }


    #root #area #middle #middle-video #middle-video-list .middle-video-list-div .grid-movies .grid-movies-play i {
        left: 35%;
        position: absolute;
        top: 33%
    }

    #root #area #middle #middle-video #middle-video-list .middle-video-list-div .grid-movies img {
        border-radius: 10px
    }

    #root #area #middle #middle-video #middle-video-list .middle-video-list-div span {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: #fff;
        display: block;
        display: -webkit-box;
        font-size: 16px;
        margin: auto;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        width: 180px
    }

    #root #area #middle .breadcrumb {
        margin: 20px 20px 0
    }

    #root #area #middle .breadcrumb .breadcrumb-item {
        display: inline-block
    }

    #root #area #middle .breadcrumb .breadcrumb-item a {
        color: #b2b2b2;
        font-size: 12px;
        text-decoration: none
    }

    #root #area #middle .breadcrumb .breadcrumb-item a:hover {
        color: #fce331
    }

    #root #area #middle .breadcrumb .breadcrumb-item:not(:first-child):before {
        color: #b2b2b2;
        content: "›";
        font-size: 14px;
        margin: 0 6px
    }

    #root #area #middle #middle-appName {
        margin: 30px 20px 0;
        display: none;
    }

    #root #area #middle #middle-appName #middle-appName-lab {
        align-items: center;
        display: flex;
        margin-bottom: 18px
    }

    #root #area #middle #middle-appName #middle-appName-lab div {
        background-color: #fff;
        border-radius: 50%;
        height: 16px;
        width: 16px
    }

    #root #area #middle #middle-appName #middle-appName-lab div div {
        background-color: #878789;
        border-radius: 50%;
        height: 12px;
        margin-left: 7px;
        margin-top: 7px;
        width: 12px
    }

    #root #area #middle #middle-appName #middle-appName-lab .how-to-play {
        color: #fff;
        font-size: 20px;
        line-height: normal;
        margin-left: 14px;
        margin-top: 2px;
        font-weight: bold;
    }

    #root #area #middle #middle-appName #middle-appName-content p {
        color: #a0a0a2;
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 14px
    }

    #root #area #middle #middle-appName #middle-appName-content p a {
        color: #fce331;
        text-decoration: none
    }

    #root #area #middle #middle-appName #middle-appName-content p:last-of-type {
        margin-bottom: 0
    }

    #root #area #middle #middle-mobile #middle-mobile-lab div {
        background-color: #fff;
        border-radius: 50%;
        height: 16px;
        width: 16px
    }

    #root #area #middle #middle-mobile #middle-mobile-lab div div {
        background-color: #878789;
        border-radius: 50%;
        height: 12px;
        margin-left: 7px;
        margin-top: 7px;
        width: 12px
    }

    #root #area #middle #middle-mobile #middle-mobile-lab span {
        color: #fff;
        font-size: 20px;
        margin-left: 14px;
        margin-top: 2px
    }

    #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-header #qrcode img {
        border: 15px solid #fff
    }

    #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-header .text p:first-child {
        color: #c9c9c9;
        font-size: 16px;
        margin-bottom: 18px
    }

    #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-header .text p:last-child {
        color: #a0a0a2;
        font-size: 14px
    }

    #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn {
        align-items: center;
        display: flex;
        flex-wrap: wrap
    }

    #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn a {
        border: 1px solid #c9c9c9;
        border-radius: 12px;
        color: #fff;
        cursor: pointer;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        margin-bottom: 16px;
        margin-right: 12px;
        outline: none;
        padding: 0 10px;
        text-decoration: none
    }

    #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn a:hover {
        border: 1px solid #fce331;
        color: #fce331
    }

    #root #area #middle .comments-wrapper .comments .comments-title span {
        background-color: #161620;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        left: 50%;
        line-height: 20px;
        padding: 0 20px;
        position: absolute;
        transform: translateX(-50%) translateY(-50%)
    }

    #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper input, #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper textarea {
        background-color: transparent;
        border: 1px solid #fff;
        border-radius: 2px;
        box-sizing: border-box;
        color: #fff;
        font-size: 13px
    }

    #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper input::placeholder, #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper textarea::placeholder {
        color: hsla(0, 0%, 100%, .6)
    }

    #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper input:focus, #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper textarea:focus {
        outline: none
    }

    #root #area #middle .comments-wrapper .comments ::-webkit-scrollbar {
        width: 5px
    }

    #root #area #middle .comments-wrapper .comments ::-webkit-scrollbar-thumb {
        background-color: hsla(0, 0%, 100%, .6);
        border-radius: 3px
    }

    #root #area #middle .comments-wrapper .comments ::-webkit-scrollbar-track {
        background-color: #0f0f14
    }

    #root #area #middle #middle-question #middle-question-lab div {
        background-color: #fff;
        border-radius: 50%;
        height: 16px;
        width: 16px
    }

    #root #area #middle #middle-question #middle-question-lab div div {
        background-color: #878789;
        border-radius: 50%;
        height: 12px;
        margin-left: 7px;
        margin-top: 7px;
        width: 12px
    }

    #root #area #middle #middle-question #middle-question-lab span {
        color: #fff;
        font-size: 20px;
        margin-left: 14px;
        margin-top: 2px
    }

    #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-header div {
        background-color: #fff;
        border-radius: 50%;
        height: 16px;
        width: 16px
    }

    #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-header div div {
        background-color: #878789;
        border-radius: 50%;
        height: 12px;
        margin-left: 7px;
        margin-top: 7px;
        width: 12px
    }

    #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-header span {
        color: #fff;
        font-size: 20px;
        margin-left: 14px;
        margin-top: 2px
    }

    #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-content a {
        color: #c9c9c9;
        cursor: pointer;
        display: block;
        margin-bottom: 16px;
        outline: none;
        text-decoration: none
    }

    #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-content a:hover span {
        color: #fce331
    }

    #root #area #right .rightList .grid-right .grid-game-3d {
        border-radius: 10px;
        overflow: hidden
    }


    #root #area #right .rightList .grid-right .grid-game-3d .btn .btn-wrapper, #root #area #right .rightList .grid-right .grid-game-3d .name .btn-wrapper {
        align-items: center;
        background-color: #573e83;
        border-radius: 10px;
        color: #fff;
        display: flex;
        flex-direction: column;
        height: 36px;
        justify-content: center;
        position: relative;
        text-align: center;
        /*width: 80px;*/
        z-index: 1
    }

    #root #area #right .rightList .grid-right .grid-game-3d .btn .btn-wrapper .game-name, #root #area #right .rightList .grid-right .grid-game-3d .name .btn-wrapper .game-name {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        bottom: 2px;
        display: -webkit-box;
        font-size: 12px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: scale(.8);
        width: 100%;
    }

    #root #area #right .rightList .grid-right .grid-game-3d .name span {
        background-color: unset;
        overflow: hidden;
        padding: 0 6px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: unset
    }


    #root .more-games {
        display: grid;
        gap: 23px;
        grid-auto-flow: row dense;
        grid-auto-rows: 156px;
        grid-template-columns:repeat(auto-fill, 156px);
        grid-template-rows:repeat(auto-fill, 156px);
        justify-content: center;
        margin: 30px auto 0;
        width: 1681px
    }

    #root .more-games a {
        box-shadow: 0 0 8px #36365c;
        position: relative
    }

    #root .more-games a, #root .more-games a .grid-game-3d {
        border-radius: 10px;
        overflow: hidden
    }

    #root .more-games a .grid-game-3d .btn .btn-wrapper, #root .more-games a .grid-game-3d .name .btn-wrapper {
        align-items: center;
        background-color: #573e83;
        border-radius: 10px;
        color: #fff;
        display: flex;
        flex-direction: column;
        height: 46px;
        justify-content: center;
        position: relative;
        text-align: center;
        width: 90%;
        z-index: 1;
    }

    #root .more-games a .grid-game-3d .btn .btn-wrapper .game-name, #root .more-games a .grid-game-3d .name .btn-wrapper .game-name {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        bottom: 5px;
        display: -webkit-box;
        font-size: 12px;
        line-height: 16px;
        overflow: hidden;
        /*position: absolute;*/
        text-overflow: ellipsis;
        width: 100%
    }

    #root .more-games a .grid-game-3d .name span {
        background-color: unset;
        overflow: hidden;
        padding: 0 6px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: unset
    }

    #root .more-games a:hover {
        box-shadow: none;
        transform: scale(1.5);
        transition: all .2s ease-out;
        z-index: 999
    }
}

@media screen and (max-width: 850px) {

    #app #root #area #middle #middle-header .middle-header-imgDiv {
        display: none
    }

    #app #root #area #middle #middle-header .middle-header-text {
        background-color: #161620;
        border-radius: .1rem;
        box-shadow: 0 0 .02rem #13131d
    }

    #app #root #area #middle #middle-header .middle-header-text .middle-header-text-title {
        align-items: center;
        color: #fff;
        display: flex;
        font-size: .28rem;
        line-height: 2;
        padding: 0 .18rem
    }

    #app #root #area #middle #middle-header .middle-header-text .middle-header-text-title .middle-header-img {
        background-color: #10101a;
        border-radius: .1rem;
        height: 2rem;
        margin-right: .4rem;
        width: 2rem
    }

    #app #root #area #middle #middle-header .middle-header-text .middle-header-text-title .middle-header-img img {
        border-radius: .1rem;
        height: 1.8rem;
        margin: .1rem;
        width: 1.8rem
    }

    #app #root #area #middle #middle-header .middle-header-text .middle-header-text-content {
        color: #c9c9c9;
        font-size: .22rem;
        margin-top: .1rem;
        padding-bottom: .18rem;
        padding-left: .18rem;
        padding-right: .18rem;
        display: none;
    }

    #app #root #area #middle #middle-header .middle-header-text .middle-header-text-content p {
        line-height: 2
    }

    #app #root #area #middle #middle-header .middle-header-text .middle-header-text-content p a {
        color: #fce331;
        text-decoration: none
    }

    #app #root #area #middle #middle-header .middle-header-btn-group {
        display: flex;
        justify-content: space-evenly;
        margin: .26rem 0
    }

    #app #root #area #middle #middle-header .middle-header-btn-group .middle-header-btn {
        align-items: center;
        background-color: #0287ff;
        border-radius: .06rem;
        color: #fff;
        cursor: pointer;
        display: flex;
        font-size: .35rem;
        height: .72rem;
        justify-content: center;
        line-height: .72rem;
        outline: none;
        text-align: center;
        text-decoration: none;
        width: 2.7rem
    }

    #app #root #area #middle #middle-header .middle-header-btn-group .middle-header-btn.google-play svg {
        height: .35rem;
        margin-right: .1rem;
        width: .35rem
    }

    #app #root #area #middle #middle-header .middle-mobile-content-footer-btn {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        margin-left: .2rem;
        margin-right: .2rem;
        margin-top: .06rem
    }

    #app #root #area #middle #middle-header .middle-mobile-content-footer-btn a {
        border: 1px solid #c9c9c9;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        font-size: .22rem;
        height: .5rem;
        line-height: .5rem;
        margin-bottom: .24rem;
        margin-right: .14rem;
        outline: none;
        padding: 0 .1rem;
        text-decoration: none
    }

    #app #root #area #middle #middle-header .middle-mobile-content-footer-btn a:hover {
        border: 1px solid #fce331;
        color: #fce331
    }

    #app #root #area #middle #middle-video #middle-video-lab div {
        background-color: #fff;
        border-radius: 50%;
        height: .22rem;
        margin-top: .05rem;
        width: .22rem
    }

    #app #root #area #middle #middle-video #middle-video-lab div div {
        background-color: #878789;
        border-radius: 50%;
        height: .16rem;
        margin-left: .1rem;
        margin-top: .1rem;
        width: .16rem
    }

    #app #root #area #middle #middle-video #middle-video-lab span {
        color: #fff;
        font-size: .3rem;
        margin-left: .18rem
    }

    #app #root #area #middle #middle-video #middle-video-list .middle-video-list-div .grid-movies iframe {
        left: 0;
        position: absolute;
        top: 0
    }

    #app #root #area #middle #middle-video #middle-video-list .middle-video-list-div .grid-movies img {
        border-radius: .1rem
    }

    #app #root #area #middle #middle-video #middle-video-list .middle-video-list-div span {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: #fff;
        display: -webkit-box;
        font-size: .24rem;
        margin: .12rem .05rem;
        overflow: hidden;
        text-align: center
    }

    #app #root #area #middle .breadcrumb {
        padding: .36rem .2rem 0
    }

    #app #root #area #middle .breadcrumb .breadcrumb-item {
        display: inline-block
    }

    #app #root #area #middle .breadcrumb .breadcrumb-item a {
        color: #b2b2b2;
        font-size: .22rem;
        text-decoration: none
    }

    #app #root #area #middle .breadcrumb .breadcrumb-item:not(:first-child):before {
        color: #b2b2b2;
        content: "›";
        font-size: .26rem;
        margin: 0 .1rem
    }

    #app #root #area #middle #middle-appName {
        margin-bottom: .36rem;
        margin-left: .2rem;
        margin-right: .2rem
    }

    #app #root #area #middle #middle-appName #middle-appName-lab {
        display: flex;
        margin-bottom: .3rem;
    }

    #app #root #area #middle #middle-appName #middle-appName-lab div {
        background-color: #fff;
        border-radius: 50%;
        height: .16rem;
        margin-top: .07rem;
        width: .16rem
    }

    #app #root #area #middle #middle-appName #middle-appName-lab div div {
        display: none
    }

    #app #root #area #middle #middle-appName #middle-appName-lab .how-to-play {
        color: #fff;
        font-size: .32rem;
        line-height: normal;
        font-weight: bold;
    }

    #app #root #area #middle #middle-appName #middle-appName-content {
        color: #a0a0a2;
        font-size: .24rem;
        line-height: .5rem;
        padding-bottom: 0.1rem;
    }

    #app #root #area #middle #middle-appName #middle-appName-content a {
        color: #fce331;
        text-decoration: none
    }

    #app #root #area #middle #middle-appName #middle-appName-content p {
        line-height: 1.5;
        margin-bottom: .14rem
    }

    #app #root #area #middle #middle-appName #middle-appName-content p:last-of-type {
        margin-bottom: 0
    }

    #app #root #area #middle #middle-mobile #middle-mobile-lab div {
        background-color: #fff;
        border-radius: 50%;
        height: .22rem;
        margin-top: .05rem;
        width: .22rem
    }

    #app #root #area #middle #middle-mobile #middle-mobile-lab div div {
        background-color: #878789;
        border-radius: 50%;
        height: .16rem;
        margin-left: .1rem;
        margin-top: .1rem;
        width: .16rem
    }

    #app #root #area #middle #middle-mobile #middle-mobile-lab span {
        color: #fff;
        font-size: .28rem;
        margin-left: .18rem
    }

    #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-header #qrcode img {
        border: .15rem solid #fff
    }

    #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-header .text p:first-child {
        color: #c9c9c9;
        font-size: .2rem;
        line-height: 1.5;
        margin-bottom: .05rem
    }

    #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-header .text p:last-child {
        color: #a0a0a2;
        font-size: .18rem;
        line-height: 1.5
    }

    #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        margin-left: .2rem;
        margin-right: .2rem;
        margin-top: .06rem
    }

    #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn a {
        border: 1px solid #c9c9c9;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        font-size: .22rem;
        height: .5rem;
        line-height: .5rem;
        margin-bottom: .24rem;
        margin-right: .14rem;
        outline: none;
        padding: 0 .1rem;
        text-decoration: none
    }

    #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn a:nth-child(3), #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn a:nth-child(5), #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn a:nth-child(6), #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn a:nth-child(7), #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn a:nth-child(8) {
        display: none
    }

    #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer .middle-mobile-content-footer-btn a:hover {
        border: 1px solid #fce331;
        color: #fce331
    }

    #app #root #area #middle #middle-mobile #middle-mobile-content #middle-mobile-content-footer img {
        border: .15rem solid #fff;
        bottom: -.1rem;
        position: absolute;
        right: 0
    }

    #app #root #area #middle .comments-wrapper .comments .comments-title span {
        background-color: #161620;
        color: #fff;
        font-size: .22rem;
        font-weight: 600;
        left: 50%;
        line-height: .2rem;
        padding: 0 .2rem;
        position: absolute;
        transform: translateX(-50%) translateY(-50%)
    }

    #app #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper input, #app #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper textarea {
        background-color: transparent;
        border: .01rem solid #fff;
        border-radius: .02rem;
        box-sizing: border-box;
        color: #fff
    }
}

@media screen and (max-width: 850px) {
    #app #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper input::placeholder, #app #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper textarea::placeholder {
        color: hsla(0, 0%, 100%, .6)
    }

    #app #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper input:focus, #app #root #area #middle .comments-wrapper .comments .comments-form .comments-form-item .input-wrapper textarea:focus {
        outline: none
    }


    #app #root #area #middle .comments-wrapper .comments ::-webkit-scrollbar {
        width: .05rem
    }

    #app #root #area #middle .comments-wrapper .comments ::-webkit-scrollbar-thumb {
        background-color: hsla(0, 0%, 100%, .6);
        border-radius: .03rem
    }

    #app #root #area #middle .comments-wrapper .comments ::-webkit-scrollbar-track {
        background-color: #0f0f14
    }

    #app #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-header div {
        background-color: #fff;
        border-radius: 50%;
        height: .22rem;
        margin-right: .18rem;
        margin-top: .1rem;
        width: .22rem
    }

    #app #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-header div div {
        background-color: #878789;
        border-radius: 50%;
        height: .16rem;
        margin-left: .1rem;
        margin-top: .1rem;
        width: .16rem
    }

    #app #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-header span {
        color: #fff;
        font-size: .28rem;
        line-height: 1.5
    }

    #app #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-content a {
        color: silver;
        cursor: pointer;
        display: block;
        margin-bottom: .24rem;
        outline: none;
        text-decoration: none
    }

    #app #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-content a:last-child {
        margin-bottom: .3rem
    }

    #app #root #area #middle #middle-question #middle-question-content .middle-question-div .middle-question-div-content a:hover span {
        color: #fce331
    }
}

@media screen and (min-width: 851px) {

    #root #tag #tag-lab div {
        background-color: #fff;
        border-radius: 50%;
        height: 20px;
        margin-right: 14px;
        width: 20px
    }

    #root #tag #tag-lab div div {
        background-color: #878789;
        height: 16px;
        margin-left: 7px;
        margin-top: 7px;
        width: 16px
    }

    #root #tag #tag-lab h1, #root #tag #tag-lab span {
        color: #fff;
        font-size: 24px;
        line-height: normal;
        margin-top: 5px
    }

    #root #tag #tag-lab a {
        color: #fce331;
        float: right;
        font-size: 24px;
        outline: none;
        position: absolute;
        right: 0;
        text-decoration: none
    }

    #root #tag #tag-lab a:hover {
        color: #fcc031
    }

    #root #tag #tag-list .grid-tag img {
        border-radius: 10px;
        filter: unset;
        height: 90px;
        margin-left: 3px;
        overflow: hidden;
        width: 90px
    }

    #root #tag #tag-list .grid-tag span {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: #171721;
        display: inline-block;
        display: -webkit-box;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
        margin-left: 9px;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        width: 100px
    }

    #root #tag #tag-list .grid-tag-text span {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: #fff;
        display: -webkit-box;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.5;
        margin: 24px;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis
    }


    #root #video #video-lab .video-lab-play i {
        left: 7px;
        position: absolute;
        top: 7px;
        transform: scale(.9)
    }

    #root #video #video-lab span {
        color: #fff;
        font-size: 24px
    }

    #root #video #video-lab a {
        color: #fce331;
        float: right;
        font-size: 24px;
        outline: none;
        position: absolute;
        right: 0;
        text-decoration: none
    }

    #root #video #video-lab a:hover {
        color: #fcc031
    }

    #root #video #video-list .grid-video-list .grid-movies .grid-movies-play i {
        left: 35%;
        position: absolute;
        top: 33%
    }

    #root #video #video-list .grid-video-list .grid-movies img {
        border-radius: 10px
    }

    #root #video #video-list .grid-video-list span {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: #fff;
        display: block;
        display: -webkit-box;
        font-size: 16px;
        margin: auto;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        width: 180px
    }

    #root .quiz .quiz-lab .quiz-lab-play i {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%) scale(.8)
    }

    #root .quiz .quiz-lab span {
        color: #fff;
        font-size: 24px
    }

    #root .quiz .quiz-list .quiz-item .quiz-href .quiz-banner img {
        background-color: #fff;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    #root > .new-games .new-games-list a {
        border-radius: 10px;
        box-shadow: 0 0 8px #36365c;
        overflow: hidden;
        text-decoration: none
    }

    #root > .new-games .new-games-list a .grid-game-3d {
        border-radius: 10px;
        height: 100%;
        overflow: hidden;
        width: 100%
    }

    #root > .new-games .new-games-list a .grid-game-3d .btn {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        transition: all .1s;
        width: 100%
    }

    #root > .new-games .new-games-list a .grid-game-3d .btn .btn-wrapper {
        align-items: center;
        background-color: #573e83;
        border-radius: 10px;
        color: #fff;
        display: flex;
        flex-direction: column;
        height: 36px;
        justify-content: center;
        position: relative;
        text-align: center;
        width: 80px;
        z-index: 1
    }

    #root > .new-games .new-games-list a .grid-game-3d .btn .btn-wrapper .game-name {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        bottom: 2px;
        display: -webkit-box;
        font-size: 12px;
        line-height: 16px;
        overflow: hidden;
        position: absolute;
        text-overflow: ellipsis;
        transform: scale(.8);
        width: 80%
    }

    #root > .new-games .new-games-list a:hover {
        box-shadow: none;
        transform: scale(1.5);
        transition: all .2s ease-out;
        z-index: 999
    }

    #root > .new-games .new-games-list a:hover .grid-game-3d .btn {
        opacity: 1;
        transition: all .1s
    }

    #root > .new-games .new-games-list a.tag-1 .grid-game-3d {
        align-items: center;
        background-color: #982dd5;
        display: flex;
        flex-direction: column;
        justify-content: center
    }
}

@media screen and (max-width: 850px) {

    #root #tag #tag-lab div {
        background-color: #fff;
        border-radius: 50%;
        height: .22rem;
        margin-right: .2rem;
        width: .22rem
    }

    #root #tag #tag-lab div div {
        background-color: #878789;
        border-radius: 50%;
        height: .16rem;
        margin-left: .12rem;
        margin-top: .12rem;
        width: .16rem
    }

    #root #tag #tag-lab h1, #root #tag #tag-lab span {
        color: #fff;
        font-size: .28rem;
        line-height: normal;
        margin-top: .05rem
    }

    #root #tag #tag-lab a {
        color: #fce331;
        float: right;
        font-size: .26rem;
        outline: none;
        position: absolute;
        right: 0;
        text-decoration: none
    }

    #root #tag #tag-list .grid-tag img {
        border-radius: .12rem;
        filter: unset;
        height: 1.28rem;
        margin-left: .03rem;
        margin-right: .03rem;
        width: 1.28rem
    }

    #root #tag #tag-list .grid-tag span {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        color: #171721;
        display: inline-block;
        display: -webkit-box;
        font-size: .24rem;
        font-weight: 600;
        line-height: 1.5;
        margin-left: .09rem;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis
    }

    #root #video #video-lab .video-lab-play i {
        margin: .1rem;
        position: absolute
    }

    #root #video #video-lab span {
        color: #fff;
        font-size: .28rem
    }

    #root #video #video-lab a {
        color: #fce331;
        float: right;
        font-size: .26rem;
        outline: none;
        position: absolute;
        right: 0;
        text-decoration: none
    }

    #root #video #video-list .grid-video-list .grid-movies img {
        border-radius: .1rem
    }

    #root #video #video-list .grid-video-list span {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        color: #fff;
        display: block;
        display: -webkit-box;
        font-size: .24rem;
        margin: auto;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        width: 2.5rem
    }

    #root .quiz .quiz-lab .quiz-lab-play i {
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%)
    }

    #root .quiz .quiz-lab span {
        color: #fff;
        font-size: .28rem
    }

    #root .quiz .quiz-list .quiz-item .quiz-href .quiz-banner img {
        background-color: #fff;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    #root > .new-games .new-games-list a {
        border-radius: .1rem;
        box-shadow: 0 0 .08rem #36365c;
        display: none;
        overflow: hidden;
        text-decoration: none
    }

    #root > .new-games .new-games-list a .grid-game-3d {
        border-radius: .1rem;
        height: 100%;
        overflow: hidden;
        width: 100%
    }

    #root > .new-games .new-games-list a:nth-child(-n+10) {
        display: block
    }

    #root > .new-games .new-games-list a.tag-1 .grid-game-3d {
        align-items: center;
        background-color: #982dd5;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

}

@media screen and (min-width: 1300px) and (max-width: 1449px) {
    body #app #root .grid-games {
        width: 1316px;
        grid-auto-flow: row dense;
        grid-auto-rows: 156px;
        grid-template-columns: repeat(auto-fill, 156px);
        grid-template-rows: repeat(auto-fill, 70px);
        margin: 30px auto 0;
    }
}


#app #root #area #right, #app #root .more-games {
    display: grid;
    gap: 23px;
    grid-auto-flow: row dense;
    grid-auto-rows: 156px;
    grid-template-columns: repeat(auto-fill, 156px);
    grid-template-rows: repeat(auto-fill, 156px);
    justify-content: center;
    margin: 30px auto 0;
}

@media screen and (min-width: 980px) and (max-width: 1219px) {
    body #app #root .more-games {
        grid-template-columns: repeat(5, 156px);
        width: 100%;
    }
}

@media screen and (min-width: 1366px) and (max-width: 1535px) {
    body #app #root .more-games {
        width: 1316px;
    }
}

@media screen and (min-width: 1536px) and (max-width: 1739px) {
    body #app #root .more-games {
        width: 1536px;
    }
}

@media screen and (min-width: 1220px) and (max-width: 1365px) {
    body #app #root .more-games {
        width: 1176px;
    }
}

@media screen and (min-width: 851px) and (max-width: 980px) {
    body #app #root .more-games {
        width: 980px;
    }
}

@media screen and (max-width: 809px) {
    #app #root #area #right, #app #root .more-games {
        grid-auto-rows: 180px !important;
        grid-template-columns: repeat(auto-fill, 180px) !important;
        grid-template-rows: repeat(auto-fill, 180px) !important;
    }
}