#header { height: 110px; 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: 1300px; margin: 0px auto; }

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

.topArea               {height:30px; position:relative; width:100%; border-bottom:1px solid #ddd;}
  .topAreaStr {width:100%; max-width:1300px; margin-left:auto; margin-right:auto;}
  .topLogin ul         {float:right; border-left:1px solid #ddd;}
  .topLogin li         {float:left; border-right:1px solid #ddd; line-height:30px;}
 .topLogin li a {display:block;  padding-left:20px; padding-right:20px;}
 .topLogin li a:hover {background:#ddd;}





.topSns {float:right;}
.topSns ul {padding-top:2px; margin-right:10px; }
.topSns li {float:left; margin-right:5px;}
.topSns img {height:25px;}


.logoArea .logo { display: table-cell; vertical-align: middle; text-align: left; }
.logoArea .logo img {padding-top:10px; height:99%;}


.logoArea .mobileMenu { display: none; width: 40px; height: 40px; margin-right: 0px; 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: 80px; display: table;}
.naviMainMenu > ul > li:first-child { border: none;}
.naviMainMenu > ul > li:hover { background-color: transparent;}

.naviMainMenu > ul > li > a { font-size: 18px; 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: 500; }

/* 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: #0a2572;}
.naviMainMenu > ul > li:last-child > a { border-right: none;}

/* 2차메뉴 */
.naviSubMenu { display: none; position: absolute; top: 80px; left: 0px; width: 100%; 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 solid #eee; background-color: #fff; position: relative; word-break: break-all; white-space: nowrap; overflow: hidden; letter-spacing: -0.0px; font-weight: 400; font-size: 15px; color: #333;}
.naviSubMenu a:hover { background-color: #ddd; color: #0a2572;}
.naviSubMenu a:first-child { border-top: 0px solid #fff;}
.naviSubMenu a:last-child {border-radius:0px 0px 6px 6px; border-bottom:1px solid #eee;}


.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 screen and (max-width: 1350px) {
  #header { height: 90px; }
  .logoArea .logo {height:60px;}
   .logoArea .logo img {padding-left:10px; padding-top:0px;}
  .naviMainMenu > ul > li {height: 60px; }
  .naviSubMenu { top: 60px; }
}
@media screen and (max-width: 1024px) {
  #header .gnBar .naVi .logoArea {height:60px;}

  .naviMainMenu > ul > li > a {font-size: 18px;}
  .naviSubMenu a {font-size: 16px;}
  .logoArea .logo img { max-height:70px; padding-left:10px;}

.naviMainMenu br {display:block;}

}



@media screen and (max-width: 768px) {

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


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

  .logoArea .logo { text-align: left; }
  .logoArea .logo img { width: auto; max-height: 50px; }


  #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-top: 1px solid #444;  }
  #header .gnBar .naVi .naviMainMenu > ul > li:last-child { border-bottom: 1px solid #444; display:block; }
  #header .gnBar .naVi .naviMainMenu > ul > li > a { display: block; background-color: #0a2572; height: 50px; line-height: 50px; margin: 0px 0 0; padding: 0px; border-right: 0px solid #fff; border-radius: 0; font-size: 16px; 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; font-size: 14px; color: #0a2572;  border-bottom:1px solid #ddd; border-top:0px;}
  #header .gnBar .naVi .naviMainMenu > ul > li .naviSubMenu a:hover { background-color: #ccc; color: #0a2572;  }
  #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; }

}

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

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

@media screen and (max-width: 768px) {
  #header .gnBar .naVi {padding: 0 0px;}
  .topArea {display:none;}
}