@charset "utf-8";
/*CSS Info ======================================================================
File Name: Index.css
Editor: Sophia
CreateDate:2010/12/06
Last Editor: Rebecca
LastDate: 2024/05/24
Version: 4.0
---------------------------
【 Table of Contents 】
	DIV XHTML頁面
	Free Style
	使用jQuery
=================================================================================*/

/*===============================================================================
                         以下是內頁版面設定
=================================================================================*/
#Wrap {
}

/*-----------------Header-----------------*/

#Visual {

}

#Content {
	padding: 1rem 0;
	background-image: url(../../images/index/content_BG.png);
	background-position-y: top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	margin-bottom: 10rem;
}

	h2 {
		text-align: center;
	}

.sectionSet{
	margin:2.5rem 0 1.5rem 0;
	padding:2rem 0;
}
	.sectionSet .wrapper {
		padding: 0 5rem;
	}

	.articleSet p {
		font-size: 1.2rem;
		line-height: 2rem;
	}
.moreBtnArea{
	text-align:right;
	margin-top:2rem;
}
.moreBtn {
	background-color: #7A8E49;
	border: 1px solid #7A8E49;
	color: #fff;
	font-size: 1.1rem;
	border-radius: 0;
	padding: 0.5rem 3.4rem 0.5rem 2rem;
	font-weight: normal;
	background-image: url(../../images/index/moreBtn_icon2.svg);
	background-repeat: no-repeat;
	background-size: 1.4rem;
	background-position: 7rem center;
	display: inline-block;
}

	.moreBtn:hover {
		border: 1px solid #7A8E49;
		color: #334800;
		font-weight: bold;
		background-color: #fff;
		background-image: url(../../images/index/moreBtn_icon.svg);
		background-position: 7.2rem center;
	}

	#section2 {
		position: relative;
	}

	#section2::after {
		content: '';
		display: block;
		width: 100%;
		height: 159px;
		background-image: url(../../images/index/s3_BG.png);
		background-size: 100%;
		background-position: top;
		position: absolute;
		background-repeat: no-repeat;
		bottom: -50px;
		z-index: -1;
	}

		.NewsArea {
			width: 50%;
			margin: auto;
			position: relative;
		}

	.NewsBox {
		margin: 1rem 0;
		border-bottom: 1px dashed #7A8E49;
	}
	.NewsBox .type {
		background: #F9F2D9;
		display: inline-block;
		padding: 0.5rem 1rem;
		border-radius: 50px;
		border: 1px solid #B89828;
		margin-left: 1rem;
		position: relative;
	}
		.NewsBox .type::before {
			display: inline-block;
			-webkit-font-smoothing: antialiased;
			font-family: "Font Awesome 6 Free";
			content: "\f02b";
			font-weight: 900;
			font-size: 1.25rem;
			position: absolute;
			top: -3px;
			left: -2px;
			color: #B89828;
		}

.NewsTitle {
	font-weight: bold;
	display: block;
	font-size: 1.3rem;
	line-height: 3rem;
	color: #334800;
}
	.NewsTitle:hover {
		color: #334800;
		text-decoration: underline;
		font-weight: bold;
	}


#section3 {
	background: #F9F2D9;
	padding-bottom: 4rem;
}

.LinkArea {
	text-align: center;
	/*padding:0 0.5rem;*/
}

	.LinkArea a {
		display: inline-block;
		width: calc(20% - 1rem - 4px);
		margin:0 0.5rem;
		padding:1.5rem 0;
		vertical-align:middle;
	}
		.LinkArea a:hover{
			background:rgba(230,206,123,0.3);
		}

		.LinkArea img {
			height: 100px;
			width: 100px;
		}
	.LinkArea p {
		font-size: 1.2rem;
		margin-top: 1rem;
		color: #000;
		height: 50px;
	}
	.LinkArea a:first-child p {
		line-height: 50px;
	}

		@media only screen and (min-width: 76.25em) and (max-width: 86.1875em) { /*1220~1379*/
		}

@media only screen and (min-width: 61.0525em) and (max-width: 76.1875em) { /*977~1219*/
	.NewsArea {
		width: 80%;
	}
/*	#Content {
		background-size: 370% auto;
	}*/
}


@media only screen and (min-width: 48em) and (max-width:61em) { /*768~976*/
	.NewsArea {
		width: 80%;
	}
	.LinkArea img {
		height: 80px;
		width: 80px;
	}
	.LinkArea p {
		font-size: 1rem;
		height: 46px;
	}
}

@media only screen and (max-width: 47.9735em) { /*767↓*/
	#Content {
		background-size: 370% auto;
		margin-bottom: 7rem;
	}
	.sectionSet {
		margin: 1rem 0 1.5rem 0;
		padding: 1rem;
	}
	.sectionSet .wrapper {
		padding: 0;
	}
	.articleSet p {
		font-size: 1rem;
		line-height: 1.6rem;
	}
	h2 {
		font-size: 1.5rem; /*32px*/
		padding-bottom: 1rem;
	}
	.moreBtnArea {
		text-align: center;
	}
	.NewsArea {
		width: 100%;
	}
	.NewsTitle {
		font-size: 1.2rem;
		line-height: 2rem;
		padding: 0.5rem 0;
	}
	#section2::after {
		background-size: 190%;
		background-position: top center;
		bottom: -35px;
		left: 0;
	}
	.LinkArea a {
		width: calc(50% - 1rem - 4px);
		margin: 0 0.5rem;
		padding: 1rem 0;
	}
	.LinkArea p {
		font-size: 1rem;
		margin-top: 0.5rem;
	}
	#section3 {
		padding-bottom: 2rem;
	}
}