div.content-item {
  display: none;
}
div.content-item.active {
  display: flex;
}

.device-list {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: -2.6041vw 0px 0px -2.3958vw;
}
@media screen and (max-width: 750px) {
  .device-list {
    flex-direction: column;
    margin: 0;
  }
}
.device-list .device-item {
  width: 23.9583vw;
  margin: 2.6041vw 0px 0px 2.3958vw;
}
@media screen and (max-width: 750px) {
  .device-list .device-item {
    width: 100%;
    margin: 0;
    margin-bottom: 7.4666vw;
  }
}
.device-list .device-item .diamond-title {
  font-size: 1.0416vw;
  line-height: 1.5;
  color: #262728;
  height: 2vw;
  margin-bottom: 1.0416vw;
  font-weight: bold;
  position: relative;
  padding-left: 1.0416vw;
}
@media screen and (max-width: 750px) {
  .device-list .device-item .diamond-title {
    font-size: 3.7333vw;
    margin-bottom: 2.6666vw;
  }
}
.device-list .device-item .diamond-title::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 0.4166vw;
  height: 0.4166vw;
  background: #323232;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center center;
}
@media screen and (max-width: 750px) {
  .device-list .device-item .diamond-title {
    padding-left: 4.4vw;
  }
  .device-list .device-item .diamond-title::before {
    width: 2.1333vw;
    height: 2.1333vw;
  }
}
.device-list .device-item .pic {
  width: 100%;
  border-radius: 0.2083vw;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  .device-list .device-item .pic {
    border-radius: 0.8vw;
  }
}
.device-list .device-item .pic img {
  display: block;
  width: 100%;
  transition: 0.3s all linear;
}
@media screen and (min-width: 751px) {
  .device-list .device-item:hover .pic img {
    transform: scale(1.1);
  }
}

.int-wrap {
  flex-direction: column;
}
.int-wrap .int-pic-wrap {
  position: relative;
  width: 100%;
}
.int-wrap .int-pic-wrap .int-pic-title {
  font-size: 1.0416vw;
  line-height: 1.5;
  color: #262728;
  margin-bottom: 1.0416vw;
  font-weight: bold;
  position: relative;
  padding-left: 1.0416vw;
}
@media screen and (max-width: 750px) {
  .int-wrap .int-pic-wrap .int-pic-title {
    font-size: 3.7333vw;
    margin-bottom: 2.6666vw;
  }
}
.int-wrap .int-pic-wrap .int-pic-title::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 0.4166vw;
  height: 0.4166vw;
  background: #323232;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center center;
}
@media screen and (max-width: 750px) {
  .int-wrap .int-pic-wrap .int-pic-title {
    padding-left: 4.4vw;
  }
  .int-wrap .int-pic-wrap .int-pic-title::before {
    width: 2.1333vw;
    height: 2.1333vw;
  }
}
.int-wrap .int-pic-wrap .swiper-container {
  width: 44.7916vw;
  margin: 0 auto;
}
.int-wrap .int-pic-wrap .swiper-container .swiper-slide {
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 0.4166vw;
  padding: 1.0416vw;
  background: linear-gradient(180deg, #F1F2F5 0%, #FFFFFF 100%);
  border: 0.052vw solid #E2E2E2;
  height: auto;
}
@media screen and (max-width: 750px) {
  .int-wrap .int-pic-wrap .swiper-container .swiper-slide {
    width: 53.3333vw;
    border-radius: 1.0666vw;
    padding: 2.6666vw;
  }
}
.int-wrap .int-pic-wrap .swiper-container .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 750px) {
  .int-wrap .int-pic-wrap .swiper-container {
    width: 100%;
    margin-bottom: 4vw;
  }
}
@media screen and (max-width: 750px) {
  .int-wrap .int-pic-wrap .swiper-btn-list {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-prev,
.int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-next {
  width: 2.6041vw;
  height: 1.8229vw;
  top: auto;
  left: 0;
  bottom: 9.4687vw;
  margin: 0;
  background: url("../img/swiper-arr.png") no-repeat;
  background-size: 100% 100%;
  opacity: 0.3;
  transition: 0.3s all ease-in;
}
@media screen and (min-width: 751px) {
  .int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-prev:hover,
  .int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-next:hover {
    opacity: 1;
  }
}
@media screen and (max-width: 750px) {
  .int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-prev,
  .int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-next {
    position: static;
    width: 10.6666vw;
    height: 7.4666vw;
    opacity: 1;
  }
  .int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-prev.swiper-button-disabled,
  .int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
  }
}
.int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-next {
  transform: rotate(180deg);
  left: auto;
  right: 0;
}
@media screen and (max-width: 750px) {
  .int-wrap .int-pic-wrap .swiper-btn-list .swiper-button-next {
    margin-left: 2.6666vw;
  }
}