.promotion-page {
    background: #000 url("/assets/img/svip/promotion/bg_mb.png") top center / cover no-repeat;
}

@media screen and (min-width: 1200px) {
    .promotion-page {
        background: #000 url("/assets/img/svip/promotion/bg_pc.png") top center / cover no-repeat;
        padding-bottom: 40px;
    }
}

/* start page navs */
.svip-navs {
    z-index: 2;
    margin-bottom: 20px;
}

.svip-nav-item {
    width: calc(100% / 2);
}

.svip-nav-item.active .svip-nav-icon {
    opacity: 1;
}

.svip-nav-icon {
    aspect-ratio: 1 / 1;
    width: 40px;
    opacity: 0.8;
}

.svip-nav-item {
    padding-bottom: 15px;
    background: url("/assets/img/svip/promotion/nav-item-mb-bg.avif") bottom center no-repeat;
    background-size: 100% auto;
}

.svip-nav-item.active {
    background-image: url("/assets/img/svip/promotion/nav-item-mb-active-bg.avif");
}

.svip-nav-text {
    background: radial-gradient(115.77% 710.56% at 115.77% 71.62%, rgba(255, 242, 191, 0.8) 7.37%, rgba(255, 232, 142, 0.8) 29.82%, rgba(255, 241, 215, 0.8) 41%, rgba(255, 221, 152, 0.8) 51%, rgba(255, 251, 243, 0.8) 64%, rgba(255, 255, 214, 0.8) 71.89%, rgba(255, 232, 142, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
@media screen and (min-width: 1200px) {
    .svip-navs {
        margin-top: -70px;
        margin-bottom: 60px;
        justify-content: center;
    }

    .svip-nav-item {
        width: calc(100% / 4);
        padding-bottom: 5px;
        background-image: url("/assets/img/svip/promotion/nav-item-bg.avif");
    }
    
    .svip-nav-item.active {
        background-image: url("/assets/img/svip/promotion/nav-item-active-bg.avif");
    }
}
/* end page navs */