.products_slider .slider_pager a { display: inline-block; min-width: 100px; padding: .5em; margin-right: .5em; margin-bottom: .5em; border: #898787 1px solid; border-radius: 5px; color: #898787; font-size: 1rem; text-align: center; vertical-align: middle; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.products_slider .slider_pager a:hover, .products_slider .slider_pager a.active { background-color: #ffd66b; border-color: #ffd66b; color: #4a4a4a; }
.greenB.products_slider .slider_pager a { border: #fff 1px solid; border-radius: 5px; color: #fff; }
.greenB.products_slider .slider_pager a:hover, .page_block.typeD .products_slider .slider_pager a.active { background-color: #ffd66b; border-color: #ffd66b; color: #4a4a4a; }


/* --- 1. 最外層容器：確保箭頭有空間可以放 --- */
.products_slider {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* --- 2. 內容容器：塞滿 1300px 並確保不切掉外面的箭頭 --- */
.products_slider_inner {
    width: 100% !important;
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    /* 關鍵：必須是 visible，否則絕對定位到外面的箭頭會看不見 */
    overflow: visible !important;
}

/* --- 3. 箭頭樣式與外移定位 --- */
.product-prev,
.product-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #757575 !important;
    /* 改為藍色，白色在亮背景會看不見 */
    transition: all 0.3s;
    z-index: 99;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


/* 將箭頭移出 inner 到兩側空邊 */
.product-prev {
    left: -90px;
}

.product-next {
    right: -90px;
}

/* --- 4. Pager 按鈕美化 --- */
.slider_pager {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slider_pager a {
    display: inline-block;
    padding: 10px;
    text-decoration: none;
    color: #555;
    font-size: 17px;
    transition: all 0.3s ease;
}

.slider_pager a.active {
    color: #0056b3;
    font-weight: bold;
    border-bottom: 4px solid #0056b3;
    /* 改用邊框做底線，更穩定 */
}

/* --- 5. Swiper Slide 佈局：解決文字超出問題 --- */
.products_feature_slider .swiper {
    width: 100%;
}

.products_feature_slider .swiper-slide {
    display: flex;
    gap: 60px;
    padding: 40px 0;
    box-sizing: border-box;
    align-items: flex-start;
}

.products_feature_slider .pic {
    flex: 0 0 50%;
    /* 圖片佔一半 */
    max-width: 40%;
}

.products_feature_slider .pic img {
    margin: 10px 0 0 10px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.products_feature_slider .text_block {
    flex: 1;
    /* 關鍵：防止 Flex 項目撐開容器導致文字超出 */
    min-width: 0;
    word-wrap: break-word;
    overflow: hidden;
}

.products_feature_slider .text_block h3 {
    margin-top: 0;
    font-size: 24px;
}

.products_feature_slider .text_block p {
    line-height: 1.8;
}

/* --- 6. RWD 手機版切換 --- */
@media (max-width: 1400px) {
    .products_slider {
        padding: 0 40px;
        /* 縮小外部間距 */
    }

    .product-prev {
        left: -60px;
    }

    .product-next {
        right: -60px;
    }
}

@media (max-width: 1024px) {
    .products_feature_slider .swiper-slide {
        flex-direction: column;
        gap: 25px;
    }

    .products_feature_slider .text_block {
        text-align: left;
    }

    .products_feature_slider .pic {
        margin-right: 10px;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .products_slider {
        padding: 0 20px;
    }

    .product-prev,
    .product-next {
        display: none !important;
        /* 手機版通常建議隱藏箭頭，改用手指滑動 */
    }
}