*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:"Microsoft JhengHei";
line-height:1.8;
color:#333;
}

img{
width:100%;
display:block;
}

a{
text-decoration:none;
}

.container{
width:90%;
max-width:1600px;
margin:auto;
}

#header{
background:#fff;
position:fixed;
width:100%;
top:0;
z-index:99;
box-shadow:0 0 15px rgba(0,0,0,.08);
}

#header .container{
display:flex;
justify-content:space-between;
align-items:center;
height:100px;
}

.logo img{
height:80px;
width:auto;
}

nav ul{
display:flex;
gap:40px;
list-style:none;
}

nav a{
color:#333;
font-weight:600;
}

.banner{
position:relative;
height:110vh;
overflow:hidden;
padding-bottom: 0;
}

.banner img{
height:100%;
object-fit:cover;
}

.bannerTxt{
position:absolute;
left:10%;
top:50%;
transform:translateY(-50%);
color:#fff;
}

.bannerTxt span{
letter-spacing:3px;
}

.bannerTxt h1{
font-size:60px;
/*margin:15px 0;*/
}

.btn{
display:inline-block;
background:#6e9c53;
color:#fff;
padding:12px 35px;
border-radius:50px;
margin-top:20px;
}

section{
padding:50px 0;
}

.titleBox{
text-align:center;
margin-bottom:60px;
}

.titleBox span{
color:#6e9c53;
}

.titleBox h2{
font-size:40px;
}

.about{
	padding:100px 0;
	background:#faf8f3;
}

.aboutContent{
	display:flex;
	align-items:center;
	gap:60px;
}

.aboutContent .img,
.aboutContent .txt{
	flex:1;
}

.aboutContent .img img{
	border-radius:20px;
	box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.aboutContent .subtitle{
	font-size:16px;
	letter-spacing:2px;
	color:#6b8c3c;
	font-weight:700;
	margin-bottom:15px;
}

.aboutContent p{
	margin-bottom:20px;
	line-height:2;
	color:#555;
}

.aboutList{
	list-style:none;
	margin:30px 0;
	padding:0;
}

.aboutList li{
	margin-bottom:12px;
	font-size:16px;
	color:#333;
	font-weight:500;
}

.aboutBtn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:15px 35px;
	background:#6b8c3c;
	color:#fff;
	border-radius:50px;
	font-weight:700;
	transition:.3s;
	box-shadow:0 10px 25px rgba(107,140,60,.25);
}

.aboutBtn:hover{
	background:#4f6f27;
	transform:translateY(-3px);
	box-shadow:0 15px 30px rgba(107,140,60,.35);
}

.aboutBtn:after{
	content:"→";
	margin-left:10px;
	transition:.3s;
}

.aboutBtn:hover:after{
	transform:translateX(5px);
}

.foodList{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.foodList .item{
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.foodList h3{
padding:20px;
text-align:center;
}

.contactMap {
	padding-bottom: 0;
}

.contactMap iframe{
width:100%;
height:500px;
border:none;
}

footer{
background:#30442a;
color:#fff;
padding:60px 0;
text-align:center;
}










.menuBtn{
display:none;
background:none;
border:none;
}

.menuBtn span{
display:block;
width:30px;
height:3px;
background:#333;
margin:6px 0;
}



/* 平板 */
@media (max-width:768px){

	.titleBox{
		margin-bottom:40px;
	}

	.titleBox span{
		font-size:14px;
		letter-spacing:2px;
		margin-bottom:8px;
	}

	.titleBox h2{
		font-size:32px;
	}

}


/* 手機 */
@media (max-width:480px){

	.titleBox{
		margin-bottom:30px;
		padding:0 15px;
	}

	.titleBox span{
		font-size:14px;
		letter-spacing:2px;
	}

	.titleBox h2{
		font-size:26px;
		line-height:1.4;
	}

}


@media(max-width:1280px){
.foodList{
grid-template-columns:repeat(3,1fr);
}
}


@media(max-width:768px){

.menuBtn{
display:block;
}

#header .container {
	height: 80px;
}

nav{
position:fixed;
top:80px;
left:-100%;
width:100%;
background:#fff;
transition:.3s;
}

nav.active{
left:0;
}

nav ul{
flex-direction:column;
padding:30px;
gap:20px;
}

.bannerTxt h1{
font-size:36px;
}

.foodList{
grid-template-columns:1fr;
}


.banner{
height:35vh;
padding: 80px 0 0 0;
}



}








/* =========================
   RWD
========================= */

@media (max-width:1024px){

	.about{
		padding:80px 0;
	}

	.aboutContent{
		gap:40px;
	}

}

@media (max-width:768px){

	.about{
		padding:70px 0;
	}

	.aboutContent{
		flex-direction:column;
		gap:35px;
	}

	.aboutContent .img{
		order:1;
		width:100%;
	}

	.aboutContent .txt{
		order:2;
		width:100%;
	}

	.aboutContent .img img{
		width:100%;
		display:block;
	}

	.aboutContent .subtitle{
		font-size:16px;
		letter-spacing:1px;
		text-align:center;
	}

	.aboutContent p{
		font-size:16px;
		line-height:1.9;
		text-align:justify;
	}

	.aboutList{
		margin:25px 0;
	}

	.aboutList li{
		font-size:15px;
		margin-bottom:10px;
	}

	.aboutBtn{
		width:100%;
		max-width:320px;
		margin:auto;
		display:flex;
	}

}

@media (max-width:480px){

	.about{
		padding:60px 0;
	}

	.aboutContent{
		gap:25px;
	}

	.aboutContent .img img{
		border-radius:15px;
	}

	.aboutContent p{
		font-size:16px;
		line-height:1.8;
	}

	.aboutList li{
		font-size:16px;
	}

	.aboutBtn{
		padding:14px 20px;
		font-size:16px;
	}

}












.feature{
	background:#f7f8f2;
	padding:100px 0;
	position:relative;
	overflow:hidden;
}

.featureList{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:25px;
}

.featureList .item{
	background:#fff;
	padding:42px 28px;
	text-align:center;
	border-radius:22px;
	box-shadow:0 12px 35px rgba(0,0,0,.06);
	transition:.3s;
	position:relative;
	overflow:hidden;
}

.featureList .item:before{
	content:"";
	position:absolute;
	right:-35px;
	top:-35px;
	width:90px;
	height:90px;
	background:rgba(110,156,83,.1);
	border-radius:50%;
}

.featureList .item:hover{
	transform:translateY(-8px);
	box-shadow:0 18px 45px rgba(0,0,0,.1);
}

.featureList .icon{
	width:76px;
	height:76px;
	margin:0 auto 24px;
	background:#edf3e7;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
	z-index:2;
}

.featureList .icon svg{
	width:38px;
	height:38px;
	fill:none;
	stroke:#6e9c53;
	stroke-width:3;
	stroke-linecap:round;
	stroke-linejoin:round;
}

.featureList h3{
	font-size:22px;
	color:#2f3b25;
	margin-bottom:15px;
}

.featureList p{
	font-size:15px;
	color:#666;
	line-height:1.9;
	text-align:left;
}



@media(max-width:1024px){

	.featureList{
		grid-template-columns:repeat(2,1fr);
	}

}

@media(max-width:768px){

	.feature{
		padding:70px 0;
	}

	.featureList{
		gap:20px;
	}

	.featureList .item{
		padding:35px 25px;
	}

	.featureList h3{
		font-size:20px;
	}

}

@media(max-width:480px){

	.feature{
		padding:60px 0;
	}

	.featureList{
		grid-template-columns:1fr;
	}

	.featureList .icon{
		width:68px;
		height:68px;
		margin-bottom:20px;
	}

	.featureList .icon svg{
		width:34px;
		height:34px;
	}

	.featureList .item{
		padding:32px 22px;
		border-radius:18px;
	}

	.featureList p{
		font-size:14px;
		line-height:1.8;
	}

}











.news{
	padding:100px 0 50px 0;
	/*background:#faf8f3;*/
}

.newsList{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:35px;
}

.newsList .item{
	background:#fff;
	border-radius:20px;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,.08);
	transition:.3s;
}

.newsList .item:hover{
	transform:translateY(-8px);
	box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.newsList .img{
	overflow:hidden;
}

.newsList .img img{
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	transition:.5s;
}

.newsList .item:hover img{
	transform:scale(1.05);
}

.newsList .txt{
	padding:30px;
}

.newsList .date{
	font-size:12px;
	font-weight:700;
	letter-spacing:2px;
	color:#6e9c53;
	margin-bottom:12px;
}

.newsList h3{
	margin-bottom:15px;
}

.newsList h3 a{
	color:#222;
	font-size:24px;
	line-height:1.4;
}

.newsList p{
	color:#666;
	line-height:1.9;
	margin-bottom:25px;
}

.newsList .more{
	display:inline-flex;
	align-items:center;
	padding:12px 24px;
	background:#6e9c53;
	color:#fff;
	border-radius:50px;
	font-size:14px;
	font-weight:700;
	transition:.3s;
}

.newsList .more:hover{
	background:#55793d;
}

.newsList .more:after{
	content:"→";
	margin-left:8px;
}



@media(max-width:768px){

	.news{
		padding:70px 0;
	}

	.newsList{
		grid-template-columns:1fr;
		gap:25px;
	}

	.newsList .txt{
		padding:25px;
	}

	.newsList h3 a{
		font-size:20px;
	}

}

@media(max-width:480px){

	.newsList .txt{
		padding:20px;
	}

	.newsList h3 a{
		font-size:18px;
	}

	.newsList p{
		font-size:14px;
	}

}










.inbanner{
	position:relative;
	/*height:380px;*/
	overflow:hidden;
padding: 100px 0 0 0;
}

.inbanner img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.inbanner::before{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.35);
}

.inbanner .bannerTxt{
	position:absolute;
	left:50%;
	top:55%;
	transform:translate(-50%,-50%);
	text-align:center;
	color:#fff;
	width:90%;
	max-width:1000px;
	z-index:2;
}

.inbanner span{
	display:inline-block;
	letter-spacing:4px;
	font-size:14px;
	color:#cde2b3;
	margin-bottom:10px;
}

.inbanner h1{
	font-size:48px;
	margin-bottom:15px;
	text-shadow:0 3px 15px rgba(0,0,0,.5);
}

.inbanner p{
	font-size:18px;
	line-height:1.8;
	text-shadow:0 3px 15px rgba(0,0,0,.5);
}



@media(max-width:768px){

.inbanner{
	height:350px;
padding: 80px 0 0 0;
}

.inbanner h1{
	font-size:30px;
}

.inbanner p{
	font-size:15px;
	line-height:1.7;
}

.inbanner .bannerTxt {
	top:60%;
}

}