#Gnb { display: flex; justify-content: flex-start; align-items: center; position: relative; width: 100%; height: 100px; padding: 0 120px 0 50px; transition: all .2s; position: fixed;background-color:rgba(0, 0, 0, 0); }
#Gnb.on { border-bottom: 1px solid #e1e1e1; }
#Gnb.sub { position: absolute; }
.lnb_bg { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 420px; background: #fff; }
#tl_hd { position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; transition: all 0.3s ease; }

/* 로고 */
#Gnb .logo { position: relative; z-index: 20; width: 210px; height: 60px; }
#Gnb .logo a { background: url(../img/logo_w.png) center no-repeat; width: 210px; height: 60px; display: block; background-size: cover; }
#Gnb.on .logo a { background: url(../img/logo.png) center no-repeat; width: 210px; height: 60px; display: block; background-size: cover; }
.scrolled #Gnb .logo a { background: url(../img/logo.png) center no-repeat; width: 210px; height: 60px; display: block; background-size: cover; }

/* 대분류 */
#Gnb .nav { margin-left: auto; }
#Gnb .nav > ul > li { float: left; position: relative; line-height: 5.5; transition: all .4s ease-in-out; }
#Gnb .nav > ul > li > a { position: relative; z-index: 20; display: block; padding: 0 30px; font-size: 20px; letter-spacing: 0; color: #fff; transition: all .2s;font-family: 'Pretendard-Regular', sans-serif;font-weight: 600; 
text-shadow: 1px 1px 2px #000;
text-shadow: 1px 1px 5px #000;}
#Gnb .nav > ul > li:hover > a { color: #111; }
#Gnb .nav > ul > li:hover .lnb:before { width: calc(100% + 40px); opacity: 1; }
#Gnb .nav > ul > li:hover .lnb a { color: #555; }
#Gnb .nav > ul > li:hover .lnb a:hover { color: #111; }
#Gnb .nav > ul > li > ul { display: none; }
#Gnb .nav > ul > li.active > a { color: #111; 
text-shadow: 1px 1px 2px #fff;
text-shadow: 1px 1px 5px #fff;}
#Gnb .nav > ul > li.active > ul { display: block; }

#Gnb.on #site_map_Btn span { background: #222; }
#Gnb.on #site_map_Btn span:before { background: #222; }
#Gnb.on #site_map_Btn span:after { background: #222; }
.scrolled #Gnb { background-color: #fff; }
.scrolled #Gnb.on.hover { background: url(../img/logo.png) center no-repeat; width: 150px; height: 46px; display: block; background-size: cover; }
.scrolled #Gnb .nav > ul > li > a { color: #555; font-weight: 600; font-size: 20px; 
text-shadow: 1px 1px 2px #fff;
text-shadow: 1px 1px 5px #fff;}
.scrolled #Gnb #site_map_Btn span:before { background: #222; }
.scrolled #Gnb #site_map_Btn span:after { background: #222; }
.scrolled #Gnb #site_map_Btn span { background: #222; }
.scrolled #Gnb #site_map_Btn.open span { background: transparent; }
.scrolled #Gnb #site_map_Btn.open span:before,
.scrolled #Gnb #site_map_Btn.open span:after { background: #fff; }

/* 소분류 */
#Gnb .lnb { display: none; position: absolute; left: 50%; transform: translateX(-50%); min-width: 100%; width: max-content; padding-top: 25px; min-height: 145px; }
#Gnb .lnb:before { opacity: 0; display: block; content: ""; position: absolute; left: 50%; top: -1px; z-index: -1; transform: translateX(-50%); width: 0; height: 1px; background: var(--primary); transition: all .2s; }
#Gnb .lnb li a { display: block; font-size: 17px; font-weight: 400; line-height: 2.1; text-align: center; color: #555; transition: all .2s; }
#Gnb .lnb li a:hover { color: #111; }

/* 로그인 및 관리자 */
.header-right .mailgo { color: #fff; display: flex; padding-left: 20px; align-items: center; height: 100%; }
.header-right .mailgo .login { background: #242424; padding: 14px 26px; margin-right: 20px; border-radius: 50px; }
.header-right .mailgo .login a { color: #fff; }
.header-right .mailgo.mobile { display: none; }
.header-right .mailgo .t_mall { background: #242424; padding: 14px 26px; margin-right: 20px; border-radius: 50px; }
.header-right .mailgo .t_mall a { color: #fff; }


/* 메뉴버튼 */
#site_map_Btn { display: flex; position: absolute; top: 0; right: 60px; z-index: 101; height: 100px; cursor: pointer; transition: all .3s; }
#site_map_Btn span { display: block; position: relative; width: 25px; height: 2px; margin: auto; background: #fff; transition: all .2s; }
#site_map_Btn span:before, #site_map_Btn span:after { display: block; content: ""; position: absolute; top: 0; width: 100%; height: 2px; background: #fff; transition: all .2s; }
#site_map_Btn span:before { top: -9px; }
#site_map_Btn span:after { top: 9px; }
#site_map_Btn.open { position: fixed; }
#site_map_Btn.open span { border: none; background: transparent; }
#site_map_Btn.open span:before { top: 0; transform: rotate(45deg); background: #fff; }
#site_map_Btn.open span:after { top: 0; transform: rotate(-45deg); background: #fff; }


/* 메뉴오픈 */
#site_map_wrapper { display: none; position: fixed; top: 0; left: -100%; z-index: 100; width: 100%; height: 100%; background-color: rgba(0,0,0,.6); backdrop-filter: blur(10px); }
#site_map_wrapper .bg_wrap { position: absolute; z-index: 1; width: 30%; margin: 0 auto; }
#site_map_wrapper .bg { position: absolute; left: 0; top: 0; width: 0; height: 100vh; margin-left: 0; background: url(../img/bg.jpg) left no-repeat; background-size: cover; }
.site_map_menu { position: absolute; right: 0; top: 0; width: 0; height: 100%;}
.site_map_menu > ul { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; padding: 0 15%; }
.site_map_menu > ul > li { opacity: 0; margin-left: 100px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.25); }
.site_map_menu > ul > li+li { margin-top: 40px; }
.site_map_menu > ul > li > a { display: block; width: max-content; margin-bottom: 20px; font-size: 32px; color: #fff; }
.site_map_menu > ul > li:nth-child(1) { animation-delay: .4s; }
.site_map_menu > ul > li:nth-child(2) { animation-delay: .5s; }
.site_map_menu > ul > li:nth-child(3) { animation-delay: .6s; }
.site_map_menu > ul > li:nth-child(4) { animation-delay: .7s; }
.site_map_menu > ul > li:nth-child(5) { animation-delay: .8s; }
.site_map_menu > ul > li:nth-child(6) { animation-delay: .9s; }
.site_map_menu > ul > li ul { display: flex; flex-wrap: wrap; }
.site_map_menu > ul > li ul li+li { margin-left: 25px; }
.site_map_menu > ul > li ul a { opacity: 0.6; font-size: 18px; font-weight: 500; color: #fff; transition: all .2s; }
.site_map_menu > ul > li ul a:hover { opacity: 1; }

/* 반응형 메뉴 [s] */
#topmenuM { display: none; position: relative; width: 100%; padding: 15px 10px; line-height: 2.5; }
#m_logo { position: relative; display: block; font-size: 10px; text-align: left; }
#m_logo a { display: inline-block; background: url(../img/logo_w.png) center no-repeat; width: 150px; height: 46px; background-size: 100%; }
#m_logo img { width: 120px; height: auto; }

/* 상단 버튼 및 오픈메뉴 */
#m_navBtn { position: absolute; top: 20px; right: 15px; z-index: 5; width: 30px; height: 30px; cursor: pointer; }
#m_navBtn span { display: block; position: relative; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; }
#m_navBtn span:before, #m_navBtn span:after { display: block; content: ""; position: absolute; top: -6px; width: 30px; height: 2px; background-color: #fff; -webkit-transition: all .1s; transition: all .1s; }
#m_navBtn span:after { top: 6px; width: 16px; right: 0; background-color: #fff; }
#m_navBtn.on { position: fixed; }
#m_navBtn.on span:before { top: 0; right: -4px; transform: rotate(45deg); background-color: #111; }
#m_navBtn.on span:after { top: 0; right: -4px; width: 30px; transform: rotate(-45deg); background-color: #222; }
#m_navWrap { display: none; position: fixed; left: 0; top: 0; z-index: 4; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); }
#m_navWrap .inner { overflow-y: scroll; opacity: 0; position: fixed; right: -40px; top: 0; z-index: 6; min-width: 300px; width: 75%; height: 100%; padding: 80px 0; background-color: #fff; -webkit-transition: all .1s; transition: all .1s; }
#m_navWrap.on .inner { z-index:999;opacity: 1; right: 0; -webkit-transition: all .4s; transition: all .4s; }
#m_navWrap .inner:before, #m_navWrap .inner:after { opacity: 0; display: block; position: fixed; top: 0; right: -40px; z-index: 1; content: ""; min-width: 300px; width: 70%; height: 60px; background-color: #fff; -webkit-transition: all .1s; transition: all .1s; }
#m_navWrap .inner:after { top: auto; bottom: 0; }
#m_navWrap.on .inner:before, #m_navWrap.on .inner:after { opacity: 1; right: 0; -webkit-transition: all .4s; transition: all .4s; }
#m_navWrap .inner .mo_hd_copy { position: fixed; right: 0; bottom: 15px; z-index: 2; min-width: 300px; width: 70%; font-size: 12px; text-align: center; color: #888; }
#m_navWrap .user_tip { padding: 10px 20px; background-color: #f5f5f5; }
#m_navWrap .user_tip li { display: inline-block; }
#m_navWrap .user_tip li+li { margin-left: 10px; }
#topmenuM .m_lnb .m_bmenu { display: block; position: relative; width: 100%; height: 55px; padding: 0 20px; border: none;  background: none; font-size: 18px; line-height: 52px; color: #222; text-align: left; font-weight: 500; }
#topmenuM .m_lnb .m_bmenu:after { float: right; content: "\f107"; font-family: 'fontawesome'; }
#topmenuM .m_lnb .m_bmenu.on:after { content: "\f106"; }
#topmenuM .m_smenu { display: none; padding: 15px 20px; border-bottom: 1px solid #ddd; background-color: #f2f3f5; }
#topmenuM .m_smenu li a { font-size: 15px; color: #555; font-weight: 500; }

@media (max-width: 1420px) {
    #Gnb .nav > ul > li > a { padding: 0 20px; }    
    #Gnb .sh_nav { margin-right: 50px; }
    #site_map_Btn { right: 50px; }
}

@media (max-width: 1300px) {
    #Gnb { display: none; }
    #topmenuM { display: block; }
    body.scrolled #topmenuM {
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    body.scrolled #m_navBtn span:before,
    body.scrolled #m_navBtn span:after {
        background-color: #222;
    }
    body.scrolled #m_logo a {
        background: url(../img/logo.png) center no-repeat;
        background-size: 100%;
    }
}