/* ==========================================================
   全局规范
   ========================================================== */
/* 重置：清零默认 margin/padding，全局 border-box */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden; /* 整屏滚动由 fullPage.js 接管，禁用原生滚动 */
  font-family: "Microsoft YaHei", Arial, sans-serif;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
i,
input,
label,
li,
ol,
p,
select,
td,
textarea,
ul {
	font-family: 'SimHei', '黑体', sans-serif !important;
}
a { text-decoration: none; color: #000000; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

/* 内容容器：1320 为内容区宽度，padding 在容器内部，总占用 1320px */
:root {
  /* --content-width 跟随 index.css 的 rem 根字号等比缩放：
     17.1875rem 在基准根字号 76.8px 下 = 1320px（与原固定值一致），
     >1920px 屏随根字号等比变大（2560 屏约 1760px） */
  --content-width: 17.1875rem;  /* 后期统一修改宽度只需改这里 */
  --header-height: 85px;     /* Header 高度：每屏留白、抽屉导航位置均跟随此值 */
  --hover-color: #0f64ec;    /* 导航 hover 色 */
  --main-color: #0a93e1;     /* banner 下方主文字色 */
  --origin-w: 1720;
  --target-w: 1320;
  --scale: calc(var(--target-w) / var(--origin-w));
}
.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
}
.relative{
  position: relative;
}

/* ==========================================================
   1. Header 导航（通栏，fixed 定位：每一屏都能看到）
   ========================================================== */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: var(--header-height);
  background: #ffffff;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.header .container {
  height: 100%;
  display: flex;             /* flex 布局：左 logo 右导航 */
  align-items: center;
  justify-content: space-between;
}
/* 左侧 Logo 图片占位：宽 50px（切图时替换 src 即可） */
.logo img {
  width: 158px;
  height: auto;
}
/* 图片占位说明：logo.png —— 顶部品牌 Logo，建议尺寸 50x50 */
.logo img[src=""] { /* src 为空时的灰色占位块，切图后可删 */
  width: 158px; height: 36px;
  background: #e0e0e0;
}

/* 右侧：导航菜单 + 红色联系按钮 */
.header-right {
  display: flex;
  align-items: center;
}
.nav-menu {
  display: flex;
  align-items: center;
}
.nav-menu a {
  padding: 8px 14px;
  font-size: 16px;
  color: #000000;
  transition: color .3s;
}
.nav-menu a:hover,
.nav-menu a.active {          /* hover / 当前屏 高亮 */
  color: var(--hover-color);
}
/* 红色联系按钮 */
.btn-contact {
  margin-left: 16px;
  padding: 10px 24px;
  background: #e02020;
  color: #ffffff;
  font-size: 16px;
  border-radius: 4px;
  transition: opacity .3s;
}
.btn-contact:hover { opacity: .85; }

/* 汉堡按钮（仅移动端显示） */
.menu-btn { display: none; width: 28px; cursor: pointer; }
.menu-btn span { display: block; height: 2px; background: #333; margin: 6px 0; transition: .3s; }
.menu-btn.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-btn.open span:nth-child(2) { opacity: 0; }
.menu-btn.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* 移动端抽屉导航 */
.wap-nav {
  position: fixed;
  top: var(--header-height); right: 0;
  width: 60%;
  background: #fff;
  box-shadow: -2px 2px 8px rgba(0,0,0,.1);
  transform: translateX(100%);
  transition: transform .3s;
  z-index: 99;
}
.wap-nav.open { transform: translateX(0); }
.wap-nav a { display: block; padding: 16px 24px; border-bottom: 1px solid #eee; }
.wap-nav a.active { color: var(--hover-color); }
/* H5：抽屉导航拉满整屏高度（不含 Header） */
@media screen and (max-width: 767px) {
  .wap-nav {
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }
}

/* fullPage 生成的单元格：顶部预留 Header 高度，内容不被遮挡 */
.section .fp-tableCell {
  padding-top: var(--header-height);
  vertical-align:top !important;
}
.section {
  color: #fff;
  display: flex;              /* 纵向：banner 在上，统计区在下 */
  flex-direction: column;
}
/* 注意：插件默认的 table-cell 布局下子元素百分比高度链不可靠，
   改为 flex 纵向容器：padding 计入总高(border-box)，子元素可正常伸缩。
   不要在此设 overflow-y:auto —— 会截获滚轮事件导致整屏翻页失效 */
.section .fp-tableCell {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* 除首屏（banner）和最后一屏（about：版权需贴底）外，
   其余屏内容整体垂直居中，任何屏幕尺寸下都生效 */
.section:not(.index_banner):not(.about-section):not(.ppt-case-banner) .fp-tableCell {
  justify-content: center;
}

/* ==========================================================
   占位屏（其余模块，后续按设计稿逐屏替换）
   ========================================================== */
.section .placeholder-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.section .placeholder-box h1 { font-size: 48px; margin-bottom: 16px; }
.section .placeholder-box p  { font-size: 20px; opacity: .85; }

/* ==========================================================
   11. 上海中研致合（通栏：表单 + 信息矩阵 + 三列图片列表 + 版权）
   ========================================================== */
.about-section {
  background: #ffffff;        /* 通栏白底 */
}
.about-section .container {
  display: flex;              /* 各内容块整体垂直居中 */
  flex-direction: column;
  justify-content: center;
  height: 100% !important;
}
/* 版权行始终贴住页面最底部 */
.about-section .about-footer {
  margin-top: auto;
  flex-direction: column;
}

/* 居中标题：40px #000000 */
.about-title {
  font-size: 40px;
  color: #000000;
  text-align: center;
  margin-bottom: 40px;
  margin-top: auto;           /* 标题上方吃掉剩余空间：与下方内容成组，整体在页脚以上垂直居中 */
}
/* 中部主内容下方吃掉剩余空间：标题~主内容整体在页脚以上垂直居中 */
.about-section .about-main {
  margin-bottom: auto;
}

/* --- 提交表单：姓名、手机号、提交按钮同一行 --- */
.about-form {
  display: flex;              /* 一行排列 */
  width: 100%;
  gap: 20px;
  margin-bottom: 56px;
}
.about-form input {
  flex: 1;                    /* 自适应平分剩余宽度 */
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d9d9d9;
  font-size: 16px;
  outline: none;
  transition: border-color .3s;
}
.about-form input:focus { border-color: var(--hover-color); }
/* 提交按钮：蓝色底、白色字体 */
.about-form button {
  height: 44px;
  padding: 0 36px;
  background: var(--hover-color);
  color: #ffffff;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: opacity .3s;
}
.about-form button:hover { opacity: .85; }

/* --- 中部：左右两部分 --- */
.about-main {
  display: flex;              /* 左：四列信息；右：联系 + 二维码 */
  justify-content: space-between;
  gap: 40px;
  /* margin-bottom: 56px; */
}
/* 左侧四列：每列标题 + 多条文字 */
.about-cols {
  display: flex;              /* 四列横排 */
  gap: 48px;
  flex: 1;
}
.about-col .col-title {
  font-size: calc(29px * var(--scale));
  color: #00d6b9;
  font-weight: bold;
  margin-bottom: 16px;
}
.about-col .col-text {
  font-size: calc(20px * var(--scale));
  color: rgba(0,0,0,.7);
  line-height: 2;
}
.about-col .col-text a {      /* 每个链接独占一行 */
  display: block;
  color: inherit;
}
.about-col .col-text a:hover { color: #1069f9; }
/* 右侧：标题 + 联系我们 + 二维码图片 */
.about-contact { 
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center; 
}
.about-contact .col-title {
  font-size: calc(29px * var(--scale));
  color: #00d6b9;
  font-weight: bold;
  margin-bottom: 16px;
}
.about-contact .col-text {
  font-size: calc(29px * var(--scale));
  color: #1069f9;
  line-height: 2;
}
.about-contact .col-tip {
  font-size: calc(20px * var(--scale));
  color: rgba(0,0,0,.7);
  line-height: 2;
}
/* 二维码图片占位：images/qrcode.png，建议 120x120，切图替换 */
.qrcode {
  width: 120px;
  height: 120px;
  margin-top: 8px;
  margin-bottom: 8px;
}
.qrcode[src=""] {             /* src 为空时灰色占位块，切图后可删 */
  background: #e0e0e0;
}

/* --- 底部通栏公共类：图片列表 + 版权共用，背景色一致、宽度撑满屏幕 --- */
.fullbleed {
  /* 通栏背景：宽度撑满屏幕（负 margin 抵消容器限制），
     内部左右 padding 模拟 1320 容器，内容不贴边 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-top: 24px;
  padding-bottom: 24px;
  padding-left: max(20px, calc(50vw - var(--content-width) / 2));
  padding-right: max(20px, calc(50vw - var(--content-width) / 2));
  margin-bottom: 0;
  background: linear-gradient(90deg, #02c6c2, #0e74f3);
  color: #ffffff;
}

/* 底部图片列表：三列，图片左 + 文字右 */
.about-gallery {
  display: flex;              /* 三列横排 */
  gap: 40px;
}
.about-gallery .gallery-item {
  flex: 1;                    /* 三等分 */
  display: flex;              /* 图片左、文字右 */
  gap: 16px;
  align-items: flex-start;
}
/* 图片占位：images/footer-1.png ~ footer-3.png，建议 64x64 */
.gallery-item img {
  height: calc(80px * var(--scale));
  flex-shrink: 0;
}
.gallery-item img[src=""] {   /* src 为空时灰色占位块，切图后可删 */
  background: #e0e0e0;
  border-radius: 4px;
}
.gallery-item .g-title {
  font-size: calc(20px * var(--scale));
  color: #ffffff;
  font-weight: bold;
  line-height: 2.4;
}
.gallery-item .g-text {
  font-size: 12px;
  color: #ffffff;
  line-height: 1.8;
}

/* --- 最下方纯文字版权 --- */
.about-footer_info {
  display: flex;              /* 两部分：版权 / 备案号 */
  justify-content: center;
  align-items: center;        /* 图标与文字垂直居中 */
  gap: 1em;                   /* 两个 span 的间距（原   空格改为结构分隔） */

  padding-top: 20px;
  font-size: calc(16px * var(--scale));
}
.about-footer_info .icon_gongan {
  display: inline-block;      /* 行内图片与文字基线对齐问题改为垂直居中 */
  vertical-align: middle;
  width: calc(20px * var(--scale));
}
.white{
  background: #ffffff !important;
}

/* ==========================================================
   响应式断点
   ========================================================== */
/* 中屏：768px - 1199px，容器 92%，卡片一行 2 个 */
@media screen and (max-width: 767px) {
  .container { max-width: 92%; }
  .nav-menu a { padding: 8px 8px; font-size: 15px; }

  /* 矩阵改为一行 2 个，合并卡片取消（占满首列一行高） */
  .matrix {
    grid-template-columns: repeat(2, 160px);
    grid-template-rows: none;
    grid-auto-rows: 200px;
  }
  .card--tall { grid-row: auto; height: 200px; }

  /* 全程陪伴服务体系：区块高度自适应，右侧卡片一行 2 个 */
  .svc-section { height: auto; padding: 40px 0; }
  .svc-section .container { height: auto; }
  .svc-title { font-size: 26px; margin-bottom: 24px; }
  .svc-matrix {
    grid-template-columns: repeat(2, 160px);
    grid-template-rows: none;
    grid-auto-rows: 200px;
  }
  .svc-card--tall { grid-row: auto; height: 200px; }

  /* 最新动态：区块高度自适应，三栏改纵向堆叠 */
  .news-section { height: auto; padding: 40px 0; }
  .news-section .container { height: auto; }
  .news-title { font-size: 26px; margin-bottom: 24px; }
  .news-layout { flex-direction: column; }
  .news-carousel { height: 240px; }

  /* 高校图片墙：区块高度自适应，一屏 3 列 */
  .school-section { height: auto; padding: 40px 0; }
  .school-section .container { height: auto; }
  .school-title { font-size: 26px; margin-bottom: 24px; }

  /* 培训屏：区块高度自适应，图片墙一行 4 列，数据换行 */
  .train-section { height: auto; padding: 40px 0; }
  .train-section .container { height: auto; }
  .train-title { font-size: 26px; margin-bottom: 24px; }
  .train-stats { flex-wrap: wrap; gap: 24px; margin-bottom: 24px; }
  .train-main { flex-direction: column; }
  .train-big { width: 100%; height: 200px; }
  .train-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: none; grid-auto-rows: 90px; }

  /* 科研绘图：区块高度自适应，列表改 2 列 */
  .draw-section { height: auto; padding: 40px 0; }
  .draw-section .container { height: auto; }
  .draw-title { font-size: 26px; margin-bottom: 24px; }
  .draw-list { flex-wrap: wrap; }
  .draw-item { max-width: calc(50% - 10px); }

  /* 学术PPT 轮播：一行显示 2 张卡片（2*330 + 20 = 680） */
  .ppt-window { width: 680px; margin: 0 auto; }
  .ppt-btn--prev { left: -50px; }
  .ppt-btn--next { right: -50px; }

  /* 尾部信息：左侧四列改两列，间距缩小 */
  .about-cols { flex-wrap: wrap; gap: 32px; }
  .about-col { width: calc(50% - 16px); }

  /* 科研动画：区块高度自适应，主图缩小 */
  .anim-section { height: auto; padding: 40px 0; }
  .anim-section .container { height: auto; }
  .anim-title { font-size: 26px; margin-bottom: 24px; }
  .anim-poster { height: 220px; margin-bottom: 24px; }

  /* 尾部信息：全部单列 */
  .about-section .container { height: auto; }
  .about-title { font-size: 24px; margin-bottom: 24px; }
  .about-form { flex-direction: column; align-items: stretch; margin-bottom: 32px; }
  .about-form input { width: 100%; }
  .about-main { flex-direction: column; margin-bottom: 32px; }
  .about-cols { flex-direction: column; gap: 24px; }
  .about-gallery { flex-direction: column; gap: 24px; margin-bottom: 0; }
  .about-footer { flex-direction: column; gap: 8px; text-align: center; }
  /* 版权 / 备案号：wap 下每个 span 独占一行居中，不再挤在一行 */
  .about-footer_info {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    line-height: 1.6;
  }
  /* 标题行：wap 下标题 + 「更多」链接同行展示（一左一右） */
  .news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .news-head .news-more {
    position: static;         /* 取消桌面端的绝对定位，参与同行排列 */
    flex-shrink: 0;
    padding: 4px 10px;
    gap: 8px;
  }
  .news-head .news-more .more-img { width: 28px; }
  .news-head h2 {
    font-size: 20px;
    margin: 0;                /* 覆盖 mt10 等边距，保证垂直居中 */
    white-space: nowrap;      /* 标题过长时省略，不换行、不与更多重叠 */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 移动端：<768px，全部单列，汉堡菜单 */
@media screen and (max-width: 767px) {
  /* 移动端只改这一处变量：Header 高度、每屏顶部留白、
     抽屉导航位置、各区块 calc 总高全部自动跟随 */
  :root { --header-height: 64px; }

  /* H5 不走 fullPage 整屏滚动，恢复原生滚动与滚动条 */
  html, body { height: auto; overflow: auto; }

  /* 导航隐藏，仅保留汉堡按钮（结构保留） */
  .nav-menu, .btn-contact { display: none; }
  .menu-btn { display: block; }

  /* Banner：高度自适应，文字单列 */
  .banner-bg { height: 380px; }
  .banner-text .title { font-size: 28px; }
  .banner-text .subtitle { font-size: 16px; }
  /* 数字统计：移动端单列，间距缩小 */
  .banner-below { padding: 24px 0; }
  .stats { flex-direction: column; }
  .stats .stat-item { padding: 10px 0; }
  .stats .stat-num { font-size: 24px; margin-bottom: 4px; }
  .stats .stat-label { font-size: 14px; }

  /* 矩阵：移动端单列，区块高度自适应 */
  .matrix-section { height: auto; padding: 40px 0; }
  .matrix-section .container { height: auto; }
  .matrix-title { font-size: 26px; margin-bottom: 24px; }
  .matrix {
    grid-template-columns: 160px;
    grid-template-rows: none;
    grid-auto-rows: 200px;
    justify-content: center;
  }
  .card--tall { grid-row: auto; height: 200px; }

  /* 全程陪伴服务体系：移动端单列 */
  .svc-section { height: auto; padding: 40px 0; }
  .svc-section .container { height: auto; }
  .svc-title { font-size: 26px; margin-bottom: 24px; }
  .svc-matrix {
    grid-template-columns: 160px;
    grid-template-rows: none;
    grid-auto-rows: 200px;
    justify-content: center;
  }
  .svc-card--tall { grid-row: auto; height: 200px; }

  /* 最新动态：移动端单列 */
  .news-section { height: auto; padding: 40px 0; }
  .news-section .container { height: auto; }
  .news-title { font-size: 26px; margin-bottom: 24px; }
  .news-layout { flex-direction: column; }
  .news-carousel { height: 200px; }

  /* 高校图片墙：移动端一屏 2 列 */
  .school-section { height: auto; padding: 40px 0; }
  .school-section .container { height: auto; }
  .school-title { font-size: 26px; margin-bottom: 24px; }

  /* 培训屏：移动端图片墙一行 3 列 */
  .train-section { height: auto; padding: 40px 0; }
  .train-section .container { height: auto; }
  .train-title { font-size: 26px; margin-bottom: 24px; }
  .train-stats { flex-direction: column; align-items: center; gap: 16px; margin-bottom: 24px; }
  .train-main { flex-direction: column; }
  .train-big { width: 100%; height: 180px; }
  .train-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: none; grid-auto-rows: 80px; }

  /* 科研绘图：移动端单列 */
  .draw-section { height: auto; padding: 40px 0; }
  .draw-section .container { height: auto; }
  .draw-title { font-size: 26px; margin-bottom: 24px; }
  .draw-list { flex-direction: column; align-items: stretch; }
  .draw-item { max-width: 100%; }

  /* 学术PPT：标题缩小，轮播按钮贴屏幕两侧，卡片一行约 1.5 张，图片列表换行 */
  .ppt-section { height: auto; padding: 40px 0; }
  .ppt-section .container { height: auto; }
  .ppt-title { font-size: 26px; margin-bottom: 24px; }
  .ppt-btn--prev { left: -8px; }
  .ppt-btn--next { right: -8px; }
  .ppt-card { width: 260px; height: 420px; }
  .ppt-gallery img { height: 28px; }

  .section .placeholder-box h1 { font-size: 26px; }
  .section .placeholder-box p { font-size: 15px; }
}
/* 标题行：相对定位，右上角放「更多资讯动态」 */
.news-head {
  position: relative;
}
/* 右上角更多链接：文字 + 箭头图片，底部与标题文字对齐 */
.news-more {
  position: absolute;
  right: 0;
  top: 10px;                /* 与标题基线大致对齐 */
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: calc(16px * var(--scale));
  color: #0f64ec;
  transition: color .3s;
  background: #fff;
  /* 底部柔和阴影，就是图里的悬浮阴影效果 */
  box-shadow: 0 8px 16px rgba(0,0,0,0.08);
  font-size: calc(16px * var(--scale));
  padding: 6px 15px;
  border-radius: 50px;
}
.news-more:hover { color: var(--hover-color); }
/* 箭头图片占位：切图替换 images/icon_more.png，建议 16x16 */
.news-more .more-img {
  width: calc(44px * var(--scale));
  object-fit: contain;
}
.news-more .more-img[src=""] {   /* src 为空时灰色占位块，切图后可删 */
  background: #d9d9d9;
  border-radius: 50%;
}
.grey{
  background: #FAFAFA !important;
}
/* ==========================================================
   移动端（wap，<768px）：关闭所有动态效果
   动画 / 过渡时长全部归零并只播一次——入场动画瞬时到位（元素直接呈现
   最终状态，不会停留在透明度 0 的初始帧），无限循环动画（跑马灯等）
   也随 iteration-count:1 停止。JS 里的触发逻辑无需改动，各页面通用。
   ========================================================== */
@media screen and (max-width: 767px) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  /* 无限循环类动画（跑马灯 / 无缝滚动）：直接静止在起始位置，避免
     0s + 1 次后停在中间偏移量上出现空档 */
  .ppt-case-banner .img_bottom img,
  .ppt-gallery .marquee-track,
  .marquee-ul {
    animation: none !important;
    transform: none !important;
  }
}