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

body{font-family: 'Noto Serif TC', serif;position: relative; }
/*---------通用---------*/
/*---------通用---------*/
#mtkContainer,
#mtkContainer * {
  box-sizing: border-box;
  vertical-align: top;
}



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

:root {
    --padding-top: 50px;
    --font-l: 42px;
    --font-m: 28px;
    --font-s: 18px;
    --color-gold: #ffd68c;
    --color-purple:#450089;
}
.middle{width: 100%; max-width: 1400px; margin: 0 auto; padding: 10px 0;}
/*---------通用結束---------*/
/*---------通用結束---------*/



/*--goBackTop--*/
.goBackTop{display: none; position: fixed; bottom:4%; right: 2%; text-align: center; z-index: 49;}
.goBackTop a{color: #fff;}
.goBackTop li{display: block; cursor: pointer; font: 14px/1.1 "arial", "微軟正黑體"; color: #fff; background: #7a3ab5; border-radius: 99em; width: 50px; height: 50px; padding: 8px; transition: all .3s;}
.goBackTop a:hover li{background: var(--color-gold); color: var(--color-purple); font-weight: bold;}

@media only screen and (max-width: 600px) {
  .goBackTop{ bottom: 5%;}
  .goBackTop li{ font-size: 12px; width: 45px;height: 45px;}
}



/*---------版頭---------*/
/*---------版頭---------*/
header.header {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 611px;
  background: url(../images/kagaya_header_pc.jpg) top center no-repeat #3a056f;
}

header.header h1 {display: none;}

@media screen and (max-width:1500px) {
  header.header{ background-size: 132vw; height: 40vw;}
}

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


header.kv-banner { position: relative; height: 450px; background-position: top center;background-repeat:no-repeat;}
header.kv-banner h1{opacity: 0;}

@media screen and (max-width:1024px) {
header.kv-banner { background-size: 160%; height: 37vw; }
}
@media screen and (max-width:768px) {
header.kv-banner .container-fluid.pin-header-banner,header.kv-banner .container-fullbg.pin-header{margin-top: 0;}
}



/*---------選單---------*/
/*---------選單---------*/
.menu-bar{width: 100%;  background: #7a3ab5; text-align: center;}
.menu-bar ul{
  /*display: inline-block; */
  display: flex;
  justify-content: center; 
  align-items: stretch;
  padding: 15px 5px;
} 
.menu-bar ul a li{
  display: inline-block; 
  /*width: 150px;*/ 
  font:500 22px/1.8 '思源黑體','微軟正黑體'; 
  padding: 0 30px;
  color: #ffffff;
  background: #440089; 
  text-align: center; 
  border-radius: 99em;
  margin: 0 10px; 
  cursor: pointer; 
  transition: 0.4s;
}

.menu-bar ul a li:hover{background: #f8d391;color: #3a056f;}
.menu-bar ul a li.on{background: #f8d391;color: #3a056f; font-weight: 600;}



/*---------前言---------*/
/*---------前言---------*/
.kagaya_area{
  position: relative; 
  margin: 0 auto;
  background: url(../images/firstBg.jpg)top center no-repeat #ddb4ff;
  width: 100%;
  padding: 50px 10px;
}
.kagaya_area .intro{width: 100%; max-width: 1400px; margin: 0 auto; text-align: center; padding-bottom: 40px;}
.kagaya_area .intro h2{
  color: var(--color-purple);
  text-align: center;
  padding-bottom: 10px;
}

.kagaya_area .intro h2 span {
  position: relative;
  display: inline-block;
  font: bold 42px/1.8 'Noto Serif TC', serif;
  letter-spacing: 0.1em;
}

.kagaya_area .intro h2 span::before{
  content: "";
  position: absolute;
  top: calc(50% - 20px);
  width: 160px;
  height: 32px;
  background: url(../images/h2-intro-l.png) center center no-repeat;
  right: 90%;
}

.kagaya_area .intro h2 span::after{
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  width: 160px;
  height: 32px;
  background: url(../images/h2-intro-r.png) center center no-repeat;
  left: 90%;	
}


.kagaya_area .intro p{
  font-size: var(--font-s); 
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-family: 'Noto Serif TC', serif;
}

.kagaya_area .intro p a{
  color: #0a8bfd;
  font-family: 'Noto Serif TC', serif;
  text-decoration: underline;
  ;
}


.intro .sorryText {
  margin: 20px auto;
  width: 100%;
  border: 55px solid #000;
  border-image: url(../images/text_bg.png) 73 repeat;
  max-width: 800px;
}

@media only screen and (max-width: 500px) {
  .intro .sorryText{
  border: 38px solid #000;
  border-image: url(../images/text_bg.png) 73 repeat;}
}


/*---------推薦行程---------*/
/*---------推薦行程---------*/

.recommend_journey{position: relative;text-align: center;}

.recommend_journey .ph-group-title span {
    color: var(--color-purple);
    letter-spacing: 0.1em;
    font: bold 42px / 1.5 'Noto Serif TC', serif;
    padding: 10px 0px;
    position: relative;
}
.recommend_journey .ph-group-title span::after,
.recommend_journey .ph-group-title span::before {
  content: "";
  position: absolute;
  top: calc(50% - 20px);
  width: 45px;
  height: 45px;
  background: url(../images/h2-ttPoi.png) center center no-repeat;
}


.recommend_journey .ph-group-title span::after {left: 110%;}
.recommend_journey .ph-group-title span::before {right: 115%;transform: scaleX(-1);}




/*list條列式Poi*/
.listPoi .ph-menu{display: none;}
.listPoi .ph-group-content-text-name{color:#8d5e32;}
.listPoi .ph-group {padding:0;background: #FFF;margin: 15px auto 50px auto;max-width: 1400px;border: #deb582 5px solid;}
.listPoi .ph-group-content{margin: 5px auto;transition: 0.2s;padding: 15px 10px; width:100%;position: relative;flex-shrink: 0; box-shadow: none; text-align: left;}

.listPoi .ph-group-content:nth-of-type(odd){background-color: #f6f6f6;}
.listPoi .ph-group-content:nth-of-type(1) {margin: 0px;background: #fef3db;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-photo {display: inline-block;width: 28%;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-photo a{display: block;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-photo .ph-group-content-tag {position: absolute;left: 0px; top: 0px;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text{padding: 10px 5px 40px 10px;width:70%;display: inline-block; /*vertical-align: top;*/}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-name{display: block; margin: 5px auto; font:bold 22px/1.4 'Noto Serif TC', serif; padding: 0;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-sale{display: inline-block; margin: 0px auto;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-sale a{font:20px/1.4 'Noto Sans TC';display: block;background: none;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-detail {color: #484848;font:18px/1.5 'Noto Sans TC';margin: 3px auto ;display: block;padding: 0;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-detail a {color:#484848;font:18px/1.5 'Noto Sans TC';padding:5px 0;}
.listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-price {bottom: 10px;}

.listPoi .ph-group-content:last-of-type {border-bottom: none;}
.listPoi .ph-group-content .ph-group-content-photo {width: auto;display: inline-block;}
.listPoi .ph-group-content .ph-group-content-photo a {display: none;}
.listPoi .ph-group-content .ph-group-content-text{padding: 0px;display: inline-block;width: auto;}
.listPoi .ph-group-content-photo img{width:100%;}
.listPoi .ph-group-content-text-name{color:#000000;font:bold 18px/1.4 'Noto Serif TC', serif; display: inline-block; padding: 0;}
.listPoi .ph-group-content-text-detail {display: none;}
.listPoi .ph-group-content-text-price {color:#d9002f; position: absolute; padding: 0px 10px; font:700 24px/1.4 'Noto Serif TC', serif; text-align: center;display: block;right: 10px;bottom: 5px;transition: all 0.3s;}
.listPoi .ph-group-content-text-price span{font-size: 80%;line-height: 2;}
.listPoi .ph-group-content-text-price:hover{color: var(--color-purple);}
.listPoi .ph-group-content-tag { position: static;background: #b833a4; border-radius: 0 50px 50px 0;font:15px/1.4 'Noto Sans TC';color:#FFF;padding: 3px 10px;}
.listPoi .ph-group-content-text-sale{display:inline-block;margin: 3px auto 0 auto; font: 16px/1 'Noto Sans TC'; color: #bb8b38;background: none;padding: 0;}
.listPoi .ph-group-content-text-sale a{ color: #bb8b38;font: 16px/1.4 'Noto Sans TC';background: none;padding: 0;}
/*.listPoi .link-right {background: #af7878; font:600 20px/1.2 'Noto Serif TC';color: #FFF;padding: 5px 30px;transition: 0.3s;display: inline-block;border-radius: 40px;}
.listPoi .link-right:hover{transform: translateX(10px);}*/

@media only screen and (max-width: 1300px) {
  .listPoi .ph-group-content {padding:  10px 10px 40px 10px;}
  .listPoi .ph-group{width: 90%;}
}

   
 @media only screen and (max-width: 800px) {
  .listPoi .ph-group-content:nth-of-type(1) .ph-group-content-photo {width: 100%;}
  .listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text {width: 100%;}
  .listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-name{font:bold 18px/1.4 'Noto Serif TC', serif;}
  .listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-sale a{font:14px/1.4 'Noto Serif TC', serif;}
  .listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-detail {font:14px/1.5 'Noto Sans TC';}
  .listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-detail a{font:14px/1.5 'Noto Sans TC';}
  .listPoi .ph-group-content-text-name {display: block; font:bold 18px/1.2 'Noto Serif TC', serif; margin: 5px auto;}
  .listPoi .ph-group-content .ph-group-content-text {width: 100%;padding: 10px;}
  .listPoi .ph-group-content-text-sale{margin: 5px auto;}
  .listPoi .ph-group-content-text-price { font: bold 20px/1.4 'Noto Serif TC', serif;}
}
     
@media only screen and (max-width: 600px) {
  .listPoi .ph-group-content:nth-of-type(1) .ph-group-content-text-name{font:600 16px/1.4 'Noto Sans TC';}
  .listPoi .ph-group-content-text-name{font:600 16px/1.4 'Noto Sans TC';}
}
     







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

@media screen and (max-width:800px){
	.menu-bar ul a li{ margin: 0 5px; font-size: 20px; }
}


@media screen and (max-width:768px){
  .menu-bar{overflow-x: scroll; white-space: nowrap;}
  .menu-bar ul{justify-content: left;}
  .kagaya_area{padding: 30px 10px 10px;}
}

@media screen and (max-width:600px){
  .menu-bar ul a li{padding: 5px 30px; font-size: 18px;line-height: 1.3;}

  .kagaya_area .intro p{width: 90%; font-size: 16px; margin: 0 auto;}
  .kagaya_area .intro p > br{display: none;}
  .kagaya_area .intro h2 span{letter-spacing: 0.05em; font-size: 36px;}
  .kagaya_area .intro h2 span::before,.kagaya_area .intro h2 span::after{display: none;}
  .recommend_journey .ph-group-title span{font-size: 36px;}
}

@media screen and (max-width:414px){
  .kagaya_area .intro h2 span,
  .recommend_journey .ph-group-title span{font-size: 36px;}

  .recommend_journey .ph-group-title span::before{right: 107%;}
  .recommend_journey .ph-group-title span::after{left: 105%;}
}






/*---------aboutKogaya---------*/
/*---------aboutKogaya---------*/
.about-kogaya{
  position: relative;
  width: 100%;
  background: url(../images/introduceBg.jpg) top center no-repeat #fff7fd;
  padding: 4% 0 2%;
}
.about-kogaya ul.menuBtn{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 5px 0;
}

.about-kogaya ul.menuBtn li{
  display: inline-block;
  font:600 24px/1.4 'Noto Serif TC', serif;
  padding: 0.3em 1.5em;
  margin: 0 10px;
  transition: all .3s;
  color: #6d37b7;
  border:1px solid #6d37b7;
  text-align: center;
  cursor: pointer;
}
.about-kogaya ul.menuBtn li:hover{background: var(--color-gold)/*#fc74ea*/; color: #6d37b7;}
.about-kogaya ul.menuBtn li.on{background: #6d37b7; color: #fff;border:1px solid #6d37b7;}
.about-kogaya .innerBase{position: relative;}
.about-kogaya .innerBase .allBox{
  display: flex;
  position: relative;
  flex-wrap: wrap; 
  justify-content: center;  
  width: 95%; 
  margin: 0 auto; 
  align-items: flex-start; 
  padding: 3% 0 2%;
  display: none;
}
.about-kogaya .innerBase .allBox .picBox{width: 50%;}
.about-kogaya .innerBase .allBox .picBox img{width: 100%;}
.about-kogaya .innerBase .allBox .info{width: 50%; text-align: left;  position: relative;letter-spacing: 0.05em; padding:5% 0 0 3%;}
.about-kogaya .innerBase .allBox .info h3{font: bold 36px/1.4 'Noto Serif TC', serif; display: inline-block; padding-bottom: 3% ;color: #6d37b7;}
.about-kogaya .innerBase .allBox .info p{font: 18px/1.8 'Noto Serif TC', serif; padding-bottom: 1%;}
.about-kogaya .innerBase .allBox .info p small{font: 14px/2 'Noto Serif TC', serif;}
.about-kogaya .innerBase .allBox.on{display: flex;}

/*輪播*/
.slick-prev, .slick-next, .slick-prev:before, .slick-next:before {display: none;}


@media only screen and (max-width: 1068px) {
  .about-kogaya .allBox .info h3{font-size: 34px;}
}

@media only screen and (max-width: 768px) {
  .middle{width: 95%;}
  .about-kogaya{padding: 5% 0;}
  .about-kogaya ul.menuBtn li{font-size: 20px;}
  .about-kogaya .innerBase .allBox{width: 85%;}
  .about-kogaya .innerBase .allBox .picBox{width: 100%;padding-bottom: 3%;}
  .about-kogaya .innerBase .allBox .info{width: 100%; padding-top: 0;}
  .about-kogaya .innerBase .allBox .info h3{font-size: 2em;}
  .about-kogaya .innerBase .allBox .info p{font-size: 1.2em;}

  .slick-dots{bottom: -20px;}
}

@media only screen and (max-width: 500px) {
  .middle{width: 90%;}
  .about-kogaya ul.menuBtn{padding-bottom: 10px;}
  .about-kogaya ul.menuBtn li{padding: 2px 10px;font-size: 17px; margin: 0 6px;}
  .about-kogaya .innerBase .allBox{width: 90%;}
}



@media only screen and (max-width: 414px) {
  .about-kogaya .innerBase .allBox .info h3{font-size: 2em;}
}







/*---------hotspa---------*/
/*---------hotspa---------*/
.kogaya_hotspa{
  position: relative;
  width: 100%;
  height: 640px;
  background: url(../images/hotSpaBg-pc.jpg)top center no-repeat #000;
  padding: 4% 0 2%;
}

.kogaya_hotspa .hotspa-middle{
  position: relative;
  width: 100%; 
  max-width: 1280px; 
  margin: 0 auto; 
}

.kogaya_hotspa .hotspa-middle .infoBox{
  position: absolute;
  display: inline-block;
  width: 45%;
  text-align: left;
  padding: 3%;
  right: 3%;
  top: 120px;
  letter-spacing: 0.05em;
  background: rgba(74,18,135,0.8);
}

.kogaya_hotspa .hotspa-middle .infoBox h3{
  font: 600 35px/1 'Noto Serif TC', serif;
  color: var(--color-gold);
  margin-bottom: 15px;
  border-left: 8px solid;
  padding-left: 12px;
}
.kogaya_hotspa .hotspa-middle .infoBox p{
  font: 18px/2 'Noto Serif TC', serif;
  text-align: justify;
  color: #fff;
}

@media screen and (max-width:1024px){
  .kogaya_hotspa{
    background: url(../images/hotSpaBg-m.jpg) bottom center no-repeat #000; 
    position: relative;
    height: 100vw;
    background-size: contain;
  }

  .kogaya_hotspa .hotspa-middle .infoBox{
    width: 85%; 
    top: 25px;
    right: 0;
    position: relative;
    margin: 0 auto;
    display: block;
  }
  .kogaya_hotspa .hotspa-middle .infoBox h3{font-size: 32px;}
  .kogaya_hotspa .hotspa-middle .infoBox p{font-size: 16px;} 
}
@media screen and (max-width:550px){
  .kogaya_hotspa{height: 112vw;}
  .kogaya_hotspa .hotspa-middle .infoBox h3{font-size: 28px;}
}
@media screen and (max-width:414px){
  .kogaya_hotspa{height: 130vw;}
  .kogaya_hotspa .hotspa-middle .infoBox h3{font-size: 25px;}
  .kogaya_hotspa .hotspa-middle .infoBox p{font-size: 14px;} 
}





/*---------viedoArea---------*/
/*---------viedoArea---------*/
.viedoArea{
  position: relative;
  width: 100%;
  background: url(../images/ytBg.jpg) bottom center no-repeat #4b1e88;
  padding: 50px 0;
}

.viedoArea .yt-middle{
  position: relative;
  width: 100%; 
  max-width: 1000px; 
  margin: 0 auto; 
  text-align: center;
  padding: 0 1%;
}
.viedoArea .titleBox{
  position: relative;
  display: inline-block;
  color: var(--color-gold);
  letter-spacing: 0.1em;
  padding: 10px 0px;
}

.viedoArea .titleBox::before,
.viedoArea .titleBox::after{
  content: "";
  position: absolute;
  top: calc(50% - 15px);
  width: 160px;
  height: 32px;
  background: url(../images/h2-intro-r.png) center center no-repeat;
}
.viedoArea .titleBox::before{right: 90%;transform: scaleX(-1);}
.viedoArea .titleBox::after{left: 90%;}

.viedoArea .titleBox h3{ font: bold 36px/1.2 'Noto Serif TC', serif;}
.viedoArea .titleBox h2{ font: bold 42px/1.5 'Noto Serif TC', serif;}


.viedoArea .yt-middle .iframeBox{
  position: relative;
  padding-bottom: 56.25%;
  margin:25px 0;
  overflow: hidden;
}
.viedoArea .yt-middle .iframeBox iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*介紹*/
.viedoArea .yt-middle .contentWrap{display: block; padding: 10px 0;}
.viedoArea .yt-middle .contentWrap p{
  font: 18px/2 'Noto Serif TC', serif;
  color: #fff;
  letter-spacing: 0.05em;
  padding-bottom: 1.5em;
}
.viedoArea .yt-middle .contentWrap .watch{
  display: block;
  font: 600 24px/1.5 'Noto Serif TC', serif;
  letter-spacing: 0.05em;
  background: var(--color-gold);
  color: var(--color-purple);
  padding: 1% 0;
  width: 25%;
  margin: 0 auto;
  text-align: center;
  border-radius: 10px;
  transition: 0.3s;
}
.viedoArea .yt-middle .contentWrap .watch:hover{transform: translateY(5px); background-color: #ff99f2;}

@media screen and (max-width:600px){
  .viedoArea .titleBox::before,.viedoArea .titleBox::after{display: none;}
  .viedoArea .titleBox h3{ font-size: 32px;}
  .viedoArea .titleBox h2{ font-size: 36px;}

  .viedoArea .yt-middle{width: 95%; padding: 0;}
  .viedoArea .yt-middle .iframeBox{margin: 10px 0;}
  .viedoArea .yt-middle p{text-align: justify;}
  .viedoArea .yt-middle p > br{display: none;}
  .viedoArea .yt-middle .contentWrap .watch{width: 50%;}
  .viedoArea .yt-middle .contentWrap p{font-size: 16px;padding: 0 1em 1.5em;}
}
  

@media screen and (max-width:414px){
  .viedoArea .titleBox h3{ font-size: 28px;}
  .viedoArea .titleBox h2{ font-size: 32px;}
  .viedoArea .yt-middle .contentWrap p{font-size: 14px;}
}