#course{padding:40px 0;background-color:#f4f4f4}#course .container{padding:0 10px}#course .container .nav-head{margin-bottom:20px;background-color:#fff;border-radius:4px;padding:20px}#course .container .nav-head ul{width:100%}#course .container .nav-head ul li{margin-right:20px;font-size:20px;padding:6px 15px;border-radius:20px}#course .container .nav-head ul li:hover{color:#018700;background-color:#f6f6f6}#course .container .nav-head ul li:hover a{color:#018700}#course .container .nav-head ul li a{color:#333333;white-space:nowrap}#course .container .nav-head ul .active-li{color:#018700;background-color:#f6f6f6}#course .container .nav-head ul .active-li a{color:#018700}#course .container .courses{padding:20px;background-color:#fff;border-radius:4px;flex-wrap:wrap}#course .container .courses .course-item{margin-right:10px;margin-bottom:20px;cursor:pointer;width:24%;padding:10px 5px;background-color:#fff;border-radius:8px}#course .container .courses .course-item:hover{box-shadow:5px 10px 25px rgba(0,0,0,0.1)}#course .container .courses .course-item .course-item-pic{width:100%;height:160px;border-radius:10px;overflow:hidden}#course .container .courses .course-item .course-item-pic img{height:100%}#course .container .courses .course-item .course-pay{margin-top:10px}#course .container .courses .course-item .course-pay h5{width:100%;font-size:16px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#course .container .courses .course-item .course-pay>div{margin-top:10px;padding-right:10px}#course .container .courses .course-item .course-pay>div .author{margin-top:6px;font-size:12px;color:#8e8787}#course .container .courses .course-item .course-pay>div .price{padding:4px 10px;margin-top:8px;font-size:14px;color:#6982fa;background:#f1f5f9;border-radius:10px}#read{padding:40px 0;background-color:#f4f4f4}#read .nav-head{margin-bottom:20px;background-color:#fff;border-radius:4px;padding:20px}#read .nav-head ul{width:60%}#read .nav-head ul li{margin-right:20px;font-size:20px;padding:6px 15px;border-radius:20px}#read .nav-head ul li:hover{color:#018700;background-color:#f6f6f6}#read .nav-head ul li:hover a{color:#018700}#read .nav-head ul li a{color:#333333}#read .nav-head ul .active-li{color:#018700;background-color:#f6f6f6}#read .nav-head ul .active-li a{color:#018700}.read{flex-wrap:wrap;margin-top:40px;padding:20px;background-color:#fff;border-radius:8px}.read .read-items-box{width:100%;min-height:300px;flex-wrap:wrap}.read .read-item{margin:0 10px 10px 0;width:32%;max-height:140px;background:#fafbfc;border-radius:8px;border:1px solid #e5e5e5;transition:box-shadow .2s ease-out,box-shadow .2s ease-out,-webkit-box-shadow .2s ease-out,-webkit-box-shadow .2s ease-out}.read .read-item:hover{box-shadow:0 0 10px rgba(0,0,0,0.2)}.read .read-item .read-item-pic{padding:10px;width:150px;height:100%;border-radius:8px 0 0 8px;overflow:hidden}.read .read-item .read-item-pic img{height:100%}.read .read-item .read-cont{padding:10px 20px;width:70%}.read .read-item .read-cont h5{margin-bottom:6px;font-size:16px;font-weight:550;color:#232d37}.read .read-item .read-cont p{font-size:14px;line-height:20px;color:#999999;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.read .read-item .read-cont>div{margin-top:10px}.read .read-item .read-cont>div p{font-size:12px;color:#999999}