.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; font-family: "微軟正黑體", "roboto", "Helvetica Neue", "Helvetica", "Arial","Microsoft JhengHei", sans-serif;background: #c2ffaf;} 
#mtkContainer { position: relative;overflow-x: hidden;}
#mtkContainer, #mtkContainer * { /*vertical-align: top;*/ box-sizing: border-box; }

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

.middle{width: 100%; max-width: 1400px; margin: 0 auto; position: relative;}
.pos-rel{position: relative;}
.pos-abs{position: absolute;}

/*版頭*/
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;}

/*goTop*/
.goTop{display: none; position: fixed; bottom:8%; right: 2%; text-align: center; z-index: 99;}
.goTop a{color: #fff;}
.goTop li{display: block; cursor: pointer; font: 16px/1.1 "arial", "微軟正黑體"; color: #fff; background: #ff8454; border-radius: 99em; width: 60px; height: 60px; padding: 12px 12px;transition: all .3s;}
.goTop a:hover li{background: #4c9e32;}

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

/*錨點按鈕*/
.nav{position: relative; width:100%; background:#a7f38f; text-align: center; z-index: 98;margin:0 auto;}
.nav > ul.box {display: flex; justify-content: center; align-items:stretch; } 
.nav ul.box a{display: inline-block; border-radius: 99em; margin: 1% 0.5% 1%;; background: #fe8453; cursor: pointer;letter-spacing: normal;transition: 0.2s;}
.nav ul.box a li{color: #fff; font: bold 26px/1.2 "微軟正黑體"; cursor: pointer; padding: 6px 10px 5px; margin: 0 8px;}
.nav ul.box a li svg{display: inline-block; width: 22px;height: 22px;}
.nav ul.box a:hover{box-shadow: none; top: 2px; transform: translateY(4px); background: #4c9e32;}
.nav.scroll{position: fixed;top: 0;width: 100%;z-index:100;background:#a7f38f;}



/*主題樂園*/
.parkWrap{position: relative; width: 100%;margin: 0 auto; background: url(../images/bg-01cp.png) center bottom no-repeat,#c2ffaf;text-align: center; padding-bottom: 130px;}
.parkWrap .paragraph{display: block;padding-bottom: 30px;}
.parkWrap .paragraph img{width: 100%;}

/*各區背景*/
.ticketsWrap{position: relative; width: 100%;margin: 0 auto; background: url(../images/bg-02.png) center bottom no-repeat,#8ddf84;text-align: center;padding-bottom: 130px;}
.museumWrap{position: relative; width: 100%;margin: 0 auto; background: url(../images/bg-03.png) center bottom no-repeat,#c2ffaf;text-align: center;padding-bottom: 130px;}
.farmWrap{position: relative; width: 100%;margin: 0 auto; background: url(../images/bg-04.png) center bottom no-repeat,#8ddf84;text-align: center;padding-bottom: 160px;}
/*.farmWrap{position: relative; width: 100%;margin: 0 auto;  background: url(../images/bg-blogOg.png) center bottom no-repeat,#c2ffaf;text-align: center;padding-bottom: 130px;}

*/

/*POI*/
.pdBox{width: 100%; position: relative; max-width: 1400px; text-align: center; margin: 0px auto ; padding: 8px 0 30px; display: block;}
.pdBox h2{display: flex; font: bold 40px/1.8 "微軟正黑體"; color: #fff; text-align: center; margin: 2% auto 2.5%; position: relative;width: 280px;  top: 0px; justify-content: center; align-items: center; }
.pdBox.p1 h2::before{ content: ""; position: absolute;background: url(../images/illust-01.png)top center no-repeat;left: -160px; width: 130px;height: 130px;display: block;}
.pdBox.p1 h2::after{ content: ""; position: absolute; background: url(../images/illust-02.png)top center no-repeat;right: -160px; width: 130px;height: 130px;display: block;}
.pdBox.p2 h2::before{ content: ""; position: absolute;background: url(../images/illust-03-ticket.png)top center no-repeat;left: -160px; width: 130px;height: 130px;display: block;}
.pdBox.p2 h2::after{ content: ""; position: absolute; background: url(../images/illust-04-camera.png)top center no-repeat;right: -160px; width: 130px;height: 130px;display: block;}
.pdBox.p3 h2::before{ content: ""; position: absolute;background: url(../images/illust-05-art.png)top center no-repeat;left: -160px; width: 130px;height: 130px;display: block;}
.pdBox.p3 h2::after{ content: ""; position: absolute; background: url(../images/illust-06-draw.png)top center no-repeat;right: -160px; width: 130px;height: 130px;display: block;}
.pdBox.p4 h2::before{ content: ""; position: absolute;background: url(../images/illust-07-dinosaur.png)top center no-repeat;left: -160px; width: 130px;height: 130px;display: block;}
.pdBox.p4 h2::after{ content: ""; position: absolute; background: url(../images/illust-08-museum.png)top center no-repeat;right: -160px; width: 130px;height: 130px;display: block;}
.pdBox.p5 h2::before{ content: ""; position: absolute;background: url(../images/illust-09-cow.png)top center no-repeat;left: -160px; width: 130px;height: 130px;display: block;}
.pdBox.p5 h2::after{ content: ""; position: absolute; background: url(../images/illust-10-farm.png)top center no-repeat;right: -160px; width: 130px;height: 130px;display: block;}





h2.pink{ background: url(../images/sloganPink.png); }
h2.blue{ background: url(../images/sloganBlue.png); }
h2.og{ background: url(../images/sloganOg.png); }

.pdBox .poiBase{padding: 10px 0;}
.pdBox .ph-group-title{display: none; font-size: 30px; padding: 1em 0  0.5em;font-weight: bold; letter-spacing: 0.2em; color: #fff;}
.pdBox .ph-group-title img{display: none;}
.pdBox .ph-group{display: flex; justify-content: center; flex-wrap: wrap; padding: 0 1% 0;}
.pdBox .ph-group-content {width: 30%; position: relative; overflow:hidden; margin: 10px; border-radius: 15px;background: #fff;transition: 0.3s;}
.pdBox .ph-group-content-photo{overflow:hidden; position: relative;}
.pdBox .ph-group-content-photo img{width: 100%;}
.pdBox .ph-group-content-photo .ph-group-content-tag{padding: 8px 5px 5px;position: absolute;top: 0px;left: 0px; font: 400 16px/1 "Century Gothic","微軟正黑體";color: #fff;background: #ff514a;padding: 5px 12px 5px 6px; }
.pdBox .ph-group-content-text{text-align: left; padding:15px 15px 35px 15px;background: #fff; }
.pdBox .ph-group-content-text-name{color: #ff5cb4; font: bold 20px/1.3 "微軟正黑體";display: block;border-bottom: dotted 1px #ff5cb4; padding: 5px 0 10px;}
.pdBox .ph-group-content-text-detail{color: #757474;font:15px/1.5 "微軟正黑體";text-align: left; margin: 15px auto 25px;}
.pdBox .ph-group-content-text-detail a{color: #757474;}
.pdBox .ph-group-content-text-price{width: 100%; height: auto; display: block; background: #ff6bbb; color:#fff; font:bold 26px/1.4 "Century Gothic","微軟正黑體";text-align: center; align-self: end; position: absolute; bottom: 0; left: 0; padding: 5px; }
.pdBox .ph-group-content-text-price span{font:16px/1.4 "Century Gothic","微軟正黑體";color: #fff; vertical-align: baseline;}
.pdBox .ph-group-content:hover{transform: translateY(5px);box-shadow: rgb(121 121 121 / 30%) 0px 1px 5px 2px; -webkit-box-shadow:rgb(121 121 121 / 30%) 0px 1px 5px 2px; }
.pdBox .ph-group-content:hover .ph-group-content-text-price{background:#f543a4;}
.pdBox .slidecontain {display: none;}


.pdBox .color-bl .ph-group-content .ph-group-content-text-name{color: #0091cf; border-bottom: dotted 1px #0091cf;}
.pdBox .color-bl .ph-group-content .ph-group-content-text-price{background: #0091cf;}
.pdBox .color-bl .ph-group-content:hover .ph-group-content-text-price{background: #0079ac;}




/*旅遊攻略*/
.blogWrap{position: relative; width: 100%;margin: 0 auto; background: url(../images/blogBottomBg.png) center bottom no-repeat,#ffe8c6;text-align: center; padding-bottom: 80px;}

.infoBox{width: 95%; position: relative; max-width: 1400px; text-align: center; margin: 0px auto; padding: 10px 0 30px 0; display: block;}
.infoBox h2{display: flex; font: bold 40px/1.8 "微軟正黑體"; color: #fff; text-align: center; margin: 1% auto 2%; position: relative;width: 280px;  top: 0px; justify-content: center; align-items: center; }
.infoBox h2::before{ content: ""; position: absolute;background: url(../images/illust-11-bag.png)top center no-repeat;left: -160px; width: 130px;height: 130px;display: block;}
.infoBox h2::after{ content: ""; position: absolute; background: url(../images/illust-12.png)top center no-repeat;right: -160px; width: 130px;height: 130px;display: block;}

.info-content{display: flex; flex-wrap: wrap; position: relative;padding: 15px; text-align: left; justify-content: center; align-items: flex-start; background: #fff; border-radius: 15px;}

.info-photo{display: inline-block; width: 50%; border-radius: 10px; overflow: hidden;}
.info-photo img{width: 100%;transition: 0.3s;}
.info-photo:hover img{transform: scale(1.05);}

.info-text{display: inline-block; width: 50%; padding: 25px 10px 25px 25px;}
.info-text .mainText{font: bold 30px/1.3 "微軟正黑體"; margin-bottom: 10px; color: #ff6b53;letter-spacing: normal; margin-bottom: 10px; border-left: 8px solid; padding-left: 11px;}
.info-text .smallText{font: bold 26px/2 "微軟正黑體";}
.info-text p{font: bold 16px/2 "微軟正黑體"; padding-bottom: 3%;}
.info-text .btn{ display: inline-block; color: #fff; letter-spacing: normal; text-align: left; cursor: pointer; box-shadow: rgb(225, 78, 55) 0px 4px 0px; padding: 5px 20px;  font: 18px / 1.8 arial, 微軟正黑體; border-radius: 99em; background: #ff7e52; transition: all 0.3s ease 0s;}
.info-text .btn:hover{box-shadow: none; top: 2px;transform: translateY(4px);background: #f25941;}





/*-------------------------------RWD-------------------------------*/

@media only screen and (max-width: 1500px) {
  .nav ul a li {font: bold 1.5vw/1.4 "微軟正黑體";}
}

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

  .nav ul.box{padding: 1% 0;}
  .nav ul.box a{margin: 1% 0.7% 1.2%;}
  .nav ul.box a li {font-size: 2vw;}
  .nav ul.box a li svg{display: none;}

  .ph{margin: 0 auto; width: 95%;}
}


@media only screen and (max-width: 768px) {
  .nav ul.box{padding: 2% 1%; overflow-x: scroll; white-space: nowrap; justify-content: flex-start;}
  .nav ul.box a{margin: 1% 1%;}
  .nav ul.box a li{font-size: 3.2vw;}

  .parkWrap,.ticketsWrap,.artWrap,.farmWrap{padding-bottom: 100px;}
  .museumWrap{padding-bottom: 80px;}
  .parkWrap .paragraph{display: none;}

  .pdBox{padding-top: 30px;}

  .ph{margin: 0 auto; width: 100%;}
  .pdBox .ph-group{ padding: 3% 0;}
  .pdBox .ph-group .ph-group-content {flex-wrap: wrap; align-content: flex-start; flex-shrink: 0;position: relative;}
  .pdBox .ph-group .ph-group-content-photo,.pdBox .ph-group .ph-group-content-text { display: block; width: 100%; align-self: start; vertical-align: top; }
  .pdBox .ph-group .ph-group-content-text-price { position: absolute; display: block; width: 100%; text-align: center;}
  .pdBox .ph-group{justify-content: center; flex-shrink: 0; flex-grow: 1;}    
  .pdBox .ph-group .ph-group-content {width: 46%;}

  .infoBox h2{margin: 30px auto ;}
  .info-photo,.info-text{width: 100%;display: block;}

}


@media only screen and (max-width: 550px) {
  .nav ul.box a li{font-size: 3.5vw; margin: 0; padding: 5px 12px;}


  .pdBox .poiBase{padding: 0;}

  .pdBox h2,.infoBox h2{font: bold 30px/1.8 "微軟正黑體";}
  .pdBox h2.pink, .pdBox h2.blue, .infoBox h2.og{background-size: 100%;width: 210px;}

  .pdBox.p1 h2::before{ width: 38%;background-size: 100%;left: -105px; height: 85px;}
  .pdBox.p1 h2::after{width: 38%;background-size:100%; right:-100px;height: 85px;}
  .pdBox.p2 h2::before{ width: 38%;background-size: 100%;left: -100px; height: 85px;}
  .pdBox.p2 h2::after{width: 38%;background-size:100%; right:-95px;height: 85px;}
  .pdBox.p3 h2::before{ width: 38%;background-size: 100%;left: -95px; height: 85px;}
  .pdBox.p3 h2::after{width: 40%;background-size:100%; right:-95px;height: 85px;}
  .pdBox.p4 h2::before{ width: 38%;background-size: 100%;left: -100px; height: 85px;}
  .pdBox.p4 h2::after{width: 38%;background-size:100%; right:-100px;height: 85px;}
  .pdBox.p5 h2::before{ width: 38%;background-size: 100%;left: -100px; height: 85px;}
  .pdBox.p5 h2::after{width: 38%;background-size:100%; right:-100px;height: 85px;}
  .infoBox h2::before{ width: 38%;background-size: 100%;left: -100px; height: 85px;}
  .infoBox h2::after{ width: 38%;background-size: 100%;right: -100px; height: 85px;}

  .pdBox .ph-group{ padding: 4% 5%; flex-wrap: nowrap; overflow-x: scroll; justify-content: start; }
  .pdBox .ph-group .ph-group-content { width: 70%; flex-wrap: wrap ; /*align-self: start; */flex-shrink: 0; flex-grow: 1;}
  .pdBox .ph-group .ph-group-content:nth-child(even),
  .pdBox .ph-group .ph-group-content:nth-child(odd) { margin-right: 1.5%;  margin-left: 1.5%;}

  .info-text .mainText{font-size: 28px; }
  .info-text .smallText{font-size: 24px;}

  .parkWrap,.ticketsWrap,.artWrap,.farmWrap{padding-bottom: 80px;}
  .museumWrap{padding-bottom: 80px;}
  .pdBox{padding-top: 10px;}
  .blogWrap{padding-bottom: 30px;}
}



@media only screen and (max-width: 414px) {
  .pdBox h2,.infoBox h2{font: bold 28px/1.8 "微軟正黑體";}
  .pdBox h2.pink, .pdBox h2.blue, .infoBox h2.og{background-size: 100%;width: 200px;}
  
  .pdBox.p1 h2::before{ width: 38%;background-size: 100%;left: -85px; height: 85px;}
  .pdBox.p1 h2::after{width: 38%;background-size:100%; right:-85px;height: 85px;}
  .pdBox.p2 h2::before{ width: 38%;background-size: 100%;left: -85px; height: 85px;}
  .pdBox.p2 h2::after{width: 38%;background-size:100%; right:-85px;height: 85px;}
  .pdBox.p3 h2::before{ width: 38%;background-size: 100%;left: -85px; height: 85px;}
  .pdBox.p3 h2::after{width: 40%;background-size:100%; right:-85px;height: 85px;}
  .pdBox.p4 h2::before{ width: 38%;background-size: 100%;left: -85px; height: 85px;}
  .pdBox.p4 h2::after{width: 38%;background-size:100%; right:-85px;height: 85px;}
  .pdBox.p5 h2::before{ width: 38%;background-size: 100%;left: -85px; height: 85px;}
  .pdBox.p5 h2::after{width: 38%;background-size:100%; right:-85px;height: 85px;}
  .infoBox h2::before{ width: 38%;background-size: 100%;left: -85px; height: 85px;}
  .infoBox h2::after{ width: 38%;background-size: 100%;right: -85px; height: 85px;}

  .infoBox h2{margin: 10px auto 25px;}
}