* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html, body {
    width: 100%;
    height: 100%;
    background: #eff4f8;
    color: #333;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: Montserrat !important;
    font-size: 14px;
    font-weight: 500;
    -webkit-text-size-adjust: 100%
}

@font-face {
    font-family: "Montserrat";
    src: url("../css/Outfit-VariableFont_wght.ttf")
}

body {
    position: relative
}

ul, ol {
    list-style: none
}

a {
    color: #333;
    text-decoration: none;
    background-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-weight: 500
}

h1, h2, h3, h4, h5, h6 {
    text-transform: capitalize;
    font-weight: bold !important
}

button {
    border: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.container {
    max-width: 1200px;
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto
}

img {
    border-style: none
}

input, textarea {
    font-size: 14px;
    outline: none
}

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

div, i {
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

body.cateActive {
    overflow: hidden
}

    body.cateActive .categoryBox {
        display: flex
    }

body.seaActive {
    overflow: hidden
}

    body.seaActive .searchBox {
        display: flex
    }

body.emailActive {
    overflow: hidden
}

    body.emailActive .emailBox {
        display: flex
    }

body.languageActive {
    overflow: hidden
}

    body.languageActive .languageBox {
        display: flex
    }

.ad {
    display: flex;
    flex-direction: column;
    align-items: center
}

    .ad > p {
        font-size: 12px;
        color: #999;
        margin-top: 10px
    }

@media screen and (max-width: 767px) {
    .ad {
        margin: 16px 0
    }
}

.layui-rate {
    display: flex !important;
    align-items: center;
    padding: 0 !important
}

    .layui-rate li {
        margin: 0 2px 0 0 !important;
        width: auto !important
    }

.layui-icon::before {
    content: "" !important;
    font-family: iconfont;
    font-size: 12px !important
}

.layui-icon-rate-solid {
    color: #ffbb32 !important
}

.layui-icon-rate {
    color: #ddd !important
}

header {
    width: 100%;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,.2);
    background: #fff
}

    header .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 70px
    }

        header .container .logo {
            height: 40px;
            display: block
        }

            header .container .logo > img {
                height: 100%
            }

        header .container .logoR {
            width: calc(100% - 212px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 100px
        }

            header .container .logoR .searchBtn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 240px;
                height: 40px;
                background: #f5f5f5;
                border-radius: 16px;
                overflow: hidden;
                transition: all .3s;
                position: relative
            }

                header .container .logoR .searchBtn > input {
                    border-radius: 20px;
                    width: 100%;
                    height: 40px;
                    background: #f5f5f5;
                    color: #999;
                    font-size: 14px;
                    text-indent: 16px;
                    -webkit-text-fill-color: #999;
                    border: none
                }

                header .container .logoR .searchBtn > button {
                    background: rgba(0,0,0,0);
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 10px;
                    right: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center
                }

                    header .container .logoR .searchBtn > button .iconfont {
                        font-size: 16px;
                        color: #999
                    }

            header .container .logoR > nav {
                display: flex;
                align-items: center
            }

                header .container .logoR > nav .late {
                    margin-right: 20px;
                    background: rgba(0,0,0,0);
                    padding: 0;
                    position: relative;
                    z-index: 9;
                    cursor: pointer
                }

                    header .container .logoR > nav .late > a {
                        height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #f5f5f5;
                        border-radius: 16px;
                        padding: 12px;
                        transition: all .3s
                    }

                        header .container .logoR > nav .late > a .iconfont {
                            font-size: 20px;
                            color: #6464f1
                        }

                        header .container .logoR > nav .late > a span {
                            font-weight: bold;
                            font-size: 16px;
                            margin-left: 8px;
                            line-height: 20px;
                            color: #333
                        }

                    header .container .logoR > nav .late .lateL {
                        display: none;
                        position: absolute;
                        left: 0;
                        top: 52px;
                        padding: 12px;
                        background: #fff;
                        box-shadow: 0px 2px 6px 0px rgba(0,0,0,.5);
                        border-radius: 16px
                    }

                        header .container .logoR > nav .late .lateL li a {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            min-width: 250px;
                            padding: 11px 12px;
                            background: #f5f5f5;
                            border-radius: 12px;
                            position: relative
                        }

                            header .container .logoR > nav .late .lateL li a p {
                                font-size: 16px;
                                color: #333;
                                font-weight: 600
                            }

                                header .container .logoR > nav .late .lateL li a p img {
                                    width: 20px;
                                    margin-right: 8px
                                }

                            header .container .logoR > nav .late .lateL li a span {
                                font-size: 14px;
                                color: #666
                            }

@media screen and (min-width: 1181px) {
    header .container .logoR > nav .late .lateL li a:hover {
        background: #ececff
    }
}

header .container .logoR > nav .late .lateL li + li {
    margin-top: 8px
}

header .container .logoR > nav .late::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100px;
    background: rgba(0,0,0,0);
    left: 0;
    top: 38px;
    display: none;
    transition: all .3s
}

header .container .logoR > nav .late:hover > a {
    background: #ececff
}

header .container .logoR > nav .late:hover::before {
    display: block
}

header .container .logoR > nav .late:hover .lateL {
    display: block
}

@media screen and (max-width: 1140px) {
    header .container .logoR > nav {
        margin-right: 20px
    }

        header .container .logoR > nav .late {
            margin-left: 15px
        }
}

header .container .email, header .container .cate, header .container .sea {
    display: none;
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border-radius: 20px;
    align-items: center;
    justify-content: center
}

    header .container .email .iconfont, header .container .cate .iconfont, header .container .sea .iconfont {
        font-size: 16px;
        color: #999
    }

header .container .email {
    display: flex
}

header .container .sea {
    margin-right: 12px
}

header .container .navBar {
    display: flex;
    align-items: center
}

@media screen and (max-width: 1023px) {
    header .container {
        height: 50px
    }

        header .container .logoR {
            display: none
        }

        header .container .sea, header .container .cate {
            display: flex
        }
}

.titleP {
    display: flex;
    flex-direction: column;
    align-items: center
}

    .titleP h2, .titleP h3 {
        font-size: 32px;
        color: #333;
        line-height: 40px;
        font-weight: 600
    }

        .titleP h2 span, .titleP h3 span {
            color: #6464f1
        }

    .titleP p {
        font-size: 16px;
        color: #878e93;
        line-height: 20px;
        margin-top: 16px;
        font-weight: 300;
        text-align: center
    }

    .titleP h3 {
        position: relative
    }

        .titleP h3::before, .titleP h3::after {
            content: "";
            position: absolute;
            top: calc(50% - 2px);
            width: 30px;
            height: 4px;
            background: #6464f1;
            border-radius: 2px
        }

        .titleP h3::before {
            left: -40px
        }

        .titleP h3::after {
            right: -40px
        }

@media screen and (max-width: 767px) {
    .titleP h2, .titleP h3 {
        font-size: 24px;
        line-height: 30px
    }

    .titleP p {
        font-size: 14px;
        line-height: 18px;
        margin-top: 12px
    }
}

.main {
    margin: 24px auto
}

    .main .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative
    }

        .main .title > h2 {
            font-size: 28px
        }

@media screen and (max-width: 700px) {
    .main .title > h2 {
        font-size: 24px
    }
}

.main .title > a {
    color: #999;
    transition: all .3s;
    font-weight: 500
}

    .main .title > a .iconfont {
        color: #999
    }

@media screen and (min-width: 1181px) {
    .main .title > a:hover {
        color: #6464f1
    }
}

.main .crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 500;
    color: #999;
    margin: 20px 0
}

    .main .crumb i {
        font-weight: 500;
        color: #999;
        margin: 0 8px
    }

    .main .crumb a {
        font-weight: 500;
        position: relative;
        padding-right: 20px;
        margin-right: 8px
    }

        .main .crumb a::before {
            content: ">";
            position: absolute;
            right: 0;
            top: 0;
            color: #999
        }

@media screen and (min-width: 1181px) {
    .main .crumb a:hover {
        color: #6464f1
    }
}

.main .crumb p {
    font-weight: 500;
    color: #999;
    word-break: break-all
}

.main .load {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 50px;
    margin: 24px auto;
    background: #fff;
    border-radius: 25px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #6464f1;
    transition: all .3s
}

@media screen and (min-width: 1181px) {
    .main .load:hover {
        color: #6464f1
    }
}

.main .mainbox {
    display: flex;
    justify-content: space-between;
    margin-top: 16px
}

    .main .mainbox .left {
        width: calc(100% - 376px)
    }

@keyframes downloadBtnAniPC {
    0% {
        transform: scale(0.9)
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 20px rgba(34,134,255,0)
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0px rgba(34,134,255,0)
    }
}

.main .mainbox .left .downloadBox {
    margin: 20px 0;
    background: #f9fafb;
    border-radius: 16px;
    padding: 20px
}

    .main .mainbox .left .downloadBox .downloadM {
        margin-top: 16px
    }

        .main .mainbox .left .downloadBox .downloadM .security {
            display: flex;
            align-items: center;
            color: #28c840;
            font-weight: 600
        }

            .main .mainbox .left .downloadBox .downloadM .security .iconfont {
                color: #28c840;
                font-size: 16px;
                margin-right: 12px
            }

        .main .mainbox .left .downloadBox .downloadM .pc {
            color: #666;
            margin-top: 10px
        }

        .main .mainbox .left .downloadBox .downloadM .downloadApk {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 410px;
            max-width: 100%;
            margin: 20px auto;
            height: 60px;
            background: #6464f1;
            border-radius: 16px;
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            transition: all .3s cubic-bezier(0.2, 0.57, 0.36, 0.8);
            box-shadow: 0 0 0 0 rgba(34,134,255,.6)
        }

            .main .mainbox .left .downloadBox .downloadM .downloadApk .iconfont {
                margin-left: 10px
            }

        .main .mainbox .left .downloadBox .downloadM .installBtn {
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap
        }

            .main .mainbox .left .downloadBox .downloadM .installBtn > li {
                width: calc(50% - 10px)
            }

                .main .mainbox .left .downloadBox .downloadM .installBtn > li > a {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    padding: 10px;
                    width: 100%;
                    background: #ececff;
                    border-radius: 30px;
                    transition: all .3s
                }

                    .main .mainbox .left .downloadBox .downloadM .installBtn > li > a > p {
                        display: flex;
                        align-items: center;
                        color: #333;
                        font-weight: 600
                    }

                        .main .mainbox .left .downloadBox .downloadM .installBtn > li > a > p .iconfont {
                            color: #333;
                            font-weight: 400;
                            font-size: 24px;
                            margin-right: 16px
                        }

                    .main .mainbox .left .downloadBox .downloadM .installBtn > li > a > span {
                        color: #999;
                        margin-top: 5px;
                        font-size: 12px
                    }

@media screen and (min-width: 1180px) {
    .main .mainbox .left .downloadBox .downloadM .installBtn > li > a:hover {
        background: #6464f1
    }

        .main .mainbox .left .downloadBox .downloadM .installBtn > li > a:hover > span {
            color: #fff
        }

        .main .mainbox .left .downloadBox .downloadM .installBtn > li > a:hover > p {
            color: #fff
        }

            .main .mainbox .left .downloadBox .downloadM .installBtn > li > a:hover > p .iconfont {
                color: #fff
            }
}

.main .mainbox .left .downloadBox .downloadM .installBtn > li:nth-child(n+3) {
    margin-top: 16px
}

@media screen and (max-width: 1279px) {
    .main .mainbox .left .downloadBox .downloadM .installBtn {
        width: 100%;
        flex-direction: column
    }

        .main .mainbox .left .downloadBox .downloadM .installBtn > li {
            width: 100%
        }

            .main .mainbox .left .downloadBox .downloadM .installBtn > li + li {
                margin-left: 0;
                margin-top: 16px
            }
}

.main .mainbox .left .module {
    margin: 20px 0;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
    border-radius: 16px;
    padding: 20px;
    background: #fff
}

    .main .mainbox .left .module .des {
        height: 288px;
        overflow: hidden;
        position: relative;
        font-size: 15px;
        color: #666;
        line-height: 24px;
        box-sizing: content-box;
        font-family: Montserrat !important;
        margin-top: 16px;
        overflow-y: scroll
    }

        .main .mainbox .left .module .des > p, .main .mainbox .left .module .des > span {
            font-size: 15px;
            color: #666;
            line-height: 24px;
            box-sizing: content-box;
            font-family: Montserrat !important
        }

            .main .mainbox .left .module .des > p > span, .main .mainbox .left .module .des > span > span {
                font-size: 15px;
                color: #666;
                line-height: 24px;
                box-sizing: content-box;
                font-family: Montserrat !important
            }

        .main .mainbox .left .module .des h1, .main .mainbox .left .module .des h2, .main .mainbox .left .module .des h3, .main .mainbox .left .module .des h4, .main .mainbox .left .module .des h5, .main .mainbox .left .module .des h6 {
            margin: 8px 0
        }

        .main .mainbox .left .module .des p + p {
            margin: 8px 0
        }

        .main .mainbox .left .module .des::-webkit-scrollbar {
            margin-right: 10px;
            width: 4px;
            height: 10px;
            border-radius: 10px;
            overflow: hidden;
            background: #eff4f8
        }

        .main .mainbox .left .module .des::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #b5b5ff
        }

.main .mainbox .left .download {
    margin: 24px 0;
    display: flex;
    justify-content: space-between;
    background: #f9fafb;
    border-radius: 16px;
    border: 1px solid #ecedee;
    padding: 32px
}

    .main .mainbox .left .download > .install {
        width: 779px
    }

        .main .mainbox .left .download > .install > li {
            border-radius: 25px;
            padding: 0 4px 0 24px;
            height: 50px;
            display: flex;
            align-items: center
        }

            .main .mainbox .left .download > .install > li:nth-child(1) {
                background: #68cc5b;
                transition: all .3s
            }

                .main .mainbox .left .download > .install > li:nth-child(1) > a {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #fff
                }

                    .main .mainbox .left .download > .install > li:nth-child(1) > a > span {
                        font-family: Nunito-Black;
                        font-size: 16px
                    }

                    .main .mainbox .left .download > .install > li:nth-child(1) > a > p {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 232px;
                        height: 42px;
                        background: rgba(255,255,255,.2);
                        border-radius: 30px;
                        font-family: Nunito-Black;
                        font-size: 16px
                    }

                        .main .mainbox .left .download > .install > li:nth-child(1) > a > p .iconfont {
                            font-size: 14px;
                            margin-right: 9px
                        }

@media screen and (min-width: 1181px) {
    .main .mainbox .left .download > .install > li:nth-child(1):hover {
        box-shadow: 0px 4px 8px 0px rgba(104,204,91,.5)
    }
}

.main .mainbox .left .download > .install > li + li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #e8e9ea;
    margin-top: 16px;
    cursor: pointer
}

    .main .mainbox .left .download > .install > li + li > span {
        color: #666;
        font-family: Nunito-Black;
        font-size: 16px
    }

    .main .mainbox .left .download > .install > li + li > nav {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        .main .mainbox .left .download > .install > li + li > nav > a {
            position: relative;
            cursor: pointer;
            height: 42px;
            background: #eef1f2;
            border-radius: 30px;
            padding: 0 24px;
            display: flex;
            align-items: center;
            margin-left: 8px
        }

            .main .mainbox .left .download > .install > li + li > nav > a > span {
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: Nunito-Black;
                color: #666
            }

                .main .mainbox .left .download > .install > li + li > nav > a > span .iconfont {
                    color: #666;
                    font-size: 14px;
                    margin-right: 9px
                }

            .main .mainbox .left .download > .install > li + li > nav > a .code {
                display: none;
                position: absolute;
                top: 58px;
                left: calc(50% - 42px);
                background: #eef1f2;
                border-radius: 10px;
                padding: 4px;
                z-index: 99
            }

                .main .mainbox .left .download > .install > li + li > nav > a .code:before {
                    content: "";
                    position: absolute;
                    top: -20px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 0;
                    height: 0;
                    border-left: 15px solid rgba(0,0,0,0);
                    border-right: 15px solid rgba(0,0,0,0);
                    border-bottom: 20px solid #eef1f2
                }

                .main .mainbox .left .download > .install > li + li > nav > a .code > img {
                    width: 80px
                }

@media screen and (min-width: 1181px) {
    .main .mainbox .left .download > .install > li + li:hover > nav > a .code {
        display: block
    }
}

.main .mainbox .left .download .security {
    width: calc(100% - 803px)
}

    .main .mainbox .left .download .security > h2 {
        color: #666;
        font-size: 18px
    }

        .main .mainbox .left .download .security > h2 .iconfont {
            color: #6464f1;
            font-size: 18px;
            margin-right: 10px
        }

    .main .mainbox .left .download .security > p {
        margin-top: 8px;
        padding-left: 33px;
        font-family: Nunito-Bold;
        color: #757b87
    }

.main .mainbox .left .download .installBtn {
    display: none;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px
}

    .main .mainbox .left .download .installBtn > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(50% - 8px);
        height: 50px;
        background: #fff;
        border-radius: 25px;
        border: 1px solid #e8e9ea
    }

        .main .mainbox .left .download .installBtn > a .iconfont {
            color: #666;
            font-size: 17px;
            margin-right: 8px
        }

        .main .mainbox .left .download .installBtn > a > span {
            font-family: Nunito-Black;
            font-size: 16px;
            color: #666
        }

@media screen and (max-width: 1441px) {
    .main .mainbox .left .download .install {
        width: 449px
    }

    .main .mainbox .left .download .security {
        width: calc(100% - 478px)
    }
}

@media screen and (max-width: 1279px) {
    .main .mainbox .left .download {
        flex-direction: column
    }

        .main .mainbox .left .download .install {
            width: 100%;
            margin-top: 16px
        }

        .main .mainbox .left .download .security {
            width: 100%
        }
}

@media screen and (max-width: 1181px) {
    .main .mainbox .left .download .installBtn {
        display: flex
    }

    .main .mainbox .left .download .install > li + li {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .main .mainbox .left .download .install > li:nth-child(1) > a > span {
        display: none
    }

    .main .mainbox .left .download .install > li:nth-child(1) > a > p {
        background: none
    }

    .main .mainbox .left .download .installBtn {
        flex-direction: column
    }

        .main .mainbox .left .download .installBtn > a {
            width: 100%
        }

            .main .mainbox .left .download .installBtn > a + a {
                margin-top: 16px
            }
}

.main .mainbox .left .swiper_con {
    position: relative;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
    border-radius: 16px;
    padding: 20px;
    background: #fff
}

    .main .mainbox .left .swiper_con .preview1 {
        margin-top: 16px;
        position: relative
    }

        .main .mainbox .left .swiper_con .preview1 .swiper-wrapper .swiper-slide {
            width: auto;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            overflow: hidden
        }

            .main .mainbox .left .swiper_con .preview1 .swiper-wrapper .swiper-slide > img {
                height: 100%;
                object-position: center;
                object-fit: cover
            }

    .main .mainbox .left .swiper_con .sw_btn {
        width: calc(100% - 20px);
        position: absolute;
        top: calc(50% - 25px);
        left: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 99
    }

        .main .mainbox .left .swiper_con .sw_btn .swiper-button-p1, .main .mainbox .left .swiper_con .sw_btn .swiper-button-n1 {
            width: 50px;
            height: 50px;
            background: #fff;
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 99;
            cursor: pointer;
            box-shadow: 0px 2px 10px 0px rgba(0,0,0,.2)
        }

            .main .mainbox .left .swiper_con .sw_btn .swiper-button-p1 > .iconfont, .main .mainbox .left .swiper_con .sw_btn .swiper-button-n1 > .iconfont {
                color: #333;
                font-size: 12px
            }

            .main .mainbox .left .swiper_con .sw_btn .swiper-button-p1:focus, .main .mainbox .left .swiper_con .sw_btn .swiper-button-n1:focus {
                outline: none
            }

@media screen and (min-width: 1181px) {
    .main .mainbox .left .swiper_con .sw_btn .swiper-button-p1:hover .iconfont, .main .mainbox .left .swiper_con .sw_btn .swiper-button-n1:hover .iconfont {
        color: #6464f1
    }
}

@media screen and (max-width: 1023px) {
    .main .mainbox .left .swiper_con {
        margin-top: 20px
    }
}

.main .mainbox .left .infoT {
    display: flex;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px
}

    .main .mainbox .left .infoT .info {
        width: calc(100% - 356px)
    }

        .main .mainbox .left .infoT .info .infoL {
            display: flex;
            align-items: center
        }

            .main .mainbox .left .infoT .info .infoL .thumb {
                width: 130px;
                height: 130px;
                border-radius: 16px;
                margin-right: 16px;
                overflow: hidden
            }

                .main .mainbox .left .infoT .info .infoL .thumb img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center
                }

            .main .mainbox .left .infoT .info .infoL dl {
                width: calc(100% - 146px)
            }

                .main .mainbox .left .infoT .info .infoL dl dt {
                    font-size: 24px;
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical
                }

                .main .mainbox .left .infoT .info .infoL dl dd {
                    display: flex;
                    align-items: center;
                    margin-top: 10px;
                    height: 31px;
                    overflow: hidden;
                    flex-wrap: wrap
                }

                    .main .mainbox .left .infoT .info .infoL dl dd p {
                        margin-top: 3px;
                        background: #ececff;
                        padding: 4px 8px;
                        border-radius: 16px;
                        color: #6464f1;
                        margin-right: 8px
                    }

                    .main .mainbox .left .infoT .info .infoL dl dd + dd {
                        margin-top: 0
                    }

                        .main .mainbox .left .infoT .info .infoL dl dd + dd p {
                            background: rgba(0,0,0,0);
                            margin: 0;
                            padding: 0
                        }

                        .main .mainbox .left .infoT .info .infoL dl dd + dd span {
                            font-size: 12px;
                            color: #999;
                            padding-top: 5px
                        }

        .main .mainbox .left .infoT .info .platform {
            margin-top: 16px;
            display: flex;
            flex-wrap: wrap;
            background: #f8f8f8;
            border-radius: 8px;
            border: 1px solid #eff4f8;
            padding: 10px 19px
        }

            .main .mainbox .left .infoT .info .platform > li {
                width: 100%;
                display: flex;
                justify-content: space-between
            }

                .main .mainbox .left .infoT .info .platform > li > p {
                    width: 110px;
                    font-weight: 600;
                    display: flex;
                    align-items: center
                }

                    .main .mainbox .left .infoT .info .platform > li > p .iconfont {
                        font-size: 22px;
                        margin-right: 12px;
                        font-weight: 400;
                        color: #6464f1
                    }

                .main .mainbox .left .infoT .info .platform > li span {
                    padding: 10px 16px;
                    display: flex;
                    width: calc(100% - 150px);
                    color: #666;
                    font-size: 12px
                }

    .main .mainbox .left .infoT .ad {
        width: 336px
    }

@media screen and (max-width: 767px) {
    .main .mainbox .left .infoT {
        flex-direction: column
    }

        .main .mainbox .left .infoT .info {
            width: 100%
        }

        .main .mainbox .left .infoT .ad {
            width: 100%
        }
}

.main .mainbox .left .info h1 {
    font-size: 32px;
    line-height: 40px
}

.main .mainbox .left .info .content p {
    margin: 16px 0;
    font-size: 15px;
    color: #666;
    line-height: 24px;
    font-family: Montserrat !important
}

.main .mainbox .left .info .content img {
    display: flex;
    margin: 16px auto;
    max-width: 100%
}

.main .mainbox .right {
    width: 338px
}

    .main .mainbox .right .ad {
        margin-top: 0
    }

    .main .mainbox .right .introduction {
        margin: 24px 0
    }

        .main .mainbox .right .introduction p {
            margin-top: 10px;
            background: #f9f9f9;
            border-radius: 16px;
            border: 1px solid #d5e2cd;
            padding: 16px;
            font-weight: 400;
            font-size: 16px;
            color: #333;
            line-height: 24px
        }

    .main .mainbox .right .adx {
        position: sticky;
        top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

        .main .mainbox .right .adx p {
            font-size: 12px;
            color: #ccc;
            font-family: Fredoka-Regular
        }

    .main .mainbox .right h2 {
        font-size: 24px
    }

    .main .mainbox .right .featured .featuredList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

        .main .mainbox .right .featured .featuredList li {
            width: 100%;
            margin-top: 20px
        }

            .main .mainbox .right .featured .featuredList li a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                transition: all .3s;
                background: #fff;
                overflow: hidden;
                border-radius: 16px;
                padding-right: 16px
            }

                .main .mainbox .right .featured .featuredList li a .thumb {
                    width: 113px;
                    height: 113px;
                    margin-right: 16px;
                    border-radius: 16px 0px 0px 16px;
                    overflow: hidden
                }

                    .main .mainbox .right .featured .featuredList li a .thumb img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center
                    }

                .main .mainbox .right .featured .featuredList li a dl {
                    width: calc(100% - 129px)
                }

                    .main .mainbox .right .featured .featuredList li a dl dt {
                        display: inline-block;
                        background: #ececff;
                        border-radius: 13px;
                        padding: 4px 10px;
                        color: #6464f1;
                        line-height: 17px
                    }

                    .main .mainbox .right .featured .featuredList li a dl dd {
                        margin-top: 8px;
                        font-weight: 600;
                        font-size: 14px;
                        color: #333;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical
                    }

@media screen and (min-width: 1181px) {
    .main .mainbox .right .featured .featuredList li a:hover dl dd {
        text-decoration: underline
    }
}

.main .mainbox .right .popular {
    margin-bottom: 20px
}

    .main .mainbox .right .popular li {
        width: 100%;
        margin-top: 16px
    }

        .main .mainbox .right .popular li a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all .3s;
            background: #fff;
            overflow: hidden;
            border-radius: 16px;
            padding-right: 16px
        }

            .main .mainbox .right .popular li a .thumb {
                width: 113px;
                height: 113px;
                margin-right: 16px;
                border-radius: 16px 0px 0px 16px;
                overflow: hidden
            }

                .main .mainbox .right .popular li a .thumb img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center
                }

            .main .mainbox .right .popular li a dl {
                width: calc(100% - 129px)
            }

                .main .mainbox .right .popular li a dl dt {
                    display: inline-block;
                    background: #ececff;
                    border-radius: 13px;
                    padding: 4px 10px;
                    color: #6464f1;
                    line-height: 17px
                }

                .main .mainbox .right .popular li a dl dd {
                    margin-top: 8px;
                    font-weight: 600;
                    font-size: 14px;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical
                }

                    .main .mainbox .right .popular li a dl dd + dd {
                        display: flex;
                        align-items: center;
                        margin-top: 0
                    }

                        .main .mainbox .right .popular li a dl dd + dd span {
                            font-size: 12px;
                            color: #999;
                            padding-top: 5px
                        }

@media screen and (min-width: 1181px) {
    .main .mainbox .right .popular li a:hover dl dd:nth-child(2) {
        text-decoration: underline
    }
}

@media screen and (max-width: 1023px) {
    .main .mainbox {
        margin-top: 0
    }

        .main .mainbox .left {
            width: 100%
        }

        .main .mainbox .right {
            display: none
        }
}

.main .infoBox {
    display: flex;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
    border-radius: 16px;
    padding: 20px
}

    .main .infoBox .infoT {
        width: calc(100% - 300px);
        display: flex;
        justify-content: space-between
    }

        .main .infoBox .infoT .info {
            width: calc(100% - 356px)
        }

            .main .infoBox .infoT .info .infoL {
                display: flex;
                align-items: center
            }

                .main .infoBox .infoT .info .infoL .thumb {
                    width: 130px;
                    height: 130px;
                    border-radius: 16px;
                    margin-right: 16px;
                    overflow: hidden
                }

                    .main .infoBox .infoT .info .infoL .thumb img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center
                    }

                .main .infoBox .infoT .info .infoL dl {
                    width: calc(100% - 146px)
                }

                    .main .infoBox .infoT .info .infoL dl dt {
                        font-size: 24px;
                        font-weight: 600;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical
                    }

                    .main .infoBox .infoT .info .infoL dl dd {
                        display: flex;
                        align-items: center;
                        margin-top: 10px;
                        height: 31px;
                        overflow: hidden;
                        flex-wrap: wrap
                    }

                        .main .infoBox .infoT .info .infoL dl dd p {
                            margin-top: 3px;
                            background: #ececff;
                            padding: 4px 8px;
                            border-radius: 16px;
                            color: #6464f1;
                            margin-right: 8px
                        }

                        .main .infoBox .infoT .info .infoL dl dd + dd {
                            margin-top: 0
                        }

                            .main .infoBox .infoT .info .infoL dl dd + dd p {
                                background: rgba(0,0,0,0);
                                margin: 0;
                                padding: 0
                            }

                            .main .infoBox .infoT .info .infoL dl dd + dd span {
                                font-size: 12px;
                                color: #999;
                                padding-top: 5px
                            }

            .main .infoBox .infoT .info .platform {
                margin-top: 16px;
                display: flex;
                flex-wrap: wrap;
                background: #f8f8f8;
                border-radius: 8px;
                border: 1px solid #eff4f8;
                padding: 10px 19px
            }

                .main .infoBox .infoT .info .platform > li {
                    width: 100%;
                    display: flex;
                    justify-content: space-between
                }

                    .main .infoBox .infoT .info .platform > li > p {
                        width: 110px;
                        font-weight: 600;
                        display: flex;
                        align-items: center
                    }

                        .main .infoBox .infoT .info .platform > li > p .iconfont {
                            font-size: 22px;
                            margin-right: 12px;
                            font-weight: 400;
                            color: #6464f1
                        }

                    .main .infoBox .infoT .info .platform > li span {
                        padding: 10px 16px;
                        display: flex;
                        width: calc(100% - 150px);
                        color: #666;
                        font-size: 12px
                    }

        .main .infoBox .infoT .ad {
            width: 336px
        }

    .main .infoBox .tag {
        height: 308px;
        overflow: hidden;
        width: 280px
    }

        .main .infoBox .tag .tagList {
            display: flex;
            flex-wrap: wrap
        }

            .main .infoBox .tag .tagList li {
                margin: 16px 8px 0 0
            }

                .main .infoBox .tag .tagList li a {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #fff;
                    border-radius: 8px;
                    border: 1px solid #eff4f8;
                    padding: 11px 10px;
                    color: #666;
                    font-size: 16px;
                    font-weight: 600;
                    transition: all .3s
                }

@media screen and (min-width: 1181px) {
    .main .infoBox .tag .tagList li a:hover {
        background: #6464f1;
        color: #fff
    }
}

@media screen and (max-width: 1100px) {
    .main .infoBox {
        flex-direction: column
    }

        .main .infoBox .infoT {
            width: 100%
        }

        .main .infoBox .tag {
            width: 100%;
            margin-top: 16px;
            height: auto;
            overflow: visible
        }
}

@media screen and (max-width: 767px) {
    .main .infoBox .infoT {
        flex-direction: column
    }

        .main .infoBox .infoT .info {
            width: 100%
        }

        .main .infoBox .infoT .ad {
            width: 100%
        }
}

.main .top {
    position: relative;
    margin: 20px 0
}

    .main .top .swiper {
        width: calc(100% - 134px);
        margin: 0 auto
    }

        .main .top .swiper .swiper-slide {
            width: 90px;
            margin-right: 32px
        }

            .main .top .swiper .swiper-slide a {
                width: 100%;
                transition: all .3s
            }

                .main .top .swiper .swiper-slide a .thumb {
                    width: 90px;
                    height: 90px;
                    border-radius: 20px;
                    overflow: hidden
                }

                    .main .top .swiper .swiper-slide a .thumb img {
                        width: 100%;
                        height: 100%;
                        object-position: center;
                        object-fit: cover
                    }

                .main .top .swiper .swiper-slide a dl dt {
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    font-size: 16px;
                    color: #333;
                    margin-top: 10px;
                    font-weight: 600
                }

                .main .top .swiper .swiper-slide a dl dd {
                    display: none;
                    color: #999;
                    font-size: 12px;
                    margin-top: 9px
                }

                    .main .top .swiper .swiper-slide a dl dd .iconfont {
                        color: #ffbb32;
                        font-size: 12px;
                        margin-right: 5px
                    }

@media screen and (min-width: 1181px) {
    .main .top .swiper .swiper-slide a:hover dl dt {
        text-decoration: underline
    }
}

.main .top .swiper-top-p1, .main .top .swiper-top-n1, .main .top .moreAll {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #f9fafb;
    border-radius: 28px;
    top: calc(50% - 25px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    cursor: pointer
}

    .main .top .swiper-top-p1 > .iconfont, .main .top .swiper-top-n1 > .iconfont, .main .top .moreAll > .iconfont {
        color: #999;
        font-size: 14px
    }

    .main .top .swiper-top-p1:focus, .main .top .swiper-top-n1:focus, .main .top .moreAll:focus {
        outline: none
    }

@media screen and (min-width: 1181px) {
    .main .top .swiper-top-p1:hover, .main .top .swiper-top-n1:hover, .main .top .moreAll:hover {
        background: #f2f9ff
    }

        .main .top .swiper-top-p1:hover .iconfont, .main .top .swiper-top-n1:hover .iconfont, .main .top .moreAll:hover .iconfont {
            color: #6464f1
        }
}

.main .top .swiper-top-p1 {
    left: 0
}

.main .top .swiper-top-n1, .main .top .moreAll {
    right: 0
}

.main .top .moreAll {
    display: none;
    background: #6464f1;
    color: #fff
}

    .main .top .moreAll .iconfont {
        color: #fff
    }

@media screen and (max-width: 970px) {
    .main .top .moreAll {
        display: flex;
        opacity: 0;
        pointer-events: none
    }

        .main .top .moreAll.visible {
            opacity: 1;
            pointer-events: auto
        }

    .main .top .swiper {
        width: 100%
    }

        .main .top .swiper .swiper-slide {
            width: 188px;
            margin-right: 10px
        }

            .main .top .swiper .swiper-slide a {
                background: #f9fafb;
                border-radius: 20px;
                display: flex;
                align-items: center
            }

                .main .top .swiper .swiper-slide a .thumb {
                    border-radius: 20px 0px 0px 20px;
                    margin-right: 10px
                }

                .main .top .swiper .swiper-slide a dl {
                    width: calc(100% - 88px)
                }

                    .main .top .swiper .swiper-slide a dl dt {
                        text-align: start
                    }

                    .main .top .swiper .swiper-slide a dl dd {
                        display: flex;
                        align-items: center
                    }

    .main .top .swiper-top-n1, .main .top .swiper-top-p1 {
        display: none
    }
}

.main .more {
    max-width: 400px;
    width: 100%;
    height: 50px;
    background: #fff;
    border-radius: 16px;
    border: 2px solid #d5e2cd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 18px;
    color: #6464f1;
    transition: all .3s;
    margin: 24px auto
}

@media screen and (min-width: 1181px) {
    .main .more:hover {
        background: #ecf2e8
    }
}

.main .relax {
    position: relative;
    display: flex;
    justify-content: space-between
}

    .main .relax .relaxBox {
        width: 616px;
        background: #6464f1;
        border-radius: 16px 0px 0px 16px;
        padding: 24px
    }

        .main .relax .relaxBox .releaxT h3 {
            font-size: 32px;
            color: #fff;
            line-height: 40px
        }

        .main .relax .relaxBox .releaxT p {
            font-size: 16px;
            color: #fff;
            line-height: 20px;
            font-weight: 400;
            margin-top: 16px
        }

        .main .relax .relaxBox .releaxB {
            display: flex;
            width: 100%;
            justify-content: space-between;
            margin-top: 16px
        }

            .main .relax .relaxBox .releaxB .releaxList {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                width: calc(100% - 100px)
            }

                .main .relax .relaxBox .releaxB .releaxList li {
                    width: calc(25% - 10px);
                    height: auto
                }

                    .main .relax .relaxBox .releaxB .releaxList li a {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        padding: 12px;
                        background: rgba(255,255,255,.1);
                        border-radius: 12px;
                        transition: all .3s;
                        border: 1px solid rgba(0,0,0,0)
                    }

                        .main .relax .relaxBox .releaxB .releaxList li a img {
                            width: 28px;
                            height: 28px;
                            filter: brightness(0) invert(1)
                        }

                        .main .relax .relaxBox .releaxB .releaxList li a p {
                            color: #fff;
                            font-size: 16px;
                            text-align: center;
                            margin-top: 14px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical
                        }

@media screen and (min-width: 1181px) {
    .main .relax .relaxBox .releaxB .releaxList li a:hover {
        border: 1px solid #fff
    }
}

.main .relax .relaxBox .releaxB .releaxList li:nth-child(n+5) {
    margin-top: 15px
}

.main .relax .relaxBox .releaxB .releaxM {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 80px;
    height: 188px;
    background: rgba(255,255,255,.1);
    border-radius: 12px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 16px
}

    .main .relax .relaxBox .releaxB .releaxM .iconfont {
        color: #fff;
        font-size: 32px;
        margin-bottom: 14px
    }

@media screen and (max-width: 767px) {
    .main .relax .relaxBox {
        padding: 16px
    }

        .main .relax .relaxBox .releaxT h3 {
            font-size: 24px
        }

        .main .relax .relaxBox .releaxT p {
            font-size: 14px
        }

        .main .relax .relaxBox .releaxB {
            flex-direction: column
        }

            .main .relax .relaxBox .releaxB .releaxList {
                width: 100%
            }

                .main .relax .relaxBox .releaxB .releaxList li {
                    width: calc(50% - 10px)
                }

                    .main .relax .relaxBox .releaxB .releaxList li:nth-child(n+3) {
                        margin-top: 15px
                    }

            .main .relax .relaxBox .releaxB .releaxM {
                width: 100%;
                margin-top: 20px;
                height: auto;
                padding: 10px
            }
}

.main .relax .fot {
    width: calc(100% - 616px);
    height: 348px;
    object-fit: cover;
    object-position: top center
}

@media screen and (max-width: 1023px) {
    .main .relax {
        flex-direction: column
    }

        .main .relax .relaxBox {
            width: 100%;
            border-radius: 16px 16px 0 0
        }

        .main .relax .fot {
            width: 100%;
            height: 400px
        }
}

.main .personal .personalList {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

    .main .personal .personalList > li {
        width: calc((100% - 60px)/4);
        display: inline-block;
        position: relative;
        margin-top: 20px;
        margin-right: 20px
    }

        .main .personal .personalList > li > a {
            display: inline-block;
            width: 100%;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
            border-radius: 16px;
            background: #fff;
            transition: all .3s
        }

            .main .personal .personalList > li > a .thumb {
                width: 100%;
                height: 0;
                padding-bottom: 56.75%;
                border-radius: 16px;
                overflow: hidden;
                position: relative
            }

                .main .personal .personalList > li > a .thumb img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center
                }

            .main .personal .personalList > li > a dl {
                padding: 16px
            }

                .main .personal .personalList > li > a dl dt {
                    font-size: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical
                }

                .main .personal .personalList > li > a dl dd {
                    font-size: 14px;
                    color: #666;
                    line-height: 21px;
                    margin-top: 10px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-weight: 400
                }

@media screen and (min-width: 1181px) {
    .main .personal .personalList > li > a:hover dl dt {
        text-decoration: underline
    }
}

.main .personal .personalList > li:nth-child(4n) {
    margin-right: 0
}

@media screen and (max-width: 1024px) {
    .main .personal .personalList > li {
        width: calc(50% - 10px);
        margin-right: 0 !important
    }
}

@media screen and (max-width: 767px) {
    .main .personal .personalList > li {
        width: 100%
    }
}

.main .Games, .main .Picks {
    margin: 24px 0
}

    .main .Games .gamesList, .main .Picks .gamesList {
        display: grid;
        grid-gap: 15px 15px;
        grid-template-columns: repeat(9, calc((100% - 120px) / 9))
    }

        .main .Games .gamesList li a, .main .Picks .gamesList li a {
            transition: all .3s;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            overflow: hidden
        }

            .main .Games .gamesList li a .thumb, .main .Picks .gamesList li a .thumb {
                width: 100%;
                height: 0;
                padding-bottom: 100%;
                border-radius: 16px;
                overflow: hidden;
                position: relative
            }

                .main .Games .gamesList li a .thumb img, .main .Picks .gamesList li a .thumb img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center
                }

            .main .Games .gamesList li a p, .main .Picks .gamesList li a p {
                transition: all .3s;
                position: absolute;
                left: 0;
                width: 100%;
                bottom: -30px;
                background: rgba(100,100,241,.5);
                border-radius: 0px 0px 16px 16px;
                backdrop-filter: blur(10px);
                padding: 6px
            }

                .main .Games .gamesList li a p span, .main .Picks .gamesList li a p span {
                    color: #fff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    width: 100%;
                    text-align: center
                }

@media screen and (min-width: 1181px) {
    .main .Games .gamesList li a:hover p, .main .Picks .gamesList li a:hover p {
        bottom: 0
    }
}

.main .Games .gamesList li:nth-child(1), .main .Picks .gamesList li:nth-child(1) {
    grid-row: 1/3;
    grid-column: 2/4
}

.main .Games .gamesList li:nth-child(2), .main .Picks .gamesList li:nth-child(2) {
    grid-row: 2/4;
    grid-column: 5/7
}

.main .Games .gamesList li:nth-child(3), .main .Picks .gamesList li:nth-child(3) {
    grid-row: 1/3;
    grid-column: 8/10
}

@media screen and (max-width: 1023px) {
    .main .Games .gamesList, .main .Picks .gamesList {
        grid-template-columns: repeat(6, calc((100% - 75px) / 6))
    }

        .main .Games .gamesList li:nth-child(3), .main .Picks .gamesList li:nth-child(3) {
            grid-row: auto;
            grid-column: auto
        }
}

@media screen and (max-width: 767px) {
    .main .Games .gamesList, .main .Picks .gamesList {
        grid-template-columns: repeat(3, calc((100% - 30px) / 3))
    }

        .main .Games .gamesList li:nth-child(2), .main .Picks .gamesList li:nth-child(2) {
            grid-row: 3/5;
            grid-column: 1/3
        }
}

.main .Picks .gamesList {
    margin-top: 16px
}

    .main .Picks .gamesList li:nth-child(1), .main .Picks .gamesList li:nth-child(2), .main .Picks .gamesList li:nth-child(3) {
        grid-row: auto;
        grid-column: auto
    }

.main .listMost {
    margin: 20px 0
}

    .main .listMost .listMain {
        display: flex;
        justify-content: space-between;
        margin-top: 20px
    }

        .main .listMost .listMain .listL {
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
            border-radius: 16px;
            width: 272px
        }

            .main .listMost .listMain .listL .carswiper {
                width: 100%
            }

                .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide {
                    width: 100%
                }

                    .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide a {
                        background: #fff;
                        box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
                        border-radius: 16px 16px 0 0;
                        overflow: hidden;
                        display: flex;
                        width: 100%;
                        height: 272px;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        position: relative
                    }

                        .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide a .thumb {
                            width: 130px;
                            height: 130px;
                            border-radius: 65px;
                            border: 2px solid #fff;
                            overflow: hidden;
                            position: relative;
                            z-index: 3
                        }

                            .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide a .thumb img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                object-position: center
                            }

                        .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide a .lazyBox {
                            width: 100%;
                            height: 100%;
                            object-position: center;
                            object-fit: cover;
                            position: absolute;
                            left: 0;
                            top: 0
                        }

                        .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide a::before {
                            position: absolute;
                            content: "";
                            height: 100%;
                            width: 100%;
                            top: 0;
                            left: 0;
                            backdrop-filter: blur(10px);
                            background-color: rgba(0,0,0,.3);
                            z-index: 1
                        }

                    .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide dl {
                        position: relative;
                        z-index: 3
                    }

                        .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide dl dt {
                            text-align: center;
                            color: #fff;
                            font-size: 16px;
                            margin-top: 12px
                        }

                        .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide dl dd {
                            display: flex;
                            align-items: center
                        }

                            .main .listMost .listMain .listL .carswiper .swiper .swiper-wrapper .swiper-slide dl dd span {
                                color: #fff;
                                font-size: 12px;
                                font-weight: 300;
                                padding-top: 6px
                            }

                .main .listMost .listMain .listL .carswiper .swiper-pagination-bullet {
                    background: rgba(255,255,255,.5)
                }

                .main .listMost .listMain .listL .carswiper .swiper-pagination-bullet-active {
                    background: #fff !important
                }

            .main .listMost .listMain .listL .thumbs {
                width: 100%;
                background: #fff;
                border-radius: 0 0 16px 16px;
                padding: 12px 16px
            }

                .main .listMost .listMain .listL .thumbs .swiper-wrapper {
                    display: flex;
                    justify-content: space-between
                }

                    .main .listMost .listMain .listL .thumbs .swiper-wrapper .swiper-slide {
                        border-radius: 12px;
                        border: 2px solid rgba(0,0,0,0);
                        overflow: hidden;
                        width: 48px;
                        height: 48px
                    }

                        .main .listMost .listMain .listL .thumbs .swiper-wrapper .swiper-slide > img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            object-position: center
                        }

                    .main .listMost .listMain .listL .thumbs .swiper-wrapper .swiper-slide-thumb-active {
                        border: 2px solid #6464f1
                    }

@media screen and (max-width: 767px) {
    .main .listMost .listMain .listL .thumbs {
        width: 100%
    }
}

.main .listMost .listMain .listR {
    height: 344px;
    width: calc(100% - 292px);
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
    border-radius: 16px;
    padding: 20px 10px 20px 20px
}

    .main .listMost .listMain .listR .listRBox {
        overflow-y: scroll;
        width: 100%;
        height: 100%
    }

        .main .listMost .listMain .listR .listRBox::-webkit-scrollbar {
            margin-right: 10px;
            width: 4px;
            height: 10px;
            border-radius: 10px;
            overflow: hidden;
            background: #eff4f8
        }

        .main .listMost .listMain .listR .listRBox::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #b5b5ff
        }

    .main .listMost .listMain .listR .aList {
        height: 100%;
        justify-content: space-between;
        display: flex;
        flex-wrap: wrap
    }

        .main .listMost .listMain .listR .aList li {
            width: calc(33.3% - 10px)
        }

            .main .listMost .listMain .listR .aList li a {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative
            }

                .main .listMost .listMain .listR .aList li a .thumb {
                    width: 88px;
                    height: 88px;
                    border-radius: 16px;
                    overflow: hidden
                }

                    .main .listMost .listMain .listR .aList li a .thumb img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center
                    }

                .main .listMost .listMain .listR .aList li a dl {
                    width: calc(100% - 104px)
                }

                    .main .listMost .listMain .listR .aList li a dl dt {
                        color: #333;
                        font-size: 16px;
                        margin-top: 12px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical
                    }

                    .main .listMost .listMain .listR .aList li a dl dd {
                        display: flex;
                        align-items: center
                    }

                        .main .listMost .listMain .listR .aList li a dl dd span {
                            color: #666;
                            font-size: 12px;
                            font-weight: 300;
                            padding-top: 6px
                        }

                .main .listMost .listMain .listR .aList li a + a {
                    margin-top: 20px
                }

            .main .listMost .listMain .listR .aList li .layui-rate {
                overflow-y: hidden
            }

@media screen and (max-width: 1046px) {
    .main .listMost .listMain .listR .listRBox {
        padding-top: 0;
        overflow-y: hidden;
        overflow-x: scroll
    }

        .main .listMost .listMain .listR .listRBox ul {
            justify-content: start;
            width: 100%
        }

            .main .listMost .listMain .listR .listRBox ul li {
                display: flex;
                width: auto
            }

                .main .listMost .listMain .listR .listRBox ul li a {
                    width: 230px;
                    margin-top: 0 !important
                }

                .main .listMost .listMain .listR .listRBox ul li + li {
                    margin-top: 20px
                }

        .main .listMost .listMain .listR .listRBox::-webkit-scrollbar {
            margin-right: 10px;
            width: 0px;
            height: 0px;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(0,0,0,0)
        }

        .main .listMost .listMain .listR .listRBox::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0,0,0,0)
        }
}

@media screen and (max-width: 767px) {
    .main .listMost .listMain {
        flex-direction: column
    }

        .main .listMost .listMain .listL {
            width: 100%
        }

            .main .listMost .listMain .listL .thumbs .swiper-wrapper {
                justify-content: center
            }

        .main .listMost .listMain .listR {
            width: 100%;
            margin-top: 16px
        }
}

.main .searchMain .searchList {
    display: flex;
    flex-wrap: wrap
}

    .main .searchMain .searchList li {
        width: 100%;
        margin-top: 16px
    }

        .main .searchMain .searchList li a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all .3s;
            padding: 16px;
            background: #f9fafb;
            border-radius: 16px
        }

            .main .searchMain .searchList li a .thumb {
                width: 120px;
                height: 120px;
                border-radius: 20px;
                border: 2px solid #fff;
                margin-right: 12px;
                overflow: hidden
            }

                .main .searchMain .searchList li a .thumb img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center
                }

            .main .searchMain .searchList li a dl {
                width: calc(100% - 234px)
            }

                .main .searchMain .searchList li a dl dt {
                    font-size: 16px;
                    color: #333;
                    line-height: 20px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical
                }

                .main .searchMain .searchList li a dl dd {
                    font-weight: 500;
                    font-size: 14px;
                    color: #666;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    display: flex;
                    align-items: center
                }

                    .main .searchMain .searchList li a dl dd span {
                        padding-top: 7px;
                        font-size: 12px;
                        color: #999
                    }

                    .main .searchMain .searchList li a dl dd + dd {
                        margin-top: 10px
                    }

            .main .searchMain .searchList li a small {
                transition: all .3s;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 110px;
                height: 40px;
                background: #fff;
                border-radius: 20px;
                border: 2px solid #ebf5ff;
                color: #6464f1;
                font-size: 16px;
                font-weight: 600
            }

@media screen and (min-width: 1181px) {
    .main .searchMain .searchList li a:hover {
        background: #f2f9ff
    }

        .main .searchMain .searchList li a:hover small {
            background: #6464f1;
            color: #fff
        }
}

@media screen and (max-width: 767px) {
    .main .searchMain .searchList li a .thumb {
        width: 78px;
        height: 78px
    }

    .main .searchMain .searchList li a dl {
        width: calc(100% - 180px)
    }

        .main .searchMain .searchList li a dl dd + dd {
            margin-top: 6px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical
        }

    .main .searchMain .searchList li a small {
        margin-left: 10px;
        width: 80px
    }
}

.main .searchMain .nosearch {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center
}

    .main .searchMain .nosearch > img {
        width: 300px;
        height: 170px
    }

    .main .searchMain .nosearch h1 {
        font-weight: 800;
        font-size: 24px;
        color: #333;
        margin: 24px 0
    }

    .main .searchMain .nosearch > p {
        font-size: 16px;
        color: #666;
        margin-top: 14px
    }

.main .searchMain .searchArticle {
    margin-top: 16px
}

    .main .searchMain .searchArticle h2 {
        margin-bottom: 16px
    }

    .main .searchMain .searchArticle .coolList {
        margin-top: 20px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

        .main .searchMain .searchArticle .coolList > li {
            width: calc(25% - 10px);
            display: inline-block;
            position: relative
        }

            .main .searchMain .searchArticle .coolList > li > a {
                display: inline-block;
                width: 100%;
                box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
                border-radius: 16px;
                background: #fff;
                transition: all .3s
            }

                .main .searchMain .searchArticle .coolList > li > a .thumb {
                    width: 100%;
                    height: 0;
                    padding-bottom: 56.75%;
                    border-radius: 16px;
                    overflow: hidden;
                    position: relative
                }

                    .main .searchMain .searchArticle .coolList > li > a .thumb img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center
                    }

                .main .searchMain .searchArticle .coolList > li > a dl {
                    padding: 16px
                }

                    .main .searchMain .searchArticle .coolList > li > a dl dt {
                        font-size: 16px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical
                    }

                    .main .searchMain .searchArticle .coolList > li > a dl dd {
                        font-size: 14px;
                        color: #666;
                        line-height: 21px;
                        margin-top: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        font-weight: 400
                    }

@media screen and (min-width: 1181px) {
    .main .searchMain .searchArticle .coolList > li > a:hover dl dt {
        text-decoration: underline
    }
}

@media screen and (max-width: 1024px) {
    .main .searchMain .searchArticle .coolList > li {
        width: calc(50% - 10px)
    }

        .main .searchMain .searchArticle .coolList > li:nth-child(n+3) {
            margin-top: 20px
        }
}

@media screen and (max-width: 767px) {
    .main .searchMain .searchArticle .coolList > li {
        width: 100%
    }

        .main .searchMain .searchArticle .coolList > li + li {
            margin-top: 16px
        }
}

.main .searchMain .searchArticle .gamesList {
    display: grid;
    grid-gap: 15px 15px;
    grid-template-columns: repeat(9, calc((100% - 120px) / 9))
}

    .main .searchMain .searchArticle .gamesList li a {
        transition: all .3s;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 16px;
        overflow: hidden
    }

        .main .searchMain .searchArticle .gamesList li a .thumb {
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            border-radius: 16px;
            overflow: hidden;
            position: relative
        }

            .main .searchMain .searchArticle .gamesList li a .thumb img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center
            }

        .main .searchMain .searchArticle .gamesList li a p {
            transition: all .3s;
            position: absolute;
            left: 0;
            width: 100%;
            bottom: -30px;
            background: rgba(100,100,241,.5);
            border-radius: 0px 0px 16px 16px;
            backdrop-filter: blur(10px);
            padding: 6px
        }

            .main .searchMain .searchArticle .gamesList li a p span {
                color: #fff;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                width: 100%;
                text-align: center
            }

@media screen and (min-width: 1181px) {
    .main .searchMain .searchArticle .gamesList li a:hover p {
        bottom: 0
    }
}

@media screen and (max-width: 1023px) {
    .main .searchMain .searchArticle .gamesList {
        grid-template-columns: repeat(6, calc((100% - 75px) / 6))
    }
}

@media screen and (max-width: 767px) {
    .main .searchMain .searchArticle .gamesList {
        grid-template-columns: repeat(3, calc((100% - 30px) / 3))
    }
}

.main .lateMain {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin: 24px 0
}

    .main .lateMain .lateA {
        width: 210px;
        background: #f9f9f9;
        border-radius: 16px;
        border: 1px solid #d5e2cd;
        padding: 12px
    }

        .main .lateMain .lateA nav {
            display: flex;
            flex-direction: column
        }

            .main .lateMain .lateA nav a {
                background: rgba(0,0,0,0);
                border-radius: 16px;
                padding: 12px 16px;
                color: #333;
                font-weight: 600;
                transition: all .3s
            }

                .main .lateMain .lateA nav a.active {
                    color: #6464f1;
                    background: #ecf2e8
                }

@media screen and (min-width: 1181px) {
    .main .lateMain .lateA nav a:hover {
        color: #6464f1;
        background: #ecf2e8
    }
}

.main .lateMain .lateB {
    width: calc(100% - 230px)
}

    .main .lateMain .lateB .newList {
        display: grid;
        grid-gap: 24px 24px;
        grid-template-columns: repeat(1, 100%);
        margin-bottom: 16px
    }

        .main .lateMain .lateB .newList > li {
            width: 100%
        }

            .main .lateMain .lateB .newList > li > a {
                width: 100%;
                display: flex;
                align-items: center;
                transition: all .3s
            }

                .main .lateMain .lateB .newList > li > a .thumb {
                    width: 25%;
                    height: 0;
                    padding-bottom: 14%;
                    position: relative;
                    overflow: hidden;
                    border-radius: 16px;
                    margin-right: 12px
                }

                    .main .lateMain .lateB .newList > li > a .thumb > img {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center
                    }

                .main .lateMain .lateB .newList > li > a > dl {
                    width: calc(75% - 12px)
                }

                    .main .lateMain .lateB .newList > li > a > dl > dt {
                        font-size: 14px;
                        font-weight: 500;
                        font-size: 14px;
                        color: #999
                    }

                    .main .lateMain .lateB .newList > li > a > dl > dd {
                        margin-top: 6px;
                        font-weight: 600;
                        font-size: 20px;
                        color: #333;
                        line-height: 27px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical
                    }

                        .main .lateMain .lateB .newList > li > a > dl > dd + dd {
                            font-weight: 400;
                            font-size: 16px;
                            color: #666;
                            line-height: 21px
                        }

@media screen and (min-width: 1181px) {
    .main .lateMain .lateB .newList > li > a:hover dl dd:nth-child(2) {
        color: #6464f1;
        text-decoration: underline
    }
}

@media screen and (max-width: 768px) {
    .main .lateMain .lateB .newList > li > a .thumb {
        width: 142px;
        height: 80px
    }

    .main .lateMain .lateB .newList > li > a dl {
        width: calc(100% - 154px)
    }

        .main .lateMain .lateB .newList > li > a dl dd {
            margin-top: 4px;
            font-size: 12px;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical
        }
}

.main .lateMain .lateB .newList .add {
    grid-row: 1/2;
    grid-column: 1/2
}

    .main .lateMain .lateB .newList .add .ad {
        margin: 0
    }

        .main .lateMain .lateB .newList .add .ad p {
            margin-bottom: 0
        }

    .main .lateMain .lateB .newList .add + .add {
        grid-row: 5/6;
        grid-column: 1/2
    }

@media screen and (max-width: 1025px) {
    .main .lateMain .lateA {
        display: none
    }

    .main .lateMain .lateB {
        width: 100%
    }
}

.main .learn {
    margin: 24px 0
}

    .main .learn .learnList {
        display: flex;
        flex-wrap: wrap
    }

        .main .learn .learnList li {
            width: calc((100% - 36px)/3);
            margin-top: 16px;
            margin-right: 18px
        }

            .main .learn .learnList li a {
                display: flex;
                align-items: center;
                justify-content: space-between;
                transition: all .3s
            }

                .main .learn .learnList li a .thumb {
                    width: 166px;
                    height: 94px;
                    border-radius: 16px;
                    position: relative;
                    overflow: hidden;
                    margin-right: 10px;
                    border: 1px solid #d5e2cd
                }

                    .main .learn .learnList li a .thumb img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center
                    }

                .main .learn .learnList li a dl {
                    width: calc(100% - 176px)
                }

                    .main .learn .learnList li a dl dt {
                        font-weight: 500;
                        font-size: 14px;
                        color: #999
                    }

                    .main .learn .learnList li a dl dd {
                        margin-top: 12px;
                        font-weight: 600;
                        font-size: 16px;
                        color: #333;
                        line-height: 24px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical
                    }

@media screen and (min-width: 1181px) {
    .main .learn .learnList li a:hover dl dd {
        color: #6464f1;
        text-decoration: underline
    }
}

.main .learn .learnList li:nth-child(3n) {
    margin-right: 0
}

@media screen and (max-width: 900px) {
    .main .learn .learnList li {
        width: calc((100% - 18px)/2)
    }

        .main .learn .learnList li:nth-child(3n) {
            margin-right: 18px
        }

        .main .learn .learnList li:nth-child(2n) {
            margin-right: 0
        }
}

@media screen and (max-width: 700px) {
    .main .learn .learnList li {
        width: 100%;
        margin-right: 0
    }

        .main .learn .learnList li:nth-child(2n) {
            margin-right: 0
        }
}

@media screen and (max-width: 767px) {
    .main .ad, .main .offer, .main .category, .main .available, .main .list, .main .popularStore, .main .mainbox .left .nameBox, .main .topOffers, .main .mainbox .left .available, .main .paginationList, .main .company, .main .mainbox .left .res, .main .latestNews {
        margin: 16px 0
    }

    .main .list, .main .popularStore, .main .paginationList, .main .topOffers, .main .available, .main .ad, .main .mainname, .main .shopdeal, .main .listbox, .main .company {
        box-shadow: none !important;
        padding: 0 !important
    }
}

.backBox {
    height: 380px;
    position: relative;
    background-image: url("../img/bac.png");
    background-position: top center;
    background-size: auto 100%
}

    .backBox::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,.1);
        backdrop-filter: blur(8px)
    }

    .backBox .container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1
    }

        .backBox .container h1 {
            font-size: 50px;
            color: #fff;
            line-height: 63px;
            position: relative
        }

            .backBox .container h1::before, .backBox .container h1::after {
                content: "";
                position: absolute;
                background-size: 100% 100%
            }

            .backBox .container h1::before {
                background-image: url("../img/titleL.png");
                width: 28px;
                height: 28px;
                left: -28px;
                top: -14px
            }

            .backBox .container h1::after {
                background-image: url("../img/titleR.png");
                width: 58px;
                height: 146px;
                right: -58px;
                top: -14px
            }

        .backBox .container p {
            text-align: center;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,.3);
            padding: 3px 21px;
            color: rgba(255,255,255,.8);
            font-weight: 300;
            margin-top: 45px
        }

@media screen and (max-width: 767px) {
    .backBox {
        height: 200px
    }

        .backBox .container h1 {
            font-size: 24px;
            color: #fff;
            line-height: 30px
        }

            .backBox .container h1::before {
                width: 14px;
                height: 14px;
                left: -14px;
                top: -7px
            }

            .backBox .container h1::after {
                width: 29px;
                height: 70px;
                right: -23px;
                top: -7px
            }

        .backBox .container p {
            margin-top: 24px
        }
}

.explore {
    background: #fff;
    padding: 40px 0
}

    .explore .exploreBox {
        display: flex;
        justify-content: space-between;
        margin-top: 20px
    }

        .explore .exploreBox .exploreL {
            display: inline-block;
            width: 552px;
            height: 362px;
            position: relative
        }

            .explore .exploreBox .exploreL .thumb {
                width: 100%;
                height: 100%;
                border-radius: 16px;
                overflow: hidden
            }

                .explore .exploreBox .exploreL .thumb img {
                    transition: all .3s;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center
                }

            .explore .exploreBox .exploreL p {
                position: absolute;
                left: 0;
                width: 100%;
                bottom: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0,0,0,.5);
                border-radius: 0px 0px 16px 16px;
                padding: 16px
            }

                .explore .exploreBox .exploreL p img {
                    width: 20px;
                    height: 20px;
                    filter: brightness(0) invert(1);
                    margin-right: 8px
                }

                .explore .exploreBox .exploreL p span {
                    max-width: calc(100% - 28px);
                    color: #fff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical
                }

@media screen and (min-width: 1181px) {
    .explore .exploreBox .exploreL:hover .thumb img {
        transform: scale(1.1)
    }
}

.explore .exploreBox .exploreList {
    width: calc(100% - 572px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

    .explore .exploreBox .exploreList > li {
        width: calc(50% - 10px);
        height: 172px;
        display: inline-block;
        position: relative
    }

        .explore .exploreBox .exploreList > li > a {
            height: 100%;
            width: 100%
        }

            .explore .exploreBox .exploreList > li > a .thumb {
                width: 100%;
                height: 100%;
                border-radius: 16px;
                overflow: hidden
            }

                .explore .exploreBox .exploreList > li > a .thumb img {
                    transition: all .3s;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center
                }

            .explore .exploreBox .exploreList > li > a p {
                position: absolute;
                left: 0;
                width: 100%;
                bottom: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0,0,0,.5);
                border-radius: 0px 0px 16px 16px;
                padding: 16px
            }

                .explore .exploreBox .exploreList > li > a p img {
                    width: 20px;
                    height: 20px;
                    filter: brightness(0) invert(1);
                    margin-right: 8px
                }

                .explore .exploreBox .exploreList > li > a p span {
                    max-width: calc(100% - 28px);
                    color: #fff;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical
                }

@media screen and (min-width: 1181px) {
    .explore .exploreBox .exploreList > li > a:hover .thumb img {
        transform: scale(1.1)
    }
}

.explore .exploreBox .exploreList > li:nth-child(n+3) {
    margin-top: 20px
}

@media screen and (max-width: 1024px) {
    .explore .exploreBox {
        flex-direction: column
    }

        .explore .exploreBox .exploreL {
            width: 100%
        }

        .explore .exploreBox .exploreList {
            width: 100%
        }

            .explore .exploreBox .exploreList li {
                margin-top: 20px
            }
}

@media screen and (max-width: 767px) {
    .explore .exploreBox .exploreL {
        height: 0;
        padding-bottom: 58%;
        position: relative
    }

        .explore .exploreBox .exploreL p {
            padding: 10px 4px
        }

        .explore .exploreBox .exploreL .thumb {
            position: absolute;
            top: 0;
            left: 0
        }

    .explore .exploreBox .exploreList li {
        height: auto;
        margin-top: 10px !important;
        width: calc(50% - 5px)
    }

        .explore .exploreBox .exploreList li a .thumb {
            height: 0;
            padding-bottom: 58%;
            position: relative
        }

            .explore .exploreBox .exploreList li a .thumb img {
                position: absolute;
                left: 0;
                top: 0
            }

        .explore .exploreBox .exploreList li a p {
            padding: 10px 4px
        }
}

@media screen and (max-width: 767px) {
    .explore {
        padding: 24px 0
    }
}

.trending .trendList {
    margin-top: 20px;
    width: 100%;
    display: grid;
    grid-gap: 20px 20px;
    grid-template-columns: repeat(6, calc((100% - 100px) / 6))
}

    .trending .trendList > li {
        width: 100%;
        display: inline-block;
        position: relative
    }

        .trending .trendList > li > a {
            background: #fff;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            display: flex
        }

@media screen and (min-width: 1181px) {
    .trending .trendList > li > a:hover dl dd {
        text-decoration: underline
    }
}

.trending .trendList > li:nth-child(1) {
    grid-row: 1/7;
    grid-column: 1/5
}

    .trending .trendList > li:nth-child(1) a {
        display: inline-block;
        padding-bottom: 13px;
        background: #fff
    }

        .trending .trendList > li:nth-child(1) a .thumb {
            height: 463px;
            width: 100%;
            border-radius: 16px;
            overflow: hidden
        }

            .trending .trendList > li:nth-child(1) a .thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center
            }

        .trending .trendList > li:nth-child(1) a dl {
            padding: 16px
        }

            .trending .trendList > li:nth-child(1) a dl dt {
                display: inline-block;
                background: #ececff;
                color: #6464f1;
                line-height: 21px;
                padding: 4px 8px;
                border-radius: 15px
            }

            .trending .trendList > li:nth-child(1) a dl dd {
                margin-top: 16px;
                font-size: 32px;
                font-weight: 600;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical
            }

                .trending .trendList > li:nth-child(1) a dl dd + dd {
                    color: #666;
                    font-weight: 400;
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical
                }

.trending .trendList > li + li a {
    align-items: center;
    justify-content: space-between;
    padding-right: 16px
}

    .trending .trendList > li + li a .thumb {
        width: 113px;
        height: 113px;
        border-radius: 16px;
        overflow: hidden
    }

        .trending .trendList > li + li a .thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center
        }

    .trending .trendList > li + li a dl {
        width: calc(100% - 125px)
    }

        .trending .trendList > li + li a dl dt {
            display: inline-block;
            background: #ececff;
            color: #6464f1;
            line-height: 21px;
            padding: 4px 8px;
            border-radius: 15px
        }

        .trending .trendList > li + li a dl dd {
            margin-top: 6px;
            font-size: 14px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical
        }

            .trending .trendList > li + li a dl dd + dd {
                display: none;
                color: #666;
                font-weight: 400;
                font-size: 14px
            }

.trending .trendList > li:nth-child(2) {
    grid-row: 1/2;
    grid-column: 5/7
}

.trending .trendList > li:nth-child(3) {
    grid-row: 2/3;
    grid-column: 5/7
}

.trending .trendList > li:nth-child(4) {
    grid-row: 3/4;
    grid-column: 5/7
}

.trending .trendList > li:nth-child(5) {
    grid-row: 4/5;
    grid-column: 5/7
}

.trending .trendList > li:nth-child(6) {
    grid-row: 5/6;
    grid-column: 5/7
}

@media screen and (max-width: 1024px) {
    .trending .trendList {
        grid-template-columns: repeat(2, calc((100% - 20px) / 2))
    }

        .trending .trendList > li:nth-child(1) a, .trending .trendList > li + li a {
            display: inline-block;
            background: #fff;
            width: 100%;
            height: 100%;
            padding: 0
        }

            .trending .trendList > li:nth-child(1) a .thumb, .trending .trendList > li + li a .thumb {
                height: auto;
                padding-bottom: 56%;
                width: 100%;
                border-radius: 16px;
                overflow: hidden;
                position: relative
            }

                .trending .trendList > li:nth-child(1) a .thumb img, .trending .trendList > li + li a .thumb img {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center
                }

            .trending .trendList > li:nth-child(1) a dl, .trending .trendList > li + li a dl {
                width: 100%;
                padding: 16px
            }

                .trending .trendList > li:nth-child(1) a dl dt, .trending .trendList > li + li a dl dt {
                    display: inline-block;
                    background: #ececff;
                    color: #6464f1;
                    line-height: 21px;
                    padding: 4px 8px;
                    border-radius: 15px
                }

                .trending .trendList > li:nth-child(1) a dl dd, .trending .trendList > li + li a dl dd {
                    margin-top: 8px;
                    font-size: 16px;
                    font-weight: 600;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical
                }

                    .trending .trendList > li:nth-child(1) a dl dd + dd, .trending .trendList > li + li a dl dd + dd {
                        color: #666;
                        font-weight: 400;
                        font-size: 14px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical
                    }

        .trending .trendList > li:nth-child(1), .trending .trendList > li:nth-child(2), .trending .trendList > li:nth-child(3), .trending .trendList > li:nth-child(4), .trending .trendList > li:nth-child(5), .trending .trendList > li:nth-child(6) {
            grid-row: auto;
            grid-column: auto
        }
}

@media screen and (max-width: 767px) {
    .trending .trendList {
        grid-template-columns: repeat(1, 100%);
        grid-gap: 16px 16px;
        margin-top: 12px
    }
}

.cool {
    background: #fff;
    padding: 40px 0
}

    .cool .coolList {
        margin-top: 20px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: stretch
    }

        .cool .coolList > li {
            width: calc(25% - 10px);
            display: inline-block;
            position: relative;
            height: 100%
        }

            .cool .coolList > li > a {
                display: inline-block;
                width: 100%;
                box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
                border-radius: 16px;
                background: #fff;
                transition: all .3s
            }

                .cool .coolList > li > a .thumb {
                    width: 100%;
                    height: 0;
                    padding-bottom: 56.75%;
                    border-radius: 16px;
                    overflow: hidden;
                    position: relative
                }

                    .cool .coolList > li > a .thumb img {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center
                    }

                .cool .coolList > li > a dl {
                    padding: 16px
                }

                    .cool .coolList > li > a dl dt {
                        font-size: 16px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical
                    }

                    .cool .coolList > li > a dl dd {
                        font-size: 14px;
                        color: #666;
                        line-height: 21px;
                        margin-top: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        font-weight: 400
                    }

@media screen and (min-width: 1181px) {
    .cool .coolList > li > a:hover dl dt {
        text-decoration: underline
    }
}

@media screen and (max-width: 1024px) {
    .cool .coolList > li {
        width: calc(50% - 10px)
    }

        .cool .coolList > li:nth-child(n+3) {
            margin-top: 20px
        }
}

@media screen and (max-width: 767px) {
    .cool .coolList > li {
        width: 100%
    }

        .cool .coolList > li + li {
            margin-top: 16px
        }
}

@media screen and (max-width: 767px) {
    .cool {
        padding: 24px 0
    }

        .cool .coolList {
            margin-top: 12px
        }
}

.errorBox {
    min-height: calc(100% - 300px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

    .errorBox > img {
        width: 240px
    }

    .errorBox > h3 {
        font-size: 48px;
        margin: 20px 0
    }

    .errorBox > p {
        color: #666;
        margin-top: 24px;
        font-family: Montserrat-Regular
    }

    .errorBox .can {
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 152px;
        height: 40px;
        background: #6464f1;
        border-radius: 8px;
        color: #fff;
        font-size: 16px
    }

.company {
    margin: 24px 0
}

    .company h2 {
        font-size: 20px;
        text-align: left
    }

    .company h3 {
        font-size: 14px;
        margin: 15px 0
    }

    .company p {
        font-size: .9em;
        margin-bottom: 15px;
        line-height: 1.6em;
        color: #999;
        font-family: Fredoka-Regular
    }

    .company form {
        margin-top: 16px
    }

        .company form .layui-form-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
            position: relative
        }

            .company form .layui-form-item input {
                width: 100%;
                height: 48px;
                background: #fff;
                border-radius: 8px;
                border: 1px solid #e7e7e7;
                color: #9c9fa3;
                outline: none;
                text-indent: 16px
            }

                .company form .layui-form-item input::-webkit-input-placeholder {
                    color: #9c9fa3
                }

            .company form .layui-form-item textarea {
                padding-top: 16px;
                width: 100%;
                background: #fff;
                border-radius: 8px;
                border: 1px solid #e7e7e7;
                color: #9c9fa3;
                outline: none;
                text-indent: 16px;
                resize: none
            }

                .company form .layui-form-item textarea::-webkit-input-placeholder {
                    color: #9c9fa3
                }

        .company form .item {
            display: flex;
            width: 100%;
            justify-content: space-between
        }

            .company form .item > .formItem {
                width: calc(50% - 12px)
            }

@media screen and (max-width: 767px) {
    .company form .item {
        display: inline-block
    }

        .company form .item .formItem {
            width: 100%
        }
}

.company form button {
    outline: none;
    cursor: pointer;
    transition: all .3s;
    width: 95px;
    height: 40px;
    background: #6464f1;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 20px
}

@media screen and (min-width: 1181px) {
    .company form button:hover {
        opacity: .8
    }
}

.extensionBox .extension {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24px
}

    .extensionBox .extension > li {
        width: calc((100% - 80px)/6);
        margin-right: 16px;
        margin-bottom: 16px
    }

        .extensionBox .extension > li > a {
            width: 100%;
            height: 0;
            padding-bottom: 50%;
            border-radius: 8px;
            border: 1px solid #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            overflow: hidden;
            transition: all .3s;
            position: relative
        }

            .extensionBox .extension > li > a > img {
                transition: all .3s;
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                object-position: center;
                object-fit: cover
            }

@media screen and (min-width: 1181px) {
    .extensionBox .extension > li > a:hover > img {
        transform: scale(1.1)
    }
}

.extensionBox .extension > li:nth-child(6n) {
    margin-right: 0
}

@media screen and (max-width: 1180px) {
    .extensionBox .extension > li {
        width: calc((100% - 50px)/6);
        margin-right: 10px
    }
}

@media screen and (max-width: 767px) {
    .extensionBox .extension > li {
        width: calc((100% - 20px)/3)
    }

        .extensionBox .extension > li:nth-child(6n) {
            margin-right: 10px
        }

        .extensionBox .extension > li:nth-child(3n) {
            margin-right: 0
        }
}

.extensionBox .hotoffers .offerList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

    .extensionBox .hotoffers .offerList > li {
        width: calc(50% - 8px);
        margin-bottom: 16px
    }

        .extensionBox .hotoffers .offerList > li > a {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px;
            background: #fff;
            box-shadow: 0px 2px 6px 0px rgba(0,0,0,.1);
            border-radius: 16px;
            transition: all .3s;
            border: 2px solid rgba(0,0,0,0)
        }

            .extensionBox .hotoffers .offerList > li > a .thumb {
                width: 120px;
                height: 120px;
                background: #fff;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px;
                overflow: hidden;
                position: relative
            }

                .extensionBox .hotoffers .offerList > li > a .thumb::before {
                    position: absolute;
                    content: "";
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background: rgba(0,0,0,.03);
                    z-index: 99
                }

                .extensionBox .hotoffers .offerList > li > a .thumb > img {
                    width: 100%
                }

            .extensionBox .hotoffers .offerList > li > a > dl {
                width: calc(100% - 282px)
            }

                .extensionBox .hotoffers .offerList > li > a > dl > dt {
                    display: flex;
                    align-items: center
                }

                    .extensionBox .hotoffers .offerList > li > a > dl > dt > span {
                        color: #04c181;
                        font-size: 12px
                    }

                        .extensionBox .hotoffers .offerList > li > a > dl > dt > span .iconfont {
                            color: #04c181;
                            font-size: 12px
                        }

                    .extensionBox .hotoffers .offerList > li > a > dl > dt > p {
                        color: #000;
                        font-size: 12px
                    }

                .extensionBox .hotoffers .offerList > li > a > dl > dd {
                    margin-top: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-size: 16px;
                    line-height: 23px;
                    font-family: Montserrat-Bold
                }

                    .extensionBox .hotoffers .offerList > li > a > dl > dd > p {
                        display: inline-block;
                        color: #6464f1;
                        font-family: Montserrat-Regular;
                        line-height: 18px;
                        padding: 3px 8px;
                        font-size: 12px;
                        border-radius: 14px;
                        border: 1px solid rgba(255,39,72,.2)
                    }

            .extensionBox .hotoffers .offerList > li > a .you {
                width: 40px;
                height: 40px;
                background: #ff5358;
                border-radius: 20px;
                display: none;
                align-items: center;
                justify-content: center
            }

                .extensionBox .hotoffers .offerList > li > a .you .iconfont {
                    color: #fff
                }

            .extensionBox .hotoffers .offerList > li > a.deal > .dox {
                width: 130px;
                height: 40px;
                background: #ff5358;
                border-radius: 20px;
                color: #fff;
                text-align: center;
                line-height: 40px;
                font-family: Montserrat-Bold
            }

@media screen and (min-width: 1181px) {
    .extensionBox .hotoffers .offerList > li > a.deal:hover {
        border: 2px solid #ececff
    }

        .extensionBox .hotoffers .offerList > li > a.deal:hover .dox {
            opacity: .8
        }
}

.extensionBox .hotoffers .offerList > li > a.code > .dox {
    width: 130px;
    height: 40px;
    position: relative;
    transition: all .25s ease-out;
    background: #ff5358;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-family: Montserrat-Bold
}

    .extensionBox .hotoffers .offerList > li > a.code > .dox > p {
        height: 100%;
        width: calc(100% - 30px);
        background: #6464f1;
        display: flex;
        padding-left: 12px;
        align-items: center;
        justify-content: center;
        border-radius: 20px 0 0 20px;
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        font-family: Montserrat-Bold;
        transition: all .25s ease-out
    }

        .extensionBox .hotoffers .offerList > li > a.code > .dox > p::before {
            border-left: 0 solid rgba(0,0,0,0);
            border-right: 15px solid rgba(0,0,0,0);
            border-bottom: 40px solid #6464f1;
            content: "";
            display: inherit;
            height: 0;
            left: 100%;
            position: absolute;
            top: 0;
            -moz-transition: all .25s ease-out;
            -ms-transition: all .25s ease-out;
            -webkit-transition: all .25s ease-out;
            transition: all .25s ease-out;
            width: 0
        }

    .extensionBox .hotoffers .offerList > li > a.code > .dox > span {
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px dashed #6464f1;
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: flex-end;
        text-align: right;
        padding-right: 10px;
        border-radius: 20px;
        background: #fff;
        color: #6464f1;
        font-family: Montserrat-Bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical
    }

@media screen and (min-width: 1181px) {
    .extensionBox .hotoffers .offerList > li > a.code:hover {
        border: 2px solid #ececff
    }

        .extensionBox .hotoffers .offerList > li > a.code:hover .dox > p {
            width: calc(100% - 35px)
        }
}

@media screen and (max-width: 1279px) {
    .extensionBox .hotoffers .offerList > li > a > dl {
        width: calc(100% - 192px)
    }

    .extensionBox .hotoffers .offerList > li > a.deal .dox, .extensionBox .hotoffers .offerList > li > a.code .dox {
        display: none
    }

    .extensionBox .hotoffers .offerList > li > a .you {
        display: flex
    }
}

@media screen and (max-width: 1023px) {
    .extensionBox .hotoffers .offerList > li > a .thumb {
        width: 110px;
        height: 110px
    }

    .extensionBox .hotoffers .offerList > li > a > dl {
        width: calc(100% - 122px)
    }

    .extensionBox .hotoffers .offerList > li > a .you {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .extensionBox .hotoffers .offerList > li {
        width: 100%
    }
}

footer {
    margin-top: 55px;
    background: #272536;
    padding: 24px 0
}

    footer .container .fotT {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        footer .container .fotT .logo {
            display: flex
        }

            footer .container .fotT .logo img {
                height: 40px
            }

        footer .container .fotT nav {
            width: calc(100% - 298px);
            display: flex;
            justify-content: start;
            margin-top: 4px
        }

            footer .container .fotT nav > a {
                margin-left: 35px;
                color: #fff;
                font-size: 14px
            }

@media screen and (min-width: 1181px) {
    footer .container .fotT nav > a:hover {
        text-decoration: underline
    }
}

footer .container .fotT .language {
    cursor: pointer;
    padding: 10px 12px;
    background: #fff;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    background: #6464f1
}

    footer .container .fotT .language .iconfont {
        font-size: 16px;
        margin-right: 8px;
        color: #fff;
        font-weight: 400
    }

@media screen and (max-width: 767px) {
    footer .container .fotT {
        flex-direction: column;
        align-items: center
    }

        footer .container .fotT nav {
            width: 100%;
            justify-content: space-between;
            margin: 24px 0
        }

            footer .container .fotT nav a {
                margin-left: 0
            }

        footer .container .fotT .language {
            margin-bottom: 24px
        }
}

footer p {
    text-align: center;
    color: #666;
    font-size: 14px
}

.categoryBox {
    z-index: 99;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    display: none;
    justify-content: left
}

    .categoryBox .box {
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        background: #fff;
        width: 290px;
        padding: 20px 20px 40px 20px
    }

        .categoryBox .box .apps {
            height: 50%
        }

            .categoryBox .box .apps .title {
                display: flex;
                align-items: center;
                justify-content: space-between
            }

                .categoryBox .box .apps .title h2 {
                    font-size: 20px;
                    color: #333;
                    line-height: 24px
                }

                .categoryBox .box .apps .title a {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #6464f1
                }

            .categoryBox .box .apps .listNav {
                height: calc(100% - 40px);
                overflow-y: scroll;
                margin-top: 12px;
                display: block;
                background: #fff
            }

                .categoryBox .box .apps .listNav li a {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    padding: 11px 12px;
                    background: #f9fafb;
                    border-radius: 12px
                }

                    .categoryBox .box .apps .listNav li a p {
                        font-size: 16px;
                        color: #333;
                        font-weight: 600
                    }

                        .categoryBox .box .apps .listNav li a p img {
                            width: 20px;
                            margin-right: 6px
                        }

                    .categoryBox .box .apps .listNav li a span {
                        font-size: 14px;
                        color: #666
                    }

@media screen and (min-width: 1181px) {
    .categoryBox .box .apps .listNav li a:hover {
        background: #ebf5ff
    }
}

.categoryBox .box .apps .listNav li + li {
    margin-top: 8px
}

.categoryBox .box .apps + .apps {
    margin-top: 16px
}

.searchBox {
    z-index: 99;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    display: none
}

    .searchBox .box {
        background: #fff;
        width: 100%;
        height: max-content;
        padding: 20px
    }

        .searchBox .box h2 {
            font-weight: 800;
            font-size: 24px;
            text-align: center;
            margin: 27px 0
        }

        .searchBox .box .searchBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 40px;
            background: #f5f5f5;
            border-radius: 16px;
            overflow: hidden;
            transition: all .3s;
            position: relative
        }

            .searchBox .box .searchBtn > input {
                border-radius: 20px;
                width: 100%;
                height: 40px;
                background: #f5f5f5;
                color: #999;
                font-size: 14px;
                text-indent: 16px;
                -webkit-text-fill-color: #999;
                border: none
            }

            .searchBox .box .searchBtn > button {
                background: rgba(0,0,0,0);
                position: absolute;
                width: 20px;
                height: 20px;
                top: 10px;
                right: 10px;
                display: flex;
                align-items: center;
                justify-content: center
            }

                .searchBox .box .searchBtn > button .iconfont {
                    font-size: 16px;
                    color: #999
                }

        .searchBox .box .trend {
            display: flex;
            justify-content: center;
            flex-wrap: wrap
        }

            .searchBox .box .trend li {
                margin: 12px 12px 0 0
            }

                .searchBox .box .trend li a {
                    display: inline-block;
                    background: #f5f5f5;
                    border-radius: 16px;
                    padding: 10px 8px;
                    font-weight: 600;
                    font-size: 16px;
                    color: #666
                }

.emailBox {
    z-index: 99;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    display: none;
    align-items: center;
    justify-content: center
}

    .emailBox .Box .form {
        background: linear-gradient(180deg, #ECECFF 0%, #FFFFFF 14.14%, #FFFFFF 100%);
        box-shadow: 2px 2px 12px 0px #ececff;
        border-radius: 50px;
        border: 2px solid #6464f1;
        padding: 16px;
        position: relative
    }

        .emailBox .Box .form h3 {
            text-align: center;
            font-size: 20px
        }

        .emailBox .Box .form form {
            margin-top: 16px
        }

            .emailBox .Box .form form .layui-form-item {
                display: flex;
                align-items: flex-start;
                margin-bottom: 12px;
                position: relative;
                width: 300px;
                min-height: 44px;
                background: #f9fafb
            }

                .emailBox .Box .form form .layui-form-item input {
                    width: 100%;
                    height: 48px;
                    background: #f9fafb;
                    border-radius: 8px;
                    border: none;
                    color: #999;
                    outline: none;
                    text-indent: 16px
                }

                    .emailBox .Box .form form .layui-form-item input::-webkit-input-placeholder {
                        color: #999
                    }

                .emailBox .Box .form form .layui-form-item span {
                    padding: 16px;
                    font-size: 14px;
                    color: #999;
                    line-height: 16px
                }

            .emailBox .Box .form form button {
                outline: none;
                cursor: pointer;
                transition: all .3s;
                width: 240px;
                height: 50px;
                background: #6464f1;
                font-weight: 600;
                color: #fff;
                border: none;
                border-radius: 20px;
                margin: 16px auto 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px
            }

@media screen and (min-width: 1181px) {
    .emailBox .Box .form form button:hover {
        opacity: .8
    }
}

.emailBox .Box .form::before, .emailBox .Box .form::after {
    position: absolute;
    content: "";
    width: 62px;
    height: 56px;
    background-size: 100% 100%;
    background-image: url("../img/dotL.png");
    top: -10px
}

.emailBox .Box .form::before {
    left: 0
}

.emailBox .Box .form::after {
    right: 0;
    background-image: url("../img/dotR.png")
}

.emailBox .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,.1);
    border-radius: 15px;
    margin: 12px auto
}

    .emailBox .close .iconfont {
        color: #fff;
        font-size: 16px
    }

@media screen and (max-width: 767px) {
    .emailBox {
        top: 50px
    }
}

.languageBox {
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    display: none;
    align-items: center;
    justify-content: center
}

    .languageBox .languageL {
        background: linear-gradient(180deg, #ECECFF 0%, #FFFFFF 26.91%, #FFFFFF 100%);
        box-shadow: 2px 2px 12px 0px #ececff;
        border-radius: 20px;
        border: 2px solid #6464f1;
        width: 332px;
        padding: 16px
    }

        .languageBox .languageL h3 {
            font-size: 20px;
            text-align: center
        }

        .languageBox .languageL .languageList {
            display: flex;
            flex-wrap: wrap;
            margin-top: 6px
        }

            .languageBox .languageL .languageList li {
                width: calc(50% - 10px);
                position: relative;
                padding: 10px 6px 10px 24px;
                font-size: 16px;
                background: #f9fafb;
                border-radius: 12px;
                margin: 8px 10px 0 0;
                font-weight: 600;
                cursor: pointer;
                transition: all .3s
            }

                .languageBox .languageL .languageList li::before {
                    content: "";
                    font-family: iconfont;
                    position: absolute;
                    left: 12px;
                    top: 18px;
                    font-size: 4px;
                    color: #007df4
                }

@media screen and (min-width: 1181px) {
    .languageBox .languageL .languageList li:hover {
        background: #ececff
    }
}

.languageBox .close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,.1);
    border-radius: 15px;
    margin: 12px auto
}

    .languageBox .close .iconfont {
        color: #fff;
        font-size: 16px
    }

@media screen and (max-width: 767px) {
    .languageBox {
        top: 50px
    }
}

.error {
    color: red
}

.top_lea {
    cursor: pointer;
    box-shadow: 0px 2px 6px 0px rgba(0,0,0,.2);
    display: none;
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 25px;
    position: fixed;
    align-items: center;
    justify-content: center;
    right: 15px;
    bottom: 162px;
    z-index: 9999
}

    .top_lea .iconfont {
        color: #666;
        font-size: 18px;
        transform: rotate(-90deg)
    }

#apkBox {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    top: 0;
    left: 0;
    z-index: 999;
    justify-content: center;
    align-items: center
}

    #apkBox .dBox {
        width: 480px;
        height: 202px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 0;
        margin: 0 15px
    }

        #apkBox .dBox > h2 {
            font-size: 20px;
            color: #333;
            font-weight: 600;
            margin-bottom: 30px;
            text-align: center;
            text-transform: none
        }

            #apkBox .dBox > h2 > span {
                font-size: 20px;
                color: #333;
                font-weight: 700
            }

        #apkBox .dBox .Btn > a {
            display: inline-block;
            line-height: 38px;
            text-align: center;
            width: 160px;
            height: 40px;
            background: #fff;
            color: #6464f1;
            border-radius: 10px;
            border: 1px solid #6464f1;
            transition: all .3s
        }

            #apkBox .dBox .Btn > a:hover {
                background: #6464f1;
                color: #fff;
                box-shadow: 0 2px 10px 2px #ececff
            }

            #apkBox .dBox .Btn > a + a {
                background: #6464f1;
                color: #fff;
                margin-left: 15px
            }

    #apkBox.active {
        display: flex
    }
/*# sourceMappingURL=main.css.map */

/* ===== 骨架屏样式 ===== */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0
    }

    100% {
        background-position: 200% 0
    }
}

.skeleton {
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 8px
}

.skeleton-text {
    height: 14px;
    margin: 8px 0;
    border-radius: 4px
}

    .skeleton-text.w60 {
        width: 60%
    }

    .skeleton-text.w80 {
        width: 80%
    }

    .skeleton-text.w40 {
        width: 40%
    }

.skeleton-title {
    height: 20px;
    width: 50%;
    margin: 12px 0;
    border-radius: 4px
}

.skeleton-img {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 12px
}

.skeleton-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%
}

.skeleton-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px
}

.skeleton-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap
}

.skeleton-col {
    flex: 1;
    min-width: 200px
}
/* 首页骨架 */
.skeleton-trending {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

    .skeleton-trending .skeleton-item {
        width: calc(33.33% - 12px);
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        padding: 12px
    }

        .skeleton-trending .skeleton-item .skeleton-img {
            height: 140px;
            margin-bottom: 10px
        }

.skeleton-cool .skeleton-item {
    width: calc(25% - 12px);
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    padding: 12px
}

.skeleton-cool {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

    .skeleton-cool .skeleton-item .skeleton-img {
        height: 120px;
        margin-bottom: 10px
    }
/* 列表页骨架 */
.skeleton-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

    .skeleton-list .skeleton-item {
        width: calc(25% - 15px);
        background: #fff;
        border-radius: 12px;
        overflow: hidden
    }

        .skeleton-list .skeleton-item .skeleton-img {
            height: 160px
        }

        .skeleton-list .skeleton-item .skeleton-body {
            padding: 12px
        }
/* 详情页骨架 */
.skeleton-detail-header {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    margin-bottom: 20px
}

.skeleton-detail-icon {
    width: 130px;
    height: 130px;
    border-radius: 16px;
    flex-shrink: 0
}

.skeleton-detail-info {
    flex: 1
}
/* 游戏列表骨架 */
.skeleton-games {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

    .skeleton-games .skeleton-item {
        width: calc(20% - 14px);
        text-align: center
    }

        .skeleton-games .skeleton-item .skeleton-img {
            height: 80px;
            width: 80px;
            border-radius: 16px;
            margin: 0 auto 8px
        }

@media screen and (max-width:1023px) {
    .skeleton-trending .skeleton-item {
        width: calc(50% - 8px)
    }

    .skeleton-cool .skeleton-item {
        width: calc(50% - 8px)
    }

    .skeleton-list .skeleton-item {
        width: calc(50% - 10px)
    }

    .skeleton-games .skeleton-item {
        width: calc(33.33% - 12px)
    }
}

@media screen and (max-width:767px) {
    .skeleton-trending .skeleton-item {
        width: 100%
    }

    .skeleton-cool .skeleton-item {
        width: calc(50% - 8px)
    }

    .skeleton-list .skeleton-item {
        width: 100%
    }

    .skeleton-games .skeleton-item {
        width: calc(50% - 8px)
    }
}