@font-face {
	font-family: 'PingFang';
	src: url("../fonts/PingFang-Bold-1.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-Heavy.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-Semibold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-Thin.ttf") format("truetype");
	font-weight: 100;
	font-style: normal;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-BlackItalic.ttf") format("truetype");
	font-weight: 900;
	font-style: italic;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-HeavyItalic.ttf") format("truetype");
	font-weight: 800;
	font-style: italic;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-BoldItalic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-SemiboldItalic.ttf") format("truetype");
	font-weight: 600;
	font-style: italic;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-MediumItalic.ttf") format("truetype");
	font-weight: 500;
	font-style: italic;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-LightItalic.ttf") format("truetype");
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: 'Gilroy';
	src: url("../fonts/Gilroy/Gilroy-ThinItalic.ttf") format("truetype");
	font-weight: 100;
	font-style: italic;
}
@font-face {
	font-family: 'Britannic Bold';
	src: url("../fonts/luckydraw2026/Britannic-Bold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Fredoka Bold';
	src: url("../fonts/luckydraw2026/Fredoka-Bold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'Fredoka Light';
	src: url("../fonts/luckydraw2026/Fredoka-Light.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat Bold';
	src: url("../fonts/luckydraw2026/Montserrat-Bold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}
@font-face {
	font-family: 'NotoSerifDisplay Italic';
	src: url("../fonts/luckydraw2026/NotoSerifDisplay-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'NotoSerifDisplay';
	src: url("../fonts/luckydraw2026/NotoSerifDisplay.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
}
section.luckydrawpd2025{
    font-family: 'Gilroy', sans-serif !important;
    font-weight: 400;
}
section.luckydrawpd2025 img{width: 100%;}
::selection {
    background: #EFC4C6;
    
    text-shadow: none;
}
.luckydrawpd2025 ol{
    padding-left: 20px;
    margin-bottom: 0;
    /*font-weight: 500;*/
}
.luckydrawpd2025 li {
    padding-left: 10px;
}


.title-col{
  display:flex;
  flex-direction:column;
  align-items: center;
  gap: 10px;
}

.t1-img{
    max-width:400px;
}

.t2-img{
    max-width:700px;
}

.t3-img{
    max-width:1100px;
}

#form{
    background: #FFF5F6;
    padding: 60px 0;
}
#form h2{
    font-weight: 900;
    color: #D30076;
    text-transform: uppercase;
    text-align: center;
    font-size: 50px;
    font-family: "Fredoka Bold";
    margin-bottom: 30px;
}
#form .box{
    background: #fff;
    border-radius: 20px;
    padding: 60px 90px;
    filter: drop-shadow(0px 0px 15px rgba(140,122,92,0.5));
    margin: auto 10%;
}
@media(max-width: 767.9px){
    #form .box{
        padding: 60px;
    }
}
#luckydrawForm{margin-bottom: 0;}
#luckydrawForm label{
    display: block;
    color: #000;
    font-size: 20px;
    font-weight: 600;
    text-transform: none;
    font-family: "Montserrat Bold";
    margin-bottom: 3px;
    margin-top: 5px;
    letter-spacing: 0;
}
#luckydrawForm input, #luckydrawForm textarea{
    background: #f1f2f2;
    border-color: #f1f2f2;
    border-radius: 0;
    font-size: 18px;
    padding: 8px 20px;
}
#luckydrawForm input:placeholder{color: #A7A9AC;}
#luckydrawForm #submitBtn input{
    background: #EE4B78;
    border-radius: 50px;
    font-weight: 400;
    color: white;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 20px;
    padding: 10px 50px;
}
.loadingDiv{display: none;}

#tnc{
    background: #fff;
    color: #EE4B78;
    padding: 60px 0;
}
#tnc h3{
    color: #EE4B78;
    font-weight: 600;
    font-family: "Montserrat Bold";
}


#banner{}
#banner .titlebanner{
    padding: 60px 0;
    /*background: #60181e;*/
    text-align: center;
    background:url("../images/luckydrawpd2026/sec1-bg.png");
    background-size: cover;
    background-position: top center;
}
#banner h1{
    color: #ede8df;
    font-family: 'PingFang',sans-serif;
    line-height: 1.1;
}
#banner h1 span{
    color: inherit;
    display: block;
    line-height: inherit;
}
#banner .parentsday{font-size: 4.2vw; letter-spacing: 2vw; margin-bottom: -10px; font-family:'Britannic Bold';}
#banner .luckydraw{font-size: 10vw; letter-spacing: 1px; font-family: 'Gilroy',sans-serif; font-weight: 800;}
#banner .chinese{font-size: 4vw; letter-spacing: 2vw;}
#banner .date{font-size: 3.5vw; 
/*letter-spacing: 0.6vw; */
/*font-family: 'Gilroy',sans-serif; */
font-family: 'Britannic Bold';
font-weight: 700;
background: #fff; 
color: #C68384; 
display: inline-block; 
border-radius: 100px; 
padding: 10px 90px;
margin-top: 30px;}

sub, sup {
    font-size: .65em;
}
#banner .declare{
    background-image: url('../images/luckydrawpd2025/gradient.webp');
    background-size: cover;
    background-position: center;
    padding: 30px 0;
}
.declare .textbox{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.declare .textbox span{
    display: block;
    color: #231f20;
    font-weight: 700;
    font-size: 2vw;
    line-height: 1;
    padding: 0 10px;
}
.declare .textbox span.big{
    font-weight: 900;
    font-size: 5vw;
}
.declare span + br{display: none;}
@media(max-width: 629.9px){
    .declare span + br{display: block; content: ''; width: 100%; height: 100%;}
    .declare .textbox span{font-size: 3vw; padding: 0 5px;}
    .declare .textbox span.big{font-size: 7vw;}
    #banner .parentsday{margin-bottom: 0;}
}
@media(max-width: 576.9px){
    #banner .parentsday{font-size: 5.7vw;}
    #banner .luckydraw{font-size: 13vw;}
    #banner .chinese{font-size: 5.5vw;}
    #banner .date{font-size: 4.5vw; letter-spacing: 0.4vw;padding: 10px 50px;}
    .declare .textbox span{font-size: 5vw; padding: 0 5px;}
    .declare .textbox span.big{font-size: 11vw;}
}



/*section 2*/
.ga1{
    /*background: url("../images/luckydrawpd2026/sec23-bg.png");*/
    background: url("../images/luckydrawpd2026/ga-bg.png");
    /*padding: 60px 0;*/
    background-size: cover;
    background-position: top center;
    aspect-ratio: 1920 / 810;
    align-content: flex-end;
    /*align-content: center;*/
    position: relative;
}

.sk-logo {
    max-width: 85px;
    position: absolute;
    bottom: 30px;
    left: 3%;
}

.ga2{
    /*background: url("../images/luckydrawpd2026/sec23-bg.png");*/
    background: url("../images/luckydrawpd2026/ga-bg.png");
    /*padding: 60px 0;*/
    background-size: cover;
    background-position: top center;
    aspect-ratio: 1920 / 810;
    align-content: flex-end;
    position: relative;
   
}

.ga2 .container{
    padding-top: 100px;
    padding-bottom: 40px;
}

.ga1 img{
    /*max-width: 900px;*/
        width: 900px;
}

.gold1-img{
    /*height:450px;*/
    /*width:auto !important;*/
    /*max-width: fit-content;*/
    
    /*2*/
    /*max-width: 90%;*/
    /*max-height: 70%;*/
    /*object-fit: contain;*/
}

.ga1 .small-p{
    /*position: absolute;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    /*bottom: 5px;*/
}

.gold-wrapper{
    position: relative;
    display: inline-block;
}

.ga1 .gold-wrapper{
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*height: 100%;*/
    /*justify-items: center;*/
}

.gold{
    display: block;
}

/*.gold-comment{*/
/*    position: absolute;*/
/*    top: 10%;*/
/*    right: -34%;*/
/*    transform: translateX(-50%);*/
/*    width: 380px;*/
/*    height: 175px;*/
/*    background: url("../images/luckydrawpd2026/gold_commentbg.png") no-repeat center;*/
/*    background-size: contain;*/
/*    position: absolute; */
/*}*/


/*.gold-comment p{*/
/*    position: absolute;*/
/*    top: 20%;*/
/*    left: 14%;   */
/*    margin: 0;*/
/*    font-family:"Fredoka Light";*/
/*    font-weight:700;*/
/*    font-size:45px;*/
/*    color:#D30076 !important;*/
/*}*/

.gold-wrapper {
    position: relative;
    display: inline-block;
}

.gold-comment {
    position: absolute;   
    top: 10%;
    right: -32%;
    /*top:4%;*/
    /*right:-7%;*/
    transform: translateX(-50%);
    width: 360px;
}

/* background image becomes real img */
.gold-comment img {
    width: 100%;
    display: block;
}

.gold-comment p {
    position: absolute;
    top: 19%;
    left: 12%;
    margin: 0;
    font-family: "Fredoka Bold";
    /*font-weight: 700;*/
    color: #D30076 !important;
    font-size: 45px;
    color: #D30076;
}

.cn-style .gold-comment p{
    left:30%;
}
.ga1 p, .ga2 p{
    color:#000;
}

.small-p{
    font-family:'Gilroy', sans-serif !important;
    font-size: 14px;
}


.ga2 img{
    /*width:50%;*/
}

.ga2 .gold-wrapper{
    width:50%;
    padding:0;
    display: flex;
    justify-content: center;
}

.gold-comment.g2{
    top: -11%;
    right: -21%;
    /* width: 375px; */
    /* height: 146px; */
    width: 330px;
}


.gold-comment.g2 p {
    top: 17%;
    left: 9%;
}

.cn-style .gold-comment.g2 p {
    top: 17%;
    left: 28%;
}

.gold-comment.g3{
    top: 0%;
    right: -26%;
}


.gold-comment.g3 p {
    position: absolute;
    top: 18%;
    left: 8%;  
    margin: 0;
    font-family:"Fredoka Bold";
    font-weight:700;
    font-size:45px;
    color:#D30076 !important;
}
.cn-style .gold-comment.g3 p {
    top: 17%;
    left: 25%;
}
.pt-20{
    padding-top:20px;
}
.pb-20{
    padding-bottom:20px;
}
.pb-25{
    padding-bottom:25px;
}
.pb-35{
    padding-bottom:35px;
}


#grandprize{
    background: #ede8df;
    padding: 60px 0;
    position: relative;
}
#grandprize .container{position: relative;}
#grandprize .container .content{text-align: center;}
#grandprize .container p{
    font-size: 28px;
    color: #60181e;
    text-align: center;
    font-weight: 600;
    line-height: 1.1;
    margin-top: 10px;
    margin-bottom: 50px;
}
#grandprize .ribbon{max-width: 400px;}
#grandprize p:has(.grandprizeimg){text-align: right;}
@media(min-width: 992px){
    #grandprize .fullwidthbox{
        width: 100%;
        height: 100%;
        align-content: center;
        position: absolute;
        left: 0;
        top: 0;
    }
    #grandprize .grandprizeimg{
        max-width: calc(66.66666667% - 30px);
    }
}

#prizes{
    background: #d8cdbc;
    padding: 60px 0;
}
#prizes .content{
    text-align: center;
}
#prizes .content img{
    max-height: 400px;
}
#prizes .content p{
    font-weight: 600;
    font-size: 28px;
    line-height: 1.1;
    color: #60181e;
    margin-top: 10px;
}




#howto{
    background: url("../images/luckydrawpd2026/sec4bg.png") center center;
    padding: 90px 0;
    background-size: cover;
}
#howto h2 {
    text-align: center;
    color: #D30076;
    margin-bottom: 40px;
    /*font-weight: 900;*/
    text-transform: uppercase;
    font-size: 60px;
    font-family: "Fredoka Bold";
}
#howto ol{margin-bottom: 5px;}
.datelocation{
    background: #60181e;
    border-radius: 20px;
    padding: 20px;
    margin-top: 15px;
}
.datelocation span{
    color: white;
}
.datelocation p{
    color: white;
    font-size: 20px;
    font-weight: 700;
}
.datelocation p:last-child{
    margin-bottom: 0;
}
.steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0;
    padding: 60px 0px 0px 0px;
}

.step {
    padding: 15px;
    width: 20%;
    text-align: center;
    position: relative;
}
.step-wider {
    padding: 15px;
    width: 40%;
    text-align: center;
    position: relative;
}
/*.step:first-child::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: -11px;*/
/*    width: 22px;*/
/*    height: 22px;*/
/*    background: #9b8579;*/
/*    border: 4px solid #fff;*/
/*    border-radius: 50%;*/
/*    transform: translateY(-50%);*/
/*    z-index: 1;*/
/*}*/
/*.step:last-child::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    right: -11px;*/
/*    width: 22px;*/
/*    height: 22px;*/
/*    background: #9b8579;*/
/*    border: 4px solid #fff;*/
/*    border-radius: 50%;*/
/*    transform: translateY(-50%);*/
/*    z-index: 1;*/
/*}*/

.step .innerbox{
    background: #fff;
    width: 100%;
    height: 100%;
    /*padding: 40px;*/
    padding:65px 20px 20px 20px;
    border-radius: 20px;
    position:relative;
    justify-items: center;
    box-shadow: 5.4px 2.7px 6.8px 0px rgba(0, 0, 0, 0.2);
}

.step .step-num{
    position:absolute;
    top: calc(0% - 60px);
    left: calc(50% - 60px);
    background: #fff;
    padding: 10px;
    border-radius: 50%;
    /*box-shadow: 5.4px 2.7px 6.8px 0px rgba(0, 0, 0, 0.2);*/
    box-shadow: 21px -12px 14px -22px rgba(0, 0, 0, 0.2);
}

.num-bg{
    background:#EE4B78;
    color: #fff;
    border-radius:50%;
    width: 100px;
    height: 100px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-family:"NotoSerifDisplay";
    font-size:65px;
}


/*.step:nth-child(1):before{*/
/*    content: '';*/
/*    display: block;*/
/*    width: calc(100% + 2px);*/
/*    height: 50%;*/
/*    border: 4px solid #fff;*/
/*    border-radius: 40px 40px 0 0;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: -2px;*/
/*    border-bottom: 0;*/
/*}*/
/*.step:nth-child(2):after{*/
/*    content: '';*/
/*    display: block;*/
/*    width: calc(100% + 4px);*/
/*    height: 50%;*/
/*    border: 4px solid #fff;*/
/*    border-radius: 0 0 40px 40px;*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: -4px;*/
/*    border-top: 0;*/
/*}*/
/*.step:nth-child(3):after{*/
/*    content: '';*/
/*    display: block;*/
/*    width: calc(100% + 4px);*/
/*    height: 50%;*/
/*    border: 4px solid #fff;*/
/*    border-radius: 40px 40px 0 0;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: -4px;*/
/*    border-bottom: 0;*/
/*}*/
/*.step:nth-child(4):before{*/
/*    content: '';*/
/*    display: block;*/
/*    width: calc(100% + 4px);*/
/*    height: 50%;*/
/*    border: 4px solid #fff;*/
/*    border-radius: 0 0 40px 40px;*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: -4px;*/
/*    border-top: 0;*/
/*}*/
.step-icon img{
    max-width: 100px;
    margin-bottom: 15px;
}
.receipt-img, .qr-img{
    /*max-width: 100px;*/
}
.step-title {
    font-weight: 600;
    line-height: 1.1;
    font-size: 30px;
    letter-spacing: 1px;
    color: #DD0046;
    margin-bottom: 10px;
    font-family:"NotoSerifDisplay Italic";
}
.step-text {
    /*font-size: 14px;*/
    color: #000;
    text-align: center;
    font-family:'Gilroy', sans-serif !important;
    /*font-weight:600;*/
}
@media (max-width: 1199.9px){
    /*section 2*/
    .gold-comment {
        top: 0%;
        right: -21%;
    }
    
    .cn-style .gold-comment p {
        left: 24%;
    }
    
    /*section 3*/
    .gold-comment.g2 {
        top: -11%;
        right: -50%;
    }
    
    .cn-style .gold-comment.g2 p {
        top: 17%;
        left: 21%;
    }

    
    .gold-comment.g3 {
        top: -1%;
        right: -40%;
    }
    .cn-style .gold-comment.g3 p {
        top: 17%;
        left: 20%;
    }
    .step .innerbox{padding: 65px 20px 20px 20px;}
    .gold-comment img {
        width: 75%;
    }
    .gold-comment p{
        font-size:32px !important;
    }
    #howto h2, #form h2{
        font-size: 32px !important; 
    }
    
}
@media (max-width: 991.9px){
    
    
    
    .t1-img {
        max-width: 350px;
    }
    
    .t2-img {
        max-width: 500px;
    }
    
    .t3-img {
        max-width: 700px;
    }
    
    /*section 2*/
    .gold-comment {
        top: 4%;
        right: -32%;
        width: 280px;
    }
    
    .gold-comment p {
        font-size: 28px !important;
        top: 17%;
        left: 7%;
    }
    
    /*section3 */
    .gold-comment.g2 {
        top: 15%;
        right: -31%;
        width: 280px;
    }
    
    .gold-comment.g2 p {
        top: 16%;
        left: 8%;
    }
    
    .gold-comment.g3 {
        top: 19%;
        right: -29%;
        width: 300px;
    }
    
    .gold-comment.g3 p {
        top: 18%;
        left: 6%;
    }

    .ga2 .gold-wrapper {
        width: 100%;
    }
    
    .ga2 .container {
         padding-top: 10px; 
         padding-bottom: 0px; 
    }
    #howto{
        padding: 60px 0;
    }
    
    #howto h2{
        margin-bottom: 0px;
        font-size: 32px !important;
    }
    
    .steps {
        flex-direction: column;
        gap: 45px;
        padding-bottom:0px;
    }
    .step {
        width: 100%;
    }
    .step:first-child::after{
        top: 0;
        left: calc(50% - 10px);
    }
    .step:nth-child(1):before{
        border: 4px solid #fff;
        left: auto;
        right: 0;
        width: 50%;
        height: calc(100% + 4px);
        border-left: 0;
        border-radius: 0 40px 40px 0;
        bottom: -4px;
    }
    .step:nth-child(2):after{
        border: 4px solid #fff;
        left: 0;
        right: auto;
        width: 50%;
        height: calc(100% + 4px);
        border-right: 0;
        border-radius: 40px 0 0 40px;
        bottom: -4px;
    }
    .step:nth-child(3):after{
        border: 4px solid #fff;
        left: auto;
        right: 0;
        width: 50%;
        height: calc(100% + 4px);
        border-left: 0;
        border-radius: 0 40px 40px 0;
        bottom: -4px;
    }
    .step:nth-child(4):before{
        border: 4px solid #fff;
        left: 0;
        right: auto;
        width: 50%;
        height: calc(100% + 4px);
        border-right: 0;
        border-radius: 40px 0 0 40px;
        bottom: -4px
    }
    .step:last-child::after{
        bottom: -11px;
        left: calc(50% - 10px);
        transform: none;
        top: auto;
    }
    
    .step-title {
        font-size: 28px !important;
    }
    
    #form .box{
        margin:auto;
        padding:40px 30px;
    }
}

@media (max-width: 879.9px){
    
    
    /*section 2*/
    .gold-comment {
        top: 4%;
        right: -23%;
        width: 280px;
    }
    
    
    /*section3 */
    .gold-comment.g2 {
        top: 7%;
        right: -18%;
        width: 280px;
    }
    
    .gold-comment.g3 {
        top: 13%;
        right: -17%;
    }
    
    
    
}
@media(max-width: 767.9px){
    .ga1, .ga2{
        aspect-ratio:auto;
    }
    .t1-img {
        max-width: 250px;
    }
    
    .t2-img {
        max-width: 300px;
    }
    
    .t3-img {
        max-width: 1000px;
    }
    
    /*section2 */
    .gold-comment {
        top: 10%;
        right: -54%;
    }
    
    .gold-comment img {
        width: 60%;
    }
    
    .gold-comment p {
        font-size: 22px !important;
        top: 18%;
        left: 6%;
    }
    
    .cn-style .gold-comment p {
        left: 19%;
    }
    
    /*section 3*/

    .gold-comment.g2 {
        top: 10%;
        right: -45%;
    }
    
    .gold-comment.g2 img {
        width: 60%;
    }
    
    .gold-comment.g2 p {
        font-size: 22px !important;
        top: 19%;
        left: 7%;
    }   
    
    .cn-style .gold-comment.g2 p {
        top: 17%;
        left: 18%;
    }
    
    .gold-comment.g3 {
        top: 18%;
        right: -50%;
    }
    
    .gold-comment.g3 img {
        width: 60%;
    }
    
    .gold-comment.g3 p {
        font-size: 22px !important;
        top: 18%;
        left: 6%;
    }   
    
    .cn-style .gold-comment.g3 p {
        top: 17%;
        left: 16%;
    }
    
    
    
    .ga2 .gold-wrapper {
        width: 100%;
        justify-items: center;
    }

    #howto h2, #form h2{
        font-size: 32px !important; 
    }
    
    .step .innerbox {
        padding: 55px 20px 20px 20px;
    }
    
    .step .step-num{
        top: calc(0% - 50px);
        left: calc(50% - 50px);
    }
    
    .num-bg {
        width: 80px;
        height: 80px;
        font-size:32px !important;
    }
    
    
    
}
@media(max-width: 576.9px){
    
    .small-p{
        font-size:12px;
        padding: 0 12px 20px 12px;
    }
    
    /*section2*/
    .ga1 img {
        width: 350px;
    }

    .gold-comment {
        top: 1%;
        right: -120%;
        width: 370px;
    }
    
    .gold-comment img {
        width: 40%;
    }
    .gold-comment p {
        font-size: 19px !important;
        top: 18%;
        left: 4%;
    }
    
    .cn-style .gold-comment p {
        left: 13%;
    }
    
    /*section3 */
    .ga2 img{
        /*width:50%;*/
        width: 350px;
    }

    .gold-comment.g2 {
        top: 10%;
        right: -55%;
        width: 370px;
    }
    
    .cn-style .gold-comment.g2 p {
        top: 17%;
        left: 12%;
    }
    
    .gold-comment.g2 img {
        width: 40%;
    }
    .gold-comment.g2 p {
        font-size: 19px !important;
        top: 19%;
        left: 4%;
    }
    
    
    .gold-comment.g3 {
        top: 10%;
        right: -55%;
        width: 370px;
    }
    
    .gold-comment.g3 img {
        width: 44%;
    }
    .gold-comment.g3 p {
        font-size: 19px !important;
        top: 19%;
        left: 3%;
    }
    
    .cn-style .gold-comment.g3 p {
        top: 17%;
        left: 12%;
    }
    
    .receipt-img img, .qr-img img{
        max-width:150px;
    }
    
     #howto h2, #form h2{
        font-size: 24px !important; 
    }
    
    .step-title {
        font-size:24px !important;
    }
    
    .step-text{
        font-size:14px !important;
    }
    
    #form .box{padding: 40px 30px;}
    #luckydrawForm input[type=file]{width: 100%;}
    #luckydrawForm label{
        font-size:14px !important;
    }
    #luckydrawForm input, #luckydrawForm textarea{
        font-size:14px !important;
    }
    
    #tnc .container{
        padding-left:20px;
        padding-right:20px;
    }
    .luckydrawpd2025 ol{
        font-size: 14px;
    }
}

@media(max-width: 576.9px){
    .gold-comment.g2 {
        top: 10%;
        right: -60%;
        width: 357px;
    }
    
    .gold-comment.g3 {
        top: 10%;
        right: -60%;
        width: 360px;
    }
}

@media(max-width: 456.9px){
    
    
    /*section2*/
    

    .gold-comment {
        top: 1%;
        right: -122%;
        /*right:-98%;*/
        width: 370px;
    }
    
    .gold-comment img {
        width: 40%;
    }
    .gold-comment p {
        font-size: 19px !important;
        top: 18%;
        left: 4%;
    }
    
    .cn-style .gold-comment p {
        left: 13%;
    }
    
    /*section3 */
    

    .gold-comment.g2 {
        top: 11%;
        right: -87%;
        width: 360px;
    }
    
    .cn-style .gold-comment.g2 p {
        top: 17%;
        left: 12%;
    }
    
    
    .gold-comment.g2 p {
        font-size: 19px !important;
        top: 19%;
        left: 4%;
    }
    
    
    .gold-comment.g3 {
        top: 10%;
        right: -79%;
        width: 345px;
    }
    
   
    .gold-comment.g3 p {
        font-size: 19px !important;
        top: 19%;
        left: 3%;
    }
    
    .cn-style .gold-comment.g3 p {
        top: 17%;
        left: 12%;
    }
}