@charset "utf-8";
/***************************************
    copyright by MakeWeb.com.tw 
***************************************/
.panes ul {
	 list-style:none;
	 padding: 0;
}


.list_vert{
	width: 1024px;
	margin:0 auto;
}
.subject{
	text-align: center;
	margin-bottom: 80px;
}
.subject h2{
	color: #8EB100;
}
.subject h3{
	color: #8EB100;
	margin: 10px 0;
}
.subject p{
	color: #5F5F5F;
}

.port-filter{
	margin-top: 30px;	
	border-bottom: none;
}
.port-filter ul li a:hover, .port-filter ul li a:focus, .port-filter ul li a.current{
	border: 3px solid #89406D;
	border-radius: 16px;
}
.list_vert li .list_tilelist ul > div{
	margin: 18px 0;
	padding: 0;
	width: 300px;
	width: calc(100% / 3);
}



.item_content .content{
	width: 300px;
	height: 300px;
	margin:0 auto;
}
.list_vert ul{
	overflow: visible;
}
.list_vert li .list_tilelist{
	margin:0;
}
.list_gray_light ul{
	display: grid;
	grid-template-columns:repeat(auto-fit, minmax(300px, 300px));
	gap:30px;
	justify-content:center;
	list-style-type:none;
	padding: 0;
	margin:0;
	margin-top: 80px;
}

.list_vert li .list_tilelist ul > div .item_image{
	display: flex;
	width: 300px;
	height: 300px;
	border-radius: 0;
	position: absolute;
}
.list_vert li .list_tilelist ul > div .item_image img{
	object-fit:cover;
}

.list_vert li .list_tilelist ul > div .item_text{
	position: absolute;
	width: 270px;
	bottom:0px;
	margin:30px 15px;
	text-align: left;
}


.post_image{
	/*width: 300px;*/
	height: 300px;
	margin:auto;
	background: #80A400;
	display: flex;
	justify-content:center;
	align-items:center;
}
.item_image:before{
	width: 300px;
	height: 300px;
	margin:auto;
	position: absolute;
	content: "";
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+50,000000+100&0+50,1+100 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 50%,rgba(0,0,0,0.6) 100%); 
}
.post_image img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.post_image .text {
	position: relative;
	display: flex;
	flex-direction:column;
	align-items:center;
}
.text h3 {
	color: #fff;
	line-height: 2.8rem;
	font-weight: lighter;
	/*filter: drop-shadow(0px 0px 9px rgba(0, 0, 0, 1));*/
	z-index: 50;
}
.post_text a{
	display: block;
	position: relative;
}
.post_text a::before{
	width: 300px;
	height: 300px;
	margin:auto;
	position: absolute;
	content: "";
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 30%,rgba(0,0,0,0.6) 100%); 
	z-index: 10;
}
.post_text h6{
	color:#FFCF4F;
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 10px 16px;
	z-index: 20;
}
.text h6:hover{
}
.item_text h3 {
	color: #fff;
	line-height: 2.8rem;
	font-weight: lighter;
}
.item_text h6{
	margin-top: 10px;
	color:#FFCF4F;
}
.item_text h6:hover{
	/*color:#9F003F;*/
}







.other_info h1 {
	color: #8DB100;
}
.title {
    margin: 10px 0;
}
.ingredients form ul {
    /*list-style: none;*/
    /*padding: 0;*/
}


.ingredient-description p{
	font-size: 2rem;
	font-weight: lighter;
}

.other_info h1{
}
.other_info h4{
	font-weight:lighter;
	margin-bottom: 30px;
}
#content2 h2{
	color: #9F003F;
}

.pd_description ul{
	margin:0;
	padding-left: 20px;
	list-style: none;
}
.pd_description ul span{
	color: #ffb800;
	font-size: 2.2rem;
	margin-left: -20px;
}
.pd_description ul li:before{
	content:'\25B8';
	color: #880032;
	padding-right: 10px;
}

.tabs_simple_blue ul.tabs{
	margin-top:50px;
}
.tabs_simple_blue ul.tabs .w0.current{
	border-bottom:4px solid #8DB100;
	color: #8DB100;
	font-weight: bold;
}
.tabs_simple_blue ul.tabs .w0:hover{
	border-bottom:4px solid #8DB100;
}
.tabs_simple_blue ul.tabs a:hover{
	color:#888;
}
.panes  span {
	color: #ffb800;
	margin-left: -40px;
}
.panes ul p , .panes ol p{
	color: #ffb800;
	margin-left: -40px;
}
.panes .tips{
	margin:0;
}
.panes .pd_tab2 img {
	width: 600px;
	padding-left: 40px;
}
.panes .tip{
	margin-top: 50px;
}
/*.panes .tip p{
	font-size: 2rem;
	padding: 10px;
	display: inline-block;
	border-radius: 40px;
	border:2px solid #ffb800;
	position: relative;
}
.panes .tip p::before{
	position: absolute;
	content: "小提示";
	top: -20px;
	left: -10px;
	background: #ffb800;
	padding: 0 20px;
	line-height: 30px;
	border-radius: 16px;
	color:#fff;
}*/

.youtube_video{
	width:888px; 
	max-width: 100%;
	height:500px;
	margin-top: 50px;
}

.tabs_simple_blue .addtoany{
	display: flex;
	justify-content:flex-end;
}
/*-------------------------------------------- 
	Media Queries 
---------------------------------------------*/
/* Portrait and Landscape */
/*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}*/

/*iPad Pro*/
@media screen and (max-width: 1279px) {
	.list_vert{
		width: 100%;
	}
}

/*iPad*/
@media screen and (max-width: 1023px) {
	.list_vert li .list_tilelist ul > div{
		width:calc(100% / 2);
		margin:40px 0;
	}
}
/*iPhone*/
@media screen and (max-width: 767px) {
	.port-filter ul li a:hover, .port-filter ul li a:focus, .port-filter ul li a.current{
		padding:10px;
	}
	.list_vert li .list_tilelist ul > div{
		width:100%;
		margin:20px 0;
	}
	.youtube_video{
		height:300px;
	}
}