@charset "utf-8";


/** PC **/
@media screen and (max-width:1748px){
    /* header */
    #header #gnb{ height:128px; padding:0 16px; max-width: 1024px; }
    #header #gnb > *:not(#nav):not(.btn-menu){ height:64px; }
    #header #gnb .logo{ margin-right:16px; flex:1; }
    #header #gnb .logo > a{ padding:8px 0; }
    #header #gnb .btn-menu{ top:78px; right:16px; transform:translate(0, 0); left: initial; margin-left: initial;}
    #header #nav{ width:calc( 100% + 32px ); height:64px; margin:0 -16px; position:relative; top:auto; left:auto; right:auto; }
    #header #nav .nav-menu{ max-width:none; }

    #wrap.nav-on #nav{ margin:0 -16px; top:64px; }

    /* search */
    #search{ top:128px; }

    /* footer */
    #footer > .wide-layout{ max-width: 1024px; }

}

/** Tablets **/
@media screen and (max-width:1024px){
    /* header */
    #header #gnb .gnb-util > li:not(:first-child){ margin-left:8px; }
    #header #gnb .btn-menu{ margin-left:0; left:auto; }

    /* nav */
    #wrap.nav-on #nav .nav-menu > li:not([class^='nav']) > a{ height:32px; padding:0 4px; font-size:18px; }
    
    /* footer */
    /* #footer > .wide-layout{ margin:0 16px; } */
    #footer .footer-link .list-sns{ margin:-4px -4px -4px auto; }
    #footer .footer-link .list-sns > a{ margin:4px; }
}


/** mobiles **/
@media screen and (max-width:767px){
    *::-webkit-scrollbar{ width:8px; height:8px; }

    /* wrap */
    .logo{ font-size:18px; }

    /* header */
    #header #gnb{ height:96px; }
    #header #gnb > *:not(#nav):not(.btn-menu){ height:48px; }
    #header #gnb .logo > a{ padding:4px 0; }
    #header #gnb .gnb-util{ min-width:86px; justify-content:flex-end; }
    #header #gnb .gnb-util .btn, #header #gnb .gnb-util .btn:active{ height:26px; line-height:24px; font-size:12px; font-weight:400; }

    #header #gnb .gnb-util > li > a.btn-ico{ padding:2px; }
    #header #gnb .gnb-util > li > a.btn-link{ font-size:12px; }
    #header #gnb .gnb-util > li > a [class^='ico']{ width:18px; height:18px; }
    #header #gnb .gnb-util > li > a.btn-S{ padding:0 8px; }
    #header #gnb .gnb-util > li > a.btn-S .ico-setting-s{ width:14px; height:14px; }
    #header #gnb .btn-menu{ width:32px; height:32px; top:56px; padding:8px 7px; }
    #header #gnb .btn-menu > span{ margin:3px 0; }

    /* nav */
    #header #nav{ height:48px; }
    #header #nav .nav-menu{ padding-right:64px; }
    #header #nav .nav-menu > li:not([class^='nav']){ margin-left:16px; }
    #header #nav .nav-menu > li:not([class^='nav']) > a{ font-size:14px; }
    #header #nav .nav-menu > li.nav-inclass > a{ font-size:0; }
    #header #nav .nav-menu > li.nav-inclass > a .strong{ font-size:16px; }

    #wrap.nav-on #gnb .btn-menu:before{ transform:translate(0, 5px) rotate(-45deg); }
    #wrap.nav-on #nav{ top:48px; }
    #wrap.nav-on #nav .nav-menu { padding-top:16px; }
    #wrap.nav-on #nav .nav-menu > li:not([class^='nav']) > a{ font-size:16px; }
    #wrap.nav-on #nav .nav-menu > li.nav-logout{ margin-top:8px; }
    #wrap.nav-on #nav .nav-menu > li.nav-logout > a{ padding:4px 0; font-size:12px; display:inline-block; }
    #wrap.nav-on #nav .nav-menu > li.nav-inclass > a{ font-size:10px; }
    #wrap.nav-on #nav .nav-menu > li.nav-inclass > a .strong{ font-size:10px; }

    /* search */
    #search{ padding:16px 0; top:96px; }
    #search .list-search > dt{ margin-top:24px; }
    #search .list-search > dd{ font-size:14px; }
    #search .list-search > dd .ico-close-cir-s{ width:14px; height:14px; }

    /* container */
    #container{ padding-bottom:50px; }

    /* footer */
    #footer .info-area{ line-height:18px; font-size:10px; }
    #footer .footer-link{ margin:0 auto; flex-direction:column; justify-content:center; align-items:flex-start; }
    #footer .footer-link .list-sns{ margin:4px -4px -4px; }
    #footer .footer-link .list-sns > a > .icon{ width:32px; height:32px; }
    #footer .footer-link .list-sns > a > .icon [class^='ico']{ width:16px; height:16px; }
    #footer .footer-site{ margin-top:8px; }
    #footer .footer-gsg{ margin-top:16px; }
    #footer .footer-copy{ flex-direction:column; align-items:center; }
    #footer .footer-copy .logo{ font-size:14px; justify-content:center; }
    #footer .footer-copy .logo .ico-logo, #footer .footer-copy .logo .ico-logo-wt{ width:60px; height:14px; margin-left:6px; }
    #footer .footer-copy .btn-area{ margin:8px 0 0 0; }

}

/** mobiles xs **/
@media (max-width:360px) and (orientation:portrait){
    /* wrap */
    .logo{ font-size:16px; }

    /* header */
    #header #gnb{ padding:0 10px; }
    #header #gnb .gnb-util > li:not(:first-child){ margin-left:6px; }
    #header #gnb .gnb-util > li > a.btn-S, #header #gnb .gnb-util > li > a.btn-link{ font-size:10px; }
    #header #gnb .logo{ font-size:15px; }
}