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

:root{ --yellow:#fff1c8;--orange:#f38e4a; --titlefont:900 38px/1.2 'Noto Serif TC';--titlecolor: #4e4141;}

@media screen and (max-width:800px) {
:root{--titlefont:900 24px/1.2 'Noto Sans TC';}
}

* { box-sizing: border-box; transition: 0.2s; letter-spacing: 0.05em;}
#mtkContainer * {font-family: 'Noto Sans TC';vertical-align: top;}
body {background: url(../images/bg_repeat.jpg?v=20241226) top center repeat-y;}
a { text-decoration: none;}




/*應該是通用*/
.ph { margin: 0 auto;  width: 100%;  text-align: center;}
.poiGoods{padding:  20px 0;}
.ph-menu{display: none;}
.ph-group-title {margin-top: 50px;}
.ph-group-title span{ font:var(--titlefont);position: relative;z-index: 1; color:#549d95;}
.ph-group-title span::before,.ph-group-title span::after {content: ""; width: 53px; height: 63px; position: absolute; top: 0px; z-index: -1; left: -65px;background: url(../images/title_left.png) top center no-repeat;}
.ph-group-title span::after {transform: scaleX(-1); top: 0px; z-index: -1; left:unset;right: -65px;}


/* .slidecontain {  text-align: center; margin:20px auto; padding: 0px ; transition: 0.3s; max-width: 1000px;  z-index: 1;position: relative;border-radius: 40px;display: flex;flex-wrap: nowrap;justify-content: space-evenly;border: 29px solid;border-image:url(../images/tab_border.png) 40 repeat ;}
.slidecontain li { padding: 5px 30px; cursor: pointer;  margin: 0px;}
.slidecontain li a {font: 700 24px/1.4 'Noto Sans TC';color: #FFF;}
.slidecontain li.on a  {color:  var(--color2);} 
.slidecontain li.on:hover a div {color:var(--color2);}
.slidecontain li:hover a div {color: var(--color1);} 
.slidecontain li.on{background:var(--color1); color: var(--color2); } */

@media screen and (max-width:800px) {
.ph-group-title span::before,.ph-group-title span::after {content: ""; width: 30px; height: 38px; top: 0px; left: -35px;background-size: 100%;}
.ph-group-title span::after { top: 0px; right: -35px;left: unset;}
}

@media screen and (max-width:600px) {
.poiGoods{padding: 30px 0 ;}
/* .slidecontain li{padding: 5px 12px; }
.slidecontain li a div {font:400 16px/1.2 'Noto Sans TC';} */
 }


 .commonPoi.removehref *{cursor: default;}

.commonPoi { padding: 0 ;margin: 0 auto;} 
.commonPoi .ph-group {display: flex; margin: 20px auto 60px auto;position: relative;justify-content: center; flex-wrap:wrap;text-align: left; width: 100%;max-width:1400px ;}
.commonPoi .ph .ph-group-content { margin: 10px;   transition: 0.2s;  padding: 20px 20px 40px 20px;  width:22%;  position: relative;  flex-shrink: 0;background-color: rgba(255,255,255,0.8);border:solid 2px var(--orange);}
.commonPoi .ph .ph-group-content-photo { display: block;position: relative;}
.commonPoi .ph .ph-group-content-photo img {  width: 100%;}
.commonPoi  .ph .ph-group-content-text {  padding: 15px; }
.commonPoi  .ph .ph-group-content-text-name { color:var(--titlecolor);  font: 600 18px/1.4 'Noto Sans TC';display: block; padding:5px 0 ;}
.commonPoi  .ph .ph-group-content-text-detail {  margin: 5px auto; color: #484848;font:400 16px/1.5 'Noto Sans TC';}
.commonPoi  .ph .ph-group-content-text-detail a{  color: #484848;font:300 16px/1.5 'Noto Sans TC';}
.commonPoi  .ph .ph-group-content-text-price {color: #ba2a12;  position: absolute;  border-radius: 10px 10px 0 0; padding: 5px 10px;   font: bold 26px/1 'Noto Sans TC';  text-align: center;  display: block;    left: 0px;  bottom: 10px;width: 100%;}
.commonPoi  .ph .ph-group-content-text-price span {  font-size: 70%; line-height: 1.8;}
.commonPoi  .ph .ph-group-content-tag {  position: absolute;  top: -20px;  left:-20px;  color: #FFF;   padding: 5px 10px 5px 10px;  font: 17px / 1 'Noto Sans TC'; background: var(--orange);}
.commonPoi  .ph .ph-group-content-text-sale { margin: 10px auto; /*padding: 0 5px;*/color: var(--orange);}
.commonPoi  .ph .ph-group-content-text-sale a{ color: var(--orange);font: 16px/1.6 'Noto Sans TC';}
.commonPoi  .ph .link-right{background: #af7878; font:600 20px/1.2 'Noto Sans TC';color: #FFF;padding: 5px 30px;transition: 0.3s;display: inline-block;border-radius: 40px;}
.commonPoi  .ph .link-right:hover{transform: translateX(10px);}

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

@media only screen and (max-width: 900px) {
.commonPoi  .ph .ph-group-content { width: 46%; }
}

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

.commonPoi  .ph-group {flex-wrap:nowrap;justify-content: left;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;  padding: 30px 10%; border-radius: 0px;border: none;max-width: none;}
.commonPoi  .ph .ph-group-content-text-name { font: 600 16px/1.4 'Noto Sans TC'; }
.commonPoi  .ph .ph-group-content-text { padding: 10px;}
.commonPoi  .ph .ph-group-content-text-detail a{font:300 14px/1.5 'Noto Sans TC';}
.commonPoi  .ph .ph-group-content-text-detail{font:300 14px/1.5 'Noto Sans TC';}
.commonPoi  .ph .ph-group-content { width: 90%;  margin: 10px;padding: 12px 12px 40px 12px; }

    
}



/*list條列式*/



.listPoi .ph-group-content-text-name{color:#8d5e32;}
.listPoi .ph-group {padding:0;background: #FFF;margin: 30px auto;max-width: 1400px;}
.listPoi .ph-group-content{margin: 5px auto;transition: 0.2s;padding: 15px 10px; width:100%;position: relative;flex-shrink: 0;box-shadow: none;/*border-bottom: 3px dotted #ffdd61;*/text-align: left;}

.listPoi .ph-group-content:nth-of-type(odd){background-color: #f6f6f6;}
.listPoi .ph-group-content:nth-of-type(1) {margin: 0px;background: #ffe99e;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-photo {display: inline-block;width: 28%;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-photo a{display: block;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-photo .ph-group-content-tag {position: absolute;left: 0px; top: 0px;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text{padding: 10px 5px 40px 10px;width:70%;display: inline-block;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-name{display: block;margin: 5px auto;font:bold 22px/1.4 'Noto Sans TC';padding: 0;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-sale{display: inline-block;margin: 0px auto;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-sale a{font:20px/1.4 'Noto Sans TC';display: block;background: none;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-detail {color: #484848;font:18px/1.5 'Noto Sans TC';margin: 3px auto ;display: block;padding: 0;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-detail a {color:#484848;font:18px/1.5 'Noto Sans TC';padding:5px 0;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-price {bottom: 10px;}

.listPoi .ph-group-content:last-of-type {border-bottom: none;}
.listPoi .ph-group-content .ph-group-content-photo {width: auto;display: inline-block;}
.listPoi .ph-group-content .ph-group-content-photo a {display: none;}
.listPoi .ph-group-content .ph-group-content-text{padding: 0px;display: inline-block;width: auto;}
.listPoi .ph-group-content-photo img{width:100%;}
.listPoi .ph-group-content-text-name{color:var(--titlecolor);font:bold 18px/1.4 'Noto Sans TC';display: inline-block;padding: 0;}
.listPoi .ph-group-content-text-detail {display: none;}
.listPoi .ph-group-content-text-price {color:#ba2a12;;position: absolute;padding: 0px 10px;font:700 24px/1.4 'Noto Sans TC';text-align: center;display: block;right: 10px;bottom: 5px;}
.listPoi .ph-group-content-text-price span{font-size: 80%;line-height: 2;}
.listPoi .ph-group-content-tag { position: static;background: #ee9052;font:15px/1.4 'Noto Sans TC';color:#FFF;padding: 3px 10px;}
.listPoi .ph-group-content-text-sale{display:inline-block;margin: 3px auto 0 auto; font: 16px/1 'Noto Sans TC'; color: #ed7729;background: none;padding: 0;}
.listPoi .ph-group-content-text-sale a{ color: var(--orange);font: 16px/1.4 'Noto Sans TC';background: none;padding: 0;}
.listPoi .link-right {background: #af7878; font:600 20px/1.2 'Noto Serif TC';color: #FFF;padding: 5px 30px;transition: 0.3s;display: inline-block;border-radius: 40px;}
.listPoi .link-right:hover{transform: translateX(10px);}



@media only screen and (max-width: 1300px) {
.listPoi .ph-group-content {padding:  10px 10px 40px 10px;}
.listPoi .ph-group{width: 90%;}
}
   
   
 @media only screen and (max-width: 800px) {
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-photo {width: 100%;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text {width: 100%;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-name{font:bold 18px/1.4 'Noto Sans TC';}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-sale a{font:14px/1.4 'Noto Sans TC';}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-detail {font:14px/1.5 'Noto Sans TC';}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-detail a{font:14px/1.5 'Noto Sans TC';}
.listPoi .ph-group-content-text-name {display: block; font:bold 18px/1.2 'Noto Sans TC'; margin: 5px auto;}
.listPoi .ph-group-content .ph-group-content-text {width: 100%;padding: 10px;}
.listPoi .ph-group-content-text-sale{margin: 5px auto;}
.listPoi .ph-group-content-text-price { font: bold 20px/1.4 'Noto Sans TC';}


 }
     
 @media only screen and (max-width: 600px) {
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-name{font:600 16px/1.4 'Noto Sans TC';}
.listPoi .ph-group-content-text-name{font:600 16px/1.4 'Noto Sans TC';}
}

.useTicketMenu{display: flex;flex-wrap: wrap;justify-content: center;gap: 1em;margin: 30px;}
.useTicketMenu li{background: #FFF; color: #484848;padding: 10px 30px;font:20px/1.5 'Noto Sans TC';border-radius: 20px;cursor: pointer;}
.useTicketMenu li.on{color: #FFF; background: #484848;}

.useTicketImg > div{ display: none;border-radius: 40px;overflow: hidden;max-width: 1400px;margin: 0 auto;width: 90%;}
.useTicketImg > div.on{display: block;}
.useTicketImg  img{width: 100%;}

@media only screen and (max-width: 800px) {
.useTicketMenu{gap:0.5em;}
.useTicketMenu li{font:18px/1.5 'Noto Sans TC';padding: 7px 5px;}

}