sebuma/assets/scss/media.scss

@media(max-width: 1600px){
  header{
    .header--line--banner--wrap{
      background-image: url(../img/img--top--banner--mo.svg);
      background-position: left 20px bottom;
      background-size: contain;
      padding: 0 20px;
    }
    .header--contents--wrap{
      .header--contents{
        .header--gnb--wrap{
          padding: 0 20px;
          .gnb--wrap{
            height: 80px;
            >ul{
              li{
                a{
                  padding: 15px 20px;
                }
              }
            }
          }
        }
      }
    }
  }
  main{
    padding-top: 160px!important;
    &.actv{
      padding-top: 80px!important;
    }
    .section--container{
      .mna--impor--wrap{
        gap: 70px;
        .desc--wrap{
          &::after{
          }
        }
      }
    }
  }
  footer{
    .footer--container{
      padding: 0 20px;
    }
  }
}

@media(max-width: 1200px){
  header{
    .header--contents--wrap{
      .header--contents{
        .header--gnb--wrap{
          .gnb--wrap{
            >ul{
              display: none;
            }
            .user--wrap{
              margin-left: auto;
            }
            .ham--wrap{
              margin-left: 25px;
              width: 24px;
              height: 24px;
              cursor: pointer;
              background-image: url(../img/ico--ham.svg);
            }
          }
        }
      }
    }
    .header--ham--wrap{
      display: block;
    }
  }
  main{
    .section--container{
      padding-left: 20px;
      padding-right: 20px;
      .title--wrap{
        .title{
          font-size: 35px;
        }
      }
      .mna--impor--wrap{
        flex-direction: column-reverse;
        height: auto;
        position: relative;
        &::after{
            content: '';
            display: inline-block;
            position: absolute;
            bottom: 20px;
            right: -100px;
            width: 304px;
            height: 472px;
            background-size: cover;
            background-repeat: no-repeat;
            background-image: url(../img/bg--wedding--mo.svg);
        }
        .desc--wrap{
          width: 100%;
          h3{
            text-align: center;
          }
          p{
            text-align: center;
          }
          &::after{
            display: none;
          }
        }
        .img--wrap{
          align-self: self-start;
          margin-left: -20px;
          width: 70%;
          &::before{
            width: 100%;
            background-size: cover;
          }
        }
      }
      .mna--matching--wrap{
        .txt--wrap{
          width: 40%;
          >h3{
            font-size: 36px;
          }
        }
      }
      .mna--free--wrap{
        gap: 40px;
        padding: 25px 40px;
        .desc--wrap{
          h3{
            font-size: 20px;
          }
        }
      }
      .mna--reason--wrap{
        padding: 40px 450px 40px 40px;
        h3{
          font-size: 22px;
          margin-bottom: 25px;
        }
        p{
          font-size: 18px;
        }
      }
      .mna--sol--wrap{
        margin-top: 35px;
        gap: 20px;
        flex-wrap: wrap;
        .sol--left{
          padding: 40px;
          width: 100%;
        }
        .sol--right{
          width: 100%;
          gap: 20px;
          flex-direction: row;
          .sol--top{
            width: 50%;
            height: auto;
            padding: 40px;
          }
          .sol--bot{
            width: 50%;
            height: auto;
            padding: 40px 40px 0 40px;
          }
        }
      }
      .mna--apply--wrap{
        gap: 0px;
        position: relative;
        .apply--content{
          .title--wrap{
            h3{
              padding-top: 60px;
              margin-bottom: 40px;
            }
            .title{
              font-size: 40px;
            }
          }
        }
        .apply--bg{
          width: 100%;
          position: absolute;
          top: 0px;
          &::before{
            bottom: auto;
            width: 164px;
            height: 164px;
            background-size: 100%;
          }
        }
      }
      .mna--differ--wrap{
        .differ--top{
          gap: 20px;
          >div{
            width: calc(50% - 10px);
            padding: 40px 80px 60px 40px;
          }
        }
        gap: 20px;
      }
      .mna--teaser--wrap{
        gap: 20px;
        .teaser--box{
          padding: 50px 35px;
          >h3{
            font-size: 30px;
          }
          .circle{
            padding: 15px;
            font-size: 15px;
            margin-top: 30px;
          }
          >h4{
            margin-top: 30px;
            margin-bottom: 25px;
            font-size: 20px;
          }
          >ul{
            >li{
              font-size: 16px;
              >span{
                font-size: 14px;
              }
            }
          }
          .desc{
            margin-top: 35px;
            font-size: 15px;
          }
          >a{
            padding: 18px 40px;
            margin-top: 35px;
          }
        }
      }
    }
    .matching--section{
      .section--container{
        .title--wrap{
          .title{
            font-size: 35px;
          }
        }
      }
    }
    .main--visual--section{
      .main--visual--wrap{
        .main--visual--img{
          .main--visual--txt{
            >p{
              font-size: 14px;
              margin-bottom: 40px;
            }
            >h3{
              font-size: 36px;
            }
          }
        }
      }
    }
  }
}

@media(max-width: 1024px){
  header{
    .header--line--banner--wrap{
      .inner--contents{
        p{
          font-size: 14px;
        }
      }
    }
  }
  main{
    .section--container{
      .desc--box--wrap{
        padding: 60px 40px 60px 380px;
        background-position: left 20px bottom;
      }
      .mna--matching--wrap{
        gap: 60px;
        flex-direction: column;
        .txt--wrap{
          width: 100%;
          text-align: center;
          >h3{
            margin-bottom: 60px;
          }
        }
        .seq--wrap{
          width: 100%;
          .seq--box{
            margin: 0!important;
            .seq--right{
              margin-left: auto;
            }
          }
        }
      }
      .mna--reason--wrap{
        background-size: 218px 119px;
        padding-right: 280px;
        background-position: right 40px bottom -1px;
      }
      .mna--sol--wrap{
        .sol--right{
          .sol--bot{
            .bubble--wrap{
              align-items: flex-end;
              gap: 15px;
              .img{
                width: 136px;
                img{
                  width: 100%;
                }
              }
              .bubble{
                padding: 25px 20px;
                font-size: 15px;
                margin-bottom: 40px;
                b{
                  font-size: 15px;
                }
              }
            }
          }
        }
      }
      .mna--teaser--wrap{
        flex-direction: column;
        .teaser--box{
          width: 100%;
          background-size: 20%;
          &.blue--type{
            >a{
              margin-top: 50px;
            }
          }
        }
      }
    }
  }
}

@media(max-width: 768px){
  header{
    .header--line--banner--wrap{
      .inner--contents{
        justify-content: flex-start;
        >p{
          text-align: left;
          padding-left: 146px;
          padding-right: 40px;
          .mo{
            display: block;
          }
        }
      }
    }
  }
  main{
    .blue--section{
      .section--container{
        padding-top: 60px;
      }
    }
    .section--container{
      padding-top: 60px;
      padding-bottom: 80px;
      .title--wrap{
        .title{
          font-size: 30px;
        }
        .desc{
          font-size: 16px;
          &.color--blue{
            font-size: 15px;
          }
        }
      }
      .desc--box--wrap{
        padding: 45px 40px 145px 40px;
        background-size: 208px 130px;
        background-position: right bottom;
        >h3{
          font-size: 22px;
          margin-bottom: 25px;
        }
        >p{
          font-size: 15px;
        }
      }
      .mna--impor--wrap{
        margin-top: 60px;
        margin-bottom: 80px;
        gap: 100px;
        &::after{
          width: 118px;
          height: 176px;
          right: -36px;
        }
        .desc--wrap{
          h3{
            font-size: 20px;
            margin-bottom: 40px;
          }
          p{
            font-size: 15px;
          }
        }
        .img--wrap{
          width: 82%;
          height: 300px;
        }
      }
      .mna--matching--wrap{
        margin-bottom: 80px;
        .txt--wrap{
          >h3{
            font-size: 30px;
          }
          >p{
            font-size: 16px;
          }
        }
        .seq--wrap{
          gap: 20px;
          .seq--box{
            padding: 30px 35px;
            gap: 20px;
            .seq--left{
              .numb{
                font-size: 13px;
                width: 26px;
                margin-bottom: 15px;
                height: 26px;
              }
              >p{
                font-size: 17px;
              }
            }
          }
        }
      }
      .mna--free--wrap{
        padding: 30px 30px;
        align-items: flex-start;
        gap: 30px;
        .img--wrap{
          width: 108px;
          min-width: 108px;
          img{
            width: 100%;
          }
        }
        .desc--wrap{
          h3{
            font-size: 18px;
            margin-bottom: 15px;
          }
          p{
            font-size: 15px;
          }
        }
      }
      .mna--reason--wrap{
        padding: 45px 40px 144px 40px;
        margin-top: 30px;
        p{
          font-size: 15px;
        }
      }
      .mna--sol--wrap{
        &::before{
          width: 572px;
          height: 281px;
          background-size: 100%;
          right: 20px;
          top: -115px;
        }
        .sol--left{
          >ol{
            gap: 30px;
            >li{
              flex-direction: column;
            }
          }
          >p{
            &:last-child{
              margin-top: 40px;
            }
          }
        }
        .sol--right{
          flex-direction: column;
          .sol--top{
            width: 100%;
            >ol{
              >li{
                >ol{
                  >li{
                    flex-direction: column;
                  }
                }
              }
            }
          }
          .sol--bot{
            width: 100%;
          }
        }
      }
      .mna--apply--wrap{
        .apply--content{
          .title--wrap{
            .title{
              font-size: 30px;
              margin-bottom: 50px;
            }
            .desc{
              font-size: 16px;
              margin-bottom: 60px;
            }
          }
          .circle{
            margin-bottom: 25px;
          }
          ol{
            gap: 20px;
            li{
              width: 100%;
            }
          }
        }
      }
      .mna--differ--wrap{
        margin-top: 100px;
        .differ--top{
          flex-direction: column;
          >div{
            span{
              font-size: 17px;
              margin-bottom: 30px;
            }
            h3{
              font-size: 22px;
            }
            a{
              margin-top: 35px;
            }
            &.differ--left{
              width: 100%;
              padding: 40px 40px 120px 40px;
              background-image: url(../img/img--differ1--mo.svg);
            }
            &.differ--right{
              padding: 40px 40px 186px 40px;
              width: 100%;
              background-image: url(../img/img--differ2--mo.svg);
              background-position: bottom 30px right 16px;
            }
          }
        }
        .differ--bot{
          padding: 40px;
          background-size: cover;
          background-position: left 100px center;
        }
      }
      .mna--process--wrap{
        margin-top: 60px;
      }
      .mna--qna--wrap{
        .qna--wrap{
          &.active{
            .answer--wrap{
              padding: 30px 20px;
              gap: 20px;
            }
          }
          .question--wrap{
            >p{
              font-size: 16px;
            }
          }
          .answer--wrap{
            .inner--box{
              >p{
                font-size: 15px;
              }
              >ul{
                margin-top: 20px;
                gap: 20px;
                >li{
                  font-size: 15px;
                  padding-left: 25px;
                  &::before{
                    top: 8px;
                    left: 0px;
                  }
                }
              }
            }
          }
        }
      }
      .mna--teaser--wrap{
        margin-top: 35px;
      }
    }
    .matching--section{
      .section--container{
        padding-top: 60px;
        padding-bottom: 80px;
        .title--wrap{
          .title{
            font-size: 30px;
          }
        }
      }
    }
    .main--visual--section{
      .main--visual--wrap{
        .main--visual--img{
          height: 650px;
          img{
            max-width: 100%;
            width: 100%;
            object-fit: cover;
            height: 650px;
          }
          &::before{
            height: 305px;
          }
        }
      }
    }
  }
  footer{
    .footer--wrap{
      .footer--top{
        .footer--link{
          column-gap: 30px;
          row-gap: 20px;
          a{
            font-size: 15px;
          }
        }
      }
      .footer--bot{
        .footer--inner--top{
          padding: 40px 0 30px;
        }
        .footer--inner--bot{
          padding: 30px 0 40px;
        }
      }
    }
  }
}

@media(max-width: 500px){
  main{
    .section--container{
      .mna--impor--wrap{
        .img--wrap{
          width: 70%;
          height: 155px;
        }
      }
    }
  }
}