.swiper-container {
  position: relative;
  width: 100%;
  /* height: 890rem; */
}

.swiper01 .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 分页控件样式 */
.swiper01 .swiper-pagination {
  position: absolute;
  bottom: 50rem;
  left: 0;
  right: 0;
  text-align: center;
}

.swiper01 .swiper-pagination-bullet {
  width: 12rem;
  height: 12rem;
  background: rgba(183, 84, 253, 0.56);
  border-radius: 6rem;
}

.swiper01 .swiper-pagination-bullet-active {
  width: 34rem;
  height: 12rem;
  background: #B754FD;
  border-radius: 6rem;
}


.swiper01 .swiper-button-next {
  right: 10px;
}

.swiper01 .swiper-button-prev {
  left: 10px;
}

.i-aboutBox,
.i-serBox {
  padding-top: 80rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.abBgr {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 1168rem;
  height: 829rem;
}

.abBgl {
  position: absolute;
  top: 371rem;
  left: 0;
  z-index: -1;
  width: 500rem;
  height: 800rem;
}

.wprBgr {
  position: absolute;
  top: 517rem;
  right: 0;
  z-index: -1;
  width: 524rem;
  height: 800rem;
}

.serBgr {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 498rem;
  height: 524rem;
}

.wBg {
  position: absolute;
  width: 100%;
  bottom: -735rem;
  left: 0;
  z-index: -1;
}

.i-aboutBox img {
  cursor: pointer;
}

.buttonTit,
.buttonTit1 {
  width: 100%;
  color: #fff;
  position: absolute;
  text-align: center;
  font-size: 32rem;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.buttonTit1 {
  top: 68%;
}

.i-aboutBox-tit-top {
  color: #333;
  font-size: 40rem;
  line-height: 70rem;
  margin-top: 57rem;
  text-align: center;
  margin-bottom: 30rem;
}

.i-aboutBox-tit-con {
  font-family: Cherry Cream Soda;
  color: #333;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
}

.i-wpr {
  padding-top: 60rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.swiper-container2 {
  width: 100%;
  height: 100%;
}

.swiper.mySwiper02 {
  display: none;
  padding-bottom: 63rem;
  width: 100%;
  height: 100%;
}

.mySwiper02 .swiper-slide {
  width: 509rem !important;
  height: 635rem !important;
  margin-right: 36rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 2px solid #FE4947; */
}

.mySwiper02 .swiper-slide img {
  width: 465rem;
  height: 370rem;
  object-fit: cover;
}

.mySwiper02 .swiper-slide .tit {
  font-size: 32rem;
  color: #333;
  width: 100%;
  text-align: center;
  margin-top: 62rem;
}

/* 分页控件样式 */
.mySwiper02 .swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

.mySwiper02 .swiper-pagination-bullet {
  width: 18rem;
  height: 18rem;
  background: rgba(254, 73, 71, 0.3);
  border-radius: 12rem;
}

.mySwiper02 .swiper-pagination-bullet-active {
  width: 61rem;
  height: 18rem;
  background: #FE4947;
  border-radius: 12rem;
}


.mySwiper02 .swiper-button-next {
  right: 10px;
}

.mySwiper02 .swiper-button-prev {
  left: 10px;
}

/* 给左右相邻的 slide 加上背景图 */
.mySwiper02 .swiper-slide.left,
.mySwiper02 .swiper-slide.right,
.mySwiper02 .swiper-slide.active {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 选中项的样式 */
.mySwiper02 .swiper-slide.active {
  height: 584rem !important;
  margin-top: 51rem;
  z-index: 1;
  /* 保证当前滑块位于顶部 */
}

.mySwiper02 .swiper-slide.left {
  padding-top: 85rem;
  background-image: url('../imgs/left-bg.png');
  /* 左侧滑块的背景图 */
}

.mySwiper02 .swiper-slide.right {
  padding-top: 85rem;
  background-image: url('../imgs/right-bg.png');
  /* 右侧滑块的背景图 */
}

.mySwiper02 .swiper-slide.active {
  padding-top: 34rem;
  background-image: url('../imgs/act-bg.png');
  /* 激活滑块的背景图 */
}


.swiper3.mySwiper03 {
  margin-top: 73rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.mySwiper03 .swiper-slide {
  display: flex;
}

.mySwiper03 .swiper-slide .rbox {
  width: 859rem;
  height: 520rem;
  border-radius: 41rem;
  border: 7rem solid #FFFFFF;
  overflow: hidden;
  margin-left: 57rem;
}

.mySwiper03 .swiper-slide .lbox {
  padding-top: 104rem;
width: calc(100% - 916rem);
}

.mySwiper03 .swiper-slide .lbox-title {
  font-size: 36rem;
  color: #333;
  margin-bottom: 40rem;
}

.mySwiper03 .swiper-slide .lbox-subhead {
  font-family: Cherry Cream Soda;
  font-size: 16rem;
  color: #333;
  line-height: 32rem;
}

.mySwiper03 .swiper-button-next,
.mySwiper03 .swiper-button-prev {
  width: 44rem;
  height: 44rem;
  background: #B754FD;
  border-radius: 50%;
  border: 1rem solid #FFFFFF;
}

.mySwiper03 .swiper-button-prev {
  left: 0;
  top: initial;
  bottom: 111rem;
}

.mySwiper03 .swiper-button-next {
  left: 70rem;
  top: initial;
  bottom: 111rem;
}

.mySwiper03 .swiper-button-next:after,
.mySwiper03 .swiper-button-prev:after {
  content: '';
}

.mySwiper03 .swiper-button-next.swiper-button-disabled,
.mySwiper03 .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
  background: #fff;
  border: 1rem solid #B754FD;
}



.mySwiper03 .swiper-pagination-fraction {
  font-family: Cherry Cream Soda;
  font-weight: 400;
  width: auto;
  left: 150rem;
  bottom: 122rem;
  font-size: 16rem !important;
  color: #B754FD;
}

.mySwiper03 .swiper-pagination-current,
.mySwiper03 .swiper-pagination-total {
  font-size: 16rem !important;
}

.i-serbox-bot {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 95rem;
  padding-bottom: 65rem;
  position: relative;
}

.i-serbox-bot-item {
  width: 467rem;
  height: 211rem;
  background: #FE4947;
  box-shadow: 0px 0px 33rem 0px rgba(0, 0, 0, 0.1);
  border-radius: 53rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 8rem solid #FFFFFF;
  transition: transform 0.3s ease;
}

.i-serbox-bot-item:hover {
  transform: scale(1.1) rotate(-2.1deg) !important;
}

.i-serbox-bot-item:nth-child(1) {
  transform: rotate(-2.1deg);
}

.i-serbox-bot-item:nth-child(2) {
  background: #B754FD;
}

.i-serbox-bot-item:nth-child(3) {
  background: #FDA949;
  transform: rotate(2.1deg);
}

.i-serbox-bot-item .itemImg {
  width: 66rem;
  height: 66rem;
  margin-bottom: 22rem;
}

.i-serbox-bot-item .itemTit {
  font-size: 24rem;
  color: #FFFFFF;
}

.i-whyBox {
  padding-top: 85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.whyBox-items {
  display: flex;
  gap: 28rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.whyBox-item {
  width: 379rem;
  height: 493rem;
  background: #FFFFFF;
  margin-top: 30rem;
  border: 3rem solid #FE4947;
  padding-top: 23rem;
  border-radius: 24rem;
}

.whyBox-itemBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 18rem;
  padding-right: 18rem;

}

.smallBox {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}


.whyBox-item:nth-child(1),
.whyBox-item:nth-child(4),
.whyBox-item:nth-child(6) {
  transform: skewY(3deg);
}

.whyBox-item:nth-child(3),
.whyBox-item:nth-child(5),
.whyBox-item:nth-child(7) {
  transform: skewY(-3deg);
}

.whyBox-item:nth-child(1) .whyBox-itemBox,
.whyBox-item:nth-child(4) .whyBox-itemBox,
.whyBox-item:nth-child(6) .whyBox-itemBox {
  transform: skewY(-3deg);
}

.whyBox-item:nth-child(3) .whyBox-itemBox,
.whyBox-item:nth-child(5) .whyBox-itemBox,
.whyBox-item:nth-child(7) .whyBox-itemBox {
  transform: skewY(3deg);
}

.whyBox-item:nth-child(1) .w-i-titBox {
  width: 283rem;
}

.whyBox-item:nth-child(4) .w-i-titBox {
  width: 294rem;
  height: 70rem;
  text-align: center;
  margin-top: -38rem;
}

.whyBox-item:nth-child(6) .w-i-titBox {
  width: 301rem;
}

.why-item-img {
  width: 343rem;
  height: 300rem;
  overflow: hidden;
}



.why-item-img:hover img {
  transform: scale(1.1);
}

.whyBox-item:nth-child(2) {
  width: 786rem;
  height: 474rem;
}

.whyBox-item:nth-child(2) .why-item-img {
  width: 741rem;
}



.why-item-img img {
  z-index: -1;
  transition: transform 0.3s ease;
  width: 100%;
  height: 100%;
}

.w-i-titBox {
  width: 253rem;
  height: 51rem;
  background: #FE4947;
  border-radius: 15rem;
  border: 2rem solid #FFFFFF;
  color: #FFFFFF;
  font-size: 24rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -28rem;
  position: relative;
  z-index: 3;
}

.w-i-tit {
  font-size: 16px;
  color: #333;
  width: 100%;
  text-align: center;
  margin-top: 30rem;
}

.contactBox {
  /* width: 100%; */
  height: 236rem;
  background: #FFFFFF;
  box-shadow: 0px 4rem 27rem 0px rgba(0, 0, 0, 0.05);
  border-radius: 30rem;
  border: 3rem solid #B754FD;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 80rem;
  margin-bottom: 120rem;
}

.contactBox .tit {
  font-size: 24px;
  color: #B754FD;
  line-height: 28px;
}

.contactBox .conUsBox {
  transition: transform 0.3s ease;
  width: 198px;
  height: 59px;
  background: #B754FD;
  box-shadow: 0px 4px 9px 0px rgba(183, 84, 253, 0.31);
  border-radius: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 34rem;
}

.contactBox .conUsBoxs {
width: 240px;
}

.contactBox .conUsBox img {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.contactBox .conUsBox span {
  font-size: 16px;
  color: #FFFFFF;
}

.conUsBox:hover {
  transform: scale(1.1);
}


@media screen and (max-width: 1280px) {
  .i-aboutBox-tit-top {
    font-size: 30px;
  }

  .i-aboutBox-tit-con {
    font-size: 14px;
    line-height: 32px;
  }
}

@media screen and (max-width: 1200px) {
  .whyBox-item {
    width: 100% !important;
    transform: skewY(0) !important;
    padding: 23rem 0;
    height: auto !important;
  }

  .w-i-titBox {
    width: 253px !important;
    height: 51px;
    border-radius: 15px;
    font-size: 24px;
    margin-top: -28px;
  }

  .whyBox-item:nth-child(4) .w-i-titBox {
    height: 70px !important;
  }

  .whyBox-itemBox {
    flex-direction: row-reverse;
    transform: skewY(0) !important;
    justify-content: space-between;
  }

  .smallBox {
    align-items: flex-start;
  }

  .w-i-tit {
    text-align: left;
  }
}


@media screen and (max-width: 950px) {
  .contactBox .tit {
    font-size: 32rem;
    line-height: 28rem;
  }

  .contactBox {
    padding: 0 30rem;
  }

  .contactBox .conUsBox {

    width: 198rem;
    height: 59rem;
    border-radius: 17rem;
  }
.contactBox .conUsBoxs {
width: 296rem;
}

  .contactBox .conUsBox span {
    font-size: 20rem !important;
  }

  .contactBox .conUsBox img {
    width: 32rem;
    height: 32rem;
    margin-right: 10rem;
  }
}

@media screen and (max-width: 750px) {
  .why-item-img {
    height: auto;
  }
  .w-i-titBox {
    width: 253rem !important;
    height: 51rem;
    border-radius: 15rem;
    font-size: 24rem;
    margin-top: -28rem;
  }
  .w-i-tit {
    font-size: 24rem;
  }

  .whyBox-item:nth-child(4) .w-i-titBox {
    height: 70rem !important;
  }
  .mySwiper02 .swiper-slide {
    width: 100% !important;
  }

  .mySwiper03 .swiper-slide {
    flex-direction: column-reverse;
  }
.mySwiper03 .swiper-slide .lbox {
    width: 100% !important;
  }

  .mySwiper03 .swiper-slide .rbox {
    width: 100%;
    margin-left: 0;
  }

  .mySwiper03 .swiper-slide .lbox-title {
    margin-bottom: 16rem;
  }

  .mySwiper03 .swiper-button-prev,
  .mySwiper03 .swiper-button-next {
    bottom: 150rem;
  }

  .mySwiper03 .swiper-pagination-fraction {
    bottom: 160rem;
  }

  .i-serbox-bot {
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
  }

  .i-serbox-bot-item {
    margin-bottom: 20rem;
  }

  .i-serbox-bot-item:nth-child(1),
  .i-serbox-bot-item:nth-child(3) {
    transform: rotate(0);
  }

  .i-aboutBox {
    padding-top: 40rem;
  }

  .i-aboutBox-tit-top {
    font-size: 30rem;
    line-height: 50rem;
    margin-top: 37rem;
  }

  .i-aboutBox-tit-con {
    font-size: 20rem;
    line-height: 24rem;
  }

  .i-whyBox {
    padding-top: 35rem;
  }

  
  .whyBox-items {
    width: 90%;
  }

  .l-con {
    flex-direction: column;
  }

  .l-con2 {
    padding-top: 20rem;
  }
}