@import url("table.css");
/* ════════════════════════════════════════════════
   0. CSS 設計 Token（與全站共用設定同步）
════════════════════════════════════════════════ */
:root {
  /* ── 主色系（與全站共用設定對應）── */
  --black:     0 0 0;
  --white:     255 255 255;
  --primary:   10 39 77;         /* #0a274d Foundation Primary Blue */
  --secondary: 240 240 240;
  --warning:   204 0 0;          /* #cc0000 */
  --alert:     231 196 102;      /* #e7c466 */
  --success:   43 155 37;
  /* ── 表單系統擴充色（向後兼容舊變數名）── */
  --primary-mid:  30 80 150;
  --primary-pale: 232 239 250;
  --red:          204 0 0;       /* = --warning */
  --red-pale:     255 241 241;
  --red-bright:   220 40 40;
  --green:        43 155 37;     /* = --success */
  --gold:         231 196 102;   /* = --alert */
  /* ── 字體系統 ── */
  --font-main:    'Roboto', Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: 'Noto Sans TC', 'Roboto', sans-serif;
  --fontsize:     18px;
  /* ── 陰影系統 ── */
  --shadow-default: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --shadow-sm:      0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl:      0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  /* ── 表單專用陰影（使用新系統重定義）── */
  --shadow-input: var(--shadow-sm);
  --shadow-card:  var(--shadow-md);
  --shadow-login: var(--shadow-xl);
  /* ── 互動 ── */
  --ring-color:          rgba(10,39,77,0.5);
  --radius:              5px;
  --ease:                0.2s cubic-bezier(0.4,0,0.2,1);
  --transition-standard: all 0.3s ease;
}


/* ════════════════════════════════════════════════
   1. ctba-base.css 全域樣式（共用參數）
════════════════════════════════════════════════ */
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    background: white; color: rgba(var(--black)/.8); font-size: var(--fontsize);
    font-family: 'Bebas Neue', Gotham, "Helvetica Neue", Helvetica, Arial, "儷黑 Pro", "LiHei Pro", 'Noto Sans SC', "微軟正黑體", "Microsoft JhengHei", sans-serif;
    line-height: 1.75em; width: 100%; height: auto; margin: 0; padding: 0;
}
/* ── Shadow helpers ── */ 
.f-shadow-sm { --base-shadow: var(--shadow-sm); }
.f-shadow-md { --base-shadow: var(--shadow-md); }
.f-shadow-lg { --base-shadow: var(--shadow-lg); }

/* ── 標題字體系統 ── */
h1, h2, h3, h4, h5, h6 {
  color: rgba(var(--black), 0.85);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-top: 0;
}
h1 small, h2 small, h3 small,
h4 small, h5 small, h6 small { color: rgb(var(--secondary)); }
h1, .h1 { font-size: clamp(1.75rem, 5vw, 2.25rem); }
h2, .h2 { font-size: clamp(1.65rem, 4.5vw, 2rem); }
h3, .h3 { font-size: clamp(1.5rem, 4.25vw, 1.875rem); }
h4, .h4 { font-size: clamp(1.375rem, 4vw, 1.75rem); }
h5, .h5 { font-size: clamp(1.25rem, 3.5vw, 1.3rem); }
h6, .h6 { font-size: clamp(1rem, 3vw, 1.1rem); }
:focus { outline: 0; }
.anton-font { font-family: "Anton", sans-serif; }
p{ text-wrap: pretty; }
/* ── 連結 ── */
a { color: rgb(var(--black)); transition: all 0.5s ease 0.3s; }
a:hover, a:focus { color: rgb(var(--warning)); text-decoration: none; }
/*-- 內容容器 ---------------------------------------------------------------------------------*/
.row-container{ width: 100%; max-width: 100vw; margin: 0 auto;}
@media screen and (min-width: 64em){ 
  .row-container { width: 80%; max-width: 1360px;}
}
.inner-content-60 {
    width: 100%;       /* 手機版預設滿版 */
    max-width: 1500px; /* 基礎最大寬度上限 */
    margin: 0 auto;    /* 區塊置中 */
}
@media screen and (min-width: 64em) {
    .inner-content-60 {
        width: 60%;    /* 桌機版（1024px以上）縮減至 60% 寬度 */
    }
}
.content-wrapper{ background: rgba(var(--black)/.06); padding: 2rem 0;}

/*---  Title Underline  ---------------------*/
hr{ margin: 1rem 0 .5rem; border-bottom: 1px dotted rgba(var(--black)/.5); max-width: 100%;}
.separator-center::after { border-bottom: 0.125rem solid rgb(var(--warning)); margin-bottom: 1.5rem }
.separator-left::after { border-bottom: 0.2rem solid rgb(var(--warning)); }
.title-container, .title-divider {
  padding-bottom: 15px; 
  margin-bottom: 2rem;
  position: relative;
  display: block; /* 讓容器寬度隨文字長度變化 */
  /*font-weight: bold;*/
  
}
.title-container::after, .title-divider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* 線條延伸長度，100% 為與文字同寬 */
  height: 1px;
  background: rgba(var(--black)/.5);
}
.title-container::before, .title-divider::before {
  content: "";
  position: absolute;
  bottom: -1px;      /* 稍微向下偏移以覆蓋黑線 */
  left: 0;
  width: 60px;
  height: 4px;
  background-color: rgb(var(--warning));
  z-index: 1;        /* 確保紅線壓在黑線上 */
}
.collapse{ padding: 0;}


/*---   Button   ----------------------------------------------------------------------------------------*/
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--primary));
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-main);
    padding: 0.6rem 1.8rem;
    margin-bottom: 0;
    border-radius: var(--radius);
    border: none;
    cursor: pointer; 
    transition: var(--transition-standard);
    text-decoration: none;
    line-height: 1;          /* 確保文字垂直置中 */
    white-space: nowrap;     /* 強制不換行，保持一行 */
    cursor: pointer;
    gap: 6px;
}
.button:hover {
    transform: translateY(2px);
    filter: brightness(1.2);/* 按鈕Hover亮度變化*/
}

.button.primary { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: #fff; box-shadow: var(--shadow-sm); }
.button.primary:hover, .button.primary:focus { background: rgb(var(--primary-mid)); border-color: rgb(var(--primary-mid)); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.button.secondary { background: rgb(var(--secondary)); border-color: rgba(var(--black)/.15); color: rgb(var(--primary)); }
.button.secondary:hover { background: rgba(var(--primary)/.5); border-color: rgba(var(--primary)/.3); }
.button.success { background: rgb(var(--success)); border-color: rgb(var(--success)); }
.button.warning { background: rgb(var(--warning)); border-color: rgb(var(--warning)); color: white}
.button.warning:hover, .button.warning.active { background: rgba(var(--warning)/.1); border: 1px solid rgba(var(--warning)/.05);color: rgb(var(--warning)); box-shadow: none; }
.button.alert   { background: rgb(var(--alert)); border-color: rgb(var(--alert)); color: rgb(var(--primary)); }
.button.hollow  { background: white; border-width: 1.5px; box-shadow: var(--shadow-sm);}
.button.hollow:hollow{ background: rgb(var(--primary-pale)) }
.button.hollow.primary { background: white; border-color: rgba(var(--primary)/.5); color: rgb(var(--primary)); box-shadow: var(--shadow-sm); }
.button.hollow.primary:hover { background: rgba(var(--primary)/.1); color: rgb(var(--primary)); border-color: rgba(var(--primary)/.2); transform: none; }
.button.small  { font-size: .8rem;  padding: .35rem 1rem;   height: 34px; }
.button.tiny   { font-size: .72rem; padding: .25rem .75rem; height: 28px; }

/*  回上一頁  */
/*.back-btn { gap: 8px;}*/
.back-btn.button.hollow, .view-more.button.hollow {
    --base-shadow: var(--shadow-lg);
    box-shadow: var(--base-shadow);
    transition: all 0.3s ease;
    display: inline-block; }
.back-btn.button.hollow:hover, .view-more.button.hollow:hover{ 
    background: rgb(var(--primary));
    color: white;
    --base-shadow: var(--shadow-md);
    box-shadow: var(--base-shadow);
    transform: translateX(5px);
}

/* ----------------------------------------------------------------------------------------------------------
   Header
------------------------------------------------------------------------------------------------------------*/
header{ background: rgb(var(--white)); }
.top-bar{ background: rgb(var(--white)); padding: 0 1rem 0; }
@media print, screen and (min-width: 40em) { .top-bar{ padding: .5rem;}}

/* --  SubIndex主標題 ----------------------------------------------------------- */
.page-header { position: relative; width: 100%; height: 400px; overflow: hidden; background: black; }
@media print, screen and (min-width: 40em) { .page-header { height: 350px;}}
.header-banner-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.page-header-content { 
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; z-index: 2; color: #fff; text-align: center;
}
.page-header-content h1 { font-size: 3rem; color: white; font-weight: 800; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.5);}
.breadcrumbs { background: transparent; display: flex; justify-content: center; margin-bottom: 0.5rem; list-style: none; padding: 0;}
.breadcrumbs li { display: flex; align-items: center; color: rgba(var(--white)/.65); font-size: 0.95rem; }
.breadcrumbs li a { display: inline-flex;
  align-items: center;
  text-decoration: none;
   color: rgba(var(--white)/.65); font-weight: bold;}
.breadcrumbs li a:hover { color: rgba(var(--white)/ 1);}
.breadcrumbs .disabled { color: white;}
.breadcrumbs li:not(:last-child)::after { color: rgba(var(--white)/.65); content: "/"; margin: 0 10px; }
.breadcrumbs li a i { margin-right: 8px;}
/* --- 獨立麵包屑區 --- */
.breadcrumb-wrapper {
    --grad-from: #111827;
    --grad-via: #1f2937;
    --grad-to: #374151; 
    --base-shadow: var(--shadow-md);
    background: linear-gradient(to right, var(--grad-from), var(--grad-via), var(--grad-to)) !important;
    --base-shadow: var(--shadow-md);
    /* 初始狀態無 Ring */
    --ring-offset-shadow: 0 0 #0000;
    --ring-shadow: 0 0 #0000;
    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--base-shadow);
    transition: all 0.2s ease-in-out;
    padding: 12px 0;
}
ul.breadcrumbs.single-page-breadcrumbs {
    display: flex;
    justify-content: flex-start !important;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap; 
}
.single-page-breadcrumbs li {
    display: flex;
    align-items: center;
    color: rgba(var(--warning)/ .8);
    font-size: 0.85rem;
}
.single-page-breadcrumbs .home-icon, .page-header .home-icon{
    width: 20px;
    fill: rgba(var(--white)/ .65);
    margin-right: 6px;
    vertical-align: middle;
}
/*.single-page-breadcrumbs li a {
    color: rgba(var(--white)/ .65);
    font-weight: bold;
}
.single-page-breadcrumbs li a:hover {
    color: rgb(var(--warning));
}*/
.single-page-breadcrumbs li:not(:last-child)::after {
    content: "/";
    color: white;
    margin: 0 12px;
    opacity: 0.5;
}
@media screen and (max-width: 63.9375em) {
    .breadcrumb-wrapper {
        padding: 10px 0.625rem;
    }
}


/*--  委員會成員  ----------------------------------------------------------------*/
.ctba-member-accordion .accordion-title::before,
.ctba-member-accordion .accordion-title::after s{
display: none !important; /* 移除預設 + - 符號 */
content: none !important;
}
.ctba-member-accordion {
border: none;
background: transparent;
margin: 2rem 0;
list-style: none;
}
.ctba-member-accordion .accordion-item {
border: 1px solid rgba(var(--black)/.1);
margin-bottom: 12px;
border-radius: 4px;
overflow: hidden;
}
/* 標題：左右對齊 */
.ctba-member-accordion .accordion-title {
background: white;
padding: 1.2rem 1.5rem;
border-radius: 3px;
color: rgb(var(--primary));
font-weight: bold;
font-size: 1.1rem;
position: relative;
}
/* 展開狀態背景 */
.ctba-member-accordion .is-active .accordion-title { 
    background: linear-gradient(135deg, 
        rgb(10, 39, 77) 0%, 
        rgb(30, 70, 120) 20%,
        rgb(10, 39, 77) 100%
    );
    color: white;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), /* 頂部微弱高光線 */
                0 4px 15px rgba(10, 39, 77, 0.3);      /* 外部柔和陰影 */
    position: relative;
    overflow: hidden;
 }
 .ctba-member-accordion .is-active .accordion-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: 0.8s;
}
.ctba-member-accordion .is-active .accordion-title:hover::after {
    left: 100%; 
}
.chevron-icon { transition: transform 0.3s ease; flex-shrink: 0;}
.is-active .chevron-icon { transform: rotate(180deg); color: white}
.member-card {
    background: white;
    border: 1px solid rgba(var(--black)/.075);
    padding: .5rem;
    text-align: center;
    transition: 0.3s;
}
.member-card:hover {
    transform: translateY(-5px);
    --base-shadow: var(--shadow-md);
    box-shadow: var(--base-shadow);
}
.member-img {
/*background: #f5f5f5;
aspect-ratio: 3 / 4;
overflow: hidden;*/
width: 100px; 
height: 100px;
margin: 0 auto 15px;
border-radius: 50%; 
overflow: hidden;  
border: 5px solid rgba(var(--black)/.05); 
}
.member-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
}
.member-info {
padding: 0 10px 0;
}
.member-info .position {
display: block;
color: rgb(var(--warning));
font-size: 0.85rem;
font-weight: bold;
}
.member-info .name {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
color: rgba(var(--black)/.8);
}
.member-info p{ margin-bottom: .5rem;}
.memner-container{ 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px; 
}
@media screen and (max-width: 40em) {
    .memner-container{ 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        row-gap: 5px; 
        column-gap: 5px; 
    }
  }

/* --  賽事搜尋 ------------------------------------------------------------------------------------------- */
.tournament-search-bar {
    position: relative;
    z-index: 10;
    margin-top: -60px; 
    padding: 0 0.625rem;  
    background: rgba(var(--black)/.03);
}
.page-competitions .tournament-search-bar {
    position: relative;
    z-index: 10;
    margin-top: -60px; 
    padding: 0 15px;
}
.search-item {
    margin-bottom: 10px;
    width: 100%;
}
.search-item i{ margin-right: 6px }
.search-item:last-child {
    margin-bottom: 0;
}
.search-item label {
    display: block;
    font-weight: 800;
    color: white;
    font-size: .85rem;
    margin-bottom: 6px;
}

.search-item .en-label {
    color: rgba(var(--white)/.6);
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 2px;
    /*font-family: 'Anton', sans-serif;*/
}
.search-select, 
.search-btn {
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 15px;
    box-sizing: border-box;
    border: 2px solid #e0e0e0;
    font-size: 1rem;
    font-weight: bold;
}
.search-select {
    background-color: #f9f9f9;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}
.search-btn {
    background: black;
    color: #fff;
    border-color: black;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.search-btn:hover {
    background: rgb(var(--primary));
    border-color: rgb(var(--primary));
}
.search-flex-container {
    display: flex;
    flex-direction: column; /* 手機版直式 */
    background: rgba(var(--black)/.6);
    padding: 15px 30px;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    gap: 0;
    /*border-left: 8px solid #000; */
}
/*-- 桌機版橫向排列 --- */
@media screen and (min-width: 64em) {
    .search-flex-container {
        flex-direction: row;
        align-items: flex-end;
        gap: 0;
        padding: 20px 20px 30px;
    }
    .page-competitions .page-header { height: 350px;}
    .tournament-search-bar {
        margin-top: -80px; /* 桌機版偏移量加大 */
    }

    .search-item { margin-bottom: 0; flex: 0 0 200px; }
    .search-item.grow { flex: 1; }
    .search-item.action { flex: 0 0 150px; }
}
.search-select, .search-btn {
    height: 55px; 
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 1.05rem;
}
.search-btn {
    background: #000;
    color: #fff;
    width: 100%;
    font-weight: 800;
    transition: all 0.3s;
}
.search-btn:hover {
    background: rgb(var(--primary));
    transform: translateY(0px);
}


/* -- 內頁共用佈局 ------------------------------------------------------------- */
.bg-page{ background: url(../image/wall-light.png) repeat; background-attachment: fixed; opacity: 1; }
.bg-gray{ background: rgba(var(--black)/.035);}
.content-main { padding: 2rem .625rem; }
.content-column { flex: 1; min-width: 0; /* 防止 Flex 項目溢出 */}
@media screen and (min-width: 64em) {
    .content-main { padding: 2rem 0 3rem 0;}
    .main-flex-layout { display: flex; align-items: flex-start; gap: 30px;}
}
@media screen and (max-width: 960px) {
    .main-flex-layout { flex-direction: column; gap: 0; }
    /*.sidebar-column { display: none;} 
    .bs-team .sidebar-column { display: block;}*/
    .content-column { width: 100%; }
}
@media screen and (max-width: 63.9375em) {
    .sidebar-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-right: 0 !important; 
        margin-bottom: 20px;
    }
}
/* --- 左側邊欄 ---------------------------------------------------------------- */
.sidebar-column, .sidebar.sidebar-column { 
    flex: 0 0 270px; 
    min-width: 270px; 
    padding-right: 40px; 
    box-sizing: border-box; 
    margin-bottom: 4rem;
}
.sidebar-nav { 
    background: #fff; 
    position: relative; 
    border-radius: 4px 4px 0 0; 
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); 
}
/* 底部三角形裝飾 */
.sidebar-nav::after {
    content: ""; 
    display: block; 
    width: 100%; 
    height: 30px; 
    background-color: #fff;
    position: absolute; 
    bottom: -30px; 
    left: 0; 
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* 側邊欄標題 */
.sidebar-header { 
    background: linear-gradient(135deg, 
        rgb(10, 39, 77) 0%, 
        rgb(30, 70, 120) 50%,
        rgb(10, 39, 77) 100%
    ); 
    color: #fff; 
    padding: .7rem 1.2rem; 
    font-weight: bold; 
    text-align: center; 
    border-radius: 4px 4px 0 0;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1); 
}
.sidebar-header, .sidebar-header h3{ color: white; font-size: 1.1rem}
.sidebar-menu { list-style: none; margin: 0; padding: 0 0 1rem 0;}
.sidebar-menu li a { 
    display: flex; 
    align-items: center; 
    padding: 0.8rem 1.1rem; 
    color: rgba(var(--black)/.8); 
    font-weight: bold; 
    text-decoration: none; 
    border-bottom: 1px solid #f0f0f0; 
    transition: 0.3s; 
}
.sidebar-menu li a span.number {
    font-family: 'Anton', sans-serif;
    margin-left: auto; /* 推至右側 */
    font-size: 1.1rem;
}
.sidebar-menu li a:hover { 
    background: rgba(var(--black)/.03); 
    color: rgb(var(--warning)); 
    padding-left: 1.8rem; 
}
.sidebar-menu li.active a { color: rgb(var(--warning)); }
/* --- 手機版：下拉選單 (紅底白字反轉) --- */
.mobile-menu-wrap { 
    display: block; padding: 0 var(--mobile-space); 
    margin: 0 0.625rem 0 !important; position: relative;
}
.sidebar-menu li i{ margin-right:8px;}

/* 任務重點：將編號 2 (各級賽事) 預設隱藏 (桌機版) */
[data-toggle="mobile-cate-dropdown"] {
    display: none;
}
/* 同時隱藏該組的容器以免佔位 */
.mobile-menu-wrap:has([data-toggle="mobile-cate-dropdown"]) {
    display: none;
}
.mobile-dropdown-btn {
    width: 100%; height: 52px; padding: 0 20px; background: #fff; border: 2px solid rgb(var(--primary));
    border-radius: 6px; color: rgb(var(--primary)); font-weight: bold; font-size: 1.1rem;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.mobile-custom-dropdown {
    width: 100% !important; 
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    background-color: rgb(var(--primary)) !important; border: none !important; padding: 0 !important;
    margin-top: 2px !important; border-radius: 3px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); z-index: 100;
    transform: none !important;
}
.mobile-custom-dropdown ul.menu {
    border-radius: 0 0 6px 6px;
    overflow: hidden; /* 確保子項目不會超出圓角 */
}
.mobile-custom-dropdown ul.menu li a {
    background-color: rgb(var(--white)) !important; color: rgb(var(--primary)) !important;
    padding: 1rem 1.5rem; font-weight: bold; border-bottom: 1px solid rgba(var(--black)/ .15);
    transition: all 0.2s; display: block;
}
.mobile-custom-dropdown ul.menu li:last-child a {
    border-bottom: none;
}
/* 狀態切換：白底紅字 (品牌色) */
.mobile-custom-dropdown ul.menu li a:hover,
.mobile-custom-dropdown ul.menu li.active a {
    background-color: rgba(var(--primart)/.6) !important; 
    color: rgb(var(--warning)) !important;
}
/* 移除 Foundation 預設的小箭頭 */
.dropdown-pane::before, 
.dropdown-pane::after { 
    display: none !important; 
}
.mobile-dropdown-btn {
    color: rgb(var(--primary)); /* 文字與 SVG 同步變色 */
}

/* 懸停或選單開啟時的狀態 */
.mobile-dropdown-btn:hover,
.mobile-dropdown-btn[aria-expanded="true"] {
    color: rgb(var(--warning)); /* 變色時，SVG 會自動跟著變為警告色 */
}
/* 下拉選單內的圖示 */
.dropdown-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin-left: 0.5rem;
}

/* --- 手機版選單容器修正 --- */
@media screen and (max-width: 63.9375em) {
    .mobile-menu-wrap {
        display: block; /* 確保在手機版顯示 */
        padding: 0 !important;
        /* 使用 margin 確保與螢幕邊緣的距離 */
        margin: 0 !important; 
    }
    /* 任務重點：在手機版將編號 2 (各級賽事) 顯示出來 */
    [data-toggle="mobile-cate-dropdown"] { display: flex;}
    .mobile-menu-wrap:has([data-toggle="date-dropdown"]) { padding: 0 !important;}
    .mobile-menu-wrap:has([data-toggle="mobile-cate-dropdown"]) { display: block; padding-bottom: 1.2rem !important;}
    /* 下拉選單寬度修正 */
    .mobile-custom-dropdown {
        width: 100% !important; /* 滿版對齊父層 margin */
        left: 0 !important;
        transform: none !important; /* 防止 Foundation JS 位移干擾 */
        margin-top: 5px !important;
    }
}

/* 全站 SVG 通用設定 */
.icon-svg {
    width: 1em;           
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    flex-shrink: 0;
    fill: currentColor;   /* 關鍵：讓實心圖示自動跟隨文字顏色 */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 針對線條SVG */
.icon-svg.is-stroke {
    fill: none;
    stroke: currentColor; /* 讓線條自動跟隨文字顏色 */
}
.icon-svg.is-fill {
    fill: currentColor;
    stroke: none; /* 關閉外框，防止變胖 */
}


/* --- 右側內容區 ------------------------------------------------------------------------------------------ */
.filter-tabs { margin-bottom: 1rem; padding-bottom: 1rem; display: flex; justify-content: center; gap: 3px;}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tabs .button { 
    font-size: .85rem; border-radius: var(--radius); border: 1px solid rgba(var(--black)/.1); 
    background: white; color: rgb(var(--black)/.8); font-weight: bold; 
    margin:0 0 .5rem; padding: .4rem 1rem; transition: all 0.3s ease; 
    box-shadow: var(--shadow-md);}
.filter-tabs .button:hover{ 
    background: rgb(var(--warning)); color: white;
    box-shadow: var(--shadow-xl); transform: translatey(-1px);}
.filter-tabs .button.active { background: rgb(var(--warning)); color: #fff; border-color: rgb(var(--warning)); }
@media screen and (max-width: 960px) {
    /*.main-flex-layout { flex-direction: column; gap: 0; }
    .sidebar-column { display: none;} 
    .content-column { width: 100%; }*/
    /*.mobile-menu-wrap { display: block; }*/
    .filter-tabs { padding: 0 var(--mobile-space) var(--mobile-space) 0; display: block;/*justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;*/}
    .filter-tabs .button { white-space: nowrap; /* 文字不斷行 */ flex-shrink: 0; /* 按鈕不被壓縮 */}
    /*.grid-container { padding: 0 !important; max-width: 100%; }
    .grid-x.grid-margin-x { margin-left: var(--mobile-space) !important; margin-right: var(--mobile-space) !important; }*/
    /*.cell { padding: 0 0 20px 0 !important; } */
    .page-header { height: 250px; }
    .page-header-content h1 { font-size: 2.2rem; }
}

@media screen and (max-width: 63.9375em) {
    /*.sidebar-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-right: 0 !important; 
        margin-bottom: 20px;
    }*/
    .sidebar-nav {
        width: 100%;
        border-radius: 4px; 
    }
    .sidebar-menu {
        width: 100%;
    }
    .sidebar-menu li a {
        width: 100%;
        padding: 1rem 1.5rem; /* 手機版點擊區域加大 */
    }
   /* .sidebar-nav::after {
        display: none; 
    }*/
}

@media screen and (min-width: 64em) {
    .large-up-5 > .cell {
        flex: 0 0 20%;
        max-width: 20%;
        width: 20%;
    }

    /* 縮小卡片間隔，同時確保左右兩側齊頭齊尾 */
    /*.grid-margin-x.large-up-5 {
        margin-left: -10px;  
        margin-right: -10px;
        width: calc(100% + 20px); 
    }

    .grid-margin-x.large-up-5 > .cell {
        padding: 0; 
        margin-left: 0;
        margin-right: 0;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 8px;
    }*/
}

/* =============================================================================
   通用卡片核心系統 (Universal Card System)
   適用：賽事卡片、球隊卡片、賽事訊息橫式卡片、球員卡片
   結構：.gallery-card > .image-wrap + .card-content + .card-footer
   變體：.h-card（橫式）、.v-card（直式）
   情境：.player、.team、.sports-news-container、.sports-albumn
============================================================================= */

/* ── 1. 基礎卡片 ─────────────────────────────────────────────────────────── */
.gallery-card {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    background: white;
    border-radius: 3px;
    border: 1px solid rgba(var(--black)/.1);
    overflow: hidden;
    padding: 8px;
    text-decoration: none !important;
    --base-shadow: var(--shadow-md);
    box-shadow: var(--base-shadow);
    transition: all 0.3s ease;
}
.gallery-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--alert)/.5);
    --base-shadow: var(--shadow-lg);
    box-shadow: var(--base-shadow);
    cursor: pointer;
}

/* ── 2. 圖片區塊 ─────────────────────────────────────────────────────────── */
.gallery-card .image-wrap {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--black)/.1);
    margin-bottom: 1rem;
}
@media screen and (min-width: 64em) { .gallery-card .image-wrap { margin-bottom: 0;}}
.gallery-card .image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}
.gallery-card:hover .image-wrap img { transform: scale(1.05); }

/* 圖片暗色遮罩（player-card 不套用） */
.gallery-card:not(.player-card) .image-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(0,0,0,0.2);
    transition: background 0.3s ease;
}
.gallery-card:not(.player-card):hover .image-wrap::after { background: rgba(0,0,0,0); }

/* ── 3. 分類標籤 ─────────────────────────────────────────────────────────── */
.category-badge {
    position: absolute;
    top: 0; left: 0;
    z-index: 10;
    padding: 2px 20px 2px 13px;
    background: rgba(var(--black)/.9);
    color: white;
    font-size: 0.85rem;
    font-weight: bold;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}
.gallery-card:hover .category-badge { color: white; }

/* ── 4. 卡片標題、內文色彩 ───────────────────────────────────────────────── */
.gallery-card,
.gallery-card:hover span { color: rgba(var(--black)/.8); }
.gallery-card .card-title {
    color: rgb(var(--primary));
    padding: 0;
    transition: var(--transition-standard);
}
.gallery-card:hover .card-title { color: rgb(var(--warning)); }

@media screen and (min-width: 64em) {
    .gallery-card .card-title { padding: 0; }
}

/* ── 5. 卡片底部 ─────────────────────────────────────────────────────────── */
.card-footer {
    border-top: 1px solid rgba(var(--black)/.1);
    padding: 0.2rem 1rem 0;
    text-align: right;
}
.card-footer .btn-detail {
    color: rgb(var(--warning));
    font-size: 0.85rem;
    font-weight: bold;
}

/* =============================================================================
   橫式卡片 .h-card — 賽事訊息
============================================================================= */
.gallery-card.h-card { flex-direction: column; }

@media screen and (min-width: 640px) {
    .gallery-card.h-card { flex-direction: row; }
    .gallery-card.h-card .image-wrap {
        flex: 0 0 300px;
        max-width: 40%;
    }
    .gallery-card.h-card .card-content {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 25px 40px;
    }
}

/* =============================================================================
   直式卡片 .v-card — 賽事列表、球員、球隊、賽事新聞
============================================================================= */
.gallery-card.v-card { flex-direction: column; }

/* 圖片比例：預設 1:1 */
.gallery-card.v-card .image-wrap           { aspect-ratio: 1 / 1; }
.sports-news-container .gallery-card.v-card .image-wrap { aspect-ratio: 16 / 9; }
.sports-albumn .gallery-card.v-card .image-wrap         { aspect-ratio: 4 / 3; }

.gallery-card.v-card .card-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 0 0;
}
@media screen and (max-width: 640px) {
    .sports-news-container .gallery-card.v-card .card-content{ padding-top:0;}
}
.gallery-card.v-card .card-title {
    font-weight: 700;
    text-align: left;
    padding: 0.35rem 0 .6rem;
    border-bottom: 1px solid rgba(var(--black)/.1);
}

/* ── 球員卡片 (.player) ── */
.player .gallery-card .image-wrap img     { object-position: top center; }
.player .gallery-card.v-card .card-content { background: rgba(var(--black)/.06); }
.player .gallery-card.v-card .card-title   { text-align: center; font-size: 1.2rem; padding-bottom: .7rem}
.player .category-badge {
    background: rgba(var(--warning)/.9);
    font-size: 1rem;
    font-weight: 400;
}

/* ── 球隊卡片 (.team) ── */
.team .gallery-card.v-card h4 { padding-bottom: 0.5rem; }
.team .gallery-card.v-card .card-title {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: rgb(var(--primary));
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom:0;
}
.team .gallery-card.v-card:hover .card-title { color: rgb(var(--warning)); }

/* =============================================================================
   卡片內資訊列（.info-item / .detail-list）
============================================================================= */
.info-item,
.detail-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.2rem;
    font-family: 'Roboto', sans-serif;
}
.detail-list { padding: 0 8px; }
.detail-list li { font-size: 0.9rem; }
.info-item .amount { color: rgb(var(--warning)); font-weight: 900; }
.text-info { width: 100%; }

/* ── 盃賽資訊欄（.match-info-banner） ── */
.info-grid { padding: 0.5rem 0; }
.match-info-banner .info-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.match-info-banner .info-item {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(var(--black)/.09);
}
.match-info-banner .info-item:last-child { border-bottom: none; }
.match-info-banner .info-item small { font-size: 1rem; line-height: 1.2; }
@media screen and (min-width: 640px) {
    .match-info-banner .info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding-top: 1rem;
    }
    .match-info-banner .info-item {
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding-bottom: 0;
        border-bottom: none;
    }
    .match-info-banner .info-item span {
        width: auto;
        margin-top: 0;
        padding-left: 0;
        line-height: 1;
    }
}
/*-- 次標題 --*/
.sub-title {
    background: linear-gradient(135deg, 
        rgb(180, 140, 60) 0%, 
        rgb(255, 230, 150) 45%, 
        rgb(231, 196, 102) 100%
    );
    border-left: 8px solid rgba(var(--white)/.6); 
    padding: 6px 50px 6px 15px;
    /*margin-bottom: 1rem;*/
    display: inline-flex;
    align-items: center;
    gap: 8px;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); /* 稍微縮小斜角比例，視覺更穩重 */
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rm;
}

/*--  INDEX最新賽事、最新消息、社群貼文  -------------------------------------------------------*/
.competitions{ background: rgba(var(--black)/.05); padding: 2rem 1.5rem 3rem;}
.latestnews{ background: rgb(var(--white)); padding: 2rem 1.5rem 3rem;}
.social-media{ background: url(../image/bg-baseball.jpg) top center; background-size: cover;  filter: grayscale(40%); padding: 2rem 1.5rem 3rem; }
@media screen and (min-width: 64em){ 
    .competitions{ padding: 3rem;}
    .social-media{ padding: 3rem; }
    h2.section-title{ font-size: 2rem; margin-bottom: 1.2rem}
    .latestnews{ padding: 3rem;}
}
.competitions-container{}
h2.section-title{ font-size: 1.8rem; font-style: italic; margin-bottom: 1.8rem}
.section-subtitle{ font-size: 16px; color: rgb(var(--warning));font-weight: 300;}
.social-media .section-subtitle{ --primary: 21 169 206; color: rgb(var(--primary)) }
.competitions .filter-tabs{ justify-content: center}
.competitions .filter-tabs .button:hover {}
.competitions-body, .inner-page .competitions-body, .team, .player, .latestnews-container{ gap: 20px;}
.inner-page .latestnews-container{ gap: 10px;}
.sports-albumn{ gap: 6px;}
.competitions-body, .inner-page .competitions-body, .player, .sports-albumn, .latestnews-container{ display: grid; grid-template-columns: 1fr;}
.team{ display: grid; grid-template-columns: 1fr 1fr;}
.inner-page .latestnews-container{ grid-template-columns: 1fr;}
@media screen and (min-width: 40em) {
    .competitions-body, .team{ grid-template-columns: 1fr 1fr 1fr 1fr;}
    .inner-page .competitions-body{ grid-template-columns: 1fr 1fr 1fr;}
    .team, .player{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
    .player{ grid-template-columns: 1fr 1fr 1fr 1fr;}
    .sports-albumn{ grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
    .latestnews-container{ grid-template-columns: 1fr 1fr;}
    .inner-page .latestnews-container{ grid-template-columns: 1fr;}
}
/*-- Index：賽事新聞SLIDER ------------------------------------------------------*/
.hero-section {
  width: 100%;
  max-width: 100%;
  padding: 48px 0;
  display: grid;
  grid-template-columns: 1fr;   /* 手機：強制單欄滿版 */
  grid-template-rows: auto auto;
  grid-template-areas:
  "logo"
  "slider";
  align-items: center;
  justify-items: center; 
  gap: 32px;
}
@media (min-width: 1024px) {
    .hero-section {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr;
        grid-template-areas: "logo slider";
        gap: 0;
        padding: 56px 0;
    }
}
@media (min-width: 1280px) {
    .hero-section {
        grid-template-columns: 1fr 2.5fr;
    }
}
.main-wrapper {
    position: relative;
    /*height: 800px;*/
    margin: 0 auto;
    width: 100%;
    background-image: url('https://media.nownews.com/nn_media/thumbnail/2024/11/1732460309679-1a81b072424941368666124f4716c5a1-800x533.webp?unShow=false');
    background-size: cover;
    background-position: center;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}
.main-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 46, 94, 0.8);
    z-index: 0;
}
@media screen and (min-width: 40em) {
    .main-wrapper {
        height: 600px;
        margin: 0 auto;
        width: 100%;
        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    }
}
.col-logo {
  grid-area: logo;
  position: relative;
  z-index: 20;
  width: 80%;              /* 手機：撐滿欄寬 */
  display: flex;
  flex-direction: column;
  align-items: center;      
  justify-content: center;
  padding: 24px 36px 0;
  /*gap: 0;*/
}
@media screen and (min-width: 40em) { .col-logo{ width: 70%; gap: 16px;} }
.logo-wrap {
  width: clamp(140px, 1  8vw, 220px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.col-slider {
  grid-area: slider;
  width: 100%;              
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ── Owl stage 垂直置中 ── */
.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.owl-carousel .owl-item {
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-item.center { z-index: 10; } /* col-logo z-index:20 在上 */

/* ══════════════════════════════════════
   CARD — 手機：直式 3:4
══════════════════════════════════════ */
.slide-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    cursor: pointer;
    margin: 0 -20px;
    transform: scale(0.60);
    filter: blur(5px) brightness(0.52);
    opacity: 0.9;
    transition:
    transform  0.55s cubic-bezier(.22,.84,.2,1),
    filter     0.55s ease,
    opacity    0.55s ease,
    box-shadow 0.55s ease;
}
.owl-item.is-prev .slide-card {
    transform: scale(0.60) perspective(450px) rotateY(14deg);
    transform-origin: right center;
}
.owl-item.is-next .slide-card {
    transform: scale(0.60) perspective(450px) rotateY(-14deg);
    transform-origin: left center;
}

  .owl-item.center .slide-card {
      transform: scale(1) rotateY(0deg) !important;
      filter: blur(0) brightness(1) !important;
      opacity: 1 !important;
      box-shadow:
      0 28px 80px rgba(0,0,0,0.6),
      0 0 0 1.5px rgba(255,255,255,0.18);
  }

/* ══════════════════════════════════════
    CARD — 桌機：橫式 16:9
══════════════════════════════════════ */
@media (min-width: 1024px) {
    .slide-card {
        aspect-ratio: 16 / 9;
        margin: 0 -100px;
        transform: scale(0.62);
        filter: blur(6px) brightness(0.50);
    }
    .owl-item.is-prev .slide-card {
        transform: scale(0.62) perspective(600px) rotateY(11deg);
        transform-origin: right center;
    }
    .owl-item.is-next .slide-card {
        transform: scale(0.62) perspective(600px) rotateY(-11deg);
        transform-origin: left center;
    }
    .owl-item.center .slide-card {
        transform: scale(1) rotateY(0deg) !important;
        filter: blur(0) brightness(1) !important;
    }
}

/* ── 圖片 ── */
.slide-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ── Caption ── */
.slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 60px 20px 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.owl-item.center .slide-caption {
  opacity: 1;
  transform: translateY(0);
}
.slide-tag {
  display: inline-block;
  background: rgb(var(--warning));
  color: rgb(var(--white));
  font-size: 14px;
  font-weight: 700;
  padding: 0px 16px;
  border-radius: 20px;
  margin-bottom: 9px;
  letter-spacing: 0.05em;
}
.slide-title {
  color: rgb(var(--white));
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  margin-bottom: 6px;
}
.slide-sub {
  color: rgba(255,255,255,0.70);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* ── Dots ── */
/* Owl 原生 dots 容器 */
.owl-dots {
  margin-top: 24px !important;
  text-align: center !important;
  line-height: 1 !important;
}
/* 每顆 dot 按鈕 */
.owl-dot {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 0 4px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
}
/* dot 圓點本體 */
.owl-dot span {
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  background: rgba(255,255,255,0.35) !important;
  border-radius: 50px !important;
  margin: 0 !important;
  transition: width 0.35s ease, background 0.35s ease, border-radius 0.35s ease !important;
}
/* active dot → 長方形 */
.owl-dot.active span {
  width: 28px !important;
  height: 9px !important;
  background: rgb(var(--white)) !important;
  border-radius: 5px !important;
  transform: none !important;
}
/* ── 左右箭頭樣式（slide-1、photo-slider、slide-2 共用）── */
.owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,.35) !important;
  border-radius: 50% !important;
  border: none !important;
  color: #fff !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  z-index: 10;
}
.owl-nav button:hover {
  background: rgba(0,0,0,.6) !important;
}
.owl-nav .owl-prev { left: 10px; }
.owl-nav .owl-next { right: 10px; }
.owl-carousel { position: relative; }

/* ── slide-1 專用 SVG 箭頭 ── */
.slide-1 .owl-nav button span { display: none; }   /* 隱藏預設文字 */
.slide-1 .owl-prev::after,
.slide-1 .owl-next::after {
  content: '';
  display: block;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.slide-1 .owl-prev::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.slide-1 .owl-next::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* ── slidewrapper：廣告 Banner 輪播容器 ── */
.slidewrapper {
  overflow: hidden;   /* 防止 owl dots 區域撐出底部空白 */
  line-height: 0;     /* 消除 img 下方的基線空隙 */
  font-size: 0;
}
.slidewrapper img {
  display: block;     /* 移除 inline img 預設空隙 */
  width: 100%;
}
/* 廣告輪播不顯示導點（dots 佔位是底部空白主因）*/
.slide-1 .owl-dots { display: none !important; }

/*--  首頁：社群貼文  -----------------------------------------------------------------------*/
.grid-sizer { width: calc(33.333% - 11px); }
.gutter-sizer { width: 16px; }/* Masonry 讀取此寬度作為 gutter */
.post-card {
    width: calc(33.333% - 11px); 
    height: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
    overflow: hidden;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .grid-sizer, .post-card { width: calc(50% - 8px); }
    .gutter-sizer { width: 16px; }
}
@media (max-width: 480px) {
    .grid-sizer, .post-card { width: 100%; }
    .gutter-sizer { width: 0; }
}
.post-card:hover {
    transform: scale(0.98);
}
.post-card iframe {
    display: block;
    width: 100%;
    border: none;
}
.social-link {
    display: inline-block;
    margin: 0 15px;
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}
.icon-text {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* 圖示與文字間距 */
}
.social-icon { transition: transform 0.3s ease; /* color: #fff; 預設白色 */}
.social-link:hover .social-icon { transform: scale(1.2);}
.fb-link:hover { color: rgb(var(--primary));}
.ig-link:hover { color: rgb(var(--warning));}



/*---------------------------------------------------------------------------------------------------------
  NewList
---------------------------------------------------------------------------------------------------------*/
.news-list-card {
    display: flex;
    align-items: center; 
    background: #fff;
    margin-bottom: 20px;
    border-radius: 3px;
    border: 1px solid #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    text-decoration: none !important;
    overflow: hidden;
    height: 100%;
    padding: 0;
}
/*@media screen and (max-width: 63.9375em) {
    .news-list-card {
        margin-bottom: 1rem;
    }
}*/
.news-list-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* 左側：日期盒 */
.news-date-box {
    flex-shrink: 0;
    width: 90px;
    background: rgba(var(--black)/.02);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 25px; 
    padding-bottom: 0;
    border-right: 1px solid rgba(var(--black)/.03);
    align-self: stretch;
}
.news-date-box .day {
    font-size: 2rem;
    color: rgb(var(--primary));
    line-height: 1;
}
.news-date-box .month-year {
    font-size: 0.8rem;
    color: rgba(var(--black)/.4);
    margin-top: 5px;
}

/* 中間：內容區 */
.news-content-box {
    flex-grow: 1;
    padding: 0 20px/*25px 20px 0 20px*/;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.news-label-wrapper {
    display: none; 
    margin-bottom: 10px;
}
/* 只有在首頁時才顯示 */
.home-page .news-label-wrapper {
    display: block;
}
.news-label {
    display: inline-block;
    background: rgb(var(--alert)); 
    color: black;
    padding: 8px 20px 5px 10px;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1;
    /* 右側斜角效果 */
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.news-title {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(var(--black)/.8);
    margin: 0;
    line-height: 1.5;
    /* 兩行省略號 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-list-card:hover .news-title{ color: rgb(var(--primary))}
/* 右側：箭頭圖示 */
.news-arrow-icon {
    flex-shrink: 0;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

/* 取代原本的 svg 選擇器 */
.news-arrow-icon::after {
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    background-color: rgba(var(--black)/ 0.8);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M754.752 480H160a32 32 0 1 0 0 64h594.752L521.344 777.344a32 32 0 0 0 45.312 45.312l288-288a32 32 0 0 0 0-45.312l-288-288a32 32 0 1 0-45.312 45.312L754.752 480z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M754.752 480H160a32 32 0 1 0 0 64h594.752L521.344 777.344a32 32 0 0 0 45.312 45.312l288-288a32 32 0 0 0 0-45.312l-288-288a32 32 0 1 0-45.312 45.312L754.752 480z'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Hover 效果 */
.news-list-card:hover .news-arrow-icon::after {
    background-color: rgb(var(--warning)); /* 變為不透明 */
    transform: translateX(8px);           /* 箭頭右移 */
}


/* --- 檔案下載 -------------------------------------------------------------------------------- */
.download-container{ background: rgba(var(--primary)/.035); padding: 30px 30px 15px;}
.download-container .icon-wrap{ line-height: 01; color: rgb(var(--primary));}
.download-container hr{ border-bottom: 1px dashed rgba(var(--primary)/1);}
.download-list{ display: grid; grid-template-columns: 1fr;}
@media screen and (min-width: 40em) {
    .download-list{ 
        display: grid;
        grid-template-columns: 1fr 1fr; gap: 0 10px;
    }
}
.download-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid rgba(var(--black)/0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    text-decoration: none !important;
    /* 關鍵：確保在 grid 內即便字數不同也能等高 */
    height: calc(100% - 20px); 
}
.download-card:hover {
    background: rgba(var(--warning)/.05);
    border-color: rgba(var(--warning)/.1);
    transform: translateY(5px);
    box-shadow: 0 0 0 rgba(var(--black)/ 0.15);
}
.download-card:hover .file-name {
    color: rgba(var(--warning)/.8);
}
.download-info {
    flex-grow: 1;
    padding-right: 20px;
}
.file-name {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(var(--black)/.8);
    margin-bottom: 5px;
    line-height: 1.4;
    transition: color 0.3s ease;
}
/* 右側：下載 ICON */
.download-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-pale)/.5);
    color: rgba(var(--black)/.8);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.download-card:hover .download-icon {
     background: rgb(var(--white));
     color: rgb(var(--primary));
}
/*.download-card:hover .download-icon svg {
    fill: rgb(var(--warning));
}*/
@media screen and (max-width: 639px) {
    .download-card {
        padding: 20px;
    }
}

/* ----------------------------------------------------------------------------------------------------
   Footer
------------------------------------------------------------------------------------------------------*/
.site-footer { background-color: white; font-size: .85rem;}
.footer-info { background: rgb(var(--primary)); padding: 4rem 0; }
/* 標題設定 */
.footer-info h3 { color: white; font-size: 1.1rem; font-weight: bold; margin-bottom: 1.2rem; }
/* 基本文字設定 */
.footer-info p, .footer-info span, .footer-info a { font-size: 1rem; line-height: 1.6; color: rgba(var(--white)/.6);}
.footer-info a { color: rgb(var(--white)); transition: 0.3s; text-decoration: none; }
.footer-info a:hover { color: rgb(var(--warning)); text-decoration: none; }
/* 三大區塊 Flex 佈局 */
.main-footer-grid { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between; margin: 0 auto !important; }
.footer-about { flex: 0 0 30%; }
.footer-links { flex: 0 0 32%; }
.footer-contact { flex: 0 0 28%; text-align: right; }
.footer-contact i{ font-size: 1rem; color: white; margin-right: 5px }
/* --- 快速連結與服務專區對齊設定 --- */
.footer-links-subgrid { display: flex !important; gap: 2.5rem; margin: 0 !important; }
.footer-links ul.menu.vertical { margin-left: 0; }
.footer-links ul.menu.vertical li { margin-bottom: 0.4rem;}
.footer-links ul.menu.vertical li a { padding: 0; display: inline-block;}
.footer-bottom { padding: 0 0 1rem; text-align: center; }
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .main-footer-grid { column-gap: 2rem; }
    .footer-about { flex: 0 0 35%; }
    .footer-contact { flex: 0 0 32%; }
}
@media screen and (max-width: 767px) {
    .main-footer-grid { flex-wrap: wrap !important;}
    .footer-about, .footer-links, .footer-contact { flex: 0 0 100% !important; text-align: center; margin-bottom: 3rem; }
    .footer-links-subgrid { justify-content: center; }
    .contact-item { justify-content: center; }
    .login-section { margin: 10px auto; }
}
 /* 紅色斜線裝飾條 */
.diagonal-divider {
    height: 15px;
    /* 1. 將角度從 45deg 改為 -45deg (或 135deg 也可以)，讓斜線方向反轉。
       2. 將原本的間距 10px/20px 縮小為 5px/10px，讓線條變細且更密集。
    */
    background: repeating-linear-gradient(-45deg, #cc0000, #cc0000 5px, #fff 5px, #fff 10px);
    border-bottom: 5px solid #cc0000;
}
.footer-divider { 
    height: 15px;
    /* 這裡使用 45deg 與導覽列的 -45deg 形成鏡像 */
    background: repeating-linear-gradient(45deg, #cc0000, #cc0000 5px, #fff 5px, #fff 10px);
    border-top: 5px solid #cc0000;
    margin-bottom: 1.7rem; 
}
/* --- SVG 圖示統一規範(社群、側邊選單、最新消息、各級賽事ICON)  -------------------------------------------------- */
.info-item svg, .social-icons svg, .contact-item svg, 
.sidebar-menu svg, .news-arrow-icon svg { 
    width: 1.1em; height: 1.1em; flex-shrink: 0; transition: all 0.3s ease;
}
.info-item svg, .contact-item svg, .sidebar-menu svg { margin-right: 5px;}
.social-icons { margin-top: 1.5rem; display: flex; }
.social-icons a {
    --white: 240 240 240;
    background: rgb(var(--white)); width: 36px; height: 40px; 
    display: inline-flex; align-items: center; justify-content: center; 
    margin-right: 12px; 
    clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%);
    transition: transform 0.2s, background 0.3s;
}
.social-icons .ig-icon{ padding-bottom: 6px; }
.social-icons a:hover { --white: 220 220 220; background: rgb(var(--white)); transform: translateY(-3px); }
.social-icons a.fb-icon svg, .social-icons a.fb-icon i { fill: rgb(var(--primary)); stroke: none; margin-top: -5px;}
.social-icons a.ig-icon svg { fill: none; stroke: rgb(var(--primary)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: -5px;}
/*.contact-item { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 0; gap: 10px; }*/
.contact-item svg { stroke: rgb(var(--white)); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.info-item svg { stroke: rgb(var(--black)); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.footer-about .social-icons { 
    margin-top: 1.5rem; 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    list-style: none;
    padding: 0;
}  
@media screen and (min-width: 64em) {
    .footer-about .social-icons { 
        justify-content: flex-start; 
    }
}
.footer-about .social-icons a{ background: rgba(var(--white)/.65);}
.footer-about .social-icons a:hover {
    background:rgba(var(--white)/.8);; 
    /* transform: translateY(-2px); */
}

/* 基礎 Icon 樣式 */
.icon {
  display: inline-block;
  width: 1.1em;   
  height: 1.1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* 顏色類別 */
.icon-blue { background: rgb(var(--primary)); }
.icon-white { background: #ffffff; }
.icon-gray { background: rgba(var(--black)/.9); }

.icon-calendar {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon-svg is-fill' viewBox='0 0 1024 1024'%3E%3Cpath d='M128 384v512h768V192H768v32a32 32 0 1 1-64 0v-32H320v32a32 32 0 0 1-64 0v-32H128v128h768v64zm192-256h384V96a32 32 0 1 1 64 0v32h160a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h160V96a32 32 0 0 1 64 0zm-32 384h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m192-192h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m192-192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon-svg is-fill' viewBox='0 0 1024 1024'%3E%3Cpath d='M128 384v512h768V192H768v32a32 32 0 1 1-64 0v-32H320v32a32 32 0 0 1-64 0v-32H128v128h768v64zm192-256h384V96a32 32 0 1 1 64 0v32h160a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h160V96a32 32 0 0 1 64 0zm-32 384h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m192-192h64a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m192-192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64m0 192h64a32 32 0 1 1 0 64h-64a32 32 0 1 1 0-64'/%3E%3C/svg%3E");
}
.icon-map {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 1024 1024'%3E%3Cpath d='M800 416a288 288 0 1 0-576 0c0 118.14 94.53 272.13 288 456.58C705.47 688.13 800 534.14 800 416M512 960C277.31 746.69 160 565.31 160 416a352 352 0 0 1 704 0c0 149.31-117.31 330.69-352 544'/%3E%3Cpath d='M512 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256m345.6 192L960 960H672v-64H352v64H64l102.4-256zm-68.93 0H235.33l-76.8 192h706.94z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 1024 1024'%3E%3Cpath d='M800 416a288 288 0 1 0-576 0c0 118.14 94.53 272.13 288 456.58C705.47 688.13 800 534.14 800 416M512 960C277.31 746.69 160 565.31 160 416a352 352 0 0 1 704 0c0 149.31-117.31 330.69-352 544'/%3E%3Cpath d='M512 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256m345.6 192L960 960H672v-64H352v64H64l102.4-256zm-68.93 0H235.33l-76.8 192h706.94z'/%3E%3C/svg%3E");
}
.icon-fb {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 32 32'%3E%3Cpath d='M19.25 2C15.31 2 13 4.08 13 8.83V13H8v5h5v12h5V18h4l1-5h-5V9.67C18 7.88 18.58 7 20.26 7H23V2.2c-.47-.06-1.86-.2-3.75-.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 32 32'%3E%3Cpath d='M19.25 2C15.31 2 13 4.08 13 8.83V13H8v5h5v12h5V18h4l1-5h-5V9.67C18 7.88 18.58 7 20.26 7H23V2.2c-.47-.06-1.86-.2-3.75-.2'/%3E%3C/svg%3E");
}
.icon-ig {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EInstagram icon%3C/title%3E%3Cpath d='M12 0C8.74 0 8.33.02 7.05.07a9 9 0 0 0-2.91.56c-.79.3-1.46.72-2.13 1.38S.94 3.35.63 4.14c-.3.77-.5 1.64-.56 2.91S0 8.74 0 12s.02 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13a6 6 0 0 0 2.13 1.38c.77.3 1.64.5 2.91.56S8.74 24 12 24s3.67-.01 4.95-.07a9 9 0 0 0 2.91-.56 6 6 0 0 0 2.13-1.38 6 6 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91S24 15.26 24 12s-.01-3.67-.07-4.95a9 9 0 0 0-.56-2.91 6 6 0 0 0-1.38-2.13A6 6 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56A84 84 0 0 0 12 0m0 2.16c3.2 0 3.59.02 4.85.07 1.17.06 1.8.25 2.23.42.56.21.96.47 1.38.9.42.41.68.81.9 1.37.16.43.36 1.06.4 2.23.07 1.27.08 1.65.08 4.85s-.02 3.59-.08 4.85a7 7 0 0 1-.42 2.23c-.22.56-.48.96-.9 1.38-.41.42-.82.68-1.38.9-.42.16-1.06.36-2.23.4-1.27.07-1.65.08-4.86.08s-3.59-.02-4.86-.08a7 7 0 0 1-2.23-.42 4 4 0 0 1-1.38-.9 4 4 0 0 1-.9-1.38 7 7 0 0 1-.42-2.23c-.05-1.26-.06-1.65-.06-4.84 0-3.2.01-3.6.06-4.87A7 7 0 0 1 2.6 4.9c.2-.57.48-.96.9-1.38s.8-.69 1.38-.9A7 7 0 0 1 7.1 2.2c1.27-.04 1.65-.06 4.86-.06zm0 3.68a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32M12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8m7.85-10.4a1.44 1.44 0 1 1-2.89 0 1.44 1.44 0 0 1 2.89 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3EInstagram icon%3C/title%3E%3Cpath d='M12 0C8.74 0 8.33.02 7.05.07a9 9 0 0 0-2.91.56c-.79.3-1.46.72-2.13 1.38S.94 3.35.63 4.14c-.3.77-.5 1.64-.56 2.91S0 8.74 0 12s.02 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.72 1.46 1.38 2.13a6 6 0 0 0 2.13 1.38c.77.3 1.64.5 2.91.56S8.74 24 12 24s3.67-.01 4.95-.07a9 9 0 0 0 2.91-.56 6 6 0 0 0 2.13-1.38 6 6 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91S24 15.26 24 12s-.01-3.67-.07-4.95a9 9 0 0 0-.56-2.91 6 6 0 0 0-1.38-2.13A6 6 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56A84 84 0 0 0 12 0m0 2.16c3.2 0 3.59.02 4.85.07 1.17.06 1.8.25 2.23.42.56.21.96.47 1.38.9.42.41.68.81.9 1.37.16.43.36 1.06.4 2.23.07 1.27.08 1.65.08 4.85s-.02 3.59-.08 4.85a7 7 0 0 1-.42 2.23c-.22.56-.48.96-.9 1.38-.41.42-.82.68-1.38.9-.42.16-1.06.36-2.23.4-1.27.07-1.65.08-4.86.08s-3.59-.02-4.86-.08a7 7 0 0 1-2.23-.42 4 4 0 0 1-1.38-.9 4 4 0 0 1-.9-1.38 7 7 0 0 1-.42-2.23c-.05-1.26-.06-1.65-.06-4.84 0-3.2.01-3.6.06-4.87A7 7 0 0 1 2.6 4.9c.2-.57.48-.96.9-1.38s.8-.69 1.38-.9A7 7 0 0 1 7.1 2.2c1.27-.04 1.65-.06 4.86-.06zm0 3.68a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32M12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8m7.85-10.4a1.44 1.44 0 1 1-2.89 0 1.44 1.44 0 0 1 2.89 0'/%3E%3C/svg%3E");
}
.icon-phone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='28' viewBox='0 0 22 28'%3E%3Ctitle%3Ephone2%3C/title%3E%3Cpath d='M22 19.38c0 .56-.25 1.65-.48 2.17-.33.76-1.2 1.26-1.91 1.65-.92.5-1.86.8-2.9.8-1.46 0-2.77-.6-4.1-1.08q-1.43-.5-2.73-1.3a26 26 0 0 1-7.5-7.5q-.8-1.29-1.3-2.73C.59 10.06 0 8.75 0 7.3c0-1.04.3-1.98.8-2.9.39-.7.89-1.58 1.65-1.9C2.97 2.25 4.06 2 4.63 2q.15-.01.32.05c.33.1.68.87.83 1.19q.74 1.35 1.5 2.67c.25.4.72.9.72 1.39 0 .95-2.83 2.34-2.83 3.19 0 .42.4.97.61 1.34a15.5 15.5 0 0 0 6.4 6.4c.37.21.92.6 1.34.6.84 0 2.23-2.83 3.18-2.83.49 0 .99.47 1.4.72q1.32.76 2.67 1.5c.31.16 1.08.5 1.18.83q.06.16.05.33z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='28' viewBox='0 0 22 28'%3E%3Ctitle%3Ephone2%3C/title%3E%3Cpath d='M22 19.38c0 .56-.25 1.65-.48 2.17-.33.76-1.2 1.26-1.91 1.65-.92.5-1.86.8-2.9.8-1.46 0-2.77-.6-4.1-1.08q-1.43-.5-2.73-1.3a26 26 0 0 1-7.5-7.5q-.8-1.29-1.3-2.73C.59 10.06 0 8.75 0 7.3c0-1.04.3-1.98.8-2.9.39-.7.89-1.58 1.65-1.9C2.97 2.25 4.06 2 4.63 2q.15-.01.32.05c.33.1.68.87.83 1.19q.74 1.35 1.5 2.67c.25.4.72.9.72 1.39 0 .95-2.83 2.34-2.83 3.19 0 .42.4.97.61 1.34a15.5 15.5 0 0 0 6.4 6.4c.37.21.92.6 1.34.6.84 0 2.23-2.83 3.18-2.83.49 0 .99.47 1.4.72q1.32.76 2.67 1.5c.31.16 1.08.5 1.18.83q.06.16.05.33z'/%3E%3C/svg%3E");
}
.icon-mail {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ctitle%3Email%3C/title%3E%3Cpath d='m2 5.28 5.62 3.93c.23.16.53.17.76 0L14 5.28V12q0 .28-.2.47c-.2.19-.29.2-.47.2H2.67q-.28-.01-.47-.2C2 12.28 2 12.18 2 12zM.67 3.98V12a2 2 0 0 0 2 2h10.66a2 2 0 0 0 2-2V3.99a2 2 0 0 0-2-1.99H2.67a2 2 0 0 0-2 1.99m13.26-.28L8 7.85 2.07 3.7l.13-.17q.18-.19.47-.2h10.66a.7.7 0 0 1 .6.37'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ctitle%3Email%3C/title%3E%3Cpath d='m2 5.28 5.62 3.93c.23.16.53.17.76 0L14 5.28V12q0 .28-.2.47c-.2.19-.29.2-.47.2H2.67q-.28-.01-.47-.2C2 12.28 2 12.18 2 12zM.67 3.98V12a2 2 0 0 0 2 2h10.66a2 2 0 0 0 2-2V3.99a2 2 0 0 0-2-1.99H2.67a2 2 0 0 0-2 1.99m13.26-.28L8 7.85 2.07 3.7l.13-.17q.18-.19.47-.2h10.66a.7.7 0 0 1 .6.37'/%3E%3C/svg%3E");
}
.icon-arrow-up {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ctitle%3Echevron-up%3C/title%3E%3Cpath d='m31.18 23.82-10-10a1.66 1.66 0 0 0-2.36 0l-10 10a1.66 1.66 0 1 0 2.36 2.36L20 17.36l8.82 8.82a1.66 1.66 0 1 0 2.36-2.36'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ctitle%3Echevron-up%3C/title%3E%3Cpath d='m31.18 23.82-10-10a1.66 1.66 0 0 0-2.36 0l-10 10a1.66 1.66 0 1 0 2.36 2.36L20 17.36l8.82 8.82a1.66 1.66 0 1 0 2.36-2.36'/%3E%3C/svg%3E");
}
.icon-arrow-dn{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 -4.5 20 20'%3E%3Ctitle%3Earrow_down %5B%23339%5D%3C/title%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M20 1.39 18.6 0 9.98 8.26l-.92-.88L1.43.06 0 1.4 9.99 11z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 -4.5 20 20'%3E%3Ctitle%3Earrow_down %5B%23339%5D%3C/title%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M20 1.39 18.6 0 9.98 8.26l-.92-.88L1.43.06 0 1.4 9.99 11z'/%3E%3C/svg%3E");
}
.icon-arrow-l{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='currentColor' d='M341 149l373 363-373 363 42 43 414-406L383 106z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='currentColor' d='M341 149l373 363-373 363 42 43 414-406L383 106z'/%3E%3C/svg%3E");
}
.icon-back{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6.5 6.5 18 18M15 6H6.34c-.2 0-.36.16-.36.37V15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23323232' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6.5 6.5 18 18M15 6H6.34c-.2 0-.36.16-.36.37V15'/%3E%3C/svg%3E");
}
.icon-user {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M7 14a5 5 0 0 0-5 5v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-3a5 5 0 0 0-5-5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11M7 14a5 5 0 0 0-5 5v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-3a5 5 0 0 0-5-5z'/%3E%3C/svg%3E");
}
.icon-edu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='800' height='800' viewBox='0 0 260 188'%3E%3Cpath d='M134.3 109.2 202 83.8V146c0 13.4-32.2 24.3-72 24.3S58 159.4 58 146V83.8l67.9 25.4 4.2 1.6zM130.1 98 258 50 130.1 2 2 50l20 7.5v81.8c-4.7 2.2-8 7.1-8 12.7v34h28v-34c0-5.7-3.3-10.6-8.1-12.8V61.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='800' height='800' viewBox='0 0 260 188'%3E%3Cpath d='M134.3 109.2 202 83.8V146c0 13.4-32.2 24.3-72 24.3S58 159.4 58 146V83.8l67.9 25.4 4.2 1.6zM130.1 98 258 50 130.1 2 2 50l20 7.5v81.8c-4.7 2.2-8 7.1-8 12.7v34h28v-34c0-5.7-3.3-10.6-8.1-12.8V61.9z'/%3E%3C/svg%3E");
}
.icon-money {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 20 20'%3E%3Cpath fill='none' d='M0 0h20v20H0z'/%3E%3Cpath d='M10.6 9c-.4-.1-.8-.3-1.1-.6-.3-.1-.4-.4-.4-.6s.1-.5.3-.6c.3-.2.6-.4.9-.3.6 0 1.1.3 1.4.7l.9-1.2c-.3-.3-.6-.5-.9-.7s-.7-.3-1.1-.3V4H9.4v1.4c-.5.1-1 .4-1.4.8-.4.5-.7 1.1-.6 1.7 0 .6.2 1.2.6 1.6.5.5 1.2.8 1.8 1.1.3.1.7.3 1 .5.2.2.3.5.3.8q0 .45-.3.9c-.3.3-.7.4-1 .4-.4 0-.9-.1-1.2-.4-.3-.2-.6-.5-.8-.8l-1 1.1c.3.4.6.7 1 1 .5.3 1.1.6 1.7.6V16h1.1v-1.5c.6-.1 1.1-.4 1.5-.8.5-.5.8-1.3.8-2 0-.6-.2-1.3-.7-1.7-.5-.5-1-.8-1.6-1M10 2c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m0 14.9c-3.8 0-6.9-3.1-6.9-6.9S6.2 3.1 10 3.1s6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 20 20'%3E%3Cpath fill='none' d='M0 0h20v20H0z'/%3E%3Cpath d='M10.6 9c-.4-.1-.8-.3-1.1-.6-.3-.1-.4-.4-.4-.6s.1-.5.3-.6c.3-.2.6-.4.9-.3.6 0 1.1.3 1.4.7l.9-1.2c-.3-.3-.6-.5-.9-.7s-.7-.3-1.1-.3V4H9.4v1.4c-.5.1-1 .4-1.4.8-.4.5-.7 1.1-.6 1.7 0 .6.2 1.2.6 1.6.5.5 1.2.8 1.8 1.1.3.1.7.3 1 .5.2.2.3.5.3.8q0 .45-.3.9c-.3.3-.7.4-1 .4-.4 0-.9-.1-1.2-.4-.3-.2-.6-.5-.8-.8l-1 1.1c.3.4.6.7 1 1 .5.3 1.1.6 1.7.6V16h1.1v-1.5c.6-.1 1.1-.4 1.5-.8.5-.5.8-1.3.8-2 0-.6-.2-1.3-.7-1.7-.5-.5-1-.8-1.6-1M10 2c-4.4 0-8 3.6-8 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8m0 14.9c-3.8 0-6.9-3.1-6.9-6.9S6.2 3.1 10 3.1s6.9 3.1 6.9 6.9-3.1 6.9-6.9 6.9'/%3E%3C/svg%3E");
}
.icon-camera{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon-live'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon-live'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E");
}
.icon-home{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 11.75a.7.7 0 0 1-.45-.15L12 5.94 4.45 11.6a.75.75 0 0 1-.9-1.2l8-6a.75.75 0 0 1 .9 0l8 6a.75.75 0 0 1 .15 1 .7.7 0 0 1-.6.35'/%3E%3Cpath fill='%23000' d='M18 19.75H6a.76.76 0 0 1-.75-.75V9.5a.75.75 0 0 1 1.5 0v8.75h10.5V9.5a.75.75 0 1 1 1.5 0V19a.76.76 0 0 1-.75.75'/%3E%3Cpath fill='%23000' d='M14 19.75a.76.76 0 0 1-.75-.75v-6.25h-2.5V19a.75.75 0 1 1-1.5 0v-7a.76.76 0 0 1 .75-.75h4a.76.76 0 0 1 .75.75v7a.76.76 0 0 1-.75.75'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 11.75a.7.7 0 0 1-.45-.15L12 5.94 4.45 11.6a.75.75 0 0 1-.9-1.2l8-6a.75.75 0 0 1 .9 0l8 6a.75.75 0 0 1 .15 1 .7.7 0 0 1-.6.35'/%3E%3Cpath fill='%23000' d='M18 19.75H6a.76.76 0 0 1-.75-.75V9.5a.75.75 0 0 1 1.5 0v8.75h10.5V9.5a.75.75 0 1 1 1.5 0V19a.76.76 0 0 1-.75.75'/%3E%3Cpath fill='%23000' d='M14 19.75a.76.76 0 0 1-.75-.75v-6.25h-2.5V19a.75.75 0 1 1-1.5 0v-7a.76.76 0 0 1 .75-.75h4a.76.76 0 0 1 .75.75v7a.76.76 0 0 1-.75.75'/%3E%3C/svg%3E");
}
.icon-ball{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 1024 1024'%3E%3Cpath d='M195.2 828.8a448 448 0 1 1 633.6-633.6 448 448 0 0 1-633.6 633.6m45.25-45.25a384 384 0 1 0 543.1-543.1 384 384 0 0 0-543.1 543.1'/%3E%3Cpath d='M497.47 96.9c22.79 4.67 44.42 9.47 64.9 14.52a256.13 256.13 0 0 0 350.2 350.21c5.06 20.48 9.86 42.11 14.53 64.9A320.13 320.13 0 0 1 497.47 96.9m-388.99 395A320.13 320.13 0 0 1 532.1 915.58c-23.04-3.64-45-7.42-65.73-11.52a256.13 256.13 0 0 0-346.5-346.43 1737 1737 0 0 1-11.39-65.73'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 1024 1024'%3E%3Cpath d='M195.2 828.8a448 448 0 1 1 633.6-633.6 448 448 0 0 1-633.6 633.6m45.25-45.25a384 384 0 1 0 543.1-543.1 384 384 0 0 0-543.1 543.1'/%3E%3Cpath d='M497.47 96.9c22.79 4.67 44.42 9.47 64.9 14.52a256.13 256.13 0 0 0 350.2 350.21c5.06 20.48 9.86 42.11 14.53 64.9A320.13 320.13 0 0 1 497.47 96.9m-388.99 395A320.13 320.13 0 0 1 532.1 915.58c-23.04-3.64-45-7.42-65.73-11.52a256.13 256.13 0 0 0-346.5-346.43 1737 1737 0 0 1-11.39-65.73'/%3E%3C/svg%3E");
}
.icon-upload{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M4 19h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2zM14 9v6h-4V9H5l7-7 7 7z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M4 19h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2zM14 9v6h-4V9H5l7-7 7 7z'/%3E%3C/svg%3E");
}
.icon-download{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 48 48'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M6 24.0083V42h36V24'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m33 23-9 9-9-9m8.9917-17v26'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 48 48'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h48v48H0z'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M6 24.0083V42h36V24'/%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='m33 23-9 9-9-9m8.9917-17v26'/%3E%3C/svg%3E");
}
.icon-down{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 1024 1024'%3E%3Cpath d='M759.2 419.8 697.4 358 512 543.4 326.6 358l-61.8 61.8L512 667z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 1024 1024'%3E%3Cpath d='M759.2 419.8 697.4 358 512 543.4 326.6 358l-61.8 61.8L512 667z'/%3E%3C/svg%3E");
}
.icon-search{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ctitle%3Esearch16%3C/title%3E%3Cpath d='m10.7 10.57-.13.13a4.65 4.65 0 0 1-6.54-.07 4.65 4.65 0 0 1 3.3-7.96A4.65 4.65 0 0 1 12 7.33c0 1.26-.5 2.4-1.3 3.24m3.77 2.96-2.45-2.45a6 6 0 0 0-.44-7.99 6 6 0 0 0-8.49 0 6 6 0 0 0 0 8.49 6 6 0 0 0 7.99.44l2.45 2.45a.67.67 0 1 0 .94-.94'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ctitle%3Esearch16%3C/title%3E%3Cpath d='m10.7 10.57-.13.13a4.65 4.65 0 0 1-6.54-.07 4.65 4.65 0 0 1 3.3-7.96A4.65 4.65 0 0 1 12 7.33c0 1.26-.5 2.4-1.3 3.24m3.77 2.96-2.45-2.45a6 6 0 0 0-.44-7.99 6 6 0 0 0-8.49 0 6 6 0 0 0 0 8.49 6 6 0 0 0 7.99.44l2.45 2.45a.67.67 0 1 0 .94-.94'/%3E%3C/svg%3E");
}
.icon-pw{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M10.5 9a4.5 4.5 0 1 0-3.81-2.1L.59 13l3 3 1.4-1.42L3.42 13 5 11.41 6.58 13 8 11.58 6.4 10l1.7-1.69q1.05.68 2.39.69m0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5' clip-rule='evenodd'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M10.5 9a4.5 4.5 0 1 0-3.81-2.1L.59 13l3 3 1.4-1.42L3.42 13 5 11.41 6.58 13 8 11.58 6.4 10l1.7-1.69q1.05.68 2.39.69m0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-fax{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.5A2.6 2.6 0 0 0 5.33 8 2.6 2.6 0 0 0 8 10.5 2.6 2.6 0 0 0 10.67 8 2.6 2.6 0 0 0 8 5.5m0 3.75A1.35 1.35 0 0 1 6.58 8 1.35 1.35 0 0 1 8 6.75 1.35 1.35 0 0 1 9.42 8 1.35 1.35 0 0 1 8 9.25'/%3E%3Cpath d='M8 2.5A8.1 8.1 0 0 0 0 8a8.1 8.1 0 0 0 8 5.5A8.1 8.1 0 0 0 16 8a8.1 8.1 0 0 0-8-5.5m5.4 7.5A7 7 0 0 1 8 12.25 7 7 0 0 1 2.6 10a7 7 0 0 1-1.27-2A7 7 0 0 1 2.6 6 7 7 0 0 1 8 3.75 7 7 0 0 1 13.4 6a7 7 0 0 1 1.27 2 7 7 0 0 1-1.27 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.5A2.6 2.6 0 0 0 5.33 8 2.6 2.6 0 0 0 8 10.5 2.6 2.6 0 0 0 10.67 8 2.6 2.6 0 0 0 8 5.5m0 3.75A1.35 1.35 0 0 1 6.58 8 1.35 1.35 0 0 1 8 6.75 1.35 1.35 0 0 1 9.42 8 1.35 1.35 0 0 1 8 9.25'/%3E%3Cpath d='M8 2.5A8.1 8.1 0 0 0 0 8a8.1 8.1 0 0 0 8 5.5A8.1 8.1 0 0 0 16 8a8.1 8.1 0 0 0-8-5.5m5.4 7.5A7 7 0 0 1 8 12.25 7 7 0 0 1 2.6 10a7 7 0 0 1-1.27-2A7 7 0 0 1 2.6 6 7 7 0 0 1 8 3.75 7 7 0 0 1 13.4 6a7 7 0 0 1 1.27 2 7 7 0 0 1-1.27 2'/%3E%3C/svg%3E");
}
.icon-eye-slash{
 -webkit-mask-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5a10 10 0 0 0-2.53.32l1 1.05A9 9 0 0 1 8 3.75 7 7 0 0 1 13.4 6a7 7 0 0 1 1.27 2 7 7 0 0 1-1.27 2l-.37.38.89.89A8 8 0 0 0 16 8a8.1 8.1 0 0 0-8-5.5m5 9.56-.9-.9-6.97-6.91-1-1-1.19-1.19-.88.88 1 1A8.3 8.3 0 0 0 0 8a8.1 8.1 0 0 0 8 5.5 9 9 0 0 0 3.82-.79l1.24 1.23.88-.88-1-1zM6.66 7.54l1.67 1.67a2 2 0 0 1-.36 0A1.35 1.35 0 0 1 6.55 8a1 1 0 0 1 .11-.46M8 12.25A7 7 0 0 1 2.6 10a7 7 0 0 1-1.27-2A7 7 0 0 1 2.6 6 7 7 0 0 1 4 4.84l1.74 1.79A2.3 2.3 0 0 0 5.3 8 2.6 2.6 0 0 0 8 10.5a3 3 0 0 0 1.32-.33l1.58 1.58a8 8 0 0 1-2.9.5'/%3E%3C/svg%3E");
  mask-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5a10 10 0 0 0-2.53.32l1 1.05A9 9 0 0 1 8 3.75 7 7 0 0 1 13.4 6a7 7 0 0 1 1.27 2 7 7 0 0 1-1.27 2l-.37.38.89.89A8 8 0 0 0 16 8a8.1 8.1 0 0 0-8-5.5m5 9.56-.9-.9-6.97-6.91-1-1-1.19-1.19-.88.88 1 1A8.3 8.3 0 0 0 0 8a8.1 8.1 0 0 0 8 5.5 9 9 0 0 0 3.82-.79l1.24 1.23.88-.88-1-1zM6.66 7.54l1.67 1.67a2 2 0 0 1-.36 0A1.35 1.35 0 0 1 6.55 8a1 1 0 0 1 .11-.46M8 12.25A7 7 0 0 1 2.6 10a7 7 0 0 1-1.27-2A7 7 0 0 1 2.6 6 7 7 0 0 1 4 4.84l1.74 1.79A2.3 2.3 0 0 0 5.3 8 2.6 2.6 0 0 0 8 10.5a3 3 0 0 0 1.32-.33l1.58 1.58a8 8 0 0 1-2.9.5'/%3E%3C/svg%3E");
}
.icon-trash{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 8.7H4a.75.75 0 0 1 0-1.5h16a.75.75 0 1 1 0 1.5'/%3E%3Cpath fill='%23000' d='M16.44 20.75H7.56A2.4 2.4 0 0 1 5 18.49V8a.75.75 0 1 1 1.5 0v10.49c0 .41.47.76 1 .76h8.88c.56 0 1-.35 1-.76V8A.81.81 0 1 1 19 8v10.49a2.4 2.4 0 0 1-2.56 2.26m.12-13a.74.74 0 0 1-.75-.75V5.51c0-.41-.48-.76-1-.76H9.22c-.55 0-1 .35-1 .76V7a.75.75 0 0 1-1.5 0V5.51a2.4 2.4 0 0 1 2.5-2.26h5.56a2.4 2.4 0 0 1 2.53 2.26V7a.75.75 0 0 1-.75.76z'/%3E%3Cpath fill='%23000' d='M10.22 17a.76.76 0 0 1-.75-.75v-4.53a.75.75 0 1 1 1.5 0v4.52a.75.75 0 0 1-.75.76M13.78 17a.75.75 0 0 1-.75-.75v-4.53a.75.75 0 1 1 1.5 0v4.52a.76.76 0 0 1-.75.76'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 8.7H4a.75.75 0 0 1 0-1.5h16a.75.75 0 1 1 0 1.5'/%3E%3Cpath fill='%23000' d='M16.44 20.75H7.56A2.4 2.4 0 0 1 5 18.49V8a.75.75 0 1 1 1.5 0v10.49c0 .41.47.76 1 .76h8.88c.56 0 1-.35 1-.76V8A.81.81 0 1 1 19 8v10.49a2.4 2.4 0 0 1-2.56 2.26m.12-13a.74.74 0 0 1-.75-.75V5.51c0-.41-.48-.76-1-.76H9.22c-.55 0-1 .35-1 .76V7a.75.75 0 0 1-1.5 0V5.51a2.4 2.4 0 0 1 2.5-2.26h5.56a2.4 2.4 0 0 1 2.53 2.26V7a.75.75 0 0 1-.75.76z'/%3E%3Cpath fill='%23000' d='M10.22 17a.76.76 0 0 1-.75-.75v-4.53a.75.75 0 1 1 1.5 0v4.52a.75.75 0 0 1-.75.76M13.78 17a.75.75 0 0 1-.75-.75v-4.53a.75.75 0 1 1 1.5 0v4.52a.76.76 0 0 1-.75.76'/%3E%3C/svg%3E");
}
.icon-info{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16M11 7h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20m0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16M11 7h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E");
}
.icon-check{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='800' height='800' viewBox='0 0 512 512'%3E%3Cpath d='M469.4 35.5c-135.31 75.16-272.29 289-272.29 289L73.51 184.18 0 254.34 178.73 476.5l65.15-2.5C327.41 223.4 512 55.53 512 55.53z' style='fill:%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='800' height='800' viewBox='0 0 512 512'%3E%3Cpath d='M469.4 35.5c-135.31 75.16-272.29 289-272.29 289L73.51 184.18 0 254.34 178.73 476.5l65.15-2.5C327.41 223.4 512 55.53 512 55.53z' style='fill:%23000'/%3E%3C/svg%3E");
}
.icon-logout{
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z'/%3E%3C/svg%3E");    
}
.icon-files{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='800' height='800' viewBox='0 0 512 512'%3E%3Cpath d='M477.867 136.533h-9.359c-3.86-19.681-20.878-34.133-41.841-34.133H294.4l-40.107-47.787c-1.707-2.56-4.267-3.413-6.827-3.413H59.733C40.96 51.2 25.6 66.56 25.6 85.333v52.288C10.921 141.435 0 154.837 0 170.667v256C0 445.44 15.36 460.8 34.133 460.8h443.733c18.773 0 34.133-15.36 34.133-34.133v-256c.001-18.774-15.359-34.134-34.132-34.134m-435.2-51.2c0-9.387 7.68-17.067 17.067-17.067H243.2l40.107 47.787c1.707 2.56 4.267 3.413 6.827 3.413h136.533c11.093 0 20.48 6.827 23.893 17.067H42.667zm452.266 341.334c0 9.387-7.68 17.067-17.067 17.067H34.133c-9.387 0-17.067-7.68-17.067-17.067v-256c0-9.387 7.68-17.067 17.067-17.067h443.734c9.387 0 17.067 7.68 17.067 17.067v256z'/%3E%3Cpath d='M162.133 187.733h-102.4c-5.12 0-8.533 3.413-8.533 8.533s3.413 8.533 8.533 8.533h102.4c5.12 0 8.533-3.413 8.533-8.533s-3.413-8.533-8.533-8.533m0 34.134h-102.4c-5.12 0-8.533 3.413-8.533 8.533s3.413 8.533 8.533 8.533h102.4c5.12 0 8.533-3.413 8.533-8.533.001-5.12-3.413-8.533-8.533-8.533'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='800' height='800' viewBox='0 0 512 512'%3E%3Cpath d='M477.867 136.533h-9.359c-3.86-19.681-20.878-34.133-41.841-34.133H294.4l-40.107-47.787c-1.707-2.56-4.267-3.413-6.827-3.413H59.733C40.96 51.2 25.6 66.56 25.6 85.333v52.288C10.921 141.435 0 154.837 0 170.667v256C0 445.44 15.36 460.8 34.133 460.8h443.733c18.773 0 34.133-15.36 34.133-34.133v-256c.001-18.774-15.359-34.134-34.132-34.134m-435.2-51.2c0-9.387 7.68-17.067 17.067-17.067H243.2l40.107 47.787c1.707 2.56 4.267 3.413 6.827 3.413h136.533c11.093 0 20.48 6.827 23.893 17.067H42.667zm452.266 341.334c0 9.387-7.68 17.067-17.067 17.067H34.133c-9.387 0-17.067-7.68-17.067-17.067v-256c0-9.387 7.68-17.067 17.067-17.067h443.734c9.387 0 17.067 7.68 17.067 17.067v256z'/%3E%3Cpath d='M162.133 187.733h-102.4c-5.12 0-8.533 3.413-8.533 8.533s3.413 8.533 8.533 8.533h102.4c5.12 0 8.533-3.413 8.533-8.533s-3.413-8.533-8.533-8.533m0 34.134h-102.4c-5.12 0-8.533 3.413-8.533 8.533s3.413 8.533 8.533 8.533h102.4c5.12 0 8.533-3.413 8.533-8.533.001-5.12-3.413-8.533-8.533-8.533'/%3E%3C/svg%3E");    
}

/* --  Logo  -------------------------------------------------------------------------------------------------- */
.logo-header .logo-link {
    display: flex;
    align-items: center; /* 垂直居中 */
    text-decoration: none;
    padding: 10px 0;
}
.logo-header .logo-img {
    background: url(../image/logo_s.png) no-repeat center;
    background-size: contain;
    width: 50px;
    height: 50px;
    flex-shrink: 0; /* 防止圖片被擠壓 */
}
.logo-header .logo-text {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.logo-header .title {
    font-size: 1.15rem;
    color: rgb(var(--black));
    font-weight: 700;
    line-height: 1.2;
    margin: 0; /* 移除預設 margin */
}
.logo-header .subtitle {
    font-size: 9px; 
    color: rgba(var(--black)/0.4);
    margin: 2px 0 0 0;
    /*letter-spacing: 0.5px;*/
    white-space: nowrap; /* 避免英文換行 */
}

/* --- 桌機版 (64em / 1024px 以上) --- */
@media screen and (min-width: 64em) {
    .logo-header .logo-link {
        padding: 15px 0;
    }
    .logo-header .logo-img {
        background-image: url(../image/logo.png);
        width: 80px;
        height: 80px; 
    }
    .logo-header .logo-text {
        margin-left: 15px; 
    }
    .logo-header .title {
        font-size: 1.85rem;
        letter-spacing: 1.2;
    }
    .logo-header .subtitle {
        font-size: 12px;
        font-weight: 400;
        margin-top: 4px;
        letter-spacing: 0.5px;
    }
}

/*--  Navigation  -------------------------------------------------------------- */
.main-nav {
    background: linear-gradient(to bottom, #001f3f, #003366);
    border-bottom: 0px;
}
.menu-container { padding-left: 0rem; }

/* 主選單項目 */
.main-nav .menu > li > a {
  position: relative;
  display: inline-block;
  margin: .3rem .2rem;
  /*padding: 0.3rem 0;*/
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--white));
  text-decoration: none;
  transition: color 1s ease;
}
/* 主選單 hover/active 狀態 */
.main-nav .menu > li > a:hover,
.main-nav .menu > li.active > a,
.main-nav .menu > li.is-active > a,
.main-nav .menu > li.is-dropdown-submenu-parent:hover > a {
  --warning: 255 40 40;
  color: rgb(var(--warning));
  background: transparent;
  transition: color 1s ease;
}
/* 下拉箭頭 */
.main-nav .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 12px;
  height: 8px;
  margin-top: -4px;
  background: var(--svg-arrow-down) center / contain no-repeat;
  border-color: rgb(var(--warning)) transparent transparent !important;
  transition: transform 0.25s ease;
}
.main-nav .dropdown.menu > li.is-dropdown-submenu-parent > a:is(:hover, :focus-visible, [aria-expanded="true"])::after {
  transform: rotate(180deg); /* 展開時旋轉箭頭 */
}
/* 子選單容器 */
.main-nav .is-dropdown-submenu {
  min-width: 200px;
  padding: 0;
  background: rgb(var(--primary)/.8);
  border: 1px solid rgba(var(--primary)/.4);
  /*border-bottom: 5px solid var(--warning);*/
  border-radius: 3px;
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.2),
    0 8px 10px -6px rgba(0, 0, 0, 0.2);
  z-index: 999;
}
/* 子選單項目 */
.main-nav .dropdown .is-dropdown-submenu a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1rem .8rem; 
  text-align: center;
  color: rgb(var(--white));
  background: transparent; /* 預設背景透明 */
  transition: all 0.2s ease; /* 統一過渡效果 */
}
/* 子選單項目 hover */
.main-nav .dropdown .is-dropdown-submenu a:hover {
  background: rgba(var(--white)/.9);
  color: rgb(var(--warning));
  transform: translateX(0px); /* 添加微妙的滑動效果 */
}

/*--  球隊、講習報名  ------------------------------------------------------------*/
.login-section {
    background: rgb(var(--warning));
    display: flex;
    align-items: center;
    justify-content: center; /* 確保內容在 cell 內水平置中 */
    padding: .5rem 2.5rem;   /* 稍微增加左右內距，確保斜角不會切到文字 */
    position: relative;
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
    min-width: 280px; 
}
@media screen and (max-width: 1023px) {
    .login-section {
        margin: 0; 
        /* 手機版斜角*/
        /* clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); */
    }
}
.login-section a {
    color: white; font-weight: bold; font-size: 1rem;
    text-decoration: none; margin: 0 12px; /* 稍微縮小間距，防止手機版太擠 */
    white-space: nowrap; transition: all 0.3s ease;
}
.login-section a:hover { color: rgb(var(--alert)); font-weight: italic; transform: translateX(.35em);}
.login-section a:first-child { margin-left: 15px;}
.login-section i{ margin-right: 5px }

/*--  Mobile Menu  -------------------------------------------------------------------------*/
.header-flex-wrapper {
    display: flex;
    align-items: center;      /* 確保子元素整體垂直置中 */
    justify-content: space-between;
    min-height: 60px;         /* 設定一個基準高度確保對齊穩定 */
    cursor: pointer;
}
.hamburger{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 100%;
    padding: 10px;
    transition: opacity 0.3s ease;
}
.hamburger:hover {
    opacity: 0.7;
}
.hamburger .menu-icon {
    margin: 0 !important; 
    padding: 0 !important;
    position: relative;
    display: block;
    float: none !important;
    width: 30px; 
    height: 24px;
}
.hamburger .menu-icon::after {
    box-shadow: 0 7px 0 #000, 0 14px 0 #000; 
    top: 0 !important; /* 確保從頂部對齊開始計算垂直居中 */
}
.hamburger .menu-icon:hover::after {
    background: rgb(var(--warning));
    -webkit-box-shadow: 0 7px 0 rgb(var(--warning)), 0 14px 0 rgb(var(--warning));
            box-shadow: 0 7px 0 rgb(var(--warning)), 0 14px 0 rgb(var(--warning)); }
.hamburger .menu-label {
    font-size: 10px;
    font-weight: 700;
    color: rgb(var(--black));
    margin-top: 0; /* 與三條槓保持一點間距 */
    line-height: 1;
}
/*--  Mobile Navigation  ----------------------------------------------------------------*/
.off-canvas {
    background: rgb(var(--primary)); 
    color: white;
    border-right: 1px solid rgba(var(--white)/.5);
}
.off-canvas .close-button {
    width: 44px;
    height: 44px;
    color: white;
    border: 1px solid rgba(var(--white)/0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    line-height: 0;
    transition: all 0.3s ease;
    /* 重設位置 
    position: relative;*/
    top: 30px;
    right: 30px;
    /*margin-top: 15px;*/
}
.off-canvas .close-button:hover {
    background: rgba(var(--white)/ 0.1);
    border-color: #fff;
    transform: rotate(90deg);
}
.close-icon {
    font-size: 2.5rem; 
    line-height: 1;
    font-weight: 300;
}
.mobile-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 22% 12%;    
}
/* --- 第一層選單設定 --- */
.mobile-nav .vertical.menu > li > a {
    color: rgb(var(--white));
    font-size: 1.25rem;
    letter-spacing: 2px;
    font-weight: 700;
    padding: 1.8rem 2rem;
    --warning: 255 40 40;
    border-bottom: 1px solid rgba(var(--warning)/.8);
    /*transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);*/
    transition: var(--transition-standard);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* 第一層選單：選中與懸停狀態 */
.mobile-nav .vertical.menu > li > a:hover,
.mobile-nav .vertical.menu > li.is-active > a {
    color: rgb(var(--alert));
    background: rgba(var(--white)/0.1);
}
.mobile-nav .menu li:last-child a {
    border-bottom: none;
}
/* --- 第二層子選單 --- */
.mobile-nav .vertical.menu .menu {
    background: rgba(var(--black)/0.3); 
    margin-left: 0;
}
.mobile-nav .vertical.menu .menu > li > a {
    padding: 1.2rem 2rem;
    font-size: 1.25rem;
    color: rgba(var(--white)/0.8);
    border-bottom: 1px solid rgba(var(--white)/0.2);
    transition: all 0.2s ease;
}
.mobile-nav .vertical.menu .menu > li > a:hover {
    color: #fff;
    padding-left: 50px; 
}
/* --- Accordion 箭頭修正 (白色系) --- */
.vertical.menu.accordion-menu .is-accordion-submenu-parent > a::after {
    border-color: rgba(var(--white)/.5) transparent transparent;
    right: 25px;
}
.vertical.menu.accordion-menu .is-accordion-submenu-parent.is-active > a::after {
    border-color: #fff transparent transparent;
    transform: rotate(180deg);
}
/*-- Mobile選單開啟時觸發動畫 --*/
.fade-in-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.is-open .fade-in-item {
    opacity: 1;
    transform: translateY(0);
}
.is-open .fade-in-item:nth-child(1) { transition-delay: 0.1s; }
.is-open .fade-in-item:nth-child(2) { transition-delay: 0.15s; }
.is-open .fade-in-item:nth-child(3) { transition-delay: 0.2s; }
.is-open .fade-in-item:nth-child(4) { transition-delay: 0.25s; }
.is-open .fade-in-item:nth-child(5) { transition-delay: 0.35s; }
.is-open .fade-in-item:nth-child(6) { transition-delay: 0.4s; }
.is-open .fade-in-item:nth-child(7) { transition-delay: 0.45s; }
.is-open .fade-in-item:nth-child(8) { transition-delay: 0.5s; }
/*-- Mobile登出設定 --*/
.user-auth-bar {
    display: inline-flex;
    align-items: center;
    gap: 0; 
}
.auth-item {
    display: flex;
    align-items: center;
    gap: 2px; 
    text-decoration: none;
    color: rgb(var(--primary));
    font-weight: 700;
    transition: var(--transition-standard);
    line-height: 1;
}
.auth-icon {
    width: 20px;  
    height: 20px;
    flex-shrink: 0;
    fill: none; 
}
.auth-icon.logout {
    fill: currentColor;
    stroke: none;
}
.auth-item:hover {
    color: rgb(var(--warning));
}
.user-info {
    display: flex;
    align-items: center;
    white-space: nowrap; /* 核心：防止姓名在小螢幕換行 */
}
.user-name {
    /*font-size: .9rem;*/
    font-weight: 500;
    margin-right: 10px;
    color: rgb(var(--black));
}
.logout-link:hover .auth-text {
    transform: translateX(3px);
    transition: var(--transition-standard);
}
.logout-link:hover .icon {
    transform: translateX(3px);
    transition: var(--transition-standard);
}
.logout-link-flex {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    padding: 1rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px;
    border-bottom: none !important;
}
.logout-icon-circle {
    width: 36px;
    height: 36px;
    background: rgb(var(--warning));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* mobile社群位置設定*/
.mobile-social{ position: relative;} 
.mobile-social .social-icons{ position: absolute; top: 6px; left: 30px;}
.off-canvas.position-left {
    position: fixed !important; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, rgb(10, 39, 77) 0%, rgb(5, 20, 40) 100%);
    transform: translateY(-100%); 
    transition: var(--transition-standard); 
    z-index: 4000 !important; 
    visibility: visible !important; 
}

/* 開啟狀態 */
.off-canvas.is-open {
    transform: translateY(0);
    z-index: 4001 !important; /* 確保開啟時依然最高 */
    box-shadow: 0 10px 40px rgba(var(--black)/.8);
}
/* 遮罩層樣式：層級設在選單之下 */
.js-off-canvas-overlay {
    z-index: 3999 !important; 
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(var(--black)/.9);
}
.off-canvas-content {
    transform: none !important; /* 核心：強制內容不產生位移 */
    transition: none !important;
}
/* 遮罩層基礎樣式 */
.js-off-canvas-overlay {
    background: rgba(var(--black)/.9); 
    transition: opacity 0.3s ease; 
    cursor: pointer;
}
/* 當選單開啟時，遮罩淡入 */
.is-off-canvas-open .js-off-canvas-overlay.is-visible { opacity: 1;}
/* 確保選單層級高於遮罩 */
.off-canvas.is-open { z-index: 1001; box-shadow: 0 10px 30px rgba(var(--black)/.8);}



/*-- 各級賽事 tabs頁籤 --*/
.custom-blue-tabs.tabs {
    border: none;
    border-bottom: 1px solid rgba(var(--black)/.2);
    background: transparent;
    display: flex;
}

.custom-blue-tabs .tabs-title {
    float: none;
    flex: 1;    /* 強制平分空間 (50%) */
}
.custom-blue-tabs .tabs-title > a {
    font-size: 1.15rem;
    font-weight: bold;
    color: rgba(var(--black)/.8);
    padding: 1rem;
    background: transparent;
    transition: all 0.3s ease;
    text-align: center;
}
.custom-blue-tabs .tabs-title > a:hover {
    color: rgb(var(--warning));
    background: rgba(var(--white)/1);
    box-shadow: 0 3px 0 0 rgba(var(--warning)/1); 
}
.custom-blue-tabs .tabs-title.is-active > a,
.custom-blue-tabs .tabs-title > a[aria-selected='true'] {
    background: rgb(var(--white));
    color: rgb(var(--warning));
    /* 使用 box-shadow 做底線，避免增加元素高度導致抖動 */
    box-shadow: 0 3px 0 0 rgba(var(--warning)/0); 
}
.tabs-content {
    border: none;
    background: transparent;
    padding: 0 0 2rem 0;
}
.tabs-title > a:focus, 
.tabs-title > a[aria-selected='true'] {
    background: transparent; 
    color: rgb(var(--warning));
    font-weight: bold;
    border-bottom: 2px solid rgb(var(--warning));
}
.tabs {
    border: none;
    border-bottom: 1px solid rgba(var(--black)/.2);
    background: transparent;
}
.tabs-panel {
  padding: 0 0 1rem 0;
}
.tabs-title > a {
    font-size: 1.15rem;
    color: #666;
    transition: all 0.3s ease;
}
.tabs-title > a:hover {
    background: rgba(var(--primary), 0.05);
    color: rgb(var(--primary));
}
.tabs-content {
    border: none;
    background: transparent;
    padding: 0 0 30px 0;
}
.rwd-table .label.success{ background: rgb(var(--success)); color: white; clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%); padding: 10px 30px 8px 15px; font-size: 1rem}

/*--  棒協簡介：文章  ----------------------------------------------------------------------------------------*/
.article-container{ display: grid; grid-template-columns: 1fr; gap: 0;}
@media screen and (min-width: 40em) {
    .article-container{ 
        display: grid;
        /* 設定左欄 1份，右欄 2份，中間間隔 15px */
        grid-template-columns: 1fr 4fr;
        gap: 25px;
    }
  }
.callout{ 
    border: 5px solid rgba(var(--white)/.5); 
    border-radius:3px;

}
.callout.alert {
    background: rgba(var(--alert)/.9);
    color: rgb(var(--black));
    font-weight: 600;
}

/*--  文章內容  --*/
.article-wrapper {
    width: 100%;
}
/* 核心文章容器：寬度 80% */
.article-content-container {
    width: 100%;
    margin: 0 auto;
    background-color: white;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
/* 日期與標籤 */
.article-meta {
    margin-bottom: 1rem;
}
.article-tag.label {
    background: rgb(var(--warning));
    color: rgba(var(--white)/1);
    padding: 4px 12px;
    margin-right: 0;
    font-size: 0.85rem;
}

.article-date {
    color: rgba(var(--black)/.8);
    font-size: 0.85rem;
}
.article-date.label{padding: 4px 12px;}
.article-title {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.article-divider {
    border: none;
    border-top: 2px solid rgb(var(--alert));
    margin-bottom: 2rem;
}
.article-body {
    line-height: 1.8;
}
.article-subject {
    margin-bottom: 2rem;
}

.article-section-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.article-list {
    margin-left: 1.5rem;
    margin-bottom: 2rem;
}

.article-list li {
    margin-bottom: 12px;
    padding-left: 5px;
}

@media screen and (min-width: 1024px) {
    .article-content-container {
        width: 80%; 
        padding: 3rem 4rem;
    }

    .article-title {
        font-size: 1.75rem;
    }
}

@media screen and (min-width: 40em) {
    .article-content-container {
        width: 90%;
        max-width: 1200px;
    }
    .download-list{ 
        display: grid;
        grid-template-columns: 1fr 1fr; gap: 0 10px;
    }
}


/*--  合作夥伴  ------------------------------------------------------------------------------*/
.related-links-section { padding: 4rem 0;}
.related-links-section .item{ border-radius: 3px; border: 1px solid rgb(var(--black)/.1);overflow: hidden;
    overflow: hidden; --base-shadow: var(--shadow-md);
    box-shadow: var(--base-shadow); transition: all 0.3s ease;}
.related-links-section .item:hover{ transform: scale(.95); --base-shadow: var(--shadow-lg);}

/*--  聯絡我們  ------------------------------------------------------------------------------*/
.info-group-box {
    background: white;
    border: 1px solid rgba(var(--black)/.07);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

/* 標題對齊 */
.info-header {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
}

/* 一致性的 SVG 容器 */
.icon-circle {
    width: 36px;
    height: 36px;
    background: rgb(var(--primary));
    color: white;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

/* SVG 大小控制 */
.icon-circle svg {
    width: 24px;
    height: 24px;
}
.info-title {
    font-weight: bold;
    margin: 0 10px 0 0;
    font-size: 1.1rem;
}

.main-tel, .address-text {
    font-size: 1rem;
    color: rgb(var(--warning));
    display: block;
    width: 100%; 
    margin-top: 8px;
    padding-left: 48px;
}
.email-text {
    color: rgba(var(--warning));
    font-weight: bold;
    text-decoration: none;
    display: block;
    width: 100%;
    margin-top: 8px;
    padding-left: 48px;
}
.extension-grid { 
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
@media screen and (min-width: 40em) {
    .extension-grid { 
        display: grid;
       grid-template-columns: repeat(6, 1fr);
        gap: 10px;
    }
}
.ext-item {
    background: rgba(var(--primary)/.05);
    padding: 10px 5px;
    text-align: center;
    margin-bottom: 10px;
}
.ext-item small { display: block; color: rgba(var(--black)/.8); font-size: 0.75rem; }
.ext-item strong { display: block; color: rgb(var(--primary));}
.map-container { margin-top: 1rem; border: 1px solid #eee; }
@media screen and (min-width: 1024px) {
    .info-header { flex-wrap: nowrap; }
    .main-tel, .address-text, .email-text {
        width: auto;
        margin-top: 0;
        padding-left: 0;
        font-size: 1.1rem;
    }
    .info-group-box { padding: 1.5rem 2rem; }
}

/*--  棒球規則  ------------------------------------------------------------------*/
.baseball-rules-container{ 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
}
@media screen and (min-width: 40em) {
    .baseball-rules-container{ 
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 15px; 
    }
  }
/*--  賽事新聞  ---------------------------------------------------------------------------*/
.sports-news-container{ 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 10px; 
}
@media screen and (min-width: 40em) {
    .sports-news-container{ 
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px; 
    }
  }
.sports-news-container.team .gallery-card.v-card .image-wrap{ border-bottom: 5px solid rgba(var(--alert)/.3); transition: all 0.3s ease;}  
.sports-news-container.team .gallery-card.v-card:hover .image-wrap{ border-bottom: 5px solid rgba(var(--alert)/1);}  
.sports-news-container.team .gallery-card.v-card .card-title{ text-align: left;}

/* =========================
   1. Pagination 基礎容器
========================= */
.pagination {
  display: flex;
  justify-content: center; /* 讓整個分頁區塊置中 */
  align-items: center;
  gap: 0.8rem;             /* 按鈕之間的間距 */
  list-style: none;
  margin: 1rem 0;
  padding: 1.5rem 0;
  width: 100%;             /* 容器寬度雖為 100%，但內容不會撐滿 */
}

/* =========================
   2. 手機版邏輯
   隱藏數字，僅顯示上下頁，且不強制滿版
========================= */
.pagination li {
  display: none;           /* 預設隱藏所有 */
}

.pagination li.pagination-previous,
.pagination li.pagination-next {
  display: inline-flex;    /* 改回 inline-flex，不佔滿空間 */
  width: auto;             /* 寬度依文字內容而定 */
}

/* =========================
   3. 按鈕通用外觀 (含陰影)
========================= */
.pagination li a,
.pagination li button,
.pagination li.current,
.pagination li.disabled {
  display: inline-flex;    /* 內容置中 */
  align-items: center;
  justify-content: center;
  width: auto; 
  min-width: 2.5rem;       /* 設定最小寬度，確保數字頁碼不會太扁 */
  padding: 0.6rem 1.2rem;
  border-radius: 50px; 
  /* 顏色與邊框 */
  border: 1px solid rgb(var(--black)/.4);
  background-color: #fff;
  color: rgb(var(--black)/.8);
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  
  /* 陰影效果 */
  box-shadow: var(--shadow-md); 
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 互動：懸停與聚焦 */
.pagination li a:hover,
.pagination li a:focus {
  background-color: rgb(var(--warning));
  border-color: rgb(var(--warning));
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* 當前頁面 */
.pagination li.current {
  background-color: rgb(var(--warning));
  border-color: rgb(var(--warning));
  color: #fff;
  box-shadow: 0 4px 10px rgba(230, 26, 26, 0.4);
  cursor: default;
}

/* 禁用狀態 */
.pagination li.disabled {
  opacity: 0.5;
  background-color: #f0f0f0;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

/* =========================
   4. 桌機版還原
   顯示所有頁碼，且保持不滿版
========================= */
@media print, screen and (min-width: 40em) {
  .pagination {
    gap: 0.5rem; /* 桌機按鈕較多，間距稍微縮小 */
  }

  .pagination li {
    display: inline-flex; /* 顯示所有頁碼 */
    width: auto;          /* 依內容寬度 */
  }

  /* 調整桌機版按鈕的 padding，讓數字看起來比較圓 */
  .pagination li a,
  .pagination li.current,
  .pagination li.disabled {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
  }
  
  /* 純數字頁碼微調為正圓或小橢圓 */
  .pagination li:not(.pagination-previous):not(.pagination-next) a,
  .pagination li:not(.pagination-previous):not(.pagination-next).current {
    padding: 0.5rem 0.8rem;
    min-width: 2.5rem;
  }
}
/* --== 協會簡介 ==-- */
.about-container { 
    position: relative; 
    overflow: hidden; 
    padding-bottom: 100px; 
    background-color: rgba(var(--global-bg)/.05);
}

/* 塵土紋理 */
.dust-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url(../image/wall-light.png) repeat;
    opacity: 1; z-index: 1; pointer-events: none;
}

.section-block { padding: 80px 0; position: relative; z-index: 2; }

/* 傾斜標題 */
.skew-title-box {
    display: inline-block; padding: 12px 75px; margin-bottom: 30px;
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}
.skew-title-box.center { display: table; margin: 0 auto 40px; }
.main-title { color: #fff; font-weight: 900; font-size: 1.8rem; margin: 0; letter-spacing: 1.5px; }
.bg-blue { --primary: 0 48 135; background: linear-gradient(135deg, rgb(var(--primary)), rgba(var(--primary)/ 0.7)); }
.bg-red { background: linear-gradient(to right, rgb(var(--warning)), rgba(var(--warning)/.7)); }
.bg-orange { --alert:252 127 7; background: linear-gradient(to right, rgb(var(--alert)), rgba(var(--alert)/.7));  }
/* --- 紙撕效果 (Torn Paper) --- */
.torn-paper-section {
  position: relative;
  background-color: #ffffff; /* 紙張本體色 */
  margin: 100px 0;
  padding: 60px 0 !important;}
  /* 上邊緣 */
.torn-paper-section::before {
    content: "";
    position: absolute;
    top: -60px; 
    left: 0;
    width: 100%;
    height: 60px;
    background: url(../image/edge-top.png) no-repeat bottom center;
    background-size: 100% 100%;
    pointer-events: none;
}

/* 下邊緣 */
.torn-paper-section::after {
  content: "";
  position: absolute;
  bottom: -60px;
  left: 0;
  width: 100%;
  height:60px;
  background: url(../image/edge-bottom.png) no-repeat top center;
  background-size: 100% 100%;
  pointer-events: none; 
}

/* 手機版：縮減遮罩比例 */
@media screen and (max-width: 640px) {
  .torn-paper-section {
     -webkit-mask-size: 100% 30px, 100% calc(100% - 60px), 100% 30px;
     mask-size: 100% 30px, 100% calc(100% - 60px), 100% 30px;
     padding: 30px 0 !important;
 }
}
.bg-about{ --global-bg: #af7755; background-color: var(--global-bg);}
.bg-about-sec-2{ background: #fff url(../image/global.png) center center repeat; background-attachment: cover; }
.content { font-size: 1.15rem; line-height: 2; text-align: justify; }
.image-box img { 
    border-radius: 4px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); 
    max-width: 100%;
    height: auto;
    background: white;
    padding: 10px;
    margin-bottom: 40px;
}
@media screen and (max-width: 640px) {
    .main-title { font-size: 1.4rem; }
    .skew-title-box { padding: 10px 30px; }
    .section-block { padding: 60px 0; }
}
.photo-container{ padding: 8px; background: white }

/* Flatpickr 使用 allowInput:false 會自動加 readonly 覆蓋專案 readonly 灰色樣式，讓日期欄位看起來可互動 */
/*input.flatpickr-input[readonly] {
    background-color: #fff !important;
    border: 1.5px solid rgba(var(--black)/.20);
    color: inherit !important;
    cursor: pointer !important;
    opacity: 1 !important;
}*/

#regSuccessOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* 卡片 */
#regSuccessOverlay .rs-card {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.75rem;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
}

/* 圓形勾號圖示 */
#regSuccessOverlay .rs-icon {
  /*width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(43, 155, 37, .12);*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*margin: 0 auto 1rem;*/
}
#regSuccessOverlay .rs-icon svg {
  stroke: rgb(30, 120, 27);
  fill: none;
  stroke-width: 2.5;
}

/* 標題 */
#regSuccessOverlay .rs-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #222;
  margin: 0 0 .625rem;
}

/* 說明文字 */
#regSuccessOverlay .rs-desc {
  font-size: .82rem;
  color: #888;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
#regSuccessOverlay .rs-desc strong {
  color: #c00;
}

/* 步驟列 */
#regSuccessOverlay .rs-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  background: #f5f5f5;
  border-radius: 8px;
  padding: .75rem;
  margin-bottom: 1.25rem;
  font-size: .7rem;
  color: #666;
}
#regSuccessOverlay .rs-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#regSuccessOverlay .rs-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #c00;
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#regSuccessOverlay .rs-step-text {
  font-weight: 600;
}
#regSuccessOverlay .rs-sep {
  color: #ccc;
  font-size: 1rem;
}

/* 返回按鈕（覆寫 Foundation <a> 行為）*/
#regSuccessOverlay .rs-link {
  display: block;
  text-align: center;
}


/* --  Scrolltop  -------------------------------------------------------------------------------------------------  */
.scroll-top-wrapper {
  position: fixed;             
  bottom: 25px;                
  right: 25px;                 
  z-index: 9999;
  cursor: pointer;
  width: 50px;
  height: 50px;
  background: rgb(var(--black));
  color: white;
  border-radius: 50%;          
  --base-shadow: var(--shadow-lg);
  box-shadow: var(--base-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s ease; 
}
.scroll-top-wrapper.show {
  display: flex;               
  opacity: .8;
  visibility: visible; 
  transform: translateY(0);
}
.scroll-top-wrapper:hover {
  background: rgb(var(--warning));  
  transform: translateY(-3px) scale(1.1);
}
.scroll-top-inner i {
  font-size: 20px;
}