@charset "utf-8";
/* CSS Document */
body{background:#FDFCF4;}
/*banner*/
.about-banner{width:100%;height:960px;position:relative;overflow:hidden;display:flex;align-items:center;}
.banner-bg{position: absolute;width: 100%;height: 100%;left: 0;top: 0;object-fit: cover;}
.about-banner-box{position:relative;width:100%;height:auto;}
.banner-card{position:absolute;left:0;z-index: 2;padding: 40px 36px;max-width: 750px;background: rgba(0,0,0,0.15);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border-radius: 8px;font-size:0;}
.banner-card h1{font-size: clamp(24px, 5vw, 46px);color: #ffffff;margin-bottom: 20px;font-weight: normal;}
.banner-card p{font-size:clamp(14px, 1.1vw, 17px);line-height: 1.75;color:#f8f8f8;margin-bottom:30px;}
.banner-btn{padding:12px 32px;color: #fff;}
.btn-contact:hover{opacity: 0.85;}
/*about*/
.about-factory-section{background:rgba(253,252,244,1);margin:0 auto;padding:120px 20px;}
.about-top-wrap{display: grid;grid-template-columns: 0.9fr 1.1fr;gap: 60px;margin-bottom: 40px;}
.left-text h3{font-size:clamp(18px, 1.8vw, 27px);line-height: 1.8;color:#222;font-weight: normal;}
.left-text h3 strong{font-weight: bold;}
.right-text p{font-size:16px;line-height: 1.7;color:rgba(4,0,0,0.6);margin-bottom:16px;}
/* 数据指标四栏 */
.data-grid{display:grid;grid-template-columns: repeat(4,1fr);gap: clamp(40px, 5vw, 90px);margin-bottom: 40px;}
.data-item{text-align:center;}
.data-num{font-size:36px;color:transparent;background:linear-gradient(90deg, #93B658, #3A9841);background-clip:text;-webkit-background-clip:text;margin-bottom:8px;}
.data-num b{font-size:clamp(24px, 5vw, 52px);}
.data-desc{font-size:14px;color:#555;line-height:1.5;}
/* 视频封面容器 */	
.about-factory .video-box video{width:100%;height:100%;}
.video-box{width:100%;position:relative;border-radius:6px;overflow:hidden;font-size:0;}

/*development-process*/
.timeline-section{width:100%;background:#000;color:#ccc;padding:90px 150px;position:relative;}
.timeline-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:flex-start;}
.timeline-left{position:sticky;top:120px;font-size:0;}
.timeline-left h2{font-size:clamp(21px, 3vw, 40px);color:#fff;margin-bottom:24px;font-weight:normal;}
.timeline-left p{font-size:clamp(14px, 2.5vw, 16px);;line-height:1.9;max-width:520px;margin-bottom:32px;color:rgba(255,255,255,0.6);}
.btn-green{display:inline-block;padding:12px 32px;background:linear-gradient(90deg,#93B658,#3A9841);color:#fff;border-radius:6px;font-size:16px;transition:opacity 0.26s;}
.btn-green:hover{opacity:0.85;}
.timeline-right{position:relative;max-height:70vh;overflow:hidden;padding-left:20px;font-size:0;}
.timeline-list{position:relative;transition:transform 0.5s ease;}
.timeline-item{position:relative;margin-bottom:30px;}
/* 左侧黄色竖线 */
.timeline-item-line{position:absolute;left:0;top:0;width:2px;height:calc(100% - 32px);background:#cc8833;}
/* 核心：内部所有内容统一向右偏移，制造空隙！ */
.timeline-content-wrap{padding-left:36px;}
.timeline-item img{width:100%;height:260px;object-fit:cover;margin-bottom:16px;background:#111;}
.timeline-item h3{color:#fff;font-size:clamp(21px, 4vw, 30px);margin-bottom:16px;font-weight:normal;}
.timeline-item p{font-size:clamp(14px, 1.1vw, 16px);line-height:1.8;color:#aaa;margin-bottom:21px;color:rgba(255,255,255,0.5);}
/* 圆点 */
.timeline-dot{position:absolute;left:-7px;top:calc(100% - 16px);width:18px;height:18px;border-radius:50%;background:#cc8833;z-index:99;}
/* 时间节点：上文字，下横线 */
.timeline-year-block{ display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:36px;padding-left:36px;}
.timeline-year{color:#cccccc;font-size:17px;white-space:nowrap;}
.timeline-year-line{width:100%;height:1px;background:#cc8833;}
.timeline-item.mask-dark{opacity:0.35;pointer-events:none;}
/*service-process*/
.service-process{width:100%;}
.process-wrap h2,.cert-wrap h2,.case-wrap h2{font-size:clamp(24px, 4vw, 42px);color:#222;margin-bottom:16px;font-weight:normal;text-align:center;margin-top:120px;}
.process-desc{max-width:1200px;margin:0 auto 36px;color:rgba(102,102,102,0.6);font-size:16px;line-height:1.6;text-align:center;}
/* 步骤按钮组 */
.process-tab-group{display:flex;gap:6px;justify-content:space-between;flex-wrap:wrap;margin-bottom:32px;}
.process-tab{padding:12px 48px;border:1px solid #ddd;background:#f3f1ec;border-radius:6px;font-size:16px;cursor:pointer;transition:all 0.3s ease;/* 强制文字垂直居中 */display:flex;align-items:center;justify-content:center;min-height:48px;/* 清除button默认样式 */outline:none;}
.process-tab.active{background:#000;color:#fff;border-color:#000;}
/* 图片容器 */
.process-media-box{position:relative;width:100%;border-radius:10px;overflow:hidden;font-size:0;}
.process-img{width:100%;object-fit:cover;opacity:0;position:absolute;top:0;left:0;transition:opacity 0.45s ease;}
.process-img.show{opacity:1;position:relative;}
/* 悬浮文字卡片 */
.process-card{position:absolute;z-index:1;right:60px;bottom:75px;background:rgba(255,255,255,0.92);padding:24px;border-radius:8px;max-width:340px;text-align:left;opacity:0;transition:opacity 0.45s ease;pointer-events:none;}
.process-card.show{opacity:1;pointer-events:auto;}
.process-card h4{font-size:18px;color:#222;margin-bottom:12px;}
.process-card p{color:rgba(102,102,102,0.6);font-size:15px;line-height:1.6;margin-bottom:16px;}
.btn-green{display:inline-block;padding:10px 22px;background:linear-gradient(90deg,#93B658,#3A9841);color:#fff;border-radius:6px;text-decoration:none;font-size:15px;}

/*certifications-trustworthy*/
.cert-section{width: 100%;}
.cert-wrap h2{font-size:clamp(24px, 4vw, 42px);color: #222;font-weight: normal;margin-bottom: 16px;}
.cert-desc{max-width: 920px;margin: 0 auto 48px;color: #666;font-size: 16px;line-height: 1.6;}
/* 证书卡片容器 */
.cert-list{display: grid;grid-template-columns: repeat(3, 1fr);margin-bottom: 60px;}
.cert-item{text-align: center;transition: transform 0.3s ease;}
/* 鼠标悬浮向上移动 */
.cert-item:hover{transform: translateY(-12px);}
.cert-img-box{border-radius:12px;overflow:hidden;margin-bottom: 20px;}
.cert-img{width: 85%;display: block;margin: 0 auto;}
.cert-item p{font-size: 16px;color: #222;}
/* 底部绿色介绍区块 */
.cert-info-block{background:url(../images/about/zs4.webp) no-repeat;background-size:100% 100%;border-radius:0px 20px 20px 20px;padding:40px 60px;display: flex;align-items: center;justify-content: space-between;gap: 30px;text-align: left;}
.cert-info-text{color: #ddd;font-size: 15px;line-height: 1.7;max-width: 72%;}
.btn-green{padding: 12px 32px;background: linear-gradient(-90deg, #93B658 0%, #3A9841 100%);color: #fff;border-radius:30px;text-decoration: none;font-size: 15px;white-space: nowrap;}

/*Successful-Cases*/
.case-section{margin-bottom:120px;}
/* 轮播容器 */
.case-slider-container{overflow:hidden;margin-bottom:40px;}
.case-track{display:flex;width:max-content;animation: scrollLoop 25s linear infinite;}
/* 鼠标悬浮暂停 */
.case-slider-container:hover .case-track{animation-play-state:paused;}
.case-item{width:360px;flex-shrink:0;padding:0 12px;text-align:left;cursor:pointer;}
.case-img-box{border-radius:10px;overflow:hidden;margin-bottom:20px;position:relative;}
.case-img{width:100%;object-fit:cover;display:block;transition:transform 0.4s ease;}
.case-item:hover .case-img{transform:scale(1.06);}
/* 国家标签：半透明黑底，两端圆角，左右结构 */
.case-country-tag {position: absolute;top: 12px;left: 12px;background: rgba(0, 0, 0, 0.55);color: #fff;padding: 0px 12px;border-radius: 999px;font-size: 15px;display: flex;align-items: center;gap: 8px;z-index: 2;}
.china-flag {width: 28px;height: 28px;margin-left:-16%;border-radius: 2px;position: relative;display:inline-block;}
.china-text {font-weight: 500;white-space: nowrap;}
.case-name{font-size:16px;color:#222;line-height:1.5;height:64px;padding-bottom:16px;border-bottom:1px solid #aaa;display:flex;flex-direction:column;justify-content:flex-end;}
.case-name-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.btn-learn{display:inline-block;padding:14px 40px;background:linear-gradient(90deg,#93B658,#3A9841);color:#fff;border-radius:10px;text-decoration:none;font-size:16px;text-align:center;}

/* 无缝向左循环动画 */
@keyframes scrollLoop{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
}


@media screen and (min-width:1500px){ 

}

@media screen and (min-width:1200px) and (max-width:1500px) {
	.about-banner{max-height:820px;min-height:750px;height:100%;}
	.about-banner-box{margin-top:-10%;}
	.data-num{font-size:clamp(18px, 5vw, 24px);}
	.data-num b{font-size:clamp(20px, 5vw, 36px);}
	.banner-card{left:0;}
	.banner-card h1{font-size: clamp(24px, 5vw, 36px);}
	.banner-card p{font-size:clamp(14px, 1.1vw, 16px);}
/*development-process*/
	.timeline-section{padding:80px 30px;}
	.timeline-item h3 {font-size:clamp(18px, 4vw, 24px);}
/*service-process*/
	.process-tab{padding:12px 30px;}
}

@media screen and (min-width:992px) and (max-width:1200px) {
	.about-banner{max-height:750px;min-height:540px;height:100%;}
	.about-banner-box{margin-top:-24%;}
	.banner-card{left:2%;}
	.banner-card h1{font-size:clamp(21px, 4vw, 30px);}
	.banner-card p{font-size:clamp(14px, 1.1vw, 15px);}
/*about*/
	.about-top-wrap{grid-template-columns:0.7fr 1fr;gap:30px;}
    .data-grid{grid-template-columns: repeat(2,1fr);}
    .about-factory-section{padding:60px 20px;}
	.data-num{font-size:clamp(18px, 5vw, 24px);}
	.data-num b{font-size:clamp(20px, 5vw, 36px);}
/*development-process*/
	.timeline-wrap{grid-template-columns:0.8fr 1.2fr;gap:50px;}
    .timeline-left{position:static;}
	.timeline-left p{font-size:clamp(14px, 1.1vw, 16px);}
    .timeline-section{padding:60px 20px;}
	.timeline-item h3 {font-size:clamp(18px, 4vw, 24px);}
/*service-process*/
	.process-tab{padding:12px 20px;}
/*certifications-trustworthy*/
	.cert-list{grid-template-columns: repeat(3,1fr);}
    .cert-info-block{flex-direction: column;text-align: center;}
    .cert-info-text{max-width: 100%;}
/*Successful Cases*/
	.case-item{width:320px;}
    .case-img{height:230px;}
}

@media screen and (min-width:769px) and (max-width:992px) {
	.about-factory-section{padding:60px 20px;}
	.about-banner{max-height:650px;min-height:520px;height:100%;}
	.about-banner-box{margin-top:-27%;width:100%;}
	.banner-card{left:2%;right:2%;}
	.banner-card h1{font-size:clamp(18px, 4vw, 25px);}
	.banner-card p{font-size:clamp(13px, 1.1vw, 14px);}
/*about*/
	.about-top-wrap{grid-template-columns:0.7fr 1fr;gap:30px;}
	.data-grid{grid-template-columns: repeat(2,1fr);}
	.data-num{font-size:clamp(16px, 2vw, 18px);}
	.data-num b{font-size:clamp(18px, 3vw, 36px);}
/*development-process*/
	.timeline-section {padding:60px 25px;}
	.timeline-wrap {grid-template-columns:0.7fr 1fr;gap:80px 20px;}
	.timeline-left p{font-size:clamp(14px, 1.1vw, 16px);line-height:1.6;}
	.timeline-item h3{font-size:clamp(16px, 2.5vw, 21px);}
	.timeline-item p{font-size:clamp(14px, 2vw, 16px);line-height:1.4;}
/*service-process*/
	.process-tab{padding:10px 5px;}
	.process-wrap h2,.cert-wrap h2,.case-wrap h2{font-size:30px;margin-top:50px;}
	.process-img{height:370px;}
	.process-card{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,0.7);padding:24px;border-radius:8px;max-width:370px;text-align:left;opacity:0;transition:opacity 0.45s ease;pointer-events:none;}
	.process-card.show{opacity:1;pointer-events:auto;}
	.process-card h4{font-size:16px;color:#222;margin-bottom:10px;}
	.process-card p{color:rgba(102,102,102,0.85);font-size:14px;line-height:1.4;margin-bottom:10px;}
	.btn-green{display:inline-block;padding:10px 22px;background:linear-gradient(90deg,#93B658,#3A9841);color:#fff;border-radius:6px;text-decoration:none;font-size:14px;}
/*certifications-trustworthy*/
	.cert-list{grid-template-columns: repeat(3,1fr);}
    .cert-info-block{flex-direction: column;text-align: center;border-radius: 0px;padding:20px 20px;}
    .cert-info-text{max-width: 100%;}
/*Successful Cases*/
	.case-item{width:280px;}
    .case-img{height:200px;}
}

@media screen and (max-width: 769px) {
	.about-banner{height:100%;}
	.about-banner-box{width:100%;max-height:540px;min-height:500px;height:100%;}
	.banner-card{left:2%;right:2%;top:18%;}
	.banner-card h1{font-size:clamp(18px, 4vw, 25px);}
	.banner-card p{font-size:clamp(13px, 1.1vw, 14px);}
/*about*/
	.about-top-wrap{grid-template-columns:1fr;gap:15px;}
	.data-grid{grid-template-columns:1fr 1fr;}
    .data-num{font-size:30px;}
    .left-text h3{font-size:20px;}
    .about-factory-section{padding:40px 16px;}
/*development-process*/
	.timeline-section{padding:50px 10px;}
    .timeline-left h2{font-size:clamp(21px, 4.5vw, 30px);}
	.timeline-left p{font-size:clamp(16px, 1vw, 21px);}
    .timeline-item h3{font-size:26px;}
	.timeline-wrap {grid-template-columns:1fr;}
/*service-process*/
	.process-tab-group {display:flex;gap:10px;justify-content:center;flex-wrap: wrap;margin-bottom:32px;}
	.process-wrap h2,.cert-wrap h2,.case-wrap h2{font-size:clamp(21px, 4.5vw, 30px);margin-top:50px;}
    .process-img{height:450px;}
    .process-card{position:relative;right:auto;bottom:auto;max-width:100%;margin-top:16px;}
    .process-media-box{overflow:visible;}
	.process-tab{padding:10px 15px;}
	.process-img{height:370px;}
	.process-card{position:absolute;right:10px;bottom:10px;background:rgba(255,255,255,0.7);padding:24px;border-radius:8px;max-width:370px;text-align:left;opacity:0;transition:opacity 0.45s ease;pointer-events:none;}
	.process-card.show{opacity:1;pointer-events:auto;}
	.process-card h4{font-size:16px;color:#222;margin-bottom:10px;}
	.process-card p{color:rgba(102,102,102,0.85);font-size:14px;line-height:1.4;margin-bottom:10px;}
	.btn-green{display:inline-block;padding:10px 22px;background:linear-gradient(90deg,#93B658,#3A9841);color:#fff;border-radius:6px;text-decoration:none;font-size:14px;}
	/*certifications-trustworthy*/
	.cert-list{grid-template-columns: repeat(2,1fr);}
    .cert-info-block{flex-direction: column;text-align: center;padding:20px 20px;border:1px solid;background: linear-gradient(90deg,#183822,#0f2716);}
    .cert-info-text{max-width: 100%;}
/*Successful Cases*/
	.case-section{margin-bottom:40px;}
    .case-item{width:260px;}
    .case-img{height:180px;}
}