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

@font-face {
  font-family: "姹変华涔﹂瓊浣撶�?";
  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;
  font-family: "姹変华绮楀畫绠�?";
}

.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 {
  width: 100%;
  height: 100%;
  background-image: url(../img/KV.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

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

.contentListRight {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 2rem;
  height: 7rem;
  background: url(../img/title.png) left center / contain no-repeat;
  position: absolute;
  top: 0rem;
  left: 0.5rem;
}

.contentListRight>.listtext {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 0.25rem;
  text-align: center;
  color: #855634;

  background-image: url(../img/titleBg.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: -0.6rem;
  margin-top: 0.1rem;
}

.contentListRight>.listtextTitle {
  font-size: 0.5rem;
  text-align: center;
  color: #a94e02;

  writing-mode: vertical-rl;
  /* 鍨傜洿鏂瑰悜浠庡彸鍒板乏 */
  text-orientation: upright;
  /* 淇濊瘉鏂囧瓧鐩寸珛鏄剧ず */
  letter-spacing: 0.1rem;
  /* 璋冩暣瀛楅棿锟�?? */
  line-height: 1.5;
  /* 璋冩暣琛岄珮 */
  margin-left: -0.7rem;
  margin-top: 0.1rem;
}

.contentListRight>.listtextTitle>.title {
  font-size: 0.55rem;
  color: #935534;
}

.contentListRight>.listtextTitle>.subtitle {
  font-size: 0.3rem;
  color: #9f6731;
}

.contentListTop {
  width: 100%;
  height: 1.375rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: url("../img/silid.png") no-repeat bottom center;
  background-size: 100% 0.1rem;
  padding-bottom: 0.1rem;
}

/* .silid {
    width: 100%;
    height: 0.1rem;
    background-image: url(../img/silid.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0.1rem;
    z-index: 1;
} */

.champion {
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(../img/champion.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: -0.1rem;
  left: 3rem;
}

.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;
}

.contentListCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.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;
}

.position {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.3rem;
  height: 0.6875rem;
  color: #fffced;
  background-image: url(../img/position.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  font-size: 0.2rem;
  top: 0.1rem;
  left: 0.4rem;
  z-index: 1;
}

.logo {
  width: 1.7rem;
  height: 1.7rem;

  position: absolute;
  top: 0.35rem;
  left: 0.3rem;
  object-fit: contain;
}

.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.5rem;
  font-size: 0.2rem;
  text-align: center;
  color: #5b3327;
  background: url(../img/dian.png) left center / contain 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;
}

.contentBtn_item {
  width: 3rem;
  height: 2rem;
  color: #9d4706;
  font-size: 0.25rem;

  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/SelectA_1.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.animate-in {
  animation: fadeIn 1s ease;
}

.contentBtn_item.active {
  background-image: url(../img/SelectA.png);
  color: #ffffff;
}

.contentListleft {
  width: 7rem;
  height: 7rem;
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(75%, -50%);
  border-radius: 50%;
  /* 娣诲姞鏃嬭浆杩囨浮鏁堟灉 */
  transition: transform 0.5s ease;
}

.contentListItems {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../img/time.png);
  background-size: 30% 100%;
  background-position: left center;
  background-repeat: no-repeat;
}

.contentListLeft_item {
  --angle: 0deg;
  --r: var(--content-left-radius);
  --dx: var(--content-left-offset-x);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.25rem;
  color: #ffffff;
  background-color: #fff;
  position: absolute;
  /* 基于contentListItems的中心点定位，使用百分比确保响应�? */
  left: 40%;
  top: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--r)) rotate(calc(-1 * var(--angle))) translateX(var(--dx)) rotate(0deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

/* 瀹氫綅鍒板渾褰㈣竟妗嗙嚎锟�? */
.contentListLeft_item:nth-child(1) {
  /* 锟狡筹拷锟斤拷锟皆讹拷位锟斤拷使锟斤拷锟斤拷转锟斤拷锟侥碉拷 (225px, 280px) 锟斤拷锟斤拷锟斤拷转锟斤拷位 */
  --angle: 120deg;
  --content-left-radius: 3rem;
}

.contentListLeft_item:nth-child(2) {
  /* 默锟斤拷状态锟斤拷目锟斤拷嵌锟�?180deg时锟斤拷元锟截撅拷锟斤拷 (225px, 280px) */
  --angle: 180deg;
  --content-left-radius: 3rem;
}

.contentListLeft_item:nth-child(3) {
  /* 锟狡筹拷锟斤拷锟皆讹拷位锟斤拷使锟斤拷锟斤拷转锟斤拷锟侥碉拷 (225px, 280px) 锟斤拷锟斤拷锟斤拷转锟斤拷位 */
  --angle: 240deg;
  --content-left-radius: 3rem;
}

/* 閫変腑鐘舵€佺殑鏍峰紡淇濈暀 */
.contentListLeft_item.selected {
  background: url(../img/Selected.png) left center / cover no-repeat;
}

.records {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: url(../img/bg.png) left center / cover no-repeat;
  position: relative;
}

.records .contentListRight {
  width: 2rem;
  height: 7rem;
  background: url(../img/title.png) left center / contain no-repeat;
  position: absolute;
  top: 0rem;
  left: 0.5rem;
  display: flex;
  align-items: center;
}

.records .contentListRight .listtextTitle {
  color: #a97143;
  font-size: 0.55rem;
}

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

.records>.recordsListCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.records .recordsCenterList {
  width: 14rem;
  height: 5.5rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.records .recordsList_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 6rem;
  background: url("../img/TableBg.png") left center / contain no-repeat;
  overflow: hidden;
}

.records .recordsList_item table {
  width: 9rem;
  height: 4.5rem;
  border-collapse: collapse;
  background: url(../img/tableList.png) left center / cover no-repeat;
  box-sizing: border-box;
}


.records .recordsList_item thead tr th {
  color: #9d4706;
  font-size: 0.25rem;
  width: 1.6rem;
  height: 0.6rem;

  text-align: center;
}

.records .recordsList_item tbody tr {
  width: 1.6rem;
  height: 0.5rem;

}

.records .recordsList_item tr td {
  color: #9d4706;
  font-size: 0.25rem;
  width: 1.75rem;
  height: 0.125rem;
  text-align: center;
  border-bottom: 1px solid #e3b152;
}

.records .recordsList_item tr td:nth-child(2) {
  color: #cc5b28;
}

.records .recordsList_item tr:last-child td {
  border-bottom: none;
}

/* 闃叉琛ㄦ牸琛屽拰鍗曞厓鏍煎湪鐐瑰嚮鏃舵樉绀鸿儗鏅锟�?? */
.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;
}

.records .tips {
  width: 100%;
  height: 0.5rem;
  font-size: 0.25rem;
  color: #9d4706;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /* 闃叉鐐瑰嚮鏃舵樉绀鸿儗鏅锟�?? */
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
}

/* 纭繚鐐瑰嚮鏃朵笉鏀瑰彉鑳屾櫙锟�?? */
.records .tips:active {
  background-color: transparent !important;
}

.recordsBtn {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.recordsBtn_item {
  width: 3rem;
  height: 2rem;
  color: #9d4706;
  font-size: 0.25rem;

  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../img/SelectA_1.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.records .recordsListLeft {
  width: 7rem;
  height: 7rem;
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(75%, -50%);
  border-radius: 50%;
  /* 娣诲姞鏃嬭浆杩囨浮鏁堟灉 */
  transition: transform 0.5s ease;
}

.records .recordsListItems {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../img/time.png);
  background-size: 30% 100%;
  background-position: left center;
  background-repeat: no-repeat;
}

.records .recordsListLeft_item {
  --angle: 0deg;
  --r: var(--content-left-radius);
  --dx: var(--content-left-offset-x);
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.25rem;
  color: #ffffff;
  background-color: #fff;
  position: absolute;
  /* 基于recordsListItems的中心点定位，使用百分比确保响应�? */
  left: 50%;
  top: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--r)) rotate(calc(-1 * var(--angle))) translateX(var(--dx)) rotate(0deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 瀹氫綅鍒板渾褰㈣竟妗嗙嚎涓� */
.records .recordsListLeft_item:nth-child(1) {
  --content-left-radius: 3rem;
  /* transform: translate(-50%, -50%); */
  --angle: 120deg;
}

.records .recordsListLeft_item:nth-child(2) {
  --content-left-radius: 3rem;
  /* transform: translate(-50%, -50%); */
  --angle: 180deg;
}

.records .recordsListLeft_item:nth-child(3) {
  --angle: 240deg;
  --content-left-radius: 3rem;
}

/* 閫変腑鐘舵€佺殑鏍峰紡淇濈暀 */
.records .recordsListLeft_item.selected {
  background: url(../img/Selected.png) left center / cover no-repeat;
}

/* 寮规鏍峰紡 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal.show {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.modal_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../img/popbg.png") left center / contain no-repeat;
  width: 8rem;
  height: 8rem;
  animation: slideIn 0.3s ease forwards;
}

.modal.show .modal_content {
  position: relative;
  animation: slideIn 0.3s ease forwards 0.1s;
}

.modal_title {
  font-size: 0.25rem;
  color: #9d4706;

}

.modal_close {
  width: 0.5rem;
  height: 0.5rem;
  cursor: pointer;
  position: absolute;
  top: 0.3125rem;
  right: -0.5rem;
  background: url(../img/close.png) left center / cover no-repeat;
}

.modal_body {
  width: 6rem;
  height: 6rem;
}

.team_info {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.team_logo {
  width: 6.25rem;
  height: 6.25rem;
  margin-right: 1.25rem;
}

.team_logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #e3b152;
}

.team_details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  text-align: left;
}

.team_name {
  font-size: 0.25rem;

  color: #9d4706;
}

.team_server {
  font-size: 0.25rem;
  color: #9d4706;
}

.member_list {
  width: 100%;
  margin-top: 0.1rem;
  /* 璁剧疆鍥哄畾楂樺害锛屽綋鍐呭瓒呭嚭鏃跺彲浠ユ粴锟�? */
  height: 5.1rem;
  /* 鍏佽鍨傜洿婊氬�? */
  overflow-y: auto;
  /* 闅愯棌婊氬姩鏉′絾淇濈暀婊氬姩鍔熻兘 */
  -ms-overflow-style: none;
  /* IE 锟�? Edge */
  scrollbar-width: none;
  /* Firefox */
  /* 闃叉婊氬姩鏃惰Е鍙戦〉闈㈠叾浠栧尯鍩熺殑婊氬�? */
  touch-action: pan-y;
}

/* 闅愯棌WebKit娴忚鍣ㄧ殑婊氬姩锟�?? */
.member_list::-webkit-scrollbar {
  display: none;
}

.member_item {
  width: 100%;
  height: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 浣跨敤鍥剧墖浣滀负搴曢儴杈规鑳屾櫙 */
  background: url("../img/bottomSilid.png") no-repeat bottom center;
  background-size: 100% 0.1rem;
  padding: 0 0.2rem 0.1rem 0.2rem;
  margin-bottom: 0.1rem;
  box-sizing: border-box;
}

.member_left {
  width: 2.5rem;
  display: flex;
  align-items: center;
}

.member_position {
  width: 0.3rem;
  height: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.2rem;

  color: #753b21;
  background: url(../img/position.png) left center / contain no-repeat;
  margin-right: 0.1rem;
}

.member_info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 0.5rem;
  text-align: center;
  font-size: 0.25rem;
  color: #753b21;
}

.member_info span:last-child {
  text-align: start;
}

.member_info .member_right {
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.member_right .member_server {
  font-size: 0.25rem;

  color: #c35802;
  text-align: end;
  margin-right: 0.25rem;
}

.member_assembly {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.25rem;

  color: #753b21;
}

/* 鍔ㄧ敾鏁堟灉 */
@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 {
  animation: fadeIn 1s ease;
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* 鍒楄〃椤瑰姩鐢荤�? */
.contentList_item.animate-in {
  animation: listItemSlideIn 0.6s ease forwards;
}


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

.member_right .member_server {
  font-size: 0.25rem;

  color: #c35802;
  text-align: end;
  margin-right: 0.25rem;
}

.member_assembly {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.25rem;

  color: #753b21;
}

/* 鍔ㄧ敾鏁堟灉 */
@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 {
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* 鍒楄〃椤瑰姩鐢荤�? */
.contentList_item.animate-in {
  animation: listItemSlideIn 0.6s ease forwards;
}