p {
	font-size: 1.25rem;
	line-height: 1.875rem;
	font-weight: 400;
	color: #474747;
}

.advertiser_content {
	width: 100% !important;
	overflow-x: hidden !important;
}

.advertiser_box {
	width: calc(100vw - 10px);
	background-color: #fff;
}

.directness_box,
.directness_box_than,
.business {
	opacity: 0;
	transform: translateY(20px);
}

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

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

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


/* banner video */
.advertiser_banner {
	width: 100%;
	position: relative;
}

.advertiser_banner video {
	width: 100%;
}

.banner_title {
	position: absolute;
	width: 100%;
	left: 0;
	top: 40%;
	z-index: 3;
}

.banner_title h1,
.banner_title p {
	width: 1280px;
	margin: 0 auto;
}

.banner_title p {
	/* font-size: 1.5rem; */
	width: 40rem;
	padding-right: 40rem;
	color: rgba(255, 255, 255, 0.64);
	/* 	font-weight: 300; */

}

.banner_title h1 {
	color: #fff;
}

/* banner video */

h1 {
	display: block;
	font-size: 3rem;
	padding-bottom: 1.375rem;
}

.logo {
	text-align: left;
}



/* directness_box */
.directness_box {
	width: 1280px;
	margin: 0 auto !important;
	margin-top: 8.375rem !important;
	padding-bottom: 2.25rem;
	/* text-align: center; */
	/* background: url("../img/advertising/directness_back.png") no-repeat center; */
	background-position: bottom;

}


/* directness_box */

/* directness_box_than */
.directness_box_than {
	width: 80%;
	margin: 0 10%;
	position: relative;
	overflow: hidden;
}

.directness_box_than img {
	width: 100%;
}

.directness_box_than_animal {
	position: absolute;
	top: 0;
	height: 100%;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
}

.directness_box_than_animal>div {
	width: 50%;
	height: 50%;
	display: flex;
	align-items: center;
	justify-content: center;

}

.circle,
.circle-container {
	margin-top: 30%;
}

/* 大圆容器 */
.circle-container {
	position: relative;
	width: 50%;
	height: 88%;
	border-radius: 50%;
	border-radius: 50%;
	/* 制成圆形 */

	/* 用渐变背景营造立体感 */
	/* 	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3)); */

	/* 添加阴影，增强立体效果 */
	/* 	transform: perspective(600px) rotateX(0deg) rotateY(0deg);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), inset 0 4px 8px rgba(0, 0, 0, 0.1);
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), inset 0 6px 12px rgba(255, 255, 255, 0.5);
	transform: perspective(600px) rotateX(0deg) rotateY(0deg); */

	/* 使用透视和旋转轻微倾斜，营造3D效果 */
	/*  transform: perspective(600px) rotateX(10deg) rotateY(-10deg); */

}

/* 中间的小圆 */
.small-circle {
	position: absolute;
	width: 3.75rem;
	height: 3.75rem;
	border-radius: 50%;
	background: #158790;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

/* 文字节点样式 */
.point {
	position: absolute;
	padding: 0.5rem 1rem;
	color: #fff;
	font-size: 0.875rem;
	border-radius: 8px;
	background: #158790;
	z-index: 10;
}

/* 节点位置 */
.point1 {

	top: 40%;
	left: -10%;
}

.point2 {
	top: 40%;
	right: -10%;
}

/* 虚线圆路径 */
.dashed-circle {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 2px dashed #158790;
	animation: rotateCircle 8s linear infinite;
}

/* 箭头样式 */
.arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 8px solid #158790;
	/* 默认箭头颜色 */
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

/* 箭头位置 */
.arrow1 {
	top: 10%;
	right: 22%;
	transform: rotate(45deg);
}

.arrow2 {
	bottom: 10%;
	left: 16%;
	transform: rotate(225deg);

}

/* 箭头高亮效果 */
.arrow.active {
	border-left-color: #00bcd4;
	/* 绿色箭头 */
}



/* 半圆容器 */
.half-circle-container {
	position: relative;
	width: 100%;
	height: 50%;
	/* 高度是宽度的一半，形成半圆 */
	/*     overflow: hidden; /* 隐藏多余部分 */
	*/
}

/* 半圆样式 */
.half-circle {
	position: absolute;
	width: 100%;
	height: 200%;
	border: 4px dashed #57BAC9;
	/* 158790 */
	/* 虚线样式 */
	border-radius: 50%;
	top: 0;
	left: 0;
	clip-path: inset(0 0 64% 0);
	/* 裁剪成半圆 */

}

.half-circle::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 100%;
	height: 100%;
	/* border: 2px dashed #158790; */
	/* 新颜色 */
	border-radius: inherit;
	/* 初始状态全部隐藏（右侧裁剪100%） */
	clip-path: inset(0 100% 0 0);
	animation: wipeEffect 2s ease infinite;
}



/* 动画：从 clip-path: inset(0,100%,0,0) 到 inset(0,0,0,0) */
@keyframes wipeEffect {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

.half-circle-container .half-circle {
	animation: revealHalf 3s ease infinite;
}

/* 动画定义：从初始状态到最终状态 */
@keyframes revealHalf {
	0% {
		/* 初始状态：遮盖掉右侧，只有左边缘显示 */
		border-color: #57BAC9;
	}

	50% {
		border-color: #158790;
	}

	100% {
		border-color: #57BAC9;
	}

}

.half-circle-container2 .half-circle {
	border-color: #158790;
}

.half-circle-container2 .half-circle {
	animation: revealHalf2 3s ease infinite;
}

@keyframes revealHalf2 {
	0% {
		/* 初始状态：遮盖掉右侧，只有左边缘显示 */
		border-color: #158790;
	}

	50% {
		border-color: #57BAC9;
	}

	100% {
		border-color: #158790;
	}

}

/* 箭头样式 */
.arrow {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 10px solid #57BAC9;
	/* 默认箭头颜色 */
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	z-index: 10;

}

.half-circle-container .arrow {
	animation: arrowColor 3s ease infinite;
}

.half-circle-container2 .arrow {
	border--left-color: #158790;
	animation: arrowColor2 3s ease infinite;
}

@keyframes arrowColor {
	0% {
		/* 初始状态：遮盖掉右侧，只有左边缘显示 */
		border-left-color: #57BAC9;
	}

	50% {
		/* 最终状态：全部显示，颜色渐变为 #57BAC9 */
		border-left-color: #158790;
	}

	100% {
		/* 最终状态：全部显示，颜色渐变为 #57BAC9 */
		border-left-color: #57BAC9;
	}



}

@keyframes arrowColor2 {
	0% {
		/* 初始状态：遮盖掉右侧，只有左边缘显示 */
		border-left-color: #158790;
	}

	50% {
		/* 最终状态：全部显示，颜色渐变为 #57BAC9 */
		border-left-color: #57BAC9;
	}

	100% {
		/* 最终状态：全部显示，颜色渐变为 #57BAC9 */
		border-left-color: #158790;
	}


}



/* 起点箭头 */
.arrow-start {
	left: -12px;
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
}

/* 终点箭头 */
.arrow-end {
	right: -3px;
	bottom: 19%;
	transform: rotate(92deg);
}

.half-circle-container2 {
	width: 98%;
	transform: rotate(180deg) translateX(-11px);

}

.half-circle-container2 .half-circle {
	clip-path: inset(0 0 54% 0);
	border-color: #58BAC7;
	/* 裁剪成半圆 */
}

.half-circle-container2 .arrow-end {
	right: -10px;
	bottom: -2%;
}


/* 箭头高亮样式 */
.arrow.active {
	border-left-color: #00bcd4;
	/* 绿色箭头 */
}

/* 动画：箭头按顺序变色 */
@keyframes rotateCircle {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}


.directness_box_than_bottom {
	display: flex;
	margin-top: 1.875rem;
}


.directness_box_than_bottom span {
	font-size: 1.5625rem;
	font-weight: bold;
	color: #1A1A1A;
	display: block;
	width: 50%;
	text-align: center;
}

/* directness_box_than */


/* footer */
.advertiser_footer {
	width: 100%;
	background-color: #1a1a1a;
	object-fit: contain;
}



.footer {
	border: none !important;
}

/* footer */

.circle {
	position: relative;
	width: 50%;
	height: 88%;
	/* 	border: 2px dashed #aaa; */
	border-radius: 50%;
	position: relative;

}

.point {
	position: absolute;
	padding: 0.625rem 1.25rem;
	background: #666;
	color: white;
	border-radius: 0.5rem;
}

.lCircle {
	position: absolute;
	width: 6.25rem;
	height: 6.25rem;
	border-radius: 50%;
	left: calc(50% - 50px);
	background-color: #777B7B;
	top: calc(50% - 50px);
	z-index: 9;
}


#audiences {
	top: 20%;
	left: -18px;
}

#advertisers {
	top: 20%;
	right: -20px;
}

#influencers {
	bottom: -3%;
	left: 34%;
}

.arrow2 {
	position: absolute;
	width: 4.625rem;
	height: 4px;
	background: #00bcd4;
	transform-origin: left;
	opacity: 0.5;
	animation: moveArrow 2s linear;
}

.arrow2::after {
	content: '';
	position: absolute;
	right: -10px;
	top: -4px;
	border: 6px solid transparent;
	border-left-color: #00bcd4;
}

.arrow.active {
	background: #00bcd4;
	animation: moveArrow 1s linear;
}

@keyframes moveArrow {
	from {
		width: 0;
	}

	to {
		width: 74px;
	}
}

.half-circle-container-top .half-circle {
	clip-path: inset(0 0 83% 0);
}

.half-circle-container-top .arrow-end {
	right: 2.5625rem;
	bottom: 59%;
	transform: rotate(68deg);
}

/* 三段圆弧的位置 */
.segment-1 {
	transform: rotate(-22deg);
	animation: colorCycle 2s ease infinite;
}

.segment-2 {
	transform: rotate(91deg);
	animation: colorCycle 2s ease infinite;
	animation-delay: 0.66s;
	/* 2秒/3 ≈ 0.66s */
	clip-path: inset(0 0 81% 0);
}

.segment-3 {
	transform: rotate(205deg);
	animation: colorCycle 2s ease infinite;
	animation-delay: 1.33s;
}

@keyframes colorCycle {
	0% {
		border-left-color: #aaa;
	}

	50% {
		border-left-color: #158790;
	}

	100% {
		border-left-color: #aaa;
	}
}

/* 圆圈的三段虚线 */
.circle-segment {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 4px dashed #aaa;
	/* 默认灰色虚线 */
	border-radius: 50%;
	clip-path: inset(0 85% 0 0);
	/* 裁剪为半圆 */
	transform-origin: center;
}

@keyframes segmentColor {
	0% {
		/* 初始状态：遮盖掉右侧，只有左边缘显示 */
		border-left-color: #aaa;
	}

	33% {
		/* 最终状态：全部显示，颜色渐变为 #57BAC9 */
		border-left-color: #158790;
	}

	100% {
		border-left-color: #aaa;
	}


}

@keyframes segmentColor2 {
	0% {}

	,
	30% {
		/* 初始状态：遮盖掉右侧，只有左边缘显示 */
		border-left-color: #aaa;
	}

	64% {
		/* 最终状态：全部显示，颜色渐变为 #57BAC9 */
		border-left-color: #158790;
	}

	63% {
		border-left-color: #aaa;
	}


}

@keyframes segmentColor3 {
	60% {
		/* 初始状态：遮盖掉右侧，只有左边缘显示 */
		border-left-color: #aaa;
	}

	99% {
		/* 最终状态：全部显示，颜色渐变为 #57BAC9 */
		border-left-color: #158790;
	}

	100% {
		border-left-color: #aaa;
	}


}


/* 箭头样式 */
.arrow1 {
	position: absolute;
	width: 0;
	height: 0;
	border-left: 12px solid #aaa;
	/* 默认灰色箭头 */
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	transition: border-left-color 0.5s ease;
}

/* 箭头的位置：弧线的右端 */
.arrow-1 {
	top: 16%;
	right: 9%;
	transform: rotate(47deg);
	animation: colorCycle 2s ease infinite;
	animation-delay: 0.66s;
	/* 2秒/3 ≈ 0.66s */

}

.arrow-2 {
	top: 96%;
	left: 63%;
	transform: rotate(182deg);
	animation: colorCycle 2s ease infinite;
	animation-delay: 1.33s;
}

.arrow-3 {
	top: 29%;
	left: 2%;
	transform: rotate(174deg);
	animation: colorCycle 2s ease infinite;
}

/* 内外层旋转的立体圆圈 */
.orbit {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 1px solid #00bcd4;
	animation: rotateY 5s linear infinite;
}

.orbit-2 {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 1px solid #4CAF50;
	animation: rotateX 7s linear infinite;
}

/* 3D 旋转动画 */
@keyframes rotateY {
	from {
		transform: rotateY(0deg) rotateX(0deg);
	}

	to {
		transform: rotateY(360deg) rotateX(20deg);
	}
}

@keyframes rotateX {
	from {
		transform: rotateX(0deg) rotateY(40deg);
	}

	to {
		transform: rotateX(360deg) rotateY(40deg);
	}
}

/* .advertiser_intro */
.advertiser_intro {
	width: 80%;
	padding: 0 10%;
	padding-top: 6.25rem;
	margin-top: 5rem;
	padding-bottom: 11.25rem;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: #F6F6F6;
}

.advertiser_intro_item {
	position: relative;
	width: calc(50% - 15px);
	height: 34.375rem;
	border: 1px solid #C4C4C4;
	border-radius: 10px;
	display: none;
}

.advertiser_intro_item:hover .advertiser_intro_item_img img {
	transform: scale(1.5);
}

.advertiser_intro_item_img {
	position: relative;
	width: 100%;
	/* height: 17.3125rem; */
	overflow: hidden;
	border-radius: 10px;
}

.advertiser_intro_item_img img {
	transition: transform 0.5s ease;
	width: 100%;
	/* 	height: 100%; */
	object-fit: cover;
}

.advertiser_intro_item_img h2 {
	font-size: 2.625rem;
	color: #fff;
	position: absolute;
	z-index: 6;
	bottom: 1.875rem;
	left: 2.5rem;
}

.advertiser_intro_item p {
	padding: 2.375rem;
}

.right-icon {
	position: absolute;
	right: 2.375rem;
	bottom: 2.375rem;
	width: 2rem;
	height: 1rem;
}

/* .advertiser_intro */

.business {
	display: flex;
	flex-direction: column;
	width: 80%;
	margin: 0 auto;
	padding-top: 6.875rem;
}

.business>span {
	font-size: 3.75rem;
	font-weight: bold;
	color: #fff;
}

.business>span:nth-child(2) {
	color: #5F5F5F;
}

.business_box {
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 5rem;
	margin-bottom: 5.1875rem;
}

.business_item {
	display: flex;
	flex-direction: column;
	color: #fff;
	font-size: 3.375rem;
	margin-bottom: 2rem;
}

.business_item span:nth-child(2) {
	font-size: 1.5rem;
}

/* @media (max-width: 400px) {
	
	.directness_box_than_animal>div {
		width: 60%;
		transform: scale(0.4);
		transform-origin: center center;
	}
	
	.advertiser_intro{
		
	}
	.advertiser_intro_item{
		width: 100%;
		
	}
	
	
	.advertiser_intro_item:nth-child(1){
		margin-bottom: 2rem;
	}
} */


/* 手机（小于等于549px） */
@media (max-width: 699px) {
	.banner_title h1 {
		width: 90%;
	}

	.business {
		padding-top: 3rem;
	}

	.circle-container,
	.circle {
		display: none;
	}

	h1 {
		font-size: 2rem;
		padding-bottom: 0.5rem;
	}

	.trapezoid,
	.trapezoid2 {
		top: 0 !important;
		height: calc(100% - 4rem) !important;
	}


	.advertiser_intro_item {
		width: 100%;
		height: 27rem;

	}

	.advertiser_intro_item:nth-child(1) {
		margin-bottom: 2rem;
	}

	p {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.advertiser_intro {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}

	.banner_title p {
		width: 90%;
		padding-right: 0;
	}

	.directness_box_than {
		width: 90%;
		margin: 0 5%;
	}

	.directness_box {
		width: 90%;
		margin-top: 4rem;
	}

	.directness_box_than_animal>div {
		width: 60%;
		/* transform: scale(0.7); */
		transform-origin: center center;
	}

	.circle-container {
		height: 85%;
		width: 55%;
	}

	.advertiser_intro {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}

	.business {
		width: 90%;

	}

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

	.business span {
		font-size: 2rem;
	}

	.point {
		padding: 0.2rem;
		font-size: 0.75rem;
	}

	.lCircle {
		width: 2rem;
		height: 2rem;
		left: calc(50% - 1rem);
		top: calc(50% - 1rem);
	}

	.small-circle {
		width: 2rem;
		height: 2rem;

	}


	.footer {
		padding-top: 0;
	}

	.footer_left>span {
		font-size: 0.6rem;
	}

	.footer_left {
		width: 100% !important;
	}

	.footer_right {
		width: 100% !important;
		margin-top: 1rem;
	}
}

/* @media (min-width: 550px) and (max-width: 829px) {} */

/* 小平板与手机之间（830px ~ 1299px） */
@media (min-width: 700px) and (max-width: 1289px) {

	/* 	.banner_title{
		bottom: 40%;
	} */

	.circle,
	.circle-containe {
		margin-top: 20%;
	}


	#influencers {
		bottom: -6%;
		left: 36%;
	}

	.advertiser_intro_item {

		height: 40rem;
	}

	.circle-segment {
		clip-path: inset(0 82% 0 0) !important;
	}

	.footer_left {
		width: 100% !important;
	}

	.footer_right {
		width: 100% !important;
		margin-top: 1rem;
	}

	.banner_title h1 {
		width: 90%;
	}

	.circle-container {
		height: 85%;
	}

	.circle {
		height: 82%;
	}

	.arrow-end {
		right: -1%;
	}

	.banner_title p {
		width: 90%;
		padding-right: 0;
	}

	.directness_box_than {
		width: 90%;
		margin: 0 5%;
	}

	.directness_box {
		width: 90%;
	}

	.point {
		padding: 0.625rem;
		font-size: 0.75rem;
	}

	.lCircle {
		width: 2rem;
		height: 2rem;
		left: calc(50% - 1rem);
		top: calc(50% - 1rem);
		z-index: 20;
	}

	.small-circle {
		width: 2rem;
		height: 2rem;

	}

	.directness_box_than_animal>div {
		/* transform: scale(0.8); */
		transform-origin: center center;
	}



	.advertiser_intro {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}

	.business {
		width: 90%;
	}

}

@media(max-width:1500px) {
	.arrow-2 {
		top: 94%;
		left: 71%;
		transform: rotate(160deg);
	}

	.arrow-3 {
		top: 33%;
		left: 0%;
	}

	.arrow-1 {
		top: 15%;
		right: 9%;
	}
}

/* 大平板/小电脑（1300px ~ 1409px） */
@media (min-width: 1290px) and (max-width: 1409px) {
	.business {
		width: 90%;
	}

	.advertiser_intro {
		width: 90%;
		padding-left: 5%;
		padding-right: 5%;
	}

	.directness_box_than {
		width: 90%;
		margin: 0 5%;
	}
}



/* 2560px */
@media (min-width: 2300px) {
	.directness_box {
		width: 1280px;
	}

	.directness_box_than {
		width: 1280px;
		margin: 0 auto;
	}

	.advertiser_intro {
		width: 1280px;
		padding-left: calc(50% - 640px);
		padding-right: calc(50% - 640px);

	}

	.business {
		width: 1280px;
	}
	
	.advertiser_intro_item{
		height: 35rem;
	}
}

.trapezoid {
	display: none;
	position: absolute;
	width: 58%;
	height: calc(100% - 8rem);
	clip-path: polygon(0% 0%, 100% 0%, 86% 100%, 0% 100%);
	transition: all 0.3s ease;

}

.trapezoid video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.directness_box_than_animal>div:nth-child(1):hover .trapezoid {
	display: block;
}

.trapezoid2 {
	display: none;
	position: absolute;
	right: 0;
	top: 4rem;
	width: 58%;
	height: calc(100% - 8rem);
	clip-path: polygon(18% 0%, 102% 0%, 102% 100%, 4% 100%);
	transition: all 0.3s ease;
}

.directness_box_than_animal>div:nth-child(2):hover .trapezoid2 {
	display: block;
}

.video_shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}


/* 基本样式 */
.curve {
	fill: none;
	/* 无填充 */
	stroke-width: 3;
	/* 线宽 */
	stroke-dasharray: 8, 8;
	/* 虚线：8像素实线 + 8像素间隔 */
	animation: dashAnimation 2s linear infinite;
	/* 虚线动画 */
}

/* 第一段曲线 */
.curve-1 {
	stroke: #aaa;
	/* 初始颜色 */
	animation-delay: 0s;
	/* 立即执行 */
}

/* 第二段曲线 */
.curve-2 {
	stroke: #aaa;
	/* 初始颜色 */
	animation-delay: 0.5s;
	/* 延迟1秒执行 */
}

/* 第三段曲线 */
.curve-3 {
	stroke: #aaa;
	/* 初始颜色 */
	animation-delay: 1s;
	/* 延迟2秒执行 */
}

/* 虚线动画 */


/* 动态改变箭头颜色 */
.curve-1,
.curve-2,
.curve-3 {
	transition: stroke 0.5s ease;
}

/* 动画：虚线移动和颜色变化 */
@keyframes dashAnimation {
	0% {
		stroke: #aaa;
		/* 初始灰色 */
		/* 	stroke-dashoffset: 0; */
		/* 初始偏移为0 */
	}

	50% {
		stroke: #158790;
		/* 中间变为蓝色 */
	}

	100% {
		stroke: #aaa;
		/* 结束恢复灰色 */
		/* 	stroke-dashoffset: 32; */
		/* 偏移量，控制虚线流动感 */
	}
}


@keyframes arrowAnimation {
	0% {
		fill: #aaa;
		/* 初始灰色 */
		/* 	stroke-dashoffset: 0; */
		/* 初始偏移为0 */
	}

	50% {
		fill: #158790;
		/* 中间变为蓝色 */
	}

	100% {
		fill: #aaa;
		/* 结束恢复灰色 */
		/* 	stroke-dashoffset: 32; */
		/* 偏移量，控制虚线流动感 */
	}
}

/* 同步箭头颜色变化 */
#arrowMarker polygon {
	animation: arrowAnimation 2s linear infinite;
	/* 箭头颜色动画 */
}

/* 使路径和箭头的颜色同步 */
.curve-1:hover,
.curve-2:hover,
.curve-3:hover {
	stroke: #00bcd4;
	/* 鼠标悬停时，曲线变为蓝色 */
}

.curve-1:hover+#arrowMarker polygon,
.curve-2:hover+#arrowMarker polygon,
.curve-3:hover+#arrowMarker polygon {
	fill: #00bcd4;
	/* 同时改变箭头颜色 */
}

/* 曲线箭头的基础样式 */
.curve-arrow {
	position: absolute;
	overflow: visible;
}

/* 曲线路径样式 */
.curve-arrow path {
	fill: none;
	/* 透明背景 */
	stroke: #aaa;
	/* 箭头和线的颜色 */
	stroke-width: 2;
	/* 线条粗细 */
	stroke-dasharray: 6, 6;
	/* 虚线样式，前面是线段长度，后面是间隔 */
	marker-end: url(#arrow-marker-small);
	/* 使用小箭头 */
	animation: curveMove 3s linear infinite;
	/* 添加动画效果 */
}

/* 每个箭头的定位 */
.curve-arrow-1 {
	top: 16%;
	left: -22%;
	transform: rotate(40deg);
}

.curve-arrow-2 {
	top: -18%;
	left: 17%;
	transform: rotate(316deg);
}

.curve-arrow-3 {
	top: 38%;
	left: -6%;
	transform: rotate(-193deg);
}

.curve-arrow-4 {
	top: 37%;
	left: -7%;
	transform: rotate(16deg);
}

.curve-arrow-5 {
	top: 16%;
	left: 49%;
	transform: rotate(140deg);
}

.curve-arrow-6 {
	top: -19%;
	left: -3%;
	transform: rotate(344deg);
}

.curve-arrow {
	display: none;
}
.swiper-show-box{
	width: 90%;
    margin: 0 auto !important;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}
.swiper-show-box>div{
	width: calc((100% - 40px) / 3);
	border-radius: 10px;
	overflow: hidden;
}
.swiper-show-box>div>img{
	width: 100%;
	height: 100%;
}
.we-can{
	margin-top: 140px;
}
.we-can>h1{
	text-align: center;
}
.bubble-container{
	width: 100vw;
	margin-top: 50px;
	position: relative;
	overflow: hidden;
	display: flex;
}
.bg-img{
	width: 100%;
	height: 100%;
}
.what-else-box{
	margin: 100px auto;
}
.what-else-box-title{
	text-align: center;
}


.process-box{
	display: flex;
	align-items: center;
	justify-content: center;
}
.process-box>div{
	display: flex;
	align-items: center;
}
.process-box>div>div>div:last-child{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%,290%);
	font-size: 14px;
}
.process-box>div:first-child>div>div:last-child{
	transform: translate(-50%,200%);
}
.process-box>div>div:first-child{
	width: 40px;
	height: 40px;
	border-radius: 40px;
	border: 1px solid #bfbfbf;
	display: flex;
	justify-content: center;
	position: relative;
	align-items: center;
}
.process-box>div:first-child>div:first-child{
	width: 70px;
	height: 70px;
	border-radius: 70px;
	border: 2px solid #000000;
	display: flex;
}
.process-box>div:not(:first-child)>div:first-child>div:first-child{
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background-color: #bfbfbf;
}
.process-box>div{
	display: flex;
	align-items: center;
}
.process-box>div:not(:last-child)>div:last-child{
	width: 10vw;
	border-bottom: 1px solid #bfbfbf;
	margin: 0 10px;
}
.process-box1{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.process-box1>div{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.process-box1>div>div:last-child{
	height: 10vw;
	border-left: 1px solid #bfbfbf;
	margin: 3px 0;
}
.process-box1>div:first-child>div:first-child{
	width: 40px;
	height: 40px;
	border-radius: 40px;
	border: 2px solid #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.process-box1>div:first-child>div:first-child>img{
	width: 80%;
	height: 80%;
}
.process-box1>div:not(:first-child)>div:first-child{
	width: 40px;
	height: 40px;
	border-radius: 40px;
	border: 1px solid #bfbfbf;
	display: flex;
	justify-content: center;
	position: relative;
	align-items: center;
}
.process-box1>div:not(:first-child)>div:first-child>div:first-child{
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background-color: #bfbfbf;
}
.process-box1>div>div>div:last-child{
	position: absolute;
	bottom: 50%;
	left: 150%;
	transform: translate(0,50%);
	font-size: 14px;
}


.text-andimg-box{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 100px;
}
.text-left-box>.title{
	font-weight: bold;
	margin-bottom: 16px;
}
.text-left-box>h2{
	margin-bottom: 12px;
}
.text-left-box>.text{
	line-height: 28px;
	color: #6b6b6b;
}
.text-left-box>.btn{
	display: inline-block;
	padding: 10px 30px;
	border-radius: 1000px;
	border: 2px solid #000000;
	font-weight: bold;
	margin-top: 20px;
}
.text-left-box{
	width: 45%;
	padding-right: 20px;
	box-sizing: border-box;
}
.text-right-box{
	width: 55%;
}
.text-right-box>img{
	width: 100%;
}

.text-andimg-box1{
	width: 100%;
	margin-top: 20px;
}
.text-left-box1{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.text-left-box1>.title{
	font-weight: bold;
	margin-bottom: 16px;
	text-align: center;
}
.text-left-box1>h2{
	margin-bottom: 12px;
	font-size: 20px;
	text-align: center;
}
.text-left-box1>.text{
	line-height: 28px;
	color: #6b6b6b;
}
.text-left-box1>.btn{
	display: inline-block;
	padding: 10px 30px;
	border-radius: 1000px;
	border: 2px solid #000000;
	font-weight: bold;
	margin: 20px auto;
}
.text-right-box1{
	width: 100%;
}
.text-right-box1>img{
	width: 100%;
}

/* 弹出层 */
.modal-overlay{
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}
.modal-content{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
}
.modal-content>.content{
	height: 70vh;
	width: 80vw;
	background-color: white;
	border-radius: 20px;
	padding: 36px;
    box-sizing: border-box;
	display: flex;
	gap: 7%;
}
.modal-content>.content1{
	width: 70vw;
	height: 40vh;
	display: flex;
	padding: 16px;
	background-color: white;
	border-radius: 20px;
    box-sizing: border-box;
	flex-direction: column;
}
.modal-content>.content>img{
	border-radius: 10px;
	width: 37%;
	height: 27vw;
	object-fit: cover;
}
.modal-content>.content1 .content-left{
	border-radius: 10px;
	width: 100%;
	height: 40vw;
	object-fit: cover;
	margin-bottom: 10px;
}
.content-right{
 flex: 1;
 height: 100%;
 overflow-y: scroll;
}
.content-one-title{
	font-size: 30px;
	font-weight: bold;
	padding-bottom: 20px;
	border-bottom: 1px solid #c5c5c5;
}
.content-two-title,.content-three-title{
	margin: 20px 0;
	font-size: 20px;
	font-weight: bold;
}
.content-tag{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 0 4px;
}
.tag-cl{
	display: flex;
	align-items: center;
	gap: 10px;
}
.tag-cl>div:first-child{
	width: 10px;
	height: 10px;
	background-color: black;
	transform: rotate(45deg);
	flex-shrink: 0;
}
.content-text{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.three-text-item{
	display: flex;
	gap: 10px;
}
.three-text-item>div:first-child{
	width: 4px;
	height: 4px;
	background-color: #bfbfbf;
	flex-shrink: 0;
	margin-top: 11px;
}
.three-text-item>div:last-child{
	line-height: 28px;
}

.swiper-item{
	position: relative;
}
.swiper-item>img{
	object-fit: cover;
}
.swiper-bg-box{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 8%;
	box-sizing: border-box;
	color: white;
	display: none;
}
.swiper-bg-box>.text{
	padding-top: 46%;
	overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 控制显示的行数 */
  text-overflow: ellipsis;
  line-height: 1.5; /* 建议设置行高，计算高度更精准 */
  max-height: calc(1.5em * 4); /* 可选：根据行高和行数计算最大高度 */
}
.swiper-bg-box>.swiper-bg-box-btn{
	position: absolute;
	right: 8%;
	bottom: 8%;
}
/* svg path {
	stroke: #00bcd4;
	stroke-width: 2;
	fill: none;
	marker-end: url(#arrow-marker-small);
} */

/* 箭头流动动画 */
/* @keyframes curveMove {
	0% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: -300;
	}
} */

/* 整个滚动条区域 */
::-webkit-scrollbar {
	width: 10px;          /* 垂直滚动条宽度 */
	height: 10px;         /* 水平滚动条高度 */
	background-color: transparent;
  }
  
  /* 滚动条轨道（背景） */
  ::-webkit-scrollbar-track {
	background: transparent; 
	border-radius: 6px;
  }
  
  /* 滚动条滑块（可拖动部分） */
  ::-webkit-scrollbar-thumb {
	background: #25e6ff; 
	border-radius: 6px;
	border: 2px solid #f1f1f1;
  }
  
  /* 滑块悬停状态 */
  ::-webkit-scrollbar-thumb:hover {
	background: #555; 
  }


  .bubble {
	position: absolute;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	animation: float linear infinite;
	/* box-shadow: 0 5px 15px rgba(0,0,0,0.2); */
	transition: 0.3s;
	overflow: hidden;
	/* overflow: hidden !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: 1 !important; /* 控制显示的行数 */
	text-overflow: ellipsis !important; */
}
.bubble>img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.bubble>div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	color: white;
	font-weight: bold;
}

.bubble:hover {
	transform: scale(1.1);
}

@keyframes float {
	0% {
		bottom: 0;
		transform: translateY(100%) translateX(-100%);
	}
	100% {
		bottom: 100%;
		transform: translateY(-100%) translateX(-100%);
	}
}