header nav 열면 메인 밀림현상과 배경사라짐 문의드립니다 채택완료

header {display: flex; margin-top: -19px;} 

#header {background: #fff;margin: 0; } 

#header .logo{font-size: 25px;box-sizing: border-box;padding-top: 15px; position: fixed;  left: 45px;} 

#header .logo img {width: 130px;} 

#header .container{display: flex;justify-content: space-evenly;align-items: center;max-width:100% ;width:100%;margin: auto; position:fixed; z-index: 9;border-bottom:1px solid rgba(255,255,255,0.1); padding: 0 50px; } 

#header .container:hover {background-color: #f1f1f1} 

#header .gnb{text-align: right; height: 100px;} 

#header .nav {position: relative;}

#header .nav .logo{display:flex;width:200px;flex-wrap:wrap;justify-content: center;align-items: center;text-transform:uppercase;cursor:pointer;} 

#header .menu_btn{position:absolute;right:20px;top:20px;display:none;} 

#header .menu_btn div { width: 25px;height: 2px;background-color:#000;margin: 6px 0px;position: relative;transition:all .10s ease;} 

#header .menu_btn.lijo div{position:absolute;transition:all .10s ease;} 

#header .menu_btn.lijo div:nth-child(1){transform: rotate(45deg);top: 7px;right: 0px;} 

#header .menu_btn.lijo div:nth-child(2){width:0px;top: 7px;right: 0px;} 

#header .menu_btn.lijo div:nth-child(3){transform: rotate(-45deg);top: 7px; right: 0px;} 

#header .nav ul.gnb{margin-bottom:0px;padding-left:0px;display: flex;} 

#header .nav ul.gnb li{margin-bottom:0px;color:#fff;text-align: center;position: relative;} 

#header .nav ul.gnb li a {box-sizing: border-box;display:inline-block; width:170px; transition:.8s ease;text-transform:uppercase;color: #fff;font-size: 14px;} 

#header .nav ul.gnb > li > a {padding: 31px 45px; line-height: 60px;} 

#header .nav ul.gnb li ul.sub{position:absolute;padding-left:0px;opacity:0;visibility: hidden;padding:20px 0; z-index: 999;width: 100%} 

#header .nav ul.gnb li ul.sub li {display: block;position: relative;} 

#header .nav ul.gnb li ul.sub li a{padding:5px; color: #555; font-size: 13px;} 

.hd_bg:hover > .gnb > li > a {color: #555;} 

#header .tnb {float: right; display: inline-block; position: relative;top: 10px; right: 38px;} 

#header .nav ul.gnb li ul.sub {border-right: 1px solid #ddd; height: 390px;} 

#header .nav ul.gnb li ul.sub:hover > #header .nav ul.gnb li ul.sub li a {color: color:#033ea3} 

#header .nav ul.gnb li ul.sub01 {border-left: 1px solid #ddd;} 

#header .nav ul.gnb li ul.sub li a:hover {color:#033ea3;font-weight: 600; transition: all 500ms} 

#header .tnb .tnbWrap li a svg { font-size: 25px; color: #fff;} 

#header .tnb .tnbWrap .login{float: left;margin-right: 50px;} 

#header .tnb .tnbWrap .lang{z-index: 999; float: right; display : inline-block;width:30px; height:30px; cursor:pointer; margin:0 auto; text-align:center;position: relative;} 

#header .tnb .tnbWrap .lang02 {width:110px; background-color:#f5f5f5; display:none; position: absolute;right: 0;top: 47px;box-shadow: 5px 5px 5px rgba(0,0,0,0.3);} 

#header .tnb .tnbWrap .lang02 li {border-bottom: 1px solid #ddd;} 

#header .tnb .tnbWrap .lang02 li:last-child {border-bottom: none;} 

#header .tnb .tnbWrap .lang02 li a{display: inline-block; width: 100%;padding:10px; font-size:12px; font-weight: 500; letter-spacing: 1px;} 

#header > .sub-menu-bar-bg::after { content:""; position:absolute;  top:44px; left:0; 

right:0;  bottom:0; z-index:-1; background-color:green; } 

#header > .menu-box-1-bg::after {  position:absolute; content:"";  top:0; left:0;  width:100%; height:44px; background-color:white; z-index:-1; } 

#header > .menu-box-1 ul > li { position:relative; } 

.top-bar > .menu-box-1 > ul ul {  position:absolute; top:100%; left:0; } 

.top-bar > .menu-box-1 ul > li > a {   padding:10px; } 

@media(min-width:1024px){ 

#header .nav ul.gnb:hover li ul.sub {visibility:visible;opacity:1;transform:translateY(0px);}  

#header .nav ul.gnb li:hover{display:inline-block;margin-bottom:0px;} 

header.open .hd_bg{position: fixed;width: 100%;background: #f1f1f1;z-index: 99;transition: all .3s;border-top: 1px solid #dcdcdc;} 

#header .nav ul.gnb li ul.sub li a{text-align: center} 

#header .nav .active  {position: relative; } 

#header .nav .active li a {color: #033ea3; } 

#header .nav .active:hover:after{content: '';display: block;width: 100%;height: 2px; background-image: linear-gradient(315deg, #033ea3, #033ea3);position: absolute;left: 0;bottom: 0} 

#header .nav ul.gnb li ul.sub{display: block !important}  

} 

  

@media(max-width:1240px){ 

 #header .nav ul.gnb:hover li ul.sub{visibility:visible;opacity:1;transform:translateY(0px);} 

    #header .nav ul.gnb li:hover{display:inline-block;margin-bottom:0px;}

    header.open .hd_bg{position: absolute;width: 100%;z-index: 9;transition: top 5s;border-top: 1px solid #dcdcdc}

    #header .nav ul.gnb li ul.sub li a{text-align: center}

    #header .nav .active  {position: relative}

    #header .nav .active:hover:after{content: '';display: block;width: 100%;height: 2px;background: #000;position: absolute;left: 0;bottom: 0}

    #header .nav ul.gnb li ul.sub{display: block !important}

} 

   

@media(max-width:1024px){

    

#header{position: relative;position: fixed;width: 100%;top: 0;left: 0;padding: 20px 0}

   #header .menu_btn{display:block;top:50%;transform: translateY(-50%)}

    #header .menu_btn.lijo{top: 30%}

   #header .nav ul.gnb{position: absolute;top: 65px;transform: translateX(100%);left: 0;transition:.8s ease;width:100%; height: calc(100vh - 65px);background: #fff;overflow-y: auto;display: block}

   #header .nav ul.gnb li a{text-align: left}

    #header .nav ul.gnb > li > a{padding: 10px 20px}

   #header .nav ul.gnb.surya {transform: translateX(0%);}

   #header .nav ul.gnb li ul.sub{opacity: 1;visibility: visible;display:none;position:relative;padding-top:0px;width:100%;transition:0s;transform: translateY(0px);padding: 0 20px}

   #header .nav ul.gnb li ul.sub:after{display:none;}

   .hd_bg{display: none !important}

}

$(document).ready(function () {

    $('.menu_btn').click(function () {

        $('.menu_btn').toggleClass('lijo');

        $('.gnb').toggleClass('surya');

    });

    $('.gnb li').click(function () {

        $(this).find('.sub').slideToggle();

        var t = $(this).find('.sub');

        $('.sub').not(t).slideUp();

    });

    var max_h = 0;

    $(".sub").each(function () {

        var h = parseInt($(this).css("height"));

        if (max_h  h) {

            max_h = h;

        }

    });

    // 마우스 over 시

$('#header, .gnb, .hd_bg').mouseenter(function () {

        // menu bg

        var menuHeight = $('#header').outerHeight();

        $('.hd_bg').css({

            'top': menuHeight + 'px',

            height: max_h + 30 + 'px',

        });

        $("#header").css('background-color', '#f1f1f1');

        $('#header').addClass('open');

        $('.hd_bg').css('height', '540');

        $('.gnb > li > a').css('color', '#555');

        $('.mobile_open').css('color', '#555');

        $('.container').css('border-bottom', '1px solid #ddd');

        $('#header .tnb .tnbWrap li a svg ').css('color', '#555');

    });

    $('#header, .hd_bg').mouseleave(function () {  

        $('#header').removeClass('open');

        $("#header").css('background-color', '');

        $('.hd_bg').css('height', '0');

        $('.gnb > li > a').css('color', '#fff');

        $('.mobile_open').css('color', '#fff');

        $('.container').css('border-bottom', '1px solid rgba(255,255,255,0.1)');

        $('#header .tnb .tnbWrap li a svg ').css('color', '#fff');

    });

    $('.gnb > li').mouseenter(function () {

        $(this).addClass('active');

        $(this).siblings().removeClass('active')

    });

    $('.gnb > li').mouseleave(function () {

        $(this).removeClass('active');

    });

});