.homePage {
  overflow: hidden;
  background: #ffffff;
}

.homeHero {
  position: relative;
  height: 10.8rem;
  overflow: hidden;
}

.homeHeroSwiper,
.homeHeroSwiper .swiper-wrapper,
.homeHero__slide,
.homeHero__scene {
  width: 100%;
  height: 100%;
}

.homeHero__scene {
  position: relative;
  overflow: hidden;
}

.homeHero__bg {
  position: absolute;
}

.homeHero__bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.homeHero__copy {
  position: absolute;
  left: 50%;
  top: 2.4rem;
  z-index: 3;
  width: 14.22rem;
  text-align: center;
  color: #ffffff;
  transform: translateX(-50%);
}

.homeHero__copy h1 {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
}

.homeHero__copy p {
  margin-top: 0.43rem;
  font-size: 0.46rem;
  font-weight: 600;
  line-height: 1;
}

.homeHero__vehicle {
  left: 50%;
  bottom: 1.96rem;
  z-index: 4;
  width: 9.91rem;
  height: 3.25rem;
  border-radius: 48% 48% 0.16rem 0.16rem;
  background:
    radial-gradient(circle at 12% 74%, #1f2428 0 0.18rem, transparent 0.19rem),
    radial-gradient(circle at 36% 78%, #1f2428 0 0.17rem, transparent 0.18rem),
    radial-gradient(circle at 61% 77%, #1f2428 0 0.18rem, transparent 0.19rem),
    radial-gradient(circle at 84% 75%, #1f2428 0 0.17rem, transparent 0.18rem),
    linear-gradient(
      90deg,
      #ce0014 0 22%,
      #d7eee0 22% 42%,
      #f0f2eb 42% 58%,
      #a9adc7 58% 76%,
      #eec7c7 76%
    );
  box-shadow: 0 0.18rem 0.22rem rgba(50, 60, 70, 0.28);
  transform: translateX(-50%);
}

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

.homeHero__arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 0.71rem;
  height: 0.71rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.6s;
}

.homeHero__arrow > img {
  width: 0.3rem;
  height: 0.3rem;
}

.homeHero__arrow:hover {
  background: rgba(0, 0, 0, 1);
}

.homeHero__prev {
  left: 0.54rem;
}

.homeHero__next {
  right: 0.54rem;
}

.homeHero__next > img {
  transform: rotate(180deg);
}

.homeHero__pagination {
  position: absolute;
  right: 1.82rem;
  bottom: 0.58rem !important;
  left: auto !important;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.1rem;
}

.homeHero__pagination .swiper-pagination-bullet {
  width: 0.2rem;
  height: 0.08rem;
  background: #000000;
  border-radius: 0.05rem 0.05rem 0.05rem 0.05rem;
  opacity: 0.35;
}

.homeHero__pagination .swiper-pagination-bullet-active {
  width: 0.61rem;
  background: var(--color);
  opacity: 1;
}

.homeHero__scroll {
  position: absolute;
  left: 50%;
  bottom: 0.56rem;
  z-index: 7;
  width: 0.25rem;
  height: 0.35rem;
  border: 0.01rem solid rgba(255, 255, 255, 0.8);
  border-radius: 0.15rem;
  transform: translateX(-50%);
}

@keyframes scroll {
  0%,
  100% {
    top: 0.06rem;
    opacity: 1;
  }
  50% {
    top: 0.2rem;
    opacity: 0.6;
  }
}

.homeHero__scroll::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.06rem;
  width: 0.03rem;
  height: 0.09rem;
  background: #ffffff;
  border-radius: 0.02rem;
  transform: translateX(-50%);
  animation: scroll 1.5s ease-in-out infinite;
}

.sectionBlock {
  padding-top: 1.19rem;
}

.sectionTitle {
  margin-bottom: 0.76rem;
  text-align: center;
}

.sectionTitle h2 {
  position: relative;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 0.5rem;
  color: #000000;
  line-height: 1;
}

.brandGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

.brandCard {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 0.15rem;
  background: #edf1f5;
}

.brandCard--wide {
  grid-column: 1 / -1;
  height: 6.78rem;
}

.brandCard--half {
  height: 6.76rem;
}

.brandCard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s;
}

.brandCard:hover .brandCard__img {
  transform: scale(1.03);
}

.brandCard strong {
  position: absolute;
  z-index: 3;
  font-family:
    Alimama ShuHeiTi,
    Alimama ShuHeiTi;
  font-weight: bold;
  font-size: 0.6rem;
  color: #ffffff;
}

.brandCard--feixun strong {
  right: 2.54rem;
  top: 3.21rem;
}

.brandCard--xiaodao strong {
  left: 0.84rem;
  top: 3.04rem;
  color: #414141;
  font-size: 0.44rem;
}

.brandCard--sky strong {
  left: 0.84rem;
  top: 3.04rem;
  font-size: 0.44rem;
}

.brandCard--black strong {
  left: 3.54rem;
  top: 2.65rem;
}

.aboutHome {
  padding-top: 1.22rem;
}

.aboutPanel {
  position: relative;
  height: 8.99rem;
  overflow: hidden;
  border-radius: 0.15rem;
}

.aboutPanel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aboutPanel__copy {
  position: relative;
  z-index: 2;
  width: 5.06rem;
  padding: 2.2rem 0 0 1.87rem;
  box-sizing: content-box;
  color: #ffffff;
}

.aboutPanel__copy h3 {
  margin-bottom: 0.32rem;
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: bold;
  font-size: 0.38rem;
  color: #ffffff;
}

.aboutPanel__copy p {
  margin-bottom: 0.6rem;
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 400;
  font-size: 0.16rem;
  color: #ffffff;
  line-height: 0.3rem;
}

.redBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.38rem;
  height: 0.48rem;
  background: var(--color);
  border-radius: 0.24rem 0.24rem 0.24rem 0.24rem;
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 400;
  font-size: 0.16rem;
  color: #ffffff;
}

.aboutStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.23rem;
  margin-top: 0.3rem;
}

.aboutStat {
  height: 2.25rem;
  padding-top: 0.38rem;
  text-align: center;
  background: #f5f5f5;
  border-radius: 0.14rem;
}

.aboutStat strong {
  display: block;
  font-family: Oswald, Oswald;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--color);
}

.aboutStat strong em {
  font-style: normal;
  font-size: 0.41rem;
  vertical-align: 0.3rem;
}

.statFlex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
}

.statFlex > img {
  width: 0.25rem;
  height: 0.25rem;
}

.aboutStat .statFlex span {
  display: block;
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 400;
  font-size: 0.2rem;
  color: #000000;
}

.coreHome {
  padding: 1.22rem 0 0.31rem;
}

.coreGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}

.coreCard {
  position: relative;
  display: block;
  height: 6.78rem;
  overflow: hidden;
  border-radius: 0.15rem;
}
.coreCard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s;
}

.coreCard:hover .coreCard__img {
  transform: scale(1.03);
}
.coreCard::before {
  content: "";
  position: absolute;
  inset: 0;
}

.coreCard__copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.85rem;
  z-index: 2;
  text-align: center;
  color: #ffffff;
}
.coreCard__copy .redBtn {
  margin: 0 auto;
}

.coreCard__copy h3 {
  margin-bottom: 0.15rem;
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 500;
  font-size: 0.4rem;
  color: #ffffff;
}

.serviceStrip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  height: 4.57rem;
  margin-top: 0.64rem;
  overflow: hidden;
  border-radius: 0.15rem;
}

.serviceStrip__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.serviceItem {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.serviceItem:hover .serviceIcon {
  transform: translateY(-5px)
}

.serviceIcon {
  width: 1.31rem;
  height: 1.31rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
  backdrop-filter: blur(0.2rem);
  border: 2px solid #fff;
  transition: all 0.6s;
}

.serviceItem > img {
  width: 1.31rem;
  height: 1.31rem;
}

.serviceItem span {
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 500;
  font-size: 0.26rem;
  color: #ffffff;
  margin-top: 0.36rem;
}

@media (max-width: 1024px) {
  .homeHero {
    height: 9.75rem;
  }
}

@media (max-width: 560px) {
  .homeHero {
    height: 8rem;
  }

  .homeHero__copy {
    top: 1.1rem;
  }

  .homeHero__copy h1 {
    font-size: 0.42rem;
  }

  .homeHero__copy p {
    font-size: 0.28rem;
  }

  .homeHero__vehicle {
    width: 7.2rem;
    max-width: calc(100% - 0.48rem);
  }

  .brandCard--wide,
  .brandCard--half {
    height: 6.78rem;
  }

  .coreCard {
    height: 6.25rem;
  }

  .aboutPanel {
    height: 7.2rem;
  }

  .aboutPanel__copy {
    width: 5.8rem;
    padding: 1.2rem 0 0 0.5rem;
  }

  .aboutStats {
    grid-template-columns: repeat(2, 1fr);
  }

  .coreGrid {
    grid-template-columns: 1fr;
  }
}

/* responsive refinement */
@media (max-width: 1024px) {
  .homeHero {
    height: 8.6rem;
  }

  .homeHero__copy {
    top: 1.55rem;
    width: calc(100% - 0.48rem);
  }

  .homeHero__copy h1 {
    font-size: 0.52rem;
    line-height: 1.15;
  }

  .homeHero__copy p {
    margin-top: 0.26rem;
    font-size: 0.34rem;
    line-height: 1.35;
  }

  .homeHero__arrow {
    width: 0.56rem;
    height: 0.56rem;
  }

  .homeHero__prev {
    left: 0.24rem;
  }

  .homeHero__next {
    right: 0.24rem;
  }

  .sectionBlock,
  .aboutHome,
  .coreHome {
    padding-top: 0.78rem;
  }

  .sectionTitle {
    margin-bottom: 0.48rem;
  }

  .sectionTitle h2 {
    font-size: 0.44rem;
  }

  .brandGrid,
  .coreGrid {
    gap: 0.22rem;
  }

  .brandCard--wide,
  .brandCard--half,
  .coreCard {
    height: 4.9rem;
  }

  .brandCard strong {
    font-size: 0.42rem;
  }

  .brandCard--feixun strong,
  .brandCard--black strong,
  .brandCard--xiaodao strong,
  .brandCard--sky strong {
    left: 0.46rem;
    right: auto;
    top: auto;
    bottom: 0.48rem;
  }

  .aboutPanel {
    height: auto;
    min-height: 5.8rem;
  }

  .aboutPanel__copy {
    width: min(6.2rem, calc(100% - 0.72rem));
    padding: 1rem 0.36rem 0.76rem;
  }

  .aboutPanel__copy h3 {
    font-size: 0.36rem;
  }

  .aboutPanel__copy p {
    font-size: 0.2rem;
    line-height: 1.8;
  }

  .aboutStats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.18rem;
  }

  .aboutStat {
    height: auto;
    min-height: 1.85rem;
    padding: 0.28rem 0.12rem;
  }

  .aboutStat strong {
    font-size: 0.64rem;
  }

  .aboutStat .statFlex span {
    font-size: 0.22rem;
  }

  .serviceStrip {
    height: 3.6rem;
  }
}

@media (max-width: 560px) {
  .homeHero {
    height: 6.7rem;
  }

  .homeHero__copy {
    top: 1.08rem;
    width: calc(100% - 0.32rem);
  }

  .homeHero__copy h1 {
    font-size: 0.46rem;
  }

  .homeHero__copy p {
    margin-top: 0.18rem;
    font-size: 0.28rem;
  }

  .homeHero__arrow {
    display: none;
  }

  .homeHero__pagination {
    right: 0.24rem;
    bottom: 0.34rem !important;
  }

  .homeHero__scroll {
    display: none;
  }

  .sectionBlock,
  .aboutHome,
  .coreHome {
    padding-top: 0.62rem;
  }

  .sectionTitle {
    margin-bottom: 0.38rem;
  }

  .sectionTitle h2 {
    font-size: 0.4rem;
  }

  .brandGrid,
  .coreGrid {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }

  .brandCard--wide,
  .brandCard--half,
  .coreCard {
    height: 3.95rem;
    border-radius: 0.12rem;
  }

  .brandCard strong {
    font-size: 0.34rem;
  }

  .aboutPanel {
    min-height: 5.6rem;
    border-radius: 0.12rem;
  }

  .aboutPanel__copy {
    width: auto;
    padding: 0.72rem 0.28rem 0.58rem;
  }

  .aboutPanel__copy h3 {
    margin-bottom: 0.2rem;
    font-size: 0.32rem;
  }

  .aboutPanel__copy p {
    margin-bottom: 0.36rem;
    font-size: 0.24rem;
    line-height: 1.7;
  }

  .redBtn {
    width: 1.64rem;
    height: 0.56rem;
    border-radius: 0.28rem;
    font-size: 0.24rem;
  }

  .aboutStats {
    gap: 0.16rem;
  }

  .aboutStat {
    min-height: 1.7rem;
    padding-top: 0.22rem;
  }

  .aboutStat strong {
    font-size: 0.52rem;
  }

  .aboutStat strong em {
    font-size: 0.28rem;
    vertical-align: 0.18rem;
  }

  .statFlex {
    gap: 0.08rem;
  }

  .statFlex > img {
    width: 0.22rem;
    height: 0.22rem;
  }

  .aboutStat .statFlex span {
    font-size: 0.22rem;
  }

  .coreCard__copy {
    top: 0.54rem;
  }

  .coreCard__copy h3 {
    font-size: 0.32rem;
  }

  .serviceStrip {
    /* grid-template-columns: 1fr; */
    height: auto;
    min-height: 4.5rem;
    padding: 0.4rem 0;
    gap: 0.28rem;
  }

  .serviceIcon {
    width: 0.88rem;
    height: 0.88rem;
  }

  .serviceItem span {
    margin-top: 0.16rem;
    font-size: 0.26rem;
  }
}

@media (max-width: 560px) {
  .aboutPanel__copy p,
  .redBtn,
  .aboutStat .statFlex span {
    font-size: 0.24rem;
  }
}