/* ==============================================================
   檔案名稱：white-label-style.css
   功能說明：TC Gaming — 白牌方案（White-Label Products）頁面樣式表
   設計基準：1920px 固定寬度，透過 JS transform: scale() 等比縮放
   命名規則：
     - 共用元件：tcg- 前綴（與首頁一致）
     - 頁面專屬：tcg-wl- 前綴（wl = white-label）
   瀏覽器支援：Chrome / Edge / Safari / Firefox，IE11 盡量相容
   ============================================================== */


/* ==============================================================
   [共用] 重置、變數、基本排版
   ※ 與首頁 style.css 相同的基礎樣式，獨立檔案所以需要重複
   ============================================================== */

/* CSS 變數 */

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


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

   [Page-Specific] White-Label 頁面樣式
   ============================================================== */

/* ==============================================================
   [圖片尺寸控制] 所有 section 的 img 都要限制在容器內
   ============================================================== */
/* WLP 插圖：限制在 flex 容器 480px 內 */
.tcg-wrapper .tcg-wl-whatwlp-illust img {
    max-width: 100%;
    height: auto;
}
/* WLP 英文標題圖片 */
.tcg-wrapper .tcg-wl-whatwlp-title-img img {
    max-width: 100%;
    height: auto;
}
/* Feature icons：限制在 80px icon 容器內 */
.tcg-wrapper .tcg-wl-feature-icon img {
    max-width: 100%;
    height: auto;
}
/* Security icons：限制在 60px 容器內 */
.tcg-wrapper .tcg-wl-security-icon img {
    max-width: 100%;
    height: auto;
}
/* Coverflow 手機：填滿卡片 */
.tcg-wrapper .tcg-coverflow-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
/* 國旗跑馬燈：保持原始寬度不裁切 */
.tcg-wl-flags-slide img {
    max-width: none;
    height: 100%;
    display: block;
}


/* ==============================================================
   [Section: Hero] 首屏主視覺
   改用 flex + align-items: flex-start，左右獨立不互相牽動
   ============================================================== */
.tcg-wl-hero {
    position: relative;
    padding: 0px 0 0px;     /* ← 原始 padding 保留 */
    background: #F0F0F0;
    background-size: cover;
    background-position: center center;
    color: #262626;
    min-height: 598px;
    margin-bottom: 0px;
}

/* 底圖層：整張 banner 1920×600，absolute 鋪滿 */
.tcg-wrapper .tcg-wl-hero-bg {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.tcg-wrapper .tcg-wl-hero-bg img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* 內容區：flex + flex-start（不用 center，左右不互相牽動） */
.tcg-wrapper .tcg-wl-hero-inner {
    position: relative;
    z-index: 2;
    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;
    top: 233px;
    left: 168px;
}

/* 左側文字 */
.tcg-wrapper .tcg-wl-hero-content {
    max-width: 600px;          /* ← 文字區最大寬度 */
}

.tcg-wrapper .tcg-wl-hero-title {
    font-size: 52px;           /* ← 標題字體大小 */
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 81px;       /* ← 標題下方間距 */
    color: #262626;
    color: var(--tcg-text);
}

.tcg-wrapper .tcg-wl-hero-btn {
    margin-top: 20px;          /* ← 按鈕上方間距 */
}

/* 右側視覺 */
.tcg-wrapper .tcg-wl-hero-visual {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}


/* ==============================================================
   [Section: What is WLP] 什么是包网平台？
   改用 flex + align-items: flex-start，左右獨立不互相牽動
   ============================================================== */
.tcg-wl-whatwlp {
    background: #FFFFFF;
    padding: 61px 0;
}

/* 內容區：flex + flex-start */
.tcg-wrapper .tcg-wl-whatwlp-inner {
    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: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

/* 左側插圖 */
.tcg-wrapper .tcg-wl-whatwlp-illust {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 480px;
    flex: 0 0 950px;           /* ← 插圖寬度 */
    /* padding-top: 32px; */
    margin-top: 56px;
    margin-left: 49px;
}

/* 右側文字 */
.tcg-wrapper .tcg-wl-whatwlp-text {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    max-width: 100%;          /* ← 文字區最大寬度 */
    margin-top: 65px;
    margin-left: 12px;
}

.tcg-wrapper .tcg-wl-whatwlp-subtitle {
    font-size: 53px;           /* ← 副標題字體大小 */
    color: #262626;
    color: var(--tcg-text);
    margin-bottom: 22px;        /* ← 副標題下方間距 */
}

/* 英文標題圖片容器 */
.tcg-wrapper .tcg-wl-whatwlp-title-img {
    margin: 16px 0 54px;       /* ← 圖片上下間距 */
}

.tcg-wrapper .tcg-wl-whatwlp-desc {
    font-size: 18px;           /* ← 描述字體大小 */
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.5;
    width: 670px;
}


/* ==============================================================
   [Section Titles] 每個 section 獨立標題，互不影響
   ============================================================== */

.tcg-wl-partner-inner {padding-left: 60px;padding-right: 060pxpx;}

/* Partner CTA 標題 */
.tcg-wrapper .tcg-wl-partner-title {
    font-size: 52px;           /* ← 調整字體大小 */
    font-weight: 700;
    text-align: center;
    margin-bottom: 41px;       /* ← 調整下方間距 */
    color: #262626;
    color: var(--tcg-text);
}

/* Standard Features 標題 */
.tcg-wrapper .tcg-wl-features-title {
    font-size: 52px;           /* ← 調整字體大小 */
    font-weight: 700;
    text-align: center;
    margin-bottom: 111px;       /* ← 調整下方間距 */
    color: #262626;
    color: var(--tcg-text);
    padding-top: 31px;
}

/* Security 標題 */
.tcg-wrapper .tcg-wl-security-title {
    font-size: 51px;           /* ← 調整字體大小 */
    font-weight: 700;
    text-align: center;
    margin-bottom: 47px;       /* ← 調整下方間距 */
    color: #262626;
    color: var(--tcg-text);
}

/* Friendly Interface 標題 */
.tcg-wrapper .tcg-wl-friendly-title {
    font-size: 52px;           /* ← 調整字體大小 */
    font-weight: 700;
    text-align: center;
    margin-bottom: 51px;       /* ← 調整下方間距 */
    color: #262626;
    color: var(--tcg-text);
}


/* Partner CTA Section */
.tcg-wl-partner {
    background: #F2F2F4;
    background: var(--tcg-gray-bg);
    padding: 104px 0;
}

.tcg-wl-partner-box {
    position: relative;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 100px 0px;
    overflow: hidden;
}

.tcg-wl-partner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;                /* ← 世界地圖透明度（圖片自帶透明度） */
}
.tcg-wl-partner-bg img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.tcg-wl-partner-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.tcg-wrapper .tcg-wl-partner-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.8;
    max-width: 1130px;
    margin: 0 auto 0px;
}

.tcg-wl-flags-marquee {
    width: 1570px;
    height: 136px;
    /* overflow: hidden; */
    margin-bottom: 40px;
    margin: 0 auto;
    margin-top: 54px;
    margin-bottom: 37px;
}

/* 國旗左右虛化遮罩（僅 web） */
.tcg-wrapper .tcg-wl-flags-marquee {
    position: relative;
}
.tcg-wrapper .tcg-wl-flags-mask-left,
.tcg-wrapper .tcg-wl-flags-mask-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 430px;
    z-index: 2;
    pointer-events: none;
}
.tcg-wrapper .tcg-wl-flags-mask-left {
    left: -77px;
    background: linear-gradient(to right, #ffffff 40%, transparent);
    z-index: 999999999999;
}
.tcg-wrapper .tcg-wl-flags-mask-right {
    right: -77px;
    background: linear-gradient(to left, #ffffff 40%, transparent);
}

.tcg-wl-flags-track {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-max-content;
    width: max-content;
    height: 100%;
    -webkit-animation: tcgWlFlagsMarquee 30s linear infinite;
    animation: tcgWlFlagsMarquee 30s linear infinite;
}

.tcg-wl-flags-slide {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 100%;
}
.tcg-wrapper .tcg-wl-flags-slide + .tcg-wl-flags-slide {
    margin-left: -3px;
}

@-webkit-keyframes tcgWlFlagsMarquee {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%);   transform: translateX(0%); }
}
@keyframes tcgWlFlagsMarquee {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%);   transform: translateX(0%); }
}

.tcg-wrapper .tcg-wl-partner-btn {
    margin-top: 10px;
}


/* Standard Features Section */
.tcg-wl-features {
    background: #FFFFFF;
    padding: 112px 0;
}
.tcg-wrapper .tcg-wl-features {
    position: relative;
    /* overflow: hidden; */
    margin-top: 21px;
}
.tcg-wrapper .tcg-wl-features-deco {
    position: absolute;
    top: -101px;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

.tcg-wl-features-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0px -2px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.tcg-wl-feature-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(25% - 23px);
    flex: 0 0 calc(25% - 23px);
    background: transparent;
    padding: 0px 24px;
    text-align: center;
    padding-bottom: 0px;
    height: 381px;
}

.tcg-wl-feature-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto 8px;
}

.tcg-wl-feature-title {
    font-size: 27px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #262626;
    color: var(--tcg-text);
    position: relative;
    top: -73px;
}

.tcg-wl-feature-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.6;
}

/* Features 文字獨立控制（僅 web） */
.tcg-wrapper .tcg-wl-feature-title {
    text-align: center;
}
.tcg-wrapper .tcg-wl-feature-desc {
    text-align: center;
    position: relative;
    top: -60px;
}


/* Security Section */
.tcg-wl-security {
    background: #FFFFFF;
    padding: 0px 0;
    text-align: center;
    padding-bottom: 222px;
}

.tcg-wrapper .tcg-wl-security-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.8;
    max-width: 1100px;
    margin: 0 auto 60px;
}

.tcg-wl-security-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 55px;
    padding-top: -9px;
}

.tcg-wl-security-item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: center;
}

.tcg-wl-security-icon {
    width: 151px;
    height: 151px;
    margin: 0 auto 12px;
}

.tcg-wl-security-label {
    font-size: 25px;
    text-align: center;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    font-weight: bold;
    padding-top: 11px;
    max-width: 180px;
}


/* Friendly Interface Section */
.tcg-wl-friendly {
    background: #F2F2F4;
    background: var(--tcg-gray-bg);
    padding: 114px 0;
    text-align: center;
    height: 725px;
    margin-bottom: 477px;
}

.tcg-wrapper .tcg-wl-friendly-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.7;
    max-width: 1200px;
    margin: 0 auto 19px;
    text-align: center;
}

/* Coverflow 輪播容器 */
.tcg-coverflow {
    position: relative;
    /* padding: 0 80px; */
    padding-top: 0px;
}

/* 輪播舞台：所有手機透過 absolute 定位疊在一起，由 JS 加 class 控制位置 */
.tcg-coverflow-stage {
    position: relative;
    width: 100%;
    height: 560px;
    margin: 0 auto;
}

/* 單張手機：預設隱藏（opacity:0），由位置 class 控制顯示 */
.tcg-coverflow-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 440px;
    border-radius: 20px;
    overflow: hidden;
    /* box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); */
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
    -ms-transform: translate(-50%, -50%) scale(0.6);
    transform: translate(-50%, -50%) scale(0.6);
}

/* 位置 class：center（中間大）、near-left/near-right（鄰近中等）、far-left/far-right（外側小） */

/* 中間：最大，z-index 最高 */
.tcg-coverflow-item--center {
    opacity: 1;
    pointer-events: auto;
    z-index: 5;
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

/* 左鄰近 */
.tcg-coverflow-item--near-left {
    opacity: 1;
    pointer-events: auto;
    z-index: 4;
    -webkit-transform: translate(calc(-50% - 280px), -50%) scale(0.82);
    -ms-transform: translate(calc(-50% - 280px), -50%) scale(0.82);
    transform: translate(calc(-50% - 280px), -50%) scale(0.82);
}

/* 右鄰近 */
.tcg-coverflow-item--near-right {
    opacity: 1;
    pointer-events: auto;
    z-index: 4;
    -webkit-transform: translate(calc(-50% + 280px), -50%) scale(0.82);
    -ms-transform: translate(calc(-50% + 280px), -50%) scale(0.82);
    transform: translate(calc(-50% + 280px), -50%) scale(0.82);
}

/* 左外側 */
.tcg-coverflow-item--far-left {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
    -webkit-transform: translate(calc(-50% - 520px), -50%) scale(0.68);
    -ms-transform: translate(calc(-50% - 520px), -50%) scale(0.68);
    transform: translate(calc(-50% - 520px), -50%) scale(0.68);
}

/* 右外側 */
.tcg-coverflow-item--far-right {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
    -webkit-transform: translate(calc(-50% + 520px), -50%) scale(0.68);
    -ms-transform: translate(calc(-50% + 520px), -50%) scale(0.68);
    transform: translate(calc(-50% + 520px), -50%) scale(0.68);
}

/* 左右箭頭 */
.tcg-wrapper .tcg-coverflow-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #E5222B;
    color: var(--tcg-red);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-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 12px rgba(0, 0, 0, 0.1);
    -webkit-transition: background 0.25s ease, color 0.25s ease;
    transition: background 0.25s ease, color 0.25s ease;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.tcg-wrapper .tcg-coverflow-arrow:hover {
    background: #E5222B;
    background: var(--tcg-red);
    color: #FFFFFF;
}

.tcg-coverflow-prev {
    left: 0;
}

.tcg-coverflow-next {
    right: 0;
}

/* 底部圓點指示器 */
.tcg-coverflow-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 36px;
    margin-top: 7px;
}

.tcg-wrapper .tcg-coverflow-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #C9C9D1;
    -webkit-transition: background 0.25s ease;
    transition: background 0.25s ease;
}

.tcg-wrapper .tcg-coverflow-dot--active {
    background: #E5222B;
    background: var(--tcg-red);
}

/* Coverflow 手機尺寸放大（僅 web） */
.tcg-wrapper .tcg-coverflow-stage {
    height: 700px;
}
.tcg-wrapper .tcg-coverflow-item {
    width: 335px;
    height: 645px;
    border-radius: 30px;
}
.tcg-wrapper .tcg-coverflow-item--center {
    -webkit-transform: translate(-50%, -50%) scale(1);
    -ms-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}
.tcg-wrapper .tcg-coverflow-item--near-left {
    -webkit-transform: translate(calc(-50% - 350px), -50%) scale(0.82);
    -ms-transform: translate(calc(-50% - 350px), -50%) scale(0.82);
    transform: translate(calc(-50% - 350px), -50%) scale(0.82);
}
.tcg-wrapper .tcg-coverflow-item--near-right {
    -webkit-transform: translate(calc(-50% + 350px), -50%) scale(0.82);
    -ms-transform: translate(calc(-50% + 350px), -50%) scale(0.82);
    transform: translate(calc(-50% + 350px), -50%) scale(0.82);
}
.tcg-wrapper .tcg-coverflow-item--far-left {
    -webkit-transform: translate(calc(-50% - 630px), -50%) scale(0.68);
    -ms-transform: translate(calc(-50% - 630px), -50%) scale(0.68);
    transform: translate(calc(-50% - 630px), -50%) scale(0.68);
}
.tcg-wrapper .tcg-coverflow-item--far-right {
    -webkit-transform: translate(calc(-50% + 630px), -50%) scale(0.68);
    -ms-transform: translate(calc(-50% + 630px), -50%) scale(0.68);
    transform: translate(calc(-50% + 630px), -50%) scale(0.68);
}


/* ==============================================================
   [Section: 10 Min CTA] 10分钟开站
   紅色漸層背景，改用 flex + flex-start，左右獨立不互相牽動
   ============================================================== */
.tcg-wl-tenmin {
    background: #E5222B;
    background: -webkit-linear-gradient(135deg, #FF3B45 0%, #D2101C 100%);
    background: linear-gradient(135deg, #FF3B45 0%, #D2101C 100%);
    padding: 174px 0;
    color: #FFFFFF;
    margin-bottom: 18px;
}
.tcg-wrapper .tcg-wl-tenmin {
    position: relative;
    overflow: hidden;
}

/* 底圖（僅 web） */
.tcg-wrapper .tcg-wl-tenmin-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.tcg-wrapper .tcg-wl-tenmin-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* 內容區 */
.tcg-wrapper .tcg-wl-tenmin-inner {
    position: relative;
    z-index: 1;
}

/* 文字 */
.tcg-wrapper .tcg-wl-tenmin-text {
    max-width: 490px;
    margin-left: 160px;
    margin-top: 2px;
    position: relative;
    top: 21px;
}

.tcg-wrapper .tcg-wl-tenmin-title {
    font-size: 54px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 28px;
}

.tcg-wrapper .tcg-wl-tenmin-desc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    margin: 0 0 40px;
}

/* ── [共用元件] 手機版無縫滾動帶 Marquee ── */
/* ==============================================================
   [Marquee] 手機版無縫滾動帶（國旗 / 功能圖示）
   ──────────────────────────────────────────────────────────
   原理：兩份相同長條圖並排（200% 寬），CSS animation 從 0 → -50%
         滾完一份後瞬間跳回 0%，視覺上無縫循環
   虛化：.tcg-m-marquee 加 mask-image 左右漸層遮罩
   ============================================================== */
.tcg-m-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 5px;
    /* 左右虛化遮罩（白色漸層，兩端 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: auto;           /* 由內容撐開，不固定 200% */
    height: 100%;
    -webkit-animation: tcgMMarquee 20s linear infinite;
    animation: tcgMMarquee 20s linear infinite;
}
.tcg-m-marquee-slide {
    flex: 0 0 auto;        /* 由圖片原始寬度決定 */
    height: 100%;
}
/* 國旗 / marquee 圖片：不受 max-width:100% 限制，保持原始尺寸 */
.tcg-m-marquee-slide img {
    max-width: none;
    display: block;
}
.tcg-m-marquee-slide .tcg-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

/* 國旗帶：高度 70px */
.tcg-m-marquee--flags {
    height: 70px;
}

/* 功能圖示帶：高度 100px */
.tcg-m-marquee--icons {
    height: 100px;
}

/* 從右往左滾動（預設）：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 20s linear infinite;
    animation: tcgMMarquee 20s linear infinite;
}
.tcg-m-marquee--flags-right .tcg-m-marquee-track {
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-animation: tcgMMarqueeRight 20s linear infinite;
    animation: tcgMMarqueeRight 20s linear infinite;
}

/* ── [共用元件] 手機版水平輪播 Swiper ── */
/* ==============================================================
   [Swiper] 手機版水平輪播（在地化界面用）
   ──────────────────────────────────────────────────────────
   功能：左右滑動切換、左右虛化遮罩、圓點指示器
   由 JS initMobileSwiper() 驅動
   ============================================================== */
.tcg-m-swiper {
    position: relative;
    margin-bottom: 40px;
}
.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: 10px;
    margin-top: 30px;
}
.tcg-m-swiper-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D0D0D0;
    cursor: pointer;
    transition: background 0.25s ease;
}
.tcg-m-swiper-dot--active {
    background: #E5222B;
}


/* ================================================================
   Mobile Version: White Label 頁面（white-label.html）專用樣式
   ================================================================ */

/* ── Hero：整張合成底圖 + 按鈕覆蓋（同 turnkey hero 結構） ── */
.tcg-m-wl-hero {
    position: relative;
}
.tcg-wrapper-mobile .tcg-m-wl-hero-title {
    position: absolute;
    top: 97px;
    left: 0;
    width: 100%;
    z-index: 2;
    font-size: 52px;
    font-weight: 800;
    color: #262626;
    text-align: center;
}
.tcg-m-wl-hero-bg {
    width: 100%;
}
.tcg-m-wl-hero-bg .tcg-img-placeholder {
    min-height: 900px;
    border-radius: 0;
}
.tcg-m-wl-hero-btn-wrap {
    position: absolute;
    bottom: 69px;
    left: 0;
    width: 100%;
    text-align: center;
}


/* ── WLP：什么是包网平台？ ── */
.tcg-m-wl-wlp {
    background: #FFFFFF;
    padding: 103px 0;
    text-align: center;
}
.tcg-wrapper-mobile .tcg-m-wl-wlp-title-zh {
    font-size: 54px;
    font-weight: 800;
    color: #262626;
    text-align: left;
    margin-bottom: 20px;
    padding-left: 39px;
    padding-top: 61px;
}
.tcg-m-wl-wlp-title-img {
    width: 100%;
    min-height: 120px;
    margin: 44px auto 53px;
    /* padding: 0px; */
}
.tcg-wrapper-mobile .tcg-m-wl-wlp-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    text-align: left;
    padding-left: 90px;
    padding-right: 90px;
}


/* ── GlobalMarket 外層包裝（內部複用 .tcg-m-tk-global-card） ── */
.tcg-m-wl-global {
    background: #F5F5F5;
    padding: 40px 0 60px;
}


/* ── GlobalMarket：全球市场卡片 ── */
.tcg-m-wl-global {
    background: #F5F5F5;
    padding: 150px 0;
    padding-bottom: 176px;
}
.tcg-m-tk-global-card {
    background: #FFFFFF;
    border-radius: 38px;
    padding: 50px 76px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding-bottom: 130px;
}
.tcg-wrapper-mobile .tcg-m-tk-global-title {
    font-size: 54px;
    font-weight: 800;
    color: #262626;
    line-height: 1.3;
    margin-bottom: 40px;
    text-align: center;
    margin-top: 63px;
}
.tcg-wrapper-mobile .tcg-m-tk-global-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    margin-bottom: 55px;
}
.tcg-m-tk-global-flags {
    margin-bottom: 30px;
}
.tcg-m-tk-global-btn-wrap {
    text-align: center;
    margin-top: 66px;
}
.tcg-m-btn--wide {
    display: block;
    width: 100%;
    text-align: center;
    top:350px!important;
}

/* ── Advantage Grid：2×N icon 卡片网格（复用 turnkey 结构） ── */
.tcg-m-tk-adv-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
}
.tcg-m-tk-adv-item {
    width: calc(50% - 12px);
    background: #FFFFFF;
    border-radius: 16px;
    padding: 30px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    text-align: center;
}
.tcg-m-tk-adv-icon {
    width: 80px;
    height: 80px;
    min-height: 80px !important;
    border-radius: 16px;
    margin: 0 auto 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;
    font-size: 32px;
}
.tcg-m-tk-adv-label {
    font-size: 27px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 8px;
    top: -82px;
    position: relative;
}
.tcg-wrapper-mobile .tcg-m-tk-adv-desc {
    font-size: 25px;
    color: #6B6B6B;
    line-height: 1.6;
    margin-top: -60px;
}

/* ── Security：最高安保級別（與首頁 .tcg-m-security 相同結構） ── */
.tcg-m-security {
    padding: 62px 0 147px;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
}
.tcg-wrapper-mobile .tcg-m-security-title {
    font-size: 55px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    margin-bottom: 55px;
    position: relative;
    z-index: 2;
}
.tcg-wrapper-mobile .tcg-m-security-desc {
    font-size: 26px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    margin: 0 auto 83px;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}
.tcg-m-security-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 85px 21px;
    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 35px;
}
.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;
}

/* ── Features：天成包网标准站功能（标题置中，复用 .tcg-m-tk-adv-grid） ── */
.tcg-m-wl-features {
    background: #FFFFFF;
    padding: 60px 0;
    position: relative;
    overflow: visible;   /* 允許裝飾圖標突出區塊上方 */
}
.tcg-wrapper-mobile .tcg-m-wl-features-title {
    font-size: 54px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 57px;
    margin-top: 193px;
}
/* ── Features 覆寫：移除 turnkey 共用的卡片外框，icon 保持原始尺寸 ── */
.tcg-m-wl-features .tcg-m-tk-adv-item {
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.tcg-m-wl-features .tcg-m-tk-adv-icon {
    width: auto;
    height: auto;
    min-height: 0 !important;
    border-radius: 0;
    margin: 0 auto 16px;
    display: block;
}

/* 左側跨區塊裝飾圖標：從上方 section 延伸下來 */
.tcg-m-wl-features-deco {
    position: absolute;
    top: -120px;
    left: 0px;
    z-index: 5;
}
.tcg-wrapper-mobile .tcg-m-wl-features-deco-img {
    width: 414px;
    height: 323px;
    min-height: 160px;
    background: transparent;
    border: none;
    margin-left: 0px;
}


/* （已移除舊的 .tcg-m-wl-security，改用首頁 .tcg-m-security） */


/* ── Localization：友善的本地化界面（與首頁 .tcg-m-local 相同結構） ── */
.tcg-m-local {
    padding: 138px 0 137px;
    background: #F7F7F8;
    text-align: center;
}
.tcg-wrapper-mobile .tcg-m-local-title {
    font-size: 58px;
    font-weight: 800;
    color: #262626;
    margin-bottom: 46px;
}
.tcg-wrapper-mobile .tcg-m-local-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 85px;
}
.tcg-m-local .tcg-m-btn {
    margin-bottom: 50px;
}
/* Coverflow 效果：中間大、兩側小 */
.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);
}


/* ── CTA：10分鐘開站（紅色背景，文字靠左） ── */
.tcg-m-wl-cta {
    position: relative;
    background: #E5222B url('https://tc-gaming.com/img/mobile/white label_solutions/solutions2_img_06_bg.png') no-repeat center center;
    background-size: cover;
    padding: 0;
    margin: 0;
    height: 1101px;
    overflow: hidden;
}
.tcg-m-wl-cta-inner {
    position: relative;
    z-index: 2;
    padding: 121px 87px;
    text-align: left;
}
.tcg-wrapper-mobile .tcg-m-wl-cta-title {
    font-size: 56px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 48px;
    text-align: left;
}
.tcg-wrapper-mobile .tcg-m-wl-cta-desc {
    font-size: 24px;
    color: rgba(255,255,255,0.85);
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: left;
}

/* （已移除舊的 .tcg-m-wl-interface-swiper，改用 .tcg-m-local） */

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