.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 */
}

body {overflow-x: hidden; background: #fffef7;}

#mtkContainer { position: relative;overflow-x: hidden;}
#mtkContainer,
#mtkContainer * { box-sizing: border-box; }

a,a:hover { text-decoration: none; }
ul,li{list-style: none;}

.middle{width: 100%; max-width: 1280px; margin: 0 auto; position: relative;}
.width1200{width: 90%; max-width: 1200px;margin: 0 auto; position: relative;}
.width1300{width: 100%; max-width: 1300px;margin: 0 auto; position: relative;}
.wrapper,.wrapper2{position: relative;width: 94%; max-width: 1100px;margin: 0 auto;font-size: 24px; }

header.header { position: relative; padding: 0; margin: 0; width: 100%; height:650px; background: url(../images/header.jpg) top center no-repeat; }
header.header h1 img.mobile{display:none;}

.poi-header .mobile-menu-content .mobile-menu-content-title .mobile-menu-collapse-btn i{display: none;}












/*prodArea*/
.prodArea{font-size: 24px; font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif; }

.prodArea .ph{max-width: 1300px; margin: 2em auto;  }
.prodArea .ph-group {display: none; flex-wrap: wrap; justify-content: center; padding: 0.5em; margin-bottom: 2em; }
.prodArea .ph-group.on{display: flex;}
.prodArea .ph-group-content {position: relative;  width: calc(25% - 1em);  margin: 0.5em;  border: 0.5em solid #fff; box-shadow: rgb(121 121 121 / 30%) 0px 1px 5px 2px; -webkit-box-shadow:rgb(121 121 121 / 30%) 0px 1px 5px 2px; transition: 0.3s;}
.prodArea .ph-group-content-photo{position: relative;}

.prodArea .ph-group-content-photo .ph-group-content-tag{position: absolute; top: 0.5em; left: 0px; font-size: 0.66em; color: #fff;background: #e44c00;
  padding: 5px 12px 5px 6px; border-radius: 0 5rem 5rem 0; font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;}
.prodArea .ph-group-content-text{text-align: left; padding:0.5em 0.5em 1em;}
.prodArea .ph-group-content-text-name{ font-weight: bold; font-size: 83%; line-height: 1.4; color: #383231;  }
.prodArea .ph-group-content-text-detail{color:#006a91; font-size: 61%; line-height: 1.5; margin: 0.2em auto;}

.prodArea .ph-group-content-text-sale{background:none;font-size: 65%; line-height: 1.5;color: #ff612b;}

.prodArea .ph-group-content-text-price{display: block; color:#f4624a; font-weight: bold; font-size: 108%; position: absolute; right: 0; bottom: 0; }
.prodArea .ph-group-content-text-price span{font-weight: normal; font-size: 66%; color: #f4624a; vertical-align: baseline;}
.prodArea .ph-group-content:hover{filter: brightness(110%);transform: translateY(5px);}

.prodArea .ph-title{font-size: 22px; text-align: center; font-weight: bold; background: #006bb9; display: inline-flex; margin: 0 auto; color: #FFF; border-radius: 20px; padding: 10px 20px;
    flex-wrap: wrap; flex-shrink: 1;justify-content: center;}




/*選單*/
nav.ph-menu{    background: none;  border-bottom: solid 2px; display: inline-flex;  width: 80%;  flex-wrap: wrap; flex-shrink: 1; padding: 0;}
.slidecontain {  display: inline-flex;  flex-wrap: nowrap; justify-content: center;background: none; }
.slidecontain li{position: relative;margin: 0 3px;}
.slidecontain li a {color: #383231; font-weight: normal; padding: 0.5em 1em; font-size: 22px;}
.slidecontain li:before{ content: ''; position: absolute; left: 0; bottom: 0.15em; width: 1em; height: 1em; background: #fff54e; border-radius: 5em; z-index: -1; transition: 0.3s;}
.slidecontain li:hover:before,.slidecontain li.on:before{width: 100%;}
.slidecontain li.on a {font-weight: bold;}


@media only screen and (max-width: 1400px){
.prodArea .ph-title,.slidecontain li a {font-size: 18px;}
.slidecontain li:before{bottom: 0;}
}



@media only screen and (max-width: 1300px){
  .prodArea{ font-size: 20px; }
}


@media only screen and (max-width: 1100px){
nav.ph-menu {width: 100%;display: flex;}
.prodArea .ph-title{width: 50%;display: block;margin: 20px auto;}
.slidecontain li:before{width: 1em;height: 1em;}
}

@media only screen and (max-width: 1000px){
  .prodArea .ph-group-content{ width: calc(33% - 1em); }
   nav.ph-menu{ white-space: nowrap; overflow-x: scroll;}
}


@media only screen and (max-width: 768px){
  .prodArea .ph-group-content{ width: calc(50% - 1em); }
}

@media only screen and (max-width: 550px) {
    .prodArea .ph-group {
        flex-wrap: nowrap;
        overflow-x: scroll;
        align-items: stretch;
        justify-content: flex-start;
    }
    .prodArea .ph-group-content {
        width: 75%;
        flex-shrink: 0;
    }
    .prodArea .ph-group-content-text-detail{font-size: 80%;}
    .prodArea .ph-group-content-text-sale{font-size: 80%;}
    .prodArea .ph-title {width: 70%;}


    .slidecontain li:before{width: 1.5em;height: 1.5em;bottom: 0.2em;}



}





/*recommendation*/
.recommendation{ font-size: 24px; font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif; }

.recommendation .ph-group-title{position: relative; color: #383231; font-weight: bold; padding: 0.5em 1em; border-bottom: solid 2px; display: block;}
.recommendation .ph-group-title:before{ content: ''; position: absolute; left: 0; bottom: 0.25em; width: 1.5em; height: 1.5em; background: #fff54e; border-radius: 5em; z-index: -1; }

.recommendation .ph{max-width: 1300px; margin: 2em auto;}
.recommendation .ph-menu{display: none;}
.recommendation .ph-group{display: flex; flex-wrap: wrap; background: #f1dcc8;  padding: 1.5em; width: calc(100% + 100px); margin-left: -50px; 
    border: solid transparent;
    border-image-source: url(../images/camera.png);
    border-image-slice: 40;
    border-image-width: 40px;
    border-image-repeat: round;
 }
.recommendation .ph-group-content{ position: relative; width: calc(33.33% - 0.4em); margin:0.2em;  }
.recommendation .ph-group-content-text{ position: absolute; z-index: 0; left: 0; bottom: 0; overflow: hidden; width: 100%;  height: auto; padding:1.2em 0.8em 0.4em; transition: all 0.2s; }
.recommendation .ph-group-content-text:before{ content: ''; display: block; width: 100%; height: 100%;  position: absolute; z-index: -1; left: 0; top: 0; background: url(../images/bg-1.png) center top no-repeat; background-size: 100%; opacity: 0.7; transition: all 0.2s; }
.recommendation .ph-group-content-text-name{display: block; font-size: 95%; font-weight: bold; color: white; line-height: 1.2; height: 1.2em;  overflow: hidden;    filter: drop-shadow(0px 0px 5px #006bb9) drop-shadow(0px 0px 5px #006bb9); }
.recommendation .ph-group-content-text-sale{ display: none; }
.recommendation .ph-group-content-text-detail{ font-size: 70%; color: white;  line-height: 1.5;  max-height: 1.5em; overflow: hidden; margin-top: 0.3em; 
  transition: all 0.4s;}
.recommendation .ph-group-content-otherlink{display: none;}
.recommendation .price{ display: inline-block; position: absolute; right: 0; top: 0.5em; font-size: 95%; font-weight: bold;  color: #383231; background: rgba(255,245,78,0.7); border-radius: 5em 0 0 5em;     padding: 0.1em 0.7em;}
.recommendation .price span{ font-size: 74%; vertical-align: middle; }

.recommendation .ph-group-content:hover .ph-group-content-text:before{ opacity: 0.9; }
.recommendation .ph-group-content:hover .ph-group-content-text-detail{  max-height: 6em;  }

.recommendation .ph-group-content-tag {display: none;}


@media only screen and (max-width: 1400px){
  .recommendation .ph-group{ width: 100%; margin-left: 0; }
}
@media only screen and (max-width: 1300px){
  .recommendation{font-size: 20px;}
  .recommendation .ph-group{padding: 0.5em; }
  .recommendation .ph-group-content{width: calc(33.3% - 1em); margin: 0.5em;}
}
@media only screen and (max-width: 768px){
  .recommendation .ph-group-content{width: calc(50% - 1em); }
}
@media only screen and (max-width: 550px){
  .recommendation .ph-group{flex-wrap: nowrap; overflow-x: scroll; border: none;}
  .recommendation .ph-group-content{width: 75%; flex-shrink: 0; }
  .recommendation .ph-group-content-text{     padding: 1.2em 0.4em 0.4em; }
}




/*模組共用*/
.ph-group-title{position: relative; color: #383231; font-weight: bold; padding: 0.5em 1em; border-bottom: solid 2px; display: none;}
.ph-group-title:before{ content: ''; position: absolute; left: 0; bottom: 0.25em; width: 1.5em; height: 1.5em; background: #fff54e; border-radius: 5em; z-index: -1; }
.ph-group-content-photo img{width: 100%;}

.recommendation .ph-group-title:after{ content: url(../images/bus.png); position: absolute; right: 1em; bottom: 0; }






/*--goTop--*/
.goTop{display: none; position: fixed; bottom:2%; right: 2%; z-index: 48;text-align: center;}
.goTop a{color: #fff;}
.goTop li{display: block; cursor: pointer; font: 12px/1.2 "arial", "微軟正黑體"; color: #fff; background: #ff873e; border-radius: 99em; width: 50px; height: 50px; padding: 10px 10px;transition: all .5s;}
.goTop a:hover li{background: #1ea6d8;}






.bnAD{margin: -50px auto 60px auto;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: block;}
.bnAD img.m{display: block;}

}



/*-------------------------------Mobile-------------------------------*/







@media only screen and (max-width: 1000px) {
  header.header { height:auto; background: none; }
  header.header h1 img.mobile{display:block;width: 100%;}

}





@media only screen and (max-width: 660px) {
  .mainProductArea {border-radius: 1.2em;}
  .mainProductArea h4{font:bold 28px/1.8 "微軟正黑體";width: 262px;background-size:100%;}
  .mainProductArea h4::before{width: 30%;background-size:100%; left:-85px;/*height: 72px;*/}
  .mainProductArea h4::after{width: 30%;background-size:100%; right:-85px;/*height: 115px;*/}
  .mainProductArea p{font-size: 1.3em;line-height: 1.5; padding: 1%;}
  .mainProductArea br.mobBr{display: block;}
}

    












/*nav*/
nav{ text-align: center; background: #006bb9; font-size: 36px; padding: 0.3em; }
nav a{position: relative; display: inline-block; color: white; font-weight: bold; letter-spacing: 0.02em;  padding: 0.2em 1.5em; 
  font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif; z-index: 0;  }
nav a span{position: absolute; left: 0.6em; top: 0; width: 1.4em; height: 1.4em; background: #58aeec; border-radius: 5em; z-index: -1; transition: all 0.2s; }
nav a:after{content: url(../images/flag.png); display: none; position: absolute; top: 0; left: 0; width: auto;  transform: translate(-32%, -25%);     z-index: 1;}
nav a:hover span , nav a.on span{width: 100%; left: 0;}
nav a.on:after{display: block;}


@media only screen and (max-width: 1000px) {
  nav{ font-size: 20px; white-space: nowrap; }
  nav a{ padding: 0.2em 1em; }
  nav a.on:after{display: none;}
}

@media only screen and (max-width: 375px) {
  nav{ overflow-x: scroll; }
}




/*localMenu*/
.localMenu{text-align: center; background: #cceaff; font-size: 20px;  display: flex; justify-content: center; font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;padding: 5px 0;line-height: 1.2;}
.localMenu li{transition: all 0.2s;padding: 0.3em  1em;border-right: solid 1px;cursor: pointer;}
.localMenu li:hover , .localMenu li.on{ background-color: #9ad5ff; }
/*.localMenu li a{ display: block; color: #383231;   }
.localMenu li a div{ padding: 0;   }*/
.localMenu li:last-child{border-right: none;}

@media only screen and (max-width: 1000px) {
  .localMenu{font-size: 16px;}
}


@media only screen and (max-width: 600px) {
  .localMenu{white-space: nowrap;justify-content:space-between;overflow-x: scroll;}
  .localMenu li{flex-grow: 1; }

}


/*navArea + navWrap*/
.navArea{position: relative; height: 115px;}
.navWrap{position: absolute; left: 0; top: 0; width: 100%; z-index: 99;}

.navWrap.fixed{position: fixed;}
.navWrap.fixed nav{font-size: 20px;}
.navWrap.fixed nav a:after{     transform: scale(0.3) translate(-130%, -120%); }
.navWrap.fixed .localMenu{font-size: 15px;}

@media only screen and (max-width: 1000px) {
  .navArea{height: 76px;}
  .navWrap.fixed nav{font-size: 16px;}
  .navWrap.fixed .localMenu{font-size: 14px;}
}



.bnAD{margin: 30px auto 30px auto;text-align: center;}
.bnAD img.pc{width: 90%;max-width: 1200px;margin: 0 auto;}
.bnAD img.m{width: 90%;max-width: 600px;display: none;margin: 0 auto;}

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

.bnAD img.pc{display: none;}
.bnAD img.m{display: block;}

}