.vip-panel {
    height: 100%;
    line-height: 0
}

    .vip-panel .slider {
        height: 5.1rem
    }

        .vip-panel .slider .slider-container > div > div {
            position: relative
        }

            .vip-panel .slider .slider-container > div > div img {
                width: 20rem;
                height: 5rem
            }

            .vip-panel .slider .slider-container > div > div .container {
                position: absolute;
                left: 50%;
                top: 0;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                height: 5rem
            }

                .vip-panel .slider .slider-container > div > div .container .content {
                    width: 4.4rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    position: absolute;
                    right: 1.8rem;
                    top: .5rem;
                    word-break: break-word
                }

                    .vip-panel .slider .slider-container > div > div .container .content .title {
                        font-family: nunito-black;
                        text-transform: uppercase;
                        font-weight: 700;
                        margin-bottom: .39rem;
                        color: #cd9c31;
                        font-size: .23rem;
                        line-height: .23rem
                    }

                    .vip-panel .slider .slider-container > div > div .container .content .desc {
                        font-size: .15rem;
                        line-height: .2rem
                    }

                        .vip-panel .slider .slider-container > div > div .container .content .desc > p:first-child {
                            margin-bottom: .46rem
                        }

                        .vip-panel .slider .slider-container > div > div .container .content .desc > p:nth-child(2) {
                            margin-bottom: .29rem
                        }

                .vip-panel .slider .slider-container > div > div .container .suspend {
                    position: absolute;
                    display: flex
                }

                    .vip-panel .slider .slider-container > div > div .container .suspend img {
                        width: 100%;
                        height: 100%
                    }

        .vip-panel .slider .slider-container > div .container {
            color: #fff
        }

            .vip-panel .slider .slider-container > div .container .vip-suspend .suspend:first-of-type {
                width: .89rem;
                height: 1rem;
                right: -.5rem;
                bottom: 1.2rem
            }

            .vip-panel .slider .slider-container > div .container .vip-suspend .suspend:nth-of-type(2) {
                width: 1.3rem;
                height: .98rem;
                right: .5rem;
                bottom: .2rem
            }

        .vip-panel .slider .pagination {
            display: none
        }

    .vip-panel .vip-box {
        width: 100%;
        /* max-width: 11.45rem; */
        margin: auto;
    }

    .vip-panel .vip-status {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: .55rem auto .42rem;
        width: 100%;
        border-bottom: .01rem solid #3e3b2f
    }

        .vip-panel .vip-status .status-img {
            width: 5.5rem;
            position: absolute;
            left: -1.3rem;
            top: -2.1rem;
            object-fit: cover
        }

        .vip-panel .vip-status .dummy-col {
            width: 3.8rem
        }

        .vip-panel .vip-status .progress-status {
            width: 8rem;
            margin-bottom: .42rem
        }

            .vip-panel .vip-status .progress-status .current-status {
                width: 100%;
                position: relative
            }

                .vip-panel .vip-status .progress-status .current-status .status-title {
                    font-weight: 700;
                    font-size: .18rem;
                    line-height: .18rem;
                    color: #db925c;
                    margin-left: .08rem
                }

                .vip-panel .vip-status .progress-status .current-status .progress-bar {
                    position: relative;
                    overflow: hidden;
                    height: .27rem;
                    margin-top: .16rem;
                    border-radius: .2rem;
                    background: repeating-linear-gradient(35deg, #3b3f4c, #3b3f4c .15rem, #111 0, #111 .2rem)
                }

                    .vip-panel .vip-status .progress-status .current-status .progress-bar > span {
                        position: relative;
                        display: block;
                        height: 100%
                    }

                        .vip-panel .vip-status .progress-status .current-status .progress-bar > span:after {
                            content: "";
                            position: absolute;
                            top: 0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            background: repeating-linear-gradient(35deg, #977c32, #977c32 .15rem, #111 0, #111 .2rem)
                        }

            .vip-panel .vip-status .progress-status .status-level {
                display: flex;
                width: 100%
            }

                .vip-panel .vip-status .progress-status .status-level .all-level {
                    flex: 1 1 0;
                    text-align: center
                }

                    .vip-panel .vip-status .progress-status .status-level .all-level.level-silver hr {
                        background: #a5a5a5;
                        background-color: #a5a5a5;
                        border: #a5a5a5
                    }

                    .vip-panel .vip-status .progress-status .status-level .all-level.level-rose hr {
                        background: #d89393;
                        background-color: #d89393;
                        border: #d89393
                    }

                    .vip-panel .vip-status .progress-status .status-level .all-level.level-gold hr {
                        background: #a38842;
                        background-color: #a38842;
                        border: #a38842
                    }

                    .vip-panel .vip-status .progress-status .status-level .all-level.level-platinum hr {
                        background: #a5c0d4;
                        background-color: #a5c0d4;
                        border: #a5c0d4
                    }

                    .vip-panel .vip-status .progress-status .status-level .all-level.level-diamond hr {
                        background: #7d6daa;
                        background-color: #7d6daa;
                        border: #7d6daa
                    }

                    .vip-panel .vip-status .progress-status .status-level .all-level.level-royal hr {
                        background: #f0c783;
                        background-color: #f0c783;
                        border: #f0c783
                    }

                    .vip-panel .vip-status .progress-status .status-level .all-level .memberGroupLevelArrowContainer {
                        width: .01rem;
                        margin: .05rem auto
                    }

                    .vip-panel .vip-status .progress-status .status-level .all-level p {
                        font-weight: 700;
                        font-size: .16rem;
                        line-height: .16rem;
                        margin-bottom: .07rem
                    }

                        .vip-panel .vip-status .progress-status .status-level .all-level p[data-level=NORMAL] {
                            color: #b1f1f1
                        }

                        .vip-panel .vip-status .progress-status .status-level .all-level p[data-level=BRONZE] {
                            color: #db925c
                        }

                        .vip-panel .vip-status .progress-status .status-level .all-level p[data-level=SILVER] {
                            color: #bebbbb
                        }

                        .vip-panel .vip-status .progress-status .status-level .all-level p[data-level=GOLD] {
                            color: #fbcc4f
                        }

                        .vip-panel .vip-status .progress-status .status-level .all-level p[data-level=PLATINUM] {
                            color: #a7b6b8
                        }

                        .vip-panel .vip-status .progress-status .status-level .all-level p[data-level=DIAMOND] {
                            color: #78d0eb
                        }

                        .vip-panel .vip-status .progress-status .status-level .all-level p[data-level=RUBY] {
                            color: #ff4b4b
                        }

                    .vip-panel .vip-status .progress-status .status-level .all-level span {
                        color: #d2d2d2;
                        font-size: .14rem;
                        line-height: .18rem
                    }

    .vip-panel .vip-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }

        .vip-panel .vip-table tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
            text-align: center
        }

            .vip-panel .vip-table tr td {
                align-items: flex-start;
                display: table-cell;
                vertical-align: inherit;
                color: #db925c;
                font-size: 17px;
                line-height: 17px;
                padding-bottom: 1.22rem;
            }

                .vip-panel .vip-table tr td:first-child {
                    text-align: left;
                    font-size: 19px;
                    line-height: 19px;
                    color: #a9acb6;
                    width: 30.74rem;
                    padding-right: .62rem
                }

                .vip-panel .vip-table tr td img {
                    width: 100%;
                    max-width: 100px;
                }

                .vip-panel .vip-table tr td.content-title {
                    text-align: left;
                    font-family: nunito-black;
                    font-size: 19px;
                    line-height: 19px;
                    color: #db925c;
                    padding-top: 20px;
                    padding-bottom: 10px;
                }

            .vip-panel .vip-table tr:first-child td {
                padding: 0
            }

            .vip-panel .vip-table tr:last-child {
                border-bottom: .01rem solid #3e3b2f
            }

                .vip-panel .vip-table tr:last-child td {
                    padding-bottom: .4rem
                }

            .vip-panel .vip-table tr:not(:first-child):not(:nth-child(2)) td:first-child {
                padding-left: .05rem
            }

        .vip-panel .vip-table .table-type {
            border-bottom: .01rem solid #3e3b2f
        }

            .vip-panel .vip-table .table-type td {
                font-weight: 700;
                padding-bottom: .24rem;
                font-size: 19px;
                line-height: 19px;
            }

                .vip-panel .vip-table .table-type td:first-child {
                    font-family: nunito-black;
                    font-size: 2.22rem;
                    line-height: 2.25rem;
                    color: #db925c;
                    padding-top: .08rem;
                    padding-left: .02rem
                }

                .vip-panel .vip-table .table-type td:not(:first-child) {
                    padding-top: .12rem
                }

                .vip-panel .vip-table .table-type td.type-title {
                    white-space: nowrap
                }

                .vip-panel .vip-table .table-type td.type-silver {
                    color: #a5a5a5
                }

                .vip-panel .vip-table .table-type td.type-gold {
                    color: #a38842
                }

                .vip-panel .vip-table .table-type td.type-platinum {
                    color: #a5c0d4
                }

                .vip-panel .vip-table .table-type td.type-diamond {
                    color: #7d6daa
                }

                .vip-panel .vip-table .table-type td.type-royal {
                    color: #f0c783
                }

    .vip-panel .vip-btm {
        display: block;
        margin-left: .85rem;
        margin-top: .67rem;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        max-width: 10rem
    }

.vip-page .acct-bar .member-info .name-box .username {
    color: #cd9c31
}