@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700;900&display=swap');


.poiMenu {background-color: #fff4a0; margin: 0 auto; padding: 0; position: relative;box-shadow: rgba(0,0,0,0.1) 3px 3px 5px; }
.poiMenu ul {width: 90%; margin: 0 auto; list-style: none; display: block;text-align: center;  }
.poiMenu ul li {display: inline-block; padding:5px 10px; color: #724217; font: normal 20px/1.4 "微軟正黑體", sans-serif;margin:2px auto; /*border-left: 1px solid #fff;*/cursor: pointer;}
.poiMenu ul li:first-child  {border-left: 0; }
.poiMenu ul li:hover{background: #FFF;}
/*.poiMenu::after{content: ""; width: 100%; height: 23px; background: url(../images/menubg.png) left top repeat-x; bottom: -23px; left: 0; position: absolute;}

*/
.poiGoods{border-radius: 20px;/*margin: 20px auto*/;}
.poiGoods > article {padding: 0px 0;margin: 0 auto;width: 100%;}

.ph-group  {width: 100%;margin: 0px auto 0px auto;padding: 10px 10px;position: relative;display: inline-flex;justify-content:center;flex-wrap: wrap;}
.ph{margin: 20px auto;width: 100%;position: relative;padding: 0 0 40px 0;}
.ph:hover{transform: none;}
.slidecontain {display:none;}


.ph .ph-group-content{margin: 15px 10px;transition: 0.2s;padding: 0px 0px 48px 0px; width: 23%;position: relative;flex-shrink: 1;background:rgba(255,255,255,0.9);box-shadow: 0 0 5px rgba(0,0,0,0.3);overflow: hidden;}
.ph .ph-group-content-photo {display: block;}
.ph .ph-group-content-photo img{width: 100%;}
.ph .ph-group-content-text{padding: 10px;}
.ph .ph-group-content-text-name{color:#000;font:bold 18px/1.4 "微軟正黑體";/*margin: 10px auto;*/display: block;}
.ph .ph-group-content-text-detail{color:#353535;font:15px/1.4 "微軟正黑體";/*padding: 5px 10px 10px 10px;*/}
.ph .ph-group-content-text-detail a {color: #353535;}
.ph .ph-group-content-text-price {color:#f85523;position: absolute;padding: 5px 10px;font:bold 24px/1.4 "微軟正黑體";text-align: center;display: block;right: 0px;bottom: 0px;width: 100%;}
.ph .ph-group-content-text-price span{font-size: 80%;line-height: 1.8;}
.ph .ph-group-content-tag {position: absolute;left: 0%; top: 15px; background:#f96223;font:15px/1.4 "微軟正黑體";color:#FFF;padding: 3px 10px;border-radius: 0 20px 20px 0;}
.ph .ph-group-content-text-sale{font: bold 16px/1.4 "微軟正黑體"; color: #f5565a;    /* padding: 0 10px;*/margin: 5px auto; }
.ph .ph-group-content-text-sale a {color: #f5565a;}

.ph-group-title {margin: 10px auto 0 auto;display: block;text-align: center;}
.ph-group-title span {font:bold 40px/1.6 'Noto Sans TC','微軟正黑體';color:#fff;text-align: center;position: relative;}
/*.ph-group-title span::before{content: "";  display: inline-block; width: 16px;  height: 46px; background: url(../img/title-left-2.png) left top no-repeat; position: absolute;left: 0;top: 0;}
.ph-group-title span::after{content: ""; display: inline-block; width: 16px; height: 46px; background: url(../img/title-right-2.png) left top no-repeat; position: absolute; right: 0; top: 0;}
*/



.ph .link-right{background:#e56737;padding: 7px 29px 7px 15px;font:18px/1.4 "微軟正黑體";color: #FFF;text-align: center;display: inline-block;position: absolute;bottom: 0;left: 50%;clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);transition: 0.3s;transform: translateX(-50%);}
.ph .link-right::after{content: ">>" ;display: inline-block;font:10px/1 "微軟正黑體";transform:translateY(-5px);-webkit-animation: gogo 0.3s  infinite alternate;animation: gogo 0.3s  infinite alternate;}
.ph .link-right:hover{padding: 7px 29px 7px 25px;color: #e8fe51;clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);}



#fit .ph .ph-group-content-photo  {display: none;}
#fit .ph .ph-group-content .ph-group-content-text {text-align: center;background: #f17342;}
#fit .ph .ph-group-content-text-name{color: #FFF;}






@-webkit-keyframes gogo {
  from { transform:translateX(0px); }
  to { transform:translateX(-2px); }
}
@keyframes topButton {
  from { transform:translateX(0px); }
  to { transform:translateX(-2px); }
}






@media screen and (max-width:1450px) { 
.ph .ph-group-content{width: 28%;}
}




@media screen and (max-width:1350px) { 

}


@media screen and (max-width:1200px) { 

.poiMenu li{font:16px/1.4 "微軟正黑體";margin:0px 3px;padding: 3px 10px;}
.poiGoods > article{width: 100%;margin: 0 auto;}

}

@media screen and (max-width:1024px){

}


@media only screen and (max-width: 1016px) {


}

@media only screen and (max-width: 800px) {

.poi {padding: 0 0 10px 0;}

.poiMenu{/*background:#fff1db;*/white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;border: none;}
.poiMenu li {margin:0px 10px;font:15px/1.6 "微軟正黑體";padding: 0px;}

.ph .ph-group-content{width: 44%;}


}

@media screen and (max-width:670px) { 

.poiMenu li{font:14px/1.4 "微軟正黑體";}
.ph .ph-group-content-text-name{font:bold 16px/1.4 "微軟正黑體";}

.ph .ph-group-content-text-detail{font:14px/1.4 "微軟正黑體";}
.ph .ph-group-content-text-price{font:bold 20px/1.4 "微軟正黑體";}
.ph-group-content-text-sale{font:14px/1.4 "微軟正黑體";}
/*.ph-group-title span{font:bold 20px/1.6 "微軟正黑體";}*/

.ph-group{padding: 1% 3%; flex-wrap: nowrap;justify-content: left;overflow-x: scroll;}
.poi .ph{width: 100%;}
.ph .ph-group-content{width: 90%;margin: 10px; flex-shrink: 0;}
.ph .ph-group-content-text-sale{font: 14px/1.4 "微軟正黑體";}


#fit .ph-group {flex-wrap: wrap;overflow-x: auto;justify-content: center;}



}



@media screen and (max-width: 639px){

/*.poiMenu ul:before, .poiMenu ul:after {content: '«'; color: #000; font-size: 16px; line-height: 1.4; vertical-align: middle; }
.poiMenu ul:after {content: '»'; }*/

.ph-group-title{margin: 10px auto;}
.ph-group-title span {font:30px/1.6 "微軟正黑體";}

.poiMenu ul li{font:normal 16px/1.2 "微軟正黑體", sans-serif;}



}
@media screen and (max-width:500px) { 


}