body {
  background-image: url('images/bg.jpg');
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: repeat-y;
  position: relative;
  min-height: 100vh; /* 使用 min-height 代替 fixed height，更具弹性 */
  margin: 0;
}

/* 顶部半透明黑色导航栏 */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: .8rem 2rem .8rem 30px; 
  z-index: 10;
  border-radius: 0;
}

.top-nav .nav-link {
  color: #fff;
  padding: .5rem 1rem;
  font-weight: 500;
  transition: color 0.3s;
}

.top-nav .nav-link:hover {
  color: #f664a0;
}

/* 右侧固定挂件容器 */
.side-widgets-container {
  position: fixed;
  top: 50%;  /* 垂直正中 */
  transform: translateY(-50%);  /* 向上回退自身高度一半 */
  right: 1rem;
  z-index: 10;
}

.sns-links {
  display: flex;
  flex-direction: column;  /* 垂直排列 */
}

.sns-links a {
  /* flex: 0 0 auto; */
  width: 5rem;
  height: 5rem;  /* 方框宽高 */
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.sns-links a:hover {
  filter: brightness(1.25);
}

.sns-links .sns-fb  {
  background-color: #1877f2;
  font-size: 3rem;  /* 图标大小 */
}
.sns-links .sns-ddl { background-color: #0098ad; }
.sns-links .sns-ty  { background-color: #ffffc0; }
.sns-links .sns-yq  { background-color: #87ceeb; }

/* 图标 CSS */
.icon-yongzhe {
  width: 4.0rem;
  height: 4.0rem;
  background: url(images/yongzhe.png) center no-repeat;
  background-size: 100% auto;
}

.icon-tianyu {
  width: 5.0rem;
  height: 5.0rem;
  background: url(images/tianyu.png) center no-repeat;
  background-size: 100% auto;
}

.icon-yongqi {
  width: 3.5rem;
  height: 3.5rem;
  background: url(images/yongqi.gif) center no-repeat;
  background-size: 100% auto;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding-bottom: 20px;
}

/* 左下角区块容器 */
.footer-left-block {
  display: flex;
  flex-direction: column;  /* Logo 和文字垂直排列 */
  align-items: flex-start;
  padding-left: 30px;  /* 与屏幕左边距离 */
}

.logo-container {
  margin-bottom: 15px;  /* Logo 和下方文字间距 */
}

.logo-container img {
  max-height: 100px;  /* Logo 大小 */
  filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.5));  /* Logo 阴影 */
}

/* 底部文字内容 */
.footer-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #fff;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* 文字阴影 */
}

.copyright {
  margin-right: 20px;
  font-size: 0.95rem;
}

.nav-footer {
  display: flex;
}

.nav-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 0 10px;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.nav-footer a:hover {
  color: #f664a0;
}