@charset "utf-8";

#menu-icon {
	display:none;
}

nav#menu {
	height:55px;
	border-bottom:1px solid #cccccc;
	position:relative;
}

nav#menu span.hover-line {
	height:3px;
	display:block;
	background-color:#b7b7b7;
	position:absolute;
	bottom:10px;
	left:0px;
	z-index:10;
}

nav#menu > ul {
	max-width:1300px;
	margin:0 auto;
	position:relative;
}

nav#menu > ul > li {
	height:54px;
	float:left;
}

nav#menu > ul > li > a {
	height:54px;
	line-height:54px;
	padding:0 20px;
	text-align:center;
	color:#606060;
	display:block;
	font-size:110%; /* for ie8 */
	font-size:1.1rem;
	position:relative;
	z-index:20;
}

nav#menu > ul > li > a:focus,
nav#menu > ul > li > a.open {
	color: #333;
	outline: none;
	background-color: #cdecf4;
}

nav#menu ul li a:hover {
	text-decoration:none;
}

nav#menu > ul > li.on {
	background-color:#48aac3;
}

nav#menu > ul > li.on > a {
	color:#fff;
	letter-spacing:2px;
}

nav#menu > ul > li > div {
	display:none;
	width:98%;
	position:absolute;
	top:34px; /* top:50px; */
	left:1%;
	z-index:30;
} 
nav#menu > ul > li > div > ul {
	width:100%;
	padding:20px;
	margin-top:20px;
	border:1px solid  #cccccc;
	background-color:#fff;
	-moz-box-shadow:0px 0px 5px #cccccc;
	-webkit-box-shadow:0px 0px 5px #cccccc;
	box-shadow:0px 0px 10px #cccccc;
}

nav#menu ul li:hover div,
nav#menu ul li div.open {
	display:block;
}

nav#menu ul ul li {
	width:23%;
	margin:0 0.8% 15px;
	display:inline-block;
	position:relativee;
	vertical-align:top;
}

nav#menu ul ul li a {
	color:#fff;
	font-size:110%; /* for ie */
	font-size:1.1rem;
	text-align:left;
	display:block;
	padding:8px 8px 8px 20px; 
	background-color:#5fc1da;
}

nav#menu ul ul li a:hover {
	background-color:#48aac3;
}

nav#menu ul ul ul {
	width:100%;
	display:block;
	margin:5px 0 20px 0;
	padding:0;
}

nav#menu ul ul ul li {
	width:100%;
	display:block;
	margin:0;
	border-bottom:1px solid #cccccc;
}

nav#menu ul ul ul li a {
	color:#656565;
	background-color:#fff;
	padding:12px;
	font-size:100%; /* for ie */
	font-size:1rem;
}

nav#menu ul ul ul li a:hover {
	background-color:#f4f4f4;
}

/*----------------------------------------------------- media(RWD) */
@media only screen and (max-width: 768px) {
#menu-icon {
	display:block;
	width:10vw;
	height:70%;
	border-top-right-radius:8px;
	border-bottom-right-radius:8px;
	background-color:#48AAC3;
	position:absolute;
	top:15%;
	left:0px;
	background-image:url(../img/menu_icon.jpg);
	background-repeat:no-repeat;
	background-size:60%;
	background-position:center;
}

#menu-icon img {
	height:50%;
	margin:25% 0;
}

nav#menu {
	display:none;
	height:auto;
	background-color:#fff;
}

nav#menu > ul > li {
	width:100%;
	height:auto;
	float:none;
}

nav#menu > ul > li:hover {
	background-color:#dddddd;
}

nav#menu ul li:hover div {
	display:none;
}

nav#menu > ul > li > a {
	width:100%;
	text-align:left;
	border-bottom:1px solid #ccc;
}

nav#menu > ul > li.on {
	background-color:#fff;
}

nav#menu > ul > li.on > a {
	color:#606060;
}

nav#menu > ul > li > div {
	width:100%;
	position:relative;
	top:0px;
	left:0;
}

nav#menu > ul > li > div > ul {
	width:100%;
	padding:0px;
	margin-top:0px;
	border:none;
	background-color:#fff;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}

nav#menu ul ul li {
	width:100%;
	margin:0;
	display:block;
	position:relativee;
	vertical-align:top;
	border-bottom:1px solid #fff;
}

nav#menu ul ul li a {
	height:54px;
	line-height:54px;
	padding:0 20px;
	font-size:100%;
	font-size:1rem;
	text-indent:15px;
}

nav#menu ul ul ul {
	margin:0;
	display:none;
}

/*nav#menu ul ul li:hover ul {
	display:block;
}*/

nav#menu ul ul ul li a {
	height:54px;
	line-height:54px;
	background-color:#f4f4f4;
	padding:0 20px;
	text-indent:30px;
}

}

@media only screen and (max-width: 414px) {
#menu-icon img {
	height:40%;
	margin:35% 0;
}
}