/* ==============================================================
   檔案名稱：style.css
   功能說明：TC Gaming 品牌官網 Landing Page 樣式表
   設計基準：最小寬度 1366px，最大邊界 1920px
   命名規則：全站採 "tcg-" 前綴，避免與 WordPress 主題 CSS 衝突
   瀏覽器支援：Chrome / Edge / Safari / Firefox 現代瀏覽器
              IE11 盡量相容（採 Flexbox + 基本屬性，避免 Grid 複雜用法）
   未來擴充：RWD 尚未實作，將於後續於底部 @media 區塊追加
   區塊對應：與 index.html 的 10 個 Section 一一對應
   ============================================================== */


/* ==============================================================
   [共用] 重置、變數、基本排版
   ============================================================== */

/* CSS 變數：現代瀏覽器有效；IE11 忽略，將使用下方實際色碼 */

/* ★ Web 共用樣式已移至 tcg-common-web.css ★ */

/* ==============================================================
   [Section: Hero] 首屏主視覺
   規格：
     - 整張背景底圖（之後加 background-image: url('hero-bg.jpg')）
       目前暫用紅色漸層底色
     - 英文標題 BREAKING BORDERS... 由圖片呈現（.tcg-hero-title-img）
     - 右側 3D 視覺元素已包含在背景圖中，不另設 div
     - 按鈕：白底紅字「立即開站」
   可調整項目：
     ※ 高度：修改 min-height
     ※ 背景圖：在 .tcg-hero 加上 background-image: url('xxx.jpg')
     ※ 標題圖尺寸：修改 .tcg-hero-title-img 的 width / height
     ※ 文字區寬度：修改 .tcg-hero-content 的 max-width
     ※ scroll cue 位置：修改 .tcg-hero-scroll 的 right / bottom
   ============================================================== */
/* [Plan B] 移除固定 height，改用 padding 撐開，內容決定高度 */
.tcg-hero {
    position: relative;
    padding: 0px 0 170px;
    background: #f10b03 url('https://tc-gaming.com/img/web/index/home_img_00_banner.png') no-repeat center 0px;
    color: #FFFFFF;
    min-height: 900px;          /* 最低高度保底，避免內容太少時崩塌 */
    /* height: 1117px; ← [Plan B] 已移除固定高度 */
    margin-top: 0px;
    padding-bottom: 229px;
}

/* ::after 圓角遮罩已移除，圓角改由 .tcg-wlp 自身 border-radius 處理 */

.tcg-hero-inner {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-align: center; */
    -ms-flex-align: center;
    /* align-items: center; */
    min-height: 100%;
    height: 100%;
}

/* 文字區：靠左，寬度限制在 55% 避免蓋到右側背景圖的 3D 元素
   ※ 調大 max-width 可讓文字區更寬 */
.tcg-hero-content {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 55%;
    flex: 0 0 55%;
    max-width: 55%;
    margin-left: 46px;
}

/* 英文標題圖片 placeholder
   ※ 寬高根據實際圖片調整
   ※ 之後把 .tcg-img-placeholder 換成 <img src="hero-title.png"> */
.tcg-hero-title-img {
    width: 543px;
    max-width: 100%;
    margin-bottom: 28px;
    margin-left: 83px;
    margin-top: 134px;
}
.tcg-hero-title-img img {
    display: block;
    width: 100%;
    height: auto;
}

.tcg-hero-desc {
    font-size: 18px;
    line-height: 1.65;
    max-width: 700px;          /* ※ 文字行寬 */
    margin-bottom: 36px;
    opacity: 0.92;
    padding-left: 80px;
    padding-top: 27px;
}

.index-bt-style {
    margin-left: 90px!important;
    margin-top: 80px!important;
}

/* scroll cue 已移除 */


/* ==============================================================
   [Section: WLP] 什麼是包網平台
   規格：
     - 高度 883px，白底
     - 上方左右大圓角（border-radius: 60px 60px 0 0），呈現從上方 Hero
       紅色區塊「冒出來」的視覺效果
     - 左右內容：左側 3D 視覺圖 45%、右側文字 48%
     - 英文標題 WHAT is a WHITE LABEL PLATFORM 改用圖片
   ============================================================== */
/* [Plan B] 移除固定 height，內容自然撐高 */
.tcg-wlp {
    /* height: 883px; ← [Plan B] 已移除固定高度 */
    background: #ffffff;
    /* 上方左右大圓角，讓白色區塊「從紅色 Hero 下方冒出來」
       ※ 圓角值可調：改這裡的 60px
       ※ margin-top 負值讓 WLP 往上推蓋住 Hero 底部，露出圓角 */
    -webkit-border-top-left-radius: 60px;
    -webkit-border-top-right-radius: 60px;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    position: relative;
    z-index: 1;
    margin-top: -12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 159px;
    padding-bottom: 86px;
    margin-top: -71px;
}

/* [Plan B] 移除 height: 100%（父層已無固定高度） */
.tcg-wlp-inner {
    /* height: 100%; ← [Plan B] 已移除 */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    /* gap: 0; */
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px;
}

.tcg-wlp-visual {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 45%;
    flex: 0 0 55.5%;
    max-width: 954px;
    /* width: 100%; */
    margin-left: 101px;
}

.tcg-wlp-img {
    display: block;
    width: 100%;
    height: auto;
}

/* [Fix] align-self: flex-start + 固定 flex-basis，子元素調整不影響整體 */
.tcg-wlp-content {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 44%;
    flex: 0 0 44%;              /* ← 固定佔 44%，不再隨內容寬度浮動 */
    -ms-flex-item-align: start;
    align-self: flex-start;     /* 脫離父層 center，間距互不干擾 */
    padding-top: 6px;           /* 手動控制起始位置（你已調為 6px） */
    margin-left: 9px;
}

.tcg-wlp-subtitle {
    font-size: 51px;
    color: #262626;
    color: var(--tcg-text);
    /* margin-bottom: 12px; */
    /* margin-top: -90px; */
    padding-top: 0px;
}

/* WHAT is a WHITE LABEL PLATFORM 英文標題圖 */
/* [Fix] 移除 width:100%，讓圖片用原始尺寸顯示 */
.tcg-wlp-title-img {
    margin-bottom: 56px;
    padding-top: 27px;
}
.tcg-wlp-title-img img {
    display: block;
    max-width: 100%;            /* 安全網：不超出父層 */
    height: auto;
}

.tcg-wlp-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.97;
    width: 650px;
}


/* ==============================================================
   [共用] 區塊大標（置中型：我們的產品 / 優勢 / About 都會用到）
   ============================================================== */
.tcg-section-head {
    margin-bottom: -9px;
}

.tcg-section-head--center {
    text-align: center;
}

.tcg-section-subtitle {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #262626;
    color: var(--tcg-text);
}

.tcg-section-title {
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #262626;
    color: var(--tcg-text);
}


/* ==============================================================
   [Section: About] 天成集團 ABOUT US
   規格：
     - .tcg-about 灰底，高度 1244px
     - .tcg-about-wrap 內容列：1080 + 20px gap + 597 = 1697，水平置中
     - 左欄 .tcg-about-left 兩張卡上下貼齊（gap=0），合計高 804
       - 左上 .tcg-about-card--tl 1080×402
       - 左下 .tcg-about-card--bl 1080×402
     - 右卡 .tcg-about-card--right 597×804
     - 三張卡的不規則外形完全由背景 PNG 呈現（background-image）
       CSS 端不使用 clip-path / border-radius / box-shadow
       暫時以半透明色塊 + 紅虛線框標示位置
     - 15+ YEARS 徽章為獨立 PNG，絕對定位疊在兩張左卡交界
     - 國旗列、圖示列均為水平無限滾動帶（marquee，從左往右）
   ============================================================== */
/* 灰底容器明確高度 1244px
   內容分配：padding-top(130) + 標題區(~116) + margin(50) + 卡片(804) + 剩餘底部留白
   若標題圖尺寸有變，微調 padding-top 即可 */
/* [獨立容器] 各 section 可獨立調整 padding，不影響其他區塊 */
/* About 容器：padding 歸零，用 box-sizing 確保 width:100% 不會超出 */
.tcg-about-container {
    padding-left: 0;
    padding-right: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 40px;
    padding-right: 40px;
    margin-left: 0px;
    margin-right: 0px;
    max-width: 100%;
    margin: auto;
}
.tcg-products-container {/* padding-left: 60px; padding-right: 60px; */width: 100%;padding: 0;margin: 0 auto;}
.tcg-adv-container      { /* padding-left: 60px; padding-right: 60px; */ }
.tcg-cta-container      {/* padding-left: 60px; padding-right: 60px; */padding-left: 60px;padding-right: 60px;}

/* [Plan B] 移除固定 height，改用 padding 撐開 */
.tcg-about {
    /* height: 1244px; ← [Plan B] 已移除固定高度 */
    padding-top: 98px;
    padding-bottom: 0px;
    background: #F2F2F4;
    background: var(--tcg-gray-bg);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* ABOUT US 英文標題圖 */
/* [Fix] 移除 width:100%，讓圖片用原始尺寸顯示 */
.tcg-about-title-img {
    margin: 36px auto 0;
    text-align: center;         /* 圖片在區塊內置中 */
}
.tcg-about-title-img img {
    display: inline-block;      /* 配合 text-align:center 置中 */
    max-width: 100%;            /* 安全網 */
    height: auto;
}

/* 三張卡 + 徽章外層容器
   1080 + 20 + 597 = 1697，水平置中 */
/* [重構] 大容器 + absolute 定位，卡片各自獨立可調
   高度 = max(左上+左下, 右卡)，你可直接改 height 調整 */
.tcg-about-wrap {
    position: relative;
    width: 100%;
    height: 930px;             /* 左上475 + 左下475 - 重疊20 = 930，可微調 */
    margin-top: 42px;          /* 保留你設的頂部間距 */
    max-width: 100%;
}

/* [重構] 左欄：純定位容器，兩張左卡的 absolute 參考框 */
.tcg-about-left {
    position: absolute;
    left: 0;
    top: 0;
    width: auto;             /* 匹配你的卡片寬度 */
    height: 100%;              /* 撐滿 about-wrap */
}

/* [重構] 卡片共用樣式：position: absolute
   每張卡用 left/top 獨立定位，互不影響
   ★ 請勿改回 relative，否則卡片會回到 flow 排列無法重疊 ★ */
.tcg-about-card {
    position: absolute;
    /* 背景 PNG：之後加 background-image: url('xxx.png'); */
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    border: none;
    padding: 81px 180px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    overflow: hidden;          /* 防止 marquee 長帶超出卡片範圍 */
}

/* 左上卡：1102 × 475 — 關於天成集團
   定位參考：.tcg-about-left */
.tcg-wrapper .tcg-about-card--tl {
    width: 1203px;
    height: 542px;
    left: -46px;
    top: 0;
    background-image: url('https://tc-gaming.com/img/web/index/home_img_02-2_bg1.png');
    background-size: auto;
    padding-bottom: 0;
    margin: 0 auto;
}

/* 左下卡：1102 × 475 — 市場覆蓋
   top: 455px → 與左上卡（底邊 475px）重疊 20px
   調整 top 可增減重疊量 */
.tcg-wrapper .tcg-about-card--bl {
    width: 1111px;
    height: 542px;
    left: 0;
    top: 376px;                /* 475 - 20 = 455 → 重疊 20px（可微調） */
    background-image: url('https://tc-gaming.com/img/web/index/home_img_02-2_bg2.png');
    background-size: auto;
    padding-left: 139px;
    padding-right: 89px;
}

/* 右卡：597 × 804 — 為什麼選擇天成包網
   定位參考：.tcg-about-wrap
   right + top 控制位置，可獨立微調 */
.tcg-wrapper .tcg-about-card--right {
    width: 646px;
    height: 920px;             /* 匹配 about-wrap 高度 */
    right: 0;
    top: 0;
    background-image: url('https://tc-gaming.com/img/web/index/home_img_02-2_bg3.png');
    background-size: auto;
    padding-left: 111px;
    padding-right: 112px;
    padding-top: 83px;
}

/* 卡片內文字 */
.tcg-about-card-title {
    font-size: 43px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 20px 0;
    color: #262626;
    color: var(--tcg-text);
    padding-bottom: 16px;
}

.tcg-about-card-desc {
    font-size: 19px;
    line-height: 2;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    margin: 0 0 28px 0;
    max-width: 608px;
    padding-bottom: 20px;
}

.tcg-about-card-desc strong {
    color: #E5222B;
    color: var(--tcg-red);
    font-weight: 700;
}

/* 卡片內 Learn More 按鈕：靠左對齊於 flex column 內 */
.tcg-about-btn-float {
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

/* 市場覆蓋卡（左下）：上半部 = 文字左 + 按鈕右（水平排列）
   .tcg-about-bl-top 是 flex row，讓文字和按鈕同一行
   按鈕靠右、垂直置中對齊文字區塊 */
.tcg-about-bl-top {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 24px;
    padding-top: 8px;
}

.tcg-about-bl-text {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

/* 左下卡的描述文字可以寬一點（按鈕在右側，不會衝突） */
.tcg-about-card--bl .tcg-about-card-desc {
    max-width: 600px;
    margin-bottom: -20px;          /* 移除底部 margin，由 .tcg-about-bl-top 的 gap 控制間距 */
}

/* ---- 橫向無限滾動帶（marquee） ----
   原理：兩份相同的長條帶並排，CSS animation 從 -50% 滑到 0%
   滾完一份後瞬間跳回 -50%，視覺上無縫循環（從左往右） */
.tcg-marquee {
    position: relative;        /* track 的 absolute 定位參考 */
    width: 100%;
    overflow: hidden;
    margin-top: 0px;          /* 推到 flex column 底部 */
}

/* [Fix] track 用 absolute 脫離父層寬度限制，由圖片自己撐寬 */
.tcg-marquee-track {
    position: absolute;
    left: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    height: 100%;
    -webkit-animation: tcgMarquee 15s linear infinite;
    animation: tcgMarquee 15s linear infinite;
}

.tcg-marquee-slide {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;                /* 不伸縮，由圖片原始比例決定寬度 */
    height: 100%;
}

/* 滾動帶內的圖片：高度撐滿容器，寬度按比例自動算 */
.tcg-marquee-slide img {
    display: block;
    height: 100%;
    width: auto;
}

/* 左右虛化遮罩：所有 marquee 共用
   兩端 80px 漸變透明，中間完全可見 */
.tcg-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

/* 國旗帶：高度 136px，速度配合圖片寬度（3867px ÷ ~50px/s ≈ 75s） */
.tcg-marquee--flags {
    height: 136px;
    margin-top: 24px;
}
.tcg-marquee--flags .tcg-marquee-track {
    -webkit-animation-duration: 75s;
    animation-duration: 75s;
}

/* 圖示帶：高度 110px */
.tcg-marquee--icons {
    height: 123px;
    margin-top: 17px;
    margin-bottom: 0;
}

/* 第二條圖示帶（反向滾動）：縮小上方間距 */
.tcg-marquee--icons.tcg-marquee--reverse {
    margin-top: 21px;
    margin-bottom: 45px;
}

/* 反向滾動 */
.tcg-marquee--reverse .tcg-marquee-track {
    -webkit-animation-name: tcgMarqueeReverse;
    animation-name: tcgMarqueeReverse;
}

/* 從左往右滾動：translateX -50% → 0% */
@-webkit-keyframes tcgMarquee {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%);   transform: translateX(0%); }
}
@keyframes tcgMarquee {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%);   transform: translateX(0%); }
}

/* 從右往左滾動（反向）：translateX 0% → -50% */
@-webkit-keyframes tcgMarqueeReverse {
    from { -webkit-transform: translateX(0%); transform: translateX(0%); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes tcgMarqueeReverse {
    from { -webkit-transform: translateX(0%); transform: translateX(0%); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* 15+ YEARS 徽章（獨立 PNG，絕對定位）
   圓心在兩張左卡交界右側：x = 1080 附近，y = 402（兩卡邊界）
   直徑暫定 360，left = 1080 - 180 = 900，top = 402 - 180 = 222
   之後替換 .tcg-img-placeholder 為 <img> 並微調座標 */
/* 15+ YEARS 徽章（獨立 PNG）
   暫時完全隱藏，等 PNG 就位後：
   1. 移除 display: none
   2. 加上 background-image: url('15plus.png')
   3. 微調 left / top 座標對齊實際設計 */
/* ── 15+ YEARS 徽章（PNG 圖片，絕對定位） ── */
.tcg-years-badge {
    position: absolute;
    left: 726px;               /* 兩卡交界偏右（可微調） */
    top: 69px;                /* 左上卡底邊 475 附近，badge 圓心對齊交界（可微調） */
    z-index: 2;
}
.tcg-years-badge img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* ==============================================================
   [Section: Products] 我們的產品 WHAT WE HAVE
   規格：整塊高度 1230px
         - 標題區：中文 subtitle + WHAT WE HAVE 圖片 placeholder
         - Tab 按鈕三顆（active：黑底白字；inactive：淺灰底）
         - Tab 1 內容：灰色大卡片（左 5 個白色 plan-item + Learn More；右大圖）
         - Tab 2 / 3 暫留 placeholder
   ============================================================== */
/* [Plan B] 移除固定 height，內容自然撐高 */
.tcg-products {
    position: relative;
    width: 100%;
    /* height: 1230px; ← [Plan B] 已移除固定高度 */
    background: #FFFFFF;
    padding-top: 112px;
    padding-bottom: 159px;
}

/* WHAT WE HAVE 英文標題圖 */
/* [Fix] 移除固定寬度，讓圖片用原始尺寸顯示 */
.tcg-products-title-img {
    margin: 33px auto 0;
    text-align: center;
}
.tcg-products-title-img img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* Tab 切換按鈕 */
.tcg-tabs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0;
    margin: 80px 0 60px;
}

/* 注意：用 .tcg-wrapper .tcg-tab 提高特異度，
   贏過早先的 .tcg-wrapper button { background: transparent; padding: 0; } reset */
.tcg-wrapper .tcg-tab {
    padding: 14px 82px;
    font-size: 20px;
    font-weight: 600;
    color: #262626;
    color: var(--tcg-text);
    background: #F2F2F4;
    background: var(--tcg-gray-bg);
    border: 1px solid transparent;
    border-radius: 999px;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    margin: 0 8px;
    cursor: pointer;
}

.tcg-wrapper .tcg-tab:hover {
    background: #E5E7EB;
    background: var(--tcg-gray-border);
}

/* active：黑底白字（依設計圖） */
.tcg-wrapper .tcg-tab--active,
.tcg-wrapper .tcg-tab--active:hover {
    background: #1A1A1A;
    color: #FFFFFF;
}

/* Tab 內容區塊 */
.tcg-tab-panel {
    display: none;
}

.tcg-tab-panel--active {
    display: block;
    /* 簡單的淡入動畫 */
    -webkit-animation: tcgFadeIn 0.3s ease;
    animation: tcgFadeIn 0.3s ease;
}

@-webkit-keyframes tcgFadeIn {
    from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes tcgFadeIn {
    from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
    to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}

/* ---- Tab 1 內容：包網方案 ----
   方案 B：大容器 + absolute 定位，左右完全獨立
   調整任一邊的位置 / 大小不會影響另一邊 */
.tcg-plan-card {
    width: 1700px;
    margin: 0 auto;
    background: #ebedf0;
    position: relative;
    min-height: 570px;
    overflow: visible;
    border-radius: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* 左側：方案列表 — flex 文檔流佈局，用 margin/padding 控制位置 */
.tcg-wrapper .tcg-plan-left {
    position: relative;
    left: auto;
    top: auto;
    margin-left: 137px;
    padding-top: 69px;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    width: 767px;
}

.tcg-plan-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #262626;
    color: var(--tcg-text);
    padding-bottom: 22px;
}

.tcg-plan-title--left {
    text-align: left;
    margin-bottom: 32px;
}

/* 2 欄 × 3 行 grid（flex-wrap，IE11 相容） */
.tcg-plans-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 21px;
    gap: 7px;
}

/* 每個 plan-item 占一半寬度（扣掉 gap） */
.tcg-plan-item,
.tcg-plan-more {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 370px;
    flex: 0 0 370px;
    width: 370px;
    height: 93px;
    margin: 0 20px 20px 0;   /* 用 margin 模擬 gap，IE11 相容 */
    box-sizing: border-box;
}

/* 奇數位置（每行第2個）不給右 margin，讓 2 欄對齊 */
.tcg-plan-item:nth-child(2n),
.tcg-plan-more:nth-child(2n) {
    margin-right: 0;
    /* padding-left: 0px; */
    /* padding-top: 0px; */
}

.tcg-plan-item {
    background: #FFFFFF;
    padding: 0 16px;
    border-radius: 13px;
    font-size: 27px;
    font-weight: 600;
    color: #262626;
    color: var(--tcg-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.tcg-plan-item:hover {
    box-shadow: 0 8px 20px rgba(229, 34, 43, 0.12);
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.tcg-plan-item-icon {
    width: 60px;
    height: 60px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.tcg-plan-item-icon img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.tcg-plan-item-text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

/* Learn More 按鈕：紅色文字 + 紅色圓形箭頭 */
.tcg-plan-more {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 0 28px;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    letter-spacing: 0.02em;
    font-size: 31px;
    color: #E5222B;
    color: var(--tcg-red);
    gap: 26px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    padding-left: 0px;
}

.tcg-plan-more:hover {
    -webkit-transform: translateX(4px);
    -ms-transform: translateX(4px);
    transform: translateX(4px);
}
/* Tab 1 包网方案 Learn More 獨立樣式 */
.tcg-solutions-more {padding-left: 30px;}
/* Tab 2 游戏APIs Learn More 獨立樣式 */
.tcg-api-more {
}

.tcg-plan-more-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #E5222B;
    background: var(--tcg-red);
    color: #FFFFFF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 28px;
}
.tcg-plan-more-icon .tcg-arrow {
    display: inline-block;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}
.tcg-plan-more:hover .tcg-plan-more-icon .tcg-arrow {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* 右側主視覺 — 共用基礎（僅 position） */
.tcg-wrapper .tcg-plan-visual {
    position: absolute;
}
.tcg-wrapper .tcg-plan-visual img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* Tab 1 包网方案：垂直居中 */
.tcg-solutions-visual {
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* ---- Tab 2 / 3 placeholder ---- */
.tcg-tab-empty {
    width: 1672px;
    margin: 0 auto;
    height: 620px;
}
.tcg-tab-empty img {
    max-height: 100%;
}

/* ---- Tab 2：游戏 APIs 雙狀態互動元件 ---- */

/* 狀態容器：預設隱藏，active 時顯示 */
.tcg-api-state {
    display: none;
    width: 100%;
    height: auto;
}
/* State 1 用 block，State 2 用 flex（column 佈局需要 flex 才生效） */
.tcg-api-state-1.tcg-api-state--active {
    display: block;
}
.tcg-api-state-2.tcg-api-state--active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* --- State 1：預設檢視 --- */
.tcg-api-state-1 {
    position: relative;
}
.tcg-api-left {
    width: 720px;
}
/* 統計數字列：200+（左）| 黑色區塊 | 10000+（右） */
.tcg-api-stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0;
    margin-bottom: 37px;
}
/* 統計卡片：大圓角、大 padding，跟設計圖一致 */
.tcg-api-stat {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 28px 48px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
    position: relative;
    z-index: 5;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    width: 330px;
}
.tcg-api-stat-number {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 68px;
    font-weight: 800;
    color: #262626;
    line-height: 1.15;
}
/* 200+ 紅色數字 */
.tcg-api-stat-number--red {
    color: #ff0614;
}
.tcg-api-stat-label {
    display: block;
    font-size: 25px;
    color: #6B6B6B;
    margin-top: 8px;
    white-space: nowrap;
}
/* 200+ 卡片獨立尺寸 */
.tcg-api-stat--partners {
    padding: 28px 48px;
    width: 330px;
    height: 182px;
}
/* 10000+ 卡片獨立尺寸 */
.tcg-api-stat--games {
    padding: 28px 48px;
    height: 186px;
    margin-left: 30px;
}

/* 黑色互動區塊：窄條狀，右半圓角，從200+卡片右側伸出 */
.tcg-api-block {
    width: 57px;
    height: 180px;
    background: #262626;
    border-radius: 0 16px 16px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 2;
    margin-left: -12px;
    margin-right: 12px;
    -webkit-transition: width 0.3s ease;
    transition: width 0.3s ease;
}
.tcg-api-block:hover {
    width: 72px;
}
/* hover 時右邊 10000+ 往右推 */
.tcg-api-block:hover + .tcg-api-stat--games {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}
.tcg-api-block-arrow {
    color: #FFFFFF;
    font-size: 52px;
    font-weight: bold;
    line-height: 1;
    transition: transform 0.3s ease;
    margin-top: 2px;
}
.tcg-api-block:hover .tcg-api-block-arrow {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.tcg-wrapper .tcg-api-desc {
    font-size: 18px;
    color: #6B6B6B;
    line-height: 1.8;
    margin-bottom: 5px;
}

/* 右側角色插圖 */
.tcg-api-visual {
    right: 93px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.tcg-wrapper .tcg-api-visual img {
    max-height: 603px;
}

/* --- State 2：廠商 Logo 網格（滑動輪播） --- */
/* State 2 基本樣式（不設 display，由 --active 控制） */
.tcg-api-state-2 {
    padding: 40px 80px 24px;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
/* 標題列：標題置中，Back 絕對定位靠右 */
.tcg-api-grid-header {
    position: relative;
    text-align: center;
    margin-bottom: 49px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
.tcg-api-grid-title {
    font-size: 26px;
    font-weight: 700;
    color: #262626;
}
/* "200+" 紅色大數字 */
.tcg-api-grid-title-num {
    font-family: "Montserrat", sans-serif;
    font-size: 77px;
    font-weight: 800;
    color: #ff0614;
    display: inline-block;
    position: relative;
    top: 14px;
}
/* Back 按鈕區域：絕對定位靠右，垂直置中 */
.tcg-api-back-wrap {
    position: absolute;
    right: -23px;
    top: 62px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 23px;
    cursor: pointer;
}
.tcg-api-back-text {
    font-family: "Montserrat", sans-serif;
    font-size: 23px;
    font-weight: 700;
    color: #ff0614;
    letter-spacing: 0.02em;
}
/* 紅色空心圓形按鈕（用 .tcg-wrapper 提高權重，覆蓋 common reset） */
.tcg-wrapper .tcg-api-back {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #ff0614;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: background 0.25s ease, -webkit-transform 0.25s ease;
    transition: background 0.25s ease, transform 0.25s ease;
}
.tcg-api-back-wrap:hover .tcg-api-back {
    background: rgba(215, 38, 56, 0.08);
    -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08);
}
/* 紅色左上箭頭 ↖ */
.tcg-api-back-arrow {
    color: #ff0614;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

/* Logo 滑動軌道容器 */
.tcg-api-grid-wrap {
    overflow: hidden;
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
/* 滑動軌道：所有頁面橫排，用 transform 滑動 */
.tcg-api-grid-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    will-change: transform;
}
/* 每一頁佔滿容器寬度 */
.tcg-api-grid-page {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 23px;
    box-sizing: border-box;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.tcg-api-grid-item {
    width: 266px;
    height: 119px;
    background: #FFFFFF;
    border-radius: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    -webkit-transition: box-shadow 0.25s ease, -webkit-transform 0.25s ease;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}
.tcg-api-grid-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}
.tcg-api-grid-item img {
    max-width: 80%;
    max-height: 70%;
    -o-object-fit: contain;
    object-fit: contain;
}

/* 分頁圓點 */
.tcg-api-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 22px;
    position: relative;
    top: -40px;
}
.tcg-wrapper .tcg-api-dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #D9D9D9;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
    transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}
.tcg-wrapper .tcg-api-dot--active {
    background: #ff0614;
    width: 28px;
    border-radius: 5px;
}


/* ---- Tab 3：游戏产品（兩張白色子卡片並排） ---- */

/* Tab 3 灰色外框 — 繼承 .tcg-plan-card 基礎，額外設定 */
.tcg-product-card {
    padding: 65px 138px 40px 138px;
    overflow: visible;
}

/* 區塊標題「遊戲產品」 */
.tcg-product-heading {
    font-size: 42px;
    font-weight: 700;
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

/* 兩張子卡片並排容器 */
.tcg-product-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 71px;
}

/* 每張子卡片：白色圓角，相對定位（讓圖片可溢出） */
.tcg-product-item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    background: #FFFFFF;
    border-radius: 24px;
    position: relative;
    overflow: visible;
    min-height: 400px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
/* 天成彩票 獨立樣式 */
.tcg-product-lottery {
    min-height: 300px!important;
}
/* 天成MINI GAME 獨立樣式 */
.tcg-product-minigame {min-height: 300px !important;}

/* 子卡片文字區塊 */
.tcg-product-item-content {
    position: relative;
    z-index: 2;
    padding: 62px 40px 20px 61px;
    max-width: 55%;
}

/* 子卡片標題（天成彩票 / 天成MINI GAME） */
.tcg-product-item-title {
    font-size: 32px;
    font-weight: 700;
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 20px;
    line-height: 1.3;
    padding-bottom: 19px;
}

/* 子卡片描述文字 */
.tcg-product-item-desc {
    font-size: 18px;
    line-height: 1.7;
    color: #6B6B6B;
    margin-bottom: 30px;
    padding-bottom: 10px;
}

/* 子卡片右側產品圖 — 絕對定位，可溢出卡片 */
.tcg-product-item-visual {
    position: absolute;
    right: -20px;
    bottom: -20px;
    z-index: 1;
    pointer-events: none;
}
.tcg-product-item-visual img {
    display: block;
    max-height: 100%;
    width: 100%;
    height: 100%;
}
/* 天成彩票圖片 獨立定位 */
.tcg-product-visual-lottery {
    right: 20px;
    bottom: -46px;
    width: 290px;
    height: 380px;
}
/* 天成MINI GAME 圖片 獨立定位 */
.tcg-product-visual-minigame {
    right: -59px;
    bottom: -46px;
    width: 385px;
    height: 380px;
}

/* Tab 3 Learn More 獨立樣式 */
.tcg-product-more-lottery {
    font-size: 24px;
}
.tcg-product-more-minigame {
    font-size: 24px;
}


/* ==============================================================
   [Section: Advantages] 我們的優勢 KEY ADVANTAGES
   規格：整塊高度 1024px
         - 上方：中文區段標題 + 英文標題圖片
         - 下方：4 張卡片 418×480，相連並貼齊區塊底部
         - hover：卡片轉為紅色漸層 + 向上放大
   ============================================================== */
/* [Plan B] 移除固定 height，cards 改為 flow 定位 */
.tcg-advantages {
    position: relative;
    width: 100%;
    /* height: 1024px; ← [Plan B] 已移除固定高度 */
    background: #FFFFFF;
    border-top: 6px solid #E5222B;
    border-top-color: var(--tcg-red);
    padding-top: 119px;
    padding-bottom: 0px;       /* [Plan B] 原本由 absolute bottom: 60px 控制 */
    overflow: visible;   /* hover 放大時卡片能向上突破 */
}

.tcg-subsection-title {
    text-align: center;
    font-size: 42px;
    font-weight: 600;
    color: #262626;
    color: var(--tcg-text);
    margin: 30px 0 30px;
    padding-top: 110px;
}

/* KEY ADVANTAGES 英文標題圖 */
/* [Fix] 移除固定寬度，讓圖片用原始尺寸顯示 */
.tcg-adv-title-img {
    margin: 20px auto 0;
    text-align: center;
}
.tcg-adv-title-img img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* [Plan B] 4 張智慧營運卡片：改為 flow 定位 + margin auto 置中 */
.tcg-adv-cards {
    /* [Plan B] 移除 absolute 定位，改用 margin 置中 */
    /* position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); */
    margin: 71px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 1692px;
    min-height: 480px;
    background: #F2F2F4;
    background: var(--tcg-gray-bg);
    border-radius: 16px;
    height: auto;
    max-height: 530px;
}

.tcg-adv-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 418px;
    flex: 0 0 418px;
    width: 418px;
    min-height: 480px;
    padding: 60px 44px;
    text-align: center;
    background: transparent;
    border-radius: 16px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    position: relative;
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    max-height: 530px;
}

/* 分隔線：用 ::after 偽元素，直線從頂到底，不受圓角影響 */
.tcg-adv-card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 51px;
    width: 1px;
    height: 80%;
    background: #d8d8d8;
}

/* 最後一張卡不要分隔線 */
.tcg-adv-card:last-child::after {
    display: none;
}

/* hover / active 時隱藏分隔線（紅卡放大後不需要） */
.tcg-adv-card:hover::after,
.tcg-adv-card--active::after {
    display: none;
}

/* hover 與 active：轉紅 + 放大 + 紅色光暈 */
.tcg-adv-card:hover,
.tcg-adv-card--active {
    background: #E5222B;
    background: -webkit-linear-gradient(135deg, #FF3B45 0%, #D2101C 100%);
    background: linear-gradient(135deg, #FF3B45 0%, #D2101C 100%);
    color: #FFFFFF;
    /* 外光暈效果，非單邊陰影，模擬設計圖紅卡發光感 */
    box-shadow: 0 0 40px rgba(229, 34, 43, 0.35),
                0 10px 30px rgba(229, 34, 43, 0.25);
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    z-index: 2;
}

.tcg-adv-icon {
    width: 93px;
    height: 85px;
    margin: 50px 0px 32px;
}

/* Advantage icon 圖片：normal / hover 狀態切換 */
.tcg-adv-icon img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}
.tcg-adv-icon .tcg-adv-icon-hover {
    display: none;
}
.tcg-adv-card:hover .tcg-adv-icon-normal,
.tcg-adv-card--active .tcg-adv-icon-normal {
    display: none;
}
.tcg-adv-card:hover .tcg-adv-icon-hover,
.tcg-adv-card--active .tcg-adv-icon-hover {
    display: block;
}

.tcg-adv-card-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 22px;
    text-align: left;
    text-transform: none!important;
}

.tcg-adv-card-desc {
    font-size: 18px;
    line-height: 1.8;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    text-align: left;
}

.tcg-adv-card:hover .tcg-adv-card-title,
.tcg-adv-card--active .tcg-adv-card-title {
    color: #FFFFFF !important;
}
.tcg-adv-card:hover .tcg-adv-card-desc,
.tcg-adv-card--active .tcg-adv-card-desc {
    color: rgba(255,255,255,0.9);
}

/* ==============================================================
   [Section: Security Wrapper] 最高安保級別外層 section
   ============================================================== */
.tcg-security {
    background: #FFFFFF;
}

/* ==============================================================
   最高安保級別
   規格：整塊區高 605px（含標題 + 圖示列，垂直置中）
         圓形圖示 151 × 151 px（border-radius: 50%）
         圖示間距 85px，整列水平置中於 1920 設計寬
   計算：7 icons × 151 + 6 gaps × 85 = 1057 + 510 = 1567 px
         左右留白各 (1920 - 1567) / 2 = 176.5 px
   ============================================================== */
/* [Plan B] 移除固定 height，改用 padding 撐開垂直空間 */
.tcg-security-block {
    /* height: 605px; ← [Plan B] 已移除固定高度 */
    padding: 29px 0;           /* [Plan B] 用 padding 取代 height + justify-content: center */
    display: -webkit-box;
    padding-bottom: 191px;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;  /* 保留，配合 padding 仍有用 */
}

.tcg-security-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;    /* 左右置中 */
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 85px;                  /* 圖示間距 */
    padding-top: 50px;
}

.tcg-security-item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 151px;        /* 固定寬 151，配合圓形圖示 */
    flex: 0 0 151px;
    text-align: center;
}

.tcg-security-icon {
    width: 151px;
    height: 151px;
    margin: 0 auto 26px;
    border-radius: 50%;
    overflow: hidden;           /* 確保 placeholder 也被 clip 成圓形 */
}

/* Security icon 圖片 */
.tcg-security-icon img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.tcg-security-label {
    display: block;
    font-size: 25px;
    color: #6B6B6B;
    /*color: var(--tcg-text);*/
    font-weight: bold;
}


/* ==============================================================
   [Localization 專用] 標題 & 描述 — 獨立控制，不影響其他區塊
   ============================================================== */
.tcg-locl-title {
    font-size: 51px;
    margin-bottom: 16px;
    color: #262626;
    color: var(--tcg-text);
    padding-bottom: 10px;
}

.tcg-locl-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.9;
    margin-bottom: 28px;
    max-width: 320px;
}

/* ==============================================================
   [Customization 專用] 標題 & 描述 — 獨立控制，不影響其他區塊
   ============================================================== */
.tcg-cust-title {
    font-size: 51px;
    margin-bottom: 16px;
    color: #262626;
    color: var(--tcg-text);
    padding-bottom: 9px;
}

.tcg-cust-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.9;
    margin-bottom: 38px!important;
    max-width: 320px;
}


/* ==============================================================
   [Section: Localization] 在地化界面
   架構：section (1920 × 1150, 灰色背景, 絕對定位容器)
          > .tcg-loc-deco      ... 右上紅色裝飾 (522 × 345)
                                   允許部分超出灰色（overflow: visible）
          > .tcg-locl-content  ... 文字/按鈕層：距左 204px, 垂直置中
                                   比照 .tcg-cust-content
          > .tcg-carousel      ... 手機輪播：水平/垂直置中，寬 1200px
   備註：本 section 在 .tcg-wrapper(1920px 固定寬) 內，所有 px 會跟著
         scale() 一起等比縮放。
   ============================================================== */
/* [Plan B] height → min-height（子元素仍用 absolute，需保底高度） */
.tcg-localization {
    position: relative;
    width: 100%;
    min-height: 869px;        /* [Plan B] 改為 min-height，允許內容超出時自動撐高 */
    /* height: 1150px; ← [Plan B] 已改為 min-height */
    background: #EAECEF;       /* 設計稿指定灰色底 */
    overflow: visible;         /* 允許紅色裝飾部分超出 */
}

/* 右上紅色裝飾：絕對定位右上，自然疊在灰底上方 */
.tcg-loc-deco {
    position: absolute;
    top: -81px;
    right: 0;
    width: 522px;
    height: 345px;
    z-index: 0;
}

.tcg-loc-deco img {
    display: block;
    width: 100%;
    height: auto;
}

/* 文字/按鈕層：固定 top/left 定位，不用 translateY
   這樣調子元素的 padding/margin 不會影響整塊的位置 */
.tcg-locl-content {
    position: absolute;
    top: 330px;                /* ← 直接調這個值控制垂直位置 */
    left: 292px;               /* ← 直接調這個值控制水平位置 */
    z-index: 2;
    max-width: 360px;
}

/* Localization 專用按鈕：實心紅底白字，獨立控制不影響其他按鈕 */
.tcg-wrapper .tcg-locl-btn {
    background: #E5222B;
    background: var(--tcg-red);
    color: #FFFFFF;
    border: none;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    letter-spacing: 0.02em;
    padding: 18px 50px;        /* ← 調這裡控制按鈕高度和寬度 */
    font-size: 23px;
    text-decoration: none;
    margin-top: 40px;
}

.tcg-wrapper .tcg-locl-btn:hover {
    background: #B51520;
    background: var(--tcg-red-dark);
}

.tcg-wrapper .tcg-locl-btn .tcg-arrow {
    margin-left: 12px;
    font-size: 18px;
}

/* ---- Localization 手機輪播：中間大、兩邊小 ----
   簡單做法：margin-left 推到文字右邊，手機在裡面自然置中 */
.tcg-localization .tcg-carousel {
    position: absolute;
    width: 989px;              /* ← 直接改這個值控制寬度 */
    left: 714px;                /* ← 直接改這個值控制水平位置 */
    top: 52%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
}

/* Carousel 外框 */
.tcg-carousel {
    position: relative;
}

/* 箭頭按鈕：absolute 定位，不佔 flex 空間
   讓 viewport 用滿 carousel 寬度，手機才能真正置中 */
.tcg-wrapper .tcg-carousel-btn {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    z-index: 5;
    cursor: pointer;
}

/* 左箭頭：緊貼手機群左邊外側 */
.tcg-wrapper .tcg-carousel-prev {
    left: -60px;
}

/* 右箭頭：緊貼手機群右邊外側 */
.tcg-wrapper .tcg-carousel-next {
    right: -60px;
}

.tcg-wrapper .tcg-carousel-btn:hover {
    opacity: 0.7;
}

.tcg-wrapper .tcg-carousel-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Viewport：撐滿 carousel 寬度（箭頭已改 absolute 不佔空間） */
.tcg-carousel-viewport {
    width: 100%;
    position: relative;
    height: 700px;
    overflow: visible;
}

/* Track：不再用 flex 排列，改為 relative 容器讓手機 absolute */
.tcg-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 每支手機：absolute 定位，由 JS 控制 left / transform / z-index */
.tcg-phone {
    position: absolute;
    top: 50%;
    border-radius: 24px;
    overflow: hidden;
    -webkit-transition: all 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
    transition: all 0.45s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.tcg-phone img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Carousel 箭頭圖片 */
.tcg-carousel-arrow-img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

/* Localization 手機尺寸（中間 320×640，兩側由 scale 縮小） */
[data-carousel="locl"] .tcg-phone {
    width: 320px;
    height: 640px;
}

/* 原 Customization 手機列樣式已移除（區塊改為整張底圖） */


/* ==============================================================
   [Section: Customization] 定制化服務
   架構：section (1920 × 1150, 絕對定位容器)
          > .tcg-cust-bg       ... 底圖層：紅色裝飾 + 手機群合成，填滿整個 section
          > .tcg-cust-content  ... 文字/按鈕層：距左 204px，垂直置中
   備註：本 section 在 .tcg-wrapper(1920px 固定寬) 內，所有 px 會跟著
         scale() 一起等比縮放。
   ============================================================== */
/* [Plan B] height → min-height（子元素仍用 absolute，需保底高度） */
.tcg-customization {
    position: relative;
    width: 100%;
    min-height: 1150px;        /* [Plan B] 改為 min-height，允許內容超出時自動撐高 */
    /* height: 1150px; ← [Plan B] 已改為 min-height */
    background: #FFFFFF;
    overflow: hidden;
}

/* 底圖層：絕對定位填滿整個 section */
.tcg-cust-bg {
    position: absolute;
    top: 628px;
    left: 0;
    width: 480px;
    height: 373px;
    z-index: 0;
}

.tcg-cust-bg img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* 文字/按鈕層：固定 top/left 定位，不用 translateY
   這樣調子元素的 padding/margin 不會影響整塊的位置 */
.tcg-cust-content {
    position: absolute;
    top: 329px;                /* ← 直接調這個值控制垂直位置 */
    left: 288px;               /* ← 直接調這個值控制水平位置 */
    z-index: 1;
    max-width: 360px;
}

/* Customization 專用按鈕：獨立控制不影響其他按鈕 */
.tcg-wrapper .tcg-cust-btn {
    background: #E5222B;
    background: var(--tcg-red);
    color: #FFFFFF;
    border: none;
    padding: 18px 50px;
    font-size: 23px;
    text-decoration: none;
}

.tcg-wrapper .tcg-cust-btn:hover {
    background: #B51520;
    background: var(--tcg-red-dark);
}

.tcg-wrapper .tcg-cust-btn .tcg-arrow {
    margin-left: 12px;
    font-size: 18px;
}

/* --------------------------------------------------------------
   [Customization] 右側五欄垂直無限滾動手機截圖
   架構：.tcg-cust-scroll（absolute 容器，定位在右側）
           > .tcg-cust-scroll-col × 5（每欄 228px，overflow hidden 裁切）
               > .tcg-cust-scroll-track（兩份圖片堆疊，CSS 動畫驅動）
   圖片原始尺寸：228 × 1188px，不縮放
   動畫原理：track 高度 = 1188×2 = 2376px，translateY 從 0 到 -1188px
             到達 -1188px 時第二份圖剛好對齊起點，無縫循環
   上下虛化：用 ::before / ::after 白色漸層遮罩
   -------------------------------------------------------------- */
.tcg-cust-scroll {
    position: absolute;
    top: 125px;                /* ← 調整垂直位置 */
    right: 100px;              /* ← 調整水平位置（距右邊緣） */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0px;                 /* ← 欄間距 */
    height: 900px;             /* ← 可見區域高度（裁切窗口） */
    z-index: 1;
    right: 198px;
}

/* 上方虛化遮罩：白色 → 透明 */
.tcg-cust-scroll::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;             /* ← 虛化區域高度 */
    background: -webkit-linear-gradient(top, #FFFFFF 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, #FFFFFF 0%, rgba(255,255,255,0) 100%);
    z-index: 2;
    pointer-events: none;
}

/* 下方虛化遮罩：透明 → 白色 */
.tcg-cust-scroll::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;             /* ← 虛化區域高度 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #FFFFFF 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #FFFFFF 100%);
    z-index: 2;
    pointer-events: none;
}

/* 每一欄：固定寬度 228px（= 圖片原始寬度），超出裁切 */
.tcg-cust-scroll-col {
    width: 228px;              /* ← 圖片原始寬度，不縮放 */
    height: 100%;
    overflow: hidden;
    margin-right: -18px;
}

/* 滾動軌道：兩份圖片垂直堆疊 */
.tcg-cust-scroll-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.tcg-cust-scroll-track img {
    display: block;
    width: 228px;              /* 保持原始寬度 */
    height: 1188px;            /* 保持原始高度 */
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

/* 往上滾動：0 → -1188px（一張圖高度） */
.tcg-cust-scroll-up {
    -webkit-animation: tcgScrollUp 25s linear infinite;
    animation: tcgScrollUp 25s linear infinite;
}

/* 往下滾動：-1188px → 0 */
.tcg-cust-scroll-down {
    -webkit-animation: tcgScrollDown 30s linear infinite;
    animation: tcgScrollDown 30s linear infinite;
}

@-webkit-keyframes tcgScrollUp {
    0%   { -webkit-transform: translateY(0); transform: translateY(0); }
    100% { -webkit-transform: translateY(-1188px); transform: translateY(-1188px); }
}
@keyframes tcgScrollUp {
    0%   { -webkit-transform: translateY(0); transform: translateY(0); }
    100% { -webkit-transform: translateY(-1188px); transform: translateY(-1188px); }
}

@-webkit-keyframes tcgScrollDown {
    0%   { -webkit-transform: translateY(-1188px); transform: translateY(-1188px); }
    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes tcgScrollDown {
    0%   { -webkit-transform: translateY(-1188px); transform: translateY(-1188px); }
    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}


/* ==============================================================
   [Section: Contact CTA] Let's Get in Touch
   架構：section (白底)
          > .tcg-container
            > .tcg-cta-box (灰色圓角外框)
                > .tcg-cta-visual     ... 左側整張圖，貼外框左緣，佔 60%
                > .tcg-cta-text-wrap  ... 右側文字包裝，佔剩餘空間
                    > .tcg-cta-text   ... 聯繫我們文字與按鈕，無白卡、置中
   ============================================================== */
.tcg-cta {
    padding: 0px 0;
    background: #FFFFFF;
    position: relative;
    padding-bottom: 4px;
}

/* 灰色圓角外框：改用 relative 定位，左右各自 absolute，互不影響 */
.tcg-wrapper .tcg-cta-box {
    background: #F2F2F4;
    background: var(--tcg-gray-bg);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    height: 419px;             /* ← 外框高度 */
}

/* 左側圖片區：absolute 貼左上 */
.tcg-wrapper .tcg-cta-visual {
    position: absolute;
    top: 0;                    /* ← 調整垂直位置 */
    left: 0;                   /* ← 調整水平位置 */
    width: 60%;                /* ← 調整寬度佔比 */
}

/* CTA 左側圖片 */
.tcg-wrapper .tcg-cta-visual img {
    display: block;
    max-width: 100%;
    height: auto;
}
.tcg-wrapper .tcg-cta-logo {
    margin-bottom: 0px;
    margin-top: 136px;         /* ← 調整 logo 垂直位置 */
}

/* 右側文字區：absolute 定位，用固定 top/right 控制位置
   調整任何值都不會影響左側圖片 */
.tcg-wrapper .tcg-cta-text-wrap {
    position: absolute;
    top: 50%;                  /* ← 調整垂直位置 */
    right: 160px;               /* ← 調整距右邊緣距離 */
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: left;
}

/* 聯繫我們文字區本體：文字置中 */
.tcg-wrapper .tcg-cta-text {
    max-width: 389px;          /* ← 調整文字區最大寬度 */
    text-align: center;
    text-align: left;
}

.tcg-wrapper .tcg-cta-text-title {
    font-size: 52px;           /* ← 調整標題字體大小 */
    margin-bottom: 13px;       /* ← 調整標題下方間距 */
    color: #262626;
    color: var(--tcg-text);
}

.tcg-wrapper .tcg-cta-text-desc {
    font-size: 18px;           /* ← 調整描述字體大小 */
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.8;
    margin-bottom: 29px;       /* ← 調整描述下方間距 */
}


/* ★ Footer 共用樣式已移至 tcg-common-web.css ★ */


/* ★ 漢堡選單已移至 tcg-common-web.css ★ */

body.tcg-mobile-mode .tcg-header-right {
    display: none;
}


/* ==============================================================
   [RWD 保留區] Media Queries
   日後等手機版設計稿確認後，於此處加入針對 .tcg-mobile-mode 的進一步排版調整
   （目前 mobile 模式僅有導覽列切換，內容區塊仍以 scale 暫時呈現）
   ============================================================== */
/*
@media (max-width: 1365px) {
    body.tcg-mobile-mode .tcg-section-xxx { ... }
}
*/


/* ==============================================================
   [首頁手機版] 以下為首頁手機版專屬樣式
   包含：Hero / WLP / About / Marquee / Products / Advantages /
         Security / Swiper / Localization / Customization / CTA
   ============================================================== */
/* ==============================================================
   [Section: Hero] 手機版首屏
   整張合成圖（紅色背景 + 英文標題 + 3D 視覺），按鈕置中覆蓋
   ============================================================== */
.tcg-m-hero {
    position: relative;
    overflow: hidden;
}
.tcg-m-hero-bg {
    width: 100%;
    min-height: 900px;
}
.tcg-m-hero-bg .tcg-img-placeholder {
    border-radius: 0;
}
.tcg-m-hero-btn-wrap {
    position: absolute;
    bottom: 228px;
    left: 0;
    width: 100%;
    text-align: center;
}


/* ==============================================================
   [Section: WLP] 什麼是包網平台
   大圓角（頂部），籌碼居中，標題居中，內文靠左
   ============================================================== */
.tcg-m-wlp {
    padding: 80px 0 110px;
    position: relative;
    background: #FFFFFF;
    border-radius: 60px 60px 0 0;
    margin-top: -60px;
    z-index: 10;
}
/* WLP 區塊的切圖已包含左右留白，取消 container padding */
.tcg-m-wlp .tcg-m-container {
    padding-left: 0;
    padding-right: 0;
}
.tcg-m-wlp-chip {
    width: 120px;
    height: 120px;
    margin: 0 auto 40px;
}
.tcg-wrapper-mobile .tcg-m-wlp-title-zh {
    font-size: 55px;
    font-weight: 800;
    color: #262626;
    text-align: left;
    margin-bottom: 33px;
    padding-left: 74px;
}
/* WHAT is a WHITE LABEL PLATFORM 英文標題圖片佔位 */
.tcg-m-wlp-title-img {
    width: 100%;
    min-height: 160px;
    margin: 0 auto 55px;
}
.tcg-wrapper-mobile .tcg-m-wlp-desc {
    font-size: 26px;
    color: #6B6B6B;
    line-height: 42px;
    text-align: left;
    padding-left: 70px;
    padding-right: 70px;
}


/* ==============================================================
   [Section: About] 天成集團
   標題 + 3 張堆疊卡片
   ============================================================== */
.tcg-m-about {
    padding: 125px 0 111px;
    background: #eaecef;
}
.tcg-wrapper-mobile .tcg-m-about-heading-zh {
    font-size: 54px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    margin-bottom: 41px;
}
/* ABOUT US 英文標題圖片佔位 */
.tcg-m-about-heading-img {
    width: auto;
    min-height: 70px;
    margin-bottom: 69px;
    margin-left: -40px;
    margin-right: -40px;
}

/* About 卡片 */
.tcg-m-about-card {
    background: #FFFFFF;
    border-radius: 50px;
    padding: 68px 76px;
    margin-bottom: 50px;
}
.tcg-m-about-card:last-child {
    margin-bottom: 0;
}
.tcg-m-about-card-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 20px;
    margin-top: 11px;
}
/* card-row 內的標題不需要額外 margin（由 row 的 margin-bottom 控制） */
.tcg-wrapper-mobile .tcg-m-about-card-row .tcg-m-about-card-title {
    margin-bottom: 0;
}
.tcg-wrapper-mobile .tcg-m-about-card-title {
    font-size: 49px;
    font-weight: 800;
    color: #262626;
    margin-bottom: 40px;
    margin-top: 12px;
}
.tcg-wrapper-mobile .tcg-m-about-card-desc {
    font-size: 26px;
    color: #6B6B6B;
    line-height: 1.6;
    margin-bottom: 40px;
    margin-top: 29px;
}
/* About 卡片內按鈕：全寬 + 上方保留間距 */
.tcg-m-about-card .tcg-m-btn {
    display: flex;
    width: 100%;
    margin-top: 68px;
}
/* ── Mobile 15+ YEARS 純 CSS 圓形徽章（白底紅字） ── */
.tcg-m-about-badge {
    width: 220px;
    height: 220px;
    -webkit-box-flex: 0;
    flex: 0 0 233px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.tcg-m-about-badge-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #FFFFFF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
}
/* 第 1 圈外環 */
.tcg-m-about-badge-circle::before {
    content: '';
    position: absolute;
    top: -10px; left: -10px; right: -10px; bottom: -10px;
    border-radius: 50%;
    border: 3px solid rgba(229,34,43,0.40);
    pointer-events: none;
}
/* 第 2 圈 + 第 3 圈外環 */
.tcg-m-about-badge-circle::after {
    content: '';
    position: absolute;
    top: -20px; left: -20px; right: -20px; bottom: -20px;
    border-radius: 50%;
    border: 2px solid rgba(229,34,43,0.25);
    outline: 1.5px solid rgba(229,34,43,0.12);
    outline-offset: 6px;
    pointer-events: none;
}
.tcg-m-about-badge-number {
    font-size: 98px;
    font-weight: 900;
    color: #E5222B;
    line-height: 1;
    margin-top: -6px;
    letter-spacing: -12px;
}
.tcg-m-about-badge-label {
    font-size: 28px;
    font-weight: 700;
    color: #555555;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ==============================================================
   [Marquee] 手機版無縫滾動帶（國旗 / 功能圖示）
   ──────────────────────────────────────────────────────────
   原理：兩份相同長條圖並排（200% 寬），CSS animation 從 0 → -50%
         滾完一份後瞬間跳回 0%，視覺上無縫循環
   虛化：.tcg-m-marquee 加 mask-image 左右漸層遮罩
   ============================================================== */
.tcg-m-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
    /* 左右虛化遮罩（白色漸層，兩端 60px 淡出） */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, #000 60px,
        #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, #000 60px,
        #000 calc(100% - 60px), transparent 100%);
}
.tcg-m-marquee-track {
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    -webkit-animation: tcgMMarquee 20s linear infinite;
    animation: tcgMMarquee 20s linear infinite;
}
.tcg-m-marquee-slide {
    flex: 0 0 auto;
}
.tcg-m-marquee-slide img {
    display: block;
    height: 100%;
    width: auto;
}
.tcg-m-marquee-slide .tcg-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

/* 國旗帶：高度依圖片原尺寸 188px，速度依寬度等比 (5079/2238≈2.27×) */
.tcg-m-marquee--flags {
    height: 188px;
}
.tcg-m-marquee--flags .tcg-m-marquee-track {
    -webkit-animation-duration: 45s;
    animation-duration: 45s;
}

/* 功能圖示帶：高度依圖片原尺寸 170px，基準速度 20s */
.tcg-m-marquee--icons {
    height: 170px;
}
.tcg-m-marquee--icons .tcg-m-marquee-track {
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
}
/* 手機版 icons 滾動帶：兩份圖片銜接處保留間距 */
.tcg-m-marquee--icons .tcg-m-marquee-slide {
    padding-right: 30px;
}

/* 從右往左滾動（預設）：translateX(0%) → translateX(-50%) */
@-webkit-keyframes tcgMMarquee {
    from { -webkit-transform: translateX(0%); transform: translateX(0%); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes tcgMMarquee {
    from { -webkit-transform: translateX(0%); transform: translateX(0%); }
    to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* 從左往右滾動（反向）：translateX(-50%) → translateX(0%) */
@-webkit-keyframes tcgMMarqueeRight {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%); transform: translateX(0%); }
}
@keyframes tcgMMarqueeRight {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%); transform: translateX(0%); }
}

/* 雙行 marquee 方向控制（用於國旗帶等左右雙向滾動場景） */
.tcg-m-marquee--flags-left,
.tcg-m-marquee--flags-right {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.tcg-m-marquee--flags-left .tcg-m-marquee-track {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-animation: tcgMMarquee 45s linear infinite;
    animation: tcgMMarquee 45s linear infinite;
}
.tcg-m-marquee--flags-right .tcg-m-marquee-track {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-animation: tcgMMarqueeRight 45s linear infinite;
    animation: tcgMMarqueeRight 45s linear infinite;
}


/* ==============================================================
   [Section: Products] 我們的產品
   標題 + Tab 切換（深黑 active）+ 白色圓角方案列 + Learn More 連結
   ============================================================== */
.tcg-m-products {
    padding: 80px 0 80px;
    background: #FFFFFF;
    padding-bottom: 110px;
}
.tcg-wrapper-mobile .tcg-m-products-heading-zh {
    font-size: 56px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    margin-bottom: 50px;
    padding-top: 41px;
}
/* WHAT WE HAVE 英文標題圖片佔位 */
.tcg-m-products-heading-img {
    width: auto;
    min-height: 70px;
    margin-bottom: 69px;
    margin-left: -40px;
    margin-right: -40px;
}

/* Tab 按鈕列（置中） */
.tcg-m-products-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 52px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* 必須加 .tcg-wrapper-mobile 前綴（0,2,0）打贏 button reset（0,1,1） */
.tcg-wrapper-mobile .tcg-m-products-tab {
    flex: 0 0 auto;
    padding: 28px 35px;
    font-size: 24px;
    font-weight: 600;
    border-radius: 999px;
    background: #EAECEF;
    color: #6B6B6B;
    white-space: nowrap;
}
/* 選中狀態：深黑色（對照設計圖） */
.tcg-wrapper-mobile .tcg-m-products-tab--active {
    background: #262626;
    color: #FFFFFF;
}

/* Tab panel 顯示控制 */
.tcg-m-tab-panel {
    display: none;
}
.tcg-m-tab-panel--active {
    display: block;
}

/* 產品內容卡片 */
.tcg-m-products-card {
    background: #eaecef;
    border-radius: 20px;
    padding: 70px 65px 140px;
    overflow: hidden;
    padding-bottom: 57px;
}
.tcg-wrapper-mobile .tcg-m-products-card-title {
    font-size: 47px;
    font-weight: 800;
    color: #262626;
    line-height: 1.3;
    margin-bottom: 40px;
}

/* 白色圓角方案列 */
.tcg-m-plan-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}
.tcg-m-plan-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px 24px;
    margin-top: 2px;
}
/* 必須加 .tcg-wrapper-mobile 前綴（0,2,0）打贏 .tcg-img-placeholder 的 width:100%（0,2,0 同分但後寫贏） */
.tcg-wrapper-mobile .tcg-m-plan-row-icon {
    width: 60px;
    height: 60px;
    min-height: 60px;
    flex: 0 0 60px;
    border-radius: 8px;
}
.tcg-m-plan-row-text {
    font-size: 26px;
    font-weight: 500;
    color: #262626;
}

/* Plan footer：Learn More 連結 + 右側 3D 插圖 */
/* 第一張 tab card：3D 插圖作為背景，靠右下 */
.tcg-m-tab-panel[data-m-tab-panel="1"] .tcg-m-products-card {
    background-image: url('https://tc-gaming.com/img/mobile/index/home_img_03-1_bg.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 460px auto;
    padding: 70px 65px 145px;
}
.tcg-m-plan-footer {
    margin-top: 77px;
    position: relative;
    top: -292px;
}
/* Tab 1 包网方案 footer 獨立樣式 */
.tcg-m-solutions-footer {position: relative;top: 14px;}
/* Tab 2 游戏APIs footer 獨立樣式 */
.tcg-m-api-footer {
}

/* ---- 手機版 Tab 2：游戏 APIs 雙狀態互動元件 ---- */

.tcg-m-api-card {
    position: relative;
    overflow: visible;
    padding: 70px 72px 145px;
}

/* 狀態容器：預設隱藏 */
.tcg-m-api-state {
    display: none;
    width: 100%;
}
.tcg-m-api-state-1.tcg-m-api-state--active {
    display: block;
    padding-top: 11px;
    height: 861px;
}
.tcg-m-api-state-2.tcg-m-api-state--active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* --- State 1 --- */
.tcg-m-api-title {
    font-size: 46px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 20px;
}
.tcg-m-api-hero-img {
    text-align: right;
    margin-bottom: 10px;
    margin-right: 0px;
    position: relative;
    top: -86px;
    left: 262px;
}
.tcg-m-api-hero-img img {
    max-width: 70%;
    height: auto;
}

/* 統計卡堆疊 */
.tcg-m-api-stats {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0;
    margin-bottom: 30px;
    position: relative;
    top: -206px;
    width: 100%;
}
.tcg-m-api-stat {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 26px 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 2;
}
.tcg-m-api-stat--partners {}
.tcg-m-api-stat--games {
}
.tcg-m-api-stat-number {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 75px;
    font-weight: 800;
    color: #D72638;
    line-height: 1.15;
}
.tcg-m-api-stat-label {
    display: block;
    font-size: 30px;
    color: #6B6B6B;
    margin-top: 0px;
}

/* 黑色互動區塊（向下箭頭） */
.tcg-m-api-block {
    width: 100%;
    height: 56px;
    background: #262626;
    border-radius: 0 0 16px 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    margin-top: -10px;
    margin-bottom: 24px;
}
.tcg-m-api-block-arrow {
    color: #FFFFFF;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* 描述文字 */
.tcg-m-api-desc {
    font-size: 24px;
    line-height: 1.7;
    color: #6B6B6B;
    margin-bottom: 20px;
    position: relative;
    top: -197px;
}

/* Learn More 獨立樣式 */
.tcg-m-api-more-link {
}

/* --- State 2 --- */
.tcg-m-api-grid-header {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 55px;
}
.tcg-m-api-back-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
    cursor: pointer;
    margin-right: -22px;
}
.tcg-m-api-back-text {
    font-family: "Montserrat", sans-serif;
    font-size: 29px;
    font-weight: 600;
    color: #D72638;
}
.tcg-wrapper-mobile .tcg-m-api-back {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #D72638;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.tcg-m-api-back-arrow {
    color: #D72638;
    font-size: 50px;
    font-weight: bold;
    line-height: 1;
}

/* 200+ 大標題 */
.tcg-m-api-grid-title {
    font-size: 28px;
    font-weight: 700;
    color: #262626;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.4;
    padding-bottom: 50px;
}
.tcg-m-api-grid-title-num {
    font-family: "Montserrat", sans-serif;
    font-size: 102px;
    font-weight: 800;
    color: #ff0813;
    display: block;
    line-height: 0.5;
}

/* Logo 滑動軌道容器 */
.tcg-m-api-grid-wrap {
    overflow: hidden;
    width: 100%;
    position: relative;
}
.tcg-m-api-grid-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    will-change: transform;
}
/* 每頁佔滿容器 */
.tcg-m-api-grid-page {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 16px;
    box-sizing: border-box;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0px 4px;
}
.tcg-m-api-grid-item {
    width: calc((100% - 16px) / 2);
    height: 119px;
    background: #FFFFFF;
    border-radius: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    margin-bottom: 12px;
}
.tcg-m-api-grid-item img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

/* 分頁圓點 */
.tcg-m-api-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 45px;
    margin-top: 54px;
}
.tcg-wrapper-mobile .tcg-m-api-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #D9D9D9;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
    transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}
.tcg-wrapper-mobile .tcg-m-api-dot--active {
    background: #D72638;
    width: 24px;
    border-radius: 50%;
}


/* ---- 手機版 Tab 3：遊戲產品（兩張白色子卡片垂直排列） ---- */

.tcg-m-product-card {
    /* 外層灰底容器，繼承 .tcg-m-products-card 的圓角灰背景 */
    padding-bottom: 51px;
}
.tcg-m-product-heading {
    font-size: 47px;
    font-weight: 800;
    color: #262626;
    line-height: 1.3;
    margin-bottom: 40px;
    padding-top: 13px;
    padding-left: 0px;
    padding-bottom: 70px;
}

/* 白色子卡片共用 */
.tcg-m-product-item {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 35px 35px 1px;
    margin-bottom: 45px;
    position: relative;
    overflow: visible;
    height: 390px;
}
.tcg-m-product-item:last-child {
    margin-bottom: 0;
}

/* 產品圖片：浮動右上 */
.tcg-m-product-item-visual {
    float: right;
    width: 169px;
    text-align: right;
    position: absolute;
}
.tcg-m-product-item-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* 天成彩票 圖片獨立樣式 */
.tcg-m-product-visual-lottery {
    left: 380px;
    top: -110px;
}
/* 天成MINI GAME 圖片獨立樣式 */
.tcg-m-product-visual-minigame {
    margin-top: -95px;
    left: 391px;
}

/* 標題 */
.tcg-m-product-item-title {
    font-size: 36px;
    font-weight: 800;
    color: #262626;
    margin-bottom: 16px;
    line-height: 1.3;
    padding-top: 18px;
    padding-left: 20px;
    padding-bottom: 23px;
}
/* 天成彩票 標題獨立樣式 */
.tcg-m-product-title-lottery {}
/* 天成MINI GAME 標題獨立樣式 */
.tcg-m-product-title-minigame {}

/* 描述文字 */
.tcg-m-product-item-desc {
    font-size: 24px;
    font-weight: 400;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 24px;
    padding-left: 17px;
    padding-right: 17px;
    padding-bottom: 22px;
}
/* 天成彩票 描述獨立樣式 */
.tcg-m-product-desc-lottery {
    padding-bottom: 61px;
}
/* 天成MINI GAME 描述獨立樣式 */
.tcg-m-product-desc-minigame {}

/* Tab 3 遊戲產品 footer 獨立樣式 */
.tcg-m-product-footer {
    margin-top: 0;
    position: static;
    top: auto;
    clear: both;
    padding-left: 20px;
}
/* 天成彩票 footer 獨立樣式 */
.tcg-m-product-footer-lottery {}
/* 天成MINI GAME footer 獨立樣式 */
.tcg-m-product-footer-minigame {}


/* ==============================================================
   [Section: Advantages] 我們的優勢
   標題 + 智慧管理系統 + 2×2 icon grid + Learn More 連結
   ============================================================== */
.tcg-m-advantages {
    padding: 129px 0 67px;
    background: #FFFFFF;
}
.tcg-wrapper-mobile .tcg-m-adv-heading-zh {
    font-size: 55px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    margin-bottom: 50px;
}
/* PRODUCT ADVANTAGES 英文標題圖片佔位 */
.tcg-m-adv-heading-img {
    width: auto;
    min-height: 60px;
    margin-bottom: 71px;
    margin-left: -40px;
    margin-right: -40px;
}
.tcg-wrapper-mobile .tcg-m-adv-subtitle {
    font-size: 47px;
    font-weight: 700;
    color: #262626;
    text-align: center;
    margin-bottom: 76px;
}
.tcg-wrapper-mobile .tcg-m-adv-desc {
    font-size: 24px;
    color: #6B6B6B;
    text-align: center;
    margin-bottom: 40px;
}

/* 優勢 icon grid 2×2 */
.tcg-m-adv-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 50px;
}
.tcg-m-adv-item {
    flex: 0 0 calc(50% - 12px);
    text-align: center;
    background: #F2F2F4;
    border-radius: 16px;
    padding: 128px 16px;
    margin-bottom: 12px;
}
.tcg-wrapper-mobile .tcg-m-adv-item-icon {
    width: 136px;
    height: 124px;
    min-height: 124px;
    margin: 0 auto 0;
}
.tcg-m-adv-item-label {
    font-size: 30px;
    font-weight: 600;
    color: #262626;
    width: 266px;
    display: block;
    margin: 0 auto;
    line-height: 39px;
    padding-top: 35px;
    letter-spacing: -1px;
}


/* ==============================================================
   [Section: Security] 最高安保級別
   3×2 grid + 第 7 個置中，右上角紅色 3D 裝飾
   ============================================================== */
.tcg-m-security {
    padding: 86px 0 117px;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}
/* 右上角紅色 3D 裝飾 */
/* 裝飾圖：跨「在地化界面」與「最高安保级別」兩個區塊的浮動元素 */
.tcg-m-security-deco {
    position: relative;
    z-index: 5;
    margin-top: -80px;
    margin-bottom: -120px;
    text-align: right;
    pointer-events: none;
}
.tcg-wrapper-mobile .tcg-m-security-title {
    font-size: 46px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    margin-bottom: 82px;
    position: relative;
    z-index: 2;
}
.tcg-m-security-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 85px 20px;
    position: relative;
    z-index: 2;
}
.tcg-m-security-item {
    flex: 0 0 calc(33.333% - 14px);
    text-align: center;
}
.tcg-wrapper-mobile .tcg-m-security-icon {
    width: 173px;
    height: 173px;
    min-height: 173px;
    margin: 0 auto 31px;
}
.tcg-m-security-label {
    font-size: 31px;
    font-weight: 500;
    color: #262626;
    line-height: 0;
}
/* 第 7 個 DDoS 單獨置中 */
.tcg-m-security-center {
    display: flex;
    justify-content: center;
    margin-top: 93px;
    position: relative;
    z-index: 2;
}


/* ==============================================================
   [Swiper] 手機版水平輪播（在地化界面用）
   ──────────────────────────────────────────────────────────
   功能：左右滑動切換、左右虛化遮罩、圓點指示器
   由 JS initMobileSwiper() 驅動
   ============================================================== */
.tcg-m-swiper {
    position: relative;
    margin-bottom: 63px;
    margin-top: 68px;
}
.tcg-m-swiper-viewport {
    overflow: hidden;
    /* 左右虛化遮罩 */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, #000 80px,
        #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, #000 80px,
        #000 calc(100% - 80px), transparent 100%);
}
.tcg-m-swiper-track {
    display: flex;
    gap: 20px;
    /* transition 由 JS 動態控制（animate 時加 0.4s ease，瞬間歸位時 none） */
    /* 前方有 clone slides，JS 計算 offset 時已包含置中補償 */
    /* margin-left 由 JS 動態計算：(750 - slideWidth) / 2，支援不同 slide 寬度 */
}
.tcg-m-swiper-slide {
    flex: 0 0 320px;
}

/* 圓點指示器 */
.tcg-m-swiper-dots {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 50px;
}
.tcg-m-swiper-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #D0D0D0;
    cursor: pointer;
    transition: background 0.25s ease;
}
.tcg-m-swiper-dot--active {
    background: #E5222B;
}


/* ==============================================================
   [Section: Localization] 在地化界面
   上方：標題 + 說明 + 紅底按鈕    下方：Swiper 輪播
   ============================================================== */
.tcg-m-local {
    padding: 138px 0 80px;
    background: #F7F7F8;
    text-align: center;
}
.tcg-wrapper-mobile .tcg-m-local-title {
    font-size: 47px;
    font-weight: 800;
    color: #262626;
    margin-bottom: 36px;
}
.tcg-wrapper-mobile .tcg-m-local-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 0px;
}
.tcg-m-local .tcg-m-btn {
    margin-bottom: 50px;
}
/* Coverflow 效果：中間大、兩側小（同 white-label Interface） */
.tcg-m-local .tcg-m-swiper-viewport {
    margin-left: 40px;
    margin-right: 40px;
}
.tcg-m-local .tcg-m-swiper-slide {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 350px;
    flex: 0 0 350px;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}
.tcg-m-local .tcg-m-swiper-slide--active {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}


/* ==============================================================
   [Section: Customization] 定制化服務
   標題 + 三欄垂直無縫滾動 + View More 紅字連結
   ============================================================== */
.tcg-m-custom {
    padding: 125px 0 46px;
    background: #FFFFFF;
    text-align: center;
    overflow: hidden;
}
.tcg-wrapper-mobile .tcg-m-custom-title {
    font-size: 46px;
    font-weight: 800;
    color: #262626;
    margin-bottom: 36px;
}
.tcg-wrapper-mobile .tcg-m-custom-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 40px;
}
.tcg-m-custom .tcg-m-btn {
    margin-bottom: 50px;
}

/* 三欄垂直滾動容器 — 每欄一張獨立長條圖 */
.tcg-m-vscroll-wrap {
    display: flex;
    gap: 0px;
    height: 900px;
    padding: 30px 49px;
    /* 上下虛化遮罩 */
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%, #000 150px,
        #000 calc(100% - 150px), transparent 100%);
    mask-image: linear-gradient(to bottom, #00000000 5%, #000 132px, #000 calc(98% - 122px), #00000000 95%);
}
.tcg-m-vscroll-col {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.tcg-m-vscroll-track {
    width: 100%;
}
/* 長條圖 — !important 防止被 .tcg-wrapper-mobile 基礎規則覆蓋 */
.tcg-m-vscroll-track .tcg-img-placeholder {
    width: 100% !important;
    height: 1200px !important;
    min-height: 0 !important;
    border-radius: 12px;
}

/* 向上無限循環滾動：兩份圖片拼接，滾完一份後瞬間歸位 */
.tcg-m-vscroll-col--up .tcg-m-vscroll-track {
    -webkit-animation: tcgMVScrollUp 25s linear infinite;
    animation: tcgMVScrollUp 25s linear infinite;
}
/* 向下無限循環滾動 */
.tcg-m-vscroll-col--down .tcg-m-vscroll-track {
    -webkit-animation: tcgMVScrollDown 25s linear infinite;
    animation: tcgMVScrollDown 25s linear infinite;
}

@-webkit-keyframes tcgMVScrollUp {
    from { -webkit-transform: translateY(0); transform: translateY(0); }
    to   { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
}
@keyframes tcgMVScrollUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@-webkit-keyframes tcgMVScrollDown {
    from { -webkit-transform: translateY(-50%); transform: translateY(-50%); }
    to   { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes tcgMVScrollDown {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}


/* ==============================================================
   [Section: CTA] 立即聯繫我們
   英文標題圖 + 中文副標 + 說明 + Contact Us 膠囊按鈕
   ============================================================== */
.tcg-cta-title-img {left: 0px;margin-left: 320px;margin-top: -310px;position: absolute;}

.tcg-m-cta {
    padding: 80px 50px;
    background: transparent;
    text-align: center;
    padding-bottom: 0px;
}
.tcg-m-cta .tcg-m-container {
    background: #F2F2F4;
    border-radius: 40px;
    padding: 0px 0px;
    padding-bottom: 120px;
}
/* LET'S GET in TOUCH 英文標題圖片佔位 */
.tcg-m-cta-title-img {
    width: 100%;
    min-height: 120px;
    margin-bottom: 100px;
}
.tcg-wrapper-mobile .tcg-m-cta-title-zh {
    font-size: 60px;
    font-weight: 800;
    color: #212529;
    margin-bottom: 30px;
}
.tcg-wrapper-mobile .tcg-m-cta-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    margin-bottom: 118px;
}

/* ★ Mobile 共用樣式已移至 tcg-common-mobile.css ★ */