@charset "utf-8";

.app-nav-gnb { position: relative; }

.app-nav-gnb a[disabled] { pointer-events: none; }

.app-nav-gnb .main-menus { display: flex; position: relative; }

.app-nav-gnb .main-menus > li { cursor: pointer; padding: 0px 8px; position: relative; }

.app-nav-gnb .main-menus > li:first-child { padding-left: 0px; }

.app-nav-gnb .main-menus > li:last-child { padding-right: 0px; }

.app-nav-gnb .main-menus > li.open .title svg { transform: rotate(-180deg); }

.app-nav-gnb .main-menus > li.open .sub-menu-container { visibility: visible; }

.app-nav-gnb .main-menus > li .title { align-items: center; display: flex; font-size: 14px; font-weight: 500; gap: 4px; letter-spacing: 0.42px; line-height: 22px; padding: 24px 4px 18px; user-select: none; width: max-content; }

.app-nav-gnb .main-menus > li .title svg { height: 16px; width: 16px; }

.app-nav-gnb .main-menus > li .title svg path { stroke: rgb(229, 229, 229); }

.app-nav-gnb .sub-menu-container { background-color: rgb(255, 255, 255); border-bottom: 1px solid rgb(232, 232, 232); border-top: 1px solid rgb(28, 28, 28); cursor: default; left: 0px; max-height: calc(100vh - 104px); overflow: auto; padding: 32px 24px; position: fixed; right: 0px; top: 104px; visibility: hidden; z-index: 2; }

[data-region-id="GGPSE"] .app-nav-gnb .sub-menu-container { top: 136px; }

.app-nav-gnb .sub-menus { display: inline-flex; flex-direction: column; gap: 4px; position: relative; top: 0px; }

.app-nav-gnb .sub-menus.mega-menu { flex-direction: row; gap: 40px; }

.app-nav-gnb .sub-menus.mega-menu .sub-menus-title { color: rgb(0, 0, 0); display: block; font-size: 14px; font-weight: 600; letter-spacing: 0.42px; line-height: 22px; padding: 4px; }

.app-nav-gnb .sub-menus.mega-menu.type-icon > li { margin-top: 0px; }

.app-nav-gnb .sub-menus.mega-menu li a { padding-left: 4px; }

.app-nav-gnb .sub-menus.mega-menu li .icon { background: rgb(241, 241, 244); }

.app-nav-gnb .sub-menus.type-ggteam { align-items: stretch; flex-direction: row; gap: 24px; justify-content: flex-start; left: 50%; margin: 0px auto; max-width: 1200px; width: 100%; transform: translateX(-50%) !important; }

.app-nav-gnb .sub-menus.type-ggteam > li { flex: 0 1 180px; }

.app-nav-gnb .sub-menus.type-ggteam > li a { border: 2px solid transparent; border-radius: 16px; height: 100%; padding: 0px; width: 100%; }

.app-nav-gnb .sub-menus.type-ggteam > li a:hover { border-color: rgb(211, 0, 0) !important; }

.app-nav-gnb .sub-menus.type-ggteam > li a:hover span { text-decoration: none; }

.app-nav-gnb .sub-menus.type-ggteam > li a:not(.show-all) { background: url(/assets/img/mhtml-hall/icon_gg_white.png) 50% 24px no-repeat rgb(241, 241, 244); color: rgb(64, 64, 64); font-weight: 500; text-align: center; }

.app-nav-gnb .sub-menus.type-ggteam > li a:not(.show-all) .thumbnail { padding-top: 109%; position: relative; }

.app-nav-gnb .sub-menus.type-ggteam > li a:not(.show-all) .thumbnail img { bottom: 0px; display: block; height: 100%; left: 50%; position: absolute; transform: translateX(-50%); width: auto; }

.app-nav-gnb .sub-menus.type-ggteam > li a:not(.show-all) span { padding: 16px 24px; position: relative; width: 100%; }

.app-nav-gnb .sub-menus.type-ggteam > li a:not(.show-all) span::before { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 4%, rgb(234, 0, 0) 30%, rgb(234, 0, 0) 70%, rgba(255, 255, 255, 0) 96%); content: ""; height: 2px; left: 0px; position: absolute; top: 0px; width: 100%; }

.app-nav-gnb .sub-menus.type-ggteam > li a.show-all { align-items: flex-end; border-color: rgb(255, 107, 107); display: flex; flex-direction: column; font-weight: 400; gap: 4px; height: 100%; justify-content: flex-end; padding: 16px 12px; width: 100%; }

.app-nav-gnb .sub-menus.type-ggteam > li a.show-all svg path { fill: rgb(255, 5, 5); }

.app-nav-gnb .sub-menus.type-ggteam > li a.show-all span { padding: 0px 8px; }

.app-nav-gnb .sub-menus a { color: rgb(0, 0, 0); display: block; font-size: 14px; font-weight: 400; letter-spacing: 0.42px; line-height: 22px; width: max-content; }

.app-nav-gnb .sub-menus a.router-link-active span, .app-nav-gnb .sub-menus a:hover span { text-decoration: underline; text-underline-position: under; }

.app-nav-gnb .sub-menus a span { display: inline-block; position: relative; }

.app-nav-gnb .sub-menus .sub-menus-title { font-weight: 500; min-height: 32px; padding: 4px; }

.app-nav-gnb .sub-menus:has(.icon) { gap: 72px; }

.app-nav-gnb .sub-menus:has(.icon) li { margin-top: 12px; }

.app-nav-gnb .sub-menus:has(.icon) li a { align-items: center; display: flex; gap: 8px; }

.app-nav-gnb .sub-menus:has(.featured-icon) { gap: 12px; }

.app-nav-gnb .sub-menus:has(.featured-icon) li { margin-top: 0px; }

.app-nav-gnb .sub-menus:has(.featured-icon) a { align-items: center; display: flex; gap: 8px; }

.app-nav-gnb .sub-menus .icon { align-items: center; background-color: rgb(247, 247, 248); border-radius: 8px; display: flex; height: 28px; justify-content: center; padding: 2px; width: 28px; }

.app-nav-gnb .sub-menus .icon img { height: auto; width: 100%; }

.app-nav-gnb .sub-menus .icon.featured-icon { gap: 12px; height: 52px; padding: 8px; width: 52px; }

.app-nav-gnb .bar { background-color: rgb(211, 0, 0); bottom: 0px; display: block; height: 3px; left: 0px; pointer-events: none; position: absolute; transition: width 0.25s ease-in-out 0s, transform 0.25s ease-in-out 0s; }

@media screen and (min-width: 1320px) {
  .app-nav-gnb .main-menus > li { padding-left: 12px; padding-right: 12px; }
}