.index-banner .img-mb {
  display: none;
}
.index-banner .img-pc {
  display: block;
}
.case {
  background-color: #f4f4f4;
}
.case .case-content {
  margin: 0 auto;
  position: relative;
}
.case .case-content .swiper-button-next,
.case .case-content .swiper-button-prev {
  top: 55%;
  background-size: 12px;
  width: 55px;
  height: 55px;
  background-color: #646464;
  border-radius: 50%;
}
.case .case-content .swiper-button-next:hover,
.case .case-content .swiper-button-prev:hover {
  background-color: #0073f4;
}
.case .case-content .swiper-button-next:focus,
.case .case-content .swiper-button-prev:focus {
  outline: none;
}
.case .case-content .swiper-button-prev,
.case .case-content .swiper-container-rtl .swiper-button-next {
  left: 13%;
}
.case .case-content .swiper-button-next,
.case .case-content .swiper-container-rtl .swiper-button-prev {
  right: 13%;
}
.case .title {
  margin-bottom: 0;
}
.case .title h3 {
  font-size: 36px;
  color: #000;
}
.case .title h3 span {
  color: #0073f4;
  vertical-align: middle;
}
.case .title p {
  font-size: 16px;
  line-height: 45px;
  color: #777;
}
.case .swiper-content {
  width: 1270px;
  margin: 0 auto;
}
.case .swiper-content .swiper-container {
  padding-top: 140px;
  padding-bottom: 200px;
}
.case .swiper-content .swiper-slide {
  background-color: #fff;
}
.case .swiper-content .swiper-slide-prev {
  transform: translateX(26%) !important;
}
.case .swiper-content .swiper-slide-next {
  transform: translateX(-26%) !important;
}
.case .swiper-content .grid {
  padding: 20px;
  position: relative;
}
.case .swiper-content .grid .top {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.5);
  opacity: 0;
}
.case .swiper-content .grid .top p {
  width: 155px;
  font-size: 18px;
  line-height: 30px;
  color: #777;
  margin: 0 10px;
  text-align: center;
}
.case .swiper-content .grid .top::before,
.case .swiper-content .grid .top::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background-color: #777;
}
.case .swiper-content .grid .img-box .before {
  margin-right: 10px;
}
.case .swiper-content .grid .img-box .before .date {
  background-color: #000;
}
.case .swiper-content .grid .img-box .after .date {
  background-color: #0368ff;
}
.case .swiper-content .grid .img-box .before,
.case .swiper-content .grid .img-box .after {
  position: relative;
  float: left;
  width: calc(50% - 5px);
  height: 221px;
}
.case .swiper-content .grid .img-box .before img,
.case .swiper-content .grid .img-box .after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case .swiper-content .grid .img-box .before .date,
.case .swiper-content .grid .img-box .after .date {
  width: 180px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 16px;
  line-height: 38px;
  padding: 0 10px;
  color: #fff;
  transform: scale(0.5) translateX(-50%) translateY(-50%);
}
.case .swiper-content .grid .img-box .before .date span,
.case .swiper-content .grid .img-box .after .date span {
  margin-right: 5px;
}
.case .swiper-content .grid .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
}
.case .swiper-content .swiper-slide-active {
  transform: scale(1.5) !important;
  z-index: 3;
}
.case .swiper-content .swiper-slide-active .grid {
  padding: 15px;
}
.case .swiper-content .swiper-slide-active .grid .top {
  transform: scale(0.5);
  opacity: 1;
}
.case .swiper-content .swiper-slide-active .img-box .before .date,
.case .swiper-content .swiper-slide-active .img-box .after .date {
  transform: scale(0.5) translateX(-50%) translateY(-50%);
}
.case .swiper-content .swiper-slide-active .grid .mask {
  background-color: transparent;
  display: none;
}
.case .swiper-content .swiper-container-horizontal > .swiper-pagination-bullets,
.case .swiper-content .swiper-pagination-custom,
.case .swiper-content .swiper-pagination-fraction {
  bottom: 55px;
}
.case .swiper-content .swiper-pagination-bullet {
  background-color: #e2e2e2;
  opacity: 1;
}
.case .swiper-content .swiper-pagination-bullet-active {
  background-color: #acacac;
}
@media (max-width: 1440px) {
  .case .swiper-content {
    width: 100%;
  }
  .case .title h3 {
    font-size: 30px;
  }
  .case .swiper-content {
    width: 1080px;
  }
  .case .case-content .swiper-button-prev,
  .case .case-content .swiper-container-rtl .swiper-button-next {
    left: 2%;
  }
  .case .case-content .swiper-button-next,
  .case .case-content .swiper-container-rtl .swiper-button-prev {
    right: 2%;
  }
  .case .case-content .swiper-button-next,
  .case .case-content .swiper-button-prev {
    width: 35px;
    height: 35px;
    background-size: 10px;
  }
}
@media (max-width: 1200px) {
  .case .swiper-content {
    width: 991px;
  }
  .case .swiper-content .swiper-container {
    padding-top: 170px;
    padding-bottom: 230px;
  }
  .case .swiper-content .swiper-container-horizontal > .swiper-pagination-bullets,
  .case .swiper-content .swiper-pagination-custom,
  .case .swiper-content .swiper-pagination-fraction {
    bottom: 5%;
  }
}
@media (max-width: 1080px) {
  .case .swiper-content .swiper-container {
    padding-top: 115px;
    padding-bottom: 170px;
  }
  .case .case-content .swiper-button-next,
  .case .case-content .swiper-button-prev {
    display: none;
  }
  .case .title h3 {
    font-size: 28px;
  }
  .case .title p {
    font-size: 14px;
    line-height: 36px;
  }
  .case .swiper-content {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .case .swiper-content .swiper-slide-active,
  .case .swiper-content .swiper-slide-active .grid .top {
    transform: scale(1);
  }
  .case .swiper-content .swiper-slide .grid .top {
    margin-bottom: 15px;
  }
  .case .swiper-content .swiper-slide-active .img-box .before .date,
  .case .swiper-content .swiper-slide-active .img-box .after .date {
    transform: scale(1);
  }
  .case .swiper-content .swiper-slide .img-box .before .date,
  .case .swiper-content .swiper-slide .img-box .after .date {
    font-size: 14px;
    line-height: 34px;
    width: 155px;
    transform: scale(1);
  }
  .case .swiper-content .grid .top p {
    font-size: 16px;
    margin: 0 5px;
  }
  .case .swiper-content .swiper-container {
    padding-top: 30px;
    padding-bottom: 45px;
  }
  .case .title h3 {
    font-size: 24px;
  }
  .index-banner .img-mb {
    display: block;
  }
  .index-banner .img-pc {
    display: none;
  }
  .case .swiper-content .grid .top {
    transform: scale(1);
  }
  .case .swiper-content .swiper-slide-active {
    transform: scale(1) !important;
  }
  .case .swiper-content .swiper-slide-active .grid {
    padding: 20px;
  }
  .case .swiper-content .grid .img-box .before,
  .case .swiper-content .grid .img-box .after {
    height: 322px;
  }
  .case .swiper-content .grid .mask {
    display: none;
  }
}
@media (max-width: 650px) {
  .case .swiper-content .grid .img-box .before,
  .case .swiper-content .grid .img-box .after {
    height: 260px;
  }
}
@media (max-width: 550px) {
  .case .swiper-content .grid .img-box .before,
  .case .swiper-content .grid .img-box .after {
    height: 230px;
  }
  .case .swiper-content .swiper-slide .img-box .before .date,
  .case .swiper-content .swiper-slide .img-box .after .date {
    font-size: 12px;
    width: 130px;
    padding: 0;
  }
  .case .swiper-content .grid .img-box .before {
    margin-bottom: 10px;
  }
}
@media (max-width: 400px) {
  .case .swiper-content .grid .img-box .before,
  .case .swiper-content .grid .img-box .after {
    height: 159px;
  }
}