/* =========================
           Responsive
   ========================= */

.section--aboutus {
  background-image: var(--bg-mobile, var(--bg-tablet, var(--bg-desktop)));
  background-position: 20% 50%;
  color: var(--brand-black-color);
  background-color: var(--brand-grey-color);
}

.section--aboutus h1,
.section--aboutus h2,
.section--aboutus h3,
.section--aboutus p,
.section--aboutus a {
  color: var(--brand-black-color);
}

.wrap--aboutus {
  grid-template-areas: "title" "text" "pic";
  padding: 20px 20px clamp(100px, 30vw, 200px) 20px;
}

/* =========================
           文字部分
   ========================= */

.text-box {
  grid-area: text;
  width: auto;
  margin-bottom: 40px;
}

.text-box__subtitle {
  /* color: var(--brand-grey-color); */
  /* font-family: inherit; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 0;
}

.text-box__title {

  /* font-family: inherit; */
  white-space: normal; /* 恢复默认换行 */
  overflow-wrap: break-word; /* 允许在长单词或URL内部换行 */
  padding-top: 2px;
  margin-block-start: 0;
}

.text-box__desc {
  padding-top: 20px;
  /* font-family: inherit; */

  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
}

/* .text .desc p {
  margin: 0;
} */

/* =========================
           图片部分
   ========================= */

/* 图片区：桌面“散点式”，小屏会改网格/堆叠 */
.pic-box {
  grid-area: pic;
  display: grid;

  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: auto auto;
  gap: 40px 10px;
  position: relative;
}


/* 桌面的 3 张图定位（可再微调） */
.pic-box__item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;

}

.pic-box__item2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;

}

.pic-box__item3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;

}

.pic-box__image1,
.pic-box__image1 img {

  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  display: block;

}

.pic-box__image2,
.pic-box__image2 img {

  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  display: block;

}

.pic-box__image3,
.pic-box__image3 img {

  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  display: block;

}

/* .pic img {

  width: 100%;
  height: auto;

  object-fit: cover;
  display: block;

} */

/* =========================
           装饰图部分
   ========================= */
.deco-item-left {
  position: absolute;
  bottom: 10px;
  opacity: 1;
  height: auto;

}

.deco-item-left--aboutus {
  left: 3%;
  width: 35%;
  /* width: 250px; */
}

.deco-item-right {
  position: absolute;
  bottom: 20px;
  opacity: .55;
}

.deco-item-right--aboutus {
  width: 10vw;
  right: 3%;
}

.deco-item-righttop {
  position: absolute;
  top: 0;

  right: 0;
  opacity: .55;
}

.deco-item-righttop--aboutus {
  width: 60vw;
}

.deco-image__img,
.deco-image__img img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================
   断点768px
   ========================= */

@media(min-width: 768px) {
  .section--aboutus {
    background-image: var(--bg-tablet, var(--bg-desktop));
  }

  .pic-box {
    gap: 40px 40px;
    /* grid-template-columns: 2fr 1fr; */
  }

  .pic-box__image1,
  .pic-box__image1 img {
    justify-self: end;
    width: 80%;

  }

  .pic-box__image2,
  .pic-box__image2 img {

    width: 80%;
    justify-self: start;

  }

  .pic-box__image3,
  .pic-box__image3 img {

    width: 80%;
    justify-self: start;

  }



}

/* =========================
   断点1024px
   ========================= */

@media (min-width: 1024px) {
  .section--aboutus {
    background-image: var(--bg-desktop);
  }



  .pic-box {
    gap: 10px 10px;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
  }

  .wrap--aboutus {
    min-height: 100vh;
    min-height: 100dvh;
    grid-template-columns: 1fr 1.2fr;
    grid-template-rows: auto 1fr;
    /* 第一行高度自适应，第二行撑满剩余 */
    grid-template-areas:
      "title pic"
      "text  pic";
    align-items: start;
    /* 从顶部开始对齐 */
    gap: 2rem 3rem;
    padding-bottom: 50px;
  }

  .pic-box__image1,
  .pic-box__image1 img {
    aspect-ratio: 3 / 4;
    justify-self: center;
    width: 85%;

  }

  .pic-box__image2,
  .pic-box__image2 img {
    aspect-ratio: 3 / 4;
    width: 85%;
    justify-self: end;

  }

  .pic-box__image3,
  .pic-box__image3 img {
    aspect-ratio: 3 / 4;
    width: 85%;
    justify-self: end;

  }


  /* .pic .img01,
   .pic .img02,
   .pic .img03 {
    aspect-ratio: 9 / 16;


  } */

  /* .pic .img01 {
    width: clamp(300px, 30vw, 400px);
    justify-self: center;
  }

   .pic .img02 {
    width: clamp(150px, 15vw, 200px);
  }

   .pic .img03 {
    width: clamp(150px, 15vw, 185px);

  } */

  .deco-item-left--aboutus {
    width: 300px;
  }

  .deco-item-right--aboutus {
    width: clamp(75px, 8vw, 80px);

  }

  .deco-item-righttop--aboutus {
    display: none;
  }
}
@media (min-width: 1024px) and (max-height: 850px) {
  .deco-item-left--aboutus {
    display: none;
  }
  }