body, html {
    margin: 0;
    padding: 0;
    font-family: Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
    height: 100%;
    flex-direction: column; /* 垂直布局 */
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background: linear-gradient(to right, #edf2fa, #edf2fa);
    min-height: 100vh; /* 视口高度 */
  }

#hero {
  background: linear-gradient(to right, #edf2fa, #edf2fa);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  min-height: 80vh; /* 尝试调整这个值 */
  flex-grow: 1;
}


.hero-container {
  font-family: Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  color: #383535;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around; /* 均匀分布元素 */
  width: 80%; /* 根据需要调整 */
  max-width: 600px; /* 最大宽度限制 */
}

.hero-container h1 {
  font-size: 3rem; /* 增大标题字号 */
  color: #1b1d1b;
  margin-bottom: 10px;
}

.hero-container p {
  font-size: 1.2rem;
  color: #383535;
  margin-bottom: 30px; /* 增加与下一个元素的距离 */
}

#qigua-button {
  border-radius: 50%; /* 使图片变成圆形 */
  cursor: pointer;    /* 鼠标悬停时显示手型光标 */
  margin-top: 30px; /* 增加与下一个元素的距离 */
  max-width: 100%;
  height: auto;
  /* 添加金黄色光芒效果 */
  box-shadow: 0 0 15px 5px rgba(255, 223, 0, 0.7); /* 模糊半径、扩散半径和颜色 */
  transition: box-shadow 0.3s ease-in-out; /* 平滑过渡效果 */
}

/* 鼠标悬停时增强光芒效果 */
#qigua-button:hover {
  box-shadow: 0 0 30px 10px rgba(255, 223, 0, 1);

}

#new-button {
  display: block;       /* 块级元素，确保占据整行 */
  margin: 20px auto;    /* 在上方留出空间，水平居中 */
  padding: 25px 45px;   /* 增加内边距，使按钮更大更易点击 */
  background-color: #f4f8f8; /* 按钮背景颜色 */
  color: #c1a004;        /* 文本颜色 */
  border: none;         /* 去掉边框 */
  border-radius: 15px;   /* 轻微的圆角效果 */
  font-size: 30px;      /* 增大字体大小 */
  cursor: pointer;      /* 鼠标悬停时的手型光标 */
  transition: background-color 0.3s; /* 鼠标悬停时背景色渐变效果 */
  font-weight: bold;    /* 字体加粗 */
  width: auto;          /* 可以设置特定宽度或保持自动以适应内容宽度 */
  margin-top: 39px; /* 增加与上一个元素的距离 */
  font-family: Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  border: 1px solid #c0b283; /* 淡金色边框 */
}

#new-button:hover {
  background-color: #f3fafa; /* 鼠标悬停时的背景色 */
}


.instructions-container {
  font-family: Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  color: #333333; /* 深色文本 */
  background-color: #f8f8f8; /* 浅色背景 */
  padding: 20px;
  border: 1px solid #ddd; /* 细边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
}

.card {
  background-color: #fff; /* 卡片背景颜色 */
  padding: 20px; /* 卡片内边距 */
  border-radius: 10px; /* 圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  margin-bottom: 20px; /* 卡片之间的间距 */
  font-family: Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
}

.card h2, .card h3 {
  color: #0d0d0d; /* 标题颜色 */
}

.card p, .card li {
  text-align: justify; /* 两端对齐 */
  line-height: 1.9; /* 增加行间距 */
  color: #333333; /* 正文颜色 */
}

.card ul {
  padding-left: 20px; /* 增加缩进 */
}

.card li {
  margin-bottom: 10px; /* 列表项间距 */
}

@keyframes spin {
  from {
    transform: rotate(0deg);
    box-shadow: 0 0 15px 5px rgba(255, 223, 0, 0.7); /* 较暗的金黄色 */
  }
  to {
    transform: rotate(360deg);
    box-shadow: 0 0 30px 10px rgba(255, 223, 0, 1); /* 较亮的金黄色 */
  }
}

.rotating {
  animation: spin 10s linear infinite;
}


/* 基础样式 */
.section-container {
  display: flex;
  flex-direction: row; /* 默认为水平布局 */
}

#instructions{
  flex: 1;
}
#hero {
  flex: 2;
}
#xici {
  flex: 1; /* 在水平布局下，每个区域都占用等量的空间 */
  display: flex; /* 使用Flexbox */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  
}

.mobile-card {
  display: none; /* 默认隐藏 */
}

/* 媒体查询 */
@media screen and (max-width: 1168px) {
  .section-container {
    flex-direction: column; /* 在小屏幕上使用垂直布局 */
    align-items: center; /* 增加居中对齐 */
  }

  #instructions, #xici {
    display: none;
  }

  .mobile-card {
    display: block; /* 在小屏幕上显示 */
    margin-top: 80px;
  }


  #hero {
    display: flex; /* 使用Flex布局 */
    flex-direction: column; /* 垂直布局 */
    align-items: center; /* 水平居中对齐 */
    justify-content: center; /* 垂直居中对齐 */
    width: 100%; /* 使用全部可用宽度 */
    margin: 0 auto; /* 自动外边距实现居中 */
  }

  .hero-container {
    width: 100%; /* 使用全部可用宽度 */
    align-items: center; /* 确保子元素也居中 */
  }

  .hero-container p {
    font-size: 1.2rem;
    color: #383535;
    margin-bottom: 10px; /* 增加与下一个元素的距离 */
  }


  
}


.xici-container {
  font-family: Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  color: #333; /* 深色文本 */
  padding: 20px;
  border: 1px solid #ddd; /* 细边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
  margin: 20px auto; /* 上下保持20px外边距，左右自动，实现居中 */
  
  border-radius: 10px; /* 圆角边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 轻微的阴影效果 */
  text-align: justify; /* 两端对齐 */
}

.xici-container h2 {
  font-size: 26px;
  margin-bottom: 15px;
  text-align: center;
}

.xici-container p {
  font-size: 21px;
  text-align: justify; /* 两端对齐 */
  line-height: 1.6; /* 增加行间距 */
}