/* index.css —— 让 new.html 的通知公告/学术动态/招生就业三栏与 index.html 显示一模一样
 * 约束：不修改 new.html 的 HTML，仅通过 CSS 复刻视觉。
 * 参考测量值（视口 1170px 下 index.html 的真实渲染）：
 *   - .container-fluid.d-col-pd 宽 100%，padding 11.25px
 *   - 三个 .col-lg-4 严格等分，每列宽 33.333%，gutter 20.25px
 *   - .areaTitle 高 40px，margin:40px 0 20px，左右两端 flex 对齐
 *   - 圆形图标 40×40 #3A5E87，内部 22×22 白 SVG，阴影 0 0 5px rgba(0,0,0,.1)
 *   - 主标题 24px #3A5E87 line-height:40px；英文 12px #BBB 紧跟在中文后
 *   - ">>" 更多按钮 14px #265ca3 line-height:40px
 *   - 通知/学术列表：li 高 42px line-height:42px，无分隔线，无 padding；
 *       a 为 inline，内含 p(左侧文本省略) + span.float-end(右侧日期 15px #000)
 *   - 学生活动（被"招生就业"替代）：412×300 卡片轮播，每张渐变背景，文字白色 15px/24px padding 10px
 */

/* ====== 全局基线（与 index 一致） ====== */
/* 全站流式布局：最小 375px（手机尺寸），窄于 375px 才出横向滚动条 */
html, body {
    min-width: 375px;
}
.main {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding-bottom: 15px;
    background-color: #f0f4f8;
    background-image: linear-gradient(135deg, #f0f4f8 0%, #e8edf5 100%);
    font-family: "Microsoft YaHei", sans-serif;
    font-size: 15px;
    color: #333;
}
.main::before,
.main::after {
    /* 复刻 index 中包裹三栏的两层 section+div 的白底渐变效果 */
    content: "";
    display: block;
}
.main.w1080 {
    /* 注意：new.html 中 .main 与 .w1080 是同一个 div（class="main w1080"），必须用无空格选择器。
       布局方式：flex + wrap —— 学院要闻区整行（basis 100%），
       mainLeft 占 1/3，mainRight 占 2/3（内部再 flex 两等分） */
    width: 100%;
    max-width: 1500px; /* 内容最宽 1500px，与 mainCenter / 图片新闻区对齐；窄窗口时随视口收缩 */
    box-sizing: border-box;
    padding: 0; /* 保持与此前渲染一致（内容区即 1500 全宽，三栏按 1/3、2/3 分） */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    /* align-items 默认 stretch：mainLeft 固定 444px 高，mainRight 自动等高对齐 */
    background-image: linear-gradient(135deg, rgba(255,255,255,1), rgba(240,244,248,0.89) 20%, rgba(240,244,248,0.89) 95%, rgba(255,255,255,1) 100%);
}

/* ====== 学院要闻：整行在上（左侧大图 + 右侧标题列表横排），下方栅格不变 ====== */
.mainCenter {
    /* flex 布局：整行（basis 100%），流式宽度（最大 1500px 居中，窄窗口随视口收缩） */
    flex: 0 0 100%;
    width: 100%;
    max-width: 1500px;
    box-sizing: border-box;
    margin: 0 auto 10px; /* 居中 */
}
.mainCenter .newsTop {
    flex: 0 0 50%;
    min-width: 375px;
    aspect-ratio: 1000 / 618;
    position: relative; /* 作为 .title 底部叠加定位的基准 */
    overflow: hidden;
}
.mainCenter .newsTop .pic {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #eef1f5; /* 图片未加载时的占位底色 */
}
.mainCenter .newsTop .pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 铺满容器，等比缩放裁切不变形 */
}
/* 标题叠加在图片最底部，白色字 + 底部渐变保证可读性 */
.mainCenter .newsTop .title {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    padding: 22px 12px 8px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
    box-sizing: border-box;
}
.mainCenter .newsTop .title a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}
.mainCenter .newsTop .title a:hover {
    color: #f60;
}
/* .news 用 flex 两栏：左图 50% + 右列表占剩余宽度，column-gap 提供间距，无需清浮动。
   注意 .indexTit 也在 .news 里，用 wrap + 整行 basis 让它独占第一行 */
.mainCenter .news {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 30px; /* 行间距 0（由 indexTit 自身 margin 提供），列间距 30px */
}
.mainCenter .news > .indexTit {
    flex: 0 0 100%;
}
/* 右侧标题列表：与通知/学术列表同一行高节奏；HTML 中日期在前，用 flex order 挪到行尾 */
.mainCenter .news > ul {
    flex: 1;
    min-width: 0; /* 允许收缩，标题省略号生效的前提 */
    margin: 0;
    padding: 0;
    list-style: none;
}
.mainCenter .news > ul > li {
    display: flex;
    align-items: center;
    height: 56px;
    line-height: 56px;
    list-style: none;
    padding: 0;
    margin: 0 0 10px; /* 底部外边距 10px */
    border-bottom: 1px solid lightgrey; /* 底部 1px 分隔线 */
}
.mainCenter .news > ul > li .date {
    order: 2;
    flex: none;
    margin-left: 12px;
    font-size: 13px;
    color: #999;
}
.mainCenter .news > ul > li > a {
    order: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    color: #333;
    text-decoration: none;
}
.mainCenter .news > ul > li > a:hover {
    font-weight: bold;
}
/* 三栏布局：外层 flex（wrap）由 .main.w1080 承担 —— mainLeft 占 1/3（通知公告），
   mainRight 占 2/3（内部再 flex 两等分，各 1/3）。容器自身不带 padding，
   padding 落在每个 .notice 上，确保三栏内容宽度完全一致 */
.mainLeft,
.mainRight {
    box-sizing: border-box;
    min-width: 0; /* flex 子项允许收缩，内部省略号才能生效（抵消 nowrap 长标题的 min-content 撑宽） */
    padding: 0;
    margin: 0;
}
.mainLeft  { flex: 0 0 33.3333%; display: flex; height: 444px; }
.mainRight {
    flex: 0 0 66.6667%;
    display: flex; /* 学术动态 + 招生就业 各占一半 */
}
.mainLeft > .notice,
.mainRight > .notice {
    box-sizing: border-box;
    padding: 0 20px;
    display: flow-root; /* BFC：阻止 .indexTit 的 margin-top 折叠穿过，保证 notice 盒顶与容器顶对齐 */
}
.mainLeft > .notice { flex: 1 1 100%; min-width: 0; }
.mainRight > .notice { flex: 1 1 50%; min-width: 0; }

/* 隐藏专题链接区（index 无该栏目）与旧模板 notice 图片 */
.special,
.noticeImg {
    display: none !important;
}

/* ====== 栏目标题栏（.indexTit 复刻 .areaTitle） ====== */
.indexTit {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    margin: 40px 0 20px 0;
    padding: 0;
    overflow: visible;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
/* 左侧图标+文字区域 */
.indexTit h2.fl {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-size: 24px;
    color: #3A5E87;
    line-height: 40px;
    white-space: nowrap;
    position: static;
}
/* 圆形图标（用 ::before 伪元素做 40×40 圆） */
.indexTit h2::before {
    content: "";
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    border-radius: 50%;
    background-color: #3A5E87;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
/* 中文文字 */
.indexTit h2 {
    font-size: 24px;
    color: #3A5E87;
    font-weight: 400;
}
/* 英文副标题（new.html 没有 HTML 节点，用 ::after 注入；与 index 视觉一致 12px #BBB，紧跟中文 15px 间距通过 margin-left 控制） */
.indexTit h2::after {
    content: "";
    padding-left: 0;
    margin-left: 15px;
    font-size: 12px;
    color: #BBBBBB;
    font-weight: 400;
    text-transform: none; /* index 原英文保留原文大小写（Academic Trend / Student Activities），不全大写 */
    white-space: nowrap;
    line-height: 40px;
}

/* 各栏目图标（白色 SVG，data-uri 直接取自 index.html 中 svg path） */
/* 通知公告：铃铛 */
.mainLeft .notice .indexTit h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}
.mainLeft .notice .indexTit h2::after { content: "/ NOTICES AND ANNOUNCEMENTS"; }

/* 学术动态：折线 */
.mainRight > .notice:not(.obtain) .indexTit h2::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 18 12 15 21 9 3 6 12 2 12'/%3E%3C/svg%3E");
}
.mainRight > .notice:not(.obtain) .indexTit h2::after { content: "/ Academic Trend"; }

/* 招生就业：使用"人形/活动"图标（即 index 学生活动的图标），英文替换为招生就业对应 */
.mainRight .notice.obtain .indexTit h2::before {
    /* 使用 index 中学生活动栏的活动人形图标（简洁的用户群体 SVG） */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}
.mainRight .notice.obtain .indexTit h2::after { content: "/ Enrollment and Employment"; text-transform: uppercase; }

/* "更多"链接（>>） */
.indexTit .more.fr {
    display: block;
    font-size: 14px;
    color: #265ca3;
    line-height: 40px;
    text-decoration: none;
    margin-left: 15px;
}
.indexTit .more:hover { color: #265ca3; font-weight: normal; }
/* 清除 .more 里的 "+"：把 font-size 设为 0 再用 ::after 写 ">>" */
.indexTit .more {
    font-size: 0;
    line-height: 40px;
}
.indexTit .more::after {
    content: ">>";
    font-size: 14px;
    color: #265ca3;
}

/* ====== 通知公告 / 学术动态 列表（复刻 .news li + p + span.float-end 结构） ====== */
/* new.html 的通知/学术列表 li 里只有 <a>文字</a>，没有 <p> 也没有日期 <span>。
   为和 index 视觉一致，需要把 <a> 渲染成 block、单行省略、占满整行（不给日期留位，因为 HTML 里没日期）。
   index 的通知/学术列表实际每行是：li(42px) > a(inline) > p(左 322px 文本) + span.float-end(右 83px 日期)。
   由于 new.html 没有日期，让 a 直接占满整行，42px，单行省略，颜色 #333 15px，无分隔线。 */
.mainLeft .notice ul,
.mainRight > .notice:not(.obtain) ul {
    margin: 0 0 30px 0;
    padding: 0;
    list-style: none;
}
.mainLeft .notice ul li,
.mainRight > .notice:not(.obtain) ul li {
    height: 42px;
    line-height: 42px;
    list-style: none;
    border-bottom: none;
    padding: 0;
    margin: 0;
}
.mainLeft .notice ul li a,
.mainRight > .notice:not(.obtain) ul li a {
    display: block;
    width: 100%;
    height: 42px;
    line-height: 42px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    color: #333333 !important;
    font-weight: 400 !important;
    text-decoration: none;
    padding: 0;
}
.mainLeft .notice ul li a:hover,
.mainRight > .notice:not(.obtain) ul li a:hover {
    color: #333333 !important;
    font-weight: bold !important;
}
/* 清除 new.html 通知公告 li 内 a 上的内联 color:#f70000 / font-weight:bold 样式（index 里没有置顶红粗） */
.mainLeft .notice ul li a[style*="color:#f70000"],
.mainLeft .notice ul li a[style*="font-weight:bold"],
.mainRight .notice ul li a[style*="font-weight:bold"] {
    color: #333 !important;
    font-weight: 400 !important;
}

/* ====== 招生就业栏：复刻 index "学生活动" 彩色渐变卡轮播样式 ======
   new.html 中 .notice.obtain > ul > li*6 是文字列表。
   策略：把 ul 变成 412×300 的轮播容器（relative、overflow:hidden），
         把 li 变成 absolute 全幅卡片（不同渐变），a 变成白色文字块；
         用 CSS @keyframes 自动切换，不依赖 JS，效果逼近 SuperSlide 的 fold 切换。
*/
.mainRight .notice.obtain {
    position: relative;
}
.mainRight .notice.obtain ul {
    position: relative;
    width: 100%;
    height: 300px;
    margin: 0 0 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}
.mainRight .notice.obtain ul li {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 300px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    opacity: 0;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
/* 6 张卡片：每个 li 用独立 keyframes 段，在 30s 周期内各自占据 5s 显示窗口（淡入 0.5s + 停留 4s + 淡出 0.5s） */
.mainRight .notice.obtain ul li:nth-child(1) { background-image: linear-gradient(135deg, #265ca3, #4a90d9); animation-name: slide1; }
.mainRight .notice.obtain ul li:nth-child(2) { background-image: linear-gradient(135deg, #2d7d46, #4caf50); animation-name: slide2; }
.mainRight .notice.obtain ul li:nth-child(3) { background-image: linear-gradient(135deg, #b36b00, #ff9800); animation-name: slide3; }
.mainRight .notice.obtain ul li:nth-child(4) { background-image: linear-gradient(135deg, #7b1fa2, #ab47bc); animation-name: slide4; }
.mainRight .notice.obtain ul li:nth-child(5) { background-image: linear-gradient(135deg, #c62828, #ef5350); animation-name: slide5; }
.mainRight .notice.obtain ul li:nth-child(6) { background-image: linear-gradient(135deg, #00695c, #26a69a); animation-name: slide6; }

.mainRight .notice.obtain ul li a {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: block;
    padding: 10px;
    color: #fff !important;
    font-size: 15px;
    font-weight: 400 !important;
    line-height: 24px;
    text-decoration: none;
    /* 让文本显示为两行，超出省略（与 index 卡内文字相仿） */
    max-height: 68px;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* 卡片内部链接 hover 不做颜色变化（与 index 一致） */
.mainRight .notice.obtain ul li a:hover {
    color: #fff !important;
    font-weight: 400 !important;
}

/* 轮播分段 keyframes：每张显示窗口 5s/30s ≈ 16.67%（含淡入淡出过渡）
   窗口 1: 0% - 16.67%   （蓝 li1）
   窗口 2: 16.67% - 33.33%（绿 li2）
   窗口 3: 33.33% - 50%   （橙 li3）
   窗口 4: 50% - 66.67%   （紫 li4）
   窗口 5: 66.67% - 83.33%（红 li5）
   窗口 6: 83.33% - 100%  （青 li6）
   每个窗口淡入 1.5%（0.45s），中间 14%（4.2s）停留，淡出 1.5%（0.45s）
*/
@keyframes slide1 { 0%,15.17%{opacity:1} 16.67%,100%{opacity:0} }
@keyframes slide2 { 0%,16.67%{opacity:0} 18.17%,31.83%{opacity:1} 33.33%,100%{opacity:0} }
@keyframes slide3 { 0%,33.33%{opacity:0} 34.83%,48.5%{opacity:1} 50%,100%{opacity:0} }
@keyframes slide4 { 0%,50%{opacity:0} 51.5%,65.17%{opacity:1} 66.67%,100%{opacity:0} }
@keyframes slide5 { 0%,66.67%{opacity:0} 68.17%,81.83%{opacity:1} 83.33%,100%{opacity:0} }
@keyframes slide6 { 0%,83.33%{opacity:0} 84.83%,98.5%{opacity:1} 100%{opacity:0} }

/* ====== 清除 .main 全局 a:hover 的加粗与颜色污染，保证列表链接 hover 行为独立 ====== */
.main a:hover { font-weight: normal; color: inherit; }
.main .notice ul li a:hover,
.main .mainCenter .news > ul > li > a:hover { font-weight: bold; color: #333; }

/* ====== 图片新闻区（复刻 index.html 的 section.w-100.pb-5 结构与 custom.css 样式） ====== */
/* 所需 bootstrap/custom 工具类（new.html 未加载对应 css，此处补齐本节用到的） */
.main .w-100 {
    width: 100%;
    flex: 0 0 100%; /* 作为 .main.w1080 的 flex 子项独占一行 */
}
.main .pb-5 { padding-bottom: 3rem; } /* bootstrap pb-5 */
.main .container-fluid.d-col-pd {
    width: 100%;
    max-width: 1500px; /* 与 mainCenter 对齐 */
    box-sizing: border-box;
    margin: 0 auto;
}
.main .row { display: flex; flex-wrap: wrap; }
.main .col-sm-12,
.main .col-lg-12 { width: 100%; }
.main .float-start { float: left; }

/* 栏目标题栏（custom.css .areaTitle 原样复刻） */
.main .areaTitle {
    width: 100%;
    height: 40px;
    margin: 40px 0 20px 0;
    display: flex;
    justify-content: space-between;
}
.main .areaTitle label {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #3A5E87;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
.main .areaTitle .title-img {
    display: flex;
    align-items: center;
    justify-content: center;
}
.main .areaTitle .inline-block { display: flex; align-items: center; }
.main .areaTitle span {
    padding-left: 15px;
    font-size: 24px;
    color: #3A5E87;
    line-height: 40px;
}
.main .areaTitle span span {
    font-size: 12px;
    color: #BBBBBB;
    font-weight: normal;
    text-transform: uppercase;
    white-space: nowrap;
}

/* 图片横向滚动条带（custom.css .zl-scroll-* 原样复刻：从右往左无缝滚动，hover 暂停） */
.main .zl-scroll-wrap {
    padding: 10px 0;
    overflow: hidden;
}
.main .zl-scroll-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    width: max-content;
    animation: zl-scroll-left 60s linear infinite;
}
.main .zl-scroll-list:hover { animation-play-state: paused; }
.main .zl-scroll-list li {
    flex: 0 0 256px;
    min-width: 0;
    max-width: 256px;
}
.main .zl-scroll-list li a {
    display: block;
    aspect-ratio: 256 / 145;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: box-shadow 0.3s ease;
}
.main .zl-scroll-list li a:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.main .zl-scroll-list li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes zl-scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 列表内容为两份克隆，位移 50% 即无缝循环 */
}
@media (prefers-reduced-motion: reduce) {
    .main .zl-scroll-list { animation: none; }
}

/* ====== 小屏适配（≤820px）：多栏区块改为纵向堆叠 ====== */
@media (max-width: 820px) {
    /* 栏目标题的英文副标题（::after）在窄屏放不下：它是 nowrap，
       连同图标+中文约 373px，会把右侧"+"号推出可视区，隐藏之 */
    .indexTit h2::after { display: none; }
    /* 学院要闻：题图在上、列表在下 */
    .mainCenter .news { flex-direction: column; }
    .mainCenter .newsTop {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
    }
    .mainCenter .news > ul { width: 100%; }
    /* 三栏改纵向：通知公告 / 学术动态 / 招生就业 依次堆叠 */
    .mainLeft,
    .mainRight { flex: 0 0 100%; }
    .mainLeft { height: auto; }
    .mainRight { flex-direction: column; }
    .mainRight > .notice { flex: 1 1 auto; }
    /* 图片新闻：卡片缩小一档，仍横向滚动 */
    .main .zl-scroll-list li { flex: 0 0 200px; max-width: 200px; }
}