/* 头部整体样式 */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Logo 样式，通过 margin-left 让 logo 往后移动 */
.site-logo {
  display: flex;
  align-items: center;
  margin-left: 60px; /* 可根据实际需求调整数值 */
}

.site-logo img {
  height: 40px;
}

/* 导航栏样式 */
.site-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li {
  margin: 0 15px;
}

/* 删除导航栏文字相关样式 */
/*
.site-nav a {
  text-decoration: none;
  color: #333333;
  font-weight: bold; 
  font-size: 18px; 
  transition: color 0.3s ease;
}

.site-nav a:hover {
  color: #007bff;
}
*/

/* 圆形按钮容器样式 */
.round-buttons {
  display: flex;
  gap: 15px; /* 按钮之间的间距 */
}

/* 圆形按钮样式 */
.round-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* 按钮直径 */
  height: 40px; /* 按钮直径 */
  border-radius: 50%; /* 使按钮呈圆形 */
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); 
  color: #ffffff; 
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 按钮悬停时样式 */
.round-button:hover {
  background: linear-gradient(135deg, #0056b3 0%, #003d80 100%); 
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 按钮激活时样式 */
.round-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .round-button {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

/* 假设头部高度大约是 60px，可根据实际情况调整 */
.site-header {
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* 确保头部在其他内容之上 */
  /* 其他原有样式 */
}

.mainpc {
  margin-top: 3px; /* 网址头部高度，可根据实际情况调整 */
}

/* 媒体查询，当屏幕宽度小于等于 768px 时，隐藏头部、滚动字幕等 */
@media (max-width: 768px) {
  .site-header {
    display: none;
  }
  .mainpc {
    margin-top: 0; /* 头部隐藏后，去掉顶部外边距 */
  }
  /* 新增：隐藏滚动字幕 */
  .custom-marquee {
    display: none;
  }
}

/* 确保 site-header 布局合理 */
.site-header {
  display: flex;
  justify-content: flex-start; 
  align-items: center;
  padding: 10px 20px;
  background-color: #f5f5f5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; 
}

/* 可以添加一些外边距让滚动字幕和 Logo 保持一定距离 */
.custom-marquee {
  width: 1500px; 
  height: 40px; 
  background-color: #f5f5f5; 
  color: #036; 
  font-size: 16px; 
  line-height: 40px; 
  overflow: hidden; 
  margin-left: 20px; 
}

.custom-marquee span {
  display: inline-block;
  padding-left: 80%;
  white-space: nowrap;
  animation: scroll 15s linear infinite; 
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 三个圆形图片按钮样式 */
.header-buttons {
  display: flex;
  gap: 15px; /* 按钮之间的间距 */
  margin-left: 20px; /* 调节按钮与滚动字幕的间距，可根据需要修改 */
}

.header-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; /* 按钮直径 */
  height: 30px; /* 按钮直径 */
  border-radius: 50%; /* 使按钮呈圆形 */
  overflow: hidden; /* 确保图片不会超出圆形范围 */
}

.header-button img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片覆盖整个按钮 */
}

/* 按钮悬停时样式 */
.round-button:hover {
  background: linear-gradient(135deg, #0056b3 0%, #003d80 100%); 
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 按钮激活时样式 */
.round-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .round-button {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  /* 让头部容器左对齐 */
  .site-header {
    justify-content: flex-start;
    /* 若之前设置了 display: none; 这里需要恢复显示 */
    display: flex; 
  }

  .site-logo {
    margin-left: 0; /* 移除可能存在的左边距 */
    margin-right: auto; /* 让 logo 靠最左 */
  }

  .mainpc {
    margin-top: 0; 
  }

  .custom-marquee {
    display: none;
  }
}