@charset "UTF-8";
/*=================================================
    컬러
=================================================*/
/*=================================================
    폰트
=================================================*/
/*=================================================
    미디어쿼리
=================================================*/
.subtop-wrap {
  background-image: url("../imgs/subtop_review.png");
}
@media screen and (max-width: 767.98px) {
  .subtop-wrap {
    background-image: url("../imgs/subtop_review_m.png");
  }
}
.subtop-wrap .lg {
  font-size: 48px;
}
@media screen and (max-width: 1199.98px) {
  .subtop-wrap .lg {
    font-size: 4.0033361134vw;
  }
}
@media screen and (max-width: 991.98px) {
  .subtop-wrap .lg {
    font-size: 22px;
  }
}
.subtop-wrap .title {
  color: #2b4865;
}

#section01 {
  margin-bottom: 90px;
}
@media screen and (max-width: 991.98px) {
  #section01 {
    margin-bottom: 45px;
  }
}
#section01 .area {
  display: flex;
  justify-content: center;
flex-wrap: wrap;
    row-gap: 13px;
}
#section01 .area p {
  font-size: 35px;
  font-weight: 700;
  position: relative;
  padding: 0 20px;
  line-height: 1;
}
@media screen and (max-width: 991.98px) {
  #section01 .area p {
    font-size: 20px;
    padding: 0 10px;
  }
}
@media screen and (max-width: 543.98px) {
  #section01 .area p {
    font-size: 16px;
    padding: 0 8px;
  }
}
@media screen and (max-width: 373px) {
  #section01 .area p {
    font-size: 12px;
  }
}
#section01 .area p::after {
  position: absolute;
  left: 0;
  width: 4px;
    height: 84%;
    background-color: #505050;
    content: "";
    top: 50%;
    transform: translateY(-50%);
}
@media screen and (max-width: 991.98px) {
  #section01 .area p::after {
    width: 2px;
  }
}
#section01 .area p:first-child::after {
  display: none;
}

#section02 {
position: relative;
  padding-bottom: 200px;
}
@media screen and (max-width: 1499.98px) {
  #section02 {
      padding-bottom: 140px;
  }
}
@media screen and (max-width: 991.98px) {
  #section02 {
    padding-bottom: 100px;
  }
}
#section02 .area {
  padding-bottom: 100px;
}
@media screen and (max-width: 991.98px) {
  #section02 .area {
    padding-bottom: 90px;
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 991.98px) {
  #section02 .txt-real {
    width: 40px;
  }
}
#section02 .title {
  text-align: center;
  margin-bottom: 90px;
}
@media screen and (max-width: 991.98px) {
  #section02 .title {
    margin-bottom: 45px;
  }
}
#section02 .title h3 {
  font-size: 70px;
  margin: 16px 0 36px;
  color: #3e7c4b;
  font-weight: 900;
  letter-spacing: -0.02em;
}
@media screen and (max-width: 1499.98px) {
  #section02 .title h3 {
    font-size: 4.6697798532vw;
  }
}
@media screen and (max-width: 991.98px) {
  #section02 .title h3 {
    font-size: 20px;
    margin: 10px 0 15px;
  }
}
#section02 .title .desc {
  font-size: 30px;
  color: #a8a8a8;
  font-weight: 600;
  letter-spacing: -0.02em;
}
@media screen and (max-width: 991.98px) {
  #section02 .title .desc {
    font-size: 15px;
  }
}
@media screen and (max-width: 543.98px) {
  #section02 .title .desc {
    font-size: 14px;
  }
}
#section02 .card {
  display: flex;
  flex-direction: column;
  width: 100%;
height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background-color: #fff;
color: #fff;
}
@media screen and (max-width: 991.98px) {
  #section02 .card {
    border-radius: 20px;
  }
}
@media (hover: hover) and (pointer: fine) {
  #section02 .card:hover .card-title {
    color: #3e7c4b;
  }
}
#section02 .card-thumb {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
#section02 .card-thumb:before {
  content: "";
  display: block;
  padding-top: 92.6630434783%;
}
#section02 .card-thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 101%;
  object-fit: cover;
}
#section02 .swiper{
padding: 0 60px;
}
@media screen and (max-width: 543.98px) {
#section02 .swiper{
padding: 0;
padding-right: 60px;
}
}
#section02 .swiper-wrapper {
// padding-left: 60px;
}
@media screen and (max-width: 543.98px) {
#section02 .swiper-wrapper {
padding-left: 9.5%;
}
}
#section02 .swiper-slide{
    height: auto;
  }
#section02 .card-body {
flex:1;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
justify-content: space-between;
  gap: 6px;
  position: relative;
  background-color: #3e7c4b;
}
@media screen and (max-width: 991.98px) {
  #section02 .card-body {
     padding: 16px;
        font-size: 15px;
  }
}
#section02 .card-title {
  display: -webkit-box !important;
  margin-bottom: 12px;
  font-size: 19px;
  color: #1e2a24;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  word-break: break-all !important;
  color: #fff !important;
}
@media screen and (max-width: 991.98px) {
  #section02 .card-title {
    margin-bottom: 20px;
    font-size: 18px;
  }
}
@media screen and (max-width: 543.98px) {
  #section02 .card-title {
    font-size: 17px;
  }
}
#section02 .card-date {
  font-size: 18px;
  color: #1e2a24;
  line-height: 1;
  text-align: right;
}
@media screen and (max-width: 991.98px) {
  #section02 .card-date {
    font-size: 12px;
  }
}
#section02 .card-name {
display: flex;
      align-items: flex-end;
      gap: 10px;
      justify-content: space-between;
  color: #fff;
  font-size: 15px;
line-height: 1.25;
}

#section02 .card-name span {
  font-weight: 500;
}
#section02 .btn-wrapper{
display: flex
;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
}
@media screen and (max-width: 991.98px) {
#section02 .btn-wrapper{
padding-top: 40px;
}
}
#section02 .btn-add {
  display: inline-flex;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 24px;
  line-height: 1;
  background-color: #ffd95a;
  color: #3e7c4b;
}
@media screen and (max-width: 991.98px) {
  #section02 .btn-add {
    font-size: 18px;
    border-radius: 5px;
  }
}
#section02 [class*=swiper-button] {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
@media screen and (max-width: 991.98px) {
  #section02 [class*=swiper-button] {
    width: 30px;
    height: 30px;
  }
}
#section02 [class*=swiper-button]:before, #section02 [class*=swiper-button]:after {
  color: #3e7c4b;
  font-size: 30px;
  font-weight: 900;
}
@media screen and (max-width: 991.98px) {
  #section02 [class*=swiper-button]:before, #section02 [class*=swiper-button]:after {
    font-size: 16px;
  }
}
#section02 .swiper-button-next {
  right: 4vw;
}
#section02 .swiper-button-prev {
  left: 4vw;
}

#section03 {
  padding: 60px 0 0;
  position: relative;
}
@media screen and (max-width: 991.98px) {
  #section03 {
    padding: 45px 0 0;
  }
}
#section03 * {
  letter-spacing: -0.02em;
}
@media screen and (min-width: 1500px) {
  #section03 .title-wrap .title {
    font-size: 60px;
  }
}
#section03 .bg-txt {
  position: absolute;
  top: 0;
  font-size: 150px;
  font-weight: 900;
  color: #edf0e9;
  white-space: nowrap;
  font-size: 100px;
  overflow: hidden;
  max-width: 100%;
}
@media screen and (max-width: 991.98px) {
  #section03 .bg-txt {
    font-size: 50px;
  }
}