:root{--m-color-white:#fff;--m-text-color:#333;--m-text-color-light:#666;--m-border-color-lighter:#f0f2f5;--m-bg-color-button:#f7f5f5;--m-bg-color-light:#eef0f4;--m-bg-color:#f9f7f7;--m-border-color-light:#e6e6e6}:root .dark-theme{--m-color-white:#393e46;--m-text-color:#fff;--m-text-color-light:#999;--m-border-color-lighter:#4a515c;--m-border-color-light:#4a515c;--m-bg-color-button:#232832;--m-bg-color-light:#232832;--m-bg-color:#232832}.playing{display:inline-block;height:12px;margin-right:2px}.playing__bar{animation:up-and-down 1.3s ease infinite alternate;background:#fff;display:inline-block;height:100%;margin:0 1px;width:2px}.playing__bar1{height:100%}.playing__bar2{animation-delay:-2.4s;height:30%}.playing__bar3{animation-delay:-3.7s;height:75%}@keyframes up-and-down{10%{height:30%}30%{height:100%}60%{height:50%}80%{height:75%}to{height:20%}}[data-v-a87a88d8]:root{--m-color-white:#fff;--m-text-color:#333;--m-text-color-light:#666;--m-border-color-lighter:#f0f2f5;--m-bg-color-button:#f7f5f5;--m-bg-color-light:#eef0f4;--m-bg-color:#f9f7f7;--m-border-color-light:#e6e6e6}:root .dark-theme[data-v-a87a88d8]{--m-color-white:#393e46;--m-text-color:#fff;--m-text-color-light:#999;--m-border-color-lighter:#4a515c;--m-border-color-light:#4a515c;--m-bg-color-button:#232832;--m-bg-color-light:#232832;--m-bg-color:#232832}.course-list[data-v-a87a88d8]{display:flex;flex-wrap:wrap}.course-list li[data-v-a87a88d8]{background-color:var(--m-color-white);border-radius:8px;box-shadow:8px 8px 20px 1px #00203e1a;cursor:pointer;margin-bottom:24px;transition:all .3s;width:282px}.course-list li[data-v-a87a88d8]:hover{transform:translateY(-20px)}.course-list li .img-box[data-v-a87a88d8]{height:188px;position:relative;width:100%;z-index:1}.course-list li .img-box img[data-v-a87a88d8]{border-radius:8px 8px 0 0;height:100%;width:100%}.course-list li .img-box .live-time[data-v-a87a88d8]{background-color:#00000080;bottom:0;color:#fff;font-size:16px;padding:0 4px;position:absolute;right:0}.course-list li .img-box .state[data-v-a87a88d8]{border-radius:32px 0 0 32px;color:#fff;font-size:14px;height:32px;line-height:32px;padding:0 12px;position:absolute;right:-6px;top:12px}.course-list li .img-box .state[data-v-a87a88d8]:after{border-bottom:3px solid transparent;border-right:4px solid transparent;bottom:-6px;content:"";display:inline-block;height:0;position:absolute;right:0;width:0;z-index:-1}.course-list li .img-box .state.live[data-v-a87a88d8]{background-color:#ffbf29;box-shadow:0 0 5px 1px #c14a0033}.course-list li .img-box .state.live[data-v-a87a88d8]:after{border-left:4px solid #c77100;border-top:4px solid #c77100}.course-list li .img-box .state.unstart[data-v-a87a88d8]{background-color:#5297ff;box-shadow:0 0 5px 1px #0003}.course-list li .img-box .state.unstart[data-v-a87a88d8]:after{border-left:4px solid #306cc7;border-top:3px solid #306cc7}.course-list li .img-box .state.over[data-v-a87a88d8]{background-color:#c0c4cc}.course-list li .img-box .state.over[data-v-a87a88d8]:after{border-left:4px solid #606266;border-top:3px solid #606266}.course-list li .img-box .state.playback[data-v-a87a88d8]{background-color:#4bd15d}.course-list li .img-box .state.playback[data-v-a87a88d8]:after{border-left:4px solid #0f7a1d;border-top:3px solid #0f7a1d}.course-list li .img-box .state .iconfont[data-v-a87a88d8]{font-size:20px;margin-right:6px}.course-list li .img-box .state span[data-v-a87a88d8]{display:inline-block;vertical-align:top}.course-list li .content-box[data-v-a87a88d8]{padding:16px}.course-list li .content-box .title[data-v-a87a88d8]{color:var(--m-text-color);font-size:20px;font-weight:600;margin-bottom:16px}.course-list li .content-box .tag[data-v-a87a88d8]{color:#818385;font-size:14px}.course-list li .content-box .teacher-info[data-v-a87a88d8]{border-top:1px solid var(--m-border-color-lighter);margin-top:16px;padding:12px 0 0}.course-list li .content-box .teacher-info .avatar[data-v-a87a88d8]{border-radius:50%;height:40px;margin-right:16px;width:40px}.course-list li .content-box .teacher-info span[data-v-a87a88d8]{color:#818385;display:inline-block;margin-top:10px;vertical-align:top}