@keyframes look_more {
  from {
    opacity: 1;
    transform: translateY(-50%);
  }
  to {
    opacity: 0.5;
    transform: translateY(0);
  }
}
section {
  height: 100vh;
  background-image: url(http://mini.bkwl6.com/gameModifier/image/gamelist_page_bgi.png);
  background-repeat: no-repeat;
  background-size: 100%, 100%;
  background-color: #000;
  box-sizing: border-box;
}
section h1 {
  font-family: AlimamaShuHeiTi;
  font-size: 6.149vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: 1.3vw;
  padding-top: 20vw;
}
section p {
  text-align: center;
  font-size: 1.611vw;
  letter-spacing: 0.322vw;
  color: #ffd83b;
}
section .download_button {
  width: 16.691vw;
  height: 3.367vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8vw;
  background-image: linear-gradient(90deg, #7776ff 0%, #ae2cf1 100%);
  border-radius: 0.293vw;
  color: white;
  margin: 1.8vw auto 0;
  font-size: 1.171vw;
  font-weight: bold;
  cursor: pointer;
}
section .download_button img {
  width: 1.464vw;
  height: 1.464vw;
}
section .info {
  margin-top: 1vw;
  text-align: center;
  font-size: 0.878vw;
  letter-spacing: 0.176vw;
  color: #ffffff;
  opacity: 0.6;
}
section ul {
  display: flex;
  justify-content: center;
  gap: 3vw;
  margin-top: 2.3vw;
}
section ul li {
  width: 2.05vw;
  height: 2.05vw;
}
section ul li img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
section .look_more {
  position: absolute;
  bottom: 3vw;
  left: 18.5vw;
  color: #999;
  display: flex;
  align-items: center;
  gap: 0.5vw;
  animation: look_more 1.5s linear infinite alternate;
}
section .look_more img {
  height: 1.3021vw;
}
main {
  background-color: #000;
}
main .des {
  text-align: center;
  font-size: 0.732vw;
  line-height: 1.995vw;
  letter-spacing: 0.022vw;
  color: #ffffff;
  opacity: 0.6;
}
main h1 {
  font-family: AlimamaShuHeiTi;
  font-size: 3.514vw;
  letter-spacing: 0.088vw;
  color: #ffffff;
  text-align: center;
  margin-top: 3.5vw;
}
main h1 span {
  background-clip: text;
  color: transparent;
  /* 使文字透明，显示背景色 */
  display: inline-block;
  background-image: linear-gradient(90deg, #e47700 0%, #ff992c 34%, #f5c51d 100%);
  -webkit-background-clip: text;
}
main .search_box {
  width: 36.896vw;
  height: 3.66vw;
  margin: 3.88vw auto 0;
  background-color: rgba(3, 0, 56, 0.4);
  border-radius: 0.586vw;
  border: solid 0.146vw rgba(122, 116, 255, 0.55);
  display: flex;
  overflow: hidden;
}
main .search_box input {
  flex: 1;
  font-size: 1vw;
  text-indent: 1rem;
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
}
main .search_box input:focus {
  background-color: transparent;
}
main .search_box input::placeholder {
  font-size: 0.9vw;
  color: white;
}
main .search_box button {
  width: 3.66vw;
  height: 3.66vw;
  background-color: rgba(122, 116, 255, 0.6);
  border: none;
  outline: none;
  cursor: pointer;
}
main .search_box button img {
  width: 1.757vw;
  height: 1.757vw;
}
main .gamelist {
  display: flex;
  padding: 2.43vw 0;
  width: 91.5vw;
  margin: 0 auto;
  flex-wrap: wrap;
}
main .gamelist .item {
  width: 17.5vw;
  position: relative;
  cursor: pointer;
  margin-right: 1vw;
  margin-bottom: 1vw;
  border-radius: 0.5208vw;
  overflow: hidden;
}
main .gamelist .item:nth-of-type(5n) {
  margin-right: 0;
}
main .gamelist .item img {
  width: 100%;
  height: 100%;
}
main .gamelist .item:hover .mask {
  height: 2vw;
}
main .gamelist .item .mask {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  padding: 0 0.7813vw;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.4);
  bottom: 0;
  display: flex;
  align-items: center;
  color: white;
  transition: all 0.2s linear;
}
main .gamelist .item .mask img {
  width: 1.098vw;
  height: 0.952vw;
}
main .gamelist .item .mask p {
  margin-left: auto;
  opacity: 1;
}
main .gamelist .item .mask .support_list {
  width: 100px;
  margin-left: 0.5208vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.back_top {
  display: flex;
  position: fixed;
  background-color: rgba(122, 116, 255, 0.6);
  right: 30px;
  bottom: 200px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 2s linear;
  transform: translateX(50vw);
}
.back_top img {
  width: 30px;
  opacity: 0.8;
}