@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{ --color1:#893720; --color2:#fff; --titlefont:700 40px/1.2 'Noto Serif TC';--titlecolor: #9a5b48;--buttoncolor:#9e2f2f;}

@media screen and (max-width:800px) {
:root{--titlefont:700 34px/1.2 'Noto Serif TC';}
}

* {
    box-sizing: border-box; transition: 0.2s; vertical-align: top; letter-spacing: 0.05em;}
#mtkContainer * {font-family: 'Noto Serif TC';vertical-align: top;}
body {background:   url(../images/bg_repeat.jpg) top center repeat-y,#ffedd7;background-position-y:-284px ;}
a { text-decoration: none;}



/*版頭*/
header.header { position: relative;}
header.header  h1{position: relative;}
header.header h1 .mainview img{width: 100%;} 
header.header h1 .title {position: absolute;top: 50%;left: 50%; transform: translateX(-50%)  translateY(-50%);z-index: 999; }

@media screen and (max-width:1130px) {
    header.header h1 .title {width: 42vw;}
}

@media screen and (max-width:800px) {
    header.header h1 .title {width: 70vw;}
}


/*選單*/    
.globalMenu {flex-wrap: nowrap;display: flex;justify-content: center;width: 100%;background:  linear-gradient(90deg, #623636 0%,#b56d51 100%);z-index: 100;}
.globalMenu.sticky{position: fixed;top: 0;}
.globalMenu a {font:600 24px/1.2 'Noto Serif TC'; color: #fff;padding: 10px 20px;  }
.globalMenu a.on,.globalMenu a.on:hover{color: var(--color1);background: #ebc99d;font:700 24px/1.2 'Noto Serif TC';}
.globalMenu a:hover{background: var(--color1);}


@media screen and (max-width:1024px) {
.globalMenu{position: static;}
}


@media screen and (max-width:800px) {
.globalMenu{height: 40px;}
.globalMenu a {font:400 18px/1.2 'Noto SaSerifns TC';padding: 10px;}
.globalMenu a.on,.globalMenu a.on:hover{font:400 18px/1.2 'Noto Serif TC';}
}

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

/*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: 48px;  left: 0;  background: #ebc99d;  text-align: center;  height: auto;  z-index: 99;  padding: 7px 0;display: flex;flex-wrap: nowrap;justify-content: center;}
.poiMenu li {  font:400 20px/1.2 'Noto Serif TC'; margin: 0px 5px;   position: relative;padding: 5px 10px;color: #935308;cursor: pointer;}
.poiMenu li:hover { background: #fff;}


@media screen and (max-width:800px) {
.poiMenu{top: 40px;padding: 5px 0;}
.poiMenu li{font:400 16px/1.2 'Noto Serif 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;}
}


.line{background:  #103974;width: 100%;height: 2px;max-width: 1400px;margin: 0 auto;}


/*應該是通用*/
.ph { margin: 0 auto;  width: 100%;  text-align: center;}
.poiGoods{padding: 80px 0 20px 0;}
.ph-menu{display: none;}
.slidecontain {  text-align: center; margin:30px auto; padding: 0px ; transition: 0.3s; max-width: 800px;  z-index: 1;position: relative;border-radius: 40px;display: flex;flex-wrap: nowrap;justify-content: center;}
.slidecontain li { padding: 5px 30px; cursor: pointer;  margin: 0px;}
.slidecontain li a {font: 700 24px/1.4 'Noto Serif TC';color: var(--color1);}
.slidecontain li.on a  {color:  var(--color2);} 
.slidecontain li.on:hover a div {color:var(--color2);}
.slidecontain li:hover a div {color: var(--color2);} 
.slidecontain li.on{background:var(--color1); color: var(--color2); }

@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 Serif TC';}
 }


/*商品POI*/
.item { padding: 0 ;} 
.item .ph-group {display: flex; margin: 20px auto 60px auto;position: relative;justify-content: center; flex-wrap:wrap;text-align: left; width: 100%; border-radius: 50px;max-width:1600px ;}
.item .ph-group-title {}
.item .ph-group-title span{ font:var(--titlefont);position: relative;z-index: 1; color: var(--titlecolor);border-bottom: 1px solid;}
/* .item .ph-group-title span::before{content: "";position: absolute;left: -20px;bottom: -6px;width: 48px;height: 48px;border-radius: 99em;background: linear-gradient(45deg, rgba(141,64,255,0.99) 0%,rgba(125,185,232,0) 100%);z-index: -1;}
.item .ph-group-title span::after{content: "";position: absolute;right: -20px;top: -6px;width: 48px;height: 48px;border-radius: 99em;background: linear-gradient(-135deg, rgba(141,64,255,0.99) 0%,rgba(125,185,232,0) 100%);z-index: -1;}
 */

.item .ph .ph-group-content { margin: 10px;   transition: 0.2s;  padding: 10px 10px 40px 10px;  width:19%;  position: relative;  flex-shrink: 0;background: rgba(255,255,255,0.8);box-shadow: 0px 0px 10px rgba(0,0,0,0.1);}
.item .ph .ph-group-content-photo { display: block;position: relative;display: flex;flex-wrap: wrap;justify-content: center;}
.item .ph .ph-group-content-photo a {order: 2;}
.item .ph .ph-group-content-photo .ph-group-content-tag {order: 1;padding: 5px 15px 5px 10px;  font: 14px / 1 'Noto Serif TC'; background: rgba(52,103,181,1);text-align: center;color: #FFF;left: 3px;top: 3px;position: absolute; border-radius: 20px;}
.item .ph .ph-group-content-photo img {  width: 100%;}
.item .ph .ph-group-content-text {  padding: 15px; }
.item .ph .ph-group-content-text-name { color:var(--titlecolor);  font: 600 18px/1.4 'Noto Serif TC';display: block; padding:5px 0 ;}
.item .ph .ph-group-content-text-detail {  margin: 5px auto; color: #686868;font:200 15px/1.5 'Noto Serif TC';}
.item .ph .ph-group-content-text-detail a{  color: #686868;font:200 15px/1.5 'Noto Serif TC';}
.item .ph .ph-group-content-text-price {color: #db2121;  position: absolute;  border-radius: 10px 10px 0 0; padding: 5px 10px;   font: bold 26px/1 "Century Gothic", "微軟正黑體";  text-align: center;  display: block;    left: 0px;  bottom: 10px;width: 100%;}
.item .ph .ph-group-content-text-price span {  font-size: 70%; line-height: 1.8;}
/* .item .ph .ph-group-content-tag {  position: absolute;  top: -10px;  left:-10px;  color: #FFF;  letter-spacing: 2px;  padding: 5px 15px 5px 10px;  font: 17px / 1 'Noto Sans TC'; background: rgba(0, 0, 0, 0.753);} */
.item .ph .ph-group-content-text-sale { margin: 5px auto;   background: #ffe8b1;    letter-spacing: 1px;  padding: 0 5px;color: #c91313;font: 16px/1.6 'Noto Serif TC';}
.item .ph .ph-group-content-text-sale a{ color: #c91313;font: 16px/1.6 'Noto Serif TC';}

.item .ph .link-right{background: var(--buttoncolor); font:500 24px/1 'Noto Serif TC';color: #FFF;padding: 5px 30px;transition: 0.3s;display: inline-block;margin-bottom: 80px;border-radius: 20px;}
.item .ph .link-right:hover{transform: translateX(10px);}



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

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

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

.item .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;gap: 10px;}
.item .ph .ph-group-content-text-name { font: 600 18px/1.4 'Noto Serif TC'; }
.item .ph .ph-group-content-text { padding: 10px;}
.item .ph .ph-group-content { width: 100%;  margin:0px;padding: 12px 12px 40px 12px; }
.item .ph .link-right{font:600 30px/1.5 'Noto Serif TC';margin-bottom: 40px;}
    
}







/*景點*/
.spotBase{width: 100%;text-align: center;max-width: 1200px;margin:0px auto;padding: 80px 0 20px 0;}

.spotBoxPoi .ph-menu{display: none;}
.spotBoxPoi .slidecontain {  text-align: center; margin:30px auto; padding: 0px ; transition: 0.3s; max-width: 800px;  z-index: 1;position: relative;border-radius: 40px;display: flex;flex-wrap: nowrap;justify-content: center;}
.spotBoxPoi .slidecontain li { padding: 5px 10px; cursor: pointer;  margin: 0px 5px;}
.spotBoxPoi .slidecontain li a {font: 500 22px/1.4 'Noto Serif TC';color: var(--color2);}
.spotBoxPoi .slidecontain li.on a  {color:  var(--color2);} 
.spotBoxPoi .slidecontain li.on:hover a div {color:var(--color2);}
.spotBoxPoi .slidecontain li:hover a div {color: var(--color1);} 
.spotBoxPoi .slidecontain li.on{background:var(--color1); color: var(--color2); }

.spotBoxPoi .ph-group{display: flex;flex-wrap: wrap;justify-content: center;margin: 20px auto 50px auto;max-width: 1400px;}
.spotBoxPoi .ph .ph-group-content { margin: 7px; transition: 0.2s;  padding: 50px 20px;  width: 100%;  position: relative;display: flex;flex-wrap: nowrap;gap: 40px;justify-content: center;}
.spotBoxPoi .ph .ph-group-content:hover{background: rgba(233,210,185,0.6);} 
.spotBoxPoi .ph .ph-group-content-photo { width: 40%;order: 1;position: relative;}
.spotBoxPoi .ph .ph-group-content:hover img {transform: scale(0.98);}
.spotBoxPoi .ph .ph-group-content-photo img {  width: 100%;}

.spotBoxPoi .ph .ph-group-content-photo::before {  content: "";top:-30px;right: -30px;background: url(../images/img_border.png);width:150px;height: 150px;position: absolute;}
.spotBoxPoi .ph .ph-group-content-photo::after {  content: "";bottom:-30px;left: -30px;background: url(../images/img_border.png);width: 150px;height: 150px;position: absolute;transform: rotate(180deg);}
.spotBoxPoi .ph .ph-group-content-text {  padding: 10px 15px;width: 50%; text-align: left;order: 2;}
.spotBoxPoi .ph .ph-group-content-text-name { color:var(--titlecolor);  font: 600 30px/1.4 'Noto Serif TC';display: block; margin:5px auto; }
.spotBoxPoi .ph .ph-group-content-text-detail { margin: 5px auto;color: var(--titlecolor);font:200 16px/1.5 'Noto Serif TC';background: rgba(255,255,255,0.5);padding: 20px;}
.spotBoxPoi .ph .ph-group-content-text-detail a{  color: var(--titlecolor);font:200 16px/1.5 'Noto Serif TC';}
.spotBoxPoi .ph .ph-group-content-text-price {display: none; color: #df6435;  position: absolute;  border-radius: 10px 10px 0 0; padding: 5px 10px;   font: bold 26px/1 "Century Gothic", "微軟正黑體";  text-align: center;     right: 10px;  bottom: 10px;}
.spotBoxPoi .ph .ph-group-content-text-price span {  font-size: 70%; line-height: 1.8;}
.spotBoxPoi .ph .ph-group-content-tag {  position: absolute;  top: 0px;  left: 0px;  color: #FFF;  letter-spacing: 2px;  padding: 5px 15px 5px 10px;  font: 17px / 1 'Noto Serif TC'; background: #e17a4a; clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);}
.spotBoxPoi .ph .ph-group-content-text-sale { margin: 10px auto; color: var(--color2);  letter-spacing: 1px;  padding: 0 5px;background:  linear-gradient(45deg, #a95e3f, transparent);}
.spotBoxPoi .ph .ph-group-content-text-sale a{ color: var(--color2);font: 16px/1.6 'Noto Serif TC';}

.spotBoxPoi .ph .ph-group-content:nth-of-type(odd) .ph-group-content-photo{order: 2;}
.spotBoxPoi .ph .ph-group-content:nth-of-type(odd) .ph-group-content-text{order: 1;}


.spotBoxPoi .ph-group-title {  font:var(--titlefont);position: relative;z-index: 1; color: var(--titlecolor);}
.spotBoxPoi .ph-group-title span{border-bottom: 1px solid;}


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

@media only screen and (max-width: 900px) {
.spotBoxPoi .ph .ph-group  {flex-wrap: wrap;}
.spotBoxPoi .ph .ph-group-content { width: 46%; align-content: baseline;flex-wrap: wrap; }

.spotBoxPoi .ph .ph-group-content:nth-of-type(odd) .ph-group-content-photo{order: 1;}
.spotBoxPoi .ph .ph-group-content:nth-of-type(odd) .ph-group-content-text{order: 2;}
.spotBoxPoi .ph .ph-group-content-photo { width: 100%;}
.spotBoxPoi .ph .ph-group-content-text { width: 100%;flex-grow: 0;}


}

@media only screen and (max-width: 768px) {
.spotBase{margin: 40px auto;}
.spotBoxPoi .ph-group-title span{font: 500 22px/1.4 'Noto Serif TC';}
.spotBoxPoi .ph .ph-group-content-text-name { font: 600 18px/1.4 'Noto Serif TC';; }
.spotBoxPoi .ph .ph-group-content-text { padding: 10px;}
.spotBoxPoi .ph .ph-group-content { width: 90%;  margin: 10px auto;padding: 12px 12px 40px 12px; }
}


@media screen and (max-width:600px) {
    .spotBase{padding: 30px 0 ;}
}

@media screen and (max-width:500px) {
.spotBoxPoi  .ph-group { justify-content: left;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;   flex-wrap: nowrap; padding: 0 10% 60px 10%; }
.spotBoxPoi  .ph .ph-group-content {  width: 92%;  flex-shrink: 0;  margin: 10px; }
.spotBoxPoi .slidecontain li {padding: 5px;}
}