.pc_show {
  display: block;
}
.mb_show {
  display: none;
}
@media (max-width: 767px) {
  .pc_show {
    display: none;
  }
  .mb_show {
    display: block;
  }
}

.wrapper {
  background: url(../../images/bg_01.jpg) top center no-repeat #311e17;
  text-align: center;
}
@media (max-width: 767px) {
  .wrapper {
    background: #311e17;
  }
}
.main {
  max-width: 1240px;
  margin: 0 auto;
}

.kv {
  position: relative;
  height: 770px;
  pointer-events: auto;
}
.kv > div {
  position: absolute;
}
.kv_title {
  top: 230px;
  left: 360px;
}
.kv_w2 {
  top: 470px;
}
@media (max-width: 767px) {
  .kv {
    background: url(../../images/bg_m_01.jpg) top center no-repeat #311e17;
    background-size: 100% auto;
    height: 177vw;
    pointer-events: auto;
  }
  .kv > div {
    position: absolute;
  }
  .kv_title {
    top: 0px;
    left: 0px;
  }
  .kv_w1 {
    top: 79vw;
    left: 0px;
    width: 50%;
  }
  .kv_w2 {
    top: 79vw;
    left: 50vw;
    width: 50%;
  }
}

/* 跑馬燈 */
.marquee {
  width: 100%;
  max-width: 1240px;
  margin: auto;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll 28s linear infinite;
}

.marquee img {
  width: 1100px; /* 桌機穩定視覺 */
  margin-right: 24px;
  height: auto;
}

/* 手機 RWD */
@media (max-width: 767px) {
  .marquee {
    max-width: 750px;
  }

  .marquee img {
    width: 700px;
    margin-right: 4vw;
  }

  .marquee-track {
    animation-duration: 36s; /* 手機慢一點比較不暈 */
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* 基礎樣式：預設給桌機 */
.sticker-grid {
  display: grid;
  max-width: 1240px;
  margin: 0 auto;
  gap: 0px;
  grid-template-columns: repeat(4, 1fr);
}
.sticker-grid2 {
  grid-template-columns: repeat(2, 1fr);
}
.sticker-grid5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-item {
  padding: 0px;
}
.grid-item img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  transform: scale(1);
  transition: all 0.5s ease-out;
}
.grid-item:hover img {
  transform: scale(1.05, 1.05);
}
.full-row {
  grid-column: 1 / -1;
  /* "1 / -1" 代表從第一格寬度跨越到最後一格，不管你原本是幾欄都會自動滿版 */
}
.full-row:hover img {
  transform: none;
}
/* 斷點：當寬度小於 767px 時 (針對手機) */
@media (max-width: 767px) {
  .sticker-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
  }
}

.month {
  margin: 0 40px;
  padding: 20px;
  background: #fffcdb;
}
.month > .sticker-grid {
  gap: 10px;
}
@media (max-width: 767px) {
  .month {
    margin: 0 8px;
    padding: 10px;
  }
  .month > .sticker-grid {
    gap: 5px;
  }
}
.bank {
  clear: both;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 50px;
}

.imgbox {
  padding: 0;
  margin: 10px auto;
  overflow: hidden;
}
.imgbox img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .price {
    color: #ffc329;
  }
}
@media (max-width: 767px) {
  .imgbox {
    padding: 0;
  }
  .pd .imgbox {
    height: calc(100vw / 2 - 8vw);
    margin: 2vw;
  }
  .pd .imgbox img {
    width: auto;
  }
  .price {
    color: #ffc329;
  }
}
