﻿/* ---reset.css--- */
html {

    background: #ffffff;
    font-family: "Noto Sans TC","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
    -webkit-text-size-adjust: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

/* --電腦版型------------------------------------- */
@media screen and (min-width: 1025px) {/*針對桌機*/

#WRAPPER{
	 font-family: "Noto Sans TC","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
		
}

#TOP-MENU{
	display:none;
}

#TOP-MENU #BTN{}

#NAV{
	
    width: 100%;
    height: 60px;
    margin: 0 auto;
}

#NAV ul{
	list-style:none;
	float:right;
	width:100%;
	margin-right:0%;
	height:60px;
}

#NAV li{
	float:left;
	width:18%;
	margin: 0 1% 0 1%;
}

#NAV li a{
	background: #119ab3;
	display:block;
	line-height:40px;
	text-align:center;
	text-decoration:none;
	color:#ffffff;
	font-size:18px;
	
		
}

#NAV li a:hover{
	background: #6199d2;
	color: #ffffff;
	
}




}
@media only screen and (min-width: 768px) and (max-width:1024px) {/*針對平板*/
#WRAPPER{
	font-family: "Noto Sans TC","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
		
}

#TOP-MENU{
	display:none;
}

#TOP-MENU #BTN{}

#NAV{
	width:100%;
	height:60px;
	margin:0 auto;
}

#NAV ul{
	list-style:none;
	float:right;
	width:100%;
	margin-right:0%;
	height:0px;
	margin-top:10px;
}

#NAV li{
	float:left;
	width:18%;
	margin: 0 1% 0 1%;
}

#NAV li a{
	background: #119ab3;
	display:block;
	line-height:40px;
	text-align:center;
	text-decoration:none;
	color:#ffffff;
	font-size:15px;
	
		
		
}

#NAV li a:hover{
	background: #6199d2;
	color: #ffffff;
	
}
}

@media only screen and (max-width:768px) {/*針對直向平板*/
#WRAPPER{
	font-family: "Noto Sans TC","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
		
}

#TOP-MENU{
	display:none;
}

#TOP-MENU #BTN{}

#NAV{
	width:100%;
	height:40px;
	margin:0 auto;
}

#NAV ul{
	list-style:none;
	float:right;
	width:100%;
	margin-right:0%;
	height:0px;
	margin-top:10px;
}

#NAV li{
	float:left;
	width:18%;
	margin: 0 1% 0 1%;
}

#NAV li a{
	background: #119ab3;
	display:block;
	line-height:40px;
	text-align:center;
	text-decoration:none;
	color:#ffffff;
	font-size:15px;		
		
}

#NAV li a:hover{
	background: #6199d2;
	color: #ffffff;
	
}
	}




/* --手機版型------------------------------------- */

@media only screen and (max-width: 767px) {/*針對手機*/
	
	*{
		box-sizing:border-box; /* 讓 padding 與 width 解除關係 */
	}
	
	html,body{
		    font-family: "Noto Sans TC","Helvetica", "Arial","LiHei Pro","黑體-繁","微軟正黑體", sans-serif;
		-webkit-text-size-adjust:none; /* iPhone 旋轉後 文字不要放大 */
	}
	
	#WRAPPER{
		min-width:320px;
	}
		
	#TOP-MENU{
	display: block;
	width: 100%;
	margin: 0 ;
		float: left;
	height: 40px;
	position: relative; /* 外層相對 */
		
	}
	
	#TOP-MENU #BTN{  /* 製作手機版 右上角的按鈕 */
	display: block;
	width: 60px;
	height: 40px;
	background-image: url(images/index/btn.png);
	position: absolute;  /* 子層絕對 */
	right:0px;
	top: -30px;
	text-indent: -9999px;
	}
	
	#NAV{
		width:100%;
		margin:0%;
		padding: 0;
		left: 0;
		height:auto; /* 高度自動 */		
		display:none;  /* 把主選單先關掉 */
	}
	
	#NAV ul{	
		padding: 0;
		margin: 22px 0 0 0;
		list-style:none;
		width:100%;
		float: left;
		left: 0%;
		
		height:auto; /* 高度自動 */
	}
	
	#NAV li{
		left: 0%;
		width:100%;
		text-align:center;
		float:none; /* 取消 float */
	}
	
	#NAV li a{
		display:block;
		width:100%;
		height:50px;
		line-height:50px;
		text-align:center;
		
		text-decoration:none;
		background-color:#0c94b9;
		border:1px solid #FFF;
		color:#FFFFFF;
	}
	
	#NAV li a:hover{
		color:#FFFFFF;
		background-color:#6199d2;
		border:1px solid #FFF;
	}
	
	
}
