* {
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.timebox {
    max-width: 1920px;
    background: #fbda7d;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
}

.timer {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
    height: 70px;
    line-height: 70px;
    letter-spacing: 8px;
    font-family: Arial;
}

@media screen and (max-width: 576px) {
    .timer {
        height: 45px;
        line-height: 45px;
        font-size: 1.5rem;
        letter-spacing: 4px;
    }
}

.wrapper {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.content {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

 
.s1-1 {
    width: 63.5%;
    position: absolute;
    top: 11.5%;
    left: 16.5%; 
  
    -webkit-mask: url('../images/1-1.png') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/1-1.png') no-repeat center center;
    mask-size: contain;  
}

.s1-2 {
    width: 100%;
    position: absolute;
    top: 27%;
    left: 1%;  
}

.pd{opacity: 0;}
  
.s1-2 .pd-1{ 
    width:28%;
    position: absolute;
    animation: pd-1  0.2s  ease-in-out;
    left: 38%;  
    top:30%;
    z-index: 9;
}

 
.s1-2 .pd-2{ 
    width:25%;
    position: absolute; 
    left: 29%;  
    top:12%;
    z-index: 8;
}

.s1-2 .pd-3{ 
    width:45%;
    position: absolute; 
    left: 0%;  
    top:9%;
    z-index: 7;
}
.s1-2 .pd-4{ 
    width:30%;
    position: absolute; 
    right:17%;  
    top:25%;
    z-index: 7;
}

.s1-2 .pd-5{ 
    width:30%;
    position: absolute; 
    right: 18%;  
    top:0%;
    z-index: 5;
}
.s1-2 .pd-6{ 
    width:31%;
    position: absolute; 
    right:1%;  
    top:10%;
    z-index: 4;
}

 

.s1-3 {
    width: 78%;
    position: absolute;
    bottom: 16.3%;
    right:13%;
     
    -webkit-mask: url('../images/gift-title.png') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/gift-title.png') no-repeat center center;
    mask-size: contain; 
}

.s1-4 {
    width:80%;
    position: absolute;
    bottom: 5%;
    right:8%; 
    
    -webkit-mask: url('../images/gift.png') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/gift.png') no-repeat center center;
    mask-size: contain; 
}


.bg3{position: relative;}

.s3-1 {
    width:85.3%;
    position: absolute;
    top: 4.5%;
    right:6.6%; 
    
    -webkit-mask: url('../images/title-1.png') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/title-1.png') no-repeat center center;
    mask-size: contain;  
}

.gift-0 {
    width:38%;
    position: absolute;
    top: 20%;
    left: 0%;
}


.s4-1 {
    width:85.3%;
    position: absolute;
    top:1.5%;
    right:6.6%; 
   
    -webkit-mask: url('../images/title-2.png') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/title-2.png') no-repeat center center;
    mask-size: contain;  
}
 
 
.s4-2 {
    width:31%;
    position: absolute;
    top:14%;
    right:6%;
}

.s4-3 {
    width:22%;
    position: absolute;
    top:30%;
    left:24%;
}

.s4-4 {
    width:32.5%;
    position: absolute;
    bottom:22% ;
    right: 2.5%;
}



.s5-btn {
    width: 77.5%;
    position: absolute;
    bottom: 0%;
    left: 12.5%;
    -webkit-mask: url('../images/BTN-1.png') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/BTN-1.png') no-repeat center center;
    mask-size: contain; 
}

.s5-slide {
    width: 96%;
    position: absolute;
    top: 23.5%;
    left: 3%;
}

.s5-slide .slide-prev {
    width: 9%;
    position: absolute;
    top: 36%;
    left: -1.5%;
    z-index: 2;
    cursor: pointer;
}

.s5-slide .slide-next {
    width: 9%;
    position: absolute;
    top: 36%;
    right: 0%;
    z-index: 2;
    cursor: pointer;
}

.s6-slide {
    width: 88%;
    position: absolute;
    top: 8.5%;
    left: 6%;
}

.s7-1 {
    width: 77.5%;
    position: absolute;
    top: 2%;
    left: 13%;
}

.s7-2 {
    width: 55%;
    position: absolute;
    top: 63.5%;
    left: 2%;
    -webkit-mask: url('../images/7-2.png') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/7-2.png') no-repeat center center;
    mask-size: contain;
}

.s8-1 {
    width: 35.5%;
    position: absolute;
    top: 12.7%;
    right: 10%;
}

.s8-2 {
    width: 35.5%;
    position: absolute;
    top: 24.2%;
    right: 3%;
}

.s8-3 {
    width: 40.5%;
    position: absolute;
    top: 35.8%;
    right: 6%;
}

 
.offer1_btn {
    width: 78%;
    position: absolute;
    bottom: 0%;
    left: 11.5%;  
}

.offer2_btn {
    width: 78%;
    position: absolute;
    bottom: 0%;
    left: 11.5%; 
}

.offer3_btn {
    width: 78%;
    position: absolute;
    bottom: 0%;
    left: 11.5%; 
}

.offer4_btn {
    width: 78%;
    position: absolute;
    bottom:0%;
    left: 11.5%; 
}

.offer5_btn {
    width: 78%;
    position: absolute;
    bottom:0%;
    left: 11.5%; 
}

.offer6_btn {
    width: 78%;
    position: absolute;
    bottom: 3%;
    left: 11.5%; 
}

.offer7_btn {
    width: 78%;
    position: absolute;
    bottom: 4%;
    left: 12%; 
}

.offer8_btn {
    width: 78%;
    position: absolute;
    bottom:4%;
    left: 12%; 
}

.offer9_btn {
    width: 78%;
    position: absolute;
    bottom: 12%;
    left: 12%; 
}

.offer1_btn, .offer2_btn ,.offer3_btn ,.offer4_btn ,.offer5_btn,.offer6_btn {
    -webkit-mask: url('../images/BTN-1.png') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/BTN-1.png') no-repeat center center;
    mask-size: contain;   
}

.offer7_btn,.offer8_btn,.offer9_btn{
    -webkit-mask: url('../images/BTN.png') no-repeat center center;
    -webkit-mask-size: contain;
    mask: url('../images/BTN.png') no-repeat center center;
    mask-size: contain;  
}


.mySwiper .swiper-slide {
    width: 16.66%;
    height: 100%;
    opacity: 0.5;
    cursor: pointer;
}

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
    border: 5px solid #E5266F;
}

@media (max-width:576px) {
    .mySwiper .swiper-slide-thumb-active {
        border: 2px solid #E5266F;
    }
}


/* cta */

#Cta {
    width: 20%;
    position: absolute;
    top: 75%;
    left: 10%;
}

#Cta2_bg {
    max-width: 1000px;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    pointer-events: none;
}

#Cta2 {
    width: 20%;
    position: absolute;
    bottom: 4%;
    right: 6%;
    z-index: 9999;
    display: none;
    pointer-events: visible;
    cursor: pointer;
}