body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  
}

#page-container {
  padding: 20px;
}

.module {
  margin-bottom: 40px;
}

.module3 {
  margin-bottom: 20px;
}

.one {
  display: flex;
  align-items: center;/* 让子元素在垂直方向居中 */
}

.logo{
  width: 160px;/* 设置图标宽度 */
  height: 70px;/* 设置图标高度 */
  margin-right: 100px;
}

.button {
  margin-left: auto; /* 利用 margin-left 的 auto 值将按钮推到最右边 */
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
.button:hover {
  background-color: #0056b3;
}

a{
  /* color: inherit; */
  text-decoration: none;
}

h1 {
  font-size: 36px;
  color: #333;
  line-height: 1.5;
}

h2 {
  font-size: 28px;
  color: #555;
  line-height: 1.5;
}

h3{
  margin-top: 15px;
  margin-bottom: 5px;
}

p {
  font-size: 16px;
  line-height: 2;
  color: #777;
  text-indent: 2em; 
}

.end{
  font-size: 20px;
  line-height: 2;
  color: #888;
  text-indent: 2em; 
}

.end3{
  text-align: center;
  margin-top: 30px;
}

.end1{
  font-size: 24px;
  color: #666;
}

.box{
  height: 30px;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-item {
  width: calc(16.66% - 10px);
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.image-item img {
  width: 100%;
  height: auto;
  margin-right: 5px;
}

.flowcart{
  width: calc(80% - 10px);
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .image-item {
       width: 32%; /* 在屏幕宽度小于等于 768px（比如平板）时，每排三个盒子，每个盒子占 33.33%左右 */
   }
   .logo{
    width: 80px;/* 设置图标宽度 */
    height: 30px;/* 设置图标高度 */
    margin-right: 50px;
  }
  h1 {
    font-size: 24px;
    color: #333;
  }
  
  h2 {
    font-size: 20px;
    color: #555;
  }
}
@media (max-width: 480px) {
  .image-item {
       width: 48%; /* 在屏幕宽度小于等于 480px（手机屏幕大小）时，每排两个盒子，每个盒子占 50%左右 */
   }
   .logo{
    width: 60px;/* 设置图标宽度 */
    height: 30px;/* 设置图标高度 */
    margin-right: 20px;
  }
   h1 {
    font-size: 20px;
    color: #333;
  }
  
  h2 {
    font-size: 18px;
    color: #555;
  }
  .button {
    margin-left: auto; /* 利用 margin-left 的 auto 值将按钮推到最右边 */
    padding: 5px 5px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
  }
}

ol {
  margin-left: 20px;
}

li {
  margin-bottom: 10px;
}


/* 动图 */
/*
vars
*/
:root {
  --tagcloud-transition-user-duration: 1250ms;
  --tagcloud-transition-user-ease: ease-in-out;
  --tagcloud-transition-duration: 250ms;
  --tagcloud-transition-ease: ease-out;
  --tagcloud-bg-color-rgb: 255, 255, 255;
  --tagcloud-animation-duration: 25s;
  --tagcloud-animation-direction: normal;
  --tagcloud-animation-play-state: running;
  --tagcloud-diameter: 32rem;
  --tagcloud-start-rotation: 54;
  --tagcloud-controls-diameter: 256rem;
  --tagcloud-control-bg-color: transparent;
  --tagcloud-control-bg-hover-color: transparent;
  --tagcloud-control-bg-checked-color: transparent;
  --tag-diameter: 5.5rem;
  --tag-font-color-rgb: 222, 101, 23;
  --tag-font-family: 'Open Sans', sans-serif;
  --tag-font-size: 1rem;
}

/*
global
*/
@import url(css.css);

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

.tu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55vh;
  background-color: rgb(var(--tagcloud-bg-color-rgb));
  overflow: hidden;
}

/*
tagcloud
*/
.tagcloud-wrapper {
  --_control-diamater: var(--tagcloud-controls-diameter);
  --_control-radius: calc(var(--_control-diamater) / 2);
  --_diameter: var(--tagcloud-diameter);
  --_radius: calc(calc(var(--_diameter) / 2) - calc(var(--tag-diameter) / 2));
  width: var(--control-diameter);
  aspect-ratio: 1 / 1;
  font-family: var(--tag-font-family);
  font-size: var(--tag-font-size);
}

@media only screen and (max-width: 48rem) {
  .tagcloud-wrapper {
      --_control-diamater: calc(var(--tagcloud-controls-diameter) * 0.5);
      --_diameter: calc(var(--tagcloud-diameter) * 0.88);
  }
}
@media only screen and (max-width: 32rem) {
  .tagcloud-wrapper {
      --_diameter: calc(var(--tagcloud-diameter) * 0.75);
  }
}

.tagcloud-wrapper:has(.tagcloud-rotation:hover)  {
  --tagcloud-animation-play-state: paused;
}

.tagcloud-wrapper .tagcloud-tags {
  position: absolute;
  width: var(--_diameter);
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  list-style-type: none;
  position: relative;
  transform-style: inherit;
  animation: tagcloud-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction) linear infinite var(--tagcloud-animation-play-state);
}

@keyframes tagcloud-rotation {
  from {transform: translate(-50%, -50%) rotateX(0deg);}
  to {transform: translate(-50%, -50%) rotateX(360deg);}
}

.tagcloud-wrapper .tagcloud-tags:has(.tagcloud-tag div a:hover) .tagcloud-tag:not(:has(div a:hover)) {
  opacity: 0.25;
}

.tagcloud-wrapper .tagcloud-tag {
  --_phi: acos(calc(-1 + (2 * var(--index)) / var(--num-elements)));
  --_theta: calc(sqrt(calc(var(--num-elements) * 3.141592653589793)) * var(--_phi));
  --_x: calc(cos(var(--_theta)) * sin(var(--_phi)));
  --_y: calc(sin(var(--_theta)) * sin(var(--_phi)));
  --_z: calc(cos(var(--_phi)));
  --_vector-length: sqrt(var(--_x) * var(--_x) + var(--_y) * var(--_y) + var(--_z) * var(--_z));
  --_normalized-x: calc(var(--_x) / var(--_vector-length));
  --_normalized-y: calc(var(--_y) / var(--_vector-length));
  --_normalized-z: calc(var(--_z) / var(--_vector-length));
  --_scaled-x: calc(var(--_normalized-x) * var(--_radius));
  --_scaled-y: calc(var(--_normalized-y) * var(--_radius));
  --_scaled-z: calc(var(--_normalized-z) * var(--_radius));
  --_final-x: calc(var(--_scaled-x) + var(--_radius));
  --_final-y: calc(var(--_scaled-y) + var(--_radius));
  --_final-z: var(--_scaled-z);
  pointer-events: none;
  width: var(--tag-diameter);
  height: var(--tag-diameter); 
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: opacity var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);
  transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z));
  animation: tagcloud-tag-rotation var(--tagcloud-animation-duration) var(--tagcloud-animation-direction) linear infinite var(--tagcloud-animation-play-state);
}

@keyframes tagcloud-tag-rotation {
  from {transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(360deg);}
  to {transform: translate3d(var(--_final-x), var(--_final-y), var(--_final-z)) rotateX(0deg);}
}

.tagcloud-wrapper .tagcloud-tag div {
  transform: rotateZ(calc(var(--_current-rotation) * -1deg));
  transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
}

.tagcloud-wrapper .tagcloud-tag div a {
  pointer-events: initial;
  color: rgb(var(--tag-font-color-rgb));
  text-decoration: none;
  text-shadow: 1px  1px 1px rgb(var(--tagcloud-bg-color-rgb)),
                  1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)),
                  -1px  1px 1px rgb(var(--tagcloud-bg-color-rgb)),
                  -1px -1px 1px rgb(var(--tagcloud-bg-color-rgb)), 
                  0 0 1rem rgb(var(--tagcloud-bg-color-rgb));
}

.tagcloud-wrapper .tagcloud-controls {
  width: var(--_control-diamater);
  aspect-ratio: 1 / 1;
  position: relative;
  --_current-rotation: var(--tagcloud-start-rotation);
  transform-style: inherit;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button {
  --_width: var(--_control-radius);
  --_height: calc(var(--_control-diamater) * 3.141592653589793 / var(--num-elements) + 1px);
  --_theta-start: 0;
  --_theta-length: calc(2 * 3.141592653589793);
  --_segment: calc(var(--_theta-start) + var(--index) / var(--num-elements) * var(--_theta-length));
  --_x: calc(var(--_control-radius) * cos(var(--_segment)));
  --_y: calc(var(--_control-radius) * sin(var(--_segment)) + var(--_control-radius) - var(--_height) / 2);
  --_rotation: calc(var(--index) / var(--num-elements) * 360deg);
  position: absolute;
  left: var(--_x);
  top: var(--_y);
  width: var(--_width);
  height: var(--_height);
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
  transform-origin: right center;
  transform: rotate(var(--_rotation));
  transition: background-color var(--tagcloud-transition-duration) var(--tagcloud-transition-ease);
  background-color: var(--tagcloud-control-bg-color);
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button input {
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) {
  background-color: var(--tagcloud-control-bg-checked-color);
}
.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:hover) {
  background-color: var(--tagcloud-control-bg-hover-color);
}

.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(1) input:checked) {
  --_current-rotation: 108;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(2) input:checked) {
  --_current-rotation: 126;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(3) input:checked) {
  --_current-rotation: 144;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(4) input:checked) {
  --_current-rotation: 162;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(5) input:checked) {
  --_current-rotation: 180;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(6) input:checked) {
  --_current-rotation: 198;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(7) input:checked) {
  --_current-rotation: 216;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(8) input:checked) {
  --_current-rotation: 234;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(9) input:checked) {
  --_current-rotation: 252;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(10) input:checked) {
  --_current-rotation: 270;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(11) input:checked) {
  --_current-rotation: 288;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(12) input:checked) {
  --_current-rotation: 306;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(13) input:checked) {
  --_current-rotation: 324;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(14) input:checked) {
  --_current-rotation: 342;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(15) input:checked) {
  --_current-rotation: 0;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(16) input:checked) {
  --_current-rotation: 18;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(17) input:checked) {
  --_current-rotation: 36;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(18) input:checked) {
  --_current-rotation: 54;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(19) input:checked) {
  --_current-rotation: 72;
}
.tagcloud-wrapper .tagcloud-controls:has(.tagcloud-control-button:nth-child(20) input:checked) {
  --_current-rotation: 90;
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) ~ .tagcloud-rotation {
  transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-control-button:has(input:checked) ~ .tagcloud-rotation .tagcloud-tags .tagcloud-tag div {
  transform: rotateZ(calc(var(--_current-rotation) * -1deg));
}

.tagcloud-wrapper .tagcloud-controls .tagcloud-rotation {
  position: absolute;
  width: var(--_diameter);
  aspect-ratio: 1 / 1;
  perspective: calc(var(--_diameter) * 2);
  transform-style: preserve-3d;
  left: 50%;
  top: 50%;
  background: radial-gradient(rgba(var(--tagcloud-bg-color-rgb), 0.75) 15% , rgba(var(--tagcloud-bg-color-rgb), 0) calc(75% - var(--tag-diameter)));
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--_current-rotation) * 1deg));
  transition: transform var(--tagcloud-transition-user-duration) var(--tagcloud-transition-user-ease);
}