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

  /*header*/
.headerIn .btn{
  margin-left: 10px;
  padding: 16px 20px;
}

  /*footer*/
  .footerIn .nav nav{
    margin-left: 30px;
  }

  /*hero*/

  #hero .hero_txt .txtIn{
    margin: 0 auto;
  }

  #hero .hero_txt{
    left: 0;
    width: 100%;
    padding-left: 0;
  }


  .hero-badge .badge{
    margin: 0 10px;
  }

  /*optimal*/

  .optimalItem .ttl{
    font-size: 26px;
  }

  .optimalItem ul li{
    font-size: 16px !important;
  }

}

@media screen and (min-width: 769px) and (max-width: 1024px) {

  /* common */
  .container{
    width: 90%;
    margin: 0 auto;
  }

  /*h3*/
  #about h3 img,
  #howtouse h3 img,
  #optimal h3 img,
  #faq h3 img{
    height: 70px;
    width: auto;
  }
  
  
  

  /* footer */
  .footerIn .nav nav{
    margin-left: 40px;
  }

  .footerIn .nav a{
    font-size: 14px;
  }

  #footer .logo img{
    height: 30px;
  }

  /*hero*/


  /* optimal */
  
  .optimalItem{
    padding: 65px 40px;
  }

  .optimalItem ul li{
    font-size: 22px;
  }

  /*flow*/

  .flow.arrow{
    width: 20px;
  }

  .flowWrap .flow{
    margin-right: 10px;
  }

  .faqIn dl{
    max-width: 700px;
  }
}