.group-type-ph {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
    max-width: 1220px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.group-type-ph .ph {
    position: relative;
    width: 100%;
    margin: 30px 0;
    transition: all 0.5s;
        padding: 30px 0;
    background-image: url(../images/c26bg2.jpg);

}



.group-type-ph .ph:hover{
    filter: brightness(1.1);
}


.group-type-ph .ph a {
    display: block;
    color: white;
    text-decoration: none;
    background-color: black;
    border-bottom:10px double #dec484;
    border-top:10px double #dec484;
    float: left;
    width: 100%;
}

.group-type-ph .ph a > div , .group-type-ph .ph a > em{width: 100%;}


.group-type-ph .ph .ph-img{width: 100%; height: auto; float: left; position: relative;}
.group-type-ph .ph .ph-img:before{content: ""; background:url(../images/c26d3.png) no-repeat; background-size: contain; width: 28vw; height: 28vw;   display: inline-block; position: absolute; left: -4%;
    top: -15%; transition: all 0.5s; }
.group-type-ph .ph .ph-img:after{content: ""; background:url(../images/c26d4.png) no-repeat; background-size: contain; display: inline-block; position: absolute; 
     transition: all 0.5s; right: -4%;
      
     width: 20vw; height: 20vw;  bottom: -4%;
}    
.group-type-ph .ph .ph-img img {
   
    
    width: 90%;
    
    border: 4px solid black;
    box-sizing: initial;
    z-index: 1;

    position: relative; left: 50%; top: 0;   transform: translate(-50%, 0);  

}

.group-type-ph .ph:hover .ph-img:before{transform: rotate(-10deg);}
.group-type-ph .ph:hover .ph-img:after{transform: rotate(10deg);}




.group-type-ph .ph .ph-title {
    font-size: 22px;
    padding: 20px 1em;
    font-weight: bold;
    color:#fff0b5;
    text-align: left;
    float: right;
        line-height: 1.2;
}



.group-type-ph .ph .ph-detail {
    float: right;
    padding: 0 2em;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.group-type-ph .ph .ph-feature {
    display: none;
}

.group-type-ph .ph .price {
    display: inline;
    font-family: "Century Gothic", Arial, "Microsoft JhengHei";
    font-weight: bold;
    text-align: right;
    font-size: 16px;
    color:#fff0b5;
    float: right;
    padding: 20px 2em;
}

.group-type-ph .ph .price * {
    font-style: normal;
}

.group-type-ph .ph .price span {
    font-size: 30px;
    font-weight: normal;
}

.group-type-ph .ph .price i {
    font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
}






@media screen and (min-width:640px) {

.group-type-ph .ph a > div , .group-type-ph .ph a > em{width: 60%;}
.group-type-ph .ph .ph-img {
    width: 40%;
    height: 26vw;
}
.group-type-ph .ph .ph-img:before{ width: 17vw; height: 17vw; }
.group-type-ph .ph .ph-img img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.group-type-ph .ph .ph-img:after{width: 14vw; height: 14vw;  bottom: -12%;}


}




@media screen and (min-width:900px) {

.group-type-ph .ph{ margin: 50px 0;     padding: 40px 0; }

.group-type-ph .ph a > div , .group-type-ph .ph a > em{width: 65%;}
.group-type-ph .ph .ph-img{width: 35%; height: 220px; }
.group-type-ph .ph .ph-img img {
    width: 330px;
}
.group-type-ph .ph .ph-img:before{width: 245px; height: 245px; top: -28%; }
.group-type-ph .ph .ph-img:after{width: 148px; height: 148px;     bottom: -28%;}    

   .group-type-ph .ph .ph-title{ font-size: 26px; }

   .group-type-ph .ph .ph-detail {
    font-size: 20px;
}
    .group-type-ph .ph .price{
    font-size: 20px;
}
    .group-type-ph .ph .price span {
    font-size: 36px;
}




}