@import "regular_index";

// @nav_height: 4.375em;
@index_bg_img: url('../img/background/index_main.jpg');


@media screen {

    // iphone 5
    /* iPhone 5 Retina regardless of IOS version */
    @media (device-height : 568px) and (device-width : 320px) and (-webkit-min-device-pixel-ratio: 2) {
        .btn-more {
            width: 8em !important;
        }

        .swiper-scrollbar {
            display: none;
        }

        .members {
            & .members-left-block {
                & .btns {
                    width: 76% !important;
                    margin-left: 16% !important;

                    & .btn-list {
                        float: left;
                    }
                }
            }
        }
    }

    // @media screen and (device-aspect-ratio: 40/71) {
    //     .members {
    //         & .members-left-block {
    //             & .btns {
    //                 & .btn-list {
    //                     margin-right: 0;
    //                     float: left;
    //                 }
    //             }
    //         }
    //     }
    // }
    // Small devices (landscape phones, less than 768px)

    @media (max-width: 767.98px) {

        // @media (max-width: 1199.98px) {
        .swiper-scrollbar {
            display: none;
        }

        .verify-url-box {
            display: block;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            // width: 480px;
            width: 80vw !important;
            min-width: 80vw;
            min-height: 260px;

            & .popup-body {
                .popup-title {
                    margin-top: 35px;
                    // font-family: STSongti-TC;
                    font-size: 21px;
                    font-weight: bold;
                    color: #1e1e1e;
                }
            }

            & .verify-input {
                // width: 400px;
                // height: 40px;
                width: 80%;
                height: 4rem;
                border: 1px solid #b4b4b4;
                padding: .375rem .75rem;
                font-size: 1rem;
                font-weight: 400;
                color: #495057;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid #ced4da;
                border-radius: .25rem;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            }

            & .verify-platform {
                margin-top: 38px;
            }

            & .verify-url {
                margin-top: 20px;
            }

            & .verify-code {
                position: relative;
                // direction: rtl;
                // width: 400px;
                width: 100%;
                margin: 20px auto 0;

                & img {
                    position: absolute;
                    // right: 10px;
                    // top: 7px;
                    right: 2.5rem;
                    top: 1rem;
                    // width: 90px;
                    // height: 27px;
                    width: 5.5rem;
                    height: 1.9rem;
                    float: right;
                }

                & .loading-circle {
                    position: absolute;
                    // right: 45px;
                    // top: 10px;
                    right: 1rem;
                    top: 1.5rem;
                    width: 20px;
                    height: 20px;
                }
            }

            & .verify-submit {
                text-align: center;
                // width: 220px;
                width: 80%;
                height: 40px;
                margin: 36px auto 35px;
                border-radius: 5px;
                background-color: #0044ff;
                border: 1px solid #0044ff;
                // font-family: PingFangTC;
                font-size: 16px;
                font-weight: 500;
                color: #ffffff;
            }

            & .verify-result {
                width: 80vw;
                margin: 0 auto;
                position: absolute;
                top: -7rem;
                padding: 0.5rem;
                background-color: #fff;
                border-radius: 0.3rem;

                // top: 80px;
                // left: 40px;
                & .vip-verify-result {
                    margin: 0 auto;
                    max-width: 80vw;
                    width: 80%;
                    display: flex;
                    font-size: 11px;

                    // text-align: center;
                    // justify-content: center;
                    & img {
                        width: 14px;
                        height: 14px;
                        margin-right: 5px;
                        flex-shrink: 0;
                    }

                    & .msg-container {
                        text-align: justify;
                    }
                }

                & .verify-true {
                    color: #50e3c2;
                }

                & .verify-false {
                    color: #e54600;
                }
            }
        }

        .main-background {
            margin-top: -5em;
            width: 100%;
            min-height: 32.3125em;
            background-image: @index_bg_img;
            background-position: center;

            & hr {
                display: none;
            }

            & .main-intro {
                position: relative;
                // top: 10.6875em;
                padding: 10.6875em 1em 2em;

                & img {
                    display: inline-block;
                    width: 3.75em;
                    height: 14.75em;
                    // position: absolute;
                    // top: 0;
                    // left: 1.0625em;
                    vertical-align: top;
                }

                & .intro-box {
                    // width: 70% !important;
                    width: calc(~"100% - 7.25em") !important;
                    display: inline-block;
                    position: relative;
                    // top: 4.0625em;
                    // left: 5.4375em;
                    margin-top: 4.0625em;
                    margin-left: 2em;
                    margin-bottom: 2em;

                    & h2 {
                        // font-family: 'MalayalamMN';
                        font-size: 2em;
                        font-weight: bold;
                        line-height: 0.69;
                        color: #dab130;
                    }

                    & p {
                        // font-family: 'PingFangSC';
                        font-size: 0.9375em;
                        line-height: 1.67;
                        color: #ffffff;
                        margin-top: 1.6875em;
                        // margin-right: 2.1875em;
                        margin-bottom: 0;
                    }

                    & div {
                        display: block;
                        margin-top: 1.875em;

                        // margin-right: 2.1875em;
                        & button {
                            position: absolute;
                            float: right;
                            display: inline-block;
                            right: 0;
                            // width: 7.2875rem;
                            // width: fit-content !important;
                            width: max-content !important;
                            min-width: 7.3em;
                            border: 1px solid @color_bright_gold;
                            font-size: 0.8em;
                            line-height: 1.6;
                            text-align: center;

                            & i {
                                font-size: 1.3em;
                                vertical-align: text-top;
                                margin-left: 0.35em;
                            }
                        }

                        & .btn-more {
                            margin-right: 8.5em;
                            color: @color_bright_gold;

                            &:hover {
                                color: #FFFFFF;
                            }
                        }

                        & .btn-join {
                            float: right;
                            background: @color_bright_gold;
                            padding: 0.4725em 0.75em;

                            &i {
                                color: #FFFFFF;
                            }

                            &:hover {
                                background: @color_gold;
                                border: 1px solid @color_gold;
                            }
                        }
                    }
                }
            }
        }

        .index-main-container {
            position: relative;
            top: 0;
            margin: 0 auto !important;

            & .purpose-info-block {
                & .info-box {
                    width: 100%;
                    // height: 26.625em;
                    height: auto;
                    padding: 1.875em 2.1875em 3.875em !important;
                    position: relative;

                    & h3 {
                        // font-family: 'Songti SC';
                        color: #FFFFFF;
                        font-size: 1.375em !important;
                        // // font-family: 'NSimSun';
                        font-weight: bold;
                        text-align: left;
                        margin-bottom: 1.375em;
                    }

                    & p {
                        // font-family: 'PingFang TC';
                        width: auto;
                        font-size: 0.9375em;
                        line-height: 1.67;
                        color: #FFFFFF;
                        text-align: left;
                    }

                    & div {
                        & button {
                            display: inline-block;
                            float: right;
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            margin-right: 2.1875rem;
                            margin-bottom: 1.5625em;
                            // width: max-content;
                            // width: fit-content;
                            line-height: 1.6;
                            font-size: 0.8em;
                            padding: 0.4em 1.2em;

                            & i {
                                vertical-align: middle;
                                padding-left: 0.35em;
                            }
                        }
                    }

                    & .seven-cai-download-btn {
                        & button {
                            margin-right: 12em;
                        }
                    }
                }

                & .box-zero {
                    background-image: url("../img/background/purpose_box_01.jpg");
                    background-position: center bottom;
                    background-size: cover;
                    background-repeat: no-repeat;
                    transition: background-size .2s linear;
                    -moz-transition: background-size .2s linear;
                    -webkit-transition: background-size .2s linear;

                    & .l-btn {
                        & button {
                            margin-right: 12em;
                        }
                    }

                    & img {
                        width: 1.3em;
                    }
                }

                & .box-one {
                    background-image: url("../img/background/purpose_box_02.jpg");
                    background-size: cover;
                    background-position: center center;
                    background-repeat: no-repeat;
                    text-align: center;
                    transition: background-size .2s linear;
                    -moz-transition: background-size .2s linear;
                    -webkit-transition: background-size .2s linear;

                    & p {
                        margin-bottom: 0;
                    }

                    & div {
                        margin-top: 1.4em;

                        & p {
                            text-align: center;
                        }

                        & h2 {
                            color: @color_deep_gold;
                            font-size: 36px;
                            margin: 0;
                        }
                    }
                }

                & .box-two {
                    background-size: 75%;
                    background-color: rgb(12, 90, 250);
                    background-image: url('../img/background/7-background-index.png');
                    background-position: center center;
                    background-repeat: no-repeat;
                    z-index: 1;

                    & * {
                        z-index: 11;
                    }

                    &::before {
                        content: "";
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        background: inherit;
                        filter: blur(3px);
                        z-index: -1;
                    }
                }

                & .box-three {
                    background-size: 70%;
                    background-color: #0075ff;
                    background-image: url('../img/background/kgame-background-index.png');
                    background-position: center center;
                    background-repeat: no-repeat;
                    z-index: 1;

                    & * {
                        z-index: 11;
                    }

                    & h3 {
                        // font-family: 'Times';
                    }

                    &::before {
                        content: "";
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        background: inherit;
                        filter: blur(3px);
                        z-index: -1;
                    }
                }

                & .box-four {
                    background-size: 70%;
                    background-color: rgb(63, 163, 255, 0.4);
                    background-image: url('../img/0719/a11.png');
                    background-position: center center;
                    background-repeat: no-repeat;
                    z-index: 1;

                    & * {
                        z-index: 11;
                    }

                    & h3 {
                        // font-family: 'Times';
                    }

                    &::before {
                        content: "";
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        background: inherit;
                        filter: blur(3px);
                        z-index: -1;
                    }
                }
            }

            & .lo7 {
                cursor: pointer;
                position: relative;
                background-size: cover;
                height: 350px;

                .lo7-image {
                    height: 65px;
                }

                .lo7-content {
                    // position: absolute;
                    // left: 80px;
                    // top: 90px;
                    padding: 30px 30px;
                }

                .lo7-title {
                    font-size: 20px;
                    padding: 15px 0 15px 0;
                    color: #E8D190;
                }

                .lo7-subtitle {
                    font-size: 16px;
                    color: #fff;
                }

                .lo7-right {
                    text-align: right;
                    margin-top: 10px;
                }

                & .info-box {
                    & button:hover {
                        background-color: @color_gold;
                        border-color: @color_gold;
                        color: #FFFFFF;
                    }
                }
            }

            & .hipay {
                cursor: pointer;
                position: relative;
                background-size: cover;
                height: 350px;

                .hipay-content {
                    // position: absolute;
                    // left: 80px;
                    // top: 90px;
                    padding: 30px 30px;
                }

                .hipay-title {
                    font-size: 25px;
                    padding: 15px 0 15px 0;
                    color: #fff;
                }

                .hipay-subtitle {
                    font-size: 16px;
                    color: #fff;
                }

                .hipay-right {
                    text-align: right;
                }

                & .info-box {
                    & button:hover {
                        background-color: @color_gold;
                        border-color: @color_gold;
                        color: #FFFFFF;
                    }
                }
            }

            & .gdrich {
                cursor: pointer;
                position: relative;
                background-size: cover;
                background-position: center;
                height: 350px;

                .gdrich-image {
                    height: 65px;
                }

                .gdrich-content {
                    // position: absolute;
                    // left: 80px;
                    // top: 90px;
                    padding: 30px 30px;
                }

                .gdrich-title {
                    font-size: 20px;
                    padding: 10px 0 8px 0;
                    color: #E8D190;
                }

                .gdrich-subtitle {
                    font-size: 16px;
                    color: #fff;
                }

                .gdrich-right {
                    text-align: right;
                }

                & .info-box {
                    & button:hover {
                        background-color: @color_gold;
                        border-color: @color_gold;
                        color: #FFFFFF;
                    }
                }
            }


            & .coporate {
                width: 100%;
                // margin-top: 30px;
                // margin-bottom: 20px;
                padding-top: 30px;
                padding-bottom: 20px;
                display: flex;
                justify-content: center;
                background-color: #f2f2f2;

                & .img-item {
                    display: inline-flex;
                    max-width: inherit;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    & .img {
                        // width: 81.6px;
                        width: 22vw;
                        height: auto;
                        margin: 0 1vw 10px;
                        position: relative;

                        // &:nth-child(10n+1){margin-left:0}
                        // &:nth-child(10n){margin-right: 0;}
                        & img {
                            width: 100%;
                            filter: gray;
                            /* IE6-9 */
                            -webkit-filter: grayscale(1);
                            /* Google Chrome, Safari 6+ & Opera 15+ */
                            filter: grayscale(1);
                        }

                        & span {
                            display: none;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            padding: 5px;
                            background-color: rgba(0, 0, 0, 0.8);
                            color: #FFF;
                        }

                        &:hover {
                            & span {
                                display: inline-block;
                            }
                        }
                    }
                }
            }
        }

        & .members {
            background-image: url('../img/background/index-members-bg.jpg');
            background-size: cover;

            // padding: 1.875em 2.1875em;
            & .publicity-title {
                position: relative;
                display: inline-block;
                width: 17%;
                height: 80px;
                font-size: 16px;
                font-weight: 600;
                color: #FFF;
                padding-top: 18px;
                text-align: center;
                line-height: 1.4;
                background-image: linear-gradient(to bottom, #ebdc9b, #c3aa5b);
                z-index: 5;
                border-radius: 3px 0 0 3px;
                vertical-align: top;
            }

            & .members-left-block {
                & h3 {
                    box-sizing: border-box;
                    // font-family: 'STSongti-TC';
                    font-weight: bold;
                    font-size: 1.5em;
                    line-height: 0.92;
                    padding-top: 1.25em;
                    margin-right: 2.1875em;
                    margin-bottom: 1.375em;
                    margin-left: 1.458em;
                }

                & p {
                    // font-family: 'PingFangSC';
                    font-size: 0.9375em;
                    line-height: 1.67;
                    text-align: justify;
                    color: #1e1e1e;
                    padding-left: 2.34em;
                    padding-right: 2.34em;
                }

                & .member-publicity {
                    position: relative;
                    width: 82%;
                    margin: 1.125em auto 0;
                    // margin-top: 1.125em;
                    border-radius: 3px 0 0 3px;
                    cursor: pointer;

                    & .carousel-cust {
                        display: inline-block;
                        width: 78%;
                        height: 74px;
                        background: #FFF;
                        top: 3px;
                        z-index: 3;

                        & .carousel-inner {
                            height: 100%;
                        }

                        & .carousel-item-next.carousel-item-left,
                        .carousel-item-prev.carousel-item-right {
                            -webkit-transform: translate3d(0, 0, 0);
                            transform: translate3d(0, 0, 0);
                        }

                        & .carousel-item-next,
                        .active.carousel-item-right {
                            -webkit-transform: translate3d(0, -100%, 0);
                            transform: translate3d(0, -100%, 0);
                        }

                        & .carousel-item-prev,
                        .active.carousel-item-left {
                            -webkit-transform: translate3d(0, +100%, 0);
                            transform: translate3d(0, +100, 0);
                        }

                        & .publicity-info {
                            position: relative;
                            width: 100%;
                            height: 4.75em;
                            line-height: 4.75em;
                            background: #FFF;
                            text-align: center;
                            z-index: 5;

                            & div {
                                display: inline-block;
                                vertical-align: middle;
                                text-align: center;

                                &:first-child {
                                    // width: 7.1875em;
                                    width: 60%;
                                    height: 3.8125em;
                                    margin-top: -0.3125em;
                                    padding: 0 0.3125em 0 0.625em;

                                    & img {
                                        width: auto;
                                        height: auto;
                                        max-width: 100%;
                                        max-height: 100%;
                                        vertical-align: top;
                                    }
                                }

                                &:last-child {
                                    width: 30%;
                                    padding: 0 !important;

                                    & p {
                                        font-size: 0.8125em;
                                        color: @color_deep_gold;
                                        margin: 0;
                                        text-align: center;
                                        position: relative;
                                        padding: 0 !important;
                                    }

                                    & h4 {
                                        text-align: center;
                                        color: #1e1e1e;
                                        font-size: 0.9375em;
                                        position: relative;
                                    }
                                }
                            }

                            & .vr {
                                display: inline-block;
                                width: 1px;
                                height: 3.125em;
                                background: #c3aa5b;
                                vertical-align: middle;
                                margin: 0 0.3125em;
                            }
                        }
                    }


                    &::after {
                        content: '';
                        display: block;
                        position: absolute;
                        width: 102%;
                        height: 84px;
                        border-image-source: linear-gradient(to bottom, #ebdc9b, #c3aa5b);
                        border-image-slice: 1;
                        background-image: linear-gradient(to bottom, #ebdc9b, #c3aa5b);
                        background-origin: border-box;
                        background-clip: content-box, border-box;
                        top: -2px;
                        left: -2px;
                        z-index: 0;
                        border-radius: 3px 0 0 3px;
                    }
                }

                & .btns {
                    // width: 75%;
                    // text-align: right;
                    display: flex;
                    justify-content: space-between;
                    // margin-top: 2.5em;
                    // margin-left: 17%;
                    // margin-bottom: 2.125em;
                    margin: 2.5em 2.1em 2.125em;

                    & button {
                        color: #1e1e1e;
                        border: 1px solid #1e1e1e;
                        border-radius: 0;
                        width: fit-content;
                        font-size: 0.8em;

                        // padding: 0.4em 1.8em;
                        & i {
                            padding-left: 5px;
                        }
                    }

                    // & .btn-list{
                    // float: left;
                    // margin-right: 1.2em;
                    // }

                    & .btn-join {
                        background: #1e1e1e;
                        border-color: #1e1e1e;
                        color: #FFFFFF;
                    }
                }
            }
        }

        & .members-right-block {
            margin-left: 1.9375em;
            padding-bottom: 2.5em;

            & .member-box {
                display: inline-block;
                width: 40vw;
                min-height: 10.25em;
                margin: 0 3.5% 3.5% 0;
                background-color: rgba(195, 170, 91, 0.6);

                & .member-logo {
                    // width: 80%;
                    // height: 5.825em;
                    width: 33vw;
                    height: 27vw;
                    margin: 1.25em auto 0.25em;
                    background-size: cover;
                    background-position: center;

                    & image {
                        height: 100%;
                    }
                }

                & .member-name {
                    text-align: center;
                    // font-family: 'PingFangSC';
                    font-size: 0.875em;
                    line-height: 1.79;
                    color: #1e1e1e;
                    margin: 0;

                    & img {
                        width: 1.35em;
                        margin-left: 0.2em;
                    }

                    & .verified-tip {
                        // visibility: hidden;
                        // position: absolute;
                        display: none;
                    }
                }

                & .member-money {
                    text-align: center;
                    // font-family: 'PingFangSC';
                    font-size: 0.75em;
                    font-weight: 500;
                    line-height: 2.08;
                    color: #FFF;
                }
            }
        }

        & .complaint {
            display: flex;
            flex-direction: column;
            width: 100%;

            & .complaint-header {
                margin-bottom: 30px;
                width: 100%;
                // font-family: STSongti-TC;
                font-size: 24px;
                font-weight: bold;
                color: #ffffff;
            }

            & .complaint-left-block,
            .complaint-right-block {
                display: flex;
                padding: 30px 25px 30px;
                background: #1e1e1e;
            }

            & .complaint-left-block {
                // width: 100%;
                // min-height: 330px;
                flex-direction: column;
                background-image: url(../img/background/index_complaint.png);
                background-position: center bottom;
                background-size: cover;
                background-repeat: no-repeat;

                & .complaint-content {
                    display: flex;
                    flex-direction: column;

                    & .complaint-content-des {
                        display: inline-block;
                        // width: 282px;
                        // width: 48%;
                        width: 100%;
                        // font-family: PingFangSC;
                        font-size: 14px;
                        line-height: 1.79;
                        text-align: justify;
                        color: #ffffff;
                        margin-right: 20px;
                    }

                    & .complaint-content-table {
                        display: inline-block;
                        // width: 310px;
                        width: 100%;

                        & table {
                            width: 100%;
                            border: 1px solid #c3aa5b;
                            background-color: #FFF;

                            & tr {
                                & th {
                                    text-align: center;
                                    background-image: linear-gradient(to bottom, #ebdc9b, #c7af61);
                                    color: #ffffff;
                                }

                                & td {
                                    position: relative;
                                    border-right: 1px solid #c3aa5b;
                                    padding: 5px 0;
                                    text-align: center;

                                    // font-family: Arial;
                                    font-size: 12px;
                                    color: #4a4a4a;
                                }

                                &:first-child td {
                                    padding-top: 10px;

                                    &::before {
                                        content: "";
                                        display: block;
                                        height: 10px;
                                        width: 105%;
                                        position: absolute;
                                        top: 0;
                                        background-color: #FFF;
                                    }

                                    &:last-child::before {
                                        display: none;
                                    }
                                }

                                &:last-child td {
                                    padding-bottom: 10px;

                                    &::after {
                                        content: "";
                                        display: block;
                                        width: 105%;
                                        height: 10px;
                                        position: absolute;
                                        bottom: 0;
                                        background-color: #FFF;
                                    }

                                    &:last-child::after {
                                        display: none;
                                    }
                                }
                            }
                        }

                        & .complaint-content-btn {
                            margin-top: 20px;
                            text-align: right;

                            &:last-child button {
                                margin-left: 20px;
                            }
                        }
                    }
                }
            }

            & .complaint-right-block {
                // width: 332px;
                flex-direction: column;
                width: 100vw;
                min-height: 330px;
                background-image: url(../img/background/index_complaint_rank.png);
                background-position: center bottom;
                background-size: cover;
                background-repeat: no-repeat;

                & .complaint-content {
                    & .rank-box {
                        margin: 0px 10px 20px 0;
                        width: 100%;
                        display: flex;

                        & .rank-img-container {
                            width: 50px;
                            height: 56px;

                            & img {
                                width: 100%;
                            }
                        }

                        & .rank-des-container {
                            margin-left: 13px;

                            & .rank-member {
                                margin-bottom: 0;
                                // font-family: PingFangSC;
                                font-size: 18px;
                                font-weight: 500;
                                color: #dab130;
                            }

                            & .rank-member-des {
                                margin-bottom: 0;
                                // font-family: PingFangSC;
                                font-size: 13px;
                                color: #e5e5ea;
                            }
                        }
                    }
                }
            }
        }

        & .choice {
            width: 100%;

            // padding: 1.875em 2.1875em;
            & .choice-left-block {
                background: #1e1e1e;
                padding-bottom: 2em;

                & h3 {
                    padding-top: 1.3425em;
                    padding-left: 1.56em;
                    font-size: 1.5em;
                    // font-family: 'STSongti-TC';
                    font-weight: bold;
                    line-height: 0.92;
                    color: @color_light_gold;
                }

                & .more-link {
                    display: none;
                }

                & .choice-list-block {
                    margin-top: 2em;
                    margin-left: 2em;

                    & .choice-box {
                        display: inline-block;
                        width: 31%;
                        text-align: center;
                        vertical-align: top;

                        & .hover-box {
                            width: 100%;

                            & img {
                                display: inline-block;
                                width: 70%;
                                margin: 0 auto 0.625em;
                            }

                            & p {
                                // font-family: PingFangSC;
                                font-size: 1em !important;
                                color: #FFFFFF;
                            }
                        }

                        & .btn-cust {
                            display: none;
                        }
                    }

                    & .choice-box-see-more {
                        & .the-stone-see-more {
                            width: 20vw;
                            height: 20vw;
                            margin: 0 auto 0.2825em;
                            border: 1px solid #ffffff;
                            border-radius: 20vw;
                            background-color: rgba(0, 0, 0, 0.8);
                            color: #ffffff;
                            line-height: 2em;
                            font-size: 2em;
                            font-weight: bold;
                        }
                    }
                }
            }

            & .choice-mid-block {
                background: #4D4D4D;

                & .btn-cust {
                    color: #FFFFFF;
                }

                & h3 {
                    color: #FFFFFF;
                }

                & .news-list {
                    & .news-box {
                        & a {
                            color: #FFFFFF;
                        }
                    }
                }
            }

            & .choice-right-block {
                background: #FFFFFF;

                & .btn-cust {
                    color: #4a4a4a;
                }

                & h3 {
                    color: #1e1e1e;
                }

                & .news-list {
                    & .news-box {
                        & a {
                            color: #000000;
                        }
                    }
                }
            }

            & .choice-mid-block,
            .choice-right-block {
                padding: 2em;

                & h3 {
                    display: inline-block;
                    // font-family: 'STSongti-TC';
                    font-size: 1.5em;
                    font-weight: bold;
                    line-height: 0.92;
                }

                & .more-link {
                    float: right;
                    position: relative;
                    top: -0.5em;
                    font-size: 0.8125em;
                    // color: #4a4a4a;
                }

                & .news-list {
                    & .news-box {
                        width: 100%;
                        margin: 0.625em auto 0.9375em;

                        & label {
                            display: inline-block;
                            background-color: #5fc1ff;
                            color: #FFFFFF;
                            font-size: 0.8125em;
                            border-radius: 1em;
                            padding: 0.3125em 0.6875em;
                            margin-right: 5px;
                        }

                        & .news-date {
                            // font-family: 'PingFangSC';
                            color: #c3aa5b;
                            font-size: 0.875em;
                            font-weight: 500;
                        }

                        & a {
                            display: inline-block;
                            width: 100%;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            word-break: break-all;
                            overflow: hidden;
                            line-height: 1.3;
                            // color: #000000;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }

    // Medium devices (tablets, less than 992px)
    @media (min-width: 768px) and (max-width: 1199.98px) {
        body {
            background: #ececec;
        }

        .swiper-scrollbar {
            display: none;
        }

        .verify-url-box {
            display: block;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            width: 480px;
            min-height: 260px;

            & .popup-body {
                .popup-title {
                    margin-top: 35px;
                    // font-family: STSongti-TC;
                    font-size: 21px;
                    font-weight: bold;
                    color: #1e1e1e;
                }
            }

            & .verify-input {
                width: 400px;
                height: 40px;
                border: 1px solid #b4b4b4;
                padding: .375rem .75rem;
                font-size: 1rem;
                font-weight: 400;
                color: #495057;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid #ced4da;
                border-radius: .25rem;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            }

            & .verify-platform {
                margin-top: 38px;
            }

            & .verify-url {
                margin-top: 20px;
            }

            & .verify-code {
                position: relative;
                // direction: rtl;
                width: 400px;
                margin: 20px auto 0;

                & img {
                    position: absolute;
                    right: 10px;
                    top: 7px;
                    width: 90px;
                    height: 27px;
                    float: right;
                }

                & .loading-circle {
                    position: absolute;
                    right: 45px;
                    top: 10px;
                    width: 20px;
                    height: 20px;
                }
            }

            & .verify-submit {
                text-align: center;
                width: 220px;
                height: 40px;
                margin: 36px auto 35px;
                border-radius: 5px;
                background-color: #0044ff;
                border: 1px solid #0044ff;
                // font-family: PingFangTC;
                font-size: 16px;
                font-weight: 500;
                color: #ffffff;
            }

            & .verify-result {
                width: 400px;
                margin: 0 auto;
                position: absolute;
                top: 80px;
                left: 40px;

                & .vip-verify-result {
                    margin: 0 auto;
                    max-width: 400px;
                    width: 100%;
                    display: flex;
                    font-size: 11px;

                    // text-align: center;
                    // justify-content: center;
                    & img {
                        width: 14px;
                        height: 14px;
                        margin-right: 5px;
                        flex-shrink: 0;
                    }

                    & .msg-container {
                        text-align: justify;
                    }
                }

                & .verify-true {
                    color: #50e3c2;
                }

                & .verify-false {
                    color: #e54600;
                }
            }
        }

        .main-background {
            width: 100%;
            height: 45em;
            background-image: @index_bg_img;
            background-size: cover;
            background-position: center;
            margin-top: -6.4em;
            padding-top: 5.7em;

            & hr {
                top: 80px;
                width: 100%;
                border-top: solid 3px rgba(255, 255, 255, 0.1);
                margin: 0;
            }

            & .main-intro {
                width: 100%;
                margin: 0 auto;
                display: flex;
                position: relative;
                height: 340px;

                & img {
                    width: auto;
                    height: 340px;
                    float: left;
                    margin-left: 50px;
                    margin-right: 35px;
                    margin-top: 40px;
                    position: absolute;
                }

                & .intro-box {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    width: 100%;
                    height: auto;
                    position: relative;
                    top: 120px;
                    text-align: center;

                    & h2 {
                        font-size: 40px;
                        font-weight: bold;
                        // font-family: 'NSimSun';
                        color: @color_deep_gold;
                        width: 100%;
                    }

                    & p {
                        margin-top: -90px;
                        font-size: 15px;
                        line-height: 2;
                        text-align: center;
                        color: #FFFFFF;
                        width: 100%;
                        padding: 0 20%;
                    }

                    & .join-container {
                        margin-right: 20px;
                    }

                    & div {
                        width: 115px;
                        display: inline-block;
                        text-align: right;
                        margin-top: -70px;
                        float: right;

                        & .btn-more,
                        .btn-join {
                            border: 1px solid @color_bright_gold;
                            padding: 5px 12px;
                            font-size: 14px;

                            & i {
                                font-size: 16px;
                                vertical-align: text-top;
                                margin-left: 6px;
                            }
                        }

                        & .btn-more {
                            color: @color_bright_gold;

                            &:hover {
                                color: #FFFFFF;
                            }
                        }

                        & .btn-join {
                            background: @color_bright_gold;

                            &i {
                                color: #FFFFFF;
                            }

                            &:hover {
                                background: @color_gold;
                                border: 1px solid @color_gold;
                            }
                        }

                        & .btn-more:hover {
                            background: @color_gold;
                        }
                    }
                }
            }
        }

        .index-main-container {
            width: 100%;
            margin: -112px auto 50px;
            position: relative;

            & .purpose {
                & .purpose-info-block {
                    display: flex;
                    width: max-content;
                    width: fit-content;
                    height: fit-content;
                    margin: 0 auto;
                    text-align: center;

                    & .info-box {
                        display: inline-block;
                        position: relative;
                        // width: 332px;
                        width: 25%;
                        height: initial;
                        min-height: 560px;
                        padding: 25px;
                        background-size: 200%;

                        & h3 {
                            // font-family: 'Songti SC';
                            color: #FFFFFF;
                            font-size: 24px;
                            margin-bottom: 25px;
                            // // font-family: 'NSimSun';
                            font-weight: bold;
                            text-align: left;
                        }

                        & p {
                            // font-family: 'PingFang TC';
                            width: auto;
                            font-size: 14px;
                            line-height: 2;
                            color: #FFFFFF;
                            text-align: left;
                        }

                        // & div {
                        //     min-height: ;
                        // }

                        & button {
                            position: absolute;
                            font-size: 14px;
                            padding: 4px 10px;
                            bottom: 20px;
                            right: 25px;

                            & i {
                                vertical-align: middle;
                                padding-left: 5px;
                            }
                        }

                        // & button:hover{
                        //     background-color: @color_gold;
                        //     border-color: @color_gold;
                        //     color: #FFFFFF;
                        // }

                        & .seven-cai-download-btn {
                            & button {
                                bottom: 60px;
                            }
                        }
                    }

                    & .box-zero {
                        background-image: url("../img/background/purpose_box_01.jpg");
                        background-size: 450%;
                        background-position: center bottom;
                        background-repeat: no-repeat;
                        transition: background-size .2s linear;
                        -moz-transition: background-size .2s linear;
                        -webkit-transition: background-size .2s linear;

                        // &:hover{
                        //     background-size: 130%;
                        //     background-position: center bottom;
                        //     background-repeat: no-repeat;
                        // }

                        & .l-btn {
                            & button {
                                bottom: 60px;
                            }
                        }

                        & img {
                            width: 15px;
                        }
                    }

                    & .box-one {
                        background-image: url("../img/background/purpose_box_02.jpg");
                        background-size: 350%;
                        background-position: center center;
                        background-repeat: no-repeat;
                        text-align: center;
                        transition: background-size .2s linear;
                        -moz-transition: background-size .2s linear;
                        -webkit-transition: background-size .2s linear;

                        // &:hover{
                        //     background-size: 130%;
                        //     background-position: center center;
                        //     background-repeat: no-repeat;
                        // }

                        & p {
                            margin: 0;
                        }

                        & div {
                            margin-top: 20px;
                        }

                        & div>h2 {
                            color: @color_deep_gold;
                            font-size: 36px;
                            margin: 0;

                            & span {
                                display: inline-block;
                                font-size: 28px;
                                vertical-align: 2px;
                                padding: 0 2px;
                            }

                            & small {
                                font-size: 16px;
                                color: #FFFFFF;
                                vertical-align: 2px;
                                padding: 0 5px;
                            }
                        }

                        & div>p {
                            text-align: center;
                            font-size: 15px;
                            line-height: 1.5;
                            margin-bottom: 5px;
                        }
                    }

                    & .box-two {
                        background-size: 75%;
                        background-color: rgb(12, 90, 250);
                        background-image: url('../img/background/7-background-index.png');
                        background-position: center center;
                        background-repeat: no-repeat;
                        z-index: 1;

                        & * {
                            z-index: 11;
                        }

                        &::before {
                            content: "";
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            background: inherit;
                            filter: blur(3px);
                            z-index: -1;
                        }
                    }

                    & .box-three {
                        background-size: 70%;
                        background-color: #0075ff;
                        background-image: url('../img/background/kgame-background-index.png');
                        background-position: center center;
                        background-repeat: no-repeat;
                        z-index: 1;

                        & * {
                            z-index: 11;
                        }

                        & h3 {
                            // font-family: 'Times';
                        }

                        &::before {
                            content: "";
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            background: inherit;
                            filter: blur(3px);
                            z-index: -1;
                        }
                    }

                    & .box-four {
                        background-size: 70%;
                        background-color: rgb(63, 163, 255, 0.4);
                        background-image: url('../img/0719/a11.png');
                        background-position: center center;
                        background-repeat: no-repeat;
                        z-index: 1;

                        & * {
                            z-index: 11;
                        }

                        & h3 {
                            // font-family: 'Times';
                        }

                        &::before {
                            content: "";
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            background: inherit;
                            filter: blur(3px);
                            z-index: -1;
                        }
                    }
                }
            }

            & .lo7 {
                position: relative;
                background-size: cover;
                height: 270px;

                .lo7-image {
                    height: 42px;
                }

                .lo7-content {
                    position: absolute;
                    left: 80px;
                    top: 50px;
                }

                .lo7-title {
                    font-size: 30px;
                    padding: 10px 0 8px 0;
                    color: #E8D190;
                }

                .lo7-subtitle {
                    font-size: 16px;
                    color: #fff;
                }

                & .info-box {
                    & button:hover {
                        background-color: @color_gold;
                        border-color: @color_gold;
                        color: #FFFFFF;
                    }
                }
            }

            & .hipay {
                position: relative;
                background-size: cover;
                height: 270px;

                .hipay-content {
                    position: absolute;
                    left: 80px;
                    top: 50px;
                }

                .hipay-title {
                    font-size: 30px;
                    padding: 10px 0 8px 0;
                    color: #fff;
                }

                .hipay-subtitle {
                    font-size: 16px;
                    color: #fff;
                }

                & .info-box {
                    & button:hover {
                        background-color: @color_gold;
                        border-color: @color_gold;
                        color: #FFFFFF;
                    }
                }
            }

            & .gdrich {
                position: relative;
                background-size: cover;
                background-position: center;
                height: 270px;

                .gdrich-image {
                    height: 66px;
                }

                .gdrich-content {
                    position: absolute;
                    left: 80px;
                    top: 50px;
                }

                .gdrich-title {
                    font-size: 30px;
                    padding: 10px 0 8px 0;
                    color: #E8D190;
                }

                .gdrich-subtitle {
                    font-size: 16px;
                    color: #fff;
                }

                & .info-box {
                    & button:hover {
                        background-color: @color_gold;
                        border-color: @color_gold;
                        color: #FFFFFF;
                    }
                }
            }

            & .members {
                display: flex;
                background-image: url('../img/background/index-members-bg.jpg');
                background-size: cover;

                & .members-left-block,
                .members-right-block {
                    display: inline-block;
                }

                & .members-left-block {
                    width: 30vw;
                    padding: 1.67em;

                    & p {
                        font-size: 0.94em;
                        line-height: 1.8;
                        margin: 0;
                        text-align: justify;
                    }

                    & h3 {
                        color: #1e1e1e;
                        margin-bottom: 1.2em;
                        font-size: 1.6em;
                        // font-family: 'NSimSun';
                        font-weight: bold;
                        text-align: left;
                    }

                    & .member-publicity {
                        position: relative;
                        width: 100%;
                        margin-top: 1.67em;
                        border-radius: 0.2em 0 0 0.2em;
                        cursor: pointer;

                        & .publicity-title {
                            position: relative;
                            display: inline-block;
                            width: 20%;
                            height: 5.7em;
                            font-size: 0.8em !important;
                            font-weight: 600;
                            color: #FFF;
                            padding-top: 2em !important;
                            padding-bottom: 4.5em;
                            text-align: center;
                            line-height: 1.4;
                            background-image: linear-gradient(to bottom, #ebdc9b, #c3aa5b);
                            z-index: 5;
                            border-radius: 0.2em 0 0 0.2em;
                            vertical-align: top;
                        }

                        &::after {
                            content: '';
                            display: block;
                            position: absolute;
                            width: 100%;
                            height: 5.7em;
                            border-image-source: linear-gradient(to bottom, #ebdc9b, #c3aa5b);
                            border-image-slice: 1;
                            background-image: linear-gradient(to bottom, #ebdc9b, #c3aa5b);
                            background-origin: border-box;
                            background-clip: content-box, border-box;
                            top: -0.14em;
                            left: -0.14em;
                            z-index: 0;
                            border-radius: 0.2em 0 0 0.2em;
                        }

                        & .carousel-cust {
                            display: inline-block;
                            width: 70%;
                            height: 5em;
                            background: #FFF;
                            top: 0.2em;
                            z-index: 3;

                            & .carousel-inner {
                                height: 100%;
                            }

                            & .carousel-item-next.carousel-item-left,
                            .carousel-item-prev.carousel-item-right {
                                -webkit-transform: translate3d(0, 0, 0);
                                transform: translate3d(0, 0, 0);
                            }

                            & .carousel-item-next,
                            .active.carousel-item-right {
                                -webkit-transform: translate3d(0, -100%, 0);
                                transform: translate3d(0, -100%, 0);
                            }

                            & .carousel-item-prev,
                            .active.carousel-item-left {
                                -webkit-transform: translate3d(0, +100%, 0);
                                transform: translate3d(0, +100, 0);
                            }

                            & .publicity-info {
                                position: relative;
                                width: 100%;
                                height: 5em;
                                line-height: 76px;
                                background: #FFF;
                                text-align: center;
                                z-index: 5;

                                & div {
                                    display: inline-block;
                                    vertical-align: middle;
                                    text-align: center;

                                    &:first-child {
                                        width: 43%;
                                        height: 5em;
                                        margin-top: -5px;
                                        padding: 0 5px 0 10px;

                                        & img {
                                            width: auto;
                                            height: auto;
                                            max-width: 100%;
                                            max-height: 100%;
                                            // width: 100%;
                                            // max-width: 100%;
                                            // height: 50%;
                                            // max-height: 50%;
                                            vertical-align: middle;
                                        }
                                    }

                                    &:last-child {
                                        width: 35%;
                                        padding: 0 10px;

                                        & p {
                                            font-size: 0.8em;
                                            color: @color_deep_gold;
                                            margin: 0;
                                            text-align: center;
                                        }

                                        & h4 {
                                            color: #1e1e1e;
                                            font-size: 0.8em;
                                        }
                                    }
                                }

                                & .vr {
                                    display: inline-block;
                                    width: 1px;
                                    height: 4em;
                                    background: #c3aa5b;
                                    vertical-align: middle;
                                    margin: 0 0.4em;
                                }
                            }
                        }
                    }

                    & .btns {
                        // text-align: right;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 2em;

                        & button {
                            color: #1e1e1e;
                            border: 1px solid #1e1e1e;
                            border-radius: 0;
                            font-size: 0.5em;

                            // padding: 0.375em 0.25em;
                            & i {
                                padding-left: 0.1rem;
                            }
                        }

                        & .btn-list {
                            &:hover {
                                background: @color_gold;
                                border-color: @color_gold;
                                color: #FFFFFF;
                            }
                        }

                        & .btn-join {
                            background: #1e1e1e;
                            border-color: #1e1e1e;
                            color: #FFFFFF;

                            // margin-left: 10px;
                            &:hover {
                                background: @color_gold;
                                border-color: @color_gold;
                            }
                        }
                    }
                }

                & .members-right-block {
                    display: inline-table;
                    width: 70vw;
                    padding: 20px 0;


                    & .member-box {
                        display: inline-block;
                        width: 22.5%;
                        min-height: 10em;
                        margin: 0 13px 13px 0;
                        padding: 1em 0 0.5em;
                        background-color: rgba(195, 170, 91, 0.6);
                        text-align: center;
                        cursor: pointer;

                        &:hover {
                            background-color: rgba(195, 170, 91, 0.9);
                            transition: background-color .6s linear;
                        }

                        & .member-logo {
                            // width: auto;
                            width: 7.34em;
                            height: 6em;
                            border-radius: 4px;
                            overflow: hidden;
                            margin: 0 auto 10px;
                            text-align: center;
                            background-size: cover;
                            background-position: center;

                        }

                        & .member-name {
                            font-size: 14px;
                            color: #1e1e1e;
                            margin: 0;

                            & img {
                                width: 16px;
                                margin-left: 3px;
                            }

                            & .verified-tip {
                                // visibility: hidden;
                                // position: absolute;
                                display: none;
                            }
                        }

                        & .member-money {
                            font-size: 12px;
                            font-weight: 500;
                            color: #FFF;
                        }
                    }

                    & .no-padding {
                        margin: 0 0 12px 0;
                    }
                }
            }

            & .complaint {
                display: flex;
                width: 100%;

                & .complaint-header {
                    margin-bottom: 30px;
                    width: 100%;
                    // font-family: STSongti-TC;
                    font-size: 24px;
                    font-weight: bold;
                    color: #ffffff;
                }

                & .complaint-left-block,
                .complaint-right-block {
                    display: inline-block;
                    padding: 30px 25px 30px;
                    background: #1e1e1e;
                }

                & .complaint-left-block {
                    width: 70vw;
                    min-height: 330px;
                    background-image: url(../img/background/index_complaint.png);
                    background-position: center bottom;
                    background-size: cover;
                    background-repeat: no-repeat;

                    & .complaint-content {
                        display: flex;

                        & .complaint-content-des {
                            display: inline-block;
                            // width: 282px;
                            width: 35%;
                            // font-family: PingFangSC;
                            font-size: 14px;
                            line-height: 1.79;
                            text-align: justify;
                            color: #ffffff;
                            margin-right: 20px;
                        }

                        & .complaint-content-table {
                            display: inline-block;
                            // width: 310px;
                            width: 65%;

                            & table {
                                width: 100%;
                                border: 1px solid #c3aa5b;
                                background-color: #FFF;

                                & tr {
                                    & th {
                                        text-align: center;
                                        background-image: linear-gradient(to bottom, #ebdc9b, #c7af61);
                                        color: #ffffff;
                                    }

                                    & td {
                                        position: relative;
                                        border-right: 1px solid #c3aa5b;
                                        padding: 5px 0;
                                        text-align: center;

                                        // font-family: Arial;
                                        font-size: 12px;
                                        color: #4a4a4a;
                                    }

                                    &:first-child td {
                                        padding-top: 10px;

                                        &::before {
                                            content: "";
                                            display: block;
                                            height: 10px;
                                            width: 105%;
                                            position: absolute;
                                            top: 0;
                                            background-color: #FFF;
                                        }

                                        &:last-child::before {
                                            display: none;
                                        }
                                    }

                                    &:last-child td {
                                        padding-bottom: 10px;

                                        &::after {
                                            content: "";
                                            display: block;
                                            width: 105%;
                                            height: 10px;
                                            position: absolute;
                                            bottom: 0;
                                            background-color: #FFF;
                                        }

                                        &:last-child::after {
                                            display: none;
                                        }
                                    }
                                }
                            }

                            & .complaint-content-btn {
                                margin-top: 20px;
                                text-align: right;

                                &:last-child button {
                                    margin-left: 20px;
                                }
                            }
                        }
                    }
                }

                & .complaint-right-block {
                    // width: 332px;
                    width: 30vw;
                    min-height: 330px;
                    background-image: url(../img/background/index_complaint_rank.png);
                    background-position: center bottom;
                    background-size: cover;
                    background-repeat: no-repeat;

                    & .complaint-content {
                        & .rank-box {
                            margin: 0px 10px 20px 0;
                            width: 100%;
                            display: flex;

                            & .rank-img-container {
                                width: 50px;
                                height: 56px;

                                & img {
                                    width: 100%;
                                }
                            }

                            & .rank-des-container {
                                margin-left: 13px;

                                & .rank-member {
                                    margin-bottom: 0;
                                    // font-family: PingFangSC;
                                    font-size: 18px;
                                    font-weight: 500;
                                    color: #dab130;
                                }

                                & .rank-member-des {
                                    margin-bottom: 0;
                                    // font-family: PingFangSC;
                                    font-size: 13px;
                                    color: #e5e5ea;
                                }
                            }
                        }
                    }
                }
            }

            & .choice {
                display: flex;

                & .choice-left-block,
                .choice-mid-block,
                .choice-right-block {
                    display: inline-block;
                    padding: 25px 25px 10px;

                    & h3 {
                        display: inline-block;
                        font-size: 20px;
                        // font-family: 'NSimSun';
                        font-weight: bold;
                        margin-bottom: 0;
                    }

                    & .btn-cust {
                        float: right;
                        font-size: 13px;

                        & i {
                            margin-left: 5px;
                        }
                    }
                }

                & .choice-left-block {
                    width: 55vw;
                    min-height: 310px;
                    background: #1e1e1e;

                    & h3 {
                        color: @color_light_gold;
                    }

                    & .btn-cust {
                        color: #FFFFFF;

                        &:hover {
                            color: @color_bright_gold;
                        }
                    }

                    & .choice-list-block {
                        display: flex;
                        text-align: center;
                        margin-top: 50px;

                        & .choice-box {
                            width: 15%;
                            margin: 0 13px;

                            &:first-child {
                                margin-left: 0;
                            }

                            &:last-child {
                                margin-right: 0;
                            }

                            & .hover-box {

                                & img {
                                    // width: 80px;
                                    width: 3.5em;
                                    margin-bottom: 15px;
                                    transition: 1s linear;
                                    -webkit-transition: 1s linear;
                                    transform-style: preserve-3d;
                                    -webkit-transform-style: preserve-3d;
                                }

                                & p {
                                    font-size: 16px;
                                    color: #FFFFFF;
                                    font-weight: normal;
                                    height: 4.7em;
                                }

                                &:hover {
                                    & img {
                                        transform: rotateY(360deg);
                                        -webkit-transform: rotateY(360deg);
                                    }
                                }
                            }

                            & .btn-cust {
                                width: 100%;
                                background: @color_bright_gold;
                                font-size: 13px;
                                padding: 6px 10px;
                                border: none;
                                border-radius: 5px;

                                &:hover {
                                    background: @color_gold;
                                    color: #FFFFFF;
                                }
                            }
                        }

                        & .choice-box-see-more {
                            display: none;
                        }
                    }
                }

                & .choice-mid-block {
                    background: #4D4D4D;

                    & .btn-cust {
                        color: #FFFFFF;
                    }

                    & h3 {
                        color: #FFFFFF;
                    }

                    & .news-list {
                        & .news-box {
                            & a {
                                color: #FFFFFF;
                            }
                        }
                    }
                }

                & .choice-right-block {
                    background: #FFFFFF;

                    & .btn-cust {
                        color: #4a4a4a;
                    }

                    & h3 {
                        color: #1e1e1e;
                    }

                    & .news-list {
                        & .news-box {
                            & a {
                                color: #000000;
                            }
                        }
                    }
                }

                & .choice-mid-block,
                .choice-right-block {
                    width: 22.5vw;
                    // background: #FFFFFF;

                    // & h3{color: #1e1e1e;}
                    & .btn-cust {

                        // color: #4a4a4a;
                        &:hover {
                            color: @color_gold;
                        }
                    }

                    & .news-list {
                        margin-top: 30px;

                        & .news-box {
                            width: 100%;
                            margin: 10px auto 15px;

                            & label {
                                display: inline-block;
                                background: @default_light_color;
                                color: #FFFFFF;
                                font-size: 13px;
                                border-radius: 10px;
                                padding: 1px 8px;
                                margin-right: 5px;
                            }

                            & .news-date {
                                color: @color_deep_gold;
                                font-size: 14px;
                                font-weight: 500;
                            }

                            & a {
                                display: inline-block;
                                width: 100%;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                word-break: break-all;
                                overflow: hidden;
                                line-height: 2.07;
                                // color: #000000;
                                cursor: pointer;
                                .no_underline;

                                &:hover {
                                    color: @color_gold;
                                    .no_underline;
                                }
                            }
                        }
                    }
                }
            }

            & .coporate {
                width: 100%;
                margin-top: 30px;
                margin-bottom: -20px;
                display: flex;
                justify-content: center;

                & .img-item {
                    display: inline-flex;
                    max-width: inherit;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    & .img {
                        width: 8vw;
                        height: auto;
                        margin: 0 1vw 10px;
                        position: relative;

                        &:nth-child(10n+1) {
                            margin-left: 0
                        }

                        &:nth-child(10n) {
                            margin-right: 0;
                        }

                        & img {
                            width: 100%;
                            width: 100%;
                            filter: gray;
                            /* IE6-9 */
                            -webkit-filter: grayscale(1);
                            /* Google Chrome, Safari 6+ & Opera 15+ */
                            filter: grayscale(1);
                        }

                        & span {
                            display: none;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            padding: 5px;
                            background-color: rgba(0, 0, 0, 0.8);
                            color: #FFF;
                        }

                        &:hover {
                            & span {
                                display: inline-block;
                            }
                        }
                    }
                }
            }
        }
    }

    // Large devices (desktops, less than 1200px)
    // @media (min-width: 768px) {
    @media (min-width: 1200px) {
        body {
            background: #ececec;
        }

        .swiper-scrollbar {
            display: none;
        }

        .verify-url-box {
            display: block;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%);
            width: 480px;
            min-height: 260px;

            & .popup-body {
                .popup-title {
                    margin-top: 35px;
                    // font-family: STSongti-TC;
                    font-size: 21px;
                    font-weight: bold;
                    color: #1e1e1e;
                }
            }

            & .verify-input {
                width: 400px;
                height: 40px;
                border: 1px solid #b4b4b4;
                padding: .375rem .75rem;
                font-size: 1rem;
                font-weight: 400;
                color: #495057;
                background-color: #fff;
                background-clip: padding-box;
                border: 1px solid #ced4da;
                border-radius: .25rem;
                transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            }

            & .verify-platform {
                margin-top: 38px;
            }

            & .verify-url {
                margin-top: 20px;
            }

            & .verify-code {
                position: relative;
                // direction: rtl;
                width: 400px;
                margin: 20px auto 0;

                & img {
                    position: absolute;
                    right: 10px;
                    top: 7px;
                    width: 90px;
                    height: 27px;
                    float: right;
                }

                & .loading-circle {
                    position: absolute;
                    right: 45px;
                    top: 10px;
                    width: 20px;
                    height: 20px;
                }
            }

            & .verify-submit {
                cursor: pointer;
                text-align: center;
                width: 220px;
                height: 40px;
                margin: 36px auto 35px;
                border-radius: 5px;
                background-color: #0044ff;
                border: 1px solid #0044ff;
                // font-family: PingFangTC;
                font-size: 16px;
                font-weight: 500;
                color: #ffffff;
            }

            & .verify-result {
                width: 400px;
                margin: 0 auto;
                position: absolute;
                top: 70px;
                left: 40px;

                & .vip-verify-result {
                    margin: 0 auto;
                    max-width: 400px;
                    width: 100%;
                    display: flex;
                    font-size: 11px;

                    // text-align: center;
                    // justify-content: center;
                    & img {
                        width: 14px;
                        height: 14px;
                        margin-right: 5px;
                        flex-shrink: 0;
                    }

                    & .msg-container {
                        text-align: justify;
                    }
                }

                & .verify-true {
                    color: #50e3c2;
                }

                & .verify-false {
                    color: #e54600;
                }
            }
        }

        .main-background {
            height: 670px;
            width: 100%;
            margin-top: -130px;
            padding-top: 130px;
            background-image: @index_bg_img;
            background-size: cover;
            background-position: center;

            & hr {
                top: 80px;
                width: 100%;
                border-top: solid 3px rgba(255, 255, 255, 0.1);
                margin: 0;
            }

            & .main-intro {
                width: @index_max_width;
                margin: 0 auto;
                display: flex;
                position: relative;
                height: 340px;

                & img {
                    width: auto;
                    height: 340px;
                    float: left;
                    margin-left: 50px;
                    margin-right: 35px;
                    margin-top: 40px;
                    position: absolute;
                }

                & .intro-box {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    width: 100%;
                    height: auto;
                    position: relative;
                    top: 120px;
                    text-align: center;


                    & h2 {
                        font-size: 40px;
                        font-weight: bold;
                        // font-family: 'NSimSun';
                        color: @color_deep_gold;
                        width: 100%;
                    }

                    & p {
                        margin-top: -90px;
                        font-size: 15px;
                        line-height: 2;
                        text-align: center;
                        color: #FFFFFF;
                        width: 100%;
                        padding: 0 20%;
                    }

                    & .join-container {
                        margin-right: 20px;
                    }

                    & div {
                        width: 115px;
                        display: inline-block;
                        text-align: right;
                        margin-top: -100px;
                        float: right;


                        & .btn-more,
                        .btn-join {
                            border: 1px solid @color_bright_gold;
                            padding: 5px 12px;
                            font-size: 14px;

                            & i {
                                font-size: 16px;
                                vertical-align: text-top;
                                margin-left: 6px;
                            }
                        }

                        & .btn-more {
                            color: @color_bright_gold;

                            &:hover {
                                color: #FFFFFF;
                            }
                        }

                        & .btn-join {
                            background: @color_bright_gold;

                            &i {
                                color: #FFFFFF;
                            }

                            &:hover {
                                background: @color_gold;
                                border: 1px solid @color_gold;
                            }
                        }

                        & .btn-more:hover {
                            background: @color_gold;
                        }
                    }
                }
            }
        }

        .index-main-container {
            width: @index_max_width;
            margin: -112px auto 50px;
            position: relative;

            & .purpose {
                & .purpose-info-block {
                    display: flex;
                    width: max-content;
                    width: fit-content;
                    height: fit-content;
                    margin: 0 auto;
                    text-align: center;

                    & .info-box {
                        display: inline-block;
                        position: relative;
                        // width: 332px;
                        width: 280px;
                        height: initial;
                        min-height: 400px;
                        padding: 25px;
                        // background-size: 120%;
                        transition: background-size .2s linear;
                        -moz-transition: background-size .2s linear;
                        -webkit-transition: background-size .2s linear;

                        & h3 {
                            // font-family: 'Songti SC';
                            color: #FFFFFF;
                            font-size: 24px;
                            margin-bottom: 25px;
                            // // font-family: 'NSimSun';
                            font-weight: bold;
                            text-align: left;
                        }

                        & p {
                            // font-family: 'PingFang TC';
                            width: auto;
                            font-size: 14px;
                            line-height: 2;
                            color: #FFFFFF;
                            text-align: left;
                        }

                        & button {
                            position: absolute;
                            font-size: 13px;
                            padding: 4px 10px;
                            bottom: 20px;
                            right: 25px;

                            & i {
                                vertical-align: middle;
                                padding-left: 5px;
                            }
                        }

                        & button:hover {
                            background-color: @color_gold;
                            border-color: @color_gold;
                            color: #FFFFFF;
                        }

                        & .seven-cai-download-btn {
                            & button {
                                right: 135px;
                            }
                        }

                        // &:hover{
                        //     background-size: 180%;
                        //     background-position: center center;
                        //     background-repeat: no-repeat;
                        // }
                    }

                    & .box-zero {
                        background-image: url("../img/background/purpose_box_01.jpg");
                        background-size: 180%;
                        background-position: center bottom;
                        background-repeat: no-repeat;


                        &:hover {
                            background-size: 200%;
                            background-position: center bottom;
                            background-repeat: no-repeat;
                        }

                        & .l-btn {
                            & button {
                                right: 135px;
                            }
                        }

                        & img {
                            width: 15px;
                        }
                    }

                    & .box-one {
                        background-image: url("../img/background/purpose_box_02.jpg");
                        background-size: 190%;
                        background-position: center top;
                        background-repeat: no-repeat;
                        text-align: center;
                        // transition: background-size .2s linear;
                        // -moz-transition: background-size .2s linear;
                        // -webkit-transition: background-size .2s linear;

                        &:hover {
                            background-size: 200%;
                            background-position: center top;
                            background-repeat: no-repeat;
                        }

                        & p {
                            margin: 0;
                        }

                        & div {
                            margin-top: 20px;
                        }

                        & div>h2 {
                            color: @color_deep_gold;
                            font-size: 36px;
                            margin: 0;

                            & span {
                                display: inline-block;
                                font-size: 36px;
                                vertical-align: 2px;
                                padding: 0 2px;
                            }

                            & small {
                                font-size: 16px;
                                color: #FFFFFF;
                                vertical-align: 2px;
                                padding: 0 5px;
                            }
                        }

                        & div>p {
                            text-align: center;
                            font-size: 15px;
                            line-height: 1.5;
                            margin-bottom: 5px;
                        }
                    }

                    & .box-two {
                        background-size: 75%;
                        background-color: rgb(12, 90, 250);
                        background-image: url('../img/background/7-background-index.png');
                        background-position: center center;
                        background-repeat: no-repeat;
                        z-index: 1;

                        & * {
                            z-index: 11;
                        }

                        &::before {
                            content: "";
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            background: inherit;
                            filter: blur(3px);
                            z-index: -1;
                        }

                        &:hover {
                            background-size: 95%;
                            background-position: center center;
                            background-repeat: no-repeat;
                        }
                    }

                    & .box-three {
                        background-size: 70%;
                        background-color: #0075ff;
                        background-image: url('../img/background/kgame-background-index.png');
                        background-position: center center;
                        background-repeat: no-repeat;
                        z-index: 1;

                        & * {
                            z-index: 11;
                        }

                        & h3 {
                            // font-family: 'Times';
                        }

                        &::before {
                            content: "";
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            background: inherit;
                            // -webkit-filter: blur(3px);
                            // -moz-filter: blur(3px);
                            // -o-filter: blur(3px);
                            // -ms-filter: blur(3px);
                            filter: blur(3px);
                            z-index: -1;
                        }

                        &:hover {
                            background-size: 90%;
                            background-position: center center;
                            background-repeat: no-repeat;
                        }
                    }

                    & .box-four {
                        background-size: 70%;
                        background-color: rgb(63, 163, 255, 0.4);
                        background-image: url('../img/0719/a11.png');
                        background-position: center center;
                        background-repeat: no-repeat;
                        z-index: 1;

                        & * {
                            z-index: 11;
                        }

                        & h3 {
                            // font-family: 'Times';
                        }

                        &::before {
                            content: "";
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            left: 0;
                            top: 0;
                            background: inherit;
                            // -webkit-filter: blur(3px);
                            // -moz-filter: blur(3px);
                            // -o-filter: blur(3px);
                            // -ms-filter: blur(3px);
                            filter: blur(3px);
                            z-index: -1;
                        }

                        &:hover {
                            background-size: 90%;
                            background-position: center center;
                            background-repeat: no-repeat;
                        }
                    }
                }
            }

            & .lo7 {
                position: relative;
                background-size: cover;
                height: 270px;

                .lo7-image {
                    height: 42px;
                }

                .lo7-content {
                    position: absolute;
                    left: 80px;
                    top: 50px;
                }

                .lo7-title {
                    font-size: 30px;
                    padding: 10px 0 8px 0;
                    color: #E8D190;
                }

                .lo7-subtitle {
                    font-size: 16px;
                    color: #fff;
                }

                & .info-box {
                    & button:hover {
                        background-color: @color_gold;
                        border-color: @color_gold;
                        color: #FFFFFF;
                    }
                }
            }

            & .hipay {
                position: relative;
                background-size: cover;
                height: 270px;

                .hipay-content {
                    position: absolute;
                    left: 80px;
                    top: 50px;
                }

                .hipay-title {
                    font-size: 30px;
                    padding: 10px 0 8px 0;
                    color: #fff;
                }

                .hipay-subtitle {
                    font-size: 16px;
                    color: #fff;
                }

                & .info-box {
                    & button:hover {
                        background-color: @color_gold;
                        border-color: @color_gold;
                        color: #FFFFFF;
                    }
                }
            }

            & .gdrich {
                position: relative;
                background-size: cover;
                background-position: center;
                height: 270px;

                .gdrich-image {
                    height: 65px;
                }

                .gdrich-content {
                    position: absolute;
                    left: 80px;
                    top: 30px;
                }

                .gdrich-title {
                    font-size: 30px;
                    padding: 10px 0 8px 0;
                    color: #E8D190;
                }

                .gdrich-subtitle {
                    font-size: 16px;
                    color: #fff;
                }

                & .info-box {
                    & button:hover {
                        background-color: @color_gold;
                        border-color: @color_gold;
                        color: #FFFFFF;
                    }
                }
            }

            & .members {
                display: flex;
                background-image: url('../img/background/index-members-bg.jpg');
                background-size: cover;

                & .members-left-block,
                .members-right-block {
                    display: inline-block;
                }

                & .members-left-block {
                    width: 280px;
                    padding: 25px 20px;

                    & p {
                        font-size: 14px;
                        line-height: 1.8;
                        margin: 0;
                    }

                    & h3 {
                        color: #1e1e1e;
                        margin-bottom: 25px;
                        font-size: 24px;
                        // font-family: 'NSimSun';
                        font-weight: bold;
                        text-align: left;
                    }

                    & .member-publicity {
                        position: relative;
                        width: 100%;
                        margin-top: 25px;
                        border-radius: 3px 0 0 3px;
                        cursor: pointer;

                        & .carousel-cust {
                            display: inline-block;
                            width: 175px;
                            height: 74px;
                            background: #FFF;
                            top: 3px;
                            z-index: 3;

                            & .carousel-inner {
                                height: 100%;
                            }

                            & .carousel-item-next.carousel-item-left,
                            .carousel-item-prev.carousel-item-right {
                                -webkit-transform: translate3d(0, 0, 0);
                                transform: translate3d(0, 0, 0);
                            }

                            & .carousel-item-next,
                            .active.carousel-item-right {
                                -webkit-transform: translate3d(0, -100%, 0);
                                transform: translate3d(0, -100%, 0);
                            }

                            & .carousel-item-prev,
                            .active.carousel-item-left {
                                -webkit-transform: translate3d(0, +100%, 0);
                                transform: translate3d(0, +100, 0);
                            }

                            & .publicity-info {
                                position: relative;
                                // width: 216px;
                                width: 180px;
                                // height: 76px;
                                line-height: 70px;
                                background: #FFF;
                                text-align: center;
                                z-index: 5;

                                & div {
                                    display: inline-block;
                                    vertical-align: middle;
                                    text-align: center;

                                    &:first-child {
                                        // width: 115px;
                                        width: 80px;
                                        height: 61px;
                                        margin-top: -10px;
                                        padding: 0 5px 0 10px;

                                        & img {
                                            width: auto;
                                            height: auto;
                                            max-width: 100%;
                                            max-height: 100%;
                                            vertical-align: middle;
                                        }
                                    }

                                    &:last-child {
                                        width: 75px;
                                        // padding: 0 10px;
                                        margin: 7px 0 0 -3px;

                                        & p {
                                            font-size: 13px;
                                            color: @color_deep_gold;
                                            margin: 0;
                                        }

                                        & h4 {
                                            color: #1e1e1e;
                                            font-size: 15px;
                                        }
                                    }
                                }

                                & .vr {
                                    display: inline-block;
                                    width: 1px;
                                    height: 50px;
                                    background: #c3aa5b;
                                    vertical-align: middle;
                                    margin: 0 5px;
                                }
                            }
                        }

                        & .publicity-title {
                            position: relative;
                            display: inline-block;
                            // width: 60px;
                            width: 55px;
                            height: 80px;
                            font-size: 16px;
                            font-weight: 600;
                            color: #FFF;
                            padding-top: 18px;
                            text-align: center;
                            line-height: 1.4;
                            background-image: linear-gradient(to bottom, #ebdc9b, #c3aa5b);
                            z-index: 5;
                            border-radius: 3px 0 0 3px;
                            vertical-align: top;
                        }

                        &::after {
                            content: '';
                            display: block;
                            position: absolute;
                            width: 240px;
                            height: 84px;
                            border-image-source: linear-gradient(to bottom, #ebdc9b, #c3aa5b);
                            border-image-slice: 1;
                            background-image: linear-gradient(to bottom, #ebdc9b, #c3aa5b);
                            background-origin: border-box;
                            background-clip: content-box, border-box;
                            top: -2px;
                            left: -2px;
                            z-index: 0;
                            border-radius: 3px 0 0 3px;
                        }
                    }

                    & .btns {
                        // text-align: right;
                        display: flex;
                        justify-content: space-between;
                        margin-top: 26px;

                        & button {
                            color: #1e1e1e;
                            border: 1px solid #1e1e1e;
                            border-radius: 0;
                            padding: 4px 7px;
                            font-size: 12px;

                            & i {
                                padding-left: 5px;
                            }
                        }

                        & .btn-list {
                            &:hover {
                                background: @color_gold;
                                border-color: @color_gold;
                                color: #FFFFFF;
                            }
                        }

                        & .btn-join {
                            background: #1e1e1e;
                            border-color: #1e1e1e;
                            color: #FFFFFF;

                            &:hover {
                                background: @color_gold;
                                border-color: @color_gold;
                            }
                        }
                    }
                }

                & .members-right-block {
                    display: inline-table;
                    // width: 664px;
                    width: 840px;
                    padding: 20px 0;


                    & .member-box {
                        display: inline-block;
                        width: 155px;
                        min-height: 164px;
                        margin: 0 13px 13px 0;
                        // padding: 20px 20px 10px;
                        background-color: rgba(195, 170, 91, 0.6);
                        text-align: center;
                        cursor: pointer;

                        &:hover {
                            background-color: rgba(195, 170, 91, 0.9);
                            transition: background-color .6s linear;
                        }

                        & .member-logo {
                            // width: 100px;
                            // height: 90px;
                            width: 121px;
                            height: 99px;
                            border-radius: 4px;
                            overflow: hidden;
                            margin: 10px auto 10px;
                            text-align: center;
                            background-size: cover;
                            background-position: center;

                            & img {
                                height: 100%;
                            }
                        }

                        & .member-name {
                            font-size: 14px;
                            color: #1e1e1e;
                            margin: 0;
                            position: relative;

                            & img {
                                width: 16px;
                                margin-left: 3px;
                            }

                            & .verified-tip {
                                visibility: hidden;
                                width: max-content;
                                background-color: rgb(255, 252, 241);
                                border: 1px solid #1e1e1e;
                                font-size: 12px;
                                text-align: center;
                                padding: 1px 10px 3px;
                                position: absolute;
                                z-index: 1;
                                top: 20px;
                                left: 10px;
                            }

                            &:hover {
                                & .verified-tip {
                                    visibility: visible;
                                }
                            }
                        }

                        & .member-money {
                            font-size: 12px;
                            font-weight: 500;
                            color: #FFF;
                        }
                    }

                    & .no-padding {
                        margin: 0 0 12px 0;
                    }
                }
            }

            & .complaint {
                display: flex;
                width: 100%;

                & .complaint-header {
                    margin-bottom: 30px;
                    width: 100%;
                    // font-family: STSongti-TC;
                    font-size: 24px;
                    font-weight: bold;
                    color: #ffffff;
                }

                & .complaint-left-block,
                .complaint-right-block {
                    display: inline-block;
                    padding: 30px 25px 30px;
                    background: #1e1e1e;
                }

                & .complaint-left-block {
                    // width: 664px;
                    width: 840px;
                    min-height: 330px;
                    background-image: url(../img/background/index_complaint.png);
                    background-position: center bottom;
                    background-size: cover;
                    background-repeat: no-repeat;

                    & .complaint-content {
                        display: flex;

                        & .complaint-content-des {
                            display: inline-block;
                            // width: 282px;
                            width: 240px;
                            // font-family: PingFangSC;
                            font-size: 14px;
                            line-height: 1.79;
                            text-align: justify;
                            color: #ffffff;
                            margin-right: 20px;
                        }

                        & .complaint-content-table {
                            display: inline-block;
                            // width: 310px;
                            width: 530px;

                            & table {
                                width: 100%;
                                border: 1px solid #c3aa5b;
                                background-color: #FFF;
                                margin-top: 4px;

                                & tbody {
                                    height: auto;
                                    min-height: 135px;
                                }

                                & tr {
                                    & th {
                                        text-align: center;
                                        background-image: linear-gradient(to bottom, #ebdc9b, #c7af61);
                                        color: #ffffff;
                                    }

                                    & td {
                                        position: relative;
                                        border-right: 1px solid #c3aa5b;
                                        padding: 5px;
                                        text-align: center;

                                        // font-family: Arial;
                                        font-size: 12px;
                                        color: #4a4a4a;
                                    }

                                    &:first-child td {
                                        // width: 25%;
                                        // width: 30%;
                                        padding-top: 10px;

                                        &::before {
                                            content: "";
                                            display: block;
                                            height: 10px;
                                            width: 105%;
                                            position: absolute;
                                            top: 0;
                                            background-color: #FFF;
                                        }

                                        &:last-child::before {
                                            display: none;
                                        }
                                    }

                                    &:last-child td {
                                        // width: 30%;
                                        padding-bottom: 10px;

                                        &::after {
                                            content: "";
                                            display: block;
                                            width: 105%;
                                            height: 10px;
                                            position: absolute;
                                            bottom: 0;
                                            background-color: #FFF;
                                        }

                                        &:last-child::after {
                                            display: none;
                                        }
                                    }
                                }
                            }

                            & .complaint-content-btn {
                                margin-top: 22px;
                                text-align: right;

                                &:last-child button {
                                    margin-left: 20px;
                                }
                            }
                        }
                    }
                }

                & .complaint-right-block {
                    // width: 332px;
                    width: 280px;
                    min-height: 330px;
                    background-image: url(../img/background/index_complaint_rank.png);
                    background-position: center bottom;
                    background-size: cover;
                    background-repeat: no-repeat;

                    & .complaint-content {
                        & .rank-box {
                            cursor: pointer;
                            margin: 0px 10px 20px 0;
                            width: 100%;
                            display: flex;

                            & .rank-img-container {
                                width: 50px;
                                height: 56px;

                                & img {
                                    width: 100%;
                                }
                            }

                            & .rank-des-container {
                                margin-left: 13px;

                                & .rank-member {
                                    margin-bottom: 0;
                                    // font-family: PingFangSC;
                                    font-size: 18px;
                                    font-weight: 500;
                                    color: #dab130;
                                }

                                & .rank-member-des {
                                    margin-bottom: 0;
                                    // font-family: PingFangSC;
                                    font-size: 13px;
                                    color: #e5e5ea;
                                }
                            }
                        }
                    }
                }
            }

            & .choice {
                display: flex;

                & .choice-left-block,
                .choice-mid-block,
                .choice-right-block {
                    display: inline-block;
                    padding: 25px 25px 10px;

                    & h3 {
                        display: inline-block;
                        font-size: 24px;
                        // font-family: 'NSimSun';
                        font-weight: bold;
                        margin-bottom: 0;
                    }

                    & .btn-cust {
                        float: right;
                        font-size: 13px;

                        & i {
                            margin-left: 5px;
                        }
                    }
                }

                & .choice-left-block {
                    // width: 840px;
                    width: 561px;
                    min-height: 310px;
                    background: #1e1e1e;

                    & h3 {
                        color: @color_light_gold;
                    }

                    & .btn-cust {
                        color: #FFFFFF;

                        &:hover {
                            color: @color_bright_gold;
                        }
                    }

                    & .choice-list-block {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        text-align: center;
                        margin: 50px 0 0;

                        & .choice-box {
                            // width: 110px;
                            width: 84px;
                            // margin: 0 13px;

                            // &:first-child{margin-left: 0;}
                            // &:last-child{margin-right: 0;}

                            & .hover-box {

                                & img {
                                    width: 80px;
                                    margin-bottom: 15px;
                                    transition: 1s linear;
                                    -webkit-transition: 1s linear;
                                    transform-style: preserve-3d;
                                    -webkit-transform-style: preserve-3d;
                                }

                                & p {
                                    font-size: 16px;
                                    color: #FFFFFF;
                                    font-weight: normal;
                                }

                                &:hover {
                                    & img {
                                        transform: rotateY(360deg);
                                        -webkit-transform: rotateY(360deg);
                                    }
                                }
                            }

                            & .btn-cust {
                                width: 100%;
                                background: @color_bright_gold;
                                font-size: 12px;
                                padding: 6px 0px;
                                border: none;
                                border-radius: 5px;

                                &:hover {
                                    background: @color_gold;
                                    color: #FFFFFF;
                                }
                            }
                        }

                        & .choice-box-see-more {
                            display: none;
                        }
                    }
                }

                & .choice-mid-block {
                    width: 280px;
                    background: #4D4D4D;

                    & .btn-cust {
                        color: #FFFFFF;
                    }

                    & h3 {
                        color: #FFFFFF;
                    }

                    & .news-list {
                        & .news-box {
                            & a {
                                color: #FFFFFF;
                            }
                        }
                    }
                }

                & .choice-right-block {
                    width: 280px;
                    background: #FFFFFF;

                    & .btn-cust {
                        color: #4a4a4a;
                    }

                    & h3 {
                        color: #1e1e1e;
                    }

                    & .news-list {
                        & .news-box {
                            & a {
                                color: #000000;
                            }
                        }
                    }
                }

                & .choice-mid-block,
                .choice-right-block {
                    & .btn-cust {
                        &:hover {
                            color: @color_gold;
                        }
                    }

                    & .news-list {
                        margin-top: 30px;

                        & .news-box {
                            width: 100%;
                            margin: 10px auto 15px;

                            & label {
                                display: inline-block;
                                background: @default_light_color;
                                color: #FFFFFF;
                                font-size: 13px;
                                border-radius: 10px;
                                padding: 1px 8px;
                                margin-right: 5px;
                            }

                            & .news-date {
                                color: @color_deep_gold;
                                font-size: 14px;
                                font-weight: 500;
                            }

                            & a {
                                display: inline-block;
                                width: 100%;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                word-break: break-all;
                                overflow: hidden;
                                font-size: 14px;
                                line-height: 20px;
                                // line-height: 2.07;
                                cursor: pointer;
                                .no_underline;

                                &:hover {
                                    color: @color_gold;
                                    .no_underline;
                                }
                            }
                        }
                    }
                }
            }

            & .coporate {
                width: 100%;
                margin-top: 30px;
                margin-bottom: -20px;
                display: flex;
                justify-content: center;

                & .img-item {
                    display: inline-flex;
                    max-width: inherit;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;

                    & .img {
                        cursor: pointer;
                        width: 81.6px;
                        height: auto;
                        position: relative;
                        margin: 0 10px 10px;

                        &:nth-child(10n+1) {
                            margin-left: 0
                        }

                        &:nth-child(10n) {
                            margin-right: 0;
                        }

                        & img {
                            width: 100%;
                            filter: gray;
                            /* IE6-9 */
                            -webkit-filter: grayscale(1);
                            /* Google Chrome, Safari 6+ & Opera 15+ */
                            filter: grayscale(1);
                        }

                        & span {
                            display: none;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            padding: 5px;
                            background-color: rgba(0, 0, 0, 0.8);
                            color: #FFF;
                            width: 100%;
                            text-align: center;
                            word-break: break-all;
                        }

                        &:hover {
                            & span {
                                display: inline-block;
                            }
                        }
                    }
                }
            }
        }
    }
}


.index-main-container {
    .topBlock {
        display: flex;
        justify-content: space-between;
        width: 100%;

        .blueBtn {
            border: 1px solid var(--unnamed-color-061645);
            border: 1px solid #061645;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
            margin-right: 25px;
            cursor: pointer;

            white-space: nowrap;
            background-color: #FFFFFF;
            color: #061645;

            @media (max-width: 400px) {
                margin-right: 5px;
            }

            .text {
                font: normal normal medium 13px/16px Helvetica Neue;
                letter-spacing: 0px;
                margin-right: 7px;
            }

            &:hover {
                color: #FFFFFF;
                background: #061645 0% 0% no-repeat padding-box;
            }
        }

        .left,
        .right {
            background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            box-shadow: 0px 3px 6px #00000029;
            width: calc(~'50% - 15px');
            border-radius: 20px;

            .title {
                height: 90px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    height: 65%;
                    width: auto;
                    margin-right: 15px;
                }

                .text {
                    font: normal normal bold 24px/29px Helvetica Neue;
                    color: #333333;
                    font-size: 24px;
                }
            }

            .centerBlock {
                padding: 0 22px;
                font: normal normal normal 16px/22px Helvetica Neue;
                font-size: 16px;
                color: #333333;
                letter-spacing: 0.7px;

                img {
                    height: 20px;
                }
            }

            .bottomBlock {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                height: 70px;
            }

        }

        .right {
            position: relative;

            .blueBtn {
                position: absolute;
                right: 21px;
                bottom: 18px;
                margin-right: 0px;
            }

            .bottomBlock {

                .cnTitle {
                    position: absolute;
                    left: 45px;
                    bottom: 84px;
                    font-size: 16px;
                    font-weight: bold;

                    @media (max-width: 945px) {
                        bottom: 100px;
                    }
                }

                .cnNumber,
                .enNumber {
                    position: absolute;
                    font-size: 50px;
                    color: #E31C1C;

                    h2 {
                        font: normal normal bold 50px/61px arial;
                        font-weight: bold;
                        letter-spacing: 2.5px;
                    }

                    small {
                        color: #333333;
                        font: normal normal bold 16px/19px Helvetica Neue;
                        letter-spacing: 0px;
                        margin-left: 17px;
                    }
                }

                .cnNumber {
                    left: 45px;
                    bottom: 10px;

                    @media (max-width: 945px) {
                        bottom: 35px;
                    }

                    .counter {
                        @media (max-width: 1048px) {
                            font-size: 40px;
                        }

                        @media (max-width: 800px) {
                            font-size: 36px;
                        }

                        @media (max-width: 420px) {
                            font-size: 30px;
                        }

                        @media (max-width: 310px) {
                            font-size: 25px;
                        }
                    }
                }

                .enNumber {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    bottom: 15px;

                    @media (max-width: 945px) {
                        bottom: 60px;
                    }

                    .counter {

                        height: 65px;
                        text-align: center;
                        letter-spacing: 2.5px;
                        font-weight: bold;

                        @media (max-width: 350px) {
                            font-size: 35px;
                            height: 55px;
                        }
                    }

                    .dollorText {
                        font-size: 24px;
                        font: normal normal bold 24px/29px Helvetica Neue;
                        letter-spacing: 0px;
                        color: #333333;
                        text-align: center;

                    }
                }

            }
        }

        margin-bottom:20px;

        @media (min-width: 768px) and (max-width: 1199.98px) {
            padding: 25px;

            & {
                margin-bottom: 0px;
            }
        }

        @media (max-width: 767.98px) {
            background: #00154F 0% 0% no-repeat padding-box;
            padding: 25px;

            & {
                flex-wrap: wrap;
                margin-bottom: 0px;
            }

            .left,
            .right {
                width: 100%;
            }

            .right {
                margin-top: 25px;

                .bottomBlock {
                    height: 140px;

                    .cnNumber {
                        bottom: 35px;
                    }

                    .enNumber {
                        bottom: 48px
                    }

                    .cnTitle {
                        bottom: 95px;
                    }
                }
            }

        }
    }

}

.mainHitBlock {
    width: 100%;
    display: flex;
    margin-bottom: 20px;

    .hitBox {
        width: 25%;

        .title {
            padding: 0px 20px;
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;

            .titleText {
                text-align: center;
                font: normal normal bold 24px/29px Helvetica Neue;
                letter-spacing: 1.2px;
                color: #FFFFFF;
                font-size: 1.6rem;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-box-pack: center;
                -webkit-line-clamp: 3; //行數
                overflow: hidden;

            }
        }

        .title0 {
            background: #133490 0% 0% no-repeat padding-box;
        }

        .title1 {
            background: #214BB7 0% 0% no-repeat padding-box;
        }

        .title2 {
            background: #095DBF 0% 0% no-repeat padding-box;
        }

        .title3 {
            background: #2074C3 0% 0% no-repeat padding-box;
        }

        .content {
            width: 100%;

            .imageBlock {
                display: flex;
                align-content: center;
                justify-content: center;
                padding: 13px 0px;

                img {
                    height: 100px;
                    width: 100px;
                    overflow: hidden;
                    border-radius: 50%;
                }
            }

            .contentBlock {
                height: 200px;
                padding: 0px 20px;
                color: #FFFFFF;
                display: -webkit-box;
                -webkit-line-clamp: 9; //行數
                -webkit-box-orient: vertical;
                white-space: normal;
                overflow: hidden;
            }

            .optionBlock {
                height: 65px;
                display: flex;
                justify-content: flex-end;
                align-content: center;
                margin-right: 30px;

                .btnBlock {
                    margin-top: 10px;

                    i {
                        margin-left: 3px;
                    }

                    button:hover {
                        background-color: #c5a336;
                        border-color: #c5a336;
                        color: white;
                    }
                }
            }
        }

        .content0 {
            background: #1E41A5 0% 0% no-repeat padding-box;
        }

        .content1 {
            background: #2653C8 0% 0% no-repeat padding-box;
        }

        .content2 {
            background: #0A65D0 0% 0% no-repeat padding-box;
        }

        .content3 {
            background: #217FD7 0% 0% no-repeat padding-box;
        }
    }
}

@media (max-width: 767.98px) {
    .mainHitBlock {
        flex-wrap: wrap;
        margin-bottom: 0px;

        .hitBox {
            width: 100%;

            .content {
                .contentBlock {
                    height: 130px;
                    -webkit-line-clamp: 6; //行數
                }
            }
        }
    }
}