@charset "utf-8";


body img{
	outline-width:0px;  
    vertical-align:top; }
a { text-decoration:none;}


/*======
*/
/*==========================================
stage設定 , 在 @media only screen and (min-width: 961px) {}中, 可將寬度固定為960px 
===========================================*/
#stage{
	overflow:hidden;
	width:100%;
	margin-left: auto;
	margin-right:auto;	
	}


/*-----------------------------*/ 

#district_service{
	display:block;
	position: relative; 
	width: 100%;
	height:1100px;; /*--高度設定-------*/ /*---背景顏色-------*/ 
	background-image:url(../images/district_service_bg.jpg); 
	 background-size:cover;
	 /*---	 background-size:cover;
	 background-size:contain;
	 background-size:900px 600px;
	 background-size:40% 60%;
	 
	 --*/ background-position:center;  /*---背景底圖 置中對齊---*/ 
	
	/*---
	background-position:right bottom;　
	背景底圖 靠右下對齊---*/ 	
	background-attachment: fixed;	
	
	
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 2px;
	
}



#district_service_2{ 
	max-width:1500px;/*---此數值可調整版面寬度---*/  /*---此設定最大寬度和寫margin是框架置中寫法-------*/ margin: 0 auto; /*---此設定最大寬度和寫margin是使框架置中的寫法-------*/ 
	
}


/*==========================================
content area -> WORKS
===========================================*/


#district_service_work article { /*---欄位-------*/
    text-align: center;
    width: 60%;/*---article裡 width的%數為設定 欄位的數目-------*/
    float: left; /*---此指令要寫----*/
    margin-left: 16.5%;
    margin-right: 0%;/*---用以上的三數值調整版面和欄位寬度-------*/
    margin-bottom: 50px;
    /*---article裡 欄位框線
  border:#666666 1px solid;  z-index:100; -------*/ 
  
  /*  border-radius: 15px ;*/
    background-color: #eeeeee;
    background-size: cover;  /*---背景底圖的縮放模式---*/
    background-position: center;  /*---背景底圖 置中對齊---*/
/*---
	border-width:3px;
	border-style:solid;
	border-color:#333333;
    ----*/ 
	border: 10px solid #FFFFFF;  
    box-shadow: 0 0 0 3px #dad7d7;
   /*---
    box-shadow: 0 0 0 10px #d1f3ef, 0 0 0 20px #c8e1ff, 0 0 0 30px #efc9f7;
	  ----*/ 
	
    border-radius: 25px;
	}

span{}

#district_service_work article img {
 /*------注意此也可寫入 width: 100%;----------*/ 
  height: auto;
  /*max-width:184px; /*此可微調圖片大小*/
  width:230px;
  margin-top:1px;
  margin-bottom:1px;
}	
/*----------------*/ 

#district_service_work article h3 {
  text-align:center;
  /*font-weight: bold;*/ 
  line-height:20px;
}
#district_service_work article p {
  text-align:center;
  font-size:14px; 
  line-height:18px;
  padding:15px 15px;
}


#district_service_work article p span{
	font-weight:bold;
	color:#F00;
	margin-top:10px;
	
}


   /* 字體區調整*/  
.district_service_word01{	width:100%;   
	  }
  

#district_service_work{padding-left:0%; }/*--版面左邊距離的微調--*/ 
#district_service_work { /*----------*/ /*----------*/
 padding-top:20px; /*--調整work區域 (在畫面上的 高度位置)-----*/ width:95%;
margin: 0 auto; /*--版面左邊距離的微調--*/ 


}


/*------------*/ 

.district_service_cf{
	 height:370px;
	 }	

   
.district_service_cf01{
	 height:240px;
	 }	 
.district_service_cf02{
	 height:240px;
	 }	 
.district_service_cf03{
	 height:240px;
	 }	 
.district_service_cf04{
	 height:280px;
	 }	 	 
.district_service_cf05{
	 height:195px;
	 }	 
.district_service_cf06{
	 height:195px;
	 }	 
.district_service_cf07{
	 height:195px;
	 }	 
.district_service_cf08{
	 height:195px;
	 }	 
	 	 


.district_service_tab3_li1{
    display: block;
    width: 84%;
    height: auto;
    line-height: 32px;
      margin-top: 170px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;  /* 置中對齊*/
    text-align: center; /* 文字置中*/
    font-size: 18px;
    color: #FFFFFF;
    background-color: #8b0f19;
    padding: 8px 0px 8px 0px;  /* 重要*/
    font-weight: 300;
    font-family: "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
    opacity: 0.8;
  
	}
	
.district_service_tab3_li1 span{	font-size:18px;	}		
	
	
.district_service_tab3_li2
{		display:block;
	    width:75%;
	    height:30px;

     /* border-radius: 15px ;   圓角指令*/
     margin: 0 auto;  /* 置中對齊*/
	 text-align:left; /* 文字置左*/
	font-size:16px;
	color:#000000;

	padding:3px 0px 5px 0px;  /* 重要*/
	font-weight:300;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;}
.district_service_tab3_li3
{	 }

/*---------*/  

#district_service_title01{
	display:block;
	margin: 0 auto;
	text-align:center;
	width:90%;
	height:auto;
	font-size:30px;
		color:#333333;

	padding:50px 0px 30px 0px;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
	}

#district_service_title02{
	display:block;
	margin: 0 auto;
	text-align:center;
	width:95%;
	height:auto;
	font-size:16px;
	color:#333333;
	padding:15px 0px 15px 0px;
	line-height:36px;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;

	}



/*---------*/    
/*=======★★★★★★★★★★★★★★★★★★★★★★===========*/ 
/*---------transform屬性設定-----------------------*/
/*----------
.district_service_cf{
	transition:all 500ms 0s ease-in-out ; 
	transition-duration: 300ms; 
	transition-delay: 0s; 
	
	opacity:1 ;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);	
	transform:scale(1) ; 
	background-image:url(../images/district_service_btn_bg.jpg);  }
			 
.district_service_cf:hover{ 
	opacity:0.8;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_service_btn_bg2.jpg);  }		
	
.district_service_cf .district_service_tab3_li1{
	 
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;
	 width:84%;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 10px ;	
	}	
		
.district_service_cf:hover .district_service_tab3_li1{ 
    width:80%;
	color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	}	

-------*/

/*---<第一個按鈕>---------------------------*/	 
.district_service_cf01{
	transition:all 500ms 0s ease-in-out ; 
	transition-duration: 500ms; 
	transition-delay: 0s; 
	
	opacity:1 ;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);	
	transform:scale(1) ; 
	background-image:url(../images/district_service_btn_bg01_01.jpg);  }
			 
.district_service_cf01:hover{ 
	cursor: default;/*--滑鼠游標形狀-----*/ 
    opacity:1 ;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_service_btn_bg01_02.jpg);  }		
	
.district_service_cf01 .district_service_tab3_li1{
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 0px ;	
	}	
		
.district_service_cf01:hover .district_service_tab3_li1{ 
	cursor: default;/*--滑鼠游標形狀-----*/ 
    color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	}	

/*---<第二個按鈕>----------------------*/
.district_service_cf02{
	transition:all 500ms 0s ease-in-out ; 
	transition-duration: 300ms; 
	transition-delay: 0s; 
	
	opacity:1 ;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);	
	transform:scale(1) ; 
	background-image:url(../images/district_service_btn_bg02_01.jpg);  }
			 
.district_service_cf02:hover{ 
	cursor: default;/*--滑鼠游標形狀-----*/ 
    opacity:1 ;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_service_btn_bg02_02.jpg);  }		
	
.district_service_cf02 .district_service_tab3_li1{
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 0px ;	
	}	
		
.district_service_cf02:hover .district_service_tab3_li1{ 
	cursor: default;/*--滑鼠游標形狀-----*/ 
    color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	}	 
	
 	 	
/*---<第三個按鈕>---------------------*/	 
.district_service_cf03{
	transition:all 500ms 0s ease-in-out ; 
	transition-duration: 300ms; 
	transition-delay: 0s; 
	
	opacity:1 ;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);	
	transform:scale(1) ; 
	background-image:url(../images/district_service_btn_bg03_01.jpg);  }
			 
.district_service_cf03:hover{ 
	cursor: default;/*--滑鼠游標形狀-----*/ 
    opacity:1 ;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_service_btn_bg03_02.jpg);  }		
	
.district_service_cf03 .district_service_tab3_li1{
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 0px ;	
	}	
		
.district_service_cf03:hover .district_service_tab3_li1{ 
	cursor: default;/*--滑鼠游標形狀-----*/ 
    color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	}

/*---<第四個按鈕>-------------------------  	 
.district_service_cf04{
	transition:all 500ms 0s ease-in-out ; 
	transition-duration: 300ms; 
	transition-delay: 0s; 
	
	opacity:1 ;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);	
	transform:scale(1) ; 
	background-image:url(../images/district_service_btn_bg.jpg);  }
			 
.district_service_cf04:hover{ 
	opacity:0.8;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_service_btn_bg2.jpg);  }		
	
.district_service_cf04 .district_service_tab3_li1{
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 0px ;	
	}	
		
.district_service_cf04:hover .district_service_tab3_li1{ 
	color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	} 

----*/

 /*=======★★★★★★★★★★★★★★★★★★★★★★===========*/    
   /*--------------------------------*/ 	

/*---------*/ 



.text_ctrl01{
	font-size:16px;
	letter-spacing:1px;}

/*---------*/    


.district_service_cf03{	
	clear: both;/*避免文繞圖指令,此為對第三article區塊下指令,和clear:none;取消文繞圖指令互相配合*/
		}

/*------------------------------------------------------------------------------------------*/ 
/*------------------------------------------------------------------------------------------*/ 

/* 電腦版的版型設定：769px～960px */

@media only screen and (min-width: 767px) { 



	#stage{	
	width:100%;
	margin-left: auto;
	margin-right:auto;	
	background-repeat:repeat-x;
		
	}		
		


#district_service{
	height:1800px; /*--高度設定-------*/ }






#district_service_work{padding-left:0%;}/*--版面左邊距離的微調--*/ 
#district_service_work { /*----------*/ /*----------*/
 padding-top:90px; /*--調整work區域 (在畫面上的 高度位置)-----*/ width:90%;
margin: 0 auto; /*--版面左邊距離的微調--*/ 


}


.district_service_cf{
	 height:500px;
	 }	


.district_service_cf01{
	 height:400px;
	 }	 
.district_service_cf02{
	 height:400px;
	 }	 
.district_service_cf03{
	 height:400px;
	 }	 
.district_service_cf04{
	 height:400px;
	 }	 	 
.district_service_cf05{
	 height:265px;
	 }	 
.district_service_cf06{
	 height:265px;
	 }	 
.district_service_cf07{
	 height:265px;
	 }	 
.district_service_cf08{
	 height:265px;
	 }	 


	 	 
/*---------*/    

.district_service_tab3_li1{
    display: block;
    width: 84%;
    height: auto;
    line-height: 36px;
    margin-top: 300px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;  /* 置中對齊*/
    text-align: center; /* 文字置中*/
    font-size: 25px;
    color: #FFFFFF;
    background-color: #8b0f19;
    padding: 12px 0px 12px 0px;  /* 重要*/
    font-weight: 300;
    font-family: "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
}
	
.district_service_tab3_li1 span{	font-size:22px;	}		
	
.district_service_tab3_li2
{		display:block;
	    width:75%;
	    height:30px;

     /* border-radius: 15px ;   圓角指令*/
     margin: 0 auto;  /* 置中對齊*/
	 text-align:left; /* 文字置左*/
	font-size:25px;
	line-height:36px;
	color:#000000;

	padding:20px 0px 8px 0px;  /* 重要*/
	font-weight:300;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;}
.district_service_tab3_li3
{	 }

/*---------*/  

#district_service_title01{
	display:block;
	margin: 0 auto;
	text-align:center;
	width:70%;
	height:auto;
	font-size:50px;
		color:#333333;

	padding:110px 0px 30px 0px;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
	}

#district_service_title02{
	display:block;
	margin: 0 auto;
	text-align:center;
	width:95%;
	height:auto;
	font-size:25px;
	color:#333333;
	padding:15px 0px 15px 0px;
	line-height:50px;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;

	}

/*---------*/ 
/*---------*/  
/*---------*/    
.text_ctrl01{
	font-size:22px;
	letter-spacing:1px;}



#district_service_work article h3 {
  
}
#district_service_work article p {
  text-align:center;
  line-height:18px;
  padding: 0 15px;
}

#district_service_work article p span{
	color:#F00;  
}



#district_service_work article { /*---二欄位-------*/ 
text-align: center;
  width: 60%;/*---article裡 width的%數為設定 欄位的數目-------*/ 
  float: left; /*---此指令要寫----*/ 
	margin-left:17%;
	margin-right:0%;/*---用以上的三數值調整版面和欄位寬度-------*/ 
	margin-bottom:70px;	

  
  /*---article裡 欄位框線
  border:#666666 1px solid;  z-index:100; -------*/ 
  
  /*  border-radius: 15px ;*/
	background-color:#eeeeee;
	
	background-size:cover;  /*---背景底圖的縮放模式---*/ 
	background-position:center;  /*---背景底圖 置中對齊---*/ 
	/*---
	border-width:3px;
	border-style:solid;
	border-color:#333333;
    ----*/ 
	border: 10px solid #FFFFFF;  
    box-shadow: 0 0 0 3px #dad7d7;
   /*---
    box-shadow: 0 0 0 10px #d1f3ef, 0 0 0 20px #c8e1ff, 0 0 0 30px #efc9f7;
	  ----*/ 
	
	border-radius: 25px ;
}





  
#district_service_work article img {
 /*------注意此也可寫入 width: 100%;----------*/ 
  height: auto;
  /*max-width:184px; /*此可微調圖片大小*/
  width:320px;
  margin-top:0px;
  margin-bottom:0px;
}	
/*----------------*/ 

	  
   /* 字體區調整*/  
  .district_service_word01{
		width:100%;
	  }
  

}



/*------------------------------------------------------------------------------------------*/ 
/*------------------------------------------------------------------------------------------*/ 

/* 電腦版型設定：961px以上固定版型 */
@media only screen and (min-width: 961px) {


  #stage{	
	width:100%;
	margin-left: auto;
	margin-right:auto;	
	background-repeat:repeat-x;
	 	
	}
   

#district_service{

	height:800px; /*--高度設定-------*/ }	

#district_service_work article {
	 /*---四欄位-------*/ 	
    width: 18%;/*---article裡 width的%數為設定 欄位的數目-------*/ 
	float: left; /*---此指令要寫----*/ 
	margin-left:9%;
	margin-right:0%;/*---用以上的三數值調整版面和欄位寬度-------*/ /*  border-radius: 15px ;*/
	background-color:#eeeeee;
	margin-bottom:30px;	
    /*---
	border-width:3px;
	border-style:solid;
	border-color:#333333;
    ----*/ 
	border: 10px solid #FFFFFF;  
    box-shadow: 0 0 0 3px #dad7d7;
   /*---
    box-shadow: 0 0 0 10px #d1f3ef, 0 0 0 20px #c8e1ff, 0 0 0 30px #efc9f7;
	  ----*/ 
	
  }
.district_service_cf{
	 height:300px;
	 }	


 
.district_service_cf01{
	 height:300px;
	 }	 
.district_service_cf02{
	 height:300px;
	 }	 
.district_service_cf03{
	 height:300px;
	 }	 
.district_service_cf04{
	 height:300px;
	 }	 	 
.district_service_cf05{
	 height:300px;
	 }	 
.district_service_cf06{
	 height:300px;
	 }	 
.district_service_cf07{
	 height:300px;
	 }	 
.district_service_cf08{
	 height:300px;
	 }	 
	 	 

	
.district_service_tab3_li1{
    display: block;
    width: 84%;
    height: auto;
    line-height: 36px;
    margin-top: 220px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;  /* 置中對齊*/
    text-align: center; /* 文字置中*/
    font-size: 25px;
    color: #FFFFFF;
    background-color: #8b0f19;
    padding: 8px 0px 8px 0px;  /* 重要*/
    font-weight: 300;
    font-family: "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
}
	
.district_service_tab3_li1 span{	font-size:22px;	}	
	
	
.district_service_tab3_li2
{		display:block;
	    width:75%;
	    height:30px;

     /* border-radius: 15px ;   圓角指令*/
     margin: 0 auto;  /* 置中對齊*/
	 text-align:left; /* 文字置左*/
	font-size:18px;
	color:#000000;

	padding:15px 0px 8px 0px;  /* 重要*/
	font-weight:300;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;}
.district_service_tab3_li3
{	 }
/*---------*/  

#district_service_title01{
	display:block;
	margin: 0 auto;
	text-align:center;
	width:70%;
	height:auto;
	font-size:60px;
	color:#333333;
	padding:110px 0px 30px 0px;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
	}

#district_service_title02{
	display:block;
	margin: 0 auto;
	text-align:center;
	width:95%;
	height:auto;
	font-size:25px;
	color:#333333;
	padding:15px 0px 15px 0px;
	line-height:50px;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;

	}
#district_service_title02 span {
    font-weight: bold;
    font-size: 28px;
}


/*---------*/ 
/*---------*/    

	
	.district_service_cf03{
	
	clear:none;/*避免文繞圖指令,此為對第三article區塊下指令,和clear:none;取消文繞圖指令互相配合*/
	
	}
	
/* 圖片調整*/ 	
#district_service_work article img {
 /*------注意此也可寫入 width: 100%;----------*/ 
  height: auto;
  /*max-width:184px; /*此可微調圖片大小*/
  width:230px;
  margin-top:1px;
  margin-bottom:1px;
}	
/*----------------*/ 	
	
#district_service_2 {
  
  }
  
  
#district_service_work{
    padding-left: 3%;
}
#district_service_work {
	padding-top:100px; /*--調整work區域 (在畫面上的 高度位置)-----*/ 
	width:100%;


	margin: 0 auto; /*--版面左邊距離的微調--*/ 


}
  

       
  
#district_service_work article h3 {
   
  }

#district_service_work article p {

}

/* 字體區調整*/  
  .district_service_word01{
		width:100%;
	  }
 
  
}