/*轮播图*/
.swiper1 {
  width: 100%;
  height: 450rpx;
}
.slide-image {
  width: 100%;
  height: 100%;
  display: block;
}

/* 容器样式 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4列布局 */
  gap: 15rpx;  /* 项目之间的间距 */
  padding: 20rpx;  /* 容器内边距 */
  justify-items: center;  /* 项目居中 */
}

/* 每个项目的样式 */
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 图片样式 */
.grid-item image {
  width: 160rpx;  /* 调整图片大小 */
  height: 160rpx;
  margin-bottom: 10rpx;  /* 图片和文字之间的间距 */
  border-radius: 10rpx;  /* 圆角效果 */
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);  /* 图片阴影效果 */
}

/* 文字样式 */
.grid-item text {
  font-size: 30rpx;
  color: #333;  /* 设置文字颜色 */
  font-weight: bold;  /* 加粗字体 */
  margin:20rpx
}

/* 容器自适应 */
@media screen and (max-width: 375px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);  /* 当屏幕宽度较小（如手机端）时，改为2列布局 */
  }
}

.three{
  margin-top: 20px;
}
.four {
  display: flex;              /* 使用 Flexbox 布局 */
  justify-content: center;    /* 水平居中 */
  align-items: center;        /* 垂直居中 */
  height: 100rpx;            /* 设置高度，以便垂直居中 */
  font-size: 60rpx;          /* 字体大小 */
  color: #333;               /* 字体颜色 */
  font-weight: bold;         /* 加粗字体 */
  margin: 20rpx;
}