

.poi {max-width: 1000px; margin: 0 auto;}
.ph-group  {width: 100%;margin: 0 auto 0px auto;padding: 10px 10px;position: relative;display: flex;justify-content:center;flex-wrap: wrap;}
.slidecontain {display:none;}

.ph-group-title {display:none; text-align: center;width: 80%;margin: 20px auto ;max-width: 1400px;border-radius: 20px 20px 0 0; }
.ph-group-title > span {font:bold 32px/1.6 "微軟正黑體";color:#e4213f;border-bottom: 1px solid #d43b54;padding: 5px 10px;letter-spacing: 0px;}

.poi .ph .ph-group-content * {vertical-align: top;}
.poi .ph .ph-group-content{ background:url(../images/poibg.jpg) top center no-repeat;background-size: cover;  margin: 10px 10px;transition: 0.2s;padding: 20px; width:100%;position: relative;flex-wrap: wrap;display: flex;}
.poi .ph .ph-group-content-photo {width: 30%;}
.poi .ph .ph-group-content-photo img{width:100%;}
.poi .ph .ph-group-content-text{padding: 15px 15px 40px 15px;width: 50%;flex-grow: 1;}
.poi .ph .ph-group-content-text-name{color:#fff;font:bold 24px/1.4 "微軟正黑體";margin: 0px auto 10px auto;display: block;border-bottom: 1px solid #FFF;padding: 0 0 10px 0;}

.poi .ph .ph-group-content-text-detail{color:#fff;font:16px/1.6 "微軟正黑體";margin: 5px auto ;}
.poi .ph .ph-group-content-text-detail a {color: #fff;}
.poi .ph .ph-group-content-text-price {color:#ffff75;position: absolute;border-radius:10px 10px 0 0;padding: 5px 10px;font:bold 27px/1.4 "微軟正黑體";text-align: center;display: block;right: 10px;bottom: 5px;}
.poi .ph .ph-group-content-text-price span{font-size: 80%;line-height: 2;}
.poi .ph .ph-group-content-tag {position: absolute;left: 0%; top: 20px; background: #ff8a52;font:15px/1.4 "微軟正黑體";color:#fff;padding: 3px 10px;border-radius: 0 20px 20px 0;}
.poi .ph .ph-group-content-text-sale{margin: 15px auto 10px auto; font: 20px/1.4 "微軟正黑體"; color: #ffff75;}
.poi .ph .ph-group-content-text-sale a{color: #ffff75;}


.poi .ph-group-content-otherlink a {display: block;margin: 5px auto;width: 100%;font:14px/1.2 "微軟正黑體";color: #941e1e; background: #fff0c9;border-radius: 10px;padding: 0px;}


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

  .poi .ph .ph-group-content-photo{width: 100%;z-index: 5;}
  .poi .ph .ph-group-content-text-name{font:bold 20px/1.4 "微軟正黑體";}
  .poi .ph .ph-group-content-text-detail{font:15px/1.6 "微軟正黑體";}
  .poi .ph .ph-group-content-text-sale{ font: 18px/1.4 "微軟正黑體";}
  .poi .ph .ph-group-content::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;    background: linear-gradient(to bottom, rgb(29 69 115 / 85%) 0%,rgb(33 115 179 / 66%) 100%);}
  .poi .ph .ph-group-content-text{width: 100%;flex-grow: 0;z-index: 5;}
  .poi .ph .ph-group-content-text-price{font:bold 24px/1.4 "微軟正黑體";}


}


/*商品*/
.poi_goods { margin: 0 auto;}
.poi_goods .ph-group  {width: 100%;margin:20px auto 50px auto;padding: 10px 10px;position: relative;display: flex;justify-content:center;flex-wrap: nowrap; gap: 20px;}

.poi_goods .ph-group-title {display:block; text-align: center;width: 80%;margin: 20px auto ;max-width: 1400px; }
.poi_goods .ph-group-title > span {font:bold 30px/1.6 "微軟正黑體";color:#327bd4;border-bottom: none;padding: 5px 10px;letter-spacing: 0px;}

.poi_goods .ph .ph-group-content * {vertical-align: top;}
.poi_goods .ph .ph-group-content{ width: 24%; transition: 0.2s;padding: 0px 0px 50px 0px; position: relative;background: #eee;}
.poi_goods .ph .ph-group-content-photo {width: 100%;}
.poi_goods .ph .ph-group-content-photo img{width:100%;}
.poi_goods .ph .ph-group-content-text{width: 100%;padding:  0 10px;}
.poi_goods .ph .ph-group-content-text-name{color:#0170a7;font:18px/1.4 "微軟正黑體";margin: 10px auto 5px auto;display: block;padding: 0;}

.poi_goods .ph .ph-group-content-text-detail{color:#000;font:14px/1.6 "微軟正黑體";margin: 5px auto ;}
.poi_goods .ph .ph-group-content-text-detail a {color: #000;}
.poi_goods .ph .ph-group-content-text-price {color:#fff;position: absolute;padding: 5px 10px;font:bold 18px/1.4 "微軟正黑體";text-align: center;display: block;left: 50%;bottom: 10px;transform: translateX(-50%);width: 80%;background: #327bd4;}
.poi_goods .ph .ph-group-content-text-price span{font-size: 80%;line-height: 2;}
.poi_goods .ph .ph-group-content-tag {position: absolute;left: 0%; top: 20px; background: #ff8a52;font:15px/1.4 "微軟正黑體";color:#fff;padding: 3px 10px;}
.poi_goods .ph .ph-group-content-text-sale{ font: 20px/1.4 "微軟正黑體"; color: #d43232;}
.poi_goods .ph .ph-group-content-text-sale a{color: #d43232;}


.poi_goods .ph-group-content-otherlink a {display: block;margin: 5px auto;width: 100%;font:14px/1.2 "微軟正黑體";color: #941e1e; background: #fff0c9;border-radius: 10px;padding: 0px;}


.poi_goods .ph-group-content.box3 {width: 30%;flex-grow: 1;}
.poi_goods .ph-group-content.box2 {width: 45%;flex-grow: 1;}
.poi_goods .ph-group-content.box1 {width: 80%;padding: 0;}

.poi_goods .ph-group-content.box1 .ph-group-content-photo{width: 45%; display: inline-block;}
.poi_goods .ph-group-content.box1 .ph-group-content-text{width: 53%; display: inline-block;padding-left: 20px ;position: relative;height: 100%;}


.poi_goods .ph-group.poi_scroll {justify-content: left;overflow-x: auto;}
.poi_goods .ph-group.poi_scroll .ph-group-content{flex-shrink: 0;}

/* 網頁捲軸【寬度】 */
.poi_goods .ph-group.poi_scroll::-webkit-scrollbar {
  width: 10px;
}

/* 網頁捲軸【背景】顏色 */
.poi_goods .ph-group.poi_scroll::-webkit-scrollbar-track {
  background: #d1f3fa;border-radius: 20px;
}

/* 網頁捲軸【把手】顏色 */
.poi_goods .ph-group.poi_scroll::-webkit-scrollbar-thumb {
  background: #2bb9d1;border-radius: 20px;
}

/* 網頁捲軸【滑過時】把手的顏色 */
.poi_goods .ph-group.poi_scroll::-webkit-scrollbar-thumb:hover {
  background: rgb(55, 176, 197);
}


@media screen and (max-width:1280px){
  .poi_goods .ph-group-content.box1{  padding: 0px 0px 50px 0px;}
  .poi_goods .ph-group-content.box1 .ph-group-content-photo{width: 100%; display:block;}
  .poi_goods .ph-group-content.box1 .ph-group-content-text{width: 100%; display: block;padding-left:0px  ;height: auto;position: unset;}
  .poi_goods .ph-group-content.box1 .ph-group-content-text .ph-group-content-text-price{margin-left: 0;}
  }
  

@media screen and (max-width: 1000px) {
  .poi_goods .ph .ph-group{flex-wrap: wrap;}
  .poi_goods .ph .ph-group-content{width: 45%;flex-shrink: 0;}
  .poi_goods .ph-group.poi_scroll {justify-content: center;overflow-x: auto;}


}

@media screen and (max-width: 800px) {
  .poi_goods .ph .ph-group-content{width: 90%;margin: 0 auto;flex-grow: 0;}
}