@charset "utf-8";
/* CSS Document */
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;800&display=swap');

html{
	scroll-behavior:smooth;
}

body{
	font-family:'微軟正黑體','Noto Serif TC',sans-serif;
	font-size:16px;
	color:#000000;
	-webkit-text-size-adjust:none;
	image-rendering:-webkit-optimize-contrast;
}

:root{
	--twfont:'Noto Serif TC', serif;
	--enfont:'Times New Roman', serif;
	--green:#78A222;
}

.webout{
	position:relative;
	max-width:2000px;
	margin:0 auto;
}

.out{
	position:relative;
	max-width:1310px;
	margin:0 auto;
	padding:0 20px;
}

article{
	overflow:clip;
	margin-top:-15px;
}

article .out{
	max-width:1210px;
}

/*HEADER-----------------------------------------*/
header{
	position:sticky;
	top:0;
	left:0;
	z-index:1000;
	background:url("../images/header_bg.png") repeat-x;
	background-size:auto 100%;
}

header .out{
	height:120px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-bottom:20px;
}

header .logo{
	width:285px;
}

header .pc{
	width:67%;
	max-width:700px;
}

header .pc ul{
	display:flex;
	justify-content:space-between;
}

header li a{
	position:relative;
	top:0;
	display:flex;
	align-items:center;
	color:#FFFFFF;
	line-height:1.2em;
	transition:0.2s;
}

header .pc li:hover a{
	top:-5px;
}

header li .image{
	width:35px;
	height:35px;
	background:#FFFFFF;
	border-radius:50%;
	overflow:hidden;
	margin-right:5px;
}

header li span{
	display:block;
	font-size:0.8em;
}

header li img{
	height:35px;
}

header .mb_bt,
header .mb{
	display:none;
}

/*BANNER-----------------------------------------*/
.bn{
	height:760px;
	background-image:url("../images/banner.webp"), url("../images/about_bg.jpg");
	background-position:top center, top center;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	padding:0 20px;
}

.bn .tw{
	position:relative;
	font-family:var(--twfont);
	font-size:38px;
	font-weight:600;
	word-spacing:1em;
	text-shadow:0 0 5px #FFFFFF;
	padding-bottom:0.5em;
	border-bottom:#2C9223 1px solid;
}

.bn .tw:before,
.bn .tw:after{
	content:"";
	position:absolute;
	bottom:-3px;
	width:6px;
	height:6px;
	background:#2C9223;
	border-radius:50%;
}

.bn .tw:before{
	left:0;
}

.bn .tw:after{
	right:0;
}

.bn .tw br{
	display:none;
}

.bn .en{
	font-family:var(--enfont);
	font-size:20px;
	font-style:italic;
	font-weight:bold;
	letter-spacing:0.5em;
	padding-top:0.7em;
}

@media only screen and (max-width:500px){
    .bn .tw{
        font-size:7.6vw;
    }
	
    .bn .en{
        font-size:4vw;
    }
}

/*ABOUT-----------------------------------------*/
.about{
	background-image:url("../images/about_bg2.png"), url("../images/about_bg.jpg");
	background-position:right 80px center, top center;
	background-repeat:no-repeat, repeat;
	background-size:260px auto, auto;
	padding-bottom:50px;
}

.about .out{
	display:flex;
}

/*ABOUT_TOP-----------------*/
.about .top{
	background:url("../images/about_top.png") no-repeat;
	background-size:98px auto;
	font-family:var(--twfont);
	font-size:30px;
	line-height:1.4em;
	font-weight:800;
	padding:35px 0 0 100px;
	min-height:63px;
}

.about .top .num{
	font-size:1.2em;
	background:linear-gradient(45deg, #CC9900, #CC6600);
    background-clip:text;
    color:transparent;
	vertical-align:top;
}

.about .top .red{
	color:#CC0000;
}

/*ABOUT_TITLE-----------------*/
.title_text{
	font-family:var(--twfont);
	position:relative;
	border-left:#92C529 7px solid;
	padding-left:13px;
	font-size:31px;
	line-height:1.3em;
	font-weight:600;
	text-align:left;
}

.about h5{
	margin:10px 0 60px;
}

.about h5:after{
	content:"";
	position:absolute;
	left:0;
	bottom:-46px;
	height:46px;
	width:100%;
	background:url("../images/about_line.png") left bottom no-repeat;
	background-size:auto 46px;
}

.title_text div{
	font-family:var(--enfont);
	font-size:25px;
	font-weight:normal;
	line-height:1em;
	color:var(--green);
}

/*ABOUT_TEXT-----------------*/
.about .t1{
	font-family:var(--twfont);
	font-size:36px;
	font-weight:600;
	color:var(--green);
	line-height:1.3em;
}

.about .t2{
	font-family:var(--twfont);
	font-size:20px;
	font-weight:600;
	line-height:1.5em;
	margin:1em 0;
}

.about .t3{
	line-height:1.7em;
	padding-bottom:1em;
}

/*ABOUT_IMAGE-----------------*/
.about .image{
	width:400px;
	min-width:400px;
}

.about .image img{
	position:relative;
	top:0;
	display:block;
	border-radius:50%;
	border:#FFFFFF 5px solid;
	box-shadow:6px 6px 12px rgba(0,0,0,0.3);
}

.about .image .img1{
	z-index:1;
	width:81%;
	animation:flow 2.3s ease infinite;
}

.about .image .img2{
	width:57%;
	margin:-11% 0 0 auto;
	animation:flow 2.5s ease infinite;
}

.about .image .img3{
	z-index:1;
	width:40%;
	margin:-22% 0 0 16%;
	animation:flow 2.7s ease infinite;
}

@keyframes flow{
	0% {top:0;}
	50% {top:10px;}
	100% {top:0;}
}

/*NEWS-----------------------------------------*/
.news{
	background:url("../images/news_bg.jpg") no-repeat;
	background-size:cover;
	padding-top:50px;
	text-align:center;
}

.news h6{
	display:inline-block;
	position:relative;
	font-family:var(--twfont);
	font-size:26px;
	font-weight:600;
	text-align:center;
	margin:2em 0;
}

.news h6:before,
.news h6:after{
	content:"";
	position:absolute;
	top:50%;
	width:90px;
	height:1px;
	background:#92C529;
}

.news h6:before{
	left:-100px;
}

.news h6:after{
	right:-100px;
}

.news ul{
	display:flex;
	flex-wrap:wrap;
	margin:0 -10px;
	padding-bottom:50px;
}

.news li{
	width:225px;
	margin:0 10px 20px;
	background:#FFFFFF;
	border-radius:10px;
	overflow:hidden;
	transition:background 0.2s, box-shadow 0.2s;
}

.news li:hover{
	background:#92C529;
	box-shadow:0px 0px 15px #FFFFFF;
}

.news li a{
	display:block;
	height:100%;
	color:#000000;
	transition:0.2s;
}

.news li:hover a{
	color:#FFFFFF;
}

.news li img{
	width:100%;
}

.news li .text{
	padding:1em;
	text-align:left;
	line-height:1.5em;
}

/*CONTACT-----------------------------------------*/
.contact{
	background:url("../images/contact_bg.jpg") top center;
	background-size:cover;
	padding:50px 0;
}

/*CONTACT_TOP-----------------*/
.contact .top{
	position:relative;
	top:-40px;
	font-size:26px;
	line-height:40px;
	display:flex;
	justify-content:flex-end;
}

.contact .top li{
	margin-left:40px;
}

.contact .top img{
	width:40px;
	vertical-align:top;
	transition:opacity 0.2s;
}

.contact .top a{
	color:#000000;
}

.contact .top a:hover img{
	opacity:0.9;
}

/*CONTACT_STORE-----------------*/
.contact .store,
.contact .ps,
.shop ul{
	max-width:875px;
	margin:0 auto;
}

.contact .store .list{
	display:flex;
	align-items:center;
	padding-bottom:25px;
	margin-bottom:15px;
}

.contact .store .list:first-child{
	background:url("../images/contact_line.png") left bottom no-repeat;
	background-size:auto 36px;
}

.contact .store img{
	width:230px;
	border-radius:50%;
	margin-right:20px;
	box-shadow:4px 4px 4px rgba(0,0,0,0.2);
}

.contact .store .list ul{
	list-style:disc;
	margin-left:1.2em;
	line-height:1.8em;
}

.contact .store .list li::marker{
	color:#92C529;
}

.contact .ps{
	border:#92C529 1px solid;
	font-size:19px;
	line-height:1.5em;
	text-align:center;
	padding:7px 10px;
}

/*SHOP-----------------------------------------*/
.shop{
	padding:50px 0 100px;
}

.shop ul{
	display:flex;
	align-items:center;
	margin-top:30px;
}

.shop .image{
	width:390px;
}

.shop .img1{
	width:58%;
}

.shop .img2{
	display:block;
	width:51%;
	border-radius:50%;
	box-shadow:4px 4px 4px rgba(0,0,0,0.2);
	margin:-63% 0 0 auto;
}

.shop h6{
	font-family:var(--twfont);
	font-size:24px;
	line-height:1.3em;
	font-weight:600;
	padding-bottom:40px;
	background:url("../images/shop_line.png") left bottom no-repeat;
	background-size:auto 35px;
}

.shop .text{
	text-align:center;
	line-height:1.8em;
	margin:5px 0 50px;
}

.shop a,
.shop_mb{
	position:relative;
	top:0;
	display:block;
	width:290px;
	font-size:27px;
	line-height:32px;
	color:#FFFFFF;
	font-weight:bold;
	text-align:center;
	padding:15px 0;
	background:#92C529;
	border-radius:6px;
	box-shadow:0 0 8px rgba(0,0,0,0.5);
	margin:0 auto;
	transition:top 0.2s, background 0.2s;
}

.shop a:hover,
.shop_mb:hover{
	top:-5px;
	background:#005F2F;
}

.shop a:before,
.shop a:after,
.shop_mb:before,
.shop_mb:after{
	content:"";
	position:absolute;
	top:50%;
	width:40px;
	border-top:#FFFFFF 1px dotted;
}

.shop a:before,
.shop_mb:before{
	left:15px;
}

.shop a:after,
.shop_mb:after{
	right:15px;
}

.shop a img,
.shop_mb img{
	height:32px;
	vertical-align:top;
	margin-right:10px;
}

.shop_mb{
	display:none;
}

/*BOOKMARK-----------------------------------------*/
.bookmark{
	position:relative;
	top:-175px;
}

/*PAGETOP-----------------------------------------*/
body a.pagetop{
	display:block;
	width:50px;
	height:50px;
	border-radius:50%;
	z-index:500;
	background:#005F2F;
	opacity:1;
	position:relative;
	transition:opacity 0.2s;
}

body a.pagetop:hover{
	opacity:0.9 !important;
}

body a.pagetop:after{
	content:"";
	border:solid #FFFFFF;
	border-width:0px 2px 2px 0px;
	padding:6px;
	display:inline-block;
	position:absolute;
	top:55%;
	left:50%;
	transform:rotate(-135deg) translate(-50%,-50%);
	transform-origin:left top;
}

/*FOOTER-----------------------------------------*/
footer{
	background:url("../images/footer_bg.png") repeat-x;
	background-size:auto 100%;
}

footer .out{
	height:101px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

footer .logo{
	width:197px;
}

footer ul{
	display:flex;
	align-items:center;
}

footer li{
	margin-left:20px;
	color:#FFFFFF;
}

footer a{
	display:inline-block;
	width:35px;
	height:35px;
	background:#FFFFFF;
	border-radius:50%;
	overflow:hidden;
	transition:0.2s;
}

footer a:hover{
	opacity:0.9;
}

footer a img{
	height:35px;
}

/*MOBILE----------------------------------------------------------------------------*/
@media only screen and (max-width:1000px){
	article{
		padding-bottom:50px;
	}
	
	/*HEADER-----------------------------------------*/
    header .out{
		display:block;
        height:55px;
        padding-bottom:5px;
    }
	
    header .logo{
		position:absolute;
		top:5px;
		left:20px;
        width:140px;
    }
	
	header .pc{
		display:none;
	}
	
    header li .image{
        margin-right:10px;
    }
	
	/*HEADER_MB_BUTTON-----------------*/
	header .mb_bt,
    header .mb{
        display:block;
    }
	
	header .mb_bt{
		position:absolute;
		top:50%;
		right:20px;
		width:40px;
		height:40px;
		margin-top:-23px;
		text-align:left;
		cursor:pointer;
	}
	
	header .mb_bt span{
		height:2px;
		width:30px;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		margin:auto;
		background:#FFFFFF;
		transition:0.3s;
		display:block;
	}
	
	header .mb_bt span:before,
	header .mb_bt span:after{
		content:"";
		height:2px;
		position:absolute;
		right:0;
		background:#FFFFFF;
		transition:0.3s;
	}
	
	header .mb_bt span:before{
		width:40px;
		top:-8px;
	}
	
	header .mb_bt span:after{
		width:35px;
		top:8px;
	}
	
	header .mb_bt.active span:before{
		width:40px;
		top:0;
		transform:rotate(45deg);
	}
	
	header .mb_bt.active span:after{
		width:40px;
		top:0;
		transform:rotate(-45deg);
	}
	
	header .mb_bt.active:hover span{
		transform:rotate(-90deg);
	}
	
	header .mb_bt.active span{
		width:40px;
		background:none;
	}
	
	/*HEADER_MENU-----------------*/
	header .mb{
		position:fixed;
		top:55px;
		bottom:0;
		left:0;
		width:100%;
		overflow-y:auto;
		background:#005F2F;
		transform:translateX(100%);
		transition:0.3s ease-in-out;
		-webkit-overflow-scrolling:touch;
	}
	
	header .mb.active{
		transform:translateX(0);
	}
	
	header .mb ul{
		padding:40px;
	}
	
	header .mb li a{
		color:#FFFFFF;
		padding:1em 0;
		position:relative;
		cursor:pointer;
		border-bottom:#6CA521 1px solid;
		transition:0.2s;
	}
	
	header .mb li:hover a{
		border-bottom:#FFFFFF 1px solid;
	}
	
	/*BANNER-----------------------------------------*/
    .bn{
        height:380px;
        background-image:url("../images/banner.webp"), url("../images/about_bg.jpg");
        background-position:top center, top center;
		background-size:auto 100%, auto;
    }
	
	.bn .tw{
		line-height:1.3em;
	}
	
    .bn .tw br{
        display:block;
    }
	
	/*ABOUT-----------------------------------------*/
    .about{
        background-position:right 8% center, top center;
    }
	
    .about .out{
        display:block;
    }
	
    .about .top{
        padding:100px 0 20px;
		min-height:0;
    }
	
	/*ABOUT_IMAGE-----------------*/
    .about .image{
        width:100%;
		max-width:400px;
        min-width:0;
		margin:20px auto 0;
    }
	
	/*NEWS-----------------------------------------*/
    .news ul{
        display:grid;
        justify-content:center;
        grid-template-columns:repeat(auto-fit,minmax(auto,225px));
    }
	
    .news li{
        width:auto;
		max-width:225px;
    }
	
	/*CONTACT-----------------------------------------*/
	
	/*CONTACT_TOP-----------------*/
    .contact .top{
        position:static;
		flex-wrap:wrap;
		justify-content:flex-start;
		padding:23px 0;
    }
	
    .contact .top li{
        margin:7px 40px 7px 0;
    }
	
	/*CONTACT_STORE-----------------*/
	.contact{
		text-align:center;
	}
	
    .contact .store .list{
        display:block;
    }
	
    .contact .store img{
		margin-bottom:20px;
    }
	
    .contact .store .list ul{
        list-style:none;
		margin-left:0;
    }
	
	.contact .store .list li{
		margin-bottom:1em;
	}
	
	/*SHOP-----------------------------------------*/
    .shop{
        padding:50px 0 0;
    }
	
    .shop ul{
        display:block;
    }
	
    .shop .image{
        width:auto;
		max-width:390px;
		margin:0 auto 80px;
    }
	
    .shop a{
		display:none;
    }
	
    .shop_mb{
		display:block;
		position:sticky;
		z-index:9;
		top:auto !important;
		bottom:0;
    }

    /*BOOKMARK-----------------------------------------*/
    .bookmark{
        top:-105px;
    }
	
    /*PAGETOP-----------------------------------------*/
    body a.pagetop{
        display:none !important;
    }
	
	/*FOOTER-----------------------------------------*/
	footer{
		padding:30px 0 20px;
	}
	
    footer .out,
	footer ul{
        height:auto;
        display:block;
		text-align:center;
    }
	
    footer li{
        margin:1em 0 0;
    }
}