:root {
	  /* --font-size-1: 0.16rem;
  --font-size-2: 0.18rem;
  --font-size-3: 0.2rem;
  --font-size-4: 0.22rem;
  --font-size-5: 0.24rem;
  --font-size-6: 0.26rem;
  --font-size-7: 0.28rem;
  --font-size-8: 0.3rem;
  --font-size-9: 0.32rem;
  --font-size-10:0.34rem;
  --font-size-11:0.36rem;
  --font-size-12:0.4rem;
  --font-size-13:0.5rem; */
	/* --color-yellow: #eb9201; */
	--swiper-theme-color:#fff;
	--swiper-pagination-bullet-inactive-color:#fff;
	--swiper-pagination-bullet-width:0.48rem;
	--swiper-pagination-bullet-height:0.02rem;
	--swiper-pagination-bullet-horizontal-gap:0.06rem;
	--swiper-pagination-bullet-border-radius:0;
	--swiper-navigation-size:0.22rem;
	--full-width:0.48rem;
	--button-height:0.48rem;
 }

/* 图片弹出窗口样式 */
.image-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.image-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.image-popup-container {
    position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
    z-index: 10;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-popup-img {
    max-width: 100vw;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.image-popup-close {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    width: 0.4rem;
    height: 0.4rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    font-size:var(--font-size-5);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.image-popup-close:hover {
    background-color: rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .image-popup-container {
        max-width: 95%;
        max-height: 95%;
    }
    
    .image-popup-img {
        max-height: 70vh;
    }
    
    .image-popup-close {
        top: -0.6rem;
        right: 0;
        width: 0.6rem;
        height:0.6rem;
        font-size: var(--font-size-2);
    }
}
 
/* 公共 */
.l8{background-color: #0c111e; font-family: 'SOURCEHANSANSCN-MEDIUM'; min-height: 100vh;}
.moduleT{ font-size: var(--font-size-5); line-height: 2.8; position: relative; color: var(--color-white); top: 1.64rem; left: 1.5rem; z-index: 10;  width: 50vw;}
.moduleT::after{ content: ''; position: absolute; left: 0; bottom: 0; width:0.4rem; height:0.02rem; background: var(--color-yellow);}
.moduleContent{font-size: var(--font-size-12); font-family: 'SOURCEHANSANSCN-BOLD';  line-height: 1.4; color: var(--color-white); position: relative; top: 2rem; left: 1.5rem; width: 40%;}
.moduleContent .last,.moduleContent .third{position: absolute; top: 0; left: 0;}
.moduleContent .con{font-size: var(--font-size-2); font-weight:initial;  line-height: 1.7; margin-top: 0.18rem;}
 /*视频*/
.videoPresentation {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #fff;
}

.video-mask {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height:100vh;
	transform: translate(-50%, -50%) scale(0.8);
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	/* opacity: 0; */
	z-index: 10;
}

.video-mask.active {
	animation: expandMask 1.5s ease-out forwards;
}

.videoPresentation .word{
    font-size: var(--font-size-14);
	position: absolute;
	 bottom:1.32rem ;
	 line-height: 1.4;
	 color: var(--color-white);
	 left: 50%;
	 transform: translate(-50%);
	 z-index: 20;
	 /* font-weight: bold; */
	 font-family: 'SOURCEHANSANSCN-BOLD';
	 text-align: center;
}
@keyframes expandMask {
	0% {
		width: 80vw;
		height: 80vh;
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 0;
	}
	100% {
		width: 100vw;
		height: 100vh;
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
}

.video-mask video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
/*视频*/

 
 /* 外饰 */
.car_wg_box{
	position: relative;
	height: 100vh;
	/* height: 200vh; */
	width: 100%;
}
.car_wg{
	width: 100%;
	height: 100vh;
	position: sticky;
	top: 0;
	overflow: hidden;
	/* background: rgb(219, 220, 215); */
	background: #050305;
}
.carColor_pc,.carColor_mb{position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;}
.carColor_mb img{width: 100%; height: 100%; object-fit: cover;}
.car_wg_bk{
	width: 100%;
	height: 100vh;
	object-fit: cover;
	position: absolute; top: 0; left: 0;
}
.colorBtnCon{ position: absolute; top: 78vh; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; gap: 0.26rem;}
.colorBtnCon a{ width: 0.4rem; height: 0.4rem; display: flex; justify-content: center; align-items: center; border-radius: 100%; border: 0.02rem solid rgba(-255, -255, -255, 0); cursor: pointer;}
.colorBtnCon a img{width: 0.28rem; height: 0.28rem;}
.colorBtnCon a:hover,
.colorBtnCon a.active{
	border: 0.02rem solid var(--borderColor);
}
.colorBtn a{
	width: 0.48rem;
	height: 0.48rem;
	border-radius: 100%;
	margin: 0 0.06rem;
	overflow: hidden;
}
.colorBtn a img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.car_wg_top{
	position: absolute;
	left:0;
	top: 0;
	opacity: 1;
	filter: blur(0rem);
	transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
	transition-duration: 1s;
	color: rgb(98, 82, 59);
}
.numList{
	top: 86vh;
	left: 0;
	width: 100vw;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}
.numList li{
	font-size: var(--font-size-2);
	color: var(--color-white);
	line-height: 1.1;
	width: 15%;
	display: flex;
	justify-content: center;
}
.numList li .numCon{
	font-size: var(--font-size-10);
	color: var(--color-yellow);
	line-height: 1.4;
	display: flex;
}
/* .cwt_t1{
	font-size: var(--font-size-3);
	font-family: 'p-bold' !important;
	color: rgba(98, 82, 59, 0.4); 
}
.cwt_t2{
	font-size: var(--font-size-13);
	line-height: var(--font-size-13);
	font-weight: 800;
	margin-top: 0.15rem;
	font-family: 'p-bold' !important;
}
.cwt_t3{
	font-size: var(--font-size-2);
	line-height: 0.38rem;
	margin-top: 0.15rem;
	letter-spacing: 0.007rem;
}
.cwt_t4{
	font-size: var(--font-size-5);
	margin-top: 0.2rem;
	line-height: 0.5rem;
	letter-spacing: 0.007rem;
	font-weight: 800;
	font-family: 'p-bold' !important;
} */


/* .flicker_btn_1{
	top: 57%;
	right: 44%;
}
.flicker_btn_2{
	top: 64%;
    right: 59.5%;
}
.flicker_btn_3{
	top: 59%;
	right: 58.5%;
}
.flicker_btn_4{
	top: 54%;
	right: 23%;
}
.flicker_btn_5{
	top: 53%;
	right: 35%;
}
.flicker_btn_6{
	top: 38%;
	right: 37%;
}
.flicker_btn_7{
	top: 73%;
	right: 32%;
} */


/* 外观弹窗 */
.car_wg_pop{
	position: absolute;
	top: 0;
	z-index: 10;
	height: 100vh;
	width: 50%;
	right: -55vw;
}
.wg_pop_close{
	position: absolute;
	left: -0.25rem;
	top: 55%;
	width: 0.5rem;
	height: 0.5rem;
	background-color:var(--color-gray-dcdcde);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	/* border-radius: 100%; */
	cursor: pointer;
	z-index: 5;
}
.wg_pop_close img{
	width: 0.15rem;
}
.wg_pop_img{
	position: relative;
	width: calc(100% - 1.6rem);
	margin-left: 0.8rem;
	margin-top: 0.6rem;
}
.wg_pop_img img{
	width: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	/* opacity: 0; */
	/* transition: all 1s; */
}
/* .wg_pop_img img:nth-of-type(1){
	position: relative;
}
.wg_pop_img img.active{
	opacity: 1;
} */
/* .wg_pop_text{
	padding: 1.8rem 0.8rem 0 0.8rem;
	position: relative;
} */
.wpt_min{
	/* position: absolute; */
	width: calc(100% - 1.6rem);
	margin: 0.2rem auto 0;
	line-height: 1.6;
	font-size: var(--font-size-2);
	min-height:0.4rem ;
	max-height:1.46rem ;
	/* left: 0.8rem;
	top: 1.8rem; */
	/* opacity: 0; */
	/* transition: all 1s; */
}
/* .wpt_min:nth-of-type(1){
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
} */
/* .wpt_min.active{
	opacity: 1;
} */
/* .wpt_min div{
	height: 0.8rem;
} */
/* .wpt_min div:nth-of-type(1){
	font-size: var(--font-size-8);
	line-height: var(--font-size-8);
	font-family: 'p-bold' !important;
}
.wpt_min div:nth-of-type(2){
	font-size: var(--font-size-3);
	line-height: 0.32rem;
	margin-top: 0.2rem;
} */
/* 打开弹窗 */
.car_wg_main{
	transition: all 1s;
	width: 100vw;
	height: 100vh;
}

/* 颜色选择按钮样式 */
.colorBtnCon a{
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* .colorBtnCon a.active{
    border-color: var(--borderColor);
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--borderColor);
    transform: scale(1.1);
} */

/* 图片显示控制 */
.carColor_pc .car_wg_bk,
.carColor_mb .car_wg_bk{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.carColor_pc .car_wg_bk.active,
.carColor_mb .car_wg_bk.active{
    opacity: 1;
    position: static;
}
.car_wg_pop{
	transition: all 1s;
	background-color: #050305;
	/* color: rgb(98, 82, 59); */
	color: var(--color-gray-dcdcde);
}
.car_wg_pop_title{
	/* position: absolute;
	top: 1.2rem;
	left: 0.8rem; */
	width: calc(100% - 1.6rem);
	margin: 0 auto;
	margin-top: 1.2rem;
	line-height: 1.25;
	display: flex;
	font-size: var(--font-size-12);
	font-family: 'p-bold' !important;
	align-items: center;
}
/* .cwpt_line{
	background: rgb(98, 82, 59);
	width: 1.5rem;
	height: 1px;
	margin: 0 0.2rem;
} */
.car_wg.open .car_wg_top{
	opacity: 0;
	filter: blur(0.6rem);
	/* transform: scale3d(1, 0.1, 1) translate3d(0, 50%, 0); */
	transform-origin: bottom left;
	transition-property: filter, opacity, transform;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car_wg.open .car_wg_bottom{
	opacity: 0;
	filter: blur(0.6rem);
	transform: scale3d(1, 0.1, 1) translate3d(0, 50%, 0);
	transform-origin: bottom left;
	transition-property: filter, opacity, transform;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car_wg.open .car_wg_main{
	transform: translateX(-40%);
}
.car_wg.open .car_wg_pop{
	right: 0;
}




.wide{
	background-color: rgb(219, 220, 215);
	padding: 1rem;
	color: rgb(98, 82, 59);
}
.wide_title_01{
	font-size: var(--font-size-1);
	font-family: 'p-bold' !important;
	color: rgba(98, 82, 59, 0.4); /* 修正颜色值写法 */
}
.wide_title_02{
	font-size: var(--font-size-13);
	line-height: var(--font-size-13);
	font-family: 'p-bold' !important;
	margin-top: 0.15rem;
}
.wide img{
	width: 100%;
	margin-top: 0.4rem;
}
/* .wide_box{
	
}
.wide_bot{
	display: flex;
	margin-top: 0.2rem;
}
.wide_bot img{
	margin-top: 0;
}
.wide_bot_l,.wide_bot_r{
	width: 49.5%;
}
.wide_bot_l{
	margin-right: 1%;
} */

.wi_min{
	position: relative;
}
.wi_min img{
	width: 100%;
}
.wide img{
	margin-top: 0.2rem;
}
.wi_min span{
	position: absolute;
	display: block;
	left: 0.3rem;
	bottom: 0.3rem;
	color: #fff;
	font-size: var(--font-size-5);
	font-family: 'p-bold' !important;
}
.wim_list{
	display: flex;
	justify-content: space-between;
}
.wim_list .wi_min{
	width: 49.4%;
}
.comfortable_01{
	padding: 0.5rem 0.25rem;
}

/* 文字动效 */
.text_in{
	opacity: 0;
	transform: translateY(1rem);
	transition: all 1s;
}
.text_in._into{
	opacity: 1;
	transform: translateY(0rem);
}



/* 视频按钮 */
.play_v{
    position: absolute;
    opacity: 1;
    pointer-events: auto;
	width: 100%;
}
.stop_v{
    position: absolute;
	opacity: 0;
    pointer-events: auto;
	width: 100%;
}
.button_v.active .play_v{
    opacity: 0;
    pointer-events: none;
}
.button_v.active .stop_v{
    opacity: 1;
    pointer-events: auto;
}
.button_v{
	position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    left: 0.5rem;
	bottom: 0.5rem;
	cursor: pointer;
}


/* 圆形闪光按钮 */
.flicker_btn{
	position: absolute;
	top: var(--t);
	right: var(--r);
}
.HotspotPoint__point__3GEmahoi {
	display: block;
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transform: scale(1);
	border: 1px solid transparent;
	transition: border 300ms;
}

.HotspotPoint__point__3GEmahoi:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 15px;
	height: 15px;
	transform: translate(-50%, -50%);
	transition: transform 300ms, background 300ms;
	border-radius: 50%;
	box-sizing: border-box;
	border: 2px solid transparent;
}

.HotspotPoint__point__3GEmahoi:before {
	border-color: #fff;
}

.HotspotPoint__hidden__2I1UO_ir {
	pointer-events: none;
}

.HotspotPoint__hidden__2I1UO_ir:before {
	transform: translate(-50%, -50%) scale(0);
}

.HotspotPoint__opened__17jxY6X7 {
	border-color: #fff;
}

.HotspotPoint__opened__17jxY6X7:before {
	transform: translate(-50%, -50%) scale(2);
}

.HotspotPoint__opened__17jxY6X7:before {
	background: #fff;
}

.HotspotPoint__pulsing__1MVjgpDF:before {
	width: 24px;
	height: 24px;
}

.HotspotPoint__pulsing__1MVjgpDF::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin-top: -13px;
	margin-left: -13px;
	transform-origin: center;
	border-radius: 50%;
	box-sizing: border-box;
	animation: HotspotPoint__pulse__1erxfkPR 2s infinite;
	border: 2px solid #fff;
}

.HotspotPoint__pulsing__1MVjgpDF::after {
	color: #fff;
	border: 2px solid #fff;
}
.flicker_btn:hover .HotspotPoint__pulsing__1MVjgpDF::after{
	color: #fff;
	border: 2px solid #fff;
	background-color: transparent;
	animation: HotspotPoint__pulse__1erxfkPR__hover 2s infinite;
}
.flicker_btn:hover  .HotspotPoint__point__3GEmahoi:before{
	background-color: transparent;
}
.flicker_btn.active .HotspotPoint__pulsing__1MVjgpDF::after{
	color: #fff;
	border: 2px solid #fff;
	background-color: transparent;
	animation: HotspotPoint__pulse__1erxfkPR__hover 2s infinite;
}
.flicker_btn.active  .HotspotPoint__point__3GEmahoi:before{
	background-color: transparent;
	border-color: #fff;
}

@keyframes HotspotPoint__pulse__1erxfkPR {
	0% {
		opacity: 0;
		border-width: 2px;
		transform: scale(0.5, 0.5);
		background-color: rgba(255, 255, 255, .8);
	}

	50% {
		opacity: 1;
		transform: scale(0.8, 0.8);
		border-width: 2px;
		background-color: rgba(255, 255, 255, .8);
	}

	100% {
		opacity: 0;
		border-width: 1px;
		background-color: rgba(255, 255, 255, .1);
		transform: scale(2.5, 2.5);
	}
}
@keyframes HotspotPoint__pulse__1erxfkPR__hover {
	0% {
		opacity: 0;
		border-width: 2px;
		transform: scale(0.5, 0.5);
		background-color: #fff;
	}

	50% {
		opacity: 1;
		transform: scale(0.8, 0.8);
		border-width: 2px;
		background-color: #fff;
	}

	100% {
		opacity: 0;
		border-width: 1px;
		background-color: #fff;
		transform: scale(2.5, 2.5);
	}
}

.car_wg_pop_mb{
	display: none;
}

.unit_i4 img{
	width: 100%;
}
.unit_i4{
	height: auto;
}
  /* 外饰 */
  /*内饰 */
.interior_model{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #000;
}
.interior_model_img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.interior_model_img img{
	width: 100%;
}

.interior_model .distance{
	
	position: absolute;
	top: var(--t);
	left: var(--l);
	transform: rotate(var(--rotate));
	width: var(--width);
	/* padding: 0 0.34rem; */
	
}
.interior_model .distance dt{
	font-size: var(--font-size-2);
	color: var(--color-white);
	line-height: 1.6;
	height: 0.52rem;
	padding: 0 0.34rem;
}
.interior_model .distance dt span{
	font-size: var(--font-size-9);
	line-height: 1.6;

}
.interior_model .distance dd{
	height: 0.42rem;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
	border-top: 1px solid rgba(255, 255, 255, 0.8);
	
}
.interior_list{
	width: 100vw;
	height: 100vh;
	position: relative;
	/* background: url(../images/l8/interior_bg.jpg) no-repeat center;  */
	background-image: var(--background-img);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.interior_list .moduleContent{
	top: 0.9rem;
}


.interior_list .interiorSwiper,.safetySwiper{
	position: absolute;
	top: 2.16rem;
	left: 1.5rem;
	/* transform: translate(-50%, -50%); */
	width: calc( 100vw - 1.5rem);
	height: 7rem;
	

}
.interior_list .interiorSwiper .swiper-slide{
	position: relative;
}
.interior_list .interiorSwiper .con{
	width: 5.62rem;
	height: 6.32rem;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}
.interior_list .interiorSwiper .con img{
	width: 100%;
	transform: scale(1);
	transition: all 0.5s ease;
}
.interior_list .interiorSwiper .con:hover img{
	transform: scale(1.1);
	transition: all 0.5s ease;
}
.interior_list .interiorSwiper .con .word{
	position: absolute;
	bottom: 0;
	font-size: var(--font-size-4);
	width: 100%;
	height: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	background: linear-gradient(to top, rgba(-255, -255, -255, 0.5), rgba(-255, -255, -255, 0));
	line-height: 1.1;
}
.buttonCon{
	width: 1.38rem;
	height: .52rem;
	position: absolute;
	top: 0.78rem;
	right: 1.64rem;
}
.buttonCon div,.intelligent .swiper-button-prev,
.intelligent .swiper-button-next,.interior_model .swiper-button-prev,
.interior_model .swiper-button-next{
	border: 1px solid var(--color-white);
	background-color: rgba(-255, -255, -255, 0.5);
	width: 0.48rem;
	height: 0.48rem;
}

.power{position: relative; width: 100%; height: 100vh; background: url(../images/l8/power_bg.jpg) no-repeat center; background-size: cover;}
.power .pic{width: 100%; height: 100vh; position: absolute; top: 0; left: 0;}
.power .pic img{width: 100%; height: 100%; object-fit: cover;}
.power .numList li{width: 25%;}
.power .numList li .numCon{color: var(--color-gray-dcdcde);}
.power .powerL {position: absolute; left: 1.5rem; top: 4.4rem;}
.power .powerL div{ display: flex; align-items: center; color: var(--color-gray-dcdcde); font-size: var(--font-size-2); margin: 0.1rem 0;}
.power .powerL .icon{width: 0.25rem; height: 0.25rem; display: flex; align-items: center; margin-right: 0.14rem;}
.power .powerL .icon img{width: 100%;}
.power .engine_efficiency_con{position: absolute; left: 4.84rem; bottom: 1.4rem; height: 4.4rem; width: 12.36rem; overflow: hidden;}
.power .engine_efficiency{ height: 100%; display: flex;}
.power .engine_efficiency li{width: 6.18rem; height: 100%; display: flex; justify-content: center; flex-wrap: wrap;}
.power .engine_efficiency li img{width: 96%; object-fit: contain; }

.power .engine_efficiency li .creditworthiness{ margin-top: 0.3rem; font-size: var(--font-size-2); color: #fff; padding-left: 0.36rem; position: relative; display: flex; flex-wrap: wrap; align-items: center;}
.power .engine_efficiency li .creditworthiness>div{width: 100%;}
.power .engine_efficiency li .creditworthiness::after{content: ''; position: absolute; left:0; top: 50%; transform: translateY(-50%); width: 1px; height: 1px; background-color: #fff; height: 0.74rem;}
.power .engine_efficiency li .creditworthiness .data{font-size: var(--font-size-6); color:var(--color-gray-dcdcde); font-weight: bold; line-height: 1; display: flex; align-items: center;}
.power .engine_efficiency li .creditworthiness .data div{line-height: 1.2;}


.intelligent,.interior_model{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}

/* Intelligent Swiper Styles */
.intelligent .swiper,.interior_model .swiper {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.intelligent .swiper-wrapper ,.interior_model .swiper-wrapper {
    transition-timing-function: ease-in-out;
}

.intelligent .swiper-slide,.interior_model .swiper-slide {
    width: 100%;
    height: 100%;
    /* opacity: 0; */
    /* transition: opacity 0.5s ease; */
}

.intelligent .swiper-slide-active {
    /* opacity: 1; */
}

.intelligent .slide-content,.interior_model .slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
	width: 100vw;
	height: 100vh;
}

.intelligent .media-container,.interior_model .media-container {
    position: absolute;
    width: 100%;
	height: 100%;
    /* margin-bottom: 2rem; */
}

.intelligent .media-container img,
.intelligent .media-container video,.interior_model .media-container img,
.interior_model .media-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 .interior_model .space0 img{
	position: absolute;
	bottom: 0;
	left: 0;
	 width: 100%;
	 object-fit: initial;
	 height: auto;
 }
.interior_model .con {
	position: absolute;
	top: 2.46rem;
	left: 1.5rem;
	color: var(--color-white);
	font-size: var(--font-size-12);
	line-height: 1.37;
	/* transform: translate(-50%, -50%); */
}
.interior_model .mark {
	/* position: absolute;
	bottom: 0;
	left: 0; */
	width: 100%; height: 100%;
}
.interior_model .mark img {
	position: absolute;
	bottom: 0rem;
	left: 0;
	width: 100%; 
}
.interior_model .word {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: var(--font-size-4);
	line-height: 1.1;
	color: var(--color-white);
	font-size: var(--font-size-2);
}
.interior_model .word span {
	font-size: var( --font-size-10);
}
.interior_model .word .mark_w0{
	position: absolute;
	bottom:1.4rem;
	left: 10.64rem;
	width:100%;
}
.interior_model .word .mark_w1{
	position: absolute;
	bottom:0.6rem;
	left: 10.6rem;
	width:100%;
}
/* .intelligent .text-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
} */

/* Swiper Navigation Styles */
/* .intelligent .swiper-button-prev,
.intelligent .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
} */

/* .intelligent .swiper-button-prev:hover,
.intelligent .swiper-button-next:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.1);
} */

.intelligent .swiper-button-prev ,.interior_model .swiper-button-prev {
    left:0.2rem;
	z-index: 10;
}

.intelligent .swiper-button-next,.interior_model .swiper-button-next {
    right: 0.4rem;
	z-index: 10;
}

/* Swiper Pagination Styles */
.intelligent .swiper-pagination, .interior_model .swiper-pagination {
    position: absolute;
    bottom: 0.2rem;
    left: 0;
    width: 100%;
    text-align: center;
}

.intelligent .swiper-pagination-bullet, .interior_model .swiper-pagination-bullet {
    width:0.12rem;
    height:0.12rem;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    margin: 0 0.06rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.intelligent .swiper-pagination-bullet-active ,.interior_model .swiper-pagination-bullet-active {
    background-color: #fff;
    transform: scale(1.3);
}

/* Mobile Responsive Styles */
/* @media (max-width: 768px) {
    .intelligent .swiper-button-prev,
    .intelligent .swiper-button-next {
        width: 40px;
        height: 40px;
        left: 10px;
        right: 10px;
    }
    
    .intelligent .text-content {
        padding: 0 20px;
    }
    
    .intelligent .media-container {
        margin-bottom: 1.5rem;
    }
} */
.intelligent .moduleT{top:5.32rem;}
.intelligent .pic{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.intelligent .pic img{width: 100%; height: 100%; object-fit: cover;}/* .intelligent .moduleT{top: 6.14rem;} */
.intelligent .moduleContent{top:6.5rem; }
.intelligent .title{font-size: var( --font-size-12); line-height: 1.3; min-height: 0.68rem; color: var(--color-white); position: absolute; top: 6.42rem; left: 1.5rem;}
.intelligent .con{font-size: var( --font-size-2); line-height: 1.6; color: var(--color-white); position: absolute; top: 7.2rem; left: 1.5rem;}
/* 视频欣赏模块样式 */
.videoAppreciation {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.videoAppreciation .videoCover{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.videoAppreciation .videoCover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.photoAlbum {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.photoAlbum .albumContainer {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Swiper 容器样式 */
.photoAlbum .swiper-container {
    width: 100%;
    height: 7.52rem;
	--swiper-scrollbar-bottom:0.2rem;

}

.photoAlbum .swiper-wrapper {
    transition-timing-function: ease-in-out;
}

/* Swiper slide 样式 - 设置slidesPerView: 'auto' */
.photoAlbum .swiper-slide {
    width: 7.5rem;
    height: 100%;
    /* margin-right: 0.5rem; */
    /* transition: all 0.3s ease; */
    /* flex-shrink: 0; */
}
.photoAlbum .picTitle{
	font-size: var( --font-size-12);
	padding-top: 0.74rem;
	line-height:calc( 100vh - 7.52rem - 0.74rem );
	color: var(--color-white);
	height:calc( 100vh - 7.52rem - 0.74rem );
	text-align: center;
}
/* 图片包装样式 */
/* .photoAlbum .swiper-slide {
    width: 7.5rem;
    height: 100%;
} */

.photoAlbum .swiper-slide >div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
}

/* 模式样式 */
.photoAlbum .swiper-slide .mode0 .img0 {
    width: 100%; height: 50%; object-fit: cover;
}

.photoAlbum .swiper-slide .mode0 .img1,
.photoAlbum .swiper-slide .mode0 .img2 {
    width: 50%; height: 50%;
    object-fit: cover;
}
.photoAlbum .swiper-slide .mode1 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.photoAlbum .swiper-slide .mode2 img{
	width: 100%;
	height: 50%;
	object-fit: cover;
}
.photoAlbum .photoItem img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* 进度条分页器样式 */
.photoAlbum .swiper-pagination-progress {
    position: absolute;
    bottom: 0.3rem;
    left: 15%;
    width: 70%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    z-index: 10;
}

.photoAlbum .swiper-pagination-progressbar {
    background: #fff;
    height: 100%;
    transition: width 0.3s ease;
    border-radius: 2px;
}



/* 导航按钮样式 */
.photoAlbum .swiper-button-prev,
.photoAlbum .swiper-button-next {
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    top: 50%;
    margin-top: -0.25rem;
    transition: all 0.3s ease;
    color: #fff;
}

.photoAlbum .swiper-button-prev:hover,
.photoAlbum .swiper-button-next:hover {
    background: rgba(0, 0, 0, 0.5);
}

.photoAlbum .swiper-button-prev::after,
.photoAlbum .swiper-button-next::after {
    font-size: 0.2rem;
}



.videoAppreciation .video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.videoAppreciation .playCover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.videoAppreciation .playCover .play {
    width:0.82rem;
    height:0.82rem;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.videoAppreciation .cover:hover .play {
    transform: scale(1.1);
}
.videoAppreciation .loading{
	font-size: var( --font-size-2);
	line-height: 1.6;
	color: var(--color-white);
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
}

/* Loading图标样式 */
.videoAppreciation .loading::before {
	content: '';
	display: inline-block;
	width: 0.2rem;
	height: 0.2rem;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: var(--color-white);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

/* 旋转动画 */
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* 调整loading图标的旋转中心 */
.videoAppreciation .loading::before {
	transform-origin: center;
}

.intelligent_color {
    position: relative;
    /* text-align: center; */
	width: 100vw;
	height: 100vh;
    /* background-color: #f8f8f8; */
}
.intelligent_color .title{
	font-size: var( --font-size-12);
	line-height: 1.3;
	min-height: 0.68rem;
	color: var(--color-white);
	position: absolute;
	top: 2.6rem;
	left: 1.5rem;
	z-index: 10;
}
.intelligent_color .intelligent_main {
    position: relative;
	width: 100%;
	height: 100%;
}

/* PC端图片容器 */
.intelligent_color .intColor_pc {
    position: absolute;
    width: 100%;
    height: 100%;
	top: 0;
	left: 0;
    /* margin-bottom: 30px; */
    overflow: hidden;
}

/* 移动端图片容器 */

.intelligent_color .intColor_mb {
    position: absolute;
    width: 100%;
    height: 100%;
	top: 0;
	left: 0;
    /* margin-bottom: 30px; */
    overflow: hidden;
}

/* 内饰图片样式 */

.intelligent_color .int_wg_bk {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}


.intelligent_color .int_wg_bk.active {
    opacity: 1;
}

/* 颜色选择按钮容器 */
.intelligent_color .intColorBtnCon {
    display: flex;
    justify-content: center;
	align-items: center;
    gap: 20px;
   position: absolute;
   bottom: 0;
   height: 0.8rem;
   left: 50%;
   transform: translateX(-50%);
   background-color: rgba(255, 255, 255, 0.75);
   width: 100%;
}

/* 颜色选择按钮样式 */
.intelligent_color .intColorBtnCon a {
    width: 0.4rem;
    height: 0.4rem;
	cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    border: 0.02rem solid rgba(255, 255, 255, 0);
    transition: all 0.3s ease;
    position: relative;
}

.intColorBtnCon a img {
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    /* object-fit: cover; */
}

.intColorBtnCon a:hover {
    transform: scale(1.2);
}

.intColorBtnCon a.active {
    border-color: var(--borderColor);
    /* box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); */
   transform: scale(1.2);
}

/* 颜色名称显示 */
.colorName {
    font-size: 20px;
    color: #333;
    font-weight: 500;
}

.safety{
	width: 100vw;
	height: 100vh;
	position: relative;
	/* background: url(../images/l8/interior_bg.jpg) no-repeat center;  */
	background-image: var(--background-img);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.safety .buttonCon{top: 1.66rem;}
.safetySwiper{
	height: 6.2rem;
	top: 3rem;
}
.safetySwiper .swiper-slide{width: 13.94rem; height: 5.36rem;}
.safetySwiper .swiper-slide .con{ width: 13.94rem; height: 5.36rem; display: flex; justify-content: space-between;}
.safetySwiper .swiper-slide .con .l{width: 8.3rem; height: 100%; overflow: hidden; }
.safetySwiper .swiper-slide .con .l img{width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: all 0.5s ease;}
.safetySwiper .swiper-slide .con .l:hover img{transform: scale(1.1); transition: all 0.5s ease;}
.safetySwiper .swiper-slide .con .r{width: calc(100% - 8.3rem); height: 100%; display: flex; justify-content: center; align-items: center;}
.safetySwiper .swiper-slide .con .r .word{width: 76%; color: var(--color-gray-dcdcde);}
.safetySwiper .swiper-slide .con .r .title{font-size: var( --font-size-11);  line-height:1.2; min-height: 0.6rem; display: flex; align-items: center;
}
.safetySwiper .swiper-slide .con .r .w{font-size: var(--font-size-2); line-height: 1.6; margin-top: 0.2rem;}
.anT span{ display: block;}

@media (max-width: 768px){
	:root{
		--swiper-theme-color:#fff;
		--swiper-pagination-bullet-inactive-color:#fff;
		--swiper-pagination-bullet-width:0.8rem;
		--swiper-pagination-bullet-height:0.04rem;
		--swiper-pagination-bullet-horizontal-gap:0.06rem;
		--swiper-navigation-size:0.22rem;
		--full-width:0.48rem;
		--button-height:0.48rem;
	}
	.moduleT{
		top: 1.4rem;
    	left: 0.78rem;
		width: 90%;
	}
	.moduleT::after{
		width: 0.46rem;
	}
	.moduleContent{
		left: 0.78rem;
		width: 76%;
		top: 1.8rem;
	}
	.moduleContent .con br{ display: none;}
	.videoPresentation{
		height: 8.86rem;
	}
	.video-mask{
		transform: translate(-50%, -50%) scale(1);
		width: 100%;
		height: 100%;
	}
	.videoPresentation .word{
		width: 85%;
	} 
  /* 外饰 */
 	.car_wg_pop{
		display: none;
	}
	.car_wg_pop_mb{
		position: relative;
		display: block;
		width: 100%;
		height: 100vh;
		/* height: 100svh; */
		/* padding: 0.25rem; */
		background-color: #050305;
	}
	/* .car_wg_pop_mb .swiper-slide{
		background-color: rgb(219, 220, 215);
	}
	.car_wg_pop_mb .swiper-slide img{
		width: 100%;
	} */
	.cwt_t2{
		font-size: 0.45rem;
		line-height: 0.45rem;
	}
	.cwt_t3{
		padding-right: 0.4rem;
		font-size: 0.26rem;
		line-height: 0.4rem;
		margin-top: 0.3rem;
	}
	.cwt_t4{
		font-size: 0.32rem;
        line-height: normal;
        margin-top: 0.3rem;
	}
	.colorBtnCon a{
		width: 0.6rem;
		height: 0.6rem;
	}
	.colorBtnCon a img{
		width: 0.4rem;
		height: 0.4rem;
	}
	.colorBtnCon{
		top: 64%;
	}
	/* .car_wg{
		position: relative;
		height: auto;
	} */
	.car_wg_box{
		/* height: 200vh; */
	}
	/* .car_wg_top {
	    left: 0.5rem;
	    top: 1.2rem;
	} */
	.flicker_btn {
		display: none;
	}
	.car_mb_sw_text{
		font-size: 0.3rem;
		padding-top: 2.2rem;
		color: var(--color-gray-dcdcde);
		background-color: #000;
		/* height: 0.8rem; */
	}
	.car_w_m_sw{
		width: 82vw;
		margin: 0 auto;
	}
	.car_w_m_sw .title{
		font-size: var(--font-size-10);
		line-height: 1.4;
		margin-bottom: 0.26rem;
	}
	.car_w_m_sw .con{
		font-size: var(--font-size-6);
		line-height: 1.8;
		min-height: 1rem;
		max-height: 3.78rem;
	}
	.car_w_m_sw_page{
		margin-top: 1.35rem;
		text-align: center;
	}
	.car_w_m_sw .pic{width: 100%; height: 3.8rem; overflow: hidden;}
	.car_w_m_sw .pic img{width: 100%; height: 100%; object-fit: cover;}
	/* .interior_list{height: 14rem;} */
	.interior_model .distance{top: var(--tm);left: var(--lm); width: var(--width-mb); transform: rotate(--rotate-mb);}
	.numList{ flex-wrap: wrap; top: 70vh; }
	.numList li{width: 45%; margin: 0.3rem 0;}
	.numList li .numCon{ margin-top: 0.1rem;}
    /* 外饰 */
	.interior_list .interiorSwiper, .safetySwiper{
		top: 3.4rem;
		left: 0.22rem;
		width:calc(100vw - 0.22rem);
		height: 9rem;
	}
	.interior_list .interiorSwiper .swiper-slide{
		width: 90%;
		height: 8.02rem;

	}
	.interior_list .interiorSwiper .swiper-slide .con{
		width: 6.12rem;
		height: 8.02rem;

	}
	.interior_list .interiorSwiper .con img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* .interior_model .mark img{width: 100%; height: 100%; object-fit: cover;} */
	.interior_model .con{left: 0.78rem;}
	.intelligent_color .intColorBtnCon{ height: 1.3rem;}
	.intelligent_color .intColorBtnCon a{width: 0.6rem; height: 0.6rem;}
	.intColorBtnCon a img{width: 0.4rem; height: 0.4rem;}
	.power .numList li{width: auto; flex: 1;}
	.power .powerL{left: 0.78rem; top: 70vh;}
	.power .powerL .icon{width: 0.44rem; height: 0.44rem;}
	.power .powerL div{margin: 0.22rem 0;}
	.power .engine_efficiency_con{ left: 0; height: 8rem;}
	.power .engine_efficiency{width: 300vw;}
	.power .engine_efficiency li{width: 100vw;}
	.intelligent .moduleT{ top: 60vh;}
	.intelligent .moduleContent{ top: 64vh;}
	.intelligent .con{top: 78vh;  left: 0.78rem; width: calc(100vw - 0.78rem*2);}
	.intelligent .con br{display: none;}
	.intelligent .title{top: 70vh; left: 0.78rem; width: calc(100vw - 0.78rem*2);}
	.interior_model .word .mark_w0, .interior_model .word .mark_w1{ left: initial; right: 0.7rem; width: 40%; text-align: center;}
	.interior_model .word .mark_w0{ bottom: 3.8rem;}
	.interior_model .word .mark_w1{bottom:2.5rem;}
	.safety{background-image: var(--background-img-mb);}
	.safetySwiper{width: 100%; left: 0; top: 2.8rem; height: 10.5rem;}
	.safetySwiper .swiper-slide{width: 100%; height: 10rem;}
	.safetySwiper .swiper-slide .con{flex-wrap: wrap; width:84%; margin: 0 auto;}
	.safetySwiper .swiper-slide .con .l{ width: 100%; height: 4rem;}
	.safetySwiper .swiper-slide .con .r{width: 100%; margin-top: 0.1rem;}
	.safetySwiper .swiper-slide .con .r .word{width: 95%;}
	.safetySwiper .swiper-slide .con .r .title{height: auto;}
	.photoAlbum .picTitle{ padding-top: 1.2rem; line-height: calc(100vh - 7.52rem - 1.2rem); height: calc(100vh - 7.52rem - 1.2rem);}
	.photoAlbum .swiper-slide { width:100vw; height: 100%;}
	.buttonCon div, .intelligent .swiper-button-prev, .intelligent .swiper-button-next, .interior_model .swiper-button-prev, .interior_model .swiper-button-next{
		width: 0.6rem;
		height:0.6rem;
	}
	.videoAppreciation .video {
   	 height: 4rem;
	}
}