.mp圖片播放器2 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --marquee-width: 100%;
    --marquee-height: 300px;
    /* --marquee-elements: 12; */ /* defined with JavaScript */
    --marquee-elements-displayed: 5;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 8s);
}

.mp圖片播放器2 .picturePlayer {
    width: var(--marquee-width);
    height: var(--marquee-height);
    overflow: hidden;
    position: relative;
}






.mp圖片播放器2 .marquee-content {
    list-style: none;
    height: 100%;
    display: flex;
    animation: mqppscrolling var(--marquee-animation-duration) linear infinite;
}

    .mp圖片播放器2 .marquee-content:hover {
        animation-play-state: paused;
    }

@keyframes mqppscrolling {
    0% {
        transform: translateX(0);
    }



    100% {

        transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));

    }

}

.mp圖片播放器2 .marquee-content li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: var(--marquee-element-width);
    max-height: 100%;
    white-space: nowrap;
    position:relative;
}


    .mp圖片播放器2 .marquee-content li a {

        display: block;
        width: 100%;

        height: 100%;
    }


    .mp圖片播放器2 .marquee-content li img {

        width: 100%;
        height: 100%;
    }

.mp圖片播放器2 .marquee-content li .caption
{
    position : absolute;
    left : 5%;
    bottom : 4%;
    color:#FFFFFF;
    text-shadow:1px 1px 1px #000000;
}

@media (max-width: 480px) {
    :root {
        --marquee-elements-displayed: 1;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --marquee-elements-displayed: 2;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    :root {
        --marquee-elements-displayed: 3;
    }
}

@media (min-width: 980px) and (max-width:1199px) {
    :root {
        --marquee-elements-displayed: 3;
    }
}

@media (min-width: 1200px) and (max-width:1919px) {
    :root {
        --marquee-elements-displayed: 3;
    }
}

@media (min-width: 1920px) {
    :root {
        --marquee-elements-displayed: 3;
    }
}