/* GNB */
.gnb { position: fixed; top:0; z-index:999; width:100%; height:67px; text-align:center; background:#fff; border-bottom:1px #ccc solid;}

.gnb_left { display:flex; align-items:center; position:absolute; height:67px; left:50px; padding-top:8px;}
.gnb_left .logo a { font-family: 'GmarketSansBold'; font-size: 30px; }

.gnb_right { display:flex; align-items:center; position:absolute; height:67px; right:50px;}
.gnb_right .mb { line-height: 40px; }
.gnb_right .mb a { margin-left: 10px; }
.gnb_right .mb .adm { position:relative; top:6px; margin:0 -5px; }
.gnb_right .mb .adm svg { width:23px; height:23px; }
.gnb_right .navBtn {  cursor: pointer;}

/* 사이트맵 */
.gnb_right .gnb_menu_open { display:none; position:absolute; right:0;width: 50px; cursor: pointer; }
.gnb_right .gnb_menu_open svg { width:32px; height:32px; color:#000; }

/* DEPTH1 */
nav { width: 100%; text-align: center; }
nav > ul { display:flex; align-items:center; justify-content:center; gap: 0px; }
nav > ul > li { display: flex; position: relative; width: 140px; margin:0 2px; text-align: center; z-index: 2; transition: width .3s ease; }
nav > ul > li:hover { width:180px; }
nav > ul > li > a { display: block; width: 100%; line-height:67px; font-size: 18px; font-weight: 500; color: #000; text-decoration: none; position: relative; z-index: 2;  transition: transform .3s ease;}
nav > ul > li:hover > a,
nav > ul > li.active > a { color: #fff; text-decoration: none;}
nav > ul > li::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleX(1); width: 100%; height: 0; border-radius: 0 0 15px 15px; background: rgba(0,169,193,.9); transform-origin: center; transition: all .4s ease; z-index: 1; }
nav > ul > li:hover::after { height: var(--this-height);}
nav > ul > li.active::after { height: 80px; }
nav > ul > li.active:hover::after { height: var(--this-height); }


/* DEPTH2 */
.submenu { position: absolute; top: 100%; left: 0; width: 100%; margin-top: 5px; display: block; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all .3s ease; z-index: 3; }

nav > ul > li.active .submenu { opacity: 0; visibility: hidden; transform: translateY(-10px); }
nav > ul > li:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }

.submenu li { display: block; }
.submenu > li a { display: inline-block; font-size: 16px; font-weight: 400; line-height: 30px; color: #fff; text-decoration: none; position: relative; white-space: nowrap; }
.submenu > li a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: center; transition: transform .4s cubic-bezier(0,0,0,1); }
.submenu > li a:hover::after { transform: scaleX(1); }

.submenu > li.on > a { font-weight: 600; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }


/* IS-SCROLL */
.gnb.is-scroll { height: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.0); }
.gnb.is-scroll .gnb_left { height:50px; }
.gnb.is-scroll .gnb_left .logo a { font-size: 25px;}
.gnb.is-scroll .gnb_right { height:50px; }
.gnb.is-scroll .gnb_right .mb a { }
.gnb.is-scroll > ul > li > a { line-height: 50px; }
.gnb.is-scroll > ul > li.active::after { height: 60px; }
.gnb.is-scroll > ul > li:hover::after { height: var(--this-height-scroll); }
.gnb.is-scroll > ul > li.active:hover::after { height: var(--this-height-scroll); }

.gnb.is-scroll,.gnb_left,.gnb_left .logo a,.gnb_right,nav > ul > li > a { transition: all .4s ease; }