html, body {
  background-color: #000;
  color: #fff;
  height: 100%;
  font-size: 20px;
  font-weight: 600;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: url(../img/BG.png) no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

.container {
  position: relative;
  max-width: 750px;
  margin: 0 auto;
  flex-grow: 1;
  padding: 2rem 0;
}
.container .logo {
  width: 150px;
  margin: 0 auto;
}
.container .topBtn {
  position: relative;
  width: 65%;
  margin: 0 auto;
  margin-top: 1rem;
}
.container .topBtn .title {
  width: 100%;
  font-size: 1.5rem;
  text-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}
.container .swiper {
  margin: 0 auto;
  padding-top: 1rem;
  pointer-events: none;
}
.container .swiper-wrapper {
  transition-timing-function: linear !important;
}
.container .swiper-slide {
  background-position: center;
  background-size: cover;
  width: 20%;
  margin: 0;
}
.container .swiper-slide img {
  display: block;
  width: 100%;
}
.container .bottomBtn .btn {
  position: relative;
  width: 65%;
  margin: 0 auto;
  margin-top: 1rem;
  transition: all 0.3s;
}
.container .bottomBtn .btn .title {
  text-transform: uppercase;
}
.container .bottomBtn .btn1 .title {
  text-shadow: 0 0 10px #ff00f0;
}
.container .bottomBtn .btn2 .title {
  text-shadow: 0 0 10px #ff4e00;
}
.container .bottomBtn .btn:hover {
  transform: scale(1.2);
}
.container .bottomBtn:hover .btn:not(:hover) {
  filter: grayscale(100%);
  opacity: 0.75;
  display: block;
}

.hotgames {
  width: 1600px;
  position: absolute;
  top: 2.5rem;
  left: calc((100vw - 1600px) / 2);
  animation: jackInTheBox 1s linear, shakeY 10s 1s linear infinite;
}

@media screen and (max-width: 750px) {
  html, body {
    font-size: 4vw;
  }
  .container {
    max-width: 100%;
  }
  .container .logo {
    width: 30%;
  }
  .container .topBtn {
    width: 90%;
    margin-top: 1.5rem;
  }
  .container .swiper {
    width: 100%;
    padding-bottom: 5rem;
    background: url(../img/stage.png) center bottom no-repeat;
    background-size: 70%;
  }
  .container .bottomBtn .btn {
    width: 95%;
  }
  .container .bottomBtn .btn:hover {
    transform: scale(1);
  }
  .hotgames {
    display: none;
  }
}/*# sourceMappingURL=style.css.map */