/* ==========================
   GNB Layout
========================== */
#gnb { position: relative; width: 100%; min-width: 1450px; height: 100px; z-index: 9;}

/* ==========================
   GNB Container
========================== */
.gnb_container { position: fixed; top: 0; left: 0; width: 100%; height: 100px; background: transparent; opacity: 1; z-index: 30; transition: all .5s ease;}
.gnb_container.fixed { height: 80px; background: #fff; box-shadow: 0 0 1px rgba(0,0,0,.8);}

/* ==========================
   Inner
========================== */
.gnb_container .temp_gnb { position: relative; width: 100%; height: 100%;}
.gnb_container .logo { position: absolute; top: 20px; left: 50px; z-index: 2;}
.gnb_container .mb { position: absolute; top: 28px; right: 100px; line-height: 40px; z-index: 2;}
.gnb_container .mb a { margin-left: 10px; color: #000; text-decoration: none;}
.gnb_container .mb .adm { position: relative; top: 8px; margin: 0 -5px;}
.gnb_container .navBtn { position: absolute; top: 31px; right: 50px; z-index: 3; cursor: pointer;}

/* ==========================
   Main Navigation
========================== */
nav { width: 100%; text-align: center;}
nav > ul { display: flex; justify-content: center; list-style: none; padding: 0;}
nav > ul > li { position: relative; width: 115px; margin: 0 2px; text-align: center; overflow: visible; transition: width .5s ease;}
nav > ul > li > a { display: block; padding: 35px 0 15px; font-family: 'Noto Sans KR'; font-size: 19px; font-weight: 400; color: #000; text-decoration: none; position: relative; z-index: 2; transition: color .3s ease;}

/* Hover */
nav > ul > li:hover { width: 180px;}
nav > ul > li:hover > a,
nav > ul > li.active > a { color: #fff; text-decoration: none;}

/* ==========================
   Sub Menu
========================== */
.submenu { position: absolute; top: 100%; left: 0; width: 100%; margin-top: 5px; max-height: 0; opacity: 0; overflow: hidden; z-index: 2;}

nav > ul > li:hover .submenu { max-height: 400px; opacity: 1; transition: all .7s ease;}

.submenu > li a { display: inline-block; font-size: 16px; font-weight: 400; line-height: 30px; color: #fff; text-decoration: none; position: relative;}

/* underline animation */
.submenu > li a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; 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);}

/* ==========================
   Background Gradient
========================== */
nav > ul > li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 0; border-radius: 0 0 15px 15px;
    background: linear-gradient(
        to bottom,
        rgba(0,169,193,1) 0%,
        rgba(0,169,193,.9) 60%,
        rgba(0,169,193,.9) 100%
    );
    transition: all .5s ease; z-index: 1;
}

/* ±×·ìº° ³ôÀÌ */
nav > ul > li:nth-child(1):hover::after { height: 260px; }
nav > ul > li:nth-child(2):hover::after { height: 290px; }
nav > ul > li:nth-child(3):hover::after { height: 200px; }
nav > ul > li:nth-child(4):hover::after { height: 200px; }
nav > ul > li:nth-child(5):hover::after { height: 260px; }
nav > ul > li:nth-child(6):hover::after { height: 140px; }
nav > ul > li:nth-child(7):hover::after { height: 260px; }

/* Active */
nav > ul > li.active::after { height: 100px;}

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