/* 반응형 */
@media all and (min-width:1024px) {
    .mobile-side-bar {
        display: none;
    }
    .mobile-side-bar-screen.active {
        display: none;
    }
 }

 @media all and (max-width:1536px){
    /* MAIN.html start */
    .main-page {
        flex-direction: column;
        margin-bottom: 0;
    }
    .main-page .constent-1 {
        gap: 28px;
        height: 100%;
    }
    .main-page .constent-2 {
        width: 60%;
        rotate: 90deg;
    }
    .main-page .constent-2 .content-list a {
        rotate: -90deg;
    }
    
    /* list.l1 */
    .main-page .constent-2 .content-list .list.l1 {
        top: -60px;
        right: -20px;
    }
    .main-page .constent-2 .content-list .list.l1 .point {
        top: 40px;
        left: -74px;
    }

    /* list.l2 */
    .main-page .constent-2 .content-list .list.l2 {
        top: 2%;
        transform: translateY(-48%);
        right: 190px;
    }
    .main-page .constent-2 .content-list .list.l2 .point {
        top: 135px;
        left: -59px;
    }

    /* list.l3 */
    .main-page .constent-2 .content-list .list.l3 {
        top: 27%;
        transform: translateY(-50%);
        right: 325px;
    }
    .main-page .constent-2 .content-list .list.l3 .point {
        bottom: -90px;
        left: 8px;
    }

    /* list.l4 */
    .main-page .constent-2 .content-list .list.l4 {
        top: 58%;
        transform: translateY(-50%);
        right: 325px;
    }
    .main-page .constent-2 .content-list .list.l4 .point {
        bottom: -90px;
        right: 8px;
    }

    /* list.l5 */
    .main-page .constent-2 .content-list .list.l5 {
        top: 83%;
        transform: translateY(-48%);
        right: 190px;
    }
    .main-page .constent-2 .content-list .list.l5 .point {
        top: 135px;
        right: -59px;
    }

    /* list.l6 */
    .main-page .constent-2 .content-list .list.l6 {
        bottom: -62px;
        right: -20px;
    }
    .main-page .constent-2 .content-list .list.l6 .point {
        top: 40px;
        right: -74px;
    }
    /* MAIN.html end */
}
 @media all and (max-width:1024px) {
    br {
        display: none;
      }
    /* MAIN.html start */
    .main-page .constent-1 {
        width: 100%;
    }
    .main-page .constent-2 {
        display: none;
    }
    .constent-2-mobile {
        display: block;
    }
    .constent-2-mobile .content-list {
        background-image: url(../img/main_page/content2_mobile_bg_1.png);
        background-position: left;
        background-size: 88%;
        background-repeat: no-repeat;
    }
    /* MAIN.html end */

    /* body */
    body.active{
        overflow-y: hidden;
      }
    /* top-bar */
    .top-bar {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 
              inset 0 2px 5px rgba(255, 255, 255, 0.2);
    }
    .top-bar {
        display: none;
    }
    .top-bar.max {
        display: flex;
    }
    
    /* mobile-side-bar */
    .mobile-side-bar {
        display: block;
    }
    .mobile-side-bar.active {
        position: absolute;
    }

    /* main */
    .main-1 {
        margin-top: 60px;
    }
    .main-1 .main-content {
        margin-bottom: 80px;
    }
    /* side-bar */
    .main-1 .side-bar {
        display: none;
    }
    /* contents-box */
    .main-1 .contents-box {
        width: 100%;
    }
    /* inquiry-banner-max */
    .inquiry-banner {
        display: none;
    }
    .inquiry-banner-max {
        display: flex;
    }
    /* footer */
    .footer .contents-box {
        flex-direction: column;
        align-items: center;
        justify-content: start;
        gap: 50px;
    }
    .footer .contents-box ul > li > a {
        font-size: 16px;
        padding: 12px 32px;
     }
     .top_btn,
    .kakao_btn {
        right: 20px;
    }
 }
 @media all and (max-width:768px) {
    /* MAIN.html start */
    .main-page .constent-1 .content-boxs .box {
        height: 300px;
    }
    /* font */
    .main-page .text-box h1 {
        font-size: 46px;
    }
    .main-page .text-box h2 {
        font-size: 36px;
    }
    .main-page .constent-1 .content-boxs .box h2 {
        font-size: 32px;
    }
    .main-page .constent-1 .content-boxs .box span {
        font-size: 14px;
    }
    .main-page .constent-2-mobile h1   {
        font-size: 46px;
    }

    .constent-2-mobile .list {
        height: 200px;
    }
    /* MAIN.html end */
 }
 
 @media all and (max-width:638px) {
    .main-1 { 
        padding: 8px 20px;
    }
    /* top-bar */
    .top-bar {
        padding: 0 20px;
        height: 72px;
    } 
    .top-bar .contents .content {
        gap: 16px
    }
    .top-bar .contents .logo img {
        height: 42px;
    }
    .top-bar .contents .login-icon  {
        height: 22px;
    }
    .top-bar.max .content ul > li > a {
        width: 22px;
        height: 22px;
    }
 }

 @media all and (max-width:480px) {
    /* top-bar */
    .top-bar {
        padding: 0 10px;
        height: 64px;
    } 
    .top-bar .contents .logo img {
        height: 32px;
    }
    .mobile-side-bar.active {
        width: 100%;
    }
    /* .inquiry-banner-max */
    .inquiry-banner-max span {
        display: none;
    }
    /* footer */
    .footer .contents-box ul > li > a {
        font-size: 14px;
        padding: 12px 32px;
     }
     .kakao_btn {
        bottom: 178px;
    }
    .top_btn {
        bottom: 98px;
    }

    /* MAIN.html start */
    .main-page {
        padding: 0 10px;
    }
    .main-page .constent-1 {
        gap: 10px;
    }
    .main-page .constent-1 .content-boxs {
        flex-direction: column;
    }
    .main-page .constent-1 .content-boxs .box {
        width: 100%;
    }
    .constent-2-mobile {
        margin-top: 100px;
    }
    .constent-2-mobile .content-list {
        background-image: url(../img/main_page/content2_mobile_bg_2.png);
        background-position: left;
        background-size: 80%;
        background-repeat: no-repeat;
    }
    .constent-2-mobile .list {
        height: 200px;
    }
    .constent-2-mobile .content-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* font */
    .main-page .text-box h1 {
        font-size: 2rem;
    }
    .main-page .text-box h2 {
        font-size: 24px;
    }
    .main-page .constent-1 .content-boxs .box span {
        font-size: 14px;
    }
    
    .main-page .constent-2-mobile h1   {
        font-size: 2rem;
    }
    /* contents-box font */
    .main-1 .contents-box .content .title > h1 {
        font-size: 32px;
    }
    .main-1 .contents-box .content .title span {
        font-size: 18px;
    }
    .main-1 .contents-box .content .list > h1 {
        font-size: 28px;
    }
    .main-1 .contents-box .content .list h2 {
        font-size: 18px;
    }
    .main-1 .contents-box .content .list h3 {
        font-size: 16px;
    }
    .main-1 .contents-box .content .list h4 {
        font-size: 14px;
    }
    .main-1 .contents-box .content .list h5 {
        font-size: 14px;
    }
    .main-1 .contents-box .content .list span {
        font-size: 14px;
    }
    .main-1 .contents-box .content .list .span span{
        font-size: 12px;
    }
    .main-1 .contents-box .content .list .span h1 {
        font-size: 12px;
    }
    .main-1 .contents-box .content .list p {
        font-size: 10px;
    }
 }