/** ***** 视频 ***** */
.videoBox{
	width: 100%;
	height: calc(100vw / 750 * 420);
	max-height: calc(100vh - 190px);
	/* padding-bottom:calc(100% / 750 * 420); */
	
	position: relative;
}
.videoBox video{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
}

/** ***** 目录和信息 ***** */
.videoInfo{
	margin-top: 22px;
	border-radius: 12px;
	padding: 0 20px;
	background: #FFFFFF;
}
.detailHeader{
	border-bottom: 2px solid #ddd;
	display: flex;
}
.detailHeader>div+div{
	margin-left: 30px;
}
.detailHeader>div>p{
	/* font-size: 28px; */
	font-size: 18px;
	font-weight: bold;
	color: #999999;
	/* line-height: 88px; */
	line-height: 72px;
	cursor: pointer;
}
.detailHeader>.active{
	position: relative;
}
.detailHeader>.active>p{
	color: #196BC0;
}
.detailHeader>.active::after{
	content: "";
	display: block;
	width: 100%;
	height: 6px;
	background: #196BC0;
	border-radius: 3px;
	position: absolute;
	bottom: -3px;
}

/** *** 课程列表 *** */
.courseList .courseItemBox{
	/* padding: 30px 0; */
	padding: 15px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}
.courseList .courseItemBox+.courseItemBox{
	border-top: 2px solid #eee;
}
.courseList .courseLeft{
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-right: 22px;
	border-radius: 50%;
}
.courseList .courseLeft img{
	width: 100%;
	height: 100%;
}
.courseList .courseContent{
	flex-grow: 1;
}
.courseList .courseContent>p{
	/* font-size: 24px; */
	font-size: 15px;
	color: #666;
	font-weight: bold;
	line-height: 40px;
}
.courseList .courseRight{
	min-width: 60px;
	flex-shrink: 0;
	margin-left: 22px;
}
.courseList .playIng{
	/* display: flex;
	align-items: center;
	justify-content: flex-end; */
	position: relative;
}
.courseList .playIng>div{
	bottom:0px;
	right:0px;
	position: absolute;
	width: 4px;
	height: 6px;
	background: #196BC0;
	border-radius: 2px;
	animation:playIng 1s infinite ease-in-out;
}
.courseList .playIng>div:nth-of-type(2){
	right: 8px;
	animation-delay:0.3s
}
.courseList .playIng>div:nth-of-type(3){
	right: 16px;
	animation-delay:0.6s
}
@keyframes playIng{
	0%{height: 6px;transform: translateY(0px);}
	/* 25%{height: 16px;transform: translateY(8px);} */
	50%{height: 16px;transform: translateY(8px);}
	100%{height: 6px;transform: translateY(0px);}
}
/* .courseList .playIng>div+div{
	margin-left: 4px;
}
.courseList .playIng>div:nth-of-type(2){
	height: 16px;
} */
.courseList .courseRight>p{
	/* font-size: 20px; */
	font-size: 14px;
	color: #999999;
	text-align: right;
}
.courseList .active .courseContent>p{
	color: #196BC0;
}

/** *** 课程信息 *** */
.courseMsg .tit>p{
	margin-top: 40px;
	/* font-size: 28px; */
	font-size: 18px;
	color: #333;
	font-weight: bold;
}
.courseMsg .msgState{
	margin: 6px 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.courseMsg .mSLeft{
	flex-grow: 1;
}
.courseMsg .mSLeft>span{
	font-size: 16px;
	font-weight: bold;
	color: #F08614;
	line-height: 32px;
	padding-left: 21px;
	padding-right: 21px;
	position: relative;
}
.courseMsg .mSLeft>span::before{
	content: '';
	display: inline-block;
	width: 2px;
	height: 16px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* margin-top: 8px; */
	left: -1px;
	background:#999;
	line-height: 0;
}
.courseMsg .mSLeft>span:first-of-type{
	padding-left: 0;
}
.courseMsg .mSLeft>span:first-of-type::before{
	display: none;
	width: 0;
}
.courseMsg .mSRight>span{
	font-size: 16px;
	color: #999;
	line-height: 32px;
}
.courseMsg .desc{
	/* padding-top: 26px; */
	padding-bottom: 40px;
}
.courseMsg .desc>p{
	/* font-size: 24px; */
	/* font-size: 16px; */
	color: #666;
	/* font-weight: bold; */
	/* line-height: 36px; */
	
	
	padding-top: 20px;
	font-size: 15px;
	line-height: 28px;
}
.courseMsg .desc>p:first-of-type{
	padding-top: 0;
}

/** ***** 响应式 ***** */
@media (max-width: 750px) {
	/** ***** 视频 ***** */
	.videoBox{
		width: 100%;
		height: 0;
		padding-bottom:calc(100% / 750 * 420);
		position: relative;
	}
	.videoBox video{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #000;
	}
	
	/** ***** 目录和信息 ***** */
	.videoInfo{
		margin-top: .22rem;
		border-radius: .12rem;
		padding: 0 .20rem;
		background: #FFFFFF;
	}
	.detailHeader{
		border-bottom: .02rem solid #ddd;
		display: flex;
	}
	.detailHeader>div+div{
		margin-left: .30rem;
	}
	.detailHeader>div>p{
		font-size: .28rem;
		font-weight: bold;
		color: #999999;
		line-height: .88rem;
	}
	.detailHeader>.active{
		position: relative;
	}
	.detailHeader>.active>p{
		color: #196BC0;
	}
	.detailHeader>.active::after{
		content: "";
		display: block;
		width: 100%;
		height: .06rem;
		background: #196BC0;
		border-radius: .03rem;
		position: absolute;
		bottom: -.03rem;
	}
	
	/** *** 课程列表 *** */
	.courseList .courseItemBox{
		padding: .30rem 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.courseList .courseItemBox+.courseItemBox{
		border-top: .02rem solid #eee;
	}
	.courseList .courseLeft{
		flex-shrink: 0;
		width: .36rem;
		height: .36rem;
		margin-right: .22rem;
		border-radius: 50%;
	}
	.courseList .courseLeft img{
		width: 100%;
		height: 100%;
	}
	.courseList .courseContent{
		flex-grow: 1;
	}
	.courseList .courseContent>p{
		font-size: .24rem;
		color: #666;
		font-weight: bold;
		line-height: .40rem;
	}
	.courseList .courseRight{
		min-width: .60rem;
		flex-shrink: 0;
		margin-left: .22rem;
	}
	.courseList .playIng{
		position: relative;
	}
	.courseList .playIng>div{
		bottom: 0rem;
		right:0rem;
		width: 2px;
		height: 4px;
		border-radius: 1px;
		animation:playIng 1s infinite ease-in-out;
	}
	.courseList .playIng>div:nth-of-type(2){
		right: 4px;
		animation-delay:0.3s
	}
	.courseList .playIng>div:nth-of-type(3){
		right: 8px;
		animation-delay:0.6s
	}
	@keyframes playIng{
		0%{height: 4px;transform: translateY(0px);}
		/* 25%{height: 16px;transform: translateY(8px);} */
		50%{height: 10px;transform: translateY(5px);}
		100%{height: 4px;transform: translateY(0px);}
	}
/* 	.courseList .playIng{
		display: flex;
		align-items: center;
		justify-content: flex-end;
	} */
	/* .courseList .playIng>div{
		width: .04rem;
		height: .12rem;
		background: #196BC0;
		border-radius: .02rem;
	}
	.courseList .playIng>div+div{
		margin-left: .04rem;
	}
	.courseList .playIng>div:nth-of-type(2){
		height: .16rem;
	} */
	.courseList .courseRight>p{
		font-size: .20rem;
		color: #999999;
		text-align: right;
	}
	.courseList .active .courseContent>p{
		color: #196BC0;
	}
	
	/** *** 课程信息 *** */
	.courseMsg .tit>p{
		margin-top: .40rem;
		font-size: .28rem;
		color: #333;
		font-weight: bold;
	}
	.courseMsg .msgState{
		margin: .06rem 0 .16rem;
	}
	.courseMsg .mSLeft>span{
		font-size: .22rem;
		line-height: .32rem;
		padding-left: .21rem;
		padding-right: .21rem;
	}
	.courseMsg .mSLeft>span{
		font-size: .22rem;
		line-height: .32rem;
		padding-left: .21rem;
		padding-right: .21rem;
	}
	.courseMsg .mSLeft>span::before{
		width: .02rem;
		height: .22rem;
		/* margin-top: .05rem; */
		left: -.01rem;
	}
	.courseMsg .mSRight>span{
		font-size: .22rem;
		line-height: .32rem;
	}
	.courseMsg .desc{
		/* padding-top: .26rem; */
		padding-bottom: .40rem;
	}
	.courseMsg .desc>p{
		font-size: .24rem;
		color: #666;
		/* font-weight: bold; */
		/* line-height: .36rem; */
		
		padding-top: .20rem;
		/* font-size: .30rem; */
		line-height: .45rem;
	}
	.courseMsg .desc>p:first-of-type{
		padding-top: 0;
	}
	
	/** 底部组件 S */
		.bottomZJBox{
			margin-top: 0.24rem;
		}
		/** 显示分享课程 */
		.winbtn_list .share_class_btn{
			display: block;
		}
	/** 底部组件 S */
}