@charset "UTF-8";

/* 全局样式修改 */
html,
body,
div,
span,
iframe,
map,
font,
img,
a img,
samp,
strong,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
b,
p,
blockquote,
a,
address,
code,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
table,
tr,
td,
th {
  padding: 0;
  margin: 0;
  border: 0;
  font-weight: normal;
}

input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

ol,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

i {
  font-style: normal;
}

a {
  text-decoration: none;
  color: initial;
  color: #0b0b0d;
}

a:focus {
  outline: none;
}

a.hidefocus {
  outline: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

input[type="text"],
input[type="submit"],
input[type="button"] {
  -webkit-appearance: none;
  /*去除iPhone input默认样式}*/
}

input {
  outline: none;
}

.clearfix:after {
  display: block;
  content: "";
  clear: both;
  height: 0;
  overflow: hidden;
}

.clearfix {
  zoom: 1;
}

body {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  font-size: 14px;
}

.clear {
  clear: both;
}

div,
ul,
li,
input {
  box-sizing: border-box;
}

em,
i,
strong {
  font-style: normal;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background: #6d3785;
}

::-webkit-scrollbar-track {
  border-radius: 1em;
  background-color: #aa76db;
}

.w {
  width: 1024px;
  margin: 0 auto;
}

figure {
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .w {
    width: 100%;
  }
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 77px;
  background: #6d3785;
  z-index: 99;
}

.header .inclusion {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
}

.header .inclusion .logo {
  width: 146px;
  height: fit-content;
}

.header .inclusion .logo a {
  display: block;
  width: 100%;
  height: fit-content;
}

.header .inclusion .logo a img {
  width: 100%;
  height: fit-content;
}

.header .inclusion nav {
  flex: 1;
  height: 100%;
  overflow: hidden;
}

.header .inclusion nav ul {
  width: 100%;
  overflow-x: auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}

.header .inclusion nav ul li {
  white-space: nowrap;
  user-select: none;
  border-radius: 4px;
}

.header .inclusion nav ul li a {
  display: block;
  padding: 5px 22px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.header .inclusion nav ul li.pitch,
.header .inclusion nav ul li:hover {
  background: #16a7a0;
}

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

  .header .inclusion {
    gap: 0.24rem;
    flex-direction: column;
  }

  .header .inclusion .logo {
    width: 2.21333rem;
  }

  .header .inclusion nav {
    width: 100%;
    flex: auto;
  }

  .header .inclusion nav ul {
    gap: 0.08rem;
  }

  .header .inclusion nav ul li {
    border-radius: 0.08rem;
  }

  .header .inclusion nav ul li a {
    padding: 0.10667rem 0.29333rem;
    font-size: 0.32rem;
  }
}


.pages {
  width: 100%;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  margin-top: 20px;
}

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

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

.pages .pagination li:hover {
  background: #16a7a0;
  border-color: transparent;
}

.pages .pagination li:hover a {
  color: #fff;
}

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

.pages .pagination .active {
  background: #16a7a0;
  border-color: transparent;
}

.pages .pagination .active span {
  color: #fff;
}

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

.pages .pagination .disabled span {
  color: #fff;
  white-space: nowrap;
}

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

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

  .pages .pagination {
    gap: 0.13333rem;
  }

  .pages .pagination li {
    padding: 0.06667rem 0.13333rem;
    border-radius: 0.06667rem;
    border-width: 0.04rem;
  }

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

  .pages .pagination li span,
  .pages .pagination li a {
    font-size: 0.34667rem;
  }
}

.main {
  background: linear-gradient(to left, #84498a, #557194);
  padding: 60px 0;
}

.main.increase {
  padding: 96px 0;
}

.main .dispute {
  background: url(../stillness/images/banner.png) no-repeat;
  background-size: 100%;
  background-position: top;
  padding: 0 10px;
  padding-top: 127px;
  box-sizing: border-box;
}

.main .dispute,
.main .whole,
.main .procession {
  width: 100%;
  margin-bottom: 56px;
}

@media screen and (max-width:768px) {
  .main .dispute {
    padding: 0 0.15rem;
    padding-top: 2rem;
  }
}

.main .rubric {
  display: flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  user-select: none;
  margin-bottom: 22px;
}

.main .rubric strong {
  font-size: 22px;
  color: #fff;
  font-weight: bold;
}

.main .rubric ol {
  flex: 1;
  height: fit-content;
  overflow-x: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.main .rubric ol li {
  font-size: 14px;
  border: 1px solid #00968d;
  padding: 2px 16px;
  border-radius: 4px;
}

.main .rubric ol li:hover {
  border-color: transparent;
  background: #16a7a0;
}

.main .rubric ol li.picking {
  border-color: transparent;
  background: #16a7a0;
}

.main .rubric ol li a {
  color: #fff;
}

.main .rubric .extra {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main .rubric .extra em {
  font-size: 13px;
  font-weight: bold;
}

.main .rubric .extra span {
  font-size: 18px;
}

.main .rubric .extra em,
.main .rubric .extra span {
  color: #fff;
}

.main .assemble {
  width: 100%;
  overflow: hidden;
  border: 1px solid #00968d;
}

.main .assemble ul {
  background: rgba(70, 52, 85, 0.7);
  white-space: nowrap;
  user-select: none;
}

.main .assemble ul li {
  border-bottom: 1px solid #7f407d;
  padding: 20px;
  box-sizing: border-box;
  display: grid;
  align-items: center;
  grid-template-columns: 3fr 4fr auto;
  gap: 10px;
}

.main .assemble ul li:hover {
  background: #16a7a0;
}

.main .assemble ul li span,
.main .assemble ul li em,
.main .assemble ul li strong,
.main .assemble ul li time {
  color: #fff;
}

.main .assemble ul li .spare {
  display: grid;
  align-items: center;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 6px;
}

.main .assemble ul li .spare .species {
  width: 100%;
  overflow: hidden;
}

.main .assemble ul li .spare .species a {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 6px;
}

.main .assemble ul li .spare .species a img {
  width: 24px;
  height: auto;
}

.main .assemble ul li .spare .species a strong {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.main .assemble ul li .spare .period {
  width: 100%;
  overflow: hidden;
}

.main .assemble ul li .spare .period a {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.main .assemble ul li .spare .period a time {
  font-size: 13px;
}

.main .assemble ul li .spare .fettle {
  width: 100%;
  display: flex;
  justify-content: center;
}

.main .assemble ul li .spare .fettle .icon-jieshuzhibo {
  font-size: 20px;
  color: #020502;
}

.main .assemble ul li .alliance {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.main .assemble ul li .alliance .sporting {
  width: 100%;
  overflow: hidden;
}

.main .assemble ul li .alliance .sporting a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
}

.main .assemble ul li .alliance .sporting a img {
  width: 32px;
  height: auto;
}

.main .assemble ul li .alliance .sporting a strong {
  font-size: 14px;
  font-weight: bold;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.main .assemble ul li .alliance .sporting:first-child a strong {
  text-align: right;
}

.main .assemble ul li .alliance .achievement {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main .assemble ul li .alliance .achievement span {
  width: 22px;
  height: 28px;
  background: #16a7a0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
}

.main .assemble ul li .alliance .achievement em {
  font-size: 22px;
  font-weight: bold;
}

.main .assemble ul li .examine {
  display: flex;
  align-items: center;
  gap: 22px;
}

.main .assemble ul li .examine .speaker {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main .assemble ul li .examine .speaker img {
  width: 18px;
  height: auto;
}

.main .assemble ul li .examine .speaker strong {
  font-size: 14px;
  font-weight: bold;
}

.main .assemble ul li .examine .mind .icon-zujian81 {
  color: #16a7a0;
}

.main .assemble ul li .examine .mind .icon-dengdaishangchuan_Linear {
  color: #ffa657;
}

.main .assemble ul li .examine .mind .icon-poll_finished {
  color: #020502;
}

.main .assemble ul li .examine .mind span {
  font-size: 18px;
}

.main .video_series {
  background-color: #324459;
  border: 1px solid #00968d;
}

.main .video_series.couple ol {
  grid-template-columns: repeat(2, 1fr);
}

.main .video_series ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 16px;
}

.main .video_series ol li {
  width: 100%;
  height: 292px;
  background: #82919b;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.main .video_series ol li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main .video_series ol li .appearance {
  position: relative;
  width: 100%;
  height: 178px;
}

.main .video_series ol li .appearance .blueprint {
  width: 100%;
  height: 100%;
}

.main .video_series ol li .appearance .blueprint img {
  width: 100%;
  height: 100%;
}

.main .video_series ol li .appearance .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 55px;
  height: 55px;
}

.main .video_series ol li .appearance .play img {
  width: 100%;
  height: 100%;
}

.main .video_series ol li .appearance time {
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.main .video_series ol li .depiction {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}

.main .video_series ol li .depiction p {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}

.main .video_series ol li .depiction .intercourse {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main .video_series ol li .depiction .intercourse .synthesis {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main .video_series ol li .depiction .intercourse .synthesis .icon-icon {
  font-size: 18px;
}

.main .video_series ol li .depiction .intercourse .synthesis span {
  color: #7a528c;
  font-size: 16px;
}

.main .video_series ol li .depiction .intercourse .synthesis em {
  color: #fff;
  font-size: 12px;
}

.main .video_series ol li:hover {
  transform: translateY(-5px);
  background: #71497b;
}

.main .grading {
  width: 100%;
  background: #25505b;
  border: 1px solid #16a7a0;
  padding: 16px;
  box-sizing: border-box;
}

.main .grading ol {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}

.main .grading ol li {
  width: 100%;
  height: 184px;
  background: #7c969d;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.main .grading ol li:hover {
  background: #71497b;
  transform: translateY(-5px);
}

.main .grading ol li a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  box-sizing: border-box;
}

.main .grading ol li a img {
  width: 82px;
  height: auto;
}

.main .grading ol li a strong {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.main .tidings {
  width: 100%;
  overflow: hidden;
}

.main .material {
  width: 100%;
  overflow: hidden;
  border: 1px solid #00968d;
  background: #2a4c5a;
  padding: 18px;
  box-sizing: border-box;
}

.main .material ol {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main .material ol li {
  width: 100%;
  height: 272px;
  padding: 16px 10px;
  box-sizing: border-box;
  background: #6d838d;
  transition: all 0.3s ease-in-out;
}

.main .material ol li:hover {
  background: #71497b;
  transform: translateY(-5px);
}

.main .material ol li a {
  display: block;
  width: 100%;
  height: 100%;
}

.main .material ol li a figure {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.main .material ol li a figure img {
  width: 36%;
  height: 100%;
}

.main .material ol li a figure figcaption {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.main .material ol li a figure figcaption article {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.main .material ol li a figure figcaption article strong {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.main .material ol li a figure figcaption article p {
  color: #fff;
  line-height: 22px;
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

.main .material ol li a figure figcaption .edition {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main .material ol li a figure figcaption .edition .assign {
  display: flex;
  align-items: center;
  gap: 6px;
}

.main .material ol li a figure figcaption .edition .assign em {
  font-size: 13px;
  color: #fff;
}

.main .material ol li a figure figcaption .edition .assign span {
  color: #7a528c;
  font-size: 12px;
}

.main .purchase {
  width: 100%;
  overflow: hidden;
  padding: 22px;
  background: #3f3a56;
  border: 1px solid #00968d;
}

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

.main .purchase ol li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding: 10px;
  align-items: center;
  box-sizing: border-box;
  border-radius: 5px;
  gap: 6px;
  white-space: nowrap;
  user-select: none;
}

.main .purchase ol li:hover {
  background: #16a7a0;
}

.main .purchase ol li time,
.main .purchase ol li span,
.main .purchase ol li a {
  color: #fff;
  font-size: 12px;
}

.main .purchase ol li .against {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}

.main .purchase ol li .against strong {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.main .purchase ol li .against strong a {
  width: 100%;
  display: block;
}

.main .purchase ol li .against strong:first-child {
  text-align: right;
}

.main .purchase ol li .against .vs {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.main .purchase ol li .condition {
  font-weight: bold;
}

.main .fiery {
  margin-top: 42px;
  width: 100%;
  overflow: hidden;
  padding: 22px;
  background: #3f3a56;
  border: 1px solid #00968d;
}

.main .fiery .headline {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.main .fiery .headline span {
  color: #fff;
  font-size: 22px;
}

.main .fiery .headline strong {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
}

.main .fiery ol {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.main .fiery ol li {
  user-select: none;
  white-space: nowrap;
}

.main .fiery ol li a {
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}

@media screen and (max-width: 1000px) {
  .main {
    padding: 60px 10px;
  }

  .main.increase {
    padding: 96px 10px;
  }

  .main .grading ol {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .main {
    padding: 1.06667rem 0.2rem;
  }

  .main.increase {
    padding: 2.96rem 0.2rem;
  }

  .main .dispute,
  .main .whole,
  .main .procession {
    margin-bottom: 0.88rem;
  }

  .main .rubric {
    gap: 0.24rem;
    margin-bottom: 0.29333rem;
  }

  .main .rubric strong {
    font-size: 0.42667rem;
  }

  .main .rubric ol {
    gap: 0.13333rem;
  }

  .main .rubric ol li {
    padding: 0.05333rem 0.26667rem;
    border-radius: 0.08rem;
    font-size: 0.30667rem;
  }

  .main .rubric .extra {
    gap: 0.08rem;
  }

  .main .rubric .extra em {
    font-size: 0.32rem;
  }

  .main .rubric .extra span {
    font-size: 0.42667rem;
  }

  .main .assemble ul li {
    padding: 0.26667rem;
    gap: 0.42667rem;
    grid-template-columns: auto;
  }

  .main .assemble ul li .spare {
    gap: 0.08rem;
    grid-template-columns: 1fr 2fr 1fr;
  }

  .main .assemble ul li .spare .species a {
    gap: 0.08rem;
  }

  .main .assemble ul li .spare .species a img {
    width: 0.48rem;
  }

  .main .assemble ul li .spare .species a strong {
    font-size: 0.32rem;
  }

  .main .assemble ul li .spare .period a {
    gap: 0.08rem;
  }

  .main .assemble ul li .spare .period a time {
    font-size: 0.32rem;
  }

  .main .assemble ul li .spare .fettle {
    transform: scale(0.7);
  }

  .main .assemble ul li .spare .fettle .icon-jieshuzhibo {
    font-size: 0.42667rem;
  }

  .main .assemble ul li .alliance {
    gap: 0.21333rem;
  }

  .main .assemble ul li .alliance .sporting a {
    gap: 0.08rem;
  }

  .main .assemble ul li .alliance .sporting a img {
    width: 0.69333rem;
  }

  .main .assemble ul li .alliance .sporting a strong {
    font-size: 0.30667rem;
  }

  .main .assemble ul li .alliance .achievement {
    gap: 0.08rem;
  }

  .main .assemble ul li .alliance .achievement span {
    width: 0.69333rem;
    height: 0.56rem;
    font-size: 0.34667rem;
  }

  .main .assemble ul li .alliance .achievement em {
    font-size: 0.42667rem;
  }

  .main .assemble ul li .examine {
    gap: 0.42667rem;
    justify-content: space-between;
  }

  .main .assemble ul li .examine .speaker {
    gap: 0.08rem;
  }

  .main .assemble ul li .examine .speaker img {
    width: 0.37333rem;
  }

  .main .assemble ul li .examine .speaker strong {
    font-size: 0.32rem;
  }

  .main .assemble ul li .examine .mind span {
    font-size: 0.34667rem;
  }

  .main .video_series ol {
    gap: 0.29333rem;
    padding: 0.29333rem;
    grid-template-columns: repeat(2, 1fr);
  }

  .main .video_series ol li {
    height: 5.62667rem;
  }

  .main .video_series ol li .appearance {
    height: 3.17333rem;
  }

  .main .video_series ol li .appearance .play {
    width: 0.86667rem;
    height: 0.86667rem;
  }

  .main .video_series ol li .appearance time {
    right: 0.06667rem;
    bottom: 0.06667rem;
    font-size: 0.30667rem;
  }

  .main .video_series ol li .depiction {
    padding: 0.13333rem;
  }

  .main .video_series ol li .depiction p {
    font-size: 0.32rem;
  }

  .main .video_series ol li .depiction .intercourse .synthesis {
    gap: 0.10667rem;
  }

  .main .video_series ol li .depiction .intercourse .synthesis .icon-icon {
    font-size: 0.34667rem;
  }

  .main .video_series ol li .depiction .intercourse .synthesis span {
    font-size: 0.34667rem;
  }

  .main .video_series ol li .depiction .intercourse .synthesis em {
    font-size: 0.30667rem;
  }

  .main .grading {
    padding: 0.21333rem;
  }

  .main .grading ol {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.29333rem;
  }

  .main .grading ol li {
    height: 2.85333rem;
  }

  .main .grading ol li a {
    gap: 0.16rem;
    padding: 0.37333rem;
  }

  .main .grading ol li a img {
    width: 1.22667rem;
  }

  .main .grading ol li a strong {
    font-size: 0.32rem;
  }

  .main .material {
    padding: 0.16rem;
  }

  .main .material ol {
    gap: 0.34667rem;
  }

  .main .material ol li {
    height: 4.36rem;
    padding: 0.21333rem 0.13333rem;
  }

  .main .material ol li a figure {
    gap: 0.16rem;
  }

  .main .material ol li a figure img {
    width: 39%;
  }

  .main .material ol li a figure figcaption article {
    gap: 0.16rem;
  }

  .main .material ol li a figure figcaption article strong {
    font-size: 0.32rem;
  }

  .main .material ol li a figure figcaption article p {
    font-size: 0.30667rem;
    line-height: 0.42667rem;
  }

  .main .material ol li a figure figcaption .edition .assign {
    gap: 0.08rem;
  }

  .main .material ol li a figure figcaption .edition .assign em {
    font-size: 0.32rem;
  }

  .main .material ol li a figure figcaption .edition .assign span {
    font-size: 0.30667rem;
  }

  .main .purchase {
    padding: 0.29333rem;
  }

  .main .purchase ol {
    gap: 0.29333rem;
    grid-template-columns: auto;
  }

  .main .purchase ol li {
    padding: 0.13333rem;
    border-radius: 0.08rem;
    gap: 0.08rem;
  }

  .main .purchase ol li time,
  .main .purchase ol li span,
  .main .purchase ol li a {
    font-size: 0.32rem;
  }

  .main .purchase ol li .vs {
    font-size: 0.32rem;
  }

  .main .purchase ol li .against {
    gap: 0.08rem;
  }

  .main .fiery {
    margin-top: 0.56rem;
    padding: 0.29333rem;
  }

  .main .fiery .headline {
    gap: 0.10667rem;
  }

  .main .fiery .headline span {
    font-size: 0.4rem;
  }

  .main .fiery .headline strong {
    font-size: 0.34667rem;
  }

  .main .fiery ol {
    gap: 0.29333rem;
  }

  .main .fiery ol li a {
    font-size: 0.32rem;
  }
}

.main .crumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.main .crumb strong {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
}

.main .crumb strong::before {
  content: "";
  width: 3px;
  height: 18px;
  background: #fff;
}

.main .crumb ul {
  display: flex;
  align-items: center;
}

.main .crumb ul li {
  display: flex;
  align-items: center;
}

.main .crumb ul li a {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.main .crumb ul li::after {
  content: ">";
  font-size: 16px;
  margin: 0 8px;
  color: #fff;
}

.main .crumb ul li:last-child a {
  color: #2196f3;
}

.main .crumb ul li:last-child::after {
  display: none;
}

.main .tangency {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
  user-select: none;
  white-space: nowrap;
  margin-bottom: 16px;
}

.main .tangency ul {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 6px;
}

.main .tangency ul li {
  border: 1px solid #16a7a0;
  border-radius: 4px;
}

.main .tangency ul li:hover,
.main .tangency ul li.active {
  background-color: #16a7a0;
  border-color: transparent;
}

.main .tangency ul li a {
  padding: 3px 16px;
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .main .tangency {
    margin-bottom: 0.29333rem;
  }

  .main .tangency ul {
    gap: 0.16rem;
  }

  .main .tangency ul li {
    border-radius: 0.08rem;
  }

  .main .tangency ul li a {
    padding: 0.06667rem 0.29333rem;
    font-size: 0.32rem;
  }
}

.combination {
  display: flex;
  gap: 28px;
  width: 100%;
}

.combination .emphasis {
  flex: 1;
  overflow: hidden;
}

.combination .emphasis .stand {
  width: 100%;
  overflow: hidden;
  margin-bottom: 22px;
}

.combination .emphasis .section {
  width: 100%;
  background: #423756;
  border: 1px solid #00968d;
  padding: 20px;
  box-sizing: border-box;
}

.combination .emphasis .section .promote {
  width: 100%;
  overflow: hidden;
}

.combination .emphasis .section .promote ol {
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.combination .emphasis .section .promote ol li {
  width: 100%;
  overflow: hidden;
}

.combination .emphasis .section .promote ol li a {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.combination .emphasis .section .promote ol li a .television {
  position: relative;
  width: 100%;
  height: 153px;
  border-radius: 5px;
  overflow: hidden;
}

.combination .emphasis .section .promote ol li a .television .film {
  width: 100%;
  height: 100%;
}

.combination .emphasis .section .promote ol li a .television .film img {
  width: 100%;
  height: 100%;
}

.combination .emphasis .section .promote ol li a .television .manipulate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 55px;
  height: 55px;
}

.combination .emphasis .section .promote ol li a .television .manipulate img {
  width: 100%;
  height: 100%;
}

.combination .emphasis .section .promote ol li a .television time {
  position: absolute;
  left: 5px;
  top: 5px;
  color: #fff;
  font-size: 14px;
}

.combination .emphasis .section .promote ol li a .television time:last-child {
  left: auto;
  top: auto;
  right: 5px;
  bottom: 5px;
}

.combination .emphasis .section .promote ol li a p {
  color: #fff;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 13px;
}

.combination .emphasis .section .cutover {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  white-space: nowrap;
  user-select: none;
}

.combination .emphasis .section .cutover ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.combination .emphasis .section .cutover ul li {
  display: flex;
  justify-content: center;
}

.combination .emphasis .section .cutover ul li a {
  width: fit-content;
  padding: 3px 12px;
  display: block;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
}

.combination .emphasis .section .cutover ul li a:hover {
  background: #0c8de7;
}

.combination .emphasis .section .cutover ul li.is_active a {
  background: #0c8de7;
}

.combination .emphasis .section .thereon {
  width: 100%;
  overflow: hidden;
}

.combination .emphasis .section .thereon .autocephaly {
  width: 100%;
  overflow: hidden;
}

.combination .emphasis .section .thereon .autocephaly .introduction {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.combination .emphasis .section .thereon .autocephaly .introduction p,
.combination .emphasis .section .thereon .autocephaly .introduction a {
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}

.combination .emphasis .section .thereon .autocephaly .introduction .waft {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.combination .emphasis .section .thereon .autocephaly .introduction .waft .antenna {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.combination .emphasis .section .thereon .autocephaly .introduction .waft .antenna li {
  white-space: nowrap;
}

.combination .emphasis .section .thereon .autocephaly .introduction .waft .antenna li a {
  color: #16a7a0;
  font-weight: bold;
  white-space: nowrap;
  animation: flicker 3s linear infinite forwards;
  display: inline-block;
}

.combination .emphasis .section .thereon .autocephaly .sides {
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 82px;
}

.combination .emphasis .section .thereon .autocephaly .sides .bilateral {
  width: 100%;
  overflow: hidden;
  user-select: none;
  white-space: nowrap;
}

.combination .emphasis .section .thereon .autocephaly .sides .bilateral a {
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.combination .emphasis .section .thereon .autocephaly .sides .bilateral a img {
  width: fit-content;
  height: 32px;
}

.combination .emphasis .section .thereon .autocephaly .sides .bilateral a strong {
  flex: 1;
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: bold;
}

.combination .emphasis .section .thereon .autocephaly .sides .bilateral:first-child a strong {
  text-align: right;
}

.combination .emphasis .section .thereon .autocephaly .highbrow {
  width: 100%;
  overflow: hidden;
  margin-top: 18px;
}

.combination .emphasis .section .thereon .autocephaly .highbrow strong {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #f79c9c;
  gap: 6px;
  font-size: 14px;
  font-weight: bold;
}

.combination .emphasis .section .thereon .autocephaly .highbrow strong::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #f79c9c;
  border-radius: 50%;
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-right: 22px;
  box-sizing: border-box;
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol li {
  position: relative;
  padding: 8px 12px;
  box-sizing: border-box;
  width: 100%;
  background: #f79c9c;
  border-radius: 5px;
  box-sizing: border-box;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  height: 12px;
  display: block;
  background: #f79c9c;
  transform: translate(76%);
  clip-path: polygon(0% 0, 0 100%, 100% 0);
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol li.qb-status-1 {
  color: #71a172;
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol li.qb-status-2 {
  color: #70a5e9;
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol li.qb-status-3 {
  color: #bc67d8;
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol li.qb-status-4 {
  color: #eb7913;
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol li.qb-status-5 {
  color: #fb3530;
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol:last-child {
  border-left: 1px solid #00968d;
  padding-right: 0;
  padding-left: 20px;
}

.combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol:last-child li::after {
  left: auto;
  right: 0;
  transform: translate(-76%);
  clip-path: polygon(100% 0, 0 0%, 100% 100%);
}

.combination .emphasis .section .thereon .autocephaly .neutrally strong {
  color: #f7e79c;
}

.combination .emphasis .section .thereon .autocephaly .neutrally strong::before {
  background: #f7e79c;
}

.combination .emphasis .section .thereon .autocephaly .neutrally .platoon ol li {
  background: #f7e79c;
}

.combination .emphasis .section .thereon .autocephaly .neutrally .platoon ol li::after {
  background: #f7e79c;
}

.combination .emphasis .section .thereon .autocephaly .unfavorable strong {
  color: #c1c0c0;
}

.combination .emphasis .section .thereon .autocephaly .unfavorable strong::before {
  background: #c1c0c0;
}

.combination .emphasis .section .thereon .autocephaly .unfavorable .platoon ol li {
  background: #c1c0c0;
}

.combination .emphasis .section .thereon .autocephaly .unfavorable .platoon ol li::after {
  background: #c1c0c0;
}

.combination .emphasis .section .thereon .autocephaly .sequel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 18px;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend {
  width: 100%;
  overflow: hidden;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .problem {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12px;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol {
  width: 100%;
  background: #8c899a;
  border-radius: 8px;
  overflow: hidden;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li {
  width: 100%;
  padding: 0 10px;
  height: 52px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 2fr 3fr auto;
  gap: 12px;
  align-items: center;
  text-align: center;
  background: #7f407d;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li:first-child span {
  font-weight: bold;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li:nth-child(2n) {
  background: transparent;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li:hover {
  background: #7f407d;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li span,
.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li time,
.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li a {
  font-size: 12px;
  color: #fff;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .commence {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  border-right: 1px solid #7f407d;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .commence .category {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .commence .lasting {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #7f407d;
  display: grid;
  grid-template-columns: 2fr auto 2fr;
  align-items: center;
  gap: 12px;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .comity {
  width: 100%;
  overflow: hidden;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .comity a {
  display: flex;
  align-items: center;
  gap: 4px;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .comity a img {
  width: 25px;
  height: auto;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .comity a strong {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .fritter {
  display: flex;
  gap: 8px;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .fritter span {
  font-size: 18px;
  font-weight: bold;
}

.combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .estate {
  padding: 0 12px;
}

.combination .question {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  justify-content: space-between;
}

.combination .question .caption {
  display: flex;
  align-items: center;
  gap: 12px;
}

.combination .question .caption img {
  width: 23px;
  height: auto;
}

.combination .question .caption strong {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.combination .question .extra {
  display: flex;
  align-items: center;
  gap: 6px;
}

.combination .question .extra em,
.combination .question .extra span {
  color: #fff;
}

.combination .question .extra em {
  font-size: 13px;
  font-weight: bold;
}

.combination .question .extra span {
  font-size: 18px;
}

.combination .aside {
  width: 30%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.combination .aside .release {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  justify-content: space-between;
  border: 1px solid #16a7a0;
  padding: 12px;
  background: #4a2f54;
}

.combination .aside .release ol {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.combination .aside .release ol li {
  width: 100%;
  overflow: hidden;
}

.combination .aside .release ol li a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.combination .aside .release ol li a p {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}

.combination .aside .release ol li a time {
  color: #fff;
  font-size: 13px;
}

.combination .aside .presentation {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  justify-content: space-between;
  border: 1px solid #16a7a0;
  padding: 12px;
  background: #4a2f54;
}

.combination .aside .presentation ol {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.combination .aside .presentation ol li {
  width: 100%;
  overflow: hidden;
}

.combination .aside .presentation ol li a {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.combination .aside .presentation ol li a .envelope {
  position: relative;
  width: 100%;
  height: 134px;
}

.combination .aside .presentation ol li a .envelope .noodle {
  width: 100%;
  height: 100%;
}

.combination .aside .presentation ol li a .envelope .noodle img {
  width: 100%;
  height: 100%;
}

.combination .aside .presentation ol li a .envelope .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
}

.combination .aside .presentation ol li a .envelope .play img {
  width: 100%;
  height: 100%;
}

.combination .aside .presentation ol li a .envelope time {
  position: absolute;
  left: 5px;
  top: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}

.combination .aside .presentation ol li a .envelope time:last-child {
  left: auto;
  top: auto;
  bottom: 5px;
  right: 5px;
}

.combination .aside .presentation ol li a strong {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .combination {
    gap: 0.56rem;
    flex-direction: column;
  }

  .combination .emphasis .stand {
    margin-bottom: 0.42667rem;
  }

  .combination .emphasis .section {
    padding: 0.26667rem;
  }

  .combination .emphasis .section .promote ol {
    gap: 0.24rem;
  }

  .combination .emphasis .section .promote ol li a {
    gap: 0.16rem;
  }

  .combination .emphasis .section .promote ol li a .television {
    height: 3.01333rem;
  }

  .combination .emphasis .section .promote ol li a .television .manipulate {
    width: 1rem;
    height: 1rem;
  }

  .combination .emphasis .section .promote ol li a .television time {
    left: 0.10667rem;
    top: 0.10667rem;
  }

  .combination .emphasis .section .promote ol li a .television time:last-child {
    right: 0.10667rem;
    bottom: 0.10667rem;
  }

  .combination .emphasis .section .promote ol li a p {
    font-size: 0.32rem;
  }

  .combination .emphasis .section .cutover {
    margin-bottom: 0.34667rem;
  }

  .combination .emphasis .section .cutover ul {
    gap: 0.29333rem;
  }

  .combination .emphasis .section .cutover ul li a {
    padding: 0.04rem 0.18667rem;
    font-size: 0.32rem;
  }

  .combination .emphasis .section .thereon .autocephaly .introduction {
    gap: 0.08rem;
  }

  .combination .emphasis .section .thereon .autocephaly .introduction p,
  .combination .emphasis .section .thereon .autocephaly .introduction a {
    font-size: 0.32rem;
  }

  .combination .emphasis .section .thereon .autocephaly .introduction .waft {
    gap: 0.08rem;
  }

  .combination .emphasis .section .thereon .autocephaly .introduction .waft .antenna {
    gap: 0.10667rem;
  }

  .combination .emphasis .section .thereon .autocephaly .introduction .waft .antenna li a {
    font-size: 0.37333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sides {
    gap: 1.09333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sides .bilateral a {
    gap: 0.16rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sides .bilateral a img {
    height: 0.69333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sides .bilateral a strong {
    font-size: 0.32rem;
  }

  .combination .emphasis .section .thereon .autocephaly .highbrow {
    margin-top: 0.37333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .highbrow strong {
    margin-bottom: 0.24rem;
    gap: 0.08rem;
    font-size: 0.32rem;
  }

  .combination .emphasis .section .thereon .autocephaly .highbrow strong::before {
    width: 0.24rem;
    height: 0.24rem;
  }

  .combination .emphasis .section .thereon .autocephaly .highbrow .platoon {
    grid-template-columns: auto;
  }

  .combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol {
    padding-right: 0.29333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol li {
    padding: 0.10667rem 0.16rem;
    border-radius: 0.10667rem;
  }

  .combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol li::after {
    width: 0.34667rem;
    height: 0.29333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol:last-child {
    border-left: 0;
    border-top: 1px solid #00968d;
    padding-left: 0;
    padding-right: 0.29333rem;
    margin-top: 0.29333rem;
    padding-top: 0.29333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .highbrow .platoon ol:last-child li::after {
    left: auto;
    right: 0px;
    transform: translate(76%);
    clip-path: polygon(0% 0, 0 100%, 100% 0);
  }

  .combination .emphasis .section .thereon .autocephaly .sequel {
    gap: 0.29333rem;
    margin-top: 0.24rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .problem {
    font-size: 0.37333rem;
    margin-bottom: 0.29333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol {
    border-radius: 0.10667rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li {
    height: 1.62667rem;
    gap: 0.29333rem;
    padding: 0 0.13333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li:nth-child(n + 2) {
    height: fit-content;
    padding: 0.26667rem;
    gap: 0.42667rem;
    grid-template-columns: auto;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li span,
  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li time,
  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li a {
    font-size: 0.32rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .commence {
    border-right: none;
    border-bottom: 1px solid #7f407d;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon {
    border-right: none;
    border-bottom: 1px solid #7f407d;
    padding-bottom: 0.4rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .comity a {
    gap: 0.05333rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .comity a img {
    width: 0.6rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .comity a strong {
    font-size: 0.32rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .fritter {
    gap: 0.10667rem;
  }

  .combination .emphasis .section .thereon .autocephaly .sequel .legend .fighting ol li .beacon .fritter span {
    font-size: 0.37333rem;
  }

  .combination .question {
    margin-bottom: 0.29333rem;
  }

  .combination .question .caption {
    gap: 0.16rem;
  }

  .combination .question .caption img {
    width: 0.42667rem;
  }

  .combination .question .caption strong {
    font-size: 0.34667rem;
  }

  .combination .question .extra {
    gap: 0.08rem;
  }

  .combination .question .extra em {
    font-size: 0.32rem;
  }

  .combination .question .extra span {
    font-size: 0.37333rem;
  }

  .combination .aside {
    width: 100%;
    gap: 0.29333rem;
  }

  .combination .aside .release {
    padding: 0.29333rem;
  }

  .combination .aside .release ol {
    gap: 0.29333rem;
  }

  .combination .aside .release ol li a {
    gap: 0.16rem;
  }

  .combination .aside .release ol li a p {
    font-size: 0.32rem;
  }

  .combination .aside .release ol li a time {
    font-size: 0.32rem;
  }

  .combination .aside .presentation {
    padding: 0.29333rem;
  }

  .combination .aside .presentation ol {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.24rem;
  }

  .combination .aside .presentation ol li a {
    gap: 0.16rem;
  }

  .combination .aside .presentation ol li a .envelope {
    height: 2.98667rem;
  }

  .combination .aside .presentation ol li a .envelope .play {
    width: 0.92rem;
    height: 0.92rem;
  }

  .combination .aside .presentation ol li a .envelope time {
    left: 0.06667rem;
    top: 0.06667rem;
    font-size: 0.32rem;
  }

  .combination .aside .presentation ol li a .envelope time:last-child {
    right: 0.06667rem;
    bottom: 0.06667rem;
  }

  .combination .aside .presentation ol li a strong {
    font-size: 0.32rem;
  }
}

.thorough {
  width: 100%;
  border: 1px solid #00968d;
  padding: 20px;
  box-sizing: border-box;
  background: #423756;
}

.thorough h1 {
  font-size: 16px;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #fff;
  text-align: center;
  user-select: none;
  font-weight: bold;
}

.thorough .expression {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  margin: 12px 0;
}

.thorough .expression ol {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.thorough .expression ol li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.thorough .expression ol li em,
.thorough .expression ol li strong,
.thorough .expression ol li time {
  color: #fff;
  font-size: 13px;
}

.thorough .expression ol li span {
  color: #34e0cb;
}

.thorough .expression ol li:first-child span {
  font-size: 14px;
}

.thorough .chapter {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.thorough .chapter p {
  font-size: 14px;
  color: #fff;
  line-height: 26px;
  text-indent: 20px;
}

.thorough .chapter img {
  margin: 0 auto;
  width: 80% !important;
  height: auto;
  display: block;
  padding: 0;
  margin-bottom: 20px;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px 0px, rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
}

.thorough .interrelated {
  margin-top: 52px;
  width: 100%;
  overflow: hidden;
}

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

.thorough .interrelated ol li {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #00968d;
}

.thorough .interrelated ol li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
}

.thorough .interrelated ol li a em {
  color: #16a7a0;
  font-size: 13px;
  white-space: nowrap;
}

.thorough .interrelated ol li a strong {
  flex: 1;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.thorough .projection {
  position: relative;
  width: 100%;
  height: 374px;
  cursor: pointer;
}

.thorough .projection .cover {
  width: 100%;
  height: 100%;
}

.thorough .projection .cover img {
  width: 100%;
  height: 100%;
}

.thorough .projection .play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 85px;
  height: 85px;
}

.thorough .projection .play img {
  width: 100%;
  height: 100%;
}

.thorough .projection time {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 13px;
  color: #fff;
}

.thorough .projection .chance {
  left: auto;
  top: auto;
  bottom: 32px;
  right: 8px;
}

.thorough .projection p {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 5px 10px;
  width: 100%;
  box-sizing: border-box;
  background: rgba(225, 225, 225, 0.5);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.thorough .argue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
}

.thorough .argue ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.thorough .argue ul li {
  white-space: nowrap;
  font-size: 12px;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: bold;
  flex-wrap: wrap;
}

.thorough .argue ul li span,
.thorough .argue ul li a {
  color: #fff;
  font-weight: bold;
}

.thorough .argue>strong,
.thorough .argue p {
  font-size: 12px;
  color: #fff;
  font-weight: bold;
}

.thorough .streaming {
  position: relative;
  width: 100%;
  height: 372px;
  margin-top: 22px;
  display: flex;
  align-items: center;
  background: url(../stillness/images/match_zuqiu.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
}

.thorough .streaming.opposite {
  background: url(../stillness/images/match_lanqiu.png) no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.thorough .streaming .field {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  background: rgba(225, 225, 225, 0.5);
  white-space: nowrap;
  user-select: none;
}

.thorough .streaming .field a {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  overflow: hidden;
}

.thorough .streaming .field a strong {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.thorough .streaming .field a p {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

.thorough .streaming .battle {
  width: 100%;
  display: grid;
  grid-template-columns: 3fr auto 3fr;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  box-sizing: border-box;
  white-space: nowrap;
  user-select: none;
}

.thorough .streaming .battle .respective {
  width: 100%;
  overflow: hidden;
}

.thorough .streaming .battle .respective a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.thorough .streaming .battle .respective a img {
  width: fit-content;
  height: 122px;
}

.thorough .streaming .battle .respective a strong {
  width: 100%;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
}

.thorough .streaming .battle .realm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 12px;
}

.thorough .streaming .battle .realm time {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.thorough .streaming .battle .realm .predicament {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thorough .streaming .battle .realm .predicament span {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.thorough .streaming .battle .realm .predicament em {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.thorough .streaming .battle .realm .originate {
  font-size: 14px;
}

.thorough .streaming .battle .realm .originate a {
  font-weight: bold;
  white-space: nowrap;
  color: #fff;
}

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

  .thorough h1 {
    font-size: 0.34667rem;
  }

  .thorough .expression {
    margin: 0.29333rem 0;
  }

  .thorough .expression ol {
    gap: 0.29333rem;
  }

  .thorough .expression ol li {
    gap: 0.08rem;
  }

  .thorough .expression ol li em,
  .thorough .expression ol li strong,
  .thorough .expression ol li time {
    font-size: 0.32rem;
  }

  .thorough .expression ol li span {
    font-size: 0.37333rem;
  }

  .thorough .expression ol li:first-child span {
    font-size: 0.34667rem;
  }

  .thorough .chapter {
    gap: 0.26667rem;
  }

  .thorough .chapter p {
    font-size: 0.32rem;
    line-height: 0.48rem;
    text-indent: 0.26667rem;
  }

  .thorough .chapter img {
    margin-bottom: 0.26667rem;
    border-radius: 0.2rem;
    width: 100% !important;
  }

  .thorough .interrelated {
    margin-top: 0.69333rem;
  }

  .thorough .interrelated ol {
    gap: 0.42667rem;
    grid-template-columns: auto;
  }

  .thorough .interrelated ol li {
    border-radius: 0.04rem;
  }

  .thorough .interrelated ol li a {
    gap: 0.08rem;
    padding: 0.08rem 0.13333rem;
  }

  .thorough .interrelated ol li a em {
    font-size: 0.32rem;
  }

  .thorough .interrelated ol li a strong {
    font-size: 0.32rem;
  }

  .thorough .projection {
    height: 6.16rem;
  }

  .thorough .projection .play {
    width: 1.4rem;
    height: 1.4rem;
  }

  .thorough .projection time {
    font-size: 0.33333rem;
  }

  .thorough .projection .chance {
    bottom: 0.56rem;
  }

  .thorough .projection p {
    padding: 0.06667rem 0.21333rem;
    font-size: 0.34667rem;
  }

  .thorough .argue {
    margin: 0.26667rem 0;
  }

  .thorough .argue ul {
    gap: 0.10667rem;
  }

  .thorough .argue ul li {
    font-size: 0.32rem;
  }

  .thorough .streaming {
    height: 6.16rem;
    margin-top: 0.29333rem;
    border-radius: 0.13333rem;
  }

  .thorough .streaming .field {
    padding: 0.06667rem 0.13333rem;
  }

  .thorough .streaming .field a {
    gap: 0.08rem;
  }

  .thorough .streaming .field a strong {
    font-size: 0.34667rem;
  }

  .thorough .streaming .field a p {
    font-size: 0.32rem;
  }

  .thorough .streaming .battle {
    gap: 0.16rem;
    padding: 0 0.2rem;
  }

  .thorough .streaming .battle .respective a {
    gap: 0.08rem;
  }

  .thorough .streaming .battle .respective a img {
    height: 2.42667rem;
  }

  .thorough .streaming .battle .respective a strong {
    font-size: 0.34667rem;
  }

  .thorough .streaming .battle .realm {
    gap: 0.16rem;
  }

  .thorough .streaming .battle .realm time {
    font-size: 0.34667rem;
  }

  .thorough .streaming .battle .realm .predicament {
    gap: 0.10667rem;
  }

  .thorough .streaming .battle .realm .predicament span {
    font-size: 0.45333rem;
  }

  .thorough .streaming .battle .realm .predicament em {
    font-size: 0.45333rem;
  }

  .thorough .streaming .battle .realm .originate {
    font-size: 0.32rem;
  }
}

.footer {
  width: 100%;
  padding: 76px 0px;
  background: #6d3785;
  box-sizing: border-box;
}

.footer .strest {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.footer .strest dl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 12px;
  border-right: 1px solid #fff;
}

.footer .strest dl:last-child {
  border-right: none;
  padding-right: 0;
}

.footer .strest dl dt {
  color: #fff;
}

.footer .strest dl a {
  color: #fff;
}

.footer p {
  color: #fff;
  text-align: center;
  line-height: 24px;
  font-size: 13px;
  margin-top: 25px;
}

.footer p a {
  color: #fff;
}

.footer p img {
  vertical-align: middle;
  width: auto;
  height: 14px;
}

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

  .footer .strest {
    grid-template-columns: auto;
  }

  .footer .strest dl {
    padding: 0.26667rem 0;
    border-right: none;
    border-bottom: 1px solid #fff;
  }

  .footer p {
    line-height: 0.45333rem;
    font-size: 0.32rem;
    margin-top: 0.33333rem;
  }

  .footer p img {
    height: 0.32rem;
  }
}

.spinner {
  position: absolute;
  width: 3px;
  height: 4px;
}

.spinner>div {
  position: absolute;
  width: 20%;
  height: 150%;
  background: #fff;
  transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  animation: spinner-fzua35 1s calc(var(--delay) * 1s) infinite ease;
}

.spinner>div:nth-child(1) {
  --delay: 0.1;
  --rotation: 36;
  --translation: 150;
}

.spinner>div:nth-child(2) {
  --delay: 0.2;
  --rotation: 72;
  --translation: 150;
}

.spinner>div:nth-child(3) {
  --delay: 0.3;
  --rotation: 108;
  --translation: 150;
}

.spinner>div:nth-child(4) {
  --delay: 0.4;
  --rotation: 144;
  --translation: 150;
}

.spinner>div:nth-child(5) {
  --delay: 0.5;
  --rotation: 180;
  --translation: 150;
}

.spinner>div:nth-child(6) {
  --delay: 0.6;
  --rotation: 216;
  --translation: 150;
}

.spinner>div:nth-child(7) {
  --delay: 0.7;
  --rotation: 252;
  --translation: 150;
}

.spinner>div:nth-child(8) {
  --delay: 0.8;
  --rotation: 288;
  --translation: 150;
}

.spinner>div:nth-child(9) {
  --delay: 0.9;
  --rotation: 324;
  --translation: 150;
}

.spinner>div:nth-child(10) {
  --delay: 1;
  --rotation: 360;
  --translation: 150;
}

@keyframes flicker {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(0.8);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spinner-fzua35 {

  0%,
  10%,
  20%,
  30%,
  50%,
  60%,
  70%,
  80%,
  90%,
  100% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1%));
  }

  50% {
    transform: rotate(calc(var(--rotation) * 1deg)) translate(0, calc(var(--translation) * 1.5%));
  }
}

/* From Uiverse.io by satyamchaudharydev */
.start_live {
  --speed-of-animation: 0.9s;
  --first-color: #4c86f9;
  --second-color: #49a84c;
  --third-color: #f6bb02;
  --fourth-color: #f6bb02;
  --fifth-color: #2196f3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  gap: 6px;
  height: 20px;
}

.start_live span {
  width: 3px;
  height: 100%;
  background: var(--first-color);
  animation: scale var(--speed-of-animation) ease-in-out infinite;
}

.start_live span:nth-child(2) {
  background: var(--second-color);
  animation-delay: -0.8s;
}

.start_live span:nth-child(3) {
  background: var(--third-color);
  animation-delay: -0.7s;
}

.start_live span:nth-child(4) {
  background: var(--fourth-color);
  animation-delay: -0.6s;
}

.start_live span:nth-child(5) {
  background: var(--fifth-color);
  animation-delay: -0.5s;
}

@keyframes scale {

  0%,
  40%,
  100% {
    transform: scaleY(0.05);
  }

  20% {
    transform: scaleY(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: #fff;
}

@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: #fff;
}

.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: #fff;
}

.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: #fff;
}


.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: #fff;
}

.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: #fff;
}

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

.schedule-columnn {
  --theme--color: #16a7a0;
  --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: #16a7a0;
  --theme--deputy--color: #514067;
  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: #fff;
  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);
}

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