#header { height: 100px; z-index:99999; position:fixed;}

#header .gnBar { width: 100%; opacity: 1; position: fixed; top: 0px; z-index: 30; background-color: #fff; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;  border-bottom:1px solid #ddd;}
#header .gnBar.on { background-color: #fff; border-bottom: 1px solid #ddd; }


#header .gnBar .naVi { width: 100%; max-width: 1400px; margin: 0px auto; }

#header .gnBar .naVi .logoArea {  float: left; margin: 0px 0; overflow: hidden; display: table; position: relative; }
#header .gnBar .naVi .menuArea { width: 60%; float: right; position: relative; padding-top:0px; max-width:800px;}


.logoArea .logo { display: table-cell; vertical-align: middle; text-align: left; }
.logoArea .logo img {margin-top:30px;}

.logoArea .mobileMenu { display: none; width: 40px; height: 40px; margin-right: 10px; padding-top: 10px; text-align: center; background-color: #111; color: #fff; cursor: pointer;  background:url(/images/icon/icon_cate_menu.png) 50% 50% no-repeat;  background-size:30px auto; }
.logoArea .mobileMenu.on { background:url('/images/icon/icon_cate_menu2.png') 50% 50% no-repeat;}

.naviMainMenu { -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; margin: 0 auto; border: 0px solid #f00; }
.naviMainMenu > ul { float: right; width: 100%; }

.naviMainMenu > ul.menuCnt2 > li { width: 50%; }
.naviMainMenu > ul.menuCnt3 > li { width: 33.333%; }
.naviMainMenu > ul.menuCnt4 > li { width: 25%; }
.naviMainMenu > ul.menuCnt5 > li { width: 20%; }
.naviMainMenu > ul.menuCnt6 > li { width: 16.666%; }
.naviMainMenu > ul.menuCnt7 > li { width: 14.285%; }


/* 1차메뉴 */
.naviMainMenu > ul > li { position: relative; float: left; border-left: 0px solid #ccc; width: 100%; height: 100px; display: table;}
.naviMainMenu > ul > li:first-child { border: none;}
.naviMainMenu > ul > li:hover { background-color: transparent;}

.naviMainMenu > ul > li > a { font-size: 1.2rem; color: #333;-webkit-transition: all 0.1s ease-out; transition: all 0.1s ease-out; position: relative; line-height: 120%; display: table-cell; text-align: center; vertical-align: middle; word-break: break-all; overflow: hidden; padding: 0 3px; border-right: 0px solid #fff; border-radius: 6px 6px 0px 0px; letter-spacing: -0.5px; font-weight: 600; }

/* 1차메뉴 오버시 */
.naviMainMenu > ul > li:hover > a, .naviMainMenu > ul > li.on > a { padding-top: 0px; border-top: 0px solid #009ddc; border-bottom: 0px solid #009ddc; background-color: #fff; color: #ef8203;}
.naviMainMenu > ul > li:last-child > a { border-right: none;}

/* 2차메뉴 */
.naviSubMenu { display: none; position: absolute; top: 100px; left: 0px; width: calc(100% + 1px); border-top: 0px solid #eee; box-sizing: border-box; padding-top: 0px; background-color: transparent;}

.naviSubMenu a { display: block; text-align: center; padding: 10px 0px; border: 1px solid #ddd; border-width: 0 1px 0px; border-top: 1px dotted #ddd; background-color: #fff; position: relative; word-break: break-all; white-space: nowrap; overflow: hidden; letter-spacing: -0.5px; font-weight: 400; font-size: 0.9rem; color: #333;}
.naviSubMenu a:hover { background-color: #f6f6f6; color: #ef8203;}
.naviSubMenu a:first-child { border-top: 0px solid #fff;}
.naviSubMenu a:last-child {border-radius:0px 0px 6px 6px; border-bottom:1px solid #ddd;}


.naviMainMenu > .naviLogin {display:none; background:#ddd; text-align:center; position:relative; padding:10px 10px; border:0px;}
.naviMainMenu > .naviLogin > ul {margin:0 auto; display:flex;flex-wrap:wrap;margin:0 -4px;}
.naviMainMenu > .naviLogin > ul > li {flex:1;padding:0 4px;}
.naviMainMenu > .naviLogin a {padding:10px 5px; margin:0px 5px; display:block; background-color:#fff;}
.naviMainMenu > .naviLogin a:hover {opacity:1;transition:none;}

.naviMainMenu > .naviLogin > ul > li.join a {background-color:#fff;}
.naviMainMenu > .naviLogin > ul > li.login a {background-color:#0a2572; color:#fff;}
.naviMainMenu > .naviLogin > ul > li.logout a {background-color:#0a2572;  color:#fff;}

@media (max-width: 1400px) {
  #header { height: 80px; }
   .logoArea .logo img {margin-left:10px; margin-top:20px;}
  .naviMainMenu > ul > li {height: 80px; }
  .naviSubMenu { top: 80px; }
}

@media (max-width: 1200px) {
  #header .gnBar .naVi { max-width: 100%; }
}

@media (max-width: 1024px) {
  #header { height: 60px; }
  .naviMainMenu > ul > li {height: 60px; }
  .naviSubMenu { top: 60px; }
  .logoArea .logo img { max-height:70px; padding-left:10px;  max-height: 35px;  margin-top:10px;}
  .naviMainMenu br {display:block;}
  .naviSubMenu a { font-size: 1rem;}
}

@media (max-width: 768px) {

  #header {  height: 60px;  }
  #header .gnBar {  background-color: #fff; }
  #header .gnBar.on { top: 0px; }

  #header .gnBar .naVi { width: 100%; background-color: transparent;  padding: 0 0px;}
  #header .gnBar .naVi .logoArea { width: 100%; height: 60px; }
  #header .gnBar .naVi .menuArea { width: 100%; margin-top:0px;}

  .logoArea .logo { text-align: left; }

  #header .gnBar .naVi .logoArea .mobileMenu { display: block; position: absolute; top: 10px; right: 0px; border-radius: 2px;  }

  /* 1차메뉴 */
  #header .gnBar .naVi .naviMainMenu { display: none; position: absolute; width: 100%; padding-top: 0px; right: 0px;  }
  #header .gnBar .naVi .naviMainMenu > ul { max-height: 500px;  margin-top: 0px;   background:#0a2572;}
  #header .gnBar .naVi .naviMainMenu > ul > li { width: 100%; height: 50px; margin-top: 0px; border-bottom: 1px solid #ddd;  }
//  #header .gnBar .naVi .naviMainMenu > ul > li:last-child { border-bottom: 1px solid #ddd; display:block; }
  #header .gnBar .naVi .naviMainMenu > ul > li > a { display: block; background-color: #ef8203; height: 50px; line-height: 50px; margin: 0px 0 0; padding: 0px; border-right: 0px solid #fff; border-radius: 0;  color: #fff;  }
  #header .gnBar .naVi .naviMainMenu > ul > li:hover > a,  #header .gnBar .naVi .naviMainMenu > ul > li.on > a { background-color: #111; border-top: 0px;  border-bottom: 0px;  }
  .naviMainMenu > ul > li:hover > a:before,  .naviMainMenu > ul > li.on > a:before { display: none;  }

  /* 2차메뉴 */
  #header .gnBar .naVi .naviMainMenu > ul > li .naviSubMenu { position: relative; top: 0px; left: 0px; padding: 0; height: auto; padding-top: 0px; border: none;  }
  #header .gnBar .naVi .naviMainMenu > ul > li .naviSubMenu a { background-color: #fff;  border-bottom:1px dotted #ddd; border-top:0px;}
  #header .gnBar .naVi .naviMainMenu > ul > li .naviSubMenu a:hover {}
  #header .gnBar .naVi .naviMainMenu > ul > li .naviSubMenu a:last-child {border-bottom:0px;}


  #header .gnBar .naviMainMenu { -webkit-transition: none; transition: none;  }
  #header .gnBar .naviMainMenu.on { padding-right: 0px; -webkit-transition: none; transition: none;  }
  .naviSubMenu a:last-child {border-radius:0px;}
  .naviMainMenu br {display:none;}
  .naviMainMenu > .naviLogin {display:block; }
  .naviSubMenu a { font-size: 1.1rem;}

}

@media (min-width: 769px) {
  #header .gnBar .naVi .naviMainMenu {  display: block !important;  position: relative; }
}