#header { position: sticky; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; }
#header > div { position: relative; }
#header > div .bg { background-color: #000000; }
#header > div .bg .container { position: relative; }
#header > div .bg .container h1 { padding: 120px 0 15px; transition: all 0.1s; }
#header > div .bg .container h1 a img { vertical-align: top; width: 222px; transition: all 0.1s; }

#header > div .bg .container #gnb_menu { position: absolute; top: 48px; right: 0; font-size: 0; transition: all 0.1s; }
#header > div .bg .container #gnb_menu li { display: inline-block; position: relative; margin: 0 0 0 20px; }
#header > div .bg .container #gnb_menu li a { color: #929292; font-family: 'Pretendard'; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; position: relative; padding: 0 0 0 20px; }
#header > div .bg .container #gnb_menu li a img { vertical-align: top; height: 12px; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); }

#header > div .bg .container #nav_menu { position: absolute; bottom: 0; right: 0; font-size: 0; }
#header > div .bg .container #nav_menu > li { display: inline-block; position: relative; }
#header > div .bg .container #nav_menu > li > a { display: inline-block; color: #FFF; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; padding: 33px 60px; }
/* #header > div .bg .container #nav_menu > li > a:hover ,
#header > div .bg .container #nav_menu > li > a.active { font-weight: 700; } */
#header > div .bg .container #nav_menu > li > ol { position: absolute; top: 100%; left: 0; right: 0; width: 100%; padding: 20px 0 0; z-index: 10; }
#header > div .bg .container #nav_menu > li > ol > li a { display: block; color: #FFF; text-align: center; font-family: 'Pretendard'; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: -0.36px; padding: 15px 0; }
/* #header > div .bg .container #nav_menu > li > ol > li a:hover ,
#header > div .bg .container #nav_menu > li > ol > li a.active { font-weight: 700; } */

#header > div .bg .container #mobile { display: none; position: absolute; cursor: pointer; right: 0; bottom: 0; }
#header > div .bg .container #mobile span { position: absolute; height: 3px; width: 100%; background-color: #fff; transition: all 0.3s; }
#header > div .bg .container #mobile span:nth-child(1) { top: 0; }
#header > div .bg .container #mobile span:nth-child(2) { top: 50%; transform: translate(0, -50%); }
#header > div .bg .container #mobile span:nth-child(3) { bottom: 0; }
#header > div .bg .container #mobile.active span:nth-child(2) { opacity: 0; }

#header > div #nav_back { position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: rgba(21, 21, 21, 0.70); height: 0; display: block; }

#header.active > div .bg .container h1 { padding-top: 60px; }
#header.active > div .bg .container h1 a img { width: 202px; }
#header.active > div .bg .container #gnb_menu { top: 24px; }

@media screen and ( max-width: 1250px ) {
    #header > div .bg .container h1 { padding: 100px 0 14px; }
    #header > div .bg .container h1 a img { width: 192px; }

    #header > div .bg .container #gnb_menu { top: 38px; right: 25px; }
    #header > div .bg .container #gnb_menu li { margin: 0 0 0 18px; }
    #header > div .bg .container #gnb_menu li a { font-size: 13px; padding: 0 0 0 18px; }
    #header > div .bg .container #gnb_menu li a img { height: 11px; }

    #header > div .bg .container #nav_menu > li > a { font-size: 17px; padding: 30px 45px; }
    #header > div .bg .container #nav_menu > li > ol { padding: 18px 0 0; }
    #header > div .bg .container #nav_menu > li > ol > li a { font-size: 17px; padding: 14px 0; }

    #header.active > div .bg .container h1 { padding-top: 55px; }
    #header.active > div .bg .container h1 a img { width: 177px; }
    #header.active > div .bg .container #gnb_menu { top: 20px; }

    #header > div .container #mobile { right: 25px; }
}

@media screen and ( max-width: 1024px ) {
    #header > div .bg .container h1 { padding: 80px 0 13px; }
    #header > div .bg .container h1 a img { width: 162px; }

    #header > div .bg .container #gnb_menu { top: 28px; right: 20px; }
    #header > div .bg .container #gnb_menu li { margin: 0 0 0 16px; }
    #header > div .bg .container #gnb_menu li a { font-size: 12px; padding: 0 0 0 16px; }
    #header > div .bg .container #gnb_menu li a img { height: 10px; }

    #header > div .bg .container #nav_menu > li > a { font-size: 16px; padding: 27px 30px; }
    #header > div .bg .container #nav_menu > li > ol { padding: 16px 0 0; }
    #header > div .bg .container #nav_menu > li > ol > li a { font-size: 16px; padding: 13px 0; }

    #header.active > div .bg .container h1 { padding-top: 50px; }
    #header.active > div .bg .container h1 a img { width: 152px; }
    #header.active > div .bg .container #gnb_menu { top: 16px; }

    #header > div .container #mobile { right: 20px; }
}

@media screen and ( max-width: 768px ) {
    #header > div .bg .container h1 { padding: 60px 0 12px; }
    #header > div .bg .container h1 a img { width: 132px; }

    #header > div .bg .container #gnb_menu { top: 18px; right: 15px; }
    #header > div .bg .container #gnb_menu li { margin: 0 0 0 14px; }
    #header > div .bg .container #gnb_menu li a { font-size: 11px; padding: 0 0 0 14px; }
    #header > div .bg .container #gnb_menu li a img { height: 9px; }

    #header > div .bg .container #nav_menu { display: none; height: calc(100vh - 110px); overflow-y: auto; -ms-overflow-style: none; top: 100%; left: 0; right: 0; bottom: auto; background: rgba(21, 21, 21, 0.90); }
    #header > div .bg .container #nav_menu::-webkit-scrollbar { display: none; }
    #header > div .bg .container #nav_menu > li { display: block; border-bottom: 1px solid #fff; }
    #header > div .bg .container #nav_menu > li > a { display: block; font-size: 15px; padding: 15px; }
    #header > div .bg .container #nav_menu > li > ol { padding: 0; position: static; top: auto; left: auto; right: auto; width: auto; }
    #header > div .bg .container #nav_menu > li > ol > li a { font-size: 15px; padding: 12px 30px; text-align: left; border-top: 1px solid #929292; color: #929292; }
    #header > div .bg .container #nav_menu > li > ol > li:first-child a { border-top: 1px solid #fff; }

    #header.active > div .bg .container h1 { padding-top: 45px; }
    #header.active > div .bg .container h1 a img { width: 127px; }
    #header.active > div .bg .container #nav_menu { height: calc(100vh - 93px); }
    #header.active > div .bg .container #gnb_menu { top: 12px; }

    #header > div .bg .container #mobile { display: block; right: 15px; bottom: 18px; width: 30px; height: 26px; }
    #header > div .bg .container #mobile span { height: 3px; }
    #header > div .bg .container #mobile.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); }
    #header > div .bg .container #mobile.active span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); }
    #header > div #nav_back { display: none !important; }
}

@media screen and ( max-width: 640px ) {
    #header > div .bg .container h1 { padding: 40px 0 11px; }
    #header > div .bg .container h1 a img { width: 102px; }

    #header > div .bg .container #gnb_menu { top: 8px; right: 10px; }
    #header > div .bg .container #gnb_menu li { margin: 0 0 0 12px; }
    #header > div .bg .container #gnb_menu li a { font-size: 10px; padding: 0 0 0 12px; }
    #header > div .bg .container #gnb_menu li a img { height: 8px; }

    #header > div .bg .container #nav_menu { height: calc(100vh - 80px); }
    #header > div .bg .container #nav_menu > li > a { font-size: 14px; padding: 14px 10px; }
    #header > div .bg .container #nav_menu > li > ol > li a { font-size: 14px; padding: 11px 20px; }

    #header.active > div .bg .container h1 { padding-top: 40px; }
    #header.active > div .bg .container h1 a img { width: 102px; }
    #header.active > div .bg .container #nav_menu { height: calc(100vh - 80px); }
    #header.active > div .bg .container #gnb_menu { top: 8px; }

    #header > div .bg .container #mobile { right: 10px; bottom: 14px; width: 27px; height: 23px; }
    #header > div .bg .container #mobile span { height: 2px; }
    #header > div .bg .container #mobile.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 8px); }
    #header > div .bg .container #mobile.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -8px); }
}