@charset "UTF-8";
@import './public.css';

/* #region 科研、医学简介版块 */
.modinfo3 {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 5% 10%;
  background: url('/images/yuanxing-bg.png') no-repeat right top;
  background-size: 40%;
}

.tabmenu {
  width: 100%;
  height: auto;
  margin-bottom: 2.91vw;
}

.tabmenu ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 31vw;
  height: auto;
  border-bottom: #e7e7e7 1px solid;
}

.tabmenu li {
  position: relative;
  height: 100%;
  padding-bottom: 0.5em;
  color: var(--graphite);
  font-size: var(--h1-font-size);
  font-weight: bold;
  cursor: pointer;
  line-height: 0.9;
}

.tabmenu li .en {
  display: inline-block;
  margin-left: 0.5em;
  color: var(--lnk);
  font-size: 0.7em;
}

.tabmenu li::after {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 4px;
  background-color: var(--primary);
  border-radius: 10px;
  transform: translateX(-50%);
  transition: width 0.5s;
  content: '';
}

.tabmenu li.on::after,
.tabmenu li:hover::after {
  width: 100%;
}

.tabitem {
  width: 100%;
  height: auto;
}

.tabitem .tab-layout {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.tabcontent .con-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 40.5%;
  color: var(--graphite);
  font-size: 1.35vw;
  line-height: 2;
}

.tabcontent .con-right {
  display: grid;
  width: 55%;
  height: 30vw;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1vw;
}

.tabcontent .con-right.grid1 {
  display: grid;
  width: 55%;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 0;
}

.tabcontent .photo-box {
  width: 100%;
  height: auto;
}

.tabcontent .photo-box .big-rect {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  transition: box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
  overflow: hidden;
}

.tabcontent .photo-box .big-rect a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.tabcontent .photo-box .big-rect a::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(to top, rgb(0 0 0 / 85%), rgb(51 51 51 / 0%));
  content: '';

  
}

.tabcontent .photo-box .big-rect img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.tabcontent .photo-box .big-rect .tab-tit {
  position: absolute;
  bottom: 2vw;
  left: 2vw;
  z-index: 9;
  color: var(--white);
  font-size: 1.35vw;
}

.tabcontent .photo-box .big-rect .tab-tit .en {
  color: var(--paper);
  font-size: max(12px, 0.7em);
}

.tabcontent .photo-box .small-rect {
  width: 100%;
  height: auto;
  transition: transform 0.3s, border-color 0.3s;
}

.tabcontent .photo-box .small-rect:hover {
  border-color: rgb(var(--graphite-rgb) / 25%);
  transform: translateY(-8%);
}

.tabcontent .photo-box .big-rect:hover {
  box-shadow: 0 4px 4px rgb(51 51 51 / 2%), 0 10px 40px rgb(51 51 51 / 10%);
  transform: translateY(-8px);
}

.tabcontent .photo-box .rect {
  width: 100%;
  height: auto;
  transition: all 0.5s;
}

.tabcontent .photo-box .small-rect a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 9vw;
  padding: 1.5vw;
  background-color: var(--paper);
  border: 1px solid var(--paper);
  border-radius: 8px;
  cursor: pointer;
}

.tabcontent .photo-box .big-rect .tab-tit2 {
  font-size: 1.35vw;
  color: var(--graphite);
}

.tabcontent .photo-box .small-rect2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 9vw;
  gap: 0 1vw;
}

.tabcontent .photo-box .small-rect2 .rect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 49%;
  height: 100%;
  background-color: var(--paper);
  border-radius: 8px;
  transition: transform 0.3s, border-color 0.3s;
  cursor: pointer;
}

.tabcontent .photo-box .small-rect2 .rect:hover {
  transform: translateY(-8%);
}

.tabcontent .photo-box .small-rect2 .rect a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.tabcontent .photo-box .small-rect img,
.tabcontent .photo-box .small-rect2 .rect img {
  width: 4.5vw;
}

.tabcontent .photo-box .tab-tit2 {
  font-size: 1.35vw;
  color: var(--graphite);
}

.tabcontent .photo-box .tab-tit2.center {
  text-align: center;
}

.tabcontent .photo-box .tab-tit2 .en {
  color: var(--lnk);
  font-size: max(12px, 0.7em);
}

.tabcontent .photo-box1 {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vw;
}

.tabcontent .photo-box2 {
  display: grid;
  width: 100%;
  height: auto;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1vw;
}

.tabcontent .photo-box1 .big-rect {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: all 0.3s;
  overflow: hidden;
}

.tabcontent .photo-box1 .big-rect:hover {
  transform: translateY(-3%);
}

.tabcontent .photo-box1 .big-rect a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.tabcontent .photo-box1 .big-rect a::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(to top, rgb(0 0 0 / 85%), rgb(51 51 51 / 0%));
  content: '';

  
}

.tabcontent .photo-box1 .big-rect img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.tabcontent .photo-box1 .big-rect .tab-tit {
  position: absolute;
  bottom: 1.2vw;
  left: 1.2vw;
  z-index: 9;
  color: var(--white);
  font-size: 1.35vw;
}

.tabcontent .photo-box1 .big-rect .tab-tit .en {
  color: var(--paper);
  font-size: max(12px, 0.7em);
}

.tabcontent .photo-box2 .small-rect {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.tabcontent .photo-box2 .small-rect:hover {
  transform: translateY(-8%);
}

.tabcontent .photo-box2 .small-rect a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 9vw;
  padding: 1.5vw;
  background-color: var(--paper);
  border-radius: 8px;
  cursor: pointer;
}

.tabcontent .photo-box2 .small-rect .tab-tit2 {
  font-size: 1.35vw;
  color: var(--graphite);
}

.tabcontent .photo-box2 .small-rect .tab-tit2 .en {
  color: var(--lnk);
  font-size: max(12px, 0.7em);
}

.tabcontent .photo-box2 .small-rect2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 10vw;
}

.tabcontent .photo-box2 .small-rect2 .rect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 47%;
  height: 100%;
  background-color: #f5f5f7;
  border-radius: 8px;
}

.tabcontent .photo-box2 .small-rect2 .rect a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.tabcontent .photo-box2 .small-rect img {
  width: 5.25vw;
}

.tabcontent .photo-box2 .small-rect2 .rect img {
  width: 5.2vw;
}

.gaptop {
  margin-bottom: 1vw;
}

@media screen and (max-width: 1000px) {
  .gaptop {
    margin-bottom: 0;
  }

  .modinfo3 {
    background-size: 50%;
  }

  .modinfo3 {
    padding: 10% 5%;
  }

  .tabmenu {
    display: flex;
    justify-content: center;
    margin-bottom: 2.6vw;
  }

  .tabmenu ul {
    width: 83%;
    height: 10vw;
  }

  .tabmenu li {
    font-size: 6.66vw;
    padding-bottom: 0;
  }

  .tabmenu li.on::after {
    bottom: -1px;
    height: 3px;
  }

  .tabitem .tab-layout {
    flex-direction: column;
  }

  .tabcontent .con-left {
    width: 100%;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .tabcontent .con-right {
    justify-content: space-between;
    width: 100%;
    height: 70vw;
    margin-bottom: 20px;
    gap: 5px;
  }

  .tabcontent .con-right.grid1 {
    width: 100%;
  }

  .tabcontent .photo-box .big-rect .tab-tit {
    font-size: 14px;
  }

  .tabcontent .photo-box .tab-tit2 {
    font-size: 14px;
  }

  .tabcontent .photo-box2 {
    margin-top: 5px;
    gap: 5px;
  }

  .tabcontent .photo-box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
  }

  .tabcontent .photo-box .big-rect {
    transform: none !important;
  }

  .tabcontent .photo-box .big-rect.small {
    height: 38vw;
  }

  .tabcontent .photo-box .small-rect {
    flex: 1;
    transform: none !important;
  }

  .tabcontent .photo-box .small-rect a {
    height: 100%;
    padding: 20px;
  }

  .tabcontent .photo-box1 {
    grid-gap: 5px;
  }

  .tabcontent .photo-box .small-rect img {
    width: 35%;
  }

  .tabcontent .photo-box2 .small-rect {
    transform: none !important;
  }

  .tabcontent .photo-box2 .small-rect .tab-tit2 {
    font-size: 14px;
  }

  .tabcontent .photo-box2 .small-rect a {
    height: 19vw;
    padding: 15px 12px 15px 15px;
  }

  .tabcontent .photo-box2 .small-rect img {
    width: 10vw;
  }

  .tabcontent .photo-box1 .big-rect {
    transform: none !important;
  }

  .tabcontent .photo-box1 .big-rect .tab-tit {
    bottom: 8px;
    left: 8px;
    width: 26vw;
    font-size: 14px;
  }

  .tabcontent .photo-box .small-rect2 {
    flex: 1;
    flex-direction: column;
    gap: 5px;
  }

  .tabcontent .photo-box .small-rect2 .rect {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    padding-bottom: 5px;
    transform: none !important;
  }

  .tabcontent .photo-box .small-rect2 .rect a {
    flex-direction: row;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 0 10px;
    gap: 5px;
  }

  .tabcontent .photo-box .small-rect2 .rect a .tab-tit2 {
    text-align: left;
  }

  .tabcontent .photo-box .small-rect2 .rect img {
    width: 20%;
  }
}

/* #endregion */

/* #region 废弃? */
.mod {
  width: 100%;
  height: auto;
}

.mod img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.seabox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 29.2vw;
  height: 3.3vw;
  padding: 3px;
  background-color: #fff;
  border-radius: 0.36vw;
}

.modfour {
  position: relative;
  width: 100%;
  height: auto;
}

.modfour a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.modfour .one {
  position: absolute;
  top: 7.4vw;
  left: 49.5vw;
  width: 31.25vw;
  height: 6.4vw;
}

.modfour .two {
  position: absolute;
  top: 14.06vw;
  left: 49.5vw;
  width: 31.25vw;
  height: 3.64vw;
}

.modfour .three {
  position: absolute;
  top: 17.97vw;
  left: 49.5vw;
  width: 31.25vw;
  height: 3.64vw;
}

.modfour .four {
  position: absolute;
  top: 21.97vw;
  left: 49.5vw;
  width: 31.25vw;
  height: 3.64vw;
}

.modfour .five {
  position: absolute;
  top: 24.97vw;
  left: 49.5vw;
  width: 31.25vw;
  height: 3.64vw;
}

.modfour .more {
  position: absolute;
  top: 26vw;
  left: 12.76vw;
  width: 8.855vw;
  height: 4.69vw;
}

.modfive {
  position: relative;
}

.modfive a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.modfive .sea1 {
  position: absolute;
  top: 12.5vw;
  left: 25vw;
  width: 10.93vw;
  height: 12.5vw;
}

.modfive .sea2 {
  position: absolute;
  top: 12.5vw;
  left: 76.6vw;
  width: 10.93vw;
  height: 12.5vw;
}

.bantext {
  display: -webkit-box;
  width: 96%;
  height: auto;
  color: var(--white);
  font-size: 1.2vw;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.bantext a {
  position: relative;
  padding: 0 12px;
  color: var(--white);
  transition: 0.5s all;
  text-align: left;
}

.bantext a::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 70%;
  background-color: #fff;
  transform: translateY(-40%);
  content: '';
}

.bantext a:last-child::after {
  content: '';
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
}

.bantext a:hover {
  color: var(--primary);
}

.comment .swiper-container {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 1vw 0 2.5vw;
}

@media screen and (max-width: 1000px) {
  .seabox {
    width: 100%;
    height: 40px;
    border-radius: 3px;
  }

  .bantext {
    box-sizing: border-box;
    width: 90%;
    max-width: 400px;
    font-size: 16px;
  }

  .bantext a:nth-of-type(1) {
    padding: 0 12px 0 5px;
  }

  .bantext a {
    font-size: 12px;
  }

  .bantext ul {
    font-size: 12px;
    margin-top: 5px;
  }
}

/* #endregion */

/* #region 搜索弹出 */
.search1 {
  position: absolute;
  bottom: 34%;
  left: 11%;
  z-index: 999999;
  width: 32%;
}

.search1 .sousuo {
  box-sizing: border-box;
  width: 100%;
  padding: 3% 0;
  white-space: nowrap;
}

.search1 .sousuo input[type=text] {
  box-sizing: border-box;
  width: 75%;
  height: 3vw;
  padding: 0 2%;
  color: #0d0c0c;
  border: none;
  border-radius: 0.1vw;
  font-size: 1.2vw;
  line-height: 2;
  outline: none;
}

.search1 .sousuo input::placeholder {
  color: #c6c6c6;
}

.search1 .sousuo input[type=submit] {
  box-sizing: border-box;
  width: auto;
  height: 100%;
  padding: 0 4.2%;
  color: var(--white);
  background-color: var(--primary);
  border: none;
  border-radius: 0.36vw;
  transition: 0.2s all;
  line-height: 2;
  font-size: 1.2vw;
  cursor: pointer;
  appearance: none;
}

.search1 .sousuo input[type=submit]:hover {
  background-color: #ff984c;
}

@media screen and (max-width: 1000px) {
  .search1 .sousuo input[type=text] {
    width: 73.7%;
    height: 40px;
    border-radius: 3px;
    font-size: 14px;
  }

  .search1 .sousuo input[type=submit] {
    width: 25%;
    padding: 0;
    border-radius: 3px;
    font-size: 14px;
    text-align: center;
  }

  .search1 .sousuo {
    width: 90%;
    max-width: 400px;
    padding: 2px 0;
  }
}

/* #endregion */

/* #region 定制科研及医学报告 */
.reportmod {
  position: relative;
  width: 100%;
  height: auto;
}

.reportmod .report {
  position: absolute;
  top: -3vw;
  left: 0;
  width: 1px;
  height: 1px;
}

.reportmod .bg {
  width: 100%;
}

.reportmod .report-info {
  position: absolute;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 5% 10%;
}

.reportmod .report-info .left {
  display: flex;
  flex-direction: column;
  width: 40.5%;
  height: 100%;
}

.reportmod .report-info .left .title {
  padding: 1vw 0 2vw;
  color: var(--graphite);
  font-size: var(--h1-font-size);
  font-weight: bold;
  line-height: 0.9;
}

.reportmod .report-info .left .title .en {
  font-size: 0.7em;
  display: inline-block;
  color: var(--lnk);
}

.reportmod .report-info .left .content {
  margin-bottom: 3.5vw;
  color: var(--lnk);
  font-size: 1.35vw;
  line-height: 2;
}

.reportmod .report-info .right {
  box-sizing: border-box;
  width: 50%;
  padding-right: 12%;
}

.reportmod .report-info .right .newslist li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 4.2vw;
  padding: 1vw 0;
  transition: all 0.5s;
  border-bottom: 1px solid rgb(var(--graphite-rgb) / 10%);
}

.reportmod .report-info .right .newslist li .showbox {
  display: none;
  width: 75%;
  height: 0;
  margin-top: 0.5vw;
  color: var(--lnk);
  transition: all 0.5s;
  font-size: 0.83vw;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.reportmod .report-info .right .newslist li .titbox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reportmod .report-info .right .newslist li .linetext {
  width: 75%;
  height: auto;
  font-size: 1.25vw;
  font-weight: bold;
  color: var(--graphite);
}

.reportmod .report-info .right .newslist li.onshow {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 1vw 0;
  transition: all 0.5s;
  border-bottom: 1px solid var(--primary);
}

.reportmod .report-info .right .newslist li.onshow .showbox {
  display: -webkit-box;
  height: auto;
}

.reportmod .report-info .right .newslist li .btn-icon {
  width: 10%;
  height: auto;
  background: url('/images/yuanxing-icon2.png') no-repeat right center;
  background-size: 33%;
  transition: all 0.5s;
  cursor: pointer;
}

.reportmod .report-info .right .newslist li.onshow .btn-icon {
  background: url('/images/yuanxing-icon1.png') no-repeat right center;
  background-size: 33%;
}

.reportmod .report-info .right .newslist li .linetext a {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media screen and (max-width: 1000px) {
  .reportmod .report-info {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10% 5%;
  }

  .reportmod .report-info .left {
    width: 100%;
    height: auto;
  }

  .reportmod .report-info .left .title {
    font-size: 6.3vw;
    text-align: center;
    padding: 0 0 15px;
  }

  .reportmod .report-info .left .content {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .reportmod .report-info .right {
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
  }

  .reportmod .report-info .right .newslist li {
    height: auto;
    padding: 4vw 0;
  }

  .reportmod .report-info .right .newslist li.onshow {
    padding: 4vw 0;
  }

  .reportmod .report-info .right .newslist li .linetext {
    width: 85%;
  }

  .reportmod .report-info .right .newslist li .linetext a {
    font-size: 16px;
  }

  .reportmod .report-info .right .newslist li .showbox {
    font-size: 14px;
    width: 90%;
    max-height: 42px;
  }
}

/* #endregion */

/* #region 科研及临床工具 */
.toolsmod {
  padding: 5% 10%;
  background: url('/images/yuanxing-bg5.png') no-repeat left bottom;
  background-size: 15%;
}

.toolsmod .big-modtitle {
  padding: 1vw 0 2vw;
  color: var(--graphite);
  font-size: var(--h1-font-size);
  font-weight: bold;
  line-height: 0.9;
}

.toolsmod .big-modtitle .en {
  font-size: 0.7em;
  display: inline-block;
  color: var(--lnk);
}

.toolsmod ul {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: auto;
  margin-bottom: 2vw;
}

.toolsmod ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  width: 12.4vw;
  padding: 1vw 0 2vw;
  border-radius: 8px;
  transition: background-color 0.5s;
}

.toolsmod ul li:hover {
  background-color: var(--paper);
}

.toolsmod .tools-code {
  z-index: 1;
  width: 100%;
  height: auto;
  transition: all 0.5s;
  text-align: center;
  opacity: 0;
}

.toolsmod .tools-code img {
  width: 60%;
  border: 1px solid rgb(237 237 237);
  border-radius: 6px;
  box-shadow: 0 0 10px rgb(237 237 237);
}

.toolsmod li:hover .tools-code {
  opacity: 1;
}

.toolsmod .tools-icon {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin-bottom: 0.5vw;
  padding: 0 1vw;
  text-align: center;
}

.toolsmod .tools-icon img {
  width: 60%;
}

.toolsmod .tools-name {
  margin-bottom: 0.5vw;
  color: var(--graphite);
  font-size: 1.25vw;
  font-weight: bold;
  text-align: center;
}

.toolsmod .tools-intro {
  position: absolute;
  z-index: 11;
  box-sizing: border-box;
  width: 100%;
  padding: 0 1em;
  color: var(--lnk);
  transition: all 0.5s;
  font-size: 0.9vw;
  line-height: 1.5;
  text-align: center;
}

.toolsmod .tools-intro a {
  font-size: 0.9vw;
  color: var(--lnk);
  line-height: 1.5;
  text-align: center;
}

.toolsmod li:hover .tools-intro {
  z-index: -1;
  box-sizing: border-box;
  opacity: 0;
}

.toolsmod .tools-hover {
  position: relative;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1000px) {
  .toolsmod {
    padding: 10% 5%;
    background-size: 50%;
  }

  .toolsmod .big-modtitle {
    font-size: 6.3vw;
    text-align: center;
    margin-bottom: 20px;
  }

  .toolsmod .big-modtitle .en {
    width: 100%;
    text-align: center;
  }

  .toolsmod ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    margin-bottom: 20px;
  }

  .toolsmod ul li {
    width: 100%;
    height: 100%;
    padding: 3vw 0.5vw;
    background-color: var(--paper);
  }

  .toolsmod .tools-icon {
    margin-bottom: 2vw;
  }

  .toolsmod .tools-name {
    font-size: 16px;
    margin-bottom: 1vw;
  }

  .toolsmod .tools-code {
    display: none;
  }

  .toolsmod .tools-intro {
    position: static;
    font-size: 13px;
    margin-bottom: 2vw;
  }

  .toolsmod li:hover .tools-intro {
    opacity: 1;
    z-index: 1;
  }

  .toolsmod .tools-icon img {
    width: 48%;
  }

  .toolsmod .tools-intro a {
    font-size: 14px !important;
  }
}

/* #endregion */

/* #region 更多 */
.seemore {
  width: 100%;
}

.seemore a {
  display: inline-block;
  padding: 0.5vw 2vw 0.5vw 0;
  color: var(--graphite);
  background: url('/images/icp4.png') no-repeat 97% center;
  background-size: 1.3vw;
  transition: 0.5s all;
  font-size: 1.35vw;
}

.seemore a:hover {
  color: var(--blue);
  background: url('/images/icp4-blue.png') no-repeat 97% center;
  background-size: 1.3vw;
}

.seemore a span {
  color: var(--lnk);
  transition: 0.5s all;
}

.seemore a:hover span {
  color: var(--blue);
}

.mseemore {
  display: none;
}

.mseemore .outbox {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--graphite);
  line-height: 1;
  font-size: 16px;
}

.mseemore img {
  width: 16px;
  margin-left: 5px;
}

@media screen and (max-width: 1000px) {
  .seemore {
    display: none;
  }

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

/* #endregion */

/* #region 叶子背景 */
.leafleft {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 15%;
  height: auto;
  text-align: left;
}

.leafleft img {
  width: 100%;
}

.leafright {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 20%;
  text-align: right;
}

.leafright img {
  width: 100%;
}

@media screen and (max-width: 1000px) {
  .leafleft {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 30% !important;
    height: auto;
    text-align: left;
  }

  .leafright {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 40% !important;
    text-align: right;
  }
}

/* #endregion */

/* #region 证书 */
.zs-chaxun {
  width: 14vw;
  height: 3.38vw;
}

.zs-chaxun a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14vw;
  height: 3.38vw;
  color: #fff;
  background-color: var(--blue);
  border: none;
  border-radius: 2vw;
  box-shadow: 0 0 4px 2px rgb(0 21 28 / 25%);
  transition: all 0.5s;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}

.zs-chaxun a span {
  margin-right: 0.8vw;
  color: #fff;
  font-size: 1.3vw;
  font-weight: bold;
}

.zs-chaxun a img {
  width: 1.3vw;
  transition: all 0.5s;
}

.zs-chaxun a:hover {
  background-color: var(--blue-dark);
  transform: translateY(-10px);
}

.mzs-chaxun {
  display: none;
}

.zs-intro {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 5vw 10% 4vw;
  background: #fff url('/images/bg-zs-intro.jpg') no-repeat;
  background-position: center;
  background-size: cover;
}

.zs-intro .left {
  width: 40%;
  height: auto;
}

.zs-intro .left .title {
  margin: 4vw 0 1.6vw;
  color: var(--graphite);
  font-size: var(--title2-font-size);
  font-weight: bold;
}

.zs-intro .left .linelist {
  width: 100%;
  height: auto;
  margin-bottom: 2vw;
}

.zs-intro .left .linelist li {
  display: flex;
  align-items: center;
  font-size: var(--font-size-base);
  color: var(--graphite);
}

.zs-intro .left .linelist li p {
  display: flex;
  align-items: center;
  margin-bottom: 0.5vw;
  color: var(--lnk);
  font-size: var(--font-size-base);
}

.zs-intro .left .linelist .line {
  display: block;
  width: 10px;
  height: 2px;
  margin-right: 0.5vw;
  background-color: var(--graphite);
}

.zs-intro .left .mid {
  width: 100%;
  height: auto;
}

.zs-intro .left .minititle {
  width: 100%;
  height: auto;
  margin-bottom: 0.8vw;
  color: var(--graphite);
  font-size: var(--font-size-large);
  font-weight: bold;
}

.zs-intro .left .minitext {
  width: 100%;
  height: auto;
  margin-bottom: 4.7vw;
  color: var(--lnk);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.zs-intro .right {
  width: 40%;
  height: auto;
}

.zs-intro .right .sharetext {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 0.9vw;
  padding-right: 0.5em;
  color: var(--graphite);
  font-size: var(--font-size-base);
  font-weight: bold;
  text-align: right;
}

.zs-intro .right .shareimg {
  width: 100%;
  height: auto;
}

.zs-intro .right .shareimg img {
  width: 100%;
  height: auto;
}

.zs-intro .right .sharelist {
  width: 100%;
  height: auto;
  margin-top: 2vw;
}

.zs-intro .right .sharelist li {
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: auto;
  margin-bottom: 0.9vw;
}

.zs-intro .right .sharelist .dian {
  display: block;
  width: 6px;
  height: 6px;
  margin-top: 13px;
  background: #8d8d8d;
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: 0.3;
}

.zs-intro .right .sharelist .undertext {
  width: auto;
  margin-left: 8px;
  color: var(--graphite);
  font-size: var(--font-size-extra-base);
  line-height: 26px;
}

@media screen and (max-width: 1000px) {
  .zs-chaxun {
    display: none;
  }

  .zs-chaxun.mblock {
    display: block !important;
    width: 60%;
    margin: 0 auto 9%;
  }

  .zs-intro {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box;
    padding: 10% 5% 7% !important;
  }

  .zs-intro .left {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 16px !important;
  }

  .zs-intro .left .title {
    margin-bottom: 15px !important;
    color: var(--graphite);
    font-size: 22px !important;
    font-weight: bold !important;
    text-align: center !important;
  }

  .zs-intro .left .linelist {
    box-sizing: border-box;
    width: 100% !important;
    height: auto;
    margin-bottom: 15px !important;
    padding: 0 2%;
  }

  .zs-intro .left .linelist li {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    color: var(--graphite);
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .zs-intro .left .linelist .line {
    width: 5px;
    height: 1px;
    margin-right: 8px;
    background-color: var(--graphite);
  }

  .zs-intro .left .mid {
    width: 100% !important;
    height: auto;
  }

  .zs-intro .left .minititle {
    width: 100% !important;
    height: auto;
    margin-bottom: 6px;
    color: var(--graphite);
    font-size: 18px !important;
    font-weight: bold;
    text-align: center;
  }

  .zs-intro .left .minitext {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    padding: 0 2%;
    font-size: 13px !important;
    line-height: 1.5;
    text-align: justify;
  }

  .zs-intro .left .linelist li p {
    font-size: 14px !important;
  }

  .zs-intro .mseemore {
    margin: 15px 0 30px;
  }

  .zs-intro .right {
    width: 100% !important;
    height: auto !important;
  }

  .zs-intro .right .sharetext {
    width: 100%;
    margin: 0 0 10px;
    padding-right: 8%;
    color: var(--graphite);
    font-size: 17px !important;
    font-weight: bold;
  }

  .zs-intro .right .shareimg {
    display: flex;
    justify-content: center;
    width: 100% !important;
    height: auto;
  }

  .zs-intro .right .shareimg img {
    height: auto;
  }

  .zs-intro .right .sharelist {
    width: 100% !important;
    height: auto;
    margin: 20px 0;
  }

  .zs-intro .right .sharelist li {
    display: flex;
    align-items: flex-start;
    width: 100% !important;
    height: auto;
    margin-bottom: 10px;
  }

  .zs-intro .right .sharelist .dian {
    width: 5px;
    height: 5px;
    margin-top: 10px;
    background: #8d8d8d;
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0.3;
  }

  .zs-intro .right .sharelist .undertext {
    flex: 1;
    flex-grow: 1;
    width: auto;
    margin-left: 8px !important;
    color: var(--graphite);
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .zs-intro .mzs-chaxun {
    display: flex;
    justify-content: center;
  }

  .zs-intro .mzs-chaxun.mblock {
    display: block !important;
    width: 60%;
    margin: 0 auto 9%;
  }

  .zs-intro .mzs-chaxun a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
    color: #fff;
    background-color: var(--blue);
    border: none;
    border-radius: 3em;
    transition: background-color 0.3s, transform 0.3s;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    font-size: 18px !important;
    font-weight: bold;
  }

  .zs-intro .mzs-chaxun a:hover {
    background-color: var(--blue-dark);
  }

  .zs-intro .mzs-chaxun a span {
    font-size: 18px !important;
    font-weight: bold;
  }

  .zs-intro .mzs-chaxun a img {
    width: 16px !important;
    margin-left: 5px !important;
  }
}

/* #endregion */

/* #region 证书说明 */
.certificate {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 5.3vw 10% 4.35vw;
}

.certificate .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  object-fit: cover;
}

.certificate .content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin-bottom: 5%;
}

.certificate .content.cont2 {
  margin: 0;
}

.certificate .content .box {
  width: 48%;
}

.certificate .content .box.box-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.certificate .title {
  font-size: max(22px, 2.0833vw);
  font-weight: bold;
  color: var(--graphite);
  line-height: 1;
  text-align: right;
}

.certificate .title.white {
  margin-bottom: 0.5em;
  color: var(--white);
  text-align: left;
}

.certificate .title.mob {
  display: none;
}

.certificate .content.cont2 .box.box-list .title {
  text-align: right;
  color: var(--graphite);
}

.certificate .content .box.box-list .item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 1.3em 1em;
  background-color: #fff;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 0.4em;
  box-shadow: 0 0.26vw 1.82vw 0 rgb(70 70 86 / 20%);
  font-size: max(15px, 1.1458vw);
  line-height: 1;
  gap: 0.7em;
}

.certificate .content.cont1 .box.box-list .item:last-child {
  border-bottom: 0.2em solid var(--primary);
}

.certificate .content.cont2 .box.box-list .item:last-child {
  border-bottom: 0.2em solid #374e72;
}

.certificate .content .box.box-list .item>div {
  display: flex;
  align-items: center;
}

.certificate .content .box.box-list .item .text {
  min-width: 60%;
  font-weight: bold;
  color: var(--graphite);
  line-height: 1.2;
}

.certificate .content .box.box-list .item .text .icon {
  width: 2em;
  height: 1.6em;
}

.certificate .content .box.box-list .item .text .icon img {
  object-fit: cover;
  height: 100%;
}

.certificate .content .box.box-list .item .href {
  display: flex;
  align-items: center;
  white-space: nowrap;
  gap: 1.2em;
  margin-left: 2em;
}

.certificate .content .box.box-list .item .go {
  font-size: max(13px, 1.0417vw);
  display: flex;
  align-items: center;
  color: #374e72;
}

.certificate .content .box.box-list .item .go img {
  height: 0.8em;
  margin-bottom: 0.1em;
  margin-left: 0.3em;
  transition: all 0.5s;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.9) saturate(1.5);
}

.certificate .content .box.box-list .item .go:hover {
  text-decoration: underline;
}

.certificate .content .box.box-list .item .go:hover img {
  transform: translateX(0.3em);
}


.certificate .content .box.box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: max(16px, 1.1458vw);
  border-radius: 0.4em;
}

@media screen and (max-width: 1300px) {
  .certificate .content .box.box-list .item {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

@media screen and (max-width: 1000px) {
  .certificate {
    padding: 8vw 5% 10vw;
  }

  .certificate .bg {
    width: 188%;
  }

  .certificate .content {
    justify-content: left;
    gap: 10px;
  }

  .certificate .title {
    margin-bottom: 10px;
    text-align: left;
  }

  .certificate .title.mob {
    display: block;
  }

  .certificate .content .box.box-list .title {
    display: none;
  }

  .certificate .content .box {
    width: 100%;
  }

  .certificate .content.cont1 {
    flex-direction: column-reverse;
    margin-bottom: 30px;
    gap: 15px;
  }

  .certificate .content.cont2 {
    flex-direction: column;
  }

  .certificate .content .box.box-list {
    gap: 10px;
  }

  .certificate .content .box.box-list .item {
    gap: 5px;
    padding: 1.1em 1em;
  }

  .certificate .content .box.box-img img {
    aspect-ratio: 695/270;
  }
}

/* #endregion */

/* #region 探索思唯学苑 */
.explore {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 4.3vw 10% 4.35vw;
  background: #f5f7f8 url('/images/back12.png') no-repeat;
  background-position: 100% 0%;
  background-size: 45%;
  line-height: 1;

  
}

.explore .title {
  font-weight: bold;
  color: var(--graphite);
}

.explore>.title {
  font-size: max(20px, 2.6042vw);
}

.explore>.title span {
  color: var(--primary);
}

.explore .content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 5%;
}

.explore .content .box {
  display: flex;
  box-sizing: border-box;
}

.explore .content .box .box-title {
  font-size: max(18px, 1.3542vw);
  font-weight: bold;
  position: relative;
}

.explore .content .box .box-title::before {
  position: absolute;
  top: 1.2em;
  left: 50%;
  width: 1px;
  height: calc(100% - 1.2em);
  background-color: rgb(0 0 0 / 10%);
  transform: translate(-50%);
  content: '';
}

.explore .content .box .box-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 9% 0 0;
}

.explore .content .box .box-list .item a {
  display: flex;
  align-items: center;
  gap: 2%;
  width: 100%;
  height: auto;
  padding: 1.2em 0;
}

.explore .content .box .box-list .item:last-child a {
  padding-bottom: 0 !important;
}

.explore .content .box .box-list .item .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 2.5vw;
  min-width: 40px;
  height: 2.5vw;
  min-height: 40px;
  background-color: var(--graphite);
  border-radius: 40%;
  transition: all 0.3s;
}

.explore .content .box .box-list .item .icon img {
  display: block;
  width: 82%;
  object-fit: cover;
}

.explore .content .box .box-list .item:hover .icon {
  background-color: var(--primary);
}

.explore .content .box .box-list .item:hover .title {
  text-decoration: underline;
}

.explore .content .box .box-list .item .title {
  font-size: max(14px, 1.0417vw);
  padding-top: 0.3em;
}

.explore .content .box .box-list .item .text {
  margin-top: 0.6em;
  color: var(--lnk);
  font-size: max(12px, 0.7292vw);
  line-height: 1.3;
}

@media screen and (max-width: 1000px) {
  .explore {
    padding: 8vw 5% 10vw;
  }

  .explore .content {
    grid-template-columns: auto;
    gap: 30px 0;
  }

  .explore .content .box {
    padding-right: 36px;
  }

  .explore .content .box .box-list {
    margin-top: 25px;
  }

  .explore .content .box .box-list .item a {
    padding: 0.5em 0;
  }
}

/* #endregion */

/* #region 表单 */
.interest {
  position: relative;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 5% 10%;
  padding-top: 5%;
  padding-bottom: 5%;
  background: url('/images/contact-bg.png') no-repeat left bottom;
  background-size: 42vw;
  gap: 0 10%;
  line-height: 1;
}

.interest .right iframe {
  height: 729px;
}

.interest .left {
  width: 66% !important;
}

.interest .left>.title {
  margin-bottom: 1em;
  color: var(--graphite);
  font-weight: bold;
  font-size: max(20px, 2.6042vw);
}

.interest .left>.title span {
  color: var(--primary);
}

.interest .left .list {
  list-style: none;
}

.interest .left .list li {
  list-style: none;
  line-height: 1.8;
  display: flex;
  align-items: flex-start;
  margin-bottom: 4%;
}

.interest .left .list li .title {
  line-height: 1.65;
  font-size: max(14px, 1.3542vw);
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-right: 0.5em;
  white-space: nowrap;
  font-weight: bold;
}

.interest .left .list li .title img {
  width: 1.3em;
  object-fit: cover;
}

.interest .left .list li .text {
  font-size: max(13px, 1.25vw);
  margin: 0 !important;
}

.interest .left>.solve-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.interest .left>.solve-box .go {
  display: block;
  box-sizing: border-box;
  width: auto;
  padding: 1em 2.8em;
  color: var(--white);
  background-color: var(--primary);
  border-radius: 0.3em;
  transition: all 0.5s;
  font-size: max(14px, 1.0417vw);
  text-align: center;
  font-weight: bold;
}

.interest .left>.solve-box .go:hover {
  transform: translateY(-5px);
}

.interest .right {
  position: relative;
  box-sizing: border-box;
  width: 55%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  box-shadow: 0 0 3vw rgb(1 1 1 / 10%);
  overflow: hidden;
}

@media screen and (max-width: 1000px) {
  .interest {
    flex-direction: column;
    padding: 8% 5% 10%;
    gap: 30px;
  }

  .interest .left,
  .interest .right {
    width: 100% !important;
  }

  .interest .left>.title {
    margin-bottom: 0.7em;
    text-align: center;
  }

  .interest .left>.solve-box .go {
    width: 100%;
    margin: 0;
    font-size: max(15px, 2.2vw);
  }

  .interest .left>.solve-box .solve-list {
    margin-bottom: 3%;
  }

  .interest .left>.solve-box .solve-title {
    font-size: max(16px, 2.2vw);
  }

  .interest .left>.solve-box .solve-list .solve-item .title img {
    height: max(15px, 2.4vw);
  }
}

/* #endregion */

/* #region 机构合作 */
.institution .layout-gap {
  padding: 6.6% 10%;
}

.institution .frist-gap {
  margin-top: 4%;
}

.institution .card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  padding: 5% 10%;
}

.institution .card.black {
  background-color: var(--graphite);
}

.institution .frist-gap.card {
  align-items: flex-start;
}

.institution .card .card-img {
  width: 44%;

}

.institution .card .card-img img {
  width: 100%;
  border-radius: 1.04vw;
  box-shadow: 0 0 1.04vw rgb(50 94 167 / 32%);
  overflow: hidden;
}

.institution .card .card-list {
  box-sizing: border-box;
  width: 50%;
}

.institution .card .card-list.whole {
  width: 100%;
}

.institution .contact .left .plan,
.institution .card-list .plan {
  margin-bottom: 1.8vw;
  color: var(--graphite);
  font-size: max(17px, 1.25vw);
}

.institution .card.black .plan {
  color: #fff;
}

.institution .card-list .plan {
  margin: 0 0 0.2em;
  line-height: 1.2;
}

.institution .card__item.deep .plan {
  color: var(--lvory);
}

.institution .card-list .plan-link {
  margin-bottom: 0;
}

.institution .card-list .plan-title {
  margin-bottom: 1.8vw;
  color: var(--graphite);
  font-size: var(--h2-font-size);
  line-height: 1.3;
  font-weight: bold;
}

.institution .card.black .plan-title {
  color: #fff;
}

.institution .card.black .plan-title .en {
  color: var(--lvory);
}

.institution .block-title .en,
.institution .card-list .plan .en,
.institution .contact .left .plan .en,
.institution .card-list .plan-title .en {
  display: inline-block;
  color: var(--lnk);
  font-size: 0.7em;
  line-height: 1.2;
}

.institution .card-list .plan .en,
.institution .contact .left .plan .en {
  font-size: 0.9em;
}

.institution .cooperate-box {
  font-size: 1.15vw;
  width: 100%;
  margin: 1em 0 0;
}

.institution .cooperate-title {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: max(10px, 0.5vw);
  margin: 0 0 0.8em;
  white-space: nowrap;
  margin-right: 1vw;
}

.institution .cooperate-title__hr {
  flex: 1;
  height: 1px;
  background-color: rgb(0 0 0 / 10%);
}

.institution .cooperate-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: max(10px, 0.5vw);
}

.institution .cooperate-item {
  padding: 1.2em 0.8em;
  background-color: #fff;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 0.4em;
  overflow: hidden
}

.institution .cooperate-item__image {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 768px) {
  .institution .cooperate-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

.institution .plan-list {
  width: 100%;
  margin-bottom: 2.4vw;
}

.institution .plan-list li {
  box-sizing: border-box;
  width: 100%;
  padding-left: 1.5vw;
  background: url('/images/list-line.jpg') no-repeat 0 0.8vw;
  background-size: 0.75vw;
  font-size: 1.15vw;
  line-height: 1.7;
}

.institution .plan-list li:not(:last-child) {
  margin-bottom: 0.5vw;
}

.institution .plan-link {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.institution .plan-link a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 2.35vw;
  padding: 2px 2.1vw 2px 0;
  color: var(--graphite);
  background: url('/images/icp4.png') no-repeat right 3px center;
  background-size: 1.3vw;
  font-size: 1.35vw;

}

.institution .plan-link a span {
  position: relative;
  top: 0.1em;
  opacity: 0.6;
}

.institution .plan-link a:hover {
  color: var(--blue);
  background: url('/images/icp4-blue.png') no-repeat right 3px center;
  background-size: 1.3vw;
}

.institution .plan-link a:hover span {
  opacity: 1;
}

.institution .gary {
  background: #f5f7f8;
}

.institution .textlink {
  display: inline;
  color: var(--blue);
  text-decoration: underline;
  transition: all 0.5s;
}

.institution .textlink:hover {
  color: var(--primary);
}

.institution .talk {
  position: relative;
  padding: 5% 10% 7%;
}

.institution .talk .swiper-button-prev,
.institution .talk .swiper-button-next {
  top: 50%;
  width: 56px;
  height: 56px;
  margin-top: 0;
  background-color: rgb(0 0 0 / 20%);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.5s;
}

.institution .talk .swiper-button-next::after,
.institution .talk .swiper-button-prev::after {
  font-size: 16px;
  font-weight: bold;
  color: var(--graphite);
  transition: all 0.5s;
}

.institution .talk .swiper-button-prev {
  left: 0%;
}

.institution .talk .swiper-button-next {
  right: 0%;
}

.institution .talk .swiper-button-prev:hover,
.institution .talk .swiper-button-next:hover {
  background-color: var(--blue);

}

.institution .talk .swiper-button-next:hover::after,
.institution .talk .swiper-button-prev:hover::after {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.institution .talk_swiper .swiper-slide {
  height: auto !important;
}

.institution .talk_swiper .swiper-wrapper {
  align-items: center;
}

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


.institution .block-title {
  margin-bottom: 2.5vw;
  color: var(--graphite);
  font-size: var(--h2-font-size);
  font-weight: bold;
  line-height: 1;
}

.institution .slide-left {
  width: 10vw;

}

.institution .talk .slide-left .swiper-bg {
  width: 100%;
  max-width: 196px;

}

.institution .slide-right {
  position: relative;
  width: 52%;
  margin-left: 5vw;
  padding-left: 4vw;
}

.institution .sw-box {
  position: relative;
}

.institution .talk .slide-right .talkicon1,
.institution .talk .slide-right .talkicon2 {
  position: absolute;
  width: auto;
  height: 1.875vw;
}

.institution .talk .slide-right .talkicon1 {
  top: -0.5vw;
  left: 0;
}

.institution .talk .slide-right .talkicon2 {
  right: 0;
  bottom: -1vw;
}

.institution .speaker {
  display: flex;
  align-items: flex-end;
  margin-bottom: 1.2vw;
}

.institution .speaker .name {
  margin-right: 1vw;
  color: var(--graphite);
  font-size: 1.66vw;
  font-weight: bold;
}

.institution .speaker .career {
  font-size: 1.04vw;
  color: var(--primary);

}

.institution .speech {
  display: -webkit-box;
  color: var(--graphite);
  font-size: 1.35vw;
  line-height: 2;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
}

.institution .talk-title {
  margin-bottom: 3vw;
}

.institution .contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: #fff url('/images/contact-bg.png') no-repeat left bottom;
  background-size: 42vw;
}

.institution .contact .left {
  width: 35%;
}

.institution .explain {
  width: 100%;
  margin-bottom: 2.5vw;
}

.institution .tips {
  display: flex;
  align-items: center;
  font-size: 1.35vw;
  font-weight: bold;
  margin-bottom: 1vw;
  color: var(--graphite);
}

.institution .tips img {
  width: 1.92vw;
  max-width: 1.92vw;
  margin-right: 0.8vw;

}

.institution .explain .plan-list {
  box-sizing: border-box;
  padding-left: 2.72vw;
}

.institution .explain .plan-list li {
  padding-left: 1.2vw;
  background: url('/images/list-line.jpg') no-repeat 0 center;
  background-size: 0.6vw;
  font-size: 1.14vw;
}

.institution .explain .plan-list li:not(:last-child) {
  margin-bottom: 0.8vw;
}

.institution .email-link {
  padding-left: 2.72vw;
  color: var(--blue);
  font-size: 1.35vw;
  text-decoration: underline;
  transition: all 0.5s;
}

.institution .email-link:hover {
  color: var(--primary);
}

.institution .right-form {
  flex: 1;
}


.institution .form-group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 2.6vw;
  margin-bottom: 0.78vw;
  padding-left: 0.78vw;
  background-color: #f5f7f8;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
}

input,
textarea {
  box-sizing: border-box;
  width: auto;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 1.04vw;
}

textarea {
  height: 100px;
  resize: vertical;
}

.institution .half {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.78vw;

}

label {
  width: auto;
  margin-right: 0.5vw;
  color: var(--graphite);
  font-size: 1vw;
}

.institution .half input {
  max-width: 7vw;
  line-height: 1;
}

.institution .higt-group {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0.78vw;
  background-color: #f5f7f8;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
}

input[type='checkbox'] {
  display: none;
}

.institution .custom-checkbox {
  position: relative;
  margin: 1vw 0;
  padding-left: 26px;
  color: #797979;
  cursor: pointer;
  font-size: 14px;
}

.institution .custom-checkbox a {
  display: inline-block;
  color: var(--blue);
  text-decoration: underline;
}

.institution .custom-checkbox a:hover {
  color: var(--primary);
}

.institution .custom-checkbox::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #f5f7f8 url('/images/check-box.png') no-repeat center center;
  background-color: #fff;
  background-size: 10px;
  border: 1px solid #797979;
  border-radius: 3px;
  transform: translateY(-50%);
  content: '';
}

input[type='checkbox']:checked+.custom-checkbox::before {
  background: var(--primary) url('/images/check-box2.png') no-repeat center center;
  background-size: 10px;
  border: 1px solid var(--primary);
}

.institution .check {
  margin: 1.1vw 0;
}


.institution .submit-button {
  box-sizing: border-box;
  width: 100%;
  padding: 1.1vw 0;
  color: white;
  background-color: var(--blue);
  border: none;
  border-radius: 6px;
  transition: all 0.5s;
  cursor: pointer;
  text-align: center;
  font-size: 1.15vw;
}

.institution .submit-button:hover {
  background-color: var(--primary);
}

iframe {
  height: 829px;

}

.institution .contact .right {
  position: relative;
  width: 44%;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  box-shadow: 0 0 3vw rgb(1 1 1 / 10%);
  overflow: hidden;
}

.institution .swiper-school {
  display: flex;
  align-items: stretch;
  margin-top: 0;
  font-size: max(14px, 1vw);
}

.institution .swiper-school .card-img {
  position: relative;
  width: 44%;
  overflow: hidden;
}

.institution .swiper-school .card-img::before,
.institution .swiper-school .card-img::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 20%;
  min-height: 20px;
  background: linear-gradient(0deg, #fff, #fff0);
  content: '';
  pointer-events: none;
}

.institution .swiper-school .card-img::after {
  top: -1px;
  bottom: auto;
  background: linear-gradient(180deg, #fff, #fff0);
}

.institution .swiper-school .swiper-box {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  font-size: max(13px, 1.1vw);
  line-height: 1.2;
  gap: 0.6em
}

.institution .swiper-school .swiper-list {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;

  --t: 100s
}

.institution .swiper-school .swiper-list>div {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  padding: 0.3em 0;
  animation: swiper-tb1 var(--t) linear infinite;
  gap: 0.6em
}

.institution .swiper-school .swiper-item {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 0.5em;
  aspect-ratio: 30 / 21;
  overflow: hidden
}

.institution .swiper-school .swiper-image {
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
  object-fit: cover
}

.institution .swiper-school .swiper-title {
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 0.5em 0 0.6em 5%;
  color: #fff;
  background: linear-gradient(0deg, 
  rgb(0 0 0 / 90%),
  rgb(0 0 0 / 80%),
  rgb(0 0 0 / 70%),
  rgb(0 0 0 / 60%),
  rgb(0 0 0 / 50%),
  rgb(0 0 0 / 40%),
  rgb(0 0 0 / 10%))
}

.institution .swiper-school .swiper-list>div:nth-child(2) {
  animation: swiper-tb2 var(--t) linear infinite;
  animation-delay: calc(var(--t) / -2);
}

.institution .swiper-school .swiper-list:nth-child(2n)>div {
  animation-direction: reverse
}

.institution .card-box {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin-bottom: 2em;
  padding: 0.6em;
  background-color: #fff;
  border-radius: 0.8em;
  box-shadow: rgb(50 94 167 / 32%) 0 0 1.04vw;
}

.institution .card__item {
  position: relative;
  width: 100%;
  color: var(--graphite);
  background-color: #f5f7f8;
  border-radius: 0.8em;
  overflow: hidden;
}

.institution .card__item.deep {
  background-color: var(--graphite);
}

.institution .card__item+.card__item {
  margin-top: 0.6em;
}

.institution .card__bg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.institution .card__content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 2.2em 1em 2.2em 1.5em;
  line-height: 1.8;
}

.institution .card__title {
  width: 75%;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 0.2em;
}

.institution .card__title .en {
  line-height: 1.5;
  display: block;
  font-size: 0.7em;
  color: var(--lnk);
  white-space: nowrap;
}

.institution .card__item.deep .card__title {
  color: var(--white);
}

.institution .card__item.deep .en {
  color: var(--lvory);
}

.institution .card__text {
  font-size: 1.1em;
  width: 70%;
  margin-bottom: 0.7em;
  line-height: 1.5;
}

.institution .card__content .plan-list {
  width: 70%;
  max-height: 0;
  margin-bottom: 0.5em;
  transition: all 0.3s;
  overflow: hidden
}

.institution .card__content .radio {
  display: none;
}

.institution .card__content .checkbox:checked~.plan-list {
  max-height: 1000px;
}


.institution .card__content .plan-list li {
  position: relative;
  padding-left: 0.8em;
  background: none !important;
  font-size: max(14px, 1vw);
}

.institution .card__content .plan-list li::before {
  position: absolute;
  top: 0.8em;
  left: 0;
  width: 0.55em;
  height: 0.12em;
  background-color: var(--graphite);
  transform: translateY(-50%);
  content: '';
}

.institution .card__item.deep .plan-list,
.institution .card__item.deep .card__text {
  filter: brightness(7);
}

.institution .card__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 1em;
  color: #fff;
  background-color: var(--blue);
  border: none;
  border-radius: 3em;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  line-height: 2em;
}

.institution .card__btn:hover {
  background-color: var(--blue-dark);
}

.institution .card__content .checkbox:checked~.card__btn .card__btn-show,
.institution .card__btn .card__btn-hide {
  display: none;
}

.institution .card__btn .icon {
  filter: brightness(100);
  width: auto;
  height: 0.3em;
  object-fit: cover;
  margin: 0.15em 0 0 0.3em;
  transition: transform 0.3s;
}


.institution .card__content .checkbox:checked~.card__btn .card__btn-hide {
  display: block;
}


.institution .card__content .checkbox:checked~.card__btn .icon {
  transform: rotate(180deg);
}


@media screen and (max-width:1200px) {
  .institution .contact .right {
    width: 50%;
  }

  .institution .half input {
    max-width: 10vw;
  }
}

@media screen and (max-width:1000px) {
  .institution .banner-zs .headline p.deep {
    color: var(--white);
  }

  .institution .card__content {
    padding: 1.2em;
  }

  .institution .card__title {
    font-size: 6.3vw;

  }

  .institution .card__text {
    margin-bottom: 0.3em;
  }

  .institution .swiper-school {
    flex-direction: column !important;
  }

  .institution .swiper-school .card-img {
    height: 80vw;
    min-height: 300px;
    margin-top: 12%;
  }

  .institution .frist-gap {
    margin-top: 35%;
    padding: 16% 0%;

  }

  .institution .card {
    flex-direction: column-reverse;
    padding: max(30px, 10%) 0%;
  }

  .institution .card .card-img {
    width: calc(100% - 10%);
    margin: 0 5%;
  }


  .institution .card .card-img img {
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(50 94 167 / 32%);
  }

  .institution .card-box {
    padding: 0.3em;
  }

  .institution .card__item+.card__item {
    margin-top: 0.3em;
  }

  .institution .card .card-list {
    width: 100%;
    padding: 8% 5% 0;
  }

  .institution .card.black .card-list {
    padding-top: 0;
  }

  .institution .card.gary {
    flex-direction: column;
  }

  .institution .card-list .plan-title {
    font-size: 6.3vw;
    margin-bottom: 5.3vw;
    padding: 0;
  }

  .institution .card-list .plan {
    font-size: max(12px, 4.3vw);
    padding: 0;
  }


  .institution .plan-list li {
    box-sizing: border-box;
    width: 100%;
    padding: 0 5vw;
    background: url('/images/list-line.jpg') no-repeat 1vw 9px;
    background-size: 0.7em;
    font-size: 14px;
    line-height: 1.5;
  }

  .institution .plan-list li:not(:last-child) {
    margin-bottom: 10px;
  }

  .institution .plan-link {
    margin: 7vw 0;
    padding: 0 5vw;
  }

  .institution .plan-link a {
    margin-right: 15px;
    padding: 2px 21px 2px 0;
    background-size: 14px;
    font-size: 16px;



  }

  .institution .plan-link a:hover {
    background-size: 14px;
  }

  .institution .slide-left {
    position: absolute;
    top: 4.8vw;
    right: 3.2vw;
    width: 18vw;
  }

  .institution .slide-right {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .institution .talk {
    padding: 16% 10%;
  }

  .institution .speech {
    font-size: 3.73vw;
  }

  .institution .talk .slide-right .talkicon1,
  .institution .talk .slide-right .talkicon2 {
    display: none;
  }

  .institution .talk .swiper-button-prev,
  .institution .talk .swiper-button-next {
    top: -36px;
    width: 34px;
    height: 34px;
    transform: translateY(0);
  }

  .institution .talk .swiper-button-prev {
    right: 12.8vw;
    left: unset;
  }

  .institution .block-title {
    font-size: 6vw;
  }

  .institution .talk-title {
    margin-bottom: 0;
  }

  .institution .talk_swiper .swiper-wrapper {
    align-items: flex-start;
  }

  .institution .speaker {
    margin: 10.7vw 0 8.3vw;
  }

  .institution .speaker .name {
    font-size: 4.8vw;
  }

  .institution .speaker .career {
    font-size: 12px;
  }

  .institution .talk .swiper-button-next::after,
  .institution .talk .swiper-button-prev::after {
    font-size: 12px;
  }

  .institution .talk .swiper-button-next:hover::after,
  .institution .talk .swiper-button-prev:hover::after {
    font-size: 12px;
  }

  .institution .contact .block-title {
    margin-bottom: 5.3vw;
  }

  .institution .contact .left {
    width: 100%;
    margin-bottom: 8.4vw;
  }

  .institution .contact .right {
    width: 100%;
    padding: 0;
    background-color: #fff;
    border-radius: 2.5vw;
  }

  .institution .explain .plan-list li:not(:last-child) {
    margin-bottom: 10px;
  }

  .institution .tips img {
    width: 4.8vw;
    max-width: 36px;
    margin-right: 1vw;
  }

  .institution .tips {
    font-size: 15px;
    margin-bottom: 3.7vw;
  }

  .institution .layout-gap {
    padding: max(30px, 10%) 5%;
  }

  .institution .explain .plan-list li {
    font-size: 14px;
    padding-left: 15px;
    background: url('/images/list-line.jpg') no-repeat 0 9px;
    background-size: 2.2vw;
  }

  .institution .explain .plan-list {
    margin-bottom: 5.5vw;
    padding-left: 5.8vw;
  }

  .institution .email-link {
    padding-left: 5.8vw;
    font-size: 14px;
  }

  input,
  textarea {
    font-size: 12px;
  }

  .institution .half {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
    margin-bottom: 8px;
  }

  .institution .half input {
    max-width: 43vw;

  }

  .institution .form-group {
    height: 30px;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 3px;
  }

  .institution .half .form-group {
    margin: 0;
  }

  .institution .higt-group {
    height: 70px;
    padding: 8px;
  }

  label {
    font-size: 12px;
  }

  .institution .custom-checkbox::before {
    width: 16px;
    height: 16px;
    background-size: 8px;
    border-radius: 2px;
  }

  input[type='checkbox']:checked+.custom-checkbox::before {
    background-size: 8px;
  }

  .institution .custom-checkbox {
    padding-left: 24px;
    font-size: 12px;
  }

  .institution .check {
    margin: 14px 0 20px;
  }

  .institution .submit-button {
    height: 40px;
    padding: 0;
    border-radius: 3px;
    font-size: 16px;
    line-height: 40px;
  }

  .institution .contact {
    flex-direction: column;
    background: #fff url('/images/contact-bg.png') no-repeat left bottom;
    background-size: 94vw;
  }

  iframe {
    height: 825px;
  }

  .institution .cooperate-box {
    font-size: 14px;
  }
}

/* #endregion */

/* #region 思唯人物 */
.fame,
.fame-banner {
  box-sizing: border-box;
  width: 100%;
  height: auto;
}

.fame {
  overflow: visible;
  line-height: 1;
}

#fame-main {
  scroll-margin-top: 2vw;
}

.fame-main {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0;
  padding: 6vw 10vw;
  overflow: visible;
}

.fame-main.nav-flex {
  display: flex;
  flex-wrap: wrap;
  padding-top: 4vw;
  padding-left: 0;
}

.fame-main.deep {
  background-color: var(--paper);
}

.fame-banner {
  position: relative;
  padding: 10% 10% 2em;
  font-size: var(--h2-font-size);
  overflow: hidden;
}

.fame-banner::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 15%;
  background: linear-gradient(180deg, rgb(0 0 0), rgb(0 0 0 / 0%));
  content: '';
}

.fame-banner__bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fame__title {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left: 18px;
  color: var(--white);
}

.character__card-tag::before,
.fame-title::before,
.fame__title::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 99%;
  background-color: var(--primary);
  transform: translateY(-50%);
  content: '';
}

.fame-banner__title-tag {
  display: inline-block;
  padding: 0 0.2em;
  background-color: var(--primary);
  border-radius: 0.1em;
  font-family: bold-condensed;
  font-size: max(38px, 3.1vw);
  line-height: 1;
}

.fame-banner__title-text1 {
  font-size: var(--title1-font-size);
  font-weight: 700;
  margin-top: 0.15em;
  line-height: 1;
}

.fame-banner__title-text2 {
  width: 80%;
  font-size: var(--title3-font-size);
  color: rgb(255 255 255 / 60%);
  line-height: 1.5;
}

.fame-banner__title-text2 span {
  display: block;
}

.fame-title {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 6vw;
  padding-left: 18px;
  color: var(--white);
  font-size: var(--h2-font-size);
  font-weight: 700;
}

.fame-title.deep {
  color: var(--graphite);
}

.fame-main .fame-title {
  margin: 0 0 1.2em;
}

.character__card-tag::before,
.fame-title::before {
  width: 4px;
  height: 90%;
}

.fame-title .en {
  font-size: 0.7em;

  
}

.fame-title.deep .en {
  color: var(--lnk);
}

.swiper-character {
  position: relative;
  margin-top: 2vw;
}

.character__card-btn {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transition: all 0.3s;
}

.character__card-btn.swiper-button-disabled {
  cursor: no-drop;
  opacity: 0.5;
}

.character__card-btn.card-btn-left {
  left: 0;
  transform: translate(-200%, -50%);
}

.character__card-btn.card-btn-left:hover {
  transform: translate(-220%, -50%);
}

.character__card-btn.card-btn-left img {
  transform: rotate(180deg);
}

.character__card-btn.card-btn-right {
  right: 0;
  transform: translate(200%, -50%);
}

.character__card-btn.card-btn-right:hover {
  transform: translate(220%, -50%);
}

.fame-character__card {
  display: flex;
  width: 100%;
  height: auto;
  color: var(--graphite);
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
}

.fame-character__card.active {
  display: flex;
}

.character__card-info {
  display: flex;
  flex-direction: column;
  width: 55%;
  padding: 2vw 2.5vw;
  overflow: hidden;
  aspect-ratio: 666/264;
}

.character__card-title {
  font-size: max(1.7vw, 22px);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  font-weight: 700;
}

.character__card-title .en {
  margin-left: 0.2em;
  font-size: 0.8em;
  color: var(--lnk);
}

.character__card-title .info {
  margin-left: 1em;
  padding-left: 1em;
  font-size: max(14px, 1vw);
  border-left: 1px solid rgb(0 0 0 / 10%);
  font-weight: normal;
  line-height: 1.2;
}

.character__card-title .info .school {
  display: block;
}

.character__card-title .info .school-en {
  display: block;
  font-size: 0.8em;
  opacity: 0.9;
}

.character__card-text {
  flex: 1;
  margin-top: 0.6em;
  padding-right: 0.5em;
  color: var(--lnk);
  font-size: max(14px, 1vw);
  overflow: auto;
  line-height: 1.8;
}

.character__card-hr {
  font-size: max(14px, 1vw);
  margin: 1em 0;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.character__card-text::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.character__card-text::-webkit-scrollbar-thumb {
  width: 3px;
  background-color: var(--primary);
}

.character__card-text::-webkit-scrollbar-track {
  width: 3px;
  background: #f2f2f2;
}

.character__card-tag {
  position: relative;
  display: flex;
  padding-left: 0.6em;
  color: var(--graphite);
  overflow: hidden;
  white-space: nowrap;
  font-size: max(12px, 0.9vw);
  line-height: 1.4;
}

.character__card-tag span {
  color: var(--graphite);
}

.character__card-tag:hover {
  color: var(--blue);
}

.character__card-tag:hover img {
  filter: brightness(1);
}

.character__card-tag:hover div {
  text-decoration: underline;
}

.character__card-more .icon,
.character__card-tag img {
  width: auto;
  height: 0.5em;
  margin-left: 0.3em;
  object-fit: cover;
  filter: brightness(0.2);
}

.character__card-tag::before {
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  transform: translateY(-80%);
}

.character__card-image {
  width: 45%;
}

.character__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character__card-more {
  display: none;
  justify-content: center;
  align-items: center;
  margin: 0.8em 0 0;
  color: var(--graphite);
  transition: color 0.3s;
  text-align: center;
  font-size: max(15px, 1.2vw);
  cursor: pointer;
}

.character__card-more .icon {
  height: 0.3em;
  transition: transform 0.3s, filter 0.3s;
}

.character__card-more:hover {
  color: var(--primary);
}

.character__card-more.active .icon {
  transform: rotate(180deg);
}

.character__card-more:hover .icon {
  transform: rotate(180deg);
  filter: invert(59%) sepia(88%) saturate(3520%) hue-rotate(353deg) brightness(97%) contrast(94%);
}

.fame-character-swiper {
  position: relative;
  display: flex;
  width: 100%;
  margin-top: 20px;
  font-size: max(14px, 0.9vw);
}

.fame-character-swiper .btn {
  position: absolute;
  top: calc(50% - 0.85em);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  background-color: var(--primary);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s;
  cursor: pointer;
}

.fame-character-swiper .btn img {
  width: auto;
  height: 0.7em;
  object-fit: cover;
}

.fame-character-swiper .btn-left {
  left: -3.5em;
  transform: translate(0, -50%) rotate(180deg);
}

.fame-character-swiper .btn-left:hover {
  transform: translate(-10%, -50%) rotate(180deg);
}

.fame-character-swiper .btn-right {
  right: -3.5em;
}

.fame-character-swiper .btn-right:hover {
  transform: translate(10%, -50%);
}

.fame-character-swiper .btn.swiper-button-disabled {
  background-color: #fff;
}

.fame-character-swiper .btn.swiper-button-disabled img {
  filter: invert(59%) sepia(88%) saturate(3520%) hue-rotate(353deg) brightness(97%) contrast(94%);
}

.fame-character-swiper__list,
.fame-character-swiper__list .swiper-slide.active .image::before,
.fame-character-swiper__list .swiper-slide:hover .image::before {
  width: 100%;
}

.fame-character-swiper .swiper-container {
  padding-top: 1em;
}

.fame-character-swiper__list .swiper-slide {
  cursor: pointer;
  position: relative;
  width: 120px;
  overflow: hidden;
  transition: transform 0.3s;
}

.fame-character-swiper__list .swiper-slide:hover {
  transform: translateY(-10%);
}

.fame-character-swiper__list .swiper-slide .image {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.fame-character-swiper__list .swiper-slide .image::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 4px;
  background-color: var(--primary);
  transform: translateX(-50%);
  transition: width 0.3s;
  content: '';
}

.fame-character-swiper__list .swiper-slide img {
  right: -20%;
  width: 100%;
  object-fit: cover;
}

.fame-character-swiper__list .swiper-slide .info {
  margin-top: 0.5em;
  color: var(--white);
  text-align: center;
  line-height: 1.3;
}

.fame-character-swiper__list .swiper-slide .info .en {
  font-size: 0.9em;
  color: var(--paper);
}

.fame-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 15%;
  min-width: 200px;
  padding-right: 1em;
  color: var(--graphite);
  overflow: visible;
  font-size: max(15px, 0.8vw);
}

.fame-nav-box {
  top: 0;
  z-index: 2;
}

.fame-nav-box.sticky-top {
  position: fixed;
  top: 5vw;
  left: 0;
  transition: top 0.5s;
}

.fame-nav-box.sticky-bottom {
  position: absolute;
  top: 100%;
  transform: translateY(-100%);
}

.fame-nav__title {
  padding-left: 0.9em;
  color: var(--blue);
  font-size: 0.9em;
}

.fame-nav-list {
  margin-top: 0.7em;
  list-style: none;
}

.fame-nav-list li {
  margin: 0.4em 0;
  list-style: none;
}

.fame-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.5em 0.35em 0.35em;
  color: var(--graphite);
  border-radius: 0 4em 4em 0;
  transition: color 0.3s, background-color 0.3s;
  cursor: pointer;
}

.fame-nav-link:hover {
  color: var(--blue);
}

.fame-nav-link.active {
  color: var(--blue);
  background-color: rgb(var(--blue-rgb) / 10%);
}

.fame-nav-link-cont {
  padding: 0 0.5em;
  line-height: 1.4;
}

.fame-nav-link-cont .en {
  font-size: 0.8em;
  color: var(--lnk);
}

.fame-nav-link__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 0;
  background-color: var(--blue);
  border-radius: 50%;
  transition: all 0.3s;
}

.fame-nav-link.active .fame-nav-link__icon {
  width: 2em;
  height: 2em;
}

.fame-nav-link__icon img {
  width: auto;
  height: 0.5em;
  object-fit: cover;
}

.pinyin-filter-box {
  font-size: max(0.8vw, 13px);
  width: 100%;
}

.pinyin-filter {
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 1.3em 0 1.3em max(130px, 10vw);
  color: var(--graphite);
  background-color: #fff;
  transition: top 0.5s;
  font-size: max(0.8vw, 13px);
  line-height: 1;
}

.pinyin-filter-msg {
  width: 100%;
  padding: 0 0 2.3em max(130px, 10vw);
  color: var(--lnk);
  font-size: max(0.8vw, 13px);
  text-align: center;
}

.pinyin-filter-msg span {
  color: var(--primary);
}

.pinyin-filter-msg .btn-link {
  display: inline-flex;
  align-items: center;
  height: 2.5em;
  margin-left: 1em;
  padding: 0 0.8em 0 0.6em;
  color: var(--white);
  background-color: var(--primary);
  border-radius: 0.3em;
  transition: opacity 0.3s;
  line-height: 2.7;
  vertical-align: middle;
  text-decoration: none;
}

.pinyin-filter-msg .btn-link img {
  width: auto;
  height: 1.2em;
  margin-right: 0.3em;
  object-fit: cover;
}

.pinyin-filter-msg .btn-link:hover {
  opacity: 0.8;
}

.pinyin-filter-msg .btn-link:active {
  opacity: 0.9;
}

.pinyin-filter-msg p {
  display: inline-block;
}

.pinyin-filter.sticky-top {
  position: fixed;
  top: var(--layout-header-height);
  z-index: 1;
  padding-right: max(130px, 10vw);
  cursor: pointer;
}

.pinyin-filter__list li {
  cursor: pointer;
  display: inline-block;
  padding: 0.2em 0.5em;
  transition: color 0.3s;
}

.pinyin-filter__list li.disable {
  cursor: not-allowed;
  color: rgb(0 0 0 / 40%) !important;
}

.pinyin-filter__list li:hover,
.pinyin-filter__list li.active {
  color: var(--blue);
}

.t-divider {
  position: relative;
  width: 100%;
  height: 30px;
  margin: 75px 0;
  background-image: url('/images/icon-divider.png');
  background-position: center;
  background-repeat: no-repeat;
}

.t-divider::before,
.t-divider::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(50% - 25px);
  height: 1px;
  margin-right: 20px;
  background-color: rgb(0 0 0 / 10%);
  transform: translateY(-50%);
  content: '';
}

.t-divider::after {
  right: 0;
  left: auto;
  margin-right: 0;
  margin-left: 20px;
}

.character-cont {
  flex: 1;
}

.character-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, auto);
  justify-items: center;
  gap: 50px 30px;
}

.character-list .character-card:hover {
  transform: translateY(-5%);
}

.character-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  padding-bottom: 1.2em;
  color: var(--graphite);
  transition: all 0.3s;
  overflow: hidden;
  font-size: max(14px, 0.9vw);
  border-bottom: 2px solid var(--blue);
}

.character-card>h3 {
  width: 100%;
}

.character-card__image {
  cursor: pointer;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5em;
}

.character-card__headline {
  position: relative;
  width: 100%;
  margin: 1.2em 0 0;
}

.character-card__info {
  display: flex;
  align-items: center;
  width: 100%;
  height: 2em;
  font-weight: 700;
}

.character-card__name {
  white-space: nowrap;
  font-size: max(16px, 1.3vw);
  margin-right: 0.1em;
}

.character-card__name-en {
  white-space: nowrap;
  font-size: max(16px, 1.1vw);
  color: var(--lnk);
}

.character-card__school {
  width: 90%;
  margin-top: 0.2em;
  line-height: 1.4;
  font-size: max(0.8vw, 13px);
}

.character-list .character-card__school {
  display: -webkit-box;
  height: 2.8em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.character-card__school .en {
  color: var(--lnk);
}

.character-card__contact {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
}

.character-card__contact-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  margin-left: 0.4em;
  background-color: var(--graphite);
  border-radius: 50%;
  transition: background-color 0.3s;
}

.character-card__contact-item:hover {
  background-color: var(--primary);
}

.character-card__contact-item img {
  width: 60%;
  height: 60%;
  object-fit: cover;
}

.character-card__text {
  width: 100%;
  font-size: max(0.8vw, 13px);
  padding-top: 1.5em;
}

.character-list .character-card__text {
  margin-bottom: 0.5em;
  padding-top: 0.8em;
  color: var(--lnk);
}

.character-list .character-card__text-link {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  color: var(--lnk);
}

.character-card__text-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  padding-right: 2em;
  line-height: 1.4;
}

.character-list .character-card__text-item {
  display: -webkit-box;
  height: 5.4em;
  margin-bottom: 0.6em;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-height: 1.8;
  -webkit-box-orient: vertical;
}

.character-list .character-card__text-item.row2 {
  -webkit-line-clamp: 2;
  height: 3.6em;
}

.character-card__text-item.line {
  -webkit-line-clamp: 1;
}

.character-card__text-title {
  position: relative;
  flex: auto !important;
  width: 100%;
  line-height: 1;
  font-size: 1.2em;
  font-weight: 700;
}

.character-card__text-title::before {
  position: absolute;
  top: 50%;
  left: -0.5em;
  width: 3px;
  height: 0.9em;
  background-color: var(--primary);
  transform: translateY(-50%);
  content: '';
}

.fame-drawer .character-card__text-item ul {
  list-style: none;
}

.character-card__text-item li {
  position: relative;
  padding-left: 1em;
  list-style: none;
}

.character-card__text-item li::before {
  content: '';
  position: absolute;
  top: 0.6em;
  left: 0.2em;
  width: 0.5em;
  height: 1px;
  background-color: currentcolor;
}

.character-list .character-card__text-item li {
  padding: 0;
}

.character-list .character-card__text-item li::before {
  display: none;
}

.character-card__text-li {
  line-height: 1.4;
}

.character-card__text-link {
  display: block;
  color: var(--graphite);
}

.character-card__text-link:hover {
  text-decoration: underline;
}

.character-list .character-card__text-link:hover {
  color: var(--blue);
}

div.character-card__text-link {
  color: var(--graphite);
}

div.character-card__text-link:hover {
  text-decoration: none;
}

a.character-card__text-link {
  text-decoration: underline;
}

a.character-card__text-link:hover {
  color: var(--blue);
}

.character-card__text-more {
  position: absolute;
  top: 0.4em;
  right: 0;
  margin-left: auto;
  padding: 0 0.3em;
  background-color: var(--paper);
  border-radius: 1em;
  transition: all 0.3s;
  cursor: pointer;
  line-height: 1em;
}

.character-card__text_more:hover {
  color: #fff;
  background-color: var(--primary);
}

.character-card__more {
  position: relative;
  display: inline-block;
  margin-top: auto;
  padding-right: 0.8em;
  color: var(--blue);
  cursor: pointer;
  font-size: max(1vw, 14px);
  font-weight: 700;
}

.character-card__more::before,
.character-list__more-btn::before {
  position: absolute;
  top: 50%;
  right: 0;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  object-fit: cover;
}

.character-card__more::before {
  width: 0.5em;
  height: 0.9em;
  background-image: url('/images/icon-next-blue.png');
  transform: translate(0, -50%);
}

.character-card__more:hover::before {
  animation: character-card-more 0.5s infinite alternate linear;
}

.character-card-footer {
  display: none;
  align-items: center;
  margin-top: 4em;
  padding: 0.5em 1.1em;
  font-size: max(16px, 1.1vw);
  border-top: 1px solid rgb(0 0 0 / 10%);
  font-weight: bold;
}

.capture .character-card-footer {
  display: flex;
}

.character-card-footer__logo {
  width: auto;
  height: 3.2em;
  object-fit: cover;
}

.character-card-footer__title {
  font-size: 1.1em;
  margin-left: 0.5em;
  padding-left: 0.5em;
  border-left: 1px solid rgb(0 0 0 / 10%);
}

.character-card-footer__qrcode {
  width: 4.5em;
  height: 4.5em;
  margin-left: auto;
  object-fit: cover;
}

.character-list__more {
  display: flex;
  justify-content: center;
  margin: 40px 0 80px;
}

.character-list__more-btn {
  position: relative;
  padding-right: 1.5em;
  color: var(--graphite);
  transition: all 0.3s;
  cursor: pointer;
  font-weight: 700;
  font-size: max(16px, 1.3vw);
}

.character-list__more-btn::before {
  width: 1.2em;
  height: 1.2em;
  background-image: url('/images/iconbut_07.png');
  transform: translateY(-50%) rotate(180deg);
  transition: all 0.3s;
  opacity: 0.5;
  filter: brightness(0);
}

.character-list__more-btn:hover {
  color: var(--primary);
}

.character-list__more-btn.active::before {
  transform: translateY(-50%) rotate(0deg);
}

.character-list__more-btn:hover::before {
  transform: translateY(-50%) rotate(0deg);
  filter: brightness(1);
  opacity: 1;
}

.fame-deawer__mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
  width: 100vw;
  height: 100vh;
  animation: drawer-hide 0.3s forwards;
}

.fame-drawer.active .fame-deawer__mask {
  animation: drawer-show 0.3s forwards;
}

.fame-drawer-content {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 25vw;
  min-width: 400px;
  height: 100vh;
  max-height: 100vh;
  color: var(--graphite);
  background-color: #fff;
  background-image: url('/images/bg-business-card1.png');
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 50%;
  animation: drawer-content-hide 0.3s forwards;
  font-size: max(14px, 0.9vw);
}

.fame-drawer.active .fame-drawer-content {
  animation: drawer-content-show 0.3s forwards;
}

.fame-drawer-content .character-card {
  border: 0;
}

.fame-drawer .character-card__text-item {
  margin-top: 0.6em;
  padding-right: 0;
}

.fame-drawer .character-card__text-item,
.fame-drawer .character-card__text-li {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.fame-drawer-title {
  position: relative;
  display: flex;
  align-items: center;
  margin: 1.5em 2em 0.5em;
  font-weight: 700;
}

.fame-drawer-title .label {
  font-size: var(--font-size-large);
}

.fame-drawer-title::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -0.5em;
  width: 3px;
  height: 1.3em;
  background-color: var(--primary);
  transform: translateY(-50%);
}

.fame-drawer-title .icon {
  opacity: 0.9;
  margin-left: auto;
  cursor: pointer;
  transition: transform 0.3s;
}

.fame-drawer-title .icon:hover {
  transform: rotate(180deg);
}

.fame-drawer-box {
  flex: 1;
  margin: 0 0.8em 0 0.5em;
  overflow: auto;

  
}

.fame-drawer-box::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

.fame-drawer-box::-webkit-scrollbar-thumb {
  width: 3px;
  background-color: var(--primary);
}

.fame-drawer-box::-webkit-scrollbar-track {
  width: 3px;
  background: #f2f2f2;
}

.fame-drawer-box .character-card {
  box-sizing: border-box;
  padding: 1.5em 0.8em 3em 1.5em;
}

.fame-drawer-btns {
  display: flex;
  align-items: center;
  margin-top: 0.5em;
  background-color: var(--paper);
  font-size: 0.9em;
}

.fame-drawer-btns .hr {
  width: 1px;
  height: 1em;
  background-color: rgb(0 0 0 / 10%);
}

.fame-drawer-btns__btn {
  display: inline-block;
  width: 28%;
  height: auto;
  color: var(--graphite);
  transition: all 0.3s;
  cursor: pointer;
  text-align: center;
  line-height: 4.2;
}

.fame-drawer-btns__btn.disable {
  cursor: not-allowed;
  color: var(--lnk);
}

.fame-drawer-btns__btn img {
  filter: brightness(0.5);
  height: 1em;
}

.fame-drawer-btns__btn img.reversal {
  transform: rotate(180deg);
}

.fame-drawer-btns__capture {
  position: relative;
  margin-right: 1em;
  margin-left: auto;
  padding: 0.9em 1.2em;
  color: #fff;
  background-color: var(--blue);
  border: none;
  border-radius: 3em;
  transition: background-color 0.3s, transform 0.3s;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  font-weight: normal;
  font-size: max(14px, 0.92vw);
}

.fame-drawer-btns__capture:hover {
  background-color: var(--blue-dark);
}

.outstanding {
  display: flex;
  justify-content: space-between;
  gap: max(10px, 1vw);
}

.outstanding-card {
  position: relative;
  display: inline-block;
  width: auto;
  height: 18.5vw;
  border-radius: 12px;
  transition: transform 0.3s;
  overflow: hidden;
  font-size: max(16px, 1.3vw);
}

.outstanding-card:not(.deep)::before {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 50%;
  background: linear-gradient(0deg, rgb(0 0 0), rgb(255 255 255 / 0%));
  content: '';
}

.outstanding-card.deep {
  box-shadow: 0 0 17px 0 rgb(100 100 111 / 20%);
}

.outstanding-card:hover {
  transform: translateY(-8%);
}

.outstanding-card .img {
  width: auto;
  height: 100%;
  object-fit: cover;
}

.outstanding-card .cont {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 1.2em;
  color: var(--white);
}

.outstanding-card.deep .cont {
  color: var(--graphite);
}

.outstanding-card .cont .text {
  font-weight: bold;
  width: 100%;
}

.outstanding-card .cont .en {
  flex: 1;
  width: 80%;
  margin-top: 0.2em;
  margin-right: auto;
  color: var(--paper);
  font-size: max(14px, 0.9em);
  line-height: 1.3;
}

.outstanding-card.deep .cont .en {
  color: var(--lnk);
}

.outstanding-card .cont .tag {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  min-width: 110px;
  margin: auto 0 0;
  padding: 0 1.2em 1.2em 0;
  white-space: nowrap;
  text-align: right;
  overflow: hidden;
}

.outstanding-card .cont .tag span {
  vertical-align: middle;
  font-size: max(12px, 0.5em);
  margin-right: 0.5em;
}

.outstanding-card .cont .tag img {
  font-size: max(12px, 0.5em);
  height: 2em;
}

@media screen and (max-width: 1550px) {
  .character-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 1200px) {
  .character-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 1000px) {
  .fame-nav {
    z-index: 1;
    width: 100%;

    /* position: sticky;
    top: 0; */
    min-width: 0 !important;
    height: 50px;
    padding: 10px 0;
    background-color: #fff;
    grid-column: 1/3;
  }

  .fame-nav-box {
    position: relative;
    top: 0;
    width: 100%;
    background-color: #fff;
  }

  .fame-nav-box.sticky-top {
    position: fixed;
    top: 0;
    left: 0;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
    padding: 0.3em 0 0;
  }

  .fame-nav__title {
    padding: 0.2em 0 0.5em;
  }

  .fame-nav-box.sticky-top .fame-nav__title {
    display: none;
  }

  .fame-nav-list {
    display: flex;
    margin-top: 0.1em;
    padding: 0 !important;
    overflow: auto;
    white-space: nowrap;
  }

  .fame-nav-list::-webkit-scrollbar {
    display: none;
  }

  .fame-nav-list li {
    position: relative;
    margin: 0;
    padding: 0 0.9em;
  }

  .fame-nav-list li:first-of-type {
    padding-left: 0;
  }

  .fame-nav-box.sticky-top .fame-nav-list li:first-of-type {
    padding-left: 5vw;
  }

  .fame-nav-link-cont {
    height: 1.4em;
    padding: 0 !important;
    line-height: 1.4;
  }

  .fame-nav-list li::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 1em;
    background-color: rgb(0 0 0 / 10%);
    transform: translateY(18%);
    content: '';
  }

  .fame-nav-link {
    padding: 0 0 0.3em;
    color: var(--graphite) !important;
  }

  .fame-nav-link.active {
    background-color: transparent;
    border-radius: 0;
    border-bottom: 3.5px solid var(--primary);
  }

  .fame-nav-link-cont .en {
    display: none;
  }

  .fame-nav-link__icon {
    display: none;
  }

  .t-divider {
    margin: 50px 0;
  }

  .fame-banner {
    padding: 5%;
    background-color: #070c13;
  }

  .fame-main {
    padding: 10vw 5vw;
  }

  .fame-main.nav-flex {
    display: grid;
    grid-template-columns: auto auto;
    padding: 0 0 10vw 5vw;
  }

  .fame__title {
    margin: 25vw 0 12vw;
  }

  .fame-banner__bg {
    left: -108%;
    width: 253%;
    height: auto;
  }

  .fame-title {
    margin-top: 30px;
  }

  .fame-character__card {
    flex-direction: column-reverse;
    margin-top: 15px;
    border-radius: 10px;
  }

  .character__card-title .info {
    display: flex;
    flex-wrap: wrap;
    align-items: self-end;
    width: 100%;
    margin: 0.5em 0 0;
    padding: 0;
    border: 0;
    gap: 0.2em;
  }

  .character__card-info {
    width: auto;
    padding: 6.5vw 5vw;
    aspect-ratio: 666/564;
  }

  .character__card-image {
    width: auto;
  }

  .character__card-more {
    display: flex;
  }

  .fame-character-swiper {
    margin: 10px 0;
  }

  .fame-character-swiper .btn-right {
    right: -1em;
  }

  .fame-character-swiper .btn-left {
    left: -1em;
  }

  .fame-character-swiper__list .swiper-slide {
    width: 100px;
  }

  .pinyin-filter-box {
    display: flex;
    height: 100%;
    grid-column: 2/3;
    grid-row: 2/4;
  }

  .pinyin-filter {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 30px;
    margin: 0;
    padding: 0 0.5em !important;
  }

  .pinyin-filter-msg {
    justify-content: center;
    padding: 1em 0;
    grid-column: 1/2;
    grid-row: 2/2;
    line-height: 1.5;
  }

  .pinyin-filter-msg>div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pinyin-filter-msg .btn-link {
    margin: 0.6em 0 0;
  }

  .pinyin-filter.sticky-top {
    top: 35px;
    right: 0;
  }

  .pinyin-filter.sticky-top~.character-cont {
    padding-right: 20px;
  }

  .pinyin-filter__title {
    display: none;
  }

  .pinyin-filter__list {
    position: sticky;
    top: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pinyin-filter__list li a,
  .pinyin-filter__list li span {
    padding: 0.2em;
  }

  .character-list {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 15px;
    gap: 15px;
  }

  .character-list .character-card {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    height: 7.4em;
    border: 0;
  }

  .character-list .character-card__school {
    width: 70%;
    -webkit-line-clamp: 1 !important;
    height: 1.4em;
  }

  .character-list .character-card__info,
  .character-list .character-card__text {
    width: calc(100% - 7em);
  }

  .character-list .character-card__more {
    width: 8ch;
    margin-top: 0.5em;
  }

  .character-card__more::before {
    right: 0.4em;
  }

  .character-list .character-card__headline {
    position: static;
    margin-top: 0.2em;
  }

  .character-card__text-more,
  .character-list .character-card__text_more {
    display: none;
  }

  .character-list .character-card__contact {
    position: absolute;
    top: auto;
    bottom: 0.8em;
  }

  .character-list .character-card__image {
    width: 6em;
    height: 6em;
    margin-right: 0.4em;
    border-radius: 50%;
    object-fit: cover;
  }

  .character-list .character-card__text {
    min-height: 0;
    margin: 0.5em 0 0;
    padding: 0;
  }

  .character-list .character-card__text-item {
    height: 1.8em;
    margin: 0;
    padding-right: 0;
    -webkit-line-clamp: 1 !important;
  }

  .character-list .character-card__text-item.max {
    display: none;
  }

  .character-list .character-card__text-item.row2 {
    -webkit-line-clamp: 1 !important;
    height: 1.8em;
  }

  .fame-drawer-content {
    width: 100vw;
    min-width: 0;
  }

  .fame-drawer-btns__btn {
    font-size: max(16px, 1.3vw);
  }

  .outstanding {
    gap: 15px;
    flex-direction: column;
  }

  .outstanding-card {
    width: 100%;
    height: 40vw;
    background-color: #fff;
    border-radius: 6px;
  }

  .outstanding-card:not(.deep)::before {
    height: 90%;
  }

  .outstanding-card .img {
    width: 100%;
    height: auto;
    transform: translateY(-12%);
  }

  .outstanding-card .cont .en {
    width: 60%;
    font-size: max(12px, 0.9em);
    line-height: 1.2;
  }

  .outstanding-card.special {
    display: grid;
    grid-template-columns: 55% 45%;
    height: 30vw;
  }

  .outstanding-card.special .cont {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    height: 31vw;
    padding: 0 0 0 1em;
  }

  .outstanding-card.special .cont .en {
    flex: none;
    width: 100%;
    margin: 0.5em 0 0;
  }

  .outstanding-card.special .img {
    width: 100%;
    transform: translateY(5%);
    object-fit: cover;
  }
}

@media screen and (max-width: 680px) {
  .character-list {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 15px;
    gap: 15px;
  }
}

/* #endregion */

/* #region 案例中心 */
.practice .sector {
  position: relative;
  z-index: 2;
}

.practice .compare {
  position: fixed;
  top: calc(0px - var(--layout-header-height));
  left: 0;
  z-index: 9998;
  width: 100%;
  padding: 1em 0 !important;
  transform: translateY(-100%);
  transition: top 0.3s, transform 0.3s;
  overflow: hidden;
  border-top: 1px solid rgb(0 0 0 / 10%);
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.practice .compare.show {
  top: var(--layout-header-height);
  opacity: 1;
  transform: translateY(-1px);
}

.practice .compare .primary-title {
  line-height: 1 !important;
  margin-bottom: 0;
  font-size: var(--font-size-base);

}

.practice .compare .primary-title .count {
  font-weight: normal;
  margin-left: 0.1em;
  color: var(--lnk);
  font-size: 0.9em;
  vertical-align: middle;
}

.practice .compare .compare-titles {
  display: none;
  flex: 1;
  font-size: var(--font-size-extra-small);
  font-weight: normal;
  overflow: hidden;
}

.practice .compare .compare-titles ul {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.practice .compare .compare-title {
  margin-left: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.practice .compare .compare-list {
  margin-top: 0.5em;
  color: var(--graphite);
  font-size: var(--font-size-extra-small);
  line-height: 1.5;
}

.practice .compare .compare-item {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: auto;
  padding: 1.2em;
  background-color: var(--white);
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 0.4em;
}

.practice .compare .compare-item.dark {
  background-color: var(--paper);
}

.practice .compare .compare-item .title {
  font-weight: bold;
  display: flex;
}

.practice .compare .compare-item .title span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.practice .compare .compare-item .title .index {
  overflow: visible;
  padding-left: 1em;
  color: var(--primary);
  font-weight: normal;
  font-size: var(--font-size-medium);
}

.practice .compare .compare-item .texts,
.practice .compare .compare-item .empty {
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid rgb(0 0 0 / 10%);
}

.practice .compare .compare-item .texts .text+.text {
  margin-top: 0.5em;
}

.practice .compare .compare-item .texts .text .bold {
  font-weight: bold;
}

.practice .compare .compare-item .empty {
  position: relative;
  flex: 1;
  min-height: 10em;
  color: var(--lnk);
}

.practice .compare .compare-item .empty span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.practice .viscosity {
  position: relative;
  min-width: 100% !important;
}

.practice .sector .primary-title .text .small {
  vertical-align: middle;
  font-weight: normal;
  font-size: var(--font-size-extra-small);

}

.practice .sector .primary-title.flex {
  line-height: 1.5;
  display: flex;
  align-items: center;
}

.practice .sector .primary-title .expand {
  display: flex;
  flex: 1;
  justify-content: right;
  align-items: center;
  color: var(--lnk);
  transition: font-size 0.3s;
  font-weight: normal;
  font-size: 14px;
  gap: 5px;
}

.practice .sector .primary-title .expand span {
  margin: 0;
}

.practice .sector .primary-title .expand .tag {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  margin-left: 0.2em;
  color: var(--white);
  background-color: var(--primary);
  border-radius: 50%;
  text-align: center;
  line-height: 1.4em;
}

.practice .sector .primary-title .expand .arrow {
  display: inline-block;
  height: 0.3em;
  filter: brightness(0.1);
  transition: transform 0.3s;
}

.practice .sector .primary-title .expand.active .arrow {
  transform: rotate(-180deg);
}

.practice .sector .primary-title .btns {
  margin-left: auto;
}

.practice .sector .primary-title .btns .btn {
  display: inline-flex;
  align-items: center;
  margin-left: 0.8em;
  padding: 0.8em 1em 0.75em 1.2em;
  border: 1px solid;
  border-radius: 1.5em;
  cursor: pointer;
  vertical-align: middle;
  font-size: var(--font-size-min);
  line-height: 1;
}

.practice .sector .primary-title .btns .btn.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.practice .sector .primary-title .btns .btn .icon {
  width: 1em;
  transition: transform 0.3s;
}

.practice .sector .primary-title .btns .btn.clear {
  color: var(--graphite);
  background-color: #e9e9e9;
  border-color: #b6bdc3;
}

.practice .sector .primary-title .btns .btn.hide {
  color: var(--white);
  background-color: var(--graphite);
  border-color: var(--graphite);
}

.practice .sector .primary-title .btns .btn.hide .s,
.practice .sector .primary-title .btns .btn.hide.active .z {
  display: none;
}

.practice .sector .primary-title .btns .btn.hide.active .s {
  display: inline;
}

.practice .sector .primary-title .btns .btn.hide.active .icon {
  transform: rotate(-180deg);
}


.practice .select-cont {
  padding-bottom: 2.5vw;
}

.practice .select-cont .primary-title.flex {
  margin-bottom: 0;
}

.practice .select-cont.sticky-top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  background-color: var(--paper);
  box-shadow: 0 0 7px rgb(0 0 0 / 10%);
}

.practice .select-cont.sticky-top.active {
  height: 100%;
}

.practice .select-cont.sticky-top .primary-title {
  min-height: 35px;
  margin: 0;
  padding: 10px;
  background-color: var(--white);
  transition: font-size 0.3s;
  font-size: 17px;
}

.practice .select-cont.sticky-top .primary-title .expand {
  font-size: 13px;
}

.practice .select-cont.sticky-top .select-type-box {
  padding: 0 10px;
  overflow: auto;
}

.practice .select-cont.sticky-top .select-type {
  margin-top: 0.5em;
  overflow: auto;
  padding-bottom: 20px;
}

@media screen and (min-width: 1001px) {
  .practice .select-cont .primary-title {
    display: none !important;
  }

  .practice .select-cont .select-type-box {
    display: block !important;
  }
}

.practice .select-type {
  display: grid;
  width: 100%;
  min-height: 290px;
  margin-top: -7vw;
  aspect-ratio: 1500 / 353;
  grid-template-columns: 34.60% 36.53% 24.87%;
  overflow: hidden;
  gap: 1.5vw;
}

.practice .select-type>li {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.practice .type-card {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: 100%;
  color: var(--graphite);
  border-radius: 0.4em;
  font-size: var(--font-size-extra-base);
  border-top: 0.22em solid var(--primary);
}

.practice .type-card .cont {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 1.2em 0.7em 1.2em 1.3em;
  color: var(--graphite);
  background-color: var(--white);
  border-radius: 0.4em;
  font-size: var(--font-size-extra-base);
  line-height: 1;
}

.practice .type-card .cont .card-title {
  display: flex;
  align-items: center;
  padding-right: 0.8em;
  white-space: nowrap;
  line-height: 1.6;
  font-weight: bold;
  font-size: var(--font-size-base);
}

.practice .type-card .cont .card-title .count {
  font-weight: normal;
  margin-left: 0.5em;
  color: var(--lnk);
  font-size: 0.9em;
  vertical-align: middle;
}

.practice .type-card .cont .card-title label {
  position: relative;
  margin-left: auto;
}

.practice .type-card .cont .card-title label button {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 2.5em;
  margin-left: 10px;
  padding: 0 1em;
  color: var(--graphite);
  background-color: #e9e9e9;
  border: 1px solid #c0c0c0;
  border-radius: 1.3em;
  font-size: var(--font-size-min);
}

.practice .type-card .cont .card-title label input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.practice .type-card .cont .card-title label .checkbox {
  pointer-events: none;
  height: 0.8em;
  filter: brightness(0);
  opacity: 0.5;
  margin-left: 0.5em;
}

.practice .type-card .cont .card-title label input:checked+button {
  color: var(--primary);
  background-color: rgb(var(--primary-rgb) / 10%);
  border: 1px solid var(--primary);
}

.practice .type-card .cont .card-title label input:checked+button .checkbox {
  filter: brightness(1);
  opacity: 1;
}

.practice .type-card .cont .card-title.flex {
  display: flex;
  align-items: center;
  line-height: 1.7;
}

.practice .type-card .cont .card-title.active .arrow {
  transform: rotate(-90deg);
}

.practice .type-card .cont .card-text {
  margin-top: auto;
  padding: 0.5em 0.8em 0.5em 0;
}

.practice .type-card .cont .card-text .text {
  line-height: 1.5;
  font-size: var(--font-size-extra-small);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.practice .type-card .cont .agency {
  flex: 1;
  padding-right: 0.5em;
  overflow: auto;
  padding-bottom: 5px;
}

.practice .type-card .cont .agency .tag {
  margin-top: 1em;
}

.practice .type-card .cont .agency li:nth-child(1) .tag {
  margin-top: 0;
}

.practice .type-card .cont .lists {
  flex: 1;
  overflow: hidden;
}

.practice .type-card .cont .lists .list {
  float: left;
  box-sizing: border-box;
  width: 50%;
  height: 100%;
}

.practice .type-card .cont .list {
  display: grid;
  flex: 1;
  align-content: flex-start;
  padding: 0 0.5em 0 0;
  font-size: var(--font-size-base);
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2em;
  overflow: auto;
}

.practice .type-card .cont .list+.list {
  padding-left: 0.8em;
}

.practice .type-card .cont .list.types {
  align-content: flex-start;
  margin-top: 0.5em;
  gap: 0.5em 2em;
  grid-template-columns: repeat(2, 1fr) !important;
}

.practice .type-card .cont .list.column {
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(2, 1fr);
}

.practice .type-card .cont .list.gtc-1 {
  grid-template-columns: 1fr;
}

.practice .type-card .cont .list.width-50 {
  width: 50%;
}

.practice .type-card .cont .agency::-webkit-scrollbar,
.practice .type-card .cont .list::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  background: #f2f2f2;
}

.practice .type-card .cont .agency::-webkit-scrollbar-thumb,
.practice .type-card .cont .list::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 3px;
}

.practice .type-card .cont .list .item {
  width: 100%;
}

.practice .type-card .checkbox-type {
  width: 100%;
}

.practice .type-card .checkbox-type .box {
  cursor: pointer;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  font-size: var(--font-size-extra-small);
  display: flex;
  align-items: center;
  width: 100%;
  line-height: 1.4;
  padding: 0.5em 0;
  transition: border-color 0.3s;
}

.practice .type-card .checkbox-type .box .left {
  display: flex;
  flex: 1;
  align-items: center;
}

.practice .type-card .agency .checkbox-type .box {
  padding: 0.8em 0 0.7em;
}

.practice .type-card .checkbox-type .box:hover {
  border-color: rgb(0 0 0 / 50%);
}

.practice .type-card .checkbox-type input:disabled~.box {
  opacity: 0.6;
  border-color: rgb(0 0 0 / 10%);
  cursor: not-allowed;
}

.practice .type-card .checkbox-type input:checked~.box {
  border-color: var(--primary);
}

.practice .type-card .checkbox-type .box .text {
  display: none;
}

.practice .type-card .checkbox-type input {
  display: none;
}

.practice .one .type-card .checkbox-type .box .title {
  font-weight: bold;
}

.practice .type-card .checkbox-type .icon {
  height: 2.5em;
  margin-right: 0.4em;
  object-fit: cover;
}

.practice .type-card .checkbox-type .icon.filter {
  height: 1.8em;
  transition: filter 0.3s;
  filter: brightness(0.01);
}

.practice .type-card .checkbox-type input:checked~.box .icon.filter {
  filter: brightness(1);
}

.practice .type-card .checkbox-type .en {
  font-weight: normal;
  color: var(--lnk);
  line-height: 1;
  font-size: 0.8em;
}

.practice .one .type-card .checkbox-type .box .prompt__icon {
  display: none;
}

.practice .type-card .checkbox-type .product-logo {
  margin-top: 0.4em;
}

.practice .type-card .checkbox-type .checkbox {
  height: 0.7em;
  margin-left: auto;
  padding-left: 0.5em;
  transition: opacity 0.3s, filter 0.3s;
  filter: brightness(0);
  opacity: 0.5;
}

.practice .type-card .checkbox-type input:checked~.box .checkbox {
  filter: brightness(1);
  opacity: 1;
}


.practice .sector .list-switching {
  min-width: 85px;
  margin-left: auto;
}

.practice .sector .list-switching li {
  float: left;
  width: 1.2em;
  min-width: 35px;
  height: 1.2em;
  min-height: 35px;
  margin-left: 0.3em;
  border-radius: 0.1em;
  transition: background-color 0.3s;
  cursor: pointer;
}

.practice .sector .list-switching li:hover {
  background-color: rgb(204 201 197 / 30%);
}

.practice .sector .list-switching li.now {
  background-color: rgb(204 201 197);
}

.practice .sector .list-switching li .icon {
  display: block;
  width: 100%;
  height: 100%;
}

.practice .case-list {
  display: none;
  font-size: var(--font-size-extra-base);
}

.practice .case-list .case-list-item {
  width: 100%;
  min-width: 0;
}

.practice .case-item {
  position: relative;
  background-color: var(--case-item-background-color);

  --case-item-background-color: transparent;
}

.practice .case-item.dark {
  color: var(--white);

  --case-item-background-color: #403c3b;
}

.practice .case-item .title {
  transition: color 0.5s;
}

.practice .case-item .product .product-logo {
  font-size: var(--font-size-min);
}

.practice .case-item .checkbox {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.5em;
  height: 1.3em;
  background-color: var(--primary);
  border-radius: 0 0.2em 0 0.3em;
  transition: opacity 0.3s, background-color 0.3s;
  opacity: 0;
}

.practice .case-item:hover .checkbox.disabled {
  opacity: 0.6 !important;
  cursor: not-allowed;
}

.practice .case-item:hover .checkbox {
  opacity: 1;
}

.practice .case-item .checkbox.active {
  opacity: 1;
  background-color: #828282;
}

.practice .case-item .checkbox::after {
  content: '';
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/icon-checked.png');
  background-size: 1.5em;
}

.practice .case-item .checkbox.active::after {
  background-image: url('/images/icon-close.png');
}

.practice .case-item .checkbox i {
  position: absolute;
  width: 0.4em;
  height: 0.4em;
  background-color: var(--primary);
  transition: background-color 0.3s;
}

.practice .case-item .checkbox.active i {
  background-color: #828282;
}

.practice .case-item .checkbox i.t {
  top: 0;
  right: 100%;
}

.practice .case-item .checkbox i.b {
  top: 100%;
  right: 0;
}

.practice .case-item .checkbox i::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--case-item-background-color);
  border-radius: 0 0.5em 0 0;
  content: '';
}


.practice .cards .thead {
  display: none !important;
}

.practice .case-list.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.77vw;
}

.practice .cards .case-item {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 16em;
  padding: 1.6em 1.6em 1.1em;
  color: var(--graphite);
  border-radius: 0.4em;
  transition: transform 0.3s, box-shadow 0.3s;
  gap: 0.5em;
  font-size: var(--font-size-extra-base);
  line-height: 1;

  --case-item-background-color: var(--white);
}

.practice .cards .case-item:hover {
  z-index: 2;
  box-shadow: 0 4px 4px rgb(51 51 51 / 2%), 0 10px 40px rgb(51 51 51 / 10%);
  transform: translateY(-0.5em);
}

.practice .cards .case-item .product {
  position: relative;
  height: 1.3em;
}

.practice .cards .case-item .product .tooltip-box {
  position: absolute;
  top: -1px;
  right: -1em;
  width: auto;
  height: 101%;
  padding: 0 1em 0 30%;
  background: linear-gradient(270deg, 
  var(--case-item-background-color), 
  var(--case-item-background-color), 
  rgb(255 255 255 / 0%));
}

.practice .cards .case-item .product .tooltip-box .more {
  display: inline-block;
  height: 0.9em;
  margin: 0.2em 0;
  padding: 0 0.3em;
  background-color: #d1d1d1;
  border-radius: 1em;
  cursor: pointer;
  line-height: 0.4;
}

.practice .cards .case-item .product .tooltip {
  top: 0.9em;
  right: 2.8em;
  display: none;
  width: auto;
  max-width: none;
  padding-bottom: 1em;
}

.practice .cards .case-item .product .tooltip-box .more:hover+.tooltip,
.practice .cards .case-item .product .tooltip-box .tooltip:hover {
  display: block;
}

.practice .cards .case-item .product .tooltip-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em 0;
}

.practice .cards .case-item .products {
  height: 1.3em;
  white-space: nowrap;
  overflow: hidden;
}

.practice .cards .case-item .products::-webkit-scrollbar {
  display: none;
}

.practice .cards .case-item .product li {
  display: inline-block;
  padding-right: 0.4em;
}


.practice .cards .case-item .title {
  line-height: 1.3em;
  font-weight: bold;
}

.practice .cards .case-item>.text {
  line-height: 1.5em;
  font-size: var(--font-size-min);
  flex: 1;
}

.practice .cards .case-item .kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  overflow: hidden;
  font-size: var(--font-size-min);
  padding-bottom: 1em;
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.practice .cards .case-item .kpis li .kpi {
  display: block;
  float: left;
  padding: 0 0.75em;
  color: var(--graphite);
  background-color: #f3f3f3;
  border-radius: 0.3em;
  line-height: 2.4;
}

.practice .cards .case-item .type {
  font-size: var(--font-size-extra-small);
  height: 2em;
}

.practice .cards .case-item .type .arrow {
  position: relative;
  float: right;
  width: 2em;
  height: 2em;
  background-color: #e0e0e0;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.practice .cards .case-item:hover .type .arrow {
  background-color: var(--blue) !important;
}

.practice .cards .case-item .type .arrow .icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 99.9%;
  height: 99.9%;
  transform: translate(-50%, -50%);
  transition: filter 0.3s;
  object-fit: cover;
  filter: brightness(0.1);
}

.practice .cards .case-item:hover .type .arrow .icon {
  filter: brightness(1) !important;
}

.practice .cards .case-item .type .list {
  float: left;
  padding: 0.4em 0;
}

.practice .cards .case-item .type .list li {
  float: left;
}

.practice .cards .case-item .type .list li+li {
  margin-left: 0.5em;
}

.practice .cards .case-item .type .list .icon {
  display: inline-block;
  vertical-align: top;
  height: 1.2em;
  filter: brightness(0.01);
}

.practice .cards .case-item .type .list .text {
  display: inline-block;
  vertical-align: top;
  line-height: 1;
  padding: 0.2em 0 0 0.2em;
}

.practice .cards .case-item.dark {
  color: var(--white);
  background-color: #403c3b;
}

.practice .cards .case-item.dark .checkbox i::after {
  background-color: #403c3b;
}

.practice .cards .case-item.dark .type .list .icon {
  filter: brightness(10);
}

.practice .cards .case-item.dark .kpis {
  border-color: rgb(255 255 255 / 20%);
}

.practice .cards .case-item.dark .kpis li .kpi {
  color: var(--white);
  background-color: rgb(255 255 255 / 5%);
}

.practice .cards .case-item.dark .product .tooltip-box .more {
  background-color: #4b4847;
}

.practice .cards .case-item.dark .product .tooltip-box {
  background: linear-gradient(270deg, #403c3b, #403c3b, rgb(65 65 65 / 0%));
}

.practice .cards .case-item.dark .product .tooltip .tooltip__content {
  color: var(--graphite);
}

.practice .cards .case-item.dark .type .arrow {
  background-color: #fff;
}

.practice .cards .case-item.dark .type .arrow .icon {
  filter: brightness(0.3);
}


.practice .case-list.table {
  display: block;
}

.practice .case-list.table .case-list-item {
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}

.practice .table .case-item {
  display: grid;
  align-items: center;
  padding: 1.5em 1.4em;
  border-radius: 0.2em;
  transition: background-color 0.3s, color 0.3s;
  grid-template-columns: 30% 11% 14% 17% 6%;
  gap: 5.5%;
  font-size: var(--font-size-extra-small);

  --case-item-background-color: #f7f4ef;
}

.practice .table .case-item.dark {
  color: var(--white);

  --case-item-background-color: #403c3b;
}

.practice .table .thead .case-item {
  color: var(--white) !important;
  background-color: var(--graphite) !important;
}

.practice .table .case-item:hover {
  color: var(--graphite);

  --case-item-background-color: #ebe9e4;
}

.practice .table .case-item:hover.dark {
  color: var(--white);

  --case-item-background-color: #322f2f;
}

.practice .table .case-item .product .tooltip-box {
  display: none !important;
}

.practice .table .case-item .products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.practice .table .case-item .product li {
  width: 100%;
}

.practice .table .case-item .title {
  order: 1;
}

.practice .table .case-item .kpis {
  order: 2;
}

.practice .table .case-item .product {
  order: 3;
}

.practice .table .case-item .text {
  order: 4;
}

.practice .table .case-item .type {
  text-align: center;
  order: 5;
}

.practice .table .case-item .type .list .icon,
.practice .table .case-item .type .arrow {
  display: none;
}


.practice .project .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vw;
}

.practice .project .mak-card {
  border-radius: 0.25em;
}

.practice .project .mak-card .cont {
  justify-content: space-around;
  padding: min(1.2em, 10%) min(1.2em, 8%);
}

.practice .project .mak-card .cont .en {
  font-size: 1em;
  font-family: bold-condensed;
  margin-top: 0;
  color: var(--primary) !important;
  font-weight: bold;
}

.practice .project .mak-card .cont .title {
  margin: 0.1em 0 0;
}

.practice .project .mak-card .cont .arrow {
  position: absolute;
  right: 1em;
  bottom: 1em;
  width: 1.5em;
  height: 1.5em;
  background-color: var(--white);
  border: 1px solid var(--blue);
  border-radius: 50%;
  transition: background-color 0.3s;
  overflow: hidden;
}

.practice .project .mak-card .cont .arrow::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112%;
  height: 112%;
  background-image: url('/images/arrow-right3.png');
  background-size: cover;
  transform: translate(-50%, -50%);
  transition: filter 0.3s;
  content: '';
}

.practice .project .mak-card:hover .cont .arrow {
  background-color: var(--blue);
}

.practice .project .mak-card:hover .cont .arrow::after {
  filter: brightness(10);
}

.practice .project .mak-card .cont .counts {
  width: 100%;
  color: var(--white);
  font-size: var(--font-size-min);
  overflow: hidden;
}

.practice .project .mak-card.deep .cont .counts {
  color: var(--graphite);
}

.practice .project .mak-card .cont .counts li {
  float: left;
}

.practice .project .mak-card .cont .counts li+li {
  margin-left: 9%;
}

.practice .project .mak-card .cont .counts .label {
  display: inline-block;
  vertical-align: middle;
}

.practice .project .mak-card .cont .counts .count {
  display: inline-block;
  margin: 0 0 0 0.3em;
  color: var(--primary);
  font-family: 'font_neut';
  font-size: 2.5em;
}

@media screen and (max-width: 1000px) {
  .practice .project .list {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .practice .project .mak-card>img {
    height: 36vw;
  }
}



.practice .practice-side {
  position: fixed;
  top: 32.5vw;
  right: 0;
  z-index: 99999;
  font-size: var(--font-size-extra-small);
  line-height: 1;
  color: var(--white);
  gap: 1em;
}

.practice .side-trial {
  display: block;
  padding: 0.7em;
  background-color: var(--blue);
  border-radius: 2.8em 0 0 2.8em;
  transition: transform 0.3s;
  cursor: pointer;
  line-height: 3.1em;
}

.practice .side-trial .icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 3.1em;
  height: 3.1em;
  background: radial-gradient(circle at center, transparent 0%, rgb(255 255 255 / 90%) 100%);
  border-radius: 50%;
  animation: box-shadow-pulse-white 1.5s ease-in-out infinite;
}

.practice .side-trial .icon::before,
.practice .side-trial .icon::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.1em;
  height: 3.1em;
  background-size: 3.1em 3.1em;
  transform: translate(-50%, -50%);
  content: '';
}

.practice .side-trial .icon::before {
  background-image: url('/images/icon-trial1.png');
  animation: icon-flicker 1.8s ease-in-out infinite;
}

.practice .side-trial .icon::after {
  background-image: url('/images/icon-trial2.png');
  animation: icon-flicker 1.3s ease-in-out infinite;
}

.practice .side-trial .text {
  display: inline-block;
  width: 4em;
  padding: 0 0.3em;
  white-space: nowrap;
  vertical-align: middle;
  font-size: var(--font-size-extra-base);
}

.practice .sticky-top .side-trial:not(:hover) {
  transform: translateX(calc(100% - 4.3em));
}

@media screen and (max-width: 1500px) {
  .practice .select-type {
    grid-template-columns: 32.10% 34.03% 28.87%;
  }
}

@media screen and (max-width: 1350px) {
  .practice .sector {
    padding: 24px 5vw;
  }


  .practice .sector .sector-wrap {
    padding: 0 5vw;
  }


  .practice .select-type {
    grid-template-columns: auto 35% 25%;
    gap: 10px;
    min-height: 266px;
  }

  .practice .type-card .cont .list {
    gap: 5px 10px;
    padding-right: 0.5em;
  }

  .practice .type-card .cont {
    padding: 1em 0.5em 1em 1em;
  }

  .practice .type-card .checkbox-type .box {
    padding: 0.4em 0;
  }

  .practice .type-card .checkbox-type .icon {
    height: 2.2em;
  }

  .practice .table .case-item {
    grid-template-columns: 28% 11% 21% 16% 6%;
    gap: 4.5%;
  }

  .practice .table .case-item .products {
    gap: 10px;
  }
}

@media screen and (max-width: 1000px) {
  .practice .sector.main {
    z-index: 10000;
  }

  .practice .compare {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid rgb(0 0 0 / 10%);
  }

  .practice .compare.show {
    top: 0;
  }

  .practice .sector .primary-title {
    height: 35px;
  }

  .practice .compare .primary-title {
    font-size: 17px !important;
  }

  .practice .compare .compare-titles {
    display: none !important;
  }

  .practice .compare .compare-list {
    margin: 1.2em 0;
  }

  .practice .primary-title.fu .text {
    line-height: 1.2;
    font-size: 16px;
    font-weight: normal;
  }

  .practice .one .type-card .cont .list.column {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .practice .one .type-card .checkbox-type .box {
    flex-wrap: wrap;
    padding: 10px 0;
  }

  .practice .one .type-card .checkbox-type .box .title {
    display: flex;
    flex: 1;
    align-items: center;
    margin-left: 5px;
    text-align: left;
    font-weight: bold;
    font-size: 13px;
    gap: 10px;
  }

  .practice .one .type-card .checkbox-type .box .prompt__icon {
    display: block;
    height: 12px;
    margin-left: auto;
    padding: 10px 0;
    filter: brightness(0);
    opacity: 0.6;
  }

  .practice .one .type-card .checkbox-type .box .prompt__icon.active {
    filter: brightness(1);
    opacity: 1;
  }

  .practice .one .type-card .checkbox-type .icon {
    height: 30px;
    margin: 0;
  }


  .practice .one .type-card .checkbox-type .box .text {
    width: 100%;
    margin-top: 5px;
    padding: 12px;
    background-color: var(--paper);
    line-height: 1.6;
    text-align: left;
  }

  .practice .select-cont {
    padding-bottom: 10px;
  }

  .practice .select-cont .select-type-box {
    padding-top: 10px;
  }

  .practice .select-cont.sticky-top .select-type-box {
    padding-bottom: 80px;
  }

  .practice .select-type {
    aspect-ratio: auto;
    margin-top: 0;
    grid-template-columns: 1fr;
  }

  .practice .type-card.flex {
    display: block !important;
  }

  .practice .case-item {
    transform: none !important;
  }

  .practice .case-item .checkbox {
    opacity: 1 !important;
  }

  .practice .case-item .checkbox.disabled {
    opacity: 0.6 !important;
  }


  .practice .case-list.cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  
  .practice .cards .case-item {
    min-height: 0;
  }

  .practice .cards .case-item>.text {
    flex: none;
    height: 3em;
  }

  
  .practice .table .case-item {
    padding: 10px;
    grid-template-columns: 38% auto 50px;
    gap: 10px;
  }

  .practice .table .case-item .kpis {
    display: none;
  }

  .practice .table .case-item .title {
    line-height: 1.2;
  }

  .practice .table .case-item .product li a .logo {
    height: 18px;
  }

  .practice .table .case-item>.text {
    display: none;
  }

  
  .practice .practice-side {
    top: 83vw;
  }
}

@media screen and (max-width: 650px) {
  .practice .sector {
    padding: 24px 10px;
  }

  .practice .sector .sector-wrap {
    padding: 0 10px;
  }

  .practice .sector .primary-title {
    font-size: 22px;
  }

  .practice .select-type {
    grid-template-columns: 1fr;
  }

  .practice .type-card .cont {
    padding: 12px 6px 12px 12px;
  }

  .practice .type-card .cont .agency {
    padding-right: 10px;
  }

  .practice .type-card .cont .list {
    gap: 0 15px;
  }

  .practice .case-list.cards {
    grid-template-columns: repeat(1, 1fr);
  }

  .practice .table .case-item {
    grid-template-columns: 38% auto 50px;
  }

  .practice .case-item .product .product-logo {
    font-size: 11px;
  }
}

@media screen and (max-width: 500px) {
  .practice .table .case-item {
    grid-template-columns: 50% auto 50px;
  }

  .practice .table .case-item .products {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 370px) {
  .practice .sector .primary-title {
    font-size: 20px;
  }
}

/* #endregion */