@charset "utf-8";


.flow{
  max-width:1000px;
  margin:140px auto 140px;
  width:80%;
}

.flow h2{
  font-size:clamp(1.25rem, 0.795rem + 1.52vw, 2.5rem);
  text-align:center;
  margin-bottom:4rem;
}

.flow-wrap{
  display:flex;
  justify-content: space-between;
}

.flow-item{
  width:31%;
  border-radius:10px;
  background:#EAE3DD;
  padding:2rem;
  font-size:14px;
}

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

.flow-title img{
  width:35%;
}

.flow-title h3{
  font-size:clamp(1.25rem, 1.159rem + 0.3vw, 1.5rem);
  text-align:right;
}

.flow2{
  margin:140px 0;
  overflow:hidden;
}

.flow2 .container{
  max-width:1345px;
}

.flow2-item{
  margin-top:5rem;
  padding:1.5rem 10% 2.5rem 5%;
  border-radius:10px;
  position:relative;
  margin-left: 10%;
   background:transparent;
  border: 0.5px solid #A38370;
}

.flow2-item.fadeUpTrigger{
  transition:1s;
  transition-delay:0.5s;
}

.flow2-item.fadeUp{
  background:#fff;
}


.flow2-item .accent{
  left: -11%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  position:absolute;
  width:11%;
  text-align: center;
}

.flow2-item .accent p{
  font-weight: lighter;
  color:#A38370;
  font-size:clamp(3.5rem, 2.955rem + 1.82vw, 5rem);
  line-height:1;
}

.flow2-item h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin-bottom:2rem;
  width:fit-content;
  position:relative;
}

.flow2-item h3::before{
  content:"";
  position:absolute;
  width:0%;
  height:1px;
  background:#A38370;
  bottom:-0.5rem;
  left:0;
  transition:1s ease-in-out 0.5s;
}

.flow2-item.fadeUp h3::before{
  width:100%;
}

.flow2-item p{
  font-size:14px;
  line-height:2;
}

.flow2-img{
  display:flex;
  gap:1.5rem;
  max-width:850px;
  margin-top:2.5rem;
}

.flow2-img img{
  width:45%;
}

@media screen and (max-width: 1280px) {
}

@media screen and (max-width: 1024px) {
  .flow-wrap {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  .flow-item {
    width: 100%;
    max-width: 400px;
  }
  .flow2-item .accent {
    left: -18%;
    width: 16%;
  }
  .flow2-item {
    margin-top: 3rem;
  }
}

@media screen and (max-width: 767px) {
  .flow-wrap {
    gap: 0.5rem;
  }
  .flow {
    margin: 80px auto 40px;
    width: 80%;
  }
  .flow h2 {
    margin-bottom: 2.5rem;
  }
  .flow-item{
    padding:1.5rem;
  }
  .flow-title {
    margin-bottom: 1rem;
  }
  .flow + img{
    aspect-ratio: 390 / 285;
    object-fit: cover;
  }
  .flow2 {
    margin: 40px 0 80px;
  }
  .flow2-item {
    margin-top: 6.5rem;
    padding: 2.5rem 5% 2.5rem;
    margin-left: 0;
  }
  .flow2-item .accent{
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    top: -5.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
  }
  .flow2-img{
    flex-direction: column;
    gap:1rem;
  }
  .flow2-img img {
    width: 100%;
  }
  .flow2-item .accent p{
    font-size: 2.5rem;
    padding-top: 1.5rem;
  }
  .flow2-item .accent img{
    width:95px;
  }
}