/* =====================================================
   杏林榜官网  -  common.css
   设计语言 1:1 参考 福联医疗集团 官网
   主色替换为 杏林榜 LOGO 色 #971E23
   图片/字体图标以 SVG / 渐变占位，纯静态可部署
   ===================================================== */

/* ---------- Reset ---------- */
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; outline:0; -webkit-text-size-adjust:none; }
html{ height:100%; scroll-behavior:smooth; }
html,body,div,p,strong,span,a,b,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,del,img,i,em,select,button,textarea,input{ margin:0; padding:0; }
body{ background:#fff; font-family:'Microsoft YaHei','PingFang SC','Hiragino Sans GB','SimSun',Arial,serif; font-size:16px; color:#444; position:relative; min-height:100%; line-height:1.7; }
a,img,button,input,textarea,select{ -webkit-tap-highlight-color:rgba(255,255,255,0); }
input,button,textarea,select{ outline:none; border:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; font-family:inherit; }
table{ border-collapse:collapse; }
a{ text-decoration:none; color:#000; }
a:hover{ text-decoration:none; }
li{ list-style:none; }
img{ vertical-align:middle; border:none; max-width:100%; }
.fl{ float:left; } .fr{ float:right; } .clear{ clear:both; }
.clearfix:after{ content:""; display:block; height:0; visibility:hidden; clear:both; }
.hidden{ overflow:hidden; }
.cell_box{ font-size:0; }
.cell_box:before{ content:''; height:100%; display:inline-block; vertical-align:middle; }
.cell_box .cell{ width:100%; display:inline-block; vertical-align:middle; }

/* ---------- Variables ---------- */
:root{
  --primary:#971E23;
  --primary-dark:#7a181c;
  --primary-light:#b3242b;
  --primary-lighter:#d63a42;
  --ink:#1a1a1a;
  --text:#444;
  --muted:#888;
  --line:#e8e8e8;
  --bg:#fff;
  --bg-grey:#f7f7f7;
  --bg-warm:#fdf6f6;
}

/* ---------- Layout ---------- */
.container{ width:80%; max-width:1280px; margin:0 auto; position:relative; }
.wrap{ width:80%; max-width:1280px; margin:0 auto; }
.comm_pad{ padding:90px 0; }
.comm_mar{ margin-top:0; }

/* =====================================================
   Header
   ===================================================== */
.header{ position:fixed; top:0; left:0; width:100%; z-index:99; padding:0 40px; height:101px;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .4s ease; background:#fff; box-shadow:0 2px 20px rgba(0,0,0,.06); }
.header.active{ box-shadow:0 4px 24px rgba(0,0,0,.10); height:80px; }
.logo{ flex:0 0 auto; }
.logo img{ height:96px; transition:all .3s ease; }
.header.active .logo img{ height:80px; }

.nav{ font-size:0; margin-right:10px; }
.nav>li{ display:inline-block; vertical-align:middle; position:relative; }
.nav>li>a{ display:block; font-size:16px; color:var(--ink); padding:0 22px; line-height:101px; transition:all .3s ease; position:relative; }
.header.active .nav>li>a{ line-height:80px; }
.nav>li>a:after{ content:''; position:absolute; left:50%; bottom:30px; width:0; height:2px; background:var(--primary); transition:all .3s ease; transform:translateX(-50%); }
.nav>li:hover>a, .nav>li.ok>a, .nav>li.cur>a{ color:var(--primary); }
.nav>li:hover>a:after, .nav>li.ok>a:after, .nav>li.cur>a:after{ width:24px; }
.header.active .nav>li.cur>a{ color:var(--primary); }

/* 下拉二级菜单 */
.drop_menu{ position:fixed; top:101px; left:0; width:100%; z-index:98; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.08);
  opacity:0; visibility:hidden; transform:translateY(-10px); transition:all .3s ease; }
.header.active .drop_menu{ top:80px; }
.drop_menu .main{ display:none; }
.drop_menu .main.active{ display:block; }
.drop_menu .inner{ width:80%; max-width:1280px; margin:0 auto; display:flex; align-items:center; padding:30px 0; }
.drop_menu .left{ flex:1; padding-right:40px; }
.drop_menu .left h3{ font-size:22px; color:var(--ink); margin-bottom:14px; }
.drop_menu .left p{ font-size:14px; color:var(--muted); line-height:1.9; margin-bottom:16px; }
.drop_menu .a_box a{ display:inline-block; font-size:14px; color:#666; padding:6px 18px; border:1px solid var(--line); border-radius:30px; margin:0 10px 10px 0; transition:all .3s ease; }
.drop_menu .a_box a:hover{ background:var(--primary); color:#fff; border-color:var(--primary); }
.drop_menu .right{ flex:0 0 360px; }
.drop_menu .right img{ width:100%; border-radius:6px; }

.header .search_box{ position:relative; }
.header .search{ display:inline-block; width:22px; height:22px; vertical-align:middle; cursor:pointer;
  background:no-repeat center/contain; position:relative; }
.header .search:before{ content:''; position:absolute; left:50%; top:50%; width:14px; height:14px; border:2px solid var(--ink); border-radius:50%; transform:translate(-50%,-50%); }
.header .search:after{ content:''; position:absolute; left:60%; top:60%; width:7px; height:2px; background:var(--ink); transform:rotate(45deg); }
.search_box form{ display:none; position:absolute; right:0; top:50%; transform:translateY(-50%); background:#fff; border-radius:30px; padding:4px 6px 4px 16px; box-shadow:0 4px 15px rgba(0,0,0,.12); }
.search_box form.active{ display:block; }
.search_box input{ width:160px; height:34px; font-size:14px; }
.search_box button{ width:34px; height:34px; background:var(--primary); border-radius:50%; color:#fff; cursor:pointer; }
.menuBtn{ display:none; width:28px; height:22px; position:relative; cursor:pointer; }
.menuBtn b{ position:absolute; left:0; width:100%; height:2px; background:var(--ink); transition:all .3s; }
.menuBtn b:nth-child(1){ top:0; } .menuBtn b:nth-child(2){ top:10px; } .menuBtn b:nth-child(3){ top:20px; }

/* 移动端抽屉菜单 */
.header_box{ position:fixed; top:0; right:-100%; width:80%; max-width:360px; height:100vh; background:#fff; z-index:100; overflow-y:auto; transition:right .3s ease; padding:90px 30px 30px; box-shadow:-5px 0 30px rgba(0,0,0,.15); }
.header_box.active{ right:0; }
.header_box .close{ position:absolute; top:24px; right:24px; width:26px; height:26px; cursor:pointer; }
.header_box .close:before,.header_box .close:after{ content:''; position:absolute; top:12px; left:0; width:26px; height:2px; background:var(--ink); }
.header_box .close:before{ transform:rotate(45deg); } .header_box .close:after{ transform:rotate(-45deg); }
.header_box .main .right li{ border-bottom:1px solid var(--line); }
.header_box .main .right li>a{ display:block; padding:14px 4px; font-size:17px; color:var(--ink); font-weight:500; }
.header_box .main .right li dl dd a{ display:block; padding:10px 16px; font-size:15px; color:#666; }
.header_box .main .right li dl{ display:none; }
.mask{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99; display:none; }
.mask.active{ display:block; }

/* =====================================================
   comm_banner（各内页 banner）
   ===================================================== */
.comm_banner{ position:relative; height:360px; background:linear-gradient(120deg,var(--primary-dark),var(--primary)); display:flex; align-items:center; overflow:hidden; }
.comm_banner:before{ content:''; position:absolute; inset:0; background:
  radial-gradient(circle at 80% 20%, rgba(255,255,255,.12) 0 22%, transparent 23%),
  radial-gradient(circle at 15% 80%, rgba(255,255,255,.10) 0 28%, transparent 29%); }
.comm_banner:after{ content:''; position:absolute; right:-80px; top:-80px; width:360px; height:360px; border:2px solid rgba(255,255,255,.12); border-radius:50%; }
.comm_banner .txt_block{ position:relative; z-index:2; width:80%; max-width:1280px; margin:0 auto; color:#fff; }
.comm_banner h1{ font-size:42px; font-weight:700; letter-spacing:4px; margin-bottom:14px; }
.comm_banner .sub{ font-size:16px; opacity:.85; letter-spacing:2px; }

/* =====================================================
   subnav（二级栏目 tab）
   ===================================================== */
.subnav{ border-bottom:1px solid var(--line); background:#fff; }
.subnav ul{ width:80%; max-width:1280px; margin:0 auto; display:flex; justify-content:center; flex-wrap:wrap; }
.subnav li{ position:relative; }
.subnav li a{ display:block; padding:22px 30px; font-size:16px; color:#555; position:relative; }
.subnav li a:after{ content:''; position:absolute; left:50%; bottom:0; width:0; height:3px; background:var(--primary); transition:all .3s; transform:translateX(-50%); }
.subnav li.active a, .subnav li a:hover{ color:var(--primary); }
.subnav li.active a:after, .subnav li a:hover:after{ width:30px; }

/* =====================================================
   comm_tit（标题）
   ===================================================== */
.comm_tit{ text-align:center; margin-bottom:50px; }
.comm_tit h2{ font-size:34px; color:var(--ink); position:relative; display:inline-block; padding-bottom:16px; }
.comm_tit h2:after{ content:''; position:absolute; left:50%; bottom:0; width:50px; height:3px; background:var(--primary); transform:translateX(-50%); }
.comm_tit p{ font-size:15px; color:var(--muted); margin-top:16px; }
.comm_tit2{ font-size:28px; color:var(--ink); margin-bottom:30px; position:relative; padding-left:16px; }
.comm_tit2:before{ content:''; position:absolute; left:0; top:6px; width:4px; height:24px; background:var(--primary); }

/* =====================================================
   通用 section / 卡片 / 列表
   ===================================================== */
.section{ padding:90px 0; }
.section.grey{ background:var(--bg-grey); }
.section.warm{ background:var(--bg-warm); }
.more{ display:inline-block; border:1px solid var(--primary); color:var(--primary); border-radius:50%; width:58px; height:58px; line-height:58px; text-align:center; font-size:12px; letter-spacing:1px; transition:all .4s; }
.more:hover{ background:var(--primary); color:#fff; transform:rotate(360deg); }

.card{ background:#fff; border-radius:6px; border:1px solid var(--line); overflow:hidden; transition:all .35s; }
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(151,30,35,.12); border-color:var(--primary); }

/* 数据统计 */
.stats{ background:linear-gradient(120deg,var(--primary),var(--primary-dark)); }
.stats .comm_tit h2, .stats .comm_tit p{ color:#fff; }
.stats .comm_tit h2:after{ background:rgba(255,255,255,.7); }
.stats_grid{ display:flex; flex-wrap:wrap; }
.stats_grid .item{ flex:1; min-width:180px; text-align:center; color:#fff; padding:20px; position:relative; }
.stats_grid .item:not(:last-child):after{ content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:54px; background:rgba(255,255,255,.2); }
.stats_grid .num{ font-size:46px; font-weight:700; line-height:1; font-family:'DIN','Microsoft YaHei',sans-serif; }
.stats_grid .num i, .stats_grid .num em{ font-size:18px; font-style:normal; font-weight:400; margin:0 2px; }
.stats_grid .lab{ font-size:15px; opacity:.85; margin-top:12px; }

/* 分页 */
.pages{ text-align:center; margin-top:50px; }
.pages li{ display:inline-block; margin:0 5px; }
.pages li a{ display:block; min-width:38px; height:38px; line-height:38px; padding:0 12px; border:1px solid var(--line); color:#666; border-radius:4px; transition:all .3s; }
.pages li a:hover, .pages li.active a{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* 二维码 / 侧栏 */
.ewm{ text-align:center; }
.ewm img{ width:140px; height:140px; border:1px solid var(--line); }
.ewm p{ font-size:13px; color:var(--muted); margin-top:10px; }

/* 下拉 / 移动菜单占位元素 */
.drop_menu .right .ph-img{ width:100%; height:220px; border-radius:8px;
  background:linear-gradient(135deg,var(--primary-light),var(--primary-dark)); position:relative; overflow:hidden; }
.drop_menu .right .ph-img:after{ content:''; position:absolute; right:-40px; bottom:-40px; width:160px; height:160px; border:2px solid rgba(255,255,255,.18); border-radius:50%; }
.header_box .main .right li dl.show{ display:block; }
.header_box .main .right li dl dd a{ padding:10px 16px; font-size:15px; color:#666; }
.header_box .main .right li dl dd a:hover{ color:var(--primary); }

/* 二维码占位 */
.footer .qr{ width:140px; height:140px; margin:0 auto 10px; border:1px solid rgba(255,255,255,.2); border-radius:6px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.15) 0 6px, transparent 6px 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.15) 0 6px, transparent 6px 12px),
    #3a3a3a; }

/* 内页主体两侧布局补充 */
.article .main .lead{ font-size:16px; color:#666; line-height:2.1; margin-bottom:30px; }
.article .main h2{ font-size:22px; color:var(--ink); margin:34px 0 16px; position:relative; padding-left:14px; }
.article .main h2:before{ content:''; position:absolute; left:0; top:5px; width:4px; height:20px; background:var(--primary); }
.article .main p{ color:#666; line-height:2; margin-bottom:16px; }

/* =====================================================
   Footer
   ===================================================== */
.footer .top{ padding:60px 0 40px; background:#282828; color:#bbb; }
.footer .cols{ width:80%; max-width:1280px; margin:0 auto; display:flex; flex-wrap:wrap; gap:40px; }
.footer .col{ flex:1; min-width:200px; }
.footer .col.brand{ flex:1.4; }
.footer .col h4{ font-size:17px; color:#fff; margin-bottom:20px; position:relative; padding-left:14px; }
.footer .col h4:before{ content:''; position:absolute; left:0; top:4px; width:4px; height:16px; background:var(--primary); }
.footer .brand img{ height:88px; margin-bottom:18px; }
.footer .brand p{ font-size:14px; line-height:1.9; color:#aaa; }
.footer .col ul li{ margin-bottom:12px; }
.footer .col ul li a{ color:#aaa; font-size:14px; transition:all .3s; }
.footer .col ul li a:hover{ color:var(--primary-light); padding-left:6px; }
.footer .contact p{ font-size:14px; line-height:2; color:#aaa; }
.footer .contact strong{ color:#fff; font-weight:500; }
.footer .bottom{ background:#1f1f1f; text-align:center; padding:18px 0; color:#888; font-size:13px; }
.footer .bottom a{ color:#888; }
.footer .bottom a:hover{ color:var(--primary-light); }

/* =====================================================
   移动端适配（手机 / 小屏）
   ===================================================== */
@media (max-width:991px){
  .drop_menu{ display:none; } /* 移动端不启用 hover 下拉，改用抽屉菜单 */
}
@media (max-width:767px){
  .header{ height:64px; padding:0 16px; }
  .header.active{ height:56px; }
  .logo img{ height:56px; }
  .header.active .logo img{ height:46px; }
  .comm_pad{ padding:50px 0; }
  .comm_banner{ height:220px; }
  .comm_banner h1{ font-size:24px; letter-spacing:2px; margin-bottom:8px; }
  .comm_banner .sub{ font-size:13px; letter-spacing:1px; }
  .comm_tit{ margin-bottom:32px; }
  .comm_tit h2{ font-size:24px; padding-bottom:12px; }
  .comm_tit p{ font-size:13px; margin-top:10px; }
  .comm_tit2{ font-size:22px; }
  .subnav ul{ width:100%; justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .subnav li a{ padding:14px 16px; font-size:14px; white-space:nowrap; }
  .more{ width:44px; height:44px; line-height:44px; font-size:11px; }
  .pages{ margin-top:32px; }
  .pages li a{ min-width:34px; height:34px; line-height:34px; padding:0 9px; font-size:13px; }
  .footer .top{ padding:44px 0 30px; }
  .footer .cols{ flex-direction:column; gap:28px; width:92%; }
  .footer .col{ min-width:100%; }
  .footer .brand img{ height:64px; }
  .header_box{ width:86%; padding-top:76px; }
}