.mb-br { display: none; }


.banner { padding: 150px 0 150px; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; overflow: hidden; }
.banner .inner{ padding: 0 100px; }
.banner .title-box { margin-bottom: 50px; position: relative; z-index: 20; }
.banner .title-box h2 { font-size: var(--fs-48); font-weight: 600; line-height: 120%; color: var(--v-white); margin-bottom: 19px; text-align: center; }
.banner .title-box h2 span { color: var(--v-orange-dark); }
.banner .title-box p { font-size: var(--fs-20); font-weight: 400; line-height: 130%; color: var(--v-white); /* opacity: 0.8; */ margin-bottom: 0px; text-align: center; }
.banner .roulette { display: flex; flex-direction: column; align-items: center; position: relative; margin: 0 auto; max-width: 650px; }
.banner .roulette .img-box { position: absolute; transform: translate(-50%, -50%); z-index: 5; user-select: none; }
.banner .roulette .img-box img { width: 100%; }
.banner .roulette .img-box:nth-child(1) { position: static; left: unset; top: unset; transform: translate(0, 0); z-index: 10; transition: transform 5s cubic-bezier(0.2, 0.8, 0.3, 1); transform-origin: 50% 48.41%; transform: rotate(0deg); }
.banner .roulette .img-box:nth-child(2) { top: 5.3%; left: 48%; max-width: 236px; width: 25.9%; z-index: 11; }
.banner .roulette .img-box:nth-child(3) { left: 50%; top: 49%; max-width: 183px; width: 20.1%; z-index: 11; }
.banner .roulette .img-box:nth-child(4) { left: 50%; top: 49%; display: none; max-width: 205px; width: 22.5%; z-index: 11; cursor: pointer; }
.banner .roulette .img-box:nth-child(5) { top: 57%; left: 50%; width: 159%; }
.banner .roulette .img-box:nth-child(6) { top: 98%; left: 52%; width: 210%; }
.banner .roulette .img-box:nth-child(7) { /* display: none; */ top: 98.7%; left: 51%; width: 52.7%; }
.banner .operate { max-width: 518px; background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-banner-input-bg.webp); background-repeat: no-repeat; /* background-size: cover; */ background-size: 100% 100%; margin: -62px auto 0; padding: 28px 49px 20px 42px; /* transform: translateX(13px); */ margin-bottom: 100px; position: relative; z-index: 12; }
.banner .operate-box { max-width: 518px; margin: 0 auto; position: relative; z-index: 12; }
html[lang="es-ES"] .banner .operate-box,html[lang="es-ES"] .banner .operate { max-width: 625px; }
html[lang="de-DE"] .banner .operate-box,html[lang="de-DE"] .banner .operate { max-width: 540px; }
.banner .operate-box::before { content: ""; display: block; width: 269px; height: 92px; background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-operate-after.webp?v=2?v=2); background-repeat: no-repeat; background-size: cover; position: absolute; transform: translate(-50%, -50%); top: -30%; left: 20.5%; z-index: 11; }
.banner .operate::after { content: ""; display: block; width: 135px; height: 59px; background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-operate-after.webp?v=2); background-repeat: no-repeat; background-size: cover; position: absolute; transform: translate(-50%, -50%); top: 1%; left: 89%; }
.banner .operate::before { content: ""; display: block; width: 64px; height: 36px; background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-operate-after.webp?v=2); background-repeat: no-repeat; background-size: cover; position: absolute; transform: translate(-50%, -50%); top: 1%; left: 80%; }
.banner .operate .content { background-color: #181514CC; border-radius: 23px; display: flex; align-items: center; padding: 16px 18px; gap: 15px; }
.banner .operate .content.is-spin { padding: 0; justify-content: center; }
.banner .operate .content .spin { display: none; }
.banner .operate .content .input-box { flex: 1; }
.banner .operate .content .input-box input { display: block; background: transparent; border: none; color: var(--v-white); padding: 0 10px; width: 100%; outline: none; font-size: 17px; font-weight: 800; -webkit-text-fill-color: var(--v-white); box-sizing: border-box; caret-color: var(--v-white) !important; }
.banner .operate .content .input-box input:-webkit-autofill,
.banner .operate .content .input-box input:-webkit-autofill:hover,
.banner .operate .content .input-box input:-webkit-autofill:focus,
.banner .operate .content .input-box input:autofill,
.banner .operate .content .input-box input:autofill:hover,
.banner .operate .content .input-box input:autofill:focus { caret-color: var(--v-white) !important; color: white !important; background-color: transparent !important; -webkit-text-fill-color: white !important; transition: background-color 5000s ease-in-out 0s !important; -webkit-box-shadow: 0 0 0 400px transparent inset;
}

.banner .operate .content .input-box .uid-hint, .banner .operate .content .input-box .email-hint { font-size: 10px; color: #cf2e2e; margin: 0; padding: 0px 10px; display: none; }
html[lang="ar-AE"] .banner .operate .content .input-box .uid-hint, html[lang="ar-AE"] .banner .operate .content .input-box .email-hint { text-align: right; }

.banner .operate .content .input-box input::placeholder { color: var(--v-white); }

.banner .operate .content .button { font-size: var(--fs-16); color: var(--v-white); line-height: 130%; font-weight: 700; padding: 14px 25px; border-radius: 23px; background-color: var(--v-orange-dark); cursor: pointer; text-transform: uppercase; }

.banner .tnc-text { font-size: var(--fs-20); color: var(--v-white); line-height: 168%; font-weight: 400; text-decoration: underline; text-align: center; position: absolute; left: 50%; margin: 0; bottom: 35px; z-index: 15; transform: translateX(-50%); display: none; }

@media (max-width: 1440px) {
    .banner { padding: 150px 0 170px; }

    .banner .operate .content .input-box input { font-size: var(--fs-16); }
}

@media (max-width: 768px) {
    .mb-br { display: block; }
    .banner .inner{padding: 0 40px;}

    .banner .operate-box::before, .banner .operate::after, .banner .operate::before { display: none;
    }
    .banner { padding: 120px 0 150px; }

    .banner .title-box { margin-bottom: 55px; }

    .banner .title-box h2 { font-size: 38px; }

    .banner .title-box p { font-size: 16px; }

    .banner .operate { width: 80%; margin: -9% auto 0; padding: 3.5% 7% 3% 6%; }

    .banner .operate .content .button { background-color: var(--v-orange); }
    .banner .operate .content .input-box input { font-size: 12px; padding: 0; }
    .banner .operate .content { padding: 4% 5% 4% 7%; }

    .banner .operate .content .spin { max-width: 160px; }

    .banner .roulette .img-box:nth-child(7) { top: 99.7%; }
}

@media (max-width: 510px) {
    .banner { padding: 86px 0 87px; }
    .banner .inner{ padding: 0 20px; }
    .banner .title-box h2 { font-size: 32px; margin-bottom: 7px; }

    .banner .title-box p { font-size: 13px; }
    .banner .roulette { transform: scale(110%); }

    .banner .operate .content .spin { width: 112px; }

    .banner .roulette .img-box:nth-child(2) { top: 4%; left: 47%; }

    .banner .roulette .img-box:nth-child(6) { top: 96%; left: 51%; width: 202%; }

    .banner .roulette .img-box:nth-child(7) { top: 97.7%; left: 50%; width: 61.7%; }
    .banner .operate { width: 66%; min-width: 270px; margin: -23px auto 0 !important; padding: 14px 16px 14px 17px; /* transform: translateX(0px); */ margin-bottom: 0px; }
    html[lang="es-ES"] .banner .operate { min-width: 280px; padding: 14px 16px 14px 10px; }
    html[lang="pt-PT"] .banner .operate, 
    html[lang="fr-FR"] .banner .operate, 
    html[lang="de-DE"] .banner .operate { min-width: 280px; }
    html[lang="de-DE"] .banner .operate .content{ padding: 7px 4px 7px 7px; }
    

    .banner .operate .content { border-radius: 12px; padding: 7px 4px 7px 14px; gap: 0px; }
    html[lang="de-DE"] .banner .operate .content{ padding: 7px 4px 7px 7px; }


    .banner .operate .content .input-box input { font-size: 12px; }
    html[lang="es-ES"] .banner .operate .content .input-box input { font-size: 10px; }
    .banner .operate .content .button { font-size: 10px; line-height: 10px; padding: 8px 13px; background-color: var(--v-orange); text-transform: uppercase; }

    .banner .operate .content .input-box .uid-hint, .banner .operate .content .input-box .email-hint { font-size: 6px; padding: 0px 4px; }

    .banner .tnc-text { font-size: 10px; bottom: 8px; }

}



.row1 { padding: 40px 0 40px; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative;
}
.row1 .inner { padding: 0 80px; }

.row1 .title-box { margin-bottom: 120px; }

.row1 .title-box h2 { font-size: var(--fs-48); font-weight: 600; line-height: 120%; color: var(--v-black-light); margin-bottom: 5px; text-align: center;
}

.row1 .title-box h2 span { color: var(--v-orange-dark); }

.row1 .title-box p { font-size: 26px; font-weight: 600; line-height: 168%; color: var(--v-black-light); margin-bottom: 0px; text-align: center; }

.row1 .content-list { display: flex; justify-content: center; gap: 40px; margin-bottom: 45px; }

.row1 .content-list .content-item { width: calc(33.33%); max-width: 320px; background-color: #E8E9ED; border-radius: 4px; display: flex; flex-direction: column; align-items: center; padding: 0 25px 25px; }

.row1 .content-list .content-item img { margin-top: -70px; }

.row1 .content-list .content-item:nth-child(3) img { margin-top: -80px; margin-bottom: 10px; }

.row1 .content-list .content-item .title { display: flex; align-items: center; margin-top: 20px; gap: 10px; margin-bottom: 18px; }

.row1 .content-list .content-item .title p { margin-bottom: 0px; font-size: 28px; line-height: 120%; font-weight: 600; color: var(--v-black-light); }

.row1 .content-list .content-item .title span { width: 28px; height: 26px; display: inline-block; background-color: var(--v-black-light); color: #E8E9ED; font-size: 16px; line-height: 26px; border-radius: 50%; text-align: center; font-weight: 700; }

.row1 .content-list .content-item .text { font-size: var(--fs-16); line-height: 150%; text-align: center; font-weight: 400; color: var(--v-black-light); margin-bottom: 8px; position: relative; }

.row1 .content-list .content-item:nth-child(1) { background-color: var(--v-black-light); }

.row1 .content-list .content-item:nth-child(1) .title p,
.row1 .content-list .content-item:nth-child(1) .text { color: var(--v-white); }
.row1 .content-list .content-item:nth-child(1) .title { color: var(--v-white); margin-top: 10px; }

.row1 .content-list .content-item:nth-child(1) .title span { background-color: #D9D9D9; color: var(--v-black-light); }


.row1 .content-list .content-item .text .icon { color: #002329; font-size: 12px; font-weight: 800; width: 14.6px; height: 14.6px; display: inline-block; line-height: 14.6px; text-align: center; background-color: #D3D3D3; border-radius: 50%; cursor: pointer; }


.row1 .content-list .content-item .text:hover .hint { display: block; }

.row1 .content-list .content-item .text .hint { display: none; font-size: var(--fs-16); background-color: #d9d9d9; color: #404040; padding: 14px 30px 10px; position: absolute; left: 21%; top: 41%; width: 340px; /* opacity: 0.8; */ border-radius: 8px; }

.row1 .tnc-text { font-size: var(--fs-20); color: var(--v-black); line-height: 168%; font-weight: 400; text-decoration: underline; text-align: center; margin: 0; }

@media (max-width: 1240px) {
    .row1 .content-list { gap: 20px; }

    .row1 .title-box p { font-size: var(--fs-28); }
}

@media (max-width: 1024px) {
    .row1 .content-list { gap: 120px 30px; flex-wrap: wrap; }

    .row1 .content-list .content-item { width: calc(50%); max-width: 300px; }
}

@media (max-width: 768px) {
    .row1 { background-position: top right; background-size: 100% auto; }

    .row1 .content-list { gap: 120px 20px; }

    .row1 .title-box h2 { font-size: 32px; }
    .row1 .content-list .content-item { width: calc(100%); max-width: 261px; }
}

@media (max-width: 620px) {
    .row1 { padding: 28px 0 15px; }

    .row1 .title-box { margin-bottom: 88px; }

    .row1 .tnc-text { font-size: 12px; }

    .row1 .title-box h2 { margin-bottom: 10px; text-align: center; font-size: 28px; }

    .row1 .title-box p { font-size: 16px; line-height: 1.68; }

    .row1 .content-list .content-item { width: calc(100%); max-width: 320px; padding-bottom: 20px; }

    .row1 .content-list .content-item .text .hint { top: 109%; width: 300px; left: 50%; transform: translateX(-50%); text-align: center; padding: 14px 20px 10px; }

    .row1 .content-list { gap: 65px 20px; margin-bottom: 25px; }

    .row1 .content-list .content-item .text { margin-bottom: 25px; }

    .row1 .content-list .content-item:nth-child(2) img { margin-top: -50px; }
    .row1 .content-list .content-item:nth-child(2) .title { margin-top: -4px; }

    .row1 .content-list .content-item:nth-child(3) img { margin-top: -57px; margin-bottom: 0px; }

    .row1 .content-list .content-item:nth-child(3) .title { margin-top: 7px; }
}

.fail-hint,
.success-hint { display: none; } 
.amount{ display: none; }

.mask { position: fixed; top: 0; width: 100%; height: 100vh; background: #000000CC; z-index: 100; }

.fail-hint .mask .hint-box { background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-hint-fail-bg.webp); background-repeat: no-repeat; background-size: 100% 100%; max-width: 619px; width: 80%; min-height: 335px; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 78px 20px 60px; }

.mask .hint-box .type-icon { width: 56px; height: 56px; background-color: var(--v-white); border: 1px solid #EAECF0; box-shadow: 0px 4px 4px 0px #00000040; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; top: 0%; margin: 0; border-radius: 12px; }

.mask .hint-box .closure { display: block; width: 42px; height: 42px; background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-hint-closure.webp); background-repeat: no-repeat; background-size: 100% 100%; transform: translate(-50%, -50%); position: absolute; left: 90%; top: 16%; cursor: pointer; }

.fail-hint .hint-box .text-box .title { text-align: center; color: var(--v-white); font-size: var(--fs-32); font-weight: 600; line-height: 1.2; margin-bottom: 20px; }

.fail-hint .hint-box .text-box .text { text-align: center; color: var(--v-white); font-size: var(--fs-16); font-weight: 400; line-height: 1.5; margin: 0 auto; margin-bottom: 23px; max-width: 350px; }

.fail-hint .hint-box .text-box .text:last-child { margin-bottom: 0px; }

@media (max-width: 768px) {
    .fail-hint .mask .hint-box { min-height: unset; height: auto; padding-bottom: 60px; }
}

@media (max-width: 510px) {
    .fail-hint .mask .hint-box { background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-hint-fail-mb-bg.webp); width: 68%; height: auto; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 45px 20px 55px; min-width: 260px; }

    .mask .hint-box .closure { width: 26px; height: 26px; left: 86%; top: 14%; }
    .mask .hint-box .type-icon { width: 29px; height: 29px; border-radius: 6.21px; top: 2%; }

    .mask .hint-box .type-icon img { width: 14.5px; height: 14.5px; }

    .fail-hint .hint-box .text-box .title { font-size: 21px; margin-bottom: 10px; }

    .fail-hint .hint-box .text-box .text { font-size: 12px; margin-bottom: 20px; max-width: 190px; }

    .fail-hint .hint-box .text-box .text:last-child { max-width: 300px; }

}


.success-hint .mask .hint-box { background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-hint-success-bg.webp); background-repeat: no-repeat; background-size: 100% 100%; max-width: 917px; width: 85%; /* height: 504px; */ position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; padding: 85px 88px 80px; }

.success-hint .mask .hint-box .closure { left: 90.5%; top: 17%; }

.success-hint .mask .hint-box .type-icon { left: 49.5%; top: 1%; }
.success-hint .hint-box .content { display: flex; align-items: center; gap: 30px; }

.success-hint .hint-box .content .img-box { width: 33.2%; transform: rotate(23deg); }

.success-hint .hint-box .content .text-box { display: flex; flex-direction: column; }

.success-hint .hint-box .content .text-box .title { font-size: var(--fs-40); font-weight: 600; line-height: 1.2; color: var(--v-white); margin-bottom: 12px; color: var(--v-white); }

.success-hint .hint-box .content .text-box .text1 { font-size: 24px; font-weight: 600; line-height: 1.5; color: var(--v-white); margin-bottom: 10px; }

.success-hint .hint-box .content .text-box .code-box { background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-hint-code-bg.webp); background-repeat: no-repeat; background-size: 100% 100%; display: flex; align-items: center; padding: 6px 20px; margin-bottom: 20px; max-width: 355px; }

.success-hint .hint-box .content .text-box .code-box p { flex: 1; color: #C93800; font-size: 24px; margin: 0; line-height: 1.5; font-weight: 600; }

.success-hint .hint-box .content .text-box .code-box .copy-icon { display: block; width: 20px; height: 25px; background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-hint-copy-icon.webp); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; }

.success-hint .hint-box .content .text-box .text2 { font-size: var(--fs-16); font-weight: 600; line-height: 1.5; color: #F2F2F7; margin-bottom: 13px; }

.success-hint .hint-box .content .text-box .btn-box { display: flex; align-items: center; gap: 8px; margin-bottom: 65px; }

.success-hint .hint-box .content .text-box .btn-box a { padding: 12px 24px; color: #E35728; background-color: #FEF7FF; border-radius: 50px; text-align: center; cursor: pointer; font-weight: 600; }

.success-hint .hint-box .content .text-box .text3 { font-size: 11px; font-weight: 600; line-height: 1.5; color: #FFFFFF; margin-bottom: 0px; }

.loading-box { display: none; }

.loading-img { width: 20%; max-height: min-content; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; text-align: center; }

.loading-img img { animation: rotate 1s infinite linear; }

html[lang="ar-AE"] .success-hint .hint-box .content .text-box { flex: 1; text-align: right; }
html[lang="ar-AE"] .mask .hint-box .closure { left: 10% !important; }

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 1600px) {
    .success-hint .hint-box .content .text-box .text1 { font-size: var(--fs-20); }

    .success-hint .hint-box .content .text-box .code-box p { font-size: var(--fs-20); }
}

@media (max-width: 1000px) {
    .success-hint .mask .hint-box { padding: 85px 40px 80px; }
}

@media (max-width: 650px) {
    .success-hint .mask .hint-box { background-image: url(/wp-content/themes/vantage-plus/images/wheel-of-fortune-hint-success-mb-bg.webp); width: 59%; padding: 58px 24px 18px; min-width: 262px; }

    .success-hint .mask .hint-box .closure { left: 84.5%; top: 13%; width: 26px; height: 26px; }

    .success-hint .hint-box .content .text-box { flex: 1; }
    .success-hint .hint-box .text-box .title { margin-bottom: 12px; }

    .fail-hint .hint-box .text-box .text1 { font-size: 14px; margin-bottom: 20px; max-width: 190px; }

    .success-hint .hint-box .content .text-box .code-box { padding: 6px 9px 6px 12px; margin-bottom: 18px; max-width: 355px; }

    .success-hint .hint-box .content .text-box .code-box p { flex: 1; color: #C93800; font-size: 10px; }

    .success-hint .hint-box .content .text-box .code-box .copy-icon { width: 11px; height: 14px; }

    .success-hint .hint-box .content .text-box .text2 { font-size: 10px; }
    .success-hint .hint-box .content .text-box .btn-box { display: flex; align-items: center; gap: 3px; margin-bottom: 25px; }

    .success-hint .hint-box .content .text-box .btn-box a { padding: 9px 13px; font-size: 10px; border-radius: 17px; line-height: 1.5; }

    .success-hint .hint-box .content .text-box .text3 { font-size: 8px; }

    .success-hint .hint-box .content .img-box { width: 52px; height: 53px; transform: rotate(32deg); position: absolute; top: 22%; left: 76%; }

    .success-hint .hint-box .content .text-box .text1 { width: calc(100% - 63px); }

}
/* ! plusvantagema|2025-12-03 15:10:00 ! */