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

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

:root {
    --basic-txt: #212121;
    --sub-txt: #4b3025;
    --note-txt: #774b63;
    --light-pk: #f769ac;
    --main-pk: #f74871;
    --deep-pk: #d91679;
    --main-og: #e2684f;
    --deep-og: #e9554d;
    --main-ye: #ffea00;
    --light-ye: #ffff33;
    --deep-ye: #ffbf00;
    --main-gn: #11d073;
    --main-pl: #623bc5;
    --shadow-rgb: 69, 3, 55;
    --b-round: 0.83rem;
    --content-p: calc(1vw + 42px);
    --col-p: clamp(8px, 1vw + 2px, 15px);
    --transition-com: all 0.25s ease;
}

/*-- 按鈕 --*/

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

@property --gradient-1 {
    syntax: "<color>";
    inherits: false;
    initial-value: #ff9600;
}
@property --gradient-2 {
    syntax: "<color>";
    inherits: false;
    initial-value: #d91679;
}
@property --gradient-3 {
    syntax: "<color>";
    inherits: false;
    initial-value: #f74871;
}

.btn-lg:is(:link, :visited, :active) {
    color: #fff;
    font-weight: 700;
    padding: 0.9rem 1.85rem;
    border-width: 2px;
    border-style: solid;
    border-color: #ffffff;
    border-radius: 100rem;
    background: #000;
    box-shadow: 0 0.55rem 0 rgba(var(--shadow-rgb), 0.25);
    transition: 0.25s --gradient-1, 0.25s --gradient-2, 0.25s --gradient-3, 0.2s transform, 0.2s box-shadow;

    transition:
        0.25s --gradient-1,
        0.25s --gradient-2,
        0.25s --gradient-3,
        0.2s transform,
        0.2s box-shadow;
}
.btn-lg:hover {
    --gradient-1: #d91679;
    --gradient-2: #c200e5;
    --gradient-3: var(--deep-ye);
    transform: translateY(0.25rem);
    color: #fff;
    border-color: var(--basic-txt);
    box-shadow: 0 0 0 rgba(var(--shadow-rgb), 0.75);
}

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

.btn-sec {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    text-align: center;
}
.btn-ice {
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin-bottom: 0;
    text-align: center;
    transform: translate(-5%, 36%);
}
.btn-ice > h4 {font-weight: 800;text-align: center;}
.btn-emoney {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    text-align: center;
}
@media screen and (max-width: 575px) {
    .btn-ice {
    text-align: center;
    transform: translate(0, 0);
}
}

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

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

#wrapper {
    width: 100%;
    min-width: 100%;
    overflow-x: hidden;
}

#wrapper > section {
    padding: var(--content-p) var(--col-p);
}

/*-- 標題字級 --*/
/*
h1 {
    font-family: zen-maru-gothic, sans-serif;
    font-weight: 900;
    font-style: normal;
    color: var(--main-ye);
    position: relative;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    z-index: 100;
    &::before {
        content: attr(data-title);
        display: inline-block;
        position: absolute;
        top: 0.25rem;
        left: 0.25rem;
        color: var(--deep-pk);
        -webkit-text-stroke: 6px var(--deep-pk);
        text-stroke: 6px var(--deep-pk);
        z-index: -1;
    }
    &::after {
        content: attr(data-title);
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        color: var(--sub-txt);
        -webkit-text-stroke: 6px var(--sub-txt);
        text-stroke: 6px var(--sub-txt);
        z-index: -1;
    }
    + h3 {
        position: relative;
        font-family: zen-maru-gothic, sans-serif;
        /* display: flow-root; */
        color: var(--basic-txt);
        font-weight: 700;
        line-height: 1.3;
        z-index: 100;
    }
    &.h1-s {
        display: none;
    }
}
*/


/* 手機版H1 */
@media screen and (max-width: 575px) {    
        &.h1-l {
            display: none;
        }
        &.h1-s {
            display: inline-block;
            line-height: 1;
        }
    }
}

.focus {
    font-weight: 600;
    color: var(--main-ye);
    line-height: 1.3;
    text-shadow:
        -1px -1px 0 var(--basic-txt),
        1px -1px 0 var(--basic-txt),
        -1px 1px 0 var(--basic-txt),
        1px 1px 0 var(--basic-txt),
        -1.5px -1.5px 0 var(--basic-txt),
        1.5px -1.5px 0 var(--basic-txt),
        -1.5px 1.5px 0 var(--basic-txt),
        1.5px 1.5px 0 var(--basic-txt),
        2px 2px 0 var(--basic-txt),
        3px 3px 0 var(--basic-txt),
        4px 4px 0 var(--basic-txt);
    > strong {
        font-weight: 800;
        font-size: 160%;
    }
}
.small.small {
    font-weight: 400;
}
.img-f{width: auto;}
@media (min-width: 576px) and (max-width: 767px) {
.img-f{width: 100%;}
}
@media screen and (max-width: 575px) {    
     .img-f{width: 100%;}
}
/*------- 全頁 END --------------------*/

/*-------------------- 暢秋旅遊節！折扣碼使用教學 #teach_99 --------------------*/

#teach_99 {
    background: 
         url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_pro-top.png) no-repeat center top 100.1% / max(600px, 100%),       
       /* url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_star_01.png) no-repeat left top 3rem / min(247px, calc(147px + 6vw)),*/
       /* url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_paper_01.png) no-repeat right calc(100% - 2rem) / min(199px, calc(100px + 6vw)),*/
        linear-gradient(to bottom, #fbf291 50%, #f7a9a8 100%);
}
#teach_99 > h4 {font-weight: 800; line-height: 1rem; margin-top: 1rem;}
#star{
    position: absolute;
    bottom: 6VH;
    left: 5VW;
    z-index: 1;
    width: 13%;
}

.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(234px, 85%);
        height: auto;
    }
}

.step-coupon .step-title {
    position: relative;
    display: inline-block;
    color: #fff;
    background-color: var(--basic-txt);
    font-weight: 700;
    border-radius: 100rem;
    padding: 0.15rem 0.75rem;
    margin: -3rem auto 0.25rem;
    z-index: 15;
}
@media (min-width: 992px) and (max-width: 1300px) {
#star{  
    top: -8VH;
    left: 2VW;
    width: 14%;
}
}

@media (min-width: 576px) and (max-width: 991px) {
#star{  
    top: -4VH;
    left: 2VW;
    width: 13%;
}
    .step-coupon > div:last-of-type .step-title {
        padding: 0.15rem 0.2rem;
        letter-spacing: -0.1rem;
    }
}
@media screen and (max-width: 567px) {
#star{  
    display: none;
    top: -4VH;
    left: 2VW;
    width: 18%;
}
}
.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(--basic-txt);
        top: 35%;
        right: 0;
        transform: translateX(50%);
    }
    &:last-of-type:before {
        display: none;
    }
}

/*-------------------- 折扣碼省助攻 #coupon_99 --------------------*/

#coupon_99 {
    background:
        url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_sec01_bg.png) no-repeat right top/100%,
        /*url(https://event.cdn-eztravel.com.tw/events/promotion33/2025/bg-colorliner04.png) no-repeat left calc(100% - 3rem) / min(522px, calc(122px + 25vw)),
        url(https://event.cdn-eztravel.com.tw/events/promotion33/2025/bg-colorliner03.png) no-repeat right 1rem / min(399px, calc(100px + 16vw)),*/
         linear-gradient(to bottom, #f7a9a8 50%, #fbf291 100%);
         
    /*padding-top: 60px;*/
}
#coupon_99::before {
        content: "";
        position: absolute;
        display: inline-block;
        aspect-ratio: 700 / 285;
        background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_paper_L.png) no-repeat left top/contain;
        width: min(700px, calc(300px + 21vw));
        top: 0;
        left: 0;
        transform: translateY(-20%);
    }
        &::after {
            content: "";
            position: absolute;
            display: inline-block;
            aspect-ratio: 614 / 247;
            background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_paper_R.png) no-repeat right bottom/contain;
            width: min(614px, calc(214px + 20.8vw));
            right: 0;
            top: 0;
    }

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

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

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

.coupon-title{ margin: 0 auto;position: relative;padding: 0 15px;width: 100%;}
#coupon_99 > h4 {font-weight: 800; line-height: 1rem; margin-top: 1rem;}

@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)::before {
    content: "";
    position: absolute;
    display: inline-block;
    inset: 0;
    width: 99%;
    height: 110%;
    transform-origin: center 90%;
    transform: translate(0.5rem, 0.6rem);
    background: url(https://event.cdn-eztravel.com.tw/events/promotion99/coupon-shadow.png) no-repeat right bottom/100% 100%;
    opacity: 0.28;
    z-index: -1;
    transition: var(--transition-com);
}

.coupon-sec a:not(.btn):hover img {
    transform: scale(1.05);
}

.coupon-sec a:not(.btn):hover::before {
    transform: translate(0.4rem, 0.5rem) scale(1.03, 0.6);
    opacity: 0.5;
}

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

.coupon-sec img {
    max-width: 100%;
    height: auto;
    transition: var(--transition-com);
}

.coupon-sec > .col-md-12 img {
    width: 539px;
    max-width: 100%;
}

/* 領取完畢 */

.coupon-sec .sold_out.sold_out {
    cursor: default;
}

.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: '使用完畢';
    font-family: zen-maru-gothic, sans-serif;
    display: inline-block;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.15rem;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    white-space: nowrap;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 10;
}

/* @media screen and (max-width: 767px) {
    .coupon-sec a.sold_out::after {
        content: url(https://event.cdn-eztravel.com.tw/events/2022_ci_exclusive/icon-soldout.png);
        zoom: 0.6;
    }
} */

#coupon_99 .btn-sec > a {
    margin-right: 1rem;
}

#coupon_99 .btn-sec > a:last-of-type {
    margin-right: 0;
}

/*-------------------- 暢秋旅遊節 #coupon_99 END --------------------*/

/*-------------------- 暢秋旅遊節 #discount_99 --------------------*/

#discount_99 {
    background:
        url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_prize-top.png) no-repeat center top 100.1% / max(600px, 100%),        
        /*url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_pro-shine.png) no-repeat center 100% / max(1920px, 100%),*/
        url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_pro-cloud.png) no-repeat right bottom/contain ,
        linear-gradient(to bottom, #fbf291 50%, #f8b9a3 100%);
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    will-change: animation;
    &::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        max-width: 1772px;
        aspect-ratio: 1 / 1;
        top: 0;
        left: 50%;
        background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_pro-shine.png) no-repeat center top / 100% 100%;
        animation: keepRotate;
        animation-duration: 50s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}
.pro-box > h5 > span {font-size: 0.6rem;color: #067533;}

.discount_99_h4 {font-weight: 800; line-height: 1rem; margin-top: 1rem;position: relative;z-index: 55;}
/* #discount_99 > .contentbox_main{
    padding-left: 0;
    padding-right: 0;
} */

#discount_99::before {
    /*content: "";
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: #ffdfc8;
    width: 100%;
    height: var(--content-p);
    top: 0;
    left: 0;
    transform: translateY(-50%);
    z-index: 100;*/
}
#paper{
    position: absolute;
    top: 4VH;
    right: 1VW;
    z-index: 19;
    width: 14%;
}
#cloud{
    position: absolute;
    top: 0VH;
    left: 1VW;
    z-index: 19;
    width: 25%;
}
.pro-title{
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    z-index: 199;
    top: -27px;
}
.NB{
    position: absolute;
    left: 15%;
    bottom: 89px;
    width: 20%;
    height: auto;
}
.rushbuy {
    --swiper-navigation-sides-offset: 5px;
    text-align: center;
}


@media screen and (max-width: 767px) {
#paper{
    position: absolute;
    top: 4VH;
    right: 0VW;
    z-index: 19;
    width: 14%;
}
   /* #discount_99#discount_99 {
        background:
            url(https://event.cdn-eztravel.com.tw/events/promotion33/2025/bg-people.png) no-repeat left bottom/200%,
            linear-gradient(to bottom, #e84ae8 10%, #e625e3 90%);
    }*/
}
@media screen and (max-width: 567px) {
.NB{
    position: absolute;
    left: 15.5VW;
    bottom: 75px;
}
#discount_99::after {width: 146%; }
#paper{  
    display: none;
}
}

.rushbuy {
    position: relative;
    top: 0;
    bottom: 0;
    height: calc(100% - var(--h3-height) - 1rem - 0.5rem);
}

.rushbuy > div {
    --h5-height: calc(1.25rem * 2); /* 日期BAR高度統一從這裡修改 */
    position: relative;
    font-size: 1.25rem;
    margin-bottom: calc(var(--content-p) / 3 * 2);
}

.rushbuy .pro-box {
    color: var(--basic-txt);
    display: block;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: /*calc(100% - calc(var(--h5-height) * 2))*/;
    background-color: #fff;
    border-radius: 83px;
    padding: 0 0 20px 0;
    border: 2px solid var(--note-txt);
    z-index: 100;
    transition: var(--transition-com);
}
.rushbuy .sold_out.sold_out{  filter: brightness(0.5); }
.rushbuy .sold_out::after{  
    content: '已完售';
    font-family: zen-maru-gothic, sans-serif;
    display: inline-block;
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.15rem;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    white-space: nowrap;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 299;
}


}
@media screen and (max-width: 767px) {
    /*.rushbuy .pro-box {
        padding-bottom: calc(var(--h5-height) * 2 - 30px);
    }*/
}

.rushbuy > div > .head-day {
    display: block;
    width: 100%;
    background-color: #fff2e9;
    color: var(--sub-txt);
    text-align: center;
    margin: 0;
    border-radius: var(--b-round);
    > div {
        max-height: var(--h5-height);
        line-height: var(--h5-height);
    }
    > .head-day-theme {
        font-weight: 700;
        color: inherit;
        > img[src*="icon"] {
            max-width: 100%;
            max-height: 100%;
            vertical-align: sub;
        }
    }
    > .head-day-time {
        color: #fff;
        background-color: var(--main-pl);
        border-radius: 0 0 var(--b-round) var(--b-round);
        &::before {
            content: "\e425";
            font-family: "Material Symbols Outlined";
            font-size: 1.1em;
            font-weight: 400;
            margin-left: 0.2rem;
            vertical-align: sub;
            margin-right: 0.15rem;
        }
    }
}

@media screen and (max-width: 575px) {
    .rushbuy > div > .head-day > .head-day-theme > img[src*="icon"] {
        zoom: 0.8;
    }
}

.rushbuy .pro-box h5 {
    font-size: 1.3rem;
}

.rushbuy .pro-box .img-sec {
    position: relative;
    display: block;
    border-radius: 80px;
    overflow: hidden;
    margin-bottom: 0.8rem;
    border: 1px solid var(--note-txt);
}
.rushbuy .pro-box .img-sec.pro-coupon {
    aspect-ratio: 291/122;
}
.rushbuy .pro-box .img-sec.pro-trip {
    aspect-ratio: 290/155;
    /* margin-bottom: 0.25rem; */
}
.rushbuy .pro-box .img-sec > img {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
}
.rushbuy .pro-box .head-coupon {
    display: inline-block;
    background: url(https://event.cdn-eztravel.com.tw/events/promotion33/2025/bg-couponhead.png) no-repeat center/100% 100%;
    padding: 0 1rem;
    color: #fff;
    margin-bottom: 0.3rem;
}

.rushbuy .pro-box .head-trip {
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

.rushbuy .pro-box p {
    margin-bottom: 0.5rem;
    font-weight: 600;
}
.rushbuy .pro-box .sale-info {
    font-weight: 500;
    color: var(--main-pk);
}
.rushbuy .pro-box figcaption {
    font-size: 0.875rem;
}

/* 按鈕 .btn_sale */

@property --sale-color1 {
    syntax: "<color>";
    inherits: false;
    initial-value: #de3c63;
}
@property --sale-color2 {
    syntax: "<color>";
    inherits: false;
    initial-value: #841c94;
}

.btn_sale,
.btn_sale:is(:link, :visited, :active) {
    /*position: absolute;
    top: auto;
    right: auto;
    bottom: 5px;
    width: calc(100% - 10px);
    left: 5px;*/
    color: #fff;
    border-radius: calc(var(--b-round) * 0.8);
    background: var( --sale-color2);
    border: none;
    transition:
        0.25s --sale-color1,
        0.25s --sale-color2;
}

.btn_sale:hover {
    --sale-color1: #9cff1a;
    --sale-color2: #db6313;
    color: #fff;
}

.btn.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:hover::after {
    content: "\e913";
    margin-left: 0.6rem;
}

.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);
}

.theme-swiper,
.swiper-wrapper {
    --swiper-navigation-size: 1.5rem;
    position: relative;
    width: 100%;
    height: 100%;
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    --swiper-pagination-bottom: 14.5%;
    --swiper-pagination-top: auto;
    pointer-events: none;
}

/*-------------------- 暢秋旅遊節 #discount_99 END --------------------*/

/*-------------------- 下單抽好禮 #prize_99 --------------------*/

#prize_99 {
    background:
        url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_prize-top.png) no-repeat center top 100.1% / max(600px, 100%),  
        linear-gradient(to bottom, #f7a9a8 25%, #fcfc8e 75%);
    &::before {
        content: "";
        position: absolute;
        display: inline-block;
        aspect-ratio: 700 / 285;
        background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_shap_01.png) no-repeat left top/contain;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1;
       /*transform: translateY(-20%);*/
    }
    &::after {
        content: "";
        position: absolute;
        display: inline-block;
        aspect-ratio: 638 / 90;
        background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_shap_02.png) no-repeat right bottom/contain;
        width: 100%;
        right: 0;
        top: 0;
        transform: translateY(-4%);        
    }
}
    /*#coupon_99::before {
            content: "";
            position: absolute;
            display: inline-block;
            aspect-ratio: 700 / 285;
            background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_paper_L.png) no-repeat left top/contain;
            width: min(700px, calc(300px + 21vw));
            top: 0;
            left: 0;
            transform: translateY(-20%);
        }
            &::after {
                content: "";
                position: absolute;
                display: inline-block;
                aspect-ratio: 614 / 247;
                background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_paper_R.png) no-repeat right bottom/contain;
                width: min(614px, calc(214px + 20.8vw));
                right: 0;
                top: 0;
        }*/
.prize-sec {
    display: flex;
    flex-direction: column;
    align-items: start;
    position: relative;
    overflow-wrap: break-word;
    font-weight: 600;
    z-index: 100;
    > div {
        width: min(1500px, 100%);
    }
    > div:nth-of-type(odd) {
        align-self: end;
        .prize-box {
            justify-content: end;
        }
    }
    > div:nth-of-type(even) {
        .prize-box {
            justify-content: start;
        }
    }
}

@media screen and (max-width: 991px) {
    .prize-sec > div {
        display: flex;
        flex-direction: column;
        align-items: start;
        > div:nth-of-type(odd) {
            align-self: end;
        }
    }
}

div:has(>.prize-box) {
    margin-bottom:calc(var(--col-p) * 2) ;
}
.prize-box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 2px solid var(--note-txt);
    border-radius: 1000rem;
    overflow: hidden;
}

.prize-box > .prize-box-img {
    aspect-ratio: 1 / 1;
    height: calc(300px - 3vw);
    > img {
        object-fit: contain;
        max-width: 100%;
        border-radius: 50%;
    }
}

@media (min-width: 992px) and (max-width: 1250px) {
    .prize-sec {
        > div:nth-of-type(odd) {
            .prize-box {
                border-top-left-radius: calc(var(--b-round) * 2);
                border-bottom-left-radius: calc(var(--b-round) * 2);
            }
        }
        > div:nth-of-type(even) {
            .prize-box {
                border-top-right-radius: calc(var(--b-round) * 2);
                border-bottom-right-radius: calc(var(--b-round) * 2);
            }
        }
    }
}

@media screen and (max-width: 1250px) {
    .prize-box > .prize-box-img {
        height: calc(14vw + 35px);
    }
}

@media screen and (max-width: 767px) {
    .prize-sec {
        padding-left: calc(var(--col-p) * 2);
        padding-right: calc(var(--col-p) * 2);
    }
    div:has(>.prize-box) {
        margin-bottom:calc(var(--col-p) * 4) ;
    }
    .prize-box {
        flex-direction: column;
        border-radius: 1000rem 1000rem calc(var(--b-round) * 2) calc(var(--b-round) * 2);
        padding-bottom: 1rem;
    }
    .prize-box > .prize-box-img {
        height: auto;
    }
    }
}

.prize-box > .prize-box-txt {
    align-content: center;
    /* margin-left: calc(var(--col-p) * 2); */
    padding: 0.5rem;
    h4 {
        font-family: zen-maru-gothic, sans-serif;
        font-weight: 700;
        display: inline-block;
        background-color: var(--main-pk);
        color: #fff;
        border-radius: 100rem;
        padding: 0.15rem 0.8rem;
    }
    p {
        margin-bottom: 0;
    }
    .small {
        display: inline-block;
        margin-top: 0.25rem;
    }
}

/*-------------------- 下單抽好禮 #prize_99 END --------------------*/

/*-------------------- APP整點搶eMoney #app_99 --------------------*/

#app_99 {
    position: relative;
    background:        
        /*url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_app_bg_pc.png) no-repeat left bottom/min(1920px, 100vw),*/
        linear-gradient(to bottom, #f7a9a8 25%, #fcfc8e 75%);

        &::before {
        content: "";
        position: absolute;
        display: inline-block;
        aspect-ratio: 1920 / 366;
        background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_app_bg_PC.png) no-repeat left / contain;
        width: 108%;
        bottom: 0;
        left: 0;
        z-index: 99;
       /*transform: translateY(-20%);*/
    }     
    &::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        max-width: 1320px;
        aspect-ratio: 1 / 1;
        top: 0;
        left: 78%;
        background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_pro-shine.png) no-repeat center top / 100% 100%;
        animation: keepRotate;
        animation-duration: 15s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

#app-emoney{ max-width: 555px;z-index: 20;}
.txt-note{font-size: 0.8rem;margin-top: 20px;}
#PL_gorden{
    position: absolute;
    bottom: 0VH;
    left: 5VW;
    z-index: 10;
    width: 26.5%;
}

#tsparticles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: 2000px;
    /*background: #c8d4fa;*/
    /* background: linear-gradient(150deg, #c8d4fa 50%, rgba(170, 157, 237, 0.6) 50%); */
}

.app-sec {
    position: relative;
    z-index: 100;
    margin-top: 1.5rem;
}

.app-sec > .rowline {
    width: min(1650px, 100%);
    margin: 0 auto;
    &:first-of-type {
        width: min(1120px, 100%);
        font-size: 1.25em;
    }
    > div {
        margin-bottom: calc(var(--col-p) * 2);
        text-align: center;
    }
}

.app-sec .app-sec-img {
    --round-color: #000000;
    position: relative;
    width: 100%;
    > img {
        border: 2px solid var(--note-txt);
        width: 90%;
        border-radius: 50%;
    }
    &::before {
        content: "";
        position: absolute;
        display: block;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        width: 88%;
        right: 2%;
        top: 5%;
        background-color: var(--round-color);
        z-index: -1;
    }
    &::after {
        content: "";
        position: absolute;
        display: inline-block;
        aspect-ratio: 638 / 90;
        background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_LINE.png) no-repeat right center;
        width: 100%;
        right: 8px;
        top: 0;
        transform: translateY(220%);
    }
}
.prize-c{position: relative;}
.app-sec-title {
    position: absolute;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    border-radius: 100rem;
    background-color: #e9554d;
    padding: 0.25em 1.12em;
    margin-top: -15px;
    z-index: 10;
    left: 0;
    bottom: 18%;
}
.app-sec-txt {
    position: absolute;
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 500;
    color: #ff605c;
    border-radius: 100rem;
    background-color: #ffffff;
    border: 2px solid #000;
    padding: 1.6em 1.12em 0.25em;
    margin-top: -15px;
    z-index: 9;
    left: 3%;
    right: 43%;
    bottom: -12px;
    line-height: 1.5rem;
}
.app-sec-txt span{color: #000;font-size: 1.0rem;}
.txt-spec{ padding: 1.1em 1.12em 0.25em !important;bottom: 11px !important;}
#pl_L{
    position: absolute;
    top: -16VH;
    left: 5VW;
    z-index: 199;
}
#emoney_L{
    position: absolute;
    top: -1VH;
    left: 5VW;
    z-index: 2;
}
#emoney_R{
    position: absolute;
    top: -1VH;
    right: 5VW;
    z-index: 2;
}
.app_99{padding: 0 !important ;}
/*
@media screen and (max-width: 1300px) {
   #pl_L{
    top: -159VH;
    left: -1VW;
    width: 14%;
} */
@media screen and (max-width: 991px) {
    .app-sec-title { 
    font-size: 1.7rem;   
    left: 3%;
    right: 3%;
    bottom: 18%;
}
.app-sec-txt {
    border: 1px solid #000;
    right: 10%;        
    left: 10%;
    bottom: -20px;
}
} 
@media screen and (max-width: 765px) {
    .app-sec-title { 
    font-size: 1.7rem;   
    left: 3%;
    right: 3%;
    bottom: 12%;
}
.app-sec-txt {
    border: 1px solid #000;
    right: 10%;        
    left: 10%;
    bottom: -20px;
}
.txt-spec{ padding: 1.1em 1.12em 0.25em !important;bottom: 4px !important;}
} 



@media screen and (max-width: 567px) {
#app_99::before {
        background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_app_bg_mobile.png) no-repeat left / contain;
        aspect-ratio: 1920 / 642;
        width: 108%;
        bottom: 0;
        left: 0;
        z-index: 99;

}
.app_99{padding: 0 0 45% 0 !important;}
#emoney_L{
    display: none;
    width: 60%;
    top: -8VH;
    left: -12VW;
    z-index: 1;
}
#emoney_R{
    width: 60%;
    top: 31VH;
    right: -12VW;
    z-index: 1;   
    display: none; 
}
#PL_gorden{
    width: 57%;
    bottom: 0VH;
    left: -2VW;
    z-index: 10;
}
#pl_L{  
    top: -13VH;
    left: 3VW;
    width: 23%;
}
.app-sec-title { 
    font-size: 1.7rem;   
    left: 3%;
    right: 3%;
    bottom: 18%;
}
.app-sec-txt {
    border: 1px solid #000;
    right: 10%;        
    left: 10%;
    bottom: -20px;
}

.app-sec > .rowline > div {
        margin-bottom: calc(var(--col-p) * 3);
}

#app_99::after {
    background:        
        position: absolute;
        width: 475%;
        max-width: 1320px;
        aspect-ratio: 1 / 1;
        top: 0;
        left: 56%;
        background: url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_pro-shine.png) no-repeat center top / 100% 100%;
        animation: keepRotate;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

}


/*-------------------- APP整點搶eMoney #app_99 END --------------------*/

/*-------------------- 社群互動禮 #fans_99 --------------------*/
@keyframes idleBtn {
    0% {
        box-shadow: 0 0 0 0 white;
    }
    34%,
    100% {
        box-shadow: 0 0 0 25px rgba(255, 255, 255, 0);
    }
}

#fans_99 {
    background:
         url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_fans_bg.png) no-repeat right top/min(1920px, 115vw),
        url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_fans_bgLINE.png) no-repeat left top/min(1920px, 100vw),        
        #97dcff;
}

@media screen and (max-width: 767px) {
    #fans_99 {
        background:
        url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_fans_LINE_mobile.png) no-repeat left top/min(1920px, 131vw),
            #b6b3f2;
    }
}

.fans-sec {
    font-size: 1.25rem;
    justify-content: center;
    > div {
        margin-bottom: calc(var(--col-p) * 2);
    }
}

.fans-sec > div .fans-box-img {
    --animation-time: 3.6s;
    /*--bottom-space: 4.3rem;*/
    will-change: animation;
    position: relative;
    text-align: center;
    margin-bottom: var(--bottom-space);
    &::before {
        content: "";
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        display: inline-block;
        inset: 0;
        margin: auto;
        width: min(233px, 69.8%);
        aspect-ratio: 1 / 1;
        animation-duration: var(--animation-time);
        animation-name: idleBtn;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        z-index: -1;
    }
    &::after {
        content: "";
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        display: inline-block;
        inset: 0;
        margin: auto;
        width: min(230px, 60%);
        aspect-ratio: 1 / 1;
        animation-duration: var(--animation-time);
        animation-name: idleBtn;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        z-index: -1;
    }
    > img {
        width: min(234px, 70%);
    }
}
#line-gift{
    position: absolute;
    right: -65px;
    bottom: -30px;
    width: 56%;
}

@media screen and (max-width: 767px) {
    .fans-sec {
        > div {
            margin-bottom: calc(var(--col-p) * 4);
        }
    }
    .fans-sec > div .fans-box-img {
        /*--bottom-space: 2rem;*/
        &::before {
            width: min(155px, 69.8%);
        }
        &::after {
            width: min(153px, 60%);
        }
        > img {
            width: min(156px, 70%);
        }
    }
}

@media screen and (max-width: 567px) {
    #line-gift{right: -6px; width: 127px;}
}


.fans-sec > div:nth-of-type(2) .fans-box-img {
    &::before {
        animation-delay: calc(var(--animation-time) / 3);
    }
    &::after {
        animation-delay: calc(var(--animation-time) / 3);
    }
}
.fans-sec > div:nth-of-type(3) .fans-box-img {
    &::before {
        animation-delay: calc(var(--animation-time) / 3 * 2);
    }
    &::after {
        animation-delay: calc(var(--animation-time) / 3 * 2);
    }
}
/*
.fans-sec .fans-box-img img[src*="icon-"] {
    position: absolute;
    right: 0;
    bottom: calc(var(--bottom-space) * -0.8 - 0.8vw);
    width: min(299px, 80%);
}

.fans-sec > div:nth-of-type(2) .fans-box-img img[src*="icon-"] {
    width: min(302px, 80.1%);
}
.fans-sec > div:nth-of-type(3) .fans-box-img img[src*="icon-"] {
    width: min(179px, 66%);
}
*/
@media screen and (max-width: 767px) {
    .fans-sec .fans-box-img img[src*="icon-"] {
        width: min(199px, 80%);
    }

    .fans-sec > div:nth-of-type(2) .fans-box-img img[src*="icon-"] {
        width: min(201px, 80.1%);
    }
    .fans-sec > div:nth-of-type(3) .fans-box-img img[src*="icon-"] {
        width: min(119px, 66%);
        right: 16%;
    }
}

.fans-sec .fans-box-txt {
    font-weight: 500;
}

.fans-sec .btn-sec {
   /* padding-top: 0;*/
}

.fans-sec .btn > span {
    position: relative;
    z-index: 1;
}

.fans-sec .btn:is(:link, :visited, :active) {
    position: relative;
    color: #fff;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 100rem;
    box-shadow: 0 0.55rem 0 rgba(var(--shadow-rgb), 0.25);
    transition: var(--transition-com);
    &::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        mix-blend-mode: soft-light;
        transition: var(--transition-com);
    }
}

.fans-sec .btn:hover {
    transform: translateY(0.15rem);
    color: #fff;
    border-color: var(--basic-txt);
    box-shadow: 0 0 0 rgba(var(--shadow-rgb), 0.75);
    &::before {
        background-color: rgba(0, 0, 0, 0.5);
    }
}
.btn.btn-fb {
    background-color: #1877f2;
}
.btn.btn-ig {
    background-color: #d91679;
}
.btn.btn-line {
    background-color: #07b53b;
}

/*-------------------- 社群互動禮 #fans_99 END --------------------*/

/*-------------------- 銀行揪加碼 #bank_99 --------------------*/

#bank_99 {
    background:
        url(https://event.cdn-eztravel.com.tw/events/promotion99/99prornotion_bank_bg.png) no-repeat center top / max(900px, 100%),
        /*url(https://event.cdn-eztravel.com.tw/events/promotion33/2025/bg-colorliner01.png) no-repeat left 3rem / min(247px, calc(147px + 6vw)),
        url(https://event.cdn-eztravel.com.tw/events/promotion33/2025/bg-colorliner02.png) no-repeat right calc(100% - 2rem) / min(199px, calc(100px + 6vw)),*/
        #f8b2a5;
        font-size: 0.9375rem;
}

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

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

.bank-box {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--b-round);
    border: 1px solid black;
    background: #ffffff;
}

.bank-box > p {
    display: flex;
    width: 100%;
    height: 95px;
    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_99 END --------------------*/

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

#note_33 {
    font-size: min(16px, 0.9375rem);
    background:
        url(https://event.cdn-eztravel.com.tw/events/promotion33/2025/bg-flowdown-blue.png) no-repeat right top/calc(679 / 1920 * 100%),
        var(--main-gray);
}

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

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

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

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

#note_33 li {
    text-align: left;
}

#note_33 .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_33 .contentbox > ul {
        width: 95%;
    }

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

/*  旋轉 */
@keyframes keepRotate {
    0% {
        transform: translateX(-50%) rotate(0);
    }

    100% {
        transform: translateX(-50%) rotate(1turn);
    }
}
.movelight{
    animation-name: movelight;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;}
/* 往上升 */
@keyframes movelight {
    0% {
        opacity: 0;
        top: 60%;
    }
    35% {
        opacity: 1;
        top: 33%;
    }
    70% {
        opacity: 1;
        top: 6%;
    }
    100% {
        opacity: 0;
        top: 0;
    }
}

/* 漂浮 */
@keyframes slideInUp-set {
    0% {
        -webkit-transform: translateX(-50%) translate3d(0, 30%, 0);
        transform: translateX(-50%) translate3d(0, 30%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translateX(-50%) translateZ(0);
        transform: translateX(-50%) translateZ(0);
    }
}

.bright {animation: brightness 5s ease-in-out infinite; }
.bright_B {animation: brightness 1.5s ease-in-out infinite; }
/* 閃亮 */
@keyframes brightness {
    0% {
        filter: brightness(1.0);;
    }
    50% {
        filter: brightness(1.3);;
    }
    100% {
        filter: brightness(1.0);;
    }
  }

  /* 搖擺 */
  .swing{
    animation-delay: 2;
    animation: swing-set;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }
@keyframes swing-set {
    20% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }

    40% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    60% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

    80% {
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
.slideinup{
    animation: slideInUp-set;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;}
/*上滑 */
@keyframes slideInUp-set {
    0% {
        -webkit-transform: translateX(-50%) translate3d(0, 30%, 0);
        transform: translateX(-50%) translate3d(0, 30%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translateX(-50%) translateZ(0);
        transform: translateX(-50%) translateZ(0);
    }
}
.float{animation: float 5s ease-in-out infinite;}
/* 漂浮 */
@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
  }
}