/* .banner {
    position: relative;
    border-radius: 20px;
    box-shadow: 0px 5px 20px 5px #000000c9;
    overflow: auto;
    margin-bottom: 20px;
}

.banner-img {
    position: relative;
}

.banner-item {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
} */

.lar-sli {
    border-radius: 20px;
    box-shadow: 0px 5px 20px 5px #000000c9;
    overflow: auto;
}

.img-item {
    position: relative;
}

.img-item>img {
    width: 100%;
    height: auto;
    -webkit-user-drag: none;
    /* 禁止拖曳 (適用於 WebKit 瀏覽器：Chrome, Safari, Edge) */
    user-drag: none;
    /* 標準屬性 (部分瀏覽器支援) */
    -webkit-user-select: none;
    /* 禁止選取 (Chrome, Safari, Edge) */
    -moz-user-select: none;
    /* 禁止選取 (Firefox) */
    -ms-user-select: none;
    /* 禁止選取 (IE/Edge) */
    user-select: none;
    /* 標準屬性 */
    border-radius: 20px;

}

.banner-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2vw;
    width: 50%;
    text-align: center;
}

.banner-text>h2 {
    color: var(--color-w100);
    font-size: 2.5rem;
    letter-spacing: 0.4rem;
    font-weight: 700;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.8),
        /* 深色主陰影，提供清晰邊界 */
        -1px -1px 2px rgba(255, 255, 255, 0.2);
    /* 淺色反向陰影，提升立體感 */
}

.banner-text>P {
    color: var(--color-w65);
    font-size: 2rem;
    margin-bottom: 32px;
    letter-spacing: 0.2rem;
}

/* .banner-item.item1 {
    background: url("../img/banner-01.jpg") no-repeat;
    background-size: 100%;
}

.banner-item.item2 {
    background: url("../img/banner-02.jpg") no-repeat;
    background-size: 100%;
}

.banner-item.item3 {
    background: url("../img/banner-03.jpg") no-repeat;
    background-size: 100%;
}

.banner-item.item4 {
    background: url("../img/banner-04.jpg") no-repeat;
    background-size: 100%;
}

.banner-item.item5 {
    background: url("../img/banner-05.jpg") no-repeat;
    background-size: 100%;
}

.banner-item.item6 {
    background: url("../img/banner-06.jpg") no-repeat;
    background-size: 100%;
}

.banner-item.item7 {
    background: url("../img/banner-07.jpg") no-repeat;
    background-size: 100%;
}

.banner-item.item8 {
    background: url("../img/banner-08.jpg") no-repeat;
    background-size: 100%;
} 

.knobbox {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 15px;
    z-index: 30;
    font-size: 0;
    line-height: 0;
}

.knobbox .knob {
    display: inline-block;
    margin: 0 5px;
    width: 30px;
    height: 7px;
    cursor: pointer;
    margin-bottom: 5px;
    background: var(--color-w65);
    border-radius: 15px;
}

.knobbox .knob.active {
    background: var(--color-btn);
}*/

.h5BN {
    display: none;
}

@media screen and (max-width:767px) {
    /* .banner {
        height: auto;
        margin-top: 15px;
    } */

    .banner-text {
        width: 100%;
        left: inherit;
    }

    .banner-text>p {
        font-size: 1.2rem;
    }

    .banner-text>h2 {
        font-size: 2rem;
        letter-spacing: 0.2rem;
    }

    .banner-text>h3 {
        font-size: 1.2rem;
        margin-bottom: 16px;
        letter-spacing: 0.1rem;
    }

    .pcBN {
        display: none;
    }

    .h5BN {
        display: block;
    }
}

@media screen and (min-width:768px) and (max-width: 1024px) {
    /* .banner {
        height: auto;
    } */

    .h5BN {
        display: none;
    }

    .banner-text>p {
        font-size: 1.2rem;
    }

    .banner-text>h2 {
        font-size: 2.2rem;
        letter-spacing: 0.2rem;
    }

    .banner-text>h3 {
        font-size: 1.2rem;
        margin-bottom: 16px;
        letter-spacing: 0.1rem;
    }
}