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


/*-------------------- 全頁共用 --------------------*/
:root {
    --basic-txt: #ffffff;
    --main-color: #97cbd4;
    --sub-color: var(--sb-beam-5);
    --sb-void: #050710;
    --sb-deep: #0c1120;
    --sb-mist: #332c59;
    --sb-mist-2: #1a3a44;
    --sb-core: #eef7fb;
    --sb-core-mid: #55c9d6;
    --sb-beam: #8a74e0;
    --sb-beam-2: #3f6f9e;
    --sb-beam-3: #2fa4ab;
    --sb-beam-4: #a878c7;
    --sb-beam-5: #b5a8ff;
    --sb-spark: #e7f2ff;
    --sb-spark-warm: #bdeef2;
    --content-p: calc(3vw + 42px);
    --col-p: clamp(8px, 1vw + 2px, 15px);
    --transition-com: all 0.25s ease;
}

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

.font-spec {
    font-family: 'Noto Serif TC', sans-serif;
}

h1 {
    font-family: 'Noto Serif TC', sans-serif;
    position: relative;
    font-weight: 400;
    letter-spacing: 0.25rem;
    text-shadow:
        0 0 10px var(--main-color),
        0 0 20px var(--main-color);
    z-index: 100;
}

@keyframes glow {
    from {
        text-shadow:
            0 0 10px var(--main-color),
            0 0 20px var(--main-color);
    }

    to {
        text-shadow:
            0 0 20px var(--main-color),
            0 0 25px var(--main-color),
            0 0 30px var(--main-color),
            0 0 40px var(--main-color);
    }
}

img {
    max-width: 100%;
}

/*-- 按鈕 --*/

.btn {
    font-size: 1.25rem;
    color: var(--sb-beam-5);
    border-color: var(--sb-beam-5);
    border-radius: 0;
    padding: 0.5rem 1.7rem;
    background-color: rgba(0, 0, 0, 0.5);
}

.btn:hover {
    color: #fff;
    background-color: var(--sb-beam);
    border-color: var(--sb-beam);
}

.btn-lg {
    padding: 0.8rem 2rem;
    color: #fff !important;
    white-space: nowrap;
}

@media screen and (max-width:991px) {
    .btn-lg {
        /* padding: 0.8rem 2.2rem; */
        font-size: 1.125rem;
    }
}

/*-- 按鈕區域 --*/

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

/*-------------------- 全頁共用 END --------------------*/

/*-------------------- 易遊網演唱會套票 #concert_tour --------------------*/

/*-------------------- BG --------------------*/

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

#concert_tour {
    padding-bottom:calc(var(--content-p) / 2);
    /* background: linear-gradient(135deg, rgba(14, 53, 43, 1) 0%, rgba(0, 0, 0, 1) 100%); */
    contain: layout style paint;
    /* 防止外層影響 */
    isolation: isolate;

}

.stage-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #050710;
}

.stage-bg canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.stage-bg #particles {
    mix-blend-mode: screen;
}

.stage-bg .grain {
    position: absolute;
    inset: -2px;
    opacity: .045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    animation: sbGrain 1.6s steps(4) infinite;
}

@keyframes sbGrain {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-2%, 1%);
    }

    50% {
        transform: translate(1%, -2%);
    }

    75% {
        transform: translate(-1%, 2%);
    }

    100% {
        transform: translate(0, 0);
    }
}

.stage-bg .vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 62%, rgba(0, 0, 0, 0) 32%, rgba(2, 3, 8, .5) 76%, rgba(2, 3, 8, .92) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .stage-bg .grain {
        animation: none;
    }
}

/*-------------------- BG END --------------------*/



h1+.intro-txt {
    >p:not(:last-of-type) {
        margin-bottom: 0.2rem;
    }


}

.font-ch {
    display: inline-block;
    margin: 0 auto;
    padding-block-end: 1rem;
    line-height: 1.4;
    animation: glow 1.75s ease-in-out infinite alternate;
    /* border-bottom: 1px solid var(--sb-beam-2); */

    >.font-spec {
        /* color: var(--main-color); */
        color: white;
        letter-spacing: 0.15rem;
    }


    >.font-release {
        color: white;
        letter-spacing: 0.15rem;
        animation: glow 1.75s ease-in-out infinite alternate;
    }
}

.intro-notice {
    display: inline-block;
    margin-inline: auto;
    color: var(--bs-gray-300);

    >li {
        &::before {
            content: "\e88e";
            font-family: "Material Symbols Outlined";
            font-size: 100%;
            color: inherit;
            vertical-align: middle;
            margin-right: 0.25rem;
            font-variation-settings:
                'FILL' 1,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
        }
    }
}

.intro-imp {
    color: var(--main-color);
    margin: 0;
}

/*-- 商品區 .pro-sec --*/
.pro-sec {
    --title-color: var(--main-color);
    --icon-color: var(--sb-beam-2);
    --price-color: var(--sb-spark-warm);
    --border-color: var(--main-color);
    position: relative;
    padding-top: calc(var(--content-p) / 2);
    z-index: 10;

    &:nth-of-type(odd) {
        --title-color: var(--sb-beam-5);
        --icon-color: #7163a9;
        --price-color: #e1b3ff;
        --border-color: var(--sb-beam-5);
    }

    >h1 {
        margin-bottom: 0;

        +h5 {
            color: var(--title-color);
            font-weight: 500;
            >a{font-weight: 300;}
        }
    }
}

.pro-ticket {
    justify-content: center;

    >.pro-intro {
        display: block;
        width: min(100%, 100%);
    }
}

.pro-ticket>div {
    margin-bottom: calc(var(--col-p) * 3);
}

.pro-box {
    display: flex;
    flex-direction: column;
    cursor: default;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    text-decoration: none;
    color: var(--basic-txt);
    padding: 0;
    padding-block-end: 2.5rem;
    box-shadow: 0 0 0 2px var(--border-color);
    background: rgba(0, 0, 0, 0.4);
    z-index: 10;
    transition: var(--transition-com);

    &.dbl-btn {
        padding-block-end: 5.2rem;
    }

    &.pro-box-w {
        padding-block-end: 0;
    }
}

/* .pro-box:hover {
    color: inherit;
    transform: translateY(-3px);
    text-decoration: none;
    color: var(--basic-txt);
    background: linear-gradient(120deg, white 0%, var(--sky-bottom) 100%);
    box-shadow: 0 0 0 2px white, 0 0 0.3rem var(--ink-soft), 0 0.5rem 0.6rem var(--ink-soft), 0 0.6rem 0.8rem var(--ink-soft);

    .btn_sale {
        color: var(--coral);
        background-color: var(--grass-dark);
        &::after {
            transform: translateY(1rem);
        }
    }

} */

.pro-box .sale_img {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;

    >img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        object-fit: cover;
        object-position: center;
    }
}

@media screen and (min-width:768px) {
    .pro-box.pro-box-w {
        flex-direction: row;
    }

    .pro-box.pro-box-w .sale_img {
        aspect-ratio: unset;
    }

}

.pro-box.pro-box-w .sale_info {
    padding-block-end: 80px;
}

.pro-box.pro-box-w .sale_info>.price_txt {
    bottom: 40px;
}

.pro-box .sale_info {
    /* flex: 1; */
    position: relative;
    padding: 0.75rem 1rem 40px;
}


.pro-box .sale_info>h4 {
    color: var(--title-color);
    line-height: 1.3;

    >span {
        font-size: 0.67em;
    }
}

.sale_info>.spec_txt {
    color: var(--basic-txt);
    padding-inline-start: 0;
    margin-bottom: 35px;
}

.pro-box .sale_info>.spec_txt>li {
    padding-inline-start: 1.5rem;
    text-indent: -1.5rem;
    line-height: 1.3;
    margin-block-end: 0.25rem;

    &::before {
        font-family: 'Material Symbols Outlined';
        color: var(--icon-color);
        content: '\ef76';
        vertical-align: middle;
        margin-right: 0.4rem;
        font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24
    }
}


.pro-box .sale_info>.spec_txt>li.star-point::before {
    content: '\f31c';
}

.pro-box .price_txt {
    display: block;
    text-align: right;
    color: var(--price-color);
    padding: 0 0.8rem 0.5rem;
    right: 0;
    bottom: 0;
    font-size: 1.3rem;
}

.sale_info>.price_txt>strong {
    display: inline-block;
    font-weight: 500;
    margin-bottom: 0;
    margin-inline-end: 0.15rem;
    font-size: 2.4rem;
}

/* clearfix */
/* .sale_info>.price_txt:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
} */

.pro-box .btn-sec {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 0;

    .btn_sale {
        display: block;
        width: 100%;
        font-size: 1.125rem;
        font-weight: 500;
        background-color: #7684ec;
        color: white;
        border-radius: 0;
        border: none;
        white-space: nowrap;
        transition: var(--transition-com);
        /* cursor: default; */

        &:last-of-type {
            background-color: var(--sb-beam-3);
        }

        &::after {
            font-family: 'Material Symbols Outlined';
            content: '\e913';
            /* font-size: 1.2em; */
            vertical-align: sub;
            margin-inline-start: 0.25rem;
            transition: margin 0.2s ease-out;
            font-variation-settings:
                'FILL' 1,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
        }

        &.btn_release::after {
            content: '\e855';
            vertical-align: text-bottom;
            display: none;
        }
    }
}

.pro-box .btn_sale:hover {
    color: white;
    filter:brightness(1.2);
    /* background-color: var(--sb-beam-5);

    &:last-of-type {
        background-color: var(--main-color);
    } */

    &::after {
        margin-inline-start: 0.5rem;

    }
}

.pro-box.sold_out {
    box-shadow: 0 0 0 1px var(--bs-warning);
}

.pro-box.sold_out::before {
    content: url(https://event.cdn-eztravel.com.tw/events/wu-qing-feng_concert/icon-soldout.png);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

/* line點我搶先登記開賣提醒 */

.line_remind {
    position: relative;
    font-size: 0.89rem;
    color: var(--bs-gray-200);
    padding-block-start: calc(var(--col-p) * 2);
    /* padding-inline: var(--col-p); */
    z-index: 100;
}

ul.flow-container {
    display: inline-flex;
    /* align-items: stretch; */
    gap: 0;
    margin-inline: auto;
    margin-block-start: 1.25rem;
}

.arrow-step {
    --step-color: #494e89;
    display: inline-block;
    position: relative;
    background: #494e89;

    padding: calc(var(--col-p) * 1.5) calc(var(--col-p) * 2 - 10px) calc(var(--col-p) * 2) calc(var(--col-p) * 2 + 8px);
    text-align: center;
    background-color: var(--step-color);

    &:nth-of-type(1) {
        --step-color: #0e0731;
        padding-inline-start: calc(var(--col-p) * 1.5);
    }

    &:nth-of-type(2) {
        --step-color: #353050;
    }

    &:nth-of-type(3) {
        --step-color: #494e89;
    }

    >i {
        font-size: 1.35em;
        font-style: normal;
    }
}

/* 右側三角形箭頭 */
.arrow-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -19.5px;
    top: 0;
    width: 20px;
    height: 100%;
    background: var(--step-color);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    z-index: 2;
}

/* 直式，移除橫向箭頭，改為向下箭頭 */
/* @media (max-width: 768px) {
    .flow-container {
        flex-direction: column;
    }

    .arrow-step {
        width: 100%;
        padding: 30px 40px;
    }
    
    .arrow-step:not(:last-child)::after {
        right: 0;
        top: auto;
        bottom: -20px;
        width: 100%;
        height: 20px;
        clip-path: polygon(0 0, 50% 100%, 100% 0);
    }
} */

/* 輪播簡介區 */

.summary-sec {
    position: relative;
    margin-block-start: calc(var(--content-p) * 3 / 4);
    z-index: 10;
}

.summary-txt {
    padding-inline: 1rem;
}

.summary-pic {
    width: 100%;
    overflow: hidden;
    position: relative;
    background-color: #fff;
}

.summary-track {
    display: flex;
    width: calc(25vw * 14);
    animation: trainSlideScroll 30s linear infinite;
}

.summary-sec.hotel .summary-track {
    animation: hotelSlideScroll 30s linear infinite;
}

.summary-item {
    width: 25vw;
    flex-shrink: 0;
    position: relative;

    >figcaption {
        position: absolute;
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 0.2rem 0.75rem;
        bottom: 0;
        right: 0;
    }
}

@media (max-width: 991px) {
    .summary-item {

        >figcaption {
            font-size: 0.875rem;
        }
    }
}

.summary-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

@keyframes trainSlideScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-175vw);
    }
}

@keyframes hotelSlideScroll {
    0% {
        transform: translateX(-175vw);
    }

    100% {
        transform: translateX(0);
    }
}

/* 暫停動畫（當滑鼠懸停時） */
.summary-pic:hover .summary-track {
    animation-play-state: paused;
}

@media (max-width: 767px) {
    .summary-track {
        width: calc(50vw * 14);
    }

    .summary-item {
        width: 50vw;
    }

    @keyframes trainSlideScroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-350vw);
        }
    }

    @keyframes hotelSlideScroll {
        0% {
            transform: translateX(-350vw);
        }

        100% {
            transform: translateX(0);
        }
    }
}

/*-------------------- 易遊網演唱會套票 #concert_tour END --------------------*/

/*-------------------- 獨家折扣碼 #concert_bonus --------------------*/

#concert_bonus {
    background: url(https://event.cdn-eztravel.com.tw/events/2026_f3n1-taipei/bg-galaxy.jpg) no-repeat center/cover;
    padding-block: calc(var(--content-p) / 2);
}

.coupon-box {
    position: relative;
    justify-content: center;
    margin: 0 auto;
    width: min(100%, auto);
}

.coupon-box>div {
    margin-bottom: var(--col-p);

    img {
        max-width: 100%;
        transition: var(--transition-com);
    }
}

@media screen and (min-width: 768px) {
    .coupon-box>div {
        margin-inline: calc(var(--col-p) * 3) !important;
    }

}

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

.coupon-box a:not(.btn):hover img {
    /* filter: drop-shadow(0 3px 5px var(--ink)) drop-shadow(0 5px 5px var(--ink)) drop-shadow(0 8px 2px var(--ink)); */
    filter: drop-shadow(0 0.75rem rgba(22, 50, 31, 0.25));
    transform: scale(1.06);
}

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


/*-------------------- 演唱會資訊 #concert_info --------------------*/

#concert_info {
    --ci-void: #030509;
    --ci-deep: #0a121c;
    --ci-cyan: #9feff3;
    --ci-cyan2: #8fe8ec;
    --ci-cyan-mid: #4fa8ae;
    --ci-cyan-dim: #1c3841;
    --ci-mist: #cfe9ea;
    --ci-mist-dim: #7f9a9d;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 90% at 50% 8%, #142430 0%, transparent 55%),
        linear-gradient(180deg, #060a10 0%, #060a10 35%, #04070c 100%);
    /* padding: calc(64px + env(safe-area-inset-top, 0px)) 24px calc(72px + env(safe-area-inset-bottom, 0px)); */
    padding:var(--content-p) var(--col-p) calc(var(--content-p) / 3 * 2);

    color: var(--ci-mist);
    font-family: "Noto Sans TC", "Rajdhani", system-ui, sans-serif;
    box-sizing: border-box;
}

#concert_info * {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    #concert_info * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ---------- layer 1: canvas starfield ---------- */
#concert_info canvas.ci-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

/* ---------- layer 2: nebula glow ---------- */
#concert_info .ci-nebula {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
}

#concert_info .ci-nebula::before,
#concert_info .ci-nebula::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    will-change: transform;
}

#concert_info .ci-nebula::before {
    width: 70vmax;
    height: 70vmax;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(120, 190, 196, 0.22) 0%, rgba(80, 60, 110, 0.14) 45%, transparent 72%);
    animation: ci-driftA 26s ease-in-out infinite;
}

#concert_info .ci-nebula::after {
    width: 46vmax;
    height: 46vmax;
    left: 38%;
    top: 55%;
    background: radial-gradient(circle, rgba(90, 60, 120, 0.20) 0%, transparent 70%);
    animation: ci-driftB 32s ease-in-out infinite;
}

@keyframes ci-driftA {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-46%, -54%) scale(1.08);
    }
}

@keyframes ci-driftB {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-54%, -46%) scale(1.1);
    }
}

/* ---------- layer 3: vertical light beams ---------- */
#concert_info .ci-beams {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    padding: 0 4%;
    pointer-events: none;
    opacity: 0.55;
}

#concert_info .ci-beam {
    flex: 1;
    margin: 0 1px;
    /* same shape as before — just a brighter peak and a darker floor,
     so the on/off swing between beams reads with more contrast */
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(159, 239, 243, 0.04) 18%,
            rgba(159, 239, 243, 0.26) 45%,
            rgba(159, 239, 243, 0.04) 72%,
            transparent 100%);
    transform-origin: top center;
    animation: ci-shimmer 7s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.45s);
    will-change: transform, opacity;
}

#concert_info .ci-beam:nth-child(3n) {
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(159, 239, 243, 0.02) 20%,
            rgba(159, 239, 243, 0.18) 50%,
            rgba(159, 239, 243, 0.02) 75%,
            transparent 100%);
}

@keyframes ci-shimmer {

    0%,
    100% {
        opacity: 0.2;
        transform: scaleY(0.94);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.02);
    }
}

/* ---------- layer 4: rising dust motes ---------- */
#concert_info .ci-dust {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

#concert_info .ci-mote {
    position: absolute;
    bottom: -4%;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--ci-cyan2);
    box-shadow: 0 0 6px 1px rgba(159, 239, 243, 0.8);
    opacity: 0;
    animation-name: ci-rise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
}

@keyframes ci-rise {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0);
    }

    8% {
        opacity: 0.9;
    }

    92% {
        opacity: 0.5;
    }

    /* --ci-rise is set in px by script.js from the container's own height,
     so the mote always travels the full height of #concert_info, whatever
     that height is (percentage/vh would be wrong here: percentage on
     `transform` is relative to the element's own tiny box, and vh is
     relative to the viewport, not this container) */
    100% {
        opacity: 0;
        transform: translateY(calc(-1 * var(--ci-rise, 600px))) translateX(var(--drift, 20px));
    }
}

/* ---------- layer 5: vignette ---------- */
#concert_info .ci-vignette {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: radial-gradient(120% 70% at 50% 45%, transparent 40%, rgba(3, 5, 9, 0.55) 100%);
}

/* pause every CSS-driven layer once #concert_info scrolls off-screen or
   the tab is backgrounded — class is toggled by script.js */
#concert_info.ci-idle .ci-beam,
#concert_info.ci-idle .ci-mote,
#concert_info.ci-idle .ci-nebula::before,
#concert_info.ci-idle .ci-nebula::after {
    animation-play-state: paused;
}

/* ---------- layer 6: content (example — replace with your own markup) ---------- */
#concert_info .ci-content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 22px;
    max-width: 720px;
}

#concert_info .ci-eyebrow {
    font-family: "Rajdhani", sans-serif;
    font-size: 13px;
    letter-spacing: 0.42em;
    color: var(--ci-cyan-mid);
    text-transform: uppercase;
    padding-left: 0.42em;
}

#concert_info .ci-title {
    font-family: "Noto Serif TC", serif;
    font-weight: 600;
    font-size: clamp(40px, 10vw, 84px);
    letter-spacing: 0.28em;
    padding-left: 0.28em;
    margin: 0;
    color: var(--ci-mist);
    text-shadow:
        0 0 18px rgba(159, 239, 243, 0.35),
        0 0 46px rgba(90, 180, 190, 0.18);
    text-wrap: balance;
}

#concert_info .ci-subtitle {
    font-family: "Noto Sans TC", sans-serif;
    font-size: clamp(13px, 2.4vw, 16px);
    letter-spacing: 0.18em;
    color: var(--ci-mist-dim);
}

#concert_info .ci-subtitle b {
    color: var(--ci-cyan2);
    font-weight: 600;
}

#concert_info .ci-logo {
    font-family: "Orbitron", sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 6vw, 52px);
    letter-spacing: 0.08em;
    margin: 6px 0 0;
    background: linear-gradient(180deg, #eafcfd 0%, var(--ci-cyan2) 55%, var(--ci-cyan-mid) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgba(143, 232, 236, 0.45));
}

#concert_info .ci-logo .ci-spark {
    color: var(--ci-cyan);
}

#concert_info .ci-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin-top: 8px;
    font-family: "Rajdhani", sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: clamp(14px, 2.6vw, 18px);
    color: var(--ci-mist);
    letter-spacing: 0.04em;
}

#concert_info .ci-meta span {
    opacity: 0.9;
}

#concert_info .ci-meta .ci-sep {
    color: var(--ci-cyan-dim);
}


/* BG END */

.concert-info-sec {
    background-color: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--main-color);
    padding: calc(var(--col-p) * 1.5);
    margin-bottom: calc(var(--content-p) / 2);
}

.concert-info-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-block: 1.5rem;
    color: var(--basic-txt);

    h6 {
        display: inline-block;
        border-radius: 100px;
        background-color: var(--sb-beam-2);
        margin-bottom: 0;
        padding: 0 1rem;
    }

    .concert-info-notice {
        padding-top: 1rem;
        color: var(--sub-color);
    }
}

.concert-info-pic {
    position: relative;
}

.concert-info-pic a {
    color: #fff;
}

.concert-info-pic img {
    max-width: 100%;
    width: 100%;
    height: auto;
    /* margin-top: -3vw; */
}

#concert_info p {
    font-weight: 500;
}

@media screen and (min-width:768px) {
    #concert_info h4 {
        margin-bottom: 0;
    }

    #concert_info p {
        margin-bottom: 1.5rem;
    }
}

.concert-info-pic .small {
    position: absolute;
    bottom: 0;
    right: 0;
    white-space: nowrap;
}

/* APP首購 */

.appfirst-sec .day-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 0.5rem;

    >b {
        width: auto;
        padding-inline-start: 0.6rem;
        padding-inline-end: 0.6rem;
        align-items: center;
        letter-spacing: 0.05rem;
        line-height: 100%;
    }

    >i {
        position: relative;
        display: block;
        flex: 1 0 0%;
        height: min(1px, 1px);
        background: linear-gradient(to right, #000, var(--main-color) 60%);

        &:last-of-type {
            background: linear-gradient(to left, #000, var(--main-color) 60%);
        }
    }
}

.appfirst-sec .btn::after,
.appfirst-sec .btn::before {
    font-family: 'Material Symbols Outlined';
    content: '\f2b2';
    font-size: 1.2em;
    vertical-align: middle;
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

.appfirst-sec .btn::after {
    margin-left: 0.25rem;
}

.appfirst-sec .btn::before {
    margin-right: 0.25rem;
}


/*-------------------- 演唱會資訊 #concert_info END --------------------*/

#concert_note {
    padding-bottom: var(--content-p);
    background: var(--sb-deep);
}

#concert_note ul {
    color: var(--bs-gray-200);
    font-size: 0.89rem;
    padding-inline-start: 1.4em;

    li {
        text-indent: -1.4em;

        &::before {
            font-family: 'Material Symbols Outlined';
            content: '\e3e4';
            font-size: 1em;
            margin-right: 0.4em;
            vertical-align: middle;
            color: var(--main-color);
            font-variation-settings:
                'FILL' 1,
                'wght' 400,
                'GRAD' 0,
                'opsz' 24
        }
    }
}