/*===about===*/

.about-area {
  padding: 6% 0 7%;
  background-image: url(../img/about_bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
}

.about-title {
  width: 8%;
  margin: 0 auto 6%;
}

.about-logo {
  width: 10%;
  margin: 0 auto 5%;
}

.about-detail {
  width: 55%;
  margin: 0 auto;
}

/*===vision===*/

.vision-area {
  display: flex;
  align-items: center;
  margin-bottom: 5%;
}

.vision-title {
  width: 14%;
  margin: 0 auto 5%;
}

.vision-detail {
  width: 63%;
  margin: 0 auto 6%;
}

.vision-sab {
  width: 75%;
  margin: 0 auto;
}

.vision-content {
  width: 65%;
  margin-top: 40px;
}

.vision-photo {
  width: 35%;
}

/*===history===*/

.history-area {
  display: flex;
  align-items: center;
  margin-bottom: 2%;
}

.history-title {
  width: 16%;
  margin: 0 auto 4%;
}

.history-photo {
  width: 35%;
}

.history-content {
  width: 65%;
}

.history-detail {
  width: 55%;
  margin: 0 auto 6%;
}

.history-deco {
  width: 65%;
  margin: 0 auto;
}

/*===feature===*/

.feature-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.feature-photo {
  width: 35%;
}

.feature-content {
  width: 65%;
  margin-top: 40px;
}

.feature-title {
  width: 15%;
  margin: 0 auto 5%;
}

.feature-detail {
  width: 70%;
  margin: 0 auto 3%;
}

.feature-soy {
  display: flex;
  flex-direction: row-reverse;
  width: 85%;
}

/*column*/

.column-area {
  padding: 5% 0 8%;
  background-color: rgba(203, 230, 220, 0.25);
}

.column-title {
  width: 12%;
  margin: 0 auto 2%;
}

.column-sab {
  width: 45%;
  margin: 0 auto 4%;
}

.column-container {
  background-color: #fff;
  padding: 3% 7%;
  display: flex;
  gap: 100px;
  max-width: 1200px;
  margin: 0 auto;
  width: 85%;
}

.column-text {
  margin-bottom: 3%;
}

@media screen and (max-width: 640px) {
  .about-area {
    padding: 20% 0;
  }

  .about-title {
    width: 24%;
    margin: 0 auto 13%;
  }

  .about-logo {
    width: 27%;
    margin: 0 auto 10%;
  }

  .about-detail {
    width: 80%;
  }

  /*==vision===*/

  .vision-area {
    flex-direction: column;
    padding: 10% 0 20%;
    margin-bottom: 0;
  }

  .vision-title {
    width: 23%;
    margin: 0 auto 10%;
  }

  .vision-content {
    width: 100%;
    margin-bottom: 3%;
  }

  .vision-detail {
    width: 84%;
    margin: 0 auto 10%;
  }

  .vision-sab {
    width: 90%;
  }

  .vision-photo {
    width: 100%;
  }

  /*===history===*/

  .history-area {
    align-items: center;
    margin-bottom: 20%;
  }

  .history-title {
    width: 30%;
    margin: 0 auto 8%;
  }

  .history-content {
    width: 100%;
  }

  .history-detail {
    width: 75%;
    margin: 0 auto 8%;
  }

  .history-deco {
    width: 90%;
    margin: 0 auto;
  }

  /*===feature===*/

  .feature-area {
    margin-bottom: 23%;
  }

  .feature-content {
    width: 100%;
  }

  .feature-title {
    width: 30%;
    margin: 0 auto 10%;
  }

  .feature-detail {
    width: 77%;
    margin: 0 auto 2%;
  }

  .feature-soy {
    width: 93%;
  }

  /*===feature===*/

  .column-area {
    padding: 20% 0;
  }

  .column-title {
    width: 30%;
    margin: 0 auto 14%;
  }

  .column-sab {
    width: 70%;
    margin: 0 auto 5%;
  }

  .column-container {
    flex-direction: column;
    padding: 10% 6%;
    gap: 70px;
    width: 90%;
  }

  .column-photo {
    width: 95%;
    margin: 0 auto;
  }
}