@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_caption{
	display:block;
	position: relative; 
	width: 100%;
	height:170px;; /*--高度設定-------*/ /*---背景顏色-------*/ 
	background-image:url(../images/district_caption_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_caption_2{ 
	max-width:1500px;/*---此數值可調整版面寬度---*/  /*---此設定最大寬度和寫margin是框架置中寫法-------*/ margin: 0 auto; /*---此設定最大寬度和寫margin是使框架置中的寫法-------*/ 
	
}


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


#district_caption_work article { /*---欄位-------*/
    text-align: center;
    width: 66%;/*---article裡 width的%數為設定 欄位的數目-------*/
    float: left; /*---此指令要寫----*/
    margin-left: 14%;
    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_caption_work article img {
 /*------注意此也可寫入 width: 100%;----------*/ 
  height: auto;
  /*max-width:184px; /*此可微調圖片大小*/
  width:230px;
  margin-top:1px;
  margin-bottom:1px;
}	
/*----------------*/ 

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


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


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

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


}


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

.district_caption_cf{
	 height:370px;
	 }	

/*------    
.district_caption_cf01{
	 height:280px;
	 }	 
.district_caption_cf02{
	 height:280px;
	 }	 
.district_caption_cf03{
	 height:280px;
	 }	 
.district_caption_cf04{
	 height:280px;
	 }	 	 
.district_caption_cf05{
	 height:195px;
	 }	 
.district_caption_cf06{
	 height:195px;
	 }	 
.district_caption_cf07{
	 height:195px;
	 }	 
.district_caption_cf08{
	 height:195px;
	 }	 
	 	 
-------*/    

.district_caption_tab3_li1{
	
		display:block;
	    width:84%;
	    height:auto;
		line-height:32px;
        
     
     margin: 0 auto;  /* 置中對齊*/
	 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;

	}
	
.district_caption_tab3_li1 span{	font-size:18px;	}		
	
	
.district_caption_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_caption_tab3_li3
{	 }

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

#district_caption_title01{
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 90%;
    height: auto;
    color: #FFFFFF;
    padding: 40px 0px 30px 0px;
    font-size: 22px;
    font-family: "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
    line-height: 45px;
	}

#district_caption_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_caption_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_caption_btn_bg.jpg);  }
			 
.district_caption_cf:hover{ 
	opacity:0.8;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_caption_btn_bg2.jpg);  }		
	
.district_caption_cf .district_caption_tab3_li1{
	 
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;
	 width:84%;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 10px ;	
	}	
		
.district_caption_cf:hover .district_caption_tab3_li1{ 
    width:80%;
	color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	}	


/*---<第一個按鈕>------------------------ 	 
.district_caption_cf01{
	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_caption_btn_bg.jpg);  }
			 
.district_caption_cf01:hover{ 
	opacity:0.8;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_caption_btn_bg2.jpg);  }		
	
.district_caption_cf01 .district_caption_tab3_li1{
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 0px ;	
	}	
		
.district_caption_cf01:hover .district_caption_tab3_li1{ 
	color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	}	

/*---<第二個按鈕>-----------------------
.district_caption_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_caption_btn_bg.jpg);  }
			 
.district_caption_cf02:hover{ 
	opacity:0.8;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_caption_btn_bg2.jpg);  }		
	
.district_caption_cf02 .district_caption_tab3_li1{
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 0px ;	
	}	
		
.district_caption_cf02:hover .district_caption_tab3_li1{ 
	color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	}	 
	
 	 	
/*---<第三個按鈕>------------------------	 
.district_caption_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_caption_btn_bg.jpg);  }
			 
.district_caption_cf03:hover{ 
	opacity:0.8;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_caption_btn_bg2.jpg);  }		
	
.district_caption_cf03 .district_caption_tab3_li1{
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 0px ;	
	}	
		
.district_caption_cf03:hover .district_caption_tab3_li1{ 
	color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	}

/*---<第四個按鈕>-------------------------  	 
.district_caption_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_caption_btn_bg.jpg);  }
			 
.district_caption_cf04:hover{ 
	opacity:0.8;
	box-shadow:4px 4px 3px rgba(20%,20%,40%,0);	
	transform:scale(0.95) ; 
	background-image:url(../images/district_caption_btn_bg2.jpg);  }		
	
.district_caption_cf04 .district_caption_tab3_li1{
	transition:all 0.5s ease-in-out 0s; 
    transition-duration:300ms;	
	color:#FFFFFF;	
	background-color:#8b0f19;
	border-radius: 0px ;	
	}	
		
.district_caption_cf04:hover .district_caption_tab3_li1{ 
	color:#000000;	
	background-color:#F7D36C;
    border-radius: 10px ;
	} 

----*/

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

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



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

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


.district_caption_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_caption{
	height:200px; /*--高度設定-------*/ }






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


}


.district_caption_cf{
	 height:500px;
	 }	

/*------   
.district_caption_cf01{
	 height:400px;
	 }	 
.district_caption_cf02{
	 height:400px;
	 }	 
.district_caption_cf03{
	 height:400px;
	 }	 
.district_caption_cf04{
	 height:400px;
	 }	 	 
.district_caption_cf05{
	 height:265px;
	 }	 
.district_caption_cf06{
	 height:265px;
	 }	 
.district_caption_cf07{
	 height:265px;
	 }	 
.district_caption_cf08{
	 height:265px;
	 }	 
---*/ 

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

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

     /* border-radius: 15px ;   圓角指令*/
     margin: 0 auto;  /* 置中對齊*/
	 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_caption_tab3_li1 span{	font-size:22px;	}		
	
.district_caption_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_caption_tab3_li3
{	 }

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

#district_caption_title01{
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 70%;
    height: auto;
    color: #FFFFFF;
    padding-top: 30px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 30px;
    font-size:36px;
    font-family: "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
    line-height: 75px;
	}

#district_caption_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_caption_work article h3 {
  
}
#district_caption_work article p {
  text-align:center;
  line-height:18px;
  padding: 0 15px;
}

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



#district_caption_work article { /*---二欄位-------*/ 
text-align: center;
  width: 70%;/*---article裡 width的%數為設定 欄位的數目-------*/ 
  float: left; /*---此指令要寫----*/ 
	margin-left:14%;
	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_caption_work article img {
 /*------注意此也可寫入 width: 100%;----------*/ 
  height: auto;
  /*max-width:184px; /*此可微調圖片大小*/
  width:320px;
  margin-top:0px;
  margin-bottom:0px;
}	
/*----------------*/ 

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

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

#district_caption_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_caption_cf{
	 height:300px;
	 }	


/*------  
.district_caption_cf01{
	 height:360px;
	 }	 
.district_caption_cf02{
	 height:360px;
	 }	 
.district_caption_cf03{
	 height:360px;
	 }	 
.district_caption_cf04{
	 height:360px;
	 }	 	 
.district_caption_cf05{
	 height:235px;
	 }	 
.district_caption_cf06{
	 height:235px;
	 }	 
.district_caption_cf07{
	 height:235px;
	 }	 
.district_caption_cf08{
	 height:235px;
	 }	 
	 	 
---*/  
	
.district_caption_tab3_li1{	
	display:block;
	    width:84%;
	    height:auto;
		line-height:36px; 
     /* border-radius: 15px ;   圓角指令*/
     margin: 0 auto;  /* 置中對齊*/
	 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_caption_tab3_li1 span{	font-size:22px;	}	
	
	
.district_caption_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_caption_tab3_li3
{	 }
/*---------*/  

#district_caption_title01{
    display: block;
    width: 70%;
    height: auto;
    margin: 0 auto;
    padding-top: 30px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 30px;
    font-size: 36px;
    color: #FFFFFF;
    font-family: "微軟正黑體", "Microsoft JhengHei", "新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", serif;
    text-align: center;
    letter-spacing: 4px;
    font-weight: 100;
	}

#district_caption_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_caption_title02 span {
    font-weight: bold;
    font-size: 28px;
}


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

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


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


}
  

       
  
#district_caption_work article h3 {
   
  }

#district_caption_work article p {

}

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