<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>泰州市鸿宝消防器材有限公司 - 专业消防装备制造商</title>
<meta name="keywords" content="消防器材,消防员灭火防护服,消防救援装备,消防防护装备,消防头盔,泰州市鸿宝消防器材有限公司,江苏消防器材厂家,高新技术消防企业,ISO9001认证消防产品,3C认证消防装备,消防器材研发生产,消防设备售后服务">
<meta name="description" content="泰州市鸿宝消防器材有限公司是专注消防装备研发生产30年的高新技术企业，主营消防员灭火防护服、消防救援装备、防护装备等全品类产品，获ISO9001、3C认证。提供消防设备售后服务，为江苏及全国客户提供安全可靠的消防解决方案，打造消防行业标杆品牌。">
<script src="images/tailwind.js"></script>
<link href="images/css/font-awesome.min.css" rel="stylesheet">
    <script>
tailwind.config = {
    theme: {
        extend: {
            colors: {
			primary: '#F59E0B',
            secondary: '#e94560',
            accent: '#ff7a00',
            dark: '#1a1a2e',
            light: '#f5f5f5',
                'fire-red': '#F59E0B',      // 适中深度的琥珀黄，比之前稍浅
                'fire-orange': '#FDE68A',   // 温暖浅黄，柔和不刺眼
                'fire-yellow': '#D97706',   // 中等深度的黄棕色，不过于浓重
                'fire-dark': '#6B7280',     // 中性深灰，平衡黄色调
                'dark-gray': '#1F2937',     // 深灰色文本，确保清晰可读
				'primary':'#F59E0B',
				'fire-primary': '#F59E0B',    // 标准消防红（主色）
                'fire-light': '#1F2937',      // 浅消防红（弱化色）
				
                'light-gray': '#F9FAFB'     // 浅灰背景，保持整体清爽
				
				
            },
            fontFamily: {
                sans: ['Inter', 'system-ui', 'sans-serif'],
            },
			boxShadow: {
            'custom': '0 10px 25px -5px rgba(15, 52, 96, 0.1)',
            'custom-hover': '0 20px 35px -10px rgba(15, 52, 96, 0.2)'
          }
        }
    }
}

    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            }
            .text-shadow-lg {
                text-shadow: 0 4px 8px rgba(0,0,0,0.5);
            }
            .parallax {
                background-attachment: fixed;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            }
        }
    </style>
</head>
<body class="font-sans text-dark-gray bg-white pt-16 md:pt-20">
    <header class="fixed top-0 left-0 right-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-2">
            <div class="flex items-center">
    <a href="/"><img src="images/logo.png" alt="鸿宝消防LOGO" class="h-12 md:h-24 md:mr-3"></a>
    <div class="h-10 md:h-20 border-l-2 border-gray-200 mx-2 md:mx-4"></div>
    <div class="text-center">
        <div class="font-bold text-fire-red md:text-[20px]  lg:text-3xl ">泰州市鸿宝消防器材有限公司</div>
        <div class="text-dark-gray text-[10px] md:text-[14px]  lg:text-xl ">专注消防器材40年 鸿图成盛业 宝品佑平安</div>
		
    </div>
</div>
                
  <div class="hidden md:flex items-center mr-4">
    <!-- 用CSS实现圆形电话图标，替代图片 -->
    <div class="w-10 h-10 rounded-full bg-fire-red flex items-center justify-center text-white mr-2">
        <i class="fa fa-phone"></i>
    </div>
    <div class="text-left">
        <div class="text-sm text-dark-gray">服务热线</div>
        <div class="font-bold text-fire-red text-2xl">0523-86134463</div>
    </div>
</div>
                    <button id="menu-toggle" class="md:hidden text-fire-red text-2xl p-2 ml-auto">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>
<nav id="main-nav" class="fixed top-18 md:top-28  left-0 right-0 py-10 md:py-2 z-40 transition-all duration-300 
    bg-[linear-gradient(180deg,rgba(255,255,255,0.25)_0%,rgba(255,255,255,0.05)_48%,rgba(0,0,0,0.15)_52%,rgba(0,0,0,0.05)_100%),
            linear-gradient(90deg,#c89f2c,#e6c048,#f2d46f,#e6c048,#c89f2c)]">
    
    <div class="container mx-auto px-4 ">
        <ul id="main-menu" class="hidden md:flex flex-wrap justify-around text-sm md:text-sm lg:text-base px-2">
            <!-- 恢复 a 标签的内边距为 py-2 px-3，并应用新的 hover 效果类 -->
            <li><a href="/" class="nav-link">首页</a></li>
            <li><a href="about.html" class="nav-link">关于鸿宝</a></li>
            <li><a href="wf.html" class="nav-link">企业文化</a></li>
            <li><a href="news.html" class="nav-link">新闻动态</a></li>
            <li><a href="cases.html" class="nav-link">厂区展示</a></li>
            <li><a href="products.html" class="nav-link">产品展示</a></li>
            <li><a href="honor.html" class="nav-link">荣誉证书</a></li>
            <li><a href="contact.html" class="nav-link">联系我们</a></li>
            <li><a href="https://shop147983804.taobao.com/" class="nav-link" target="_blank">淘宝商城</a></li>
        </ul>
    </div>
</nav>

<style>
  /* 导航链接基础样式 */
  .nav-link {
    display: block;
    padding: 0.5rem 0.75rem; 
    color: white;
    font-weight: 500;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    
    text-shadow: 0 2px 2px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.5);
    
font-weight: bold;
  }


  /* 导航链接 Hover 效果 */
  .nav-link:hover {
    background-color: white;
    color: black; /* Hover 时文字变为黑色 */
    
    /* Hover 时移除文字阴影和盒子阴影 */
    text-shadow: none;
    box-shadow: none;
  }
</style>

  <!-- Banner轮播 -->
<style>
    /* 动画持续时间从8秒改为4秒（加快一倍） */
    @keyframes zoomOut {
        from { transform: scale(1.1); }
        to { transform: scale(1); }
    }

    .banner-slide.active img {
        animation: zoomOut 4s ease-in-out forwards; /* 关键调整：缩短动画时长 */
    }
</style>

<section class="relative h-[350px] md:h-[780px] overflow-hidden">
    <div id="banner-slider" class="h-full">
        <!-- 轮播项 1 -->
        <div class="banner-slide absolute inset-0 opacity-100 transition-opacity duration-1000">
            <img src="images/b02.jpg" alt="消防装备展示" class="w-full h-full object-cover">
            <div class="absolute inset-0  flex items-center">
                <div class="container mx-auto px-4 text-white">
                    <h2 class="text-3xl md:text-5xl font-bold mb-4 text-shadow-lg">专业消防装备制造商</h2>
                    <p class="text-lg md:text-xl max-w-2xl text-shadow">40年专注消防器材研发与生产，为安全保驾护航</p>
                </div>
            </div>
        </div>
        <!-- 轮播项 2 -->
        <div class="banner-slide absolute inset-0 opacity-0 transition-opacity duration-1000">
            <img src="images/b1.jpg" alt="消防员装备" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center">
                <div class="container mx-auto px-4 text-white">
                    <h2 class="text-3xl md:text-5xl font-bold mb-4 text-shadow-lg">高新技术企业</h2>
                    <p class="text-lg md:text-xl max-w-2xl text-shadow">多项产品获得多项专利，通过ISO9001质量体系认证</p>
                </div>
            </div>
        </div>
        <!-- 轮播项 3 -->
        <div class="banner-slide absolute inset-0 opacity-0 transition-opacity duration-1000">
            <img src="images/b3.jpg" alt="消防演练" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center">
                <div class="container mx-auto px-4 text-white">
                    <h2 class="text-3xl md:text-5xl font-bold mb-4 text-shadow-lg">完善的售后服务</h2>
                    <p class="text-lg md:text-xl max-w-2xl text-shadow">专业技术团队提供定期回访、培训和定制服务</p>
                </div>
            </div>
        </div>
    </div>
	     <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
            <button class="banner-dot w-3 h-3 rounded-full bg-white bg-opacity-100 hover:bg-opacity-100 transition-all" data-index="0"></button>
            <button class="banner-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition-all" data-index="1"></button>
            <button class="banner-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-100 transition-all" data-index="2"></button>
        </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const slider = document.getElementById('banner-slider');
    const slides = slider.querySelectorAll('.banner-slide');
    slides[0].classList.add('active');

    let currentIndex = 0;
    // 轮播间隔从8秒改为5秒（加快切换速度）
    setInterval(() => {
        slides[currentIndex].classList.remove('active');
        slides[currentIndex].classList.remove('opacity-100');
        slides[currentIndex].classList.add('opacity-0');
        currentIndex = (currentIndex + 1) % slides.length;
        slides[currentIndex].classList.add('opacity-100');
        slides[currentIndex].classList.remove('opacity-0');
        
        setTimeout(() => {
            slides[currentIndex].classList.add('active');
        }, 100);

    }, 5000); // 关键调整：缩短轮播间隔
});
</script>


    <!-- 企业简介 -->
    <section class="py-16 md:py-24 from-white to-fire-red/5 relative overflow-hidden">
        <!-- 装饰元素 -->
        <div class="absolute top-0 left-0 w-40 h-40 bg-fire-orange/10 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
        <div class="absolute bottom-0 right-0 w-60 h-60 bg-fire-red/10 rounded-full translate-x-1/3 translate-y-1/3"></div>
        <div class="absolute top-1/2 left-1/4 w-20 h-20 bg-fire-yellow/10 rounded-full"></div>
        
        <div class="container mx-auto px-4 relative z-10">
            <!-- 标题区域 -->
            <div class="text-center mb-16 md:mb-20">
                <h2 class="text-3xl md:text-5xl font-bold text-fire-dark mb-4 relative inline-block">
                    <span class="relative z-10">关于鸿宝消防</span>
                    <!-- 标题下划线装饰 -->
                    <span class="absolute bottom-0 left-0 w-full h-3 bg-fire-orange/20 -z-10 transform-skew"></span>
                </h2>
                <p class="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
                    40余年匠心沉淀，铸就消防行业标杆企业
                </p>
                <!-- 装饰线 -->
                <div class="flex items-center justify-center mt-8">
                    <div class="w-20 h-1 bg-fire-orange"></div>
                    <div class="w-8 h-8 mx-4 rounded-full border-2 border-fire-orange flex items-center justify-center">
                        <i class="fa fa-shield text-fire-orange"></i>
                    </div>
                    <div class="w-20 h-1 bg-fire-orange"></div>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="flex flex-col lg:flex-row gap-8 md:gap-12 items-center">
                <!-- 图片区域 -->
                <div class="lg:w-1/2 relative group">
                    <div class="rounded-xl overflow-hidden shadow-2xl transform transition-all duration-500 group-hover:scale-[1.02]">
                        <!-- 主图 -->
                        <img src="images/gc.jpg" alt="公司厂区" class="w-full h-auto">
                        <!-- 图片覆盖层动画 -->
                        <div class="absolute inset-0 bg-gradient-to-t from-fire-red/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex items-end">
                            <p class="text-white text-lg font-medium p-6 text-shadow">现代化生产基地 · 智能化生产线</p>
                        </div>
                    </div>
                  
                </div>

                <!-- 文字内容区域 -->
                <div class="lg:w-1/2">
    <!-- 企业简介 -->
    <div class="mb-8">
        <!-- 新增标题区域 -->
        <div class="mb-6">
            <h2 class="text-4xl md:text-5xl font-extrabold text-fire-primary mb-2">SINCE 1983</h2>
            <h3 class="text-xl md:text-2xl font-bold text-gray-800 mb-3">泰州市鸿宝消防器材有限公司</h3>
            <div class="w-24 h-1 bg-fire-primary"></div>
        </div>
        
        <p class="text-lg md:text-xl mb-6 leading-relaxed text-gray-700">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;鸿宝公司创建于1983年，是集科研、生产和销售消防装备及抢险救援器材的专业生产商。公司是全国消防行业重点企业、江苏省高新技术企业、农行AAA级资信企业。
            企业技术力量雄厚，生产设备精良，制造工艺先进，检测设备齐全，已通过ISO9001质量体系认证，多项产品获得江苏省高新技术产品、国家级重点新产品证书和新型专利证书。<a href="about.html" class="inline-flex items-center text-fire-primary font-medium hover:text-fire-dark transition-colors">
            更多详情
            <i class="fa fa-arrow-right ml-2"></i>
        </a>
        </p>
        
        <!-- 新增更多链接 -->
        
    </div>

    <!-- 核心优势卡片 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
        <div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-fire-red flex items-start gap-3 transition-all duration-300 hover:shadow-lg">
            <i class="fa fa-check-circle text-fire-red text-xl mt-1"></i>
            <div>
                <h4 class="font-bold text-fire-dark mb-1">技术领先</h4>
                <p class="text-sm text-gray-600">56名专业技术人员，7名高级工程师</p>
            </div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-fire-orange flex items-start gap-3 transition-all duration-300 hover:shadow-lg">
            <i class="fa fa-check-circle text-fire-orange text-xl mt-1"></i>
            <div>
                <h4 class="font-bold text-fire-dark mb-1">质量保障</h4>
                <p class="text-sm text-gray-600">ISO9001认证，国家3C强制认证</p>
            </div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-fire-yellow flex items-start gap-3 transition-all duration-300 hover:shadow-lg">
            <i class="fa fa-check-circle text-fire-yellow text-xl mt-1"></i>
            <div>
                <h4 class="font-bold text-fire-dark mb-1">产品丰富</h4>
                <p class="text-sm text-gray-600">3大类40小类消防装备全覆盖</p>
            </div>
        </div>
        <div class="bg-white p-4 rounded-lg shadow-md border-l-4 border-fire-dark flex items-start gap-3 transition-all duration-300 hover:shadow-lg">
            <i class="fa fa-check-circle text-fire-dark text-xl mt-1"></i>
            <div>
                <h4 class="font-bold text-fire-dark mb-1">研发创新</h4>
                <p class="text-sm text-gray-600">与科研院所合作研发消防机器人</p>
            </div>
        </div>
    </div>
</div>

            </div>

            <!-- 企业理念横幅 -->
            <div class="mt-16 md:mt-24 rounded-2xl p-8 md:p-12 shadow-2xl relative overflow-hidden transform transition-all duration-700 opacity-0 translate-y-10" id="philosophy-section">
    <!-- 背景装饰 - 调整为更明亮的红色系渐变 -->
    <div class="absolute inset-0 bg-gradient-to-br from-red-900 via-red-800/90 to-orange-600/80"></div>
    
    <!-- 动态火焰装饰 - 增强可见度和动画效果 -->
    <div class="absolute top-0 left-10 text-orange-300/60 text-[180px] animate-pulse" style="filter: drop-shadow(0 0 15px rgba(255, 105, 0, 0.6)); animation-duration: 2.5s;">
        <i class="fa fa-fire"></i>
    </div>
    <div class="absolute bottom-0 right-10 text-red-400/70 text-[150px] animate-pulse" style="filter: drop-shadow(0 0 15px rgba(255, 69, 0, 0.7)); animation-duration: 3s; animation-delay: 0.5s;">
        <i class="fa fa-fire"></i>
    </div>
    
    <!-- 盾牌图形 -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white/5 text-[250px] transition-transform duration-1000">
        <i class="fa fa-shield"></i>
    </div>
    
    <!-- 内容区 -->
    <div class="relative z-10 text-center">
        <h3 class="text-3xl md:text-4xl font-bold text-white mb-6 tracking-wide relative inline-block">
            企业理念
            <span class="absolute -bottom-2 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-gradient-to-r from-transparent via-orange-300 to-transparent"></span>
        </h3>
        
        <p class="text-xl md:text-2xl text-white/90 font-medium max-w-3xl mx-auto leading-relaxed transition-all duration-500 hover:text-white">
            "以市场为导向，以科技为龙头，以创新为灵魂，打造国际强势消防品牌"
        </p>
        
        <!-- 装饰线条 -->
        <div class="mt-8 flex justify-center gap-2">
            <div class="h-px w-16 bg-gradient-to-r from-transparent to-orange-300"></div>
            <div class="h-px w-8 bg-orange-300"></div>
            <div class="h-px w-16 bg-gradient-to-l from-transparent to-orange-300"></div>
        </div>
    </div>
</div>

<script>
// 滚动动画效果
document.addEventListener('DOMContentLoaded', () => {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('opacity-100', 'translate-y-0');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });

    observer.observe(document.getElementById('philosophy-section'));
});
</script>
        </div>
    </section>

    <!-- 企业资质与认证 -->
    <section class="py-12  bg-light-gray">
        <div class="container mx-auto px-4">
            
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="bg-white p-4 rounded-lg shadow-md text-center card-hover">
                    <div class="w-20 h-20 bg-fire-red bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-certificate text-fire-red text-3xl"></i>
                    </div>
                    <h3 class="font-bold">ISO9001认证</h3>
                    <p class="text-sm text-gray-600 mt-2">质量体系认证</p>
                </div>
                
                <div class="bg-white p-4 rounded-lg shadow-md text-center card-hover">
                    <div class="w-20 h-20 bg-fire-red bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-trophy text-fire-red text-3xl"></i>
                    </div>
                    <h3 class="font-bold">高新技术企业</h3>
                    <p class="text-sm text-gray-600 mt-2">江苏省认证</p>
                </div>
                
                <div class="bg-white p-4 rounded-lg shadow-md text-center card-hover">
                    <div class="w-20 h-20 bg-fire-red bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-shield text-fire-red text-3xl"></i>
                    </div>
                    <h3 class="font-bold">3C认证</h3>
                    <p class="text-sm text-gray-600 mt-2">国家强制认证</p>
                </div>
                
                <div class="bg-white p-4 rounded-lg shadow-md text-center card-hover">
                    <div class="w-20 h-20 bg-fire-red bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fa fa-bank text-fire-red text-3xl"></i>
                    </div>
                    <h3 class="font-bold">AAA级资信</h3>
                    <p class="text-sm text-gray-600 mt-2">农行评定</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 视差效果区域 -->
    <section class="parallax py-20" style="background-image: url('images/ibg.jpg');">
        <div class="container mx-auto px-4 text-center">
            <div class="bg-black bg-opacity-60 inline-block p-8 rounded-lg">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">技术实力与创新</h2>
                <p class="text-xl text-lg max-w-3xl mx-auto text-fire-orange">公司拥有56名技术人员，其中高级工程师7名，工程师16名。正在与国内知名科研院所联合研发消防机器人、水下救援装备，技术性能已经取得关键性突破。</p>
            </div>
        </div>
    </section>

    <!-- 产品展示 -->
    <section class="py-12 bg-light-gray">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-10 text-fire-dark">主要产品</h2>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
				
				
			

			  
		 <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow group">
                    <div class="aspect-square overflow-hidden">
                       <a href="p-23.html"> <img src="/uploadfile/pic/202509/20259267355017.jpg" alt="灭火防护服" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"></a>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">灭火防护服</h3>

                        <a href="p-23.html" class="text-fire-primary hover:text-fire-dark mt-3 inline-block">查看详情 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>	
			
     
      
      
			

			  
		 <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow group">
                    <div class="aspect-square overflow-hidden">
                       <a href="p-24.html"> <img src="/uploadfile/pic/202509/20259267524317.jpg" alt="抢险救援头盔" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"></a>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">抢险救援头盔</h3>

                        <a href="p-24.html" class="text-fire-primary hover:text-fire-dark mt-3 inline-block">查看详情 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>	
			
     
      
      
			

			  
		 <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow group">
                    <div class="aspect-square overflow-hidden">
                       <a href="p-25.html"> <img src="/uploadfile/pic/202509/202592680117.jpg" alt="抢险救援靴" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"></a>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">抢险救援靴</h3>

                        <a href="p-25.html" class="text-fire-primary hover:text-fire-dark mt-3 inline-block">查看详情 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>	
			
     
      
      
			

			  
		 <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow group">
                    <div class="aspect-square overflow-hidden">
                       <a href="p-26.html"> <img src="/uploadfile/pic/202509/2025926864217.jpg" alt="专用17式24式统型款抢险救援服" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"></a>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">专用17式24式统型款抢险救援服</h3>

                        <a href="p-26.html" class="text-fire-primary hover:text-fire-dark mt-3 inline-block">查看详情 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>	
			
     
      
      
			

			  
		 <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow group">
                    <div class="aspect-square overflow-hidden">
                       <a href="p-27.html"> <img src="/uploadfile/pic/202509/20259287423291.jpg" alt="14款消防手套17款统型款手套耐磨耐高温防护专用厂家直供" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"></a>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">14款消防手套17款统型款手套耐磨耐高温防护专用厂家直供</h3>

                        <a href="p-27.html" class="text-fire-primary hover:text-fire-dark mt-3 inline-block">查看详情 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>	
			
     
      
      
			

			  
		 <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow group">
                    <div class="aspect-square overflow-hidden">
                       <a href="p-43.html"> <img src="/uploadfile/pic/202510/202510115501950.jpg" alt="捆绑式堵漏袋" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"></a>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">捆绑式堵漏袋</h3>

                        <a href="p-43.html" class="text-fire-primary hover:text-fire-dark mt-3 inline-block">查看详情 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>	
			
     
      
      
			

			  
		 <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow group">
                    <div class="aspect-square overflow-hidden">
                       <a href="p-28.html"> <img src="/uploadfile/pic/202509/20259287485291.jpg" alt="消防腰斧" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"></a>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">消防腰斧</h3>

                        <a href="p-28.html" class="text-fire-primary hover:text-fire-dark mt-3 inline-block">查看详情 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>	
			
     
      
      
			

			  
		 <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow group">
                    <div class="aspect-square overflow-hidden">
                       <a href="p-29.html"> <img src="/uploadfile/pic/202509/2025928842691.jpg" alt="防静电内衣" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"></a>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">防静电内衣</h3>

                        <a href="p-29.html" class="text-fire-primary hover:text-fire-dark mt-3 inline-block">查看详情 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>	
			
     
      
      
				
                
            </div>
            
            <div class="text-center mt-10">
                <a href="products.html" class="inline-block bg-fire-red hover:bg-fire-dark text-white font-bold py-3 px-8 rounded-lg hover:shadow-lg transition-all">
                    查看全部产品
                </a>
            </div>
        </div>
    </section>
<!-- 成功案例 -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold text-fire-dark mb-4 relative inline-block">
                    <span class="relative z-10">成功案例</span>
                    <span class="absolute bottom-0 left-0 w-full h-3 bg-fire-orange/20 -z-10 transform-skew"></span>
                </h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    多年来，我们的产品和服务赢得了众多客户的信赖与好评
                </p>
                <div class="flex items-center justify-center mt-8">
                    <div class="w-20 h-1 bg-fire-orange"></div>
                    <div class="w-8 h-8 mx-4 rounded-full border-2 border-fire-orange flex items-center justify-center">
                        <i class="fa fa-thumbs-up text-fire-orange"></i>
                    </div>
                    <div class="w-20 h-1 bg-fire-orange"></div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 案例1 -->
                <div class="bg-light-gray rounded-xl overflow-hidden shadow-lg card-hover">
                    <div class="h-56 overflow-hidden">
                        <img src="images/case1.jpg" alt="某市消防救援支队装备采购项目" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3 text-fire-dark">某市消防救援支队装备采购项目</h3>
                        <p class="text-gray-600 mb-4">为该市消防救援支队提供全套消防员个人防护装备，包括灭火防护服、防护靴、头盔等共计1200余套，保障了消防队员的安全作业。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500"><i class="fa fa-building-o mr-1"></i> 政府项目</span>
                            
                        </div>
                    </div>
                </div>

                <!-- 案例2 -->
                <div class="bg-light-gray rounded-xl overflow-hidden shadow-lg card-hover">
                    <div class="h-56 overflow-hidden">
                        <img src="images/case2.jpg" alt="大型石化企业消防设备更新工程" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3 text-fire-dark">大型石化企业消防设备更新工程</h3>
                        <p class="text-gray-600 mb-4">为国内某大型石化企业提供全套消防设备更新服务，包括特种消防服装、气体检测设备和应急救援装备，满足高危环境作业需求。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500"><i class="fa fa-industry mr-1"></i> 企业项目</span>
                            
                        </div>
                    </div>
                </div>

                <!-- 案例3 -->
                <div class="bg-light-gray rounded-xl overflow-hidden shadow-lg card-hover">
                    <div class="h-56 overflow-hidden">
                        <img src="images/case3.jpg" alt="全国消防救援队伍装备标准化建设" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-3 text-fire-dark">全国消防救援队伍装备标准化建设</h3>
                        <p class="text-gray-600 mb-4">参与国家消防救援队伍装备标准化建设项目，提供标准化消防装备3000余套，并协助进行装备使用培训。</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500"><i class="fa fa-globe mr-1"></i> 国家级项目</span>
                           
                        </div>
                    </div>
                </div>
            </div>

            
        </div>
    </section>


    <!-- 新闻动态 -->
    <section class="py-12">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
    <h2 class="text-3xl md:text-5xl font-bold text-fire-dark mb-4 relative inline-block">
        <span class="relative z-10">新闻动态</span>
        <span class="absolute bottom-0 left-0 w-full h-3 bg-fire-orange/20 -z-10 transform-skew"></span>
    </h2>
    <p class="text-lg text-gray-600 max-w-3xl mx-auto">
        了解公司最新发展、行业资讯与活动报道
    </p>
    <div class="flex items-center justify-center mt-8">
        <div class="w-20 h-1 bg-fire-orange"></div>
        <div class="w-8 h-8 mx-4 rounded-full border-2 border-fire-orange flex items-center justify-center">
            <i class="fa fa-newspaper-o text-fire-orange"></i>
        </div>
        <div class="w-20 h-1 bg-fire-orange"></div>
    </div>
</div>
			<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	
			
				<div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
                   <a href="n-22.html"> <img src="/uploadfile/pic/202509/202592917442061.jpg" alt="公司动态" class="w-full h-48 object-cover"></a>
                    <div class="p-5">
                        <div class="text-sm text-gray-500 mb-2"><i class="fa fa-calendar-o mr-1"></i> 2023-06-15</div>
                        <h3 class="font-bold text-lg mb-2">来宾市消防救援支队2024年度非集中采购范围内消防装备采购项目(重)中标公告</h3>
                        <p class="text-gray-600 text-sm mb-4">来宾市消防救援支队2024年度非集中采购范围内消防装备采购项目(重)中标公告...</p>
                        <a href="n-22.html" class="text-fire-red hover:text-fire-dark">阅读全文 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>
			
					
					
		 
			
				<div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
                   <a href="n-23.html"> <img src="/uploadfile/pic/202509/202592917553161.jpg" alt="公司动态" class="w-full h-48 object-cover"></a>
                    <div class="p-5">
                        <div class="text-sm text-gray-500 mb-2"><i class="fa fa-calendar-o mr-1"></i> 2023-06-15</div>
                        <h3 class="font-bold text-lg mb-2">湖南省消防救援总队2023年总队部门集中采购器材装备项目-基本防护类（包1）</h3>
                        <p class="text-gray-600 text-sm mb-4">湖南省消防救援总队2023年总队部门集中采购器材装备项目-基本防护类（包1）...</p>
                        <a href="n-23.html" class="text-fire-red hover:text-fire-dark">阅读全文 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>
			
					
					
		 
			
				<div class="bg-white rounded-lg shadow-md overflow-hidden card-hover">
                   <a href="n-21.html"> <img src="/uploadfile/pic/202509/202592916515761.jpg" alt="公司动态" class="w-full h-48 object-cover"></a>
                    <div class="p-5">
                        <div class="text-sm text-gray-500 mb-2"><i class="fa fa-calendar-o mr-1"></i> 2023-06-15</div>
                        <h3 class="font-bold text-lg mb-2">2025-2027年度中国石化消防防护器具及配件-包3消防服装、防护装备消防服装及防护装备</h3>
                        <p class="text-gray-600 text-sm mb-4">2025-2027年度中国石化消防防护器具及配件-包3消防服装、防护装备消防服装及防护装备...</p>
                        <a href="n-21.html" class="text-fire-red hover:text-fire-dark">阅读全文 <i class="fa fa-angle-right"></i></a>
                    </div>
                </div>
			
					
					
		 		
       
            </div>
            
            <div class="text-center mt-10">
                <a href="news.html" class="inline-block border-2 border-fire-red text-fire-red hover:bg-fire-red hover:text-white font-bold py-2 px-6 rounded-lg hover:shadow-lg transition-all">
                    查看更多新闻
                </a>
            </div>
        </div>
    </section>
 <!-- 售后服务 -->
    <section class="py-16 bg-white relative overflow-hidden  bg-light-gray">
        <!-- 装饰元素 -->
        <div class="absolute -top-20 -right-20 w-64 h-64 bg-fire-red/5 rounded-full"></div>
        <div class="absolute -bottom-32 -left-32 w-80 h-80 bg-fire-orange/5 rounded-full"></div>
        
        <div class="container mx-auto px-4 relative z-10">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-5xl font-bold text-fire-dark mb-4 relative inline-block">
                    <span class="relative z-10">售后服务</span>
                    <span class="absolute bottom-0 left-0 w-full h-3 bg-fire-orange/20 -z-10 transform-skew"></span>
                </h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
                    我们不仅提供优质产品，更提供全方位的售后服务保障
                </p>
                <div class="flex items-center justify-center mt-8">
                    <div class="w-20 h-1 bg-fire-orange"></div>
                    <div class="w-8 h-8 mx-4 rounded-full border-2 border-fire-orange flex items-center justify-center">
                        <i class="fa fa-headphones text-fire-orange"></i>
                    </div>
                    <div class="w-20 h-1 bg-fire-orange"></div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-16">
                <div>
                    <img src="images/service.jpg" alt="专业售后服务团队" class="w-full h-auto rounded-xl shadow-xl">
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-fire-dark mb-6 text-center">专业售后，全程保障</h3>
                    
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-fire-red/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-wrench text-fire-red text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-xl font-bold mb-2">设备安装与调试</h4>
                                <p class="text-gray-600">专业技术人员提供上门安装调试服务，确保设备正常运行，指导操作人员正确使用。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-fire-orange/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-refresh text-fire-orange text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-xl font-bold mb-2">定期维护保养</h4>
                                <p class="text-gray-600">根据客户需求提供定期设备维护保养服务，延长设备使用寿命，确保性能稳定。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 w-12 h-12 bg-fire-yellow/10 rounded-full flex items-center justify-center mr-4">
                                <i class="fa fa-graduation-cap text-fire-yellow text-xl"></i>
                            </div>
                            <div>
                                <h4 class="text-xl font-bold mb-2">操作技能培训</h4>
                                <p class="text-gray-600">为客户提供专业的设备操作和维护培训，提高操作人员技能水平和应急处理能力。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 服务承诺 -->
            <div class="bg-white rounded-2xl p-8 md:p-12 shadow-xl">
 

    <!-- 内容区域 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- 服务项 1 -->
        <div class="text-center p-6 rounded-xl group hover:bg-gradient-to-br from-fire-red/5 to-fire-orange/5 transition-all duration-300 hover:shadow-lg">
            <div class="w-16 h-16 bg-fire-red text-white rounded-full flex items-center justify-center mx-auto mb-5 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-fire-orange">
                <i class="fa fa-clock-o text-2xl"></i>
            </div>
            <h4 class="text-xl font-bold mb-3 text-fire-dark group-hover:text-fire-red transition-colors">7×24小时响应</h4>
            <p class="text-gray-600">全天候服务热线，随时响应客户需求，节假日无休</p>
        </div>

        <!-- 服务项 2 -->
        <div class="text-center p-6 rounded-xl group hover:bg-gradient-to-br from-fire-red/5 to-fire-orange/5 transition-all duration-300 hover:shadow-lg">
            <div class="w-16 h-16 bg-fire-red text-white rounded-full flex items-center justify-center mx-auto mb-5 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-fire-orange">
                <i class="fa fa-truck text-2xl"></i>
            </div>
            <h4 class="text-xl font-bold mb-3 text-fire-dark group-hover:text-fire-red transition-colors">快速到场服务</h4>
            <p class="text-gray-600">省内24小时，省外48小时到达现场，高效处理</p>
        </div>

        <!-- 服务项 3 -->
        <div class="text-center p-6 rounded-xl group hover:bg-gradient-to-br from-fire-red/5 to-fire-orange/5 transition-all duration-300 hover:shadow-lg">
            <div class="w-16 h-16 bg-fire-red text-white rounded-full flex items-center justify-center mx-auto mb-5 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-fire-orange">
                <i class="fa fa-life-ring text-2xl"></i>
            </div>
            <h4 class="text-xl font-bold mb-3 text-fire-dark group-hover:text-fire-red transition-colors">终身技术支持</h4>
            <p class="text-gray-600">提供产品全生命周期的技术支持服务与更新</p>
        </div>

        <!-- 服务项 4 -->
        <div class="text-center p-6 rounded-xl group hover:bg-gradient-to-br from-fire-red/5 to-fire-orange/5 transition-all duration-300 hover:shadow-lg">
            <div class="w-16 h-16 bg-fire-red text-white rounded-full flex items-center justify-center mx-auto mb-5 transform transition-all duration-300 group-hover:scale-110 group-hover:bg-fire-orange">
                <i class="fa fa-file-text-o text-2xl"></i>
            </div>
            <h4 class="text-xl font-bold mb-3 text-fire-dark group-hover:text-fire-red transition-colors">定期回访制度</h4>
            <p class="text-gray-600">建立客户档案，定期回访了解使用情况与需求</p>
        </div>
    </div>
</div>
        </div>
    </section>

    <!-- 联系信息 - 并排布局 -->
    <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-10 text-fire-dark">联系我们</h2>
            
            <div class="flex flex-col lg:flex-row">
                <!-- 左侧联系方式 -->
                <div class="w-full lg:w-1/2 p-4">
                    <div class="bg-light-gray h-full p-6 rounded-lg">
                        <h3 class="text-xl font-bold mb-6 text-fire-red">联系方式</h3>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-10 text-fire-red"><i class="fa fa-phone text-xl"></i></div>
                                <div class="ml-4">
                                    <p class="font-bold">电话</p>
                                  <p>0523-86134463</p>
                                  <p>0523-86137771 </p>
                                  <p>0523-86131739                                  </p>
                                  <p>0523-86131800</p>
                                    <p>翟主任：13625171717</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-10 text-fire-red"><i class="fa fa-fax text-xl"></i></div>
                              <div class="ml-4">
                                <p class="font-bold">财务</p>
                                  <p>0523-86135772</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-10 text-fire-red"><i class="fa fa-envelope text-xl"></i></div>
                                <div class="ml-4">
                                    <p class="font-bold">邮箱</p>
                                    <p>672523251@qq.com</p>
                                </div>
                            </div>
                            
							
							
                            <div class="flex items-start">
                                <div class="w-10 text-fire-red"><i class="fa fa-map-marker text-xl"></i></div>
                                <div class="ml-4">
                                    <p class="font-bold">地址</p>
                                    <p>江苏省泰州市姜堰区张甸镇工业园区</p>
                                </div>
                            </div>
							
							<div class="flex items-start">
                                <div class="w-10 text-fire-red">
  <i class="fa fa-globe text-xl"></i>
</div>
                                <div class="ml-4">
                                    <p class="font-bold">网址</p>
                                    <p><a href="https://www.hongbao119.com/">www.hongbao119.com</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧留言表单 -->
                <div class="w-full lg:w-1/2 p-4">
                    <div class="bg-light-gray h-full p-6 rounded-lg">
                        <h3 class="text-xl font-bold mb-6 text-fire-red">发送消息</h3>
                        
                        <form id="contactForm" action="sms.asp" method="POST">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
                  <input type="text" id="name" name="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:outline-none transition-all" placeholder="请输入您的姓名" required>
                </div>
                <div>
                  <label for="phone" class="block text-gray-700 font-medium mb-2">电话</label>
                  <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:outline-none transition-all" placeholder="请输入您的电话" required>
                </div>
                <div>
                  <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                  <input type="email" id="email" name="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:outline-none transition-all" placeholder="请输入您的邮箱" required>
                </div>
                <div>
                  <label for="subject" class="block text-gray-700 font-medium mb-2">主题</label>
                  <input type="text" id="subject" name="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:outline-none transition-all" placeholder="请输入咨询主题" required>
                </div>
              </div>
              <div class="mb-6">
                <label for="message" class="block text-gray-700 font-medium mb-2">留言内容</label>
                <textarea id="message" name="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 form-input focus:outline-none transition-all resize-none" placeholder="请输入您的留言内容" required></textarea>
              </div>
              <button type="submit" class=" px-8 py-4 bg-primary hover:bg-primary/90 text-white font-medium rounded-md transition-all transform hover:scale-[1.02] shadow-lg">
                提交留言
              </button>
            </form>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- 页脚 -->
    <footer class="bg-dark-gray text-white py-10">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
            <!-- 第一栏：LOGO图片（移动版居中放大） -->
            <div class="flex items-center justify-center md:justify-start">
                <div class="w-full md:w-auto">
                    <!-- LOGO图片：建议替换为实际LOGO路径，设置max-width确保响应式 -->
                  <img src="images/logo2.png" alt="泰州市鸿宝消防器材有限公司LOGO" 
                         class="w-48 md:w-40 lg:w-48 mx-auto md:mx-0 object-contain" />
                    <!-- 可选：LOGO下方添加简短品牌说明 -->
                    <p class="text-gray-300 text-sm text-center md:text-left mt-2">
                        始于1983 · 专业消防装备生产商
                    </p>
                </div>
            </div>
            
            <!-- 第二栏：快速链接（保持不变） -->
            <div>
                <h4 class="text-lg font-bold mb-4">快速链接</h4>
                <ul class="space-y-2 text-gray-300 text-sm">
                    <li><a href="about.html" class="hover:text-fire-yellow transition-colors">关于鸿宝</a></li>
                    <li><a href="products.html" class="hover:text-fire-yellow transition-colors">产品展示</a></li>
                    <li><a href="news.html" class="hover:text-fire-yellow transition-colors">新闻动态</a></li>
                    <li><a href="cases.html" class="hover:text-fire-yellow transition-colors">厂区展示</a></li>
                    <li><a href="honor.html" class="hover:text-fire-yellow transition-colors">荣誉证书</a></li>
                    <li><a href="contact.html" class="hover:text-fire-yellow transition-colors">联系我们</a></li>
                </ul>
            </div>
            
            <!-- 第三栏：产品中心（保持不变） -->
            <div>
                <h4 class="text-lg font-bold mb-4">产品中心</h4>
                <ul class="space-y-2 text-gray-300 text-sm">
					<li><a href="products-19.html" class="hover:text-fire-yellow transition-colors">重点推荐</a></li>
              <li><a href="products-20.html" class="hover:text-fire-yellow transition-colors">个人防护器材</a></li>
              <li><a href="products-14.html" class="hover:text-fire-yellow transition-colors">堵漏器材</a></li>
              <li><a href="products-15.html" class="hover:text-fire-yellow transition-colors">救生器材</a></li>
              <li><a href="products-12.html" class="hover:text-fire-yellow transition-colors">移动照明器材</a></li>
              
					
					
       
                </ul>
            </div>
            
            <!-- 第四栏：关注我们+二维码图片 -->
            <!-- 移除了 md:items-start -->
<div class="flex flex-col items-center">
    <div class="bg-white p-1 rounded-md shadow-md">
		
      <img src="images/gzh.jpg" alt="官方微信二维码" class="w-32 h-32 object-contain" />
    </div>
    <p class="text-gray-300 text-sm mt-2 text-center">关注公众号</p>
</div>
        </div>
        
        <!-- 版权信息（保持不变） -->
        <div class="border-t border-gray-700 pt-6 text-center text-gray-400 text-sm">
            <p>© 2025 泰州市鸿宝消防器材有限公司 版权所有  <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow" rel="nofollow">苏ICP备14046775号-1</a></p>
        </div>
    </div>
</footer>
<script>
// 统一管理导航栏背景状态的函数
function updateNavBackground(menuVisible) {
    const nav = document.getElementById('main-nav');
    const isMobile = window.innerWidth < 1024;
    
    // 移动端特殊处理：只要菜单关闭，无论滚动位置都保持透明
    if (isMobile) {
        if (menuVisible) {
            // 移动端菜单打开时显示红色背景
            nav.classList.add('bg-fire-red');
            nav.classList.remove('bg-transparent');
        } else {
            // 移动端菜单关闭时，始终保持透明
            nav.classList.remove('bg-fire-red');
            nav.classList.add('bg-transparent');
        }
    } else {
        // 桌面端保持原有逻辑：滚动超过50px显示红色背景
        if (window.scrollY > 50) {
            nav.classList.add('bg-fire-red');
            nav.classList.remove('bg-transparent');
        } else {
            nav.classList.remove('bg-fire-red');
            nav.classList.add('bg-transparent');
        }
    }
}

// 移动端菜单切换
document.getElementById('menu-toggle').addEventListener('click', function() {
    const menu = document.getElementById('main-menu');
    const wasHidden = menu.classList.contains('hidden');
    menu.classList.toggle('hidden');
    updateNavBackground(wasHidden);
});

// 点击菜单项后在移动设备上关闭菜单
document.querySelectorAll('#main-menu a').forEach(link => {
    link.addEventListener('click', function() {
        if (window.innerWidth < 1024) {
            const menu = document.getElementById('main-menu');
            menu.classList.add('hidden');
            updateNavBackground(false);
        }
    });
});

// 滚动时更新背景状态
window.addEventListener('scroll', function() {
    const menu = document.getElementById('main-menu');
    const menuVisible = !menu.classList.contains('hidden');
    updateNavBackground(menuVisible);
});


    
    // 其他原有脚本保持不变...
    // Banner轮播
    let currentSlide = 0;
    const slides = document.querySelectorAll('.banner-slide');
    const dots = document.querySelectorAll('.banner-dot');
    
    function showSlide(index) {
        // 隐藏所有幻灯片
        slides.forEach(slide => {
            slide.classList.add('opacity-0');
            slide.classList.remove('opacity-100');
        });
        
        // 重置所有指示器
        dots.forEach(dot => {
            dot.classList.remove('bg-opacity-100');
            dot.classList.add('bg-opacity-50');
        });
        
        // 显示当前幻灯片和激活当前指示器
        slides[index].classList.remove('opacity-0');
        slides[index].classList.add('opacity-100');
        dots[index].classList.remove('bg-opacity-50');
        dots[index].classList.add('bg-opacity-100');
        
        currentSlide = index;
    }
    
    // 自动轮播
    function nextSlide() {
        let newIndex = currentSlide + 1;
        if (newIndex >= slides.length) {
            newIndex = 0;
        }
        showSlide(newIndex);
    }
    
    // 设置自动轮播
    let slideInterval = setInterval(nextSlide, 5000);
    
    // 点击指示器切换幻灯片
    dots.forEach(dot => {
        dot.addEventListener('click', function() {
            // 清除自动轮播计时器
            clearInterval(slideInterval);
            // 显示对应的幻灯片
            showSlide(parseInt(this.dataset.index));
            // 重新设置自动轮播
            slideInterval = setInterval(nextSlide, 5000);
        });
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // 窗口大小变化时处理菜单显示
    window.addEventListener('resize', function() {
        const menu = document.getElementById('main-menu');
        if (window.innerWidth >= 1024) {
            // 在桌面视图下始终显示菜单
            menu.classList.remove('hidden');
        } else {
            // 在移动视图下默认隐藏菜单
            menu.classList.add('hidden');
        }
    });
</script>
</body>
</html>