/* 重置全局样式：清除默认内外边距、列表样式，统一盒模型，移除文本装饰 */





/* 重置全局样式：清除默认内外边距、列表样式，统一盒模型，移除文本装饰 */
* {
  padding: 0;                
  margin: 0;                 
  list-style-type: none;     /* 清除列表默认圆点/数字 */
  box-sizing: border-box;    /* 盒模型：宽高包含边框和内边距 */
  text-decoration: none;     /* 移除默认下划线 */
}

/* 核心：预留滚动条宽度，解决滚动条导致的居中偏移 */
html {
  overflow-y: scroll;
}







* {
  padding: 0;                
  margin: 0;                 
  list-style-type: none;     /* 清除列表默认圆点/数字 */
  box-sizing: border-box;    /* 盒模型：宽高包含边框和内边距 */
  text-decoration: none;     /* 移除默认下划线 */
}

/* ========== 核心修复：彻底重置a标签所有状态颜色（解决紫色问题） ========== */

/* ========== 仅修复尾部产品链接的紫色问题，不影响其他区域a标签 ========== */
/* 1. 仅尾部frame_end_2/frame_end_3/frame_end_4里的a标签统一颜色 */
.frame_end_2 a:link, 
.frame_end_2 a:visited,
.q4_frame_end_3 a:link,
.q4_frame_end_3 a:visited,
.q4_frame_end_4 a:link,
.q4_frame_end_4 a:visited,
.q4_frame_end_1 a:link, 
.q4_frame_end_1 a:visited,
 .ax1 a:visited
{
  
  color: rgb(0, 0, 0) !important; /* 仅继承尾部区域的黑色/灰色，不影响其他区域 */
  text-decoration: none !important;
}

/* 2. 保留尾部链接的hover效果（你原有的紫色+下划线） */
/* 顶部所有导航 + 项目精选 + 数据下载 全部 hover 变蓝 + 加粗 */
/* 只给顶部主导航、项目精选、数据下载生效，下拉内部不生效 */
.q4_frame_head_1-b > .w1-01 > a:hover > div,
.q4_frame_head_1-b > .nav-item > a:hover > div {
  color: #0A3A89 !important;
  font-weight: bold !important;
}

/* 终极兜底：强制所有 q4_frame_head_2-a 里面的文字 hover 生效 */
/* 只给 q4_frame_head_2-a 里 a 下的 div  hover 变色加粗 */
.q4_frame_head_2-a a:hover > div {
    color: #0A3A89 !important;
    font-weight: bold !important;
}
/* 4. 其他区域的a标签（如白色a标签）不受影响，保留原有样式 */
/* 如果有其他区域需要单独设置，可在这里补充，比如：
.xxx-white-a a {
  color: #fff !important;
}
*/




/* ========== 字体引用（优化后） ========== */
/* 阿里巴巴普惠体-35-Thin（极细）：绑定300权重 */
@font-face {
  font-family: 'AlibabaPuHuiTi';
  src: url('../font/AlibabaPuHuiTi-2-45-Light.ttf') format('truetype');
  font-weight: 300;          /* 极细体对应300权重（行业通用） */
  font-style: normal;
  font-display: swap;        /* 加载时显示后备字体，避免宋体闪烁 */
  unicode-range: U+4E00-9FFF, U+0020-007E; /* 仅加载常用字符，加快速度 */
}
/* 阿里巴巴普惠体-45-Light（细体）：绑定500权重 */
@font-face {
  font-family: 'AlibabaPuHuiTi';
  src: url('../font/AlibabaPuHuiTi-2-55-Regular.ttf') format('truetype');
  font-weight: 500;          /* 细体作为默认常规体 */
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF, U+0020-007E;
}
/* 阿里巴巴普惠体-55-Regular（常规）：绑定600权重 */
@font-face {
  font-family: 'AlibabaPuHuiTi';
  src: url('../font/AlibabaPuHuiTi-2-55-Regular.ttf') format('truetype');
  font-weight: 600;          /* 常规体作为中等粗细 */
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF, U+0020-007E;
}
/* 阿里巴巴普惠体-65-Medium（中等）：绑定700权重 */
@font-face {
  font-family: 'AlibabaPuHuiTi';
  src: url('../font/AlibabaPuHuiTi-2-65-Medium.ttf') format('truetype');
  font-weight: 700;          /* 中等体作为粗体（适配粗体场景） */
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF, U+0020-007E;
}

/* ========== 基础颜色类 ========== */
.hei{
  color: #000; /* 黑色 */
}
.bai{
  color: #ffffff; /* 白色 */
  z-index: 10;
}
.hui{
 color: #818181;  /* 灰色 */
}

.qian{
 color: #4e4e4e;  /* 灰色 */
}

/* ========== 全局字体配置 ========== */
/* ========== 全局字体配置 ========== */
/* 全局平滑滚动动画 + 固定样式 */
html {
  scroll-behavior: smooth;
}

/* 所有锚点目标，固定给头部留空（和你 header 高度一致） */
[id] {
  scroll-margin-top: 0px;
}

body {
  overflow-x: hidden;   /* 双重保险，确保横向不滚 */
  /* 强制初始滚动位置在最左 */
  position: relative;
  left: 0;
}
/* 禁止任何元素产生横向滚动条 */

body {
  /* 保留你所有原有样式，只替换这一段 */
  font-family: 'AlibabaPuHuiTi', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', 'Arial', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
  min-width: 1260px;
  
  /* 🔥 关键：给顶部导航预留固定高度，永不重叠 */
  padding-top: 5px !important;
}

/* 可选优化：给锚点目标元素加一点点内边距，避免跳转后内容贴顶 */
/* 完美修复锚点：第一次点击精准，不产生空白，不破坏布局 */


code, pre {
  /* 代码专用字体，保证等宽显示 */
  font-family: Consolas, Monaco, 'Courier New', monospace !important;
}

/* ========== 字体权重控制 ========== */
.x {
  font-weight: 300 !important; /* 极细（对应35-Thin） */
}
 .z{
  font-weight: 500 !important; /* 常规（对应45-Light） */
}
 .c {
  font-weight: 600 !important; /* 中等（对应55-Regular） */
}

/* ========== 字体大小/行间距样式 ========== */
.c18{
  font-size: 18px;           
  margin: 0;                 
  letter-spacing: 0.6px;     /* 字间距0.6px */
  line-height: 1.4;          /* 行高1.4倍，提升阅读性 */
}

.c24{
  font-size: 24px;           
  margin: 0px 0;            /* 上下外边距10px，左右0 */
  letter-spacing: 0.6px;      
}

.c24k{
  font-size: 24px;           
  margin: 10px 0;            /* 上下外边距10px，左右0 */
  line-height: 1.6;       /* 上下变宽 */
  letter-spacing: 0.6px;      
}

.c36bt{
  font-size: 36px;           
  margin: 10px 0;  
  line-height: 1.3; /* 行高1.3倍 */
  -webkit-font-smoothing: antialiased;                        
  position: absolute;        /* 绝对定位 */
  left:50px;                 /* 左偏移50px */
  top: 20px;                 /* 上偏移20px */
}
.c36{
  font-size: 32px;           
  margin: 5px 0;   
  -webkit-font-smoothing: antialiased; /* 字体抗锯齿，更清晰 */                      
}

.c50{
  font-size: 50px;           
  margin: 10px 0;            
}
.c60 {
  font-size: 60px;           
  margin: 10px 0;            
  -webkit-font-smoothing: antialiased; 
}
.c14 {
  font-size: 14px;           
  letter-spacing: 0.6px;            
  -webkit-font-smoothing: antialiased; 
}

.c12 {
  font-size: 13px;           
  letter-spacing: 0.2px;            
  -webkit-font-smoothing: antialiased; 
}



/* ========== 布局样式 ========== */
/* 口号图标 */
.kouh{
  position: absolute;        
  right: 50px;               /* 右偏移50px */
  top: 15px;                 /* 上偏移12px */
}
.kouh1{
  position: absolute;        
  right: -250px;               /* 右偏移50px */
  top: 15px;                 /* 上偏移12px */
}

.yytb1{
  position: relative;        
  right: -0px;               /* 右偏移50px */
  top: -2px;                 /* 上偏移12px */
}

/* Logo容器（LOGO） */
.LOGO{
  width: 1200px;             
  height: 50px;              
  overflow: hidden;          /* 隐藏溢出内容 */
  position: relative;         
  left: 50px;                
  top: 12px;                 
  display: flex;              /* flex布局 */
  gap: 680px;                /* 子元素间距645px */
}
/* Logo图片样式 */
.LOGO img {
  width: auto;               /* 宽度自适应 */
  height: 50%;               /* 高度为父容器50% */
}


/* 核心容器样式 - 公共样式提取（减少重复） */
.k, .k3, .k4 {
  background-color: rgba(255, 255, 255, 0); /* 背景透明 */
  border-style: solid;       
  border-color: #818181;     /* 边框颜色默认灰色，k3/k4会覆盖 */
  position: relative;                         
  
  /* 🔥 核心：所有模块永远居中 */
  width: 1260px;
  max-width: 100%;
  margin: 0 auto !important;
  left: 0 !important;
  right: 0 !important;
  
  flex-shrink: 0;            /* 不收缩 */
}



/* 核心容器k：仅上下左右边框，底部无边框 */
.k {
border-width: 1px 1px 0px 1px;             
}


/* 核心容器k3：仅左右边框，上下无边框 */
.k3 {
  border-color: rgb(134, 134, 134); /* 覆盖边框颜色 */
  border-width: 0px 1px;             
}
/* 核心容器k4：仅左右边框，上下无边框 */
.k4 {
  border-color: rgb(134, 134, 134);                      
  border-width: 0px 1px;             
  width: 1260px;                             
  margin: 0px auto;                             
}





/* 头部框架公共样式 */
.q4_frame_head_1, .q4_frame_head_2 {
  height: 52px;              
}
.q4_frame_head_1 {
  top: 3px;                   /* 上偏移3px */
}

/* 顶部导航栏细节样式 */
.q4_frame_head_1-a {
  position: relative;         
  transform: translateY(-50%); /* 垂直居中（基于自身50%高度） */
  left: 150px;               
  display: flex;             
  gap: 9px;                  
  z-index: 50;               /* 层级50，防止被遮挡 */
}
/* 顶部导航栏容器：加宽宽度 + 强制不换行 */
.q4_frame_head_1-b {
  position: relative;       
  width: 700px; /* 按你的实际需求调整宽度 */
  top: -40%; /* 第一步：将容器顶部定位到父容器垂直中线 */
  left: 151px; /* 保留你原有的水平定位 */
  transform: translateY(-50%); /* 第二步：向上偏移自身50%，实现垂直居中 */
  display: flex;             
  gap: 15px;                 
  z-index: 1;                
  white-space: nowrap; /* 保留你原有的不换行需求 */
  justify-content: flex-start; /* 容器内内容左对齐 */
  box-sizing: border-box; /* 可选：防止宽度溢出 */
}




/* 滚动导航栏样式 */
.q4_frame_head_2 {
  background-color: #fff;    /* 白色背景 */
  color: #fff;               
  padding: 15px 0;           /* 上下内边距15px，左右0 */
}
.q4_frame_head_2.fixed {
  position: fixed;           /* 固定定位，滚动时吸附顶部 */
  top: 0;                    
  left: 0;                   
  right: 0;                  
  z-index: 100;              /* 层级100，最高优先级 */
}
.q4_frame_head_2A {
  /* 无限全屏背景 */
  position: absolute;
  top: -1px;
  left: -500vw;
  right: -500vw;
  width: 1000vw;
  margin-left: 50%;
  margin-right: 50%;
  height: 52px;
  background: #ffffff;
  /* 关键：层级往后退，让边框露在上面 */
  z-index: -2;
}




.q4_frame_head_2b {
  width: 1260px;

  height: 53px;
  border-right: 1px solid #818181;
  border-bottom: 1px solid #818181;
  border-left: 1px solid #818181;
  border-top: 0;
  position: relative;
  margin: 0 auto;
  top: 0;
  left: 0;
  transform: none;
    z-index: 999999;

}


.logo2 {
  display: none; /* 默认隐藏 */
}
.logo2 img {
  position: absolute;        
  left: 50px;                
  top: 15px;                 
  width: auto;               
  height: 40%;               
  font-weight: bold;         
  color: #22ca2a00;          
  text-decoration: none;     
}

/* 滚动后显示 */

.logo2.show {
  display: block;
}







.q4_frame_head_2-a {
  position: absolute;        
  top: 50%;                  
  transform: translateY(-50%);
  left: 150px;               
  display: flex;             
  gap: 15px;                 
          white-space: nowrap;
}

/* 内容容器公共样式（合并重复） */
.w1f_2, .w1f_1, .w2024 {
  position: relative;         
  top: 5px;                  
  background-color: rgba(233, 0, 0, 0); /* 背景透明 */
  display: flex;             
  flex-wrap: wrap;           /* 换行显示 */
  justify-content: flex-start; /* 左对齐 */
  gap: 11px 10px;            /* 行列间距11px/10px */
  z-index: 101;              
  margin: 16px auto ;        
  width: 1200px;             
}
/* 单独定义高度（差异化） */
.w1f_1 { height: 30px; }
.w1f_2 { height: 400px; }
.w2024 { height: 600px; }


/* ========== 核心优化：导航下拉菜单（合并重复样式） ========== */
/* 下拉菜单公共样式（w1_a1~w1_a4通用） */
/* 下拉菜单公共样式（仅改显示逻辑，布局参数不变） */
/* ========== 核心优化：导航下拉菜单（合并重复样式） ========== */
/* 下拉菜单公共样式（w1_a1~w1_a4通用） */
.w1_a1, .w1_a2, .w1_a3, .w1_a4 {
  position: absolute;        /* 绝对定位，相对于父级定位 */
  padding: 5px 30px 0px 51px; /* 内边距：上5px 右30px 下0px 左51px */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 阴影效果，增加立体感 */
  opacity: 0;                /* 默认完全透明 */
  visibility: hidden;        /* 默认隐藏，不占用页面空间 */
  pointer-events: none;      /* 禁止鼠标交互，防止遮挡下方元素 */
  background-color: #ffffff; /* 背景色纯白色 */
border: 1px solid #818181;  
border-left: none;
border-right: none; 

  top: 38px;                  /* 距离顶部38px */
  left: -151px;              /* 距离左侧-151px（向左偏移） */
  width: 1258px;             /* 固定宽度1259px */
  z-index: 999 !important;   /* 最高层级，确保不被遮挡 */
  transition: opacity 0.1s ease; /* 透明度过渡动画，时长0.1秒 */
  /* 扩大鼠标触发区域，解决菜单闪烁消失问题 */
  margin-top: -5px;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* 显示状态的样式（JS控制） */
.w1_a1.show, .w1_a2.show, .w1_a3.show, .w1_a4.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 下拉菜单差异化样式（仅高度/背景色） */
.w1_a1 {height:  300px; }             
.w1_a2 { height: 700px; }    
.w1_a3 { height: 300px; }    
.w1_a4 { height: 500px; }    

/* 鼠标悬停显示下拉菜单（无延迟，立即显示） */
.w1-01:hover .w1_a1,
.w1-01:hover .w1_a2,
.w1-01:hover .w1_a3,
.w1-01:hover .w1_a4 {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none; /* 移除过渡，立即响应 */
}
/* 鼠标在菜单内时强制保持显示 */
.w1_a1:hover, .w1_a2:hover, .w1_a3:hover, .w1_a4:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}


















.q4_frame_head_1 a:hover {
  color: #33ff00 !important; /* 替换为你想要的蓝色值，比如 #165DFF（阿里云蓝）、#0A3A89（Bootstrap蓝） */
}

/* ========== 仅顶部导航项文字 hover/下拉激活时变蓝 ========== */
/* 1. 鼠标悬停顶部导航项（.w1-01）时，导航文字变蓝 */
.q4_frame_head_1-b .w1-01:hover > a > .hei.c14 {
  color: #0A3A89 !important; /* 仅改顶部导航文字，可替换成你想要的蓝色 */
}

/* 2. 下拉框打开（show类）或鼠标悬停下拉框时，导航文字保持蓝色 */
.q4_frame_head_1-b .w1-01:has(.w1_a1.show) > a > .hei.c14,
.q4_frame_head_1-b .w1-01:has(.w1_a2.show) > a > .hei.c14,
.q4_frame_head_1-b .w1-01:has(.w1_a3.show) > a > .hei.c14,
.q4_frame_head_1-b .w1-01:has(.w1_a4.show) > a > .hei.c14,
.q4_frame_head_1-b .w1-01:has(.w1_a1:hover) > a > .hei.c14,
.q4_frame_head_1-b .w1-01:has(.w1_a2:hover) > a > .hei.c14,
.q4_frame_head_1-b .w1-01:has(.w1_a3:hover) > a > .hei.c14,
.q4_frame_head_1-b .w1-01:has(.w1_a4:hover) > a > .hei.c14 {
  color: #0A3A89 !important;
}

/* 3. 覆盖原有导航a标签的红色hover样式，确保蓝色优先 */
.q4_frame_head_1-b .w1-01 a:hover > .hei.c14 {
  color: #0A3A89 !important;
}



















/* ========== 产品卡片样式（合并重复） ========== */
/* 卡片尺寸公共定义 */
.w1a { width: 148px; height: 160px; }
.w2a { width: 200px; height: 160px; }
.w3a { width: 304px; height: 160px; }
.w3b { width: 253px; height: 160px; }

/* 卡片公共样式 */
.w1a, .w2a, .w3a, .w3b {
  background: #b3b3b36b;     /* 浅灰色半透明背景 */
  z-index: 15;               
  position: relative;
  text-align: center;        /* 文字居中 */
  padding: 0px;              
}
/* 卡片内图片公共样式 */
.w1a img, .w2a img, .w3a img, .w3b img {
  margin-bottom: 8px;       /* 图片下外边距8px */
}
/* 特殊卡片w0a */
.w0a { 
  background: #c0bbbb00;     /* 透明背景 */
  position: relative;
  text-align: center;        
  padding: 0px;              
  width: 750px;              
  height: 160px;             
  z-index: 15;               
}
/* 产品卡片内图片样式 */
.w1a img { 
  width: 100%;               /* 宽度100% */
  object-fit: cover;         /* 图片覆盖容器，保持比例 */
  margin-bottom: 0px;        
}





/* 产品卡片基础样式（完全不改HTML，文字全程显示） */
.w1a, .w2aa, .w3a, .w2a, .w3b {
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
  position: relative;
  overflow: visible !important; /* 永远不裁剪，文字不消失 */
}

/* 卡片内图片样式（顶部不动、向下放大，无溢出裁剪） */
.w1a img, .w2aa img, .w3a img, .w2a img, .w3b img {
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  transform: scale(1) !important;
  transform-origin: top center !important; /* 顶部居中放大 */
  width: 100%;
  height: auto;
  display: block;
  clip-path: inset(0 0 0 0); /* 仅显示图片原始区域，放大的部分被隐藏 */
}

/* 卡片hover上浮 + 图片放大（仅图片边缘被clip-path裁剪，不影响文字） */
.w1a:hover, .w2aa:hover, .w3a:hover, .w2a:hover, .w3b:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px) !important;
}


/* 点击反馈 */
.w1a:active, .w2aa:active, .w3a:active, .w2a:active, .w3b:active {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
.w1a:active img, .w2aa:active img, .w3a:active img, .w2a:active img, .w3b:active img {
  transform: scale(1.03) !important;
}









/* ========== 尾部样式 ========== */
.q4_frame_9 {
  height: 400px;   
  padding: 51px;             
}
.q4_frame_10 {
  height: 650px;            
}

.q4_frame_10 img {
 width: 260px;    
 height: auto;        
}






.q4_frame_end_1 {
  height: 52px;   
  padding: 0 50px;           /* 左右内边距50px */         
}
.frame_end_2 {
  height: 300px;            
}
.q4_frame_end_3 {
  height: 52px;            
}
.q4_frame_end_4 {
  height: 52px; 
  padding: 0 50px;           /* 左右内边距50px */   
}
.q4_frame_end_5 {
  height: 11px; 
  border-width: 1px 0px 0px 0px; /* 仅上边框 */
}





.frame_end_2_1{
  display: flex;            
  gap: 35px;
  padding: 0px 51px; 
  background-color: #ffffff00; /* 透明背景 */
}

.frame_end_2 a {
  display: block;        /* 让每个链接单独占一行（像换行一样） */
  line-height: 0.6;      /* 可选：让链接文字行高舒服点 */
}

.q4_frame_end_3_1{
  display: flex;            
  position: relative;
  left: 51px;
  top: 12px;
  gap: 50px;                
}


/* ========== 文本定位样式 ========== */
.wz_jvz {
  position: absolute;         
  width: 100%;
  height: auto;
  top: 80%;                  /* 距离顶部70% */
  left: 50%;                 
  transform: translate(-50%, -50%); 
  text-align: center;   
  z-index: 10;     
}
/* 垂直居中类 */
.jvz{
  display: flex;               /* 开启flex布局 */
  align-items: center;         /* 垂直（上下）居中 */
}
.wz_jvzhead {
  position: absolute;         
  width: 100%;
  height: auto;
  top: 75%;                  /* 距离顶部75% */
  left: 50%;                 
  transform: translate(-50%, -50%); 
  text-align: center;        
}

/* ========== 局部a标签样式优化（兼容全局） ========== */

.frame_end_2_1 a:hover {
  color: #0A3A89 !important; /* hover时紫色 */
  text-decoration: underline !important; /* hover时下划线 */
}






/* 强制锁定JS头部居中，覆盖任何冲突定位 */
/* 仅强制 JS 头部 head1 居中，不影响导航2置顶，不破坏任何布局 */
.k.q4_frame_head_1 {
  width: 1260px !important;
  margin: 0 auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
  position: relative !important;
  transform: none !important;
}




























/* 5.1 顶部Banner模块（akzu_frame_1）：含浅灰背景 */
.akzu_frame_1 {

  position: relative;         /* 相对定位：用于伪元素背景 */
}

/* 5.1.1 Banner模块伪元素背景：全屏浅灰色 */
.akzu_frame_1::before {
  content: "";                /* 伪元素必须有content（空值） */
  position: absolute;         /* 绝对定位：覆盖整个模块 */
  top: 0;                    /* 距离顶部0px */
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  transform: translateX(-51%);/* 水平居中第二步：向左偏移51%，抵消宽度偏差 */
  width: 102vw;              /* 宽度：102%视口宽度，确保全屏覆盖 */
    min-width: 2560px;
  bottom: -1px;              /* 距离底部-1px，覆盖边框缝隙 */
  background-color: #EDEDF1; /* 背景色：浅灰色 */
  background-repeat: no-repeat; /* 背景不重复 */
  background-position: center top; /* 背景位置：居中置顶 */
  background-size: 100% auto; /* 背景大小：宽度100%，高度自适应 */
  z-index: -1;               /* 层级：-1，置于内容下方 */
}

/* 5.2 产品标题模块（akzu_frame_2）：含图片和文字，单独设置边框（与.k类一致） */
.akzu_frame_2 {
  background-color: rgba(255, 255, 255, 0); /* 背景：透明 */
  border-style: solid;                        /* 边框样式：实线 */
  border-width: 1px 1px 0px 1px;             /* 边框宽度：左右1px，底部0，顶部1px */
  border-color: rgb(134, 134, 134);          /* 边框颜色：浅灰色 */
  position: relative;                         /* 相对定位：作为子元素定位的父容器 */
  width: 1260px;                             /* 容器宽度：1260px */
  margin: 0 auto;                             /* 水平居中 */
  height: 712px;             /* 模块高度：712px */
  overflow: visible !important; /* 强制允许内容溢出（如大图片），不被裁剪 */
}

/* 5.2.1 模块内图片容器（frame_2_1）：文字居中，图片在下层 */
.frame_2_1 {
  position: relative;         /* 相对定位：文字在图片上方 */
  top: 50%;                  /* 垂直居中第一步：距离顶部50% */
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  transform: translate(-50%, -50%); /* 水平+垂直居中：偏移自身50% */
  text-align: center;        /* 文字水平居中（多行文字对齐） */
}

/* 5.2.2 模块内图片样式：全屏背景图，置于文字下方 */
.akzu_frame_2 img {
  position: absolute;        /* 绝对定位：脱离文档流，不影响文字 */
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  top: 50%;                  /* 垂直居中第一步：距离顶部50% */
  transform: translate(-50%, -50%); /* 水平+垂直居中 */
  width: 2563px;             /* 图片宽度：固定值（根据实际图片调整） */
  height: auto;              /* 图片高度：自适应，保持比例 */
  z-index: -51;              /* 层级：-51，确保在所有内容下方 */
}


.q4_frame_ljbq{
  position: absolute;         /* 相对定位 */
  bottom: 50px;
  
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  transform: translate(-50%, -50%); /* 水平+垂直居中：偏移自身50% */
text-align: center;        /* 文字水平居中（多行文字对齐） */

}


.cpljbq{
  position: absolute;         /* 相对定位 */
  bottom: 50px;
  
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  transform: translate(-50%, -50%); /* 水平+垂直居中：偏移自身50% */
text-align: center;        /* 文字水平居中（多行文字对齐） */

}







/* 5.1.1 Banner模块伪元素背景：全屏浅灰色 */
.akzu_frame_3::before {
  content: "";                /* 伪元素必须有content（空值） */
  position: absolute;         /* 绝对定位：覆盖整个模块 */
  top: 0;                    /* 距离顶部0px */
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  transform: translateX(-51%);/* 水平居中第二步：向左偏移51%，抵消宽度偏差 */
  width: 102vw;              /* 宽度：102%视口宽度，确保全屏覆盖 */
    min-width: 2560px;
  bottom: -1px;              /* 距离底部-1px，覆盖边框缝隙 */
  background-color: #EDEDF1; /* 背景色：浅灰色 */
  background-repeat: no-repeat; /* 背景不重复 */
  background-position: center top; /* 背景位置：居中置顶 */
  background-size: 100% auto; /* 背景大小：宽度100%，高度自适应 */
  z-index: -1;               /* 层级：-1，置于内容下方 */
}




.akzu_frame_4{

  background-attachment: rgb(221, 13, 13); /* 此处属性错误：同前 */
    display: flex; /* 启用弹性布局 */
    flex-wrap: wrap; /* 子元素超出时自动换行 */
    gap: 15px; /* 子元素间距：15像素 */
    padding: 50px 51px 50px 51px; /* 内边距：上10，右20，下10，左20像素 */


}












.frame_4_1{
  position: relative;
width: 568px;
height: 630px;
background-color: #EDEDF1;
}


.frame_4_1 img{
width: 100%;
height: auto;
}






/* 5.1.1 Banner模块伪元素背景：全屏浅灰色 */
.akzu_frame_5::before {
  content: "";                /* 伪元素必须有content（空值） */
  position: absolute;         /* 绝对定位：覆盖整个模块 */
  top: 0;                    /* 距离顶部0px */
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  transform: translateX(-51%);/* 水平居中第二步：向左偏移51%，抵消宽度偏差 */
  width: 102vw;              /* 宽度：102%视口宽度，确保全屏覆盖 */
    min-width: 2560px;
  bottom: -1px;              /* 距离底部-1px，覆盖边框缝隙 */
  background-color: #000000; /* 背景色：浅灰色 */
  background-repeat: no-repeat; /* 背景不重复 */
  background-position: center top; /* 背景位置：居中置顶 */
  background-size: 100% auto; /* 背景大小：宽度100%，高度自适应 */
  z-index: -1;               /* 层级：-1，置于内容下方 */
}


.akzu_frame_6{

  background-attachment: rgb(221, 13, 13); /* 此处属性错误：同前 */
    display: flex; /* 启用弹性布局 */
    flex-wrap: wrap; /* 子元素超出时自动换行 */
    gap: 20px; /* 子元素间距：15像素 */
    padding: 20px 51px 20px 51px; /* 内边距：上10，右20，下10，左20像素 */


}

.frame_6_1 {
    position: relative;     
width: 100%;
height: auto;
background-color: #000000;
}







/* 5.1.1 Banner模块伪元素背景：全屏浅灰色 */
.akzu_frame_7::before {
  content: "";                /* 伪元素必须有content（空值） */
  position: absolute;         /* 绝对定位：覆盖整个模块 */
  top: 0;                    /* 距离顶部0px */
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  transform: translateX(-51%);/* 水平居中第二步：向左偏移51%，抵消宽度偏差 */
  width: 102vw;              /* 宽度：102%视口宽度，确保全屏覆盖 */
  min-width: 2560px;
  bottom: -1px;              /* 距离底部-1px，覆盖边框缝隙 */
  background-color: #EDEDF1; /* 背景色：浅灰色 */
  background-repeat: no-repeat; /* 背景不重复 */
  background-position: center top; /* 背景位置：居中置顶 */
  background-size: 100% auto; /* 背景大小：宽度100%，高度自适应 */
  z-index: -1;               /* 层级：-1，置于内容下方 */
}

















.akzu_frame_8{
  position: relative;
  background-attachment: rgb(221, 13, 13); /* 此处属性错误：同前 */
    display: flex; /* 启用弹性布局 */
    flex-wrap: wrap; /* 子元素超出时自动换行 */
    gap: 15px; /* 子元素间距：15像素 */
    padding: 50px 51px 50px 51px; /* 内边距：上10，右20，下10，左20像素 */


}

.frame_8_1{
  position: relative;
width: 568px;
height: 630px;
background-color: #EDEDF1;
}


.frame_8_2{position: relative;
width: 1153px;
height: 630px;
background-color: #EDEDF1;
}



.frame_8_1 img{
width: 100%;
height: auto;
}



.frame_8_2a {
    position: absolute;   
bottom: 0px;
right: 0px;
width: 570px;
height: 100%;
background-color: #a8121200;
  z-index: 10;               /* 层级：-1，置于内容下方 */
}





/* ===================== 轮播组件样式 ===================== */
.slider-container {
    position: absolute;
    width: 1904px;
    height: 1071px;
    top: 150px;
    left: 50%;
    gap: 30px;
    transform: translateX(-50%);
    display: flex;
    transition: transform 0.6s ease-in-out;
}

.slider-item {
    width: 1904px;
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

.slider-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.slider-text-container {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 5;
    text-align: center;
}

/* 初始样式：蓝色边框、透明背景、蓝色文字 */
.ljbq {
    background-color: transparent; /* 透明背景 */
    color: #0A3A89!important;; /* 文字与边框同色（Bootstrap蓝色） */
    border: 1px solid #0A3A89; /* 蓝色边框 */
    padding: 6px 15px; /* 保留原内边距 */
    border-radius: 25px; /* 保留原胶囊圆角 */
    cursor: pointer; /* 手型光标 */
    transition: all 0.2s ease; /* 过渡动画，切换更丝滑 */
    outline: none; /* 移除默认点击轮廓 */
}

/* 初始样式：蓝色边框、透明背景、蓝色文字 */
 .ljbq8{
    background-color: transparent; /* 透明背景 */
    color: #ffffff!important;; /* 文字与边框同色（Bootstrap蓝色） */
    border: 1px solid #ffffff; /* 蓝色边框 */
    padding: 6px 15px; /* 保留原内边距 */
    border-radius: 25px; /* 保留原胶囊圆角 */
    cursor: pointer; /* 手型光标 */
    transition: all 0.2s ease; /* 过渡动画，切换更丝滑 */
    outline: none; /* 移除默认点击轮廓 */
}

/* 鼠标悬浮：直接蓝色填充+白色文字（突出按钮） */
.ljbq8:hover, .ljbq:hover {
    background-color: #0A3A89; /* 蓝色填充整个按钮 */
    color: #ffffff!important;; /* 文字变为白色 */
    border-color: #0A3A89; /* 边框与填充色一致 */
}

/* 按下状态：保持蓝色填充+白色文字，可轻微加深（强化点击反馈） */
.ljbq8:active, .ljbq:active {
    background-color: #0056b3; /* 按下时蓝色稍深，提升点击感 */
    border-color: #0056b3;
}


/* 轮播控制按钮 */
.slider-control {
    position: absolute;
    top: 685px;
    transform: translateY(-50%);
    width: 1080px;
    height: 1075px;
    background-color: rgba(180, 0, 0, 0);
    color: rgba(219, 0, 0, 0);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0);
}

.slider-control.prev {
    left: -1088px;
}

.slider-control.next {
    right: -1088px;
}

.slider-control:hover {
    background-color: rgba(247, 0, 0, 0);
    transform: translateY(-50%) scale(1.05);
}

/* 轮播指示器 */
.carousel-dots {
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.438);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-dot.active {
    background-color: rgb(255, 255, 255);
    transform: scale(1.3);
}






/* 轮播容器公共样式（合并重复的q4_frame_8定义） */
.q4_frame_8 {
    position: relative;
    width: 1260px;
    height: 1300px;
    margin: 0 auto;
    overflow: visible;
}






/* 框 */
.q4_frame_8_1 {
    position: absolute;
    top: 120px;
    left: 50%;          /* 居中 */
    transform: translateX(-50%); /* 绝对居中，不偏移 */
    width: 1260px;      /* 跟主容器完全一样 */
    height: 1150px;
    border-style: solid;
    border-width: 0 1px; /* 左右竖线 */
    border-color: rgb(134, 134, 134);
    z-index: 20;
    pointer-events: none;
    box-sizing: border-box; /* 关键：边框不撑开宽度 */
}

.carousel-data {
    display: none;
}



/* 🔥 终极修复：每张图都流畅缩放 */
.slider-item {
  overflow: hidden !important;
}
.slider-image {
  transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  transform: scale(1);
}
.slider-item.zoom-active .slider-image {
  transform: scale(1.04);
}














/* 5.2 产品标题模块（akzu_frame_2）：含图片和文字，单独设置边框（与.k类一致） */
.akzu_frame_9 {
  background-color: rgba(255, 255, 255, 0); /* 背景：透明 */
  border-style: solid;                        /* 边框样式：实线 */
  border-width: 1px 1px 0px 1px;             /* 边框宽度：左右1px，底部0，顶部1px */
  border-color: rgb(134, 134, 134);          /* 边框颜色：浅灰色 */
  position: relative;                         /* 相对定位：作为子元素定位的父容器 */
  width: 1260px;                             /* 容器宽度：1260px */
  margin: 0 auto;                             /* 水平居中 */
  height: 712px;             /* 模块高度：712px */
  overflow: visible !important; /* 强制允许内容溢出（如大图片），不被裁剪 */
}

/* 5.2.1 模块内图片容器（frame_2_1）：文字居中，图片在下层 */
.frame_9_1 {
  position: relative;         /* 相对定位：文字在图片上方 */
  top: 50%;                  /* 垂直居中第一步：距离顶部50% */
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  transform: translate(-50%, -50%); /* 水平+垂直居中：偏移自身50% */
  text-align: center;        /* 文字水平居中（多行文字对齐） */
}

/* 5.2.2 模块内图片样式：全屏背景图，置于文字下方 */
.akzu_frame_9 img {
  position: absolute;        /* 绝对定位：脱离文档流，不影响文字 */
  left: 50%;                 /* 水平居中第一步：距离左侧50% */
  top: 50%;                  /* 垂直居中第一步：距离顶部50% */
  transform: translate(-50%, -50%); /* 水平+垂直居中 */
  width: 2563px;             /* 图片宽度：固定值（根据实际图片调整） */
  height: auto;              /* 图片高度：自适应，保持比例 */
  z-index: -51;              /* 层级：-51，确保在所有内容下方 */
}




.akzu_frame_10{

  background-attachment: rgb(221, 13, 13); /* 此处属性错误：同前 */
    display: flex; /* 启用弹性布局 */
    flex-wrap: wrap; /* 子元素超出时自动换行 */
    gap: 30px; /* 子元素间距：15像素 */
    padding: 50px 51px 50px 51px; /* 内边距：上10，右20，下10，左20像素 */


}


.frame_10_1 {
position: relative;
}


.frame_10_1 img{
width: 100%;
height: auto;
}






















.q4_frame_end_1 {
            height: 52px;            
}
.q4_frame_end_2 {
            height: 358px;  
          
}
.q4_frame_end_3 {
            height: 52px;            
}
.q4_frame_end_4 {
            height: 52px; 
}
.q4_frame_end_5 {
            height: 11px; 
            border-width: 1px 0px 0px 0px;             /*  边框*/
}











 .q4_frame_end_1_1{
    position: absolute;
   top:6px;
   left: 55px;
 }


     .q4_frame_end_2_1{
        display: flex;            /* 使用flex布局，使子元素横向排列 */
     white-space: nowrap;
     }
   




    .q4_frame_end_3_1{
     display: flex;            /* 使用flex布局，使子元素横向排列 */
           position: relative;
           left: 51px;
           top: 12px;
           gap: 50px;                /* 列之间的间距20px */
 }