.hero_bg {
  position: relative;
  width: 100%;
  height: 100vh;
  margin-top: 4.479vw;
  overflow: hidden;
}

.hero_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero_bg .hero_title {
  position: absolute;
  left: 10.4167vw;
  bottom: 10.9375vw;
  color: #FFF;
  font-size: 2.5vw;
  font-weight: 600;
}

.hero_bg p {
  position: absolute;
  left: 10.4167vw;
  bottom: 6.6146vw;
  color: #FFF;
  font-size: 0.7292vw;
  font-weight: 400;
  line-height: 1.5;
  margin-right: 10.7813vw;
}

.container {
  padding: 5.2083vw 10.4167vw;
  background: #02020E;
}

.container .main {
  display: flex;
  flex-direction: column;
  gap: 2.6042vw;
  margin-bottom: 5.2083vw;
}

.container .main h2 {
  margin: 0.5208vw 0;
  color: #FFF;
  font-size: 1.875vw;
  font-weight: 600;
}

.container .main .item {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.6458vw;
}

.container .main .item .ev {
  display: flex;
  flex-direction: column;
  gap: 1.0417vw;
}

.container .main .item .ev img {
  border-radius: 0.5208vw;
  width: 100%;
  /* height: 100%; */
  height: 15.2083vw;
}

.container .main .item .ev p {
  color: #FFF;
  /* font-size: 0.6771vw; */
  font-size: 0.8333vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8
}

.container .commercial h2 {
  margin: 0.5208vw 0 3.125vw;
  color: #FFF;
  font-size: 1.875vw;
  font-weight: 600;
}

.container .commercial .item {
  position: relative;
  padding: 2.0833vw 2.6042vw;
  border-radius: 0.5208vw;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: linear-gradient(180deg, rgba(205, 50, 171, 0.10) 0%, rgba(164, 164, 164, 0.10) 100%);
}

.container .commercial .commercial-main {
  display: flex;
  flex-direction: column;
  gap: 1.5625vw;
}

.container .commercial .item .pic {
  width: 100%;
  height: 24.6875vw;
  z-index: 30;
}

.container .commercial .item .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5208vw;
}

.container .commercial .commercial-main .text {
  z-index: 30;
}

.container .commercial .commercial-main .text h3 {
  color: #FFF;
  font-size: 1.3542vw;
  font-weight: 600;
  margin-bottom: 10px;
}

.container .commercial .commercial-main .text h3 span {
  color: #CD38FF;
}

.container .commercial .commercial-main .text p {
  color: #FFF;
  /* font-size: 1.1458vw; */
  font-size: 0.8333vw;
  font-weight: 400;
  line-height: 180%;
}


.contain {
  padding: 5.2083vw 10.4167vw;
  color: #FFF;
}

.contain .procurement {
  display: flex;
  flex-direction: column;
  gap: 2.6042vw;
  margin-bottom: 5.2083vw;
}

.contain .procurement h2 {
  margin: 0.5208vw 0;
  color: #000;
  font-size: 1.875vw;
  font-weight: 600;
}

.contain .procurement .main {
  display: flex;
  gap: 5.2083vw;
  align-items: center;
}

.contain .procurement .main .left_box {
  width: 35.7292vw;
}

.contain .procurement .main .left_box h3 {
  font-size: 1.4583vw;
  font-weight: 600;
  line-height: 240%;
  background: linear-gradient(90deg, #D038FF 0.09%, #462DFF 99.93%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contain .procurement .main .left_box p {
  color: #000;
  font-size: 0.8333vw;
  font-weight: 400;
  line-height: 200%;
}

.contain .procurement .main .right_box {
  position: relative;
  width: 38.2292vw;
  height: 27.5521vw;
}

.contain .procurement .main .right_box .purple-box {
  position: absolute;
  width: 20.1563vw;
  height: 17.5521vw;
  right: 0;
  top: 0;
  background: linear-gradient(90deg, #D038FF 0.09%, #462DFF 99.93%);
  z-index: -1;
}

.contain .procurement .main .right_box .pic {
  position: absolute;
  right: 0.7813vw;
  top: 0.7813vw;
  width: 37.1875vw;
  height: 26.5104vw;
}

.contain .procurement .main .right_box .pic img {
  border-radius: 0.5208vw;
}


.contain .income {
  display: flex;
  flex-direction: column;
  gap: 2.6042vw;
}

.contain .income h2 {
  margin: 0.5208vw 0;
  color: #000;
  font-size: 1.875vw;
  font-weight: 600;
}

.contain .income .income-main {
  display: flex;
  gap: 2.8646vw;
}

.contain .income .income-main .mySwiper2 {
  width: 29.5833vw;
}

.contain .income .income-main .mySwiper {
  /* flex: 1; */
  width: 46.7188vw;
}

.contain .income .income-main .mySwiper2 .swiper-slide h3 {
  position: absolute;
  left: 1.0417vw;
  top: 17.3438vw;
  color: #FFF;
  font-size: 1.1458vw;
  font-weight: 600;
  line-height: 200%;
}

.contain .income .income-main .mySwiper2 .swiper-slide .ev {
  display: flex;
  flex-direction: column;
  gap: 1.0417vw;
}

.contain .income .income-main .mySwiper2 .swiper-slide .ev p {
  color: #000;
  /* font-size: 0.7292vw; */
  font-size: 0.8333vw;
  font-weight: 400;
  line-height: 180%;
}

.contain .income .income-main .mySwiper .swiper-slide {
  display: flex;
  flex-direction: column;
  gap: 0.5208vw;
}

.contain .income .income-main .mySwiper .swiper-slide p {
  color: #000;
  font-size: 1.1458vw;
  font-style: normal;
  font-weight: 600;
  line-height: 200%;

}

/* .contain .income .income-main .mySwiper .swiper-slide-active {
  margin-right: 2.8646vw;
} */
.contain .income .income-main .mySwiper .pic {
  position: absolute;
  bottom: 0;
  cursor: pointer;
  z-index: 99;
}
.contain .income .income-main .mySwiper .pic img {
  width: 1.7708vw;
  height: 1.7708vw;
}
.contain .income .income-main .mySwiper .line {
  position: absolute;
  /* bottom: 0.8333vw; */
  bottom: 17px;
  right: calc(1.5vw + 5px);
  width: 41.7188vw;
  height: 3px;
  background-color: #eee;
  border-radius: 1.5px;
  overflow: hidden;
}

.contain .income .income-main .mySwiper .line .progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #D038FF 0.09%, #462DFF 99.93%);
  transition: width 0.3s ease;
}
.contain .income .income-main .line1 {
  display: none;
}

@media screen and (max-width:768px){
  .hero_bg {
    height: calc(100vh - 60px);
    margin-top: 60px;
  }
  .hero_bg .hero_title {
    font-size: 24px;
  }
  .hero_bg p {
    font-size: 12px;
    left: 0;
    margin: 0 5%;
  }
  .hero_bg .hero_title {
    bottom: 50%;
    left: 14%;
  }
  .container .main .item {
    grid-template-columns: repeat(1,1fr);
    gap: 30px;
  }
  .container .main .item .ev img {
    border-radius: 10px;
    height: 100%;
  }
  .container .main h2 {
    font-size: 18px;
  }
  .container {
    padding: 50px 5%;
  }
  .container .main .item .ev p {
    font-size: 12px;
  }
  .container .main .item .ev {
    gap: 10px;
  }
  .container .commercial h2 {
    font-size: 18px;
    margin: 15px 0;
  }
  .container .commercial .item .pic {
    height: 200px;
  }
  .container .commercial .item .pic img {
    border-radius: 10px;
  }
  .container .commercial .commercial-main {
    gap: 10px;
  }
  .container .commercial .commercial-main .text h3 {
    font-size: 16px;
  }
  .container .commercial .commercial-main .text p {
    font-size: 12px;
  }
  .contain .procurement h2 {
    font-size: 18px;
  }
  .contain .procurement .main .left_box h3 {
    font-size: 16px;
  }
  .contain .procurement .main .left_box {
    width: 100%;
  }
  .contain .procurement .main {
    flex-direction: column;
  }
  .contain .procurement .main .left_box p {
    font-size: 12px;
  }
  .contain .procurement .main .right_box .pic img {
    border-radius: 10px;
  }
  .contain .procurement .main .right_box {
    width: 100%;
    height: 100%;
  }
  .contain .procurement .main .right_box .pic {
    position: sticky;
    width: 100%;
    height: 100%;

  }
  .contain .procurement .main .right_box .purple-box {
    right: -10px;
    top: -10px;
  }
  .contain .income h2 {
    font-size: 18px;
  }
  .contain .income .income-main .mySwiper2 {
    width: 100%;
  }
  .contain .income .income-main .mySwiper {
    display: none;
  }
  .contain .income .income-main .mySwiper2 .swiper-slide .ev .pic img {
    border-radius: 10px;
  }
  .contain .income .income-main .mySwiper2 .swiper-slide h3 {
    font-size: 16px;
    top: 180px;
    left: 15px;
  }
  .contain .income .income-main .mySwiper2 .swiper-slide .ev .pic {
    height: 230px;
  }
  .contain .income .income-main .mySwiper2 .swiper-slide .ev .pic img {
    height: 100%;
  }
  .contain .income .income-main .mySwiper2 .swiper-slide .ev p {
    font-size: 12px;
  }
  .contain .income .income-main .mySwiper2 .swiper-slide .ev {
    gap: 10px;
  }
  .contain {
    padding: 50px 5%;
  }
  .contain .income .income-main  .line1 {
    display: block;
    height: 3px;
    background-color: #eee;
  }
  .contain .income .income-main .line1 .progress {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #D038FF 0.09%, #462DFF 99.93%);
  transition: width 0.3s ease;
}
.contain .income .income-main {
  flex-direction: column;
  gap: 20px;
}
}