body {
  background-color: #f9f9f9;
}
.line {
  position: absolute;
  bottom: 10px;
  left: 25px;
}
.main {
  margin-bottom: 64px;
  .titleBox {
    margin: 32px 0 16px 0;
    span {
      color: #999999;
      &:nth-of-type(3) {
        color: #1d2129;
      }
    }
    a {
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      &:last-child {
        color: #1d2129;
      }
    }
  }
  .overlayDetail {
    display: none;
  }
  .swiperCard {
    background-color: #fff;
    width: 100%;
    padding: 32px;
    box-sizing: border-box;
    .swiperTit {
      display: flex;
      align-items: center;
      h2 {
        font-weight: 600;
        font-size: 28px;
        color: #1d2129;
        line-height: 39px;
        margin-right: 16px;
      }
      p {
        padding: 6px 22px;
        border-radius: 4px 4px 4px 4px;
        font-weight: 600;
        font-size: 18px;
        line-height: 25px;
      }
      .tu {
        background: linear-gradient(270deg, #e4e4e4 0%, #e5e5e5 100%);
        color: #293249;
      }
      .pro {
        background: linear-gradient(90deg, #f7e9bd 0%, #fce6b9 100%);
        color: #764906;
      }
    }
    .mainImg {
      display: flex;
      justify-content: space-between;
      margin-top: 17px;
      .leftImg {
        width: 680px;
        /* height: 600px; */
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        .swiperCont {
          position: relative;
          width: 680px;
          height: 680px;
          overflow: hidden;
          box-sizing: border-box;
        }

        .slides {
          width: 680px;
          height: 680px;
          display: flex;
          transition: all 0.5s;
        }
        .slides img {
          width: 100%; /* 保持图片宽度与容器一致 */
          height: 100%;

          object-fit: contain; /* 保持图片比例并填充容器 */
          display: none;
        }

        .prev {
          position: absolute;
          top: 50%;
          left: 24px;
          transform: translateY(-50%);
          cursor: pointer;
          img {
            width: 48px;
            height: 48px;
          }
        }

        .next {
          position: absolute;
          top: 50%;
          right: 24px;
          transform: translateY(-50%);
          cursor: pointer;
          img {
            width: 48px;
            height: 48px;
          }
        }
        .thumbnails {
          display: flex;
          margin-top: 10px;
          box-sizing: border-box;
        }

        .thumbnails img {
          width: 100px; /* 缩略图宽度 */
          height: 100px; /* 缩略图高度 */
          margin: 0 8px 0 0;
          cursor: pointer;
          opacity: 0.7;
          border: 1px solid #ccc;
          border-radius: 2px 2px 2px 2px;
        }
        .activ {
          border: 1px solid #0256ff !important;
        }

        /* .thumbnails img.activ {
          opacity: 1;
        } */
      }
      .rightImg {
        margin-left: 32px;
        flex: 1;
        .saoShou {
          padding: 46px 70px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          background: #fafbff;
          border-radius: 2px 2px 2px 2px;
          p {
            font-weight: 500;
            font-size: 24px;
            color: #1d2129;
            line-height: 34px;
          }
          img {
            width: 148px;
            height: 148px;
          }
        }
        .saoShouH5 {
          display: none;
        }
        .textBox {
          margin-top: 24px;
          p {
            margin-bottom: 24px;
            font-weight: 500;
            font-size: 20px;
            color: #1d2129;
            line-height: 28px;
          }
          span {
            font-weight: 400;
            font-size: 18px;
            color: #666666;
            line-height: 32px;
          }
        }
      }
    }
  }
}