/* 睢宁县乾易利机械设备经营部 官网样式 —— 纯手写原创，无外部图片依赖 */
:root{
  --navy:#16233f; --navy-2:#0e1830; --acc:#e8730c; --acc-2:#c25e06;
  --ink:#232b36; --mut:#67748a; --line:#e4e8ef; --bg:#f4f6f9; --white:#fff;
  --radius:10px; --shadow:0 6px 24px rgba(22,35,63,.09);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Microsoft YaHei","PingFang SC","Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.7;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== 顶栏 ===== */
.topbar{background:var(--navy-2);color:#c3cddf;font-size:13px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:36px}
.topbar a{color:#c3cddf;margin-left:16px}
.topbar a:hover{color:#fff}
.topbar .tel-top{color:#ffb066;font-weight:600}

/* ===== 头部导航 ===== */
.header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(22,35,63,.06)}
.header .container{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--navy),var(--acc));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px;flex:none}
.logo .name{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:1px;line-height:1.2}
.logo .slogan{font-size:12px;color:var(--mut);letter-spacing:2px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:8px 15px;border-radius:6px;font-size:15.5px;color:var(--ink);transition:.2s}
.nav a:hover{color:var(--acc);background:#fdf3e9}
.nav a.active{color:#fff;background:var(--navy)}
.nav-toggle{display:none;font-size:26px;color:var(--navy);background:none;border:none;cursor:pointer}

/* ===== Hero ===== */
.hero{position:relative;color:#fff;overflow:hidden;background:linear-gradient(120deg,var(--navy-2) 0%,var(--navy) 58%,#33456b 100%)}
.hero::before{content:"";position:absolute;inset:0;opacity:.14;
  background-image:repeating-linear-gradient(135deg,transparent 0 12px,#fff 12px 13px)}
.hero::after{content:"";position:absolute;right:-140px;top:-140px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(232,115,12,.4),transparent 70%)}
.hero .container{position:relative;z-index:2;display:flex;align-items:center;min-height:460px;padding-top:56px;padding-bottom:56px}
.hero-inner{max-width:660px}
.hero .tag{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);padding:5px 16px;border-radius:30px;font-size:14px;letter-spacing:2px;margin-bottom:20px}
.hero h1{font-size:40px;line-height:1.3;margin-bottom:16px;font-weight:700}
.hero p.sub{font-size:17px;color:#d4dbe8;margin-bottom:30px;max-width:580px}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 32px;border-radius:8px;font-size:16px;font-weight:600;transition:.25s;cursor:pointer;border:none}
.btn-light{background:var(--acc);color:#fff}
.btn-light:hover{background:var(--acc-2);transform:translateY(-2px)}
.btn-line{border:1.5px solid rgba(255,255,255,.75);color:#fff;background:transparent}
.btn-line:hover{background:rgba(255,255,255,.15)}
.btn-main{background:var(--acc);color:#fff}
.btn-main:hover{background:var(--acc-2);transform:translateY(-2px)}

/* ===== 子页 Banner ===== */
.page-banner{background:linear-gradient(120deg,var(--navy-2),var(--navy) 60%,#33456b);color:#fff;padding:58px 0 46px;position:relative;overflow:hidden}
.page-banner::before{content:"";position:absolute;inset:0;opacity:.13;
  background-image:repeating-linear-gradient(135deg,transparent 0 12px,#fff 12px 13px)}
.page-banner .container{position:relative;z-index:2}
.page-banner h1{font-size:32px;margin-bottom:10px}
.page-banner .crumb{font-size:14px;color:#c4cee0}
.page-banner .crumb a{color:#c4cee0}
.page-banner .crumb a:hover{color:#fff}

/* ===== 统计条 ===== */
.stats{background:#fff;margin-top:-46px;position:relative;z-index:5}
.stats .container{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.stat{padding:30px 18px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat b{display:block;font-size:32px;color:var(--navy);font-weight:700;line-height:1.2}
.stat b em{font-style:normal;font-size:18px;color:var(--acc);margin-left:2px}
.stat span{font-size:14px;color:var(--mut)}

/* ===== 通用 Section ===== */
.section{padding:70px 0}
.section.alt{background:var(--bg)}
.sec-head{text-align:center;margin-bottom:44px}
.sec-head .en{text-transform:uppercase;letter-spacing:4px;font-size:13px;color:var(--acc);font-weight:600}
.sec-head h2{font-size:30px;color:var(--navy);margin:6px 0 10px}
.sec-head .bar{width:56px;height:3px;background:linear-gradient(90deg,var(--navy),var(--acc));margin:0 auto;border-radius:2px}
.sec-head p{color:var(--mut);margin-top:12px;font-size:15px}

/* ===== 产品卡片 ===== */
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#f3d9c0}
.pcard .pic{height:150px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard .pic::before{content:"";position:absolute;inset:0;opacity:.4;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 6px,transparent 6px 16px)}
.pcard .pic svg{position:relative;z-index:1;width:54px;height:54px;stroke:#fff;stroke-width:1.6;fill:none}
.pcard .body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.pcard h3{font-size:18px;color:var(--navy);margin-bottom:8px}
.pcard p{font-size:14px;color:var(--mut);flex:1}
.pcard .more{margin-top:14px;font-size:14px;color:var(--acc);font-weight:600}
.pcard .more:hover{color:var(--acc-2)}
/* 八大系列配色 */
.tone-1{background:linear-gradient(135deg,#274373,#16233f)}
.tone-2{background:linear-gradient(135deg,#33507f,#1d3050)}
.tone-3{background:linear-gradient(135deg,#b15c10,#7c3f08)}
.tone-4{background:linear-gradient(135deg,#3f5d8c,#253a5c)}
.tone-5{background:linear-gradient(135deg,#8c6a3f,#5c4326)}
.tone-6{background:linear-gradient(135deg,#4a6a96,#2c4468)}
.tone-7{background:linear-gradient(135deg,#d07a1c,#96540e)}
.tone-8{background:linear-gradient(135deg,#54688a,#354460)}

/* ===== 优势/图文 ===== */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.split .txt h3{font-size:24px;color:var(--navy);margin-bottom:14px}
.split .txt p{color:#45536a;margin-bottom:12px}
.art{border-radius:var(--radius);min-height:320px;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--navy) 0%,#33456b 100%)}
.art::before{content:"";position:absolute;inset:0;opacity:.16;
  background-image:repeating-linear-gradient(135deg,transparent 0 14px,#fff 14px 15px)}
.art .art-tag{position:absolute;left:24px;bottom:22px;color:#fff;background:rgba(14,24,48,.6);padding:8px 18px;border-radius:8px;font-size:14px;letter-spacing:2px;backdrop-filter:blur(2px)}
.art svg{position:absolute;inset:0;margin:auto;width:130px;height:130px;stroke:rgba(255,255,255,.85);stroke-width:1.2;fill:none}

/* ===== 特性列表 ===== */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;transition:.25s}
.feat:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.feat .ic{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--acc));display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat .ic svg{width:26px;height:26px;stroke:#fff;stroke-width:1.8;fill:none}
.feat h3{font-size:18px;color:var(--navy);margin-bottom:8px}
.feat p{font-size:14.5px;color:var(--mut)}

/* ===== 新闻列表 ===== */
.news-list{display:flex;flex-direction:column;gap:16px}
.news-item{display:flex;gap:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;transition:.25s;align-items:center}
.news-item:hover{box-shadow:var(--shadow);border-color:#f3d9c0}
.news-item .date{flex:none;width:78px;text-align:center;border-right:1px solid var(--line);padding-right:20px}
.news-item .date b{display:block;font-size:26px;color:var(--navy);line-height:1.1}
.news-item .date span{font-size:13px;color:var(--mut)}
.news-item h3{font-size:17px;color:var(--ink);margin-bottom:6px}
.news-item h3:hover{color:var(--acc)}
.news-item p{font-size:14px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== 正文 ===== */
.article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:44px 48px}
.article h1{font-size:26px;color:var(--navy);line-height:1.4;margin-bottom:12px}
.article .meta{font-size:14px;color:var(--mut);border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}
.article .body p{margin-bottom:14px;color:#3c4a5e;text-indent:2em}
.article .body p.no-indent{text-indent:0}
.article .body h2{font-size:19px;color:var(--navy);margin:22px 0 10px;border-left:4px solid var(--acc);padding-left:12px}
.article .body ul{margin:0 0 14px 2em;list-style:disc;color:#3c4a5e}
.article .body ul li{margin-bottom:6px}
.article .back{margin-top:28px;font-size:14px;color:var(--acc)}

/* ===== 两栏布局 ===== */
.layout2{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start}
.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:22px}
.side-box .hd{background:var(--navy);color:#fff;padding:15px 22px;font-size:17px;font-weight:600}
.side-box .bd{padding:10px 0}
.side-box .bd a{display:block;padding:11px 24px;font-size:15px;color:#45536a;border-bottom:1px dashed var(--line)}
.side-box .bd a:last-child{border-bottom:none}
.side-box .bd a:hover,.side-box .bd a.on{color:var(--acc);background:#fdf6ef}
.side-box .bd .contact-line{padding:9px 24px;font-size:14px;color:#45536a}
.side-box .bd .contact-line b{color:var(--navy)}

/* ===== 分类页产品图区 ===== */
.prod-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:30px;background:linear-gradient(120deg,var(--navy),#33456b);color:#fff;padding:46px 42px;position:relative}
.prod-hero::before{content:"";position:absolute;inset:0;opacity:.13;
  background-image:repeating-linear-gradient(135deg,#fff 0 5px,transparent 5px 16px)}
.prod-hero h2{font-size:28px;position:relative;z-index:1;margin-bottom:10px}
.prod-hero p{position:relative;z-index:1;color:#d5dde9;max-width:680px}

/* ===== 特点条目 ===== */
.points{display:flex;flex-direction:column;gap:12px}
.points li{background:#fff;border:1px solid var(--line);border-left:4px solid var(--acc);border-radius:8px;padding:14px 20px;font-size:15px;color:#3c4a5e}
.points li b{color:var(--navy)}

/* ===== 参数表 ===== */
.spec-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:16px 0}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:11px 16px;font-size:14.5px;text-align:left}
.spec-table th{background:var(--navy);color:#fff;font-weight:600;width:220px}

/* ===== 型号标签 ===== */
.model-tags{display:flex;flex-wrap:wrap;gap:10px}
.model-tags span{background:#fdf3e9;border:1px solid #f0d4b8;color:#7c4a12;border-radius:6px;padding:7px 14px;font-size:13.5px}

/* ===== CTA ===== */
.cta{background:linear-gradient(120deg,var(--navy-2),var(--navy) 55%,#33456b);color:#fff;text-align:center;padding:64px 0;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;opacity:.11;
  background-image:repeating-linear-gradient(135deg,transparent 0 12px,#fff 12px 13px)}
.cta .container{position:relative;z-index:1}
.cta h2{font-size:28px;margin-bottom:12px}
.cta p{color:#ccd5e4;margin-bottom:26px}
.cta .tel-big{font-size:30px;font-weight:700;color:#ffb066;letter-spacing:1px}

/* ===== 表单 ===== */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px 38px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.form label{display:block;font-size:14px;color:var(--mut);margin-bottom:6px}
.form input,.form textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fbfcfd;transition:.2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--acc);background:#fff;box-shadow:0 0 0 3px rgba(232,115,12,.12)}
.form textarea{min-height:120px;resize:vertical}

/* ===== 联系卡片 ===== */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:40px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;text-align:center;transition:.25s}
.ccard:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.ccard .ic{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--acc));margin:0 auto 14px;display:flex;align-items:center;justify-content:center}
.ccard .ic svg{width:26px;height:26px;stroke:#fff;stroke-width:1.8;fill:none}
.ccard h3{font-size:17px;color:var(--navy);margin-bottom:6px}
.ccard p{font-size:15px;color:#45536a}
.ccard p b{color:var(--acc);font-size:17px}

/* ===== 页脚 ===== */
.footer{background:var(--navy-2);color:#99a6c0;padding:54px 0 0;font-size:14.5px}
.footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:40px;padding-bottom:40px}
.footer h4{color:#fff;font-size:17px;margin-bottom:16px}
.footer .f-brand .name{color:#fff;font-size:20px;font-weight:700;margin-bottom:10px}
.footer a{color:#99a6c0}
.footer a:hover{color:#fff}
.footer li{margin-bottom:9px}
.footer .copy{border-top:1px solid rgba(255,255,255,.12);padding:18px 0;text-align:center;font-size:13.5px;color:#77869f}
.footer .copy a{color:#77869f;margin:0 6px}
.footer .copy a:hover{color:#fff}

/* ===== 悬浮电话 ===== */
.float-tel{position:fixed;right:22px;bottom:90px;z-index:90;background:var(--acc);color:#fff;border-radius:30px;padding:11px 20px;box-shadow:0 8px 22px rgba(194,94,6,.4);font-weight:600;display:flex;align-items:center;gap:8px}
.float-tel svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none}
.float-tel:hover{background:var(--acc-2)}

/* ===== 面包屑内页标题 ===== */
.content-title-bar{margin:34px 0 22px}
.content-title-bar h2{font-size:24px;color:var(--navy);border-left:4px solid var(--acc);padding-left:14px}

/* ===== 动画与返回顶部 ===== */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-up.in{opacity:1;transform:none}
.back-top{position:fixed;right:22px;bottom:32px;width:44px;height:44px;border-radius:10px;background:var(--navy);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;z-index:90;box-shadow:0 6px 18px rgba(22,35,63,.35)}
.back-top:hover{background:var(--acc)}
.back-top svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none}

/* ===== 响应式 ===== */
@media (max-width:992px){
  .grid-3,.grid-4,.feats,.contact-cards{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .layout2{grid-template-columns:1fr}
  .stats .container{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:none}
  .stat{border-bottom:1px solid var(--line)}
  .hero h1{font-size:32px}
  .footer .cols{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav{position:fixed;top:0;right:-280px;width:260px;height:100vh;background:var(--navy-2);flex-direction:column;align-items:stretch;padding:70px 18px 20px;gap:6px;transition:right .3s;z-index:200}
  .nav.open{right:0}
  .nav a{color:#d4dbe8;padding:13px 16px}
  .nav a.active{background:var(--acc)}
  .nav-toggle{display:block;z-index:210}
  .nav-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150;display:none}
  .nav-mask.show{display:block}
  .grid-3,.grid-4,.feats,.contact-cards{grid-template-columns:1fr}
  .hero .container{min-height:380px}
  .hero h1{font-size:27px}
  .article{padding:28px 22px}
  .form .row{grid-template-columns:1fr}
  .news-item{flex-direction:column;align-items:flex-start;gap:10px}
  .news-item .date{border-right:none;border-bottom:1px solid var(--line);width:auto;padding:0 0 8px;display:flex;gap:8px;align-items:baseline}
  .topbar .welcome{display:none}
}

/* === real photos enhancement === */
.logo .mark{background:transparent;padding:0;width:auto;height:auto;font-size:0;color:transparent;border-radius:0}
.logo .mark img{height:44px;width:auto;display:block}
.pcard .pic{background:#f4f6f9}
.pcard .pic img{width:100%;height:100%;object-fit:cover;display:block}
.hero-photo{background:linear-gradient(115deg,rgba(22,35,63,.92) 30%,rgba(22,35,63,.55)),url(../images/banner1.jpg) center/cover no-repeat}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 30px}
.gallery figure{margin:0;background:#fff;border:1px solid #e6e9f0;border-radius:10px;overflow:hidden}
.gallery figure img{width:100%;height:190px;object-fit:cover;display:block;background:#f4f6f9}
.gallery figcaption{padding:9px 12px;font-size:13px;color:#5a6478;line-height:1.45}
.art-photo{margin:4px 0 24px;border-radius:12px;overflow:hidden;border:1px solid #e6e9f0}
.art-photo img{width:100%;display:block;max-height:430px;object-fit:cover}
.split .art img{width:100%;border-radius:14px;display:block}
.qr-box{margin-top:22px;display:flex;align-items:center;gap:14px}
.qr-box img{border:1px solid #e6e9f0;border-radius:8px;background:#fff}
.qr-box span{font-size:14px;color:#5a6478;line-height:1.6}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery figure img{height:140px}.logo .mark img{height:36px}}