/* »ó´Ü¹Ù */
#top-bar{width:100%;height:35px;border-bottom:1px solid #d3d5d3;left:0; top:0px;z-index:99999;overflow:hidden;background:#fff;}
#top-bar a{}
#top-bar a:active, #top-bar a:visited, #top-bar a:link, #top-bar a:hover{text-decoration:none;}
.top-bar-header ul li{float:left;}
.top-bar-header ul li a{display:block;height:35px;line-height:35px;padding:0 15px;font-size:12px;color: #666666;}
.top-bar-header ul li a strong{display:none;}
.top-bar-header ul li a i{font-size:14px;}
.top-bar-menu-left{float:left;border-left:1px solid #d3d5d3;}
.top-bar-menu-left li a{border-right:1px solid #d3d5d3;}
.top-bar-menu-right{float:right;border-right:1px solid #d3d5d3;}
.top-bar-menu-right li a{border-left:1px solid #d3d5d3;}
.top-bar-menu-left li a:hover, .top-bar-menu-right li a:hover {background:#b7b7b7;color:#fff;}
#top-bar .top-bar-header ul li a strong{display:inline;margin-left:8px;font-weight:normal;}
.top-bar-line{top:30px;border-bottom:1px solid #fff;width:100%;}
.top-bar-content{margin:0 auto;}

/*-----------------------------------------------------*/
/* Header */
/*-----------------------------------------------------*/
.logo { text-align: center; }
.top-bar { background: #fff; padding:20px 0 0 0; }
.top-info-bar { position: relative; }
.header-wrapper { clear:both; width: 100%; }


.m-left-10 {margin-left:-10px;}
.p-left-10 {padding-left:-10px;}
.fl { float:left; padding-left: 10px; }
.fr { float:right; padding-right: 5px; }

.cs_btn {
  width:145px;
  border-radius: 50px;
  background-color: #3ab926;
  border: 1px solid #3ab926;
  margin:10px 5px 0 0 !important;
  padding:5px 11px 7px 11px !important;
  text-align: center;
  transition: all 0.5s;
  cursor: pointer;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.cs_btn:hover,
.cs_btn.hover,
.cs_btn:focus,
.cs_btn.focus {
  border: 1px solid #3ab926; 
  color: #f0a04e !important;
}
.cs_btn a span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size:14px;
  line-height:24px;
  color: #fff !important;
  transition: 0.5s;
  letter-spacing: -1px;
}
.cs_btn a span:after {
  content: '\f054';
  position: absolute;
  opacity: 0;
  top: 2px;
  right: -20px;
  transition: 0.5s;
  font-size: 12px;
  font-family: 'FontAwesome', sans-serif;
}
.cs_btn a span i {font-size:18px; vertical-align: middle;}
.cs_btn:hover a span {
  padding-right: 25px;
}
.cs_btn:hover a span:after {
  opacity: 1;
  right: 0;
}
@media all and (max-width: 767px) {
 .top-bar-menu-left {display: none;}
 .top-bar { background: #fff; padding:10px 0 10px 0; }
 .cs_btn {
  width:125px;
  border-radius: 50px;
  background-color: #3ab926;
  border: 1px solid #3ab926;
  margin:5px 5px 5px 0 !important;
  padding:5px 5px 7px 5px !important;
  text-align: center;
  transition: all 0.5s;
  cursor: pointer;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
 }
}
nav {width: 100%; margin: 0 auto;}
.nav_wrapper {
  float: left; 
  position: absolute;
  left: 0;
  z-index: 1000;
  width: 100%;
  background: #333333; 
}

.scroll { top: -90px; }
.no-scroll {
  top: 0;
  z-index: 9999;
}
.spin-state input[type=checkbox] {display: none;}

@media all and (max-width: 767px) {
.nav-brand {
  text-align: center;
  padding: 13px 0 5px 0;
  height: 75px;
}
.nav-brand > img {
  display: block;
}
.example-header .container {width: 100%;}
.spin-state * {
  transition: all 0.3s;
  box-sizing: border-box;
}
.spin-state {
  position: relative;
  margin: 10px;
  height: 28px;
  width: 28px;
  float: left;
}
.spin-state label {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 4px;
  left: 0;
}
.spin-state .spin {
  position: absolute;
  height: 4px;
  width: 100%;
  padding: 0;
  background-color: #fff;
}
.spin-state .diagonal.part-1 {
  position: relative;
  float: left;
}
.spin-state .horizontal {
  position: relative;
  float: left;
  margin-top: 4px;
}
.spin-state .diagonal.part-2 {
  position: relative;
  float: left;
  margin-top: 4px;
}
.spin-state input[type=checkbox]:checked ~ .spin-spin > .horizontal { opacity: 0; }
.spin-state input[type=checkbox]:checked ~ .spin-spin > .diagonal.part-1 {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-top: 10px;
}
.spin-state input[type=checkbox]:checked ~ .spin-spin > .diagonal.part-2 {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: -12px;
}
.menu {
  clear: both;
  min-width: inherit;
  float: left;
}
.menu,
.menu > ul ul {
  overflow: hidden;
  max-height: 0;
  background-color: #333333;
}
.menu > li > ul.sub-menu {
  padding: 0px;
  border: none;
}
.menu.active,
.menu > ul ul.active { max-height: 55em; }
.menu ul { display: inline; }
.menu li,
.menu > ul > li { display: block; }
.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: 10px;
  display: block;
  font-size: 1.5em;
  padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after { 
  content: "-";
  position: absolute;
  display: block;
  font-size: 1.5em;
  padding: 2px 10px 0 0;
}
.menu ul ul > li a {
  background-color: #333333;
  padding: 10px 18px 10px 30px;
}
.menu ul li a:hover {
  background: #666666;
  color: #fff;
}
.menu ul li.hover > a {
  background: #666666;
  color: #fff;
}
.menu ul ul,
.menu ul ul ul {
  display: inherit;
  position: relative;
  left: auto;
  top: auto;
  border: none;
}
}

@media (min-width: 768px) {
.nav-brand {
  text-align: center;
  padding: 18px 0 0 0;
  height: 73px;
}
.nav-brand > img {
  display: block;
}
.nav_wrapper {
  float: left; 
  position: absolute;
  left: 0;
  z-index: 1000;
  width: 100%;
  transition: top .5s ease-out;
  background: #fff; 
}
.menu {
  width: 100%;
  height: auto;
  background: #333333;
  transition: all 0.3s ease;
  text-align: center;
}
.menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  display: inline-block;
}
.menu > li > ul.sub_menu {
  min-width: 10em;
  padding: 4px 0;
  background-color: #f4f4f4;
  border: 1px solid #cccccc;
}
.menu ul li { padding: 0 25px 0 0px; }
.menu > ul > li { display: inline-block; }
.menu ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}
.menu ul li a:hover {
  background: #;
  color: #fff;
}
.menu ul li.hover > a {
  background: #;
  color: #fff;
}
.menu ul li > a { padding: 15px; }
.menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  min-width: 160px;
  background: #fff;
  border: 1px solid #2c3e50; border-top:1px;
}
.menu ul li:hover > ul { display: block; }
.menu ul ul > li { position: relative; width: 100%;}
.menu ul ul > li a {
  clear: both; 
  float: left; 
  padding: 10px 15px;
  height: auto;
  background: #fff;  
  color: #000000;
  font-size: 13px;
}
.menu ul ul > li a:hover {  
  color: #666666;
}
.menu ul ul ul {
  position: absolute;
  left: 100%;
  top: 0;
}
.divider {
  height: 1px;
  margin: 0;
  overflow: hidden;
  background-color: #dddddd;
}
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
    margin: 0;
}

/* »ó´Ü¸Þ´º °£°Ý ¶§¹®¿¡ µÎÁÙ·Î ¹Ù²î´Â Çö»óÀÌ ÀÖÀ¸¸é ¿äºÎºÐ ¼öÁ¤ */
@media (min-width: 768px) and (max-width: 780px) {
.menu ul li { padding: 0 25px 0 0px; }
}