@charset "utf-8";

.feature{
  padding:5rem 5% 120px 0;
}

.feature h2{
  margin-bottom:5rem;
}

.feature-wrap{
  display:flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1050px;
}

.feature-wrap:not(:last-child){
  margin-bottom:2.5rem;
}

.feature-wrap img{
  width:30%;
}


.feature-txt{
  width:65%;
}

.feature-txt h3{
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  margin-bottom:7%;
}

.feature-txt .btn{
  margin:2.5rem 0 0;
}

.service-txt img:not(:first-child){
  margin-top:140px;
}

.service-txt h3{
  font-size:clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
  margin:2.5rem 0;
}

.service-txt h4{
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
  margin:2rem 0;
}

.service-txt > h3,
.service-txt > h4,
.service-txt > p{
  padding-right:5%;
}

.service-box{
  border:0.5px solid #282828;
  padding:2rem;
  display:flex;
  align-items: center;
  justify-content: space-between;
  max-width: 780px;
  width: 80%;
}

.service-box p{
  font-size:14px;
  line-height:2;
}

.service-box h4{
  margin:0 0 1rem;
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
}

.service-box h4 strong{
  font-size:clamp(1.25rem, 1.159rem + 0.3vw, 1.5rem);
  margin-left:1rem;
}

.service-box img{
  width:22%;
}

.service-box div{
  width:73%;
}

.service-box:first-of-type{
  margin:2.5rem 0 1rem;
}

.voice-txt{
  display:flex;
  margin-top:5%;
}

.voice-txt.two{
  overflow:scroll;
  gap:1.5rem;
  padding-right:5%;
  padding-bottom: 1.5rem;
}

.voice-txt.two .voice-box{
  min-width:620px;
}

.voice-box{
  padding:2.5rem;
  border:0.5px solid #282828;
  width:620px;
}

.voice-box h3{
  font-size:clamp(1rem, 0.818rem + 0.61vw, 1.5rem);
}

.voice-box .gray{
  color:#848580;
  margin:2rem 0;
}

.flow-txt h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin:5rem 0 1.5rem;
}

.flow-txt h3 strong{
  font-size:clamp(1.875rem, 1.466rem + 1.36vw, 3rem);
  margin-right:1rem;
}

@media screen and (max-width: 1024px) {
  .header .hamBtn{
    display:none;
  }
  .lower-ham-bg{
    padding:2.5rem 0 0;
  }
  .feature {
    padding: 4rem 5% 4rem;
  }
  .feature-txt h3{
    margin-bottom: 1rem;
  }
  .feature-txt .btn {
    margin: 1.5rem 0 0;
  }
  .service-box{
    width: 95%;
    padding: 1rem 1rem;
  }
  .service-txt h3{
    margin: 1.5rem 0;
  }
  .service-txt h4{
    margin: 1rem 0;
  }
  .voice-box{
    width: 500px;
  }
  .voice-box .gray{
    margin: 1rem 0;
  }
  .voice-txt.two .voice-box {
    min-width: 500px;
  }
}

@media (max-width: 767px) {
  .flow-txt h3{
    margin: 2.5rem 0 1rem;
  }
  .flow-txt h3:first-child{
    margin: 0 0 1rem;
  }
  .feature h2 {
    margin-bottom: 3.5rem;
  }
  .feature-wrap{
    flex-direction: column;
    gap: 2rem;
  }
  .feature-wrap img {
    width: 70%;
  }
  .feature-txt h3{
    text-align:center;
  }
  .feature-txt {
    width: 100%;
  }
  .feature-wrap:not(:last-child) {
    margin-bottom: 4rem;
  }
  .feature-txt .btn {
    margin: 1.5rem auto 0;
  }
  .service{
    padding:0 0 4rem;
  }
  .service-txt > h3, .service-txt > h4, .service-txt > p{
    padding: 0 5%;
  }
  .service-box{
    width: 90%;
    margin: 0 auto;
    flex-direction: column;
    gap: 20px;
  }
  .service-box:first-of-type{
    margin: 4rem auto ;
  }
  .service-box img {
    width: 65%;
  }
  .service-box div {
    width: 100%;
  }
  .service-txt h4{
    margin:0 0 1rem;
  }
  .service-box h4{
    text-align: center;
  }
  .service-box h4 strong{
    margin-left: 0.5rem;
  }
  .service-txt img:not(:first-child) {
    margin-top: 80px;
  }
  .voice{
    margin-top: 0px;
    padding-bottom: 0;
  }
  .voice-txt{
    width:90% !important;
    margin:0 auto;
  }
  .voice-box {
    padding: 2.5rem 0.5rem;
    width: 100%;
  }
  .flow{
    padding-top: 40px;
    margin-top: 2rem;
  }
  .flow-txt{
    width:90% !important;
    margin:0 auto;
    padding:0;
  }
  .voice-txt.two .voice-box {
        min-width: 330px;
  }
}