/* --- 全域設定 --- */
:root {
    --primary-color: #0056b3;
    --secondary-color: #d9534f;
    --accent-color: #e67e22;
    --bg-color: #fbeaeb;
    --text-color: #333;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    overflow-x: hidden; /* 防止橫向卷軸 */
}

a { text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }

/* --- 動畫(由上而下) --- */
@keyframes slideDownFade {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-item {
    opacity: 0;
    animation: slideDownFade 0.8s ease-out forwards;
}

/* 延遲設定 */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 0.7s; }
.delay-4 { animation-delay: 0.9s; }
.delay-5 { animation-delay: 1.1s; }
.delay-6 { animation-delay: 1.3s; }
.delay-7 { animation-delay: 1.5s; }

/* --- Header 區域 --- */
.hero-section {
    position: relative;
    width: 100%;
    height: 560px; 
    background: url('../images/kv.jpg') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

/* --- 大標題 --- */
.hero-title-area {
    position: absolute;
    bottom: 40px;
    /* --- 標題固定在背景圖的相對位置 --- */
    left: 20%; /* 以畫面中心為基準 */
    transform: translateX(-50%); /* 往回拉50%，確保容器置中 */
    width: 100%;
    max-width: 1200px; /* 設定一個最大寬度，通常與背景圖的視覺設計寬度相符 */
    z-index: 20;
    padding: 0 20px;
    
    /* 使用flex讓圖片靠右或靠您想要的位置，這裡設為靠右 (flex-end) */
    /* 人物在右邊，標題要在人物左邊，可以把max-width縮小或用padding-right控制 */
    display: flex;
    justify-content: center;
    padding-right: 300px;
}

.title-img {
    max-width: 900px; 
    width: 670px;
    height: auto;
    display: inline-block;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); 
}

/* --- 主內容 --- */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 20px;
}

/* --- 內文 --- */
.intro-text {
    font-size: 1.6rem;
    margin-bottom: 40px;
    text-align: justify;
    line-height: 1.6;
    color: #231815;
}

/* --- 重點強調 --- */
.check-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.point-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border-left: 10px solid var(--secondary-color);
    transition: transform 0.3s;
}

.point-item:hover { transform: translateX(10px); }

.icon-box {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin-right: 10px;
    min-width: 40px;
    text-align: center;
}

.text-box {
    font-size: 2.6rem;
    font-weight: 700;
    color: #1b2a75;
}

/* --- 講座資訊 --- */
.speaker-event-info {
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 40px;
}

.event-title {
    text-align: center;
    background: #ed6c00;
    color: #ffffff;
    padding: 12px;
    border-radius: 50px;
    margin-bottom: 30px;
    font-size: 3.5rem;
    box-shadow: 0 4px 8px rgba(0,50,100,0.3);
}

.event-title small {
    font-size: 0.5em;
    margin-left: 15px;
}

.speaker-profile {
    text-align: left;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #9d9c9c;
}

.speaker-profile h3 { 
    font-size: 2.2rem;
    color: #1d2a75; 
    margin-bottom: 6px;
}

.speaker-profile p { 
    font-size: 1.8rem;
}

.event-dates p { 
    font-size: 1.8rem; 
    margin-bottom: 5px;
}

.highlight-big {
    font-size: 3rem;
    color: #ed6c00;
    font-weight: 900;
}

.text-small {
    font-size: 1.7rem;
}

/* --- 贈書 --- */
.offer-section {
    margin-bottom: 40px;
}

.offer-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.offer-img img {
    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);
    max-width: 100%;
    height: auto;
}

.offer-text h3 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: #231714;
}

.contact-line {
   font-size: 2rem;
   color: #d71718;
   font-weight: bold; 
}

.highlight-phone {
    font-size: 3.5rem;
    font-weight: 900;
    color: #d71718;
    display: block;
    margin-top: -20px;
}

/* --- 按鈕 --- */
.cta-section {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 35px;
}

.btn {
    display: inline-block;
    padding: 15px 30px; 
    min-width: 280px;
    border-radius: 60px;
    
    /* 字體設定 */
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    
    /* --- 水晶按鈕樣式 --- */
    /* 背景漸層：從亮藍到深藍 */
    background: linear-gradient(180deg, #3da9ff 0%, #007bff 50%, #0062cc 100%);
    
    /* 光澤與陰影效果 */
    box-shadow: 
    inset 0 15px 12px -5px rgba(255,255,255,0.3), /* 上半部的白色反光 (Gloss) */
    text-shadow: 0 2px 3px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-3px); /* 微微浮起 */
    filter: brightness(1.1);     /* 變亮一點 */
}


/* --- 注意事項 --- */
footer h4 {
    font-size: 1.7rem;
    color: #d71718;
}

footer ol {
    padding-left: 25px;
}

.notes {
    font-size: 1.5rem;
    color: #231815;
    padding: 25px 0px 10px 0px;
    line-height: 40px;
    border-top: 1px solid #9d9c9c;
}

/* RWD 手機版 */
@media (max-width: 768px) {

    .hero-section {
        background-image: url('../images/kv-m.jpg'); 
        background-position: top center;
        background-repeat: no-repeat;
        /* --- 強制讓圖片寬度剛好等於螢幕寬度 --- */
        background-size: 100% auto; /* 寬度100%，高度自動 */

        height: 115vw; /* 高度依照螢幕寬度比例自動調整，設130vw~150vw適合直式手機圖 */
        min-height: 420px; /* 最少高度 */
    }

    .hero-title-area {
        width: 100%;
        bottom: 30px;
        justify-content: center;
        padding: 0 10px;
        left: 0;
    }

    .title-img {
        width: 100%;
        height: auto;
    }

    .container {
        padding: 10px 15px;
    }

    .check-list {
        margin-top: -10px;
    }
    
    .intro-text { 
        font-size: 1.2rem; 
        text-align: left; 
    }
    
    .text-box { 
        font-size: 1.5rem; 
    } 
    
    .event-title { 
        font-size: 2rem;
        padding: 10px;
        line-height: 32px;
    }

    .event-title small { 
        display: block; 
        margin: 5px 0 0 0; 
        font-size: 0.8em; 
    }

    .speaker-event-info {
        padding: 0px;
    }

    .speaker-profile h3 { 
        font-size: 1.6rem; 
    }

    .speaker-profile p { 
        font-size: 1.4rem;
    }


    .event-dates { 
        margin-top: -10px;
        margin-bottom: -10px; 
    }
    
    .event-dates p { 
        font-size: 1.4rem;
        line-height: 30px; 
    }

    .highlight-big { 
        font-size: 1.8rem; 
    }

    .text-small { 
        font-size: 1.4rem; 
    }

    .offer-layout { 
        flex-direction: column; 
        text-align: center;
    }

    .offer-text h3 { 
        font-size: 1.3rem;
        line-height: 28px;
        margin-top: -15px; 
    }

    .contact-line { 
        font-size: 1.8rem;
        line-height: 42px;
        margin-top: 10px;
        margin-bottom: -10px; 
    }

    .highlight-phone { 
        font-size: 3rem; 
        margin-top: 0px; 
    }

    /* 垂直 */
    .cta-section { 
        flex-direction: column; 
        gap: 15px; 
        padding: 0 10px; 
    }

    .btn { 
        width: 100%; 
        text-align: center; 
        font-size: 2.2rem;
        padding: 15px;
    }
    
    footer h4 {
        text-align: center;
    }

    .notes { 
        font-size: 1.2rem; 
        line-height: 1.6; 
    }

}