@charset "utf-8";

/* ========== Variables ========== */
:root {
  --primary: #06F;
  --primary-hover: #0052CC;
  --primary-dark: #004AB3;
  --primary-light: #3388FF;
  --primary-bg: #E6F0FF;
  --primary-bg-light: #F0F6FF;
  --text: #222;
  --text-secondary: #555;
  --text-muted: #888;
  --text-white: #fff;
  --bg-white: #fff;
  --bg-gray: #f5f6f8;
  --border-color: #e8eaed;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-sm: 6px;
  --shadow: 0 2px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.1);
  --transition: .3s ease;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ========== Reset ========== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body { font-family:var(--font-family); font-size:14px; color:var(--text); line-height:1.7; background:var(--bg-white); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; vertical-align:middle; border:0; display:block; }
a { color:inherit; text-decoration:none; -webkit-touch-callout:none; }
ul,ol { list-style:none; }
input,textarea,button,select { font-family:inherit; font-size:16px; outline:none; border:none; background:none; -webkit-appearance:none; }
textarea { resize:vertical; }
em,i { font-style:normal; }
table { border-collapse:collapse; border-spacing:0; }

/* ========== Container ========== */
.container { padding:0 15px; }

/* ========== Header ========== */
.m-header { position:fixed; top:0; left:0; right:0; z-index:999; background:var(--bg-white); box-shadow:0 1px 0 var(--border-color), 0 2px 8px rgba(0,0,0,.04); }
.m-header .header-inner { display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 15px; }
.m-header .logo { flex:1; min-width:0; }
.m-header .logo img { height:36px; width:auto; }
.m-header .menu-btn { width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
.m-header .menu-btn svg { width:30px; height:30px; fill:var(--text); }

/* ========== Nav Overlay ========== */
.nav-overlay { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:opacity var(--transition), visibility var(--transition); }
.nav-overlay.active { opacity:1; visibility:visible; }
.nav-panel { position:fixed; top:0; right:-280px; bottom:0; width:280px; z-index:1001; background:#fff; transition:right var(--transition); overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:-4px 0 16px rgba(0,0,0,.15); }
.nav-panel.active { right:0; }
.nav-panel .nav-close { position:absolute; top:10px; right:12px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--text-muted); z-index:2; }
.nav-panel .nav-logo { padding:20px; text-align:center; border-bottom:1px solid var(--border-color); }
.nav-panel .nav-logo img { height:32px; }
.nav-panel ul { padding:8px 0; }
.nav-panel ul li { border-bottom:1px solid var(--border-color); }
.nav-panel ul li > a, .nav-panel ul li > .nav-parent { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; font-size:15px; font-weight:500; color:var(--text); }
.nav-panel ul li .nav-sub { display:none; background:var(--bg-gray); padding:0 0 8px; }
.nav-panel ul li .nav-sub.open { display:block; }
.nav-panel ul li .nav-sub a { display:block; padding:8px 32px; font-size:13px; color:var(--text-secondary); }

/* ========== Page Banner ========== */
.m-banner { margin-top:52px; }
.m-banner .swiper-slide { position:relative; }
.m-banner .swiper-slide img { width:100%; aspect-ratio:2/1; object-fit:cover; }
.m-banner .swiper-dots { display:flex; justify-content:center; gap:6px; padding:10px 0; }
.m-banner .swiper-dots span { width:8px; height:8px; border-radius:50%; background:#ccc; transition:all var(--transition); }
.m-banner .swiper-dots span.cur { width:20px; border-radius:4px; background:var(--primary); }

/* ========== Section Title ========== */
.m-sec-title { text-align:center; padding:32px 15px 24px; }
.m-sec-title h2 { font-size:20px; font-weight:700; color:var(--text); margin-bottom:6px; }
.m-sec-title p { font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:2px; }
.m-sec-title .line { display:inline-block; width:36px; height:3px; background:var(--primary); border-radius:2px; margin-top:8px; }

/* ========== Features ========== */
.m-features { padding:10px 15px 24px; }
.m-features ul { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.m-features li { background:var(--bg-white); border-radius:var(--radius); padding:18px 14px; text-align:center; box-shadow:var(--shadow); }
.m-features li .icon { width:40px; height:40px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; background:var(--primary-bg); border-radius:50%; }
.m-features li .icon svg { width:20px; height:20px; fill:var(--primary); }
.m-features li h3 { font-size:15px; font-weight:600; margin-bottom:4px; }
.m-features li p { font-size:13px; color:var(--text-muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ========== Product Grid ========== */
.m-pro { padding:0 15px 28px; }
.m-pro-tabs { display:flex; flex-wrap:wrap; gap:6px; padding:0 15px 16px; }
.m-pro-tabs a { display:inline-block; padding:6px 14px; font-size:12px; color:var(--text-secondary); background:#fff; border-radius:20px; box-shadow:var(--shadow); white-space:nowrap; transition:all var(--transition); }
.m-pro-tabs a:hover, .m-pro-tabs a.cur { background:var(--primary); color:#fff; }

.m-pro-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.m-pro-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:all var(--transition); }
.m-pro-card:active { transform:scale(.97); }
.m-pro-card .pic { overflow:hidden; }
.m-pro-card .pic img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.m-pro-card .info { padding:10px 12px 12px; }
.m-pro-card .info h3 { font-size:13px; font-weight:500; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center;}

/* ========== Gallery ========== */
.m-gallery { background:var(--bg-gray); padding:0 0 28px; }
.m-gallery .m-sec-title { padding-top:0; }
.m-gal-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; padding:0 15px; }
.m-gal-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:all var(--transition); }
.m-gal-card:active { transform:scale(.97); }
.m-gal-card .pic { overflow:hidden; }
.m-gal-card .pic img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.m-gal-card .info { padding:10px 10px 12px; text-align:center; }
.m-gal-card .info h3 { font-size:13px; font-weight:500; line-height:1.4; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }

/* ========== About Block ========== */
.m-about { background:var(--bg-gray); padding:0 15px 28px; }
.m-about .ab-box { background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.m-about .ab-box h3 { font-size:18px; font-weight:700; margin-bottom:12px; }
.m-about .ab-box p { font-size:13px; color:var(--text-secondary); line-height:1.9; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.m-about .ab-box .ab-links { display:flex; gap:10px; }
.m-about .ab-box .ab-links a { flex:1; text-align:center; padding:14px 8px; background:var(--bg-gray); border-radius:var(--radius-sm); font-size:12px; font-weight:500; color:var(--text-secondary); }
.m-about .ab-box .ab-links a svg { display:block; width:28px; height:28px; fill:var(--primary); margin:0 auto 6px; }
.m-about .ab-box .btn-more { display:inline-flex; align-items:center; gap:4px; margin-top:14px; padding:10px 20px; background:var(--primary); color:#fff; border-radius:20px; font-size:13px; font-weight:500; }
.m-about .ab-box .btn-more svg { width:14px; height:14px; fill:#fff; }

/* ========== About + News Block (index) ========== */
.m-ab-news { background:var(--bg-gray); padding:0 15px 28px; display:flex; flex-direction:column; gap:14px; }
.m-ab-news .ab-text { background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.m-ab-news .ab-text h3 { font-size:17px; font-weight:700; margin-bottom:10px; }
.m-ab-news .ab-text p { font-size:13px; color:var(--text-secondary); line-height:1.9; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.m-ab-news .ab-text .ab-links { display:flex; gap:8px; margin-bottom:12px; }
.m-ab-news .ab-text .ab-links a { flex:1; text-align:center; padding:10px 6px; background:var(--bg-gray); border-radius:var(--radius-sm); font-size:13px; font-weight:500; color:var(--text-secondary); }
.m-ab-news .ab-text .ab-links a svg { display:block; width:22px; height:22px; fill:var(--primary); margin:0 auto 4px; }
.m-ab-news .ab-text .btn-more { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 28px; background:var(--primary); color:#fff; border-radius:6px; font-size:14px; font-weight:500; white-space:nowrap; }
.m-ab-news .ab-text .btn-more svg { width:16px; height:16px; fill:#fff; flex-shrink:0; }

/* ========== News List (index) ========== */
.m-news-sec { padding:0 15px 28px; }
.m-news-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.m-news-card { display:flex; gap:12px; background:#fff; border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); }
.m-news-card .pic { flex:0 0 100px; border-radius:var(--radius-sm); overflow:hidden; }
.m-news-card .pic img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.m-news-card .info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.m-news-card .info h4 { font-size:14px; font-weight:600; line-height:1.5; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.m-news-card .info p { font-size:11px; color:var(--text-muted); margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.m-news-card .info .date { font-size:11px; color:#bbb; }
.m-news-more { text-align:center; margin-top:16px; }
.m-news-more a { display:inline-flex; align-items:center; gap:4px; padding:8px 22px; background:var(--primary); color:#fff; border-radius:20px; font-size:13px; }

/* ========== Sub Page Header ========== */
.m-subhead { margin-top:52px; padding:16px 15px; background:var(--bg-gray); border-bottom:1px solid var(--border-color); display:flex; align-items:center; gap:10px; }
.m-subhead .back { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; box-shadow:var(--shadow); flex-shrink:0; }
.m-subhead .back svg { width:16px; height:16px; fill:var(--text); }
.m-subhead h1 { font-size:16px; font-weight:600; flex:1; text-align:center; padding-right:32px; }

/* ========== Product List Page ========== */
.m-prolist { padding:16px 15px; }
.m-prolist .m-pro-grid { gap:14px; }

/* ========== Product Detail ========== */
.m-prodetail { padding:0 0 24px; }
.m-prodetail .pd-gallery { position:relative; margin-bottom:16px; }
.m-prodetail .pd-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--bg-gray); }

.m-prodetail .pd-info { padding:0 15px 16px; }
.m-prodetail .pd-info h1 { font-size:18px; font-weight:700; line-height:1.5; margin-bottom:10px; }
.m-prodetail .pd-info .pd-meta { font-size:12px; color:var(--text-muted); margin-bottom:12px; }
.m-prodetail .pd-tabs { display:flex; border-bottom:2px solid var(--border-color); margin:0 15px 16px; }
.m-prodetail .pd-tabs a { flex:1; text-align:center; padding:10px 0; font-size:14px; font-weight:500; color:var(--text-secondary); transition:all var(--transition); position:relative; }
.m-prodetail .pd-tabs a.cur { color:var(--primary); }
.m-prodetail .pd-tabs a.cur::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:var(--primary); }
.m-prodetail .pd-content { padding:0 15px 20px; font-size:14px; line-height:1.9; color:var(--text-secondary); word-break:break-all; }
.m-prodetail .pd-content img { max-width:100% !important; height:auto !important; }

/* ========== Form ========== */
.m-form { padding:0 15px 20px; }
.m-form h4 { font-size:15px; font-weight:600; color:var(--primary); margin-bottom:12px; }
.m-form .form-group { margin-bottom:12px; }
.m-form .form-group label { display:block; font-size:13px; color:var(--text-secondary); margin-bottom:4px; }
.m-form .form-group input, .m-form .form-group textarea { width:100%; padding:10px 12px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:#fff; font-size:14px; transition:border-color var(--transition); }
.m-form .form-group input:focus, .m-form .form-group textarea:focus { border-color:var(--primary); }
.m-form .form-group textarea { height:100px; }
.m-form .form-submit { width:100%; padding:12px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius); font-size:15px; font-weight:600; cursor:pointer; transition:background var(--transition); }
.m-form .form-submit:active { background:var(--primary-dark); }
.m-form .hotline-box { background:var(--primary-bg-light); border-radius:var(--radius); padding:14px; margin-bottom:16px; text-align:center; }
.m-form .hotline-box p { font-size:12px; color:var(--text-muted); margin-bottom:4px; }
.m-form .hotline-box a { font-size:18px; font-weight:700; color:var(--primary); }

/* ========== About Page ========== */
.m-abpage { padding:16px 15px 24px; }
.m-abpage .ab-content { font-size:15px; line-height:2; color:var(--text-secondary); word-break:break-all; }
.m-abpage .ab-content img { max-width:100% !important; height:auto !important; border-radius:var(--radius-sm); margin:10px 0; }

/* ========== News List Page ========== */
.m-newslist { padding:12px 15px 20px; }
.m-newslist .m-news-card { margin-bottom:0; }

/* ========== News Detail ========== */
.m-newsdetail { padding:16px 15px 24px; }
.m-newsdetail h1 { font-size:19px; font-weight:700; line-height:1.5; margin-bottom:10px; }
.m-newsdetail .nd-meta { font-size:12px; color:var(--text-muted); margin-bottom:16px; }
.m-newsdetail .nd-content { font-size:15px; line-height:2; color:var(--text-secondary); word-break:break-all; }
.m-newsdetail .nd-content img { max-width:100% !important; height:auto !important; border-radius:var(--radius-sm); margin:10px 0; }
.m-newsdetail .nd-nav { margin-top:24px; padding-top:16px; border-top:1px solid var(--border-color); }
.m-newsdetail .nd-nav a { display:block; padding:6px 0; font-size:13px; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }

/* 相关推荐 */
.nd-related { margin-top:24px; padding-top:16px; border-top:1px solid var(--border-color); }
.nd-related h3 { font-size:16px; font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.nd-related h3::before { content:''; display:inline-block; width:4px; height:18px; background:var(--primary); border-radius:2px; }
.nd-related-list { display:flex; flex-direction:column; gap:10px; }
.nd-rel-item { display:flex; gap:12px; background:#fff; border-radius:var(--radius-sm); padding:10px; box-shadow:var(--shadow-sm); transition:all var(--transition); }
.nd-rel-item:active { background:var(--bg-gray); }
.nd-rel-item .pic { flex:0 0 100px; border-radius:var(--radius-sm); overflow:hidden; }
.nd-rel-item .pic img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.nd-rel-item .info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.nd-rel-item .info h4 { font-size:14px; font-weight:500; line-height:1.5; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nd-rel-item .info p { font-size:12px; color:var(--text-muted); line-height:1.5; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nd-rel-item .info span { font-size:11px; color:#bbb; margin-top:4px; }

/* ========== Pagination ========== */
.fanye {margin: 15px 0;width: 100%;line-height: 34px;text-align: center;color: #fff;}
.fanye a {color: #fff;padding: 0 11px;margin: 0 5px;font-weight: bold;background:#939393;margin-top:10px; font-size:12px;}
.fanye a.fcur {background:var(--primary);box-shadow: 0px 0px 9px #999;}
.fanye * {display: inline-block;_display: inline;vertical-align: middle;line-height: 28px;/*height: 28px;*/padding-bottom: 1px;}
.fanye a:hover {display: inline-block;color: #fff;background: var(--primary);box-shadow: 0px 0px 9px #999;}
/* ========== Footer ========== */
.m-footer { background:linear-gradient(135deg, #0b0c10 0%, #414141 50%, #0d0f14 100%); color:#94a3b8; padding:24px 15px 80px; text-align:center; }
.m-footer .ft-links { display:flex; justify-content:center; gap:20px; margin-bottom:16px; }
.m-footer .ft-links a { font-size:13px; }
.m-footer .ft-links a:active { color:var(--primary); }
.m-footer .ft-info { font-size:12px; line-height:1.8; margin-bottom:10px; }
.m-footer .ft-info a { color:var(--primary); }
.m-footer .ft-copy { font-size:11px; color:#64748b; padding-top:12px; border-top:1px solid rgba(255,255,255,.05); }

/* ========== Fixed Bottom Bar ========== */
.m-fixbar { position:fixed; bottom:0; left:0; right:0; z-index:998; display:flex; background:#fff; box-shadow:0 -2px 12px rgba(0,0,0,.08); }
.m-fixbar a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px 4px 6px; font-size:13px; color:var(--text-secondary); }
.m-fixbar a svg { width:20px; height:20px; fill:var(--text-secondary); }
.m-fixbar a:active { color:var(--primary); }
.m-fixbar a:active svg { fill:var(--primary); }
.m-fixbar a.tel { background:var(--primary); color:#fff; font-size:13px; font-weight:600; flex-direction:row; gap:4px; }
.m-fixbar a.tel svg { fill:#fff; }

/* ========== Back to Top ========== */
.m-backtop { position:fixed; right:15px; bottom:90px; z-index:997; width:40px; height:40px; border-radius:50%; background:var(--primary); box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all var(--transition); }
.m-backtop.show { opacity:1; visibility:visible; }
.m-backtop svg { width:18px; height:18px; fill:#fff; }

/* ========== Related Section ========== */
.m-related { padding:0 15px 24px; }
.m-related h3 { font-size:16px; font-weight:600; margin-bottom:12px; padding-left:12px; border-left:3px solid var(--primary); }

/* ========== Page Content ========== */
.m-page-box { padding:16px 15px 24px; }
.m-page-box .content { font-size:14px; line-height:2; color:var(--text-secondary); word-break:break-all; }

/* ========== Contact Info ========== */
.m-contact { padding:16px 15px 24px; }
.m-contact .ct-item { display:flex; gap:12px; padding:14px 0; border-bottom:1px dashed var(--border-color); }
.m-contact .ct-item:last-child { border-bottom:none; }
.m-contact .ct-icon { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:var(--primary-bg); border-radius:50%; }
.m-contact .ct-icon svg { width:16px; height:16px; fill:var(--primary); }
.m-contact .ct-info { flex:1; min-width:0; }
.m-contact .ct-info .ct-label { font-size:11px; color:var(--text-muted); }
.m-contact .ct-info .ct-val { font-size:14px; color:var(--text-secondary); line-height:1.5; }
.m-contact .ct-info .ct-tel { font-size:16px; font-weight:700; color:var(--primary); }