@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@200;400;600;700;900&family=Raleway:wght@300;400;600&display=swap');

/* --- 基礎環境與底部修復 --- */
html { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
body {
    margin: 0; padding: 0;
    font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;
    font-size: 18px;
    background-color: #333; /* 消滅底部粉紅縫隙 */
    color: #333;
    width: 100%;
}

#main-wrapper {
    background-image: url("../../img/bg_pic01.png");
    background-size: contain;
    background-repeat: repeat-y;
    background-color: #9dcd79;
    min-height: 100vh;
    width: 100%;
    padding-bottom: 40px;
}

.container { max-width: 1100px !important; width: 95% !important; margin: 0 auto !important; }
.row { margin: 0 !important; }

/* --- 卡片與垂直置中 --- */
.card.MT-5 {
    border: none !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12) !important;
    background: #ffffff !important;
    padding: 3.5rem 3rem !important;
    border-radius: 20px !important;
    margin-top: 3rem !important;
}

.title_blue { font-size: 2.1rem !important; font-weight: 700 !important; color: #00a7df !important; }
.title_green { font-size: 2.1rem !important; font-weight: 700 !important; color: #90c31f !important; }

.text_o {
    background: #fdf2f2 !important;
    padding: 22px !important;
    border-left: 6px solid #fc4622 !important;
    font-size: 1.35rem !important;
    font-weight: 600 !important;
    margin: 25px 0 35px 0 !important;
}

/* --- 數據框顏色與樣式 --- */
.stat-box {
    border-radius: 15px;
    padding: 22px 15px;
    text-align: center;
    background: #fff;
    height: 100%;
}
.stat-box h4 { font-size: 2.2rem; font-weight: 800; margin-bottom: 8px; }
.stat-box p { font-size: 1.15rem; font-weight: 600; line-height: 1.5; margin: 0; color: #666; }

.border-blue { border: 3px solid #00a7df !important; color: #00a7df !important; }
.border-red { border: 3px solid #e85653 !important; color: #e85653 !important; }
.border-green { border: 3px solid #90c31f !important; color: #90c31f !important; }

/* --- 導引文案 --- */
.promo-quote {
    background-color: #fff9f8 !important;
    border-top: 1px solid #ffdeda;
    border-bottom: 1px solid #ffdeda;
    padding: 35px 25px !important;
    margin: 45px 0 !important;
    border-radius: 12px;
}
.promo-quote p { color: #e85653 !important; font-size: 1.45rem !important; font-weight: 700 !important; line-height: 1.9 !important; margin: 0; }

/* --- 按鈕動效 --- */
.btn-blue, .btn-green {
    width: 280px !important;
    height: 65px !important;
    border-radius: 50px !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: none !important;
    color: #fff !important;
    text-decoration: none !important;
}
.btn-blue { background-color: #00a7df !important; }
.btn-green { background-color: #90c31f !important; }
.btn-blue:hover, .btn-green:hover { transform: translateY(-6px) !important; filter: brightness(1.08); box-shadow: 0 15px 30px rgba(0,0,0,0.22) !important; }

/* --- 影片區修正：強制縮短高度 --- */
.video-section { padding-top: 30px; }
.video-container {
    width: 100%;
    max-width: 720px; /* 縮小寬度限制，讓它看起來更精緻 */
    margin: 0 auto;
    aspect-ratio: 16 / 9; /* 強制 16:9 比例 */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    overflow: hidden;
    background: #000;
}
.video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

#footer { background-color: #333 !important; color: #fff !important; padding: 45px 0 !important; text-align: center; font-size: 0.95rem; width: 100%; }
.back-to-top { position: fixed !important; right: 25px !important; bottom: 25px !important; width: 62px !important; z-index: 9999 !important; cursor: pointer !important; }

.bar { display: block; margin: 0 auto; text-align: center; }

@media (max-width: 768px) {
    .card.MT-5 { padding: 2.5rem 1.5rem !important; }
    .btn-blue, .btn-green { width: 100% !important; }
    .video-container { aspect-ratio: 16 / 9; }
}