body{
    overflow-x: hidden;
    padding:0;
  }
  
  .bg-body-tertiary {
  background: none !important;

}
.container1{
  width: 62%;
  height: 54%;
  top: 22%;
  left: 2%;
}

.btn2 {
 
  top: 44%;
  
}

.btn2 img{
    width:70%;
    animation: pulse 0.8s infinite linear;

}

.btn2 {
 
  top: 70%;

  
}

.btn2 img{
    width:75%;
    animation: pulse 0.8s infinite linear;

}


.btn1 {
  
  top: 89%;


}

.btn1 img{
    width:50%;
    animation: pulse 0.8s infinite linear;
}


.frame {
  
      top: 40%;
      z-index:1;


}

.frame img{
    width:90%;
}


.main-title {

  top: 17%;
  /* left: 16%; */

  
}

.main-title img{
    width:80%;
    
}

.layer2-title {

  top: 10%;
  /* left: 16%; */

  
}

.layer2-title img{
    width: 85%;
    
}

.layer3-title {

  top: 10%;
  /* left: 16%; */

  
}

.layer3-title img{
    width:80%;
    
}


.form-title {

  top: 47%;

    /* width:45%;
    margin-bottom: -26px; */
  
}


.form-title img{
  width:81%;
}




.winner-container{
    width: 81%;
    height: 36vh;
    top: 24%;
    left: 9%;
}

.image1{
  width: 75%;
}




.form-frame{
  top: 41%;

}

.form-frame img{
  width: 90%;
}



.btn1 {
        top: 75%;

   
}

.btn1 img {
    width: 60%;
}

.container-form{


     width: 100%;
    height: 42vh;
    left: 2%;
    top: 3%;
}



.homepage-banner {

  align-items: center;
  background: none;
  border-radius: 6px;
  padding: 4px 8px; /* 默认内边距 */
}



.banner-bg{
  height: 10vh;
    margin-top: -20px;
}

.container-app {
    width: 66%;
    height: 8vh;
    top: -12%;
    left: 1%;
}

.banner-logo {
  width: 43px;          /* 固定像素，而不是百分比 */
  height: auto;
  object-fit: contain;  /* 防止图片变形 */
  margin-right: 8px;    /* 图片和文字之间留一点空间 */
}

.banner-text {
  font-size: 20px;
  font-weight: bold;
  color: white;
  line-height: 1;        /* 让文字垂直对齐图片 */
}

.banner-btn{

         width:25%;
        top: 0%;
        right: 4%;

}

.banner-btn img{
  width: 100%;
}


.reward-modal{
    height:43vh;
}
.reward-modal {
  background-image:
    linear-gradient(to bottom, #2c1d00, #000),  /* 内部背景：棕到黑渐变 */
    linear-gradient(135deg, #d4af37, #fff5a5, #d4af37); /* 外层边框金色渐变 */
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.reward-img {
  width: 30%;
  height: auto;
}

.reward-btn {
  background: linear-gradient(to bottom, #ffd85c, #fcb045);
  color: black;
  font-weight: bold;
  border-radius: 30px;
  padding: 10px 30px;
  border: none;
      animation: pulse 0.9s  infinite linear;
      font-size: 23px;

}

.reward-btn:hover {
  background: linear-gradient(to bottom, #ffcc33, #ff9933);
  color: black;
}


.modal-container{
    width: 100%;
    left: 0%;
    top: 27%;
}


h2{
    font-size: 40px;
    color: white;
}


p.modal-text{
    font-size: 17px;
    color: white;
}


.modal-btn {
       left: 19%;
    top: 53%;
}

.video {
    top: 40.7%;
   
}

.video video {
    width: 95%;
}


    



/* #loginForm .form-group {
  margin-bottom: 20px;
} */
@keyframes pulse {
  0% {
      transform: scale(1);
  }

  50% {
      transform: scale(1.1);
  }

  100% {
      transform: scale(1);
  }
}



/* @media(min-width:375px){
    .form-container{
      height: 45vh;
    }
}

@media(min-width:525px){
    .form-container{
      height: 52vh;
    }
} */


@media(max-width:320px){
  .form-container{
    height: 48vh ;
    width: 90%;
    left: 5%;
    top: 32%;
  }

  .container-form{


     width: 100%;
    height: 38vh;
    left: 2%;
    top: 6%;
}

.form-control {
    height: 5vh;
    width: 96%;
    font-size: 15px;
    
}

.form-title{
    /* top: 4%; */
    /* left: 16%; */
    width: 45%;
    margin-bottom: -20px;
}

.container-app {
        width: 78%;
        height: 8vh;
        top: -7%;
        left: 0%;
    }

#loginForm .form-group {
    margin-bottom: -19px;
}


.btn{
  margin-top: -146px;
}

p{
 
  padding: 30px;
}
}


@media(min-width:360px){
.modal-btn {
    left: 19%;
    top: 59%;
}

.reward-btn{
  font-size: 20px;
}

}





/* @media(min-width:425px){
  .form-container{
    height:56vh
  }
} */


 @media(min-width:768px){


.container-app {
        width: 78%;
        height: 8vh;
        top: 9%;
        left: 2%; 
}
.banner-bg {
    height: 15vh;
    margin-top: -10px;
}

.banner-btn {
    width: 25%;
    top: 2%;
    right: 4%;
}

/*.banner-logo {*/
/*    width: 14%;*/
/*}*/

.homepage-banner {
    padding: 2px 6px; /* 缩小整体间距 */
  }

  .banner-logo {
    margin-right: 2px; /* logo 与文字更靠近 */
    width: 73px;       /* 稍微放大 logo */
  }

  .banner-text {
    font-size: 23px;   /* 稍微放大字体保持平衡 */
  }

} 













@media(min-width:769px){

    .form-container {
        width: 26%;
        height: 64vh;
        left: 67%;
        top: 14%;
        transform: translate(-22%, -9%);

}
}







@media (min-width:992px) {



     .form-title {
        top: 15%;
        left: 11%;
        width: 80%;
    }


/* .form-title{
  width: ;
} */

.form-frame{
  top: 17%;
  left: 60%;
  width: 30%;
  z-index: 1;
}

.form-frame img{
  width: 100%;
}

.form-title img{
    width:100%;
    
}

    .form-container {
             width: 26%;
        height: 53vh;
        right: 8%;
        top: 17%;
        transform: none;
    }
    .btn1 {
        top: 68%;
        left: 20%;
        width: 62%;
    }

.btn1 img {
    width: 100%;
}

.main-title {

  top: 17%;
  /* left: 16%; */

  
}

.main-title img{
    width:80%;
    
}

.layer2-title {

  top: 4%;
  /* left: 16%; */

  
}

.layer2-title img{
    width:35%;
    
}

.layer3-title {

  top: 10%;
  /* left: 16%; */

  
}

.layer3-title img{
    width:35%;
    
}

.btn2 {
 
  top: 89%;
  left: 35%;
  width: 30%;
  
}

.btn2 img{
    width:100%;
    animation: pulse 0.8s infinite linear;
}

.frame {
  
            top: 30%;
        left: 20%;
        width: 61%;
        z-index: 1;
    z-index:1
    

}

.frame img{
    width:100%;
}

.winner-container {
        width: 98%;
        height: 34vh;
        top: 40%;
        left: 9%;
}

/*.image1{*/
/*  width: 80%;*/
/*}*/

.image1 {
  width: 450px;
  height: auto;
}

.layer3-title {

  top: 10%;
  /* left: 16%; */

  
}

.layer3-title img{
    width:35%;
    
}


.banner-bg{
  /* height: 10vh;
    margin-top: -20px; */
    width: 100%;
    height: 14vh;

}

.homepage-banner {
    padding: 2px 6px !important;  /* 让 desktop 更紧凑 */
 }


    .container-app {
        width: 100%;
        height: 9vh;
        top: 7%;
        left: 13%;
    }

    .banner-logo {
        width: 4%;
    }

.banner-text{
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.banner-btn {
        width: 10%;
        top: 10%;
        right: 32%;
}

.banner-btn img{
  width: 100%;


}.modal-container{
    width: 100%;
    left: 0%;
    top: 27%;
}


h2{
    font-size: 40px;
}


p.modal-text{
    font-size: 17px;
}


.reward-btn{
  font-size: 23px;
}


.modal-btn {
          left: 25%;
        top: 53%;
}



/* .video{
        width: 100%;
 
        height: 55vh;
}

.video-container{
  width: 52%;
  height: 56vh;
  top: 36%;
  left: 24%;
  z-index:0

} */



.video{
        width: 53%;
        left: 23%;
        top: 32%;
       

}

/* .video{
  width: 50%;
}
    
         */
    
}


/* @media(min-width:1750px){
      .container-app {
        width: 100%;
        height: 9vh;
        top: -18%;
        left: 13%;
    }
} */


@media(min-width:1600px){
        .winner-container {
        width: 98%;
        height: 34vh;
        top: 40%;
        left: 9%;
    }
}

@media(min-width:1800px){

    .container-app {
        width: 100%;
        height: 9vh;
        top: 12%;
        left: 13%;
    }
      .banner-logo {
        width: 3%;
    }

    .banner-btn {
        width: 6%;
        top: 31%;
        right: 32%;
    }
    
    .banner-text {
        font-size: 30px;
        font-weight: bold;
        color: white;
    }
    
    .image1 {
  width: 800px;
  height: auto;
}

.winner-container {
        width: 98%;
        height: 34vh;
        top: 40%;
        left: 15%;
    }

 
}






/* pop out msg */