:root {
    --SITE_COLOR:#0b318f;
    --TEXT_COLOR:#fff;
}
@charset "utf-8";

.radio { position:relative; width:100%; min-width:724px; height:100%; min-height:100%; padding-bottom:60px; font-size:0; line-height:0; }
.radio .header { border-bottom:15px solid var(--SITE_COLOR); }
.radio .header img { max-width:724px; width:100%; }
.radio .caption { margin:20px auto; }
.radio .caption img { max-width:606px; width:100%; }
.radio .close { position:absolute; right:12px; top:12px; cursor:pointer; }

.radio li.player { height:40px; overflow:hidden; color:#000; }
.radio li.player~li { margin-top:16px; }
.radio li.player .title { position:relative; max-width:646px; height:40px; line-height:40px; font-size:14px; font-weight:bold; margin:0 auto; padding:0 20px; text-align:left; background:var(--SITE_COLOR); cursor:pointer; border-radius:20px; color:var(--TEXT_COLOR); letter-spacing:0.05em; }
.radio li.player .title::before { content:''; position:absolute; right:5px; top:5px; width:30px; height:30px; background:#fff; border-radius:50%; }
.radio li.player .title::after { content:''; position:absolute; right:3px; top:12px; width:0; height:0; border:8px solid transparent; border-left:14px solid var(--SITE_COLOR); background:transparent; }

.radio li.player .control { display:inline-block; width:646px; height:40px; line-height:40px; margin:4px auto 10px; text-align:left; }
.radio li.player .control .resume { display:inline-block; width:40px; height:40px; cursor:pointer; position:relative; }
.radio li.player .control .resume::before { content:''; position:absolute; left:13px; top:11px; width:5px; height:18px; background:var(--SITE_COLOR); }
.radio li.player .control .resume::after  { content:''; position:absolute; left:21px; top:11px; width:5px; height:18px; background:var(--SITE_COLOR); }
.radio li.player .control .resume.pausing::before { left:13px; top:12px; width:0; height:0; border:8px solid transparent; border-left:14px solid var(--SITE_COLOR); background:transparent; }
.radio li.player .control .resume.pausing::after { content:none; }
.radio li.player .control .progress { display:inline-block; position:relative; width:100%; max-width:390px; height:18px; margin:10px 25px; border-radius:9px; background:#eee; vertical-align:top; }
.radio li.player .control .progress .played { position:absolute; width:18px; height:100%; border-radius:9px; background:var(--SITE_COLOR); vertical-align:top; pointer-events:none; }
.radio li.player .control .progress .position { position:absolute; left:-5px; top:-5px; width:28px; height:28px; border-radius:14px; border:2px solid #fff; background:var(--SITE_COLOR); pointer-events:none; }
.radio li.player .control .time { display:inline-block; font-size:16px; color:#000; text-align:center; opacity:0.8; vertical-align:top; }
.radio li.player .control .volume { position:relative; display:inline-flex; width:60px; height:40px; cursor:pointer; }
.radio li.player .control .volume li { position:relative; display:inline-block; width:11px; height:40px; }
.radio li.player .control .volume li::before { content:''; position:absolute; left:2px; bottom:11px; width:8px; height:18px; background-color:var(--SITE_COLOR); }
.radio li.player .control .volume li.lv1::before { height:4px; }
.radio li.player .control .volume li.lv2::before { height:9px; }
.radio li.player .control .volume li.lv3::before { height:13px; }
.radio li.player .control .volume li.lv4::before { height:18px; }
.radio li.player .control .volume li.mute { width:16px; }
.radio li.player .control .volume li.mute::before { top:16px; width:6px; height:8px; background-color:var(--SITE_COLOR); }
.radio li.player .control .volume li.mute::after { content:''; position:absolute; left:1px; top:9px; width:0; height:8px; border:7px solid transparent; border-right:7px solid var(--SITE_COLOR); box-sizing:content-box; }
.radio li.player .control .volume[data-volume=lv0] li.mute::before  { background-color:#f00; }
.radio li.player .control .volume[data-volume=lv0] li.mute::after { border-right-color:#f00; }
.radio li.player .control .volume[data-volume=lv0] li.mute~li::before { background-color:#d2d2d2; }
.radio li.player .control .volume[data-volume=lv1] li.lv1~li::before  { background-color:#d2d2d2; }
.radio li.player .control .volume[data-volume=lv2] li.lv2~li::before  { background-color:#d2d2d2; }
.radio li.player .control .volume[data-volume=lv3] li.lv3~li::before  { background-color:#d2d2d2; }

.radio li.player.playing .title { background:var(--SITE_COLOR); }
.radio li.player.playing .title::after { background-color:var(--SITE_COLOR); right:13px; top:13px; width:13px; height:13px; border:none; }
.radio li.player.playing .control .resume::before { background:var(--SITE_COLOR); }
.radio li.player.playing .control .resume::after  { background:var(--SITE_COLOR); }
.radio li.player.playing .control .resume.pausing::before { border-left-color:var(--SITE_COLOR); background:transparent; }
.radio li.player.playing .control .resume.pausing::after { content:none; }
.radio li.player.playing .control .progress .played { background:var(--SITE_COLOR); }
.radio li.player.playing .control .progress .position { background:var(--SITE_COLOR); }
.radio li.player.playing .control .volume li::before { background-color:var(--SITE_COLOR); }
.radio li.player.playing .control .volume li.mute::before { background-color:var(--SITE_COLOR); }
.radio li.player.playing .control .volume li.mute::after { border-right-color:var(--SITE_COLOR); }
.radio li.player.playing .control .volume[data-volume=lv0] li.mute::before  { background-color:#f00; }
.radio li.player.playing .control .volume[data-volume=lv0] li.mute::after { border-right-color:#f00; }

.radio .link{max-width: 320px;background:#000;margin: 0 auto;border-radius: 10px;}
.radio .link a{display: block;text-align: center;color:#fff;height:50px; font-size:14px; line-height:50px; margin-top:50px;font-weight:500;}

.copyright { position:absolute; bottom:0; width:100%; min-width:724px; height:36px; font-size:12px; line-height:36px; font-weight:bold; text-align:center; color:#000; background:#fff; }

@media only screen and (max-width:480px) {

	.radio { min-width:0; padding:0 5px 40px; }
	.radio .caption { margin:10px auto; }
	.radio .close { position:absolute; right:6px; top:6px; cursor:pointer; }
	.radio .close img { width:60px; }
	
	.radio li.player { overflow:hidden; color:#000; }
	.radio li.player~li { margin-top:10px; }
	.radio li.player .title { max-width:646px; font-size:11px; }
	.radio li.player .control { width:100%; }
	.radio li.player .control .volume { display:none; }
	.radio li.player .control .progress { margin:10px 5px; width:160px; width:calc(100% - 114px); }
	.radio li.player .control .time { font-size:10px; width:64px; }
	
	.radio .link a{height:30px; font-size:12px; line-height:30px;}

	.copyright { min-width:0; font-size:10px; }
}