#header { height: 70px; }

/* 상단영역 */
#header .gnBar { width: 100%; opacity: 1; position: fixed; top: 0px; z-index: 101; 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; }

@media screen and (max-width: 768px) {
  #header {  height: 60px;  }
  #header .gnBar {  background-color: #fff; }
  #header .gnBar.on { top: 0px; }
}

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

#header .gnBar .naVi .logoArea { width: 200px; height: 70px; float: left; margin: 0px 0; overflow: hidden; display: table; position: relative; }
#header .gnBar .naVi .menuArea { width: calc(100% - 200px); float: right; position: relative;  padding-right:120px;}
#header .gnBar .naVi .languageArea {width: 120px; float: right; position: absolute; right:-118px;}

#header .gnBar .naVi .languageArea .languageMenu {margin: 0 auto;}
#header .gnBar .naVi .languageArea .languageMenu .korBtn {float:left; width:60px; height:70px; text-align:center;}
#header .gnBar .naVi .languageArea .languageMenu .engBtn {float:left; width:60px; height:70px; text-align:center;}
#header .gnBar .naVi .languageArea .languageMenu a {display:block; line-height:70px;}
#header .gnBar .naVi .languageArea .languageMenu .korBtn a {background:#077fcf; color:#fff;}
#header .gnBar .naVi .languageArea .languageMenu .engBtn a {background:#000; color:#fff;}
@media screen and (max-width: 1200px) {
#header .gnBar .naVi .logoArea { width:20%;}
#header .gnBar .naVi .menuArea {width:80%; }
}

@media screen and (max-width: 768px) {
  #header .gnBar .naVi { width: 100%; background-color: transparent; }
  #header .gnBar .naVi .logoArea { width: 100%; height: 60px; text-align:center;}
  #header .gnBar .naVi .menuArea { width: 100%; }
}

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

.logoArea .pc {display:block;}
.logoArea .mobile {display:none;}

@media screen and (max-width: 991px) {
  .logoArea .logo img { max-height:50px; }
}
@media screen and (max-width: 768px) {
  .logoArea .logo { text-align: center; }
  .logoArea .logo img { width: auto; margin-left:auto; margin-right:auto;}

.logoArea .pc {display:none;}
.logoArea .mobile {display:block;}

}

.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;}

@media screen and (max-width: 768px) {
  #header .gnBar .naVi .logoArea .mobileMenu { display: block; position: absolute; top: 10px; right: 0px; border-radius: 2px;  }
}

.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.menuCnt6 > li:last-child { width: 16.67%; }
.naviMainMenu > ul.menuCnt7 > li { width: 14.285%; }


/* 1차메뉴 */
.naviMainMenu > ul > li { position: relative; float: left; width: 100%; height: 70px; display: table;}
.naviMainMenu > ul > li:hover { background-color: #82c0ff;}

.naviMainMenu > ul > li > a { position: relative; line-height: 120%; display: table-cell; text-align: center; vertical-align: middle; word-break: break-all; overflow: hidden; padding: 0 3px; letter-spacing: -0.5px; font-weight: 500; font-size: 18px; color: #333;}




.naviMainMenu > ul > li > a > br {display:none;} /*  1줄 처리 */


/* 1차메뉴 오버시 */
.naviMainMenu > ul > li:hover > a, .naviMainMenu > ul > li.on > a { background-color: #82c0ff; color: #fff;}
.naviMainMenu > ul > li:last-child > a { border-right: none;}

/* 2차메뉴 */
.naviSubMenu { display: none; position: absolute; top: 70px; 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: 0px 1px; height: 40px; line-height: 40px;  background-color: #000; position: relative; word-break: break-all; white-space: nowrap; overflow: hidden; letter-spacing: -0.0px; font-weight: 400; font-size: 13px; color: #fff; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;}
.naviSubMenu a:hover { background:rgba(7,127,207,1) url('/images/common/arr.png') no-repeat right center; color: #fff; }
.naviSubMenu a:first-child { border-top: 0px solid #fff;}
.naviSubMenu a:last-child {}




@media screen and (max-width: 1220px) { /* 1200이하 */
.naviMainMenu > ul > li > a {font-size: 16px;}
.naviSubMenu a {font-size: 13px; letter-spacing:-1px;}
.naviMainMenu > ul > li > a > br {display:block;} /*  2줄 처리 */
}

@media screen and (max-width: 880px) { /* 8800이하 */

}


@media screen and (max-width: 768px) { /*  모바일메뉴 */




  /* 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;  }
  #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: #333; height: 50px; line-height: 50px; margin: 0px 0 0; padding: 0px; border-right: 0px solid #fff; border-radius: 0; font-size: 15px; 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 { height: 40px; line-height: 40px; background-color: #fff; font-size: 14px; color: #333;  border-bottom:1px solid #ddd; border-top:0px;}
  #header .gnBar .naVi .naviMainMenu > ul > li .naviSubMenu a:hover { background-color: #ccc; color: #333;  }
  #header .gnBar .naviMainMenu { -webkit-transition: none; transition: none;  }
  #header .gnBar .naviMainMenu.on { padding-right: 0px; -webkit-transition: none; transition: none; }


#header .gnBar .naVi .languageArea {width:100%; background:#ddd; position: relative; right:0px;}
#header .gnBar .naVi .languageArea .languageMenu {width: 100%; float: left; position: relative;}
#header .gnBar .naVi .languageArea .languageMenu .engBtn {width:50%; height:50px; }
#header .gnBar .naVi .languageArea .languageMenu .korBtn {width:50%; height:50px; }
#header .gnBar .naVi .languageArea .languageMenu  a {line-height:50px;}

#header .gnBar .naVi .languageArea .languageMenu.on {display:block;}


  #header .gnBar .naVi {padding: 0 5px;}
  .topArea {display:none;}
.naviMainMenu > ul > li > a > br {display:none;} /*  1줄 처리 */


.naviSubMenu a:hover { background:rgba(7,127,207,1); color: #fff; }


}

@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%; }
}