/* ==============================================================
   檔案名稱：turnkey_solutions-style.css
   功能說明：TC Gaming — 包網方案（Turnkey Solutions）頁面樣式表
   設計基準：1920px 固定寬度，透過 JS transform: scale() 等比縮放
   命名規則：
     - 共用元件：tcg- 前綴（與首頁一致）
     - 頁面專屬：tcg-ts- 前綴（ts = turnkey solutions）
   瀏覽器支援：Chrome / Edge / Safari / Firefox，IE11 盡量相容
   區塊對應：與 turnkey_solutions.html 的 8 個 Section 一一對應
   ============================================================== */


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

/* CSS 變數 */

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

     ※ 背景圖：在 .tcg-ts-hero 加上 background-image: url('xxx.jpg')
     ※ 高度：修改 min-height
     ※ 標題字級：修改 .tcg-ts-hero-title 的 font-size
   ============================================================== */
/* ==============================================================
   [圖片尺寸控制]（僅 web）
   ============================================================== */
.tcg-wrapper .tcg-ts-savings-illust img { max-width: 100%; height: auto; }
.tcg-wrapper .tcg-ts-feature-icon img { max-width: 100%; height: auto; }
.tcg-wrapper .tcg-ts-product-img img { max-width: 100%; height: auto; }
.tcg-wrapper .tcg-ts-why-deco img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
.tcg-wrapper .tcg-coverflow-item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.tcg-ts-flags-slide img { max-width: none; height: 100%; display: block; }

/* ==============================================================
   [Section: Hero]
   ============================================================== */
.tcg-ts-hero {
    position: relative;
    padding: 0px 0 80px;
    background: #F0F0F0;
    color: #262626;
    min-height: 600px;
    overflow: hidden;
    /* padding-top: 270px; */
    top: 0px;
}

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

.tcg-ts-hero-inner {
    position: relative;
    z-index: 2;
    margin-top: 234px;
    padding-left: 226px;
}

.tcg-ts-hero-content {
    max-width: 600px;
}

.tcg-ts-hero-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 40px;
    color: #262626;
    color: var(--tcg-text);
    padding-bottom: 97px;
}

.tcg-ts-hero-btn {
    margin-top: 20px;
}


/* ==============================================================
   [Section: Savings] 天成包網替您節省的比想像的更多
   白色區塊，上方圓角 60px，margin-top:-40px 蓋住 Hero 底部
   結構：標題 → 描述 → 兩張白色卡片（有圓角陰影）→ 右下角浮動裝飾
   卡片頂部有大型插圖（溢出卡片上方）
   可調整項目：
     ※ 圓角大小：修改 border-top-left-radius / border-top-right-radius
     ※ 卡片間距：修改 .tcg-ts-savings-cards 的 gap
     ※ 插圖尺寸：修改 .tcg-ts-savings-illust 內的 placeholder style
     ※ 裝飾圖位置：修改 .tcg-ts-savings-deco 的 bottom / right
   ============================================================== */
.tcg-ts-savings {
    position: relative;
    padding: 50px 0 120px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /*margin-top: 103px;*/
    z-index: 10;
}

/* 頁面通用 section 標題樣式 */
.tcg-ts-section-title {
    font-size: 54px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #262626;
    color: var(--tcg-text);
    padding-bottom: 42px;
}

.tcg-ts-savings-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 52px;
}

/* 描述文字（標題下方）
   需 .tcg-wrapper 前綴，贏過 .tcg-wrapper p { margin:0 } */
.tcg-wrapper .tcg-ts-savings-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.8;
    max-width: 1100px;
    margin: 0 auto 60px;
    text-align: center;
    padding-bottom: 42px;
}

/* 兩張卡片並排
   margin-top 留空間給插圖溢出卡片上方 */
.tcg-ts-savings-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 83px;
    margin-top: 80px;
}

/* 單張卡片：白底、圓角、陰影 */
.tcg-ts-savings-card {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 480px;
    flex: 0 0 599px;
    background: #FFFFFF;
    border-radius: 38px;
    box-shadow: 0 4px 24px rgb(0 0 0 / 17%);
    padding: 0 22px 76px;
    text-align: center;
    position: relative;
    /* 上方留空間給溢出的插圖 */
    padding-top: 0;
}

/* 大型插圖：溢出卡片上方
   ※ 之後替換 placeholder 為 <img>，寬高可在 HTML style 調整 */
.tcg-ts-savings-illust {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* 插圖往上偏移，溢出卡片頂部 */
    margin-top: -60px;
    margin-bottom: 20px;
}

.tcg-ts-savings-card-title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #262626;
    color: var(--tcg-text);
    padding-top: 13px;
    padding-bottom: 27px;
}

.tcg-ts-savings-card-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.65;
    text-align: center;
}


/* ==============================================================
   [Section: Why Choose] 為什麼選擇天成包網？
   白色背景，4 欄 × 3 列 feature grid（無卡片框，icon 用圓角方塊）
   右上角有浮動裝飾圖（absolute 定位）
   可調整項目：
     ※ 背景色：修改 .tcg-ts-why 的 background
     ※ Grid 欄數：修改 flex 寬度比例
     ※ 卡片間距：修改 gap
     ※ icon 尺寸：修改 .tcg-ts-feature-icon 的 width / height
     ※ 浮動裝飾圖位置：修改 .tcg-ts-why-deco 的 top / right / width / height
   ============================================================== */
.tcg-ts-why {
    background: #FFFFFF;
    padding: 42px 0;
    position: relative;
           /* 裝飾圖可能超出邊界，裁切掉 */
}

/* 右上角浮動裝飾圖
   ※ 之後替換 placeholder 為 <img>，可調整 top / right / width / height */
.tcg-ts-why-deco {
    position: absolute;
    top: -291px;
    right: 0;
    width: 520px;
    height: 337px;
    z-index: 0;
    pointer-events: none;   /* 不擋住下方元素的點擊 */
    z-index: 1;
}

.tcg-ts-why-inner {
    position: relative;
    z-index: 1;             /* 確保內容在裝飾圖之上 */
    text-align: center;
}

/* 特異度需 (0,2,0) 才能贏過 .tcg-wrapper p { margin:0 } 的 (0,1,1) */
.tcg-wrapper .tcg-ts-why-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.8;
    max-width: 1200px;
    margin: 0 auto 30px;
}

/* 4×3 Grid：使用 Flexbox wrap（IE11 相容）
   卡片無背景色、無邊框，純文字 + icon 排列 */
.tcg-ts-features-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px 0px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.tcg-ts-feature-card {
    /* (1920 - 120 padding - 90 gaps) / 4 ≈ 420px */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(25% - 23px);
    flex: 0 0 calc(25% - 23px);
    background: transparent;     /* 無背景色 */
    padding: 30px 24px;
    text-align: center;
}

/* icon 容器 */
.tcg-ts-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 0px;
}

.tcg-ts-feature-title {
    font-size: 27px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #262626;
    color: var(--tcg-text);
    margin: 0px;
    /* padding: 0px; */
}

.tcg-ts-feature-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.6;
    padding-top: 13px;
    text-align: center;
}

/* Features 文字獨立控制（僅 web） */
.tcg-wrapper .tcg-ts-feature-title {
    text-align: center;
}
.tcg-wrapper .tcg-ts-feature-desc {
    text-align: center;
}


/* ==============================================================
   [Section: Products] TCG包網提供什麼方案？
   白底，4 個產品卡堆疊排列，每張左圖右文
   ============================================================== */
.tcg-ts-products {
    background: #eaecef;
    padding: 0px 0;
    margin-top: 141px;
    padding-bottom: 119px;
}
.tcg-wrapper .tcg-ts-products {
    position: relative;
}
/* 裝飾圖（僅 web） */
.tcg-wrapper .tcg-ts-products-deco {
    position: absolute;
    top: -146px;
    left: 0;
    pointer-events: none;
    z-index: 0;
}
/* 獨立標題（僅 web） */
.tcg-wrapper .tcg-ts-products-title {
    font-size: 51px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 47px;
    color: #262626;
    color: var(--tcg-text);
    padding-top: 101px;
    padding-left: 16px;
}
/* 產品區塊描述文字（僅 web） */
.tcg-wrapper .tcg-ts-products-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.8;
    text-align: left;
    max-width: 1390px;
    margin: 0 0 50px;
    padding-left: 579px;
    padding-right: 0px;
    padding-bottom: 88px;
}

.tcg-ts-products-inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.tcg-ts-product-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #FAFAFB;
    background: #ffffff;
    border-radius: 35px;
    padding: 33px;
    padding-bottom: 29px;
    padding-left: 49px;
    margin-bottom: 19px;
    gap: 65px;
    -webkit-transition: box-shadow 0.25s ease;
    transition: box-shadow 0.25s ease;
    width: 1289px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.tcg-ts-product-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.tcg-ts-product-card:last-child {
    margin-bottom: 0;
}

.tcg-ts-product-img {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 260px;
    flex: 0 0 400px;
}

.tcg-ts-product-info {
    /* -webkit-box-flex: 1; */
    -ms-flex: 1 1 auto;
    /* flex: 1 1 auto; */
    /* margin: 0 auto; */
    /* height: 100%; */
    height: 230px;
}

.tcg-ts-product-title {
    font-size: 33px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #262626;
    color: var(--tcg-text);
    padding-bottom: 21px;
}

.tcg-ts-product-desc {
    font-size: 18px;
    color: #6B6B6B;
    color: var(--tcg-text-light);
    line-height: 1.8;
    width: 700px;
}


/* ==============================================================
   [Section: Partner CTA] 天成包網是您進軍全球市場的最佳夥伴
   結構：外層灰底 → 內層白色圓角框（含世界地圖背景）
         圓角框內：標題 → 描述 → 國旗無限滾動條 → Contact Us
   可調整項目：
     ※ 外層背景色：修改 .tcg-ts-partner 的 background
     ※ 圓角框圓角：修改 .tcg-ts-partner-box 的 border-radius
     ※ 背景圖：在 .tcg-ts-partner-box 加 background-image（並移除 .tcg-ts-partner-bg）
     ※ 國旗滾動速度：修改 @keyframes tcgFlagsMarquee 的 animation-duration
     ※ 國旗長條高度：修改 .tcg-ts-flags-marquee 的 height
   ============================================================== */
.tcg-ts-partner {
    background: #F2F2F4;
    background: #ffffff;
    padding: 119px 0;
}

/* 白色圓角框 */
.tcg-ts-partner-box {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 88px 80px;
    overflow: hidden;
    /* 之後加上世界地圖背景圖：
       background-image: url('world-map.png');
       background-repeat: no-repeat;
       background-position: center center;
       background-size: contain; */
    box-shadow: 0 4px 24px rgb(0 0 0 / 17%);
}

/* 世界地圖背景 placeholder（absolute 滿版覆蓋）
   之後替換為 .tcg-ts-partner-box 的 background-image，此元素可移除 */
.tcg-ts-partner-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
}
.tcg-wrapper .tcg-ts-partner-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.tcg-ts-partner-content {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 3px;
}

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

/* 國旗橫向無限滾動條
   原理：兩份相同的 slide 首尾相接，動畫從 translateX(-50%) 滾到 translateX(0%)
   ※ 高度可調：修改 height
   ※ 速度可調：修改 animation-duration（目前 30s） */
.tcg-ts-flags-marquee {
    width: 100%;
    height: 136px;
    overflow: hidden;
    margin-bottom: 40px;
}

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

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

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

/* 國旗滾動動畫：從左往右（-50% → 0%）
   因為有兩份相同的 slide，-50% 剛好是一份的寬度 */
@-webkit-keyframes tcgFlagsMarquee {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%);   transform: translateX(0%); }
}
@keyframes tcgFlagsMarquee {
    from { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%);   transform: translateX(0%); }
}

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


/* ==============================================================
   [Section: Customization] 定制化服務
   灰色背景，標題 + 描述 + coverflow 手機輪播
   輪播特色：中間大兩側小、底部圓點指示器、自動輪播
   可調整項目：
     ※ 背景色：修改 .tcg-ts-custom 的 background
     ※ 中間手機尺寸：修改 .tcg-coverflow-item--center 的 width / height
     ※ 兩側手機縮放：修改 --near / --far 的 scale 值
     ※ 自動輪播速度：修改 HTML data-autoplay 屬性（毫秒）
     ※ 切換動畫速度：修改 .tcg-coverflow-item 的 transition
   ============================================================== */
.tcg-ts-custom {
    background: #F2F2F4;
    background: #eaecef;
    padding: 123px 0;
    padding-bottom: 0px;
    margin-bottom: 507px;
}

.tcg-ts-custom-inner {
    text-align: center;
    background: #eaecef;
    height: 599px;
}

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

/* Coverflow 輪播容器 */
.tcg-coverflow {
    position: relative;
    padding: 0 80px;       /* 左右留空間給箭頭 */
}

/* 輪播舞台：所有手機透過 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;
    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: 12px;
    margin-top: 30px;
}

.tcg-wrapper .tcg-coverflow-dot {
    width: 12px;
    height: 12px;
    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);
}


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


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


/* ================================================================
   Mobile Version: Turnkey Solutions 頁面（turnkey_solutions.html）專用樣式
   設計基準：750px 固定寬度，透過 JS transform: scale() 等比縮放
   命名規則：tcg-m-tk- 前綴（tk = turnkey）
   ================================================================ */

/* ── Hero：整張合成底圖 + 按鈕覆蓋 ── */
.tcg-m-tk-hero {
    position: relative;
}
.tcg-m-tk-hero-title {
    position: absolute;
    top: 97px;
    left: 0px;
    width: 100%;
    z-index: 2;
    font-size: 52px;
    font-weight: 800;
    color: rgb(38, 38, 38);
    text-align: center;
}
.tcg-m-tk-hero-bg {
    width: 100%;
}
.tcg-m-tk-hero-bg .tcg-img-placeholder {
    min-height: 900px;
    border-radius: 0;
}
.tcg-m-tk-hero-btn-wrap {
    position: absolute;
    bottom: 69px;
    left: 0;
    width: 100%;
    text-align: center;
}


/* ── Savings：天成包网替您节省的比想像的更多 ── */
.tcg-m-tk-savings {
    background: #FFFFFF;
    padding: 60px 0px;
    text-align: center;
    padding-bottom: 7px;
}
.tcg-wrapper-mobile .tcg-m-tk-savings-title {
    font-size: 55px;
    font-weight: 800;
    color: #262626;
    line-height: 1.3;
    margin-bottom: 34px;
    margin-top: 54px;
}
.tcg-wrapper-mobile .tcg-m-tk-savings-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    text-align: left;
}


/* ── Card Section：时间 / 人力資源 icon 卡片 ── */
.tcg-m-tk-card-section {
    background: #FFFFFF;
    padding: 20px 0;
    padding-bottom: 0px;
}
.tcg-m-tk-info-block {
    position: relative;
    padding-top: 134px;       /* 留空間給上方突出的 icon */
    padding-left: 38px;
    padding-right: 38px;
}
.tcg-m-tk-info-icon-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
}
.tcg-m-tk-info-icon {
    width: auto;
    height: auto;
    min-height: 0 !important;
    border-radius: 0;
    display: block;
}
.tcg-m-tk-info-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 200px 45px 46px;
    text-align: center;
    box-shadow: 0 8px 19px 16px rgb(0 0 0 / 6%);
}
.tcg-wrapper-mobile .tcg-m-tk-info-card-title {
    font-size: 36px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 16px;
    margin-top: 10px;
}
.tcg-wrapper-mobile .tcg-m-tk-info-card-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    text-align: left;
}


/* ── WhyChoose：为什么选择天成包网？ ── */
.tcg-m-tk-why {
    background: #FFFFFF;
    padding: 180px 0;
    padding-bottom: 165px;
}
.tcg-wrapper-mobile .tcg-m-tk-why-title {
    font-size: 54px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    margin-bottom: 42px;
}
.tcg-wrapper-mobile .tcg-m-tk-why-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    margin-bottom: 82px;
    padding-right: 57px;
    padding-left: 57px;
    text-align: center;
}


/* ── Advantage Grid：2×N icon 卡片网格 ── */
.tcg-m-tk-adv-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 24px;
    row-gap: 109px;
}
.tcg-m-tk-adv-item {
    width: calc(50% - 12px);
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    text-align: center;
}
.tcg-m-tk-adv-icon {
    width: auto;
    height: auto;
    min-height: 0 !important;
    border-radius: 0;
    margin: 0 auto 0px;
    display: block;
}
.tcg-m-tk-adv-label {
    font-size: 26px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 8px;
}
.tcg-wrapper-mobile .tcg-m-tk-adv-desc {
    font-size: 25px;
    color: #6B6B6B;
    line-height: 1.6;
    padding-top: 21px;
}


/* ── Swiper 基礎樣式（共用：Solutions + Customization 輪播） ── */
.tcg-m-swiper {
    position: relative;
    margin-bottom: 0px;
    margin-top: 61px;
}
.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: 32px;
    /* transition 由 JS 動態控制 */
    /* margin-left 由 JS 動態計算：(750 - slideWidth) / 2 */
}
.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;
}


/* ── Solutions：天成包网提供什么方案？ ── */
.tcg-m-tk-solutions {
    background: #F5F5F5;
    padding: 135px 0;
    height: 1669px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.tcg-wrapper-mobile .tcg-m-tk-solutions-title {
    font-size: 53px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 20px;
}
.tcg-wrapper-mobile .tcg-m-tk-solutions-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    margin-bottom: 40px;
    padding-right: 55px;
    padding-left: 55px;
}

/* Solutions Swiper 卡片 */
.tcg-m-tk-comp-swiper .tcg-m-swiper-slide {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 520px;
    flex: 0 0 520px;
    /* width: 100px; */
    padding-top: 0px;
}
.tcg-m-tk-comp-card {
    background: #FFFFFF;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    padding-bottom: 0px;
    padding-top: 40px;
}
.tcg-m-tk-comp-card-img {
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}
.tcg-m-tk-comp-card-img img {
    display: block;
    margin: 0 auto;
}
.tcg-m-tk-comp-card-img .tcg-img-placeholder {
    min-height: 300px;
    border-radius: 0;
}
.tcg-m-tk-comp-card-body {
    padding: 40px 36px;
    width: 578px;
}
.tcg-wrapper-mobile .tcg-m-tk-comp-card-title {
    font-size: 37px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 12px;
    text-align: center;
}
.tcg-wrapper-mobile .tcg-m-tk-comp-card-desc {
    font-size: 25px;
    color: #6B6B6B;
    line-height: 1.7;
    padding-top: 10px;
}


/* ── GlobalMarket：进軍全球市场 ── */
.tcg-m-tk-global {
    background: #fdfefe;
    padding: 168px 0;
}
.tcg-m-tk-global-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 50px 36px;
    box-shadow: 0 2px 16px 4px rgb(0 0 0 / 8%);
    padding-bottom: 129px;
}
.tcg-wrapper-mobile .tcg-m-tk-global-title {
    font-size: 56px;
    font-weight: 800;
    color: #262626;
    line-height: 1.2;
    margin-bottom: 44px;
    text-align: center;
    margin-top: 66px;
}
.tcg-wrapper-mobile .tcg-m-tk-global-desc {
    font-size: 26px;
    color: #6B6B6B;
    line-height: 1.65;
    margin-bottom: 5px;
    padding-left: 40px;
    padding-right: 40px;
    text-align: center;
}
.tcg-m-tk-global-flags {
    margin-bottom: 69px;
}

/* ── Marquee 無限滾動（國旗帶） ── */
.tcg-m-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    -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;
    height: 100%;
    -webkit-animation: tcgMMarquee 20s linear infinite;
    animation: tcgMMarquee 20s linear infinite;
}
.tcg-m-marquee-slide {
    flex: 0 0 auto;
    height: 100%;
}
.tcg-m-marquee-slide img {
    max-width: none;
    display: block;
}
@-webkit-keyframes tcgMMarquee {
    from { -webkit-transform: translateX(0%); }
    to   { -webkit-transform: translateX(-50%); }
}
@keyframes tcgMMarquee {
    from { transform: translateX(0%); }
    to   { transform: translateX(-50%); }
}
@-webkit-keyframes tcgMMarqueeRight {
    from { -webkit-transform: translateX(-50%); }
    to   { -webkit-transform: translateX(0%); }
}
@keyframes tcgMMarqueeRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0%); }
}
.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%);
    margin-bottom: 3px;
}
.tcg-m-marquee--flags-left .tcg-m-marquee-track {
    display: flex;
    -webkit-animation: tcgMMarquee 20s linear infinite;
    animation: tcgMMarquee 20s linear infinite;
}
.tcg-m-marquee--flags-right .tcg-m-marquee-track {
    display: flex;
    -webkit-animation: tcgMMarqueeRight 20s linear infinite;
    animation: tcgMMarqueeRight 20s linear infinite;
}

.tcg-m-tk-global-btn-wrap {
    text-align: center;
}
.tcg-m-btn--wide {
    display: block;
    width: 100%;
    text-align: center;
}


/* ── Customization：定制化服务 ── */
.tcg-m-tk-custom {
    background: #eaecef;
    padding: 60px 0;
    padding-bottom: 39px;
}
.tcg-wrapper-mobile .tcg-m-tk-custom-title {
    font-size: 55px;
    font-weight: 800;
    color: #262626;
    text-align: center;
    margin-bottom: 50px;
    padding-top: 72px;
}
.tcg-wrapper-mobile .tcg-m-tk-custom-desc {
    font-size: 24px;
    color: #6B6B6B;
    line-height: 1.8;
    margin-bottom: 40px;
    padding-left: 44px;
    padding-right: 44px;
}
/* Coverflow 效果：中間大、兩側小 */
.tcg-m-tk-custom .tcg-m-swiper-viewport {
    margin-left: 0;
    margin-right: 0;
    overflow-x: hidden;
    overflow-y: visible;
    overflow: clip;               /* 現代瀏覽器：只裁水平 */
    overflow-clip-margin: 0px 0px 60px 0px;
}
.tcg-m-tk-custom .tcg-m-swiper-track {
    gap: 6px;
    padding-top: 35px;
    padding-bottom: 35px;
}
.tcg-m-tk-custom .tcg-m-swiper-slide {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 360px;
    flex: 0 0 360px;
    -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-tk-custom .tcg-m-swiper-slide--active {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
}