/*container*/
	body{
		background-image:url(pic/bg.png);
		background-size:cover;
		font-family:微軟正黑體;
		height: 100%;
	}
	#id_wrapper {
		/* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
		min-height: 100%;
		/* 位置設為relative, 作為footer區塊位置的參考 */
		position: relative;
	}
	#header{
		height:80px;
		box-sizing: border-box;
	}
	#menu-wrapper{
		height:40px;
		float:none;
	}
	#banner{
		position:relative;
		margin:20px 0 0 30px;
		/* 留出header及footer區塊的空間 */
		padding-top: 15px;
		padding-bottom: 25px;
	}
	#box{
		position:absolute;
		width:120px;
		float:left;
	}
	#box1{
		position:absolute;
		width:240px;
		float:left;
		margin-left:-3.5%;
	}
	#content{
		
		margin-top:40px;
		margin-left:180px;
		line-height:25px;
		
	}
	#content1{
		
		margin-top:40px;
		margin-left:240px;
		line-height:25px;
		
	}
	/*introcontribution*/
	#content2{
		
		margin-top:30px;
		margin-left:180px;
		line-height:50px;
		
	}
	#footer{
		clear:both;
		height:20px;
		box-sizing: border-box;
		bottom: 0;
		width: 100%;/* 展開footer寬度 */
		text-align:center;
		border-top:#CCCCCC solid 1px;
	}
/*header*/
	#logo{
		color:#B96976;
		font-size:1.5em;
		margin-left:50px;
	}
	#logo a:link{
		color:#B96976;
		text-decoration:none;
	}
	#logo a:visited{
		color:#B96976;
		text-decoration:none;
	}
	#logo a:hover{
		color:#F9A8AC;
		text-decoration:none;
	}
	#logo a:active{
		color:#F9A8AC;
		text-decoration:none;
	}
/*menu*/
	#menu {
	  width:1200px;
	}
	#menu ul li{

		width:250px;
		text-align:center;
		list-style-type:none;
		background-color:#08252D;
		float:left; 
		border-bottom:#CCCCCC solid 1px;
		margin-right:1px;
	}
	#menu ul li a {
		
		display:block;  /* 充滿整個區塊 */
		padding:10px;
	}
	/*一般連結*/
	#menu ul li a:link {
		color:#F7F1AE;
		text-decoration:none;
		}
		/*已查閱*/
		#menu ul li a:visited {
			
			color:#F7F1AE;
			text-decoration:none;
		}
		#menu ul li a:hover {
			
			color:#F7F1AE;
			text-decoration:none;
			background-color:#3A6C79;
		}
		/*作用中*/
		#menu ul li a:active {
			
			color:#F7F1AE;
			text-decoration:none;
		}
/*box*/
	#box ul li{
		font-size:14pt;
		list-style-type:none;
		text-align:center;
		border-bottom:#CCCCCC solid 1px;
		padding:2px;
		margin-top:10px;
	}
	#box ul li a:link {
		color:#B96976;
		text-decoration:none;
	}
	#box ul li a:visited {
		color:#B96976;
		text-decoration:none;
	}
	#box ul li a:hover {
		color:#F9A8AC;
		text-decoration:none;
	}
	#box ul li a:active {
		color:#F9A8AC;
		text-decoration:none;
	}
/*box1*/
	.mainmenu ul{
		display:none;
	}
	.mainmenu li{
		font-size:14pt;
		list-style-type:none;
		border-bottom:#CCCCCC solid 1px;
		padding:2px;
		margin-top:10px;
	}
	.mainmenu li:hover .submenu{
		display: block;
	}
	.mainmenu a:link {
		display: block;
		color:#B96976;
		text-decoration:none;
	}
	.mainmenu a:visited {
		color:#B96976;
		text-decoration:none;
	}
	.mainmenu a:hover {
		color:#F9A8AC;
		text-decoration:none;
	}
	.mainmenu a:active {
		color:#F9A8AC;
		text-decoration:none;
	}
	.submenu {
		overflow:hidden;
		transition: all 0.5s ease-out;
	}
	.submenu li{
		text-align:left;
		list-style-type:none;
		border-bottom:none;
		font-size:13pt;
		font-weight:bolder;
		color:#B96976;
		text-decoration:none;
	}
	
	.submenu ul{
		display:none;
	}
	.submenu ul li{
		text-align:left;
		font-weight:normal;
	}
	nav ul li:hover >ul{
		display:block;
	}
	.now{
		color:#B96976;
		text-decoration:none;
		font-weight:bolder;
	}
/*content*/
	.header{
		margin-left:10px;
		border-left:#08252D solid 8px;
		padding-left:20px;
		color:#08252D;
	}
	.header1{
		border-left:#08252D solid 8px;
		padding-left:20px;
		color:#08252D;
	}
	h2{
		color:#08252D;
	}
	/*index*/
	.index{
		width:90%;
		margin-top:-2%;
	}
	/*introorigin*/
	.origin{
		width:75%;
	}
	/*introfeature*/
	h3{
		color:#08252D;
	}
	/*introcontribution*/
	.contribution{
		margin-top:-60px;
	}
	.size2{
		width:90%;
	}
	.size2 td{
		width:60%;
		padding-left:20px;
	}
	/*systemframe*/
	.frame img{
		width:100%;
	}
	.frame1 img{
		width:90%;
	}
	/*systemermodel*/
	.ermodel img{
		width:70%;
	}
	/*systemskill*/
	table.skill{
		width:80%;
		margin-bottom:35%;
		border-collapse:collapse;
	}
	.skill th{
		background-color:#08252D;
		border:#CCCCCC solid 1px;
		font-size:14pt;
		color:#F7F1AE;
		padding:10px;
	}
	.skill td{
		border:#CCCCCC solid 1px;
		padding:10px;
		text-align:center;
	}
	.resize2 {
		width : auto;
		width : 120px;
	}
	.resize2 {
		height : auto;
		height : 80px;
	}
	/*frontindex*/
	.frontindex pre{
		font-size:12pt;
	}
	.frontindex2 pre{
		font-size:12pt;
	}
	.frontindex2 {
		float:right;
		position:relative;
		margin-top:-57.5%;
		margin-right:-5%;
	}
	.frontindex2 img{
		width:90%;
	}
	.description li{
		list-style-image:url('pic/tab.png');
	}
	/*customizemask*/
	.title{
		font-weight:bold;
	}
	.customizemask th{
		padding:5px;
	}
	.customizemask td{
		font-size:11pt;
		padding:5px;
	}
	.resizemask{
		width : auto;
		width : 480px;
	}
	.resizemask{
		height : auto;
		height : 300px;
	}
	/*frontactivity*/
	.frontactivity{
		margin-bottom:20%;
	}
	.frontactivity th{
		padding:5px;
	}
	/*frontproduct*/
	.frontproduct th{
		padding:5px;
	}
	.resizeproduct{
		width : auto;
		width : 450px;
	}
	.resizeproduct{
		height : auto;
		height : 500px;
	}
	/*backlogin*/
	.backlogin {
		margin-bottom:25%;
	}
	.backlogin pre{
		font-size:12pt;
	}
	/*backindex*/
	.backindex2 pre{
		font-size:12pt;
	}
	/*backproduct*/
	.resizeproduct1{
		width : auto;
		width : 320px;
	}
	.resizeproduct1{
		height : auto;
		height : 550px;
	}
	/*backmember*/
	.backmember{
		margin-bottom:20%;
	}
	/*backorder*/
	.backorder{
		margin-bottom:20%;
	}
	/*backad*/
	.resizead{
		width : auto;
		width : 480px;
	}
	.resizead{
		height : auto;
		height : 300px;
	}
	.resizead1{
		width : auto;
		width : 400px;
	}
	.resizead1{
		height : auto;
		height : 500px;
	}
	/*poster*/
	.resize {
		width : auto;
		width : 340px;
	}
	.resize {
		height : auto;
		height : 480px;
	}
	/*team*/
	.size1{
		margin-left:40px;
		width:850px;
		font-size:20px;
	}
	.size1 td{
		padding:20px;
	}
	.resize1 {
		height : auto;
		width : 200px;
	}

/*footer*/
	#footer img{
		width:30px;
		height:30px;
	}