/* ================= 1. 内页 Banner 与 面包屑 ================= */
.inner-banner { width: 100%; height: 350px; background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; }
.inner-nav-bar { background-color: #fff; border-bottom: 1px solid #eaeaea; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.nav-bar-flex { display: flex; justify-content: space-between; align-items: center; height: 60px; }
.sub-nav-list { display: flex; align-items: center; height: 100%; }
.sub-nav-item { font-size: 15px; color: var(--text-gray); position: relative; padding: 0 20px; height: 100%; display: flex; align-items: center; transition: color 0.3s; }
.sub-nav-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background-color: #ccc; }
.sub-nav-item:hover, .sub-nav-item.active { color: var(--primary-blue); font-weight: bold; }
.sub-nav-item.active::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 3px; background-color: var(--primary-blue); }
.breadcrumbs { font-size: 13px; color: #888; }
.breadcrumbs a { color: #888; transition: color 0.3s; }
.breadcrumbs a:hover { color: var(--primary-blue); }

/* ================= 2. 内页全局框架 ================= */
.page-wrapper { background-color: var(--bg-light); padding: 50px 0 80px 0; }
.inner-layout { display: flex; gap: 40px; align-items: flex-start; }
.sidebar-left { width: 260px; flex-shrink: 0; }
.sidebar-right { width: 320px; flex-shrink: 0; }
.main-content { flex: 1; min-width: 0; background: #fff; padding: 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }

/* 左侧边栏菜单 & 联系卡片 */
.sidebar-menu, .sidebar-contact { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.03); margin-bottom: 20px; }
.sidebar-menu h3, .sidebar-contact h3 { background: var(--primary-blue); color: #fff; font-size: 18px; padding: 15px 20px; font-weight: normal; }
.sidebar-menu ul { padding: 10px 0; }
.sidebar-menu li a { display: block; padding: 12px 20px; color: #444; border-bottom: 1px dashed #eee; transition: all 0.3s; }
.sidebar-menu li:last-child a { border-bottom: none; }
.sidebar-menu li.active a, .sidebar-menu li a:hover { color: var(--primary-blue); background: #f8fbfd; font-weight: bold; }
.s-contact-box { padding: 20px; font-size: 14px; color: #555; line-height: 2; }
.s-contact-box p { margin-bottom: 15px; }

/* ================= 3. 联系我们 & 在线留言/产品询价通用表单 ================= */
.contact-card, .message-card { background-color: #fff; padding: 60px 70px; margin-bottom: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }
.company-title { font-size: 28px; color: var(--primary-blue); font-weight: bold; margin-bottom: 45px; letter-spacing: 1px; }
.info-block { margin-bottom: 45px; }
.info-block h3 { font-size: 24px; color: #333; font-weight: bold; margin-bottom: 20px; }
.info-grid { display: grid; gap: 20px 30px; border-top: 1px dashed #e5e5e5; padding-top: 25px; }
.info-grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.info-grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.info-item { display: flex; align-items: center; font-size: 18px; color: #555; }
.info-item i { color: var(--primary-blue); font-size: 18px; margin-right: 12px; width: 20px; text-align: center; }
.map-container { margin-top: 10px; width: 100%; height: 350px; background-color: #f0f0f0; border: 1px solid #eaeaea; }

/* 表单核心样式 */
.message-header { margin-bottom: 40px; }
.message-header h2 { font-size: 26px; color: #222; font-weight: bold; margin-bottom: 12px; }
.message-header p { font-size: 14px; color: #777; }
.message-form .form-row { margin-bottom: 30px; }
.message-form .three-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.message-form .form-group input, .message-form .form-group textarea { width: 100%; background-color: #fff; border: 1px solid #dcdcdc; border-radius: 2px; padding: 0 15px; font-size: 14px; color: #333; transition: all 0.3s; outline: none; font-family: inherit; }
.message-form .form-group input::placeholder, .message-form .form-group textarea::placeholder { color: #888; }
.message-form .form-group input { height: 48px; }
.message-form .form-group textarea { height: 160px; padding: 15px; resize: none; }
.message-form .form-group input:focus, .message-form .form-group textarea:focus { border-color: var(--primary-blue); box-shadow: 0 0 5px rgba(0, 75, 151, 0.1); }
.code-group { display: flex; align-items: center; gap: 15px; }
.code-group input { width: 150px !important; }
.code-group img { height: 48px; width: auto; cursor: pointer; border: 1px solid #eee; object-fit: contain; }
.form-submit { text-align: center; margin-top: 50px; }
.btn-submit { background-color: var(--primary-blue); color: #fff; border: none; width: 160px; height: 46px; font-size: 16px; cursor: pointer; border-radius: 2px; transition: all 0.3s; }
.btn-submit:hover { background-color: #00366d; box-shadow: 0 5px 15px rgba(0, 75, 151, 0.2); }

/* ================= 4. 产品列表区 ================= */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pro-card { border: 1px solid #eaeaea; transition: all 0.3s; background: #fff; display: block; }
.pro-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.08); transform: translateY(-5px); border-color: transparent; }
.pro-img { height: 260px; padding: 20px; display: flex; align-items: center; justify-content: center; }
.pro-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pro-info { padding: 20px; text-align: center; border-top: 1px solid #f5f5f5; }
.pro-info h4 { font-size: 16px; color: #333; margin-bottom: 10px; }
.pro-info p { font-size: 13px; color: #888; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 15px; text-align: left; }
.pro-btn { color: var(--primary-blue); font-size: 14px; display: inline-block; }

/* ================= 5. 产品详情区 ================= */
.pro-detail-top { display: flex; gap: 40px; margin-bottom: 50px; }
.pro-dt-img { width: 40%; border: 1px solid #eee; padding: 20px; display: flex; align-items: center; justify-content: center; }
.pro-dt-img img { max-width: 100%; }
.pro-dt-info { width: 60%; }
.pro-dt-info h1 { font-size: 24px; color: #222; margin-bottom: 20px; border-bottom: 1px dashed #eee; padding-bottom: 15px; }
.pro-dt-desc { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 20px; }
.pro-dt-meta { background: #f9f9f9; padding: 15px; font-size: 14px; margin-bottom: 25px; }
.btn-group .btn { display: inline-block; background: var(--primary-blue); color: #fff; padding: 10px 25px; border-radius: 2px; margin-right: 15px; cursor: pointer; transition: 0.3s; }
.btn-group .btn:hover { opacity: 0.9; transform: translateY(-2px); }
.pro-tabs { margin-top: 40px; }
.pro-tab-nav { display: flex; border-bottom: 2px solid #eee; margin-bottom: 30px; }
.pro-tab-nav span { padding: 12px 30px; font-size: 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.pro-tab-nav span.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); font-weight: bold; background: var(--primary-blue); color: #fff; } /* 优化：加上背景更显眼 */
.pro-content-html table { width: 100% !important; border-collapse: collapse; margin: 20px 0; }
.pro-content-html th, .pro-content-html td { border: 1px solid #ddd; padding: 10px; text-align: center; font-size: 14px; }

/* ================= 6. 新闻与图文列表 ================= */
.news-list-wrapper { background: #fff; padding: 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); margin-top: 30px;}
.news-row { display: flex; align-items: center; padding: 25px; background: #f8f9fb; margin-bottom: 20px; transition: all 0.3s; border-radius: 4px; }
.news-row:hover { background: var(--primary-blue); transform: translateX(10px); }
.news-row:hover * { color: #fff !important; }
.n-img { width: 220px; height: 140px; flex-shrink: 0; margin-right: 30px; overflow: hidden; }
.n-img img { width: 100%; height: 100%; object-fit: cover; }
.n-txt { flex: 1; min-width: 0; padding-right: 30px; }
.n-txt h3 { font-size: 18px; color: #333; margin-bottom: 12px; }
.n-txt p { font-size: 14px; color: #777; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n-date { text-align: right; border-left: 1px solid #eaeaea; padding-left: 30px; min-width: 100px; }
.n-date strong { display: block; font-size: 36px; color: #ccc; font-weight: bold; line-height: 1; margin-bottom: 5px; }
.n-date span { font-size: 13px; color: #999; }
.pic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pic-card { background: #fff; border: 1px solid #eee; padding: 10px; text-align: center; }
.pic-card img { width: 100%; height: 200px; object-fit: cover; margin-bottom: 15px; }

/* ================= 7. 新闻详情页 ================= */
.news-detail-header { text-align: center; border-bottom: 1px dashed #eee; padding-bottom: 20px; margin-bottom: 30px; }
.news-detail-header h1 { font-size: 24px; color: #222; margin-bottom: 15px; }
.news-meta { font-size: 13px; color: #888; }
.font-size-ctrl span { cursor: pointer; margin: 0 5px; color: #666; }
.news-content-html { font-size: 16px; color: #444; line-height: 2; }
.news-content-html img { width: 100%; max-width: 800px; height: auto; display: block; margin: 20px auto; }
.page-turn { display: flex; justify-content: space-between; margin-top: 50px; font-size: 14px; border-top: 1px solid #eee; padding-top: 20px; }
.recommend-box { background: #fff; padding: 25px; border: 1px solid #eee; }
.recommend-box h3 { font-size: 18px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--primary-blue); }
.rec-item { display: flex; flex-direction: column; margin-bottom: 20px; }
.rec-item img { width: 100%; height: 140px; object-fit: cover; margin-bottom: 10px; }
.rec-item p { font-size: 14px; color: #333; line-height: 1.5; }
.font-size-ctrl span{cursor:pointer;margin:0 5px;color:#666;transition:all .3s ease;user-select:none;padding:2px 5px;border-radius:3px}
.font-size-ctrl span:hover{color:#fff;background-color:var(--primary-blue)}


/* ================= 8. 关于我们单页 ================= */
.about-intro { display: flex; gap: 40px; margin-bottom: 60px; }
.about-intro-txt { flex: 1; }
.about-intro-txt h2 { font-size: 28px; color: var(--primary-blue); margin-bottom: 20px; }
.about-stats { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 30px; border-top: 1px dashed #eee; }
.a-stat { text-align: center; }
.a-stat strong { font-size: 36px; color: var(--primary-blue); display: block; font-family: Impact, sans-serif; }
.timeline-section { background: #002c5c; color: #fff; padding: 60px 0; text-align: center; margin: 0 -50vw; position: relative; left: 50%; right: 50%; width: 100vw; }
.timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1200px; margin: 50px auto 0; position: relative; }
.timeline-grid::before { content: ''; position: absolute; top: 40px; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.2); }
.t-item { position: relative; z-index: 2; }
.t-item h3 { font-size: 28px; margin-bottom: 20px; background: #002c5c; display: inline-block; padding: 0 15px; }
.t-item p { font-size: 13px; color: rgba(255,255,255,0.7); text-align: left; }
.quality-section { padding: 60px 0; text-align: center; }
.q-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; text-align: left; }
.q-card { background: #f9f9f9; padding-bottom: 20px; }
.q-card img { width: 100%; height: 220px; object-fit: cover; }
.q-card h4 { padding: 20px 20px 10px; font-size: 18px; color: #222; }
.q-card p { padding: 0 20px; font-size: 13px; color: #666; }

/* ================= 9. 公共分页条 ================= */
.paging{text-align:center;margin-top:50px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px}
.paging a,.paging span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border:1px solid #ddd;border-radius:50%;color:#666;font-size:14px;transition:all .3s ease;padding:0 5px;background-color:#fff}
.paging .active,.paging .page-current,.paging .page-num-current,.paging a:hover{background-color:var(--primary-blue);color:#fff;border-color:var(--primary-blue);box-shadow:0 4px 10px rgba(0,75,151,.2)}
.paging .disabled{color:#ccc;border-color:#eee;background-color:#fafafa;cursor:not-allowed}

/* ================= 10. 通用单页 ================= */
.single-page-main{padding:50px 60px}
.single-page-header{text-align:center;border-bottom:1px dashed #e5e5e5;padding-bottom:25px;margin-bottom:40px}
.single-page-header h1{font-size:28px;color:var(--primary-blue);font-weight:700;letter-spacing:1px}
.single-page-header p{font-size:15px;color:#888;margin-top:10px}
.single-page-body{min-height:300px}

/* ================= 11. 图片列表 ================= */
.image-gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:10px}
.gallery-item{background-color:#fff;border:1px solid #eaeaea;border-radius:4px;overflow:hidden;display:block;transition:all .4s cubic-bezier(.25, .8, .25, 1)}
.gallery-item:hover{transform:translateY(-8px);box-shadow:0 15px 30px rgba(0,0,0,.08);border-color:transparent}
.gallery-img{position:relative;width:100%;height:220px;overflow:hidden;background-color:#f9f9f9}
.gallery-img img{width:100%;height:100%;object-fit:contain;transition:transform .6s ease}
.gallery-item:hover .gallery-img img{transform:scale(1.1)}
.gallery-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,75,151,.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s ease;z-index:2}
.gallery-overlay i{color:#fff;font-size:36px;transform:scale(.5);transition:transform .4s ease}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-item:hover .gallery-overlay i{transform:scale(1)}
.gallery-txt{padding:18px 15px;text-align:center;border-top:1px solid #f5f5f5}
.gallery-txt h4{font-size:16px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.gallery-item:hover .gallery-txt h4{color:var(--primary-blue)}

/* ================= 11. 图片详情 ================= */
.image-detail-header{text-align:center;border-bottom:2px solid #e5e5e5;padding-bottom:25px;margin-bottom:40px}
.image-detail-header h1{font-size:26px;color:#333;font-weight:400}
.gallery-container{width:100%;max-width:900px;margin:0 auto}
.gallery-top{height:650px;width:100%;background-color:#f9f9f9}
.gallery-top .swiper-slide{display:flex;justify-content:center;align-items:center;overflow:hidden}
.gallery-top img{width:100%;height:100%;object-fit:contain}
.gallery-top .swiper-button-next,.gallery-top .swiper-button-prev{color:rgba(0,0,0,.3);transition:all .3s}
.gallery-top .swiper-button-next:hover,.gallery-top .swiper-button-prev:hover{color:var(--primary-blue);transform:scale(1.1)}
.gallery-thumbs{height:120px;box-sizing:border-box;padding:15px 0 0 0}
.gallery-thumbs .swiper-slide{width:25%;height:100%;opacity:.4;cursor:pointer;transition:opacity .3s;overflow:hidden;background-color:#fff;border:1px solid #eee}
.gallery-thumbs .swiper-slide-thumb-active{opacity:1;border-color:var(--primary-blue)}
.gallery-thumbs img{width:100%;height:100%;object-fit:contain;padding:5px}

/* ================= 11. 响应式系统 ================= */
@media (max-width:1200px){
    .image-gallery-grid{grid-template-columns:repeat(3,1fr);gap:20px}
}

@media (max-width: 1024px) {
    .inner-layout { flex-direction: column; }
    .sidebar-left, .sidebar-right { width: 100%; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .pro-detail-top { flex-direction: column; }
    .pro-dt-img, .pro-dt-info { width: 100%; }
    .news-row { flex-direction: column; text-align: center; }
    .n-img { margin: 0 0 20px 0; width: 100%; height: auto; }
    .n-date { border-left: none; border-top: 1px solid #eee; margin-top: 15px; padding-top: 15px; padding-left: 0; text-align: center; }
    .pic-grid { grid-template-columns: repeat(2, 1fr); }
    .about-intro { flex-direction: column; }
    .timeline-grid, .q-grid { grid-template-columns: 1fr; }
    .contact-card, .message-card { padding: 40px 40px; }
    .message-form .three-cols { gap: 20px; }
    .info-grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 850px) {
    .inner-banner { height: 200px; }
    .nav-bar-flex { flex-direction: column; height: auto; align-items: flex-start; padding: 10px 0; gap: 10px; }
    .sub-nav-list { width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 5px; }
    .sub-nav-item { padding: 0 15px 0 0; }
    .sub-nav-item.active::before { width: calc(100% - 15px); left: 0; transform: none; }
    .info-grid.grid-2, .info-grid.grid-3 { grid-template-columns: 1fr; gap: 15px; }
    .message-form .three-cols { grid-template-columns: 1fr; gap: 20px; }
    .page-wrapper { padding: 30px 0 50px 0; }
    .contact-card, .message-card { padding: 30px 20px; }
    .company-title { font-size: 22px; margin-bottom: 25px; }
    .code-group { flex-direction: row; }
    .about-stats { flex-wrap: wrap; gap: 20px; }
    .a-stat { width: 45%; }
    .single-page-main{padding:30px 20px}
    .single-page-header{padding-bottom:20px;margin-bottom:25px}
    .single-page-header h1{font-size:24px}
    .image-gallery-grid{grid-template-columns:repeat(2,1fr)}
    .gallery-img{height:200px}
    .gallery-top{height:400px}
    .gallery-thumbs{height:90px}
    .image-detail-header h1{font-size:22px}
}
@media (max-width:600px){
    .image-gallery-grid{grid-template-columns:1fr}
    .gallery-img{height:240px}
    .image-detail-header h1{font-size:22px}
    .gallery-top{height:260px}
    .gallery-thumbs{height:70px;padding-top:10px}
}