/* 卡片區塊跑馬燈 樣式   =========================================== */


.slidCardWrap {
    padding: 32px 20px;
}

/* ===========================================
   Slider
=========================================== */

.slidCardSlider {
    width: 100%;
    overflow: hidden;
}

.slidCardSlider>div {
    width: 100%;
}

/* ===========================================
   Track
=========================================== */

.slidCardTrack {

    display: flex;

    align-items: stretch;

    gap: 20px;

    transition: transform .6s ease;

    will-change: transform;

}

/* ===========================================
   Item Wrapper
=========================================== */

.slidCardTrack>div {
    flex: 0 0 calc((100% - 60px) / 4);
    display: flex;
    min-width: 0;
}

/* ===========================================
   RWD
=========================================== */

@media (max-width:1100px) {
    .slidCardTrack>div {
        flex-basis: calc((100% - 40px) / 3);
    }
}

@media (max-width:800px) {
    .slidCardTrack>div {
        flex-basis: calc((100% - 20px) / 2);
    }
}

@media (max-width:450px) {
    .slidCardTrack>div {
        flex-basis: 100%;
    }
}

/* ===========================================
   section
=========================================== */

.slidCardItem,
.slidCardItem>div {
    width: 100%;
    display: flex;
}

/* ===========================================
   Card
=========================================== */

.slidCardBox {

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    background: #fff;

}

/* ===========================================
   Navigation
=========================================== */

.slidCardNav {

    position: relative;display: flex;flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 24px;

}

.slidCardNav button {

    width: 12px;

    height: 12px;

    border: none;

    border-radius: 50%;

    background: #fff;

    cursor: pointer;

    padding: 0;

    transition: background .25s;

}

.slidCardNav button.active,
.slidCardNav button:hover {
    background: #e4007f;
}




/* slidCardBox 底部文字 ============================================================= */
.slidCardWrap .slidCardBox .uc-caption {
    color: #333;
    font-size: 1.8rem;
    margin: 30px auto auto;
    padding: 0 16px;
    left: unset !important;
    right: unset !important;
    bottom: unset !important;
    transform: unset !important;
    position: relative !important;
}
.slidCardWrap .slidCardBox a {
    padding: 0 0 30px;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
}
@media (max-width:800px) {
    .slidCardWrap .slidCardBox .uc-caption {font-size: 1.2rem;}
}