@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Microsoft YaHei",sans-serif;
}

/* 页眉外层容器 */
.header{
    width:100%;
    height:120px;
    background:#fff;
    border-bottom:1px solid #eee;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* 内容固定宽度容器（控制整体居中，不贴边） */
.header-box{
    width:1200px;
    max-width:94%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
/* 左侧logo+公司名区域 */
.header-left{
    display:flex;
    align-items:center;
    gap:15px;
}
/* logo样式 */
.logo{
    width:80px;
    height:80px;
    object-fit:contain;
}
/* 公司名称 */
.company-name{
    font-size:36px;
    font-weight:bold;
    font-family:"华文行楷";
    color:#333;
    white-space:nowrap; /* 强制文字不换行 */
}
/* 右侧咨询热线区域 */
.header-right{
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap; /* 整体不换行 */
}
/* 电话图标 */
.phone-icon{
    font-size:32px;
    color:#333;
}
/* 热线文字区域 */
.phone-wrap{
    line-height:1.2;
    text-align:center;
}
/* 热线标题 */
.phone-txt{
    font-size:20px;
    color:#666;
}
/* 手机号 */
.phone-num{
    font-size:32px;
    font-weight:bold;
    color:#0066ff;
}

/* ========== 移动端关键适配：手机端强制一行 ========== */
@media (max-width:768px){
    .header{
        height:auto;
        padding:12px 0;
    }
    .header-box{
        flex-direction:row !important; /* 强制横向一行，不换行 */
        flex-wrap:nowrap; /* 禁止换行 */
        gap:10px;
    }
    /* 缩小logo */
    .logo{
        width:40px;
        height:40px;
    }
    /* 缩小公司名 */
    .company-name{
        font-size:15px;
    }
    /* 缩小电话图标 */
    .phone-icon{
        font-size:15px;
    }
    /* 缩小热线标题 */
    .phone-txt{
        font-size:10px;
    }
    /* 缩小手机号 */
    .phone-num{
        font-size:13px;
    }
    /* 缩小左右间距 */
    .header-left{
        gap:6px;
    }
    .header-right{
        gap:5px;
    }
}





/**
*首行导航栏
*/	
.run {
			background-color:#2b3f78;
			width:100%;
		}
        nav {
            background-color: #2b3f78;
			width:100%;
			margin: 0 auto;
			position: relative; /* 必须加 */
    		z-index: 9999;      /* 必须加，让导航永远在最上层 */         
		}

        nav ul {
            list-style-type: none;
            display: flex;
            justify-content: space-around;
            flex-wrap: nowrap; /*强制不换行*/
			font-size:24px;
			padding: 0;
			margin: 0;
        }

        nav ul li {
            flex: 1; /* 让所有 li 等分剩余空间，自动缩小 */
            min-width: 0; /* 允许内容被压缩 */
            text-align: center;
        }

        nav ul li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 8px;
            text-decoration: none;
            white-space: nowrap; /* 文字不换行 */
            overflow: hidden; /* 防止文字溢出 */
        }

        nav ul li a:hover {
            background-color: #ddd;
            color: black;
        }
		
		/* 新增：下拉菜单容器样式 */
        .dropdown {
            position: relative;
        }
        .dropdown-content {
            display: none; /* 默认隐藏 */
            position: absolute;
            top: 100%; /* 紧贴导航栏下方 */
            left: 0;
            width: 100%; /* 宽度和导航栏li一致 */
            background-color: #2b3f78;
            z-index: 999999; /* 确保在最上层 */
        }
        .dropdown-content a {
            font-size: 1.2vw; /* 下拉菜单文字比导航栏小 */
            padding: 10px 4px; /* 内边距适配 */
			overflow: hidden;   
			text-overflow: ellipsis; /* 极端情况才显示省略号，一般不会触发 */
            white-space: nowrap;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1); /* 可选：分隔线 */
        }
        /* 鼠标悬浮显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }
        /* 下拉菜单hover效果 */
        .dropdown-content a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 滑动效果的样式 */
       .slider {
            position: relative;
            height: 4px;
            background-color: white;
            transition: left 0.2s ease;
        }
        @media (max-width: 768px) {
          nav ul {
            font-size: 14px; /* 移动端缩小字体 */
          }
          nav ul li a {
            padding: 12px 4px; /* 进一步减小内边距 */
          }
		  /* 下拉菜单移动端文字大小 */
          .dropdown-content a {
            font-size: 1.0vw; /* 比导航栏文字小 */
            padding: 8px 3px;
          }
        }
        
        @media (max-width: 480px) {
          nav ul {
            font-size: 12px; /* 更小屏幕再缩小 */
          }
		  /* 下拉菜单超小屏文字大小 */
          .dropdown-content a {
            font-size: 0.9vw;
            padding: 6px 2px;
          }
        }
        
        
/* 轮播主容器：控制高度（不超高）、宽度全屏 */
        .banner-slider {
            width: 100%;
            height: 600px; /* 轮播高度，可自行微调 */
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        /* 单张Banner样式 */
        .banner-item {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.8s ease; /* 平滑切换效果 */
            display: flex;
            align-items: center;
            padding: 0 5%;
            background-size: cover;
            background-position: center;
        }
        /* 默认显示第一张Banner */
        .banner-item.active {
            opacity: 1;
            z-index: 1;
        }
        /* Banner文字内容样式 */
        .banner-text {
            max-width: 1200px;
            text-align: left;
            background-color: rgba(0,0,0,0.3);
            padding: 20px;
            margin: 0 auto;
            z-index: 2;
        }
        .banner-title {
            font-size: 36px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 15px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        .banner-subtitle {
            font-size: 20px;
            color: #fff;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        .banner-desc {
            font-size: 16px;
            color: #fff;
            margin-bottom: 25px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        /* 按钮样式 */
        .banner-btn {
            display: inline-block;
            padding: 12px 30px;
            background: #e63946;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            transition: background 0.3s;
        }
        .banner-btn:hover {
            background: #c1121f;
        }
        /* 底部圆点导航 */
        .banner-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 99;
            display: flex;
            gap: 12px;
        }
        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: all 0.3s;
        }
        .dot.active {
            background: #e63946; /* 高亮当前圆点 */
            width: 24px;
            border-radius: 6px;
        }
       /* ========== 移动端自适应 开始 ========== */
        /* 平板设备：屏幕宽度 ≤768px */
        @media screen and (max-width: 768px) {
            .banner-slider {
                height: 320px; /* 平板轮播高度 */
            }
            .banner-title {
                font-size: 28px;
            }
            .banner-subtitle {
                font-size: 17px;
            }
            .banner-desc {
                font-size: 14px;
            }
            .banner-btn {
                padding: 10px 24px;
                font-size: 15px;
            }
            .banner-item {
                padding: 0 3%; /* 平板缩小左右边距 */
            }
        }

        /* 手机设备：屏幕宽度 ≤480px */
        @media screen and (max-width: 480px) {
            .banner-slider {
                height: 240px; /* 手机轮播高度 */
            }
            .banner-title {
                font-size: 16px;
                margin-bottom: 10px;
            }
            .banner-subtitle {
                font-size: 12px;
                margin-bottom: 8px;
            }
            .banner-desc {
                font-size: 10px;
                margin-bottom: 15px;

            }
            .banner-btn {
                padding: 4px 10px;
                font-size: 12px;
            }
            /* 手机端缩小圆点 */
            .dot {
                width: 10px;
                height: 10px;
            }
            .dot.active {
                width: 18px;
            }
            .banner-item {
                padding: 0 2%; /* 手机端进一步贴近左侧 */
            }
        }
        /* ========== 移动端自适应 结束 ========== */
 

/**
*产品展示
*/
.display {
	float:left;
	margin-top:20px;
	width:100%;
}
 .display h2 {
	text-align:center;
	margin-top:10px;
	font-size: 50px;
	color:#000;
}
.display p {
	text-align:center;
	font-size: 22px;
	margin-top:10px;
	color:#333;
}

        /* 唯一父容器：左侧标题 + 右侧分类块 */
        .product-container {
            display: flex;
            align-items: stretch; /* 让右侧分类块区域高度与左侧标题一致 */
            gap: 20px; /* 左右区域间距 */
            padding: 20px;
            max-width: 80%; /* 限制最大宽度，避免过宽 */
            margin: 0 auto; /* 水平居中 */
			margin-top:20px;
        }

        /* 左侧产品分类标题块 */
        .category-title {
            width: 200px; /* 固定宽度 */
            background-color: #007bff;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 36px;
            font-weight: 600;
            padding: 20px 10px;
            border-radius: 4px;
        }

        .category-title small {
            font-size: 10px;
            margin-top: 8px;
            opacity: 0.9;
            letter-spacing: 1px;
        }

        /* 右侧灰色分类块容器：自动填充剩余宽度，支持换行 */
        .category-list {
            flex: 1; /* 占据父容器剩余宽度 */
            display: flex;
            flex-wrap: wrap; /* 自动换行，不溢出 */
            gap: 12px; /* 分类块之间的间距 */
            align-content: center; /* 分类块垂直居中排列 */
        }

        /* 灰色分类块样式 */
        .category-item {
            padding: 12px 24px;
            background-color: #eee;
            color: #333;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 22px;
            border-radius: 4px;
            white-space: nowrap; /* 防止文字换行 */
        }
		.category-item a{
			color: #000;
		}
		 
		.category-item a:link,
		.category-item a:visited{ 
			color:#000;
			text-decoration:none;
		}
		
		.category-item a:hover,
		.category-item a:active{ 
			color: #FFF;
			text-decoration:none;
		}

        /* 鼠标悬浮效果 */
        .category-item:hover {
            background-color: #28a745; /* 标准绿色 */
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* 移动端：标题在上，分类块自适应排列 */
@media (max-width: 768px) {
  .product-container {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }
  .category-title {
    width: 100%;
    font-size: 28px;
    padding: 15px;
  }
  .category-list {
    gap: 12px;
  }
  .category-item {
    padding: 6px 8px;
    font-size: 10px;
  }
}
        .container {
            max-width:80%;
            margin: 0 auto;
            padding: 20px;
        }

	
        .product-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .product-item {
            border: 1px solid #eee;
            border-radius: 8px;
            overflow: hidden; /* 确保卡片内部元素不溢出 */
            text-align: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        /* 图片容器：限制图片显示区域，溢出隐藏 */
        .product-img-container {
            width: 100%;
             overflow: hidden; /* 关键：图片放大时超出容器的部分隐藏，不遮挡文字 */
            position: relative;
        }

        .product-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片自适应容器，保持比例不拉伸 */
            transition: transform 0.3s ease; /* 平滑放大过渡 */
        }

        /* 鼠标悬浮：图片放大1.1倍，仅在容器内显示 */
        .product-item:hover .product-img-container img {
            transform: scale(1.1); /* 放大1.1倍（可调整数值） */
        }

        .product-name {
            padding: 12px 0;
            background-color: #fff;
            color: #333;
            font-size: 24px;
            transition: all 0.3s ease;
            border-top: 1px solid #eee;
        }
		.product-name a{
			color: #000;
		}
		 
		.product-name a:link,
		.product-name a:visited{ 
			color:#000;
			text-decoration:none;
		}
		
		.product-name a:hover,
		.product-name a:active{ 
			color: #FFF;
			text-decoration:none;
		}

        /* 悬浮时名称块变色 */
        .product-item:hover .product-name {
            background-color: #007bff; /* 绿色背景（可替换为需要的颜色） */
            color: #fff; /* 白色文字 */
        }
 /* ========== 新增：移动端强制一行3个展品（核心代码） ========== */
/* 平板/手机 768px 及以下 */
@media (max-width: 768px) {
    .container {
        max-width: 96%; /* 扩大移动端左右留白，避免贴边 */
        padding: 10px;
    }
    /* 保持一行3列，Grid 不改变列数 */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px; /* 缩小移动端卡片间距 */
    }
    /* 缩小移动端字体、内边距，防止挤压 */
    .product-name {
        font-size: 14px;
        padding: 8px 0;
    }
}

/* 超小屏手机 480px 及以下 */
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr); /* 依旧一行3个 */
        gap: 6px; /* 进一步缩小间距 */
    }
    .product-name {
        font-size: 12px;
        padding: 6px 0;
    }
}
 

/**
* 工程案例
*/ 
.case {
	float:left;
	margin-top:20px;
	width:100%;
	height:100%;
}
.case h2 {
	text-align:center;
	margin-top:10px;
	font-size: 50px;
	color:#000;
}
.case p {
	text-align:center;
	font-size: 22px;
	margin-top:10px;
	color:#333;
}
 
 
        .case-scroll {
            overflow: hidden;
            position: relative;
			margin-top:20px;
			margin-bottom:40px;
        }
        .case-list {
            display: flex;
            animation: scroll-left 30s linear infinite; /* 30秒匀速滚动，循环播放 */
        }
        .case-card {
            width: 400px;
             border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 20px;
            flex-shrink: 0; /* 防止卡片被压缩 */
        }
        .case-card img {
            width: 100%;
             object-fit: cover;
        }
        .case-card p {
            text-align: center;
            padding: 10px;
            font-size: 20px;
            color: #666;
        }
        /* 滚动动画 */
        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%); /* 滚动距离为卡片总宽度的50%，实现无缝循环 */
            }
        }
        /* 鼠标悬浮暂停动画 */
        .case-list:hover {
            animation-play-state: paused;
        }
        /* 响应式适配 */
        @media (max-width: 768px) {
            .case-card {
                width: 150px;
            }
            .case-card img {
                height: 100px;
            }
            @keyframes scroll-left {
                100% {
                    transform: translateX(-70%);
                }
            }
        }

 
/**
*关于我们
*/
.about {
	float:left;
	margin-top:20px;
	width:100%;
}
.about h2 {
	text-align:center;
	margin-top:10px;
	font-size: 50px;
	color:#000;
}
.about p {
	text-align:center;
	font-size: 20px;
	margin-top:10px;
	color:#333;
}
.about-us {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  width:80%;
  margin: 0 auto;
  background-color:#F8F8F8;
  margin: 20px auto;
}

.left-column {
  flex: 1 1 300px;
  padding-right: 20px;
}
.left-column h2 {
	color:#39F;
	font-size:35px;
	text-align:left;
}
.left-column p {
	text-align:left;
}
  .box {
	border-left:2px solid #0099FF;
	width:350px;
	height:45px; 
	padding-left:10px;
	padding-top:15px;
	margin-bottom:10px;
}
  .box h3{
	font-size:28px;
	color: #000;
	text-align:center;
}
.right-column {
  flex: 1 1 300px;
}

.right-column img {
  width: 100%;
  height: auto;
}

button {
  padding: 8px 16px;
  border: 1px solid #333;
  border-radius: 20px;
  background-color: transparent;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #333;
  color: white;
}
 .right-content {
      flex: 1;
      min-width: 300px;
      position: relative;
    }

    .image-container {
      width: 100%;
      overflow: hidden;
    }

    .image-container img {
      width: 100%;
      height: auto;
      display: block;
    }

    video {
      width: 100%;
      height: auto;
      display: none;
    }

/*更多详情*/
.btn {
	background:transparent; /*背景色 透明*/
	border:2px solid #000;
	color:#000;
	padding:10px 20px;
	font-weight:bold; /*字体加粗一些*/	
	border-radius:40px / 60px;
	float:right;
	 
	
}

/*伪元素before定义悬浮后样式*/
.btn::before {
	content:"";
	display:block; /*定义为块元素*/
	width:100%;
	height:100%;
	background:#0099ff;
	position:absolute;/*相对父元素*/
 	top:0;
	left:0;/*定义到左上角*/
	transform:skewX(45deg);/*x方向扭曲45度*/
}

/*伪元素初始宽度为0*/
.btn::before {
	width:0%;
	transition:all 1s ease-out; /*过渡持续1s*/
	z-index:-1; /*伪元素层级调整为-1*/
	left:-30px; /*向左偏移一定距离*/
}

/*伪元素悬浮宽度100%*/
.btn:hover::before {
	width:150%;
}
.btn:hover {
	border:2px solid #0099ff;
	color:#0099FF;
	transition:all 1s ease-out;
}
.btn {
	overflow:hidden; /*隐藏溢出部分*/
	position:relative;
}
 
 
    .info-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 20px 0;
        border-bottom: 1px solid #eee;
    }
    .info-item {
        display: flex;
        align-items: center;
        margin: 10px 20px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .info-icon {
        font-size: 42px;
        margin-right: 12px;
        color: #333;
        transition: color 0.3s ease;
    }
    .info-text {
        text-align: left;
    }
    .info-text h3 {
        font-size: 24px;
        color: #333;
        margin: 0 0 4px 0;
        transition: color 0.3s ease;
    }
    .info-text p {
        font-size: 24px;
        color: #333;
        margin: 0;
        transition: color 0.3s ease;
    }
    a {
        text-decoration: none;
    }
    .info-item:hover .info-icon,
    .info-item:hover .info-text h3,
    .info-item:hover .info-text p {
        color: #0099FF;
    }

    /* ========== 新增移动端适配代码（仅手机/平板生效） ========== */
   @media (max-width: 768px) {
        /* 移动端导航容器改为换行flex，调整间距 */
        .info-nav {
            flex-wrap: wrap; /* 允许项目换行 */
            justify-content: space-between; /* 两端对齐，保证一行两个 */
            padding: 15px 25px; /* 减小上下内边距，增加左右内边距 */
        }
        /* 移动端每个项目宽度设为45%（留间距），调整margin */
        .info-item {
            width: 45%; /* 一行两个的核心：总宽度≈90%，剩余10%做间距 */
            margin: 10px 0; /* 去掉左右margin，保留上下 */
            padding: 0 5px; /* 增加内边距避免内容挤边 */
        }
        /* 缩小移动端图标和字体大小，适配手机屏幕 */
        .info-icon {
            white-space: nowrap;
            font-size: 28px;
            margin-right: 8px;
        }
        .info-text h3 {
            white-space: nowrap;
            font-size: 16px;
        }
        .info-text p {
            white-space: nowrap;
            font-size: 12px;
        }
    }
 
		
	/* ====================== 我加的核心：小屏幕视频到文字下面 ====================== */
@media (max-width: 1000px) {
  .about-us {
    flex-direction: column; /* 竖排 */
  }
  .left-column {
    order: 1; /* 文字在上 */
    width: 100%;
    padding-right: 0;
  }
  .right-content,
  .right-column {
    order: 2; /* 视频/图片在下 */
    width: 100%;
  }
  .box {
    width: 100%;
  }
}


/**
*厂区环境
*/

        .dody {
			width:100%;
 	background-color:#F8F8F8;
	float:left;
	margin-bottom:50px;
	margin-top:30px;
	position:relative;
            background-color: #F8F8F8;
             font-family: "Microsoft Yahei", sans-serif;
            color: #333;
        }
        .factory-section {
            max-width: 90%;
            margin: 0 auto;
            padding: 50px 20px;
        }
        .section-title {
            text-align: center;
            font-size: 36px;
            color: #000;
            margin-bottom: 40px;
        }
        .factory-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            justify-content: center;
        }
        .factory-card {
            width: calc(25% - 30px); /* 一行4张，自适应间距 */
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .factory-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        .card-content {
            padding: 15px;
        }
        .card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .card-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
        }
        .pagination {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }
        .page-btn {
            width: 80px;
            height: 40px;
            background-color: #ccc;
            border: none;
            border-radius: 4px;
            color: #333;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .page-btn:hover {
            background-color: #999;
            color: #fff;
        }
        .page-btn.prev {
            background-color: #6699cc;
            color: #fff;
        }
        .page-btn.prev:hover {
            background-color: #336699;
        }

        /* 响应式适配 */
        @media (max-width: 992px) {
            .factory-card {
                width: calc(50% - 30px);
            }
        }
        @media (max-width: 576px) {
            .factory-card {
                width: 100%;
            }
            .section-title {
                font-size: 28px;
            }
        }






/**
*定制服务
*/

.customize {
	float:left;
	margin-top:20px;
	width:100%;
}
.customize h2 {
	text-align:center;
	margin-top:10px;
	font-size: 50px;
	color:#000;
}
.customize .p {
	text-align:center;
	font-size: 22px;
	margin-top:10px;
	color:#333;
	margin-bottom: 50px;
}
/* 定制流程整体容器 */
    .custom-process {
        width: 100%;
        margin: 60px auto;
        padding: 0 10px;
    }

    /* 流程行：保持电脑端布局，不换行 */
    .process-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5%; /* 用百分比间距，自动缩小 */
        flex-wrap: nowrap;
        padding: 0;
    }

    /* 流程卡片：自动等比缩小宽度 */
    .process-step {
        flex: 1; /* 核心：所有卡片自动等分宽度 */
        min-width: 0; /* 允许内容缩小 */
        background-color: #0066cc;
        color: #fff;
        border-radius: 8px;
        padding: 20px 10px;
        text-align: center;
        box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
    }

    /* 图标、文字也跟着整体缩小 */
    .process-icon {
        font-size: clamp(20px, 4vw, 32px);
        margin-bottom: 10px;
        line-height: 1;
    }

    .process-title {
        font-size: clamp(14px, 2.5vw, 18px);
        font-weight: bold;
        margin-bottom: 8px;
    }

    .process-desc {
        font-size: clamp(10px, 2vw, 14px);
        line-height: 1.5;
        opacity: 0.9;
    }

    /* 箭头也自动缩小 */
    .process-arrow {
        flex: 0 0 auto;
        color: #0066cc;
        font-size: clamp(16px, 3vw, 24px);
        line-height: 1;
    }

    .vertical-arrow {
        position: relative;
    }
    .vertical-arrow::after {
        content: "↓";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -30px;
        color: #0066cc;
        font-size: clamp(16px, 3vw, 24px);
        z-index: 1;
    }

    .process-row-margin {
        margin-top: 60px;
    }





/**
*四大优势
*/
.advantage {
    width:100%;
    float:left;
    margin-top:50px;
    overflow: hidden;
}
.advantage h1 {
    text-align:center;
    margin-top:10px;
    font-size: 50px;
    color:#000;
}
.advantage p {
    text-align:center;
    font-size: 22px;
    margin-top:10px;
    color:#333;
}
/* 全屏图片容器 */
.concern-banner {
  width: 100%;
  overflow: hidden; /* 防止图片溢出（可选） */
}

/* 图片核心样式：宽度100% + 高度自动 + 最大宽度限制（可选） */
.fullscreen-img {
  width: 100%;
  height: auto; /* 高度随宽度等比例变化 */
  max-width: 100%; /* 限制最大宽度为屏幕宽度 */
  display: block; /* 去除图片底部间隙 */
}
 
 .superiority {
            max-width: 80%;
            margin: 20px auto;
            padding: 5px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            min-width: 320px; /* 最小宽度防止内容挤压 */
            flex: 1;
            display: flex;
            flex-direction: column; /* 上下布局 */
            gap: 20px;
        }
 
 
#tab-container {  /*标签栏盒子样式*/
    width: 80%;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 2px rgba(0,0,0,.15);
    overflow: hidden;
    position:relative;
}
#tab-nav {  /*标签盒子样式*/
    background: #1abc9c;
    margin: 0;
    padding: 0;
    width: 100%;
    height:auto;
    display: flex; /* 弹性布局，标签自动适应宽度 */
    justify-content: space-around; /* 标签平均分布（可根据需求调整） */
}
#tab-nav li {  /*无序列表实现标签效果*/
    display: inline-block;
    list-style: none;
    height: auto;
    line-height: 150px;
    text-align: center;
    font-size:36px;
}
#tab-nav li.tab-head { /*标签默认样式*/
    color: #fff;
    text-decoration: none;
    flex: 1; /* 弹性项，自动分配空间 */
    text-align: center; /* 标签文字居中 */
    white-space: nowrap; /* 防止标签文字换行，可根据需求移除 */
}
#tab-nav li.current {  /*标签选中样式*/
    color: #1abc9c;
    background: #eee;
    font-weight: bold;
}

#tab-content {  /*内容部分盒子样式*/
    width:100%;
    flex: 1;
    padding: 5px;
    overflow:visible;
    gap: 20px;
    display: flex;
}
      
#tab-content .tab-con {  /*标签内容非选中样式*/
    display: none;
    width:100%;
}
#tab-content .current {  /*标签对应的内容选中样式*/
    display: block;
    width:100%;
}
 /* 图片与文字布局 */
 .media-section {
    display: flex;
    flex-wrap: wrap; /* 小屏幕自动换行 */
    gap: 20px; /* 内外边距 */
}
.image-group {
    flex: 1.5; /* 图片组占可用空间 */
    display: flex;
    gap: 10px; /* 图片间距 */
}

        .image-item {
            flex: 1; /* 两张图片等宽 */
            min-width: 150px; /* 单张图片最小宽度 */
        }

        .image-item img {
            width: 100%;
            height: auto;
            border-radius: 4px;
            display: block; /* 去除图片底部间隙 */
        }
                
.text-section {
            flex: 1; /* 文字区域占2份空间 */
            display: flex;
            flex-direction: column;
            justify-content: center; /* 垂直居中 */
            text-align: center; /* 文字水平居中 */
			margin-right:10px;
        }
.text-h1 {
	 position: relative;
     line-height: 1.6;
	 font-size:36px;
	 color: #36F;
}
 .text-h1::before {
            position: absolute;
            left: 0;
            font-size: 1.2em;
            line-height: 1;
        }
        .text-item {
            position: relative;
            padding-left: 20px; /* 为黑点留出空间 */
            line-height: 1.6;
        }

        .text-item::before {
            content: "•"; /* 实心黑点 */
            position: absolute;
            left: 0;
            color: #333;
            font-size: 1.2em;
            line-height: 1;
        }

/* ========== 四大优势 全新移动端适配（标签一行+双图同行+文字在下） ========== */
/* 平板端 768px */
@media (max-width: 768px) {
    /* 1. 标签导航：保持水平一行，不竖排，优化尺寸 */
    #tab-nav {
        flex-wrap: nowrap; /* 强制标签不换行 */
    }
    #tab-nav li {
        line-height: 80px; /* 降低标签高度 */
        font-size: 22px;   /* 缩小标签字体 */
        white-space: nowrap; /* 标签文字不换行 */
    }

    /* 2. 图文整体：上下布局 → 图片在上，文字在下 */
    .media-section {
        flex-direction: column;
        gap: 25px;
    }

    /* 3. 图片组：保持横向，两张图片同行并排 */
    .image-group {
        display: flex;
        flex-direction: row; /* 强制横向排列 */
        justify-content: center;
        gap: 10px;
        width: 100%;
    }
    .image-item {
        min-width: 140px; /* 限制图片最小宽度，保证两图同行 */
        flex: 1;
    }

    /* 4. 文字区域：自动占宽，位于图片下方 */
    .text-section {
        width: 100%;
        margin-right: 0;
    }

    /* 标题文字适配 */
    .advantage h1 {
        font-size: 32px;
    }
    .advantage p {
        font-size: 16px;
    }
    .text-h1 {
        font-size: 28px;
    }

    /* 外层容器适配 */
    .superiority,
    #tab-container 
{
        width: 95%;
    }
}

/* 手机端 480px（超小屏进一步优化） */
@media (max-width: 480px) {
    /* 标签栏继续保持一行，再次缩小字体 */
    #tab-nav li {
        line-height: 60px;
        font-size: 18px;
    }

    /* 图片组：依旧两图同行，缩小尺寸 */
    .image-item {
        min-width: 110px;
    }

    /* 文字、标题精细缩小 */
    .advantage h1 {
        font-size: 26px;
    }
    .advantage p {
        font-size: 14px;
    }
    .text-h1 {
        font-size: 22px;
    }
    .text-item {
        font-size: 14px;
    }
}


/**
*新闻资讯
**/
.news-topbig{padding:50px 15px;background:#f8fafc;}
.news-max{max-width:1200px;margin:0 auto;}
.news-head-title{text-align:center;margin-bottom:35px;}
.news-head-title h2{font-size:50px;color:#222;margin:0;}
.news-head-title p{color:#666;margin-top:6px;font-size:22px;}
.news-row{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
.big-news{height:100%;position:relative;border-radius:8px;overflow:hidden;}
.big-news img{width:100%;height:320px;object-fit:cover;}
.big-text{position:absolute;left:0;bottom:0;width:100%;padding:20px;background:linear-gradient(transparent,#00000099);color:#fff;}
.big-text a{color:#fff;text-decoration:none;font-size:18px;font-weight:500;display:block;margin-bottom:6px;}
.big-text span{font-size:13px;opacity:0.8;}
.right-news{display:flex;flex-direction:column;gap:20px;}
.small-item{display:flex;gap:15px;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 1px 8px #eee;}
.small-item img{width:110px;height:90px;object-fit:cover;}
.small-txt{padding:8px 0;flex:1;}
.small-txt a{font-size:15px;color:#333;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;line-height:1.5;}
.small-txt a:hover{color:#0278c5;}
.small-txt .date{font-size:12px;color:#999;margin-top:6px;display:block;}
/*移动端*/
@media(max-width:1200px){
  .news-row{grid-template-columns:1fr;}
  .big-news img{height:220px;}
}
/* ========== 全局所有标题 移动端统一适配（新增代码） ========== */
/* 适配 768px 及以下 手机/平板 */
@media (max-width: 768px) {
    /* 一级大标题：页面主模块标题 h1/h2（原50px） */
    .case h2,
    .about h2,
    .customize h2,
    .display h2,
    .advantage h1,
    .news-head-title h2 {
        font-size: 28px;
        margin-top: 8px;
        margin-bottom: 10px;
    }

    /* 标题下方描述文字（原22px） */
    .case p,
    .about p,
    .customize .p,
    .display p,
    .advantage p,
    .news-head-title p {
        font-size: 16px;
        margin-top: 6px;
        line-height: 1.5;
    }

    /* 厂区环境 模块标题（原36px） */
    .section-title {
        font-size: 24px;
        margin-bottom: 25px;
    }

    /* 关于我们 内部小标题（原35px） */
    .left-column h2 {
        font-size: 22px;
    }

    /* 侧边栏小标题 box h3（原28px） */
    .box h3 {
        font-size: 18px;
    }

    /* 四大优势 文字标题（原36px） */
    .text-h1 {
        font-size: 24px;
    }

    /* 产品分类左侧标题（原36px） */
    .category-title {
        font-size: 22px;
    }

    /* 底部、卡片类小标题 */
    .card-title,
    .foots-left h3,
    .foot-center h3,
    .foot-right h3 {
        font-size: 18px;
    }

    /* 导航标签文字（原36px） */
    #tab-nav li {
        font-size: 20px;
        line-height: 80px;
    }
}

/* 适配 480px 及以下 超小屏手机 */
@media (max-width: 480px) {
    /* 一级大标题 再次缩小 */
    .case h2,
    .about h2,
    .customize h2,
    .display h2,
    .advantage h1,
    .news-head-title h2 {
        font-size: 24px;
    }

    /* 标题描述文字 */
    .case p,
    .about p,
    .customize .p,
    .display p,
    .advantage p,
    .news-head-title p {
        font-size: 14px;
    }

    /* 厂区环境标题 */
    .section-title {
        font-size: 20px;
    }

    /* 关于我们内部小标题 */
    .left-column h2 {
        font-size: 20px;
    }

    /* 侧边栏小标题 */
    .box h3 {
        font-size: 16px;
    }

    /* 四大优势文字标题 */
    .text-h1 {
        font-size: 20px;
    }

    /* 产品分类标题 */
    .category-title {
        font-size: 20px;
    }

    /* 导航标签文字 */
    #tab-nav li {
        font-size: 18px;
        line-height: 60px;
    }
}


 

/* 底栏整体 */
        footer{
            background-color:#33383f;
            color:#ffffff;
            padding:60px 80px 30px;
        }

        /* 上半部分：三栏信息区 */
        .foot-main{
            display:flex;
            justify-content:space-between;
            flex-wrap:wrap;
            gap:20px;
            margin-bottom:40px;
        }
        .foots-left,.foot-center,.foot-right{
            width:32%;
        }
        .foots-left h3,.foot-center h3,.foot-right h3{
            font-size:24px;
            margin-bottom:25px;
        }
        .foot-main .foots-left p{
            font-size:16px;
            line-height:2.2;
            margin-bottom:8px;color:#ffffff;
        }
        .wechat-qrcode{
            margin-top:20px;
        }
        .wechat-qrcode img{
            width:100px;
            height:100px;
        }
        .wechat-qrcode span{
            display:block;
            font-size:14px;
            margin-top:8px;
        }
        .foot-center a{
            display:block;
            color:#fff;
            text-decoration:none;
            font-size:16px;
            line-height:2.2;
            margin-bottom:8px;
        }
        .foot-center a:hover{
            color:#a0cfff;
        }
        .foot-right a{
            display:block;
            color:#fff;
            text-decoration:none;
            font-size:16px;
            line-height:1.5;
            margin-bottom:8px;
        }
        .foot-right a:hover{
            color:#a0cfff;
        }

        /* ========== 版权区（你要的效果在这里） ========== */
        .foot-copyright{
            text-align:center;
            border-top:1px solid rgba(255,255,255,0.15);
            padding-top:25px;
            font-size:15px;
            line-height:2.2;
        }
        /* 所有链接默认：白色，无下划线 */
        .foot-copyright a{
            color:#ffffff !important;
            text-decoration:none !important;
            margin:0 6px;
            transition:all 0.3s;
        }
        /* 鼠标悬浮：浅蓝色 */
        .foot-copyright a:hover{
            color:#a0cfff !important;
        }
        .police-icon{
            width:18px;
            height:18px;
            vertical-align:middle;
            margin:0 4px;
        }

        /* ========== 移动端适配 ========== */
        @media (max-width:768px){
            footer{padding:30px 20px 20px;}
            .foot-main{flex-direction:column;}
            .foots-left,.foot-center,.foot-right{width:100%;margin-bottom:25px;}
            .foots-left h3,.foot-center h3,.foot-right h3{font-size:20px;margin-bottom:15px;}
            .wechat-qrcode img{width:80px;height:80px;}
            .foot-copyright{font-size:14px;line-height:2;}
        }
 

        
        
/* 右侧悬浮容器 */
    .float-sidebar {
      position: fixed;
      right: 15px;
      top: 50%;
bottom: 30px;
z-index: 9999999;
      display: flex;
      flex-direction: column;
      gap: 8px; /* 按钮间距再缩小 */
    }

    /* 单个按钮盒子 再次缩小 */
    .float-btn {
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 10px;
      box-shadow: 0 1px 6px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
      backdrop-filter: blur(2px);
    }
    .float-btn:hover {
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    /* SVG图标整体缩小 */
    .float-icon {
      width: 28px;
      height: 28px;
      fill: none;
      stroke: #666;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* 文字提示弹窗 */
    .tip-text {
      position: absolute;
      right: 58px;
      padding: 6px 12px;
      background: #333;
      color: #fff;
      border-radius: 5px;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: 0.2s;
      pointer-events: none;
      font-size: 12px;
    }
    .float-btn.active .tip-text {
      opacity: 1;
      visibility: visible;
    }

    /* 微信二维码弹窗同步缩小 */
    .tip-qrcode {
      position: absolute;
      right: 58px;
      padding: 8px;
      background: rgba(255,255,255,0.5);
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      text-align: center;
      opacity: 0;
      visibility: hidden;
      transition: 0.2s;
      pointer-events: none;
      width: 120px;
    }
    .float-btn.active .tip-qrcode {
      opacity: 1;
      visibility: visible;
    }
    .tip-qrcode img {
      width: 100%;
      display: block;
      border-radius: 4px;
    }
    .tip-qrcode p {
      margin-top: 4px;
      color: #666;
      font-size: 10px;
    }

    /* 箭头旋转 */
    .arrow-icon {
        transition: transform 0.3s ease;
        transform: rotate(180deg); /* 默认向下 */
    }
    .arrow-icon.up {
        transform: rotate(0deg); /* 滑到底部恢复向上 */
    }
   @media screen and (max-width: 768px) {
  /* 正文取消右侧留白，手机空间小 */
  body {
    padding-right: 0;
  }

  /* 侧边栏右下角适配 */
  .float-sidebar {
    right: 8px;
    bottom: 20px; /* 手机底部距离缩小 */
    gap: 6px;
  }

  /* 按钮进一步缩小，适配手机 */
  .float-btn {
    width: 40px;
    height: 52px;
    border-radius: 8px;
  }

  /* 图标同步缩小 */
  .float-icon {
    width: 22px;
    height: 22px;
    stroke-width: 2;
  }

  /* 文字弹窗距离按钮更近，缩小内边距字号 */
  .tip-text {
    right: 48px;
    padding: 4px 8px;
    font-size: 10px;
  }

  /* 二维码弹窗缩小宽度 */
  .tip-qrcode {
    right: 48px;
    width: 100px;
    padding: 6px;
  }
  .tip-qrcode p {
    font-size: 9px;
    margin-top: 2px;
  }
}

/* 超小手机屏幕 ≤480px 再压缩 */
@media screen and (max-width: 480px) {
  .float-sidebar {
    right: 5px;
    bottom: 15px;
  }
  .float-btn {
    width: 36px;
    height: 46px;
  }
  .float-icon {
    width: 20px;
    height: 20px;
  }
  .tip-qrcode {
    width: 90px;
  }
}