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

* { box-sizing: border-box; font-family: 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體','arial'; transition: 0.2s;}
#mtkContainer {background:  url('../images/bg.jpg') top center repeat-y ;}

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

/* header.header{position: relative; height: 650px; background: url(../images/header20230817.jpg) top center no-repeat;text-align: center;}
header.header h1{display: block;}
@media screen and (max-width:1000px){
header.header{height: auto; background: none;}
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;}
}




.topBtn {position: fixed;width: 50px;height: 50px;background: rgba(0,0,0,0.8);color:#FFF;font: 16px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';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 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';}
@media screen and (max-width:500px) { 
.topBtn {width: 38px;height: 38px;font: 14px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';right: 0%;bottom: 5%;border-radius: 99em;padding-top: 16px;}
.topBtn::before{content: '▲';position: absolute;top: 1px;left: 13px;font: 13px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';}
}


/*選單*/
.pageMenu.sticky{position: fixed; top: 0px; left: 0;background: rgba(32,105,126,0.9);}
.pageMenu{top: 0; left: 0; background: rgba(32,105,126,0.8); text-align: center; height: auto; padding: 5px 0;   z-index: 99;  position: relative;width: 100%;display: flex;flex-wrap: wrap;justify-content: center;}
.pageMenu li{display: inline-block;  margin: 0px 2px; position: relative;border-radius: 20px;color: #FFF;}
.pageMenu li:hover{background: #FFF;color: #1a4b63;}
.pageMenu li:hover a{color: #1a4b63;}
.pageMenu li.on{background: #FFF;color: #1a4b63;}
.pageMenu li.on a{color: #1a4b63;}
.pageMenu li a{font:700 24px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體' ; padding: 3px 30px;display: inline-block;transition:0.3s;position: relative;color: #FFF;}

.poiMenu {width: 100%; text-align: center;top:53px; left: 0; height: auto;z-index:90;background: rgba(70,48,52,0.9);padding: 0 10px;margin: 0 auto;display: inline-block;}
.poiMenu li {display: inline-block;  margin: 5px;font:20px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體' ; color: #fff;padding: 5px 10px;cursor: pointer;}
.poiMenu li:hover{color:#fff49d;}
.poiMenu.sticky {position: fixed; padding: 0;top: 45px; left: 0;width: 100%;}


@media screen and (max-width:1024px){
.pageMenu li a{font:700 18px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體' ;}
.poiMenu li,.poiMenu.sticky li {margin:0px 3px;font:700 18px/1.4 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';}
}


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

.pageMenu{position: sticky; width: 100%; top: 0; left: 0;  text-align: center;height: auto;z-index: 99;padding:  5px 0;}
.pageMenu li{display: inline-block;  padding: 0px 0px;position: relative;margin: 0;flex-grow: 1;}
.pageMenu li a{font:700 16px/1.2 "微軟正黑體" ;padding: 5px 10px;}

.poiMenu,.poiMenu.sticky{white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;border: none;transition: 0s;}
.poiMenu.sticky{top: 38px;}
.poiMenu li,.poiMenu.sticky li {margin:0px 3px;font:18px/1.4 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';}
}




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

.pageMenu li:after{content: none;}
.pageMenu li.on:after{content: none;}
.poiMenu li,.poiMenu.sticky li {font:15px/1.4 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';}
}

@media screen and (max-width:600px) { 
.pageMenu li a{font:15px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體' ;padding: 5px 3px;}	
}
	

@media screen and (max-width:500px) { 
.pageMenu{white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;}
.pageMenu li{flex-grow: 1;}
}


/*模組*/

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

.ph-group-title {text-align: center;margin: 20px auto 0 auto;border-radius: 20px 20px 0 0;display:block;font:600 40px/1.4 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';color: #FFF;letter-spacing: 1px;}
.ph-group-title span{position: relative;z-index: 1;}
.ph-group-title span::before{content: "";width: 40px;height: 40px;border-radius: 99em;left: -15px;top: -5px;position: absolute; background: linear-gradient(135deg, rgba(26,74,98,1) 0%,rgba(26,74,98,0.99) 1%,rgba(0,0,0,0) 100%); ;z-index: -1;}
.ph .ph-group-content{margin: 15px;transition: 0.2s;padding: 16px 16px 40px 16px; width:22%;position: relative;border: 1px solid #8d7814;background: #0e1d3c;}
.ph .ph-group-content-photo {width: 100%;display: block;}
.ph .ph-group-content-photo img{width: 100%;vertical-align: top;}
.ph .ph-group-content:hover{border: 1px solid #f1ff73;}
.ph .ph-group-content:hover .ph-group-content-photo img{transform: scale(1.03);}
.ph .ph-group-content-text{padding: 10px;text-align: left;}
.ph .ph-group-content-text-name{color:#fff;font:600 20px/1.4 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';/*margin: 10px auto;*/display: block;/*padding: 10px 0;*/}
.ph .ph-group-content-text-detail{color:#fff;font:17px/1.6 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';}
.ph .ph-group-content-text-detail a{color:#fff;}
.ph .ph-group-content-text-price {color:#f2df85;position: absolute;border-radius:10px 10px 0 0;padding: 5px 10px;font:800 26px/1 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';text-align: center;display: block;left: 50%;bottom: 10px;transform: translateX(-50%);width: 100%;}
.ph .ph-group-content-text-price span{font-size: 70%;line-height: 1.8;}
.ph .ph-group-content-tag {position: absolute; top: 0px;left: 0px; color: #fff; letter-spacing: 2px; padding: 5px 10px 5px 10px; font:18px / 1 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';background: #452d5c;/*clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);*/}
.ph .ph-group-content-text-sale{margin: 5px auto;font: 500 17px/1.6 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體'; color:#f2df85; background:#442f34;letter-spacing: 0px;display: block;}
.ph .ph-group-content-text-sale a {color: #f2df85;}


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


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

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

}


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

.poi {padding: 0 0 100px 0;background-size: 260%;}

}

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

.ph .ph-group-content-text-name{font:700 17px/1.4 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';}
.ph .ph-group-content-text{padding: 10px ;}
.ph .ph-group-content-text-detail{font:14px/1.4 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';margin: 0 auto;}
.ph .ph-group-content-text-sale{font: 16px/1.4 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';}
.ph-group-title span{font:bold 28px/1.6 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';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: 95%;flex-shrink:0;margin: 10px;}



}



@media screen and (max-width:500px) { 
.ph-group{justify-content: left;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;flex-wrap: nowrap;padding: 1% 10%;}
}
	


/*插入BN*/
.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; } 
}






/*可能會用到*/
/* .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 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體' ; color: #000;padding: 5px 10px;cursor: pointer;}
 */

/* 
.morePoiBox b{color: #000;text-align: center;text-align: center;font:bold 36px/1.2 "微軟正黑體";display: block;}
.morePoiBox{padding: 30px 0;}
.moreAnc{padding: 50px 0 0px 0;}
.moreAnc .ph{padding: 0px 0;}
.moreAnc .slidecontain {text-align: center;height: auto;z-index:90;padding: 0 10px;margin: 0 auto;display:block;}
.moreAnc .slidecontain li {display: inline-block;  margin: 5px;background: #FFF;font:16px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體' ; color: #000;padding: 5px 10px;cursor: pointer;}
.moreAnc .slidecontain li:hover  a div{color:#2c539d;}
.moreAnc .slidecontain li.on{background: #449ce9;}
.moreAnc .slidecontain li.on a div {color: #FFF;}
.moreAnc .slidecontain li a div{color:#000;font:20px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體'; }
.moreAnc .ph-group {display: none;}
.moreAnc .ph-group.on{display:inline-flex;}
.moreAnc .ph-group-title{display: none;}
.moreAnc .ph-group-title.on{display: block;}
 */


 
/* .slidecontain {width: 100%; text-align: center;top:53px; left: 0; height: auto;z-index:90;background: #FFF;padding: 0 10px;margin: 0 auto;display:none;}
.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: 45px; left: 0;width: 100%;} */



@media screen and (max-width:1024px){
/* .slidecontain.sticky{top: 40px;} */
}
 @media screen and (max-width:800px){
/* .slidecontain,.slidecontain.sticky{white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;border: none;transition: 0s;}
.slidecontain.sticky{top: 39px;}
.slidecontain li,.slidecontain.sticky li {margin:0px 3px;}
.slidecontain li a div,.slidecontain.sticky li a div{font:18px/1.4 "微軟正黑體"; } */

/* .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){
/* .moreAnc .slidecontain li a div{font:15px/1.2 'Noto Serif TC', serif,'Noto Sans TC','微軟正黑體';} */
}