/* index 页面专用样式，从页面内样式块迁移。 */
.swiper {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
      position: fixed;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      box-sizing: border-box;
      z-index: 10;
      display: none; /* 初始隐藏 */
      /* 初始透明效果当前未启用。 */
      /* transition: opacity 3.5s ease; 添加淡入效果 */ 
    }

    .swiper.active {
      display: block; /* 显示 */
      animation: fadeIn 1s ease-in-out forwards;
     
      
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 44%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-slide img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

   

    .click-to-show {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width:35%;
      color: white;
      font-size: 24px;
        /* cursor: pointer; */
      z-index: 100;
    }

  .kkk {
  opacity: 0; /* 初始完全透明 */
  animation: 
    fadeIn 5s ease-in forwards, /* 5秒淡入 */
    fadeOut 2s ease-out 5s forwards; /* 淡出动画在5秒后开始，持续2秒 */
}

@keyframes fadeIn {
  from { opacity: 0; } /* 开始状态 */
  to { opacity: 1; }   /* 结束状态 */
}

@keyframes fadeOut {
  from { opacity: 1; } /* 从完全不透明开始 */
  to { opacity: 0; }   /* 到完全透明结束 */
}