/* 设置全局字体 */
body,
button,
input,
textarea,
select {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  /* 防止横向滚动 */
  letter-spacing: 0.5px;
  /* 调整字间距为 1px */
}

/* 其他样式保持不变 */
.box {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  overflow: hidden; /* 改为 overflow: hidden */
  color: azure;
  background: linear-gradient(180deg,
      #ffffff 10%,
      #f9f9ec 30%,
      #efeed1 60%,
      #fefefc 90%,
      #e6e4b4 100%);
}

body {
  overflow-x: hidden;

}


/* 全局链接样式 */
a {
    text-decoration: none; /* 移除下划线 */
    color: inherit; /* 继承父元素的颜色 */
  }

/* Header */
.box .header {
  height: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.box .header .headersvg {
  position: absolute;
  top: -93px;
  right: 15px;
}

/* Header One */
.box .headerone {
  height: 600px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin-top: 50px;
}

.box .headerone>.flipcharts {
  transform: rotate(50deg);
  margin-top: 350px;
  position: relative;
}

.box .headerone>.flipcharts>img {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  clip-path: path("M 400 200 A 50 50 0 1 1 0 200 Q 20 30 200 0 C 275 95 370 80 400 190"
    );
}

.box .headerone>.flipcharts>img:nth-child(1) {
  transform: rotate(52deg) translate(30px, -88px);
}

.box .headerone>.flipcharts>img:nth-child(2) {
  transform: rotate(-125deg) translate(-5px, 8px);
}

.box .headerone>.flipcharts>.circle-text {
  width: 500px;
  height: 500px;
  color: #000;
  position: absolute;
  top: -166px;
  left: 395px;
  transform: rotate(287deg) translate(-167px, 115px);
}


.box .headerone>ul {
  position: absolute;
  right: -250px;
  top: -50px;
}

.box .headerone>ul>li {
  list-style: none;
  margin: 35px 0;
  color: #000;
  font-size: 18px;
}

.box .headerone>ul>li:hover {
  color: #8b8323;
}


/* Header One-02 */
.box .headerone02 {
  height: 300px;
  /* 容器高度 = 图片高度 (561px) + 下移距离 (100px) */
  display: flex;
  justify-content: flex-start; /* 修改：内容从左边开始排列 */
  align-items: flex-start; /* 修改：内容从顶部开始排列 */
  position: relative;
  margin-top: 50px;
  color: #000;

}

.box .headerone02>.flipcharts {
  transform: rotate(50deg);
  margin-top: 350px;
  position: relative;
}

.box .headerone02>.flipcharts>img {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  clip-path: path("M 400 200 A 50 50 0 1 1 0 200 Q 20 30 200 0 C 275 95 370 80 400 190"
    );
}

.box .headerone02>.flipcharts>img:nth-child(1) {
  transform: rotate(52deg) translate(30px, -88px);
}

.box .headerone02>.flipcharts>img:nth-child(2) {
  transform: rotate(-125deg) translate(-5px, 8px);
}

.box .headerone02>.flipcharts>.circle-text {
  width: 500px;
  height: 500px;
  color: #000;
  position: absolute;
  top: -166px;
  left: 395px;
  transform: rotate(287deg) translate(-167px, 115px);
}


.box .headerone02>ul {
  position: absolute;
  right: -250px;
  top: -50px;
}

.box .headerone02>ul>li {
  list-style: none;
  margin: 35px 0;
  color: #000;
  font-size: 18px;
}

.box .headerone02>ul>li:hover {
  color: #8b8323;
}

.box .headerone02 img {
    width: 700px;
  }

  .box .headerone02 .spanone {
    position: absolute;
    top: -30px;
    left: 250px;
    font-size: 30px;
    font-weight: bold; /* 字体加粗 */
    margin-top: 200px; /* 整体下移 200px */
  }

  .box .headerone02 .spantwo {
    display: block;
    width: 780px;
    margin-left: 250px;
    margin-top: 0px;
  }


/* 左边内容样式 */
.box .headerone02 .left-content {
    display: flex;
    align-items: left; /* 图片和文字垂直居中 */
    gap: 20px; /* 图片和文字之间的间距 */
    margin-top: 200px; /* 整体下移 200px */
  }









  


/* Header Two */
.box .headertwo {
  margin: 200px 0 100px 0;
  position: relative;
  color: #000;

}

.box .headertwo img {
  width: 700px;
}

.box .headertwo .spanone {
  position: absolute;
  top: -30px;
  left: 250px;
  font-size: 30px;
  
}

.box .headertwo .spantwo {
  display: block;
  width: 450px;
  margin-left: 400px;
  margin-top: 20px;
}




/* Header Two02 */
.box .headertwo02 {
  margin: 100px 0 100px 0;
  position: relative;
  color: #000;
  height: 600px;


  background-image: url(../src/_Path_-2.png);
  background-repeat: no-repeat;
  background-size: 100% 561px;
  /* 保持图片原始高度，宽度按比例自适应 */
  background-position: center 350px;
  /* 图片水平居中，垂直方向向下偏移 100px */

}




.box .headertwo02 img {
  width: 700px;
}

.box .headertwo02 .spanone {
  position: absolute;
  top: -30px;
  left: 250px;
  font-size: 30px;
  font-weight: bold; /* 字体加粗 */
}

.box .headertwo02 .spantwo {
  display: block;
  width: 750px;
  margin-left: 400px;
  margin-top: 20px;
  line-height: 25px; /* 行间距设置为 13px */
  color: #4C4C4C; /* 字体颜色设置为 #4C4C4C */
}


.box .headertwo02 .spantwo01 {
    display: block;
    width: 450px;
    margin-left: 400px;
    margin-top: 20px;
    line-height: 20px; /* 行间距设置为 13px */
    font-size: 20px;
    color: #8b8323; /* 字体颜色设置为 #4C4C4C */
  }
  .box .headertwo02 .spantwo02 {
    display: block;
    width: 450px;
    margin-left: 600px;
    margin-top: 20px;
    line-height: 20px; /* 行间距设置为 13px */
    font-size: 20px;
    color: #8b8323; /* 字体颜色设置为 #4C4C4C */
  }




.box .headertwo02 ul li {
  align-items: center;
  color: #8b8323;
  list-style: none;
  margin: 15px 0;
  margin-left: -40px;
}


/* 图片容器样式 */
.box .headertwo02 .image-container {
    width: 100%; /* 容器宽度占满父容器 */
    max-width: 1240px; /* 最大宽度为图片宽度 */
    margin: 0 auto; /* 水平居中 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
  
  /* 图片样式 */
  .box .headertwo02 .image-container img {
    width: 100%; /* 图片宽度占满容器 */
    height: auto; /* 高度自适应，保持比例 */
    display: block; /* 防止图片下方出现空白间隙 */
  }


/* Header Two03 */
.box .headertwo03 {
    margin: 100px 0 100px 0;
    position: relative;
    color: #000;

  
  }
  
  
  
  
  .box .headertwo03 img {
    width: 700px;
  }
  
  .box .headertwo03 .spanone {
    position: absolute;
    top: -30px;
    left: 250px;
    font-size: 30px;
    font-weight: bold; /* 字体加粗 */
  }
  
  .box .headertwo03 .spantwo {
    display: block;
    width: 800px;
    margin-left: 400px;
    margin-top: 20px;
    line-height: 50px; /* 行间距设置为 13px */
    font-size: 35px;
    color: #8b8323; /* 字体颜色设置为 #4C4C4C */
  }
  
  
  .box .headertwo03 .spantwo01 {
      display: block;
      width: 450px;
      margin-left: 400px;
      margin-top: 20px;
      line-height: 20px; /* 行间距设置为 13px */
      font-size: 20px;
      color: #8b8323; /* 字体颜色设置为 #4C4C4C */
    }
    .box .headertwo03 .spantwo02 {
      display: block;
      width: 450px;
      margin-left: 600px;
      margin-top: 20px;
      line-height: 20px; /* 行间距设置为 13px */
      font-size: 20px;
      color: #8b8323; /* 字体颜色设置为 #4C4C4C */
    }
  
  
  
  
  .box .headertwo03 ul li {
    align-items: center;
    color: #8b8323;
    list-style: none;
    margin: 15px 0;
    margin-left: -40px;
  }
  
  
  /* 图片容器样式 */
  .box .headertwo03 .image-container {
      width: 100%; /* 容器宽度占满父容器 */
      max-width: 1044px; /* 最大宽度为图片宽度 */
      margin: 0 auto; /* 水平居中 */
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }
    
    /* 图片样式 */
    .box .headertwo03 .image-container img {
      width: 100%; /* 图片宽度占满容器 */
      height: auto; /* 高度自适应，保持比例 */
      display: block; /* 防止图片下方出现空白间隙 */
    }
  

/* Header Two04 */
.box .headertwo04 {
    margin: 100px 0 100px 0;
    position: relative;
    color: #000;
    height: 1200px;
  
  
    background-image: url(../src/_Path_-2.png);
    background-repeat: no-repeat;
    background-size: 100% 561px;
    /* 保持图片原始高度，宽度按比例自适应 */
    background-position: center 650px;
    /* 图片水平居中，垂直方向向下偏移 100px */
  
  }
  
  
  
  
  .box .headertwo04 img {
    width: 700px;
  }
  
  .box .headertwo04 .spanone {
    position: absolute;
    top: -30px;
    left: 250px;
    font-size: 30px;
    font-weight: bold; /* 字体加粗 */
  }
  
  .box .headertwo04 .spantwo {
    display: block;
    width: 750px;
    margin-left: 400px;
    margin-top: 20px;
    line-height: 25px; /* 行间距设置为 13px */
    color: #4C4C4C; /* 字体颜色设置为 #4C4C4C */
  }
  
  
  .box .headertwo04 .spantwo01 {
      display: block;
      width: 450px;
      margin-left: 400px;
      margin-top: 20px;
      line-height: 20px; /* 行间距设置为 13px */
      font-size: 20px;
      color: #8b8323; /* 字体颜色设置为 #4C4C4C */
    }
    .box .headertwo04 .spantwo02 {
      display: block;
      width: 450px;
      margin-left: 600px;
      margin-top: 20px;
      line-height: 20px; /* 行间距设置为 13px */
      font-size: 20px;
      color: #8b8323; /* 字体颜色设置为 #4C4C4C */
    }
  
  
  
  
  .box .headertwo04 ul li {
    align-items: center;
    color: #8b8323;
    list-style: none;
    margin: 15px 0;
    margin-left: -40px;
  }
  
  
  /* 图片容器样式 */
  .box .headertwo04 .image-container {
      width: 100%; /* 容器宽度占满父容器 */
      max-width: 654px; /* 最大宽度为图片宽度 */
      margin-left: 400px; /* 水平居中 */
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
    }
    
    /* 图片样式 */
    .box .headertwo04 .image-container img {
      width: 100%; /* 图片宽度占满容器 */
      height: auto; /* 高度自适应，保持比例 */
      display: block; /* 防止图片下方出现空白间隙 */
    }




/* Header Three */
.box .headerthree {
  width: 100%;
  margin-top: 100px;
  height: 500px;
 
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/*
.box .headerthree > div > img {
  width: 298px;
  height: 298px;
  border-radius: 50%;
  clip-path: path(
    "M 310 150 A 50 60 0 1 1 0 150 Q 10 20 150 0 C 200 130 230 100 270 280 "
  );
}
.box .headerthree .headerthree-one {
  position: relative;
  transform: rotate(5deg) translate(50px, 40px);
}
.box .headerthree .headerthree-one .svg {
  position: absolute;
  bottom: -202px;
  right: -20px;
  font-size: 10px;
  transform: rotate(-30deg) translate(-76px, -43px);
}


.box .headerthree > div > img:nth-child(1) {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  clip-path: path(
    "M 360 180 A 50 50 0 1 1 0 180 Q 20 30 160 0 C 190 100 260 80 350 250"
  );
  transform: rotate(0deg) translate(150px, 40px);
}


.box .headerthree > div > img:nth-child(2) {
  transform: rotate(169deg) translate(20px, 110px);
}
.box .headerthree .spanone {
  display: block;
  color: #000;
  position: absolute;
  top: -5px;
  left: 480px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

*/

/* Header Four */
.box .headerfour {
  width: 100%;
  margin-top: 130px;
  padding: 30px 0;
  color: #000;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  /* 底部对齐 */
}

.divbox {
  width: 100%;
  position: absolute;
  margin-top: 50px;
  color: #000;
}

.divbox>img {
  width: 800px;
}

.divbox>span {
  position: absolute;
  left: 250px;
  top: -50px;
  font-size: 30px;
}

.box .headerfour>span {

  width: 450px;
  margin-left: 300px;
  margin-top: 20px;



}

.headerfour-content {
  display: flex;
  gap: 100px;
  /* 调整两段文字之间的间隔 */
  max-width: 1000px;
  /* 根据需要调整最大宽度 */
  margin: 0 auto;
  /* 居中 */
  align-items: flex-end;
  /* 确保两段文字底部对齐 */
}

.headerfour-content .text-block {
  width: 40%;
  /* 每段文字占 48% 宽度 */
  display: inline-block;
  vertical-align: bottom;
  /* 确保文字底部对齐 */

}

/* 调整第一段文字向右移动 */
.headerfour-content .text-block:first-child {
  margin-left: -65px;
}

/* Header Five */
.box .headerfive {
  width: 100%;
  display: flex;
  flex-direction: column;

}

.box .headerfive .headerfive-one {
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 250px;
}

.box .headerfive .headerfive-one img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transform: rotate(-90deg);
  margin: 0 -70px;
  clip-path: path("M 310 150 A 50 60 0 1 1 0 150 Q 10 20 150 0 C 180 100 245 90 280 235"
    );
}

.box .headerfive span {
  color: #000;
  margin-top: 60px;
  margin-left: 250px;
  font-size: 30px;
}

.box .headerfive ul li {
  align-items: center;
  color: #8b8323;
  list-style: none;
  margin: 25px 0;
  margin-left: 320px;

}

/* Header Five02 */
.box .headerfive02 {





}






/* Header Six */
.box .headersix {
  margin-top: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative; /* 新增：为子元素绝对定位提供参考 */
  min-height: 240px;     /* 根据实际内容调整高度 */
  overflow: hidden;      /* 隐藏内部溢出 */
}

.box .headersix ul {
  margin-left: 210px;  /* 直接设置左侧外边距 */
  flex-shrink: 0;      /* 禁止 Flex 子元素被压缩 */
  position: absolute;  /* 脱离 Flex 流，独立定位 */
  left: 0;             /* 对齐到父容器左侧 */


}

.box .headersix ul li {
  margin: 0 0 2px 0;
  list-style: none;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
}

.box .headersix ul li:hover {
  color: #8b8323;
}

.box .headersix .headersix-box {
  margin-left: auto;   /* 自动填充右侧剩余空间 */
  flex-shrink: 0;      /* 禁止被压缩 */
  width: 65%;
  display: flex;
  flex-wrap: wrap;
  gap: 0px;

}

.box .headersix .headersix-box>div {
  width: 40%;
  color: #000;
}

.box .headersix .headersix-box>div p {
  display: flex;
  align-items: center;
  margin: 6px 0;
  line-height: 1;
  font-size: 18px;
  /* 默认字体大小 */
  font-weight: normal; /* 确保文本不变粗 */
}

.box .headersix .headersix-box>div p:not(:first-child) {
  font-size: 14px;
  /* 除了第一行，其他段落字体更小 */
}

.box .headersix .headersix-box>div p img {
  margin-right: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .box .headersix {
    flex-direction: column;
    align-items: center;
  }

  .box .headersix ul {
    margin-left: 0;
    text-align: center;
  }

  .box .headersix .headersix-box>div {
    width: 100%;
  }

  .box .headersix ul li {
    font-size: 12px;
    margin: 0 0 10px 0;
  }

  .box .headersix .headersix-box>div p {
    font-size: 16px;
    /* 小屏幕上默认字体大小 */
  }

  .box .headersix .headersix-box>div p:not(:first-child) {
    font-size: 14px;
    /* 小屏幕上其他段落字体更小 */
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .box .headersix {
    flex-direction: column;
    /* 小屏幕上垂直排列 */
    align-items: center;
    /* 内容居中 */
  }

  .box .headersix ul {
    margin-left: 0;
    /* 取消左边距 */
    text-align: center;
    /* 文字居中 */
  }

  .box .headersix .headersix-box>div {
    width: 100%;
    /* 小屏幕上每行显示一块 */
  }

  .box .headersix ul li {
    font-size: 16px;
    /* 小屏幕上字体更小 */
    margin: 0 0 8px 0;
    /* 调整间距 */
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  .spacer {
    height: 3vh;

    /* 在小屏幕上减小空行高度 */
    .wave-effect img {
      width: 100%;
      /* 小屏幕上图片宽度占满容器 */
      height: auto;
      /* 高度自适应 */
    }
  }


  .headerone>div,
  .headerone>ul {
    width: 100% !important;
    /* 在小屏幕上占满宽度 */
  }

  .box .headerone {
    flex-direction: column;
    /* 在小屏幕上垂直排列 */
    height: auto;
  }

  .box .headerone>ul {
    position: static;
    /* 取消绝对定位 */
    right: auto;
    top: auto;
    width: 100%;
    text-align: center;
    /* 文字居中 */
  }

  .box .headerone>.flipcharts {
    transform: none;
    /* 取消旋转 */
    margin-top: 0;
  }

  .box .headerone>.flipcharts>img {
    width: 100%;
    /* 图片宽度占满容器 */
    height: auto;
  }

  .box .headertwo img {
    width: 100%;
    /* 图片宽度占满容器 */
  }

  .box .headertwo .spantwo {
    width: 100%;
    /* 文本宽度占满容器 */
    margin-left: 0;
  }

  .box .headerthree {
    flex-direction: column;
    /* 在小屏幕上垂直排列 */
    height: auto;
  }

  .box .headerthree>div>img {
    width: 100%;
    /* 图片宽度占满容器 */
    height: auto;
  }

  .box .headerfive .headerfive-one {
    flex-direction: column;
    /* 在小屏幕上垂直排列 */
    padding: 0;
  }

  .box .headerfive .headerfive-one img {
    width: 100%;
    /* 图片宽度占满容器 */
    height: auto;
    margin: 10px 0;
    /* 调整间距 */
  }

  .box .headerfive ul li {
    margin-left: 0;
    /* 取消左边距 */
    text-align: center;
    /* 文字居中 */
  }
}

/* 定义波动动画 */
@keyframes waveEffect {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 应用动画到图片 */

.wave-effect {
  width: auto;
  /* 容器宽度自适应 */
  margin: 0 auto;
  /* 水平居中 */
}

.wave-effect img {
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* 平滑过渡 */
  width: auto;
  /* 图片宽度自适应 */
  height: auto;
  /* 图片高度自适应 */
  max-width: none;
  /* 移除最大宽度限制 */
}

.wave-effect img:hover {
  animation: waveEffect 0.5s ease-in-out 2;
  /* 波动 2 次 */
}

sup {
  font-size: 0.6em;
  /* 调整 ®️ 符号的大小 */
  vertical-align: super;
  /* 确保 ®️ 符号在右上角 */
}





/* 定义波动动画 */
@keyframes bounce-effect {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  50% {
    transform: scale(0.9);
    opacity: 1;
  }

  100% {
    transform: scale(0.8);
    opacity: 1;
  }
}

/* 应用动画到图片 */
.bounce-effect img {
  transform: scale(0.8);
  /* 默认缩小到 90% */
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* 平滑过渡 */
}

.bounce-effect img:hover {
  transform: scale(0.8);
  /* 恢复到 100% */
  animation: bounce-effect 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2;
  /* 更平滑的动画 */
}



.container {
  text-align: center;
  /* 水平居中 */
  width: 100%;
  /* 容器宽度占满父容器 */

  display: flex;
  /* 使用 Flexbox 布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */

  position: relative;
  /* 确保子元素的绝对定位相对于此容器 */
  max-width: 100%;
  min-height: 100vh;
  /* 确保容器高度足够 */

}

.container img {
  max-width: 100%;
  /* 图片宽度自适应容器 */
  max-height: 100%;
  /* 图片高度自适应容器 */
  height: auto;
  /* 保持图片比例 */
  width: auto;
  /* 保持图片比例 */
}

.circle-container {
  color: #000;
  position: relative;
  width: 300px;
  height: 300px;
}

.circle-container span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 20px;
}

.circle-container span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg);
}

.circle-container span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(30deg);
}

.circle-container span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(60deg);
}