@layer utilities {
	.content-auto {
		content-visibility: auto;
	}
	.video-container {
		position: relative;
		overflow: hidden;
		/* border-radius: 1.5rem;
		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); */
	}
	.play-button {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		cursor: pointer;
		transition: all 0.3s ease;
		z-index: 10;
	}

	.play-button:hover {
		transform: translate(-50%, -50%) scale(1.05);
	}
}


/* 平台价值 start */
.value-tab {
	/* background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid #E5E7EB; */
	border-right: 0; /* 移除右侧边框 */
	text-align: center;
	margin: 0;
	backdrop-filter: blur(4px);
	position: relative;
	overflow: hidden;
}

/* 第一个标签 - 只保留左上角圆角 */
.value-tab:first-child {
	border-radius: 0.75rem 0 0 0;
}

/* 第二个标签 - 没有圆角 */
.value-tab:nth-child(2) {
	border-radius: 0;
}

/* 第三个标签 - 只保留左下角圆角 */
.value-tab:last-child {
	border-radius: 0 0 0 0.75rem;
}

.value-tab::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('http://file.langlang.net.cn/guanwang/lljy/aip/tab.png');
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -1;
}

.value-tab:hover::before,
.value-tab.active::before {
	opacity: 1;
}

.value-tab.active {
	/* background-color: white;
	border-color: #165DFF;
	box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1); */
	z-index: 20;
}

.value-tab.active h3 {
	color: #165DFF;
}

.value-tab:hover:not(.active) {
	transform: translateX(4px);
	background-color: rgba(255, 255, 255, 0.9);
	z-index: 15;
}

/* 确保内容区在标签后面 */
.value-content {
	z-index: 10;
}
/* 平台价值 end */

/* 六大核心功能板块标签样式 start */
.feature-tab {
	background-color: white;
	border: 1px solid #E5E7EB;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	flex: 0 0 auto;
	height: 90px;
}

/* 鼠标悬停时仅显示背景图，无背景色变化，文字变为白色 */
.feature-tab:hover {
	background-color: transparent;
	border-color: transparent;
}

.feature-tab:hover h3 {
	color: white !important;
}

.feature-tab:hover .absolute {
	opacity: 0.1;
	width: 100%;
	height: 100%;
}

.feature-tab.active {
	background-color: #165DFF;
	border-color: #165DFF;
}

.feature-tab.active h3 {
	color: white !important; /* 确保激活状态文字为白色 */
}

/* 标签容器样式 */
#tabs-wrapper {
	gap: calc((100% - 540px) / 5);
	overflow-y: auto;
}

/* 确保标签容器整体高度与图片一致 */
#tab-container {
	height: 100%;
}
/* 六大核心功能板块标签样式 end */

/* 教育专家资源板块 start */
/* 调整滚动容器宽度以适应图标和间距 */
@keyframes scrollRight {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-170px * 5));
	}
}

@keyframes scrollLeft {
	0% {
		transform: translateX(calc(-170px * 5));
	}
	100% {
		transform: translateX(0);
	}
}

.animate-scroll-right {
	animation: scrollRight 30s linear infinite;
}

.animate-scroll-left {
	animation: scrollLeft 30s linear infinite;
}

#scroll-right-container:hover .animate-scroll-right,
#scroll-left-container:hover .animate-scroll-left {
	animation-play-state: paused;
}
/* 教育专家资源板块 end */

/* 课题成果板块 start */
@keyframes scrollUp {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-50%); /* 滚动一半距离，确保无缝衔接 */
	}
}

.animate-scroll-up {
	animation: scrollUp 15s linear infinite; /* 统一滚动时间为30秒 */
}
/* 课题成果板块 end */