.cases-detail {
    max-width: 1200px;
    margin: 0 auto;
  }

  .cases-detail .detail-title {
    display: inline-block;
    width: 100%;
    margin-top: 128px;
    text-align: center;
    font-family: MiSansVF_Semibold;
    color: #333333;
    font-size: 32px;
    line-height: 42px;
  }

  .cases-detail .detail-date {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #666666;
  }
 

  .cases-detail .detail-desc {
    margin-top: 56px;
    text-align: left;
    font-style: normal;
  }

  .cases-detail .detail-desc .tag {
    font-size: 14px;
    color: #21A13B;
    line-height: 20px;
    background: #E8F5EB;
    border-radius: 4px;
    padding: 4px 8px;
  }

  .cases-detail .detail-desc .detail-desc-title {
    font-size: 28px;
    color: #333333;
    line-height: 38px;
    font-family: MiSansVF_Semibold;
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .cases-detail .detail-desc .detail-desc-content {
    font-size: 16px;
    color: #666666;
    line-height: 28px;
  }

  .cases-detail .detail-footer-carousel {
    margin-top: 80px;
    overflow: hidden;
    padding-left: 0px;
    padding-right: 0px;
  }

  .cases-detail .detail-footer-carousel .detail-footer-carousel-title {
    font-size: 28px;
    color: #333333;
    line-height: 38px;
    text-align: left;
    font-family: MiSansVF_Semibold;
    margin-bottom: 0;
  }

  .detail-footer-carousel .news-list-box {
    width: 100%;
    margin-top: 32px;
    display: flex;
    transition: transform 0.5s ease;
  }

  .detail-footer-carousel .news-list-box .news-content {
    margin-bottom: 40px;
    width: calc((100% - 60px) / 3);
    margin-right: 30px;
    box-sizing: border-box;
  }

  .detail-footer-carousel .news-list-box .news-content .news-img {
    width: 380px;
    height: 304px;
    overflow: hidden;
    border-radius: 16px;
    display: inline-block;
    background: #F2F3F4;
  }

  .detail-footer-carousel .news-list-box .news-content .news-img img:hover {
    cursor: pointer;
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.2);
  }

  .detail-footer-carousel .news-list-box .news-content .news-img img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 32px 70px;
    transition: all 0.3s;
    object-fit: cover;
  }

  .detail-footer-carousel .news-list-box .news-content .news-txt {
    width: 100%;
    text-align: left;
  }

  .detail-footer-carousel .news-list-box .news-content:hover .news-img .img {
    transform: scale(1.1);
  }
  .carousel {
    position: relative;
  }
  .swiper{
    --swiper-pagination-color: #21A13B;
    --swiper-pagination-bullet-inactive-color: #D8D8D8;
    --swiper-pagination-bottom: 0px;
  }
  .swiper {
    width: 100%;
    height: 512px;
    margin-top: 40px;
    position: relative;
    border-radius: 24px;
  }


  .swiper .swiper-wrapper .swiper-slide {
    width: 100%;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: MiSansVF_Semibold;
    color: #fff;
    border-radius: 24px;
    cursor: pointer;
  }

  .swiper .swiper-wrapper .swiper-slide video, .swiper .swiper-wrapper .swiper-slide img {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    object-fit: cover;
  }
  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #D8D8D8;
    margin: 0 10px;
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .swiper .swiper-pagination .swiper-pagination-bullet .swiper-pagination-bullet-active {
    background-color: #21A13B !important;
  }

  .carousel-control-prev,
  .carousel-control-next {
    position: absolute;
    width: 64px!important;
    height: 64px;
    font-size: 18px!important;
    padding: 22px!important;
    top: 50%!important;
    color: #000!important;
    transform: translateY(-50%);
    border: 1px solid #D8D8D8!important;
    border-radius: 50%;
    cursor: pointer!important;
  }
  .carousel .carousel-control-prev {
    left: -96px;
  }
  .play-btn {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translateY(-45%);
    transform: translateX(-50%);
    z-index: 3;
    cursor: pointer;
    color: #fff;
    font-size: 40px!important;
  }
  .carousel .carousel-control-next {
    right: -96px;
    z-index: 2;
  }

  .news-controls {
    display: flex;
    justify-content: center;
  }

  .news-controls img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .news-controls .prev {
    margin-right: 40px;
  }

  .news-controls .prev,
  .next {
    width: 48px;
    height: 48px;
    color: #000;
    border: 1px solid #D8D8D8;
    border-radius: 50%;
    padding: 13px;
    display: flex;
    cursor: pointer;
    background: #fff;
  }

  .news-controls button[disabled] {
    opacity: 0.5;
  }

   .productsSwiper {
    padding-bottom: 104px;
  }
  
  .productsSwiper h1 {
    font-size: 42px;
    color: #333333;
    line-height: 56px;
    padding-bottom: 48px;
    text-align: center;
  }
  .productsSwiper .swiperList {
    margin-top: 0px!important;
    height: auto!important;
  }
  .productsSwiper .swiper .swiper-wrapper .swiper-slide { 
    height: auto!important;
    margin-top: 24px;
  }
  .productsSwiper .swiperList .swiper-slide a {
    width: 100%;
    display: inline-block;
  }
  
  .productsSwiper .swiperList .swiper-slide .swiperImg {
    border-radius: 16px;
    background: #F2F3F4;
    overflow: hidden;
    width: 100%;
    height: 304px;
  }
  
  .productsSwiper .swiperList .swiper-slide .swiperImg img {
    width: 100%;
    height: 100%;
    padding: 24px 62px;
    transition: all 0.3s;
    object-fit: cover;
    overflow: hidden;
  }
  
  .productsSwiper .swiperList .swiper-slide .swiperImg img:hover {
    transform: scale(1.1);
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }
  
  .productsSwiper .swiperList .swiper-slide h2 {
    font-family: MiSansVF_Semibold;
    padding: 24px 0 8px;
    font-size: 20px;
    line-height: 30px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .productsSwiper .swiperList .swiper-slide p {
    font-size: 16px;
    color: #666666;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: MiSansVF;
  }
  
  .productsSwiper .swiperList .swiperBut {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-top: 56px;
  }
  
  .swiperList .swiperBut-next,
  .swiperList .swiperBut-prev {
    color: #D8D8D8 !important;
    border: 1px solid #D8D8D8 !important;
    border-radius: 50% !important;
    padding: 14px !important;
    width: 48px !important;
    height: 48px !important;
    background: #fff;
    position: unset !important;
    margin-top: 0 !important;
    margin: 0 20px !important;
  }
  
  .swiperList .swiperBut-next:after,
  .swiperList .swiperBut-prev:after {
    font-size: 20px !important;
    color: #000000 !important;
  }
  @media screen and (max-width: 1660px) {
    .carousel .carousel-control-next {
      right: -56px;
    }
    .carousel .carousel-control-prev {
      left: -56px;
    }
  }
  @media screen and (max-width: 1576px) {
    .carousel .carousel-control-prev,
    .carousel .carousel-control-next {
      background: #FFFFFF;
    }
    .carousel .carousel-control-next {
      right: 36px;
    }
    .carousel .carousel-control-prev {
      left: 36px;
    }
  }
  @media screen and (max-width: 1440px) {
    .cases-detail {
      width: 92%;
    }

    .cases-detail .detail-title {
      font-size: 26px;
    }

    .cases-detail .detail-desc .detail-desc-title {
      font-size: 24px;
    }

    .cases-detail .detail-desc .detail-desc-content {
      font-size: 14px;
    }

    .cases-detail .detail-footer-carousel .detail-footer-carousel-title {
      font-size: 24px;
    }

    .detail-footer-carousel .news-list-box .news-content .news-img {
      width: 300px;
    }

    .detail-footer-carousel .news-list-box .news-content .news-img img {
      width: 100%;
    }
    .carousel .carousel-control-next {
      right: 96px;
    }
    .carousel .carousel-control-prev {
      left: 96px;
    }
  }

  @media screen and (max-width: 992px) {
    .carousel .carousel-control-prev,
    .carousel .carousel-control-next {
      width: 40px!important;
      height: 40px;
      background: #FFFFFF;
    }
    .carousel .carousel-control-next {
      right: 36px;
    }
    .carousel .carousel-control-prev {
      left: 36px;
    }
  }

  @media screen and (max-width: 600px) {
    .headerMobile .header-mobile {
      border-bottom: 1px solid #D8D8D8;
    }
    .detail-footer-carousel .news-list-box .news-content {
      width: 100%;
    }

    .news-controls .prev,
    .next {
      width: 40px;
      height: 40px;
    }
    .swiper {
      margin-top: 24px;
      height: 228px;
    }
    .play-btn {
      width: 32px;
      height: 32px;
      top: 38%;
    }
    .swiper-pagination-bullet {
      width: 6px!important;
      height: 6px!important;
    }
    .cases-detail .detail-desc {
      margin-top: 30px;
    }
    .cases-detail .detail-desc .tag {
      font-size: 12px;
      line-height: 16px;
    }
    .carousel .carousel-control-prev, .carousel .carousel-control-next {
      display: none;
    }
    .swiper .swiper-wrapper .swiper-slide {
      height: 200px;
    }
    .cases-detail .detail-title {
      line-height: 34px;
      margin-top: 108px;
    }

    .cases-detail .detail-desc .detail-desc-title {
      font-size: 22px;
      line-height: 30px;
      margin-top: 8px;
      margin-bottom: 12px;
    }

    .cases-detail .detail-desc .detail-desc-content {
      font-size: 14px;
      line-height: 24px;
    }
    .cases-detail .detail-footer-carousel {
      width: 100%!important;
      margin: 32px 0 0;
    }
    .productsSwiper .swiper .swiper-wrapper .swiper-slide {
      width: 100%;
    }
    .cases-detail .detail-footer-carousel .detail-footer-carousel-title {
      font-size: 22px;
      line-height: 30px;
    }
    .productsSwiper .swiperList .swiper-slide .swiperImg {
      width: 100%;
      height: 256px;
      border-radius: 12px;
    }
    .productsSwiper .swiperList .swiper-slide .swiperImg img {
      padding: 19px 51px;
    }
    .productsSwiper .swiperList .swiper-slide h2 {
      padding-top: 16px;
      font-size: 18px;
      line-height: 24px;
      margin-bottom: 0;
    }
    .productsSwiper .swiperList .swiper-slide p {
      font-size: 14px;
      line-height: 20px;
    }
    .productsSwiper .swiperList .swiperBut {
      margin-top: 32px;
    }
    .productsSwiper {
      padding-bottom: 48px;
    }
    .swiperList .swiperBut-next:after, .swiperList .swiperBut-prev:after {
      font-size: 14px!important;
      font-weight: 800;
    }
  }