mjchemi/css/media.css

@media (max-width: 1200px) {
  main .section--container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  main .section--container .title--wrap.big > h2 {
    font-size: 36px;
  }
  main .section--container .title--wrap > h2 {
    font-size: 30px;
  }
  main .section--container .growth--logic--wrap {
    gap: 20px;
  }
  main .section--container .growth--logic--wrap .title--box {
    width: calc((100% - 120px) / 3 + 80px);
  }
  main .section--container .growth--logic--wrap .title--box h2 {
    font-size: 36px;
  }
  main .section--container .growth--logic--wrap .logic--box {
    padding: 40px 35px 40px;
  }
  main .section--container .growth--logic--wrap .logic--box.special {
    width: calc((100% - 120px) / 3 + 80px);
  }
  main .section--container .best--service--wrap {
    gap: 20px;
  }
  main .section--container .best--service--wrap .service--box {
    width: calc((100% - 40px) / 3);
    padding: 20px 25px 40px;
  }
  main .section--container .best--service--wrap .service--box h3 {
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  main .section--container .now--box--wrap .box--top .box > p {
    font-size: 16px;
  }
  main .section--container .now--box--wrap .box--bot {
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .mb--80 {
    margin-bottom: 40px !important;
  }
  br.web {
    display: none;
  }
  main .section--container.p--120 {
    padding: 60px 0;
  }
  main .section--container.p--100 {
    padding: 60px 0;
  }
  main .section--container .title--wrap.big > h2 {
    font-size: 30px;
    margin-bottom: 30px;
  }
  main .section--container .title--wrap.big > p {
    font-size: 15px;
  }
  main .section--container .best--service--wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  main .section--container .best--service--wrap .service--box {
    width: 100%;
  }
  main .section--container .best--service--wrap .service--box h3 br {
    display: none;
  }
  main .section--container .now--box--wrap .box--bot {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  main .section--container .now--box--wrap .box--bot .box {
    width: 100%;
  }
  main .faq--wrapper .inner--contents .faq--list--wrap ul li .faq--item--title > p {
    font-size: 15px;
  }
  main .faq--wrapper .inner--contents .faq--list--wrap ul li .faq--item--content > p {
    font-size: 15px;
  }
}
@media (max-width: 500px) {
  main .section--container .now--box--wrap .box--top {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 50px;
  }
  main .section--container .now--box--wrap .box--top .box {
    width: 100%;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 20px;
  }
  main .section--container .now--box--wrap .box--top .box .box--img {
    width: 80px;
    min-width: 80px;
  }
  main .section--container .now--box--wrap .box--top .box .box--img img {
    width: 100%;
  }
  main .section--container .now--box--wrap .box--top .box > p {
    width: calc(100% - 120px);
    text-align: left;
  }
}