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

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

:root {
    --basic-txt: #231815;
    --sub-txt: #412414;
    --note-txt: #774b63;
    --light-red: #f09ba5;
    --main-red: #e95e67;
    --deep-red: #e74560;
    --light-ye: #fef3cc;
    --main-ye: #ffe57a;
    --deep-ye: #f0be24;
    --main-gn: #63c0ab;
    --ez-logo: #11d073;
    --line-logo: #07b53b;
    --light-blue: #9ed8f6;
    --main-blue: #0095ff;
    --focus-line: var(--deep-red);
    --shadow-rgb: 65, 36, 20;
    --b-round: 2.5rem;
    --content-p: calc(3vw + 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;
    border-width: 2px;
    border-style: solid;
    border-color: var(--sub-txt);
    border-radius: 100rem;
    background: linear-gradient(to right, var(--gradient-1) 0%, var(--gradient-2) 70%, var(--gradient-3) 100%);
    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;
}

.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;
} */

a {
    cursor: pointer;
}

.btn {
    border-radius: 500px;
    font-weight: 500;
}

.btn-lg {
    font-weight: 700 !important;
}

.btn-go::after {
    content: "\e913";
    font-family: "Material Symbols Outlined";
    font-size: 100%;
    font-weight: 400;
    color: var(--pro-color);
    margin-left: 0.15em;
    vertical-align: middle;
    margin-right: 0;
    transition: var(--transition-com);
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

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

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

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

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

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

img {
    max-width: 100%;
}

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

section h1:first-of-type {
    position: relative;
    display: flex;
    height: 5.055555555555556rem;
    line-height: 5.055555555555556rem;
    justify-content: center;

    >.h1-footer {
        aspect-ratio: 92 / 91;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/titlebg-foot.png) no-repeat right center/100% 100%;
    }

    >.h1-header {
        aspect-ratio: 1 / 1;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/titlebg-head.png) no-repeat left center/100% 100%;
    }

    >.h1-body {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/titlebg-body.png) repeat-x center/auto 100%;
        font-family: zen-maru-gothic, sans-serif;
        font-weight: 900;
        font-style: normal;
        color: var(--main-ye);
        position: relative;
        white-space: nowrap;
        text-align: center;
        padding: 0;
        z-index: 100;

        >img[src*='title-icon'] {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -60%);
            z-index: -1;
        }

        &::before {
            content: attr(data-title);
            display: inline-block;
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
            color: var(--main-red);
            -webkit-text-stroke: 6px var(--main-red);
            text-stroke: 6px var(--main-red);
            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;
        }

        &.h1-s {
            display: none;
        }
    }

    +h4 {
        position: relative;
        color: var(--basic-txt);
        font-weight: 600;
        line-height: 1.3;
        z-index: 100;
    }
}

@media screen and (max-width: 575px) {
    section h1:first-of-type {
        >.h1-body {
            >img[src*='title-icon'] {
                transform: translate(-50%, -40%) scale(0.8);
                z-index: -1;
            }
        }
    }
}

.z-font {
    font-family: zen-maru-gothic, sans-serif;
}

.line-logo {
    color: var(--line-logo);
}

/* .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;
}

strong.focus {
    border-bottom: 3px solid var(--focus-line);
}

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

/*-------------------- 開搶預備起 #itf_time --------------------*/


#itf_time {
    --focus-line: var(--main-blue);
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-balloon-l.png) no-repeat left top/calc(438 / 1920 * 100%), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-balloon-r.png) no-repeat right top/calc(360 / 1920 * 100%), linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--light-ye) 98%);
}

@media screen and (max-width: 767px) {
    #itf_time {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-balloon-l.png) no-repeat -1rem -1rem/40%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-balloon-r.png) no-repeat right bottom/40%, linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, var(--light-ye) 98%);
    }
}

.time-sec {
    .time-sec-img>img {
        width: min(291px, 85%);
        filter: drop-shadow(0 0.4rem 0 rgba(64, 35, 19, 0.2));
    }

    h2 {
        font-weight: 700;
        color: var(--focus-line);
    }

    h5 {
        font-weight: 700;

        b {
            color: var(--focus-line);
        }
    }
}

@media screen and (max-width: 767px) {
    .time-sec {
        .time-sec-img>img {
            width: 70%;
        }
    }
}

/*-------------------- 放大折扣碼 #itf_coupon --------------------*/

#itf_coupon#itf_coupon {
    padding-top: calc(var(--content-p) * 1.5);
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-bubble-l.png) no-repeat left 0.5rem/calc(314 / 1920 * 100%), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-bubble-r.png) no-repeat right 0.25rem/calc(250 / 1920 * 100%);

    &::before {
        content: '';
        position: absolute;
        display: inline-block;
        top: 0;
        left: 50%;
        width: calc(539 / 1920 * 100%);
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-coupon-top.png) no-repeat center bottom/contain;
        aspect-ratio: 539/183;
        transform: translate(-50%, -20%);
        z-index: 1;
    }
}

@media screen and (max-width: 767px) {
    #itf_coupon#itf_coupon {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-bubble-l.png) no-repeat left -1rem/30%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-bubble-r.png) no-repeat right 0.25rem/30%, var(--light-red);

        &::before {
            content: '';
            position: absolute;
            display: inline-block;
            top: 0;
            left: 50%;
            width: 70%;
            background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-coupon-top.png) no-repeat center bottom/contain;
            aspect-ratio: 539/183;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
    }
}

/* 背景泡泡 */



.bg-bubble {
    display: none;
}

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

    @property --t {
        syntax: '<number>';
        initial-value: 0;
        inherits: true;
    }

    .bg-bubble {
        --t: 0;
        display: block;
        position: absolute;
        inset: 0;
        animation: 30s timeOn infinite linear;
        background: var(--light-red);
        width: 100%;
        height: 100%;
        /* overflow: hidden; */
        z-index: -1;
    }

    #itf_theme .bg-bubble {
        background: var(--light-blue);
    }

    @keyframes timeOn {
        50% {
            --t: 1;
        }
    }

    #loader {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .blobs {
        filter: url("#goo");
        -webkit-filter: url("#goo");
    }

    .blobs>circle {
        fill: #fef3cc;
    }
}

/* 背景泡泡 END */

.coupon-sec {
    position: relative;
    justify-content: center;
    margin: 1rem auto 0;
    z-index: 100;
}

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

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

@media screen and (min-width: 768px) {
    .coupon-sec>div[class*='col'] {
        flex: 0 0 20%;
        width: 20%;
    }
}

@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-gunnarworks.com/events/promotion33/2025/coupon-shadow.png) no-repeat right bottom/100% 100%;
    opacity: 0.28;
    z-index: -1;
    transition: var(--transition-com);
} */

.coupon-sec a {
    cursor: pointer;
}

.coupon-sec a:not(.btn) img {
    filter: drop-shadow(8px 8px 0 rgba(65, 36, 20, 0.3));
    transition: var(--transition-com);
}

.coupon-sec a:not(.btn):hover img {
    filter: drop-shadow(0px 0px 0 rgba(65, 36, 20, 1));
    transform: scale(1.1);
}

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

/* 領取完畢 */

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

.coupon-sec .sold_out {
    position: relative;
}

.rushbuy-box .sold_out {
    background: rgba(0, 0, 0, 0.5);
}

.sale-sec .sold_out {
    position: relative;

    .sale-box {
        filter: saturate(0) brightness(0.5);

        &::after {
            display: none;
        }
    }
}

.sold_out>img {
    filter: brightness(0.5) !important;
}

.sold_out:hover>img {
    transform: scale(1);
    filter: brightness(0.5) !important;
}

.sold_out::after {
    content: '使用完畢';
    font-family: zen-maru-gothic, sans-serif;
    display: inline-block;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.15rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    white-space: nowrap;
    /* background: rgba(0, 0, 0, 0.5); */
    z-index: 10;
}

:is(.sold_out[href], .sale-sec .sold_out)::after {
    content: '已售完';
}

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


/*-------------------- 使用教學 #itf_teach --------------------*/

#itf_teach#itf_teach {
    padding-top: calc(var(--content-p) / 2);
    padding-bottom: calc(var(--content-p) / 2);
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-step-ribbons.png) no-repeat center bottom/min(1826px, 100%), linear-gradient(to bottom, var(--light-red) 15%, var(--light-ye) 90%);
}

.step-coupon {
    position: relative;
    justify-content: center;
    margin: 1.5rem auto 0;
    width: min(1100px, 100%);

    &::before,
    &::after {
        content: '';
        position: absolute;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-waiter-l.png) no-repeat center bottom/contain;
        width: calc(300 / 1100 * 100%);
        aspect-ratio: 328 / 315;
        bottom: 0;
        transform: translateX(-100%);
    }

    &::before {
        left: 0;
    }

    &::after {
        right: 0;
        transform: translateX(100%) scaleX(-1);
    }

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

@media screen and (max-width: 767px) {
    #itf_teach#itf_teach {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-step-ribbons.png) no-repeat center bottom/200%, linear-gradient(to bottom, var(--light-red) 15%, var(--light-ye) 90%);
    }

    .step-coupon {

        &::before,
        &::after {
            display: none;
        }
    }
}

.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(--main-red);
    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;
        transform: translateX(50%);
    }

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

/*-------------------- 兔DAY主題日 #itf_theme --------------------*/

#itf_theme#itf_theme {
    padding-left: 0;
    padding-right: 0;
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-star-l.png) no-repeat 1% 3.5%/min(338px, 18%), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-star-r.png) no-repeat 98% 5%/min(296px, 16%);
}

@media screen and (max-width: 767px) {
    #itf_theme#itf_theme {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-star-l.png) no-repeat 1% top/30%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-star-r.png) no-repeat 98% 0.5rem/30%, var(--light-blue);
    }
}

.theme-rushbuy {
    text-align: center;

    >.rushbuy100-sec {
        display: inline-block;
        width: min(1400px, 100%);
        margin-bottom: calc(var(--col-p) * 4);
    }
}

.rushbuy-head {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: var(--basic-txt);
    border-radius: 500px;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    z-index: 10;

    >img[src*='title-today11'] {
        height: min(70px, 3.89rem);
        margin-right: 0.5rem;
    }

    >img[src*='title-today-icon'] {
        margin-top: -0.5rem;
    }

    >span {
        color: var(--main-ye);
        text-align: left;
        line-height: 1.3;
        margin-left: 0.5rem;
        margin-bottom: 0;

        >strong {
            color: #fff;
        }
    }
}

@media screen and (max-width: 991px) {
    .rushbuy-head {

        >img[src*='title-today11'] {
            zoom: 0.8;
        }

        >img[src*='title-today-icon'] {
            zoom: 0.8;
        }
    }
}

@media screen and (max-width: 767px) {
    .theme-rushbuy .rushbuy100-sec .rushbuy-head:first-of-type span {
        text-align: center;
    }

    .rushbuy-head {

        >img[src*='title-today11'] {
            zoom: 0.6;
        }

        >img[src*='title-today-icon'] {
            zoom: 0.6;
        }

        >span {
            /* text-align: center; */
            padding-bottom: 0.35rem;
        }
    }
}

.rushbuy-body {
    margin-top: -1rem;
}

.theme-rushbuy>.rushbuy50-sec {
    >div {
        margin-bottom: calc(var(--col-p) * 2.5);
    }

    .rushbuy-body {
        border: 6px solid #fff;
        padding-top: calc(var(--col-p) * 2);
        padding-bottom: calc(var(--col-p) * 2);

        >div {
            position: relative;

            &:first-of-type {
                &::before {
                    content: '';
                    position: absolute;
                    display: inline-block;
                    aspect-ratio: 139/194;
                    width: min(139px, calc(139 / 1920 * 4 * 100%));
                    bottom: -1rem;
                    left: 0;
                    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/today-coupon-icon01.png) no-repeat left bottom/contain;
                    z-index: 1;
                }
            }

            &:last-of-type {
                &::before {
                    content: '';
                    position: absolute;
                    display: inline-block;
                    aspect-ratio: 140/162;
                    width: min(140px, calc(140 / 1920 * 4 * 100%));
                    bottom: -1rem;
                    right: 0;
                    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/today-coupon-icon02.png) no-repeat right bottom/contain;
                    z-index: 1;
                }
            }
        }
    }
}

.theme-rushbuy>.rushbuy50-sec>div {

    a {
        >img[src*='today-coupon'] {
            width: min(392px, 90%);
            height: auto;
            filter: drop-shadow(8px 9px 0 rgba(0, 0, 0, 0.2));
            transition: var(--transition-com);
        }

        &:hover>img {
            transform: scale(1.05);
            filter: drop-shadow(0 0 0 rgba(0, 0, 0, 1));
        }
    }

    &:nth-of-type(odd) {
        padding-left: 0;

        .rushbuy-body {
            border-top-right-radius: calc(var(--b-round) *1.5);
            border-bottom-right-radius: calc(var(--b-round) *1.5);
            border-left: none;

        }
    }

    &:nth-of-type(even) {
        padding-right: 0;
        padding-top: calc(var(--col-p) * 3);

        .rushbuy-body {
            border-top-left-radius: calc(var(--b-round) *1.5);
            border-bottom-left-radius: calc(var(--b-round) *1.5);
            border-right: none;

        }
    }
}

@media screen and (max-width: 767px) {
    .theme-rushbuy>.rushbuy50-sec>div {

        a {
            >img[src*='today-coupon'] {
                width: 100%;

            }
        }
    }
}

.rushbuy100-sec .rushbuy-body .rushbuy-way {
    justify-content: center;
    background: #fff;
    border-top-left-radius: var(--b-round);
    border-top-right-radius: var(--b-round);
    padding: 2rem 0.5rem 0;

    >.h1 {
        color: var(--light-red);
        font-weight: 700;
        line-height: 1.3;
        margin-right: 1.5rem;
    }

    ul li {
        text-indent: -1.5rem;
        line-height: 1.35;
        margin-bottom: 0.2rem;

        &::before {
            content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/list-icon-01.png);
            vertical-align: sub;
            margin-right: 0.26rem;
        }
    }
}

.rushbuy-item-sec {
    >div:nth-of-type(1) {
        --pro-color: var(--main-red);
    }

    >div:nth-of-type(2) {
        --pro-color: var(--main-red);
    }

    >div:nth-of-type(3) {
        --pro-color: var(--deep-ye);
    }

    >div:nth-of-type(4) {
        --pro-color: var(--deep-ye);
    }
}

@media screen and (min-width: 768px) {
    .rushbuy-item-sec {
        >div:nth-of-type(1) {
            border-bottom-left-radius: var(--b-round);
        }

        >div:nth-of-type(4) {
            border-bottom-right-radius: var(--b-round);
        }
    }
}

.rushbuy-item-sec {
    >div {
        position: relative;
        padding: 1rem 0.5rem 2rem;
        background: var(--pro-color);
        mask-image: radial-gradient(circle at 6px, transparent 6px, red 6.5px);
        mask-repeat: repeat;
        mask-position: -6px;
        mask-size: 100% 25px;

        h5 {
            font-weight: 600;
            color: #fff;
            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%;
            }
        }
    }
}

@media screen and (max-width: 767px) {
    .rushbuy100-sec {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .rushbuy-item-sec {

        >div {
            padding: 1rem 0.5rem 3rem;

        }
    }
}

.rushbuy-box>a {
    ~.btn-go {
        background: #fff;
        color: var(--basic-txt);
        padding: 0 0.6rem;
        transition: var(--transition-com);
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
    }

    &:hover~.btn-go {

        background: var(--basic-txt);
        color: #ffffff;
        padding: 0 0.8rem;

        &::after {
            color: #ffffff;
            transform: translateY(-5px);
        }
    }
}

.rushbuy-box>a {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 10;
}

.rushbuy-meal {
    position: relative;
    display: inline-block;
    width: min(1038px, 80%);

    a {
        >img {
            width: min(1038px, 100%);
            height: auto;
            filter: drop-shadow(8px 9px 0 rgba(0, 0, 0, 0.2));
            transition: var(--transition-com);
        }

        &:hover>img {
            transform: scale(1.05);
            filter: drop-shadow(0 0 0 rgba(0, 0, 0, 1));
        }
    }

    &::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        aspect-ratio: 181/196;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/today-meal-icon01.png) no-repeat center bottom/contain;
        width: min(181px, calc(181 / 1038 * 100%));
        transform: translateX(-80%);
    }

    &::after {
        content: '';
        position: absolute;
        top: -23%;
        right: 2%;
        aspect-ratio: 146/217;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/today-meal-icon02.png) no-repeat center top/contain;
        width: min(146px, calc(146 / 1038 * 100%));
        z-index: -1;
    }

    >.meal-icon {
        position: absolute;
        bottom: 0;
        right: -1.25rem;
        aspect-ratio: 226/489;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/today-meal-icon03.png) no-repeat center bottom/contain;
        width: min(226px, calc(226 / 1038 * 100%));
        transform: translateX(100%);
    }

}

@media screen and (max-width: 767px) {
    .rushbuy-meal {

        >.meal-icon {
            right: 0;
        }

    }
}

.rushbuy100-sec .rushbuy100-note {

    ul {
        padding-top: 1rem;
        display: inline-block;
        max-width: 90%;

        li {
            text-indent: -1.5rem;
            line-height: 1.35;
            margin-bottom: 0.1rem;

            &::before {
                content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/list-icon-02.png);
                vertical-align: sub;
                margin-right: 0.26rem;
            }
        }
    }
}

.rushbuy50-sec .rushbuy50-bottom {
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-today-bottom.png) no-repeat left center/min(857px, 90%);
}

@media screen and (max-width: 767px) {
    .rushbuy50-sec .rushbuy50-bottom {
        aspect-ratio: 857/539;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-today-bottom.png) no-repeat center/90%;
    }

}


/* 按鈕 .btn_sale */

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

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

.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: linear-gradient(to right, var(--sale-color1) 0%, var(--sale-color2) 100%);
    border: none;
    transition:
        0.25s --sale-color1,
        0.25s --sale-color2;
}

.btn_sale:hover {
    --sale-color1: #d21a47;
    --sale-color2: var(--main-pl);
    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;
}

/*-------------------- 兔DAY主題日 #itf_theme END --------------------*/

/*-------------------- 放大破盤搶 #itf_sale --------------------*/

#itf_sale {
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale-l.png) no-repeat 5% 4% / min(485px, 25.3%), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale-r.png) no-repeat 83% 5.2% /min(256px, 13.4%), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-arc.png) no-repeat center top/100%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale-starrysky.png) no-repeat center 15%/88%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale.jpg) repeat;
}

@media screen and (min-width: 992px) {
    .sale-sec>div {
        flex: 0 0 auto;
        width: 20%;
    }
}

@media screen and (max-width: 767px) {
    #itf_sale {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale-l.png) no-repeat 0 0.5rem/30%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale-r.png) no-repeat right 1.5rem /16%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-arc.png) no-repeat center top/100%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale-starrysky.png) no-repeat center 15%/88%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale.jpg) repeat;
    }
}

.sale-sec {
    justify-content: center;
}

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

    .sale-box {
        position: relative;
        aspect-ratio: 1 / 1;
        text-align: start;
        padding: calc(var(--col-p) * 3) 1rem 1rem calc(var(--col-p) * 3);
        z-index: 10;
    }

    &:nth-of-type(odd) .sale-box {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale01.png) no-repeat center top/100%;
        --bg-color: #f5a10f;
        --pro-color: #eb6700;
    }

    &:nth-of-type(even) .sale-box {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-sale02.png) no-repeat center top/100%;

        --bg-color: #9bcb60;
        --pro-color: #679944;
    }

    /* 插畫配圖區 */
    .sale-box::before,
    .sale-box::after {
        position: absolute;
    }

    &:nth-of-type(1) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon01.png);
        bottom: 0;
        right: 0;
    }

    &:nth-of-type(2) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon02.png);
        top: 10%;
        right: 0;
    }

    &:nth-of-type(3) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon03.png);
        top: 10%;
        right: 0;
    }

    &:nth-of-type(4) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon04.png);
        top: 10%;
        right: 0;
    }

    &:nth-of-type(5) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon05.png);
        top: 10%;
        right: 0;
    }

    &:nth-of-type(6) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon06.png);
        bottom: -5%;
        right: 5%;
    }

    &:nth-of-type(7) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon07.png);
        top: 10%;
        right: 0;
    }

    &:nth-of-type(8) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon08.png);
        top: 10%;
        right: 0;
    }

    &:nth-of-type(9) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon09.png);
        top: 0;
        right: 0;
    }

    &:nth-of-type(10) .sale-box::after {
        content: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/sale-icon10.png);
        top: 10%;
        right: 0;
    }

}

@media screen and (max-width: 1640px) {
    .sale-box::after {
        zoom: 0.8;
    }
}

@media screen and (max-width: 1490px) {
    .sale-sec>div .sale-box {
        padding: calc(var(--col-p) * 2) 1rem 1rem calc(var(--col-p) * 2);

    }

    .sale-box::after {
        zoom: 0.7;
    }
}

@media screen and (max-width: 991px) {
    .sale-sec>div .sale-box {
        padding: 1rem;
    }

    .sale-box::after {
        zoom: 0.6;
    }
}

@media screen and (max-width: 767px) {
    .sale-box::after {
        zoom: 0.5;
    }
}

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

    /* 補不夠的背景 */
    .sale-box::before {
        content: '';
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80%;
        background: var(--bg-color);
        border-radius: 100px 100px 140px 140px;
        /* border-bottom-left-radius: 150px;
        border-bottom-right-radius: 150px; */
        z-index: -1;
    }
}


.sale-box {
    .h1 {
        color: var(--main-ye);
        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),
            2.5px 2.5px 0 var(--basic-txt),
            3px 3px 0 var(--basic-txt);
        margin-bottom: 0;
        padding-left: calc(var(--col-p) * 2);
        line-height: 1.45;
    }

    .sale-box-txt {
        line-height: 1.45;

        >strong {
            line-height: 0.75;
        }

        .sale-box-title {
            color: #ffffff;
        }
    }

    .btn-sec {
        text-align: start;
        padding: 0;
        padding-inline-start: calc(var(--col-p) * 2);
    }

    .btn-go {
        color: #ffffff;
        padding: 0 0.6rem;
        background: var(--pro-color);
        transition: var(--transition-com);

        &::after {
            color: #ffffff;
            transition: var(--transition-com);
        }

        &:hover {
            background: #ffffff;
            color: var(--pro-color);
            padding: 0 0.8rem;

            &::after {
                color: var(--pro-color);
                transform: translateY(-5px);
            }
        }
    }
}

/*-------------------- 會員放大抽 #itf_member --------------------*/

#itf_member#itf_member {
    --focus-line: var(--main-ye);
    padding-top: calc(var(--content-p) * 1.5);
    padding-bottom: calc(var(--content-p) * 2);
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-appmoon.png) no-repeat 20% bottom/min(539px, calc(539/1920 * 100%)), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-apptop.png) no-repeat left bottom/100%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-member.jpg) repeat;

    &::before {
        content: '';
        position: absolute;
        display: block;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-coins.png) no-repeat center/100%;
        aspect-ratio: 1920 / 203;
        width: max(100%, 100%);
        top: 0;
        left: 0;
        transform: translateY(-80%);
    }
}

@media screen and (max-width: 767px) {
    #itf_member#itf_member {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-appmoon.png) no-repeat center bottom/60%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-apptop.png) no-repeat left bottom/100%, url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-member.jpg) repeat;
    }
}

.member-head {
    text-align: start;
    padding-inline-start: calc(var(--col-p) * 7);
}

.member-head h2 {
    position: relative;
    display: inline-block;
    background: var(--basic-txt);
    border-radius: 500px;
    padding: 0.75rem calc(var(--col-p) * 4) 0.75rem calc(var(--col-p) * 4.5);
    z-index: 100;

    >img {
        display: flex;
    }

    >img[src*='title-icon-member'] {
        position: absolute;
        height: min(106px, 180%);
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
    }

    &::before {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        aspect-ratio: 1/1;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/title-coin-member.png) no-repeat center/contain;
        height: min(59px, 100%);
        transform: translateX(40%);
    }
}

@media screen and (max-width: 767px) {
    .member-head h2 {
        padding-left: calc(var(--col-p) * 5.5);

        img {
            zoom: 0.7;
        }
    }
}

.member-body {
    background: #ffffff;
    border: 3px solid var(--sub-txt);
    border-radius: var(--b-round);
    margin-top: -2rem;
    padding-top: 2.5rem;

    .member-txt {
        text-align: start;
        padding-inline-start: calc(var(--col-p) * 3);
        margin-block-end: 1rem;

        b {
            color: var(--deep-red);
        }

        strong {
            line-height: 1.2;
        }
    }

    .member-pic {
        position: relative;

        >img {
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

@media screen and (min-width: 768px) {
    .member-sec>div:nth-of-type(even) {
        margin-block-start: calc(var(--col-p) * 4);
    }
}


.member-sec>div {
    margin-block-end: calc(var(--col-p) * 2);

    &:nth-of-type(1) {
        .member-pic>img {
            width: min(419px, 120%);
            transform: translate(10%, -30%);
        }
    }

    &:nth-of-type(2) {
        .member-pic>img {
            width: min(533px, 125%);
            transform: translate(0, -25%);
        }
    }

    &:nth-of-type(3) {
        .member-pic>img {
            width: min(421px, 120%);
            transform: translate(10%, -27%);
        }
    }

    &:nth-of-type(4) {
        .member-pic>img {
            width: min(422px, 120%);
            transform: translate(10%, -40%);
        }
    }
}

@media screen and (max-width: 767px) {
    .member-body {
        .member-txt {
            text-align: center;
        }

        .member-pic {
            aspect-ratio: 2/1;

            >img {
                width: 90% !important;
                left: 50%;
                transform: translate(-50%, 0) !important;
            }
        }
    }

}


/*-------------------- 會員放大抽 #itf_app --------------------*/

@keyframes rotate {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

@keyframes bounceIn-set {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3)
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }

    95% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale3d(.99, .99, .99);
        transform: scale3d(.99, .99, .99)
    }
}

#itf_app {
    background: var(--main-red);
}

.app-sec {
    justify-content: end;

    >div {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 689/649;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-dialogbox.png) no-repeat center/100%;

        >.app-content {
            position: relative;
            display: inline-block;
            text-align: center;
            z-index: 1;
        }

        &::before {
            content: '';
            position: absolute;
            display: block;
            inset: 0;
            background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-box-ray.png) no-repeat center/100% 100%;
            animation: rotate 15s linear infinite;
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            display: block;
            width: 140%;
            aspect-ratio: 957 / 665;
            background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-app-ribbons.png) no-repeat center center / 100%;
            animation: bounceIn-set;
            animation-duration: 2.5s;
            animation-iteration-count: infinite;
            z-index: -1;
        }

        .app-doll {
            content: '';
            position: absolute;
            display: block;
            inset: 0;
            aspect-ratio: 497/661;
            background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/pic-app.png) no-repeat center/auto min(661px, 100%);
            height: calc(700 / 649 *100%);
            left: 0;
            top: 0;
            transform: translateX(-90%);
        }
    }
}

.app-content {
    font-weight: 500;

    strong {
        font-weight: 900 !important;
    }

    img[src*='linepoints-1000'] {
        width: min(317px, 60%);
    }

    .linepoints-sec {
        margin-bottom: 1rem;
        justify-content: center;

        >[class^='col'] {
            padding-right: calc(var(--col-p) / 2);
            padding-left: calc(var(--col-p) / 2);
        }

        img[src*='linepoints'] {
            transform: rotate(-10deg);
            height: min(89px, 5vw);
        }
    }
}

@media screen and (max-width: 767px) {
    .app-sec {
        justify-content: center;

        >div {
            background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-dialogbox.png) no-repeat center/100%;

            .app-doll {
                content: '';
                position: absolute;
                display: block;
                inset: 0;
                aspect-ratio: 497/661;
                background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/pic-app.png) no-repeat center/auto min(661px, 100%);
                height: 40vw;
                left: -10vw;
                top: auto;
                bottom: 1rem;
                transform: translateX(0);
            }
        }

    }

    .app-content {
        .linepoints-sec {
            img[src*='linepoints'] {
                height: 13vw;
            }
        }
    }
}

.app-sec .btn-go {
    background: var(--basic-txt);
    color: #fff;
    transition: var(--transition-com);

    &:hover {
        background: var(--deep-red);
        color: #fff;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

/*-------------------- 社群放大抽 #itf_media --------------------*/

@keyframes idleBtn {
    0% {
        box-shadow: 0 0 0 0 white;
    }

    34%,
    100% {
        box-shadow: 0 0 0 25px rgba(255, 255, 255, 0);
    }
}

#itf_media#itf_media {
    padding-top: calc(var(--content-p) * 1.5);
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-media.jpg) repeat;
}

#itf_media .btn:is(:link, :visited, :active) {
    position: relative;
    background: var(--basic-txt);
    color: #fff;
    overflow: hidden;
    border: 2px solid var(--basic-txt);
    border-radius: 500px;
    box-shadow: 0 0.5rem 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);
    }
}

#itf_media .btn:hover {
    background-color: var(--media-color);
    transform: translateY(0.15rem);
    color: #fff;
    box-shadow: 0 0 0 rgba(var(--shadow-rgb), 0.75);
    padding-left: 1.25rem;
    padding-right: 1.25rem;

    &::before {
        background-color: rgba(0, 0, 0, 1);
    }
}

#itf_media .btn>span {
    position: relative;
    z-index: 1;
}

.media-sec {
    justify-content: center;
    margin-top: 1rem;

    >div {
        margin-bottom: calc(var(--col-p) * 2);

        &:nth-of-type(1) {
            --media-color: #1877f2;
        }

        &:nth-of-type(2) {
            --media-color: #d91679;
        }

        &:nth-of-type(3) {
            --media-color: var(--line-logo);
        }

    }
}

.media-sec .media-box-img {
    position: relative;
    z-index: 10;

    >img {
        width: min(244px, 70%);
    }
}

.media-sec .media-box-txt {
    background: var(--media-color);
    color: #ffffff;
    border-radius: calc(var(--b-round) * 0.6);
    display: inline-block;
    padding: 1rem;
    margin-top: -0.5rem;
    width: min(320px, 100%);

    strong {
        color: var(--main-ye);
    }
}

.media-sec .btn-sec {
    padding-top: 0;
    margin-top: -1rem;
}


.sticker-sec {
    --media-color: var(--basic-txt);
    margin-top: calc(var(--content-p) * 0.6);
}

.sticker-head {
    position: relative;
    padding-bottom: 0.5%;
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/title-bg-sticker.png) no-repeat center bottom /min(1012px, 100%);
    z-index: 100;

    h4 {
        font-weight: 700;
        color: #129052;
        margin-top: 1rem;
    }
}

@media screen and (max-width: 767px) {
    .sticker-head {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/title-bg-sticker.png) no-repeat center bottom /100% 80%;
    }
}

.sticker-body {
    background: #ffffff;
    border-radius: var(--b-round);
    border: 4px solid var(--deep-ye);
    margin-top: -6.5%;
    padding: 7% var(--col-p) 1rem;
}

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

    .sticker-body .rowline {
        justify-content: center;
        align-items: center;

        >div {
            &:nth-of-type(2n) {
                flex: 0 0 20%;
                width: 20%;
            }

            &:nth-of-type(1),
            &:nth-of-type(5) {
                flex: 0 0 16%;
                width: 16%;
            }

            &:nth-of-type(3) {
                flex: 0 0 28%;
                width: 28%;
            }

        }
    }
}

@media screen and (max-width: 767px) {
    .sticker-body {
        margin-top: -3rem;
        padding: 4rem var(--col-p) 1rem;
    }

    .sticker-body .rowline {
        justify-content: center;
        align-items: center;

        >div {

            &:nth-of-type(3) {
                flex: 0 0 80%;
                width: 80%;
            }

        }
    }
}

/*-------------------- 新會員放大禮 #itf_gift --------------------*/

#itf_gift {
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/pic-gift01.png) no-repeat calc(100% - 1rem) center/min(920px, 50%), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/pic-gift02.png) no-repeat 5% 80%/min(280px, 14.6%), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-gift.jpg) repeat;
}

@media screen and (max-width: 767px) {
    #itf_gift {
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/pic-gift01.png) no-repeat right bottom/min(920px, 50%), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/pic-gift02.png) no-repeat 5% 80%/min(280px, 14.6%), url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-gift.jpg) repeat;
    }
}

.gift-sec {
    justify-content: start;

    >div {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 689/649;
        background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-dialogbox.png) no-repeat center/100%;

        >.gift-content {
            position: relative;
            display: inline-block;
            text-align: center;
            z-index: 1;
        }

        /* .gift-doll {
            content: '';
            position: absolute;
            display: block;
            inset: 0;
            aspect-ratio: 497/661;
            background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/pic-app.png) no-repeat center/auto min(661px, 100%);
            height: calc(700 / 649 *100%);
            left: 0;
            top: 0;
            transform: translateX(-90%);
        } */
    }
}

.gift-content {
    font-weight: 500;

    p {
        margin-bottom: 0.5rem;
    }

    strong {
        color: var(--deep-red);
    }

    img[src*='linepoints-1000'] {
        width: min(317px, 80%);
    }
}

.gift-sec .btn-go {
    background: var(--basic-txt);
    color: #fff;
    transition: var(--transition-com);

    &:hover {
        background: var(--deep-red);
        color: #fff;
        padding-left: 1.75rem;
        padding-right: 1.75rem;
    }
}

/*-------------------- 銀行放大送 #itf_bank --------------------*/

#itf_bank {
    background: url(https://event.cdn-gunnarworks.com/events/travelfair/2025itf/bg-bank.jpg) repeat;
    font-size: 0.9375rem;
}

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

#itf_bank .rowline {
    justify-content: center;

    >div {
        margin-bottom: 1.5rem;
    }
}

.bank-box {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--b-round) * 0.5);
    border: 3px solid var(--sub-txt);
    background: #ffffff;
    box-shadow: 0.25rem 0.5rem 0 rgba(var(--shadow-rgb), 0.25);
    overflow: hidden;
    text-decoration: none !important;
        color: inherit;
    transition: var(--transition-com);

    &:hover {
        box-shadow: 0 0 0 rgba(var(--shadow-rgb), 1);
        transform: scale(1.02);
        color: inherit;
    }
}

.bank-box>p {
    display: flex;
    width: 100%;
    height: 95px;
    border-bottom: 1px solid #dee2e6;
}

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

/*-------------------- 銀行揪加碼 #itf_bank END --------------------*/

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

#note_33 {
    font-size: min(16px, 0.9375rem);
    background:
        url(https://event.cdn-gunnarworks.com/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-gunnarworks.com/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-gunnarworks.com/events/travelfair/2022/note_icon02.png) no-repeat left 0.46em;
    padding-left: 20px;
}

.note_content_item {
    background: url(https://event.cdn-gunnarworks.com/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;
    }
}