@import url("https://font.emtech.cc/css/GenSenRoundedTW");
 

/* --- 1. 全域變數與重置 --- */
:root {
    --color-yellow: #ffdd00;
    --color-orange: #f39800;
    --color-green: #7ec339;
    --color-blue: #3fa9f5;
    --text-dark: #4a4a4a;
    --text-gray: #666;
}

body {
    font-family: "GenSenRoundedTW","jfOpenHuninn","Microsoft JhengHei", "PingFang TC", sans-serif;
    color: #3D3A39;
    line-height: 1.5;
    overflow-x: hidden;
    font-size: 28px;
    font-weight: normal;
    letter-spacing: 3px;
}


/* 圖片工具類 */
.img-responsive {display: block;max-width: 100%;height: auto;}
.center-block { margin-left: auto; margin-right: auto; }
.relative { position: relative; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mb-0 {margin-bottom: 0;}
.mb-40 { margin-bottom: 40px; }
.p-0{padding: 0; padding-top:0; padding-left: 0; padding-right: 0; padding-bottom: 0;}
.pt-0{padding-top: 0 !important;}
.pb-0{padding-bottom: 0 !important;}
.mt-3em{margin-top: 3em;}
.mt-4em{margin-top: 4em;}
.mt-5em{margin-top: 5em;}
.mt--4em{margin-top: -4em;}
.mt--5em{margin-top: -5em;}
.mt--6em{margin-top: -6em;}
.mt--7em{margin-top: -7em;}
.mt--8em{margin-top: -8em;}
.mt--10em{margin-top: -10em;}
.mb-4em{margin-bottom: 4em;}
.mb-5em, .section-header.mb-5em{margin-bottom: 5em;/* width: 60%; */margin-left: auto;margin-right: auto;}
.mb-10em{margin-bottom: 10em;}
.width-60{width: 60%;}
.width-80{width: 80%;}

/* 區塊間距 */
.section-padding {padding: 50px 0;}
.section-header {margin-bottom: 40px;}

/* 標題圖片控制 (確保手機版不會太大) */
.title-img {
    max-width: 100%;
    height: auto;
    /* 為了在桌面版不過大，可以設個上限 */
    /* max-width: 450px; */
    display: inline-block;
    /* width: 80%; */
}

/* --- 2. 背景顏色類 --- */
.hero-section {background-color: #ffdd00;padding-top: 0px;padding-bottom: 50px;/* background-image: url(../images/hsinyi_202601_banner.jpg); *//* background-size: cover; */}
.bg-light-yellow {background-color: #fef6d2;}
.bg-white {background-color: #ffffff;}
.bg-music-yellow {background-color: #fef6d2;} /* 音樂區較深的黃 */
.bg-music-blue {background-color: #fae799;padding-bottom: 80px;}

/* --- 3. Hero 區域 --- */
.hero-bunny {
    /* 讓兔子稍微有點重疊感，如果不需要可拿掉 margin-bottom */
    margin-bottom: -20px; 
}

.features-row {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 15px; /* 注意：舊瀏覽器可能不支援 gap，改用 margin */
}

.feature-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
    margin: 0 5px; /* 替代 gap */
}
.dodo-1 .display-flex{padding-top: 80px;padding-left: 0px;}
.dodo-1{padding-bottom: 0;}
.dodo-2 .row{display: flex;}
.dodo-2a{display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 4%;
    padding-right: 0;
}
.dodo-3{padding-top: 70px;}
.dodo-4{padding-top:85px;}
.dodo-4 .container.lg{padding-left: 3%;
    padding-right: 0;}
.dodo-5{}
.dodo-5 .col-md-5{padding:0;}
.dodo-5 .col-md-7{padding: 0 3%;font-size: 32px;line-height: 1.6;}
.bg-orange { background: #f39800; }
.bg-blue { background: #3fa9f5; }
.bg-yellow { background: #eac100; }
.bg-green { background: #7ec339; }

/* --- 4. 產品卡片 --- */
.product-card {
    background: #fef6d2;
    border-radius: 15px;
    padding: 20px;
    /* box-shadow: 0 5px 15px rgba(0,0,0,0.05); */
    margin-bottom: 30px;
    text-align: center;
}
.product-card h4 {color: var(--color-green);font-weight: bold;margin-top: 15px;display: none;}
.product-card .desc {font-size: 25px;text-align: left;min-height: 120px;overflow: hidden;letter-spacing: 3px;margin-top: 20px;}
.product-highlight-row{display: flex;align-items: center;justify-content: space-evenly;}

.price-area {
    background: #eee;
    border-radius: 30px;
    padding: 5px 10px;
    display: inline-block;
    margin-top: 20px;
}
.price { font-weight: bold; color: #555; margin-right: 10px; }

/* 按鈕樣式 */
.btn-buy {
    background-color: #f39800;
    color: #fff;
    border-radius: 50px;
    font-size: 26px;
    padding: 5px 15px;
    font-weight: bold;
    margin: 0px 0 0 0;
}
.btn-buy:hover { background-color: #d98700; color: #fff; }
.dodo-4 .price-area, .dodo-5 .price-area{
    border-radius: 50px;
    padding: 10px 20px;
}
.dodo-4 .price-area .price-large, .dodo-5 .price-area .price-large{font-size: 28px;font-weight: bold;}
.dodo-4 .btn-buy, .dodo-5 .btn-buy{
    font-size: 30px;
    padding: 5px 20px;
}
.dodo-5 h4{font-size: 26px;}
.dodo-6 .content p{width:90%;margin-top: 20px;padding-left: 4%;}
.dodo-6 .price-area{
    border-radius: 50px;
    padding: 5px 10px;
}
.dodo-6 .price-area .price-large{font-size: 36px;}
.dodo-6 .btn-buy{
    font-size: 26px;
    padding: 5px 20px;
}
.dodo-7{padding-top: 150px;}

/* --- 5. 專家區塊 --- */
.expert-block {
    background: #fff;
    border-radius: 20px; /* 這裡簡化了原本的不對稱圓角 */
    padding: 30px;
    margin-bottom: 30px;
    /* box-shadow: 0 5px 10px rgba(0,0,0,0.05); */
}
.expert-block small{font-size: 80%; letter-spacing: 1px;}
.expert-img {/* border: 5px solid #ffdd00; *//* width: 120px; *//* height: 120px; */margin-bottom: 15px;max-width: 80%;}
img.expert-img.img2{max-width: 100%;}
.btn-blue { background: #3fa9f5; color: white; border-radius: 20px; }

/* --- 6. 叮叮噹橫式卡片 --- */
.white-box-h {
    background: #fae799;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
     /* Clearfix */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
.white-box-h .content {/* margin-left: 130px; */}
.teacher-name{font-size: 48px;border-bottom: 5px solid #f39800;font-weight: 700;width: 65%;line-height: 1.6;letter-spacing: 10px;margin: 0 auto 20px auto;}



/* --- 7. Flexbox 垂直置中 (Bootstrap 3 補強) --- */
@media (min-width: 768px) {
    .display-flex {display: flex;flex-wrap: wrap;}
    .display-flex.flex-start { align-items: flex-start;}
    .v-center { display: flex; flex-direction: column; justify-content: center; }
    img.mt--10em {
    margin-top: -6em;
}
.white-box-h {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
}

/* --- 10. 口碑推薦區塊樣式 --- */

/* 灰底卡片 */
.review-card {
    background-color: #f2f2f2; /* 淺灰背景 */
    border-radius: 30px;       /* 較大的圓角 */
    padding: 40px 30px;
    margin-bottom: 40px;       /* 手機版堆疊時的間距 */
    position: relative;        /* 為了讓照片可以浮動定位(如果需要) */
}

/* 照片圓形外框 */
.review-img-wrapper img {
    /* width: 50%; */
    /* height: 50%; */
    object-fit: contain;
    /* border: 5px solid #fff; */    /* 照片白框 */
    /* margin-bottom: 20px; */
    margin-top: -20%;
    min-height: 195px;
}

/* 文字樣式 */
.review-title {
    color: #f39800; /* 橘色標題 */
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    margin-bottom: 15px;
    /* 模擬文字描邊效果(選用) */
    text-shadow: 1px 1px 0 #fff; 
}

.review-quote {
    color: #f39800;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    margin-bottom: 15px;
}

.review-desc {
    color: #555;
    font-size: 28px;
    line-height: 1.5;
    text-align: justify; /* 左右對齊讓文字塊較整齊 */
    padding: 0 20px;
    letter-spacing: 0;
}

/* 淺藍色按鈕 (看更多) */
.btn-blue-light {
    /* background-color: #3fa9f5; */
    color: #fff;
    border-radius: 30px;
    padding: 8px 30px;
    font-size: 0px;
    /* border: 2px solid #fff; */ /* 白色邊框 */
    box-shadow: none;
    transition: all 0.3s;
    background-image: url(../images/hsinyi_202601_btn.gif);
    width: 260px;
    height: 110px;
    background-size: contain;
    background-repeat: no-repeat;
}

.btn-blue-light:hover {
    /* background-color: #2c8ac4; */
    /* color: #fff; */
    text-decoration: none;
    background-image: url(../images/hsinyi_202601_btn-h.gif);
    box-shadow: none; 
}

/* --- 頁尾裝飾定位 --- */
.footer-deco {
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 180px; /* 根據需求調整大小 */
    z-index: 10;
    /* 手機版可能需要隱藏或縮小 */
}

/* 確保波浪圖撐滿寬度 */
.width-100 {
    width: 100%;
}

.footer-wave {
    /* background-color: #ffffff; */ /* 與最上方呼應的黃色 */
    line-height: 0;            /* 消除圖片下方的預設空白 */
}
.footer-wave img{
    position: absolute;
    margin-top: -5em;
    display: block;
}

.embed-responsive-16by9 {
    padding-bottom: 59%;
}

@media (min-width: 1400px) {
    .container.lg {
        width: 1200px;
    }
    .container.lg2 {
        width: 1360px;
    }
    .container.md {
        width: 1100px;
    }
    .container.md2 {
        width: 1000px;
    }
    .teacher-name {
    font-size: 48px;
    width: 80%;
    margin: 0 auto 20px auto;
}
.white-box-h {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
}
img.p1, img.p2{max-width: 45%;}
}

@media (min-width: 1500px) {
    .container.md {
        width: 1140px;
    }
    .container.lg {
        width: 1200px;
    }
    .container.lg2 {
        width: 1400px;
    }
    img.mt--10em {
    margin-top: -10em;
}
    .teacher-name {
    width: 70%;
    margin: 0 auto 20px auto;
}
img.p1, img.p2{max-width: 100%;width: 50%;}
}
@media (max-width: 1200px) {
.teacher-name {
    width: 100%;
}
}
/* 手機版微調 */
@media (max-width: 767px) {
    body {
    line-height: 1.5;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1px;
    }
    .small, small {
    font-size: 100%;
}
    .hero-bunny {
    margin-bottom: 30px;
}
    .section-padding {
    padding: 0px 0;
    }

.dodo-1 .display-flex{padding-top: 0px; padding-left: 0px;}
.dodo-1{padding-bottom: 0;}
.dodo-2 .row{display: block;}
.dodo-2a{display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
    padding-right: 15px;}
.dodo-3{padding-top:0px;}
.dodo-4{padding-top:0px;}
.dodo-4 .container.lg{padding-left: 15px;
    padding-right: 15px;}
.dodo-4 .price-area, .dodo-5 .price-area {
    border-radius: 50px;
    padding: 5px 10px;
    display: inline-block;
    margin-top: 30px;
}
.dodo-5 .price-area{margin-top: 10px;}
.dodo-4 .price-area .price-large, .dodo-5 .price-area .price-large {
    font-size: 20px;
}
.dodo-4 .btn-buy, .dodo-5 .btn-buy {
    font-size: 26px;
    padding: 5px 15px;
}
.width-60, .width-80{width: 100%}
.mt-3em,.mt-4em {
    margin-top: 0em;
}
.dodo-5 .col-md-7 {
    padding: 0 15px;
    font-size: 20px;
    line-height: 1.6;
}
.dodo-5 .col-md-5 {
    padding: 0 15px;
}
.mt--10em {
    margin-top: 0em;
}
.dodo-7{padding-top: 0px;}
    .mt--4em {
    margin-top: -3em;
    }
    .section-header {
    margin-bottom: 20px;
}
.product-card .desc {
    font-size: 21px;
    min-height: auto;
    letter-spacing: 1px;
}
.text-right {
    text-align: center; 
}
.text-right .price-area{
    margin-bottom: 20px;
}

.mt--8em {
    margin-top: 1em;
}
img.img-responsive.mt--10em{
    height: 160px;
    object-fit: cover;
    object-position: left;
}
.bg-music-blue .img-responsive.center-block{margin-top: 20px;}
    .mt-40 {
    margin-top: 0px;
}
    .mt-50 {
    margin-top: 0px;
}
.product-card {
    padding: 10px;
    margin-bottom: 20px;
}

.white-box-h {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.white-box-h .content {
    margin-left: 0px;
    padding: 0 20px 20px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.white-box-h .content p{margin-top: 20px;}
.dodo-5 .v-center img, .white-box-h img{max-width: 85%;margin: 0 auto;}

    .title-img {
    margin-top: 40px;
    }
    .title-img.line {
    max-width: 100%;
    height: 30px;
    display: inline-block;
    object-fit: cover;
}
.product-highlight-row {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.btn-buy {
    margin: 0px 0 0 0;
}
.btn-blue-light {
    width: 100%;
    height: 80px;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}
    .review-card {
        padding: 30px 20px;
        margin-bottom: 80px;
    }
    .expert-block{padding:0;}
    .teacher-name {
    font-size: 48px;
    width: 80%;
    line-height: 1.6;
    letter-spacing: 10px;
    margin: 0 auto 20px auto
}
img.expert-img.img1{width: 70%;}
img.expert-img.img2{max-width: 100%;}
.review-img-wrapper img {
    width: 80%;
    height: 80%;
    min-height: auto;
}
.expert-block small {
    font-size: 100%;
    letter-spacing: 1px;
}
.review-img-wrapper img:nth-of-type(2) {
    width: 100%;
    height: 100%;
}
.review-desc {
    font-size: 20px;
    line-height: 1.6;
    text-align: justify;
    padding: 0 10px;
    letter-spacing: 0;
}
    .footer-deco {
        width: 100px; /* 手機版圖案縮小 */
        left: 0;
    }
    .footer-wave img {
    position: absolute;
    margin-top: -5em;
    display: block;
    height: 200px;
    object-fit: cover;
    width: 100%;
    object-position: left;
}
}