div::-webkit-scrollbar {
  display: none;
}

div::-webkit-scrollbar {
  display: none;
}

/* 
css sprite 
 */
:root {
  /* IconSpriteRemWidth */
  --isrw: 47px;
  /*--isrw: 0.48rem;*/
  /* StarSpriteRemWidth */
  --ssrw: 0.13rem;
}

.sprite-icon {
  background: url(/images/img.png) no-repeat;
  background-size: 38.5px auto;
}

.bottom-tag-item-s>div:nth-child(1) {
  height: var(--isrw);
  width: var(--isrw);
  margin-top: 0.18rem;
}

.bottom-tag-item>div:nth-child(1) {
  /*height: var(--isrw);*/
  /*width: var(--isrw);*/
  /*margin-top: 0.18rem;*/
  width: 23px;
  height: 25px;
}

.icon-home {
  background-position: 0 calc(var(--isrw) / 2 * -4);
}

.icon-home-s {
  background-position: 0 calc(var(--isrw) / 2 * -3);
}

.icon-app {
  background-position: 0 calc(var(--isrw) / 2 * -5);
}

.icon-app-s {
  background-position: 0 calc(var(--isrw) / 2 * -7);
}

.icon-game {
  background-position: 0 0;
}

.icon-game-s {
  background-position: 0 calc(var(--isrw) / 2 * -2);
}

.icon-article {
  background-position: 0 calc(var(--isrw) / 2 * -6);
}

.icon-article-s {
  background-position: 0 calc(var(--isrw) / 2 * -1);
}

.video-star-box>div {
  height: 20px;
  width: 20px;
  background-size: 50px auto;
  font-size: 0.6rem;
}

.rated-games-star-box>div {
  height: 12px;
  width: 12px;
  background-size: 34px;
}

.icon_star {
  background-position: calc(-1 * var(--isrw) * 59 / 50 / 2) 0;
}

.icon_star_0 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-1 * 0.24rem / 2);
}

.icon_star_1 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-2 * 0.24rem / 2);
}

.icon_star_2 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-3 * 0.24rem / 2);
}

.icon_star_3 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-4 * 0.24rem / 2);
}

.icon_star_4 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-5 * 0.24rem / 2);
}

.icon_star_5 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-6 * 0.24rem / 2);
}

.icon_star_6 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-7 * 0.24rem / 2);
}

.icon_star_7 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-8 * 0.24rem / 2);
}

.icon_star_8 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-9 * 0.24rem / 2);
}

.icon_star_9 {
  background-position: calc(-1 * var(--isrw) * 24 / 26 / 2) calc(-10 * 0.24rem / 2);
}



.card2-star-box>.icon_star {
  background-position: calc(-1 * var(--isrw) * 59 / 50 / 2) 0;
}

.card2-star-box>.icon_star_0 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-1 * 0.16rem);
}

.card2-star-box>.icon_star_1 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-2 * 0.16rem);
}

.card2-star-box>.icon_star_2 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-3 * 0.16rem);
}

.card2-star-box>.icon_star_3 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-4 * 0.16rem);
}

.card2-star-box>.icon_star_4 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-5 * 0.16rem);
}

.card2-star-box>.icon_star_5 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-6 * 0.16rem);
}

.card2-star-box>.icon_star_6 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-7 * 0.16rem);
}

.card2-star-box>.icon_star_7 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-8 * 0.16rem);
}

.card2-star-box>.icon_star_8 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-9 * 0.16rem);
}

.card2-star-box>.icon_star_9 {
  background-position: calc(-1 * var(--isrw) * 16 / 26) calc(-10 * 0.16rem);
}

/*phone  菜单样式*/
.top-nav-box {
  background-color: #296df4;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 48px;
}


.top-nav-row1 {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 48px;
}

.top-nav-menu>img {
  width: 20px;
  height: 15px;
  margin-left: 18px;
  margin-top: 18px;
}

.top-nav-logo {
  margin: auto 20vw;
}

.top-nav-open {
  width: 100%;
  position: fixed;
  top: 0rem;
  left: 0px;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.3);
}

.top-nav-list {
  width: 80%;
  background-color: #ffffff;
}

.top-nav-search-open-btn, .top-nav-search-close-btn {
  position: absolute;
  width: 46px;
  height: 46px;
  right: 4px;
  background-color: transparent;
  border: none;
  outline: none;
}

.top-nav-search-close-btn {
  display: none;
}

.top-nav-search-search, .top-nav-search-close {
  margin-top:8px;
  filter: invert(100%);
}

.top-nav-box .bottom-search {
  display: none;
}

.bottom-search form {
  display: flex;
  border: none;
  border-radius: 4px;
  padding: 0 0.12rem;
  margin: auto 16px;
  background-color: white;
  height:32px;
}

.bottom-search input {
  border:none;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
}

.bottom-search .search-btn {
  width: 24px;
  height: 24px;
  margin-top: 0.05rem;
}

.slide-out-left {
  -webkit-animation: slide-out-left 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: slide-out-left 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}

@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}

.slide-in-fwd-left {
  -webkit-animation: slide-in-fwd-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-fwd-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-fwd-left {
  0% {
    -webkit-transform: translateZ(-1400px) translateX(-1000px);
    transform: translateZ(-1400px) translateX(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateZ(0) translateX(0);
    transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-fwd-left {
  0% {
    -webkit-transform: translateZ(-1400px) translateX(-1000px);
    transform: translateZ(-1400px) translateX(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateZ(0) translateX(0);
    transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}

.transparency {
  display: none;
}

.hoverWrapMenu {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.hoverWrapMenuLabel {
  height: 50px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.top-nav-logo-open {
  margin-left: 30px;
  padding-top: 30px;
}

.top-nav-logo-open>img {
  object-fit: cover;
  display: flex;
}

.top-tag-box {
  width: 7.5rem;
  height: 1.16rem;
  top: 1rem;
  margin-left: 1rem;
}

.bottom-tag-item {
  display: flex;
  width: 100%;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  margin-left: 30px;
}

.bottom-tag-item .icon-text {
  margin-left: 15px;
  margin-top: 4px;
}

.bottom-tag-item-s {
  display: flex;
  font-weight: bold;
  width: 0.9rem;
  height: 1.16rem;
  line-height: 1rem;
  /*color: #2EC2CA;*/
  /*font-size: 0.3rem;*/
}

.bottom-tag-icon {
  width: 0.48rem;
  height: 0.48rem;
  margin-top: 0.18rem;
  /*font-size: 0.2rem;*/
  margin-top: 0.5rem;
}

.hoverWrapMenuLabelActive {
  background: rgba(41, 109, 243, 0.1);
}

.top-first-icon {
  height: 16px;
  color: #333333;
  margin-right: 10px;
  margin-left: 12px;
  background-size: 30px auto !important;
  background-position: 0 -55px !important;
  padding-bottom: 4px;
}

.icon_next {
  width: 10px;
  height: 10px;
  background-position: -25px -171px;
  margin-right: 8px;
}

.path-box {
  width: 100vw;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-top: 10px;
  justify-content: flex-start;
  height: 24px;
  font-size: 14px;
}

.path-title {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
  white-space: nowrap;
  font-size: 14px;
  color: #333333;
}

.page-bottom-box {
  width: 100%;
  height: 60px;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: 16px;
  background: #ffffff;
}

/* .page-bottom-box>img {
  display: none;
} */

.page-bottom-logo {
  width: 5.66rem;
  height: 1.5rem;
  margin-top: 0.5rem;
}

.page-bottom-links {
  height: 40px;
  line-height: 40px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 10px;
}

.page-bottom-link {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0.02rem;
}

body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  margin: 0;
  background: #f5f7f8;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
}

body.popup-open {
  position: fixed;
}

img {
  object-fit: cover;
  display: flex;
}

a {
  text-decoration: none;
}

/* .page-center {
	width: 19.2rem;
	margin: 0 auto;
	min-height: 100vh;
	height: auto;
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: flex-end;
} */

.page-box {
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  height: auto;
}

.top-header {
  width: 7.5rem;
  height: 1.12rem;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  display: none;
}

.top-logo {
  width: 2.66rem;
  height: 0.5rem;
}

.bottom-tag-box {
  /*width: 7.5rem;*/
  /*height: 1.16rem;*/
  display: none;
  /*flex-flow: row nowrap;*/
  /*align-items: flex-start;*/
  /*justify-content: space-around;*/
  /*position: fixed;*/
  /*bottom: 0;*/
  /*left: 50%;*/
  /*margin-left: -3.75rem;*/
  /*background-color: #FFFFFF;*/
  /*z-index: 999999;*/
  /*border-top: 1px solid rgba(0,0,0,0.07);*/
}

/*.bottom-tag-item{*/
/*	width: 0.9rem;*/
/*	height: 1.16rem;*/
/*	display: flex;*/
/*	flex-flow: column nowrap;*/
/*	align-items: center;*/
/*	justify-content: flex-start;*/
/*	color: rgba(0, 0, 0, 0.6);*/
/*	font-size: 0.24rem;*/
/*}*/
/*.bottom-tag-item-s{*/
/*	width: 0.9rem;*/
/*	height: 1.16rem;*/
/*	display: flex;*/
/*	flex-flow: column nowrap;*/
/*	align-items: center;*/
/*	justify-content: flex-start;*/
/*	color: #2EC2CA;*/
/*	font-size: 0.24rem;*/
/*}*/
/*.bottom-tag-icon{*/
/*	width: 0.48rem;*/
/*	height: 0.48rem;*/
/*	margin-top: 0.18rem;*/
/*	*/
/*}*/

.list-header-box {
  height: 48px;
  line-height: 48px;
  width: 96%;
  margin: 12px auto 6px px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}

.list-header-line {
  width: 2px;
  height: 24px;
  margin-right: 0.2rem;
  background-color: #296df4;
}

.list-header-title {
  flex: 1;
  height: 24px;
  line-height: 24px;
  color: #3d3d3d;
  font-weight: bold;
  font-size: 14px;
  margin-left: 5px;
}

.list-header-more {
  height: 24px;
  font-size: 24px;
  color: #296df4;
  line-height: 24px;
  margin-bottom: 12px;
}

.list-header-bottom-line {
  display: none;
}

.icon1-box {
  height: 100%;
  width: 100%;
  overflow-x: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
}

.icon1-a-box {
  height: 100%;
  width: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}

.icon1-a {
  width: 64px;
  height: 64px;
  margin-left: 12px;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
}

.icon1-a-title {
  display: none;
}

.icon1-img {
  width: 64px;
  height: 64px;
}

.icon1-a:first-child {
  margin-left: 16px;
}

.icon1-a:last-child {
  margin-right: 16px;
}

.card1-item-box {
  height: auto;
  width: 94%;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.card1-item {
  width: 94%;
  height: 145px;
  border-radius: 16px;
  border: 1px solid #dedede;
  margin: 8px auto;
  /*display: flex;*/
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: space-around;
  position: relative;
  background-color: #ffffff;
  display: none;
}

.card1-item:nth-child(1) {
  display: flex;
}

.card1-item:nth-child(2) {
  display: flex;
}

.card1-tag {
  width: 45%;
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  font-weight: bold;
  color: #296df4;
  margin-left: 24px;
  font-style: italic;
}

.card1-title {
  width: 56%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
  font-weight: bold;
  color: #333333;

  margin-left: 24px;
}

.card1-text {
  width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-family: Roboto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  color: #3d3d3d;
  margin-left: 24px;
}

.card1-img {
  position: absolute;
  /*top: 56px;*/
  right: 46px;
  width: 72px;
  height: 72px;
  border-radius: 5px;
}

.articles-box {
  width: 100%;
  height: 100%;
  overflow-x: auto;
}

.articles-a-box {
  width: fit-content;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}

.articles-a {
  width: 214px;
  height: 160px;
  margin-left: 16px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
}

.articles-a:first-child {
  margin-left: 16px;
}

.articles-a:last-child {
  margin-right: 16px;
}

.articles-img {
  width: 214px;
  height: 107px;
  border-radius: 8px;
}

.articles-text {
  width: 200px;
  line-height: 20px;
  margin-top: 5px;
  font-size: 16px;
  color: #333333;
  font-weight: normal;
  text-align: left;
  display:  -webkit-box;;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-box {
  height: 100%;
  width: 100%;
  overflow-x: auto;
  margin-bottom: 16px;
}

.video-item-box {
  margin-left: 15px;
  width: fit-content;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}

.video-item {
  width: 306px;
  height: 70px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.video-image {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}

.video-content {
  margin-left: 20px;
  width: 180px;
}

.video-title {
  height: 20px;
  line-height: 20px;
  color: #333333;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-weight: bold;
}

.video-text {
  height: 14px;
  line-height: 14px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.video-sum {
  color: #3d3d3d;
  margin-left: 0px;
}

.video-star-box {
  width: 25%;
  height: 36px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.tag-item-box {
  width: 92%;
}

.tag-item {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 16px;
}

.tag-title {
  width: 100%;
  /* height: 24px; */
  font-size: 16px;
  font-weight: normal;
  color: #333333;
  line-height: 24px;
  margin-top: 5px;
}

.tag-image {
  max-width: 412px;
  width: 100%;
  margin: auto;
  height: 100%;
  border-radius: 16px;
}

.card3-box {
  width: 100%;
  height: auto;
  overflow-x: auto;
}

.card3-item-box {
  width: fit-content;
  min-width: 100%;
  height: auto;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: flex-start;
}

.card3-item {
  width: 94%;
  height: 94%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  /* margin-left: 0.16rem; */
  margin-bottom: 24px;
}

.card3-item:nth-child(1) {
  margin-left: 20px;
}

.card3-item:nth-child(2) {
  margin-left: 20px;
}

.card3-item:nth-child(3) {
  margin-left: 20px;
}

.card3-item:nth-child(4) {
  margin-left: 20px;
}

.card3-item:nth-child(5) {
  margin-left: 20px;
}

.card3-item:nth-child(6) {
  margin-left: 20px;
}

.card3-item:last-child {
  margin-left: 20px;
}

.card3-image {
  max-width: 412px;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  margin: auto;
}

.card3-title {
  width: 100%;
  line-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  color: #000000;
}

.categories-box {
  width: 96%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
  margin: 8px auto -12px;
  align-items: flex-start;
  justify-content: space-between;
  align-content: flex-start;
}

.categories-box::after {
  height: 0;
  width: 3.28rem;
  content: '';
}

.categories-item {
  width: 49%;
  height: 54px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  background: #ffffff;
  border-radius: 4px;
  margin-bottom: 12px;
}

.categories-image {
  max-width: 0.72rem;
  margin-left: 23px;
  margin-right: 12px;
}

.categories-right {
  /* width: 1.7rem; */
  /* margin-right: 10px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  max-height: 80px;
  line-height: 20px;
}

.rated-games-box {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  margin-top: 8px;
}

.card2-star-box {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  position: relative;
  margin-right: 6px;
}

.card2-star-box>img {
  width: 15px;
  margin-right: 5px;
}

.card2-star-sum {
  font-size: 14px;
  color: #333333;
}

.rated-games-item-box {
  width: fit-content;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}

.rated-games-item {
  margin-left: 12px;
  height: 140px;
  width: 98px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;
}

.rated-games-item:first-child {
  margin-left: 16px;
}

.rated-games-item:last-child {
  padding-right: 16px;
}

.rated-games-image {
  width: 98px;
  height: 98px;
  border-radius: 16px;
}

.rated-star-sum {
  font-size: 14px;
  color: #3d3d3d;
  text-align: center;
  margin-left: 5px;
}

.rated-games-name {
  font-size: 14px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 20px;
  line-height: 20px;
  color: #000000;
}

.rated-games-star-box {
  width: 90px;
  height: 18px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  position: relative;
}

.popular-apps-box {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  margin-top: 8px;
}

.popular-apps-item-box {
  width: fit-content;
  height: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.popular-apps-item {
  width: 64px;
  height: 64px;
  margin-left: 12px;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}

.popular-apps-item:last-child {
  margin-right: 0.24rem;
}

.popular-apps-image {
  width: 64px;
  height: 64px;
  border-radius: 8px;
}

.popular-apps-title {
  display: none;
}

.card1-label-box {
  display: none;
}

.search-panel {
  display:none;
}

.list-header-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: .5rem
}

.path-title:last-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 0
}

.path-title {
  margin-right: .1rem
}

.games-box {
  width: 100%;
  height: auto;
  overflow-x: auto;
}

.games-item-box {
  height: 470px;
  min-width: 100%;
  width: fit-content;
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: flex-start;
}

.games-item {
  /*width: 88%;*/
  height: 82px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  margin-left: 16px;
  margin-right: 16px;
}

.games-image {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  margin-right: 12px;
}

.games-right {
  width: 200px;
  /* height: 178px; */
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
}

.games-name {
  height: 24px;
  width: 150px;
  line-height: 24px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
}

.games-type {
  width: 150px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  color: #296df4;
  margin-top: 4px;
}

.games-text {
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.6);
}

.games-btn {
  width: 56px;
  height: 24px;
  margin-top: 10px;
  border-radius: 15px;
  border: 1px solid #999999;
}

.games-btn-img {
  margin: 0 auto;
  margin-top: 6px;
}

div {
  overflow: visible
}

body {
  width: 100%;
  margin: 0;
  background: #fff;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
}

img {
  object-fit: cover;
  display: flex;
  max-width: 100%
}

a {
  text-decoration: none
}

ul {
  padding: 0;
  list-style: none
}

/* 面包屑-移动 */
.path-box {
  width: 100vw;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-top: 10px;
  justify-content: flex-start;
  height: 24px;
  font-size: 14px;
}

.top-first-icon {
  height: 16px;
  color: #333333;
  margin-right: 10px;
  margin-left: 12px;
  background-size: 30px auto !important;
  background-position: 0 -55px !important;
  padding-bottom: 4px;
}

.path-title {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 10px;
  white-space: nowrap;
  font-size: 14px;
  color: #333333;
}

/* app-移动 */
.games-title-apps {
  height: 48px;
  width: 95%;
  line-height: 48px;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
}

.games-box-apps {
  width: 90%;
  height: auto;
  overflow-x: visible;
}

.games-item-box-apps {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
  align-content: flex-start;
}

.games-item-apps {
  width: 100%;
  height: 100px;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 8px;
  position: relative;
}

.games-image-apps {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  position: absolute;
  left: 0rem;
  top: 12px;
}

.games-name-apps {
  height: 20px;
  width: 50%;
  line-height: 18px;
  color: rgba(0, 0, 0, 1);
  font-size: 16px;
  font-weight: bold;
  margin-left: 96px;
  margin-top: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-type-apps {
  width: 50%;
  height: 18px;
  line-height: 14px;
  font-size: 12px;
  margin-top: 4px;
  margin-left: 96px;
  color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-btn-apps {
  width: 74px;
  height: 24px;
  margin-top: 5px;
  margin-left: 96px;
  border-radius: 12px;
  border: 1px solid #999999;

  font-size: 14px;
  text-align: center;
}

.games-btn-img-apps {
  margin: 0 auto;
  height: 16px;
  margin-top: 4px;
}

.games-label-apps {
  width: 50%;
  height: 18px;
  line-height: 16px;
  font-size: 12px;
  margin-left: 96px;
  margin-top: 4px;
  color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.games-right-line-apps {
  display: none;
}

/* 广告位 UI（对齐 weball-nuxt：.ads / .ads-title / .ad-afc） */
.ads {
  height: auto !important;
}

.ads-block {
  margin-bottom: 16px;
}

.ads .ads-title {
  font-size: 12px;
  text-align: center;
  margin-bottom: 1px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.4;
}

.ads .ad-afc {
  background-color: #d9d9d9;
  width: 100%;
  min-height: 260px;
  display: block;
}

.ads-main .ad-afc {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 广告 */
.ad-box-mobile-1,
.ad-box-mobile-2 {
  width: 100%;
  margin-top: 12px;
}

.ad-box-pc-1,
.ad-box-pc-2,
.ad-box-pad-1,
.ad-box-pad-2 {
  width: 0;
  left: 0;
  overflow: hidden;
  display: none;
}

/* 文章-移动 */
.article-des-box {
  width: 92%;
  margin-top: 13px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.article-des-item {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  /* border-radius: 8px; */
  overflow: hidden;
  position: relative;
  background-color: #ffffff;
  margin-bottom: 8px;
  margin-top: 8px;
}

.article-image {
  width: 100%;
  max-width: 412px;
  height: calc(92vw * 0.385);
  border-radius: 8px;
}

.article-title {
  width: 100%;
  line-height: 20px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold;
  margin-top: 15px;
}

.article-more {
  position: absolute;
  right: 16px;
  bottom: 35px;
  font-size: 12px;
  color: #296df4;
  font-weight: bold;
}

.recommend-article-box {
  width: 92%;
  margin-top: 12px;
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-between;
}

.recommend-article-item {
  width: 100%;
  height: 71px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.recommend-article-image {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-right: 20px;
}

.recommend-article-title {
  width: 68%;
  height: 30px;
  margin-right: 43px;
  margin-bottom: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 12px;
}

.recommend-article-more {
  position: absolute;
  bottom: 8px;
  left: 86px;
  font-size: 12px;
  color: #296df4;
  height: 17px;
  line-height: 17px;
}

/* 分页 */

.pagination ul {
  display: flex;
  justify-content: flex-start;
  padding-inline-start: 0px;
}

.pagination li {
  list-style: none;
  margin-right: 8px;
}

.pagination a {
  min-width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  font-size: 12px;
  border-radius: 2px;
  text-align: center;
  padding: 0 0.4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination a:hover,
.pagination a:active,
.pagination a:visited,
.pagination a:link,
.pagination a:focus {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  color: black;
}

.pagination a.pagination-current {
  background: #444;
  color: white;
  cursor: default;
}

.pagination a.pagination-endpoint {
  cursor: default;
  visibility: hidden;
}

@-webkit-keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}

@keyframes slide-out-left {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(-1000px);
    transform: translateX(-1000px);
    opacity: 0;
  }
}

.slide-in-fwd-left {
  -webkit-animation: slide-in-fwd-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-in-fwd-left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-in-fwd-left {
  0% {
    -webkit-transform: translateZ(-1400px) translateX(-1000px);
    transform: translateZ(-1400px) translateX(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateZ(0) translateX(0);
    transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-fwd-left {
  0% {
    -webkit-transform: translateZ(-1400px) translateX(-1000px);
    transform: translateZ(-1400px) translateX(-1000px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateZ(0) translateX(0);
    transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}

.card2-box {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  margin-bottom: 12px;
}

.card2-item-box {
  width: fit-content;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}

.card2-item {
  margin-left: 16px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
}

.card2-item:first-child {
  margin-left: 16px;
}

.card2-item:last-child {
  margin-right: 0.34rem;
}

.card2-img {
  width: 88px;
  height: 88px;
  border-radius: 8px;
}

.card2-title {
  width: 90px;
  /* height: 0.4rem; */
  line-height: 30px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.87);
  /* line-height: 0.4rem; */
  margin-bottom: 0.04rem;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.card2-text {
  font-size: 12px;
  font-family: Roboto;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  margin-bottom: 4px;
  color: #333333;
}

.card2-star-box {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  position: relative;
  right: 3px;
}

.card2-star-sum {
  font-size: 14px;
  color: #3d3d3d;
  text-align: center;
  margin-left: 5px;
}