:root {
    --primary-color-dark: #001D19;
    --primary-color-light: #f2f2f2;
    --secondary-color: #1D976C;
    --accent-color-1: #93F9B9;
    --accent-color-2: #6FFFE9;
    --accent-color-3: #FF0000;
    --accent-color-4: #FFCE00;
    --accent-color-5: #CF1400;
    --text-color: #1C2541;
    --text-selected-color: #3A506B;
    --accent-color-6: #E4AA6A;
  }
  #mid-autumn-2025 .midAutumnS1Backgroud:before {width: 100%;height: 100%;content: "";background-color: #0127742b;position: absolute;z-index: -1;}
  #mid-autumn-2025 .midAutumnS1Backgroud {filter: brightness(0.85);min-height: 100vh; width: 100vw;position: absolute;z-index: 18;}
  #mid-autumn-2025 .S1colorBackground {height: 100vh;width: 100%;position: absolute;z-index: -1;padding: 0;}
  /* mid autumn !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
  /* #mid-autumn-2025 { overflow-x: hidden; } */
  #mid-autumn-2025 main img {border: 0;}
  #mid-autumn-2025 main {position: relative;width: 100%;height: 100vh;}
  :lang(ms) #mid-autumn-2025 main .home-content {max-width: 80%;}
  #globe-canvas {touch-action: unset !important;}
  main .home-content p {opacity: 1;max-width: 55%;color: #fff;}
  main #slider {width: 100%;height: 100%;margin: 0 auto;position: relative;}
  main #slider canvas {width: 150%;height: 150%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}
  main #slider img {width: 100%;max-width: 100%;position: relative;z-index: 0;}
  main .slider-inner {position: relative;display: flex;align-items: center;width: 100%;height: 100%;margin: 0 auto;z-index: 5;}
  main #slider-content {padding: 0 10px;margin-bottom: 8rem;}
  main #slider-content .hide {display: none;}
  main #slider-content .title {max-width: 85%}
  main #slider-content .promotion-button {font-size: 16px;}
  main #slider-content .promotion-button.primary {background-color: var(--primary-color-light);color: var(--primary-color-dark);border-radius: 20px;padding: 5px 25px;border: 1px solid transparent;transition: .35s;}
  main #slider-content .promotion-button.primary:hover {background-color: transparent;border-color: var(--accent-color-1)}
  main #slider-content #slide-status {margin-top: 10px;font-family: "acta-display", serif;font-weight: 400;font-size: 18px;color: white;}
  #mid-autumn-2025 .midAutumnC1 p {font-size: 16px;}
  #mid-autumn-2025 p {font-family: zabal-bold, Tahoma;color: var(--primary-color-light) #f2f2f2;}
  #mid-autumn-2025 .midAutumnC1 span {background: linear-gradient(to right, #00E0FF, #0057FF);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
  #mid-autumn-2025 .midAutumnC1 h1 {font-size: 70px; font-family: Inter_Bold;}
  #mid-autumn-2025 .mobile-content {position: relative;z-index: 18;}
  #mid-autumn-2025 .section7 {padding-top: 0px !important;}
  main #pagination {position: absolute;top: 50%;transform: translateY(-50%);right: 30px;z-index: 6;}
  main #pagination button {display: block;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 0;width: 16px;height: 16px;background-color: #FFFFFF;border-radius: 100%;padding: 0;margin: 30px 0;cursor: pointer;position: relative;opacity: 0.2;transition: opacity 0.2s ease-in-out;outline: none;}
  main #pagination button:hover {opacity: 0.5;}
  main #pagination button.active {opacity: 1;}
  main #pagination button.active:before {width: 300%;height: 300%;opacity: 1;}
  main #pagination button:before {content: "";display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;border-radius: 100%;border: 1px solid rgba(255, 255, 255, 0.2);opacity: 0;transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out;}
  li {font-size: 18px;}
  .accordion-body {padding: 0 30px;}
  .step {max-width: fit-content;}
  .hover-register {transition: .15s ease-in-out}
  .hover-register:hover {transform: scale(1.2);}
  .title-animation {position: relative;font-size: 70px;}
  .title-animation span {transition: 0.5s;font-weight: 100;will-change: transform;display: inline-block;}
  .s1 span {transform-origin: bottom;}
  .s2 span {transform-origin: top;transform: translateY(100%) rotateX(-90deg);}
  .s2 {position: absolute;top: 0;right: 0;}
  .title-animation:hover .s1 span {transform: translateY(-100%) rotateX(-90deg);}
  .title-animation:hover .s2 span {transform: translateY(0%) rotateX(0deg)}
  .partner-img {display: inline-block;width: 130px;filter: brightness(0) invert(1);transition: .3s;}
  .price-widget {width: 320px;height: 100px;font-size: 14px;background-color: rgba(0, 0, 0, .7);border-radius: 5px;margin-top: -75px;margin-left: 80px;overflow: hidden;position: absolute;z-index: 500;}
  .hidden {visibility: hidden;}
  .enter-btn {position: absolute;z-index: 50;color: var(--accent-color-1);bottom: 25px;right: 25px;text-decoration: none;padding-left: 200px;}
  .enter-btn:before {content: "";position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 190px;height: 1px;background: linear-gradient(90deg, transparent, var(--accent-color-1));}
  .marquee {position: relative;z-index: 5;width: 100%;box-sizing: border-box;padding: 1em;color: #000;display: flex;align-items: center;overflow: hidden;}
  .marquee-content {display: flex;animation: marquee 15s linear infinite running;}
  .marquee-tag {width: 200px;text-align: center;margin: 0 0.5em;padding: 0.5em;display: inline-block;align-items: center;justify-content: center;transition: all 0.2s ease;}
  @keyframes marquee {
    0% {-webkit-transform: translateX(0);-moz-transform: translateX(0);-o-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}
    100% {-webkit-transform: translate(-50%);-moz-transform: translate(-50%);-o-transform: translate(-50%);-ms-transform: translate(-50%);transform: translate(-50%);}
  }
  .centerMoon {width: fit-content;height: fit-content;position: relative}
  .moonFront {position: absolute;top: 0;left: 0;z-index: 10;max-width: 100vw;width: 100%;}
  .moonBack {filter: contrast(1.2);max-width: 100vw;width: 100%;}
  .s1AnimationDetailsDiv {height: 97%;border-radius: 50%;position: absolute;aspect-ratio: 1/1;left: 0;right: 0;top: 0;margin: 0 auto;overflow: hidden;z-index: 1;}
  .s1Animationposition {position: relative;width: 100%;height: 100%;}
  .divCloud {display: flex;justify-content: space-between;position: absolute;width: 100%;bottom: 0;}
  .greenTop {position: absolute;left: 12%;bottom: 38%;}
  .greenBottom {position: absolute;left: 11%;bottom: 25%;}
  .goldLine1 {position: absolute;left: -30%;top: 30%;transform: translate(0%, 0%);animation: goldLine1 12s linear infinite;animation-delay: 2s;}
  @keyframes goldLine1 {
    0% {transform: translate(0%, 0%);}
    100% {transform: translate(380%, 0%);}
  }
  .goldLine2 {position: absolute;left: -50%;bottom: 30%;transform: translate(0%, 0%);animation: goldLine2 12s linear infinite;}
  @keyframes goldLine2 {
    0% {transform: translate(0%, 0%);}
    100% {transform: translate(280%, 0%);}
  }
  .greenTop {transform: translate(-3%, 0%) rotateZ(-0.01turn);animation: greenTop 7s linear infinite;}
  @keyframes greenTop {
    0% {transform: translate(-3%, 0%) rotateZ(-0.01turn);}
    50% {transform: translate(3%, 0%) rotateZ(0.01turn);}
    100% {transform: translate(-3%, 0%) rotateZ(-0.01turn);}
  }
  .greenBottom {transform: translate(-3%, 0%) rotateZ(-0.01turn);animation: greenBottom 7s linear infinite;animation-delay: 2s;}
  @keyframes greenBottom {
    0% {transform: translate(-3%, 0%) rotateZ(-0.01turn);}
    50% {transform: translate(3%, 0%) rotateZ(0.01turn);}
    100% {transform: translate(-3%, 0%) rotateZ(-0.01turn);}
  }
  .divCloud {transform: translate(0%, 0%);animation: divCloud 6s linear infinite;}
  @keyframes divCloud {
    0% {transform: translate(0%, 2%);}
    50% {transform: translate(0%, -2%);}
    100% {transform: translate(0%, 2%);}
  }
  .cloudLeft {animation: cloudLeft 4s ease-out;transform: translate(25%, 0%);}
  @keyframes cloudLeft {
    0% {transform: translate(-25%, 0%);}
    100% {transform: translate(25%, 0%);}
  }
  .cloudRight {transform: translate(-28%, 0%);animation: cloudRight 4s ease-out;}
  @keyframes cloudRight {
    0% {transform: translate(22%, 45%);}
    100% {transform: translate(-28%, 0%);}
  }
  .divS3Img {position: absolute;top: 10%;right: 0;}
  .divS3position {position: relative;height: fit-content;width: fit-content;}
  .divS3ImgBox {height: 100%;width: 100%;}
  .S3img {position: absolute;top: 0;right: 80%;animation: pulse 5s infinite linear;height: 10%;}
  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(2);}
    100% {transform: scale(1);}
  }
  .S3img-1 {position: absolute;top: 40%;right: 50%;animation: pulse1 5s infinite linear;animation-delay: 1s;transform: scale(0.5);height: 10%;}
  @keyframes pulse1 {
    0% {transform: scale(0.5);}
    50% {transform: scale(1);}
    100% {transform: scale(0.5);}
  }
  .S3img-2 {position: absolute;bottom: 30%;right: 70%;animation: pulse2 5s infinite linear;animation-delay: 0.5s;transform: scale(1.5);height: 10%;}
  @keyframes pulse2 {
    0% {transform: scale(0.75);}
    50% {transform: scale(1.5);}
    100% {transform: scale(0.75);}
  }
  .FooterLeftimg-start {position: absolute;top: 0%;left: 30%;animation: pulse 5s infinite linear;height: 10%;}
  .FooterLeftimg-start1 {position: absolute;bottom: 0%;left: 20%;animation: pulse1 5s infinite linear;animation-delay: 0.5s;transform: scale(0.5);height: 10%;}
  .FooterLeftimg-start2 {position: absolute;top: 30%;right: 0%;animation: pulse2 5s infinite linear;animation-delay: 1s;transform: scale(0.75);height: 10%;}
  .FooterLeftimg-start3 {position: absolute;top: 40%;right: 10%;animation: pulse1 5s infinite linear;animation-delay: 0.75s;height: 10%;}
  .FooterRightimg-start {position: absolute;top: 0%;left: 10%;animation: pulse 5s infinite linear;height: 10%;}
  .FooterRightimg-start1 {position: absolute;top: -10%;right: 10%;animation: pulse1 5s infinite linear;animation-delay: 0.5s;transform: scale(0.5);height: 10%;}
  .FooterRightimg-start2 {position: absolute;bottom: 35%;right: 42%;animation: pulse1 5s infinite linear;animation-delay: 0.75s;height: 10%;}
  .FooterRightimg-start3 {position: absolute;bottom: 20%;right: 55%;animation: pulse2 5s infinite linear;animation-delay: 1s;transform: scale(0.75);height: 10%;}
  .S3img2 {height: auto;width: 20vw;}
  .footerLeftDiv {position: relative;height: fit-content;width: fit-content;}
  .footerLeftImg {height: 100%;width: 100%;left: 0;top: 0;position: absolute;}
  .footerRightDiv {position: relative;height: fit-content;width: fit-content;}
  .footerRightImg {height: 100%;width: 100%;right: 0;top: 0;position: absolute;}
  .MoonFooter2Left {position: absolute;left: 0;top: 0;height: 95%;transform: translate(0%, -5%);animation: LanternLeft 7s infinite linear;}
  @keyframes LanternLeft {
    0% {transform: translate(0%, -5%);}
    50% {transform: translate(0%, 5%);}
    100% {transform: translate(0%, -5%);}
  }
  .MoonFooter3Left {width: 20vw;height: auto;}
  .MoonFooter1Right {transform: translate(0%, -5%);animation: LanternRight 7s infinite linear;animation-delay: 1s;position: absolute;right: 0;top: 0;height: 95%;}
  @keyframes LanternRight {
    0% {transform: translate(0%, -5%);}
    50% {transform: translate(0%, 5%);}
    100% {transform: translate(0%, -5%);}
  }
  .MoonFooter2Right {width: 20vw;height: auto;}
  .MoonFooter3Right {height: 95%}
  .footerImg {position: absolute;left: -25%;top: -80%;z-index: 1;height: 250%;width: auto;}
  .rabbit {width: 5em;height: 3em;background: #ffffff;border-radius: 70% 90% 60% 50%;position: relative;box-shadow: -0.2em 1em 0 -0.75em #001410;-moz-transform: rotate(0deg) translate(-2em, 0);-ms-transform: rotate(0deg) translate(-2em, 0);-webkit-transform: rotate(0deg) translate(-2em, 0);transform: rotate(0deg) translate(-2em, 0);animation: hop 2s infinite linear;z-index: 1;}
  .no-flexbox .rabbit {margin: 10em auto 0;}
  .rabbit:before {content: "";position: absolute;width: 1em;height: 1em;background: white;border-radius: 100%;top: 0.5em;left: -0.3em;box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1em 0 white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.4em white;animation: kick 2s infinite linear;}
  .rabbit:after {content: "";position: absolute;width: .75em;height: 2em;background: white;border-radius: 50% 100% 0 0;-moz-transform: rotate(-30deg);-ms-transform: rotate(-30deg);-webkit-transform: rotate(-30deg);transform: rotate(-30deg);right: 1em;top: -1em;border-top: 1px solid #f7f5f4;border-left: 1px solid #f7f5f4;box-shadow: -0.5em 0em 0 -0.1em white;}
  .clouds {background: white;width: 2em;height: 2em;border-radius: 100% 100% 0 0;position: relative;top: -5em;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: translate(0, 0);-ms-transform: translate(0, 0);-webkit-transform: translate(0, 0);transform: translate(0, 0);animation: cloudy 2s infinite linear forwards;box-shadow: 5em 2em 0 -0.3em white, -2em 2em 0 0 white;}
  .clouds:before,.clouds:after {content: '';position: absolute;box-shadow: 5em 2em 0 -0.3em white, -2em 2em 0 white;}
  .clouds:before {width: 1.25em;height: 1.25em;border-radius: 100% 100% 0 100%;background: white;left: -30%;bottom: 0;}
  .clouds:after {width: 1.5em;height: 1.5em;border-radius: 100% 100% 100% 0;background: white;right: -30%;bottom: 0;}
  @keyframes hop {
    20% {-moz-transform: rotate(-10deg) translate(1em, -2em);-ms-transform: rotate(-10deg) translate(1em, -2em);-webkit-transform: rotate(-10deg) translate(1em, -2em);transform: rotate(-10deg) translate(1em, -2em);box-shadow: -0.2em 3em 0 -1em #001410;}
    40% {-moz-transform: rotate(10deg) translate(3em, -4em);-ms-transform: rotate(10deg) translate(3em, -4em);-webkit-transform: rotate(10deg) translate(3em, -4em);transform: rotate(10deg) translate(3em, -4em);box-shadow: -0.2em 3.25em 0 -1.1em #001410;}
    60%,75% {-moz-transform: rotate(0) translate(4em, 0);-ms-transform: rotate(0) translate(4em, 0);-webkit-transform: rotate(0) translate(4em, 0);transform: rotate(0) translate(4em, 0);box-shadow: -0.2em 1em 0 -0.75em #001410;}
  }
  @keyframes kick {
    20%,50% {box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1.5em 0 white, 4em 1.75em 0 -0.3em white, 4em 1.75em 0 -0.3em white, 4em 1.9em 0 -0.4em white;}
    40% {box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 2em 0 white, 4em 1.75em 0 -0.3em white, 4.2em 1.75em 0 -0.2em white, 4.4em 1.9em 0 -0.2em white;}
  }
  @keyframes cloudy {
    40% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);opacity: 0.75;-moz-transform: translate(-3em, 0);-ms-transform: translate(-3em, 0);-webkit-transform: translate(-3em, 0);transform: translate(-3em, 0);}
    55% {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;-moz-transform: translate(-4em, 0);-ms-transform: translate(-4em, 0);-webkit-transform: translate(-4em, 0);transform: translate(-4em, 0);}
    90% {-moz-transform: translate(0, 0);-ms-transform: translate(0, 0);-webkit-transform: translate(0, 0);transform: translate(0, 0);}
  }
  #mid-autumn-2025 .S1 .buttonCheckPromotion {color: #FFF;font-family: zabal-extrabold;font-size: 24px;font-style: normal;font-weight: 900;line-height: normal;background: linear-gradient(to right, var(--primary-color-light) 50%, var(--accent-color-6) 50%);background-size: 201% 100%;background-position: right bottom;transition: all .6s ease-out;padding: 14px 28px;border-radius: 20px;margin-top: 60px;border: none !important;}
  #mid-autumn-2025 button.buttonCheckPromotion:hover {color: var(--accent-color-6) !important;background-position: left bottom;filter: drop-shadow(0 0 0.75rem #E4AA6A);}



  @media (min-width: 992px) and (max-width: 1312px){#mid-autumn-2025 .festival-section {margin-top: 82px;}}
  @media (max-width: 1200px){.section2 { height: 50%; min-height: 400px }}
  @media (min-width: 1200px){
    #mid-autumn-2025 .cute {position: absolute; right: 17%; bottom: 7%;}
    #mid-autumn-2025 .midAutumnC1 {padding-left: 100px; padding-right: 0px; }
    #mid-autumn-2025 .centerMoon {transform: scale(2);}
    #mid-autumn-2025 .cloudS1 {width: 50% !important;}
    #mid-autumn-2025 .midAutumnC1 {width: 50% !important;}
    #mid-autumn-2025 .goldLine1 {height: 4%;}
    #mid-autumn-2025 .goldLine2 {height: 3%;}
    #mid-autumn-2025 .greenTop {height: 22%;}
    #mid-autumn-2025 .greenBottom {height: 14%;}
    #mid-autumn-2025 .divCloud {height: 27%;}
  }
  @media (min-width:821px) and (max-width: 1200px) {
    @keyframes goldLine1 {0%{transform: translate(0%, 0%);} 100%{transform: translate(430%, 0%);}}
    @keyframes goldLine2 {0%{transform: translate(0%, 0%);} 100%{transform: translate(230%, 0%);}}

    .cute {position: absolute; right: 45%; bottom: 0%; transform: scale(0.8); z-index: 10;}
    .goldLine1 {height: 4%;}
    .goldLine2 {height: 3%;}
    .greenTop {height: 22%;}
    .greenBottom {height: 14%;}
    .divCloud {height: 27%;}
    /* img.S1colorBackground {content: url("https://cms.antospnc.asia/assets/media/1746504041002-426-1692858141063-519-820 x 1180.webp");} */
    .midAutumnC1 {margin-bottom: 100px;}
    .cloudS1 {margin-top: 60px;}
    .divS3Img {top: 6%;}
  }
  @media (min-width:821px) and (max-width: 1199.5px) {
    img.S1colorBackground {content: url("/assets/site/8346232b45e0f3450a7c.webp");}
  }
  /* change End */
  @media screen and (max-width: 1200px) and (orientation: portrait) and (min-width: 600px) {main #slider-content { margin-bottom: 15rem }}
  /* For Layout (to avoid header issue) */
  @media (max-width: 992px) {
      .midAutumnS1Backgroud{padding-top: 81px;}
  }
  @media (min-width:991px) and (max-width: 993px) {
      #promo {padding-top: 26.3%;}
      #mid-autumn-2025 .midAutumnS1Backgroud{height: 100%;}
  }
  @media (max-width: 800px) {
      .midAutumnS1Backgroud{padding-top: 30%;}
  }
  @media screen and (min-width: 800px) {
    main #slider-content .title { max-width: 65% }
    main #slider-content #slide-status {font-size: 34px;}
    main #slider-content .meta {font-size: 13px;}
  }
  @media screen and (min-width: 961px) {
    .section3 .card:hover .card__background { transform: scale(1.05) translateZ(0); box-shadow: 0 0 70px -20px rgba(0, 0, 0, 0.7); }
    .section3 .card:hover .card__category,
    .section3 .card-grid:hover .card__heading { top: 0; opacity: 1; }
    .section3 .card-grid:hover > .card:not(:hover) .card__background,
    .section3 .card-grid:hover > .card:not(:hover) .card__category,
    .section3 .card-grid:hover > .card:not(:hover) .card__heading { filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px); }
    .section3 .card::before { content: ""; display: block; padding-bottom: 150%; width: 100%; }
  }
  @media (max-width: 960px) {
    .section3 .card-grid { grid-template-columns: repeat(1, 1fr); }
    .section3 .card__heading { font-size: 13px; }
    .section3 .card__category { font-size: 20px; }
    .section3 .card__content { padding: 20px; }
    .section3 .card__category,
    .section3 .card__heading { opacity: 1; }
    .section3 .card { height: 180px; }
  }
  @media screen and (min-width: 821px) and (max-width: 1024px) {
    #mid-autumn-2025 .S1 h1 {color: #FFF;font-size: 75px !important;font-style: normal;line-height: normal; max-width: 665px;}
    #mid-autumn-2025 .S1 h2 {color: #FFF;font-family: zabal-extrabold;font-size: 36px !important;font-style: normal;font-weight: 900;line-height: normal;}
    #mid-autumn-2025 .S1 .buttonCheckPromotion {color: #FFF;font-family: zabal-extrabold;font-size: 24px !important;font-style: normal;font-weight: 900;line-height: normal;background-color: var(--accent-color-5); padding:14px 28px; border-radius: 20px; margin-top: 30px; border:1px solid var(--accent-color-5) ;}
    #mid-autumn-2025 .section7 {padding-bottom: 150px;}
    #mid-autumn-2025 .Imglotus {position:absolute; width: auto; height: 15%; left: 120px; transform: translate(250px, 45px);} 
  }
  @media screen and (max-width: 800px) {
    .S1 h1 {color: #FFF;font-family: Rockwell-Extra-Bold;font-size: 42px;font-style: normal;font-weight: 800;line-height: normal; max-width: 305px;}
    .S1 h2 {color: #FFF;font-family: zabal-extrabold;font-size: 16px;font-style: normal;font-weight: 900;line-height: normal;}
    .S1 .buttonCheckPromotion {color: #FFF;font-family: zabal-extrabold;font-size: 14px;font-style: normal;font-weight: 900;line-height: normal;background-color: var(--accent-color-5); padding:7px 19px; border-radius: 20px; margin-top: 30px; border:1px solid var(--accent-color-5) ;}
    .midAutumnS1Backgroud {height:95%; width:100%; background-size:cover; position: absolute;z-index: 18; background-repeat:no-repeat; background-position-y: 0px;}
  }
  @media screen and (max-width: 800px) {
    #globe canvas { display: none; }
    main .home-content, :lang(ms) main .home-content { position: absolute; top: 8%; max-width: 100%; }
    main .home-content p { opacity: 0 }
    main #slider-content { max-width: 90%; }
    .section6 h3 { font-size: 35px; }
    main { height: 95vh; }
  }
  @media (min-width: 800px) and (max-height: 600px) {
    main #slider-content .title { max-width: 100% }
  }
  @media (min-width:769px) and (max-width: 820px) {
    .goldLine1 {height: 4%;}
    .goldLine2 {height: 3%;}
    .greenTop {height: 22%;}
    .greenBottom {height: 14%;}
    .divCloud {height: 27%;}
    img.S1colorBackground {content: url("/assets/site/d564bc8dbc7d5696f461.webp");}
    .midAutumnC1 {margin-bottom: 100px;}
    .cloudS1 {margin-top: 60px;}
    .divS3Img {top: 6%;}
  }
  @media (min-width:769px) and (max-width: 800px) {
    .cute {position: absolute; left: 45%; bottom: -10%; transform: scale(0.8); z-index: 10;}
  }
  @media (min-width:801px) and (max-width: 820px) {
    .cute {position: absolute; left: 45%; bottom: -4%; transform: scale(0.8); z-index: 10;}
  }
  @media screen and (min-width: 769px) and (max-width: 820px) {
    .S1 h1 {color: #FFF;font-size: 70px !important;font-style: normal;line-height: normal; max-width: 665px;}
    .S1 h2 {color: #FFF;font-family: zabal-extrabold;font-size: 36px !important;font-style: normal;font-weight: 900;line-height: normal;}
    .S1 .buttonCheckPromotion {color: #FFF;font-family: zabal-extrabold;font-size: 24px !important;font-style: normal;font-weight: 900;line-height: normal;background-color: var(--accent-color-5); padding:14px 28px; border-radius: 20px; margin-top: 30px; border:1px solid var(--accent-color-5) ;}
    .section7 {padding-bottom: 150px;}
    .Imglotus {position:absolute; width: auto; height: 15%; left: 120px; transform: translate(180px, 55px);} 
  }
  @media (min-width:713px) and (max-width: 768px) {
    .section2 {padding-top: 60px !important;}
    .goldLine1 {height: 4%;}
    .goldLine2 {height: 3%;}
    .greenTop {height: 22%;}
    .greenBottom {height: 14%;}
    .divCloud {height: 27%;}
    img.S1colorBackground {content: url("/assets/site/d2993b96b8e715731a08.webp");}
    .midAutumnC1 {margin-bottom: 90px;}
    .cloudS1 {margin-top: 70px;}
    .divS3Img {top: 2%;}
  }
  @media (min-width:713px) and (max-width: 768px) {
    .cute {position: absolute; left: 45%; bottom: -6%; transform: scale(0.7); z-index: 10;}
  }
  @media screen and (min-width: 713px) and (max-width: 768px) {
    .S1 p {font-size: 1rem;}
    .border-gradient-start {border: none!important;}
    .S1 h1 {color: #FFF;font-size: 55px !important;font-style: normal;line-height: normal; max-width: 405px;}
    .S1 h2 {color: #FFF;font-family: zabal-extrabold;font-size: 24px !important;font-style: normal;font-weight: 900;line-height: normal;}
    .S1 .buttonCheckPromotion {color: #FFF;font-family: zabal-extrabold;font-size: 21px !important;font-style: normal;font-weight: 900;line-height: normal;background-color: var(--accent-color-5); padding:7px 19px; border-radius: 20px; margin-top: 30px; border:1px solid var(--accent-color-5) ;}
    .section7 {padding-bottom: 150px !important; }
    .Imglotus {position:absolute; width: auto; height: 15%; left: 120px; transform: translate(170px, 70px);} 
  }
  @media (min-width:415px) and (max-width: 712px) {
    .cute {position: absolute; left: 45%; bottom: -3%; transform: scale(0.8); z-index: 10;}
  }
  @media screen and (width:540px) and (height: 720px) {
    .cute {position: absolute; left: 45%; bottom: -15%; transform: scale(0.6); z-index: 10;}
  }
  @media (min-width:415px) and (max-width: 712px) {
    .goldLine1 {height: 4%;}
    .goldLine2 {height: 3%;}
    .greenTop {height: 22%;}
    .greenBottom {height: 14%;}
    .divCloud {height: 27%;}
    img.S1colorBackground {content: url("/assets/site/c92b6e233e40fac5d47e.webp");}
    .midAutumnC1 {margin-bottom: 90px;}
    .cloudS1 {margin-top: 20px; margin-bottom: 90px;}
    .divS3Img {top: 4%;}
  }
  @media screen and (min-width: 415px) and (max-width: 712px) {
    .S1 p {font-size: 1rem;}
    .border-gradient-start {border: none !important;}
    .S1 h1 {color: #FFF;font-size: 55px !important;font-style: normal;line-height: normal; max-width: 405px;}
    .S1 h2 {color: #FFF;font-family: zabal-extrabold;font-size: 24px !important;font-style: normal;font-weight: 900;line-height: normal;}
    .S1 .buttonCheckPromotion {color: #FFF;font-family: zabal-extrabold;font-size: 21px !important;font-style: normal;font-weight: 900;line-height: normal;background-color: var(--accent-color-5); padding:7px 19px; border-radius: 20px; margin-top: 30px; border:1px solid var(--accent-color-5) ;}
    .section7 {padding-bottom: 150px !important; }
    .Imglotus {position:absolute; width: auto; height: 15%; left: 120px; transform: translate(130px, 60px);} 
  }

  @media screen and (max-width: 415px) {
    .headerLogo {width: 70px;}
  }
  @media screen and (max-width: 380px) {.midAutumnS1Backgroud {height:100%; width:100%; background-size:cover; position: absolute;z-index: 18; background-repeat:no-repeat; background-position-y: 0px;}}

  @media screen and (min-width: 391px) and (max-width: 415px) {
    .S1 p {font-size: 1rem;}
    .S1 h1 {font-size: 40px !important;}
    .border-gradient-start {border: none !important;}
    .section2 {padding-bottom: 0px !important;}
    .section3 {padding-top: 0px !important;}
    .section7 {padding-bottom: 150px !important; }
    .Imglotus {position:absolute; width: auto; height: 15%; left: 120px; transform: translate(0px, 80px);} 
  }
  @media screen and (min-width:391px) and (max-width: 415px) {
    .cute {position: absolute; left: 45%; bottom: 5%; transform: scale(0.7); z-index: 10;}
    .goldLine1 {height: 4%;}
    .goldLine2 {height: 3%;}
    .greenTop {height: 22%;}
    .greenBottom {height: 14%;}
    .divCloud {height: 27%;}
    img.S1colorBackground {content: url("/assets/site/6b77b087132d1eb3ac5c.webp");}
    .midAutumnC1 {margin-bottom: 90px;}
    .cloudS1 {margin-top: 100px;}
    .divS3Img {top: -3%;}
    .S3img2 {width: 32vw;}
  }

  @media screen and (min-width: 376px) and (max-width: 391px) {
    .S1 p {font-size: 1rem;}
    .S1 h1 {font-size: 40px !important;}
    .border-gradient-start {border: none !important;}
    .section2 {padding-bottom: 0px !important;}
    .section3 {padding-top: 0px !important;}
    .section7 {padding-bottom: 150px !important; }
    .Imglotus {position:absolute; width: auto; height: 15%; left: 120px; transform: translate(0px, 85px);} 
  }
  @media (min-width:376px) and (max-width: 391px) {
    .cute {position: absolute; left: 45%; bottom: 5%; transform: scale(0.5); z-index: 10;}
    .goldLine1 {height: 4%;}
    .goldLine2 {height: 3%;}
    .greenTop {height: 22%;}
    .greenBottom {height: 14%;}
    .divCloud {height: 27%;}
    img.S1colorBackground {content: url("/assets/site/6f0a26cacda9851ecf34.webp");}
    .midAutumnC1 {margin-bottom: 90px;}
    .cloudS1 {margin-top: 100px;}
    .divS3Img {top: -3%;}
    .S3img2 {width: 32vw;}
  }

  @media screen and (min-width: 361px) and (max-width: 376px) {
    #mid-autumn-2025 .S1 p {font-size: 14px;}
    #mid-autumn-2025 .S1 h1 {font-size: 35px !important;}
    #mid-autumn-2025 .S1 .buttonCheckPromotion {color: #FFF;font-family: zabal-extrabold;font-size: 14px;font-style: normal;font-weight: 900;line-height: normal;background-color: var(--accent-color-5); padding:7px 19px; border-radius: 20px; margin-top: 10px !important; border:1px solid var(--accent-color-5) ;}
    #mid-autumn-2025 .border-gradient-start {border: none !important;}
    #mid-autumn-2025 h2.title {font-size: 50px;}
    #mid-autumn-2025 .section2 {padding-bottom: 0px !important;}
    #mid-autumn-2025 .section3 {padding-top: 0px !important;}
    #mid-autumn-2025 .section7 {padding-bottom: 100px !important; }
    #mid-autumn-2025 .Imglotus {position:absolute; width: auto; height: 15%; left: 120px; transform: translate(5px, 50px);} 
  }
  @media (min-width:361px) and (max-width: 376px) {
    .cute {position: absolute; left: 40%; bottom: 3%; transform: scale(0.3); z-index: 10;}
    .goldLine1 {height: 4%;}
    .goldLine2 {height: 3%;}
    .greenTop {height: 22%;}
    .greenBottom {height: 14%;}
    .divCloud {height: 27%;}
    img.S1colorBackground {content: url("/assets/site/f0b0325b57caca30307a.webp");}
    .midAutumnC1 {margin-bottom: 50px;}
    .cloudS1 {margin-top: 70px;}
    .divS3Img {top: -3%;}
    .S3img2 {width: 32vw;}
  }

  @media (max-width: 361px) {
    .cute {position: absolute; left: 40%; bottom: 3%; transform: scale(0.5); z-index: 10;}
    .goldLine1 {height: 4%;}
    .goldLine2 {height: 3%;}
    .greenTop {height: 22%;}
    .greenBottom {height: 14%;}
    .divCloud {height: 27%;}
    img.S1colorBackground {content: url("/assets/site/ff160f0f2d5a8cf9f55e.webp");}
    .midAutumnC1 {margin-bottom: 90px;}
    .cloudS1 {margin-top: 70px;}
    .divS3Img {top: -3%;}
    .S3img2 {width: 32vw;}
  }
  @media screen and (max-width: 360px) {
    #mid-autumn-2025 .S1 .buttonCheckPromotion {color: #FFF;font-family: zabal-extrabold;font-size: 14px;font-style: normal;font-weight: 900;line-height: normal;background-color: var(--accent-color-5); padding:7px 19px; border-radius: 20px; margin-top: 20px !important; border:1px solid var(--accent-color-5) ;}
    #mid-autumn-2025 .S1 p {font-size: 14px;}
    #mid-autumn-2025 .S1 h1 {font-size: 35px !important;}
    #mid-autumn-2025 .border-gradient-start {border: none !important;}
    #mid-autumn-2025 h2.title {font-size: 50px;}
    #mid-autumn-2025 .section2 {padding-bottom: 0px !important;}
    #mid-autumn-2025 .section3 {padding-top: 0px !important;}
    #mid-autumn-2025 .section7 {padding-bottom: 100px !important; }
    #mid-autumn-2025 .Imglotus {position:absolute; width: auto; height: 15%; left: 120px; transform: translate(-5px, 45px);} 
  }

  main #pagination { position: absolute; top: 50%; transform: translateY(-50%); right: 30px; z-index: 6; }
  main #pagination button { display: block; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; width: 16px; height: 16px; background-color: #FFFFFF; border-radius: 100%; padding: 0; margin: 30px 0; cursor: pointer; position: relative; opacity: 0.2; transition: opacity 0.2s ease-in-out; outline: none; }
  main #pagination button:hover { opacity: 0.5; }
  main #pagination button.active { opacity: 1; }
  main #pagination button.active:before { width: 300%; height: 300%; opacity: 1; }
  main #pagination button:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.2); opacity: 0; transition: opacity 0.4s ease-in-out, width 0.4s ease-in-out, height 0.4s ease-in-out; }
  .section1, #home iframe, #home .section3 { position: relative; z-index: 11; }
  .section2 { width: 100vw; height: 100vh }
  .section3 .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 24px; grid-row-gap: 24px; max-width: 1200px; width: 100%; }
  .section3 .card { text-decoration: none; position: relative; border-radius: 25px; background-color: transparent; }
  .section3 .card__background { background-size: cover; background-position: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; filter: brightness(0.75) saturate(1.2) contrast(0.85); transform-origin: center; transform: scale(1) translateZ(0); transition: filter 200ms linear, transform 200ms linear; border-radius: 25px; }
  .section3 .card__content { position: absolute; top: 0; left: 0; padding: 25px; }
  .section3 .card__category { margin-bottom: var(--spacing-s); text-transform: uppercase; position: relative; top: 20px; opacity: 0; transition: 0.3s; }
  .section3 .card__heading { text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2); line-height: 1.4; position: relative; top: 30px; opacity: 0; transition: 0.5s; transition-delay: 0.1s; }
  li { font-size: 18px; }
  .accordion-body { padding: 0 30px; }

  /* .S1 p {margin-bottom: 1rem;margin-top: 0;} */



  @media (max-width:1920px){ .line1 { left:66%; transform:scale(1);} }
  @media (max-width:1920px){ .line2 { left:10%; transform:scale(1.8); top:56%;} }
  @media (max-width:1920px){ .line3 { left:64%;  } }
  @media screen and (max-width: 1920px){
    .money{top: 15%; left: 10%;}
    .water{top: 48%; left: 46%;}
    .energy{top: 48%; right: 46%;}
    .fire{top: 15%; right: 10%;}
  }

  @media (max-width:1440px){ .line1 { left:54%; } }
  @media (max-width:1440px){ .line2 { left:4%; transform:scale(1.2); top:55%; } }
  @media (max-width:1440px){ .line3 { width:30%; } }
  @media (max-width:1440px) { #cny-display .center-element {right: -1%;} } @media (max-width: 1280px) {
    #cny-display .christmas-wish-img {width: 450px;}
    .snowflake-account{width: 150px;}
    #cny-display .bg_div{background-size: cover;}
  }
  @media (max-width:1440px) { #cny-display .center-element {right: -1%;} }

  @media screen and (max-width: 1366px){
    .landing h1{font-size: 4rem;}
    .landing p{font-size: 1rem;}
    .banner-text-container{margin: auto; text-align: center; top: 40%; position: absolute; transform: translateY(-35%);width: 100%;}
    .banner-icon-container{bottom: -120px;}
    .banner-button a, .button-color{padding: 15px 40px 15px 40px;}
    .landing {background-size: cover;height: 100vh;}
    .banner-icon{width: 76.85px; height: 76.85px;}
    .cny-mid-bg{padding: 50px 0;}
    .money{top: 15%; left: 12%;}
    .water{top: 40%; left: 41%;}
    .energy{top: 40%; right: 41%;}
    .fire{top: 15%; right: 12%;}
    .first-line{top: 35%; left: 14%;}
    .second-line{top: 59%; left: 43%;}
    .third-line{top: 59%; right: 43%;}
    .four-line{top: 35%; right: 14%;}
  }
  @media (max-width: 1199px){ #cny-display .center-element {right: -5%;}}
  @media screen and (max-width: 1280px) and (max-height: 800px){
    .ctrader-text-color {font-size: 25px !important;}
    .banner-button a, .button-color{padding: 12px 30px; font-size: 12px;}
    .banner-button{margin-top: 20px;}
    .banner-icon{width: 76.85px; height: 76.85px;}
    .landing{height: 100vh;}
    .banner-icon{width: 15%;}
    .money{top: 12%; left: 11%;}
    .water{top: 35%; left: 39%;}
    .energy{top: 35%; right: 39%;}
    .fire{top: 12%; right: 11%;}
    .first-line{top: 32%; left: 14%;}
    .second-line{top: 55%; left: 43%;}
    .third-line{top: 55%; right: 43%;}
    .four-line{top: 32%; right: 14%;}
  }

  @media (max-width:1080px){ .line1 { left:40%; } }
  @media (max-width:1080px){ .line2 { left:-5%; transform:scale(0.9); top:59%; } }
  @media (max-width:1080px){ .line3 { left:65%; width:35% } }

  @media screen and (max-width: 1025px){
    .landing h1{font-size: 4rem;}
    .landing p{font-size: 1rem;}
    .banner-text-container{margin: auto; text-align: center; top: 50%; position: absolute; transform: translateY(-65%);width: 100%;}
    .banner-icon-container{bottom: 0px;}
    .landing {background: url("/assets/site/27dfa91524947bf6b7f6.webp"); background-size: cover !important; height: 112vh; background-repeat: no-repeat; margin-bottom: 100px;}
    .banner-icon{width: 76.85px; height: 76.85px;}
    .banner-title{width: 500px; height: 89.62px; margin: auto;}
    .cny-mid-bg {background: url("https://cmsapi.fundamarkets.com/media/1710728328993-787-frame-tablet.webp") no-repeat; background-size: contain; padding: 120px 0;}
    .why-content{font-size: 20px;}
    .money{top: 38%; left: 14%;}
    .water{top: 61%; left: 48%;}
    .energy{top: 61%; right: 48%;}
    .fire{top: 38%; right: 14%;}
    .line{position: absolute;}
    .first-line{top: 57%; left: 17%;}
    .second-line{top: 80%; left: 50%;}
    .third-line{top: 80%; right: 50%;}
    .four-line{top: 57%; right: 17%;}
  }
  @media (max-width:991px){
    .goldbar{display:none;}
    .coin5{left: 10%;}
    .coin1{right: -11%;top: 60%;}
    .coin-account {z-index: 1;top: -8%;left: 72%;width: 37%;}
    .title3 {font-size: 18px;}
  }
  @media (max-width: 991px) {
    #cny-display {height: 880px;}
    #cny-display .bg_div {background-position-y: 90%;background-image: url('https://cms.antospnc.asia/assets/media/1736999627722-782-Group 1.webp');background-size: cover;}
    #cny-display .center-element {width: 100%;height: fit-content;top: 7%;right: -20%;}
    .snowflake-steps{bottom: 0;top: unset;}
  }
  @media screen and (max-width: 912px){.cny-mid-bg{padding: 80px 0;}}
  @media screen and (max-width: 820px){
    .cny-mid-bg{padding: 50px 0;}
    .money{top: 38%; left: 12%;}
    .water{top: 61%; left: 46%;}
    .energy{top: 61%; right: 46%;}
    .fire{top: 38%; right: 12%;}
    .first-line{top: 57%; left: 15%;}
    .second-line{top: 80%; left: 50%;}
    .third-line{top: 80%; right: 50%;}
    .four-line{top: 57%; right: 15%;}
  }

  @media (max-width:768px){.show_promotion_button { top: 0;}}
  @media (max-width:768px){ .coin6 {display:none;}}
  @media (max-width:768px){ .line1 { left:0%; top:5%; width:100% !important } }
  @media (max-width:768px){ .line2 { left:-10%; top:74%; width:100% !important } }
  @media (max-width:768px){ .line3 { left:-20%; top:2%; width:120% !important; height:50%!important; } }
  @media (max-width:768px){ #home-festival {margin-top:-20px;}}
  @media (max-width:768px) { #cny-display .center-element {right: -15%; top:-13%;} } 

  @media (max-width: 767px) {.snowflake-steps{width: 150px;bottom: 30px;}}
  @media screen and (max-width: 700px){
    .landing h1{font-size: 4rem; transform: translateY(-120px);}
    .landing p{font-size: 1rem;}
    .banner-text-container{margin-top: 540px; top: 0;}
    .banner-icon-container{bottom: 0px;}
    .landing {background: url("/assets/site/2d5d428f5ae0c66fabfa.webp") no-repeat !important; background-size: cover !important; background-position: center !important; height: 108vh;}
    .cny-mid-bg {background: url("https://cmsapi.fundamarkets.com/media/1710755196318-71-Frame 137.webp") no-repeat; background-size: 100% 100%; }
    .bg11 {background: url("https://cmsapi.fundamarkets.com/media/1710755196309-491-Frame 136.webp") no-repeat;background-position: center;background-size: cover;}
    .market-content-size{font-family: "Inter"; font-size: 16px !important; font-weight: 600; line-height: 22px; letter-spacing: -0.02em;}
    .why-content{font-size: 16px; font-weight: 600; line-height: 38px; letter-spacing: 0em; text-align: center; padding: 10px 10px;}
    .banner-icon{width: 20%;}
    .banner-title{width: 300px; height: 53.77px; margin: auto;}
    .button-color{padding: 13px 50px 13px 50px; font-size: 10px;}
    .banner-button a{padding: 13px 50px 13px 50px; font-size: 10px;}
    .mobile-energy-line, .mobile-water-line{display: block;}
    .money{top: 40%; left: 4%;}
    .water{top: 63%; left: 31%;}
    .energy{top: 63%; right: 23%;}
    .fire{top: 40%; right: 4%;}
    .first-line{top: 57%; left: 3%;}
    .second-line, .third-line{display: none;}
    .mobile-energy-line{top: 80%; left: 13%;}
    .mobile-water-line{top: 81%; right: 3%;}
    .four-line{top: 57%; right: 3%;}
    .mobile-energy-line .light{top: -5%; left: 60%;}
    .mobile-water-line .light{top: -5%; right: 76%;}
  }
  @media screen and (max-width: 540px){
    .landing {height: 108vh;}
    .landing h1{font-size: 3rem; transform: translateY(-70px);}
    .landing p{font-size: .75rem;}
    .banner-text-container{transform: translateY(240px); top: 0;}
    .banner-icon-container{bottom: 0px;}
    .banner-icon{width: 25%;}
    .banner-text-container{margin-top: 120px;}
    .money{top: 43%; left: 5%;}
    .water{top: 67%; left: 30%;}
    .energy{top: 67%; right: 24%;}
    .fire{top: 43%; right: 3%;}
    .first-line{top: 55%; left: 6%;}
    .mobile-energy-line{top: 65%; left: 24%;}
    .mobile-water-line{top: 66%; right: 15%;}
    .four-line{top: 55%; right: 6%;}
  }

  @media (max-width:450px){
    .title3{width:75%}
    .title2{font-size:48px}
    .element img{width:17%}
    .coin3{bottom:9%}
    .coin5{left:13%;top: 54%;}
    .star6{left:70%}
    #cny-display .banner-btn{background: linear-gradient( #000000e6, #000000);}
    .coin1-account {left: -3%;top: 24%;}
    .title3 {font-size: 14px;}
  }
  @media (max-width: 450px) {
    #cny-display {height: 700px;}
    #cny-display .bg_div {background-position: 0px 0px;}
    #cny-display .center-element{top: 15%;right:0%;}
    #cny-display .christmas-wish-img {width: 300px;}
    #cny-display .banner-btn-word {font-size: 14px;}
    .snowflake-steps{width: 100px;}
  }

  @media (max-width:431px){
    #home_revise .s2_description{top:0;}
    #home_revise .s2_sticky_div{height:75vh;}
    #home_revise .section_2{height:150vh;}
    #home_revise .mb_section_3{height:80vh;} 
    .section_3, #home_revise .section_6{margin-top:50px;}
    .section_4{margin-top:0;}
    #home_revise .s4_content{height:80vh;}
    #home_revise .s4_line{height:42vh;}
    #home_revise .s6_text{height:60vh;}
    #home_revise .s6_float_text_1{bottom:28.5%}
    #home_revise .s6_float_text_2{bottom:24.5%}
    #home_revise .s6_float_text_3{bottom:16.3%}
    #home_revise .s6_float_text_4{bottom:13%}
    #home_revise .s6_float_text_5{bottom:8.5%}
    #home_revise .lp_section_7, #home_revise .mb_section_7{padding-top:18vh;}
    #home_revise .mb_s7_line, #home_revise .s7_line{height:42vh;}
    .last_section{margin-top:70px;}
    #home_revise .section_6{height:130vh;}
    .mb_s1_banner .col-12:first-of-type{height:70vh;}
    .mb_s1_banner .col-12 .image{height:100%;width:100%;}
  }
  @media screen and (max-width: 430px){
    .landing h1{font-size: 3rem; transform: translateY(-70px);}
    .landing p{font-size: .75rem;}
    .banner-icon-container{bottom: 0px;}
    .banner-text-container{transform: translateY(140px); top: 0;}
    .banner-icon{width: 28%;}
    .landing{height: 108vh;}
    .cny-mid-bg{padding: 120px 0;}
    .money{top: 36%; left: 3%;}
    .water{top: 65%; left: 28%;}
    .energy{top: 65%; right: 22%;}
    .fire{top: 36%; right: 3%;}
    .first-line{top: 50%; left: 3%;}
    .mobile-energy-line{top: 65%; left: 20%;}
    .mobile-water-line{top: 66%; right: 10%;}
    .four-line{top: 50%; right: 3%;}
  }
  @media only screen and (max-device-width: 415px) and (-webkit-min-device-pixel-ratio: 2) and (hover: none) and (pointer: coarse){
    #home_revise .mb_section_3 .s3_lower_part{height:65vh;}
    .mb_s1_banner .col-12:first-of-type{height:56vh;}
    #home_revise .mb_s1_banner img{height:100%; width:100%;object-fit:cover;}
  }
  @media (max-width:391px){
    .mb_s1_banner .col-12:first-of-type{height:65vh;}
  }
  @media (max-width:376px){
    #home_revise .mb_section_3{height:100vh;}
    .mb_s1_banner > .col-12:first-child{height:54vh;}
    #home_revise .mb_s1_banner img{height:100%; width:100%;object-fit:cover;}
  }
  @media (max-width:361px){
    .mb_s1_banner > .col-12:first-child{height:60vh;}
    #home_revise .mb_section_3{height:92vh;}
  }
  @media screen and (max-width: 360px){
    .cny-mid-bg{padding: 80px 0;}
  }
  @media (max-width:345px){
    #home_revise .mb_section_3{height:80vh;}
    #home_revise .s4_line{height:37vh;}
    #home_revise .s4_content{height:60vh;}
  }

  .coin6 { left: 50%;bottom: 20%;opacity: 0;animation: moveDown 1.2s ease-in, floating 3.5s infinite;animation-delay: 3.1s;animation-fill-mode: forwards; }
  .line1 { left:62%; transform:scale(2);}
  .line2 { left:12%; transform:scale(2); top:68%;}
  .line3 { height:100%; left:60%;}
  #home-festival {margin-top:-80px;}



  @media (max-width:431px) {
    #home_revise .s2_description {top: 0;}
    #home_revise .s2_sticky_div {height: 75vh;}
    #home_revise .section_2 {height: 150vh;}
    #home_revise .mb_section_3 {height: 80vh;}
    .section_3,#home_revise .section_6 {margin-top: 50px;}
    .section_4 {margin-top: 0;}
    #home_revise .s4_content {height: 80vh;}
    #home_revise .s4_line {height: 42vh;}
    #home_revise .s6_text {height: 60vh;}
    #home_revise .s6_float_text_1 {bottom: 28.5%}
    #home_revise .s6_float_text_2 {bottom: 24.5%}
    #home_revise .s6_float_text_3 {bottom: 16.3%}
    #home_revise .s6_float_text_4 {bottom: 13%}
    #home_revise .s6_float_text_5 {bottom: 8.5%}
    #home_revise .lp_section_7,#home_revise .mb_section_7 {padding-top: 18vh;}
    #home_revise .mb_s7_line,
    #home_revise .s7_line {height: 42vh;}
    .last_section {margin-top: 70px;}
    #home_revise .section_6 {height: 130vh;}
    .mb_s1_banner .col-12:first-of-type {height: 70vh;}
    .mb_s1_banner .col-12 .image {height: 100%;width: 100%;}
  }
  @media only screen and (max-device-width: 415px) and (-webkit-min-device-pixel-ratio: 2) and (hover: none) and (pointer: coarse) {
    #home_revise .mb_section_3 .s3_lower_part {height: 65vh;}
    .mb_s1_banner .col-12:first-of-type {height: 56vh;}
    #home_revise .mb_s1_banner img {height: 100%;width: 100%;object-fit: cover;}
  }
  @media (max-width:391px) {.mb_s1_banner .col-12:first-of-type {height: 65vh;}}
  @media (max-width:376px) {
    #home_revise .mb_section_3 {height: 100vh;}
    .mb_s1_banner>.col-12:first-child {height: 54vh;}
    #home_revise .mb_s1_banner img {height: 100%;width: 100%;object-fit: cover;}
  }
  @media (max-width:361px) {
    .mb_s1_banner>.col-12:first-child {height: 60vh;}
    #home_revise .mb_section_3 {height: 92vh;}
  }
  @media (max-width:345px) {
    #home_revise .mb_section_3 {height: 80vh;}
    #home_revise .s4_line {height: 37vh;}
    #home_revise .s4_content {height: 60vh;}
  }

  .overhid {overflow: hidden;}



  @keyframes shine {100% {left: 200%;}}
  #home-scroll-04 {contain: layout;}
  .hide_important {display: none !important;}



  @import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');
  @media (max-width:1920px) {.line1 {left: 66%;transform: scale(1);}}
  @media (max-width:1920px) {.line2 {left: 10%;transform: scale(1.8);top: 56%;}}
  @media (max-width:1920px) {.line3 {left: 64%;}}

  @media (max-width:1440px) {.line1 {left: 54%;}}
  @media (max-width:1440px) {.line2 {left: 4%;transform: scale(1.2);top: 55%;}}
  @media (max-width:1440px) {.line3 {width: 30%;}}

  @media (max-width:1080px) {.line1 {left: 40%;}}
  @media (max-width:1080px) {.line2 {left: -5%;transform: scale(0.9);top: 59%;}}
  @media (max-width:1080px) {.line3 {left: 65%;width: 35%}}

  @media (max-width:991px) {
    .goldbar {display: none;}
    .coin5 {left: 10%;}
    .coin1 {right: -11%;top: 60%;}
    .coin-account {z-index: 1;top: -8%;left: 72%;width: 37%;}
    .title3 {font-size: 18px;}
  }
  @media (max-width:768px) {.line1 {left: 0%;top: 5%;width: 100% !important}}
  @media (max-width:768px) {.line2 {left: -10%;top: 74%;width: 100% !important}}
  @media (max-width:768px) {.line3 {left: -20%;top: 2%;width: 120% !important;height: 50% !important;}}
  @media (max-width:768px) {#home-festival {margin-top: -20px;}}
  @media (max-width:768px) {.coin6 {display: none;}}
  @media (max-width:768px) {.show_promotion_button {top: 0;}}

  @media (max-width:450px) {
    .title3 {width: 75%}
    .title2 {font-size: 48px}
    .element img {width: 17%}
    .coin3 {bottom: 9%}
    .coin5 {left: 13%;top: 54%;}
    .star6 {left: 70%}
    #cny-display .banner-btn {background: linear-gradient(#000000e6, #000000);}
    .coin1-account {left: -3%;top: 24%;}
    .title3 {font-size: 14px;}
  }

  @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
  @keyframes floating {
    0% {transform: translate(0, 0px);}
    50% {transform: translate(0, 15px);}
    100% {transform: translate(0, -0px);}
  }
  @keyframes glowAndShineAnimation {
    0%,100% {opacity: 0.5;filter: drop-shadow(0 0 0 white);}
    50% {opacity: 1;filter: drop-shadow(0 0 0.1rem white);}
  }
  @keyframes moveDown {
    from {top: -20vh;opacity: 0;}
    to {opacity: 1;}
  }
  
  .title1 {font-size: 24px;font-weight: 700;color: #D9D9D9;line-height: 56px;display: flex;}
  .icon2024 {padding-left: 10px;}
  .title2 {font-size: 80px;font-weight: 400;background: linear-gradient(89deg, #00e0ff 0, #0057ff 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-family: 'Uncial Antiqua', system-ui;}
  .title3 {font-size: 14px;font-weight: 400;color: white;}
  .element {position: absolute;width: 100%;height: 100%}
  .element img {position: absolute;}
  .coin1 {right: -5%;top: 50%;opacity: 0;animation: moveDown 1.2s ease-in, floating 3.5s infinite;animation-delay: 3s;animation-fill-mode: forwards;}
  .coin2 {right: 5%;top: 5%;opacity: 0;animation: moveDown 1.2s ease-in, floating 3.5s infinite;animation-delay: 3.2s;animation-fill-mode: forwards;}
  .coin3 {left: 50%;bottom: -2%;opacity: 0;animation: moveDown 1.2s ease-in, floating 3.5s infinite;animation-delay: 3.1s;animation-fill-mode: forwards;}
  .coin4 {right: 1%;top: 41%;opacity: 0;animation: moveDown 1.2s ease-in, floating 3.5s infinite;animation-delay: 3s;animation-fill-mode: forwards;}
  .coin5 {left: 39%;top: 10%;opacity: 0;animation: moveDown 1.2s ease-in, floating 3.5s infinite;animation-delay: 3.2s;animation-fill-mode: forwards;}
  .goldbar {right: 2%;top: 34%;animation: fadeIn 1s ease-in;opacity: 0;animation-delay: 1s;animation-fill-mode: forwards;}
  .star1 {right: 22%;top: 82%;animation: glowAndShineAnimation 2s infinite;}
  .star2 {left: 16%;bottom: 10%;animation: glowAndShineAnimation 2.5s infinite;}
  .star3 {right: 5%;animation: glowAndShineAnimation 2.1s infinite;}
  .star4 {left: 41.5%;top: 53%;animation: glowAndShineAnimation 2s infinite;}
  .star5 {right: 24%;top: 5%;animation: glowAndShineAnimation 2.2s infinite;}
  .star6 {left: 50%;top: 31%;animation: glowAndShineAnimation 2.3s infinite;}
  .center-element {animation: fadeIn 1s ease-in;opacity: 0;animation-delay: 3s;animation-fill-mode: forwards;}
  #cny-display .bg_div {animation: fadeIn 1s ease-in;opacity: 0;animation-delay: 1s;animation-fill-mode: forwards;}
  .coin-account {z-index: 1;top: -30%;left: 47%;}
  .star1-account {left: 66%;top: 5%;z-index: 1;}
  .star2-account {z-index: 1;left: 89%;top: 19%;}
  .star3-account {z-index: 1;left: 20%;top: 21%;}
  .star4-account {z-index: 1;top: 13%;left: 10%;}
  .star5-account {left: 87%;top: 10%;}
  .star6-account {z-index: 1;left: -10%;top: 34%;}
  .coin1-account {left: 12%;top: 18%;}
  .coin6 {left: 50%;bottom: 20%;opacity: 0;animation: moveDown 1.2s ease-in, floating 3.5s infinite;animation-delay: 3.1s;animation-fill-mode: forwards;}
  .line1 {left: 62%;transform: scale(2);}
  .line2 {left: 12%;transform: scale(2);top: 68%;}
  .line3 {height: 100%;left: 60%;}
  #home-festival {margin-top: -80px;}


<!-- Vesak -->

  @import url('https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap');
  .lotus {position: absolute;bottom: 55px;left: 50%;transform: translateX(-50%);transform-origin: center;display: none;justify-content: center;align-items: center;}
  .mobile-energy-line,.mobile-water-line {display: none;}
  .banner-container {margin: 0;max-width: unset;position: relative;height: 100%;}
  .vesak-title-color {color: #0247B0;}
  .why-content {font-size: 28px;}
  .ctrader-text-color {color: #001E5B;font-family: Inter;font-size: 32px;font-weight: 600;line-height: 44.49px;letter-spacing: -0.02em;}
  .button-color {background: linear-gradient(181.87deg, #00B3FF 0.25%, #0247B0 99.77%);box-shadow: 4px 4px 16px 0px #4D88C6B2;border: none;color: white;padding: 18px 50px 18px 50px;border-radius: 43px;font-family: "Inter";font-size: 16px;font-weight: 700;line-height: 19px;letter-spacing: 0em;text-align: left;}
  .button-color:hover {color: white;}
  .banner-button {margin-top: 30px;position: relative;z-index: 2;}
  .banner-button a {font-family: Inter;font-size: 15px;font-weight: 700;line-height: 18px;letter-spacing: 0em;text-align: center;background-color: #152956;color: white;padding: 18px 50px 18px 50px;}
  .banner-text-container {margin: auto;text-align: center;top: 40%;position: absolute;transform: translateY(-45%);width: 100%;z-index: 999;}
  .banner-text {font-family: "Vesper Libre";font-size: 38px;font-weight: 700;line-height: 30px;letter-spacing: 0em;}
  /* Banner Icon */
  .banner-icon-container {z-index: 1;display: flex;position: absolute;width: 100%;height: 500px;justify-content: space-between;bottom: 30px;left: 0;}
  .top-icon,.bottom-icon {width: 50%;height: 500px;position: relative;}
  .banner-icon {width: 125px;height: 125px;position: absolute;opacity: 0;}
  .banner-icon img {width: 100%;height: auto;}
  .money {top: 15%;left: 11.5%;}
  .water {top: 48%;left: 47%;}
  .energy {top: 48%;right: 47.5%;}
  .fire {top: 15%;right: 11%;}
  /* Line Animation */
  .line {position: absolute;}
  .first-line {top: 45%;left: 14%;}
  .second-line {top: 80%;left: 50%;}
  .third-line {top: 80%;right: 50%;}
  .four-line {top: 45%;right: 14%;}
  .light {position: absolute;opacity: 1;background: #06CBF6;border-radius: 50%;width: 35px;height: 35px;transform: translate(25%, 28%);filter: blur(5px);opacity: 0.4;}