/* ------------------------------------------------------------------- 
 * responsive:
 * header
 * ------------------------------------------------------------------- */

@media screen and (max-width: 1300px) {
    li, .line li{
    font-size: var(--txt-lg);
    margin-bottom: 6px;
    }

    .about_wrap{
        position: inherit;
        border: none;
        display: flex;
        gap: 24px;
        height: auto;
        width: 100%;    
    }
    .about_wrap .tit{
         font-size: var(--txt-2xl);
    }
    .about_wrap .left{
        display: none;

    }
    .about_wrap .middle{
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 50%;
    }
    .about_wrap .middle-bottom::before{
        content: none;
    }
    .about_wrap .right::before{
        content: none;
    }
    .about_wrap .middle-top, .about_wrap .middle-bottom{
        flex: 1;
    }
    .middle-top, .middle-bottom, .right{
        position: inherit;
        border: 1px solid var(--c-black-5);
        border-radius: 20px;
        padding: 24px;
    }
    .image_slider .btn.prev{
        left: 4%;
    }
    .image_slider .btn.next{
        right: 4%
    }
    .price_wrap{
        width: 90%;
    }

    .price_box_group{
        gap: 1rem;
    }
    .price_box{
        padding: 32px;
    }
    .price_box .icon_box img{
        width: 60px;
        height: 60px;
    } 
    .price_box .tit{
        font-size: var(--txt-2xl);
    }
    .price_box .price .discount{
        font-size: var(--txt-lg-2);
    }
    .price_box .info_box{
        font-size: var(--txt-md-1);
    }
    .step_box_group{
      gap: 12px;
      margin: 2rem auto;
      width: 90%;
    }
    .step_box_group .step_box .desc_box .desc{
        font-size: var(--txt-md-1);
    }

    .contact_wrap{
        gap: 32px;
    }

    .footer .wrapper{
        width: 100%;
    }
    .footer .wrapper .logo{
        width: 120px;
    }
    .footer .wrapper .logo img{
        width: 120px;
    }
    .footer .wrapper .top{
        width: auto;
        padding: 2rem 0;
      
    }
    .footer .wrapper .right{
        width: 320px;
        border: none;
        padding: 0;
    }
    .footer .wrapper .center{
        width: 40%;
        margin-left: 10px;
    }
    
}

@media screen and (max-width: 900px) {
    .title_group .kor_tit{
        font-size: var(--txt-4xl-1);
    }
    .features_wrap{
        gap: 32px;
    }
    .tab-container{
        width: 730px;
    }
    .tab-container{
        width: 90%;
    }

    .price_box{
        padding: 20px;
    }
    .price_box .icon_box img{
        width: 48px;
        height: 48px;
    }
    .price_box .tit{
        font-size: var(--txt-lg);
         margin-top: 8px;
    }
    .price_box .sub_tit{
        margin-top: 0;
    }
    .price_box .price .discount{
        font-size: var(--txt-xl);
    }
    .price_box .price{
        margin: 4px 4px 16px;
    }
    .price_box .info_group{
        gap: 8px;
    }
    .price_box .info_box{
        font-size: var(--txt-md);
    }

    .step_box_group .icon_box img{
        width: 60px;
        height: 60px;
    }
    .step_box_group .step_box .desc_box .tit{
        font-size: var(--txt-lg);
        margin-bottom: 8px;
    }
    .step_box_group .step_box .desc_box .desc{
        font-size: var(--txt-md);
    }
    .contact_wrap{
        justify-content: center;
    }
    .cont_wrap.about, .cont_wrap.contact, .cont_wrap.features {
        padding: 48px 32px;
    }
    .contact_wrap .contact_form{
        width: 100%;
    }
    .inquiry-form{
        max-width: 100%;
    }

}


@media screen and (max-width: 760px) {
    .visual .caption h5{
        font-size: var(--txt-2xl);
    }
    .visual .caption h1{
        font-size: var(--txt-5xl);
    }
    .title_group{
        gap: 4px;
        margin-bottom: 1.2rem;
    }
    .title_group .kor_tit{
        font-size: var(--txt-4xl);
    }
    .check_green li, .check_white li, .line li{
        font-size: var(--txt-md-1);
    }
    .about_wrap, .about_wrap .middle{
        gap: 16px;
    }

    .middle-top, .middle-bottom, .about_wrap .right{
        padding: 24px;
    }
    .price_box_group{
        grid-template-columns: repeat(1, 1fr);
    }
    .price_box{
        width: 100%;
    }
}

@media screen and (max-width: 630px) {
    .cont_wrap.about, .cont_wrap.preview {
        margin: 3rem auto;
    }
    .title_group{
        gap: 4px;
        margin-bottom: 1.2rem;
    }

    .title_group .kor_tit{
        font-size: var(--txt-3xl-2);
    }
    .about_wrap{
        flex-direction: column;
        gap: 16px;
    }
    .about_wrap .middle{
        margin: 0 auto;
        gap: 16px;
        width: 100%;
    }
    .about_wrap .middle-top, .about_wrap .middle-bottom, .about_wrap .right{
        padding: 24px;
    }
    .about_wrap .tit{
        font-size: var(--txt-xl);
    }
    li, .line li{
        font-size: var(--txt-md);
    }
    .features_wrap{
        flex-direction: column;
    }
    .features_wrap .features_box{
        width: 100%;
    }
    .tit{
        font-size: var(--txt-xl);
    }
    .tab-container{
        font-size: var(--txt-lg);
    }
    .image_slider .btn img{
        width: 48px;
        height: 48px;
    }
    .step_box_group{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .step_box_group .step_box{
        margin: 0 auto;
    }
    .step_box_group .arrow{
        margin: 0 auto;
        transform: rotate(90deg);
    }
    .footer .wrapper .top {
        display: inherit;
        padding: 2rem;
    }    
    .footer .wrapper .center {
        width: 100%;
        margin: 1rem 0;
    }
    .footer .wrapper .info {
        width: 100%;
        margin: 1rem 0;
    }
    .footer .wrapper .info p {
        line-height: 1.5rem;
    }
}

@media screen and (max-width: 530px) {
    .header-inner{
        padding: 0 1rem;
    }
    .tab-container{
        font-size: var(--txt-md-1);
    }
    .sidebar{
        width: 200px;
        padding: 0;
    }
    .sidebar-menu{
        margin-top: 4rem;
    }
    .s-header{
        height: 64px;
    }
    .header-logo img{
        width:70%;
    }
    .header-menu{
        gap: 1rem;
    }
    .header-menu-text{
        font-size: var(--txt-md);
    }
    .header-menu-toggle img{
        width: 32px;
    }
    .visual .caption h5{
        font-size: var(--txt-lg-2);
    }
    .visual .caption h1{
        font-size: var(--txt-4xl);
        margin: 24px 0 40px;
    }
    .image_slider .tab_wrap img{
        width: 100%;
    }
    .image_slider{
        position: inherit;
        gap: 0;
    }
    .image_slider .btn{
        position: inherit;
        margin: 1rem;
        transform: none;
    }


    .tab-container{
        font-size: var(--txt-md);
    }
    .tabs{
        height: 36px;
    }
    .image_slider .tab_wrap img{
        border: 8px solid var(--c-black-1);
    }
    .guide_tit{
        font-size: var(--txt-2xl);
    }
    .price_wrap p{
        font-size: var(--txt-sm);
    }
    .step_box_group .arrow{
        width: 24px;
    }
    .cont_wrap.contact, .cont_wrap.features{
        padding: 48px 16px;
    }
    .inquiry-form{
        padding: 24px;
    }
    .two-cols{
        flex-direction: column;
    }


    
}
    @media screen and (max-width: 430px) {
        .about_wrap{
            padding: 0 1rem;
        }
    }