#mtkContainer,
#mtkContainer * { box-sizing: border-box; }

body#hdpPage{background: #fff3df;}

body#hdpPage header.header { background: url(../images/header-pc240531.jpg) top center no-repeat; }
header.header { height: 460px; background: url(../images/header-pc211209.jpg) top center no-repeat; }
header h1.m { display:none; margin: 0; border: 0;}

.globalMenu { display: flex; justify-content: center;  overflow-y: hidden; background: #ff8856;  }
.globalMenu a { display: inline-block; position: relative; padding: 20px 30px; text-align: center; flex-grow :0; flex-shrink:0; transition: .5s; }
.globalMenu strong { display: block;margin-bottom: 5px; font:bold 24px/1 "微軟正黑體"; color: #fff;}
.globalMenu span { display: block; padding: 5px 10px; font:18px/1 "微軟正黑體"; color: #e94400; background: #fff;}
.globalMenu a:hover,
.globalMenu a.on { background: #e94400;}
.globalMenu a.on::before { content:""; position: absolute; bottom: 3px; left: calc(50% - 6px); width: 12px; height: 12px; background: url(../images/menu-dec-1.png) top center no-repeat; }


/***通用CSS****/
.bgColor1 {  background: #fff3df;}
.bgColor2 { background: #ff8856;}
.bgColor3 { background: #FFC779;}
.bgColor4 { background: #faddbb;}


#mtkContainer .bgColor2 h2 span,
#mtkContainer .bgColor3 h2 span { color: #fff; border-bottom: 3px solid #fff;}
.content { padding-top: 60px; width:90%; }
#mtkContainer h2 { width: 100%;margin-bottom: 30px; text-align: center;}
#mtkContainer h2 span { display: inline-block;  font:bold 36px/1 "arial","微軟正黑體"; color: #ff8856; border-bottom: 3px solid #ff8856;}
.overRead { position: relative; height: 60vh; overflow: hidden; }
.overRead.on { padding-bottom: 40px; height: auto !important;}
.overRead.on::after { display: none;}
.overRead::after { content:""; display: block; position: absolute; bottom:0; left: 0; width: 100%; height: 20vh;
background: linear-gradient(90deg, rgba(253, 248, 239, 1)0%, rgba(253, 248, 239, 0)100%);
background: -moz-linear-gradient(90deg, rgba(253, 248, 239, 1)0%, rgba(253, 248, 239, 0)100%);
background: -webkit-linear-gradient(90deg, rgba(253, 248, 239, 1)0%, rgba(253, 248, 239, 0)100%);
background: -o-linear-gradient(90deg, rgba(253, 248, 239, 1)0%, rgba(253, 248, 239, 0)100%); ;z-index: 10; }

.overReadButton { position:absolute; bottom:10px; left:calc(50% - 100px); padding: 10px 0; width:200px; font:20px/1 "arial","微軟正黑體"; color: #000; text-align: center; border:1px solid #000;  border-radius: 99em; z-index: 12; cursor: pointer;}
.overReadButton:hover { color: #fff; background: #000;}

.goToSale { position: fixed; top:20%; left:10%; padding-top: 10px; width: 60px;font:22px/1.6 "arial","微軟正黑體"; text-align: center; color: #fff ; border:none; background:  #ff8856; cursor: pointer; z-index: 20; box-shadow: 0 15px 20px rgba(0,0,0,0.2);}
.goToSale:hover { transform: scale(1.1);}
.goToSale span { position: relative; display: block; width: 100%; height: 100%;}
.goToSale span::before { content: ""; position: absolute; top: -55px; left: -20px; width: 118px; height: 55px; background: url(../images/dec-1.png) top center no-repeat;}


/***通用CSS end ****/



.bnContent0 {}
.bnContent0 .content { margin: 0 auto; max-width: 1000px; }
.bnContent0 img { width: 100%;}


.textContent0 .content { margin: 0 auto; max-width: 1000px; }
.textContent0 .content li { padding-bottom: 20px; font:22px/1.6 "arial","微軟正黑體"; color: #585858; text-align: center;}
.textContent0 li h3 { display: inline-block; margin-bottom: 10px; padding: 0px 20px; font-weight: 700; font:22px/1.6 "arial","微軟正黑體"; color: #fff; border-radius: 99em; background: #ff8856;}
.textContent0 li ol { display: block; padding-left: 50px;}
.textContent0 ol li { list-style-type: disc; padding-bottom: 10px; }


.textContent1 .content { margin: 0 auto; max-width: 1000px; }
.textContent1 li.box2 { display: flex; padding-bottom: 40px; font:22px/1.6 "arial","微軟正黑體"; color: #585858;}
.textContent1 li.box2 .img { display: inline-block; width: 250px; flex-grow :0; flex-shrink:0; }
.textContent1 li.box2 img { width: 100%;}
.textContent1 li.box2 .text { display: inline-block; padding: 20px 0 0 20px; width: calc(100% - 250px); flex-grow :0; flex-shrink:0; }
.textContent1 li h3 { display: block; text-align: left; }
.textContent1 li h3 span { display: inline-block; padding: 0px 20px; font-weight: 700; font:22px/1.6 "arial","微軟正黑體"; color: #fff; border-radius: 99em; background: #ff8856; }
.textContent1 li b { color:red; font-weight: 700;}

.c26Content .content { margin: 0 auto; max-width: 1200px; }
.c26Content-menu { display:flex; justify-content: center; align-items: center ; flex-wrap: nowrap; }
.c26Content-menu a { display:inline-block;  flex-grow :0; flex-shrink:0; margin: 0 5px; padding:5px 15px; font:22px/1 "arial","微軟正黑體"; color:#ff8856; background: #fff ; border-radius: 99em;; }
.c26Content-menu a.on { color: #fff; background: #e3551b;}
.c26Content-menu a:hover { opacity: 0.85;}
.c26Content .group-type-ph { display: flex; flex-wrap: wrap; justify-content: center;margin-top: 2%; }
.c26Content .ph { position: relative; display: inline-block; margin: 0 2% 25px 2%; padding-bottom: 35px; flex-grow:0; flex-shrink:0; width: 250px; border-radius: 10px; overflow: hidden; background: #fff; }
.c26Content .ph img { width: 100%; }
.c26Content .ph-title { padding: 5px 10px; font: 18px/1.4 "微軟正黑體"; color: #fff; background: #37a886;  }
.c26Content .ph-detail { position: absolute; top:0; left: 0; padding: 5px 10px; font: 14px/1.4 "微軟正黑體"; color: #fff; border-radius:0 0 10px 0;  z-index: 2; background: #e3551b; }
.c26Content .ph-feature { padding: 5px 10px;  font: 14px/1.4 "微軟正黑體"; color: #000; background: #fff; }
.c26Content .price { position: absolute; bottom: 10px; left: 0; display: block; width: 100%; font: bold 18px/1.4 "微軟正黑體";color: #e3551b; text-align: center; }
.c26Content .price span { display: inline-block; font-size: 25px; font-weight: bold; line-height: 0.7; }
.c26Content-model { display: none;}
.c26Content-model.on { display: block;}


.textContent3 .content { margin: 0 auto; max-width: 1000px;padding:  50px 0 50px 0;}
.textContent3 .content li { font:18px/1.6 "arial","微軟正黑體"; color: #000;list-style-type: disc;  }
.textContent3 h3 { display: block; margin-top: 0; margin-bottom: 10px;}
.textContent3 h3 span { display:inline-block ;padding: 0px 20px; font-weight: 700; font:22px/1.6 "arial","微軟正黑體"; color: #fff; border-radius: 99em; background: #ff8856; }
.textContent3 li ol { padding-left: 50px;}
.textContent3 ol li { list-style-type: disc; padding-bottom: 10px; }
.textContent3 > .content > ul > li { list-style-type: disc;}

.textContent3 li b { color:red; font-weight: 700;}
.textContent3 > .content > ul > li span.redBG{background: red;color: #FFF;padding: 5px;}
.textContent3 > .content > ul > li span.redText{color:red;}


.message1-content { display: flex; margin:0 auto; padding-bottom: 60px; width:100%; max-width: 800px;}
.message1-content  select { display: inline-block; width: calc(100% - 80px);  flex-grow :0; flex-shrink:0; }
.message1-content a { display: inline-block; width: 80px;  flex-grow :0; flex-shrink:0;  font:22px/1.6 "arial","微軟正黑體"; text-align: center; color: #fff; background: #ff8856; }
.message1-content a:hover { transform: scale(1.05);}


/*clickMore*/
.clickMore{ display: block; background: #ff8856;}
.clickMore .clickPc{ display: block;  width: 100%; text-align: center; margin: 0 auto; padding: 2%; max-width: 880px; transition: all .3s;}
.clickMore .clickPc img{width: 100%;}
.clickMore:hover .clickPc{ transform:scale(0.9);} 
.clickMore .clickMobile{ display: none;}

.clickMore2{ display: block; background: #fdf8ef; margin: 0 auto;text-align: center;}
.clickMore2 a{ width: 100%; }
.clickMore2 a img{ margin: 2% 0; }
.clickMore2 a img:hover{  transform:scale(0.9);  }



.bnAD{padding: 30px 0  0 0;text-align: center;background: #fff3df;}
.bnAD img.pc{width: 90%;max-width: 1100px;margin: 0 auto;}
/*.bnAD img.m{width: 90%;max-width: 768px;display: none;margin: 0 auto;}*/



.planText{font:22px/1.6 "arial","微軟正黑體"; margin: 20px auto;padding: 0 10px;}


@media screen and (max-width:768px) {
/*.bnAD img.pc{display: none;}
.bnAD img.m{display: block;}*/
}



@media only screen and (max-width: 1000px) {
    header.header { height: auto;}
    header h1.m { display:block;}
    header h1.m img { width:100%;}
    .globalMenu { overflow-x: scroll; justify-content: start;}
}



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

  .globalMenu strong{font:bold 18px/1 "微軟正黑體";}
  .globalMenu span{font:15px/1 "微軟正黑體";}
  .globalMenu a{padding: 15px ;}

    .textContent1 li.box2 .text {padding: 0 0 0 20px;}
    
    .c26Content-menu { justify-content: start; overflow-y: hidden; overflow-x: scroll;}
    .c26Content .ph { margin: 0 auto 10% auto; width: 90%; max-width: 300px;}

    .goToSale { top:calc(100% - 40px); left: 0; padding-top: 0; width: 100%; height: 40px;font: 22px/40px "arial","微軟正黑體"; }  
    .goToSale span::before { display: none; }

/*clickMore*/
  .clickMore .clickPc{ display: none;}
  .clickMore .clickMobile{ display: block; margin:0 auto;margin: 0 auto;text-align: center; padding: 2% 0;}
  .clickMore .clickMobile img{width: 95%;}


}




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

    .globalMenu strong { font-size: 15px;width: 100%;}
    .globalMenu span { font-size: 14px;}

    .content { padding-top: 10%;}
    h2 span { font:bold 22px/1 "arial","微軟正黑體";}

    .textContent0 .content li { padding-bottom: 24px; font:16px/1.8 "arial","微軟正黑體";  }
    .textContent0 li h3 { font:16px/1.4 "arial","微軟正黑體";margin-bottom:0;}
    .textContent0 li ol { display: block; padding-left: 20px;}


    .textContent1 .content li.box2 { display: block ; padding-bottom: 15%; font:16px/1.4 "arial","微軟正黑體";  }
    .textContent1 li h3 { margin: 2% 0; text-align: center;  }
    .textContent1 li h3 span { font:16px/1.4 "arial","微軟正黑體"; }
    .textContent1 li ol { display: block; padding-left: 20px;}    
    .textContent1 li.box2 .img { display: block; margin: 0 auto; width: 100%; max-width: 250px; }
    .textContent1 li.box2 .text { display: block; margin: 0 auto; width: 100%;  }

    .c26Content-menu
    .c26Content .ph { margin: 0 auto 10%; width: 90%; max-width: 300px;}


    .textContent3 .content li {  font:16px/1.6 "arial","微軟正黑體";  }
    .textContent3 li h3 span { font:16px/1.4 "arial","微軟正黑體";}
    .textContent3 li ol { display: block; padding-left: 20px;}
    .textContent3 h3 span{font:18px/1.6 "arial","微軟正黑體";}
    .textContent3 h3{margin: 10px auto;}



    .clickMore2 a img{ width: 90%; }
    .globalMenu{display: flex;flex-wrap: wrap;overflow-y:hidden;overflow-x:hidden;}
    .globalMenu a{/*display: inline-block;*/width:45%;border: 1px solid #fcf0df;    display: inline-flex; flex-grow: 1;  flex-wrap: wrap;  justify-content: center; padding: 10px 6px;}



}





/*圖文模組*/

/*錨點*/
.slidecontain {display:none;/*display: flex;*/flex-wrap: wrap;justify-content: center;margin-top: 30px;}
.slidecontain li {margin:5px 10px;background: #FFF;border-radius: 20px;border: 1px solid #217f41;color:#217f41;}
.slidecontain li:hover{background: #217f41;}
.slidecontain li:hover .anchorLink div {color:#FFF;}

.slidecontain li.on {background: #217f41;}
.slidecontain li.on .anchorLink div {color:#FFF;}
.slidecontain li .anchorLink div {font:18px/1.6 "微軟正黑體";color:#217f41;padding: 2px 10px;}



.poi.poiNoGroup .slidecontain{display: flex;}


/*.slidecontain {display:block;display: flex;flex-wrap: wrap;justify-content: center;}
.slidecontain li {margin:5px 10px;border-bottom: 1px solid #000;}
.slidecontain li:hover{box-shadow: 0px 1px 0px  #000;}
.slidecontain li .anchorLink div {font:18px/1.6 "微軟正黑體";color:#000;}*/


@media screen and (max-width:1000px) { 
.slidecontain li:hover{box-shadow: none;}

}

@media screen and (max-width:600px) {
.poi.poiNoGroup .slidecontain li{margin: 5px 3px;}
.poi.poiNoGroup .slidecontain li .anchorLink div {font:16px/1.6 "微軟正黑體";}
}


.poi{background: #fff3df;text-align: center;padding: 30px 0;}
.poi > h2{font: bold 36px/1.2 "arial","微軟正黑體"; color: #217f41;border-bottom: 3px solid #217f41;display: inline;position: relative;margin: 10px auto;}

.ph-group{display: none;}
.ph-group.on {display: flex;flex-wrap: wrap;justify-content: center;width: 80%;margin: 0 auto 0px auto;border-radius: 0 0 20px 20px;padding: 10px 3%;position: relative;}
.ph-group .ph-group-content {width: 23%;position: relative;border-radius: 20px;overflow:hidden; margin: 10px; display: flex;flex-wrap: wrap;box-shadow: 0px 0px 5px rgba(0,0,0,0.3);}
.ph-group-title{display:none;font:24px/1.2 "微軟正黑體";margin-top: 30px;   background: #297744;  color: #FFF; /*display: inline-flex;*/ padding: 3px 20px; border-radius: 20px;}
.ph-group .ph-group-content-photo{overflow:hidden; }
.ph-group .ph-group-content-photo img{width: 100%;}
.ph-group .ph-group-content-text-sale{color: #e31818; margin: 10px ; font: 16px/1.4 "微軟正黑體";text-align: left;padding:0px 15px;background: #ffee79;}
.ph-group .ph-group-content-text{text-align: center;background: #FFF;height: 100%;width: 100%;margin-top: -2px;}
.ph-group .ph-group-content-text-name{font:bold 20px/1.4 "微軟正黑體";/*background: #508560;*/color:#000;width: 100%; display: block;padding: 5px 8px ;text-align: left;}
.ph-group .ph-group-content-text-detail{color:#3b3b3b;font:16px/1.4 "微軟正黑體";text-align: left;margin: 5px auto;padding:0px 15px 50px 15px;}
.ph-group .ph-group-content-text-price{ width: 100%; /* border-radius: 20px; */ background: #ed4f4f; display: block; font: bold 24px/1.45 "微軟正黑體"; text-align: center;
    /* margin: 10px auto 5px auto; */ align-self: end; position: absolute; bottom: 0px;  left: 0px;color:#ffff6e;padding: 2px 0 0 0;}
.ph-group .ph-group-content-text-price span{font:17px/2.2 "微軟正黑體";color:#FFF;}
.ph-group-content-tag { position: absolute; top:0px ; left: 0px; font: 20px/1 "微軟正黑體"; color: white;background: #eb7d44;padding: 5px 10px;border-radius: 0 0 10px 0;}


.poi.poiMore .ph-group{display: flex;flex-wrap: wrap;justify-content: center;width: 80%;margin: 0 auto 0px auto;border-radius: 0 0 20px 20px;padding: 10px 3%;position: relative;}
.poiContent{padding: 30px 0;}
.poiContent h3 {font:bold 32px/1.4 "微軟正黑體";color:#000;position: relative;display: inline-block;z-index: 9;}
.poiContent h3:before{content: "";width: 100%;height: 20px;background:#fff979;position: absolute;bottom: 0px;left: 0; z-index: -1;}
.poiMenu {display: flex;flex-wrap: nowrap;justify-content: center;margin: 20px auto;}
.poiMenu li {font:24px/1.4 "微軟正黑體";background: #ff3a3a; border-radius: 30px;padding: 3px 20px;border:1px solid #ff3a3a;margin:0 10px; color: #FFF;cursor: pointer;transition: 0.3s;}
.poiMenu li:hover{color: #ff0;}
.poiMenu li.sale {background: #ff3a3a;border:1px solid #ff3a3a;}
.poiContent h3.sale{color:#ff3a3a; }

.poi.poiNoGroup {background: #fff3df;}
.poi.poiNoGroup .ph-group .ph-group-content-text-sale{ margin: 3px 8px;padding: 0;font: 16px/1.6 "微軟正黑體";}




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

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

.ph-group .ph-group-content{width: 32%;}

}

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

.ph-group .ph-group-content{width: 45%;}

}

@media screen and (max-width:768px) {
.ph-group .ph-group-content{width: 45%;}
#mtkContainer h2 span{ font:bold 24px/1 "arial","微軟正黑體";}

.poiMenu li {font:16px/1.4 "微軟正黑體";margin: 5px;}
}

@media screen and (max-width:494px) {
.ph-group .ph-group-content{width: 100%;}
.poi.poiMore .ph-group,.ph-group.on{width: 90%;}

.poiMenu li{width: 45%;}
.poiMenu{flex-wrap: wrap;}



}



#mtkContainer h2.infor-title{padding: 30px ;margin: 0 auto;}
.infor-content {text-align: left;;background: #FFF;max-width: 1200px;border-radius: 20px ;border:3px solid orange;width: 90%;margin: 0 auto;padding: 10px 30px;font:16px/2 "微軟正黑體";}
.infor-content ul li span{background: green;padding: 5px 10px;color:#FFF;border-radius: 20px;white-space: nowrap;}


.btnBase {margin: 30px auto 30px auto;text-align: center;}
.btnBase a {margin: 5px 15px;border-radius: 30px; padding:10px 40px 10px 30px;font:24px/1.2 "微軟正黑體";color:#FFF;background: #4b94e2;transition: 0.3s;display: inline-block;position: relative;}
.btnBase.orange a{background: #ff6c23;color: #FFF;font:bold 30px/1.2 "微軟正黑體";}
.btnBase a:hover{transform: translateY(-5px);filter: brightness(110%);}

.btnBase.more a{padding:10px 36px;font:24px/1.2 "微軟正黑體";position: relative}
.btnBase img.hand {max-width: 30px;position: absolute;right: 5px;bottom: -5px; animation:up 0.5s alternate infinite ease-out;-webkit-animation:up 0.5s alternate infinite ease-out;}


.hpd-btn {margin: 0px auto 30px auto;text-align: center;}
.hpd-btn-base {background: #ff6c23;border-radius: 40px;font:24px/1.2 "微軟正黑體";display: inline-flex;flex-wrap: nowrap;justify-content: center;align-items: center;padding:8px 20px; gap: 8px;position: relative;}
.hpd-btn-base b{color: #FFF;font-weight: normal;}
.hpd-btn-box{display: inline-flex;flex-wrap: nowrap;justify-content: center;gap: 8px;}
.hpd-btn-base a{color: #FFF;background: green;border-radius: 30px;padding: 4px 16px;color: #fff;transition: 0.3s;}
.hpd-btn-base a:hover{transform: translateY(-2px);filter: brightness(110%);}
.hpd-btn-base img.hand {max-width: 30px;position: absolute;right: 10px;bottom: -15px; animation:up 0.5s alternate infinite ease-out;-webkit-animation:up 0.5s alternate infinite ease-out;pointer-events:none;}


@keyframes up{

  0% {transform:  translate(0px,0px);}
  100% {transform:  translate(0px,-5px);}

}

@-moz-keyframes up{
  0% {transform:  translate(0px,0px);}
  100% {transform:  translate(0px,-5px);}
}

@-webkit-keyframes up {
  0% {transform:  translate(0px,0px);}
  100% {transform:  translate(0px,-5px);}
}

@-o-keyframes up {
  0% {transform:  translate(0px,0px);}
  100% {transform:  translate(0px,-5px);}
}

@-ms-keyframes up {
  0% {transform:  translate(0px,0px);}
  100% {transform:  translate(0px,-5px);}
}