@charset "UTF-8";
/*思源黑體*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

/*reset*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td,
iframe,
button,
a {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    letter-spacing: 0.7px;
    vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box;
    line-height: 100%;
    font-weight: 300;
}

body {
    color: #1b1b1b;
    background: #fff;
    font: 18px/100% "Noto Sans TC", sans-serif;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
}

a {
    color: #1b1b1b;
    text-decoration: none;
}

a:hover {
    transition-duration: 0.3s;
    color: #A2C0DD;
}

button {
    background: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    font-size: 1rem;
}

ol,
ul {
    list-style: none;
}

table {
    width: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

input,
button,
textarea,
select,
optgroup,
option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: none;
}

/*reset end*/

.mobile {
    display: none;
}

/*-----------------頁面-----------------*/
.wrapper {
    min-height: 100vh;
    position: relative;
    padding-top: 84px;
}

.pagesize {
    max-width: 1200px;
    margin: 0 auto;
}

.container.container02 {
    padding: 20px 0 40px;
    background: #f6f6f6;
}

.contentInner {
    height: 100%;
    background: #fff;
    border-radius: 10px;
}

.contentInner .innerBox {
    padding: 20px;
}

/*header*/
.header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 84px;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0 80px 0 80px;
    background: #FFFFFF;
    background-size: cover;
    z-index: 9999;
    transition: 0.2s;
    box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.2)
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 32px
}

.logo-container .logo img {
    height: 32px;
    width: auto;
    display: block;
}

/*Banner背景圖*/
.banner {
    position: relative;
    background-image: url("../img/banner_bg.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding-bottom: 200px;
    padding-top: 48px;
}


.logo-container .divider {
    display: block;
    width: 1px;
    height: 24px;
    background-color: #393939;
    vertical-align: middle;
}



.overlay-img {
    background-image: url("../img/passport01.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    height: 600px;

}

/* .overlay-img-web {
    position: relative;
    display: block;
    max-width: 1400px;
    margin: 0 auto;
    z-index: 10;
    padding-top: 60px;
    margin-bottom: 40px;
}

.overlay-img-mobile{
    display: none;
} */

.activity-info {
    position: relative;
    max-width: 900px;
    padding: 40px 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.activity-info-title {
    background-image: url(../images/event_info_title.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    width: 400px;
    height: 90px;
    margin-bottom: 40px;
}

.activity-info .info-content {
    color: #3a3a3a;
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
}

.activity-info .info-note {
    color: #666666;
    font-size: 20px;
    font-weight: 400;
    line-height: 120%;
}

.activity-info .info-note {
    color: #666666;
    font-size: 20px;
    font-weight: 400;
    line-height: 150%;
}

.activity-info .purple {
    color: #594FD0;
    font-weight: 600;
}

/*優惠使用狀況*/
.wave-bg {
    background-image: url("../img/wave_BG.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: absolute;
    height: 100px;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
}

.sales {
    position: relative;
    background-color: #3F3798;
    /*
    background: url(../img/purpleBG.png) no-repeat top center / 100% auto;
    */
    padding: 60px 20px;
    z-index: 20;
    text-align: center;
}

.feature-deco-gift {
    background-image: url(../images/feature_deco_gift.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 80px;
    top: 16px;
    width: 130px;
    height: 128px;
}

.feature-deco-right {
    background-image: url(../images/feature_deco_right.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 250px;
    height: 215px;
}

.title {
    position: relative;
    display: inline-flex;
    height: 116px;
    margin-bottom: 40px;
}

.title-left {
    background-image: url(../images/title_left.png);
    background-repeat: no-repeat;
    width: 40px;
    height: 116px;
}

.title-right {
    background-image: url(../images/title_right.png);
    background-repeat: no-repeat;
    width: 40px;
    height: 116px;
}

.title-center {
    background-image: url(../images/title_center.png);
    /* background-repeat: no-repeat; */
    text-align: center;
    color: #FFF;
    font-size: 48px;
    font-weight: 700;
    font-style: italic;
    line-height: 120%;
    display: flex;
    align-items: center;
}

.sales .sales-content {
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 600;
    line-height: 150%;
    text-align: center;
    margin-bottom: 40px;
}

/* .sales-cards {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    padding: 0 80px 0;
}

.sales-cards .swiper {
    padding: 0 8px 0 0;
} */

.card-wrapper {
    margin-bottom: 40px;
}


/* .sales-cards .card-wrapper {
    box-sizing: border-box;
} */

/* 單張卡片基礎樣式 */
.card-item-used,
.card-item-unused {
    position: relative;
    /* 讓內部的 status-tag 可以絕對定位 */
    background-color: #f2f2f2;
    border-radius: 24px;
    height: 214px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    box-shadow: 4px 4px 0px rgba(128, 128, 128, 1);
    /* 卡片下方灰色厚度陰影 */
    margin-bottom: 10px;
}

.card-item-used {
    border: 4px solid #808080;
}

.card-item-unused {
    background-color: #ffffff;
    border: 4px solid #F5800A;
    box-shadow: 4px 4px 0px rgba(245, 128, 10, 1);

}

.status-tag {
    position: absolute;
    top: 0px;
    right: -1px;
    padding: 8px 16px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    border-radius: 0 20px 0 8px;
}

.card-item-used .status-tag {
    background-color: #808080;
}

.card-item-unused .status-tag {
    background-color: #3f3da5;
}

.card-title-container {
    display: flex;
    justify-content: center;
    margin: auto 0;
    gap: 8px;
}

.sales .card-title {
    font-size: 1.75rem;
    font-weight: bold;
    color: #3f3da5;
    text-align: center;
    margin: auto 0;
    /* white-space: nowrap; */
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.card-footer .date {
    font-size: 1.5rem;
    font-weight: bold;
    color: #05367B;
}

.card-footer .author {
    font-size: 1.5rem;
    font-weight: 500;
    color: #3A3A3A;
}

/* 7. 左右切換箭頭按鈕 */
.arrow-btn {
    width: 40px;
    height: 40px;
    border-radius: 99px;
    border: none;
    background-color: #E6e6e6;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.prev-btn {
    background-color: #E6e6e6;
    color: #808080;
}

.next-btn {
    background-color: #FFF;
    color: #05367B;
}

/* 畫出左箭頭 < */
.prev-btn::after {
    content: "<";
    font-weight: bold;
    font-size: 20px;
}

/* 畫出右箭頭 > */
.next-btn::after {
    content: ">";
    font-weight: bold;
    font-size: 20px;
}

/* 8. 下方分頁指示點 */
.sales-cards .swiper-pagination {
    /* display: flex;
    justify-content: center;
    gap: 8px; */
    bottom: -48px;
}

.swiper-pagination-bullet {
    width: 30px;
    height: 8px;
    background-color: #999999;
    /* 未選中為灰色線條 */
    border-radius: 99px;
}

.swiper-pagination-bullet-active {
    width: 60px;
    /* 選中的線條較長 */
    background-color: #ffffff;
    /* 選中為白色 */
    border-radius: 99px;
}

.swiper-button-next,
.swiper-button-prev {
    color: #05367B;
    background-color: #fff;
    width: 40px;
    height: 40px;
    padding: 12px;
    border-radius: 99px;
}

/* .swiper-button-disabled {
    color: #808080;
    background-color: #E6E6E6;
    width: 40px;
    height: 40px;
    padding: 12px;
    border-radius: 99px;
} */

/* 未登入訊息 */
.message {
    /* background-color:#3F3798 ; */
    padding: 0px 20px 40px 20px;
}

.message-container {
    position: relative;
    width: fit-content;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 20px 40px;
    background-color: #FFF;
    border-radius: 24px;
    border: 4px solid #daccfa;
    box-shadow: 4px 4px 0px #daccfa;

}

.message p {
    color: #3F3798;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 150%;
}

.message .click {
    position: absolute;
    width: 40px;
    height: 60px;
    bottom: -40px;
    right: 8px;
}

.message a {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}


/*小教室日曆*/
.calendar {
    position: relative;
    background-color: #3F3798;
    padding: 60px 20px;
    margin-top: -2px;
    z-index: 20;
    text-align: center;
}

.calendar .cal-card-link {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/* .calendar-title {
    background-image: url(../images/calendar_title.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    max-width: 340px;
    height: 114px;
    margin: 0 auto;
    margin-bottom: 40px;
} */

.feature-deco-left {
    background-image: url(../images/featute_deco_-left.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    left: 0px;
    top: -100px;
    width: 320px;
    height: 280px;
}

.feature-deco-calendar {
    background-image: url(../images/feature_deco_calendar.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    right: 180px;
    top: 0px;
    width: 70px;
    height: 70px;
}

/* 容器設定 (max-width: 1280px，自動換行) */
.calendar-container {
    max-width: 1280px;
    display: grid;
    /* 自動填滿：每張卡片最小 320px，放不下時自動換行 */
    grid-template-columns: repeat(auto-fill, minmax(302px, 1fr));
    gap: 24px;
    margin: 0 auto;
}

.sales-cards {
    max-width: 1280px;
    display: grid;
    /* 自動填滿：每張卡片最小 320px，放不下時自動換行 */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin: 0 auto;
}

/* 卡片通用樣式 */
.cal-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 24px;
    padding: 24px;
    border: 4px solid transparent;
    /* 預設外框 */
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: #3F3798;
    /* 預設文字顏色 (深藍) */
}

/* 卡片頭部 (標題列與日期) */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 標題前的彩條標誌 */
.indicator {
    width: 2px;
    height: 1.5rem;
    border-radius: 2px;
    background-color: currentColor;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3a3a3a;
}

.card-date {
    font-size: 1.5rem;
    font-weight: 500;
    color: #05367B;
}

/* 卡片內層內容區塊 */
.card-body {
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    ;
}

.event-name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 150%;
    margin-bottom: 8px;
}

.event-time {
    font-size: 1.5rem;
    font-weight: 500;
}

/* 1. 水藍色系 (藍邊 + 淺藍內塊 + 水藍標誌) */
.theme-blue {
    border-color: #70B7DB;
}

.theme-blue .indicator {
    background-color: #4FC2FC;
}

.theme-blue .card-body {
    background-color: #D6EBF5;
}

/* 2. 橘色系 (橘邊 + 淺橘內塊 + 橘標誌) */
.theme-orange {
    border-color: #FF831A;
}

.theme-orange .indicator {
    background-color: #FF831A;
}

.theme-orange .card-body {
    background-color: #FFE3CC;
}

/* 3. 粉紅色系 (紅邊 + 淺粉內塊 + 紅標誌) */
.theme-pink {
    border-color: #E83131;
}

.theme-pink .indicator {
    background-color: #E83131;
}

.theme-pink .card-body {
    background-color: #FAD1D1;
}

/* 4. 黃色系 (黃邊 + 淺黃內塊 + 黃標誌) */
.theme-yellow {
    border-color: #DDDD3C;
}

.theme-yellow .indicator {
    background-color: #E8E831;
}

.theme-yellow .card-body {
    background-color: #F7F7D4;
}

/* 5. 紫色系 (紫邊 + 淺紫內塊 + 紫標誌) */
.theme-purple {
    border-color: #A348D1;
}

.theme-purple .indicator {
    background-color: #A348D1;
}

.theme-purple .card-body {
    background-color: #EBD6F5;
}

/* 6. 薄荷綠色系 (綠邊 + 淺綠內塊 + 綠標誌) */
.theme-green {
    border-color: #70DBD2;
}

.theme-green .indicator {
    background-color: #5EEDD5;
}

.theme-green .card-body {
    background-color: #D6F5F0;
}

/* 7. 淡紫系 */
.theme-lightpurple {
    border-color: #5366C6;
}

.theme-lightpurple .indicator {
    background-color: #314FE8;
}

.theme-lightpurple .card-body {
    background-color: #D6DBF5;
}

/* 8. 淡紅系 */
.theme-red {
    border-color: #DB7094;
}

.theme-red .indicator {
    background-color: #ED5E8E;
}

.theme-red .card-body {
    background-color: #F5D6E0;
}

/*熱門課程推薦*/

.course {
    position: relative;
    padding: 60px 20px;
}

.course-title {
    background-image: url(../images/course_title.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 300px;
    height: 114px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.coin-icon {
    background-image: url(../images/coin_icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 80px;
    top: 30px;
    width: 120px;
    height: 110px;
}

.coupon {
    position: relative;
    display: block;
    width: 480px;
    height: 176px;
    margin: 0 auto;
}

/*課程列表*/
.course-list {
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    margin: 0 auto;
}

.course-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid #808080;
    /* 分隔線 */
}

/* 課程資訊 */
.course-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.course-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3a3a3a;
}

.course-author {
    font-size: 1.25rem;
    font-weight: 500;
    color: #3a3a3a;
}

/* 右側價格與按鈕組合 */
.course-action {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-shrink: 0;
}

.course-price {
    font-size: 1.5rem;
    font-weight: 500;
    color: #747474;
}

.course-deco {
    background-image: url(../images/trending_courses.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 80px;
    top: 60px;
    width: 360px;
    height: 160px;
}

.course-dot {
    background-image: url(../images/course_dot.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 190px;
    top: 24px;
    width: 128px;
    height: 128px;
}

/* 紫藍漸層圓角按鈕 */
.btn-primary {
    background: linear-gradient(90deg, #844882 0%, #63abcf 100%);
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 99px;
    font-size: 1.5rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}


/* 什麼是星系學院護照 */
.passport {
    position: relative;
    padding: 40px 20px 40px 20px;
}

.passport-title {
    text-align: center;
    font-size: 3.25rem;
    font-weight: 700;
    color: #05367B;
    line-height: 120%;
    margin-bottom: 40px;
}

.passport p {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 150%;
    color: #3a3a3a;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 10px;
}




/*注意事項*/
.note {
    position: relative;
    padding: 40px 20px 80px 20px;
}

.note-title {
    text-align: center;
    font-size: 3.25rem;
    font-weight: 700;
    color: #05367B;
    line-height: 120%;
    margin-bottom: 40px;
}

.bottom-deco {
    background-image: url(../images/bottom_deco.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 600px;
    height: 346px;
    z-index: -1;
}

.note-deco {
    background-image: url(../images/important_notes.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 80px;
    top: 20px;
    width: 410px;
    height: 160px;
    z-index: -1;
}

.note p {
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 150%;
    color: #3a3a3a;
    max-width: 1280px;
    margin: 0 auto;
    margin-bottom: 10px;
}

.floating_btn {
    position: fixed;
    right: 8px;
    bottom: 40px;
    z-index: 99;
    display: block;
    width: 80px;
    height: 80px;
}

.floating_btn img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain
}

@media screen and (max-width: 1200px) {
    .feature-deco-left {
        display: none;
    }

    .feature-deco-right {
        display: none;
    }

    .feature-deco-gift {
        left: auto;
        right: 20px;
        top: -60px;
        width: 70px;
        height: 69px;
    }

    .feature-deco-calendar {
        left: 40px;
        right: auto;
        top: 0px;
        width: 60px;
        height: 60px;
        transform: scaleX(-1)
    }

    .course-title-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .coupon {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    .note-deco,
    .course-deco,
    .course-dot {
        display: none;
    }

    .bottom-deco {
        width: 300px;
        height: 174px;
        bottom: 0px;
    }


}


@media screen and (max-width: 786px) {
    .mobile {
        display: block;
    }

    /* ================= 
       全域與共用設定
       ================= */
    .wrapper {
        padding-top: 60px;
    }


    /* 隱藏不必要的絕對定位裝飾圖案，避免超出螢幕或遮擋內容[cite: 1, 2]
    .feature-deco-gift, 
    .feature-deco-right, 
    .feature-deco-left, 
    .feature-deco-calendar, 
    .coin-icon, 
    .coupon, 
    .note-deco, 
    .bottom-deco {
        display: none;
    } */

    /* ================= 
       Header 區塊
       ================= */
    .header {
        height: 60px;
        padding: 0 20px;
        /* 縮小左右間距[cite: 2] */
    }

    .logo-container {
        gap: 16px;
    }

    .logo-container .logo img {
        height: 24px;
        /* 縮小 Logo 尺寸[cite: 1, 2] */
    }

    /* ================= 
        Banner 與活動說明
       ================= */

    .banner {
        position: relative;
        background-image: url("../img/m_banner_bg.png");
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        padding: 48px 20px 100px 20px;

    }

    .overlay-img {
        background-image: url("../img/m_passport01.png");
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        display: block;
        height: 500px;
        max-width: 450px;
        margin: 0 auto;
    }

    .activity-info {
        padding: 0 20px;
        margin-bottom: 30px;
    }

    .activity-info-title {
        background-image: url(../images/m_event_info_title.png);
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        max-width: 200px;
        max-height: 60px;
        margin-bottom: 16px;
    }

    .activity-info .info-content {
        font-size: 18px;
        /* 縮小文字[cite: 2] */
    }

    .activity-info .info-note {
        font-size: 16px;
        /* 縮小文字[cite: 2] */
    }

    /* ================= 
       優惠使用狀況 (Sales)
       ================= */
    .sales {
        height: auto;
        /* 取消固定高度[cite: 2] */
        padding: 60px 20px;
    }

    .sales-title {
        max-width: 100%;
        margin-bottom: 24px;
    }

    .sales .sales-content {
        font-size: 1rem;
        margin-bottom: 40px;
    }

    /* .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    .swiper {
        overflow: visible;
    } */

    /* .sales-cards .swiper-pagination {
        bottom: -16px;
    } */

    .title-center {
        font-size: 2rem;
    }

    /* 卡片區塊改為可左右滑動 (Swipe) 的模式[cite: 1, 2] */
    .sales-cards {
        padding: 0px;

    }

    .sales-cards .card-wrapper {
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
    }

    .sales-cards .card-wrapper .card-item-used,
    .sales-cards .card-wrapper .card-item-unused {
        flex: 0 0 85%;
        /* 讓手機版顯示出一點下一張卡片的邊緣，提示可滑動[cite: 1, 2] */
        scroll-snap-align: center;
        height: auto;
        min-height: 180px;
    }

    /* 隱藏桌機版的左右點擊按鈕[cite: 1, 2] */
    .arrow-btn {
        display: none;
    }

    .sales .card-title {
        font-size: 1.5rem;
    }

    .card-footer .date,
    .card-footer .author {
        font-size: 1.25rem;
    }

    .message p {
        font-size: 1.25rem;
    }

    /* ================= 
       小教室日曆 (Calendar)
       ================= */
    .calendar {
        padding: 40px 20px;
    }

    /* .calendar-title {
        max-width: 100%;
    } */
    .calendar-container {
        grid-template-columns: 1fr;
        /* 改為單欄直排[cite: 1, 2] */
        gap: 16px;
    }

    /* 標題前的彩條標誌 */
    .indicator {
        width: 2px;
        height: 1.5rem;
        border-radius: 2px;
        background-color: currentColor;
    }

    .calendar .card-title {
        font-size: 1.25rem;
    }

    .card-date {
        font-size: 1.25rem;
    }

    .event-name {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .event-time {
        font-size: 1.25rem;
    }

    /* ================= 
       課程列表 (Course)
       ================= */
    .course {
        padding: 40px 20px;
    }

    .course-title {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .coin-icon {
        display: none;
    }

    .course-item {
        flex-direction: column;
        /* 課程資訊與購買按鈕改為上下排列[cite: 1, 2] */
        align-items: flex-start;
        gap: 16px;
        padding: 12px 0;
    }

    .course-info {
        gap: 8px;
    }

    .course-action {
        width: 100%;
        justify-content: space-between;
        gap: 16px;
    }

    .course-name {
        font-size: 1.125rem;
    }

    .course-author {
        font-size: 1rem;
    }

    .course-price {
        font-size: 1.125rem;
    }

    .btn-primary {
        font-size: 1.25rem;
        padding: 12px 24px;
    }


    /* ================= 
       注意事項 (Note)
       ================= */
    .passport,
    .note {
        padding: 40px 20px;
    }

    .passport-title,
    .note-title {
        font-size: 2rem;
        /* 縮小標題字體[cite: 1, 2] */
        margin-bottom: 24px;
    }

    .passport p,
    .note p {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .floating_btn {
        right: 4px;
        bottom: 24px;
        width: 56px;
        height: 56px;
    }
}