.content {
    width: 1200px;
    margin: 0 auto;
}


.yewuwai{box-shadow: 0 40px 75px 0 rgba(57,60,67,.08); height:515px; margin-top:40px;}
.lesson { background:#f3e7d8; padding-top:60px; padding-bottom: 100px; height:620px;}
.lesson .top20 { margin-top:15px;}
.lesson_nav {float:left; width:315px; }
.lesson_nav li { width: 100%; height: 103px; background: url(../images/line1.jpg) no-repeat bottom;border-right-color: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*float: left;*/ /*position: relative*/ background-color:#CA0303; }
.lesson_nav li a { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-top: 23px; position: relative; z-index: 2; text-decoration:none; }
.lesson_nav li i { width: 70px; height: 52px; display: block; position: relative; overflow: hidden; margin: 0 10px 0 12px; float: left }
.lesson_nav li i img { width: 70px; position: absolute; top: 0; -o-transition: all .3s ease; transition: all .3s ease }
.lesson_nav li strong { display: block; font-size:20px; line-height: 28px; color:#fff;  }
 .lesson_nav li span{display: block;font-size:12px;color:rgba(255,255,255,.5);}
.lesson_nav li strong { margin-top:3px }


.lesson_nav li.on, .lesson_nav li:hover { border-color: transparent;  color:#FFF;background: url(../images/line2.jpg) no-repeat bottom #FF9900; }


.lesson_nav li.on i img, .lesson_nav li:hover i img { top: -52px }
.lesson_nav li.on strong, 
.lesson_nav li:hover strong{ color: #FFF }
.lesson_nav li.on span{color:rgba(255,255,255,.5);}
 .lesson_nav li:hover span {color:rgba(255,255,255,.5);}


.lesson_nav li.on:before, .lesson_nav li:hover:before { /*bottom: -1px*/ }
.lesson_nav li.on:after, .lesson_nav li:hover:after { /*bottom: -1px*/ border-color: transparent #FFF transparent transparent;}

.lesson_con { /*position: relative*/ float:right; width:885px; overflow:hidden; }
.lessons { width: 845px; height: 474px; background: #fff; padding: 20px; float: left; }
.lessons p{ font-size:16px; line-height:29px; height:285px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:10;
    -webkit-box-orient: vertical; color:#4b4b4b;}
.lessons img { width:100%; height:462px;}
.lessons .title { font-size:31px; height:55px; margin-bottom:10px; }
.lessons .title span {border-bottom: #CA0303 solid 1px; padding-bottom:8px; color:#333;}
.lessons .title span strong{ color:#333;}
.lessons li a{ height: 50px; line-height: 50px; border: #313131 solid 1px; float: left; width: 145px; text-align: center; padding-left:15px; margin-right:10px; display:block; font-size:18px; }
.top20{ margin:0 20px;}
.top21{ margin-top:25px;}
.top21 li{ float:left;}
.top21 li:first-child a{background: url(../images/le_icon1.png) 20px center no-repeat;}
.top21 li:last-child a{background: url(../images/le_icon3.png) 20px center no-repeat #ca0303; color:#fff; border:1px solid #ca0303; margin-right:0;}

.lesson_switch div { position: absolute; width: 55px; height: 55px; opacity: .7; border-radius: 50%; top: 302px; cursor: pointer; -o-transition: all .3s ease; transition: all .3s ease }
.lesson_switch div:hover { opacity: 1 }
.lesson_switch .lesson_prev { left: 105px }
.lesson_switch .lesson_next { right: 105px }