:root,[data-bs-theme=light] {
	--bs-blue: #0d6efd;
	--bs-indigo: #6610f2;
	--bs-purple: #6f42c1;
	--bs-pink: #d63384;
	--bs-red: #dc3545;
	--bs-orange: #fd7e14;
	--bs-yellow: #ffc107;
	--bs-green: #198754;
	--bs-teal: #20c997;
	--bs-cyan: #0dcaf0;
	--bs-black: #000;
	--bs-white: #fff;
	--bs-gray: #6c757d;
	--bs-gray-dark: #343a40;
	--bs-gray-100: #f8f9fa;
	--bs-gray-200: #e9ecef;
	--bs-gray-300: #dee2e6;
	--bs-gray-400: #ced4da;
	--bs-gray-500: #adb5bd;
	--bs-gray-600: #6c757d;
	--bs-gray-700: #495057;
	--bs-gray-800: #343a40;
	--bs-gray-900: #212529;
	--bs-primary: #0d6efd;
	--bs-secondary: #6c757d;
	--bs-success: #198754;
	--bs-info: #0dcaf0;
	--bs-warning: #ffc107;
	--bs-danger: #dc3545;
	--bs-light: #f8f9fa;
	--bs-dark: #212529;
	--bs-primary-rgb: 13, 110, 253;
	--bs-secondary-rgb: 108, 117, 125;
	--bs-success-rgb: 25, 135, 84;
	--bs-info-rgb: 13, 202, 240;
	--bs-warning-rgb: 255, 193, 7;
	--bs-danger-rgb: 220, 53, 69;
	--bs-light-rgb: 248, 249, 250;
	--bs-dark-rgb: 33, 37, 41;
	--bs-primary-text-emphasis: #052c65;
	--bs-secondary-text-emphasis: #2b2f32;
	--bs-success-text-emphasis: #0a3622;
	--bs-info-text-emphasis: #055160;
	--bs-warning-text-emphasis: #664d03;
	--bs-danger-text-emphasis: #58151c;
	--bs-light-text-emphasis: #495057;
	--bs-dark-text-emphasis: #495057;
	--bs-primary-bg-subtle: #cfe2ff;
	--bs-secondary-bg-subtle: #e2e3e5;
	--bs-success-bg-subtle: #d1e7dd;
	--bs-info-bg-subtle: #cff4fc;
	--bs-warning-bg-subtle: #fff3cd;
	--bs-danger-bg-subtle: #f8d7da;
	--bs-light-bg-subtle: #fcfcfd;
	--bs-dark-bg-subtle: #ced4da;
	--bs-primary-border-subtle: #9ec5fe;
	--bs-secondary-border-subtle: #c4c8cb;
	--bs-success-border-subtle: #a3cfbb;
	--bs-info-border-subtle: #9eeaf9;
	--bs-warning-border-subtle: #ffe69c;
	--bs-danger-border-subtle: #f1aeb5;
	--bs-light-border-subtle: #e9ecef;
	--bs-dark-border-subtle: #adb5bd;
	--bs-white-rgb: 255, 255, 255;
	--bs-black-rgb: 0, 0, 0;
	--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
	--bs-body-font-family: var(--bs-font-sans-serif);
	--bs-body-font-size: 1rem;
	--bs-body-font-weight: 400;
	--bs-body-line-height: 1.5;
	--bs-body-color: #212529;
	--bs-body-color-rgb: 33, 37, 41;
	--bs-body-bg: #fff;
	--bs-body-bg-rgb: 255, 255, 255;
	--bs-emphasis-color: #000;
	--bs-emphasis-color-rgb: 0, 0, 0;
	--bs-secondary-color: rgba(33, 37, 41, 0.75);
	--bs-secondary-color-rgb: 33, 37, 41;
	--bs-secondary-bg: #e9ecef;
	--bs-secondary-bg-rgb: 233, 236, 239;
	--bs-tertiary-color: rgba(33, 37, 41, 0.5);
	--bs-tertiary-color-rgb: 33, 37, 41;
	--bs-tertiary-bg: #f8f9fa;
	--bs-tertiary-bg-rgb: 248, 249, 250;
	--bs-heading-color: inherit;
	--bs-link-color: #0d6efd;
	--bs-link-color-rgb: 13, 110, 253;
	--bs-link-decoration: underline;
	--bs-link-hover-color: #0a58ca;
	--bs-link-hover-color-rgb: 10, 88, 202;
	--bs-code-color: #d63384;
	--bs-highlight-color: #212529;
	--bs-highlight-bg: #fff3cd;
	--bs-border-width: 1px;
	--bs-border-style: solid;
	--bs-border-color: #dee2e6;
	--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
	--bs-border-radius: 0.375rem;
	--bs-border-radius-sm: 0.25rem;
	--bs-border-radius-lg: 0.5rem;
	--bs-border-radius-xl: 1rem;
	--bs-border-radius-xxl: 2rem;
	--bs-border-radius-2xl: var(--bs-border-radius-xxl);
	--bs-border-radius-pill: 50rem;
	--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	--bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	--bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
	--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
	--bs-focus-ring-width: 0.25rem;
	--bs-focus-ring-opacity: 0.25;
	--bs-focus-ring-color: rgba(13, 110, 253, 0.25);
	--bs-form-valid-color: #198754;
	--bs-form-valid-border-color: #198754;
	--bs-form-invalid-color: #dc3545;
	--bs-form-invalid-border-color: #dc3545
}


.i_news .card .card-body h3{
	height: 2.4em;
}

.i_banner{
	min-height: 100vh;
}

.i_why h3.h4{
	margin-bottom: 0.75em;
}

.i_process .process-img img{
	max-width: 180px;
}

.i_adv .ico img{}

.i_counter .h5{
	font-weight: 400;
}

 /* ============== 通用内页 s ============== */

table{border-collapse:collapse;}
ol,ul,li{list-style: none;}

select, button, input,img {vertical-align: middle;}/*去除图片底部缝隙并基于中线对齐*/

*[class*="rect-"]{position: relative;display: block; width: 100%;height: 0;overflow: hidden;}
*[class*="rect-"] ._full{position: absolute;left: 0;top:0;width: 100%;height: 100%;
*height: auto;object-fit: cover;}
.rect-40{padding-bottom: 40%;}
.rect-50{padding-bottom: 50%;}
.rect-55{padding-bottom: 55%;}
.rect-5625{padding-bottom: 56.25%;}
.rect-60{padding-bottom: 60%;}
.rect-65{padding-bottom: 65%;}
.rect-67{padding-bottom: 67%;}
.rect-70{padding-bottom: 70%;}
.rect-75{padding-bottom: 75%;}
.rect-80{padding-bottom: 80%;}
.rect-90{padding-bottom: 90%;}
.rect-100{padding-bottom: 100%;}
.rect-135{padding-bottom: 135%;}
.rect-140{padding-bottom: 140%;}
.rect-150{padding-bottom: 150%;}
li *[class*="pic"]{overflow: hidden;}
li *[class*="pic"]>img{-webkit-transition: 0.3s ease-out;-moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out;transition: 0.3s ease-out;}
li:hover *[class*="pic"]>img {-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}
.trs3{-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
.trs5{-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}

.flex-1 {flex: 1;}
/* flex布局 */
.flex {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
/*默认 主轴为水平方向，起点在左端*/
.f-dr {-webkit-box-orient: horizontal;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;}
/*主轴为水平方向，起点在右端*/
.f-dr-r {-webkit-box-orient: horizontal;-webkit-flex-direction: row-reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
/*主轴为垂直方向，起点在上沿*/
.f-dc {-webkit-box-orient: vertical;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
/*主轴为垂直方向，起点在下沿*/
.f-dc-r {-webkit-box-orient: vertical;-webkit-flex-direction: column-reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}

/* 交叉轴的起点对齐 */
.f-as {-webkit-box-align: start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;}
/* 交叉轴的中点对齐 */
.f-ac {-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
/* 交叉轴的终点对齐 */
.f-ae {-webkit-box-align: end;-webkit-align-items: flex-end;-ms-flex-align: end;align-items: flex-end;}
/* 项目的第一行文字的基线对齐 */
.f-ab {-webkit-box-align: baseline;-webkit-align-items: baseline;-ms-flex-align: baseline;align-items: baseline;}
/* 交叉轴拉伸对齐 */
.f-ast {-webkit-align-items: stretch;-moz-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;}
/* 左对齐 */
.f-js {-webkit-box-pack: start;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;}
/* 居中 */
.f-jc {-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
/* 右对齐 */
.f-je {-webkit-box-pack: end;-webkit-justify-content: flex-end;-ms-flex-pack: end;justify-content: flex-end;}
/* 两端对齐，项目之间的间隔都相等 */
.f-jsb {-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;}
/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
.f-jsa {-webkit-box-pack: distribute;-webkit-justify-content: space-around;-ms-flex-pack: distribute;justify-content: space-around;}
/* 换行，第一行在上方 */
.f-warp {-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;}
/* 换行，在第一行的下方 */
.f-warp-r {-webkit-flex-wrap: wrap-reverse;-moz-flex-wrap: wrap-reverse;-ms-flex-wrap: wrap-reverse;-o-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;}
/* flex布局 */
.flex {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
/*默认 主轴为水平方向，起点在左端*/
.f-dr {-webkit-box-orient: horizontal;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;}
/*主轴为水平方向，起点在右端*/
.f-dr-r {-webkit-box-orient: horizontal;-webkit-flex-direction: row-reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
/*主轴为垂直方向，起点在上沿*/
.f-dc {-webkit-box-orient: vertical;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
/*主轴为垂直方向，起点在下沿*/
.f-dc-r {-webkit-box-orient: vertical;-webkit-flex-direction: column-reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
/* 交叉轴的起点对齐 */
.f-as {-webkit-box-align: start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;}
/* 交叉轴的中点对齐 */
.f-ac {-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
/* 交叉轴的终点对齐 */
.f-ae {-webkit-box-align: end;-webkit-align-items: flex-end;-ms-flex-align: end;align-items: flex-end;}
/* 项目的第一行文字的基线对齐 */
.f-ab {-webkit-box-align: baseline;-webkit-align-items: baseline;-ms-flex-align: baseline;align-items: baseline;}
/* 交叉轴拉伸对齐 */
.f-ast {-webkit-align-items: stretch;-moz-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;}
/* 左对齐 */
.f-js {-webkit-box-pack: start;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;}
/* 居中 */
.f-jc {-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
/* 右对齐 */
.f-je {-webkit-box-pack: end;-webkit-justify-content: flex-end;-ms-flex-pack: end;justify-content: flex-end;}
/* 两端对齐，项目之间的间隔都相等 */
.f-jsb {-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;}
/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
.f-jsa {-webkit-box-pack: distribute;-webkit-justify-content: space-around;-ms-flex-pack: distribute;justify-content: space-around;}
/* 换行，第一行在上方 */
.f-warp {-webkit-flex-wrap: wrap;-moz-flex-wrap: wrap;-ms-flex-wrap: wrap;-o-flex-wrap: wrap;flex-wrap: wrap;}
/* 换行，在第一行的下方 */
.f-warp-r {-webkit-flex-wrap: wrap-reverse;-moz-flex-wrap: wrap-reverse;-ms-flex-wrap: wrap-reverse;-o-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;}


/* 文字限制行数 */
/* 限制一行 */
.linelimit {white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
/* 【常用】限制多行 修改行数-webkit-line-clamp: 2;【兼容必须限高】 */
.linelimit-2 {overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.linelimit-3 {overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}
.linelimit-4 {overflow: hidden;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 4;}
*[class*="rect-"]{position: relative;display: block; width: 100%;height: 0;overflow: hidden;}
*[class*="rect-"] ._full{position: absolute;left: 0;top:0;width: 100%;height: 100%;
*height: auto;object-fit: cover;}
.rect-40{padding-bottom: 40%;}
.rect-50{padding-bottom: 50%;}
.rect-55{padding-bottom: 55%;}
.rect-5625{padding-bottom: 56.25%;}
.rect-60{padding-bottom: 60%;}
.rect-65{padding-bottom: 65%;}
.rect-67{padding-bottom: 67%;}
.rect-70{padding-bottom: 70%;}
.rect-75{padding-bottom: 75%;}
.rect-80{padding-bottom: 80%;}
.rect-90{padding-bottom: 90%;}
.rect-100{padding-bottom: 100%;}
.rect-130{padding-bottom: 130%;}
.rect-135{padding-bottom: 135%;}
.rect-140{padding-bottom: 140%;}
.rect-150{padding-bottom: 150%;}





/* =========================================================
   ✨ 全局变量 & 基础重置
   ========================================================= */
:root {
	--sy-pro-primary: #00A1E9;
	--sy-pro-primary-hover: #E60013;
	--sy-pro-dark: #1a1a1a;
	--sy-pro-text: #4b5563;
	--sy-pro-gray-light: #f3f4f6;
	--sy-pro-border: #e5e7eb;
	--sy-pro-container-width: 1360px;
	--sy-primary: #00A1E9;
	--sy-primary-dark: #E60013;
	--sy-text-main: #333333;
	--sy-text-light: #666666;
	--sy-border: #e5e7eb;
	--sy-bg-light: #f8f9fa;

}

/* ==========================================
   2. 布局与通用间距类
   ========================================== */
.sy-container { max-width: 1360px; margin: 0 auto; padding: 0 20px; }
.sy-section-wrapper { padding: 80px 0; }
.sy-section-header { text-align: center; max-width: 800px; margin: 0 auto 60px auto; }
.sy-row-gap-30 { --bs-gutter-x: 30px; --bs-gutter-y: 30px; }

/* 通用间距与辅助类 */
.sy-mb-24 { margin-bottom: 24px; }
.sy-mb-40 { margin-bottom: 40px; }
.sy-mb-60 { margin-bottom: 60px; }
.sy-m-0 { margin: 0; }
.sy-text-white { color: #ffffff; }
.sy-text-right { text-align: right; }
.sy-icon-right { margin-left: 8px; }

/* ==========================================
   3. 排版与字体大小
   ========================================== */
.sy-title-h1 { font-size: 48px; font-weight: 700; color: #ffffff; margin-bottom: 20px; line-height: 1.2; }
.sy-title-h2,.sy-detail-con h2{ font-size: 36px; font-weight: 700; color: #1a1a1a; margin-bottom: 20px; line-height: 1.3; }
.sy-title-h3,.sy-detail-con h3{ font-size: 24px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; line-height: 1.4; }
.sy-title-h4,.sy-detail-con h4{ font-size: 20px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; line-height: 1.4; }
.sy-detail-con a{color: var(--sy-pro-primary);text-decoration: underline;}

.sy-text-subtitle { font-size: 18px; color: var(--sy-text-light); margin-bottom: 0; line-height: 1.6; }
.sy-text-desc { font-size: 16px; color: var(--sy-text-light); margin-bottom: 24px; line-height: 1.8; }
.sy-text-small { font-size: 14px; color: var(--sy-text-light); line-height: 1.6; }

/* ==========================================
   4. 按钮组件
   ========================================== */
.sy-btn {
    display: inline-block;
    background-color: var(--sy-primary);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 32px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}
.sy-btn:hover { background-color: var(--sy-primary-dark); color: #ffffff; }
.sy-btn-outline { background-color: #ffffff; color: #1a1a1a; border: 1px solid var(--sy-border); }
.sy-btn-outline:hover { border-color: var(--sy-primary); color: var(--sy-primary); }
.sy-btn-full { width: 100%; margin-bottom: 20px; }
.sy-btn-submit { width: 100%; max-width: 250px; }

/* 按钮样式 */
.sy-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: var(--sy-primary);
	color: #ffffff;
	padding: 14px 32px;
	border-radius: 9999px;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.3s;
	width: fit-content;
}
.sy-btn:hover {
	background-color: var(--sy-pro-primary-hover);
}
.sy-btn svg {
	width: 18px;
	height: 18px;
}


.sy-pro-container { color: var(--sy-pro-text); background-color: #ffffff; line-height: 1.6; }

.sy-pro-container { max-width: var(--sy-pro-container-width); margin: 0 auto; padding: 80px 20px; }


/* ==========================================
   11. FAQ 手风琴
   ========================================== */
.sy-faq-container { max-width: 900px; margin: 0 auto; }
.sy-faq-item { background-color: #ffffff; border: 1px solid var(--sy-border); margin-bottom: 16px; }
.sy-faq-btn { width: 100%; text-align: left; padding: 24px 32px; background: transparent; border: none; font-size: 20px; font-weight: 700; color: #1a1a1a; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease, color 0.3s ease; }
.sy-faq-btn:hover { background-color: #f9fafb; }
.sy-faq-btn.sy-active { color: var(--sy-primary); }
.sy-faq-icon { font-size: 16px; color: var(--sy-text-light); transition: transform 0.3s ease; }
.sy-faq-btn.sy-active .sy-faq-icon { transform: rotate(180deg); color: var(--sy-primary); }
.sy-faq-content { padding: 0 32px 32px 32px; font-size: 16px; color: var(--sy-text-light); line-height: 1.8; }
.sy-faq-content-inner { border-top: 1px solid var(--sy-border); padding-top: 24px; }
/* ==========================================
   FAQ 手风琴 (原生 JS 动画版)
   ========================================== */
.sy-faq-container { max-width: 900px; margin: 0 auto; }
.sy-faq-item { background-color: #ffffff; border: 1px solid var(--sy-border); margin-bottom: 16px; }

.sy-faq-btn { 
    width: 100%; 
    text-align: left; 
    padding: 24px 32px; 
    background: transparent; 
    border: none; 
    font-size: 20px; 
    font-weight: 700; 
    color: #1a1a1a; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: background-color 0.3s ease, color 0.3s ease; 
}
.sy-faq-btn:hover { background-color: #f9fafb; }
.sy-faq-btn.sy-active { color: var(--sy-primary); }

.sy-faq-icon { font-size: 16px; color: var(--sy-text-light); transition: transform 0.3s ease; }
.sy-faq-btn.sy-active .sy-faq-icon { transform: rotate(180deg); color: var(--sy-primary); }

/* 动画核心：使用 max-height 和 overflow hidden 实现平滑展开 */
.sy-faq-content-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.sy-faq-content { padding: 0 32px 32px 32px; font-size: 16px; color: var(--sy-text-light); line-height: 1.8; }
.sy-faq-content-inner { border-top: 1px solid var(--sy-border); padding-top: 24px; }

/* 手机端适配 */
@media (max-width: 767px) {
    .sy-faq-btn { padding: 20px; font-size: 18px; }
    .sy-faq-content { padding: 0 20px 20px 20px; }
}


/* ==========================================
   7. 方案与服务卡片
   ========================================== */
.sy-solution-card { background-color: #ffffff; border: 1px solid var(--sy-border); cursor: pointer; height: 100%; display: flex; flex-direction: column; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.sy-solution-card:hover { transform: translateY(-6px); box-shadow: 0 20px 30px rgba(0,0,0,0.08); }
.sy-solution-img-wrap { overflow: hidden; position: relative; }
.sy-solution-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.sy-solution-card:hover .sy-solution-img { transform: scale(1.08); }
.sy-solution-badge { position: absolute; top: 20px; left: 20px; background: var(--sy-primary); color: #ffffff; padding: 6px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.sy-solution-content { padding: 40px; display: flex; flex-direction: column; flex-grow: 1; }
.sy-explore-link { font-size: 14px; font-weight: 700; color: var(--sy-primary); text-transform: uppercase; letter-spacing: 1px; margin-top: auto; }

.sy-service-card { background-color: #ffffff; border: 1px solid var(--sy-border); border-top: 4px solid var(--sy-primary); padding: 40px; height: 100%; transition: box-shadow 0.3s ease; }
.sy-service-card:hover { box-shadow: 0 15px 30px rgba(0,0,0,0.05); }
.sy-service-icon { width: 64px; height: 64px; background-color: #e6f4ec; color: var(--sy-primary); font-size: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 24px; }
.sy-service-list li { font-size: 14px; font-weight: 500; color: #1a1a1a; margin-bottom: 16px; display: flex; align-items: center; }
.sy-service-list li i { color: var(--sy-primary); margin-right: 12px; font-size: 16px; }

/* ==========================================
   8. 方案详情页专用样式
   ========================================== */
.sy-detail-card { background-color: #ffffff; border: 1px solid var(--sy-border); padding: 40px; }
.sy-detail-img { width: 100%; margin-bottom: 40px; border: 1px solid var(--sy-border); }
.sy-advantage-box { background-color: var(--sy-bg-light); border: 1px solid var(--sy-border); padding: 30px; height: 100%; display: flex; gap: 20px; }
.sy-advantage-icon { font-size: 32px; color: var(--sy-primary); }
.sy-table-responsive { overflow-x: auto; }

.sy-detail-con ul{
	/* padding-left: 0; */
}
.sy-detail-con ul li{
	list-style-type: disc;
	/* margin-left: 2em; */
}
.solution-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  color: #222222;
  background: #ffffff;
  border: 1px solid #e5eaf0;
}

.solution-table thead {
  background: var(--sy-primary);
  color: #ffffff;
}

.solution-table th {
  padding: 16px 18px;
  text-align: left;
  font-weight: 700;
  border: 1px solid var(--sy-primary);
}

.solution-table td {
  padding: 15px 18px;
  border: 1px solid #e5eaf0;
  vertical-align: top;
  line-height: 1.6;
}

.solution-table tbody tr:nth-child(even) {
  background: #f5f8fa;
}

.solution-table tbody tr:hover {
  background: rgba(0, 161, 233, 0.08);
}

.solution-table tbody td:first-child {
  font-weight: 600;
  color: #003B66;
}

@media (max-width: 768px) {
  .solution-table {
    font-size: 14px;
  }

  .solution-table th,
  .solution-table td {
    padding: 12px 14px;
  }
}


/* ==========================================
   9. 侧边栏组件 (Widgets)
   ========================================== */
.sy-widget { background-color: #ffffff; border: 1px solid var(--sy-border); padding: 32px; margin-bottom: 30px; }
.sy-widget-title { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--sy-border); }

.sy-widget-dark { background-color: #1a1a1a; color: #ffffff; border: none; }
.sy-widget-dark .sy-widget-title { color: #ffffff; border-bottom-color: #333333; }
.sy-widget-dark-desc { color: #aaaaaa; margin-bottom: 24px; }

.sy-contact-inline { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.sy-contact-inline-icon { color: var(--sy-primary); font-size: 18px; }

.sy-related-list { display: flex; flex-direction: column; gap: 24px; }
.sy-related-item { display: flex; align-items: center; gap: 16px; }
.sy-related-icon-pdf { font-size: 32px; color: #ef4444; }
.sy-related-title { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 4px; }
.sy-related-meta { font-size: 12px; color: var(--sy-text-light); }
.sy-related-img { width: 72px; height: 72px; object-fit: cover; border: 1px solid var(--sy-border); }




/* =========================================================
   ✨ 面包屑导航
   ========================================================= */
.sy-pro-breadcrumb { padding: 20px 0; font-size: 14px; color: #6b7280; border-bottom: 1px solid var(--sy-pro-border); margin-bottom: 40px; }
.sy-pro-breadcrumb a { transition: color 0.3s; }
.sy-pro-breadcrumb a:hover { color: var(--sy-pro-primary); }
.sy-pro-breadcrumb span { margin: 0 8px; color: #9ca3af; }
.sy-pro-breadcrumb .sy-pro-current { color: var(--sy-pro-dark); font-weight: 500; }

/* =========================================================
   ✨ 布局与侧边栏 (手风琴菜单)
   ========================================================= */
.sy-pro-layout { display: flex; gap: 40px; margin-bottom: 0; align-items: flex-start; }

.sy-pro-sidebar {
	width: 280px; flex-shrink: 0;
	border: 1px solid var(--sy-pro-border);
	border-radius: 8px; padding: 20px 0;
	position: sticky; top: 20px;
}
.sy-pro-sidebar-title {
	font-size: 18px; font-weight: 700; color: var(--sy-pro-dark);
	padding: 0 20px 15px; border-bottom: 1px solid var(--sy-pro-border); margin-bottom: 10px;
}
.sy-pro-menu-list{
	padding-left: 0;
}
.sy-pro-menu-item { border-bottom: 1px solid var(--sy-pro-gray-light); }
.sy-pro-menu-item:last-child { border-bottom: none; }

.sy-pro-menu-header {
	padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;
	cursor: pointer; font-weight: 600; color: var(--sy-pro-dark); transition: color 0.3s;
}
.sy-pro-menu-header:hover, .sy-pro-menu-item.active > .sy-pro-menu-header { color: var(--sy-pro-primary); }
.sy-pro-menu-header i { font-size: 12px; transition: transform 0.3s; }
.sy-pro-menu-item.active > .sy-pro-menu-header i { transform: rotate(180deg); }


/* 核心：二级菜单的隐藏与过渡 */
.sy-pro-submenu {
	max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
	background-color: var(--sy-pro-gray-light);
}
.sy-pro-submenu li a {
	display: block; padding: 10px 20px 10px 40px; font-size: 14px; color: var(--sy-pro-text); transition: all 0.3s;
}
.sy-pro-submenu li a:hover { color: var(--sy-pro-primary); background-color: #e5e7eb; }

/* =========================================================
   ✨ 右侧产品网格
   ========================================================= */
.sy-pro-main { flex-grow: 1; }
.sy-pro-toolbar {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid var(--sy-pro-border);
}
.sy-pro-toolbar-title { font-size: 24px; font-weight: 700; color: var(--sy-pro-dark); }
.sy-pro-sort select {
	padding: 8px 15px; border: 1px solid var(--sy-pro-border); border-radius: 4px;
	font-family: inherit; font-size: 14px; outline: none; cursor: pointer;
}

.sy-pro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.sy-pro-card {
	border: 1px solid var(--sy-pro-border); border-radius: 8px; overflow: hidden;
	transition: all 0.3s; display: flex; flex-direction: column; background: #fff; height: 100%;
}
.sy-pro-card:hover { border-color: var(--sy-pro-primary); box-shadow: 0 10px 25px rgba(0,0,0,0.05); transform: translateY(-5px); }
.sy-pro-card-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.sy-pro-card-sku { font-size: 12px; color: #9ca3af; margin-bottom: 5px; }
.sy-pro-card-title { font-size: 16px; font-weight: 600; color: var(--sy-pro-dark); margin-bottom: 10px; line-height: 1.4; }
.sy-pro-card-desc { font-size: 13px; color: var(--sy-pro-text); margin-bottom: 20px; flex-grow: 1; }
.sy-pro-card-btn { text-align: center; padding: 10px; border: 1px solid var(--sy-pro-primary); color: var(--sy-pro-primary); border-radius: 4px; font-size: 14px; font-weight: 600; transition: all 0.3s; }
.sy-pro-card:hover .sy-pro-card-btn { background: var(--sy-pro-primary); color: #fff; }


/* 新闻列表 */
/* 新闻网格 */
.sy-pro-news-grid { padding: ; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }
.sy-pro-news-card { border: 1px solid var(--sy-pro-border); border-radius: 8px; overflow: hidden; transition: all 0.3s; display: flex; flex-direction: column; }
.sy-pro-news-card:hover { border-color: var(--sy-pro-primary); box-shadow: 0 10px 25px rgba(0,0,0,0.05); transform: translateY(-5px); }
.sy-pro-news-img { overflow: hidden; }
.sy-pro-news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.sy-pro-news-card:hover .sy-pro-news-img img { transform: scale(1.05); }

.sy-pro-news-info { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.sy-pro-news-date { font-size: 13px; color: var(--sy-pro-primary); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.sy-pro-news-title { font-size: 24px; font-weight: 600; color: var(--sy-pro-dark); margin-bottom: 15px; line-height: 1.4; height: 2.8em;}
.sy-pro-news-excerpt { font-size: 16px; color: #6b7280; margin-bottom: 20px; flex-grow: 1; }
.sy-pro-news-readmore { font-size: 14px; font-weight: 600; color: var(--sy-pro-dark); display: inline-flex; align-items: center; gap: 5px; transition: color 0.3s; }
.sy-pro-news-card:hover .sy-pro-news-readmore { color: var(--sy-pro-primary); }

/* 分页组件 */
.sy-pro-pagination { display: flex; justify-content: center; gap: 10px; margin: 30px 0; }
.sy-pro-page-item,.sy-pro-pagination a,.sy-pro-pagination span{ 
	width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; 
	border: 1px solid var(--sy-pro-border); border-radius: 4px; font-weight: 500; 
	color: var(--sy-pro-dark); transition: all 0.3s; cursor: pointer; 
}
.sy-pro-page-item:hover, .sy-pro-page-item.active,
.sy-pro-pagination a:hover,.sy-pro-pagination a.page-num-current,.sy-pro-pagination .current{ background-color: var(--sy-pro-primary); color: #fff; border-color: var(--sy-pro-primary); }

/* 左右分栏布局 */
.sy-pro-article-layout { display: flex; gap: 50px; margin-bottom: 80px; align-items: flex-start; }

/* 左侧：文章主体 */
.sy-pro-article-main { flex-grow: 1; min-width: 0; }
.sy-pro-article-header { margin-bottom: 30px; height: auto;}
.sy-pro-article-title { font-size: 36px; font-weight: 700; color: var(--sy-pro-dark); line-height: 1.3; margin-bottom: 15px; }
.sy-pro-article-meta { display: flex; gap: 20px; font-size: 14px; color: #6b7280; }
.sy-pro-article-meta span { display: flex; align-items: center; gap: 6px; }
.sy-pro-article-cover { width: 100%; height: auto; border-radius: 8px; margin-bottom: 40px; }

/* 富文本排版样式 */
.sy-pro-richtext h2 { font-size: 28px; color: var(--sy-pro-dark); margin: 40px 0 20px; scroll-margin-top: 80px; }
.sy-pro-richtext h3 { font-size: 22px; color: var(--sy-pro-dark); margin: 30px 0 15px; scroll-margin-top: 80px; }
.sy-pro-richtext h4 { font-size: 18px; color: var(--sy-pro-dark); margin: 20px 0 10px; scroll-margin-top: 80px; }
.sy-pro-richtext p { margin-bottom: 20px; font-size: 16px; }
.sy-pro-richtext ul { list-style: disc; padding-left: 20px; margin-bottom: 20px; }
.sy-pro-richtext li { margin-bottom: 10px;    list-style: disc; }
.sy-pro-richtext img { max-width: 100%; border-radius: 8px; margin: 20px 0; }
.sy-pro-richtext a{ text-decoration: underline;color: var(--sy-pro-primary);}
.sy-pro-richtext blockquote { border-left: 4px solid var(--sy-pro-primary); background: var(--sy-pro-gray-light); padding: 20px; font-style: italic; margin: 30px 0; border-radius: 0 8px 8px 0; }
.sy-pro-richtext table p{margin-bottom: 0;}

.sy-pro-tab-content .sy-pro-richtext a{
	text-decoration: underline;
	color: #212121;
}
.sy-pro-tab-content .sy-pro-richtext a:hover{
	color: var(--sy-pro-primary);
}

/* 右侧：侧边栏 (固定定位) */
.sy-pro-article-sidebar { width: 340px; flex-shrink: 0; position: sticky; top: 30px; display: flex; flex-direction: column; gap: 30px; }

/* 侧边栏模块通用 */
.sy-pro-widget { border: 1px solid var(--sy-pro-border); border-radius: 8px; padding: 25px; background: #fff; }
.sy-pro-widget-title { font-size: 18px; font-weight: 700; color: var(--sy-pro-dark); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--sy-pro-gray-light); }

/* 动态目录 (TOC) */
.sy-pro-toc-list { list-style: none; padding: 0; margin: 0; }
.sy-pro-toc-list li { margin-bottom: 10px; line-height: 1.4; }
.sy-pro-toc-list a { font-size: 14px; color: var(--sy-pro-text); transition: all 0.3s; display: block; border-left: 2px solid transparent; padding-left: 10px; }
.sy-pro-toc-list a:hover { color: var(--sy-pro-primary); }
.sy-pro-toc-list a.active { color: var(--sy-pro-primary); font-weight: 600; border-left-color: var(--sy-pro-primary); }
/* 针对 H3 的缩进 */
.sy-pro-toc-h3 a { margin-left: 15px; font-size: 13px; }

/* 相关新闻 */
.sy-pro-related-item { display: flex; gap: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed var(--sy-pro-gray-light); }
.sy-pro-related-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.sy-pro-related-img { width: 80px; height: 60px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.sy-pro-related-text h4 { font-size: 14px; font-weight: 600; color: var(--sy-pro-dark); line-height: 1.3; margin-bottom: 5px; transition: color 0.3s; }
.sy-pro-related-item:hover h4 { color: var(--sy-pro-primary); }
.sy-pro-related-text span { font-size: 12px; color: #9ca3af; }

 /* ================= 新增：上一篇/下一篇 导航样式 ================= */
.sy-pro-article-nav {
	display: flex; gap: 30px; margin-top: 60px; padding-top: 40px;
	border-top: 1px solid var(--sy-pro-border);
}
.sy-pro-article-nav a {
	flex: 1; display: flex; flex-direction: column; padding: 25px;
	background-color: var(--sy-pro-gray-light); border: 1px solid transparent;
	border-radius: 8px; transition: all 0.3s; text-decoration: none;
}
.sy-pro-article-nav a:hover {
	background-color: #fff; border-color: var(--sy-pro-primary);
	box-shadow: 0 10px 25px rgba(0,0,0,0.05); transform: translateY(-3px);
}
.sy-pro-nav-prev { align-items: flex-start; text-align: left; }
.sy-pro-nav-next { align-items: flex-end; text-align: right; }

.sy-pro-nav-label {
	font-size: 13px; font-weight: 600; color: #9ca3af; text-transform: uppercase;
	margin-bottom: 10px; display: flex; align-items: center; gap: 8px; transition: color 0.3s;
}
.sy-pro-article-nav a:hover .sy-pro-nav-label { color: var(--sy-pro-primary); }
.sy-pro-nav-title { font-size: 16px; font-weight: 600; color: var(--sy-pro-dark); line-height: 1.4;     font-family: var(--rs-ff-title);}


/* =========================================================
   ✨ 4. 产品详情页 (Product Detail) - 顶部信息
   ========================================================= */
.sy-pro-detail-hero { display: grid; grid-template-columns: 500px 1fr; gap: 60px; margin-bottom: 60px; }

/* 左侧：多图轮播 */
.sy-pro-gallery { width: 100%; }
.sy-pro-main-img-wrap { 
    border: 1px solid var(--sy-pro-border); border-radius: 8px; height: 400px; 
    display: flex; align-items: center; justify-content: center; padding: 20px; margin-bottom: 15px; 
}
.sy-pro-main-img-wrap img { max-height: 100%; object-fit: contain; }
/* .sy-pro-thumb-list { display: flex; gap: 15px; }
.sy-pro-thumb { 
    width: 80px; height: 80px; border: 1px solid var(--sy-pro-border); border-radius: 6px; 
    padding: 10px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; 
} */
/* =========================================================
   优化后的缩略图列表 (支持无限多图、横向滑动)
   ========================================================= */
.sy-pro-thumb-list { 
    display: flex; 
    gap: 15px; 
    
    /* 核心1：超出部分允许横向滚动 */
    overflow-x: auto; 
    
    /* 核心2：平滑滚动体验 */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
    
    /* 底部留一点内边距，防止滚动条遮挡边框 */
    padding-bottom: 8px; 
    
    /* 美化 PC 端滚动条 (Firefox) */
    scrollbar-width: thin; 
    scrollbar-color: var(--sy-pro-border) transparent;
}

/* 美化 PC 端滚动条 (Chrome/Safari/Edge) */
.sy-pro-thumb-list::-webkit-scrollbar {
    height: 6px;
}
.sy-pro-thumb-list::-webkit-scrollbar-track {
    background: transparent;
}
.sy-pro-thumb-list::-webkit-scrollbar-thumb {
    background-color: var(--sy-pro-border);
    border-radius: 10px;
}
.sy-pro-thumb-list::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af;
}

.sy-pro-thumb { 
    /* 核心3：防止图片过多时被强行挤压变形 */
    flex-shrink: 0; 
    
    width: 80px; 
    height: 80px; 
    border: 1px solid var(--sy-pro-border); 
    border-radius: 6px; 
    padding: 10px; 
    cursor: pointer; 
    transition: all 0.3s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.sy-pro-thumb img { max-height: 100%; object-fit: contain; }
.sy-pro-thumb.active, .sy-pro-thumb:hover { border-color: var(--sy-pro-primary); }


.sy-pro-thumb img { max-height: 100%; object-fit: contain; }
.sy-pro-thumb.active, .sy-pro-thumb:hover { border-color: var(--sy-pro-primary); }

/* 右侧：产品信息与参数表 */
.sy-pro-info h1 { font-size: 32px; font-weight: 700; color: var(--sy-pro-dark); margin-bottom: 10px; line-height: 1.2; }
.sy-pro-sku-row { display: flex; gap: 20px; font-size: 14px; color: #6b7280; margin-bottom: 20px; }
.sy-pro-sku-row strong { color: var(--sy-pro-dark); }
.sy-pro-short-desc { font-size: 16px; margin-bottom: 30px; line-height: 1.6; }

.sy-pro-spec-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; }
.sy-pro-spec-table th, .sy-pro-spec-table td { padding: 12px 15px; text-align: left; font-size: 14px; border-bottom: 1px solid var(--sy-pro-border); }
.sy-pro-spec-table th { width: 40%; background-color: var(--sy-pro-gray-light); color: var(--sy-pro-dark); font-weight: 600; }
.sy-pro-spec-table td { color: var(--sy-pro-text); }
.sy-pro-actions { display: flex; gap: 20px; }

/* =========================================================
   ✨ 5. 产品详情页 - Tabs 区域
   ========================================================= */
.sy-pro-tabs-section { margin-bottom: 80px; }
.sy-pro-tab-headers { display: flex; border-bottom: 2px solid var(--sy-pro-gray-light); margin-bottom: 30px; }
.sy-pro-tab-btn { 
    padding: 15px 30px; font-size: 18px; font-weight: 600; color: #9ca3af; cursor: pointer; 
    border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.3s; 
}
.sy-pro-tab-btn.active, .sy-pro-tab-btn:hover { color: var(--sy-pro-primary); border-bottom-color: var(--sy-pro-primary); }
.sy-pro-tab-content { display: none; animation: qc-pro-fade 0.4s ease; }
.sy-pro-tab-content .scroll{
	overflow-x: auto;
}
.sy-pro-tab-content.active { display: block; }
@keyframes qc-pro-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.sy-pro-richtext h3 { font-size: 24px; color: var(--sy-pro-dark); margin-bottom: 20px; }
.sy-pro-richtext p { margin-bottom: 15px; }
.sy-pro-richtext ul { list-style: disc; padding-left: 20px; margin-bottom: 20px; }
.sy-pro-richtext li { margin-bottom: 8px; }

/* =========================================================
   ✨ 6. 相关产品轮播 (Related Products Carousel)
   ========================================================= */
.sy-pro-section-title { 
    font-size: 28px; font-weight: 700; color: var(--sy-pro-dark); margin-bottom: 30px; 
    border-bottom: 2px solid var(--sy-pro-gray-light); padding-bottom: 15px; 
}
.sy-pro-related-section { margin-bottom: 80px; position: relative; }
.sy-pro-carousel-viewport { overflow: hidden; padding: 10px 0; }
.sy-pro-carousel-track { display: flex; gap: 30px; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
/* 一屏 4 个，间距 30px。计算公式：(100% - 3*30px) / 4 */
.sy-pro-carousel-item { flex: 0 0 calc(25% - 22.5px); }

.sy-pro-carousel-btn {
    position: absolute; top: 55%; transform: translateY(-50%); width: 44px; height: 44px;
    background: #fff; border: 1px solid var(--sy-pro-border); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    z-index: 10; box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: all 0.3s; color: var(--sy-pro-dark); font-size: 16px;
}
.sy-pro-carousel-btn:hover { background: var(--sy-pro-primary); color: #fff; border-color: var(--sy-pro-primary); }
.sy-pro-carousel-prev { left: -22px; }
.sy-pro-carousel-next { right: -22px; }

/* =========================================================
   ✨ 7. 底部询盘表单 (Inquiry Form)
   ========================================================= */
.sy-pro-inquiry-section { 
    background-color: var(--sy-pro-gray-light); padding: 60px 0; border-radius: 12px; margin-bottom: 80px; 
}
.sy-pro-inquiry-wrapper { 
    max-width: 800px; margin: 0 auto; background: #fff; padding: 50px; 
    border-radius: 8px; box-shadow: 0 15px 35px rgba(0,0,0,0.05); 
}
.sy-pro-inquiry-wrapper h2 { font-size: 28px; font-weight: 700; margin-bottom: 10px; color: var(--sy-pro-dark); text-align: center; }
.sy-pro-inquiry-wrapper p { color: var(--sy-pro-text); margin-bottom: 40px; font-size: 15px; text-align: center; }

.sy-pro-form-row { display: flex; gap: 30px; margin-bottom: 25px; }
.sy-pro-form-group { flex: 1; }
.sy-pro-form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--sy-pro-dark); }
.sy-pro-form-group label span { color: #ef4444; } /* 必填红星 */
.sy-pro-form-control {
    width: 100%; padding: 14px 18px; border: 1px solid var(--sy-pro-border); border-radius: 6px;
    font-family: inherit; font-size: 15px; transition: all 0.3s; outline: none; background-color: #f9fafb;
}
.sy-pro-form-control:focus { border-color: var(--sy-pro-primary); background-color: #fff; box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.1); }
textarea.sy-pro-form-control { resize: vertical; min-height: 120px; }

.sy-pro-submit-btn { width: 100%; padding: 16px; font-size: 16px; margin-top: 10px; }


 /* =========================================================
           ✨ 布局与侧边栏 (手风琴菜单)
   ========================================================= */
.sy-pro-layout { display: flex; gap: 40px; margin-bottom: 0; align-items: flex-start; }

.sy-pro-sidebar {
	width: 280px; flex-shrink: 0;
	border: 1px solid var(--sy-pro-border);
	border-radius: 8px; padding: 20px 0;
	position: sticky; top: 100px;
}
.sy-pro-sidebar-title {
	font-size: 18px; font-weight: 700; color: var(--sy-pro-dark);
	padding: 0 20px 15px; border-bottom: 1px solid var(--sy-pro-border); margin-bottom: 10px;
}
.sy-pro-menu-item { border-bottom: 1px solid var(--sy-pro-gray-light); }
.sy-pro-menu-item:last-child { border-bottom: none; }

.sy-pro-menu-header {
	padding: 15px 20px; display: flex; justify-content: space-between; align-items: center;
	cursor: pointer; font-weight: 600; color: var(--sy-pro-dark); transition: color 0.3s;
}
.sy-pro-menu-header:hover, .sy-pro-menu-item.active > .sy-pro-menu-header,
.sy-pro-menu-header:hover>a, .sy-pro-menu-item.active > .sy-pro-menu-header>a{ color: var(--sy-pro-primary); }
.sy-pro-menu-header i { font-size: 12px; transition: transform 0.3s; }
.sy-pro-menu-item.active > .sy-pro-menu-header i { transform: rotate(180deg); }

/* 核心：二级菜单的隐藏与过渡 */
.sy-pro-submenu {
	max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
	background-color: var(--sy-pro-gray-light);
}
.sy-pro-submenu li a {
	display: block; padding: 10px 20px 10px 40px; font-size: 14px; color: var(--sy-pro-text); transition: all 0.3s;
}
.sy-pro-submenu li a:hover { color: var(--sy-pro-primary); background-color: #e5e7eb; }

/* =========================================================
   ✨ 右侧产品网格
   ========================================================= */
.sy-pro-main { flex-grow: 1; }
.sy-pro-toolbar {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px solid var(--sy-pro-border);
}
.sy-pro-toolbar-title { font-size: 24px; font-weight: 700; color: var(--sy-pro-dark); }
.sy-pro-sort select {
	padding: 8px 15px; border: 1px solid var(--sy-pro-border); border-radius: 4px;
	font-family: inherit; font-size: 14px; outline: none; cursor: pointer;
}

.sy-pro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

.sy-pro-card {
	border: 1px solid var(--sy-pro-border); border-radius: 8px; overflow: hidden;
	transition: all 0.3s; display: flex; flex-direction: column; background: #fff; height: 100%;
}
.sy-pro-card:hover { border-color: var(--sy-pro-primary); box-shadow: 0 10px 25px rgba(0,0,0,0.05); transform: translateY(-5px); }
.sy-pro-card-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.sy-pro-card-sku { font-size: 12px; color: #9ca3af; margin-bottom: 5px; }
.sy-pro-card-title { font-size: 16px; font-weight: 600; color: var(--sy-pro-dark); margin-bottom: 10px; line-height: 1.4; }
.sy-pro-card-desc { font-size: 13px; color: var(--sy-pro-text); margin-bottom: 20px; flex-grow: 1; }
.sy-pro-card-btn { text-align: center; padding: 10px; border: 1px solid var(--sy-pro-primary); color: var(--sy-pro-primary); border-radius: 4px; font-size: 14px; font-weight: 600; transition: all 0.3s; }
.sy-pro-card:hover .sy-pro-card-btn { background: var(--sy-pro-primary); color: #fff; }
.sy-pro-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 24px; font-size: 15px; font-weight: 600; border-radius: 4px;
    cursor: pointer; transition: all 0.3s; border: 1px solid transparent;
}
.sy-pro-btn-primary { background-color: var(--sy-pro-primary); color: #fff; }
.sy-pro-btn-primary:hover { background-color: var(--sy-pro-primary-hover); color: #fff;}
.sy-pro-btn-outline { background-color: transparent; color: var(--sy-pro-dark); border-color: var(--sy-pro-dark); }
.sy-pro-btn-outline:hover { background-color: var(--sy-pro-dark); color: #fff; }


/* =========================================================
   ✨ 工业风表格 (直接针对 table 标签，无需加类名)
   ========================================================= */
/* 限定在产品信息区和富文本区内生效，防止污染全局布局 */
.sy-pro-info table, 
.sy-pro-richtext table { 
    width: 100%; 
    border-collapse: separate; /* 必须使用 separate 才能支持外边框圆角 */
    border-spacing: 0;
    margin-bottom: 40px; 
    border: 1px solid var(--sy-pro-border); 
    /* border-radius: 8px; */
    overflow: hidden; 
}

/* 单元格通用样式 */
.sy-pro-info table th, 
.sy-pro-info table td,
.sy-pro-richtext table th,
.sy-pro-richtext table td { 
    padding: 14px 20px !important; 
    text-align: left; 
    font-size: 14px !important; 
    border: 1px solid var(--sy-pro-border) !important; 
    transition: background-color 0.3s;
}

.sy-pro-info .scroll,.sy-pro-richtext .scroll{overflow-x: auto;}

.sy-pro-richtext table tbody tr:nth-child(2n),.sy-pro-richtext table tbody tr:nth-child(2n) td{
	background-color: #F8FAFC;
}

/* 移除最后一行的底部边框，保持圆角整洁 */
.sy-pro-info table tr:last-child th,
.sy-pro-info table tr:last-child td,
.sy-pro-richtext table tr:last-child th,
.sy-pro-richtext table tr:last-child td {
    border-bottom: none;
}

/* 左侧表头 (参数名) */
.sy-pro-info table th,
.sy-pro-richtext table th { 
    width: 35%; 
    background-color: #F8FAFC; 
    color: var(--sy-pro-dark); 
    font-weight: 600; 
    border-right: 1px solid var(--sy-pro-border); /* 参数名与参数值之间的竖线 */
}

/* 右侧数值基础背景 */
.sy-pro-info table td,
.sy-pro-richtext table td { 
    color: var(--sy-pro-text); 
    background-color: #ffffff;
}

/* 斑马线交替背景色 (提升长表格阅读性) */
/* .sy-pro-info table tr:nth-child(even) td,
.sy-pro-richtext table tr:nth-child(even) td {
    background-color: #fafafa;
} */

/* 鼠标悬停当前行高亮 (品牌绿微光) */
.sy-pro-info table tr:hover td,
.sy-pro-richtext table tr:hover td {
    background-color: #F8FAFC; 
    color: var(--sy-pro-dark);
}

.rs-header-right .rs-header-btn{
	border-radius: 30px;
	overflow: hidden;
}

.rs-about-fourteen .rs-about-title{
	opacity: 0;
}


/* =========================================================
   ✨ 响应式自适应 (Responsive Design)
   ========================================================= */

/* ---------------------------------------------------------
   📱 平板端 (Tablet, < 992px)
   适配 iPad 等中等屏幕，将左右分栏改为上下堆叠，3列改2列
--------------------------------------------------------- */
@media (max-width: 991px) {
	
	.sy-title-h1 { font-size: 40px; }
	.sy-title-h2,.sy-detail-con h2{ font-size: 32px; }
	.sy-section-wrapper { padding: 60px 0; }
	.sy-solution-content, .sy-service-card { padding: 30px; }
	.sy-detail-card { padding: 30px; }
	.sy-contact-form-box, .sy-contact-info-box { padding: 40px; }
	
	.sy-mobile-menu { position: absolute; top: 80px; left: 0; width: 100%; background-color: #ffffff; border-top: 1px solid var(--fu-border); box-shadow: 0 10px 15px rgba(0,0,0,0.05); padding: 20px; z-index: 999; }
	.sy-mobile-menu a { display: block; padding: 16px 20px; font-size: 16px; font-weight: 500; color: var(--fu-text-main); border-bottom: 1px solid var(--fu-border); }
	.sy-mobile-menu a.sy-active { color: var(--fu-primary); background-color: #f9fafb; }
	.sy-mobile-menu .sy-btn { width: 100%; margin-top: 24px; }
    /* --- 全局与通用 --- */
    .sy-pro-layout,
    .sy-pro-article-layout {
        flex-direction: column;
        gap: 40px;
    }

    /* --- 产品列表页 (Product List) --- */
    .sy-pro-sidebar {
        width: 100%;
        position: static; /* 取消吸顶，防止遮挡内容 */
        margin-bottom: 20px;
    }
    .sy-pro-grid {
        grid-template-columns: repeat(2, 1fr); /* 3列变2列 */
    }

    /* --- 产品详情页 (Product Detail) --- */
    .sy-pro-detail-hero {
        grid-template-columns: 1fr; /* 左右图文变上下堆叠 */
        gap: 40px;
    }
    .sy-pro-main-img-wrap {
        height: auto;
        aspect-ratio: 4 / 3; /* 保持图片比例 */
    }

    /* --- 新闻列表页 (News List) --- */
    .sy-pro-news-grid {
        grid-template-columns: repeat(2, 1fr); /* 3列变2列 */
    }

    /* --- 新闻详情页 (News Detail) --- */
    .sy-pro-article-sidebar {
        width: 100%;
        position: static; /* 取消吸顶 */
    }
	
}


/* ---------------------------------------------------------
   📱 手机端 (Mobile, < 768px)
   适配手机屏幕，缩小字体、间距，多列改单列
--------------------------------------------------------- */
@media (max-width: 767px) {
	.sy-title-h1 { font-size: 32px; }
	.sy-title-h2,.sy-detail-con h2{ font-size: 28px; }
	.sy-title-h3,.sy-detail-con h3{ font-size: 22px; }
	
	.sy-section-wrapper { padding: 40px 0; }
	.sy-section-header { margin-bottom: 40px; }
	.sy-page-banner { padding: 60px 0; }
	
	.sy-solution-content, .sy-service-card { padding: 24px; }
	.sy-detail-card { padding: 20px; }
	.sy-contact-form-box, .sy-contact-info-box { padding: 30px 20px; }
	.sy-widget { padding: 24px; }
	
	.sy-detail-img { margin-bottom: 24px; }
	.sy-mb-40, .sy-mb-60 { margin-bottom: 30px; }
	
	.sy-faq-btn { padding: 20px; font-size: 18px; }
	.sy-faq-content { padding: 0 20px 20px 20px; }
	
	.sy-download-table th, .sy-download-table td { padding: 12px 16px; font-size: 14px; }
	.sy-hide-on-mobile { display: none !important; }
	
    /* --- 全局与通用 --- */
    .sy-pro-breadcrumb {
        margin-bottom: 20px;
        padding: 15px 0;
        font-size: 13px;
    }
    .sy-pro-page-title {
        font-size: 26px;
        margin-bottom: 20px;
    }

    /* --- 产品列表页 (Product List) --- */
    .sy-pro-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .sy-pro-grid {
        grid-template-columns: 1fr; /* 2列变1列 */
        gap: 20px;
    }
   

    /* --- 产品详情页 (Product Detail) --- */
    .sy-pro-info h1 {
        font-size: 24px;
    }
    .sy-pro-sku-row {
        flex-direction: column;
        gap: 5px;
    }
    .sy-pro-actions {
        flex-direction: column;
        gap: 15px;
    }
    .sy-pro-actions .sy-pro-btn {
        width: 100%; /* 按钮占满全宽 */
    }
    .sy-pro-thumb {
        width: 60px;
        height: 60px;
        padding: 5px;
    }
    /* Tabs 标签在手机端横向滚动防挤压 */
    .sy-pro-tab-headers {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }
    .sy-pro-tab-btn {
        padding: 10px 15px;
        font-size: 14px;
    }
    /* 参数表格缩小内边距 */
    .sy-pro-spec-table th, 
    .sy-pro-spec-table td {
        padding: 10px;
        font-size: 13px;
    }

    /* --- 新闻列表页 (News List) --- */
    .sy-pro-news-grid {
        grid-template-columns: 1fr; /* 2列变1列 */
        gap: 20px;
    }
    .sy-pro-news-img {
        height: 200px;
    }

    /* --- 新闻详情页 (News Detail) --- */
    .sy-pro-article-title {
        font-size: 24px;
    }
    .sy-pro-article-meta {
        flex-wrap: wrap;
        gap: 10px 20px;
    }
    .sy-pro-richtext h2 {
        font-size: 22px;
        margin: 30px 0 15px;
    }
    .sy-pro-richtext h3 {
        font-size: 18px;
    }
    .sy-pro-richtext p {
        font-size: 15px;
    }
}



@media all and (max-width: 768px){
	:root{
		--bs-gutter-y: 2rem !important;
	}
	
	.sy-ab-section,.sy-ab-cta-section{
		padding: 50px 0;
	}
	.sy-ab-trust-section .sy-ab-section-desc{
		margin-bottom: 30px;
	}
	
	.sy-ab-about-text h2{
		font-size: 24px;
	}
	.sy-ab-section-title,.sy-ab-facility-text h3,.sy-ab-oem-text h2,
	.sy-ab-cta-content h2{
		font-size: 24px;
	}
	.sy-ab-section-desc,.sy-ab-oem-text > p{
		font-size: 14px;
		line-height: 1.6;
	}
	.sy-ab-facilities-header{
		margin-bottom: 40px;
	}
	.sy-ab-facility-row{
		gap: 20px;
		margin-bottom: 20px;
	}
	.sy-ab-facility-img{
		order: -1;
	}
	.sy-ab-carousel-container{
		padding: 0 30px;
	}
	
	.sy-ab-partners-header{
		margin-bottom: 30px;
	}
	.sy-ab-cta-box{
		padding: 40px 25px;
	}
	.sy-ab-cta-content{
		margin-bottom: 0;
	}
	
	
	.sy-oem-section-title{
		font-size: 28px;
	}
	.sy-oem-section{
		padding: 50px 0;
	}
	
	.sy-oem-quote-box{
		padding: 40px 30px;
	}
	.sy-oem-cta-section{
		padding-bottom: 60px;
	}
	
	.sy-pro-detail-hero{
		width: 100%;
		display: block;
		margin-bottom: 30px;
	}
	
	.sy-pro-container{padding: 50px 15px;}
	
	.sy-pro-short-desc{
		font-size: 14px;
	}
	.sy-pro-gallery{
		margin-bottom: 20px;
	}
	
	.sy-pro-carousel-item{
		width: 100%;										
		flex: none;
	}
	.sy-pro-carousel-next{
		right: -12px;
	}
	.sy-pro-carousel-prev{
		left: -12px;
	}
	
	.sy-pro-inquiry-section{
		padding: 0;
		margin-bottom: 0;
	}
	
	.sy-pro-inquiry-wrapper{
		padding: 30px 20px;
	}
	.sy-pro-form-row{
		flex-direction: column;
	}
	.sy-pro-form-group{
		width: 100%;
	}
	
	.sy-pro-article-nav{
		flex-direction: column;
	}
	.sy-pro-article-layout{
		margin-bottom: 0;
	}
	
	
	.sy-detail-card p{
		margin-bottom: 1em;
	}
	
	.sy-text-subtitle{
		font-size: 16px;
	}
	.sy-faq-btn{font-size: 16px;}
	.sy-faq-content-inner{
		font-size: 15px;
	}
	
	.sy-pro-news-title{
		font-size: 20px;
	}
	.sy-pro-news-excerpt{
		font-size: 14px;
	}
	
}


[class*=ct-container]>article {
    width: 100%;
    max-width: 100%;
}
.sy-detail-con .wp-block-table thead{
	border-width: 1px;
}


 /* ============== 通用内页 e ============== */


/* 关于我们 s */

 /* =========================================
           CSS Variables & Reset
        ========================================= */
:root {
	--sy-ab-primary: #0056b3;
	--sy-ab-primary-hover: #004494;
	--sy-ab-dark: #0f172a;
	--sy-ab-dark-bg: #111827;
	--sy-ab-text-main: #334155;
	--sy-ab-text-light: #64748b;
	--sy-ab-bg-light: #f8fafc;
	--sy-ab-white: #ffffff;
	--sy-ab-border: #e2e8f0;
	--sy-ab-radius-sm: 8px;
	--sy-ab-radius-md: 16px;
	--sy-ab-radius-lg: 24px;
	--sy-ab-transition: all 0.3s ease;
}


.sy-ab-section {
	color: var(--sy-ab-text-main);
	line-height: 1.5;
	font-size: 16px;
	background-color: var(--sy-ab-white);
	overflow-x: hidden;
}

.sy-ab-section ul { list-style: none; padding-left: 0;}

.sy-ab-section a { text-decoration: none; color: inherit; transition: var(--sy-ab-transition); }

/* =========================================
   Layout & Typography
========================================= */
.sy-ab-container { max-width: 1600px; margin: 0 auto; padding: 0 40px; }
.sy-ab-section { padding: 100px 0; }
.sy-ab-section-light { background-color: var(--sy-ab-bg-light); }

.sy-ab-h1 { font-size: 48px; font-weight: 700; line-height: 1.2; color: var(--sy-ab-white); }
.sy-ab-h2 { font-size: 40px; font-weight: 600; line-height: 1.3; margin-bottom: 16px; color: var(--sy-ab-dark); }
.sy-ab-h3 { font-size: 28px; font-weight: 600; margin-bottom: 16px; color: var(--sy-ab-dark); }
.sy-ab-h4 { font-size: 20px; font-weight: 600; margin-bottom: 8px; color: var(--sy-ab-dark); }
.sy-ab-p { font-size: 16px; color: var(--sy-ab-text-light); margin-bottom: 24px; }
.sy-ab-p-large { font-size: 20px; color: var(--sy-ab-dark); font-weight: 500; margin-bottom: 24px; line-height: 1.5; }

.sy-ab-tag {
	display: inline-block;
	padding: 6px 16px;
	background-color: #e0f2fe;
	color: var(--sy-ab-primary);
	font-size: 14px;
	font-weight: 600;
	border-radius: 50px;
	margin-bottom: 16px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.sy-ab-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 14px 32px; font-size: 16px; font-weight: 500;
	border-radius: 50px; cursor: pointer; transition: var(--sy-ab-transition);
	border: 2px solid transparent;
}
.sy-ab-btn-outline { background-color: transparent; border-color: var(--sy-ab-white); color: var(--sy-ab-white); }
.sy-ab-btn-outline:hover { background-color: var(--sy-ab-white); color: var(--sy-ab-dark); transform: translateY(-2px); }

/* =========================================
   Header & Nav
========================================= */
.sy-ab-header {
	position: absolute; top: 0; left: 0; width: 100%; z-index: 100;
	padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sy-ab-nav { display: flex; justify-content: space-between; align-items: center; }
.sy-ab-logo { font-size: 24px; font-weight: 700; color: var(--sy-ab-white); display: flex; align-items: center; gap: 10px; }
.sy-ab-logo-icon { width: 32px; height: 32px; background-color: var(--sy-ab-primary); border-radius: 4px; }
.sy-ab-menu { display: flex; gap: 40px; }
.sy-ab-menu a { color: var(--sy-ab-white); font-size: 16px; font-weight: 500; opacity: 0.8; }
.sy-ab-menu a:hover { opacity: 1; color: var(--sy-ab-primary); }
.sy-ab-header-btn { background: var(--sy-ab-white); color: var(--sy-ab-dark); padding: 10px 24px; border-radius: 50px; font-weight: 600; }
.sy-ab-header-btn:hover { background: var(--sy-ab-primary); color: var(--sy-ab-white); }


/* =========================================
   Company Intro Section
========================================= */
.sy-ab-intro-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 80px;
	align-items: center;
}
.sy-ab-intro-left .sy-ab-h2 { font-size: 48px; line-height: 1.2; }

.sy-ab-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--sy-ab-border);
}
.sy-ab-stat-num { font-size: 40px; font-weight: 700; color: var(--sy-ab-primary); margin-bottom: 4px; line-height: 1; }
.sy-ab-stat-label { font-size: 14px; color: var(--sy-ab-text-light); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }

/* =========================================
   Shared Layouts & Icons
========================================= */
.sy-ab-section-header { text-align: center; margin-bottom: 60px; }
.sy-ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.sy-ab-image-wrapper img { border-radius: var(--sy-ab-radius-lg); box-shadow: 0 20px 40px rgba(0,0,0,0.1); width: 100%; object-fit: cover; }

.sy-ab-icon-svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sy-ab-list { margin-top: 24px; }
.sy-ab-list li { position: relative; padding-left: 32px; margin-bottom: 16px; font-size: 18px; color: var(--sy-ab-dark); font-weight: 500; }
.sy-ab-list li::before {
	content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px;
	background-color: var(--sy-ab-primary); border-radius: 50%;
}

/* =========================================
   Manufacturing Section
========================================= */
.sy-ab-feature-card {
	display: flex; gap: 20px; background: var(--sy-ab-white); padding: 24px;
	border-radius: var(--sy-ab-radius-md); margin-bottom: 20px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: var(--sy-ab-transition);
}
.sy-ab-feature-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
.sy-ab-feature-icon {
	width: 56px; height: 56px; background: #e0f2fe; color: var(--sy-ab-primary);
	border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* =========================================
   Quality Section
========================================= */
.sy-ab-quality-item { display: flex; gap: 20px; margin-bottom: 32px; }
.sy-ab-quality-icon { color: var(--sy-ab-primary); flex-shrink: 0; margin-top: 4px; }

.sy-ab-quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 600px; }
.sy-ab-quality-img-tall { grid-row: span 2; border-radius: var(--sy-ab-radius-md); overflow: hidden; position: relative; }
.sy-ab-quality-img-small { border-radius: var(--sy-ab-radius-md); overflow: hidden; position: relative; }
.sy-ab-quality-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.sy-ab-quality-grid div:hover img { transform: scale(1.05); }
.sy-ab-img-label { position: absolute; bottom: 20px; left: 20px; color: var(--sy-ab-white); font-weight: 600; font-size: 16px; z-index: 2; }
.sy-ab-quality-grid div::after {
	content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); z-index: 1;
}



/* =========================================
   Partners Marquee (New)
========================================= */
.sy-ab-partners-wrapper { overflow: hidden; padding: 40px 0; border-bottom: 1px solid var(--sy-ab-border); position: relative; }
.sy-ab-partners-track { display: flex; gap: 40px; width: max-content; animation: qc-ab-scroll-partners 20s linear infinite; }
.sy-ab-partners-wrapper:hover .sy-ab-partners-track { animation-play-state: paused; }

.sy-ab-partner-box {
	width: 220px; height: 90px; border: 1px solid var(--sy-ab-border); border-radius: var(--sy-ab-radius-sm);
	display: flex; align-items: center; justify-content: center; color: var(--sy-ab-text-light);
	font-weight: 600; font-size: 16px; transition: var(--sy-ab-transition); background: var(--sy-ab-white);
}
.sy-ab-partner-box:hover { border-color: var(--sy-ab-primary); color: var(--sy-ab-primary); box-shadow: 0 8px 24px rgba(0,86,179,0.08); transform: translateY(-2px); }

@keyframes qc-ab-scroll-partners {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-50% - 20px)); }
}

/* =========================================
   CTA & Footer
========================================= */
.sy-ab-cta-card {
	background: var(--sy-ab-primary);
	background-blend-mode: overlay; border-radius: var(--sy-ab-radius-lg);
	padding: 80px 60px; display: flex; justify-content: space-between; align-items: center; color: var(--sy-ab-white);
}
.sy-ab-cta-card .sy-ab-h2 { color: var(--sy-ab-white); margin-bottom: 16px; }

.sy-ab-footer { background-color: var(--sy-ab-dark-bg); color: var(--sy-ab-white); padding: 80px 0 40px; }
.sy-ab-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
.sy-ab-footer-title { font-size: 16px; font-weight: 600; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 1px; }
.sy-ab-footer-links li { margin-bottom: 12px; }
.sy-ab-footer-links a { color: rgba(255,255,255,0.6); font-size: 14px; }
.sy-ab-footer-links a:hover { color: var(--sy-ab-primary); padding-left: 4px; }
.sy-ab-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.4); }

/* =========================================
   Responsive Design
========================================= */
@media (max-width: 1200px) {
	.sy-ab-intro-grid { grid-template-columns: 1fr; gap: 40px; }
	.sy-ab-intro-left .sy-ab-h2 { font-size: 40px; }
	.sy-ab-cta-card { flex-direction: column; text-align: center; gap: 32px; }
}
@media (max-width: 992px) {
	.sy-ab-split { grid-template-columns: 1fr; gap: 40px; }
	.sy-ab-manufacturing .sy-ab-split { display: flex; flex-direction: column-reverse; }
	.sy-ab-quality-grid { height: auto; grid-template-columns: 1fr; }
	.sy-ab-quality-img-tall { grid-row: auto; height: 300px; }
	.sy-ab-quality-img-small { height: 250px; }
	.sy-ab-footer-grid { grid-template-columns: 1fr 1fr; }
	.sy-ab-menu { display: none; }
}
@media (max-width: 768px) {
	.sy-ab-container { padding: 0 20px; }
	.sy-ab-h1 { font-size: 36px; }
	.sy-ab-intro-grid{gap: 20px;}
	.sy-ab-intro-left .sy-ab-h2{font-size: 24px;margin-bottom: 0;}
	.sy-ab-stat-label{font-size: 12px;}
	/* .sy-ab-stats-grid { grid-template-columns: 1fr; } */
	.sy-ab-footer-grid { grid-template-columns: 1fr; }
	.sy-ab-footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
	.sy-ab-certs-wrapper::before, .sy-ab-certs-wrapper::after { width: 50px; }
}

/* =========================================
   Timeline Section (发展历程)
========================================= */
.sy-ab-timeline-section {
	position: relative;
    background-color: var(--sy-ab-dark-bg); /* 使用深色背景 */
    color: var(--sy-ab-white);
    text-align: center;
	background: url('/wp-content/uploads/2026/05/timeline-bg.webp') no-repeat center/cover;
}

.sy-ab-timeline-section .sy-ab-container{
	position: relative;
	z-index: 2;
}

.sy-ab-timeline-section:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgb(17,24,39,.85);
	z-index: 1;
}

.sy-ab-timeline-header {
    margin-bottom: 60px;
}

.sy-ab-timeline-header .sy-ab-h2 {
    color: var(--sy-ab-white); /* 覆盖默认的深色标题 */
}

.sy-ab-timeline-header .sy-ab-p {
    color: rgba(255, 255, 255, 0.7);
}

.sy-ab-timeline-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 80px;
    max-width: 1000px;
    margin-inline: auto;
}

/* 贯穿的横线 */
.sy-ab-timeline-container::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.sy-ab-timeline-item {
    position: relative;
    z-index: 2;
    /* width: 30%; */
}

/* 节点圆圈 */
.sy-ab-timeline-dot {
    width: 48px;
    height: 48px;
    /* background: var(--sy-ab-dark-bg); */
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--sy-ab-transition);
}

/* 当前高亮状态的节点 */
.sy-ab-timeline-item.active .sy-ab-timeline-dot {
    border-color: var(--sy-ab-primary);
}

/* 节点内部的实心圆 */
.sy-ab-timeline-dot::after {
    content: '';
    width: 16px;
    height: 16px;
    background: var(--sy-ab-primary);
    border-radius: 50%;
    opacity: 0;
    transition: var(--sy-ab-transition);
}

.sy-ab-timeline-item.active .sy-ab-timeline-dot::after {
    opacity: 1;
}

.sy-ab-timeline-year {
    font-size: 24px;
    font-weight: 700;
    color: var(--sy-ab-primary);
    margin-bottom: 8px;
}

.sy-ab-timeline-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--sy-ab-white);
}

.sy-ab-timeline-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* 响应式适配：平板和手机端改为垂直排列 */
@media (max-width: 992px) {
    .sy-ab-timeline-container {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    .sy-ab-timeline-container::before {
        display: none; /* 移动端隐藏横线 */
    }
    .sy-ab-timeline-item {
        width: 100%;
        max-width: 300px;
    }
	
	.sy-ab-section{
		padding: 60px 0;
	}
	.sy-ab-h2{
		font-size: 24px;
	}
	
	.sy-ab-stat-num{
		font-size: 32px;
	}
}

:root {
   --sy-primary: #006DB8;
    --sy-primary-dark: #006DB8;
    --sy-text-main: #333333;
    --sy-text-light: #666666;
    --sy-border: #e5e7eb;
    --sy-bg-light: #f8f9fa;
}


/* 关于我们 e */



/* Global Variables & Reset */
:root {
    --sy-ab-primary-blue: #00A1E9;
    --sy-ab-light-blue: #00bfff;
    --sy-ab-dark-blue: #0b2239;
    --sy-ab-darker-blue: #061626;
    --sy-ab-red: #e60012;
    --sy-ab-text-dark: #333333;
    --sy-ab-text-gray: #666666;
    --sy-ab-text-light: #ffffff;
    --sy-ab-bg-light: #f4f6f9;
    --sy-ab-bg-white: #ffffff;
    --sy-ab-border-color: #e0e0e0;
    --sy-ab-transition: all 0.3s ease;
}

.sy-ab-section {
    font-family: var(--sy-ab-font-main);
    color: var(--sy-ab-text-gray);
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--sy-ab-bg-white);
    overflow-x: hidden;
}

.sy-ab-section img {
    max-width: 100%;
    height: auto;
    display: block;
}

.sy-ab-section a {
    text-decoration: none;
    color: inherit;
    transition: var(--sy-ab-transition);
}

/* Typography */
.sy-ab-section h1, .sy-ab-section h2, .sy-ab-section h3, .sy-ab-section h4, .sy-ab-section h5,.sy-ab-section h6 {
    color: var(--sy-ab-text-dark);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 15px;
}

.sy-ab-section .sy-ab-title {
    font-size: 40px;
    margin-bottom: 20px;
}

.sy-ab-section .sy-ab-subtitle {
    font-size: 18px;
    color: var(--sy-ab-primary-blue);
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.sy-ab-text-light-blue { color: var(--sy-ab-light-blue); }
.sy-ab-text-white { color: var(--sy-ab-text-light) !important; }

/* Layout & Containers */
.sy-ab-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px;
}

.sy-ab-section {
    padding: 80px 0;
}

.sy-ab-bg-light { background-color: var(--sy-ab-bg-light); }
.sy-ab-bg-dark { background-color: var(--sy-ab-dark-blue); color: var(--sy-ab-text-light); }
.sy-ab-bg-dark h2, .sy-ab-bg-dark h3, .sy-ab-bg-dark h4 { color: var(--sy-ab-text-light); }
.sy-ab-bg-dark-blue { background-color: #083050; color: var(--sy-ab-text-light); }
.sy-ab-bg-dark-blue h2, .sy-ab-bg-dark-blue h4 { color: var(--sy-ab-text-light); }

.sy-ab-text-center { text-align: center; }
.sy-ab-desc-center { max-width: 800px; margin: 0 auto 40px; }

/* Buttons */
.sy-ab-btn {
    display: inline-block;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.sy-ab-btn-primary {
    background-color: var(--sy-ab-red);
    color: var(--sy-ab-text-light);
    border: 2px solid var(--sy-ab-red);
}
.sy-ab-btn-primary:hover { background-color: #cc0000; border-color: #cc0000; }

.sy-ab-btn-primary-light {
    background-color: var(--sy-ab-primary-blue);
    color: var(--sy-ab-text-light);
}
.sy-ab-btn-primary-light:hover { background-color: #0066cc; }

.sy-ab-btn-danger {
    background-color: var(--sy-ab-red);
    color: var(--sy-ab-text-light);
}
.sy-ab-btn-danger:hover { background-color: #cc0000; }

.sy-ab-btn-outline {
    background-color: transparent;
    color: var(--sy-ab-text-light);
    border: 2px solid var(--sy-ab-text-light);
}
.sy-ab-btn-outline:hover { background-color: var(--sy-ab-text-light); color: var(--sy-ab-text-dark); }

.sy-ab-btn-outline-dark {
    background-color: transparent;
    color: var(--sy-ab-text-dark);
    border: 1px solid var(--sy-ab-text-dark);
}
.sy-ab-btn-outline-dark:hover { background-color: var(--sy-ab-text-dark); color: var(--sy-ab-text-light); }

.sy-ab-link {
    color: var(--sy-ab-red);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
}
.sy-ab-link:hover { color: #cc0000; text-decoration: underline; }

/* Hero Section */


/* Intro Section */
.sy-ab-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.sy-ab-intro-image img { border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.sy-ab-intro-text p { margin-bottom: 20px; }
.sy-ab-intro-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}
.sy-ab-intro-tags span {
    background-color: #e6f2ff;
    color: var(--sy-ab-dark-blue);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

/* Key Numbers */
.sy-ab-number{
	background: url('/wp-content/uploads/2026/05/ab-number-bg.webp') no-repeat center/cover;
}
.sy-ab-numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.sy-ab-number-card {
    /* background: var(--sy-ab-bg-white); */
    /* padding: 40px 20px; */
    text-align: center;
    /* border-radius: 8px; */
    /* box-shadow: 0 5px 20px rgba(0,0,0,0.05); */
    /* border-top: 4px solid var(--sy-ab-primary-blue); */
    transition: var(--sy-ab-transition);
}
.sy-ab-number-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.sy-ab-number-card h3 { font-size: 48px; color: #fff; margin-bottom: 10px; }
.sy-ab-number-card p{margin-bottom: 0;line-height: 1.5;}
/* Timeline */
.sy-ab-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.sy-ab-timeline::before {
    content: '';
    position: absolute;
    left: 120px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--sy-ab-border-color);
}
.sy-ab-timeline-item {
    display: flex;
    margin-bottom: 40px;
    position: relative;
}
.sy-ab-timeline-year {
    width: 120px;
    font-size: 24px;
    font-weight: 700;
    color: var(--sy-ab-primary-blue);
    padding-right: 30px;
    text-align: right;
    position: relative;
}
.sy-ab-timeline-year::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 8px;
    width: 14px;
    height: 14px;
    background-color: var(--sy-ab-primary-blue);
    border-radius: 50%;
    border: 3px solid var(--sy-ab-bg-white);
}
.sy-ab-timeline-content {
    flex: 1;
    padding-left: 40px;
}
.sy-ab-timeline-content h4 { font-size: 20px; margin-bottom: 10px; }

/* Manufacturing */
.sy-ab-mfg-image img { width: 100%; border-radius: 8px; margin-bottom: 40px; }
.sy-ab-mfg-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.sy-ab-mfg-steps::before {
    content: '';
    position: absolute;
    top: 25px;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: var(--sy-ab-border-color);
    z-index: 1;
}
.sy-ab-step {
    text-align: center;
    z-index: 2;
    flex: 1;
}
.sy-ab-step-num {
    width: 50px;
    height: 50px;
    background-color: #e6f2ff;
    color: var(--sy-ab-primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 15px;
    border: 4px solid var(--sy-ab-bg-light);
}
.sy-ab-step p { font-weight: 500; color: var(--sy-ab-text-dark); }

/* Quality Control */
.sy-ab-qc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.sy-ab-qc-text p { margin-bottom: 20px; }
.sy-ab-qc-lists {
    display: flex;
    gap: 40px;
    margin-top: 30px;
}
.sy-ab-qc-lists ul { list-style: none; }
.sy-ab-qc-lists li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}
.sy-ab-qc-lists li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--sy-ab-primary-blue);
    font-weight: bold;
}
.sy-ab-qc-images {
    display: flex;
    gap: 20px;
}
.sy-ab-qc-images img { border-radius: 8px; object-fit: cover; }
.sy-ab-qc-images img:first-child { width: 60%; height: 500px; }
.sy-ab-qc-images img:last-child { width: 40%; height: 400px; margin-top: 50px; }

/* Innovation */
.sy-ab-innovation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.sy-ab-innovation-image img { border-radius: 8px; }
.sy-ab-innovation-text p { color: #b0c4de; margin-bottom: 20px; }
.sy-ab-feature-list { margin-top: 30px; }
.sy-ab-feature-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}
.sy-ab-feature-icon {
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.sy-ab-feature-icon i{color: #fff;}
.sy-ab-feature-item h4 { margin-bottom: 5px;font-size: 20px;}
.sy-ab-feature-item p { margin-bottom: 0; font-size: 14px; }

/* Certificates */
/* .sy-ab-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
}
.sy-ab-tab {
    padding: 10px 25px;
    border: 1px solid var(--sy-ab-border-color);
    background: transparent;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--sy-ab-font-main);
    font-size: 15px;
    transition: var(--sy-ab-transition);
}
.sy-ab-tab.active, .sy-ab-tab:hover {
    background-color: var(--sy-ab-dark-blue);
    color: var(--sy-ab-text-light);
    border-color: var(--sy-ab-dark-blue);
}
.sy-ab-cert-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.sy-ab-cert-card {
    background: var(--sy-ab-bg-white);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.sy-ab-cert-card img { margin: 0 auto 15px; border: 1px solid #eee; }
.sy-ab-cert-card p { font-weight: 600; color: var(--sy-ab-text-dark); }
.sy-ab-cert-card span { font-weight: 400; font-size: 14px; color: var(--sy-ab-text-gray); */}

/* =========================================
   新增：轮播 (Carousel) 通用基础样式 
   ========================================= */
.sy-ab-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.sy-ab-carousel-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 20px; /* 为下方阴影留出空间 */
    /* 隐藏滚动条 */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.sy-ab-carousel-track::-webkit-scrollbar {
    display: none;
}

.sy-ab-carousel-item {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* 轮播控制按钮样式 */
.sy-ab-carousel-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
	justify-content: center;
}
.sy-ab-flex-center {
    justify-content: center;
}
.sy-ab-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--sy-ab-border-color);
    background-color: var(--sy-ab-bg-white);
    color: var(--sy-ab-text-dark);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--sy-ab-transition);
}
.sy-ab-nav-btn:hover {
    background-color: var(--sy-ab-primary-blue);
    color: var(--sy-ab-text-light);
    border-color: var(--sy-ab-primary-blue);
}

/* =========================================
   Certificates 证书区块 (轮播卡片宽度控制)
   ========================================= */
.sy-ab-cert-card.sy-ab-carousel-item {
    /* 默认 PC 端显示 4 个 */
    flex: 0 0 calc(25% - 22.5px);
    /* 继承原有的卡片样式 */
    background: var(--sy-ab-bg-white);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.sy-ab-cert-card.sy-ab-carousel-item p{
	display: block;
	margin: 0;
	padding: 10px;
}

/* =========================================
   Products 产品区块 (轮播卡片宽度及头部控制)
   ========================================= */
.sy-ab-product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}
.sy-ab-product-header-text {
    max-width: 800px;
}
.sy-ab-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

.sy-ab-product-card.sy-ab-carousel-item {
    /* 默认 PC 端显示 3 个 */
    flex: 0 0 calc(33.333% - 20px);
    /* 继承原有的卡片样式 */
    background: var(--sy-ab-bg-white);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: var(--sy-ab-transition);
}
.sy-ab-product-card.sy-ab-carousel-item h4{margin-top: 10px;}
.sy-ab-product-card.sy-ab-carousel-item a{margin-top: 0;}
/* =========================================
   响应式适配 (针对轮播卡片数量的调整)
   ========================================= */
@media (max-width: 1200px) {
    .sy-ab-cert-card.sy-ab-carousel-item {
        flex: 0 0 calc(33.333% - 20px); /* 平板显示 3 个证书 */
    }
    .sy-ab-product-card.sy-ab-carousel-item {
        flex: 0 0 calc(50% - 15px); /* 平板显示 2 个产品 */
    }
}

@media (max-width: 992px) {
    .sy-ab-product-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .sy-ab-header-actions {
        align-items: flex-start;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }
    .sy-ab-cert-card.sy-ab-carousel-item {
        flex: 0 0 calc(50% - 15px); /* 小平板显示 2 个证书 */
    }
}

@media (max-width: 768px) {
    .sy-ab-cert-card.sy-ab-carousel-item,
    .sy-ab-product-card.sy-ab-carousel-item {
        flex: 0 0 100%; /* 手机端统一显示 1 个 */
    }
}

/* OEM/ODM */
.sy-ab-oem-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 50px;
    align-items: center;
}
.sy-ab-oem-text p { margin-bottom: 20px; }
.sy-ab-oem-text .sy-ab-btn { margin-top: 20px; color: #fff;}
.sy-ab-oem-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.sy-ab-oem-card {
    background: var(--sy-ab-bg-light);
    padding: 30px;
    border-radius: 8px;
    transition: var(--sy-ab-transition);
}
.sy-ab-oem-card:hover { background: var(--sy-ab-bg-white); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.sy-ab-oem-icon {
    width: 40px;
    height: 40px;
    background-color: #e6f2ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 20px;
}

.sy-ab-oem-icon i{
	color: var(--sy-ab-primary-blue);
}


/* Factory */
.sy-ab-factory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 250px);
    gap: 20px;
}
.sy-ab-factory-img {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.sy-ab-factory-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--sy-ab-transition); }
.sy-ab-factory-img:hover img { transform: scale(1.05); }
.sy-ab-factory-img.large { grid-column: span 2; grid-row: span 2; }
.sy-ab-img-label {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 5px 15px;
    border-radius: 4px;
    font-size: 14px;
}

/* Values */
.sy-ab-values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}
.sy-ab-value-card {
    background-color: var(--sy-ab-darker-blue);
    padding: 40px 30px;
    border-radius: 8px;
    border-top: 4px solid transparent;
    transition: var(--sy-ab-transition);
}
.sy-ab-value-card:nth-child(1){
	background: url('/wp-content/uploads/2026/05/value-card-01.webp') no-repeat center/cover;
}
.sy-ab-value-card:nth-child(2){
	background: url('/wp-content/uploads/2026/05/value-card-02.webp') no-repeat center/cover;
}
.sy-ab-value-card:nth-child(3){
	background: url('/wp-content/uploads/2026/05/value-card-03.webp') no-repeat center/cover;
}
.sy-ab-value-card:nth-child(4){
	background: url('/wp-content/uploads/2026/05/value-card-04.webp') no-repeat center/cover;
}
.sy-ab-value-card:hover { 
	/* border-top-color: var(--sy-ab-light-blue); */
	transform: translateY(-5px);
}
.sy-ab-value-num {
    font-size: 30px;
    color: var(--sy-ab-light-blue);
    font-weight: 700;
    margin-bottom: 20px;
    opacity: 0.5;
}
.sy-ab-value-card p {
	/* color: #b0c4de; */
	color: rgb(255,255,255,.85);
	font-size: 15px;
}

/* People */
.sy-ab-people-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.sy-ab-people-text p { margin-bottom: 30px; }
.sy-ab-people-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    list-style: none;
}
.sy-ab-people-list li {
    position: relative;
    padding-left: 20px;
    font-weight: 500;
    color: var(--sy-ab-text-dark);
}
.sy-ab-people-list li::before {
    content: '•';
    color: var(--sy-ab-red);
    position: absolute;
    left: 0;
    font-size: 20px;
    line-height: 1;
}
.sy-ab-people-image img { border-radius: 8px; }

/* Trusted */
.sy-ab-trusted-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}
.sy-ab-trusted-item {
    background-color: rgba(255,255,255,0.05);
    padding: 40px 20px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: var(--sy-ab-transition);
}
.sy-ab-trusted-item:hover { background-color: rgba(255,255,255,0.1); }
.sy-ab-trusted-icon {
    font-size: 40px;
    margin-bottom: 15px;
}
.sy-ab-trusted-item p { font-weight: 500; }

/* News */
.sy-ab-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.sy-ab-news-card {
    background: var(--sy-ab-bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: var(--sy-ab-transition);
}
.sy-ab-news-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.sy-ab-news-img-wrap { position: relative; }
.sy-ab-news-img-wrap img { width: 100%; height: 220px; object-fit: cover; }
.sy-ab-news-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--sy-ab-primary-blue);
    color: #fff;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    font-weight: 500;
}
.sy-ab-news-content { padding: 25px; }
.sy-ab-news-date { font-size: 14px; color: #999; margin-bottom: 10px; }
.sy-ab-news-content h4 { font-size: 18px; margin-bottom: 15px; height: 50px; overflow: hidden; }

/* CTA */
.sy-ab-cta {
    background: url('/wp-content/uploads/2026/05/sy-ab-oem-cta-bg.webp') no-repeat center/cover;
    position: relative;
    padding: 100px 0 120px;
}
/* .sy-ab-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, #0088ff 0%, rgba(0,136,255,0.0) 100%);
} */
.sy-ab-cta-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}
.sy-ab-cta-text { max-width: 800px; color: var(--sy-ab-text-light); }
.sy-ab-cta-text h2 { color: var(--sy-ab-text-light); font-size: 44px; margin-bottom: 20px; }
.sy-ab-cta-text p { font-size: 18px; margin-bottom: 30px; opacity: 0.9; }
.sy-ab-cta-buttons { display: flex; gap: 20px; }

/* Responsive Design */
@media (max-width: 1200px) {
    .sy-ab-title { font-size: 34px; }
    .sy-ab-hero-title { font-size: 44px; }
    .sy-ab-numbers-grid, .sy-ab-cert-grid, .sy-ab-values-grid, .sy-ab-trusted-grid { grid-template-columns: repeat(2, 1fr); }
    .sy-ab-factory-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .sy-ab-factory-img.large { grid-column: span 2; grid-row: span 1; height: 300px; }
}

@media (max-width: 992px) {
    .sy-ab-intro-grid, .sy-ab-qc-grid, .sy-ab-innovation-grid, .sy-ab-oem-grid, .sy-ab-people-grid { grid-template-columns: 1fr; gap: 40px; }
    .sy-ab-product-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .sy-ab-product-grid, .sy-ab-news-grid { grid-template-columns: repeat(2, 1fr); }
    .sy-ab-mfg-steps { flex-wrap: wrap; gap: 20px; }
    .sy-ab-mfg-steps::before { display: none; }
    .sy-ab-step { flex: 0 0 45%; }
    .sy-ab-qc-images img:first-child, .sy-ab-qc-images img:last-child { width: 50%; height: auto; margin-top: 0; }
}

@media (max-width: 768px) {
    .sy-ab-hero { padding: 100px 0; }
    .sy-ab-hero-title { font-size: 36px; }
    .sy-ab-title { font-size: 28px; }
    .sy-ab-section { padding: 50px 0; }
    .sy-ab-numbers-grid, .sy-ab-cert-grid, .sy-ab-values-grid, .sy-ab-trusted-grid, .sy-ab-product-grid, .sy-ab-news-grid, .sy-ab-oem-features { grid-template-columns: 1fr; }
    .sy-ab-timeline::before { left: 20px; }
    .sy-ab-timeline-year { width: auto; padding-right: 0; text-align: left; padding-left: 40px; margin-bottom: 10px; }
    .sy-ab-timeline-year::after { left: 13px; right: auto; }
    .sy-ab-timeline-item { flex-direction: column; }
    .sy-ab-timeline-content { padding-left: 40px; }
    .sy-ab-step { flex: 0 0 100%; }
    .sy-ab-tabs { flex-wrap: wrap; }
    .sy-ab-factory-grid { grid-template-columns: 1fr; }
    .sy-ab-factory-img.large { grid-column: span 1; }
    .sy-ab-cta-text h2 { font-size: 32px; }
    .sy-ab-hero-buttons, .sy-ab-cta-buttons { flex-direction: column; }
}

/* OEM s */
/* Base Styles & Variables */
:root {
    --sy-oem-primary: #e60012;
    --sy-oem-primary-hover: #cc0010;
    --sy-oem-dark: #1a1f2b;
    --sy-oem-darker: #11151d;
    --sy-oem-light-bg: #f8f9fa;
    --sy-oem-gray-bg: #f4f7f9;
    --sy-oem-text-main: #333333;
    --sy-oem-text-light: #666666;
    --sy-oem-blue: #00A1E9;
    --sy-oem-white: #ffffff;
    --sy-oem-border: #e2e8f0;
    --sy-oem-container-width: 1360px;
}


.sy-oem-wrapper {
    width: 100%;
    overflow-x: hidden;
	color: var(--sy-oem-text-main);
	line-height: 1.6;
	font-size: 16px;
	background-color: var(--sy-oem-white);
	-webkit-font-smoothing: antialiased;
}
.sy-oem-wrapper h1,.sy-oem-wrapper h2,.sy-oem-wrapper h3,.sy-oem-wrapper h4,.sy-oem-wrapper h5{
	color: inherit;
}
.sy-oem-wrapper ul{
	padding-left: 0;
}
.sy-oem-container {
    max-width: var(--sy-oem-container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.sy-oem-text-center { text-align: center; }
.sy-oem-mt-60 { margin-top: 60px; }

/* Typography */
.sy-oem-title-dark {
    font-size: 42px;
    font-weight: 700;
    color: var(--sy-oem-dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.sy-oem-title-white {
    font-size: 42px;
    font-weight: 700;
    color: var(--sy-oem-white);
    margin-bottom: 16px;
    line-height: 1.2;
}

.sy-oem-subtitle-gray {
    font-size: 16px;
    color: var(--sy-oem-text-light);
    max-width: 800px;
    margin: 0 auto 50px;
}

.sy-oem-subtitle-gray-left {
    font-size: 16px;
    color: var(--sy-oem-text-light);
    max-width: 800px;
    margin-bottom: 50px;
}

.sy-oem-subtitle-blue {
    font-size: 20px;
    color: var(--sy-oem-blue);
    font-weight: 500;
    margin-bottom: 50px;
}

/* Buttons */
.sy-oem-btn {
    display: inline-block;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.sy-oem-btn-primary {
    background-color: var(--sy-oem-primary);
    color: var(--sy-oem-white);
    border: 2px solid var(--sy-oem-primary);
}

.sy-oem-btn-primary:hover {
    background-color: var(--sy-oem-primary-hover);
    border-color: var(--sy-oem-primary-hover);
	color: #fff;
}

.sy-oem-btn-outline {
    background-color: transparent;
    color: var(--sy-oem-white);
    border: 2px solid var(--sy-oem-white);
}

.sy-oem-btn-outline:hover {
    background-color: var(--sy-oem-white);
    color: var(--sy-oem-dark);
}

.sy-oem-btn-white {
    background-color: var(--sy-oem-white);
    color: var(--sy-oem-blue);
    border: 2px solid var(--sy-oem-white);
}

.sy-oem-btn-white:hover {
    background-color: transparent;
    color: var(--sy-oem-white);
}

.sy-oem-btn-full {
    display: block;
    width: 100%;
}

/* Tags */
.sy-oem-tag {
    font-size: 14px;
    font-weight: 600;
    color: var(--sy-oem-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.sy-oem-tag-blue {
    color: var(--sy-oem-blue);
}

/* Hero Section */
.sy-oem-hero {
    background:  url('/wp-content/uploads/2026/05/sy-oem-hero-bg.webp') center/cover no-repeat;
    padding: 140px 0 0 0;
    color: var(--sy-oem-white);
}

.sy-oem-hero-content {
    max-width: 900px;
    padding-bottom: 80px;
}

.sy-oem-hero-content h1,.sy-oem-hero-content h3{
	color: #fff;
}

.sy-oem-breadcrumb {
    font-size: 14px;
    color: var(--sy-oem-blue);
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.sy-oem-hero-title {
    font-size: 54px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
}

.sy-oem-hero-subtitle {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
}

.sy-oem-hero-desc {
    font-size: 16px;
    color: #d1d5db;
    margin-bottom: 16px;
    line-height: 1.8;
    max-width: 800px;
}

.sy-oem-hero-actions {
    display: flex;
    gap: 20px;
    margin: 40px 0 60px;
}

.sy-oem-hero-features {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.sy-oem-feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 500;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 16px 24px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.sy-oem-icon-box {
    width: 24px;
    height: 24px;
    color: var(--sy-oem-blue);
}

/* Products Section */
.sy-oem-products {
    padding: 100px 0;
    background-color: var(--sy-oem-white);
}

.sy-oem-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sy-oem-product-card {
    background: var(--sy-oem-white);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid var(--sy-oem-border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sy-oem-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.sy-oem-card-icon {
    width: 64px;
    height: 64px;
    background: #e6f5fc;
    color: var(--sy-oem-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-bottom: 24px;
}

.sy-oem-card-icon svg { width: 32px; height: 32px; }

.sy-oem-card-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--sy-oem-dark);
    margin-bottom: 16px;
}

.sy-oem-card-desc {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--sy-oem-text-main);
}

.sy-oem-card-subdesc {
    font-size: 14px;
    color: var(--sy-oem-text-light);
}

/* Advantages Section */
.sy-oem-advantages {
    padding: 100px 0;
    background: var(--sy-oem-gray-bg);
}

.sy-oem-adv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.sy-oem-adv-col {
    display: flex;
    flex-direction: column;
}

.sy-oem-adv-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.sy-oem-adv-content {
    position: relative;
    padding-top: 10px;
}

.sy-oem-adv-num {
    font-size: 80px;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1;
    position: absolute;
    top: -30px;
    left: -10px;
    z-index: 0;
}

.sy-oem-adv-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--sy-oem-dark);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.sy-oem-adv-desc {
    font-size: 15px;
    color: var(--sy-oem-text-light);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

/* Scope Section */
.sy-oem-scope {
    padding: 100px 0;
    background: var(--sy-oem-white);
}

.sy-oem-scope-subtitle {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--sy-oem-dark);
}

.sy-oem-scope-content {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.sy-oem-scope-left {
	position: relative;
    flex: 1.6;
    background: var(--sy-oem-dark);
    color: var(--sy-oem-white);
    padding: 60px 40px;
}
.sy-oem-scope-left *{
	position: relative;
	z-index: 3;
}

.sy-oem-scope-left:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: url('/wp-content/uploads/2026/05/sy-oem-scope-left-bg.webp') no-repeat center/cover;
	mix-blend-mode: multiply;
	opacity: 1;
	z-index: 2;
}

.sy-oem-scope-box-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 50px;
	color: #fff;
}

.sy-oem-scope-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
}

.sy-oem-scope-grid .sy-oem-scope-item{
	padding: 16px 20px;
	background-color: rgb(255,255,255,0.09);
	border-radius: 20px;
}

.sy-oem-scope-item h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
	
}

.sy-oem-scope-item p {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.7;
	margin-bottom: 0;
}

.sy-oem-scope-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--sy-oem-blue);
    display: block;
    margin-bottom: 12px;
}

.sy-oem-scope-right {
    flex: 1;
    background: #f8fafc;
    padding: 60px;
    display: flex;
    flex-direction: column;
}

.sy-oem-scope-box-title-dark {
    font-size: 24px;
    font-weight: 600;
    color: var(--sy-oem-dark);
    margin-bottom: 30px;
}

.sy-oem-service-list {
    list-style: none;
    margin-bottom: 40px;
    flex-grow: 1;
}

.sy-oem-service-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--sy-oem-text-main);
}
.sy-oem-service-list li:last-child{
	margin-bottom: 0;
}

.sy-oem-service-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--sy-oem-blue);
    font-weight: bold;
    font-size: 18px;
}

/* Production Section */
.sy-oem-production {
    padding: 120px 0;
    background: var(--sy-oem-darker);
    color: var(--sy-oem-white);
	 background-image:
	    linear-gradient(rgba(3, 15, 28, 0.82), rgba(3, 15, 28, 0.82)),
	    url('/wp-content/uploads/2026/05/sy-oem-production-bg.webp');
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
}

.sy-oem-production-flex {
    display: flex;
    align-items: center;
    gap: 80px;
}

.sy-oem-production-text {
    flex: 1;
}

.sy-oem-production-desc {
    font-size: 16px;
    color: #94a3b8;
    margin-bottom: 30px;
    line-height: 1.8;
}

.sy-oem-production-list {
    list-style: none;
}

.sy-oem-production-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 16px;
    font-size: 15px;
    color: #cbd5e1;
}

.sy-oem-production-list li::before {
    content: '>';
    position: absolute;
    left: 0;
    color: var(--sy-oem-primary);
    font-weight: bold;
}

.sy-oem-production-visual {
    flex: 1;
    position: relative;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.2);
	overflow: hidden;
}

.sy-oem-production-img {
    width: 100%;
    display: block;
}

.sy-oem-qc-box {
 /*   position: absolute;
    bottom: -40px;
    left: -40px; */
    background: var(--sy-oem-white);
    color: var(--sy-oem-text-main);
    padding: 40px;
    /* width: 90%; */
	width: 100%;
}

.sy-oem-qc-box h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--sy-oem-dark);
    margin-bottom: 24px;
}

.sy-oem-qc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.sy-oem-qc-grid ul {
    list-style: none;
}

.sy-oem-qc-grid li {
    font-size: 14px;
    margin-bottom: 14px;
    position: relative;
    padding-left: 24px;
    color: var(--sy-oem-text-main);
}

.sy-oem-qc-grid li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%2300a0e9" stroke-width="2" xmlns="http://www.w3.org/2000/svg"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>') no-repeat center/contain;
}

/* Process Section (Dashed Cards & Semi-floating Circles) */
.sy-oem-process {
    padding: 120px 0;
    background: var(--sy-oem-white);
}

.sy-oem-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 40px;
    margin-top: 100px;
}

.sy-oem-process-item {
    text-align: center;
    position: relative;
    border: 2px dashed var(--sy-oem-border);
    border-radius: 12px;
    padding: 60px 30px 40px;
    background: var(--sy-oem-white);
    transition: border-color 0.3s ease;
}

.sy-oem-process-item:hover {
    border-color: var(--sy-oem-blue);
}

.sy-oem-process-circle {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 90px;
    border: 2px solid var(--sy-oem-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--sy-oem-dark);
    background: var(--sy-oem-white);
    z-index: 2;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.sy-oem-process-item h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--sy-oem-dark);
    margin-bottom: 16px;
}

.sy-oem-process-item p {
    font-size: 15px;
    color: var(--sy-oem-text-light);
    line-height: 1.7;
}

/* Details Section (Cards with Top Images) */
.sy-oem-details {
    padding: 100px 0;
    background: var(--sy-oem-light-bg);
}

.sy-oem-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.sy-oem-details-card {
    background: var(--sy-oem-white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    overflow: hidden;
}

.sy-oem-details-hero-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.sy-oem-details-content-wrap {
    padding: 50px;
}

.sy-oem-details-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.sy-oem-details-icon {
    width: 60px;
    height: 60px;
    background: #e6f5fc;
    color: var(--sy-oem-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.sy-oem-details-icon svg { width: 30px; height: 30px; }

.sy-oem-details-header h3 {
    font-size: 26px;
    font-weight: 600;
    color: var(--sy-oem-dark);
}

.sy-oem-details-header p {
    font-size: 15px;
    color: var(--sy-oem-text-light);
}

.sy-oem-details-intro {
    font-size: 16px;
    color: var(--sy-oem-text-main);
    margin-bottom: 40px;
    line-height: 1.7;
}

.sy-oem-details-list, .sy-oem-details-list-alt {
    list-style: none;
}

.sy-oem-details-list li, .sy-oem-details-list-alt li {
    margin-bottom: 24px;
    padding-left: 20px;
    border-left: 2px solid var(--sy-oem-border);
}

.sy-oem-details-list-alt li {
    border-left-color: var(--sy-oem-blue);
}

.sy-oem-details-list strong, .sy-oem-details-list-alt strong {
    display: block;
    font-size: 18px;
    color: var(--sy-oem-dark);
    margin-bottom: 8px;
}

.sy-oem-details-list p, .sy-oem-details-list-alt p {
    font-size: 15px;
    color: var(--sy-oem-text-light);
}

.sy-oem-details-note {
    background: #fffbeb;
    color: #b45309;
    padding: 20px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 40px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sy-oem-details-note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }

/* Why Choose Section */
.sy-oem-why-choose {
    padding: 120px 0;
    background: var(--sy-oem-dark);
    color: var(--sy-oem-white);
}
.sy-oem-why-choose:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: url('/wp-content/uploads/2026/05/sy-oem-why-choose-bg.webp') no-repeat center/cover;
	opacity: .1;
	z-index: 2;
}
.sy-oem-why-choose .sy-oem-container{
	position: relative;
	z-index: 3;
}
.sy-oem-why-desc {
    font-size: 16px;
    color: #94a3b8;
    max-width: 800px;
    margin: 0 auto 60px;
    line-height: 1.8;
}

.sy-oem-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sy-oem-why-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 40px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sy-oem-why-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.1);
}

.sy-oem-why-icon {
    width: 40px;
    height: 40px;
    color: var(--sy-oem-blue);
    margin-bottom: 24px;
}

.sy-oem-why-icon svg { width: 100%; height: 100%; }

.sy-oem-why-card h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
}

.sy-oem-why-card p {
    font-size: 15px;
    color: #cbd5e1;
    line-height: 1.7;
}

/* FAQ Section (Accordion) */
.sy-oem-faq {
    padding: 100px 0;
    background: var(--sy-oem-light-bg);
}

.sy-oem-faq-list {
    margin: 0 auto;
}

.sy-oem-faq-item {
    background: var(--sy-oem-white);
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--sy-oem-border);
}

.sy-oem-faq-question {
    padding: 24px 30px;
    font-size: 18px;
    font-weight: 600;
    color: var(--sy-oem-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

.sy-oem-faq-question::-webkit-details-marker {
    display: none;
}

.sy-oem-faq-question:hover {
    background: var(--sy-oem-gray-bg);
}

.sy-oem-faq-q-num {
    color: var(--sy-oem-blue);
    margin-right: 12px;
}

.sy-oem-faq-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
}

.sy-oem-faq-icon::before,
.sy-oem-faq-icon::after {
    content: '';
    position: absolute;
    background-color: var(--sy-oem-dark);
    transition: transform 0.3s ease;
}

.sy-oem-faq-icon::before {
    top: 11px; left: 4px; width: 16px; height: 2px;
}

.sy-oem-faq-icon::after {
    top: 4px; left: 11px; width: 2px; height: 16px;
}

.sy-oem-faq-item[open] .sy-oem-faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.sy-oem-faq-answer {
    padding: 0 30px 30px 65px;
    font-size: 16px;
    color: var(--sy-oem-text-light);
    line-height: 1.7;
}

/* CTA Section */
.sy-oem-cta {
    padding: 100px 0;
    background: var(--sy-oem-blue);
    color: var(--sy-oem-white);
	background: url("/wp-content/uploads/2026/05/sy-oem-cta-bg.webp") no-repeat center/cover;
}

.sy-oem-cta-subtitle {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
}

.sy-oem-cta-desc {
    font-size: 16px;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.sy-oem-cta-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Footer */
.sy-oem-footer {
    padding: 30px 0;
    background: var(--sy-oem-darker);
    color: #64748b;
    font-size: 14px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .sy-oem-adv-grid { grid-template-columns: repeat(2, 1fr); }
    .sy-oem-scope-content { flex-direction: column; }
    .sy-oem-production-flex { flex-direction: column; }
    .sy-oem-qc-box { position: relative; bottom: 0; left: 0; width: 100%; margin-top: 30px; }
}

@media (max-width: 992px) {
    .sy-oem-product-grid { grid-template-columns: repeat(2, 1fr); }
    .sy-oem-process-grid { grid-template-columns: repeat(2, 1fr); }
    .sy-oem-details-grid { grid-template-columns: 1fr; }
    .sy-oem-why-grid { grid-template-columns: repeat(2, 1fr); }
    .sy-oem-hero-title { font-size: 42px; }
}

@media (max-width: 768px) {
    .sy-oem-product-grid { grid-template-columns: 1fr; }
    .sy-oem-adv-grid { grid-template-columns: 1fr; }
    .sy-oem-scope-grid { grid-template-columns: 1fr; }
    .sy-oem-process-grid { grid-template-columns: 1fr; }
    .sy-oem-why-grid { grid-template-columns: 1fr; }
    .sy-oem-qc-grid { grid-template-columns: 1fr; }
    
    .sy-oem-hero-actions, .sy-oem-cta-actions { flex-direction: column; }
    .sy-oem-btn { width: 100%; }
    .sy-oem-title-dark, .sy-oem-title-white { font-size: 32px; }
    .sy-oem-hero-title { font-size: 36px; }
    .sy-oem-scope-left, .sy-oem-scope-right { padding: 30px; }
    .sy-oem-details-content-wrap { padding: 30px; }
}

/* OEM e */


.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
	max-width: 100%;
}
.is-layout-constrained>:where(:not(.alignleft):not(.alignright):not(.alignfull)){
	width: 100%;
}

.ct-container-full{
	margin-top: -96px;
}
:is(.is-layout-flow,.is-layout-constrained)>*:where(:not(h1,h2,h3,h4,h5,h6)) {
    margin-block-end: 0;
}


/* =========================================================
   ✨ 右侧悬浮客服组件 (滚动显示 & 自定义图标版)
   ========================================================= */
:root {
    --sy-right-primary: #00A1E9;
    --sy-right-white: #ffffff;
	--sy-right-rgb: 0,161,233;
}
/* ================= 悬浮弹窗通用样式 ================= */
.sy-right-contact-popup {
    position: absolute;
    right: 65px; /* 距离右侧图标的距离 */
    background: var(--sy-right-white);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    /* 初始状态：隐藏 + 向右偏移 */
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none; /* 防止鼠标移入弹窗时发生闪烁 */
	width: max-content;
}

/* 弹窗右侧的小三角箭头 */
.sy-right-contact-popup::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent var(--sy-right-white);
}

/* 鼠标悬浮图标时，弹窗平滑向左滑出 */
.sy-right-contact-item:hover .sy-right-contact-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* ================= 弹窗内容差异化 ================= */
/* 1. 二维码类型弹窗 (WhatsApp / WeChat) */
.sy-right-popup-qr {
    gap: 10px;
}
.sy-right-popup-qr img {
    width: 120px;
    height: 120px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    object-fit: cover;
}
.sy-right-popup-qr span {
    font-size: 14px;
    color: var(--sy-right-dark);
    font-weight: 600;
}

/* 2. 纯文本类型弹窗 (Phone / Email) */
.sy-right-popup-text {
    flex-direction: row;
    font-size: 16px;
    font-weight: 600;
    color: var(--sy-right-primary);
}
.sy-right-floating-contact {
    position: fixed;
    right: 20px;
    top: 50%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    /* 👇 初始状态：隐藏，并向右偏移 50px 👇 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(50px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* 平滑的弹性过渡 */
}

/* 👇 激活状态：当 JS 添加这个类时，组件滑入并显示 👇 */
.sy-right-floating-contact.sy-right-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* 整体固定在右侧垂直居中 */
.sy-right-floating-contact {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999; /* 确保层级最高，不被其他元素遮挡 */
    display: flex;
    flex-direction: column;
    gap: 15px; /* 按钮之间的间距 */
}

/* 单个按钮容器，用于定位弹窗 */
.sy-right-contact-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sy-right-contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--sy-right-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    z-index: 2;
}

.sy-right-custom-icon {
    width: 26px; /* 根据您的图片实际观感调整大小 */
    height: 26px;
    object-fit: contain; /* 保证图片不变形 */
    transition: 0s;
	position: relative;
	filter: drop-shadow(100vw 0px 0 var(--sy-right-primary));
	-webkit-filter: drop-shadow(100vw 0px 0 var(--sy-right-primary));
	right: 100vw;
	overflow: hidden;

}


/* 悬浮时，内部图片轻微放大 */
.sy-right-contact-icon:hover .sy-right-custom-icon {
    transform: scale(1.15);
	filter: none;
	right: 0;
}

/* 悬浮背景色 (如果您使用的是纯色透明背景的 SVG/PNG，悬浮变色效果会很好) */
.sy-right-whatsapp:hover { background-color: var(--sy-right-primary); box-shadow: 0 4px 15px rgba(var(--sy-right-rgb), 0.4); }
.sy-right-wechat:hover { background-color: var(--sy-right-primary); box-shadow: 0 4px 15px rgba(var(--sy-right-rgb), 0.4); }
.sy-right-phone:hover { background-color: var(--sy-right-primary); box-shadow: 0 4px 15px rgba(var(--sy-right-rgb), 0.4); }
.sy-right-email:hover { background-color: var(--sy-right-primary); box-shadow: 0 4px 15px rgba(var(--sy-right-rgb), 0.4); }

.icon-whatsapp{
	display: block;
	width: 120px;
	margin-top: 10px;
}


@media screen and (min-width: 991px) {
	header{
		height: 82px;
	}
}


/* ================= 基础轮播容器 ================= */
.sy-ban-wrapper {
	position: relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #1a1a1a;
	aspect-ratio: 16 / 10;
	height: 100vh;
	margin-top: -96px;
}

.sy-ban-slides, .sy-ban-slide {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

.sy-ban-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s ease;
	z-index: 1;
}

.sy-ban-slide.sy-ban-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.sy-ban-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ================= 文字内容排版 ================= */
.sy-ban-content {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	z-index: 3;
}

.sy-ban-container {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 40px;
}

.sy-ban-text-col {
	width: 55%; /* 电脑端文字占左侧 55% */
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* 标题 */
.sy-ban-title {
	font-size: clamp(32px, 4vw, 56px);
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
	letter-spacing: -0.5px;
}

/* 标签行 */
.sy-ban-subtitle-row {
	display: flex;
	align-items: center;
	gap: 15px;
}

.sy-ban-badge {
	background-color: #00a0e9;
	color: #fff;
	padding: 6px 25px 6px 15px;
	font-size: 18px;
	font-weight: 600;
	clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%);
}

.sy-ban-breadcrumb {
	font-size: 16px;
	font-weight: 500;
}

/* 特点列表 */
.sy-ban-features {
	list-style: none;
	padding: 0;
	margin: 10px 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sy-ban-features li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	line-height: 1.4;
}

.sy-ban-features i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background-color: #00a0e9;
	color: #fff;
	border-radius: 50%;
	font-size: 20px;
	flex-shrink: 0; /* 防止图标被挤压 */
}

.sy-ban-features li img{
	width: 60%;
}

/* 底部应用场景图标 */
.sy-ban-apps {
	display: flex;
	gap: 20px;
	margin-top: 15px;
}

.sy-ban-app-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 144px;
	height: 144px;
	border-radius: 50%;
	background-color: transparent;
	border: 2px solid #00a0e9;
	color: #fff;
	text-align: center;
	transition: all 0.3s ease;
}


.sy-ban-theme-light .sy-ban-app-item,.sy-ban-theme-dark .sy-ban-app-item{
	background-color: #00a0e9;
	border: none;
	border: 2px solid #fff;
}

.sy-ban-app-item i {
	font-size: 24px;
	margin-bottom: 4px;
}

.sy-ban-app-item img{
	width: 60px;
}

.sy-ban-app-item span {
	font-size: 12px;
	line-height: 1.3;
	padding: 0 4px;
}

/* ================= 主题颜色控制 (电脑端) ================= */
.sy-ban-theme-dark .sy-ban-title,
.sy-ban-theme-dark .sy-ban-breadcrumb,
.sy-ban-theme-dark .sy-ban-features li { color: #ffffff; }

.sy-ban-theme-light .sy-ban-title,
.sy-ban-theme-light .sy-ban-breadcrumb,
.sy-ban-theme-light .sy-ban-features li { color: #1a1a1a; }

/* ================= 导航与分页 ================= */
.sy-ban-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 50px; height: 50px;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.2);
	color: #fff;
	border: none;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: all 0.3s ease;
	opacity: 0;
}
.sy-ban-wrapper:hover .sy-ban-nav { opacity: 1; }
.sy-ban-nav:hover { background-color: #00a0e9; }
.sy-ban-prev { left: 30px; }
.sy-ban-next { right: 30px; }
.sy-ban-nav svg { width: 24px; height: 24px; }

.sy-ban-pagination {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 12px;
}
.sy-ban-dot {
	width: 10px; height: 10px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: all 0.4s ease;
}
.sy-ban-dot.sy-ban-active {
	width: 32px;
	background-color: #00a0e9;
}


/* ================= 完美移动端适配 (核心修改) ================= */
@media (max-width: 991px) {
	.sy-ban-text-col { width: 80%; }
}

@media (max-width: 768px) {
	/* 1. 容器高度自适应，取消绝对定位限制 */
	.sy-ban-wrapper { 
		aspect-ratio: auto; 
		height: auto; 
		min-height: 100vh; /* 至少占满一屏 */
	}
	
	.sy-ban-content {
		/* position: relative; */
		/* 改为相对定位，让内容撑开高度 */
		padding: 100px 0 80px 0; /* 上下留白，避开导航栏和底部分页 */
		/* align-items: flex-start; */
	}
	.sy-ban-bg{
		object-position: 66% center;
	}
	.sy-ban-features{
		gap: 8px;
	}
	.sy-ban-features i{
		width: 36px;
		height: 36px;
	}
	/* 2. 移动端专属深色渐变遮罩，确保文字绝对清晰 */
	.sy-ban-content::before {
		content: ''; 
		position: absolute; 
		top: 0; left: 0; 
		width: 100%; height: 100%;
		background: linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.2) 100%);
		z-index: -1;
	}

	.sy-ban-container { padding: 0 20px; }
	.sy-ban-text-col { width: 100%; gap: 15px; }

	/* 3. 强制移动端所有文字为白色（因为有深色遮罩） */
	.sy-ban-theme-light .sy-ban-title,
	.sy-ban-theme-light .sy-ban-breadcrumb,
	.sy-ban-theme-light .sy-ban-features li { color: #ffffff; }

	/* 4. 字号精细缩放 */
	.sy-ban-title { font-size: 32px; }
	.sy-ban-badge { font-size: 14px; padding: 4px 15px 4px 10px; }
	.sy-ban-breadcrumb { font-size: 14px; }
	.sy-ban-features li { font-size: 12px; }

	/* 5. 图标 2x2 网格排列 */
	.sy-ban-apps {
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* 2列 */
		gap: 15px;
		margin-top: 10px;
		display: none;
	}
	
	.sy-ban-app-item {
		width: 100%; /* 占满网格 */
		height: 70px;
		border-radius: 12px; /* 手机端改为圆角矩形，更省空间 */
		flex-direction: row; /* 图标和文字横向排列 */
		gap: 10px;
		text-align: left;
		padding: 0 15px;
		background-color: rgba(0, 160, 233, 0.15); /* 半透明背景 */
	}
	
	.sy-ban-theme-light .sy-ban-app-item {
		background-color: rgba(0, 160, 233, 0.8);
	}

	.sy-ban-app-item i { margin-bottom: 0; font-size: 20px; }
	.sy-ban-app-item span { font-size: 12px; br { display: none; } /* 隐藏换行符 */ }

	/* 6. 隐藏左右箭头，完全依赖手势滑动 */
	.sy-ban-nav { display: none; }
}
/* 手机端切换：隐藏电脑图，显示手机图 */
@media (max-width: 768px) {
    .sy-ban-bg-pc {
        display: none;
    }

    .sy-ban-bg-mob {
        display: block;
    }
	.sy-right-floating-contact{
		display:none !important;
	}
}