/* ==================================================== CSS 變數 ==================================================== */
:root {
    /* 顏色系統 */
    --primary-color: #27abff;

    /* 尺寸與間距 */
    --spacing-sm: calc(0.1rem + 1vw);
    --spacing-md: calc(0.5rem + 3vw);
    --spacing-lg: calc(1.5rem + 6vw);

    /* Z-index */
    --z-floor: 2;       
    --z-decoration: 3; 
    --z-content: 10;    

    /* 第四區_下單抽大禮_s717_member */
    --member-grid-gap: 20px;
    --member-card-padding: 15px;

    /* 第六區 */
    --notice-arrow-color: #000;

}


/* ==================================================== 通用樣式 ==================================================== */
.contentbox_main {
    padding-top: 24px;
    padding-bottom: 24px;
}

@media (min-width: 768px) {
    .contentbox_main {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}


/* -------------------- 折價券_使用完畢+禁用點擊 -------------------- */
.close {
  position: relative;
  pointer-events: none; 
  cursor: not-allowed;  
}

.close img {
  filter: brightness(0.35) saturate(0.4);
}

.close::after {
  content: '使用完畢';
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  color: #fff;
  font-size: clamp(1.2rem, 0.8rem + 1vw, 2rem);
  font-weight: 600;
  z-index: 10;
  letter-spacing: 0.05em;
}


/* -------------------- 票券_完售+禁用點擊 -------------------- */
.sale-card.Sold-out {
    pointer-events: none;
}

.sale-card.Sold-out .sale-card-img img,
.sale-card.Sold-out .card-text,
.sale-card.Sold-out .sale-card-btn {
    filter: brightness(0.4) saturate(0.5);
}

.sale-card.Sold-out::after {
    content: '已售完';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    color: #fff;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 900;
    z-index: 2;
    white-space: nowrap;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.1em;
    pointer-events: none;
}

/* ==================================================== 共用＿裝飾物件 ==================================================== */

/* -------------------- 標題 -------------------- */
.decor-accent > * {
  position: relative;
  z-index: var(--z-content);
}

.decor-accent {
  margin-bottom: var(--spacing-md);
  padding-top: var(--spacing-lg);
}

.decor-accent img {
  margin-bottom: var(--spacing-md);
  width: 90%;
}

@media (min-width: 768px) {
    .decor-accent {
        padding-top: var(--spacing-md);
    }
    .decor-accent img {
        margin-bottom: var(--spacing-sm);
        width: 80%;
    }
}

@media (min-width: 1024px) {
    .decor-accent img {
        margin-bottom: var(--spacing-sm);
        width: 50%;
    }
}

/* -------------------- 波浪 -------------------- */
.wave-bottom {
    position: relative;
    width: 100%;
    line-height: 0;
    z-index: var(--z-decoration);
}

.wave-bottom svg {
    display: block;
    width: 101%;
    height: 100%;
    margin-left: -0.5%;
    shape-rendering: geometricPrecision;
    height: 60px;
}
@media (min-width: 768px) {
    .wave-bottom svg {
    height: 130px;
    }
}

.wave-bottom svg path {
    fill: var(--wave-color);
}

.wave-bottom::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 12px; 
    background-color: var(--wave-color);
}


/* ---------------- 左右背景圖 ---------------- */
.sec::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--img-l) var(--pos-l) / var(--size-l) no-repeat,
                var(--img-r) var(--pos-r) / var(--size-r) no-repeat,
                var(--img-floor, none) var(--pos-floor, center bottom) / var(--size-floor, auto) no-repeat;
    z-index: var(--z-floor);
}
.decor-accent::after {
    animation: float 3s ease-in-out infinite;
    backface-visibility: hidden;
}

.decor-accent::before {
    animation: float 3.6s ease-in-out infinite;  
    animation-delay: -1.2s;
    backface-visibility: hidden;
}

/* 第一區塊_sec-cpn */
.sec-cpn {
    position: relative;
    --img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-cpn_bg-l.png');
    --img-r: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-cpn_bg-r.png');
    --img-floor: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-cpn_bg_m.png');
    --bg-grad: linear-gradient(180deg, #fcb6f2 0%, #bb9cf9 100%);

    --pos-l: left -13% bottom 138%;
    --pos-r: right -13% bottom 94%;
    --pos-floor: center bottom;
    --size-l: 60%;
    --size-r: 23%;

    --size-floor: auto 100%;   /* 高度撐滿區塊、寬度依圖片比例自動算，水平置中 */

    --wave-color: var(--primary-color);
}
.sec-cpn p{
    font-size: .8rem; 
    text-align: left;   
}

@media (min-width: 768px){
    .sec-cpn {
        --img-floor: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-cpn_bg.jpg');
        --pos-l: left -17% bottom 181%;
        --pos-r: right -13% bottom 22%;
        --pos-floor: center bottom;

        --size-l: 58%;
        --size-r: 31%;
    }
   

}

@media (min-width: 1200px){
    .sec-cpn {
        --pos-l: left -5% bottom 164%;
        --pos-r: right -13% bottom 34%;
        --pos-floor: center bottom;

        --size-l: 45%;
        --size-r: 21%;
    }
     .sec-cpn p{
        text-align: center;   
    }
}


/* 第二區塊_天天大搶購_sec-sale */
.sec-sale {
    position: relative;
    --img-l: none;
    --img-r: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-sale_bg-r.png');
    --img-floor: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-sale_bg.jpg');
    --bg-grad: linear-gradient(180deg, #fcb6f2 0%, #bb9cf9 100%);

    --pos-l: left -13% bottom 114%;
    --pos-r: right -7% bottom 96%;
    --pos-floor: center bottom;
    --size-l: 60%;
    --size-r: 32%;

    --size-floor: auto 100%;   /* 高度撐滿區塊、寬度依圖片比例自動算，水平置中 */

    --wave-color: var(--primary-color);
}

@media (min-width: 768px){
    .sec-sale {
        --img-l: url(https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-sale_bg-l.png);
        --pos-l: left -3% bottom 3%;
        --pos-r: right -5% bottom 3%;
        --pos-floor: center bottom;
        --size-l: 40%;
        --size-r: 29%;
    }
}

@media (min-width: 1200px){
    .sec-sale {
        --pos-l: left -1% bottom 14%;
        --pos-r: right -2% bottom 32%;
        --pos-floor: center bottom;
        
        --size-l: 36%;
        --size-r: 25%;
    }
}


/* 第三區_飯店一口價 */
.sec-hotel-sale {
    position: relative;
    --img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-hotel-sale_bg-l.png');
    --img-r: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-hotel-sale_bg-r.png');
    --img-floor: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-hotel-sale_bg.jpg');
    --bg-grad: linear-gradient(180deg, #fcb6f2 0%, #bb9cf9 100%);

    --pos-l: left -6% bottom 23%;
    --pos-r: right -7% bottom 23%;
    --pos-floor: center bottom;
    --size-l: 28%;
    --size-r: 29%;

    --size-floor: auto 100%;   /* 高度撐滿區塊、寬度依圖片比例自動算，水平置中 */

    --wave-color: var(--primary-color);
}

@media (min-width: 768px){
    .sec-hotel-sale {
        

        --pos-l: left -7% bottom 45%;
        --pos-r: right -4% bottom 45%;
        --pos-floor: center bottom;
        --size-l: 28%;
        --size-r: 25%;
    }
}

@media (min-width: 1200px){
    .sec-hotel-sale {
        --pos-l: left -12% bottom 30%;
        --pos-r: right -6% bottom 33%;
        --pos-floor: center bottom;
        --size-l: 26%;
        --size-r: 25%;
    }
}


/* 第四區_下單抽大禮_s717_member_大小網替換背景 */
.sec-member {
    position: relative;
    --wave-color: var(--primary-color);
}

.sec-member::before,
.sec-member::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-member_bg_m.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: var(--z-floor);
}

.sec-member::after {
    background-image: none;
}


@media (min-width: 768px) {
    .sec-member::before {
        background-image: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-member_bg.jpg'); /* 平板+桌機共用一張 */
    }
}



/* 第五區_社群互動大禮_s717_media_大小網替換背景 */
.sec-media::before,
.sec-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-media_bg_m.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: var(--z-floor);
}

.sec-media::after {
    background-image: none;
}

@media (min-width: 768px) {
    .sec-media::before {
        aspect-ratio: 1920 / 788; /* 換成你圖片實際的寬高比 */
        height: auto;
        inset: 0;
        background-image: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-media_bg.jpg'); /* 平板+桌機共用一張 */
    }
}


/* 第六區塊_注意事項_sec-notice */
.sec-notice {
    position: relative;
    --img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-notice_bg-l_m.png');
    --img-r: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-notice_bg-r_m.png');
    --img-floor: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-notice_bg_0709.jpg');
    --bg-grad: linear-gradient(180deg, #fcb6f2 0%, #bb9cf9 100%);

    --pos-l: left 4% bottom 91%;
    --pos-r: right 0% bottom 1%;
    --pos-floor: center bottom;
    --size-l: 100%;
    --size-r: 103%;

    --size-floor: auto 100%;   /* 高度撐滿區塊、寬度依圖片比例自動算，水平置中 */

    --wave-color: #d5f4ac;
}

@media (min-width: 768px){
    .sec-notice {
         --img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-notice_bg-l.png');
        --img-r: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-notice_bg-r.png');
        --pos-l: left -12% bottom -29%;
        --pos-r: right -10% bottom 7%;
        --pos-floor: center bottom;
        --size-l: 29%;
        --size-r: 19%;
    }
}

@media (min-width: 1200px){
    .sec-notice {
        --pos-l: left -14% bottom -16%;
        --pos-r: right -10% bottom 23%;
        --pos-floor: center bottom;
        --size-l: 26%;
        --size-r: 24%;
    }
}


/* 第七區塊_活動說明 */
.sec-note_list{
    background-color: #d5f4ac;
    padding-bottom: 20px;
}


/* -------------------- 角色裝飾 -------------------- */

.decor-accent {
    position: relative; 
}

.decor-accent::after {
    content: '';
    position: absolute;
    background: var(--acc-img) center/contain no-repeat;
    width: var(--acc-w);
    aspect-ratio: var(--acc-ratio, 1/1);
    top: var(--acc-top);
    left: var(--acc-left, auto);
    right: var(--acc-right, auto);
    transform: var(--acc-transform, translate3d(0, 0, 0));
    pointer-events: none;
    animation: float 3s ease-in-out infinite;
    backface-visibility: hidden;
}

.decor-accent::before {
    content: '';
    position: absolute;
    background: var(--acc-img-l) center/contain no-repeat;
    width: var(--acc-w-l);
    aspect-ratio: var(--acc-ratio-l, 1/1);
    top: var(--acc-top-l);
    left: var(--acc-left-l, auto);
    right: var(--acc-right-l, auto);
    transform: var(--acc-transform-l, translate3d(0, 0, 0));
    pointer-events: none;
    animation: float 3s ease-in-out infinite;
    animation-delay: -1.5s;   /* 新增：週期的一半，讓它和 ::after 相位相反 */
    backface-visibility: hidden;
    display: none;
}

@media (min-width: 768px) {
    .decor-accent::before {
        display: block;   /* 平板以上才顯示 */
    }
}

/* 第一區塊_閃領折扣碼_sec-cpn */
.sec-cpn {
    /* 圖片與形狀（左右各自的圖不同，維持獨立） */
    --acc-img: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-cpn_decor-img-r.png');
    --acc-img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-cpn_decor-img-l.png');
    --acc-ratio: 327/340;
    --acc-ratio-l: 327/340;

    /* 手機版：兩側置中夾住標題（左右天生不對稱，保留獨立設定） */
    --acc-w: clamp(84px, 21vw, 327px);
    --acc-w-l: clamp(71px, 21vw, 327px);
    --acc-top: 8px;
    --acc-top-l: 7px;
    --acc-left: 44%;
    --acc-right-l: 44%;
    --acc-transform: translateX(-50%);
    --acc-transform-l: translateX(50%);
}

@media (min-width: 768px) {
    .sec-cpn {
        --acc-y: 48px;     /* 兩側統一的垂直位置，只改這一個 */
        --acc-edge: -9%;  /* 兩側統一的邊距，只改這一個 */

        --acc-top: var(--acc-y);
        --acc-top-l: var(--acc-y);
        --acc-left: auto;
        --acc-right: var(--acc-edge);
        --acc-transform: none;

        --acc-right-l: auto;
        --acc-left-l: var(--acc-edge);
        --acc-transform-l: none;
    }
}

@media (min-width: 1024px) {
    .sec-cpn {
        --acc-y: 41px;    
        --acc-edge: 2%;  
       
    }
}

@media (min-width: 1280px) {
    .sec-cpn {
        --acc-y: 51px;
        --acc-edge: 1%;
        --acc-w: clamp(91px, 27vw, 298px);
        --acc-w-l: clamp(91px, 27vw, 298px);
    }
}

/* 第二區塊__天天大搶購_sec-sale */
.sec-sale {
    --acc-img: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-sale_decor-img-r.png');
    --acc-img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-sale_decor-img-l.png');
    --acc-ratio: 327/340;
    --acc-ratio-l: 327/340;

    --acc-w: clamp(84px, 21vw, 327px);
    --acc-w-l: clamp(71px, 21vw, 327px);
    --acc-top: 8px;
    --acc-top-l: 7px;
    --acc-left: 44%;
    --acc-right-l: 44%;
    --acc-transform: translateX(-50%);
    --acc-transform-l: translateX(50%);
}

@media (min-width: 768px) {
    .sec-sale {
        --acc-y: 48px;     /* 兩側統一的垂直位置，只改這一個 */
        --acc-edge: -9%;  /* 兩側統一的邊距，只改這一個 */

        --acc-top: var(--acc-y);
        --acc-top-l: var(--acc-y);
        --acc-left: auto;
        --acc-right: var(--acc-edge);
        --acc-transform: none;

        --acc-right-l: auto;
        --acc-left-l: var(--acc-edge);
        --acc-transform-l: none;
    }
}

@media (min-width: 1024px) {
    .sec-sale {
        --acc-y: 41px;    
        --acc-edge: 2%;  
       
    }
}

@media (min-width: 1280px) {
    .sec-sale {
        --acc-y: 51px;
        --acc-edge: 1%;
        --acc-w: clamp(91px, 27vw, 298px);
        --acc-w-l: clamp(91px, 27vw, 298px);
    }
}



/* 第三區塊_飯店一口價_sec-hotel-sale */
.sec-hotel-sale {
    --acc-img: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-hotel-sale_decor-img-r.png');
    --acc-img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-hotel-sale_decor-img-l.png');
    --acc-ratio: 327 / 340;
    --acc-ratio-l: 327 / 340;
    --acc-w: clamp(84px, 17vw, 327px);
    --acc-w-l: clamp(71px, 15vw, 327px);
    --acc-top: -24px;
    --acc-top-l: 7px;
    --acc-left: 51%;
    --acc-right-l: 44%;
    --acc-transform: translateX(-50%);
    --acc-transform-l: translateX(50%);
}

@media (min-width: 768px) {
    .sec-hotel-sale {
        --acc-y: 90px;
        --acc-edge: -7%;

        --acc-top: var(--acc-y);
        --acc-top-l: var(--acc-y);
        --acc-left: auto;
        --acc-right: var(--acc-edge);
        --acc-transform: none;

        --acc-right-l: auto;
        --acc-left-l: var(--acc-edge);
        --acc-transform-l: none;
    }
}

@media (min-width: 1024px) {
    .sec-hotel-sale {
        --acc-y: 87px;
        --acc-edge: 2%; 
       
    }
}

@media (min-width: 1280px) {
    .sec-hotel-sale {
        --acc-y: 106px;
        --acc-edge: 2%;
        --acc-w: clamp(91px, 27vw, 251px);
        --acc-w-l: clamp(91px, 27vw, 233px);
    }
}

@media (max-width: 767.98px) {
    .sec-hotel-sale .decor-accent::after,
    .sec-hotel-sale .decor-accent::before {
        animation: none;
    }
}


/* 第四區_下單抽大禮_s717_member */
.sec-member {
    --acc-img: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-member_decor-img-r.png');
    --acc-img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-member_decor-img-l.png');
    --acc-ratio: 327 / 340;
    --acc-ratio-l: 327 / 340;
    --acc-w: clamp(84px, 29vw, 327px);
    --acc-w-l: clamp(71px, 22vw, 327px);
    --acc-top: -23px;
    --acc-top-l: 7px;
    --acc-left: 35%;
    --acc-right-l: 44%;
    --acc-transform: translateX(-50%);
    --acc-transform-l: translateX(50%);
}

@media (min-width: 768px) {
    .sec-member {
        --acc-y: 20px;
        --acc-edge: -1%;

        --acc-top: var(--acc-y);
        --acc-top-l: var(--acc-y);
        --acc-left: auto;
        --acc-right: var(--acc-edge);
        --acc-transform: none;

        --acc-right-l: auto;
        --acc-left-l: var(--acc-edge);
        --acc-transform-l: none;
    }
}

@media (min-width: 1024px) {
    .sec-member {
        --acc-y: -5px;
        --acc-edge: 0%; 
       
    }
}

@media (min-width: 1280px) {
    .sec-member {
        --acc-y: -17px;
        --acc-edge: 5%;
        --acc-w: clamp(91px, 27vw, 337px);
        --acc-w-l: clamp(91px, 27vw, 270px);
    }
}




/* 第五區_社群互動大禮_sec-media */
.sec-media {
    --acc-img: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-media_decor-img-r.png');
    --acc-img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-media_decor-img-l.png');
    --acc-ratio: 327/340;
    --acc-ratio-l: 327/340;

    --acc-w: clamp(84px, 16vw, 327px);
    --acc-w-l: clamp(71px, 16vw, 327px);
    --acc-top: 4px;
    --acc-top-l: 7px;
    --acc-left: 44%;
    --acc-right-l: 44%;
    --acc-transform: translateX(-50%);
    --acc-transform-l: translateX(50%);
}

@media (min-width: 768px) {
    .sec-media {
        --acc-y: 20px;
        --acc-edge: -1%;

        --acc-top: var(--acc-y);
        --acc-top-l: var(--acc-y);
        --acc-left: auto;
        --acc-right: var(--acc-edge);
        --acc-transform: none;

        --acc-right-l: auto;
        --acc-left-l: var(--acc-edge);
        --acc-transform-l: none;
    }
}

@media (min-width: 1024px) {
    .sec-media {
        --acc-y: -5px;
        --acc-edge: 0%; 
       
    }
}

@media (min-width: 1280px) {
    .sec-media {
        --acc-y: 3px;
        --acc-edge: 7%;
        --acc-w: clamp(91px, 27vw, 200px);
        --acc-w-l: clamp(91px, 27vw, 200px);
    }
}




/* 第六區塊_注意事項_sec-notice */
.sec-notice {
    --acc-img: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-notice_decor-img-r.png');
    --acc-img-l: url('https://event.cdn-eztravel.com.tw/events/sale-717_2026/sec-notice_decor-img-l.png');
    --acc-ratio: 327/340;
    --acc-ratio-l: 327/340;

    --acc-w: clamp(84px, 19vw, 327px);
    --acc-w-l: clamp(71px, 19vw, 327px);
    --acc-top: -2px;
    --acc-top-l: 7px;
    --acc-left: 44%;
    --acc-right-l: 44%;
    --acc-transform: translateX(-50%);
    --acc-transform-l: translateX(50%);
}

@media (min-width: 768px) {
    .sec-notice {
        --acc-y: 48px;     /* 兩側統一的垂直位置，只改這一個 */
        --acc-edge: -9%;  /* 兩側統一的邊距，只改這一個 */

        --acc-top: var(--acc-y);
        --acc-top-l: var(--acc-y);
        --acc-left: auto;
        --acc-right: var(--acc-edge);
        --acc-transform: none;

        --acc-right-l: auto;
        --acc-left-l: var(--acc-edge);
        --acc-transform-l: none;
    }
}

@media (min-width: 1024px) {
    .sec-notice {
        --acc-y: 24px;
        --acc-edge: 0%; 
       
    }
}

@media (min-width: 1280px) {
    .sec-notice {
        --acc-y: 90px;
        --acc-edge: 1%;
        --acc-w: clamp(91px, 27vw, 250px);
        --acc-w-l: clamp(91px, 27vw, 250px);
    }
}


/* ========================================== 第一區塊_閃領折扣碼_sec-cpn ========================================== */

/* -------------------- 折價券 -------------------- */
.cpn-coupon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.cpn-coupon a {
    width: calc(50% - 4px);
}
@media screen and (min-width: 768px) {
    .cpn-coupon {
        gap: 7px;
    }
    .cpn-coupon a {
        width: calc(33% - 8px);
    }
}
@media screen and (min-width: 992px) {
    .cpn-coupon {
        gap: 6px;
    }
    .cpn-coupon a {
        margin-bottom: 6px;
    }
}

.row-break {
    display: none;
    width: 100%;
}
@media (min-width: 768px) {
    .row-break {
        display: block;
    }
}


/* -------------------- 折價券卡片_進場閃光效果 -------------------- */
.coupon-link {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

@keyframes coupon-flash {
    0%   { filter: brightness(1);   transform: translateY(0); }
    45%  { filter: brightness(1.3); transform: translateY(-8px); }
    100% { filter: brightness(1);   transform: translateY(0); }
}

/* 桌機才跑動畫 */
@media (min-width: 768px) {
    .coupon-link img {
        animation: coupon-flash 0.8s ease-out forwards;
    }

    .coupon-link:nth-child(1) img { animation-delay: 0s; }
    .coupon-link:nth-child(2) img { animation-delay: 0.12s; }
    .coupon-link:nth-child(3) img { animation-delay: 0.24s; }
    .coupon-link:nth-child(4) img { animation-delay: 0.36s; }
    .coupon-link:nth-child(5) img { animation-delay: 0.48s; }
    .coupon-link:nth-child(6) img { animation-delay: 0.6s; }

    .coupon-link.close img {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .coupon-link img {
        animation: none;
    }
}

/* ========================================== 第二區塊_天天大搶購_sec-sale ========================================== */

/* -------------------- 卡片 -------------------- */
.sale-card {
container-type: inline-size;
  container-name: card;
  display: block;
  width: calc(50% - 8px);
  text-decoration: none;
  cursor: pointer;
  
}

.sale-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: center;
}

/* 手機：兩個一排 */
.sale-card {
  display: block;
  width: calc(50% - 8px);
  text-decoration: none;
  cursor: pointer;
}

/* 平板以上：四個一排 */
@media (min-width: 768px) {
  .sale-card {
    width: calc(25% - 12px);
  }
  .sale-card-grid {
    gap: 16px; 
    }
}

/* ── 黑色圖片區（背景圖 + 疊字） ── */
.sale-card-img {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: filter 0.28s ease;
  will-change: filter;
}

.sale-card-img img {
  display: block;
  width: 100%;
  height: auto;
}

.card-text {
    position: absolute;
  top: 18%;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 6%;
}
.card-text p {
  margin: 0;
}


.card-text .line-1 {
  top: 0;
  left: 0;
  width: 100%;
  font-size: clamp(1.1rem, 10cqw, 1.3rem);  
  line-height: 1.2;
  font-weight: 500;
  color: #f248e9;
}

.card-text .line-2 {
  top: 1.3em;
  left: 0;
  width: 100%;
  font-size: clamp(1.4rem, 19cqw, 3.4rem);  
  line-height: 1.3;
  font-weight: 900;
  color: #f248e9;
}

.card-text .line-3 {
  top: 10px;
  left: 0;
  width: 100%;
  font-size: clamp(.8rem, 6cqw, 1rem);
  line-height: 1.4;
  font-weight: 700;
  color: #000;
}

/* ── 綠色按鈕區（背景圖 + 疊字） ── */
.sale-card-btn {
  position: absolute;
  bottom: 7px;
  left: 0;
  width: 100%;
  transition: transform 0.28s ease, filter 0.28s ease;
  will-change: transform, filter;
}
@media (min-width: 768px) {
  .sale-card-btn {
    bottom: 8px;
    }
}
@media (min-width: 992px) {
  .sale-card-btn {
    bottom: 15px;
    }
}

.sale-card-btn img {
  display: block;
  width: 80%;
  height: auto;
}

.btn-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-weight: 500;
  font-size: 1.3rem;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .btn-text {
  font-size: 1.8rem;
}
}

/* ── Hover：黑底圖+文字亮一階、按鈕往上飄 ── */
@media (hover: hover) {
  .sale-card:hover .sale-card-img {
    filter: brightness(1.12);
  }
  .sale-card:hover .sale-card-btn {
    transform: translateY(-5px);
  }
}

.sale-card:active .sale-card-img {
  filter: brightness(1.12);
  transition: filter 0.08s ease;
}
.sale-card:active .sale-card-btn {
  transform: translateY(-3px);
  transition: transform 0.08s ease;
}







/* ========================================== 第三區塊_飯店一口價_sec-hotel-sale ========================================== */
/* #s717_hotel_sale{
    margin-top: var(--spacing-md);
} */

.hotel-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    justify-content: center;
}
.hotel-row-break {
    display: none;
    width: 100%;
    height: 0;
}

@media (min-width: 768px) {
    .hotel-card-grid {
        gap: 16px;
    }
    .hotel-card-grid .sale-card {
        width: calc(25% - 12px);
        flex: 0 0 auto;
    }
    .hotel-row-break {
        display: block;   /* 桌機版顯示，強制換行 */
    }
}

.sec-hotel-sale {
    position: relative;
    --wave-color: #f8d1ff;
}



/* 第三區_國際飯店 */
.IntlHotel {
    padding-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
    .IntlHotel {
        padding-top: 120px;
        margin-bottom: var(--spacing-sm);
        width: 80%;
        margin: 0 auto;
    }
}


.IntlHotel-sale-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.IntlHotel-sale-card-img {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: filter 0.28s ease;
    will-change: filter;
}

.IntlHotel-sale-card-img img {
    display: block;
    width:100%;
    height: auto;
}


@media (min-width: 768px) {
    .IntlHotel-sale-card-img img {
    width:70%;
    margin-top: 20px;
}
}

@media (hover: hover) {

  .IntlHotel-sale-card:hover .IntlHotel-sale-card-img {
    filter: brightness(1.12);
  }
}

.IntlHotel-sale-card:active .IntlHotel-sale-card-img {
  filter: brightness(1.12);
  transition: filter 0.08s ease;
}

/* ========================================== 第四區_下單抽大禮_s717_member ========================================== */


#s717_member .member-card-wrapper {
    width: 100%;
    margin-left: 0;
    overflow: visible;
}

#s717_member .wine-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    transform: none !important;
}

#s717_member .swiper-slide-item {
    width: 100%;
    height: auto;
    margin: 0 !important;
}

#s717_member .swiper-slide-item img{
    width: 100%;
    height: auto;
    margin: 0 !important;
}

/* 桌機版：改成 2 張一排 */
@media (min-width: 768px) {
    #s717_member .wine-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================== 第五區_社群互動大禮_shiny_media ========================================== */

.sec-media {
    position: relative;
    overflow: hidden;
}

.media-Scroll_card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.media-Scroll_card .img-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding-top: 10px;
}

.media-Scroll_card .img-box img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    .media-Scroll_card .img-box img {
        padding: 0 8px;
    }
}

/* -------------------- 佈局控制＿Swiper 滾動 -------------------- */

#s717_media .media-card-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: visible;
}

#s717_media .mySwiper_Gallery {
    padding-left: var(--member-card-padding);
}

#s717_media .swiper-slide-item {
    width: 55%;
    height: auto;
    margin-right: 26px !important;
}

/* 平板版：卡片稍微縮窄 */
/* @media (min-width: 768px) {
    #s717_media .swiper-slide-item {
        width: 40%;
    }
} */

/* 桌機版（1280px 以上）：改成 4 張一排的網格，不再滑動 */
@media (min-width: 768px) {
    #s717_media .media-card-wrapper {
        width: 100%;
        margin-left: 0;
    }

    #s717_media .media-card-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        transform: none !important;
    }

    #s717_media .swiper-slide-item {
        flex: 0 0 calc(25% - var(--member-grid-gap) * 3 / 4);
        max-width: calc(25% - var(--member-grid-gap) * 3 / 4);
        width: auto;
        margin: 0 !important;
    }
}




/* ========================================== 第六區塊_注意事項_sec-notice ========================================== */
#s717_notice{
    margin-top: var(--spacing-md);
}


.note_list-group {
    margin-bottom: var(--spacing-lg);
}

#s717_notice .promo-showcase-slider {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        overflow: hidden;
    }
@media (min-width: 768px) {
  #s717_notice .promo-showcase-slider {
        width: 100%;
        margin:0 auto;
    }
}

#s717_notice .swiper-slide {
    width: 57% !important;
    opacity: 1 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

#s717_notice .promo-showcase-card{
    width: 100%;
    height: 100%;
}

#s717_notice .promo-showcase-image {
    position: relative;
}

#s717_notice .promo-showcase-image img {
    width: 80%;
    height: auto;
    object-fit: contain;
}

.step-label {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 6px 13px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    z-index: 10;
    white-space: nowrap;
}

#s717_notice .promo-showcase-text {
    padding-top: 35px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

#s717_notice .swiper-slide:nth-child(-n+3)::after {
    content: "▶";
    position: absolute;
    right: -14px;
    top: 37%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: var(--notice-arrow-color);
    z-index: 20;
    pointer-events: none;
}
@media (min-width: 768px) {
    #s717_notice .swiper-slide:nth-child(-n+3)::after {
    top:30%;
}
}

@media (min-width: 992px) {
    #s717_notice .swiper-slide:nth-child(-n+3)::after {
    top:35%;
}
}


@media (min-width: 768px) {
 #s717_notice .swiper-wrapper {
        transform: none !important;
        transition: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 20px !important;
        width: 100% !important;
    }

    #s717_notice .swiper-slide {
        width: calc((100% - 60px) / 4) !important;
        flex: 0 0 auto;
        margin: 0 !important;
    }

    #s717_notice .swiper-slide:nth-child(-n+3)::after {
        right: -22px;
        font-size: 1.1rem;
    }

    #s717_notice .promo-showcase-text {
        min-height: 150px;
    }

    .step-label {
        bottom: -20px;
        font-size: 0.8rem;
    }
}

.note_list {
    background: url('https://event.cdn-eztravel.com.tw/events/shinytravel-2026/note_icon01.png') no-repeat left 0.4em;
    padding-left: 25px;
    margin-bottom: 12px;
}

.note_list_content {
    background: url('https://event.cdn-eztravel.com.tw/events/shinytravel-2026/note_icon02.png') no-repeat left 0.5em;
    padding-left: 22px;
    color: #333;
}

.note_txt{
    padding-left: 22px;
    color: #333;
}



.note_list_content .bank-link:link {
    color: #f15beb;  
}
.note_txtnote_list_content .bank-link:visited {
    color: #0abc55; 
}
.note_list_content .bank-link:hover,
.note_list_content .bank-link:active {
    color: #0abc55;  
    text-decoration: underline;
}









/* ==================================================== 氣泡上升淡出效果 ==================================================== */
.bubble-zone {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: var(--z-decoration);
}

.bubble-img {
    position: absolute;
    bottom: -60px;
    left: 0;
    opacity: 0;
    animation-name: bubble-rise;
    animation-timing-function: linear;  
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}

.bubble-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes bubble-rise {
    0%   { transform: translate(0, 0) scale(0.8) rotate(var(--rotate-start, 0deg)); opacity: 0; }
    20%  { opacity: 1; }
    70%  { opacity: 1; }
    80%  { opacity: 0; }
    100% { transform: translate(var(--drift-x, 0px), var(--bubble-rise, -600px)) scale(1.05) rotate(var(--rotate-end, 10deg)); }
}
@media (prefers-reduced-motion: reduce) {
    .bubble-img {
        animation: none;
        opacity: 0;
    }
}