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



.inlineBlockSpacing {
     letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
    
}


#mtkContainer,
#mtkContainer * { box-sizing: border-box; }

/* #mtkContainer{background: url(../images/bg3.jpg) top center repeat-y;} */
/* 
header.header { padding: 0; margin: 0; width: 100%; height:637px;  background: url(../images/index/header.jpg) top center no-repeat;position: relative;}
header.header h1 { display: none;}
header.header .headerTitle{font: 600 18px/1.4 "Noto Sans TC";color:#3f3f3f;position: absolute;bottom: 50px;left: 20%;background: rgba(255,255,255,0.7);width: 60%;padding: 30px;letter-spacing: 2px;max-width: 1200px;transition: 0.3s;}
header.header .headerTitle:hover{background: rgba(255,255,255,0.9);transform: translateY(-10px);}

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

header.header { height:auto;  background: none;}
header.header .headerTitle{position: static;width: 90%;margin: 20px auto;background: #fff093;}

header.header h1 { display:block; }
header.header h1 img{width: 100%;}
}
 */

/*版頭*/
header.kv-banner { position: relative; height: 450px; background-position: top center;background-repeat:no-repeat;}
header.kv-banner h1{opacity: 0;}

@media screen and (max-width:1024px) {
header.kv-banner { background-size: 160%; height: 37vw; }
}
@media screen and (max-width:768px) {
header.kv-banner .container-fluid.pin-header-banner,header.kv-banner .container-fullbg.pin-header{margin-top: 0;}
}




/*

.poi{width: 90%;margin: 0 auto;}
.ph-group-content{padding: 10px 10px 50px 10px;margin: 5px;} 
.ph-group-title span{margin: 0 auto; display: inline-block; text-align: center; padding: 0 25px; color: #49312c; font: 700 28px/1.6 "微軟正黑體"; position: relative;  }
.ph-group-content-text-name{color: #49312c;font-size: 20px;}
.ph-group-content-tag{background:#0f8879;}
.ph-group-content-text-detail{font:16px/1.4 "微軟正黑體";}
.ph-group-content-text-price{position: absolute;bottom: 0;text-align: center;left: 0;width: 100%;}
.ph-group-content-text-price span{font: 14px/3 "微軟正黑體";}
.ph-group-content-text-sale  {display: block; padding: 0px 5px; font: 700 15px/2 "微軟正黑體"; color: black; background:#ffe49d; }
.ph-group-content-text-detail {display: block; padding: 5px 5px; font: 14px/1.8 "微軟正黑體"; color: black; }

.ph-group-content-text-sale a{ color: black; background: #ffdc36;padding: 0 5px;}

.poi{position: relative;padding: 0 0 10px 0;}
.link-right{background:#daa55f;padding: 7px 29px 7px 15px;font:18px/1.4 "微軟正黑體";color: #FFF;text-align: center;display: inline-block;position: absolute;bottom: 0;right: 20px;clip-path: polygon(0 0, 86% 0, 100% 100%, 0% 100%);transition: 0.3s;}
.link-right::after{content: ">>" ;display: inline-block;font:10px/1 "微軟正黑體";transform:translateY(-5px);-webkit-animation: gogo 0.3s  infinite alternate;animation: gogo 0.3s  infinite alternate;}
.link-right:hover{padding: 7px 39px 7px 15px;color: #e8fe51;);transform: translateX(10px);}
*/



#localPage, #localPage * {box-sizing: border-box; }

#localPage {position: relative; top: 0; display: flex; flex-wrap: wrap; justify-content: center; z-index: 10; transform: translateY(-50px);position: relative;width: 100%;}
/*#localPage:after{content: "";height: 50px;background: #FFF;position: absolute;top:0;left:0;width: 100%;z-index: -1;}*/
#localPage a {display: inline-block; flex-shrink: 0;  text-decoration: none; font: bold 24px/1.4 "微軟正黑體"; color: #fff; margin:0 10px;transition: 0.3s;}
#localPage a:hover {color:#f1e262;transition: 0.3s;}
#localPage a img{max-width: 392px;width: 100%;transition: 0.3s;}
#localPage a:hover img{filter: brightness(110%);transform:translateY(-10px);}
#localPage a span {display: none;}

#localPage.fixed{position: fixed;top: 0;left: 0;transform: translateY(0px);text-align: center;background: #664a32;box-shadow: 5px 5px 5px rgba(0,0,0,0.2);padding: 5px;}
#localPage.fixed a img{max-width: 250px; display: none;}
#localPage.fixed a span{display: block;}


@media only screen and (max-width: 1000px) {
#localPage a{width: 40%;}
}

@media only screen and (max-width: 600px) {
#localPage a{font:bold 18px/1 "微軟正黑體";padding: 10px 0px;flex-grow: 1;}
#localPage{ transform: translateY(-25px);}
#localPage.fixed{padding: 3px;}
#localPage.fixed a {flex-grow: 0;}


}


.poiTitle{text-align: center;transform: translateY(-30px);}
.poiTitle h2{background: #f1e262;padding:15px 40px 15px 40px;color: #674a32;position: relative;text-align: center;display: inline-block;font: bold 36px/1 "微軟正黑體";}
.poiTitle h2::before{clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 38% 50%, 0% 0%);content:"";background: #f1e262;position: absolute;left:-19px;top: 0;width:50px;height: 100%;}
.poiTitle h2::after{clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 38% 50%, 0% 0%);content:"";background: #f1e262;position: absolute;right:-19px;top: 0;width:50px;height: 100%;transform: scale(-1);}




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

.poiTitle h2{font: bold 24px/1 "微軟正黑體";}

}





/*poi*/




.poiMenu {display: flex;flex-wrap: nowrap;justify-content: center;}

.poiMenu a{text-align: center;font: 24px/1 "微軟正黑體";background: #ffe20d;padding: 10px; margin: 10px;border:2px solid #674a32;color:#674a32;}
.poiMenu a.on{background: #674a32;color: #FFF;}


@media only screen and (max-width: 800px) {
.poiMenu a{font: 18px/1 "微軟正黑體";margin: 5px;}
}




.itemBase{ padding:0px 0;}






.poiBase{width: 100%;background: rgba(255,255,255,0.9);padding: 80px 10px 100px 10px;position: relative;}
.poiBase.itinerary{background: url(../images/index/bg.jpg) top center no-repeat #fff6d5;}
.poiBase.season{background: url(../images/index/bg2.jpg) top center repeat-y;}
.poiBase.spot{background: url(../images/index/bg3.jpg) top center repeat-y;}

.poi .ph { position: relative;text-align: center; }
.poi .slidecontain { display: flex; justify-content: center;display: none; }
.poi .slidecontain li { display: inline-block; margin: 5px 0; border-left:1px solid #12733e; }
.poi .slidecontain li:first-child { border-left: none; }
.poi .slidecontain li a { display: block; padding: 5px 15px; font: bold 18px/1 "微軟正黑體"; color: #12733e; letter-spacing: 2px; }
.poi .slidecontain li a:hover,
.poi .slidecontain li a.on { color: #12733e; background: #fffbc5; }
.poi .slidecontain img ,.poi.type1 .ph-group-title img { display: none;}


.ph-group  {width: 90%;margin: 30px auto 30px auto;padding: 10px 10px;position: relative;display: inline-flex;justify-content:center;flex-wrap: wrap;text-align: left;max-width: 1500px;}
.ph-group-title {text-align: center;width: 80%;margin: 10px auto 0 auto;border-radius: 20px 20px 0 0;}
.ph-group-title span {font:700 40px/1.6 "Noto Serif TC";color:#3f3f3f;padding: 5px 10px 15px 10px;letter-spacing:2px;position: relative;  background: url(../images/index/title03.png) bottom center no-repeat;}
.ph-group-title span::before{content: ""; display: block; position: absolute;  top: 0;  bottom: 0; left: -60px; margin: auto;  width: 55px; height: 94px;
 background: url(../images/index/title01.png) center center no-repeat;}
.ph-group-title span::after {  content: ""; display: block; position: absolute; top: 0; bottom: 0; right: -80px; margin: auto; width:60px; height: 97px; 
 background: url(../images/index/title02.png) center center no-repeat;}

.ph .ph-group-content:hover{transform: translateY(-10px);}
.ph .ph-group-content{margin: 15px 20px;transition: 0.2s;padding:0px 0px 40px 0px; width:30%;position: relative;flex-shrink: 0;background: #FFF;box-shadow: 0 0 10px rgba(0,0,0,0.1);border-radius: 30px;overflow: hidden;transition: 0.3s;}
.ph .ph-group-content-photo {display: block;border-radius: 20px 20px 0 0;}
.ph .ph-group-content-photo img{width: 100%;}
.ph .ph-group-content-text{padding: 10px;}
.ph .ph-group-content-text-name{color:#5a81d4;font:bold 18px/1.4 "微軟正黑體";margin: 10px auto;display: block;}
.ph .ph-group-content-text-detail{color:grey;font:14px/1.6 "微軟正黑體";margin: 5px auto ;padding: 0 10px;}
.ph .ph-group-content-text-detail a{color: grey;}
.ph .ph-group-content-text-price {color:#fa5b83;position: absolute;border-radius:10px 10px 0 0;padding: 5px 0px;font:bold 24px/1.4 "微軟正黑體";text-align: center;display: block;bottom: 0px;left: 30%;}
.ph .ph-group-content-text-sale{margin: 5px auto; font: bold 16px/2 "微軟正黑體"; color: #fa6687;background:#fff9b9;padding: 0;}
.ph .ph-group-content-text-sale a {color: #fa6687;}
.ph .ph-group-content-text-price span{font-size: 80%;line-height: 2;}
.ph .ph-group-content-tag {position: absolute;left: 0%; top: 24px; background: #fa5b83;font:15px/1.4 "微軟正黑體";color:#FFF;padding: 3px 10px;border-radius: 0 20px 20px 0;}



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


@media only screen and (max-width: 1000px) {
.ph .ph-group-content{width: 45%;margin: 15px 10px;}

}

@media screen and (max-width:600px) { 
.ph .ph-group-content-text-name{font:bold 16px/1.4 "微軟正黑體";}
.ph .ph-group-content-text-detail{font:14px/1.4 "微軟正黑體";}
.ph .ph-group-content-text-price{font:bold 20px/1.4 "微軟正黑體";padding: 0  0 10px 0;}
.ph .ph-group-content-text-sale{font: 14px/1.4 "微軟正黑體";}
.ph-group-title span{font:700 30px/1.6 "Noto Serif TC";}
.ph-group-title span::before{content: ""; display: block; position: absolute;  top: 0;  bottom: 0; left: -35px; margin: auto;  width: 30px; height: 94px;
 background: url(../images/index/title01.png) center center no-repeat;background-size: 100%;}
.ph-group-title span::after {  content: ""; display: block; position: absolute; top: 0; bottom: 0; right: -45px; margin: auto; width:30px; height: 97px; 
 background: url(../images/index/title02.png) center center no-repeat;background-size: 100%;}

.ph-group{padding: 1% 3%;width: 100% ;flex-wrap: nowrap; overflow-x: scroll;flex-grow: 0;align-items: stretch;display: flex;justify-content: left;}

.ph-group-title{width: 90%;}

.ph{padding: 0px;}
.ph .ph-group-content{width: 90%;margin: 10px auto;flex-shrink: 0;margin: 10px;}




.poiBase{padding: 40px 10px 60px 10px;}


}




/*part介紹*/
.season .ph .ph-group-content{display: inline-flex;margin: 30px 20px;transition: 0.2s;padding:0px 0px 0px 0px; width:80%;position: relative;flex-shrink: 0;background: #b5b8e4;box-shadow: 10px 10px 0px #FFF;border-radius: 30px;justify-content: center;flex-wrap: wrap;overflow: unset;}

.season .ph .ph-group-content-photo {border-radius: 0px 0px 0 0;width: 30%;order: 1;overflow: hidden;}

.season .ph .ph-group-content-photo img{width: 100%;border-radius: 30px 0 0 30px;}
.season .ph .ph-group-content-text{padding: 40px 80px;width: 60%;flex-grow: 1;order: 2;}
.season .ph .ph-group-content-text-name{color: #fff; font: 700 30px/1.4 "Noto Serif TC"; display: block; position: absolute; background: #fa5b83;top: -32px;border-radius: 99em;
    padding: 13px 19px;  max-width: 130px;max-height: 70px;text-align: center;}
.season .ph .ph-group-content-text-detail{color:color;font:500 18px/1.6 "Noto Sans TC";margin: 5px auto ;padding: 0 10px;}
.season .ph .ph-group-content-text-detail a{color: #fff;font:300 18px/1.6 "Noto Sans TC";}
.season .ph .ph-group-content-text-price {color:#fa5b83;position: absolute;border-radius:10px 10px 0 0;padding: 5px 0px;font:bold 24px/1.4 "微軟正黑體";text-align: center;display: block;bottom: 0px;left: 30%;display: none;}
.season .ph .ph-group-content-text-sale{margin: 5px auto; font: bold 16px/2 "微軟正黑體"; color: #fa6687;background:#fff9b9;padding: 0;}
.season .ph .ph-group-content-text-sale a {color: #fa6687;}
.season .ph .ph-group-content-text-price span{font-size: 80%;line-height: 2;}
.season .ph .ph-group-content-tag {position: absolute;left: 0%; top: 24px; background: #fa5b83;font:15px/1.4 "微軟正黑體";color:#FFF;padding: 3px 10px;border-radius: 0 20px 20px 0;display: none;}


.season .ph .ph-group-content-text-name::before{content: "";clip-path: polygon(50% 0%, 0 84%, 100% 100%); background: #fa5b83; position: absolute;  bottom: 6px;
    width: 30px;    height: 30px;    transform: rotate(115deg);}

.season .ph .ph-group-content:nth-of-type(even) {background:#ff86a5;}
.season .ph .ph-group-content:nth-of-type(even) .ph-group-content-photo {order: 2;}
.season .ph .ph-group-content:nth-of-type(even) .ph-group-content-text{order: 1;}
.season .ph .ph-group-content:nth-of-type(even) .ph-group-content-photo img{border-radius: 0px 30px 30px 0px;}
.season .ph .ph-group-content:nth-of-type(odd) .ph-group-content-text-name{ right: -46px; }

.season .ph .ph-group-content:nth-of-type(odd) .ph-group-content-text-name::before{ left: -3px;}
.season .ph .ph-group-content:nth-of-type(even) .ph-group-content-text-name::before{ right: -7px;background: #5a81d4;}
.season .ph .ph-group-content:nth-of-type(even) .ph-group-content-text-name{ left: -45px;background: #5a81d4;}


@media screen and (max-width:1400px) { 
.season .ph .ph-group-content{width: 100%}
.season .ph .ph-group-content-photo{width: 50%;}
.season .ph .ph-group-content-text{width: 40%;}
}


@media screen and (max-width:1000px) { 
.season .ph .ph-group-content:nth-of-type(odd) .ph-group-content-photo img{border-radius: 30px 30px 0px 0px;}
.season .ph .ph-group-content:nth-of-type(even) .ph-group-content-photo img{border-radius: 0px 0px 30px 30px;}
.season .ph .ph-group-content{width: 70%}
.season .ph .ph-group-content-photo{width: 100%;}
.season .ph .ph-group-content-text{width: 100%;}
}

@media screen and (max-width:600px) { 
.season .ph-group{justify-content: center;flex-wrap: wrap;overflow: unset;}
.season .ph .ph-group-content{width: 80%}
.season .ph .ph-group-content .ph-group-content-text {padding: 40px 40px;}
.season .ph .ph-group-content:nth-of-type(even) .ph-group-content-text{padding: 60px 40px 40px 40px;}
}





.spot .ph .ph-group-content{display: inline-flex;flex-wrap: wrap;margin: 15px 50px;transition: 0.2s;padding:0px 0px 40px 0px; width:40%;position: relative;flex-shrink: 0;background: none;box-shadow: none/*background: #c8ccff;padding: 10px;border-radius: 0*/;overflow: unset;}
.spot .ph .ph-group-content-photo {display: block; position: relative;}
.spot .ph .ph-group-content-photo img{width: 100%;border-radius: 99em;}
.spot .ph .ph-group-content-text{padding: 10px;}
.spot .ph .ph-group-content-text-name{color:#464646;font:700 28px/1.4 "Noto Sans TC" ;margin: 10px auto;display: block;border-bottom:1px solid #464646;padding: 10px 0; }
.spot .ph .ph-group-content-text-detail{color:grey;font:16px/1.6 "微軟正黑體";margin: 5px auto ;padding: 0 0px;}
.spot .ph .ph-group-content-text-detail a{color: grey;}
.spot .ph .ph-group-content-text-price {color:#fa5b83;position: absolute;border-radius:10px 10px 0 0;padding: 5px 0px;font:bold 24px/1.4 "微軟正黑體";text-align: center;display: block;bottom: 0px;left: 30%;}
.spot .ph .ph-group-content-text-sale{margin: 5px auto; font: bold 16px/2 "微軟正黑體"; color: #fa6687;background:none;padding: 0;}
.spot .ph .ph-group-content-text-sale a {color: #fa6687;}
.spot .ph .ph-group-content-text-price span{font-size: 80%;line-height: 2;}
.spot .ph .ph-group-content-tag {position: absolute;left: 0%; top: 24px; background: #fa5b83;font:15px/1.4 "微軟正黑體";color:#FFF;padding: 3px 10px;border-radius: 0 20px 20px 0;}


.spot .ph .ph-group-content:nth-of-type(odd) .ph-group-content-photo{order: 1;}
.spot .ph .ph-group-content:nth-of-type(odd) .ph-group-content-photo::after{content: "";position: absolute;top: 0;left: 0; background: url(../images/index/spot01.png) center center no-repeat;width: 140px;height: 123px;background-size: 100%;}

.spot .ph .ph-group-content:nth-of-type(even) .ph-group-content-photo::after{content: "";position: absolute;top: -35px;right: -10px; background: url(../images/index/spot02.png) center center no-repeat;width: 98px;height: 145px;background-size: 100%;}
.spot .ph .ph-group-content:nth-of-type(even) .ph-group-content-photo{order: 2;}

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






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

.spot .ph .ph-group-content{width: 90%;}
.spot .ph .ph-group-content:nth-of-type(odd) .ph-group-content-text{order:1;}
.spot .ph .ph-group-content:nth-of-type(even) .ph-group-content-text{order: 2;}


}

@media screen and (max-width:600px) {
.spot .ph-group{justify-content: center;flex-wrap: wrap;overflow: unset;}

.spot .ph .ph-group-content:nth-of-type(odd) .ph-group-content-photo::after{width: 80px;height: 123px;background-size: 100%;top: -20px;}
.spot .ph .ph-group-content:nth-of-type(even) .ph-group-content-photo::after{top: -35px;right: -10px;width: 80px;height: 145px;}


.spot .ph .ph-group-content-text-name{font:700 24px/1.4 "Noto Sans TC" ;}
}


nav.nav *{
    font-family: "Montserrat", "Noto Sans TC", "微軟正黑體";
}
nav.nav {
    z-index: 99;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    position: relative;
    transition: 0.3s;
    /*黏*/
  }
  nav.nav .nav-list {
    color: unset;
    background: #d1f1ff;
    padding: 0 24px;
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0px;
  }
  nav.nav .nav-list * {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
  }
  @media (max-width: 768px) {
    nav.nav .nav-list * {
      font-size: 18px;
      font-weight: 500;
    }
  }
  @media (max-width: 768px) {
    nav.nav .nav-list {
      flex-wrap: nowrap;
      justify-content: left;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
      overflow-x: scroll;
      margin-left: 0%;
      margin: 0px auto;
      padding: 0 8px;
    }
  }
  nav.nav .nav-list .nav-tab {
    cursor: pointer;
    text-align: center;
    position: relative;
    padding: 16px;
    white-space: nowrap;
    color: #0093c7;
    background: unset;
  }
  nav.nav .nav-list .nav-tab:hover {
    color: #fff;
    background: #3bc4f7;
  }
  @media (max-width: 576px) {
    nav.nav .nav-list .nav-tab:hover {
      color: #0093c7;
      background: unset;
    }
  }
  nav.nav .nav-list .nav-tab.on {
    color: #fff;
    background: #3bc4f7;
  }
  nav.nav.sticky {
    position: sticky;
    top: 0;
    left: 0;
    margin: 0px auto;
  }
  nav.nav .poi-list {
    color: unset;
    background: #677bd5;
    width: 100%;
    top: 0px;
    left: 0;
    text-align: center;
    z-index: 5;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 32px;
    padding: 16px 24px;
    position: relative;
  }
  nav.nav .poi-list * {
    /* font-size: 16px;
    font-weight: 400; */
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
  }
  @media (max-width: 768px) {
    nav.nav .poi-list * {
        font-size: 18px;
        font-weight: 500;
      /* font-size: 14px;
      font-weight: 500; */
    }
  }
  @media (max-width: 768px) {
    nav.nav .poi-list {
      flex-wrap: nowrap;
      justify-content: center;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
      overflow-x: scroll;
      margin-left: 0%;
    }
  }
  nav.nav .poi-list .poi-tab {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
    color: #fff;
    background: unset;
  }
  nav.nav .poi-list .poi-tab:hover {
    color: #FCF77F;
    background: unset;
  }
  

  .goTop {
    display: inline-block;
    position: fixed;
    z-index: 99;
    right: 30px;
    bottom: 30px;
    padding: 10px 10px 2px 10px;
    border-radius: 5em;
    font-size: 12px;
    line-height: 3em;
    text-align: center;
    color: #fff;
    background-color: hsl(286, 52%, 53%);
    text-decoration: none;
  }
  .goTop:hover {
    padding-top: 30px;
    background-color: #6f1fca;
    transition: all 0.2s;
  }
  .goTop::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 18px;
    width: 0;
    height: 0;
    border: 4px solid #000;
    border-color: transparent transparent #fff;
  }