@charset "utf-8";

/*----------------------------------------------------- Nav nav */
#nav-toggle {
	display:none;
}
#nav {
	width:100%;
	height:40px;
	background:#1b9288;
}
#nav ul {
	width:90%;
	margin:auto;
	letter-spacing:1px;
	text-align:center;
}
#nav ul li {
	display:inline-block;
	color:#fff;
	padding:0 10px;
	position:relative;	
}
#nav ul li:hover {
	background:#666;
}
#nav ul li a {
	height:40px;
	line-height:40px;
	display:block;
	color:#fff;
	font-size:0.9em;
	text-align:left;
	
}
#nav ul li a:hover {
	text-decoration:none;
	text-align:center;
}
#nav ul li ul { 
	display:none;
	background:#666;
	font-size:0.9em;
	position:absolute;
	width:180px;	
}
#nav ul li ul { 
	width:180px;
}

#nav ul li ul li { 
	width:180px;
	text-align:center;
}
#nav ul li:hover ul {
	display:inline;
	left:0px;
	z-index:10;
	text-align:left;
	
}
#nav li:hover ul a:hover {
	color:#000;
}		

#nav li:hover ul li:hover {
	width:100%;
	background:#ffc000; 
	border:#666 1px solid;

}	

/* 修正IE7絕對定位差異 */
*:first-child+html #nav ul li ul {
    margin-top:0;
}
/* 修正IE6絕對定位差異 */
* html #nav ul li ul {
    margin-top:0;
}
#nav ul li ul li {
    /* 覆寫繼承自第一層的浮動設定 */
    float:none;
    text-align: center;
}
#nav ul li ul li a {
    /* 覆寫繼承自第一層的浮動設定 */
    float:none;	
    width: 100%;/* 註：display、height、padding繼承第一層的設定 
	*/
}
#nav ul li ul li ul {
    margin-top:-20px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left:135px;
    width:270px;  /*220px*/
	background-color:#F1F1F1;
	border:#CCC 1px solid;
}

#nav ul li ul li ul a {  
	color:#333;
}
/* 修正IE7絕對定位差異 */
*:first-child+html #nav ul li ul li ul {
    margin-top:-30px;
}
#nav ul li ul li ul li {
	width:270px;  /*220px;*/
	text-align:left;
/* width、float繼承第二層，免設定 */
}
#nav ul li ul li ul li a {
/* width、float繼承第二層，免設定 */
}
/* ---------- 隱藏與顯示階層 ---------- */
#nav ul li ul {
    /* 預先隱藏第二層 */
    visibility:hidden;
}
#nav ul li:hover ul {
    /* 觸動第一層時，顯示第二層 */
    visibility:visible;
}
#nav ul li:hover ul li ul {
    /* 顯示第二層時，隱藏第三層，避免同時彈出 */
    visibility:hidden;
}
#nav ul li ul li:hover ul {
    /* 觸動第二層時，顯示第三層 */
    visibility:visible;
}
#nav ul li ul li:hover ul li ul {
    /* 顯示第三層時，隱藏第四層，避免同時彈出 */
    visibility:hidden;
}
#nav ul li ul li ul li:hover ul {
    /* 觸動第三層時，顯示第四層 */
    visibility:visible;
}
/* 觸動第二層以上li時改變背景色 */
#nav ul li ul li:hover, #menu ul li ul li a:hover {
    background:#dfdfdf;
}


/*----------------------------------------------------- media(RWD) */
@media only screen and (min-width: 481px) {
	#nav-toggle {
		width:50px;
	}
	#nav-toggle img {
		width:50px;
		margin-top:5px;
	}
}

@media only screen and (max-width: 990px) {
	#nav ul li {
		padding:0 10px;
		font-size:0.95em;
	}
}

@media only screen and (max-width: 768px) {
	#nav-toggle {
		width:60px;
		height:60px;
		display:inline-block;
		background:#333;
		color:#FFF;
		cursor:pointer;
		position:fixed; 
		z-index:40; 
		top:0px;
	}
	#nav {
		width:100%;
		height:auto;
		background:#333;
		margin:60px 0 -60px 0;
		position:relative;
		display:none;
		z-index:20;
	}
	#nav ul {
		width:100%;
		float:none;
		text-align:left;
	}
	#nav ul li {
		width:100%;
		height:auto;
		font-size:1em;
		display:block;
		padding:0;
		
	}
	#nav ul li a{
		padding:0 10px;
	}
	#nav ul li:hover ul{
		position:relative;
		top:0px;
	}
}

@media only screen and (max-width: 320px) {
	#nav-toggle {
		width:50px;
	}
	#nav-toggle img {
		width:50px;
		margin-top:5px;
	}
}