@charset "utf-8";
/* CSS Document — 生命与安全教育网 · 清爽蓝调主题层
   说明：本文件已接管原 ghostyle.css 中用到的原子类（见“兼容层”），
   因此 mate.php 已不再引入 ghostyle.css，可安全删除该依赖。 */

@import "../libs/bootstrap/bootstrap.css";

/* =========================================================
   设计令牌（清爽蓝调）
   ========================================================= */
:root{
  --brand:#002A70;          /* 主深蓝（权威 / 信任） */
  --brand-bright:#1E56B0;   /* 提亮蓝：渐变与悬停过渡，避免深蓝过重 */
  --brand-deep:#001B4D;     /* 更深蓝：渐变底部 / 页脚 */
  --brand-soft:#EDF1FA;     /* 浅蓝底 */
  --accent:#00B4D8;         /* 青蓝点缀（生命 / 安全清新感） */
  --accent-deep:#0093B0;    /* 青蓝深：按钮悬停 */
  --accent-soft:#E2F4F9;
  --ink:#1E2A3A;
  --ink-2:#6B7890;
  --line:#E6EAF2;
  --bg:#F6F8FC;
  --surface:#FFFFFF;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,42,112,.10);
  --shadow-sm:0 3px 14px rgba(0,42,112,.07);
}

/* =========================================================
   原子类兼容层（原 ghostyle.css 中本项目实际用到的类，已内化）
   作用：移除 ghostyle.css 依赖后，PHP 结构无需改动，样式不丢。
   ========================================================= */
.bg-F1{background-color:#F4F8FD;}
.bg-F7{background-color:#F6F8FC;}

/* 首页 4 张快捷卡：以深蓝 #002A70 为主，搭配提亮蓝 / 青蓝 / 翠绿点缀 */
.bg-seagreen{background:linear-gradient(135deg,#1E56B0,#002A70);}
.bg-royalblue{background:linear-gradient(135deg,#00B4D8,#1E56B0);}
.bg-peru{background:linear-gradient(135deg,#2BD9B0,#00A883);}
.bg-palevioletred{background:linear-gradient(135deg,#3D6FD4,#002A70);}
.bg-seagreen,.bg-royalblue,.bg-peru,.bg-palevioletred{color:#fff;}

/* 文字色：统一换为清爽冷调 */
.color-333{color:var(--ink);}
.color-666{color:#52606D;}
.color-999{color:var(--ink-2);}

/* flex 对齐工具 */
.d-flex-center-center{display:flex;align-items:center;justify-content:center;}
.d-flex-column-center-center{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.d-flex-column-center-start{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
.d-flex-row-center-between{display:flex;flex-direction:row;align-items:center;justify-content:space-between;}
.d-flex-row-center-start{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;}

/* 字号 */
.font-12{font-size:12px;}
.font-13{font-size:13px;}
.font-14{font-size:14px;}
.font-15{font-size:15px;}
.font-16{font-size:16px;}
.font-17{font-size:17px;}
.font-18{font-size:18px;}
.font-24{font-size:24px;}
.font-montserrat{font-family:'Montserrat',"Microsoft YaHei","PingFang SC",sans-serif;}

/* 文字溢出省略 */
.text-overflow-single-line{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.text-underline{text-decoration:underline;}

.border-radius-5px{border-radius:5px;}

/* =========================================================
   基础
   ========================================================= */
*{font-family:"Microsoft YaHei","PingFang SC",Tahoma,Helvetica,Arial,sans-serif;}
body{background:var(--bg);color:var(--ink);}
a{text-decoration:none;transition:color .15s;}
a:hover{text-decoration:none;}

a.more-white{border-bottom:1px solid #FFF;}
a.more-white:hover{border-bottom:1px solid #666;}

/* 卡片统一精致化 */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s;overflow:hidden;}
.card:hover{box-shadow:var(--shadow);}

/* =========================================================
   顶栏 / 导航
   ========================================================= */
.my-bgcolor{background-color:var(--brand-deep);}
.my-bgcolor-gradient{background-image:linear-gradient(90deg,#001B4D 0%,#002A70 55%,#1E56B0 100%);}

/* =========================================================
   顶栏（最上方渐变蓝横条）—— 袖珍化重设计
   ========================================================= */
.topbar{width:100%;color:#EAF3FC;font-size:12px;}
.topbar .topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:34px;gap:12px;}
.topbar-welcome{color:#EAF3FC;font-size:12px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.topbar-actions{display:flex;align-items:center;gap:10px;}
.topbar-link{color:#DCEAFB;font-size:12px;white-space:nowrap;transition:color .15s;}
.topbar-link:hover{color:#FFFFFF;text-decoration:none;}
.topbar-sep{color:rgba(255,255,255,.45);font-size:12px;}
.topbar-search{display:flex;align-items:center;}
.topbar-search input{height:24px;width:130px;font-size:12px;line-height:24px;border:none;outline:none;border-radius:12px 0 0 12px;padding:0 12px;background:rgba(255,255,255,.92);color:#26333F;}
.topbar-search input::placeholder{color:#9AA7B4;}
.topbar-search button{height:24px;font-size:12px;border:none;cursor:pointer;padding:0 14px;border-radius:0 12px 12px 0;background:var(--accent);color:#fff;transition:background .15s;}
.topbar-search button:hover{background:var(--accent-deep);}

.header{position:relative;z-index:10;}
.header::before{content:"";position:absolute;width:50%;left:45%;height:100%;background-image:url(../images/headbg.png);background-position:right center;background-repeat:no-repeat;z-index:-1;}

/* 导航条 */
#nav li.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;}
#nav li a.nav-link{color:var(--ink);font-size:18px;font-weight:700;height:auto;padding-bottom:6px;transition:color .2s;}
#nav li:hover a.nav-link{color:var(--brand);}
#nav li span.underline{width:0;height:3px;background:var(--brand);border-radius:3px;transition:.2s;margin:0 auto;}
#nav li span.over{width:30%;height:3px;background:var(--accent);border-radius:3px;}
#nav li:hover span.underline{width:30%;}

#foot ul.dropdown-menu,#nav ul.dropdown-menu{min-width:120px;width:auto;box-shadow:var(--shadow-sm);border:1px solid var(--line);border-radius:10px;overflow:hidden;padding:4px;}
#foot ul.dropdown-menu a.dropdown-item,#nav ul.dropdown-menu a.dropdown-item{font-size:15px;padding:8px 14px;border-radius:6px;color:var(--ink);text-align:center;}
#foot ul.dropdown-menu a.dropdown-item:hover,#nav ul.dropdown-menu a.dropdown-item:hover{background-color:var(--brand);color:#FFF;}

/* =========================================================
   PC 导航下拉：由“点击展开”改为“悬停（hover）自动展开”
   仅作用于 ≥992px 的 PC 导航（header.php 的 #nav）。
   已移除触发链接的 data-bs-toggle，避免与 Bootstrap 点击 toggle 冲突；
   所有链接地址 / 文字 / 子菜单结构保持不变。
   ========================================================= */
@media (min-width: 992px){
  /* 触发容器作为定位基准 */
  #nav li.nav-item.dropdown{position:relative;}

  /* 默认隐藏（用透明度+可见性实现平滑过渡，避免 display 无法过渡的问题） */
  #nav li.nav-item.dropdown > .dropdown-menu{
    position:absolute;
    top:100%;
    left:50%;
    display:block;
    margin-top:0;
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:1000;
  }

  /* 悬停或键盘聚焦时展开（保持水平居中于导航文字） */
  #nav li.nav-item.dropdown:hover > .dropdown-menu,
  #nav li.nav-item.dropdown:focus-within > .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
  }

  /* 悬停桥接：覆盖触发链接与菜单之间的缝隙，防止鼠标下移时 hover 中断 */
  #nav li.nav-item.dropdown > .dropdown-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-14px;
    height:14px;
  }
}

/* =========================================================
   首页轮播
   ========================================================= */
#carouselPPT img{height:auto;width:100%;object-fit:cover;}
#carouselPPT .carousel-caption{width:100%;height:46px;background-color:rgba(0,42,112,.55);display:flex;align-items:center;justify-content:center;bottom:0;left:0;}
#carouselPPT span.text-overflow-single-line{width:90%;font-size:17px;color:#fff;}

/* 快捷卡（首页 4 张）悬停增强 */
.card a.bg-seagreen,.card a.bg-royalblue,.card a.bg-peru,.card a.bg-palevioletred{display:block;border-radius:var(--radius);transition:filter .2s,box-shadow .2s;}
.card a.bg-seagreen:hover,.card a.bg-royalblue:hover,.card a.bg-peru:hover,.card a.bg-palevioletred:hover{filter:brightness(1.05);box-shadow:var(--shadow);}

/* =========================================================
   首页新闻模块（全景扫描 / body-03-news）—— 重设计 + 首屏稳定
   根因修复：原先由 frame-size.js 在 $(document).ready 里按右侧 banner.png
   的实时高/宽给 #left-frame 设高宽；图片首屏未加载时高为 0，导致左区被压成
   0 高 / 1480px 宽而错乱，二次刷新(缓存)后才正常。现已移除该脚本，改用纯 CSS
   栅格 + 轮播固定比例，首屏即结构稳定；并整体焕新视觉。PHP 查询逻辑与链接文字未动。
   ========================================================= */
/* 轮播：固定 16:10 比例，图片加载前即预留高度，杜绝首屏塌陷/位移 */
#news-rota #carouselPPT.news-carousel{border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);background:var(--brand-soft);}
#news-rota #carouselPPT .carousel-item{aspect-ratio:16/10;}
#news-rota #carouselPPT .carousel-item img{width:100%;height:100%;object-fit:cover;}
#news-rota #carouselPPT .carousel-caption{height:auto;padding:14px 16px;background:linear-gradient(0deg,rgba(0,27,77,.82) 0%,rgba(0,42,112,.12) 100%);justify-content:flex-end;}
#news-rota #carouselPPT .carousel-caption span{width:100%;font-size:16px;}

/* 列表列分隔：窄屏顶部描边，≥992px 左侧描边 */
#news-rota .news-list-col{border-top:1px solid var(--line);}
@media (min-width:992px){
  #news-rota .news-list-col{border-top:none;border-left:1px solid var(--line);}
}

/* 列表项：青蓝圆点 + 悬停浅蓝底与左侧强调条 */
#news-rota .news-list .col > a{position:relative;padding:12px 14px;border-radius:10px;transition:background .15s,box-shadow .15s;}
#news-rota .news-list .col > a:hover{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand);}
#news-rota .news-list .col > a .color-333{position:relative;padding-left:16px;}
#news-rota .news-list .col > a .color-333::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--accent);transition:background .15s;}
#news-rota .news-list .col > a:hover .color-333::before{background:var(--brand);}
#news-rota .news-list .col > a:hover .color-333{color:var(--brand);}
#news-rota .news-list .col > a:hover .color-999{color:var(--brand);}

/* MORE 胶囊按钮 */
#news-rota a.news-more{border:1px solid var(--line);border-radius:20px;padding:3px 14px;color:var(--brand)!important;font-weight:700;transition:.18s;}
#news-rota a.news-more:hover{background:var(--brand);color:#fff!important;border-color:var(--brand);box-shadow:var(--shadow-sm);}

/* 右侧 banner：圆角封面卡，随左区等高铺满 */
#news-rota #right-frame{display:flex;}
#news-rota #right-frame .news-banner-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;box-shadow:var(--shadow-sm);}

/* =========================================================
   栏目标题
   ========================================================= */
.my-textcolor{color:var(--brand-deep)!important;}
.my-text-underline{border-bottom:2px solid var(--brand)!important;}

.col-name{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.col-name span{display:block;}
.col-name span.my-textcolor{font-size:22px;font-weight:800;color:var(--brand-deep)!important;line-height:1.3;}
.col-name span.underline{width:90px;height:5px;background:var(--brand);margin-top:2px;border-radius:3px;}

.col-name-box{background-repeat:no-repeat;background-position:left center;padding-left:34px;font-size:17px;font-weight:800;color:var(--brand-deep);display:inline-block;}

.col-head{border-bottom:2px solid var(--brand)!important;margin-bottom:10px;padding-bottom:6px;}
.col-head .col-name-box{font-size:18px;}

/* =========================================================
   文字列表
   ========================================================= */
.col-body .d-flex-row-center-between{border-bottom:1px dashed var(--line);padding-top:11px;padding-bottom:10px;transition:background .15s;}
.col-body .d-flex-row-center-between:hover{background:var(--brand-soft);}
.col-body a{color:var(--ink);transition:color .15s;}
.col-body a:hover{color:var(--brand);}
.col-body a:hover .color-333{color:var(--brand);}
.col-body a:hover .color-999{color:var(--brand);}

/* =========================================================
   领导人滚动
   ========================================================= */
.scroll-image:hover .card{box-shadow:0 6px 18px rgba(0,42,112,.15);}

/* =========================================================
   友链
   ========================================================= */
#flink a{display:block;border:1px solid var(--line);border-radius:8px;transition:.15s;padding:6px;}
#flink a:hover{border:1px solid var(--brand);color:var(--brand);}

/* =========================================================
   页脚
   ========================================================= */
footer{background:linear-gradient(180deg,#002A70 0%,#001B4D 100%)!important;color:#E6EEF8;border-top:4px solid var(--accent)!important;}
footer #fangwen{box-shadow:0 -1px 2px rgba(0,0,0,.08);}
footer .f_nav{background:rgba(255,255,255,.10);border-radius:10px;padding:6px 0;}
footer .f_nav .f_uline{width:0;height:3px;background:var(--accent);margin-top:5px;border-radius:3px;transition:.2s;}
footer .f_nav .f_over{width:30%;height:3px;background:var(--accent);margin-top:5px;border-radius:3px;}
footer .f_nav a:hover .f_uline{width:30%;background:var(--accent);}
#copyright{color:#EAF3FC!important;}
#copyright .color-999{color:#D8E8F7!important;}
#copyright a{color:#D8E8F7!important;}
#copyright a:hover{color:#7FE3DA!important;}
footer .f_nav a div.color-999{color:#D8E8F7!important;}

/* =========================================================
   二级页面正文
   ========================================================= */
#field{line-height:200%;color:var(--ink);font-size:15px;text-align:justify;}
#field img{padding:.25rem;background-color:var(--surface);border:1px solid var(--line);border-radius:8px;max-width:100%;height:auto;margin:0 auto;display:block!important;}
#field a{color:var(--brand);}
#field a:hover{border-bottom:1px solid var(--brand);}
#field p{text-indent:2em;}

/* =========================================================
   二级页面侧栏
   ========================================================= */
#aside .aside_span:hover{color:var(--brand);}
.aside,.sidebar,.side-box{border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;background:var(--surface);}
.aside .a-head,.side-head{background:var(--brand-deep);color:#fff;padding:16px;text-align:center;font-size:18px;font-weight:800;}
.aside .a-list a,.side-list a{display:block;padding:12px 18px;color:var(--ink);border-bottom:1px solid var(--line);transition:.15s;}
.aside .a-list a:hover,.side-list a:hover{color:var(--brand);background:var(--brand-soft);}

/* =========================================================
   移动端画外布
   ========================================================= */
#nav-md{background-repeat:no-repeat;background-position:center;position:relative;}
#nav-md button{position:absolute;top:10px;right:0;color:#FFF;}

/* =========================================================
   内容卡片（内页 container 内的白卡）统一精致化
   仅命中 .container-xl 内部，不影响页头 .bg-white
   ========================================================= */
.container-xl .bg-white{border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;background:var(--surface);}