* { box-sizing: border-box; font-family: "微軟正黑體","思源黑體","arial"; transition: 0.3s;}
#mtkContainer {background: #f9f9f9; padding-bottom: 40px;}
#dadaochengPage #mtkContainer  {background: url(../images/bg2.jpg) top center repeat-y;}


a{text-decoration: none; }
/*版頭*/
#groupPage header.header{background: url(../images/header20220221.jpg) top center no-repeat;}
#dadaochengPage header.header{background: url(../images/header.jpg) top center no-repeat;}
header.header{position: relative; height:600px; background: url(../images/header.jpg) top center no-repeat;}
header.header h1{display: none;}
/* 按鈕 */
#groupPage .wrap-menu{background:#32acd1;}
.wrap-menu{position: sticky; width: 100%; top: 0; left: 0; background: #4e68af; text-align: center;height: auto;z-index: 99;}
.wrap-menu ul.menu-bar{width: 100%; margin: 0 auto;}
.wrap-menu ul.menu-bar li{display: inline-block;  margin: 0px -2px;}
.wrap-menu ul.menu-bar li a{font:24px/1.2 "微軟正黑體" ; color: #ffffff;padding: 9px 30px;display: inline-block;transition:0.3s;}
.wrap-menu ul.menu-bar li a:hover,.wrap-menu ul.menu-bar li a.on {background:#eb5555;}

#dadaochengPage  .wrap-menu{background:#4e68af;}
#dadaochengPage .wrap-menu ul.menu-bar li a.on{background:#eb5555;}


.wrap-menu .st0{fill: #FFF;}
.wrap-menu svg{width: 22px;height: 22px;display: inline-block;}
.menu-bar li a:hover svg,.wrap-menu ul.menu-bar li a.on svg{transform: translateY(-5px);}

.wrap-menu ul.menu-bar li a:hover svg{animation:upDown ease-out 0.5s infinite;}

@keyframes upDown{
  0%{
    transform: translateY(0px);
  }
  25%{
    transform: translateY(-5px);
  }

}



.topBtn {position: fixed;width: 50px;height: 50px;background: rgba(0,0,0,0.8);color:#FFF;font: 16px/1.2 "微軟正黑體";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 "微軟正黑體";}





/*poi模組*/
.poi{margin: 0 auto;padding: 0px 0 20px 0;}
.poiMenu {text-align: center;margin: 0px auto;/*border-bottom:1px solid #f84646;*/ background:#d1fffe;padding: 8px 0;position: sticky;height: auto;top: 46px;z-index: 99;}
.poiMenu li{color:#4e68af;font:20px/1.2 "微軟正黑體"; padding: 3px 20px;width: auto;display: inline-block;cursor: pointer;margin: 0 10px;}
.poiMenu li:hover{background:#FFF;color:#4e68af;}



#groupPage .poiMenu {background: #c0e4ed;}
#groupPage .poiMenu li {color: #2d869c;}


.poiGoods{border-radius: 20px;/*margin: 20px auto*/;}

.poiGoods > article {padding: 20px 0;margin: 0 auto;width: 100%;}

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


.ph .ph-group-content{margin: 15px 5px;transition: 0.2s;padding: 10px 10px 40px 10px; width: 24.1%;position: relative;flex-shrink: 1;background: #FFF;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.ph .ph-group-content-photo {display: block;overflow: hidden;}
.ph .ph-group-content-photo img{width: 100%;}
.ph .ph-group-content:hover .ph-group-content-photo img{transform: scale(1.05);}
.ph .ph-group-content-text{padding: 10px 15px;}
.ph .ph-group-content-text-name{color:#1f9eed;font:bold 18px/1.4 "微軟正黑體";/*margin: 10px auto;*/display: block;/*padding: 10px 0;*/}
.ph .ph-group-content-text-detail{color:#000;font:15px/1.4 "微軟正黑體";margin: 5px auto ;}
.ph .ph-group-content-text-detail a{color:#000;}
.ph .ph-group-content-text-price {color:#ff5159;position: absolute;border-radius:10px 10px 0 0;padding: 5px 10px;font:bold 24px/1.4 "微軟正黑體";text-align: center;display: block;right: 10px;bottom: 10px;}
.ph .ph-group-content-text-price span{font-size: 80%;line-height: 1.8;}
.ph .ph-group-content-tag {position: absolute;left: 0%; top: 25px; background: #ff8500;font:15px/1.4 "微軟正黑體";color:#FFF;padding: 3px 10px;border-radius: 0 20px 20px 0;}
.ph .ph-group-content-text-sale{margin: 5px auto; font: 16px/1.4 "微軟正黑體"; color: red;/*background:#ffff93;display: inline;*/}
.ph .ph-group-content-text-sale a { color: red;}
.ph-group-title,.moreTab h4 {text-align: left;margin: 10px auto 0 auto;border-radius: 20px 20px 0 0;display: block;border-bottom: 2px solid #505050;}
.ph-group-title span ,.moreTab h4 span{font:bold 24px/1.6 "微軟正黑體";color:#505050;padding: 5px 10px;}
.ph-group-title{width: 100%;}

.ph .link-right{ background: #5c61d1; text-align: center; display: block; margin: 10px auto 20px auto; width:28%; padding: 10px 20px 10px 10px;  color: #FFF; border-radius: 20px; font-size: 18px;min-width: 350px;position: relative;}
.ph .link-right:after{content: "→";width: 90%;height: 90%;position: relative;border-radius: 99em;background:#FFF;color: #5c61d1;padding: 4px 7px;right: -10px;transition: 0.3s;}
.ph .link-right:hover:after{right: -15px;}


.moreTab h4{width: 80%;max-width: 1300px;}





/*2層+tab切換*/
.moreTab{background:url(../images/bg.jpg) no-repeat,#fffcf1;width: 80%;}
.moreTab .slidecontain{display: flex;flex-wrap: wrap;justify-content: left;margin:10px auto;}
.moreTab .slidecontain li{display: inline-block;padding: 10px 15px ;background:#e7bd8a;margin:0 5px;transition:0.3s;cursor: pointer;border-radius: 0px;flex-grow: 1;}
.moreTab .slidecontain li.on,.moreTab .slidecontain li:hover{background:#c98b48;}
.moreTab .slidecontain li.on a,.moreTab .slidecontain li:hover a{color:#FFF;}

.moreTab .slidecontain li a {color:#FFF;font: 16px/1 "微軟正黑體";}
.moreTab .ph-group-title {display: none;}
.moreTab .ph-group.on {display: flex;}
.moreTab .ph-group{display: none;}


/*Blog POI*/
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content {width: 47%;margin: 10px 10px;padding: 10px 10px 40px 10px;display: inline-flex;flex-wrap: wrap;border: 9px solid #d6d8ff;transition: 0.3s;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content:hover{border: 9px solid #484db9;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-photo {width: 35%;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text{width: 62%;flex-wrap:wrap;position: static; flex-shrink: 1;flex-grow: 1;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text-detail{font:14px/1.4 "微軟正黑體";}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text-price {position: absolute;right: 20px;bottom: 0px;background: #484dba;color:#FFF;font:20px/1.4 "微軟正黑體";transition:0.3s;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text-price:hover{padding: 5px 10px 10px 10px;filter: brightness(1.2);}



/*風景POI*/
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-price {display: none;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text {position: relative;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-name{margin-left: 22px;font:bold 20px/1.4 "微軟正黑體";}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-detail{font:14px/1.4 "微軟正黑體";}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content:nth-of-type(even) .ph-group-content-text-name{color:#e95555;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content:nth-of-type(even) .ph-group-content-text-name:before{background: url(../images/here2-red.png );}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-name:before{content: "";background: url(../images/here2.png );width: 24px;height: 24px;position: absolute;left: 10px;top: 10px;}


.event .ph-group-title{display: none;}
.event .ph .ph-group-content{border-radius: 20px;width: 90%;max-width: 1400px;padding:  0 30px 30px 30px;background: #ffe8bd;border: 6px solid #3cc2cf;}
.event .ph-group-content-text-name {font:bold 30px/1.4 "微軟正黑體";text-align: center;color: #fff;;background: #3cc2cf;display: inline-block;margin: 0 auto;padding: 5px  50px;clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);border-radius:  0 0 10px 10px;}
.event .ph-group .ph-group-content-photo{display: none;}
.event .ph-group .ph-group-content-text-price {display: none;}
.event .ph .ph-group-content-text{padding: 0;text-align: center;}
.event .ph-group .ph-group-content-text-detail{font:20px/1.4 "微軟正黑體";color: #29aebb;padding: 20px;text-align: left;}


.giftPoi .ph .ph-group-content{width: 95%;display:inline-flex;flex-wrap: nowrap;padding: 20px;max-width: 1400px;}
.giftPoi .ph .ph-group-content-photo{width: 45%;}
.giftPoi .ph .ph-group-content-text {width: 45%;flex-grow: 1 ;}
.giftPoi .ph .ph-group-content-text-name{color:#3172e9;font:bold 26px/1.4 "微軟正黑體";padding: 5px;margin-bottom:20px;}
.giftPoi .ph .ph-group-content-text-price {display: none;}






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

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

.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content {width: 45%;}
  

}


@media screen and (max-width:1200px) { 
.wrap-menu ul.menu-bar li a{font:18px/1.4 "微軟正黑體";padding:10px 10px;}
.wrap-menu svg{display: none;}
.poiMenu li{font:16px/1.4 "微軟正黑體";margin:0px 3px;padding: 3px 10px;}
.poiMenu{top:45px;}
.poiGoods > article{width: 100%;margin: 0 auto;}

}

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

header.header{height: auto; background: none;}
header.header h1{display: block;}
header.header h1 img{width: 100%;}

}


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

.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content {width: 45%;margin: 10px auto;padding: 10px 10px 40px 10px;display:block;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-photo {width: 100%;}
.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content-text{width: 100%;}

}

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

.poi {padding: 0 0 10px 0;}
.poiMenu{top:39px;}
.poiMenu{/*background:#fff1db;*/white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;border: none;}
.poiMenu li {margin:0px 10px;font:15px/1.6 "微軟正黑體";padding: 0px;}

.ph .ph-group-content{width: 48%;}
.moreTab .slidecontain li{margin:5px;flex-shrink: 1; flex-grow: 1;display: flex;justify-content: center;}
.moreTab .slidecontain li a {font: 15px/1 "微軟正黑體";text-align: center;}

.giftPoi .ph .ph-group-content{flex-wrap: wrap;display: flex;}
.giftPoi .ph .ph-group-content-photo{width: 100%;}
.giftPoi .ph .ph-group-content-text {width: 100%;flex-grow: 1 ;}
.giftPoi .ph .ph-group-content-text-name{font:bold 20px/1.4 "微軟正黑體";}


}

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

.wrap-menu{white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;}
.wrap-menu ul.menu-bar li a{font:14px/1.4 "微軟正黑體";padding:10px 7px;}

.poiMenu li{font:14px/1.4 "微軟正黑體";}
.ph .ph-group-content-text-name{font:bold 16px/1.4 "微軟正黑體";}
.ph .ph-group-content-text{padding: 10px 0;}
.ph .ph-group-content-text-detail{font:14px/1.4 "微軟正黑體";}
.ph .ph-group-content-text-price{font:bold 20px/1.4 "微軟正黑體";}
.ph-group-content-text-sale{font:14px/1.4 "微軟正黑體";}
.ph-group-title span ,.moreTab h4 span{font:bold 20px/1.6 "微軟正黑體";}

.ph-group{padding: 1% 3%;}
.ph-group{width: 100%;}
.ph-group-title,.moreTab h4{width: 90%;}
.poi .ph{width: 100%;}
.ph .ph-group-content{width: 90%;margin: 10px auto;}
.ph .ph-group-content-text-sale{font: 14px/1.4 "微軟正黑體";}


.hotspotsPoi .ph-group:nth-of-type(1) .ph-group-content {width: 90%;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-name{margin-left: 27px;}
.hotspotsPoi .ph-group:nth-of-type(2) .ph-group-content-text-name:before{left: 0px;top: 10px;}


.ph .link-right {font-size: 16px;min-width: auto; width:80%;padding:7px 10px;}
.ph .link-right:after{content: none;}

.event .ph .ph-group-content-text-name{font:bold 3.8vw/1.4 "微軟正黑體";}
.event .ph-group .ph-group-content-text-detail {font:18px/1.4 "微軟正黑體";}



}



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

.moreTab .slidecontain {/*background:#fff1db;*/white-space:nowrap;-webkit-overflow-scrolling: touch; overflow-scrolling: touch;overflow-x: scroll;flex-wrap: nowrap;}
.moreTab .slidecontain li{padding: 10px 5px;}
.topBtn {width: 38px;height: 38px;font: 14px/1.2 "微軟正黑體";right: 0%;bottom: 10%;border-radius: 99em;padding-top: 16px;}
.topBtn::before{content: '▲';position: absolute;top: 1px;left: 14px;font: 10px/1.2 "微軟正黑體";}

.event .ph .ph-group-content-text-name{font:bold 5vw/1.4 "微軟正黑體";padding: 5px 10%;}

}


.disneyevent {display: none;}
.disneyevent img{max-width: 1000px ; width: 80%;margin: 0 auto;}
.disneyevent.m{display: block;}



.giftPoi table {width:90%; border-collapse: collapse; margin:10px auto;font-size: 16px;font: 15px/1.4 "微軟正黑體";text-align: center;max-width: 1200px;background: #FFF;}
.giftPoi table th{background-color: #bf0912;color:#FFF; width:20%;text-align: center;}
.giftPoi table td{text-align: justify;text-align: center;}
.giftPoi table th,.giftPoi table td{border:1px solid #333;padding: 5px;}
.giftPoi b{font:bold 32px/1.4 "微軟正黑體";background: #295cbb;color:#FFF;border-radius: 40px;padding: 5px 20px;margin: 0 auto;display: block;text-align: center;width: 20%;min-width: 300px;}



/*煙火*/

#fireworksContent{margin: 80px auto 20px auto;}
#fireworksContent .ph-group-title{display: none;}
#fireworksContent h3{color: #FFF; font:34px/1.4 "微軟正黑體";margin: 0 auto;text-align: center;display: block;}

/*POI客製*/
.fireworksItem  * {transition: 0.3s;}
.fireworksItem .ph .ph-group-content{padding: 10px 10px 65px 10px;border-radius: 20px;}
.fireworksItem .ph .ph-group-content:hover{transform: translateY(10px);}
.fireworksItem .ph .ph-group-content-text-name{color: #1219b5;}
.fireworksItem .ph .ph-group-content-text-price {background: #fdff62;width: 90%;position: absolute;border-radius: 20px;bottom: 10px;left:5%;}

/*大盜埕煙火介紹POI*/
.fireworksPoi { position: relative; margin: 50px auto 50px auto; padding-top: 0px;  width: 100%;}
.fireworksPoi .ph { position: relative }
.fireworksPoi .ph-menu { display: none;}
.fireworksPoi .slidecontain img ,
.fireworksPoi .ph-group-title img { display: none;}
.fireworksPoi .ph-group { margin-bottom:30px; display: flex ; flex-wrap: wrap; justify-content: center;  }
.fireworksPoi .ph-group-title { display: flex; margin: 20px 0 40px 0; justify-content: center;color:#d49425; }
.fireworksPoi .ph-group-title span { position: relative; display: inline-block; font:24px/1.4 "微軟正黑體"; color: #FFF  ;border-radius: 20px;padding: 5px 20px;background: #2fb3ac;}
.fireworksPoi .ph-group-content { display: inline-flex; margin:15px auto; width: 100%; flex-wrap: wrap;border-radius: 20px;overflow: hidden;background: none; box-shadow:none;}

.fireworksPoi img { width: 100%;}
.fireworksPoi .ph-group-content-photo { position: relative; width: 40%; }
.fireworksPoi .ph-group-content-tag { position: absolute; top:10px ; left: 10px; font: 14px/1 "微軟正黑體"; color: white; letter-spacing: 2px; text-shadow: 0 0 5px rgba(0,0,0,0.75); }
.fireworksPoi .ph-group-content-text { position: relative;  padding: 20px; width: 60%;flex-shrink: 1;}
.fireworksPoi .ph-group-content-text-name { display: inline-block; padding: 10px 20px; font: bold 24px/1.4 "微軟正黑體"; color: #fff; border-radius: 0px;margin: 0px auto;background:#ff6a6a ;border-radius: 40px;}
.fireworksPoi .ph-group-content-text-sale { padding:0; font: 16px/1.2 "微軟正黑體"; color: #000000; letter-spacing: 2px; background: #fffd7c;display: block;margin: 10px 0;}
.fireworksPoi .ph-group-content-text-sale a{color: #000000;}
.fireworksPoi .ph-group-content-text-detail { font: 16px/1.6 "微軟正黑體"; color: #FFF;padding: 10px 20px; }
.fireworksPoi .ph-group-content-text-detail a{color: #FFF;}
.fireworksPoi .ph-group-content-text-price { position: absolute; bottom: 15px; right: 10px; font:  20px/1.4 "arial","微軟正黑體"; background: #ff424f; color: #FFF;text-align: center;border-radius: 20px;padding: 10px 20px;display: none;}
.fireworksPoi .ph-group-content-text-price span { font-size: 0.7em; font-weight: 100; line-height: 1.7;}
.fireworksPoi .ph-group-content:hover .ph-group-content-text-price{padding:  10px 30px;}


@media only screen and (max-width:1400px) {
.fireworksPoi .ph-group-content{width: 95%;}
.fireworksPoi .ph-group-content-text-name{ font: bold 20px/1.4 "微軟正黑體";}
}

@media only screen and (max-width: 768px) {
.fireworksPoi .ph-group-content{width: 90%;}
.fireworksPoi .ph-group-content{display: flex;flex-wrap: wrap; }
.fireworksPoi .ph-group-content-photo {width: 100%;}
.fireworksPoi .ph-group-content-text{width: 100%;padding:0;margin-top: 20px;}
.fireworksPoi .ph-group-content-text-name{font:bold 20px/1.6 "微軟正黑體";}
}



.bnad{
  max-width: 1200px;
  text-align: center;
  margin: 40px auto 20px auto;
}

.bnad img {
  width: 100%;
  transition: 0.3s;
}
.bnad img:hover {
  transform: scale(0.98);
}
@media only screen and (max-width: 768px) {
  .bnad{

    margin: 20px auto;
  }  
  .bnad img {
    width: 90%;
 
  }
}