@charset "utf-8";


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


/*==========================================
圓角指令
===========================================*/

/*
  #ad01_menu li a,
  #ad02_menu li a,
  #ad03_menu li a  
  {	border-radius: 10px ;	    			
		}  
*/
/*==========================================
重要stage設定 , 在 @media only screen and (min-width: 961px) {}中, 將寬度固定為960px 即可
===========================================*/

#stage{
	overflow:hidden;
	width:100%;
	margin-left: auto;
	margin-right:auto;	
	}


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

#district_operating{
	display:block;
	position: relative; 
	width: 100%;
	height:auto; /*--重要-高度設定-------*/ 
	 /*---背景顏色-------*/ 
	background-image:url(../images/district_operating.jpg); 
	background-size:cover;
	 /*---背景底圖的縮放模式-----
	 background-size:cover;
	 background-size:contain;
	 background-size:800px 600px;
	 background-size:30% 70%;
	 
	 --*/ 
	background-position:center;  /*---背景底圖 置中對齊---*/ 
	
	/*---
	background-position:right bottom;　
	背景底圖 靠右下對齊	
		background-attachment: fixed; ---*/ 
	
	
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 2px;
	
}



#district_operating_2{ 
	max-width:1350px;/*---注意此數值相當重要可調整版面寬度---*/  /*---此設定最大寬度和寫margin是使框架置中的寫法-------*/ 
	margin: 0 auto; /*---此設定最大寬度和寫margin是使框架置中的寫法-------*/ 
	
}


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



#district_operating_work article { /*---一欄位-------*/ 
 transition:all 500ms 0s ease-in-out ; 
 transition-duration: 500ms; 
 transition-delay: 1s; 
  
 /*-------*/ 
    text-align: center;
  width:70%;/*---article裡 width的%數為控制 欄位的數目-------*/ 
  margin: 0 auto;  
  margin-bottom:30px; /* 微調*/ 
  /*---article裡 欄位框線
  border:#666666 1px solid;  z-index:100; -------*/ 
  	margin-bottom:30px;	
  /*  border-radius: 15px ;*/
	background-color:#eeeeee;
	
	background-size:cover;  /*---背景底圖的縮放模式---*/ 
	background-position:center;  /*---背景底圖 置中對齊---*/ 
	border-width:1px;
	border-style:outset;
	border-color:#809fb7;
}










/*--------------------------------------------*/    
/*=======★★★★★★★★★★★★★★★★★★★★★★===========*/ 
/*---------transform屬性設定-----------------------*/
/*---<第一個按鈕>-----------------------------*/    
.district_operating_cf01{
 transition:all 500ms 0s ease-in-out ; 
 transition-duration: 500ms; 
 transition-delay: 1s;
/*-- transform:scale(1) ; 
  transform: translate(0px,0px);    
 /*-------*/  
 
 opacity:1 ;
  /*--- box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); ---*/  

background-image:url(../images/district_operating_btn_bg.jpg);/* 換圖 */
  
  } 
  
.district_operating_cf01:hover{ 
 cursor: default;/*--滑鼠游標形狀-----*/ 
 opacity:0.8;
 box-shadow:4px 4px 3px rgba(20%,20%,40%,0);
   
 /*-------*/  

background-image:url(../images/district_operating_btn_bg02.jpg); /* 換圖 */ } 


.district_operating_cf01 .district_operating_tab3_li1{
 transition:all 0.5s ease-in-out 0s; 
 transition-duration:500ms;
 /*-------*/  
 color:#819fb9; 

 }  
 
.district_operating_cf01:hover .district_operating_tab3_li1{ 
    cursor: default;/*--滑鼠游標形狀-----*/ 
    color:#FFFFFF; 

 } 

/*--------------------------------------------*/ 
/*---<第二個按鈕>-----------------------------*/    
.district_operating_cf02{
 transition:all 500ms 0s ease-in-out ; 
 transition-duration: 500ms; 
 transition-delay: 1s; 
 /*-------*/  
 
 opacity:1 ;
  /*--- box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); ---*/  
 transform:scale(1) ; 
background-image:url(../images/district_operating_btn_bg.jpg);/* 換圖 */
  } 
  
.district_operating_cf02:hover{ 
 cursor: default;/*--滑鼠游標形狀-----*/ 
 opacity:0.8;
 box-shadow:4px 4px 3px rgba(20%,20%,40%,0);
 /*-------*/  
 transform:scale(0.95) ; 
background-image:url(../images/district_operating_btn_bg02.jpg); /* 換圖 */ } 


.district_operating_cf02 .district_operating_tab3_li1{
 transition:all 0.5s ease-in-out 0s; 
 transition-duration:500ms;
 /*-------*/  
 color:#819fb9; 

 }  
 
.district_operating_cf02:hover .district_operating_tab3_li1{ 
    cursor: default;/*--滑鼠游標形狀-----*/ 
    color:#FFFFFF; 

 } 

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

/*--------------------------------------------*/ 
/*---<第三個按鈕>-----------------------------*/    
.district_operating_cf03{
 transition:all 500ms 0s ease-in-out ; 
 transition-duration: 500ms; 
 transition-delay: 1s; 
 /*-------*/  
 
 opacity:1 ;
  /*--- box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); ---*/  
 transform:scale(1) ; 
background-image:url(../images/district_operating_btn_bg.jpg);/* 換圖 */
  } 
  
.district_operating_cf03:hover{ 
 cursor: default;/*--滑鼠游標形狀-----*/ 
 opacity:0.8;
 box-shadow:4px 4px 3px rgba(20%,20%,40%,0);
 /*-------*/  
 transform:scale(0.95) ; 
background-image:url(../images/district_operating_btn_bg02.jpg); /* 換圖 */ } 


.district_operating_cf03 .district_operating_tab3_li1{
 transition:all 0.5s ease-in-out 0s; 
 transition-duration:500ms;
 /*-------*/  
 color:#819fb9; 

 }  
 
.district_operating_cf03:hover .district_operating_tab3_li1{ 
    cursor: default;/*--滑鼠游標形狀-----*/ 
    color:#FFFFFF; 

 } 

/*--------------------------------------------*/ 
/*--------------------------------------------*/ 
/*---<第四個按鈕>-----------------------------*/    
.district_operating_cf04{
 transition:all 500ms 0s ease-in-out ; 
 transition-duration: 500ms; 
 transition-delay: 1s; 
 /*-------*/  
 
 opacity:1 ;
  /*--- box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); ---*/  
 transform:scale(1) ; 
background-image:url(../images/district_operating_btn_bg.jpg);/* 換圖 */
  } 
  
.district_operating_cf04:hover{ 
 cursor: default;/*--滑鼠游標形狀-----*/ 
 opacity:0.8;
 box-shadow:4px 4px 3px rgba(20%,20%,40%,0);
 /*-------*/  
 transform:scale(0.95) ; 
background-image:url(../images/district_operating_btn_bg02.jpg); /* 換圖 */ } 


.district_operating_cf04 .district_operating_tab3_li1{
 transition:all 0.5s ease-in-out 0s; 
 transition-duration:500ms;
 /*-------*/  
 color:#819fb9; 

 }  
 
.district_operating_cf04:hover .district_operating_tab3_li1{ 
    cursor: default;/*--滑鼠游標形狀-----*/ 
    color:#FFFFFF; 

 } 

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

span{}

#district_operating_work article img {
 /*------注意此也可寫入 width: 100%;----------*/ 
  height: auto;
  /*max-width:184px; /*重要,此可微調圖片大小*/
  width:210px;
  margin-top:25px;
  margin-bottom:25px;
}	
/*----------------*/ 

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


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


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

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


}



/*---------*/    
.district_operating_cf01{
	 height:335px;
	 }	 
.district_operating_cf02{
	 height:335px;
	 }	 
.district_operating_cf03{
	 height:335px;
	 }	 
.district_operating_cf04{
	 height:335px;
	 }	 	 
.district_operating_cf05{
	 height:335px;
	 }	 
.district_operating_cf06{
	 height:335px;
	 }	 
.district_operating_cf07{
	 height:335px;
	 }	 
.district_operating_cf08{
	 height:335px;
	 }	 
	 	 
/*---------*/    

.district_operating_tab3_li1{
	
		display:block;
	    width:84%;
	    height:auto;
		line-height:36px;

     /* border-radius: 15px ;   圓角指令*/
     margin: 0 auto;  /* 置中對齊*/
	 text-align:center; /* 文字置中*/
	font-size:4em;
	color:#809fb7;
	/*background-color:#2e507d;*/
	padding:60px 0px 12px 0px;  /* 重要*/
	font-weight:300;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;

	}
.district_operating_tab3_li2
{		display:block;
	    width:75%;
	    height:15px;

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

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

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

#district_operating_title01{
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 80%;
    height: auto;
    font-size: 32px;
    color: #646464;
    padding-top: 10px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 15px;
    font-family: "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
	}

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

	}





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



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

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


.district_operating_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;
	background-color: #FFFFFF; 	
	}		
		


#district_operating{
	height:1200px; /*--重要-高度設定-------*/ 
}






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


}



/*---------*/    
.district_operating_cf01{
	 height:400px;
	 }	 
.district_operating_cf02{
	 height:400px;
	 }	 
.district_operating_cf03{
	 height:400px;
	 }	 
.district_operating_cf04{
	 height:400px;
	 }	 	 
.district_operating_cf05{
	 height:265px;
	 }	 
.district_operating_cf06{
	 height:265px;
	 }	 
.district_operating_cf07{
	 height:265px;
	 }	 
.district_operating_cf08{
	 height:265px;
	 }	 
	 	 
/*---------*/    

.district_operating_tab3_li1{
	display:block;
	    width:84%;
	    height:auto;
		line-height:36px;

     /* border-radius: 15px ;   圓角指令*/
     margin: 0 auto;  /* 置中對齊*/
	 text-align:center; /* 文字置中*/
	font-size:4em;
	color:#809fb7;
	/*background-color:#2e507d;*/
	padding:60px 0px 12px 0px;  /* 重要*/
	font-weight:300;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;}
.district_operating_tab3_li2
{		display:block;
	    width:75%;
	    height:30px;

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

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

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

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

#district_operating_title02{
	display:block;
	margin: 0 auto;
	text-align:center;
	width:95%;
	height:auto;
	font-size:25px;
	color:#646464;
	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_operating_work article h3 {
  
}
#district_operating_work article p {
  text-align:center;
  line-height:18px;
  padding: 0 15px;
}

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



#district_operating_work article { /*---二欄位-------*/ 
width: 43%;/*---article裡 width的%數為控制 欄位的數目-------*/ 
	float: left; /*---此指令要寫----*/ 
	margin-left:4.1%;
	margin-right:0%;/*---注意用以上的三數值來調整版面和欄位寬度-------*/ 
	margin-bottom:30px;	
/*  border-radius: 15px ;*/
	background-color:#eeeeee;
    border-width:1px;
	border-style:outset;
	border-color:#809fb7;
}





  
#district_operating_work article img {
 /*------注意此也可寫入 width: 100%;----------*/ 
  height: auto;
  /*max-width:184px; /*重要,此可微調圖片大小*/
  width:250px;
  margin-top:20px;
  margin-bottom:20px;
}	
/*----------------*/ 

	  
   /* 字體區調整*/  
  .district_operating_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_operating{

	height:901px; /*--重要-高度設定-------*/ 
	
}	

/*---------*/    
.district_operating_cf01{
	 height:360px;
	 }	 
.district_operating_cf02{
	 height:360px;
	 }	 
.district_operating_cf03{
	 height:360px;
	 }	 
.district_operating_cf04{
	 height:360px;
	 }	 	 
.district_operating_cf05{
	 height:235px;
	 }	 
.district_operating_cf06{
	 height:235px;
	 }	 
.district_operating_cf07{
	 height:235px;
	 }	 
.district_operating_cf08{
	 height:235px;
	 }	 
	 	 
/*---------*/    

.district_operating_tab3_li1{
	
	display:block;
	    width:84%;
	    height:auto;
		line-height:36px;

     /* border-radius: 15px ;   圓角指令*/
     margin: 0 auto;  /* 置中對齊*/
	 text-align:center; /* 文字置中*/
	font-size:4em;
	color:#809fb7;
	/*background-color:#2e507d;*/
	padding:45px 0px 12px 0px;  /* 重要*/
	font-weight:300;
	font-family:"微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;}
	
	
	
	
.district_operating_tab3_li2
{		display:block;
	    width:75%;
	    height:30px;

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

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

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

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

	}

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

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


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


}
  
#district_operating_work article {
	 /*---四欄位-------*/ 	
    width: 20%;/*---article裡 width的%數為控制 欄位的數目-------*/ 
	float: left; /*---此指令要寫----*/ 
	margin-left:4%;
	margin-right:0%;/*---注意用以上的三數值來調整版面和欄位寬度-------*/ 
	/*  border-radius: 15px ;*/
	background-color:#eeeeee;
	margin-bottom:30px;	
	border-width:1px;
	border-style:solid;
	border-color:#809fb7;
	
	
	
  }
  
  
  
  
  
  
  
  
  
  
  
  
#district_operating_work article h3 {
   
  }

#district_operating_work article p {

}

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