@charset "UTF-8";
/*KV*/
@media screen and (max-width: 991px) {
  .kv_pc {
    display: block;
  }
}

.kv_pc .member {
    display: block;
    position: absolute;
    width: 35%;
    top: 73%;
    left: 45%;
}
@media screen and (max-width: 991px) {
    .kv_pc .member {
        width: 75%;
        top: 85%;
        left: 12.5%;
    }
  }

.kv_pc .member {
  -webkit-animation: pulse 1s infinite;
          animation: pulse 1s infinite;
}


/* ------------------ BG ------------------ */
html {
    background-color: #158b46;
    background-image: url("../images/side_deco.png");
    background-position: bottom center;
    background-repeat: repeat-y;
    background-size: 100% auto;
}

body {
    background: none;   /* 避免跟 html 的背景重複套用 */
}



/* ------------------ 主體區塊 ------------------ */
.blk_body {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto 100px;
    padding: 12px 0;
    position: relative;
    background-color: #fffdea;   /* ← 換成接近 blk_bg.jpg 的顏色 */
    background-image: url("../images/blk_bg.jpg");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 100% auto;
}

/* 底部裝飾 */
.blk_body::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    aspect-ratio: 1240 / 36;
    margin-top: -1px;            /* 往上重疊 1px,蓋住縫隙 */
    background: url("../images/blk_after.png") center top / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 1;
}

/* 頂部裝飾 */
.blk_head {
    position: relative;          /* 確保 ::before 的定位基準正確 */
}

.blk_head::after {
    content: "";
    position: absolute;
    width: 100%;
    aspect-ratio: 1240 / 40;
    left: 0;
    bottom: 20px;
    transform: translateY(100%);
    background: url("../images/head_after.png") center bottom / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 1;
}

.blk_item {background: transparent;}

/* =========================
M版 
========================= */
@media screen and (max-width: 991px) {
    .blk_body {
        width: 100%;
        max-width: none;
        margin: 0 auto 0;
        padding: 1% 0 0;
    }

    .blk_body::after {
        width: 100%;
        margin:0 auto .5vw;
    }

    .blk_head::before {
        content: "";
        position: absolute;
        width: 100%;
        left: 0;
        bottom: -1vw;
        transform: translateY(100%);
    }

    .blk_head::after {
        content: "";
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 2vw;
        transform: translateY(100%);
    }

    /* 區塊調整 */
    .blk_bas { margin: 0 auto 8vw;}

}

/* ------------------ 架構標 ------------------ */
    .btt.for_m{display:none;}
    .blk_head {
        position: relative;
        width: 100%;
        max-width: 1240px;
        margin:0px auto -1px;
        background: url("../images/btt_deco.png") bottom center no-repeat;
        background-size:100% auto;
        z-index: 2;
    }

    h2.btt {
        width: min(100%, 758px);
        aspect-ratio: 758 / 138;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fffdea;
        font-family: "Noto Sans TC", sans-serif;
        font-size: clamp(1.4rem, 3.5vw, 3.5rem);
        font-weight: 800;
        font-style: normal;
        font-optical-sizing: auto;
        line-height: 1.2;
        text-align: center;
        position: relative;
        background: url("../images/btt.png") top center / 100% 100% no-repeat;
    }

    /* 左側裝飾 */
    h2.btt::before {
        content: "";
        position: absolute;
        width: 40%;
        aspect-ratio: 270 / 123;
        left: -30%;
        bottom: 8px;
        background: url("../images/btt_be.png") center bottom / 100% 100% no-repeat;
        pointer-events: none;
        z-index: 1;
    }

    /* 右側裝飾 */
    h2.btt::after {
        content: "";
        position: absolute;
        width: 40%;
        aspect-ratio: 286 / 113;
        right: -30%;
        bottom: 8px;
        background: url("../images/btt_af.png") center bottom / 100% 100% no-repeat;
        pointer-events: none;
        z-index: 1;
    }

    @media screen and (max-width: 991px) {
        .blk_head{ margin:0 auto;}

        h2.btt {
            width: 100%;
            font-size: clamp(2rem, 5vw + 0.5rem, 3.5rem);
            background-size: 85%;
        }

        h2.btt::before,
        h2.btt::after {
            width: 40%;
        }

        h2.btt::before {
            left: -5%;
            bottom: 0;
            background-size: 70%;
        }

        h2.btt::after {
            right: -5%;
            bottom: 0;
            background-size: 70%;
        }
    }



/*coupon*/
.coupon {
  position: relative;
  z-index: 10;
  max-width: 96%;
  margin: 0 auto;
}
@media screen and (max-width: 991px) {
  .coupon {
    max-width: 94%;
  }
}
.coupon ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  padding: 20px;
}
@media screen and (max-width: 991px) {
  .coupon ul {
    padding: 2vw;
  }
}
.blk_bas:nth-of-type(1) .coupon ul li {
  max-width: 800px;
  width: 100%;
}
.coupon ul li {
  width: 50%;
  padding: 10px;
}
@media screen and (max-width: 991px) {
  .coupon ul li {
    width: 100%;
    padding: 5px;
  }
}
.coupon ul img {
  width: 100%;
  margin-bottom: 0;
}



/*gotopro 查看適用商品按鈕*/
.selected {
  position: relative;
}
.selected a {
  display: block;
  position: absolute;
  right: 22%;
  bottom: 7%;
  width: 34%;
}
@media screen and (max-width: 991px) {
  .selected a {
    right: 23%;
    bottom: 6%;
    width: 34%;
  }
}
.selected a img {
  width: 100%;
  display: block;
}

/*btn 領券後這裡用按鈕*/
.btn {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 30px auto;
}
.btn img {
  max-width: 500px;
  width: 100%;
}
@media screen and (max-width: 450px) {
  .btn img {
    max-width: 300px;
  }
}