* {
  user-select: none;
}
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
body .shoppingImg {
  background-image: url(img/u600.png);
  position: relative;
}

.bg-color {
  background-image: url(img/u438.svg);
  background-image: linear-gradient(#a3f5f7ee, #ffffff99);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 102% 108%;
}

body .shoppingImg .container h2 {
  font-size: 36px;
}

.control-img {
  width: 85%;
  padding: 16% 0;
  position: relative;
  margin: 0 auto;
}

.control-img img {
  width: 100%;
  height: 100%;
}

.technology {
  position: absolute;
  width: 18%;
  height: auto;
  border-radius: 50%;
}
.technology p {
  font-size: 14px;
  padding-top: 10px;
  text-align: center;
}

.technology-bg {
  border-radius: 50%;
  cursor: pointer;
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px 4px 0px #999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.technology-bg img {
  width: 100%;
  height: auto;
}

.technology1 {
  top: 15%;
  left: 9%;
}

.technology-bg1 {
  background: rgb(2, 120, 204);
}

.technology2 {
  top: 7%;
  left: 41%;
}

.technology-bg2 {
  background: rgb(48, 213, 87);
}

.technology3 {
  top: 16%;
  right: 7%;
}

.technology-bg3 {
  background: rgb(216, 65, 147);
}

.technology4 {
  right: -9%;
  top: 37%;
}

.technology-bg4 {
  background: rgb(154, 65, 216);
}

.technology5 {
  top: 63%;
  right: -3%;
}

.technology-bg5 {
  background: rgb(129, 211, 248);
}

.technology6 {
  top: 77%;
  left: 59%;
}

.technology-bg6 {
  background: rgb(215, 215, 215);
}

.technology7 {
  top: 77%;
  left: 24%;
}

.technology-bg7 {
  background: rgb(0, 0, 191);
}

.technology8 {
  top: 63%;
  left: -3%;
}

.technology-bg8 {
  background: rgb(132, 0, 255);
}

.technology9 {
  top: 38%;
  left: -9%;
}

.technology-bg9 {
  background: rgb(213, 65, 216);
}

.technology10 {
  width: 45%;
  height: auto;
  background: rgb(242, 242, 242);
  top: calc(50% - 15%);
  left: calc(50% - 22%);
}

.technology10 img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.technology10 p {
  font-size: 16px;
  text-align: center;
  padding-top: 10px;
}

.technology-img img {
  width: 80%;
  height: auto;
}

.control-right {
  margin-left: auto;
  width: 90%;
  height: 89%;
  background-image: url(img/u528.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: end;
  align-items: center;
}

.control-right div {
  padding-right: 30px;
}
.control-right h5 {
  font-size:24px;
}
.control-right p {
  font-size: 16px;
}

.control-right-hover {
  background: #81d3f8;
  position: absolute;
  width: 90%;
  height: 89%;
  right: 0;
  top: 6%;
  box-shadow: -2px 1px 3px 0px #999;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
  display: none;
}
.control-right-hover p {
  color: white;
  font-size: 18px;
  line-height: 30px;
}
.control-right-hover p.title {
  font-size: 28px;
  color: #02A7F0;
  padding: 10px 0;
}

.mt {
  margin-top: 50px;
}

.mb {
  margin-bottom: 50px;
}

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

.introduce h5 {
  font-size: 36px;
  text-align: center
}

.img-swiper {
  background: #f2f4f5;
  border-radius: 20px;
  padding: 20px 20px 0;
}

.swiper {
  width: 100%;
  background: white;
  border-radius: 16px;
}

.control {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3%;
}

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

.control .swiper-pagination-fraction {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  color: #666;
}

.swiper-control {
  position: relative;
  width: 150px;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev, .swiper-button-prev, .swiper-rtl .swiper-button-next {
  top: calc(50% + 5px);
  border: 1px solid #666;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.swiper-button-next {
  right: 0;
  z-index: 12;
}

.swiper-button-prev {
  left: 0;
  z-index: 12;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 20px;
  color: #666;
}

.enlarge {
  color: #999;
  font-size: 24px;
  cursor: pointer;
}

.img-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
  cursor: pointer;
  display: none;
}

.img-modal img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 60%;
  height: auto;
  background: white;
  border-radius: 24px;
  padding: 22px;
}

@media screen and (max-width: 991px) {
  body .shoppingImg .container h2 {
    font-size: 20px;
  }
  .introduce h5 {
    font-size: 16px;
  }
  .mt {
    margin-top: 20px;
  }
  .mb {
    margin-bottom: 20px;
  }
}

.experience-sm, .experience-md {
  display: none !important;
}

@media (max-width:975px) {
  .experience-sm {
    display: flex !important
  }
  .technology p {
    font-size: 12px;
  }
  .control-right div {
    padding-right: 30px;
  }
  .control-right h5 {
    font-size:18px;
  }
  .control-right p {
    font-size: 16px;
  }
  .control-right {
    display: flex;
    justify-content: center;
    background: none;
  }
  .control-right-hover {
    position: initial;
    width: 100%;
    height: auto;
  }
  .control-right-hover p {
    font-size: 14px;
    line-height: 22px;
  }
  .control-right-hover p.title {
    font-size: 18px;
    padding: 6px 0;
  }
  .swiper-button-next, .swiper-rtl .swiper-button-prev, .swiper-button-prev, .swiper-rtl .swiper-button-next {
    top: calc(50% + 10px);
    width: 24px;
    height: 24px;
  }
  .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 14px;
  }
  .enlarge {
    font-size: 14px;
  }
  .img-modal img {
    width: 86%;
    border-radius: 10px;
  }
}

@media (min-width:976px) {
  .experience-md {
    display: flex !important
  }
}