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

* {
    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,
#wg-fa {
    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/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: bungee;
}


.cf2 {
    font-family: cf2;
}

.cc {
    cursor: pointer;
}

.elePage {
    position: absolute;
}

.showMobile {
    display: none !important;
}

.sCN {
    display: none;
}

body {
    margin: 0;
    padding: 0;
}

section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0vw;
    position: relative;
}

.container {
    width: 100%;
    margin-top: 0vw;
    position: relative;
}

img {
    height: auto;

}

:is(#top_sec, #about_sec, #wheel_sec, #details_sec, #notice_sec) img {
    position: absolute;
}

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

#notice_text {
    color: white;
    font-size: 2vw;
}

#draw_model {
    background-image: url(/asset/images/activity/v2_bg.png);
    opacity: .7;
    position: fixed;
    height: 200vh;
    flex-direction: column;
    background-size: contain;
    background-position-y: -5vw;
    top: 0vw;
}

#draw_model_inner {
    position: absolute;
    top: 63vw;
    z-index: 1005;
    left: 4vw;
    width: 26vw;
    display: none;
    flex-direction: column;
}

#draw_model_inner h2,
#draw_model_inner p,
#draw_model_inner span {
    color: #dce5ff !important;
    font-size: 2.5vw !important;
    text-shadow: 0 0 3px #ffc107c4, 0 0 5px #ffc1079e, 0 0 7px #ffc10766 !important;
}

#draw_model_inner h2 {
    margin-bottom: 0vw;
}

#draw_model_inner #confirm_btn p {
    font-size: 2.5vw !important;
    color: rgb(230, 182, 54) !important;
    text-shadow: none !important;
    font-weight: 600;
}


#confirm_btn {
    width: 7vw;
    height: 4vw;
    margin-top: 3vw;
    align-content: center;
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #e6b636;
}

#confirm_btn img {
    left: 0vw;
    top: 0vw;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

#confirm_btn .gText {
    font-size: 3vw;
    background-image: linear-gradient(to right bottom, #c12637, #c82336, #cf1f35, #d61b33, #dd1632, #e4283d, #eb3649, #f14254, #f75c6d, #fc7486, #fe8a9d, #ffa0b2);
    position: relative;
}


.bShadow {
    text-shadow: 2px 2px 4px #000000c7;
}

.wShadow {
    text-shadow: 0px 0px 6px white, 0px 0px 8px white;
}


#gift_win_model>div {
    background-image: url(/asset/images/activity/eid-al-fitr-2026/gift_win_model_bg.png);
    width: 40vw;
    height: 41vw;
    display: flex;
    flex-direction: column;


}

#gift_win_model>div * {
    margin: 0 auto;
}

#gift_win_model h1 {
    margin-top: 16.5vw;
    width: 60%;
}

#gift_win_model h1,
#gift_win_model p,
#gift_win_model h3 {
    font-size: 2vw;
    background-image: linear-gradient(to bottom, #c12637, #cf404e, #dc5866, #e76d7d, #f28394, #f28394, #f28394, #f28394, #e76d7d, #dc5866, #cf404e, #c12637);
    position: relative;
    color: #b1722b;
}

#gift_win_model p {
    margin-bottom: 1vw;
    margin-top: -1.5vw;
}

#gift_win_model h3 {
    margin-bottom: 1vw;
    margin-top: -1vw;
}


#gift_model_close {
    font-weight: 600;
    color: #ffffff;
    border-radius: 5px;
    padding: 0vw 1.8vw;
    margin-top: 0.5vw !important;
    background-image: linear-gradient(to top, #e0b25c, #a06626);
    box-shadow: 0 0 28px 2px #a26927a3;
    position: relative;
    font-size: 2vw;
    border-radius: 15px;
}


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

#top_sec {
    z-index: 2;
}

#top_sec h2 {
    color: white;
    font-size: 2vw;
}

#top_sec h3 {
    font-size: 3vw;
    width: 28vw;
}

#top_sec #top_bg {
    width: 100%;
    left: 0vw;
    top: 0vw;
}

#top_sec #top_right {
    width: 26vw;
    right: 0vw;
    top: 2vw;
}

#top_sec #top_left {
    width: 23vw;
    left: 0vw;
    top: 2vw;
}

#top_sec #top_title {
    width: 59vw;
    margin-left: 7vw;
    margin-top: 1vw;
    margin-bottom: -1vw;
}

#top_sec #top_line {
    width: 34vw;
    margin: 2vw auto;
}

#top_sec .textArea {
    width: 70%;
    margin-top: 12vw;
    position: relative;
}

#top_sec .textArea img {
    position: initial;
}

#top_sec .textArea div:nth-child(4) {
    display: flex;
    flex-direction: row;
    gap: 1vw;
}

#top_sec .textArea div:nth-child(4) img {
    width: 15vw;
    margin: 0;
    margin-top: -1vw;
}

#top_sec .textArea div:nth-child(4) h2 {
    margin: 0;
}

#top_sec .textArea div:nth-child(4) h2:first-child {
    margin-left: auto;
}

#top_sec .textArea div:nth-child(4) h2:nth-child(3) {
    margin-right: auto;
}

#top_sec .textArea div:nth-child(5) {

    display: flex;
    flex-direction: row;
    gap: 1vw;
    margin: 0;
    margin-top: 1vw;
}

#top_sec .textArea div:nth-child(5)>div {
    display: flex;
    flex-direction: row;
    gap: 1vw;
    margin: 0;
    margin-top: 1vw;
}

#top_sec .textArea div:nth-child(5)>div:first-child {
    margin-left: auto;
}

#top_sec .textArea div:nth-child(5)>div:nth-child(2) {
    margin-right: auto;
}

#top_sec .textArea div:nth-child(5)>div img {
    width: 7vw;
}

#top_sec .textArea div:nth-child(5)>div p {
    width: 15vw;
    text-align: left;
}

#top_sec #scroll_down {
    width: 10vw;
    height: 10vw;
    position: absolute;
    top: 62vw;
    left: 45vw;
    cursor: pointer;
    z-index: 1000;
}



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



/************  about_sec start  **************************************************************/

#about_sec {
    margin-top: -4vw;
}

#about_sec .textArea {
    width: 70%;
    margin-top: 12vw;
    position: relative;
    z-index: 4;
    text-align: left;
}

#about_sec #about_title {
    position: initial;
    margin-bottom: 2vw;
    width: 19vw;
}

#about_sec p {
    font-size: 1.1vw;
    text-align: left;
    margin-bottom: 2vw;
}

#about_sec h3 {
    font-size: 3.5vw;
    width: 44vw;
}

#about_sec #about_bg {
    width: 100%;
    left: 0vw;
    top: -7vw;
}

#about_sec #about_left {
    width: 35vw;
    left: 0vw;
    top: -18vw;
    z-index: 4;
}

#about_sec #about_right {
    width: 31vw;
    right: 0vw;
    top: 0vw;
    z-index: 4;
}

#about_sec #about_gift {
    width: 20vw;
    right: 11vw;
    top: -6vw;
    z-index: 4;
}

#about_sec #about_gift_right {
    width: 23vw;
    right: 7vw;
    bottom: -19vw;
    z-index: 4;
}

#about_sec #about_gift_left {
    width: 23vw;
    left: 8vw;
    bottom: -20vw;
    z-index: 4;
}

#about_sec #about_title_en {
    width: 23vw;
    left: 0vw;
    top: 2vw;
}


/************  about_sec end  **************************************************************/



/************  wheel_sec start  **************************************************************/

#wheel_sec {
    margin-top: 2vw;
    height: 150vw;
}

#wheel_sec #wheel_bg {
    width: 100%;
    top: -17vw;
    left: 0vw;
}

#wheel_sec h2 {
    font-size: 2vw;
    color: white;
    position: relative;
    text-shadow: 1px 2px 2px #00000030;
}

#wheel_sec #wheel_title {
    position: relative;
    width: 36vw;
    margin-top: 29vw;
}

#wheel_sec #wheel_wrapper {
    width: 90vw;
    height: 70vw;
    position: relative;
}

#wheel_sec #wheel_bg1 {
    width: 90vw;
    top: 0vw;
    left: -2vw;
}

#wheel_sec #wheel_podium {
    width: 61vw;
    top: 44.5vw;
    left: 15vw;
}

#wheel_sec #wheel_main,
#wheel_sec #wheel_frame {
    width: 44vw;
    top: 8vw;
    left: 23vw;
}

#wheel_sec #wheel_spin {
    width: 12vw;
    top: 24vw;
    left: 39vw;
}

#wheel_sec #spin_btn {
    width: 10vw;
    top: 65vw;
    left: 45vw;
    height: 10vw;
    position: absolute;
}

#wheel_sec #logInOut_btn {
    width: 18vw;
    top: 80vw;
    right: 18vw;
    height: 18vw;
    position: absolute;
    z-index: 10;
}

#wheel_sec #wheel_gifts {
    width: 20vw;
    top: 81vw;
    left: 14vw;
    z-index: 2;
}

#wheel_sec #logInOut_wrapper {
    width: 24vw;
    height: 22vw;
    position: absolute;
    top: 80vw;
    right: 16vw;
}

#wheel_sec #tickets_warpper {
    position: absolute;
    width: 50vw;
    height: 5vw;
    top: 48.5vw;
    left: 20vw;
    flex-direction: row;
}

#wheel_sec #tickets_warpper h3 {
    color: white;
    font-size: 1.5vw;
}

#wheel_sec #tickets_warpper h3:nth-child(1) {
    margin-right: 1vw;

}

#wheel_sec #tickets_warpper #tickets {
    margin-left: 0vw;
}


#logInOut_wrapper img:nth-child(1) {
    width: 100%;
    top: 0vw;
    left: 0vw;
}

#logInOut_wrapper img:nth-child(2),
#logInOut_wrapper img:nth-child(3) {
    width: 16vw;
    top: 10vw;
    left: 4.5vw;
}



/************  wheel_sec end  **************************************************************/



/************  details_sec start  **************************************************************/

#details_sec {
    margin-top: -24vw;
}

#details_sec #details_bg {
    width: 100%;
    top: -42vw;
    left: 0vw;
}

#details_sec .textArea {
    width: 80%;
    position: relative;
}

#details_sec .textArea #details_title {
    width: 50vw;
    position: relative;
    margin-bottom: 1vw;
}

#details_sec .textArea>h2 {
    font-size: 1.4vw;
    margin-bottom: 1vw;
}

#details_sec .textArea>h3 {
    width: 71%;
}

#details_sec .textArea #details_line {
    position: relative;
    margin: 0vw auto;
    width: 31vw;
}

#details_sec .textArea .detailsInfo {
    display: flex;
    margin-top: 1vw;
    width: 50vw;
    margin-left: 0vw;
}

#details_sec .textArea .detailsInfo>div {
    margin-top: 1.2vw;
    margin-left: 1vw;
}

#details_sec .textArea .detailsInfo>div h2 {
    margin-bottom: .2vw;
    font-size: 1.4vw;
}

#details_sec .textArea .detailsInfo * {
    text-align: left;
    line-height: 1.4vw;
}

#details_sec .textArea .detailsInfo img {
    position: relative;
    margin-top: 0vw;
    width: 4vw;
    margin-left: 0vw;
    margin-right: 0vw;
}



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



/************  notice_sec start  **************************************************************/

#notice_sec {
    margin-top: 2vw;
}

#notice_sec .textArea {
    width: 44%;
    position: relative;
    margin-top: 20vw;
}

#notice_sec h2 {
    font-size: 1.5vw;
    margin-top: 2vw;
}

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

#notice_sec #notice_bg {
    width: 100%;
    left: 0vw;
    top: -38vw;
}


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

#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 10;
}