/* 头部 + 轮播图整体区域 */
.hero-banner {
  position: relative;
  width: 100%;
}

.hero-banner .header-container {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.hero-banner .header-container * {
  pointer-events: auto;
}

/* 头部 */
.header-container {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.header-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 140px;
  //background: url(https://www.jxufe.edu.cn/statics/jxcjdx/images/header.png) center top no-repeat;
  background-image: -webkit-linear-gradient(0, #75237d 0%, #9b3379 100%);
  background-size: 100% 99%;
  pointer-events: none;
}

.header-content {
  width: 1920px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.h-left-logo {
  width: 285px;
  height: 100%;
  padding-top: 48px;
}

.h-right-nav {
  width: 1235px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 24px;
}

.tool {
  width: 100%;
  height: 21px;
  display: flex;
  justify-content: right;
  gap: 22px;
}

.tool > a > div {
  width: 53px;
  height: 21px;
  border-radius: 11px;
  border: 1px solid #ffffff;
  opacity: 0.6;
  line-height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #ffff;
}

.h-nav {
  width: 100%;
  height: 26px;
  position: relative;
}

.h-nav ul {
  display: flex;
  justify-content: right;
  gap: 20px;
  height: 100%;
}

.h-nav > ul > li {
  position: relative;
  height: 100%;
}

.h-nav > ul > li > a {
  color: #fff;
  line-height: 26px;
  display: block;
  height: 100%;
  white-space: nowrap;
  font-size: 20px;
  position: relative;
  transition: opacity 0.3s ease;
}

.h-nav > ul > li > a:hover {
  color: #fff;
  opacity: 0.85;
}

/* 有下拉的导航项 */
.h-nav > ul > li:has(.dropdown) > a {
  padding-right: 18px;
}

.h-nav > ul > li:has(.dropdown) > a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #fff;
  transform: translateY(-35%);
  transition: transform 0.3s ease;
}

.h-nav > ul > li:has(.dropdown):hover > a::after {
  transform: translateY(-35%) rotate(180deg);
}

.h-nav > ul > li:has(.dropdown)::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.h-nav > ul > li:has(.dropdown):hover::after {
  transform: scaleX(1);
}

/* 下拉框 */
.dropdown {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  min-width: 210px;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(118, 35, 96, 0.18);
  border-top: 3px solid #762360;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  overflow: hidden;
}

.dropdown::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #762360;
}

.dropdown a {
  display: block;
  height: auto;
  padding: 13px 28px 13px 36px;
  color: #444;
  font-size: 15px;
  text-align: left;
  border-bottom: none;
  white-space: nowrap;
  position: relative;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    padding-left 0.25s ease;
}

.dropdown a::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #762360;
  transform: translateY(-50%) scale(0);
  transition: transform 0.25s ease;
}

.dropdown a:hover {
  background: linear-gradient(
    90deg,
    rgba(118, 35, 96, 0.1) 0%,
    rgba(118, 35, 96, 0) 100%
  );
  color: #762360;
  padding-left: 40px;
}

.dropdown a:hover::before {
  transform: translateY(-50%) scale(1);
}

.h-nav > ul > li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 搜索图标 */
.search-icon-link {
  cursor: pointer;
}

.search-icon-link img {
  width: 21px;
  height: 21px;
}

/* 全屏搜索模态框 */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.search-modal.active {
  display: flex;
}

.search-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
}

.search-modal-content {
  position: relative;
  z-index: 1;
  width: 600px;
  max-width: 90%;
}

.search-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  line-height: 1;
}

.search-box {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 50px;
  padding: 10px 20px;
  gap: 10px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 10px;
  background: transparent;
}

.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  flex-shrink: 0;
}

.search-btn img {
  width: 24px;
  height: 24px;
}

/* Swiper轮播图样式 */
.swiper {
  width: 100%;
  height: calc(100vh - 0px);
}

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

/* .swiper-slide2 {
  width: 771px !important;
}

.swiper-slide2 img,
.swiper-slide2 .jp-card {
  width: 771px !important;
  height: 453px !important;
} */

/* peopleSwiper 层级样式 - 由JS动态控制类名 */
.peopleSwiper .swiper-slide.people-level-0 {
  width: 771px !important;
  z-index: 3;
  margin-top: 0;
}

.peopleSwiper .swiper-slide.people-level-0 .jp-card {
  width: 100%;
}

.peopleSwiper .swiper-slide.people-level-1,
.peopleSwiper .swiper-slide.people-level-2 {
  width: 546px !important;
  z-index: 2;
}

.peopleSwiper .swiper-slide.people-level-1 .jp-card,
.peopleSwiper .swiper-slide.people-level-2 .jp-card {
  width: 100%;
}

.peopleSwiper .swiper-slide.people-level-1 {
  margin-top: 135px;
}

.peopleSwiper .swiper-slide.people-level-2 {
  margin-top: 33px;
  z-index: 1;
}

/* .swiper-slide3 {
  width: 546px !important;
  margin-top: 135px !important;
}

.swiper-slide3 img,
.swiper-slide3 .jp-card {
  width: 546px !important;
  height: 321px !important;
}

.swiper-slide4 {
  margin-top: 33px !important;
} */

/* 只为顶部轮播图的链接添加背景图 */
.mySwiper1 .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.mySwiper1 .swiper-slide a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左右切换按钮 */
.mySwiper1 .swiper-button-prev,
.mySwiper1 .swiper-button-next {
  width: 40px;
  height: 75px;
  z-index: 1001;
}

.mySwiper1 .swiper-button-prev {
  left: 20px;
  background-image: url("../images/u-left.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mySwiper1 .swiper-button-prev::after {
  display: none;
}

.mySwiper1 .swiper-button-next {
  right: 20px;
  background-image: url("../images/u-right.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mySwiper1 .swiper-button-next::after {
  display: none;
}

.mySwiper1 .swiper-button-prev:hover {
  background-image: url("../images/r-left.png");
}

.mySwiper1 .swiper-button-next:hover {
  background-image: url("../images/h-right.png");
}

/* 隐藏指示器 */
.swiper-pagination {
  display: none;
}

/* 头部 */

/* 主体 */

.news-content {
  width: 100%;
  background-size: cover;
  background-image: url("../images/news-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  /* background-color: rgba(99, 10, 98, 0.06); */
  /* background: linear-gradient( 180deg, #FFFFFF 0%, rgba(99,10,98,0.19) 100%); */
}

.news {
  width: 1520px;
  height: 1401px;
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.news-left {
  width: 1090px;
  height: 100%;
  padding-top: 100px;
}

.news-left-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.news-logo {
  width: 591px;
  height: 90px;
}

.news-left-more a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.news-left-more-line {
  width: 62px;
  height: 1px;
  border: 1px solid #762875;
}

.news-left-more-txt {
  width: 42px;
  height: 19px;

  font-size: 14px;
  color: #762875;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: uppercase;
}
.why-content .news-left-more-line {
  border: 1px solid #fff;
}
.why-content .news-left-more-txt {
  color: #fff;
}
.news-big-img {
  width: 1090px;
  height: 620px;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.news-big-img a img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.news-big-img:hover a img {
  transform: scale(1.15);
}

.news-big-img:hover .news-big-img-txt-right p {
  color: red;
}

.news-big-img-txt {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: row;
}

.news-big-img-txt-left {
  width: 175px;
  height: 117px;
  background: url(../images/news-big-img-txt-left-bg.png);
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 10px;
}

.news-big-img-txt-left p:first-child {
  width: 71px;
  height: 79px;

  font-size: 60px;
  color: #630a62;
  line-height: 79px;
  text-align: left;
  font-style: normal;
  margin-top: 14px;
}

.news-big-img-txt-left p:nth-child(2) {
  width: 38px;
  height: 29px;

  font-size: 22px;
  color: #630a62;
  line-height: 29px;
  text-align: left;
  font-style: normal;
  margin-top: 52px;
}

.news-big-img-txt-right {
  width: 915px;
  height: 73px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-big-img-txt-right > p {
  width: 798px;
  height: 33px;

  font-size: 22px;
  color: #ffffff;
  line-height: 33px;
  text-align: left;
  font-style: normal;
}

.news-small-img {
  margin-top: 40px;
}

.news-small-img > ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.news-small-img > ul > li > a {
  display: flex;
  gap: 21px;
  flex-direction: column;
}

.news-small-img > ul > li > a:hover p {
  color: red;
}

.news-small-img > ul > li > a > img {
  width: 350px;
  height: 224px;
  background-color: #919191;
}

/* ===========================================
   小图使用 d-img-sweep 和 d-img-scale 效果
   =========================================== */
.small-img-item {
  overflow: hidden;
  display: block;
  width: 350px;
  height: 224px;
  position: relative;
}

.small-img-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  background-color: #919191;
}

/* 悬停放大效果 */
.small-img-item.d-img-scale:hover img {
  transform: scale(1.15);
}

/* 亮光特效由 d-img-sweep 类提供，这里只确保伪元素不阻挡鼠标 */
.small-img-item.d-img-sweep::before,
.small-img-item.d-img-sweep::after {
  pointer-events: none;
}

.news-small-img > ul > li > a > p {
  width: 348px;
  height: 64px;

  font-size: 18px;
  color: #333333;
  line-height: 32px;
  text-align: left;
  font-style: normal;
}

.news-right {
  /* width: 390px; */
  height: 1401px;
  /* background: #630A62;
opacity: 0.06; */
  background: rgba(99, 10, 98, 0.06);
  padding-top: 100px;
  margin-right: -200px;
  width: 590px;
}

.news-right-title {
  width: 202px;
  height: 90px;
}
/* .news-right-title img{
  width: 100%;
  height: 100%;
} */

.news-right-list {
  margin-top: 21px;
}

.news-right-list > ul > li {
  width: 100%;
  height: 142px;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  position: relative;
  padding: 0 40px;
  box-sizing: border-box;
}

/* ===========================================
li 底部分割线 - 只和文字同宽
=========================================== */
.news-right-list > ul > li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 40px;
  width: 349px;
  height: 1px;
  border: 1px dashed #630a62;
  opacity: 0.4;
  box-sizing: border-box;
}

/* 最后一个 li 不需要分割线 */
.news-right-list > ul > li:last-child::after {
  display: none;
}

/* ===========================================
li 悬浮时底部的线条组合效果（金色先出现，白色后出现）
=========================================== */
.news-right-list > ul > li .hover-line {
  position: absolute;
  bottom: 10px;
  left: 0;
  height: 5px;
  display: flex;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  overflow: hidden;
  width: 100%;
}

.news-right-list > ul > li:hover .hover-line {
  opacity: 1;
}

/* 金色线条 - 先出现 */
.news-right-list > ul > li .hover-line .line-left {
  width: 137px;
  height: 5px;
  background: #b79864;
  flex-shrink: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s;
}

.news-right-list > ul > li:hover .hover-line .line-left {
  clip-path: inset(0 0% 0 0);
}

/* 白色线条 - 等金色出现后再出现 */
.news-right-list > ul > li .hover-line .line-right {
  width: 453px;
  height: 5px;
  background: #ffffff;
  flex-shrink: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}

.news-right-list > ul > li:hover .hover-line .line-right {
  clip-path: inset(0 0% 0 0);
}

/* 文字样式 */
.news-right-list > ul > li > a {
  width: 349px;
  height: 62px;

  font-size: 18px;
  color: #333333;
  line-height: 31px;
  text-align: left;
  font-style: normal;
  /* 文字超出隐藏 + 省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  position: relative;
  z-index: 1;
}

/* 悬浮时文字颜色不变，保持原来的逻辑 */
.news-right-list > ul > li:hover {
  width: 100%;
  background-color: #762875;
}

.news-right-list > ul > li:hover > a {
  color: #ffffff;
}

/* why jufe */
.why-jufe {
  width: 100%;
  height: 1020px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/why-juef-bg.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.why-jufe-con {
  width: 1520px;
  height: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.why-logo-wrapper {
  position: relative;
  width: 500px;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spin-ring {
  position: absolute;
  pointer-events: none;
}

.ring-530 {
  width: 530px;
  height: 530px;
  background: url("../images/530.png") center/contain no-repeat;
  animation: spin-clockwise 10s linear infinite;
}

.ring-816 {
  width: 816px;
  height: 816px;
  background: url("../images/816.png") center/contain no-repeat;
  animation: spin-counter 15s linear infinite;
}

@keyframes spin-clockwise {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-counter {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.why-logo {
  width: 500px;
  height: 500px;
  position: relative;
  z-index: 1;
}

.why-logo img {
  width: 100%;
  height: 100%;
}

.why-content {
  width: 900px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.why-con-top {
  display: flex;
  width: 800px;
  height: 90px;
  justify-content: space-between;
  align-items: center;
}

.why-con-list {
  width: 900px;
  /* height: 550px; */
  height: 800px;
  overflow: visible;
  position: relative;
}

.why-con-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 865px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.why-con-list li {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.why-con-list li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 32px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 680px;
  display: block;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
}

.why-con-list li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 131px;
  height: 3px;
  background: linear-gradient(33deg, #d3a75a 0%, #e4cca0 53.83%, #d8a45c 100%);
  border-radius: 2px;
  z-index: 3;
}

.why-con-list li .white-line {
  position: absolute;
  bottom: 0;
  width: 845px;
  height: 1px;
  background: #ffffff;
  opacity: 0.4;
  z-index: 1;
}

.why-con-list li img {
  position: absolute;
  width: 88px;
  height: 88px;
  right: 60px;
  top: 20px;
  z-index: 1;
  display: none;
}

.why-con-list li:hover img,
.why-con-list li.highlight img {
  display: block;
  z-index: 1;
}

.why-con-list li:hover::before,
.why-con-list li.highlight::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -60px;
  right: 20px;
  bottom: 10px;
  background-image: url("../images/lbtbj.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}

.why-con-list li:hover a,
.why-con-list li.highlight a {
  color: #630a62;
  font-weight: 600;
}

/* ===========================================
   JUFE People — 1920px 设计稿
   =========================================== */
.jufe-people {
  width: 100%;
  background-color: #f0f0f0;
  /* background-image: url("../images/peopre-xh.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1920px auto; */
  display: flex;
  justify-content: center;
  position: relative;
  /* height: 839px; */
}

.jufe-people-con {
  width: 1920px;
  display: flex;
  justify-content: center;
}

.jufe-people-inner {
  /* width: 1520px; */
  width: 1920px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* 主区域：左标题 415px + 右轮播 1105px = 1520px */
.jp-main {
  width: 100%;
  /* height: 1024px; */
  height: 839px;
  display: flex;
  gap: 0;
  position: relative;
  /* padding-left: 200px; */
  background-image: url("../images/peopre-xh.png");
  background-size: 100% 100%;
  padding-top: 70px;
}

.jp-left {
  width: 415px;
  flex-shrink: 0;
  position: relative;
  height: 1024px;
}

.jp-building {
  position: absolute;
  left: 0;
  top: -198px;
  width: 815px;
  height: 1033px;
}

.jp-building img {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
}

.jp-title-logo {
  position: absolute;
  top: -45px;
  left: 204px;
  width: 408px;
  height: 90px;
  z-index: 2;
}

.jp-title-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.jp-right {
  /* width: 1105px; */
  /* width: 1920px; */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.jp-more {
  display: flex;
  align-items: center;
  padding-right: 303px;
  position: absolute;
  top: 33px;
  left: 1446px;
  z-index: 999;
}

.jp-more a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jp-more img {
  width: 48px;
  height: 48px;
}

.jp-more-line {
  width: 62px;
  height: 1px;
  background: rgba(118, 40, 117, 1);
}

.jp-more-txt {
  font-family: MicrosoftYaHei;
  font-size: 14px;
  color: #762875;
  line-height: 19px;
  text-transform: uppercase;
}

/* 轮播 */
.jp-carousel {
  /* width: 1105px; */
  /* width: 1920px; */
  /* height: 970px; */
  /* width: 100%; */
  height: 700px;
  position: relative;
  overflow: hidden;
  padding-left: 200px;
  max-width: 1920px;
}

.peopleSwiper {
  width: 100%;
  height: 100%;
  overflow: visible;
  cursor: grab;
}

.peopleSwiper.swiper-grabbing {
  cursor: grabbing;
}

.peopleSwiper .swiper-wrapper {
  align-items: flex-start;
  justify-content: flex-start;
}

.peopleSwiper .swiper-slide {
  width: 546px;
  height: auto;
  transition:
    width 0.6s ease,
    margin-top 0.6s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.peopleSwiper .swiper-slide.people-no-transition {
  transition: none;
}

.peopleSwiper .swiper-slide-active {
  z-index: 3;
}

.jp-card {
  width: 100%;
}

.jp-card a {
  display: block;
  color: inherit;
}

.jp-card a:hover {
  color: inherit;
}

.jp-card-img {
  width: 100%;
  /* height: 530px; */
  overflow: hidden;
    position: relative;
  --jp-play-size: 80px;
}

/* .peopleSwiper .swiper-slide:not(.swiper-slide-active) .jp-card-img {
  height: 380px;
} */

.jp-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.jp-card:hover .jp-card-img img {
  transform: scale(1.05);
}

.jp-card-img::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--jp-play-size);
  height: var(--jp-play-size);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  z-index: 2;
  transition: background 0.3s;
}

/* 白色播放三角（border 画法，与 .box-video .play-btn::after 一致）
   -0.1 × size 是水平光学补偿：0 宽盒子靠 left:50% 定位后，
   三角整体偏右，左移 10% 才视觉居中（等价于原版 flex 居中 + margin-left:4px） */
.jp-card-img::after {
  content: "";
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translateX(calc(var(--jp-play-size) * -0.1));
  width: 0;
  height: 0;
  border-left: calc(var(--jp-play-size) * 0.3) solid #fff;
  border-top: calc(var(--jp-play-size) * 0.175) solid transparent;
  border-bottom: calc(var(--jp-play-size) * 0.175) solid transparent;
  z-index: 3;
}

/* 【可选】悬停加深，提示可点。不想要删掉这一段即可 */
.jp-card:hover .jp-card-img::before {
  background: rgba(0, 0, 0, 0.78);
}

/* 【改】非居中卡片（546px 宽）小一号，80px 在那张卡上偏大 */
.peopleSwiper .swiper-slide:not(.people-level-0) .jp-card-img {
  --jp-play-size: 60px;
}

/* 【改】小屏再缩一号：≤768px 时卡片窄到 240~350px，80px 会占掉三分之一 */
@media (max-width: 768px) {
  .jp-card-img,
  .peopleSwiper .swiper-slide:not(.people-level-0) .jp-card-img {
    --jp-play-size: 56px;
  }
}

.jp-card-txt {
  width: 100%;
  min-height: 196px;
  margin-top: -40px;
  padding: 32px 36px 28px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}

.jp-card-imgBox {
  position: absolute;
  left: 0;
  right: 0;
  background-image: url("../images/shadow2.png");
  background-size: 100% 100%;
  /* bottom: -137px;
  height: 275px !important; */
  bottom: -42px;
  height: 83px !important;
  padding: 0 27px 0 45px;
}
.peopleSwiper .people-level-0 .jp-card-imgBox {
  background-image: url("../images/shadow.png");
  padding: 0 66px;
}

.peopleSwiper .swiper-slide:not(.people-level-0) .jp-card-txt {
  min-height: 110px;
  margin-top: -28px;
  padding: 22px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.jp-card-txt h3 {
  font-family: "Times New Roman", Times, serif;
  font-size: 26px;
  font-weight: bold;
  color: #630a62;
  line-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.peopleSwiper .swiper-slide:not(.people-level-0) .jp-card-txt h3 {
  font-size: 18px;
  line-height: 26px;
  -webkit-line-clamp: 3;
}

.jp-card-line {
  display: block;
  width: 780px;
  max-width: 100%;
  height: 1px;
  margin: 16px 0 14px;
  background: linear-gradient(90deg, #630a62 0%, rgba(99, 10, 98, 0.12) 100%);
}

.peopleSwiper .swiper-slide:not(.people-level-0) .jp-card-line,
.peopleSwiper .swiper-slide:not(.people-level-0) .jp-card-desc {
  display: none;
}

.jp-card-desc {
  font-size: 16px;
  color: #999999;
  line-height: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 导航按钮叠在卡片图片垂直居中 */
.jp-carousel .jp-nav {
  position: absolute;
  top: 265px;
  width: 56px;
  height: 56px;
  cursor: pointer;
  z-index: 10;
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
}

.jp-carousel .jp-nav:hover {
  opacity: 0.8;
}

.jp-carousel .jp-nav img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.jp-carousel .jp-nav-prev,
.jp-carousel .jp-nav-next {
  width: 88px;
  height: 88px;
}
.jp-carousel .jp-nav-prev {
  left: 156px !important;
  z-index: 3;
}

.jp-carousel .jp-nav-next {
  /* left: 1680px !important; */
  right: 156px !important;
  left: auto !important;
}

/* Now Join Us */
.jp-join {
  width: 100%;
  padding: 56px 0 107px;
  position: relative;
}

.jp-join-title {
  text-align: center;
  margin-bottom: 104px;
  z-index: 4;
}

.jp-join-title img {
  height: 90px;
  width: auto;
  /* width: 374px; */
  z-index: 4;
  position: relative;
}

.jp-join-list {
  list-style: none;
  z-index: 4;
  padding: 0;
  margin: 0;
  display: flex;
  /* justify-content: center; */
  padding-left: 200px;
  gap: 141px;
  position: relative;
}

.jp-join-list li a {
  display: flex;
  align-items: center;
  gap: 49px;
  color: #630a62;
}

.jp-join-name {
  font-family: MicrosoftYaHei, MicrosoftYaHei;
  font-weight: bold;
  font-size: 32px;
  color: #762875;
  line-height: 33px;
  white-space: nowrap;
}

.jp-join-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.jp-join-btn img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.jp-join-btn .jp-join-img-hover {
  position: absolute;
  opacity: 0;
}

.jp-join-list li a:hover .jp-join-btn .jp-join-img-default {
  opacity: 0;
}

.jp-join-list li a:hover .jp-join-btn .jp-join-img-hover {
  opacity: 1;
}

.jp-join-btn-light {
  opacity: 0.85;
}

.jp-join-btn-dark img {
  filter: brightness(1.1);
}

.jp-join-list li a:hover .jp-join-btn {
  transform: scale(1.06);
}

.jp-join-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  /* width: 1920px; */
  /* height: 280px; */
  height: 657px;
  pointer-events: none;
  z-index: 2;
}

.jp-join-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* ===========================================
   Box3 样式 -
   =========================================== */

.box3 {
  width: 100%;
  height: 1164px;
  background-image:
    url("../images/zbj.png"),
    /* 上层：z 索引高的在前 */ url("../images/dbj.png");
  /* 下层：z 索引低的在后 */
  background-size:
    auto,
    /* zbj.png 保持原始大小 */ cover;
  /* dbj.png 铺满 */
  background-position:
    -25px 141px,
    /* zbj.png 居中 */ center;
  /* dbj.png 居中 */
  background-repeat:
    no-repeat,
    /* zbj.png 不平铺 */ no-repeat;
  /* dbj.png 不平铺 */
  display: flex;
  justify-content: center;
}

/* box3 内容层 - 固定1920宽度居中 */
.box3-con {
  width: 1920px;
  display: flex;
  justify-content: center;
}

/* box3 内层 - 1520宽度，从底部排列，底部内边距110px */
.box3-inner {
  width: 1520px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  padding-bottom: 110px;
}

/* box3 轮播图区域 */
.box3 .swiper.box3Swiper {
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  cursor: grab;
}

.box3 .swiper.box3Swiper.swiper-grabbing {
  cursor: grabbing;
}

.box3 .swiper.box3Swiper .swiper-wrapper {
  align-items: center;
}

/* box3 swiper slide */
.box3 .swiper.box3Swiper .swiper-slide {
  display: flex;
  justify-content: center;
  overflow: visible;
  transition: opacity 0.3s ease;
}

/* ====== box3 层级缩放效果 ====== */

/* 中间：原始大小 */
.box3-level-0 .box3-slide-item {
  transform: scale(1);
  opacity: 1;
}

/* 左右第1层 */
.box3-level-1 .box3-slide-item {
  /* transform: scale(0.85); */
  /* transform: scale(1.15); */
  opacity: 0.9;
  margin-bottom: 56px;
}

/* 左右第2层 */
.box3-level-2 .box3-slide-item {
  /* transform: scale(0.7); */
  /* transform: scale(1.3); */
  opacity: 0.7;
  margin-bottom: 145px;
}

/* 最外侧不可见的 slide 隐藏 */
.box3
  .swiper.box3Swiper
  .swiper-slide:not(.box3-level-0):not(.box3-level-1):not(.box3-level-2) {
  opacity: 0;
  pointer-events: none;
}

.box3-slide-item {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
}

.box3-slide-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.box3-border-circle {
  width: 194px;
  height: 194px;
  background: linear-gradient(180deg, #ffffff 0%, #fef1ff 100%);
  border: 1px solid #762875;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box3-dotted-border {
  width: 159px;
  height: 159px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f1ff 100%);
  border: 1px dashed #762875;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.box3-dotted-border img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ===========================================
   【改】box3 图标 SVG 路径描边动效（参考南京大学 svg-1 的做法）
   静止  ：灰色填充 + 无描边
   移入  ：填充淡出 → 紫色描边沿路径画出 → 填充淡回，播完自动复原
   =========================================== */
.box3-dotted-border .box3-icon-svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
}

.box3-dotted-border .box3-icon-path {
  fill: #762875;
  stroke: #762875;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0;
}

/* 动画由 JS 加 .is-drawing 触发，animationend 后自动移除该 class */
.box3-slide-item.is-drawing .box3-icon-path {
  animation: box3IconDraw 1.5s ease-in-out;
}

/* 0% 不写 stroke-dashoffset：起始值直接取 JS 写在行内的路径长度 */
@keyframes box3IconDraw {
  0% {
    fill-opacity: 0.12;
    stroke-opacity: 1;
  }

  62% {
    stroke-dashoffset: 0;
    fill-opacity: 0.12;
    stroke-opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
    stroke-opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .box3-slide-item.is-drawing .box3-icon-path {
    animation: none;
  }
}

.box3-num {
  width: 140px;
  height: 84px;
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 72px;
  color: #762875;
  line-height: 84px;
  text-align: center;
  /* 【改】数字滚动时等宽显示，避免位数变化导致左右抖动 */
  font-variant-numeric: tabular-nums;
  font-style: normal;
}

.box3-title {
  width: 215px;
  height: 62px;

  font-size: 20px;
  color: #666666;
  line-height: 31px;
  text-align: center;
  font-style: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* box3 按钮区域 */
.box3-btn {
  width: 666px;
  height: 88px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0 auto;
}

/* 按钮之间的连接线容器 */
.box3-btn-line {
  flex: 1;
  height: 3px;
  display: flex;
  align-items: center;
  position: relative;
}

/* 紫色细线 1px - 贯穿整条线 */
.box3-btn-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 1px;
  background: #762875;
  opacity: 0.3;
}

/* 金色粗线 3px/154px - 中间 */
.box3-btn-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 154px;
  height: 3px;
  background: #dec489;
}

.box3-btn-left,
.box3-btn-right {
  position: relative;
  z-index: 2;
  cursor: pointer;
  width: 88px;
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.box3-btn-left:hover,
.box3-btn-right:hover {
  opacity: 0.7;
}

.box3-btn-left img,
.box3-btn-right img {
  width: 100%;
  height: auto;
}

/* 视频盒子外层 - flex 居中 */
.box-video-outer {
  width: 100%;
  display: flex;
  justify-content: center;
}

.box-video {
  width: 1920px;
  height: 719px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

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

.box-video .video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.box-video .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
}

.box-video .play-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 24px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 4px;
}

.box-video.playing .video-poster,
.box-video.playing .play-btn {
  display: none;
}

/* 校园生活 */
.campus-life-outer {
  width: 100%;
  /* height: 1096px; */
  background: url("../images/campus-life-bg.png") no-repeat center;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.campus-life-inner {
  width: 1920px;
  height: 1096px;
  padding: 54px 0 36px;
  display: flex;
  gap: 15px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.campus-left {
  width: 1060px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campus-left .cl-box1 {
  height: 131px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 50px;
}

.campus-left .cl-box1 img {
  width: 383px;
  height: 90px;
}

.campus-left .cl-box2 {
  height: 566px;
  position: relative;
  overflow: hidden;
  /* 【改1-3】cursor 移到 .fan-text，避免整块显示手型却不触发 */
}

.campus-left .cl-box2 > a {
  display: block;
  width: 100%;
  height: 100%;
}

.campus-left .cl-box2 > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===========================================
   【改】cl-box2 内嵌视频区（替换 campus-blue.png）
   .box-video 全局是 1920×719，这里按 cl-box2 的 1060×566 铺满
   层级：video(无 z-index) < ::before 遮罩(1) < .fan-text(2) < .play-btn(3)
   =========================================== */
.campus-left .cl-box2 > .cl-box2-media {
  height: 100%;
}

.campus-left .cl-box2 .box-video-outer {
  height: 100%;
}

.campus-left .cl-box2 .box-video {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  background: #000;
}

/* 播放中点击视频可暂停，给个手型 */
.campus-left .cl-box2 .box-video video {
  cursor: pointer;
}

/* .fan-text hover 展开后会铺满整块（z-index:2），
   把播放按钮提到 z-index:3，保证遮罩展开时依然点得到 */
.campus-left .cl-box2 .box-video .play-btn {
  z-index: 0;
}

/* 蓝色盒子 - 右下角扇形 */
.campus-left .cl-box2::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 153px;
  height: 153px;
  background: #630a62;
  border-radius: 153px 0 0 0;
  z-index: 1;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 【改1-1】hover 触发主体：.cl-box2 整块 → .fan-text 扇形
   ::before 属于容器，无法用后代选择器反向驱动，故用 :has() 由子元素状态反向命中父级 */
.campus-left .cl-box2:has(.fan-text:hover)::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.campus-left .cl-box2 .fan-text {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 153px;
  height: 153px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 20px;
  cursor: pointer;
}

/* 【改1-2】hover 触发主体：.cl-box2 整块 → .fan-text 自身 */
.campus-left .cl-box2 .fan-text:hover {
  width: 100%;
  height: 100%;
}

.campus-left .cl-box2 .fan-text h2,
.campus-left .cl-box2 .fan-text p {
  font-family: "Microsoft YaHei", "MicrosoftYaHei";
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  line-height: 24px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-style: normal;
  margin: 0;
}

.campus-left .cl-box3 {
  height: 281px;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

.campus-left .cl-box3 .cl-sub1 {
  width: 316px;
  height: 281px;
  position: relative;
  overflow: hidden;
}

.campus-left .cl-box3 .cl-sub1 a {
  display: block;
  width: 100%;
  height: 100%;
}

.campus-left .cl-box3 .cl-sub1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campus-left .cl-box3 .cl-sub2 {
  width: 530px;
  height: 281px;
  position: relative;
  overflow: hidden;
  /* 【改2-3】cursor 移到 .fan-text，避免整块显示手型却不触发 */
}

.campus-left .cl-box3 .cl-sub2 > a {
  display: block;
  width: 100%;
  height: 100%;
}

.campus-left .cl-box3 .cl-sub2 > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 棕色盒子 - 右上角扇形 */
.campus-left .cl-box3 .cl-sub2::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 153px;
  height: 153px;
  background: #630a62;
  border-radius: 0 0 0 153px;
  z-index: 1;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 【改2-1】hover 触发主体：.cl-sub2 整块 → .fan-text 扇形 */
.campus-left .cl-box3 .cl-sub2:has(.fan-text:hover)::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.campus-left .cl-box3 .cl-sub2 .fan-text {
  position: absolute;
  top: 0;
  right: 0;
  width: 153px;
  height: 153px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 20px;
  cursor: pointer;
}

/* 【改2-2】hover 触发主体：.cl-sub2 整块 → .fan-text 自身 */
.campus-left .cl-box3 .cl-sub2 .fan-text:hover {
  width: 100%;
  height: 100%;
}

.campus-left .cl-box3 .cl-sub2 .fan-text h2,
.campus-left .cl-box3 .cl-sub2 .fan-text p {
  font-family: "Microsoft YaHei", "MicrosoftYaHei";
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  line-height: 24px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-style: normal;
  margin: 0;
}

.campus-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campus-right .cr-box1 {
  height: 307px;
  position: relative;
  overflow: hidden;
}

.campus-right .cr-box1 a {
  display: block;
  width: 100%;
  height: 100%;
}

.campus-right .cr-box1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campus-right .cr-box2 {
  height: 390px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.campus-right .cr-box2 .cr2-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campus-right .cr-box2 .cr2-left .cr2-l-item1 {
  width: 344px;
  height: 188px;
  position: relative;
  overflow: hidden;
}

.campus-right .cr-box2 .cr2-left .cr2-l-item1 a {
  display: block;
  width: 100%;
  height: 100%;
}

.campus-right .cr-box2 .cr2-left .cr2-l-item1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campus-right .cr-box2 .cr2-left .cr2-l-item2 {
  width: 344px;
  height: 188px;
  position: relative;
  overflow: hidden;
  /* 【改3-3】cursor 移到 .fan-text，避免整块显示手型却不触发 */
}

.campus-right .cr-box2 .cr2-left .cr2-l-item2 > a {
  display: block;
  width: 100%;
  height: 100%;
}

.campus-right .cr-box2 .cr2-left .cr2-l-item2 > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 浅绿盒子 - 左下角扇形 */
.campus-right .cr-box2 .cr2-left .cr2-l-item2::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 153px;
  height: 153px;
  background: #630a62;
  border-radius: 0 153px 0 0;
  z-index: 1;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 【改3-1】hover 触发主体：.cr2-l-item2 整块 → .fan-text 扇形 */
.campus-right .cr-box2 .cr2-left .cr2-l-item2:has(.fan-text:hover)::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.campus-right .cr-box2 .cr2-left .cr2-l-item2 .fan-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 153px;
  height: 153px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 20px;
  cursor: pointer;
}

/* 【改3-2】hover 触发主体：.cr2-l-item2 整块 → .fan-text 自身 */
.campus-right .cr-box2 .cr2-left .cr2-l-item2 .fan-text:hover {
  width: 100%;
  height: 100%;
}

.campus-right .cr-box2 .cr2-left .cr2-l-item2 .fan-text h2,
.campus-right .cr-box2 .cr2-left .cr2-l-item2 .fan-text p {
  font-family: "Microsoft YaHei", "MicrosoftYaHei";
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  line-height: 24px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-style: normal;
  margin: 0;
}

.campus-right .cr-box2 .cr2-right {
  width: 487px;
  height: 250px;
  position: relative;
  overflow: hidden;
}

.campus-right .cr-box2 .cr2-right a {
  display: block;
  width: 100%;
  height: 100%;
}

.campus-right .cr-box2 .cr2-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campus-right .cr-box3 {
  height: 281px;
  position: relative;
  overflow: hidden;
  /* 【改4-3】cursor 移到 .fan-text，避免整块显示手型却不触发 */
}

.campus-right .cr-box3 > a {
  display: block;
  width: 100%;
  height: 100%;
}

.campus-right .cr-box3 > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 青色盒子 - 左上角扇形 */
.campus-right .cr-box3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 153px;
  height: 153px;
  background: #630a62;
  border-radius: 0 0 153px 0;
  z-index: 1;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 【改4-1】hover 触发主体：.cr-box3 整块 → .fan-text 扇形 */
.campus-right .cr-box3:has(.fan-text:hover)::before {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.campus-right .cr-box3 .fan-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 153px;
  height: 153px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 20px;
  cursor: pointer;
}

/* 【改4-2】hover 触发主体：.cr-box3 整块 → .fan-text 自身 */
.campus-right .cr-box3 .fan-text:hover {
  width: 100%;
  height: 100%;
}

.campus-right .cr-box3 .fan-text h2,
.campus-right .cr-box3 .fan-text p {
  font-family: "Microsoft YaHei", "MicrosoftYaHei";
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  line-height: 24px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-style: normal;
  margin: 0;
}

/* ========== 返回顶部按钮 ========== */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #630a62;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(99, 10, 98, 0.35);
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #762875;
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(99, 10, 98, 0.5);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.5;
}
/* 主体 */

/* 尾部 */
.footer-container {
  width: 100%;
  height: 655px;
  display: flex;
  justify-content: center;
  background: url(../images/footer.png) no-repeat center center;
  background-size: cover;
  background-position: 52% 60%;
}

.footer-content {
  width: 1520px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-top {
  width: 100%;
  height: 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 109px;
}

.f-left-logo {
  width: 285px;
  height: 64px;
}

.f-right-nav {
  width: 1235px;
  height: 64px;
  display: flex;
  justify-content: flex-end;
}

.f-nav ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 50px;
  padding-top: 11px;
}

.f-nav ul li {
  height: 21px;
  color: #fff;
}
.f-nav ul li a {
  font-size: 16px;
  color: #ffffff;
  line-height: 21px;
  text-align: left;
  font-style: normal;
}
.short-line {
  width: 1140px;
  height: 1px;
  background: #ffffff;
  opacity: 0.4;
  margin-top: 10px;
}

.campus-address {
  margin-top: 37px;
  width: 1140px;
  height: 273px;
  /* 用于容纳隐藏的radio */
  position: relative;
  background: url(../images/footer-bg.png);
}

/* 隐藏单选框 */
.f-tab-radio {
  display: none;
}

.f-tab-buttons {
  display: flex;
  height: 54px;
}

.f-tab-btn {
  flex: 1;
  height: 54px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: #fff;
}

.f-tab-btn > p {
  height: 21px;
  font-family: MicrosoftYaHei, MicrosoftYaHei;
  font-weight: bold;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  font-style: normal;
}

#tab0:checked ~ .f-tab-buttons label[for="tab0"],
#tab1:checked ~ .f-tab-buttons label[for="tab1"],
#tab2:checked ~ .f-tab-buttons label[for="tab2"],
#tab3:checked ~ .f-tab-buttons label[for="tab3"] {
  background: rgba(66, 0, 65, 0.2);
}

.f-tab-contents {
  height: 219px;
  position: relative;
}

.f-tab-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 50px 60px;
  display: none;
  box-sizing: border-box;
}

/* 选中对应radio才显示内容 */
#tab0:checked ~ .f-tab-contents .f-tab-content:nth-child(1),
#tab1:checked ~ .f-tab-contents .f-tab-content:nth-child(2),
#tab2:checked ~ .f-tab-contents .f-tab-content:nth-child(3),
#tab3:checked ~ .f-tab-contents .f-tab-content:nth-child(4) {
  display: block;
}

.f-tab-content p {
  font-size: 16px;
  color: #ffffff;
  line-height: 30px;
  text-align: left;
  height: 80px;
  display: flex;
  flex-direction: row;
}

.f-tab-content p span:first-child {
  width: 95px;
  flex-shrink: 0;
  display: inline-block;
}

.long-line {
  margin-top: 60px;
  width: 1520px;
  height: 1px;
  background: #ffffff;
  opacity: 0.4;
}

.footer-bottom {
  padding: 24px 0;
  width: 100%;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  color: #ffffff;
  line-height: 21px;
  text-align: center;
  font-style: normal;
  align-items: center;
}
.footer-bottom span{
  margin-right: 40px;
}
.footer-bottom img {
  width: 44px;
  height: 53px;
}

/* ===========================================
   【改】footer 主体 —— 结构参照南京大学 footer
   左：logo + 两列校区信息 / 右：社交图标
   .footer-container 的背景图、.footer-bottom 样式均保持原样
   =========================================== */
.footer-content .wp.flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  margin-top: 109px;
  flex: 1;
}

.footer-content .aleft {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  flex: 1;
}

.footer-content .logoft {
  width: 285px;
  flex-shrink: 0;
}

.footer-content .logoft img {
  width: 285px;
  height: 64px;
}

.footer-content .infoft {
  font-size: 16px;
  color: #ffffff;
  line-height: 30px;
  text-align: left;
}

.footer-content .infoft p {
  margin: 0 0 26px;
}

.footer-content .infoft p:last-child {
  margin-bottom: 0;
}

.footer-content .infoft span {
  font-weight: bold;
  margin-right: 6px;
}

.footer-content .aright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.footer-content .icoft {
  display: flex;
  gap: 14px;
}

.footer-content .icoft-link {
  display: block;
}

.footer-content .icoft-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c19bbf;
  transition:
  background 0.3s ease,
  border-color 0.3s ease;
}

.footer-content .icoft-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.footer-content .icoft-link:hover .icoft-icon {
  background: rgba(255, 255, 255);
  border-color: #ffffff;
}
/* 尾部 */

/* ===========================================
   【改】campus-life 新版布局（参照设计稿）
   左：视频大图（800×430）  右：Campus Life 标题图 + 2×2 错位宫格
   说明：
   1. 选择器统一用 .campus-life-outer/.campus-life-inner 前缀提高优先级，
      以压过 responsive-indexHome.css 里对旧版 .campus-life-inner 的
      width:95%/flex-direction:column 等规则（响应式另在下方单独处理）
   2. 旧版 .campus-left/.campus-right/.cl-box*/.cr-box* 系列规则已无对应元素，
      暂作死代码保留，确认新版不再回退后可整体清理
   =========================================== */
.campus-life-outer {
  height: auto;
}

.campus-life-outer .campus-life-inner {
  width: 1440px;
  height: auto;
  padding: 90px 0;
  gap: 50px;
  align-items: stretch;
}

/* ---------- 左侧视频 ---------- */
.campus-life-outer .campus-video {
  width: 800px;
  height: 430px;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
}

.campus-life-outer .campus-video .box-video-outer {
  height: 100%;
}

.campus-life-outer .campus-video .box-video {
  width: 100%;
  height: 100%;
}

/* 播放中点击视频可暂停，给个手型 */
.campus-life-outer .campus-video .box-video video {
  cursor: pointer;
}

/* ---------- 右侧：标题 + 宫格 ---------- */
.campus-life-outer .campus-side {
  flex: 1;
  /* 【改】与左侧视频等高：430px = 视频高度，避免两侧高度不齐 */
  height: 430px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.campus-life-outer .campus-title {
  height: 74px;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.campus-life-outer .campus-title img {
  height: 100%;
  width: auto;
  display: block;
}

.campus-life-outer .campus-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  /* 【改】错位宫格：第1张 1.5 : 第2张 1，第3张 1 : 第4张 1.5
     grid 的列是共用的，普通 1fr 1fr 做不到上下行不同比例，
     故拆成 5 等分列，再用 grid-column 跨列拼出 3:2 / 2:3 */
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

/* 【改】四张图各自占位：行1 = 3列 + 2列，行2 = 2列 + 3列 */
.campus-life-outer .cg-item:nth-child(1) {
  grid-row: 1;
  grid-column: 1 / span 3;
}

.campus-life-outer .cg-item:nth-child(2) {
  grid-row: 1;
  grid-column: 4 / span 2;
}

.campus-life-outer .cg-item:nth-child(3) {
  grid-row: 2;
  grid-column: 1 / span 2;
}

.campus-life-outer .cg-item:nth-child(4) {
  grid-row: 2;
  grid-column: 3 / span 3;
}

/* 【改】宫格图片圆角（overflow:hidden 已在下，遮罩/文字也随之裁切） */
.campus-life-outer .cg-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.campus-life-outer .cg-item > a {
  display: block;
  width: 100%;
  height: 100%;
}

.campus-life-outer .cg-item > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 悬停紫色遮罩：默认透明（设计稿静态态只有左下角文字），hover 淡入铺满 */
.campus-life-outer .cg-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #630a62;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.campus-life-outer .cg-item:has(.fan-text:hover)::before {
  opacity: 1;
}

.campus-life-outer .cg-item .fan-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 12px 14px;
  box-sizing: border-box;
  cursor: pointer;
  transition: padding 0.5s ease;
}

/* hover 时文字居中（背景淡入由 ::before 承担） */
.campus-life-outer .cg-item .fan-text:hover {
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.campus-life-outer .cg-item .fan-text h2,
.campus-life-outer .cg-item .fan-text p {
  font-family: "Microsoft YaHei", "MicrosoftYaHei";
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
  line-height: 22px;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  text-align: center;
  font-style: normal;
  margin: 0;
}

/* ---------- 响应式（新版结构） ---------- */
@media (max-width: 1520px) {
  .campus-life-outer .campus-life-inner {
    width: 95%;
    padding: 50px 0;
    gap: 24px;
  }

  .campus-life-outer .campus-video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .campus-life-outer .campus-side {
    width: 100%;
    flex: none;
    /* 【改】堆叠布局下不再与视频等高，交回内容撑开 */
    height: auto;
  }

  .campus-life-outer .campus-grid {
    grid-template-rows: none;
    grid-auto-rows: 180px;
  }
}

@media (max-width: 576px) {
  .campus-life-outer .campus-life-inner {
    padding: 30px 0;
    gap: 16px;
  }

  .campus-life-outer .campus-title {
    height: 52px;
    margin-bottom: 12px;
  }

  .campus-life-outer .campus-grid {
    gap: 12px;
    grid-auto-rows: 120px;
  }

  .campus-life-outer .cg-item .fan-text h2,
  .campus-life-outer .cg-item .fan-text p {
    font-size: 14px;
    line-height: 20px;
  }
}