* { box-sizing: border-box; font-family: "微軟正黑體","思源黑體","arial"; transition: 0.2s;}
#mtkContainer {background:#98e3ff; }

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

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

.slidecontain {width: 100%; text-align: center;top:53px; left: 0; height: auto;z-index:90;background: #FFF;padding: 0 10px;margin: 0 auto;display: inline-block;}
.slidecontain li {display: inline-block;  margin: 0px 5px;background: #FFF;font:16px/1.2 "微軟正黑體" ; color: #000;padding: 5px 10px;cursor: pointer;}
.slidecontain li:hover  a div{color:#2c539d;}
.slidecontain li a div{color:#000;font:20px/1.2 "微軟正黑體"; }

.slidecontain.sticky{position: fixed; padding: 0;top: 53px; left: 0;width: 100%;}


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


.poiMenu{position: sticky; width: 100%; top: 0; left: 0; background:#2c539d; text-align: center;height: auto;z-index: 99;padding: 0px 0;}
.poiMenu li{display: inline-block;  margin: 0px 5px;position: relative;}
.poiMenu li.on{background:#f8409d;}
.poiMenu li a{font:24px/1.2 "微軟正黑體" ; color: #FFF;padding: 12px 30px;display: inline-block;transition:0.3s;position: relative;}



.morePoiMenu{width: 100%; text-align: center;position: sticky;top:53px; left: 0; height: auto;z-index:90;background: #FFF;padding: 5px 0;}
.morePoiMenu div{display: inline-block;  margin: 0px 5px;background: #FFF;font:18px/1.2 "微軟正黑體" ; color: #000;padding: 5px 10px;cursor: pointer;}



.item.on{display: block;}
.item{display: none;}




.specialText{text-align: center;display: block;width: 70%;margin: 20px auto;}

.specialText p{font:bold 24px/1.4 "微軟正黑體";color: #42d1d5;padding: 20px;background: #FFF;}
.specialText p span{font:bold 24px/1.4 "微軟正黑體";color: #fd72af;}
.specialText p small {color:black;font:16px/1.4 "微軟正黑體";display: block;}
.specialText p small a {color:blue;text-decoration: underline;}

.poi{margin: 0 auto;padding: 0px 0 80px 0;background:url(../images/bg.png)  bottom center no-repeat;}
/*.poiGoods{border-radius: 20px;background:url(../images/bg3.jpg)  top center repeat-y;}*/
.poiGoods > article {padding: 0 0 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;max-width: 1400px;}
.ph{margin: 0 auto;width: 100%;padding: 0px 0;text-align: center;}
.ph:hover{transform: none;}

.poi-intro .ph-menu{display: none;}


.ph .ph-group-content{margin: 15px 7px;transition: 0.2s;padding: 10px 10px 40px 10px; width: 23.1%;position: relative;flex-shrink: 1;background: #FFF;/*box-shadow: 0 0 10px rgba(0,0,0,0.4);*//*border:2px solid #002362;*/}
.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;}
.ph .ph-group-content-text-name{color:#000;font:bold 20px/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:#f8409d;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;}
.ph .ph-group-content-text-price span{font-size: 70%;line-height: 1.8;}
.ph .ph-group-content-tag {position: absolute; top: 20px;left: 0px; color: black; letter-spacing: 2px; padding: 5px 10px; font:17px / 1 "微軟正黑體";background: #fff073;border-radius: 0 20px 20px 0;}
.ph .ph-group-content-text-sale{margin: 5px auto;font:16px/1.6 "微軟正黑體"; color: #FFF; background:#ef579b;letter-spacing: 1px; padding: 0 5px;}
.ph .ph-group-content-text-sale a{color: #FFF; background:#ef579b;}
.ph-group-title {text-align: center;margin: 20px auto 0 auto;border-radius: 20px 20px 0 0;display:block;}
.ph-group-title span {font:bold 36px/1.6 "微軟正黑體";color:#000;padding: 5px 10px;background: url(../images/title.png) top center repeat-x;background-position-y:33px; position: relative;z-index: 0;}
.ph-group-title span::before{content: "";background: url(../images/titleleft.png) top center no-repeat;width: 20px;height:27px;position: absolute;background-size: 100%;bottom: -3px;left: -10px;z-index: -1;}
.ph-group-title span::after{content: "";background: url(../images/titleright.png) top center no-repeat;width: 20px;height:27px;position: absolute;background-size: 100%;bottom: -3px;right: -10px;z-index: -1;}
.ph-group-title{width: 100%;}



.morePoiBox b{color: #000;text-align: center;text-align: center;font:bold 36px/1.2 "微軟正黑體";display: block;}
.morePoiBox{padding: 30px 0;}



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



.specialText{width: 90%; }
.specialText p,.specialText p span{font:bold 18px/1.4 "微軟正黑體";text-align: left;}

}



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

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

.poiMenu li a{font:16px/1.2 "微軟正黑體" ;}

.slidecontain.sticky{top: 44px;}
}



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



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

.poi {padding: 0 0 100px 0;background-size: 260%;}
.slidecontain,.slidecontain.sticky{/white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;border: none;}
.slidecontain.sticky{top: 39px;}
.slidecontain li,.slidecontain.sticky li {margin:0px 3px;}
.slidecontain li a div,.slidecontain.sticky li a div{font:18px/1.2 "微軟正黑體"; }



.poiMenu{position: sticky; width: 100%; top: 0; left: 0;  text-align: center;height: auto;z-index: 99;padding:  0;}
.poiMenu li{display: inline-block;  padding: 5px 0px;border-radius: 0px;position: relative;margin: 0;}
.poiMenu li a{font:16px/1.2 "微軟正黑體" ;padding: 5px;}
.poiMenu li.on::after { bottom: -15px; left: 40%; width: 15px; height: 15px; }

.morePoiMenu div{font-size: 16px;padding: 0;}
.morePoiMenu{top: 39px;}
.morePoiBox{padding: 5px 0;}
.morePoiBox b {font-size: 28px;}




}

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

.slidecontain li a div,.slidecontain.sticky li a div{font:15px/1.2 "微軟正黑體";}
.ph .ph-group-content-text-name{font:bold 16px/1.4 "微軟正黑體";}
.ph .ph-group-content-text{padding: 10px ;}
.ph .ph-group-content-text-detail{font:14px/1.4 "微軟正黑體";}
.ph-group-content-text-sale{font:14px/1.4 "微軟正黑體";}
.ph-group-title span{font:bold 28px/1.6 "微軟正黑體";background-position-y:23px;}
.ph-group{padding: 1% 3%;}
.ph-group{width: 100%;}
.ph-group-title{width: 90%;}
.poi .ph{width: 100%;}
.ph .ph-group-content{width: 90%;margin: 10px auto;}
.ph .ph-group-content-text-sale{font: 15px/1.4 "微軟正黑體";}
.poiGoods > article{padding: 0;}

}

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


.poiMenu{white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;}
.poiMenu li.on::after {content: none;}
.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;}

}





.bn{
	text-align: center;
	padding: 25px 0;
    width: 90%;
    margin: 0 auto;
}
.bn:hover{ filter: brightness(1.1); transform: scale(1.01); }
.bn img{width: 100%; max-width: 1320px;}

@media screen and (max-width:800px) {
	.bn{ padding: 10px 0; }
 }




 .poi-intro.poi-1 .ph-group-content {
	width: 100%;
	max-width: 1162px;
	/* flex-grow: 1; */
	display: inline-flex;
	flex-wrap: nowrap;
	gap: 16px;
	padding: 16px;
  }
  @media (max-width: 992px) {
	.poi-intro.poi-1 .ph-group-content {
	  flex-wrap: wrap;
	  display: block;
	}
  }
  @media (max-width: 576px) {
	.poi-intro.poi-1 .ph-group-content {
	  width: 90%;
	  flex-shrink: 0;
	}
  }
  .poi-intro.poi-1 .ph-group-content .ph-group-content-photo {
	width: 45%;
	display: inline-flex;
  }
  @media (max-width: 992px) {
	.poi-intro.poi-1 .ph-group-content .ph-group-content-photo {
	  width: 100%;
	  flex-shrink: 0;
	}
  }
  .poi-intro.poi-1 .ph-group-content .ph-group-content-photo img {
	-o-object-fit: cover;
	   object-fit: cover;
	height: 100%;
  }
  @media (max-width: 992px) {
	.poi-intro.poi-1 .ph-group-content .ph-group-content-photo img {
	  height: auto;
	  -o-object-fit: unset;
		 object-fit: unset;
	}
  }
  .poi-intro.poi-1 .ph-group-content .ph-group-content-text {
	width: calc(45% - 16px);
	display: inline-block;
	padding: 0 0 29px 0;
	flex-grow: 1;
	text-align: left;
  }
  @media (max-width: 992px) {
	.poi-intro.poi-1 .ph-group-content .ph-group-content-text {
	  flex-shrink: 0;
	  width: 100%;
	}
  }