/* body1-2.css —— body1（新闻动态/通知公告/竞赛信息/系统入口）与 body2（友情链接）区域专属样式 */

/* ==================== body1：内容区（红色占位，后续改透明） ==================== */
.body1 {
  width: 1640px;
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* 分行排布：上半部分行 + 下半部分行 */
  padding-top: 30px; /* 内容区距上边界30px */
  background: transparent; /* 占位红色，后续改为 transparent */
}
/* 上半部分行：两个 800x533 模块左右分布 */
.body1 .body1-row {
  display: flex;
  justify-content: space-between; /* 左侧模块靠左边界，右侧模块靠右边界 */
}
/* 下半部分行：高420px，模块在行内垂直居中 */
.body1 .body1-row2 {
  width: 100%;
  height: auto;
  margin-top: 30px; /* 与上半部分行间距30px */
  display: flex;
  align-items: center;
}

/* 模块：800x533，白底由动画层内的伪元素承载 */
.body1 .module {
  position: relative;
  width: 800px;
  height: 533px;
  background: transparent;
}
/* 模块入场动画：整体（含白色背景）从下方120px滑回原位，2.5s，只播放一次 */
.body1 .module .module-anim {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateY(120px);
  transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 白色背景垫底：跟随整体滑动，但不参与透明度渐变 */
.body1 .module .module-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
}
/* 内容（标题栏/图片/文字）：滑动过程中由全透明渐变为当前不透明度 */
.body1 .module .module-anim > * {
  position: relative; /* 内容绘制在白色背景之上 */
  opacity: 0;
  transition: opacity 2.5s ease;
}
.body1 .module .module-anim.in-view {
  transform: none;
}
.body1 .module .module-anim.in-view > * {
  opacity: 1;
}
/* 标题下方内容部分：800x458，白色背景 */
.body1 .module .module-content {
  width: 800px;
  height: 458px;
  background: #fff;
}

/* ---------- 新闻动态模块 ---------- */
/* 内容区左右排布：左盒子靠左边界，选项紧靠左盒子 */
.body1 .module .news-content {
  display: flex;
  align-items: flex-start;
}
/* 左侧盒子：宽371px */
.body1 .module .news-left {
  width: 380px;
}
/* 图片：333x210，贴住盒子顶部，水平居中，a标签包裹可点击 */
.body1 .module .news-left .news-img {
  display: block;
  width: 333px;
  height: 210px;
  margin: 0 auto;
  overflow: hidden;
}
/* 图片填满盒子，超出部分按比例裁剪 */
.body1 .module .news-left .news-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 文字部分：333px宽，距图片45px，18px微软雅黑黑色行距25px，悬停渐变为#244371 */
.body1 .module .news-left .news-text {
  display: block;
  width: 333px;
  margin: 45px auto 0;
  font-size: 16px;
  line-height: 25px;
  color: #494949;
  text-decoration: none;
  transition: color .3s;
}
.body1 .module .news-left .news-text:hover {
  color: #244371;
}
/* 右侧选项列表：纵向5项，每项间隔10px */
.body1 .module .news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.body1 .module .news-list a {
  display: flex;
  width: 405px;
  height: 81px;
  background: #ededed;
  border: 1px solid transparent; /* 悬停加边框时不引起位移 */
  text-decoration: none;
}
/* 左侧120px：日期文本，水平垂直居中，16px */
.body1 .module .news-list .news-date {
  flex: none;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #494949;
  transition: color .3s;
}
/* 右侧：选项文本，18px加粗行距25px */
.body1 .module .news-list .news-title {
  flex: 1;
  display: flex;
  align-items: center;
  padding-right: 15px;
  font-size: 16px;
  font-weight: bold;
  line-height: 25px;
  color: #494949;
  transition: color .3s;
}
/* 选项鼠标经过：加#244371边框，文字全部变#244371 */
.body1 .module .news-list a:hover {
  border-color: #244371;
}
.body1 .module .news-list a:hover .news-date,
.body1 .module .news-list a:hover .news-title {
  color: #244371;
}

/* ---------- 通知公告模块 ---------- */
/* 上半盒子：750x161，靠顶部水平居中，图片与右侧盒子间距20px */
.body1 .module .notice-top {
  width: 750px;
  height: 161px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* 左侧图片：270x160（图片填满盒子，超出部分裁剪） */
.body1 .module .notice-img {
  flex: none;
  width: 270px;
  height: 160px;
  display: block;
  overflow: hidden;
}
/* 图片填满盒子，超出部分按比例裁剪 */
.body1 .module .notice-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 右侧盒子：450x150，垂直居中，三段上下排列间隔10px */
.body1 .module .notice-info {
  flex: none;
  width: 450px;
  height: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 第一段：高50px，18px黑色加粗微软雅黑 */
.body1 .module .notice-info .notice-info-title {
  height:50px ;
  font-size: 16px;
  font-weight: bold;
  line-height: 25px;
  color: #494949;
  text-decoration: none;
  overflow: hidden;
}
/* 第二段：高50px，14px微软雅黑#1d1d1d */
.body1 .module .notice-info .notice-info-desc {
  height: 62px;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  color: #1d1d1d;
  overflow: hidden;
}
/* 第三段：高20px，14px黑色微软雅黑 */
.body1 .module .notice-info .notice-info-date {
  height: 20px;
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  color: #494949;
}
/* 右侧三段文字整体为一个链接：悬停时文字渐变为#244371（与新闻动态一致） */
.body1 .module .notice-top .notice-info {
  text-decoration: none;
}
.body1 .module .notice-top .notice-info .notice-info-title,
.body1 .module .notice-top .notice-info .notice-info-desc,
.body1 .module .notice-top .notice-info .notice-info-date {
  transition: color .3s;
}
.body1 .module .notice-top .notice-info:hover .notice-info-title,
.body1 .module .notice-top .notice-info:hover .notice-info-desc,
.body1 .module .notice-top .notice-info:hover .notice-info-date {
  color: #244371;
}
/* 下方盒子：距上半盒子20px，4个选项纵向排列（样式同新闻动态，日期在右侧14px） */
.body1 .module .notice-list {
  width: 760px;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.body1 .module .notice-list a {
  display: flex;
  align-items: center;
  width: 760px;
  height: 57px;
  background: #ededed;
  border: 1px solid transparent;
  text-decoration: none;
}
/* 标题在左：18px加粗 */
.body1 .module .notice-list .notice-title {
  flex: 1;
  padding-left: 15px;
  font-size: 16px;
  font-weight: bold;
  line-height: 25px;
  color: #494949;
  transition: color .3s;
}
/* 日期在右：14px */
.body1 .module .notice-list .notice-date {
  flex: none;
  padding: 0 15px;
  font-size: 12px;
  color: #494949;
  transition: color .3s;
}
/* 悬停效果与新闻动态相同 */
.body1 .module .notice-list a:hover {
  border-color: #244371;
}
.body1 .module .notice-list a:hover .notice-title,
.body1 .module .notice-list a:hover .notice-date {
  color: #244371;
}

/* ---------- 系统入口模块（body1-row2 右侧，参考图） ---------- */
/* 盒子：820x370，靠住 row2 顶部，距左侧模块20px */
.body1 .sys-box {
  width: 820px;
  height: 355px;            /* 原370px：三条间隔各减5px，更紧凑 */
  align-self: flex-start;   /* 盒子在行内顶部 */
  margin-top: 90px;         /* 顶部距离增加10px */
  margin-left: 20px;        /* 距左侧模块20px */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 四条垂直均匀分布 */
}
.body1 .sys-box .sys-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 575px;
  height: 54px;            /* 原525px：长条加长50px */
  background: #526691;
  text-decoration: none;
  /* 默认（入场前）在右侧外侧且全透明；进入视口后由 .in-view 滑回原位
     过冲前快速、回弹时慢速：超调约32%（原16%的两倍），1.5s；透明度同步渐变 */
  transform: translateX(300px);
  opacity: 0;
  transition: filter .3s, transform 1.5s cubic-bezier(0.2, 1.6, 0.8, 1.1), opacity 1.5s ease;
}
/* 2、4项在左侧外侧 */
.body1 .sys-box .sys-item:nth-child(2),
.body1 .sys-box .sys-item:nth-child(4) {
  transform: translateX(-300px);
}
/* 进入视口：滑回当前位置（滑过头后弹回）并渐变为完全不透明 */
.body1 .sys-box.in-view .sys-item {
  transform: translateX(0);
  opacity: 1;
}
/* 1、3条：#526691，贴盒右缘；2、4条：#3d4e8e，贴盒左缘（圆与条同色） */
.body1 .sys-box .sys-item.color-a {
  background: #526691;
  align-self: flex-end;    /* 长条靠住盒子右边 */
}
.body1 .sys-box .sys-item.color-b {
  background: #3d4e8e;
  align-self: flex-start;  /* 长条靠住盒子左边 */
}
.body1 .sys-box .sys-item:hover { filter: brightness(1.12); }
/* 圆形图标底板：直径108，与条同色，骑在条带端部（端点外移18px） */
.body1 .sys-box .sys-item .sys-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}
.body1 .sys-box .sys-item.icon-left .sys-icon {
  left: -18px;
}
.body1 .sys-box .sys-item.icon-right .sys-icon {
  right: -18px;
}
.body1 .sys-box .sys-item .sys-icon img {
  display: block;
  width: 56px;
  height: auto;
}
/* 条内文字：往圆形相反侧偏移，视觉居中于剩余空间 */
.body1 .sys-box .sys-item .sys-text {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
}
.body1 .sys-box .sys-item.icon-left .sys-text {
  padding: 0 40px 0 118px; /* 左让出圆形底板，右侧留白平衡 */
}
.body1 .sys-box .sys-item.icon-right .sys-text {
  padding: 0 118px 0 40px;
}

/* ==================== body2：友情链接（1920白底盒子，标题样式同竞赛信息） ==================== */
.body2 {
  width: 1920px;
  margin: 15px auto 0;
  background: #fff; /* 白底铺满整页宽 */
}
/* 标题栏与滚动区：在白底内保持1640居中，位置、宽度与之前一致 */
.body2 .module-title {
  width: 1640px;
  margin: 0 auto;
}
/* 滚动区：位于标题栏下方，图片 312x187，间隔10px，匀速无缝循环 */
.body2 .friend-scroll {
  width: 1640px;
  margin: 0 auto; /* 保持现在的滚动位置与宽度不变 */
  overflow: hidden; /* 隐藏画面外部分 */
  padding: 12px 0 25px; /* 上让开标题栏，底部留白 */
}
.body2 .friend-track {
  display: flex;
  width: max-content;
  animation: friend-scroll 50s linear infinite;
}
/* 鼠标悬停暂停滚动，方便点击 */
.body2 .friend-scroll:hover .friend-track {
  animation-play-state: paused;
}
@keyframes friend-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.body2 .friend-item {
  flex: none;
  display: block;
  width: 312px;
  height: 187px;
  margin-right: 10px; /* 间隔10px */
  text-decoration: none;
}
/* 友情链接图片：填满 312x187 盒子，超出部分按比例裁剪 */
.body2 .friend-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}