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

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

:root {
    --basic-txt: #262626;
    --t-shadow: #91e1ff;
    --subt-shadow: #dc466c;
    --subt-txt: #dc466c;
    --table-deep: #4c4948;
    --tag-active: #389564;
    --tag-shadow: #258954;
    --tag-hover: #a1d6d3;
    --th-bg: #78c3a0;
    --b-round: 1rem;
    --content-p: calc(3vw + 42px);
    --col-p: clamp(8px, 1vw + 2px, 15px);
    --transition-com: all 0.25s ease;
}

body [data-aos][data-aos] {
    transition-duration: 600ms;
    transition-timing-function: ease-in-out;
}

img {
    max-width: 100%;
}

.br-s,
.br-m {
    display: none;
}

@media screen and (max-width: 991px) {
    .br-m {
        display: inline;
    }
}

@media screen and (max-width: 767px) {
    .br-s {
        display: inline;
    }
}

/*-- Font Icon 樣式 --*/

.material-icons,
.material-symbols-outlined {
    vertical-align: sub;
    font-variation-settings:
        "FILL" 1,
        "wght" 500,
        "GRAD" 0,
        "opsz" 24;
}

ion-icon {
    font-size: 120%;
    vertical-align: sub;
}

/*-- 大標題樣式 --*/

h1 {
    position: relative;
    /* display: inline-block; */
    margin-bottom: calc(var(--col-p) * 2);
    z-index: 999;
}

h1>img[src*="title_b"] {
    height: calc(1.04vw + 40px);
    width: auto;
    filter: drop-shadow(0 0.35rem var(--t-shadow));
}

h2>img[src*="title"] {
    height: calc(0.6vw + 28px);
    width: auto;
    filter: drop-shadow(0 0.25rem var(--t-shadow));
}

h2 {
    position: relative;
    margin-bottom: 1rem;
    z-index: 100;
}

.sub-title {
    color: var(--subt-txt);
    line-height: 1.4;
}

.small {
    font-weight: 400;
}

/*-- 按鈕 --*/

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

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

/*-- 表格+切換樣式 --*/

.nav-item {
    padding: 0 !important;
}

.nav-pills .nav-link {
    width: 100%;
}

.nav-pills .nav-link {
    background-color: #fff;
    color: var(--table-deep);
    border-radius: 0;
    padding: 1rem;
    font-weight: 600;
    border: 1px solid var(--table-deep);
    border-bottom: 0;
    transition: var(--transition-com);
}

.nav-pills .nav-link:hover {
    background-color: var(--table-light);
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.nav-pills .nav-link:hover span[class*="material"] {
    text-shadow: none;
}

.nav-pills .nav-link.active {
    background-color: var(--table-deep);
    color: #fff;
    text-shadow: none;
}

.table {
    border: 2px solid var(--table-deep);
}

.table td,
.table th {
    padding: 0.6rem;
    background-color: #fff;
}

.table tbody tr:first-of-type th {
    background-color: var(--table-light);
    color: #fff;
}

#train_dining {
    --tag-active: #8476b5;
    --tag-shadow: #776baf;
    --tag-hover: #9fd9f6;
    --th-bg: #54c3f1;
}

body::before {
    background: #ed85a7;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover {
    position: relative;
    background-color: var(--tag-active);
    color: #fff;
    box-shadow: inset 0 0 0 3px rgba(76, 73, 72, 0.5);
    box-shadow: inset 0 0 0 4px var(--tag-shadow);
}

.nav-pills .nav-link.active::after,
.nav-pills .nav-link.active:hover::after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: var(--tag-active) transparent transparent transparent;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.nav-pills .nav-link {
    color: var(--tag-active);
    border: 1px solid #4c4948;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}

.nav-pills .nav-link:hover {
    background-color: var(--tag-hover);
    color: inherit;
}

.table tbody th {
    background-color: var(--th-bg) !important;
}

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

/*-------------------- 列車介紹 #train_design --------------------*/

@keyframes movetrain {
    0% {
        left: calc(var(--train-h) / 177 * 3659 * -1);
    }

    100% {
        left: 100%;
    }
}

#wrapper {
    /* padding-top: calc(var(--content-p) * 2 / 3); */
    min-width: 100%;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
}

#train_design {
    /* 小火車 高度 */
    --train-h: 143px;
    min-width: inherit;
    width: 100%;
    background: url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg01.png) repeat;
    padding: 0 0 calc(var(--content-p) / 2 + var(--train-h));
}

@media screen and (max-width: 991px) {
    #train_design {
        padding-top: var(--content-p);
    }
}

@media screen and (max-width: 767px) {
    #train_design {
        /* 小火車 高度 */
        --train-h: 120px;
        background: url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg01.png) repeat left top/50%;
    }
}

.train_intro {
    position: relative;
    min-width: inherit;
    width: 100%;
}

.train_intro>.contentbox_main {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .train_intro>.contentbox_main {
        position: relative;
        height: auto;
        padding-right: 0;
        padding-bottom: calc(var(--content-p) / 2);
        margin-top: calc(var(--content-p) * -1);
    }
}

.train-intro-sec {
    text-align: start;
    background: rgba(255, 255, 255, 0.75);
    border-radius: var(--b-round);
    padding: 0 1.5rem 1rem;
}

.train-intro-sec>h1 {
    margin-top: -1.5rem;
    margin-bottom: 0.6rem;
}

/* 移動小火車 */
#train_design::before {
    content: "";
    position: absolute;
    background: url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/train.png) no-repeat center/contain;
    height: var(--train-h);
    aspect-ratio: 3659/177;
    bottom: 0;
    animation-name: movetrain;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.scenery-carousel.scenery-carousel {
    width: 60%;
    margin: var(--content-p) auto var(--content-p) 0;
}

@media screen and (max-width: 767px) {
    .scenery-carousel.scenery-carousel {
        width: 90%;
        margin: 0 auto 0 0;
    }
}

.scenery-carousel .carousel-inner {
    justify-content: flex-start;
}

.scenery-carousel .carousel-inner>.carousel-item {
    position: relative;
    width: 100%;
    aspect-ratio: 960/568;
    border-top-right-radius: var(--b-round);
    border-bottom-right-radius: var(--b-round);
    background-position: center center;
    background-size: cover;
}

@media screen and (max-width: 767px) {
    .scenery-carousel .carousel-inner>.carousel-item {
        aspect-ratio: 760/568;
    }
}

.scenery-carousel .carousel-inner>.carousel-item:nth-of-type(1) {
    background-image: url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/scenery05.jpg);
}

.scenery-carousel .carousel-inner>.carousel-item:nth-of-type(2) {
    background-image: url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/scenery01.jpg);
}

.scenery-carousel .carousel-inner>.carousel-item:nth-of-type(3) {
    background-image: url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/scenery06.jpg);
}

.scenery-carousel .carousel-inner>.carousel-item:nth-of-type(4) {
    background-image: url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/scenery02.jpg);
}

.scenery-carousel .carousel-inner>.carousel-item>figcaption {
    position: absolute;
    white-space: nowrap;
    color: #fff;
    margin: 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    font-weight: 300;
}

.role-intro {
    position: relative;
    margin: calc(var(--content-p) * 1.5 * -1) auto 0;
    max-width: 90%;
    z-index: 200;
}

@media screen and (max-width: 991px) {
    .role-intro {
        margin-top: 0;
    }
}

.role-intro .role-box {
    --doll-w: 187;
    --bg-name: #ffe56d;
    --bg-color: #fffde5;
    text-align: center;
    margin-bottom: 2rem;
}

.role-box .role-pic-box {
    position: relative;
    aspect-ratio: 1/1;
}

.role-box .role-pic-box::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 100%;
    border-radius: 50%;
    aspect-ratio: 1/1;
    background-color: var(--bg-color);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.role-box .role-pic-box>img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--doll-w) / 263 * 100%);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    z-index: 100;
}

.role-box .role-pic-box>figcaption {
    position: absolute;
    right: auto;
    left: 50%;
    top: 0;
    max-width: 100%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -40%);
    z-index: 100;
}

.role-box .role-pic-box>figcaption>img {
    width: calc(var(--name-w) / 245 * 100%);
}

.role-box .role-name-box {
    position: relative;
    display: inline-block;
    background-color: var(--bg-name);
    border-radius: 500px;
    font-weight: 600;
    padding: 0.25rem 1.2rem;
    margin-top: -0.6rem;
    z-index: 200;
}

.role-intro .role-box:nth-of-type(1) {
    --doll-w: 187;
    --name-w: 205;
    --bg-name: #ffe56d;
    --bg-color: #fffde5;
}

.role-intro .role-box:nth-of-type(2) {
    --doll-w: 213;
    --name-w: 182;
    --bg-name: #aeddef;
    --bg-color: #eaf6fd;
}

.role-intro .role-box:nth-of-type(3) {
    --doll-w: 184;
    --name-w: 133;
    --bg-name: #d1bad9;
    --bg-color: #e9e6f3;
}

.role-intro .role-box:nth-of-type(4) {
    --doll-w: 169;
    --name-w: 161;
    --bg-name: #f4b3c8;
    --bg-color: #fbe6ef;
}

.role-intro .role-box:nth-of-type(5) {
    --doll-w: 185;
    --name-w: 175;
    --bg-name: #a2d7d4;
    --bg-color: #ebf5ec;
}

.role-intro .role-box:nth-of-type(6) {
    --doll-w: 125;
    --name-w: 132;
    --bg-name: #fbc93b;
    --bg-color: #fdeddb;
}

#design-intro {
    background:
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-design01.png) no-repeat center/calc(5.4vw + 100px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-design-bottom01.png) no-repeat left bottom/calc(37vw + 250px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-design-bottom02.png) no-repeat right bottom/calc(15.5vw + 150px),
        linear-gradient(to bottom, #ffffff 10%, #d3edfb 90%);
}

#design-intro::before {
    content: "";
    display: block;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(2.6vw + 50px);
    border-radius: 50%;
    transform: translateY(50%);
}

.design-sec {
    padding: var(--content-p) calc(var(--col-p) * 2);
}

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

.car-box {
    position: relative;
}

.car-box img {
    max-width: 100%;
}

.car-box .car-design-pic {
    width: 90%;
    max-width: 640px;
    border-radius: calc(var(--b-round) * 1.5);
    border: 2px solid #93785e;
    overflow: hidden;
    /* margin-bottom: 8rem; */
    margin-bottom: calc(336px - 10vw);
}

.car-box.cross .car-design-pic {
    margin-left: auto;
}

.car-box .car-design-txt {
    position: absolute;
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
    width: 70%;
    max-width: 480px;
    border-radius: calc(var(--b-round) * 1.25);
    border: 1px solid var(--txt-border);
    background-color: var(--txt-bg);
    text-align: start;
    padding: calc(var(--col-p) * 2);
    z-index: 300;
}

.car-box.cross .car-design-txt {
    left: 0;
    right: auto;
}

@media screen and (max-width: 991px) {
    .car-box .car-design-txt {
        width: 76%;
    }
}

@media screen and (max-width: 767px) {
    .car-box .car-design-pic {
        width: 100%;
        border-radius: calc(var(--b-round) * 1.5) calc(var(--b-round) * 1.5) 0 0;
        border-color: var(--txt-border);
        border-bottom: none;
        margin-bottom: 0;
    }

    .car-box .car-design-txt {
        position: relative;
        width: 100%;
        border-radius: 0 0 calc(var(--b-round) * 1.25) calc(var(--b-round) * 1.25);
        border: 2px solid var(--txt-border);
        border-top: none;
    }

    .design-sec>.car-box:nth-of-type(odd),
    .design-sec>.car-box:nth-of-type(even) {
        margin-top: 0 !important;
        margin-bottom: var(--content-p) !important;
    }
}

.car-box .car-design-txt>h2>img {
    filter: drop-shadow(0 0.2rem var(--txt-border));
}

.car-box .car-design-txt>.sub-title {
    font-weight: 600;
}

.car-box .car-design-txt>.sub-title>.small {
    display: inline-block;
    background-color: var(--subt-txt);
    border-radius: 500px;
    color: #fff;
    font-size: 0.75em;
    padding: 0 0.5em 0.015em;
    margin-right: 0.35rem;
    font-weight: inherit;
}

.design-sec>.car-box:nth-of-type(odd) {
    margin-bottom: 3%;
}

.design-sec>.car-box:nth-of-type(even) {
    margin-top: 3%;
}

.design-sec>.car-box.activity {
    --txt-border: #e96b93;
    --txt-bg: #fadce9;
    --subt-txt: #dc466c;
}

.design-sec>.car-box.normal {
    --txt-border: #f8b62b;
    --txt-bg: #fffbc7;
    --subt-txt: #e75c19;
}

.design-sec>.car-box.karaoke {
    --txt-border: #8476b5;
    --txt-bg: #c2eaff;
    --subt-txt: #5976b8;
}

.design-sec>.car-box.foodbar {
    --txt-border: #399564;
    --txt-bg: #dcf2de;
    --subt-txt: #399564;
}

.car-box .car-design-txt>img[src*="design-doll"] {
    position: absolute;
    width: calc(var(--doll-w) / 480 * 100%);
}

.car-box.activity .car-design-txt>img[src*="design-doll"]:nth-of-type(1) {
    --doll-w: 192;
    top: 0;
    left: 50%;
    transform: translateY(-60%);
}

.car-box.activity .car-design-txt>img[src*="design-doll"]:nth-of-type(2) {
    --doll-w: 125;
    bottom: 0;
    left: 0;
    transform: translateX(-90%);
}

.car-box.normal .car-design-txt>img[src*="design-doll"]:nth-of-type(1) {
    --doll-w: 178;
    top: 0;
    left: 50%;
    transform: translateY(-60%);
}

.car-box.normal .car-design-txt>img[src*="design-doll"]:nth-of-type(2) {
    --doll-w: 230;
    bottom: 1rem;
    left: 0;
    transform: translateX(-95%);
}

.car-box.karaoke .car-design-txt>img[src*="design-doll"]:nth-of-type(1) {
    --doll-w: 202;
    top: 0;
    left: 50%;
    transform: translate(-100%, -90%);
}

.car-box.karaoke .car-design-txt>img[src*="design-doll"]:nth-of-type(2) {
    --doll-w: 144;
    top: 40%;
    right: 0;
    transform: translateX(90%);
}

.car-box.foodbar .car-design-txt>img[src*="design-doll"]:nth-of-type(1) {
    --doll-w: 95;
    top: 0;
    left: 50%;
    transform: translate(-100%, -90%);
}

.car-box.foodbar .car-design-txt>img[src*="design-doll"]:nth-of-type(2) {
    --doll-w: 144;
    top: 50%;
    right: 0;
    transform: translate(90%, -40%);
}

.car-box.foodbar .car-design-txt>img[src*="design-doll"]:nth-of-type(3) {
    --doll-w: 80;
    bottom: 0;
    right: -10%;
    transform: translate(200%, -50%);
}

@media screen and (max-width: 767px) {
    .car-box .car-design-txt>img[src*="design-doll"] {
        width: calc(var(--doll-w) / 560 * 100%);
    }

    .car-box.activity .car-design-txt>img[src*="design-doll"]:nth-of-type(1) {
        top: 0;
        left: auto;
        right: 0;
        transform: translateY(-60%);
    }

    .car-box.activity .car-design-txt>img[src*="design-doll"]:nth-of-type(2) {
        top: 0;
        left: 50%;
        transform: translate(-50%, -60%);
    }

    .car-box.normal .car-design-txt>img[src*="design-doll"]:nth-of-type(1) {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        transform: translateY(30%);
    }

    .car-box.normal .car-design-txt>img[src*="design-doll"]:nth-of-type(2) {
        bottom: auto;
        top: 0;
        left: 45%;
        transform: translateY(-50%);
    }

    .car-box.karaoke .car-design-txt>img[src*="design-doll"]:nth-of-type(1) {
        top: 0;
        left: 50%;
        transform: translate(-100%, -90%);
    }

    .car-box.karaoke .car-design-txt>img[src*="design-doll"]:nth-of-type(2) {
        top: 0%;
        right: 0;
        transform: translate(-30%, 10%);
    }

    .car-box.foodbar .car-design-txt>img[src*="design-doll"]:nth-of-type(1) {
        top: 0;
        left: 50%;
        transform: translate(0, -50%);
    }

    .car-box.foodbar .car-design-txt>img[src*="design-doll"]:nth-of-type(2) {
        top: 0;
        right: 0;
        transform: translate(-1rem, -60%);
    }

    .car-box.foodbar .car-design-txt>img[src*="design-doll"]:nth-of-type(3) {
        bottom: 0;
        right: 10%;
        transform: translate(0, 50%);
    }
}

/*-------------------- 列車介紹 #train_design END --------------------*/

/*-------------------- 行駛路線 #train_route --------------------*/

#train_video {
    padding-top: calc(var(--content-p) / 2);

    iframe {
        border-radius: calc(var(--b-round) * 2);
    }
}

.train_blog {
    display: inline-block;
    width: min(800px, 90%);
    margin: 0 auto calc(var(--content-p) / 2);

    >img {
        border-radius: var(--b-round);
        transition: var(--transition-com);
    }

    &:hover {
        >img {
            filter: contrast(120%) saturate(150%);
        }
    }
}

/* KOL影片20250625 */
.video-row {
    padding-top: calc(var(--col-p) * 2);

    >div {
        margin-bottom:calc(var(--col-p) * 2) ;
        >a {
            position: relative;
            display: block;
            overflow: hidden;
            border-radius: var(--b-round);

            >img {
                width: min(600px, 100%);
                filter: brightness(60%);
                transition: var(--transition-com);
            }

            &::before {
                content: "\e1c4";
                position: absolute;
                display: inline-block;
                font-family: "Material Symbols Outlined";
                color: #fff;
                font-size: 4.5rem;
                inset: 0;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -90%);
                vertical-align: middle;
                z-index: 100;
                font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
                transition: var(--transition-com);
            }
        }
    }
}

@media screen and (min-width: 768px) {
    .video-row {
        padding-top: calc(var(--col-p) * 2);

        >div:first-of-type {
            padding-inline-start: 0;
        }

        >div:last-of-type {
            padding-inline-end: 0;
        }
    }
}

.video-row {
    >div>a:hover {
        >img {
            transform: scale(1.1);
            filter: brightness(100%);
        }

        &::before {
            color: var(--subt-txt);
        }
    }
}

#train_route {
    --t-shadow: #a1d6d3;
    padding-top: var(--content-p);
    padding-bottom: calc(var(--content-p) * 2);
}

#train_route>.bg-dots {
    display: block;
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 40%;
    background:
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-semicircle.png) no-repeat top center/100%,
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-dots.gif) repeat;
    z-index: -1;
}

#train_route::before {
    content: "";
    display: block;
    background-color: #fffbc7;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(2.6vw + 50px);
    border-radius: 50%;
    transform: translateY(50%);
}

#train_route::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background:
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-daylily.png) no-repeat left 73% / calc(10.5vw + 160px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-landmark.png) no-repeat right 70% / calc(8.3vw + 150px);
}

@media screen and (max-width: 767px) {
    #train_route>.bg-dots {
        background:
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-semicircle.png) no-repeat top center/100%,
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-dots.gif) repeat left top/6%;
        z-index: -1;
    }

    #train_route::after {
        background:
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-daylily.png) no-repeat left 98% / 50vw,
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-landmark.png) no-repeat right 98% / 30vw;
    }
}

#train_route .train-schedule-sec {
    background-color: #ebf5ec;
    border: 3px solid #a2d7d4;
    border-radius: var(--b-round);
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 1rem;
    padding: 0.85rem;

    &.schedule-focus {
        background-color: #fff9f8;
        border: 3px solid #f19a8e;

    }
}



#train_route .train-schedule-sec>span {
    display: inline-block;
    border-radius: 500px;
    color: #fff;
    padding: 0 1.35rem;
    margin-bottom: 0.3rem;
}

#train_route .train-schedule-sec>p {
    font-weight: 700;
}

#train_route .train-schedule-sec>.train-schedule {
    width: 100%;
    max-width: 1000px;
    justify-content: center;
    margin: 1rem auto 0;
}

#train_route .train-schedule-sec>.train-schedule>div {
    padding-right: calc(var(--col-p) / 2);
    padding-left: calc(var(--col-p) / 2);
    padding-bottom: calc(var(--col-p) * 2);
}

#train_route .map_route {
    width: 100%;
    /* overflow-X: hidden; */
    margin-top: calc(var(--content-p) / 3 * 2);
}

@media screen and (max-width: 767px) {
    #train_route .map_route>img {
        transform: scale(1.15);
    }
}

#train_route .table th,
#train_route .table td {
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

#train_route .train-time-table {
    position: relative;
    margin-top: -5%;
    z-index: 100;
}

/*-------------------- 行駛路線 #train_route END --------------------*/

/*-------------------- 行駛路線 #train_activity --------------------*/

#train_activity {
    --t-shadow: #c0dd98;
    /* --main: #f7ac16; */
    --main: #f79b07;
    /* --list: #fbe79a; */
    --list: #fff0b2;
    background:
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/activity-doll02.png) no-repeat left 10% / calc(6vw + 220px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/activity-doll03.png) no-repeat 92% 8% / calc(6.9vw + 220px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/activity-doll04.png) no-repeat right bottom/calc(7.7vw + 220px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg02.png) repeat,
        #fffbc7;
    padding-top: var(--content-p);
}

#train_activity>img[src*="activity-doll"] {
    position: absolute;
    width: calc(15.6vw + 220px);
    height: auto;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (max-width: 991px) {
    #train_activity {
        background:
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/activity-doll02.png) no-repeat left 10% / calc(6vw + 160px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/activity-doll04.png) no-repeat right bottom/calc(7.7vw + 160px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg02.png) repeat,
            #fffbc7;
    }

    #train_activity>img[src*="activity-doll"] {
        position: absolute;
        width: calc(15.6vw + 160px);
    }
}

@media screen and (max-width: 767px) {
    #train_activity {
        background:
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/activity-doll02.png) no-repeat 115% 5% / calc(6.5vw + 120px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/activity-doll04.png) no-repeat left bottom/calc(7.7vw + 120px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg02.png) repeat,
            #fffbc7;
    }

    #train_activity>img[src*="activity-doll"] {
        position: absolute;
        width: 65vw;
        transform: translate(-50%, -40%);
    }
}

.con_area {
    justify-content: center;
}

.con_area>div[class*="col-"] {
    position: relative;
    margin-bottom: 1.5rem;
}

.act_game {
    margin-bottom: calc(var(--content-p) * 2 / 3);
}

.act_game>div:nth-of-type(even) .act_box {
    --main: #8fc31f;
}

.act_diy>div:nth-of-type(odd) .act_box {
    --main: #8fc31f;
}

.act_box {
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%;
    border: 2px solid var(--main);
    background-color: var(--main);
    border-radius: 500px 500px var(--b-round) var(--b-round);
    overflow: hidden;
}

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

.act_txt_area {
    position: relative;
    background-color: var(--main);
    padding: 1rem;
    color: #fff;
    font-weight: 400;
}

.act_txt_area>.act_txt_title {
    position: relative;
    display: inline-block;
    border-radius: 500px;
    font-weight: 600;
    letter-spacing: 0.025em;
    line-height: 1.3;
    background-color: var(--main);
    padding: 0.3rem 1rem;
    margin-top: -2rem;
    z-index: 300;
}

.act_txt_area>p {
    text-align: start;
    margin-bottom: 0;
}

.act_txt_area ul {
    margin-bottom: 0.6rem;
    margin-top: 0.2rem;
    width: 100%;
}

.act_txt_area li {
    display: inline-block;
    position: relative;
    color: var(--list);
    font-size: 0.9em;
    margin-top: 0.3rem;
    margin-right: 0.45rem;
}

.act_txt_area li.inborder {
    border: 1px solid var(--list);
    padding: 0 0.8rem;
    border-radius: 0.25rem;
}

/*-------------------- 行駛路線 #train_activity END --------------------*/

/*-------------------- 餐飲服務 #train_dining --------------------*/

#train_dining {
    --t-shadow: #f4b4d0;
    --main: #4694d1;
    --list: #fadce9;
    background:
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll02.png) no-repeat left 72% / calc(10.416vw + 69px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll04.png) no-repeat left bottom/calc(calc(10.416vw + 78px) * 2 - 11px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-meal-bottom.png) no-repeat right bottom/calc(52vw + 452px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll03.png) no-repeat center 30% / calc(32.2vw + 600px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-meal-top.png) no-repeat center top/100%,
        #d3edfb;
    padding-top: var(--content-p);
}

#train_dining>.contentbox_main {
    margin-bottom: var(--content-p);
}

#train_dining>.contentbox_main:first-of-type::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: calc(10.416vw + 78px);
    aspect-ratio: 278/222;
    background: url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll01.png) no-repeat left top/contain;
    z-index: -1;
    transform: translate(75%, -10%);
}

@media screen and (max-width: 991px) {
    #train_dining {
        background:
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll02.png) no-repeat left 65% / calc(12.5vw + 69px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll04.png) no-repeat left bottom/calc(calc(10.416vw + 78px) * 2 - 11px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-meal-bottom.png) no-repeat right bottom/calc(52vw + 452px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll03.png) no-repeat center 26% / calc(32.2vw + 500px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-meal-top.png) no-repeat left top/150%,
            #d3edfb;
    }

    #train_dining>.contentbox_main:first-of-type::before {
        transform: translate(10%, -90%);
    }
}

@media screen and (max-width: 767px) {
    #train_dining {
        background:
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll02.png) no-repeat left 52% / calc(12.5vw + 69px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll04.png) no-repeat left bottom/calc(calc(10.416vw + 78px) * 2 - 11px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-meal-bottom.png) no-repeat right bottom/calc(52vw + 452px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/meal-doll03.png) no-repeat right 34% / calc(32.2vw + 300px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-meal-top.png) no-repeat left top/150%,
            #d3edfb;
    }
}

.dining_area>div:nth-of-type(even) .act_box {
    --main: #a59aca;
}

.dining_area .act_box figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background-color: var(--basic-txt);
    letter-spacing: 0.1em;
    color: #fff;
    font-weight: 300;
    transform: translateY(-100%);
}

#train_dining .act_txt_area>.act_txt_title,
#train_goods .act_txt_area>.act_txt_title {
    margin-top: -0.5rem;
    padding: 0;
}

.map_dining>img {
    max-width: 100%;
    text-align: center;
}

.train-dining-table .table th,
.train-dining-table .table td {
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
}

.train-dining-table .table th {
    white-space: nowrap;
}

@media only screen and (max-width: 767px) {
    .train-dining-table .table td {
        white-space: nowrap;
    }
}

/*-------------------- 餐飲服務 #train_dining END --------------------*/

/*-------------------- 周邊商品 #train_goods --------------------*/

#train_goods {
    --t-shadow: #d95097;
    --main: #d95097;
    --list: #fff462;
    padding-top: calc(var(--content-p) * 1.5);
    background:
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/goods-doll01.png) no-repeat 52% calc(var(--content-p) / 2) / calc(13vw * 2 + 174px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/goods-doll04.png) no-repeat right bottom/calc(13vw + 232px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/goods-doll02.png) no-repeat left 56% / calc(13vw + 108px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/goods-doll03.png) no-repeat 20% 60% / calc(13vw + 23px),
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-goods-top.png) no-repeat left top/100%,
        url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg03.png) repeat,
        #3e3a39;
}

@media only screen and (max-width: 767px) {
    #train_goods {
        background:
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/goods-doll01.png) no-repeat 56.5% calc(var(--content-p) / 1.5) / calc(13vw * 2 + 174px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/goods-doll04.png) no-repeat right 101% / calc(13vw + 165px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/goods-doll02.png) no-repeat left 61% / calc(13vw + 108px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/goods-doll03.png) no-repeat 20% 60% / calc(13vw + 23px),
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg-goods-top.png) no-repeat left top/300%,
            url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/bg03.png) repeat left top/75%,
            #3e3a39;
    }
}

/* #train_goods > h1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: calc(245 / 59 * 100%);
    aspect-ratio: 673 / 245;
    transform: translate(-45%, -25%);
    background: url(https://event.cdn-gunnarworks.com/events/formosa/2025sanrio/goods-doll01.png) no-repeat center/contain;
} */


.goods_area>div:nth-of-type(even) .act_box {
    --main: #a590c2;
}

.goods_area>div>img.goods-top-tag {
    position: absolute;
    width: min(130px, calc(80px + 12.2%));
    top: 0;
    left: 0;
    transform: rotate(-15deg);
    overflow: visible;
    z-index: 100;
}

.goods_area>div>img.goods-top-tag[src*='-new'] {
    width: min(135px, calc(85px + 12.2%));
    top: 8%;
    left: 3%;
    transform:rotate(0);
}

.goods_area .goods-price {
    display: block;
    border: 1px solid var(--list);
    padding: 0.2rem 0.75rem;
    border-radius: calc(var(--b-round) * 0.25);
    margin-bottom: 0.5rem;
}

.act_txt_area .goods-price li {
    display: block;
    font-size: 1em;
    padding: 0;
    margin: 0;
}

/*-------------------- 周邊商品 #train_goods END --------------------*/