@charset "utf-8";
@import url("/tw/CSS/ugc_program_detail.css");
.Font-Small .PlaybackList > ul > li > span:last-child { font-size:0.6rem;}

/*PlaybackList*/
.PlaybackList { width:100%; height:auto; overflow:hidden; margin-bottom:20px;}
.PlaybackList * { padding:0; margin:0; list-style:none; text-decoration:none;}
.PlaybackList > ul { gap:20px;
/*flex*/
display: flex;
flex-wrap:wrap;}
.PlaybackList > ul > li { width:calc( 50% - 10px ); height:auto; overflow:hidden;}
.PlaybackList > ul > li:only-child { width:100%;}
.PlaybackList > ul > li > a { display:block; width:100%; height:auto; overflow:hidden; border:1px solid #ccc; position:relative; padding:10px 10px 10px 60px;
/*圓角*/
border-radius:20px;
/*基礎動畫*/
transition:color .5s, border .5s, background .5s;}
.PlaybackList > ul > li > a:link,
.PlaybackList > ul > li > a:visited { border:1px solid #ccc; color:black;}
.PlaybackList > ul > li > a:hover,
.PlaybackList > ul > li > a:active { background:#fce3cd; border:1px solid #f18c2f;}
.PlaybackList > ul > li > a:focus{ color:blue; border:2px dashed blue; background:rgba(255,240,0,1);}
.PlaybackList > ul > li > a img { display:block; width:40px; height:40px; padding:10px; overflow:hidden; border:1px solid #333; position:absolute; top:10px; left:10px;
/*圓角*/
border-radius:100%;
/*基礎動畫*/
transition:color .5s, border .5s, background .5s;}
.PlaybackList > ul > li > a:hover img,
.PlaybackList > ul > li > a:active img { background:white; border:1px solid #f18c2f;}
.PlaybackList > ul > li > a:focus img{ border:1px solid blue; background:none;}
.PlaybackList > ul > li > a span { display:block; width:100%;}
.PlaybackList > ul > li > a span.name { font-size:1.2em; font-weight:bold; margin-top:7.5px;
/*基礎動畫*/
transition:color .5s;}
.PlaybackList > ul > li > a:focus span.name{ color:blue;}
.PlaybackList > ul > li > a span.descr { font-size:0.9em;}
.PlaybackList > ul > li > a span.date { font-size:0.7em; color:#555; line-height:1.2;
/*基礎動畫*/
transition:color .5s;}
.PlaybackList > ul > li > a:focus span.date{ color:blue;}

.player-container { position:fixed; left:0; bottom:0; height:60px; z-index:3; background:#1e242c; width:100%; opacity:0; display:flex; flex-wrap:wrap;}
.player-container.show {opacity:0; transform: translate(0px, 120px); animation:show_Ani 0.5s forwards linear;}
@keyframes show_Ani{
0%{ opacity:0; transform: translate(0px, 120px);}
100%{ opacity:1; transform: translate(0px, 0px);}
}
.player-container .player-content { width:calc( 100% - 60px ); display:flex; gap:10px; position:relative; padding-left:10px;}
.player-container .player-content .player-detail { width:350px; display:flex; position:relative; overflow:hidden;}
.player-container .player-content .player-detail .track-title { width:100%; height:20px; line-height:1.25; color:#eee; /*animation: marquee 10s linear infinite; */white-space:nowrap; overflow:hidden; position:absolute; top:10px; left:0; font-size:0.8em;text-overflow: ellipsis;}
/*@keyframes marquee {
    0% { transform: translate(100%) }
    to { transform: translate(-100%)}
}*/
.player-container .player-content .player-detail .plyr-track-waveform { width:350px; position:relative; z-index:1; background:#1e242c; padding:0; height:30px; top:30px;}
.player-container .player-content .player-detail .plyr-track-waveform .track-wave { position:relative; left:0; bottom:0; z-index:0; opacity:0.3;}
.player-container .player-content .player-detail .plyr-track-waveform .track-wave svg line {stroke:white;}
.player-container .player-content .player-detail .plyr-track-waveform .track-wave-active { position:absolute; left:0; bottom:0; z-index:1; overflow:hidden;}
.player-container .player-content .player-detail .plyr-track-waveform .track-wave-active svg line {stroke:white;}
.player-container .plyr--audio { width:calc( 100% - 360px ); display:flex; padding:4px 0;}
.player-container .plyr--audio .plyr__controls { background:none; width:100%; padding:10px 0;}
.player-container .btn-popuup-close { width:60px; height:60px; border:0; outline:none; background:none; color:white; font-size:3em; cursor:pointer; text-align:center; line-height:1;}
.player-container .btn-popuup-close:focus { background:rgba(255,240,0,1); color:blue; border:2px dashed blue;}
@media only screen and (min-width:0px) and (max-width:1024px) {
.PlaybackList > ul > li { width:100%;}
}
@media only screen and (min-width:0px) and (max-width:768px) {
	.player-container .player-content .player-detail { width:200px;}
	.player-container .player-content .player-detail .track-title {  top:20px;}
	.player-container .player-content .player-detail .plyr-track-waveform { display:none;}
	.player-container .plyr--audio { width:calc( 100% - 200px );}
}
@media only screen and (min-width:0px) and (max-width:600px) {
	.player-container .player-content .player-detail { display:none;}
	.player-container .plyr--audio { width:100%;}
	.player-container .player-content { width:calc( 100% - 30px ); padding-left:0;}
	.player-container .btn-popuup-close { width:30px; font-size:2em; line-height:1.5;}
}