#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; }
#Gnb.on { border-bottom: 1px solid #e1e1e1; }
#Gnb.sub { position: absolute; }
.lnb_bg { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 300px; 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: 180px; height: 50px; }
#Gnb .logo a { background: url(../img/logo_w.png) center no-repeat; width: 180px; height: 50px; display: block; background-size: cover; }
#Gnb.on .logo a { background: url(../img/logo.png) center no-repeat; width: 180px; height: 50px; display: block; background-size: cover; }
.scrolled #Gnb .logo a { background: url(../img/logo.png) center no-repeat; width: 180px; height: 50px; display: block; background-size: cover; }

/* 대분류 */
#Gnb .nav { margin-left: auto;width:100%; display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; }
#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: 17px; letter-spacing: 0; color: #fff; transition: all .2s; font-family: 'Pretendard', serif; font-weight: 500; }
#Gnb .nav > ul > li:hover > a { color: ff0000; }
#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; }
#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: 180px; height: 50px; display: block; background-size: cover; }
.scrolled #Gnb .nav > ul > li > a { color: #555; font-weight: 600; font-size: 17px; }
.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: 10px; 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: 16px; font-weight: 400; line-height: 2.1; text-align: center; color: #555; transition: all .2s; }
#Gnb .lnb li a:hover { color: #111; }

/* 로그인 및 관리자 */
#Gnb.on .header-right .lan a{color:#555}
.header-right .lan { font-size:14px; font-weight: 500;color: #fff; display: flex; padding-left: 20px; align-items: center; height: 100%; }
.header-right .lan .eng { padding: 14px 5px; margin-right: 10px;  }
.header-right .lan .eng a { color: #fff; }
.header-right .lan.mobile { display: none; }
.header-right .lan .kor { padding: 14px 5px; margin-right: 10px; }
.header-right .lan .kor a { color: #fff; }
.scrolled .header-right .lan a{color:#555}

/* 메뉴버튼 */
#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: 180px; height: 50px; background-size: 80%; }
#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 { 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: 80%;
    }
}