.page-title-flow img {
  left: 58.5%;
}



/* ------------------------------flow----------------------------- */

#flow {
  width: 80%;
  margin: 0 auto;
  margin-top: 120px;
  margin-bottom: 75px;
}

.flow-wrapper {
  width: 100%;
  background-color: #FFF977;
  border-radius: 50px;
  padding-top: 50px;
  padding-bottom: 20px;
  position: relative;
}

.flow-itemBoxs {
  width: 80%;
  margin: 0 auto;
  position: relative;
}

.flow-itemBox {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
  border-radius: 30px;
  margin-top: 50px;
  margin-bottom: 70px;
}

.num-box {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 0;
  left: 50%;
}

.num-box h3 {
  font-size: 3rem;
  font-weight: 500;
  color: #F76134;
}

.num-box div {
  width: 15px;
  height: 3px;
  border-radius: 100vh;
  background-color: #F76134;
  margin: 0 auto;
}

.flow-itemBox h4 {
  font-size: 2rem;
  font-weight: 500;
  width: 100%;
  text-align: center;
  padding-top: 45px;
}

.flow-itemBox p {
  width: 85%;
  margin: 0 auto;
  font-size: 1rem;
  padding-bottom: 3rem;
  text-align: center;
}

.arrow {
  width: 60px;
  height: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  bottom: -12%;
}

/* .hide {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all .5s;
} */

.hide.cl {
  opacity: 1;
  max-height: 1500px;
  transition: all  1s ease-out;
}


.hide-btnWrapper {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

/* .hide-btn {
  width: 300px;
  height: 80px;
  border-radius: 30px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
} */

/* .hide-btn img {
  width: 100px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(-1);
  transition: .5s ease-out;
} */
/* 
.hide-btn.cl img {
  transform: translate(-50%, -50%) ;
  transition: .5s ease-out;
} */




/* -----------------------------------------------Q&A---------------------------------------------- */

#QandA {
  width: 80%;
  margin: 0 auto;
  padding-top: 75px;
}

.qa-wrapper {
  width: 100%;
  background-color: #FFFDD8;
  position: relative;
  border-radius: 50px;
}

.qa-boxs {
  width: 70%;
  margin: 0 auto;
  padding-top: 100px;
  padding-bottom: 30px;
}

.qa-box {
  width: 100%;
  background-color: #fff;
  border-radius: 30px;
  padding-top: 20px;
  padding-bottom: 30px;
  margin-bottom: 50px;
  position: relative;
}


.qa-title {
  width: 75%;
  white-space: nowrap;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  border-bottom: 2px solid #291A02;
  margin: 0 auto;
  padding-bottom: .1rem;
  margin-bottom: 1rem;
}

.qa-hide{
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
  transition: all  1s ease;
  text-align: center;
}



.cc-b-y2 {
  background-color: #FFFDD8;
}




@media (max-width:1500px) {

  .page-title-flow img {
    left: 59.5%;
  }

  .flow-itemBox h4 {
    font-size: 1.6rem;
  }

  .flow-itemBox p {
    font-size: 1rem;
    width: 80%;
  }

  .hide-btnWrapper {
    transform: translate(-50%, 50%) scale(.9);
  }

  
  /* ----------------------------------Q&A------------------------------------ */


  .qa-title {
    width: 70%;
  }

  .qa-title {
    font-size: 1.2rem;
  }

  .qa-title div {

    height: 1.5px;
  }


}




@media (max-width:1200px) {


  .page-title-flow img {
    left: 61%;
  }

  .flow-itemBox p {
    font-size: .9rem;
    width: 85%;
  }

  .hide-btnWrapper {
    transform: translate(-50%, 50%) scale(.9);
  }

  
  /* ----------------------------------Q&A------------------------------------ */

  .qa-title h2 {
    font-size: 1.1rem;
    padding-bottom: 5px;
  }

  .qa-title{
    width: 80%;
  }





}



@media (max-width: 900px) {

  @media (min-height: 1000px) {

    .page-title-flow img {
      left: 63%;
    }

    #flow {
      width: 90%;
    }

    .flow-wrapper {
      padding-top: 30px;
    }

    .flow-itemBoxs {
      width: 85%;
    }

    .num-box h3 {
      font-size: 2.5rem;
    }

    .flow-itemBox h4 {
      font-size: 1.5rem;
    }

    .flow-itemBox p  {
      font-size: .9rem;
      padding-top: 15px;
    }

    .arrow {
      width: 55px;
      bottom: -8%;
    }



    #QandA {
      width: 90%;
    }

    .qa-boxs {
      padding-top: 70px;
      width: 85%;
    }

    .qa-title {
      margin-bottom: 15px;
      width: 85%;
    }

    .qa-title {
      font-size: 1rem;
    }

    .qa-title div {
      height: 1px;
    }

    .qa-hide {
      font-size: .9rem;
      width: 80%;
    }



  }
}




@media (max-width:900px) {

  #flow {
    margin-top: 70px;
    width: 90%;
    margin-bottom: 45px;
  }

  .flow-wrapper {
    border-radius: 20px;
    margin-top: 10px;
  }

  .flow-itemBoxs {
    width: 90%;
  }

  .flow-itemBox {
    border-radius: 15px;
    margin-top: 0px;
    margin-bottom: 50px;
  }

  .num-box h3 {
    font-size: 2.2rem;
  }

  .num-box div {
    height: 2px;
  }

  .flow-itemBox h4 {
    font-size: 1rem;
  }

  .flow-itemBox p {
    font-size: .7rem;
    text-align: left;
    width: 80%;
    padding-top: 10px;
    padding-bottom: 30px;
  }

  .arrow {
    width: 45px;
    bottom: -6%;
  }


  #QandA {
    width: 90%;
    padding-top: 45px;
  }

  .qa-wrapper {
    border-radius: 20px;
  }

  .qa-boxs {
    width: 90%;
    padding-top: 50px;
  }

  .qa-box {
    margin-bottom: 30px;
    border-radius: 10px;
  }

  .qa-title {
    font-size: .7rem;
    border-bottom: 1px solid #291A02;
    margin-bottom: 15px;
  }

  .qa-hide {
    font-size: .7rem;
    width: 90%;
  }








}