@charset "UTF-8";
		.clean-tech-section {
			background: linear-gradient(180deg, #f8fafc 0%, #f1f4f9 100%);
			padding: 70px 0 80px 0;
			color: #333333;
			position: relative;
			z-index: 10;
			overflow: hidden;
		}

		/* ==================== 1. 时间轴标题样式 ==================== */
		.timeline-header {
			margin-bottom: 10%;
			text-align: center;
		}
		.timeline-header h2 {
			font-size: 42rem;
			font-weight: 950;
			color: #111111;
			margin: 0 0 6px 0;
			letter-spacing: 1px;
		}
		.timeline-header p {
			font-size: 21rem;
			color: #666666;
			margin: 0;
		}

		/* ==================== 2. PC 端 S 波浪时间轴 ==================== */
		.timeline-wrapper {
			position: relative;
			width: 100%;
			/* max-width: 1580rem; */
		}

		.timeline-svg-canvas {
			width: 100%;
			height: 450rem;
			display: block;
			overflow: visible;
		}

		/* 🌟 前景红线的生长过渡 */
		.timeline-path-seg {
			stroke: #ED0700;
			transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		}

		/* 🌟 前景虚线的渐显过渡 */
		.timeline-dashed-line {
			stroke: #ED0700;
			opacity: 0;
			transition: opacity 0.5s ease;
		}
		.timeline-dashed-line.active {
			opacity: 1;
		}

		/* 🌟 圆点过渡动画 */
		.svg-dot {
			fill: #cbd5e1;
			r: 6px;
			transition: fill 0.5s cubic-bezier(0.4, 0, 0.2, 1), r 0.5s cubic-bezier(0.4, 0, 0.2, 1);
			cursor: pointer;
		}
		.svg-dot.active {
			fill: #ED0700;
		}
		.svg-dot.current {
			r: 9rem;
		}

		/* 🌟 底部文字过渡动画（默认灰色，激活红色） */
		.timeline-text {
			fill: #94a3b8;
			font-size: 16rem;
			font-weight: bold;
			text-anchor: middle;
			transition: fill 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		}
		.timeline-text.active {
			fill: #ED0700;
		}

		.cards-container {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}

		.card-node {
			position: absolute;
			transform: translateX(-50%);
			pointer-events: auto;
			cursor: pointer;
		}

		.card-box {
			background: #ffffff;
			border: 1px solid #e2e8f0;
			border-radius: 10px;
			padding: 10px 12px;
			color: #333333;
			text-align: center;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
			transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.card-img-box {
			width: 163rem;
			height: 163rem;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 6px;
		}

		.card-img-box .card-img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
		}

		.card-text-box {
			width: 100%;
		}

		.card-box .tag {
			font-size: 20rem;
			font-weight: 600;
			color: #111111;
			display: block;
			margin-bottom: 2px;
			transition: color 0.3s ease;
		}

		.card-box .sub {
			font-size: 16rem;
			color: #666666;
			display: block;
			transition: color 0.3s ease;
		}

		.card-node:hover .card-box,
		.card-node.active .card-box {
			color: #ffffff;
			border-color: #ED0700;
			box-shadow: 0 10px 30px rgba(235, 59, 10, 0.25);
			transform: translateY(-6px);
		}

		.card-node:hover .card-box .tag,
		.card-node:hover .card-box .sub,
		.card-node.active .card-box .tag,
		.card-node.active .card-box .sub {
			color: #ED0700;
		}

		.card-node:hover .card-img,
		.card-node.active .card-img {
			transform: scale(1.1);
		}

		.card-node[data-index="1"] {left: 10%;top: 4%;}
		.card-node[data-index="2"] {left: 30%;top: -4%;}
		.card-node[data-index="3"] {left: 50%;top: -10%;}
		.card-node[data-index="4"] {left: 70%;top: -19%;}
		.card-node[data-index="5"] {left: 90%;top: -36%;}

		/* 详情卡片（高度已增高，且允许溢出以适应突出图片） */
		.timeline-detail-card {
			background: #ffffff;
			border: 1px solid #e2e8f0;
			border-radius: 10px;
			padding: 0;
			color: #333333;
			position: relative;
			box-shadow: 0 10px 30px rgba(0,0,0,0.06);
			margin-bottom: 50px;
			height: 175px; 
			overflow: visible; 
		}

		.detail-item {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
			visibility: hidden;
			transform: translateY(12px);
			transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
			display: flex;
			align-items: stretch;
			justify-content: space-between;
		}
		.detail-item.active {
			position: relative;
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			display: flex;
		}

		.detail-text-box {
			width: 70%;
			min-width: 0;
			padding: 25rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.detail-img-box {
			margin-right: 20rem;
			flex: 1;
			/* width: 30%; */
			/* flex-shrink: 0; */
			/* width: 240px; */
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #ffffff;
			overflow: visible;
		}

		.detail-img-box img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		.detail-title {line-height: 1.5;font-size: 20rem;font-weight: 800;color: #111111;margin: 0 0 8px 0;}
		.detail-title .red-year {color: #ED0700;margin-right: 8px;}
		.detail-zh {font-size: 20rem;color: #444444;margin-bottom: 6px;line-height: 1.6;}
		.detail-en {line-height: 1.5;font-size: 17rem;color: #888888;margin: 0;font-family: Arial, sans-serif;}

		/* ==================== 3. 手机端适配面板 ==================== */
		.mobile-timeline {
			display: none;
			padding: 0 10px;
			margin-bottom: 30px;
		}

		.m-node-item {
			margin-bottom: 12px;
			cursor: pointer;
		}

		.m-node-box {
			background: #ffffff;
			border: 1px solid #e2e8f0;
			border-radius: 8px;
			padding: 10px 14px;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
		}

		.m-node-left {
			display: flex;
			align-items: center;
		}

		.m-node-img {
			width: 40px;
			height: 30px;
			object-fit: contain;
			margin-right: 10px;
			transition: transform 0.35s ease;
		}

		.m-node-item.active .m-node-box {
			background: #eb3b0a;
			color: #ffffff;
			border-color: #eb3b0a;
			box-shadow: 0 6px 20px rgba(235, 59, 10, 0.2);
		}

		.m-node-item.active .m-node-box .m-tag,
		.m-node-item.active .m-node-box .m-sub,
		.m-node-item.active .m-node-box .m-node-year {
			color: #ffffff;
		}

		.m-node-item.active .m-node-img {
			transform: scale(1.08);
		}

		.m-node-title .m-tag {
			font-size: 14px;
			font-weight: bold;
			color: #111111;
			display: block;
		}

		.m-node-title .m-sub {
			font-size: 11px;
			color: #666666;
		}

		.m-node-year {
			font-size: 12px;
			font-weight: bold;
			color: #333333;
		}

		.m-detail-expand {
			display: none;
			background: #ffffff;
			border: 1px solid #e2e8f0;
			border-radius: 8px;
			padding: 16px;
			color: #333333;
			margin-top: 8px;
			box-shadow: 0 8px 22px rgba(0,0,0,0.08);
			position: relative;
		}

		/* ==================== 4. 底部 Bento 左右图网格框架 ==================== */
		.opt-header { margin: 50px 0 25px 0; text-align: center; }
		.opt-header h2 {font-size: 42rem;font-weight: 950;color: #111111;margin: 0 0 6px 0;letter-spacing: 1px;}
		.opt-header p { font-size: 13px; color: #666666; margin: 0; }

		.opt-bento-container {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: 20px;
		}

		.opt-card {
			background: #ffffff;
			border: 1px solid #e2e8f0;
			border-radius: 10px;
			padding: 20rem;
			color: #333333;
			box-shadow: 0 6px 18px rgba(0,0,0,0.04);
			transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			gap: 10rem;
		}

		.opt-card:hover { 
			transform: translateY(-5px); 
			box-shadow: 0 14px 35px rgba(0,0,0,0.1);
			border-color: #eb3b0a;
		}

		.opt-card:nth-child(1) { grid-column: span 7; }
		.opt-card:nth-child(2) { grid-column: span 5; }
		.opt-card:nth-child(3) { grid-column: span 4; }
		.opt-card:nth-child(4) { grid-column: span 4; }
		.opt-card:nth-child(5) { grid-column: span 4; }

		.opt-card-content {
			flex: 1;
			min-width: 0;
		}

		.opt-card-img-box {
			/* width: 140px; */
			/* height: 105px; */
			border: 1px solid #f1f5f9;
			border-radius: 6px;
			padding: 4px;
			background: #f8fafc;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.opt-card-img-box img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
		}

		.opt-card:hover .opt-card-img-box img {
			transform: scale(1.06);
		}

		.opt-card h3 {font-size: 20rem;font-weight: 800;color: #ED0700;margin: 0 0 6px 0;}
		.opt-card h3 span.en-title {font-size: 20rem;font-weight: normal;color: #ED0700;margin-left: 5px;}
		.opt-card p.zh {font-size: 17rem;color: #444444;line-height: 1.6;margin: 0 0 4px 0;}
		.opt-card p.en {font-size: 14rem;color: #999999;line-height: 1.3;margin: 0;font-family: Arial, sans-serif;}

		@media (max-width: 991px) {
			.clean-tech-section { padding: 40px 0; }
			.timeline-wrapper, .timeline-detail-card { display: none !important; }
			.mobile-timeline { display: block !important; }
			.opt-card { grid-column: span 12 !important; flex-direction: column; text-align: left; }
			.opt-card-img-box { width: 100%; height: 160px; margin-top: 10px; }
		}

		@media (min-width: 992px) {
			.mobile-timeline { display: none !important; }
			.timeline-wrapper, .timeline-detail-card {display: block !important;}
		}
		
		
		
		
		
		
		
		
		
		/* ================= "适用行业" 居中双语标题及副标题专属 CSS ================= */
.section-title-wrap {
    text-align: center;
    margin-bottom: 25px;
}
.section-title-dual {
    display: flex;
    align-items: baseline;
    justify-content: center;
    letter-spacing: 0.5px;
    margin-bottom: 130rem;
}
.section-title-dual .cn-text {
    color: #ed0700; /* 醒目红 */
    font-size: 42rem;
    font-weight: 700;
    margin-right: 12px;
}
.section-title-dual .sep {
    color: #ed0700;
    font-weight: 400;
    margin-right: 12rem;
    font-size: 52rem;
}
.section-title-dual .en-text {
    color: #94a3b8; /* 高级灰 */
    font-weight: 600;
    font-size: 30rem;
}
.section-desc-cn {
    font-size: 15px;
    color: #333333;
    font-weight: 500;
    margin-bottom: 2px;
    line-height: 1.4;
}
.section-desc-en {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 400;
    line-height: 1.4;
}

/* 移动端响应式适配 */
@media (max-width: 768px) {
    .section-title-dual .cn-text {
        font-size: 20px !important;
    }
    .section-title-dual .sep,
    .section-title-dual .en-text {
        font-size: 16px !important;
    }
    .section-desc-cn {
        font-size: 13px !important;
    }
    .section-desc-en {
        font-size: 11px !important;
    }
}