@charset "UTF-8";
html {
  background: url("../images/bg_0.jpg") top 300px center repeat-y, url(../images/bg_blue.png), #3262a1;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* ------------------  攻略  ------------------ */
.promotion_box {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
}
.promotion_box ul {
  margin: 0 auto;
  padding: 20px 0;
  width: 1090px;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 15px;
}

@media screen and (max-width: 991px) {
  .promotion_box {
    width: 100vw;
  }
  .promotion_box ul {
    width: 100vw;
    gap: 2vw;
  }
  .promotion_box ul li,
  .promotion_box ul img {
    width: 48vw;
  }
}
/* ------------------ 區塊背景 ------------------ */
.block0 {
  background: url(../images/bg_green.png);
  padding: 20px 0 30px;
}

.blk_body {
  background: url(../images/bg_1200.png) top center repeat;
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 12px 0;
}

.blk_body::after {
  background: url(../images/bg1200_after.png) top center no-repeat;
  height: 20px;
  position: relative;
  content: "";
  display: block;
  margin: 0px 0 0px;
  top: 20px;
}

/* ------------------ title ------------------ */
.blk_head {
  background: url(../images/title_bottom.png) bottom center no-repeat, url(../images/title_bg.png) top center no-repeat;
  height: -moz-fit-content;
  height: fit-content;
  max-width: 1200px;
  padding: 110px 50px 75px;
  display: flex;
  justify-content: center;
  align-items: end;
  margin: 10px auto 0;
}

.btt {
  color: #00333a;
  font-size: 42px;
  padding: 15px 30px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  font-family: "Noto Serif TC", serif;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
}

.btt.center_alignment {
  align-items: center;
}

a.more {
  background: #eaeb92;
  box-shadow: #00333a 3px 3px 0;
  border-radius: 100px;
  border: 2px solid #00333a;
  font-size: 24px;
  font-weight: 900;
  font-family: "Noto Serif TC", serif;
  color: #00333a;
  padding: 8px 15px;
  margin: 0 15px 20px;
  transition: 0.5s all;
}
a.more:hover {
  box-shadow: #00333a 0 0 0;
}

@media screen and (max-width: 991px) {
  .blk_head {
    background: url(../images/title_bg.png) top center no-repeat;
    height: -moz-fit-content;
    height: fit-content;
    margin-bottom: -3vw;
    padding: 20vw 2vw 8vw;
    background-size: 200%;
    justify-content: center;
    align-items: center;
  }
  .btt {
    padding: 2vw 2vw 1vw;
    font-size: 6.8vw;
    align-items: center;
    letter-spacing: -1px;
  }
  a.more {
    font-size: 5vw;
    padding: 1.5vw 4vw;
    display: inline-block;
    margin: 2vw auto 0vw;
    text-align: center;
  }
  .block2 .blk_head,
  .block3 .blk_head,
  .block4 .blk_head,
  .block5 .blk_head,
  .block6 .blk_head {
    flex-direction: column;
  }
}
/* ------------------ 改色 ------------------ */
.half ul,
.recommend_2p li,
.recommend {
  background: url(../images/bg_orange.png);
}

.collect_5x6 .s-row h4,
.collect_5x6 .special,
.toptitle .font h4,
.keywordC .round_5p .font,
.hightlight_5p .font h4,
.special_5p_1 .hightlight_5p ul li h4,
.hightlight .font h4,
.triple .font h4 {
  background: url(../images/bg_green.png);
}

.quotes li:nth-child(odd) {
  background: url(../images/bg_blue.png);
}

.quotes li:nth-child(even) {
  background: url(../images/bg_green.png);
}

/* ------------------ 版型調整 ------------------ */
商品圖破版修正 .hightlight_5p img,
.slick-slide img,
.toptitle img,
.hightlight img {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

/* ------------------ kv ------------------ */
.kv_pc {
  position: relative;
}
.kv_pc .kv_items {
  position: absolute;
}
.kv_pc .kv_bg {
  width: 100%;
}
.kv_pc .kv_title1 {
  top: 19.625%;
  left: 28.90625%;
  width: 41.40625%;
  animation: type-in 0.15s steps(1) 0.3s forwards;
}
.kv_pc .kv_title2 {
  top: 19.625%;
  left: 28.90625%;
  width: 41.40625%;
  animation: type-in 0.15s steps(1) 0.5s forwards;
}
.kv_pc .kv_title3 {
  top: 19.625%;
  left: 28.90625%;
  width: 41.40625%;
  animation: type-in 0.15s steps(1) 0.7s forwards;
}
.kv_pc .kv_title4 {
  top: 19.625%;
  left: 28.90625%;
  width: 41.40625%;
  animation: type-in 0.15s steps(1) 0.9s forwards;
}
.kv_pc .kv_title5 {
  top: 19.625%;
  left: 28.90625%;
  width: 41.40625%;
  animation: loop-type-plus 3s steps(1) 0.9s infinite;
}
.kv_pc .kv_title6 {
  top: 19.625%;
  left: 28.90625%;
  width: 41.40625%;
  animation: loop-type-plus 3s steps(1) 1.1s infinite;
}

@keyframes type-in {
  0% {
    opacity: 0;
    transform: scale(1.2); /* 敲擊前稍微放大 */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* 敲下歸位 */
  }
}
@keyframes loop-type-plus {
  0% {
    opacity: 1;
    transform: scale(1.15);
  }
  5% {
    opacity: 1;
    transform: scale(1.05); /* 敲下「+」 */
  }
  80% {
    opacity: 1; /* 保持顯示至 80% 時間點 */
  }
  85%, 100% {
    opacity: 0; /* 倒數時刪除「+」，準備開始下一輪 */
  }
}
/*# sourceMappingURL=style.css.map */