html,
body {
  position: relative;
  height: 100%;
}

.swiper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 主图容器：去掉了背景色、边框 */
.mySwiper2 {
  width: 100%;
  height: 480px;          
  background: transparent; 
  box-sizing: border-box;
  position: relative; /* 为放大镜绝对定位做参照 */
}

.mySwiper2 .swiper-slide {
  background: transparent;
  padding: 0;             
  box-sizing: border-box;
}

/* 图片：保持原始比例，不放大不模糊 */
.mySwiper2 .swiper-slide img {
  display: block;
  width: auto !important;    
  height: auto !important;   
  max-width: 100%;           
  max-height: 100%;          
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast; 
  image-rendering: crisp-edges;
  cursor: crosshair; /* 鼠标变成十字准星 */
}

/* =========================================
   核心：右侧悬浮放大镜样式
   ========================================= */
/* 放大镜显示的右侧窗口 */
.zoom-lens-box {
   position: absolute;
  top: 0;
  right: -420px; 
  display: block; /* 定位在图片右侧，按需微调 */
  width: 400px;
  height: 400px;
  border: 1px solid #eee;
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  display: none; /* 默认隐藏，鼠标移入显示 */
  z-index: 999;
  border-radius: 4px;
  background-size: 200% 200%; /* 控制放大的倍数，200%表示放大2倍 */
}

/* 手机端适配 */
@media screen and (max-width: 768px) {
  .mySwiper2 {
    height: 300px; 
  }
  .zoom-lens-box {
    display: none !important; /* 手机端不显示放大镜 */
  }
}