.banner {
  width: 100%;
  height: 10.8rem;
  position: relative;
}

.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner .text {
  max-width: 7.04rem;
  position: absolute;
  top: 2.4rem;
  left: 1.98rem;
}

.banner .text .tit1,
.banner .text .tit2 {
  font-family: AlimamaShuHeiTi-Bold;
  font-weight: 700;
  font-size: .64rem;
  color: rgba(91, 196, 196, 1);
  margin-bottom: .25rem;
  line-height: 1;
}

.banner .text .tit2 {
  margin-bottom: .4rem;
}

.banner .text .txt {
  font-family: AlibabaPuHuiTi-3-55-Regular;
  font-weight: 400;
  font-size: .24rem;
  color: rgba(153, 153, 153, 1);
}

.banner .text .txt2 {
  font-family: AlibabaPuHuiTi-3-55-Regular;
  font-weight: 400;
  font-size: .48rem;
  color: rgba(51, 51, 51, 1);
  margin-top: 1.03rem;
}

.banner .text .mask {
  font-family: AlibabaPuHuiTi-3-115-Black;
  font-weight: 1000;
  font-size: 2rem;
  color: rgba(150, 150, 150, .1);
}

.comTit {
  position: relative;
}

.comTit .titen {
  font-family: AlibabaPuHuiTi-3-105-Heavy;
  font-weight: 900;
  font-size: .96rem;
  color: transparent;
  -webkit-text-stroke: .01rem rgba(230, 230, 230, 1);
}

.comTit .titcn {
  position: absolute;
  left: 0;
  top: .23rem;
  font-family: AlibabaPuHuiTi-3-65-Medium;
  font-weight: 500;
  font-size: .4rem;
  color: rgba(51, 51, 51, 1);
}

.comTit .titcn span {
  color: rgba(91, 196, 196, 1);
}

.comTit .titcn span.red {
  color: rgba(214, 77, 104, 1);
}

.pro .title {
  margin-top: .51rem;
  font-family: AlibabaPuHuiTi-3-85-Bold;
  font-weight: 700;
  font-size: .64rem;
  text-align: center;
  margin-bottom: .33rem;
}

.pro .title span {
  color: rgba(91, 196, 196, 1);
}

.pro .classList {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.24rem;
  margin-bottom: .41rem;
}

.pro .classList .item {
  display: flex;
  align-items: center;
  gap: .1rem;
}

.pro .classList .item i {
  font-family: AlimamaShuHeiTi-Bold;
  font-weight: 700;
  font-size: .64rem;
  color: transparent;
  -webkit-text-stroke: .01rem rgba(214, 77, 104, 1);
}

.pro .classList .item p {
  font-family: AlibabaPuHuiTi-3-85-Bold;
  font-weight: 700;
  font-size: .4rem;
  color: rgba(214, 77, 104, 1);
}

.swiper {
  height: 8.63rem;
  margin-bottom: .9rem;
  border-bottom: .01rem solid rgba(206, 206, 206, 1);
}

.swiper .swiper-slide {
  opacity: .1;
  position: relative;
}

.swiper .swiper-slide-active {
  opacity: 1;
}

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

.swiper .swiper-button-prev,
.swiper .swiper-button-next {
  width: 1.01rem;
  height: 1.01rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 50%;
  box-shadow: 0 .02rem .12rem 0 rgba(0, 0, 0, 0.1)
}

.swiper .swiper-button-prev {
  left: 1.96rem;
}

.swiper .swiper-button-next {
  right: 1.96rem;
}

.swiper p {
  font-family: AlibabaPuHuiTi-3-45-Light;
  font-weight: 300;
  font-size: .24rem;
  color: rgba(102, 102, 102, 1);
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
}

.swiper a {
  width: 1.1rem;
  height: .5rem;
  border-radius: .3rem;
  background: rgba(91, 196, 196, 1);
  position: absolute;
  bottom: .8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: AlibabaPuHuiTi-3-55-Regular;
  font-weight: 400;
  font-size: .24rem;
  color: rgba(255, 255, 255, 1);
}

.swiper2 {
  margin-top: 1.29rem;
  margin-bottom: 4.29rem;
  margin-top: .6rem;
  margin-bottom: 1rem;
  border-bottom: 0;
}

.swiper2 img {
  object-fit: contain !important;
}

.box1 {
  padding-top: .97rem;
  padding-left: 1.1rem;
}

.box1 .content {
  display: flex;
  gap: .83rem;
  /*align-items: flex-end;*/
}

.box1 .content .left {
  width: 9.39rem;
}

.box1 .content .left .tit {
  min-width: 2.5rem;
  width: fit-content;
  padding: 0 .3rem;
  height: .68rem;
  border-radius: .6rem;
  margin-top: .43rem;
  background: rgba(91, 196, 196, 1);
  font-family: AlibabaPuHuiTi-3-65-Medium;
  font-weight: 500;
  font-size: .32rem;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.03rem;
}

.box1 .content .left .det {
  font-family: AlibabaPuHuiTi-3-45-Light;
  font-weight: 300;
  font-size: .24rem;
  color: rgba(51, 51, 51, 1);
}

.box1 .content .left .det span {
  color: rgba(91, 196, 196, 1);
}

.box1 .content .right {
  width: 7.88rem;
  height: 5.47rem;
  position: relative;
}

.box1 .content .right video {
  width: 100%;
  height: 5.03rem;
}

.box1 .content .right .play {
  width: .58rem;
  height: .58rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 2.22rem;
  cursor: pointer;
}

.box1 .content .right .play::before {
  content: '';
  display: flex;
  /* width: .44rem; */
  /* height: .22rem; */
  border: .15rem solid transparent;
  border-left: .2rem solid rgba(91, 196, 196, 1);
  position: absolute;
  top: 50%;
  left: .21rem;
  transform: translateY(-50%);
}

.box1 .content .right p {
  font-family: AlibabaPuHuiTi-3-45-Light;
  font-weight: 300;
  font-size: .24rem;
  text-align: center;
  color: rgba(102, 102, 102, 1);
}

.box2 {
  padding-top: .54rem;
}

.box2 .fisrt {
  width: 12.47rem;
  margin: -0.82rem auto 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.box2 .fisrt img {
  width: 7.13rem;
  height: 2.09rem;
}

.box2 .content {
  width: 12.47rem;
  margin: 0 auto;
  text-align: center;
}

.box2 .content .list {
  display: flex;
  gap: 1.72rem;
  margin-bottom: .74rem;
}

.box2 .content .list .item {
  margin-bottom: .21rem;
}

.box2 .content .list .item div {
  min-width: 1.58rem;
  width: fit-content;
  height: .4rem;
  display: flex;
  align-items: center;
  gap: .17rem;
  padding: 0 .17rem;
  background: rgba(91, 196, 196, 1);
  margin: 0 auto;
  font-family: AlibabaPuHuiTi-3-45-Light;
  font-weight: 300;
  font-size: .14rem;
  color: rgba(255, 255, 255, 1);
}

.box2 .content .list .item div span {
  font-family: AlibabaPuHuiTi-3-65-Medium;
  font-weight: bold;
  font-size: .24rem;
}

.box3 {
  padding-top: .99rem;
}

.box3 .main {
  width: 100%;
  max-width: none;
  padding-left: 1.1rem;
}

.box3 .content {
  display: flex;
  gap: 1.1rem;
  align-items: flex-end;
}

.box3 .content .left {
  width: 10rem;
}

.box3 .content .left p {
  font-family: AlibabaPuHuiTi-3-45-Light;
  font-weight: 300;
  font-size: .24rem;
  color: rgba(51, 51, 51, 1);
}

.box3 .content .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: .34rem;
  row-gap: .74rem;
  margin-top: .33rem;
}

.box3 .content .list .item {
  width: 100%;
  height: 2.41rem;
  background: rgba(91, 196, 196, 0.82);
  border-radius: .1rem;
  position: relative;
  padding: .59rem .35rem;
}

.box3 .content .list .item p {
  font-family: AAlibabaPuHuiTi-3-65-Medium;
  font-weight: 500;
  font-size: .24rem;
  color: rgba(255, 255, 255, 1);
}

.box3 .content .list .item span {
  font-family: AlimamaShuHeiTi-Bold;
  font-weight: 700;
  font-size: 1.28rem;
  color: rgba(255, 255, 255, 0.15);
  position: absolute;
  right: -0.06rem;
  bottom: -0.09rem;
}

.box3 .right {
  width: 6.99rem;
  /* height: 7.07rem; */
  display: flex;
  align-items: flex-end;
}

.box3 .right img {
  width: 100%;
  /* height: 100%; */
}

.box4 {
  padding-top: .99rem;
  padding-bottom: 2rem;
}

.box4 .main {
  width: 100%;
  max-width: none;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

.box4 .list{
  display: flex;
  flex-direction: column;
  gap: .71rem;
}

.box4 .list .item {
  display: grid;
  align-items: flex-start;
}

/* 奇数行：图片在左，文字在右
   Grid布局：图片列(7.68rem) | gap列(1.54rem) | 文字列(1fr)
   文字从 9.22rem 位置开始 */
.box4 .list .item:nth-child(odd) {
  grid-template-columns: 7.68rem 1.54rem 1fr;
}

.box4 .list .item:nth-child(odd) img {
  grid-column: 1;
}

.box4 .list .item:nth-child(odd) .text {
  grid-column: 3;
}

/* 偶数行：文字在左，图片在右
   Grid布局：文字列(9.22rem固定) | 图片列(7.68rem)
   文字列固定为9.22rem以确保图片从9.22rem开始（与奇数行文字对齐）
   文字内容可以换行，不会溢出 */
.box4 .list .item:nth-child(even) {
  grid-template-columns: 9.22rem 7.68rem;
}

.box4 .list .item:nth-child(even) .text {
  grid-column: 1;
  order: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.box4 .list .item:nth-child(even) img {
  grid-column: 2;
  order: 2;
}

.box4 .list .item img {
  width: 7.68rem;
  height: 3.81rem;
  border-radius: .15rem;
  object-fit: cover;
}

.box4 .list .item .text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.box4 .list .item .tit {
  font-family: AlibabaPuHuiTi-3-65-Medium;
  font-weight: bold;
  font-size: .4rem;
  color: rgba(91, 196, 196, 1);
  margin-bottom: .58rem;
}

.box4 .list .item .ul .li {
  font-family: AlibabaPuHuiTi-3-45-Light;
  font-weight: 300;
  font-size: .24rem;
  line-height: .5rem;
  color: rgba(51, 51, 51, 1);
  display: flex;
  align-items: center;
  gap: .22rem;
}

.box4 .list .item .ul .li::before {
  content: '';
  width: .07rem;
  height: .07rem;
  border-radius: 50%;
  background: rgba(91, 196, 196, 1);
}

.box4 .list .item .number {
  font-family: AlimamaShuHeiTi-Bold;
  font-weight: 700;
  font-size: 3rem;
  color: rgba(91, 196, 196, 0.12);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width:1024px){
    .banner{
        height: auto;
    }
    .banner .text{
        width: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .banner .text .tit2{
        font-size: .5rem;
    }
    .banner .text .txt2{
        margin-top: .2rem;
    }
    .banner .text .mask{
        font-size: .5rem;
    }
    .pro .classList{
        gap: .2rem;
    }
    .pro .classList .item p{
        font-size: .3rem;
    }
    .pro .title{
        font-size: .4rem;
    }
    .comTit .titen{
        font-size: .6rem;
    }
    /*.swiper {*/
    /*    height: 6rem;*/
    /*}*/
    .box1,.box2,.box3,.box4{
        padding: .3rem;
    }
    .box1 *,.box2 *,.box3 *,.box4 *{
        max-width: 100%;
    }
    .box1 .content{
        flex-direction: column;
    }
    .box2 .content .list{
        gap: .2rem;
    }
    .box3 .main{
        padding: 0;
    }
    .box3 .content{
        flex-direction: column;
    }
    .box4 .main{
        padding: 0;
    }
    .box4 .list .item{
        display: flex!important;
        flex-direction: column!important;
    }
    .box4 .list .item:nth-child(even) img{
        order: inherit;
    }
    .swiper .swiper-button-prev{
        width: .5rem;
        height: .5rem;
        left: .3rem;
    }
    .swiper .swiper-button-next{
        width: .5rem;
        height: .5rem;
        right: .3rem;
    }
    .swiper-button-next:after, .swiper-button-prev:after{
        font-size: .4rem;
    }
}