
html, body {
  width: auto
  !important; 
  overflow-x: 
  hidden!important
} 

body {
  background-color: #020713;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  overflow-x: hidden; 
 
}
main {
  /* 60.3125 */
  position: relative;
  background-image: url("../img/background.webp");
  background-repeat: no-repeat, no-repeat;
  background-size:cover;
  background-position: center center;
  min-width: 1920px;
  min-height: 605px;
}
img {
  width: 100%;
}

a {
  display: block;
}

.pc-model .button-big {
  width: 30.27%;
}

.pc-model .button-small {

  width: 5.104%;
}

.pc-model .btn-b {
  width: 50%;
  position: absolute;
  left: 66%;
  top: 60%;
  z-index: 5;
  background-size: 100%;
  animation-name: zoominout;
  animation-duration:1.5s;
  animation-iteration-count:infinite;
  z-index: 5;
}

@-webkit-keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(1);

  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

.pc-model .btn-b:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
  animation-name: zoominout;
  animation-duration:2s;
  animation-iteration-count:infinite;
}

.pc-model .btn-c {
  width: 12%;
  position: absolute;
 right: 33.35%;
  top: 64.7%;
  z-index: 5;
background-size: 100%;
animation-name: zoominout;
animation-duration:1.5s;
/*animation-delay:.5s;*/
animation-iteration-count:infinite;
/*animation-timing-function:step-start;*/
/*animation-fill-mode: forwards;*/
z-index: 5;
}

@-webkit-keyframes zoominout {
0% {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}
20% {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
30% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
35% {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
100% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
}
@keyframes zoominout {
0% {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(1);

}
20% {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
30% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
35% {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}
100% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
}

.pc-model .btn-c:hover {
transform: scale(1.05);
filter: brightness(1.1);
animation-name: zoominout;
animation-duration:2s;
/*animation-delay:.5s;*/
animation-iteration-count:infinite;
}

 .container {
  width: auto;
}
.spin-logo {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  position: absolute;
  left: 59%;
  top: 15%;
  z-index: 4;
  width: 23%;
  align-items: center;
}

@font-face {
  font-family:'SUNFLOWER';
  src: url('../fonts/SUNFLOWER.TTF') format('truetype');
}
.web-title{
  width: 100vw;
  height: 100vh;
  top: 100px;
}
.main-title2 {
  position:absolute;
  top: 5.5%;
  left: 28%;
  color: #fffafa;
  text-align:center;
  font-family:'SUNFLOWER', sans-serif;
  font-size: 60px;
  line-height: 1.4;
  font-weight: bold;
 background: linear-gradient(360deg, #b8bfc5, #e4e8eb, #fff);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.main-title {
  position:absolute;
  top: 6.2%;
  left: 28%;
  color: #10192b;
  text-align:center;
  font-family:'SUNFLOWER', sans-serif;
  font-size: 60px;
  line-height: 1.4;
  font-weight: bold;
 
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 text-shadow: #10192b 1px 0 5px;
 
}

/*container2*/
.container_web {
  display: flex;
  align-items: center;
  position: absolute;
  right: 52.5%;
  top: 23%;
  height: 50vh;
  
  
}
.eggc_container {
  display: flex;
  align-items: center;
  position: absolute;
  right: 60%;
  top: 10%;

}
.content-wrapping {
  text-align: center;
  background: linear-gradient(180deg, rgba(222, 234, 255, 0.6), rgba(16, 30, 46, 0.6));
  padding: 20px;
  padding-bottom: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo {
  margin-top: 5%;
  width: 293px;
  height: 137px;
  object-fit: cover;
}
.eggc_title {
  margin-top: -5%;
  width: 304px;
  height: 68px;
  object-fit: cover;
}

@font-face {
  font-family:'SUNFLOWER';
  src: url('../fonts/SUNFLOWER.TTF') format('truetype');
}

.title {
  
  font-family: 'SUNFLOWER', sans-serif;
  font-size: 38px;
  color: #f9f5ff;
  line-height: 1.5;
}

.text {
  margin-top: -5%;
  font-family: 'SUNFLOWER', sans-serif;
  font-size: 16px;
  margin-bottom: 20px;
  color: #f9f5ff;
  line-height: 1.9;
}

.link {
  display: inline-block;
  font-size: 16px;
  text-decoration: none;
  color: #f9f5ff;
  background: linear-gradient(180deg, #494673, #293a50);
  padding: 10px 20px;
  padding-bottom: 5%;
  border-radius: 10px;
  animation-name: zoominout;
  animation-duration:1.5s;
  animation-iteration-count:infinite;
  z-index: 5;
}

@-webkit-keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(1);

  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}


.spin_container {
  display: flex;
  align-items: center;
  position: absolute;
  left: 125%;
  top: 0;
}
.content-wrapping {
  text-align: center;
  background: linear-gradient(180deg, rgba(222, 234, 255, 0.6), rgba(16, 30, 46, 0.6));
  padding: 20px;
  padding-bottom: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.logo_spin {
  margin-top: 0.5%;
  width: 170px;
  height: 152px;
  object-fit: cover;
}
.eggc_title {
  margin-top: -5%;
  width: 304px;
  height: 68px;
  object-fit: cover;
}

@font-face {
  font-family:'SUNFLOWER';
  src: url('../fonts/SUNFLOWER.TTF') format('truetype');
}

.title_spin {
  
  font-family: 'SUNFLOWER', sans-serif;
  font-size: 38px;
  color: #f9f5ff;
  line-height: 1.5;
}
.title_spin2 {
  margin-top: -8%;
  font-family: 'SUNFLOWER', sans-serif;
  font-size: 24px;
  color: #f9f5ff;
  line-height: 1.5;
  margin-bottom: 40px;
}

.text_spin {
  margin-top: -5%;
  font-family: 'SUNFLOWER', sans-serif;
  font-size: 16px;
  margin-bottom: 20px;
  color: #f9f5ff;
  line-height: 1.9;
  margin-bottom: 50px;
}

.link {
  font-family: 'SUNFLOWER', sans-serif;
  display: inline-block;
  font-size: 16px;
  text-decoration: none;
  color: #f9f5ff;
  background: linear-gradient(180deg, #6a64be, #263b57);
  padding: 10px 20px;
  padding-bottom: 5%;
  border-radius: 10px;
  animation-name: zoominout;
  animation-duration:1.5s;
  animation-iteration-count:infinite;
  z-index: 5;
}

@-webkit-keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(1);

  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

.footer-Title {
  position:absolute;
  top: 95%;
  right: 41%;
  text-align:center;
  font-size:16px;
  color:white;
  font-family:arial;
  
}

.footer {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    position: absolute;
    right: 6px;
    top: 90%;
    z-index: 4;
    width: 99.2%;
  align-items: center;

}

.mb-model {
  
  
  display: none;
}

.header-mb {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  position: absolute;
  left: 5%;
  top: 4%;
  z-index: 4;
  width: 90%;
  align-items: center;
  place-items: center;
}

.mb-bg-container {
  position: relative;
  background-image: url("../img/mb_bg_v.webp");
  background-repeat: no-repeat, no-repeat;
  background-size: contain;
  width: 100vw;
  height: calc(147vw * 2.39481);
  max-width: 1080px;
  max-height: 3800px;

}
.shili-box-mobile {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  position: absolute;
  left: 3.5%;
  top: 18%;
  z-index: 4;
  width: 95%;
  align-items: center;
  
}



  .mb-bg-container .shili-box-mobile .shili-mobile {

  font-size: 18px;
  color: #ffffff;
  max-width: 100%;
  top: 67%;
  left: 32.5%;
  position: absolute;
  height: auto;
  display: flex;
 font-weight: 900;
 text-align: center;
}

.mb-bg-container .shili_mobile-text {

  font-size: calc(18px + (546vw - 300px) / 100);
  color: #ffffff;
  font-family: 'SUNFLOWER', sans-serif;
  top: 43%;
   left: 5.5%;
   width: 90%;
   line-height: 2.9rem;

   position: absolute;
   text-align: center;
   z-index: 6;
  }

  .mb-bg-container .subx {

    font-size: calc(16px + (65vw - 200px) / 100);
    color: #ffffff;
    font-family: 'SUNFLOWER', sans-serif;
    top: 61%;
    left: 5.5%;
    width: 90%;
    line-height: 1.5rem;

    position: absolute;
    text-align: center;
    z-index: 6;
  }
.mb-bg-container .shili-box-mobile .ca88-model_mb {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  position: absolute;
  left: 0%;
  right: 0;
  top: 8%;
  z-index: 4;
  margin: 0 auto 0;
  width: 90%;
}

.mb-bg-container .shili-box-mobile .ca88-model_mb2 {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  position: absolute;
  left: 2%;
    right: 0;
    top: 31%;
    z-index: 4;
    margin: 0 auto 0;
    width: 83%;
}

.mb-bg-container .mb-button {
  position: absolute;
  z-index: 5;
  padding: 44% 0 0 0%;
  width: 60%; 
  width: 60%; 
  left: 18.8%; 
  background-size: 100%;
  animation-name: zoominout;
  animation-duration:1.5s;
  animation-iteration-count:infinite;
  z-index: 5;
}

@-webkit-keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(1);

  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.mb-bg-container .mb-button :hover {
  transform: scale(1.05);
  filter: brightness(1.1);
  animation-name: zoominout;
  animation-duration:2s;
  animation-iteration-count:infinite;
}

.spin-mobile {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  position: absolute;
  left: 3.5%;
  top: 60%;
  z-index: 4;
  width: 95%;
  align-items: center;
  
}


.spin_mobile-text {

  font-size: calc(18px + (546vw - 300px) / 100);
  color: #ffffff;
  font-family: 'SUNFLOWER', sans-serif;
  top: 45%;
   left: 5.5%;
   width: 90%;
   line-height: 2.9rem;

   position: absolute;
   text-align: center;
   z-index: 6;
  }
 
.spin-sub_mobile-text {

  font-size: calc(18px + (156vw - 300px) / 100);
  color: #ffffff;
  font-family: 'SUNFLOWER', sans-serif;
  top: 52%;
  left: 5.5%;
  width: 90%;
  line-height: 2.9rem;
  position: absolute;
  text-align: center;
  z-index: 6;
  }


  .mb-bg-container .subx2 {

    font-size: calc(16px + (65vw - 200px) / 100);
    color: #ffffff;
    font-family: 'SUNFLOWER', sans-serif;
    top: 62%;
    left: 5.5%;
    width: 90%;
    line-height: 1.5rem;

    position: absolute;
    text-align: center;
    z-index: 6;
  }
.spin-model_mb {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  position: absolute;
  left: 0%;
  right: 0;
  top: 3%;
  z-index: 4;
  margin: 0 auto 0;
  width: 57%;
}

.spin-model_mb2 {
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  position: absolute;
  left: 2%;
    right: 0;
    top: 33%;
    z-index: 4;
    margin: 0 auto 0;
    width: 83%;
}



.mb-bg-container .mb-button2 {
  position: absolute;
  z-index: 5;
  padding: 39% 0 0 0%;
  width: 60%; 
  width: 60%; 
  left: 18.8%; 
  background-size: 100%;
  animation-name: zoominout;
  animation-duration:1.5s;
  animation-iteration-count:infinite;
  z-index: 5;
}

@-webkit-keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes zoominout {
  0% {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(1);

  }
  20% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  30% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  35% {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}
.mb-bg-container .mb-button :hover {
  transform: scale(1.05);
  filter: brightness(1.1);
  animation-name: zoominout;
  animation-duration:2s;
  animation-iteration-count:infinite;
}

/*888888888888888888888888*/

.mb-bg-container .btn-a {
  top: 51.8%;
}

.mb-bg-container .btn-b {
  top: 83.8%;
}

/* RWD */
@media (max-width: 1080px) {
  body {
    overflow: auto;
  }
  .pc-model {
    display: none;
  }
  .mb-model {
    display: block;
  }
}

.container {
  width: auto;
 
}


.footer-mb-Title {
  position:absolute;
  width: 100%;
  top: 97%;
  text-align:center;
  font-size:14px;
  padding-bottom: 10%;
  padding-top: 25%;
  color:white;
  font-family:arial;
 
}


