@charset "utf-8";
/* CSS Document */

/* ------------------------------------------------------------ */
/* >>>>>>>>>>>>> menu: navigation <<<<<<<<<<<<<<< */
/* ------------------------------------------------------------ */
#menu {background:white;}
#logo {
	width:262px;
	height:75px;
	background:url('../img/logo.png') no-repeat center center;
	background-size:contain;
	border:1px solid white;
}
#logo h1 {
	text-align:right;
	color:white;
	border-right:5px solid yellowgreen;
}
#menu input, #menu .sB, #menu #nav-btn li {display:inline-block;}
.navSearch {
	margin:20px auto 0;
	text-align:center;
}
.navinput {width:70%;}
#menu .sB {margin-left:10px;}
#menu .nav button {
	border:1px solid white;
	padding:10px 20px;
	margin:15px 20px 0 0;
	color:#ccc;
	background:white;
}
	#menu .nav button:hover{
		border:1px solid yellowgreen;
		color:#5a7b1e;
	}
/* ---------------------------------------------------------------------- */
/* Modal Log-in & Sign*/
/* ---------------------------------------------------------------------- */
.modal-header, .modal-content h4, .close {
	background-color: #5cb85c;
	color:white !important;
	text-align: center;
	letter-spacing:2px;
	font-size: 30px;
}
.modal-header{padding:35px 50px;}
.modal-body{	
	line-height:170%;
	padding:40px 50px;
}
.modal-footer {background-color: #f9f9f9;}
.modal-footer a:hover{text-decoration:underline; color:CornflowerBlue;}
.modal-footer button:hover{border-color:crimson; background:#d9534f; color:white;}

.btn_success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}
.btn_success:hover {color:#fff}

/* ------------------------------------------------------------ */
/* >>>>>>>>>>>>> Menu icon-hamburger <<<<<<<<<<<<<<< */
/* ------------------------------------------------------------ */
.glyphicon-menu-hamburger{
	width:40px; height:40px;
	font-size:2em;
	color:white;
	appearance:none;
	box-shadow:none;
	border:1px solid #ccc;
	background:#ccc;
}

/* ------------------------------------------------------------ */
/* >>>>>>>>>>>>> slide-left <<<<<<<<<<<<<<< */
/* ------------------------------------------------------------ */

.c-buttons{margin-left:50px;}
.c-button:disabled{opacity:.3; cursor:not-allowed}
.glyphicon-menu-hamburger:focus, .c-menu__close:focus{outline:none;}
.c-mask,.c-menu{position:fixed;}
.o-container{
	position:absolute; left:-3em; top:1.5em;
	z-index:80;
	width:40px;
}
.c-menu{
  position: fixed;
  z-index: 200;
  width:100%;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

/* close menu style */
.c-menu__close{
	background:yellowgreen;
	color:#fff;
	border:0;
	cursor:pointer;
	width:40px;
	height:40px;
	display:block;
	margin:2px 0 13px -7px;
}
.c-menu__close p{
	font:bold 2.7em 'Open Sans', sans-serif;
	margin-top:-7px;
}

/* slide-left */
.c-menu--slide-left::-webkit-scrollbar {display: none;}
.c-menu--slide-left{
	overflow-y:scroll;
	z-index:1111;
	width:20%;
	height:98%;
	top:20px;
	left:0;
	transform:translateX(-100%);
		-webkit-transform:translateX(-100%);
		-ms-transform:translateX(-100%);
}
.c-menu--slide-left.is-active{
	transform:translateX(0);
		-webkit-transform:translateX(0);
		-ms-transform:translateX(0);
}
/* .c-mask{
  position: fixed;
  z-index: 1100;
  width:100%;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 0;
  height: 0;
  background-color: gray;
  opacity: 0;
	transition:opacity .3s,width 0s .3s,height 0s .3s;
		-webkit-transition:opacity .3s,width 0s .3s,height 0s .3s;
}
 */.c-mask.is-active {
  width: 100%;
  height: 100%;
  opacity: 0.7;
  -webkit-transition: opacity 0.3s;
          transition: opacity 0.3s;
}

/* ------------------------------------------------------------ */
/* >>>>>>>>>>>>> menu style <<<<<<<<<<<<<<< */
/* ------------------------------------------------------------ */
#cssmenu {
  /* position:relative; left:-12px; */
  margin: 0;  
  /* width: 100%; */
}
/* .align-right {float: right;} */
#cssmenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}
#cssmenu ul li {
  position: relative;
  margin: 0;
  padding: 0;
}
#cssmenu ul li a {
  text-decoration: none;
  cursor: pointer;
}

/* ==================================================== */
/* font, style*/
/* ==================================================== */
	/* list */
	#cssmenu > ul > li > a {
	  /* font:1.6em 'Jeju Myeongjo'; */
	  font-size:1.5em;
	  color:#999;
	  line-height: 1;
	  word-spacing:1px;
	  letter-spacing:1px;
	  
	  background:white;	  
	  display: block;
	  padding: 20px;
	  border-top: 1px solid #ccc;
	  border-left: 1px solid #ccc;
	  border-right: 1px solid #ccc;
	  
	  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);

	  -webkit-transition: all 0.25s ease-in;
	  -moz-transition: all 0.25s ease-in;
	  -ms-transition: all 0.25s ease-in;
	  -o-transition: all 0.25s ease-in;
	  transition: all 0.25s ease-in;
	  position: relative;
	}

	/* :: sub list */
	#cssmenu ul ul li a {
	  /* font:18px 'Overlock','Jeju Myeongjo'; */
	  color:#888;
	  font-size:1.2em !important;
	  text-indent:1em;
	  word-spacing:2px;
	  letter-spacing:2px;
	  
	  background:#f5f5f5;	  
	  display: block;
	  position: relative;
	  padding:10px 20px;
	  border-bottom: 1px solid #ccc;  
	  -webkit-transition: all 0.25s ease-in;
	  -moz-transition: all 0.25s ease-in;
	  -ms-transition: all 0.25s ease-in;
	  -o-transition: all 0.25s ease-in;
	  transition: all 0.25s ease-in;
	}

	/* :: sub-sub list */
	#cssmenu ul li ul li ul li a{
		/* font:16px 'Overlock','Jeju Myeongjo'; */
		font-size:1em;
		color: #8c908e;
		text-indent:2em;
		word-spacing:2px;
		letter-spacing:2px;
		background:white;
		border:0;}

/* ==================================================== */
/* border */
/* ==================================================== */

	/* border radius :: list */
	#cssmenu > ul > li:first-child > a {
	  border-top-left-radius: 3px;
	  border-top-right-radius: 3px;
	}
	#cssmenu > ul > li:last-child > a {
	  border-bottom-left-radius: 3px;
	  border-bottom-right-radius: 3px;
	  border-bottom: 1px solid #ccc;
	}

	/* border L&R :: sub list */
	#cssmenu ul ul li {
	  border-left: 1px solid #ccc;
	  border-right: 1px solid #ccc;
	}
	#cssmenu ul ul li:first-child > a {padding-top: 10px;}
	#cssmenu ul ul ul li {border:0;}

/* ==================================================== */
/* open, active, active:hover, hover */
/* ==================================================== */

	/*  :: list */
	#cssmenu > ul > li:hover > a,
	 #cssmenu > ul > li.active:hover > a{background: #d5ebad;}

	#cssmenu > ul > li.open > a{
		background: #d5ebad;
		border:2px solid #c0e184;
		color:#78a428;
	}

	/* sub list */
	#cssmenu ul ul li:hover > a,
	#cssmenu ul ul li.active:hover > a {background: #e1f5d6;}
	
	#cssmenu ul ul li.open > a{
		background: #e1f5d6;
		border:1px solid #c3ebad;
		color:#78a428;
	}
	/* sub-sub list */
	#cssmenu ul ul ul li:hover > a,
	#cssmenu ul ul ul li.active:hover > a {
	  background: #f0f5d6;
	  color:#78a428;
	  text-decoration:underline;
	}

/* ==================================================== */
/* line bottom triangle */
/* ==================================================== */

	/* list :: border */
	#cssmenu ul > li.has-sub > a::after {
	  content: "";
	  position: absolute;
	  display: block;
	  width: 0;
	  height: 0;
	  border-top: 13px solid #c0e184;
	  border-left: 120px solid transparent;
	  border-right: 90px solid transparent;
	  left: -1px;
	  bottom: -13px;
	  bottom: 0px;
	  z-index: 1;
	  opacity: 0;
	  -webkit-transition: all .2s ease;
	  -moz-transition: all .2s ease;
	  -ms-transition: all .2s ease;
	  -o-transition: all .2s ease;
	  transition: all .2s ease;
	}
	/* list :: */
	#cssmenu ul > li.has-sub > a::before {
	  content: "";
	  position: absolute;
	  display: block;
	  width: 0;
	  height: 0;
	  border-top: 13px solid #d5ebad;
	  border-botom: 13px solid transparent;
	  border-left: 120px solid transparent;
	  border-right: 90px solid transparent;
	  left: -2px;
	  bottom: 20px;
	  z-index: 3;
	  opacity: 0;
	  -webkit-transition: all .2s ease;
	  -moz-transition: all .2s ease;
	  -ms-transition: all .2s ease;
	  -o-transition: all .2s ease;
	  transition: all .2s ease;
	}

	/* sub list :: border */
	#cssmenu ul ul > li.has-sub > a::after {border-top: 13px solid #c3ebad;}
	/* sub list :: */
	#cssmenu ul ul > li.has-sub > a::before {border-top: 13px solid #e1f5d6;}
	/* #cssmenu ul ul ul li a {padding-left:30px;} */

/* ==================================================== */
/* little triangle */
/* ==================================================== */

	/* :: list */
	#cssmenu ul > li.has-sub::after {
	  content: "";
	  display: block;
	  position: absolute;
	  width: 0;
	  height: 0;
	  border: 11px solid transparent;
	  border-top-color: #ccc;
	  z-index: 2;
	  right: 20px;
	  top: 24.5px;
	  pointer-events: none;
	}
	#cssmenu ul > li.has-sub.open > a::after {
	  opacity: 1;
	  bottom: -13px;	  
	}
	#cssmenu ul > li.has-sub.open > a::before {
	  opacity: 1;
	  bottom: -12px;	  
	}
	#cssmenu ul ul {display: none;}
	
	/* :: sub list */
	#cssmenu ul ul > li.has-sub::after {
	  top: 18.5px;
	  border-width: 8px;
	  border-top-color: #ddd;	  
	}
	
/* ==================================================== */
/* little triangle hover */
/* ==================================================== */

	/* :: list */
	#cssmenu ul > li:hover::after,
	#cssmenu ul > li.active::after,
	#cssmenu ul > li.open::after {border-top-color: yellowgreen;}

	/* :: sub list */
	#cssmenu ul ul > li:hover::after,
	#cssmenu ul ul > li.active::after,
	#cssmenu ul ul > li.open::after {border-top-color: yellowgreen;}