@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');

/*font: 700 30px/1.8 "Noto Sans TC", "微軟正黑體";*/
/************通用 CSS 開始********************/
/************通用 CSS 開始********************/
/************通用 CSS 開始********************/
/************通用 CSS 開始********************/
/************通用 CSS 開始********************/
body {}

#mtkContainer,
#mtkContainer * {
  box-sizing: border-box;
}

.bg1 {
  background: #fe7c00;
  /* background: #e935c9; */
}

/* .test {
  border: red 1px solid;
}

.test2 {
  border: blue 1px solid;
} */

header.header {
  display: flex;
  justify-content: right;
  padding-top: 30px;
  /* height: 810px; */
  background: url(../images/hktp_header_pc.jpg) top center no-repeat;

  font-size: 0.5vw;
}

.header_content {
  display: flex;
  justify-content: right;
  align-items: center;
  padding-bottom: 30px;
  width: 100%;
  height: 100%;

}

h1 {
  width: 30%;
}

h1 img {
  width: 100%;
  max-width: 509px;
}


.header_content_list {
  display: flex;
  justify-content: left;
  flex-wrap: nowrap;
  margin-bottom: 30px;
  padding-bottom: 20px;
  width: 70%;
  height: auto;
  overflow-x: scroll;

}

.headerBtn {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 4%;
  width: 32%;
  border-radius: 99em;
  overflow: hidden;

}


.headerBtn_img {
  position: relative;
}

.headerBtn_img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  transition: .5s;
  border-radius: 99em;
}

.headerBtn:hover .headerBtn_img::before {
  background: rgba(0, 0, 0, 0.0);
}

.headerBtn_img img {
  width: 100%;
}

.headerBtn p {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font: 900 7em/1.2 "Noto Sans TC";
  letter-spacing: 10px;
  color: white;
  z-index: 10;
  writing-mode: vertical-lr;
}


.headerBtn span {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: absolute;
  top: 0;
  left: 0;
  padding: 17% 0 0 19%;
  width: 100%;
  height: 100%;
  font: 900 3.5em/1.2 "Noto Sans TC";
  letter-spacing: 10px;
  color: white;
  z-index: 10;
  writing-mode: vertical-lr;
}


.dec-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 80%;
  left: 50%;
  width: 20%;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border: 2px solid white;
  border-radius: 99em;
  z-index: 50;
}

.dec-arrow li {
  width: 28%;
  height: 2px;
  border-radius: 99em;
  background: white;
}

.dec-arrow li:first-child {
  transform: scale(1.45) rotate(45deg);
}

.dec-arrow li:last-child {
  transform: scale(1.45) rotate(-45deg);
}

.headerBtn:hover .dec-arrow {
  display: none;
}

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


  .headerBtn {
    /* width: 37%; */
  }
}

@media screen and (max-width:500px) {
  header.header {
    height: auto;
    /* background: none; */
  }

  .header_content {
    flex-wrap: wrap;
  }

  h1 {
    padding: 5%;
    width: 100%;
  }

  .header_content_list {

    width: 100%;



  }

  .headerBtn {
    margin-right: 5%;
    width: 33%;
    height: 60%;

  }

  .headerBtn p {
    font-size: 21px;
  }

  .headerBtn span {
    padding: 14% 0 0 13%;
    font-size: 13px;
  }

  /* .dec-arrow {
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
} */
}











/**/

.poiInfor {
  padding: 80px 0 0px 0;
}

.poiInfor h2 {
  padding-bottom: 20px;
  font: 700 2.4em/1.4 "Noto Sans TC";
  color: black;
  letter-spacing: 3px;
  text-align: center;
  width: 100%;
}

.bg1.poiInfor h2 {

  color: white;

}

.poiInfor_source .ph {
  padding: 0 0 100px 0;
}

.poiInfor_source .ph-group {
  display: flex;
  flex-wrap: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  margin: 0 auto 0 auto;
  padding-bottom: 20px;
  width: 95%;
  max-width: 1200px;
}

.poiInfor_source .ph-group-content {
  flex-shrink: 0;
  display: inline-block;
  margin-right: 35px;
  width: 160px;
}

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

.poiInfor_source .ph-group-content-text,
.poiInfor_source .ph-menu,
.poiInfor_source .ph-group-title {
  display: none;
}

.poiInfor_board {
  position: relative;
  display: block;
  margin: 0 auto 3% auto;
  width: 95%;
  max-width: 1200px;

}

.poiInfor_board_img {
  line-height: 0;
  width: 70%;
}

.poiInfor_board_img img {
  width: 100%;
}

.poiInfor_board_text {
  position: absolute;
  top: 20%;
  right: 0;
  padding: 20px;
  width: 40%;
  font-size: 10px;
  background: #1d6564;
}

.poiInfor_board_text h3 {
  font: 700 3em/1.4 "Noto Sans TC";
  color: white;
  letter-spacing: 3px;
}

.poiInfor_board_text p {
  font: 500 1.7em/1.6 "Noto Sans TC";
  color: white;
  letter-spacing: 3px;
}

@media screen and (max-width:1100px) {
  .poiInfor h2 {
    font-size: 2em;
  }

  .poiInfor_board {
    margin-bottom: 10%;
  }

  .poiInfor_board_img {
    width: 100%;
  }

  .poiInfor_board_text {
    position: static;
    width: 100%;
  }

  .poiInfor_source .ph-group-content {

    margin-right: 2%;
    width: 40%;
  }
}







.poiInfor .ph-group::-webkit-scrollbar,
.header_content_list::-webkit-scrollbar {
  background: #1d6564;
  height: 20px;
  border-radius: 99em;
}

.poiInfor .ph-group::-webkit-scrollbar-thumb,
.header_content_list::-webkit-scrollbar-thumb {
  background: #fe7c00;
  height: 20px;
  border-radius: 99em;
}

.bg1.poiInfor .ph-group::-webkit-scrollbar-thumb {
  background: #fff;

}


/*youtube*/

.poiInfor_movie{  position: relative; display: flex; margin: 0 auto ;  width: 95%; max-width: 1200px;padding: 0px 0 80px 0;flex-wrap: wrap;justify-content: space-around;}
.poiInfor_movie *{vertical-align: top;}
.poiInfor_movie .ph-menu{display: none;}
.poiInfor_movie .ph-group-content-photo{display: none;}
.poiInfor_movie .ph-group-title{display: none;}
.poiInfor_movie_text{width:30%;}
.poiInfor_movie_text .ph-group-content-text{padding: 20px ;}
.poiInfor_movie_text .ph-group-content-text-name{font: 900 36px/1.4 "Noto Sans TC";color:#fcff46;padding: 10px 0; border-bottom: 1px solid #fcff46;display: block;margin: 5px auto;position: relative;z-index: 0;}
.poiInfor_movie_text .ph-group-content-text-name:before{content: "";position: absolute;left:-20px;top: 0;width: 50px;height: 50px;border-radius: 99em;background: #d72929;z-index: -1;}
.poiInfor_movie_text .ph-group-content-text-detail{font: 300 22px/1.6 "Noto Sans TC";color:#fff;padding: 5px 0; display: block;}
.poiInfor_movie_text .ph-group-content-text-sale{display: inline-block;margin: 5px auto;background: #eb5c23;color: #fff;font: 300 20px/1.5 "Noto Sans TC";padding: 0px 10px;border-radius: 20px;}
.poiInfor_movie_text .ph-group-content-text-price{display: block;background: #000;border-radius: 20px;color: #fff;font: 400 24px/1.4 "Noto Sans TC";text-align: center; transition: 0.3s;padding: 5px 0;margin: 10px auto;}
/* .poiInfor_movie_text .ph-group-content-text-price:hover{text-decoration:none;} */
.poiInfor_movie_text .ph-group-content:hover .ph-group-content-text-price{transform: translateY(-5px);}
.poiInfor_movie_img{width: 60%;padding: 40px;border-radius: 20px;background: #1d6564;}
.poiInfor_movie_img iframe {width: 100%;}

/*白底*/
.type2 .poiInfor_movie_text {order: 1;}
.type2 .poiInfor_movie_img{order: 2;}

.type2 .poiInfor_movie_text .ph-group-content-text-name{color:#fe7c00;border-bottom: 1px solid #fe7c00;}
.type2 .poiInfor_movie_text .ph-group-content-text-name:before{content: "";position: absolute;left: -20px;top: 0;width: 50px;height: 50px;border-radius: 99em;background: #c1f3f3;z-index: -1;}
.type2 .poiInfor_movie_text .ph-group-content-text-detail{color: #606060;}
.type2 .poiInfor_movie_text .ph-group-content-text-sale{background: #fdeb6c;color:#fe7c00;}



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

  .poiInfor_movie_text .ph-group-content-text-name{font: 900 24px/1.4 "Noto Sans TC";}
  .poiInfor_movie_text .ph-group-content-text-detail{font: 300 18px/1.4 "Noto Sans TC";}
  .poiInfor_movie_text .ph-group-content-text-sale{font: 300 18px/1.4 "Noto Sans TC";}
}


@media screen and (max-width:768px) {
  .poiInfor_movie_text{ width:100%;}
  .poiInfor_movie_img {width: 100%;padding: 20px;}
  .poiInfor_movie_text .ph-group-content-text-name{padding: 10px;}
  .poiInfor_movie_text .ph-group-content-text-name:before{content: "";position: absolute;left: -5px;top: 0;width: 35px;height: 35px;border-radius: 99em;background: #d72929;z-index: -1;}
  .type2 .poiInfor_movie_text{order: 2;}
  .type2 .poiInfor_movie_img {order: 1;}
  .type2 .poiInfor_movie_text .ph-group-content-text-name:before{content: "";position: absolute;left: -5px;top: 0;width: 35px;height: 35px;border-radius: 99em;background: #c1f3f3;z-index: -1;}

}





/*兩個影片*/
.poiInfor_movie2_board{display: flex;flex-wrap: nowrap;justify-content: center;max-width: 1200px;margin: 0 auto;}

.poiInfor_movie2{width: 40%;display: inline-block;margin: 0 auto ;max-width: 1400px;padding: 50px 0 70px 0;}
.poiInfor_movie2 *{vertical-align: top;}
.poiInfor_movie2 .ph-menu{display: none;}
.poiInfor_movie2 .ph-group-content-photo{display: none;}
.poiInfor_movie2 .ph-group-title{display: none;}
.poiInfor_movie2_text{display: inline-block; width:100%;text-align: center;}
.poiInfor_movie2_text .ph-group-content-text{padding: 10px 20px;}
.poiInfor_movie2_text .ph-group-content-text-name{font: 900 28px/1.4 "Noto Sans TC";color:#fcff46;padding: 15px 0; border-bottom: 1px solid #fcff46;display: block;margin: 5px auto;position: relative;z-index: 0;}
.poiInfor_movie2_text .ph-group-content-text-name:before{content: "";position: absolute;left: 0;top: 0;width: 50px;height: 50px;border-radius: 99em;background: #d72929;z-index: -1;}
.poiInfor_movie2_text .ph-group-content-text-detail{font: 300 24px/1.4 "Noto Sans TC";color:#fff;padding: 5px 0; display: block;}
.poiInfor_movie2_text .ph-group-content-text-sale{display: none;margin: 5px auto;background: #269997;color: #fff;font: 300 20px/1.4 "Noto Sans TC";padding: 0px 10px;}
.poiInfor_movie2_text .ph-group-content-text-price{display: block;background: #000;border-radius: 20px;color: #fff;font: 400 24px/1.4 "Noto Sans TC";text-align: center; transition: 0.3s;padding: 5px 0;margin: 10px auto;}
.poiInfor_movie2_text .ph-group-content:hover .ph-group-content-text-price{transform: translateY(-5px);}

.poiInfor_movie2_img{display: inline-block; width: 100%;padding: 40px;border-radius: 20px;background: #1d6564;}
.poiInfor_movie2_img iframe {width: 100%;}


@media screen and (max-width:1000px) {
.poiInfor_movie2_board{flex-wrap: wrap;}
.poiInfor_movie2{width: 90%;display: block;}
.poiInfor_movie2_text .ph-group-content-text-name{font: 900 24px/1.4 "Noto Sans TC";}
.poiInfor_movie2_text .ph-group-content-text-name:before{content: "";position: absolute;left: -5px;top: 0;width: 35px;height: 35px;border-radius: 99em;background: #d72929;z-index: -1;}
.poiInfor_movie2_text .ph-group-content-text-detail{font: 300 18px/1.4 "Noto Sans TC";}
.poiInfor_movie2_img {padding: 20px;}
}


/*blogPOI*/


.poiInfor_blog_poi {margin: 0 auto ;max-width: 1400px;padding: 0px 0 70px 0;}
.poiInfor_blog_poi *{vertical-align: top;}
.poiInfor_blog_poi .ph-menu{display: none;}
.poiInfor_blog_poi .ph-group-content {display:inline-flex;flex-wrap: nowrap;justify-content: center;margin:15px auto;border-bottom:7px dotted #ffe5cb;padding: 40px 0;}
.poiInfor_blog_poi .ph-group-content:nth-last-child(1){border-bottom:none;}
.poiInfor_blog_poi .ph-group-content-photo{width: 40%;order: 1;}
.poiInfor_blog_poi .ph-group-content:nth-of-type(even) .ph-group-content-photo{order: 2;}
.poiInfor_blog_poi .ph-group-content:nth-of-type(even) .ph-group-content-text{order: 1;}
.poiInfor_blog_poi .ph-group-content-photo img{width: 100%;}
.poiInfor_blog_poi .ph-group-title{display: none;}
.poiInfor_blog_poi .ph-group-content-text{padding: 50px ;width: 50%;flex-grow: 1;position: relative;;order: 2;text-align: center;}

.poiInfor_blog_poi .ph-group-content-text-name{font: 900 28px/1.4 "Noto Sans TC";color:#fe7c00;padding: 10px; display: block;margin: 5px auto;background: #ffff94;position: relative;}
.poiInfor_blog_poi .ph-group-content-text-name:before{content: "";position: absolute;left: -40px;top: -20px; width: 100px ;height: 2px;background: #faa92f;}
.poiInfor_blog_poi .ph-group-content-text-name:after{content: "";position: absolute;left:-20px;top: -43px; width: 2px ;height: 100px;background: #43c2c0;}

.poiInfor_blog_poi .ph-group-content-text:before{content: "";position: absolute;right: 15px;bottom: 48px; width: 100px ;height: 2px;background: #43c2c0;}
.poiInfor_blog_poi .ph-group-content-text:after{content: "";position: absolute;right: 34px;bottom: 21px; width: 2px ;height: 100px;background: #faa92f;}

.poiInfor_blog_poi .ph-group-content-text-detail{font: 300 20px/1.8 "Noto Sans TC";color:#606060;padding: 5px 0; display: block;text-align: left;}
.poiInfor_blog_poi .ph-group-content-text-sale{display: none;margin: 5px auto;background: #269997;color: #fff;font: 300 20px/1.4 "Noto Sans TC";padding: 0px 10px;}
.poiInfor_blog_poi .ph-group-content-text-price{display: inline-block;background: #fe7c00;border-radius: 20px;color: #fff;font: 400 24px/1.4 "Noto Sans TC";text-align: center; transition: 0.3s;padding: 5px 0;margin: 20px auto;width: 50%;}
.poiInfor_blog_poi .ph-group-content:hover .ph-group-content-text-price{transform: translateY(-5px);}


@media screen and (max-width:1000px) {
.poiInfor_blog_poi .ph-group-content-text-name{font: 900 24px/1.4 "Noto Sans TC";}
}

@media screen and (max-width:768px) {
  .poiInfor_blog_poi .ph-group-content{display:flex;flex-wrap: wrap;width: 90%;margin: 0 auto;}
  .poiInfor_blog_poi .ph-group-content-photo {width: 100%;}
  .poiInfor_blog_poi .ph-group-content-text-name{padding: 20px;}
  .poiInfor_blog_poi .ph-group-content-text{width: 90%;flex-grow: 0;padding: 25px;}
  .poiInfor_blog_poi  .ph-group-content-text-detail{font: 300 18px/1.6 "Noto Sans TC";}
  .poiInfor_blog_poi .ph-group-content-text-price{width: 100%;}
  .poiInfor_blog_poi .ph-group-content:nth-of-type(even) .ph-group-content-photo{order: 1;}
  .poiInfor_blog_poi .ph-group-content:nth-of-type(even) .ph-group-content-text{order: 2;}
  .poiInfor_blog_poi .ph-group-content-text-name:before{content: "";position: absolute;left: -40px;top: -20px; width: 100px ;height: 2px;background: #faa92f;}
  .poiInfor_blog_poi .ph-group-content-text-name:after{content: "";position: absolute;left:-20px;top: -43px; width: 2px ;height: 100px;background: #43c2c0;}
  .poiInfor_blog_poi .ph-group-content-text:before{content: "";position: absolute;right: -15px;bottom: 20px; width: 100px ;height: 2px;background: #43c2c0;}
  .poiInfor_blog_poi .ph-group-content-text:after{content: "";position: absolute;right: 0px;bottom: 0px; width: 2px ;height: 100px;background: #faa92f;}

}