* {
	margin: 0;
	padding: 0;
	
}

/* 定义 Roboto 字体 */
@font-face {
	font-family: 'Roboto';
	src: url('/css/fonts/roboto.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* 如果有多字重版本，可以分别定义 */
@font-face {
	font-family: 'Roboto';
	src: url('/css/fonts/NotoSans-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: 'Roboto', sans-serif, arial;
	font-weight: 400;
	
	min-height: 100vh;
    display: flex;
    flex-direction: column;
	
}
/* Header & Footer 强制使用 Noto Sans */
header, footer,
.site-header, .site-footer,  /* 以防你用类名 */
[id="header"], [id="footer"] {  /* 以防你用 ID */
  font-family: 'Noto Sans', sans-serif;
}

/* 确保 Header/Footer 内所有子元素继承（防御性写法） */
header *, footer * {
  font-family: inherit;
}

/* =================== 数字上下标 =================== */
/* sup { */
  /* vertical-align: baseline; */
  /* font-size: 0.75em; */
  /* position: relative; */
  /* top: -0.3em; */
  /* display: inline-block;  /* 使其成为独立块，不影响行高 */ */
  /* line-height: 1; */
/* } */

/* sub { */
  /* vertical-align: baseline; */
  /* font-size: 0.75em; */
  /* position: relative; */
  /* top: 0.3em; */
  /* display: inline-block;  /* 使其成为独立块，不影响行高 */ */
  /* line-height: 1; */
/* } */

sup, sub {
  font-size: 0.75em;
  /* 不设置 vertical-align 和 position，使用浏览器默认的 sub/sup 对齐 */
}

/* 段落内的图片明确居左 */
p img {
    max-width: 100%;
    height: auto;
    display: block;  /* 改为块级元素后，默认就是靠左 */
    /* 或者保留 inline 并使用 text-align */
}

/* 如果图片是内联元素，父元素左对齐即可 */
p {
    text-align: left;  /* 确保段落左对齐 */
}

/* 标题文字（默认32号，深黑） */
.text-cate {
	font-size: 32px;
	font-weight: 400;
	color: #1d1d1d;
	line-height: 1.5;
	margin: 12px 0;
}

.text-cateMinus {
	font-size: 28px;
	font-weight: 400;
	color: #1d1d1d;
	line-height: 1.3;
	margin: 15px 0;
}

/* 高亮/重要文字（默认18号，深黑） */
.text-hl {
	font-size: 18px;
	font-weight: 400;
	color: #1d1d1d;
	line-height: 1.5;
	margin: 15px 0;
}

.empha1 {
    font-weight: 500;
}

.empha2 {
    font-weight: 700;
}

/* 描述/正文文字（默认16号，灰色） */
.text-des {
	font-size: 16px;
	font-weight: 400;
	color: #606060;
	line-height: 1.6;
	margin-bottom: 20px;
}


/* 只对相邻的段落设置上边距 */
.text-des p + p {
    margin-top: 24px;
}


/* 链接文字（默认16号，品牌蓝） */
.text-lnk, .text-lnk a {
	display: inline-flex;      /* 使用inline-flex让图标和文字水平对齐 */
    align-items: center;       /* 垂直居中对齐 */
    gap: 12px;                  /* 文字和图标之间的间距 */
	font-size: 16px;
	font-weight: 400;
	color: #005aed;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s ease;
}

.text-lnk:hover {
	color: #003d9e;
	text-decoration: underline;
}


/* 间距类 */
.text-lnk.top20 {
    margin-top: 20px;
}

.text-lnk.top30 {
    margin-top: 30px;
}

.text-lnk.top40 {
    margin-top: 40px;
}

.text-lnk.btm20 {
    margin-bottom: 20px;
}

.text-lnk.btm30 {
    margin-bottom: 30px;
}

.text-lnk.btm40 {
    margin-bottom: 40px;
}


/* goto图标样式 */
.text-lnk img,
.text-lnk a img {
    width: 16px;        /* 调整图标大小，使其与文字匹配 */
    height: 16px;
    object-fit: contain;
    vertical-align: middle; /* 确保垂直居中 */
}

/* 悬停时图标也跟随变色 */
.text-lnk:hover img,
.text-lnk a:hover img {
    filter: brightness(0.7);
}


/* 放在基础类之后，或加 !important 确保覆盖 */
.fs14 { font-size: 14px !important; }
.fs16 { font-size: 16px !important; }
.fs18 { font-size: 18px !important; }
.fs20 { font-size: 20px !important; }
.fs22 { font-size: 22px !important; }
.fs24 { font-size: 24px !important; }
.fs28 { font-size: 28px !important; }
.fs32 { font-size: 32px !important; }

/* 大字号行高稍微收紧 */
.fs28, .fs32 { line-height: 1.3 !important; }

.cl-white { color: #ffffff !important; }  /* 深色背景上用 */
.cl-muted { color: #999999 !important; }  /* 更浅的灰 */
.cl-dark  { color: #1d1d1d !important; }  /* 强制深黑 */


/* 移动端 响应式 */
@media (max-width: 768px) {
	.text-hl { font-size: 16px; }
	.text-des { font-size: 14px; } 
}

/* =================== Banner 部分 ===================  */

/* Banner 区域样式 */
.bnrArea {
	position: relative;
	width: 100%;
	max-width: 2800px;
	height: 600px;
	max-height: 600px;
	margin: 0 auto;
	overflow: hidden;
}

/* 轮播容器 */
.bnrCarousel {
	position: relative;
	width: 100%;
	height: 100%;
}

/* 轮播项 - 修改为使用img标签并应用object-fit */
.bnrSlide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	overflow: hidden; /* 防止图片溢出 */
}

.bnrSlide.active {
	opacity: 1;
}

/* 轮播图片样式 - 添加object-fit: cover */
.bnrSlide img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 关键属性：保持比例填充容器 */
	display: block;
}


/* 文字内容容器 */
.bnrContent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	box-sizing: border-box;
	z-index: 10;
	left: 50%;
	transform: translateX(-50%);
}

/* 左色块 - 主要内容 */
.bnrLeftBlock {
	background-color: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	padding: 30px;
	border-radius: 0;
	width: 500px;
	height: auto;
	box-sizing: border-box;
	text-align: left;
}

/* 右色块 - 导航网格 */
.bnrRightBlock {
	background-color: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	width: 160px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* 导航网格容器 */
.bnrNavGrid {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* 单个导航格子 */
.navCell {
	background-color: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	width: 160px;
	height: 80px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
}

/* 导航格子悬停效果 */
.navCell:hover {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
}

/* 当前激活的导航格子 */
.navCell.active {
	background-color: rgba(0, 113, 227, 0.8);
	border-color: #0071E3;
}

/* 导航格子数字 */
.navCell .cellNumber {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 5px;
	color: #ffffff;
}

/* 导航格子标题 */
.navCell .cellTitle {
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.5;
}



/* 文字样式 */
.bnrTitle {
	font-size: 28px;
	font-weight: 500;
	margin-bottom: 15px;
	line-height: 1.2;
}
		
/* 标题蓝色条样式 - 使用伪元素避免影响布局 */
.bnrTitle {
    position: relative;
    display: inline-block; /* 确保伪元素正确跟随 */
    padding-top: 20px; /* 为蓝色条留出空间 */
    margin-bottom: 15px;
}

.bnrTitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 8px;
    background-color: #0071E3; /* 蓝色 */
    display: block;
}
  
.bnrSubtitle {
	font-size: 20px;
	margin-bottom: 20px;
	line-height: 1.5;
	opacity: 0.9;
}

.bnrDescription {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	opacity: 0.8;
	margin-bottom: 25px;
}

/* 按钮样式 */
.bnrButton {
	display: inline-block;
	
	color: white;            
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	
}

.bnrButton:hover {
	color: #0056b3;
}

/* 自动轮播指示器 */
.bnrIndicators {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
	display: none; /* 先隐藏起来 */
}

.indicator {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	transition: background-color 0.3s;
}

.indicator.active {
	background-color: #0071E3;
}

/* 隐藏但包含数据的容器 */
.bnrData {
	display: none;
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.bnrArea {
		height: 500px;
	}
	
	.bnrContent {
		padding: 0 30px;
	}
	
	.bnrLeftBlock {
		width: 70%;
		padding: 30px;
	}
	
	.bnrRightBlock {
		width: 25%;
		padding: 15px;
	}
	
	.navCell {
		height: 75px;
	}
	
	.bnrTitle {
		font-size: 30px;
	}
	
	.bnrSubtitle {
		font-size: 18px;
	}
}
        
        
		
		
/* 移动端样式调整 */
@media (max-width: 768px) {
    /* 1. 图片最大高度300px，显示中间位置 */
    .bnrArea {
        height: auto;
        min-height: 300px;
        max-height: 300px;
    }
    
    .bnrSlide img {
        object-fit: cover;
        object-position: center; /* 显示图片中间位置 */
        height: 300px;
        max-height: 300px;
    }
    
    .bnrCarousel {
        height: 300px;
    }
    
    /* 2. bnrLeftBlock 只显示 bnrTitle */
    .bnrLeftBlock {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        width: 100%;
		height: auto;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
		/* 去掉黑色背景 background-color: transparent !important;   background-color: rgba(0, 0, 0, 0.6); */
        padding: 15px;
        z-index: 20;
        /* max-width: calc(100% - 40px); */
    }
    
    .bnrLeftBlock .bnrSubtitle,
    .bnrLeftBlock .bnrDescription,
    .bnrLeftBlock .bnrButton {
        display: none !important;
    }
    
    .bnrLeftBlock .bnrTitle {
        font-size: 18px;
        margin-bottom: 0;
        text-align: center;
        color: #ffffff;
    }	

	.bnrTitle {
		
	}

	.bnrTitle::before {   
		width: 50px;
		height: 4px;
	}

		
	/* 3. bnrRightBlock 整个不显示 */
	.bnrRightBlock {
		display: none !important;
	}

	/* 4. 底部横线指示器 */
	 
	.bnrIndicators {
		display: flex !important;
		position: absolute;
		bottom: 15px;
		left: 50%;
		transform: translateX(-50%);
		gap: 8px;
		z-index: 20;
	}

	.indicator {
		width: 30px;
		height: 6px; /* 增加高度，从3px改为6px */
		border-radius: 3px; /* 同步调整圆角 */
		background-color: rgba(255, 255, 255, 0.5);
		cursor: pointer;
		transition: all 0.3s;
	}

	.indicator.active {
		background-color: #0071E3; /* 蓝色高亮 */
		width: 40px;
		height: 6px; /* 确保激活状态也是6px高度 */
	}
    
    /* 调整文字内容容器 */
    .bnrContent {
        padding: 0;
        justify-content: flex-start;
    }
    
    /* 隐藏导航网格 */
    .bnrNavGrid {
        display: none;
    }
}

/* @media (max-width: 480px) { */
    /* .bnrArea { */
        /* min-height: 300px; */
        /* max-height: 300px; */
    /* } */
    
    /* .bnrSlide img { */
        /* height: 300px; */
    /* } */
    
    /* .bnrLeftBlock { */
        /* top: 15px; */
        /* left: 15px; */
        /* right: 15px; */
        /* max-width: calc(100% - 30px); */
        /* padding: 12px; */
    /* } */
    
    /* .bnrLeftBlock .bnrTitle { */
        /* font-size: 16px; */
    /* } */
    
    /* .bnrIndicators { */
        /* bottom: 12px; */
        /* gap: 6px; */
    /* } */
    
    /* .indicator { */
        /* width: 25px; */
        /* height: 6px; */
    /* } */
    
    /* .indicator.active { */
        /* width: 35px; */
    /* } */
/* } */


/* =================== Header 部分 ===================  */

/* Header 通用样式 */
.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
    padding: 0 15px;
    background-color: #ffffff;
}

.header .hdrContainer {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    margin: 0 auto;
}

.header .nav_list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header .nav_list li {
    margin-right: 40px;
    list-style: none;
    display: flex;
    align-items: center;
    height: 100%;  /* 继承父容器高度 */
}

.header .nav_list a {
    color: #606060;
    font-size: 15px;
    text-decoration: none;
}

.header .nav_list a:hover {
    color: #0071E3;
    text-decoration: none;
}

.header .right {
    display: flex;
    align-items: center;
}

/* 语言切换样式 */
.header .languages {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.3s;
}

.header .languages:hover {
    background-color: #f5f5f5;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}


.language-selector .current-language {
    font-size: 14px;
    color: #606060;
}

/* 当下拉菜单打开时，或者鼠标经过时，让文字变色 */
.header .languages:hover .current-language,
.header .languages.active .current-language {
    color: #0071E3 !important; /* 变成您指定的蓝色 */
}

/* 同时也让那个小箭头跟着变色 */
.header .languages:hover .dropdown-arrow,
.header .languages.active .dropdown-arrow {
    border-top-color: #0071E3 !important;
}


/* 方法2：使用自定义背景图标 */
.language-selector .globe-icon.custom-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 具体背景图标 */
.language-selector .globe-icon.custom-icon.globe {
    background-image: url('/images/i-earth.png');
}

/* 鼠标悬停在 language-selector 上时，图标变化 */
.language-selector:hover .globe-icon.custom-icon.globe {
    background-image: url('/images/i-earth-a.png') !important;
	width: 16px; /* 明确指定相同的宽度 */
    height: 16px; /* 明确指定相同的高度 */
   
}

.language-selector .dropdown-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #606060;
    transition: transform 0.3s;
}

.language-selector.active .dropdown-arrow {
    transform: rotate(180deg);
}

.languages .options {
    position: absolute;
    background: #ffffff;
    border-radius: 12px;
    width: 136px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 12px 0;
    right: 0;
    top: 100%;
    display: none;
    margin-top: 8px;
    z-index: 9999;
	font-size:14px;
}

.languages.active .options {
    display: block;
}

.languages .options .item {
    padding: 0;
    list-style: none;
}

/* 修改 PC 端下拉项的悬停样式 */
.languages .options .item a {
    display: flex;
    align-items: center;
    height: 40px;           /* 稍微缩小高度更精致 */
    padding: 0 12px;        /* 内部文字间距 */
    margin: 10px 8px;        /* 关键：外边距。留出的空白 */
    text-decoration: none;
    color: #606060;
    border-radius: 6px;     
    transition: all 0.3s;
}

.languages .options .item a:hover {
    background-color: #f5f5f5; /* 灰色背景现在会根据 margin 留出边距 */
    color: #0071E3;
}

.header_bg {
    height: 80px;
}

/* 移动端按钮样式 - 默认隐藏 */
.header .btn_close,
.header_menu {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: #606060;
    padding: 8px;
    background: none;
    border: none;
    line-height: 1;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.header .logo {
    display: flex;
}

.nav_list {
    display: flex;
    flex-wrap: wrap;
}

.nav_list > li {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    background-color: #FFF;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    min-width: 160px;
    z-index: 1;
    margin-top: 2px;
    padding: 10px;
    border-radius: 10px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    white-space: nowrap;
    padding: 10px;
}

.header .nav_list .dropdown {
    color: #606060;
    font-size: 15px;
    cursor: pointer;
}

.header .nav_list .dropdown:hover {
    color: #0071E3;
}

/* 响应式样式 - 平板 */
@media (max-width: 1279px) {
    .header .hdrContainer {
        width: 100%;
        padding: 0 20px;
    }
    
    .header .nav_list li {
        margin-right: 30px;
    }
}

/* 移动端样式 */
@media (max-width: 768px) {
    .header .hdrContainer {
        width: 100% !important;
        max-width: 100%;
        padding: 0 15px;
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .header .logo {
        display: flex;
        align-items: center;
        height: 100%;
        flex-shrink: 0;
        z-index: 1001;
    }
    
    .header .logo img.logo1 {
        height: 30px;
        width: auto;
    }
    
    .header .nav_list {
        display: none;
    }
    
    /* 移动端菜单调整为自适应高度 */
    .header .nav_list.mobile-open {
        display: block;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: #fafafa;
        z-index: 1000;
        padding: 20px;
        margin: 0;
        box-sizing: border-box;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-top: 1px solid #f0f0f0;
    }
    
    .header .nav_list.mobile-open li {
        display: block;
        margin-right: 0;
        margin-bottom: 8px;
        padding: 6px 0;
        border-bottom: none;
		border-bottom: 1px solid #e0e0e0;		
    }
    
    .header .nav_list.mobile-open a,
    .header .nav_list.mobile-open .dropdown {
        font-size: 16px;
        color: #1D1D1D;
        width: 100%;
        display: block;
        padding: 6px 0;
        text-align: left;
    }
    
    .header .nav_list.mobile-open .dropdown-menu {
        position: static;
        box-shadow: none;
        padding: 5px 0 5px 15px;
        display: block;
        margin-top: 5px;
    }
    
    .header .nav_list.mobile-open .dropdown-menu li {
        border-bottom: none;
        margin-bottom: 4px;
        padding: 3px 0;
    }
    
    /* PC端的语言选项在移动端隐藏 */
    .header .languages:not(.mobile-languages) {
        display: none !important;
    }
    
    .header .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-left: 0;
        flex: 0 0 auto;
        position: relative;
    }
    
    /* 移动端菜单按钮 - 只在移动端显示 */
    .header_menu {
        display: flex !important;
        font-size: 24px;
        color: #606060;
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
    }
    
    /* 移动端关闭按钮 */
    .header .btn_close {
        display: none !important;
        font-size: 32px;
        color: #606060;
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        width: 40px;
        height: 40px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        line-height: 1;
        margin: 0;
    }
    
    .btn_close.mobile-open {
        display: flex !important;
    }
    
    .header_menu.mobile-hidden {
        display: none !important;
    }
	
	
	.header .nav_list.mobile-open li {
        border-bottom: 1px solid #e0e0e0;		
    }
    
    /* 1. 对齐 Products 菜单高度 */
    .header .nav_list.mobile-open li.dropdown-mega {
        height: auto !important;
        display: block;
    }

    /* 2. 去掉语言选项边框 */
    .mobile-languages {
        display: block !important;
        width: 100%;
        margin-top: 15px;
        padding-top: 0; /* 改为0 */
        border-top: none !important; 
    }
    
    .header .nav_list.mobile-open li.mobile-languages {
        border-bottom: none !important;
    }
	
	
    
    /* 移动端菜单内的语言切换样式 */
    .mobile-languages {
        display: block !important;
        width: 100%;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #f0f0f0;
    }
    
    .mobile-languages .language-selector {
        padding: 8px 0;
        border-radius: 6px;
        justify-content: flex-start;
        width: 100%;
    }
    
    .mobile-languages .language-selector:hover {
        background-color: transparent;
    }
    
    .mobile-languages .options {
        position: static;
        width: 100%;
        box-shadow: none;
        border-radius: 6px;
        padding: 0;
        margin-top: 8px;
        display: none;
        background: #f9f9f9;
        border: 1px solid #f0f0f0;
    }
    
    .mobile-languages.active .options {
        display: block;
    }
    
    .mobile-languages .options .item {
        margin: 0;
    }
    
    .mobile-languages .options .item a {
        height: 36px;
        padding: 0 12px;
        justify-content: flex-start;
        font-size: 14px;
    }
    
    .mobile-languages .options .item a:hover {
        background-color: #f0f0f0;
    }
    
    .header_bg {
        height: 60px;
    }
}

/* Mega Menu 基础定位 */
.header .nav_list li.dropdown-mega {	
    position: static; /* 关键：设为 static 让浮层相对于 header 定位 */
	height: 100%;  /* 改为100%，继承父容器高度 */
    display: flex;
    align-items: center;
}

/* 浮层容器：全屏宽度 */
.mega-menu {
    display: none;
    position: absolute;
    top: 80px; /* 必须等于 header 的高度 */
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-top: 1px solid #f0f0f0;
    z-index: 9999 !important; /* 确保层级足够高 */    
    /* 核心黑科技：如果仍然有微小间隙，可以用伪元素填补 */
    padding-top: 0; 
}

/* 在浮层上方增加一个透明的感应层，防止鼠标滑过过快导致断连 */
.mega-menu::before {
    content: "";
    position: absolute;
    top: -30px; /* 向上延伸10px透明区域 */
    left: 0;
    right: 0;
    height: 30px;
    background: transparent;
}

/* 鼠标悬停显示 */
.dropdown-mega:hover .mega-menu {
    display: block;
}

/* 内容区域限制在 1200px 并居中 */
.mega-content {
    width: 1200px;
    margin: 0 auto;
    padding: 30px 15px;
    box-sizing: border-box;
}

.mega-header {
    
    display: flex;
    align-items: flex-end; /* 修改：由 center 改为 flex-end */
    gap: 20px;            /* 稍微拉开文字间距 */
	
	padding-bottom: 20px;
	border-bottom: 1px solid #f0f0f0;
}

.mega-title {
    font-size: 32px;
    font-weight: 400;
    color: #1d1d1d;
	line-height: 1.1;     /* 优化：紧凑行高，让对齐更精准 */
	
}

.view-all {
    font-size: 16px;
    color: #0071E3 !important;
	padding-bottom: 2px;  /* 补偿：由于大字底部有留白，小字可以略微垫高一点，视觉上更平齐 */
}

/* 网格布局 */
.mega-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
	gap: 30px; /* 新增：直接拉开列与列之间的物理间隙 */
}

.mega-column {
    flex: 1;
}

.mega-column h3 {
    font-size: 16px;
    color: #333;
    
    font-weight: 400;
    min-height: 40px; /* 保证标题对齐 */
	
	padding: 16px 0;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 15px; /* 与下方列表拉开距离 */
}

.mega-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-column ul li {
    margin-bottom: 12px !important;
}

.mega-column ul li a {
    font-size: 14px !important;
    color: #0071E3 !important; /* 蓝色链接 */
    transition: opacity 0.2s;
}

.mega-column ul li a:hover {
    text-decoration: underline !important;
    opacity: 0.8;
}

/* ================= 移动端适配 ================= */
@media (max-width: 768px) {
    .mega-menu {
        display: none !important; /* 移动端完全隐藏此浮层 */
    }
    
    .header .nav_list.mobile-open .dropdown-mega a.nav-item {
        display: block; /* 恢复为普通列表项 */
    }
}


/* =================== 主标题 部分 ===================  */
.cateGeneral {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    text-align: left;
}

.cateHeadline {
    width: 100%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px 0 10px 0;
    box-sizing: border-box;
    text-align: left; /* 居左 */
}

.cateHeadline h2 {
    font-size: 32px;
    font-weight: 400;  
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.3;
	text-align: left;
}
.bigMode {
    font-size: 32px !important;
}


/* 响应式 */
@media (max-width: 768px) {
    .cateHeadline {
        padding: 20px 0 0 0;
    }
    
    .cateHeadline h2 {
        font-size: 24px;
    }
	.cateGeneral {
        padding: 0 16px;
    }
	.bigMode h2,
    .bigMode {
        font-size: 32px !important;
    }
}


/* =================== Products 部分 ===================  */

 /* 容器居中且最大宽度 1200px */
.prodContainer {
	max-width: 1200px !important;
	margin: 0 auto;
}

/* 网格布局：默认 3 列 */
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px; /* 卡片之间的间距 */
}
		
		
/* PC端左右布局，移动端上下布局 */
.product-grid.HorLay {
    display: block; /* 重置为块级，使用Flex布局 */
	margin-bottom: 30px;
}

/* PC端左侧1/3宽度，右侧2/3宽度 */
.product-grid.HorLay.ratio-1-2 {
    display: flex;
    align-items: center;
    gap: 40px;
	margin-top:30px;
}

@media (max-width: 768px) {
    .product-grid.mbOneCol {
        grid-template-columns: 1fr;  /* 单列 */
    }
	.product-grid.HorLay {		
		margin-bottom:20px;
	}
}


@media (min-width: 769px) {
    .product-grid.HorLay.ratio-1-2 .product-card {
        flex: 0 0 33.333%;
        max-width: 33.333%;
		border: 0;
    }
    
    .product-grid.HorLay.ratio-1-2 .text-content-wrapper {
        flex: 0 0 66.667%;
        max-width: 66.667%;
    }
}

/* PC端左右布局 */
@media (min-width: 769px) {
    .product-grid.HorLay {
        display: flex;
        align-items: center;
        gap: 40px; /* PC端左右间距 */
    }
    
    
    /* 左右布局的右侧（内容区域） */
    .product-grid.HorLay .text-content-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* 移动端上下布局 */
@media (max-width: 768px) {
	.product-grid.HorLay.ratio-1-2 .product-card {
		border: 0;
    }
	.product-grid.HorLay.ratio-1-2 {
        flex-direction: column;
        gap: 20px;
    }
	
    .product-grid.HorLay {
        display: block;
    }
    
    /* 上下布局时重置 */
    .product-grid.HorLay .product-fullCard,
    .product-grid.HorLay .text-content-wrapper {
        width: 100%;
    }
    
    /* 移动端图片和内容区域上下排列 */
    .product-grid.HorLay .image-fullWrapper {
        margin-bottom: 20px;
    }
}



		
		/* 4列网格 */
		.product-grid.fourth {
			grid-template-columns: repeat(4, 1fr);
		}
/* 移动端上下布局 */
@media (max-width: 768px) {	
	.product-grid.fourth {
			grid-template-columns: repeat(2, 1fr);
		}
}
		/* 5列网格 */
		.product-grid.fifth {
			grid-template-columns: repeat(5, 1fr);
		}

        /* 单个产品卡片 */
        .product-card {
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        /* 图片容器：灰色圆角背景 */
        .image-wrapper {
            background-color: #fafafa; /* 浅灰色背景 */
            border-radius: 12px;
            overflow: hidden;
            aspect-ratio: 16 / 9; /* 保持统一的宽高比 */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            margin-bottom: 15px;
            transition: background-color 0.3s ease;
			position: relative; /* 必须要有这个 */
        }

        /* 图片自适应 */
        .image-wrapper img {
			
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			border-radius: 8px; /* 图片内部圆角 */
        }
		
/* ============ 徽标样式 ============ */
.badge {
    position: absolute;
    top: 0; /* 贴紧上边框 */
    right: 0; /* 贴紧右边框 */
    color: white;
    font-size: 24px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 0 8px 0 8px; /* 左上和右下圆角 */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    line-height: 1;
    font-family: 'Roboto', 'Microsoft YaHei', sans-serif;
}

/* USP橙色徽标 */
.badge-USP {
    background-color: #FF6A39; /* 橙色 */
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

/* 针对 HorLay 布局的移动端优化 */
@media (max-width: 768px) {
	
	.product-card {
		width: 100%;
	}
		
    .product-grid.HorLay {
        /* 确保容器正确显示 */
        display: flex !important;
        flex-direction: column !important;
        
    }
    
     /* 针对 HorLay 布局的额外调整 */
    .product-grid.HorLay .image-wrapper {
        /* 保持与其他图片一致，但因为是单行，可以稍大一些 */
       
        min-height: 180px !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* 图片统一处理 */
    
    /* 调整徽章大小和位置 */
    .product-grid.HorLay .badge {
        position: absolute;
       
        font-size: 18px !important;
        padding: 6px 10px !important;
        line-height: 1.2 !important;
        transform-origin: top right; /* 从右上角缩放 */
        transform: scale(0.9) !important;
        z-index: 10;
    }
    
    .product-grid.HorLay .badge-USP {
        background-color: #FF6B35;
        border-radius: 0 8px 0 8px;
    }
}

/* 标题样式 */
.product-title {
	font-size: 18px;
	font-weight: 500;
	color: #444;
	padding-left: 5px;
	transition: color 0.3s ease;
}

/* --- 交互状态 (Interactions) --- */

/* 悬停时图片轻微放大 */
.product-card:hover .image-wrapper img {
	transform: scale(1.08);
}

/* 悬停时背景色变深一点点 */
.product-card:hover .image-wrapper {
	background-color: #f0f0f0;
}

/* 悬停时标题变色（通常品牌色为蓝色） */
.product-card:hover .product-title {
	color: #0056b3;
}

/* 点击时的激活状态 */
.product-card:active {
	transform: scale(0.98);
}

/* 第二种样式：无灰色背景，图片撑满 */
.product-fullCard {
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: transform 0.3s ease;
	margin-top: 10px;
	margin-bottom: 20px;
}

.image-fullWrapper {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 9; /* 保持统一的宽高比 */
	margin-bottom: 15px;
	position: relative;
	background-color: transparent; /* 无背景色 */
}

/* 宽高比变体 */
.image-fullWrapper.ratio-1610 {
	aspect-ratio: 16 / 10;
}

.image-fullWrapper.ratio-43 {
	aspect-ratio: 4 / 3;
}

.image-fullWrapper.ratio-11 {
	aspect-ratio: 1 / 1;
}

.image-fullWrapper.ratio-32 {
	aspect-ratio: 3 / 2;
}

/* 图片撑满容器 */
.image-fullWrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 图片填充整个容器 */
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- 交互状态 (Interactions) --- */

/* 悬停时图片轻微放大 */
.product-card:hover .image-wrapper img,
.product-fullCard:hover .image-fullWrapper img {
	transform: scale(1.08);
}

/* 悬停时背景色变深一点点（仅对第一种样式有效） */
.product-card:hover .image-wrapper {
	background-color: #fafafa;
}

/* 悬停时标题变色 */
.product-card:hover .product-title,
.product-fullCard:hover .product-title {
	color: #0056b3;
}

/* 点击时的激活状态 */
.product-card:active,
.product-fullCard:active {
	transform: scale(0.98);
}
		
		
.iconOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* 确保在图片之上 */
    opacity: 1;
    transition: opacity 0.3s ease;
    border-radius: 12px; /* 与容器保持一致 */
}

/* 悬停时显示播放按钮 */
.image-fullWrapper:hover .iconOverlay {
    opacity: 1;
}

/* 播放按钮样式 */
.iconOverlay img {
    width: 50px; /* 小于60px */
    height: 50px;
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

/* 悬停时按钮轻微放大 */
.image-fullWrapper:hover .iconOverlay img {
    transform: scale(1.1);
}




/* PC端3列，移动端2列 (默认) */
.product-grid.speCol {
    grid-template-columns: repeat(3, 1fr); /* PC端3列 */	
}


/* 响应式设计 */
@media (max-width: 768px) {
    .product-grid.speCol {
        grid-template-columns: repeat(1, 1fr) !important; /* 移动端1列 */
        gap: 16px;
    }
	
	.product-fullCard {
		margin-top: 10px;
		margin-bottom: 0;
	}
}



/* --- 响应式设计 (Responsive) --- */

/* 平板端：2 列布局 */
@media (max-width: 992px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
}

/* 移动端：2 列布局 */
@media (max-width: 768px) {
	
	.prodContainer {
		margin: 0 12px;
	}

	.product-grid {
		grid-template-columns: repeat(2, 1fr); /* 改为2列 */
		gap: 12px; /* 减小间距适应小屏幕 */
	}
   
	.product-title {
		font-size: 14px; /* 减小字号适应小屏幕 */
		text-align: left; /* 保持居左 */
		padding-left: 0; /* 移除左边距 */
	}
	
	/* 调整图片容器，减小内边距 */
	.image-wrapper {
		padding: 10px 6px; /* 移动端也减小内边距 */
					
		margin-bottom: 8px;
		border-radius: 8px;
	}
	
	.image-fullWrapper {
		margin-bottom: 8px;
		border-radius: 8px;
	}
	
	.iconOverlay {
		border-radius: 8px; /* 与容器保持一致 */
	}
	
	.iconOverlay img {
		width: 40px;
		height: 40px;
	}

}

/* =================== 地图及参数 部分 ===================  */

/* 外层容器：全屏宽背景 */
.section-wrapper {
	width: 100%;
	height: 500px;
	/* 限制背景最大宽度 max-width: 2800px;  */
	max-width: 100vw; /* 关键：使用视口宽度单位 */
	margin: 0 auto;
	margin-top: 40px;
	color:  #ffffff;
	background-color: #0047cc;
	background-image: url('../images/global-bg.png'); /* 替换为你的图片路径 */
	background-size: auto 520px; /* 高度不超过520px */
	background-position: right center; /* 只在右半区显示 */
	background-repeat: no-repeat;
	padding: 60px 20px; /* 从 100px 减小到 60px，使区域变扁平 */            
	overflow: hidden;
	box-sizing: border-box; /* 关键：内边距包含在宽度内 */
	position: relative; /* 创建新的定位上下文 */
	
}

/* 内层容器：文字居中且限制 1200px */
.content-container {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* 标题样式 */
.header-area h2 {
	font-size: 32px;
	font-weight: 500;
	margin-bottom: 30px;
}

/* 引用样式 */
.quote-area {
	max-width: 1200px;
}

.quote-icon {
	font-size: 88px;
	font-family: Georgia, serif;
	line-height: 1;
	
	display: block;
}

.quote-text {
	font-size: 24px;
	line-height: 1.5;
	font-weight: 300;
}

/* 统计数据网格 - 现代 Grid 布局 */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); 
	/* 增加间距到 80px 甚至更多，让四列横向拉开 */
	column-gap: 80px; 
	row-gap: 20px;
	margin-top: 50px;
	width: 100%;
}

.stat-item {
	display: flex;
	flex-direction: column;
	gap: 15px;
	transition: transform 0.3s ease; /* 增加简单的交互反馈 */
}

/* 悬停状态：数字微动 */
.stat-item:hover {
	transform: translateY(-5px);
}

.stat-number {
	font-size: 32px;
	font-weight: 400;
	line-height: 1;
}

.stat-desc {
	font-size: 16px;
	color: var(--text-light);
	line-height: 1.3;
	max-width: none; 
	/* 关键：强制不换行，或者设置足够宽的最小宽度 */
	white-space: nowrap; 
}

/* --- 响应式设计 --- */

/* 平板端：2x2 布局 */
@media (max-width: 992px) {
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}
	.section-wrapper {
		padding: 60px 30px;
	}
}

/* 移动端 */
@media (max-width: 768px) {
    .section-wrapper {
        padding: 40px 16px; /* 减小内边距 */
        height: auto; /* 改为自适应高度 */
        min-height: 460px; /* 设置最小高度 */
		
		background-size: auto 325px; 
		background-position: center; 
			
    }
    
    .content-container {
        gap: 25px; /* 减小容器内间距 */
    }
    
    .stats-grid {                
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
        margin-top: 30px; /* 减小顶部间距 */
        gap: 25px; /* 调整网格间距 */
    }
    
    .header-area h2 {
        font-size: 20px;
        margin-bottom: 15px; /* 减小底部间距 */
    }
    
    .quote-area {
        margin-bottom: 10px; /* 增加底部间距，避免贴得太紧 */
    }
    
    .quote-text {
        font-size: 16px;
        line-height: 1.4; /* 调整行高 */
    }
    
    .quote-icon {
        font-size: 36px;
        margin-bottom: 5px; /* 减小引号与文字的间距 */
    }
    
    .stat-item {
        gap: 8px; /* 减小统计项内部间距 */
        min-height: 80px; /* 确保统计项有足够高度 */
    }
    
    .stat-number {
        font-size: 24px;
    }
    
    .stat-desc {
        font-size: 14px;
        white-space: normal;
        line-height: 1.2; /* 调整行高 */
    }
}

/* 更小的移动端：单列布局 */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .section-wrapper {
        padding: 30px 16px;
    }
    
    .stat-item {
        min-height: 70px;
    }
}

/* ===================  News Events 部分 ===================  */

.section-outer,
.section-outer * {
	box-sizing: border-box;
}

/* 外层：背景图宽度100% */
.section-outer {
	width: 100%;
	max-width: 2800px;
	margin: 0 auto;
	background: url('../images/bg-gray.jpg') no-repeat center center;
	background-size: cover;
	padding: 60px 20px;
	overflow: hidden;
}

/* newsArea：居中，最大1200 */
.newsArea {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 2fr 1fr; /* 左右两大块比例 */
	gap: 30px;
	align-items: stretch;
	/* 重要：防止 grid 溢出 */
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.column-container {
	display: flex;
	flex-direction: column;
	min-width: 0; /* 重要：防止 flex 子项溢出 */
}

.area-title {
	font-size: 32px;
	font-weight: 400;
	margin-bottom: 25px;
	color: #333;
}

/* 通用卡片容器 */
.content-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex: 1;
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);
	/* 关键：限制宽度 */
	width: 100%;
	max-width: 100%;
}

/* --- News 内部结构 --- */
.news-wrapper {
	display: flex;
	width: 100%;
	min-width: 0; /* 重要：防止 flex 子项溢出 */
}

/* News 左侧：主推荐图文 */
.news-featured {
	flex: 1;
	border-right: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	min-width: 0; /* 重要：防止 flex 子项溢出 */
}

.news-featured img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.featured-text {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	/* 关键：处理 padding 导致的溢出 */
	box-sizing: border-box;
}

/* News 右侧：列表 */
.news-list {
	flex: 1;
	padding: 20px;
	display: flex;
	flex-direction: column;
	min-width: 0; /* 重要：防止 flex 子项溢出 */
	box-sizing: border-box; /* 处理 padding 导致的溢出 */
}

.list-item {
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border-color);
	box-sizing: border-box; /* 处理 padding 导致的溢出 */
}

.list-item:last-child {
	border-bottom: none;
}

/* --- Events 内部结构 --- */
.event-wrapper {
	width: 100%;
	display: flex;
	flex-direction: column;
	min-width: 0; /* 重要：防止 flex 子项溢出 */
}

.event-banner {
	height: 220px;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.event-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 蓝色悬浮标签 */
.event-tag {
	position: absolute;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	background: #4a8df8;
	color: white;
	padding: 5px 15px;
	border-radius: 4px;
	text-align: center;
	font-size: 12px;
	line-height: 1.2;
}

.event-info {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	flex: 1;
	box-sizing: border-box; /* 处理 padding 导致的溢出 */
}

/* 公共文字样式 */
.news-events-h3 { 
	font-size: 18px; 
	color: #333; 
	line-height: 1.4; 
	font-weight: 500; 
	/* 防止文本溢出 */
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
}

.desc { 
	font-size: 16px; 
	color: var(--text-gray); 
	line-height: 1.5; 
}

.more { 
	font-size: 13px; 
	color: var(--link-blue); 
	text-decoration: none; 
	font-weight: bold;
	margin-top: auto; /* 始终推到底部 */
}

.more:hover { 
	text-decoration: underline; 
}

/* 响应式设计 */
@media (max-width: 1024px) {
	.newsArea { 
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.area-title {
		font-size: 24px;
	}
	.section-outer { 
		padding: 40px 15px;
		background: none;
		/* 如果主样式有 body 背景色，这里不需要设置 */
	}
}

@media (max-width: 768px) {
	.news-wrapper { 
		flex-direction: column; 
	}
	
	.news-featured { 
		border-right: none; 
		border-bottom: 1px solid var(--border-color); 
	}
	
	.section-outer {
		padding-left: 16px;
		padding-right: 16px;
	}
	
	/* 移动端确保所有容器都不会溢出 */
	.section-outer,
	.newsArea,
	.column-container,
	.content-card,
	.news-wrapper {
		max-width: 100%;
		overflow-x: hidden;
	}
	.featured-text {
		padding: 16px 0;
	}
	.news-list {
		padding: 16px 0;
	}

	.event-info {
		padding: 16px 0;
	}

}

/* =================== Footer 部分 ===================  */

/* 100% 宽度背景，最大 1800px */
.footer-wrapper {
	width: 100%;
	max-width: 2800px;
	margin: 0 auto;
	/* margin-top: 40px; */
	background-color: #333333; /* 深灰色背景 */
	color: #ffffff;
	padding: 80px 0 30px 0;
	margin-top: auto;
}

/* 内容居中容器，最大 1200px */
.footer-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

/* 5列网格布局：根据内容精细分配比例 */
.footer-grid {
	display: grid;
	/* 前四列根据文字长度分配，最后一列(Contact)给更多空间 */
	grid-template-columns: 1.2fr 1.2fr 1.2fr 0.8fr 1.6fr;
	gap: 40px;
	margin-bottom: 60px;
}

/* 列标题 */
.footer-col h4 {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 25px;
	color: #ffffff;
	white-space: nowrap;
}

/* 列表链接 */
.footer-col ul {
	list-style: none;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.footer-col ul li {
	margin-bottom: 12px;
}

.footer-col a {
	color: #999;
	text-decoration: none;
	font-size: 14px;
	transition: color 0.3s ease;
}

/* 图标 */
.footer-col img {
	width: 24px;
	height: 24px;
}

/* 交互状态：链接悬停变白 */
.footer-col a:hover {
	color: #ffffff;
}

/* 社交图标栏 */
.social-icons {
	display: flex;
	gap: 15px;
	margin-top: 15px;
	align-items: center;
}

.social-link {
	display: inline-block;
	transition: opacity 0.3s ease;
}

.social-link:hover {
	opacity: 0.8;
}

/* 强制修复 footer 联系方式布局 */
.footer-col .contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
}

.footer-col .contact-item span {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.footer-col .contact-item span img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
}

.footer-col .contact-item p,
.footer-col .contact-item a {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.5 !important;
    display: block !important;
}

.footer-col .contact-item p {
    color: #999 !important;
    font-size: 14px !important;
}

.footer-col .contact-link {
    color: #007bff !important;
    text-decoration: none !important;
}

/* Contact Us 按钮 */
.btn-contact {
	display: inline-block;
	background-color: #007bff;
	color: white !important;
	padding: 10px 25px;
	border-radius: 20px;
	text-decoration: none;
	font-size: 14px;
	margin-top: 10px;
	transition: background-color 0.3s ease;
	max-width:75px;
}

.btn-contact:hover {
	background-color: #0056b3;
}

/* 底部版权信息横线 */
.footer-bottom {
	border-top: 1px solid #444;
	padding-top: 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: #666;
}

.bottom-links a {
	color: #666;
	margin-left: 20px;
	text-decoration: none;
}

/* --- 响应式设计 --- */

/* 平板端：变为 3列 或 2列 */
@media (max-width: 1024px) {
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px;
	}
}
		
@media (max-width: 600px) {
	.footer-wrapper {
		padding: 30px 0 20px 0;
	}
	.footer-bottom {
        flex-direction: column; /* 上下排列 */
        gap: 15px; /* 两行间距 */
        text-align: center; /* 居中 */
    }
	
    /* 强制每一列独占 100% 宽度 */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 0; /* 靠边框分割，移除网格间距 */
    }

    .footer-col {
        border-bottom: 1px solid #444; /* 添加行分割线 */
        width: 100%;
    }

    /* 标题样式：变为可点击的通栏条 */
    .footer-col h4 {
        padding: 18px 0;
        margin-bottom: 0 !important;
        cursor: pointer;
        display: flex;
        justify-content: space-between; /* 标题居左，箭头居右 */
        align-items: center;
        font-size: 15px;
    }

    /* 自定义下拉箭头 */
    .footer-col h4::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid #999;
        border-bottom: 2px solid #999;
        transform: rotate(45deg); /* 默认向下箭头 */
        transition: transform 0.3s ease;
        margin-right: 5px;
    }

    /* 默认隐藏所有子内容 */
    .footer-col ul, 
    .footer-col .social-icons, 
    .footer-col .contact-item, 
    .footer-col .btn-contact {
        display: none; 
        padding-bottom: 20px;
        animation: fadeIn 0.3s ease; /* 增加展开时的淡入感 */
    }

    /* --- 展开状态样式 --- */
    .footer-col.active h4::after {
        transform: rotate(-135deg); /* 箭头翻转向上 */
    }

    .footer-col.active ul,
    .footer-col.active .social-icons,
    .footer-col.active .contact-item,
    .footer-col.active .btn-contact {
        display: block; /* 展开显示 */
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
}




/* =================== FAQ 部分 ===================  */

.faq-section-wrapper {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    max-width: 2800px;
    /* margin: auto 0; */
	margin-bottom: -40px;
    /* background-color: #FAFAFA;  */
    width: 100%; 
    padding: 60px 20px; 
}

.faq-content-container {
    width: 100%;
    max-width: 1200px;
}

.faq-main-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 40px;
    font-weight: 400;
}

/* --- 2. FAQ 列表布局 --- */
.faq-list {
    border-top: 1px solid #e0e0e0;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
}

/* --- 3. 针对 FAQ 内部的 text-hl 进行功能性定义 (不定义字号) --- */
.faq-item .text-hl {
    padding: 24px 40px 24px 0;
    cursor: pointer;
    position: relative;
    display: block; /* 确保点击区域铺满 */
}

/* 右侧图标：仅在 faq-item 内部的 text-hl 显示 */
.faq-item .text-hl::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666;
    background: #fff;
    transition: all 0.2s ease;
}

/* 激活状态下的图标切换 */
.faq-item.active .text-hl::after {
    content: '-';
}

/* --- 4. 答案部分的动画逻辑 --- */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 800px; /* 足够容纳长文本的高度 */
}

/* 针对 FAQ 内部的 text-des 进行间距定义 (不定义字号) */
.faq-item .text-des {
    padding-bottom: 24px;
    line-height: 1.6;
}

/* --- 5. 底部 "more" 链接居中 --- */
.faq-footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}


/* --- 6. 响应式适配：确保移动端字体易读 --- */
@media (max-width: 768px) {
    .faq-section-wrapper {
        padding: 40px 15px;
    }
    
    /* 如果在移动端 text-hl 被全局定义得太小，
       可以通过这里强制调整到 18px 左右以保证舒适度
    */
    .faq-item .text-hl {
        font-size: 18px !important; 
        padding: 20px 35px 20px 0;
    }
    
    .faq-item .text-des {
        font-size: 16px !important;
    }
}

/* =================== More 部分 ===================  */


.bottom-more-link {
    color: #007bff;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
	margin-bottom: 30px;
}

.bottom-more-link:hover {
    opacity: 0.8;
}

/* 添加一个小箭头图标 */
.bottom-more-link::after {
    content: '\203A';
    font-size: 22px;
    margin-left: 5px;
    line-height: 1;
}

/* =================== 另外的 Banner 部分 ===================  */

/* 使用更具体的命名避免冲突 */
.bannerSub-container {
	position: relative;
	width: 100%;
	max-width: 2800px;
	margin: 0 auto;
	overflow: hidden;
}

.bannerSub-image {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
		
/* 居中容器 */
.bannerSub-center-wrapper {
	position: absolute;
	top: 30%;  
	left: 50%;
	transform: translate(-50%, -30%);
	width: 100%;
	max-width: 1200px;
	z-index: 3;
	padding: 0 20px;
	box-sizing: border-box;
}

.bannerSub-content.withBox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.6);
	width: 500px;
	height: auto;           /* 改为自动高度 */
	min-height: 128px;      /* 最小高度 */
	padding: 24px 20px;     /* 增加上下内边距 */
	box-sizing: border-box;
}

/* 重置所有内部元素的margin */
.bannerSub-content.withBox * {
	margin: 0;
}

/* 重新设置元素之间的间距 */
.bannerSub-content.withBox .bannerSub-line-blue {
	margin-bottom: 18px;
}

.bannerSub-content.withBox .bannerSub-ttl {
	margin-bottom: 18px;
}

.bannerSub-content.withBox .bannerSub-des {
	margin-top: 0;
}


/* 文字内容容器 */
.bannerSub-content {
	text-align: left;
	max-width: 850px; /* 控制文字区域宽度 */
}

/* 白色线条 */
.bannerSub-line {
	width: 100px;
	height: 10px;
	background-color: white;
	margin-bottom: 25px;
	border-radius: 2px;
	flex-shrink: 0; 
}

/* 蓝色线条 */
.bannerSub-line-blue {
	width: 100px;
	height: 10px;
	background-color: #005aed;
	margin-bottom: 10px;
	border-radius: 2px;
}

.bannerSub-title {
	color: white;
	font-size: 28px;
	font-weight: 700;
	margin-bottom: 20px;
	line-height: 1.2;
}

.bannerSub-description {
	color: white;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 20px;
	margin-top: 0;        /* 添加上部间距为0 */
	max-width: 512px;
}
.bannerSub-des-wide {
	color: white;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 20px;
	margin-top: 0;        /* 添加上部间距为0 */
	max-width: 900px;
}

.bannerSub-ttl {
	color: white;
	font-size: 28px;
	font-weight: 500;
	margin-bottom: 10px;
	line-height: 1.2;
}

.bannerSub-des {
	color: white;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 10px;
	max-width: 452px;
}


		
/* 新增的蓝色渐变层 - 从左到右逐渐降低 */
.bannerSub-blue-gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	
	/* 从左到右的蓝色渐变，从深蓝到透明 */
	background: linear-gradient(
		90deg, 
		rgba(0, 91, 237, 0.9) 0%,       /* 左侧：深蓝色，90%不透明度 */
		rgba(0, 123, 255, 0.8) 25%,      /* 中间：中等蓝色，70%不透明度 */
		rgba(64, 156, 255, 0.7) 50%,     /* 中间偏右：浅蓝色，50%不透明度 */
		rgba(128, 189, 255, 0.5) 75%,    /* 右侧：更浅蓝色，30%不透明度 */
		rgba(255, 255, 255, 0.2) 100%      /* 最右侧：完全透明 */
	);
}

/* 新增的灰黑色渐变层 - 从左到右逐渐降低 */
.bannerSub-dark-gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	
	/* 从左到右的灰黑色渐变，从45%透明到50%透明 */
	background: linear-gradient(
		90deg, 
		rgba(35, 47, 69, 0.99) 45%,
		rgba(35, 47, 69, 0.80) 48%,
		rgba(35, 47, 69, 0) 55%
	);
}


        
/* 响应式设计 */
@media (max-width: 1200px) {
	.bannerSub-center-wrapper {
		padding: 0 30px;
	}
	
	
	.bannerSub-description {
		font-size: 16px;
	}
	
	/* 调整渐变在中等屏幕上的强度 */
	.bannerSub-blue-gradient {
		background: linear-gradient(
			90deg, 
			rgba(0, 91, 237, 0.8) 0%,
			rgba(0, 123, 255, 0.6) 25%,
			rgba(64, 156, 255, 0.5) 50%,
			rgba(128, 189, 255, 0.4) 75%,
			rgba(255, 255, 255, 0.3) 100%
		);
	}
}

@media (max-width: 768px) {
	.bannerSub-image {
		min-height: 320px;
	}
	
	.bannerSub-center-wrapper {
		padding: 0 20px;				
	}
	
	
	.bannerSub-content {
		max-width: 100%; /* 移动端占满宽度 */
		margin-left: 16px;
		margin-right: 16px;
		margin-top: 24px;
	}
	
	.bannerSub-line {
		width: 45px;
		height: 8px;
		margin-bottom: 20px;
	}
	
		
	.bannerSub-description {
		font-size: 14px;
		margin-bottom: 15px;
	}
	.bannerSub-des-wide {
		font-size: 14px;
		margin-bottom: 15px;
	}
	
	/* 调整渐变在移动端的效果 */
	.bannerSub-blue-gradient {
		background: linear-gradient(
			90deg, 
			rgba(0, 91, 237, 0.9) 0%,
			rgba(0, 123, 255, 0.7) 30%,
			rgba(64, 156, 255, 0.5) 60%,
			rgba(128, 189, 255, 0.3) 90%,
			rgba(255, 255, 255, 0) 100%
		);
	}
	


}
        

/* 移动端图片焦点偏移辅助类 - 将图片75%位置作为显示中心 */
@media (max-width: 768px) {
	
    .bannerSub-container.mbSpeImg {
        height: 300px;
        position: relative;
        overflow: hidden;
        background-color: #232f45;
    }
    
    .bannerSub-container.mbSpeImg .bannerSub-image {
        /* 视觉缩小0.633，但要撑满414px宽度 */
        /* 实际渲染宽度 = 414px */
        /* 原图缩放后宽度 = 414 / 0.633 = 654px */
        /* 所以 width = 654/414 * 100% = 158% */
        
        width: 358%;
        height: auto;
        position: absolute;
        top: -24%;
        /* left: 50%; */
        transform: translateX(-28%) scale(0.528);
        transform-origin: 10% center;  
    }
    
	
	.bannerSub-container.mbSpeImg .bannerSub-content{
		padding-top: 90px;
	}
	
	.bannerSub-dark-gradient {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		
		/* 灰黑色渐变，从45%透明到50%透明 */
		background: linear-gradient(
			0deg, 
			rgba(35, 47, 69, 0.99) 15%,
			rgba(35, 47, 69, 0.90) 35%,
			rgba(35, 47, 69, 0.70) 55%,
			rgba(35, 47, 69, 0) 65%
		);
	}
			
}



@media (max-width: 768px) {
    /* 确保父容器相对定位 */
    .bannerSub-container {
        position: relative;
        overflow: hidden;
    }
    
    /* 重置居中容器的定位 */
    .bannerSub-center-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 内容区域从顶部开始 */
    .bannerSub-content.withBox {		
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
        padding: 15px;
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        margin: 0 !important;
        border-radius: 0;
        box-sizing: border-box;
        position: relative;
        top: 0;
    }
	
	/* 蓝色线条 */
	.bannerSub-line-blue {
		width: 50px;
		height: 5px;
	}

	.bannerSub-title {		
		font-size: 18px;
		font-weight: 500;
	}
	.bannerSub-ttl {
		color: white;
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 10px;
		line-height: 1.2;
	}
	.bannerSub-ttl h1{
		color: white;
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 10px;
		line-height: 1.2;
	}
}


/* =================== Articles Detail 部分 ===================  */

/* 文章区域通用容器 */
.articleHeadline,
.spBlueLine,
.articleSub,
.articleContent {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
.articlePreIMG {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.articlePreIMG img {
    max-width: 1160px;
}

/* 文章标题 */
.articleHeadline {
    padding-top: 40px;
    padding-bottom: 20px;
}

.articleHeadline h1 {
    font-size: 32px;
    font-weight: 400;
    color: #333;
    line-height: 1.4;
    margin: 0;
}

/* 蓝色分割线 */
.spBlueLine {
    height: 2px;
    background-color: #005aed;
    padding: 0;
    max-width: 1200px;
    margin: 0 auto 20px;
}

/* 文章元信息 - 横向排列 */
.articleSub {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 10px;
}

.articleSub .text-des {
    font-size: 14px;
    color: #666;
	padding-right: 2px;
}
.articleSub .text-des a {   
	padding-right: 10px;
}

.articleSub .text-des span {
    color: #333;
    font-weight: 500;
}



/* 文章内容 */
.articleContent {
    padding-bottom: 30px;
}

.articleContent p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
	color: #606060;
}

.articleContent img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 30px auto;
}

.articleContent strong {
    font-size: 18px;
    font-weight: 600;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .articleHeadline,
    .spBlueLine,
    .articleSub,
    .articleContent {
        padding-left: 4px;
        padding-right: 4px;
    }

    .articleHeadline {
        padding-top: 30px;
    }

    .articleHeadline h1 {
        font-size: 22px;
    }

    .articleSub {
        gap: 15px;
    }

    .articleContent p {
        font-size: 16px;
    }
}


/* 列表信息容器 */
.text-listing {
	display: flex;
	align-items: baseline;
	padding: 12px 0;	
	font-weight: 300;
	line-height: 1.6;
	color: #606060;
}
.text-listing:last-child {
	border-bottom: none;
}
/* 标签固定宽度300px */
.text-listing span {
	display: inline-block;
	width: 300px;
	flex-shrink: 0;
	font-weight: 500;
	color: #1d1d1d;
	
}
/* 移动端适配 */
@media (max-width: 768px) {
	.text-listing {
		flex-direction: column;
		padding: 0;
		border-bottom: none;
		margin-bottom: 8px;
	}
}

/* =================== News List 部分 ===================  */

/* 外框：最大宽度1200，居中 */
.news-container {
	max-width: 1200px;
	margin: 0 auto;
	background-color: #fff;
}

/* 单条新闻项 */
.news-item {
	display: flex;           
	min-height: 80px;
}

.news-item:last-child {
	border-bottom: none;
}


/* 左侧日期：固定宽度100 */
.news-date {
	width: 160px;
	flex-shrink: 0;
	padding: 20px 20px 20px 0;
   
	display: flex;
	flex-direction: column;
	
	
	justify-content: flex-start;  /* 改为顶部对齐 */
	align-items: flex-start;       /* 左对齐 */
	padding-top: 24px;             /* 调整上边距 */
}



/* 右侧标题：宽度1060 */
.news-title {
	width: 1000px;
	flex-grow: 1;
	padding: 20px;
	display: flex;            
	align-items: flex-start; 
}


.news-title a {
	line-height: 1.5;
	transition: color 0.3s ease;
	text-decoration: none;
	display: inline;
	color: #005aed;
}

.news-title a img {
	display: inline;
	margin-left: 10px;
	padding-bottom: 3px;
	vertical-align: bottom;
	width:20px;
	height:20px;
}

.news-title a:hover {
	color: #4d94ff;  
}

/* 移动端：上下排列 */
@media (max-width: 768px) {
    .news-container {
        padding: 0 2px !important;
    }

    .news-item {
        flex-direction: column !important;
        min-height: auto !important;
    }

    .news-date {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 18px 15px 2px 15px !important;
        border-right: none !important;
        border-top: 1px solid #e0e0e0 !important;
        box-sizing: border-box !important;
    }

    .news-title {
        width: 100% !important;
        padding: 12px 15px !important;
        box-sizing: border-box !important;
    }
}


/* support.html 专用样式 - 文档列表 (docs) */
.docs-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
}

.docs-item {
    display: flex;
    min-height: 60px;
}

.docs-item:last-child {
    border-bottom: none;
}

.docs-icon {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 12px;
    margin-left: 0px;
    margin-right: 10px;
}

.docs-icon img {
    width: 20px;
    height: auto;
    display: block;
}

.docs-title {
    flex: 1;
    padding: 10px 20px 0 0;
    display: flex;
    align-items: flex-start;
}

.docs-title a {
    line-height: 1.5;
    transition: color 0.3s ease;
    text-decoration: none;
    display: inline;
    color: #005aed;
}

.docs-title a img {
    display: inline;
    margin-left: 10px;
    padding-bottom: 3px;
    vertical-align: bottom;
	width: 20px;
	height:20px;
}

.docs-title a:hover {
    color: #4d94ff;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .docs-container {
        padding: 0 2px !important;
    }
    
    .docs-item {
        flex-direction: row !important;
        min-height: auto !important;
        align-items: flex-start !important;
    }
    
    .docs-icon {
        width: 30px !important;
        padding: 18px 0 2px 15px !important;
        margin-left: 0 !important;
        margin-right: 5px !important;
        align-items: flex-start !important;
    }
    
    .docs-icon img {
        width: 18px !important;
    }
    
    .docs-title {
        width: auto !important;
        flex: 1 !important;
        padding: 12px 15px 12px 0 !important;
        box-sizing: border-box !important;
    }
}
		
		
.pagination {
    max-width: 1200px;
    margin: 30px auto;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

.pagination a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #d0d0d0; 
    border-radius: 5px;          
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: all 0.3s ease;
}

.pagination a:hover {
    border-color: #005aed;
    color: #005aed;
}

.pagination a.current {
    background-color: #005aed;
    border-color: #005aed;
    color: #fff;
}

.pagination a.prev,
.pagination a.next {
    padding: 0;
}



/* =================== Support (brochure/video/blogs/faq 部分 ===================  */

/* ==== 让原 support.html 片段占位可见 (无关样式简化) ==== */
.lftrgt { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    gap: 2rem; 
    background: #fff; 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.02); 
}

/* 修复左右布局 - 让filter在左，搜索框在右 */
.lftrgt.l60 {
    display: flex;
    justify-content: space-between;  /* 左右分散对齐 */
    align-items: center;             /* 垂直居中 */
}

/* 覆盖原有的 .lftrgt.l60 > .searchBox 规则 */
.lftrgt.l60 > .searchBox {
    width: 400px;                    /* 固定宽度，覆盖原来的40% */
    flex-shrink: 0;                   /* 防止被压缩 */
}

/* 左侧 grouping-section 占满剩余空间 */
.lftrgt.l60 > .grouping-section {
    flex: 1;                          /* 占满剩余空间 */
}

.filter-group .filter-options { 
    display: flex; 
    gap: 8px; 
    flex-wrap: wrap; 
}

.btn-filter { 
    background: #f0f0f0; 
    border: none; 
    border-radius: 30px; 
    padding: 8px 20px; 
    font-size: 0.9rem; 
    cursor: pointer; 
    color: #333; 
}

.btn-filter:hover { 
    background: #e0e0e0; 
}


/* ========== 核心组件：searchBox 圆角搜索框 (浅灰底+右侧放大镜) ========== */

/* searchBox 容器 - 400x44 固定尺寸，无边框，浅灰色背景，圆角 */
.searchBox {
    width: 400px;
    height: 44px;
    background-color: #f2f4f8;
    border-radius: 60px;
    border: none;
    display: flex;
    align-items: center;
    padding: 4px 4px 4px 18px;
    transition: box-shadow 0.2s ease;
    box-sizing: border-box;
}

.searchBox:hover,
.searchBox:focus-within {
    background-color: #eef0f4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* 搜索输入框 */
.searchInput {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: #1a1e2b;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.searchInput::placeholder {
    color: #9aa1b3;
    font-weight: 300;
}

/* 搜索按钮 - 右侧放大镜  background-color: #e6e9f0;*/
.searchBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    
    border: none;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px;
    padding: 0;
    transition: background-color 0.2s;
}

.searchBtn:hover {
    background-color: #d0d5e0;
}

.searchBtn:active {
    background-color: #b9bfcd;
    transform: scale(0.97);
}

/* 放大镜图标 */
.searchIcon {
    width: 18px;
    height: 18px;
    stroke: #2c3e50;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

/* grouping-section 容器 - 与搜索框在同一行 */
.grouping-section {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;              /* 与searchBox高度一致，保证垂直对齐 */
    flex-wrap: wrap;           /* 移动端换行 */
	margin-bottom: 10px;
}

/* btn-select 基础样式 */
.btn-select {
    height: 36px;
    padding: 0 20px;
    border: 1px solid #e0e0e0;  /* 灰色线框 */
    border-radius: 20px;         /* 圆角 */
    background-color: transparent;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;         /* 防止文字换行 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* hover 效果 */
.btn-select:hover {
    border-color: #005aed;
    color: #005aed;
}

/* active 状态 - 第一个按钮默认active */
.btn-select.active {
    border-color: #005aed;
    background-color: #005aed;
    color: #fff;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .lftrgt { 
        flex-direction: column; 
        padding: 15px;           /* 减小内边距 */
        gap: 15px;               /* 减小间距 */
    }
    
    /* 覆盖移动端的原有规则 */
    .lftrgt.l60 > .searchBox {
        width: 100% !important;        /* 移动端占满 */
        max-width: 400px;                /* 最大宽度限制 */
        align-self: flex-end;            /* 靠右对齐 */
        margin-left: auto;               /* 自动左边距，实现右对齐 */
        height: 40px;                    /* 稍微降低高度 */
    }
    
    .lftrgt.l60 > .grouping-section {
        width: 100%;
        margin-bottom: 5px;              /* 减小底部间距 */
    }
    
    .grouping-section {
        height: auto;                     /* 移动端高度自适应 */
        width: 100%;
        gap: 6px;                         /* 减小按钮间距 */
        min-height: auto;                  /* 移除最小高度限制 */
    }
    
    .btn-select {
        height: 34px;                      /* 稍微降低高度 */
        padding: 0 16px;                   /* 调整内边距 */
        font-size: 13px;
        margin-bottom: 2px;                /* 换行时的底部间距 */
    }
    
    /* 为换行后的按钮组增加行高 */
    .grouping-section:has(.btn-select) {
        line-height: 1.4;                  /* 增加行高，让换行更宽松 */
    }
    
    /* 如果没有:has选择器支持，可以使用这个备用方案 */
    .btn-select {
        margin-top: 2px;                    /* 增加顶部间距 */
        margin-bottom: 2px;                  /* 增加底部间距 */
    }
}



/* =================== 链接元素交互样式 - 修改 =================== */
/* =================== 链接元素交互样式 =================== */

/* 当image-fullWrapper包含链接时的样式 */
.image-fullWrapper a {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* 图片悬停效果只在包含链接时生效 */
.image-fullWrapper a:hover img {
    transform: scale(1.08);
}

/* 无链接时图片悬停效果不变 - 这部分你已经有定义了，不用重复添加 */
/* .image-fullWrapper img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
} */

/* 当text-hl包含链接时的样式 */
.text-hl a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: color 0.3s ease;
}

.text-hl a:hover {
    color: #0056b3;
}

/* 当text-des包含链接时的样式 */
.text-des a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: color 0.3s ease;
}

.text-des a:hover {
    color: #0056b3;
}

/* 防止无链接元素出现手型 */
.product-fullCard {
    cursor: default;
}

/* 确保整个卡片点击时保持原有scale效果 */
.product-fullCard:active {
    transform: scale(0.98);
}

/* 如果希望整个卡片可点击，可以这样用（需要在HTML中把a标签包在外面） */
.product-fullCard.card-link {
    cursor: pointer;
}

.product-fullCard.card-link:active {
    transform: scale(0.98);
}

/* =================== Zoho 以及 图标 弹层部分 ===================  */


/* new zoho salesIQ style */

.zsiq_fltbtn, [id*="zsiq"] {
	position: fixed !important;
	top: 36.9% !important;
	right: 20px !important;
	z-index: 10000 !important;
	background-color: #005aed;
	
}
/* 确保对话框没有背景色（或保持默认） */
[id*="zsiq_chat"], 
.zsiq_chatwin {
    background-color: transparent !important; /* 或删除这个样式，保持默认 */
}


/* 针对 Zoho SalesIQ 对话框的强制定位 */
div[class*="zsiq_chat"],
div[id*="zsiq_chat"],
.zsiq_chatwin,
.zsiq_chatwindow,
#zsiq_chatwin,
#zsiq_chatwindow {
    position: fixed !important;
    top: 50% !important;
    right: 100px !important;  /* 离右侧100px */
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;  /* 只垂直居中，不水平居中 */
    max-height: 700px !important;
    max-width: 400px !important;
    margin: 0 !important;
}

/* 对话框内的 iframe 也调整 */
.zsiq_chatwin iframe,
.zsiq_chatwindow iframe,
[class*="zsiq_chat"] iframe {
    max-height: 600px !important;
}




/* 右侧浮动工具栏 */
.float-tools {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 浮动按钮通用样式 */
.float-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    background-color: #005aed;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
}

.float-btn:hover {
    background-color: #003aaa;
}

.float-btn:hover img {
    filter: brightness(0) invert(1);
}

.float-btn:hover span {
    color: #fff;
}

.float-btn img {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    transition: filter 0.3s ease;
}

/* 回到顶部按钮（默认隐藏） */
.back-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.back-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 修改回到顶部按钮为白色，带淡灰色阴影，悬停微变化 */
.float-btn.back-top {
    background-color: #ffffff;  /* 白色背景 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  /* 淡灰色阴影 */
    transition: all 0.3s ease;
}

.float-btn.back-top:hover {
    background-color: #f5f5f5;  /* 悬停轻微变灰 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);  /* 阴影稍微加深 */
}

/* 确保图标在白色背景下可见 */
.float-btn.back-top img {
    filter: none;
}

/* overlay样式 */
#overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 1000; 
}

/* popformContainer样式 */
#popformContainer { 
    display: none; 
    position: fixed; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001; 
}

/* thxformContainer样式 */
#thxformContainer { 
    display: none; 
    position: fixed; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1002; 
}

.NEWpopformBox {
    background: white;
    border-radius: 12px;
    padding: 30px;
    width: 450px;
    max-width: 90vw;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.NEWpoptitleBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
}

.title-right #closeButton {
    font-size: 28px;
    cursor: pointer;
    color: #999;
    line-height: 1;
}

.title-right #closeButton:hover {
    color: #333;
}

.NEWpopinputBox {
    margin-bottom: 15px;
}

.NEWpopinputField, .NEWpopmessageBox {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
}

.NEWpopmessageBox {
    resize: vertical;
    min-height: 80px;
}

.NEWpopnoteInfo {
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
}

.NEWpopSubmitBTN {
    background-color: #007bff;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

.NEWpopSubmitBTN:hover {
    background-color: #0056b3;
}

.thxrespForm {
    background: white;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    width: 350px;
    max-width: 90vw;
}

.thxInfo {
    font-size: 24px;
    font-weight: bold;
    color: #28a745;
    display: block;
    margin-bottom: 15px;
}

.thxDes {
    margin-bottom: 25px;
    color: #666;
}

.thxcloseBTN {
    background-color: #6c757d;
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.thxcloseBTN:hover {
    background-color: #5a6268;
}


@media (max-width: 768px) {
    /* 自定义浮动按钮 - 移到右下角 */
    .float-tools {
        top: auto !important;           /* 取消顶部定位 */
        bottom: 30px !important;         /* 距离底部30px */
        right: 15px !important;          /* 距离右侧15px */
        transform: none !important;      /* 取消垂直居中变换 */
    }
    
    .float-btn {
        width: 45px;
        height: 45px;
    }
    
    .back-top {
        width: 45px;
        height: 45px;
    }
    
    /* Zoho SalesIQ 按钮 - 移到右下角 */
    .zsiq_fltbtn, [id*="zsiq"] {
        top: auto !important;            /* 取消顶部定位 */
        bottom: 125px !important;        /* 距离底部125px */
        right: 15px !important;          /* 距离右侧15px */
		margin-right: -5px !important;  
		margin-bottom: 10px !important;  
    }
    
    /* 对话框在移动端居中显示 */
    div[class*="zsiq_chat"],
    div[id*="zsiq_chat"],
    .zsiq_chatwin,
    .zsiq_chatwindow {
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 350px !important;
    }
	
	
	
	.NEWpopformBox {
		width: calc(100vw - 32px) !important;  
		max-width: 100vw !important;            
		margin-left: 16px !important;          
		margin-right: 16px !important;         
		box-sizing: border-box;                
	}

	.thxrespForm {
		width: calc(100vw - 32px) !important;   
		max-width: 100vw !important;             
		margin-left: 16px !important;           
		margin-right: 16px !important;          
		box-sizing: border-box;              
	}
}


/* =================== About 部分 ===================  */


.abtContainer {
	max-width: 1200px;
	margin: 0 auto;
	margin-top: 40px;
	
	display: flex;
	align-items: flex-start;	
}

.left-section {
    width: 520px;
    position: relative;
    flex-shrink: 0;
    height: 420px;
}

.left-image-wrapper {
    position: absolute;
    width: 500px;
    height: 310px;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #232f45 0%, #1a2436 100%);
    z-index: 2;
    overflow: hidden;
}

.left-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blue-layer {
    position: absolute;
    width: 465px;
    height: 270px;
    background: #005aed;
    left: 47px;      /* 500 - 465 + 12 = 47 */
    top: 52px;       /* 310 - 270 + 12 = 52 */
    z-index: 1;
}

.right-section {
	width: 640px;
	margin-left: 40px;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-self: flex-start;
	height: auto;
}

/* 蓝色线条 */
.right-section-line-blue {
	width: 80px;
	height: 8px;
	background-color: #005aed;
	margin: 16px 0;
}

.right-section .text-cate{
	margin: 0;
}


.text-layer-quo {
	font-weight: 500;
	color: #005aed;
	line-height: 1.2;
}

.quote-icon {
	font-size: 48px;
	line-height: 1;
}

	
/* 移动端适配 */
@media (max-width: 768px) {
    .abtContainer {
        flex-direction: column-reverse;  /* 上下对调：文字在上，图片在下 */
        padding-left: 16px;   /* 只定义左右 */
        padding-right: 16px;
		overflow: visible;
    }

    .left-section {
        width: 100%;
        height: auto;
        position: relative;
		box-sizing: border-box;
    }

    .left-image-wrapper {
        position: relative;
        width: 100%;          /* 填满容器 */
		max-width: 100%;      /* 确保不溢出 */
        height: auto;
        aspect-ratio: 500 / 310;
        left: auto;
        top: auto;
		box-sizing: border-box; /* 确保padding border不计入宽度 */
    }

    .blue-layer {
        display: none;        /* 移动端隐藏蓝色背景 */
    }

    .right-section {
        width: 100%;
        margin-left: 0;
        padding: 0 0 30px 0;  /* 底部间距，顶部无间距 */
		box-sizing: border-box;
    }
}



.voc-section-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

.voc-section {
	overflow: hidden;
}

.voc-container {
	display: flex;
	gap: 16px;
	width: 1200px;  /* 固定宽度：592*2 + 16 = 1200 */
	transition: transform 0.3s ease;
}

.voc-card {
	width: 592px;
	height: 273px;
	background: #f5f5f5;
	border-radius: 8px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	flex-shrink: 0;
}

.voc-icon {
	width: 32px;
	height: 32px;      
	
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	margin-bottom: 16px;
}

.voc-content {
	height: 116px;
	font-size: 14px;
	line-height: 1.6;
	color: #5a6a85;
	overflow: hidden;
	margin-bottom: auto;
}

.voc-info {
	margin-top: 16px;
	padding-top: 16px;
	
	text-align: right;
}

.voc-name {
	font-size: 16px;
	font-weight: 600;
	color: #232f45;
	margin-bottom: 4px;
}

.voc-position {
	font-size: 13px;
	color: #8b95a8;
}

/* 左右翻页按钮 - 覆盖在1200容器外层 */
.voc-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	background: rgba(35, 47, 69, 0.4);  /* 深灰色带40%透明度 */
	border: none;
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s;
	z-index: 10;
}

.voc-nav-btn:hover {
	background: #005aed;
}

.voc-prev {
	left: 0px;  /* 改为正值，在容器内部左侧 */
}

.voc-next {
	right: 0px;  /* 改为正值，在容器内部右侧 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .voc-nav-btn {
        display: none;
    }

    .voc-section-wrapper {
        padding-left: 16px;
        overflow: hidden;
    }

    .voc-section {
        overflow: visible;
    }

    .voc-container {
        width: auto;
        display: flex;
        gap: 12px;  /* 减小间隙 */
        transform: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .voc-container::-webkit-scrollbar {
        display: none;
    }

    .voc-card {
        width: 78vw;  /* 屏幕宽度的78%，留出空间给下一个卡片 */
        max-width: 300px;
        height: auto;
        min-height: auto;
        flex-shrink: 0;
        scroll-snap-align: start;
        padding: 20px;
    }

    .voc-content {
        /* max-height: 225px;   */
        /* -webkit-line-clamp: 6;   */
		flex: 1;  /* 让内容区域自动填充剩余空间 */
		height: auto;
		min-height: 0;  /* 防止flex溢出 */
    }

    /* 移除之前的负margin，改用calc计算宽度来露出下一个卡片 */
    .voc-card:last-child {
        margin-right: 16px;  /* 最后一个卡片右侧留间距 */
    }
}

/* =================== About ETD 部分 ===================  */

.etd-section-wrapper {
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    max-width: 2800px;
    margin-bottom: -40px;
    width: 100%; 
    padding: 60px 20px; 
}

.etd-content-container {
    width: 100%;
    max-width: 1200px;
}

.etd-main-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 40px;
    font-weight: 400;
}

/* --- FAQ 列表 --- */
.etd-list {
    <!-- border-top: 1px solid #e0e0e0; -->
}

/* --- FAQ 项：PC端横向布局 --- */
.etd-item {
    border-bottom: 1px solid #e0e0e0;
	border-bottom: none; /* 移除1px边框线 */
    background-color: #FAFAFA; /* 添加背景色 */
    border-radius: 8px; /* 可选：添加圆角更美观 */
	margin-bottom: 16px; /* 卡片间距 */
	
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 12px 24px; /* 上下从24px减小到12px，左右保持24px */
}


/* --- 左侧：图片容器 --- */
.etd-item-wrapper {
    flex-shrink: 0;
    width: 240px;
    height: 240px;
    background-color: #fff;
    <!-- border: 1px solid #e0e0e0; -->
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.etd-item-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
    box-sizing: border-box;
}

/* --- 右侧：内容区（标题+描述）--- */
.etd-item-content {
    flex: 1;
    min-width: 0; /* 防止 flex 子项溢出 */
}

/* 标题 */
.etd-item-content .text-hl {
    padding: 8px 40px 8px 0; /* 上下增加一点padding */ /* 右侧留出 +/- 空间 */
    cursor: pointer;
    position: relative;
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

/*  图标 */
.etd-item-content .text-hl::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666;
    background: #fff;
    transition: all 0.2s ease;
}

.etd-item.active .text-hl::after {
    content: '-';
}

/* 描述区：默认收起 */
.etd-item-content .etd-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.etd-item.active .etd-answer {
    max-height: 500px;
}

.etd-item-content .text-des {
    padding-top: 0;
    line-height: 1.6;
    color: #666;
    font-size: 16px;
}

/* --- 底部链接 --- */
.etd-footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* 移动端图片溢出问题 */
@media (max-width: 768px) {
    .etd-section-wrapper {
        padding: 40px 15px;
    }
    
    /* 确保卡片不溢出 */
    .etd-item {
        width: 100%;
        box-sizing: border-box; /* 确保padding不导致溢出 */
        padding: 0 20px; /* 移动端更小 */
        gap: 16px;
    }
    
    /* 垂直布局 */
    .etd-item {
        flex-direction: column;
    }
    
    /* 图片容器：保持方形，宽度自适应，不溢出 */
    .etd-item-wrapper {
        order: 2;
        width: 100%;
        aspect-ratio: 1 / 1; /* 保持1:1方形 */
        height: auto; /* 高度由aspect-ratio决定 */
        max-width: 100%; /* 确保不溢出父容器 */
        padding: 16px;
        box-sizing: border-box;
    }
    
    /* 图片本身限制 */
    .etd-item-wrapper img {
        width: 100%;
        height: 100%;
        max-height: none; /* 移除之前的max-height限制 */
        object-fit: contain;
        padding: 0;
    }
    
    /* 内容区 */
    .etd-item-content {
        order: 1;
        width: 100%;
    }
    
    .etd-item-content .text-hl {
        font-size: 20px;
         padding: 8px 35px 8px 0; /* 移动端上下padding */
    }
    
    .etd-item-content .text-des {
        font-size: 15px;
    }
}



/* =================== Instrument 部分 ===================  */


.main-container {
	max-width: 1200px;
	margin: 20px auto;
	display: flex;
	gap: 30px;
	padding: 20px;
	margin-top: 40px;
}

/* --- 左侧导航 --- */
.sidebar {
	flex: 0 0 280px;
}

.nav-menu {
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}

.menu-header {
	padding: 15px;
	font-size: 16px;
	font-weight: 500;
	color: #1d1d1d;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	transition: background 0.2s;
}

.menu-header:hover {
	background: #f8f9fa;
}

.submenu {
	display: none;
	border-bottom: 1px solid #ddd;
}

.submenu.show {
	display: block;
	background-color: #FAFAFA;
}

.submenu-item {
	padding: 12px 20px;
	font-size: 16px;
	font-weight: 400;
	color: #606060;
	cursor: pointer;
	border-bottom: 1px solid #f5f5f5;
	display: flex;
	justify-content: space-between;
	transition: all 0.2s;
}

.submenu-item:last-child {
	border-bottom: none;
}

.submenu-item:hover {
	color: #005aed;
	padding-left: 25px;
}

/* 子导航高亮 */
.submenu-item.active {
	background-color: #eef5ff;
	color: #005aed;            
	border-left: 4px solid #005aed;
}

/* --- 右侧产品展示 --- */
.product-section {
	flex: 1;
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.product-card {	
	background: #fff;
	padding: 15px 0;
	transition: all 0.3s;
}
.light-border {
    border: 1px solid #eee;
}

@media (min-width: 769px) {
	.product-card.light-border{	
		width: 284px !important;
	}
}
/* ---   
.product-card:hover {
	box-shadow: 0 4px 12px rgba(211, 211, 211, 0.3); 
	border-color: #E2E2E2;
}
--- */

.product-image {
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
	background: #fdfdfd;
}

.product-image img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
}

/* 产品信息 */
.product-info {
    flex-grow: 1;
	padding: 0 10px;
}

.product-info h3 { font-size: 15px; margin: 0 0 10px 0; overflow: hidden; }
.product-info p { line-height: 1.5; margin: 0; }

.more-wrapper {
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0;
}
.more-wrapper a { transition: all 0.3s ease; padding: 5px 10px; }
.product-link { text-decoration: none; color: inherit; display: block; }
.product-card:hover .product-link h3 { color: #005aed; }

/* --- 移动端特有样式控制 --- */
.mobile-nav-toggle, .mobile-active-item {
	display: none; /* PC端默认隐藏 */
}

		
@media (max-width: 768px) {
    /* 1. 重置所有继承的样式 */
    .main-container { 
        flex-direction: column !important; 
        gap: 0 !important;
        margin: 0 auto !important;
        padding: 10px 15px !important;
    }

    .sidebar { 
        width: 100% !important;
        flex: none !important;
        height: auto !important;
        min-height: auto !important;
        margin-bottom: 0 !important;
        position: relative;
        background: transparent !important; /* 无背景 */
        border: none !important; /* 无边框 */
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* 2. Products 标题栏 - 无边框无背景 */
    .mobile-nav-toggle {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0 !important; /* 减少内边距 */
        margin: 0 !important;
        background: transparent !important; /* 无背景 */
        border: none !important; /* 无边框 */
        width: 100%;
        font-weight: bold;
        font-size: 18px;
        cursor: pointer;
        position: relative;
    }

    /* 3. +/- 按钮 - 确保正确位置 */
    .mobile-nav-toggle::after {
        content: '+';
        width: 24px;
        height: 24px;
        border: 1px solid #ccc;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        font-size: 18px;
        line-height: 1;
        background: #fff;
        box-sizing: border-box;
        position: absolute !important;
        right: 0 !important; /* 固定右侧位置 */
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .sidebar.expanded .mobile-nav-toggle::after { 
        content: '-'; 
    }

    /* 4. 蓝色选中项 - 无背景 */
    #mobileActiveDisplay {
        display: block !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        color: #005aed;
        font-weight: 500;
        border-bottom: 1px solid #005aed;
        background: transparent !important; /* 无背景 */
        font-size: 14px;
        line-height: 1.2;
    }
    
    /* 菜单展开时隐藏蓝色选中项 */
    .sidebar.expanded #mobileActiveDisplay {
        display: none !important;
    }

    /* 5. 菜单浮层 - 无边框无背景 */
    .nav-menu {
        display: none !important; 
        position: absolute !important;
        top: 40px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1001;
        background: #fff !important;
        border: 1px solid #ddd !important;
        margin-top: 0 !important;
        padding: 0 !important;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
    }
    
    .sidebar.expanded .nav-menu { 
        display: block !important; 
    }

    /* 6. 菜单内部元素去边框 */
    .nav-menu .menu-group {
        border: none !important;
    }
    
    .nav-menu .menu-header {
        background: #fff !important;
        border-bottom: 1px solid #eee !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
    }
    
    .nav-menu .submenu {
        background: #fff !important;
        border: none !important;
    }
    
    .nav-menu .submenu.show {
        display: block !important;
        background: #fff !important;
    }
    
    .nav-menu .submenu-item {
        background: #fff !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f5f5f5 !important;
    }
    
    .nav-menu .submenu-item.active {
        background-color: #eef5ff !important;
    }

    /* 7. 产品网格 */
    .product-section {
        margin-top: 10px !important;
        padding-top: 0 !important;
    }
    
    .product-grid { 
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-top: 5px !important;
    }
    
    .product-image { 
        height: 100px !important; 
    }
    
    .product-card {
        padding: 10px 0 !important;
		box-sizing: border-box !important; /* 添加这一行 */
		width: 100% !important; /* 确保宽度不超出父容器 */
        margin: 0 !important; /* 确保没有外边距 */
        overflow: hidden !important; /* 防止内容溢出 */
    }
    
    .product-info h3 {
        font-size: 13px !important;
        margin-bottom: 5px !important;
    }
    
    .product-info p {
        line-height: 1.3 !important;
    }
}


/* =================== Instrument 详情页 部分 ===================  */



/* 整体布局结构 */
.product-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; /* 移动端默认单列 */
    gap: 30px;
    align-items: start;
}

/* 桌面端适配 (992px以上) */
@media (min-width: 992px) {
    .product-wrapper {
        grid-template-columns: 1.2fr 436px; /* 恢复左右布局 */
        gap: 60px;
    }
	
    /* 当没有缩略图时，调整图片区域宽度 */
	.product-wrapper:has(.product-gallery:not(.has-thumbnails)) {
		grid-template-columns: 1.5fr 324px;
	}
	
    .product-info {
        order: 1; /* 桌面端文字在左 */
    }
    
    .product-gallery {
        order: 2; /* 桌面端图片在右 */
    }
}

/* 移动端适配 (768px以下) */
@media (max-width: 768px) {
    /* 整体布局结构 */
	.product-wrapper {		
		margin: 0;
	}
	.product-info {
        order: 2; /* 移动端文字移到下方 */
        text-align: left;
    }
    
    .product-gallery {
        order: 1; /* 移动端图片移到最上方 */
        margin-bottom: 20px;
    }


}

/* 左侧文本样式 */

.product-description p {
    margin-bottom: 20px;   
    font-size: 16px;
	font-weight: 300;
}

.brochure-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0056b3;
    text-decoration: none;
    margin-top: 20px;
    font-weight: 500;
}

.brochure-link img {
    height: 20px;
    width: auto;
}

/* 右侧图片区域核心逻辑 */
.product-gallery {
    display: grid;
    grid-template-columns: 324fr 100fr; /* 保持大图与缩略图比例 */
    gap: 12px;
    width: 100%;
    max-width: 436px;
    box-sizing: border-box;
}

/* 当没有缩略图时，图片区域改为单列并缩小宽度 */
.product-gallery:not(:has(.thumbnails-column)) {
    grid-template-columns: 1fr;
    max-width: 324px; /* 缩小到只有大图的宽度 */
}

/* 左侧大图区域 */
.main-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* 确保高度对齐关键 */
    border: 1px solid #eee;
    background: #fcfcfc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-image-container img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* 放大镜图标 */
.zoom-trigger {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: transform 0.2s;
    z-index: 10;
}

.zoom-trigger img {
    width: 100%;
    height: 100%;
}

/* 右侧缩略图列 */
.thumbnails-column {
    display: grid;
    grid-template-rows: repeat(3, 1fr); /* 垂直平分三块 */
    gap: 12px;
}

.thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumb img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

.thumb.active {
    border-color: #005AED;
}

/* 弹层原图样式 */
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}


.SpecUL-details { 
    list-style: none; 
    padding: 0; 
    margin: 0;
    display: block;
    width: 100%;
}

.SpecUL-details li { 
    margin-bottom: 12px; 
    display: grid;
    grid-template-columns: minmax(200px, auto) 1fr;
    gap: 20px;
    align-items: start;
}

.SpecUL-details span {  
    font-weight: 500; 
    color: #000;
    white-space: nowrap; /* 左侧文本不换行 */
	min-width: 300px; /* 最小宽度保证对齐 */
}

.AppUL-details { 
    list-style: none; 
    padding: 0; 
    margin: 0;
    display: block;
    width: 100%;
}

.AppUL-details li { 
    margin-bottom: 12px; 
    display: grid;
    /* 增加一列放圆点 */
    grid-template-columns: auto minmax(150px, auto) 1fr;
    gap: 12px 20px; /* 行间距 12px，列间距 20px */
    align-items: center; /* 垂直居中对齐 */
}

/* 添加小圆点 */
.AppUL-details li::before {
    content: "•"; /* 圆点字符 */        
    color: #000;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px; /* 固定宽度保证对齐 */
}

.AppUL-details span {  
    font-weight: 500; 
    color: #000;
    white-space: nowrap;
    min-width: 150px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .SpecUL-details li { 
        grid-template-columns: 1fr; /* 移动端改为单列 */
        gap: 5px;
    }
    
    .SpecUL-details span {  
        white-space: normal; /* 移动端允许换行 */
        font-weight: 500;
    }
    .AppUL-details li { 
        /* 两列：圆点 + 内容区 */
        grid-template-columns: 16px 1fr;
        gap: 0 8px; /* 垂直无间距，水平8px */
        align-items: start; /* 顶部对齐 */
    }
    
    /* 圆点第一列，垂直居中或顶部 */
    .AppUL-details li::before {
        grid-column: 1;
        grid-row: 1 / span 2; /* 跨两行，或者只占第一行 */
        align-self: start; /* 顶部对齐 */
        margin-top: 2px; /* 微调对齐 */
    }
    
    /* span 和 内容都在第二列，自然流换行 */
    .AppUL-details li > * {
        grid-column: 2;
    }
    
    /* span 保持不换行 */
    .AppUL-details span {  
        white-space: nowrap;
        min-width: auto;
        display: inline; /* 行内显示 */
        margin-right: 4px; /* 和内容间距 */
    }
    
    /* 内容紧跟span后面，自动换行 */
    .AppUL-details li {
        white-space: normal;
    }
}


      
.page-wrapper {
	width: 100%;
	max-width: 2800px;
	margin: 0 auto;
	padding: 18px 0 0 0;
}

/* 容器设为 0 padding，确保两端对齐 */
.insContainer {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0; 
}

/* --- 统一重命名为 insProduct 的样式块 --- */

/* 网格布局 */
.insProduct-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 20px;
	width: 100%;
}

/* 产品卡片：无边框，保持原有间距和过渡 */
.insProduct-card {
	display: flex;
	align-items: center; /* 确保图片和文字区域整体垂直对齐 */
	gap: 20px;
	padding: 15px;
	border-radius: 8px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	background: #fff;
	/* 确保内部元素不超出 */
	box-sizing: border-box;
}

.insProduct-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* 图片容器：固定比例 160x100 */
.insImage-box {
	flex-shrink: 0;
	width: 120px;
	height: 100px;
	background-color: #f5f5f5;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.insImage-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 产品信息 */
.insProduct-info {
	flex-grow: 1;
}

.insProduct-name {
	font-size: 16px;
	color: #333;
	margin: 0 0 12px 0;
	font-weight: 500;
	line-height: 1.4;
}

/* 标签样式 */
.insTag-rp {
	display: inline-block;
	background-color: #e8f2ff;
	color: #0066ff;
	padding: 2px 8px;
	border-radius: 2px;
	font-size: 12px;
	font-weight: bold;
}

.insProduct-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.insProduct-card-link:hover {
    transform: translateY(-5px);
}

/* 确保卡片在链接内保持原有样式 */
.insProduct-card-link .insProduct-card {
    height: 100%;
    transition: none; /* 移除卡片自身的悬停效果，使用链接的悬停效果 */
}

.insProduct-card-link:hover .insProduct-card {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}


/* --- 响应式适配 --- */

@media (max-width: 992px) {
	
    /* 移动端两列布局，缩小间距 */
    .insProduct-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;  /* 关键：移除左右内边距 */
        margin: 0 !important;
    }
    
    .insProduct-card {
        padding: 8px !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .insImage-box {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
    }
    
    .insProduct-info {
        width: 100% !important;
    }
    
    .insProduct-info .text-des {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }
	
}

@media (max-width: 768px) {
	/* 移动端两列布局，缩小间距 */
	.insProduct-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 6px !important;
		padding: 0 10px; /* 移动端增加微小边距防止完全贴边 */
	}
	
	.insProduct-card {
		padding: 2px !important;
		flex-direction: column !important;
		gap: 6px !important;
	}
	
	.insImage-box {
		width: 100% !important;
		height: auto;
		aspect-ratio: 16/10;
	}

	.insProduct-name {
		font-size: 14px !important;
		line-height: 1.3 !important;
		/* 限制两行文本 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}


/* =================== Product Container 完整样式 =================== */

.product-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: transparent;
    box-sizing: border-box;
}

/* 如果需要内边距控制 */
.product-container.has-padding {
    padding: 20px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .product-container {
        padding-left: 0;
        padding-right: 0;
    }
}




/* =================== Column 页面 ===================  */

/* =================== Column 页面样式 =================== */
/* 注意：这是合并后的版本，删除内联style中的重复定义 */

/* 1. 面包屑导航 */
.breadcrumb-wrapper { 
    background: #fff;
    padding: 10px 0 10px 0;  /* 上下各增加更多间距 */
}

.breadcrumb {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px; 
    font-size: 14px; 
    color: #666;
}

.breadcrumb a { 
    /* color: #666; */
	color: #70a0ff;  /* 浅蓝色 */
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.breadcrumb a:hover {
    color: #005aed;  /* 悬停变为蓝色 */
    /* text-decoration: underline;   可选：加下划线增强交互感 */
}

/* 2. Tabs 区域 (PC端吸顶) */
.tabs-wrapper {
    background-color: #eef5ff;
    width: 100%;
    position: sticky;
    top: 80px;  /* 注意：内联用的是top:0，combine.css用的是top:80px，保留combine.css的80px */
    z-index: 10;
}

.tabs-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex; 
    justify-content: center;
}

.tab-item {
    padding: 15px 30px;  /* 内联用15px，combine用23px，采用内联的15px更合适 */
    cursor: pointer; 
    color: #666;
    font-weight: 500; 
    text-decoration: none; 
    transition: 0.3s;
}
.tab-item.active { 
    color: #0066ff;
    background: #fff; 
}

/* 移动端tabs滚动 - 保留combine.css中的实现，它更完善 */
/* 修改移动端 tabs 滚动样式 */
@media (max-width: 768px) {
    .tabs-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        position: sticky;
        top: 60px;
        z-index: 99;
        background-color: #eef5ff;
    }
    
    .tabs-wrapper::-webkit-scrollbar {
        height: 3px;
    }
    
    .tabs-wrapper::-webkit-scrollbar-track {
        background: #e0e0e0;
    }
    
    .tabs-wrapper::-webkit-scrollbar-thumb {
        background: #005aed;
        border-radius: 3px;
    }
    
    .tabs-container {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding: 0 16px !important;
        min-width: 100%;
        width: max-content;
        gap: 4px;
    }
    
    .tab-item {
        display: inline-block;
        flex-shrink: 0;
        padding: 12px 20px;
        white-space: nowrap;
    }
}


/* 3. 通用内容容器 */
/* .content-box {  */
    /* max-width: 1200px; */
    /* margin: 0 auto;  */
    /* padding: 20px 16px;  /* 保留内联的50px，combine.css中用的是0 */ */
/* } */
.full-bg-gray { 
    background-color: #f8f9fa;
    width: 100%; 
    
	box-sizing: border-box; /* 确保padding不会影响宽度计算 */
}
/* 重置内部contact部分的样式 */
.full-bg-gray .content-box {
    margin: 0 auto;  /* 水平居中 */
    padding-top: 50px;    
}

.content-box .contact-note {
	text-align: center;
	text-align: left; color: #666; font-size: 16px; margin-bottom: 45px;
}


h2 { 
    font-size: 26px; 
    margin-top: 0; 
    margin-bottom: 25px; 
	text-align: left;
}


/* 4. 标题渐变背景 - 采用内联版本，combine.css中缺少这个 */
.gradient-title {
    background: linear-gradient(to right, #e8f0fe, #fff); 
    padding: 10px 20px; 
    border-left: 4px solid #0066ff;
    margin: 30px 0 15px 0; 
    font-weight: bold;
}

/* 5. 布局控制 - 合并两个版本 */
.grid-layout { 
    display: flex; 
    gap: 40px; 
    margin-bottom: 30px;
    line-height: 1.6; 
    color: #333;
    scroll-behavior: smooth;
}
.grid-text { flex: 1; }
.grid-image { 
    flex: 0 0 550px; 
    border:none;
}
.grid-image img { 
    width: 100%; 
    display: block; 
}
.grid-image-small { 
    flex: 0 0 350px; 
    border:none;          
}
.grid-layout h1 { 
    font-size: 32px;
	font-weight: 500;
}

/* Application 区域 (图文并排卡片) - 合并两个版本 */
.app-item {
    display: grid; 
    grid-template-columns: 450px 1fr; 
    gap: 30px;
    margin-bottom: 50px; 
}        
.app-info h3 { 
    margin: 10px auto;  /* 合并：内联的margin-top:0 + combine的margin:10px auto */
    color: #444; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 10px; 
}
.app-detail { 
    font-size: 16px; 
	font-weight: 400; 
    list-style: none; 
    padding: 0; 
}
.app-detail li { 
    margin-bottom: 8px; 
    display: flex; 
	
}
/* 使用combine.css中的span版本，更灵活 */
.app-detail span {  
    width: auto;
    min-width: 160px;
    flex-shrink: 0; 
    font-weight: 500; 
    color: #000;
}
/* 同时保留b版本以兼容现有HTML */
.app-detail b { 
    width: 160px; 
    flex-shrink: 0; 
    font-weight: 500; 
}



/* 让链接内的文字和图标在同一行并垂直对齐 */
.app-detail li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
	color: #005AED;
	font-weight: 400;
	display: inline-block;
}
.app-detail li a::after {
    content: " ›";
    display: inline;
	margin-left: 6px;  
}

/* 图标尺寸限制 */
.app-detail li img {
    max-width: 40px;
    max-height: 40px;
    width: auto;
    height: auto;
    display: inline-block;
	margin: 0;
}

/* 移动端app-details调整 */
@media (max-width: 768px) {
    .app-detail span {
        min-width: 100px;
    }
}



/* /* 通用表格样式 - 适用于没有特定类名的表格 */ */
/* table:not([class]) { */
    /* width: 100%; */
    /* border-collapse: collapse; */
    /* background: #fff; */
    /* margin: 20px 0;  /* 添加上下间距 */ */
    /* min-width: 600px;  /* 如果有需要可以保留，或移除 */ */
    /* overflow-x: auto; */
    /* display: block;  /* 让表格在移动端可滚动 */ */
/* } */

/* /* 通用表格的表头样式 - 无背景色 */ */
/* table:not([class]) th { */
    /* padding: 12px; */
    /* border: 1px solid #e0e0e0; */
    /* font-size: 14px; */
    /* font-weight: 600;  /* 稍微加粗以区分 */ */
    /* color: #333;  /* 深灰色文字 */ */
     /* /* background: transparent;  无背景色 */ */
	/* background: #fafafa;  /* 极浅灰色背景，可选 */ */
    /* text-align: center; */
/* } */

/* /* 通用表格的单元格样式 */ */
/* table:not([class]) td { */
    /* padding: 12px; */
    /* text-align: center; */
    /* border: 1px solid #e0e0e0; */
    /* font-size: 14px; */
    /* color: #666; */
/* } */

/* 通用表格的第一行如果是表头行（没有th但有特殊样式需求） */
/* table:not([class]) tr:first-child td { */
    /* font-weight: 500; */
    /* background: #fafafa;  /* 极浅灰色背景，可选 */ */
/* } */


/* 表格样式 - 合并两个版本 */
.table-res { 
    overflow-x: auto; 
}
.table-res table { 
    width: 100%; 
    border-collapse: collapse; 
    background: #fff; 
    min-width: 600px; 
}
.table-res th { 
    background: #eef4ff; 
    color: #0066ff;
    padding: 12px; 
    border: 1px solid #e0e0e0;
    font-size: 14px;
    font-weight: normal;  /* 采用内联的normal */
}
.table-res td { 
    padding: 12px; 
    text-align: center; 
    border: 1px solid #e0e0e0;
    font-size: 14px; 
}


/* 给没有类名的无序列表和有序列表添加缩进 */
ul:not([class]),
ol:not([class]) {
    margin-top: 20px; 
	margin-left: 12px;  /* 整体左缩进20px */
    padding-left: 0;     /* 重置内边距 */
}

/* 列表项样式 */
ul:not([class]) li,
ol:not([class]) li {
    margin-bottom: 12px;  /* 列表项之间的间距 */
    line-height: 1.6;    /* 行高 */
    color: #666;         /* 文字颜色 */
    font-size: 14px;     /* 字体大小 */
}

/* 有序列表项 - 单独调整数字和文本的间距 */
ol:not([class]) li {
    padding-left: 12px;   /* 在数字和文本之间添加间距 */
    margin-left: 16px;   /* 增加整体缩进，给数字留出空间 */
}

/* 嵌套列表的处理（二级列表） */
ul:not([class]) ul,
ul:not([class]) ol,
ol:not([class]) ul,
ol:not([class]) ol {
    margin-left: 20px;   /* 嵌套列表再缩进20px */
    margin-top: 12px;     /* 与上级列表的间距 */
    margin-bottom: 12px;
}


/* 通用列表样式 - 从内联迁移 */
.general-list {
    margin-left:20px; 
    line-height:1.8; 
    font-size:14px;
}

/* 图片盒子样式 - 从内联迁移 */
.image-box {
    background-color: #FFF; 
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 16 / 8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    margin-bottom: 15px;
    transition: background-color 0.3s ease;
    position: relative;
}
.image-box img {            
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 0;
}

/* 通用表格样式 */
/* .articleContent {  */
    /* overflow-x: auto;  */
/* } */
.articleContent table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
	margin: 20px auto;
}
.articleContent th {
    background: #eef4ff;
    color: #0066ff;
    padding: 12px;
    border: 1px solid #e0e0e0;
    font-weight: 400;
}
.articleContent td {
    padding: 12px;
    text-align: center;
    border: 1px solid #e0e0e0;
}


/* 通用表格样式 */
.general-table { 
    overflow-x: auto; 
}
.general-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}
.general-table th {
    background: #eef4ff;
    color: #0066ff;
    padding: 12px;
    border: 1px solid #e0e0e0;
    font-weight: 400;
}
.general-table td {
    padding: 12px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

/* 表单样式 */
.contact-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
}
.form-full { 
    grid-column: span 2; 
}
input, textarea { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    box-sizing: border-box; 
}
.btn-submit {
    background: #005AED;
    color: #fff; 
    border: none;
    padding: 12px 60px; 
    border-radius: 30px; 
    cursor: pointer;
    margin: 20px auto; 
    display: block; 
    font-size: 16px;
}

/* 移动端整体适配 - 合并两个版本 */
@media (max-width: 768px) {
    /* 隐藏tabs（如果需要） - 注释掉，因为combine.css中有滚动实现 */
    /* .tabs-wrapper { display: none; }  */
    
    #features .grid-layout { 
        flex-direction: column-reverse; 
    }
    
    .grid-layout { 
        flex-direction: column; 
        gap: 20px; 
    }
    
    .grid-image { 
        flex: 1 0 auto; 
        width: auto; 
    }
    
    .grid-image-small {
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
    }
    
    .grid-image-small img {
        width: auto;
        max-width: 100%;
        max-height: 300px;
    }
	
	.grid-layout h1 { 
		font-size: 20px;
		font-weight: 500;
	}
		
    .contact-grid { 
        grid-template-columns: 1fr; 
    }
    
    .form-full { 
        grid-column: span 1; 
    }
    
    .content-box { 
        padding: 30px 16px;  /* 采用combine.css的16px */
    }
}

/* =================== Column 页面样式增强 =================== */

/* features 版块的 h1 底部间距 */
#features .grid-text h1 {
    margin-bottom: 30px;
}

/* gradient-title 和 table 作为 section 直接子元素时，不需要额外边距 */
section > .gradient-title,
section > .general-table {
    margin-left: 0;
    margin-right: 0;
}

/* grid-image-small 的最大宽度限制 - 使用辅助类 */
.grid-image-small.maxw300 {
    flex: 0 0 280px !important;  /* 覆盖原有的 flex: 0 0 350px */
    max-width: 280px;
    width: 100%;
}

/* 确保图片在容器内正确显示 */
.grid-image-small.maxw300 img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
}

/* 所有直接位于 grid-text 内的 ul 的顶部间距 */
.grid-text > ul {
    margin-top: 30px;
}

/* gradient-title 后面的 p 和 ul 增加顶部间距 */
.gradient-title + p,
.gradient-title + ul,
.gradient-title + .general-list {
    margin-top: 20px;
}

/* 连续的两个 gradient-title 之间的间距（如 "Amber GPC" 和 "Specification" 之间） */
.gradient-title + .gradient-title {
    margin-top: 30px;
}

/* p 后面的 ul 增加间距 */
p + ul,
p + .general-list {
    margin-top: 20px;
}

/* =================== 部分 ===================  */
/* 新容器 可选：添加左右内边距，防止内容贴边 */
.cusListContainer {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* =================== Application Index 二级索引部分 ===================  */



/* Tabs 选中状态（确保你的现有代码里有这个） */
.tabs-wrapper .tab-item.active {
    color: #005AED;
    border-bottom: 2px solid #005AED;
}

/* 隐藏不匹配的项 */
.app-card.hidden {
    display: none;
}


/* 容器设置 */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 15px;
}

/* 核心网格：PC端每行3个，gap 9px */
.app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* 卡片样式：基于你提供的 HTML 结构 */
.app-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e5e5e5; /* 1px 灰色线框 */
    position: relative;
    transition: all 0.3s ease;
    height: 100%;
    box-sizing: border-box;
}

/* 装饰：悬停时左侧出现蓝色竖线 */
.app-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #005AED; /* 品牌蓝 */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-card:hover {
    border-color: #ccc;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.app-card:hover::before {
    opacity: 1; /* 悬停显示蓝线 */
}

/* 内容区域内边距 */
.app-card-content {
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 标题：黑色加粗 */
.app-card-title {
    font-size: 18px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 15px;
    height: 48px; /* 固定高度确保对齐 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 列表样式：中间的三个信息点 */
.app-card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    flex-grow: 1; /* 撑开空间 */
}

.app-card-list li {
    font-size: 14px;
    color: #666;
    padding-left: 15px;
    position: relative;
    margin-bottom: 8px;
    line-height: 1.3;
}

/* 列表前面的小圆点 */
.app-card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    background: #005AED;
    border-radius: 50%;
}

/* 底部描述文本：对应你的 app-card-more */
.app-card-more {
    font-size: 14px;
    
    line-height: 1.5;
    border-top: 1px solid #f0f0f0;
    
    margin-top: auto;
    display: block;
	
	padding: 10px 10px;
	
	color: #005AED;
	background-color: #eef5ff; 
}

/* 响应式：移动端每行一个 */
@media (max-width: 768px) {
    .app-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
	
	.app-card-content {
		padding: 16px 12px;
	}
	
    .cusListContainer {
        padding-left: 8px !important;
        padding-right: 8px !important;
        width: calc(100% - 16px) !important; /* 确保宽度不溢出 */
    }
}


/* 隐藏不匹配/未加载的项 */
.app-card.hidden {
    display: none;
}


.more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
}



/* =================== Column Selection 部分 ===================  */
/* 内容容器：居中，最大1200px */
.colContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 顶部筛选区域 */
.filter-section {
    margin-bottom: 40px;
}

.filter-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.filter-label {
    min-width: 130px;
    color: #333;
    font-weight: 500;
    font-size: 16px;
}

/* 筛选按钮样式 */
.filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.btn-filter {
    padding: 6px 20px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.btn-filter:hover {
    border-color: #0066ff;
    color: #0066ff;
}

.btn-filter.active {
    background-color: #0066ff;
    color: #fff;
    border-color: #0066ff;
}

/* 产品网格布局 */
.colProduct-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}

/* 产品卡片样式 */
.colProduct-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 15px;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 
.colProduct-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}
 */

/* 产品链接样式 - 使用独特类名避免冲突 */
.colProduct-link {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* 图片容器 */
.image-box {
    flex-shrink: 0;
    width: 160px;
    height: 100px;
    background-color: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 产品卡片专用的图片容器 - 整合两个image-box的样式 */
.colimage-box {
    flex-shrink: 0;
    width: 160px;
    height: 100px;
    background-color: #FFF;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: background-color 0.3s ease;
    position: relative;
}

.colimage-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 12px;
}





.product-name {
    font-size: 16px;
    color: #333;
    margin: 0 0 12px 0;
    font-weight: 500;
    line-height: 1.4;
}

.tag-rp {
    display: inline-block;
    background-color: #e8f2ff;
    color: #0066ff;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: 5px;
}

/* 查看更多 */
.more-link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    color: #0066ff;
    text-decoration: none;
    font-size: 14px;
}

.more-link:hover {
    text-decoration: underline;
}

/* 响应式媒体查询 */
@media (max-width: 992px) {
    .colProduct-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    /* 1. 全局重置 - 确保所有容器不溢出 */
    .colProduct-grid,
    .colProduct-card,
    .colProduct-link,
    .image-box,
    .product-info {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 2. 网格布局调整 */
    .colProduct-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 15px;
        padding: 0; /* 确保没有左右内边距 */
    }
    
    /* 3. 卡片容器优化 */
    .colProduct-card {
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    /* 4. 产品链接样式 */
    .colProduct-link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        width: 100%;
        padding: 8px;
        border-radius: 8px;
    }
    
    /* 5. 图片容器 - 使用 aspect-ratio 更简洁 */
    .image-box {
        width: 100%;
        aspect-ratio: 16 / 10; /* 使用 aspect-ratio 替代 padding-bottom 技巧 */
        position: relative;
        border-radius: 6px;
        margin-bottom: 8px;
        background-color: #f5f5f5;
        overflow: hidden;
    }
    
    /* 6. 图片本身 */
    .image-box img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; /* contain 完整显示图片，可能有留白 */
        display: block;
    }

    
    /* 8. 产品名称 */
    .product-name {
        font-size: 14px;
        line-height: 1.3;
        margin: 0 0 6px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        color: #333;
        font-weight: 500;
    }
    
    /* 9. 标签容器 */
    .js-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        width: 100%;
    }
    
    /* 10. 标签样式 */
    .tag-rp {
        font-size: 11px;
        padding: 2px 6px;
        margin: 0;
        display: inline-block;
        white-space: nowrap;
        background-color: #e8f2ff;
        color: #0066ff;
        border-radius: 2px;
        line-height: 1.4; /* 添加行高确保文字垂直居中 */
    }
}

/* 超小屏幕进一步优化 */
@media (max-width: 480px) {
    .colProduct-grid {
        gap: 6px; /* 缩小间距 */
    }
    
    .colProduct-link {
        padding: 5px; /* 减小内边距 */
    }
    
    .product-name {
        font-size: 12px; /* 稍微减小字号 */
        margin-bottom: 4px;
    }
    
    .tag-rp {
        font-size: 10px;
        padding: 1px 4px;
    }
    
    .image-box {
        aspect-ratio: 16 / 10; /* 超小屏幕可以用更扁的比例 */
    }
}


/* =================== 部分 ===================  */


/* =================== 部分 ===================  */




/* =================== 部分 ===================  */




/* =================== 部分 ===================  */




/* =================== 辅助间距类 (Spacing Utilities) =================== */

/* --- Margin Top --- */
.topp5   { margin-top: 5px; }
.topp10  { margin-top: 10px; }
.topp15  { margin-top: 15px; }
.topp20  { margin-top: 20px; }
.topp25  { margin-top: 25px; }
.topp30  { margin-top: 30px; }
.topp40  { margin-top: 40px; }
.topp50  { margin-top: 50px; }
.topp60  { margin-top: 60px; }
.topp70  { margin-top: 70px; }
.topp80  { margin-top: 80px; }

.topm5   { margin-top: -5px; }
.topm10  { margin-top: -10px; }
.topm15  { margin-top: -15px; }
.topm20  { margin-top: -20px; }
.topm30  { margin-top: -30px; }
.topm40  { margin-top: -40px; }
.topm50  { margin-top: -50px; }

/* --- Margin Bottom --- */
.botp5   { margin-bottom: 5px; }
.botp10  { margin-bottom: 10px; }
.botp15  { margin-bottom: 15px; }
.botp20  { margin-bottom: 20px; }
.botp30  { margin-bottom: 30px; }
.botp40  { margin-bottom: 40px; }
.botp50  { margin-bottom: 50px; }
.botp60  { margin-bottom: 60px; }

.botm5   { margin-bottom: -5px; }
.botm10  { margin-bottom: -10px; }
.botm20  { margin-bottom: -20px; }
.botm30  { margin-bottom: -30px; }
.botm40  { margin-bottom: -40px; }

/* --- Margin Left --- */
.lftp5  { margin-left: 5px; }
.lftp10 { margin-left: 10px; }
.lftp15 { margin-left: 15px; }
.lftp20 { margin-left: 20px; }
.lftp30 { margin-left: 30px; }
.lftp40 { margin-left: 40px; }

.lftm5  { margin-left: -5px; }
.lftm10 { margin-left: -10px; }
.lftm20 { margin-left: -20px; }
.lftm30 { margin-left: -30px; }
.lftm40 { margin-left: -40px; }

/* --- Margin Right --- */
.rgtp5  { margin-right: 5px; }
.rgtp10 { margin-right: 10px; }
.rgtp15 { margin-right: 15px; }
.rgtp20 { margin-right: 20px; }
.rgtp30 { margin-right: 30px; }
.rgtp40 { margin-right: 40px; }

.rgtm5  { margin-right: -5px; }
.rgtm10 { margin-right: -10px; }
.rgtm20 { margin-right: -20px; }
.rgtm30 { margin-right: -30px; }
.rgtm40 { margin-right: -40px; }

/* --- Padding (只提供正值，负padding无效) --- */
.pdgt5  { padding-top: 5px; }
.pdgt10 { padding-top: 10px; }
.pdgt15 { padding-top: 15px; }
.pdgt20 { padding-top: 20px; }
.pdgt30 { padding-top: 30px; }
.pdgt40 { padding-top: 40px; }
.pdgt50 { padding-top: 50px; }
.pdgt60 { padding-top: 60px; }
.pdgt70 { padding-top: 70px; }
.pdgt80 { padding-top: 80px; }

.pdgb5  { padding-bottom: 5px; }
.pdgb10 { padding-bottom: 10px; }
.pdgb15 { padding-bottom: 15px; }
.pdgb20 { padding-bottom: 20px; }
.pdgb30 { padding-bottom: 30px; }
.pdgb40 { padding-bottom: 40px; }

.pdgl5  { padding-left: 5px; }
.pdgl10 { padding-left: 10px; }
.pdgl15 { padding-left: 15px; }
.pdgl20 { padding-left: 20px; }
.pdgl30 { padding-left: 30px; }

.pdgr5  { padding-right: 5px; }
.pdgr10 { padding-right: 10px; }
.pdgr15 { padding-right: 15px; }
.pdgr20 { padding-right: 20px; }
.pdgr30 { padding-right: 30px; }

/* --- 全方向 Margin/Padding --- */
.mgn5  { margin: 5px; }
.mgn10 { margin: 10px; }
.mgn15 { margin: 15px; }
.mgn20 { margin: 20px; }

.pdg5  { padding: 5px; }
.pdg10 { padding: 10px; }
.pdg15 { padding: 15px; }
.pdg20 { padding: 20px; }
.pdg30 { padding: 30px; }

.spePosLeft {text-align:left;}
.spePosCenter {text-align:center;}
.spePosRight {text-align:right;}

/* =================== 移动端适配：数值缩减 =================== */
@media (max-width: 768px) {
    
    /* --- Margin Top 移动端缩减 --- */
    .topp25  { margin-top: 18px; }
    .topp30  { margin-top: 20px; }
    .topp40  { margin-top: 25px; }
    .topp50  { margin-top: 30px; }
    .topp60  { margin-top: 35px; }
    .topp70  { margin-top: 40px; }
    .topp80  { margin-top: 45px; }
    
    .topm30  { margin-top: -20px; }
    .topm40  { margin-top: -25px; }
    .topm50  { margin-top: -30px; }
    
    /* --- Margin Bottom 移动端缩减 --- */
    .botp30  { margin-bottom: 20px; }
    .botp40  { margin-bottom: 25px; }
    .botp50  { margin-bottom: 30px; }
    .botp60  { margin-bottom: 35px; }
    
    .botm30  { margin-bottom: -20px; }
    .botm40  { margin-bottom: -25px; }
    
    /* --- Margin Left/Right 移动端缩减 --- */
    .lftp30 { margin-left: 20px; }
    .lftp40 { margin-left: 25px; }
    
    .lftm30 { margin-left: -20px; }
    .lftm40 { margin-left: -25px; }
    
    .rgtp30 { margin-right: 20px; }
    .rgtp40 { margin-right: 25px; }
    
    .rgtm30 { margin-right: -20px; }
    .rgtm40 { margin-right: -25px; }
    
    /* --- Padding Top 移动端缩减 --- */
    .pdgt30 { padding-top: 20px; }
    .pdgt40 { padding-top: 25px; }
    .pdgt50 { padding-top: 30px; }
    .pdgt60 { padding-top: 30px; }
    .pdgt70 { padding-top: 30px; }
    .pdgt80 { padding-top: 35px; }
    
    /* --- Padding Bottom 移动端缩减 --- */
    .pdgb30 { padding-bottom: 20px; }
    .pdgb40 { padding-bottom: 25px; }
    
    /* --- Padding Left/Right 移动端缩减 --- */
    .pdgl30 { padding-left: 20px; }
    
    .pdgr30 { padding-right: 20px; }
    
    /* --- 全方向 移动端缩减 --- */
    .pdg30 { padding: 20px; }
	
	
	
	/* --- 仅针对移动端生效的样式 --- */
	
	/* --- Margin Top 移动端缩减 --- */
	.mbpdgt5  { padding-top: 5px; }
	.mbpdgt10 { padding-top: 10px; }
	.mbpdgt15 { padding-top: 15px; }
	.mbpdgt20 { padding-top: 20px; }
	.mbpdgt30 { padding-top: 30px; }
	
}



/* =================== 新闻详情页分享列表样式 =================== */
.shareArticleList {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 30px;
    justify-content: flex-start;
    text-align: left;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
}

.shareArticleList .text-des {
    text-align: left;
    margin: 0;
    padding: 0;
}

.shareArticleList .text-des:last-child {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.shareArticleList .social-link {
    display: inline-block;
    margin: 0;
}

@media (max-width: 768px) {
	.shareArticleList {		
		padding-left: 16px;
	}
}



 /* 额外强化左对齐与最大宽度约束，确保specifications部分完全符合要求 */ 
 /* 确保内部列表/段落强制左对齐 */
 
 /* 

#specifications {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 100%;
	box-sizing: border-box;
	padding: 0 !important;
}
#specifications .cateHeadline,
#specifications .cateGeneral,
#specifications .text-des {
	text-align: left;
}
#specifications .text-des p,
#specifications .text-des span {
	text-align: left;
	display: block;
}

#specifications .cateGeneral .text-des {
	text-align: left;
}

 */

/* =================== 重新定义 content-box - 源头解决左对齐问题 =================== */
.content-box {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 16px;
    box-sizing: border-box;
    text-align: left;
}
@media (max-width: 768px) {
	.content-box {
		padding: 0 16px;
	}
}


/* 强制所有直接子元素占满宽度并左对齐 */
.content-box > * {
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left;
}

/* 修复 grid-layout 内部 */
.content-box .grid-layout {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
    width: 100%;
    text-align: left;
}

.content-box .grid-layout > * {
    text-align: left;
}

/* 修复 grid-text */
.content-box .grid-text {
    flex: 1;
    text-align: left;
    width: auto;
}

/* 修复 grid-image-small - 保持图片容器宽度不变 */
.content-box .grid-image-small {
    flex: 0 0 280px;
    text-align: center;
}

/* 修复表格容器 */
.content-box .general-table {
    width: 100%;
    overflow-x: auto;
    text-align: left;
}

.content-box .general-table table {
    width: 100%;
    min-width: 500px;
    text-align: left;
}

.content-box .general-table td,
.content-box .general-table th {
    text-align: left;
    padding: 12px;
}

/* 修复所有文本元素 */
.content-box p,
.content-box ul,
.content-box ol,
.content-box li,
.content-box h1,
.content-box h2,
.content-box h3,
.content-box h4,
.content-box .text-des,
.content-box .text-hl {
    text-align: left;
}

/* 修复列表缩进 */
.content-box ul,
.content-box ol {
    margin-left: 20px;
    padding-left: 0;
}

/* 修复 gradient-title */
.content-box .gradient-title {
    text-align: left;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* =================== 修复 full-bg-gray 灰色背景 =================== */
.full-bg-gray {
    background-color: #f8f9fa !important;
    width: 100%;
    box-sizing: border-box;
}

/* 确保 full-bg-gray 内部的 content-box 保持样式 */
.full-bg-gray .content-box {
    background-color: transparent;
    margin: 0 auto;
    padding: 50px 16px;
}

/* 修复联系表单的标题居中（如果需要的话） */
.full-bg-gray .spePosCenter {
    text-align: center !important;
}


/* =================== 修复 general-list 缩进问题 =================== */
.general-list {
    margin-left: 20px !important;
    padding-left: 0 !important;
    list-style-position: outside !important;
}

.general-list li {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
}

/* 确保所有无序列表和有序列表都有正确的缩进 */
.content-box ul:not([class]),
.content-box ol:not([class]),
ul.general-list,
ol.general-list {
    margin-left: 20px !important;
    padding-left: 0 !important;
}

/* 特别修复 gradient-title 后面的列表 */
.gradient-title + ul,
.gradient-title + .general-list {
    margin-top: 20px;
    margin-left: 20px !important;
}



/* 针对产品详情页的 product-info 设置 padding: 0 */
.product-container .product-wrapper .product-info {
    padding: 0 !important;
}

/* 针对 section content-box 的 cateGeneral 设置 padding: 0 */
.content-box .cateGeneral {
    padding: 0 !important;
}


/* =================== Brochure 页面样式修复 =================== */

/* 1. 限制 lftrgt 容器的最大宽度并居中 */
.lftrgt {
    max-width: 1200px;
    width: 100%;
    margin: 20px auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* 2. 修复 docs-container 左对齐 */
.docs-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    background-color: #fff;
}

/* 3. 确保文档项左对齐 */
.docs-item {
    display: flex;
    align-items: flex-start;
    min-height: 60px;
    width: 100%;
    text-align: left;
}

.docs-icon {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 12px;
    margin-left: 0;
    margin-right: 10px;
}

.docs-title {
    flex: 1;
    padding: 10px 20px 0 0;
    display: flex;
    align-items: flex-start;
    text-align: left;
}

.docs-title a {
    line-height: 1.5;
    text-decoration: none;
    display: inline;
    color: #005aed;
    word-break: break-word;
    text-align: left;
}

.docs-title a img {
    display: inline;
    margin-left: 10px;
    padding-bottom: 3px;
    vertical-align: bottom;
    width: 20px;
    height: 20px;
}

/* 4. 分页左对齐 */
.pagination {
    max-width: 1200px;
    margin: 30px auto;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px;
}

/* 5. 移动端适配 */
@media (max-width: 768px) {
    .lftrgt {
        padding: 0 16px;
        margin: 15px auto;
    }
    
    .docs-container {
        padding: 0 16px !important;
    }
    
    .docs-item {
        flex-direction: row !important;
        align-items: flex-start !important;
    }
    
    .docs-icon {
        width: 30px !important;
        padding: 18px 0 2px 0 !important;
        margin-left: 0 !important;
        margin-right: 8px !important;
    }
    
    .docs-title {		
        padding: 12px 0 12px 0 !important;
    }
    
    .docs-title a {
        font-size: 14px;
    }
    
    .pagination {
        padding: 15px;
    }
}