#homePage {    
    .bg-top{        
        /* 移除固定的比例，改用背景屬性控制 */
        width: 100%;
        min-height: calc(100vw / (var(--base-ratio)));
        height: 100cqh; /* 至少跟視窗一樣高 */
        max-height: calc(100vw * (800 / 390));
        background-image: url('resource/bg-home.webp');
        background-size: cover;      /* 關鍵：強制填滿並裁切多餘部分 */
        background-position: center; /* 關鍵：從中間開始顯示，往上下延伸 */
    }
    .bg-fill{
        background: #090dde;
    }

    .arrow-btn{
        position: absolute;
        top: 91%;
    }
}

header{ position: static}

#introPage {
    .bg-fill { background: white; }
    .bg-bottom{
        background-image: url('resource/bg-app.webp');
    }

    main{
        padding: 0 9.5cqw;
        gap: 4.5cqw;
    }
    .arrow-btn{
        width: 48.5cqw;
        height: auto;
        aspect-ratio: 189/36;
        margin: 0.6cqw auto 0;
    }
}
.intro-title{
    padding-top: 2.7cqw;
    letter-spacing: 0.8cqw;
    font-size: 4.6cqw;
    color:  #1e4991 
}
.intro-card {
    border: 0.26cqw solid #1e4991;
    border-radius: 4.1cqw;
    background: radial-gradient(circle,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 100%);;
    color: #595757;
    padding:3cqw 0 8.4cqw 4.3cqw;

    .text-zh{
        padding-right: 3cqw;
        letter-spacing: 0.4cqw;
        line-height: 1.29;
        font-weight: 400;
        font-size: 3.6cqw;
        .wide{letter-spacing: 0.66cqw;}
    }
    .text-en{
        padding-top: 1.2cqw;
        letter-spacing: 0.24cqw;
        line-height: 1.25;
        font-weight: 400;
        font-size: 3.1cqw;
    }
}