/* ============ 基础 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; color:#333; background:#fff; font-size:14px; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; border:0; }
.wrap { max-width:1200px; margin:0 auto; padding:0 15px; }
:root {
  --main:#1677A2;      /* 主色：深海蓝 */
  --main2:#32A3C6;     /* 辅助浅蓝 */
  --bg:#E6F4F9;        /* 浅蓝背景 */
  --dark:#0d4f6d;
}
/* ============ 顶栏 ============ */
.topbar { background:#f5f7f8; border-bottom:1px solid #eee; font-size:13px; color:#666; }
.topbar-in { display:flex; justify-content:space-between; padding:6px 15px; }
.topbar b { color:var(--main); font-size:15px; }
/* ============ 头部导航 ============ */
.header { background:#fff; }
.header-in { display:flex; align-items:center; justify-content:space-between; height:80px; }
.logo { display:flex; align-items:center; gap:12px; }
.logo-badge { width:52px; height:52px; border-radius:8px; background:linear-gradient(135deg,var(--main),var(--main2)); color:#fff; font-size:26px; font-weight:bold; display:flex; align-items:center; justify-content:center; }
.logo-txt b { font-size:20px; color:var(--main); display:block; line-height:1.3; }
.logo-txt i { font-style:normal; font-size:12px; color:#999; }
.nav { display:flex; }
.nav a { display:block; padding:0 22px; height:80px; line-height:80px; font-size:16px; color:#333; border-bottom:3px solid transparent; transition:.2s; }
.nav a:hover, .nav a.on { color:var(--main); border-bottom-color:var(--main); }
.nav-toggle { display:none; background:none; border:0; font-size:26px; color:var(--main); cursor:pointer; }
/* ============ 轮播 ============ */
.banner { position:relative; overflow:hidden; height:420px; background:#dceef5; }
.banner .slides { height:100%; }
.banner .slide { position:absolute; inset:0; opacity:0; transition:opacity .8s; background-size:cover; background-position:center; }
.banner .slide.on { opacity:1; }
.banner .slide .txt { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4); width:90%; }
.banner .slide .txt h2 { font-size:38px; margin-bottom:10px; }
.banner .dots { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.banner .dots i { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; }
.banner .dots i.on { background:#fff; }
.banner-default { background:linear-gradient(120deg,var(--main),var(--main2)); display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; height:100%; }
.banner-default h2 { font-size:36px; }
/* ============ 板块标题 ============ */
.sec { padding:50px 0; }
.sec.gray { background:#f7f9fa; }
.sec-tit { text-align:center; margin-bottom:36px; }
.sec-tit h2 { font-size:28px; color:#222; display:inline-block; }
.sec-tit h2::after { content:''; display:block; width:50px; height:3px; background:var(--main); margin:10px auto 0; border-radius:2px; }
.sec-tit p { color:#999; margin-top:6px; }
/* ============ 产品 ============ */
.ptabs { display:flex; justify-content:center; gap:12px; margin-bottom:28px; flex-wrap:wrap; }
.ptabs a { padding:8px 26px; border-radius:20px; background:var(--bg); color:var(--main); transition:.2s; }
.ptabs a.on, .ptabs a:hover { background:var(--main); color:#fff; }
.ptab-panel { display:none; }
.ptab-panel.on { display:block; }
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pgrid.col4 { grid-template-columns:repeat(4,1fr); }
.pcard { background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; transition:.25s; }
.pcard:hover { box-shadow:0 8px 24px rgba(22,119,162,.15); transform:translateY(-4px); }
.pcard .pic { height:220px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px; }
.pcard .pic img { max-width:100%; max-height:100%; object-fit:contain; }
.pcard .pic .noimg { color:var(--main2); font-size:14px; }
.pcard .info { padding:16px; }
.pcard .info h3 { font-size:16px; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcard .info p { color:#999; font-size:13px; margin:6px 0 10px; height:42px; overflow:hidden; }
.btn { display:inline-block; padding:7px 22px; border-radius:4px; background:var(--main); color:#fff; font-size:13px; transition:.2s; border:0; cursor:pointer; }
.btn:hover { background:var(--dark); }
.btn-line { background:#fff; color:var(--main); border:1px solid var(--main); }
.btn-line:hover { background:var(--main); color:#fff; }
.more-wrap { text-align:center; margin-top:32px; }
/* ============ 关于我们 ============ */
.about-flex { display:flex; gap:40px; align-items:center; }
.about-flex .a-pic { flex:0 0 46%; border-radius:8px; overflow:hidden; min-height:300px; background:linear-gradient(135deg,var(--bg),#fff); display:flex; align-items:center; justify-content:center; color:var(--main2); position:relative; }
.about-flex .a-pic img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.about-flex .a-txt h3 { font-size:24px; color:var(--main); margin-bottom:14px; }
.about-flex .a-txt p { color:#666; margin-bottom:12px; text-indent:2em; }
/* ============ 新闻 ============ */
.ngrid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ncard { background:#fff; border-radius:8px; overflow:hidden; border:1px solid #eee; transition:.25s; }
.ncard:hover { box-shadow:0 8px 24px rgba(22,119,162,.15); transform:translateY(-4px); }
.ncard .date { background:var(--main); color:#fff; text-align:center; padding:10px; }
.ncard .date b { font-size:24px; display:block; }
.ncard .nbody { padding:16px; }
.ncard .nbody h3 { font-size:16px; margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ncard .nbody p { color:#999; font-size:13px; height:44px; overflow:hidden; }
/* 新闻列表页 */
.nlist { background:#fff; }
.nlist .item { display:flex; gap:20px; padding:20px 0; border-bottom:1px solid #eee; }
.nlist .item .d { flex:0 0 86px; text-align:center; background:var(--bg); border-radius:8px; padding:10px 0; align-self:flex-start; }
.nlist .item .d b { font-size:26px; color:var(--main); display:block; }
.nlist .item .d span { color:#999; font-size:12px; }
.nlist .item h3 { font-size:17px; margin-bottom:6px; }
.nlist .item h3 a:hover { color:var(--main); }
.nlist .item p { color:#888; font-size:13px; }
/* ============ 页面头 ============ */
.pagehead { height:220px; background:linear-gradient(120deg,var(--main),var(--main2)); display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; }
.pagehead h2 { font-size:32px; }
.pagehead p { opacity:.85; margin-top:6px; }
.crumbs { padding:14px 0; color:#999; font-size:13px; border-bottom:1px solid #eee; margin-bottom:30px; }
.crumbs a:hover { color:var(--main); }
/* ============ 内容布局 ============ */
.layout { display:flex; gap:30px; padding-bottom:50px; }
.sidebar { flex:0 0 250px; }
.side-cat { background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; margin-bottom:24px; }
.side-cat h3 { background:var(--main); color:#fff; padding:12px 18px; font-size:16px; }
.side-cat a { display:block; padding:12px 18px; border-bottom:1px solid #f0f0f0; transition:.2s; }
.side-cat a:last-child { border-bottom:0; }
.side-cat a.on, .side-cat a:hover { background:var(--bg); color:var(--main); padding-left:26px; }
.side-contact { background:var(--main); color:#fff; border-radius:8px; padding:22px; }
.side-contact h3 { margin-bottom:10px; }
.side-contact .tel { font-size:24px; font-weight:bold; margin:8px 0; }
.maincol { flex:1; min-width:0; }
/* ============ 详情页 ============ */
.detail-tit { text-align:center; border-bottom:1px solid #eee; padding-bottom:18px; margin-bottom:24px; }
.detail-tit h1 { font-size:24px; }
.detail-tit .meta { color:#999; font-size:13px; margin-top:8px; }
.detail-body { font-size:15px; line-height:1.9; min-height:200px; }
.detail-body img { max-width:100%; height:auto; }
/* ============ 分页 ============ */
.pager { display:flex; justify-content:center; gap:8px; margin:36px 0; }
.pager a, .pager span { padding:7px 14px; border:1px solid #ddd; border-radius:4px; color:#666; }
.pager .on, .pager a:hover { background:var(--main); color:#fff; border-color:var(--main); }
/* ============ 联系/留言 ============ */
.contact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:40px; }
.contact-item { background:#fff; border:1px solid #eee; border-radius:8px; text-align:center; padding:28px 10px; }
.contact-item .ic { width:54px; height:54px; margin:0 auto 12px; border-radius:50%; background:var(--bg); color:var(--main); font-size:24px; display:flex; align-items:center; justify-content:center; }
.contact-item h4 { color:#333; margin-bottom:4px; }
.contact-item p { color:#888; font-size:13px; word-break:break-all; }
.msgform { background:#f7f9fa; border-radius:8px; padding:30px; }
.msgform h3 { margin-bottom:20px; color:var(--main); }
.form-row { display:flex; gap:16px; margin-bottom:16px; }
.form-row .form-group { flex:1; }
.form-group input, .form-group textarea, .form-group select { width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:4px; font-size:14px; font-family:inherit; }
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--main); }
.form-group textarea { height:120px; resize:vertical; }
/* ============ 页脚 ============ */
.footer { background:#123d52; color:#bcd4e0; margin-top:0; }
.footer-in { display:grid; grid-template-columns:2fr 1.5fr 1.5fr 1fr; gap:30px; padding:44px 15px; }
.foot-col h4 { color:#fff; margin-bottom:14px; font-size:16px; }
.foot-col p { font-size:13px; margin-bottom:8px; }
.foot-col a:hover { color:#fff; }
.qr { width:100px; height:100px; background:#fff; padding:4px; border-radius:4px; }
.qr-empty { color:#7fa6ba; font-size:12px; display:flex; align-items:center; justify-content:center; text-align:center; }
.copy { background:#0d2f40; padding:14px 0; font-size:13px; text-align:center; }
.copy a:hover { color:#fff; }
/* ============ 侧边悬浮 ============ */
.sidebox { position:fixed; right:10px; top:50%; transform:translateY(-50%); z-index:99; }
.side-item { width:48px; height:48px; background:var(--main); color:#fff; border-radius:6px; margin-bottom:6px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; font-size:14px; }
.side-item:hover { background:var(--dark); }
.side-item .side-pop { position:absolute; right:56px; top:50%; transform:translateY(-50%); background:#fff; color:#333; box-shadow:0 2px 12px rgba(0,0,0,.15); border-radius:6px; padding:8px 14px; white-space:nowrap; font-size:13px; display:none; }
.side-item:hover .side-pop { display:block; }
.side-pop b { color:var(--main); font-size:16px; }
/* ============ 分享按钮 ============ */
.share-wrap { position:relative; display:inline-block; }
.share-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 20px; border-radius:20px; background:var(--bg); color:var(--main); border:1px solid var(--main2); cursor:pointer; font-size:13px; transition:.2s; }
.share-btn:hover { background:var(--main); color:#fff; }
.share-pop { display:none; position:absolute; right:0; top:44px; width:260px; background:#fff; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.18); padding:18px; z-index:50; text-align:center; }
.share-pop.show { display:block; }
.share-pop .link-box { display:flex; gap:8px; margin:12px 0; }
.share-pop .link-box input { flex:1; min-width:0; padding:8px 10px; border:1px solid #ddd; border-radius:6px; font-size:12px; color:#666; }
.share-pop .link-box button { padding:8px 12px; background:var(--main); color:#fff; border:0; border-radius:6px; cursor:pointer; font-size:12px; white-space:nowrap; }
.share-pop .tip-txt { font-size:12px; color:#999; line-height:1.8; }
/* ============ 响应式 ============ */
@media (max-width: 992px) {
  .pgrid, .ngrid { grid-template-columns:repeat(2,1fr); }
  .pgrid.col4 { grid-template-columns:repeat(3,1fr); }
  .about-flex { flex-direction:column; }
  .about-flex .a-pic { width:100%; }
  .footer-in { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:repeat(2,1fr); }
  .layout { flex-direction:column; }
  .sidebar { flex:none; }
}
@media (max-width: 640px) {
  .header-in { height:64px; }
  .header { position:relative; }
  .logo-badge { width:42px; height:42px; font-size:20px; }
  .logo-txt b { font-size:15px; }
  .logo-txt i { font-size:11px; }
  .nav { display:none; position:absolute; top:64px; left:0; right:0; background:#fff; flex-direction:column; box-shadow:0 6px 12px rgba(0,0,0,.1); z-index:100; }
  .nav.open { display:flex; }
  .nav a { height:48px; line-height:48px; border-bottom:1px solid #f0f0f0; }
  .nav-toggle { display:block; }
  .banner { height:220px; }
  .banner .slide .txt h2 { font-size:22px; }
  .banner-default h2 { font-size:20px; padding:0 10px; }
  .sec { padding:32px 0; }
  .sec-tit h2 { font-size:22px; }
  .pgrid, .ngrid, .pgrid.col4 { grid-template-columns:1fr; }
  .nlist .item { flex-direction:row; gap:12px; }
  .nlist .item .d { flex:0 0 64px; padding:8px 0; }
  .nlist .item .d b { font-size:20px; }
  .pagehead { height:150px; }
  .pagehead h2 { font-size:24px; }
  .detail-tit h1 { font-size:19px; }
  .form-row { flex-direction:column; gap:0; }
  .msgform { padding:18px; }
  .topbar-in span:first-child { display:none; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-in { grid-template-columns:1fr; padding:30px 15px; gap:20px; }
  .sidebox { display:none; }
  .side-contact { display:none; }
}