/* space Page Styles - 严格按照设计稿，使用rem单位配合resizeRoot.js */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.mb-only {
    display: none;
}

:root {
    /* --custom-text-size0: 0.5rem;
    --custom-text-size1: 0.24rem;
    --custom-text-size2: 0.22rem;
    --custom-text-size3: 0.18rem;
    --custom-text-size4: 0.16rem;
    --custom-text-size5: 0.14rem; */
    --font-80:0.80rem;
    --font-72:0.72rem;
    --font-50:0.5rem;
    --font-40:0.4rem;
    --font-36:0.36rem;
    --font-32:0.32rem;
    --font-28:0.28rem;
    --font-24:0.24rem;
    --font-22:0.22rem;
    --font-20:0.2rem;
    --font-18:0.18rem;
    --font-16:0.16rem;
    --font-14:0.14rem;
    --custom-width: 76%;
    --color-w:#fff;
    --color-b:#000000;
    --color-gray0:#b2b2b2;
    --color-gray1:#7d7c7b;
    --color-yellow:#a4896d;
    --color-blankYellow:#61513b
}

body {
    font-family: 'p-medium';
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    font-size: var(--custom-text-size4);
    overflow-x: hidden;
    /* 基础字体大小 */
}
.bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section{
     width: 100vw;
    height: 100vh;
    position: relative;
}
.tiggo4_csh{
    width: 100vw;
    position: initial;
    height: auto;
}
.banner .title,.sectionT{
    position: absolute; 
    top: 1.1rem;
    width: 100%;
    text-align: center;
    color: var(--color-w);
    font-size: var(--font-50);
    line-height: 1.2;
    font-family:'Poppins-SemiBold';
}
.banner .title img{
    width: 4.46rem;
}
.banner .suTitle,.sectionSuTitle{
    position: absolute; 
    top: 1.7rem;
    left: 0;
    width: 100%;
    font-size:var(--font-50);
    text-align: center;
    color: var(--color-w);
}
.banner .suTitle{
    font-size: var(--font-40);
}
.LT{
     position: absolute; 
    top: 1.2rem;
    left: 1.18rem;
    width: 80%;
    font-size:var(--font-40);
    color: var(--color-w);
}
.sectionSuTitle{
    font-size: var(--font-24);
    font-family:'p-regular';
}
/* carColor */
.carColor .pic{
    width: 100%;
    height: 100%;
}
.carColor .pic li{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition:all 0.5s ease;}
.carColor .pic li.on{opacity: 1; transition:all 0.5s ease;}
.carColor .btnCon{ position: absolute; top: 50%; transform: translateY(-50%); right: 2.06rem;}
.carColor .btnCon a{width: 0.3rem; height: 0.3rem; display: block; border-radius: 50%;  margin: 0.15rem 0; position: relative; cursor: pointer;}
.carColor .btnCon a img{width:100%; height: 100%; object-fit: cover; }
.carColor .btnCon a::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 0.42rem;
    height: 0.42rem;
    border: 0.02px solid var(--color-w);
    border-radius: 50%;
    content: '';
    opacity: 0;
    transition: all 0.5s;
}
.carColor .btnCon a:hover::after,.carColor .btnCon a.on::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
.carColor .bigT{
    position: absolute; left: 1.6rem; top: 0.7rem;
    color: var(--color-w);
    font-size: var(--font-50);
    line-height: 1.16;
}
.carColor .wordCon{
    position: absolute; 
    color: var(--color-w);
    right: 2.2rem;
    width: 6.32rem;
    top: 0.84rem;
}
.carColor .wordCon .title,.carColor .wordCon .suTitle{
    width: 100%;
    position: relative;
    height: auto;
}
.carColor .wordCon .title p,.carColor .wordCon .suTitle p{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: all 0.5s;

}
.carColor .wordCon .suTitle p{
    font-family: 'p-regular';
}
.carColor .wordCon .title p.on,.carColor .wordCon .suTitle p.on{
    opacity: 1;
    transition: all 0.5s;
}
.carColor .wordCon .title{
    font-size: var(--font-28);
    line-height: 1.8;
}
.carColor .wordCon .suTitle{
    font-size: var(--font-18);
    line-height: 1.6;
    top: 0.52rem;
}

/* .design li{
     width: 100%;
    height: 100%;
    overflow-y: hidden;
    position: absolute;
    top: 0;
    left: 0;
} */

.design ul{
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
}
.design li{
  /* border-radius: 0.04rem; */
  overflow: hidden;
   height: 100%;
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   top: auto;
}
.design li img{
   height: 100vh;
   width: 100%;
   position: absolute;
   bottom: 0;
   left: 0;
   object-fit: cover;
}
.design .wordCon{
    position:absolute;
    left: 1.56rem;
    top: 0.94rem;
    color: var(--color-w);
    width: 80%;
    z-index: 2;
    height: calc( 100% - 0.94rem);
    object-fit: cover;
}
.design .wordCon .title{
 font-size: var(--font-40);
 line-height:1.45 ;
}
.design .wordCon .suTitle{
 font-size: var(--font-20);
 line-height:1.8 ;
  font-family:'p-regular';

}
.template_0 .swiper-slide{
    width: 14.3rem;
    height: 89vh;
}
.template_0 .swiper-slide .pic{
  margin-top: 5vh;
  height: 85%;
  width: 100%;
  overflow: hidden;  
}
.template_0 .swiper-slide .video{
    margin-top: 5vh;
    height: 85%;
    width: 100%;
     overflow: hidden;
     position: relative;
}
.template_0 .swiper-slide .pic img,.template_0 .swiper-slide video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-fit: none; */
}
.template_0 .swiper-slide .word{
    height: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:var(--color-yellow) ;
   font-size: var(--font-40);
}
.template_0 .swiper-pagination{
    bottom: 1.5vh;
    
}
.template_0 .swiper-pagination span {
    width: 0.64rem;
    height: 0.02rem;
    background-color:var(--color-gray0) ;
    border-radius: 0;
}
.template_0 .swiper-pagination .swiper-pagination-bullet-active{
    background-color:var(--color-b) ;
}

.playPauseBtn{
    width: 0.6rem; height:0.6rem; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    /* transform: translate(-50%,-50%); */
    background-color: rgba(-255, -255, -255, 0);
    border: none;
     z-index: 10;
}
.playPauseBtn i {
    width: 0.48rem;
    height: 0.48rem;
}
.playPauseBtn i img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.template_1{

}
.template_1 .swiper-slide{
    width: 100%;
    height:100%;
}
.template_1 .swiper-slide .pic,.template_1 .swiper-slide .video{
  height: 100%;
  width: 100%;
   position: relative;
}
.template_1 .swiper-slide .pic img,.template_1 .swiper-slide video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.template_1 .swiper-slide .title{
    position: absolute;
    left: 1.14rem;
    top: 0.66rem;
    color: var(--color-w);
    font-size: var(--font-40);
}
.template_1 .swiper-slide .con{
    position: absolute;
    left:0;
    bottom: 5vh;
    width: 100%;
    height: 10vh;
    color: var(--color-w);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-18);
}
/* .design li .wordCon .title{
    bottom: 0.8rem;
    position: fixed;
    left: 0;
}
.design li .wordCon .suTitle{
    bottom: 7rem;
    position: fixed;
    left: 0;
} */
.design li:nth-child(2) .wordCon .suTitle{
    bottom: 0.6rem;
    position: absolute;
    left: 0;
}
.template_1 .swiper-pagination{
    bottom: 22vh;
    top:initial;
    width: 84vw;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    display: flex;
    color: var(--color-w);
    height: 0.56rem;
    line-height: 0.56rem;
    justify-content: space-between;
}
.template_1 .swiper-pagination::before{
    position: absolute; 
    bottom: 0; left: 0; content: ''; 
    height: 1px; width: 100%; 
    background-color: rgba(255, 255, 255, 0.5); display: block;
}
.template_1 .swiper-pagination span{
    width: 100%; height: 100%; position: relative;
    border-radius:0; background-color:rgba(-255, -255, -255, 0);
    margin: 0; padding: 0;
    font-size: var(--font-22);
    opacity:0.5;
}
.template_1 .swiper-pagination span::after{
    position: absolute; 
    bottom: 0; left: 0; content: ''; 
    height: 0.02rem; width: 100%; 
    background-color: rgba(255, 255, 255,0); display: block;
    transition: all 0.5s;
}
.template_1 .swiper-pagination .swiper-pagination-bullet-active{
    height: 100%;
    background-color: rgba(-255, -255, -255, 0);
    margin: 0;
    opacity:1;
}
.template_1 .swiper-pagination .swiper-pagination-bullet-active::after{
    background-color: rgba(255, 255, 255,1);
    transition: all 0.5s;
}
.power{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* position: relative; */
}
.power .con{
    position: absolute; 
    color: var(--color-w);
    font-size: var(--font-20);
    font-family:'p-regular';
    bottom: 0.8rem;
    left:1.62rem;
    width: 6.22rem;
}
.power .con ul{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.power .con li{
    margin: 0.4rem 0;
}
.power .con .ap{ color: rgba(255, 255, 255, 0.7);}
.power .con .big{
 font-size: var(--font-36);
}
.power .con .big b{
    font-size:var(--font-72) ;
    color: #c8a47d;
    font-weight: 400;
    line-height: 1; 
}
.power .con .text1 li:first-child .num{
    width:1.68rem;
    display: inline-block;
}
.power .con .text1 li:last-child .num{
    width:1.1rem;
    display: inline-block;
}
.power .con .text2 .num{
    width:1.1rem;
    display: inline-block; 
}
.efficiency{
    background-color: #e2e3df;
}
.efficiency .title{ 
    position: absolute; 
    left: 1.2rem;
    top: 0.7rem;
    color: var(--color-blankYellow);
    font-size: var(--font-40);
    line-height: 1.12;
}
.efficiency .con{
    padding-top: 1.7rem;
    display: flex;
    justify-content: center;
}
.efficiency .con>div{
    margin: 0 0.22rem;
    width: 8.16rem;
    height: 7rem;
    position: relative;
}
.efficiency .con>div .t{
    color: var(--color-blankYellow);
    font-size: var(--font-40);
    /* margin-left: 0.5rem; */
    position: absolute;
    left: 0.44rem;
    top: 0.2rem;
    line-height: 1.65;
}
.efficiency .con>div ul{ 
    position: absolute;
    left: 0.3rem;
    top:1.04rem;
     font-size: var(--font-20);
    line-height: 1.4;
    color: var(--color-gray1);
    font-family:'p-regular';
}
.efficiency .con>div ul li{
   color: var(--color-gray1);
    margin-bottom: 0.2rem;
    /* padding-left: 0.14rem; */
}
.efficiency .con>div ul .littleT{
    padding-left: 0.14rem;
}
.efficiency .con>div ul .big{
    color: var(--color-yellow);
    font-size: var(--font-28);
    display: inline-block;
    border-bottom: var(--color-gray1) 1px solid;
    padding-left: 0.14rem;
} 
.efficiency .con>div ul li:last-child .big{
    border-bottom:none;
}
.efficiency .con>div ul .big b{
    color: var(--color-yellow);
     font-size: var(--font-72);
     font-weight: 400;
     line-height: 1.3;
} 
.agile .LT{
    color: var(--color-blankYellow);
}
.agile ul li{
    position: absolute;  
    color: var(--color-b);
    font-size: var(--font-20);
    line-height: 1.8;
    
}
.agile ul li .t{
    font-size: var(--font-24);
    line-height: 1.3;
    color: var(--color-yellow);
}
.agile ul li .con{
    margin-bottom: 0.1rem;
    color: var(--color-gray1);
    font-family:'p-regular';
}
.agile ul li.dot0{
    top: 4.1rem;
    left: 1.36rem;
}
.agile ul li.dot1{
    top: 2.15rem;
    left: 10.1rem;
    padding-left: 0.8rem;
}
.agile ul li.dot2{
    top: 7.2rem;
    left: 1.3rem;
}
.agile ul li.dot3{
    top: 4.58rem;
    left: 14.66rem;
    padding-left: 1.26rem;;
}
.agile ul li.dot0 .con{
    width: 2.54rem;
}
.agile ul li.dot1 .con{
    width:5.18rem;
}
.agile ul li.dot2 .con{
    width:3.48rem;
}
.agile ul li.dot3 .con{
    width:2.26rem;
}
.agile ul li.dot0 .line{
    position: absolute;
    left: 1.25rem;
    top: 0;
    width: 6.07rem;
}
.agile ul li.dot1 .line{
    position: absolute;
    left: 0;
    top: 0;
    width: 0.79rem;
}
.agile ul li.dot2 .line{
    position: absolute;
    left: 2.6rem;
    top: 0;
    width: 5.32rem;
}
.agile ul li.dot3 .line{
    position: absolute;
    left: 0;
    top: 0;
    width: 1.26rem;
}

/* 水波纹动画效果 */
.agile ul li .point {
    position: relative;
    width: 0.06rem;
    height: 0.06rem;
    border-radius: 50%;
    background-color: var(--color-yellow);
    margin-top: 0.2rem;
}

.agile ul li .point::before,
.agile ul li .point::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid var(--color-yellow);
    animation: ripple 2s infinite ease-out;
}

.agile ul li .point::after {
    animation-delay: 0.6s;
}

@keyframes ripple {
    0% {
        width: 0.1rem;
        height: 0.1rem;
        opacity: 1;
    }
    100% {
        width: 0.8rem;
        height: 0.8rem;
        opacity: 0;
    }
}

.agile ul li.dot0 .point {
    top: -1.46rem;
    left: 7.3rem;
}
.agile ul li.dot1 .point {
    top: 2.34rem;
    left: -0.65rem;
}
.agile ul li.dot2 .point {
    top: -1.1rem;
    left: 7.9rem;
}
.agile ul li.dot3 .point {
    top: -0.53rem;
    left: -1.26rem;
}
.ampleRoom .long{
    position: absolute;
    /* left: 3.88rem;
    top: 5.4rem; */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.spaceBuy{
    height: auto;
    padding-top: 1.34rem;
    margin-bottom: 0.6rem;
}
.spaceBuy >div{
    width: 16.7rem;
    margin: 0 auto;
}
.spaceBuy >div .word{
   font-size: var(--font-18);
    
}
.spaceBuy >div .t{
    font-size: var(--font-22);
    color: var(--color-yellow);
    line-height: 2.6;
}
.spaceBuy >div .con{
   font-family:'p-regular'; 
   color: var(--color-gray1);
}
.spaceBuy .buy0{
    display: flex;
    justify-content: space-between;
    height: 14.8rem;
}
.spaceBuy .buy0 >div{
    width: 8rem;
}
.spaceBuy .buy0 >div .bg{
 height: auto;
 object-fit: contain;
}
.spaceBuy .buy0 .l .word{
 margin-top: 0.28rem;
}
.spaceBuy .buy0 .r .word{
 margin-top: 0.9rem;
 margin-bottom: 0.12rem;
}
.spaceBuy .buy1 .word,.spaceBuy .buy2 .word{
    margin-bottom: 0.24rem;
}
.family ul{
    position: absolute;
    bottom: 0.58rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-w);
    font-size: var(--font-20);
    font-family:'p-regular'; 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.family ul li{
    padding: 0 0.88rem;
    width: auto;
    border-right: var(--color-w) 1px solid;
}
.family ul li:last-child{
     border-right:none;
}
.family ul li b{
    font-size: var(--font-72);
    color: var(--color-yellow);
    font-weight: 400;
    line-height: 1.1;
}
.sensing .wordCon{
    position: absolute;
    bottom: 0.58rem;
    left: 2.28rem;
    color: var(--color-yellow);
    font-size: var(--font-40); 
    width: cale( 100% - 2.28rem ) ;
}
.sensing .wordCon ul{
    font-family:'p-regular';
    display: flex;
    align-items: center; 
}
 .sensing .wordCon ul li{
     display: flex;
     align-items: center;
     margin-right: 0.84rem;
 }
  .sensing .wordCon ul li .num{
    font-size: var(--font-72);
  }
 .sensing .wordCon ul li .con{
    color: var(--color-w);
    font-size: var(--font-20);
    line-height: 1.4;
    width: 2.52rem;
    margin-left: 0.1rem;
 }
  .safety {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 1rem 0;
  }
  .safety img{width: 100%;}
 .safety >div{
    width: 8rem;
    margin:0 0.4rem;
 }
  .safety .wordCon{
    font-size: var(--font-18);
    color: var(--color-gray1);
    line-height: 1.4;
    margin: 0.2rem 0;
  }
  .safety .wordCon .t{
    color: var(--color-yellow);
    font-size: var(--font-22);
  }
  .safety .wordCon .con{
    font-family:'p-regular';
  }
  .intelligent{background: url(../images/tiggo4csh/intelligent_bg.jpg) no-repeat top left; background-size: cover;}
  .intelligent .title{ color: var(--color-yellow);}
  .intelligent .picCon{ padding-top: 2.26rem;  display: flex; justify-content: space-between; width: 16.58rem; margin:0 auto;flex-wrap: wrap;}
  .intelligent .picCon li{width: 20%; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 0.4rem; }
  .intelligent .picCon li .icon{width: 2rem; height: 1.3rem; margin-bottom: 0.1rem; text-align: center; transform: scale(1); transition: all 0.5s;}
  .intelligent .picCon li .icon img{width: 100%;}
  .intelligent .picCon li .w{ font-size: var(--font-20); text-align: center;}
  .intelligent .picCon li:hover .icon{transform: scale(1.1); transition: all 0.5s;}
  .exclusive .suTitle{
    position: absolute;
    bottom: 0.64rem;
    font-size: var(--font-28);
    color: var(--color-w);
    line-height: 1.2;
    text-align: center;
    width: 100%;
  }
  
  .exclusive ul{
     color: var(--color-w);
     font-family:'p-regular';
  }
.exclusive ul .t{
    font-size: var(--font-22);
     text-align: center;
}
.exclusive ul .con{
    font-size: var(--font-16);
    text-align: center;
}
.exclusive ul li{
    width: 2.5rem;
}
.exclusive ul li::before{
    content: ''; position: absolute; top: 0; left: 0; width: 1.1rem; height: 1px; background-color: #89c4cb; display: block;
}
.exclusive ul li.point0{
    position: absolute;
    left: 2.4rem;
    top: 4.24rem;
     width: 2.5rem;
}
.exclusive ul li.point0::before{
    top: 50%;
    left: 100%;
}
.exclusive ul li.point1{
    position: absolute;
    left: 2.9rem;
    top: 5.46rem;
     width: 1.46rem;
}
.exclusive ul li.point1::before{
    top: 50%;
    left: 100%;
    background-color: #64a42a; 
    width: 1.34rem; 
}
.exclusive ul li.point2{
    position: absolute;
    left:8.08rem;
    top:7.02rem;
}
.exclusive ul li.point2::before{
    top: -1.06rem;
    left:50%;
    background-color: #e0b1c7; 
    width: 1px;
    height: 1.06rem; 
}
.exclusive ul li.point3{
    position: absolute;
    left:11.58rem;
    top:7.02rem;
    width: 2.9rem;
}
.exclusive ul li.point3::before{
    top: -1.3rem;
    left:50%;
    background-color: #bca8e7; 
    width: 1px;
    height: 1.3rem; 
}
.testimonials{height: auto; padding-bottom: 1.54rem;}
.testimonials .buy1{
  width: 16.7rem;
  margin: 0 auto;
  padding-top: 0.75rem;
}
.testimonials .buy1 .bg{height: calc(100vh - 2.3rem);}
.testimonials .buy1 .word{
  font-size: var(--font-18);
  margin-bottom: 0.24rem;
   
}
.testimonials .buy1 .t{
   font-size: var(--font-22);
   color: var(--color-yellow);
   line-height: 2.6;
}
.testimonials .buy1 .con{
  font-family:'p-regular'; 
  color: var(--color-gray1);
}
.testimonials .buy2 {
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 16.7rem; */
  /* margin: 0 auto; */
}
.testimonials .buy2 img{width: 100%;}
.testimonials .buy2 >div{
  width:8rem;
  margin:0 0.4rem;
  height: 6.04rem;
}
.testimonials .videoCon{width: 100%; height:5.1rem;}
.testimonials .buy2 .wordCon{
  font-size: var(--font-18);
  color: var(--color-gray1);
  line-height: 1.4;
  margin: 0.2rem 0;
}
.testimonials .buy2 .wordCon .t{
  color: var(--color-yellow);
  font-size: var(--font-22);
}
.testimonials .buy2 .wordCon .con{
  font-family:'p-regular';
}
.testimonials .buy2 video{
    width: 100%;
    height: 5.1rem;
}
.exclusive .suTitle{
  position: absolute;
  bottom: 0.64rem;
  font-size: var(--font-28);
  color: var(--color-w);
  line-height: 1.2;
  text-align: center;
  width: 100%;
}
.car_comparison {background-color: #b8b0ab; height: auto;overflow: hidden; padding-bottom:1.3rem ; font-family:'p-regular'; display: flex; justify-content: center; flex-direction: column;}
.car_comparison .bg{height: auto; position: absolute; top: 0; left: 0;} 
.car_comparison .comparison_list{display: flex; justify-content: center;  padding-top: 1.82rem; gap: 1rem; }
.car_comparison .comparison_list li{width: 4.76rem;}
.car_comparison .comparison_list li img{width: 100%;}
.car_comparison .comparison_list .title{font-size: var(--font-40); color:#5d5143; line-height: 2;  width: 100%;}
.car_comparison .comparison_list .con_item{padding: 0.1rem 0;}
.car_comparison .comparison_list .con_item .con_item_title{font-size: var(--font-16); color: #353535;}
.car_comparison .comparison_list .con_item .con_item_con{font-size: var(--font-16); color: #353535;}
.car_comparison .comparison_list .con_item .con_item_con b,.car_comparison .comparison_list .con_item .con_item_con strong{font-size: var(--font-28); font-weight: 400; }
.car_comparison .comparison_btn{ padding-top: 0.39rem;display: flex; gap: 0.33rem;position: relative; z-index: 1; align-items: center; width: 10.52rem; margin: 0 auto;}
.car_comparison .comparison_btn  a{display: inline-block; background-color: var(--color-yellow); color: var(--color-w);font-size: var(--font-20); border-radius: 7px; line-height: 0.68rem; width: 3.79rem; text-align: center;}
.car_comparison .comparison_btn p{font-size: var(--font-14); color: #353535; line-height: 1.5; text-align: center;}

.content_us_jump{height: auto;}
.content_us_jump a {
  display: block;
  width: 20%;
  height: 7%;
  position: absolute;
  top: 30%;
  left: 6%;
}
#page-loading{position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; z-index: 5;}
#page-loading .load_img{width: 100%; height: 100%;}
#page-loading .load_img img{width: 100%; height: 100%; object-fit: cover;}
#page-loading .loading-inner{width: 100%; height: 0.2rem; position: absolute; bottom: 0.4rem; left: 0; display: flex; justify-content: center; color: var(--color-w); font-size: var(--font-18); padding-bottom: 0.4rem; flex-direction: column;}
#page-loading .loading-inner .loading-text{margin-bottom: 0.2rem;}
#page-loading .loading-inner .loading-bar{display: flex; align-items: center; justify-content: center; gap: 0.05rem; height: 0.2rem;}
#page-loading .loading-inner .loading-bar .dot{ width: 0.1rem; height: 0.1rem; min-height: 10px; min-width:10px; background-color: var(--color-w); border-radius: 50%; animation: dotScale 1.4s infinite ease-in-out; filter: blur(0.5px);}
#page-loading .loading-inner .loading-bar .dot:nth-child(2){animation-delay: 0.16s;}
#page-loading .loading-inner .loading-bar .dot:nth-child(3){animation-delay: 0.32s;}

@keyframes dotScale {
    0%, 100% {transform: scale(0.2); opacity: 0.5;}
    50% {transform: scale(1); opacity: 1;}
}
/* 响应式设计 - 配合resizeRoot.js */
@media (max-width: 1000px) {
    /* :root {
        --custom-text-size0: 0.5rem;
        --custom-text-size1: 0.32rem;
        --custom-text-size2: 0.28rem;
        --custom-text-size3: 0.26rem;
        --custom-text-size4: 0.24rem;
        --custom-text-size5: 0.22rem;
        --custom-text-size6: 0.2rem;
        --custom-width: 90%;
    }

    .pc-pad {
        display: none;
    }

    .mb-only {
        display: block;
    } */

}

/* 手机端适配 */
@media (max-width: 768px) {
    /* :root {
        --font-72: 0.56rem;
        --font-50: 0.4rem;
        --font-40: 0.36rem;
        --font-36: 0.32rem;
        --font-28: 0.28rem;
        --font-24: 0.24rem;
        --font-22: 0.22rem;
        --font-20: 0.2rem;
        --font-18: 0.32rem;
        --font-16: 0.16rem;
        --font-14: 0.14rem;
    } */

    .pc-pad {
        display: none !important;
    }

    .mb-only {
        display: block !important;
    }

    section {
        width: 100%;
        height: 100vh;
        /* min-height: 100vh; */
    }

    /* Banner */
    .banner .title, .sectionT {
        top: 2.64rem;
       font-size: var(--font-40);
        padding: 0 0.3rem;
        /* line-height: 1.3; */
    }
    .sectionT{
        top:1.9rem;
         font-size: var(--font-50);
    }
    .banner .suTitle, .sectionSuTitle {
        top: 3.3rem;
        font-size: var(--font-32);
        padding: 0 0.3rem;
    }

    .LT {
        top: 1rem;
        left: 0.4rem;
        width: 90%;
    }
    .carColor .bigT{
        left: 0.62rem;
        top: 1.26rem;
        font-size: var(--font-40);
    }
    .carColor .wordCon{
        right: initial;
        top: 8.6rem;
    }
    .carColor .wordCon .suTitle{
        top: 1.5rem;
        /* left: 0.62rem; */
    }
    .carColor .wordCon .title p, .carColor .wordCon .suTitle p{
        left: 0.62rem;
    }
    /* carColor 颜色选择器 */
    .carColor .btnCon {
        display: flex;
        top: 9.34rem;
        left: 0.62rem;
    }

    .carColor .btnCon a {
        width: 0.4rem;
        height: 0.4rem;
        margin: 0 0.14rem;
    }
    .design .wordCon{
        left: 0.62rem;
        top: 2rem;
        width: 84%;
        height: calc(100% - 2rem);
    }
    .design .wordCon .suTitle{
        font-size: var(--font-24);
        margin-top: 0.28rem;
    }
    .template_0{ height: 6.16rem; min-height: auto;}
    .template_0 .swiper-slide{
        width: 6.16rem;
        height: 4.90rem;
        padding: 0 0.1rem;
        object-fit: cover;
    }
    .template_0 .swiper-slide .pic,.template_0 .swiper-slide .video{
        margin-top:0.56rem;
        height: 3.46rem;
    }
    .template_0 .swiper-slide .word{
        height: 0.9rem;
        font-size: var(--font-24);
        line-height: 1.2;
    }
    .template_0 .swiper-pagination{
       bottom: 1rem;
        height: 0.1rem;
        display: flex;
        justify-content: center;
        font-size: var(--font-40);
    }
    .playPauseBtn{
        bottom: 0.2rem;
        right: 0.2rem;
       
    }
    .playPauseBtn i{
        width: 100%;
        height: 100%;
    }
    .power .con{
        left: 0.62rem;
    }
    .power .con{
        font-size: var(--font-32);
    }
    .power .con .big b{
        font-size: var(--font-80);
    }
    .power .con .text1 li:first-child .num{
        width:1.8rem;
        display: inline-block;
    }
    .power .con .text1 li:last-child .num{
        width:1.2rem;
        display: inline-block;
    }
    .power .con .text2 .num{
        width:1.2rem;
        display: inline-block; 
    }

    .power_v{ height: auto; min-height: auto; padding-top: 0.2rem;}
    .power_v.be{margin-top: 0.5rem;}
    .power_v.af{margin-bottom: 0.5rem;}
    .power_v .bg{
        width: 6.8rem;
        height: 3.5rem;
        margin-left: 0.36rem;
        margin-top: 1.2rem;
        /* margin: 2.3rem auto; */
    }
    .power_v .title{
        color: var(--color-yellow);
        font-size: var(--font-32);
        width: 6.2rem;
        left: 0.4rem;
        line-height: 1.25;
        top: 0.4rem;
        /* left: 50%;
        transform: translateX(-50%); */
    }
    .efficiency{height: auto;}
    .efficiency .con{
        flex-wrap: wrap;
    }
    .efficiency .con>div{
        width: 6.54rem;
        height: 5.6rem;
        margin-bottom: 0.5rem;
    }
    .efficiency .con{
        padding-top: 2.04rem;
    }
    .efficiency .con>div .t{
        font-size: var(--font-32);
    }
    .efficiency .con>div ul{
        left: 0.34rem;
        top: 0.98rem;
        font-size: var(--font-18);
    }
    .efficiency .con>div ul li{
        margin-bottom: 0.14rem;
    }
    .efficiency .con>div ul .big{
        font-size: var(--font-20);
    }
    .efficiency .con>div ul .big b{
        font-size: var(--font-50);
        line-height: 1.2;
    }
    .agile{height: 13.7rem; min-height: auto;}
    .agile ul li.dot0{
        left: 4rem;
        top: 1.64rem;
    }
    .agile .bg{
        height: auto;
    }
     .agile ul li.dot1{
        left:3.62rem;
        top: 7.7rem;
        padding-left: 1.88rem;
        width: 3.58rem;
        padding-top: 0.33rem;
    }
     .agile ul li.dot2{
        left:1.1rem;
        top:2.72rem;
    }
    .agile ul li.dot3{
        left:initial;
        top:10.72rem;
        right: 1.64rem;
        padding-left: 0.16rem;
        padding-top: 1rem;
        width: 2.14rem;
    }
    .agile ul li{
        font-size: var(--font-18);
    }
    .agile ul li .t{
        font-size: var(--font-28);
    }
    .agile ul li.dot0 .con{
        width: 3.4rem;
    }
    .agile ul li.dot0 .line{
        width: 0.02rem;
        left: 0.64rem;
        top: 0.96rem;
    }
    .agile ul li.dot0 .point{
        left: 0.62rem;
        top: 3.8rem;
    }
    .agile ul li.dot2 .line{
        width: 0.02rem;
        left: 1.44rem;
        top: 0.7rem;
    }
    .agile ul li.dot2 .point{
        left: 1.42rem;
        top: 3.5rem;
    }
    .agile ul li.dot1 .con{
        width: 100%;
    }
    .agile ul li.dot1 .line{
        width: 2.44rem;
        height: 0.43rem;
    }
    .agile ul li.dot1 .point{
        left: -1.9rem;
        top: -3.2rem;
    }
    .agile ul li.dot3 .line{
      width: 0.66rem;  
    }
    .agile ul li.dot3 .point{
        top: -2.2rem;
        left: -0.18rem;
    }
    .ampleRoom .long {
        left: 1.1rem;
        top: 8.8rem;
        width: 3rem;
        display: none;
    }
    .template_1 .swiper-slide .t{
        position: absolute;
        bottom:3.5rem;
        left: 0;
        width: 100%;
        color: var(--color-w);
        font-size: var(--font-32);
        text-align: center;
    }
    .template_1 .swiper-pagination span{
        width: .64rem;
        height: 0.02rem;
        background-color: var(--color-w);
    }
    .template_1 .swiper-pagination{
        width: 100%;
        align-items: center;
       justify-content: center;
       bottom:1.8rem;
    }
    .template_1 .swiper-pagination::before{
        background-color: rgba(-255, -255, -255, 0);
    }
    .template_1 .swiper-pagination .swiper-pagination-bullet-active{
        background-color: var(--color-w);
        height: 0.02rem;
    }
    .template_1 .swiper-slide .con{
        bottom: 1.6rem;
        font-size: var(--font-24);
        line-height: 1.8;
        width: 80%;
       left: 50%;
       transform: translateX(-50%);
       height: 1.84rem;
       display: block;
       text-align: center;
       text-align: center;
       /* align-items:flex-start;
       flex-wrap: wrap; */
       /* display: flex;
       align-items: center; */
    }
    .template_1 .swiper-slide .title{
        top: 0.68rem;
        left: 0.64rem;
        width: calc( 100% - 1.28rem );
    }
    
    .spaceBuy{ height: auto; min-height: auto;}
    .spaceBuy .buy0{flex-wrap: wrap;width: 90%; height:auto;}
    .spaceBuy .buy0 .l{
        flex-direction:column-reverse;
        display: flex;
    }
    .spaceBuy .buy0 .l .word{ padding: 0 0.24rem; margin-top: 0; margin-bottom: 0.3rem;}
    .spaceBuy >div{width: 90%; margin-bottom: 0.88rem;}
    .spaceBuy >div .t{font-size: var(--font-32); line-height: 1.25; margin-bottom: 0.2rem;}
    .spaceBuy >div .con{font-size: var(--font-24); line-height: 1.8;}
     .warmth,.instantly,.aribags,.exclusive{height: auto;}
    .warmth .bg,.instantly .bg,.aribags .bg,.exclusive .bg{width: 100%; height: auto; padding: 0.68rem 5%;}
    .warmth .LT,.instantly .LT,.aribags .LT,.exclusive .LT{top: 0; color: var(--color-yellow);}
    .instantly .bg{padding-bottom: 0;}
    .family ul{font-size: var(--font-24);}
    .family ul li{padding:0.4rem 0.28rem; max-width: 2.9rem;}
    .family ul li:first-child{padding:0 0.28rem;}
    .family ul li b{font-size: var(--font-80);}
    .sensing .wordCon{left: 0.7rem; font-size: var(--font-32);}
    .sensing .wordCon ul{flex-wrap: wrap;}
    .sensing .wordCon ul li .num{font-size: var(--font-80); width: 0.6rem;}
    .sensing .wordCon ul li .con{font-size: var(--font-24); width: 60%;}
    .safety{flex-wrap: wrap;}
    .safety .l{display: flex; flex-direction:column-reverse; margin-bottom: 1rem;} 
    .safety .wordCon .t{font-size: var(--font-32);}
    .safety .wordCon .con{font-size: var(--font-24);}
    .intelligent{height: auto;}
    .intelligent .picCon{width: 82%; height: auto; padding-top: 3.16rem; padding-bottom: 1.2rem;}
    .efficiency .title{left: 0.6rem;}
    .intelligent .picCon li{width: 50%;}
    .aribags{margin-top: 0.94rem;}
    .aribags .LT,.exclusive .LT{font-size: var(--font-32);}
    .aribags .bg{padding-top: 1.24rem;}
    .exclusive .bg{padding-top: 1.24rem;  }
    .exclusive ul{display: none;}
    .exclusive .suTitle{font-size: var(--font-24);  padding: 0 1.34rem; bottom:1.3rem}
    .testimonials{width: 90%; margin: 0 auto; padding-bottom: 0.54rem;}
    .testimonials .buy1 .word{ font-size: var(--font-24); line-height: 1.1;}
    .testimonials .buy1{width: 100%;}
    .testimonials .buy1 .t{font-size: var(--font-32); line-height: 1.4;}
    .testimonials .buy1 .bg{ height: 3.1rem;}
    .testimonials .buy2{flex-wrap: wrap;}
    .testimonials .buy2 >div{width: 100%; margin: 0.6rem 0; height: auto;}
    /* .testimonials .buy2 video{height: 3.2rem;} */
    .testimonials .videoCon{width: 100%; height:3.1rem;}
    .testimonials .buy2 video{width: 100%; height: 100%;}
    .testimonials .buy2 .l{display: flex;flex-direction:column-reverse;}
    .testimonials .buy2 .wordCon .t{font-size: var(--font-32);}
    .car_comparison .comparison_list li{width: 50%;}
    .comparison_list li img{width: 100%;}
    .car_comparison{ padding-bottom: 1.1rem;}
    .car_comparison .comparison_list {
        gap: 0.1rem;
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }
    .car_comparison .comparison_list .con_item .con_item_title{
        font-size: var(--font-18);
       
    }
    .car_comparison .comparison_btn{
        width: 90%;
        margin: 0 auto;
        padding-left:0;
        font-size: var(--font-24);
         display: block;
    }
    .car_comparison .comparison_btn p{
        text-align: left;
        margin-top: 0.34rem;
        font-size: var(--font-18);
    }
    .content_us_jump a
    {
        width: 54%;
        height: 7%;
        top: 30.5%;
        left: 10.5%;
    }
}