@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.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;max-width: 1920px;margin: 0 auto; }

#mtkContainer { position: relative; /*overflow-x: hidden;*/}
#mtkContainer,
#mtkContainer * { vertical-align: top; box-sizing: border-box; font-family: 'Montserrat','Noto Sans TC','微軟正黑體';    }

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


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




/*--Goods商品區--*/
.goodsArea{ position: relative; width: 100%; height: auto; margin: 0 auto; background: url(../images/goodsBg.jpg) top center repeat-y;}
.middle1400{ width: 100%; max-width: 1400px; margin: 0 auto; position: relative; padding: 3% 0;}
.middle1280{ width: 100%; max-width: 1280px; margin: 0 auto; position: relative; padding: 3% 0;}

.carrier { font-family: "arial","微軟正黑體"; max-width: 1040px; margin: 0 auto; text-align: center;}
.carrier h4 {
    background: url(../images/line01.png) center top no-repeat;
    height: 76px;
    text-align: center;
    font-size: 44px;
    font-weight: bold;
    color: #cc0020;
    padding-top: 12px;
    /*margin-bottom: -10px;*/
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 1), 1px 1px 2px rgba(255, 255, 255, 1), 1px 1px 2px rgba(255, 255, 255, 1), 1px 1px 2px rgba(255, 255, 255, 1);
}

.group-type-ph {
    font-family: "Microsoft JhengHei", "Apple LiGothic Medium","微軟正黑體";
    text-align: center;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 20px 0;
}

.group-type-ph .ph {
    display: inline-block;
    position: relative;
    width: 31%;
    max-width: 326px;
    margin: 0.5%;
    padding: 10px;
    background: #fff;
    transition: all 0.4s;
    border:solid 6px #ccb04f;
    vertical-align: top;
}


.group-type-ph .ph.active { filter: brightness(1.1);} /*active-hover*/

.group-type-ph .ph a {
    display: block;
    text-decoration: none;
    color: #000;
    text-align: left;
}

.group-type-ph .ph .ph-img img {
    width: 100%;
}


.group-type-ph .ph .ph-title {
    font-size: 18px;
    line-height: 1.2;
    padding: 4% 0;
    font-weight: bold;
}

.group-type-ph .ph .ph-detail {
    text-align: center;
    /*border-radius: 2em;
     width: 90%; 
     background: #ffef78;*/
    color: #3658a0;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    padding: 5px;
    margin: 0 auto;
}

.group-type-ph .ph .ph-feature { display: none;  font-size: 14px; line-height: 1.2; padding: 4% 0;}
.group-type-ph .ph .ph-feature li{ margin: 1.5% 0; text-indent: -1.5em; padding-left: 1.5em; }

.group-type-ph .ph .price {
    font-family: "Century Gothic", "Helvetica";
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
    color: #fff;
    transition: all 0.5s;
    letter-spacing: -0.05em;
    text-align: center;
    padding: 6px 0;
    background: #d60022;
    display: block;
    border-radius: 2em;
    width: 80%;
    margin: 4% auto;
}

.group-type-ph .ph.active .price{ background: #20497f;} /*active-hover*/
.group-type-ph .ph .price span { font-size: 24px; font-weight: normal;}
.group-type-ph .ph .price i { font-family: "Microsoft JhengHei", "Apple LiGothic Medium","微軟正黑體"; font-size: 14px; font-style: normal;}

/*.c26focus .group-type-ph .ph .price{display: none;}
.c26htl .group-type-ph .ph .ph-detail {display: none;}*/




/*--Goods商品區for訂房--*/
.c26ForHtl .group-type-ph { 
    font-family: "Microsoft JhengHei", "Apple LiGothic Medium","微軟正黑體"; 
    text-align: center; 
    width: 100%; 
    max-width: 1360px; 
    margin: 0 auto; 
    padding: 20px 0 30px;
}
.c26ForHtl .group-type-ph .ph { 
    display: inline-block; 
    position: relative; 
    width: 22%; 
    max-width: 326px; 
    margin: 0.5%; 
    padding: 10px; 
    background: #fff;
     transition: all 0.4s; 
     border:solid 4px #ccb04f; 
     vertical-align: top;}
.c26ForHtl .group-type-ph .ph.active { filter: brightness(1.1);} /*active-hover*/
.c26ForHtl .group-type-ph .ph a {
    display: block;
    text-decoration: none;
    color: #000;
    text-align: left;
}

.c26ForHtl .group-type-ph .ph .ph-img img { width: 100%;}
.c26ForHtl .group-type-ph .ph .ph-title {
    font-size: 18px;
    line-height: 1.2;
    padding: 4% 0;
    font-weight: bold;
}

.c26ForHtl .group-type-ph .ph .ph-detail {
    text-align: left;
    color: #3658a0;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    padding: 5px;
    margin: 0 auto;
}

.c26ForHtl .group-type-ph .ph .ph-feature { display: none;  font-size: 14px; line-height: 1.2; padding: 4% 0;}
.c26ForHtl .group-type-ph .ph .ph-feature li{ margin: 1.5% 0; text-indent: -1.5em; padding-left: 1.5em; }

.c26ForHtl .group-type-ph .ph .price {
    font-family: "Century Gothic", "Helvetica";
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
    color: #fff;
    transition: all 0.5s;
    letter-spacing: -0.05em;
    text-align: center;
    padding: 6px 0;
    background: #d60022;
    display: block;
    border-radius: 2em;
    width: 80%;
    margin: 4% auto;
}

.c26ForHtl .group-type-ph .ph.active .price{ background: #20497f;} /*active-hover*/
.c26ForHtl .group-type-ph .ph .price span { font-size: 24px; font-weight: normal;}
.c26ForHtl .group-type-ph .ph .price i { font-family: "Microsoft JhengHei", "Apple LiGothic Medium","微軟正黑體"; font-size: 14px; font-style: normal;}

.pageArc { width: 100%; margin: 0 auto; text-align: center; padding: 10px 0; top: 0; position:sticky; z-index: 50; background: rgba(255,251,238,0.9);}
.pageArc ul li{ position: relative; display: inline-block; margin: 3px 5px; font: 18px/1.3 "arial", "微軟正黑體"; color: #fff; background: #e2a447; border-radius: 2em; padding: 5px 20px;transition: all .3s ease-out; cursor: pointer; transition: 0.3s;}
.pageArc ul li:hover{background: #d87c46;}


/*index選單*/
.indexPoiMenu { position: sticky;  width: 100%;  top: 0px;  left: 0; background: rgba(255,251,238,0.9);  text-align: center;  height: auto;  z-index: 5;  padding: 15px 0;display: flex;flex-wrap: nowrap;justify-content: center;}
.indexPoiMenu-sec{display: flex;flex-wrap: nowrap;align-items: center;gap:0 5px;font-size: 20px;font-weight: 600;}
.indexPoiMenu-sec-text{display: flex;flex-wrap: nowrap;gap: 10px;margin: 0 10px;font-size: 20px;font-weight: 400;}
.indexPoiMenu-sec-text li {cursor: pointer;color: #FFF;font-size: 18px; background: #e2a447;border-radius: 20px;padding: 5px 10px;}
.indexPoiMenu-sec-text li a {color: #FFF;display: block;}
.indexPoiMenu-sec-text li:hover{filter: brightness(1.05);}
.indexPoiMenu-sec-title{color: #a81900;padding: 0px 8px;border-left: 1px solid #a81900; border-right: 1px solid #a81900;}

@media screen and (max-width:900px) {
.indexPoiMenu{padding: 8px 0;top: -1px;}
.indexPoiMenu-sec{font:400 16px/1.2 'Noto Sans TC';}
.indexPoiMenu-sec-text{font:400 16px/1.2 'Noto Sans TC';}
.indexPoiMenu-sec-text li {font-size: 14px;}
.indexPoiMenu-sec-title{font:600 16px/1.2 'Noto Sans TC';}
}


@media screen and (max-width:700px) {
.indexPoiMenu{ white-space: nowrap;  -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow-x: scroll;justify-content: left;}
}




/*c23切換*/
.c23GoodsArea{ width: 100%; margin: 0 auto; position: relative; padding: 0 0 6%;}
.c23Wrapper{ width: 90%; margin: 60px auto 0; position: relative; text-align: center;}

ul.menuBox{ display: flex; width: 70%; position: relative; margin: 0 auto; /*position: absolute; top: -42px; left: 15%;*/ }
ul.menuBox li{ display: inline-block; font: bold 24px/1.4 "arial","微軟正黑體"; padding: 5px 10px; color: #fff; background: #cd7a8e; /*padding: 0.3em 0.3em;  width: 20%;*/ margin: 0 5px; flex-grow: 1; cursor: pointer; transition: all .2s;}
ul.menuBox li.on{ background: #bf9d26; color: #fff; z-index: 6;}
ul.menuBox li:hover { background: #bf9d26; /*filter: brightness(125%);*/ }

.c23PanelBox{ position: relative; background: #fff; z-index: 5; box-shadow: 8px 8px 0px rgba(191,157,38,0.6);}
.c23PanelBox .numberBox{ display: none; width: 90%; margin: 0 auto; padding: 30px 0;}
.c23PanelBox .numberBox h4{ display: none;}
.c23PanelBox .numberBox p{ font: 20px/1.2  "arial","微軟正黑體"; text-align: left;}
.c23PanelBox .numberBox.on{ display: block;}


.carrier .box-head { display: none;}
.carrier li { position: relative; width: 94%; margin: 2% 3%; border-bottom: 1px dotted #ad8a2c;}
.carrier li a {
    position: relative;
    display: block;
    width: 82%;
    text-decoration: none;
    color: #7b613b;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 3%;
    text-align: left;
    transition: all 0.2s; 
}

.carrier li strong {
    display: block;
    width: 122%;
    font-size: 20px;
    line-height: 1.2;
    font-weight: bold;
    padding: 8px 0;
    color: #000;
}

.carrier li .price {
    width: 165px;
    text-align: center;
    font-family: "Century Gothic", "Helvetica", "Microsoft JhengHei";
    font-weight: bold;
    font-style: normal;
    font-size: 16px;
    transition: all 0.2s;
    position: absolute;
    bottom: 0;
    right: -165px;
    color: #cc0020;
    text-align: right;
}

.carrier li:hover a { filter: brightness(1.2);}
.carrier li:hover strong { color: #20497f;}

.carrier li .price span { font-size: 28px; font-weight: normal; line-height: 1;}
.carrier li.active .price { color: #d87013;}

.intro-anchors {display: none;}
.intro-anchors a, 
.intro-anchors span { display: block; color: #fff; text-decoration: none; z-index: 1; position: relative; display: block; width: 60px; height: 60px; background:rgba(0,0,0,0.7); border-radius: 50%; margin: 0 0 7px 0; text-align: center; color: #fff; font-size: 16px; transition: all 0.2s; padding: 12px; line-height: 1.1; cursor: pointer; }
.intro-anchors a:hover , .intro-anchors span:hover { background-color: #000;color: #fff;}



/*c23forPage*/
.c23PageArea{ width: 90%; margin: 0 auto; position: relative; padding: 0 ;}

.c23PageArea .carrier h4 {
    background: linear-gradient(to top, #ffef78 20px, transparent 15px, transparent 100%);
    text-align: center;
    font-size: 44px;
    font-weight: bold;
    color: #cc0020;
    padding-top: 0;
    margin-bottom: 15px;
    display: inline-block;
    position: relative;
    height: auto;
    text-shadow: none;
}
.c23PageArea .carrier{ margin: 0 auto 50px;}
.c23PageArea .carrier ul{ background: rgba(255,255,255,0.8); padding: 10px 5px; } 



/*--熱門景點--*/
.viewArea{ position: relative; width: 100%; height: auto; margin: 0 auto; }
.viewArea.redBG{background: url(../images/viewBg.jpg) top center repeat-y; }
.viewArea h5{
    background: url(../images/line02.png) center top no-repeat;
    height: 76px;
    text-align: center;
    font-size: 44px;
    font-weight: bold;
    font-family: "arial","微軟正黑體"; 
    color: #fff;
    padding-top: 12px;
    margin: 0 auto 15px auto;
    /*text-shadow: 1px 1px 2px rgba(140, 0, 33, 0.5), 1px 1px 2px rgba(140, 0, 33, 0.5), 1px 1px 2px rgba(140, 0, 33, 0.5), 1px 1px 2px rgba(140, 0, 33, 0.5);*/
} 

.city{ position: relative; text-align: center; vertical-align: top; padding: 0px 18px 0px 18px; margin: 0px 10px 10px 10px;}
.city .box { 
    position: relative; 
    display: inline-block; 
    /*width: 400px;*/ 
    width: 45%;
    margin: 10px 10px; 
    vertical-align: top; 
    overflow: hidden; 
    border: solid 2px #e0c567;
}
.city img{ width: 100%; padding: 0; vertical-align: top;}
.city .box .info { 
    position: absolute; 
    background: rgba(0,0,0,0.8); 
    color: #FFF; 
    padding: 0 5%;
    width: 100%; 
    height: 100%;
    bottom: -84%; 
    /*bottom: -222px;*/ 
    transition: 0.5s ease-in-out;
}
.city .box .info h6{ display: block; text-align: center; padding: 14px 0 14px; margin-bottom: 15px; font: bold 24px/1.4 "微軟正黑體"; border-bottom: 1px solid #e0c567;}
.city .box .info p{ font: 18px/1.4 "arial","微軟正黑體"; letter-spacing: 0.05em; padding: 14px 0; text-align: left;}

.city .box:hover .info { bottom:0;}



/*--goTop--*/
.goTop{display: none; position: fixed; bottom:8%; 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: #c6a037; border-radius: 99em; width: 50px; height: 50px; padding: 10px 10px;transition: all .5s;}
.goTop a:hover li{background: #ac7f14;}






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

@media screen and (max-width:1200px){
.city .box .info{ bottom: -82%;}
}


@media screen and (max-width:1050px){
.carrier ul{width: 98%; margin: 0 auto;}
.carrier li a { width: calc(100% - 170px);}
.carrier li strong { width: calc(100% + 170px);}
.carrier li .price { width: 165px;}
}




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

header.header{ position: relative; padding: 0; margin: 0; width: 100%; height:auto; background:none; }
header.header h1 img.mobile{ display:block; max-width: 1300px; width: 100%;}

.city .box .info{ bottom: -80%;}
.city .box .info h6{ font-size: 2.5vw; padding: 3% 0;}
.city .box .info p{ font-size: 1.6vw; }
}



@media screen and (max-width:960px){
/*.goods26{width: 96%;}*/

.c26ForHtl .group-type-ph .ph{ width: 30%; }

.group-type-ph .ph .ph-title, 
.c26ForHtl .group-type-ph .ph .ph-title{ font-size: 17px; padding: 2% 0;}
.group-type-ph .ph .ph-detail,
.c26ForHtl .group-type-ph .ph .ph-detail{ font-size: 16px; }
.group-type-ph .ph .ph-feature,
.c26ForHtl .group-type-ph .ph .ph-feature{ font-size: 12px; padding:2% 0 0 0; }

.group-type-ph .ph .price , 
.group-type-ph .ph .price i,
.c26ForHtl .group-type-ph .ph .price, 
.c26ForHtl .group-type-ph .ph .price i{ font-size: 12px;}

.group-type-ph .ph .price span,
.c26ForHtl .group-type-ph .ph .price span{ font-size: 22px;}

}





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

.carrier h4 , .viewArea h5{ font-size: 5.5vw; height: 13vw; padding-top: 3vw;/* margin-bottom: -2vw;*/ background-size: 35%;}


.c23Wrapper{ width: 95%; }
ul.menuBox{ width: 80%; /*left: 13%; width: 75%;*/}
ul.menuBox li{ font: bold 3vw/1.4 "arial","微軟正黑體"; }

.c23PanelBox{ box-shadow: 5px 5px 0px rgba(191,157,38,0.6);}

.city .box .info h6{ font-size: 20px; }
.city .box .info p{ font-size: 16px; padding: 0 0 14px;}
}



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

ul.menuBox li{ font: bold 3.2vw/1.4 "arial","微軟正黑體"; }
.c23PanelBox .numberBox{ width: 100%;}

.carrier ul{ width: 100%;}
.carrier li { margin: 5% 3%;}
.carrier li a { width: calc(100% - 120px); font-size: 14px; }
.carrier li strong { width: calc(100% + 120px); font-size: 18px;}
.carrier li .price { width: 115px; font-size: 14px; right: -120px;}
.carrier li .price span { font-size: 22px;}

.middle1280{ width: 90%; padding: 5% 0 3%;}
.city{ padding: 0px 18px; margin: 10px 10px;}
.city .box{ width: 100%; margin: 15px auto; }
.city .box .info{ position: static; background: rgba(0,0,0,1);}
.city .box .info h6{ font-size: 22px; }
.city .box .info p{ font-size: 17px; padding: 1% 0 5%; }

.navArea ul{ display: flex;
    justify-content: space-around;
    padding: 0 1%; }

.navArea ul li{ width: 19%;
/* float: left; */
font-size:16px;
white-space: nowrap;
padding: 0; margin: 0 5px; text-align: center;
flex-grow: 1;

 }

}



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

.carrier h4 , .viewArea h5{ font-size: 7vw; height: 14vw; padding-top: 4vw; background-size: 50%;}
.c23PageArea .carrier h4{ font-size: 7vw; }

.c23Wrapper{ margin: 30px auto 0; }
.group-type-ph .ph, 
.c26ForHtl .group-type-ph .ph{ margin: 2% auto; width: 92%; max-width: inherit;}

}




@media only screen and (max-width: 540px) {
ul.menuBox{ width: 90%;}
.c23PanelBox{ box-shadow: none; }
.c23PanelBox .numberBox{ padding: 20px 5px;}
.city .box .info h6{ font-size: 20px; }
.city .box .info p{ font-size: 15px; }
}


@media only screen and (max-width: 490px) {
.pageArc ul li{ font-size: 14px;padding:  5px 10px; }    

}





/*intro-wrap*/
.intro-wrap{background: url(../images/goodsBg.jpg) center top repeat-y;     padding: 50px 0; }



/*promotionMap*/

.promotionMap {  max-width: 1275px; margin:0 auto; font-size: 24px; overflow: hidden;  letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; }
.promotionMap > div { display: inline-block; width: 50%; float: left; padding: 0 1em; }
.promotionMap .mapBG {  width: 100%;  }

.promotionMap .touchMap{position: relative;}
.promotionMap .touchMap span { position: absolute;  z-index: 99; font-size: 24px; color: #fff; cursor: pointer; background: rgba(203,26,68,0.5); border-radius: 5em; padding: 0.25em 1em; transition: all 0.2s;   }
.promotionMap .touchMap span.now { background: rgba(203,26,68,1); }
.promotionMap .touchMap span.oita {top:13%; left: 74%;} 
.promotionMap .touchMap span.miya {top:42%; left: 73%;} 
.promotionMap .touchMap span.kuma {top:41%; left: 47%;}
.promotionMap .touchMap span.kago {top:63%; left: 40%;}
.promotionMap .touchMap span.fuku {top:1%; left: 47%;}
.promotionMap .touchMap span.saga {top:15%; left: 33%;} 
.promotionMap .touchMap span.naga {top:35%; left: 23%;} 


.promotionMap .touchMap .railwayMap{position: absolute;display: none;}
.promotionMap .touchMap .oita img{max-width: 171px;left: -106px;top: -56px;}
.promotionMap .touchMap .oita:hover img{display: block;}

.promotionMap .touchMap .fuku img{max-width: 81px; left: 39px; top: 41px;}
.promotionMap .touchMap .fuku:hover img{display: block;}


.promotionMap .touchMap .kuma img{max-width: 133px; left: 50px; top: -112px;}
.promotionMap .touchMap .kuma:hover img{display: block;}


.promotionMap .touchMap .naga img{max-width: 128px; left: 107px; top: -64px;}
.promotionMap .touchMap .naga:hover img{display: block;}

.promotionMap .touchMap .kago img{max-width: 61px; left: 54px; top: -93px;}
.promotionMap .touchMap .kago:hover img{display: block;}


.promotionMap .touchMapText{padding-top: 2em;}
.promotionMap .touchMapText  h4 { background: url(../images/map-title-bg.png) center center no-repeat; color: #cb821a; font-size: 175%; text-align: center; line-height: 2.5; font-weight: bold; }
.promotionMap .touchMapText  h4 img{padding: 0 0.5em; width: auto; height: 0.8em;}
.promotionMap .touchMapText  p { line-height: 1.5; padding: 1em; font-size:18px;}
.promotionMap .touchMapText .miya ,
.promotionMap .touchMapText .kuma ,
.promotionMap .touchMapText .kago , 
.promotionMap .touchMapText .fuku ,
.promotionMap .touchMapText .saga , 
.promotionMap .touchMapText .naga { display: none }

@media only screen and (max-width: 1200px) {
    .promotionMap{ font-size: 16px; }
    .promotionMap .touchMap span{     font-size: 2vw; }
    .promotionMap .touchMapText  h4{ background-size: contain; }
    .promotionMap .touchMapText p{ padding: 1em 0; }
    .promotionMap .touchMap .oita img{left: -7vw; top: -4vw; width: 12vw; }
    .promotionMap .touchMap .fuku img{left: 4vw;width: 5vw; top: 4vw;}
    .promotionMap .touchMap .naga img{left: 8vw; top: -4vw; width: 9vw;}
    .promotionMap .touchMap .kago img{left: 4vw; top: -7vw; width: 5vw;}
    .promotionMap .touchMap .kuma img{left: 3vw; top: -10vw; width: 9vw;}
    
} 

@media only screen and (max-width: 768px) {
    .promotionMap > div { width: 100%; float: none;  }
    .promotionMap .touchMap span{     font-size: 4vw; }
    .promotionMap .touchMapText{ padding-top: 1em; }

    .promotionMap .touchMap .oita img{left: -14vw;  top: -5vw;width: 22vw; }
    .promotionMap .touchMap .fuku img{left: 6vw; width: 10vw;top: 7vw;}
    .promotionMap .touchMap .naga img{left: 19vw; top: -7vw; width: 14vw;}
    .promotionMap .touchMap .kago img{left: 8vw; top: -12vw; width: 8vw;}
    .promotionMap .touchMap .kuma img{left: 6vw; top: -21vw;width: 17vw;}




}

/*地圖鐵道*/
.railway-intro{
    width: 100%;
    display: inline-flex;
    justify-content: center;
    flex-wrap: nowrap;
    background: #fef6b8;
    padding: 24px;
    border-radius: 20px;
    gap: 12px;
    margin: 10px auto;
    border: 3px solid #cc9a4c;
}

.railway-img{
    width: 50%;
    object-fit: fill;
}

.railway-img img{
    width: 100%;
    max-width: 900px;
    object-fit: cover;
    height: 100%;
    /*object-position: -38px;*/
}

.railway-text{
    width: 60%;
    padding: 0px 12px;
}

.railway-text h5{
    line-height: 1.5;
    color: #c22637;
    font-size: 18px;
    font-weight: bold;
}

.railway-text p.railway-detail{
    padding: 0;
    font-size: 16px;
    line-height: 1.5;
}

.fuku .railway-img img{
    object-position: -75px;
}
.oita .railway-img img{
    object-position: -38px;
}
.kuma .railway-img img{
    object-position: -11px;
}

.naga .railway-img img{
    object-position: -167px;
}
@media only screen and (max-width: 1300px) {
    .fuku .railway-img img{
        object-position: -134px;
    }
}
@media only screen and (max-width: 1200px) {
    .railway-img{
        width: 71%;
        object-fit: none;
    }
    .railway-img img{
        object-fit: contain;
        height: auto;

    }

    .fuku .railway-img img{
        object-position: 0px;
    }
    .oita .railway-img img{
        object-position: 0px;
    }
    .kuma .railway-img img{
        object-position: 0px;
    }
    
    .naga .railway-img img{
        object-position: 0px;
    }

}

@media only screen and (max-width: 600px) {
    .railway-intro{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .railway-img{
        width: 100%;
    }
    .railway-text{
        width: 100%;
    }
}

/*kyusyu*/
.kyusyu{ max-width: 1275px; margin:0 auto; font-size: 24px; letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; overflow: hidden; }
.kyusyu > div{ display: inline-block; width: 50%; float: left; padding: 0 1em;  }
.kyusyu .kyusyu-intro{ line-height: 1.5; padding: 2em;  font-size:18px;}
.kyusyu-map{ text-align: center; }
.kyusyu-map img{width: 100%;}

@media only screen and (max-width: 1200px) {
    .kyusyu{ font-size: 16px; }
    .kyusyu .kyusyu-intro{ padding: 1em; }
} 

@media only screen and (max-width: 768px) {
    .intro-wrap{ padding: 25px 0; }
    .kyusyu > div { width: 100%; float: none;  }
}















/*attractions*/
.attractions{ background: url(../images/viewBg.jpg) center top repeat-y; padding: 50px 0; }

.attractions-area{max-width: 1275px; margin: 0 auto; font-size: 18px; letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; padding:1.5em 0;   }
.attractions-area h5{position: relative; font-size: 175%; color: #f2e175; text-align: center;     margin: 0.5em 0; }
.attractions-area h5:before{content: ''; display: inline-block; position: absolute; left: 0; top: 0; width: calc(50% - 3.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }
.attractions-area h5:after{content: ''; display: inline-block; position: absolute; right: 0; top: 0; width: calc(50% - 3.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }
.attractions-area h5 img{  width: auto; height: 1em;   vertical-align: top; padding: 0 0.2em; }

.attractions-article{ display: flex; justify-content: center; flex-wrap: wrap; }
.attractions-section{position: relative; background: white; width: 31%; margin: 1%; padding: 3em 1em;}
.attractions-area-4 .attractions-section{ width: 31.5%;  }
.attractions-section:before{content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 26px; background: url(../images/section-bg.png) center top repeat-x;}
.attractions-section:after{content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 26px; background: url(../images/section-bg.png) center top repeat-x;     transform: scale(-1);}
.attractions-section h6{text-align: center; font-size: 155%; }
.attractions-section h6 small{letter-spacing: 0; font-size: 70%;}
.attractions-section img{width: 100%; margin: 1em 0;}
.attractions-section p{ line-height: 1.5; }



@media only screen and (max-width: 1200px) {
    .attractions-area{ font-size: 14px; }
} 

@media only screen and (max-width: 768px) {
    .attractions{ padding: 25px 0; }
    .attractions-article{ flex-wrap: nowrap;   justify-content:flex-start;   overflow-x: scroll; }
    .attractions-section , .attractions-area-4 .attractions-section{     flex-shrink: 0; width: 45%; }
} 

@media only screen and (max-width: 480px) {
    .attractions-section , .attractions-area-4 .attractions-section{  width: 80%; }
} 






/*schedule*/
.schedule{background: url(../images/goodsBg.jpg) center top repeat-y;     padding: 50px 0; font-size: 22px;  letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; }

.schedule-box{position: relative; background: white; border-radius: 10px; border:solid 2px #cb1a44; margin: 1em auto; max-width: 1275px; padding: 2.5em;   }
.schedule-box:before{position: absolute; content: ''; display: inline-block; width: 100%; height: 26px; left: 0; top: 0; background: url(../images/schedule-bg.png) left top repeat-x; }
.schedule-box:after{position: absolute; content: ''; display: inline-block; width: 100%; height: 26px; left: 0; bottom: 0; background: url(../images/schedule-bg.png) left bottom repeat-x;}

.schedule-day{padding: 0.7em 0;}
.schedule-day p{padding: 0.25em 0;}
.schedule-day-title img{width: auto; height: 1.3em;   vertical-align: middle;}
.schedule-day-title b{ color: #e83421; border-bottom: solid 2px; padding: 0 0.5em; }
.schedule-day-content{line-height: 1.5;}
.schedule-day-content span{ padding: 0 0.2em;  }
.schedule-day-content img{width: auto; height: 20px;}

@media only screen and (max-width: 1200px) {
    .schedule-box{ padding: 2.5em 1.5em; }
    .schedule{ font-size: 16px; }
    .schedule-day-content img{ height: 1em; }
} 

@media only screen and (max-width: 768px) {
    .schedule{ padding: 25px 0;  }
    .schedule-box{ border-radius: 0;  }
    .schedule-box:before , .schedule-box:after{ height: 1em; background-size: contain; }
} 




/*hrspace*/
.hrspace{border: none;  height: 50px;}
@media only screen and (max-width: 768px) {
   .hrspace{height: 25px;}
} 





/*blog*/
.blog{    background: url(../images/viewBg-bl.jpg) center top repeat-y;  padding: 50px 0;  font-size: 28px;  letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; }
.blog-area{max-width: 1275px; margin: 0 auto; font-size: 18px; letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; padding:1.5em 0;   }
.bloger{display: flex; justify-content: center;}
.bloger a{ position: relative; margin: 1em; transition: all 0.2s; }
.bloger a:hover{ transform: translateY(10px); filter: brightness(1.1); }
.bloger a span{ position: absolute; left: 0.9em; top: 3em; writing-mode: vertical-rl; color: #e83421; font-weight: bold; line-height: 1.3; }
.bloger a span b {font-size: 18px;}
.bloger a span b .tag{background:#d9b133;color: #FFF;display: inline;}

@media only screen and (max-width: 768px) {
   .blog{padding: 25px 0;  font-size: 22px;}
   .bloger{padding: 1%;}
   .bloger a{     width: 21%; margin: 2%; }
   .bloger a img{width: 100%;}
   .bloger a span{font-size: 4.8vw; left: 0.75em; }
   .bloger a span b {font-size: 2.5vw;}
} 



/*schedule*/
.adviser{background: url(../images/goodsBg.jpg) center top repeat-y;     padding: 50px 0;  }
.adivser-logo{width: 96%; max-width: 1275px; margin: 30px auto; display: flex; flex-wrap: wrap;   /*align-items: center;*/ font-size: 22px;     line-height: 1.2;  justify-content: center;}
.adivser-logo span{ width: 33%; padding: 1%;  text-align: center; }
.adivser-logo span img{ width: 100%; max-width: 280px; }
.adivser-logo span.adivser-logo-col img{ width: auto; max-height: 100px; }

@media only screen and (max-width: 1200px) {
    .adivser-logo{font-size: 16px;}
}

@media only screen and (max-width: 768px) {
   .adviser{ padding: 25px 0; }
   .adivser-logo span{     width: 50%; padding: 3%; }
   .adivser-logo span.adivser-logo-col img{ max-height: 20vw; }
} 











.poi{padding: 30px 0;}

.poiAutoTemplate .ph-group-title{font: bold 30px/1 "微軟正黑體";}
.poiAutoTemplate .ph-group-content{width: calc(25% - 10px);margin: 5px;border:5px solid #ccb04f;box-shadow: none;}
.poiAutoTemplate .ph-group-content-tag{background: #84a71a;}
.poiAutoTemplate .ph-group-content-text-sale {padding: 0;background:#ffe686;}
.poiAutoTemplate .ph-group-content-text-sale a{padding: 0 5px;font:500 16px/1.5 "微軟正黑體";background:#ffe686;color: crimson;}
.poiAutoTemplate .ph-group-content .ph-group-content-text {padding: 0 0 40px 0;text-align: left;}
.poiAutoTemplate .ph-group-content-text-price {position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);background: crimson;color: #FFF;font: 400 22px/1.5 "Century Gothic";padding: 0px 10px;border-radius: 20px;width: 70%;}
.poiAutoTemplate .ph-group-content-text-detail, .poiAutoTemplate .ph-group-content-text-detail a{ color:#3285b5;font:14px/1.6 "微軟正黑體";}
.poiAutoTemplate .ph-group-content-text-price span{font-size: 0.8em; line-height: 2;}
.poiType1 .poiAutoTemplate .ph-group, .poiType1 .poiAutoTemplate.poiAutoTemplate-scrollTab .ph-group{flex-wrap: wrap;justify-content: center;}

.poiType1 .poiAutoTemplate.poiAutoTemplate-itemScroll .ph-group, .poiType1 .poiAutoTemplate.poiAutoTemplate-scrollTab.poiAutoTemplate-itemScroll .ph-group{justify-content: center;margin: 0px auto 100px auto;overflow: auto;}
.poiType1 .ph-group-title {background: url(../images/line01.png) bottom center no-repeat;text-align: center;}
.poiType1 .ph-group-title span{color: #00659f;  font: 600 40px/1 '思源黑體','微軟正黑體'; padding: 18px 0;letter-spacing: 0;}
.poiType1  .poiAutoTemplate .slidecontain{display: none;}




.poi.hidePoiTitle .ph-group-title{display: none;}


.poiType2  .poiAutoTemplate .slidecontain{display: block;}
.poiType2  .poiAutoTemplate .ph-group-title {display: none;}
.poiType2 .poiAutoTemplate .ph-group{ background: rgba(255,255,255,1); padding: 50px; border: none;justify-content: center;box-shadow: 10px 10px 0px #edd78c;}
.poiType2 .poiAutoTemplate .ph-group-content{margin: 10px;border: 2px solid #ffe069;width: calc(29% - 10px);}
.poiType2 .poiAutoTemplate .ph-group-content-text-sale a{background: #FFF;}
.poiType2 .poiAutoTemplate .slidecontain{padding: 0;justify-content: center;display: flex;flex-wrap: nowrap;}
.poiType2 .poiAutoTemplate .slidecontain li {margin: 0 5px;flex-shrink: 1;}
.poiType2 .poiAutoTemplate .slidecontain li a{padding: 10px 30px; text-decoration: none; font: 700 24px/1 "微軟正黑體"; color: #FFF;background: #cd7a8e;}
.poiType2 .poiAutoTemplate .slidecontain li.poiAutoTemplate-on a{color: #FFF;background: #bf9d26;}
.poiType2 .poiAutoTemplate .slidecontain li.poiAutoTemplate-on{border-bottom: none;}


@media screen and (max-width:1280px){
.poiType1  .poiAutoTemplate.poiAutoTemplate-itemScroll .ph-group,.poiType1  .poiAutoTemplate.poiAutoTemplate-scrollTab.poiAutoTemplate-itemScroll .ph-group{justify-content: flex-start;overflow-x: scroll;}
.poiType2 .poiAutoTemplate .ph-group{padding: 30px;}
.poiType2 .poiAutoTemplate .ph-group-content{margin: 5px;}
/* 
.poiType1 .poiAutoTemplate .ph-group, .poiType1 .poiAutoTemplate.poiAutoTemplate-scrollTab .ph-group{flex-wrap: nowrap;justify-content: flex-start;overflow-x: scroll;padding:0 30px;} */
}


@media screen and (max-width:1024px){
.poiType1 .ph-group-title span {font-size: 32px;}

}

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

.poiType2 .poiAutoTemplate .slidecontain li a{padding: 10px 5px;font: 700 16px/1 "微軟正黑體";}
}

@media screen and (max-width:500px){
  .poiType2 .poiAutoTemplate .ph-group{padding: 20px;}
}

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


.poiGoods h5{ background: url(../images/line01.png) bottom center no-repeat;text-align: center;font:600 40px/1 '思源黑體','微軟正黑體';color: #00659f;}
.poiGoods {padding: 0px 0;}
@media screen and (max-width:600px){
.poiGoods h5 {font-size: 7vw;height: 14vw;padding-top: 4vw; background-size: 50%;}
}


.poiType3{padding: 0 0 50px 0;}
.poiType3 .ph .ph-menu{display: none;}

.poiType3 .ph .ph-group-title{ background: url(../images/line01.png) bottom center no-repeat;text-align: center;font:600 40px/1 '思源黑體','微軟正黑體';color: #00659f;margin: 0px auto 0px auto;}
@media screen and (max-width:600px){
    .poiType3 .ph .ph-group-title {font-size: 7vw;height: 14vw;padding-top: 4vw; background-size: 50%;}
}


.poiType3 .ph .ph-group-title{}
.poiType3 .ph .ph-group {padding:0;background: #FFF;margin: 20px auto 50px auto;box-shadow: 10px 10px 0px #edd78c;}
.poiType3 .ph .ph-group-content{margin: 5px auto;transition: 0.2s;padding: 10px; width:100%;position: relative;border-bottom: 3px dotted #ffdd61;}
.poiType3 .ph .ph-group-content:nth-of-type(1) {background: none;margin: 0px;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-photo {display: inline-block;width: 28%;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-photo a{display: block;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-photo .ph-group-content-tag {position: absolute;left: 0%; top: 0px;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text{padding: 10px 5px 40px 10px;width:70%;display: inline-block;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-name{display: block;margin: 5px auto;font:bold 20px/1.4 "微軟正黑體";color: #000;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-sale{display: inline-block;margin: 0px auto;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-sale a{background: #897119;color: #fff;font:16px/1.4 "微軟正黑體";display: block;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-detail {color:#3285b5;font:16px/1.5 "微軟正黑體";margin: 7px auto ;display: block;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-price {bottom: 10px;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-detail a{color:#3285b5}
.poiType3 .ph .ph-group-content:last-of-type {border-bottom: none;}
.poiType3 .ph .ph-group-content .ph-group-content-photo {width: auto;display: inline-block;}
.poiType3 .ph .ph-group-content .ph-group-content-photo a {display: none;}
.poiType3 .ph .ph-group-content .ph-group-content-text{padding: 0px;display: inline-block;width: auto;}
.poiType3 .ph .ph-group-content-photo img{width:100%;}
.poiType3 .ph .ph-group-content-text-name{color:#522f0e;font:bold 18px/1.4 "微軟正黑體";display: inline-block;}
.poiType3 .ph .ph-group-content-text-detail {display: none;}

.poiType3 .ph .ph-group-content-text-price {color:#cd1d1f;;position: absolute;padding: 0px 10px;font:bold 24px/1.4 "微軟正黑體";text-align: center;display: block;right: 10px;bottom: 0px;}
.poiType3 .ph .ph-group-content-text-price span{font-size: 80%;line-height: 2;}
.poiType3 .ph .ph-group-content-tag { position: static;background: #84a71a;font:15px/1.4 "微軟正黑體";color:#FFF;padding: 3px 10px;}
.poiType3 .ph .ph-group-content-text-sale{display:inline-block;margin: 2px auto; font: 16px/1 "微軟正黑體"; color: red;background: none;}
.poiType3 .ph .ph-group-content-text-sale a{ color: #8d5e32;padding: 3px 0px;font: 14px/1.4 "微軟正黑體";background: #ffedaa;border-radius: 20px;}
.poiType3 .ph-group-content-otherlink a {background: none;padding: 0;}

@media only screen and (max-width: 1200px) {
.poiType3 .ph .ph-group-content {padding:  10px 10px 40px 10px;}
  }
  
  
@media only screen and (max-width: 800px) {
.poiType3 .ph .ph-group{width: 90%;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-photo {width: 100%;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text {width: 100%;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-name{font:bold 18px/1.2 "微軟正黑體";}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-sale a{font:14px/1.4 "微軟正黑體";}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-detail {font:14px/1.5 "微軟正黑體";}
.poiType3 .ph .ph-group-content-text-name {display: block; sfont:bold 18px/1.2 "微軟正黑體"; margin: 5px auto;}
.poiType3 .ph .ph-group-content {padding: 10px;}
.poiType3 .ph .ph-group-content-text-sale{margin: 5px auto;}
.poiType3 .ph .ph-group-content-text-price { font: bold 20px/1.4 "微軟正黑體";}
}


@media only screen and (max-width: 600px) {
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text-price{bottom: 0;}
.poiType3 .ph .ph-group-content-text-price{position: relative;text-align: right;}
.poiType3 .ph .ph-group-content:nth-of-type(1) .ph-group-content-text {padding: 10px 5px 0px 10px;}
.poiType3 .ph .ph-group-content-text-sale a {display: inline-block;}
  }
  
  
  
.bn {
    text-align: center;
    padding: 25px 0;
    width: 90%;
    margin: 0 auto;
}

/* .bn:hover {
    filter: brightness(1.1);
    transform: scale(1.01);
} */

.bn img {
    width: 100%;
    max-width: 1320px;
}

@media screen and (max-width:800px) {
    .bn {
        padding: 10px 0;
    }
}




/*intro-poi景點介紹*/
.attractions-poi .ph-menu{display: none;}
.attractions-poi .ph-group-title{position: relative; font-size: 175%; color: #f2e175; text-align: center;   margin: 0.5em 0; }
.attractions-poi .ph-group-title:before{content: ''; display: inline-block; position: absolute; left: 0; top: 0; width: calc(50% - 2.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }
.attractions-poi .ph-group-title:after{content: ''; display: inline-block; position: absolute; right: 0; top: 0; width: calc(50% - 2.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }


.attractions-poi .ph-group{ display: inline-flex;flex-wrap: wrap;gap: 8px;justify-content: center;padding: 3em 1em; font-size: 18px; letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei"; width: 100%;}
.attractions-poi .ph-group-content{margin: 10px;width:29%;position: relative; background: white;padding: 3em 1em;}
.attractions-poi .ph-group-content:before{content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 26px; background: url(../images/section-bg.png) center top repeat-x;}
.attractions-poi .ph-group-content:after{content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 26px; background: url(../images/section-bg.png) center top repeat-x;     transform: scale(-1);}
.attractions-poi .ph-group-content .ph-group-content-text-sale{color: #cc234c;}
.attractions-poi .ph-group-content .ph-group-content-text-sale a{color: #cc234c;}
.attractions-poi .ph-group-content-text-sale a{background: #FFF;}
.attractions-poi .ph-group-content .ph-group-content-photo img{width: 100%;}
.attractions-poi .ph-group-content .ph-group-content-text{text-align: center;}
.attractions-poi .ph-group-content .ph-group-content-text-name{font-size: 155%;font-weight: bold; color: #000;text-align: center;margin: 10px auto;display: block;}
.attractions-poi .ph-group-content .ph-group-content-text-detail{line-height: 1.5;text-align: left;}
.attractions-poi .ph-group-content .ph-group-content-text-detail a {color: #000;}
.attractions-poi .ph-group-content .ph-group-content-text-price {display: none;}


@media only screen and (max-width: 1200px) {
    .attractions-poi .ph-group{ font-size: 14px; }
} 

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

    .attractions-poi .ph-group{ flex-wrap: nowrap;   justify-content:flex-start;   overflow-x: scroll; }
    .attractions-poi .ph-group-content{flex-shrink: 0; width: 45%; }
} 

@media only screen and (max-width: 480px) {
    .attractions-poi .ph-group-content{  width: 80%; }
} 



/*experience-poi景點介紹*/



/*attractions*/
.experience{ background: url(../images/viewBg-bl.jpg) center top repeat-y; padding: 50px 0; }

.experience-area{max-width: 1275px; margin: 0 auto; font-size: 18px; letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei","Apple LiGothic Medium", Arial, Helvetica, sans-serif; padding:1.5em 0;   }
.experience-area h5{position: relative; font-size: 175%; color: #f2e175; text-align: center;     margin: 0.5em 0; }
.experience-area h5:before{content: ''; display: inline-block; position: absolute; left: 0; top: 0; width: calc(50% - 3.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }
.experience-area h5:after{content: ''; display: inline-block; position: absolute; right: 0; top: 0; width: calc(50% - 3.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }
.experience-area h5 img{  width: auto; height: 1em;   vertical-align: top; padding: 0 0.2em; }

@media only screen and (max-width: 768px) {
    .experience{ padding: 25px 0; }

} 


.experience-poi .ph-menu{display: none;}
.experience-poi .ph-group-title{display: none;position: relative; font-size: 175%; color: #f2e175; text-align: center;   margin: 0.5em 0; }
.experience-poi .ph-group-title:before{content: ''; display: inline-block; position: absolute; left: 0; top: 0; width: calc(50% - 2.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }
.experience-poi .ph-group-title:after{content: ''; display: inline-block; position: absolute; right: 0; top: 0; width: calc(50% - 2.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }


.experience-poi .ph-group{ display: inline-flex;flex-wrap: wrap;gap: 8px;justify-content: center;padding: 0em 1em; font-size: 18px; letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei"; width: 100%;}
.experience-poi .ph-group-content{margin: 10px;width:100%;position: relative; background: white;padding: 3em 1em;display: inline-flex;justify-content: center;flex-wrap: nowrap;gap: 20px;}
.experience-poi .ph-group-content:before{content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 26px; background: url(../images/schedule-bg.png) center top repeat-x;}
.experience-poi .ph-group-content:after{content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 26px; background: url(../images/schedule-bg.png) center top repeat-x;     transform: scale(-1);}


.experience-poi .ph-group-content .ph-group-content-text-sale{color: #cc234c; font-size: 18px;line-height: 1.5;}
.experience-poi .ph-group-content .ph-group-content-text-sale a{color: #cc234c; }

.experience-poi .ph-group-content .ph-group-content-photo {width: 45%;}
.experience-poi .ph-group-content .ph-group-content-photo img{width: 100%;}
.experience-poi .ph-group-content .ph-group-content-text{text-align: center;width: 45%;}
.experience-poi .ph-group-content .ph-group-content-text-name{font-size: 155%;font-weight: bold; color: #000;text-align: center;margin: 10px auto;display: block;}
.experience-poi .ph-group-content .ph-group-content-text-detail{line-height: 1.5;text-align: left;}
.experience-poi .ph-group-content .ph-group-content-text-detail a{color: #000;}
.experience-poi .ph-group-content .ph-group-content-text-price {display: none;}


@media only screen and (max-width: 1200px) {
    .experience-poi .ph-group{ font-size: 14px; }
} 

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

    .experience-poi .ph-group{ flex-wrap: nowrap;   }
    .experience-poi .ph-group-content{display: flex;justify-content: center;flex-wrap: wrap;}
    .experience-poi .ph-group-content .ph-group-content-photo {width: 100%;}
    .experience-poi .ph-group-content .ph-group-content-text{width: 100%;}
    .experience-poi .ph-group-content{flex-shrink: 0; }
} 

@media only screen and (max-width: 480px) {
    .experience-poi .ph-group-content{  width: 95%; }
} 




.blog-poi .ph-menu{display: none;}
.blog-poi .ph-group-title{display: none;position: relative; font-size: 175%; color: #f2e175; text-align: center;   margin: 0.5em 0; }
.blog-poi .ph-group-title:before{content: ''; display: inline-block; position: absolute; left: 0; top: 0; width: calc(50% - 2.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }
.blog-poi .ph-group-title:after{content: ''; display: inline-block; position: absolute; right: 0; top: 0; width: calc(50% - 2.5em); height: 1em; background: url(../images/attractions-title-d2.png) left center repeat-x; }


.blog-poi .ph-group{ display: inline-flex;flex-wrap: wrap;gap: 8px;justify-content: center;padding: 0em 1em; font-size: 18px; letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei"; width: 100%;}
.blog-poi .ph-group-content{margin: 10px;width:45%;position: relative; background: white;padding: 1.5em 1em;display: inline-flex;justify-content: center;flex-wrap: nowrap;gap: 20px;border-radius: 0 15px 15px 15px; border: #e1c15c 4px solid;}

.blog-poi .ph-group-content-text-sale a{background: #FFF;}
.blog-poi .ph-group-content .ph-group-content-photo {width: 0%;}
.blog-poi .ph-group-content .ph-group-content-photo img{width: 100%;display: none;}
.blog-poi .ph-group-content .ph-group-content-photo .ph-group-content-tag{position: absolute;top: 0;left: 0;background-color: #e1c15c;color: #FFF;padding: 0.2em 0.5em;border-radius:  0 0 10px 0 ;font-weight: bold;}
.blog-poi .ph-group-content .ph-group-content-text-name::before{content: "";background: url(../images/sakula.svg) no-repeat;width: 68px;height: 65px;position: absolute;left:-80px;top: 88%;transform: translateY(-50%);}
.blog-poi .ph-group-content .ph-group-content-text{text-align: center;width:auto;color: #e83322;margin-left: 40px;}
.blog-poi .ph-group-content .ph-group-content-text-name{font-size: 155%;font-weight: bold; color: #e83322;;text-align: left;margin: 15px auto 5px auto;display: block;position: relative;}
.blog-poi .ph-group-content .ph-group-content-text-detail{line-height: 1.5;text-align: left;color: #e83322;font-weight: bold;}
.blog-poi .ph-group-content .ph-group-content-text-detail a{color: #e83322;}
.blog-poi .ph-group-content .ph-group-content-text-price {display: block;position: absolute;right: -2px; bottom: -2px;background-color: #e1c15c;color: #FFF;font-weight: bold;padding: 0.2em 0.5em;border-radius: 20px;}


@media only screen and (max-width: 1000px) {
    .blog-poi .ph-group{ flex-wrap: wrap;  display: flex;}
    .blog-poi .ph-group-content {width: 100%;}
} 



@media only screen and (max-width: 480px) {
    .blog-poi .ph-group-content .ph-group-content-text{width: 90%;margin-left: 20px;}

    .blog-poi .ph-group-content .ph-group-content-text-name{font-size: 120%;}
    .blog-poi .ph-group-content .ph-group-content-text-name::before{width: 34px;height: 34px;position: absolute;background-size: 100%;left: -41px;}
} 



.poi-htl .ph-menu{display: none;}




.poi-htl .ph-group-title{background: url(../images/line01.png) bottom center no-repeat; text-align: center; font: 600 40px / 1 '思源黑體', '微軟正黑體'; color: #00659f; }
.poi-htl .ph-group-title img{display: none;}
.poi-htl .ph-group{ display: inline-flex;flex-wrap: wrap;gap: 8px;justify-content: center;padding: 3em 1em; font-size: 18px; letter-spacing: 0.05em;  font-family:"微軟正黑體","Microsoft JhengHei"; width: 100%;gap: 16px;}
.poi-htl .ph-group-content{width:29%;position: relative; background: white;border:solid 4px #ccb04f;padding: 16px 16px 45px 16px;}

.poi-htl .ph-group-content .ph-group-content-text-sale{color: #cc234c;}
.poi-htl .ph-group-content .ph-group-content-text-sale a{color: #cc234c;}
.poi-htl .ph-group-content .ph-group-content-text-sale a{background: #FFF;}


.poi-htl .ph-group-content .ph-group-content-photo .ph-group-content-photo-tag{position: absolute;top: 0;left: 0;background-color: #ccaa11;color: #FFF;padding: 0.2em 0.8em;border-radius:  0 0 10px 0 ;font-size: 16px;}
.poi-htl .ph-group-content .ph-group-content-photo img{width: 100%;}
.poi-htl .ph-group-content .ph-group-content-text{text-align: center;}
.poi-htl .ph-group-content .ph-group-content-text-name{font-size: 100%;font-weight: bold; color: #000;text-align: left;margin: 10px auto;display: block;line-height: 1.4;}
.poi-htl .ph-group-content .ph-group-content-text-detail{line-height: 1.5;text-align: left;font-size: 16px; color: #333;}
.poi-htl .ph-group-content .ph-group-content-text-detail a {color: #000;}
.poi-htl .ph-group-content-text-price {color:#cd1d1f;;position: absolute;padding: 0px 10px;font:bold 24px/1.4 "微軟正黑體";text-align: center;display: block;right: 10px;bottom: 0px;}
.poi-htl .ph-group-content-text-price span{font-size: 80%;line-height: 2;}


@media only screen and (max-width: 1200px) {
    .poi-htl .ph-group{ font-size: 14px; }
} 

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

    .poi-htl .ph-group{ flex-wrap: nowrap;   justify-content:flex-start;   overflow-x: scroll; }
    .poi-htl .ph-group-content{flex-shrink: 0; width: 45%; }
} 

@media only screen and (max-width: 480px) {
    .poi-htl .ph-group-content{  width: 80%; }
}