/* -------------------
    Reset & helpers
-------------------*/
* { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background-color: #f8f8f8;
}

/* -------------------
    Fixed Header
-------------------*/
body.header-fixed .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
    transition: all .3s ease;
}

/* -------------------
    Navigation bar
-------------------*/
.bg-light {
    background-color: #caecf4 !important;
    padding: 0 !important;
    border: none !important;
    margin-bottom: 0 !important;
}

.navbar > .container-fluid {
    justify-content: start;
}

button.navbar-toggler {
    border: none;
    background: transparent;
}
/* Hover & active state */
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus-within {
    background: rgb(233, 252, 255); /* 灰色反應 */
}
.navbar-nav > li > a.active {
    background: rgb(233, 252, 255);/* 灰色反應 */
}

.poster-wrapper {
    position: absolute;       /* 建立定位上下文 */
    width: 100vw;
    /*overflow: hidden;*/
}

.poster-img {
    width: 100vw;
    /*width: 100%;*/
    /*height: 23vh;*/
    top: 0%; left: 0%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}

.poster-content {
position: absolute;
top: 30%; left: 54%;
transform: translate(-65%, -20%); /* 完全置中 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.494);
z-index: 1;                /* 疊在圖片之上 */
line-height: 1.2;
color: #fff;
font-weight:bold;
flex-wrap: nowrap;
}

.poster-title {
    padding-left: 200px;
}

.poster-logo {
    min-width: 150px;
    margin-left: 40px; /* ✅ 與標題拉開距離 */
}

.poster-logo img {
    height: 40px;
    display: block;
    margin-top: 4px;
    max-width: 100%;
}

.sponsor-logo {
    min-width: 150px;
    margin-left: 40px; /* ✅ 與標題拉開距離 */
}

.sponsor-logo img {
    height: 30px;
    display: block;
    margin-top: 7px;
    max-width: 100%;
}

/* 如螢幕寬高比小於 665/325，<picture> 會自動載入備用底圖；
    這裡可加額外版面調整 (字級、行距等) */
@media (max-aspect-ratio: 665/325) {
    .poster-img-2 {
        width: 100%;
        opacity: 1;
        display: block;           /* 消除底部空白 */
    }

    .logo-block {
        display: none;
    }
}


/* -------------------
    Content area below fixed header
-------------------*/
.main-content {
    padding: 0px;
    padding-top: 40px; /* same as (或大於) header 高度，避免被蓋住 */
}
.markdown-img {
    background-size: cover;
    background-attachment: scroll;
    padding: 10vw;
    color: black;
    
}
iframe {
    width: 100%;
    height: 80vh;
    border: none;
}
    .table-responsive {
    overflow-x: inherit;
}
.footer_backimg {
    background-size: cover;
    background-attachment: scroll;
    height: 60vh;
    color: black;
    display:block;
}