@charset "utf-8";
section.course{
	margin: 0;
	background: #f0f0f0;
	padding: 2% 0;
}
.breadcrumb{
	background: #f0f0f0;
}
.brush{
	width: 100%;
	background: #fff;
	padding:2%;
}
.brush ul li{
	margin-bottom: 2%;
}
.brush ul li>span{
	color: #333;
	font-size: 16px;
}
.brush ul li>i{
	display: inline-block;
	width: 60px;
	height: 30px;
	margin-right: 1%;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	font-size:14px ;
}
.brush ul li>i:hover{
	background: #0c9ffe;
	color: #fff;
}
.brush ul li>i.all-course{
	display: inline-block;
	width: 60px;
	height: 30px;
	background: #0c9ffe;
	color: #fff;
	font-size: 14px;
	margin-right: 1%;
}
@media screen and (min-width: 1200px){
	.course-main{
		min-width:1155px;
	}
}
@media screen and (max-width: 1199px){
	.course-main{
		min-width:937px;
	}
}
.course-main ul{
	margin-right: -20px;
	font-size:0px ;
}
.course-main ul li{
	width: 270px;
	border:1px solid #e5e5e5;
	padding: 4px 6px 6px 6px;
	margin-top: 2%;
	background-color: #fff;
	overflow: hidden;
	transition: all .8s;
	-webkit-transition: all .8s;
	-o-transition: all .8s;
	-moz-transition: all .8s;
	-ms-transition: all .8s;
	margin-right:20px ;
	display: inline-block;
	height:324px;
	vertical-align:top;
}
@media screen and (max-width: 1199px){
	.course-main{
		min-width:937px;
	}
	.course-main ul li{
		width: 230px;
		margin-right:6px;
		
	}
}
.course-main ul li:hover{
	border:1px solid #FF9900;
}
.course-main ul li>a .course-img>img{
	transition: all .8s;
    -webkit-transition: all .8s;
    -o-transition: all .8s;
    -moz-transition: all .8s;
    -ms-transition: all .8s;
}
.course-main ul li:hover>a .course-img>img{
	transform: translateZ(0) scale(1.02);
	-webkit-transform: translateZ(0) scale(1.02);
	-o-transform: translateZ(0) scale(1.02);
	-moz-transform: translateZ(0) scale(1.02);
	-ms-transform: translateZ(0) scale(1.02);
}
.course-main ul li>a>h3{
	color: #333;
	font-size: 16px;
	margin: 2% 0 !important;
	height:42px;
	line-height:20px;
}
.course-main ul li>a>h3>i{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: #0C9FFE;
	text-align: center;
	line-height: 25px;
	color: #fff;
	font-size: 14px;
	margin-right: 8px;
	border-radius:4px;
}
.course-main ul li>a>p{
	padding:5% 0;
	font-size: 12px;
	color: #999;
	height:67px;
}
.course-img>img{
	height:124px;
}
.sale>p{
	color: #999;
	font-size: 18px;
}
.sale>span{
	color: #ff9900;
	font-size: 24px;
}
.sale>span>del{
	font-size: 14px;
	color: #999;
	margin-right: 5px;
}
.course-main ul li>a:hover{
	text-decoration: none;
	color: #333;
}
.course-intr{
	width: 100%;
	padding: 3% 2%;
	padding-bottom: 0;
}
.course-intr>h3{
	font-size: 14px;
	color: #333;
	font-weight: bold;
	margin-bottom: 5px;
}
.course-intr>span{
	color: #999;
	font-size: 14px;
}
.course-intr>p{
	font-size: 12px;
	font-weight: bold;
	color: #666;
	margin-top: 6%;
	margin-bottom: 5%;
}
.course-intr>span.price{
	font-weight: bold;
	font-size: 16px;
	color: #0c9ffe;
}
.pager1{
	display: block;
	width: 60%;
	margin:20px auto;
	text-align: center;
}
.pager1>li{
	display: inline-block;
	width: 40px;
	height: 40px;
	border:1px solid #e5e5e5;
	margin-right: 1%;
	background-color: #fff;
}
.pager1>li>a{
	border:0px;
	background: #fff;
	width: 40px;
	height: 40px;
	border:1px solid #e5e5e5;
	text-align: center;
	padding:0px;
	line-height: 40px;
	color:#0c9ffe;
}
.pager1>li>.hover{
	border:0px;
	background: #0C9FFE;
	width: 40px;
	height: 40px;
	border:1px solid #e5e5e5;
	text-align: center;
	padding:0px;
	line-height: 40px;
	color:#FFFFFF;
}
.pager1>li>a:hover{
	background: #0C9FFE;
}
/*课程中心录播详情开始*/
.tape-left{
	width: 60%;
	border-top: 1px solid #0C9FFE;
	background: #fff;
	padding: 2%;
	position: relative;
}
.tape-left>h3{
	color: #333;
	font-size: 22px;
	font-weight: bold;
	padding-bottom:1%;
}
.tape-left>h3 span{
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius:6px;
	line-height: 30px;
	text-align: center;
	background: #0C9FFE;
	color: #fff;
	margin-right: 10px;
	font-size:18px;
}
.Sup-mater{
	margin-top: 20px;
}
.Sup-mater>h3{
	font-size: 14px;
	color: #333;
	padding-bottom:15px;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 10px;
}
.Sup-mater>span{
	margin-left: 20%;
	color: #999;
	font-size: 16px;
	text-align: right;
}
.tape-copurse{
	margin-top: 10px;
}
.tape-copurse>p{
	color: #333;
	font-size: 14px;
	padding:10px 0;
	border-bottom: 1px solid #e5e5e5;
}
.tape-copurse ul li{
	padding: 10px;
	border-bottom: 1px solid #e5e5e5;
}
.tape-copurse-info{
	width:86%;
}
.tape-copurse-info>p{
	color: #666;
	font-size: 16px;
	margin:5px 0;
	margin-left: 20px;
	margin-top:0px;
}
.tape-copurse-info>p:nth-child(2){
	font-size:14px;
}
.tape-copurse-info>p>span{
	margin-right: 40px;
	font-size: 14px;
}
.tape-step p{
	color: #333;
	font-size: 16px;
	margin:20px 0 10px 10px;
}
.tape-step p>i{
	color: #0C9FFE;
}
.four-step{
	
	
	padding-top: 8px;
}
.four-step ul li{
	font-size: 14px;
	margin-bottom:15px;
}
.tape-right{
	width: 38%;
}
.tape-price{
	background: #fff;
	padding: 2%;
	border-top:1px solid #0C9FFE;
	text-align: left;
}
.tape-price p{
	margin: 20px 0;
	font-size: 16px;
	color: #333;
	margin-left:25%;
}
.tape-price p.notAvailable{
	margin-top:80px;
	margin-bottom:80px;
	color:#999;
}
.tape-price p:nth-child(2){
	font-size:16px;
	color:#999;	
}
.tape-price p:nth-child(2)>span{
	font-size:16px;
	color:#999;	
}
.tape-price p>span{
	color: #ff9900;
	font-size: 30px;
}
.tape-price>a{
	display: block;
	width:40%;
	padding: 10px 20px;
	margin: 0px auto;
	background: #ff9900;
	color: #fff;
	border-radius:4px;
	font-size:18px;
	text-align:center;
	margin-bottom:20px;
}
.person-num{
	background: #fff;
	padding: 2%;
	border-top:1px solid #0C9FFE;
	margin-top: 10px;
	min-height: 300px;
}
.person-num ul li{
	height: 30px;
	line-height: 30px;
	text-align: center;
}
.person-num ul li>span{
	margin-right: 20px;
}

.live-left p.countdown{
	color: #ff9900;
	width: 300px;
	position: absolute;
	right:7px;
	top: 0;
	height:100px;
	line-height:100px;
	font-size:16px;
	text-align:center;
}
.live-left p.countdown i{
	display:inline-block;
	width:40px;
	height:30px;
	background:#666;
	color:#fff;
	text-align:center;
	line-height:30px;
	font-size:16px;
	border-radius:4px;
	margin:0 3px;
}
.live-left h3{
	margin-top: 20px;
}
.live-title p{
	color: #999;
	font-size: 14px;
	padding: 5px 0px 5px 40px;
}
.live-teacherinfo{
	border-top:1px solid #e5e5e5;
	padding-top:10px;
	margin-top:10px;
}
.teacher-header{
	margin-left:10px;
	padding:5px 8px;
	text-align:center;
	border-radius:6px;
	width:120px;
}
.teacher-header img{
	width:60px;
	height:60px;
	border:1px solid #e5e5e5;
	border-radius:50%;
	margin-bottom:5px;
}
.teacher-header>p>span{
	display:block;
	color:#666;
}
.teachinfo-left{
	width:540px;
}
.teachinfo-left>img{
	display:inline-block;
	width:60px;
	height:60px;
	margin-right:10px;
	border-radius:50%;
	-webkit-border-radius:50%; 
	-ms-border-radius:50%;  
	-moz-border-radius:50%;
	-o-border-radius:50%;
	
}
.teachinfo-left>span{
	color:#666;
}
.teachinfo-right{
	line-height: 60px;
}
.teachinfo-right a{
	color: red;
}
.live-suggest>h3{
	color: #333;
	font-size: 16px;
	font-weight: 500;
	padding-bottom: 15px;
	margin-bottom: 10px;
	border-bottom: 1px solid #e5e5e5;
	
}

/*详情开始*/
.video-img{
 	position: relative;
 }
.playicon{
 	position: absolute;
 	width: 636px;
 	height: 100%;
 	background: rgba(0,0,0,.6);
 	cursor: pointer;
 	left: 0;
 	top: 0;
 }
.playicon>img{
  	position: absolute;
  	left: 50%;
  	top: 50%;
  	margin-left: -28px;
  	margin-top:-28px;
}
.videomain{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	min-width: 1200px;
	background:rgba(0,0,0,.2);
	z-index: 999;
}
.videomain>video{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -360px;
	margin-top:-200px ;
}
.videomain>i{
	display: inline-block;
	width: 40px;
	height: 40px;
	font-size: 20px;
	color: #0C9FFE;
	background:#e5e5e5;
	border-radius: 50%;
	text-align: center;
	line-height:40px;
	position: absolute;
	top: 100px;
	right: 150px;
	cursor: pointer;
}
.brief-info>h3{
	font-size:20px;
	color: #333;
	margin-bottom: 15px;
	margin-top:30px;
}
.Enrolment{
	margin-top:40px;
}
.Suitable:nth-child(2){
	margin-top:20px ;
}
.Suitable>h4{
	width:136px;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	color: #fff;
	background:#0C9FFE;
	text-align: center;
	box-shadow: 4px 0 6px #40647b;
}
.Suitable-main{
	margin-top:15px;
	border:1px dotted #ed5900;
	border-radius:6px;
	padding:6px 20px;
	line-height: 30px;
	font-size: 16px;
	color: #666;
}
.Suitable-main ul>li::before{
	content:"●";
	color: #ed5900;
	margin-right: 10px;
}	
.conrse-intro{
	margin-top:30px;
	text-align: center;
}
.conrse-intro>h2{
	color: #333;
	font-size: 30px;
	font-weight: 600;
}
.conrse-intro>i{
	display:inline-block;
	width:113px;
	height: 2px;
	background: #ed5900;
	margin-top:6px;
}
.Enproblem>h3{
	font-size: 24px;
	line-height: 30px;
}
.Enproblem>h3>i{
	display: block;
	height: 22px;
	width: 6px;
	background:#0c9ffe;
	margin-right:15px ;
	margin-top:5px;
}
.Enproblem-img{
	width:48%;
}
.Enproblem-main{
	margin-top: 30px;
}
.topic{
	width: 50%;
}
.topic ul li{
	line-height: 30px;
	font-size:16px;
	color: #666;
	margin-top: 20px;
}
.topic ul li>i{
	display: inline-block;
	width: 20px;
	height: 20px;
	background:#0C9FFE;
	border-radius: 100%;
	float: left;
	margin-top: 6px;
	margin-right: 5px;
}
.topic ul li>span{
	float: left;
	width: 90%;
	line-height: 30px;
	font-size: 18px;
	
}
.step{
	margin-top:60px;	
}
.steptop h3{
	font-size: 20px;
	color: #333;
}
.steptop>p{
	height: 30px;
	font-size: 16px;
	color: #666;
	line-height: 30px;
}
.step1img{
	width: 643px;
	margin:0 auto;
}
.steptop>h3>i{
	display:inline-block;
	width:6px;
	height:16px;
	background:#0c9ffe;
	margin-right:6px;
}
.steptop>h3{
	margin-bottom:15px;
}
.step2>h3{
	margin-bottom:0px;
}
.step2>p{
	margin-bottom:15px;
}
.step2main{
	width:100%;
}
.step2main ul{
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	flex-wrap: wrap;
}
.step2main ul li{
	display: flex;
	width: 180px;
	height: 316px;
	background:url(../images/step2bgimg.png) no-repeat center center;
	position: relative;
	margin-top: 10px;
}
.step2list{
	width: 114px;
	height: 200px;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
}
.step2list>h3{
	text-align: center;
	color: #0C9FFE;
	font-size: 24px;
}
.step2list>i{
	display: block;
	width: 115px;
	height: 1px;
	background:#e5e5e5;
	margin: 22px 0;
}
.step2list>p{
	font-size: 14px;
	color: #666;
	line-height: 20px;
}
.step3>h3{
	margin-bottom:4px;
}
.step3topmain{
	margin-left: 10px;
}
.step3topmain>p{
	font-size: 20px;
}
.step3topmain>span{
	color: #666;
}
.step3top{
	margin:10px 0 20px 0;
}
.step3main{
	width: 530px;
	margin:0 auto;
}

.kindly{
	margin-top: 50px;
}
.kindly>h3{
	font-size: 30px;
	text-align: center;
	font-weight: 600;
}
.kindly>p{
	width: 113px;
	height: 2px;
	background: #f38f00;
	margin: 0 auto;
	margin-top: 10px;
}
.kindlymain{
	margin-top: 20px;
}
.kindlymain ul{
	display: flex;
	justify-content: space-between;
}
.kindlymain ul li{
	width: 120px;
}
.kindlymain ul li>i{
	display: block;
	width: 57px;
	height: 57px;
	color: #FFFFFF;
	font-size: 30px;
	margin: 0 auto;
	background: #0C9FFE;
	border-radius: 50%;
	line-height: 57px;
	text-align:center;
	margin-bottom:10px;
}
.kindlymain ul li>p{
	margin-left: 6px;
}
.kindlymain ul li>p>i{
	color: #fd721f;
}
.kindlymain ul li:nth-child(2)>i{
	background-position: -57px 0px;
}
.kindlymain ul li:nth-child(3)>i{
	background-position: -114px 0px;
}
.kindlymain ul li:nth-child(4)>i{
	background-position: -171px 0px;
}
.kindlymain ul li:nth-child(5)>i{
	background-position: -228px 0px;
}
.way{
	margin-top: 30px;
}
.qq-way{
	width: 300px;
	height: 112px;
	background: #0C9FFE;
	color: #fff;
	padding: 20px;
	box-sizing: border-box;
}
.qq-way p{
	font-size: 20px;
	margin: 10px 0;
	font-weight: bold;
	letter-spacing:4px;
}
.qq-way p.pull-right{
	width: 51px;
	height: 51px;
	background: url(../images/qqicon.png) no-repeat;
	background-position: 0px 0px;
}
.qq-way:nth-child(2) p.pull-right{
	background-position: -51px 0px;
}
.four-step>ul>li>i{
	display: inline-block;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	background: #0C9FFE;
	border-radius:50% ;
	font-style: normal;
	color: #fff;
	font-size: 14px;
}
.four-step>ul>li>p{
	/*display: block;*/
	width: 594px;
	margin-left:6px;
	margin:0px;
}

 /*详情结束*/
/*.four-step ul li:nth-child(1){
	margin-top: 10px;
}*/


.teachinfo-left{
	width: 80px;
	text-align: center;
	margin-right: 20px;
	border: 1px solid #fff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	
}
.teachinfo-left>p{
	color: #666;
	font-size: 14px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	/*font-weight: 600;*/
}
.live-teacherinfo{
	width: 88%;
	margin: 0 auto;
}
.teachinfo-left>.infoimg{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	margin: 0 auto;
	font-size:0;
	border:1px solid #e5e5e5;
	transition: all 1s;
}
.infoimg>img{
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border: 2px solid #fff;
}
.infoimg>img.now{
	border:2px solid #10c55b;
}
.live-teacherinfo>h3{
	color: #333;
	font-size: 18px;
	width: 100%;
	padding-bottom: 10px;
	border-bottom: 1px solid #e5e5e5;
	margin-bottom: 10px;
	font-weight: 600;    
}
.shandow{
	transform:rotate(360deg) ;
	-ms-transform:rotate(360deg); 	/* IE 9 */
	-moz-transform:rotate(360deg); 	/* Firefox */
	-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
	-o-transform:rotate(360deg); 
	transform: scale(1.1);
}
.customization{
	width: 100%;
}
.customization>ul{
	display: flex;
	justify-content:center;
	flex-wrap: wrap;
}
.customization{
	padding-bottom: 38px;
	border-bottom: 1px solid #e5e5e5;
}
.customization>ul>li{
	width: 28%;
	text-align: center;
	font-size: 14px;
	padding:8px 0;
	background: #e5e5e5;
	color: #666;
	float: left;
	margin-right: 10px;
	margin-top: 20px;
	cursor: pointer;
	border-radius:40px;	
}
.customization>ul>li:hover{
	background: #0C9FFE;
	color: #fff;
}
.customization>ul>li.classbg{
	background: #0C9FFE;
	color: #fff;
}
.customization>h4{
	font-size: 16px;
	text-align: left;
	color: #333;
	margin-top: 20px;
}
.choosemain{
	text-align: left;
}
.choosemain>p{
	margin-left: 20px;
}
.choosemain>p>i{
	font-size: 14px;
	color: #666;
	margin-right: 10px;
}
.choosemain>p>span{
	font-size: 14px;
	color: #999;
}

.emerg{
	color: red;
}