mjchemi/scss/media.scss

@media(max-width: 1200px){
  header{
    .header--contents--wrap{
      .header--contents{
        .header--logo--wrap{
          .logo--wrap{
            padding: 20px;
          }
        }
        .header--gnb--wrap{
          .gnb--wrap{
            >ul{
              li{
                &:nth-child(1){
                  width: 26%;
                }
                &:nth-child(2),
                &:nth-child(3){
                  width: 30%;
                }
                a{
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
  main{
    .section--container{
      padding-left: 20px!important;
      padding-right: 20px!important;
      .title--wrap{
        &.big{
          >h2{
            font-size: 36px;
          }
        }
        >h2{
          font-size: 30px;
        }
      }
      .growth--logic--wrap{
        gap: 20px;
        .title--box{
          width: calc(50% - 10px);
          h2{
            font-size: 36px;
          }
        }
        .logic--box{
          min-height: 300px;
          padding: 40px 35px 40px;
          width: calc(50% - 10px);
          &.special{
            width: calc(50% - 10px);
          }
        }
      }
      .best--service--wrap{
        gap: 20px;
        .service--box{
          width: calc((100% - 40px) / 3);
          padding: 20px 25px 40px;
          h3{
            font-size: 18px;
            margin-top: 30px;
            margin-bottom: 20px;
          }
        }
      }
      .now--box--wrap{
        .box--top{
          .box{
            >p{
              font-size: 16px;
            }
          }
        }
        .box--bot{
          gap: 20px;
        }
      }
      .process--plan--wrap{
        .title--wrap{
          p{
            font-size: 15px;
          }
        }
        .content--wrap{
          .direct--wrap{
            gap: 0;
            .bar{
              width: 3%;
            }
          }
          .process--wrap{
            .process--cont{
              .process--top{
                .process--circle{
                  .circle{
                    gap: 20px;
                    p{
                      font-size: 16px;
                    }
                  }
                }
              }
              .process--bot{
                .process--blue--circle{
                  padding: 20px 40px;
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
      .four--strategy--wrap{
        .strategy--cont1{
          gap: 20px;
          justify-content: space-between;
          .cont--left{
            .box--wrap{
              gap: 20px;
              li{
                max-width: 185px;
              }
            }
          }
          .cont--right{
            width: 40%;
            dl{
              dt{
                font-size: 24px;
              }
              dd{
                div{
                  font-size: 18px;
                  margin-bottom: 15px;
                }
                span{
                  font-size: 16px;
                }
              }
            }
          }
        }
      }
      .mna--dream--wrap{
        gap: 20px;
        .dream--cont{
          padding: 30px 30px 50px;
          .sub--txt{
            margin-bottom: 20px;
            font-size: 16px;
          }
          h4{
            font-size: 24px;
            margin-bottom: 20px;
          }
          .chat{
            gap: 20px;
            .chat--img{
              width: 60px;
              min-width: 60px;
              height: 60px;
              background-size: 60px 60px;
            }
            .chat--bubble{
              margin-bottom: 30px;
            }
          }
          .box{
            margin-bottom: 30px;
          }
          .chat--answer{
            margin-bottom: 30px;
          }
        }
      }
      .family--business--wrap{
        .family--cont--wrap{
          .cont--left{
            h2{
              font-size: 30px;
            }
            span{
              font-size: 16px;
            }
            .btn--wrap{
              flex-wrap: wrap;
            }
          }
          .cont--right{
            gap: 20px;
            .family--box--wrap{
              gap: 20px;
              .family--box{
              }
            }
          }
        }
      }
      .impt--search--wrap{
        >ul{
          gap: 15px;
          li{
            cursor: pointer;
            gap: 10px;
            padding: 15px 20px;
            width: calc((100% - 30px) / 3);
            .thumbs{
              width: 24px;
              height: 24px;
              min-width: 24px;
              background-size: cover;
            }
            .title{
              font-size: 16px;
              width: calc(100% - 62px);
            }
          }
        }
      }
      .impt--list--wrap{
        ul{
          gap: 20px;
        }
      }
      .all--progress--wrap{
        .progress--section{
          .progress--container{
            &.web{
              display: none;
            }
            &.mo{
              display: flex;
            }
          }
        }
      }
    }
    .mna--reason--wrap{
      .swiper-slide{
        .reason--box{
          padding: 25px 25px 40px;
        }
      }
    }
    .faq--wrapper{
      .inner--contents{
        .section--title{
          font-size: 30px;
        }
      }
    }
  }
  footer{
    section{
      padding-left: 20px;
      padding-right: 20px;
    }
  }
}

@media(max-width: 1000px){
  main{
    .section--container{
      .four--strategy--wrap{
        .strategy--cont3{
          .box{
            background-size: 20%;
            background-position: right 20px bottom;
            padding: 20px 25px 60px 25px;
            &:nth-child(1){
              background-size: 15%;
            }
            &:nth-child(2){
              background-size: 12%;
              background-position: right 20px bottom;
            }
            dt{
              font-size: 18px;
            }
            dd{
              font-size: 16px;
              ul{
                gap: 10px;
              }
            }
          }
        }
      }
      .mna--dream--wrap{
        flex-direction: column;
        .dream--cont{
          width: 100%;
        }
      }
      .family--business--wrap{
        .family--cont--wrap{
          flex-direction: column;
          gap: 60px;
          .cont--left{
            h2{
              margin-top: 0!important;
              margin-bottom: 20px;
            }
            span{
              margin-bottom: 40px;
            }
            .family--img{
              top: 0;
              bottom: auto;
              width: 40%;
              z-index: -1;
              img{
                width: 100%;
              }
            }
          }
          .cont--right{
            width: 100%;
            flex-direction: column;
            .family--box--wrap{
              flex-direction: row;
              width: 100%;
              flex-wrap: wrap;
              .family--box{
                width: calc(50% - 10px);
                margin-top: 0!important;
              }
              &:last-child{
                .family--box{
                  &:last-child{
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
      .process--plan--wrap{
        .content--wrap{
          .process--wrap{
            .process--title{
              padding: 20px 25px;
            }
            .process--cont{
              .process--top{
                .process--circle{
                  width: calc(100% - 240px);
                  height: 360px;
                  .circle{
                    gap: 10px;
                    .ico{
                      width: 60px;
                      height: 60px;
                    }
                    p{
                      font-size: 15px;
                    }
                  }
                }
                .process--side{
                  width: 110px;
                  gap: 5px;
                  .circle{
                    font-size: 15px;  
                  }
                  .line{
                    height: 30px;
                  }
                }
              }
              .process--bot{
                .process--side{
                  gap: 5px;
                  justify-content: space-between;
                  .line{
                    flex: 1;
                    background-image: none;
                  }
                  .circle{
                    width: 110px;
                    font-size: 15px;
                    &:nth-of-type(2), &:nth-of-type(4){
                      position: relative;
                      &::after{
                        content: "";
                        background-repeat: no-repeat;
                        background-position: center;
                        display: inline-block;
                        width: 100%;
                        left: 0;
                        height: 71px;
                        transform: rotate(180deg);
                        background-image: url(../img/ico--rainbow--arrow3.svg);
                        position: absolute;
                        bottom: 75px;
                      }
                    }
                  }
                  .arrow{
                    display: none;
                  }
                }
              }
            }
          }
          .direct--wrap{
            .circle{
              min-width: 140px;
              padding: 15px 20px;
              p{
                font-size: 14px;
              }
            }
            .bar{
              width: 5%;
            }
          }
        }
      }
      .all--progress--wrap{
        .compatibility--inner--conls{
          height: auto;
          .btn--wrapper{
            top: 30px;
            right: 30px;
          }
          .desc{

          }
        }
      }
    }
  }
}

@media(max-width: 768px){
  .mb--80{
    margin-bottom: 40px!important;
  }
  .mb--70{
    margin-bottom: 35px!important;
  }
  .mb--50{
    margin-bottom: 30px!important;
  }
  .mb--60{
    margin-bottom: 30px!important;
  }
  .pb--80{
    padding-bottom: 40px!important;
  }
  .pb--100{
    padding-bottom: 50px!important;
  }
  .mt--110{
    margin-top: 50px!important;
  }
  .mb--110{
    margin-bottom: 50px!important;
  }
  .pt--120{
    padding-top: 60px!important;
  }
  .pb--120{
    padding-bottom: 60px!important;
  }
  .mb--140{
    margin-bottom: 60px!important;
  }
  br{
    &.web{
      display: none;
    }
    &.mo{
      display: block;
    }
  }
  header{
    .header--line--banner--wrap{
      .inner--contents{
        h3{
          font-size: 18px;
          margin-bottom: 0;
        }
        p{
          font-size: 14px;
        }
      }
    }
    .header--contents--wrap{
      .header--contents{
        .header--logo--wrap{
          .logo--wrap{
            gap: 20px;
            .txt{
              gap: 5px;
              p{
                font-size: 14px;
                &:last-child{
                  font-size: 15px;
                }
              }
            }
          }
        }
        .header--gnb--wrap{
          .gnb--wrap{
            >ul{
              flex-wrap: wrap;
              li{
                &:nth-child(1){
                  width: 30%;
                }
                &:nth-child(2),
                &:nth-child(3){
                  width: 35%;
                }
                width: 50%;
                a{
                  font-size: 15px;
                  height: 45px;
                  line-height: 45px;
                }
              }
            }
          }
        }
      }
    }
  }
  main{
    padding-top: 290px!important;
    &.actv{
      padding-top: 190px!important;
    }
    .main--visual--section{
      .main--visual--wrap{
        .main--visual--img{
          .main--visual--txt{
            gap: 20px;
            h3{
              font-size: 36px;
            }
            p{
              font-size: 16px;
            }
          }
        }
      }
      .main--visual--pager{
        width: calc(100% - 40px);
        bottom: 20px;
        .main--visual--pagination{
          display: none;
        }
      }
    }
    .section--container{
      &.p--120{
        padding: 60px 0;
      }
      &.p--100{
        padding: 60px 0;
      }
      .title--wrap{
        &.big{
          >h2{
            font-size: 30px;
            margin-bottom: 30px;
          }
          >p{
            font-size: 15px;
          }
        }
      }
      .best--service--wrap{
        flex-direction: column;
        .service--box{
          width: 100%;
          h3{
            margin-top: 15px;
            margin-bottom: 10px;
            br{
              display: none;
            }
          }
          p{
            font-size: 15px;
            line-height: 1.4;
          }
        }
      }
      .growth--logic--wrap{
        .title--box{
          h2{
            font-size: 30px;
          }
        }
        .logic--box{
          padding: 20px;
          dt{
            font-size: 18px;
            margin-bottom: 15px;
          }
          dd{
            font-size: 14px;
          }
        }
      }
      .now--box--wrap{
        .box--bot{
          flex-direction: column;
          .box{
            width: 100%;
          }
        }
      }
      .process--plan--wrap{
        .content--wrap{
          h3{
            margin-bottom: 20px;
          }
          .direct--wrap{
            flex-wrap: wrap;
            row-gap: 60px;
            column-gap: 15px;
            .circle{
              width: calc((100% - 60px) / 2);
              min-width: 0;
              &:nth-of-type(2){
                position: relative;
                &::after{
                  content: '';
                  position: absolute;
                  width: 1px;
                  height: 30px;
                  display: inline-block;
                  border-right: 3px dashed #2ecc71;
                  top: calc(100% + 15px);
                  left: 50%;
                }
              }
            }
            .bar{
              width: 30px;
              &.mo{
                display: none;
              }
            }
          }
          .process--wrap{
            .process--cont{
              padding-top: 60px;
              .process--top{
                .process--side{
                  gap: 15px;
                }
                .process--circle{
                  background-image: none;
                  gap: 60px;
                  height: auto;
                  flex-direction: column;
                  .circle{
                    height: 60px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    &::after{
                      display: none;
                    }
                    .ico{
                      display: none;
                    }
                  }
                  &::after{
                    top: auto;
                    bottom: -85px;
                  }
                }
              }
              .process--box{
                .box{
                  padding: 25px 25px 60px 25px;
                  background-size: 20%;
                  background-position: right 20px bottom -10px !important;
                  &:nth-child(1){
                  }
                  h4{
                    font-size: 18px;
                    margin-bottom: 15px;
                  }
                }
              }
              .process--bot{
                padding-top: 105px;
                .process--side{
                  gap: 15px;
                }
              }
            }
          }
        }
      }
      .four--strategy--wrap{
        .strategy--cont1{
          flex-direction: column;
          align-items: center;
          gap: 60px;
          margin-bottom: 60px;
          .cont--left{
            width: 100%;
            display: flex;
            justify-content: center;
            .box--wrap{
              width: 100%;
              max-width: 440px;
              justify-content: center;
              align-items: center;
              li{
                max-width: 185px;
                width: calc(50% - 10px);
                padding: 20px 10px;
                height: 150px!important;
                div{
                  span{
                    font-size: 12px!important;
                  }
                }
              }
            }
          }
          .cont--right{
            width: 100%;
            justify-content: center;
            text-align: center;
          }
        }
        .strategy--cont2{
          .question2{
            font-size: 20px;
            margin-bottom: 20px;
          }
          .answer2{
            font-size: 16px;
          }
          .result{
            font-size: 16px;
            text-align: center;
          }
        }
      }
      .family--business--wrap{
        .family--cont--wrap{
          .cont--right{
            .family--box--wrap{
              .family--box{
                padding: 25px;
                border-radius: 10px;
                .ico{
                  width: 40px;
                  margin-bottom: 20px;
                  background-size: 25px 25px;
                  height: 40px;
                }
                p{
                  font-size: 18px;
                  margin-bottom: 15px;
                }
              }
            }
          }
        }
      }
      .impt--search--wrap{
        >ul{
          padding-top: 30px;
          li{
            width: calc(50% - 7.5px);
            &:last-child{
              width: 100%;
            }
          }
        }
      }
      .impt--list--wrap{
        ul{
          li{
            padding: 30px 25px;
            h3{
              font-size: 18px;
            }
            .captions{
              padding-top: 15px;
              font-size: 15px;
              line-height: 1.7;
              margin-bottom: 30px;
            }
          }
        }
      }
      .all--progress--wrap{
        .month--text--contents{
          >p{
            font-size: 15px;
          }
          .month--gap{
            >span{
              &:nth-of-type(1){
                padding: 15px;
                margin-right: 10px;
              }
              &:nth-of-type(2){
                font-size: 18px;
              }
            }
          }
        }
        .progress--section{
          .progress--title{
            .step--label{
              font-size: 18px;
            }
          }
          .progress--container{
            &.mo{
              gap: 20px;
              .progress--box{
                &:last-child{
                  margin-top: 82px;
                }
                .progress--txt{
                  span{
                    font-size: 15px;
                  }
                  strong{
                    font-size: 16px;
                  }
                }
              }
            }
          }
        }
        .compatibility--inner--conls{
          padding: 20px 25px 30px 25px;
          >h2{
            font-size: 18px;
            margin-left: -25px;
            margin-bottom: 5px;
            padding-left: 25px;
          }
          .captions{
            font-size: 15px;
            line-height: 1.4;
          }
          .desc{
            margin-top: 15px;
            line-height: 1.4;
            font-size: 15px;
          }
          .btn--wrapper{
            right: 25px;
            gap: 10px;
            button{
              padding: 15px;
            }
          }
        }
        .step--section{
          .inner--s--title{
            span{
              &:nth-of-type(1){
                margin-right: 10px;
                font-size: 18px;
              }
              &:nth-of-type(2){
                margin-top: 10px;
                display: block;
                font-size: 15px;
              }
            }
          }
          .inner--grid{
            flex-wrap: wrap;
            row-gap: 30px;
            &::before{
              content: "";
              display: block;
              width: 100%;
              height: 1px;
              background: rgba(46, 204, 113, 0.5);
              position: absolute;
              width:calc(100% - 180px);
              left: 90px;
              top: calc(50% + 65px);
              z-index: -1;
            }
            .grid{
              width: 33.3333%;
              &.web{
                display: none;
              }
              &.mo{
                display: flex;
              }
              .desc{
                padding-top: 10px;
                font-size: 13px;
              }
              &:last-child{
                position: relative;
                &::after{
                  content: '';
                  display: inline-block;
                  background: rgba(46, 204, 113, 0.5);
                  position: absolute;
                  width: 1px;
                  height: 20px;
                  top: -20px;
                  left: 50%;
                }
              }
            }
          }
        }
      }
    }
    .faq--wrapper{
      .inner--contents{
        .faq--list--wrap{
          ul{
            li{
              .faq--item--title{
                >p{
                  font-size: 15px;
                }
              }
              .faq--item--content{
                >p{
                  font-size: 15px;
                }
              }
            }
          }
        }
      }
    }
    .mna--reason--wrap{
      .swiper-slide{
        transform: translateX(20px);
      }
    }
    .faq--wrapper{
      .inner--contents{
        .faq--list--wrap{
          padding-top: 30px;
        }
      }
    }
  }
  .top--btn{
    right: 20px;
    bottom: 20px;
    width: 45px;
    height: 45px;
  }
  footer{
    section{
      align-items: flex-start;
      flex-direction: column;
      .footer--left{
        .copy--text{
          gap: 5px;
          margin-top: 20px;
          p{
            font-size: 14px;
            span{
              font-size: 14px;
              margin-right: 20px;
              &::after{
                right: -10px;
                height: 12px;
              }
            }
          }
        }
      }
      .footer--right{
        gap: 10px;
        a{
          font-size: 14px;
        }
      }
    }
  }
}

@media(max-width: 500px){
  header{
    .header--line--banner--wrap{
      .inner--contents{
        h3{
          font-size: 16px;
        }
        .close--btn{
          width: 30px;
          height: 30px;
          top: 0px;
        }
      }
    }
  }
  main{
    .main--visual--section{
      .main--visual--pager{
        padding: 10px 20px;
        height: 70px;
        .prev--next--wrap{
          gap: 5px;
        }
        .main--visual--progress{
          margin-right: 10px;
          .progress-text{
            display: none;
          }
          .main--visual--progress--bar{
            .progress-bar{
              width: 140px;
            }
          }
          .progress-title{
            width: 140px;
            font-size: 14px;
            margin-bottom: 10px;
            padding-left: 0;
          }
        }
      }
      .main--visual--wrap{
        .main--visual--img{
          .main--visual--txt{
            h3{
              font-size: 30px;
            }
            p{
              font-size: 15px;
            }
          }
        }
      }
    }
    .section--container{
      .process--plan--wrap{
        .title--wrap{
          margin-bottom: 30px;
          >h2{
            font-size: 24px;
          }
        }
        .content--wrap{
          .direct--wrap{
            .circle{
              &:nth-of-type(3), &:nth-of-type(4){
                width: 100%;
              }
              &:nth-of-type(3){
                position: relative;
                &::after{
                  content: '';
                  position: absolute;
                  width: 1px;
                  height: 30px;
                  display: inline-block;
                  border-right: 3px dashed #2ecc71;
                  top: calc(100% + 15px);
                  left: 50%;
                }
              }
            }
            .bar{
              &.mo2{
                display: none;
              }
            }
          }
          .process--wrap{
            .process--title{
              width: calc(100% - 24px);
              font-size: 15px;
              padding: 20px 5px;
            }
            .process--cont{
              .process--top{
                .process--side{
                  &::after{
                    width: 44px;
                    background-size: 100%;
                    left: calc(100% - 20px);
                  }
                  &:last-child{
                    &::after{
                      right: calc(100% - 20px);
                    }
                  }
                }
                .process--circle{
                  &::after{
                    width: 20px;
                    background-size: 100%;
                    background-position: top;
                  }
                }
              }
              .process--bot{
                padding-top: 85px;
                .line{
                  width: 20px;
                  height: 44px;
                  background-size: 100%;
                }
                .process--side{
                  gap: 5px;
                  .line{
                    display: none;
                  }
                  .circle{
                    &:nth-of-type(2), &:nth-of-type(4){
                      &::after{
                        background-size: 20px 44px;
                        bottom: 100%;
                        background-position: bottom;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .title--wrap{
        >h2{
          font-size: 24px;
        }
        &.big{
          >h2{
            font-size: 24px;
          }
        }
      }
      .now--box--wrap{
        .box--top{
          flex-wrap: wrap;
          gap: 20px;
          margin-bottom: 50px;
          .box{
            width: 100%;
            flex-direction: row;
            gap: 20px;
            .box--img{
              width: 80px;
              min-width: 80px;
              img{
                width: 100%;
              }
            }
            >p{
              width: calc(100% - 120px);
              text-align: left;
            }
          }
        }
      }
      .four--strategy--wrap{
        .strategy--cont1{
          .cont--left{
            .box--wrap{
              &::before{
                width: 300px;
                height: 300px;
                top: 10px;
                left: calc(50% - 150px);
              }
            }
          }
        }
        .strategy--cont3{
          .box{
            background-size: 40%;
            &:nth-child(1){
              background-size: 25%;
            }
            &:nth-child(2){
              background-size: 20%;
            }
            dt{
              font-size: 16px;
            }
            dd{
              font-size: 15px;
              ul{
                gap: 5px;
              }
            }
          }
        }
      }
      .growth--logic--wrap{
        .title--box{
          width: 100%;
        }
        .logic--box{
          width: 100%;
          min-height: 240px;
          &.special{
            width: 100%;
          }
        }
      }
      .mna--dream--wrap{
        .dream--cont{
          padding: 20px;
          h4{
            font-size: 20px;
          }
          .box{
            padding: 20px;
            margin-bottom: 20px;
          }
          .chat{
            gap: 10px;
            .chat--bubble{
              padding: 15px;
              margin-bottom: 20px;
            }
          }
          .chat--answer{
            margin-bottom: 20px;
          }
        }
      }
      .family--business--wrap{
        .family--cont--wrap{
          .cont--left{
            h2{
              font-size: 24px;
            }
            span{
              font-size: 14px;
            }
          }
          .cont--right{
            .family--box--wrap{
              .family--box{
                width: 100%;
              }
            }
          }
        }
        .family--table--wrap{
          table{
            tr{
              td{
                padding: 15px 10px;
                font-size: 14px;
                ul{
                  li{
                    padding-left: 6px;
                    font-size: 14px;
                    &::before{
                    }
                  }
                }
              }
            }
          }
        }
      }
      .impt--search--wrap{
        >ul{
          li{
            width: 100%;
            text-align: center;
          }
        }
      }
      .impt--list--wrap{
        ul{
          flex-wrap: wrap;
          width: 100%;
          li{
            width: 100%;
            .thumb{
              margin-left: auto;
            }
          }
        }
      }
      .all--progress--wrap{
        .step--section{
          .inner--grid{
            &::after{
              top: 45px;
            }
            &::before{
              top: calc(50% + 60px);
            }
            .grid{
              .thumb{
                width: 90px;
                height: 90px;
              }
              &:first-child{
                .desc{
                  width: 90px;
                }
              }
            }
          }
        }
        .compatibility--inner--conls{
          .btn--wrapper{
            margin-top: 20px;
            width: 100%;
            justify-content: flex-end;
            position: static;
          }
        }
      }
    }
    .mna--prof--wrap{
      .prof--man--swiper{
        padding: 0 20px;
        .swiper-slide{
          .prof--card{
            gap: 20px;
            padding: 25px 30px;
            .thumb{
              width: 100px;
              height: 100px;
              min-width: 100px;
              img{
                width: 100%;
              }
            }
          }
        }
      }
    }
    .faq--wrapper{
      .inner--contents{
        .section--title{
          font-size: 24px;
        }
      }
    }
  }
}