/* 引入思源黑体字体 */
@font-face {
    font-family: 'Source Han Sans CN';
    src: url('https://fonts.gstatic.com/ea/notosanssc/v5/NotoSansSC-Regular.woff2') format('woff2'),
         url('https://fonts.gstatic.com/ea/notosanssc/v5/NotoSansSC-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Han Sans CN';
    src: url('https://fonts.gstatic.com/ea/notosanssc/v5/NotoSansSC-Bold.woff2') format('woff2'),
         url('https://fonts.gstatic.com/ea/notosanssc/v5/NotoSansSC-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
/* 确保页面整体不出现横向滚动 */
html, body {
  overflow-x: hidden; /* 禁止横向滚动 */
  width: 100%;
  margin: 0;
  padding: 0;
}

/* 修复banner图溢出问题 */
.ban {
  width: 100%; /* 容器占满屏幕宽度 */
  overflow: hidden; /* 隐藏超出容器的内容 */
}

.ban img {
  width: 100%; /* 图片宽度自适应容器 */
  height: auto; /* 保持图片比例 */
  max-width: 100%; /* 限制最大宽度为容器宽度 */
  display: block; /* 去除图片底部默认空白 */
}

.body1 {
    margin: 0;
    padding: 0;
    font-family: 'Source Han Sans CN', sans-serif;
    background-color: #f9f9f9;
}

.container {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}


.product-nav {
    background: url(zdzsj.png) no-repeat left 80px top 10px;
    padding: 20px 80px;
}

.nav-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 20px;
    letter-spacing: 0.3em;
}

.nav-title span{
    color:#fff;
    padding-right: 5px;
}

.nav-subtitle {
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%;
  font-size: 14px;
  margin: 8px 0;
}

.left-group {
  display: flex; 
  align-items: center;
  gap: 20px; 
  padding-left: 20px;

}

.solid-line {
  width: 50px;  
  height: 5px; 
  background-color: #fff; 
  color: transparent; 
  font-size: 0;      
  margin: 0;     
  padding: 0;      
  line-height: 1;    
}

.diameter-text {
  font-size: 16px;
}

.note-text {
  font-style: italic;
  font-size: 16px;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 20px;
}

.nav-item {
    background-color: #fff;
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
    font-size: 0; 
}

.nav-item .zdh2{
    font-size: 28px; 
    font-weight: bolder;
    padding:10px 0;
}

.nav-item a {
    display: inline-block;
    padding: 5px 20px;
    background-color: #007bff;
    background: linear-gradient(to bottom,#5E8DDF,#2D6AD1);
    color: #fff;
    text-decoration: none;
    margin-bottom: 5px;
    transition: background-color 0.3s;
    font-size: 14px;
    vertical-align: middle;
}

.nav-item a:hover {
    background-color: #0056b3;
}

.nav-item span {
    display: inline-block;
    padding: 5px 20px;
    background-color: #ff7b00;
    color: #fff;
    margin-bottom: 5px;
    font-size: 14px;
    vertical-align: middle;
}

.jybanner {
    position: relative; /* 提升层级，避免被 .factory 覆盖关键内容 */
    z-index: 1; 
    background: url('hdbj.png') no-repeat center center;
    background-size: cover;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.jybanner-text {
    text-align: center;
}

.jybanner-text h2 {
    font-size: 45px;
    margin-bottom: 10px;
    padding-bottom: 20px;
}

.jybanner-text p {
    font-size: 16px;
}

.factory {
    display: flex;
    padding: 20px;
    position: relative; /* 关键：确保负margin偏移时，内容不影响其他元素布局 */
    z-index: 2; /* 层级高于 .jybanner，确保 .factory 内容显示在重叠区域上方 */
    margin-top: -50px;
}

.factory-left {
    flex: 1;
    padding-right: 20px;
}

.factory-card {
    background-color: #2966D0;
    color: #fff;
    padding: 50px 40px;
    border-radius: 5px;
    text-align: center;
}

/* 父容器：控制图片和文字横向排列 + 整体对齐 */
.factory-card-title {
    display: flex; /* 启用Flex布局，让子元素（img、h3）横向排列 */
    align-items: center; /* 图片与文字垂直居中对齐（避免上下错位） */
    gap: 20px; /* 图片和文字之间的间距，可按需调整（如10px/15px） */
    margin-bottom: 12px; /* 与下方文字（每一件产品都能体现我们的用心）的间距，保持布局呼吸感 */
}

/* 图片样式：控制尺寸+避免变形 */
.factory-card-title img {
    width: 80px; /* 图片宽度，根据 icon6.png 实际尺寸调整（建议与文字高度匹配） */
    height: 80px; /* 图片高度，与宽度一致确保图标不变形 */
    object-fit: contain; /* 保持图片原有比例，避免拉伸模糊 */
    vertical-align: middle; /* 兼容非Flex场景的垂直对齐（兜底） */
}

/* 文字样式：优化字体+清除默认边距 */
.factory-card-title h3 {
    font-size: 30px; /* 文字大小，与原页面风格保持一致 */
    font-weight: bold; /* 文字加粗，突出标题层级 */
    color: #fff; /* 文字颜色（因父容器 .factory-card 是蓝色背景，用白色更醒目） */
    margin: 0; /* 清除 h3 默认的上下外边距，避免影响Flex垂直居中 */
    line-height: 1.3; /* 优化文字行高，避免换行后拥挤 */
    letter-spacing: 0.2em;
}

.factory-card p {
    font-size: 16px;
    margin-bottom: 5px;
}

.factory-xyw {
  font-size: 12px; /* 基础字体设为浏览器允许的最小尺寸（如12px） */
  transform: scale(0.5); /* 缩小50%，视觉上=6px */
  margin: 0;
  color: #fff; /* 确保文字颜色可见 */
  display: inline-block; /* 配合缩放，避免影响其他元素布局 */
}

.factory-features {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.factory-features {
    display: flex;
    flex-wrap: wrap; 
    gap: 16px; 
    margin-top: 12px; 
    text-align: center;
}

.feature-item {
    width: calc(49% - 6px); 
    padding: 5px 15px; /* 标签内边距，避免文字贴边 */
    margin: 0; /* 清除默认margin，避免影响布局 */
    border-radius: 50px; /* 标签圆角，与原风格统一 */
    font-size: 18px; /* 标签文字大小，保持原风格 */
    font-weight: bold;
    letter-spacing: 0.2em;
    background-color: #fff; /* 标签背景色，原风格不变 */
    color: #000; /* 标签文字色，原风格不变 */
    text-align: center; /* 文字居中，提升美观度 */
    box-sizing: border-box; /* 关键：确保padding不撑大宽度，布局稳定 */
}

/* 白色细实线：宽占满容器、高2px */
.zddzxbbt {
    width: 100%; /* 宽度占满父容器（factory-card） */
    height: 2px; /* 线条高度2px，实现“细实线”效果 */
    background-color: #fff; /* 白色线条，适配父容器蓝色背景 */
    padding: 0; /* 清除p标签默认内边距，避免线条变粗 */
    border: none; /* 清除p标签默认边框，确保只有纯色线条 */
    margin-top: 2px;
}

.factory-img {
    width: 100%;
    margin-top: 10px;
}

.factory-right {
    flex: 2;
}

.factory-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    text-indent: 2em;
    margin-top: 40px;
}

.factory-right-img {
    width: 100%;
    height: 510px;
}

.advantage {
    background-image: url('ldbj.png');
    color: #fff;
    padding: 20px 150px;
    text-align: center;
}

.advantage h2 {
    font-size: 50px;
    padding: 15px 0;
}

.title-with-gradient-lines {
  position: relative; 
  margin: 20px 0 30px 0;
  padding: 20px 0;
}

.title-with-gradient-lines::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; 
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0));
}

.title-with-gradient-lines::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0));
}

.advantage-btns {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.advantage-btn {
    padding: 10px 20px;
    background-color: #fff;
    font-size: 20px;
    color: #000;
    border: none;
    font-weight: bold;
    border-radius: 25px 0px 0px 25px;
    cursor: pointer;
    font-family: 'Source Han Sans CN', sans-serif;
    transition: all 0.3s;
}

.advantage-btn-orange {
    background-color: #ff7b00;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    border-radius: 0px 25px 25px 0px;
}

.advantage-features {
    display: flex;
    justify-content: space-around;
}

.advantage-feature {
    text-align: center;
}

.advanthr{
    width:30px; 
    height:3px; 
    background:#fff; 
    margin:0 auto;
}

.advantage-feature img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.advantage-feature h1 {
    font-size: 16px;
    font-weight: bolder;
    padding: 5px 0;
}
.advantage-feature p {
    font-size: 12px;
}

.recommend {
    padding: 20px 150px;
    text-align: center;
    background-image: url('bdbj.jpg');
}

.recommend h2 {
    font-size: 40px;
    margin-bottom: 5px;
    padding: 10px 0;
}

.recommend h3 {
    font-size: 20px;
    color: #346FCD;
    margin-bottom: 20px;
    padding-top: 20px;
}

.recommend .zdxg {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
}

.recommend .zdxg span {
    font-size: 18px;
    margin-bottom: 10px;
    color: #666;
    font-weight: bolder;
}

.recommend p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.product-card-wrap {
    background: linear-gradient(to bottom, #2270D5, #0A3AA8);
    border-radius: 35px; 
    padding: 13px; 
    margin-bottom: 20px; 
}

.product-card {
    display: flex;
    border: 8px solid #D3E3FA; 
    border-radius: 25px; 
    overflow: hidden;
    transition: box-shadow 0.3s;
    background-color: #fff; 
    width: 98.5%;
}

.gradient-line {
    display: flex;
    width: 230px;  
    height: 5px;   
    align-items: center; /* 细线在容器内垂直居中（避免上下偏移） */
    margin: 10px 0; 
}

.line-thick {
    width: 80px;
    height: 5px;
    background-color: #999; 
}

.line-thin {
    width: 150px;
    height: 2px;
    background-color: #ccc; 
}

.product-card-wrap:hover .product-card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); 
}

.product-card-left {
    flex: 1;
    padding: 30px;
    text-align: left;
    flex: 4;
}

.product-card-left h2 {
    margin-bottom: 5px;
    font-size: 24px; 
    font-weight: normal;
    margin-top: 0; 
}

.product-card-left h3 {
    margin-top: 0; 
    font-size: 50px;
    font-weight: bolder;
    background: linear-gradient(to bottom, #EE5A08, #FD2C0C);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.1em;
    padding: 20px 0;
}

.product-features {
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    margin: 10px 0; 
    padding-bottom: 40px;
}

.product-feature {
    width: calc(45% - 5px); 
    padding: 5px 10px;
    padding-left: 20px; 
    margin: 0;
    border-radius: 3px;
    font-weight: bold;
    font-size: 20px;
    box-sizing: border-box; 
    position: relative; 
}

.product-feature::before {
    content: ""; 
    position: absolute; /* 绝对定位，固定在文字左侧 */
    left: 8px; /* 圆点与标签左侧的距离，按需调整 */
    top: 50%; /* 垂直居中：先定位到标签50%高度处 */
    transform: translateY(-50%); /* 再向上偏移自身50%，实现精准垂直居中 */
    width: 6px; 
    height: 6px; 
    background-color: #ff7b00; 
    border-radius: 50%; /* 圆形化，实现实心圆点 */
}

.product-card-left a {
    display: inline-block;
    padding: 5px 20px;
    background-color: #ff7b00;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    margin-top: 10px;
    transition: background-color 0.3s;
    font-size: 12px;
}

.product-card-left a:hover {
    background-color: #e66a00;
}

.product-card-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 6;
}
.product-card-left img,
.product-card-right img {
    width: 350px;
    height: auto;
}