:root {
    --gWidth: 70vw;
    --gWidth_f: 100vw;
    --wMeasure: 1vw;
    --hMeasure: 2vw;
    --fontSize: 1.1vw;
}

:root:lang(zh),
:root:lang(tw) {
    --fontSize: 1.3vw;
}

* {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    font-family: rubik;
    font-size: var(--fontSize);
    font-weight: 400;
    margin: auto;
    max-width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

::-webkit-scrollbar {
    width: 0px;
}

#chat-widget-container {
    z-index: 2147483648 !important;
}

#top_logo {
    width: 13vw;
    top: 0.5vw;
    left: 2vw;
    z-index: 50;
}

#wg-ar {
    display: none !important;
}

.weglot-container a {
    margin: inherit;
    font-size: 1vw;
}

.weglot-container {
    position: absolute;
    top: 10px;
    right: 0px;
}

.wg-drop.country-selector ul {

    max-height: initial !important;
}

.wg-drop.weg-openleft ul {
    right: 10px !important;
    width: auto !important;
    min-width: 19vw !important;

    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.wg-drop.weg-openleft ul li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#weglot-language-ms {
    font-size: 150%;
    letter-spacing: -1px;
}

.weglot-container>aside>div>a {
    color: white;
}

.wg-drop.country-selector .wgcurrent:after {
    background-image: url(/asset/images/activity/halloween-2025/eid-al-fitr/t_arrow.png) !important;
}

.bold {
    font-size: 105%;
    font-weight: 900;
}

.gText {
    background-image: linear-gradient(to left bottom, #ffbc2f, #ffb62b, #ffb127, #ffab24, #ffa521, #ffaa32, #feaf41, #feb44e, #fdc46d, #fdd38d, #fee1ac, #ffefcd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gText2 {
    background-image: linear-gradient(to bottom, #ffbc2f, #ffb62b, #ffb127, #ffab24, #ffa521, #ffaa32, #feaf41, #feb44e, #fdc46d, #fdd38d, #fee1ac, #ffefcd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}


.cf1 {
    font-family: 'cf1';
}


.cf2 {
    font-family: 'cf2';
}

.cc {
    cursor: pointer;
}

.elePage {
    position: absolute;
}

.showMobile {
    display: none !important;
}

.sCN {
    display: none;
}

.sEN:lang(zh),
.sEN:lang(tw) {
    display: none;
}

.sCN:lang(zh),
.sCN:lang(tw) {
    display: initial;
}

body {
    margin: 0;
    padding: 0;
}

section {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 40vw;
}

img {
    height: auto;
}

#notice_model,
#draw_model,
#gift_win_model,
#draw_model_m {
    width: 100%;
    height: 100vh;
    background-color: #000000ba;
    position: fixed;
    z-index: 1000;
    display: none;
}


/***************** top_sec start *********************/

#top_sec .container {
    width: 100%;
    height: 50vw;
    background-image: url(/asset/images/activity/summer-grand-giveaway-2026/top_bg.png);
    position: relative;
    margin-top: 0;
}

#top_ele1 {
    width: 21vw;
    left: 0vw;
    top: 28vw;
}

#top_ele4 {
    width: 64vw;
    right: 0;
    top: 0vw;
}

#top_ele2 {
    width: 10vw;
    right: 0vw;
    top: 10vw;
}

#top_ele3 {
    width: 43vw;
    right: 18vw;
    top: 7vw;
}

#top_title {
    width: 25vw;
    height: 28vw;
    left: 15vw;
    top: 6vw;
    background-image: url(/asset/images/activity/summer-grand-giveaway-2026/top_title_en.png);
}

#top_title:lang(zh),
#top_title:lang(tw) {
    width: 33vw;
    height: 16vw;
    left: 9vw;
    top: 13vw;
    background-image: url(/asset/images/activity/summer-grand-giveaway-2026/top_title_cn.png);
}


/***************** top_sec end *********************/



/***************** about_prizes_sec start *********************/
#about_prizes_sec {
    position: relative;
    margin-top: -15vw;
}

#about_prizes_sec .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 180vw;
}

#about_bg {
    width: 100%;
    height: auto;
    top: 0vw;
    left: 0vw;
}

.tGrad {
    -webkit-mask-image: linear-gradient(to top,
            transparent 0%,
            black 20%,
            black 100%);
    mask-image: linear-gradient(to top,
            transparent 0%,
            black 54%,
            black 100%);
}

.tShadow {
    text-shadow: 3px 3px 2px #d1ae8aa6, 3px 3px 2px #d1ae8aa6;
}

#about_sec {
    position: relative;
    margin-top: 0;
}

#about_sec .textArea {
    width: 40%;
    margin-top: 30vw;
}

#about_sec .textArea:lang(zh),
#about_sec .textArea:lang(tw) {
    width: 32%;
    margin-top: 26vw;
}

#about_sec h1 {
    font-size: 5vw;
    color: #4CCBDC;
}

#about_sec h1:lang(zh),
#about_sec h1:lang(tw) {
    margin-bottom: 2vw;
}

#about_sec h2 {
    font-size: 3vw;
    color: #4CCBDC;
    margin-top: 2vw;
}

#about_sec h2:lang(zh),
#about_sec h2:lang(tw) {
    font-size: 2.8vw;
    color: #4CCBDC;
    margin-top: 2vw;
}

#about_sec p {
    color: #734601;
    font-size: 1.2vw;
    line-height: 1.8vw;
}

#about_sec p:lang(zh),
#about_sec p:lang(tw) {
    color: #734601;
    font-size: 1.4vw;
    line-height: 2.5vw;
}

#about_7 {
    top: 34vw;
    left: 3vw;
    width: 27vw;
}

#about_6 {
    top: 25vw;
    right: 0vw;
    width: 36vw;
}

#prizes_bg {
    width: 100%;
    height: 96vw;
    top: 84vw;
    left: 0vw;
}

#prizes_sec {
    margin-top: 30vw;
    width: 100%;
    position: relative;
}

#prizes_sec_title {
    position: absolute;
    top: 0vw;
    left: 30vw;
    font-size: 5vw;
    color: #ffffff;
    width: 40vw;
    text-shadow: 3px 3px 8px #00000078, 4px 4px 10px #4688885c;
}

#cards_wrapper {
    width: 70%;
    height: 36vw;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 17vw;
    margin-bottom: 4vw;
}

.cards {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
}

input[type=radio] {
    display: none;
}

.card {
    position: absolute;
    width: 80%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform 1s cubic-bezier(0, 0.15, 0.2, 1.5);
    cursor: pointer;
    box-shadow: 0 5px 10px 4px #40404000, 0 5px 16px 6px #00000033;
}

.innerCard {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

.cardBG {
    width: 100%;
    left: 0vw;
    top: 0vw;
}

.cardTitle {
    width: 16vw;
    right: 3vw;
    top: 2vw;
}

.prizesTextWrapper {
    position: absolute;
    width: 50%;
    left: 25%;
    height: 100%;
    top: 7vw;
}

.prizesTextWrapper p {
    font-size: .8vw;
    width: 10vw;
}

.prizesTextWrapper p:nth-child(1) {
    position: absolute;
    left: 10%;
    top: 9.5vw;
}

.prizesTextWrapper p:nth-child(2) {
    position: absolute;
    left: 56%;
    top: 9.5vw;
}

.prizesTextWrapper p:nth-child(3) {
    position: absolute;
    left: 10%;
    top: 24vw;
}

.prizesTextWrapper p:nth-child(4) {
    position: absolute;
    left: 55%;
    top: 24vw;
}

#item_1:checked~.cards #card_4,
#item_2:checked~.cards #card_1,
#item_3:checked~.cards #card_2,
#item_4:checked~.cards #card_3 {
    transform: translatex(-25%) scale(.8);
    opacity: 1;
    z-index: 1;
}

#item_1:checked~.cards #card_2,
#item_2:checked~.cards #card_3,
#item_3:checked~.cards #card_4,
#item_4:checked~.cards #card_1 {
    transform: translatex(25%) scale(.8);
    opacity: 1;
    z-index: 2;
}

#item_1:checked~.cards #card_1,
#item_2:checked~.cards #card_2,
#item_3:checked~.cards #card_3,
#item_4:checked~.cards #card_4 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 3;
}


#wheel_wrapper {
    margin-top: 0vw;
    display: flex;
    width: 50vw;
    position: relative;
    height: 27vw;
    display: flex;
    flex-direction: column;
}

#wheel_btn1 {
    width: 10vw;
    height: 10vw;
    left: 10vw;
    top: 6.5vw;
    border-radius: 50%;
    z-index: 10;
}

#wheel_btn2 {
    width: 10vw;
    height: 10vw;
    right: 10vw;
    top: 6.5vw;
    border-radius: 50%;
    z-index: 11;
}

#prizes_level_select {
    width: 14vw;
    left: 18.5vw;
}

#wheel {
    position: relative;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 1s cubic-bezier(0, 0.15, 0.2, 1.5);
    position: absolute;
    left: 5vw;
    top: 2vw;
}

#wheel .cf4,
#wheel .cf1 {
    color: white;
    font-size: 7vw;
    font-weight: 100;
    text-shadow: 2px 2px 3px #175e6ae0;
}

#wheel div {
    position: absolute;
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    border-radius: 10px;
    transform-origin: center center;
    opacity: 0;
}

#wheel .cf2 {
    font-size: 4vw;
    color: #ffffff;
    text-shadow: 4px 2px 1px #FEEB7B;
}

#wheel div:nth-child(1) {
    transform: rotate(0deg) translate(15vw) rotate(90deg);
}

#wheel div:nth-child(2) {
    transform: rotate(45deg) translate(15vw) rotate(90deg);
}

#wheel div:nth-child(3) {
    transform: rotate(90deg) translate(15vw) rotate(90deg);
}

#wheel div:nth-child(4) {
    transform: rotate(135deg) translate(15vw) rotate(90deg);
}

#wheel div:nth-child(5) {
    transform: rotate(180deg) translate(15vw) rotate(90deg);
}

#wheel div:nth-child(6) {
    transform: rotate(225deg) translate(15vw) rotate(90deg);
}

#wheel div:nth-child(7) {
    transform: rotate(270deg) translate(15vw) rotate(90deg);
}

#wheel div:nth-child(8) {
    transform: rotate(315deg) translate(15vw) rotate(90deg);
}

#wheel.s1 div:nth-child(7),
#wheel.s2 div:nth-child(8),
#wheel.s3 div:nth-child(1),
#wheel.s4 div:nth-child(2),
#wheel.s5 div:nth-child(3),
#wheel.s6 div:nth-child(4),
#wheel.s7 div:nth-child(5),
#wheel.s8 div:nth-child(6) {
    opacity: 1;
}

#wheel.s1 div:nth-child(6),
#wheel.s2 div:nth-child(7),
#wheel.s3 div:nth-child(8),
#wheel.s4 div:nth-child(1),
#wheel.s5 div:nth-child(2),
#wheel.s6 div:nth-child(3),
#wheel.s7 div:nth-child(4),
#wheel.s8 div:nth-child(5),

#wheel.s1 div:nth-child(8),
#wheel.s2 div:nth-child(1),
#wheel.s3 div:nth-child(2),
#wheel.s4 div:nth-child(3),
#wheel.s5 div:nth-child(4),
#wheel.s6 div:nth-child(5),
#wheel.s7 div:nth-child(6),
#wheel.s8 div:nth-child(7) {
    opacity: 0.5;
}

#btn_wrapper {
    position: absolute;
    width: 80vw;
    height: 37vw;
    top: 16vw;
    left: 10vw;
    z-index: 100000;
}

#btnPrev,
#btnNext {
    left: 0;
    width: 12vw;
    height: inherit;
}

#btnNext {
    left: initial;
    right: 0;
}

#about_10 {
    top: 88vw;
    left: 0vw;
    width: 27vw;
}


#about_8 {
    top: 145vw;
    right: 0vw;
    width: 23vw;
}

#about_2 {
    top: 145vw;
    left: 59vw;
    width: 33vw;
    opacity: .5;
}

#about_3 {
    top: 137vw;
    left: 0vw;
    width: 23vw;
    opacity: .5
}

#about_4 {
    top: 139vw;
    right: 16vw;
    width: 13vw;
    opacity: .5;
}

#about_1 {
    top: 139vw;
    right: 16vw;
    width: 13vw;
    opacity: .5;
}

#about_9 {
    top: 139vw;
    right: 16vw;
    width: 13vw;
    opacity: .5;
}

#prizes_level_select {
    opacity: .5;
}


/***************** about_prizes_sec end *********************/



/***************** details_sec start *********************/
#details_sec {
    position: relative;
    margin-top: -16vw;
}

#details_sec .container {
    background-image: url(/asset/images/activity/summer-grand-giveaway-2026/details_bg.png);
    width: 100%;
    height: 118vw;
    position: relative;
    display: flex;
    margin-top: 0vw;
    background-position-y: 0;
}

#details_sec .textArea {
    width: 49%;
    margin-top: 22vw;
}

#details_sec h1 {
    font-size: 5vw;
    color: #4CCBDC;
    text-shadow: 4px 4px 2px #a9a9a954, 4px 4px 2px #76b1cda6;
    margin-bottom: 2vw;
    text-shadow: none;
}

#details_sec h2 {
    font-size: 3.5vw;
    color: #e9760c;
    margin-top: 2vw;
}

#details_sec h3 {
    font-size: 1.5vw;
    color: #23347F;
    margin-bottom: 3vw;
}

#details_sec p {
    line-height: 1.8vw;
}

#details_1 {
    top: 25vw;
    left: 0vw;
    width: 20vw;
}

#details_2 {
    top: 1vw;
    left: 4.1vw;
    width: 30vw;
}

#details_3 {
    top: 47vw;
    left: 0vw;
    width: 19vw;
}

#details_4 {
    top: 11vw;
    right: 0vw;
    width: 26vw;
}

#details_5 {
    top: 46vw;
    right: 0vw;
    width: 15vw;
}


/***************** details_sec end *********************/


/***************** notice_sec start *********************/
#notice_sec {
    position: relative;
    margin-top: -33vw;
}

#notice_sec .container {
    background-image: url(/asset/images/activity/summer-grand-giveaway-2026/notice_bg.png);
    width: 100%;
    height: 110vw;
    display: flex;
    margin-top: 0vw;
    background-position-y: 0;
    position: relative;
}

#notice_sec .textArea {
    width: 70%;
    margin-top: 44vw;
}

#notice_sec h2 {
    font-size: 3.5vw;
    color: #90572c;
    margin-top: 2vw;
}

#notice_sec p {
    line-height: 1.8vw;
    color: #552500;
}

/***************** notice_sec end *********************/