헬프영역 반응형 만들기

@media(max-width:1024px){
    .help > article.h_box1 {width: 49%; margin-right: 2%;}
    .help > article.h_box2 {width: 49%; margin-right: 0%;}
    .help > article.h_box3 {width: 100%; margin-top: 20px;}
    .help > article  {height: auto;}
    .service ul li {width: 25%; height: auto;}
    .service ul li:nth-child(1) {border-bottom: 1px solid #d7d7d7;}
    .service ul li:nth-child(2) {border-bottom: 1px solid #d7d7d7; border-right: 0;}
    .service ul li strong {padding-bottom: 10%; display: block;}
}

@media(max-width:768px){
    #help .row {padding: 0 24px;}
    .help {padding-bottom: 24px;}
    .help > article.h_box3 > div {height: auto;}
    .help > article h3 {font-size: 24px;font-weight: 700; height: 27px; margin-bottom: 20px; padding-bottom: 10px; }
    .help > article.h_box1 {width: 100%; padding: 24px;margin-right: 0%; background: #fff; margin-top: 24px;box-sizing: border-box;}
    .help > article.h_box2 {width: 100%; padding: 24px;margin-right: 0%;background: #fff;margin-top: 24px;box-sizing: border-box;}
    .help > article.h_box3 {width: 100%; background: #fff;margin-top: 24px; box-sizing: border-box;}
    .help > article.h_box3 h3 {display: none;}
    .help > article.h_box3 li {border: 0;}

}

@media(max-width:600px){
    #help .row {padding: 0 8px;}
    .help {padding-bottom: 24px;}
    .help > article.h_box3 > div {height: auto;}
    .help > article h3 {font-size: 18px; margin-bottom: 0;}
    .help > article.h_box1 {margin-top: 8px; padding: 16px;}
    .help > article.h_box2 {margin-top: 8px;padding: 16px; }
    .help > article.h_box3 {margin-top: 8px;  }
    .notice ul li a {padding: 5px 15px;}
    .card {padding: 8px;}
    .help > article.h_box3 li {width: 50%; border: 1px solid #d7d7d7;}
    .service ul li:nth-child(1) {border-right: 1px solid #d7d7d7;}
    .service ul li:nth-child(3) {border-right: 1px solid #d7d7d7;}
}