@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: 300 15px/1.5 "Noto Sans TC","Noto Sans TC", "微軟正黑體";*******/
/************通用 CSS 開始********************/
/************通用 CSS 開始********************/
/************通用 CSS 開始********************/
/************通用 CSS 開始********************/
/************通用 CSS 開始********************/
:root{
  --padding: 100px;
  --padding-s: 50px;
}
@media screen and (max-width:820px) {
  :root{
    --padding: 10vw;
    --padding-s: 5vw;
  }
}


body { background-color: #7a348d; }



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

header.header {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 774px;
  background: url(../images/header-pc.jpg?v=0530) top center no-repeat;
}

header.header h1 {
  display: none;
}

.jcb-activity{
  background: white;
  border:solid 7px #631e77;
  border-radius: 15px;
  text-align: center;
  max-width: 1400px;
  margin:0 auto;
  font-size: 25px;
  color: #7a348d;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.5em;
}

.jcb-activity b{
  color: #f89422;
}

.jcb-activity small{
  display: block;
  font-size: 15px;
}

.localMenu {
  position: sticky;
  top: -1px;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
  margin:15px 0;
  z-index: 50;
  background: #7a348d;
}

.localMenu a {
  display: flex;
    justify-content: center;
    align-items: center;
  padding: 0.5em 1.5em;
  font: 600 25px/1.2 "Noto Sans TC", "Noto Sans TC", "微軟正黑體";
  letter-spacing: 0.1em;
  color: #7a348d;
  text-decoration: none;
  background: #fcd35f;
  border-radius: 20px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
  transition: .5s;
}

.localMenu a:hover {
  transform: translateY(-5px);
  filter: brightness(1.2);
}

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

@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%;
  }

  .jcb-activity{
    font-size: 18px;
  }

  .jcb-activity small{
    font-size: 12px;
  }

  .localMenu {
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 5px;
  }

  .localMenu a {
    width: calc(33.333333% - 10px);
    text-align: center;
        border-radius: 5px;
        min-height: 2em;
  }
}

@media screen and (max-width:500px) {
  .localMenu a {
    padding: 0 1%;
    font-size: 16px;
  }
}











.title {
  margin: 0 auto;
  max-width: 1400px;
  width: 95%;
}
.title.title-first{
  margin-top: var(--padding);
}

.title_img {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
      align-items: center;
  gap:20px;
}

.title_img img {
  width: auto;
}

@media screen and (max-width:820px) {
  .title_img {
    gap:10px;
  }
  .title_img img {
    width: 100%;
  }
}





.item {
  padding: var(--padding-s) 0;
}

.item h2 {
  position: relative;
  background:url(../images/title-bg.png?v=0530) center top no-repeat;
  max-width: 1400px;
  height: 90px;
  margin: 0 auto;
  text-align: center;
  font: 700 30px/1 "Noto Sans TC", "Noto Sans TC", "微軟正黑體";
    color: #7a348d;
    letter-spacing: 0.2em;
    padding-top: 40px;
}

.item h3{
  font-size: 60px;
  font-weight: 600;
  color: white;
  text-align: center;
  padding-bottom: 0.5em;
  letter-spacing: 0.1em;
}

.item p{
  font-size: 18px;
  color: white;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin-bottom: 25px;
}


.darkWrap{
   background-color: #421c4d;
   padding:var(--padding) 0;
       margin: var(--padding) 0;
}


@media screen and (max-width:820px) {
  .item h3{
    font-size: 30px;
  }
}










.jcb-info{
  display: flex;
  justify-content: center;
  gap:10px;
  padding: 25px 0;
  width: 95%;
  margin: 0 auto;
}

.jcb-info img{
  width: 100%;
}

.jcb-info a{
  display: block;
  transition: all 0.2s;
}
.jcb-info a:hover{
  transform: translateY(3%);
}

@media screen and (max-width:820px) {
  .jcb-info{
    flex-wrap: wrap;
  }
  .jcb-info span:nth-child(3){
    width: 100%;
  }
}


@media screen and (max-width:360px) {
  .jcb-info span:nth-child(1){
    width: calc(67% - 10px);
  }
  .jcb-info span:nth-child(2){
    width: 33%;
  }
}





.ex{
  width: 95%;
  max-width: 1400px;
  margin:0 auto;
  padding: 25px 0;
  color: white;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.ex li{
      list-style-type: disc;
    padding: 0.5em 0;
}

.ex li b{
  color: #fcd35f;
}

@media screen and (max-width:820px) {
  .ex{
    font-size: 14px;
  }
}






.poi {
  
}

.ph {
  margin: 0 auto;
  width: 95%;
  max-width: 1400px;
}


.ph .ph-title {
  margin-bottom: 15px;
  font: 700 30px/1 "Noto Sans TC";
  color: #1d3245;
  text-align: center;
  letter-spacing: 2px;
}

.ph-menu {
  background: #1d3245;
}

.ph-menu img {
  display: none;
}

.ph-menu ul {
  display: flex;
  list-style: none;
}

.ph-menu ul li {
  display: inline-block;
}

.ph-menu ul li a {
  display: block;
  padding: 10px 40px 10px 20px;
  font: 500 20px/1.5 "Noto Sans TC";
  color: white;

}

.ph-menu ul li:hover a,
.ph-menu ul li.on a {

  color: #1d3245;
  background: #fdd35f;
}

.ph-menu ul li a div {
  position: relative;
}

.ph-menu ul li a div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1px;
  height: 1px;
  border-top: 12px solid white;
  border-left: 12px solid white;
  border-bottom: 12px solid transparent;
  border-right: 12px solid transparent;
  transform: scale(.4) rotate(225deg);
}

.ph-menu ul li.on a div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 1px;
  height: 1px;
  border-top: 12px solid #1d3245;
  border-left: 12px solid #1d3245;
  border-bottom: 12px solid transparent;
  border-right: 12px solid transparent;
  transform: scale(.4) rotate(225deg);
}

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

.ph-group {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px;
  background: white;

}

.ph-group.on {
  display: flex;

}

.ph-group-content {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  margin: 0 20px 20px 20px;
  padding-bottom: 60px;
  width: calc(25% - 40px);
  background: white;
  box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
}

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

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

.ph-group-content-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  font: 500 20px/1.5 "Noto Sans TC";
  color: white;
  text-shadow: 0 0 10px black;
}

.ph-group-content-text {

  padding: 10px;
}

.ph-group-content-text-name {
  display: block;
  margin-bottom: 10px;
  font: 500 20px/1.5 "Noto Sans TC";
  color: #5c99a4;
}

.ph-group-content-text-sale {
  margin-bottom: 10px;
  padding: 0 5px;
  font: 500 17px/1.5 "Noto Sans TC";
  color: white;
  background: #d34c1d;
}

.ph-group-content-text-sale a {
  color: white;
}

.ph-group-content-text-detail {
  font: 300 17px/1.7 "Noto Sans TC";
  color: black;
}

.ph-group-content-text-detail a {
  color: black;
}

.ph-group-content-text-price {
  position: absolute;
  bottom: 10px;
  left: 0;
  display: block;
  width: 100%;
  font: 500 30px/1.5 "Noto Sans TC";
  color: #d34c1d;
  text-align: center;
}

.ph-group-content-text-price span {
  font-size: 0.5em;
}

@media screen and (max-width:1024px) {
  .ph-group-content {
    margin: 0 10px 20px 10px;
    width: calc(33% - 20px);
  }
}

@media screen and (max-width:768px) {
  .ph-group-content {
    margin: 0 10px 20px 10px;
    width: calc(50% - 20px);
  }
}

@media screen and (max-width:500px) {
  .poi {
    
  }

  .ph-group {
    padding: 10% 3%;
    box-shadow: none;
  }

  .ph-menu ul {
    overflow-x: scroll;
  }

  .ph-menu ul li {
    flex-shrink: 0;
  }

  .ph-menu ul li a {
    padding: 5px 25px 5px 10px;
    font-size: 17px;
  }

  .ph-group-content {
    margin: 0 0px 50px 0px;
    width: 100%;
  }
}





.item table {

  margin: 0 auto;
  width: 95%;
  max-width: 1400px;
}

.item table tr {

  width: 100%;
}

.item table td {
  padding: 5px;
  font: 300 15px/1.4 "Noto Sans TC", "Noto Sans TC";
  color: white;
  letter-spacing: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.item table tr td:nth-child(1),
.item table tr td:nth-child(2) {
  text-align: center;
}


.item table .trTitle td {
  font: 500 20px/1.4 "Noto Sans TC", "Noto Sans TC";
  color: #ffa344;
  text-align: center;
  letter-spacing: 2px;
  background: #1d3245;
}


.stickbtn {position: fixed;right: 2%;bottom: 5%;z-index: 99;}
.stickbtn img{max-width: 153px;width: 100%;}
.stickbtn-mobile {display: none;}


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

.stickbtn{width: 100%;bottom: 0;right: 0%;}
.stickbtn img{display: none;}
.stickbtn-mobile{display: inline-flex;flex-wrap: nowrap;padding: 5px;background: #ffee78;width: 100%;justify-content: center;}
.stickbtn-mobile b {font: 500 16px/1.4 "Noto Sans TC", "Noto Sans TC";color: #FFF;border-radius: 20px;background: #7a348d;padding: 5px 10px;}
.stickbtn-mobile p {font: 700 18px/1 "Noto Sans TC", "Noto Sans TC";color:#ed4a18;padding: 6px 10px;}
}


.superSale * {vertical-align: top;}
.superSale{background: #ff5a28;border-radius: 20px;width: 100%;margin: 0 auto;max-width: 1400px;margin: 50px auto;display:flex;padding: 20px;flex-wrap: nowrap;justify-content: center;}
.superSale b {font: 700 44px/1.4 "Noto Sans TC", "Noto Sans TC";color: #fff;text-align: center;width: 20%;align-self: center;}
.superSale p{font: 600 22px/1.6 "Noto Sans TC", "Noto Sans TC";color: #ed4a18;text-align: center; background:#fff;width: 70%;flex-grow: 1;padding: 10px 20px;}
.superSale p span{background: #fff6a2;padding:  0 5px;}

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

  .superSale{flex-wrap: wrap;width: 95%;}
  .superSale b {width: 100%;font: 700 36px/1.4 "Noto Sans TC", "Noto Sans TC";}
  .superSale p{width: 100%;font: 600 18px/1.6 "Noto Sans TC", "Noto Sans TC";margin: 10px auto;flex-grow: 0;}
  }


.item .saleText{background: #FFF;transform: translateY(-1px);width: 100%;max-width: 1400px;margin: 0 auto;padding: 5px;} 
.item .saleText p b{color: #fff;font: 700 22px/1.4 "Noto Sans TC", "Noto Sans TC";display: inline-block;background: #ce2020;border-radius: 20px;padding: 5px 10px;margin: 0 5px;letter-spacing: 0;}
.item .saleText p{color: #ce2020;font: 600 22px/1.6 "Noto Sans TC", "Noto Sans TC";margin-bottom:0;display: inline-block;}
.item .saleText p span{background: #fff6a2;padding:  0 5px;}

@media screen and (max-width:800px) {
.item .saleText p b{font: 700 18px/1.4 "Noto Sans TC", "Noto Sans TC";}
.item .saleText p{font: 600 18px/1.4 "Noto Sans TC", "Noto Sans TC";}
}