/* 部分代码由Trae辅助生成 */
/* html,
body {
  
}
 */

/* v1.11 修改Footer相关。 */
.wrap {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}
.main-content {
  flex: 1;
}

footer {
  position: relative;
  width: 100%;
  height: 2.5rem; 
}

/* v1.11 不再支持视频类型 */
.hero-bg {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(../image/ocean.png)
}

.card {
  margin-left: 15px; /* 根据实际需求调整左边距数值 */
  margin-right: 15px; /* 根据实际需求调整右边距数值 */
}

/* v1.11 Update */
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* 遮罩层样式 */
.hero-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 0;
}

/* 文字覆盖层样式 */
.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2rem;
  text-align: center;
  z-index: 1;
}

/* 分割线 来源：https://segmentfault.com/a/1190000021327814 */
.auto-divider {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #acacac;
  font-size: 1rem;
}

.auto-divider::before,
.auto-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #505050;
}

.auto-divider::before {
  margin-right: 10px;
}

/* 修正拼写错误，将 tauto-divider 改为 auto-divider */
.auto-divider::after {
  margin-left: 10px;
}
/* v1.10 Up-Down Icon */
/* 定义上下浮动的动画 */
@keyframes float {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -o-transform: translateY(0); 
  }
  50% {
    transform: translateY(-12px); 
    -webkit-transform: translateY(-12px);
    -moz-transform: translateY(-12px);
    -ms-transform: translateY(-12px);
    -o-transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
  }
}

.up-down-icon {
  animation: float 1.5s ease-in-out infinite;
  -webkit-animation: float 1.5s ease-in-out infinite; 
  -moz-animation: float 1.5s ease-in-out infinite; 
  -ms-animation: float 1.5s ease-in-out infinite;
  -o-animation: float 1.5s ease-in-out infinite;
}

.pagination-wrapper {
  text-align: center; /* 让分页内容在页面中居中显示 */
  margin-top: 20px;
}

.page-number {
  margin-left: 2px;
  margin-right: 2px;
  text-decoration: none;
  font-size: 0.85rem;
}

.next {
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  font-size: 0.85rem;
  color: white;
}

.prev {
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  font-size: 0.85rem;
  color: white;
}

.team-members-card{
  height: 400px; 
  overflow: auto;
  margin-bottom: 20px;
}

.extend {
  display: inline-block; /* 让链接可以和其他页码元素水平排列 */
  padding: 8px 12px; /* 内边距设置，可调整按钮大小的视觉效果 */
  margin: 0 5px; /* 左右间距为5px，可调整间距大小 */
  text-decoration: none; /* 去掉默认的下划线 */
  border: 1px solid #ccc; /* 边框样式，颜色为浅灰色，可调整 */
  border-radius: 5px; /* 圆角效果，让按钮看起来更圆润美观 */
}

.extend:hover {
  background-color: #f5f5f5; /* 悬停时背景色变为浅灰色，可自定义颜色 */
  color: #000; /* 悬停时文字颜色变为黑色，可调整 */
}

.page-number {
  display: inline-block; /* 让页码数字可以水平排列 */
  padding: 8px 12px; /* 内边距设置，可调整按钮大小的视觉效果 */
  margin: 0 3px; /* 左右间距为3px，可调整间距大小 */
  text-decoration: none; /* 去掉默认的下划线 */
  border: 1px solid #ccc; /* 边框样式，颜色为浅灰色，可调整 */
  border-radius: 5px; /* 圆角效果，让按钮看起来更圆润美观 */
}

.page-number:hover {
  background-color: #f5f5f5; /* 悬停时背景色变为浅灰色，可自定义颜色 */
  color: #000; /* 悬停时文字颜色变为黑色，可调整 */
}
.page-number.current {
  background-color: #fff; /* 当前页码背景色设为蓝色，可根据主题色调整 */
  color: #000; /* 当前页码文字颜色设为白色，对比明显 */
  pointer-events: none; /* 禁止当前页码再次点击，因为它是当前页不需要响应点击事件 */
}

@media (max-width: 768px) {
  h1 {
    font-size: 1.8rem;
  }
}
@media (max-width: 576px) {
  h1 {
    font-size: 1.5rem;
  }
}

/* 图片样式 */
.post_img img {
  max-width: 40%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 992px) {
  .post_img img {
    max-width: 40%;
  }
}

@media (max-width: 768px) {
  .post_img img {
    max-width: 60%;
  }
}

@media (max-width: 576px) {
  .post_img img {
    max-width: 70%;
  }
}

/* v1.0.3 new style */
.card {
  border-radius: 8px; /* 边角圆滑 */
  box-shadow: rgba(0, 0, 0, 0) 0, 0, 0, 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease-in-out; /* 合并过渡效果 */
}

.card:hover {
  transform: translateY(-4px); /* 向上轻微浮动 */
  box-shadow: rgba(0, 0, 0, 1) 0px 2px 6px 0px;
}

.bg-blue {
  background-color: #333333; /* 深蓝色导航栏 */
  color: white; /* 导航栏文字为白色 */
  padding: 15px 20px;
}

.btn {
  border-radius: 5px;
}

.dropdown-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  position: absolute;
  z-index: 1000;
  width: 100%;
  border-radius: 8px;
}

.dropdown-menu.show {
  max-height: 1000px;
  opacity: 1;
}

.card-title {
  font-size: 1.25rem;
}

.card-subtitle {
  font-size: 0.9rem;
}

.card-img-top {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 100%;
}

/* v1.11 对于链接样式的优化 参考了Google在暗色模式下的链接样式 */
.link {
  text-decoration: none;
  color: rgb(140, 168, 255);
  transition: all 0.2s ease;
}

.link:hover {
  color: #9cc2ff; /* 更亮的蓝色 */
  text-decoration: underline;
}