@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');

#mainBlock {
    font-family: "Noto Serif TC", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background: #000;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

#mainBlock button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    outline: none;
}

#mainBlock button img {
    display: block;
    /* 去掉圖片底下的空白 */
}

#mainBlock header {
    width: 100%;
    background: url(../images/header_bg.jpg)top center no-repeat;
    background-size: 100%;
    aspect-ratio: 19 / 11.5;
    position: relative;
    z-index: 5;
}

#mainBlock .h3_title {
    margin-bottom: 6vh;
}

#mainBlock #fixedBar {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 透明 → 黑 漸層 */
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.85),
        rgba(0, 0, 0, 0));
    display: none;
    z-index: 999;
}

#mainBlock #fixedBar ul {
    width: 90%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5% 0 2%;
    margin: 0 auto;
}

#mainBlock #fixedBar li {
    width: 30%;
    margin: 0 1.5%;
}

#mainBlock #fixedBar img {
    width: 100%;
    transition: .2s all;
    cursor: pointer;
}

#mainBlock nav {
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    position: fixed;
    width: 100%;
    z-index: 50;
    animation: fadeInTop 0.8s ease-out forwards;
}

#mainBlock nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

#mainBlock nav li a {
    font-size: 1.2rem;
    padding: 0 1rem;
    transition: transform 0.3s ease;
    cursor: pointer;
    color: #ffffff;
    text-decoration: none;
}

#mainBlock nav li a:hover,
#mainBlock .menu ul li:hover {
    filter: blur(1px);
    transition: transform 0.3s ease;
    background: linear-gradient(to right, #a38583, #f7bc83, #f08f8c);
    background: -webkit-linear-gradient(to right, #a38583, #f7bc83, #f08f8c);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

#mainBlock nav li {
    opacity: 0;
    transform: translateY(-10px);
    /* 可選，淡入時稍微向下滑動 */
    animation: fadeIn 0.5s forwards;
    /* 使用動畫 */
}

/* 每個 li 延遲不同時間 */
#mainBlock nav li:nth-child(1) {
    animation-delay: 0.1s;
}

#mainBlock nav li:nth-child(2) {
    animation-delay: 0.2s;
}

#mainBlock nav li:nth-child(3) {
    animation-delay: 0.3s;
}

#mainBlock nav li:nth-child(4) {
    animation-delay: 0.4s;
}

#mainBlock nav li:nth-child(5) {
    animation-delay: 0.5s;
}

#mainBlock nav li:nth-child(6) {
    animation-delay: 0.6s;
}

#mainBlock h1 {
    background: url(../images/logo_bg.png)top center no-repeat;
    background-size: 100%;
    z-index: 99;
    aspect-ratio: 27 / 19;
    width: 13vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    margin-left: 2vw;
}

#mainBlock h1 img {
    width: 60%;
    padding-bottom: 7%;
}

/* 容器 */
#mainBlock .player {
    display: inline-block;
    font-family: Arial, sans-serif;
}

/* 播放按鈕（等化器） */
#mainBlock .eq-icon {
    width: 3vw;
    height: 2.5vw;
    display: flex;
    align-items: end;
    gap: 0.4vw;
    /* 相對應縮小間距（可調） */
    cursor: pointer;
    user-select: none;
}

/* 每一條 Bar */
#mainBlock .eq-icon .bar {
    width: 0.4vw;
    /* 原來 5px → 改為相對單位 */
    border-radius: 0.2vw;
    background: #949494;
    transform-origin: bottom;
    transition: background .2s;
}

/* 動畫高度也換成相對單位（會更一致） */
@keyframes eqAnim {
    0% {
        height: 0.5vw;
    }

    25% {
        height: 1.4vw;
    }

    50% {
        height: 0.9vw;
    }

    75% {
        height: 1.7vw;
    }

    100% {
        height: 0.5vw;
    }
}

/* 播放中啟動動畫 */
#mainBlock .eq-icon.playing .bar {
    background: #c2ac73;
    animation: eqAnim 0.8s infinite ease-in-out;
}

/* 個別 animation timing（都不需要改） */
#mainBlock .eq-icon.playing .bar.b1 {
    animation-duration: 0.7s;
    animation-delay: 0s;
}

#mainBlock .eq-icon.playing .bar.b2 {
    animation-duration: 0.9s;
    animation-delay: .05s;
}

#mainBlock .eq-icon.playing .bar.b3 {
    animation-duration: 0.6s;
    animation-delay: .12s;
}

#mainBlock .eq-icon.playing .bar.b4 {
    animation-duration: 1.0s;
    animation-delay: .02s;
}

#mainBlock .eq-icon.playing .bar.b5 {
    animation-duration: 0.8s;
    animation-delay: .08s;
}

/* 暫停狀態的靜止高度（也換成相對 vw） */
#mainBlock .eq-icon .bar.b1 {
    height: 0.5vw;
}

#mainBlock .eq-icon .bar.b2 {
    height: 1vw;
}

#mainBlock .eq-icon .bar.b3 {
    height: 0.75vw;
}

#mainBlock .eq-icon .bar.b4 {
    height: 1.2vw;
}

#mainBlock .eq-icon .bar.b5 {
    height: 0.6vw;
}

#mainBlock .quick_menu {
    position: fixed;
    right: 5vw;
}

#mainBlock .quick_menu a {
    display: inline-block;
}

#mainBlock .quick_menu img {
    display: block;
    width: 2.5vw;
    margin: 0 0.2vw;
    transition: .2s all;
}

#mainBlock .quick_menu img:hover {
    transition: .2s all;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* --- 漢堡按鈕外容器 --- */
#mainBlock .hamburger {
    width: 10vw;
    height: 10vw;
    position: fixed;
    cursor: pointer;
    right: 2vw;
    top: 56px;
    z-index: 9999;
}

/* --- 三條線 --- */
#mainBlock .hamburger span {
    display: block;
    height: 0.5vw;
    background: #e8d094;
    /* 金色 */
    position: absolute;
    right: 0;
    transition: 0.4s;
}

/* 三條線長度不一 */
#mainBlock .hamburger span:nth-child(1) {
    width: 10vw;
    top: 2vw;
}

#mainBlock .hamburger span:nth-child(2) {
    width: 7vw;
    top: 4vw;
}

#mainBlock .hamburger span:nth-child(3) {
    width: 3vw;
    top: 6vw;
}

/* --- 全螢幕選單 --- */
#mainBlock .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
    z-index: 9900;
}

#mainBlock .menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* --- li 初始狀態 --- */
#mainBlock .menu ul li {
    opacity: 0;
    transform: translateY(-20px);
    font-size: 6vw;
    color: #fff;
    margin: 3vw 0;
    list-style: none;
    text-align: center;
}

/* --- 激活 menu 時觸發動畫 --- */
#mainBlock .menu.active ul li {
    animation: fadeInTop 0.6s forwards;
}

/* li 依序延遲 */
#mainBlock .menu.active ul li:nth-child(1) {
    animation-delay: 0.1s;
}

#mainBlock .menu.active ul li:nth-child(2) {
    animation-delay: 0.2s;
}

#mainBlock .menu.active ul li:nth-child(3) {
    animation-delay: 0.3s;
}

#mainBlock .menu.active ul li:nth-child(4) {
    animation-delay: 0.4s;
}

#mainBlock .menu.active ul li:nth-child(5) {
    animation-delay: 0.5s;
}

#mainBlock .menu.active ul li:nth-child(6) {
    animation-delay: 0.6s;
}

/* --- hover 漸層文字效果 --- */
#mainBlock .menu ul li a {
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

#mainBlock .menu ul li a:hover {
    filter: blur(1px);
    background: linear-gradient(to right, #a38583, #f7bc83, #f08f8c);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

#mainBlock .download_bar {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 8px;
    width: 12vw;
    position: absolute;
    top: 20%;
    left: 2%;
}

#mainBlock .download_bar img {
    width: 100%;
    padding: 2% 0;
    transition: .2s all;
}

#mainBlock .download_bar img:hover,
#mainBlock #fixedBar img:hover,
#mainBlock .store-buttons img:hover,
#mainBlock .popup_btn img:hover,
#mainBlock .popup_sns img:hover,
#mainBlock .character_btn img:hover {
    filter: opacity(70%);
    transition: .2s all;
}

/* container 放在右上角 */
#mainBlock .banner-wrap {
    position: fixed;
    top: 15%;
    right: 2%;
    width: 24%;
    /* 可自由調整 */
    max-width: calc(100% - 32px);
    z-index: 50;
    pointer-events: auto;
    /* 初始不移動 */
    transform: translateX(0);
    transition: transform 350ms cubic-bezier(.2, .8, .2, 1);
}

/* 圖片與按鈕的包裹器，方便 hover 效果 */
#mainBlock .banner {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    user-select: none;
    padding-top: 5%;
}

/* banner 圖片：初始半透明、滑動與淡入效果 */
#mainBlock .banner img {
    display: block;
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 220ms ease, transform 350ms cubic-bezier(.2, .8, .2, 1);
    transform: translateX(0);
}

#mainBlock .banner:hover img,
#mainBlock .banner:focus-within img {
    opacity: 0.7;
}

/* 右上角的白色 X 按鈕 */
#mainBlock .close-btn {
    position: absolute;
    color: #ffffff;
    top: 1%;
    right: 1%;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 200;
    line-height: 1;
    background: transparent;
    font-size: 2vw;
    transition: .2s all;
    z-index: 10;
}

#mainBlock .close-btn:hover {
    color: #d45173;
    transition: .2s all;
}

/* 點擊 X 後加入 .dismiss，整個 wrapper 往右滑出畫面 */
#mainBlock .banner-wrap.dismiss {
    transform: translateX(120%);
}

/* 讓動畫尊重使用者減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
    .banner-wrap,
    .banner img {
        transition: none;
    }
}

#mainBlock .slogan {
    width: 60%;
    position: absolute;
    bottom: 2%;
    right: 2%;
}

#mainBlock .slogan_m {
    display: none;
}

#mainBlock .header_movie {
    width: 18vw;
    aspect-ratio: 8 / 6;
    background-size: 100%;
    position: absolute;
    bottom: 2%;
    left: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#mainBlock .movie_bg {
    position: absolute;
    width: 100%;
    filter: brightness(0.6);
    transition: transform 0.5s all;
}

#mainBlock .movie_bg:hover {
    filter: brightness(1);
    transition: transform 0.5s all;
}

#mainBlock .btn_play {
    width: 20%;
    background: transparent;
    border: 0;
    z-index: 5;
    transform: scale(1);
    transition: transform 180ms ease;
    cursor: pointer;
}

#mainBlock .btn_prereserve_m {
    width: 50%;
    position: relative;
    margin: 0 auto;
    padding: 5vw 0;
    display: none;
    cursor: pointer;
}

#mainBlock .btn_play img {
    width: 100%;
    cursor: pointer;
}

#mainBlock .btn_play:hover img,
#mainBlock .btn_play:focus img {
    animation: btnPlayBounce 260ms ease forwards;
}

#mainBlock .header_movie:hover .movie_bg {
    filter: brightness(1);
}

#mainBlock .banner_bg {
    background: url(../images/line_repeat.png)top center repeat-x;
    display: block;
    background-size: contain;
    width: 100%;
    height: 3vh;
}

#mainBlock .banner_section {
    position: relative;
    z-index: 5;
    background: #000000;
}

#mainBlock .img-box {
    width: 20vw;
    /* 固定容器寬高 */
    aspect-ratio: 66 / 25;
    overflow: hidden;
    /* 重要：避免放大後溢出 */
    display: block;
    margin: 4vh auto;
}

#mainBlock .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 可選：讓圖片填滿容器 */
    transition: transform 0.3s ease;
    cursor: pointer;
}

#mainBlock .img-box:hover img {
    transform: scale(1.1);
    /* 放大內容，但容器尺寸不變 */
}

#mainBlock .prereserve_section {
    padding: 10vh 0;
    width: 100%;
    position: relative;
    /* 重要：讓內部 position:absolute 可以定位 */
    overflow: hidden;
    /* 防止旋轉時溢出 */
}

#mainBlock .prereserve_bg_wrap {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    background-color: #071d30;
    opacity: 0;
    /* 初始隱藏 */
}

#mainBlock .prereserve_bg_wrap.active {
    opacity: 1;
    /* 滾動到對應 section 顯示 */
}

#mainBlock .prereserve_bg {
    background: url(../images/bg_wheel_black.png)center center no-repeat;
    background-size: 100%;
    width: 40%;
    aspect-ratio: 1 / 1;
    position: absolute;
    animation: spin 15s linear infinite;
    z-index: 1;
}

#mainBlock .cast_block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96%;
    max-width: 900px;
    margin: 0 auto;
    z-index: 5;
    position: relative;
}

#mainBlock .cast_section {
    padding: 10vh 0;
    width: 100%;
    position: relative;
    /* 重要：讓內部 position:absolute 可以定位 */
    overflow: hidden;
    /* 防止旋轉時溢出 */
}

#mainBlock .cast_bg_wrap {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    background-color: #071d30;
    opacity: 0;
    /* 初始隱藏 */
}

#mainBlock .cast_bg_wrap.active {
    opacity: 1;
    /* 滾動到對應 section 顯示 */
}

#mainBlock .cast_bg {
    background: url(../images/bg_wheel_black.png)center center no-repeat;
    background-size: 100%;
    width: 40%;
    aspect-ratio: 1 / 1;
    position: absolute;
    animation: spin 15s linear infinite;
    z-index: 1;
}

#mainBlock .cast_block ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#mainBlock .cast_block .cast_list_item {
    color: #fff;
    letter-spacing: 0.1rem;
    font-size: 1.25rem;
    padding: 0 25px;
    margin-bottom: 30px;
}

#mainBlock .cast_block .cast_more {
    width: 100%;
    font-size: 1rem;
    text-align: center;
}

#mainBlock .bg_1 {
    left: -20%;
}

#mainBlock .bg_2 {
    right: -20%;
}

#mainBlock .character_bg {
    background: url(../images/bg_wheel_black.png)center center no-repeat;
    background-size: 100%;
    width: 40%;
    aspect-ratio: 1 / 1;
    animation: spin 15s linear infinite;
    z-index: 1;
    top: 10%;
    position: fixed;
}

#mainBlock .prereserve_bg_m {
    background: url(../images/bg_wheel_black.png)center center no-repeat;
    background-size: 100%;
    width: 100%;
    left: 0%;
    top: 30%;
    aspect-ratio: 1 / 1;
    animation: spin 15s linear infinite;
    z-index: 1;
    display: none;
    position: fixed;
}

#mainBlock .cast_bg_m {
    background: url(../images/bg_wheel_black.png)center center no-repeat;
    background-size: 100%;
    width: 100%;
    left: 0%;
    top: 30%;
    aspect-ratio: 1 / 1;
    animation: spin 15s linear infinite;
    z-index: 1;
    display: none;
    position: fixed;
}

#mainBlock .character_bg_m {
    position: fixed;
    width: 90%;
    left: 5%;
    aspect-ratio: 1 / 1;
    background: url(../images/bg_wheel_black.png) center / cover no-repeat;
    animation: spin 15s linear infinite;
    z-index: 1;
    pointer-events: none;
    display: none;
}

#mainBlock .character_bg_1 {
    top: -15%;
}

#mainBlock .character_bg_2 {
    bottom: -20%;
}

#mainBlock .modal_bg {
    background: url(../images/bg_wheel_black.png)center center no-repeat;
    background-size: 100%;
    width: 80%;
    aspect-ratio: 1 / 1;
    position: absolute;
    animation: spin 15s linear infinite;
    z-index: -1;
}

#mainBlock .title {
    display: block;
    margin: 2vh auto;
    width: 15vw;
    z-index: 5;
    position: relative;
}

#mainBlock .prereserve_block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96%;
    max-width: 700px;
    margin: 0 auto;
    z-index: 5;
    position: relative;
}

#mainBlock .prereserve_block_l {
    width: 30%;
    margin-right: 5%;
}

#mainBlock .prereserve_block_r {
    width: 65%;
}

#mainBlock .prereserve_item {
    width: 100%;
}

#mainBlock .prereserve_item_m {
    width: 100%;
    display: none;
}

#mainBlock .prereserve_notice {
    width: 100%;
    margin-top: 1vw;
    cursor: pointer;
}

#mainBlock .mobile_menu {
    opacity: 0;
}

#mainBlock .mobile-section {
    width: 100%;
    margin: auto;
    padding: 16px;
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    font-family: 'Noto Sans TC';
    font-weight: 500;
}

/* 標題 */
#mainBlock .label-title {
    font-size: 1.2vw;
    margin-top: 1.5vw;
    display: block;
    color: #ddc1a9;
}

#mainBlock .country-code {
    width: 30%;
    padding: 1% 0;
    background: #071d30;
    /* 深藍色 */
    color: #fff;
    /* 白字 */
    border: none;
    border-radius: 6px;
    appearance: none;
    /* 隱藏瀏覽器預設箭頭 */
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 1vw;
    position: relative;
    background-image: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l5 5 5-5" stroke="%23d4af37" stroke-width="2" fill="none" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    /* 箭頭位置 */
    background-size: 14px;
}

/* 移除焦點外框（選擇性） */
#mainBlock .country-code:focus {
    outline: none;
}

#mainBlock input::placeholder {
    /* color: #fff;*/
    /* 更改為你想要的顏色 */
    /* opacity: 0.5; /* 也可調整透明度 */
}

/* 輸入框組 */
#mainBlock .input-group {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #fff;
    margin-top: 8px;
}

#mainBlock .prefix {
    margin-right: 8px;
}

#mainBlock .input-group input {
    flex: 1;
    background: none;
    border: none;
    padding: 8px 0;
    outline: none;
    font-size: 1vw;
    color: #fff;
}

/* 勾選條款 */
#mainBlock .agree {
    margin-top: 12px;
    display: flex;
    align-items: center;
}

#mainBlock .agree label {
    margin-left: 0.2vw;
    font-size: 1vw;
}

/* 驗證碼列 */
#mainBlock .verify-row {
    margin-top: 14px;
    display: flex;
    gap: 8px;
}

#mainBlock .verify-input {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: none;
    width: 60%;
}

#mainBlock .verify-btn {
    background: #fff;
    color: #000;
    padding: 10px 14px;
    border-radius: 6px;
    border: none;
    width: 40%;
    cursor: pointer;
}

#mainBlock .main-action {
    width: 80%;
    display: block;
    margin: 0 auto;
    position: relative;
    margin-top: 5%;
    padding: 0 0 22%;
    cursor: pointer;
}

#mainBlock .main-action img {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

/* 預設：原圖顯示，hover圖隱藏 */
#mainBlock .img-default {
    opacity: 1;
}

#mainBlock .img-hover {
    opacity: 0;
}

/* 滑鼠移上：原圖淡出，新圖淡入 */
#mainBlock .main-action:hover .img-default {
    opacity: 0;
}

#mainBlock .main-action:hover .img-hover {
    opacity: 1;
}

/* Store 按鈕 */
#mainBlock .store-buttons {
    display: flex;
    justify-content: center;
    position: relative;
}

#mainBlock .store-buttons a {
    display: inline-block;
    width: 40%;
    padding: 0 2%;
}

#mainBlock .store-buttons a img {
    width: 100%;
    transition: .2s all;
}

#mainBlock .award_section {
    width: 100%;
    background-color: #ffe9ec;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10vh 0 10vh;
    font-size: 1.5vw;
    position: relative;
    z-index: 5;
    background: url(../images/bg_deco1.png)#ffe8eb top center no-repeat;
    background-size: 100%;
    color: #a0868c;
}

#mainBlock .award_bg {
    width: 100%;
    height: 80%;
    position: absolute;
    bottom: 0;
    background: url(../images/bg_deco2.png)center center repeat-y;
    background-size: 100%;
}

#mainBlock .award_content {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#mainBlock .award_content ul {
    width: 50%;
    margin: 2%;
    opacity: 0;
    /* 初始隐藏 */
    transform: scale(1.1);
    /* 初始放大 */
    filter: blur(10px);
    /* 初始模糊 */
    transition: all 0.8s ease;
    /* 平滑过渡 */
}

#mainBlock .award_content ul.show {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

#mainBlock .award_content li {
    width: 100%;
    padding: 1% 0;
    position: relative;
}

#mainBlock .award_content ul img {
    width: 100%;
}

#mainBlock .deco_complete {
    width: 25%;
    padding-bottom: 9%;
    background: url(../images/award_complete.png)top center no-repeat;
    background-size: cover;
    position: absolute;
    z-index: 5;
    left: 15%;
    top: 0;
}

#mainBlock .award_content_2 {
    width: 50%;
    position: relative;
}

#mainBlock .award_content_3 {
    width: 60%;
    position: relative;
}

#mainBlock .char_section {
    width: 100%;
    background-color: #071c30;
    position: relative;
    padding: 10vh 0;
    z-index: 5;
}

#mainBlock .char_bar {
    width: 100%;
    display: flex;
}

#mainBlock .char_logo {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mainBlock .char_logo img {
    width: 60%;
}

#mainBlock .scroll-wrapper-block {
    position: relative;
    width: 70%;
    overflow: hidden;
    padding: 20px 0;
}

#mainBlock .scroll-container-block {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    cursor: grab;
    touch-action: pan-y;
}

#mainBlock .scroll-container-block.dragging {
    cursor: grabbing;
}

#mainBlock .scroll-container-block img {
    user-drag: none;
    -webkit-user-drag: none;
}

/* Chrome / Safari / Edge (WebKit) */
#mainBlock .scroll-container-block::-webkit-scrollbar {
    display: none;
}

/* Firefox */
#mainBlock .scroll-container-block {
    scrollbar-width: none;
    /* hide */
    -ms-overflow-style: none;
    /* IE 10+ */
}

/* 內容排水平列 */
#mainBlock .content {
    display: inline-flex;
    flex-wrap: nowrap;
}

#mainBlock .content,
#mainBlock .box {
    user-select: none;   /* 防止選字 */
}

/* 內容項目 */
#mainBlock .box {
    width: 42%;
    font-size: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-shrink: 0;
    /* ★ 不要被壓縮 */
    position: relative;
    padding: 2%;
}

#mainBlock .box img {
    width: 100%;
    transition: transform 500ms ease;
    /* 平滑過渡 */
    transform-origin: center center;
    /* 從中心旋轉（可改為 right center） */
    backface-visibility: hidden;
    /* 性能優化 */
    will-change: transform;
    /* 提示瀏覽器優化 */
}

#mainBlock .char_name {
    width: 50%;
    background: url(../images/character/chara_name_bg.png)center center no-repeat;
    background-size: 100%;
    font-size: 1.5vw;
    color: #ffffff;
    z-index: 10;
    position: absolute;
    display: inline-block;
    text-align: center;
    padding: 5% 0;
    bottom: 0;
}

/* hover 時順時針旋轉 10 度（右斜） */
#mainBlock .box:hover img,
#mainBlock .box:focus-within img {
    /* keyboard accessibility */
    transform: rotate(5deg) scale(1.02);
    /* 加一點 scale 讓效果更顯眼，可移除 scale */
    cursor: pointer;
}

/* 左右按鈕 */
#mainBlock .btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 2vw 2vw;
    cursor: pointer;
    border: none;
    z-index: 20;
}

#mainBlock .left-btn {
    left: 1vw;
    display: none;
    background: url(../images/character/btn_prev.png)top center no-repeat;
    background-size: 100%;
}

#mainBlock .right-btn {
    right: 1vw;
    background: url(../images/character/btn_next.png)top center no-repeat;
    background-size: 100%;
}

#mainBlock .intro_section {
    position: relative;
    width: 100%;
/*    height: 90vh;*/
    background: url(../images/bg_intro.jpg)center center no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10vh 0;
    z-index: 5;
}

#mainBlock .txt_intro {
    width: 25%;
}

#mainBlock .gallery_section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 10vh 0;
    z-index: 4;
}

#mainBlock .gallery-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #071c30;
    overflow: hidden;
}

#mainBlock .gallery_bg_wrap.active {
    opacity: 1;
    /* 顯示對應背景 */
}

#mainBlock .gallery_bg_wrap {
    width: 100%;
    height: 100vh;
    top: 0;
    position: fixed;
    z-index: -1;
    opacity: 0;
}

#mainBlock .gallery-row {
    position: absolute;
    top: calc(var(--i) * 15%);
    height: 15%;
    /* 10 排 → 每排 10% 高 */
    width: 200%;
    /* 兩張圖水平並排 */
    display: flex;
    animation: scroll 20s linear infinite;
    animation-delay: calc(var(--i) * -2s);
    /* 每排錯位 */
}

/* 兩張圖片真正並排放置 */
#mainBlock .gallery-row .img {
    width: 100%;
    height: 100%;
    background-image: url("../images/bg_gallery_repeat_black.png");
    background-repeat: repeat-x;
    background-size: auto 100%;
    /* 高度用 % */
}

#mainBlock #gallery {
    width: 50vw;
    max-width: 900px;
    font-family: sans-serif;
    z-index: 5;
}

/* -------- 大圖區 -------- */
#mainBlock .big-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

#mainBlock #big-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        filter 0.8s ease,
        opacity 0.8s ease,
        transform 0.8s ease;
}

#mainBlock #big-img.fade-effect {
    filter: grayscale(100%);
    opacity: 0.3;
    transform: scale(1.05);
}

/* -------- 縮圖列 -------- */
#mainBlock .thumbs-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    gap: 1vw;
}

#mainBlock .thumb-nav {
    width: 5%;
    padding-bottom: 5%;
    cursor: pointer;
    opacity: 0.6;
}

#mainBlock .thumb-nav:hover {
    opacity: 1;
}

#mainBlock .prev-thumb {
    background: url(../images/gallery/btn_prev.png)center center no-repeat;
    background-size: 100%;
}

#mainBlock .next-thumb {
    background: url(../images/gallery/btn_next.png)center center no-repeat;
    background-size: 100%;
}

#mainBlock .thumbs-window {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    /* 避免 flex 物件換行 */
}

/* 縮圖主列 */
#mainBlock .thumbs {
    display: flex;
    gap: 1vw;
    transition: transform 0.4s ease;
    flex-wrap: nowrap;
    /* ← 不允許換行 */
}

#mainBlock .thumbs img {
    width: 8vw;
    aspect-ratio: 16/10;
    object-fit: cover;
    cursor: pointer;
    transition: filter 0.3s, transform 0.3s;
    filter: grayscale(100%);
}

#mainBlock .thumbs img:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
}

#mainBlock .thumbs img.active {
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* 縮圖外框：固定大小、不讓 img 超出 */
#mainBlock .thumb-box {
    width: 8vw;
    overflow: hidden;
    flex-shrink: 0;
    /* 防止縮圖在 RWD 時被壓縮 */
    border-radius: 2px;
    flex-shrink: 0;
}

#mainBlock .footer_section {
    width: 100%;
    height: 100vh;
    background: url(../images/img_lighthouse_pc.jpg)center center no-repeat;
    background-size: cover;
    position: relative;
    z-index: 5;
}

/* 登入視窗 */
#mainBlock #success-modal,
#mainBlock #notice-modal,
#mainBlock #failed-modal,
#mainBlock #info-modal {
    display: none;
    /* 初始隱藏 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000000;
    width: 85%;
    padding: 2%;
    max-width: 600px;
    max-height: 85vh;
    z-index: 1000;
    flex-direction: column;
    overflow: hidden;
    line-height: 2vw;
    font-size: 1.4vw;
    color: #ddc1a9;
    font-family: 'Noto Sans TC';
    font-weight: 500;
    border: 1px solid white;
    /* 3px 寬度, 實線, 白色 */
}

#mainBlock #success-modal {
    padding: 5vw 0;
}

#mainBlock #failed-modal, #mainBlock #info-modal {
    padding: 8vw 0;
}

#mainBlock #notice-modal {
    color: #ffffff;
}

#mainBlock .modal_title {
    width: 50%;
    max-width: 481px;
}

#mainBlock .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h4 {
    text-align: center;
}

h4 img {
    width: 30%;
    max-width: 481px;
    margin-bottom: 2vw;
}

#mainBlock .popup_btn,
#mainBlock .popup_sns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2vw;
    width: 80%;
}

#mainBlock .popup_btn a, #mainBlock .popup_sns a {
    display: inline-block;
}

#mainBlock .popup_btn a {
    width: 10vw;
    padding: 0.5vw;
}

#mainBlock .popup_btn a img {
    width: 100%;
    transition: .2s all;
}

#mainBlock .popup_sns a {
    width: 3vw;
    padding: 0.2vw;
}

#mainBlock .popup_sns a img {
    width: 100%;
    transition: .2s all;
}

/* 遮罩背景 */
#mainBlock #overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;
}

#mainBlock .notice_in {
    font-size: 1vw;
    line-height: 2vw;
    width: 98%;
    height: 50vh;
    overflow-y: scroll;
}

#mainBlock .notice_in p {
    display: block;
    width: 95%;
}

#mainBlock .character_section {
    position: relative;
    padding: 10vh 0;
    width: 100%;
    overflow: hidden;
}

#mainBlock .character_section_in {
    position: relative;
    width: 100%;
    display: flex;
    z-index: 3;
    margin-top: 3%;
}

#mainBlock .character_img {
    display: block;
    width: 65%;
    margin-right: 5%;
    left: 0;
    opacity: 0;
    filter: grayscale(100%);
    transition: all 2s ease;
    /* 平滑过渡 */
}

#mainBlock .character_img.show {
    opacity: 1;
    filter: grayscale(0%);
    transition: all 2s ease;
    /* 平滑过渡 */
}

#mainBlock .btn_back,
#mainBlock .btn_more {
    color: #ffffff;
    transition: .2s all;
    text-decoration: none;
    font-size: 1vw;
}

#mainBlock .btn_back:hover,
#mainBlock .btn_more:hover {
    color: #ef858e;
    text-decoration: line-through;
    transition: .2s all;
}

#mainBlock .character_logo {
    width: 80%;
    filter: blur(10px);
    opacity: 0;
    animation-delay: 2s;
    transition: all 0.4s ease 1s;
    /* 這裡最後的 2s 就是延遲 */
}

#mainBlock .character_logo.show {
    filter: blur(0px);
    opacity: 1;
    animation-delay: 2s;
}

#mainBlock .back_line {
    display: inline-block;
    border-top: 1px solid #ffffff;
    width: 10%;
}

#mainBlock .char_right {
    width: 30%;
}

#mainBlock .character_btn {
    display: flex;
    width: 40%;
    margin: 5% 0;
    position: relative;
    z-index: 3;
}

#mainBlock .character_btn img {
    width: 90%;
    margin-right: 10%;
    transition: .2s all;
}

#mainBlock .character_movie {
    width: 25%;
    position: relative;
    aspect-ratio: 16 / 9;
    margin-top: -5%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.6s ease 1.5s;
    /* 這裡最後的 2s 就是延遲 */
    z-index: 4;
}

#mainBlock .frame_movie {
    width: 100%;
    position: absolute;
    z-index: 5;
    cursor: pointer;
}

#mainBlock .character_movie.show {
    opacity: 1;
    transform: translateX(0px);
}

#mainBlock .char_movie_img {
    width: 100%;
    position: absolute;
    filter: brightness(60%);
    transition: .2s all;
}

#mainBlock .character_movie:hover .char_movie_img {
    filter: brightness(100%);
    transition: .2s all;
}

#mainBlock .char_intro {
    color: #ffffff;
    font-size: 1.2vw;
    line-height: 2vw;
    width: 30%;
    left: 20%;
    position: relative;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.6s ease 1.5s;
    z-index: 3;
}

#mainBlock .char_intro img {
    width: 1.8vw;
}

#mainBlock .char_intro.show {
    opacity: 1;
    transform: translateX(0px);
}

#mainBlock .char_intro p {
    display: flex;
    align-items: center;
}

#mainBlock h5 {
    font-size: 3vw;
    line-height: 5vw;
}

#mainBlock .char_movie_btn {
    width: 20%;
    z-index: 5;
}

#mainBlock .char_play {
    z-index: 5;
    width: 20%;
    position: absolute;
}

#mainBlock .char_circle {
    z-index: 5;
    width: 20%;
    animation: spin 15s linear infinite;
    position: absolute;
}

#mainBlock .char_list {
    position: relative;
    width: 100%;
    padding: 5vh 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 3;
}

#mainBlock .char_list_in {
    width: 80%;
    display: flex;
}

#mainBlock .char_list_1 {
    background: #4b2828;
}

#mainBlock .char_list_2 {
    background: #33353c;
}

#mainBlock .char_list_3 {
    background: #282622;
}

#mainBlock .char_list_l {
    width: 20%;
}

#mainBlock .char_list_l img {
    width: 90%;
}

#mainBlock .logo_a,
#mainBlock .logo_c {
    margin-top: 3%;
}

#mainBlock .char_list_r {
    width: 80%;
}

#mainBlock .char_list_r img {
    width: 22%;
    margin-bottom: 1.5%;
    margin-left: 1.5%;
    transition: transform 500ms ease;
    /* 平滑過渡 */
    transform-origin: center center;
    /* 從中心旋轉（可改為 right center） */
    backface-visibility: hidden;
    /* 性能優化 */
    will-change: transform;
    /* 提示瀏覽器優化 */
}

#mainBlock .char_list_r img:hover,
#mainBlock .char_list_r img:focus {
    transform: rotate(5deg) scale(1.02);
    cursor: pointer;
}

#mainBlock .character_section_m {
    display: none;
}

#mainBlock .news_section,
#mainBlock .news_list_section {
    padding: 10vh 0;
    width: 100%;
    position: relative;
    /* 重要：讓內部 position:absolute 可以定位 */
    overflow: hidden;
    /* 防止旋轉時溢出 */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 78vh;
}

#mainBlock .news_list_section,
#mainBlock .news_content_section {
    padding: 10vh 0;
    width: 100%;
    position: relative;
    /* 重要：讓內部 position:absolute 可以定位 */
    overflow: hidden;
    /* 防止旋轉時溢出 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#mainBlock .news_block,
#mainBlock .news_list_section_in {
    display: flex;
    max-width: 990px;
    width: 80%;
    font-size: 1.1vw;
    line-height: 2.6vw;
}

#mainBlock .news_content_section_in {
    max-width: 990px;
    width: 80%;
    font-size: 1.1vw;
    color: #ffffff;
}

#mainBlock .news_content_section_in p {
    line-height: 2vw;
    margin: 2vw 0;
}

#mainBlock .news_content_section_in img {
    max-width: 990px;
    width: 80%;
    margin: 2vw 0;
}

#mainBlock .news_block_l {
    width: 30%;
    padding: 1em 0 0 0;
}

#mainBlock .news_block_r {
    width: 70%;
    position: relative;
    z-index: 5;
}

#mainBlock .news_block_r p {
    text-align: right;
}

#mainBlock .news_block li a,
#mainBlock .news_list_section li a {
    padding: 1em 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-bottom: 1px solid #7e7e7e;
}

#mainBlock .news_block .date,
#mainBlock .news_list_section li .date {
    display: block;
    width: 20%;
    color: #fbe2aa;
    height: 100%;
}

#mainBlock .news_content_section_in_date {
    display: block;
    color: #fbe2aa;
    line-height: 2vw;
}

#mainBlock .news_block .content_title,
#mainBlock .news_list_section .content_title {
    display: block;
    width: 80%;
    color: #ffffff;
    height: 100%;
    transition: 0.2s all;
}

#mainBlock h7 {
    color: #ffffff;
    font-size: 1.4vw;
    display: block;
    padding-bottom: 2vw;
    border-bottom: 1px solid #7e7e7e;
    margin-bottom: 2vw;
    line-height: 2vw;
}

/* 預設顏色 */
#mainBlock .date {
    color: #999;
    margin-right: 10px;
}

#mainBlock .title {
    color: #333;
}

/* 滑鼠移到整個連結時，只改標題 */
#mainBlock li a:hover .content_title {
    color: #d65d4f;
    /* 你要的 hover 顏色 */
    transition: 0.2s all;
}

#mainBlock .news_title_eff {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.6s ease;
}

#mainBlock .news_title_eff.show {
    opacity: 1;
    transform: translateY(0px);
    transition-delay: 1s;
}

#mainBlock .news_list_eff {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.6s ease;
}

#mainBlock .news_list_eff.show {
    opacity: 1;
    transform: translateY(0px);
    transition-delay: 1.6s;
}

#mainBlock .footer_wrap {
    background-color: #071c30;
}

#mainBlock .banner_footer_wrap {
    background: url(../images/bg_floor_black.png)no-repeat bottom / cover;
}

#mainBlock .contents_staff {
    background: url("../images/frame_pc.png")no-repeat center / contain;
    width: 1000px;
    width: 71.42%;
    max-width: 1120px;
    min-width: 900px;
    margin: auto;
    position: relative;
    z-index: 5;
    text-align: center;
}

#mainBlock .contents_staff ul {
    display: flex;
}

#mainBlock .contents_staff_list {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 36px 30px;
}

#mainBlock .contents_staff_list::after {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    height: 26px;
    background: #FDE4AB;
    right: 0;
}

#mainBlock .contents_staff_list:last-child::after {
    display: none;
}

#mainBlock .contents_staff_list:nth-child(1) {
    width: 28%;
}

#mainBlock .contents_staff_list:nth-child(2) {
    width: 44%;
}

#mainBlock .contents_staff_list:nth-child(3) {
    width: 28%;
}

#mainBlock .contents_staff_list .staff-role {
    color: #FDE4AB;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-align: left;
    margin-bottom: 0;
}

#mainBlock .contents_staff_list .staff-role::after {
    content: "：";
    padding: 0 10px;
}

#mainBlock .contents_staff_list .staff-logo {
    flex: 1;
}

#mainBlock .contents_staff_list .staff-logo:nth-of-type(2) {
    margin-left: 20px;
}

#mainBlock .contents_staff_list .staff-logo img {
    filter: blur(0);
    transition: filter 0.3s ease;
    width: 100%;
}

#mainBlock .contents_staff_list .staff-logo img:hover {
    filter: blur(1px);
}

/* 無縫流動動畫 */
@keyframes scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes btnPlayBounce {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.88);
    }

    /* 先縮一點 */
    100% {
        transform: scale(1.08);
    }
    /* 再放大 */
}

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

    to {
        transform: rotate(360deg);
    }
    /* 完整順時針轉一圈 */
}

@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 定義淡入動畫 */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 定義淡入動畫 */
@keyframes blur {
    0% {
        transform: scale(1.2);
        filter: blur(10px);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        filter: blur(0);
        opacity: 1;
    }
}

#companyBlock, #copyRightBlock {
    position: relative;
    z-index: 5;
}

#mainBlock ol li::before {
    content: none;
}

#mainBlock ol {
    list-style-type: decimal;
}