html,
body {
  position: relative;
  height: 100%;
}


@font-face {
  font-family: "hanyishuhuntijian";
  src: url("../font/hanyishuhuntijian.ttf");
}

:root {
  --content-left-radius: 2rem;
  --content-left-offset-x: 0rem;
  --content-left-target-angle: 180;
  --content-left-click-step: 60;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
  color: #000;
  margin: 0;
  padding: 0;
}

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

.swiper-slide {
  text-align: center;
  font-size: 1.125rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  width: 100%;
  height: 100%;
  position: relative;
  /* background: url(../img/KV.jpg) center center / 100% 100% no-repeat; */
}

.content .logo {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 2.01rem;
  height: 1.33rem;
  background: url(../img/logo.png) center center / cover no-repeat;
}

.contentList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url(../img/bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  top: 0rem;
  left: 0rem;
}

.contentList .mainContent {
  width: 15rem;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contentListTop {
  width: 10rem;
  height: 1.375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: url('../img/2025.png') left center / contain no-repeat;
  padding-bottom: 0.1rem;
}

.contentListCenter {
  position: relative;
  width: 12rem;
  height: 5.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: url('../img/contentBg.png') left center / contain no-repeat;
}

.contentListCenter_text {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 100%;
}

.Main_text_title,
.sub_text_item {
  width: 0.45rem;
  font-family: 'hanyishuhuntijian';
}

.Main_text_title {
  font-size: 0.5rem;
  margin-top: -1rem;
  background: linear-gradient(to bottom, #f8ca72, #fdf1da);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sub_text_item {
  font-size: 0.3rem;
  margin-top: 0.5rem;
  margin-left: 0.1rem;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.spanI {
  font-size: 0.3rem;
  margin: 0.1rem 0;
}

.sub_text_item span {
  background: linear-gradient(to bottom, #f8ca72, #fdf1da);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.sub_text_item .spanT {
  display: block;
  margin-bottom: 0.4rem;
}

.contentListCenter_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.contentListCenter_list>* {
  width: 23%;
  height: 2rem;
  /* 略微小于25%以留出间�? */
  margin: 0 0.08rem 0.08rem 0.08rem;
  box-sizing: border-box;
}

.contentListCenter_list_item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contentListCenter_list_item .logo {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  background: url('../img/logoBg.png') left center / contain no-repeat;
}

.empty-state {
  text-align: center;
  width: 100%;
  font-size: 0.64rem;
  color: #5f5f5f;
  font-family: 'hanyishuhuntijian';
}

.contentListCenter_list_item .logo img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  position: absolute;
  top: 0.01rem;
  left: 0.05rem;
  border-radius: 50%;
}

.contentListCenter_list_item .name {
  width: 0.3rem;
  height: 1.6rem;
  font-size: 0.16rem;
  color: #fff;
  font-family: 'hanyishuhuntijian';
  background: url('../img/characterNameBg.png') left center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.03rem;
}

.contentListCenter_list_item .Sect {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.3rem;
  height: 1rem;
  font-size: 0.15rem;
  color: #315f76;
  font-family: 'hanyishuhuntijian';
  background: url('../img/silid.png') center center / contain no-repeat;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.03rem;
  margin-top: 1rem;

}

.yearSelect {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  position: absolute;
  top: 0.35rem;
  right: 0;
}

.yearSelect span {
  font-size: 0.15rem;
  margin-right: 0.2rem;
  color: #1a3045;
  font-family: 'hanyishuhuntijian';
}

select {
  width: 1.2rem;
  height: 0.3rem;
  font-size: 0.2rem;
  color: #1a3045;
  text-align: center;
  border: 0.01rem solid #1a3045;
  border-radius: 0rem;
  outline: none;
  box-sizing: border-box;
}

.btn {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(../img/btn.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0.05rem;
  right: 0.5rem;
  cursor: pointer;
}


.contentCenterList {
  width: 14rem;
  height: 5.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.contentList_item {
  width: 3rem;
  height: 4.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/Player1.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.contentList_item:nth-child(2n) {
  align-self: flex-end;
}

.textname {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 2.5rem;
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.textname .name {
  width: 1.25rem;
  font-size: 0.25rem;
  text-align: center;
  color: #5b3327;
  font-weight: bold;
  background-image: url(../img/dian.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.sect {
  display: flex;
  flex-direction: column;
  color: #703b13;
  font-size: 0.2rem;
}

.contentBtn {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 1.5rem;
  box-sizing: border-box;
  position: relative;
}

.contentBtn_item {
  width: 2.6rem;
  height: 0.82rem;
  font-family: 'hanyishuhuntijian';
  color: #167590;
  font-size: 0.36rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/SelectA_1.png) left center / cover no-repeat;
  cursor: pointer;
}

.contentBtn_item.active {
  background: url(../img/SelectA.png) left center / 2.6rem 0.82rem no-repeat;
  color: #ffd37a;
}

.remark {
  font-size: 0.24rem;
  color: #2a476a;
  font-family: 'hanyishuhuntijian';
  position: absolute;
  bottom: -0.2rem;
  left: 50%;
  transform: translateX(-50%);
}

.remark_item {
  position: relative;
}

.remark_icon {
  width: 0.2rem;
  height: 0.2rem;
  background: url(../img/kj.png) center center / contain no-repeat;
  position: absolute;
  top: 0rem;
  left: -0.3rem;
}

.remark_icon1 {
  width: 0.2rem;
  height: 0.2rem;
  background: url(../img/kj.png) center center / contain no-repeat;
  position: absolute;
  top: 0rem;
  right: -0.3rem;
}

.contentListleft {
  width: 2rem;
  height: 7rem;
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translate(75%, -50%);
  /* 移除圆形布局相关样式 */
  transition: transform 0.5s ease;
}

.contentListItems {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../img/time.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contentListLeft_item {
  width: 1.5rem;
  height: 0.5rem;
  font-size: 0.25rem;
  color: #484a4a;
  background: none;
  position: static;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 1.1rem;
  margin-top: 0.2rem;
  cursor: pointer;
}

.contentListLeft_item.selected {
  color: #ffffff;
  background: url(../img/Selected.png) left center / contain no-repeat;
  font-size: 0.28rem;
}



.records {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpg) left center / cover no-repeat;
  position: relative;
  top: 0rem;
  left: 0rem;
}

.records .mainrecords {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.records .mainrecords .recordsListTop {
  width: 10rem;
  height: 1.375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: url('../img/optitle.png') left center / cover no-repeat;
  padding-bottom: 0.1rem;
}

.records .recordsList_item {
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  width: 100%;
  height: 6rem;
  box-sizing: border-box;
  position: relative;
}

.records .recordsList_item .table_head {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 14.60rem;
  height: 0.66rem;
  background: url('../img/thead.png') left center / 14.60rem 0.66rem no-repeat;
}

.records .recordsList_item .table_head_th {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 0.3rem;
  color: #fff5c6;
  font-family: 'hanyishuhuntijian';
}

.records .recordsList_item .th1 {
  width: 1.5rem;
}

.records .recordsList_item .th2 {
  width: 1.34rem;
  box-sizing: border-box;
}

.records .recordsList_item .th3 {
  width: 1.55rem;
}


.records .recordsList_item .table_body {
  width: 14.54rem;
  height: 5.92rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  box-sizing: border-box;
  background: url('../img/tbodybg.png') left center / 14.54rem 5.92rem no-repeat;
}

.table_body_hiden {
  width: 14.54rem;
  height: 5.7rem;
  display: flex;
  flex-wrap: wrap;
  padding: 0rem 0.17rem;
  margin-top: 0.1rem;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.table_body_tr {
  min-width: 3.19rem;
  height: 0.74rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-left: 0.27rem;
  margin-top: 0.35rem;
  position: relative;
}


.table_body_tr_center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.19rem;
  height: 0.74rem;
  font-size: 0.3rem;
  font-family: 'hanyishuhuntijian';
  background: url('../img/teambg.png') center center / cover no-repeat;
  cursor: pointer;
  position: relative;
}
.rank8 {
  width: .6rem;
  height: .22rem;
  position: absolute;
  top: 0;
  right: .3rem;
  background: url('../img/8_ico.png') center center / contain no-repeat;
}
.rank16 {
  width: .6rem;
  height: .22rem;
  position: absolute;
  top: 0;
  right: .3rem;
  background: url('../img/16_ico.png') center center / contain no-repeat;
}
.rank32 {
  width: .6rem;
  height: .22rem;
  position: absolute;
  top: 0;
  right: .3rem;
  background: url('../img/32_ico.png') center center / contain no-repeat;
}

.table_body_td {
  font-size: 0.2rem;
  color: #1c2f2f;
  text-align: center;
}

.table_body_tr_td .th3 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.table_body_tr_td .th3 span {
  width: 2rem;
  margin: 0.1rem 0;
}

.table_botm {
  position: absolute;
  bottom: 0rem;
  left: 0.05rem;
  width: 14.54rem;
  height: 0.12rem;
  background: url('../img/silidbotm.png') left center / 14.54rem 0.12rem no-repeat;
}


/* 防止表格行和单元格在点击时显示背景颜�?? */
.records .recordsList_item tr,
.records .recordsList_item td {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
}

/* 确保点击时不改变背景�?? */
.records .recordsList_item tr:active,
.records .recordsList_item td:active {
  background-color: transparent !important;
}


.recordsBtn {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 1.5rem;
  box-sizing: border-box;
  display: none;
}

.recordsBtn_item {
  width: 2.6rem;
  height: 0.82rem;
  font-family: 'hanyishuhuntijian';
  color: #167590;
  font-size: 0.36rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../img/SelectA_1.png) left center / contain no-repeat;
  cursor: pointer;
}

.recordsBtn_item.active {
  background: url(../img/SelectA.png) left center / 2.6rem 0.82rem no-repeat;
  color: #ffd37a;
}

.records .recordsListLeft {
  width: 2rem;
  height: 7rem;
  position: absolute;
  top: 42%;
  right: 6%;
  transform: translate(75%, -50%);
  /* 移除圆形布局相关样式 */
  transition: transform 0.5s ease;
}

.records .recordsListItems {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../img/time.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.records .recordsListLeft_item {
  width: 1.6rem;
  height: 0.43rem;
  font-size: 0.18rem;
  color: #74777a;
  background: none;
  position: absolute;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 1.1rem;
  margin-top: 0.2rem;
  cursor: pointer;
  font-family: 'hanyishuhuntijian';
}

.records .recordsListLeft_item:nth-child(1) {
  top: 0.65rem;
}

.records .recordsListLeft_item:nth-child(2) {
  top: 1.4rem;
}

.records .recordsListLeft_item:nth-child(3) {
  top: 2.20rem;
}

.records .recordsListLeft_item:nth-child(4) {
  top: 2.95rem;
}

.records .recordsListLeft_item:nth-child(5) {
  top: 3.75rem;
}

.records .recordsListLeft_item:nth-child(6) {
  top: 4.5rem;
}

.records .recordsListLeft_item:nth-child(7) {
  top: 5.25rem;
}

.records .recordsListLeft_item:nth-child(8) {
  top: 6.05rem;
}

.table_top {
  position: absolute;
  top: -0.05rem;
  left: 0.05rem;
  width: 14.54rem;
  height: 0.12rem;
  background: url('../img/silidbotm.png') left center / 14.54rem 0.12rem no-repeat;
  z-index: 100;
}

.recordsListLeft_item.selected {
  color: #ffffd8;
  background: url(../img/Selected.png) left center / contain no-repeat;
  font-size: 0.25rem;
}

.recordsList_item_th {
  width: 2rem;
}

.recordsList_item_th_b {
  width: 2.8rem;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* 列表依次进入动画 */
@keyframes listItemSlideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 初始状�? - 隐藏所有列表项 */
.contentCenterList .contentList_item {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* 列表项动画类 */
.contentList_item.animate-in {
  animation: listItemSlideIn 0.6s ease forwards;
}

.table_body_tr_pop {
  position: fixed;
  top: 0.7rem;
  left: -0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 3.71rem;
  height: 4.38rem;
  background: url(../img/hoverbg.png) left center / 3.71rem 4.38rem no-repeat;
  padding: 0.15rem 0.24rem;
  box-sizing: border-box;
  z-index: 99999;
}

.team_name {
  text-align: start;
  font-size: 0.24rem;
  color: #584a2f;
}

.team_server {
  text-align: start;
  font-size: 0.24rem;
  color: #584a2f;
}

.team_item {
  display: flex;
  height: 0.42rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.team_item_left,
.team_item_right {
  font-size: 0.2rem;
  color: #584a2f;
}

.team_silid {
  width: 3.33rem;
  height: 0.08rem;
  background: url(../img/team_silid.png) left center / 3.33rem 0.08rem no-repeat;
  margin: 0.01rem 0rem 0rem 0rem;
}

.team_silid1 {
  position: absolute;
  bottom: -0.05rem;
  left: 50%;
  transform: translatex(-50%);
  width: 3.33rem;
  height: 0.08rem;
  background: url(../img/team_silid.png) left center / 3.33rem 0.08rem no-repeat;
}