/* 헤더 */
#header {position:relative; z-index:9999999; width:100%; height:88px;}

/* 유틸메뉴 */
.util { width:100%; height:25px; background:#FFF;}
.util ul {float:right; padding-right:10px; margin:0 auto;}
.util li {float:left; padding-left:15px; padding-top:2px; font-size:9px; letter-spacing:0.5px;}
.util li a {  color:#aaa; font-weight:400;}

/* 로고 */
.logo {width:20%; display:inline-block; vertical-align: top;}
.logo .logo-inner { vertical-align: middle;}
.logo .logo-inner h1 {padding-top:0px; padding-left:10px;}

/* 메뉴고정 (스크롤시 감춰지는 영역 높이) */
.menuFix { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height:12px; background-color: #FFF;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.menuFix::after {clear: both; content: ""; display: block;}
.menuFix.is-hidden {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

/* 메뉴 (유틸메뉴 제외한 메뉴 높이 수정) */
.navFix {position: relative; z-index: 1; clear: both; width: 100%; height:63px; background:#FFF; box-shadow:3px 3px 3px rgba(0,0,0,0.1);}

/* 메뉴 */
nav {width: 100%;}
.nav_wrapper {left: 0; width: 79%; transition: top .5s ease-out; display:inline-block; padding-top:0px;}
.scroll {top:-90px; }
.no-scroll {top: 0; z-index: 9999;}
.menu-link { display: none; }
.spinner-master { display: none; }
.spinner-master input[type=checkbox] { display: none; }
.menu {width: 100%; height: auto; font-size:0; text-align: center; transition: all 0.3s ease;}
.menu ul {padding: 0px; margin: 0px; list-style: none; position: relative; display: inline-block; float: right;}
.menu > li > ul.sub_menu {min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #fff;}
.menu ul li { padding: 0px; text-align:center;   margin: 0 auto;}
.menu > ul > li { display: inline-block; }

/* 메뉴 폰트사이즈 및 컬러 */
.menu ul li a {display: block; text-decoration: none; color: #1e1e1e; font-size:16px; font-family:'Montserrat','Noto Sans KR', sans-serif; font-weight:500;}

/* 메뉴 오버시 폰트컬러 */
.menu ul li a:hover {color: #997b5c;}
.menu ul li.hover > a {color: #997b5c;}

/* 1차 메뉴 넓이,간격 수정 */
.menu ul li > a {width:150px; padding:12px 20px 12px 20px; text-align:center;}

/* 2차 메뉴 넓이,배경 수정 */
.menu ul ul {display: none; position: absolute; top:100%; min-width:150px; background: #333;}
.menu ul li:hover > ul {display: block; background:#FFF; border-top:1px solid #333; border-left:1px solid #CCC; border-right:1px solid #CCC; border-bottom:1px solid #CCC;}
.menu ul ul > li { position: relative; border-top:1px solid #E5E5E5;}
.menu ul ul > li:first-child {border-top:none;}

/* 서브메뉴 폰트 사이즈 및 컬러변경 */
.menu ul ul > li a {font-size:13px; font-weight:400; font-family:'Noto Sans KR', sans-serif; padding: 10px 15px; height: auto; color:#666; background:none;}

/* 서브메뉴오버시 폰트 컬러변경 */
.menu ul ul > li a:hover {background: #F5F5F5; color:#222;}
.menu ul ul ul {position: absolute; left: 100%; top: 0;}

@media all and (max-width: 1280px) {
.menu ul li > a {padding:15px 20px; }
}

@media all and (max-width: 1024px) {

.hideMenu { height: 0; }
.mainWrap { width: 100%; margin: 0 auto; }
.header {width:100%;}
/* 유틸메뉴 폰트 사이즈 */
.util li {font-size:9px;}
/* 모바일 로고 가로 사이즈 */
.logo .logo-inner h1 img {width:170px;}
/* 1차 메뉴 넓이,간격 수정 */
.menu ul li > a {width:120px; padding:15px;}
/* 2차 메뉴 넓이,배경 수정 */
.menu ul ul {min-width:120px; background: #333;}
/* 메뉴 폰트사이즈*/
.menu ul li a {font-size:15px;}
/* 서브메뉴 폰트 사이즈 및 컬러변경 */
.menu ul ul > li a {font-size:12px;}
}

@media all and (max-width: 768px) {
/* 헤더 */
#header {height:75px;}
.hideMenu { height: 0; }
.nav_wrapper {width: 100%; padding: 0;}
/* 유틸메뉴 */
.util ul {padding-right:10px;}
.util li {padding-left:12px; }
/* 메뉴 (메뉴 높이 수정) */
.navFix {height:50px;}
/* 로고 */
.logo { width: 100%; position:absolute; text-align:center;}
.logo .logo-inner h1 {padding-top:8px;}
.logo .logo-inner h1 img {width:150px;}
.nav_wrapper {left: 0; width: 100%; padding-top: 0; transition: top .5s ease-out;}
.spinner-master * { transition: all 0.3s; box-sizing: border-box;}
.spinner-master { display:block; position: relative; margin:7px 15px 13px 15px; height: 30px; width: 30px; float: right;}
.spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top: 5px; left: 0;}
.spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #000;}
.spinner-master .diagonal.part-1 { position: relative; float: left;}
.spinner-master .horizontal { position: relative; float: left; margin-top: 4px;}
.spinner-master .diagonal.part-2 { position: relative; float: left; margin-top: 4px;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal { opacity: 0; }
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {transform: rotate(135deg); -webkit-transform: rotate(135deg); margin-top: 10px;}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {transform: rotate(-135deg); -webkit-transform: rotate(-135deg); margin-top: -12px;}
a.menu-link {display: block; color: #fff; float: left; text-decoration: none; padding: 10px 16px; font-size: 1.5em;}
a.menu-link:hover { color: #efa666; }
a.menu-link:after { content: "\2630"; font-weight: normal;}
a.menu-link.active:after { content: "\2715"; }
.menu {clear: both; min-width: inherit; float: none; padding-right:0; font-size:15px;}
.menu, .menu > ul ul {overflow: hidden; max-height: 0; background-color: #333; }
.menu > li > ul.sub-menu {padding: 0px; border: none;}
.menu ul ul > li {border-top:none;}
.menu ul ul > li a {text-align:center; background-color: #404040; color:#CCC; padding: 10px 18px 10px 30px;}
.menu ul ul > li a:hover {background: #555; color: #FFF;}
.menu ul li > a {padding:15px 0; width:100%; text-align:center;}
.menu ul li:hover > ul {border:none;}
.menu.active,
.menu > ul ul.active { max-height: 55em; }
.menu ul {display: inline; float: none; }
.menu li,
.menu > ul > li { display: block; border-bottom:1px solid #444;}
.menu > ul > li:last-of-type a { border: none; }
.menu li a { color: #fff; display: block; padding: 0.8em; position: relative;}
.menu li.has-submenu > a:after {content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0.55em 0.5em;}
.menu li.has-submenu > a.active:after { content: "-"; }
.menu ul li a {display: block; text-decoration: none; color: #FFF; font-size: 16px; background: none;}
.menu ul li a:hover {background: #444; color: #fff;}
.menu ul li.hover > a {background: #444;color: #fff; }
.menu ul ul,
.menu ul ul ul {display: inherit; position: relative; left: auto; top: auto; border: none;}
}