/* ==========================================
   蔚蓝证书轮播组件样式（7张v2）
   ========================================== */

.weilan-swiper-3 {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 44.6875rem;
}

.weilan-swiper-3-bg {
  object-position: top;
  object-fit: cover;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.weilan-swiper-3 > .container {
  position: relative;
  z-index: 5;
}

/* ==========================================
   标题样式
   ========================================== */
.weilan-swiper-3-title {
  text-align: center;
  margin-bottom: 2.625rem;
}

/* ==========================================
   Swiper 轮播容器
   ========================================== */

.weilan-certificates-swiper-3 {
  width: 100%;
  padding: 3rem 0;
  overflow: hidden;
}

/* 分页点 */
.weilan-certificates-swiper-3 .weilan-swiper-3-pagination {
  position: relative;
  margin-top: 4rem;
  z-index: 10;
}

.weilan-certificates-swiper-3
  .weilan-swiper-3-pagination
  .swiper-pagination-bullet {
  width: 2.5rem;
  height: 0.375rem;
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition:
    background 0.3s ease,
    width 0.3s ease;
}

.weilan-certificates-swiper-3
  .weilan-swiper-3-pagination
  .swiper-pagination-bullet:hover {
  background: rgba(255, 255, 255, 0.8);
}

.weilan-certificates-swiper-3
  .weilan-swiper-3-pagination
  .swiper-pagination-bullet-active {
  width: 5rem;
  background: #fff;
}

.weilan-certificates-swiper-3 .swiper-wrapper {
  display: flex;
  align-items: center;
}

.weilan-certificates-swiper-3 .swiper-slide {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  transform-origin: bottom center;
}

/* ==========================================
   平滑滚动容器
   ========================================== */

.weilan-certificates-scroll-container.smooth-scroll-container {
  width: 100%;
  padding: 3rem 0;
  overflow: hidden;
  position: relative;
}

.weilan-certificates-scroll-wrapper.smooth-scroll-wrapper {
  display: flex;
  gap: 1.875rem;
  animation: smoothScrollCertificates 30s linear infinite;
  will-change: transform;
  width: fit-content;
}

/* hover 时暂停动画 */
.weilan-certificates-scroll-wrapper.smooth-scroll-wrapper:hover {
  animation-play-state: paused;
}

/* 证书项 */
.certificate-item {
  flex: 0 0 auto;
  width: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 平滑滚动动画 */
@keyframes smoothScrollCertificates {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================
   证书相框样式
   ========================================== */

.weilan-swiper-3 .certificate-frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 3 / 4;
}

.weilan-swiper-3 .certificate-frame .certificate-image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: auto;
  display: block;
  object-fit: contain;
  z-index: 1;
}

.weilan-swiper-3 .certificate-frame .image-border {
  position: relative;
  width: 100%;
  z-index: 2;
}

.weilan-swiper-3 .swiper-3d .swiper-slide-shadow-left,
.weilan-swiper-3 .swiper-3d .swiper-slide-shadow-right {
  background-image: none;
}

/* ==========================================
   响应式设计
   ========================================== */

@media screen and (max-width: 1199px) {
  .weilan-swiper-3 {
    height: auto;
  }
  .weilan-certificates-swiper-3 {
    padding: 2rem 0;
  }
  .weilan-certificates-scroll-container.smooth-scroll-container {
    padding: 2rem 0;
  }
}

@media screen and (max-width: 992px) {
  .weilan-swiper-3-title {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .certificate-item {
    width: 200px;
  }
  .weilan-certificates-scroll-wrapper.smooth-scroll-wrapper {
    gap: 1rem;
  }
  .weilan-swiper-3-pagination {
    display: none!important;
  }
}

@media screen and (max-width: 576px) {
}