@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
* {
    box-sizing: border-box; transition: 0.2s; vertical-align: top; letter-spacing: 0.05em;}
#mtkContainer {}
body {background:#d6edf1;}
a { text-decoration: none;}

/*版頭*/
header.header { position: relative; height: 654px; background: url(../images/header230714.jpg) top center no-repeat;position: relative ;}
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: #0a7878eb;position: absolute;bottom: 0;z-index: 100;height: 50px;}
.globalMenu.sticky{position: fixed;top: 0;background: #0a7878;}
.globalMenu a {font:600 24px/1.2 'Noto Serif TC', serif; color: #FFF;padding: 10px 20px;  }
.globalMenu a.on,.globalMenu a.on:hover{color: #0a7878;background: #f1eec9;font:800 24px/1.2 'Noto Serif TC', serif; }
.globalMenu a:hover{background: #20adad;}
@media screen and (max-width:800px) {
.globalMenu{height: 40px;}
.globalMenu a {font:400 18px/1.2 'Noto Serif TC', serif;padding: 10px;}
.globalMenu a.on,.globalMenu a.on:hover{font:400 18px/1.2 'Noto Serif TC', serif;}
}

@media screen and (max-width:500px) {
.globalMenu {justify-content: left;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: 50px;  left: 0;  background: #f1eec9;  text-align: center;  height: auto;  z-index: 99;  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:500 20px/1.2 'Noto Serif TC', serif; margin: 0px 5px;  border-bottom:1px solid #d8b724;  position: relative;padding: 5px 10px;color: #83701e;cursor: pointer;}
.poiMenu li:hover { background: #d8b724;color: #FFF;}
.poiMenu li.on::after { content: ""; position: absolute;   bottom: -19px;  left: 43%;   width: 20px;  height: 20px;  background: #3272a8; clip-path: polygon(50% 50%, 0 0, 100% 0);}

@media screen and (max-width:800px) {
.poiMenu{top: 40px;padding: 5px 0;}
.poiMenu li{font:400 18px/1.2 'Noto Serif TC', serif;}
}

@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;}
}



/*應該是通用*/
.poi {  margin: 0 auto;}
.item { padding: 80px 0;}
.item:nth-of-type(1){padding: 40px 0;}
.ph-menu{display: none;}

.ph { margin: 0 auto;  width: 100%;  text-align: center;}
.ph-group {   margin: 20px auto 80px auto;position: relative;  }

.item .ph-group:nth-of-type(even) {background: url(../images/bg.jpg) bottom center no-repeat;}
.item .ph-group:nth-of-type(odd) {background: url(../images/bg2.jpg) bottom center no-repeat;}
.item .ph-group-new{max-width:1400px ; width: 100%; display: inline-flex; justify-content: center;   flex-wrap: wrap;text-align: left;padding:  0 0 80px 0;}
.item .ph-group-title { color: #117878; text-align: center;display: block;padding: 30px 0 20px 0; }
.item .ph-group-title span{ font:900 36px/1.2 'Noto Serif TC', serif;position: relative; }
.item .ph-group-title span:before {content: "”"; width: 32px; height: 32px; position: absolute; top: -15px; z-index: -1; left: -44px; background: #fff1b2;    border-radius: 99em;    font: 900 45px/1.4 'Noto Serif TC', serif; padding: 10px;transform: scale(-1);}
.item .ph-group-title span:after {content: "”"; width: 26px; height: 26px; position: absolute; bottom: -13px; z-index: -1; right: -36px; background: #fff;    border-radius: 99em;    font: 900 45px/1.4 'Noto Serif TC', serif; padding: 10px;}
.item .ph .ph-group-content { margin: 7px;   transition: 0.2s;  padding: 20px 20px 40px 20px;  width: 23.1%;  position: relative;   background: rgba(255,255,255,0.7);}
.item .ph .ph-group-content:hover{background: #FFF;}
.item .ph .ph-group-content-photo { display: block;}
.item .ph .ph-group-content-photo img {  width: 100%;}
.item .ph .ph-group-content:hover .ph-group-content-photo img { transform: scale(1.05);}
.item .ph .ph-group-content-text {  padding: 10px; }
.item .ph .ph-group-content-text-name { color: #0b6a6a;  font: 600 19px/1.4 'Noto Serif TC', serif;display: block; padding:5px 0 10px 0;border-bottom: 1px solid #0a7878;}
.item .ph .ph-group-content-text-detail { margin: 10px auto;}
.item .ph .ph-group-content-text-detail a{  color: #6d6d6d;font:200 16px/1.5 'Noto Serif TC', serif;}
.item .ph .ph-group-content-text-price {color: #df6435;  position: absolute;  border-radius: 10px 10px 0 0; padding: 5px 10px;   font: bold 26px/1 "Century Gothic", "微軟正黑體";  text-align: center;  display: block;    right: 10px;  bottom: 10px;}
.item .ph .ph-group-content-text-price span {  font-size: 70%; line-height: 1.8;}
.item .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', serif; background: #e17a4a; clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);}
.item .ph .ph-group-content-text-sale { margin: 10px auto; color: #FFF;  background: #dbbb46;    letter-spacing: 1px;  padding: 0 5px;}
.item .ph .ph-group-content-text-sale a{ color: #FFF;font: 16px/1.6 'Noto Serif TC', serif;}
.item .ph .link-right{clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);background: #0a7878; font:600 36px/1.5 'Noto Serif TC', serif;color: #FFF;padding: 5px 36px 5px 46px;transition: 0.3s;display: inline-block;border-bottom: 5px solid #30a5a5;}
.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 only screen and (max-width: 800px) {
.item .ph-group:nth-of-type(even),.ph-group:nth-of-type(odd) {background-size: 200%;}
.item .ph-group-title span{font:900 28px/1.2 'Noto Serif TC', serif;}
}
@media screen and (max-width:670px) {
.item .ph .ph-group-content-text-name { font: 600 18px/1.4 'Noto Serif TC', serif; }
.item .ph .ph-group-content-text { padding: 10px;}
.item .ph .ph-group-content { width: 90%;  margin: 10px auto;padding: 12px 12px 40px 12px; }
.item .ph .link-right{font:600 30px/1.5 'Noto Serif TC', serif;}
    
}
@media screen and (max-width:500px) {
.item  .ph-group-new {  justify-content: left;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;   flex-wrap: nowrap; padding: 0 10% 60px 10%; }
.item  .ph .ph-group-content {  width: 92%;  flex-shrink: 0;  margin: 10px; }

}




/*gfg頁面*/
.morePoi .poiGoods {padding:  0 0 100px 0;}
.morePoi:nth-of-type(even) {background: url(../images/bg.jpg) bottom center no-repeat;}
.morePoi:nth-of-type(odd) {background: url(../images/bg2.jpg) bottom center no-repeat;}
.morePoi .ph-menu{display: block;}
.morePoi .ph-title { color: #117878; text-align: center;  font:900 36px/1.2 'Noto Serif TC', serif; display: inline-block;position: relative;}
.morePoi .ph-title:before {content: "”"; width: 32px; height: 32px; position: absolute; top: -15px; z-index: -1; left: -44px; background: #fff1b2;    border-radius: 99em;    font: 900 45px/1.4 'Noto Serif TC', serif; padding: 10px;transform: scale(-1);}
.morePoi .ph-title:after {content: "”"; width: 26px; height: 26px; position: absolute; bottom: -13px; z-index: -1; right: -36px; background: #fff;    border-radius: 99em;    font: 900 45px/1.4 'Noto Serif TC', serif; padding: 10px;}
.morePoi.item .ph-group{display: none;margin: 0 auto;background: none;  justify-content: center;    flex-wrap: wrap;text-align: left;max-width:1400px ; width: 100%;}
.morePoi .ph-group.on{display: flex;}
.morePoi .slidecontain {  text-align: center; margin: 50px auto 20px auto; padding:  0;   height: auto;  top: 40px;  z-index: 10;  width: 100%;   transition: 0.3s;  background: none;  }
.morePoi .slidecontain li {clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%); padding: 5px 30px;  width: auto;  display: inline-block;  cursor: pointer;  margin: 0px;  border-radius: 0px;border-bottom: 1px solid #117878;border-top:1px solid #117878;background: #FFF;}
.morePoi .slidecontain li.on a div,.morePoi .slidecontain li:hover a div{color: #fff;}
.morePoi .slidecontain li.on{background: #117878;  }
.morePoi .slidecontain li a div { color: #117878; font:400 20px/1.2 'Noto Serif TC', serif;}
.morePoi .slidecontain li:hover {  background:#117878;  }

.morePoi .ph-group-title{display: none;}

@media screen and (max-width:800px) {
.morePoi .ph-title{ font:900 28px/1.2 'Noto Serif TC', serif; }
.morePoi .ph-title:before {content: "”"; width: 25px; height: 25px; position: absolute; top: -15px; z-index: -1; left: -44px; background: #fff1b2;    border-radius: 99em;    font: 900 28px/1.4 'Noto Serif TC', serif; padding: 10px;transform: scale(-1);}
.morePoi .ph-title:after {content: "”"; width: 20px; height: 20px; position: absolute; bottom: -13px; z-index: -1; right: -36px; background: #fff;    border-radius: 99em;    font: 900 28px/1.4 'Noto Serif TC', serif; padding: 10px;}
.morePoi:nth-of-type(even),.morePoi:nth-of-type(odd) {background-size: 200%;}
}


@media screen and (max-width:600px) {
.morePoi .slidecontain li{padding: 5px 12px; }
.morePoi .slidecontain li a div {font:400 16px/1.2 'Noto Serif TC', serif;}

}
@media screen and (max-width:500px) {
.morePoi.item .ph-group {justify-content: left;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;   flex-wrap: nowrap;  padding: 1% 10%; }
}

/*flight機票頁*/
#flight .ph .ph-group-content-photo {display: none;}
#flight .ph-group:nth-of-type(odd),#flight .ph-group:nth-of-type(even){background-position-y: -59%; padding: 0px 0 95px 0;}
@media screen and (max-width:900px) {
#flight .ph-group:nth-of-type(odd),#flight .ph-group:nth-of-type(even){background-position-y: 100%;  padding: 0px 0 0px 0;}

}



/*index攻略*/
.h2Title{font:900 36px/1.2 'Noto Serif TC', serif;color: #117878;display: inline-block;position: relative;text-align: center;margin: 20px auto;}
.h2Title:before {content: "”"; width: 25px; height: 25px; position: absolute; top: -15px; z-index: -1; left: -44px; background: #fff1b2;    border-radius: 99em;    font: 900 28px/1.4 'Noto Serif TC', serif; padding: 10px;transform: scale(-1);}
.h2Title:after {content: "”"; width: 20px; height: 20px; position: absolute; bottom: -13px; z-index: -1; right: -36px; background: #fff;    border-radius: 99em;    font: 900 28px/1.4 'Noto Serif TC', serif; padding: 10px;}

@media screen and (max-width:800px) {
.h2Title{ font:900 28px/1.2 'Noto Serif TC', serif; }
.h2Title:before {content: "”"; width: 25px; height: 25px; position: absolute; top: -15px; z-index: -1; left: -44px; background: #fff1b2;    border-radius: 99em;    font: 900 28px/1.4 'Noto Serif TC', serif; padding: 10px;transform: scale(-1);}
.h2Title:after {content: "”"; width: 20px; height: 20px; position: absolute; bottom: -13px; z-index: -1; right: -36px; background: #fff;    border-radius: 99em;    font: 900 28px/1.4 'Noto Serif TC', serif; padding: 10px;}
}



/*兩個影片*/
.movie{background: url(../images/bg.jpg) bottom center no-repeat;padding:10px 0 ;}
.movieBase{display: flex;flex-wrap: wrap;justify-content: center;max-width: 1400px;margin: 30px auto;border-bottom: 5px dotted #FFF;}
.movieBase:nth-last-of-type(1) {border-bottom:none;}
.movieBox{width: 30%;padding: 0px 15px;margin: 8px;text-align: center;}
.movieBox .h2Title{font:900 28px/1.2 'Noto Serif TC', serif;}
.movieBox:hover .ph-group-content-text{background: #FFF;}
.movieBox .ph-menu{display: none;}
.movieBox .ph-group{margin: 20px auto;}
.movieBox .ph-group-content-photo{display: none;}
.movieBox .ph-group-title{display: none;}
.movieBox .movieBoxPoi{width:100%;}
.movieBox .ph-group-content-text{padding: 0px 20px 8px 20px;text-align: left;}
.movieBox .ph-group-content-text-name{font: 900 20px/1.4 "Noto Serif TC";color:#0a7878;padding: 15px 0; border-bottom: 1px solid #0a7878;display: block;margin: 5px auto;position: relative;z-index: 0;}
.movieBox .ph-group-content-text-detail{padding: 5px 0; display: block;}
.movieBox .ph-group-content-text-detail a{font: 300 16px/1.4 "Noto Serif TC";color:#6d6d6d;}
.movieBox .ph-group-content-text-sale{display: none;margin: 5px auto;background: #269997;color: #fff;font: 300 20px/1.4 "Noto Serif TC";padding: 0px 10px;}
.movieBox .ph-group-content-text-price{display: block;background: #df6435;border-radius: 20px;color: #fff;font: 400 24px/1.4 "Noto Serif TC";text-align: center; transition: 0.3s;padding: 5px 0;margin: 10px auto;}
.movieBox .movieBoxImg{width: 100%;padding: 20px;border-radius: 20px;background: #a8dbe1;}
.movieBox .movieBoxImg iframe {width: 100%;}
.movieBox .ph-group-content:hover .ph-group-content-text-price {transform: translateY(-5px);}


@media screen and (max-width:1200px) {
.movieBox{width: 45%;}

}

@media screen and (max-width:1000px) {
.movie {background-size: 200%;}
.movieBox {width: 90%;}
.movieBox .ph-group-content-text-name{font: 900 22px/1.4 "Noto Serif TC";}
.movieBox .ph-group-content-text-detail{font: 300 18px/1.4 "Noto Serif TC";}
.movieBox .movieBoxImg {padding: 20px;}

}






/*blog篇*/
.blog{background: url(../images/bg2.jpg) bottom center no-repeat;padding:10px 0 ;}
.blogBase{display: flex;flex-wrap: wrap;justify-content: center;max-width: 1400px;margin: 100px auto;text-align: center;}


.blogBoxPoi .ph-menu{display: none;}
.blogBoxPoi .ph-group-content {display:inline-flex;flex-wrap: nowrap;justify-content: center;margin:15px auto;padding: 20px;background: rgba(255,255,255,0.7);}
.blogBoxPoi .ph-group-content:nth-last-child(1){border-bottom:none;}
.blogBoxPoi .ph-group-content-photo{width: 40%;order: 1;}
.blogBoxPoi .ph-group-content:nth-of-type(even) .ph-group-content-photo{order: 2;}
.blogBoxPoi .ph-group-content:nth-of-type(even) .ph-group-content-text{order: 1;}
.blogBoxPoi .ph-group-content-photo img{width: 100%;}
.blogBoxPoi .ph-group-title{display: none;}
.blogBoxPoi .ph-group-content-text{width: 50%;position: relative;order: 2;text-align: center;padding: 30px;flex-grow: 1;}
.blogBoxPoi .ph-group-content-text-name{font: 900 28px/1.4 "Noto Serif TC";color:#fff;padding: 10px; display: block;margin: 5px auto;background: #dbbb46;position: relative;border-top: 1px solid #FFF;outline:5px solid #dbbb46; border-bottom: 1px solid #FFF;}
.blogBoxPoi .ph-group-content-text-detail{padding: 5px 20px; display: block;text-align: left;margin-top: 20px;}
.blogBoxPoi .ph-group-content-text-detail a{font: 300 18px/1.4 "Noto Serif TC";color:#6d6d6d;}
.blogBoxPoi .ph-group-content-text-sale{display: none;margin: 5px auto;background: #269997;color: #fff;font: 300 20px/1.4 "Noto Serif TC";padding: 0px 10px;}
.blogBoxPoi .ph-group-content-text-price{display: inline-block;background: #df6435;border-radius: 20px;color: #fff;font: 400 24px/1.4 "Noto Serif TC";text-align: center; transition: 0.3s;padding: 5px 0;margin: 20px auto;width: 50%;}
.blogBoxPoi .ph-group-content:hover {background: #FFF;}
.blogBoxPoi .ph-group-content:hover .ph-group-content-text-price {transform: translateX(10px);}



@media screen and (max-width:1000px) {
.blogBoxPoi .ph-group-content-text-name{font: 900 24px/1.4 "Noto Serif TC";}
.blogBoxPoi .ph-group-content{display:flex;flex-wrap: wrap;width: 90%;margin: 0 auto;}
.blogBoxPoi .ph-group-content-photo {width: 100%;}
.blogBoxPoi .ph-group-content-text-name{padding: 20px;}
.blogBoxPoi .ph-group-content-text{width: 90%;padding: 10px;flex-grow: 0;}
.blogBoxPoi .ph-group-content-text-detail{font: 300 18px/1.6 "Noto Serif TC";padding: 5px 10px;}
.blogBoxPoi .ph-group-content-text-price{width: 100%;}
.blogBoxPoi .ph-group-content:nth-of-type(even) .ph-group-content-photo{order: 1;}
.blogBoxPoi .ph-group-content:nth-of-type(even) .ph-group-content-text{order: 2;}
}


@media screen and (max-width:800px) {
.blog {background-size: 200%;}
}


/*景點*/
.spot{background: url(../images/bg.jpg) bottom center no-repeat;padding: 10px 0 60px 0;}
.spotBase{width: 100%;padding: 0px 30px;margin: 15px;text-align: center;max-width: 1400px;margin: 100px auto;}
.spotBoxPoi .ph-group{display: flex;flex-wrap: wrap;justify-content: center;}
.spotBoxPoi .ph .ph-group-content { margin: 7px;   transition: 0.2s;  padding: 20px 20px 40px 20px;  width: 23.1%;  position: relative;   background: rgba(255,255,255,0.7);}
.spotBoxPoi .ph .ph-group-content:hover{background: #FFF;}
.spotBoxPoi .ph .ph-group-content-photo { display: block;}
.spotBoxPoi .ph .ph-group-content-photo img {  width: 100%;}
.spotBoxPoi .ph .ph-group-content:hover .ph-group-content-photo img { transform: scale(1.05);}
.spotBoxPoi .ph .ph-group-content-text {  padding: 10px; }
.spotBoxPoi .ph .ph-group-content-text-name { color: #0b6a6a;  font: 600 19px/1.4 'Noto Serif TC', serif;display: block; padding:5px 0 10px 0;border-bottom: 1px solid #0a7878;}
.spotBoxPoi .ph .ph-group-content-text-detail { margin: 10px auto;}
.spotBoxPoi .ph .ph-group-content-text-detail a{  color: #6d6d6d;font:200 16px/1.5 'Noto Serif TC', serif;}
.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', serif; background: #e17a4a; clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);}
.spotBoxPoi .ph .ph-group-content-text-sale { margin: 10px auto; color: #FFF;  background: #dbbb46;    letter-spacing: 1px;  padding: 0 5px;}
.spotBoxPoi .ph .ph-group-content-text-sale a{ color: #FFF;font: 16px/1.6 'Noto Serif TC', serif;}


.spotBoxPoi .ph-group-title {clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%); padding: 5px 30px;  width: auto;  display: inline-block;  margin: 0px;  border-radius: 0px;border-bottom: 1px solid #117878;border-top:1px solid #117878;background: #fff;margin-top: 20px;}
.spotBoxPoi .ph-group-title span{ color: #117878;font: 600 28px/1.4 'Noto Serif TC', serif;}

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

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

@media only screen and (max-width: 800px) {
.spot {background-size: 200%;}
}

@media screen and (max-width:670px) {
.spotBoxPoi .ph .ph-group-content-text-name { font: 600 18px/1.4 'Noto Serif TC', serif;}
.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: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; }

}




.bnAD{margin: 30px auto 30px auto;text-align: center;}
.bnAD img{transition:0.3s;}
.bnAD img:hover{transform: scale(0.95);}
.bnAD img.pc{width: 90%;max-width: 1200px;margin: 0 auto;}
.bnAD img.m{width: 90%;max-width: 768px;display: none;margin: 0 auto;}

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

.bnAD img.pc{display: none;}
.bnAD img.m{display: block;}

}