/* ==========================================
   蔚蓝证书轮播组件样式
   ========================================== */

.weilan-swiper-1 {
  width: 100%;
  background-color: #f8f9fa;
  overflow: hidden;
  position: relative;
}

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

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

/* ==========================================
   标题样式
   ========================================== */

.weilan-swiper-1-title {
  text-align: center;
}

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

.swiper.weilan-certificates-swiper {
  width: 100%;
  padding: 8rem 0;
  /* height: 37.5rem; */
  overflow: hidden;
}

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

.weilan-certificates-swiper .swiper-slide {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  aspect-ratio: 260 / 189;
  width: 32.5rem;
  transform-origin: bottom center;
}

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

.certificate-frame {
  position: relative;
  /* background: url('https://okki-shop.oss-cn-hangzhou.aliyuncs.com/templates/shop-default/5f56b6c9-22a9-49b5-bfaf-f19ba6687473-gAA_rw.png')
    no-repeat;
  background-size: contain; */
  /* aspect-ratio: 260 / 189; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.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;
}

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

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

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

@media screen and (max-width: 1199px) {
  .swiper.weilan-certificates-swiper {
    padding: 2rem 0px;
  }
}

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

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

@media screen and (max-width: 576px) {
  .weilan-swiper-1 {
  }
}