@import url("https://fonts.googleapis.com/css?family=Ubuntu");

.stickyAudioPlayerBoxcompact .player-data .bar-main, .stickyAudioPlayerBoxcompact .player-data .bar-main .bar-progress, .stickyAudioPlayerBoxcompact .player-download .input-download, .stickyAudioPlayerBoxcompact .player-play .input-pause, .stickyAudioPlayerBoxcompact .player-play .input-play, .stickyAudioPlayerBoxcompact .player-play .input-stop, .stickyAudioPlayerBoxcompact .player-volume .bar-main, .stickyAudioPlayerBoxcompact .player-volume .bar-main .bar-progress {
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.stickyAudioPlayerBox, .stickyAudioPlayerBox .player-data, .stickyAudioPlayerBox .player-data .bar-container, .stickyAudioPlayerBox .player-data .bar-main, .stickyAudioPlayerBox .player-data .small, .stickyAudioPlayerBox .player-data p, .stickyAudioPlayerBox .player-play .input-play, .stickyAudioPlayerBox .player-volume .input-mute, .stickyAudioPlayerBox .player-volume .input-volume, .stickyAudioPlayerBox .player-volume .input-volume-bar, .stickyAudioPlayerBoxcompact, .stickyAudioPlayerBoxcompact .player-data, .stickyAudioPlayerBoxcompact .player-data .bar-container, .stickyAudioPlayerBoxcompact .player-data .bar-main, .stickyAudioPlayerBoxcompact .player-data p, .stickyAudioPlayerBoxcompact .player-data p span, .stickyAudioPlayerBoxcompact .player-volume, .stickyAudioPlayerBoxcompact .player-volume .bar-main, .stickyAudioPlayerBoxcompact .player-volume .input-mute, .stickyAudioPlayerBoxcompact .player-volume .input-volume, .stickyAudioPlayerBoxcompact .player-volume .input-volume-bar, .stickyAudioPlayerBoxcompact > *, .stickyAudioPlayerBoxcompact figure, .stickyAudioPlayerBoxcompact figure img, .stickyAudioPlayerBoxcompact section, .stickyAudioPlayerBox div:first-child, .stickyAudioPlayerBox figure, .stickyAudioPlayerBox figure img, .stickyAudioPlayerBoxFloatingButton .input-go-down, .stickyAudioPlayerBoxFloatingButton .input-go-up, .stickyAudioPlayerBox section {
    float: none; /**整個播放器置中,原本是設 left */
    display: inline-block;
    background-color: #ECF5FF;
}

    .stickyAudioPlayerBox div, .stickyAudioPlayerBox header, .stickyAudioPlayerBox input, .stickyAudioPlayerBox section, .stickyAudioPlayerBox select, .stickyAudioPlayerBox small, .stickyAudioPlayerBox span, .stickyAudioPlayerBox table {
        border: 0;
        padding: 0;
        margin: 0;
        font-family: inherit;
        font-size: 1em;
        display: inline-block;
        font-weight: normal;
    }

    .hover:hover, .stickyAudioPlayerBox .player-download .input-download:hover, .stickyAudioPlayerBox .player-play .input-pause:hover, .stickyAudioPlayerBox .player-play .input-play:hover, .stickyAudioPlayerBox .player-play .input-stop:hover {
        background-color: #e0e0e0;
    }

    .hover-compact:hover, .stickyAudioPlayerBoxcompact .player-download .input-download:hover, .stickyAudioPlayerBoxcompact .player-play .input-pause:hover, .stickyAudioPlayerBoxcompact .player-play .input-play:hover, .stickyAudioPlayerBoxcompact .player-play .input-stop:hover {
        background-color: rgba(260, 255, 255, 0.99);
    }

    .stickyAudioPlayerBox .player-download .input-download, .stickyAudioPlayerBox .player-play .input-pause, .stickyAudioPlayerBox .player-play .input-play, .stickyAudioPlayerBox .player-play .input-stop {
        background-color: #ffffff;
        color: #4a4b4c;
        padding: 5px !important;
        width: 65px;
        height: 65px;
        margin: 5px;
        border: 1px solid #d1d1d1;
        cursor: pointer;
        -webkit-transition: background-color 0.8s ease;
        -moz-transition: background-color 0.8s ease;
        -ms-transition: background-color 0.8s ease;
        -o-transition: background-color 0.8s ease;
        transition: background-color 0.8s ease;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
    }

    .stickyAudioPlayerBoxcompact .player-download .input-download, .stickyAudioPlayerBoxcompact .player-play .input-pause, .stickyAudioPlayerBoxcompact .player-play .input-play, .stickyAudioPlayerBoxcompact .player-play .input-stop {
        background-color: rgba(255, 255, 255, 0.5);
        color: #4a4b4c;
        width: 50px;
        height: 50px;
        margin: 5px;
        cursor: pointer;
        -webkit-transition: background-color 0.8s ease;
        -moz-transition: background-color 0.8s ease;
        -ms-transition: background-color 0.8s ease;
        -o-transition: background-color 0.8s ease;
        transition: background-color 0.8s ease;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -o-border-radius: 5px;
        -ms-border-radius: 5px;
    }

.stickyAudioPlayerBox {
    font-size: 14px;
    line-height: 1.42857143;
    margin: 0 0 10px;
}

    .stickyAudioPlayerBox .player-volume .input-mute, .stickyAudioPlayerBox .player-volume .input-volume, .stickyAudioPlayerBoxcompact .player-volume .input-mute, .stickyAudioPlayerBoxcompact .player-volume .input-volume, .stickyAudioPlayerBoxFloatingButton .input-go-down, .stickyAudioPlayerBoxFloatingButton .input-go-up {
        color: #4a4b4c;
        min-width: 25px;
        min-height: 35px;
        width: 30px;
        height: 35px;
        cursor: pointer;
        -webkit-transition: background-color 0.8s ease;
        -moz-transition: background-color 0.8s ease;
        -ms-transition: background-color 0.8s ease;
        -o-transition: background-color 0.8s ease;
        transition: background-color 0.8s ease;
    }

.stickyAudioPlayerBox {
    padding: 0px;
    margin: 0px;
    background: #ECF5FF; /*播放器的背景*/
    color: #000000; /*播放器的字色*/
    padding: 0.5% 0.5%;
    font-family: "Ubuntu", sans-serif;
    padding-bottom: 10px;
    width: 100%;
    /*border: .5px solid #d1d1d1;*/
    text-align: center;
    overflow: hidden;
    height: auto;
    z-index: 100001;
}

    .stickyAudioPlayerBox, .stickyAudioPlayerBox div, .stickyAudioPlayerBox section {
        -webkit-box-sizing: content-box !important;
        -moz-box-sizing: content-box !important;
        box-sizing: content-box !important;
    }

.stickyAudioPlayerBoxContainer {
    max-width: 100%;
    display: inline-block;
    max-height:50px;
}

.stickyAudioPlayerBox div:first-child {
    width: 100%;
}

.stickyAudioPlayerBox figure {
    width: 60px;
    height: auto;
    padding: 0px;
    padding-left: 0px;
    margin: 0px;
    margin: 5px;
}

    .stickyAudioPlayerBox figure img {
        width: 100% !important;
        height: auto;
        vertical-align: middle !important;
    }

.stickyAudioPlayerBox .player-play {
    padding: 0px 5px;
}

    .stickyAudioPlayerBox .player-play .input-play {
        background-image: url(/assets/img/stickyplayer/play.png);
        background-repeat: no-repeat;
        background-position: center;
        margin-top: 10px;
        width: 30px;
        height: 30px;
    }

    .stickyAudioPlayerBox .player-play .input-stop {
        background-image: url(/assets/img/stickyplayer/stop.png);
        background-repeat: no-repeat;
        background-position: center;
        margin-top: 10px;
        width: 30px;
        height: 30px;
        display: none;
    }

    .stickyAudioPlayerBox .player-play .input-pause {
        background-image: url(/assets/img/stickyplayer/pause.png);
        background-repeat: no-repeat;
        background-position: center;
        margin-top: 10px;
        width: 30px;
        height: 30px;
        display: none;
    }

.stickyAudioPlayerBox .player-data {
    text-align: left;
    overflow: hidden;
}

.stickyAudioPlayerBox .player-data {
    width: 55%;
}

    .stickyAudioPlayerBox .player-data p {
        width: 100%;
        margin: 0px;
        color: #ffffff;
        font-size: 1.3em;
        margin-top: 5px;
        margin-bottom: 2px;
    }

        .stickyAudioPlayerBox .player-data p span {
            width: 200%;
            position: relative;
        }

    .stickyAudioPlayerBox .player-data .bar-container, .stickyAudioPlayerBox .player-data .bar-main, .stickyAudioPlayerBox .player-data .small, .stickyAudioPlayerBox .player-volume .input-volume-bar {
        width: 100%;
    }

.stickyAudioPlayerBox .player-volume {
    margin-top: 28px;
    padding-left: 15px;
}

    .stickyAudioPlayerBox .player-volume .bar-container {
        padding-top: 5px;
    }

    .stickyAudioPlayerBox .player-data .bar-main, .stickyAudioPlayerBox .player-volume .bar-main {
        height: 18px;
        min-width: 80px;
        background-color: #ffffff;/*進度條的背景*/
        cursor: pointer;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
    }

.stickyAudioPlayerBox .player-data .bar-tile {
    background: #000000;/*移動進度條的時候出現的文字背景*/
    color: white;
    display: none;
    position: absolute;
    width: 55px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    text-align: center;
}

.stickyAudioPlayerBox .player-data .bar-main:hover .bar-tile {
    display: inline;
    float: left;
}

.stickyAudioPlayerBox .player-data .bar-main .bar-progress, .stickyAudioPlayerBox .player-volume .bar-main .bar-progress {
    background-color: #ff4500; /*進度條及音量條*/
    height: 14px;
    margin: 2px;
    width: 0%;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
}

    .stickyAudioPlayerBox .player-data .bar-main .bar-progress:hover {
        -webkit-transition: background-color 0.8s ease;
        -moz-transition: background-color 0.8s ease;
        -ms-transition: background-color 0.8s ease;
        -o-transition: background-color 0.8s ease;
        transition: background-color 0.8s ease;
        background-color: #ff844d;
    }

.stickyAudioPlayerBox .player-volume .input-volume {
    background-image: url(/assets/img/stickyplayer/speaker.png);
    background-repeat: no-repeat;
    /*background-color:#ffffff;*/
}

.stickyAudioPlayerBox .player-volume .input-mute {
    background-image: url(/assets/img/stickyplayer/mute.png);
    background-repeat: no-repeat;
    display: none;
    /*background-color: #ffffff;*/
}

.stickyAudioPlayerBoxFloatingButton {
    float: right;
    width: 30px;
    height: 15px;
    position: relative;
    top: -25px;
    border: 1px solid #d1d1d1;
    padding: 0px 5px;
    background-color: #d4d4d4;
    -webkit-transition: background-color 0.8s ease;
    -moz-transition: background-color 0.8s ease;
    -ms-transition: background-color 0.8s ease;
    -o-transition: background-color 0.8s ease;
    transition: background-color 0.8s ease;
}

    .stickyAudioPlayerBoxFloatingButton:hover {
        background-color: #f3f3f3;
    }

    .stickyAudioPlayerBoxFloatingButton .input-go-down {
        background-image: url(/assets/img/stickyplayer/row-down.png);
        background-repeat: no-repeat;
        background-position: center;
        min-width: 0;
        min-height: 0;
        width: 17px;
        height: 15px;
        position: absolute;
    }

    .stickyAudioPlayerBoxFloatingButton .input-go-up {
        background-image: url(/assets/img/stickyplayer/row-down.png);
        background-repeat: no-repeat;
        background-position: center;
        min-width: 0;
        min-height: 0;
        width: 17px;
        height: 15px;
        position: absolute;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

.stickyAudioPlayerBox .player-download {
    padding: 0px 5px;
}

    .stickyAudioPlayerBox .player-download .input-download {
        background-image: url(/assets/img/stickyplayer/download.png);
        background-repeat: no-repeat;
        background-position: center;
    }

@media screen and (max-width:950px) {
    .stickyAudioPlayerBox .player-download .input-download, .stickyAudioPlayerBox .player-play .input-pause, .stickyAudioPlayerBox .player-play .input-play, .stickyAudioPlayerBox .player-play .input-stop {
        width: 35px;
        height: 35px;
        margin-top: 15px;
    }

    .stickyAudioPlayerBox .player-data p {
        font-size: 1em;
        height: 25px;
        overflow: hidden;
    }

    .stickyAudioPlayerBox figure {
        width: auto !important;
    }

        .stickyAudioPlayerBox figure img {
            width: 50px !important;
            margin-top: 7px;
        }
}

@media screen and (max-width:760px) {
    .stickyAudioPlayerBox .player-data {
        width: 40%;
    }
}

@media screen and (max-width:590px) {
    .stickyAudioPlayerBox .player-data {
        width: 25%;
    }

    .stickyAudioPlayerBox .player-download .input-download, .stickyAudioPlayerBox .player-play .input-pause, .stickyAudioPlayerBox .player-play .input-play, .stickyAudioPlayerBox .player-play .input-stop {
        width: 25px;
        height: 25px;
        margin-top: 18px;
    }

    .stickyAudioPlayerBox .player-data .bar-main, .stickyAudioPlayerBox .player-volume .bar-main {
        height: 18px;
        min-width: 50px;
    }

    .stickyAudioPlayerBox .player-data .bar-tile {
        width: 45px;
    }
}

@media screen and (max-width:400px) {
    .stickyAudioPlayerBox figure img {
        width: 30px;
    }

    .stickyAudioPlayerBox .player-data .bar-main, .stickyAudioPlayerBox .player-volume .bar-main {
        height: 18px;
        min-width: 30px;
    }
}

.stickyAudioPlayerBox .player-data p span {
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
    color:#000;/*聲音檔標題的文字顏色*/
}

@-webkit-keyframes marquee {
    0% {
        left: 10%;
    }

    10% {
        left: 2%;
    }

    50% {
        left: -100%;
    }

    50.01% {
        left: 100%;
    }

    to {
        left: 10%;
    }
}

@keyframes marquee {
    0% {
        left: 10%;
    }

    10% {
        left: 2%;
    }

    50% {
        left: -100%;
    }

    50.01% {
        left: 100%;
    }

    to {
        left: 10%;
    }
}

.stickyAudioPlayerBoxcompact {
    width: 100%;
    max-width: 350px;
    background: rgba(255, 255, 255, 0.5);
    height: 250px !important;
    overflow: hidden;
    font-family: "Ubuntu", sans-serif;
}

    .stickyAudioPlayerBoxcompact .player-data p span {
        width: 300%;
    }

    .stickyAudioPlayerBoxcompact > *, .stickyAudioPlayerBoxcompact section {
        width: 100%;
        margin: 0px;
        padding: 5px 10px;
        z-index: 100000;
    }

    .stickyAudioPlayerBoxcompact section {
        position: relative;
        top: -250px;
    }

    .stickyAudioPlayerBoxcompact figure {
        width: 80px;
        height: 250px;
        padding: 0px;
        padding-left: 0px;
        margin: 0px;
        -webkit-filter: blur(2px);
        filter: blur(2px);
        position: relative;
        width: 100% !important;
        opacity: 0.4;
        left: 0px;
        z-index: -1;
        background-image: url(/assets/img/stickyplayer/blur.png);
        background-size: cover;
    }

        .stickyAudioPlayerBoxcompact figure img {
            width: 100% !important;
            height: auto;
            vertical-align: middle !important;
        }

    .stickyAudioPlayerBoxcompact .player-data {
        text-align: left;
        overflow: hidden;
    }

        .stickyAudioPlayerBoxcompact .player-data p {
            width: 100%;
            margin: 0px;
            color: #778089;
            font-size: 1.3em;
            margin-top: 5px;
            margin-bottom: 2px;
            background: rgba(255, 255, 255, 0.3);
            overflow: hidden;
        }

            .stickyAudioPlayerBoxcompact .player-data p span {
                width: 200%;
                position: relative;
            }

        .stickyAudioPlayerBoxcompact .player-data .bar-container, .stickyAudioPlayerBoxcompact .player-data .bar-main, .stickyAudioPlayerBoxcompact .player-volume, .stickyAudioPlayerBoxcompact .player-volume .input-volume-bar {
            width: 100%;
        }

    .stickyAudioPlayerBoxcompact .player-volume {
        padding-top: 10px;
    }

    .stickyAudioPlayerBoxcompact .player-download, .stickyAudioPlayerBoxcompact .player-volume {
        width: 50% !important;
    }

    .stickyAudioPlayerBoxcompact .player-download {
        text-align: right;
    }

        .stickyAudioPlayerBoxcompact .player-download > a {
            float: right;
        }

    .stickyAudioPlayerBoxcompact .bar-container small {
        font-size: 1.3em;
        color: #778089;
    }

    .stickyAudioPlayerBoxcompact .player-data .bar-main, .stickyAudioPlayerBoxcompact .player-volume .bar-main {
        height: 18px;
        min-width: 100px;
        background-color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        margin-top: 5px;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
    }

    .stickyAudioPlayerBoxcompact .player-data .bar-tile {
        background: #ef8f5b;
        color: white;
        display: none;
        position: absolute;
        width: 55px;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        text-align: center;
    }

    .stickyAudioPlayerBoxcompact .player-data .bar-main:hover .bar-tile {
        display: inline;
        float: left;
    }

    .stickyAudioPlayerBoxcompact .player-data .bar-main .bar-progress, .stickyAudioPlayerBoxcompact .player-volume .bar-main .bar-progress {
        background-color: #e28248;
        height: 14px;
        margin: 2px;
        width: 0%;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
    }

        .stickyAudioPlayerBoxcompact .player-data .bar-main .bar-progress:hover {
            -webkit-transition: background-color 0.8s ease;
            -moz-transition: background-color 0.8s ease;
            -ms-transition: background-color 0.8s ease;
            -o-transition: background-color 0.8s ease;
            transition: background-color 0.8s ease;
            background-color: #f8681a;
        }

    .stickyAudioPlayerBoxcompact .player-volume .input-volume {
        background-image: url(/assets/img/stickyplayer/speaker.png);
        background-repeat: no-repeat;
    }

    .stickyAudioPlayerBoxcompact .player-volume .input-mute {
        background-image: url(/assets/img/stickyplayer/mute.png);
        background-repeat: no-repeat;
        display: none;
    }

    .stickyAudioPlayerBoxcompact .player-download {
        padding: 0px 5px;
    }

    .stickyAudioPlayerBoxcompact .player-play {
        text-align: center;
    }

        .stickyAudioPlayerBoxcompact .player-play .input-play {
            background-image: url(/assets/img/stickyplayer/play.png);
            background-repeat: no-repeat;
            background-position: center;
            display: inline-block;
        }

        .stickyAudioPlayerBoxcompact .player-play .input-stop {
            background-image: url(/assets/img/stickyplayer/stop.png);
            background-repeat: no-repeat;
            background-position: center;
            display: none;
        }

        .stickyAudioPlayerBoxcompact .player-play .input-pause {
            background-image: url(/assets/img/stickyplayer/pause.png);
            background-repeat: no-repeat;
            background-position: center;
            display: none;
        }

    .stickyAudioPlayerBoxcompact .player-download .input-download {
        background-image: url(/assets/img/stickyplayer/download.png);
        background-repeat: no-repeat;
        background-position: center;
    }

    .stickyAudioPlayerBoxcompact .player-data p span {
        -webkit-animation: marquee-compact 10s linear infinite;
        animation: marquee-compact 10s linear infinite;
    }

@-webkit-keyframes marquee-compact {
    0% {
        left: 10%;
    }

    10% {
        left: 2%;
    }

    50% {
        left: -150%;
    }

    50.01% {
        left: 150%;
    }

    to {
        left: 10%;
    }
}

@keyframes marquee-compact {
    0% {
        left: 10%;
    }

    10% {
        left: 2%;
    }

    50% {
        left: -150%;
    }

    50.01% {
        left: 150%;
    }

    to {
        left: 10%;
    }
}