* { box-sizing: border-box;}
#mtkContainer { position: relative;}
a{text-decoration: none;}
/*湯泉物語*/

/*版頭*/
/*header.header{position: relative; height: 600px; background: url(../images/header_all.jpg) top center no-repeat;}
header.header.hotel{position: relative; height: 600px; background: url(../images/header_all.jpg) top center no-repeat;}
header.header.hotpot{position: relative; height: 600px; background: url(../images/header_all.jpg) top center no-repeat;}
header.header h1{display: none;position: relative;}
header.header::after{position: absolute; content:""; height: 600px; background: url(../images/header-fog.png) bottom center no-repeat; bottom: -36px; left:0; width: 100%;}

*/

header.header{position: relative; height: 600px; background: url(../images/hot-spring-header.jpg) top center no-repeat;}
header.header.hotel{position: relative; height: 600px; background: url(../images/hotel-header.jpg) top center no-repeat;}
header.header.hotpot{position: relative; height: 600px; background: url(../images/hot-pot-header.jpg) top center no-repeat;}
header.header h1{display: none;position: relative;}
header.header::after{position: absolute; content:""; height: 600px; background: url(../images/header-fog.png) bottom center no-repeat; bottom: -36px; left:0; width: 100%;}



/*手機板*/
@media screen and (max-width:1024px){
    header.header{height: auto; background: none;}
    header.header.hotel{height: auto; background: none;}
    header.header.hotpot{height: auto; background: none;}
    header.header h1{display: block;}
    header.header h1 img{width: 100%;}
    header.header::after{display: none;}

}



/*隱藏*/
.bt2 .click.minus p::after {  
    content: "-"; 
}
.bt2 .click.collapsed p::after  {
    content: "+"; 
}

.hide{display: none;}



/*  注意事項  */
.infor { margin: 0 auto;padding: 1%; width:100%;  text-align: center;}
.infor-content { margin: 0 auto; padding:1%; width: 100%; max-width: 1200px; background:#fffffff2;border: solid 2px #49a8c5;border-radius: 15px;}
.infor-content li { margin: 0 0 10px 0;  font: 16px/1.6 "微軟正黑體"; text-align: left; color: #398298;  }
.infor-content li ol li { margin-left: 20px; list-style-type: disc; }
.infor p { font:bold 19px/1.5 "微軟正黑體"; text-align: justify; color: #186a84; }
.infor p span { position: relative; }
.infor p span::after,
.infor p span::before { content: ""; position: absolute; top: -10px; width: 75px; height: 48px; transform: scale(0.8);
background: url(../images/dec-h2-1.png) top center no-repeat; }
.infor p span::after { left: -80px; }
.infor p span::before { right: -80px; }

.infor li a{ color:#057ef1; cursor: pointer;text-decoration:underline;}

.infor-content li a:hover,
.infor-content li a.now { color:#2275ff; }


.infor-content .safe-text{border: solid 1px #21aa5f; border-radius: 50px; font: 16px/1.6 "微軟正黑體"; color:#21aa5f;padding: 0 10px; margin: 0 0 0 5px; }


.bt2{/*position: relative; */margin: 2% auto;max-width: 1200px; width: 100%;  }
.bt2 p{ /*position: absolute;left: 33%; bottom: 20%;*/ display: inline-block; font: 30px/2 "微軟正黑體";border-radius: 50em ;color: #fff; padding: 0 3%; background: #186a84;letter-spacing: 2px;cursor: pointer;}
.bt2 p:hover,
.bt2 p.now{ color:#fff100; }

.page1 .bt2 img{width: 98%;cursor: pointer;border-radius: 15px;}

.page1 .banner2{position: relative; max-width: 1200px; width: 100%; margin: 30px auto 40px auto; border-radius: 10px; overflow: hidden;}
.page1 .banner2::after{position: absolute; content: url(../images/finger.png); bottom:5px; left: 32%; animation: finger 0.6s infinite; }


@media screen and (max-width:1124px){
/*.bt2 p{ left: 33%; bottom: 20%;font: 28px/2 "微軟正黑體"; padding: 0 3%; background: #186a84;letter-spacing: 2px;}
*/.page1 .banner2::after{transform: scale(0.8);animation: finger 0.6s infinite;}


}

/*手機板*/
@media screen and (max-width:1024px){
.bt2 p{ font: 25px/2 "微軟正黑體"; }
  
.page1 .banner2::after{transform: scale(0.7);animation: finger 0.6s infinite;}


}

@media screen and (max-width:980px){
/*.bt2 p{ bottom: 17%;font: 25px/2 "微軟正黑體"; }
*/  
.page1 .banner2::after{transform: scale(0.7);animation: finger-1 0.6s infinite;}

.infor p { font:bold 18px/1.9 "微軟正黑體"; text-align: justify; color: #186a84; }





}

@media screen and (max-width:800px){
 
.infor { width:98%;  }

.bt2 p{ /*left: 35%;*/  font: 24px/2 "微軟正黑體";}

.page1 .banner2::after{transform: scale(0.5);animation: finger-1 0.6s infinite;}


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

/*    .bt2 p{ left: 36%; bottom: 16%;font: 24px/2 "微軟正黑體"; letter-spacing: 1px;}
*/     .page1 .banner2::after{transform: scale(0.5); left: 32%;}

}
@media screen and (max-width:585px){
 
/*    .bt2 p{ left: 37%; bottom: 15%;font: 15px/2 "微軟正黑體"; }
*/
  .page1 .banner2::after{transform: scale(0.4); left: 32%;}

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


}
@media screen and (max-width:425px){
    
/*    .bt2 p {left: 33%;bottom: 10%;font: 14px/2 "微軟正黑體";}
*/    .page1 .banner2{border-radius: 5px;  }
  .page1 .banner2::after{transform: scale(0.3); left: 26%; animation: finger-2 0.6s infinite;}

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

/*    .bt2 p {left: 33%;bottom: 11%;font: 13px/1.6 "微軟正黑體";}
*/
    .page1 .banner2::after{transform: scale(0.3); left: 23%; animation: finger-2 0.6s infinite;}
}


/*動畫*/
@keyframes finger{
    0%{bottom: 10px;}
    50%{bottom: 2px;}
    100%{bottom: 10px;}
}
@keyframes finger-1{
    0%{bottom: -8px;}
    50%{bottom: -12px;}
    100%{bottom: -8px;}
}
@keyframes finger-2{
    0%{bottom: -20px;}
    50%{bottom: -25px;}
    100%{bottom: -20px;}
}











/*menubar*/
.menu-bar{z-index: 10; position: sticky; width: 100%; top:0px; text-align: center; margin: 0 auto; background: #ff945e;}
.menu-bar ul{max-width: 1200px; margin: 0 auto; transition: 0.4s; }
.menu-bar ul li{display: inline-block; /* padding: 15px 0 15px 33px;*/ transition: 0.4s;position: relative;width: 22%;}
.menu-bar ul li a{position: relative; width: 100%; font: 400 28px/1 '思源黑體','微軟正黑體'; color: #ffffff; padding: 15px 0 15px 30px;display: block;}
.menu-bar ul li::before{position: absolute; left:33px; top:calc(50% - 18px); transform: scale(0.9);}
.menu-bar ul li:nth-child(1)::before{content: url(../images/menu1.png); }
.menu-bar ul li:nth-child(2)::before{content: url(../images/menu3.png);}
.menu-bar ul li:nth-child(3)::before{content: url(../images/menu2.png);top:calc(50% - 20px);left:13px;}
.menu-bar ul li:nth-child(4)::before{content: url(../images/menu4.png);}
.menu-bar ul li:hover{background: #f17639; transition: 0.4s;}
.menu-bar ul li a br{display: none;}

@media screen and (max-width:1200px){
    .menu-bar ul{overflow-x: auto;     white-space: nowrap;}
    .menu-bar ul li{      width: auto;         }
    .menu-bar ul li a{     font-size: 16px;     padding: 10px 10px; }
    .menu-bar ul li::before{display: none;}

}





/*localMenu*/
.localMenu{      position: sticky;     top: 58px;   font: 20px '思源黑體','微軟正黑體'; display: flex; justify-content: center;     background: white;      z-index: 3;}
.localMenu a{display: inline-block; padding: 0.3em 2em; border-radius: 0.5em; border:solid 1px #f17639; color: #f17639; margin: 0.5em; transition: all 0.2s; }
.localMenu a:hover , .localMenu a.on{ background: #f17639; color: white;}

@media screen and (max-width:1200px){
    .localMenu{font-size: 16px; overflow-x: auto;     top: 36px; }
    .localMenu a{flex-shrink: 0; }
}

@media screen and (max-width:360px){
    .localMenu{ justify-content: flex-start; }
}





/*localMenuLink*/
.localMenuLink{ font: 30px '思源黑體','微軟正黑體'; font-weight: bold;    padding:0;      margin-top: 1em;  text-align: center; border-bottom: none; 
text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white;
}
.localMenuLink span{padding: 0 0.5em;}
.localMenuLink-noheight{margin-top:0; height: 0;}

@media screen and (max-width:1200px){
    .localMenuLink{font-size: 26px;}
}

@media screen and (max-width:768px){
    .localMenuLink img{display: none;}
}


/*poi*/
.ph-menu{position: sticky; top: 118px;       z-index: 2;  background: white;  }
.slidecontain{ display: flex; justify-content: center; }
.slidecontain li a{display: inline-block;
    font-size: 20px; font-weight: bold;
    margin: 0.5em 0;
    color: black;
    border-right: solid 1px;
        padding: 0.3em 1em;
}
.slidecontain li:last-child a{ border-right:none; }
.slidecontain li a.on , .slidecontain li a:hover{ background: #ffbb99; }
.no-phmenu .ph-menu{display: none;}
.no-phmenu .ph-group-title{display: none;}


.ph-group-title{ text-align: center;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 0.1em;
        padding: 3em 0 0.5em 0;
    border-bottom: double 4px;
    width: 94%;
    max-width: 1200px;
    margin: 0 auto ; }
.ph-group-title img{display: inline-block;
    vertical-align: middle;
    width: auto;
    height: 1.5em;
    margin-right: 0.5em;}

.ph-group-content{font-size: 20px; }
.ph-group:last-child .ph-group-content{border-bottom: none;}
.ph-group-content-text-name{     color: #5280ce;font-weight: bold;}
.ph-group-content-text-detail{font-size: 80%;}
.ph-group-content-text-detail a {color: #000;}
.ph-group-content-text-sale { font: 16px/1.4 "微軟正黑體";padding: 0 5px;color:#FFF;background:#f17639;margin: 5px auto ;}
.ph-group-content-text-sale a {color:#FFF;}
.ph-group-content-text-price{font-size: 130%; color: #5280ce;}
.ph-group-content-text-price span{ font-size: 70%;     vertical-align: middle;  }
.ph-group-content-photo img{width: 100%;}

.ph-group-content-tag {position: absolute;left: 0%; top: 9%; background:#ffe486;font:18px/1.4 "微軟正黑體";color:#000;padding: 3px 10px;border-radius: 0 20px 20px 0;}
@media screen and (max-width:1200px){
    .ph-menu{top: 84px; }
    .slidecontain{ overflow-x: auto; justify-content: flex-start; }
    .slidecontain li a{font-size: 16px;}
    .ph-group-content{     font-size: 18px;  }
}

@media screen and (max-width:1200px){
    .ph-group-title img{ display: none; }
}



@media screen and (max-width:600px){
.ph-group-content-tag{font:16px/1.4 "微軟正黑體";top:5%;}
.ph-group-content-text-sale{font:bold 15px/1.4 "微軟正黑體";}

}



/*poi-style-1*/
.poi-style-1 .ph-group-content{width: 94%; max-width: 1200px; margin: 0 auto;  padding: 1.5em 0;  border-bottom: solid 1px #ffbb99; }
.poi-style-1 .ph-group-content-photo{display: none;}
.poi-style-1 .ph-group-content-text{padding-bottom: 2.2em;}
.poi-style-1 .ph-group-content-text-name{ display: block;     }
.poi-style-1 .ph-group-content-text-detail{line-height: 1.5; padding: 0.5em 0;}
.poi-style-1 .ph-group-content-text-price{    display: inline-block; border: solid 1px; float: right;  border-radius: 5em;  padding: 0.3em 2em;   transition: all 0.2s;}

.poi-style-1 .ph-group-content:hover .ph-group-content-text-price{     background: #f17639;  color: white; }

@media screen and (max-width:1200px){
    .poi-style-1 .ph-group-content-text-price{float: inherit; display: block;  text-align: center;}
    .poi-style-1 .ph-group-content-text{padding-bottom: 0;}
}


/*poi-style-2*/
.poi-style-2 .ph-group{display: flex; justify-content: center;     flex-wrap: wrap;  width: 94%; max-width: 1200px;  margin: 0 auto;}
.poi-style-2 .ph-group-content{   position: relative;   width: calc(100% / 3);      padding: 1.5em 1em 4.5em 1em;  box-shadow: 0px 1px 3px rgb(0 0 0 / 20%); transition: all 0.2s; }
.poi-style-2 .ph-group-content:hover{ box-shadow: 0px 1px 3px rgb(0 0 0 / 70%); }
.poi-style-2 .ph-group-content-text-name{display: block; padding: 0em 0; line-height: 1.2;}
.poi-style-2 .ph-group-content-text-detail {  font-size: 80%;   line-height: 1.5;   }
.poi-style-2  .ph-group-content-text-price{display: inline-block;  text-align: center; border: solid 1px; border-radius: 5em; padding: 0.25em 1em;  position: absolute; left: 50%; transform: translateX(-50%);      bottom: 1em;  transition: all 0.2s;     white-space: nowrap; }
.poi-style-2 .ph-group-content:hover .ph-group-content-text-price{     background: #f17639;  color: white; }

.poi-style-2 .ph-group-content-text{padding: 15px 10px 10px 10px;}
.poi-style-2  .ph-group-content-text-sale {}


@media screen and (max-width:960px){
    .poi-style-2 .ph-group-content{ width: 50%;  }
    .poi-style-2 .ph-group-title{     font-size: 20px;  }
}
@media screen and (max-width:640px){
    .poi-style-2 .ph-group-content{ width: 100%;  }
}


/*poi-style-3*/
.poi-style-3 .ph-group{display: flex; justify-content: center;     flex-wrap: wrap;  width: 94%; max-width: 1200px;  margin: 1em auto;}
.poi-style-3 .ph-group-content{   position: relative;      padding: 1.5em 1em 4.5em 1em;  box-shadow: 0px 1px 3px rgb(0 0 0 / 20%); transition: all 0.2s; }
.poi-style-3 .ph-group-content:hover{ box-shadow: 0px 1px 3px rgb(0 0 0 / 70%); }
.poi-style-3 .ph-group-content-photo{width: 50%; float: left;}
.poi-style-3 .ph-group-content-text{width: 50%; float: right;     padding-left: 1em;}
.poi-style-3 .ph-group-content-text-name{display: block; padding: 1em 0; line-height: 1.2;}
.poi-style-3 .ph-group-content-text-detail {  font-size: 80%;   line-height: 1.5;   }
.poi-style-3  .ph-group-content-text-price{display: inline-block;  text-align: center; border: solid 1px; border-radius: 5em; padding: 0.25em 1em;  position: absolute; left: 50%; transform: translateX(-50%);      bottom: 1em;  transition: all 0.2s;     white-space: nowrap; }
.poi-style-3 .ph-group-content:hover .ph-group-content-text-price{     background: #f17639;  color: white; }


@media screen and (max-width:640px){
    .poi-style-3 .ph-group-content-photo , .poi-style-3 .ph-group-content-text{width: 100%; float: none;}
    .poi-style-3 .ph-group-content-text{ padding-left: 0; }
}



/*sortMenu*/
.sortMenu{ position: sticky; top: 119px;     background: white;  display: flex; justify-content: center; z-index: 1;}
.sortMenu a{display: inline-block;
    font-size: 20px;     font-weight: bold;
    margin: 0.5em 0;
    color: black;
    border-right: solid 1px;
        padding: 0.3em 1em;
}
.sortMenu a:last-child{ border-right:none; }
.sortMenu a.on , .sortMenu a:hover{ background: #ffbb99; }

@media screen and (max-width:1200px){
    .sortMenu{    justify-content: flex-start;     overflow: auto; top: 84px;}
    .sortMenu a{ flex-shrink: 0;     font-size: 16px; }
}




/*sortMenuLink*/
.sortMenuLink{ border-bottom: double 4px;
    font-size: 24px;
    letter-spacing: 0.1em;
    width: 94%;
    max-width: 1200px;
    margin: 0 auto; 
        padding: 2.5em 0 0.2em;
}

@media screen and (max-width:1200px){
    .sortMenuLink{ font-size: 20px; text-align: center; }
}





/*paragraph-space*/
.paragraph-space{height: 100px;}



/*溫泉攻略*/
h2{ font: 600 42px/1 '思源黑體','微軟正黑體';     padding: 1em 0 1.5em;     border-bottom: solid 1px;  text-align: center;}
.page2 .group h2{color: #5280ce; background: url(../images/hot-spring-h2-2.png) bottom center no-repeat;font-size: 36px;}
.page2 .group{max-width: 1200px; width: 100%; padding: 20px 0;  margin: 0px auto;}
.page2{position: relative; width: 100%; text-align: center; padding: 0 0 340px 0;background: url(../images/hot-spring-footer.png) bottom center no-repeat ,linear-gradient(#ffffff,#bae9ee);}



/*手機板*/
@media screen and (max-width:1024px){

    .page2{background-size: 110% auto;}
    .page2 .group h2{background-size: 400px auto;}
    .page2 .group h2{font-size: 33px;}

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

    .page2::before{background: url(../images/hot-spring-wave-m.png) bottom center no-repeat;background-size: 100% auto;}
    .page2 .group{margin: 3px auto;}
    .page2{padding: 0 0 180px 0;}
    .page2 .group h2{font-size: 27px;}



}
@media screen and (max-width:680px){
        .page2 .group h2{font-size: 25px;}

}
@media screen and (max-width:585px){
    .page2{background-size: 124% auto;}
    h2{font-size: 34px; padding: 20px 0 42px 0;}
    .page2 .group h2{background-size: 350px auto;}

}

@media screen and (max-width:425px){
    .page2 {padding: 0 0 100px 0;}
    h2{font-size: 30px;}
    .page2 .group h2{background-size: 320px auto;}


}
@media screen and (max-width:320px){
    .page2{background-size: 133% auto;}
}


.bnad{
    text-align: center;
    margin: 20px auto;
    padding: 0 20px;
}
.bnad img{
    max-width: 1200px; 
    width: 100%;
}