.lesson-info{
	height:360px;
	clear: both;

	
}
.lesson-info .preview{
	width:500px;
	height:334px;
	overflow: hidden;
	float: left;
}
.lesson-info .preview img{
	width:100%;
}
.lesson-info .info-box{
	float: right;
	width:676px;
}
.lesson-info .info-box>.title{
	line-height:150%;
	margin-bottom:15px;
	font-size: 28px;
	color:#000;
}
.lesson-info .info-box>.class-info{
	height:95px;
	background: #F5F5F5;
	padding:0 25px 0 15px;
}
.lesson-info .info-box>.class-info>.term{
	display: inline-block;
	height:30px;
	position: relative;
	margin-left:-10px;
	margin-top:5px;
}
.lesson-info .info-box>.class-info>.term>span{
	position: relative;
	z-index: 11;
	display: inline-block;
	line-height:30px;
	padding:0 10px;
	font-size: 14px;
	color:#333;
	cursor: pointer;
	border:1px solid transparent;
	box-sizing: border-box;
	

}
.lesson-info .info-box>.class-info>.term>span::after{
	content: "\e714";
	display: inline-block;
	color: #333;
	font-size: 16px;
	cursor: pointer;
	margin-left:5px;

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.lesson-info .info-box>.class-info>.term:hover>span{
	background-color: #fff;
	border-color: #eee;
}
.lesson-info .info-box>.class-info>.term.sel>span{
	background-color: #fff;
	border-color: #D6D7D7;
	border-bottom:0;
}
.lesson-info .info-box>.class-info>.term.sel>span::after{
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}

.lesson-info .info-box>.class-info>.term.sel>div{
	display: block;
}
.lesson-info .info-box>.class-info>.term>div{
	display: none;
	position: absolute;
	z-index: 10;
	left:0px;
	top:31px;
	background-color: #fff;
	padding:5px 5px;
	border:1px solid #D6D7D7;
	box-sizing: border-box;

	-moz-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
	-o-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);

	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.lesson-info .info-box>.class-info>.term>div>ul{
	max-height:200px;
	overflow-y: auto;
	overflow-x: hidden;
}
.lesson-info .info-box>.class-info>.term>div>ul>li{
	min-width:200px;
	max-width: 400px;
}
.lesson-info .info-box>.class-info>.term>div>ul>li:last-child{
	
}
.lesson-info .info-box>.class-info>.term>div>ul>li>a{
	display: block;
	line-height: 28px;
	padding:0 5px;
	font-size: 14px;
	color:#333;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.lesson-info .info-box>.class-info>.term>div>ul>li>a:hover{
	background-color: #eee;

}

.lesson-info .info-box .term-time{
	margin-top:4px;
	line-height: 26px;
}
.lesson-info .info-box .term-time>span{
	font-size: 12px;
	color:#656565;
}
.lesson-info .info-box .term-time>span:last-child{
	float: right;
}

.lesson-info .info-box .term-info{
	line-height: 20px;
	font-size: 12px;
	color:#656565;
}

.lesson-info .join-info{
	padding:42px 0 15px 15px;
	line-height: 22px;
	font-size: 12px;
	color:#656565;
}
.lesson-info .btns{
	
}
.lesson-info .btns .btn{
	display: inline-block;
	line-height:50px;
	width: 220px;
	
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	text-align: center;
	color: #fff;
	font-size: 20px;
	border: 0;
	background: #FF7333;

	border-radius: 4px;

	cursor: pointer;
	text-decoration: none;
}
.lesson-info .btns .btn:hover{
	opacity: 0.8;
}
.lesson-info .btns .btn.disabled, .lesson-info .btns .btn.joined{
	pointer-events: none;
	background-color: #ccc;
}

.lesson-detail{
	margin:28px auto 100px auto;
	box-sizing: border-box;
	position: relative;
}

.lesson-detail>.left-side{
	width: 880px;
	background-color: #fff;
	min-height: 1000px;
	box-sizing: border-box;
	padding:20px 0 80px 0;
	-moz-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
	-webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
	-o-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
}

.detail-tabs{
	width: 880px;
	padding:0 35px;
	position: relative;
}
.detail-tabs::after{
	content: '';
	display: block;
	width:810px;
	height: 1px;
	overflow: hidden;
	background:#E6E6E6;
	position: absolute;
	left:35px;
	bottom:2px;
}
.detail-tabs>li{
	display: inline-block;
	position: relative;
	margin-right: 45px;
}
.detail-tabs>li.sel::after{
	content: '';
	position: absolute;
	left:0;
	bottom:2px;
	background-color: #1DA977;
	width:100%;
	height: 5px;
	overflow: hidden;
}
.detail-tabs>li>span{
	text-align: center;
	color: #333;
	font-size: 18px;
	line-height: 50px;
	cursor: pointer;
	
}
.detail-tabs>li>span:hover{
	color: #00AD4D;
}
.detail-tabs>li.sel>span{
	color: #1DA977;
	
}
.detail-tabs-con{
	width: 880px;
	box-sizing: border-box;
}
.detail-tabs-con>li{
	padding:15px 0;
	display: none;
}
.detail-tabs-con>li.sel{
	display: block;
}
.detail-tabs-con>li>.detail{
	padding-left:35px;
}
.detail-tabs-con>li>.detail>div{
	padding:10px 35px 10px 0;	
	line-height: 200%;
}
.detail-tabs-con>li>.detail *{
	color: #333;
	font-size: 16px;
}
.detail-tabs-con>li>.detail img{
	max-width:820px;
}

.detail-tabs-con .grouplist{
	padding:0 40px 10px 40px;
}
.detail-tabs-con .grouplist>li{
	display: inline-block;
}
.detail-tabs-con .grouplist>li>a{
	display: block;
	line-height: 32px;
	padding: 0 10px;
	margin-right: 7px;
	background-color: #CCCCCC;
	color: #333333;
	font-size: 12px;
}
.detail-tabs-con .grouplist>li>a:hover{
	background-color: #1DA977;
	color:#fff;
}
.detail-tabs-con .grouplist>li>a.sel{
	background-color: #1DA977;
	color:#fff;
}
.detail-tabs-con .pages{
	text-align: center;
	padding:10px;
}


.detail-tabs-con>li>.list{

}
.detail-tabs-con>li>.list>li{
	
}
 
.detail-tabs-con>li>.list>li.no-data{
	padding:120px 0 !important;
	margin:0px 20px;
	text-align:center;
	font-size:16px;
	background:#F7F7F7;
	pointer-events: none;
}

.detail-tabs-con>li>.list>li>a{
	display: block;
	line-height: 65px;
	padding-left: 70px;
	background-image: url(../detail-list-icon.png);
	background-repeat: no-repeat;
	background-position: 35px center;

	color: #000;
	font-size: 16px;
	position: relative;

	
}
.detail-tabs-con>li>.chapter-list>li>a{
	cursor: default;
}
.detail-tabs-con>li>.chapter-list>li>a.enabled{
	cursor: pointer;
}
.detail-tabs-con>li>.list>li>a:hover{
	background-color: #F5F8FF;
}

.detail-tabs-con>li>.list>li>a i{
	display: inline-block;
	font-style: normal;
	line-height: 20px;
	padding:0 5px;
	background:#1DA977;
	border-radius: 3px;
	font-size: 12px;
	color:#fff;
}
.detail-tabs-con>li>.list>li>a i.mark{
	margin-left:15px;
}

.detail-tabs-con>li>.list>li>a i.study{
	float: right;
	margin-top:18px;
	margin-right: 35px;
	padding:0 15px;
	line-height: 28px;

	display: none;
}
.detail-tabs-con>li>.list>li>a.enabled:hover i.study{
	display: block;
}

.detail-tabs-con>li>.list>li>a .time{
	float: right;
	font-size: 12px;
	color:#656565;
	padding-right: 35px;
}

.detail-tabs-con>li>.list>li>a.enabled:hover .time{
	display: none;
}


.detail-tabs-con>li>.res-list>li>a{
	background-image: url(../res-icon-doc.png);

	padding-left: 85px;
}
.detail-tabs-con>li>.res-list>li>a.file-pdf{
	background-image: url(../res-icon-pdf.png);
}
.detail-tabs-con>li>.res-list>li>a.file-doc{
	background-image: url(../res-icon-doc.png);
}
.detail-tabs-con>li>.res-list>li>a.file-docx{
	background-image: url(../res-icon-docx.png);
}
.detail-tabs-con>li>.res-list>li>a.file-ppt{
	background-image: url(../res-icon-ppt.png);
}
.detail-tabs-con>li>.res-list>li>a.file-pptx{
	background-image: url(../res-icon-pptx.png);
}
.detail-tabs-con>li>.res-list>li>a.file-xls{
	background-image: url(../res-icon-xls.png);
}
.detail-tabs-con>li>.res-list>li>a.file-xlsx{
	background-image: url(../res-icon-xlsx.png);
}
.detail-tabs-con>li>.res-list>li>a.file-mp4{
	background-image: url(../res-icon-mp4.png);
}
.detail-tabs-con>li>.res-list>li>a.file-mp3{
	background-image: url(../res-icon-mp3.png);
}
.detail-tabs-con>li>.res-list>li>a.file-jpg{
	background-image: url(../res-icon-jpg.png);
}

.detail-tabs-con>li>.res-list>li>a.file-png{
	background-image: url(../res-icon-png.png);
}

.detail-tabs-con>li>.res-list>li>a.file-gif{
	background-image: url(../res-icon-gif.png);
}



.lesson-detail>.right-side{
	position: absolute;
	right: 0;
	top:0;
	width: 295px;
}

.rel-teachers{
	padding:25px 0;
	background: #fff;

	-moz-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
	-webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
	-o-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);

	margin-bottom: 18px;
}
.rel-teachers>.title{
	color: #333;
	font-size: 18px;
	line-height: 34px;
	padding-left: 45px;
	position: relative;
}
.rel-teachers>.title::before{
	content: '';
	display: block;
	position: absolute;
	left:28px;
	top:8px;
	width:4px;
	height: 18px;
	overflow: hidden;
	background: #1DA977;
}
.rel-teachers>.list{

}
.rel-teachers>.list>li{
	height: 100px;
	position: relative;

	box-sizing: border-box;

	padding-top: 20px;
	padding-left:26px;
}
.rel-teachers>.list>li a.thumb{
	display: block;
	width:60px;
	height:60px;
	overflow: hidden;
	border-radius: 50%;

}
.rel-teachers>.list>li a.thumb:hover{

}
.rel-teachers>.list>li a.thumb img{
	width: 60px;
	height: 60px;
}
.rel-teachers>.list>li a.thumb:hover{
	opacity: 0.8;
}
.rel-teachers>.list>li a.title{
	display: inline-block;
	position: absolute;
	left:100px;
	top:30px;
	line-height: 30px;
	color: #000;
	font-size: 16px;
}
.rel-teachers>.list>li a.title:hover{
	color: #00AD4D;
}
.rel-teachers>.list>li .info{
	display: inline-block;
	position: absolute;
	left:100px;
	top:50px;
	line-height: 30px;
	color: #656565;
	font-size: 12px;
}


.rel-lesson{
	padding:25px 0;
	margin-bottom: 18px;
	background: #fff;

	-moz-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
	-webkit-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
	-o-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.01);
}
.rel-lesson>.title{
	color: #333;
	font-size: 18px;
	line-height: 34px;
	padding-left: 45px;
	position: relative;
}
.rel-lesson>.title::before{
	content: '';
	display: block;
	position: absolute;
	left:28px;
	top:8px;
	width:4px;
	height: 18px;
	overflow: hidden;
	background: #1DA977;
}
.rel-lesson>.list{

}
.rel-lesson>.list>li{
	height: 100px;
	position: relative;

	box-sizing: border-box;

	padding-top: 12px;
	padding-left:26px;
}
.rel-lesson>.list>li a.thumb{
	display: block;
	width:102px;
	height:76px;
	overflow: hidden;

}
.rel-lesson>.list>li a.thumb:hover{

}
.rel-lesson>.list>li a.thumb img{
	width: 102px;
	height: 76px;
}
.rel-lesson>.list>li a.thumb:hover{
	opacity: 0.8;
}
.rel-lesson>.list>li a.title{
	display: inline-block;
	position: absolute;
	left:145px;
	top:10px;
	line-height: 150%;
	color: #000;
	font-size: 12px;
	padding-right: 26px;
}
.rel-lesson>.list>li a.title:hover{
	color: #00AD4D;
}
.rel-lesson>.list>li .info{
	display: inline-block;
	position: absolute;
	left:145px;
	top:42px;
	line-height: 30px;
	color: #999;
	font-size: 12px;
}
.rel-lesson>.list>li .join-info{
	display: inline-block;
	position: absolute;
	left:145px;
	top:64px;
	line-height: 30px;
	color: #999;
	font-size: 12px;
}
.rel-lesson>.list>li .join-info::before{
	content: "\e618";
	display: inline-block;
	color: #999;
	font-size: 16px;
	cursor: pointer;
}




.zuoye-list .zuoye{
	padding-bottom: 40px;
	margin:0 40px;
}
.zuoye-list .zuoye>.title{
	font-size: 18px;
	color:#1DA977;
	line-height: 150%;
}
.zuoye-list .zuoye>.title>span{
	color:#000;
}
.zuoye-list .zuoye>.content{
	padding:10px 0;
}
.zuoye-list .zuoye>.content, .zuoye-list .zuoye>.content *{
	font-size: 14px;
	color:#666;
	line-height: 150%;
}
.zuoye-list .zuoye .student-content{
}
.zuoye-list .zuoye .student-content>div{
	padding:10px 0;
	position: relative;
}
.zuoye-list .zuoye .student-content>div>textarea{
	width:808px;
	height: 150px;
	border:1px solid #BFBFBF;
	border-radius: 5px;
	padding: 10px;
	box-sizing: border-box;
}

.zuoye-list .zuoye .student-content .upload-title{
	font-size: 16px;
	color:#656565;
}
.zuoye-list .zuoye .student-content .upload-title::before{
	content: "\e7e2";
	display: inline-block;
	color: #656565;
	font-size: 18px;
	cursor: pointer;
	margin-right:3px;
}

.zuoye-list .zuoye .student-content .upload-file{
	display: inline-block;
}
.zuoye-list .zuoye .student-content .upload-file .file-info{
	color: #656565;
	font-size: 14px;
	padding:0 10px;
}
.zuoye-list .zuoye .student-content .upload-file>a{
	display: inline-block;
	font-size: 12px;
	color:#333;
	padding:0 15px;
	line-height: 28px;
	border:1px solid #DBDBDB;
	background-color: #F2F2F2;
}
.zuoye-list .zuoye .student-content .upload-file>a:hover{
	background-color: #e6e6e6;
}

.zuoye-list .zuoye .student-content .btn-submit{
	display: inline-block;
	font-size: 14px;
	color:#fff;
	padding:0 15px;
	line-height: 36px;
	background-color: #8ED4BB;
	border-radius: 3px;
	
	border: none;
	outline: none;

	position: absolute;
	right: 0;
	top:50%;
	margin-top:-18px;
}
.zuoye-list .zuoye .student-content .btn-submit:hover{
	opacity: 0.8;
}