#classvideo{width:100%;height:100vh;display:flex;display:-webkit-flex;flex-direction:column;background-color:#f3f3f3}#classvideo .mycontainer{flex:1;width:100%;overflow-y:scroll;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}#classvideo .studybanner{width:100vw;height:33.333vw;background:url(http://tuhuapublic.tuhua.ink/WebPage/Images/studybanner.png)no-repeat 50%;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;-ms-background-size:cover}#classvideo .videotitle{height:10vw;font-size:1.2em;font-weight:bolder;width:90%;margin:10px auto;text-align:left}#classvideo .classlist{width:100%;height:calc(100vh - 43.333vw - 20px);overflow-y:scroll}#classvideo .classone{margin:0 auto 10px;width:96%;height:36vw;background-color:#fff;border-radius:10px;display:flex;flex-direction:row;align-items:center;justify-content:space-around}#classvideo .class-left{flex:2;flex-direction:row}#classvideo .class-left,#classvideo .classtitle{display:flex;align-items:center;justify-content:center}#classvideo .classtitle{width:38vw;height:24.12698vw;flex-direction:column;background:url(http://tuhuapublic.tuhua.ink/WebPage/Images/detailbg.png)no-repeat 50%;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;-ms-background-size:cover;color:#fff;border-radius:10px}#classvideo .classtitle div{width:70%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}#classvideo .class-right{flex:2.5;height:28vw;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-around}#classvideo .class-right div{margin-left:2vw}#classvideo .videotime{font-size:.8em;color:#bdc3cb}