/*
	ID : GNB CSS
	WORK : Shinjunho
	DATE : 2015.10.29
	NOTE : GNB & Accordion  CSS
*/

html.sb-lock.sb-active:not(.sb-static) {
	overflow: hidden; /* Prevent site from scrolling when a Slidebar is open, except when static Slidebars are only available. */
}

/* ----------
 * 002 - Site
 */

#sb-site, .sb-site {
	/* You may now use .sb-site as your site container if you wish to use your own id. However please make sure you don't set any of the follwoing styles any differently on your id. */
	width: 100%;
	position: relative;
	z-index: 1; /* Site sits above Slidebars */
	background-color: #ffffff; /* Default background colour, overwrite this with your own css. */

}

/* ---------------
 * 003 - Slidebars
 */

.sb-slidebar {
	height: 100%;
	overflow-y: scroll; /* Enable vertical scrolling on Slidebars when needed. */
	position:fixed;
	z-index: 0; /* Slidebars sit behind sb-site. */
	visibility: hidden; /* Initially hide the Slidebars. */
	background-color: #fff; /* Default Slidebars background colour, overwrite this with your own css. */
	width: 280px;
	top:0px;

}

.sb-left {
	left:0px; /* Set Slidebar to the left. */
}

.sb-right {
	right: 0; /* Set Slidebar to the right. */
}

html.sb-static .sb-slidebar,
.sb-slidebar.sb-static {
	position: absolute; /* Makes Slidebars scroll naturally with the site, and unfixes them for Android Browser < 3 and iOS < 5. */
}

.sb-slidebar.sb-active {
	visibility:visible;  /* Makes Slidebars visibile when open. */
}

.sb-slidebar.sb-style-overlay {
	z-index: 9999; /* Set z-index high to ensure it overlays any other site elements. */
}


.sb-active body { overflow-x:hidden; /* Stops horizontal scrolling. */}

/* ---------------
 * 004 - Animation
 */

.sb-slide, #sb-site, .sb-site, .sb-slidebar {
	-webkit-transition: -webkit-transform 400ms ease;
	   -moz-transition: -moz-transform 400ms ease;
	     -o-transition: -o-transform 400ms ease;
	        transition: transform 400ms ease;
	-webkit-transition-property: -webkit-transform, left, right; /* Add left/right for Android < 4.4. */
	-webkit-backface-visibility: hidden; /* Prevents flickering. This is non essential, and you may remove it if your having problems with fixed background images in Chrome. */
}

/* --------------------
 * 005 - Helper Classes
 */

.sb-hide {
	display: none; /* Optionally applied to control classes when Slidebars is disabled over a certain width. */
}

/*TOP_CONTENT*/
.top {width:100%; position:relative; background:#fff; overflow:hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; -webkit-user-select:none;  -webkit-touch-callout:none; -webkit-tap-highlight-color: rgba(0,0,0,0); border-bottom:#22b502 solid 1px;}
.top ul{float:left; width:75px; height:69px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.top ul+ul {float:right;}
.top ul:active {opacity:0.7;}
.top ul a{display:block; width:100%; height:100%;}
.top ul img {width:100%;}
.top .links {position: absolute; right:70px; top:15px; line-height:16px; background:#f4f4f4 ;color:#777; border-radius:5px; padding:5px 10px;}

/*Accordion Menu*/

#scrollgnb {height:90%; width:100%; }

.menu {padding:24px 0; width:280px; background:#fff; border-bottom:#22b502 solid 1px; text-align:center; font-size:1.5em; font-family: tohome, sans-serif; color:#22b502; height:22px;}

.cbp-spmenu {overflow-y:scroll;}
#cssmenu,#cssmenu ul, #cssmenu ul li, #cssmenu ul li a {margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}
#cssmenu {width: 100%;  font-family:'Nanum Gothic', Dotum; color: #ffffff; background:#fff; padding:0 0 50px 0;}
#cssmenu ul ul {display: none;}
.align-right {float: right;}
#cssmenu > ul > li > a {
  padding: 20px 20px;
  border-top: 1px solid #bbb;
  cursor: pointer;
  z-index: 2;
  font-size: 1.3em;
  font-weight: bold;
  text-decoration: none;
  color: #555;
  background: #fff;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #eeeeee;
  background: #1fa0e4;

}
#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #bbb;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 5px;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #ddd;
  padding: 15px 30px;
  z-index: 1;
  text-decoration: none;
  font-size: 1.1em;
  color: #555;
  background: #eee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #eee;
  color: #000;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  /*tor*/
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}

opacity:0.8;}