.index{width: 100%;}
.index .banner{width: 100%;height: 100vh;}
.index .banner-swiper{width: 100%;height: 100%; --swiper-pagination-bottom:0.6rem;}
.index .banner .bg{width: 100%; height: 100%; object-fit: cover;}
.index .banner .swiper-slide{position: relative;}
.index .banner .wCon{ position: absolute; top: 2.04rem; left: 1.2rem; font-size: var(--font-size-46); line-height: 1.34; color: #fff;}
.index .banner .wCon .title{opacity: 0; width: 5.08rem; transform: translateY(1rem); transition: all 0.5s ease-out;}
.index .banner .wCon a{display: inline-block; border-radius: 0.04rem; padding: 0.1rem 0.22rem; border: 1px solid #fff; color: #fff; font-size: var(--font-size-16); line-height: 1.1; margin-top: 0.36rem; opacity: 0; transform: translateY(1rem); transition: all 0.5s ease-out 0.2s;}
.index .banner .swiper-pagination span{width: 0.4rem; height: 0.02rem;border-radius: 0; background-color: #fff;}

.index .banner .swiper-slide-active .wCon .title{opacity: 1; transform: translateY(0); transition: all 0.8s ease-out 0.5s; }
.index .banner .swiper-slide-active .wCon a{opacity: 1; transform: translateY(0); transition: all 0.8s ease-out 0.7s;}

.index .carModel{width: 100%;height: 100vh; background-color: var(--primary-color); position: relative;}
.index .carModel .vehicleModels{display: flex; justify-content: center; align-items: center; position: absolute; top: 0.86rem; left: 0; width: 100%; font-family: 'OpenSans-SemiBold'; z-index: 20;}
.index .carModel .vehicleModels a{font-size: var(--font-size-30); line-height: 2.4; color: var(--primary-color); margin: 0 0.62rem; position: relative; cursor: pointer;}
.index .carModel .vehicleModels a::after{content: ''; display: block;position: absolute; bottom: 0; left: 50%; width: 0.48rem; height: 0.04rem; background-color: var(--primary-color); transform: translateX(-50%) scaleX(0); transition: all 0.3s ease-in-out;}
.index .carModel .vehicleModels a:hover{color: var(--primary-color);}
.index .carModel .vehicleModels a.on{color: var(--primary-color);}
.index .carModel .vehicleModels a.on::after,
.index .carModel .vehicleModels a:hover::after{transform: translateX(-50%) scaleX(1); transition: all 0.5s ease-in-out;}
.index .carModel .modelDisplay{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.index .carModel .modelDisplay ul{width: 100%; height: 100%;position: relative;}
.index .carModel .modelDisplay ul li{position: absolute; top: 50%; left: 0; width: 100%; height: 100%; transform: translateY(-50%); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.index .carModel .modelDisplay ul li .swiper-slide{ width: 9.52rem; height:5.3rem; position: relative; padding-top: 2.18rem ;}
.index .carModel .modelDisplay ul li .swiper-slide .bg{ width: 100%; height:4.6rem; object-fit: cover;}
.index .carModel .modelDisplay ul li .swiper-slide a{display: block; width: 100%; text-align: center; font-size: var(--font-size-26); line-height: 2.7; color: #fff; opacity: 0; transform: translateY(0.5rem); transition: all 0.5s ease-out 0s;}
.index .carModel .modelDisplay ul li .swiper-slide-active a{opacity: 1; transform: translateY(0); transition: all 0.5s ease-out 0.2s;}
.index .carModel .swiper-button-prev,
.index .carModel .swiper-button-next{color:#fff;opacity: 0.2;}
.index .carModel .swiper-button-prev:hover{opacity:1;}
.index .carModel .swiper-button-next:hover{opacity: 1;}
.index .carModel .swiper-button-prev{
 top:calc(5.3rem + 1.84rem);
 left: 50%;
 transform:translateX(-1.39rem);
}
.index .carModel .swiper-button-next{
  top:calc(5.3rem + 1.84rem);
 left: 50%;
 transform:translateX(1rem);
}
.swiper-button-next:after, .swiper-button-prev:after{font-size: 0.5rem;}
.index .carModel .swiper-button-next.swiper-button-disabled, .index .carModel .swiper-button-prev.swiper-button-disabled{opacity: 0;}


.index .news{width: 100%;height: 100vh; background-color:#fff;}
.index .news .newsH{margin-left: 1.24rem; width: 85%; display: flex; justify-content: space-between; align-items: center; height: 0.86rem; margin-top: 0.7rem;}
.index .news .newsH .news-title{font-size: var(--font-size-60); line-height: 1.43; color: var(--primary-color);}
.index .news .newsH a{display: inline-block; border-radius: 0.04rem; padding: 0.1rem 0.22rem; border: 1px solid var(--text-btn-gray); color:var(--text-btn-gray); font-size: var(--font-size-16); line-height: 1.1;}
.index .news .news-swiper{width: 17.98rem;height:6.44rem; margin: 0.74rem 0; margin-left: 1.24rem;}
.index .news .news-swiper .swiper-slide{ width: 8rem; padding-right: 0.36rem; height: 6.44rem; transition: all 0.3s ease; cursor: pointer;}
.index .news .news-swiper .swiper-slide .news-img{width: 100%; height: 4.54rem; overflow: hidden; border-radius: 0.04rem; margin-bottom: 0.34rem;}
.index .news .news-swiper .swiper-slide .news-img img{width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.index .news .news-swiper .swiper-slide:hover .news-img img{transform: scale(1.05); }
.index .news .news-swiper .swiper-slide .news-content{transform: translateY(0); transition: all 0.3s ease;}
.index .news .news-swiper .swiper-slide:hover .news-content{transform: translateY(-0.1rem); transition: all 0.3s ease;}
.index .news .news-swiper .swiper-slide .news-content .news-date{font-size: var(--font-size-18); line-height: 1.5; color: var(--text-light-gray2)}
.index .news .news-swiper .swiper-slide .news-content .news-desc{font-size: var(--font-size-24); line-height: 1.5; color: var(--text-gray); margin-top: 0.14rem; display: block;}
/* .index .news .swiper-pagination{display: none;} */
.index .news .swiper-pagination span{width: 0.56rem; height: 0.04rem; background-color: var(--text-btn-gray); border-radius: 0;}
.index .news .swiper-pagination .swiper-pagination-bullet-active{background-color: var(--lightblue-color);}


.index .aboutUs{width: 100%; height: 100vh; position: relative;}
.index .aboutUs .bg{width: 100%; height: 100%; object-fit: cover;}
.index .aboutUs .aboutUsH{position: absolute; top: 2.14rem; left: 2.22rem; font-size: var(--font-size-40); width: 6.82rem; line-height: 1.45; color: #fff;}
.index .aboutUs .aboutUsH .aboutUs-title{font-size: var(--font-size-60); line-height: 1; color: #fff; min-height: 1.06rem; display: flex; align-items: center; margin-bottom: 0.1rem;}
.index .aboutUs .aboutUsH a{display: inline-block; border-radius: 0.04rem; padding: 0.1rem 0.22rem; border: 1px solid #fff; color: #fff; font-size: var(--font-size-16); line-height: 1.1; margin-top: 0.36rem;}

@media (max-width: 768px) {
  .index .banner-swiper{--swiper-pagination-bottom:1.3rem;}
  .index .banner .swiper-pagination span{ width: 0.56rem; height: 0.04rem;}
  .index .banner .wCon{top: 3.12rem; left: 0.5rem; width: 100%;}
  .index .banner .wCon .title{font-size: var(--font-size-40); line-height: 1.43; width: 90%;}
  .index .banner .wCon a{padding: 0.2rem 0.34rem; margin-top:0.38rem;}
  .index .carModel .vehicleModels{ flex-wrap: wrap; justify-content: space-around; top: 2.64rem;}
  .index .carModel .vehicleModels a{font-size: var(--font-size-24); line-height: 2.4; margin: 0.2rem 0 ;}
     
   .index .carModel {--swiper-navigation-size: 0.68rem; --swiper-theme-color:var(--primary-color); --swiper-navigation-top-offset:60%;}
  .index .carModel .modelDisplay ul li .swiper-slide{padding-top: 7.4rem; width: 100%;}
  .index .carModel .modelDisplay ul li .swiper-slide .bg{width: 100%; height: 3.5rem; }
  .index .carModel .modelDisplay ul li{background-image: var(--background-image-m);}
  .index .carModel .modelDisplay ul li .swiper-slide a{font-size: var(--font-size-24); line-height: 2.7;}
  .index .news{height: auto;}
  .index .news .newsH{ margin-left: 0; width: 90%; margin: 0 auto; margin-top: 1.6rem; height: 0.5rem; position: relative; height: 2.8rem; align-items:initial; height: 2rem;}
  .index .news .newsH a{position: absolute;  left: 0; bottom: 0; padding: 0.2rem 0.34rem; }
  .index .news .swiper-pagination{display: block;}

  .index .news .news-swiper{ margin-left: 0; width: 90%; margin: 0 auto; margin-top: 1rem; height: 9rem; margin-bottom: 1rem;}
  .index .news .news-swiper .swiper-slide{ padding-right: 0; width:100%;}
  .index .news .news-swiper .swiper-slide .news-img{height: 4rem;}
  .index .news .news-swiper .swiper-slide .news-content .news-desc{ margin-top: 0.3rem;}
  .swiper-button-next:after, .swiper-button-prev:after{font-size: 0.5rem;}
  .index .carModel .swiper-button-prev,
  .index .carModel .swiper-button-next{display: block;top:calc(7.4rem + 4.1rem);}
  .index .carModel .swiper-button-prev{transform: translateX(-23vw);}
  .index .carModel .swiper-button-next{transform: translateX(19vw);}
  .index .aboutUs .aboutUsH{top:3.7rem; left: 0.5rem; font-size: var(--font-size-32); width:88%;}
  .index .aboutUs .aboutUsH a{padding: 0.2rem 0.34rem; margin-top:0.38rem;}
}