/* ==========================================
   Hero Banner 表頭圖片區塊樣式
========================================== */
.hero-banner-bg {
    background-color: #111827; 
    background-image: url('../img/subscription/kv.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#header-section {
    
}


/* ==========================================
   第二區塊：特色介紹區塊
========================================== */
#feature-section {
    
}
.feature-gradient-bg {
    /* 從右到左 (to left)，淺灰 (#F0F2F5) 到純白 (#FFFFFF) */
    background: linear-gradient(to left, #F0F2F5 0%, #FFFFFF 100%);
}

#feature-section ul li svg{
    top:-2px;
    position: relative;
}


/* ==========================================
   第三區塊：主題探索區塊 (漸層遮罩)
========================================== */

#skill-section{
    background-color:#F9F9F9;
}

#skill-section .skill-bg {
    width:100%!important;
    height:auto;
    min-width:1920px;
}

#skill-section .topic-gradient-mask {
    background: linear-gradient(to right, rgba(249, 249, 249, 0.97) 0%,  rgba(249, 249, 249, 0.90) 85%,  rgba(249, 249, 249, 0) 100%);
}

/* ==========================================
   第四區塊：學習外語區塊
========================================== */
.bg-lang-section {
    background-color: #D7DDE2;
}

.bg-lang-left {
    background-color: #587BA9;
}

.bg-lang-right {
    background-color: #9F633D;
}

.bg-lang-bottom {
    background-color: #777E96;
}


/* ==========================================
   第五區塊：訂閱價格表
========================================== */
#price-section #price-plus-card {
    border: 1px solid #FF383C; 
}
#price-section #price-plus-card .tag{
    background-color: #FF383C; 
    color: #fff; 
}   

#price-section #price-plus-card .plus-tag {
    top: -2px;
    position: relative;
}

#price-section li svg {
    top:-4px;
    position: relative;
}



/* ==========================================
   行動裝置樣式：平板、手機
========================================== */
@media screen and (max-width: 992px) {

}


@media screen and (max-width: 576px) {
    #skill-section .skill-bg {
            min-width: 1600px;
        }
}