/* Çì´õ (³ôÀÌ/¹è°æ ÄÃ·¯ ¼³Á¤) */
#header {height:120px; background:#FFF;}
#header .navbar-inverse .container {position: relative;}

#menu-fix {position:fixed; left:0px; top:0px; width:100%; height:120px;}
#menu-fix.fixed {background:#FFF; box-shadow:3px 3px 3px rgba(0,0,0,0.1); z-index:99999999;}

/* ½ºÅ©·Ñ½Ã »ó´Ü ¸Þ´º »ç¶óÁö´Â ³ôÀÌ */
#menu-container {z-index:9999999; position: fixed; width:100%; height:120px; background:#FFF; -webkit-transition: 0.2s all; transition: 0.2s all;}
#menu-container.fixed {margin-top:-36px; box-shadow:3px 3px 3px rgba(0,0,0,0.1); -webkit-transition: 0.2s all; transition: 0.2s all;}


/* ÃÖ»ó´Ü ¹Ù·Î°¡±â ¸Þ´º (HOME/LOGIN/JOIN ºÎºÐ) */
.util-menu { width:100%; background:#F3F3F3; height:32px; line-height:0;}
.util-menu ul {float:right; margin:0 auto;}
.util-menu li {display:inline-block; padding:10px 20px; height:32px; border-right:1px solid #E3E3E3;}
.util-menu li:first-child {border-left:1px solid #E3E3E3;}
.util-menu li a {font-size:12px; font-weight:400; color:#999; padding:0;}
.util-menu li a:hover, .util li a:focus {color:#dbb075; background:none;}

/* ·Î°í */
#header .navbar-brand h1 {padding-top:20px; padding-left:20px;}

/* ¸Þ´º »ó´Ü ¿©¹é */
.navbar-right {padding-top:20px !important;}

/* 1Â÷ ¸Þ´º ÆùÆ® */
#header .navbar-nav.navbar-right > li a {font-size:18px; font-weight:500; color: #1E1E1E; letter-spacing:-0.4px; font-family:'Montserrat','Noto Sans KR', sans-serif;}
#header .navbar-inverse .navbar-nav  li a:hover {color:#9d846a;}

/* 1Â÷ ¸Þ´º °£°Ý */
#header .navbar-nav.navbar-right li > a {padding:15px 30px;}
.navbar-nav > li {float:left; text-align:center;}

/* 2Â÷ ¸Þ´º ÆùÆ® */
#header .navbar-nav li ul.sub-menu li a {color:#FFF; padding:10px; font-size:14px; font-weight:400; font-family: 'Noto Sans KR', sans-serif; display: block;}

/* 2Â÷ ¸Þ´º ³ÐÀÌ ¹× µðÀÚÀÎ */
#header .navbar-nav li ul.sub-menu {width:100%; position:absolute; top:50px; left:0; box-shadow: none; z-index:999;}
#header .navbar-nav li ul.sub-menu li {background:#555; border-bottom:1px solid #666;}

/* 2Â÷ ¸Þ´º ¸¶¿ì½º ¿À¹ö ÄÃ·¯ */
#header .navbar-nav li ul.sub-menu li a:hover, #header .navbar-nav li ul.sub-menu li a:focus {background:#9d846a; color: #FFF;}
#header .navbar-nav li ul.sub-menu li:last-child {border-bottom:none;}




@media screen and (max-width: 1280px) {

/* ÃÖ»ó´Ü ¹Ù·Î°¡±â ¸Þ´º (HOME/LOGIN/JOIN ºÎºÐ) */
.util-menu li:last-child {border-right:none;}

/* ·Î°í */
#header .navbar-brand h1 {padding-left:20px;}

}



@media only screen and (max-width : 1024px) {  

/* Çì´õ (³ôÀÌ/¹è°æ ÄÃ·¯ ¼³Á¤) */
#header {height:110px;}
#menu-container {height:110px;}
#menu-fix {height:110px;}

/* ¸Þ´º »ó´Ü ¿©¹é */
.navbar-right {padding-top:15px !important;}

/* ÃÖ»ó´Ü ¹Ù·Î°¡±â ¸Þ´º (HOME/LOGIN/JOIN ºÎºÐ) */
.util-menu {height:30px;}
.util-menu li {padding:10px 15px; height:30px;}

/* ·Î°í */
#header .navbar-brand h1 img {width:180px;}

/* 1Â÷ ¸Þ´º ÆùÆ® */
#header .navbar-nav.navbar-right > li a {font-size:15px;}

/* 1Â÷ ¸Þ´º ³ÐÀÌ */
.navbar-nav > li {width:130px;}
#header .navbar-nav.navbar-right li > a {padding:15px 0;}

/* 2Â÷ ¸Þ´º ³ÐÀÌ ¹× µðÀÚÀÎ */
#header .navbar-nav li ul.sub-menu {width:130px;}

/* 2Â÷ ¸Þ´º ÆùÆ® */
#header .navbar-nav li ul.sub-menu li a {font-size:12px;}

}



/* Å¸ºí·¿, ¸ð¹ÙÀÏ */
@media screen and (max-width: 769px) {
  /* Çì´õ */
  #header {width: 100%; z-index:99999; height:95px;}
  #menu-fix {height:95px;}
  /* ·Î°í */
  #header .navbar-brand h1 {padding-top:16px; padding-left:15px;}
  #header .navbar-brand h1 img {width:270px;}
  /* 1Â÷ ¸Þ´º ÆùÆ® */
  #header .navbar-nav.navbar-right > li a {font-size:13px; padding: 15px 30px;}
  .navbar-nav > li {width:100%; float:left; text-align:left; background:#FFF;}
  .nav {padding-top:5px !important;}
  .navbar-inverse .navbar-nav > .open > a {background-color:#F5F5F5; border:0;}
  .nav > li:first-child {border-top:1px solid #DDD;}
  .nav > li {border-bottom:1px solid #DDD;}
  #menu-container {position:relative; height:85px;}
  #header .navbar-inverse .navbar-toggle, #header .navbar-inverse .navbar-toggle:focus { border: none; outline: none;}
  #header .navbar-inverse .navbar-toggle:hover .icon-bar {background: #666;}
 
  .navbar-inverse .navbar-collapse,
  .navbar-inverse .navbar-form {border-top: 0;}
  .social-icons ul li:first-child {padding-left: 0;}
  #header .navbar-nav.navbar-right li > a > i {display:inline-block; float:right; padding: 3px 10px; margin-right: 5px; border: 1px solid #DDD; border-radius:4px;}
  #header .navbar-nav.navbar-right li > a {padding:15px 15px 15px 20px;}
  #header .navbar-nav li ul.sub-menu li a {padding:10px 20px;}
  #header .navbar-nav li ul.sub-menu {position: relative; top:0; left:0; padding:0; width:100%; box-shadow: none; display:none; z-index: 999; border:0;}
  #header .navbar-nav li ul.sub-menu li:last-child {border-bottom:none;}
  #header .navbar-inverse .navbar-nav li.active > a, 
  #header .navbar-inverse .navbar-nav li.active > a:focus, 
  #header .navbar-nav.navbar-right li > a:hover {border:none; background:#FFF;}
  .nav.nav-justified.post-nav li, 
  .nav.navbar-nav.post-nav li {display:inline-block; margin-right: 15px;}
  .navbar-toggle {margin-top:15px !important;}

}