/* *******************************************************
 * filename : common_responsive.css
 * description : 반응형 기본 레이아웃 및 컨텐츠 CSS
 * date : 2025-03-06
******************************************************** */

/* 반응형 */
/*=======================================================================================*/

@media (max-width: 1660px) {
}

@media (max-width: 1400px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .header_inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media all and (max-width: 1100px) {
    html,
    body,
    input,
    textarea,
    select,
    button,
    table {
        font-size: 14px;
    }
}

@media all and (max-width: 900px) {
    html,
    body,
    input,
    textarea,
    select,
    button,
    table {
        font-size: 13px;
    }
}

@media all and (max-width: 1200px) {
}

/* 이후 부터는 모바일 버전 768이하 */
@media all and (max-width: 768px) {
    .header {
        background: #fff;
        height: 8vh;
    }

    .header_inner {
        position: relative;
    }

    .header_inner .logo {
        padding: 0;
        background: none;
    }

    .header_inner .logo img {
        width: auto;
        height: 5vh;
    }

    .header_inner .btn_M_menu {
        display: block;
    }

    .header_inner .menu .btn_M_close {
        display: block;
    }

    .header_inner .phone {
        background: none;
        padding: 0;
        aspect-ratio: 1/1;
        width: auto;
        height: 4.8vh;
    }

    .header_inner .phone a {
        width: 100%;
        height: 100%;
        border: none;
        background: url(../images/SVG/IC_PHONE.svg) no-repeat;
        background-size: 100% 100%;
    }

    .header_inner .phone a .txt,
    .header_inner .phone a .number {
        display: none;
    }

    .menu {
        position: fixed;
        z-index: 999;
        background: #fff;
        height: 100vh;
        max-width: 100%;
        width: 80%;
        top: 0;
        left: -80%;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    .menu.active {
        left: 0;
    }

    .menu > ul {
        display: block;
    }

    .menu > ul > li {
        line-height: 4;
        border-bottom: 2px solid #dcd8d6;
    }

    .menu > ul > li > a {
        color: #41403f;
        padding-left: 1.5rem;
    }

    .menu > ul > li.active > a {
        background: #ff8503;
        color: #fff;
        position: relative;
    }

    .menu > ul > li.active > a::after {
        content: "\f105";
        font-family: "Font Awesome 6 pro";
        font-size: 1.25rem;
        background: none;
        position: absolute;
        right: 1rem;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        width: auto;
        height: auto;
        bottom: auto;
        left: auto;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .copy_plicy {
        height: auto;
    }

    .copy_plicy .inner {
        display: block;
    }

    .copy_plicy .inner .left li {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .copy_plicy .inner .left li a {
        padding: 0.9375rem 0;
        text-align: center;
    }

    .copy_plicy .inner .right {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .copy_plicy .inner .right li a {
        padding: 0.625rem 0.625rem;
    }

    .copy_address .inner {
        padding: 1.875rem 1rem;
    }

    .copyright .inner {
        padding: 1.25rem 1rem;
    }

    .page_title {
        padding-top: 1.25rem;
    }
}

/* 이후 부터는 모바일 버전 500이하 */
@media all and (max-width: 500px) {
    .container {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .layer_pop_wrap {
        width: 100%;
        height: 100%;
    }

    .layer_pop_wrap > .inner {
        width: 90%;
        height: 80%;
    }

    .layer_pop_wrap .inner .top {
        height: 3.125rem;
        line-height: 3.125rem;
    }

    .layer_pop_wrap .inner .cont {
        overflow-y: auto;
        height: calc(100% - 3.125rem);
    }
    .layer_pop_wrap > .inner .cont {
        padding: 1rem;
    }
}