/* 容器基础样式 */
.env_con {
  margin: 1.14rem auto 0;
}

.env_short_item,
.env_height_item {
  margin-bottom: 0.8rem;
}

.env_short_item img,
.env_height_item img {
  width: 100%;
  object-fit: cover;
}

.sub_title {
  font-size: 0.24rem;
  color: #000000;
  margin-top: 0.58rem;
  text-align: center;
}

.item_line {
  width: 0.43rem;
  height: 0.03rem;
  background: #f8650d;
  margin: 0.26rem auto 0.33rem;
}

.item_desc {
  font-size: 0.19rem;
  color: #5e6974;
  line-height: 0.32rem;
}

/* 最后一个“大项目”单独样式 */
.env_item_large {
}

.env_bottom {
  width: 100%;
  position: relative;
  margin-top: 1rem;
}

.env_bottom img {
  width: 100%;
  object-fit: cover;
}

.env_bottom .bottom_desc {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: auto;
  z-index: 2;
  font-size: 0.38rem;
  color: #ffffff;
  width: 90%;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* 动画定义：从下往上淡入 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 配合Wow.js的动画类（也可自行用jQuery触发） */
.wow.fadeInUp {
  animation-name: fadeInUp;
  animation-duration: 0.8s;
  animation-fill-mode: both;
}

/* 媒体查询：桌面端（≥768px）两列布局 */
@media screen and (min-width: 768px) {
  .env_con {
    width: min-content;
  }
  .waterfall_flow {
    column-count: 2;
    column-gap: 1.03rem;
  }
  .env_short_item {
    width: 5.54rem; /* 两列，列间距20px */
  }
  .env_height_item {
    width: 5.5rem;
  }
  .env_item_large {
    width: 100%; /* 最后一个项目占满整行 */
  }
  .env_item img {
    margin-bottom: 20px;
  }
}

/* 媒体查询：移动端（≤768px）单列布局 */
@media screen and (max-width: 768px) {
  .item_desc {
    padding: 0 20px;
  }

  .waterfall_flow {
    /* 取消多列布局，改为flex垂直排列 */
    column-count: 1;
    display: flex;
    flex-direction: column;
  }

  /* 调整项目顺序：第2个孩子（项目3）后置，第3个孩子（项目2）前置 */
  .waterfall_flow > div:nth-child(1) {
    /* 对应原项目3 */
    order: 1;
  }
  .waterfall_flow > div:nth-child(2) {
    /* 对应原项目3 */
    order: 3;
  }
  .waterfall_flow > div:nth-child(3) {
    /* 对应原项目2 */
    order: 2;
  }
  .waterfall_flow > div:nth-child(4) {
    /* 项目4：env_short_item */
    order: 4; /* 排在最后 */
  }
}