.sap-player{
    width:719px;height:57px;background:rgba(57,57,57,.57);
    padding:14px 19px 14px 15px;display:flex;align-items:center;box-sizing:border-box;user-select:none
}
.sap-player .sap-play{width:30px;height:30px;padding:0;margin:0;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sap-player .sap-play svg{width:30px;height:30px;display:block}
.sap-player .sap-track{width:397px;height:4px;position:relative;cursor:pointer;flex:0 0 auto;background:rgba(82,82,82,.59);margin:0 10px}
.sap-player .sap-progress{position:absolute;left:0;top:0;bottom:0;width:0%;background:#178F4B}
.sap-player .sap-total{color:#fff;font-size:16px;line-height:1}
.sap-player .sap-tip{color:#F44A4A;font-size:14px;line-height:1;margin-left:auto}
@media (max-width:1024px){ .sap-player{width:100%} }
@media (max-width:760px){
    .sap-player{display:grid;grid-template-columns: 10% minmax(0,1fr) 10%;grid-template-rows:1fr auto;column-gap:10px;row-gap:0;width:100%;height:58px;padding:8px 15px;align-items:center;box-sizing:border-box;overflow:hidden}
    .sap-player .sap-play{grid-column:1;grid-row:1;width:30px;height:30px;margin:0;padding:0;justify-self:start;align-self:center}
    .sap-player .sap-track{grid-column:2;grid-row:1;height:8px;margin:0;width:100%;max-width:100%;box-sizing:border-box;justify-self:stretch;align-self:center}
    .sap-player .sap-progress{height:100%}
    .sap-player .sap-total{grid-column:3;grid-row:1;text-align:right;font-size:14px;line-height:1;white-space:nowrap;align-self:center}
    .sap-player .sap-tip{grid-column:2;grid-row:2;margin:0;font-size:12px;line-height:1;text-align:left}
}