* { box-sizing: border-box; font-family: "微軟正黑體","思源黑體","arial"; transition: 0.3s;}
#mtkContainer {background: #f9f9f9; padding-bottom: 40px;}
a{text-decoration: none; }
/*版頭*/

header.header{position: relative; height: 550px; background: url(../images/header.jpg) top center no-repeat;}
header.header h1{display: none;}
/* 按鈕 */

.wrap-menu{position: sticky; width: 100%; top: 0; left: 0; background:#49c0c3; text-align: center;height: auto;z-index: 99;}
.wrap-menu ul.menu-bar{width: 100%; margin: 0 auto;}
.wrap-menu ul.menu-bar li{display: inline-block;  margin: 0px -2px;}
.wrap-menu ul.menu-bar li a{font:24px/1.2 "微軟正黑體" ; color: #ffffff;padding: 9px 30px;display: inline-block;transition:0.3s;}
.wrap-menu ul.menu-bar li a:hover,.wrap-menu ul.menu-bar li a.on {background:#0998db;}



.wrap-menu .st0{fill: #FFF;}
.wrap-menu svg{width: 22px;height: 22px;display: inline-block;}
.menu-bar li a:hover svg,.wrap-menu ul.menu-bar li a.on svg{transform: translateY(-5px);}

.wrap-menu ul.menu-bar li a:hover svg{animation:upDown ease-out 0.5s infinite;}

@keyframes upDown{
  0%{
    transform: translateY(0px);
  }
  25%{
    transform: translateY(-5px);
  }

}


.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 "微軟正黑體";}


/*poi模組*/
.poi{margin: 0 auto;padding: 0px 0 20px 0;}
.poiMenu {text-align: center;margin: 0px auto;/*border-bottom:1px solid #f84646;*/ background:#f4f065;padding: 8px 0;position: sticky;height: auto;top: 46px;z-index: 99;}
.poiMenu li{color:#000;font:20px/1.2 "微軟正黑體"; padding: 3px 20px;width: auto;display: inline-block;cursor: pointer;margin: 0 10px;}
.poiMenu li:hover{background:#FFF;color:#000;}





.poiGoods{border-radius: 20px;/*margin: 20px auto*/;}

.poiGoods > article {padding: 20px 0;margin: 0 auto;width: 100%;}

.ph-group  {width: 100%;margin: 0 auto 0px auto;padding: 10px 10px;position: relative;display: inline-flex;justify-content:center;flex-wrap: wrap;}
.ph{margin: 0 auto;width: 100%;width: 80%;max-width: 1300px;}
.ph:hover{transform: none;}
.slidecontain {display:none;}


.ph .ph-group-content{margin: 15px 5px;transition: 0.2s;padding: 10px 10px 40px 10px; width: 24.1%;position: relative;flex-shrink: 1;background: #FFF;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.ph .ph-group-content-photo {display: block;overflow: hidden;}
.ph .ph-group-content-photo img{width: 100%;}
.ph .ph-group-content:hover .ph-group-content-photo img{transform: scale(1.05);}
.ph .ph-group-content-text{padding: 10px 15px;}
.ph .ph-group-content-text-name{color:#0bb0b4;font:bold 18px/1.4 "微軟正黑體";/*margin: 10px auto;*/display: block;/*padding: 10px 0;*/}
.ph .ph-group-content-text-detail{color:#000;font:15px/1.4 "微軟正黑體";margin: 5px auto ;}
.ph .ph-group-content-text-price {color:#ff5159;position: absolute;border-radius:10px 10px 0 0;padding: 5px 10px;font:bold 24px/1.4 "微軟正黑體";text-align: center;display: block;right: 10px;bottom: 10px;}
.ph .ph-group-content-text-price span{font-size: 80%;line-height: 1.8;}
.ph .ph-group-content-tag {position: absolute;left: 0%; top: 25px; background: #ff8500;font:15px/1.4 "微軟正黑體";color:#FFF;padding: 3px 10px;border-radius: 0 20px 20px 0;}
.ph .ph-group-content-text-sale{margin: 5px auto; font: 16px/1.4 "微軟正黑體"; color:#0998db;/*background:#ffff93;display: inline;*/}

.ph .link-right{ background:#69cdd0; text-align: center; display: block; margin: 10px auto 20px auto; width:35%; padding: 10px 20px 10px 10px;  color: #FFF; border-radius: 20px; font-size: 18px;min-width: 350px;position: relative;}
.ph .link-right:after{content: "→";width: 90%;height: 90%;position: relative;border-radius: 99em;background:#FFF;color:#81cccf;padding: 4px 7px;right: -10px;transition: 0.3s;}
.ph .link-right:hover:after{right: -15px;}



.ph-group-title,.moreTab h4 {text-align: left;margin: 10px auto 0 auto;border-radius: 20px 20px 0 0;display: block;border-bottom: 2px solid #505050;}
.ph-group-title span ,.moreTab h4 span{font:bold 24px/1.6 "微軟正黑體";color:#505050;padding: 5px 10px;}
.ph-group-title{width: 100%;}
.moreTab h4{width: 80%;max-width: 1300px;}



/*2層+tab切換*/
.moreTab{background:url(../images/bg.jpg) no-repeat,#fffcf1;width: 80%;}
.moreTab .slidecontain{display: flex;flex-wrap: wrap;justify-content: left;margin:10px auto;}
.moreTab .slidecontain li{display: inline-block;padding: 10px 15px ;background:#e7bd8a;margin:0 5px;transition:0.3s;cursor: pointer;border-radius: 0px;flex-grow: 1;}
.moreTab .slidecontain li.on,.moreTab .slidecontain li:hover{background:#c98b48;}
.moreTab .slidecontain li.on a,.moreTab .slidecontain li:hover a{color:#FFF;}

.moreTab .slidecontain li a {color:#FFF;font: 16px/1 "微軟正黑體";}
.moreTab .ph-group-title {display: none;}
.moreTab .ph-group.on {display: flex;}
.moreTab .ph-group{display: none;}


/*Blog POI*/
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content {width: 47%;margin: 10px 10px;padding: 10px 10px 40px 10px;display: inline-flex;flex-wrap: wrap;border:2px dashed #9ce0e2;transition: 0.3s;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content:hover{border: 2px solid #9ce0e2;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-photo {width: 35%;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text{width: 62%;flex-wrap:wrap;position: static; flex-shrink: 1;flex-grow: 1;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text-detail{font:14px/1.4 "微軟正黑體";}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text-price {position: absolute;right: 20px;bottom: 0px;background: #39a3a6;color:#FFF;font:20px/1.4 "微軟正黑體";transition:0.3s;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text-price:hover{padding: 5px 10px 10px 10px;filter: brightness(1.1);}



/*風景POI*/

.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content{padding: 10px;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-price {display: none;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text {position: relative;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-name{margin-left: 22px;font:bold 20px/1.4 "微軟正黑體";}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-detail{font:14px/1.4 "微軟正黑體";}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content:nth-of-type(even) .ph-group-content-text-name{color:#78b361;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content:nth-of-type(even) .ph-group-content-text-name:before{background: url(../images/here2-green.png );}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-name:before{content: "";background: url(../images/here2.png );width: 24px;height: 24px;position: absolute;left: 10px;top: 10px;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-sale {color:#e95555;}





/*specialItem*/

.specialItem .ph .ph-group-title{display: none;}
.specialItem .ph .ph-group-content {width: 1010px;display: flex;flex-wrap: nowrap; border-radius: 0 20px 20px 0px;border:20px solid #a5dfe0; border-image: url(../images/spcialItem.png) 40 40 40 75 repeat; background:#eff7f0;box-shadow: none;padding: 20px; border-left:60px solid #991717;position: relative;}
.specialItem .ph .ph-group-content::before{content: "";width: 141px;height: 78px;background: url(../images/spcialItem-2.png) no-repeat;position: absolute;left: -148px;top: 27%;z-index: 9;}
.specialItem .ph .ph-group-content .ph-group-content-photo{width: 35%;}
.specialItem .ph .ph-group-content .ph-group-content-text{width: 55%;flex-grow: 1;}
.specialItem .ph .ph-group-content-text-name{color:#000000;font: bold 24px/1.4 "微軟正黑體";border-bottom: 1px solid #000;padding: 5px 0 ;}
.specialItem .ph .ph-group-content .ph-group-content-text-detail{color:#000;font:16px/1.4 "微軟正黑體";padding: 5px 0 ;}
.specialItem .ph .ph-group-content-text-price {bottom: 5px;}




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

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

.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content {width: 45%;}
  

}


@media screen and (max-width:1200px) { 
.wrap-menu ul.menu-bar li a{font:18px/1.4 "微軟正黑體";padding:10px 10px;}
.wrap-menu svg{display: none;}
.poiMenu li{font:16px/1.4 "微軟正黑體";margin:0px 3px;padding: 3px 10px;}
.poiMenu{top:45px;}
.poiGoods > article{width: 100%;margin: 0 auto;}


.specialItem .ph .ph-group-content {width: 95%;}

.ph .link-right{width: 50%;}
}

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

header.header{height: auto; background: none;}
header.header h1{display: block;}
header.header h1 img{width: 100%;}

}


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

.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content {width: 45%;margin: 10px auto;padding: 10px 10px 40px 10px;display:block;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-photo {width: 100%;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text{width: 100%;}

}

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

.poi {padding: 0 0 10px 0;}
.poiMenu{top:39px;}
.poiMenu{/*background:#fff1db;*/white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;border: none;}
.poiMenu li {margin:0px 10px;font:15px/1.6 "微軟正黑體";padding: 0px;}

.ph .ph-group-content{width: 48%;}
.moreTab .slidecontain li{margin:5px;flex-shrink: 1; flex-grow: 1;display: flex;justify-content: center;}
.moreTab .slidecontain li a {font: 15px/1 "微軟正黑體";text-align: center;}


.ph .link-right{width: 80%;}
}

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

.wrap-menu{white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;}
.wrap-menu ul.menu-bar{display: inline-flex; flex-wrap: nowrap;}
.wrap-menu ul.menu-bar li{flex-grow: 1;}
.wrap-menu ul.menu-bar li a{font:14px/1.4 "微軟正黑體";padding:10px 7px;}

.wrap-menu ul.menu-bar li a:hover, .wrap-menu ul.menu-bar li a.on{width: 100%;}



.poiMenu li{font:14px/1.4 "微軟正黑體";}
.ph .ph-group-content-text-name{font:bold 16px/1.4 "微軟正黑體";}
.ph .ph-group-content-text{padding: 10px 0;}
.ph .ph-group-content-text-detail{font:14px/1.4 "微軟正黑體";}
.ph .ph-group-content-text-price{font:bold 20px/1.4 "微軟正黑體";}
.ph-group-content-text-sale{font:14px/1.4 "微軟正黑體";}
.ph-group-title span ,.moreTab h4 span{font:bold 20px/1.6 "微軟正黑體";}

.ph-group{padding: 1% 3%;width: 100%;flex-wrap: nowrap; flex-shrink: 0; justify-content: left;overflow-x: scroll;}
.ph-group-title,.moreTab h4{width: 90%;}
.poi .ph{width: 100%;}
.ph .ph-group-content{width: 80%;margin: 10px;flex-shrink: 0;}
.ph .ph-group-content-text-sale{font: 14px/1.4 "微軟正黑體";}


.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content {width: 90%;margin: 10px;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-name{margin-left: 27px;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-name:before{left: 0px;top: 10px;}

.specialItem .ph .ph-group-content::before{content: none;}
.specialItem .ph .ph-group-content {display: flex;flex-wrap: wrap; border-radius: 0px;border: 8px solid #a5dfe0; box-shadow: none;padding: 20px; }
.specialItem .ph .ph-group-content .ph-group-content-photo{width:100%;}
.specialItem .ph .ph-group-content .ph-group-content-text-name{font: bold 20px/1.4 "微軟正黑體";}
.specialItem .ph .ph-group-content .ph-group-content-text{width: 100%;flex-grow: 0;}



.ph .link-right {font-size: 16px;min-width: auto; width:80%;padding:7px 10px;}
.ph .link-right:after{content: none;}


}



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

.moreTab .slidecontain {/*background:#fff1db;*/white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;flex-wrap: nowrap;}
.moreTab .slidecontain li{padding: 10px 5px;}
.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 "微軟正黑體";}



}


.bnAD{padding: 30px 0  30px 0;text-align: center;}
.bnAD img.pc{width: 90%;max-width: 1100px;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;}*/
.bnAD{padding: 20px 0  ;}
}


/*20230811*/
.bnBox{padding: 30px 0  30px 0;text-align: center;}
.bnBox img{width: 90%;max-width: 1100px;margin: 0 auto;}

@media screen and (max-width:768px) {
  .bnBox{padding: 20px 0;}
  .bnBox img{width: 100%;}
}