/*-------------------- 共用樣式 --------------------*/

:root {
    --basic-txt: #333333;
    --sub-txt: #2f1e7a;
    --note-txt: #774b63;
    --pl-blue: #5966d8;
    --pl-red: #cc3fb7;
    --main-blue: #398ce9;
    --deep-blue: #024ca2;
    --light-ye: #fff700;
    --main-ye: #ffd200;
    --main-og: #ffaa00;
    --deep-og: #f24446;
    --shadow-rgb: 47, 30, 122;
    --b-round: 1.25rem;
    --content-p: calc(3vw + 42px);
    --col-p: clamp(8px, 1vw + 2px, 14px);
    --transition-com: all 0.2s ease-out;
}

/*-- 按鈕 --*/

.btn>lord-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: sub !important;
}

@property --gradient-1 {
    syntax: "<color>";
    inherits: false;
    initial-value: #fff700;
}

@property --gradient-2 {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffd200;
}

@property --gradient-3 {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffaa00;
}

@property --gradient-4 {
    syntax: "<color>";
    inherits: false;
    initial-value: #f24446;
}

@property --gradient-5 {
    syntax: "<color>";
    inherits: false;
    initial-value: #ea6dcb;
}

@property --gradient-6 {
    syntax: "<color>";
    inherits: false;
    initial-value: #de2daf;
}

.btn-warning:is(:link, :visited, :active) {
    position: relative;
    color: var(--sub-txt);
    border-radius: 500px;
    font-weight: 700;
    background: linear-gradient(to right, var(--gradient-1) 0%, var(--gradient-2) 100%);
    box-shadow: rgba(107, 67, 32, 0.3) -3px -3px 3px inset, rgba(255, 255, 255, 0.7) 3px 3px 3px inset;
    transition:
        0.15s --gradient-1 ease-out,
        0.15s --gradient-2 ease-out,
        0.15s box-shadow ease-out;

    &:hover {
        --gradient-1: #ffff4d;
        --gradient-2: #fff700;
        box-shadow: rgba(107, 67, 32, 0.5) -1px -1px 1px inset, rgba(255, 255, 255, 0.85) 1px 1px 1px inset, rgba(255, 247, 0, 0.5) 0 0 5px;
    }
}

.btn-danger:is(:link, :visited, :active) {
    position: relative;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 500px;
    font-weight: 700;
    background: linear-gradient(to right, var(--gradient-5) 0%, var(--gradient-6) 100%);
    border-color: var(--pl-red);
    box-shadow: rgba(98, 32, 115, 0.4) -3px -3px 3px inset, rgba(255, 255, 255, 0.7) 3px 3px 3px inset;
    transition:
        0.15s --gradient-5 ease-out,
        0.15s --gradient-6 ease-out,
        0.15s box-shadow ease-out;

    &:hover {
        --gradient-5: #de2daf;
        --gradient-6: #981ac7;
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
        box-shadow: rgba(98, 32, 115, 0.6) -1px -1px 1px inset, rgba(255, 255, 255, 0.85) 1px 1px 1px inset, rgba(255, 247, 0, 0.5) 0 0 5px;
    }
}

.btn-lg:is(:link, :visited, :active) {
    position: relative;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(83, 53, 34, 0.75);
    border-radius: 500px;
    background: linear-gradient(to right, var(--gradient-3) 0%, var(--gradient-4) 100%);
    box-shadow: rgba(107, 67, 32, 0.3) -3px -3px 3px inset, rgba(255, 255, 255, 0.7) 3px 3px 3px inset, 0 0.55rem 5px rgba(0, 0, 0, 0.35);

    transition:
        0.15s --gradient-3 ease-out,
        0.15s --gradient-4 ease-out,
        0.15s box-shadow ease-out;

    &:hover {
        --gradient-3: #ffaa00;
        --gradient-4: #ea0037;
        box-shadow: rgba(107, 67, 32, 0.5) -1px -1px 1px inset, rgba(255, 255, 255, 0.85) 1px 1px 1px inset, #fff 0 0 10px, #fff 0 0 10px, #fff 0 0 10px, #fff 0 0 10px, #fff 0 0 15px;
    }
}

.btn-lg+p {
    margin-bottom: 0;
    margin-top: 0.75rem;
}

.btn-sec {
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    text-align: center;
}

/*-------------------- 共用樣式 END --------------------*/

/*-------------------- 全頁 --------------------*/

#fireworksCanvas,
    #confettiCanvas,
    #balloonCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

/* 慶典緞帶樣式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

/* 滾動跟隨背景 - iframe 專用解決方案 */
#confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

#confetti {
    display: block;
    width: 100%;
    height: 100%;
}

/* 慶典緞帶樣式 END */

#wrapper {
    width: 100%;
    min-width: 100%;
    background: url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-rainbow-ribbons-pc.png) repeat-y center top/100%;
    overflow-x: hidden;
}

#wrapper>section {
    /* padding-top: var(--content-p); */
    padding-bottom: calc(var(--content-p) * 0.5);
}

@media screen and (max-width: 767px) {
    #wrapper {
        background: url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-rainbow-ribbons-01.png) repeat-y center top/100%;

        >section {
            padding-bottom: var(--content-p);
        }
    }
}

/*-- 標題字級 --*/

h1 {
    position: relative;
    display: inline-block;

    >img[src*='title-b'] {
        filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
        position: relative;
        z-index: 100;
    }

    /*-- 標題的大聲公 --*/
    &::before {

        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(-65%, -10%);
        z-index: 1;
    }

    &::after {
        content: url(https://event.cdn-eztravel.com.tw/events/anniversary/title-mega-gn.png);
        display: inline-block;
        position: absolute;
        top: 0;
        right: 0;
        transform: scaleX(-1) translate(-65%, -10%);
        z-index: 1;
    }

    +h2 {
        position: relative;
        color: var(--sub-txt);
        font-weight: 700;
        line-height: 1;
        margin-bottom: 0;
        z-index: 100;
    }

    +p {
        position: relative;
        font-weight: 500;
        color: var(--sub-txt);
        z-index: 100;
    }
}

/*-- 不同顏色的大聲公 --*/
#wrapper>section:nth-of-type(4n+1)>h1 {
    &::before {
        content: url(https://event.cdn-eztravel.com.tw/events/anniversary/title-mega-gn.png);
    }

    &::after {
        content: url(https://event.cdn-eztravel.com.tw/events/anniversary/title-mega-gn.png);
    }
}

#wrapper>section:nth-of-type(4n+2)>h1 {
    &::before {
        content: url(https://event.cdn-eztravel.com.tw/events/anniversary/title-mega-blue.png);
    }

    &::after {
        content: url(https://event.cdn-eztravel.com.tw/events/anniversary/title-mega-blue.png);
    }
}

#wrapper>section:nth-of-type(4n+3)>h1 {
    &::before {
        content: url(https://event.cdn-eztravel.com.tw/events/anniversary/title-mega-pl.png);
    }

    &::after {
        content: url(https://event.cdn-eztravel.com.tw/events/anniversary/title-mega-pl.png);
    }
}

#wrapper>section:nth-of-type(4n+4)>h1 {
    &::before {
        content: url(https://event.cdn-eztravel.com.tw/events/anniversary/title-mega-red.png);
    }

    &::after {
        content: url(https://event.cdn-eztravel.com.tw/events/anniversary/title-mega-red.png);
    }
}

@media screen and (max-width: 1199px) {
    h1 {
        >img {
            zoom: 0.9;
        }
    }
}

@media screen and (max-width: 991px) {
    h1 {
        >img {
            zoom: 0.8;
        }
    }
}

@media screen and (max-width: 767px) {
    h1 {
        >img {
            zoom: 0.7;
        }
    }
}

.small.small {
    font-weight: 400;
}

/*-------------------- 全頁 END --------------------*/

/*-------------------- 大獎天天抽 #prize_bd25 --------------------*/

#prize_bd25 {}

/* .prizes-day-table 表格樣式 */
.prizes-day-table {
    width: min(1600px, 100%);
    margin: auto;
}

.prizes-day-table th {
    width: calc(100% / 7);
    line-height: 40px;
    color: #fff !important;
    border: none;
    text-align: center;

    >div {
        font-weight: 700;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    }

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
        mix-blend-mode: soft-light;
    }
}

.prizes-day-table tr:first-of-type th {
    border-top-left-radius: var(--b-round);
    border-top-right-radius: var(--b-round);

    &::before {
        border-top-left-radius: var(--b-round);
        border-top-right-radius: var(--b-round);
    }
}

.prizes-day-table td {
    color: var(--basic-txt);
    padding: 0;
}

.prizes-day-table {
    font-size: 0.9rem;

    .h5 {
        font-size: 1.25em;
        margin-bottom: 0;
    }

    :is(th, td) {
        position: relative;
        background: var(--bg-color);
        text-align: center;
    }

    :is(th, td):nth-of-type(1) {
        --bg-color: #5fdcf0;
    }

    :is(th, td):nth-of-type(2) {
        --bg-color: #4251de;
    }

    :is(th, td):nth-of-type(3) {
        --bg-color: #835df1;
    }

    :is(th, td):nth-of-type(4) {
        --bg-color: #4bb8fc;
    }

    :is(th, td):nth-of-type(6) {
        --bg-color: #f8a142;
    }

    :is(th, td):nth-of-type(7) {
        --bg-color: #fa607c;
    }

    :is(th, td):nth-of-type(5) {
        --bg-color: #34ba47;
    }

    :is(th, td).empty {
        --bg-color: transparent;
        position: relative;

        &::before {
            display: none;
        }
    }

    :is(th, td)>div {
        position: relative;
        z-index: 100;
        white-space: nowrap;

        >figure {
            display: inline-block;
            width: min(74px, 90%);
            aspect-ratio: 1/1;
            text-align: center;
            align-content: center;
            margin: 0;
            margin-bottom: -0.8rem;

            >img {
                max-width: 100%;
            }
        }

        >p {
            line-height: 1;
            margin-bottom: 0.5em;

            &.normal-space {
                line-height: 1.3;
            }

            >i {
                font-style: normal;
                display: inline-flex;
                background-color: var(--bg-color);
                border-radius: 100px;
                font-size: 0.84em;
                font-weight: 500;
                color: #fff;
                line-height: 1.5em;
                height: 1.61em;
                overflow: visible;
                padding: 1px 0.5em;
                margin-right: 0.2em;

                &::before {
                    zoom: 0.6;
                    margin-right: 0.5em;
                }

                &.air::before {
                    content: url(https://event.cdn-eztravel.com.tw/events/anniversary/icon-prize-airplane.png);
                }

                &.hotel::before {
                    content: url(https://event.cdn-eztravel.com.tw/events/anniversary/icon-prize-hotel.png);
                    margin-top: -0.5em;
                    /* transform: translateY(-0.5em); */
                }

                &.coin::before {
                    zoom: 0.55;
                    content: url(https://event.cdn-eztravel.com.tw/events/anniversary/icon-prize-money.png);
                    margin-top: -0.1em;
                    /* transform: translateY(-0.45em); */
                }
            }

            &.notyet {
                --bg-color: var(--bs-gray-600);
                color: var(--bs-gray-600);
                line-height: inherit;
            }
        }
    }
}

.prizes-day-table td {
    padding: 0.5rem;
}

.prize-row td>div {
    padding-top: 0;
}

.prizes-day-table tr {
    td::before {
        content: '';
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    &.prize-row td {
        font-weight: 800;

        &::before {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0.7) 70%);
        }
    }

    &.winner-row td {
        &::before {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 20%, rgba(255, 255, 255, 0.95) 70%);

        }
    }
}

.prizes-day-table tbody tr:last-of-type td {
    border-bottom: 5px solid var(--bg-color);
}

.prizes-day-table th.empty>img[src*='start'] {
    position: absolute;
    inset: 0;
    top: 300%;
    right: 0;
    width: min(237px, 100%);
}

.prizes-day-table th.empty>img[src*='travelisland'] {
    position: absolute;
    inset: 0;
    top: 50%;
    left: 0;
    transform: translate(-5px, -25%);
    width: min(385px, 200%);
}

.prizes-day-table .btn:is(:link, :visited, :active) {
    position: relative;
    display: inline-flex;
    color: #fff;
    border-radius: 500px;
    font-weight: 400;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    background: var(--bg-color);
    box-shadow: rgba(0, 0, 0, 0.35) -3px -3px 3px inset, rgba(255, 255, 255, 0.5) 3px 3px 3px inset;
    transition: var(--transition-com);

    &::after {
        content: "\e71a";
        font-family: "Material Symbols Outlined";
        font-size: 1em;
        font-weight: 400;
        margin-left: 0.3rem;
        vertical-align: sub;
        margin-right: 0;
        transition: var(--transition-com);
        font-variation-settings:
            "FILL" 1,
            "wght" 400,
            "GRAD" 0,
            "opsz" 24;
    }

    &:hover {
        text-shadow: 0 0 3px rgba(255, 255, 255, 1);
        box-shadow: rgba(0, 0, 0, 0.5) -1px -1px 1px inset, rgba(255, 255, 255, 0.85) 1px 1px 1px inset, rgba(255, 247, 0, 0.5) 0 0 5px;
    }
}


/*-------------------- 挺你折扣碼 #coupon_bd25 --------------------*/

.coupon-sec {
    position: relative;
    justify-content: center;
    margin: 1rem auto 0;
    width: min(1600px, 100%);
    z-index: 100;
}

.coupon-sec:last-of-type {
    margin-bottom: 0;
}

.coupon-sec>div {
    padding-bottom: calc(var(--col-p) * 2);
}

@media screen and (max-width: 767px) {
    .coupon-sec {
        padding-left: calc(var(--col-p) * 3);
        padding-right: calc(var(--col-p) * 3);

        >div {
            padding-bottom: calc(var(--col-p) * 3);
        }
    }
}

.coupon-sec a:not(.btn) {
    cursor: pointer;
    display: inline-block;
    position: relative;
    height: 100%;
    transition: var(--transition-com);
}

.coupon-sec a:not(.btn) img {
    width: min(405px, 100%);
    height: auto;
    filter: drop-shadow(1px 4px 5px rgba(0, 0, 0, 0.5));
    transition: var(--transition-com);
}

.coupon-sec a:not(.btn):hover img {
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 8px rgba(255, 255, 255, 1));
    transform: scale(1.02);
}

.coupon-sec a:not(.btn):hover::before {
    opacity: 0.5;
}

.coupon-sec a:not(.btn)::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    transform: translate(-25%, -50%);
    width: calc(264 / 300 * 100%);
    aspect-ratio: 264 / 115;
    background: url(https://event.cdn-eztravel.com.tw/events/anniversary/prolight.png) no-repeat center/contain;
    mix-blend-mode: screen;
    opacity: 0;
    z-index: 1;
    transition: var(--transition-com);
}

.coupon-sec a:not(.btn):hover::after {
    opacity: 1;
}

.coupon-sec a.btn {
    cursor: pointer;
}


/* 領取完畢 */

.coupon-sec .sold_out.sold_out {
    cursor: default;
    pointer-events: none;
}

.coupon-sec a.sold_out img {
    filter: brightness(0.5);
}

.coupon-sec a.sold_out:hover>img {
    transform: scale(1);
    filter: brightness(0.5);
}

.coupon-sec a.sold_out:not(.btn)::before {
    display: none;
}


.coupon-sec a.sold_out::after {
    content: "本週使用完畢";
    aspect-ratio: auto;
    display: inline-block;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.15rem;
    position: absolute;
    opacity: 1;
    background: none;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    white-space: nowrap;
    pointer-events: none;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 10;
}

@media (min-width: 576px) and (max-width: 1100px) {
    .coupon-sec a.sold_out::after {
        font-size: 1.3rem;
    }
}

/*-------------------- 挺你折扣碼 #coupon_bd25 END --------------------*/

/*-------------------- 折扣碼使用教學 #teach_bd25 --------------------*/

#teach_bd25#teach_bd25 {
    padding-top: 0;
    padding-bottom: var(--content-p);
    background: url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-cake-top.png) no-repeat center bottom/calc(348px + 30vw);
}

/* #teach_bd25::before {
    content: "";
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: var(--main-ye);
    width: 100%;
    height: calc(var(--content-p) * 1.5);
    top: 0;
    left: 0;
    transform: translateY(-50%);
    z-index: 100;
} */

.step-coupon {
    justify-content: center;
    margin-top: 1.5rem;

    >div {
        text-align: center;
        position: relative;
    }
}

.step-coupon .step-coupon-img {
    display: inline-block;
    text-align: center;
    width: 100%;

    >img {
        width: min(195px, 85%);
        height: auto;
    }
}

.step-coupon .step-title {
    position: relative;
    display: inline-block;
    color: #fff;
    background-color: var(--sub-txt);
    font-weight: 700;
    border-radius: 100rem;
    padding: 0.15rem 0.75rem;
    margin: -3rem auto 0.25rem;
    z-index: 15;
}

@media (min-width: 576px) and (max-width: 991px) {
    .step-coupon>div:last-of-type .step-title {
        padding: 0.15rem 0.2rem;
        letter-spacing: -0.1rem;
    }
}

.step-coupon>div {
    &::before {
        content: "";
        position: absolute;
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0.5rem 0 0.5rem 0.75rem;
        border-color: transparent transparent transparent var(--sub-txt);
        top: 35%;
        right: 0;
        opacity: 0.75;
        transform: translateX(50%);
    }

    &:last-of-type:before {
        display: none;
    }
}

/*-------------------- 折扣碼使用教學 #teach_bd25 END --------------------*/

/*-------------------- 週間天天搶 #discount_bd25 --------------------*/

#discount_bd25#discount_bd25 {
    padding-top: calc(var(--content-p) / 4);
    padding-bottom: calc(var(--content-p) * 2);

    background:
        url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-cake-body01.jpg) repeat;
}

#discount_bd25::before,
#app_bd25::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(100px, calc(15vw + 62px), 350px);
    background: url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-cake-cream.png) no-repeat top center/auto 100%;
    /* aspect-ratio: 1920/350; */
    transform: translateY(-15%);
}

.rushbuy {
    text-align: center;
    justify-content: center;
    position: relative;
    z-index: 100;

    /* height: calc(100% - var(--h3-height) - 1rem - 0.5rem); */
    >div {
        margin-bottom: calc(var(--col-p) * 2);
    }
}

.rushbuy>div {}


.rushbuy .pro-box {
    color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--pl-red) 6%, var(--pl-blue) 90%);
    border-radius: calc(var(--b-round) * 1.5);
    padding: 0 0.6rem 0.6rem;
    box-shadow: rgba(var(--shadow-rgb), 0.3) 0px 50px 100px -20px, rgba(var(--shadow-rgb), 0.5) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;

}


.pro-box .head-day {
    display: flex;
    width: 100%;
    justify-content: center;
    transform: translateY(-10%);

    >.head-day-time {
        width: min(80px, calc(80 / 280 * 100%));
        margin-right: 0.5rem;

        >img {
            max-width: 100%;
            filter: drop-shadow(0 3px 3px rgba(var(--shadow-rgb), 0.5));
        }
    }

    >.head-day-theme {
        position: relative;
        display: inline-block;
        width: min(145px, calc(145 / 280 * 100%));
        align-content: end;

        >img {
            max-width: 100%;
            filter: drop-shadow(1px 2px 2px rgba(var(--shadow-rgb), 0.6));
        }

        &::before {
            content: '';
            position: absolute;
            display: block;
            aspect-ratio: 171/64;
            top: -10%;
            left: -3%;
            width: 115%;
            background: url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-theme-love.png) no-repeat left top/contain;
        }
    }


}

.pro-box .pro-img-box {
    position: relative;
    aspect-ratio: 323 / 206;
    border-radius: calc(var(--b-round) / 2);
    overflow: hidden;
    margin-bottom: 0.5rem;
    box-shadow: -2px -2px 0 rgba(var(--shadow-rgb), 0.5);

    >img {
        position: absolute;
        inset: 0;
        top: 50%;
        left: 50%;
        height: min(100%, 100%);
        width: auto;
        transform: translate(-50%, -50%);
    }

    &.short-img {
        aspect-ratio: 323/120;

        >img {
            width: min(100%, 100%);
            height: auto;
        }
    }
}

.pro-box h4 {
    color: #fff;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 0;
}

.pro-box .focus {
    color: var(--light-ye);
    text-shadow: 0 0 3px rgba(255, 247, 0, 0.5), 0 0 6px rgba(255, 247, 0, 0.3);
    letter-spacing: 0.05em;
    margin-bottom: 0;
}

.pro-box p.small {
    color: var(--sub-txt);
    margin-bottom: 0.5rem;
}

.foot-sec {
    margin-top: auto;

    ul.foot-day {
        display: inline-block;
        text-align: center;
        font-size: 0.875rem;
        margin-bottom: 0.3rem;
        opacity: 0.7;

        li {
            display: inline-block;
            border-radius: 500px;
            border: 1px solid #fff;
            padding: 0 0.35rem;
            margin-bottom: 0.35rem;
        }
    }

    .btn-warning:is(:link, :visited, :active) {
        width: 100%;
    }

    .btn-warning::after {
        content: '';
        display: inline-block;
        aspect-ratio: 35 / 39;
        width: 1.92rem;
        margin: -1.8rem 0 -0.3rem 0.125rem;
        background: url(https://event.cdn-eztravel.com.tw/events/anniversary/icon-clock.png) no-repeat center/contain;
        filter: drop-shadow(0 2px 3px rgba(83, 53, 34, 0.5));
    }
}



/* 按鈕 .btn_sale */

@property --sale-color1 {
    syntax: "<color>";
    inherits: false;
    initial-value: #4b3ec6;
}

@property --sale-color2 {
    syntax: "<color>";
    inherits: false;
    initial-value: #0099e5;
}

@property --sale-color3 {
    syntax: "<color>";
    inherits: false;
    initial-value: #ea28ea;
}

.btn_sale,
.btn_sale:is(:link, :visited, :active) {
    color: #fff;
    border-radius: calc(var(--b-round) * 10);
    border: none;
    padding: 0 0.6rem;
    float: right;
    transition:
        0.25s --sale-color1,
        0.25s --sale-color2;
}

.btn_sale::after {
    content: "\ebb9";
    font-family: "Material Symbols Outlined";
    font-size: 120%;
    font-weight: 400;
    margin-left: 0.3rem;
    vertical-align: sub;
    margin-right: 0;
    transition: var(--transition-com);
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

.btn.btn_sale::before {
    display: none;
}

.btn.btn_sale {
    box-shadow: none;
}

.btn.btn-fb {
    background-color: #0866ff;
}

.btn.btn-ig {
    background-color: var(--main-pink);
}

/*-------------------- 週間天天搶 #discount_bd25 END --------------------*/

/*-------------------- 簽到賺點數 #app_bd25 --------------------*/

#app_bd25#app_bd25 {
    /* padding-bottom: calc(var(--content-p) *2); */
    padding-top: calc(var(--content-p) / 4);
    background:
        url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-cake-bottom.png) no-repeat center bottom/auto clamp(80px, 9.8vw, 189px),
        url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-cake-body02.jpg) repeat
        /* top left/min(620px, 100%)*/
    ;
}

.member-app-sec {
    width: min(1600px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.card-box {
    position: relative;

    >img[src*='card'] {
        border-radius: calc(var(--b-round) * 0.75);
        box-shadow: -0.5rem 1rem 9px rgba(0, 0, 0, 0.25);
        max-width: 100%;
        transform: rotate(-10deg);
        transform-origin: top right;
    }

    .app-txt-box {
        position: absolute;
        color: #fff;
        font-weight: 500;
        line-height: 1;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        text-align: center;
        align-content: center;
        aspect-ratio: 146/152;
        width: min(146px, 70%);
        bottom: 0;
        right: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        transform: translate(calc(var(--col-p) * 2), 80%);
    }
}

.member-app-sec>div {
    margin-bottom: calc(var(--content-p) * 2);

    &:nth-of-type(1) .app-txt-box {
        background-image: url(https://event.cdn-eztravel.com.tw/events/anniversary/card-green-bg.png);
    }

    &:nth-of-type(2) .app-txt-box {
        background-image: url(https://event.cdn-eztravel.com.tw/events/anniversary/card-golden-bg.png);
    }

    &:nth-of-type(3) .app-txt-box {
        background-image: url(https://event.cdn-eztravel.com.tw/events/anniversary/card-platinum-bg.png);
    }

    &:nth-of-type(4) .app-txt-box {
        background-image: url(https://event.cdn-eztravel.com.tw/events/anniversary/card-diamond-bg.png);
    }

}

#app_bd25 .btn-lg {
    &::after {
        content: '';
        display: inline-block;
        aspect-ratio: 44 / 45;
        vertical-align: bottom;
        width: 2.4rem;
        margin: 0 0 -0.55rem 0.125rem;
        background: url(https://event.cdn-eztravel.com.tw/events/anniversary/icon-click.png) no-repeat center bottom/contain;
        filter: drop-shadow(0 2px 3px rgba(83, 53, 34, 0.5));
        transition: var(--transition-com);
    }

    &:hover::after {
        transform: translateY(-10%);
    }

}

/*-------------------- 簽到賺點數 #app_bd25 END --------------------*/

/*-------------------- 社群挺好玩 #fans_bd25 --------------------*/

#fans_bd25#fans_bd25 {
    padding-bottom: calc(var(--content-p) * 2.5 - 1vw);
}

#fans_bd25 .fans-kv {
    >img {
        max-width: 100%;
        transition: var(--transition-com);
    }

    &:hover>img {
        border: none;
        filter: brightness(110%) saturate(150%) drop-shadow(0 0 1rem #fff);
        transform: scale(1.02);
    }
}

#fans_bd25 h2 {
    position: relative;
    width: 100%;
    margin-top: -3rem;

    filter: drop-shadow(0 3px 4px rgba(60, 24, 83, 0.5));
    z-index: 100;
}

@media screen and (max-width: 767px) {
    #fans_bd25 h2 {
        >img {
            zoom: 0.8;
        }
    }
}

.fans-step-sec {
    border-radius: calc(var(--b-round) *2);
    border: 2px solid #fff;
    padding: 1rem 0.5rem 0;
    margin-top: -1rem;
    margin-bottom: calc(var(--col-p) * 3);
}

.fans-step-sec .step-box {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;

    >.step-box-txt {
        align-content: center;

        >h3 {
            display: inline-block;
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            padding: 0 0.5rem;
            border-radius: 500px;
            background: linear-gradient(135deg, rgba(251, 112, 215, 1) 0%, rgba(134, 102, 255, 1) 100%);
        }
    }

    >.step-box-img {
        width: calc(170 / 377 * 100%);
        flex: 0 0 auto;

        img {
            max-width: 100%;
        }
    }

}

.fans-step-sec>div {
    .step-box::before {
        content: "";
        position: absolute;
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0.5rem 0 0.5rem 0.75rem;
        border-color: transparent transparent transparent var(--sub-txt);
        top: 50%;
        right: 0;
        opacity: 0.75;
        transform: translateX(150%);
    }


    &:last-of-type .step-box::before {
        display: none;
    }

}

@media screen and (max-width: 767px) {
    .fans-step-sec>div {
        .step-box::before {
            border-width: 0.75rem 0.5rem 0 0.5rem;
            border-color: var(--sub-txt) transparent transparent transparent;
            top: auto;
            bottom: 0;
            right: auto;
            left: 50%;
            transform: translate(-50%, 100%);
        }

    }
}


.fans-media-sec {
    padding-left: 0;
    padding-right: 0;
    color: #fff;

    :is(.fans-ig-box, .fans-fb-box) {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: calc(var(--b-round) *1.5);
        padding: 0.5rem;
        container-type: inline-size;

        &::before {
            content: '';
            position: absolute;
            top: 25%;
            left: 0;
            display: inline-block;
            background-position: center;
            background-size: contain;
            transform: translateX(-1rem);
        }
    }

    .fans-ig-box {
        background: linear-gradient(135deg, rgba(204, 63, 183, 1) 0%, rgba(89, 102, 216, 1) 100%);

        &::before {
            aspect-ratio: 148 / 130;
            width: min(148px, calc(148 / 613 * 100%));
            background-image: url(https://event.cdn-eztravel.com.tw/events/anniversary/logo-ig.png);
        }
    }

    .fans-fb-box {
        background: linear-gradient(135deg, rgba(57, 140, 233, 1) 0%, rgba(2, 76, 162, 1) 100%);

        &::before {
            aspect-ratio: 153 / 133;
            width: min(153px, calc(153 / 613 * 100%));
            background-image: url(https://event.cdn-eztravel.com.tw/events/anniversary/logo-fb.png);
        }
    }

}

@media screen and (max-width: 767px) {
    .fans-media-sec {
        div:has(>.fans-ig-box, >.fans-fb-box) {
            margin-bottom: 1.75rem;
        }
    }
}

@container (width < 474px) {
    :is(.fans-ig-box, .fans-fb-box) h3>img {
        zoom: 0.8;
    }
}

@container (width < 345px) {
    :is(.fans-ig-box, .fans-fb-box) h3>img {
        zoom: 0.65;
    }
}


.fans-media-sec h3 {
    position: relative;
    width: 100%;
    z-index: 100;
    margin-top: -1.5rem;

    >img {
        filter: drop-shadow(0 3px 4px rgba(60, 24, 83, 0.5));
    }
}

.fans-media-sec .box-txt {
    padding-left: calc(140 / 613 * 100%);
    text-align: start;

    >ol>li {
        list-style-type: decimal;
    }

    .focus {
        color: var(--light-ye);
    }

}

.fans-media-sec .btn-sec {
    padding-top: 0;

    .btn {
        display: inline-flex;

        >img {
            filter: drop-shadow(0 3px 2px rgba(88, 59, 21, 0.5));
            margin-left: 0.5rem;
        }
    }
}


.btn.btn-fb {
    background-color: #1877f2;
}

.btn.btn-ig {
    background-color: #d91679;
}

.btn.btn-line {
    background-color: #07b53b;
}

/*-------------------- 社群挺好玩 #fans_bd25 END --------------------*/

/*-------------------- 門市限定禮 #store_bd25 --------------------*/

#store_bd25 {
    text-align: center;
    background-color: #fff;
    border-radius: 1000px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 10;

    >h1 {
        transform: translateY(-50%);
    }
}

.store-box {
    position: relative;
    padding: 0 min(253px, calc(82px + 15%));
    z-index: 100;

    .focus {
        color: var(--sub-txt);
    }

    &::before {
        content: '';
        position: absolute;
        aspect-ratio: 249/107;
        width: min(249px, calc(78px + 15%));
        background: url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-store-coins.png) no-repeat center/contain;
        top: 0;
        left: 0;
        transform: translate(2rem, -80%);
        z-index: -1;
    }

    &::after {
        content: '';
        position: absolute;
        aspect-ratio: 253/283;
        width: min(253px, calc(82px + 15%));
        background: url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-store-luggage.png) no-repeat center/contain;
        top: 50%;
        right: 0;
        transform: translate(-1rem, -40%);
        z-index: -1;
    }
}

@media screen and (max-width: 767px) {
    #store_bd25#store_bd25 {
        padding-bottom: calc(var(--content-p) / 2);
    }

    .store-box {
        padding: 0 1rem;

        &::before {
            width: 30%;
            transform: translate(0, -100%);
        }

        &::after {
            width: 30%;
            background: url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-store-luggage.png) no-repeat center/contain;
            top: 100%;
            transform: translate(0.5rem, -10%);
            z-index: -1;
        }
    }
}

#store_bd25 .btn {
    >img {
        margin: -0.5rem 0 -0.5rem 0.5rem;
        filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
        transition: var(--transition-com);
    }

    &:hover>img {
        transform: translate(-3px, -5px);
    }
}

/*-------------------- 門市限定禮 #store_bd25 END --------------------*/

/*-------------------- 銀行來相挺 #bank_bd25 --------------------*/

#bank_bd25#bank_bd25 {
    background:
        url(https://event.cdn-eztravel.com.tw/events/anniversary/bg-bank-star.png) repeat left top/min(1600px, 100%),
        linear-gradient(135deg, rgba(252, 154, 170, 1) 10%, rgba(255, 216, 181, 1) 90%);
    font-size: 0.9375rem;
    padding-top: calc(var(--content-p) * 2.5 - 1vw);

}

@media screen and (max-width: 767px) {
    #bank_bd25#bank_bd25 {
        padding-top: calc(var(--content-p) * 3);
    }

}

#bank_bd25 .rowline>div {
    margin-bottom: 1.5rem;
}

.bank-box {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--b-round) * 0.8);
    background: #ffffff;
    box-shadow: rgba(255, 191, 178, 0.7) -3px -3px 7px inset, 3px 6px 4px rgba(0, 0, 0, 0.4);
}

.bank-box>p {
    display: flex;
    width: 100%;
    height: 95px;
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.bank-box>p>img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.bank-box>ul {
    display: block;
    padding: 0 0.65rem;
}

.bank-box>ul li {
    text-align: left;
    text-indent: -24px;
    margin-inline-start: 24px;
    line-height: 1.4;
    margin-bottom: 5px;
    letter-spacing: -0.005em;
}

.bank-box>ul li::before {
    content: "\f041";
    font-family: "Material Symbols Outlined";
    font-size: 110%;
    font-weight: 400;
    color: var(--deep-ye);
    margin-right: 0.2rem;
    vertical-align: middle;
    font-variation-settings:
        "FILL" 1,
        "wght" 400,
        "GRAD" 200,
        "opsz" 24;
}

.bank-box .btn-sec {
    padding-top: 0.5rem;
    padding-bottom: 0;
}

.bank-box .btn-sec .btn {
    font-size: 0.9375rem;
    padding: 0.35rem 1rem;
}

/*-------------------- 銀行來相挺 #bank_bd25 END --------------------*/

/*-------------------- 注意事項 #note_tte --------------------*/

#note_tte#note_tte {
    padding-top: var(--content-p);
    font-size: min(16px, 0.9375rem);
    font-weight: 400;
    background: rgba(248, 249, 250, 0.7);
}

#note_tte h5 {
    margin-top: 1rem;
    text-align: center;
}

ul.num-list>li {
    list-style-type: decimal;
}

#note_tte ul {
    /* padding-inline-start: 24px; */
    margin-bottom: 5px;
}

@media screen and (max-width: 575px) {
    #note_tte ul {
        padding-inline-start: 5px;
    }
}

#note_tte li {
    text-align: left;
}

#note_tte .contentbox>ul {
    width: 90%;
    margin: 0 auto;
    padding-inline-start: 0;
}

.note_list {
    background: url(https://event.cdn-eztravel.com.tw/events/travelfair/2022/note_icon01.png) no-repeat left 0.4em;
    padding-left: 20px;
    margin-bottom: 5px;
}

.note_list_content {
    background: url(https://event.cdn-eztravel.com.tw/events/travelfair/2022/note_icon02.png) no-repeat left 0.46em;
    padding-left: 20px;
}

.note_content_item {
    background: url(https://event.cdn-eztravel.com.tw/events/travelfair/2022/note_icon02.png) no-repeat left 7px;
    padding-left: 15px;
    font-size: 0.9375rem;
    margin-bottom: 2px;
}

#btn_app {
    position: fixed;
    right: 5px;
    bottom: calc(60px + 95px + 5px);
    z-index: 999;
}

#btn_top {
    position: fixed;
    right: 5px;
    z-index: 999;
}

@media screen and (max-width: 767px) {
    #note_tte .contentbox>ul {
        width: 95%;
    }

    #btn_top,
    #btn_app {
        right: 0;
    }
}