@media only screen and (max-width: 767px) {
    body {
        margin: 0px;
        padding: 0px;
        width: 100%;
        /* background-image: url('../image/main-bg.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        /* 背景图固定在视口 */
    }
    /** 头部导航栏 **/
    .header-container {
        /* background-image: url('../image/header-bg.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100vw;
        height: 11.7vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0px;
        z-index: 1000;
    }
    .header-content {
        width: 84vw;
        height: 100%;
        display: flex;
    }
    .heder-left {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .left-icon {
        width: 9.5vw;
        height: 9.5vw;
        /* background-image: url('../image/icon.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .header-right {
        width: 70%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .header-lang {
        width: 42%;
        height: 70%;
        /* background-image: url('../image/lang-btn.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        font-size: 2.5vw;
        text-align: center;
    }
    .header-lang img {
        width: 1.5vw;
        height: 1.5vw;
        padding-right: 2.5vw;
        padding-left: 2.5vw;
    }
    .lang-select {
        margin-right: 2vw;
        width: 70%;
        height: 4vw;
        font-size: 2.8vw;
        border: none;
        /* 移除边框 */
        border: none;
        /* 移除边框 */
        outline: none;
        /* 移除焦点轮廓 */
        background-color: transparent;
        /* 移除背景颜色 */
    }
    .lang-select option {
        font-size: 2.8vw;
        /* 设置选项字体大小 */
        color: black;
        /* 设置选项默认颜色 */
        text-align: center;
    }
    .header-add-mune {
        width: 56%;
        height: 70%;
        /* background-image: url('../image/add-menu.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 3.5vw;
        color: white;
    }
    /** 提示语设置 **/
    .tip-container {
        width: 100vw;
        height: 6.2vw;
        /* background-image: url('../image/tip-bg.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        position: fixed;
        top: 11.7vw;
        z-index: 1000;
    }
    .tip-content {
        font-size: 2.3vw;
    }
    /** 页面内容 **/
    .body-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 10vw;
    }
    .activity-content {
        width: 94.4vw;
        position: absolute;
        top: 52vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 1vw;
    }
    .acitvity-detail {
        width: 100vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 17vw;
        position: absolute;
        top: 2.5vw;
    }
    .page-tab {
        width: 100%;
        height: 6.8vw;
        position: absolute;
        top: 18.4vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #FFFFFF;
        font-size: 2.6vw;
        justify-content: center;
    }
    .page-tab .shop-tab {
        width: 28%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin: 0px 5px;
    }
    .page-tab .index-tab {
        width: 28%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0px 5px;
    }
    .page-tab .activity-tab {
        width: 28%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0px 5px;
    }
    .game-name-content {
        position: absolute;
        display: flex;
        flex-direction: row;
        height: 6.6vw;
        width: 72vw;
        left: 4.1vw;
        top: 38.6vw;
        color: #FFFFFF;
        align-items: center;
    }
    .game-name-border {
        height: 100%;
        width: 1.8vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .game-name {
        height: 5.5vw;
        margin-left: 0.9vw;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        font-size: 3.5vw;
        font-weight: 700;
    }
    .game-name-value {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 5.5vw;
        font-size: 3.5vw;
    }
    .login-btn {
        width: 18.5vw;
        height: 6.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 38.5vw;
        left: 78.4vw;
        color: #FFFFFF;
        font-size: 3.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .back-btn {
        width: 18.5vw;
        height: 6.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 30vw;
        left: 78.4vw;
        color: #FFFFFF;
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .logout-btn {
        width: 18.5vw;
        height: 6.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #FFFFFF;
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 2vw;
    }
    .select-role {
        width: 18.5vw;
        height: 6.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #FFFFFF;
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 2vw;
    }
    .rule-btn {
        width: 18.5vw;
        height: 6.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 38.5vw;
        left: 78.4vw;
        color: #FFFFFF;
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .content-tip {
        width: 100%;
        height: 11.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .tips {
        font-size: 3vw;
        height: 11.4vw;
        width: 64.4vw;
        color: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 2.9vw;
    }
    .role-info {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        font-size: 3.7vw;
        color: #FFFFFF;
        align-items: center;
    }
    .server-info {
        color: #FFFFFF;
    }
    .role-name {
        display: flex;
        flex-direction: row;
        margin-left: 3.2vw;
        color: #FFFFFF;
    }
    .activity-list,
    .activity_detail {
        width: 98%;
        background: #FFFFFF;
        padding-bottom: 0vw;
    }
    .activity-main-image {
        width: 100%;
        height: 35.6vw;
        position: relative;
    }
    .acitvity-image {
        width: 89.2vw;
        height: 33vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 2.5vw;
        left: 1.6vw;
    }
    .list-content {
        width: 100%;
        height: 75vw;
        display: flex;
        flex-direction: row;
        margin-top: 1.8vw;
    }
    .list-left {
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        left: 0px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
            width: 0;
        }
    }
    .list-right {
        width: 5%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        left: 0px;
    }
    .list-scroll-bg {
        width: 1.6vw;
        height: 70vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .activity-scroll-item {
        width: 1.6vw;
        height: 10vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
    }
    .ad-content-right {
        width: 10vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .ad-scroll-bg {
        width: 1.6vw;
        height: 31.7vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .ad-scroll-item {
        width: 1.6vw;
        height: 5vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
    }
    .product-right {
        width: 10vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .product-scroll-bg {
        width: 1.6vw;
        height: 31.7vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .product-scroll-item {
        width: 1.6vw;
        height: 5vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
    }
    .list-item {
        width: 86.6vw;
        height: auto;
        /* 自动撑开高度 */
        display: flex;
        flex-direction: row;
        margin-bottom: 1.8vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        align-items: stretch;
        /* 子元素高度撑开 */
        margin-bottom: 1.8vw;
        min-height: 35vw;
        -webkit-flex: 1;
        flex: 1;
        -webkit-align-items: stretch;
        align-items: stretch;
    }
    .list-item:only-child {
        flex: none;
        min-height: auto;
        height: auto;
    }
    .item-left {
        width: 67%;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        -webkit-flex: 1;
        flex: 1;
    }
    .item-right {
        width: 30%;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        -webkit-flex: 1;
        flex: 1;
    }
    .item-top {
        width: 100%;
        height: auto;
        /* 让高度随内容撑开 */
        display: flex;
        flex-direction: row;
        margin-top: 4.1vw;
        margin-left: 3.8vw;
        align-items: center;
    }
    .list-image {
        width: 7.6vw;
        height: 7.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .list-btn {
        width: 22.9vw;
        height: 7.7vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #ED3818;
        font-size: 4.1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .list-title {
        color: #400000;
        width: 44vw;
        font-size: 4.2vw;
        margin-left: 3.7vw;
        /* 多行省略号 */
        display: -webkit-box;
        /* 必须加 */
        -webkit-box-orient: vertical;
        /* 必须加 */
        -webkit-line-clamp: 2;
        /* 限制两行 */
        overflow: hidden;
        /* 超出隐藏 */
        text-overflow: ellipsis;
        /* 显示省略号 */
        word-break: break-word;
        /* 防止英文或长词溢出 */
        line-height: 1.2em;
        /* 根据字体大小调整行高 */
    }
    .list-describe {
        margin-left: 3.8vw;
        width: 49.8vw;
        color: #777676;
        font-size: 3.5vw;
        margin-top: 2.8vw;
        margin-bottom: 3.8vw;
        /* 使用固定 px 行高，避免 vw/em 换算误差 */
        line-height: 4.8vw;
        /* 大约 font-size * 1.37, 可微调 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        /* 限制显示三行 */
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        /* 强制撑开父容器 */
        min-height: calc(4.8vw * 3);
    }
    @supports (-webkit-touch-callout: none) {
        .item-left {
            line-height: normal;
            /* 或指定具体值，例如 18px */
        }
    }
    /** 活动详情 **/
    .detail-title {
        width: 100%;
        height: 7.2vw;
        display: flex;
        background: #EBEBEB;
    }
    .detail-title-content {
        width: 86vw;
        height: 7.2vw;
        display: flex;
        flex-direction: row;
        background: #EBEBEB;
        font-size: 3vw;
        color: #F26E5B;
        align-items: center;
        justify-content: center;
    }
    .dtitle-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .ad-content {
        width: 100%;
        padding-bottom: 1vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .ad-content-left {
        height: 36vw;
        width: 86.6vw;
        left: 0px;
    }
    .date-list {
        display: flex;
        flex-direction: row;
        height: 10.4vw;
        width: 100%;
    }
    .date-info {
        width: 25%;
        font-size: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #400000;
    }
    .date-btn {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 3vw;
    }
    .reward-btn {
        width: 18.4vw;
        height: 6.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #F26E5B;
    }
    .select-date-content {
        position: absolute;
        width: 100%;
        height: 4vw;
        top: 59vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    .select-date,
    .select-score {
        display: flex;
        flex-direction: row;
        height: 100%;
        align-items: center;
    }
    .select-label {
        color: #400000;
        font-size: 2.9vw;
    }
    .select-date-value {
        color: #E82B2B;
        font-size: 3.4vw;
    }
    /*** 商品信息 **/
    .product-list-content {
        width: 94.4vw;
        position: absolute;
        top: 117vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 1vw;
    }
    .product-title {
        width: 99%;
        height: 11.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .product-title-content {
        width: 86.6vw;
        height: 11.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
    }
    .pl-item {
        height: 100%;
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 3vw;
    }
    .product-info-list {
        width: 98%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: white;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .product-left {
        width: 86.6vw;
        height: 41.6vw;
    }
    .product-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        height: 10.4vw;
    }
    .pitem {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .product-info-item {
        color: #400000;
        font-size: 3.2vw;
        padding: 0vw 0.7vw;
        /* 添加内边距，让文字与边框有距离 */
    }
    .ptn-bg {
        width: 18.6vw;
        height: 4.6vw;
        display: flex;
        flex-direction: row;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        align-items: center;
        justify-content: space-between;
    }
    .reduce,
    .plus {
        width: 4.8vw;
        height: 4.8vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .product-num {
        color: #FFFFFF;
        font-size: 3.2vw;
    }
    .settlement-content {
        width: 94.4vw;
        height: 4vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        top: 173vw;
        position: absolute;
    }
    .settlement-score,
    .less-score {
        height: 100%;
        display: flex;
        flex-direction: row;
        font-size: 3vw;
    }
    .settlement-label {
        color: #400000;
    }
    .settlement-num {
        color: #E82B2B;
    }
    .exchange-content {
        width: 100%;
        height: 10.4vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 182vw;
        margin-bottom: 1vw;
        position: absolute;
    }
    .exchange-btn {
        width: 41.6vw;
        height: 10.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 5vw;
    }
    .rule-container {
        width: 100%;
        height: 100vh;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .rule-content {
        width: 92vw;
        height: 100.8vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .rule-detail {
        width: 85.6vw;
        height: 100.8vw;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .rule-close {
        width: 3.4vw;
        height: 3.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 4vw;
        left: 85.4vw;
    }
    .message-container {
        width: 100%;
        height: 100vh;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1001;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .message-content {
        width: 92vw;
        height: 65vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .message-detail {
        width: 85.6vw;
        height: 65vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #E94631;
        font-size: 5vw;
    }
    .message-close {
        width: 3.4vw;
        height: 3.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 4vw;
        left: 85.4vw;
    }
    .confirm-title-name {
        width: 40%;
        text-align: center;
    }
    .confirm-container {
        width: 100%;
        height: 100vh;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .confirm-content {
        width: 92vw;
        height: 70vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .confirm-detail {
        width: 100%;
        height: 65vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 4vw;
    }
    .confirm-close {
        width: 3.4vw;
        height: 3.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -5vw;
        left: 85.4vw;
    }
    .confirm-close-34,
    .confirm-close-54,
    .confirm-close-40 {
        width: 3.4vw;
        height: 3.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 2.5vw;
        left: 85.4vw;
    }
    .confirm-role {
        height: 10vw;
        display: flex;
        flex-direction: row;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        align-items: center;
        text-align: center;
        color: white;
        font-size: 4vw;
        padding-left: 1vw;
        padding-top: 2vw;
        padding-bottom: 2vw;
    }
    .confirm-role-value {
        display: flex;
        flex-direction: row;
    }
    .current-role {
        /* margin-right: 2vw; */
    }
    .confirm-title {
        background: #EBEBEB;
        color: #E94631;
    }
    .confirm-server {
        display: flex;
        flex-direction: row;
    }
    .confirm-product {
        width: 98%;
        display: flex;
        flex-direction: row;
        margin-left: 1%;
    }
    .confirm-label {
        color: black;
        font-size: 4vw;
    }
    .confirm-value {
        color: #E94631;
        text-align: center;
        font-size: 4vw;
    }
    .confirm-content-right {
        width: 1.4vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .confirm-scroll-item {
        width: 1vw;
        height: 5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .confirm-scroll-bg {
        width: 1vw;
        height: 47vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .confirm-product-list {
        width: 95%;
        height: 47vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 3.5vw;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .confirm-product-list .product-list-item {
        width: 100%;
        padding: 1.5vw 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .confirm-item {
        width: 30%;
        height: 5vw;
        text-align: center;
    }
    .confirm-name {
        width: 40%;
        height: 5vw;
        text-align: center;
    }
    .confirm-point {
        font-size: 3.8vw;
        margin-left: 2vw;
        display: flex;
        flex-direction: row;
    }
    .confirm-point-value {
        color: #E94631;
        margin: 0px 2vw;
    }
    .confirm-tips {
        font-size: 3.8vw;
        margin-left: 2vw;
    }
    .confirm-btn {
        width: 41.6vw;
        height: 10.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 5vw;
        margin-top: 2vw;
    }
    .confirm-btn-label {
        color: white;
    }
    .select-role-container {
        width: 100%;
        height: 100vh;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .select-role-content {
        width: 92vw;
        height: 100vw;
        background: #FFFFFF;
        border-radius: 2vw;
    }
    .role-title {
        border-radius: 2vw;
        width: 100%;
        height: 11.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 4.5vw;
        position: relative;
    }
    .role-close {
        position: absolute;
        width: 3.4vw;
        height: 3.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: 4vw;
        left: 85.4vw;
    }
    .role-content {
        width: 100%;
        height: 87.5vw;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .role-item {
        width: 100%;
        height: 10.4vw;
        display: flex;
        flex-direction: row;
        color: #400000;
        font-size: 3vw;
        align-items: center;
        justify-content: space-between;
    }
    .role-left {
        width: 30vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .role-center {
        width: 20vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .role-right {
        width: 30vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .role-select-btn {
        width: 20vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .select-role-btn {
        width: 15.6vw;
        height: 4.9vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        font-size: 2.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /** 底部结算页 **/
    .bottom-container {
        display: none;
        /* background-image: url('../image/bottom-bg.png'); */
        /* background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100vw;
        height: 11.7vw;
        position: fixed;
        z-index: 100;
        bottom: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; */
    }
    .sum_info {
        font-size: 4vw;
        color: #FDFFFB;
        position: absolute;
        width: 50%;
        height: 5vw;
        top: 2vw;
        left: 8.6vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: 600;
    }
    .order-btn {
        width: 27.7vw;
        height: 9.4vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
        left: 64.6vw;
        color: #FDFFFB;
        font-size: 3.5vw;
        display: flex;
        font-display: column;
        align-items: center;
        justify-content: center;
    }
    .order-btn-name {
        position: absolute;
        top: 2.8vw;
    }
    .money_sum {
        margin-left: 3.6vw;
    }
    .order-no-click {
        pointer-events: none;
        opacity: 0.5;
    }
    /** toast **/
    .toast-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50vw;
    }
    .toast-content {
        min-width: 20vw;
        /* 最小宽度 */
        max-width: 70vw;
        /* 最大宽度 */
        display: inline-block;
        /* 使宽度自适应 */
    }
    .toast {
        background-color: #333;
        color: #fff;
        padding: 2vw 3vw;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        z-index: 1000;
        font-size: 3vw;
        line-height: 1.5;
        text-align: center;
    }
    .toast.show {
        opacity: 1;
        transform: translateY(0);
    }
    .toast-message {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .web-name,
    .body-left {
        display: none;
    }
    .order {
        display: none;
    }
    .product-desc-content {
        width: 84vw;
        height: 56vw;
        /* background-image: url('../image/hkhy/15/mobile-product-desc.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .rebate-tip {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 700;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .rebate-content {
        width: 90vw;
        height: auto;
    }
    .rebata-btn {
        width: 20vw;
        height: 5vw;
        font-size: 2.5vw;
        margin-left: 3vw;
        font-weight: 500;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 4px;
    }
    .wallet-tip {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 700;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .wallet-content {
        width: 90vw;
        height: auto;
    }
    .wallet-btn {
        font-size: 2.5vw;
        margin-left: 3vw;
        font-weight: 500;
        width: 20vw;
        height: 5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 4px;
    }
    .cs-content {
        width: 8vw;
        height: 8vw;
        /* background-image: url('../image/hkhy/10/cs.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 200;
        position: fixed;
        bottom: 17.4vw;
        right: 1.2vw;
    }
    .zone-left-desc {
        width: 90vw;
        height: 2.7vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 3vw;
        color: white;
        margin-top: 1vw;
        margin-bottom: 2vw;
    }
    .zone-left-desc a {
        color: white;
        margin-right: 2vw;
    }
    .other-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 2vw;
        color: gray;
        margin-top: 8vw;
        margin-bottom: 5vw;
        position: absolute;
        top: 190vw;
    }
    .protocol-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .info-title {
        padding: 0px 1vw;
        text-decoration: underline;
    }
    .pay-role-info {
        display: none;
    }
    .body-left-rule {
        display: none;
    }
}

@media only screen and (min-width: 767px) {
    body {
        margin: 0px;
        padding: 0px;
        /* background-image: url('../image/pc-main-bg.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        /* 背景图固定在视口 */
    }
    .page-tab {
        width: 47vw;
        height: 2.8vw;
        position: absolute;
        top: 4.5vw;
        left: 24.4vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #FFFFFF;
        font-size: 1.1vw;
        justify-content: center;
    }
    .page-tab .shop-tab {
        width: 14.8vw;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin: 0px 10px;
    }
    .page-tab .activity-tab {
        width: 14.8vw;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin: 0px 10px;
    }
    .page-tab .index-tab {
        width: 14.8vw;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin: 0px 10px;
    }
    /** 头部导航栏 **/
    .header-container {
        /* background-image: url('../image/header-bg.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .header-content {
        width: 92vw;
        height: 100%;
        display: flex;
    }
    .heder-left {
        width: 30%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .left-icon {
        width: 2vw;
        height: 2vw;
        /* background-image: url('../image/icon.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .header-right {
        width: 70%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .header-lang {
        width: 7.5vw;
        height: 2vw;
        /* background-image: url('../image/pc-lang-btn.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
        margin-right: 0.5vw;
    }
    .lang-select {
        margin-right: 0.5vw;
        width: 5.5vw;
        height: 1.1vw;
        font-size: 0.8vw;
        border: none;
        /* 移除边框 */
        border: none;
        /* 移除边框 */
        outline: none;
        /* 移除焦点轮廓 */
        background-color: transparent;
        /* 移除背景颜色 */
    }
    .lang-select option {
        font-size: 0.8vw;
        /* 设置选项字体大小 */
        color: black;
        /* 设置选项默认颜色 */
        text-align: center;
    }
    .header-add-mune {
        width: 10vw;
        height: 2vw;
        /* background-image: url('../image/pc-add-menu.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.8vw;
        color: white;
    }
    /** 提示语设置 **/
    .tip-container {
        height: 2.8vw;
        width: 50%;
        color: white;
        position: absolute;
        top: 0.4vw;
        left: 6vw;
        pointer-events: none;
    }
    .tip-content {
        display: none;
    }
    .web-name {
        font-size: 1.5vw;
        width: 93.5vw;
        height: 1.7vw;
        margin-left: 0.7vw;
        pointer-events: none;
    }
    .game-name-content {
        display: none;
    }
    /** 页面内容 **/
    .body-container {
        width: 100%;
        display: flex;
    }
    .body-left {
        width: 23.6vw;
        height: 41.7vw;
        top: 9.9vw;
        left: 10.8vw;
        position: absolute;
        margin-bottom: 10vw;
    }
    .body-left-bottom {
        top: 41.7vw;
        width: 1px;
        height: 3vw;
        position: absolute;
    }
    .left-content {
        width: 23.6vw;
        height: 41.7vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .body-left-rule {
        width: 20vw;
        height: 50.1vw;
        top: 9.9vw;
        left: 12.4vw;
        position: absolute;
        margin-bottom: 10vw;
    }
    .pc-rule-container {
        width: 20vw;
        height: 50.1vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .pc-rule-detail {
        width: 80%;
        color: white;
        height: 45vw;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .bottom-btn {
        width: 15.5vw;
        height: 3.3vw;
        font-size: 1.5vw;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* background-image: url('../image/order-btn.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 1vw;
        font-weight: 500;
    }
    .bottom-btn:hover {
        cursor: pointer;
    }
    .other-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.8vw;
        color: white;
        top: 65vw;
        position: absolute;
        padding: 1vw 0px;
    }
    .protocol-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .info-title {
        padding: 0px 1vw;
        text-decoration: underline;
    }
    .info-title:hover {
        padding: 0px 1vw;
        text-decoration: underline;
        cursor: pointer;
    }
    /** toast **/
    .toast-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 10vw;
        z-index: 100;
    }
    .toast-content {
        min-width: 15vw;
        /* 最小宽度 */
        max-width: 30vw;
        /* 最大宽度 */
        display: inline-block;
        /* 使宽度自适应 */
    }
    .toast {
        background-color: #000000;
        color: #fff;
        padding: 0.5vw 5vw;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        z-index: 1000;
        font-size: 1vw;
        line-height: 1.5;
        text-align: center;
    }
    .toast.show {
        opacity: 1;
        transform: translateY(0);
    }
    .toast-message {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .product-desc-content {
        width: 40vw;
        height: auto;
        background-image: url('../image/hkhy/15/pc-product-desc.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .rebate-tip {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 700;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-y: scroll;
    }
    .rebate-content {
        width: 40vw;
        height: auto;
        margin-top: 17vw;
        margin-bottom: 2vw;
    }
    .wallet-tip {
        width: 100vw;
        height: 100vh;
        position: fixed;
        z-index: 700;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .wallet-content {
        width: 40vw;
        height: auto;
    }
    .cs-content {
        width: 3vw;
        height: 3vw;
        /* background-image: url('../image/hkhy/10/cs.png'); */
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 200;
        position: fixed;
        bottom: 10vw;
        right: 1.4vw;
    }
    .service_tip:hover {
        cursor: pointer;
    }
    .zone-left-desc {
        width: 10vw;
        height: 2.7vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 0.8vw;
        margin-left: 1vw;
        color: white;
    }
    .zone-left-desc div {
        color: white;
        border-bottom: white 1px solid;
    }
    .zone-left-desc div:hover {
        cursor: pointer;
    }
    .login-btn {
        width: 16.1vw;
        height: 5.5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 9.8vw;
        left: 38.8vw;
        color: #FFFFFF;
        font-size: 2.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        z-index: 101;
    }
    .login-label {
        position: absolute;
        top: 1.7vw;
    }
    .login-label-34,
    .login-label-54,
    .login-label-40 {
        position: absolute;
        top: 1vw;
        font-weight: 600;
        -webkit-text-stroke: 1px #491d05;
        letter-spacing: 5px;
        font-size: 2.5vw;
    }
    .content-tip {
        width: 100%;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: -3.6vw;
        left: 0vw;
        color: #E6E6E6;
        font-size: 1vw;
    }
    .tips {
        position: absolute;
        left: 16vw;
    }
    .tips-34,
    .tips-54,
    .tips-40 {
        position: absolute;
        left: 16vw;
        color: #212121;
    }
    .role-info {
        display: flex;
        flex-direction: row;
        font-size: 1.5vw;
    }
    .role-info-54,
    .role-info-34,
    .role-info-40 {
        display: flex;
        flex-direction: row;
        font-size: 1.5vw;
        color: white;
        /* 添加棕色字体边框 */
        text-shadow: -1px -1px 0 #8B4513, 1px -1px 0 #8B4513, -1px 1px 0 #8B4513, 1px 1px 0 #8B4513;
    }
    .role-name {
        display: flex;
        flex-direction: row;
    }
    .server-info {
        /* margin-left: 1.1vw; */
    }
    .activity-content {
        width: 47.2vw;
        height: 24.5vw;
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 17.7vw;
        left: 39.2vw;
    }
    .activity-list {
        width: 100%;
        height: 24.5vw;
        display: flex;
        flex-direction: column;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .activity-main-image {
        display: none;
    }
    .list-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    .list-left {
        width: 41.3vw;
        height: 100%;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .list-right {
        width: 5.8vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        left: 0px;
    }
    .list-scroll-bg {
        width: 1vw;
        height: 23.20vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .list-scroll-bg-34,
    .list-scroll-bg,
    .list-scroll-bg-40 {
        width: 0.5vw;
        height: 23.20vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .activity-scroll-item {
        width: 1vw;
        height: 1.4vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
    }
    .activity-scroll-item-34,
    .activity-scroll-item-54,
    .activity-scroll-item-40 {
        width: 0.5vw;
        height: 1.4vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
    }
    .list-item {
        display: flex;
        flex-direction: row;
        width: 41.3vw;
        height: auto;
        align-items: center;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 1vw;
        padding: 1vw 0px;
    }
    .item-left {
        width: 27vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .item-top {
        height: auto;
        width: 26.4vw;
        display: flex;
        flex-direction: row;
        margin-left: 2.3vw;
        align-items: center;
    }
    .list-image {
        width: 2.8vw;
        height: 2.8vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        /* background-image: url('../image/hkhy/33/activity/pc/award-image.png'); */
    }
    .list-title {
        font-size: 1.6vw;
        margin-left: 1vw;
        color: white;
    }
    .list-title-34,
    .list-title-54 {
        font-size: 1.6vw;
        margin-left: 1vw;
        color: #3A0F06;
    }
    .list-title-40 {
        font-size: 1.6vw;
        margin-left: 1vw;
        color: white;
    }
    .list-describe {
        left: 1.7vw;
        width: 100%;
        font-size: 1.1vw;
        color: #D0D0D0;
        position: relative;
    }
    .list-describe-34,
    .list-describe-54 {
        left: 1.5vw;
        width: 100%;
        font-size: 1.1vw;
        color: #D58128;
        position: relative;
    }
    .list-describe-40 {
        left: 1.5vw;
        width: 100%;
        font-size: 1.1vw;
        color: white;
        position: relative;
    }
    .item-right {
        width: 12.9vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .list-btn {
        width: 9.6vw;
        height: 3.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1.3vw;
        color: #FFFFFF;
        cursor: pointer;
    }
    .list-btn-34,
    .list-btn-54,
    .list-btn-40 {
        width: 9.6vw;
        height: 3.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1.4vw;
        color: #FFFFFF;
        cursor: pointer;
        -webkit-text-stroke: 1px #491d05;
        font-weight: 600;
    }
    .activity_detail {
        width: 43.3vw;
        height: 19.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        top: -4.5vw;
    }
    .activity_detail-34,
    .activity_detail-54,
    .activity_detail-40 {
        width: 43.3vw;
        height: 19.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        top: -3.5vw;
    }
    .detail-title {
        width: 42.1vw;
        height: 2.8vw;
        margin-top: 4.4vw;
    }
    .detail-title-34,
    .detail-title-54,
    .detail-title-40 {
        width: 42.1vw;
        height: 2.8vw;
        margin-top: 3.4vw;
    }
    .detail-title-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
    }
    .dtitle-item {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #E3C786;
        font-size: 1vw;
    }
    .dtitle-item-34,
    .dtitle-item-54 {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #3A0F06;
        font-size: 1vw;
        font-weight: 600;
    }
    .dtitle-item-40 {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1vw;
        font-weight: 600;
    }
    .ad-content {
        margin-top: 0vw;
        width: 42.1vw;
        height: 11.2vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .ad-content-left {
        width: 40.5vw;
        height: 11vw;
    }
    .ad-content-right {
        width: 1.4vw;
        height: 11.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1vw;
    }
    .ad-scroll-item {
        width: 1vw;
        height: 1.3vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .ad-scroll-item-34,
    .ad-scroll-item-54,
    .ad-scroll-item-40 {
        width: 0.5vw;
        height: 1.3vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .ad-scroll-bg {
        width: 1vw;
        height: 11vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .ad-scroll-bg-34,
    .ad-scroll-bg-54,
    .ad-scroll-bg-40 {
        width: 0.5vw;
        height: 11vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .date-list {
        width: 100%;
        height: 2.8vw;
        display: flex;
        flex-direction: row;
    }
    .date-info {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 0.8vw;
    }
    .date-info-34,
    .date-info-54,
    .date-info-40 {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #D58128;
        font-size: 0.8vw;
        font-weight: 600;
    }
    .date-btn {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }
    .pay-border {
        width: 100%;
        height: 1px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .reward-btn {
        width: 5.3vw;
        height: 1.8vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        cursor: pointer;
        font-size: 0.8vw;
    }
    .reward-btn-34,
    .reward-btn-54,
    .reward-btn-40 {
        width: 5.3vw;
        height: 1.8vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        cursor: pointer;
        letter-spacing: 2px;
        font-weight: 600;
        -webkit-text-stroke: 1px #491d05;
    }
    .purchase-list-title {
        width: 19vw;
        height: 3.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 10.4vw;
        left: 38.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .purchase-list-title-34,
    .purchase-list-title-54,
    .purchase-list-title-40 {
        width: 19vw;
        height: 3.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 9.3vw;
        left: 38.3vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .purchase-list-title-label {
        color: #D1BE89;
        font-size: 1.3vw;
        position: absolute;
        top: 0.85vw;
    }
    .purchase-list-title-label-34,
    .purchase-list-title-label-54,
    .purchase-list-title-label-54 {
        color: #823611;
        font-weight: 600;
        position: absolute;
        top: 0.85vw;
    }
    /*** 商品信息 **/
    .product-list-content {
        width: 43.4vw;
        height: 17.4vw;
        top: 34.6vw;
        left: 39.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
    }
    .product-title {
        width: 42vw;
        height: 2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 2.3vw;
    }
    .product-title-34,
    .product-title-54,
    .product-title-40 {
        width: 42vw;
        height: 3vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -0.4vw;
    }
    .product-title-content {
        width: 42vw;
        height: 2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
    }
    .product-title-content-34,
    .product-title-content-54,
    .product-title-content-40 {
        width: 42vw;
        height: 3vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: row;
    }
    .pl-item {
        height: 100%;
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #E3C786;
        font-size: 1vw;
    }
    .product-info-list {
        width: 41.9vw;
        height: 12.8vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .product-info-list-34,
    .product-info-list-54,
    .product-info-list-40 {
        width: 41.9vw;
        height: 12.8vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .product-right {
        width: 1.4vw;
        height: 11.2vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .product-scroll-bg {
        width: 1vw;
        height: 11vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .product-scroll-bg-34,
    .product-scroll-bg-54,
    .product-scroll-bg-40 {
        width: 0.5vw;
        height: 11vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .product-scroll-item {
        width: 1vw;
        height: 1.3vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .product-scroll-item-34,
    .product-scroll-item-54,
    .product-scroll-item-40 {
        width: 0.5vw;
        height: 1.3vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .product-left {
        width: 40.5vw;
        height: 100%;
    }
    .product-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        height: 2.1vw;
    }
    .pitem {
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .product-info-item {
        color: #FFFFFF;
        font-size: 0.72vw;
    }
    .product-info-item-34,
    .product-info-item-54,
    .product-info-item-40 {
        color: #D58128;
        font-size: 0.72vw;
        font-weight: 600;
    }
    .ptn-bg {
        width: 5.6vw;
        height: 1.3vw;
        display: flex;
        flex-direction: row;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        align-items: center;
        justify-content: space-between;
    }
    .reduce,
    .plus {
        width: 1.2vw;
        height: 1.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
    }
    .product-num {
        color: #FFFFFF;
        font-size: 0.8vw;
    }
    .select-date-content {
        position: absolute;
        width: 43.3vw;
        height: 1.2vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        top: 16vw;
    }
    .select-date-content-34,
    .select-date-content-54,
    .select-date-content-40 {
        position: absolute;
        width: 43.3vw;
        height: 1.2vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        top: 15.5vw;
    }
    .select-date,
    .select-score {
        display: flex;
        flex-direction: row;
        height: 100%;
        align-items: center;
    }
    .select-label {
        color: #FFFFFF;
        font-size: 0.8vw;
    }
    .select-label-34,
    .select-label-54,
    .select-label-40 {
        color: #212121;
        font-size: 0.8vw;
        font-weight: 600;
    }
    .select-date-value {
        color: #FECD59;
        font-size: 1vw;
    }
    .select-date-value-34,
    .select-date-value-54,
    .select-date-value-40 {
        color: #FF342A;
        font-size: 1vw;
        font-weight: 600;
    }
    .settlement-content {
        width: 43.4vw;
        height: 1.2vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        top: 53.2vw;
        left: 39vw;
        position: absolute;
    }
    .settlement-content-34,
    .settlement-content-54,
    .settlement-content-40 {
        width: 43.4vw;
        height: 1.2vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        top: 52.3vw;
        left: 39vw;
        position: absolute;
    }
    .settlement-score,
    .less-score {
        height: 100%;
        display: flex;
        flex-direction: row;
        font-size: 3vw;
        align-items: center;
    }
    .settlement-label {
        color: #FFFFFF;
        font-size: 0.8vw;
        margin-right: 0.5vw;
    }
    .settlement-label-34,
    .settlement-label-54,
    .settlement-label-40 {
        color: #212121;
        font-size: 0.8vw;
        font-weight: 600;
    }
    .settlement-num {
        color: #FECD59;
        font-size: 1vw;
    }
    .settlement-num-34,
    .settlement-num-54,
    .settlement-num-40 {
        color: #FF342A;
        font-size: 1vw;
        font-weight: 600;
    }
    .exchange-content {
        width: 15.1vw;
        height: 10vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        top: 54.5vw;
        left: 53.6vw;
        margin-bottom: 30vw;
        position: absolute;
    }
    .exchange-btn {
        width: 15.1vw;
        height: 5.1vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 2vw;
        cursor: pointer;
    }
    .exchange-label {
        position: absolute;
        top: 1.6vw;
    }
    .exchange-label-34,
    .exchange-label-54,
    .exchange-label-40 {
        position: absolute;
        top: 1.2vw;
        font-weight: 600;
        -webkit-text-stroke: 1px #491d05;
        letter-spacing: 2px;
    }
    .message-container {
        width: 100%;
        height: 100vh;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 900;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .message-content {
        width: 32.9vw;
        height: 23.9vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .message-detail {
        width: 30vw;
        height: 23.9vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 2vw;
    }
    .message-detail-34,
    .message-detail-54,
    .message-detail-40 {
        width: 30vw;
        height: 23.9vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #D58128;
        font-size: 1.5vw;
    }
    .message-close {}
    .rule-close {
        width: 2.2vw;
        height: 2.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 34vw;
        top: 0vw;
        cursor: pointer;
    }
    .back-btn {
        width: 7.5vw;
        height: 2.5vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 4.6vw;
        left: 83vw;
        color: #FFFFFF;
        font-size: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .logout-btn {
        width: 6.2vw;
        height: 2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #FFFFFF;
        font-size: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-left: 0.5vw;
    }
    .select-role {
        width: 6.2vw;
        height: 2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #FFFFFF;
        font-size: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        margin-left: 0.5vw;
    }
    .select-role-container {
        width: 100%;
        height: 100vh;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .select-role-content {
        width: 33vw;
        height: 17.7vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .role-title {
        width: 100%;
        height: 1.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 1vw;
        position: relative;
        top: 3.2vw;
    }
    .role-title-34,
    .role-title-54,
    .role-title-40 {
        width: 100%;
        height: 1.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 2vw;
        position: relative;
        top: 1.7vw;
    }
    .role-close {
        position: absolute;
        width: 2.2vw;
        height: 2.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        top: -3.2vw;
        left: 33.8vw;
        cursor: pointer;
    }
    .role-content {
        width: 100%;
        height: 12vw;
        overflow-y: auto;
        position: relative;
        top: 3.8vw;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .role-content-34,
    .role-content-54,
    .role-content-40 {
        width: 100%;
        height: 12vw;
        overflow-y: auto;
        position: relative;
        top: 2.9vw;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .role-item {
        width: 98%;
        height: 3.6vw;
        display: flex;
        flex-direction: row;
        color: #FFFFFF;
        font-size: 0.8vw;
        align-items: center;
        justify-content: space-between;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0px 1%;
    }
    .role-item-34,
    .role-item-54,
    .role-item-40 {
        width: 98%;
        height: 3.6vw;
        display: flex;
        flex-direction: row;
        color: #3e0000;
        font-size: 0.8vw;
        align-items: center;
        justify-content: space-between;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0px 1%;
    }
    .role-left {
        width: 25%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .role-center {
        width: 20%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .role-right {
        width: 30%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .role-select-btn {
        width: 25%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .select-role-btn {
        width: 6vw;
        height: 2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        font-size: 1vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: white;
    }
    .pay-role-info {
        width: 80%;
        height: 1.5vw;
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 2.5vw;
        left: 1vw;
        font-size: 1.2vw;
    }
    .pay-role-info-34,
    .pay-role-info-54,
    .pay-role-info-40 {
        width: 80%;
        height: 1.5vw;
        display: flex;
        flex-direction: row;
        position: absolute;
        top: 1vw;
        left: 1vw;
        font-size: 1.2vw;
    }
    .pay-role-label {
        color: #E3C786;
    }
    .pay-role-name {
        color: #FFFFFF;
    }
    .pay-role-server {
        color: #FFFFFF;
    }
    .rule-btn {
        display: none;
    }
    .confirm-container {
        width: 100%;
        height: 100vh;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .confirm-content {
        width: 43.3vw;
        height: 19.6vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .confirm-detail {
        width: 100%;
        height: 65vw;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        font-size: 4vw;
    }
    .confirm-close {
        width: 2.2vw;
        height: 2.2vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 44vw;
        top: -1vw;
        cursor: pointer;
    }
    .confirm-role {
        display: flex;
        flex-direction: row;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        align-items: center;
        text-align: center;
        color: white;
        font-size: 1.2vw;
        padding-left: 1vw;
        padding-top: 1vw;
        padding-bottom: 1vw;
        margin-top: 1.7vw;
    }
    .confirm-role-34,
    .confirm-role-54,
    .confirm-role-40 {
        display: flex;
        flex-direction: row;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        align-items: center;
        text-align: center;
        color: white;
        font-size: 1.2vw;
        padding-left: 1vw;
        padding-top: 0.8vw;
        padding-bottom: 0.8vw;
        margin-top: 0.7vw;
    }
    .confirm-server {
        display: flex;
        flex-direction: row;
    }
    .confirm-product {
        width: 98%;
        display: flex;
        flex-direction: row;
        margin-left: 1%;
    }
    .confirm-label {
        color: black;
        font-size: 4vw;
    }
    .confirm-value {
        color: #E94631;
        text-align: center;
        font-size: 4vw;
    }
    .confirm-content-right {
        width: 1.4vw;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .confirm-scroll-item {
        width: 1vw;
        height: 1.3vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .confirm-scroll-item {
        width: 0.5vw;
        height: 1.3vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .confirm-scroll-bg {
        width: 1vw;
        height: 11vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
    }
    .confirm-scroll-bg-34,
    .confirm-scroll-bg-54,
    .confirm-scroll-bg-40 {
        width: 0.5vw;
        height: 11vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        margin-top: 0.3vw;
    }
    .confirm-product-list {
        width: 95%;
        height: 11vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 3.5vw;
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
            /* 完全隐藏 */
            width: 0;
            /* 宽度设为0 */
        }
    }
    .confirm-product-list .product-list-item {
        width: 100%;
        height: 2.1vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.5vw 0px;
    }
    .confirm-border {
        width: 100%;
        display: block;
        min-height: 1px;
        height: 1px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .confirm-title {
        color: #E3C786;
        font-size: 1vw;
    }
    .confirm-title-34,
    .confirm-title-54,
    .confirm-title-40 {
        color: #3A0F06;
        font-size: 1vw;
    }
    .confirm-item {
        width: 30%;
        text-align: center;
    }
    .confirm-title-name {
        width: 40%;
        text-align: center;
    }
    .confirm-role-value {
        display: flex;
        flex-direction: row;
    }
    .current-server {
        /* margin-left: 2vw; */
    }
    .confirm-name {
        width: 40%;
        text-align: center;
        font-size: 0.7vw;
        color: white;
    }
    .confirm-score {
        width: 30%;
        text-align: center;
        font-size: 0.7vw;
        color: white;
    }
    .confirm-num {
        width: 30%;
        text-align: center;
        font-size: 0.7vw;
        color: white;
    }
    .confirm-name-34,
    .confirm-name-54,
    .confirm-name-40 {
        width: 40%;
        text-align: center;
        font-size: 0.7vw;
        color: #D58128;
    }
    .confirm-score-34,
    .confirm-score-54,
    .confirm-score-40 {
        width: 30%;
        text-align: center;
        font-size: 0.7vw;
        color: #D58128;
    }
    .confirm-num-34,
    .confirm-num-54,
    .confirm-num-40 {
        width: 30%;
        text-align: center;
        font-size: 0.7vw;
        color: #D58128;
    }
    .confirm-point {
        color: white;
        margin-left: 2vw;
        font-size: 0.8vw;
        margin-top: 0.5vw;
        display: flex;
        flex-direction: row;
        text-align: center;
    }
    .confirm-point-34,
    .confirm-point-54,
    .confirm-point-40 {
        color: #3A0F06;
        margin-left: 2vw;
        font-size: 0.8vw;
        margin-top: 0.5vw;
        display: flex;
        flex-direction: row;
        text-align: center;
    }
    .center-text {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .confirm-point-value {
        color: #E94631;
        margin: 0px 1vw;
        font-size: 1vw;
    }
    .confirm-tips {
        margin-left: 2vw;
        font-size: 0.8vw;
        color: white;
    }
    .confirm-tips-34,
    .confirm-tips-54,
    .confirm-tips-40 {
        margin-left: 2vw;
        font-size: 0.8vw;
        color: red;
        font-weight: bold;
    }
    .confirm-btn {
        width: 15.1vw;
        height: 5.1vw;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 2vw;
        cursor: pointer;
        margin-top: 1vw;
    }
    .confirm-btn-label {
        top: 1.6vw;
        margin-top: 0.5vw;
    }
    .confirm-btn-label-34,
    .confirm-btn-label-54,
    .confirm-btn-label-40 {
        top: 1.6vw;
        margin-top: 0vw;
        font-weight: 600;
        -webkit-text-stroke: 1px #491d05;
        letter-spacing: 3px;
    }
}

.price-info {
    pointer-events: none;
}

.gray {
    background-color: #EBEBEB;
}

.white {
    background-color: #FFFFFF;
}