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

* {
  box-sizing: border-box;
}

.headerBG {
  background: url(../images/hero-pc.jpg) #fff1cb top center no-repeat;
}

.hero {
  height: 675px;
}

.hero h1 {
  display: none;
}

.gobalManu {
  display: flex;
  justify-content: center;
}

.gobalManu a {
  position: relative;
  display: inline-block;
  padding: 18px 130px 18px 50px;
  font: 700 38px/1 "Noto Sans TC";
  color: white;
  letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.75);
  background: #00adaf;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
  transition: .5s;
}

.gobalManu a:hover {
  transform: translateY(-10px);
}

.gobalManu a::after {
  content: "";
  position: absolute;
  top: -30px;
  right: 20px;
  width: 84px;
  height: 116px;
  background: url(../images/btn-1.png) center center no-repeat;
}

.gobalManu a:last-child::after {
  content: "";
  position: absolute;
  top: -30px;
  right: 20px;
  width: 84px;
  height: 116px;
  background: url(../images/btn-2.png) center center no-repeat;
}

.gobalManu a:first-child {
  border-radius: 99em 0 0 99em;
}

.gobalManu a:last-child {
  border-radius: 0 99em 99em 0;
  background: #fe3667;
}


.nightMarket {
  padding: 50px 0;
}

.nightMarket h2 {
  margin: 0 auto 50px auto;
  width: 80%;
  max-width: 394px;
}

.nightMarket h2 img {
  width: 100%;
}

.poi .ph-menu {
  display: none;
}

.poi .ph-group-title {
  display: block;
  width: 100%;
  font: 900 45px/1.5 "Noto Sans TC";
  color: #fe3667;
  text-align: center;
}

.poi .ph-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin: 0 auto 60px auto;
  width: 90%;
  max-width: 1400px;
}

.poi .ph-group-content {
  position: relative;
  flex-shrink: 0;
  /* padding-bottom: 80px; */
  width: 300px;
  background: white;
}

.poi .ph-group-content::after {
  /* content: "立刻拜讀"; */
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 10px 0;
  width: calc(100% - 20px);
  font: 500 28px/1 "Noto Sans TC";
  text-align: center;
  color: white;
  border-radius: 99em;
  background: #00adaf;
}

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

.poi .ph-group-content-text {
  position: relative;
  padding: 15px;
  text-align: center;
}

.poi .ph-group-content-text-name {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  padding: 0 0 0 10px;
  width: auto;
  font: 500 25px/1.5 "Noto Sans TC";
  color: white;
  border-radius: 99em;
  background: #fe3667;
  border: 2px solid #fe3667;
}

.poi .ph-group-content-text-name span {
  display: inline-block;
  padding: 0 10px 0 0;
  color: #fe3667;
  font-weight: 900;
  border-radius: 0 99em 99em 0;
  background: white;
}

.poi .ph-group-content-text-sale {
  display: none;
  /* position: absolute;
top: 0;
left: 50%;
display: inline-block;
padding: 10px 10px;
font: 500 18px/1 "Noto Sans TC";
color: white;
background: #fe3667; */
}

.poi .ph-group-content-text-detail {
  padding-top: 15px;
  font: 500 15px/1.5 "Noto Sans TC";
  color: black;
  text-align: left;
}

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

.poi.pinkArea {
  background: url(../images/pink-pc.jpg) #ffa8bd top center no-repeat;
}

.poi.pinkArea {
  padding: 60px 0;
}

.poi.pinkArea h2 {
  margin: 0 auto 50px auto;
  width: 80%;
  max-width: 394px;
}

.poi.pinkArea h2 img {
  width: 100%;
}

.poi.pinkArea .ph-group-title {
  color: white;
}

.nightMarket-btn,
.pinkArea-btn {
  display: block;
  margin: 0 auto;
  padding: 10px 0;
  width: 95%;
  max-width: 300px;
  font: 500 25px/1.5 "Noto Sans TC";
  color: white;
  text-align: center;
  border-radius: 99em;
  background: #fe3667;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
}

.pinkArea-btn {

  background: #00adaf;

}

@media screen and (max-width:820px) {
  .headerBG {
    background: #fff1cb;
  }

  .hero {
    height: auto;
  }

  .hero h1 {
    display: block;
    line-height: 0;
  }

  .hero h1 img {
    width: 100%;
  }

  .gobalManu a {
    padding: 2% 5%;
    font: 500 24px/1 "Noto Sans TC";
    letter-spacing: 1px;
    width: 50%;
    text-align: center;


  }

  .gobalManu a:first-child,
  .gobalManu a:last-child {
    border-radius: 0;
  }

  .gobalManu a::after {
    display: none;
  }
}