/* ========== 南通中正智能化系统有限公司 专用样式 ========== */

/* 基础重置 */
*, html, body { scroll-behavior: smooth; }
* { margin:0; padding:0; box-sizing:border-box; }
a:link, a:visited, a:hover, a:active { text-decoration:none; cursor:pointer; color:#fff; }
a:hover, a:active { color:#fff; }
body { font:14px "Microsoft Yahei","Thmano", "Arial"; color:#fff; background:#fff; line-height:1.6; color:#333; }
img { border:0; max-width:100%; }
li { list-style:none; }

/* Header - 头部导航 */
.header { position:fixed; top:0; left:0; width:100%; z-index:1000; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.1); }
.header-inner { max-width:1200px; margin:0 auto; padding:15px 20px; display:flex; justify-content:space-between; align-items:center; }
.logo img { width:500px; height:85px; }

/* 电话区域 */
.header-contact { display:flex; align-items:center; gap:10px; }
.header-contact i { font-style:normal; font-size:24px; color:#666; }
.header-tel { text-align:right; }
.header-tel .label { font-size:14px; color:#666; }
.header-tel span { color:#d90000; font-weight:bold; font-size:24px; }

/* 导航菜单 */
.nav { background:#323e5d; }
.nav ul { max-width:1200px; margin:0 auto; display:flex; justify-content:center; flex-wrap:wrap; }
.nav li { position:relative; }
.nav li>a { display:block; padding:0 25px; height:56px; line-height:56px; color:#fff; font-size:16px; text-align:center; }
.nav li:hover>a, .nav li.cur>a { background:#da0c0c; }
.nav dl { display:none; position:absolute; top:56px; left:0; width:100%; background:#fe0100; z-index:10; }
.nav dd a { display:block; height:40px; line-height:40px; text-align:center; color:#fff; }
.nav dd a:hover { background:#cf120a; }
.nav li:hover dl { display:block; }

/* 移动端菜单按钮 */
.mobile-menu-btn { display:none; width:40px; height:40px; background:none; border:none; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; }
.mobile-menu-btn span { display:block; width:28px; height:3px; background:#333; transition:0.3s; }
.mobile-menu-btn.active span:nth-child(1) { transform:rotate(45deg) translate(6px, 6px); }
.mobile-menu-btn.active span:nth-child(2) { opacity:0; }
.mobile-menu-btn.active span:nth-child(3) { transform:rotate(-45deg) translate(6px, -6px); }

/* Banner 轮播图 */
.banner { width:100%; height:500px; overflow:hidden; position:relative; background:#222c50; }
.banner ul { display:flex; height:100%; }
.banner li { width:100%; height:500px; flex-shrink:0; }
.banner li img { width:100%; height:100%; object-fit:cover; display:block; }
.banner .dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
.banner .dots span { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; }
.banner .dots span.active { background:#fff; }
.banner-arrow { position:absolute; top:50%; transform:translateY(-50%); width:50px; height:80px; background:rgba(0,0,0,0.3); color:#fff; font-size:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10; }
.banner-arrow:hover { background:rgba(0,0,0,0.5); }
.banner-arrow.prev { left:0; }
.banner-arrow.next { right:0; }

/* Section 板块 */
.section { padding:60px 20px; scroll-margin-top:156px; }
.section-white { background:#fff; }
.section-gray { background:#f5f5f5; }
.section-title { text-align:center; margin-bottom:40px; }
.section-title h2 { font-size:32px; color:#da0c0c; margin-bottom:10px; }
.section-title h3 { font-size:20px; color:#222c50; font-weight:normal; text-transform:uppercase; }

/* Products 产品展示 */
.products-section { max-width:1200px; margin:0 auto; }
.category-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:30px; max-width:900px; margin-left:auto; margin-right:auto; }
.category-tabs button { padding:10px 20px; border:2px solid #323e5d; background:#fff; color:#323e5d; font-size:14px; cursor:pointer; transition:0.3s; border-radius:3px; flex:0 0 calc(20% - 10px); max-width:calc(20% - 10px); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.category-tabs button:hover, .category-tabs button.active { background:#323e5d; color:#fff; }
.products-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; }
.product-item { background:#fff; border-radius:5px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.1); transition:0.3s; cursor:pointer; }
.product-item:hover { transform:translateY(-5px); box-shadow:0 5px 20px rgba(0,0,0,0.2); }
.product-item .img { width:100%; height:200px; overflow:hidden; position:relative; }
.product-item .img img { width:100%; height:100%; object-fit:cover; transition:0.3s; }
.product-item:hover .img img { transform:scale(1.1); }
.product-item .info { padding:15px; text-align:center; }
.product-item .info h4 { font-size:16px; color:#333; margin-bottom:5px; }
.product-item .info span { font-size:14px; color:#666; }

/* 查看更多按钮 */
.products-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:15px; }
.view-more-btn {
    grid-column:1 / -1;
    display:block;
    width:100%;
    max-width:300px;
    margin:30px auto 0;
    padding:14px 40px;
    background:#da0c0c;
    color:#fff;
    text-align:center;
    font-size:16px;
    border-radius:5px;
    transition:all 0.3s;
    text-decoration:none;
}
.view-more-btn:hover {
    background:#c00;
    transform:translateY(-3px);
    box-shadow:0 5px 15px rgba(218,12,12,0.4);
}

/* About Section 公司简介 */
.about-section { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:40px; align-items:center; }
.about-img { flex:1; min-width:300px; }
.about-img img { width:100%; border-radius:10px; box-shadow:0 5px 20px rgba(0,0,0,0.2); }
.about-content { flex:1; min-width:300px; }
.about-content h2 { font-size:32px; color:#da0c0c; margin-bottom:20px; }
.about-content p { font-size:16px; color:#666; line-height:1.8; margin-bottom:15px; }
.about-content .more { display:inline-block; padding:12px 30px; background:#da0c0c; color:#fff; border-radius:5px; margin-top:15px; transition:0.3s; }
.about-content .more:hover { background:#c00; }

/* Case Carousel 案例轮播 */
.about-carousel { flex:1; min-width:300px; max-width:500px; }
.case-carousel { width:100%; height:300px; position:relative; overflow:hidden; border-radius:10px; background:#222c50; }
.case-track { display:flex; height:100%; transition:margin-left 0.5s ease; }
.case-track img { width:500px; height:300px; max-width:none; object-fit:cover; flex-shrink:0; cursor:pointer; }
.case-dots { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.case-dots span { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer; display:inline-block; z-index:11; position:relative; }
.case-dots span.active { background:#fff; }
.case-arrow { position:absolute; top:50%; transform:translateY(-50%); width:35px; height:50px; background:rgba(0,0,0,0.4); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; outline:none; z-index:20; }
.case-arrow:hover { background:rgba(0,0,0,0.5); }
.case-arrow.prev { left:0; border-radius:0 5px 5px 0; }
.case-arrow.next { right:0; border-radius:5px 0 0 5px; }

/* Footer 页脚 */
.footer { background:#323e5d; color:#fff; padding:40px 20px 20px; }
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-slogan { text-align:center; padding:35px 20px 25px; }
.slogan-text { font-size:18px; color:#fff; margin-bottom:12px; letter-spacing:2px; line-height:1.6; }
.slogan-sub { font-size:14px; color:rgba(255,255,255,0.7); letter-spacing:1px; }
.footer-bottom { text-align:center; padding-top:20px; font-size:14px; color:rgba(255,255,255,0.6); }
.footer-bottom a { color:rgba(255,255,255,0.6); }
.footer-bottom a:hover { color:#fff; }

/* Back to Top 返回顶部 */
.back-to-top { position:fixed; bottom:30px; right:30px; width:50px; height:50px; background:#da0c0c; color:#fff; font-size:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:50%; opacity:0; visibility:hidden; transition:0.3s; z-index:999; }
.back-to-top.show { opacity:1; visibility:visible; }
.back-to-top:hover { background:#c00; transform:translateY(-5px); }

/* Lightbox 大图弹窗 */
.lightbox { display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); align-items:center; justify-content:center; }
.lightbox.show { display:flex; }
.lightbox img { max-width:90%; max-height:90vh; object-fit:contain; }
.lightbox-close { position:absolute; top:20px; right:30px; color:#fff; font-size:40px; cursor:pointer; }
.lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:50px; cursor:pointer; padding:20px; }
.lightbox-nav:hover { color:#ccc; }
.lightbox-nav.prev { left:20px; }
.lightbox-nav.next { right:20px; }
.lightbox-info { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); color:#fff; }

/* ========== 响应式设计 ========== */

@media (max-width:768px) {
    .logo img { width:280px; height:auto; }
    .header-tel span { font-size:20px; }
    
    .mobile-menu-btn { display:flex; }
    .nav ul { display:none; flex-direction:column; position:absolute; top:100%; left:0; width:100%; background:#323e5d; }
    .nav ul.show { display:flex; }
    .nav li { border-bottom:1px solid #444; }
    .nav li>a { height:50px; line-height:50px; text-align:left; padding-left:20px; }
    .nav dl { position:static; background:#cf120a; }
    .nav dd a { text-align:left; padding-left:40px; }
    
    .banner-arrow { width:35px; height:60px; font-size:20px; }
    
    .section { padding:40px 15px; }
    .section-title h2 { font-size:26px; }
    .section-title h3 { font-size:16px; }
    
    .products-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
    .category-tabs button { flex:0 0 calc(33.333% - 7px); max-width:calc(33.333% - 7px); padding:8px 10px; font-size:12px; }
    
    .about-section { flex-direction:column; }
    .about-content h2 { font-size:26px; }
    .about-content p { font-size:14px; }
    
    .about-carousel { max-width:100%; }
    .case-carousel { height:250px; }
    
    .back-to-top { bottom:20px; right:15px; width:45px; height:45px; font-size:20px; }
    
    .slogan-text { font-size:16px; letter-spacing:1px; }
    .slogan-sub { font-size:13px; }
    .footer-slogan { padding:25px 15px 20px; }
}

@media (max-width:480px) {
    .header-inner { padding:10px 15px; }
    .logo img { width:200px; height:auto; }
    .products-grid { grid-template-columns:1fr; }
}

@media (max-width:400px) {
    .header-inner { padding:10px 15px; }
    .logo img { width:180px; height:auto; }
    .category-tabs button { flex:0 0 calc(50% - 7px); max-width:calc(50% - 7px); }
}

/* ========== products.html 产品展示页面样式 ========== */

/* 产品页面主体 */
.products-page {
    padding:40px 20px;
    min-height:calc(100vh - 400px);
}

/* 页面标题 */
.page-title {
    text-align:center;
    margin-bottom:50px;
}
.page-title h2 {
    font-size:36px;
    color:#da0c0c;
    margin-bottom:10px;
}
.page-title p {
    font-size:18px;
    color:#999;
    letter-spacing:3px;
    text-transform:uppercase;
}

/* 产品容器布局 */
.products-container {
    max-width:1400px;
    margin:0 auto;
    display:flex;
    gap:30px;
    align-items:flex-start;
}

/* 左侧分类栏 */
.category-sidebar {
    width:250px;
    flex-shrink:0;
    background:#fff;
    border-radius:10px;
    box-shadow:0 2px 15px rgba(0,0,0,0.1);
    padding:25px 20px;
    position:sticky;
    top:170px;
}
.category-sidebar h3 {
    font-size:22px;
    color:#222c50;
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:2px solid #da0c0c;
}
.category-sidebar ul {
    list-style:none;
}
.category-sidebar li {
    margin-bottom:8px;
}
.category-sidebar li a,
.category-sidebar li span {
    display:block;
    padding:12px 18px;
    background:#f5f5f5;
    color:#333;
    font-size:15px;
    border-radius:5px;
    cursor:pointer;
    transition:all 0.3s;
    border-left:3px solid transparent;
}
.category-sidebar li a:hover,
.category-sidebar li span:hover,
.category-sidebar li.active a,
.category-sidebar li.active span {
    background:#da0c0c;
    color:#fff;
    border-left-color:#b00a0a;
    transform:translateX(5px);
}

/* 右侧产品区域 */
.products-main {
    flex:1;
    min-width:0;
}

/* 当前分类信息 */
.current-category {
    background:#fff;
    padding:25px 30px;
    border-radius:10px;
    box-shadow:0 2px 15px rgba(0,0,0,0.1);
    margin-bottom:30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.current-category h3 {
    font-size:24px;
    color:#222c50;
    margin:0;
}
.current-category p {
    font-size:14px;
    color:#666;
    margin:0;
}

/* 产品网格（产品页专用） */
.products-page .products-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    margin-bottom:30px;
}

/* 产品项（产品页专用） */
.products-page .product-item {
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 15px rgba(0,0,0,0.1);
    transition:all 0.3s;
    cursor:pointer;
}
.products-page .product-item:hover {
    transform:translateY(-8px);
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
}
.products-page .product-item .img {
    height:220px;
    overflow:hidden;
    background:#f5f5f5;
    position:relative;
}
.products-page .product-item .img img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.3s;
}
.products-page .product-item:hover .img img {
    transform:scale(1.08);
}
.products-page .product-item .info {
    padding:15px;
    text-align:center;
}
.products-page .product-item .info h4 {
    font-size:14px;
    color:#333;
    margin:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* 分页 */
.pagination {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    padding:30px 0;
}
.pagination button,
.pagination span {
    min-width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ddd;
    background:#fff;
    color:#333;
    font-size:14px;
    cursor:pointer;
    border-radius:5px;
    transition:all 0.3s;
    padding:0 12px;
}
.pagination button:hover:not(:disabled) {
    background:#da0c0c;
    color:#fff;
    border-color:#da0c0c;
}
.pagination button:disabled {
    opacity:0.4;
    cursor:not-allowed;
}
.pagination .active {
    background:#da0c0c;
    color:#fff;
    border-color:#da0c0c;
    font-weight:bold;
}
.pagination .page-info {
    border:none;
    background:none;
    color:#666;
    cursor:default;
    padding:0 15px;
}

/* 空状态 */
.empty-state {
    text-align:center;
    padding:80px 20px;
    color:#999;
}
.empty-state i {
    font-size:80px;
    display:block;
    margin-bottom:20px;
}
.empty-state h3 {
    font-size:24px;
    color:#666;
    margin-bottom:10px;
}
.empty-state p {
    font-size:16px;
}

/* ========== 产品页面响应式设计 ========== */

@media (max-width:1200px) {
    .products-page .products-grid {
        grid-template-columns:repeat(3, 1fr);
        gap:15px;
    }
}

@media (max-width:992px) {
    .products-container {
        flex-direction:column;
    }

    .category-sidebar {
        width:100%;
        position:static;
        margin-bottom:30px;
    }

    .category-sidebar ul {
        display:flex;
        flex-wrap:wrap;
        gap:10px;
    }

    .category-sidebar li {
        margin-bottom:0;
        flex:0 0 calc(33.333% - 7px);
        max-width:calc(33.333% - 7px);
    }

    .products-page .products-grid {
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width:768px) {
    .page-title h2 {
        font-size:28px;
    }

    .page-title p {
        font-size:14px;
    }

    .current-category {
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        padding:20px;
    }

    .current-category h3 {
        font-size:20px;
    }

    .products-page .products-grid {
        grid-template-columns:repeat(2, 1fr);
        gap:12px;
    }

    .products-page .product-item .img {
        height:180px;
    }

    .category-sidebar li {
        flex:0 0 calc(50% - 5px);
        max-width:calc(50% - 5px);
    }

    .pagination button,
    .pagination span {
        min-width:35px;
        height:35px;
        font-size:13px;
    }
}

@media (max-width:480px) {
    .products-page {
        padding:30px 15px;
    }

    .category-sidebar li {
        flex:0 0 100%;
        max-width:100%;
    }

    .products-page .products-grid {
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
    }

    .products-page .product-item .img {
        height:150px;
    }

    .products-page .product-item .info {
        padding:10px;
    }

    .products-page .product-item .info h4 {
        font-size:13px;
    }
}