/*******共通CSS******/
#mtkContainer,
#mtkContainer * { box-sizing: border-box; }
#mtkContainer { background:  url(../images/bg_repeat_01.jpg) top center repeat-y;}
header.header { height:450px; background: url(../images/pc_header2024new.jpg) top center no-repeat;}


h1 { display: none;}
h1 img {width: 100%;}
.main-content h2 { display: flex; margin-bottom: 40px; text-align: center; justify-content: center; flex-wrap: wrap;; }
.main-content h2 span { display: inline-flex; justify-content: center; align-items: center; margin-right: -5px; padding: 15px; font:bold 45px/1 "微軟正黑體"; color: white; background: url(../images/dec_04.png) top center no-repeat; background-size: 100%;}
.main-content h2 .break { display: none; width: 100%;}
.ph-menu.hide { display: none;}

/*資訊CSS 01*/
.poiInforType1 {}
.poiInforType1 .ph { margin: 0 auto; width: 95%; max-width: 1200px;}
.poiInforType1 .ph-group-content { display: flex; padding-bottom:75px; }
.poiInforType1 .ph-group-content-photo { display: inline-block; flex-grow:0;  width: 33.333334%; }
.poiInforType1 .ph-group-content-photo img { width: 100%;}
.poiInforType1 .ph-group-content-text { display: inline-block; flex-grow:0; padding: 5px 45px; width: 66.666666%; overflow: hidden; background: rgba(0,0,0,0.0);}
.poiInforType1 .ph-group-content-text-name { display: block; margin-bottom: 20px ; font-size: 24px ; font-weight: 700; color: black; text-align: center; letter-spacing: 2px;}
.poiInforType1 .ph-group-content-text-sale { position: relative; margin-bottom: 10px ;  text-align: center;}
.poiInforType1 .ph-group-content-text-sale a{color: white; }
.poiInforType1 .ph-group-content-text-sale::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: black; z-index: 1;}
.poiInforType1 .ph-group-content-text-sale::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 500%; background: url(../images/dec_01.png) top center no-repeat ; background-size: 100%; overflow: visible; z-index: 1;}
.poiInforType1 .ph-group-content-text-sale span { position: relative; display: inline-block; padding: 8px 15px; font: 20px/1 "arial","微軟正黑體" ; color: white; letter-spacing: 2px; background: black; border-radius: 99em; z-index: 2; }
.poiInforType1 .ph-group-content-text-detail { padding: 10px 50px ; font: 18px/1.6 "arial","微軟正黑體" ; letter-spacing: 2px; color: black; }
.poiInforType1 .ph-group-content-text-detail a{color: black;}

.poiInforType1 .ph-menu,
.poiInforType1 .ph-group-title,
.poiInforType1 .ph-group-content-tag,
.poiInforType1 .ph-group-content-text-price { display: none !important;}


/*資訊CSS 02*/
.poiInforType2 {}
.poiInforType2 .ph { margin: 0 auto 100px auto; width: 80%; max-width: 1200px; /*border-bottom: 3px dotted #e2b566;*/ }
.poiInforType2 .ph-group { display: block; margin-bottom: 50px; flex-wrap: wrap;  }
.poiInforType2 .ph-group-title { display: none;}
.poiInforType2 .ph-group-content { display: inline-block; flex-shrink: 0; flex-grow: 0; margin: 0 1.5% 20px 1.5%; padding: 10px; width: 30%; border-radius: 20px; background: white;}
.poiInforType2 .ph-group-content-photo img { width: 100%; border-radius: 10px;}
.poiInforType2 .ph-menu{ display: none;}
.poiInforType2 .ph-group-content-text-name {display: block; padding: 5px 0; font: bold 20px/1.4 "arial","微軟正黑體" ; color: black; letter-spacing: 2px; text-align: center;  }
.poiInforType2 .ph-group-content-text-sale { display: inline-block;  padding: 3px 7px; font: 15px/1.6 "arial","微軟正黑體" ; color: white; letter-spacing: 2px; border-radius: 99em;; background:#34609f; }
.poiInforType2 .ph-group-content-text-sale a {color: white;}
.poiInforType2 .ph-group-content-text-detail { display: block; padding: 5px 0; font: 15px/1.6 "arial","微軟正黑體" ; color: black; letter-spacing: 2px; text-align: left;}
.poiInforType2 .ph-group-content-text-detail a{color: black;}
.poiInforType2 .ph-group-content-text-price { display: none;}


.poiInforType1 a , .poiInforType2 a { cursor: text;}


/*商品01*/
.poiItemType1 {}
.poiItemType1 .ph { margin: 0 auto 100px auto; width: 95%; max-width: 1200px; /*border-bottom: 3px dotted #e2b566;*/ }
.poiItemType1 .slidecontain { display: flex;}
.poiItemType1 .slidecontain li { display: inline-block; padding: 10px 10px;  background:#34609f; }
.poiItemType1 .slidecontain li a { font: 18px/1 "arial","微軟正黑體" ; color: white; letter-spacing: 2px; }
.poiItemType1 .slidecontain li.on { background:  white;}
.poiItemType1 .slidecontain li.on a { color: #34609f;} 

.poiItemType1 .ph-title { display: block !important; padding-bottom: 20px; width: 100%; text-align: center; font: bold 40px/1 "微軟正黑體"; color: #d84848; letter-spacing: 2px; }
.poiItemType1 .ph-group {display: none; position: relative; margin-bottom: 50px; padding: 30px 50px; border-radius: 0 30px 30px 30px; border:2px solid #e2b566; background: white;}
.poiItemType1 .ph-group::before { content: ""; position: absolute; top:-2px; left: -2px; width: 1200px; height: 48px; background: url(../images/dec_02.png) top center no-repeat; background-size: 100%; z-index: 1;}
.poiItemType1 .ph-group::after { content: ""; position: absolute; bottom:-2px; left: -2px;  width: 1200px; height: 48px; background: url(../images/dec_03.png) top center no-repeat; background-size: 100%; z-index: 1;}

.poiItemType1 .ph-group.on { display: block;}
.poiItemType1 .ph-group-content { position: relative;  padding: 20px 0; border-bottom:2px dotted #e2b566; z-index: 2; }
.poiItemType1 .ph-group-content-text { position: relative;}
.poiItemType1 .ph-group-content-text-name { width: 80%; display: block; font-size:20px;color: black; letter-spacing: 2px; text-align: left; font-weight: 700;  }
.poiItemType1 .ph-group-content-text-sale { display: inline-block;  padding: 3px 7px; font: 17px/1.6 "arial","微軟正黑體" ; color: white; letter-spacing: 2px; border-radius: 10px; background:#34609f; }
.poiItemType1 .ph-group-content-text-sale  a {color: white;}
.poiItemType1 .ph-group-content-text-detail { width: 80%; display: block; font-size: 16px; color: black; letter-spacing: 2px; text-align: left;}
.poiItemType1 .ph-group-content-text-detail a {color: rgb(70, 70, 70);font-size: 16px;}
.poiItemType1 .ph-group-content-text-price { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; width: 20%; height: 100%; font: 30px/1 "arial","微軟正黑體" ;
    color: white; letter-spacing: 2px; background: #d84848;}
.poiItemType1 .ph-group-content-text-price span { display: inline-block; font-size: 0.5em; line-height: 3;}

.poiItemType1 .ph-group-content-photo,
.poiItemType1 .ph-group-title { display: none;}

/*商品02*/
.poiItemType2 {}
.poiItemType2 .ph { margin: 0 auto 100px auto; width: 95%; max-width: 1200px; /*border-bottom: 3px dotted #e2b566;*/ }
.poiItemType2 .ph-title { display: block !important; padding-bottom: 20px; width: 100%; text-align: center; font: bold 40px/1 "微軟正黑體"; color: #d84848; letter-spacing: 2px; }

.poiItemType2 .ph-group { display: block; margin-bottom: 150px;  }
.poiItemType2 .ph-group-title { text-align: center; }
.poiItemType2 .ph-group-title span { position: relative; display: inline-block; margin-bottom: 20px; padding: 8px 15px; font: 20px/1 "arial","微軟正黑體" ; color: white; letter-spacing: 2px; background: black; border-radius: 99em; z-index: 2;  }
.poiItemType2 .ph-group-content { display: inline-block; margin: 0 10px 0 0; padding: 10px; border:2px solid #e2b566; background: white;}
.poiItemType2 .ph-group-content-photo { position: relative;}
.poiItemType2 .ph-group-content-tag { position: absolute; top: 0; left: 0; padding: 5px; font: 12px/1 "arial","微軟正黑體" ; color: white; letter-spacing: 2px; background: #34609f;}
.poiItemType2 .ph-group-content-photo img { width: 100%;}

.poiItemType2 .ph-group-content-text-name {display: block; padding: 5px 0; font: bold 15px/1.4 "arial","微軟正黑體" ; color: black; letter-spacing: 2px; text-align: left;  }
.poiItemType2 .ph-group-content-text-sale { display: inline-block;  padding: 3px 7px; font: 15px/1.6 "arial","微軟正黑體" ; color: white; letter-spacing: 2px; border-radius: 10px; background:#34609f; }
.poiItemType2 .ph-group-content-text-sale a {color: white;}
.poiItemType2 .ph-group-content-text-detail { display: block; padding: 5px 0; font: 15px/1.6 "arial","微軟正黑體" ; color: black; letter-spacing: 2px; text-align: left;}
.poiItemType2 .ph-group-content-text-detail a{color: black;}
.poiItemType2 .ph-group-content-text-price { display: flex; justify-content: center; align-items: center;  width: 100%;  font: 30px/1 "arial","微軟正黑體" ; color: white; letter-spacing: 2px; background: #d84848;}
.poiItemType2 .ph-group-content-text-price span { display: inline-block; font-size: 0.5em; line-height: 3;}

.poiItemType2 .ph-menu{ display: none;}


.blogPoi .ph-group-content-otherlink{transition: 0.3s;margin-left:50px;}
.blogPoi .ph-group-content-otherlink:hover{transform: scale(0.98);}
.blogPoi .ph-group-content-otherlink a {color: #d84848;font: bold 24px/2.6 "arial","微軟正黑體" ;cursor: pointer;background: url(../images/blogBN.png) top center no-repeat,#ffe49a;width: 357px;height: 61px;display: block;
text-align: center;}


.blogPoi.poiInforType1 .ph-group-content-photo {margin-top: 5%;}



/**/

.fixBtn { position: fixed; top: 30%; left: 5%; width: 184px; height: auto; z-index: 10; }
.fixBtn a { display: block; font: 17px/2 "arial","微軟正黑體" ; color: white; text-align: center; background: url(../images/fixBtnBg_01.png) top center repeat-y;}
.fixBtn a:hover{color: rgb(255, 255, 118);}
.fixBtn-footer img{ width: 100%;;}


@media only screen and (max-width: 1500px) {
    .fixBtn {  left:0%;  }
}

@media only screen and (max-width: 1280px) {
    .fixBtn {  top:0; width: 100%; background: #d84848; text-align: center;  }
    .fixBtn a { display: inline-flex; margin-right: 10px; padding-right: 10px; border-right: 1px solid rgba(255,255,255,0.5); font: 17px/40px "arial","微軟正黑體" ;}
   
    .fixBtn-footer { display: none;}
}


@media only screen and (max-width: 1200px) {
   
    .poiItemType1 .ph-group::before, .poiItemType1 .ph-group::after {display: none;}
    
    
}
@media only screen and (max-width: 800px) {
    .main-content h2 span{font-size: 30px;}
    .poiInforType1 .ph-group-content { display: block; }
    .poiInforType1 .ph-group-content-photo { display: block;  margin:  0 auto 20px auto; width: 70%;  }
    .poiInforType1 .ph-group-content-text { display: block;  padding: 0; width: 100%; }

    .poiItemType1 .slidecontain li a { font-size: 15px;}
    .poiItemType1 .ph-title span { padding: 10px; font-size: 20px;}
    .poiItemType1 .ph-title,.poiItemType2 .ph-title {font:bold 28px/1.2 "微軟正黑體";}
    .poiItemType1 .ph-group { margin-bottom: 5%;padding: 5% ; border-radius:0 }
    .poiItemType1 .ph-group-content { margin-bottom: 10%; padding:0 0 2px 0;}
    .poiItemType1 .ph-group-content:last-child { margin-bottom: 0;}
    .poiItemType1 .ph-group-content-text-name { margin-bottom: 8px; width: 100%; font-size: 17px; line-height: 1.5; font-weight: bold; }
    .poiItemType1 .ph-group-content-text-sale {  padding: 3px 7px;  font-size: 15px; margin-bottom: 8px}
    .poiItemType1 .ph-group-content-text-detail { width: 100%; font-size: 15px;margin-bottom: 12px;}
    .poiItemType1 .ph-group-content-text-detail a {  font-size: 15px;}
    .poiItemType1 .ph-group-content-text-price {  position: static; width: 100%;  width: 100%;  font: 30px/1 "arial","微軟正黑體" ; color: white; letter-spacing: 2px; background: #d84848;}
    .poiItemType1 .ph-group-content-text-price span { display: inline-block; font-size: 0.5em; line-height: 3;}

    .fixBtn {  top: calc(100% - 30px); overflow-x: scroll; white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}
    .fixBtn a { display: inline-flex; margin-right: 10px; padding-right: 10px;  font: 15px/30px "arial","微軟正黑體" ;}
   

}
@media only screen and (max-width: 768px) {
    header.header { height: auto;}
    h1 { display: block;}
}

@media only screen and (max-width: 500px) {
    h2 span { padding: 10px; font-size: 23px;}
    h2 .break { display: block;}
    .poiInforType1 .ph-group-content-photo {  width: 100%;  }
    

    .poiInforType1 .ph-group-content-text-name { margin-bottom: 10px; font-size: 20px; }
    .poiInforType1 .ph-group-content-text-sale span { font-size: 17px; }
    .poiInforType1 .ph-group-content-text-detail { padding: 0 5%; font-size: 15px; }
    
    .poiInforType2 .ph-group { width: auto; overflow-y: scroll; flex-wrap: nowrap;}
    .poiInforType2 .ph-group-content { display: inline-block; margin: 0 20px 0 0; flex-shrink: 0; width: 70%;}

    
    .poiItemType2 .ph { width: 85%;}
    .poiItemType2 .slidecontain li a { font-size: 15px;}
    .poiItemType2 .ph-title span { padding: 10px; font-size: 20px;}
    .poiItemType2 .ph-group { margin-bottom: 30%;  }
    .poiItemType2 .ph-group-title span { font-size: 17px; }

    .blogPoi .ph-group-content-otherlink{margin: 10px auto;}
    .blogPoi .ph-group-content-otherlink a {font: bold 5vw/3 "arial","微軟正黑體" ;width:90%;background-size: 100%;height: auto;margin: 0 auto;}
}



.slick-next { right: -15px; z-index: 10;}
.slick-prev { left: -15px; z-index: 10;}

.poiInforType1.youtube .ph{width: 100%;}
.poiInforType1.youtube .ph-group-content-photo{display: none;}
.poiInforType1.youtube .ph-group-content-text {width: 100%;}
.poiInforType1.youtube .ph-group-content-text-price{display: block !important;background: #4878bf;color: #FFF;font:20px/1.4 "arial","微軟正黑體" ;text-align: center;width: 50%;border-radius: 20px;cursor: pointer;margin: 20px auto;}
.youtube{max-width: 1200px;width: 95%;margin: 0 auto;}
.youtubeBox{display: flex;flex-wrap: wrap;width: 100%;align-content: baseline;justify-content:center;}
.youtubeBox .youtubeImg{width: 33.33%;margin-top: 25px;}
.youtubeBox .youtubeImg iframe {width: 100%;}
.youtubePoi{width: 60%;flex-grow: 1;}

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

    .youtubeBox .youtubeImg{width: 70%;margin: 0 auto 20px auto;}
    .poiInforType1.youtube .ph-group-content-text-price{width: 100%;}   
}

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

    .youtubeBox .youtubeImg{width: 100%;margin: 0 auto 20px auto;}
    
}