.head div{
    font-size:  clamp(0.2px, 2vw, 16px);
}
td{
    font-size:  clamp(0.2px, 3vw, 16px);
}
body{
    background-color:#F5F5F5;
}
.head{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: RGB(51,51,51);
    width: 100%;
    height:30vh;
    margin: 0%;
    color: white;
    font-size: small;
    flex-direction: column;
}

.logo{
    width:100%;
    height:30vh;
    background-color:white;
}

/*.logo ul{
    width:70%;
    display: flex;
    justify-content: center;
    list-style: none;
}
.logo li a{
        font-size: clamp(1px, 4vw, 32px);
        margin-left: 2vw;
}
.logo a:hover{
    color: #29ABE2;
    
}*/
a {
    text-decoration: none; /* 去掉下划线 */
    color: #333;             /* 改为深灰色（或其他你需要的颜色） */
}
.jie_shao{
    display: flex;
    width:100%;
    height:700px;
    justify-content: center;

}
#box>.picbox{
    width: 100%;
    height: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    overflow: hidden;
}
#box>.picbox>image{
    position: absolute;


}
.left_button,.right_button{
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: beige;
    display: flex;
    align-items: center;
    justify-content: center;
}
.left_button{
    left: 0;
}
.right_button{
    right: 0;
}
.points_under_pictures span{
    margin-left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
.picactive{
    display: block;
    max-width: 100%;  /* 图片最大宽度不超过父容器 */
    max-height: 100%; 
}
.pichidden{
    display: none;
}
.butactive{
    background-color: #007ACC;
}
.buthidden{
    background-color:aliceblue;
}

.hero-banner {
  /* 1. 容器基础样式 */
  margin: auto;
  width: 93%;
  height: 40vh; /* 根据需要调整 */
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  overflow: hidden; /* 确保伪元素不溢出 */

  /* 2. 核心：径向渐变背景 */
  /* 中心亮蓝 (#29ABE2)，四周深蓝 (#007ACC) */
  background: radial-gradient(circle at center, #29ABE2 0%, #007ACC 100%);
}

/* 3. 伪元素：添加噪点/颗粒纹理 (关键步骤) */
.hero-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 使用 background-blend-mode 融合噪点和背景色 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  /* 也可以使用 rgba 颜色叠加 */
  /* background-color: rgba(255, 255, 255, 0.05); */
  mix-blend-mode: overlay; /* 或使用 overlay 模式，效果更自然 */
  pointer-events: none;
}

/* 4. 伪元素：右下角光效线条 */
.hero-banner::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  /* 径向渐变做出光斑 */
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
  /* 旋转一下角度 */
  transform: rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}

.content>p{
    font-size: 40px;
}
.hero-bannerb {
  /* 1. 容器基础样式 */
  margin: auto;
  flex-direction: column;
  width: 90%;
  height: 65vh; /* 根据需要调整 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  overflow: hidden; /* 确保伪元素不溢出 */

  /* 2. 核心：径向渐变背景 */
  /* 中心亮蓝 (#29ABE2)，四周深蓝 (#007ACC) */
  background: radial-gradient(circle at center, #29ABE2 0%, #007ACC 100%);
}

/* 3. 伪元素：添加噪点/颗粒纹理 (关键步骤) */
.hero-bannerb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 使用 background-blend-mode 融合噪点和背景色 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  /* 也可以使用 rgba 颜色叠加 */
  /* background-color: rgba(255, 255, 255, 0.05); */
  mix-blend-mode: overlay; /* 或使用 overlay 模式，效果更自然 */
  pointer-events: none;
}

/* 4. 伪元素：右下角光效线条 */
.hero-bannerb::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  /* 径向渐变做出光斑 */
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
  /* 旋转一下角度 */
  transform: rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}
.hero-bannerc {
  /* 1. 容器基础样式 (样式自己修改，样式配套的背景算法是ai生成的，复制粘贴使用就好）*/
  margin: auto;
  flex-direction: column;
  width: 80%;
  height: auto; /* 根据需要调整 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: white;
  position: relative;
  overflow: hidden; /* 确保伪元素不溢出 */

  /* 2. 核心：径向渐变背景 */
  /* 中心亮蓝 (#29ABE2)，四周深蓝 (#007ACC) */
  background: radial-gradient(circle at center, #29ABE2 0%, #007ACC 100%);
}

/* 3. 伪元素：添加噪点/颗粒纹理 (关键步骤) */
.hero-bannerc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 使用 background-blend-mode 融合噪点和背景色 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  /* 也可以使用 rgba 颜色叠加 */
  /* background-color: rgba(255, 255, 255, 0.05); */
  mix-blend-mode: overlay; /* 或使用 overlay 模式，效果更自然 */
  pointer-events: none;
}

/* 4. 伪元素：右下角光效线条 */
.hero-bannerc::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  /* 径向渐变做出光斑 */
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
  /* 旋转一下角度 */
  transform: rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}


.hero-bannerd {
  /* 1. 容器基础样式 (样式自己修改，样式配套的背景算法是ai生成的，复制粘贴使用就好）*/
  width: 80%;
  height: 80vh; /* 根据需要调整 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;

  /* 2. 核心：径向渐变背景 */
  /* 中心亮蓝 (#29ABE2)，四周深蓝 (#007ACC) */
  background: radial-gradient(circle at center, /*RGB(137, 207, 240)*/#29ABE2 0%, #29ABE2 100%);
}

/* 3. 伪元素：添加噪点/颗粒纹理 (关键步骤) */
.hero-bannerd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 使用 background-blend-mode 融合噪点和背景色 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  /* 也可以使用 rgba 颜色叠加 */
  /* background-color: rgba(255, 255, 255, 0.05); */
  mix-blend-mode: overlay; /* 或使用 overlay 模式，效果更自然 */
  pointer-events: none;
}

/* 4. 伪元素：右下角光效线条 */
.hero-bannerd::after {
  content: "";
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  /* 径向渐变做出光斑 */
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);
  /* 旋转一下角度 */
  transform: rotate(45deg);
  opacity: 0.6;
  pointer-events: none;
}






.show_table2{
    border: 1px black solid;
    border-collapse: collapse;
}
.show_table{
    border: 1px black solid;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed; /* 必须加这个，否则列宽会乱 */
    display: table; /* 恢复表格显示，但在包裹层内滚动 */
}
.table-responsive {
    width: 100%;
    height: 100%; /* 占满容器高度 */
    overflow-y: auto; /* 关键：超出则显示滚动条 */
    -webkit-overflow-scrolling: touch; /* 允许iOS滚动 */
}
    
.li1 a{
    color: aqua;
}
.gong_chang{
    width: 40%;
    height: 599px;
    margin-left:9.5% ;
}
.logo{
    width:100%;
    height:120px;
    background-color:white;
    display: flex;
    justify-content: flex-start; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
}
.logo ul{
    width:70%;
    display: flex;
    justify-content: center;
    list-style: none;
}
.logo li{
    margin-left: auto;
    font-size: 30px;
}
.logo a:hover{
    color: #29ABE2;
    
}