@charset "UTF-8";
.vip-info-wrap[data-v-29b53aa5] {
    position: relative
}

.vip-info-wrap .vip-log[data-v-29b53aa5] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-card);
    margin: 0 calc(0px - var(--mg)) 0;
    padding: 0 var(--mg)
}

.vip-info-wrap .vip-wrap[data-v-29b53aa5] {
    padding-top: var(--mg)
}

.vip-info-wrap .vip-wrap .container-card[data-v-29b53aa5] {
    margin-bottom: var(--mg);
    position: relative;
    padding: 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-29b53aa5]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .vip-item[data-v-29b53aa5] {
    margin: 12px 0;
    position: relative;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .yx_alert .vip-item .vip-main[data-v-29b53aa5] {
    text-align: left
}

.vip-info-wrap .vip-wrap .vip-item .vip-main[data-v-29b53aa5] {
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding-left: 80px;
    line-height: 20px;
    padding-top: 4px;
    padding-bottom: 4px;
    background: var(--bg-card)
}

.vip-info-wrap .vip-wrap .vip-item .join[data-v-29b53aa5] {
    position: absolute;
    top: 16px;
    right: 14px;
    background: var(--primary);
    padding: 8px 10px;
    border-radius: 10px;
    line-height: 20px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .vip-main .vipbg2[data-v-29b53aa5] {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0
}

.vip-info-wrap .vip-wrap .vip-main .flex_v0[data-v-29b53aa5] {
    text-align: left;
    justify-content: left
}

.vip-info-wrap .vip-wrap .vip-main .flex_v0 div[data-v-29b53aa5] {
    flex: 1
}

.vip-info-wrap .vip-wrap .vip-item .vipbg[data-v-29b53aa5] {
    background: url(/assets/index-recharge-icon2-5b8127ee.png) no-repeat;
    height: 120px;
    width: 62px;
    background-size: 100%;
    position: absolute;
    left: 8px;
    top: 22px;
    text-align: center;
    color: #119bdf;
    font-size: 18px;
    font-weight: 700;
    line-height: 55px;
    padding-right: 8px
}

.vip-info-wrap .vip-wrap .vip-main .main-left[data-v-29b53aa5] {
    flex: 1;
    padding-top: 10px;
    padding-left: 25px
}

.vip-info-wrap .vip-wrap .vip-main .main-left .name[data-v-29b53aa5] {
    font-size: 18px
}

.vip-info-wrap .vip-wrap .vip-main .main-left>div[data-v-29b53aa5] {
    margin-bottom: 6px
}

.vip-info-wrap .vip-wrap .vip-main .main-right[data-v-29b53aa5] {
    position: relative;
    margin-left: 15px
}

.vip-info-wrap .vip-wrap .vip-main .main-right img[data-v-29b53aa5] {
    width: 70px;
    height: 70px
}

.vip-info-wrap .vip-wrap .vip-item .vip-earn>div[data-v-29b53aa5] {
    flex: 1
}

.vip-info-wrap .vip-wrap .vip-item .vip-earn[data-v-29b53aa5] {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 8px;
    color: #7f869e
}

.vip-info-wrap .vip-wrap .vip-earn .minfo[data-v-29b53aa5] {
    color: #fff;
    font-weight: 600;
    margin-bottom: 8px
}

.vip-info-wrap .vip-wrap .level-info[data-v-29b53aa5] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-29b53aa5] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-29b53aa5] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-29b53aa5] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-29b53aa5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-29b53aa5]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-29b53aa5] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-29b53aa5] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-29b53aa5] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-29b53aa5] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-29b53aa5] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-29b53aa5] {
    position: relative;
    font-size: 13px;
    background: var(--primary);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-29b53aa5] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-29b53aa5]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-29b53aa5 3s ease-in-out infinite
}

@keyframes shiny-btn1-29b53aa5 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-29b53aa5] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-29b53aa5] {
    margin-left: 5px
}

.vip-info-wrap[data-v-d109359b] {
    position: relative
}

.vip-info-wrap .vip-log[data-v-d109359b] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: #a0d7f2;
    margin: 0 calc(0px - var(--mg)) 0;
    padding: 0 var(--mg)
}

.vip-info-wrap .vip-wrap[data-v-d109359b] {
    padding-top: var(--mg)
}

.vip-info-wrap .vip-wrap .container-card[data-v-d109359b] {
    margin-bottom: var(--mg);
    position: relative;
    padding: 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-d109359b]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .vip-item[data-v-d109359b] {
    margin: 12px 0;
    position: relative;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .yx_alert .vip-item .vip-main[data-v-d109359b] {
    text-align: left
}

.vip-info-wrap .vip-wrap .vip-item .vip-main[data-v-d109359b] {
    border: 1px solid #a0d7f2;
    border-radius: 15px;
    padding-left: 80px;
    line-height: 20px;
    padding-top: 4px;
    padding-bottom: 4px;
    background: #e9f6f3
}

.vip-info-wrap .vip-wrap .vip-item .join[data-v-d109359b] {
    position: absolute;
    top: 16px;
    right: 14px;
    background: var(--primary);
    padding: 8px 10px;
    border-radius: 10px;
    line-height: 20px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .vip-main .vipbg2[data-v-d109359b] {
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAAAqCAYAAADrhujJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozOThBNEUzNTYwNERFRjExOThGQkI2NkI3RjVCRTc3MSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0ODA1RDBFNzRENzExMUVGQjc0MEVDNThFRUFGMjkwRSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0ODA1RDBFNjRENzExMUVGQjc0MEVDNThFRUFGMjkwRSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJGNTA1MkRFNzA0REVGMTE5OEZCQjY2QjdGNUJFNzcxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM5OEE0RTM1NjA0REVGMTE5OEZCQjY2QjdGNUJFNzcxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+kroHXgAABcFJREFUeNrsWl9sU1UYP+fcP71ru64rg4VVZctGF8MfI7oYQRdQRJgyMWEq8MID+oBgog++aAgmJsaXvYjuQRM1kRn8gyHCECMkgBmKImpkQBU3iRvbGG03Vnrbe+85fqfNttuyP21379iYJ9na3nPOved3vu983+/3tZgxhmZjI2iWNjHbgcUfdCCfcpAw5KjXaPFOxIQChJkx6Z3HsQsiDr8WUp/sHWsMPFfUaMm+hOFfLQtdxyRytQHG66Z+Wae+JtUofxb6T8uk+zl+v/C28skD540hee31xLLPdDpHsnDzH3JJv90Pi78PFktHf66jIaotfZoyJ9bo3KeKHCfr4fJ+U39dTK/aotF5joRRtsrrONYAl9+1xNVTu1r0vMWgk001KpbAUvxj9VPmuMe8VMbEqvQR2M19Z2QjiM/KMw5jBbd9pw4XjeNrWsYFLd0jEE3+H7oTQrrFwe2mBVgDObVofVoGt4laidKFtlRLaGNlOar2+pBEhJRpqIEuRkLoi0sdaO9FDfWpZflsDc7RYNh24Bi8bHOgG+2pXT5qP9+Axb65yb/dNQjtONGKmoOlYGMhh2cYvSOuDK/YuJLRfxWujwRGrHfaDnzr3T2occXyrMfzDZKFU+jD8/OzCagKROy1OvWuGTEyQZS66ryOo074IEBKTRjM/QBD0jAWSt11XuU7OJbbmm0Bzt07F9BDrXHFg+jr9tYs3J74Vb28KWHMn0eZjFMRXsZRfdEmgrRnGNiaexyAJgZ1D7tQVFu0USCD6+Ftsy3MbXMg/33j8SALJxcghXrBomTk2IJjUw/RIK0CaZGA2MBrkWA+OgYrJDotVmyjrFsCVXnPbaisyCaLGBjrND9GGKe2AQ94fXnPrfAU2Zqu2ASBfVLAg5Cm8m3tA/23VERN6sbNf17Ke+7nl9qzGEWvwYnW8wOm2efqnJDYORdESwii87V87i+QSMQ24DwdvQiEJNfG59ycykaXuBLpOwSBKudnyKT3iK1n6FNgYTtyAM/H8jkZoDkdGxjVcrj/ZdDYfbmsCfR6QiSRt21lbjx/7g2WoSOXW5O5maepgLc4jasHI+HkmR6LqwMpESAvv++RW0MYG30Eq2cwiu/j+pwXHICFvWpQVxPX2xO7+IDhks7tCqnr/hiXIWRbc6v8ZI+i0dL91xM162xXTiSkKWLHDzLp2T4EACjq9pgeeCtu3OkZ072F7liBGGzsj9e+zj+PV4GZljU3zsgGE8sejumVh31Ky0J+LRJ/9D2n1La+UP6pxSF0RtNd+5rmln/53iX9vmkI9C3Lk1Y0sPAdGp37DoiVpJXD6uMnwOOeAKvuNo9ziB2tfKPC6poDU5LHLSMT+AYrlE8fhDP+sVM6F8SmmsQNvfoxECE16epc70iXpXpkSgmMdcATBrjrtoHE8q2K8M8jTulC27DgAEFCWcHq9BxA5mTcoWBGAk9VWJgnRVrqOiG4fWXO3YxJC3hp25wIbkouMxN4SoKacGmp3J59KWkGAx+3ZsZmC3D748r/wKd3MzL4pj7B0ZipwHmgw2kJLO17NYbF29LiGLFBICXDAU2jJat8yuGl/D28loJYecmc2TDSum8P4Fj9ViThqJm6Am8/5JFPNavGXcej2pLFI4ImognkRkvOQmg6Ag+ra88Wyj8ejRv+DUMunwSP0KbMscD0fsZI/dJui9vpISRDcb0CurptvAkgVv4FKfqC+UcClgOBm6tw7sL2YOYszfgr/Xl17Q7hcj1Y/oAsdEXNHEYWelS3fOa4Iv5dP1HBYdKuzoNLTF+40g7YlCmCwbyNvDKVAZ6XcTcUK0dqneLFZQyJC2Dzr2CcOAsB7SQ3Rt5xJNsKjP+jb9oBeHku33LmVnWJ6C7p1zf74yvfsCxWWFGBgZTitwt0Sn4WiiA/752qAJq1qzul83ui2uKdjIkE/MTiI455vaxXIqFdU5YyZ+sP/P4TYAD9mleXZ/IMcgAAAABJRU5ErkJggg==) no-repeat right;
    background-size: 30px auto;
    margin: 6px 0;
    padding-right: 30px;
    height: 25px;
    line-height: 25px;
    display: inline-block
}

.vip-info-wrap .vip-wrap .vip-main .flex_v0[data-v-d109359b] {
    text-align: left;
    justify-content: left
}

.vip-info-wrap .vip-wrap .vip-main .flex_v0 div[data-v-d109359b] {
    flex: 1
}

.vip-info-wrap .vip-wrap .vip-item .vipbg[data-v-d109359b] {
    background: url(/assets/mine2-0b50fcf0.png) no-repeat;
    height: 120px;
    width: 62px;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    color: #119bdf;
    font-size: 18px;
    font-weight: 700;
    line-height: 55px;
    padding-right: 8px;
    padding-top: 8px
}

.vip-info-wrap .vip-wrap .vip-main .main-left[data-v-d109359b] {
    flex: 1;
    padding-top: 10px;
    padding-left: 25px
}

.vip-info-wrap .vip-wrap .vip-main .main-left .name[data-v-d109359b] {
    font-size: 18px
}

.vip-info-wrap .vip-wrap .vip-main .main-left>div[data-v-d109359b] {
    margin-bottom: 6px
}

.vip-info-wrap .vip-wrap .vip-main .main-right[data-v-d109359b] {
    position: relative;
    margin-left: 15px
}

.vip-info-wrap .vip-wrap .vip-main .main-right img[data-v-d109359b] {
    width: 70px;
    height: 70px
}

.vip-info-wrap .vip-wrap .vip-item .vip-earn>div[data-v-d109359b] {
    flex: 1
}

.vip-info-wrap .vip-wrap .vip-item .vip-earn[data-v-d109359b] {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 8px;
    color: #7f869e
}

.vip-info-wrap .vip-wrap .vip-earn .minfo[data-v-d109359b] {
    color: #fff;
    font-weight: 600;
    margin-bottom: 8px
}

.vip-info-wrap .vip-wrap .level-info[data-v-d109359b] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-d109359b] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-d109359b] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-d109359b] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-d109359b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-d109359b]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-d109359b] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-d109359b] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-d109359b] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-d109359b] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-d109359b] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-d109359b] {
    position: relative;
    font-size: 13px;
    background: var(--primary);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-d109359b] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-d109359b]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-d109359b 3s ease-in-out infinite
}

@keyframes shiny-btn1-d109359b {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-d109359b] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-d109359b] {
    margin-left: 5px
}

.vip-info-wrap[data-v-4e0f5316] {
    padding: calc(45px + var(--mg)) var(--mg) 60px
}

.vip-info-wrap .vip-log[data-v-4e0f5316] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--primary);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .container-card[data-v-4e0f5316] {
    overflow: hidden;
    margin-bottom: 12px;
    box-sizing: border-box;
    position: relative;
    background: var(--bg-card);
    padding: 30px 10px 12px;
    border-radius: var(--card-radius);
    box-shadow: var(--box-shadow)
}

.vip-info-wrap .vip-wrap .container-card[data-v-4e0f5316]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-4e0f5316] {
    position: absolute;
    transform: rotate(-45deg);
    left: -48px;
    top: -25px;
    display: flex;
    align-items: center;
    padding: 40px 40px 3px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden;
    font-size: 12px;
    animation: slide-in-bck-center-4e0f5316 .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-4e0f5316 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-4e0f5316] {
    display: none;
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-4e0f5316] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-4e0f5316] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-4e0f5316] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-4e0f5316] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-4e0f5316] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-4e0f5316] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(255, 255, 255, .9);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px;
    color: var(--text-black)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-4e0f5316] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-4e0f5316]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-4e0f5316] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-4e0f5316] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-4e0f5316] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-4e0f5316] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-4e0f5316] {
    position: relative;
    margin-top: 10px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-4e0f5316] {
    position: relative;
    font-size: 13px;
    background: var(--golden-gradient);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--text-black)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-4e0f5316] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-4e0f5316]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-4e0f5316 3s ease-in-out infinite
}

@keyframes shiny-btn1-4e0f5316 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-4e0f5316] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-4e0f5316] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-29c2f435] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--primary);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .container-card[data-v-29c2f435] {
    overflow: hidden;
    margin-bottom: 12px;
    box-sizing: border-box;
    position: relative;
    background: var(--bg-card);
    padding: 30px 10px 12px;
    border-radius: var(--card-radius);
    box-shadow: var(--box-shadow)
}

.vip-info-wrap .vip-wrap .container-card[data-v-29c2f435]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-29c2f435] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden;
    font-size: 12px;
    animation: slide-in-bck-center-29c2f435 .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-29c2f435 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-29c2f435] {
    display: none;
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-29c2f435] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-29c2f435] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-29c2f435] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-29c2f435] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-29c2f435] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-29c2f435] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-29c2f435] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-29c2f435]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-29c2f435] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-29c2f435] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-29c2f435] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-29c2f435] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-29c2f435] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-29c2f435] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-29c2f435] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-29c2f435]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-29c2f435 3s ease-in-out infinite
}

@keyframes shiny-btn1-29c2f435 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-29c2f435] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-29c2f435] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-a5d92ee6] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-card);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-a5d92ee6] {
    margin-bottom: 12px;
    box-sizing: border-box;
    position: relative;
    background: var(--bg-card);
    padding: 30px 10px 12px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .container-card[data-v-a5d92ee6]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-a5d92ee6] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 15px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    font-size: 14px;
    animation: slide-in-bck-center-a5d92ee6 .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-a5d92ee6 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-a5d92ee6] {
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-a5d92ee6] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-a5d92ee6] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-a5d92ee6] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-a5d92ee6] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-a5d92ee6] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-a5d92ee6] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-a5d92ee6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-a5d92ee6]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-a5d92ee6] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-a5d92ee6] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-a5d92ee6] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-a5d92ee6] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-a5d92ee6] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-a5d92ee6] {
    position: relative;
    font-size: 13px;
    background: var(--primary);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-a5d92ee6] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-a5d92ee6]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-a5d92ee6 3s ease-in-out infinite
}

@keyframes shiny-btn1-a5d92ee6 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-a5d92ee6] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-a5d92ee6] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-4b62efc1] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-card);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-4b62efc1] {
    overflow: hidden;
    margin-bottom: 12px;
    box-sizing: border-box;
    position: relative;
    background: var(--bg-card);
    padding: 30px 10px 12px;
    border-radius: var(--card-radius);
    box-shadow: var(--t27-shadow)
}

.vip-info-wrap .vip-wrap .container-card[data-v-4b62efc1]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-4b62efc1] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden;
    font-size: 12px;
    animation: slide-in-bck-center-4b62efc1 .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-4b62efc1 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-4b62efc1] {
    display: none;
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-4b62efc1] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-4b62efc1] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-4b62efc1] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-4b62efc1] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-4b62efc1] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-4b62efc1] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-4b62efc1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-4b62efc1]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-4b62efc1] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-4b62efc1] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-4b62efc1] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-4b62efc1] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-4b62efc1] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-4b62efc1] {
    position: relative;
    font-size: 13px;
    background: var(--primary);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-4b62efc1] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-4b62efc1]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-4b62efc1 3s ease-in-out infinite
}

@keyframes shiny-btn1-4b62efc1 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-4b62efc1] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-4b62efc1] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-2475f4dd] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-2475f4dd] {
    overflow: hidden;
    margin-bottom: 12px;
    box-sizing: border-box;
    position: relative;
    background: var(--bg-card);
    padding: 30px 10px 12px;
    border-radius: var(--card-radius);
    box-shadow: var(--box-shadow)
}

.vip-info-wrap .vip-wrap .container-card[data-v-2475f4dd]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-2475f4dd] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden;
    font-size: 12px;
    animation: slide-in-bck-center-2475f4dd .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-2475f4dd {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-2475f4dd] {
    display: none;
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-2475f4dd] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-2475f4dd] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-2475f4dd] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-2475f4dd] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-2475f4dd] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-2475f4dd] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-2475f4dd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-2475f4dd]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-2475f4dd] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-2475f4dd] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-2475f4dd] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-2475f4dd] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-2475f4dd] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-2475f4dd] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-2475f4dd] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-2475f4dd]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-2475f4dd 3s ease-in-out infinite
}

@keyframes shiny-btn1-2475f4dd {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-2475f4dd] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-2475f4dd] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-ebc593e6] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-ebc593e6] {
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--card-radius);
    margin-bottom: 12px;
    padding: 30px 10px 12px;
    box-sizing: border-box;
    position: relative;
    box-shadow: var(--box-shadow)
}

.vip-info-wrap .vip-wrap .container-card[data-v-ebc593e6]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-ebc593e6] {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    max-width: 100px;
    padding: 2px 10px;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: var(--text-black);
    background-color: #85ffbd;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(253, 203, 50) 0%, rgb(244, 56, 98) 100.2%);
    font-weight: 700;
    animation: slide-in-bck-center-ebc593e6 .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-ebc593e6 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-ebc593e6] {
    display: none;
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-ebc593e6] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-ebc593e6] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-ebc593e6] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-ebc593e6] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-ebc593e6] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-ebc593e6] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-ebc593e6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-ebc593e6]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-ebc593e6] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-ebc593e6] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-ebc593e6] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-ebc593e6] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-ebc593e6] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-ebc593e6] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-ebc593e6] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-ebc593e6]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-ebc593e6 3s ease-in-out infinite
}

@keyframes shiny-btn1-ebc593e6 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-ebc593e6] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-ebc593e6] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-28a94dfc] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-card);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .container-card[data-v-28a94dfc] {
    overflow: hidden;
    background: var(--card-bg);
    border-radius: var(--card-radius);
    margin-bottom: 12px;
    padding: 30px 10px 12px;
    box-sizing: border-box;
    position: relative
}

.vip-info-wrap .vip-wrap .container-card[data-v-28a94dfc]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-28a94dfc] {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    max-width: 100px;
    padding: 2px 10px;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: var(--text-black);
    background-color: #85ffbd;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(253, 203, 50) 0%, rgb(244, 56, 98) 100.2%);
    font-weight: 700;
    animation: slide-in-bck-center-28a94dfc .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-28a94dfc {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-28a94dfc] {
    display: none;
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-28a94dfc] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-28a94dfc] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-28a94dfc] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-28a94dfc] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-28a94dfc] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-28a94dfc] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-28a94dfc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-28a94dfc]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-28a94dfc] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-28a94dfc] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-28a94dfc] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-28a94dfc] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-28a94dfc] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-28a94dfc] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-28a94dfc] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-28a94dfc]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-28a94dfc 3s ease-in-out infinite
}

@keyframes shiny-btn1-28a94dfc {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-28a94dfc] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-28a94dfc] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-4c812258] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-card);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .container-card[data-v-4c812258] {
    overflow: hidden;
    border-radius: var(--card-radius);
    margin-bottom: 12px;
    padding: 30px 10px 12px;
    box-sizing: border-box;
    position: relative;
    box-shadow: var(--box-shadow);
    color: var(--text-black)
}

.vip-info-wrap .vip-wrap .container-card[data-v-4c812258]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-4c812258] {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    max-width: 100px;
    padding: 2px 10px;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: var(--text-black);
    background-color: #85ffbd;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(253, 203, 50) 0%, rgb(244, 56, 98) 100.2%);
    font-weight: 700;
    animation: slide-in-bck-center-4c812258 .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-4c812258 {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-4c812258] {
    display: none;
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-4c812258] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 var(--card-radius);
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-4c812258] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-4c812258] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-4c812258] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-4c812258] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-4c812258] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-4c812258] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-4c812258]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-4c812258] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-4c812258] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-4c812258] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-4c812258] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-4c812258] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-4c812258] {
    position: relative;
    font-size: 13px;
    background: var(--golden-gradient);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-4c812258] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-4c812258]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-4c812258 3s ease-in-out infinite
}

@keyframes shiny-btn1-4c812258 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-4c812258] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-4c812258] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-c10d552d] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-card);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .container-card[data-v-c10d552d] {
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--card-radius);
    margin-bottom: 12px;
    padding: 30px 10px 12px;
    box-sizing: border-box;
    position: relative;
    box-shadow: var(--box-shadow)
}

.vip-info-wrap .vip-wrap .container-card[data-v-c10d552d]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-c10d552d] {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    max-width: 100px;
    padding: 2px 10px;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: var(--text-black);
    background-color: #85ffbd;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(253, 203, 50) 0%, rgb(244, 56, 98) 100.2%);
    font-weight: 700;
    animation: slide-in-bck-center-c10d552d .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-c10d552d {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-c10d552d] {
    display: none;
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-c10d552d] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-c10d552d] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-c10d552d] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-c10d552d] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-c10d552d] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-c10d552d] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-c10d552d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-c10d552d]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-c10d552d] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-c10d552d] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-c10d552d] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-c10d552d] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-c10d552d] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-c10d552d] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-c10d552d] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-c10d552d]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-c10d552d 3s ease-in-out infinite
}

@keyframes shiny-btn1-c10d552d {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-c10d552d] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-c10d552d] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-2c1dfa9b] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-2c1dfa9b] {
    overflow: hidden;
    background: var(--bg-card);
    border-radius: var(--card-radius);
    margin-bottom: 12px;
    padding: 30px 10px 12px;
    box-sizing: border-box;
    position: relative;
    box-shadow: var(--box-shadow)
}

.vip-info-wrap .vip-wrap .container-card[data-v-2c1dfa9b]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-2c1dfa9b] {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    max-width: 100px;
    padding: 2px 10px;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: var(--text-black);
    background-color: #85ffbd;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(253, 203, 50) 0%, rgb(244, 56, 98) 100.2%);
    font-weight: 700;
    animation: slide-in-bck-center-2c1dfa9b .7s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-in-bck-center-2c1dfa9b {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-2c1dfa9b] {
    display: none;
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-2c1dfa9b] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-2c1dfa9b] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-2c1dfa9b] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-2c1dfa9b] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-2c1dfa9b] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-2c1dfa9b] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-2c1dfa9b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-2c1dfa9b]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-2c1dfa9b] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-2c1dfa9b] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-2c1dfa9b] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-2c1dfa9b] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-2c1dfa9b] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-2c1dfa9b] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-2c1dfa9b] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-2c1dfa9b]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-2c1dfa9b 3s ease-in-out infinite
}

@keyframes shiny-btn1-2c1dfa9b {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-2c1dfa9b] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-2c1dfa9b] {
    margin-left: 5px
}

.vip-info-wrap[data-v-6ce73c8e] {
    position: relative;
    padding-top: 12px
}

.vip-info-wrap[data-v-6ce73c8e]:before {
    content: "";
    position: absolute;
    top: -70px;
    left: -16px;
    width: calc(100% + 32px);
    height: 70px;
    background: var(--primary)
}

.vip-info-wrap .vip-log[data-v-6ce73c8e] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--primary);
    margin: -12px calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--text-white);
    cursor: pointer
}

.vip-info-wrap .vip-wrap .container-card[data-v-6ce73c8e] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden;
    padding: 16px 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-6ce73c8e]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-6ce73c8e] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-6ce73c8e] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-6ce73c8e] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-6ce73c8e] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-6ce73c8e] {
    position: absolute;
    transform: rotate(45deg);
    right: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .level-name span[data-v-6ce73c8e] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name[data-v-6ce73c8e]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-6ce73c8e] {
    position: absolute;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: flex-start
}

.vip-info-wrap .vip-wrap .current-status-box .box-content[data-v-6ce73c8e] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-6ce73c8e] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-6ce73c8e] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-6ce73c8e] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-6ce73c8e] {
    width: 100px;
    height: 100px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-6ce73c8e] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-6ce73c8e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-6ce73c8e] {
    line-height: 16px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-6ce73c8e] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-6ce73c8e] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-6ce73c8e] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-6ce73c8e] {
    position: relative
}

@keyframes pulse-6ce73c8e {
    0% {
        transform: scale(1)
    }
    20% {
        opacity: 1
    }
    to {
        transform: scale(1.3);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-6ce73c8e]:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--btn-bg);
    border-radius: var(--btn-radius);
    animation-name: pulse-6ce73c8e;
    animation-duration: 1.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-6ce73c8e]:after {
    background-color: var(--btn-bg);
    transition: all .2s ease-out 0s
}

.vip-info-wrap .vip-wrap .active-level[data-v-6ce73c8e] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-6ce73c8e] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-6ce73c8e] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .effect-time[data-v-6ce73c8e] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-6ce73c8e] {
    margin-left: 5px
}

.vip-info-wrap[data-v-9312ec9e] {
    position: relative;
    padding-top: 12px
}

.vip-info-wrap[data-v-9312ec9e]:before {
    content: "";
    position: absolute;
    top: -70px;
    left: -16px;
    width: calc(100% + 32px);
    height: 70px;
    background: var(--primary)
}

.vip-info-wrap .vip-log[data-v-9312ec9e] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--primary);
    margin: -12px calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--text-white);
    cursor: pointer
}

.vip-info-wrap .vip-wrap .container-card[data-v-9312ec9e] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden;
    padding: 16px 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-9312ec9e]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-9312ec9e] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-9312ec9e] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-9312ec9e] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-9312ec9e] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-9312ec9e] {
    position: absolute;
    transform: rotate(45deg);
    right: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .level-name span[data-v-9312ec9e] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name[data-v-9312ec9e]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-9312ec9e] {
    position: absolute;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: flex-start
}

.vip-info-wrap .vip-wrap .current-status-box .box-content[data-v-9312ec9e] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-9312ec9e] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-9312ec9e] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-9312ec9e] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-9312ec9e] {
    width: 100px;
    height: 100px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-9312ec9e] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-9312ec9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-9312ec9e] {
    line-height: 16px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-9312ec9e] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-9312ec9e] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-9312ec9e] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-9312ec9e] {
    position: relative
}

@keyframes pulse-9312ec9e {
    0% {
        transform: scale(1)
    }
    20% {
        opacity: 1
    }
    to {
        transform: scale(1.3);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-9312ec9e]:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--btn-bg);
    border-radius: var(--btn-radius);
    animation-name: pulse-9312ec9e;
    animation-duration: 1.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-9312ec9e]:after {
    background-color: var(--btn-bg);
    transition: all .2s ease-out 0s
}

.vip-info-wrap .vip-wrap .active-level[data-v-9312ec9e] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-9312ec9e] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-9312ec9e] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .effect-time[data-v-9312ec9e] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-9312ec9e] {
    margin-left: 5px
}

.vip-info-wrap[data-v-60e8e1fd] {
    position: relative;
    z-index: 1
}

.vip-info-wrap[data-v-60e8e1fd]:before {
    content: "";
    position: absolute;
    top: -70px;
    left: -16px;
    width: calc(100% + 32px);
    height: 70px;
    background: var(--primary)
}

.vip-info-wrap .vip-log[data-v-60e8e1fd] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--primary);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap[data-v-60e8e1fd] {
    padding-top: 12px
}

.vip-info-wrap .vip-wrap .new[data-v-60e8e1fd] {
    margin-bottom: var(--mg);
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 250px
}

.vip-info-wrap .vip-wrap .new .vip-show[data-v-60e8e1fd] {
    width: 100%
}

.vip-info-wrap .vip-wrap .new .vip-show[data-v-60e8e1fd]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .1)
}

.vip-info-wrap .vip-wrap .new .vip-show .vip-img[data-v-60e8e1fd] {
    width: 100%;
    min-height: 250px
}

.vip-info-wrap .vip-wrap .new[data-v-60e8e1fd]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box[data-v-60e8e1fd] {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box .box-content[data-v-60e8e1fd] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 0 0 20px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box .icon[data-v-60e8e1fd] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .new .prod-name[data-v-60e8e1fd] {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .8);
    border-radius: 30px;
    padding-right: 10px
}

.vip-info-wrap .vip-wrap .new .prod-name .icon[data-v-60e8e1fd] {
    background: var(--btn-bg);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .new .prod-name .icon svg[data-v-60e8e1fd] {
    width: 10px
}

.vip-info-wrap .vip-wrap .new .prod-name .label[data-v-60e8e1fd] {
    font-size: 16px;
    color: var(--btn-text);
    word-break: break-all;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.vip-info-wrap .vip-wrap .new .level-info[data-v-60e8e1fd] {
    width: 100%;
    background: var(--primary)
}

.vip-info-wrap .vip-wrap .new .level-info .part[data-v-60e8e1fd] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 10px
}

.vip-info-wrap .vip-wrap .new .level-info .item[data-v-60e8e1fd] {
    position: relative;
    padding: 7px 15px !important;
    width: calc(50% - 5px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    color: #fff;
    border-radius: var(--radius)
}

.vip-info-wrap .vip-wrap .new .level-info .item .title[data-v-60e8e1fd] {
    line-height: 16px;
    text-align: center
}

.vip-info-wrap .vip-wrap .new .level-info .item .value[data-v-60e8e1fd] {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    flex-shrink: 0;
    text-align: right
}

.vip-info-wrap .vip-wrap .new .level-info .item .value .unit[data-v-60e8e1fd] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .new .level-info .item2[data-v-60e8e1fd] {
    position: relative;
    padding: 7px 15px !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    color: var(--btn-text);
    border-radius: var(--radius);
    margin-bottom: 10px
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .title[data-v-60e8e1fd] {
    line-height: 16px;
    text-align: left;
    color: #fff
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .value[data-v-60e8e1fd] {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    flex-shrink: 0;
    text-align: right;
    margin-top: 5px
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .value .unit[data-v-60e8e1fd] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .new .level-name[data-v-60e8e1fd] {
    position: absolute;
    transform: rotate(45deg);
    right: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .new .level-name span[data-v-60e8e1fd] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .new .active-level[data-v-60e8e1fd] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 10px
}

.vip-info-wrap .vip-wrap .new .active-level .active-btn[data-v-60e8e1fd] {
    position: relative;
    font-size: 13px;
    background: var(--golden-gradient);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--text-black)
}

.vip-info-wrap .vip-wrap .new .active-level .active-btn span[data-v-60e8e1fd] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .new .effect-time[data-v-60e8e1fd] {
    width: calc(100% - 20px);
    margin: 0 auto;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center;
    height: 30px;
    color: var(--text-white);
    padding: 0 10px 10px
}

.vip-info-wrap .vip-wrap .new .effect-time .c-green[data-v-60e8e1fd] {
    margin-left: 5px
}

.vip-info-wrap .vip-wrap .old[data-v-60e8e1fd] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden
}

.vip-info-wrap .vip-wrap .old[data-v-60e8e1fd]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .old.special .left[data-v-60e8e1fd] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .old.special .right[data-v-60e8e1fd] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .old.special .item[data-v-60e8e1fd] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .old .level-name[data-v-60e8e1fd] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1
}

.vip-info-wrap .vip-wrap .old .level-name .icon[data-v-60e8e1fd] {
    width: 25px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .old .current-status-box[data-v-60e8e1fd] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .old .current-status-box .icon[data-v-60e8e1fd] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .old .level-info[data-v-60e8e1fd] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .old .level-info .left[data-v-60e8e1fd] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .old .level-info .left .vip-img[data-v-60e8e1fd] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .old .level-info .right[data-v-60e8e1fd] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px)
}

.vip-info-wrap .vip-wrap .old .level-info .right .item[data-v-60e8e1fd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .title[data-v-60e8e1fd] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value[data-v-60e8e1fd] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value .strong[data-v-60e8e1fd] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value .unit[data-v-60e8e1fd] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .old .active-level[data-v-60e8e1fd] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn[data-v-60e8e1fd] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn span[data-v-60e8e1fd] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn[data-v-60e8e1fd]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-60e8e1fd 3s ease-in-out infinite
}

@keyframes shiny-btn1-60e8e1fd {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .old .effect-time[data-v-60e8e1fd] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .old .effect-time .c-green[data-v-60e8e1fd] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-258e4b0a] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--nav-text);
    cursor: pointer
}

.vip-info-wrap .vip-wrap .container-card[data-v-258e4b0a] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden;
    padding: 16px 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-258e4b0a]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-258e4b0a] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-258e4b0a] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-258e4b0a] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-258e4b0a] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-258e4b0a] {
    position: absolute;
    transform: rotate(45deg);
    right: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .level-name span[data-v-258e4b0a] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name[data-v-258e4b0a]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-258e4b0a] {
    position: absolute;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: flex-start
}

.vip-info-wrap .vip-wrap .current-status-box .box-content[data-v-258e4b0a] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-258e4b0a] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-258e4b0a] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-258e4b0a] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-258e4b0a] {
    width: 100px;
    height: 100px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-258e4b0a] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-258e4b0a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-258e4b0a] {
    line-height: 16px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-258e4b0a] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-258e4b0a] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-258e4b0a] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-258e4b0a] {
    position: relative
}

@keyframes pulse-258e4b0a {
    0% {
        transform: scale(1)
    }
    20% {
        opacity: 1
    }
    to {
        transform: scale(1.3);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-258e4b0a]:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--btn-bg);
    border-radius: var(--btn-radius);
    animation-name: pulse-258e4b0a;
    animation-duration: 1.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-258e4b0a]:after {
    background-color: var(--btn-bg);
    transition: all .2s ease-out 0s
}

.vip-info-wrap .vip-wrap .active-level[data-v-258e4b0a] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-258e4b0a] {
    position: relative;
    font-size: 13px;
    background: black;
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-258e4b0a] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .effect-time[data-v-258e4b0a] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-258e4b0a] {
    margin-left: 5px
}

.vip-info-wrap .vip-content[data-v-521850b3] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-log[data-v-521850b3] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap[data-v-521850b3] {
    margin: 0 -16px;
    padding: 16px;
    background: var(--bg);
    border-radius: 16px 16px 0 0
}

.vip-info-wrap .vip-wrap .new[data-v-521850b3] {
    margin-bottom: var(--mg);
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 250px
}

.vip-info-wrap .vip-wrap .new .vip-show[data-v-521850b3] {
    width: 100%
}

.vip-info-wrap .vip-wrap .new .vip-show[data-v-521850b3]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .1)
}

.vip-info-wrap .vip-wrap .new .vip-show .vip-img[data-v-521850b3] {
    width: 100%;
    min-height: 250px
}

.vip-info-wrap .vip-wrap .new[data-v-521850b3]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box[data-v-521850b3] {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: flex-start
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box .box-content[data-v-521850b3] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box .icon[data-v-521850b3] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .new .prod-name[data-v-521850b3] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .8);
    border-radius: 30px;
    padding-right: 10px;
    box-shadow: var(--inner-shadow2)
}

.vip-info-wrap .vip-wrap .new .prod-name .icon[data-v-521850b3] {
    background: var(--text-black);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .new .prod-name .icon svg[data-v-521850b3] {
    width: 10px
}

.vip-info-wrap .vip-wrap .new .prod-name .label[data-v-521850b3] {
    font-size: 16px;
    color: var(--btn-text);
    word-break: break-all;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.vip-info-wrap .vip-wrap .new .level-info[data-v-521850b3] {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
    background: var(--bg);
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .new .level-info .part[data-v-521850b3] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 5px 10px
}

.vip-info-wrap .vip-wrap .new .level-info .item[data-v-521850b3] {
    position: relative;
    padding: 7px 15px !important;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    color: var(--btn-text);
    border-radius: var(--radius)
}

.vip-info-wrap .vip-wrap .new .level-info .item .title[data-v-521850b3] {
    line-height: 16px;
    text-align: center
}

.vip-info-wrap .vip-wrap .new .level-info .item .value[data-v-521850b3] {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    flex-shrink: 0;
    text-align: right;
    margin-top: 5px
}

.vip-info-wrap .vip-wrap .new .level-info .item .value .unit[data-v-521850b3] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .new .level-info .item2[data-v-521850b3] {
    position: relative;
    padding: 7px 15px !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    color: var(--btn-text);
    border-radius: var(--radius)
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .title[data-v-521850b3] {
    line-height: 16px;
    text-align: left
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .value[data-v-521850b3] {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    flex-shrink: 0;
    text-align: right;
    margin-top: 5px
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .value .unit[data-v-521850b3] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .new .level-name[data-v-521850b3] {
    position: absolute;
    transform: rotate(45deg);
    right: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .new .level-name span[data-v-521850b3] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .new .active-level[data-v-521850b3] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 10px
}

.vip-info-wrap .vip-wrap .new .active-level .active-btn[data-v-521850b3] {
    position: relative;
    font-size: 13px;
    background: var(--text-black);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .new .active-level .active-btn span[data-v-521850b3] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .new .effect-time[data-v-521850b3] {
    margin: 0 auto;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center;
    height: 30px;
    border-radius: var(--radius);
    color: var(--btn-text);
    padding: 0 10px 10px
}

.vip-info-wrap .vip-wrap .new .effect-time .c-green[data-v-521850b3] {
    margin-left: 5px
}

.vip-info-wrap .vip-wrap .old[data-v-521850b3] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden
}

.vip-info-wrap .vip-wrap .old[data-v-521850b3]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .old.special .left[data-v-521850b3] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .old.special .right[data-v-521850b3] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .old.special .item[data-v-521850b3] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .old .level-name[data-v-521850b3] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1
}

.vip-info-wrap .vip-wrap .old .level-name .icon[data-v-521850b3] {
    width: 25px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .old .current-status-box[data-v-521850b3] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 10px 0;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .old .current-status-box .icon[data-v-521850b3] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .old .level-info[data-v-521850b3] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .old .level-info .left[data-v-521850b3] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .old .level-info .left .vip-img[data-v-521850b3] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .old .level-info .right[data-v-521850b3] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px)
}

.vip-info-wrap .vip-wrap .old .level-info .right .item[data-v-521850b3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .title[data-v-521850b3] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value[data-v-521850b3] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value .strong[data-v-521850b3] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value .unit[data-v-521850b3] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .old .active-level[data-v-521850b3] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn[data-v-521850b3] {
    position: relative;
    font-size: 13px;
    background: var(--text-black);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn span[data-v-521850b3] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn[data-v-521850b3]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-521850b3 3s ease-in-out infinite
}

@keyframes shiny-btn1-521850b3 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .old .effect-time[data-v-521850b3] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .old .effect-time .c-green[data-v-521850b3] {
    margin-left: 5px
}

.vip-info-wrap[data-v-6a327440] {
    position: relative;
    z-index: 1
}

.vip-info-wrap.c-1[data-v-6a327440]:after {
    content: "";
    position: absolute;
    top: -100px;
    left: -16px;
    background: var(--primary);
    width: calc(100% + 32px);
    height: 100px
}

.vip-info-wrap .vip-log[data-v-6a327440] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-card);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text)
}

.vip-info-wrap .vip-log div[data-v-6a327440] {
    color: var(--btn-text);
    padding: 5px 0 5px 16px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .container-card[data-v-6a327440] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden
}

.vip-info-wrap .vip-wrap .container-card[data-v-6a327440]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-6a327440] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-6a327440] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px;
    background: var(--bg-card2);
    color: var(--btn-text3);
    padding: 10px 5px;
    border-radius: var(--btn-radius)
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-6a327440] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-6a327440] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-6a327440] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-6a327440] {
    width: 25px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-6a327440] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 var(--card-radius);
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-6a327440] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-6a327440] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-6a327440] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-6a327440] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-6a327440] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px);
    background: var(--bg-card2);
    color: var(--btn-text3);
    padding: 3px 15px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-6a327440] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-6a327440] {
    line-height: 15px;
    color: var(--btn-text3)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-6a327440] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-6a327440] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-6a327440] {
    font-size: 12px;
    color: var(--btn-text3)
}

.vip-info-wrap .vip-wrap .active-level[data-v-6a327440] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-6a327440] {
    position: relative;
    font-size: 13px;
    background: var(--text-black);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-6a327440] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-6a327440]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-6a327440 3s ease-in-out infinite
}

@keyframes shiny-btn1-6a327440 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-6a327440] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-6a327440] {
    margin-left: 5px
}

.vip-info-wrap[data-v-b312e166] {
    position: relative
}

.vip-info-wrap[data-v-b312e166]:after {
    content: "";
    position: absolute;
    top: -100px;
    background: var(--primary);
    width: calc(100% + 32px);
    height: 100px;
    left: -16px
}

.vip-info-wrap .vip-log[data-v-b312e166] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--primary);
    margin: 0 calc(0px - var(--mg)) 0;
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap[data-v-b312e166] {
    padding-top: var(--mg)
}

.vip-info-wrap .vip-wrap .container-card[data-v-b312e166] {
    margin-bottom: var(--mg);
    position: relative;
    background: var(--bg-input);
    padding: 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-b312e166]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-b312e166] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 16px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-b312e166] {
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-b312e166] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-b312e166] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-b312e166] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-b312e166] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-b312e166] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-b312e166] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-b312e166] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-b312e166]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-b312e166] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-b312e166] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-b312e166] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-b312e166] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-b312e166] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-b312e166] {
    position: relative;
    font-size: 13px;
    background: var(--text-black);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-b312e166] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-b312e166]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-b312e166 3s ease-in-out infinite
}

@keyframes shiny-btn1-b312e166 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-b312e166] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-b312e166] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-8c62b1e3] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--primary);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-8c62b1e3] {
    margin-bottom: var(--mg);
    position: relative;
    background: var(--bg-input);
    padding: 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-8c62b1e3]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-8c62b1e3] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 16px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-8c62b1e3] {
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-8c62b1e3] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-8c62b1e3] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-8c62b1e3] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-8c62b1e3] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-8c62b1e3] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-8c62b1e3] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-8c62b1e3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-8c62b1e3]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-8c62b1e3] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-8c62b1e3] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-8c62b1e3] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-8c62b1e3] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-8c62b1e3] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-8c62b1e3] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg3);
    padding: 5px 16px;
    border-radius: 30px;
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-8c62b1e3] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-8c62b1e3]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-8c62b1e3 3s ease-in-out infinite
}

@keyframes shiny-btn1-8c62b1e3 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-8c62b1e3] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-8c62b1e3] {
    margin-left: 5px
}

.vip-info-wrap .vip-content[data-v-6d460003] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-log[data-v-6d460003] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2);
    box-shadow: var(--card-shadow)
}

.vip-info-wrap .vip-wrap .new[data-v-6d460003] {
    margin-bottom: var(--mg);
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 250px
}

.vip-info-wrap .vip-wrap .new .vip-show[data-v-6d460003] {
    width: 100%
}

.vip-info-wrap .vip-wrap .new .vip-show[data-v-6d460003]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .1)
}

.vip-info-wrap .vip-wrap .new .vip-show .vip-img[data-v-6d460003] {
    width: 100%;
    min-height: 250px
}

.vip-info-wrap .vip-wrap .new[data-v-6d460003]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box[data-v-6d460003] {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box .box-content[data-v-6d460003] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 0 0 20px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box .icon[data-v-6d460003] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .new .prod-name[data-v-6d460003] {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .8);
    border-radius: 30px;
    padding-right: 10px;
    box-shadow: var(--inner-shadow2)
}

.vip-info-wrap .vip-wrap .new .prod-name .icon[data-v-6d460003] {
    background: var(--text-black);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .new .prod-name .icon svg[data-v-6d460003] {
    width: 10px
}

.vip-info-wrap .vip-wrap .new .prod-name .label[data-v-6d460003] {
    font-size: 16px;
    color: var(--btn-text);
    word-break: break-all;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.vip-info-wrap .vip-wrap .new .level-info[data-v-6d460003] {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 20px);
    background: var(--bg);
    border-radius: var(--card-radius);
    box-shadow: var(--inner-shadow)
}

.vip-info-wrap .vip-wrap .new .level-info .part[data-v-6d460003] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 5px 10px
}

.vip-info-wrap .vip-wrap .new .level-info .item[data-v-6d460003] {
    position: relative;
    padding: 7px 15px !important;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    color: var(--btn-text2);
    border-radius: var(--radius)
}

.vip-info-wrap .vip-wrap .new .level-info .item .title[data-v-6d460003] {
    line-height: 16px;
    text-align: center
}

.vip-info-wrap .vip-wrap .new .level-info .item .value[data-v-6d460003] {
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    flex-shrink: 0;
    text-align: right;
    margin-top: 5px
}

.vip-info-wrap .vip-wrap .new .level-info .item .value .unit[data-v-6d460003] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .new .level-info .item2[data-v-6d460003] {
    position: relative;
    padding: 7px 15px !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    color: var(--btn-text2);
    border-radius: var(--radius)
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .title[data-v-6d460003] {
    line-height: 16px;
    text-align: left
}

.vip-info-wrap .vip-wrap .new .level-name[data-v-6d460003] {
    position: absolute;
    transform: rotate(45deg);
    right: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .new .level-name span[data-v-6d460003] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .new .active-level[data-v-6d460003] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 10px
}

.vip-info-wrap .vip-wrap .new .active-level .active-btn[data-v-6d460003] {
    position: relative;
    font-size: 13px;
    background: var(--golden-gradient);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--text-black)
}

.vip-info-wrap .vip-wrap .new .active-level .active-btn span[data-v-6d460003] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .new .effect-time[data-v-6d460003] {
    margin: 0 auto;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center;
    height: 30px;
    border-radius: var(--radius);
    color: var(--btn-text2);
    padding: 0 10px 10px
}

.vip-info-wrap .vip-wrap .new .effect-time .c-green[data-v-6d460003] {
    margin-left: 5px
}

.vip-info-wrap .vip-wrap .old[data-v-6d460003] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden
}

.vip-info-wrap .vip-wrap .old[data-v-6d460003]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .old.special .left[data-v-6d460003] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .old.special .right[data-v-6d460003] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .old.special .item[data-v-6d460003] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .old .level-name[data-v-6d460003] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1
}

.vip-info-wrap .vip-wrap .old .level-name .icon[data-v-6d460003] {
    width: 25px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .old .current-status-box[data-v-6d460003] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .old .current-status-box .icon[data-v-6d460003] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .old .level-info[data-v-6d460003] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .old .level-info .left[data-v-6d460003] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .old .level-info .left .vip-img[data-v-6d460003] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .old .level-info .right[data-v-6d460003] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px)
}

.vip-info-wrap .vip-wrap .old .level-info .right .item[data-v-6d460003] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .title[data-v-6d460003] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value[data-v-6d460003] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value .strong[data-v-6d460003] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value .unit[data-v-6d460003] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .old .active-level[data-v-6d460003] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn[data-v-6d460003] {
    position: relative;
    font-size: 13px;
    background: var(--btn-light2);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--text-black);
    box-shadow: var(--inner-shadow)
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn span[data-v-6d460003] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn[data-v-6d460003]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-6d460003 3s ease-in-out infinite
}

@keyframes shiny-btn1-6d460003 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .old .effect-time[data-v-6d460003] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .old .effect-time .c-green[data-v-6d460003] {
    margin-left: 5px
}

.vip-info-wrap[data-v-53859f89] {
    position: relative
}

.vip-info-wrap[data-v-53859f89]:after {
    content: "";
    position: absolute;
    top: -100px;
    left: -16px;
    background: var(--bg-1);
    width: calc(100% + 32px);
    height: 100px
}

.vip-info-wrap.c-2[data-v-53859f89]:after {
    content: "";
    position: absolute;
    top: -100px;
    left: -16px;
    background: url(/assets/2-login-1b5211af.png) center no-repeat;
    background-size: 100% auto;
    width: calc(100% + 32px);
    height: 100px
}

.vip-info-wrap .vip-log[data-v-53859f89] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-1);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text)
}

.vip-info-wrap .vip-log div[data-v-53859f89] {
    color: var(--text-white);
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .container-card[data-v-53859f89] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden
}

.vip-info-wrap .vip-wrap .container-card[data-v-53859f89]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-53859f89] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-53859f89] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-53859f89] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-53859f89] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-53859f89] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-53859f89] {
    width: 25px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-53859f89] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-53859f89] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-53859f89] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-53859f89] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-53859f89] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-53859f89] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-53859f89] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-53859f89] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-53859f89] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-53859f89] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-53859f89] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-53859f89] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-53859f89] {
    position: relative;
    font-size: 13px;
    background: var(--bg-line2);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text4)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-53859f89] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-53859f89]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-53859f89 3s ease-in-out infinite
}

@keyframes shiny-btn1-53859f89 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-53859f89] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-53859f89] {
    margin-left: 5px
}

.vip-info-wrap[data-v-09afb285]:before {
    content: "";
    position: absolute;
    top: -61px;
    left: -16px;
    width: calc(100% + 16px);
    height: calc(100% + 60px);
    background: var(--primary)
}

.vip-info-wrap .vip-log[data-v-09afb285] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--text-white);
    cursor: pointer
}

.vip-info-wrap .vip-wrap .container-card[data-v-09afb285] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden;
    padding: 16px 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-09afb285]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-09afb285] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-09afb285] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-09afb285] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-09afb285] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-09afb285] {
    position: absolute;
    transform: rotate(0);
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    padding: 3px 10px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: 0 var(--card-radius) 0 var(--card-radius);
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .level-name span[data-v-09afb285] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name[data-v-09afb285]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-09afb285] {
    position: absolute;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: flex-start
}

.vip-info-wrap .vip-wrap .current-status-box .box-content[data-v-09afb285] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-09afb285] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-09afb285] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-09afb285] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-09afb285] {
    width: 100px;
    height: 100px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-09afb285] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-09afb285] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-09afb285] {
    line-height: 16px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-09afb285] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-09afb285] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-09afb285] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-09afb285] {
    position: relative
}

@keyframes pulse-09afb285 {
    0% {
        transform: scale(1)
    }
    20% {
        opacity: 1
    }
    to {
        transform: scale(1.3);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-09afb285]:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--btn-bg);
    border-radius: var(--btn-radius);
    animation-name: pulse-09afb285;
    animation-duration: 1.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-09afb285]:after {
    background-color: var(--btn-bg);
    transition: all .2s ease-out 0s
}

.vip-info-wrap .vip-wrap .active-level[data-v-09afb285] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-09afb285] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-09afb285] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .effect-time[data-v-09afb285] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-09afb285] {
    margin-left: 5px
}

.vip-info-wrap[data-v-6f949636] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-log[data-v-6f949636] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .new[data-v-6f949636] {
    margin-bottom: var(--mg);
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 250px
}

.vip-info-wrap .vip-wrap .new .vip-show[data-v-6f949636] {
    width: 100%
}

.vip-info-wrap .vip-wrap .new .vip-show[data-v-6f949636]:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .1)
}

.vip-info-wrap .vip-wrap .new .vip-show .vip-img[data-v-6f949636] {
    width: 100%;
    min-height: 250px
}

.vip-info-wrap .vip-wrap .new[data-v-6f949636]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box[data-v-6f949636] {
    position: absolute;
    z-index: 2;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box .box-content[data-v-6f949636] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 0 0 20px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .new .level-part .current-status-box .icon[data-v-6f949636] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .new .prod-name[data-v-6f949636] {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .8);
    border-radius: 30px;
    padding-right: 10px
}

.vip-info-wrap .vip-wrap .new .prod-name .icon[data-v-6f949636] {
    background: var(--btn-bg);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .new .prod-name .icon svg[data-v-6f949636] {
    width: 10px
}

.vip-info-wrap .vip-wrap .new .prod-name .label[data-v-6f949636] {
    font-size: 16px;
    color: var(--btn-text);
    word-break: break-all;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2
}

.vip-info-wrap .vip-wrap .new .level-info[data-v-6f949636] {
    width: 100%;
    background: var(--btn-bg)
}

.vip-info-wrap .vip-wrap .new .level-info .part[data-v-6f949636] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 10px
}

.vip-info-wrap .vip-wrap .new .level-info .item[data-v-6f949636] {
    position: relative;
    padding: 7px 15px !important;
    width: calc(50% - 5px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    color: #fff;
    border-radius: var(--radius)
}

.vip-info-wrap .vip-wrap .new .level-info .item .title[data-v-6f949636] {
    line-height: 16px;
    text-align: center
}

.vip-info-wrap .vip-wrap .new .level-info .item .value[data-v-6f949636] {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    flex-shrink: 0;
    text-align: right
}

.vip-info-wrap .vip-wrap .new .level-info .item .value .unit[data-v-6f949636] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .new .level-info .item2[data-v-6f949636] {
    position: relative;
    padding: 7px 15px !important;
    width: calc(100% - 5px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    color: #fff;
    border-radius: var(--radius);
    margin-bottom: 10px
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .title[data-v-6f949636] {
    line-height: 16px;
    text-align: left
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .value[data-v-6f949636] {
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    flex-shrink: 0;
    text-align: right
}

.vip-info-wrap .vip-wrap .new .level-info .item2 .value .unit[data-v-6f949636] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .new .level-name[data-v-6f949636] {
    position: absolute;
    transform: rotate(45deg);
    right: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .new .level-name span[data-v-6f949636] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .new .active-level[data-v-6f949636] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 10px 10px
}

.vip-info-wrap .vip-wrap .new .active-level .active-btn[data-v-6f949636] {
    position: relative;
    font-size: 13px;
    background: var(--golden-gradient);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--text-black)
}

.vip-info-wrap .vip-wrap .new .active-level .active-btn span[data-v-6f949636] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .new .effect-time[data-v-6f949636] {
    width: calc(100% - 20px);
    margin: 0 auto;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center;
    background: var(--btn-bg);
    height: 30px;
    border-radius: var(--radius);
    color: var(--text-white);
    padding: 0 10px 10px
}

.vip-info-wrap .vip-wrap .new .effect-time .c-green[data-v-6f949636] {
    margin-left: 5px
}

.vip-info-wrap .vip-wrap .old[data-v-6f949636] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden
}

.vip-info-wrap .vip-wrap .old[data-v-6f949636]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .old.special .left[data-v-6f949636] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .old.special .right[data-v-6f949636] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .old.special .item[data-v-6f949636] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .old .level-name[data-v-6f949636] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1
}

.vip-info-wrap .vip-wrap .old .level-name .icon[data-v-6f949636] {
    width: 25px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .old .current-status-box[data-v-6f949636] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .old .current-status-box .icon[data-v-6f949636] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .old .level-info[data-v-6f949636] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .old .level-info .left[data-v-6f949636] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .old .level-info .left .vip-img[data-v-6f949636] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .old .level-info .right[data-v-6f949636] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px)
}

.vip-info-wrap .vip-wrap .old .level-info .right .item[data-v-6f949636] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .title[data-v-6f949636] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value[data-v-6f949636] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value .strong[data-v-6f949636] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .old .level-info .right .item .value .unit[data-v-6f949636] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .old .active-level[data-v-6f949636] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn[data-v-6f949636] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn span[data-v-6f949636] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .old .active-level .active-btn[data-v-6f949636]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-6f949636 3s ease-in-out infinite
}

@keyframes shiny-btn1-6f949636 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .old .effect-time[data-v-6f949636] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .old .effect-time .c-green[data-v-6f949636] {
    margin-left: 5px
}

.vip-info-wrap[data-v-d528654b] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-log[data-v-d528654b] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-tab);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text);
    cursor: pointer
}

.vip-info-wrap .vip-wrap .container-card[data-v-d528654b] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    padding: 16px 12px;
    border: 1px solid var(--btn-text)
}

.vip-info-wrap .vip-wrap .container-card[data-v-d528654b]:before {
    content: "";
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
    background: var(--bg-weight);
    border: 1px solid var(--btn-text);
    z-index: -1
}

.vip-info-wrap .vip-wrap .container-card[data-v-d528654b]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-d528654b] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-d528654b] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-d528654b] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-d528654b] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-d528654b] {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    padding: 3px 20px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: 0 var(--card-radius) 0 var(--card-radius);
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .level-name span[data-v-d528654b] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name[data-v-d528654b]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-d528654b] {
    position: absolute;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: flex-start
}

.vip-info-wrap .vip-wrap .current-status-box .box-content[data-v-d528654b] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-d528654b] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-d528654b] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-d528654b] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-d528654b] {
    width: 100px;
    height: 100px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-d528654b] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-d528654b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-d528654b] {
    line-height: 16px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-d528654b] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-d528654b] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-d528654b] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-d528654b] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-d528654b] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-d528654b] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .effect-time[data-v-d528654b] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-d528654b] {
    margin-left: 5px
}

.vip-info-wrap[data-v-bece2394]:before {
    content: "";
    position: absolute;
    top: -61px;
    left: -16px;
    width: calc(100% + 16px);
    height: calc(100% + 60px);
    background: var(--primary)
}

.vip-info-wrap .vip-log[data-v-bece2394] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--text-white);
    cursor: pointer
}

.vip-info-wrap .vip-wrap .container-card[data-v-bece2394] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden;
    padding: 16px 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-bece2394]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-bece2394] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-bece2394] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-bece2394] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-bece2394] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-bece2394] {
    position: absolute;
    transform: rotate(45deg);
    right: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .level-name span[data-v-bece2394] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name[data-v-bece2394]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-bece2394] {
    position: absolute;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: flex-start
}

.vip-info-wrap .vip-wrap .current-status-box .box-content[data-v-bece2394] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: var(--card-radius) 0 var(--card-radius) 0;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-bece2394] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-bece2394] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-bece2394] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-bece2394] {
    width: 100px;
    height: 100px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-bece2394] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-bece2394] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-bece2394] {
    line-height: 16px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-bece2394] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-bece2394] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-bece2394] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-bece2394] {
    position: relative
}

@keyframes pulse-bece2394 {
    0% {
        transform: scale(1)
    }
    20% {
        opacity: 1
    }
    to {
        transform: scale(1.3);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-bece2394]:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--btn-bg);
    border-radius: var(--btn-radius);
    animation-name: pulse-bece2394;
    animation-duration: 1.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-bece2394]:after {
    background-color: var(--btn-bg);
    transition: all .2s ease-out 0s
}

.vip-info-wrap .vip-wrap .active-level[data-v-bece2394] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-bece2394] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: #fff
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-bece2394] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .effect-time[data-v-bece2394] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-bece2394] {
    margin-left: 5px
}

.vip-info-wrap[data-v-fca4aca5] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-log[data-v-fca4aca5] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-fca4aca5] {
    margin-bottom: var(--mg);
    position: relative;
    color: var(--btn-text)
}

.vip-info-wrap .vip-wrap .container-card[data-v-fca4aca5]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-fca4aca5] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 2px 12px;
    background: #000;
    color: #efc26f;
    border-radius: var(--card-radius) 0
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-fca4aca5] {
    width: 28px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-fca4aca5] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-fca4aca5] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-fca4aca5] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-fca4aca5] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-fca4aca5] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-fca4aca5] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-fca4aca5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-fca4aca5] {
    line-height: 15px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-fca4aca5] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-fca4aca5] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-fca4aca5] {
    font-size: 12px;
    color: var(--text-gray)
}

.vip-info-wrap .vip-wrap .active-level[data-v-fca4aca5] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-fca4aca5] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text3)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-fca4aca5] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-fca4aca5]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-fca4aca5 3s ease-in-out infinite
}

@keyframes shiny-btn1-fca4aca5 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-fca4aca5] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-fca4aca5] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-2dd7ddd9] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-2dd7ddd9] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden;
    padding: 16px 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-2dd7ddd9]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-2dd7ddd9] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-2dd7ddd9] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-2dd7ddd9] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-2dd7ddd9] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-2dd7ddd9] {
    position: absolute;
    transform: rotate(45deg);
    right: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .level-name span[data-v-2dd7ddd9] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name[data-v-2dd7ddd9]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-2dd7ddd9 3s ease-in-out infinite
}

@keyframes shiny-btn1-2dd7ddd9 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-2dd7ddd9] {
    position: absolute;
    top: 0;
    width: 100%;
    right: 0;
    display: flex;
    justify-content: center
}

.vip-info-wrap .vip-wrap .current-status-box .box-content[data-v-2dd7ddd9] {
    padding: 3px 20px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 0 20px 20px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-2dd7ddd9] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-2dd7ddd9] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-2dd7ddd9] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-2dd7ddd9] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-2dd7ddd9] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    border-radius: var(--card-radius)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-2dd7ddd9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-2dd7ddd9] {
    line-height: 16px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-2dd7ddd9] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-2dd7ddd9] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-2dd7ddd9] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-2dd7ddd9] {
    position: relative
}

@keyframes pulse-2dd7ddd9 {
    0% {
        transform: scale(1)
    }
    20% {
        opacity: 1
    }
    to {
        transform: scale(1.3);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-2dd7ddd9]:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--btn-bg);
    border-radius: var(--btn-radius);
    animation-name: pulse-2dd7ddd9;
    animation-duration: 1.8s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite
}

.vip-info-wrap .vip-wrap .animate-pulse[data-v-2dd7ddd9]:after {
    background-color: var(--btn-bg);
    transition: all .2s ease-out 0s
}

.vip-info-wrap .vip-wrap .active-level[data-v-2dd7ddd9] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-2dd7ddd9] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-2dd7ddd9] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .effect-time[data-v-2dd7ddd9] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-2dd7ddd9] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-b148478d] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text)
}

.vip-info-wrap .vip-log div[data-v-b148478d] {
    background: var(--text-black);
    color: var(--text-white);
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .container-card[data-v-b148478d] {
    margin-bottom: var(--mg);
    position: relative;
    border: 1px solid var(--border-color2);
    overflow: hidden
}

.vip-info-wrap .vip-wrap .container-card[data-v-b148478d]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .container-card.special .left[data-v-b148478d] {
    margin-top: -10px
}

.vip-info-wrap .vip-wrap .container-card.special .right[data-v-b148478d] {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 6px
}

.vip-info-wrap .vip-wrap .container-card.special .item[data-v-b148478d] {
    text-align: center;
    width: calc(50% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .container-card.special .item2[data-v-b148478d] {
    text-align: left;
    width: calc(100% - 2px) !important;
    flex-direction: column;
    font-size: 12px
}

.vip-info-wrap .vip-wrap .level-name[data-v-b148478d] {
    position: absolute;
    transform: rotate(-45deg);
    left: -36px;
    top: 8px;
    display: flex;
    align-items: center;
    padding: 3px 40px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0;
    z-index: 1
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-b148478d] {
    width: 25px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-b148478d] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-b148478d] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-b148478d] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-b148478d] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-b148478d] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-b148478d] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-b148478d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-b148478d] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-b148478d] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-b148478d] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-b148478d] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-b148478d] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-b148478d] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-b148478d] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-b148478d]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-b148478d 3s ease-in-out infinite
}

@keyframes shiny-btn1-b148478d {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-b148478d] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-b148478d] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-e5f67d06] {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-e5f67d06] {
    margin-bottom: var(--mg);
    position: relative;
    background: var(--bg-input);
    padding: 12px
}

.vip-info-wrap .vip-wrap .container-card[data-v-e5f67d06]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-e5f67d06] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px 16px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-e5f67d06] {
    position: absolute;
    top: -20px;
    left: -10px;
    width: 35px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-e5f67d06] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-e5f67d06] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-e5f67d06] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-e5f67d06] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-e5f67d06] {
    width: 100px;
    height: 100px;
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-e5f67d06] {
    flex: 1;
    margin-left: 10px;
    max-width: calc(100% - 110px);
    background: rgba(0, 0, 0, .05);
    padding: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 5px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-e5f67d06] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-e5f67d06]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-e5f67d06] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-e5f67d06] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-e5f67d06] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-e5f67d06] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-e5f67d06] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-e5f67d06] {
    position: relative;
    font-size: 13px;
    background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg3));
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-e5f67d06] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-e5f67d06]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-e5f67d06 3s ease-in-out infinite
}

@keyframes shiny-btn1-e5f67d06 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-e5f67d06] {
    margin-top: 8px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-e5f67d06] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-bc7d4c49] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg);
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .container-card[data-v-bc7d4c49] {
    margin-bottom: var(--mg);
    position: relative
}

.vip-info-wrap .vip-wrap .container-card[data-v-bc7d4c49]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-bc7d4c49] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-bc7d4c49] {
    width: 25px;
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-bc7d4c49] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-bc7d4c49] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-bc7d4c49] {
    position: relative;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-bc7d4c49] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-bc7d4c49] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-bc7d4c49] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-bc7d4c49] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-bc7d4c49] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-bc7d4c49] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-bc7d4c49] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-bc7d4c49] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-bc7d4c49] {
    position: relative;
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-bc7d4c49] {
    position: relative;
    font-size: 13px;
    background: linear-gradient(90deg, var(--btn-bg), var(--btn-bg2));
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden;
    color: var(--btn-text2)
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-bc7d4c49] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-bc7d4c49]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-bc7d4c49 3s ease-in-out infinite
}

@keyframes shiny-btn1-bc7d4c49 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-bc7d4c49] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-bc7d4c49] {
    margin-left: 5px
}

.vip-info-wrap .vip-log[data-v-819be10a] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: calc(100% + var(--mg) * 2);
    height: 40px;
    background: var(--bg-weight);
    margin: 0 calc(0px - var(--mg)) var(--mg);
    padding: 0 var(--mg)
}

.vip-info-wrap .vip-wrap .container-card[data-v-819be10a] {
    margin-bottom: var(--mg)
}

.vip-info-wrap .vip-wrap .container-card[data-v-819be10a]:last-child {
    margin-bottom: 0
}

.vip-info-wrap .vip-wrap .level-name[data-v-819be10a] {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 2px 15px;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
    color: var(--text-black);
    border-radius: var(--card-radius) 0
}

.vip-info-wrap .vip-wrap .level-name .icon[data-v-819be10a] {
    margin-right: 2px
}

.vip-info-wrap .vip-wrap .current-status-box[data-v-819be10a] {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #323232 0%, #3f3f3f 40%, #1c1c1c 150%), linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(0, 0, 0, .25) 200%);
    background-blend-mode: multiply;
    border-radius: 0 10px;
    color: var(--text-white)
}

.vip-info-wrap .vip-wrap .current-status-box .icon[data-v-819be10a] {
    margin-right: 5px
}

.vip-info-wrap .vip-wrap .level-info[data-v-819be10a] {
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .level-info .left[data-v-819be10a] {
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .left .vip-img[data-v-819be10a] {
    width: 100px;
    height: 100px;
    border-radius: 10px
}

.vip-info-wrap .vip-wrap .level-info .right[data-v-819be10a] {
    margin-left: 10px;
    flex: 1;
    max-width: calc(100% - 110px)
}

.vip-info-wrap .vip-wrap .level-info .right .item[data-v-819be10a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
    font-size: 13px
}

.vip-info-wrap .vip-wrap .level-info .right .item .title[data-v-819be10a] {
    line-height: 15px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .level-info .right .item .value[data-v-819be10a] {
    max-width: 100%;
    flex-shrink: 0
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .strong[data-v-819be10a] {
    font-size: 14px
}

.vip-info-wrap .vip-wrap .level-info .right .item .value .unit[data-v-819be10a] {
    font-size: 12px;
    color: var(--text-gray6)
}

.vip-info-wrap .vip-wrap .active-level[data-v-819be10a] {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-819be10a] {
    position: relative;
    font-size: 13px;
    background: var(--btn-bg3);
    padding: 5px 16px;
    border-radius: var(--btn-radius);
    cursor: pointer;
    overflow: hidden
}

.vip-info-wrap .vip-wrap .active-level .active-btn span[data-v-819be10a] {
    position: relative;
    z-index: 1
}

.vip-info-wrap .vip-wrap .active-level .active-btn[data-v-819be10a]:before {
    content: "";
    position: absolute;
    display: inline-block;
    top: -180px;
    left: -50px;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1-819be10a 3s ease-in-out infinite
}

@keyframes shiny-btn1-819be10a {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }
    to {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

.vip-info-wrap .vip-wrap .effect-time[data-v-819be10a] {
    margin-top: 4px;
    font-size: 13px;
    line-height: 14px;
    display: flex;
    align-items: center
}

.vip-info-wrap .vip-wrap .effect-time .c-green[data-v-819be10a] {
    margin-left: 5px
}