/* 设置字体 */
@font-face {
  font-family: 'PixelFont';
  src: url('assets/Fonts/HYPixel11pxU.ttf') format('truetype'); /* 加载 ttf 格式 */
  font-weight: normal;
  font-style: normal;
}

/* 设置网页的基础样式 */
body {
  margin: 0; /* 去掉网页的默认外边距 */
  padding: 0; /* 去掉网页的默认内边距 */
  font-family: 'PixelFont', sans-serif; /* 设置网页的默认字体，备用字体为 sans-serif */
  -webkit-font-smoothing: none; /* 禁用 Webkit 浏览器的字体平滑 */
  -moz-osx-font-smoothing: grayscale; /* 禁用 macOS 的字体平滑 */
  font-smooth: never; /* 通用字体平滑禁用 */
  overflow: hidden; /* 禁止默认滚动条，防止页面滚动超出范围 */
}
/* ---------------------------------------------------------常驻起--------------------------------------------------------- */
/* 定义 Logo 容器的样式 */
.logo-container {
  position: fixed; /* 固定在屏幕上 */
  top: 15px; /* 距离屏幕顶部 */
  left: 40px; /* 距离屏幕左侧 */
  z-index: 1000; /* 设置较高的层级，确保 Logo 在其他内容上方 */
}

/* 定义 Logo 图片的样式 */
.logo-container img {
  width: 50px; /* 设置图片宽度 */
  height: auto; /* 高度自动调整，保持图片比例 */
  border-radius: 8px; /* 可选：为图片按钮添加圆角 */
}

/* 顶部导航栏样式 */
.navbar {
  position: fixed; /* 固定导航栏位置，使其始终显示在页面顶部 */
  top: 0; /* 距离页面顶部 */
  left: 0; /* 距离页面左侧 */
  width: 100%; /* 导航栏宽度占满整个页面 */
  height: 10vh; /* 导航栏高度占屏幕高度的 10% */
  background-color: rgba(0, 0, 0, 0.8); /* 黑色背景，带透明度 */
  display: flex; /* 使用 Flexbox 布局，使导航栏内容水平排列，默认情况下，Flexbox 的主轴是水平的 */
  justify-content: flex-end; /* 将内容从右往左排列 */
  align-items: center; /* 将导航栏内容垂直居中 */
  z-index: 999; /* 设置导航栏的层级，确保它在其他内容上方但在logo下方 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
}

/* 导航按钮的基础样式 */
.nav-btn {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 8px; /* 图标与文字之间的间距 */
  background-color: transparent; /* 设置按钮背景颜色为透明 */
  color: white; /* 设置按钮文字颜色为白色 */
  border: none; /* 去掉按钮的边框 */
  padding: 10px 20px; /* 设置按钮的内边距，增加点击区域 */
  margin: 0 10px; /* 设置按钮之间的间距 */
  cursor: pointer; /* 鼠标悬停时显示为手型图标 */
  font-size: 16px; /* 设置按钮文字大小为 16 像素 */
}

/* 导航按钮的悬停样式 */
.nav-btn:hover {
  color: #FFD27F; /* 鼠标悬停时文字颜色变为浅橙色 */
  background-color: transparent; /* hover：悬停、盘旋，指鼠标悬停时，按钮背景颜色变为透明*/
}

/* 导航按钮的选中状态样式 */
.nav-btn.active .nav-text {
  color: #FFD27F; /* 设置选中文字颜色为浅橙色 */
  font-weight: bold; /* 加粗选中文字 */
  position: relative; /* 为伪元素提供定位参考 */
}

/* 伪元素用于创建选中状态的下划线，带有渐变效果，::after 是一个伪元素，用于在选定元素的内容之后插入额外的内容。 */
.nav-btn.active .nav-text::after {
  content: ''; /* 伪元素内容为空 */
  position: absolute; /* 绝对定位 */
  bottom: -5px; /* 距离文字底部向下移动 5 像素 */
  left: -20%; /* 向左扩展百分比 */
  width: 140%; /* 下划线宽度增加到原来的百分比 */
  height: 2px; /* 下划线高度保持为 2 像素 */
  background: linear-gradient(to right, transparent, #FFD27F, transparent); /* 渐变颜色 */
}

/* 图标容器样式 */
.nav-icon-container {
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
}

/* 导航按钮的图标样式 */
.nav-icon {
  width: 30px; /* 图标宽度 */
  height: 30px; /* 图标高度 */
}

/* 文本样式 */
.nav-text {
  font-family: 'PixelFont', sans-serif; /* 设置自定义字体 */
  display: inline-block; /* 确保文字是独立的块 */
}
/* ---------------------------------------------------------常驻止--------------------------------------------------------- */

/* ---------------------------------------------------------分页起--------------------------------------------------------- */
/* 全部分页内容样式 */
.pages {
  display: flex; /* 使用 Flexbox 布局*/
  flex-direction: column; /* 设置 Flexbox 的方向为垂直排列 */
  width: 100%; /* 页面内容宽度占满整个屏幕 */
}

/* 每个分页的样式 */
.page {
  height: 100vh; /* 每页占满屏幕高度 */
  width: 100vw; /* 页面宽度占满整个视口宽度 */
  display: flex; /* 使用 Flexbox 布局，使内容居中 */
  justify-content: center; /* 将内容水平居中 */
  align-items: center; /* 将内容垂直居中 */
  font-size: 24px; /* 设置页面文字大小为 24 像素 */
  border-bottom: 1px solid #ccc; /* 在页面底部添加一条浅灰色边框 */
  position: relative; /* 确保子元素可以使用绝对定位 */
}

#page-1 {
  background-image: url('assets/Home/bg-page-1.webp'); /* 背景图路径 */
  background-size: cover; /* 背景图完全覆盖容器 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  background-position: center; /* 背景图居中显示 */
  position: relative; /* 确保子元素可以使用绝对定位 */
}

#page-2 {
  background-image: url('assets/News/bg-page-2.webp'); /* 背景图路径 */
  background-size: cover; /* 背景图完全覆盖容器 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  background-position: center; /* 背景图居中显示 */
  position: relative; /* 确保子元素可以使用绝对定位 */
}

#page-3 {
  background-image: url('assets/Worldview/bg-page-3.webp'); /* 背景图路径 */
  background-size: cover; /* 背景图完全覆盖容器 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  background-position: center; /* 背景图居中显示 */
  position: relative; /* 确保子元素可以使用绝对定位 */
}

#page-4 {
  background-image: url('assets/Careers/bg-page-4.webp'); /* 背景图路径 */
  background-size: cover; /* 背景图完全覆盖容器 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  background-position: center; /* 背景图居中显示 */
  position: relative; /* 确保子元素可以使用绝对定位 */
}

#page-5 {
  background-image: url('assets/Features/bg-page-5.webp'); /* 背景图路径 */
  background-size: cover; /* 背景图完全覆盖容器 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  background-position: center; /* 背景图居中显示 */
  position: relative; /* 确保子元素可以使用绝对定位 */
}

#page-6 {
  background-image: url('assets/Recruitment/bg-page-6.webp'); /* 背景图路径 */
  background-size: cover; /* 背景图完全覆盖容器 */
  background-repeat: no-repeat; /* 防止背景图重复 */
  background-position: center; /* 背景图居中显示 */
  position: relative; /* 确保子元素可以使用绝对定位 */
  z-index: -2;
}

#page-7 {
  height: 25vh; /* 设置页面高度为屏幕高度的四分之一 */
  width: 100%; /* 页面宽度占满整个视口宽度 */
  display: flex; /* 使用 Flexbox 布局，使内容居中 */
  justify-content: center; /* 将内容水平居中 */
  align-items: center; /* 将内容垂直居中 */
  flex-direction: column; /* 设置内容垂直排列 */
  text-align: center; /* 文本居中 */
  background-color: #333333; /* 设置页面背景颜色为深灰色 */
  border-top: 1px solid #ccc; /* 在页面顶部添加一条浅灰色边框 */
}
/* ---------------------------------------------------------分页止--------------------------------------------------------- */

/* ---------------------------------------------------------首页起--------------------------------------------------------- */
/* 图片按钮容器样式 */
.image-button-container {
  position: absolute; /* 绝对定位 */
  bottom: 20%; /* 距离页面底部 20% */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 修正居中偏移 */
  display: grid; /* 使用网格布局 */
  grid-template-columns: repeat(2, 200px); /* 2列，每列宽度为 */
  grid-template-rows: repeat(1, 80px); /* 1行，每行高度 */
  gap: 20px; /* 图片按钮之间的间距 */
}

/* 动画效果：从屏幕底部滑入 */
.image-button-container.slide-in-from-bottom {
  animation: ImageButtonContainerSlideInFromBottom 0.8s ease forwards;
}

/* 动画效果：从屏幕顶部滑入 */
.image-button-container.slide-in-from-top {
  animation: ImageButtonContainerSlideInFromTop 0.8s ease forwards;
}

/* 动画效果：从屏幕底部滑入的关键帧 */
@keyframes ImageButtonContainerSlideInFromBottom {
  from {
    bottom: -100%; /* 初始位置在屏幕底部 */
  }
  to {
    bottom: 20%; /* 最终位置 */
  }
}

/* 动画效果：从屏幕顶部滑入的关键帧 */
@keyframes ImageButtonContainerSlideInFromTop {
  from {
    bottom: 80%; /* 初始位置在屏幕顶部 */
  }
  to {
    bottom: 20%; /* 最终位置 */
  }
}

/* 图片按钮样式 */
.image-button {
  width: 200px; /* 按钮宽度 */
  height: 80px; /* 按钮高度 */
}

/* 图片按钮的图片的样式 */
.image-button img {
  width: 100%; /* 图片宽度占满按钮 */
  height: 100%; /* 图片高度占满按钮 */
  border-radius: 8px; /* 可选：为图片按钮添加圆角 */
  cursor: pointer; /* 鼠标悬停时显示为手型图标 */
  transition: transform 0.3s ease; /* 添加点击效果 */
}

/* 图片按钮悬停样式 */
.image-button img:hover {
  transform: scale(1.1); /* 鼠标悬停时放大图片 */
}

/* 下滑浏览提示容器样式 */
.scroll-hint {
  position: absolute; /* 绝对定位 */
  bottom: 20px; /* 距离底部 20px */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 修正居中偏移 */
  animation: float 2s infinite; /* 添加上下浮动动画 */
}

/* 图片样式 */
.scroll-hint img {
  width: 100%; /* 图片宽度，可根据需要调整 */
  height: auto; /* 保持图片比例 */
}

/* 上下浮动动画 */
@keyframes float {
  0% {
    transform: translateX(-50%) translateY(0); /* 初始位置 */
  }
  50% {
    transform: translateX(-50%) translateY(-10px); /* 向上浮动 */
  }
  100% {
    transform: translateX(-50%) translateY(0); /* 回到初始位置 */
  }
}

/* 左下角容器样式 */
.left-bottom-container {
  position: absolute;
  bottom: 30px; /* 距离底部 */
  left: 30px; /* 距离左侧 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center;
  gap: 10px; /* 每部分之间的间距 */
  z-index: 10; /* 确保内容在其他元素上方 */
  transition: left 0.8s ease; /* 添加平滑过渡效果 */
}

/* 动画效果：从屏幕左边滑入 */
.left-bottom-container.slide-in {
  left: 30px;
}

/* 动画效果：滑出到屏幕左边外 */
.left-bottom-container.slide-out {
  left: -100%;
}

/* 一串文字样式 */
.info-text {
  font-size: 14px;
  color: #ffffff;
  margin: 0;
}

/* 图标按钮样式 */
.follow-icon {
  position: relative; /* 相对定位，为悬停图片提供定位参考 */
  width: 50px; /* 图标按钮宽度 */
  height: 50px; /* 图标按钮高度 */
  cursor: pointer; /* 鼠标悬停时显示为手型图标 */
}

/* 图标样式 */
.follow-icon img:first-child {
  width: 100%; /* 图标宽度占满按钮 */
  height: auto; /* 高度自动调整，保持比例 */
  border-radius: 8px; /* 可选：为图标添加圆角 */
}

/* 悬停显示内容容器样式 */
.follow-icon .hover-overlay {
  position: absolute; /* 绝对定位 */
  top: 0; /* 将悬停内容的左下角对齐到按钮图标的右上角 */
  left: 0; /* 将悬停内容的左下角对齐到按钮图标的右上角 */
  transform: translate(51px, -112px); /* 使左下角对齐到按钮图标的右上角 */
  width: 100px; /* 悬停内容宽度 */
  background-color: #293136; /* 设置背景颜色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  border-radius: 8px; /* 添加圆角 */
  padding: 8px; /* 添加内边距 */
  opacity: 0; /* 初始状态为隐藏 */
  transition: opacity 0.3s ease; /* 添加平滑过渡效果 */
  pointer-events: none; /* 禁止鼠标事件，避免干扰 */
  z-index: 1000; /* 确保内容在其他元素上方 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 子元素水平居中 */
  justify-content: center; /* 子元素垂直居中 */
}

/* 悬停文字样式 */
.hover-text {
  font-size: 14px; /* 设置字体大小 */
  color: #ffffff; /* 设置文字颜色 */
  margin: 0; /* 去除所有外边距，包括顶部和底部 */
  padding-bottom: 5px;
}

/* 悬停图片样式 */
.hover-overlay img {
  width: 100%; /* 图片宽度占满容器 */
  height: auto; /* 高度自动调整，保持比例 */
  margin-bottom: 0; /* 添加与链接的间距 */
}

/* 悬停链接样式 */
.hover-link {
  font-size: 14px; /* 设置字体大小 */
  color: #007BFF; /* 设置文字颜色为蓝色 */
  text-decoration: underline; /* 添加下划线 */
  cursor: pointer; /* 鼠标悬停时显示为手型图标 */
  margin-top: 0;
}

/* 适龄提示容器样式 */
.age-warning {
  margin-top: 0; /* 与上方内容的间距 */
}

/* 适龄提示图标样式 */
.age-warning-icon {
  width: 50px; /* 适龄提示图标宽度 */
  height: auto; /* 自动调整高度 */
}

/* 屏幕中间的文字 */
.centered-text {
  position: absolute;
  top: 40%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  width: 100%; /* 宽度 */
  transform: translate(-50%, -50%); /* 修正偏移 */
  font-size: 2rem; /* 设置字体大小 */
  color: #FFD27F; /* 设置文字颜色 */
  text-align: center; /* 居中文本 */
  font-weight: bold; /* 加粗文字 */
  z-index: 100; /* 确保文字在其他元素上方 */
}
/* ---------------------------------------------------------首页止--------------------------------------------------------- */

/* ---------------------------------------------------------新闻起--------------------------------------------------------- */
/* 轮播图容器样式 */
.carousel-container {
  width: 48%; /* 容器宽度占屏幕的 80% */
  height: calc(48vw * 9 / 16); /* 根据宽度计算高度，保持 16:9 比例 */
  position: absolute; /* 改为绝对定位 */
  left: 10%; /* 距离屏幕左部 */
  top: 28%; /* 距离屏幕顶部 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  border-radius: 10px; /* 添加圆角 */
  border: 3px solid #333333; /* 添加边框线 */
}

/* 动画效果：从屏幕底部滑入 */
.carousel-container.slide-in-from-bottom {
  animation: CarouselContainerSlideInFromBottom 0.8s ease forwards;
}

/* 动画效果：从屏幕顶部滑入 */
.carousel-container.slide-in-from-top {
  animation: CarouselContainerSlideInFromTop 0.8s ease forwards;
}

/* 动画效果：从屏幕底部滑入的关键帧 */
@keyframes CarouselContainerSlideInFromBottom {
  from {
    top: 100%; /* 初始位置在屏幕底部 */
  }
  to {
    top: 28%; /* 最终位置 */
  }
}

/* 动画效果：从屏幕顶部滑入的关键帧 */
@keyframes CarouselContainerSlideInFromTop {
  from {
    top: -50%; /* 初始位置在屏幕顶部 */
  }
  to {
    top: 28%; /* 最终位置 */
  }
}

/* 轮播图样式 */
.carousel {
  width: 500%; /* 5张图片的总宽度 */
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

/* 每张轮播图样式 */
.carousel-item {
  width: 20%; /* 每张图片占轮播图宽度 */
  height: 100%;
}

/* 每张轮播图的图片样式 */
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 轮播图控制按钮样式 */
.carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-size: contain; /* 背景图片自适应，保持图片比例 */
  background-color: transparent;
  background-repeat: no-repeat; /* 不重复背景图片 */
  background-position: center; /* 背景图片居中 */
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease; /* 添加平滑的缩放过渡效果 */
  z-index: 10; /* 确保按钮在最上层 */
}

/* 鼠标悬停时按钮变大 */
.carousel-control:hover {
  transform: translateY(-50%) scale(1.1); /* 放大 1.1 倍 */
}

/* 轮播图"上一个"控制按钮样式 */
.carousel-control.prev {
  left: 10px; /* 设置"上一个"控制按钮的位置，距离左边缘10像素 */
  background-image: url('assets/News/prev-icon.png'); /* 替换为左箭头图片路径 */
}

/* 轮播图"下一个"控制按钮样式 */
.carousel-control.next {
  right: 10px; /* 设置"下一个"控制按钮的位置，距离左边缘10像素 */
  background-image: url('assets/News/next-icon.png'); /* 替换为左箭头图片路径 */
}

/* 轮播图指示器样式 */
.carousel-indicators {
  position: absolute;
  bottom: 20px; /* 距离容器底部 */
  left: 5%;
  display: flex;
  gap: 10px; /* 小圆点之间的间距 */
}

/* 轮播图单个指示器样式 */
.indicator {
  width: 15px; /* 小圆点宽度 */
  height: 15px; /* 小圆点高度 */
  background-image: url('assets/News/dot-inactive.png'); /* 默认小圆点图片 */
  background-color: transparent;
  background-size: cover; /* 背景图片自适应 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  background-position: center; /* 背景图片居中 */
  border: none; /* 去除边框 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: background-image 0.3s ease; /* 平滑切换图片 */
}

/* 指示器激活时样式 */
.indicator.active {
  background-image: url('assets/News/dot-active.png'); /* 替换为选中小圆点图片 */
}

/* 新闻按钮容器样式 */
.news-buttons {
  position: absolute; /* 改为绝对定位 */
  top: 20%; /* 距离页面顶部的位置 */
  right: 15%; /* 距离页面右侧的位置 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: right; /* 按钮内容右对齐 */
}

/* 动画效果：从屏幕底部滑入 */
.news-buttons.slide-in-from-bottom {
  animation: NewsButtonsSlideInFromBottom 0.8s ease forwards;
}

/* 动画效果：从屏幕顶部滑入 */
.news-buttons.slide-in-from-top {
  animation: NewsButtonsSlideInFromTop 0.8s ease forwards;
}

/* 动画效果：从屏幕底部滑入的关键帧 */
@keyframes NewsButtonsSlideInFromBottom {
  from {
    top: 100%; /* 初始位置在屏幕底部 */
  }
  to {
    top: 20%; /* 最终位置 */
  }
}

/* 动画效果：从屏幕顶部滑入的关键帧 */
@keyframes NewsButtonsSlideInFromTop {
  from {
    top: -50%; /* 初始位置在屏幕顶部 */
  }
  to {
    top: 20%; /* 最终位置 */
  }
}

/* 新闻按钮样式 */
.news-btn {
  background-color: transparent; /* 按钮背景颜色 */
  color: white; /* 按钮文字颜色 */
  border: none; /* 去掉按钮边框 */
  width: 106px; /* 按钮固定宽度 */
  height: 36px; /* 按钮固定高度 */
  cursor: pointer; /* 鼠标悬停时显示为手型图标 */
  font-size: 18px; /* 按钮文字大小 */
  transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
  font-family: 'PixelFont', sans-serif; /* 设置自定义字体 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  text-align: center; /* 确保文字居中 */
  box-sizing: border-box; /* 包括内边距和边框在内的宽度和高度 */
}

/* 新闻按钮悬停样式 */
.news-btn:hover {
  background-image: url('assets/News/news-btn-bg.png');
  background-size: cover; /* 背景图片铺满按钮 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 背景图片居中显示 */
  color: #FFD27F; /* 设置文字颜色 */
}

/* 新闻按钮选中样式 */
.news-btn.active {
  background-image: url('assets/News/news-btn-bg.png');
  background-size: cover; /* 背景图片铺满按钮 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 背景图片居中显示 */
  color: #FFD27F; /* 设置文字颜色 */
}

/* 新闻列表容器样式 */
.news-container {
  width: 31vw; /* 屏幕宽度百分比 */
  height: 57vh; /* 屏幕高度百分比 */
  position: absolute; /* 改为绝对定位 */
  right: 10%; /* 右侧边距 */
  top: 28%; /* 顶部边距 */
  overflow: hidden;
  box-sizing: border-box; /* 包括内边距和边框在内的宽度和高度 */
  padding: 0 10% 0 20px; /* 内边距 */
  background-color: rgba(0, 0, 0, 0.6); /* 添加半透明黑底 */
  border-radius: 10px; /* 添加圆角 */
  padding: 15px; /* 增加内边距 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}

/* 动画效果：从屏幕底部滑入 */
.news-container.slide-in-from-bottom {
  animation: NewsContainerSlideInFromBottom 0.8s ease forwards;
}

/* 动画效果：从屏幕顶部滑入 */
.news-container.slide-in-from-top {
  animation: NewsContainerSlideInFromTop 0.8s ease forwards;
}

/* 动画效果：从屏幕右边滑入 */
.news-container.slide-in-from-right {
  animation: NewsContainerSlideInFromRight 0.5s ease-out; /* 动画持续时间 0.5 秒，缓动效果 */
}

/* 动画效果：从屏幕底部滑入的关键帧 */
@keyframes NewsContainerSlideInFromBottom {
  from {
    top: 100%; /* 初始位置在屏幕底部 */
  }
  to {
    top: 28%; /* 最终位置 */
  }
}

/* 动画效果：从屏幕顶部滑入的关键帧 */
@keyframes NewsContainerSlideInFromTop {
  from {
    top: -50%; /* 初始位置在屏幕顶部 */
  }
  to {
    top: 28%; /* 最终位置 */
  }
}

/* 新闻列表滑入动画 */
@keyframes NewsContainerSlideInFromRight {
  0% {
    transform: translateX(100%); /* 初始位置在屏幕右侧外 */
    opacity: 0; /* 初始透明度为 0 */
  }
  100% {
    transform: translateX(0); /* 最终位置为原始位置 */
    opacity: 1; /* 最终透明度为 1 */
  }
}

/* 单条新闻样式 */
.news-item {
  color: #ffffff; /* 设置文字颜色为白色 */
  margin-top: 5px; /* 顶部外边距 */
  margin-bottom: 5px; /* 底部外边距 */
  border-radius: 5px; /* 圆角 */
  background-color: transparent; /* 背景色 */
  transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */
  display: block; /* 设置为块级元素，方便 <a> 覆盖整个新闻条目 */
  text-decoration: none; /* 去掉默认的链接下划线 */
}

/* 新闻悬停时样式 */
.news-item:hover {
  background: linear-gradient(to right, #ffffff60, #ffffff00); /* 从左到右背景颜色逐渐变浅 */
  transform: translateY(-3px); /* 添加轻微的上浮效果 */
  transition: background 0.3s ease, transform 0.3s ease; /* 添加平滑过渡效果 */
}

/* 新闻时间样式 */
.news-time {
  font-size: 0.9em;
  color: #cccccc; /* 时间颜色为一般白 */
}

/* 分割线样式 */
.news-time::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px; /* 设置分割线高度 */
  background: linear-gradient(to right, #ddd, transparent); /* 从左到右渐变消失 */
  transform: scaleY(1); /* 确保高度一致 */
  transform-origin: top; /* 设置缩放的基准点 */
}

/* 新闻标题样式 */
.news-title {
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 0;
  color: #ffffff; /* 标题颜色为比较白 */
}

/* 新闻摘要样式 */
.news-summary {
  font-size: 0.9em;
  margin: 0 0;
  color: #dddddd; /* 摘要颜色为一般白 */
  line-height: 1.4;
}
/* ---------------------------------------------------------新闻止--------------------------------------------------------- */

/* ---------------------------------------------------------世界观起--------------------------------------------------------- */
/* 左侧文字区域容器 */
.text-container {
  position: absolute;
  left: -100%; /* 初始位置在屏幕左边外面 */
  bottom: 5%; /* 距离页面底部 */
  transition: left 0.8s ease; /* 添加平滑过渡效果 */
  background-color: transparent; /* 透明背景 */
  box-shadow: none; /* 移除阴影 */
}

/* 文字内容样式 */
.text-content {
  font-size: 1em;
  color: #ffffff;
  line-height: 1.6;
}

/* 动画效果：滑入时 */
.text-container.slide-in {
  left: 10%; /* 滑入后的位置 */
}
/* ---------------------------------------------------------世界观止--------------------------------------------------------- */

/* ---------------------------------------------------------职业起--------------------------------------------------------- */
/* 左侧图片容器样式 */
.career-left-container {
  position: absolute;
  top: 10%; /* 距离顶部 */
  left: 0; /* 左侧容器贴合屏幕左边 */
  width: 50%; /* 占据屏幕左半部分 */
  height: 65%; /* 容器高度 */
  display: flex;
  justify-content: center; /* 图片居中 */
  align-items: center;
  overflow: hidden; /* 防止图片溢出容器 */
  transform: translateX(-80%); /* 初始状态：从屏幕外左侧移入 */
  transition: transform 0.8s ease; /* 添加动画效果 */
}

/* 左侧图片样式 */
.career-left-image {
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges; /* 保持图片清晰 */
  image-rendering: -webkit-optimize-contrast; /* 针对 Webkit 浏览器优化 */
  object-fit: scale-down;
}

/* 右侧图片容器样式 */
.career-right-container {
  position: absolute;
  top: 10%; /* 距离顶部 */
  right: 0; /* 右侧容器贴合屏幕右边 */
  width: 50%; /* 占据屏幕右半部分 */
  height: 65%; /* 容器高度 */
  display: flex;
  justify-content: center; /* 图片居中 */
  align-items: center;
  overflow: hidden; /* 防止图片溢出容器 */
  transform: translateX(80%); /* 初始状态：从屏幕外右侧移入 */
  transition: transform 0.8s ease; /* 添加动画效果 */
}

/* 右侧图片样式 */
.career-right-image {
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges; /* 保持图片清晰 */
  image-rendering: -webkit-optimize-contrast; /* 针对 Webkit 浏览器优化 */
  object-fit: scale-down;
}

/* 职业按钮容器 */
.career-button-container {
  position: absolute; /* 改为绝对定位 */
  bottom: 5%; /* 距离页面顶部的位置 */
  left: 10%; /* 距离页面右侧的位置 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: left; /* 按钮内容左对齐 */
}

/* 职业按钮样式 */
.career-btn {
  position: relative; /* 确保伪元素可以相对于按钮定位 */
  width: 240px; /* 16比9放大 */
  height: 135px;
  background-color: transparent; /* 按钮背景透明 */
  cursor: pointer; /* 鼠标样式为手型 */
  transition: transform 0.3s ease; /* 添加缩放动画效果 */
  display: flex; /* 使用 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
  z-index: 1; /* 确保按钮本身在伪元素之上 */
  padding: 0; /* 确保没有内边距 */
  margin-right: 20px;
  box-sizing: border-box; /* 确保宽高计算不受 padding 和 border 影响 */
}

/* 职业按钮悬停样式 */
.career-btn:hover::before,
.career-btn.active::before {
  content: ''; /* 添加伪元素 */
  position: absolute; /* 伪元素绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/Careers/career-btn-bg.png'); /* 背景图片 */
  background-size: cover; /* 背景图片铺满按钮 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center; /* 背景图片居中显示 */
  z-index: 2; /* 确保伪元素在按钮内容之上 */
}

/* 职业按钮图片样式 */
.career-btn img {
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges; /* 保持图片清晰 */
  image-rendering: -webkit-optimize-contrast; /* 针对 Webkit 浏览器优化 */
  object-fit: scale-down;
  z-index: 1; /* 确保图片在伪元素下方 */
}
/* ---------------------------------------------------------职业止--------------------------------------------------------- */

/* ---------------------------------------------------------特色起--------------------------------------------------------- */
/* Feature Carousel 容器样式 */
.feature-carousel-container {
  position: relative;
  width: 80%; /* 容器宽度 */
  height: calc(80vw * 9 / 16); /* 容器高度，按照16:9比例计算 */
  top: 5%;
  perspective: 1000px; /* 添加3D效果的透视 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  transform: translateY(0); /* 默认位置 */
  transition: transform 0.8s ease; /* 平滑过渡效果 */
}

/* 动画效果：从屏幕底部滑入 */
.feature-carousel-container.slide-in-from-bottom {
  animation: FeatureCarouselContainerSlideInFromBottom 0.8s ease forwards;
}

/* 动画效果：从屏幕顶部滑入 */
.feature-carousel-container.slide-in-from-top {
  animation: FeatureCarouselContainerSlideInFromTop 0.8s ease forwards;
}

/* 动画效果：从屏幕底部滑入的关键帧 */
@keyframes FeatureCarouselContainerSlideInFromBottom {
  0% {
    transform: translateY(100%); /* 初始位置：屏幕底部 */
  }
  100% {
    transform: translateY(0); /* 滑动到原位置 */
  }
}

/* 动画效果：从屏幕顶部滑入的关键帧 */
@keyframes FeatureCarouselContainerSlideInFromTop {
  0% {
    transform: translateY(-100%); /* 初始位置：屏幕顶部 */
  }
  100% {
    transform: translateY(0); /* 滑动到原位置 */
  }
}

/* Feature Carousel 样式 */
.feature-carousel {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 保留3D效果 */
  transition: transform 0.5s ease; /* 平滑过渡效果 */
}

/* 每张图片样式 */
.feature-carousel-item {
  position: absolute;
  width: 70%; /* 图片宽度 */
  height: 70%; /* 图片高度 */
  top: 15%;
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 修正居中偏移 */
  transform-origin: center; /* 设置旋转中心 */
  transition: transform 0.5s ease; /* 添加平滑过渡效果 */
}

.feature-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片适应容器 */
  border-radius: 10px; /* 添加圆角 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 添加阴影 */
  border: 4px solid #ff4500; /* 添加边框线 */
}

/* 控制按钮样式 */
.feature-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(65%);
  width: 40px;
  height: 40px;
  background-size: contain; /* 背景图片自适应，保持图片比例 */
  background-color: transparent;
  background-repeat: no-repeat; /* 不重复背景图片 */
  background-position: center; /* 背景图片居中 */
  border: none; /* 去除按钮边框 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: transform 0.3s ease; /* 添加平滑的缩放过渡效果 */
  z-index: 10; /* 确保按钮在最上层 */
}

/* 鼠标悬停时按钮变大 */
.feature-carousel-control:hover {
  transform: translateY(65%) scale(1.1); /* 放大 1.1 倍 */
}

/* 左侧按钮样式 */
.feature-carousel-control.prev {
  left: 10px; /* 左侧按钮位置 */
  background-image: url('assets/News/prev-icon.png'); /* 替换为左箭头图片路径 */
}

/* 右侧按钮样式 */
.feature-carousel-control.next {
  right: 10px; /* 右侧按钮位置 */
  background-image: url('assets/News/next-icon.png'); /* 替换为右箭头图片路径 */
}

/* 小圆点容器样式 */
.carousel-dots {
  position: absolute;
  bottom: 60px; /* 距离容器底部 */
  left: 50%; /* 水平居中 */
  transform: translateX(-50%); /* 修正居中偏移 */
  display: flex;
  gap: 10px; /* 小圆点之间的间距 */
}

/* 小圆点样式 */
.carousel-dot {
  width: 15px; /* 小圆点宽度 */
  height: 15px; /* 小圆点高度 */
  background-image: url('assets/News/dot-inactive.png'); /* 默认小圆点图片 */
  background-color: transparent;
  background-size: cover; /* 背景图片自适应 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  background-position: center; /* 背景图片居中 */
  border: none; /* 去除边框 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: background-image 0.3s ease; /* 平滑切换图片 */
}

/* 当前选中小圆点样式 */
.carousel-dot.active {
  background-image: url('assets/News/dot-active.png'); /* 替换为选中小圆点图片 */
}
/* ---------------------------------------------------------特色止--------------------------------------------------------- */

/* ---------------------------------------------------------招贤纳士起--------------------------------------------------------- */
/* 招贤纳士页容器样式 */
.recruitment-container {
  position: absolute;
  width: calc(40% - 5px); /* 每个容器宽度占屏幕的 40%，减去间距 */
  height: calc(40% - 5px); /* 每个容器高度占屏幕的 40%，减去间距 */
  background-color: rgba(0, 0, 0, 0.6); /* 半透明黑底 */
  color: white; /* 文字颜色为白色 */
  font-size: 1.2em; /* 字体大小 */
  border-radius: 10px; /* 添加圆角 */
  overflow: hidden;
  z-index: -1; /* 默认 z-index 较低，避免覆盖上一页 */
  padding: 10px; /* 添加内边距，避免文字贴边 */
  box-sizing: border-box; /* 包括内边距和边框在内的宽度和高度 */
  text-align: left; /* 确保文字左对齐 */
}

/* 左右上下留白 */
.recruitment-container.top-left {
  top: 15%; /* 距离顶部 10% */
  left: 10%; /* 距离左侧 10% */
}

.recruitment-container.top-right {
  top: 15%; /* 距离顶部 10% */
  right: 10%; /* 距离右侧 10% */
}

.recruitment-container.bottom-left {
  bottom: 5%; /* 距离底部 10% */
  left: 10%; /* 距离左侧 10% */
}

.recruitment-container.bottom-right {
  bottom: 5%; /* 距离底部 10% */
  right: 10%; /* 距离右侧 10% */
}

/* 动画效果：从屏幕左上角滑入 */
.recruitment-container.slide-in-from-top-left {
  animation: SlideInFromTopLeft 0.8s ease forwards;
}

/* 动画效果：从屏幕右上角滑入 */
.recruitment-container.slide-in-from-top-right {
  animation: SlideInFromTopRight 0.8s ease forwards;
}

/* 动画效果：从屏幕左下角滑入 */
.recruitment-container.slide-in-from-bottom-left {
  animation: SlideInFromBottomLeft 0.8s ease forwards;
}

/* 动画效果：从屏幕右下角滑入 */
.recruitment-container.slide-in-from-bottom-right {
  animation: SlideInFromBottomRight 0.8s ease forwards;
}

/* 动画效果：滑出到屏幕左上角 */
.recruitment-container.slide-out-to-top-left {
  animation: SlideOutToTopLeft 0.8s ease forwards;
}

/* 动画效果：滑出到屏幕右上角 */
.recruitment-container.slide-out-to-top-right {
  animation: SlideOutToTopRight 0.8s ease forwards;
}

/* 动画效果：滑出到屏幕左下角 */
.recruitment-container.slide-out-to-bottom-left {
  animation: SlideOutToBottomLeft 0.8s ease forwards;
}

/* 动画效果：滑出到屏幕右下角 */
.recruitment-container.slide-out-to-bottom-right {
  animation: SlideOutToBottomRight 0.8s ease forwards;
}

/* 滑入关键帧动画 */
@keyframes SlideInFromTopLeft {
  from {
    transform: translate(-100%, -100%); /* 初始位置在屏幕左上角外 */
  }
  to {
    transform: translate(0, 0); /* 滑动到原位置 */
  }
}

@keyframes SlideInFromTopRight {
  from {
    transform: translate(100%, -100%); /* 初始位置在屏幕右上角外 */
  }
  to {
    transform: translate(0, 0); /* 滑动到原位置 */
  }
}

@keyframes SlideInFromBottomLeft {
  from {
    transform: translate(-100%, 100%); /* 初始位置在屏幕左下角外 */
  }
  to {
    transform: translate(0, 0); /* 滑动到原位置 */
  }
}

@keyframes SlideInFromBottomRight {
  from {
    transform: translate(100%, 100%); /* 初始位置在屏幕右下角外 */
  }
  to {
    transform: translate(0, 0); /* 滑动到原位置 */
  }
}

/* 滑出关键帧动画 */
@keyframes SlideOutToTopLeft {
  from {
    transform: translate(0, 0); /* 初始位置为原位置 */
  }
  to {
    transform: translate(-100%, -100%); /* 滑出到屏幕左上角外 */
  }
}

@keyframes SlideOutToTopRight {
  from {
    transform: translate(0, 0); /* 初始位置为原位置 */
  }
  to {
    transform: translate(100%, -100%); /* 滑出到屏幕右上角外 */
  }
}

@keyframes SlideOutToBottomLeft {
  from {
    transform: translate(0, 0); /* 初始位置为原位置 */
  }
  to {
    transform: translate(-100%, 100%); /* 滑出到屏幕左下角外 */
  }
}

@keyframes SlideOutToBottomRight {
  from {
    transform: translate(0, 0); /* 初始位置为原位置 */
  }
  to {
    transform: translate(100%, 100%); /* 滑出到屏幕右下角外 */
  }
}
/* ---------------------------------------------------------招贤纳士止--------------------------------------------------------- */

/* ---------------------------------------------------------底部起--------------------------------------------------------- */
/* 页面内的游戏 Logo 样式 */
#page-7 .page-logo-container img {
  width: 50px; /* 设置 Logo 宽度 */
  height: auto; /* 高度自动调整，保持图片比例 */
  border-radius: 8px; /* 可选：为图片按钮添加圆角 */
}

/* 适龄提示与警示语样式 */
#page-7 .warning {
  font-size: 16px; /* 设置字体大小 */
  color: white; /* 设置文字颜色 */
  margin: 0 0; /* 设置上下间距为 8px，左右间距为 0 */
}

/* 通用文字链接样式 */
.text-link {
  font-size: 16px; /* 设置字体大小 */
  color: white; /* 设置文字颜色 */
  text-decoration: none; /* 移除整体下划线 */
  cursor: pointer; /* 鼠标悬停时显示为手型图标 */
  background: none; /* 确保链接背景为透明 */
  border: none; /* 去掉链接边框 */
  padding: 0; /* 去掉链接的默认内边距 */
}

/* 仅为文字部分添加下划线 */
.text-link span {
  text-decoration: underline;
}

/* 备案图标 */
.text-link img {
  position: relative; /* 设置相对定位 */
  width: 18px;
  height: 20px;
  transform: translate(5px, -2px); /* 偏移 */
  vertical-align: middle; /* 图标与文字垂直居中对齐 */
}
/* ---------------------------------------------------------底部止--------------------------------------------------------- */