.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;
  font-family: "微軟正黑體", "roboto", "Helvetica Neue", "Helvetica", "Arial", "Microsoft JhengHei", sans-serif;
  
}

#mtkContainer {
  position: relative;
  /* overflow-x: hidden; */
}

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

a,
a:hover {
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

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

.pos-rel {
  position: relative;
}

.pos-abs {
  position: absolute;
}

/*版頭*/

/*POI版頭*/
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;}
}



header.header {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 900px;
  background: url(../images/header-bg2.jpg) top center no-repeat;
}

header.header h1 img.mobile {
  display: none;
}

header.header h1 .pc {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding-top: 80px;
  max-width: 826px;
}

header.header h1 img {
  width: 100%;
}

/*小動畫*/
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes bounce {

  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.poi-header .mobile-menu-content .mobile-menu-content-title .mobile-menu-collapse-btn i {
  display: none;
}


/*--版頭選單--*/
.nav {
  position: relative;
  width: 100%;
  background: #ff5b5d;
  text-align: center;
  z-index: 98;
  margin: 0 auto;
}

.nav>ul.box {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.nav ul.box a {
  display: inline-block;
  border-radius: 12px;
  margin: 1% 0.5% 1%;
  ;
  background: #FFF;
  cursor: pointer;
  letter-spacing: normal;
  transition: 0.2s;
}

.nav ul.box a li {
  color: #ed0508;
  font: bold 26px/1.2 "微軟正黑體";
  cursor: pointer;
  padding: 6px 10px 5px;
  margin: 0 8px;
}

.nav ul.box a:hover {
  box-shadow: none;
  top: 2px;
  transform: translateY(4px);
}

.nav ul.box a:hover li {
  color: #6c46a1;
}

.nav.scroll {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: #ff5b5d;
}


/*Bank選單*/
.bankMenu {
  background: #ffe6b7;
  position: relative;
  width: 100%;
  z-index: 98;
  text-align: center;
  margin: 0 auto;
}

.bankMenu ul {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.bankMenu ul a {
  display: inline-block;
  cursor: pointer;
  letter-spacing: normal;
  transition: 0.2s;
  background: none;
  margin: 0 0.5%;
}

.bankMenu ul a:hover {
  background: #fff;
  transform: translateY(0px);
  border-radius: 0;
}

.bankMenu ul a li {
  color: #6c45a1;
  font: bold 20px/2.2 "微軟正黑體";
  cursor: pointer;
  margin: 0 15px;
  padding: 0;
}

.bankMenu.scroll {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  background: #ffe6b7;
}


/*--goTop--*/
.goTop {
  display: none;
  position: fixed;
  bottom: 8%;
  right: 2%;
  text-align: center;
  z-index: 99;
}

.goTop a {
  color: #fff;
}

.goTop li {
  display: block;
  cursor: pointer;
  font: 16px/1.1 "arial", "微軟正黑體";
  color: #fff;
  background: #00bcb1;
  border-radius: 99em;
  width: 60px;
  height: 60px;
  padding: 12px 12px;
  transition: all .3s;
}

.goTop a:hover li {
  background: #ff873e;
}


/*--下方start--*/
.ppBg {
  width: 100%;
  position: relative;
  margin: 0 auto;
  background: url(../images/repeat_bg2.jpg) top center repeat;
  padding: 60px 15px 30px;
}


/*--分區標--*/
.areaTitle {
  position: relative;
  margin: 0.5% auto 1%;
  text-align: center;
}

img.one {
  width: 100%;
  max-width: 730px;
}

img.two {
  width: 100%;
  max-width: 694px;
}

img.three {
  width: 100%;
  max-width: 735px;
}


/*原主頁錨點按鈕*/
.anchor-menu {
  position: relative;
  width: 100%;
  text-align: center;
  z-index: 98;
  margin: 2% auto 0;
}

.anchor-menu>ul {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.anchor-menu ul a {
  display: inline-block;
  border-radius: 99em;
  margin: 1% 0.5% 1%;
  ;
  background: #ff735d;
  cursor: pointer;
  letter-spacing: normal;
  transition: .3s;
}

.anchor-menu ul a li {
  color: #fff;
  font: bold 22px/1.4 "微軟正黑體";
  cursor: pointer;
  padding: 6px 10px;
  margin: 0 8px;
}

.anchor-menu ul a:hover {
  background: #fff;
}

.anchor-menu ul a:hover li {
  color: #ff735d;
}

/*new主頁錨點按鈕*/
.fixItemsBtn {
  display: none;
  position: fixed;
  padding: 10px 15px;
  top: 20%;
  left: 0;
  border-radius: 0 10px 10px 0;
  background: #ff5349;
  z-index: 100;
}

.fixItemsBtn ul a {
  position: relative;
  text-align: center;
  font: 18px/1.4 "微軟正黑體";
  color: #fff;
  list-style: none;
  transition: .3s;
}

.fixItemsBtn ul a:hover {
  font-weight: bold;
}

.fixItemsBtn ul a li {
  padding: 5px 0;
}

@media only screen and (max-width: 800px) {
  .fixItemsBtn {
    right: 0;
    top: inherit;
    bottom: 0;
    margin: 0;
    width: 100%;
    padding: 0;
    text-align: center;
    border-radius: 0;
  }

  .fixItemsBtn ul a {
    font: 15px/14px "微軟正黑體";
  }

  .fixItemsBtn ul a li {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 15px;
  }
}

@media only screen and (max-width: 550px) {
  .fixItemsBtn ul {
    overflow-x: scroll;
    white-space: nowrap;
  }

  /*滾軸*/
}


/*圖文介紹+POI*/
.contentWrap {
  width: 95%;
  max-width: 1400px;
  margin: 3% auto 4%;
  /*margin: 2% auto 3%;*/
  position: relative;
  text-align: center;
  padding: 1%;
  background: #fff;
  border-radius: 15px;
}

.contentWrap .allBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  width: 95%;
  margin: 0 auto;
  align-items: flex-start;
  padding: 3% 0 2%;
}

.contentWrap .allBox .picBox {
  width: 50%;
}

.contentWrap .allBox .picBox img {
  width: 100%;
}

.contentWrap .allBox .info {
  width: 50%;
  text-align: left;
  padding-left: 3%;
  position: relative;
}

.contentWrap .allBox .info h3 {
  font: bold 36px/1.4 "Arial", "微軟正黑體";
  display: inline-block;
  letter-spacing: 0.02em;
  padding-bottom: 3%;
  color: #ff4e46;
}

.contentWrap .allBox .info p {
  font: 16px/1.8 "Arial", "微軟正黑體";
  padding-bottom: 1%;
}

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

.dotLine {
  border-bottom: 1px dotted #8359bd;
  width: 95%;
  margin: 0 auto 1%;
}

/*主頁POI*/
.slidecontain {
  /* display: none; */
}

.ph-group-title {
  /* display: none; */
}

.ph-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 1% 0;
}

.prodArea {
  position: relative;
  display: block;
  text-align: center;
  padding: 1% 0 2%;
}

.prodArea .type-3-normal {}

.prodArea .type-3-normal .ph-group-content {
  width: 23%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin: 10px;
  /*display: flex; flex-wrap: wrap; */
  box-shadow: rgb(121 121 121 / 30%) 0px 1px 5px 2px;
  -webkit-box-shadow: rgb(121 121 121 / 30%) 0px 1px 5px 2px;
  transition: 0.3s;
}

.prodArea .type-3-normal .ph-group-content-photo {
  overflow: hidden;
  position: relative;
}

.prodArea .type-3-normal .ph-group-content-photo img {
  width: 100%;
}

.prodArea .type-3-normal .ph-group-content-photo .ph-group-content-tag {
  padding: 8px 5px 5px;
  position: absolute;
  top: 15px;
  left: 0px;
  font: 400 16px/1 "Century Gothic", "微軟正黑體";
  color: #fff;
  background: #ff514a;
  padding: 5px 12px 5px 6px;
  border-radius: 0 99rem 99rem 0;
}

.prodArea .type-3-normal .ph-group-content-text {
  text-align: left;
  padding: 15px 15px 35px 15px;
  background: #fff;
  /*width: 100%; height: 100%;*/
}

.prodArea .type-3-normal .ph-group-content-text-name {
  color: #744cab;
  font: bold 20px/1.3 "微軟正黑體";
}

.prodArea .type-3-normal .ph-group-content-text-detail {
  color: #757474;
  font: 15px/1.5 "微軟正黑體";
  text-align: left;
  margin: 15px auto;
}

.prodArea .type-3-normal .ph-group-content-text-price {
  width: 90%;
  display: block;
  color: #ff4646;
  font: bold 26px/1.4 "Century Gothic", "微軟正黑體";
  text-align: center;
  margin: 10px auto 10px auto;
  align-self: end;
  position: absolute;
  bottom: 5px;
}

.prodArea .type-3-normal .ph-group-content-text-price span {
  font: 16px/1.4 "Century Gothic", "微軟正黑體";
  color: #ff4646;
  vertical-align: baseline;
}

.prodArea .type-3-normal .ph-group-content:hover {
  transform: translateY(5px);
}



/*--Page2-3頁籤切換--*/
.productWrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 2% 0;
  max-width: 1400px;
}

ul.menuBox {
  display: flex;
  position: relative;
  justify-content: center;
  flex-wrap: wrap;
  width: 60%;
  margin: 20px auto 0;
  text-align: center;
}

ul.menuBox li {
  display: inline-block;
  flex-grow: 1;
  font: bold 30px/1.2 "arial", "微軟正黑體";
  color: #fff;
  background: #613c95;
  cursor: pointer;
  padding: 0.5em 2em;
  width: 20%;
  margin: 0 5px;
  border-radius: 8px 8px 0 0;
  transition: all .2s;
  transform: translateY(5px);
}

ul.menuBox li.on {
  background: #ff5b5b;
  color: #fff;
}

ul.menuBox li:hover {
  transform: translateY(0px);
}

ul.menuBox li br {
  display: none;
}

.allPoiBase {
  position: relative;
  background: #fff6db;
  border-radius: 10px;
}

.allPoiBase .poiBox {
  display: none;
  width: 95%;
  margin: 0 auto;
  padding: 30px 0;
}

.allPoiBase .poiBox p {
  font: 20px/1.2 "arial", "微軟正黑體";
  text-align: left;
}

.allPoiBase .poiBox.on {
  display: block;
}

/*Page3-POI*/
.poiBox {
  position: relative;
  display: block;
  text-align: center;
  padding: 1% 0 2%;
}

.poiBox .ph-group-title {
  display: block;
  font-size: 30px;
  padding: 1em 0 0.5em;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #6d45a4;
}

.poiBox .ph-group-title img {
  display: none;
}

.poiBox .ph-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 1% 3%;
}

.poiBox .type-3-normal .ph-group-content {
  width: 23%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin: 10px;
  background: #fff;
  /*display: flex; flex-wrap: wrap; */
  box-shadow: rgb(121 121 121 / 30%) 0px 1px 5px 2px;
  -webkit-box-shadow: rgb(121 121 121 / 30%) 0px 1px 5px 2px;
  transition: 0.3s;
}

.poiBox .type-3-normal .ph-group-content-photo {
  overflow: hidden;
  position: relative;
}

.poiBox .type-3-normal .ph-group-content-photo img {
  width: 100%;
}

.poiBox .type-3-normal .ph-group-content-photo .ph-group-content-tag {
  padding: 8px 5px 5px;
  position: absolute;
  top: 15px;
  left: 0px;
  font: 400 16px/1 "Century Gothic", "微軟正黑體";
  color: #fff;
  background: #22b5ad;
  padding: 5px 12px 5px 6px;
  border-radius: 0 99rem 99rem 0;
}

.poiBox .type-3-normal .ph-group-content-text {
  text-align: left;
  padding: 15px 15px 35px 15px;
  background: #fff;
  /*width: 100%; height: 100%;*/
}

.poiBox .type-3-normal .ph-group-content-text-name {
  color: #744cab;
  font: bold 20px/1.3 "微軟正黑體";
}

.poiBox .type-3-normal .ph-group-content-text-detail {
  color: #757474;
  font: 15px/1.5 "微軟正黑體";
  text-align: left;
  margin: 15px auto 25px;
}

.poiBox .type-3-normal .ph-group-content-text-price {
  position: absolute;
  width: 100%;
  height: auto;
  display: block;
  color: #fff;
  background: #ff4646;
  font: bold 26px/1.4 "Century Gothic", "微軟正黑體";
  text-align: center;
  align-self: end;
  left: 0;
  top: auto;
  bottom: 0;
  padding: 5px;
}

.poiBox .type-3-normal .ph-group-content-text-price span {
  font: 16px/1.4 "Century Gothic", "微軟正黑體";
  color: #fff;
  vertical-align: baseline;
}

.poiBox .type-3-normal .ph-group-content:hover {
  transform: translateY(5px);
}


/*--Page4次選單--*/
.h4menu {
  background: #ffe6b7;
  position: relative;
}

.h4menu ul {
  display: flex;
  justify-content: center;
}

.h4menu ul li {
  color: #7655a3;
  font: bold 20px/2.2 "微軟正黑體";
  margin: 0 15px;
  cursor: pointer;
}

.h4menu.h4menuTop {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
}


/*Page4-商品區*/
.hotSaleWrap {
  width: 95%;
  position: relative;
  max-width: 1400px;
  text-align: center;
  margin: 0px auto 50px;
  padding: 30px 0 30px 0;
  max-width: 1400px;
  display: block;
  /*width: 1500px; height: 747px;*/
}

.hotSaleWrap h4 {
  display: flex;
  font: bold 42px/1.8 "微軟正黑體";
  color: #fff;
  background: url(../images/c26title.png);
  width: 342px;
  text-align: center;
  margin: 0 auto 3%;
  position: relative;
  top: 0px;
  justify-content: center;
  align-items: center;
  /*transform: translateY(-30px);*/
}

.hotSaleWrap.p1 h4::before {
  content: "";
  position: absolute;
  background: url(../images/p1-l-tree.png)top center no-repeat;
  left: -122px;
  width: 120px;
  height: 120px;
  display: block;
}

.hotSaleWrap.p1 h4::after {
  content: "";
  position: absolute;
  background: url(../images/p1-r-bag.png)top center no-repeat;
  right: -122px;
  width: 120px;
  height: 120px;
  display: block;
  top: -20px;
}

.hotSaleWrap.p2 h4::before {
  content: "";
  position: absolute;
  background: url(../images/p2-l-car.png)top center no-repeat;
  left: -122px;
  width: 120px;
  height: 120px;
  display: block;
}

.hotSaleWrap.p2 h4::after {
  content: "";
  position: absolute;
  background: url(../images/p2-r-tree.png)top center no-repeat;
  right: -122px;
  width: 120px;
  height: 120px;
  display: block;
  top: -20px;
}

.hotSaleWrap.p3 h4::before {
  content: "";
  position: absolute;
  background: url(../images/p3-l-camera.png)top center no-repeat;
  left: -122px;
  width: 120px;
  height: 120px;
  display: block;
}

.hotSaleWrap.p3 h4::after {
  content: "";
  position: absolute;
  background: url(../images/p3-r-bag.png)top center no-repeat;
  right: -122px;
  width: 120px;
  height: 120px;
  display: block;
  top: -20px;
}

.hotSaleWrap.p4 h4::before {
  content: "";
  position: absolute;
  background: url(../images/p4-l-airplane.png)top center no-repeat;
  left: -122px;
  width: 120px;
  height: 120px;
  display: block;
}

.hotSaleWrap.p4 h4::after {
  content: "";
  position: absolute;
  background: url(../images/p4-r-airTickets.png)top center no-repeat;
  right: -122px;
  width: 120px;
  height: 120px;
  display: block;
  top: -20px;
}

.hotSaleWrap.p5 h4::before {
  content: "";
  position: absolute;
  background: url(../images/p5-l-coupon.png)top center no-repeat;
  left: -122px;
  width: 120px;
  height: 120px;
  display: block;
}

.hotSaleWrap.p5 h4::after {
  content: "";
  position: absolute;
  background: url(../images/p5-r-food.png)top center no-repeat;
  right: -122px;
  width: 120px;
  height: 120px;
  display: block;
  top: -20px;
}

.hotSaleWrap.p6 h4::before {
  content: "";
  position: absolute;
  background: url(../images/hotel.png)top center no-repeat;
  left: -122px;
  width: 120px;
  height: 120px;
  display: block;
}

.hotSaleWrap.p6 h4::after {
  content: "";
  position: absolute;
  background: url(../images/p6-r-pool.png)top center no-repeat;
  right: -122px;
  width: 120px;
  height: 120px;
  display: block;
  top: -20px;
}

.c26PoiBase {}

.hotSaleWrap .ph-group-title {
  display: none;
  font-size: 30px;
  padding: 1em 0 0.5em;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #fff;
}

.hotSaleWrap .ph-group-title img {
  display: none;
}

.hotSaleWrap .ph-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 1% 0;
}

.hotSaleWrap .ph-group-content {
  width: 23%;
  position: relative;
  overflow: hidden;
  margin: 10px;
  background: #fff;
  box-shadow: rgb(121 121 121 / 30%) 0px 1px 5px 2px;
  -webkit-box-shadow: rgb(121 121 121 / 30%) 0px 1px 5px 2px;
  transition: 0.3s;
}

.hotSaleWrap .ph-group-content-photo {
  overflow: hidden;
  position: relative;
}

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

.hotSaleWrap .ph-group-content-photo .ph-group-content-tag {
  padding: 8px 5px 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  font: 400 16px/1 "Century Gothic", "微軟正黑體";
  color: #fff;
  background: #ff514a;
  padding: 5px 12px 5px 6px;
}

.hotSaleWrap .ph-group-content-text {
  text-align: left;
  padding: 15px 15px 35px 15px;
  background: #fff;
}

.hotSaleWrap .ph-group-content-text-name {
  color: #744cab;
  font: bold 20px/1.3 "微軟正黑體";
}

.hotSaleWrap .ph-group-content-text-detail {
  color: #757474;
  font: 15px/1.5 "微軟正黑體";
  text-align: left;
  margin: 15px auto 25px;
}

.hotSaleWrap .ph-group-content-text-price {
  width: 100%;
  height: auto;
  display: block;
  color: #ff4646;
  font: bold 26px/1.4 "Century Gothic", "微軟正黑體";
  text-align: center;
  align-self: end;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px;
  background: #fff;
}

.hotSaleWrap .ph-group-content-text-price span {
  font: 16px/1.4 "Century Gothic", "微軟正黑體";
  color: #ff4646;
  vertical-align: baseline;
}

.hotSaleWrap .ph-group-content:hover {
  transform: translateY(5px);
}

.hotSaleWrap .slidecontain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto;
}

.hotSaleWrap .slidecontain li.on {
  background: #6c45a1;
}

.hotSaleWrap .slidecontain li.on .anchorLink div {
  color: #FFF;
}

.hotSaleWrap .slidecontain li {
  margin: 0 1%;
  border-radius: 99em;
  padding: 8px 25px;
  border: 2px solid #6c45a1;
  color: #6c45a1;
  transition: 0.2s;
  cursor: pointer;
}

.hotSaleWrap .slidecontain li .anchorLink div {
  font: bold 18px/1.6 "微軟正黑體";
  color: #6c45a1;
}

.hotSaleWrap .slidecontain img {
  display: none;
}

.hotSaleWrap .slidecontain li:hover {
  background: #6c45a1;
}

.hotSaleWrap .slidecontain li:hover .anchorLink div {
  color: #FFF;
}


/*new-onePoi*/
.hotSaleWrap.onePoi .ph-group-title {
  display: none;
}

.hotSaleWrap.onePoi .ph-group-title.on {
  display: block;
}

.hotSaleWrap.onePoi .ph-group {
  display: none;
}

.hotSaleWrap.onePoi .ph-group.on {
  display: flex;
}

.travelMenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto;
}

.travelMenu li.on {
  background: #6c45a1;
  color: #FFF;
}

.travelMenu li {
  margin: 0 1%;
  border-radius: 99em;
  padding: 8px 25px;
  border: 2px solid #6c45a1;
  color: #6c45a1;
  transition: 0.2s;
  cursor: pointer;
  font: bold 18px/1.6 "微軟正黑體";
}

.travelMenu li:hover {
  background: #6c45a1;
  color: #FFF;
}

.hotSaleWrap.alotofPoi .slidecontain {
  display: none;
}

.hotSaleWrap.alotofPoi .ph {
  display: none;
}

.hotSaleWrap.alotofPoi .ph.on {
  display: block;
}







/*-------------------------------RWD-------------------------------*/
@media only screen and (max-width: 1500px) {
  .nav ul a li {
    font: bold 1.5vw/1.4 "微軟正黑體";
  }

  .contentWrap {
    margin: 5% auto 4%;
  }

  /*.c26PoiBase{width: 80%; margin: 0 auto;}*/
}



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

  .prodArea .type-3-normal .ph-group-content,
  .poiBox .type-3-normal .ph-group-content,
  .hotSaleWrap .type-3-normal .ph-group-content {
    width: 30%;
  }
}

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

  header.header h1 .pc {
    display: none;
  }

  header.header h1 img.mobile {
    display: block;
    width: 100%;
  }

  .nav ul.box {
    padding: 1% 0;
  }

  .bankMenu ul {
    padding: 0;
  }

  .h4menu ul {
    padding: 0;
  }

  .nav ul.box a {
    margin: 1% 0.7% 1.2%;
  }

  .nav ul.box a li {
    font-size: 2vw;
  }

  .bankMenu ul a {
    margin: 0 0.5%;
    padding: 1% 0;
  }

  .anchor-menu ul {
    padding: 1% 0;
  }

  .anchor-menu ul a {
    margin: 1% 0.7% 1.2%;
  }

  .anchor-menu ul a li {
    font-size: 2.2vw;
  }

  .contentWrap .allBox .info h3 {
    font-size: 34px;
  }

  ul.menuBox {
    width: 70%;
  }

  ul.menuBox li {
    padding: 0.5em 1em;
    width: 25%;
  }
}


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

  .prodArea .type-3-normal .ph-group-content,
  .poiBox .type-3-normal .ph-group-content,
  .hotSaleWrap .type-3-normal .ph-group-content {
    width: 45%;
  }

  ul.menuBox {
    width: 85%;
  }

  ul.menuBox li br {
    display: block;
  }
}


@media only screen and (max-width: 768px) {
  .nav ul.box {
    padding: 2% 1%;
    overflow-x: scroll;
    white-space: nowrap;
    justify-content: flex-start;
  }

  .nav ul.box a {
    margin: 1% 1%;
  }

  .nav ul.box a li {
    font-size: 3.2vw;
  }

  .h4menu ul {
    padding: 0;
  }

  .h4menu ul li,
  .bankMenu ul a li {
    font-size: 3.2vw;
    line-height: 2;
  }

  .anchor-menu ul a li {
    font-size: 3vw;
  }

  .bankMenu ul {
    padding: 0;
    overflow-x: unset;
    justify-content: center;
  }

  .bankMenu ul a {
    margin: 0;
  }

  .ppBg {
    padding-top: 6%;
  }

  .contentWrap {
    margin: 9% auto 7%;
  }

  .contentWrap .allBox .picBox {
    width: 100%;
    padding-bottom: 3%;
  }

  .contentWrap .allBox .info {
    width: 100%;
  }

  .contentWrap .allBox .info h3 {
    font-size: 2em;
  }

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

  .ph-group,
  .poiBox .ph-group,
  .hotSaleWrap .ph-group {
    flex-wrap: nowrap;
    overflow-x: scroll;
    flex-grow: 1;
    align-items: stretch;
    justify-content: flex-start;
    padding: 2% 3% 5%;
  }

  .prodArea .type-3-normal .ph-group-content,
  .poiBox .type-3-normal .ph-group-content,
  .hotSaleWrap .type-3-normal .ph-group-content {
    width: 70%;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-shrink: 0;
    flex-grow: 1;
  }
}



@media only screen and (max-width: 735px) {
  .h4menu ul {
    justify-content: flex-start;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overflow-y: hidden;
  }

  .hotSaleWrap .slidecontain li {
    padding: 4px 10px;
  }

  .travelMenu li {
    margin: 1% 1%;
    font: bold 16px/1.4 "微軟正黑體";
    padding: 5px 20px;
  }
}


@media only screen and (max-width: 600px) {
  ul.menuBox li {
    font-size: 5vw;
    padding: 1em 0;
  }
}


@media only screen and (max-width: 550px) {
  .nav ul.box a li {
    font-size: 3.5vw;
    margin: 0;
    padding: 5px 12px;
  }

  .bankMenu ul a li {
    font-size: 3.2vw;
    padding: 0 12px;
  }

  /*.anchor-menu  ul a li{font-size: 3.2vw; margin: 0;}*/

  ul.menuBox li {
    padding: 0.8em 0;
  }

  .poiBox .ph-group-title {
    font-size: 6vw;
    padding: 0.5em 0;
  }

  .hotSaleWrap h4 {
    font: bold 28px/1.8 "微軟正黑體";
    width: 236px;
    background-size: 100%;
  }

  .hotSaleWrap.p1 h4::before {
    width: 35%;
    background-size: 100%;
    left: -85px;
    height: 80px;
  }

  .hotSaleWrap.p1 h4::after {
    width: 35%;
    background-size: 100%;
    right: -90px;
    height: 80px;
  }

  .hotSaleWrap.p2 h4::before {
    width: 30%;
    background-size: 100%;
    left: -80px;
    height: 60px;
  }

  .hotSaleWrap.p2 h4::after {
    width: 32%;
    background-size: 100%;
    right: -75px;
    height: 70px;
  }

  .hotSaleWrap.p3 h4::before {
    width: 35%;
    background-size: 100%;
    left: -85px;
    height: 80px;
  }

  .hotSaleWrap.p3 h4::after {
    width: 35%;
    background-size: 100%;
    right: -90px;
    height: 80px;
  }

  .hotSaleWrap.p4 h4::before {
    width: 35%;
    background-size: 100%;
    left: -90px;
    height: 80px;
  }

  .hotSaleWrap.p4 h4::after {
    width: 35%;
    background-size: 100%;
    right: -85px;
    height: 80px;
  }

  .hotSaleWrap.p5 h4::before {
    width: 35%;
    background-size: 100%;
    left: -85px;
    height: 80px;
  }

  .hotSaleWrap.p5 h4::after {
    width: 35%;
    background-size: 100%;
    right: -90px;
    height: 80px;
  }

  .hotSaleWrap.p6 h4::before {
    width: 35%;
    background-size: 100%;
    left: -85px;
    height: 80px;
  }

  .hotSaleWrap.p6 h4::after {
    width: 35%;
    background-size: 100%;
    right: -90px;
    height: 80px;
  }

  .hotSaleWrap .slidecontain li .anchorLink div {
    font: bold 16px/1.4 "arial", "微軟正黑體";
  }
}

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

@media only screen and (max-width: 330px) {
  .anchor-menu ul {
    padding: 2% 1%;
    overflow-x: scroll;
    white-space: nowrap;
    justify-content: flex-start;
  }

  .anchor-menu ul a {
    margin: 1% 1%;
  }
}




/*poi tag css 開始*/
.poiTag .ph-group-content {
  padding-bottom: 30px;
  background: white;
}

.poiTagBase {
  margin: 10px 0;
}

.poiTagBase>span {
  display: inline-block;
  margin-right: 5px;
  padding: 5px 7px;
  font: 13px/1 "微軟正黑體";
  letter-spacing: 2px;
  color: grey;
  border: 1px solid grey;
  border-radius: 99em;
}

span.poiTagBase-category {
  color: chocolate;
  border-color: chocolate;
}

.poiTagBase-season {}

span.poiTagBase-season1 {
  color: palevioletred;
  border-color: palevioletred;
}

span.poiTagBase-season2 {
  color: darkgoldenrod;
  border-color: darkgoldenrod;
}

span.poiTagBase-season3 {
  color: crimson;
  border-color: crimson;
}

span.poiTagBase-season4 {
  color: cornflowerblue;
  border-color: cornflowerblue;
}

/*poi tag css 結束*/























:root {
  --padding: 35px;
  --word-padding: 10px;
  --font-l: 36px;
  --font-ml: 30px;
  --font-m: 24px;
  --font-r: 18px;
  --font-s: 15px;
}

@media screen and (max-width:1220px) {
  :root {
    --padding: 5%;
    --font-l: 24px;
    --font-ml: 20px;
    --font-m: 18px;
    --font-r: 15px;
    --font-s: 12px;
  }
}









.wrapper {
  position: relative;
  width: 94%;
  font-size: var(--font-r);
  margin: 0 auto;
  padding: 70px 0;
}

@media screen and (max-width:1220px) {
  .wrapper {
    padding: 10% 0;
  }
}

/*.wrapper-box*/
.wrapper-box {
  /* border: solid 2px #355c85; */
  max-width: 1200px;
  padding: 0 70px;
  margin: 70px auto;
}

@media screen and (max-width:1220px) {
  .wrapper-box {
    padding: 0 3%;
    margin: 10% auto;
  }
}





/*coupon*/
.coupon {
  overflow-x: hidden;
}

.coupon b.title{
  font-size: var(--font-ml);
  line-height: 1.2;
}

.couponticket {
  position: relative;
  background: #ffc859;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--word-padding);
  margin: var(--padding) 0;
  font-size: var(--font-l);
  font-weight: 700;
  line-height: 1;
}

.couponticket:before {
  content: '';
  width: 1.5em;
  height: 1.5em;
  background: white;
  border-radius: 5em;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-65%, -50%);
}

.couponticket:after {
  content: '';
  width: 1.5em;
  height: 1.5em;
  background: white;
  border-radius: 5em;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(65%, -50%);
}

.coupon-d {
  width: auto;
  position: absolute;
}

.coupon-d-1 {
  left: 27px;
  top: 13px;
}

.coupon-d-2 {
  right: 22px;
  bottom: 7px;
}

.couponticket section {
  padding: 0 var(--padding);
  text-align: center;
}

.couponticket-code {
  width: 41%;
  position: relative;
}

.couponticket-price {
  width: 55%;
  border-left: dotted 5px white;
}

.couponticket-code strong {
  font-size: 28px;
}

.couponticket-code p {
  font-size: var(--font-m);
  font-weight: 700;
  background: white;
  border: solid 2px #355c85;
  border-radius: 10px;
  max-width: 13.5em;
  margin: 0.5em auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.couponticket-code p span {
  width: 5em;
  background: #355c85;
  color: white;
  padding: 0.2em 0;
}

.couponticket-code p b {
  width: calc(100% - 5em);
  font-weight: 900;
  color: #355c85;
  letter-spacing: 0.1em;
}

.couponticket-price p {
  position: relative;
  background: white;
  font-size: 56px;
  color: #ff1500;
  font-weight: 900;
  padding-bottom: 0.2em;
}

.couponticket-price p b {
  font-size: 110px;
  display: inline-block;
  vertical-align: sub;
  letter-spacing: -0.02em;
}

.couponticket-price p small {
  position: absolute;
  left: 50%;
  top: 1em;
  transform: translateX(-11.5em);
  font-size: var(--font-r);
  color: black;
  font-weight: 400;
  letter-spacing: 0.2em;
}

@media screen and (max-width:1220px) {
  .couponticket-price p {
    font-size: 36px;
  }

  .couponticket-price p b {
    font-size: 70px;
  }

  .couponticket-price p small {
    top: 0.5em;
    transform: translateX(-8.7em);
  }
}

@media screen and (max-width:960px) {
  .coupon-d-1 {
    left: 3vw;
    top: 2vw;
    width: 4vw;
  }

  .coupon-d-2 {
    right: 2vw;
    bottom: 1vw;
    width: 6vw;
  }
}

@media screen and (max-width:768px) {
  .couponticket-code {
    width: 100%;
  }

  .couponticket-price {
    width: 100%;
    border-left: none;
    border-top: dotted 4px white;
  }

  .couponticket section.couponticket-price {
    margin-top: var(--word-padding);
    padding-top: var(--word-padding);
  }

  .coupon-d-1 {
    width: 8vw;
  }

  .coupon-d-2 {
    width: 10vw;
  }
}

@media screen and (max-width:480px) {
  .couponticket-price p {
    font-size: 24px;
  }

  .couponticket-price p b {
    font-size: 54px;
  }

  .couponticket-price p small {
    top: 0.3em;
    transform: translateX(-6.5em);
  }
}







/*step*/
.step-title {
  text-align: center;
  font-size: var(--font-m);
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom: solid 1px;
  margin-bottom: 0.5em;
}

.step-title span {
  display: inline-block;
  background: white;
  transform: translateY(50%);
  padding: 0 1em;
}

.step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-r);
  letter-spacing: 0.1em;
  padding: var(--padding) 0;
}

.step img {
  width: 100%;
}

.step article {
  max-width: 192px;
  align-self: flex-start;
}

.step article img {
  display: block;
}

.step article p {
  background: #355c85;
  border-radius: 0 0 10px 10px;
  text-align: center;
  color: white;
  padding: 0.5em 0 1.5em;
}

.step article p span {
  color: #ffe566;
}

.step section {
  text-align: center;
}

.step section img {
  max-width: 37px;
}

@media screen and (max-width:960px) {
  .step {
    flex-wrap: wrap;
    justify-content: center;
  }

  .step article {
    width: 45%;
  }

  .step section {
    width: 5%;
    margin: 2.5%;
  }

  .step section.break {
    width: 100%;
  }

  .step section.break img {
    display: none;
  }
}

@media screen and (max-width:360px) {
  .step article {
    width: 48%;
  }

  .step section {
    width: 4%;
    margin: 2% 0;
  }

  .step section img {
    display: none;
  }
}