/* ============================================================
   Hero（线上 www.szedu.com.cn 首页 Banner）样式移植
   来源：线上 css/style.css（自动提取，仅去掉 .container-wrapper 前缀）
   说明：为限定作用域，线上 style.css 的全局重置规则（img 100% 等）
        以 .swiper-banner 作用域补入，避免影响本页其它元素。
   ============================================================ */

/* --- 线上全局重置的 Hero 作用域化版本 --- */
.swiper-banner, .swiper-banner * { box-sizing: border-box; }
.swiper-banner ul, .swiper-banner li { list-style: none; margin: 0; padding: 0; }
.swiper-banner a { display: inline-block; text-decoration: none; }
.swiper-banner .swiper-slide img {
  width: 100%;
  height: 100%;
  vertical-align: top;
}
.swiper-banner {
  font-family: "Microsoft YaHei", Verdana, Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
  line-height: normal;   /* 线上 body 未设 line-height(=normal)，须隔离本页 body 的 1.65 */
  color: #131313;
}
.container-wrapper { width: 100%; overflow: hidden; }

/* 导航高（.nav 实测 69px，全断点恒定）。
   ⚠ 线上导航「浮在」Hero 之上，Hero 直接用 100vh；
     本站导航占 69px 文档流，故桌面档 Hero 高改为 calc(100vh - 变量)，
     使「导航 + Hero」恰好一屏（否则分页圆点会掉出首屏）。
     若日后改导航高度，只需改这一处。 */
:root { --hero-nav-h: 69px; }

/* --- 本页专属修正（不在线上 style.css 中，共 1 处） ---
   线上第 1 张 slide 的标题为空（<div class="title"></div>），但 .title::before
   是绝对定位的黄色高亮条（left:-50px;right:-8px）⇒ 空标题上会残留一个 58×18
   的小黄块（线上原站也有此瑕疵）。本页隐掉它，只影响空标题那张，
   「使命」「愿景」两张的黄条不受影响。 */
.swiper-banner .title:empty::before { display: none; }

/* --- 线上原样规则（保持源码顺序以复刻层叠） --- */

.swiper-banner .hsh-flex-center {  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;}
@keyframes banPs {  0% {
  transform: translateX(-50%) scale(0.4);
  opacity: 0;
  }
  100% {
  transform: translateX(0) scale(1);
  opacity: 1;
  }}
.swiper-banner {  height: 720px;}
.swiper-banner .swiper-slide img {  transform: matrix(1, 0, 0, 1, 0, 0);
  transition: all 0.4s ease 1.2s;}
.swiper-banner .swiper-slide-active img {  transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  transition: all 5s ease;}
.swiper-banner .swiper-slide-active .textBox {  animation: banPs 1.4s ease both;}
.swiper-banner .swiper-pagination-bullet {  width: 12px;
  height: 12px;
  margin: 0 10px;
  background: rgba(255, 255, 255, 0.6);
  position: relative;}
.swiper-banner .swiper-pagination-bullet:before {  content: "";
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 1px solid #FFF;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);}
.swiper-banner .swiper-pagination-bullet-active {  opacity: 1;
  background: white;}
.swiper-banner .swiper-pagination-bullet-active:before {  opacity: 1;}
.swiper-banner .textBox {  width: 640px;
  height: 100%;
  text-align: right;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  right: 6vw;
  z-index: 5;
  text-shadow: 0 0 10px #333;}
.swiper-banner .title {  max-width: 100%;
  font-weight: bold;
  font-size: 60px;
  color: #fff;
  position: relative;
  letter-spacing: 7px;}
.swiper-banner .title::before {  position: absolute;
  content: "";
  bottom: 0;
  left: -50px;
  right: -8px;
  background-color: #ffc000;
  height: 18px;
  z-index: -1;}
.swiper-banner .subtitle {  letter-spacing: 6px;
  width: 100%;
  max-width: 640px;
  margin-top: 20px;
  font-size: 40px;
  color: #fff;
  margin-bottom: 100px;}
.swiper-banner .text {  width: 100%;
  max-width: 660px;
  line-height: 40px;
  margin-top: 22px;
  font-weight: bold;
  font-size: 20px;
  color: #fff;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {  margin: 0 10px;}
@media screen and (min-width: 1200px) {
  .swiper-banner {  height: calc(100vh - var(--hero-nav-h, 69px));}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .swiper-banner {  height: calc(100vh - var(--hero-nav-h, 69px));}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .swiper-banner {  height: calc(100vh - var(--hero-nav-h, 69px));}
  .swiper-banner .textBox {  width: 100%;
  padding: 0 50px;}
  .swiper-banner .title {  font-size: 31.248px;}
  .swiper-banner .subtitle {  max-width: none;
  margin-top: 15px;
  font-size: 20.832px;}
  .swiper-banner .text {  max-width: none;
  line-height: normal;
  margin-top: 12px;
  font-size: 13px;}
}
@media screen and (max-width: 767px) {
  .swiper-banner {  height: 9.0666666667rem;}
  .swiper-banner .textBox {  width: 8.1333333333rem;}
  .swiper-banner .textBox .title {  font-size: 0.6133333333rem;
  letter-spacing: 0.1333333333rem;}
  .swiper-banner .textBox .title::before {  left: -0.5333333333rem;
  right: -0.1333333333rem;
  height: 0.2133333333rem;}
  .swiper-banner .textBox .subtitle {  max-width: 250px;
  letter-spacing: 0.0933333333rem;
  margin-top: 8px;
  font-size: 0.3733333333rem;
  margin-bottom: 1.6rem;}
  .swiper-banner .textBox .text {  max-width: none;
  line-height: 0.5333333333rem;
  font-size: 0.2666666667rem;}
  .swiper-banner .swiper-pagination-bullet {  width: 6px;
  height: 6px;
  margin: 0 5px;}
  .swiper-banner .swiper-pagination-bullet:before {  width: 12px;
  height: 12px;}
}