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

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

.mb-only {
    display: none;
}
@font-face {
    font-family: 'Gluten-Bold';
    src: url('./font/Gluten-Bold.ttf') format('truetype');
}



: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-70:0.70rem;
    --font-50:0.5rem;
    --font-40:0.4rem;
    --font-42:0.42rem;
    --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;
    --videoWidth:16.04rem;
    --videoHeight:8rem;
    --header-height: 0.75rem;
}

@media screen and (max-width: 480px) {
    :root {
        --header-height: 1.4rem;
    }
    .carplay {
        display: none;
    }
}

/* iOS 平板滚动回弹抑制（仅 .is-ios-tablet，由 cheryQ.pc.js 注入，不影响手机/桌面） */
html.is-ios-tablet {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}
html.is-ios-tablet,
html.is-ios-tablet body {
    /* 配合 ScrollSmoother.normalizeScroll，减少边界橡皮筋 */
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: auto;
}

/* iOS 平板 carplay：固定合成层，减轻 pin + ScrollSmoother 亚像素抖动 */
html.is-ios-tablet .carplay,
html.is-ios-tablet .carplay .car-box,
html.is-ios-tablet .carplay-mask {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

body {
    font-family: 'p-medium';
    line-height: 1.6;
    color: #333;
    /* 不用纯白：ScrollSmoother 亚像素位移时缝隙会透出白线 */
    background-color: #e8c9a8;
    font-size: var(--custom-text-size4);
    overflow-x: hidden;
    width: 100%;
    /* 基础字体大小 */
}
#smooth-wrapper {
    background-color: #e8c9a8;
}
.bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section{
     width: 100vw;
    height: 100vh;
    height: 100dvh;
    position: relative;
}
.tiggo7_csh{
    width: 100vw;
    position: initial;
    height: auto;
}

.banner{
    position: relative;
}
.banner .logo{
    position: absolute; 
    top: 2rem;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.banner .logo img{
    /* width: 4.5rem; */
    height: 0.52rem;
}
.banner .title,.sectionT{
    position: absolute; 
    top: 2.7rem;
    letter-spacing: 2px;
    width: 100%;
    text-align: center;
    color: var(--color-w);
    font-size: 0.2rem;
    line-height: 1.2;
    font-family: 'p-bold';
}
.banner .title img{
    width: 4.46rem;
}
.banner .suTitle,.sectionSuTitle{
    position: absolute; 
    bottom: 1.46rem;
    left: 0;
    width: 100%;
    font-size:var(--font-50); 
    text-align: center;
    color: var(--color-w);
}
.banner .sectionSuTitle{
    font-size: var(--font-40);
    line-height: 1.4;
    font-family:'p-regular';
    top:1.74rem;
}
.banner .suTitle{
    font-size: var(--font-32);
    line-height: 1.37;
     height: 1.36rem;
     overflow: hidden;
      left: 1.4rem;
      top: 75%;
}
.banner .suTitle li{
  text-align: left;
  height: 1.36rem;
}
.banner .suTitle .big{
    font-size: var(--font-72);
    line-height: 1.25;
}
.banner .suTitle .big .num{
    font-size: var(--font-80);
    line-height: 1.12;
}


.sectionSuTitle{
    font-size: var(--font-24);
    font-family:'p-regular';
}
.suTitle{
    position: absolute;
    top: 1.74rem;
    width: 100%;
    font-size: var(--font-24);
    text-align: center;
    color: var(--color-w);
}
.space_con{
    width: 100%;
    height: .8rem;
}
#page-loading{position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; justify-content: center; z-index: 15;}
#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;}
}
.transition{
    width: 100vw;
    height: 100vh;
    position: relative;
}
.transition .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.transition .word{
    position: absolute;
    bottom: 0.56rem;
    left: 0.92rem;
}
.transition .word .t{
    font-size: var(--font-70);
    line-height:0.85;
    font-family: 'p-medium';
    color: #fed63b;
}
.transition .word .orange{
    color: #feab28;
}
.transition .word .desc{
    font-size: var(--font-24);
    line-height: 2.1;
    color: #fff;
    margin-top: 0.24rem;
}


.moduleName {
    position: relative;
    width: 100vw;
    height: 130vh;
    background-color: #f3e2d1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: none;
    /* background: url(../images/cheryQ/bg.png) no-repeat center center; */
    background-size: cover;

}

.moduleName .spotlight-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e9a757;
    pointer-events: none;
    z-index: 3;
    clip-path: circle(0px at -200px -200px);
    will-change: clip-path;
}
.moduleName .spotlight-layer .bg{width: 100%; height: 100%; background-color: #e9a757; z-index: 2;  position: absolute; top: 0; left: 0;}
.moduleName .w0-swap,
.moduleName .w1-swap {
    position: absolute;
    font-family: 'p-bold', sans-serif;
    font-weight: bold;
    line-height: 1;
    z-index: 4;
    pointer-events: none;
}

.moduleName .w0-swap {
    top: 2.9rem;
    left: 7.4rem;
    font-size: 1.6rem;
    color: transparent;
    -webkit-text-stroke: 0.03rem #f5f0e6;
    text-stroke: 0.03rem #f5f0e6;
    transform: perspective(4.5rem) rotateY(26deg);
    transform-origin: 45% 50%;
    transition: all 0.5s ease;
}

.moduleName .w1-swap {
    top: 4.6rem;
    left: 4.2rem;
    font-size: 2rem;
    color: #f5f0e6;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    transform: perspective(5rem) rotateY(-26deg);
    transform-origin: 30% 50%;
    transition: all 0.5s ease;
}

.moduleName .w0,
.moduleName .w1 {
    position: absolute;
    font-family: 'p-bold', sans-serif;
    font-weight: bold;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 0.03rem #e9a757;
    text-stroke: 0.03rem #e9a757;
    z-index: 2;
    transition: color 0.5s ease, transform 0.5s ease;
}

.moduleName .w0 {
    top: 2.9rem;
    left: 7.4rem;
    font-size: 1.6rem;
    transform: perspective(4.5rem) rotateY(26deg);
    transform-origin: 45% 50%;
    transition: all 0.5s ease;
}

.moduleName .w1 {
    top: 4.6rem;
    left: 4.2rem;
    font-size: 2rem;
    transform: perspective(5rem) rotateY(-26deg);
    transform-origin: 30% 50%;
    color: #e9a757;
    transition: all 0.5s ease;
}
.moduleName .w-box{}
.moduleName .w-box .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/cheryQ/title_bg.jpg) no-repeat center center; background-size: cover;  z-index: 1;}
.moduleName.spaceModule .w-box .bg{background: linear-gradient(to bottom, #e4e2ae, #f3e2d1);}
.moduleName .w-box.text-reverse .w0 , .spotlight-layer.text-reverse .w0-swap{
    transform: none;
    transition: transform 0.5s ease;
}


.moduleName .w-box.text-reverse .w1 , .spotlight-layer.text-reverse .w1-swap{
    transform: perspective(5rem) rotateY(0deg);
    left: 6rem;
    transition: all 0.5s ease;
}

.moduleName:not(.is-entered) .w-box .bg {
    opacity: 0;
}

.moduleName:not(.is-entered) .w0,
.moduleName:not(.is-entered) .w1 {
    opacity: 0;
    visibility: hidden;
}

.moduleName.is-entering .w0,
.moduleName.is-entering .w1 {
    transition: none;
}

.moduleName .w-box .bg {
    will-change: opacity;
}


.moduleSuTitle{
    width: 100%;
    height: auto;
   height: 100vh;
    /* margin: 20% 0; */
    /* box-sizing: border-box; */
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */
    /* overflow: hidden; */
    /* background: url(../images/cheryQ/bigword.png) no-repeat center center; */
    background-color: #f3e2d1;
    background-size: 100% auto;
    position: relative;
}

.moduleSuTitle .title-box{
  position: absolute;
   overflow-x: hidden;
    width: 100%;
    left: 50%;

    transform: translatey(-50%);
  /* transform-origin: 50% 50%; */
}
.moduleSuTitle .title-box .item{
    /* padding: 0 0.6rem; */
     display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
     font-size: 1.3rem;
     position:absolute;
     left: 50%;
     top: 50%;
     /* transform: translate(-50%,-50%); */
     object-fit: cover;
}
.moduleSuTitle .title-box:nth-child(1) {
   
     top: 0.36rem;
     /* left: 50%; */
    /*left: 4.8rem; */
    z-index: 2;
    height: 2.6rem;
}
.moduleSuTitle .title-box:nth-child(2) {
    top: 2.1rem;
    /* left: 6.6rem; */
    height: 2.4rem;
   
}
.moduleSuTitle .title-box:nth-child(3) {
    top: 3.54rem;
    /* left: 4rem; */
     height: 2.4rem;
    z-index: 2;
}
.moduleSuTitle .title-box:nth-child(4) {
    top: 5.16rem;
    /* left: 4.5rem; */
    height: 2.4rem;
   
}
.moduleSuTitle.uniqueModule .title-box:nth-child(1) {
     height: 3rem;
}
.moduleSuTitle .title-box:nth-child(1) .item{
    height: 1.7rem;
    width: 6.1rem;
    padding: 0 0.6rem;
    color: #edca70;
    background-color: #c88f64;
    border-radius: 0.1rem;
    border: 0.14rem solid #f3e2d1;
    transform-origin: 30% 50%;
    /* transform:translate(-50%,-50%) rotate(3deg); */
    transform:translate(-70%,-50%) rotate(3deg);
}
.moduleSuTitle.uniqueModule .title-box:nth-child(1) .item{
    width: 16rem;
    font-size: 1.1rem;
    transform:translate(-50%,-50%) rotate(1deg);
}
.moduleSuTitle .title-box:nth-child(2) .item{
    height: 1.46rem;
     width: 6.18rem;
    color: #f7e7d7;
    background-color: #c88f64;
    border-radius: 0.1rem;
    border: 0.1rem solid #f3e2d1;   
     transform-origin: 30% 50%;
    /* transform:translate(-50%,-50%) perspective(5rem) rotateY(-8deg); */
    transform:translate(-40%,-50%) perspective(5rem) rotateY(-8deg);
}
.moduleSuTitle .title-box:nth-child(3) .item{
    height: 1.6rem;
     width: 6.72rem;
    color: #eaa758;
    background-color: #a16833;
    border-radius: 0.1rem;
    border: 0.1rem solid #f3e2d1;   
     transform-origin: 30% 50%;
    transform:translate(-50%,-50%)  rotate(1deg);
}
.moduleSuTitle .title-box:nth-child(4) .item{
    height: 1.6rem;
    width: 4.54rem;
    color: #f7e7d7;
    background-color: #edca70;
    border-radius: 0.1rem;
    border: 0.1rem solid #f3e2d1; 
     transform-origin: 30% 50%;
    transform:translate(-50%,-50%) rotate(-2.5deg);  
}
.moduleSuTitle.spaceModule .title-box:nth-child(1) .item{
    width: 7.2rem;
     transform:translate(-50%,-50%) rotate(3deg);
}
.moduleSuTitle.spaceModule .title-box:nth-child(3) .item{
    width: 4.6rem;
}
.moduleSuTitle.spaceModule .title-box:nth-child(4) .item{
    width: 6.6rem;
}
/* carplay section styles */
.carplay {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    background-color: #f0e9de;
    overflow: hidden;
}

.carplay-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carplay-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #f0e9de;
    transition: background-color 0.5s ease, background-image 0.5s ease;
}

.carplay.is-intro .carplay-bg {
    background-color: #f0e9de;
}

.carplay.is-stats .carplay-bg {
    background-color: #fff;
    background-image: none;
}

.carplay.is-features .carplay-bg {
    background-color: #fff;
    background-image: none;
}

.carplay-screen {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

.carplay.is-features .carplay-screen--features {
    pointer-events: none;
}

.carplay.is-features .carplay-features-panel {
    pointer-events: auto;
}

/* screen 1 – intro copy */
.carplay-screen--intro {
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0.6rem 1.1rem;
    background: linear-gradient(180deg, rgba(232, 223, 208, 0) 55%, rgba(210, 198, 180, 0.35) 100%);
}

.carplay-intro-text {
    max-width: 11.6rem;
    text-align: center;
    color: #fff;
}

.carplay-intro-title,
.carplay-intro-desc {
    will-change: opacity, transform;
}

.carplay-intro-title {
    margin: 0 0 0.16rem;
    font-size: var(--font-72);
    line-height: 1.05;
    font-family: 'Poppins-SemiBold', 'p-bold', sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.carplay-intro-desc {
    margin: 0;
    font-size: var(--font-24);
    line-height: 1.5;
    font-family: 'Poppins-Regular', 'p-reg', sans-serif;
    opacity: 0.92;
}

.carplay:not(.is-intro-entered) .carplay-intro-title,
.carplay:not(.is-intro-entered) .carplay-intro-desc {
    opacity: 0;
    transform: translateY(0.4rem);
}

/* screen 2 – stats panel */
.carplay-screen--stats {
    display: flex;
    align-items: center;
    padding-left: 1rem;
    background: transparent;
    width: 50%;
}

.carplay-stats {
    max-width: 8.7rem;
}

.carplay-stats .icon{
    width: 1.09rem;
    height: 0.85rem;
    margin-bottom: 0.26rem;
   
}
.carplay-stats .icon img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carplay-stats-title {
    margin: 0 0 0.72rem;
    font-size: 0.6rem;
    line-height: 1.08;
    font-family: 'Poppins-SemiBold', 'p-bold', sans-serif;
    font-weight: 700;
    color: #2b2b2b;
    will-change: opacity, transform;
}

.carplay-stats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    /* flex-direction: column; */
    gap: 0.4rem;
}

.carplay-stats-list li {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    position: relative;
    padding-right: 0.44rem;
  
}
.carplay-stats-list li::after{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 1px;
    height: 90%;
    background-color: #cecece;
    display: block;
    
}
.carplay-stats-list li:last-child::after{
    display: none;
}
.carplay-stats-num {
    font-size: var(--font-50);
    line-height: 1;
    /* font-family: 'Poppins-SemiBold', 'p-bold', sans-serif; */
    /* font-weight: 700; */
    color: #e69138;
}

.carplay-stats-num .num {
    display: inline-block;
    font-weight: inherit;
    font-style: normal;
}

.carplay-stats-label {
    font-size: var(--font-16);
    line-height: 1.35;
    font-family: 'Poppins-Regular', 'p-reg', sans-serif;
    color: #5a5a5a;
    will-change: opacity, transform;
}
.appearance-title{
    color: #3e3e3e;
    font-size:0.4rem ;
    line-height: 1.25;
    text-transform: uppercase;
    margin-top: 1rem;
}
.appearance-desc{
    color: #6b6b6b;
    font-size:0.2rem ;
    line-height: 1.5;
    margin-top: 0.22rem;
    /* font-family: 'Poppins-Regular', 'p-reg', sans-serif; */
}
.appearance-note{
    color: rgba(-255, -255, -255, 0.5);
    font-size:0.12rem ;
    line-height: 1.2;
    margin-top: 0.22rem;
}



.carplay-stats {
    will-change: opacity, transform;
}

.carplay:not(.is-stats-entered) .carplay-stats {
    opacity: 0;
    transform: translateX(-1.6rem);
}

/* screen 3 – Zoox-style features */
.carplay-screen--features {
    z-index: 1;
}

.carplay-features-bg {
    position: absolute;
    inset: 0;
    background: transparent;
    overflow: hidden;
}

.carplay-features-shapes,
.carplay-spheres {
    display: none;
}

.carplay-shape {
    position: absolute;
    border-radius: 0.08rem;
}

.carplay-shape--purple {
    top: 8%;
    right: 18%;
    width: 42%;
    height: 52%;
    background: linear-gradient(160deg, #c9a8e8 0%, #9b72d4 100%);
    transform: rotate(-8deg);
}

.carplay-shape--green {
    bottom: 12%;
    right: 8%;
    width: 28%;
    height: 38%;
    background: linear-gradient(140deg, #d4f06a 0%, #a8d42e 100%);
    transform: rotate(12deg);
}

.carplay-shape--tan {
    bottom: 0;
    left: 22%;
    width: 55%;
    height: 34%;
    background: linear-gradient(180deg, #e8d4b8 0%, #d4bc98 100%);
    border-radius: 0.4rem 0.4rem 0 0;
}

.carplay-letter-q {
    position: absolute;
    top: 10%;
    right: 6%;
    font-size: 3.6rem;
    line-height: 1;
    font-family: 'Poppins-SemiBold', 'p-bold', sans-serif;
    font-weight: 700;
    color: #f5d547;
    opacity: 0.85;
    transform: rotate(-6deg);
    pointer-events: none;
}

.carplay-spheres {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.carplay-sphere {
    position: absolute;
    border-radius: 50%;
}

.carplay-sphere--yellow {
    top: 14%;
    left: 12%;
    width: 0.64rem;
    height: 0.64rem;
    background: radial-gradient(circle at 35% 30%, #fff6a8 0%, #f5d547 45%, #d4a820 100%);
    box-shadow: 0 0.12rem 0.32rem rgba(212, 168, 32, 0.35);
}

.carplay-sphere--green {
    top: 42%;
    right: 16%;
    width: 0.48rem;
    height: 0.48rem;
    background: radial-gradient(circle at 35% 30%, #e8ffb0 0%, #b8e635 45%, #8ab820 100%);
    box-shadow: 0 0.1rem 0.28rem rgba(138, 184, 32, 0.3);
}

.carplay-sphere--purple {
    bottom: 18%;
    right: 10%;
    width: 0.76rem;
    height: 0.76rem;
    background: radial-gradient(circle at 35% 30%, #e8c8ff 0%, #b07de8 45%, #7b4fc4 100%);
    box-shadow: 0 0.16rem 0.4rem rgba(123, 79, 196, 0.35);
}

.carplay-features-panel {
    position: absolute;
    left: 0;
    bottom: 0.2rem;
    z-index: 5;
    width: fit-content;
    min-width: 4.1rem;
    max-width: min(6.4rem, calc(52vw - 0.48rem));
    height: auto;
    padding: 0.44rem 0.4rem 0.48rem;
    background: #fff;
    border-radius: 0 0.28rem 0 0;
    pointer-events: none;
    box-sizing: border-box;
    overflow: visible;
    opacity: 0;
    will-change: opacity, transform;
    transform-origin: left bottom;
}

.carplay.is-feature-expanded .carplay-features-panel {
    padding: 0.36rem 0.4rem 0.4rem;
    min-width: 5rem;
    max-width: min(7.8rem, calc(62vw - 0.48rem));
    width: fit-content;
    height: auto;
}

.carplay-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.carplay.is-feature-expanded .carplay-features-list {
    display: none;
}

.carplay-features-detail {
    display: none;
    position: relative;
    width: max-content;
    max-width: 100%;
    opacity: 0;
}

.carplay.is-feature-expanded .carplay-features-detail {
    display: block;
    opacity: 1;
}

.carplay-features-detail-title {
    margin: 0;
    padding-right: 0.52rem;
    font-size: var(--font-24);
    line-height: 1.35;
    font-family: 'Poppins-SemiBold', 'p-bold', sans-serif;
    font-weight: 600;
    color: #2b2b2b;
    letter-spacing: -0.01em;
    white-space: normal;
    overflow-wrap: break-word;
}

.carplay-features-detail-desc {
    margin: 0.14rem 0 0;
    font-size: var(--font-14);
    line-height: 1.5;
    font-family: 'Poppins-Regular', 'p-reg', sans-serif;
    font-weight: 400;
    color: #8a8a8a;
    text-transform: lowercase;
    word-break: normal;
    overflow-wrap: normal;
}

.carplay-features-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    flex-shrink: 0;
    width: 0.4rem;
    height: 0.4rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #c9a882;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
}

.carplay-features-close:hover {
    background: #b8956f;
    transform: scale(1.05);
}

.carplay-features-close svg {
    display: block;
    width: 0.2rem;
    height: 0.2rem;
    pointer-events: none;
}

.carplay-features-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    cursor: pointer;
    width: 4rem;
}

.carplay-features-label {
    font-size: var(--font-22);
    line-height: 1.35;
    font-family: 'Poppins-Regular', 'p-reg', sans-serif;
    color: #2b2b2b;
}

.carplay-features-list li:hover .carplay-features-label {
    font-family: 'Poppins-SemiBold', 'p-bold', sans-serif;
    font-weight: 600;
}

.carplay-features-btn {
    flex-shrink: 0;
    width: 0.36rem;
    height: 0.36rem;
    padding: 0;
    border: none;
    border-radius: 0.08rem;
    background: #c9a882;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease;
}

.carplay-features-list li:hover .carplay-features-btn {
    background: #b8956f;
    transform: scale(1.06);
}

.carplay-features-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.18rem;
    height: 0.18rem;
    transition: transform 0.35s ease;
}

.carplay-features-btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.carplay-feature-media {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.carplay.is-feature-expanded .carplay-feature-media {
    opacity: 1;
    visibility: visible;
}

.carplay-feature-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    will-change: opacity, transform;
}

.carplay-mask {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.carplay.is-features .carplay-mask,
.carplay.is-mask-clipped .carplay-mask {
    clip-path: url(#carplay-clip);
    -webkit-clip-path: url(#carplay-clip);
    will-change: clip-path;
}

.carplay-mask-svg {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.carplay .car-box {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.carplay.is-feature-expanded .car-box {
    opacity: 0;
    transform: scale(0.97);
}

.carplay.is-intro .car-box {
    background-color: transparent;
}

.carplay.is-stats .car-box {
    top: 0.2rem;
    height: calc(100% - 0.4rem);
    margin-right: 0.48rem;
    border-radius: 0.4rem;
    background-color: #f0e9de;
    overflow: hidden;
    box-shadow: 0 0.12rem 0.4rem rgba(0, 0, 0, 0.06);
}

.carplay.is-intro .car-box,
.carplay.is-features .car-box {
    top: 0;
    height: 100%;
    margin-right: 0;
    border-radius: 0;
    box-shadow: none;
}

.carplay.is-features .car-box {
    background-color: transparent;
}

.car-box .car {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-box .car.car-source-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.car-box .car-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.carplay.is-stats,
.carplay.is-features,
.carplay.is-intro {
    background-color: transparent;
}

.carplay-content {
    position: relative;
    height: 100%;
}


.cheryQ_csh .carplay-model{
    height:auto;
   padding-bottom: 1rem;
    /* background-color: #f3e2d1; */
}
.cheryQ_csh .carplay-model .car0{
    height:12rem;
    width: 100%;
    background: url(../images/cheryQ/car_mb.jpg) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
}
.cheryQ_csh .carplay-model .car0 .word{
    position: absolute;
    bottom:1rem;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}

.cheryQ_csh .carplay-model .car0 .word .carplay-intro-title{
    font-size: 0.5rem;
    line-height: 1.56;
    font-family: 'p-bold';
    color: #fff;
    text-align: center;
}
.cheryQ_csh .carplay-model .car0 .word .carplay-intro-desc{
    font-size: 0.26rem;
    line-height: 1.56;
    /* font-family: 'p-bold'; */
    color: #fff;
    text-align: center;
}
.cheryQ_csh .carplay-model .car1{
   background-color: #fff;
}

.cheryQ_csh .carplay-model .car1 .word{
    padding: 0.8rem;
}

.cheryQ_csh .carplay-model .car1 .icon{
    width:1.2rem;
    height:1rem ;
    margin-bottom: 0.2rem;
    /* height: 0.8rem; */
    /* margin: 0 auto; */
}
.cheryQ_csh .carplay-model .car1 .icon img{
    width: 100%;
    /* height: 100%;
    object-fit: cover; */
}


.cheryQ_csh .carplay-model .car1 .carplay-stats-title{
    font-size: 0.4rem;
    line-height: 1.56;
    font-family: 'p-bold';
    color: #000;
    text-align: center;
    /* padding: 0.8rem 0; */
}
.cheryQ_csh .carplay-model .car1 .carplay-stats-list{
    padding: 0.2rem 0;
    gap:0.2rem;
}
.cheryQ_csh .carplay-model .car1 .carplay-stats-list li{
    display: flex;
    flex-direction:initial;
    justify-content: space-between;
    flex-direction: column;
    margin-right: 0;
}
.cheryQ_csh .carplay-model .appearance-desc{
    font-size: 0.24rem;
}
.cheryQ_csh .carplay-model .appearance-note{
    font-size: 0.18rem;
}
.cheryQ_csh .carplay-model .car1 .carplay-stats-list{
    display: flex;
}
.cheryQ_csh .carplay-model .carplay-stats-list li::after{
    display: none;
}
.cheryQ_csh .carplay-model .car1 .carplay-stats-label{
    font-size: 0.2rem;
    line-height: 1.56;
    color: #000;
    /* text-align: center; */
}
.cheryQ_csh .carplay-model .car2{
    width: 90%;
    height: 9rem;
    border-radius: 0.4rem;
    overflow: hidden;
     background-color: #f3e2d1;
     margin: 0 auto;
     padding-bottom: 1rem;
}
.cheryQ_csh .carplay-model .car2 .wordCon{
    position: relative;
    width: 90%; 
    margin: 0 auto;
    margin-top: 1rem;
}
.cheryQ_csh .carplay-model .car2 .pic{
    width: 95%; 
    margin: 0 auto;
    height: 3.8rem;
    margin-top: 1rem;
     border-radius: 0.4rem;
    overflow: hidden;
    background: url(../images/cheryQ/car/car200271.jpg) no-repeat center center;
    background-size: 100% 100%;
    position: relative;
}
.cheryQ_csh .carplay-model .car2 .pic li{
    width: 100%;
    height: 100%;
    display: none;
}
.cheryQ_csh .carplay-model .car2 .pic li.active{
    display: block;
}
.cheryQ_csh .carplay-model .car2 .pic li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .carplay-model .car2 .btnList{
    position: absolute;
    top: 0;
    left:0;
}
.cheryQ_csh .carplay-model .car2 .btnList a{
    display: flex;
    gap: 0.2rem;
    align-items: center;
    font-size: 0.3rem;
    margin-bottom: 0.3rem;
    /* justify-content: space-between; */
}
.cheryQ_csh .carplay-model .car2 .btnList .carplay-features-btn-icon{
    width: 0.4rem;
    height: 0.4rem;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 0.08rem;
    background: #c9a882;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.cheryQ_csh .carplay-model .car2 .btnList .carplay-features-btn-icon svg {
    display: block;
    width: 70%;
    height: 70%;
}

.cheryQ_csh .carplay-model .car2 .chooseTitle{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}
.cheryQ_csh .carplay-model .car2 .chooseTitle.active{
    display: block;
}
.cheryQ_csh .carplay-model .car2 .chooseTitle li{
    display: none;
    /* flex-direction: column; */
    align-items: center;
    /* justify-content: center; */
    gap: 0.2rem;
    width: 100%;
}
.cheryQ_csh .carplay-model .car2 .chooseTitle li.active{
    display: flex;
}
.cheryQ_csh .carplay-model .car2 .chooseTitle li .con .t{
   font-size: 0.32rem;
}
.cheryQ_csh .carplay-model .car2 .chooseTitle li .con .d{
    font-size: 0.26rem;
}

/* .cheryQ_csh .carplay-model .carplay-modelSwiper{
   width: 100%;
   height: 100%;
}
.cheryQ_csh .carplay-model .carplay-modelSwiper .word{
    width: 100%;
    height: 50%;
    
}
.cheryQ_csh .carplay-model .carplay-modelSwiper .car{
    width: 100%;
    height:4rem;
}
.cheryQ_csh .carplay-model .carplay-modelSwiper .car img{
    width: 100%;
    height: 100%;
} */

.cheryQ_csh .appearance{
    position: relative;
    width: 100%;
    height: 100%;
}
.cheryQ_csh .appearance .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .appearance .title{
    position: absolute;
    bottom: 1.38rem;
    left: 0rem;
    width: 100%;
    text-align: center;
    font-size: 0.5rem;
    line-height: 1.56;
    font-family: 'p-bold';
    color: #fff;
}
.cheryQ_csh .appearance .desc{
    position: absolute;
    bottom: 0.84rem;
    left: 0rem;
    width: 100%;
    text-align: center;
    font-size: 0.2rem;
    line-height: 3.9;
    /* font-family: 'p-bold'; */
    color: #fff;
}


.cheryQ_csh .carType{
    
}
.cheryQ_csh .carType .swiper{
    width: 100%;
    height: 100%;
}
.cheryQ_csh .carType .swiper-slide{
    width: 100%;
    height: 100%;
}
.cheryQ_csh .carType .swiper-slide .bg-box{
    width: 100%;
    height: 100%;
}
.cheryQ_csh .carType .swiper-slide .bg-box .bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* transform: translateX(50%); */
    /* opacity: 0;
    transition: all 0.5s ease-in-out; */
    /* object-fit: cover; */
}
.cheryQ_csh .carType .swiper-slide .bg-box .bg img,
.cheryQ_csh .carType .swiper-slide .bg-box .bg video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .carType .swiper-slide .bg-box .box{
    background: url(../images/cheryQ/carType_white0.png);
    width: 7.8rem;
    height: 7.8rem;
    background-size: 100% 100%;
    position: absolute;
    top: 1rem;
    left: 0.74rem;
    z-index: 2;
    color: #3e3e3e;
    font-size: 0.28rem;
    padding-top: 4.04rem;
    padding-left: 0.56rem;
    line-height: 1.4;
   
}
.cheryQ_csh .carType .swiper-slide:nth-child(2) .bg-box .box{
   background-image: url(../images/cheryQ/carType_white1.png);
   /* background-size: cover; */
}
.cheryQ_csh .carType .swiper-slide:nth-child(3) .bg-box .box{
   background-image: url(../images/cheryQ/carType_white2.png);
   /* background-size: cover; */
}
.cheryQ_csh .carType .swiper-slide:nth-child(4) .bg-box .box{
   background-image: url(../images/cheryQ/carType_white4.png);
   /* background-size: cover; */
}
.cheryQ_csh .carType .swiper-slide:nth-child(5) .bg-box .box{
   background-image: url(../images/cheryQ/carType_white5.png);
   /* background-size: cover; */
}
.cheryQ_csh .carType .swiper-slide:nth-child(6) .bg-box .box{
   background-image: url(../images/cheryQ/carType_white3.png);
   /* background-size: cover; */
}

.cheryQ_csh .carType .shadow{
   width: 11.63rem;
   height: 6.49rem;
    top: 3.42rem;
    left: 3rem;
    position: absolute;
    /* z-index:3; */
    display: flex;
    justify-content: center;
    filter: sepia(0.3) saturate(1.2);
    transform: translateX(120%) scale(0.9);
    opacity: 0;
}
.cheryQ_csh .carType .car{
    z-index:3;
    width: 9.82rem;
    top: 3.42rem;
    left: 5.16rem;
    position: absolute;
    /* z-index:3; */
    display: flex;
    justify-content: center;
    transform: translateX(120%) scale(0.9);
    opacity: 0;
}
.cheryQ_csh .carType .car .body{
    width: 100%;
}
.cheryQ_csh .carType .car .wheel{
    width: 1.52rem;
}
.cheryQ_csh .carType .car .wheel{
    width: 1.52rem;
}
.cheryQ_csh .carType .car .wheelLeft{
   position: absolute;
    top: 2.14rem;
    left:0.9rem;
}
.cheryQ_csh .carType .car .wheelRight{
    position: absolute;
    top: 2.14rem;
    right: 1.4rem;
}

/* 车轮旋转动画 */
@keyframes wheelRotateIn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-280deg); }
}
@keyframes wheelRotateOut {
  from { transform: rotate(-280deg); }
  to   { transform: rotate(0deg); }
}

.cheryQ_csh .carType .car .wheel {
  transform-origin: center center;
}
.cheryQ_csh .carType.init .swiper-slide-active .car{
    transform: translateX(120%);
    opacity: 0;
    transition: none !important;
}
.cheryQ_csh .carType.init .swiper-slide-active .bg-box .box{
    transform: translateX(-120%) scale(0.8);
    opacity: 0;
    transition: none !important;
}
.cheryQ_csh .carType.init .swiper-slide-active .car .wheel{
    transform: rotate(280deg);
    transition: none !important;
}

.cheryQ_csh .carType .swiper-slide-next .car .wheel{
    transform: rotate(280deg);
    transition: all 0.6s ease-out;
}
/* 驶入时车轮旋转（停车减速缓冲，与车身动画同步） */
.cheryQ_csh .carType .swiper-slide-active .car .wheel {
    transform: rotate(0deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
  /* animation: wheelRotateIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.6s; */

}

/* 驶出时车轮旋转（开车加速缓冲，与车身动画同步） */
.cheryQ_csh .carType .swiper-slide-prev .wheel {
     transform: rotate(-560deg);
     transition: all 0.6s ease-in;
  /* animation: wheelRotateOut 0.8s ease-in forwards; */
}
/* .cheryQ_csh .carType .swiper-slide-next .shadow{
     transform: translateX(120%);
    transition: transform 0.6s ease-in, opacity 0.4s ease-out;
} */
.cheryQ_csh .carType .swiper-slide-next .car{
    transform: translateX(120%);
    transition: transform 0.6s ease-in, opacity 0.4s ease-out;
}
/* .cheryQ_csh .carType .swiper-slide-active .bg-box .bg{
    transform: translateX(0);
    opacity: 1;
    transition: all 0.3s 1s ease-in-out;
} */
 .cheryQ_csh .carType  .swiper-slide-next .bg-box .box{
    transform: translateX(-120%) scale(0.8);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.5s ease-out;
 }
 
.cheryQ_csh .carType .swiper-slide-active .bg-box .box{
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: transform 0.8s ease-out 0.4s, opacity 0.5s ease-out 0.4s;
}
.cheryQ_csh .carType .swiper-slide .bg-box .box .con{
   width: 3.6rem;
}
/* .cheryQ_csh .carType .swiper-slide-active .shadow{
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.55s, opacity 0.5s ease-out 0.55s;
} */
.cheryQ_csh .carType .swiper-slide-active .car{
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s, opacity 0.5s ease-out 0.6s;
}
/* .cheryQ_csh .carType .swiper-slide-prev .shadow{
    transform: translateX(-120%);
    transition: transform 0.6s ease-in, opacity 0.4s ease-out;
} */
.cheryQ_csh .carType .swiper-slide-prev .car{
    transform: translateX(-120%);
    transition: transform 0.6s ease-in, opacity 0.4s ease-out;
}
 .cheryQ_csh .carType .swiper-slide-prev .bg-box .box{
    transform: translateX(100%) scale(1.1);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease-out;
 }

/* carType pagination click: same enter/exit as scroll */
.cheryQ_csh .carType .swiper-slide.car-type-leaving{
    opacity: 1 !important;
    z-index: 2;
    pointer-events: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-from-forward,
.cheryQ_csh .carType .swiper-slide.car-type-enter-from-back,
.cheryQ_csh .carType .swiper-slide.car-type-enter-to{
    z-index: 3;
}
.cheryQ_csh .carType .swiper-slide.car-type-leaving .car{
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-leaving .bg-box .box{
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-leaving .car .wheel{
    transform: rotate(0deg);
    transition: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-from-forward .car{
    transform: translateX(120%) scale(0.9);
    opacity: 0;
    transition: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-from-forward .bg-box .box{
    transform: translateX(-120%) scale(0.8);
    opacity: 0;
    transition: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-from-forward .car .wheel{
    transform: rotate(280deg);
    transition: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-from-back .car{
    transform: translateX(-120%);
    opacity: 0;
    transition: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-from-back .bg-box .box{
    transform: translateX(100%) scale(1.1);
    opacity: 0;
    transition: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-from-back .car .wheel{
    transform: rotate(-560deg);
    transition: none;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-to .car{
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s, opacity 0.5s ease-out 0.6s;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-to .bg-box .box{
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: transform 0.8s ease-out 0.4s, opacity 0.5s ease-out 0.4s;
}
.cheryQ_csh .carType .swiper-slide.car-type-enter-to .car .wheel{
    transform: rotate(0deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s;
}
.cheryQ_csh .carType .swiper-slide.car-type-leaving.car-type-leaving-forward .car{
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 0.6s ease-in, opacity 0.4s ease-out;
}
.cheryQ_csh .carType .swiper-slide.car-type-leaving.car-type-leaving-forward .bg-box .box{
    transform: translateX(100%) scale(1.1);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease-out;
}
.cheryQ_csh .carType .swiper-slide.car-type-leaving.car-type-leaving-forward .car .wheel{
    transform: rotate(-560deg);
    transition: all 0.6s ease-in;
}
.cheryQ_csh .carType .swiper-slide.car-type-leaving.car-type-leaving-back .car{
    transform: translateX(120%) scale(0.9);
    opacity: 0;
    transition: transform 0.6s ease-in, opacity 0.4s ease-out;
}
.cheryQ_csh .carType .swiper-slide.car-type-leaving.car-type-leaving-back .bg-box .box{
    transform: translateX(-120%) scale(0.8);
    opacity: 0;
    transition: transform 0.6s ease-out, opacity 0.5s ease-out;
}
.cheryQ_csh .carType .swiper-slide.car-type-leaving.car-type-leaving-back .car .wheel{
    transform: rotate(280deg);
    transition: all 0.6s ease-out;
}

/* swiper-pagination styles */
.cheryQ_csh .carType .swiper-pagination{
    position: absolute;
    bottom: initial;
    top: 7.8rem;
    left:1.28rem;
    width: auto;
    /* transform: translateX(-50%); */
    /* left: 50%;
    transform: translateX(-50%); */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    z-index: 3;
}
.cheryQ_csh .carType .swiper-pagination-bullet{
    width: 0.26rem;
    height: 0.26rem;
    border-radius: 50%;
    background: #f2e9db;
    opacity: 1;
    cursor: pointer;
    border: 0.01rem solid #f2e9db;
    transition: all 0.3s ease;
    position: relative;
}
.cheryQ_csh .carType .swiper-pagination-bullet:nth-child(2){
    background: #efc7bf;
    border-color: #efc7bf;
}
.cheryQ_csh .carType .swiper-pagination-bullet:nth-child(3){
    background: #b686c7;
    border-color: #b686c7;
}
.cheryQ_csh .carType .swiper-pagination-bullet:nth-child(4){
    background: #f37073;
    border-color: #f37073;
}
.cheryQ_csh .carType .swiper-pagination-bullet:nth-child(5){
    background: #dcd8d9;
    border-color: #dcd8d9;
}
.cheryQ_csh .carType .swiper-pagination-bullet:nth-child(6){
    background: #fff;
    border-color: #e9e9e9;
}
.cheryQ_csh .carType .swiper-pagination-bullet-active{
    width: 0.26rem;
    height: 0.26rem;
}
.cheryQ_csh .carType .swiper-pagination-bullet-active::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    border: 0.03rem solid #f2e9db;
}
.cheryQ_csh .carType .swiper-pagination-bullet-active:nth-child(2)::after{
    border-color: #efc7bf;
}
.cheryQ_csh .carType .swiper-pagination-bullet-active:nth-child(3)::after{
    border-color: #b686c7;
}
.cheryQ_csh .carType .swiper-pagination-bullet-active:nth-child(4)::after{
    border-color: #f37073;
}
.cheryQ_csh .carType .swiper-pagination-bullet-active:nth-child(5)::after{
    border-color: #dcd8d9;
}
.cheryQ_csh .carType .swiper-pagination-bullet-active:nth-child(6)::after{
    border-color: #e9e9e9;
}

































/* -------------------------------------space---------------------------- */

.cheryQ_csh .space{
    background-color: #f3e2d1;
}
.cheryQ_csh .space ul{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
}
.cheryQ_csh .space ul li{
    width: 2.02rem;
    height: 7.98rem;
    border-radius: 0.28rem;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    transition: all 0.5s ease-out;
}
.cheryQ_csh .space ul li .cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: rgba(-255, -255, -255, 0.5);
    transition: all 0.5s ease-out;
}
.cheryQ_csh .space ul li .box{
    position: absolute;
     bottom: 0.48rem;
    left: 0.58rem;
    height: auto;
    width:calc(13.28rem - 0.58rem);
    color: #fff;
    opacity: 0;
    transition: all 0.5s ease-out;
}
.cheryQ_csh .space ul li .outT{
    position: absolute;
    width: 8rem;
    height: 6rem;
    top: 1rem;
    left: 0;
    transform: rotate(-90deg);
    font-size: 0.35rem;
    line-height: 1.9;
    color: #fff;
    text-align: center;
    /* transform: translateY(-50%); */
    opacity: 1;
    transition: all 0.5s ease-out;
}
.cheryQ_csh .space ul li.on{
    width: 13.28rem;
    height: 7.98rem;
    transition: all 0.5s ease-out;
}
.cheryQ_csh .space ul li.on .cover{
    background-color: rgba(-255, -255, -255, 0);
    transition: all 0.5s ease-out;
}
.cheryQ_csh .space ul li.on .outT{
    opacity: 0;
    transition: all 0.2s ease-out;
}
.cheryQ_csh .space ul li.on .box{ 
    opacity: 1;
    transition: all 0.5s ease-out;
}
.cheryQ_csh .space ul li .box .t{
   font-size: 0.4rem;
    text-align: left;
    margin-bottom: 0.28rem;
}
.cheryQ_csh .space ul li .box .con{
    font-size: 0.2rem;
    line-height: 1.9;
}
.cheryQ_csh .space ul li .box .note{
    font-size: 0.12rem;
    line-height: 1.2;
    /* margin-top: 0.2rem; */
    color: rgba(255, 255, 255, 0.5);
}
/* ------------------------------------charge---------------------------------- */

.cheryQ_csh .charge{
    background: linear-gradient(to bottom, #91b8de, #6baad7);
    position: relative;
}
.cheryQ_csh .charge .bigWord{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.5rem;
    line-height: 1.4;
    color: #fff;
    font-family: 'p-bold';
}
.cheryQ_csh .charge .lastShow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}
.cheryQ_csh .charge .lastShow .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .charge .lastShow .wordBox{
    position: absolute;
    top: 1.36rem;
    left: 0.74rem;
    width:5.3rem;
    height: 7.46rem;
    padding: 1.34rem 0.58rem;
    background-color: rgba(78, 155, 211, 0.9);
    color: #fff;
    border-radius: 0.28rem;
    font-size: 0.2rem;
    line-height: 1.8;
    will-change: clip-path;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.cheryQ_csh .charge .lastShow .wordBox .t{
    font-size: 0.4rem;
    margin-bottom: 1.5rem;
    line-height: 1.45;
    font-family: 'p-bold';
}
.cheryQ_csh .charge .coverBox{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    border-radius: 0.28rem;
    overflow: hidden;
    border-radius: 0.78rem;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.cheryQ_csh .charge .coverBox .box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100vw;
    height: 150vh;
    object-fit: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cheryQ_csh .charge .coverBox .box .pic{
    width: 11.04rem;
    height: 6.18rem;
    border-radius: 0.28rem;
    overflow: hidden;
}
.cheryQ_csh .charge .coverBox .box .pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .charge .coverBox .box .wordBox{
    width: 7.1rem;
    height: 6.18rem;
    padding: 1.14rem 0.96rem;
    font-size: 0.2rem;
    line-height: 1.8;
}
.cheryQ_csh .charge .coverBox .box .wordBox .t{
    font-size: 0.4rem;
    margin-bottom: 1.5rem;
    line-height: 1.45;
    color: #589fd2;
    font-family: 'p-bold';
}

@keyframes heatRingExpand {
    0% { transform: scale(0.2); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

@keyframes circleBreath {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

@keyframes lightBoxFade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes pointListEntrance {
    0% { opacity: 0; transform: translateX(0.5rem); }
     50% { opacity: 1; transform: translateX(0.2rem);}
    100% { opacity: 0.5; transform: translateX(0); }
}

/* ---------------------------interior-------------------------- */
.cheryQ_csh .interior{
    position: relative;
}
.cheryQ_csh .interior .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .interior .pointer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: 20;
}
.cheryQ_csh .interior .pointer li{
    width: 0.36rem;
    height: 0.36rem;
    position: relative;
    will-change: transform;
    cursor: pointer;
    animation: pointPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.cheryQ_csh .interior .pointer li::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.36rem;
    height: 0.36rem;
    margin-left: -0.18rem;
    margin-top: -0.18rem;
    border-radius: 50%;
    background: rgba(255, 254, 111, 0.4);
    box-shadow: 0 0 0.15rem rgba(255, 254, 111, 0.5);
    will-change: transform, opacity;
    animation: pointRipple1 2s ease-out infinite;
}
.cheryQ_csh .interior .pointer li::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.36rem;
    height: 0.36rem;
    margin-left: -0.18rem;
    margin-top: -0.18rem;
    border-radius: 50%;
    background: rgba(255, 254, 111, 0.25);
    box-shadow: 0 0 0.1rem rgba(255, 254, 111, 0.3);
    will-change: transform, opacity;
    animation: pointRipple2 2s ease-out infinite 1s;
}
.cheryQ_csh .interior .pointer li img{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 0.1rem rgba(255, 254, 111, 0.6));
}
@keyframes pointPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
}
@keyframes pointRipple1 {
    0% {
        transform: scale(0);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}
@keyframes pointRipple2 {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
     50% {
        transform: scale(1.5);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
.cheryQ_csh .interior .pointer .p0{
    position: absolute;
    /* top: 4.96rem;
    left: 3.84rem;    */
    top: 52%;
    left: 15%;

}
.cheryQ_csh .interior .pointer .p1{
    position: absolute;
    /* top: 7.04rem;
    right:7.2rem;    */
    bottom: 20%;
    right: 35%;
}
.cheryQ_csh .interior .pointer .p2{
    position: absolute;
    /* bottom: 0.54rem;
    left:2.48rem;    */
    bottom: 5%;
    left: 5%;
}
.cheryQ_csh .interior .pointer .p3{
    position: absolute;
    /* top: 4.08rem;
    left:8.68rem;    */
    top: 42%;
    left: 50%;
}
.cheryQ_csh .interior .popPoint{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    pointer-events: none;
}
.cheryQ_csh .interior .popPoint > li{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    animation: none;
    visibility: hidden;
}
.cheryQ_csh .interior .popPoint > li::before,
.cheryQ_csh .interior .popPoint > li::after{
    content: none;
}
.cheryQ_csh .interior .popPoint li li{
    width: auto;
    height: auto;
    animation: none;
}
.cheryQ_csh .interior .popPoint li li::before,
.cheryQ_csh .interior .popPoint li li::after{
    content: none;
}
.cheryQ_csh .interior .popPoint li .slide-inner{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    will-change: transform;
}
.cheryQ_csh .interior .popPoint .ani{
    opacity: 0;
}
.cheryQ_csh .interior .popPoint .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.cheryQ_csh .interior .popPoint .hot{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
.cheryQ_csh .interior .popPoint .ambientLight{
    position: relative;
    background: url(../images/cheryQ/ambientLight_bg.jpg) no-repeat center center;
    background-size: cover;
}
.cheryQ_csh .interior .popPoint .seat0,
.cheryQ_csh .interior .popPoint .seat1,
.cheryQ_csh .interior .popPoint .seat2{
    /* position: relative; */
    background-color: #1a1a1a;
}
.cheryQ_csh .interior .popPoint .ambientLight .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .interior .popPoint .ambientLight .con{
    position: absolute;
    top: 2.56rem;
    left: 1.32rem;
    width:6.1rem;
}
.cheryQ_csh .interior .popPoint .ambientLight .con .t{
    font-size: 0.5rem;
    color: #fff;
    line-height: 1.2;
    opacity: 0;
    font-family: 'p-bold';
    transform: translateY(0.3rem);
    transition: all 0.8s ease-out;
}
.cheryQ_csh .interior .popPoint .ambientLight .con .desc{
    font-size: 0.2rem;
    color: #fff;
    line-height: 1.9;
    margin-top: 0.24rem;
    opacity: 0;
    transform: translateY(0.3rem);
    transition: all 0.8s ease-out;
}
.cheryQ_csh .interior .popPoint .ambientLight.animate .con .t{
    opacity: 1;
    transform: translateY(0);
}
.cheryQ_csh .interior .popPoint .ambientLight.animate .con .desc{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}
.cheryQ_csh .interior .popPoint .seat0 .box{
    position: absolute;
    bottom: 1.04rem;
    left: 0.72rem;
    width: 7.74rem;
    height: 2.6rem;
    border-radius: 0.28rem;
    background-color: rgba(251, 197, 93, 0.9);
    color:#fff;
    padding:0.52rem 0.42rem ;
}
.cheryQ_csh .interior .popPoint .seat0 .circle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .interior .popPoint .seat0 .box .t{
    font-size: 0.5rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
    font-family: 'p-bold';
}
.cheryQ_csh .interior .popPoint .seat0 .box .con{
    font-size: 0.2rem;
    line-height: 1.9;
}
.cheryQ_csh .interior .popPoint > li.is-active .seat0 .circle{
    animation: heatRingExpand 1s ease-out 0.3s forwards;
}
.cheryQ_csh .interior .popPoint > li.is-active .seat0 .hot{
    animation: circleBreath 1.5s ease-in-out 0.5s infinite;
}
.cheryQ_csh .interior .popPoint .seat1 .box{
    position: absolute;
    bottom: 1.04rem;
    left: 0;
    width: 6.5rem;
    height: 2.26rem;
    text-align: center;
    border-radius: 0.28rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, rgba(255, 220, 150, 0.5) 0%, rgba(255, 200, 100, 0.7) 30%, rgba(251, 197, 93, 0.9) 100%);
    pointer-events: none;
}
.cheryQ_csh .interior .popPoint .seat1 .box .t{
    font-size: 0.5rem;
    line-height: 1.2;
    font-family: 'p-bold';
    color: #fff;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList{
    position: absolute;
    top: 1.6rem;
    right: 4.6rem;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: end;
    pointer-events: auto;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li{
    font-size: 0.2rem;
    height: 0.54rem;
    line-height: 0.54rem;
    width: 4.8rem;
    text-align: left;
    color: #fff;
    position: relative;
    border-bottom: 0.01rem solid rgba(255, 254, 111, 0.5);
    text-shadow: 0 0 0.1rem rgba(255, 254, 111, 0.8), 0 0 0.2rem rgba(255, 254, 111, 0.5), 0 0 0.3rem rgba(255, 254, 111, 0.3);
    opacity:0;
    transition: all 0.5rem ease-in-out;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li::after{
    content: '';
    background: url(../images/cheryQ/seat_1_point.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    top: 100%;
    right: -0.16rem;
    transform: translateY(-50%);
    width: 0.34rem;
    height: 0.34rem;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(2){
    margin-right: 0.3rem;
    margin-top: 0.18rem;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(3){
    margin-right: 0.3rem;
    margin-top: 0.18rem;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(4){
    margin-right: 0.4rem;
    margin-top: 0.1rem
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(5){
    margin-right: 0.5rem;
    margin-top: 0.12rem;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(6){
    margin-right: 0.6rem;
    margin-top: 0rem;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(7){
    margin-right: 0.5rem;
    margin-top: 0rem;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(8){
    margin-right: 0.4rem;
    margin-top: 0.24rem;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(9){
    margin-right: 0.2rem;
    margin-top: 0.24rem;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(10){
    margin-top: 0.04rem;
}
.cheryQ_csh .interior .popPoint .seat1 .lightBox{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.cheryQ_csh .interior .popPoint .seat1 .lightBox li{position:absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
.cheryQ_csh .interior .popPoint .seat1 .lightBox li img{width: 100%; height: 100%; object-fit: cover;}
.cheryQ_csh .interior .popPoint .seat1 .pointList li:hover{
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.cheryQ_csh .interior .popPoint .seat1 .pointList li.active{
    opacity: 1 !important;
    transform: translateX(0) !important;
}
.cheryQ_csh .interior .popPoint .seat1 .lightBox li.active{
    opacity: 1 !important;
    animation-play-state: paused !important;
}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(1){animation: lightBoxFade 1s ease-in-out 0.3s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(2){animation: lightBoxFade 1s ease-in-out 0.4s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(3){animation: lightBoxFade 1s ease-in-out 0.5s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(4){animation: lightBoxFade 1s ease-in-out 0.6s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(5){animation: lightBoxFade 1s ease-in-out 0.7s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(6){animation: lightBoxFade 1s ease-in-out 0.8s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(7){animation: lightBoxFade 1s ease-in-out 0.9s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(8){animation: lightBoxFade 1s ease-in-out 1s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(9){animation: lightBoxFade 1s ease-in-out 1.1s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .lightBox li:nth-child(10){animation: lightBoxFade 1s ease-in-out 1.2s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(1){animation: pointListEntrance 0.6s ease-out 0.3s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(2){animation: pointListEntrance 0.6s ease-out 0.4s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(3){animation: pointListEntrance 0.6s ease-out 0.5s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(4){animation: pointListEntrance 0.6s ease-out 0.6s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(5){animation: pointListEntrance 0.6s ease-out 0.7s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(6){animation: pointListEntrance 0.6s ease-out 0.8s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(7){animation: pointListEntrance 0.6s ease-out 0.9s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(8){animation: pointListEntrance 0.6s ease-out 1s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(9){animation: pointListEntrance 0.6s ease-out 1.1s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:nth-child(10){animation: pointListEntrance 0.6s ease-out 1.2s forwards;}
.cheryQ_csh .interior .popPoint > li.is-active .pointList li:hover,
.cheryQ_csh .interior .popPoint > li.is-active .pointList li.on{
    opacity: 1;
    transition: all 0.5rem ease-in-out;
}
.cheryQ_csh .interior .popPoint .seat2 .box{
    position: absolute;
    bottom: 1.04rem;
    left: 0.72rem;
    width: 7.74rem;
    height: 2.6rem;
    border-radius: 0.28rem;
    background-color: rgba(251, 197, 93, 0.9);
    color:#fff;
    padding:0.52rem 0.42rem ;
}
.cheryQ_csh .interior .popPoint .seat2 .box .t{
    font-size: 0.5rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
    font-family: 'p-bold';
}
.cheryQ_csh .interior .popPoint .seat2 .box .con{
    font-size: 0.2rem;
    line-height: 1.9;
}
.cheryQ_csh .interior .popPoint > li{
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.5s ease-out;
}
.cheryQ_csh .interior .popPoint > li.is-active{
    opacity: 1;
    pointer-events: auto;
    visibility:visible;
    transition: all 0.5s ease-in-out;
}
.cheryQ_csh .interior .popPoint .close{
    position: absolute;
    top:1rem;
    right: 0.4rem;
    width: 0.6rem;
    height: 0.6rem;
    background-color:#e3ae70;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    z-index: 100;
    border-radius: 50%;

}
.cheryQ_csh .interior .popPoint .close img{
    width: 40%;
    height: 40%;
    object-fit: cover;
}
/* -------------------------------------ambientLight---------------------------- */
.ambientLight{
    position: relative;
    background: url(../images/cheryQ/ambientLight_bg.jpg) no-repeat center center;
    background-size: cover;

}
.ambientLight .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ambientLight .con{
    position: absolute;
    top: 2.56rem;
    left: 1.32rem;
    width:6.1rem;
}
.ambientLight .con .t{
    font-size: 0.5rem;
    color: #fff;
    line-height: 1.2;
    opacity: 0;
    font-family: 'p-bold';
    transform: translateY(0.3rem);
    transition: all 0.8s ease-out;
}
.ambientLight .con .desc{
    font-size: 0.2rem;
    color: #fff;
    line-height: 1.9;
    margin-top: 0.24rem;
    opacity: 0;
    transform: translateY(0.3rem);
    transition: all 0.8s ease-out;
}
.ambientLight.animate .con .t{
    opacity: 1;
    transform: translateY(0);
}
.ambientLight.animate .con .desc{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}


/* ---------------------------------------- impact-in-action -------------------------------------------------*/

@media screen and (max-width: 1024px) {
    .carplay-screen--stats {
        width: 100%;
        padding: 0.48rem 0.4rem;
        align-items: flex-start;
        padding-top: 0.8rem;
    }

    .carplay-stats-title {
        font-size: var(--font-28);
        margin-bottom: 0.4rem;
    }

    .carplay-stats-num {
        font-size: var(--font-42);
    }

    .carplay-intro-title {
        font-size: var(--font-32);
    }

    .carplay-features-panel {
        width: fit-content;
        min-width: 0;
        max-width: calc(100vw - 0.72rem);
    }

    .carplay-features-detail-title {
        font-size: var(--font-20);
        line-height: 1.35;
    }
}


.impact-in-action{
    width: 100vw; height: auto;
    background-color: #f5efe6;
    /* display: none; */
}
.impact-in-action .animation-wrap{
        display: inline-flex;
    flex-wrap: nowrap;
    /* width: 100%; */
    height: 100%;
    position:relative;
    top: 0;
    left: 0;
    z-index: 3;
   
}
.impact-in-action .animation-wrap .item{
    width: 100vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.impact-in-action .animation-wrap .item .bg-box{
    width:10.44rem;
    height:6.9rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 0.28rem;
    background-color: #fff;
}
.impact-in-action .animation-wrap .item .bg-box .bg{
    width: 100%;
    height:5.4rem;

}
.impact-in-action .animation-wrap .item .bg-box .bg *{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.impact-in-action .animation-wrap .item .content{
    padding: 0.24rem 0 0 0.4rem;
    
}
.impact-in-action .animation-wrap .item .content .t{
    font-size: 0.4rem;
}
.impact-in-action .animation-wrap .item .content .con{
    font-size: 0.2rem;
}
.impact-in-action .animation-wrap .item .content .con span:last-child{
    margin-left: 0.2rem;
}




.impact-in-action .item-pic{position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(20px); }

.impact-in-action .item-pic img {
  width: 104%;
  height: 104%;
  position: absolute;
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%) ;
  object-fit: cover;
  opacity: 0;
  transition: all 1s ease;
}
.impact-in-action .item-pic img.show{
    opacity: 1;
    transition: all 1s ease;
}

.cheryQ_csh {
  width: 100vw;
  height: auto;
  min-height: auto;
  position: relative;
  overflow: visible;
}
.cheryQ_csh .discharge{
  width: 100vw;
  position: relative;
  height: 100vh;
  z-index: 2;
  background-color: #f5efe6;
}
.cheryQ_csh .discharge .discharge-prev,
.cheryQ_csh .discharge .discharge-next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}
.cheryQ_csh .discharge .discharge-prev{
    left: 8%;
    background:url(../images/cheryQ/l_button.png) no-repeat center center;
    background-size: cover;
}
.cheryQ_csh .discharge .discharge-next{
    right: 8%;
    background:url(../images/cheryQ/r_button.png) no-repeat center center;
    background-size: cover;
}
/* .cheryQ_csh .discharge .discharge-prev::after,
.cheryQ_csh .discharge .discharge-next::after{
    content: '';
    width: 0;
    height: 0;
    border-top: 0.12rem solid transparent;
    border-bottom: 0.12rem solid transparent;
} */
/* .cheryQ_csh .discharge .discharge-prev::after{
    border-right: 0.2rem solid rgba(255,255,255,0.8);
} */
/* .cheryQ_csh .discharge .discharge-next::after{
    border-left: 0.2rem solid #fff;
}
.cheryQ_csh .discharge .discharge-prev:hover{
    border-color: #fff;
}
.cheryQ_csh .discharge .discharge-prev:hover::after{
    border-right-color: #fff;
} */
.cheryQ_csh .dischargeContainer{
    width: 13rem;
    height: 6.9rem;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    overflow: visible;
}
.cheryQ_csh .discharge .sld_w{
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
}
.cheryQ_csh .discharge .sld_el{
    grid-area: 1 / 1;
    position: relative;
    width: 13rem;
    height: 6.9rem;
    border-radius: 0.28rem;
    overflow: hidden;
    background: transparent;
    transform-origin: center bottom;
    filter: blur(0px);
    will-change: filter, transform, opacity;
    opacity: 0;
    pointer-events: none;
}
.cheryQ_csh .discharge .sld_el.A{
    pointer-events: auto;
}
.cheryQ_csh .discharge .sld_el .bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.cheryQ_csh .discharge .sld_el .word{
    width: 90%;
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.55, 0, 0.1, 1) 0.15s;
}
.cheryQ_csh .discharge .sld_el.A .word{
    opacity: 1;
}
.cheryQ_csh .discharge .sld_el .word .t{
    font-size: 0.4rem;
    line-height: 1.45;
}
.cheryQ_csh .discharge .sld_el .word .con{
    font-size: 0.2rem;
    line-height: 1.8;
}




/*---------------------------------------- .spinContainer-------------------------------------- */
section.spinContainer {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: auto;
  background: #f5efe6;
  overflow:visible;
  z-index: 1;
  /* display: none; */
}
.cheryQ_csh .spinContainer .swiper-button-prev,
.cheryQ_csh .spinContainer .swiper-button-next{
   display: none;
}




.spin-scroll-trigger {
  position: relative;
  width: 100%;
  height: calc(100vh + 300vh);
  height: calc(100dvh + 300dvh);
}

.spin-sticky {
  /* ScrollSmoother 会对 content 做 transform，CSS sticky 会失效，改用 ScrollTrigger pin */
  position: relative;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5efe6;
}

.spin-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 230, 53, 0.45) 0%, rgba(184, 230, 53, 0.12) 45%, transparent 72%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.spin-bg-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  font-size: 1.4rem;
  perspective: 2.4rem;
  line-height: 1.2;
  font-family: 'Poppins-SemiBold', 'p-bold', sans-serif;
  font-weight: 700;
  color: #e8a85d;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  user-select: none;
  /* height: 3rem; */
}

.spin-bg-text span {
  display: block;
  /* opacity: 0; */
  /* will-change: transform, opacity; */
}

.spin-spheres {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.spin-sphere {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.spin-sphere--yellow {
  top: 12%;
  left: 10%;
width: 0.8rem;
  height: 0.8rem;
}

.spin-sphere--green {
   top: 38%;
    right: 12%;
    width: 0.78rem;
    height: 0.78rem;
  /* background: radial-gradient(circle at 35% 30%, #e8ffb0 0%, #b8e635 45%, #8ab820 100%);
  box-shadow: 0 0.1rem 0.28rem rgba(138, 184, 32, 0.3); */
}

.spin-sphere--purple {
   bottom: 18%;
    right: 6%;
    width: 0.96rem;
    height: 0.96rem;
  /*background: radial-gradient(circle at 35% 30%, #e8c8ff 0%, #b07de8 45%, #7b4fc4 100%);
  box-shadow: 0 0.16rem 0.4rem rgba(123, 79, 196, 0.35);
  filter: blur(2px); */
}
.spin-sphere--orange{
    bottom: 2%;
    right:16%;
    width: 1.5rem;
    height: 1.5rem;
}


.spin-sphere--yellow i{
    display: block;
   width: 0.8rem;
  height: 0.8rem;
  background: radial-gradient(circle at 35% 30%, #fff6a8 0%, #f5d547 45%, #d4a820 100%);
  box-shadow: 0 0.12rem 0.32rem rgba(212, 168, 32, 0.35);
   border-radius: 50%;
}
.spin-sphere--green i{
    display: block;
  width: 0.78rem;
    height: 0.78rem;
  background: radial-gradient(circle at 35% 30%, #e8ffb0 0%, #b8e635 45%, #8ab820 100%);
  box-shadow: 0 0.1rem 0.28rem rgba(138, 184, 32, 0.3); 
  border-radius: 50%;
}
.spin-sphere--purple i{
    display: block;
  width: 0.96rem;
    height: 0.96rem;
  background: radial-gradient(circle at 35% 30%, #e8c8ff 0%, #b07de8 45%, #7b4fc4 100%);
  box-shadow: 0 0.16rem 0.4rem rgba(123, 79, 196, 0.35);
  filter: blur(2px);
   border-radius: 50%;
}
.spin-sphere--orange i{
    display: block;
    width: 1.5rem;
    height: 1.5rem;
   background: radial-gradient(circle at 35% 30%, #ffd4a8 0%, #f5924a 45%, #e06a20 100%);
    box-shadow: 0 0.1rem 0.26rem rgba(224, 106, 32, 0.3);
  filter: blur(2px);
   border-radius: 50%;
}

.spin-stage {
  position: relative;
  z-index: 6;
  width: 100%;
  height: 100%;
  overflow: visible;
  perspective: 20rem;
}

.spin-cards {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

[spin-card-in],
.spin-card-in {
  width: 680%;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: -290%;
  will-change: transform;
  pointer-events: none;
  transform-origin: 50% 50%;
}

[spin-card-in] .spin-card,
.spin-card-in .spin-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 25vw;
  min-width: 3.2rem;
  max-width: 4.2rem;
  height: auto;
  aspect-ratio: 2 / 3;
  border-radius: 0.28rem;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

.spin-card {
  transform-style: preserve-3d;
}

.spin-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.spin-card.is-flipped .spin-card-inner {
  transform: rotateY(180deg);
}

.spin-card-front,
.spin-card-back {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.spin-card-front {
  border: 0.03rem solid #fff;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.12);
}

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

.spin-card-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.36rem 0.28rem 0.32rem;
  background: #e9a24a;
  color: #fff;
  text-align: center;
  /* transform: rotateY(180deg); */
  box-shadow: 0 0.2rem 0.6rem rgba(233, 162, 74, 0.35);
}

.spin-card-title {
  font-size:0.3rem;
  line-height: 1.25;
  font-family:'p-bold';
  /* font-weight: 600; */
  margin: 0;
  flex-shrink: 0;
}

.spin-card-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* color: #fff;
  padding: 0.16rem 0; */
}
.spin-card-icon img{
    width: 1.86rem;
    height: 1.56rem;
}
.spin-card-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.spin-card.is-flipped {
  z-index: 20;
}

[spin-card-in]:has(.spin-card.is-flipped) {
  z-index: 30 !important;
}

.spin-card-desc {
  font-size: 0.18rem;
  line-height: 1.8;
  font-family: 'p-regular', sans-serif;
  margin: 0;
  opacity: 0.95;
  flex-shrink: 0;
}

.setQ {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* background: url(../images/cheryQ/bg_q.jpg) no-repeat center center; */
    /* background-size: cover; */
    background: linear-gradient(180deg, #d2a2ae, #a19eb3);
}

.setQ-stage {
    position: relative;
    width: 100%;
    height: 100%;
}

.setQ canvas {
    /* background: #fff5e9; */
    display: block;
    width: 100%;
    height: 100%;
}

.setQ input {
    width: 250px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    bottom: 35px;
    left: calc(50% - 125px);
    background: none;
    color: #ddca7e;
    font-size: 30px;
    font-family: arial;
    text-align: center;
    border: 1px solid white;
    background: rgba(255, 255, 255, 0.2);
    display: none;
}

.setQ input:focus {
    outline: none;
    border-bottom: 1px solid #28a2a2;
}

.setQ .word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    color: #fff;
   font-family: 'p-bold';
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    width: 100%;
    /* font-weight: bolder; */
    pointer-events: none;
    /* font-family: 'Gluten-Bold'; */
}

.setQ .word-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 0.2rem);
    padding: 0 0.3rem;
}

.setQ .word-inner div {
    width: 32%;
    text-align: center;
}

.cheryQ_csh .space{
    width: 100vw;
    height: 100vh;
}



/* -----------------------------------personality */
.cheryQ_csh .personality {
    background-color: #6eabd7;
    padding-bottom: 0;
    position: relative;
}

.cheryQ_csh .personality .section-title {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.cheryQ_csh .personality-content {
    text-align: center;
    position: relative;
}

.cheryQ_csh .personality-swiper {
    width: 100%;
    height: 100%;
    /* height: calc(100vh - 0.6rem); */
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .personality-swiper {
        height: 60svh;
    }
}

.cheryQ_csh .personality-content .swiper-pagination {
    width: 100%;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
}

.cheryQ_csh .personality-swiper .swiper-wrapper {
    align-items: center;
}

.cheryQ_csh .personality-swiper .swiper-slide {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    height: 100vh;
    position: relative;
}
.cheryQ_csh .swiper-slide .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left:20%;
}
.cheryQ_csh .swiper-slide .icon li{
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 0.14rem;
    border: 0.02rem solid rgba(255, 255, 255, 0);
    margin: 0.15rem 0;
    overflow: hidden;
}
.cheryQ_csh .swiper-slide .icon li:hover,
.cheryQ_csh .swiper-slide .icon li.active{
    border-color: #fff;

}
.cheryQ_csh .swiper-slide .icon li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .personality-swiper .swiper-slide .personality-image {
    width: 100%;
    height: 100%;
}

.cheryQ_csh .personality-swiper .swiper-slide .personality-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cheryQ_csh .personality-swiper .swiper-slide .video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}

.cheryQ_csh .personality-swiper .swiper-slide:nth-child(2) .video {
    background:url(../images/cheryQ/personality_pic3.jpg)no-repeat center center;
    background-size: cover;
}


.cheryQ_csh .personality-swiper .swiper-slide .video .video-thumbnail {
    width: 100%;
    height: 100%;
}

.cheryQ_csh .personality-swiper .swiper-slide .video .video-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}

.cheryQ_csh .personality-swiper .swiper-slide .personality-title {
    display: none;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: var(--font-24);
    font-weight: bold;
}

.cheryQ_csh .personality-swiper .swiper-slide-active .personality-title {
    display: block;
}

.cheryQ_csh .personality-pagination {
    position: absolute;
    bottom: 1.2rem;
    width:100%;
    margin: 0 auto;
    color: #fff;
}

.cheryQ_csh .personality-pagination .swiper-pagination-bullet {
    /* width: auto;
    height: auto; */
    background: transparent;
    opacity: 0.6;
    border-radius: 0;
    border: none;
    font-size:0.24rem;
    /* padding: 0.1rem 0; */
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    width: 4rem;
    height: 0.86rem;
    line-height: 0.86rem;
}

.cheryQ_csh .personality-pagination .swiper-pagination-bullet:hover {
    opacity: 1;
}

.cheryQ_csh .personality-pagination .swiper-pagination-bullet-active {
    color: #e4bb31;
    font-weight: bold;
    opacity: 1;
}

/* -------------------------------------------smartDriving */
.cheryQ_csh .smartDriving {
    background: linear-gradient(to bottom, #ffffff, #ececec) ;
   /* background:  url(../images/cheryQ/smartDriving_bg.jpg) no-repeat center center; */
    background-size: cover;
    position: relative;
    overflow: hidden;
    /* height: 9rem; */
    height: auto;
}
 .cheryQ_csh .smartDriving .section-title {
    /* position: absolute;
    top: 0.64rem;
    left: 0.74rem; */
    
    /* margin-left: 0.74rem; */
    /* z-index: 10; */
    color: #f9a545;
    font-size: 0.5rem;
    line-height: 1.1;
    font-family: 'p-bold';
    width: 90%;
    margin: 0 auto;
    margin-top: 0.64rem;
}
.cheryQ_csh .smartDriving ul{
    width: 90%;
    height: 7.04rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.16rem;
    /* padding: 1.2rem 0; */
    margin: 0.22rem auto 0.52rem;
}
.cheryQ_csh .smartDriving ul li{
    position: relative;
    overflow: hidden;
    border-radius: 0.12rem;
}
.cheryQ_csh .smartDriving ul li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* display: block; */
    transition: transform 0.4s ease-out;
}
.cheryQ_csh .smartDriving ul li:hover img{
    transform: scale(1.05);
}
.cheryQ_csh .smartDriving ul li .title{
    position: absolute;
    bottom: 0.2rem;
    left: 0;
    text-align: center;
    /* transform: translateX(-50%); */
    font-size: 0.2rem;
    line-height: 1.1;
    color: #fff;
    width: 100%;
}
.cheryQ_csh .smartDriving ul li:nth-child(1){
    grid-column: 1;
    grid-row: 1 / span 2;
}
.cheryQ_csh .smartDriving ul li:nth-child(2){
    grid-column: 2;
    grid-row: 1;
}
.cheryQ_csh .smartDriving ul li:nth-child(3){
    grid-column: 3;
    grid-row: 1;
}
.cheryQ_csh .smartDriving ul li:nth-child(4){
    grid-column: 2;
    grid-row: 2;
}
.cheryQ_csh .smartDriving ul li:nth-child(5){
    grid-column: 3;
    grid-row: 2;
}
.cheryQ_csh .smartDriving-content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 5;
}
.cheryQ_csh .smartDriving-content .bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cheryQ_csh .smartDriving-content .swiper-slide{
    position: relative;
}
.cheryQ_csh .smartDriving-content .content{
    width: 5.88rem;
    height: 4.1rem;
    position: absolute;
    top: 1.72rem;
    right: 0.94rem;
    color: #fff;
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 0.12rem;
    padding:0 0.6rem 0.66rem;
}
.cheryQ_csh .smartDriving-content .t{
    font-size: 0.74rem;
    line-height:1;
    color: #e3ae70;
    position: absolute;
    bottom: 0.82rem;
    left: 0.9rem;
}
.cheryQ_csh .smartDriving-content .t span{
    font-size: 0.52rem;
}

.cheryQ_csh .smartDriving-content .content .con{
    font-size: 0.2rem;
    line-height: 1.8;
    border-bottom: 1px solid #fff;
    height: 2.6rem;
    display: flex;
    align-items: center;
    background: none;
}
.cheryQ_csh .buttonBox{
    position: absolute;
    top:4.92rem;
    right:4.38rem;
    width:1.9rem;
    z-index: 90;
}
.cheryQ_csh .buttonBox .swiper-button-next{
    width:0.6rem;
    height:0.6rem;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0);
    background: url(../images/cheryQ/r_button.png) no-repeat center center;
    background-size: cover;
   
}
.cheryQ_csh .buttonBox .swiper-button-prev{
    width:0.6rem;
    height:0.6rem;
    border-radius: 50%;
    color: rgba(0, 0, 0, 0);
    background: url(../images/cheryQ/l_button.png) no-repeat center center;
    background-size: cover;
} */


.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    font-size: 0.24rem;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
   font-size: 0.24rem;
}

@media (min-width: 992px) {
  .spin-scroll-trigger {
    height: calc(100vh + 500vh);
  }

  [spin-card-in],
  .spin-card-in {
    width: 340%;
    left: -120%;
  }
}







/* 手机端适配 */


/* frist-title-box — smllns-style hero title entrance */
.cheryQ_csh .frist-title-box {
    position: relative;
    z-index: 1;
    width: 100%;
    /* min-height: 100vh; */
    height: 140vh;
    overflow: hidden;
    background: linear-gradient(180deg, #f3e2d1 0%,#e8c9a8 50%, #e3c8aa 100%);
    /* 遮住 ScrollSmoother 亚像素缝隙露出的白色底 */
    box-shadow: 0 -3px 0 0 #f3e2d1, 0 3px 0 0 #e3c8aa, -2px 0 0 0 #e8c9a8, 2px 0 0 0 #e8c9a8;
}
.cheryQ_csh .frist-title-box.premiumModule{
    background: linear-gradient(180deg, #f5efe6 0%,#e8c9a8 50%, #e3c8aa 100%);
    box-shadow: 0 -3px 0 0 #f5efe6, 0 3px 0 0 #e3c8aa, -2px 0 0 0 #e8c9a8, 2px 0 0 0 #e8c9a8;
}


.cheryQ_csh .frist-title-box .ftb-inner {
    position: relative;
    width: 100%;
    height: 100%;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cheryQ_csh .frist-title-box .ftb-spheres {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.cheryQ_csh .frist-title-box .ftb-sphere {
    position: absolute;
    border-radius: 50%;
    will-change: transform, opacity;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.cheryQ_csh .frist-title-box .ftb-sphere.is-grabbing {
    cursor: grabbing;
    z-index: 20;
}

.cheryQ_csh .frist-title-box .ftb-sphere--yellow {
    top: 10%;
    left: 10%;
    width: 0.88rem;
    height: 0.88rem;
    background: radial-gradient(circle at 35% 30%, #fff6a8 0%, #f5d547 45%, #d4a820 100%);
    box-shadow: 0 0.12rem 0.32rem rgba(212, 168, 32, 0.35);
    filter: blur(1px);
}

.cheryQ_csh .frist-title-box .ftb-sphere--orange {
    top: 34%;
    left: -0.4rem;
    width: 0.9rem;
    height: 0.9rem;
    background: radial-gradient(circle at 35% 30%, #ffd4a8 0%, #f5924a 45%, #e06a20 100%);
    box-shadow: 0 0.14rem 0.36rem rgba(224, 106, 32, 0.35);
    filter: blur(2px);
}

.cheryQ_csh .frist-title-box .ftb-sphere--olive {
    bottom: 14%;
    left: 20%;
    width: 1.04rem;
    height: 1.04rem;
    background: radial-gradient(circle at 35% 30%, #e8f0a0 0%, #c4d040 45%, #9aaa28 100%);
    box-shadow: 0 0.12rem 0.3rem rgba(154, 170, 40, 0.3);
    filter: blur(1.5px);
}

.cheryQ_csh .frist-title-box .ftb-sphere--green {
    top: 38%;
    right: 12%;
    width: 0.78rem;
    height: 0.78rem;
    background: radial-gradient(circle at 35% 30%, #e8ffb0 0%, #b8e635 45%, #8ab820 100%);
    box-shadow: 0 0.1rem 0.28rem rgba(138, 184, 32, 0.3);
}

.cheryQ_csh .frist-title-box .ftb-sphere--purple {
    bottom: 18%;
    right: 6%;
    width: 0.96rem;
    height: 0.96rem;
    background: radial-gradient(circle at 35% 30%, #e8c8ff 0%, #b07de8 45%, #7b4fc4 100%);
    box-shadow: 0 0.16rem 0.4rem rgba(123, 79, 196, 0.35);
    filter: blur(3px);
}

.cheryQ_csh .frist-title-box .ftb-sphere--orange-sm {
    bottom: 2%;
    right:16%;
    width: 1.5rem;
    height: 1.5rem;
    background: radial-gradient(circle at 35% 30%, #ffd4a8 0%, #f5924a 45%, #e06a20 100%);
    box-shadow: 0 0.1rem 0.26rem rgba(224, 106, 32, 0.3);
    filter: blur(1px);
}

.cheryQ_csh .frist-title-box .ftb-title-wrap {
    position: relative;
    z-index: 10;
    will-change: transform, opacity;
}

.cheryQ_csh .frist-title-box:not(.is-entered) .ftb-title-wrap {
    opacity: 0;
    visibility: hidden;
}



.cheryQ_csh .frist-title-box .ftb-title {
    margin: 0;
    padding: 0.24rem 0.36rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    font-family: 'p-bold';
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    border-radius: 0.12rem;
    will-change: transform, opacity;
    transition: color 0.6s ease;
    cursor: default;
}

.cheryQ_csh .frist-title-box .ftb-title:hover {
    color: #fff;
}

.cheryQ_csh .frist-title-box .ftb-title-line {
    display: block;
}

/* title-box-Am-main — scroll-into-view entrance */
.cheryQ_csh .title-box-Am-main {
    position: relative;
    z-index: 0;
    background: #e4c8aa;
    color: #5a8fc4;
    height: 100vh;
    /* 与上屏衔接，避免 1px 白缝 */
    margin-top: -2px;
    padding-top: 2px;
    box-shadow: -2px 0 0 0 #e4c8aa, 2px 0 0 0 #e4c8aa;
}
.cheryQ_csh .title-box-Am-main.surpriseModule {
    background:linear-gradient(to bottom, #5a8fc4, #6eabd7);
    box-shadow: -2px 0 0 0 #5a8fc4, 2px 0 0 0 #6eabd7;
}
.cheryQ_csh .title-box-Am-main.premiumModule{
    background:linear-gradient(to bottom, #e3c8aa, #c7d8a1);
    box-shadow: -2px 0 0 0 #e3c8aa, 2px 0 0 0 #c7d8a1;
}


.cheryQ_csh .title-box-Am-main .am-scroll-trigger {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.cheryQ_csh .title-box-Am-main .am-sticky {
    position: relative;
    top: auto;
    left: -1px;
    width: calc(100% + 2px);
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #e4c8aa 0%, #8fb8e0 100%);
}

.cheryQ_csh .title-box-Am-main .am-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #e4c8aa 0%, #8fb8e0 100%);
    --am-clip-r: 20px;
    --am-clip-x: 50%;
    --am-clip-y: calc(5% + 20px);
}
.cheryQ_csh .title-box-Am-main.premiumModule .am-wrapper{
    background: linear-gradient(180deg, #e4c8aa 0%, #c7d8a1 100%);
}
.cheryQ_csh .title-box-Am-main .am-circle {
    position: absolute;
    left: 50%;
    top: 5%;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #91b8de;
    transform-origin: 50% 0%;
    will-change: width, height, transform;
    opacity: 0;
    transition: none;
}
.cheryQ_csh .title-box-Am-main.surpriseModule .am-circle {
    background: #6eabd7;
    /* background:linear-gradient(to bottom, #5a8fc4, #6eabd7); */
}
.cheryQ_csh .title-box-Am-main.premiumModule .am-circle {
    background: #c7d8a1;
    /* background:linear-gradient(to bottom, #e3c8aa, #c7d8a1); */
}


.cheryQ_csh .title-box-Am-main .am-titles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.cheryQ_csh .title-box-Am-main .am-titles--knockout {
    z-index: 3;
    clip-path: circle(var(--am-clip-r, 20px) at var(--am-clip-x, 50%) var(--am-clip-y, calc(5% + 20px)));
    -webkit-clip-path: circle(var(--am-clip-r, 20px) at var(--am-clip-x, 50%) var(--am-clip-y, calc(5% + 20px)));
    will-change: clip-path;
}

.cheryQ_csh .title-box-Am-main .am-title {
    position: absolute;
    left: 50%;
    margin: 0;
    font-family: 'p-bold';
    font-size: 1.26rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    transition: none;
    font-size: 1.26rem;
}

.cheryQ_csh .title-box-Am-main .am-titles--base .am-title {
    color: #5289b8;
}

.cheryQ_csh .title-box-Am-main .am-titles--knockout .am-title {
    color: #fff;
    mix-blend-mode: normal;
    -webkit-mix-blend-mode: normal;
}

.cheryQ_csh .title-box-Am-main:not(.am-ready) .am-title--left {
    transform: translate(calc(-50% - 100vw), 0);
}

.cheryQ_csh .title-box-Am-main:not(.am-ready) .am-title--right {
    transform: translate(calc(-50% + 100vw), 0);
}

.cheryQ_csh .title-box-Am-main .am-title--left {
    top: calc(50% - 1.5em);
}

.cheryQ_csh .title-box-Am-main .am-title--right {
    top: calc(50% - 0.5em);
}




/* setQ section styles */

/* .cheryQ_csh .safety{width: 100%; height: 100vh; display: flex; justify-content: space-between; position: relative;}
.cheryQ_csh .safety .bg{ position: relative;  width: 100%;  height: 100%;  top: 0;  left: 0;  z-index: -1;}
.cheryQ_csh .safety .bg img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.cheryQ_csh .safety .content{position: absolute; top: 0; left: 0; width: 100%; height: 100%;  display: flex; justify-content: center;}
.cheryQ_csh .safety  ul{position: relative; width: 17.70rem; height: 100%; }
.cheryQ_csh .safety  li{width: 17.70rem; height: 6.22rem; overflow: hidden; border-radius: 0.14rem; border: 0.02rem solid rgba(255,255,255,1); background: url(../images/cheryQ/safety_item_bg.jpg) no-repeat center center / cover; background-size: cover;  position: absolute; top: 0; left:0; box-shadow: 0 0 0.3rem rgba(-255,-255,-255,0.1), 0 0 0.6rem rgba(-255,-255,-255,0.05), 0 0 1rem rgba(-255,-255,-255,0.05);}
.cheryQ_csh .safety  li::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);z-index: -1;}
.cheryQ_csh .safety  li{top: 1rem; display: flex; justify-content: center; align-items: center; transform-origin: center top; will-change: transform;}
.cheryQ_csh .safety  li.p0{z-index: 1;}
.cheryQ_csh .safety  li.p1{z-index: 2;}
.cheryQ_csh .safety  li.p2{z-index: 3;}
.cheryQ_csh .safety  li .word{width:6.86rem; margin-right: 0.6rem; height: 100%; position: relative;}
.cheryQ_csh .safety  li .pic{width: 9.22rem; height: 5.4rem; overflow: hidden; border-radius: 0.14rem; }
.cheryQ_csh .safety  li .pic img{width: 100%; height: 100%; object-fit: cover;}
.cheryQ_csh .safety  li .word .num{font-size: 0.7rem; position: absolute; top: 0.6rem; left: 0;  color: #fff;}
.cheryQ_csh .safety  li .word .box{position: absolute; bottom: 0.8rem; left:0; width: 100%;}
.cheryQ_csh .safety  li .word .t{font-size: 0.4rem; color: #fff; }
.cheryQ_csh .safety  li .word .con{font-size: 0.24rem; color: #fff; margin-top: 0.32rem;} */

.cheryQ_csh .safety{background-color: #fbf6f1;}
.cheryQ_csh .public_swiper_module{
    width: 100%;
    height: 100vh;
    position: relative;
}
.cheryQ_csh .public_swiper_module:last-child{
    padding-bottom: 1rem;
}
/* .cheryQ_csh .public_swiper_module .swiper-wrapper{
    height: 100%;
} */
.cheryQ_csh .public_swiper_module .swiper-slide{
    height: 100%;
    height: 100%;
    /* display: flex;
    justify-content: center; */
    /* align-items: center; */
    position: relative;
}
.cheryQ_csh .public_swiper_module .swiper-slide .pic{
    width:80%;
    height: 70%;
    overflow: hidden;
    position: absolute;
   bottom: 1.8rem;
   left: 50%;
   transform: translateX(-50%);
    border-radius: 0.28rem;
}
.cheryQ_csh .public_swiper_module .swiper-slide .pic *{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cheryQ_csh .public_swiper_module .swiper-slide .desc{
    position: absolute;
    bottom: 0rem;
    left: 0;
    width: 100%;
    height: 0.76rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #626261;
    font-size: 0.18rem;

}
.cheryQ_csh .public_swiper_module .swiper-slide .desc span{
    margin-right: 0.2rem;
}



.cheryQ_csh .public_swiper_module .swiper-pagination {
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* margin: 0.4rem auto 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 0.2rem; */
    /* border-bottom: 1px solid rgba(98, 98, 97, 0.3); */
}

.cheryQ_csh .public_swiper_module .swiper-pagination-bullet {
    width: auto;
    flex: 1;
    height: 0.8rem;
    /* line-height: 0.5rem; */
    line-height: 1.18;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    color: #626261;
    font-size: 0.22rem;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.cheryQ_csh .public_swiper_module .swiper-pagination-bullet-active {
    color: #1d1d1d;
}

/* .cheryQ_csh .public_swiper_module .swiper-pagination-bullet-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #a27055;
} */
.cheryQ_csh .public_swiper_module .paginationBtn{
    position: relative;
    bottom: 1.66rem;
    left: 50%;
    transform: translateX(-50%);
    width: 78%;
    z-index: 10;
    /* height: 0.8rem; */
    /* display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    border-bottom: 1px solid rgba(98, 98, 97, 0.3); */
}
.cheryQ_csh .public_swiper_module .swiper-scrollbar {
    width: 100%;
    left: 50%;
    bottom:0;
    transform: translateX(-50%);
    /* margin: 0 auto; */
    height:0.02rem;
    background: rgba(98, 98, 97, 0.2);
    border-radius: 2px;
    /* margin: 0 auto; */
}




.cheryQ_csh .public_swiper_module .swiper-scrollbar-drag {
    background: #c8a47d;
    border-radius: 0;
}

.cheryQ_csh .public_swiper_module  .swiper-slide .pic .video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.6rem;
    height: 0.6rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: videoLoadingSpin 1s linear infinite;
    z-index: 10;
}

@keyframes videoLoadingSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.cheryQ_csh .public_swiper_module .video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cheryQ_csh .public_swiper_module .video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cheryQ_csh .public_swiper_module .video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 5;
}

/* content_us_jump section styles */
.cheryQ_csh .content_us_jump {
  position: relative;
  width: 100%;
  height: auto;
}

.cheryQ_csh .content_us_jump a {
  display: block;
  width: 20%;
  height: 7%;
  position: absolute;
  top: 34%;
  left: 6%;
}

.cheryQ_csh .content_us_jump img {
  width: 100%;
}



@media (max-width: 480px) {
     /* :root {

        --videoWidth:90%;
        --videoHeight:3.8rem;
    }  */
    body{
        width: 100vw;
        overflow-x: hidden;
    }
    .cheryQ_csh{
        width: 100vw;
        overflow-x: hidden;
    }
    .pc-pad {
        display: none !important;
    }

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

    section {
        width: 100%;
        height: 100vh;
        /* min-height: 100vh; */
    }
    .cheryQ{
        overflow-x: hidden;
    }
    /* Banner */
    .banner .logo img{
        height: 0.7rem;
    }
    .banner .title, .sectionT {
        top: 2.64rem;
       font-size: var(--font-40);
        padding: 0 0.3rem;
        /* line-height: 1.3; */
    }
    .sectionT{
        top:2.9rem;
         font-size: 0.32rem;
    }
    .suTitle{
        top: 3.3rem;
        width: 80%;
        left: 10%;
        font-size: var(--font-32);
        line-height: 1.2;
        font-family: 'p-regular';
    }
    .moduleName{
        height: 12rem;
    }
    .transition .word{
        top: 2.2rem;
        width: 90%;
        left: 5%;
       text-align: center;
    }
    .transition .word br{
        display: none;
    }
    .transition .word .desc{
        font-size: 0.26rem;
    }
    .banner .suTitle, .sectionSuTitle {
        top: 3.3rem;
        font-size: var(--font-32);
        padding: 0 0.3rem;
    }
    .banner .suTitle{
        top: 76%;
    }
    .LT {
        top: 1rem;
        left: 0.4rem;
        width: 90%;
    }
    .cheryQ_csh .title-box-Am-main .am-scroll-trigger{
       min-height: 100%;
    }
    .cheryQ_csh .title-box-Am-main .am-title{
        font-size: 0.5rem;
    }
    .cheryQ_csh .title-box-Am-main .am-sticky{
        height: 8rem;
    }


    /* .setQ canvas{
        height: 13rem;
    } */
    .setQ .word-inner{
        flex-wrap: wrap;
    }
    .setQ .word-inner div{
        width: 100%;
        margin: 1.5rem 0;
    }

    .moduleName .w0,.moduleName .w0-swap{
        left: 1.6rem;
        font-size: 1.2rem;
        top:3.2rem;
    }
    .moduleName .w1,.moduleName .w1-swap{
        left: 1rem;
        font-size:1.2rem;
        top: 4.4rem;
    }
    .moduleName .w-box.text-reverse .w1, .spotlight-layer.text-reverse .w1-swap{
        left: 0.2rem;
    }
    .moduleSuTitle{
        height: 8rem;
    }
   .moduleSuTitle .title-box .item{
       font-size: 0.8rem;
    }
    .moduleSuTitle.uniqueModule .title-box:nth-child(1){
        height: 4.5rem;
        top: 0;
    }
    .moduleSuTitle.uniqueModule .title-box:nth-child(1) .item{
        width: 7rem;
        line-height: 1;
        height:4.1rem;
        font-size: 0.8rem;
    }
    
    .moduleSuTitle .title-box:nth-child(2){
      top:2.8rem;
    }
    .moduleSuTitle .title-box:nth-child(3){
      top:4.2rem
    }
    .moduleSuTitle .title-box:nth-child(4){
      top:5.8rem
    }
    .moduleSuTitle .title-box:nth-child(2) .item{
        width: 4rem;
    }
    .moduleSuTitle .title-box:nth-child(3) .item{
        width: 5rem;
    }
    .moduleSuTitle .title-box:nth-child(4) .item{
        width: 4rem;
    }
    .moduleSuTitle .title-box:nth-child(1){
        top: 1.1rem;
    }
    .moduleSuTitle.uniqueModule .title-box:nth-child(1) .item{
        width:6rem;
    }
    .moduleSuTitle.spaceModule .title-box:nth-child(1) .item{
        width: 5rem;
    }
    .moduleSuTitle.spaceModule .title-box:nth-child(4) .item{
        width: 4rem;
    }

    .cheryQ_csh .appearance .title{
        bottom: 3rem;
    }
    .cheryQ_csh .appearance .desc{
        font-size: 0.26rem;
        line-height: 1.5;
        bottom: 2rem;
    }
    .cheryQ_csh .interior{
      height: auto;
    }
    .cheryQ_csh .interior .bg{
        width: 100%;
        height: auto;
        object-fit: initial;
    }
    .cheryQ_csh .interior .pointer .p0{
        top: 8rem;
        right: 0.8rem;
        left: initial;
    }
    .cheryQ_csh .interior .pointer .p1{
        top: initial;
        bottom: 2.5rem;
        right: 3.5rem;
    }
    .cheryQ_csh .interior .pointer .p2{
        bottom: 1rem;
        left: 2.3rem;
    }
    .cheryQ_csh .interior .pointer .p3{
        top: 7rem;
        left: 1rem;
    }
    .cheryQ_csh .interior .popPoint .seat0 .box,.cheryQ_csh .interior .popPoint .seat1 .box,.cheryQ_csh .interior .popPoint .seat2 .box{
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: auto;
        padding: 0.52rem 0.42rem;
        background-color: rgba(251, 197, 93, 0.9);
        border-radius: 0.28rem;
        /* box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1); */
    }
    .cheryQ_csh .interior .popPoint .seat2 .box .con, .cheryQ_csh .interior .popPoint .seat0 .box .con{
        font-size: 0.26rem;
        line-height: 1.5;
    }
    .cheryQ_csh .interior .popPoint .ambientLight .con{
        left: 50%;
    }
    .cheryQ_csh .interior .popPoint .ambientLight .con .desc{
        font-size: 0.26rem;
    }
    .cheryQ_csh .interior .popPoint .close{
        top: 1.8rem;
    }
    .cheryQ_csh .interior .popPoint .seat1 .pointList{
        top: 1.8rem;
        right: 1.6rem;
    }
    .cheryQ_csh .interior .popPoint .seat1 .bg{
        width: 100%;
        height: auto;
        object-fit: initial;
    }
    .cheryQ_csh .interior .popPoint .seat1 .pointList li:nth-child(9){
        margin-top: 0.5rem;
    }
    .cheryQ_csh .carplay-model{
        background-color: #fff;
    }
    .cheryQ_csh .carType .swiper-slide:nth-child(1) .bg-box .bg{
        background: url('../images/cheryQ/carType_bg0_mb.jpg') no-repeat center center;
        background-size: cover;
    }
      .cheryQ_csh .carType .swiper-slide:nth-child(2) .bg-box .bg{
        background: url('../images/cheryQ/carType_bg1_mb.jpg') no-repeat center center;
        background-size: cover;
    }
    .cheryQ_csh .carType .swiper-slide:nth-child(3) .bg-box .bg{
        background: url('../images/cheryQ/carType_bg2_mb.jpg') no-repeat center center;
        background-size: cover;
    }
    .cheryQ_csh .carType .swiper-slide:nth-child(4) .bg-box .bg{
        background: url('../images/cheryQ/carType_bg3_mb.jpg') no-repeat center center;
        background-size: cover;
    }
    .cheryQ_csh .carType .swiper-slide:nth-child(5) .bg-box .bg{
        background: url('../images/cheryQ/carType_bg4_mb.jpg') no-repeat center center;
        background-size: cover;
    }
     .cheryQ_csh .carType .swiper-slide:nth-child(6) .bg-box .bg{
        background: url('../images/cheryQ/carType_bg5_mb.jpg') no-repeat center center;
        background-size: cover;
    }
    .cheryQ_csh .carType .swiper-slide .bg-box .box{
        width: 7rem;
        height: 7rem;
        top: 1.8rem;
        left: 0.25rem;
        padding-top: 3.2rem;
        padding-left: 0.4rem;
        font-size: 0.32rem;
    }
    .cheryQ_csh .carType .car{
        width: 7rem;
        top: 8.4rem;
        left: 0.36rem;
    }
    .cheryQ_csh .carType .swiper-pagination{
        left: 0.6rem;
    }
    .cheryQ_csh .carType .swiper-pagination-bullet{
        width: 0.4rem; height: 0.4rem;
    }
    .cheryQ_csh .carType .swiper-pagination-bullet-active::after{
        width: 0.5rem;
        height: 0.5rem;
    }
    .cheryQ_csh .carType .car .wheel{
        width: 1.04rem;
    }
    .cheryQ_csh .carType .car .wheelLeft{
       top: 1.54rem;
        left: 0.68rem;
    }
    .cheryQ_csh .carType .car .wheelRight{
       top: 1.54rem;
        right: 1rem;
    }
    .cheryQ_csh .seat .s0 .box{
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        height: auto;

    }
    .cheryQ_csh .seat.swiper {
        overflow: hidden;
    }
    .cheryQ_csh .seat .animation-wrap.swiper-wrapper {
        display: flex;
        height: 100%;
        will-change: transform;
    }
    .cheryQ_csh .seat .item.swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
    }
    .cheryQ_csh .seat .slide-inner {
        transform: none !important;
    }
    .cheryQ_csh .seat .seat-pagination {
        bottom: 0.4rem;
        z-index: 8;
    }
    .cheryQ_csh .seat .seat-pagination .swiper-pagination-bullet {
        width: 0.16rem;
        height: 0.16rem;
        background: rgba(255, 255, 255, 0.45);
        opacity: 1;
    }
    .cheryQ_csh .seat .seat-pagination .swiper-pagination-bullet-active {
        background: #fff;
    }
    .cheryQ_csh .seat .s0 .box .t{
      margin-bottom: 0.26rem;  
    }
    .cheryQ_csh .seat .s0 .box .con{
        font-size: 0.26rem;
        line-height: 1.5;
    }
    .cheryQ_csh .seat .s1 .pointList{
        width: 90%;
        left: 0rem;
        right: initial;
    }
    .cheryQ_csh .seat .s1 .box{
        width: 90%;
        left: 50%;
        bottom:1.5rem;
        transform: translateX(-50%);
        height: auto;
        border-radius: 0.28rem;
        background-color: rgba(251, 197, 93, 0.9);
        color: #fff;
        padding: 0.52rem 0.42rem;
    }
    .cheryQ_csh .seat .s2 .box{
        width: 90%;
        left: 50%;
        bottom:1.5rem;
        transform: translateX(-50%);
        height: auto;
    }
    .cheryQ_csh .seat .s2 .box .con{
        font-size: 0.26rem;
         line-height: 1.5;
    }
    .cheryQ_csh .seat .s1 .pointList li{
        font-size: 0.22rem;
        height: 0.6rem;
        line-height: 0.6rem;
        padding-left: 0.4rem;
         width: 5.5rem;
    }
    .cheryQ_csh .seat .s1 .pointList{
        width: 84%;
         top: 1rem;
    }
    
    .cheryQ_csh .seat .s1 .pointList li:nth-child(3){
       margin-top: 0.1rem;
    }
    .cheryQ_csh .seat .s1 .pointList li:nth-child(6){
        margin-top: 0;
    }
    .cheryQ_csh .seat .s1 .pointList li:nth-child(7){
        margin-top: 0;
    }
    .cheryQ_csh .seat .s1 .pointList li:nth-child(9){
        margin-top: 0.2rem;
    }
    .cheryQ_csh .seat .s1 .pointList li:nth-child(10){
        margin-top: 0.2rem;  
    }
    .cheryQ_csh .space{
        height: auto;
    }
    .cheryQ_csh .space ul{
        flex-wrap: wrap;
        padding: 1rem 0;
    }
    .cheryQ_csh .space ul li{
        width: 90%;
        background-color: rgba(-255, -255, -255, 0.5);
    }
    .cheryQ_csh .space ul li.on{
        width: 90%;
        height: 7rem;
    }
    .cheryQ_csh .space ul li .box{
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        bottom: initial;
        top: 4.3rem;
    }
    .cheryQ_csh .space ul li .box .t{
        line-height: 1.2;
    }
    .cheryQ_csh .space ul li .box .con{
        font-size: 0.26rem;
        line-height: 1.2;
    }
     .cheryQ_csh .space ul li .bg{
        height: 4rem;
     }
     .cheryQ_csh .space ul li .box .note{
        font-size: 0.16rem;
     }
    .cheryQ_csh .frist-title-box .ftb-title{
        font-size:1.1rem;
    }
    .cheryQ_csh .title-box-Am-main{
        height: 8rem;
    }
    .cheryQ_csh .frist-title-box{
        height: 8rem;
    }

    .cheryQ_csh .charge .coverBox .box{
        display: block;
        padding: 40vh 5%;
    }
    .cheryQ_csh .charge .coverBox .box .pic{
        width: 90vw;
        height: 4rem;
    }
    .cheryQ_csh .charge .coverBox .box .wordBox{
        width: 90%;
        padding:0.5rem 0;
        font-size: 0.26rem;
        
    }
    .cheryQ_csh .charge .coverBox .box .wordBox .t{
        font-size: 0.6rem;
        margin-bottom: 1rem;
    }
    .cheryQ_csh .charge .lastShow .wordBox{
        width: 90%;
        left:50%;
       transform: translateX(-50%);
       font-size: 0.26rem;
    }
    .cheryQ_csh .charge .lastShow .wordBox .t{
        font-size: 0.5rem;
    }
    .impact-in-action.swiper {
        position: relative;
        overflow: hidden;
    }
    .impact-in-action .animation-wrap.swiper-wrapper {
        display: flex;
        height: 100%;
        will-change: transform;
    }
    .impact-in-action .animation-wrap .item.swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
    }
    .impact-in-action .impact-pagination {
        bottom: 0.48rem;
        z-index: 8;
    }
    .impact-in-action .impact-pagination .swiper-pagination-bullet {
        width: 0.16rem;
        height: 0.16rem;
        background: rgba(255, 255, 255, 0.45);
        opacity: 1;
    }
    .impact-in-action .impact-pagination .swiper-pagination-bullet-active {
        background: #fff;
    }
    .impact-in-action .animation-wrap .item .bg-box{
        width: 90%;
    }
    .impact-in-action .animation-wrap .item .bg-box .bg{
        height: 4rem;
    }
    .impact-in-action .animation-wrap .item .content{
        padding: 0.32rem 0.4rem 0 0.4rem;
    }
    .impact-in-action .animation-wrap .item .content .t{
        line-height: 1.4;
    }
    .impact-in-action .animation-wrap .item .content .con{
        font-size: 0.26rem;
        margin-top: 0.2rem;
    }
    .cheryQ_csh .personality-swiper .swiper-slide .personality-image{
        height: 4rem;
         /* margin-top: 0.4rem; */
    }
    .cheryQ_csh .personality-swiper .swiper-slide .video{
        height: 4rem;
        /* margin-top: 0.4rem; */
    }
    .cheryQ_csh .personality{
        background-color: rgba(0, 0, 0, 1);
        height: 6.5rem;
    }
    .cheryQ_csh .personality .container,.cheryQ_csh .personality-content{
        width: 100%;
        height: 100%;
    }
    .cheryQ_csh .personality-swiper .swiper-slide{
        height: 100%;
    }
    .cheryQ_csh .personality-content .swiper-pagination{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .cheryQ_csh .swiper-slide .icon{
        top: 0.5rem;
        transform: translateY(0);
        left: 10%;

    }
    .cheryQ_csh .personality-pagination .swiper-pagination-bullet{
        width: 46%;
        font-size: 0.26rem;
    }
    .spin-sphere--orange{
        bottom: 0;
        right: -1rem;
    }
    /* .cheryQ_csh .smartDriving ul{
        display: none;
    }
    .cheryQ_csh .smartDriving .section-title{
        font-size: 0.6rem;
        left: 5%;
        width: 90%;
    }
    .cheryQ_csh .smartDriving .section-title{
        top: 1.5rem;
    }
    .cheryQ_csh .smartDriving-content .t{
        font-size: 0.4rem;
        line-height: 1.2;
        left:5%;
        width:90%;
        bottom: 4.4rem;
    }
    .cheryQ_csh .smartDriving-content .t span{
        font-size: 0.4rem;
    }
    .cheryQ_csh .smartDriving-content .content{
        top: initial;
       bottom: 2.3rem;
        background:none;
        padding: 0;
        width: 90%;
        left: 50%;
        transform: translateX(-50%);
        height: auto;
    }
    .cheryQ_csh .smartDriving-content br{
        display: none;
    }
    .cheryQ_csh .smartDriving .section-title{
        top: initial;
        bottom:5.6rem;
    }
    .cheryQ_csh .smartDriving-content .content .con{
        font-size: 0.26rem;
        height: 2.1rem;
    } */
    .cheryQ_csh .smartDriving ul{
        display: flex;
        flex-direction: column;
        width: 90%;
        height: auto;
        gap: 0.2rem;
        margin: 0.5rem auto;
    }
    .cheryQ_csh .smartDriving ul li{
        width: 100%;
        height: 3.5rem;
    }
    .cheryQ_csh .smartDriving ul li:nth-child(1),
    .cheryQ_csh .smartDriving ul li:nth-child(2),
    .cheryQ_csh .smartDriving ul li:nth-child(3),
    .cheryQ_csh .smartDriving ul li:nth-child(4),
    .cheryQ_csh .smartDriving ul li:nth-child(5){
        grid-column: auto;
        grid-row: auto;
    }
    .cheryQ_csh .smartDriving ul li .title{
        font-size: 0.28rem;
        bottom: 0.4rem;
    }
    .cheryQ_csh .buttonBox{
        top: initial;
        bottom: 1.4rem;
        width: 3rem;
        right:initial;
        left: 50%;
        transform: translateX(-50%);
    }
    .cheryQ_csh .buttonBox .swiper-button-next{
        width: 0.8rem;
        height: 0.8rem;
    }
    .cheryQ_csh .buttonBox .swiper-button-prev{
        width: 0.8rem;
        height: 0.8rem;
    }
    .cheryQ_csh .dischargeContainer{
        width: 100%;
        height:14rem;
    }
    .cheryQ_csh .discharge .sld_el{
        width: 90%;
        height: 11.1rem;
    }
    .cheryQ_csh .discharge .discharge-prev, .cheryQ_csh .discharge .discharge-next{
        bottom:1.5rem;
        top: initial;
        transform: translateY(0);
    }
    .cheryQ_csh .discharge .discharge-prev{
        left: 2rem;
        width: 0.8rem;
        height: 0.8rem;
    }
    .cheryQ_csh .discharge .discharge-next{
        right: 2rem;
        width: 0.8rem;
        height: 0.8rem;
    }
    .cheryQ_csh .discharge{
        height: 15rem;
    }
    .spin-glow{
        /* top: 11rem;
        left: 6rem; */
        top: 3rem;
        left: 50%;
    }
    .ambientLight{
        background: #000;
    }
    .ambientLight .con{
        left: 50%;
        transform: translateX(-50%);
    }
    .ambientLight .bg {
        width: 100%;
        height: 5rem;
        object-fit: cover;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .ambientLight .con .desc{
        font-size: 0.24rem;
        color: #fff;
        margin-top: 0.32rem;
    }

    .spin-bg-text {
        font-size: var(--font-40);
        padding: 0 0.3rem;
        height: 3rem;
    }
    section.spinContainer{
        height: 14rem !important;
    }
    .cheryQ_csh .spinContainer .swiper-button-prev,
    .cheryQ_csh .spinContainer .swiper-button-next{
        display:block;
    }
    .spin-scroll-trigger{
        height: 100%;
    }
    .spin-stage.swiper {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .spin-cards.swiper-wrapper{
        position: relative;
        display: flex;
        align-items: center;
        height: 100%;
    }
    [spin-card-in],
    .spin-card-in {
        width: 100% !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        height: 100%;
        flex-shrink: 0;
        aspect-ratio: auto;
        pointer-events: auto;
        will-change: auto;
    }

    [spin-card-in] .spin-card,
    .spin-card-in .spin-card {
        width: 72%;
        max-width: 5.6rem;
        min-width: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: 0;
        transform: translate(-50%,-50%);
        pointer-events: auto;
    }

    .cheryQ_csh .spinContainer .swiper-button-prev,
    .cheryQ_csh .spinContainer .swiper-button-next {
        z-index: 10;
        top: initial;
        margin-top: 0;
        bottom: 1.5rem;
        transform: translateY(0);
    }
    .cheryQ_csh .spinContainer .swiper-button-prev {
        left: 1.8rem;
    }
    .cheryQ_csh .spinContainer .swiper-button-next {
        right: 1.8rem;
    }
    .cheryQ_csh .public_swiper_module:last-child{
        padding-bottom: 0;
    }
    .spin-glow {
        width: 3.6rem;
        height: 3.6rem;
    }

    .spin-card-back {
        padding: 0.28rem 0.2rem 0.22rem;
    }

    .spin-card-title {
        font-size:0.26rem;
    }

    .spin-card-icon svg {
        width: 0.96rem;
        height: 0.96rem;
    }

    .spin-card-desc {
        font-size:0.26rem;
        line-height: 1.45;
    }

    .spin-sphere--yellow {
        width: 0.48rem;
        height: 0.48rem;
        top: 10%;
        left: 6%;
    }

    .spin-sphere--green {
        width: 0.36rem;
        height: 0.36rem;
        right: 8%;
    }

    .spin-sphere--purple {
        width: 0.56rem;
        height: 0.56rem;
        right: 5%;
    }


/* @media screen and (max-width: 768px) { */
    .cheryQ_csh .frist-title-box .ftb-sphere--yellow {
        width: 0.4rem;
        height: 0.4rem;
        top: 8%;
        left: 5%;
    }

    .cheryQ_csh .frist-title-box .ftb-sphere--orange {
        width: 0.52rem;
        height: 0.52rem;
    }

    .cheryQ_csh .frist-title-box .ftb-sphere--olive {
        width: 0.46rem;
        height: 0.46rem;
        bottom: 10%;
        left: 6%;
    }

    .cheryQ_csh .frist-title-box .ftb-sphere--green {
        width: 0.32rem;
        height: 0.32rem;
        right: 8%;
    }

    .cheryQ_csh .frist-title-box .ftb-sphere--purple {
        width: 0.68rem;
        height: 0.68rem;
        right: 4%;
    }

    .cheryQ_csh .frist-title-box .ftb-sphere--orange-sm {
        width: 0.36rem;
        height: 0.36rem;
        right: 18%;
    }
    .cheryQ_csh .spinContainer .swiper-button-next{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        color: rgba(0, 0, 0, 0);
        background: url(../images/cheryQ/r_button.png) no-repeat center center;
        background-size: cover;
        }
    .cheryQ_csh .spinContainer .swiper-button-prev{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        color: rgba(0, 0, 0, 0);
        background: url(../images/cheryQ/l_button.png) no-repeat center center;
        background-size: cover;
    }
    /* .cheryQ_csh .safety{ background-color: #c7d8a1;}
    .cheryQ_csh .safety li{ width: 90%; height: 10rem; flex-wrap: wrap; align-items:flex-start; left: 5%; top: 1rem;}
    .cheryQ_csh .safety li .word{ width: 90%;  height:4rem;  margin-right:0; }
    .cheryQ_csh .safety li .pic{
        width: 90%;
        height: 4rem;
    }
    .cheryQ_csh .safety li .word .box{
        bottom: initial;
        top: 2rem;
    } */
    .cheryQ_csh .content_us_jump a{
        width: 56%;
        height: 9%;
        top: 30%;
        left: 9%;
    }
    
    .cheryQ_csh .public_swiper_module .swiper-slide .pic{
        top: 1.4rem;
        bottom: initial;
        width: 90%;
        height: 4rem;
    }
    .cheryQ_csh .public_swiper_module .swiper-slide .desc{
        top: 5.8rem;
        bottom: initial;
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.24rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .cheryQ_csh .public_swiper_module .swiper-slide .desc span{
        margin-right: 0;
    }
    .cheryQ_csh .public_swiper_module .swiper-pagination{
        bottom: 0;
        display: block;
        /* width: 80%; */
    }
    .cheryQ_csh .public_swiper_module .paginationBtn{
        width: 80%;
        bottom: initial;
        top:7.2rem;
        position: absolute;
    }
    .cheryQ_csh .public_swiper_module .swiper-pagination-bullet{
        justify-content: left;
        font-size: 0.26rem;
        padding-left: 0.2rem;
    }
    .cheryQ_csh .public_swiper_module .swiper-scrollbar{
        height: 100%;
        width: 0.04rem;
        left: 0;
        transform: translateY(0);
    }

}

/* iPad/Tablet 适配 - 768px ~ 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    /* 确保 carplay 和 spinContainer 在 iPad 上正常显示 */
    .carplay {
        height: calc(100vh - var(--header-height));
        height: calc(100dvh - var(--header-height));
        min-height: 560px;
    }

    .spin-scroll-trigger {
        height: calc(100vh + 300vh);
        height: calc(100dvh + 300dvh);
    }

    .spin-sticky {
        height: 100vh;
        height: 100dvh;
        min-height: 560px;
    }

    section {
        height: 100vh;
        height: 100dvh;
        min-height: 560px;
    }

    /* iPad 横屏模式特殊处理 */
    @media (orientation: landscape) {
        .carplay {
            min-height: 480px;
        }

        .spin-sticky {
            min-height: 480px;
        }

        section {
            min-height: 480px;
        }
    }

   
}

@media screen and (min-width: 768px) and (max-width: 1400px) {
 /* iPad .seat1 .pointList 定位 */
    .cheryQ_csh .interior .popPoint .seat1 .pointList {
        top: 20%;
        right: 18%;
    }
     .cheryQ_csh .interior .popPoint .seat1 .pointList li {
        font-size: 0.24rem;
        height: 0.66rem;
        line-height: 0.66rem;
        width: 5.6rem;

    }
}