/**
 * Created by PhpStorm.
 * Date         :
 * Developer    :
 * Description  : wp_responsive.css
 * ⓒ 2021. WebPlanet Co. All Rights Reserved.
 */

@charset "utf-8";

/**********************************************************************************************************************/
/* 작성방법 */
/*
1. 모든 스타일은 클래스명 .wp_wrap 을 시작으로 작성한다.
2. 공통 스타일의 클래스명은 cm_ 접두어를 사용한다.
 */
/**********************************************************************************************************************/

@media (max-width: 1530px) {    
/**********************************************************************************************************************/
/* 공통 */
/**********************************************************************************************************************/
.wp_wrap .cm_inner {
    padding: 0 15px;
}
/**********************************************************************************************************************/


/**********************************************************************************************************************/
/* 메인 */
/**********************************************************************************************************************/
.slick-progress-bar-container {
    left: 15px;
}
/**********************************************************************************************************************/
}


@media (max-width: 1200px) {
    /* 헤더영역 */
    /**********************************************************************************************************************/
    .wp_wrap header .h_inner nav .gnb .m_list {
        width: 140px;
    }
    /**********************************************************************************************************************/

    /* 푸터영역 */
    /**********************************************************************************************************************/
    .wp_wrap footer .bot {
        flex-direction: column;
        gap: unset;
    }
    .wp_wrap footer .bot:after {
        display: none;
    }
    .wp_wrap footer .bot .ct {
        display: none;
    }
    /**********************************************************************************************************************/

    /* 메인영역 */
    /**********************************************************************************************************************/
    .wp_wrap #visual .main_slider .slide .slide_inner .txt_box .top_tit {
        font-size: 40px;
    }
    /**********************************************************************************************************************/

    /* 서브영역 */
    /**********************************************************************************************************************/
    .wp_wrap .sub_main .sub_main_inner {
        right: 2%;
    }


    /* about */
    .wp_wrap #about .white .cm_inner {
        flex-direction: column;
        gap: 30px;
    }
    .wp_wrap #about .white .right {
        width: 100%;
    }

    .wp_wrap #about .gray .cm_inner {
        flex-direction: column;
        gap: 30px;
    }
    .wp_wrap #about .gray .right {
        width: 100%;
    }

    .wp_wrap #about .white .left .tit_box .tit {
        font-size: 40px;
    }
    .wp_wrap #about .white .right .s_tit {
        margin-top: 0;
        font-size: 25px;
    }
    .wp_wrap #about .gray .left .tit_box .tit {
        font-size: 40px;
    }
    .wp_wrap #about .gray .right .s_tit {
        margin-top: 0;
        font-size: 25px;
        margin-bottom: 20px;
    }

    /* work */
    .wp_wrap #work .top .tit_box .tit {
        font-size: 40px;
    }
    .wp_wrap #work .top .ex {
        font-size: 20px;
    }
    .wp_wrap #work .bot .tit_box .tit {
        font-size: 40px;
    }
    .wp_wrap #work .bot .ex {
        font-size: 20px;
    }

    /* business */
    .wp_wrap #business .top .tit_box .tit {
        font-size: 40px;
    }
    .wp_wrap #business .top .ex {
        font-size: 20px;
    }


    /* contact */
    .wp_wrap #contact .top .tit_box .tit {
        font-size: 40px;
    }
    /**********************************************************************************************************************/

}


@media (max-width: 992px) {
    /* 헤더영역 */
    /**********************************************************************************************************************/
    .wp_wrap header .h_inner nav .gnb {
        display: none;
    }
    .wp_wrap header .mo_mnu{
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: calc(100% - 65px);
    height: 100vh;
    background: #fff;        
    padding: 90px 0 0 0;
    transition: 0.5s;
    border-left: 1px solid #ddd;
    margin-right: auto;
    z-index: 1000;
}
.wp_wrap header .mo_mnu.on{
    right: 0;
}
/* 모바일메뉴 닫기버튼 */
.wp_wrap header .mo_mnu .close_icon .icon_box{
    position: absolute;
    top: 30px;
    right: 30px;
    background: #fff;
    border: none;
    outline: none;
}
.wp_wrap header .mo_mnu .close_icon .icon_box i{
    font-size: 20px;
    padding: 5px;
    border: 1px solid rgb(81,81,81);
    font-weight: 700;
    color: rgb(81,81,81);;
}
/* 모바일메뉴 */
.wp_wrap header .h_inner .momnu_icon {
    padding: 32px 0;
    display: block;
}
.wp_wrap header .mo_mnu .mo_gnb {
    display: flex;
    flex-direction: column;
    width: 100%;
}    
.wp_wrap header .mo_mnu .mo_gnb>li{
    text-align: center;
    position: relative;
    flex: 1;
    border-bottom: 1px solid #ddd;
}
.wp_wrap header .mo_mnu .mo_gnb>li:first-child{
    border-top: 1px solid #ddd;
}
.wp_wrap header .mo_mnu .mo_gnb>li>a{
    display: block;
    width: 100%;
    padding: 18px 0;
    color: #333;
    position: relative;
    top: 0;
    background: #fff;
    font-size: 18px;
    font-family: var(--font-pre500);
}
.wp_wrap header .mo_mnu .mo_gnb .mo_sub_mnu{        
    position: relative;
    top: 0;
    padding: 0;
    background: #f8f8f8;
    display: none;
}
.wp_wrap header .mo_mnu .mo_gnb .mo_sub_mnu>li{
    text-align: center;
    background: #f8f8f8;
}
.wp_wrap header .mo_mnu .mo_gnb .mo_sub_mnu>li:last-child{
    border-bottom: none;
}
.wp_wrap header .mo_mnu .mo_gnb .mo_sub_mnu>li>a{
    display: inline-block;
    padding: 15px 0;
    font-size: 17px;
}

.wp_wrap header .mnu_bg {
    height: 90px;
}
.wp_wrap header .h_inner .momnu_icon {
    padding: 32px 0;
}
    /**********************************************************************************************************************/

    /* 푸터영역 */
    /**********************************************************************************************************************/
    /**********************************************************************************************************************/

    /* 메인영역 */
    /**********************************************************************************************************************/
    .wp_wrap #visual .main_slider .slide .slide_inner .txt_box {
        /* text-align: center; */
    }
    /**********************************************************************************************************************/

    /* 서브영역 */
    /**********************************************************************************************************************/
    
    /* about */
    .wp_wrap #about .white .cm_inner {
        flex-direction: column;
        gap: 30px;
    }
    .wp_wrap #about .white .right {
        width: 100%;
    }

    .wp_wrap #about .gray .cm_inner {
        flex-direction: column;
        gap: 30px;
    }
    .wp_wrap #about .gray .right {
        width: 100%;
    }

    .wp_wrap #about .white .left .tit_box .tit {
        font-size: 40px;
    }
    .wp_wrap #about .white .right .s_tit {
        margin-top: 0;
        font-size: 25px;
    }
    .wp_wrap #about .gray .left .tit_box .tit {
        font-size: 40px;
    }
    .wp_wrap #about .gray .right .s_tit {
        margin-top: 0;
        font-size: 25px;
        margin-bottom: 20px;
    }
    /**********************************************************************************************************************/
}


@media (max-width: 768px) {
    /* 헤더영역 */
    /**********************************************************************************************************************/
    /**********************************************************************************************************************/

    /* 푸터영역 */
    /**********************************************************************************************************************/
    /**********************************************************************************************************************/

    /* 메인영역 */
    /**********************************************************************************************************************/
    .wp_wrap #visual .main_slider .slide {
        /* height: 80vh; */
    }
    .wp_wrap #visual .main_slider .slide .slide_inner .txt_box .top_tit {
        font-size: 35px;
    }
    .wp_wrap #visual .copy {
        width: 100%;
        text-align: center;
    }
    .wp_wrap header .h_inner .mlogo {
        min-width: 100px;
    }
    .wp_wrap header .h_inner .mlogo>a {
        width: 100%;
    }
    .wp_wrap header .h_inner .mlogo>a>img {
        width: 80%;
    }



    .slick-progress-bar-container {
        bottom: 22%;
        width: 350px;
    }    
    .wp_wrap #visual .main_slider .slide .slide_inner .cm_inner{
        position: absolute;
        top: 70%;
        transform: translateY(-50%);
    }



    .wp_wrap #visual .main_slider .slide .img_bg img.pc_img{
        display: none;
    }
    .wp_wrap #visual .main_slider .slide .img_bg img.mo_img{
        display: block;
    }
    /**********************************************************************************************************************/

    /* 서브영역 */
    /**********************************************************************************************************************/
    /* about */
    .wp_wrap #about .white {
        padding: 120px 0;
    }
    .wp_wrap #about .gray {
        padding: 120px 0;
    }
    .wp_wrap #about .white .right .ex>br {
        display: none;
    }
    .wp_wrap #about .gray .right .ex>br {
        display: none;
    }
    .wp_wrap #about .white .right .r_list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .wp_wrap #about .white .left .tit_box .tit {
        font-size: 35px;
    }
    .wp_wrap #about .white .right .s_tit {
        font-size: 23px;
    }
    .wp_wrap #about .gray .left .tit_box .tit {
        font-size: 35px;
    }
    .wp_wrap #about .gray .right .s_tit {
        font-size: 23px;
    }
    .wp_wrap #about .gray .right .m_tit {
        font-size: 23px;
    }

    /* work */
    .wp_wrap #work {
        padding: 120px 0;
    }
    .wp_wrap #work .top .tit_box .tit {
        font-size: 35px;
    }
    .wp_wrap #work .top .w_list {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 75px;
    }
    .wp_wrap #work .top .w_list>li .w_box .ex {
        margin-bottom: 0;
    }
    .wp_wrap #work .top .ex {
        font-size: 18px;
    }
    .wp_wrap #work .bot .tit_box .tit {
        font-size: 35px;
    }
    .wp_wrap #work .bot .ex {
        font-size: 18px;
    }

    /* business */
    .wp_wrap #business {
        padding: 120px 0;
    }
    .wp_wrap #business .top .tit_box .tit {
        font-size: 35px;
    }
    .wp_wrap #business .top .ex {
        font-size: 18px;
    }
    .wp_wrap #business .top {
        margin-bottom: 50px;
    }

    /* contact */
    .wp_wrap #contact {
        padding: 120px 0;
    }
    .wp_wrap #contact .top .tit_box .tit {
        font-size: 35px;
    }
    .wp_wrap #contact .bot {
        flex-direction: column;
    }
    .wp_wrap #contact .bot .map {
        width: 100%;
        height: 500px;
    }
    .wp_wrap #contact .bot .inquiry {
        width: 100%;
    }
    /**********************************************************************************************************************/
}


@media (max-width: 576px) {
    /* 헤더영역 */
    /**********************************************************************************************************************/
    /**********************************************************************************************************************/

    /* 푸터영역 */
    /**********************************************************************************************************************/
    .wp_wrap footer .bot .lt .f_logo>img {
        width: 25%;
    }
    /**********************************************************************************************************************/

    /* 메인영역 */
    /**********************************************************************************************************************/
    .wp_wrap #visual .main_slider .slide .slide_inner .txt_box .top_tit {
        font-size: 30px;
    }




    /**********************************************************************************************************************/

    /* 서브영역 */
    /**********************************************************************************************************************/
    .wp_wrap .sub_main .img_box {
        height: 200px;
    }
    .wp_wrap .sub_main .img_box>img {
        height: 100%;
    }

    /* about */
    .wp_wrap #about .white {
        padding: 80px 0;
    }

    .wp_wrap #about .gray {
        padding: 80px 0;
    }
    .wp_wrap #about .white .left .tit_box .tit {
        font-size: 30px;
    }
    .wp_wrap #about .white .right .s_tit {
        font-size: 20px;
    }
    .wp_wrap #about .white .right .ex {
        font-size: 16px;
    }
    .wp_wrap #about .gray .left .tit_box .tit {
        font-size: 30px;
    }
    .wp_wrap #about .gray .right .s_tit {
        font-size: 20px;
    }
    .wp_wrap #about .gray .right .m_tit {
        font-size: 20px;
    }
    .wp_wrap #about .gray .right .l_tit {
        font-size: 18px;
    }
    .wp_wrap #about .gray .right .ex {
        font-size: 16px;
    }

    /* work */
    .wp_wrap #work {
        padding: 80px 0;
    }
    .wp_wrap #work .top .tit_box .tit {
        font-size: 30px;
    }
    .wp_wrap #work .top .ex {
        font-size: 16px;
    }
    .wp_wrap #work .top .ex>br {
        display: none;
    }
    .wp_wrap #work .top .w_list>li .w_box .ex {
        font-size: 14px;
    }
    .wp_wrap #work .top .w_list>li .w_box .name {
        font-size: 18px;
        margin-bottom: 15px;
    }
    .wp_wrap #work .bot .tit_box .tit {
        font-size: 30px;
    }
    .wp_wrap #work .bot .ex {
        font-size: 16px;
    }

    /* business */
    .wp_wrap #business {
        padding: 80px 0;
    }
    .wp_wrap #business .top .tit_box .tit {
        font-size: 30px;
    }
    .wp_wrap #business .top .ex {
        font-size: 16px;
    }

    /* contact */
    .wp_wrap #contact {
        padding: 80px 0;
    }
    .wp_wrap #contact .top .tit_box .tit {
        font-size: 30px;
    }
    .wp_wrap #contact .bot .inquiry {
        padding: 30px;
    }
    .wp_wrap #contact .info_box .info_list>li {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }
    /**********************************************************************************************************************/
}

@media (max-width: 420px) {
    /* 헤더영역 */
    /**********************************************************************************************************************/
    /**********************************************************************************************************************/

    /* 푸터영역 */
    /**********************************************************************************************************************/
    .wp_wrap footer .top {
        margin-bottom: 30px;
        justify-content: center;
    }
    .wp_wrap footer .bot .rt {
        padding-top: 30px;
    }
    /**********************************************************************************************************************/

    /* 메인영역 */
    /**********************************************************************************************************************/
    .slick-progress-bar-container {
        width: 290px;
        bottom: 22%;
    }
    .wp_wrap #visual .main_slider .slide .slide_inner .txt_box .top_tit {
        font-size: 27px;
        letter-spacing: -1.5px;
    }


    /**********************************************************************************************************************/

    /* 서브영역 */
    /**********************************************************************************************************************/
    /* about */
    .wp_wrap #about .white .right .r_list {
        grid-template-columns: repeat(1, 1fr);
    }

    /* work */
    .wp_wrap #work .top .w_list {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 50px;
        column-gap: 0;
    }
    .wp_wrap #work .bot .ex>br {
        display: none;
    }

    /* business */
    .wp_wrap #business .top .ex>br {
        display: none;
    }

    /* contact */
    .wp_wrap #contact .bot .map {
        height: 400px;
    }
    .form_wrap .form_last_line .line_rt {
        justify-content: center;
    }
    .wp_wrap #contact .info_box .info_list>li .name {
        font-size: 23px
    }

    /* 모달 */
    .wp_wrap .com_md .md_outer .width_inner .md_inner p {
        font-size: 25px;
    }
    .wp_wrap .com_md .md_outer .width_inner {
        padding: 30px 20px;
    }
    /**********************************************************************************************************************/
}

@media (max-width: 320px) {
    /* 헤더영역 */
    /**********************************************************************************************************************/
    .wp_wrap header .h_inner .mlogo>a>img {
        width: 70%;
    }
    /**********************************************************************************************************************/

    /* 푸터영역 */
    /**********************************************************************************************************************/
    /**********************************************************************************************************************/

    /* 메인영역 */
    /**********************************************************************************************************************/
    .wp_wrap #visual .main_slider .slide {
        /* height: 70vh; */
    }
    /**********************************************************************************************************************/

    /* 서브영역 */
    /**********************************************************************************************************************/
    /* about */
    .wp_wrap #about .white .left .tit_box .tit {
        font-size: 25px;
    }
    .wp_wrap #about .white .right .s_tit {
        font-size: 18px;
    }
    .wp_wrap #about .white .right .ex {
        font-size: 14px;
    }
    .wp_wrap #about .gray .left .tit_box .tit {
        font-size: 25px;
    }
    .wp_wrap #about .gray .right .s_tit {
        font-size: 18px;
    }
    .wp_wrap #about .gray .right .m_tit {
        font-size: 18px;
    }
    .wp_wrap #about .gray .right .l_tit {
        font-size: 16px;
    }
    .wp_wrap #about .gray .right .ex {
        font-size: 14px;
    }

    /* work */
    .wp_wrap #work .top .tit_box .tit {
        font-size: 25px;
    }
    .wp_wrap #work .bot .tit_box .tit {
        font-size: 25px;
    }

    /* business */
    .wp_wrap #business .top .tit_box .tit {
        font-size: 25px;
    }

    /* contact */
    .wp_wrap #contact .top .tit_box .tit {
        font-size: 25px;
    }
    .wp_wrap #contact .bot .inquiry {
        padding: 20px 10px;
    }

    /* 모달 */
    .wp_wrap .com_md .md_outer .width_inner .icon_box {
        right: 18px;
    }
    .wp_wrap .com_md .md_outer .width_inner .md_inner p {
        font-size: 20px;
    }
    .wp_wrap .com_md .md_outer .width_inner .md_inner .txt_box .txt_body pre {
        font-size: 15px;
    }

    /**********************************************************************************************************************/
}