@charset "utf-8";
/* ==========================================================================
   yusimeng.css —— 我方样式层（第 1 版：页头 logo 尺寸 + 联盟名称）
   --------------------------------------------------------------------------
   为什么用独立文件而不改 style.css：
     平台已实测（docs/design/17 §5）：新增外部 CSS 在发布后生效。
     独立文件 ⇒ 学校原文件字节不变；回滚只需删本文件 + 删 <link>。
   命名纪律：
     · 新增类名一律 ys- 前缀
     · 本层只做增量；对模板既有选择器的覆盖，逐条注明原因
   加载位置：三张 htm 的 <head>，紧跟 media.css 之后
   ========================================================================== */

/* ---------- ① 页头 logo：限制尺寸 -----------------------------------------
   问题：模板只限宽度不限高度 —— style.css `.sitelogo img{max-width:452px}`
         没有高度约束，而 `#header .inner{height:160px}` 是固定高；
         后台上传的大尺寸 logo 因此纵向溢出 160px、压到下面的导航条。
   实测：高度 100px 合适（项目负责人 2026-10-18）。
   做法：用 max-height 而非 height —— 既不溢出、也不放大小图、不拉变形；
         width:auto 保证等比；max-width:100% 防窄屏横向溢出。
   特异性：#header .head-left img (1,1,1) 高于模板的
           `.sitelogo img` (0,1,1) 与 @media(max-width:1199px) 的
           `.sitelogo img{width:100%}`（后者会把 logo 撑到容器 100% 宽）。
   -------------------------------------------------------------------------- */
#header .head-left img {
  height: auto;
  max-height: 100px;
  width: auto;
  max-width: 100%;
}

/* ---------- ② 联盟名称 ----------------------------------------------------
   背景：模板设计里有 `.header .sitetitle`（32px 白字，在 logo 右侧），
         但模板里的那两处是**空 span**，平台侧也不填充 → 页头只有 logo 没有名称。
   做法：名称写在 htm 里、位于 `.head-left`（frag="面板01"）**之外**的兄弟位置。
         理由：凡是 frag 容器（窗口/窗口内容/面板）内部，平台都可能重写或覆盖；
         放在外面则平台的重写碰不到它（与 docs/design/10 检查项 11 同一纪律）。
   排版：白字 + Heavy 宋，与模板页头既有风格一致；
         字号用 clamp 随视口伸缩，因为联盟全名较长（18 字）。
   -------------------------------------------------------------------------- */
#header .ys-sitename {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}

/* 中文主名：字号比原版加大（18→22 / 32→38 的 clamp 区间）
   display:block 是关键 —— 窄屏时父级变 block、两个 span 会变成行内元素
   并排成一行，这里强制各占一行，才能保证英文始终在中文下方。 */
#header .ys-sitename-cn {
  display: block;
  font-weight: 700;
  font-family: 'SourceHanSerifCN-Heavy';
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 1.2;
  white-space: nowrap;
}

/* 英文副名：贴在中文下方，字号随视口缩，字距拉开让 61 字符不至于挤成一团。
   全用模板已有的白字，不加新颜色。 */
#header .ys-sitename-en {
  display: block;
  margin-top: 5px;
  font-size: clamp(10px, 0.95vw, 13px);
  line-height: 1.3;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0.88;
}

/* ---------- ③ 大屏（≥1000px）：页头排成一行 flex ---------------------------
   模板原是浮动布局：`.head-left{float:left}` + `.head-right{float:right}`，
   且 logo 用 `.sitelogo{margin-top:35px}` 这种"手工对位"来垂直居中。
   名称要贴在 logo 右侧、并与 logo 和搜索框垂直居中对齐，
   用 flex 最稳；因此这里把 `.mod` 改成 flex 行。逐条覆盖的理由：
     · .head-left  float→none + width→auto：模板在 ≤1199px 给的是 width:76%，
                   在 flex 行里会挤掉名称与搜索框
     · .head-left> *  float→none + margin-top→0：
                   子元素若仍是浮动，.head-left 高度会塌成 0（浮动不撑高），
                   align-items:center 就失去参照；margin-top:35px 是为旧版式手工对位的
     · .head-right float→none + margin-left:auto：改成 flex 后靠右对齐
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1000px) {
  #header .mod {
    display: flex;
    align-items: center;
    height: 100%;          /* 占满 #header .inner 的 160px，center 才有参照 */
  }

  #header .head-left {
    float: none;
    width: auto;
    display: flex;
    align-items: center;
  }

  #header .head-left > * {
    float: none;
    margin-top: 0;
  }

  #header .head-right {
    float: none;
    margin: 0 0 0 auto;
  }

  #header .ys-sitename {
    margin-left: 20px;
  }
}

/* ---------- ④ 页脚 logo ----------------------------------------------------
   页脚 `窗口91` 原本硬编码 `<img src="images/logo.png">`（学校 logo）；
   2026-10-18 改为 `{站点Logo}` —— 与页头**同源**，由平台后台统一管理。
   平台给的 logo 尺寸可能偏大，且模板只对页头做了约束，所以这里补一道限高。
   -------------------------------------------------------------------------- */
#footer .foot-left .sitelogo img,
#footer .foot-left img {
  height: auto;
  max-height: 64px;
  width: auto;
  max-width: 100%;
}

/* ---------- ⑤ 响应式 ------------------------------------------------------
   模板的断点：1199 / 999 / 767 / 479。
   ≤999px 时模板自己把页头改成"居中堆叠"（`.head-left{float:none;width:100%;
   text-align:center}`、`.sitelogo{float:none;margin-top:0}`），
   所以这一档要把 flex 撤回块级，让名称跟到 logo 下方居中 —— 与模板意图一致。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 999px) {
  #header .mod {
    display: block;
    height: auto;
  }

  #header .ys-sitename {
    display: block;
    margin: 10px 0 0;
    text-align: center;
  }

  #header .ys-sitename-cn {
    white-space: normal;
    font-size: 22px;
  }

  #header .ys-sitename-en {
    white-space: normal;
    font-size: 11px;
  }

  #header .head-left img {
    max-height: 80px;
  }
}

@media screen and (max-width: 767px) {
  #header .ys-sitename-cn {
    font-size: 18px;
  }

  #header .ys-sitename-en {
    font-size: 10px;
  }

  #header .head-left img {
    max-height: 64px;
  }
}

@media screen and (max-width: 479px) {
  #header .ys-sitename-cn {
    font-size: 16px;
  }

  #header .head-left img {
    max-height: 56px;
  }
}

/* ---------- ⑦ 首页·联盟成员单位（simpleNews 窗口7，数据源栏目 /联盟成员）---
   结构（见 main.htm 同名注释）：
     .ys-mem-track   静态外壳，动画载体，不含 frag
       .ys-mem-group 窗口7，**会被前端脚本整体复制一份**
         .ys-mem-list  循环模板 ← 平台按文章条数重复这一段
         .ys-mem-item  每条 = 一个成员单位

   滚动原理：轨道里是**两组完全相同**的内容，整体左移 50% 正好等于一组宽度。
   间距必须这样拆：纵向 gap 只出现在 .ys-mem-list 内部，组与组之间靠
   .ys-mem-group 的 padding-right 补 —— 这样 -50% 才严密对齐，接缝不抖。
   时长由 main.htm 的小脚本按实测宽度写入（恒定 50px/秒），此处 42s 只是兜底。
   -------------------------------------------------------------------------- */

/* 与 #container-2 同一浅粉底、同一上下留白，接在 main4 之后形成白/粉交替 */
#container-5 {
  background: #eef8ff;
}

#container-5 .inner {
  padding: 60px 0 62px;
}

.ys-mem-marquee {
  overflow: hidden;
  padding: 18px 0 6px;
  /* 两端淡出，避免卡片在边缘硬切；IE 不支持 mask → 降级为无淡出，不影响功能 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ys-mem-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: ys-mem-scroll 42s linear infinite;
}

.ys-mem-marquee:hover .ys-mem-track {
  animation-play-state: paused;
}

@keyframes ys-mem-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 一组 = 一屏内容；padding-right 就是"组与组之间"的那个间距 */
.ys-mem-group {
  flex: 0 0 auto;
  padding-right: 20px;
}

.ys-mem-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
}

.ys-mem-item {
  flex: 0 0 auto;
}

/* 卡片样式挂在 li 上（不能用 a 包：平台的 {标题} 自己就是 <a>，套一层会嵌套，
   浏览器会把内层 a 弹到卡片外面，它自带的边框就成了“logo 与名称之间的分割线”） */
.ys-mem-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 176px;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid #d8ecff;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.ys-mem-item:hover {
  border-color: #1c9bff;
  box-shadow: 0 6px 18px rgba(13, 139, 242, .12);
}

/* logo：不加边框、不垫底色，真 logo 直接 object-fit:contain 居中，不裁切不变形。
   尺寸由后台文章缩略图决定，这里只约束“最大不超过 64×64”。 */
.ys-mem-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}

.ys-mem-logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 文章没传缩略图时，别留一个破图标 */
.ys-mem-logo img[src=""],
.ys-mem-logo img:not([src]) {
  display: none;
}

.ys-mem-name {
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

/* 单位名是平台生成的 <a>，颜色跟着卡片走，不额外画线、不加下划线 */
.ys-mem-name a {
  color: #424242;
  text-decoration: none;
}

.ys-mem-item:hover .ys-mem-name a {
  color: #0d8bf2;
}

@media screen and (max-width: 767px) {
  .ys-mem-item { min-width: 140px; padding: 18px 14px; gap: 10px; }
  .ys-mem-logo { width: 52px; height: 52px; }
  .ys-mem-name { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ys-mem-track { animation: none; }
}

/* ---------- ⑧ 修复：平台图片播放器插件的通用 #header 规则 -------------------
   现象：首页正常，栏目页 / 详情页的页头塌成一条，联盟名称被甩到右上角，
         导航与 logo 叠在一起。
   根因：/_js/_portletPlugs/imagePlayer/jQueryftxhdp/style/css.css 里有 4 条裸 ID 规则：
           #header{height:46px;line-height:46px;border-bottom:1px solid #383838;color:#fff}
           #header span{position:absolute;right:10px;top:0;color:#9a9a9a;font-size:12px}
           #header h1{background:url(news.png) no-repeat 50px center;padding-left:163px}
           #header span a{color:#9a9a9a;margin:0 3px}
         它是给播放器自带的迷你页头用的，却直接命中我们的 #header。
         该 CSS 只在含图片播放器的页面加载 → 首页不塌、内页塌（实测
         #header clientHeight=46 / scrollHeight=160，禁用该 CSS 后立刻回到 160）。
   修法：用 .wrapper#header（特异性 1,1,0）压过 #header（1,0,0），逐条还原；
         这样即使插件 CSS 后加载、或平台改加载顺序，也压得住。
   -------------------------------------------------------------------------- */
.wrapper#header {
  height: auto;
  line-height: normal;
  border-bottom: 0;
  color: #fff;
}

.wrapper#header h1 {
  background: none;
  padding-left: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* 页头里的 span 不许被绝对定位（否则联盟名称会飞到右上角）。
   ⚠ 这里**不要**写 font-size —— 本规则特异性 1,1,1 高于 ② 段的
   #header .ys-sitename-cn / -en（1,1,0），一旦写 font-size 就会把
   名称字号压回继承值（16px），表现为"页头字体又变小了"。 */
.wrapper#header span {
  position: static;
  right: auto;
  top: auto;
  color: inherit;
}

.wrapper#header span a {
  color: inherit;
  margin: 0;
}


/* ---------- ⑨ 首页·通知公告 + 案例展示 并排两栏 ---------------
   甲方在通知公告右侧要一块「案例展示」，样式与通知公告完全一致（日期块卡片），
   两块左右并排、各占一半。
   做法：把 #container-2 的 .mod 拆成 .ml / .mr 两栏（模板 main1 / main4 本来
         就是这个两栏写法，这里沿用），左栏窗口41、右栏窗口8。
   原来一排 3 个（.rili2 .news 宽度 31.6%），收进 49% 后改 2 个，
   否则每张卡只剩 246px、日期块就占 80px，正文挤成一条。
   数据源：左上 /通知公告，右上 /案例展示（案例是 PDF 文章，直接复用列表结构）。
   -------------------------------------------------------------------------- */
/* 两栏 1:1。高度不用管 —— 两边同样是 rili2 卡片、同样 c3=2（一行两张），
   卡片又都锁 206px，所以自然齐平。 */
@media screen and (min-width: 1000px) {
  /* 主导航自适应：不管后台有多少个一级栏目，都单行平分 .inner 的宽度，
     字号在 15~20px 之间随视口缩放 —— 以后加/删栏目不用再改 CSS。
     实测：9 项 / 11 项 在 1440、1200、1000 三档都是单行；
     12 项以内每项仍有 ≥100px，足够放 5 个字。
     （.wp-menu 原本是 float 布局 + a 上写死 padding:0 48px，
       项一多就撑过 .inner 的 1200px → 换行、页头变高。） */
  .nav .wp-menu {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0;
  }

  .nav .wp-menu .menu-item {
    float: none;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .nav .wp-menu .menu-item a.menu-link {
    display: block;
    padding: 0 6px;
    font-size: clamp(15px, 1.35vw, 20px);
    white-space: nowrap;
    text-align: center;
  }
}

#container-2 .ml {
  float: left;
  width: 49%;
}

#container-2 .mr {
  float: right;
  width: 49%;
}

/* 通知公告：在 49% 的栏里仍是两列（每张 48.5%），
   单列整宽会让这一栏变成两行、整条比案例展示高出一大截。 */
#container-2 .rili2 .news_list li.news {
  width: 48.5%;
}

#container-2 .rili2 .news_list li.news.n1,
#container-2 .rili2 .news_list li.news.n3,
#container-2 .rili2 .news_list li.news.n5 {
  padding-left: 0;
}

#container-2 .rili2 .news_list li.news.n2,
#container-2 .rili2 .news_list li.news.n4 {
  padding-left: 2.5%;
}

/* 案例展示（窗口8）与通知公告用同一套 rili2 卡片，
   卡片正文区高度锁 206px（style.css 里只给 .post-41 写了这条，这里统一给两栏），
   这样「简介」为空（PDF 类文章常见）时两栏也不会一高一低。 */
#container-2 .rili2 .news_list li.news .news_wz .news_con {
  height: 206px;
  box-sizing: border-box;
}

/* 案例展示栏的 .con 要跟通知公告一样有 44px 上留白 ——
   style.css 只给 .post-41 写了这条，右栏窗口8 不吃，
   不补的话右栏会比左栏高出一张卡的位置（实测差 38px）。 */
#container-2 .mr .con.rili2 {
  padding-top: 44px;
}

@media screen and (max-width: 999px) {
  #container-2 .ml,
  #container-2 .mr {
    float: none;
    width: 100%;
  }

  #container-2 .mr {
    margin-top: 30px;
  }

  #container-2 .mr .con.rili2 {
    padding: 8px 0;
  }

}

@media screen and (max-width: 767px) {
  #container-2 .rili2 .news_list li.news {
    width: 100%;
    padding-left: 0;
  }

  /* 手机上单列整宽，卡片本来就不挤了，206px 会留一大片白 */
  #container-2 .rili2 .news_list li.news .news_wz .news_con {
    height: auto;
  }
}