@charset "utf-8";

/*目錄*/
#nav {
	width: 100%; 
	font-weight: 400;
	/*position: static;*/
	margin:0;
	/*height: 2.5em; */
	/*margin-top:1.5%;*/
	background: rgba(0,0,0,1); /*背景黑色*/
	/*background: rgba(0,0,0,0.5); /*背景半透明黑色*/
	z-index:999;
	}
	
.menufixed{ z-index: 999; position:fixed; top: 0;} /* 讓Menu跟隨畫面卷動*/

#nav > a {display: none;}
#nav ul { padding:0; 	max-width:1280px; margin:0 auto; }
#nav li {
	position: relative;
	list-style:none;
		}
#nav li a {
	color: #fff;
	display: block;
		}
#nav li a:active {background-color: #000 !important;}

#nav span:after { /*利用border屬性產生向下三角形*/
	width: 0;
	height: 0;
	border: 0.313em solid transparent; /* 5 */
	border-bottom: none;
	border-top-color: #ffffff;
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.313em; /* 5 */
	}

/* first level */
#nav > ul {
	width:95%;
	margin:auto;
	/*height: 2.5em;*/  /* 60 */
	/*background-color: #e15a1f;*/
	display:flex;
	justify-content:flex-start;
	align-items:baseline;
	}
#nav > ul > li {
	/*width: 14%;	/*七個目錄的寬度*/
	/*width: 16%; 六個目錄的寬度*/
	padding-left:20px;
	padding-right:20px;
	height: 100%;
	float: left;
	/*flex:1;*/	/* http://www.oxxostudio.tw/articles/201501/css-flexbox.html */
	}
#nav > ul > li > a {
	height: 100%;
	font-size: 1.1em; /* 20 */
	font-weight:bold;
	/*line-height: 2em;*/ /* 60 (24) */
	text-align: center;
	text-decoration:none;

	}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {
	background-color: #000000;
	color:#ffff00;	
	}

/* second level */
#nav li ul {
	/*background-color: #cc470d;*/
	background: rgba(0,0,0,0.75); /*下拉選單背景*/
	display: none;
	position: absolute;
	top: 100%;
	}
#nav li:hover ul {
	display: block;
	left: 0;
	right: 0;
	}
#nav li:not( :first-child ):hover ul {left: -1px;}
#nav li ul a {
	font-size: 0.9em; /* 16 */
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	padding: 0.4em; /* 15 (20) */
	text-align:center;
	text-decoration:none;
	}
#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {
	background-color: #000000;
	color:#ffff00;
	}
/*定義英文字目錄字體大小*/
#enmenu_word  { font-size:0.8em;  font-weight:bold;}
#enmenu_word2  { font-size:0.7em; }

.logo_area{
	padding-left:5px !important;
}
.logo_area img {
	border:0px;
	height:50px;
	margin-top:10px;
	margin-bottom:10px;
	vertical-align:middle;
}

/*介於651px～900px*/
@media screen and (min-width: 651px) and (max-width: 900px) {
#nav {
	width: 100%;
	/*position: static;*/
	margin: 0;
	}
#nav > ul > li {
	padding-left:5px;
	padding-right:5px;
	}
/* first level */
#nav > ul > li > a {
	height: 100%;
	font-size: 1em; /* 16 */
	font-weight:bold;
	/*line-height: 2em;*/ /* 60 (24) */
	text-align: center;
	text-decoration:none;
	}

/* second level */
#nav li ul a {
	font-size: 0.875em; /* 14 */
	border-top: 1px solid #ffffff;
	padding: 0.4em 0.3em; /* 15 (20) */
	text-decoration:none;
	}

/*定義英文字目錄字體大小*/
#enmenu_word  { font-size:0.9em; line-height:1.2em;}	
}


/*小於65０px*/
@media screen and (max-width: 650px) {
html {font-size: 90%; /* 14 */} 

#nav {
	position: relative;
	top: auto;
	left: auto;
	margin:0;
	background-color: transparent;
	z-index:999;
	}
#nav > a { /*左上角目錄方塊大小*/
	width: 3.125em; /* 50 */
	height: 3.125em; /* 50 */
	text-align: left;
	text-indent: -9999px;
	background-color: #000000;
	position: relative;
	}
#nav > a:before,
#nav > a:after {
	position: absolute;
	border: 2px solid #fff;
	top: 35%;
	left: 25%;
	right: 25%;
	content: '';
	}

#nav > a:after {top: 60%;}

#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type {display: block;}

/* first level */
#nav > ul {
	width:100%;
	height: auto;
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	background-color: #000000;
	}

#nav:target > ul {display: block; z-index:999;}
#nav > ul > li {
	width: 100%;
	float: none;
	}
#nav > ul > li > a {
	height: auto;
	font-weight:bold;
	line-height: 2em; /* 60 (24) */
	text-align: left;
	padding: 0.5em 0.833em; /* 20 (24) */
	}
#nav > ul > li:not( :last-child ) > a {
	border-right: none;
	border-bottom: 1px solid #666;
	}

/* second level */
#nav li ul {
	position: static;
	padding: 1.25em; /* 20 */
	padding-top: 0;
	}
#nav li ul a {
	font-size: 1.125em; /* 18 */
	border-top: 1px solid #ffffff;
	padding: 0.4em; /* 15 (20) */
	text-align: left;
	text-decoration:none;
	}

.logo_area {
	margin-left:10px;
}
}