@charset "utf-8";

.menu{ text-align:center; padding:10px 0 100px 0;}
.menu-wrap{ display:none;}

.menu li {
	position: relative;
	display:inline-block;
	margin-left:15px;
	margin-right:15px;
	border-bottom:2px solid transparent;
}
.menu > li:hover{ color:#22AC38; border-bottom-color:#999;}

.menu > li{ padding-bottom:15px; }

.menu li > ul  li:after{ 
	content:"|"; 
	font-size:0.8em; 
	margin-left:6px; 
	margin-right:2px;
	color:#727171;
}
.menu li > ul  li:last-child:after{ display:none; }
	
.menu li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	width:480%;
	font-size:0.9em;
	text-align:left;
	padding-top:4px;
	opacity:0;
	visibility:hidden;
}
.menu li > ul li {
	display:inline-block;
	margin-left:0px;
	margin-right:5px;
	padding-left:0px;
}

.menu li:hover > ul{ opacity:1; visibility:visible; }

.menu li ul li a:hover{ color:#22AC38; }

@media (max-width:960px) {

	.nav{
		border-top: 1px solid rgba(0, 0, 0, 0.2); 
		border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	}
	
	.menu{ display:none;}
	.menu-wrap{ display:block; text-align:right;}
	.mobile-menu-wrap{ display:none; width:100%; text-align:left;}
	
	.menu-trigger {
		position:relative;
		width: 105px;
		height: 50px;
		display:inline-block;
		text-align: center;
		padding-right:30px;
		border-left: 1px solid rgba(0, 0, 0, 0.2);
		color: #898989;
		line-height:46px;
		cursor:pointer;
	}
	.menu-trigger:after {
		position: absolute;
		top: 24px;
		right: 15px;
		display: block;
		height: 4px;
		width: 18px;
		border-top: 2px solid #898989;
		border-bottom: 2px solid #898989;
		content: '';
	}
	.menu-trigger:before {
		position: absolute;
		top: 18px;
		right: 15px;
		display: block;
		height: 2px;
		width: 18px;
		background: #898989;
		content: '';
	}
	
	.mobile-menu li{ border-top:1px solid rgba(0, 0, 0, 0.2); }
	
	.mobile-menu li a{ position:relative; display:block; padding:0.5em 1em;}
	
	.mobile-menu li ul li a{ padding:0.5em 2em; font-size:0.95em;}
	
	.mobile-menu li ul li ul li a{ padding:0.5em 3em;}
	
	/*有下一層選項的項目設定*/
	ul.mobile-menu li.mtree-node > a:after {
		position:absolute;
		top:50%;
		right:20px;
		width:20px;
		height:20px;
		margin-top:-10px;
		text-align:center;
		content: '›';
		font-size:1.5em;
		line-height:20px;
		color:rgba(0, 0, 0, 0.4);
	}
}