@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) top center repeat;}
a { text-decoration: none;}


/*版頭*/
header.header { position: relative; height: 749px; background: url(../images/header230714.jpg) top center no-repeat;position: relative ;}
#ticket header.header { background: url(../images/header240215-2.jpg) top center no-repeat;}
header.header h1 img{ display: none;}

@media screen and (max-width:1024px) {
header.header { height: auto; background: none; }
header.header h1 img{ display: block; }
header.header h1 img {  width: 100%; }

}

/*選單*/    
.globalMenu {flex-wrap: nowrap;display: flex;justify-content: center;width: 100%;background: #57aaab;position: static;z-index: 6;padding: 10px 0;}
.globalMenu.sticky{position: fixed;top: 0;}
.globalMenu a {font:400 24px/1.2 'Noto Sans TC'; color: var(--yellow);padding: 5px 20px; border-radius: 40px;position: relative; }
.globalMenu a.on,.globalMenu a.on:hover{color:#e9624b;background:var(--yellow);font:500 24px/1.2 'Noto Sans TC';}
.globalMenu a.on{padding: 5px 20px 5px 40px;}
.globalMenu a.on:before{content:"";background: url(../images/menu_left.png) top center no-repeat;width: 50px;height: 56px;position: absolute;left: -17px;top: -9px;}
.globalMenu a:hover{background: var(--yellow);background: #6cd4d6;}




@media screen and (max-width:900px) {
.globalMenu a {font:400 16px/1.2 'Noto Sans TC';}
.globalMenu a.on,.globalMenu a.on:hover{font:400 16px/1.2 'Noto Sans TC';}
}

@media screen and (max-width:650px) {
.globalMenu {justify-content: left;overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;padding:10px 15px;}
.globalMenu a.on:before{width: 30px;height: 34px;background-size: 100%;left: -10px; top: -2px;}
.globalMenu a.on { padding: 5px 10px 5px 25px;}
.globalMenu a{padding: 5px 10px;}

}


/*top*/
.topBtn { position: fixed;  width: 50px; height: 50px;  background: rgba(0, 0, 0, 0.8); color: #FFF;  font: 16px/1.2 "微軟正黑體"; right: 3%;  bottom: 10%;    border-radius: 99em;    padding-top: 22px;    text-align: center;    cursor: pointer;    z-index: 100;}
.topBtn::before { content: '▲';  position: absolute; top: 8px;  left: 19px;  font: 12px/1.2 "微軟正黑體";}

@media screen and (max-width:670px) {
.topBtn {  width: 38px;  height: 38px;  font: 14px/1.2 "微軟正黑體";  right: 0%;  bottom: 10%; border-radius: 99em; padding-top: 16px; }
.topBtn::before { content: '▲';   position: absolute;  top: 1px;  left: 14px;  font: 10px/1.2 "微軟正黑體";  }
}


/*選單第二層*/
.poiMenu { position: sticky;  width: 100%;  top: 0px;  left: 0;  background: var(--orange);  text-align: center;  height: auto;  z-index: 5;  padding: 10px 0;display: flex;flex-wrap: nowrap;justify-content: center;box-shadow: 0px 0px 10px rgba(31, 114, 93, 0.2);}
.poiMenu li {  font:400 20px/1.2 'Noto Sans TC'; margin: 0px 5px;   position: relative;padding: 5px 10px;color: var(--yellow);cursor: pointer;border-radius: 40px;}
.poiMenu li:hover { background: #b95b1d;}


@media screen and (max-width:900px) {
.poiMenu{top: 0px;padding: 5px 0;}
.poiMenu li{font:400 16px/1.2 'Noto Sans TC';}
}

@media screen and (max-width:500px) {
.poiMenu { white-space: nowrap;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;justify-content: left;}
.poiMenu li{flex-grow: 1;}
}


/*index選單*/
.indexPoiMenu { position: sticky;  width: 100%;  top: 59px;  left: 0;  background: var(--orange);  text-align: center;  height: auto;  z-index: 5;  padding: 15px 0;display: flex;flex-wrap: nowrap;justify-content: center;box-shadow: 0px 0px 10px rgba(31, 114, 93, 0.2);}
.indexPoiMenu-sec{display: flex;flex-wrap: nowrap;align-items: center;gap:0 5px;font-size: 20px;font-weight: 600;}
.indexPoiMenu-sec-text{display: flex;flex-wrap: nowrap;gap: 10px;margin: 0 10px;font-size: 20px;font-weight: 400;}
.indexPoiMenu-sec-text li {cursor: pointer;color: #FFF;font-size: 18px;}
.indexPoiMenu-sec-text li a {color: #FFF;display: block;}
.indexPoiMenu-sec-text li:hover{color: #fff3cd;}
.indexPoiMenu-sec-title{color: #a81900;padding: 0px 8px;border-left: 1px solid #a81900; border-right: 1px solid #a81900;}

@media screen and (max-width:900px) {
.indexPoiMenu{top: 49px;padding: 8px 0;}
.indexPoiMenu-sec{font:400 16px/1.2 'Noto Sans TC';}
.indexPoiMenu-sec-text{font:400 16px/1.2 'Noto Sans TC';}
.indexPoiMenu-sec-text li {font-size: 14px;}
.indexPoiMenu-sec-title{font:600 16px/1.2 'Noto Sans TC';}
}


@media screen and (max-width:700px) {
.indexPoiMenu{ white-space: nowrap;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;justify-content: left;}
}

/*應該是通用*/
.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;}

}