@charset "utf-8";
/* ==========================================================================
   易视界官方网站管理系统 · 前台样式
   主色 #012b85  强调色 #ec5a02   适配 PC / 平板 / 手机
   ========================================================================== */

:root{
  --c-main:#012b85;
  --c-main-lt:#0a49b8;
  --c-main-dk:#011d5c;
  --c-accent:#ec5a02;
  --c-accent-lt:#ff7a29;
  --c-text:#333a48;
  --c-sub:#6b7488;
  --c-line:#e4e9f2;
  --c-bg:#f5f7fb;
  --c-white:#fff;
  --radius:8px;
  --shadow:0 4px 20px rgba(1,43,133,.08);
  --shadow-lg:0 10px 40px rgba(1,43,133,.14);
  --w:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font:14px/1.75 "Microsoft YaHei","PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--c-text);background:var(--c-bg);overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:700;line-height:1.35}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:var(--c-text);text-decoration:none;transition:color .22s}
a:hover{color:var(--c-accent)}
button,input,select,textarea{font-family:inherit;font-size:inherit;outline:none}
table{border-collapse:collapse;width:100%}

.wrap{max-width:var(--w);margin:0 auto;padding:0 16px;width:100%}
.clearfix::after{content:"";display:block;clear:both}
.hide{display:none!important}
.text-c{text-align:center}

/* ============================ 顶部工具栏 ============================ */
.topbar{background:#001a4d;color:#a9b8d6;font-size:12.5px;line-height:38px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar .hello{color:#c3cfe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .links{display:flex;gap:0;flex-shrink:0}
.topbar .links a{color:#a9b8d6;padding:0 11px;position:relative}
.topbar .links a:hover{color:#fff}
.topbar .links a+a::before{content:"";position:absolute;left:0;top:12px;height:14px;width:1px;background:#2c4580}

/* ============================ 头部 ============================ */
.header{background:var(--c-white);padding:16px 0;box-shadow:0 1px 0 var(--c-line)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:14px;flex-shrink:0}
.logo img{height:58px;width:auto;display:block}
.logo .txt h1{font-size:21px;color:var(--c-main);letter-spacing:1px}
.logo .txt p{font-size:12.5px;color:var(--c-sub);margin:2px 0 0;letter-spacing:.5px}
.head-right{display:flex;align-items:center;gap:22px}
.head-slogan{text-align:right;font-size:13px;color:var(--c-sub);line-height:1.5}
.head-slogan strong{color:var(--c-main);font-size:15px;display:block}
.head-tel{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));color:#fff;padding:10px 20px;border-radius:40px;box-shadow:0 6px 18px rgba(1,43,133,.25)}
.head-tel .ico{font-size:20px;line-height:1}
.head-tel .num{font-size:20px;font-weight:700;letter-spacing:.5px;line-height:1.15}
.head-tel .lb{font-size:11.5px;opacity:.85;display:block;letter-spacing:1px}
.menu-btn{display:none;width:42px;height:42px;border:1px solid var(--c-line);background:#fff;border-radius:6px;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;background:var(--c-main);transition:.25s}
.menu-btn.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.on span:nth-child(2){opacity:0}
.menu-btn.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================ 主导航 ============================ */
.nav{background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));position:relative;z-index:60}
.nav .wrap{display:flex;align-items:stretch}
.nav > .wrap > ul{display:flex;flex:1;flex-wrap:wrap}
.nav li{position:relative}
.nav > .wrap > ul > li > a{
  display:block;color:#fff;font-size:15.5px;padding:0 22px;line-height:52px;position:relative;white-space:nowrap;
}
.nav > .wrap > ul > li > a::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:3px;background:var(--c-accent);
  transform:translateX(-50%);transition:width .25s;
}
.nav > .wrap > ul > li > a:hover,.nav > .wrap > ul > li.active > a{background:rgba(255,255,255,.1);color:#fff}
.nav > .wrap > ul > li > a:hover::after,.nav > .wrap > ul > li.active > a::after{width:100%}
.nav .sub{
  position:absolute;left:0;top:100%;min-width:172px;background:#fff;box-shadow:var(--shadow-lg);
  border-top:3px solid var(--c-accent);padding:6px 0;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:.24s;z-index:70;
}
.nav li:hover > .sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub li a{display:block;padding:9px 20px;font-size:14px;color:var(--c-text);line-height:1.5}
.nav .sub li a:hover{background:#f2f6ff;color:var(--c-main);padding-left:26px}

/* ============================ 通用区块标题 ============================ */
.sec{padding:56px 0}
.sec.gray{background:var(--c-bg)}
.sec.white{background:#fff}
.sec-hd{text-align:center;margin-bottom:38px}
.sec-hd .en{font-size:13px;color:#b6c1d6;letter-spacing:3px;text-transform:uppercase;font-weight:600}
.sec-hd h2{font-size:30px;color:var(--c-main);margin:6px 0 12px;letter-spacing:1px}
.sec-hd h2 em{font-style:normal;color:var(--c-accent)}
.sec-hd p{color:var(--c-sub);font-size:14px;max-width:660px;margin:0 auto}
.sec-hd::after{content:"";display:block;width:52px;height:3px;background:var(--c-accent);margin:16px auto 0;border-radius:2px}

/* 按钮 */
.btn{display:inline-block;padding:11px 30px;border-radius:40px;font-size:15px;font-weight:600;text-align:center;cursor:pointer;border:0;transition:.25s;line-height:1.4}
.btn-accent{background:linear-gradient(135deg,var(--c-accent),var(--c-accent-lt));color:#fff;box-shadow:0 6px 18px rgba(236,90,2,.3)}
.btn-accent:hover{color:#fff;transform:translateY(-2px);box-shadow:0 9px 24px rgba(236,90,2,.4)}
.btn-main{background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));color:#fff;box-shadow:0 6px 18px rgba(1,43,133,.26)}
.btn-main:hover{color:#fff;transform:translateY(-2px);box-shadow:0 9px 24px rgba(1,43,133,.36)}
.btn-ghost{border:1px solid var(--c-main);color:var(--c-main);background:transparent}
.btn-ghost:hover{background:var(--c-main);color:#fff}
.btn-sm{padding:7px 18px;font-size:13.5px}
.more{display:inline-flex;align-items:center;gap:5px;color:var(--c-sub);font-size:13.5px}
.more:hover{color:var(--c-accent)}
.more::after{content:"›";font-size:17px;line-height:1}

/* ============================ 轮播 ============================ */
.banner{position:relative;background:linear-gradient(135deg,#011d5c,#0a49b8 55%,#1a6bd8);overflow:hidden;min-height:420px}
.banner::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 78% 32%,rgba(236,90,2,.28),transparent 46%),
             radial-gradient(circle at 18% 76%,rgba(255,255,255,.12),transparent 42%);
}
.banner .slides{position:relative;z-index:2}
.banner .slide{display:none;padding:76px 0 88px;color:#fff}
.banner .slide.on{display:block;animation:fadeUp .6s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.banner .slide .inner{max-width:660px}
.banner .slide .tag{display:inline-block;padding:5px 16px;border:1px solid rgba(255,255,255,.5);border-radius:40px;font-size:13px;letter-spacing:2px;margin-bottom:20px}
.banner .slide h2{font-size:44px;line-height:1.28;letter-spacing:2px;text-shadow:0 4px 24px rgba(0,0,0,.24)}
.banner .slide h2 em{font-style:normal;color:#ffb072}
.banner .slide p{font-size:16px;opacity:.9;margin:18px 0 30px;max-width:560px;line-height:1.9}
.banner .slide .btns{display:flex;gap:14px;flex-wrap:wrap}
.banner .dots{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:9px;z-index:5}
.banner .dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.42);cursor:pointer;transition:.25s;display:block}
.banner .dots i.on{background:#fff;width:26px;border-radius:6px}
.banner .arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;line-height:44px;text-align:center;font-size:24px;color:#fff;background:rgba(255,255,255,.14);border-radius:50%;cursor:pointer;z-index:5;user-select:none;transition:.25s;display:none}
.banner:hover .arrow{display:block}
.banner .arrow:hover{background:var(--c-accent)}
.banner .arrow.prev{left:24px}
.banner .arrow.next{right:24px}

/* 数据条 */
.statbar{background:#fff;box-shadow:var(--shadow);position:relative;z-index:10;margin-top:-44px;border-radius:var(--radius);overflow:hidden}
.statbar .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.statbar .item{padding:26px 10px;text-align:center;position:relative}
.statbar .item+.item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:44px;width:1px;background:var(--c-line)}
.statbar .num{font-size:36px;font-weight:800;color:var(--c-main);line-height:1.1;letter-spacing:-1px}
.statbar .num i{font-style:normal;font-size:19px;color:var(--c-accent);margin-left:2px}
.statbar .txt{font-size:13.5px;color:var(--c-sub);margin-top:6px}

/* ============================ 走进易视界 ============================ */
.about{display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center}
.about .pic{position:relative}
.about .pic img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;display:block;background:#e8eef8;min-height:300px}
.about .pic .badge{position:absolute;right:-14px;bottom:-14px;background:linear-gradient(135deg,var(--c-accent),var(--c-accent-lt));color:#fff;padding:16px 22px;border-radius:var(--radius);text-align:center;box-shadow:0 10px 26px rgba(236,90,2,.34)}
.about .pic .badge b{display:block;font-size:30px;line-height:1.1}
.about .pic .badge span{font-size:12.5px;opacity:.92}
.about .info h3{font-size:26px;color:var(--c-main);margin-bottom:16px;line-height:1.4}
.about .info .lead{color:var(--c-sub);line-height:2;margin-bottom:22px;text-align:justify}
.about .info .lead strong{color:var(--c-accent)}
.about .feat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px}
.about .feat div{background:#f4f7fd;border-left:3px solid var(--c-main);padding:10px 14px;font-size:13.5px;color:#4a5468;border-radius:0 6px 6px 0}
.about .feat div b{color:var(--c-main)}

/* ============================ 加盟优势 ============================ */
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.adv{background:#fff;border-radius:var(--radius);padding:32px 22px;text-align:center;border:1px solid var(--c-line);transition:.3s;position:relative;overflow:hidden}
.adv::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--c-main),var(--c-accent));transform:scaleX(0);transform-origin:left;transition:transform .35s}
.adv:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.adv:hover::before{transform:scaleX(1)}
.adv .ico{width:66px;height:66px;margin:0 auto 16px;border-radius:50%;background:linear-gradient(135deg,#eaf1ff,#dbe7ff);color:var(--c-main);font-size:29px;line-height:66px;transition:.3s}
.adv:hover .ico{background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));color:#fff;transform:rotateY(180deg)}
.adv h4{font-size:17px;color:var(--c-main);margin-bottom:10px}
.adv p{font-size:13.5px;color:var(--c-sub);line-height:1.85;margin:0;text-align:justify}

/* ============================ 产品对比 ============================ */
.compare{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.compare table{font-size:14px}
.compare th,.compare td{padding:15px 18px;border-bottom:1px solid var(--c-line);text-align:left}
.compare thead th{background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));color:#fff;font-size:15px;font-weight:600;border:none}
.compare thead th:first-child{border-radius:0}
.compare tbody tr:nth-child(even){background:#fafbfe}
.compare tbody tr:hover{background:#f2f6ff}
.compare td:first-child{font-weight:600;color:var(--c-main);width:130px}
.compare .best{color:#0d8a5f;font-weight:600;position:relative}
.compare .best::before{content:"✓ ";color:#1aa06d}
.compare .worst{color:#c94a4a}

/* ============================ 案例 ============================ */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.case{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s;display:block}
.case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.case .thumb{height:190px;background:linear-gradient(135deg,#e8eef8,#d8e3f5);overflow:hidden;position:relative}
.case .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.case:hover .thumb img{transform:scale(1.07)}
.case .thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#a8b8d4;font-size:38px}
.case .bd{padding:18px 20px 20px}
.case .bd h4{font-size:15.5px;color:var(--c-main);line-height:1.6;height:48px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.case .bd p{font-size:13px;color:var(--c-sub);margin:8px 0 0;height:42px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.7}
.case .bd .meta{margin-top:12px;padding-top:12px;border-top:1px dashed var(--c-line);font-size:12.5px;color:#9aa5ba;display:flex;justify-content:space-between}

/* ============================ 新闻 ============================ */
.news-wrap{display:grid;grid-template-columns:400px 1fr;gap:26px}
.news-hot{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.news-hot .thumb{height:210px;background:linear-gradient(135deg,#e8eef8,#d8e3f5);position:relative;overflow:hidden}
.news-hot .thumb img{width:100%;height:100%;object-fit:cover}
.news-hot .bd{padding:18px 20px 20px}
.news-hot .bd .date{font-size:12.5px;color:var(--c-accent);font-weight:600;letter-spacing:.5px}
.news-hot .bd h4{font-size:16.5px;color:var(--c-main);margin:8px 0 10px;line-height:1.6;height:52px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.news-hot .bd p{font-size:13px;color:var(--c-sub);margin:0;height:66px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.7}
.news-list{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:6px 24px}
.news-list li{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px dashed var(--c-line)}
.news-list li:last-child{border-bottom:0}
.news-list .d{flex-shrink:0;width:58px;text-align:center;border-right:1px solid var(--c-line);padding-right:12px}
.news-list .d b{display:block;font-size:20px;color:var(--c-main);line-height:1.1}
.news-list .d span{font-size:11.5px;color:#9aa5ba}
.news-list .t{flex:1;min-width:0}
.news-list .t a{display:block;font-size:14.5px;color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news-list .t a:hover{color:var(--c-accent)}
.news-list .t small{color:#9aa5ba;font-size:12.5px}
.news-list .go{flex-shrink:0;color:#c3ccdd;font-size:18px}

/* ============================ FAQ ============================ */
.faq-wrap{max-width:920px;margin:0 auto}
.faq{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:.25s}
.faq.on{border-color:var(--c-main);box-shadow:var(--shadow)}
.faq .q{padding:18px 52px 18px 22px;font-size:15.5px;color:var(--c-main);font-weight:600;cursor:pointer;position:relative;line-height:1.6;user-select:none}
.faq .q::before{content:"问";display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;background:var(--c-main);color:#fff;border-radius:4px;font-size:12.5px;margin-right:10px;font-weight:400;vertical-align:1px}
.faq .q::after{content:"";position:absolute;right:24px;top:26px;width:9px;height:9px;border-right:2px solid #b6c1d6;border-bottom:2px solid #b6c1d6;transform:rotate(45deg);transition:.25s}
.faq.on .q::after{transform:rotate(-135deg);border-color:var(--c-accent);top:30px}
.faq .a{display:none;padding:0 22px 20px 54px;color:var(--c-sub);font-size:14px;line-height:1.95;text-align:justify;position:relative}
.faq.on .a{display:block;animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.faq .a::before{content:"答";position:absolute;left:22px;top:2px;width:22px;height:22px;line-height:22px;text-align:center;background:var(--c-accent);color:#fff;border-radius:4px;font-size:12.5px}

/* ============================ 加盟流程 ============================ */
.flow{display:flex;justify-content:center;gap:0;flex-wrap:wrap;position:relative}
.flow .st{flex:1;min-width:130px;text-align:center;position:relative;padding:0 6px}
.flow .st .n{width:62px;height:62px;line-height:62px;margin:0 auto 12px;border-radius:50%;background:#fff;border:2px solid var(--c-main);color:var(--c-main);font-size:22px;font-weight:700;transition:.3s;position:relative;z-index:2}
.flow .st:hover .n{background:linear-gradient(135deg,var(--c-accent),var(--c-accent-lt));border-color:transparent;color:#fff;transform:scale(1.08)}
.flow .st span{font-size:14.5px;color:var(--c-text);font-weight:600}
.flow .st:not(:last-child)::after{content:"";position:absolute;top:31px;left:calc(50% + 40px);right:calc(-50% + 40px);height:2px;background:repeating-linear-gradient(90deg,var(--c-line) 0 6px,transparent 6px 12px)}
.flow.on-blue .st .n{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);color:#fff}

/* ============================ 留言表单 ============================ */
.msg-box{background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));border-radius:var(--radius);padding:44px 40px;color:#fff;position:relative;overflow:hidden}
.msg-box::before{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.06)}
.msg-box::after{content:"";position:absolute;right:60px;bottom:-110px;width:220px;height:220px;border-radius:50%;background:rgba(236,90,2,.16)}
.msg-box .inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:center}
.msg-box h3{font-size:27px;line-height:1.45;margin-bottom:14px}
.msg-box h3 em{font-style:normal;color:#ffb072}
.msg-box .desc{font-size:14px;opacity:.88;line-height:2;margin:0 0 20px}
.msg-box .tel{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:700;letter-spacing:1px}
.msg-box .tel small{font-size:12.5px;font-weight:400;opacity:.8;display:block;letter-spacing:2px}
.form-card{background:#fff;border-radius:var(--radius);padding:26px 26px 22px;box-shadow:0 14px 44px rgba(0,0,0,.18)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.form-row.full{grid-template-columns:1fr}
.form-card input,.form-card textarea,.form-card select{
  width:100%;padding:11px 14px;border:1px solid var(--c-line);border-radius:6px;font-size:14px;color:var(--c-text);
  background:#fafbfe;transition:.2s;font-family:inherit;
}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{border-color:var(--c-main);background:#fff;box-shadow:0 0 0 3px rgba(1,43,133,.09)}
.form-card textarea{resize:vertical;min-height:88px;line-height:1.7}
.form-card .btn{width:100%;padding:13px;font-size:16px;margin-top:4px}
.form-card .note{font-size:12px;color:#9aa5ba;text-align:center;margin:10px 0 0}
.form-tip{font-size:13px;padding:9px 14px;border-radius:6px;margin-bottom:12px;display:none}
.form-tip.ok{display:block;background:#effaf4;color:#136b49;border:1px solid #c3ecd8}
.form-tip.no{display:block;background:#fdf0f0;color:#a52020;border:1px solid #f7cccc}
.captcha-row{display:grid;grid-template-columns:1fr 118px;gap:12px;margin-bottom:12px}
.captcha-row img{height:43px;width:118px;border:1px solid var(--c-line);border-radius:6px;cursor:pointer;background:#fafbfe;display:block}

/* ============================ 友情链接 ============================ */
.links-box{background:#fff;border-radius:var(--radius);padding:22px 26px;box-shadow:var(--shadow)}
.links-box .hd{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--c-line)}
.links-box .hd b{font-size:16px;color:var(--c-main)}
.links-box .hd span{font-size:12.5px;color:#9aa5ba}
.links-box .bd{display:flex;flex-wrap:wrap;gap:10px}
.links-box .bd a{padding:6px 14px;background:#f4f7fd;border-radius:4px;font-size:13.5px;color:var(--c-sub)}
.links-box .bd a:hover{background:var(--c-main);color:#fff}

/* ============================ 页脚 ============================ */
.footer{background:#001a4d;color:#9db0d0;padding:48px 0 0;margin-top:0}
.footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:34px;padding-bottom:34px}
.footer h4{color:#fff;font-size:15.5px;margin-bottom:18px;position:relative;padding-bottom:11px}
.footer h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--c-accent)}
.footer a{color:#9db0d0;font-size:13.5px;display:block;padding:5px 0}
.footer a:hover{color:#fff;padding-left:5px}
.footer .about-txt{font-size:13.5px;line-height:2;color:#8a9dc0;margin:0 0 14px}
.footer .contact-item{display:flex;gap:10px;font-size:13.5px;padding:5px 0;line-height:1.75}
.footer .contact-item b{color:#c3cfe6;flex-shrink:0;font-weight:600}
.footer .contact-item span{color:#9db0d0;word-break:break-all}
.footer .qr{width:104px;height:104px;background:#fff;border-radius:6px;padding:5px;margin-top:12px}
.footer .qr img{width:100%;height:100%;object-fit:contain;display:block}
.footer .copyright{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;text-align:center;font-size:13px;color:#7a8db0;line-height:2}
.footer .copyright a{display:inline;color:#9db0d0;padding:0 4px}
.footer .copyright a:hover{padding-left:4px}

/* ============================ 内页通用 ============================ */
.crumb{background:#eef3fb;border-bottom:1px solid var(--c-line);font-size:13.5px;color:var(--c-sub);line-height:46px}
.crumb .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--c-sub)}
.crumb a:hover{color:var(--c-accent)}
.crumb .sep{color:#c3ccdd}

.page-main{padding:38px 0 56px}
.layout{display:grid;grid-template-columns:262px 1fr;gap:26px;align-items:start}

/* 侧边栏 */
.side{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.side .shd{background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));color:#fff;padding:16px 20px;font-size:16px;font-weight:700;letter-spacing:1px}
.side .slist li a{display:block;padding:13px 20px;font-size:14.5px;border-bottom:1px solid #f2f5fa;position:relative}
.side .slist li a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--c-accent);transition:.25s}
.side .slist li a:hover,.side .slist li.active a{background:#f4f7fd;color:var(--c-main);padding-left:26px}
.side .slist li a:hover::before,.side .slist li.active a::before{height:100%}
.side .sbox{padding:20px;background:#fff;border-top:1px solid var(--c-line);text-align:center}
.side .sbox .t{font-size:13px;color:var(--c-sub);margin-bottom:6px}
.side .sbox .n{font-size:21px;font-weight:800;color:var(--c-accent);letter-spacing:.5px;line-height:1.3}
.side .sbox .btn{margin-top:12px;width:100%}
.side .contact-side{padding:20px;font-size:13.5px;color:var(--c-sub);line-height:2}
.side .contact-side b{color:var(--c-main);display:block;font-size:14px}
.side .contact-side .k{color:#9aa5ba}

/* 内容区 */
.card{background:#fff;border-radius:var(--radius);padding:32px 36px;box-shadow:var(--shadow);min-height:400px}
.card .art-title{font-size:25px;color:var(--c-main);line-height:1.5;margin-bottom:14px;text-align:center}
.card .art-meta{text-align:center;font-size:13px;color:#9aa5ba;padding-bottom:18px;border-bottom:1px solid var(--c-line);margin-bottom:24px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.article{font-size:15px;line-height:2.05;color:#414a5c;text-align:justify;word-wrap:break-word}
.article h2,.article h3,.article h4{color:var(--c-main);margin:26px 0 14px;padding-left:12px;border-left:4px solid var(--c-accent);line-height:1.5}
.article h2{font-size:20px}
.article h3{font-size:17.5px}
.article h4{font-size:16px}
.article p{margin:0 0 1.15em}
.article img{max-width:100%;height:auto;border-radius:6px;margin:12px 0;display:block}
.article ul,.article ol{margin:12px 0 16px 4px;padding-left:22px}
.article ul li{list-style:none;position:relative;padding-left:18px;margin-bottom:9px}
.article ul li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;background:var(--c-accent);border-radius:50%}
.article ol{list-style:decimal}
.article ol li{margin-bottom:9px}
.article strong{color:var(--c-main)}
.article a{color:var(--c-main);text-decoration:underline}
.article blockquote{background:#f4f7fd;border-left:4px solid var(--c-main);padding:14px 20px;margin:16px 0;color:var(--c-sub);border-radius:0 6px 6px 0}
.article table{margin:18px 0;font-size:14px;border:1px solid var(--c-line)}
.article table th{background:#f4f7fd;color:var(--c-main);padding:11px 14px;border:1px solid var(--c-line);text-align:left}
.article table td{padding:11px 14px;border:1px solid var(--c-line)}
.article table tr:nth-child(even) td{background:#fafbfe}

.pager{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:34px;flex-wrap:wrap}
.pager a,.pager span{padding:8px 14px;border:1px solid var(--c-line);border-radius:5px;font-size:14px;color:var(--c-sub);background:#fff;min-width:40px;text-align:center}
.pager a:hover{border-color:var(--c-main);color:var(--c-main)}
.pager .cur{background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));color:#fff;border-color:transparent;font-weight:600}
.pager em{padding:8px 4px;color:#c3ccdd;font-style:normal}
.pager-total{font-size:13px;color:#9aa5ba;border:0!important;background:transparent!important;margin-right:6px}

/* 文章页脚：上下篇 */
.prev-next{margin-top:30px;padding-top:22px;border-top:1px solid var(--c-line);font-size:14px;color:var(--c-sub);line-height:2.3}
.prev-next a{color:var(--c-main)}
.prev-next a:hover{color:var(--c-accent)}
.prev-next .row{display:flex;gap:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev-next .row b{color:#9aa5ba;font-weight:400;flex-shrink:0}

/* 列表页：图片列表 */
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plist .it{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;transition:.3s;display:block}
.plist .it:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.plist .it .th{height:168px;background:linear-gradient(135deg,#e8eef8,#d8e3f5);overflow:hidden;position:relative}
.plist .it .th img{width:100%;height:100%;object-fit:cover;transition:.5s}
.plist .it:hover .th img{transform:scale(1.07)}
.plist .it .th .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#b0bed8;font-size:34px}
.plist .it .bd{padding:15px 17px 17px}
.plist .it .bd h4{font-size:15px;color:var(--c-main);line-height:1.6;height:48px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.plist .it:hover .bd h4{color:var(--c-accent)}
.plist .it .bd p{font-size:12.5px;color:var(--c-sub);margin:7px 0 0;height:40px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.65}
.plist .it .bd .m{margin-top:11px;padding-top:10px;border-top:1px dashed var(--c-line);font-size:12px;color:#a8b3c7;display:flex;justify-content:space-between}

/* 列表页：文字列表 */
.tlist li{border-bottom:1px dashed var(--c-line);padding:18px 0}
.tlist li:last-child{border-bottom:0}
.tlist li a.tt{font-size:16px;color:var(--c-main);display:block;margin-bottom:7px;font-weight:600}
.tlist li a.tt:hover{color:var(--c-accent)}
.tlist li p{font-size:13.5px;color:var(--c-sub);margin:0;line-height:1.85;text-align:justify;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tlist li .m{font-size:12.5px;color:#a8b3c7;margin-top:9px;display:flex;gap:18px;flex-wrap:wrap}

/* 图集 */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}
.gallery a{display:block;border-radius:6px;overflow:hidden;background:#eef2f8;aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:.4s;display:block}
.gallery a:hover img{transform:scale(1.08)}

/* 空状态 */
.empty{text-align:center;padding:70px 20px;color:#a8b3c7}
.empty .ico{font-size:52px;color:#d6dfee;line-height:1;margin-bottom:14px}
.empty p{font-size:14.5px;margin:0}

/* 搜索框 */
.search-bar{display:flex;gap:10px;margin-bottom:24px}
.search-bar input{flex:1;padding:12px 16px;border:1px solid var(--c-line);border-radius:6px;font-size:14px;background:#fafbfe}
.search-bar input:focus{border-color:var(--c-main);background:#fff}
.search-bar button{padding:0 30px;border:0;border-radius:6px;background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));color:#fff;font-size:14.5px;font-weight:600;cursor:pointer}

/* ============================ 右侧悬浮 ============================ */
.float{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:8px}
.float a,.float .it{width:56px;height:56px;background:#fff;border-radius:10px;box-shadow:0 4px 18px rgba(1,43,133,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--c-main);font-size:11px;cursor:pointer;transition:.25s;position:relative;text-align:center}
.float a:hover,.float .it:hover{background:linear-gradient(135deg,var(--c-main),var(--c-main-lt));color:#fff;transform:translateX(-4px)}
.float .ic{font-size:19px;line-height:1}
.float .pop{position:absolute;right:66px;top:50%;transform:translateY(-50%) scale(.9);background:#fff;padding:12px;border-radius:8px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:.25s;pointer-events:none}
.float .it:hover .pop{opacity:1;visibility:visible;transform:translateY(-50%) scale(1)}
.float .pop img{width:110px;height:110px;display:block;object-fit:contain}
.float .pop span{display:block;font-size:12px;color:var(--c-sub);text-align:center;margin-top:5px;white-space:nowrap}
.float .pop::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%) rotate(45deg);width:12px;height:12px;background:#fff}
.float .top{display:none}
.float .top.show{display:flex}

/* 移动端底部快捷条 */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -3px 14px rgba(1,43,133,.13);z-index:90}
.mbar .in{display:flex}
.mbar a{flex:1;text-align:center;padding:9px 4px 8px;font-size:11.5px;color:var(--c-sub);border-right:1px solid var(--c-line)}
.mbar a:last-child{border:0}
.mbar a b{display:block;font-size:17px;color:var(--c-main);line-height:1.35;font-weight:400}
.mbar a.act{background:linear-gradient(135deg,var(--c-accent),var(--c-accent-lt));color:#fff}
.mbar a.act b{color:#fff}

/* 维护页 */
.maintain{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#011d5c,#0a49b8);padding:20px;text-align:center;color:#fff}
.maintain .box{max-width:560px}
.maintain .ico{font-size:64px;margin-bottom:18px}
.maintain h1{font-size:28px;margin-bottom:16px}
.maintain p{opacity:.85;line-height:2;font-size:15px}
.maintain .tel{margin-top:24px;font-size:24px;font-weight:700;letter-spacing:1px}

/* ============================ 响应式 ============================ */
@media (max-width:1180px){
  .nav > .wrap > ul > li > a{padding:0 16px;font-size:15px}
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .plist{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .head-slogan{display:none}
  .about{grid-template-columns:1fr;gap:30px}
  .news-wrap{grid-template-columns:1fr}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .msg-box .inner{grid-template-columns:1fr;gap:26px}
  .layout{grid-template-columns:1fr}
  .side{position:static}
  .footer .cols{grid-template-columns:1fr 1fr;gap:26px}
  .banner .slide h2{font-size:32px}
  .banner .slide{padding:56px 0 70px}
  .sec{padding:42px 0}
  .sec-hd h2{font-size:25px}
}
@media (max-width:768px){
  body{padding-bottom:52px}
  .menu-btn{display:flex}
  .header{padding:12px 0}
  .header .wrap{gap:12px}
  .logo img{height:44px}
  .logo .txt h1{font-size:17px}
  .logo .txt p{display:none}
  .head-tel{padding:8px 14px;border-radius:30px}
  .head-tel .num{font-size:16px}
  .head-tel .lb{display:none}
  .head-tel .ico{font-size:16px}

  .nav .wrap{display:block;padding:0}
  .nav > .wrap > ul{display:none;flex-direction:column;padding:0}
  .nav.open > .wrap > ul{display:flex}
  .nav > .wrap > ul > li > a{line-height:46px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px}
  .nav .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:rgba(0,0,0,.16);border:0;padding:0;display:none}
  .nav li.open > .sub{display:block}
  .nav .sub li a{color:#d5e0f5;padding:11px 34px}
  .nav .sub li a:hover{background:rgba(255,255,255,.08);color:#fff;padding-left:34px}

  .topbar{display:none}
  .banner{min-height:auto}
  .banner .slide{padding:38px 0 54px}
  .banner .slide h2{font-size:24px;letter-spacing:1px}
  .banner .slide p{font-size:14px;margin:14px 0 22px}
  .banner .slide .tag{font-size:12px;padding:4px 12px;margin-bottom:14px}
  .banner .arrow{display:none!important}
  .banner .dots{bottom:16px}

  .statbar{margin-top:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--c-line)}
  .statbar .wrap{grid-template-columns:repeat(2,1fr);padding:0}
  .statbar .item{padding:18px 8px}
  .statbar .item:nth-child(3)::before{display:none}
  .statbar .item:nth-child(odd)::before{display:none}
  .statbar .num{font-size:26px}
  .statbar .txt{font-size:12.5px}

  .sec{padding:32px 0}
  .sec-hd{margin-bottom:24px}
  .sec-hd h2{font-size:21px;margin:4px 0 8px}
  .sec-hd p{font-size:13px}
  .sec-hd .en{font-size:11.5px;letter-spacing:2px}

  .adv-grid{grid-template-columns:1fr 1fr;gap:12px}
  .adv{padding:20px 14px}
  .adv .ico{width:50px;height:50px;line-height:50px;font-size:22px;margin-bottom:11px}
  .adv h4{font-size:14.5px}
  .adv p{font-size:12.5px;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

  .case-grid,.plist{grid-template-columns:1fr;gap:14px}
  .case .thumb,.plist .it .th{height:180px}

  .flow .st{min-width:33%;margin-bottom:20px}
  .flow .st:not(:last-child)::after{display:none}
  .flow .st .n{width:52px;height:52px;line-height:52px;font-size:18px}

  .msg-box{padding:26px 18px}
  .msg-box h3{font-size:20px}
  .msg-box .tel{font-size:21px}
  .form-card{padding:18px}
  .form-row{grid-template-columns:1fr;gap:10px}
  .form-row.two-keep{grid-template-columns:1fr 1fr}
  .captcha-row{grid-template-columns:1fr 110px}
  .captcha-row img{width:110px}

  .card{padding:20px 16px;border-radius:6px}
  .card .art-title{font-size:19px}
  .card .art-meta{font-size:12px;gap:12px}
  .article{font-size:14.5px;line-height:1.95}
  .article h2{font-size:18px}
  .article h3{font-size:16.5px}

  .gallery{grid-template-columns:repeat(2,1fr)}

  .footer{padding-top:32px}
  .footer .cols{grid-template-columns:1fr;gap:22px;padding-bottom:22px}
  .footer .qr{width:92px;height:92px}

  .float{display:none}
  .mbar{display:block}

  .crumb{line-height:42px;font-size:12.5px}
  .page-main{padding:20px 0 34px}

  .links-box{padding:16px}
  .search-bar button{padding:0 20px}
}
@media (max-width:400px){
  .adv-grid{grid-template-columns:1fr}
  .flow .st{min-width:50%}
}

/* 打印 */
@media print{
  .nav,.banner,.float,.mbar,.footer,.side,.msg-box,.links-box{display:none!important}
  body{background:#fff}
}

/* ==========================================================================
   扩展组件（对齐旧站：网站公告 / 广告位 / 标签 / 在线客服 / 关键字内链）
   ========================================================================== */

/* ---------- 网站公告滚动条 ---------- */
.notice-bar{background:#fff8ec;border-bottom:1px solid #ffe6c2}
.notice-bar .wrap{display:flex;align-items:center;gap:14px;height:42px}
.nb-label{flex-shrink:0;background:linear-gradient(135deg,var(--c-accent),var(--c-accent-lt));color:#fff;font-size:12.5px;font-weight:600;padding:3px 11px;border-radius:4px;letter-spacing:.5px}
.nb-scroll{flex:1;min-width:0;height:42px;overflow:hidden;position:relative}
.nb-scroll ul{position:absolute;left:0;top:0;width:100%;transition:transform .5s ease}
.nb-scroll li{height:42px;line-height:42px;font-size:13.5px;color:#8a5a00;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb-scroll li a{color:#8a5a00}
.nb-scroll li a:hover{color:var(--c-accent)}
.nb-more{flex-shrink:0;font-size:13px;color:var(--c-accent);font-weight:600;white-space:nowrap}
.nb-more:hover{color:var(--c-main)}

/* ---------- 广告位：轮播 ---------- */
.ad-flash{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#011d5c,#0a49b8);min-height:200px}
.ad-flash-item{display:none;position:relative;min-height:200px}
.ad-flash-item.on{display:block;animation:fadeIn .5s ease}
.ad-flash-item img{width:100%;display:block}
.ad-flash-text{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:200px;padding:34px 26px;text-align:center;color:#fff}
.ad-flash-text b{font-size:24px;letter-spacing:1px}
.ad-flash-text span{font-size:14px;opacity:.86}
.ad-flash-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.ad-flash-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);cursor:pointer;transition:.25s;display:block}
.ad-flash-dots i.on{background:#fff;width:24px;border-radius:5px}
.ad-single{display:block;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#011d5c,#0a49b8)}
.ad-single img{width:100%;display:block}

/* ---------- 广告位：网格 ---------- */
.ad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ad-grid-item{display:block;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#011d5c,#0a49b8);transition:.3s}
.ad-grid-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.ad-grid-item img{width:100%;display:block}
.ad-grid-item .ad-flash-text{min-height:130px;padding:22px 16px}
.ad-grid-item .ad-flash-text b{font-size:16.5px}
.ad-grid-item .ad-flash-text span{font-size:12.5px}

/* ---------- 广告位：首页横排 ---------- */
.ad-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ad-row-item{display:flex;align-items:center;justify-content:center;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--c-line);min-height:104px;transition:.3s;text-align:center}
.ad-row-item:hover{border-color:var(--c-main);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.ad-row-item img{width:100%;display:block}
.ad-row-txt{display:flex;flex-direction:column;gap:6px;padding:20px 18px}
.ad-row-txt b{font-size:15.5px;color:var(--c-main);line-height:1.5}
.ad-row-txt em{font-style:normal;font-size:12.5px;color:var(--c-sub);line-height:1.6}
.ad-row-item:hover .ad-row-txt b{color:var(--c-accent)}

/* ---------- 标签 ---------- */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}
.tag-cloud-item{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;background:#f4f7fd;border:1px solid transparent;border-radius:30px;font-size:13.5px;color:var(--c-sub);transition:.25s}
.tag-cloud-item:hover,.tag-cloud-item.on{background:var(--c-main);border-color:var(--c-main);color:#fff}
.tag-cloud-item em{font-style:normal;font-size:11.5px;background:rgba(1,43,133,.1);color:var(--c-main);border-radius:10px;padding:0 6px;line-height:1.6}
.tag-cloud-item:hover em,.tag-cloud-item.on em{background:rgba(255,255,255,.24);color:#fff}

/* ---------- 在线客服弹层 ---------- */
.pop-qq{width:196px;padding:16px 14px}
.pop-title{display:block;font-size:14px;color:var(--c-main);font-weight:700;margin-bottom:10px;text-align:center;padding-bottom:9px;border-bottom:1px solid var(--c-line)}
.pop-qq-item{display:flex!important;align-items:center;gap:8px;padding:8px 10px!important;border-radius:6px;background:#f4f7fd;font-size:13px;color:var(--c-main);margin-bottom:7px}
.pop-qq-item b{background:var(--c-main);color:#fff;font-size:11px;padding:1px 6px;border-radius:3px;font-weight:600}
.pop-qq-item:hover{background:var(--c-main);color:#fff}
.pop-note{display:block;font-size:11.5px;color:#9aa5ba;text-align:center;margin-top:6px}

/* ---------- 正文关键字内链 ---------- */
.article a.kw-link{color:var(--c-main);text-decoration:none;border-bottom:1px dashed var(--c-main);padding-bottom:1px;transition:.2s}
.article a.kw-link:hover{color:var(--c-accent);border-bottom-color:var(--c-accent);background:#fff8ec}

/* ---------- 表单下拉框 ---------- */
.form-card select{width:100%;padding:11px 14px;border:1px solid var(--c-line);border-radius:6px;font-size:14px;color:var(--c-text);background:#fafbfe;transition:.2s;font-family:inherit;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7488' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.form-card select:focus{border-color:var(--c-main);background-color:#fff;box-shadow:0 0 0 3px rgba(1,43,133,.09)}

/* ---------- 扩展组件响应式 ---------- */
@media (max-width:980px){
  .ad-row{grid-template-columns:1fr 1fr}
  .ad-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .notice-bar .wrap{height:38px;gap:10px}
  .nb-scroll,.nb-scroll li{height:38px;line-height:38px}
  .nb-label{font-size:11.5px;padding:2px 8px}
  .nb-more{font-size:12px}
  .nb-scroll li{font-size:12.5px}
  .ad-row{grid-template-columns:1fr;gap:12px}
  .ad-grid{grid-template-columns:1fr}
  .ad-flash-text{min-height:150px;padding:24px 18px}
  .ad-flash-text b{font-size:18px}
  .ad-flash-text span{font-size:12.5px}
  .ad-flash,.ad-flash-item{min-height:150px}
  .tag-cloud{gap:8px}
  .tag-cloud-item{padding:6px 12px;font-size:12.5px}
}

/* ---------- 视频容器（迁移自旧站的 B站/腾讯/优酷/西瓜视频） ---------- */
.video-box{position:relative;width:100%;max-width:800px;margin:22px auto;background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.video-box::before{content:"";display:block;padding-top:56.25%}   /* 16:9 占位，避免加载时跳动 */
.video-box iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block}
@media (max-width:768px){
  .video-box{margin:16px auto;border-radius:6px}
}

/* ---------- 博客分类导航（博客首页「按分类浏览」） ---------- */
.blog-cate-nav{display:flex;flex-wrap:wrap;gap:10px}
.blog-cate-nav a{padding:9px 17px;background:#f4f7fd;border:1px solid var(--c-line);border-radius:30px;font-size:14px;color:var(--c-sub);transition:.25s}
.blog-cate-nav a:hover{background:var(--c-main);border-color:var(--c-main);color:#fff}

/* ---------- 博客标签云 ---------- */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px;line-height:1}