nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 36px;
  font-family: 'Nunito', sans-serif;
  background: rgba(128, 128, 128, 0.5); /* 半透明背景 */
  /* backdrop-filter: blur(5px); /* 背景模糊 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 阴影 */
  transition: background 0.3s ease; /* 平滑过渡 */
}

nav .menu {
  display: flex;
  gap: 24px;
  position: relative;
}

nav .menu a {
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding: 5px 0;
  transition: color 0.3s ease;
}

nav .menu a:hover {
  color: #ffd700; /* 鼠标悬停时文字变成黄色 */
}

/* 下划线样式 */
nav .underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background-color: #ffd700;
  border-radius: 99px;
  transition: all 0.3s ease; /* 平滑过渡效果 */
}

    /* 导航栏里的图标大小统一 */
    nav svg {
      width: 20px;
      height: 20px;
    }
    nav .svg-container {
      width: 20px;
      height: 20px;
    }
    /* 导航栏里的左右两部分 */
    nav > div {
      display: inline-flex;
      align-items: center;
      text-transform: uppercase;
      font-size: 14px;
    }
    /* 激活菜单项下方的下划线 */
    nav > div:last-child > .active {
      position: relative;
    }
    nav > div:last-child > .active:after {
      bottom: -8px;
      left: 0;
      right: 0;
      position: absolute;
      content: "";
      height: 3px;
      border-radius: 99px;
      background-color: #ecad29;
    }
    /* 导航栏加载页面的样式（默认行为） */
nav.loading {
  position: relative; /* 不固定 */
  background: none; /* 无背景 */
}

/* 导航栏主页面的样式 */
/* 把原先 nav 的 position: absolute 改为 position: fixed */
nav.fixed {
  position: fixed; /* 固定在视口顶部，跟随滚动 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; /* 确保始终位于最顶层 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 36px;
  font-family: 'Nunito', sans-serif;
  background: rgba(128, 128, 128, 0.3); /* 半透明背景 */
  backdrop-filter: blur(5px); /* 背景模糊 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease; /* 平滑过渡 */

}

/* 如果你想保持 hover 时不透明，也可以保留这个 */
nav.fixed:hover {
  background: rgba(128, 128, 128, 0.7); /* 鼠标悬停时变不透明 */
}




#footer-banner {
  display: flex;
  align-items: center; /* 上下居中 */
  justify-content: space-between; /* 左右分布 */
  background-color: rgba(128, 128, 128, 0.5); /* 初始透明 */
  padding: 10px 10px; /* 缩小 padding 值 */
  color: white;
  font-family: 'Nunito', sans-serif;
  position: fixed; /* 固定在页面底部 */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background-color 0.3s ease; /* 平滑过渡背景透明度 */
}

/* 在 50% 滚动时变为不透明 */
#footer-banner.scrolled {
  background-color: rgba(128, 128, 128, 1); /* 完全不透明 */
}

/* 中间黑色分隔线 */
#footer-banner::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: calc(100% - 20px); /* 调整分隔线高度以适应 Banner */
  background-color: black;
}

/* 左侧部分 */
.footer-left {
  flex: 0.9;
  display: flex;
  align-items: center; /* 上下居中 */
  justify-content: space-between; /* 左右布局 */
  gap: 10px;
}

.footer-left img {
  width: 125px; /* 调整 Logo 大小 */
  height: auto;
}

.footer-left .footer-record-text {
  font-size: 14px;
  color: #ffffff;
  margin-left: 10px; /* 添加间距 */
}

/* 右侧部分 */
.footer-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px; /* 增大间距 */
  text-align: center;
}

/* 每一行媒体链接 */
.footer-contacts-row {
  display: flex;
  justify-content: center;
  gap: 25px; /* 增大图标间距 */
}

.footer-contacts-row img {
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.footer-contacts-row img:hover {
  transform: scale(1.2);
}