*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:#eaf3fa;}
.section{max-width:1240px;margin:0 auto 120px;padding:2.4rem 1.6rem 2rem;background:linear-gradient(180deg,#eef5ff 0%,#eff5fc 48%,#edf5ff 100%);border-radius:28px;border:1px solid rgba(181,201,233,0.55);box-shadow:0 18px 38px rgba(119,152,211,0.12)}
.header{text-align:center;margin-bottom:1.6rem}
.header h1{font-size:34px;font-weight:700;color:#2f4d80;letter-spacing:.08em;margin-bottom:0.55rem}
.header p{font-size:14px;color:#92a8cb;font-weight:500}
.tabs-wrap{display:flex;justify-content:center;margin:1.7rem 0 2.3rem}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;background:rgba(255,255,255,0.72);border-radius:999px;padding:6px;border:1px solid rgba(177,197,230,0.45);box-shadow:0 10px 24px rgba(142,172,220,0.16)}
.tab{min-width:82px;padding:10px 18px;border-radius:999px;font-size:14px;color:#7e92b5;cursor:pointer;border:none;background:transparent;transition:all .25s;white-space:nowrap;font-weight:600;appearance:none;-webkit-appearance:none;outline:none;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;touch-action:manipulation}
.tab:hover{color:#55739f}
.tab.active{background:#fff;color:#395784;box-shadow:0 8px 18px rgba(126,156,207,0.22)}
.tab:focus{outline:none}
.tab:focus-visible{box-shadow:0 0 0 3px rgba(123,159,214,0.28)}
.carousel-wrap{position:relative;padding:0 1rem}
.carousel-viewport{overflow:hidden;border-radius:20px}
.carousel-track{display:flex;gap:26px;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.match-card{flex-shrink:0;background:linear-gradient(180deg,rgba(255,255,255,0.98) 0%,rgba(252,253,255,0.98) 100%);border:1px solid rgba(180,200,232,0.48);border-radius:20px;padding:1.35rem 1rem 1rem;text-align:center;min-height:448px;box-shadow:0 12px 28px rgba(141,169,212,0.12);transition:transform .2s,box-shadow .2s}
.match-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(141,169,212,0.18)}
.card-league{font-size:13px;color:#7a96c4;font-weight:600}
.card-date{font-size:12px;color:#a0b4d0}
.card-matchup{display:flex;align-items:center;gap:14px;margin:8px 0}
.flag{font-size:36px;line-height:1}
.vs-text{font-size:14px;color:#aec0d8;font-weight:600;padding:0 6px}
.team-name{font-size:13px;color:#5a78a8;margin-top:4px;font-weight:500}
.team-block{display:flex;flex-direction:column;align-items:center;gap:4px}
.arrow-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,0.95);border:0.5px solid rgba(150,185,235,0.5);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#5a78b8;font-size:18px;z-index:10;transition:all .25s;box-shadow:0 2px 8px rgba(100,140,200,0.15)}
.arrow-btn:hover:not(:disabled){background:#fff;box-shadow:0 4px 12px rgba(80,130,200,0.25);transform:translateY(-50%) scale(1.05)}
.arrow-btn:disabled{opacity:0.25;cursor:not-allowed}
.arrow-left{left:4px}
.arrow-right{right:4px}
.group-label{font-size:11px;font-weight:600;color:#8aabce;background:rgba(140,170,220,0.18);border-radius:12px;padding:3px 10px;margin-bottom:6px}
.multi-match{display:flex;flex-direction:column;gap:8px;width:100%}
.mini-match{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0;border-top:0.5px solid rgba(150,185,235,0.25)}
.mini-match:first-child{border-top:none}
.mini-flag{font-size:22px;line-height:1}
.mini-vs{font-size:11px;color:#aec0d8;font-weight:600}
.mini-team{font-size:12px;color:#5a78a8;min-width:42px;font-weight:500}
.mini-team.left{text-align:right}
.mini-team.right{text-align:left}
.dots{display:flex;justify-content:center;gap:8px;margin-top:1.8rem}
.dot{width:8px;height:8px;border-radius:50%;background:rgba(140,170,220,0.4);transition:all .3s;cursor:pointer}
.dot:hover{background:rgba(140,170,220,0.62)}
.dot.active{background:#7a9fd4;width:22px;border-radius:999px}

.schedule-card-head{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:16px}
.schedule-stage{font-size:17px;font-weight:700;color:#7d8fb3;letter-spacing:.08em}
.schedule-date{font-size:13px;color:#a5b4ce;font-weight:600}
.schedule-card-list{display:flex;flex-direction:column}
.schedule-card-head-day{align-items:center;margin-bottom:18px;padding:0}
.schedule-day-title{font-size:18px;font-weight:700;color:#7389ad;letter-spacing:.08em}
.schedule-day-date{font-size:16px;font-weight:700;color:#a7b6cf;letter-spacing:.04em}
.schedule-day-list{display:flex;flex-direction:column;gap:16px; }
.schedule-day-match-block{display:flex;flex-direction:column;align-items:center;   background-color: #e4faff;
    padding: 2% 4% 5%;
    border-radius: 12px;}



.schedule-day-time-pill{min-width:78px;padding:6px 14px;border-radius:999px;background:#edf3fe;color:#90a5c9;font-size:12px;font-weight:700;line-height:1;text-align:center}
.schedule-day-divider{width:100%;height:1px;margin:14px 0 12px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(186,204,233,0.95),rgba(255,255,255,0))}
.schedule-day-matchup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;width:100%}
.schedule-day-team{display:flex;align-items:center;gap:10px;min-width:0}
.schedule-day-team-left{justify-content:flex-start}
.schedule-day-team-right{justify-content:flex-end}
.schedule-day-team-name{font-size:15px;color:#6a7e9f;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.schedule-day-vs{font-size:18px;font-weight:700;color:#99abc8;letter-spacing:.08em}
.schedule-row{display:flex;flex-direction:column;gap:10px}
.schedule-time{align-self:center;min-width:66px;padding:4px 12px;border-radius:999px;background:#eef5ff;color:#93a7ca;font-size:11px;font-weight:700;line-height:1}
.schedule-match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.schedule-team{display:flex;align-items:center;gap:8px;min-width:0}
.schedule-team-left{justify-content:flex-end}
.schedule-team-right{justify-content:flex-start}
.schedule-team-name{font-size:12px;color:#63799f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px}
.schedule-team-code{font-size:12px;font-weight:700;color:#445f8d;letter-spacing:.08em}
.schedule-vs{font-size:13px;font-weight:700;color:#8fa1c1;letter-spacing:.08em}
.schedule-flag-img{width:40px;height:28px;object-fit:cover;border-radius:4px;border:1px solid rgba(168,188,218,0.35);box-shadow:0 2px 6px rgba(124,149,189,0.12);background:#fff}
.schedule-flag-emoji{font-size:26px;line-height:1}
.schedule-divider{height:1px;margin:12px 0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(177,197,230,0.95),rgba(255,255,255,0))}
a, a:hover{
    text-decoration: none;
    color: unset;
}

.menu-a .on{
    background-color: #004fab;
    border-radius: 50px;
    color: #fff;
    padding: 5px 30px;
}


.indexbody{
    width: 100%;
    height: 10px;
    display: flex;
    flex-direction: column;
    background-color: #04274e;
}

.pcmenu{
    width: 100%;
    height: 95px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.menu-a{
    font-size: 18px;
    color: #004fab;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.menu-a a{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    transition: all 0.3s ease 0s;
    border-bottom: transparent 2px solid;
}

.menu-a a:hover{
    border-bottom: #004fab 2px solid;
}

.menu-a .noline:hover{
    border-bottom: transparent 2px solid;
}

.menu-b{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobilemenu{
    display:none;
}

.mobilemenu-backdrop{
    display:none;
}

.ibtn-1{
    border-radius: 50px;
    font-size: 20px;
    color: #fff;
    text-shadow: #bda896 0 1px;
    background: linear-gradient(to left, #f2d4ba, #c6a488);
    padding: 5px 30px;
    transition: all 0.3s ease 0s;
    margin-right: 40px;
    flex-shrink: 0;
}

.ibtn-2{
    border-radius: 50px;
    font-size: 20px;
    color: #fff;
    text-shadow: #2e990f 0 1px;
    background: linear-gradient(to left, #95e323, #37be11);
    padding: 5px 30px;
    transition: all 0.3s ease 0s;
    margin-right: 40px;
    flex-shrink: 0;
}


/* banner */
.pc-index-banner{
    width: 100%;
    height: 35.729vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(./../img/pc-index-banner.webp) center center / 100% 100%;
}


.index-h2{
    font-size: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    padding: 50px 0;
    color: #004fab;
    font-weight: 300;
    line-height: 60px; 
}



/* 直播 */
.videxbox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
}

/* 容器設定 */
        .video-wrapper {
            position: relative;
            width: 600px;
            height: 400px;
            background: #000;
            margin-right: 30px;
        }
        /* 讓 iframe 填滿容器，並停用原本的點擊事件以免觸發暫停 */
        #player {
            width: 100%;
            height: 100%;
            pointer-events: none; /* 暫時讓點擊穿透到容器上 */
        }
        /* 覆蓋層：負責偵測點擊 */
        .click-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            cursor: pointer;
        }

.video-txtbox{
    width: 480px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 40px;
}

.video-txtbox .vth1{
    width: 100%;
    font-size: 36px;
    font-weight: bold;
    color: #004fab;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 20px;
}

.video-txtbox .vth2{
    width: 100%;
    font-size: 16px;
    color: #535353;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 30px;
    font-weight: 300;
}

.toppage{
    width: 92px;
    height: 91px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}

@media (max-width: 900px){
    body.mobilemenu-open{
        overflow:hidden;
    }

    .videxbox{
        flex-direction:column;
        align-items:center;
        gap:20px;
        padding:0 14px;
    }

    .video{
        width:100%;
    }

    .video-wrapper{
        width:100%;
        max-width:100%;
        height:auto;
        aspect-ratio:3 / 2;
        margin-right:0;
    }

    .videxbox > img{
        width:min(100%, 240px);
        height:auto;
    }

    .video-txtbox{
        width:100%;
        margin-left:0;
        align-items:center;
        text-align:center;
    }

    .video-txtbox .vth1,
    .video-txtbox .vth2{
        justify-content:center;
        align-items:center;
        text-align:center;
    }

    .video-txtbox img{
        width:min(100%, 280px);
        height:auto;
    }

    .pcmenu{
        display:none;
    }

    .mobilemenu{
        display:block;
        position:sticky;
        top:0;
        z-index:60;
        padding:0 14px 14px;
        background:linear-gradient(180deg,rgba(234,243,250,0.96) 0%,rgba(234,243,250,0.88) 100%);
        backdrop-filter:blur(10px);
    }

    .mobilemenu-bar{
        height:78px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:16px;
    }

    .mobilemenu-logo{
        display:inline-flex;
        align-items:center;
        max-width:180px;
    }

    .mobilemenu-logo img{
        width:100%;
        max-width:150px;
        height:auto;
        display:block;
    }

    .mobilemenu-toggle{
        width:54px;
        height:54px;
        border:none;
        border-radius:18px;
        background:rgba(255,255,255,0.92);
        box-shadow:0 10px 22px rgba(132,162,210,0.18);
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:6px;
        cursor:pointer;
        transition:transform .28s ease, box-shadow .28s ease, background-color .28s ease;
    }

    .mobilemenu-toggle:hover{
        transform:translateY(-1px);
        box-shadow:0 14px 28px rgba(132,162,210,0.22);
    }

    .mobilemenu-toggle span{
        width:24px;
        height:2px;
        border-radius:999px;
        background:#4d6897;
        transition:transform .28s ease, opacity .22s ease;
        transform-origin:center;
    }

    .mobilemenu.is-open .mobilemenu-toggle span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .mobilemenu.is-open .mobilemenu-toggle span:nth-child(2){
        opacity:0;
    }

    .mobilemenu.is-open .mobilemenu-toggle span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .mobilemenu-backdrop{
        display:block;
        position:fixed;
        inset:0;
        border:none;
        background:rgba(18,34,60,0.22);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .28s ease, visibility .28s ease;
    }

    .mobilemenu.is-open .mobilemenu-backdrop{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .mobilemenu-panel{
        position:fixed;
        top:78px;
        left:14px;
        right:14px;
        padding:18px 16px 16px;
        border-radius:24px;
        background:rgba(255,255,255,0.97);
        border:1px solid rgba(188,206,235,0.7);
        box-shadow:0 18px 42px rgba(112,145,198,0.24);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-18px) scale(0.98);
        transform-origin:top center;
        transition:transform .32s cubic-bezier(.2,.8,.2,1), opacity .24s ease, visibility .24s ease;
        max-height:calc(100vh - 96px);
        overflow:auto;
    }

    .mobilemenu.is-open .mobilemenu-panel{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0) scale(1);
    }

    .mobilemenu-links{
        display:flex;
        flex-direction:column;
        gap:8px;
        margin-bottom:14px;
    }

    .mobilemenu-links a{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        min-height:48px;
        padding:0 16px;
        border-radius:16px;
        font-size:16px;
        font-weight:700;
        color:#48638f;
        background:linear-gradient(180deg,#f9fbff 0%,#edf4ff 100%);
        border:1px solid rgba(197,213,237,0.72);
        transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .mobilemenu-links a:hover{
        transform:translateX(2px);
        border-color:rgba(128,158,208,0.82);
        box-shadow:0 10px 20px rgba(151,178,220,0.14);
    }

    .mobilemenu-actions{
        display:flex;
        flex-direction:column;
        gap:10px;
    }

    .mobilemenu-actions .ibtn-1,
    .mobilemenu-actions .ibtn-2{
        width:100%;
        margin-right:0;
        padding:10px 20px;
        justify-content:center;
        font-size:17px;
        text-align:center;
    }

    .section{
        margin: 0 14px 80px;
        padding: 1.6rem 1rem 1.5rem;
        border-radius: 22px;
    }

    .tabs{
        width: 100%;
    }

    .tab{
        min-width: 72px;
        font-size: 13px;
        padding: 9px 14px;
    }

    .carousel-wrap{
        padding: 0;
    }

    .carousel-track{
        gap: 16px;
    }

    .match-card{
        min-height: 418px;
        padding: 1.1rem 0.85rem 0.9rem;
    }

    .schedule-team-name{
        max-width: 78px;
        font-size: 11px;
    }

    .schedule-day-team-name{
        max-width: 86px;
        font-size: 13px;
    }

    .schedule-day-matchup{
        gap:8px;
    }

    .schedule-day-vs{
        font-size:16px;
    }

    .schedule-team-code,
    .schedule-vs{
        font-size: 11px;
    }

    .schedule-flag-img{
        width: 34px;
        height: 24px;
    }
}



@media (max-width: 480px){
    .pc-index-banner{
        width: 100%;
        height: 133.33vw;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(./../img/m-index-banner.webp) center center / 100% 100%;
    }

    .toppage{
        width: 50px;
        height: 50px;
    }

    .toppage img{
        width: 100%;
        height: 100%;
    }

    .index-h2{
        font-size: 30px;
        font-size: 18px;
        line-height: 30px;
        padding: 30px 0;
    }

    .c2img{
        width: 100%;
    }

    .mobilemenu{
        padding:0 10px 0px;
    }

    .mobilemenu-bar{
        height:72px;
    }

    .mobilemenu-panel{
        left:10px;
        right:10px;
        top:72px;
        border-radius:20px;
        padding:16px 14px 14px;
    }

    .mobilemenu-logo img{
        max-width:124px;
    }

    .mobilemenu-toggle{
        width:50px;
        height:50px;
        border-radius:16px;
    }
}