@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:#e656ff; --color2:#fff; --titlefont:700 40px/1.2 'Noto Sans TC';--titlecolor: #FFF;--buttoncolor:#4d5bff;}

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

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



/*版頭*/
header.header { position: relative; height: 620px; 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:  linear-gradient(90deg, #683cbb 0%,#3170e1 100%);z-index: 100;}
.globalMenu.sticky{position: fixed;top: 0;}
.globalMenu a {font:600 24px/1.2 'Noto Sans TC'; color: #fff;padding: 10px 20px;  }
.globalMenu a.on,.globalMenu a.on:hover{color: var(--color1);background: #fff8b4;font:700 24px/1.2 'Noto Sans TC';}
.globalMenu a:hover{background: var(--color1);}


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


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

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

/*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: 49px;  left: 0;  background: #fff8b4;  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 Sans TC'; margin: 0px 5px;   position: relative;padding: 5px 10px;color: #3170e1;cursor: pointer;}
.poiMenu li:hover { background: #fff;}


@media screen and (max-width:992px) {
.poiMenu{top: 40px;padding: 5px 0;white-space: nowrap;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;justify-content: left;}
.poiMenu li{font:400 16px/1.2 'Noto Sans TC';flex-grow: 1;}
}


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



/*應該是通用*/
.hide-ph-menu .ph .ph-menu{display: none;}
.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: 1200px;  z-index: 1;position: relative;border-radius: 40px;display: flex;flex-wrap: nowrap;justify-content: center;}
.slidecontain li { padding: 5px 16px; cursor: pointer;  margin: 0px;}
.slidecontain li a {font: 700 18px/1.4 'Noto Sans 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{flex-wrap: wrap;}
.slidecontain li{padding: 5px 12px; }
.slidecontain li a div {font:400 16px/1.2 'Noto Sans 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;max-width:1600px ; width: 100%; border-radius: 50px;}

.item .ph-group-title span{ font:var(--titlefont);position: relative;z-index: 1; color: var(--titlecolor);}
.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: 20px 20px 40px 20px;  width:19%;  position: relative;  flex-shrink: 0;background: #112440de;}
.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: 17px / 1 'Noto Sans TC'; background: #478fff;text-align: center;width: 100%;color: #FFF;}
.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:#fff;  font: 600 18px/1.4 'Noto Sans TC';display: block; padding:5px 0 ;}
.item .ph .ph-group-content-text-detail {  margin: 5px auto; color: #ffe8db;font:200 15px/1.5 'Noto Sans TC';}
.item .ph .ph-group-content-text-detail a{  color: #ffe8db;font:200 15px/1.5s 'Noto Sans TC';}
.item .ph .ph-group-content-text-price {color: #eae27d;  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: 10px auto;   background: #ce43df;    letter-spacing: 1px;  padding: 0 5px;color: #fff;font: 16px/1.6 'Noto Sans TC';}
.item .ph .ph-group-content-text-sale a{ color: #fff;font: 16px/1.6 'Noto Sans TC';}

.item .ph .link-right{background: var(--buttoncolor); font:500 24px/1 'Noto Sans 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);}

/*hover動畫*/
.item .ph .ph-group-content::before, .item .ph .ph-group-content::after { position: absolute;content: ''; border: 1px solid transparent; width: 0; height: 0; z-index: -1; }
.item .ph .ph-group-content::before {top: 0; left: 0;}
.item .ph .ph-group-content::after {bottom: 0;right: 0;}
.item .ph .ph-group-content:hover::before, .item .ph .ph-group-content:hover::after { width: 100%; height: 100%;}
.item .ph .ph-group-content:hover::before { border-top-color: #be41d5; border-right-color: #be41d5; transition: width 0.2s ease-out, height 0.2s ease-out 0.2s; }
.item .ph .ph-group-content:hover::after { border-bottom-color:  #be41d5; border-left-color:  #be41d5; transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s; }
.item .ph .ph-group-content:hover{filter: brightness(1.2);}


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


/*tkt頁面*/
.morePoi .ph-menu{display: block;}
.morePoi .ph-title { color: var(--titlecolor); text-align: center;  font:var(--titlefont); display: inline-block !important;position: relative;z-index: 1;padding: 5px 0;}
.morePoi .ph-title::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;}
.morePoi .ph-title::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;}
.morePoi .ph-group{display: none;}
.morePoi .ph-group.on{display: flex;}
.morePoi .ph-group-title{display: none;}
.morePoi.item .link-right {display: none;}
.morePoi.item .link-right.on{display: inline-block;}

@media screen and (max-width:768px) {
    .morePoi .ph-title::before{width: 24px;height: 24px;left: -10px;bottom: -2px;}
    .morePoi .ph-title::after{width: 24px;height: 24px;right: -10px;top: -2px;}
}



/*flight機票頁*/
#flight .ph .ph-group{justify-content: center;}
#flight .ph .ph-group-content{background: rgba(0, 0, 0, 0.2);width: 20%;text-align: center;margin: 30px;}
#flight .ph .ph-group-content-text{padding: 0;}
#flight .ph .ph-group-content-photo {display: none;}


@media screen and (max-width:1300px) {
#flight .ph .ph-group-content{width: 40%;}
}


@media screen and (max-width:768px) {
#flight .item .ph-group {flex-wrap: wrap;}
#flight .ph .ph-group-content{width: 80%;}
}






/*index0.html*/
.boardTitle {text-align: center;margin: 10px auto;z-index: 1;position: relative;font:var(--titlefont);color: var(--titlecolor);display: inline-block;width: 100%;}
.boardTitle span{position: relative;}
.boardTitle 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;}
.boardTitle 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;}
.board{padding: 50px 0;}

@media screen and (max-width:768px) {
.boardTitle{margin: 20px auto;}
}


/*兩個影片*/
.movie{margin: 0px auto;}
.movie .movieBox .h2Title {color: var(--color1);font: 700 32px/1.4 "Noto Sans TC";margin: 10px auto;}
.movieBase{display: flex;flex-wrap: wrap;justify-content: center;max-width: 1400px;margin: 20px auto;padding: 0;}
.movieBox{margin: 20px;text-align: center;flex-wrap: wrap;width: 40%;/*align-content: baseline;justify-content:center;display: flex;*/display: block;}
.movieBox:hover{filter: brightness(1.2);}
.movieBox .ph-menu{display: none;}
.movieBox .ph-title{display: block;}
.movieBox .ph-group{margin: 20px auto;}
.movieBox .ph-group-content-photo{display: none;}
.movieBox .ph-group-title{display: none;}
.movieBox .ph-group-content-text{padding:0  20px;text-align: left;}
.movieBox .ph-group-content-text-name{font: 700 24px/1.4 "Noto Sans TC";color:#eae27d;display: block;margin: 5px auto;position: relative;}
.movieBox .ph-group-content-text-detail{padding: 5px 0; display: block;font: 300 18px/1.4 "Noto Sans TC";color:#fff;}
.movieBox .ph-group-content-text-detail a{font: 300 18px/1.4 "Noto Sans TC";color:#fff;}
.movieBox .ph-group-content-text-sale{display: none;margin: 5px auto;background: var(--color1);color: #fff;font: 300 20px/1.4 "Noto Sans TC";padding: 0px 10px;}
.movieBox .ph-group-content-text-price{display: block;border-radius: 10px;color:#FFF;font: 400 24px/1.6 "Noto Sans TC";text-align: center; transition: 0.3s;padding: 5px 0; margin:20px auto;background: var(--buttoncolor);}
.movieBox .movieBoxImg{width: 100%;}
.movieBox .movieBoxImg iframe {width: 100%;}
.movieBox .ph-group-content:hover .ph-group-content-text-price {transform: translateY(-5px);}



@media screen and (max-width:1000px) {
.movieBox {width: 90%;margin: 10px auto;padding: 0px;}
.movieBox .ph-group-content-text-name{font: 700 22px/1.4 "Noto Sans TC";}
.movieBox .ph-group-content-text-detail{font: 300 16px/1.4 "Noto Sans TC";}
.movieBox .ph-group-content-text-detail a{font: 300 16px/1.4 "Noto Sans TC";}
.movieBox .movieBoxImg {width: 100%;}
.movieBox .movieBoxPoi {width: 100%;padding: 0;}
.movieBox .ph-group-content-text-price{width: 80%;}

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

.movie {margin: 20px auto;}
}




/*blog篇*/
.blog{margin: 0px auto;} 
.blogBase{display: flex;flex-wrap: wrap;justify-content: center;max-width: 1300px;text-align: center;margin: 20px auto;}
.blogBoxPoi .ph-menu{display: none;}
.blogBoxPoi .slidecontain{margin: 20px auto;}
.blogBoxPoi .ph-group-content {display:inline-flex;flex-wrap: nowrap;justify-content: center;margin:30px auto;background: #112440de;}
.blogBoxPoi .ph-group-content-photo{width: 38%;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: block;font: 700 26px/1.4 "Noto Sans TC";color:var(--color1);}
.blogBoxPoi .ph-group-content-text{width: 45%;position: relative;;order: 2;text-align: center;padding: 30px;flex-grow: 1;}
.blogBoxPoi .ph-group-content-text-name{font: 700 24px/1.4 "Noto Sans TC";color:#ffe97e;display: block;margin: 5px auto ;position: relative;text-align: left;}
.blogBoxPoi .ph-group-content-text-detail{ display: block;text-align: left;margin-top: 20px;font: 300 18px/1.4 "Noto Sans TC";color:#fff;}
.blogBoxPoi .ph-group-content-text-detail a{font: 300 18px/1.4 "Noto Sans TC";color:#fff;}
.blogBoxPoi .ph-group-content-text-sale{display: none;margin: 5px auto;background: #269997;color: #fff;font: 300 20px/1.4 "Noto Sans TC";padding: 0px 10px;}
.blogBoxPoi .ph-group-content-text-price{display: inline-block;background: var(--buttoncolor);border-radius: 10px;color: #fff;font: 400 24px/1.4 "Noto Sans TC";text-align: center; transition: 0.3s;padding: 5px 0;margin: 20px auto;width: 50%;}
.blogBoxPoi .ph-group-content:hover .ph-group-content-text-price {transform: translateX(10px);}


/*poiHover*/
.blogBoxPoi .ph-group-content::before, .blogBoxPoi .ph-group-content::after { position: absolute;content: ''; border: 1px solid transparent; width: 0; height: 0; z-index: -1; }
.blogBoxPoi .ph-group-content::before {top: 0; left: 0;}
.blogBoxPoi .ph-group-content::after {bottom: 0;right: 0;}
.blogBoxPoi .ph-group-content:hover::before, .blogBoxPoi .ph-group-content:hover::after { width: 100%; height: 100%;}
.blogBoxPoi .ph-group-content:hover::before { border-top-color: #fff; border-right-color: #fff; transition: width 0.2s ease-out, height 0.2s ease-out 0.2s; }
.blogBoxPoi .ph-group-content:hover::after { border-bottom-color:  #fff; border-left-color:  #fff; transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s; }
.blogBoxPoi .ph-group-content:hover{filter: brightness(1.1);}




@media screen and (max-width:1000px) {
.blogBoxPoi .ph-group-content{display:flex;flex-wrap: wrap;width: 90%;}
.blogBoxPoi .ph-group-content-photo {width: 100%;}
.blogBoxPoi .ph-group-content-text-name{font: 700 20px/1.4 "Noto Sans TC";}
.blogBoxPoi .ph-group-content-text{width: 100%;padding: 15px;flex-grow: 0;}
.blogBoxPoi .ph-group-content-text-detail{margin-top: 10px;font: 300 15px/1.4 "Noto Sans TC";}
.blogBoxPoi .ph-group-content-text-detail a{padding: 5px ;font: 300 15px/1.4 "Noto Sans TC";}
.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:768px) {
.blog{padding: 40px 0;}
}


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

.spotBoxPoi .ph-menu{display: block;}
.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 Sans 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: none;flex-wrap: wrap;justify-content: center;margin: 20px auto 50px auto;}
.spotBoxPoi .ph-group.on{display: flex;}
.spotBoxPoi .ph .ph-group-content { margin: 7px;   transition: 0.2s;  padding: 20px 20px 40px 20px;  width: 23.1%;  position: relative; }
.spotBoxPoi .ph .ph-group-content:hover{background: rgba(0,0,0,0.45);}
.spotBoxPoi .ph .ph-group-content-photo { display: block;}
.spotBoxPoi .ph .ph-group-content-photo img {  width: 100%;}
.spotBoxPoi .ph .ph-group-content-text {  padding: 10px; }
.spotBoxPoi .ph .ph-group-content-text-name { color:#FFF;  font: 600 19px/1.4 'Noto Sans TC';display: block; margin:5px auto; }
.spotBoxPoi .ph .ph-group-content-text-detail { margin: 5px auto;color: #fff;font:200 16px/1.5 'Noto Sans TC';}
.spotBoxPoi .ph .ph-group-content-text-detail a{  color: #fff;font:200 16px/1.5 'Noto Sans 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 Sans 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:  #4d5bff;}
.spotBoxPoi .ph .ph-group-content-text-sale a{ color: var(--color2);font: 16px/1.6 'Noto Sans TC';}

.spotBoxPoi .ph-title {display: inline-block; margin: 15px auto;color: var(--color1);font: 700 34px/1.4 'Noto Sans TC';}
.spotBoxPoi .ph-group-title { display: none;}



@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: 768px) {
.spotBase{margin: 40px auto;}
.spotBoxPoi .ph-group-title span{font: 500 22px/1.4 'Noto Sans TC';}
.spotBoxPoi .ph .ph-group-content-text-name { font: 600 18px/1.4 'Noto Sans 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: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;}
}