@charset "utf-8";

.sustainability {
  width: 100%;
  margin: 14.37rem auto 0;
  text-align: center;
}
.sustainability h2 {
  font-size: 4.5rem;
  margin-bottom: 1rem;
}
.sustainability > p {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--dark-gray);
  margin-bottom: 4rem;
  line-height: 1.6;
}

.sustainabilityArea {
  width: 77.75rem;
  margin: 11.56rem auto 0;
}

.sustainabilityArea .sustainBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10.75rem;
}
.sustainBox:first-child {
  margin-bottom: 10rem;
}
.sustainBox .sustainText {
  width: 32rem;
}
.sustainBox .sustainText h3 {
  font-size: 2.68rem;
  color: var(--black);
  text-align: left;
  margin-bottom: 1.87rem;
  line-height: 1.4;
}
.sustainBox .sustainText > p {
  width: 26.5rem;
  word-break: keep-all;
  font-size: 1.12rem;
  color: var(--dark-gray);
  text-align: left;
  line-height: 1.4;
}
.sustainBox > figure {
  width: 35rem;
  height: 43.75rem;
}
.sustainBox figure img {
  width: 100%;
}

/* ==========노트북 반응형============= */
@media screen and (max-width: 1023px) {
  .sustainability {
    margin: 11.25rem auto 7rem;
  }
  .sustainability h2 {
    font-size: 3.5rem;
    margin-bottom: 0.62rem;
  }
  .sustainability > p {
    font-size: 1.06rem;
  }
  .sustainabilitySwiper .swiper-slide {
    position: relative;
    width: 58.93rem;
    height: 47.5rem;
    overflow: hidden;
  }
  .sustainabilitySwiper .swiper-slide img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    object-fit: cover;
  }
  .sustainabilityArea {
    width: 58.93rem;
    margin: 7.5rem auto 7.5rem;
  }

  .sustainabilityArea .sustainBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 7rem;
  }
  .sustainBox:first-child {
    margin-bottom: 10rem;
  }
  .sustainBox .sustainText {
    width: 25.43rem;
  }
  .sustainBox .sustainText h3 {
    font-size: 2.25rem;
  }
  .sustainBox .sustainText > p {
    width: 25.43rem;
    font-size: 1.06rem;
  }
  .sustainBox > figure {
    width: 26.06rem;
    height: 32.62rem;
  }
  .sustainBox > figure img {
    width: 100%;
  }
}

/* ==========태블릿 반응형============= */
@media screen and (max-width: 860px) {
  .sustainability {
    margin: 11.25rem auto 7rem;
  }
  .sustainability h2 {
    font-size: 3.93rem;
    margin-bottom: 0.62rem;
  }
  .sustainability > p {
    font-size: 1.25rem;
  }
  .sustainabilitySwiper .swiper-slide {
    width: 49.56rem;
    height: 53.25rem;
  }

  .sustainabilityArea {
    width: 49.56rem;
    margin: 7.5rem auto 7.5rem;
  }

  .sustainabilityArea .sustainBox {
    flex-wrap: wrap;
    gap: 3.75rem;
  }
  .sustainBox:first-child {
    margin-bottom: 7rem;
  }
  .sustainBox .sustainText {
    width: 23.12rem;
  }
  .sustainBox .sustainText h3 {
    font-size: 2.56rem;
    word-break: keep-all;
  }
  .sustainBox .sustainText > p {
    width: 23.5rem;
    font-size: 1.25rem;
  }
  .sustainBox > figure {
    width: 21.93rem;
    height: 27.43rem;
  }
}

/* ==========모바일 반응형============= */
@media screen and (max-width: 540px) {
  .sustainability {
    margin: 12.5rem auto 7rem;
  }
  .sustainability h2 {
    font-size: 4rem;
    margin-bottom: 1.25rem;
  }
  .sustainability > p {
    width: 24.37rem;
    font-size: 1.43rem;
    line-height: 1.4;
    margin: 0 auto 3.12rem;
    word-break: keep-all;
  }
  .sustainabilitySwiper .swiper-slide {
    width: 30.31rem;
    height: 53.68rem;
  }

  .sustainabilityArea {
    width: 30.31rem;
    margin: 6.93rem auto 8.68rem;
  }

  .sustainabilityArea .sustainBox {
    gap: 2.5rem;
  }
  .sustainabilityArea .sustainBox:last-child {
    flex-wrap: wrap-reverse;
  }
  .sustainBox:first-child {
    margin-bottom: 7rem;
  }
  .sustainBox .sustainText {
    width: 30.31rem;
  }
  .sustainBox .sustainText h3 {
    font-size: 3rem;
    line-height: 1.3;
  }
  .sustainBox .sustainText > p {
    width: 27.81rem;
    font-size: 1.43rem;
    font-weight: 500;
    line-height: 1.5;
    word-break: keep-all;
  }
  .sustainBox > figure {
    width: 30.31rem;
    height: 37.87rem;
  }
}