h1 {
	text-align: center;
	font-size: 3rem;
	color: #fff;
	font-family: "Roboto", sans-serif;
}

p {
	color: #BBBBBB !important;
	font-weight: 300 !important;

}




.index_box {
	position: relative;
	min-height: 100vh;
	width: 100%;
	background-color: #1A1A1A;

}


.search {
	cursor: pointer;
	padding: 0 3.125rem;
	width: 1.125rem;
	height: 1.125rem;
}


/* 头部 */

/* home-title-img */
.index-title {
	height: 62.5rem;
	width: 100%;
	position: relative;
	/* 默认显示状态，transition 用于平滑动画 */
	transition: transform 0.5s ease, opacity 0.5s ease;
	transform: translateY(0);
	opacity: 1;
}

.index-title.hidden {
	transform: translateY(-50px);
	opacity: 0;
}

.index-title img {
	position: absolute;
	top: -1.875rem;
	left: 0;
	width: 100%;
}

.index-title-box {
	position: absolute;
	top: 19.125rem;
	color: #fff;
	/* 		width: calc(100% - 21.75rem); */
	/* 	left: 21.75rem; */
	width: 100%;
	/* background-color: #1A1A1A; */
	text-align: center;
	z-index: 8;
}

.title {
	font-family: "Roboto", sans-serif;
	font-size: 7.9375rem;
	font-weight: bold;
	letter-spacing: -2px;
}

.ltitle {
	font-size: 2.375rem;
	font-weight: bold;
	margin-bottom: 1.4375rem;
	padding-top: 2rem;
	letter-spacing: 2px;
	/* 根据需要调整数值 */
}

/* desc */

.desc {
	position: relative;
	color: #BBBBBB;
	font-size: 1.5rem;
	line-height: 2rem;
	padding-bottom: 14.625rem;
	/* 	background-color: #1A1A1A; */
	z-index: 2;
	width: 60%;
	margin: 0 auto;
	/* 	overflow: hidden; */

}

.approach-box .approach-desc{
	width: 70%;
	margin: 0 auto;
}

.desc strong {
	font-size: 2rem;
	font-weight: normal;
	line-height: 3.375rem;
}

.desc p {
	position: absolute;
	width: 100%;
	text-align: center;
	z-index: 3;
}

/* .desc-back {
	position: absolute;
	top: -1.25rem;
	background: linear-gradient(to bottom, rgba(0,0,0,0.4) 10%, rgba(0, 0, 0, 0) 100%);
	height: 3.75rem;
	width: 100%;
} */

.index-content-box {
	z-index: 10;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.index-title-desc-box {
	position: absolute;
	width: 100%;
	height: 100%;
	/* 	top: -1.9rem; */
	/* 	height: 34rem; */
	/* 限制高度 */
	overflow: hidden;
	z-index: 2;

	/* 隐藏超出的部分 */

}

.img_back {
	top: 0;
	width: 100%;
	height: 20%;
	position: absolute;
	z-index: 1;
	background-color: #1A1A1A;
}

.index-title-desc-box img {
	width: 106%;
	object-fit: contain;
}

.index-title-desc-box video {
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

.approach-box {
	padding-top: 11.875rem;
/* 	background-color: #1A1A1A; */
}

.approach-title {
	font-size: 3rem;
	color: #fff;
	font-family: "Roboto", sans-serif;
	width: 100%;
	text-align: center;
	line-height: 4rem;
	letter-spacing: 0.02rem;
	margin-bottom: 2.875rem;
}

.approach-desc {
	font-size: 1.5rem;
	color: #BBBBBB;
	text-align: center;
	font-weight: 300;
	line-height: 2rem;

}



.approach-title,
.approach-desc {
	opacity: 0;
	transform: translateY(20px);
}

/* 定义跳入动画 */
@keyframes jumpIn {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 添加 active 类后触发动画，并设置 forwards 保持末状态 */
.approach-title.active,
.approach-desc.active {
	animation: jumpIn 1s ease-out forwards;
}

/* desc */

/* approach-img-box */
.approach-img-box {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	text-align: center;
	margin-top: 6.25rem;
	padding-bottom: 12.5rem;

}

.approach-item {
	background-color: #2A2A2A;
	width: max-content;
	height: 60rem;
	border-radius: 0.625rem;
	width: 32%;
	overflow: hidden;
	opacity: 0;
	transform: translateY(50px);
	transition: all 0.5s ease;
}

.approach-item.show {
	opacity: 1;
	transform: translateY(0);
}

.approach-item img {
	width: 100%;
	transition: transform 0.5s ease;
}

.approach-item .approach-item-img {
	overflow: hidden;
	/* height: 20.625rem; */
}

.approach-item:hover>.approach-item-img img {
	transform: scale(1.5);
}

.approach-info img {
	width: 1rem;

}

.approach-info {
	text-align: left;
	padding: 3.125rem 1.7rem 0 2rem;
}

.approach-info>span {
	display: block;
	font-size: 1.75rem;
	color: #fff;
	padding-bottom: 2rem;
	border-bottom: 0.0625rem solid #5D5D5D;
}

.approach-info p {
	font-size: 1.22rem;
	color: #CACACA;
	margin-top: 1.25rem;
	line-height: 1.875rem;
}

.approach-info p span {
	position: relative;
	width: max-content;
	color: #fff;
	border-bottom: 0.0625rem solid transparent;
	cursor: pointer;
}

.approach-info p span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 0.0625rem;
	/* 下划线粗细 */
	width: 100%;
	/* 占满整个元素宽度 */
	background: #999999;
	/* 下划线颜色 */
	transform: scaleX(0);
	/* 初始缩放为 0 */
	transform-origin: left;
	/* 从左边开始展开 */
	transition: transform 0.2s ease-out;
}

.approach-info p span:hover::after {
	transform: scaleX(1);
	/* 展开到完整宽度 */
}

.approach-info p:nth-child(2) {
	padding-bottom: 2rem;
}

.approach-info-title {
	font-size: 1.375rem;
	font-family: "Roboto", sans-serif;
	color: #CACACA;
	margin-top: 1.125rem;
}

.approach-info-title span {
	font-family: "Roboto", sans-serif;
}

/* approach-img-box */

/* backoffer_box */

.backoffer_box {
	position: relative;
	min-height: 54.375rem;
	padding: 0 10%;
	padding-top: 7.5rem;
	text-align: center;
	background-color: #2A2A2A;

}

.backoffer_box>span {
	font-size: 3rem;
	color: #fff;
}

.blackOffer-tabs {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	margin-top: 4rem;
}

.b-tabs-item {
	position: relative;
	cursor: pointer;
	width: 32%;
	padding-top: 1.25rem;
	border-top: 0.125rem solid #888888;
	text-align: center;
	color: #888888;
	font-size: 1.25rem;
	font-family: "Roboto", sans-serif;
	transition: border-top-color 0.s ease;
	/* 仅过渡边框颜色 */
}

/* 伪元素模拟顶部边框 */

/* 激活状态 */
/* .b-tabs-item-active{
	border-top: 0.125rem solid #ffffff;
	color: #fff;
} */

/* 激活时扩展伪元素宽度至 100%，并切换颜色 */



/* 使用伪元素来模拟上边框动画 */
.b-tabs-item::after {
	content: "";
	position: absolute;
	top: 0;
	/* 与容器上边对齐 */
	left: 0;
	/* 从左侧开始 */
	height: 0.125rem;
	/* 与原来边框粗细一致 */
	width: 0;
	/* 初始宽度 0 */
	background-color: #fff;
	/* 生长时显示的白色 */
	transition: width 0.5s ease;
	/* 宽度变化的动画 */
}

.b-tabs-item-active {
	border-top-color: transparent;
}

/* 鼠标经过时，伪元素的宽度扩展至100%，实现从左到右出现效果 */
.b-tabs-item-active::after {
	width: 100%;
}




.blackOffer-back {
	position: absolute;
	/* 	height: 32.875rem; */
	height: 32.875rem;
	width: 90%;
	/* 	margin: 8rem ; */
	left: 0;
	object-fit: contain;
	z-index: -1;

}

.blackOffer-info-all {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	/* 	margin-bottom: 9rem; */
}




.blackOffer-info-left-item,
.blackOffer-info-right-item {
	display: flex;
	align-items: center;
	font-size: 1.5rem;
	font-family: "Roboto", sans-serif;
	color: #fff;
	font-weight: bold;
	margin-bottom: 1.75rem;
	height: 2.25rem;
	margin-right: 5rem;
}

.blackOffer-info-left-item img {
	width: 2.25rem;
	height: 2.25rem;
	margin-right: 1rem;
}

.blackOffer-info-right-item img {
	width: 0.75rem;
	height: 0.8125rem;
	margin-right: 1rem;
}

.blackOffer-info {
	/* 	position: relative; */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* 	margin: 0 16.25rem; */
	text-align: left;
	margin-top: 4.875rem;
	color: #BBBBBB;
	/* 	padding-bottom: 10rem; */

	transform: translateX(-20px);
	transition: transform 0.5s ease, opacity 0.5s ease;

}



/* #all .blackOffer-back {
	left: 0;
} */

.blackOffer-info.blackOffer-active {
	/* 激活状态：正常位置、不透明 */
	opacity: 1;
	transform: translateX(0);
}

.blackOffer-info p {
	font-size: 1.375rem;
	margin-top: 2.625rem;
	width: 60%;
}



.blackOffer-title {
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	margin-bottom: 2.625rem;
}

.blackOffer-title-all {
	display: none;
}

.blackOffer-info span:nth-child(2) {
	font-size: 1.375rem;
}

.blackOffer-info ul {
	position: relative;
	margin-top: 1.875rem;
	font-size: 1.375rem;
	margin-bottom: 3.125rem;
	list-style-type: none;
	/* 移除默认的列表符号 */
}

.blackOffer-info ul li {
	margin-bottom: 1.25rem;
}

.blackOffer-info a {
	font-size: 1.125rem;
	color: #CACACA;
	text-decoration: none;
	font-weight: bold;
}

.try-btn {
	position: absolute;
	bottom: -3.125rem;
	left: 0;
	display: flex;
	align-items: center;
	z-index: 1;
}

.try-btn img {

	width: 0.8125rem;
	height: 0.625rem;
	object-fit: contain;
	margin-left: 0.5rem;
}

.share-box {
	display: flex;
	flex-wrap: wrap;
	padding-top: 7.375rem;


}


.share-right {
	width: 58%;
	border-radius: 1.25rem;
	overflow: hidden;
	height: 39.6875rem;
	overflow: hidden;
}

.share-right img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.share-right img:hover {
	transform: scale(1.2);
}

.share-left {
	width: 40%;
	margin-right: 2%;
}

.share-left p {
	margin-bottom: 1rem !important;
}

.post-btn:hover {
	background-color: #fff;
	color: #1A1A1A;
}

.post-btn:hover span {
	color: #1A1A1A;
}



.share-left h1 {
	text-align: left;
	margin-bottom: 3rem;
}

.share-left img {
	width: 0.8125rem;
	height: 0.625rem;
	object-fit: contain;
	margin-left: 0.5rem;

}

.share-left p {
	font-size: 1.5rem;
	color: #BBBBBB;
	text-align: left;
	line-height: 1.875rem;
	/* 	margin-bottom: 1.25rem; */
}



.share-left h1,
.share-left p {
	opacity: 0;
	transform: translateY(20px);
}

.post-btn {
	cursor: pointer;
	display: flex;
	align-items: center;
	padding: 0 2.625rem;
	height: 3.75rem;
	width: max-content;
	line-height: 3.75rem;
	border-radius: 2rem;
	border: 0.125rem solid #fff;
	margin-top: 2.75rem;

}

.post-btn>span {
	font-size: 1.125rem !important;
	margin: 0 !important;
	color: #fff;
}

/* backoffer_box */

/* customers_box */

.customers {
	margin-top: 11.375rem;
	padding-bottom: 10.125rem;
}

.customers_box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	/* 	justify-content: center; */
	gap: 2.25rem;
	/* 现代浏览器支持 gap 在 flex 布局中 */

}

.customers_box .customers_item {
	flex: 1 1 calc(16% - 2.25rem);
	/* 如每行3个，可以调整百分比 */
	aspect-ratio: 1 / 1;
	border-radius: 1rem;
	overflow: hidden;
	background-color: #2A2A2A;
/* 	margin-bottom: 2.25rem; */
	opacity: 0;
	transform: translateY(20px);
}

/* 定义客户项的出现动画 */
@keyframes itemIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 激活客户项动画类 */
.visible {
	animation: itemIn 0.5s ease forwards;
}

.customers h1,
.customers-desc {
	opacity: 0;
	transform: translateY(20px);
}

.jumpIn {
	animation: jumpIn 0.8s ease forwards;
}

/* .customers_item:not(:nth-child(6n)){
	margin-right: 2.25rem;
} */

.customers_item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1rem;
}

.customers-desc {
	font-size: 1.5rem;
	color: #BBBBBB;
	text-align: center;
	margin-top: 2.25rem;
	margin-bottom: 4.125rem;
}




/* customers_box */


/* feature_box */
.feature_box {
	background-color: #0C0C0C;
	position: relative;
	width: 100%;
	/* 利用 padding-bottom 创建一个等比例容器；例如 50% 表示高度 = 50% * 宽度，即 2:1 的比例 */
	min-height: 58.4375rem;
	/* 	z-index: 2; */
	/* 	background: url("../img/feature_video_back.png") no-repeat center;
	background-size: contain; */
	/* 或根据需求选择 cover / 100% auto */
}

.feature_box video{
	transform: translateY(40px);
	 clip-path: inset(140px 0 40px 0); /* 上、右、下、左顺序 */
}

.feature_back {
	position: absolute;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
/* 	background-color: #0C0C0C; */
}

video {
	width: 100%;
	height: 100%;
}

.feature_back img {
	width: 100%;
	height: 100%;
}

.feature_box h1 {
	position: absolute;
	top: 3rem;
	width: 100%;
	text-align: center;
	/* padding-top: 5rem; */
}

.feature_bottom {
	position: absolute;
	bottom: 0;
	z-index: 2;
	width: 100%;
	text-align: center;


}

.feature_bottom p {
	font-size: 1.5rem;
	color: #BBBBBB;
	line-height: 2.75rem;
}

.feature_box h1,
.feature_box p {
	opacity: 0;
	transform: translateY(20px);
}

.feature_bottom p:nth-child(1) {
	display: block;
	/* 	padding-bottom: 1.5rem; */
}


/* feature_box */

/* index_bottom */
.index_bottom {
	padding-top: 4rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

.index_bottom-item {
	width: 32%;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
	overflow: hidden;

}

/* .index_bottom-item:hover img {

	transform: scale(1.5);
} */

/* 激活状态：完全显示且位移回正常 */
.index_bottom-item.visible {
	opacity: 1;
	transform: translateY(0);
}

.index_bottom-item-img {
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1rem;
	object-fit: contain;
}

/* .index_bottom-item:nth-child(1) .index_bottom-item-img {
	height: 22.9375rem;
}

.index_bottom-item:nth-child(2) .index_bottom-item-img {
	height: 30.5rem;
}

.index_bottom-item:nth-child(3) .index_bottom-item-img {
	height: 38.25rem;
} */

.index_bottom-item span {
	font-size: 1.75rem;
	color: #fff;
	display: block;
	margin: 1.875rem 0;
}

.index_bottom-item p {
	color: #CACACA;
	font-size: 1.125rem;
	line-height: 1.875rem;
}

/* index_bottom */

/* bottom-info */

.bottom-info {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-between;
}

.bottom-info-left,
.bottom-info-right,
.bottom-info-right>div {
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease;
}

/* 激活状态 */
.bottom-info-left.visible,
.bottom-info-right.visible,
.bottom-info-right>div.visible {
	opacity: 1;
	transform: translateY(0);
}

.botton-info-left {
	width: 25%;
}

.botton-info-left img {
	width: 12.375rem;
	height: 3.625rem;
}

.botton-info-left p {
	font-size: 1.125rem;
	color: #DDDDDD;
	line-height: 1.875rem;
	margin: 1.875rem 0;
}

.touch-btn {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 15rem;
	padding: 0 1.875rem;
	height: 3.75rem;
	line-height: 3.75rem;
	border: 0.125rem solid #fff;
	border-radius: 4rem;
	color: #fff;

}

.touch-btn img {
	width: 0.625rem;
	height: 0.625rem;
}

.bottom-info-right {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 64%;
}

.bottom-info-right>div>span {
	font-size: 1.25rem;
	color: #fff;
}

.bottom-info-right ul {
	list-style-type: none;
	/* 移除默认的列表符号 */
	color: #999999;
	font-size: 1rem;
}


.bottom-info-right li:nth-child(1) {
	margin-top: 2.25rem;
}

.bottom-info-right li {
	position: relative;
	margin-bottom: 0.875rem;
	border-bottom: 0.0625rem solid transparent;
	cursor: pointer;
	width: max-content;
}

.bottom-info-right li a{
	text-decoration: none;
		color: #999999;
}

.bottom-info-right li::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 0.0625rem;
	/* 下划线粗细 */
	width: 100%;
	/* 占满整个元素宽度 */
	background: #999999;
	/* 下划线颜色 */
	transform: scaleX(0);
	/* 初始缩放为 0 */
	transform-origin: left;
	/* 从左边开始展开 */
	transition: transform 0.2s ease-out;
}

.bottom-info-right li:hover::after {
	transform: scaleX(1);
}

/* bottom-info */

/* 手机（小于等于480px） */
@media (max-width: 549px) {

	
	.feature_box video{
		transform: translateY(84px);
		 clip-path: inset(0px 0 30px 0); /* 上、右、下、左顺序 */
	}
	
	#blackOffer-info-init .try-btn{
		bottom: 1rem;
		left: 5%;
	}

	.customers h1 {
		font-size: 2rem;
	}

	.top-bar {
		display: none;
		transition: dispaly ease 3s;
	}

	.header-tab {
		display: block;
	}

	.bottom-info-right div {
		margin-top: 20px;
	}

	.index-title {
		height: 41.5rem;
	}

	.approach-box,
	.backoffer_box,
	.customers,
	.feature_bottom,
	.index_bottom,
	.bottom-info {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 1.5rem;
	}
	
	.feature_bottom{
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}

	.title {
		font-size: 2.5rem;
	}

	.index-title-box {
		top: 12rem;
	}

	.approach-title{
		margin-bottom: 1rem;
	}

	.ltitle {
		font-size: 1.2rem;
	/* 	width: 60%; */
	}

	.desc p {
		font-size: 1rem;
		line-height: 1.75rem;
		
	}
	
	.desc {
	
		width: 95%;
		margin: 0 auto;
		/* 	overflow: hidden; */
	
	}
	
	.approach-box .approach-desc{
		width: 95%;
		margin: 0 auto;
	}

	.index-title img {
		top: -2.1875rem;
		height: 100%;
	}

	.blackOffer-tabs {
		display: none;
	}

	.approach-title {
		font-size: 2rem;
		line-height: 3rem;
	}

	.approach-img-box {
		margin-top: 2rem;
		padding-bottom: 2rem;
	}


	.tab-box {
		width: 80%;
	}

	.bottom-info {
		padding-top: 9.625rem;
		margin-bottom: 14.125rem
	}

	.backoffer_box>h1 {
		display: none;
	}

	.blackOffer-title-all {
		display: block;
	}

	.approach-img-box {
		flex-direction: column;
	}

	.customers {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}


	.approach-item {
		width: 100%;
		height: 100%;
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}


	.share-box {
		width: 90%;
		padding: 0 5%;
		margin-top: 2rem;
		flex-direction: column;
	}

	.feature_box {
		background-position-y: 0%;
		min-height: 22rem;
	}

	/* .feature_box h1 {
		margin-top: -4rem;
	} */

	h1 {
		font-size: 1rem;
	}

	p {
		font-size: 0.875rem !important;
		line-height: 1.75rem !important;
	}

	.share-left {
		width: 100%;
		margin-right: 0;
	}

	.bottom-info {
		margin-bottom: 4rem;
		padding-top: 4rem;
		margin-bottom: 2rem;
	}

	.blackOffer-info p {
		width: 100%;
	}

	.share-right {
		width: 100%;
		margin-top: 2rem;
		height: max-content;
	}

	.approach-info {
		padding: 2rem 1rem 0 1rem;
	}

	.customers_box {
		gap: 0.625rem;
		grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
		/* 现代浏览器支持 gap 在 flex 布局中 */
	}

	.customers_box .customers_item {
		margin-bottom: 1rem;
		flex: 1 1 calc(22% - 0.625rem);
		/* 如每行3个，可以调整百分比 */

	}


	.feature_bottom p,
	.customers-desc,
	.share-left p,
	.blackOffer-info p,
	.blackOffer-info ul {
		font-size: 1.125rem;
	}

	.customers-desc {
		margin-bottom: 2rem;
	}

	.customers {
		padding-bottom: 0;
	}


	.bottom-info-right {
		margin-top: 2rem;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: column;
	}



	.backoffer_box {
		background-color: transparent;
		padding: 0;
		padding-top: 2rem;
		text-align: center;
		width: 100%;
	}

	.blackOffer-back {
		position: absolute !important;
		width: 93%;
		height: 10rem;
		bottom: 1rem;
		left: 1rem !important;
		/* 或者直接删除这一行 */
		/* 	bottom: -10rem !important; */
	}

	.blackOffer-info {
		position: relative !important;
		padding: 5%;
		background-color: #2A2A2A;
		transform: translateX(0);
		margin: 0;
		margin-bottom: 2rem;
	}

	.blackOffer-info p {
		margin-top: 0;
	}

	.index_bottom {
		flex-direction: column;
		margin-top: 7rem;

	}

	.index_bottom-item {
		width: 100%;
		margin-bottom: 2rem;
	}

	.botton-info-left {
		width: 100%;
	}
	
	.feature_bottom{
		bottom: -6.875rem;
		background-color: #1A1A1A;
	}


}

@media (min-width: 550px) and (max-width: 829px) {
	.desc {
	
		width: 90%;
		margin: 0 auto;
		/* 	overflow: hidden; */
	
	}
	
	.blackOffer-info{
		display: block !important;
	}
	
	.approach-box .approach-desc{
		width: 90%;
		margin: 0 auto;
	}

	.approach-info>span,
	span,
	h1 {
		font-family: Helvetica, Arial, sans-serif !important;
	}
	
	.feature_box video{
		transform: translateY(56px);
		 clip-path: inset(55px 0 14px 0); /* 上、右、下、左顺序 */
	}
	
	#blackOffer-info-init .try-btn{
		bottom: 1rem;
		left: 5%;
	}


	.approach-box,
	.backoffer_box,
	.customers,
	.feature_bottom,
	.index_bottom,
	.bottom-info {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 1.5rem;
	}

	.index-title {
		height: 53.5rem;
	}

	.index-content-box {}

	p {
		font-size: 0.875rem !important;
		line-height: 1.75rem !important;
	}

	.approach-item:nth-child(3) {
		height: 42rem;
	}



	.customers_box {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 1rem;
		/* 现代浏览器支持 gap 在 flex 布局中
	}

	.customers_box .customers_item {
		margin-bottom: 1rem;
		flex: 1 1 calc(25% - 0.625rem);
		/* 如每行3个，可以调整百分比 */

	}

	.bottom-info-right {
		margin-top: 2rem;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: column;
	}


	.title {
		font-size: 4rem;
	}

	.ltitle {
		font-size: 1.2rem;
	}

	.desc p {
		font-size: 0.875rem;
		line-height: 1.75rem;
	}

	.index-title img {
		top: 0;
	}

	.blackOffer-tabs {
		display: none;
	}

	.approach-title {
		font-size: 2rem;
		line-height: 3rem;
	}

	.approach-img-box {
		margin-top: 2rem;
		padding-bottom: 2rem;
	}

	.bottom-info {
		padding-top: 9.625rem;
		margin-bottom: 14.125rem
	}

	.backoffer_box>h1 {
		display: none;
	}

	.blackOffer-title-all {
		display: block;
	}

	.approach-img-box {
		flex-direction: column;
	}

	.customers {
		margin-top: 2rem;
		padding-bottom: 2rem;
	}


	.approach-img-box {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 1rem;
	}

	.approach-item {
		width: 100%;
		/* 		height: 100%; */
		padding-bottom: 2rem;
		margin-bottom: 2rem;
		gap: 1rem;
	}
	
	.feature_bottom{
		bottom: -2rem;
	}

	.share-box {
		width: 90%;
		padding: 0 5%;
		/* 	margin-top: 7rem; */
		flex-direction: column;
	}

	.feature_box {
		background-position-y: 0%;
		min-height: 24rem;
	}

	/* .feature_box h1 {
		margin-top: -3rem;

	} */

	h1 {
		font-size: 2rem;
	}

	.share-left {
		width: 100%;
		margin-right: 0;
	}

	.bottom-info {
		margin-bottom: 4rem;
	}

	.share-right {
		width: 100%;
		margin-top: 2rem;
		height: max-content;
	}


	.bottom-info-right {
		margin-top: 2rem;
		width: 100%;
	}

	.backoffer_box {
		background-color: transparent;
		padding: 0;
		padding-top: 2rem;
		text-align: center;
		width: 100%;
	}

	.blackOffer-back {
		position: absolute !important;
		width: 93%;
		height: 10rem;
		bottom: 1rem;
		left: 1rem !important;
		/* 或者直接删除这一行 */
		/* 	bottom: -10rem !important; */
	}

	.feature_bottom {}

	.feature_box {
		padding-bottom: 4rem;
	}


	.blackOffer-info {
		position: relative !important;
		padding: 5%;
		background-color: #2A2A2A;
		transform: translateX(0);
		margin: 0;
		margin-bottom: 2rem;
	}

	.blackOffer-info p {
		margin-top: 0;
		width: 100%;
	}

	.index_bottom {
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 4rem;

	}

	.botton-info-left {
		width: 100%;
	}

	.index_bottom-item {
		width: 49%;
		margin-bottom: 2rem;
	}


}

/* 小平板与手机之间（481px ~ 768px） */
@media (max-width: 900px) {
	.approach-item:nth-child(3) {
		height: 42rem;
	}
}

/* 小平板与手机之间（481px ~ 768px） */
@media (min-width: 830px) and (max-width: 1299px) {
	.desc {
	
		width: 80%;
		margin: 0 auto;
		/* 	overflow: hidden; */
	}
	.approach-box .approach-desc{
		width: 80%;
		margin: 0 auto;
	}

	.botton-info-left {
		width: 100%;
	}
	
	.feature_box video{
		transform: translateY(60px);
		 clip-path: inset(100px 0 15px 0); /* 上、右、下、左顺序 */
	}
	

	/* 	.approach-desc{
		width: 100%;
	} */
	.index-title-desc-box img {
		height: 106%;
	}


	.approach-box,
	.backoffer_box,
	.customers,
	.feature_bottom,
	.index_bottom,
	.bottom-info {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}

	.approach-box {
		padding-top: 14rem;
	}
	.contact {
		margin-right: 2rem;
	}

	.top-bar-right {
		margin-right: 1rem;
		padding-left: 1rem;
	}

	.tab-item {
		margin-right: 2rem;
	}


	.customers_box {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 1rem;
		/* 现代浏览器支持 gap 在 flex 布局中 */
	}

	.customers_box .customers_item {
		margin-bottom: 1rem;
		flex: 1 1 calc(24% - 0.625rem);
		/* 如每行3个，可以调整百分比 */

	}

	.blackOffer-info {
		display: none;
	}

	.bottom-info {
		display: block !important;
		padding-top: 9.625rem;
		margin-bottom: 14.125rem
	}

	.approach-img-box {
		flex-direction: column;
	}

	.customers {
		margin-top: 4rem;
		padding-bottom: 6rem;
	}

	.approach-item {
		width: 100%;
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}

	.approach-img-box {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 1rem;
		padding-bottom: 7.5rem;
	}

	.approach-item {
		width: 100%;
		/* 		height: 100%; */
		padding-bottom: 2rem;
		margin-bottom: 2rem;
		gap: 1rem;
	}



	.share-box {
		width: 90%;
		padding: 0 5%;
		margin-top: 7.375rem;
		flex-direction: column;
	}

	.feature_box {
		background-position-y: 0%;
		min-height: 44rem;
	}

/* 	.feature_box h1 {
		padding-top: 1.75rem;
		background-color: #0C0C0C;
	} */


	.blackOffer-back {
		top: 2.8125rem;
	}

	.share-left {
		width: 100%;
		margin-right: 0;
	}

	.bottom-info {
		margin-bottom: 4rem;
	}

	.share-right {
		width: 100%;
		margin-top: 2rem;
	}

	.bottom-info-right {
		margin-top: 2rem;
		width: 100%;
	}

	.index_bottom {
		margin-top: 10rem;
	}
	
	.feature_bottom{
		bottom: -6rem;
		background-color: #1A1A1A;
	}




	.backoffer_box {
		padding-top: 7.5rem;
	}
}

/* 大平板/小电脑（1400px ~ 1024px） */
@media (min-width: 1300px) and (max-width: 1409px) {

	
	.desc {
	
		width: 90%;
		margin: 0 auto;
		/* 	overflow: hidden; */
	
	}
	
	.approach-box .approach-desc{
		width: 90%;
		margin: 0 auto;
	}

	.approach-box,
	.backoffer_box,
	.customers,
	.feature_bottom,
	.index_bottom,
	.bottom-info,
	.top-bar {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}


	.top-bar {
		padding: 1.25rem 5%;
	}

	.tab-box {
		width: 80%;
	}


	.blackOffer-info {
		display: none;
		/* 初始状态为左偏移，并且透明 */
		opacity: 0;
	}

	.bottom-info {
		padding-top: 9.625rem;
		margin-bottom: 14.125rem
	}

	.share-box {
		width: 90%;
		padding: 0 5%;
		margin-top: 7.375rem;
		flex-direction: column;
	}

	.share-left {
		width: 100%;
		margin-right: 0;
	}

	.feature_box h1 {
		margin-top: 2rem;
	}


	.share-right {
		width: 100%;
		margin-top: 2rem;
	}

	.blackOffer-back {
		top: 2.8125rem;
	}

	.index_bottom {
		margin-top: 4rem;
	}

	.customers {
		margin-bottom: 10.125rem;
	}


	.backoffer_box {
		padding-top: 7.5rem;
	}
}



@media (min-width: 1410px) and (max-width: 1929px) {

	.approach-box,
	.backoffer_box,
	.customers,
	.feature_bottom,
	.index_bottom,
	.bottom-info {
		width: 80%;
		padding-left: 10%;
		padding-right: 10%;
	}

	.blackOffer-back {
		top: 2.8125rem;
	}

	.approach-img-box {
		padding-bottom: 7.5rem;
	}

	.approach-box .approach-title {
		width: 50%;
		margin: 0 auto;
		margin-bottom: 2.875rem;

	}

	.approach-item {
		height: 58rem;
	}


	.bottom-info {
		padding-top: 9.625rem;
		margin-bottom: 14.125rem
	}


	.feature_box h1 {
		padding-top: 5rem;
	}

	.share-box {
		width: 80%;
		padding: 0 10%;
		padding-top: 7.375rem;
	}

	.index_bottom {
		margin-top: 4rem;
	}


	.customers {
		padding-bottom: 7.5rem;
	}

	.blackOffer-info {
		display: none;
		/* 初始状态为左偏移，并且透明 */
		opacity: 0;
	}



	.backoffer_box {
		padding-top: 7.5rem;
	}
}

/* 大屏电脑（1025px 及以上） */
@media (min-width: 1930px) and (max-width: 2559px) {

	.approach-box,
	.backoffer_box,
	.customers,
	.feature_bottom,
	.index_bottom,
	.bottom-info {
		width: 80%;
		padding-left: 10%;
		padding-right: 10%;
	}

	.backoffer_box {
		width: calc(100% - 20%);
	}

	.approach-box .approach-title {
		width: 42%;
		margin: 0 auto;
		margin-bottom: 2.875rem;
	}

	.blackOffer-tabs {
		width: 100%;
		/* 	padding:0 10% ; */
		margin-top: 4rem;
	}

	.blackOffer-info {
		width: 80%;
		margin: 0 10%;
		margin-top: 4.875rem;
	}

	.bottom-info {
		padding-top: 9.625rem;
		margin-bottom: 14.125rem
	}

	.share-box {
		width: 80%;
		padding: 7.35rem 10%;
	}

	.index_bottom {
		margin-top: 4rem;
	}

	.blackOffer-back {
		top: 2.8125rem;
	}


	.blackOffer-info {
		display: none;
		/* 初始状态为左偏移，并且透明 */
		opacity: 0;
	}
	
	.feature_box h1 {
		padding-top: 8rem;
	}

	.customers {
		margin-bottom: 10.125rem;
	}



	.backoffer_box {
		padding-top: 7.5rem;
	}

	.top-bar-box {
		width: 80%;
		margin: 0 10%;
	}
}



/* 超大屏：2560px 及以上 */
@media (min-width: 2560px) {
	.feature_box>video{
		transform: translateY(90px);
		 clip-path: inset(140px 0 40px 0); /* 上、右、下、左顺序 */
	}
	
	
	.desc {
	
		width: 61.625rem;
		margin: 0 auto;
		/* 	overflow: hidden; */
	
	}
	
	.approach-box .approach-desc{
		width: 61.625rem;
		margin: 0 auto;
	}
	

	.approach-box,
	.backoffer_box,
	.customers,
	.feature_bottom,
	.index_bottom,
	.bottom-info {
		width: 1280px;
		margin: 0 auto;
	}

	.backoffer_box {
		width: calc(100% - 20%);


	}

	.blackOffer-back {
		top: 2.8125rem;
	}

	.blackOffer-tabs {
		width: 1280px;
		margin: 0 auto;
		margin-top: 4rem;
	}

	.blackOffer-info {
		width: 1280px;
		margin: 0 auto;
		margin-top: 4.875rem;
	}


	.logo {
		width: max-content;
	}

	/* .top-bar {
		width: 54%;
		padding: 1.25rem 23%;
	} */

	.tab-box {
		width: 80%;
	}


	.index-title {
		height: 100rem;
	}

/* 	.index-title-desc-box {
		height: 53rem;
	} */

	.index-title img {
		top: -12rem;
	}

	.bottom-info {
		padding-top: 9.625rem;
		margin-bottom: 14.125rem
	}

	.blackOffer-info {
		display: none;
		/* 初始状态为左偏移，并且透明 */
		opacity: 0;
	}

	.share-box {
		width: 1280px;
		margin: 0 auto;
		padding-top: 7.375rem;
	}

	.feature_bottom {
		width: 100%;
		margin: 0 auto;

	}

	.feature_box {
		/* 	width: 100%; */
		width: 1280px;
		margin: 0 auto;
	}

	.feature_box h1 {
		padding-top: 4rem;
	}

	.index_bottom {
		margin-top: 4rem;
	}

	.approach-box .approach-title {
		width: 60%;
		margin: 0 auto;
		margin-bottom: 2.875rem;
	}

	.customers {
		/* margin-bottom: 10.125rem; */
		/* padding-bottom: 0 !important; */
		padding-top: 7rem;
	}



	.backoffer_box {
		padding-top: 7.5rem;
	}
}