:root{
  --blue:#0274bd; --blue2:#1580d3; --red:#ca1f26; --orange:#ff9700;
  --dark:#232331; --gray:#5b5b5b; --bg:#f4f4f4; --line:#ececec;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif;color:#333;background:#fff;font-size:14px;line-height:1.85;}
a{color:#333;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
.wrap{width:1200px;max-width:94%;margin:0 auto;}

/* ===== Top bar ===== */
.topbar{background:var(--dark);color:#cfcfcf;font-size:13px;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;}
.topbar .left span{margin-right:22px;}
.topbar .right a,.topbar .right span{color:#cfcfcf;margin-left:22px;}
.topbar .tel{color:var(--orange);font-weight:bold;}

/* ===== Header ===== */
.header{background:#fff;}
.header .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.logo{display:flex;align-items:center;gap:14px;}
.logo .mark{width:54px;height:54px;background:var(--blue);color:#fff;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:bold;letter-spacing:1px;}
.logo .name{font-size:23px;font-weight:bold;color:var(--blue);line-height:1.2;}
.logo .sub{font-size:12px;color:var(--gray);letter-spacing:1px;}
.header .hint{font-size:13px;color:var(--gray);text-align:right;}
.header .hint b{color:var(--red);font-size:17px;}

/* ===== Nav ===== */
.nav{background:var(--blue);}
.nav ul{display:flex;}
.nav li{flex:1;text-align:center;}
.nav li a{display:block;line-height:50px;color:#fff;font-size:16px;letter-spacing:1px;transition:.2s;}
.nav li a:hover,.nav li.active{background:var(--red);}

/* ===== Banner ===== */
.banner{position:relative;height:420px;background-size:cover;background-position:center;background-color:#0a2a44;}
.banner .mask{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,30,55,.78),rgba(2,30,55,.25));}
.banner .txt{position:absolute;left:3%;top:50%;transform:translateY(-50%);color:#fff;max-width:640px;}
.banner .txt h1{font-size:42px;letter-spacing:2px;margin-bottom:14px;text-shadow:0 2px 8px rgba(0,0,0,.4);}
.banner .txt p{font-size:18px;line-height:1.9;color:#eaf3fa;}
.banner .txt .tags{margin-top:18px;}
.banner .txt .tags span{display:inline-block;background:rgba(255,151,0,.92);color:#fff;
  padding:6px 16px;border-radius:20px;margin-right:10px;font-size:14px;}

/* inner page small banner */
.ibanner{position:relative;height:200px;background-size:cover;background-position:center;background-color:#0a2a44;}
.ibanner .mask{position:absolute;inset:0;background:rgba(2,30,55,.62);}
.ibanner .txt{position:absolute;left:3%;bottom:36px;color:#fff;}
.ibanner .txt h1{font-size:30px;letter-spacing:2px;}
.ibanner .txt .en{font-size:13px;letter-spacing:3px;color:#cfe2f0;}

/* ===== Section title ===== */
.sec{padding:54px 0;}
.sec-title{text-align:center;margin-bottom:34px;}
.sec-title h2{font-size:28px;color:#222;}
.sec-title h2 span{color:var(--blue);}
.sec-title .en{display:block;color:#bdbdbd;letter-spacing:4px;font-size:13px;margin-top:4px;}
.sec-title .bar{width:60px;height:3px;background:var(--red);margin:14px auto 0;}

/* ===== Home: product categories ===== */
.prod-cats{display:flex;gap:26px;}
.prod-cat{flex:1;border:1px solid var(--line);background:#fff;transition:.3s;overflow:hidden;}
.prod-cat:hover{box-shadow:0 10px 26px rgba(0,0,0,.12);transform:translateY(-4px);}
.prod-cat img{width:100%;height:230px;object-fit:cover;}
.prod-cat .body{padding:18px 16px 22px;text-align:center;}
.prod-cat h3{font-size:19px;margin-bottom:8px;}
.prod-cat p{color:var(--gray);font-size:13px;min-height:40px;}
.prod-cat .more{display:inline-block;margin-top:10px;color:#fff;background:var(--blue);padding:6px 22px;border-radius:18px;font-size:13px;}
.prod-cat:hover .more{background:var(--red);}

/* ===== Home: about ===== */
.about{display:flex;gap:44px;align-items:center;}
.about img{width:46%;border-radius:4px;box-shadow:0 8px 22px rgba(0,0,0,.12);}
.about .txt{flex:1;}
.about .txt h3{font-size:22px;color:var(--blue);margin-bottom:14px;}
.about .txt p{text-indent:2em;margin-bottom:12px;color:#4a4a4a;}
.about .txt .more{display:inline-block;margin-top:6px;color:var(--blue);border:1px solid var(--blue);padding:7px 24px;border-radius:20px;}
.about .txt .more:hover{background:var(--blue);color:#fff;}

/* ===== Advantages ===== */
.adv{background:var(--bg);}
.adv-grid{display:flex;gap:24px;}
.adv-item{flex:1;background:#fff;padding:34px 26px;text-align:center;border-top:3px solid var(--blue);transition:.3s;}
.adv-item:hover{box-shadow:0 10px 26px rgba(0,0,0,.1);}
.adv-item .num{font-size:42px;color:var(--blue);font-weight:bold;font-style:italic;}
.adv-item h3{margin:12px 0 10px;font-size:18px;}
.adv-item p{color:var(--gray);font-size:13px;}

/* ===== Generic product gallery ===== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.gallery figure{border:1px solid var(--line);background:#fff;overflow:hidden;}
.gallery img{width:100%;height:240px;object-fit:cover;transition:.4s;}
.gallery figure:hover img{transform:scale(1.06);}
.gallery figcaption{padding:12px;text-align:center;color:#444;font-size:14px;}

/* ===== Layout with sidebar ===== */
.layout{display:flex;gap:34px;padding:42px 0;}
.sidebar{width:262px;flex-shrink:0;}
.side-box{border:1px solid var(--line);margin-bottom:22px;}
.side-box h4{background:var(--blue);color:#fff;padding:12px 18px;font-size:16px;letter-spacing:1px;}
.side-box li a{display:block;padding:11px 18px;border-bottom:1px solid #f2f2f2;color:#555;transition:.2s;}
.side-box li a:hover{color:var(--blue);padding-left:26px;}
.side-box.contact{background:var(--bg);}
.side-box.contact .pad{padding:18px;}
.side-box.contact p{margin:6px 0;font-size:13px;color:#555;}
.side-box.contact .t{color:var(--blue);font-weight:bold;}
.main{flex:1;min-width:0;}
.crumb{color:#9a9a9a;font-size:13px;margin-bottom:22px;}
.crumb a{color:#9a9a9a;}
.crumb a:hover{color:var(--blue);}
.page-h{font-size:22px;color:#222;border-left:5px solid var(--red);padding-left:14px;margin-bottom:22px;}

/* category blocks on products page */
.cat-block{display:flex;gap:26px;margin-bottom:34px;align-items:center;border:1px solid var(--line);padding:18px;background:#fff;}
.cat-block:nth-child(even){flex-direction:row-reverse;}
.cat-block img{width:300px;height:210px;object-fit:cover;flex-shrink:0;}
.cat-block h3{font-size:20px;color:var(--blue);margin-bottom:10px;}
.cat-block p{color:#555;}

/* ===== Contact ===== */
.contact-wrap{display:flex;gap:30px;flex-wrap:wrap;}
.contact-card{flex:1;min-width:300px;background:var(--bg);padding:30px 32px;}
.contact-card h3{color:var(--blue);margin-bottom:18px;font-size:20px;}
.contact-card p{margin:10px 0;color:#444;}
.contact-card .big{font-size:22px;color:var(--red);font-weight:bold;}
.contact-card:only-child{max-width:560px;margin:0 auto;}
.map-box{flex:1;min-width:300px;height:380px;background:#e9eef2;border:1px solid #d7dee4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7a8a96;text-align:center;}
.map-box .pin{font-size:34px;margin-bottom:10px;}
.map-box a{color:var(--blue);margin-top:10px;}

/* ===== Footer ===== */
.footer{background:var(--dark);color:#b6b6b6;margin-top:50px;}
.footer .wrap{display:flex;gap:50px;padding:44px 0 30px;flex-wrap:wrap;}
.footer .col h4{color:#fff;font-size:16px;margin-bottom:16px;}
.footer .col a,.footer .col p{color:#b6b6b6;display:block;margin:7px 0;font-size:13px;}
.footer .col a:hover{color:var(--orange);}
.footer .copy{text-align:center;padding:16px 0;border-top:1px solid #343442;font-size:13px;color:#8a8a8a;}
.footer .copy a{color:#8a8a8a;}

/* ===== Floating kefu ===== */
.kefu{position:fixed;right:22px;bottom:90px;width:60px;text-align:center;z-index:50;}
.kefu a{display:block;background:var(--blue);color:#fff;border-radius:8px;padding:10px 0;margin-bottom:8px;font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.2);}
.kefu a:hover{background:var(--red);}
.kefu .ic{font-size:20px;display:block;}

/* ===== Responsive ===== */
@media(max-width:900px){
  .prod-cats,.adv-grid,.about,.gallery,.cat-block,.contact-wrap{flex-wrap:wrap;}
  .about img{width:100%;}
  .layout{flex-direction:column;}
  .sidebar{width:100%;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .nav ul{flex-wrap:wrap;}
  .nav li{flex:none;flex:1 1 33%;}
  .banner{height:300px;}
  .banner .txt h1{font-size:30px;}
}
@media(max-width:600px){
  .gallery{grid-template-columns:1fr;}
  .nav li{flex:1 1 50%;}
  .footer .col{flex:1 1 100%;}
}