.network {
            font-family: "Times New Roman", sans-serif;
            background-color: #ffffff; /* 设置容器背景为纯白色 */
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column; /* 垂直排列 */
            margin: 50px auto; /* 距离顶部 50px，水平居中 */
            padding: 20px;
            min-height: 300px; /* 最小高度 */
            width: 100vw; /* 宽度为视口的 80% */
            border-radius: 15px; /* 圆角边框 */
            position: relative; /* 用于控制伪元素位置 */
            overflow: hidden; /* 确保流动效果不超出边界 */
        }
.sign-up {
  box-sizing: border-box;
  background: #f5f5f5;
  width: 90%;
  margin: 0 auto;
  display: flex;
  border-radius: 10px;
  overflow: hidden;
}
.sign-up__content {
  display:  none;
  flex: 1;
  padding: 1em;
}
.sign-up__content h2 {
  margin: 1em 0;
  padding: 0;
 text-align: center;
 font-size: 40px;
}
.sign-up__content p {
  margin: 0;
  padding: 0;
  font-size: 25px;
  line-height: 1.6;
}
.sign-up__drawing svg {
  height: 225px;
  width: 100%;
}
.sign-up__form {
  background: white;
  flex: 1;
  padding: 1em;
  box-sizing: border-box;
  width: 100%;
}
.sign-up__form h2 {
  margin: 1em 0;
  padding: 0;
 text-align: center;
font-size: 40px;
}

.sign-up__input {
  width: 100%;
  border: 0;
  padding: 0.75em 0;
  margin: 0 0 0 auto;
 display: flex;
  align-items: center; /* 垂直居中 label 和 select */
  justify-content: flex-start; /* 可以改为 space-between 或 flex-end */
  gap: 1em; /* 增加间距 */

}
.sign-up__input label{
font-size: 30px;
white-space: nowrap; /* 防止换行 */
}
.sign-up__input select {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.75em 0.5em;
  border-radius: 10px;
  border: 0;
  font-size: 16px;
flex: 1; /* 让 select 拉伸填满剩余空间 */
}
.sign-up__input select:focus {
  outline: none;
  box-shadow: 0 0 0 2pt #14716e;
}
.sign-up__input select[type=text], .sign-up__input select[type=text], .sign-up__input select[type=text] {
  background: #f5f5f5;
}
.sign-up__input input {
  box-sizing: border-box;
  width: 20%;
  margin: 0;
  padding: 0.75em 0.5em;
  border-radius: 10px;
  border: 0;
  font-size: 20px;
  font-family: 'Times New Roman', sans-serif;
}
.sign-up__input input:focus {
  outline: none;
  box-shadow: 0 0 0 2pt #14716e;
}
.sign-up__input input[type=text], .sign-up__input input[type=text], .sign-up__input input[type=text] {
  background: #f5f5f5;
}

.sign-up__input a {
  color: #14716e;
  text-decoration: none;
}
.sign-up__input--stacked {
  display: flex;
  flex-flow: column;
}
.sign-up__input--stacked label {
  margin-bottom: 0.5em;
}
.sign-up__button {
  cursor: pointer;
  background: #14716e;
  color: white;
  transition: 0.2s;
  text-transform: uppercase;
}
.sign-up__button:hover {
  background: #0c4644;
}

@media screen and (min-width: 768px) {
  .sign-up__content {
    display: block;
  }
}







/* 让左侧在所有屏幕都可见 */
.sign-up__content { 
  display: block;   /* 原来是 display:none; 改成 block */
}

/* 小屏：上下堆叠 + 图片居中 */
@media (max-width: 767.98px){
  .sign-up{
    flex-direction: column;      /* 竖排 */
    gap: 16px;                    /* 可选：上下留点间距 */
  }
  .sign-up__content,
  .sign-up__form{
    width: 100%;
    order: initial;               /* 保持先图后表单；需要反过来就 order:1/2 */
  }
  .sign-up__drawing img{
    display: block;
    margin: 0 auto;               /* 水平居中 */
    width: 70%;                   /* 仍然使用你原来的 70% */
    max-width: 100%;
    height: auto;
  }
}

/* 大于等于 768px 仍保持左右排布（可保留你原来的设置） */
@media (min-width: 768px){
  .sign-up{ flex-direction: row; }
}















/* network */
.bottom-container {
  display: flex;
  flex-direction: column; /* 改为纵向排列 */
  width: 90%; /* 与上面的容器宽度一致 */
  margin: 1em auto; /* 自动居中，和上面的间距为 1em */
  padding: 1em;
  background: #f5f5f5;
  border-radius: 10px;
  height: 1400px; /* 高度根据内容动态调整 */
}
/* 小容器样式 */
.small-container1 {
  flex: 1; /* 让每个小容器均匀分配空间 */
  margin: 0.5em 0; /* 设置上下间距，左右间距可以省略 */
  padding: 1em;
  background: #ffffff; /* 背景为白色 */
  border-radius: 10px;
  text-align: center; /* 居中对齐 */
  height: 800px; /* 高度根据内容动态调整 */
}
.small-container2 {
  flex: 1; /* 让每个小容器均匀分配空间 */
  margin: 0.5em 0; /* 设置上下间距，左右间距可以省略 */
  padding: 1em;
  background: #ffffff; /* 背景为白色 */
  border-radius: 10px;
  text-align: center; /* 居中对齐 */
  height: 550px; /* 高度根据内容动态调整 */
}
/* network */

/* function */


/* .bottom-container1 {
  display: flex;
  flex-direction: column; /* 改为纵向排列 */
  width: 90%; /* 与上面的容器宽度一致 */
  margin: 1em auto; /* 自动居中，和上面的间距为 1em */
  padding: 1em;
  background: #f5f5f5;
  border-radius: 10px;
  height: 1800px; /* 高度根据内容动态调整 */
}
 */

/* .small-container3 {
  flex: 1; /* 让每个小容器均匀分配空间 */
  margin: 0.5em 0; /* 设置上下间距，左右间距可以省略 */
  padding: 1em;
  background: #ffffff; /* 背景为白色 */
  border-radius: 10px;
  text-align: center; /* 居中对齐 */
  height: 850px; /* 高度根据内容动态调整 */
  fontFamily: "Times New Roman";
}
*/ 
/* 
.small-container4 {
  flex: 1; /* 让每个小容器均匀分配空间 */
  margin: 0.5em 0; /* 设置上下间距，左右间距可以省略 */
  padding: 1em;
  background: #ffffff; /* 背景为白色 */
  border-radius: 10px;
  text-align: center; /* 居中对齐 */
  height: 850px; /* 高度根据内容动态调整 */
 fontFamily: "Times New Roman";
}
*/ 
.small-container3 h2, .small-container4 h2 {
    text-align: center; /* 居中对齐 */
    font-size: 30px; /* 字体大小 */
    color: #333; /* 文字颜色 */
    margin-bottom: 10px; /* 与下方内容的间距 */
}
/* function */
iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

/* 让 label 和 select 并排显示 */
.sign-up__input--horizontal {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* label 和 select 之间的间距 */
    margin-bottom: 1em; /* 每行的间距 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 固定 label 的宽度，让 select 自动调整 */
.sign-up__input--horizontal label {
    flex: 0 0 150px; /* 固定宽度为 150px */
    text-align: right; /* 右对齐 label 文本 */
}

/* 设置 select 的样式 */
.sign-up__input--horizontal select {
    flex: 1; /* 自动占据剩余空间 */
    padding: 0.5em;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
    background: #f5f5f5;
}

/* Hallmarker*/
.bottom-container2 {
  display: flex;
  flex-direction: column; /* 改为纵向排列 */
  width: 90%; /* 与上面的容器宽度一致 */
  margin: 1em auto; /* 自动居中，和上面的间距为 1em */
  padding: 1em;
  background: #f5f5f5;
  border-radius: 10px;
  height: 500px; /* 高度根据内容动态调整 */
}
.small-container5 {
  flex: 1; /* 让每个小容器均匀分配空间 */
  margin: 0.5em 0; /* 设置上下间距，左右间距可以省略 */
  padding: 1em;
  background: #ffffff; /* 背景为白色 */
  border-radius: 10px;
  text-align: center; /* 居中对齐 */
  height: 480px; /* 高度根据内容动态调整 */
}
.small-container5 h2{
    text-align: center; /* 居中对齐 */
    font-size: 30px; /* 字体大小 */
    color: #333; /* 文字颜色 */
    margin-bottom: 10px; /* 与下方内容的间距 */
   fontFamily: "Times New Roman";
}

/* Hallmarker*/

/* Survival */
.bottom-container3 {
  display: flex;
  flex-direction: column; /* 改为纵向排列 */
  width: 90%; /* 与上面的容器宽度一致 */
  margin: 1em auto; /* 自动居中，和上面的间距为 1em */
  padding: 1em;
  background: #f5f5f5;
  border-radius: 10px;
  height: 800px; /* 高度根据内容动态调整 */
}
/* 小容器样式 */
.small-container6 {
  flex: 1; /* 让每个小容器均匀分配空间 */
  margin: 0.5em 0; /* 设置上下间距，左右间距可以省略 */
  padding: 1em;
  background: #ffffff; /* 背景为白色 */
  border-radius: 10px;
  text-align: center; /* 居中对齐 */
  height: 800px; /* 高度根据内容动态调整 */
}
/* Survival */

/* Drug */
.bottom-container3 {
  display: flex;
  flex-direction: column; /* 改为纵向排列 */
  width: 90%; /* 与上面的容器宽度一致 */
  margin: 1em auto; /* 自动居中，和上面的间距为 1em */
  padding: 1em;
  background: #f5f5f5;
  border-radius: 10px;
  height: 800px; /* 高度根据内容动态调整 */
}
/* 小容器样式 */
.small-container7 {
  flex: 1; /* 让每个小容器均匀分配空间 */
  margin: 0.5em 0; /* 设置上下间距，左右间距可以省略 */
  padding: 1em;
  background: #ffffff; /* 背景为白色 */
  border-radius: 10px;
  text-align: center; /* 居中对齐 */
  height: 800px; /* 高度根据内容动态调整 */
}
/* Drug */

/* Drug */
.bottom-container4 {
   width: 100%;
  height: 800px;
}
/* 小容器样式 */
.small-container8 {
   width: 100%;
  height: 800px;
}
/* Drug */