
.ph-group  {width: 100%;margin: 0 auto 40px auto;position: relative;}

.ph{margin: 0 auto;width: 100%;}
.ph:hover{transform: none;}
.slidecontain {display:none;}

.ph .ph-group:last-child .ph-group-content:last-child{
	    margin-bottom: 0px;
}
.ph .ph-group-content{width:100%; position: relative; display: flex;justify-content:center;flex-wrap: wrap; padding: 25px 0; margin-bottom: 50px;}
.ph .ph-group-content-photo {width: 55%; }
.ph .ph-group-content-photo a{position: relative; display: block; padding: 4px; background: linear-gradient(to right,  rgb(180,129,50) 0%,rgb(250,224,175) 30%,rgb(215,182,118) 50%,rgb(248,251,192) 72%,rgb(180,129,46) 100%);}
.ph .ph-group-content-photo img{width: 100%;}

.ph .ph-group-content-photo a::after{
	position: absolute; top:-40px; left:-20px; display: inline-block; content: ""; width: 147px; height: 225px;  z-index: 2;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100%;
}
.tq2025 .ph .ph-group-content-photo a::after{
	background-image: url(../images/tq2025.png);
}
.btc2025 .ph .ph-group-content-photo a::after{
	background-image: url(../images/btc2025.png);
}
.tq2024 .ph .ph-group-content-photo a::after{
	background-image: url(../images/tq2024.png);
}

.btc2024 .ph .ph-group-content-photo a::after{
	background-image: url(../images/btc2024.png);
}
.tq2023 .ph .ph-group-content-photo a::after{
	background-image: url(../images/tq2023.png);
}
.btc2023 .ph .ph-group-content-photo a::after{
	background-image: url(../images/btc2023.png);
}
.tq2022 .ph .ph-group-content-photo a::after{
	background-image: url(../images/tq2022.png);
}
.tq2019 .ph .ph-group-content-photo a::after{
	background-image: url(../images/tq2019.png);
}
.tq2018 .ph .ph-group-content-photo a::after{
	background-image: url(../images/tq2018.png);
}
.tq2017 .ph .ph-group-content-photo a::after{
	background-image: url(../images/tq2017.png);
}


.ph .ph-group-content-text{ width: 45%; padding-left: var(--gap);}
.ph .ph-group-content-text-name{
	display: block;
	font-size: var(--font-m);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-align: left;
	color: black;
}
.ph .ph-group-content-text-detail{
	background: #9b7c56;
	font-size: var(--font-r);
	line-height: 1.5;
	letter-spacing: 0.1em;
	text-align: left;
	color: white;
	border-style: solid;
	border-width: 35px; 
	border-image-source: url(../images/border.jpg);
	border-image-slice: 25; 
	border-image-width: 25px; 
	border-image-repeat: round;
    margin-top: 25px;
}

.ph .ph-group-content-text-detail a {

	color: white;
}
.ph .ph-group-content-text-price {
	display: block;
	font-size: var(--font-l);
	font-weight: 900;
	letter-spacing: 0.1em;
	color: var(--brown);
    position: relative;
    padding: 10px;
    text-align: center;
    background: #f3d0a8;
    border:solid 1px #ffffcc;
    border-top: none;
    transition: all 0.2s;
}
.ph .ph-group-content-text-price span{
	font-size: var(--font-r);
	letter-spacing: 0;
}
.ph .ph-group-content-text-price:hover{
	filter: brightness(1.1);
}
.ph .ph-group-content-tag {position: absolute;left: 0%; top: 0px; font-size: var(--font-r);color:#FFF;padding: 3px 30px 3px 10px;clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);/
background: rgb(196,138,3);
background: -moz-linear-gradient(left,  rgba(196,138,3,1) 0%, rgba(255,196,51,1) 100%); 
background: -webkit-linear-gradient(left,  rgba(196,138,3,1) 0%,rgba(255,196,51,1) 100%); 
background: linear-gradient(to right,  rgba(196,138,3,1) 0%,rgba(255,196,51,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c48a03', endColorstr='#ffc433',GradientType=1 );text-shadow: 0px 0px 5px rgba(0,0,0,0.3);display: none;}



.ph .ph-group-content-text-sale{margin: 5px auto; font-size: var(--font-r); color: red;/*background:#ffff93;display: inline;*/}
.ph .ph-group-content-text-sale a {font-size: var(--font-r); color: red;}

.ph .link-right{ background: #7faf54; text-align: center; display: block; margin: 10px auto 20px auto; width:28%; padding: 10px 20px 10px 10px;  color: #FFF; border-radius: 20px; font-size: 18px;min-width: 350px;position: relative;}
.ph .link-right:after{content: "→";width: 90%;height: 90%;position: relative;border-radius: 99em;background:#FFF;color: #7faf54;padding: 4px 7px;right: -10px;transition: 0.3s;}
.ph .link-right:hover:after{right: -15px;}



.ph-group-title{
	display: block;
	font-size: var(--font-m);
font-weight: 900;
letter-spacing: 0.2em;
color: black;
padding: 10px 0;
}

.ph-group-content-otherlink{
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.ph-group-content-otherlink:has(a){
	margin:  10px auto 0 auto;
}
.ph-group-content-otherlink a{
    padding: 5px 0;
    background: #5c421e;
    width: 44%;
    display: flex;
    color: #FFF;
 
    font-size: 18px;
    position: relative;
    justify-content: center;
    align-items: center;
	flex-grow: 1;

}


.ph-group-content-otherlink a:hover{
	filter: brightness(105%);

}

.ph-group-content-otherlink a:hover::after{
	transform: translateX(3px);

}

.ph-group-content-otherlink a::after{
	content:"▶";
	position: static;
	font-size: 80%;
	margin-left: 5px;
	line-height: 1.5;
	transition: 0.3s;



}

.black .ph-group-title , .black .ph .ph-group-content-text-name{
	color: white;
}



/*第二個以後 不顯示圖片*/


.gold .ph .ph-group-content:nth-of-type(n+2) {
	background: #c39e6f;
}

.gold .ph .ph-group-content:nth-of-type(2)::after{

	border-bottom: 1px dashed #9b7c56;
}
.gold .ph .ph-group-content:nth-of-type(n+2) .ph-group-content-text .ph-group-content-text-detail,
.gold .ph .ph-group-content:nth-of-type(n+2) .ph-group-content-text .ph-group-content-text-detail a
{
	color:#000;
}

.ph .ph-group-content:nth-of-type(2)::after{
	content:"";
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px dashed #ffd6a3;
}


.ph .ph-group-content:nth-of-type(n+2) {
	width: 100%;
	background: #775a33;
	gap: 24px;
	margin: 20px auto;
	padding: 20px;
}
.ph .ph-group-content:nth-of-type(n+2) 	.ph-group-content-photo{
	display: none;
}
.ph .ph-group-content:nth-of-type(n+2) .ph-group-content-text{
	width: 100%;
	padding: 0;
}
.ph .ph-group-content:nth-of-type(n+2) .ph-group-content-text .ph-group-content-text-name{
	font-size: var(--font-r);
	margin-bottom: 5px;
}


.ph .ph-group-content:nth-of-type(n+2) .ph-group-content-text .ph-group-content-text-detail{
	border: none;
	background: none;
	font-size: var(--font-s);
	margin-top: 5px;
}

.ph .ph-group-content:nth-of-type(n+2) .ph-group-content-text .ph-group-content-text-sale{
	text-align: left;
}
.ph .ph-group-content:nth-of-type(n+2) .ph-group-content-text .ph-group-content-text-price{
	font-size:  var(--font-r);
	margin: 10px auto 0 auto;

}



@media screen and (max-width: 1220px){
	.ph .ph-group-content-photo a::after{
		width: 20%;
    	height: 47%;
    	top: -7%;
    	left: -2%;
	}

	.gold .ph .ph-group-content:nth-of-type(n+2) {
		background: #ffe7c9;
	}
}

@media screen and (max-width: 960px){
	.ph-group-title{
		padding: 0;
	}
	.ph .ph-group-content-photo , .ph .ph-group-content-text{width: 100%; }
	.ph .ph-group-content-text{
		padding-left: 0; margin-top: 25px;
	}
}