@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap");


/* =====================================================
   01. Base
===================================================== */

body {
    background-image: url("images/bg.png");
    background-position: center top;
		background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* ===================================
   右側浮動分類選單
=================================== */

.side-menu {
    position: fixed;

    top: 50%;
    left: 12px;
    right: auto;

    transform: translateY(-50%);

    z-index: 900;

    display: flex;
    flex-direction: column;

    width: 130px;
    padding: 7px;

    box-sizing: border-box;

    background: rgba(255, 251, 245, .97);

    border: 1px solid #e8c58d;
    border-radius: 16px;

    box-shadow:
        0 8px 30px rgba(35, 0, 0, .18),
        0 0 0 3px rgba(255,255,255,.15);

    backdrop-filter: blur(8px);

    transition:
        right .3s ease;
}


/* 購物車展開時 */
body.cart-open .side-menu {
    right: 370px;
    z-index: 2600;
}


/* ===================================
   選單標題
=================================== */

.side-menu-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 3px;

    padding: 12px 5px;
    margin-bottom: 5px;

    background: linear-gradient(
        135deg,
        #b62b39,
        #86101e
    );

    border-radius: 11px;

    text-align: center;
}

.side-menu-title span {
    color: #ffe5a4;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
}

.side-menu-title small {
    color: rgba(255,255,255,.8);

    font-size: 11px;
    letter-spacing: 2px;
}


/* ===================================
   分類選單列表
=================================== */

.side-menu-list {
    display: flex;
    flex-direction: column;

    gap: 5px;

    max-height: min(65vh, 500px);
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: #d9bb8b transparent;
}


/* ===================================
   分類按鈕
=================================== */

.side-menu-list a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 42px;

    padding: 9px 9px 9px 23px;

    box-sizing: border-box;

    color: #71422e;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;

    text-decoration: none;

    background: #fff;

    border: 1px solid #eee2d3;
    border-radius: 9px;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        border-color .25s ease;
}


/* 金色圓點 */
.side-menu-list a::before {
    content: "";

    position: absolute;

    left: 10px;
    top: 50%;

    width: 6px;
    height: 6px;

    background: #d2a04e;
    border-radius: 50%;

    transform: translateY(-50%);
}


/* 滑鼠移入 */
.side-menu-list a:hover {
    color: #9d1929;

    background: #fff2df;
    border-color: #e8c58d;

    transform: translateX(-3px);
}

.side-menu-list a:hover::before {
    background: #b21e2c;

    box-shadow:
        0 0 0 3px rgba(178,30,44,.1);
}


/* 鍵盤操作 */
.side-menu-list a:focus-visible {
    outline: 2px solid #b21e2c;
    outline-offset: -2px;
}

.side-menu-list a.active {
    color: #fff4d7;

    background: linear-gradient(
        135deg,
        #b52637,
        #8e1321
    );

    border-color: #d9a34b;

    box-shadow:
        0 3px 10px rgba(150,20,30,.16);
}

.side-menu-list a.active::before {
    background: #ffdc79;
}

/* 電腦版隱藏分類按鈕 */
.side-menu-toggle {
    display: none;
}

@media (max-width: 767px) {

    /* 手機分類按鈕 */
    .side-menu-toggle {
        position: fixed;
        left: 12px;
        bottom: 65px;
        z-index: 2501;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 12px 18px;

        background: linear-gradient(
            135deg,
            #b72b39,
            #8d1020
        );

        color: #ffe6ae;
        font-size: 14px;
        font-weight: 800;

        border: 1px solid #eac783;
        border-radius: 30px;

        box-shadow:
            0 5px 18px rgba(80,0,0,.25);

        cursor: pointer;
        display:none;
    }

    /* 分類選單預設收合 */
    .side-menu {
        position: fixed;

        top: auto;
        right: 12px;
        bottom: 143px;
        left: auto;

        transform: translateY(10px);

        width: 190px;
        max-height: min(55vh, 420px);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s ease;
    }

    /* 展開分類選單 */
    .side-menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .side-menu-list {
        max-height: 35vh;
        overflow-y: auto;
    }

    /* 購物車展開時隱藏 */
    body.cart-open .side-menu,
    body.cart-open .side-menu-toggle {
        display: none;
    }
}

/* 固定導覽列可能遮住分類標題 */
.group[id] {
    scroll-margin-top: 30px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* =====================================================
   05. Hero 主視覺
===================================================== */

.hero {
    width: min(1200px, 100%);
}

/* 主視覺 */

.hero-title {
    display: block;
    width: min(100%, 951px);
    margin: 30px auto 0 auto;
    animation-delay: .2s;
  	z-index:99;
		position: relative;
}

/* 金色碎片容器 */
.gold-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

/* 每一片金色碎片 */
.gold-confetti i {
    position: absolute;
    top: -10%;
    left: var(--x);
    width: var(--w);
    height: var(--h);
    background: var(--gold);
    opacity: 0;
    border-radius: 1px;
    animation: goldFall var(--duration) linear infinite;
    animation-delay: var(--delay);
}

/* 金色碎片動畫 */
@keyframes goldFall {
    0% {
        transform:
            translate3d(0, -10px, 0)
            rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: .95;
    }

    30% {
        transform:
            translate3d(25px, 0, 0)
            rotate(120deg);
    }

    60% {
        transform:
            translate3d(-20px, 0, 0)
            rotate(260deg);
        opacity: .85;
    }

    90% {
        opacity: .9;
    }

    100% {
        transform:
            translate3d(15px, 0, 0)
            rotate(540deg);
        top: 110%;
        opacity: 0;
    }
}

/* 每片碎片不同位置、大小、速度 */
.gold-confetti i:nth-child(10n+1) {
    --x: 5%;
    --w: 6px;
    --h: 10px;
    --gold: #ffd54a;
    --duration: 11s;
    --delay: -2s;
}

.gold-confetti i:nth-child(10n+2) {
    --x: 17%;
    --w: 5px;
    --h: 7px;
    --gold: #eebd36;
    --duration: 14s;
    --delay: -8s;
}

.gold-confetti i:nth-child(10n+3) {
    --x: 28%;
    --w: 8px;
    --h: 5px;
    --gold: #fff0a2;
    --duration: 12s;
    --delay: -5s;
}

.gold-confetti i:nth-child(10n+4) {
    --x: 39%;
    --w: 5px;
    --h: 12px;
    --gold: #f6bb27;
    --duration: 16s;
    --delay: -11s;
}

.gold-confetti i:nth-child(10n+5) {
    --x: 48%;
    --w: 7px;
    --h: 7px;
    --gold: #ffd86b;
    --duration: 13s;
    --delay: -7s;
}

.gold-confetti i:nth-child(10n+6) {
    --x: 58%;
    --w: 4px;
    --h: 9px;
    --gold: #e9a924;
    --duration: 15s;
    --delay: -3s;
}

.gold-confetti i:nth-child(10n+7) {
    --x: 69%;
    --w: 9px;
    --h: 5px;
    --gold: #ffe17a;
    --duration: 11s;
    --delay: -9s;
}

.gold-confetti i:nth-child(10n+8) {
    --x: 78%;
    --w: 5px;
    --h: 8px;
    --gold: #f7c544;
    --duration: 17s;
    --delay: -12s;
}

.gold-confetti i:nth-child(10n+9) {
    --x: 88%;
    --w: 7px;
    --h: 11px;
    --gold: #ffd34e;
    --duration: 14s;
    --delay: -6s;
}

.gold-confetti i:nth-child(10n) {
    --x: 96%;
    --w: 5px;
    --h: 6px;
    --gold: #ffec99;
    --duration: 12s;
    --delay: -10s;
}

/* 第二批碎片錯開位置與時間 */
.gold-confetti i:nth-child(n+11) {
    margin-left: -7%;
    animation-delay: calc(var(--delay) - 4s);
}

.title-shine {
    position: absolute;
    display: inline-block;
    line-height: 0;
    overflow: hidden;
    margin-top:-600px;
    margin-left:-270px;
}

.title-shine img {
    display: block;
    width: 100%;
    height: auto;
}

/* 金屬滑光 */
.title-shine::after {
    content: "";
    position: absolute;
    inset: 0;

    /* 使用相同的透明文字圖片作為遮罩 */
    -webkit-mask-image: url("images/title01.png");
    mask-image: url("images/title01.png");

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* 白金色反射光 */
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(255, 230, 140, 0) 40%,
        rgba(255, 240, 180, .45) 46%,
        rgba(255, 255, 255, .95) 50%,
        rgba(255, 240, 170, .55) 54%,
        transparent 65%
    );

    background-size: 300% 100%;
    background-position: 100% 0;

    animation: shineMove 8s ease-in-out infinite;

    pointer-events: none;
}

@keyframes shineMove {
    0%, 15% {
        background-position: 100% 0;
    }

    55%, 100% {
        background-position: 0% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .title-shine::after {
        animation: none;
    }
}


/* ================================
   優惠券整體排列
================================ */

.memo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;

    width: 100%;
    max-width: 1050px;
    margin: 10px auto 30px auto;
    padding: 0 20px;

    box-sizing: border-box;
}


/* ================================
   單張優惠券
================================ */

.memo-item {
    position: relative;

    width: 100%;
    aspect-ratio: 600 / 500;

    margin: 0;

    background-image: url("images/coupon.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}


/* ================================
   優惠券內容
================================ */

.memo-content {
    position: absolute;

    top: 40%;
    left: 11%;
    width: 78%;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    box-sizing: border-box;
    background:#FFF;
    padding:10px 0 0 0;
}


/* 消費門檻 */

.memo-condition {
    width: 100%;

    color: #3c302a;
    font-size: clamp(12px, 1.4vw, 19px);
    font-weight: 700;

    white-space: nowrap;
}


/* 優惠金額 */

.memo-discount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;

    margin-top: 3px;

    color: #e21b48;
    font-size: clamp(13px, 1.6vw, 21px);
    font-weight: 700;
}

.memo-discount strong {
    font-size: clamp(19px, 2.3vw, 32px);
    font-weight: 900;
}


/* ================================
   折扣碼按鈕
================================ */

.memo-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    margin-top: 10px;
    padding: 9px 5px;

    border: none;
    border-radius: 2px;

    color: #fff;
    font-family: inherit;
    font-size: clamp(12px, 1.3vw, 17px);
    font-weight: 600;

    white-space: nowrap;
    cursor: pointer;

    transition:
        filter .25s ease,
        transform .25s ease;
}

.memo-code:hover {
    filter: brightness(1.12);
}

.memo-code:active {
    transform: scale(.98);
}

.memo-code:focus-visible {
    outline: 3px solid #173f87;
    outline-offset: 3px;
}


/* 三種折扣碼顏色 */

.memo-code.blue {
    background: linear-gradient(90deg, #2863ba, #188ac5);
}

.memo-code.orange {
    background: linear-gradient(90deg, #d77719, #a64c05);
}

.memo-code.pink {
    background: linear-gradient(90deg, #ed1359, #ae0854);
}


/* 複製圖示 */
.memo-code .copy-icon {
    display: inline-block;
    margin-left: 5px;
    padding: 3px 7px;

    color: #fff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;

    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 4px;
}

.memo-code:hover .copy-icon {
    background: rgba(255,255,255,.35);
}

/* 已複製成功 */

.memo-code.copied {
    background: #29865b !important;
}


/* ================================
   平板
================================ */


@media screen and (min-width: 769px) and (max-width: 1024px) {

    .memo-grid {
        gap: 12px;
        padding: 0 12px;
    }

    .memo-code {
        margin-top: 5px;
        padding: 6px 2px;
        gap: 3px;
    }

}


/* ================================
   手機版
================================ */

@media (max-width: 768px) {
    /* 三張優惠券垂直排列 */
    .memo-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;

        width: 100%;
        max-width: 360px;

        margin: 20px auto 30px;
        padding: 0 15px;

        box-sizing: border-box;
    }

    /* 單張優惠券 */
    .memo-item {
        width: 100%;
        aspect-ratio: 600 / 500;
        margin: 0;

        background-size: 100% 100%;
    }

    /* 優惠券內容 */
    .memo-content {
        top: 40%;
        left: 11%;
        width: 78%;

        padding: 10px 0 0;
    }

    /* 消費門檻 */
    .memo-condition {
        font-size: 17px;
    }

    /* 優惠金額 */
    .memo-discount {
        font-size: 19px;
        margin-top: 4px;
    }

    .memo-discount strong {
        font-size: 30px;
    }

    /* 折扣碼 */
    .memo-code {
        margin-top: 9px;
        padding: 9px 5px;
        font-size: 15px;
        gap: 5px;
    }

    /* 點我複製 */
    .memo-code .copy-icon {
        padding: 3px 6px;
        font-size: 11px;
    }
}


/* =====================================================
   06. Main
===================================================== */

.main-content {
    padding:0;
}

.page-section {
	margin-bottom:50px;
    
}

.group{
    width: min(1110px, 100%);

    border-left: 5px solid #d3a04e;
    border-right: 5px solid #d3a04e;
    
}

/* =====================================================
   07. Section Title
===================================================== */

.section-title {
    position: relative;
    z-index: 2;
    margin-bottom: -6px;
    display: block;

}

.section-title img {
    display: inline-block;
    width: min(1150px, 100%);
    height: auto;
}


/* =====================================================
   08. 共用內容區
===================================================== */

.content-panel {
    width: min(1140px, 100%);

    padding: 20px 10px 20px;

background-color: #FFF;

box-shadow:
    -20px 8px 28px -18px rgba(0, 0, 0, 0.9),
     20px 8px 28px -18px rgba(0, 0, 0, 0.9),
     0 14px 24px -16px rgba(0, 0, 0, 0.9);

}

.book-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
    
    padding: 0 25px 30px;
    
}


.book-item img {
  padding: 0 5px;
}

.book-item figcaption {
    color: #173d72;
}


.book-copy {
    max-width: 900px;

    margin: 30px auto 0;

    font-size: 16px;
}


/* 價格 */

.price {
    margin-bottom: 3px;
}



/* =============================
   教室用品 - 整體區塊
============================= */

#card {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto 50px;
    box-sizing: border-box;
}


/* =============================
   標題：左圖片 + 右文字
============================= */

.section-title {
    display: flex;
    align-items: center;
    gap: 20px;

    padding: 12px 28px;

    background: #6885d1;


    box-sizing: border-box;
}

/* 左側圖片 */
.section-title-img {
    flex: 0 0 auto;
    width: 35%;
    max-width: 300px;
}

.section-title-img img {
    display: block;
    width: 100%;
    height: auto;
}

/* 右側文字 */
.section-title-text {
    flex: 1;

    color: #fff;

    font-size: clamp(18px, 2.4vw, 30px);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1px;

    text-shadow:
        0 2px 4px rgba(0,0,0,.12);
        
        
}


/* =============================
   商品介紹主區塊
============================= */
.product-feature {
    position: relative;
    overflow: hidden;

    background: #fff7e9;
    border-top:none;
}



/* =============================
   商品內容左右排列
============================= */

.feature-body {
    display: grid;
    grid-template-columns: 30% minmax(0, 1fr);
    gap: 30px;
    align-items: center;
    padding: 20px 35px 25px;
}


/* ============================
   商品圖片
============================ */

.feature-image {
    padding: 10px;
    background: #fff;
    border: 1px solid #ecd8b8;
    border-radius: 7px;

    box-shadow:
        0 5px 22px rgba(100, 60, 30, .07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.feature-image:hover {
    transform: translateY(-3px);
    box-shadow:
        0 9px 25px rgba(100, 60, 30, .13);
}

.feature-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================
   文字資訊
============================ */

.feature-info {
    min-width: 0;
}

.feature-slogan {
    margin-bottom: 18px;
    padding-bottom: 12px;

    font-size: 23px;
    font-weight: 800;
    line-height: 1.45;
    color: #a51521;

    border-bottom: 1px solid #e5d3bc;
}

.feature-slogan span {
    display: block;
    margin-top: 5px;

    font-size: 15px;
    font-weight: 500;
    color: #aa7545;
}

.feature-description {
    font-size: 15px;
    line-height: 1.85;
    letter-spacing: .2px;
    color: #514b48;
}

.feature-description p {
    margin: 0 0 12px;
}

/* ============================
   購物車按鈕
============================ */

.feature-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-width: 160px;
    margin-top: -12px;
    padding: 10px 24px;

    background: linear-gradient(
        135deg,
        #d93440,
        #af101d
    );

    color: #fff;
    font-size: 15px;
    font-weight: 700;

    text-decoration: none;
    border: 1px solid #e7c27c;
    border-radius: 30px;

    box-shadow:
        0 4px 12px rgba(142, 0, 12, .14);

    transition: .25s ease;
}
.feature-buy:hover {
    transform: translateY(-2px);
    background: #9e0915;
    box-shadow:
        0 6px 16px rgba(142, 0, 12, .2);
}

/* ============================
   更多精選教具 - 分隔標題
============================ */

.product-list-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin: 4px 30px 26px;
    text-align: center;
}
.product-list-heading::before,
.product-list-heading::after {
    content: "";
    flex: 1;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #d5ad73,
        transparent
    );
}

.product-list-heading span {
    flex: 0 0 auto;

    color: #a66b27;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 3px;
}

/* 商品價格區 */
.feature-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px;
    margin: 18px 0 5px;
}

/* 活動價 */
.feature-sale-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.feature-sale-price > span {
    color: #b21d29;
    font-size: 15px;
    font-weight: 700;
}

.feature-sale-price strong {
    color: #d32230;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.5px;
}

.feature-sale-price small {
    font-size: 18px;
    margin-right: 2px;
}

/* 原定價 */
.feature-original-price {
    color: #999;
    font-size: 14px;
}

.feature-original-price del {
    color: #aaa;
    text-decoration-color: #bbb;
}

/* 購物按鈕間距 */
.feature-buy {
    margin-top: 14px;
}


/* =====================================================
   19. Tablet
   769px ～ 1024px
===================================================== */

@media screen and (min-width: 769px) and (max-width: 1024px) {

  
.header {
        background:#3d464d;
}

    .main-content {
        
    background-image: url("images/bg1.png");
    background-position: center top;
    background-size: 100% auto;
    }
    
    .section-title {
        gap: 15px;
        padding: 12px 18px;
    }

    .feature-body {
        gap: 22px;
        padding: 25px;
    }

    .feature-description {
        font-size: 15px;
    }
}


/* =====================================================
   20. Mobile
   768px 以下
===================================================== */

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

    /* ---------------------------------
       Base / Background
    --------------------------------- */

    body {
    background-image: url("images/bg_m.jpg");
    }


    /* ---------------------------------
       Header
    --------------------------------- */

    .header {
        background:#3d464d;
    }



    /* ---------------------------------
       Main
    --------------------------------- */

    .main-content {
    background-image: url("images/bg1.png");
    background-position: center top;
    background-size: 100% auto;
    }

    .section-title {
        margin-bottom: -38px;
		text-align:center;

    }

    .section-title img {
    display:block;
    margin-top:-30px;
    margin-left:30px;
        max-width: 75%;

    }
.section-title-img img {
		text-align:center;
}


    .content-panel {
    	width:100%;
        padding: 30px 5px 32px;

    }


    /* ---------------------------------
       Books
    --------------------------------- */

    .book-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 10px;
        
    padding: 0 15px 30px;
    }

    .section-title {
        flex-direction: column;
        gap: 10px;

        padding: 15px;
        text-align: center;
    }

    .section-title-img {
        width: 75%;
        max-width: 300px;
    }

    .section-title-text {
        font-size: 17px;
        line-height: 1.6;
    }

    .product-feature {
        margin-top: 15px;
        border-radius: 8px;
    }

    .feature-body {
        grid-template-columns: 1fr;

        gap: 20px;
        padding: 20px;
    }

    .feature-image {
        max-width: 330px;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .feature-slogan {
        font-size: 21px;
    }

    .feature-description {
        font-size: 15px;
        line-height: 1.9;
    }

    .feature-buy {
        display: flex;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

 .feature-price {
        gap: 10px;
        margin-top: 15px;
    }

 .feature-sale-price strong {
        font-size: 28px;
    }
    
    .section-title.section-title-center {
        margin-top: 18px;
        padding: 0 12px 12px;
    }

    .section-title-center .section-title-img {
        margin-top: -16px;
        max-width: 75%;
        
    margin-left:-30px;
    }

    .section-title-center .section-title-img img {
        height: 40px;
    }

    .section-title-center .section-title-text {
        font-size: 15px;
        line-height: 1.5;
    }


    #TOP {
        width: 50px;
        height: 50px;

        bottom: 8%;
    }
}

/* 右下角浮動優惠券按鈕 */
.coupon-float-btn {
    position: fixed;
    left: 20px;
    bottom: 120px;
    z-index: 2500;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    width: 95px;
    height: 80px;
    padding: 0 5px 5px 5px;

    box-sizing: border-box;

    background: linear-gradient(135deg, #c52b3b, #8d1020);

    color: #ffe6a6;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;

    border: 2px solid #e9c17a;
    border-radius: 12px;

    box-shadow: 0 5px 18px rgba(80, 0, 0, .25);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.coupon-float-btn:hover {
    transform: translateY(-4px);
    text-decoration: none;
}
.coupon-float-btn .coupon-icon {
    display: block;
    width: 28px;
    height: 28px;

    color: #ffe6a6;
    stroke: currentColor;

    flex-shrink: 0;
}

.coupon-float-btn:hover .coupon-icon {
    color: #ffffff;
}

/* 手機版 */
@media (max-width: 767px) {
    .coupon-float-btn {
        right: 12px;
        bottom: 145px;
        width: 75px;
        height: 100px;
        font-size: 15px;
        border-radius: 10px;
        line-height:1.5;
    }
}