﻿@media screen and (max-width: 767px) {
  .sp_left {
    width: 100% !important;
  }
  .spcont_1 .mySwiper2,
  .spcont_1 .mySwiper {
    height: 280px !important;
  }
}

/* =========== */
.spcont_1 {
  display: flex;
  align-items: center;
}

.mySwiper-thumbs {
  width: 25%; /* 缩略图宽度，可以根据需要调整 */
  margin-right: 10px; /* 缩略图与大图之间的间距 */
}

.mySwiper-main {
  width: 75%; /* 大图宽度 */
  position: relative;
}

.swiper-slide img {
  width: 100%;
  height: auto;
}

.mySwiper-thumbs .swiper-slide {
  height: auto;
  cursor: pointer;
}

.swiper-button-next,
.swiper-button-prev {
  color: #000; /* 按钮颜色，可以根据需要调整 */
}

/* =========== */

.sp_left {
  width: 50%;
}

.spcont_1 {
  /* height: 430px; */
  display: flex;
  justify-content: space-between;
}

.spcont_1 .mySwiper2 {
  height: 380px;
  width: 70%;
  /* border-bottom: 1px solid #e5e5e5; */
}

.spcont_1 .swiper-button-next,
.spcont_1 .swiper-button-prev {
  color: #fff !important;
  z-index: 9999;
}

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

.spcont_1 .mySwiper {
  height: 380px;
  box-sizing: border-box;
  width: 20%;
}

.spcont_1 .mySwiper .swiper-slide {
  width: 100%;
  height: auto;
  opacity: 0.4;
}

.spcont_1 .mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}
