body {
  overflow-x: hidden !important;
}
.swiper {
  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
}
.sticky {
  height: 100vh;
  left: 0;
  position: sticky;
  top: 0;
}
 .pro-color {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  transition: all 2s;
  }
  .pro-color img{
  position: absolute;
  width: 40vw;
  left: 30vw;
  top: 30vh;
  }
  .pro-color.silver{
  z-index: 10;
  }
  .pro-color.grey{
  z-index: 9;
  }
  .pro-color.red{
  z-index: 8;
  }
  .pro-color.black{
  z-index: 7;
  }
  .pro-color.blue{
  z-index: 6;
  }
  .pro-color.green{
  z-index: 5;
  }
  .pro-color.purple{
  z-index: 4;
  }
  .banner{
    content-visibility: auto;
    }
    .green{
    background-color: #4f6755;
    }
    .red{
    background-color: #965556;
    }
    .black{
    background-color: #0b0b0b;
    }
    .silver{
    background-color: #bababa;
    }
    .grey{
    background-color: #2c2c2c;
    }
    .purple{
    background-color: #6e6079;
    }
    .blue{
    background-color: #516c84;
    }
    .replacement{
    background-color: #000 !important;
    }
.mr-5vw{
  margin-right: 10vw;
}
.bannerBack{
  width: 45vw;
  height: 22.5vw;
  background: #A9A9A9;
border-radius: 7vw 0px 0px 0px;
}
.swiper-slide img {
  width: 43vw;
}
.Adjustable_text {
  font-size: 2.91667vw;
}
.swiper-button-next,
.swiper-button-prev {
  width: calc(var(--swiper-navigation-size) / 2 * 30);
  margin-top: 0;
}
.banner3-content-img1 {
  width: 25vw !important;
}
.banner3-content-img2 {
  width: 16vw !important;
}
.banner3-content-img3 {
  width: 25vw !important;
}
.banner3-content-img4 {
  width: 25vw !important;
}
.show_mobile {
  display: none;
}
.color-black {
  color: #000;
}
.show_pc,
.show_mobile {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
}
.section_container {
  position: relative;
}
.section_container .section_detail {
  position: absolute;
  color: #393939;
}
.section_container .section_detail h2 {
  font-family: "Manrope-Bold";
  font-weight: normal;
  font-size: 1.91667vw;
  line-height: 1.2;
  margin: 0 auto;
}
.section_container .section_detail p {
  font-family: "Manrope-Regular";
  font-weight: normal;
  font-size: 1.25833vw;
  margin: 2vw 0 0.2vw;
  line-height: 1.3;
}
.section_container .section_bg {
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
}
.section-box {
  height: 46.875vw;
}
.section1 {
  padding-top: 2.66667vw;
  height: 38.0625vw;
  background: linear-gradient(
    15deg,
    #8fccff 0%,
    #e1f8ff 23%,
    #bfe8ff 42%,
    #d7feff 70%
  );
}
.section1 .section_detail {
  position: relative;
  text-align: center;
}
.section1 .section_detail p {
  max-width: 43.75vw;
  margin-left: auto;
  margin-right: auto;
}
.section_detail-img {
  position: absolute;
  top: 0vw;
  right: 26vw;
}
.swiper-title {
  font-size: 1.91667vw;
  font-family: "Manrope";
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 50px 0 20px 0;
}
.section_detail-img img {
  width: 24vw;
}
.mode-back {
  position: relative;
  background-repeat: no-repeat;
  background-size: 76% 100%;
  background: url("../images/pro_vp003/banner2.png");
}
.mode-back .tiger-img {
  position: absolute;
  left: 21vw;
  top: 4vw;
}
.mode-back .tiger-img img {
  width: 25vw;
}
.fade-box-blueBack {
  background: linear-gradient(
    253deg,
    #8fccff 0%,
    #bff0ff 23%,
    #bfe8ff 42%,
    #d7feff 70%,
    #b5d9f9 96%
  );
}
.section1 .pro_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 66.82292vw;
  margin-top: 1.45833vw;
}
.section1 .pro_list .pro_item {
  width: 8.22917vw;
  font-family: "Manrope-Regular";
  font-weight: normal;
  font-size: 0.9375vw;
  text-align: center;
}
.section1 .pro_list .pro_item img {
  width: 100%;
  vertical-align: middle;
}
.section1 .pro_list .pro_item span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.75vw;
}
.section2 {
  height: 35.875vw;
}
.section2 .section_detail {
  color: #fff;
  top: 12.58333vw;
  left: 22.89583vw;
}
.section2 .section_detail p {
  max-width: 28.38542vw;
  font-size:1.25833vw ;
}
.section3 {
  height: 46.875vw;
}
.section3 .section_detail {
  color: #fff;
  top: 6.25vw;
  left: 50.52083vw;
}
.section3 .section_detail p {
  max-width: 25.78125vw;
}
.section4 {
  height: 46.875vw;
}
.section4 .section_detail {
  color: #fff;
  top: 17.8125vw;
  left: 18.38542vw;
}
.section4 .section_detail p {
  max-width: 29.375vw;
}
.section5 {
  height: 30vw;
}
.section5 .section_detail {
  color: #fff;
  top: 10.10417vw;
  left: 18.54167vw;
}
.section5 .section_detail p {
  max-width: 29.375vw;
}
.section7 {
  height: 44.53125vw;
  padding: 5.20833vw 0 0;
  text-align: center;
}
.section7 .section_detail {
  position: relative;
  margin: 0 0 5.20833vw;
}
.section7 .pack_img {
  width: 50vw;
  height: auto;
  margin-left: -5.20833vw;
}
.aside-container {
  display: flex;
  align-items: center;
  justify-content: center;
  /* max-width: 1400px; */
  margin: 0 15vw;
  padding-top: 50px;
}
.aside-container .aside-left h2 {
  font-size: 1.91667vw;
  font-family: "Manrope-Bold";
  color: #000000;
}
.aside-container .aside-left p {
  font-size:1.25833vw;
  font-weight: normal;
  font-family: "Manrope-Regular";
  color: #000000;
  margin: 0.625vw 0 0;
}
.aside-container2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 auto;
  padding-top: 50px;
}
.aside-container2 .aside-left {
  display: flex;
  justify-content: center;
}
.aside-container2 .aside-left .left-main {
  position: relative;
  right: 8vw;
}
.aside-container2 .aside-left h2 {
  font-size: 1.91667vw;
  font-family: "Manrope-Bold";
  color: #000000;
}
.aside-container2 .aside-left p {
  font-size:1.25833vw;
  font-weight: normal;
  font-family: "Manrope-Regular";
  color: #000000;
  margin: 0.625vw 0 0;
}
.aside-container3 {
  display: flex;
  justify-content: center;
  text-align: center;
}
.production_display_container {
  display: flex;
  /* justify-content: center; */
  overflow: hidden;
}
.production_display_container .production_display_con {
  display: flex;
}
.production_display_container
  .production_display_con
  .production_display_sec_1 {
    width: 27.0625vw;
    overflow: hidden;
    height: 20vw;
}
.production_display_container .production_display_sec_2 .production_display_top,
.production_display_container
  .production_display_sec_2
  .production_display_bottom {
  display: flex;
}
.production_display_container
  .production_display_sec_2
  .production_display_top
  .right_display_1 {
    width: 27.0625vw;
    overflow: hidden;
    height: 20vw;
}
.production_display_container
  .production_display_sec_2
  .production_display_top
  .right_display_2 {
    width: 46.135417vw;
    overflow: hidden;
    height: 20vw;
}
.section_banner {
  height: 50vw;
}
.production_display_container .production_display_con .right_display_3 {
  width: 55.0354166vw;
  overflow: hidden;
}
.production_display_container .production_display_con .right_display_4 {
  width: 33.8541vw;
  overflow: hidden;
}
.production_display_bottom {
  display: flex;
}
.production_display_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  transition: all 1s cubic-bezier(0.2, 0.8, 0.58, 1.04) 0s;
}
.production_display_container img:hover {
  transform: scale(1.2);
}
/* product color change */
.section_detail-title {
  font-size: 42px;
  font-family: Manrope;
  font-weight: 400;
  color: #000000;
}
 .color_box {
  display: flex;
  justify-content: center;
  margin-bottom: 1vw;
}
.color_box .color_list {
  display: flex;
  margin: 1vw 0 0;
  align-items: center;
}
 .color_box .color_list .color_item {
  position: relative;
  border-radius: 50%;
  cursor: pointer;
  background: var(--color);
  width: 2vw;
  height: 2vw;
  padding: 0.20833vw;
  background-clip: content-box;
}
 .color_box .color_list .color_item:hover {
  /* transform: scale(1.05); */
}
.spec_img_content {
  margin-top: 1vw;
  font-size: 1.25833vw;
  font-family: "Manrope";
  font-weight: 500;
  color: #000000;
  text-align: center;
}
 .spec_img_box {
  width: 100%;
  height: 13vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
 .spec_img_box .active {
  display: block;
}
 .spec_img_box img {
  display: none;
  width:36vw;
  height: 10vw;
  /* transform: rotate(90deg); */
  /* -webkit-animation: fadeinout 3s linear forwards;
  animation: fadeinout 3s linear forwards; */
}
@-webkit-keyframes fadeinout {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.aside-container3 .aside-main h2 {
  font-size: 1.91667vw;
  font-family: "Manrope-Bold";
  color: #000000;
  margin-top: 50px;
  margin-bottom: 30px;
}
.standard-container {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 30vw;
  background: url("../images/pro_vp003/banner3.png");
  /* display: flex; */
  align-items: center;
}
.color_item_active {
  box-shadow: 0px 0px 5px 5px rgb(0 0 0 / 13%);
  width: 1.6vw !important;
  height: 1.6vw !important;
}
.aside-container3 h2{
  font-size:2.91667vw
}

@media screen and (max-width: 992px) {
  .section_banner{
    height: 127vw;
  }
  .mr-5vw {
    margin-right: 5vw;
  }
  .aside-container {
    /* padding: 4vw; */
  }
  .swiper-slide img {
    width: 80vw;
  }
  .swiper-title {
    font-size: 5vw;
    font-family: "Manrope";
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    padding: 5vw 0 2vw 0;
  }
  .swiper-button-next,
.swiper-button-prev {
  width: calc(var(--swiper-navigation-size) / 15 * 30);
  margin-top: 0;
}
  .aside-main img  {
    width: 80vw !important;
  }
  .aside-container3 h2{
    font-size:4.91667vw
  }
  .aside-container3 .aside-main h2 {
    font-size:3.91667vw
  }
  .spec_img_content {
    margin-top: 1vw;
    font-size: 2.6vw;
    font-family: "Manrope";
    font-weight: 500;
    color: #000000;
    text-align: center;
  }
  .aside-mobile-container2 {
    margin-top: 5vw;
  }
  .mobile-aside-container {
    display:flex;
    justify-content: flex-start;
    margin: 0 auto !important;
  }
  .aside-mobile-container2 h2 {
    font-size: 6vw !important;
    font-family: "Manrope";
    font-weight: bold;
    color: #000000;
    text-align: center;
    margin-bottom: 2vw;
  }
  .aside-mobile-container2 p {
    font-size: 3.25833vw !important;
    font-family: "Manrope";
    color: #000000;
    text-align: center;
    margin-bottom: 2vw;
  }
  .aside-container .aside-left h2 {
    font-size:5vw;
  }
  .aside-container .aside-left p {
    font-size:3vw;
  }
  .spec_box .spec_img_box img {
    width: 55vw;
    height: 16vw;
  }
  .spec_box .spec_img_box {
    margin: 5vw 0;
  }
  .section_detail-content-img img {
    width: 40vw;
  }
  .banner3-content-img1 {
    width: 44vw !important;
  }
  .banner3-content-img2 {
    width: 36vw !important;
  }
  .banner3-content-img3 {
    width: 47vw !important;
  }
  .banner3-content-img4 {
    width: 33vw !important;
  }
  .mode-back .tiger-img {
    position: absolute;
    left: 0vw;
    top: 3vw;
  }
  .mode-back .tiger-img img {
    width: 60vw;
  }
  .show_mobile {
    display: block;
  }
  .section_detail-img {
    position: absolute;
    top:0vw;
    right: 0vw;
  }
  .section_detail-img img {
    width: 80vw;
  }
  .show_pc {
    display: none;
  }
  .section_container .section_detail h2 {
    font-size: 5.46667vw;
    line-height: 1;
    margin: 3vw 0;
  }
  .section_container .section_detail p {
    font-size: 2.73333vw;
  }
  .section-box {
    height: 120vw;
  }
  .section1 {
    height: 70vw;
  }
  .section1 .section_detail p {
    max-width: 72vw;
  }
  .section1 .pro_list {
    width: 85.33333vw;
    margin-top: 4.26667vw;
  }
  .section1 .pro_list .pro_item {
    width: 21.06667vw;
  }
  .section1 .pro_list .pro_item span {
    height: 10.13333vw;
    font-size: 2.4vw;
  }
  .section2 .section_detail {
    width: 100%;
    height: 100%;
    padding: 14.46667vw 5vw 11.46667vw;
    top: 0;
    left: 0;
  }
  .section_container .section_detail p {
    max-width: 74.66667vw;
    margin-top: 0;
  }
  .section3 .section_detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    top: 6.66667vw;
    left: 0;
    text-align: center;
  }
  .section3 .section_detail p {
    max-width: 84.13333vw;
    margin-top: 2.4vw;
  }
  .section4 {
    height: 160.13333vw;
  }
  .section4 .section_detail {
    top: auto;
    left: 0;
    bottom: 7.46667vw;
    width: 100%;
    padding-left: 4.53333vw;
  }
  .section4 .section_detail h2 {
    line-height: 1.2;
  }
  .section4 .section_detail p {
    max-width: 74vw;
    margin-top: 2.66667vw;
  }
  .section5 {
    height: 60vw;
  }
  .section5 .section_detail {
    top: auto;
    left: 0;
    bottom: 8.53333vw;
    width: 100%;
    padding-left: 4.53333vw;
  }
  .section5 .section_detail p {
    max-width: 74vw;
    margin-top: 2.66667vw;
  }
  .section7 {
    height: 88vw;
    padding-top: 8.93333vw;
  }
  .section7 .section_detail {
    margin-bottom: 16vw;
  }
  .section7 .pack_img {
    margin-left: -5%;
    width: 100%;
  }
.color_list .color_item {
    margin-right: 2vw;
    width: 5vw;
    height: 5vw;
  }
  .color_item_active {
    width: 2.6vw !important;
    height: 2.6vw !important;
  }
  .section_container .section_detail p {
    margin-bottom: 3vw;
  }
  .aside-container3 {
    margin-bottom: 7vw;
  }
}
.banner4-content-img1 {
  width: 40vw;
    position: relative;
    left: -1vw;
}
@media screen and (max-width: 1400px) {
  .aside-container {
    margin: 0 1vw;
    /* max-width: 1200px; */
    /* padding: 4vw; */
  }
  .aside-container .aside-left p {
    /* font-size: 2.3vw; */
  }
  /* .aside-container2 .aside-left .left-main {
    right: 5vw;
  } */
}
@media screen and (max-width: 480px) {
  .color_box .color_list .color_item {
    width: 4vw;
    height: 4vw;
  }
  .aside-container3 .aside-main h2 {
    font-size: 4.91667vw;
  }
  .banner3-content-img1 {
    width: 39vw;
  }
  .section_detail-content-img img {
    width: 24vw;
  }
  .section_container .section_detail h2 {
    font-size: 6vw;
  }
  .section_container .section_detail p {
    font-size: 4vw;
  }
  .section1 .pro_list .pro_item span {
    font-size: 10px;
    min-height: 4em;
    line-height: 1.1;
  }
}