@charset "utf-8";
/* CSS Document */
@import url("rwd.css");

*{
	margin:0;
	padding:0;
}

body{
	font-family: 'Times New Roman', 'Noto Serif TC', serif;
	background: #d9e0d9;
}

/*header*/
header{
	width:100%;
	height: 80px;
	position: relative;
	background: rgba(56,74,58,.8);
	box-sizing:border-box;
	margin:auto;
	
	position: -webkit-sticky;/* Safari */ 
	position: sticky;
	top: 0;
	z-index: 2000;
}

.h_box{
	width:100%;
	height: 80px;
	margin: 0;
}

.h_box img{ 
	float:left; 
} 

.menu{
	display:block;
	position:absolute;
	right:20px;
	top:20px;
	width:30px;
	height:30px;
	font-size:30px;
	color: #FFf;
}

.menu:hover{
	cursor:pointer;
}
/*nav bar*/
nav{ 
	width:100%; 
	text-align:center;
	background:rgba(56,74,58,1); 
	position: relative;
	z-index: 10000;
	margin: auto;
	text-align: center;
	
}

nav ul{
	margin: 0; 
	padding: 0;
	text-align: center;
}

nav li{
	display: block;
	border-bottom:solid rgba(242, 242, 242, 1) 1px; /*有底線才會分開*/
}

nav li a{
	display: inline-block;
	width:100%; 
	padding:20px 30px;
	color: #FFF;
	text-decoration: none;
}

nav li a:hover{
	color: #FFB300;
}
/*section*/
section{
	width: 80%;
	margin: auto;
	-webkit-column-count: 1;/* Chrome, Safari, Opera */
	-moz-column-count: 1;/* Firefox */
	column-count: 1;/*正常只要這兩行*/ /*欄位數*/
	-webkit-column-gap: 20px;/* Chrome, Safari, Opera */
	-moz-column-gap: 20px;/* Firefox */
	column-gap: 20px;/*正常只要這兩行*/ /*欄之間距*/
}

.box{
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	background: rgba(255,255,255,1);
	margin: 12px 0px 0px;/*上 左右 下*/
	z-index: 10;/*版面順序*/
	/*box-shadow: 2px 2px 8px rgba(173,181,189,1);*/
	border-radius: 10px;/*圓角*/
	overflow: hidden;
}

.box:hover{
	cursor: pointer;
}

.imgbox{
	width: 100%;
	overflow: hidden;
}

/*Scale effect*/
.box .imgbox img{/*控制在imgbox中的img*/
	float: left;/*如果沒放，overflow:hidden會沒有用(放大會超過容器，鎖不住)*/
	width: 100%;
	/*scale 縮放*/
	transform: scale(1,1);/* Standard syntax */
	-ms-transform: scale(1,1);/* IE 9 */
	-webkit-transform: scale(1,1);/* Safari *//*scale縮放(x軸,y軸)比例*/
	
	
	transition: transform 1s;/*動態設定*/
	-webkit-transition: transform 1s;
	
	transition-timing-function: ease-in-out;/*動畫方式*/
	-webkit-transition-timing-function: ease-in-out;/* Safari */
}

.box:hover .imgbox img{
	transform: scale(1.2,1.2);/* Standard syntax *//*變大1.2倍*/
	-ms-transform: scale(1.2,1.2);/* IE 9 */
	-webkit-transform: scale(1.2,1.2);/* Safari */
	
}

.box h3{
	font-variant: small-caps;
	box-sizing: border-box;
    font-size: 23px;
	padding: 10px 20px;
	color: #FFB300;
}

.box h5{
	box-sizing: border-box;
	padding: 0px 20px;
	color: rgba(56,74,58,1);
	line-height: 25px;
	text-align: justify;
	text-justify:inter-ideograph;
}


.head{
	padding: 0px 20px 20px;
}

.head span{
	font-size: 13px;
	color:rgba(56,74,58,1);
	line-height: 10px;
	margin-top: 20px;
	text-align: center;
}
/*==============footer===============*/
footer{
	clear:both;
	padding:20px 0px;
	text-align:center;
	color: #384A3A;
}

/*==============other rwd===============*/
@media only screen and (min-width: 768px) {

.menu{
	display:none;	
}

nav{ 
	width:100%; 
	padding: 10px;
	z-index: 10000;
	margin: auto;
	text-align: center;
	background:none;

}

nav li{
	display: inline-block;
	border-bottom: none;
}


.ch_bg{
	color: #FFB300;
}

.strain a{
	color: #FFB300;
}

/*section*/
section{
	width: 80%;
	margin: auto;
	-webkit-column-count: 3;/* Chrome, Safari, Opera */
	-moz-column-count: 3;/* Firefox */
	column-count: 3;/*正常只要這兩行*/ /*欄位數*/
	-webkit-column-gap: 20px;/* Chrome, Safari, Opera */
	-moz-column-gap: 20px;/* Firefox */
	column-gap: 20px;/*正常只要這兩行*/ /*欄之間距*/
}
	
.box h5{
	box-sizing: border-box;
	padding: 0px 20px;
	color: rgba(56,74,58,1);
	line-height: 25px;
	text-align: justify;
	text-justify:inter-ideograph;
}

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

}