/*Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap");
.mb_navbar{background-color: transparent !important;};
body {font-family: 'Raleway', sans-serif;}

/*Mid Autumn 2026*/
.banner-container{position: relative; width: 100vw; height: 100vh; overflow: hidden; background:linear-gradient(135deg, #1a2347 0%, #2d3e6f 50%, #1a2347 100%);margin-top: -4%;}
.banner-container::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;background-image: url('/assets/site/dca911527ab347ee02ec.webp'); background-size: cover; background-position: center;z-index: 0;}
.decor { position: absolute; pointer-events: none; }
.flower-top-left {width: 28%;top: -5%;left: -10%;}
.flower-bottom-right {width: 30%;bottom: -15%;right: -2%;}
.moon {width: 30%;left: 20%;top: 15%;animation: moonGlow 4s ease-in-out infinite alternate;z-index: 2;}
@keyframes moonGlow {
0% {filter: brightness(0.7) drop-shadow(0 0 20px rgba(255, 245, 200, 0.3));}
100% {filter: brightness(1.1) drop-shadow(0 0 45px rgba(255, 245, 200, 0.7));}
}
.cloud {width: 15%;opacity: 0.9;}
.cloud1 { top: 38%; left: 10%; width: 18%;}
.cloud2 { top: 45%; left: 38%; z-index: 3; }
.cloud3 { top: 60%; left: 16%; z-index: 3; width: 23%;}
.cloud4 { bottom: -5%; left: 2%; width: 18%;} 
.rabbit {position: absolute;width: 14%;top: 40%;left: 40%;animation: rabbitFloat 2s ease-in-out infinite alternate;z-index: 3;}
@keyframes rabbitFloat {
0% {transform: translateY(0);}
100% {transform: translateY(-10px);}
}
.corner {width: 10%;}
.corner-top-right {top: 10px;right: 10px;}
.corner-bottom-left {bottom: 10px;left: 10px;}
.text-box {position: absolute;right: 15%;top: 28%;text-align: center;}
.text-box h1 {font-family: 'Berkshire Swash', cursive;font-size: 100px;line-height: 1.2;font-weight: 400;background: linear-gradient(90deg, #FFDCAA, #FFDE98);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.text-box p {font-size: 25px;margin-top: 15px;color: #ffffffcc;letter-spacing: 1px;}
.cta-button p{margin-top: 0 !important;font-size: 15px;}
[lang="cn"]{
.text-box{top: 38%;right: 25%;}
}
[lang="zh"]{
.text-box{top: 38%;right: 25%;}
}
[lang="ms"]{
.text-box{top: 30%;right: 5%;}
.text-box h1{font-size: 70px;}
}
[lang="jp"]{
.text-box{top: 30%;right: 10%;}
.text-box h1{font-size: 70px;}
}

/* Laptop view - for screens between 1024px and 1440px */
@media (min-width: 1081px) and (max-width: 1440px) {
/* Mid Autumn 2026*/
.flower-top-left {width: 30%;top: -5%;left: -10%;}
.flower-bottom-right {width: 35%;bottom: -18%;right: -5%;}
.moon {width: 35%;left: 15%;top: 15%;z-index: 2;}
.cloud {width: 20%;opacity: 0.9;}
.cloud1 { top: 38%; left: 2%; width: 23%;}
.cloud2 { top: 45%; left: 35%; z-index: 3; }
.cloud3 { top: 60%; left: 13%; z-index: 3; width: 28%;}
.cloud4 { bottom: -8%; left: 2%; width: 25%;} 
.rabbit {width: 16%;top: 40%;left: 40%;z-index: 3;}
.corner {width: 10%;}
.corner-top-right {top: 55px !important;right: 10px;}
.corner-bottom-left {bottom: 10px;left: 10px;}
.text-box {position: absolute;right: 12%;top: 30%;text-align: center;}
.text-box h1 {font-size: 68px;}
.text-box p {font-size: 20px;margin-top: 15px;}
[lang="cn"]{
.text-box{top: 35%;right: 22%;}
}
[lang="zh"]{
.text-box{top: 35%;right: 22%;}
}
[lang="ms"]{
.text-box{top: 32%;right: 5%;}
.text-box h1{font-size: 45px;}
}
[lang="jp"]{
.text-box{top: 32%;right: 5%;}
.text-box h1{font-size: 50px;}
}
}


/*Tablet view */
@media (max-width: 1025px) {
/*Mid Autumn 2026*/
.flower-top-left {width: 35%;top: -2%;left: -15%;}
.flower-bottom-right {width: 35%;bottom: -15%;right: -4%;}
.moon {width: 42%;left: 10%;top: 25% ;z-index: 2;}
.cloud {width: 22%;opacity: 0.9;}
.cloud1 { top: 43%; left: 2%; width: 23%;}
.cloud2 { top: 56%; left: 35%; z-index: 3; }
.cloud3 { top: 73%; left: 13%; z-index: 3; width: 30%;}
.cloud4 { bottom: -8%; left: 5%; width: 30%;} 
.rabbit {width: 20%;top: 50%;left: 38%;z-index: 3;}
.corner {width: 20%;}
.corner-top-right {top: 10px;right: 10px;}
.corner-bottom-left {bottom: 10px;left: 5px;}
.text-box {position: absolute;right: 13%;top: 36%;text-align: center;}
.text-box h1 {font-size: 58px;}
.text-box p {font-size: 15px;margin-top: 15px;}
[lang="cn"]{
.text-box{top: 35%;right: 22%;}
}
[lang="zh"]{
.text-box{top: 35%;right: 22%;}
}
[lang="ms"]{
.text-box{top: 32%;right: 5%;}
.text-box h1{font-size: 45px;}
}
[lang="jp"]{
.text-box{top: 32%;right: 5%;}
.text-box h1{font-size: 50px;}
}
}

@media (max-width: 991px) {
[lang="cn"]{
.text-box{top: 43%;right: 20%;}
}
[lang="zh"]{
.text-box{top: 43%;right: 20%;}
}
[lang="ms"]{
.text-box{top: 38%;right: 5%;}
.text-box h1{font-size: 35px;}
}
[lang="jp"]{
.text-box{top: 35%;right: 3%;}
.text-box h1{font-size: 40px;}
}
}

@media (max-width:431px){
/*Mid Autumn 2026*/
.flower-top-left {width: 50%;top: -1%;left: -18%;}
.flower-bottom-right {width: 55%;bottom: -6%;right: -6%;}
.moon {width: 70%;left: 15%;top: 25%;z-index: 2;}
.cloud {width: 40%;opacity: 0.9;}
.cloud1 { top: 38%; left: 2%; width: 35%;}
.cloud2 { top: 39%; left: 55%; z-index: 3; }
.cloud3 { top: 48%; left: 20%; z-index: 3; width: 40%;}
.cloud4 { bottom: -2%; left: 2%; width: 35%;} 
.rabbit {width: 35%;top: 38%;left: 65%;z-index: 3;}
.corner {width: 20%;}
.corner-top-right {top: 10px;right: 10px;}
.corner-bottom-left {bottom: 10px;left: 10px;}
.text-box {position: absolute;right: 20%;top: 55%;text-align: center;}
.text-box h1 {font-size: 40px;}
.text-box p {font-size: 13px;margin-top: 15px;}
[lang="cn"]{
.text-box{right: 28%;top:55%}
}
[lang="zh"]{
.text-box{right: 28%;top:55%}
}
[lang="ms"]{
.text-box{top: 55%;right: 8%;}
.text-box h1{font-size: 30px;}
}
[lang="jp"]{
.text-box{top: 55%;right: 15%;}
.text-box h1{font-size: 30px;}
}
}


@media only screen and (max-device-width: 415px) and (-webkit-min-device-pixel-ratio: 2) and (hover: none) and (pointer: coarse){
/*Mid Autumn 2026*/
.text-box {position: absolute;right: 18%;top: 55%;text-align: center;}
[lang="cn"]{
.text-box{right: 28%;top:55%}
}
[lang="zh"]{
.text-box{right: 28%;top:55%}
}
[lang="ms"]{
.text-box{top: 55%;right: 8%;}
.text-box h1{font-size: 30px;}
}
[lang="jp"]{
.text-box{top: 55%;right: 13%;}
.text-box h1{font-size: 30px;}
}
}
 
@media (max-width:391px){
.mb_s1_banner .col-12:first-of-type{height:65vh;}
/*Mid Autumn 2026*/
.text-box {position: absolute;right: 15%;top: 55%;text-align: center;}
.text-box h1 {font-size: 35px;}
.text-box p {font-size: 10px;margin-top: 15px;}
[lang="cn"]{
.text-box{right: 25%;top:55%}
}
[lang="zh"]{
.text-box{right: 25%;top:55%}
}
[lang="ms"]{
.text-box{top: 55%;right: 6%;}
.text-box h1{font-size: 28px;}
}
[lang="th"]{
.text-box{right: 18%;top:55%}
}
[lang="jp"]{
.text-box{top: 55%;right: 12%;}
.text-box h1{font-size: 30px;}
}
}

@media (max-width:376px){
/*Mid Autumn 2026*/
.flower-top-left {width: 50%;top: -1%;left: -18%;}
.flower-bottom-right {width: 55%;bottom: -8%;right: -6%;}
.moon {width: 70%;left: 15%;top: 20%;z-index: 2;}
.cloud {width: 40%;opacity: 0.9;}
.cloud1 { top: 35%; left: 2%; width: 35%;}
.cloud2 { top: 39%; left: 55%; z-index: 3; }
.cloud3 { top: 48%; left: 20%; z-index: 3; width: 40%;}
.cloud4 { bottom: -2%; left: 2%; width: 35%;} 
.rabbit {width: 30%;top: 38%;left: 63%;z-index: 3;}
.corner {width: 20%;}
.corner-top-right {top: 10px;right: 10px;}
.corner-bottom-left {bottom: 10px;left: 10px;}
.text-box {position: absolute;right: 15%;top: 55%;text-align: center;}
.text-box h1 {font-size: 30px;}
.text-box p {font-size: 8px;margin-top: 15px;}
[lang="cn"]{
.text-box{right: 25%;}
}
[lang="zh"]{
.text-box{right: 25%;}
}
[lang="ms"]{
.text-box{top: 55%;right: 4%;}
.text-box h1{font-size: 25px;}
}
[lang="th"]{
.text-box{right: 18%;top:55%}
}
[lang="jp"]{
.text-box{top: 55%;right: 13%;}
.text-box h1{font-size: 28px;}
}
}

@media (max-width: 361px){
/*Mind Autumn 2026*/
.cloud1 { top: 32%; left: 2%; width: 35%;}
.cloud2 { top: 35%; left: 55%; z-index: 3; }
.cloud3 { top: 42%; left: 20%; z-index: 3; width: 40%;}
.rabbit {width: 33%;top: 33%;left: 63%;z-index: 3;}
.text-box {position: absolute;right: 15%;top: 50%;text-align: center;}
}

section.container-fluid{padding-right: 0; padding-left: 0; margin-left: 0; margin-right: 0;}
@media (max-width: 1367px){.first_section{margin-top: 0;}}
@media (max-width:1312px){section.container-fluid{padding-top: 75px;}}
@media (max-width: 1281px){.first_section{margin-top: 0;}}
@font-face { font-family: redHat; src: url("https://cms.antospnc.asia/assets/font/RedHatDisplay-VariableFont_wght.ttf"); }
@font-face { font-family: inter; src: url("https://cms.antospnc.asia/assets/font/Inter-VariableFont_opsz,wght.ttf"); }
.festival-banner { height: 100vh; width: 100vw; position: relative; padding: 0; }
@font-face{font-family:inter;src:url("/assets/site/58b7817148d34dc9d324.ttf");}
.festival-banner{height:100vh;width:100vw;position:relative;padding:0;}
@media screen and (max-width:3000px){.festival-banner{overflow-x:hidden;overflow-y:hidden;}}
.red-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
.festival-banner.char{font-family:redHat!important;display:inline-block;font-size:80px;font-weight:700;background:none!important;color:inherit!important;-webkit-text-fill-color:inherit!important;text-shadow:none;animation:spinning 3s calc(var(--char-index)*0s) ease;}
.spinning[data-splitting] .char{font-family:redHat!important;text-shadow:none;animation:spinning 3s calc(var(--char-index)*0s) ease;background:linear-gradient(to right,#00E0FF 28%,#0057FF 100%)!important;background-size:800% 100%!important;background-position:calc(var(--char-index)*12.5%) 0!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;color:transparent!important;}
@keyframes spinning{50%{transform:rotateY(-360deg);}}
.star-img{height:100%;display:flex;left:10%;position:absolute;align-items:center;animation:glow 4s forwards;}
@keyframes glow{50%{filter:brightness(3);}}
.banner-text-container button{position:relative;background:linear-gradient(90deg,#FF1A50 50%,#730030 100%);color:white;display:block;font-family:"Inter";font-size:18px;width:390px;border-radius:27px;font-weight:600;border:none;padding:3px 20px;box-shadow:0 4px 8px rgba(0,0,0,0.2);}

@media screen and (max-width:2560px){.banner-text-container button{left:100%;} #stocks-no-commission .floating-top-text{top:20%;} #stocks-no-commission .floating-bottom-text{bottom:30%;}}
@media screen and (max-width:1440px){.banner-text-container button{left:70%;} #stocks-no-commission .floating-top-text{top:10%;} #stocks-no-commission .floating-bottom-text{bottom:10%;}}
@media screen and (max-width:1024px){.banner-text-container button{left:50%;} #stocks-no-commission .floating-top-text{top:0%;} #stocks-no-commission .floating-bottom-text{bottom:10%;}}
@media screen and (max-width:768px){.banner-text-container button{left:90%;} #stocks-no-commission .floating-top-text{top:0%;} #stocks-no-commission .floating-bottom-text{bottom:10%;}}
@media screen and (max-width:430px){.banner-text-container button{left:0;}}
@media screen and (max-width:375px){ #stocks-no-commission .floating-top-text{top:10%;} #stocks-no-commission .floating-bottom-text{bottom:20%;}}

.banner-text-container button:hover{box-shadow:1px 1px 20px white;}
.animation-txt{display:flex;align-items:baseline;margin-top:-70px;text-shadow:2px 2px 5px black;font-family:redHat!important;}
.animation-txt p{font-family:redHat!important;font-size:50px;color:white;padding:0 10px;font-style:italic;font-weight:600;}
.flex-txt{display:flex;align-items:baseline;}
.waveVideo{display:none;}

@media screen and (max-width:1600px){.star-img{left:0;} .banner-text-container{left:15%;} .banner-text-container h1{font-size:45px;} .animation-txt p{font-size:45px;} .animated-char{font-size:4rem};}
@media screen and (max-width:1400px) and (max-height:700px){.festival-banner{height:120vh;}}
@media screen and (max-width:1366px) and (max-height:768px){.banner-text-container{left:19%;bottom:5%;}}
@media screen and (max-width:1280px) and (max-height:800px){.banner-text-container{left:19%;bottom:5%;}}
@media screen and (max-width:1200px){.animated-char{font-size:3.5rem};}
@media screen and (max-width:1100px){.animated-char{font-size:3rem};}
@media screen and (max-width:1024px){.festival-banner{height:640px;} .banner-text-container{left:15%;top:5%;}}
@media screen and (max-width:1024px) and (max-height:600px){.banner-text-container{left:16%;top:5%;}}
@media screen and (max-width:1000px){.festival-banner{height:617px;}}
@media screen and (max-width:992px){.festival-banner{margin-bottom:100px;} .animation-txt p{font-size:2.5rem !important;} .animated-char{font-size:2.5rem};}
@media screen and (max-width:952px){.festival-banner{height:592px;}}
@media screen and (max-width:943px){.festival-banner{height:584px; margin-bottom: 100px !important;} .star-img img{width:45%;} .banner-text-container h1{font-size:35px;margin-top:-115px;} .animation-txt p{font-size:30px;} .char{font-size:45px;} .banner-text-container{left:15%;}}
@media screen and (max-width:912px) and (max-height:1380px){.festival-banner{height:570px;}}
@media screen and (max-width:912px) and (max-height:1000px){.festival-banner{height:570px;}}
@media screen and (max-width:870px){.festival-banner{height:543px;}}
@media screen and (max-width:853px){.animated-char{font-size:2.5rem}; .star-img{left:10%;margin-top:15px;} .star-img img{width:45%;}.char{font-size:35px;} .banner-text-container h1{font-size:30px;} .animation-txt p{font-size:25px;} .banner-text-container{top:7%;left:15%;}}
@media screen and (max-width:853px) and (max-height:1000px){.festival-banner{height:533px;}}
@media screen and (max-width:830px) {.animated-char{font-size:2.4rem};}
@media screen and (max-width:820px){.festival-banner{height:512px;} .banner-text-container{left:13%;top:3%;} .banner-text-container h1{margin-top:-70px;} .star-img img{width:40%;}}
@media screen and (max-width:771px){.festival-banner{height:482px;}}
@media screen and (max-width:768px){.animation-txt p{font-size:2rem !important;} .animated-char{font-size:2rem}; .festival-banner{height:480px;padding:0!important;} .banner-text-container{left:15%; top:0;} .banner-text-container h1{margin-top:0px;}}
@media screen and (max-width:730px){.animated-char{font-size:3rem};  .show-promotion-button{margin-top:0.5em;margin-bottom:0.5em;} .festival-banner{height:550px; margin-top:100px;} .star-img{left:-60px;width:100%;} .star-img img{width:90%;} .banner-text-container{justify-content:flex-start;align-items:flex-end;left:20%;} .animation-txt{flex-direction:column;align-items:flex-end;} .flex-txt{display:flex;align-items:baseline;margin-top:-8px;} .banner-text-container h1{font-size:2rem;} .animation-txt p{font-size:20px;} .char{font-size:45px;} .button-container{margin:unset;top:-1%;position:relative;} .button-container button{width:200px;font-size:8px;margin-top:10px;} .margin-top{margin-top:-30px;}}
@media screen and (max-width:640px){.banner-text-container{left:10%;}}
@media screen and (max-width:630px){.banner-text-container{left:10%;}}
@media screen and (max-width:540px){.animation-txt{margin-top:-50px;} .festival-banner{height:100vh;margin-top:0px;} .banner-text-container{left:5%;top:100px;} .banner-text-container h1{margin-top:0px;font-size:2rem;}}
@media screen and (max-width:500px){.banner-text-container h1{margin-top:80px;} .banner-text-container p{font-size:20px;}}
@media screen and (max-width:420px){.banner-text-container h1{font-size:1.5rem;}.animated-char {font-size: 2rem;}}
@media screen and (max-width:380px){.festival-banner{height:100vh;} .banner-text-container h1{margin-top:0px;} .button-container{margin:unset;top:-2%;position:relative;}}
@media screen and (max-width:344px){.banner-text-container{left:0%;} .banner-text-container h1{margin-top:80px;}}