@charset "utf-8";
/* CSS Document */

        /* --- 全域設定 (Global Styles) --- */
        :root {
            --primary-color: #fe5f18;     /* 橘色主色 */
            --secondary-color: #00a0e9;   /* 藍色輔助色 */
            --bg-light: #f9f9f9;
            --text-dark: #333;
            --<strong>nav-height</strong>: 60px;           /* 導覽列高度略微增高，更像參考網站 */
            --site-width: 1200px;         /* 網頁內容最大寬度 */
        }
.pc_none{ display: none;}
.red{color:#ffffff; background-color: #39bf63; font-size: 1rem; border-radius: 20px; padding: 2px 10px;}
.hr { color:#ededed!important;
    display: block;
    margin-block-start: 2.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    unicode-bidi: isolate;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "Microsoft JhengHei", "Heiti TC", Arial, sans-serif;
        }

        body {
            overflow-x: hidden;
            background-color: #fff;
            color: var(--text-dark);
            padding-top: var(--nav-height); /* 避免內容被 Header 遮擋 */
            
        }
.text_center{ text-align: center;}
.bagbag_img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    text-align: center;
}

html {
    scroll-behavior: smooth;
}
.flex_box{ display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 20px;}
.page_img{ max-width: 800px;display: block;
    margin: 0 auto;}
.page_img_s{ max-width: 700px;display: block;
    margin: 0 auto;}
.bg-green{background-image: url( "../img/bg-green.jpg");
    background-size: contain;
    position: relative;
    z-index: 1;
    background-repeat: repeat;}

        a { text-decoration: none; color: inherit; transition: 0.3s; }
        ul { list-style: none; }
        img { max-width: 100%; display: block; }
        button { border: none; background: none; cursor: pointer; }

        /* 重點：內容寬度限制容器 (1200px) */
        .inner-wrap {
            max-width: var(--site-width);
            margin: 0 auto;
            padding: 0 20px; /* 左右留一點縫隙 */
            position: relative;
            width: 100%;
        }

        /* --- Landing Page (開場動畫) --- */
        #landing-page {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background:#ff5f17;
            z-index: 9999;
            display: flex; justify-content: center; align-items: center;
            transition: opacity 1s ease-out;
        }
   #landing-page p{
         
         color:#ffffff;
       font-size: 1rem;
       font-weight: bold;
       text-align: center;
       margin: 0 auto;
       display: block;
        }
        #landing-page.hidden { opacity: 0; pointer-events: none; }
        .landing-content { text-align: center; color: white; font-size: 2rem; animation: pulse 1s infinite;     text-align: center;
       margin: 0 auto;}

        /* --- Header / Menu (參考樣式優化) --- */
        header {
            position: fixed;
            top: 0; left: 0;
            width: 100%;
            height: var(--nav-height);
            background:#fe5f18; 
            color: #ffffff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            z-index: 1000;
        }

  
        .logo { 
            height: 50px; /* Logo 高度限制 */
            display: flex; align-items: center;
        }
        .logo img { height: 100%; width: auto; }


 /* 定義顏色變數，方便統一修改 */
        :root {
            --theme-orange: #ff5f17; /* 主要橘色 */
            --theme-green: #39bf63;  /* 互動綠色 */
            --text-white: #ffffff;
        }


        /* --- 2. 選單容器 (Navbar) --- */
        .navbar {
            background-color: var(--theme-orange);
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
            position: relative;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* 左邊 Logo */
     .navbar-logo {
    display: flex;       /* 讓圖片垂直置中 */
    align-items: center;
    height: 100%;        /* 跟隨導覽列高度 */
    text-decoration: none;
}

/* LOGO 圖片本體設定 */
.navbar-logo img {
    height: 50px;       /* 設定高度，讓它不要撐爆導覽列(導覽列高80px) */
    width: auto;        /* 寬度自動，維持比例 */
    display: block;     /* 消除圖片底部預設空隙 */
    
    /* 【重要】如果您的 SVG 原本不是白色的，請加入下面這行濾鏡： */
    /* 這行會把任何顏色的圖片轉為全白 */
    filter: brightness(0) invert(1); 
}
        /* --- 3. 桌機版選單 (Desktop) --- */
        .nav-menu {
            display: grid;
            grid-template-columns: repeat(6, auto); /* 5個按鈕 */
            list-style: none;
            text-align: center;
            width: auto;
            gap: 13px; /* 按鈕之間的間距 */
        }
/* 1. 正常狀態：黃底黑字 */
.nav-menu li:last-child .nav-links {
    background-color: #fbc818 !important; /* 強制設定為黃色 */
    color: #111111 !important;            /* 強制設定為黑色 */
    border: 1px solid #fbc818;            /* (選用) 確保邊框顏色一致 */
}

/* 2. 滑鼠滑過狀態 (Hover)：稍微變深，保持黑字 (避免變成預設的綠底白字) */
.nav-menu li:last-child .nav-links:hover {
    background-color: #eebc13 !important; /* 稍微深一點的黃色，製造互動感 */
    color: #000000 !important;            /* 保持黑色文字 */
    transform: translateY(-2px);          /* (選用) 稍微浮起，增加點擊慾望 */
}
        .nav-links {
            text-decoration: none;
            font-weight: bold;
            padding: 7px 15px;
            border-radius: 100px;
            transition: all 0.3s ease;
            
            /* 預設樣式：白底橘字 */
            background-color: var(--text-white);
            color: var(--theme-orange);
        }

        /* 滑鼠滑過樣式 (Hover)：綠底白字 */
        .nav-links:hover {
            background-color: var(--theme-green);
            color: var(--text-white);
        }

        /* 當前頁面樣式 (Active)：綠底白字 */
        /* 假設 "產品介紹" 是當前頁面 */
        .nav-links.active {
            background-color: var(--theme-green);
            color: var(--text-white);
        }

        /* --- 4. 手機版漢堡選單圖標 (預設隱藏) --- */
        .menu-toggle {
            display: none; /* 桌機版不顯示 */
        } 
.b768{ display: none!important;}
        /* --- 手機版樣式 (RWD: 寬度小於 1025px) --- */
        @media screen and (max-width: 1025px) {
            .ks-l2 {
    top: 55%!important;
    left: 10%;
    animation-delay: 0.5s;
    z-index: 1;
}
            .ks-r1 {
    top: 35%!important;
    right: -1%!important;
    z-index: 1;
}
            .ks-r2 {
    top: 60%;
    right: 15%!important;
    animation-delay: 0.5s;
    z-index: 1;
}
            .b768{ display: block;}
            #sec1 {
    height: 700px!important;
    background-image: url(../img/BG_m.jpg);
    background-position: center center;
    position: relative;
    overflow: hidden;
}
             .kv-300 { width: 200px!important;
}
            .kv-500 { width: 350px!important;
}
     .kv-200 { width: 200px!important;
}
}
        /* --- 5. 手機版樣式 (RWD: 寬度小於 768px) --- */
        @media screen and (max-width: 768px) {
             .ks-l2 {
   display: none;
}
            .ks-r1 {
   display: none;
}
            .ks-r2 {
   display: none;
}
            .d_none{ display: none;}
           
            
            /* 調整容器 Padding */
            .navbar {
                padding: 0 1rem;
            }

            /* 漢堡圖標設定 */
            .menu-toggle {
                display: flex;
                flex-direction: column;
                cursor: pointer;
            }

            /* 三條線的樣式 */
            .menu-toggle .bar {
                width: 25px;
                height: 3px;
                margin: 3px auto;
                transition: all 0.3s ease-in-out;
                background-color: var(--text-white); /* 白線 */
                display: block;
            }

            /* 選單列表 (原本在右邊的按鈕) */
            .nav-menu {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 60px; /* 接在 Navbar 下方 */
                left: -100%; /* 預設藏在左邊螢幕外 */
                width: 100%;
                height: auto; /* 根據內容高度，或設 100vh 佔滿 */
                background-color: var(--theme-orange); /* 手機版背景仍為橘色 */
                transition: all 0.3s ease;
                gap: 0; /* 移除間距，改為垂直排列 */
                
                z-index: 99;
            }

            /* 選單展開時的狀態 (由 JS 控制加入 active class) */
            .nav-menu.active {
                left: 0; /* 滑入螢幕 */
            }

            /* 手機版按鈕樣式調整 */
            .nav-menu li {
                width: 100%;
                text-align: center;
                border-bottom: 1px solid rgba(255,255,255,0.2); /* 分隔線 */
            }

            .nav-links {
                display: block;
                width: 100%;
                padding: 20px;
                border-radius: 0;
                background-color: transparent; /* 移除白底 */
                color: var(--text-white);      /* 改為白字 */
            }

            /* 手機版滑過樣式 (稍微變深一點即可，保持白字) */
            .nav-links:hover, .nav-links.active {
                background-color: rgba(255,255,255,0.1);
                color: var(--text-white);
            }

            /* --- 漢堡變 X 的動畫 --- */
            /* 當 menu-toggle 擁有 .is-active 時 */
            .menu-toggle.is-active .bar:nth-child(2) {
                opacity: 0; /* 中間線消失 */
            }

            .menu-toggle.is-active .bar:nth-child(1) {
                transform: translateY(9px) rotate(45deg); /* 上線旋轉 */
            }

            .menu-toggle.is-active .bar:nth-child(3) {
                transform: translateY(-9px) rotate(-45deg); /* 下線旋轉 */
            }
        }

        /* --- 通用 Section 設定 --- */
        section {
            padding: 20px 0 25px 0;
            width: 100%;
        }
        .section-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 20px;
            color: var(--secondary-color);
            letter-spacing: 1px;
        }

 #TITLE_P1 {
            height: 532px;
            background-image: url("../img/BG_s.jpg");
                background-position: center center;
            position: relative;
            overflow: hidden;
        }

.TITLE_IMG {
            display: block; margin: 0 auto;
            height: 532px; 
    max-width: 700px;
        }
        /* --- Section 1: 主視覺 --- */
        #sec1 {
            height: 700px;
            background-image: url("../img/BG.jpg");
                background-position: center center;
            position: relative;
            overflow: hidden;
        }
        .sec1-content {
            display: flex; justify-content: center; align-items: center;
            height: 700px; position: relative;
        }
        /* 動畫 Keyframes */
        @keyframes zoomInFloat { 0% { transform: scale(0.5); } 100% { transform: scale(1); } }
        @keyframes floatUD { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
        @keyframes floatLR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(15px); } }
        @keyframes rotateStar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.gift_text{
    line-height: 1.6;
    color: rgb(17, 17, 17);
    font-size: .9rem;
    font-weight: bold;
}
        .kv-main { width: 100%; z-index: 10; margin: 0 auto; display: block;}
        .kv-element-container { position: absolute; width: 100%; height: 100%; top: 0; pointer-events: none; }
        .kv-300 { position: absolute; width: 280px; animation: floatLR 3s infinite ease-in-out; }

        .kv-500 { position: absolute; width: 480px; animation: floatLR  4s linear infinite; }
.kv-100 { position: absolute; width: 500px; animation: rotateStar 5s linear infinite; }
        /* 絕對定位 */
        .ks-l1 { top: 31%; left: 5%; z-index: 1;}
        .ks-l2 { top: 60%; left: 10%; animation-delay: 0.5s;z-index: 1; }
     
        .ks-r1 { top: 28%; right: 1%;z-index: 1;}
        .ks-r2 { top: 60%; right: 5%; animation-delay: 0.5s; z-index: 1;}
 
        .star-l1 { top: 8%; left: 100px; }
        .star-l2 { bottom: 8%; left: 150px; }
        .star-r1 { top: 12%; right: 100px; }
        .star-r2 { bottom: 12%; right: 150px; }

        /* --- Section 2: 影片 --- */
/* --- 影片區塊左右排列設定 --- */
.video-layout-wrapper {
    display: flex;
    align-items: center;    /* 垂直置中 */
    justify-content: center;
    gap: 40px;              /* 影片跟文字中間的距離 */
    margin-top: 30px;
}

/* 左側：影片區塊 (佔 50%) */
.video-box-small {
    flex: 0 0 50%;          /* 強制設定寬度為 50% */
    max-width: 50%;
}

/* 右側：文字區塊 */
.video-text-right {
    flex: 1;                /* 填滿剩餘空間 */
    text-align: left;       /* 文字靠左 */
}

/* --- 修正 .price 在這邊的樣式 --- */
/* 因為原本 .price 有置中跟底線，這邊要拿掉，只保留字體大小跟顏色 */
.video-text-right .price {
    text-align: left;
    border-bottom: none;    /* 移除底線 */
    margin: 0 0 15px 0;     /*調整下方留白*/
    line-height: 1.2;
    display: block;         /* 確保獨佔一行 */
    font-size: 2.2rem;      /* 稍微縮小一點點，原本 3.2rem 在這裡會太大，若要原尺寸可刪除此行 */
}

.video-text-right .priceb {
    text-align: left;
    display: block;
    margin-bottom: 20px;
}

.video-text-right p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    font-weight: bold;
}

/* 手機版 (RWD) 變回上下排列 */
@media (max-width: 768px) {
    .video-layout-wrapper {
        flex-direction: column; /* 變垂直 */
    }
    .video-box-small {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .video-text-right {
        text-align: center; /* 手機版文字置中比較好看 */
    }
    .video-text-right .price,
    .video-text-right .priceb {
        text-align: center;
    }
}
        .video-container { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
      .video-box {
    width: 100%;             /* 手機版自動填滿螢幕 */
    max-width: 850px;        /* 桌機版限制最大寬度 850px */
    margin: 0 auto;          /* 讓影片置中 */
    aspect-ratio: 16 / 9;    /* 使用現代語法維持 16:9 比例 */
    flex: none;              /* 覆蓋原本 flex: 1 的設定，避免被拉伸 */
}

/* 確保 iframe 填滿容器 */
.video-box iframe {
    width: 100%;
    height: 100%;
}
        .video-text { flex: 1; min-width: 300px; }
        .video-text h2 { color: var(--secondary-color); margin-bottom: 20px; font-size: 1.8rem; }
        .video-text p { line-height: 1.8; color: #111; font-size: 1rem; font-weight: bold; }

        /* --- Section 3: 精彩表演 --- */
/* --- 桌機版預設樣式 --- */
/* ==========================================
   1. 共有結構設定 (橘色與綠色共用)
   ========================================== */
.perf-item, .perf-item2 {
    display: flex;
    align-items: center;
    margin: 30px auto;
    gap: 20px;
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    max-width: 850px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* 確保圓角邊緣乾淨 */
}

/* 偶數項左右反轉 (共用) */
.perf-item:nth-child(even), 
.perf-item2:nth-child(even) {
    flex-direction: row-reverse;
}

/* 圖片容器與內容容器比例 (共用) */
.perf-img { width: 60%; }
.perf-img img { width: 100%; height: auto; display: block; }

.perf-content { 
    width: 40%; 
    display: flex; 
    flex-direction: column; 
    text-align: center; 
}

.perf-title img { max-width: 100%; height: auto; margin-bottom: 10px; }
.perf-text { color: #ffffff;
    line-height: 2; /* 稍微加大行高，讓虛線有空間顯示且不擁擠 */
    margin-bottom: 15px;
    
    /* 核心：利用背景線性漸層模擬虛線 */
    background-position: bottom;
    background-size: 8px 1px; /* 8px 是虛線的寬度，1px 是高度 */
    background-repeat: repeat-x;
    
    /* 關鍵：讓背景應用在每一行文字上 */
    display: inline; 
    padding-bottom: 3px;
    
    /* 為了讓 inline 元素在容器內看起來像區塊，外層建議包裹 */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; }
.perf-text span {
    color: #ffffff;
    line-height: 2; /* 增加行距，讓視覺更清爽 */
    
    /* 使用 border-bottom 配合 inline 屬性 */
    border-bottom: 2px dashed rgba(255, 255, 255, 0.6); /* 白色半透明虛線 */
    
    /* 修正行與行之間的底線斷裂感 */
    padding-bottom: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* ==========================================
   2. 顏色區分 (個別設定)
   ========================================== */
.perf-item { background: #ff5f17; }   /* 橘色背景 */
.perf-item2 { background: #39bf63; }  /* 綠色背景 */

/* ==========================================
   3. 手機版 RWD 修正 (統一處理)
   ========================================== */
@media (max-width: 768px) {
    /* 所有的項目在手機上都轉為垂直排列 */
    .perf-item, .perf-item:nth-child(even),
    .perf-item2, .perf-item2:nth-child(even) {
        flex-direction: column !important;
        padding: 20px;
        width: 100%; /* 左右留一點縫隙 */
        gap: 10px;
    }

    /* 圖片與文字寬度恢復 100% */
    .perf-img, .perf-content {
        width: 100% !important;
    }

    /* 文字與內容置中 */
    .perf-content {
        text-align: center;
        align-items: center;
    }

    /* 調整手機版字體 */
    .perf-text {
        font-size: 0.95rem;
    }

    /* 按鈕樣式統整 */
    .perf-btno, .perf-btng {
        width: 300px;
        max-width: 220px;
        text-align: center;
        padding: 10px 0;
        display: block;
        text-align: center;
        margin:0 auto;
    }
}
.perf-text{color: #ffffff; font-size: 1.3rem; font-weight: bold;display: inline; line-height: 1.8;padding: 5px 0;}

/* --- 手機版修正 (Media Query) --- */

        .perf-btn:hover { transform: translateY(-3px); }
        .perf-btn:hover { transform: translateY(-3px); }
      
  .perf-btno {
    /* --- perf-btng--- */
      margin: 0 auto;
      max-width: 150px;
    margin-top: 20px;
    padding: 10px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    color: #ff5f17;
    border: 1px solid #e0e0e0; 
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);
    box-shadow: inset 0 1px 0 #ffffff,
                0 4px 0 #d1d1d1,
                0 5px 10px rgba(0, 0, 0, 0.1);
    display:  table; 
    align-items: center;
    justify-content: center;
    gap: 10px; 
    transition: all 0.1s ease;
    position: relative;
    text-decoration: none; 
}

/* --- 3. 左邊加入綠色箭頭 --- */
.perf-btno::before {
    content: "➜"; /* 或是 ➤, ◀ */
    color: #ff5f17; /* 箭頭顏色跟文字一樣 */
    font-size: 1.1em;
    font-weight: bold;
    transition: transform 0.2s ease;
}

/* --- 滑鼠懸停效果 (Hover) --- */
.perf-btno:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
    transform: translateY(-1px); /* 稍微浮起 */
    box-shadow: inset 0 1px 0 #ffffff,
                0 6px 0 #d1d1d1, /* 厚度陰影變長 */
                0 8px 15px rgba(0, 0, 0, 0.15);
}

/* --- 滑鼠懸停時，箭頭動一下 --- */
.perf-btno:hover::before {
    transform: translateX(-3px); /* 箭頭往左跳動 */
}

/* --- 點擊按壓效果 (Active) --- */
.perf-btno:active {
    transform: translateY(4px); /* 向下壓 */
    box-shadow: inset 0 1px 0 #ffffff,
                0 0 0 #d1d1d1, /* 厚度消失 */
                0 2px 3px rgba(0, 0, 0, 0.1);
}
.perf-btng {
    /* --- perf-btng--- */
      margin: 0 auto;
    max-width: 150px;
    margin-top: 0px;
    padding: 10px 30px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
    color: #39bf63; /* 維持原本的綠色文字 */
    border: 1px solid #e0e0e0; /* 加上極細邊框讓輪廓更清晰 */

    /* --- 1. 白灰色漸層 (製造金屬/塑膠質感) --- */
    background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%);

    /* --- 2. 立體感陰影 --- */
    /* 第一層: 內部高光 (讓頂部有光澤) */
    /* 第二層: 底部灰色硬陰影 (製造按鈕厚度) */
    /* 第三層: 外部柔和陰影 (懸浮感) */
    box-shadow: inset 0 1px 0 #ffffff,
                0 4px 0 #d1d1d1,
                0 5px 10px rgba(0, 0, 0, 0.1);

    /* --- 版面配置 (為了對齊箭頭) --- */
    display:  table; /* 改用 flex 以便對齊圖示與文字 */
    align-items: center;
    justify-content: center;
    gap: 10px; /* 箭頭與文字的間距 */

    /* --- 動畫設定 --- */
    transition: all 0.1s ease;
    position: relative;
    text-decoration: none; /* 預防如果是 <a> 標籤會有底線 */
}

/* --- 3. 左邊加入綠色箭頭 --- */
.perf-btng::before {
    content: "➜"; /* 或是 ➤, ◀ */
    color: #39bf63; /* 箭頭顏色跟文字一樣 */
    font-size: 1.1em;
    font-weight: bold;
    transition: transform 0.2s ease;
}

/* --- 滑鼠懸停效果 (Hover) --- */
.perf-btng:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
    transform: translateY(-1px); /* 稍微浮起 */
    box-shadow: inset 0 1px 0 #ffffff,
                0 6px 0 #d1d1d1, /* 厚度陰影變長 */
                0 8px 15px rgba(0, 0, 0, 0.15);
}

/* --- 滑鼠懸停時，箭頭動一下 --- */
.perf-btng:hover::before {
    transform: translateX(-3px); /* 箭頭往左跳動 */
}

/* --- 點擊按壓效果 (Active) --- */
.perf-btng:active {
    transform: translateY(4px); /* 向下壓 */
    box-shadow: inset 0 1px 0 #ffffff,
                0 0 0 #d1d1d1, /* 厚度消失 */
                0 2px 3px rgba(0, 0, 0, 0.1);
}
/* 針對卡片裡面的按鈕做修正 */
.ticket-card .btn-signup {
    /* 1. 讓寬度剛好包住文字，不要撐滿 */
    width: fit-content; 
    
    /* 2. (針對 Flex 容器) 告訴按鈕自己置中，不要被拉寬 */
    align-self: center; 
    
    /* 3. (針對一般容器) 確保左右置中 */
    margin-left: auto;
    margin-right: auto;
    
    /* 維持原本的下方留白 */
    margin-bottom: 20px; 
}
.name{ color: #ff5f17; font-size: 1.1rem; display: block; margin: 0 auto; text-align: center; padding-bottom: 10px;}
        /* --- Section 4: 售票資訊 --- */
        #sec4 { background-color: var(--bg-light); }
.TITLE{ display: block; text-align: center;margin: 0 auto;}
        .ticket-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;align-items: stretch; }
        .ticket-card { display: flex !important; 
    flex-direction: column !important; /* 強制垂直排列 */
    justify-content: space-between;
background: #ffffff ;padding: 20px; border-radius: 20px; width: 400px; text-align: center;position: relative; overflow: hidden;border:5px solid #ff5f17; }
 .ticket-card2 { background: #FFFFFF ;padding: 20px; border-radius: 20px; width: 400px; text-align: center;position: relative; overflow: hidden; border:5px solid #39bf63;}
  .orange { font-size: 2.5rem; color: #ff5f17; margin: 20px 0; font-weight: 600; font-family: Arial, sans-serif; line-height: 1.3;}
 .page_title { font-size: 2.5rem; color: #ff5f17; margin: 20px 0; font-weight: 600; font-family: Arial, sans-serif; line-height: 1.5; text-align: center;}
  .page_text { font-size: 1.5rem; color: #111111; margin: 20px 0; font-weight: 600; font-family: Arial, sans-serif; line-height: 1.5; text-align: center;}
.mt{ display: block; margin: 0 auto; text-align: center; padding: 40px 0 10px 0;}
        .price { font-size: 3.2rem; color: #ff5f17; margin: 20px 0; font-weight: 600; font-family: Arial, sans-serif; border-bottom: 1px solid #ff5f17; line-height: 1.3;}
.priceb{ font-size: 1.5rem; color: #111111; margin: 20px 0; font-weight: 600; font-family: Arial, sans-serif; }
.priceo{ font-size: 2rem; color: #ff5f17; margin: 20px 0; font-weight: 600; font-family: Arial, sans-serif;  text-align:center;}
.priceo2{ font-size: 2rem; color: #ff5f17; margin: 20px 0; font-weight: 600; font-family: Arial, sans-serif;  text-align:left;}
  .priceg { font-size: 2.5rem; color: #39bf63; margin: 0px 0 20px 0; font-weight: 600; font-family: Arial, sans-serif; }
        .ticket-card ul { text-align: left; margin-top: 20px; line-height: 2.2; font-size: .8rem; color: #555;width: 65%; }
        .ticket-card li {line-height: 1.3;
    color: #111;
    font-size: 1.3rem;
    font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 5px; }
        .ticket-card li::before { content: "˙ "; color: #ff5f17; }

        /* --- Section 5: QA --- */
        .qa-item { max-width: 800px; margin: 0 auto 20px; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; }
        .qa-question { padding: 10px 25px; cursor: pointer; font-weight: bold; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; color: #ff5f17; transition: background 0.3s; }
        .qa-question:hover { background: #fdfdfd; }
        .qa-question::after { content: '+'; font-size: 1.5rem; color: #ff5f17; }
        .qa-item.active .qa-question {color:#ff5f17; }
        .qa-item.active .qa-question::after { content: '-'; }
        .qa-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; background: #fbfbfb; padding: 0 25px; color: #111; line-height: 1.6; }
.qa-answer p{  color: #111; font-size: .9rem; text-align: justify;}
        .qa-item.active .qa-answer { max-height: 300px; padding: 20px 25px; border-top: 1px solid #eee; }
/*---info---*/

.info_box{ max-width: 800px;    margin: 0 auto;}
.info_title{color:#ff5f17;font-size: 1rem; text-align: left; font-weight: bolder; padding: 15px 0 5px;}
.info_text{color:#111111;font-size: .9rem;text-align: left; line-height: 1.6;    text-align: justify;}
.mb-3 {
    margin-bottom: 20px;
}
        /* --- Section 6: 表演團體 --- */
.group-row { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; margin-bottom: 40px; }

.group-card {
    width: 300px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    background: #fff;
    border-radius: 20px 0;
    position: relative;
    padding: 10px;
    
}

.card_gift {
    width: 45%;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    border-radius: 20px 0;
    position: relative;
    padding: 10px;
    
}
.flip_text{ color:#ff5f17; line-height: 1.5; font-size: 1.1rem; font-weight: bold;text-align: center;margin: 0 auto;}
.group-card:hover { transform: translateY(-8px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.group-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 15px 0; }
.group-card h3 {
	white-space: pre-line;
	color: #fff;
	background-color: #39bf63;
	padding: 10px 10px;
	letter-spacing: -1px;
	font-size: 1rem;
	margin: 0;
	position: absolute;
	top: 198px;
	width: calc(95% + 0px);
	left: 30px;
	border-radius: 0 15px 0 0;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index: 10;
	text-align: left;
  
}
       .group-card p {
    color: #111;
    font-size: .9rem;
    padding: 40px 10px 0px 20px;
    text-align: justify;
    line-height: 1.5;
  
}
        
        /* Modal */
        #modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
        .modal-box { background: #fff; width: 90%; max-width: 600px; padding: 30px; border-radius: 15px; position: relative; animation: zoomInFloat 0.3s; border:3px solid #ff5f17;}
        .close-btn {position: absolute;
    top: -15px;
    right:-15px;
    font-size: 2rem;
    cursor: pointer;
    color: #fff;
    transition: 0.3s;
    background-color: #ff5f17;
    border-radius: 100px;
    width: 35px;
    height: 35px;
    line-height: 30px;
    text-align: center; }
        .close-btn:hover { color: #fff; }
.card_text{ font-size: 1.2rem; color:#ff5f17; font-weight: 600; }
#modal-desc{ font-size: 0.9rem;text-align: justify;}
        /* --- Section 7: 舞台時程 --- */
.schedule-table .table-head th {
    background-color: #ff5f17;
    color: #fff;
    text-align: left;
    font-weight: bold;
}
        .schedule-table { max-width: 900px; margin: 0 auto; border-collapse: separate; border-spacing: 0; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid #ddd; }
        .schedule-table th, .schedule-table td { padding: 14px; text-align: left; border-bottom: 1px solid #ff5f17; background:#ffffff;font-size: 1rem; color: #111; font-weight: bold; }
        .schedule-table th { background:#ffffff; color: #111; font-size: 1rem; }
         .schedule-table th :nth-child(even) td { background:#ffffff; color: #111; width: 30%; font-size: 1rem; }
        .schedule-table tr:last-child td {background:#ffece6; }
        .schedule-table tr:nth-child(even) td { background: #ffffff; }
        .schedule-g{ background-color: #39bf63; border-radius: 100px;color: #ffffff;padding: 5px 15px;}
         .schedule-o{ background-color: #ff5f17; border-radius: 100px;color: #ffffff;padding: 5px 15px;}
         .text_o{ color: #ff5f17;font-weight: bolder;}
         .text_g{color: #39bf63;font-weight: bolder;}
        /* --- Section 8: 闖關活動 --- */
        .flip-container { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; }
        .flip-card { background-color: transparent; width: 300px; height: 380px; perspective: 1000px; cursor: pointer; }
        .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; }
        .flip-card.flipped .flip-card-inner { transform: rotateY(180deg); }
        .flip-front, .flip-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 15px; box-shadow: 0 8px 16px rgba(0,0,0,0.15); flex-direction: column; justify-content: center; align-items: center; padding: 0; }
.flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    
    /* 修改這裡：讓內容從頂部開始排，不要垂直置中 */
    justify-content: flex-start; 
    
    /* 修改這裡：讓內部元件寬度撐滿，方便標題置中、段落齊頭 */
    align-items: stretch; 
    
    padding: 25px 20px; /* 增加頂部內距，確保標題位置統一 */
    box-sizing: border-box; /* 確保 padding 不會撐大卡片 */
}

.flip-back h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px; /* 固定標題下方的間距 */
    flex-shrink: 0;      /* 防止標題被壓縮 */
}

.flip-back .scroll-text {
    flex-grow: 1;        /* 讓文字區域自動填滿剩餘空間 */
    overflow-y: auto;    /* 如果文字太多產生捲軸 */
    text-align: justify; /* 左右齊頭 */
    text-justify: inter-character;
}
 .CARD_title{ color: #ff5f17; font-size: 1.2rem; padding: 30px;}
 .CARD_text{ color: #111111; font-size: 1rem; padding: 20px;}
        .flip-front { background-color: #fff;border:2px solid #ff5f17; }
        .flip-front img { width: 100%; height: 250px; object-fit: cover; margin-bottom: 20px; border-radius: 15px 15px 0 0; }
        .flip-back { background: linear-gradient(135deg, #ffffff, #ffffff); color: #111111; transform: rotateY(180deg); align-items: flex-start; text-align: left;border:2px solid #ff5f17; }
     .scroll-text {
    width: 100%;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 15px; /* 稍微增加間距，避免文字貼齊捲軸 */
    
    /* --- 針對 Firefox 瀏覽器 --- */
    scrollbar-width: thin; /* 讓捲軸變細 */
    scrollbar-color: #ff5f17 #F0F0F0; /* 格式：[捲軸本體顏色] [軌道背景顏色] */
}

/* --- 針對 Chrome, Edge, Safari (WebKit 核心) --- */

/* 1. 設定捲軸整體寬度 */
.scroll-text::-webkit-scrollbar {
    width: 6px;
}

/* 2. 設定捲軸軌道 (背景) */
.scroll-text::-webkit-scrollbar-track {
    background: #F0F0F0; 
    border-radius: 10px;
}

/* 3. 設定捲軸滑塊 (動的那一條) */
.scroll-text::-webkit-scrollbar-thumb {
    background: #ff5f17; /* 您想要的橘色 */
    border-radius: 10px;
}

/* 4. 滑鼠移上去時滑塊變深 (增加互動感) */
.scroll-text::-webkit-scrollbar-thumb:hover {
    background: #E67700; 
}

        /* --- Section 9: LOGO Wall --- */
        .sponsor-sec { margin-bottom: 0px; text-align: left; }
        .sponsor-sec h4 { margin-bottom: 15px; color: #555; font-size: 1rem; font-weight: bold; }
        .sponsor-top-row { display: flex; flex-wrap: wrap; gap: 60px; align-items: flex-start; }
        .logo-flex-row { display: flex; gap: 15px; flex-wrap: wrap; }
        .logo-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
        .logo-box {  display: flex; justify-content: center; align-items: center; color: #aaa; font-size: 0.8rem; border-radius: 8px; transition: 0.3s; }
        .logo-box:hover { border-color: var(--secondary-color); color: var(--secondary-color); }
        .size-l { width: 160px; height: 75px; }
        .size-m { width: 160px; height: 75px; }
        .size-s { width: 100%; height: 75px; }

.pt-60{ padding: 60px 0 0 0;}
.pb-60{ padding: 0 0 60px 0;}

.red{ max-width: 100%;
height:auto;}  
 .m_none{ display: block;}
@media (max-width: 768px) {
    #sec1 {
    max-width: 100%;
    background-image: url(../img/BG_s.jpg);
    background-position: center center;
    position: relative;
    overflow: hidden;
}
    .m_none{ display: none;}
             .text_o{ display: flex; padding-top: 10px;}
         .text_g{display: flex; padding-top: 10px;}
            .schedule-g,
    
            .sponsor-top-row { gap: 30px; flex-direction: column; }
           
            }
          

        /* --- Section 10: Footer --- */
        footer { background: #ff5f17; color: #ccc; padding: 20px 0; width: 100%; font-size: 0.95rem; line-height: 1.8; }
footer p{ color: #ffffff; font-size: .8rem; text-align: center;}
        .footer-content {  flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; align-items: flex-start; }
        .footer-links div { margin-bottom: 8px; color: #fff; font-weight: bold; font-size: 1rem; }
        .footer-info {  margin-top: 10px; }
        .social-icons { margin-top: 20px;text-align: center; }
        .social-icons a { display: inline-block; width: 40px; height: 40px; background: #fff; border-radius: 50%; margin-right: 15px; text-align: center; line-height: 40px; color: white; transition: 0.3s; }
        .social-icons a:hover { background:#ffffff; }
.logobg{ background-color: #ffffff;}
.bg_orange{background-color: #fbf5d1;}
        /* --- Side Tools --- */
        .side-tools { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 30px; }
        .float-ad { width: 70px; height: 70px;  color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; text-align: center; cursor: pointer;  animation: floatUD 2s infinite ease-in-out; font-weight: bold; }
        .go-top { width: 70px; height: 70px; color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; transition: 0.3s; }
        .go-top:hover {}

  /* --- btn-main_b --- */
@keyframes arrow-move {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

.btn-main_b {
    /* --- 基礎排版 --- */
    display: inline-flex;  /* 使用 flex 讓箭頭跟文字並排 */
    justify-content: center;
    align-items: center;
    gap: 15px;             /* 箭頭與文字之間的距離 */
    
    /* --- 尺寸與文字 --- */
    margin-top: 20px;
    width: 250px;
    padding: 10px 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    
    /* --- 外觀設定 --- */
    border: none;
    border-radius: 999px;
    cursor: pointer;
    
    /* --- 1. 立體橘色漸層 --- */
    background: linear-gradient(to bottom, #ff8c42 0%, #fe5f18 100%);
    
    /* --- 2. 立體厚度陰影 (5px厚度) --- */
    box-shadow: 0 5px 0 #bf440e, 
                0 6px 10px rgba(0, 0, 0, 0.15);

    /* --- 動畫設定 --- */
    transition: all 0.1s ease;
    position: relative;
}

/* --- 3. 加入左側箭頭 (::before) --- */
.btn-main_b::before {
    content: "➜";      /* 這裡可以改箭頭樣式，例如 "←", "◀" */
    font-size: 1.1em;  /* 讓箭頭稍微比文字大一點點，更有氣勢 */
    transition: transform 0.2s ease; /* 讓箭頭移動有過渡效果 */
}

/* --- 滑鼠懸停 (Hover) --- */
.btn-main_b:hover {
    background: linear-gradient(to bottom, #ff9d5c 0%, #ff6b2b 100%);
    transform: translateY(-2px); /* 按鈕浮起 */
    box-shadow: 0 7px 0 #bf440e, /* 陰影拉長 */
                0 12px 15px rgba(0, 0, 0, 0.2);
}

/* --- 滑鼠懸停時，箭頭往左動一下 --- */
.btn-main_b:hover::before {
    transform: translateX(-5px); /* 箭頭向左移動 5px，吸引注意 */
}

/* --- 滑鼠點擊 (Active) --- */
.btn-main_b:active {
    transform: translateY(5px); /* 按鈕向下壓到底 */
    box-shadow: 0 0 0 #bf440e,  /* 厚度消失 */
                0 2px 3px rgba(0, 0, 0, 0.2);
}

.btn-main {
    /* --- 基礎設定 --- */
    margin-top: 20px;
    width: 250px;
    padding: 12px 0; /* 稍微調整 padding 適應 flex */
    font-size: 1.5rem;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-align: center;
    color: #fff;
    
    /* --- 1. 橘色漸層 (從上方較亮到下方較深) --- */
    background: linear-gradient(to bottom, #ff8c42 0%, #fe5f18 100%);
    
    /* --- 2. 立體感陰影 --- */
    /* 第一層: 內部上方高光 (讓表面看起來圓潤) */
    /* 第二層: 外部下方深色硬陰影 (製造厚度) */
    /* 第三層: 外部柔和陰影 (製造懸浮感) */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 4px 0 #bf440e, 
                0 5px 10px rgba(0, 0, 0, 0.2);

    /* --- 版面配置 (為了對齊箭頭) --- */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* 箭頭跟文字的距離 */

    /* --- 動畫過渡 --- */
    transition: all 0.1s ease;
    position: relative; /* 為了按壓效果定位 */
}

/* --- 3. 左邊加入箭頭 --- */
.btn-main::before {
    content: "➜"; /* 這裡可以換成其他箭頭符號，如 ←, ➤, ◀ */
    font-size: 1.2em; /* 箭頭稍微大一點 */
    transition: transform 0.2s ease;
}

/* --- 滑鼠懸停效果 (Hover) --- */
.btn-main:hover {
    /* 讓漸層變亮一點 */
    background: linear-gradient(to bottom, #ff9d5c 0%, #ff6b2b 100%);
    transform: translateY(-1px); /* 稍微浮起 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 6px 0 #bf440e, 
                0 10px 15px rgba(0, 0, 0, 0.2);
}

/* --- 滑鼠懸停時，箭頭動一下 --- */
.btn-main:hover::before {
    transform: translateX(-3px); /* 箭頭向左動一下，吸引注意 */
}

/* --- 點擊按壓效果 (Active) --- */
.btn-main:active {
    transform: translateY(3px); /* 向下移動，抵消厚度陰影 */
    /* 陰影縮小，模擬被壓下去的樣子 */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 0 0 #bf440e, 
                0 2px 5px rgba(0, 0, 0, 0.2);
}
/* 方案*/
/* 卡片左右排列 */
.ticket-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* 左側 */
.ticket-info {
display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.ticket-list {
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
    width: 100%;
    display: flex;
}

.ticket-thumb{ display: block;
  }
.ticket-thumb2{ display: block;
  }

.ticket-thumb2 img {
  width: 130px;
  
}
/* e/更多介紹 */
.btn-more {
    /* --- 基礎設定 (保留原有的) --- */
    display: inline-block;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(to bottom, #ff7a3e 0%, #fe5f18 100%);
    box-shadow: 0 4px 0 #bf440e, 
                0 5px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.1s ease; /* 加快反應速度讓手感更好 */
    position: relative; /* 為了點擊位移 */
}

/* --- 滑鼠懸停 (Hover) - 稍微浮起變亮 --- */
.btn-more:hover {
    background: linear-gradient(to bottom, #ff8c56 0%, #ff6b2b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 #bf440e, 
                0 6px 6px rgba(0, 0, 0, 0.2);
}

/* --- 滑鼠點擊 (Active) - 按鈕下沉 --- */
.btn-more:active {
    transform: translateY(3px); /* 向下移動，抵消厚度 */
    box-shadow: 0 0 0 #bf440e, /* 厚度消失 */
                0 2px 3px rgba(0, 0, 0, 0.2);
}
/* 立即報名按鈕 */
.btn-signup {
    /* --- 基礎設定 (保留原有的) --- */
    display: inline-block;
    padding: 8px 26px;
    border-radius: 30px;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    margin-bottom: 20px;
    background: linear-gradient(to bottom, #ff7a3e 0%, #fe5f18 100%);
    box-shadow: 0 4px 0 #bf440e, 
                0 5px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.1s ease; /* 加快反應速度讓手感更好 */
    position: relative; /* 為了點擊位移 */
}

/* --- 滑鼠懸停 (Hover) - 稍微浮起變亮 --- */
.btn-signup:hover {
    background: linear-gradient(to bottom, #ff8c56 0%, #ff6b2b 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 0 #bf440e, 
                0 6px 6px rgba(0, 0, 0, 0.2);
}

/* --- 滑鼠點擊 (Active) - 按鈕下沉 --- */
.btn-signup:active {
    transform: translateY(3px); /* 向下移動，抵消厚度 */
    box-shadow: 0 0 0 #bf440e, /* 厚度消失 */
                0 2px 3px rgba(0, 0, 0, 0.2);
}

/* 右側小照片 */
.ticket-thumb img {
  width: 120px;
  
}

.ticket-thumb img:hover {
  transform: scale(1);
}

/* ===== 彈窗 ===== */
.popup-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.popup-box {
  background: #fff;
  width: 90%;
  max-width: 420px;
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  position: relative;
    border: 5px solid #ff5f17;
}

.popup-box img {
  width: 100%;
  margin-bottom: 16px;
}

.popup-close {
     position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: #fff;
    transition: 0.3s;
    background-color: #ff5f17;
    border-radius: 100px;
    width: 35px;
    height: 35px;
    line-height: 30px;
    text-align: center;
}

.bag_img{ 
max-width: 80%;
display:block;
margin:0 auto;
text-align: center;}

.bag_text {
    /* --- 原本的設定 --- */
    line-height: 1.5;
    color: #111111;
    font-size: .9rem;
    font-weight: bold;
    text-align: left;

}
.popup-box {
    /* --- 原本的設定 --- */
    line-height: 1.5;
    color: #111111;
    font-size: .9rem;
    font-weight: bold;
    text-align: left;

    /* --- 新增捲軸設定 --- */
    max-height: 450px;  
    overflow-y: auto;    
    padding-right: 10px;
}

/* 適用於 Chrome, Safari, Edge */
.popup-box::-webkit-scrollbar {
    width: 8px;             /* 捲軸寬度 */
}

.popup-box::-webkit-scrollbar-track {
    background: #f1f1f1;    /* 捲軸軌道背景色 (淺灰) */
    border-radius: 10px;
    margin: 10px 0;
}

.popup-box::-webkit-scrollbar-thumb {
    background: #39bf63;    /* 捲軸本體顏色 (配合你的主色橘色) */
    border-radius: 10px;    /* 圓角 */
}

.popup-box::-webkit-scrollbar-thumb:hover {
    background: #0bb640;    /* 滑鼠移上去時變深一點 */
}
.border-b {
       border-bottom: 1px solid #ededed;
    padding-bottom: 10px;
   color: #ff5f17;
}

/*卡片本體*/

        .card {
            position: relative;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s ease;
            width: 300px;
            display: flex;
            flex-direction: column;
        }

        /* --- 圖片區域 (16:9) --- */
        .image-container {
            width: 100%;
            padding-top: 56.25%; /* 16:9 */
            position: relative;
            flex-shrink: 0; /* 防止圖片被壓縮 */
        }

        .card-img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            padding: 15px 15px 0 15px;
        }

        /* --- 正面下方資訊 --- */
        .card-body {
            padding: 0 20px 20px 20px;
            text-align: center;
            background: #fff;
            flex-grow: 1; /* 讓文字區塊填滿剩餘空間 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* --- 背面：全卡片懸停遮罩 (含捲軸功能) --- */
        .hover-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.98); /* 不透明度高一點，避免透出底下文字 */
            z-index: 10;
            
            /* 排版設定 */
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding:20px;
            
            /* 【關鍵】捲軸設定 */
            overflow-y: auto; /* 內容過長時出現捲軸 */
        justify-content: flex-start !important;

            /* 預設隱藏 */
            opacity: 0; 
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        /* 當內容很多導致出現捲軸時，切換對齊方式以免上方被切掉 */
        .hover-overlay.long-content {
            justify-content: flex-start;
              
        }

        /* --- 美化捲軸 (Webkit瀏覽器: Chrome, Safari, Edge) --- */
        .hover-overlay::-webkit-scrollbar {
            width: 8px;
          
        }
        .hover-overlay::-webkit-scrollbar-track {
            background: transparent; 
        }
        .hover-overlay::-webkit-scrollbar-thumb {
            background-color: #F15A24; 
            border-radius: 0px;
            
        }

        /* --- 文字樣式 --- */
        .text-orange-bold {
            color: #F15A24;
            font-size: 1.1rem;
            font-weight: bold;
            line-height: 1.4;
            padding-top: 30px;
            flex-shrink: 0; /* 防止標題被壓扁 */
        }

        .divider {
            height: 1px;
            background-color: #dddddd;
            border: none;
            margin: 10px auto;
            width: 100%;
            flex-shrink: 0;
        }


        .text-black-normal {
            color: #333;
            font-size: .8rem;
            font-weight: normal;
            line-height: 1.6;
            margin-bottom: 10px;
            flex-shrink: 0;
        }

        .text-description {
                padding-bottom: 40px;
            color: #555;
            font-size: .9rem;
            line-height: 1.6;
            text-align: justify;
            
        }

        /* --- 互動效果 --- */
        .card:hover .hover-overlay {
            opacity: 1;
            visibility: visible;
        }

@media screen and (max-width: 768px) {
    .bg-green {
    background-image: url(../img/bg-greenM.jpg);
    background-size: contain;
    position: relative;
    z-index: 1;
    background-repeat: repeat;
}
  
}
/* --- 手機版 --- */
@media (max-width: 480px) {
    .video-text-right .price {
    display: ruby;
}
    .priceo2 {
    font-size: 2.5rem;
    color: #ff5f17;
    margin: 20px 0;
    font-weight: 600;
    font-family: Arial, sans-serif;
    text-align: left;
}
    .video-text-right p {
    font-size: 1.3rem;
    line-height: 1.8;
    color: #333;
    font-weight: bold;
}
    .btn-main_b {
     display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 8px;
    width: 160px;
    padding: 10px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    background: linear-gradient(to bottom, #ff8c42 0%, #fe5f18 100%);
    box-shadow: 0 5px 0 #bf440e, 0 6px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.1s ease;
    position: relative;

    
}
    .m_none{ display: none;}
    .pc_none{ display: block;}
    .perf-btno{ margin: 0 auto;}
      .price { font-size: 2rem!important;}
    .group-card {
        width: 100%;
    margin-bottom: 30px!important;
}
    .priceb {
    font-size: 1.2rem!important;}
    .ticket-card li {
    font-size: 1.1rem!important;
}
    .group-row {
    gap: 10px;
}
    .card_gift {
    width: 95%!important;
 
}
    .page_text {
    font-size: 1.2rem;
   
}
  .sec1-content {
    height:500px!important;
}
    #sec1 {
        height:500px!important;
        background-image: url(../img/BG_ss.jpg);
        background-position: center center;
        position: relative;
        overflow: hidden;
    }

    .ks-l2 {
    top: 35%!important;
}
.ks-r2 {
    top: 40%!important;
}
    .b768{ display: block!important;padding: 20px 0;}
      .logo-grid-4 { grid-template-columns: repeat(2, 1fr);gap: 10px; }
.TITLE_IMG {
    display: block; margin: 30px auto;
    max-width: 100%;
        }
    .size-s {
    width: 100%;
    height: 55px;
}
    .flex_box {
   max-width: 100%;
        margin: 0 auto;
        gap: 20px;
        text-align: center;
        display: block;
}
.hamburger span {
z-index:-999; 
}
    
.perf-item {
     gap: 20px;
}
    #TITLE_P1 {
    background-image: url(../img/BG_ss.jpg);
    height: 500px;
    background-position: center center;
    position: relative;
    overflow: hidden;
}
    /*抽獎禮*/
.trigger-image {
            width: 300px;
            cursor: pointer;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .trigger-image:hover {
            transform: scale(1.05); /* 滑鼠移過去稍微放大 */
        }
    
    /* --- 內容樣式 --- */
        .modal-body img {
            width: 100%;
            height: auto;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .modal-title {
            margin: 0 0 5px 0;
            color: #333;
            font-size: 24px;
        }

        .modal-subtitle {
            margin: 0 0 15px 0;
            color: #666;
            font-size: 16px;
            font-weight: normal;
        }

        .modal-text {
            color: #444;
            line-height: 1.6;
        }
}

/* 1. 定義容器外框，隱藏超出部分 */
.slider-container {
    width: 100%; /* 或者你指定的寬度 */
    overflow: hidden;
    position: relative;
}

/* 2. 定義移動的包裝層 */
.slider-wrapper {
   display: flex;
    width: 1300%; /* 11 張圖 x 100% */
    animation: autoPlay 24s infinite ease-in-out; /* 增加時間，10張圖跑30秒較舒適 */
}

.slider-wrapper img {
  width: 7.6923%;/* 100% / 11 */
    flex-shrink: 0;
}

/* 3. 定義動畫關鍵影格 (假設有10張圖) */

@keyframes autoPlay {
0%, 6%    { transform: translateX(0); }
    8.3%, 14% { transform: translateX(-7.6923%); }
    16.6%, 22%{ transform: translateX(-15.3846%); }
    25%, 31%  { transform: translateX(-23.0769%); }
    33.3%, 39%{ transform: translateX(-30.7692%); }
    41.6%, 47%{ transform: translateX(-38.4615%); }
    50%, 56%  { transform: translateX(-46.1538%); }
    58.3%, 64%{ transform: translateX(-53.8461%); }
    66.6%, 72%{ transform: translateX(-61.5384%); }
    75%, 81%  { transform: translateX(-69.2307%); }
    83.3%, 89%{ transform: translateX(-76.9230%); }
    91.6%, 97%{ transform: translateX(-84.6153%); }
    100%      { transform: translateX(-92.3076%); }
}


/* 4. 隱藏原本的左右箭頭 */
.your-original-prev-btn, .your-original-next-btn {
    display: none !important;
}
.slider-wrapper:hover {
    animation-play-state: paused;
}