/* 헤더 */
#header { position: relative; z-index:9999999; width:100%;}


/* 메뉴고정 (스크롤시 감춰지는 영역) */
.menuFix { position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height:0px;
  /* 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; background:#FFF;}
.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:75px; background:#FFF;}


/* 유틸메뉴 */
.util { width:100%; height:22px; background:#FFF; border-top:3px solid #2e4b93;}
.util ul { float:right; padding-right:20px; }
.util li { display:inline-block; list-style:none; padding-left:15px;}
.util li a { font-size:10px; color:#999; font-weight:600; letter-spacing:0.4px;}


/* 로고 */
.logo {width:25%; display:inline-block; vertical-align: top;}
.logo h1 {padding-top:0px; padding-left:35px;}
.logo .logo-inner { vertical-align: middle;}


/* 메뉴 */
nav {width: 100%;}
.nav_wrapper {left: 0; width: 73%; transition: top .5s ease-out; display:inline-block; padding-top:10px;}
.scroll {top:-90px; }
.no-scroll {top: 0; z-index: 9999;}
.btn {padding: 10px 1%; margin: 5px; color: #fff; text-decoration: none; font-family: sans-serif; transition: all 0.1s ease;}
.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:#333; font-size:16px; font-weight:400;}


/* 메뉴 마우스오버 컬러변경 */
.menu ul li a:hover {color:#5d74a9; }
.menu ul li.hover > a {color:#5d74a9;}


/* 메뉴 간격 */
.menu ul li > a {padding:10px 70px 10px 10px; text-align:left; }


/* 서브메뉴 배경 */
.menu ul ul {display: none; position: absolute; top:100%; min-width:150px; background:#FFF; border-left:2px solid #000; border-top:1px solid #EEE; border-right:1px solid #EEE; border-bottom:1px solid #EEE; }
.menu ul li:hover > ul {display: block;}
.menu ul ul > li { position: relative;}


/* 서브메뉴 폰트 사이즈 및 컬러변경 */
.menu ul ul > li a {font-size:13px; font-weight:400; padding: 10px 15px; height: auto; color: #333; background:none;}


/* 서브메뉴오버시 폰트 컬러변경 */
.menu ul ul > li a:hover {background:#EEE; color:#000; -webkit-transition: .1s ease-in-out; transition: .1s ease-in-out;}
.menu ul ul ul {position: absolute; left: 100%; top: 0;}




@media all and (max-width: 1240px) {
}


@media all and (max-width: 1024px) {
.hideMenu { height: 0; }
.mainWrap { width: 100%; margin: 0 auto; }
.header {width:100%;}

/* 유틸메뉴 높이 */
.util {height:25px;}

/* 유틸메뉴 폰트 사이즈 */
.util li a {font-size:9px;}

/* 상단메뉴영역 높이 */
.navFix {height:55px;}

/* 모바일 로고 가로 사이즈 */
.logo h1 img {width:170px;}

/* 메뉴 간격 */
.menu ul li > a {padding:5px 15px;}

/* 메뉴 폰트사이즈*/
.menu ul li a {font-size:15px;}
}



@media all and (max-width: 768px) {

/* 메뉴고정 (스크롤시 감춰지는 영역) */
.menuFix {height:0px;;}

/* 상단메뉴영역 높이 */
.navFix {position:relative; z-index:1; clear:both; width:100%; height:48px;}

/* 유틸메뉴 높이 */
.util ul {padding-right:10px;}
.util li {padding-left:12px; padding-top:0px;}
.hideMenu { height: 0; }
.nav_wrapper {width: 100%; padding: 0;}
.logo { width: 100%; position:absolute; padding-top:0;}

/* 모바일 로고 상단여백 및 가로 사이즈 */
.logo h1 {padding-top:0px; padding-left:15px;}
.logo h1 img {width:200px;}


.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:9px 15px; height: 30px; width: 30px; float: right;}
.spinner-master label { cursor: pointer; position: absolute; z-index: 99; height: 100%; width: 100%; top:0; left: 0;}
.spinner-master .spinner { position: absolute; height: 4px; width: 100%; padding: 0; background-color: #333;}
.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 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 ul > li a {text-align:center; background-color: #404040; color:#CCC; padding: 10px 18px 10px 30px;}
.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;}
}