:root {
    --basic-txt: #ffffff;
    --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;
}

/*-------------------- 主視覺 --------------------*/

#main_top>h1 {
    display: block;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 1px;
    padding: 0;
    margin: 0;
}

#main_top {
    width: 100%;
    height: 0;
    padding-bottom: calc(1004 / 1920 * 100%);
    position: relative;
    background: url(https://event.cdn-eztravel.com.tw/events/mayday/kv-pc.jpg) no-repeat center;
    background-size: cover;
}

@media screen and (max-width: 767px) {
    #main_top {
        padding-bottom: calc(1380 / 839 * 100%);
        background: url(https://event.cdn-eztravel.com.tw/events/mayday/kv-m.jpg) no-repeat center;
        background-size: cover;
    }
}

/*-------------------- 主視覺 END --------------------*/

#wrapper {
    width: max(100%, 100%);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

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

#concert_tour {
    width: max(100%, 100%);
    min-height: 100dvh;
    /* 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 --------------------*/

.sale-sec {
    position: relative;
    z-index: 999;

    img[src*='pre-sale'] {
        max-width: 1066px;
        width: 85%;
        height: auto;
    }
}

/*-- 按鈕 --*/

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

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

.line_remind {
    position: relative;
    font-size: 0.89rem;
    color: var(--bs-gray-200);
    padding-block-start:var(--content-p);
    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);
    }
} */