/* 宝树千华官网 - 全局响应式适配 */

/* 通用容器：覆盖模板固定宽度 */
.con_1000,
.section,
.news,
.recommend .box,
.news .box,
.lists .box,
.lists .box,
.banner .section {
  width: 100% !important;
  max-width: 1014px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* 首页内容区 */
.recommend .box,
.news .box,
.lists .box {
  width: 100%;
  max-width: 1014px;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 轮播图高度自适应 */
#test1 {
  height: clamp(220px, 42vw, 600px) !important;
}

#test1 canvas {
  width: 100% !important;
  height: 100% !important;
}

/* 商品推荐网格 */
@media (max-width: 992px) {
  .recommend .box .list .list-item3 {
    flex: 0 0 50% !important;
  }

  .recommend .box .list .list-item5 {
    flex: 0 0 33.33% !important;
  }

  .news .box .list .list-item3 {
    flex: 0 0 50% !important;
  }

  .recommend .list-4 .list-4-item.item-1 {
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 1;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .recommend .list-4 .list-4-item.item-2,
  .recommend .list-4 .list-4-item.item-3,
  .recommend .list-4 .list-4-item.item-4,
  .recommend .list-4 .list-4-item.item-5 {
    width: calc(50% - 10px);
    height: auto;
    aspect-ratio: 1;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .recommend .box .list .list-item3,
  .recommend .box .list .list-item5 {
    flex: 0 0 100% !important;
  }

  .news .box .list .list-item3,
  .index-pv2 .box .list .list-item {
    flex: 0 0 100% !important;
  }

  .news .box .list .list-item .list-item-body {
    flex-direction: column;
  }

  .news .box .list .list-item .list-item-body img {
    width: 100%;
    height: auto;
    max-height: 220px;
  }

  .news .box .list .list-item .list-item-body .item-info {
    padding-left: 0;
    padding-top: 10px;
  }

  .recommend .list-4 {
    flex-direction: column;
    align-items: center;
  }

  .recommend .list-4 .list-4-item.item-2,
  .recommend .list-4 .list-4-item.item-3,
  .recommend .list-4 .list-4-item.item-4,
  .recommend .list-4 .list-4-item.item-5 {
    width: 100%;
    max-width: 400px;
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  #test1 {
    height: clamp(180px, 50vw, 280px) !important;
  }
}