@charset "UTF-8";

.progress-wrap {
  position: fixed;
  right: 50px;
  bottom: 50px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.progress-wrap::after {
  position: absolute;
  font-family: "unicons";
  content: "↑";
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  color: #595561;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap:hover::after {
  opacity: 0;
}

.progress-wrap::before {
  position: absolute;
  font-family: "unicons";
  content: "↑";
  text-align: center;
  line-height: 46px;
  font-size: 24px;
  opacity: 0;
  background-image: linear-gradient(298deg, #da2c4d, #f8ab37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

.progress-wrap:hover::before {
  opacity: 1;
}

.progress-wrap svg path {
  fill: none;
}

.progress-wrap svg.progress-circle path {
  stroke: #981f41;
  stroke-width: 4;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}

body.light .progress-wrap {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
}

body.light .progress-wrap::after {
  color: #1f2029;
}

body.light .progress-wrap svg.progress-circle path {
  stroke: #1f2029;
}

body.nav-open .nav-toggle {
  position: absolute;
  top: 0;
  box-shadow: none;
}

body.nav-open .nav-toggle:before {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: #2d85c7;
}

body.nav-open .nav-toggle .icon {
  width: 0;
}

body.nav-open .nav-toggle .icon:before {
  -webkit-transform: translateY(0.09rem) rotate(45deg);
  -ms-transform: translateY(0.09rem) rotate(45deg);
  transform: translateY(0.09rem) rotate(45deg);
}

body.nav-open .nav-toggle .icon:after {
  -webkit-transform: translateY(-0.09rem) rotate(-45deg);
  -ms-transform: translateY(-0.09rem) rotate(-45deg);
  transform: translateY(-0.09rem) rotate(-45deg);
}

.nav-toggle {
  width: 0.6rem;
  height: 0.6rem;
  z-index: 2;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  box-shadow: 0 0.03rem 0 rgba(0, 0, 0, 0.2);
  -webkit-transition-duration: 0.66s;
  transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
  transition-timing-function: swing;
}

.nav-toggle:before {
  width: 0.6rem;
  height: 0.6rem;
  content: "";
  -webkit-transition-duration: 0.66s;
  transition-duration: 0.66s;
  -webkit-transition-timing-function: swing;
  transition-timing-function: swing;
}

.nav-toggle .icon {
  width: 0.3rem;
  height: 0.04rem;
  background-color: white;
  border-radius: 0.02rem;
  position: absolute;
  top: 0.28rem;
  left: 0.15rem;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  transiting-timing-function: swing;
}

.nav-toggle .icon:before,
.nav-toggle .icon:after {
  width: 0.3rem;
  height: 0.04rem;
  background-color: white;
  border-radius: 0.02rem;
  content: "";
  position: absolute;
  left: 0;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: swing;
  transition-timing-function: swing;
}

.nav-toggle .icon:before {
  top: -0.09rem;
}

.nav-toggle .icon:after {
  top: 0.09rem;
}

.footer {
  position: relative;
}

.footer .triangle_yellow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 165px;
  /*background: url(../public/image/triangle_yellow.png) no-repeat;*/
  background-size: 100% 100%;
  user-select: none;
}

.footer .triangle_red {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 165px;
  background: url(../public/image/triangle_red.png) no-repeat;
  background-size: 100% 100%;
  user-select: none;
}

.footer .triangle_blue {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 165px;
  background: url(../public/image/triangle_blue.png) no-repeat;
  background-size: 100% 100%;
  user-select: none;
}

.footer .rectangle {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  min-height: 300px;
  background: url(../public/image/rectangle.png) no-repeat;
  background-size: 100% 100%;
  padding: 150px 0 50px;
  user-select: none;
}

.footer .rectangle .links {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 30px;
}

.footer .rectangle .links .link_column {
  padding: 0 20px;
  border-right: 1px solid #f3f7fb;
}

.footer .rectangle .links .link_column:last-child {
  border-right: none;
}

.footer .rectangle .links .link_column strong {
  font-weight: bold;
  color: #f3f7fb;
  margin-bottom: 20px;
}

.footer .rectangle .links .link_column ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.footer .rectangle .links .link_column ul li {
  display: flex;
  align-items: center;
}

.footer .rectangle .links .link_column ul li a {
  color: #f3f7fb;
}

.footer .rectangle .links .link_column ul li strong {
  color: #f3f7fb;
}

.footer .rectangle .links .link_column ul li .svgCode {
  width: 150px;
}

.footer .rectangle .regard {
  color: #fff;
  text-align: center;
  line-height: 24px;
}

.footer .rectangle .regard a {
  color: #fff;
}

.footer .rectangle .regard img {
  width: 160px;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {

  .footer .triangle_red,
  .footer .triangle_yellow {
    height: 1.65rem;
  }

  .footer .triangle_blue {
    height: 2.1rem;
  }

  .footer .triangle_blue {
    top: 0.4rem;
  }

  .footer .rectangle {
    top: 0.4rem;
    min-height: 3rem;
    padding: 1.5rem 0 0.5rem;
  }

  .footer .rectangle .links {
    grid-template-columns: auto;
    gap: 0.2rem;
    margin-bottom: 0.3rem;
  }

  .footer .rectangle .links .link_column {
    padding: 0 0.1rem;
  }

  .footer .rectangle .links .link_column strong {
    margin-bottom: 0.1rem;
  }

  .footer .rectangle .links .link_column ul {
    gap: 0.1rem;
  }

  .footer .rectangle .links .link_column ul li .svgCode {
    width: 2rem;
  }

  .footer .rectangle .regard {
    line-height: 0.24rem;
  }

  .footer .rectangle .regard img {
    width: 1.6rem;
  }
}

body.ovfHiden {
  overflow: hidden;
  height: 100vh;
}

body.nav-open .head_nav {
  display: block;
  z-index: 9;
}

.header {
  width: 100%;
  height: 278px;
  background: url(../public/image/herder_bg.png) no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
}

.header .head_top {
  height: fit-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.header .head_top .logo {
  width: 100px;
}

.header .head_top .logo a img {
  width: 100%;
}

.header .head_top .nav-toggle {
  display: none;
}

.header .head_nav {
  width: 100%;
  height: fit-content;
  background: rgba(25, 46, 88, 0.3);
}

.header .head_nav ul {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.header .head_nav ul li {
  height: 80px;
  border-left: 1px solid #0f2245;
}

.header .head_nav ul li:first-child {
  border-left: none;
}

.header .head_nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #e6fdff;
  font-size: 18px;
  font-weight: bold;
}

.header .head_nav ul li:hover {
  background: rgba(25, 46, 88, 0.3);
}

.header .head_nav ul li.active {
  background: #981f41;
}

@media screen and (max-width: 1000px) {
  .header {
    height: 378px;
  }
}

@media screen and (max-width: 768px) {
  .header {
    height: 2.8rem;
  }

  .header .head_top {
    padding: 0.1rem 0 0.05rem;
  }

  .header .head_top .logo {
    width: 1rem;
    transform: translateX(35%);
    margin: 0 auto;
  }

  .header .head_top .nav-toggle {
    display: block;
  }

  .header .head_nav {
    display: none;
    position: absolute;
    animation: menuAppear 0.7s ease-in-out forwards;
  }

  .header .head_nav ul {
    position: absolute;
    top: 0;
    grid-template-columns: auto;
  }

  .header .head_nav ul li {
    height: fit-content;
    padding: 0.2rem;
    border: 0;
    opacity: 0.5;
  }

  .header .head_nav ul li a {
    justify-content: start;
    font-size: 0.18rem;
  }

  .header .head_nav ul li.active {
    background: #981f41;
    opacity: 1;
  }

  @keyframes menuAppear {
    0% {
      transform: translateY(100vh);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

/* 赛事赛程 */
.schedule {
  width: 100%;
  height: fit-content;
  padding: 40px 0 80px;
}

.schedule .schedule_list {
  width: 100%;
  height: 876px;
  overflow: hidden;
  background: #fff;
}

@media screen and (max-width: 768px) {
  .schedule {
    padding: 0.4rem 0 0.8rem;
  }

  .schedule .schedule_list {
    height: 8.76rem;
  }
}

/* 热门球队 */
.hot_team {
  width: 100%;
  height: fit-content;
  padding: 40px 0 80px;
  background: url(../public/image/hot_team_bg.png) no-repeat;
  background-size: 100% 100%;
}

.hot_team .team_record {
  width: 100%;
  height: fit-content;
}

.hot_team .team_record ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px 25px;
}

.hot_team .team_record ul li {
  width: 100%;
  height: fit-content;
  overflow: hidden;
}

.hot_team .team_record ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.hot_team .team_record ul li a .symbol {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #981f41;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.hot_team .team_record ul li a .symbol img {
  height: 90%;
}

.hot_team .team_record ul li a span {
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background: #981f41;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .hot_team {
    padding: 0.4rem 0 0.8rem;
  }

  .hot_team .team_record ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.1rem;
  }

  .hot_team .team_record ul li a {
    gap: 0.15rem;
  }

  .hot_team .team_record ul li a span {
    padding: 0.1rem;
    font-size: 0.16rem;
  }
}

/* 推荐视频  */
.video_unveil {
  width: 100%;
  height: fit-content;
  padding: 40px 0 80px;
}

.video_unveil .video_pitch {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media screen and (max-width: 768px) {
  .video_unveil {
    padding: 0.2rem 0 0.6rem;
  }

  .video_unveil .video_pitch {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2rem;
  }
}

/* 积分榜 */
.points_rank {
  width: 100%;
  height: fit-content;
  padding: 40px 0 80px;
  background: url(../public/image/rank_bg.png) no-repeat;
  background-size: 100% 100%;
}

.points_rank .rank_record dl dt {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  padding: 20px;
  background: #b1b1bc;
  box-sizing: border-box;
}

.points_rank .rank_record dl dt span {
  font-size: 14px;
  font-weight: bold;
  color: #1b283d;
  text-align: center;
}

.points_rank .rank_record dl dt span.emblem {
  grid-column: span 3;
}

.points_rank .rank_record dl dd {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  padding: 20px;
  box-sizing: border-box;
  background: #ffffff;
  border-bottom: 1px solid #b1b1bc;
}

.points_rank .rank_record dl dd span {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.points_rank .rank_record dl dd span.ranking {
  width: 25px;
  height: 25px;
  font-weight: bold;
  color: #1b283d;
  margin: auto;
  background: #b1b1bc;
  font-size: 16px;
}

.points_rank .rank_record dl dd .rank_team {
  grid-column: span 3;
}

.points_rank .rank_record dl dd .rank_team a {
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 10px;
  color: var(--theme-color);
}

.points_rank .rank_record dl dd .rank_team a img {
  width: 28px;
}

.points_rank .rank_record dl dd:hover {
  background: #981f41;
}

.points_rank .rank_record dl dd:hover span {
  color: #fff;
}

.points_rank .rank_record dl dd:hover span.ranking {
  color: #981f41;
}

.points_rank .rank_record dl dd:hover .rank_team a {
  color: #fff;
}

.points_rank .rank_record dl dd:nth-child(2) .ranking {
  background: url(../public/image/rank1.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.points_rank .rank_record dl dd:nth-child(3) .ranking {
  background: url(../public/image/rank2.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.points_rank .rank_record dl dd:nth-child(4) .ranking {
  background: url(../public/image/rank3.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

@media screen and (max-width: 768px) {
  .points_rank .rank_record dl dt {
    padding: 0.1rem;
  }

  .points_rank .rank_record dl dt span {
    font-size: 0.15rem;
    white-space: nowrap;
  }

  .points_rank .rank_record dl dd {
    padding: 0.1rem;
  }

  .points_rank .rank_record dl dd span {
    font-size: 0.13rem;
  }

  .points_rank .rank_record dl dd span.ranking {
    width: 0.25rem;
    height: 0.25rem;
    font-size: 0.16rem;
  }

  .points_rank .rank_record dl dd .rank_team a {
    gap: 0.1rem;
    font-size: 0.14rem;
  }

  .points_rank .rank_record dl dd .rank_team a img {
    width: 0.28rem;
  }
}

@media screen and (max-width: 768px) {
  .points_rank {
    padding: 0.4rem 0 0.8rem;
  }
}

/* 最新资讯 */
.latest_news {
  width: 100%;
  height: fit-content;
  padding: 40px 0 80px;
}

@media screen and (max-width: 768px) {
  .latest_news {
    padding: 0.4rem 0 0.8rem;
  }
}

/* --- 多用样式 --- */
/* 首页标题栏 */
.title_bar {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  margin-bottom: 0.45rem;
}

.title_bar strong {
  width: 2.6rem;
  height: 0.8rem;
  text-align: center;
  line-height: 0.7rem;
  background: url(../public/image/titlebar_blue_bg.png) no-repeat;
  background-size: 100% 100%;
  font-size: 0.36rem;
  font-weight: bold;
  color: #0c1e31;
}

.title_bar.title_bar_red h2 {
  background: url(../public/image/titlebar_red_bg.png) no-repeat;
  background-size: 100% 100%;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .title_bar {
    margin-bottom: 0.45rem;
  }

  .title_bar h2 {
    width: 3.6rem;
    height: 1.3rem;
    line-height: 0.9rem;
    font-size: 0.36rem;
  }
}

/* 赛事列表导航 */
.event_nav {
  width: 100%;
  height: fit-content;
  display: flex;
  margin-bottom: 30px;
  gap: 20px;
}

.event_nav.hot_unveil_nav .event_list .event_ball a {
  color: #b1b1bc;
}

.event_nav .event_list {
  flex: 1;
  display: flex;
  gap: 15px;
  overflow-x: auto;
}

.event_nav .event_list .event_ball {
  border: 1px solid #b1b1bc;
  border-radius: 20px;
}

.event_nav .event_list .event_ball a {
  display: block;
  padding: 0 28px;
  height: 40px;
  line-height: 40px;
  color: #102134;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

.event_nav .event_list .event_ball.active,
.event_nav .event_list .event_ball:hover {
  background: #981f41;
  border-color: #981f41;
}

.event_nav .event_list .event_ball.active a,
.event_nav .event_list .event_ball:hover a {
  color: #fff;
}

.event_nav .event_more {
  position: relative;
  border: 1px solid #b1b1bc;
  border-radius: 20px;
  height: fit-content;
}

.event_nav .event_more .more {
  display: block;
  padding: 0 18px;
  height: 40px;
  line-height: 40px;
  color: #102134;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

.event_nav .event_more .more .icon-youjiantou {
  font-size: 12px;
}

.event_nav .event_more .more_event {
  display: none;
  width: 100%;
  height: fit-content;
  position: absolute;
}

.event_nav .event_more .more_event li {
  width: 100%;
  height: fit-content;
  background: #528ee5;
}

.event_nav .event_more .more_event li a {
  display: block;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  color: #102134;
  white-space: nowrap;
}

.event_nav .event_more .more_event li:hover {
  background: #243d61;
}

.event_nav .event_more .more_event li:hover a {
  color: #fff;
}

@media screen and (max-width: 768px) {
  .event_nav {
    margin-bottom: 0.3rem;
    gap: 0.15rem;
  }

  .event_nav .event_list {
    gap: 0.1rem;
    padding-bottom: 0.15em;
  }

  .event_nav .event_list .event_ball {
    border-radius: 0.2rem;
  }

  .event_nav .event_list .event_ball a {
    padding: 0 0.2rem;
    height: 0.36rem;
    line-height: 0.36rem;
    font-size: 0.16rem;
  }

  .event_nav .event_more {
    border-radius: 0.2rem;
  }

  .event_nav .event_more .more {
    padding: 0 0.18rem;
    height: 0.36rem;
    line-height: 0.36rem;
    font-size: 0.16rem;
  }

  .event_nav .event_more .more .icon-youjiantou {
    font-size: 0.12rem;
  }

  .event_nav .event_more .more_event li a {
    padding: 0.1rem 0;
  }
}

/* 比赛列表 */
.match_list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.match_list .match_item {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #b1b1bc;
}

.match_list .match_item .aggregate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.match_list .match_item .aggregate .subclass {
  width: 100%;
  overflow: hidden;
}

.match_list .match_item .aggregate .subclass a {
  display: flex;
  align-items: center;
  gap: 5px;
}

.match_list .match_item .aggregate .subclass a img {
  width: 28px;
  height: auto;
}

.match_list .match_item .aggregate .subclass a span {
  color: var(--theme-color);
  font-weight: bold;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.match_list .match_item .aggregate time {
  font-size: 14px;
}

.match_list .match_item .aggregate time a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.match_list .match_item .aggregate time a span {
  font-weight: bold;
  white-space: nowrap;
  color: var(--theme-color);
}

.match_list .match_item .aggregate .match_status {
  width: 100%;
  display: flex;
  justify-content: center;
}

.match_list .match_item .aggregate .match_status a {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--theme-color);
}

.match_list .match_item .aggregate .match_status a span {
  font-weight: bold;
  font-size: 14px;
}

.match_list .match_item .aggregate .match_status a .iconfont {
  font-size: 16px;
}

.match_list .match_item .aggregate .match_status.start a span {
  color: #981f41;
}

.match_list .match_item .score {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  align-items: center;
  overflow: hidden;
  gap: 5px;
}

.match_list .match_item .score .score_team {
  width: 100%;
  overflow: hidden;
}

.match_list .match_item .score .score_team a {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.match_list .match_item .score .score_team img {
  width: 36px;
}

.match_list .match_item .score .score_team span {
  flex: 1;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--theme-color);
}

.match_list .match_item .score .score_team span:first-child {
  text-align: right;
}

.match_list .match_item .score .score_vs {
  text-align: center;
}

.match_list .match_item .score .score_vs a {
  color: var(--theme-color);
  font-weight: bold;
  font-size: 16px;
}

.match_list .match_item .playback {
  width: 100%;
  overflow: hidden;
}

.match_list .match_item .playback a {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
}

.match_list .match_item .playback .gen_info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.match_list .match_item .playback .gen_info .icon-tongzhi {
  font-size: 20px;
  color: #528ee5;
}

.match_list .match_item .playback .gen_info span {
  font-weight: bold;
  font-size: 14px;
  color: var(--theme-color);
}

.match_list .match_item .playback .iconfont {
  place-self: start end;
  font-size: 23px;
  color: #97b2dd;
}

.match_list .match_item .playback .actual_start {
  height: 25px;
  display: flex;
  justify-content: end;
  align-items: center;
}

.match_list .match_item .playback .actual_start .wave {
  width: 3px;
  height: 25px;
  background: cyan;
  margin: 2px;
  animation: wave 1s linear infinite;
  border-radius: 20px;
}

.match_list .match_item .playback .actual_start .wave:nth-child(2) {
  animation-delay: 0.1s;
}

.match_list .match_item .playback .actual_start .wave:nth-child(3) {
  animation-delay: 0.2s;
}

.match_list .match_item .playback .actual_await {
  place-self: center end;
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 2px solid cyan;
  border-radius: 50%;
  border-top-color: transparent;
  border-bottom-color: transparent;
  animation: rot5 2s infinite;
}

.match_list .match_item:hover {
  background: #981f41;
}

.match_list .match_item:hover .aggregate .match_status span,
.match_list .match_item:hover .aggregate .start a span,
.match_list .match_item:hover .aggregate time a span,
.match_list .match_item:hover .aggregate .subclass a span {
  color: #fff;
}

.match_list .match_item:hover .score .score_vs a,
.match_list .match_item:hover .score .score_team span {
  color: #fff;
}

.match_list .match_item:hover .playback .icon-shipin,
.match_list .match_item:hover .playback .gen_info span,
.match_list .match_item:hover .playback .gen_info .icon-tongzhi {
  color: #fff;
}

@media screen and (max-width: 768px) {
  .match_list .match_item {
    grid-template-columns: auto;
    gap: 0.05rem;
    padding: 0.15rem;
  }

  .match_list .match_item .aggregate .subclass a {
    gap: 0.05rem;
  }

  .match_list .match_item .aggregate .subclass a img {
    width: 0.26rem;
  }

  .match_list .match_item .aggregate .subclass a span {
    font-size: 0.16rem;
  }

  .match_list .match_item .aggregate time a span {
    font-size: 0.16rem;
  }

  .match_list .match_item .aggregate .match_status {
    justify-content: end;
  }

  .match_list .match_item .aggregate .match_status a {
    gap: 0.05rem;
  }

  .match_list .match_item .aggregate .match_status a span {
    font-size: 0.16rem;
  }

  .match_list .match_item .aggregate .match_status a .iconfont {
    font-size: 0.2rem;
  }

  .match_list .match_item .score .score_team a {
    gap: 0.05rem;
  }

  .match_list .match_item .score .score_team a img {
    width: 0.36rem;
  }

  .match_list .match_item .score .score_team a span {
    font-size: 0.16rem;
  }

  .match_list .match_item .score .score_vs a {
    font-size: 0.18rem;
  }

  .match_list .match_item .playback .gen_info {
    justify-content: start;
    gap: 0.05rem;
  }

  .match_list .match_item .playback .gen_info .icon-tongzhi {
    font-size: 0.22rem;
  }

  .match_list .match_item .playback .gen_info span {
    font-size: 0.16rem;
  }

  .match_list .match_item .playback .iconfont {
    font-size: 0.23rem;
  }

  .match_list .match_item .playback .actual_start {
    height: 0.25rem;
  }

  .match_list .match_item .playback .actual_start .wave {
    width: 0.03rem;
    height: 0.25rem;
    margin: 0.02rem;
    border-radius: 0.2rem;
  }

  .match_list .match_item .playback .actual_await {
    width: 0.2rem;
    height: 0.2rem;
    border-width: 0.02rem;
  }
}

@keyframes wave {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes rot5 {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(180deg);
    border-top-color: #97b2dd;
    border-bottom-color: cyan;
    border-right-color: transparent;
    border-left-color: transparent;
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 视频推荐 */
.video_item {
  width: 100%;
  height: fit-content;
  background: #0c1e31;
  overflow: hidden;
}

.video_item .video_image {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.video_item .video_image img {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
}

.video_item .video_image::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  /*background: url(../public/image/play.png) no-repeat;*/
  background-size: 100% 100%;
}

.video_item .video_image time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

.video_item .video_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 120px;
  padding: 10px 10px 15px;
  background: #fff;
}

.video_item .video_info p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  font-size: 13px;
  font-weight: bold;
  color: var(--theme-color);
}

.video_item:hover .video_image img {
  transform: scale(1.1);
}

.video_item:hover .video_info {
  background: #981f41;
}

.video_item:hover .video_info p,
.video_item:hover .video_info .metric time,
.video_item:hover .video_info .metric strong {
  color: #fff;
}

@media screen and (max-width: 768px) {
  .video_item .video_image {
    height: 1.6rem;
  }

  .video_item .video_image::after {
    width: 0.5rem;
    height: 0.5rem;
  }

  .video_item .video_image time {
    right: 0.1rem;
    bottom: 0.1rem;
    font-size: 0.14rem;
  }

  .video_item .video_info {
    width: 100%;
    height: 1.2rem;
    padding: 0.1rem 0.1rem 0.15rem;
  }

  .video_item .video_info p {
    font-size: 0.16rem;
  }
}

/* 热度量和发布时间 */
.metric {
  display: flex;
  justify-content: space-between;
}

.metric .report,
.metric .hot_views {
  display: flex;
  align-items: center;
  gap: 3px;
}

.metric .icon-shijian,
.metric .icon-remenh {
  font-size: 20px;
}

.metric .icon-shijian {
  color: #2d7de8;
}

.metric .icon-remenh {
  color: #f44336;
}

.metric time,
.metric strong {
  color: #acb4ba;
  font-size: 14px;
}

@media screen and (max-width: 768px) {

  .metric .report,
  .metric .hot_views {
    gap: 0.03rem;
  }

  .metric .icon-shijian,
  .metric .icon-remenh {
    font-size: 0.2rem;
  }

  .metric time,
  .metric strong {
    font-size: 0.15rem;
  }
}

/* 新闻资讯 */
.news_list {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news_list .news_item {
  width: 100%;
  height: fit-content;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.news_list .news_item a {
  display: flex;
  padding: 20px;
  gap: 20px;
  overflow: hidden;
}

.news_list .news_item .wrapper_image {
  position: relative;
  width: 370px;
  height: 220px;
  overflow: hidden;
}

.news_list .news_item .wrapper_image img {
  width: 100%;
  height: 100%;
}

.news_list .news_item .wrapper_image .time_tag {
  position: absolute;
  bottom: -3px;
  right: 0;
  width: 90px;
  height: 70px;
  background: linear-gradient(144deg, transparent, transparent 50%, #27487a 50%, #27487a 100%);
}

.news_list .news_item .wrapper_image .time_tag span {
  color: #fff;
  font-weight: bold;
}

.news_list .news_item .wrapper_image .time_tag span.time_day {
  position: absolute;
  right: 3px;
  top: 20px;
  font-size: 14px;
}

.news_list .news_item .wrapper_image .time_tag span.time_month {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-size: 24px;
}

.news_list .news_item:nth-child(2n) .wrapper_image .time_tag {
  background: linear-gradient(144deg, transparent, transparent 50%, #9d304c 50%, #9d304c 100%);
}

.news_list .news_item .news_content {
  flex: 1;
  width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0;
}

.news_list .news_item .news_content .cont_epiboly {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  overflow: hidden;
}

.news_list .news_item .news_content .cont_epiboly strong {
  width: 100%;
  font-weight: bold;
  color: #102134;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news_list .news_item .news_content .cont_epiboly p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
  color: #102134;
  line-height: 24px;
}

.news_list .news_item:hover {
  background: #243d61;
}

.news_list .news_item:hover:nth-child(2n) {
  background: #981f41;
}

.news_list .news_item:hover .news_content .metric strong,
.news_list .news_item:hover .news_content .metric time,
.news_list .news_item:hover .news_content strong,
.news_list .news_item:hover .news_content p {
  color: #fff;
}

@media screen and (max-width: 768px) {
  .news_list {
    gap: 0.2rem;
  }

  .news_list .news_item a {
    padding: 0.1rem;
    gap: 0.1rem;
  }

  .news_list .news_item .wrapper_image {
    bottom: -0.03rem;
    width: 2.2rem;
    height: 1.6rem;
  }

  .news_list .news_item .wrapper_image .time_tag {
    width: 0.8rem;
    height: 0.7rem;
  }

  .news_list .news_item .wrapper_image .time_tag span.time_day {
    right: 0.03rem;
    top: 0.2rem;
    font-size: 0.14rem;
  }

  .news_list .news_item .wrapper_image .time_tag span.time_month {
    right: 0.1rem;
    bottom: 0.05rem;
    font-size: 0.24rem;
  }

  .news_list .news_item .news_content {
    padding: 0.08rem 0;
  }

  .news_list .news_item .news_content .cont_epiboly p {
    line-height: 0.26rem;
  }
}

/* 侧边栏盒子 */
.outermost {
  height: fit-content;
  padding: 20px 0 80px;
}

.outermost .outside {
  height: fit-content;
  display: flex;
  gap: 20px;
}

.outermost .outside .kernel {
  flex: 1;
  width: 0;
}

.outermost .outside .publicize {
  width: 28%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.outermost .outside .publicize .condition {
  width: 100%;
  height: fit-content;
  background: #fff;
  padding: 10px 10px 20px;
  box-sizing: border-box;
}

.outermost .outside .publicize .condition .chronicle ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.outermost .outside .publicize .condition .chronicle ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.outermost .outside .publicize .condition .chronicle ul li a p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: bold;
}

.outermost .outside .publicize .condition .chronicle ul li a p,
.outermost .outside .publicize .condition .chronicle ul li a time {
  color: var(--theme-color);
}

.outermost .outside .publicize .condition .portray {
  display: grid;
  grid-template-columns: auto;
  gap: 10px;
}

@media screen and (max-width: 768px) {
  .outermost {
    padding: 0.2rem 0 0.8rem;
  }

  .outermost .outside {
    flex-wrap: wrap;
    gap: 0.2rem;
  }

  .outermost .outside .kernel {
    width: 100%;
  }

  .outermost .outside .publicize {
    width: 100%;
    gap: 0.2rem;
  }

  .outermost .outside .publicize .condition {
    padding: 0.1rem 0.1rem 0.2rem;
  }

  .outermost .outside .publicize .condition .chronicle ul {
    gap: 0.2rem;
  }

  .outermost .outside .publicize .condition .chronicle ul li a {
    gap: 0.1rem;
  }

  .outermost .outside .publicize .condition .chronicle ul li a p,
  .outermost .outside .publicize .condition .chronicle ul li a time {
    font-size: 0.16rem;
  }

  .outermost .outside .publicize .condition .portray {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.1rem;
  }
}

/* 头条标题 */
.headline {
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.headline .propose {
  display: flex;
  align-items: center;
  gap: 5px;
}

.headline .propose strong {
  font-size: 18px;
  font-weight: bold;
  color: #102134;
}

.headline .propose .iconfont {
  font-size: 30px;
  color: #ff6c5f;
}

.headline .more a {
  display: flex;
  align-items: center;
}

.headline .more a strong {
  font-size: 13px;
  font-weight: bold;
  color: #102134;
}

.headline .more a .icon-youjiantou {
  font-size: 10px;
  color: #102134;
}

@media screen and (max-width: 768px) {
  .headline {
    margin-bottom: 0.2rem;
  }

  .headline .propose {
    gap: 0.05rem;
  }

  .headline .propose strong {
    font-size: 0.2rem;
  }

  .headline .propose .iconfont {
    font-size: 0.3rem;
  }

  .headline .more a strong {
    font-size: 0.18rem;
  }

  .headline .more a .icon-youjiantou {
    font-size: 0.1rem;
  }
}

/* 面包屑导航 */
.breadcrumb {
  margin-bottom: 20px;
}

.breadcrumb ul {
  display: flex;
}

.breadcrumb ul li::after {
  content: ">";
  margin: 0 8px;
}

.breadcrumb ul li:last-child::after {
  content: "";
}

.breadcrumb ul li a {
  color: #102134;
}

@media screen and (max-width: 768px) {
  .breadcrumb {
    margin-bottom: 0.2rem;
  }

  .breadcrumb ul li::after {
    margin: 0 0.08rem;
  }

  .breadcrumb ul li a {
    color: #102134;
    font-size: 0.16rem;
  }
}

/* 推荐视频广告 */
.material a .surface {
  position: relative;
  width: 100%;
  height: 135px;
  margin-bottom: 10px;
}

.material a .surface img {
  width: 100%;
  height: 100%;
}

.material a .surface time {
  position: absolute;
  top: 5px;
  left: 5px;
  color: #fff;
  font-weight: bold;
}

.material a .surface time.precise {
  top: auto;
  left: auto;
  bottom: 5px;
  right: 5px;
}

.material a .surface::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(../public/image/aside_play.png) no-repeat;
  background-size: 100% 100%;
}

.material a p {
  color: var(--theme-color);
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

@media screen and (max-width: 768px) {
  .material a .surface {
    height: 1.35rem;
    margin-bottom: 0.1rem;
  }

  .material a .surface time {
    top: 0.05rem;
    left: 0.05rem;
    font-size: 0.16rem;
  }

  .material a .surface time.precise {
    bottom: 0.05rem;
    right: 0.05rem;
  }

  .material a .surface::before {
    width: 0.5rem;
    height: 0.5rem;
  }

  .material a p {
    font-size: 0.16rem;
  }
}

/* 详情标题 */
.inner_title {
  width: 100%;
  height: fit-content;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}

.inner_title h1 {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #102134;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inner_title .establish {
  margin: 10px 0;
  user-select: none;
}

.inner_title .establish ul {
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner_title .establish ul li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.inner_title .establish ul li::after {
  content: "";
  display: block;
  width: 1px;
  height: 10px;
  margin: 0 5px;
  background: #c1c7cb;
}

.inner_title .establish ul li:last-child::after {
  display: none;
}

.inner_title .establish ul li .iconfont {
  font-size: 16px;
}

.inner_title .establish ul li .iconfont.icon-shijian {
  color: #2d7de8;
}

.inner_title .establish ul li .iconfont.icon-remenh {
  color: #ee5555;
}

.inner_title .establish ul li strong,
.inner_title .establish ul li span,
.inner_title .establish ul li time {
  font-size: 13px;
  color: #8e8e8e;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .inner_title {
    padding: 0.1rem;
  }

  .inner_title h1 {
    font-size: 0.2rem;
  }

  .inner_title .establish {
    margin: 0.1rem 0;
  }

  .inner_title .establish ul li {
    gap: 0.05rem;
  }

  .inner_title .establish ul li::after {
    height: 0.1rem;
    margin: 0 0.05rem;
  }

  .inner_title .establish ul li .iconfont {
    font-size: 0.18rem;
  }

  .inner_title .establish ul li strong,
  .inner_title .establish ul li span,
  .inner_title .establish ul li time {
    font-size: 0.16rem;
  }
}

/* 分页器 */
.pager {
  width: 100%;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  margin-top: 20px;
}

.pager .pagination {
  display: flex;
  gap: 10px;
  user-select: none;
}

.pager .pagination li {
  width: auto;
  height: auto;
  padding: 3px 10px;
  border-radius: 5px;
  border: 2px solid #b1b1bc;
}

.pager .pagination li:hover {
  background: #981f41;
}

.pager .pagination li:hover a {
  color: #696969;
}

.pager .pagination li span,
.pager .pagination li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: #696969;
  font-size: 14px;
}

.pager .pagination .active {
  background: #981f41;
}

.pager .pagination .active span {
  color: #696969;
}

.pager .pagination .disabled {
  cursor: pointer;
  user-select: none;
}

.pager .pagination .disabled span {
  color: #cdcdcd;
  white-space: nowrap;
}

.pager .pagination .disabled span.iconfont {
  font-size: 10px;
}

.pager .pagination .omit {
  cursor: default;
  width: auto;
  border: none;
  background: none;
}

@media screen and (max-width: 768px) {
  .pager {
    padding: 0.2rem;
    margin-top: 0.2rem;
  }

  .pager .pagination {
    gap: 0.05rem;
  }

  .pager .pagination li {
    padding: 0.03rem 0.1rem;
    border-radius: 0.05rem;
    border-width: 0.02rem;
  }

  .pager .pagination li.Jump {
    display: none;
  }

  .pager .pagination li span,
  .pager .pagination li a {
    font-size: 0.14rem;
  }

  .pager .pagination .disabled span.iconfont {
    font-size: 0.1rem;
  }
}

/* --- 非首页样式 --- */
/* 体育视频 */
.video_list {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media screen and (max-width: 768px) {
  .video_list {
    gap: 0.1rem;
  }
}

/* 赛事新闻 */
.news_inner {
  padding-bottom: 50px;
}

.news_inner .decorate {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news_inner .decorate p {
  font-weight: bold;
  line-height: 25px;
  text-indent: 20px;
}

.news_inner .decorate img {
  width: 80%;
  height: fit-content;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: rgba(53, 58, 62, 0.06) 0px 1px 10px 0px, rgba(53, 58, 62, 0.08) 0px 2px 4px 0px;
}

.news_inner .proximity {
  width: 100%;
  margin-top: 60px;
}

.news_inner .proximity ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.news_inner .proximity ul li {
  height: fit-content;
  overflow: hidden;
  border: 1px solid #b1b1bc;
  border-radius: 20px;
}

.news_inner .proximity ul li a {
  display: flex;
  padding: 10px;
}

.news_inner .proximity ul li a strong {
  color: #1b283d;
  white-space: nowrap;
}

.news_inner .proximity ul li a p {
  color: #acb4ba;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .news_inner {
    padding-bottom: 0.5rem;
  }

  .news_inner .decorate {
    gap: 0.2rem;
  }

  .news_inner .decorate p {
    line-height: 0.25rem;
    text-indent: 0.2rem;
    font-size: 0.16rem;
  }

  .news_inner .decorate img {
    border-radius: 0.1rem;
  }

  .news_inner .proximity {
    margin-top: 0.6rem;
  }

  .news_inner .proximity ul {
    grid-template-columns: auto;
    gap: 0.15rem;
  }

  .news_inner .proximity ul li {
    border-radius: 0.05rem;
  }

  .news_inner .proximity ul li a {
    padding: 0.1rem;
  }

  .news_inner .proximity ul li a strong,
  .news_inner .proximity ul li a p {
    font-size: 0.16rem;
  }
}

/* 视频详情 */
.video_inner .actuality {
  position: relative;
  width: 100%;
  height: fit-content;
}

.video_inner .actuality figure {
  position: relative;
  width: 100%;
  height: 360px;
}

.video_inner .actuality figure img {
  width: 100%;
  height: 100%;
}

.video_inner .actuality figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px;
  background: rgba(255, 255, 255, 0.5);
  width: 100%;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video_inner .actuality::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: url(../public/image/play.png) no-repeat;
  background-size: 100% 100%;
}

.video_inner .actuality time {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 14px;
  color: #fff;
}

.video_inner .actuality time.exact {
  left: auto;
  top: auto;
  right: 10px;
  bottom: 35px;
}

.video_inner .race_outer {
  width: 100%;
  height: fit-content;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.video_inner .race_outer .race_info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.video_inner .race_outer .race_info li a {
  color: var(--theme-color);
}

@media screen and (max-width: 768px) {
  .video_inner .actuality figure {
    height: 2.8rem;
  }

  .video_inner .actuality figure figcaption {
    padding: 0.05rem;
    font-size: 0.14rem;
  }

  .video_inner .actuality::after {
    width: 0.65rem;
    height: 0.65rem;
  }

  .video_inner .actuality time {
    top: 0.1rem;
    left: 0.1rem;
    font-size: 0.14rem;
  }

  .video_inner .actuality time.exact {
    right: 0.1rem;
    bottom: 0.35rem;
  }

  .video_inner .race_outer {
    margin: 0.2rem 0;
    gap: 0.15rem;
  }

  .video_inner .race_outer .race_info {
    gap: 0.15rem;
  }
}

/* 相关视频 */
.correlation {
  width: 100%;
  height: fit-content;
  margin-top: 20px;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}

.correlation .closely_video {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.correlation .closely_video .material a .surface {
  height: 160px;
}

@media screen and (max-width: 768px) {
  .correlation {
    margin-top: 0.2rem;
    padding: 0.1rem;
  }

  .correlation .closely_video {
    gap: 0.2rem;
  }

  .correlation .closely_video .material a .surface {
    height: 1.5rem;
  }
}

/* 联盟赛事 */
.contest {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 15px;
  background: #fff;
}

.contest ol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.contest ol li {
  display: flex;
  justify-content: space-between;
  border: 1px solid #b1b1bc;
  padding: 20px;
  box-sizing: border-box;
}

.contest ol li time,
.contest ol li .team_duel strong a,
.contest ol li .status_duel a {
  color: var(--theme-color);
  font-size: 14px;
  font-weight: bold;
}

.contest ol li .team_duel {
  display: flex;
  gap: 3px;
  align-items: center;
}

.contest ol li .team_duel span {
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .contest {
    padding: 0.15rem;
    gap: 0.2rem;
  }

  .contest ol {
    grid-template-columns: auto;
    gap: 0.2rem;
  }

  .contest ol li {
    padding: 0.2rem;
  }

  .contest ol li time,
  .contest ol li .team_duel strong a,
  .contest ol li .status_duel a {
    font-size: 0.16rem;
  }

  .contest ol li .team_duel {
    gap: 0.03rem;
  }
}

/* 热门赛事 */
.hot_match {
  width: 100%;
  height: fit-content;
  padding: 15px;
  background: #fff;
  margin-top: 20px;
  box-sizing: border-box;
}

.hot_match .union ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hot_match .union ul li a {
  color: var(--theme-color);
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .hot_match {
    padding: 0.15rem;
    margin-top: 0.2rem;
  }

  .hot_match .union ul {
    gap: 0.1rem;
  }
}

/* 赛事文本 */
.perusal p {
  font-size: 14px;
  text-indent: 20px;
  line-height: 25px;
}

@media screen and (max-width: 768px) {
  .perusal p {
    font-size: 0.16rem;
    text-indent: 0.2rem;
    line-height: 0.28rem;
  }
}

/* 赛事图片 */
.athletics {
  position: relative;
  width: 100%;
  height: 380px;
  background: url(../public/image/match_lanqiu_bg.png) no-repeat;
  background-size: 100% 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  place-items: center;
  margin-top: 15px;
}

.athletics .captions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: fit-content;
  box-sizing: border-box;
  padding: 10px;
  background: rgba(255, 255, 255, 0.2);
}

.athletics .captions p {
  color: #fff;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.athletics .mutual {
  width: 120px;
  height: fit-content;
}

.athletics .mutual a {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.athletics .mutual a img {
  width: 100%;
}

.athletics .mutual a strong {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.athletics .commence {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 15px;
}

.athletics .commence time {
  font-size: 16px;
}

.athletics .commence strong {
  font-size: 24px;
}

.athletics .commence .alliance a {
  font-size: 16px;
  white-space: nowrap;
}

.athletics .commence time,
.athletics .commence strong,
.athletics .commence .alliance a {
  font-weight: bold;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .athletics {
    height: 3.8rem;
    margin-top: 0.15rem;
  }

  .athletics .captions {
    padding: 0.1rem;
  }

  .athletics .mutual {
    width: 1.2rem;
  }

  .athletics .mutual a {
    gap: 0.15rem;
  }

  .athletics .mutual a strong {
    font-size: 0.16rem;
  }

  .athletics .commence {
    gap: 0.15rem;
  }

  .athletics .commence time {
    font-size: 0.16rem;
  }

  .athletics .commence strong {
    font-size: 0.24rem;
  }

  .athletics .commence .alliance a {
    font-size: 0.16rem;
  }
}

/* 比赛情况 */
.reflection {
  width: 100%;
  height: fit-content;
  box-sizing: border-box;
  padding: 15px;
  background: #fff;
  margin-top: 25px;
}

.reflection .election {
  width: 100%;
  margin-bottom: 30px;
}

.reflection .election ul {
  height: fit-content;
  display: flex;
  gap: 30px;
  justify-content: center;
}

.reflection .election ul li a {
  display: block;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: bold;
  color: var(--theme-color);
  white-space: nowrap;
}

.reflection .election ul li.active a,
.reflection .election ul li:hover a {
  color: #fff;
  background: #2d85c7;
}

.reflection .narrative {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reflection .narrative p {
  font-size: 13px;
  line-height: 22px;
}

.reflection .narrative p a {
  color: var(--theme-color);
}

.reflection .narrative .friendly {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.reflection .narrative .friendly strong {
  font-size: 13px;
}

.reflection .narrative .friendly ol {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.reflection .narrative .friendly ol li {
  animation: scaling 2s ease-out infinite;
}

.reflection .narrative .friendly ol li a {
  color: #2d85c7;
  font-weight: bold;
  font-size: 13px;
}

.reflection .emblem {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 20px;
}

.reflection .emblem .shared a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.reflection .emblem .shared a img {
  width: fit-content;
  height: 58px;
}

.reflection .emblem .shared a strong {
  font-size: 13px;
  color: var(--theme-color);
  font-weight: bold;
}

.reflection .resource {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.reflection .resource .plating {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reflection .resource .plating .pivot {
  width: 100%;
  height: fit-content;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #e5e5e5;
}

.reflection .resource .plating .pivot.vantage {
  --title-color: #ff0000;
  --content-bg: #f9b5b5;
}

.reflection .resource .plating .pivot.neutral {
  --title-color: #37c8e7;
  --content-bg: #acedfb;
}

.reflection .resource .plating .pivot.unlucky {
  --title-color: #646466;
  --content-bg: #c9c9c9;
}

.reflection .resource .plating .pivot dl {
  position: relative;
  width: 100%;
  height: fit-content;
  padding-left: 15px;
  box-sizing: border-box;
}

.reflection .resource .plating .pivot dl::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: #eee;
}

.reflection .resource .plating .pivot dl dt {
  position: relative;
  width: 100%;
  height: 24px;
  line-height: 24px;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 18px;
  color: var(--title-color);
}

.reflection .resource .plating .pivot dl dt::after {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  width: 4px;
  height: 100%;
  background-color: var(--content-bg);
  z-index: 1;
}

.reflection .resource .plating .pivot dl dd {
  position: relative;
  width: 100%;
  height: fit-content;
  padding: 8px;
  box-sizing: border-box;
  font-weight: bold;
  margin-bottom: 20px;
  background-color: var(--content-bg);
  letter-spacing: 2px;
}

.reflection .resource .plating .pivot dl dd:last-child {
  margin-bottom: 0;
}

.reflection .resource .plating .pivot dl dd.tidings-level-1 {
  color: #fb2828;
}

.reflection .resource .plating .pivot dl dd.tidings-level-2 {
  color: #edd579;
}

.reflection .resource .plating .pivot dl dd.tidings-level-3 {
  color: #4b8bc1;
}

.reflection .resource .plating .pivot dl dd.tidings-level-4 {
  color: #71a172;
}

.reflection .resource .plating .pivot dl dd.tidings-level-5 {
  color: #b863dc;
}

.reflection .resource .plating .pivot dl dd::after {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  width: 4px;
  height: 4px;
  background-color: var(--content-bg);
  z-index: 1;
}

.reflection .stratify {
  width: 100%;
  height: fit-content;
}

.reflection .stratify .rubric {
  margin: 15px 0;
}

.reflection .stratify .rubric strong {
  display: flex;
  gap: 5px;
  font-size: 18px;
  font-weight: bold;
}

.reflection .stratify .rubric strong::before {
  content: "";
  width: 4px;
  height: auto;
  background: #2d85c7;
}

.reflection .stratify .parallel dl {
  width: 100%;
  height: fit-content;
  box-sizing: border-box;
  border: 1px solid #b1b1bc;
  border-radius: 3px;
  overflow: hidden;
}

.reflection .stratify .parallel dl dt {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 5fr 1fr;
  padding: 15px 10px;
  box-sizing: border-box;
  background: #b1b1bc;
}

.reflection .stratify .parallel dl dt .earlier {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  gap: 5px;
}

.reflection .stratify .parallel dl dt .group {
  display: grid;
  grid-template-columns: 3fr 1fr 3fr;
  place-items: center;
}

.reflection .stratify .parallel dl dt .advance {
  place-self: center;
}

.reflection .stratify .parallel dl dt span {
  font-size: 14px;
  font-weight: bold;
  color: #102134;
  white-space: nowrap;
}

.reflection .stratify .parallel dl dd {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 5fr 1fr;
  padding: 15px 10px;
  box-sizing: border-box;
  border-top: 1px solid #b1b1b1;
}

.reflection .stratify .parallel dl dd .earlier {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  overflow: hidden;
}

.reflection .stratify .parallel dl dd .earlier a {
  display: block;
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

.reflection .stratify .parallel dl dd .group {
  display: grid;
  grid-template-columns: 3fr 1fr 3fr;
  place-items: center;
}

.reflection .stratify .parallel dl dd .group .system {
  width: 100%;
  overflow: hidden;
}

.reflection .stratify .parallel dl dd .group .system a {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
}

.reflection .stratify .parallel dl dd .group .system a img {
  width: 25px;
}

.reflection .stratify .parallel dl dd .group .system a strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reflection .stratify .parallel dl dd .group .system:first-child a {
  justify-content: end;
}

.reflection .stratify .parallel dl dd .advance {
  place-self: center;
}

.reflection .stratify .parallel dl dd .earlier time,
.reflection .stratify .parallel dl dd .earlier a,
.reflection .stratify .parallel dl dd .group .system strong,
.reflection .stratify .parallel dl dd .group span,
.reflection .stratify .parallel dl dd .advance a {
  font-size: 13px;
  color: var(--theme-color);
  font-weight: bold;
  white-space: nowrap;
}

.reflection .stratify .among {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

@media screen and (max-width: 768px) {
  .reflection {
    padding: 0.1rem;
    margin-top: 0.25rem;
  }

  .reflection .election {
    margin-bottom: 0.3rem;
  }

  .reflection .election ul {
    gap: 0;
    justify-content: space-between;
  }

  .reflection .election ul li a {
    padding: 0.08rem 0.2rem;
    font-size: 0.16rem;
  }

  .reflection .narrative {
    gap: 0.1rem;
  }

  .reflection .narrative p {
    font-size: 0.16rem;
    line-height: 0.22rem;
  }

  .reflection .narrative .friendly strong {
    font-size: 0.16rem;
  }

  .reflection .narrative .friendly ol {
    gap: 0.1rem;
  }

  .reflection .narrative .friendly ol li a {
    font-size: 0.16rem;
  }

  .reflection .emblem {
    margin-bottom: 0.2rem;
  }

  .reflection .emblem .shared a {
    gap: 0.05rem;
  }

  .reflection .emblem .shared a img {
    height: 0.62rem;
  }

  .reflection .emblem .shared a strong {
    font-size: 0.16rem;
  }

  .reflection .resource {
    grid-template-columns: auto;
    gap: 0.1rem;
  }

  .reflection .resource .plating {
    gap: 0.1rem;
  }

  .reflection .resource .plating .pivot {
    padding: 0.1rem;
  }

  .reflection .resource .plating .pivot dl {
    padding-left: 0.15rem;
  }

  .reflection .resource .plating .pivot dl::after {
    width: 0.04rem;
  }

  .reflection .resource .plating .pivot dl dt {
    height: 0.24rem;
    line-height: 0.24rem;
    font-size: 0.16rem;
    margin-bottom: 0.18rem;
  }

  .reflection .resource .plating .pivot dl dt::after {
    left: -0.15rem;
    width: 0.04rem;
  }

  .reflection .resource .plating .pivot dl dd {
    padding: 0.08rem;
    margin-bottom: 0.2rem;
    font-size: 0.16rem;
  }

  .reflection .resource .plating .pivot dl dd::after {
    left: -0.15rem;
    width: 0.04rem;
    height: 0.04rem;
  }

  .reflection .stratify .rubric {
    margin: 0.15rem 0;
  }

  .reflection .stratify .rubric strong {
    gap: 0.05rem;
    font-size: 0.18rem;
  }

  .reflection .stratify .rubric strong::before {
    width: 0.04rem;
  }

  .reflection .stratify .parallel dl {
    border-radius: 0.03rem;
  }

  .reflection .stratify .parallel dl dt {
    padding: 0.15rem 0.1rem;
  }

  .reflection .stratify .parallel dl dt .earlier {
    gap: 0.05rem;
  }

  .reflection .stratify .parallel dl dt span {
    font-size: 0.16rem;
  }

  .reflection .stratify .parallel dl dd {
    padding: 0.15rem 0.1rem;
  }

  .reflection .stratify .parallel dl dd .group .system a {
    gap: 0.05rem;
  }

  .reflection .stratify .parallel dl dd .group .system a img {
    width: 0.25rem;
  }

  .reflection .stratify .parallel dl dd .earlier time,
  .reflection .stratify .parallel dl dd .earlier a,
  .reflection .stratify .parallel dl dd .group .system strong,
  .reflection .stratify .parallel dl dd .group span,
  .reflection .stratify .parallel dl dd .advance a {
    font-size: 0.16rem;
  }

  .reflection .stratify .among {
    grid-template-columns: auto;
    gap: 0.1rem;
  }
}

@keyframes scaling {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5%) scale(1.1);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}



.contain {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 13px 0;
  gap: 5px;
}

.contain li {
  position: relative;
  padding: 0 10px;
  cursor: pointer;
}

.contain li::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 100%);
  bottom: 0;
  height: 2px;
  width: 0;
  background: rgba(49, 167, 222, 0.7);
  transition: all 0.3s;
}

.contain li.is_active::after {
  width: 100%;
}

.contain li.is_active span {
  color: #31a7de !important;
}

.contain li:hover::after {
  width: 100%;
}

.contain li:hover span {
  color: #31a7de !important;
}

.contain li span {
  font-size: 14px;
  font-weight: bold;
  color: #323a48;
}

@media screen and (max-width: 768px) {
  .contain {
    margin: 12px 0;
    gap: 5px;
  }

  .contain li {
    padding: 0 5px;
  }

  .contain li span {
    font-size: 12px;
  }
}

.baskLive {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px;
  display: none;
}

.baskLive .period {
  display: flex;
  flex-direction: column;
}

.baskLive .period time {
  padding: 0 3px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #323a48;
}

.baskLive .deliver {
  width: 100%;
  border: 1px solid #ebebeb;
}

.baskLive .deliver li {
  display: grid;
  align-items: center;
  gap: 7px;
  height: 48px;
  box-sizing: border-box;
  grid-template-columns: auto 5fr 1fr;
  padding: 10px;
  border-top: 1px solid #ebebeb;
}

.baskLive .deliver li .plump {
  width: 30px;
  height: fit-content;
}

.baskLive .deliver li .plump img {
  width: 100%;
  height: auto;
}

.baskLive .deliver li p {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  color: #323a48;
}

.baskLive .deliver li .condition {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px;
  user-select: none;
}

.baskLive .deliver li .condition img {
  width: 24px;
  height: auto;
}

.baskLive .deliver li .condition span {
  font-size: 14px;
  letter-spacing: 3px;
  white-space: nowrap;
  text-align: center;
  color: #323a48;
}


.text_foot_live {
  display: grid;
  grid-template-columns: auto 1fr;
}

.text_foot_live .quantum {
  width: fit-content;
}

.text_foot_live .quantum ul {
  display: flex;
  flex-direction: column;
}

.text_foot_live .quantum ul li {
  padding: 0 3px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text_foot_live .quantum ul li span {
  font-size: 14px;
  color: #323a48;
}

.text_foot_live .describe {
  width: 100%;
  border: 1px solid #ebebeb;
}

.text_foot_live .describe ul {
  width: 100%;
}

.text_foot_live .describe ul li {
  display: grid;
  align-items: center;
  gap: 7px;
  height: 48px;
  box-sizing: border-box;
  grid-template-columns: auto 1fr auto;
  padding: 10px;
  border-top: 1px solid #ebebeb;
}

.text_foot_live .describe ul li:first-child {
  border-top: none;
}

.text_foot_live .describe ul li .icon_live {
  width: 18px;
  height: 18px;
}

.text_foot_live .describe ul li p {
  width: 100%;
  font-size: 14px;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #323a48;
}

.text_foot_live .describe ul li .plump {
  width: 22px;
  height: auto;
}

.schedule-columnn {
  --theme--color: #981f41;
  --theme--deputy--color: #fff;
  width: 100%;
  height: fit-content;
  display: grid;
  background: var(--theme--deputy--color);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 20px;
}

.schedule-columnn li {
  height: 58px;
  cursor: pointer;
}

.schedule-columnn li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

}

.schedule-columnn li span {
  font-size: 16px;
  font-weight: bold;
}

.schedule-columnn li img {
  height: 28px;
  width: 28px;
  border-radius: 50%;
}

.schedule-columnn li.active,
.schedule-columnn li:hover {
  background: var(--theme--color);
  color: var(--theme--deputy--color);
}

.schedule-columnn {
  --theme--color: #981f41;
  --theme--deputy--color: #fff;
  width: 100%;
  height: fit-content;
  display: grid;
  background: var(--theme--deputy--color);
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 20px;
}

.schedule-columnn li {
  height: 58px;
  cursor: pointer;
}

.schedule-columnn li a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

}

.schedule-columnn li span {
  font-size: 16px;
  font-weight: bold;
}

.schedule-columnn li img {
  height: 28px;
  width: 28px;
  border-radius: 50%;
}

.schedule-columnn li.active,
.schedule-columnn li:hover {
  background: var(--theme--color);
  color: var(--theme--deputy--color);
}

.schedule-nav {
  width: 100%;
  overflow-x: auto;
}

.schedule-nav ul {
  --theme--color: #981f41;
  --theme--deputy--color: #fff;
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.schedule-nav ul li {
  min-width: 138px;
  height: 60px;
  background: var(--theme--deputy--color);
}

.schedule-nav ul li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  color: #010b12;
  font-weight: bold;
  cursor: pointer;
}

.schedule-nav ul li span {
  font-size: 14px;
  font-weight: bold;
}

.schedule-nav ul li.active,
.schedule-nav ul li:hover {
  background: var(--theme--color);
}

.schedule-nav ul li.active a,
.schedule-nav ul li:hover a {
  color: var(--theme--deputy--color);

}

@media screen and (max-width: 768px) {
  .match_outer {
    padding: 0 1.333vw;
    box-sizing: border-box;
  }

  .match_outer .schedule-columnn {
    margin-bottom: 2.667vw;
  }

  .match_outer .schedule-columnn li {
    height: 7.733vw;
  }

  .match_outer .schedule-columnn li a {
    gap: 1.333vw;
  }

  .match_outer .schedule-columnn li span {
    font-size: 2.133vw;
  }

  .match_outer .schedule-columnn li img {
    height: 3.733vw;
    width: 3.733vw;
  }

  .match_outer .schedule-nav {
    overflow-x: auto;
    margin-bottom: 1.333vw;
  }

  .match_outer .schedule-nav ul {
    width: fit-content;
    gap: 1.067vw;
    margin-bottom: 1.333vw;
  }

  .match_outer .schedule-nav li {
    min-width: 26.8vw;
    height: 8vw;
  }

  .match_outer .schedule-nav li time,
  .match_outer .schedule-nav li span {
    font-size: 2.2vw;
  }
}