#content .top-game,
#content .best-game,
#content .cate,
#content .download {
  margin-bottom: 32px;
}
#content .top-game .title-box,
#content .best-game .title-box,
#content .cate .title-box,
#content .download .title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#content .top-game .title-box h3,
#content .best-game .title-box h3,
#content .cate .title-box h3,
#content .download .title-box h3 {
  font-family: b;
  font-weight: bold;
  font-size: 20px;
  color: #FFFFFF;
}
#content .top-game .title-box .r-box span,
#content .best-game .title-box .r-box span,
#content .cate .title-box .r-box span,
#content .download .title-box .r-box span {
  font-family: m;
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
}
#content .top-game .title-box .r-box img,
#content .best-game .title-box .r-box img,
#content .cate .title-box .r-box img,
#content .download .title-box .r-box img {
  width: 20px;
  height: 20px;
}
#content .top-game .title-box .r-box .huang,
#content .best-game .title-box .r-box .huang,
#content .cate .title-box .r-box .huang,
#content .download .title-box .r-box .huang {
  display: none;
}
#content .top-game .title-box .r-box:hover span,
#content .best-game .title-box .r-box:hover span,
#content .cate .title-box .r-box:hover span,
#content .download .title-box .r-box:hover span {
  color: #FEB925;
}
#content .top-game .title-box .r-box:hover .huang,
#content .best-game .title-box .r-box:hover .huang,
#content .cate .title-box .r-box:hover .huang,
#content .download .title-box .r-box:hover .huang {
  display: inline-block;
}
#content .top-game .title-box .r-box:hover .bai,
#content .best-game .title-box .r-box:hover .bai,
#content .cate .title-box .r-box:hover .bai,
#content .download .title-box .r-box:hover .bai {
  display: none;
}
#content .top-game .game-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  grid-gap: 16px;
}
#content .top-game .game-list .game-item .img-box {
  width: 290px;
  height: 200px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
  border-radius: 12px 12px 12px 12px;
  overflow: hidden;
  margin-bottom: 10px;
}
#content .top-game .game-list .game-item .img-box img {
  width: 100%;
  height: 100%;
}
#content .top-game .game-list .game-item .btm-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#content .top-game .game-list .game-item .btm-box .cover {
  width: 56px;
  height: 56px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
  border-radius: 12px 12px 12px 12px;
}
#content .top-game .game-list .game-item .btm-box .center {
  width: calc(100% - 102px);
}
#content .top-game .game-list .game-item .btm-box .center h4 {
  font-family: b;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#content .top-game .game-list .game-item .btm-box .center .fen span {
  font-family: m;
  font-weight: 500;
  font-size: 12px;
  color: #F4BD41;
}
#content .top-game .game-list .game-item .btm-box .center .fen img {
  width: 12px;
  height: 12px;
}
#content .top-game .game-list .game-item .btm-box .go-huang {
  width: 30px;
  height: 30px;
}
#content .best-game .game-list {
  display: grid;
  grid-template-columns: repeat(8, minmax(10px, 1fr));
  grid-gap: 8px;
}
#content .best-game .game-list .game-item {
  padding: 12px;
  border-radius: 16px;
}
#content .best-game .game-list .game-item .img-box {
  width: 100%;
  padding-top: 100%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 4px;
}
#content .best-game .game-list .game-item .img-box img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#content .best-game .game-list .game-item h4 {
  font-family: b;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#content .best-game .game-list .game-item .fen span {
  font-family: m;
  font-weight: 500;
  font-size: 12px;
  color: #F4BD41;
}
#content .best-game .game-list .game-item .fen img {
  width: 12px;
  height: 12px;
}
#content .best-game .game-list .game-item:hover {
  background: #00363E;
}
#content .cate .cate-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(10px, 1fr));
  grid-gap: 15px;
}
#content .cate .cate-list .cate-item img {
  width: 100%;
  height: 100%;
}
#content .download .down-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
  grid-gap: 15px;
}
#content .download .down-list .down-item {
  padding: 12px;
  display: flex;
  align-items: center;
  border-radius: 12px;
}
#content .download .down-list .down-item img {
  width: 78px;
  height: 78px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 8px 8px 8px 8px;
  margin-right: 12px;
}
#content .download .down-list .down-item .item-r {
  width: calc(100% - 132px);
}
#content .download .down-list .down-item .item-r h4 {
  font-family: m;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 7px;
}
#content .download .down-list .down-item .item-r .tag {
  font-family: m;
  font-weight: 500;
  font-size: 14px;
  color: #FFFFFF;
}
#content .download .down-list .down-item .item-r .fen-box {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
#content .download .down-list .down-item .item-r .fen-box .fen {
  margin-right: 4px;
  font-family: r;
  font-weight: 500;
  font-size: 12px;
  color: #F4BD41;
}
#content .download .down-list .down-item .item-r .fen-box .layui-rate li i.layui-icon {
  font-size: 14px;
}
#content .download .down-list .down-item .down-img {
  display: none;
  width: 30px;
  height: 30px;
  margin-left: 12px;
}
#content .download .down-list .down-item:hover {
  background: #00363E;
}
#content .download .down-list .down-item:hover .down-img {
  display: block;
}
@media (min-width: 860px) and (max-width: 1200px) {
  #content .top-game .game-list {
    grid-template-columns: repeat(4, minmax(100px, 1fr));
  }
  #content .top-game .game-list .game-item .img-box {
    width: 100%;
  }
  #content .best-game .game-list {
    grid-template-columns: repeat(8, minmax(10px, 1fr));
  }
  #content .cate .cate-list {
    grid-template-columns: repeat(6, minmax(10px, 1fr));
  }
  #content .download .down-list {
    grid-template-columns: repeat(3, minmax(10px, 1fr));
  }
}
@media (min-width: 750px) and (max-width: 859px) {
  #content .top-game .game-list {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }
  #content .top-game .game-list .game-item .img-box {
    width: 100%;
  }
  #content .best-game .game-list {
    grid-template-columns: repeat(5, minmax(10px, 1fr));
  }
  #content .cate .cate-list {
    grid-template-columns: repeat(3, minmax(10px, 1fr));
  }
  #content .download .down-list {
    grid-template-columns: repeat(2, minmax(10px, 1fr));
  }
}
@media (min-width: 560px) and (max-width: 749px) {
  #content .top-game .game-list {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }
  #content .top-game .game-list .game-item .img-box {
    width: 100%;
  }
  #content .best-game .game-list {
    grid-template-columns: repeat(5, minmax(10px, 1fr));
  }
  #content .cate .cate-list {
    grid-template-columns: repeat(3, minmax(10px, 1fr));
  }
  #content .download .down-list {
    grid-template-columns: repeat(2, minmax(10px, 1fr));
  }
}
@media (min-width: 0px) and (max-width: 559px) {
  #content .top-game .game-list {
    grid-template-columns: repeat(1, minmax(100px, 1fr));
  }
  #content .top-game .game-list .game-item .img-box {
    width: 100%;
  }
  #content .best-game .game-list {
    grid-template-columns: repeat(3, minmax(10px, 1fr));
  }
  #content .cate .cate-list {
    grid-template-columns: repeat(2, minmax(10px, 1fr));
  }
  #content .download .down-list {
    grid-template-columns: repeat(1, minmax(10px, 1fr));
  }
}