@charset "utf-8";

.about-fv{
  width:70%;
  margin:2rem auto 10rem;
  max-width:1170px;
}

.about-fv .swiper-wrapper {
  aspect-ratio: 1170 / 615;
}

.about-fv .swiper-pagination-bullets{
  position: absolute;
  z-index: 10;
  right:auto;
  left:2rem;
}
.about-fv .swiper-pagination-bullet{
  width:12px;
  height:12px;
  background:#F2EEEA;
  opacity:1;
  margin:12px 0 !important;
}

.about-fv .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background:#F5C77A;
}

.about-fv .swiper-wrapper img{
  border-radius:40px;
  object-fit:cover;
}

.fv-swiper{
  margin-top:1.5rem;
}

.about-fv > p{
  text-align:right;
  color:#529EA3;
  font-weight:bold;
  font-size:clamp(0.625rem, 0.398rem + 0.76vw, 1.25rem);
  line-height: 1.3;
}

.about-fv > img{
  border-radius:40px;
  margin:1.5rem 0 -3rem;
}

.about-fv-text{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: -3rem;
  z-index: 50;
  position: relative;
}

.about-fv-text img{
  width:12%;
}

.about-fv-text p{
  padding-top: 4rem;
}

.feature{
  margin:0 auto 10rem;
  width:80%;
}

.feature-wrap{
  display:flex;
  margin-bottom:1.5rem;
  justify-content: space-between;
}

.feature-wrap > img:first-child{
  width:13%;
}

.feature-box img{
  width:50%;
  border-radius:40px;
}

.feature-box div{
  width:45%;
}

.feature-box div h3{
  font-size:20px;
  line-height:1.5;
  margin-bottom:1rem;
}

.feature-box {
  width:82%;
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.feature-wrap:nth-child(odd){
  flex-direction:row-reverse;
}

.feature-wrap:nth-child(odd) .feature-box {
  flex-direction:row-reverse;
}


.business{
  margin:10rem auto 10rem 0;
  width:90%;
  max-width:1600px;
  position:relative;
  padding:5rem 0 5rem 13%;
  z-index:0;
}

.business::before{
  content:"";
  position:absolute;
  width:90%;
  height:100%;
  left:0;
  top:0;
  background:#A7C9CB;
  border-radius:0 60px 60px 0;
  opacity:0.6;
  z-index:-1;
}

.business .lower-title{
  text-align:left;
}

.business .swiper-slide{
  display:flex;
  padding: 2rem 2rem 5rem;
  justify-content: space-between;
  align-items: center;
}

.business-text{
  width:47.5%;
}

.business-text .btn{
  margin:2rem 0 0 auto;
}

.business-text h3{
  color:#529EA3;
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin-bottom:1rem;
}

.business-text h4{
    font-size: 18px;
    margin-bottom: 1rem;
}

.business-img{
  position:relative;
  width:47.5%;
  z-index:0;
  padding:0.5rem;
}

.business-img::before{
  content:"";
  position:absolute;
  width:100%;
  border-radius:40px;
  height:100%;
  background:#529EA3;
  box-shadow:12px 12px 3px rgba(0,0,0,0.16);
  top:0;
  left:0;
  z-index:-1;
  transform: rotate(5deg);
}

.business-img img{
  border-radius:40px;
}

.swiper-pagination{
  width: fit-content !important;
  left: 24%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.swiper-button-next{
  right:auto;
  left: 29%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  bottom: 0;
  top: auto;
}

.swiper-button-prev{
  right:auto;
  left: 19%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  bottom: 0;
  top: auto;
}

.swiper-button-next:after, .swiper-button-prev:after{
  font-size:1.5rem;
  color:#292D33;
}

@media screen and (max-width: 1280px) {
  .feature{
    width: 90%;
  }
  .business{
    padding: 5rem 0 5rem 5%;
  }
}

@media screen and (max-width: 1024px) {
  .business{
    width: 100%;
    padding: 3rem 5%;
  }
  .business .swiper-slide{
    flex-direction: column;
    gap: 3rem;
  }
  .business-text{
    width:100%;
  }
  .business-img{
    width:60%;
  }
  .business::before{
    width:95%;
  }
  .swiper-button-prev{
    left:40%;
  }
  .swiper-pagination{
    left:50%;
  }
  .swiper-button-next{
    left:60%;
  }
  .feature-wrap,
  .feature-wrap:nth-child(odd),
  .feature-box,
  .feature-wrap:nth-child(odd) .feature-box{
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .feature-box{
    width:100%;
  }
  .feature-box img {
    width: 80%;
  }
  .feature-box div {
    width: 100%;
  }
  .feature-wrap > img:first-child{
    margin-bottom: -3rem;
    position: relative;
  }
  .feature-wrap{
    margin-bottom: 3rem;
  }
  .about-fv{
    width:80%;
  }
  .about-fv-text{
    align-items: flex-start;
  }
  .about-fv .swiper-pagination-bullets{
    left:1rem;
  }
  .about-fv .swiper-pagination-bullet{
    width:8px;
    height:8px;
  }
}

@media screen and (max-width: 767px) {
  .about-fv > img{
    border-radius:20px;
    margin: 1rem 0 -3rem;
  }
  .about-fv{
    width:90%;
    margin: 1rem auto 5rem;
  }
  .about-fv > p{
    font-size:9px;
  }
  .about-fv-text {
    align-items: flex-end;
    flex-direction: column-reverse;
  }
  .about-fv-text img {
    width: 80px;
  }
  .about-fv-text p {
    padding-top: 0.5rem;
  }
  .feature-wrap > img:first-child{
    width:5rem;
  }
  .feature-box img{
    width:100%;
  }
  .feature{
    width:95%;
    margin-bottom: 0;
  }
  .feature-wrap {
    margin-bottom: 1rem;
  }
  .business {
    margin: 100px auto 5rem 0;
    padding: 2rem 2.5%;
  }
  .business::before {
    width:100%;
    border-radius: 0 0px 30px 30px;
  }
  .business .lower-title {
    text-align: center;
  }
  .business .swiper-slide{
    padding: 0rem 0.5rem 4rem;
  }
  .business-text .btn {
    margin: 1rem 0 0 auto;
  }
  .business-img {
    width: 90%;
  }
  .business-img img {
    border-radius: 20px;
  }
  .business-img::before{
    box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.16);
    border-radius: 20px;
  }
  .about-fv .swiper-wrapper img {
    border-radius: 20px;
  }
  .about-fv .swiper-wrapper{
    aspect-ratio: 5 / 3;
  }
}