/*
ul.audio_list { display:block; padding:0; margin:2rem auto; width:max-content; max-width:90vw; }
ul.audio_list > li { display:block; margin:0 0 1rem 0; background:#fff; color:#000; padding-right:9rem; position:relative; }
ul.audio_list > li > a { display:block;  width:auto; color:inherit; text-decoration:none; box-shadow:0 0.5rem 1rem #000; transition:box-shadow 0.3s; }
ul.audio_list > li > a > img { display:inline-block; vertical-align:top; height:9rem; width:16rem; background:#eee; }
ul.audio_list > li > a > span { display:inline-block; vertical-align:top; width:auto; margin:0 2rem;  }
ul.audio_list > li > a > span > strong { display:block; font-size:1.5rem; line-height:1.5rem; padding-top:0.8rem; }
ul.audio_list > li > a > span > em { display:block; font-size:1rem; line-height:2rem; color:#999; }
ul.audio_list > li > a > span > label { display:inline-block; vertical-align:top; width:2.5rem; margin-bottom:0.5rem; }
ul.audio_list > li > a > span + img { width:9rem; background:transparent; position:absolute; right:0; top:0; }
ul.audio_list > li > a:hover { box-shadow:0 0.5rem 1rem #333; }
*/

figure.audio { position:relative; }
figure.audio + div { display:none; }
figure.audio > div { height:auto; width:100%; max-height:calc(100vh - 2.8rem); margin:0; position:relative; }
figure.audio > div:before { content:"▷"; font-family:'icomoon'; display:block; position:absolute; top:50%; left:50%; font-size:20vw; width:1em; height:1em; line-height:1em; margin:-0.5em; text-align:center; opacity:0; transition:opacity 0.3s; pointer-events:none; z-index:10; color:#fff; }
figure.audio > div > video { display:block; width:100%; height:auto; max-height:calc(100vh - 2.8rem); background:#000; margin:0 auto; }
figure.audio > ul { display:flex; flex-wrap:nowrap; width:100%; box-sizing:border-box; margin:0; padding:0.4rem; padding-left:0; background:#dfe5e8; }
figure.audio > ul > li { display:block; width:max-content; padding:0; margin:0; height:2rem; margin-left:0.4rem;}
figure.audio > ul > li > button { display:block; height:2rem; min-width:2rem; padding:0; margin:0; line-height:2rem; text-align:center; cursor:pointer; border-radius:3px; color:#000; border:1px solid #000; background:#dfe5e8; box-sizing:border-box; transition:color 0.3s, background-color 0.3s; }
figure.audio > ul > li > button:hover { background:#ccc; }
figure.audio > ul > li.space { display:none; }
figure.audio > ul > li[data-audio] > button:before { font-family:'icomoon'; font-size:1.2rem; }
figure.audio > ul > li[data-audio="play"] > button:before { content:"▷"; }
figure.audio > ul > li[data-audio="stop"] > button:before { content:"∥"; }
figure.audio > ul > li[data-audio="mute"] > button:before { content:"⦑"; text-align:left; }
figure.audio > ul > li[data-audio="vol+"] > button:before { content:"+"; }
figure.audio > ul > li[data-audio="vol-"] > button:before { content:"-"; }
figure.audio > ul > li[data-audio="time"] { width:100%; position:relative; }
figure.audio > ul > li[data-audio="time"] > mark { display:block; position:absolute; left:0; top:0.5rem; width:100%; height:1rem; pointer-events:none; background:none; }
figure.audio > ul > li[data-audio="time"] > mark > em { display:block; position:absolute; top:0; height:1rem; background:#999; }
figure.audio > ul > li[data-audio="time"] > progress { width:100%; margin:0; height:2rem; position:relative; background:none; }
figure.audio > ul > li[data-audio="time"]:before { content:''; display:block; position:absolute; left:0; top:0.5rem; width:100%; height:1rem; border-radius:2px; background:#ccc; pointer-events:none; }
figure.audio > ul > li[data-audio="time"][data-time]:after { content:attr(data-time); display:block; position:absolute; right:0.3rem; top:0.5rem; width:3rem; height:1rem; line-height:1rem; text-align:right; color:#000; font-family: 'Courier New', monospace; font-size:0.8rem; letter-spacing:-0.1em; font-weight:bold; pointer-events:none; }
figure.audio > ul > li > progress[value] { width:100%; height:2rem; position:relative; margin:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; cursor:pointer; box-sizing:border-box; }
figure.audio > ul > li > progress[value]::-webkit-progress-bar		{ position:absolute; display:block; height:1rem; background-color:transparent; color:transparent; z-index:2; margin-top:0.5rem; } 
figure.audio > ul > li > progress[value]::-webkit-progress-value	{ position:absolute; display:block;	height:1rem; background-color:#000; color:#000; z-index:2; } 
figure.audio > ul > li > progress[value]::-moz-progress-bar		{ position:absolute; display:block; margin-top:0.5rem; height:1rem; background-color:#000; color:#000; z-index:2; }
figure.audio > ul > li > progress[value] > span { width:1rem; height:1rem; background-color:#f00; z-index:1000; position:relative; }
figure.audio > ul > li > progress[value] + em { display:none; }
figure.audio > ul > li[data-audio="vol"] { width:auto; position:relative; }
figure.audio > ul > li[data-audio="vol"]:before { content:''; display:block; position:absolute; left:0; top:0; width:100%; height:2rem; border-radius:2px; background:#ccc; pointer-events:none; -webkit-clip-path:polygon(0 100%, 4rem 0, 4rem 100%); clip-path:polygon(0 100%, 4rem 0, 4rem 100%);}
figure.audio > ul > li[data-audio="vol"] > progress[value] { width:4rem; padding:0; background:none; }
figure.audio > ul > li[data-audio="vol"] > progress[value]::-webkit-progress-bar   { display:block; margin-top:0; top:0; height:2rem; }
figure.audio > ul > li[data-audio="vol"] > progress[value]::-webkit-progress-value { display:block; margin-top:0; top:0; height:2rem; -webkit-clip-path:polygon(0 100%, 4rem 0, 4rem 100%); }
figure.audio > ul > li[data-audio="vol"] > progress[value]::-moz-progress-bar	   { display:block; margin-top:0; top:0; height:2rem; 		  clip-path:polygon(0 100%, 4rem 0, 4rem 100%); }
figure.audio > ul > li[data-audio="subs"] { position:relative; }
figure.audio > ul > li[data-audio="subs"] > ul { width:max-content; padding:0; margin:0; height:0; position:absolute; right:0; bottom:2rem; overflow:hidden; }
figure.audio > ul > li[data-audio="subs"] > ul > li { display:block; }
figure.audio > ul > li[data-audio="subs"] > ul > li > a { display:block; padding:0.25rem; line-height:1rem; height:1rem; text-transform:uppercase; color:#999; transition:color 0.3s; }
figure.audio > ul > li[data-audio="subs"] > ul > li > a:hover { color:#fff; }
figure.audio > ul > li[data-audio="subs"] > ul > li.active > a { color:#fff; }
figure.audio > ul > li[data-audio="subs"] > ul > li:last-child { margin-bottom:0.5rem; }
figure.audio > ul > li[data-audio="subs"].show > ul { height:auto; }
figure.audio > figcaption { text-align:center; padding:0.5rem; opacity:0.5; }
figure.audio > figcaption > a { color:inherit; }




figure.audio[data-muted="false"]	 > ul > li[data-audio="mute"] > button:before { content:"⦑"; }
figure.audio[data-volume-level="0"]	 > ul > li[data-audio="mute"] > button:before { content:"∢"; }
figure.audio[data-volume-level="1"]	 > ul > li[data-audio="mute"] > button:before { content:"∢"; }
figure.audio[data-volume-level="2"]	 > ul > li[data-audio="mute"] > button:before { content:"⦓"; }
figure.audio[data-volume-level="3"]	 > ul > li[data-audio="mute"] > button:before { content:"⦕"; }
figure.audio[data-volume-level="4"]	 > ul > li[data-audio="mute"] > button:before { content:"⦕"; }
figure.audio[data-muted="true"]		 > ul > li[data-audio="mute"] > button:before { content:"⦑"; }
figure.audio[data-playing="true"] 	 > ul > li[data-audio="play"] > button:before { content:"∥"; }
figure.audio[data-playing="false"] > ul > li[data-audio="time"] > progress::-webkit-progress-value	{ background-color:#666; color:#666; }
figure.audio[data-playing="false"] > ul > li[data-audio="time"] > progress::-moz-progress-bar		{ background-color:#666; color:#666; }
figure.audio[data-volume-level="false"]	 > ul > li[data-audio="vol"] { display:none; }
figure.audio[data-muted="true"] > ul > li[data-audio="vol"] > progress::-webkit-progress-value	{ background-color:#666; color:#666; }
figure.audio[data-muted="true"] > ul > li[data-audio="vol"] > progress::-moz-progress-bar		{ background-color:#666; color:#666; }
figure.audio[data-playing="false"] { cursor:pointer; }
figure.audio[data-playing="false"] > div:before { opacity:0.5; }
figure.audio[data-playing="false"] > div:hover:before { opacity:0.75; }
figure.audio[data-playing="wait"] > div:before { content:"?"; opacity:0.5; animation: 2s linear infinite rotate; }


@keyframes rotate { to { transform:rotate(360deg); }}

@media (max-width: 1000px){
	figure.audio > figcaption { font-size:1.5vw; }
}

/*
figure.video.skin2 > div { padding-bottom:2.8rem; box-shadow:0 1rem 3rem rgba(0,0,0,0.66); }
figure.video.skin2 > ul { background:#000; position:relative; margin-top:-2.8rem; }
figure.video.skin2 > ul > li > button { border:1px solid transparent; background:transparent; color:#ccc; }
figure.video.skin2 > ul > li > button:hover { color:#fff; }
figure.video.skin2 > ul > li > progress[value] { height:1.3rem; }
figure.video.skin2 > ul > li > progress[value]::-webkit-progress-bar	{ top:0; height:0.2rem; margin-top:0.9rem; }
figure.video.skin2 > ul > li > progress[value]::-webkit-progress-value	{ height:0.2rem; margin-top:0; background-color:#f37416; color:#f37416; padding:0; } 
figure.video.skin2 > ul > li > progress[value]::-moz-progress-bar		{ height:0.2rem; margin-top:0.9rem; background-color:#f37416; color:#f37416; }
figure.video.skin2 > ul > li > progress[value] > span 					{ height:0.2rem; margin-top:0.9rem; background-color:#f37416; color:#f37416; }
figure.video.skin2 > ul > li[data-audio="time"] { position:absolute; left:0; top:-0.8rem; width:100%; margin:0; height:1.3rem; z-index:2; }
figure.video.skin2 > ul > li[data-audio="time"] > mark > em { background:#666; height:0.2rem; top:0.4rem; }
figure.video.skin2 > ul > li[data-audio="time"]:before { background:#333; height:0.2rem; top:0.9rem; border-radius:0; }
figure.video.skin2 > ul > li[data-audio="time"]:after { position:absolute; left:2.8rem; top:1.8rem; color:#999; }
figure.video.skin2 > ul > li.space { display:block; width:100%; }
figure.video.skin2 > ul > li[data-audio="vol"] { margin-right:0.5rem; }
figure.video.skin2 > ul > li[data-audio="vol"]:before { background:#333; height:0.2rem; margin-top:0.9rem; }
figure.video.skin2 > ul > li[data-audio="vol"]:before { -webkit-clip-path:none; clip-path:none; }
figure.video.skin2 > ul > li[data-audio="vol"] > progress[value]::-webkit-progress-value { -webkit-clip-path:none; clip-path:none; }
figure.video.skin2 > ul > li[data-audio="vol"] > progress[value]::-moz-progress-bar		 { -webkit-clip-path:none; clip-path:none; }
figure.video.skin2 > ul > li > progress[value] + em { display:block; top:1rem; left:0; position:absolute; width:0.6rem; height:0.6rem; margin:-0.3rem; border-radius:1rem; background:#f37416;  }
figure.video.skin2:not([data-subtitles="false"]) > ul > li[data-audio="subs"] > button {  }
figure.video.skin2[data-fullscreen="true"] > ul > li[data-audio="full"] > button,
figure.video.skin2[data-fullscreen="fake"] > ul > li[data-audio="full"] > button,
figure.video:not([data-subtitles="false"]) > ul > li[data-audio="subs"] > button { background-color:transparent; color:#f37416; }
figure.video.skin2[data-fullscreen="true"] > ul > li[data-audio="full"] > button:before,
figure.video.skin2[data-fullscreen="fake"] > ul > li[data-audio="full"] > button:before { content:"\4c"; }
figure.video.skin2 > ul > li[data-audio="subs"] > ul { background:#000; right:-0.4rem; z-index:3; }
figure.video.skin2 > ul > li[data-audio="subs"] > ul > li > a { padding:0.2rem 0.5rem; }
figure.video.skin2 > ul > li[data-audio="subs"] > ul > li:first-child > a { padding-top:0.5rem; }
figure.video.skin2[data-muted="true"] > ul > li[data-audio="vol"] > progress::-webkit-progress-value	{ background-color:#666; color:#666; }
figure.video.skin2[data-muted="true"] > ul > li[data-audio="vol"] > progress::-moz-progress-bar			{ background-color:#666; color:#666; }
figure.video.skin2[data-muted="true"] > ul > li[data-audio="vol"] > progress + em 						{ background-color:#666;  }
*/