.banner {
  width: 100%;
  height: 8.533333rem;
  overflow: hidden;
  position: relative
}

.banner-swiper {
  width: 100%;
  height: 100%
}

.banner-swiper .swiper-slide img {
  width: 100%;
  height: 100%
}

.banner-swiper .move {
  position: absolute;
  left: .533333rem;
  bottom: .533333rem;
  color: #f4f5f7
}

.banner-swiper .move h3 {
  font-size: .64rem;
  font-weight: 600
}

.banner-swiper .move p {
  font-size: .32rem
}

.banner-pagination {
  width: auto !important;
  left: auto !important;
  right: .533333rem !important;
  bottom: .533333rem !important
}

.banner-pagination span {
  width: .24rem;
  height: .24rem;
  background: #fff;
  opacity: 1
}

.banner-pagination .swiper-pagination-bullet-active {
  width: .48rem;
  background: #fff;
  border-radius: .266667rem
}

.main {
  background-color: #fff;
  border-radius: .32rem .32rem 0 0;
  margin-top: -.4rem;
  position: relative;
  z-index: 2
}

.menu {
  padding: .666667rem .533333rem;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center
}

.menu a {
  -webkit-box-flex: 1;
  flex: 1;
  text-align: center;
  font-size: .373333rem;
  color: #666
}

.menu a i {
  display: block;
  width: 1.466667rem;
  height: 1.466667rem;
  margin: 0 auto
}

.menu a.menu1 i {
  background: url(../images/menu1.png) no-repeat center;
  background-size: contain
}

.menu a.menu2 i {
  background: url(../images/menu2.png) no-repeat center;
  background-size: contain
}

.menu a.menu3 i {
  background: url(../images/menu3.png) no-repeat center;
  background-size: contain
}

.menu a.menu4 i {
  background: url(../images/menu4.png) no-repeat center;
  background-size: contain
}

.hot-games .title {
  padding: 0 .533333rem;
  line-height: .8rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .3rem;
}

.hot-games .title .icon {
  width: .64rem;
  height: .613333rem;
  background: url(../images/hot-games.png) no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-right: .266667rem
}

.hot-games .title h3 {
  flex: 1;
  font-size: .426667rem;
  font-weight: 400;
  color: #2e2f2f
}

.hot-games .title .title-more {
  font-size: 0.30666rem;
  color: #999;
}

.hot-games .title h3 i {
  color: #f27048
}

.hot-games .title h3 span {
  font-size: .373333rem;
  color: #d9dada;
  padding-left: .213333rem
}

.hot-games .games-list {
  padding: 0 .266667rem;
  position: relative;
}

.hot-games .games-list li {
  width: 100%;
  margin: 0 auto .5rem;
  position: relative;
  border-radius: 6px;
  box-shadow: 0 .12rem .28rem 0 rgba(84, 84, 84, .23)
}

.hot-games .games-list li a {
  display: block;
  width: 100%;
  height: 100%
}

.hot-games .games-list li .info {
  display: flex;
  padding: .16rem .14rem;
  justify-content: space-between;
  align-items: center;
}

.hot-games .games-list li .icon {
  width: 0.72rem;
  width: 0.72rem;
  margin-right: .28rem;
}

.hot-games .games-list li .bg,
.hot-games .games-list li .icon img {
  width: 100%;
  height: 100%
}

.hot-games .games-list li .info p {
  font-size: .46rem;
  font-weight: 700;
  color: #2f2f2f;
}

.hot-games .games-list li .info .desc {
  font-size: 0.2933rem;
  text-align: right;
  line-height: 1;
  letter-spacing: 1px;
  flex: 1;
  color: #a6a6a6;
  height: max-content;
}

.hot-games .more-box {
  padding-bottom: .8rem
}

.hot-games .more-box a {
  display: block;
  width: 5.013333rem;
  height: 1.68rem;
  margin: 0 auto
}

.hot-games .more-box img {
  width: 100%;
  height: 100%
}

.hot-news {
  padding: 0 .533333rem
}


.hot-news .title .icon {
  float: left;
  width: .42rem;
  height: .48rem;
  background: url(../images/hot-news.png) no-repeat center;
  background-size: cover;
  vertical-align: middle;
  position: relative;
  top: .16rem;
  margin-right: .266667rem
}

.hot-news .title h3 {
  float: left;
  font-size: .426667rem;
  font-weight: 400;
  color: #2e2f2f
}

.hot-news .title h3 i {
  color: #4cc622
}

.hot-news .title h3 span {
  font-size: .373333rem;
  color: #d9dada;
  padding-left: .213333rem
}

.hot-news .title .more {
  float: right;
  padding-right: .32rem;
  font-size: .32rem;
  color: #bbb;
  background: url(../images/more-r.png) no-repeat right center;
  background-size: .32rem
}

.hot-news .news-list li {
  width: 100%;
  padding: .533333rem 0;
  border-bottom: 1px solid #eee
}

.hot-news .news-list li:last-child {
  border-bottom: 0
}

.hot-news .news-list li a {
  display: -webkit-box;
  display: flex
}

.hot-news .news-list .news-img {
  width: 3.2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: .133333rem
}

.hot-news .news-list a:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}

.hot-news .news-list .news-img img {
  width: 100%;
  height: 100%;
  -webkit-transition: .6s all ease;
  transition: .6s all ease
}

.hot-news .news-list .news-txt {
  -webkit-box-flex: 1;
  flex: 1;
  margin-left: .4rem;
  font-size: .373333rem;
  color: #666;
  overflow: hidden
}

.hot-news .news-list .news-txt h3 {
  height: 1.28rem;
  font-size: .4rem;
  line-height: .64rem;
  font-weight: 400;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden
}

.hot-news .news-list .news-txt span {
  display: block;
  font-size: .32rem;
  color: #999;
  padding-top: .2rem
}