@charset "UTF-8";
@media screen and (max-width:1519px) {
    .inner {
        width: 95%;
    }
}

@media screen and (max-width:1407px) {
    header .inner {
        width: 95%;
    }
}

@media screen and (max-width:1024px) {
    .ham {
        top: 20px;
        right: 20px;
    }

    .header_bg {
        width: 100%;
        height: 213px;
    }

    header {
        padding-top: 76px;
        margin: 0;
    }

    header .inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0 80px;
    }

    header h1 {
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
    }

    header h1 a img {
        width: 166px;
    }

    header nav {
        background: none;
        padding: 0;
        border: none;
        width: auto;
        height: 34px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    header nav .right {
        width: auto;
    }

    header nav .right .nav_ham {
        display: block;
        cursor: pointer;
        pointer-events: auto;
        /* 클릭 이벤트 활성화 */
    }

    header nav .right .nav_ham img {
        pointer-events: none;
        /* img는 이벤트 무시하고 부모로 전달 */
    }

    header .inner .gnb {
        display: none;
    }

    /* Footer 1024px */
    footer {
        padding: 100px 0 80px !important;
    }

    footer .footer_inner {
        padding: 0 80px !important;
    }

    /* Footer Top */
    footer .footer_top {
        margin-bottom: 134px;
    }

    /* footer_gnb를 flex-wrap으로 변경하여 HOME과 나머지를 줄바꿈 */
    footer .footer_top .footer_menu .footer_gnb {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 64px;
        align-items: flex-start;
    }

    /* footer_gnb_wrap를 position relative로 설정하여 footer_family_site의 기준점으로 사용 */
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap {
        position: relative !important;
    }

    /* HOME - 왼쪽 */
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_link.home {
        font: 300 24px/1 "Assistant", sans-serif;
        text-transform: uppercase;
        flex: 0 0 auto;
    }

    /* 메뉴 리스트 */
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_gnb_list { 
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* gap: 34px!important; */
    }

    footer .footer_top .footer_menu .footer_gnb .footer_gnb_link {
        font-size: 28px !important;
    }

    /* Family Site - 오른쪽 정렬 */
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_family_site {
        position: absolute;
        right: 0;
        bottom: 65px;
    }

    /* Footer Bottom */
    footer .footer_bottom {
        gap: 41px;
    }

    footer .footer_bottom .footer_brand {
        gap: 68px;
    }

    footer .footer_bottom .footer_info .footer_info_text {
        font: 300 16px/1.3 "Assistant", sans-serif;
    }
}

@media screen and (max-width:440px) {
    .ham {
        top: 20px;
        right: 20px;
    }

    .header_bg {
        /* width: 440px; */
        height: 136px;
    }

    header {
        /* width: 440px; */
        padding: 0;
        margin: 0;
    }

    header .inner {
        width: 100%;
        margin: 0 auto;
        /* 또는 원하는 마진값 */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 36px 30px 0;
    }

    header nav .right .lang,
    header nav .right .user {
        display: none;
    }

    /* Footer 440px */
    footer{
        margin: 0;
        padding: 60px 0 !important;
        overflow: hidden;
    }

    footer .footer_inner{
        padding: 0 30px !important;
    }

    /* Footer Top */
    footer .footer_top {
        margin-bottom: 60px;
    }

    footer .footer_top .footer_menu .footer_gnb {
        display: flex;
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
    }

    /* footer_gnb_wrap를 position relative로 설정 */
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap {
        position: relative !important;
        width: 100%;
    }

    footer .footer_top .footer_menu .footer_gnb .footer_gnb_link.home {
        font: 300 16px/1 "Assistant", sans-serif;
    }

    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_gnb_list{
        display: flex;
        flex-wrap: wrap;
        gap: 12px 20px;
        width: 100%;
    }

    footer .footer_top .footer_menu .footer_gnb .footer_gnb_link {
        font-size: 16px !important;
    }

    /* Family Site - 부모 기준 위치 조정 */
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_family_site {
        position: absolute;
        right: 0;
        top: 198px;
        width: 164px;
        height: 50px; 
    }
    
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_family_site .family_site_list {
        width: 164px;
        height: 50px;
    }
    
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_family_site .family_site_btn {
        height: 50px;
        padding: 0 20px;
    }
    
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_family_site .family_site_btn span {
        font-size: 14px;
    }
    
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_family_site .family_site_btn .family_site_arrow {
        width: 20px;
        height: 20px;
    }
    
    /* on 상태일 때 높이 자동 조정 */
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_family_site.on {
        height: auto;
    }
    
    footer .footer_top .footer_menu .footer_gnb .footer_gnb_wrap .footer_family_site.on .family_site_list {
        height: auto;
    }

    /* Footer Bottom */
    footer .footer_bottom {
        gap: 30px;
    }

    footer .footer_bottom .footer_brand {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 19px;
    }

    footer .footer_bottom .footer_brand .footer_logo {
        width: 174px;
        height: 65px;
    }

    footer .footer_bottom .footer_info .footer_info_text {
        font: 400 10px/1.3 "Assistant", sans-serif;
    }
}