/* 清除默认的列表样式 */
ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 容器样式 */
.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 20px;
}

/* 导航样式 */
.navigation {
  width: 15%;
  /* 根据需要设置宽度 */
}

.navigation ul {
  padding: 10px;
}

.navigation li {
  margin-bottom: 10px;
  /* 列表项之间的间距 */
}
.navigation li a {
  color: #313131;
  font-size: 16px;
  font-family: '微软雅黑';
  text-decoration: none;
}

.navigation li a:hover {
  color: #66c5b4;
}

.navigation li .ahov {
  color: #66c5b4;
}




/* 图片样式 */
.images {
  width: 85%;
  display: flex;
  justify-content: space-between;
  /* 图片之间的间距 */
  align-items: center;
  flex-wrap: wrap;
}

.images img {
  flex: 0 0 calc(33.33% - 10px);
  /* 占用容器的三分之一减去间距 */
  max-width: calc(33.33% - 10px);
  /* 最大宽度 */
  margin-bottom: 10px;
  /* 底部间距 */
  /* margin-right: 10px; */
  /* 最后一张图片不需要右边距，可以通过其他方法处理 */
  /* margin-left: 10px; */

  height: auto;
  justify-content: flex-start;

}



.content-section {  
  margin: 30px 0;  
}  

.content-section h2 {
  color: #66c5b4;
  font-size: 35px;
  background: none;
}
  
.text-first, .text-after {  
  width: 100%; /* 各占一半宽度 */  
  display: flex;  
  align-items: flex-start; /* 垂直居中 */  
  margin-bottom: 50px; /* 每个区块底部间隔 */  
  margin-top: 30px;
}  
  
.text-first p, .text-after p {  
  margin-right: 10px; /* 文字与图片的间隔 */  
  font-size: 20px;
  text-indent: 2em;
}  
  
.text-after img {  
  margin-right: 10px; /* 图片与文字的间隔 */  
  order: -1; /* 将图片放在前面 */  
  width: 40%;
} 

.text-first img {  
  margin-right: 10px; /* 图片与文字的间隔 */  
  width: 40%;
} 


/* 可选：移除最后一张图片的右边距 */
/* .images img:last-child {  
    margin-right: 0;  
  } */