* { box-sizing: border-box; font-family: "微軟正黑體","思源黑體","arial"; transition: 0.3s;}
#mtkContainer {background:#e4f8ff; padding-bottom: 40px;background:url(../images/bg.jpg) top center fixed;}

a{text-decoration: none; }
/*版頭*/

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



/*版頭*/
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;}
}


/*fixed*/

.pageMenu{position: relative; width: 100%; top: 0; left: 0; background: #0189fb; text-align: center;height: auto;z-index: 99;transition:0.5s;}
.pageMenu.sticky{position: fixed;}
.pageMenu ul{width: 100%; margin: 0 auto;}
.pageMenu ul li{display: inline-block;  margin: 0px -2px;}
.pageMenu ul li a{font:24px/1.2 "微軟正黑體" ; color: #ffffff;padding: 9px 30px;display: inline-block;transition:0.5s;position: relative;}
.pageMenu ul li a:hover,.pageMenu ul li a.on {background:#ff844e;}
.pageMenu ul li a:hover:after, .pageMenu ul li a.on:after{content: "";background: url(../images/balloon.png) top center no-repeat;width: 55px;height: 52px;position: absolute;left: -18px;top: -32px;background-size: 100%;}
.pageMenu.sticky ul li a{font:20px/1.2 "微軟正黑體" ;}
.pageMenu.sticky ul li a:hover:after, .pageMenu.sticky ul li a.on:after{content: none;}
.poiMenu {text-align: center;margin: 0px auto;background:#ffde5f;padding: 8px 0;position: sticky;height: auto;top: 40px;z-index: 99;width: 100%;transition:0.5s;}
.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;}
.poiMenu.sticky{position: fixed;padding: 5px 0;}
.poiMenu.sticky li{font:18px/1.2 "微軟正黑體";}
.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 "微軟正黑體";}




/*sticky*/
/*.pageMenu{position: sticky; width: 100%; top: 0; left: 0; background: #35c8f7; text-align: center;height: auto;z-index: 99;}
.pageMenu ul{width: 100%; margin: 0 auto;}
.pageMenu ul li{display: inline-block;  margin: 0px -2px;}
.pageMenu ul li a{font:24px/1.2 "微軟正黑體" ; color: #ffffff;padding: 9px 30px;display: inline-block;transition:0.5s;position: relative;}
.pageMenu ul li a:hover,.pageMenu ul li a.on {background:#ff844e;}
.pageMenu ul li a:hover:after, .pageMenu ul li a.on:after{content: "";background: url(../images/balloon.png) top center no-repeat;width: 55px;height: 52px;position: absolute;left: -18px;top: -32px;background-size: 100%;}

*/
/*

.poiMenu {text-align: center;margin: 0px auto;background:#ffee7b;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;}*/



.poi{margin: 0 auto;padding: 0px 0 50px 0;}

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

.poi-merge .ph-group-title{display: none;}

.ph .ph-group-content{margin: 15px 5px;transition: 0.2s;padding: 10px 8px 40px 8px; 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 8px;}
.ph .ph-group-content-text-name{color:#1f9eed;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-detail a{color:#000;}
.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: 14px/2 "微軟正黑體"; color: #e31010; background: #fff3a3; padding: 0 5px;}

.ph .ph-group-content-text-sale a{color: #e31010; background: #fff3a3; }
.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;}



@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) { 
.pageMenu ul li a,.pageMenu.sticky ul li a{font:18px/1.4 "微軟正黑體";padding:10px 20px;}
.poiMenu li{font:16px/1.4 "微軟正黑體";margin:0px 3px;padding: 3px 10px;}
.poiMenu.sticky li{font:16px/1.4 "微軟正黑體";padding: 5px 10px;}
.poiMenu{top:42px;}
.poiGoods > article{width: 100%;margin: 0 auto;}

}

@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) {


}

@media only screen and (max-width: 900px) {
.pageMenu ul li a,.pageMenu.sticky ul li a{font:16px/1.4 "微軟正黑體";padding:10px 10px;}
.pageMenu ul li a:hover:after, .pageMenu ul li a.on:after{content: none;}
.poiMenu{top:41px;}
}



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

.poi {padding: 0 0 10px 0;}
.poiMenu{top:41px;}
.poiMenu,.poiMenu.sticky{/*background:#fff1db;*/white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;border: none;}
.poiMenu li,.poiMenu.sticky 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;}

}

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

.pageMenu,.pageMenu.sticky{white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;}
.pageMenu ul li a,.pageMenu.sticky ul li a{font:14px/1.4 "微軟正黑體";padding:10px 7px;}

.poiMenu li,.poiMenu.sticky li{font:14px/1.4 "微軟正黑體";}
.poiMenu{top:39px;}



.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%;}
.ph-group{width: 100%;}
.ph-group-title,.moreTab h4{width: 90%;}
.poi .ph{width: 100%;}
.ph .ph-group-content{width: 90%;margin: 10px auto;}
.ph .ph-group-content-text-sale{font: 14px/1.4 "微軟正黑體";}




}



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

.ph-group{justify-content: left;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;flex-wrap: nowrap;padding: 1% 10%;}
.ph .ph-group-content{width: 92%;flex-shrink:0;margin: 10px;}

}