/* =========================================================
   RESPONSIVE COMMON
   PC / TABLET / MOBILE 통합
========================================================= */

/* 모든 이미지 반응형 */
img {
    max-width:100%;
    height:auto;
}


/* iframe / video 반응형 */
iframe,
video {
    max-width:100%;
}


/* =========================================================
   PC / MOBILE MENU SWITCH
========================================================= */

/* PC 기본 */
.pc-menu-area {
    display:block;
}

.mobile-menu-area {
    display:none;
}


/* =========================================================
   TABLET + MOBILE
   1024px 이하
========================================================= */

@media screen and (max-width:1024px) {

    /*
    PC 탑메뉴 숨김
    */

    .pc-menu-area {
        display:none !important;
    }


    /*
    모바일 메뉴 표시
    */

    .mobile-menu-area {
        display:block !important;
    }


    /*
    화면 가로 넘침 방지
    */

    html,
    body {
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }


    #theme_wrapper {
        width:100%;
        max-width:100%;
        overflow:hidden;
    }


    #page {
        width:100%;
        max-width:100%;
    }


    /*
    공통 컨텐츠 폭
    */

    .c {
        width:100%;
        max-width:100%;

        padding-left:20px;
        padding-right:20px;

        box-sizing:border-box;
    }


    /*
    고정폭 요소 대응
    */

    table {
        max-width:100%;
    }

}


/* =========================================================
   MOBILE
   767px 이하
========================================================= */

@media screen and (max-width:767px) {

    html {
        font-size:16px;
    }


    body {
        width:100%;

        overflow-x:hidden;
    }


    /*
    컨텐츠 좌우 여백
    */

    .c {
        width:100%;

        padding-left:15px;
        padding-right:15px;

        box-sizing:border-box;
    }


    /*
    이미지
    */

    img {
        max-width:100%;

        height:auto;
    }


    /*
    폼요소 모바일 폭
    */

    input,
    select,
    textarea {
        max-width:100%;

        box-sizing:border-box;
    }


    /*
    테이블 가로스크롤 필요 시
    */

    .tbl_wrap {
        width:100%;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;
    }


    /*
    팝업 모바일 대응
    */

    .hd_pops {
        max-width:calc(100% - 30px) !important;
    }


    .hd_pops img {
        width:auto;

        max-width:100%;

        height:auto;
    }


    /*
    PC용 강제 줄바꿈 숨김
    */

    .d-ele {
        display:none !important;
    }


    /*
    모바일 전용 요소 표시
    */

    .m-ele {
        display:block;
    }

}


/* =========================================================
   PC
   1025px 이상
========================================================= */

@media screen and (min-width:1025px) {

    .pc-menu-area {
        display:block !important;
    }


    .mobile-menu-area {
        display:none !important;
    }


    /*
    PC에서는 모바일 전용 요소 숨김
    */

    .m-ele {
        display:none !important;
    }

}



/* =========================================================
   DEVICE CHANGE
========================================================= */

/*
반응형 통합 사이트에서는
'모바일 화면으로 / PC 화면으로' 전환 버튼이 필요 없음
*/

#device_change {
    display:none !important;
}