body {
  margin: 0;
  padding: 0;
  /*background-color: #151110;*/
  font-family: PingFang SC;
}

* {
  box-sizing: border-box;
}

.main-container {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}

.header-container img{
  width: 100%;
  height: auto;
}
.main-container img{
  width: 100%;
  height: auto;
}
.header-container .header-logo {
  width: 24.6vw;
  max-width: 123px;
  position: absolute;
  top: 20px;
  left: 15px;
}
.mid-container{
  margin-top: -4%;
  /*margin-top: -300vm;*/
}
.middle-container{
  margin-top: -4.1%;
}
.middles-container{
  margin-top: -2.8%;
}



.game-container {
  clear-after: both;
  overflow: hidden;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: -63%;
}

.game-container .game-list,
.platform-container .platform-list {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: visible;
  margin-bottom: 28px;
  animation: scroll 30s linear infinite;
}

.game-container .game-list.reverse,
.platform-container .platform-list.reverse {
  animation: scroll-revers 30s linear infinite;
}

.game-container .game-list .game-item {
  width: 23vw;
  max-width: 100px;
}

.bottom-placeholder {
  margin-bottom: 60px;
}


.platform-container .platform-list {
  gap: 16px;
  margin-bottom: 10px;
}

.platform-container .platform-list .platform-item {
  width: 26vw;
  max-width: 98px;
}

.bottom-placeholder {
  margin-bottom: 60px;
}

.download-btn-container {
  position: fixed;
  bottom: -2%;
}
.reverse{
  margin-top: -3%;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200%);
  }
}

@keyframes scroll-revers {
  0% {
    transform: translateX(-200%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes light {
  0% {
    transform: translateX(-500px);
  }

  75% {
    transform: translateX(500px);
  }

  100% {
    transform: translateX(500px);
  }
}

@keyframes anim-get {
  0% {
    transform: scale(0.2);
    transform-origin: left bottom;
  }

  10% {
    transform: scale(1);
    transform-origin: left bottom;
  }

  45% {
    transform: translateX(-0.06667rem) scale(1);
    transform-origin: left bottom;
  }

  50% {
    transform: translateX(0.06667rem) scale(1);
    transform-origin: left bottom;
  }

  55% {
    transform: translateX(-0.06667rem) scale(1);
    transform-origin: left bottom;
  }

  60% {
    transform: translateX(0.06667rem) scale(1);
    transform-origin: left bottom;
  }

  65% {
    transform: translateX(0) scale(1);
    transform-origin: left bottom;
  }

  100% {
    transform: scale(1);
    transform-origin: left bottom;
  }
}