/**
 * 首页样式
 * 5 屏全屏滚动（banner / 走进汇君 / 解决方案 / 技术与产品 / 页脚）
 */

/* ============ swiper.animate 配套关键帧 ============
 * swiper.animate1.0.3.js 会为 .ani 元素追加 ${effect} animated 两个类（v3 风格类名），
 * animate.css v4 类名前缀改为 animate__，故此处自定义关键帧避免依赖 v3 兼容。
 */
.animated { animation-duration: 1s; animation-fill-mode: both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fadeIn { animation-name: fadeIn; }

@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 50px, 0); } to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -50px, 0); } to { opacity: 1; transform: none; } }
.fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-50px, 0, 0); } to { opacity: 1; transform: none; } }
.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInRight { from { opacity: 0; transform: translate3d(50px, 0, 0); } to { opacity: 1; transform: none; } }
.fadeInRight { animation-name: fadeInRight; }

.home-page { width: 100%; }

/* 主 Swiper 容器 */
.main-swiper {
  width: 100%;
  height: 100vh;
}
.main-swiper .swiper-slide {
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* ====== Slide 1: Banner ====== */
.slide-banner {
  padding-top: 15.833rem;
}
@media (max-width: 840px) {
  .slide-banner { padding-top: 30.833rem; }
}
.banner-swiper {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.banner-swiper .swiper-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (max-width: 840px) {
  .banner-swiper .swiper-slide img {
    width: auto !important;
    height: 100%;
  }
}
.banner-content {
  position: relative;
  z-index: 20;
  width: 34.167rem;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}
.banner-text {
  width: 100%;
  height: 4.417rem;
  background: url('../images/text.png') no-repeat center center;
  background-size: contain;
  margin-bottom: 1.458rem;
}
.banner-slogan-cn {
  font-size: 1.167rem;
  margin-bottom: 0.417rem;
}
.banner-slogan-en {
  font-size: 0.5rem;
  opacity: 0.9;
}
@media (max-width: 840px) {
  .banner-slogan-cn { font-size: 14px; }
}

/* 鼠标滚动提示 */
.scroll-mouse {
  position: absolute;
  left: 50%;
  bottom: 1.667rem;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.scroll-mouse-icon {
  width: 1.25rem;
  height: 1.667rem;
  animation: mouseBounce 2s infinite;
}
.scroll-mouse-icon img { width: 100%; height: 100%; }
.scroll-mouse-text {
  font-size: 0.75rem;
  color: #fff;
  margin-top: 0.833rem;
}
@media (max-width: 840px) {
  .scroll-mouse { bottom: 10rem; }
  .scroll-mouse-text { font-size: 14px; }
}
@keyframes mouseBounce {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* ====== Slide 2: 走进汇君 ====== */
.slide-about {
  padding-top: 5.833rem;
  /* background-image: url('../images/bg/bg_02.jpg'); */
}
@media (max-width: 840px) {
  .slide-about { padding-top: 10.833rem; }
}
.about-wrap {
  width: 100%;
  height: 80%;
  padding: 0 5.417rem;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}
.mini-title {
  font-family: 'IT', sans-serif;
  color: #6ca8ba;
  font-size: 2rem;
  margin: 0 auto;
  margin-bottom: -1.458rem;
}
.section-title {
  text-align: center;
  font-size: 1.542rem;
  color: #fff;
}
@media (max-width: 840px) {
  .section-title {
    top: 11.833rem;
    font-size: 16px;
  }
}
.about-text {
  margin-top: 1.458rem;
  font-size: 0.667rem;
  line-height: 2;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 15;
  overflow: hidden;
  text-align: justify;
  position: relative;
  color: #fff;
}
.about-text :deep(p),
.about-text p {
  line-height: 2 !important;
  font-size: 0.667rem !important;
}
@media (max-width: 840px) {
  .about-text {
    font-size: 14px;
  }
  .about-text p { font-size: 14px !important; line-height: 1.6 !important; }
}
.about-detail {
  width: 10.833rem;
  border-radius: 1.25rem;
  border: dashed 0.083rem #fff;
  text-align: center;
  line-height: 2.5rem;
  font-size: 0.75rem;
  position: absolute;
  left: 50%;
  bottom: 4.167rem;
  margin-left: -5.417rem;
  transition: all 0.6s ease;
  cursor: pointer;
  color: #fff;
}
@media (max-width: 840px) {
  .about-detail { bottom: 10rem; font-size: 14px; }
}
.about-detail:hover {
  border: none;
  background-color: #31b5e2;
}

/* ====== Slide 3: 解决方案 ====== */
.slide-solution {
  padding-top: 7.5rem;
  position: relative;
  overflow: hidden;
}
@media (max-width: 840px) {
  .slide-solution { padding-top: 12.5rem; }
}
.sol-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  overflow: hidden;
}
.sol-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.sol-bg.active {
  opacity: 0.89;
  transform: scale(1.05);
}
.sol-content {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  margin: 0 3.75rem;
  height: calc(100% - 7.5rem);
}
@media (max-width: 840px) {
  .sol-content { margin: 0 3.75rem; flex-direction: column; gap: 4rem; }
}
.sol-left {
  width: 40rem;
  color: #fff;
  margin-top: 2.917rem;
}
.sol-brand {
  font-size: 1.292rem;
  color: #fff;
}
@media (max-width: 840px) {
  .sol-brand { font-size: 16px; }
}
.sol-line {
  width: 4.167rem;
  height: 0.417rem;
  background: #aac93b;
  margin: 0.833rem 0 0 0.333rem;
}
.sol-num-wrap {
  display: flex;
  width: 2.917rem;
  font-size: 4.625rem;
  font-family: 'AE', sans-serif;
  position: relative;
  margin-top: 1rem;
}
.sol-num-label {
  position: absolute;
  top: 0.75rem;
  left: 2.917rem;
  width: 40rem;
}
.sol-num-label .cn {
  font-size: 1.75rem;
  color: #fff;
}
.sol-num-label .en {
  font-size: 0.75rem;
  color: #fff;
  opacity: 0.85;
}
@media (max-width: 840px) {
  .sol-num-label .cn { font-size: 18px; }
  .sol-num-label .en { font-size: 14px; }
}
.sol-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}
.sol-item {
  position: relative;
  width: 26rem;
  height: 8.333rem;
  border: 0.083rem solid hsla(0, 0%, 100%, 0.2);
  display: flex;
  color: #fff;
  cursor: pointer;
  transition: border-color 0.3s;
}
.sol-item:hover,
.sol-item.active {
  border-color: var(--c-accent);
}
.sol-item:hover .sol-item-num,
.sol-item.active .sol-item-num { color: var(--c-accent); }

/* 自动轮播进度边线（top→right→bottom→left 顺序绘制，总时长 3.5s 与轮播间隔一致） */
.sol-edge {
  position: absolute;
  background: var(--c-accent);
  pointer-events: none;
  opacity: 0;
}
.sol-edge-top    { top: 0; left: 0; height: 0.083rem; width: 0; }
.sol-edge-right  { top: 0; right: 0; width: 0.083rem; height: 0; }
.sol-edge-bottom { bottom: 0; right: 0; height: 0.083rem; width: 0; }
.sol-edge-left   { bottom: 0; left: 0; width: 0.083rem; height: 0; }

@keyframes solEdgeGrowW { from { width: 0; opacity: 0; } to { width: 100%; opacity: 1; } }
@keyframes solEdgeGrowH { from { height: 0; opacity: 0; } to { height: 100%; opacity: 1; } }

.sol-item.active .sol-edge-top    { animation: solEdgeGrowW 0.875s linear forwards; }
.sol-item.active .sol-edge-right  { animation: solEdgeGrowH 0.875s linear 0.875s forwards; }
.sol-item.active .sol-edge-bottom { animation: solEdgeGrowW 0.875s linear 1.75s forwards; }
.sol-item.active .sol-edge-left   { animation: solEdgeGrowH 0.875s linear 2.625s forwards; }

/* hover 时暂停进度，与自动轮播的 solPaused 同步 */
.sol-item:hover .sol-edge { animation-play-state: paused; }
@media (max-width: 840px) {
  .sol-item {
    width: 90%;
    height: auto;
    padding: 0.5rem 0;
  }
}
.sol-item-num {
  width: 6.25rem;
  font-size: 2.792rem;
  margin: auto 0;
  padding-left: 1.6667rem;
  font-family: 'AE', sans-serif;
  transition: color 0.3s;
}
.sol-item-text {
  flex: 1;
  margin: auto 0;
  margin-left: 0.833rem;
  padding-right: 0.8333rem;
}
.sol-item-en {
  font-size: 0.75rem;
  opacity: 0.85;
}
.sol-item-cn {
  font-size: 1.083rem;
  margin-top: 0.333rem;
}
@media (max-width: 840px) {
  .sol-item-en { font-size: 14px; }
  .sol-item-cn { font-size: 16px; }
}

/* ====== Slide 4: 技术与产品 ====== */
.slide-product {
  padding-top: 5.833rem;
  background-image: url('../images/bg/bg_04.jpg');
}
@media (max-width: 840px) {
  .slide-product { padding-top: 10.833rem; }
}
.product-wrap {
  width: 100%;
  text-align: center;
  color: #fff;
}
.product-wrap .mini-title { color: #6a9ebd; }
.product-pc-swiper {
  height: 19.167rem;
  margin-top: 2.5rem;
}
.product-pc-swiper .swiper-slide {
  width: 36%;
  height: 100%;
  border-radius: 0.417rem;
  margin: 0 3.333rem;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.product-pc-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
}
.product-pc-swiper .swiper-slide:hover img {
  transform: scale(1.1);
}
.product-pc-swiper .slide-title {
  width: 15rem;
  height: 2.917rem;
  line-height: 2.917rem;
  padding-left: 2.083rem;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 0;
  top: 13.375rem;
  font-size: 0.75rem;
  color: #333;
  border-left: 0.417rem solid #2096cb;
  background-image: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
  transition: all 0.6s ease;
}
.product-pc-swiper .swiper-slide:hover .slide-title {
  background-image: linear-gradient(90deg, rgba(32,150,203,1), rgba(255,255,255,0));
  color: #fff;
}

/* 手机端产品 Swiper */
.product-mobile-swiper {
  display: none;
  margin-top: 36%;
}
.product-mobile-swiper .swiper-slide {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: auto;
}
.product-mobile-swiper .slide-title-top {
  position: absolute;
  left: 50%;
  top: -6rem;
  font-size: 16px;
  transform: translate(-50%, -50%);
  color: #fff;
}
.product-mobile-swiper .slide-title {
  width: 15rem;
  height: 2.917rem;
  line-height: 2.917rem;
  padding-left: 2.083rem;
  position: absolute;
  left: 0;
  top: 70%;
  font-size: 0.75rem;
  color: #333;
  border-left: 0.417rem solid #2096cb;
  background-image: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.product-mobile-swiper .swiper-slide img {
  width: 100%;
  height: auto;
}

@media (max-width: 840px) {
  .product-pc-swiper { display: none; }
  .product-mobile-swiper { display: block; }
}

/* 轮播底部圆点导航 */
.product-foot {
  display: flex;
  justify-content: center;
  padding-top: 3.333rem;
  margin: 0 auto;
  color: #fff;
}
.product-foot-item {
  position: relative;
  width: 8.333rem;
  text-align: center;
  cursor: pointer;
  transition: color 0.3s ease;
}
.product-foot-line {
  width: 100%;
  height: 0.042rem;
  background: #80b6bb;
  margin-bottom: 1.25rem;
}
.product-foot-circle {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: solid 1px #fff;
}
.product-foot-round {
  display: block;
  width: 0.417rem;
  height: 0.417rem;
  border-radius: 50%;
  background: #fff;
  transition: background 0.3s;
}
.product-foot-item.active .product-foot-round {
  background: var(--c-accent);
}
.product-foot-item p {
  font-size: 0.6rem;
  margin-top: 0.5rem;
}

/* 手机端圆点 */
.product-foot-mobile {
  display: none;
  justify-content: center;
  align-items: center;
  padding-top: 3.333rem;
  margin: 0 auto;
  color: #fff;
  gap: 2px;
}
.product-foot-mobile-item {
  width: 11rem;
  margin-top: 0.2rem;
  cursor: pointer;
  position: relative;
  text-align: center;
}
.product-foot-mobile-item .product-foot-circle {
  left: -1rem;
  top: 40%;
}
@media (max-width: 840px) {
  .product-foot { display: none; }
  /* .product-foot-mobile { display: flex; } */
  .product-foot-mobile-item{
    width: 20px;
  }
}

/* ====== Slide 5: Footer (复用 footer-mount) ====== */
.slide-footer {
  height: auto !important;
  background-color: var(--c-primary);
}

/* Swiper 11 pagination */
.main-swiper .swiper-pagination { z-index: 15; }
.main-swiper .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.4;
}
.main-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--c-accent);
}