body::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url(../images/index/header_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 80px;
  display: none;
}

/* pc���馹狗����膣� */
@media (min-width: 768px) {
  body::before {
    display: block;
  }

  .header .search-block {
    display: none;
  }
}

/* 莉��㊥┴綛� */
.swiper {
  border-radius: 10px;
  overflow: hidden;
}

/* ��膣� */
.search-box {
  /* max-width: 804px; */
  margin: 40px auto;
  align-items: center;
}

.search-box .search-input-block {
  max-width: 804px;
  position: relative;
  width: 100%;
}

.search-box .search-input-block .search-input {
  width: 100%;
  padding-right: 90px;
  height: 50px;
  background: rgba(79, 78, 74, 0.42);
  border: 1px solid rgba(136, 136, 136, 0.66);
  color: var(--color-primary);
}

.search-box .search-input-block .search-input:focus {
  border-color: #fcb91ebd;
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px #fcb91e5c;
}

.search-box .search-input-block .search-input::placeholder {
  color: #b7b7b7;
  font-size: var(--font-size-small);
}

.search-box .search-input-block .search-btn {
  width: 61px;
  height: 46px;
  line-height: 46px;
  padding: 0;
  position: absolute;
  right: 2px;
  top: 2px;
}

.search-box .tag {
  min-height: 20px;
  line-height: 20px;
  border-radius: 9px;
  border: 1px solid #bfbfbf;
  margin-right: 10px;
  color: #bfbfbf;
  padding: 0 8px;
}

.search-box .tag:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* swiper����篆≧�� */
.recommend-box .recommend-box-swiper {
  height: 210px;
}

.recommend-box .recommend-box-item {
  border-radius: var(--border-radius-big);
  background: white;
  padding: 10px;
  border: 1px solid rgba(136, 136, 136, 0.13);
}

.recommend-box .banner_img {
  width: 100%;
  height: 125px;
  object-fit: cover;
  border-radius: var(--border-radius-big);
  margin-bottom: 20px;
}

.recommend-box .banner-info {
  color: var(--text-color-primary);
  font-size: var(--font-size-min);
}

.recommend-box .recommend-box-item:hover .banner-info {
  color: var(--color-primary);
}

.info-card .info-card-title {
  margin-bottom: 8px;
}

.link-line-height {
  line-height: 2.3;
}

/* �丞����� */
.recommend-wiki-img {
  width: 123px;
  height: 77px;
  margin-right: 18px;
  border-radius: var(--border-radius-big);
}

.recommend-wiki-list {
  counter-reset: section;
}

.recommend-wiki-list .recommend-wiki-link {
  margin-bottom: 12.2px;
}

.recommend-wiki-list .recommend-wiki-link::before {
  counter-increment: section;
  content: '';
  width: 26px;
  height: 32px;
  line-height: 28px;
  background-size: 26px 32px;
  background-repeat: no-repeat;
  padding-left: 32px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-big);
  font-weight: bold;
}

.recommend-wiki-list .recommend-wiki-link:nth-child(1)::before {
  background-image: url(../images/index/sort_1.png);
}

.recommend-wiki-list .recommend-wiki-link:nth-child(2)::before {
  background-image: url(../images/index/sort_2.png);
}

.recommend-wiki-list .recommend-wiki-link:nth-child(3)::before {
  background-image: url(../images/index/sort_3.png);
}

.recommend-wiki-list .recommend-wiki-link:nth-child(n + 4)::before {
  content: counter(section);
  padding-right: 25px;
  margin-left: -25px;
}

.recommend-ask-list .recommend-ask-link,
.recommend-topic-list .recommend-topic-link {
  margin-bottom: 18.6px;
  height: 25px;
  padding-left: 32px;
  background-repeat: no-repeat;
}

.recommend-ask-list .recommend-ask-link {
  background-image: url(../images/index/tag_ask.png);
  background-size: 24px 24px;
}

.recommend-topic-list .recommend-topic-link {
  background-image: url(../images/index/tag_topic.png);
  background-size: 24px 25px;
}

/************************************** ��膠紙�茵�紊у�∞�� ***********************/
/* 篆≧����茵� */
.type-card .recommend-title-bg {
  height: 90px;
  background-size: 160px 24px;
  background-repeat: no-repeat;
  background-position: 50% 45px;
  /* padding-left: 20px; */
  padding-top: 30px;
  margin-top: -20px !important;
  margin-bottom: 0 !important;
  margin-left: -20px;
  margin-right: -20px;
  /* display: flex; */
}

.type-card .football-title-bg {
  background-image: url(../images/index/football_title_bg.png);
}

.type-card .basketball-title-bg {
  height: 95px;
  background-image: url(../images/index/basketball_title_bg.png);
}

.type-card .type-card-tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: none;
}

.type-card .info-list {
  margin: 0;
  padding-left: 15px;
}

.type-card .info-list li {
  list-style: disc;
}

.type-card .info-list li::marker {
  color: var(--color-primary);
}

.type-card .info-list li>a {
  line-height: 2;
  font-size: var(--font-size-normal);
}

.type-card .card-title {
  font-size: 22px;
  margin-top: 0;
  margin-bottom: 28px;
  font-weight: bold;
  text-align: center;
  color: var(--color-primary);
}

.football-rank-box .card-title {
  color: #00b816;
}

.basketball-rank-box .card-title {
  color: #ff7200;
}

.type-card .rank-tags {
  margin-bottom: 30px;
}

.type-card .tags-name-box {
  position: relative;
  padding-right: 0;
}

.type-card .tags-name-box .tags-name {
  position: absolute;
  z-index: 1;
  top: 55px;
  left: 50%;
  margin-left: -32px;
  font-size: var(--font-size-normal);
  font-weight: bold;
  color: white;
}

.type-card .tags-name-box .tags-name-bg {
  width: 86px;
  height: 108px;
  margin-right: var(--space-huge);
  margin-left: -15px;
  margin-top: -15px;
}

.type-card .rank-tags-list {
  height: 100px;
  overflow: hidden;
  padding: 0 15px;
}

.type-card .tags-more {
  padding-left: 0;
  height: 100%;
}

.type-card .tags-more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  height: 100px;
  padding: 0;
  background-color: white;
  color: var(--color-text-primary);
  border: 1px solid rgba(225, 225, 225, 0.39);
  box-shadow: 0px 0px 9px 0px rgba(225, 225, 225, 0.39);
}

.type-card .tags-more-btn:hover {
  border-color: var(--color-primary);
}

.card-title-sub {
  margin-top: 15px;
  margin-bottom: 20px;
  font-weight: bold;
}

.card-title-more {
  margin-top: 15px;
  margin-bottom: 28px;
}

/* �����茵��∞�� */
.answers-card {
  display: block;
  margin-bottom: 25px;
  height: 90px;
}

.answers-card .answers-card-title {
  background-image: url(../images/index/tag_ask.png);
  background-size: 24px 24px;
  margin-bottom: 18.6px;
  height: 25px;
  line-height: 25px;
  padding-left: 32px;
  background-repeat: no-repeat;
}

.answers-card .answers-img {
  width: 28px;
  min-width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 50%;
}

.answers-card .text-ellipsis {
  margin-right: 20px;
}

.answers-card .text-ellipsis * {
  display: contents;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 14px;
}

/* ��茵�网��桁� */
.rank-block {
  margin-top: 5px;
}

.rank-block-tab {
  padding: 0 15px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 50px;
}

.rank-block-tab li {
  width: auto;
}

.rank-block-tab a {
  color: var(--text-color-primary);
}

.rank-block-tab li,
.rank-block-tab li:hover,
.rank-block-tab li:focus {
  font-size: var(--font-size-big);
  background: none;
}

.rank-block-tab>li>a {
  color: var(--color-text-secondary);
  position: relative;
}

.rank-block-tab>li>a:hover,
.rank-block-tab>li>a:focus {
  background: none;
  color: var(--text-color-primary);
}

.rank-block-tab>li.active>a,
.rank-block-tab>li.active>a:hover,
.rank-block-tab>li.active>a:focus {
  background: none;
  color: var(--text-color-primary);
  font-weight: bold;
}

.rank-block-tab>li.active>a::after {
  content: '';
  width: 23px;
  height: 5px;
  border-radius: 3px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
}

.rank-box {
  position: relative;
}

.rank-box::before {
  content: '';
  position: absolute;
  width: 100vw;
  height: 100%;
  left: calc(50% - 10px);
  top: 0;
  margin-left: -50vw;
  /* transform: translateX(-10px); */
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
}

.football-rank-box::before {
  background-image: url(../images/index/football_recommend_bg.jpg);
}

.basketball-rank-box::before {
  background-image: url(../images/index/basketball_recommend_bg.jpg);
}

.football-rank .rank-tags-list .rank-tags-item>div,
.basketball-rank .rank-tags-list .rank-tags-item>div {
  background-size: 47px 30px;
  background-repeat: no-repeat;
  background-position: 100% 0;
}

.football-rank .rank-tags-list .rank-tags-item>div {
  background-image: url(../images/index/tag_football.png);
}

.basketball-rank .rank-tags-list .rank-tags-item>div {
  background-image: url(../images/index/tag_basketball.png);
}

@media (min-width: 768px) {
  .rank-tags-list .rank-tags-item {
    width: 11.111%;
  }
}

.rank-block .rank-block-title {
  padding: 8px;
}

.rank-block .rank-block-title .sort-name {
  margin-right: 72px;
}

.rank-block .rank-block-list .item-num {
  color: transparent;
  font-size: var(--font-size-normal);
  width: 30px;
  height: 19px;
  text-align: center;
  line-height: 42px;
  background-size: 100%;
  background-repeat: no-repeat;
  margin-right: 20px;
}

.rank-block .rank-block-list .item:hover {
  background-color: var(--background-primary);
  border-radius: var(--border-radius-base);
}

.rank-block .rank-block-list .item:nth-child(1) .item-num,
.rank-block .rank-block-list .item:nth-child(2) .item-num,
.rank-block .rank-block-list .item:nth-child(3) .item-num {
  background-position: 0;
}

.rank-block .rank-block-list .item:nth-child(1) .item-num {
  background-image: url('../images/index/num_1.png');
}

.rank-block .rank-block-list .item:nth-child(2) .item-num {
  background-image: url('../images/index/num_2.png');
}

.rank-block .rank-block-list .item:nth-child(3) .item-num {
  background-image: url('../images/index/num_3.png');
}

.rank-block .rank-block-list .item:nth-child(4) .item-num {
  background-image: url('../images/index/num_4.png');
}

.rank-block .rank-block-list .item:nth-child(5) .item-num {
  background-image: url('../images/index/num_5.png');
}

.rank-block .rank-block-list .item:nth-child(6) .item-num {
  background-image: url('../images/index/num_6.png');
}

.rank-block .rank-block-list .item:nth-child(7) .item-num {
  background-image: url('../images/index/num_7.png');
}

.rank-block .rank-block-list .item:nth-child(8) .item-num {
  background-image: url('../images/index/num_8.png');
}

.rank-block .rank-block-list .item:nth-child(9) .item-num {
  background-image: url('../images/index/num_9.png');
}

.rank-block .rank-block-list .item:nth-child(10) .item-num {
  background-image: url('../images/index/num_10.png');
}

.rank-block .rank-block-list .item:nth-child(11) .item-num {
  background-image: url('../images/index/num_11.png');
}

.rank-block .rank-block-list .item:nth-child(12) .item-num {
  background-image: url('../images/index/num_12.png');
}

.rank-block .rank-block-list .item-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.rank-block .rank-block-list .item-info {
  width: 0;
  font-size: var(--font-size-normal);
}

.rank-block .rank-more-btn {
  padding: 10px;
}

.rank-block .rank-more-btn:hover {
  color: var(--color-primary);
}

/* ���堺�丞ず */
.phone-show {
  display: none;
}

.phone-show .nav-tabs {
  border: none;
}

.phone-show .nav-tabs .active a,
.phone-show .nav-tabs .active a:hover,
.phone-show .nav-tabs .active a:focus {
  border: none;
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: none;
}

.phone-show .rank-tab>.active>a {
  background-color: var(--color-primary) !important;
  color: white;
  border-radius: var(--border-radius-huge);
}

.swiper-button-prev:after,
.swiper-button-next:after {
  background: rgba(0, 0, 0, 0.7);
}

.swiper-button-next[aria-disabled='true']:after,
.swiper-button-prev[aria-disabled='true']:after {
  opacity: 0.5;
}

/* 藜��������倶�丞ず蘂��� */
.swiper-button-next:after:hover,
.swiper-button-prev:after:hover {
  background-color: var(--color-primary);
}

.list-content {
  width: 85%;
}

.page-view {
  width: 37px;
  font-size: 12px;
  color: #999;
}

.page-view img {
  width: 16px;
}

.left-big-box {
  padding: 20px 20px 10px;
}

@media (min-width: 767px) {
  .block-width-55 {
    width: 55.26315789473685%;
  }

  .block-width-44 {
    width: 44.73684210526315%;
  }

  .block-width-35 {
    width: 35.65217391304348%;
  }

  .block-width-64 {
    width: 64.34782608695653%;
  }
}

@media screen and (max-width: 767px) {
  .phone-hide {
    display: none;
  }

  .phone-show {
    display: block;
  }

  .phone-padding-0 {
    padding: 0;
  }

  .remove-padding-left {
    padding-left: 0;
  }

  .banner_img {
    padding-bottom: 0;
  }

  .recommend-game-nav {
    order: 2;
    margin-top: 5px;
    margin-bottom: -15px;
  }

  .recommend-box {
    padding: 0;
    order: 1;
  }

  .recommend-box .recommend-box-swiper {
    margin-top: 0;
  }

  .nav-tag-list {
    gap: 10px;
    font-size: var(--font-size-small);
  }

  .nav-tag-list .nav-tag-item {
    flex-direction: column;
  }

  .nav-tag-list .nav-tag-item .nav-icon {
    margin-right: 0;
    width: 38px;
    height: 30px;
    margin-bottom: 5px;
  }

  .tags-name-box {
    display: none;
  }

  .answers-list {
    padding: 10px;
  }
}

@media screen and (max-width: 350px) {
  .nav-tag-list .nav-tag-item {
    font-size: var(--font-size-min);
  }

  .nav-tag-list .nav-tag-item .nav-icon {
    width: 29px;
    height: 23px;
  }

  .nav-tabs>li>a {
    font-size: var(--font-size-min);
  }
}