@charset "UTF-8";

.clear:after {
	content: "";
	display: block;
	clear: both;
}



.block {
	background-color: #f5f5f5;
}
.block-content {
	display: block;
	width: 1300px;
	margin: 0 auto;
	padding-bottom: 0px;
	background-color: #f5f5f5;
	padding: 0 65px;
	box-sizing: border-box;
}


/** */
.livelist-top {
	margin: 0;
    padding: 0 30px;
    background-color: #fff;
}
.livelist-top h1 {
	display: inline-block;
	font-size: 24px;
}

.livelist-top .poplist-nav {
	position: relative;
	display: inline-block;
	padding: 10px
}

.livelist-top .poplist-nav>i {
	cursor: pointer;
	font-size: 24px
}

.livelist-top .poplist-nav>dl {
	display: none;
	position: absolute;
	z-index: 20;
	left: 10px;
	margin-top: 5px;
	background-color: #fffdf9;
	border: 1px solid #ddd;
	padding: 10px 30px;
	width: 335px
}

.livelist-top .poplist-nav>dl:before {
	position: absolute;
	top: -5px;
	left: 10px;
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	background-color: #fffdf9;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	transform: rotate(45deg)
}

.livelist-top .poplist-nav>dl dd {
	color: #666;
	margin: 10px 0;
	zoom: 1;
	padding-left: 4em
}

.livelist-top .poplist-nav>dl dd:after {
	content: " ";
	clear: both;
	display: table
}

.livelist-top .poplist-nav>dl dd strong {
	display: inline-block;
	width: 4em;
	color: #147ccc;
	text-align: right;
	float: left;
	margin-left: -4em
}

.livelist-top .poplist-nav>dl dd a {
	margin: 10px 0 10px 20px
}

.livelist-top .poplist-nav.on>dl, .livelist-top .poplist-nav:hover>dl {
	display: block;
}



.livelist-nav {
	padding: 0 30px;
	background-color: #fff;
}

.livelist-nav:after {
	content: " ";
	clear: both;
	display: table
}

.livelist-nav li {
	float: left;
	margin-right: 30px;
	cursor: pointer
}

.livelist-nav li.on {
	color: #147ccc
}

.livelist-nav li.on a {
	color: #0f69a7;
}


/** */

.list {
	margin-top: 25px;
	zoom: 1
}

.list:after {
	content: " ";
	clear: both;
	display: table
}

.list .listleft {
	width: 100%;
	float: left;
	box-sizing: border-box
}

.list .listleft .listtitle {
	background-color: #fff;
	padding: 0 15px;
	line-height: 50px;
	padding-top: 10px;
	border-bottom: 1px solid #eee;
	zoom: 1
}

.list .listleft .listtitle .titleleft {
	float: left
}

.list .listleft .listtitle .titleleft a {
	margin: 0 7px;
	display: inline-block;
	width: 50px;
	height: 25px;
	line-height: 25px;
	border: 1px solid #ddd;
	color: #333;
	text-align: center
}

.list .listleft .listtitle .titleleft a>i {
	vertical-align: 10%
}

.list .listleft .listtitle .titleleft a.selected {
	border-color: #147ccc;
	color: #fff;
	background-color: #0f69a7;
}

.list .listleft .listtitle .titleright {
	float: right;
}

.list .listleft .listtitle .titleright label {
	color: #666;
	margin-right: 10px;
	cursor: pointer;
}

.list .listleft .listtitle .titleright label i {
	margin-right: 5px;
	color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}

.list .listleft .listtitle .titleright label.g.on i {
	color: #419f45;
	border-color: #fff;
}

.list .listleft .listtitle .titleright label.r.on i {
	color: #0f69a7;
	border-color: #fff;
}

.list .listleft .listtitle .titleright span {
	color: #999;
	font-size: 12px;
}

.list .listleft .listtitle .titleright>a {
	display: inline-block;
	width: 22px;
	height: 22px;
	border: 1px solid #ddd;
	line-height: 20px;
	text-align: center;
	color: #999
}

.list .listleft .listtitle .titleright>a:hover i {
	color: #dc585a
}

.list .listleft .listtitle:after {
	content: " ";
	clear: both;
	display: table
}

.list .bottomright {
	width: 25%;
	float: right;
	background: #FBFBFB
}

.list .bottomright .aboutcourse>h3 {
	font-size: 16px;
	line-height: 16px;
	text-indent: 15px;
	border-left: 2px solid #db5557;
	margin: 30px 16px 10px 16px
}

.list .bottomright .aboutcourse ul {
	overflow: hidden
}

.list .bottomright .aboutcourse ul li {
	zoom: 1;
	padding: 0 20px;
	margin: 15px 0
}

.list .bottomright .aboutcourse ul li:after {
	content: " ";
	clear: both;
	display: table
}

.list .bottomright .aboutcourse ul li .img {
	float: left;
	margin-right: 12px
}

.list .bottomright .aboutcourse ul li .img img {
	width: 90px;
	height: 60px
}

.list .bottomright .aboutcourse ul li h3 {
	font-size: 14px;
	color: #666;
	height: 42px;
	overflow: hidden;
	display: -webkit-box;
	word-break: break-all;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical
}

.list .bottomright .aboutcourse ul li p {
	color: #f26a2f;
	height: 20px;
	overflow: hidden;
	display: -webkit-box;
	word-break: break-all;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical
}

.list .bottomright .onlinepeople {
	zoom: 1;
	margin-top: 10px
}

.list .bottomright .onlinepeople:after {
	content: " ";
	clear: both;
	display: table
}

.list .bottomright .onlinepeople>h3 {
	font-size: 16px;
	line-height: 50px;
	padding: 0 16px
}

.list .bottomright .onlinepeople ul {
	margin: 10px 0
}

.list .bottomright .onlinepeople ul li {
	margin: 10px 0;
	width: 25%;
	float: left;
	text-align: center;
	cursor: pointer
}

.list .bottomright .onlinepeople ul li img {
	width: 46px;
	height: 46px
}
.icon-left:before {
    content: "\f021"!important;
}

.icon-right:before {
    content: "\f022"!important;
}

/** */

.livelist>ul {
	zoom: 1;
	box-sizing: border-box
}

.livelist>ul:after {
	content: " ";
	clear: both;
	display: table
}

.livelist>ul>li {
	background-color: #fff;
	width: 100%;
	box-sizing: border-box;
	padding: 20px 2%;
	position: relative
}

.livelist>ul>li .mid .til {
	font-size: 16px;
	color: #333;
	height: 1.5em;
	overflow: hidden;
	display: -webkit-box;
	word-break: break-all;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical
}

.livelist>ul>li .mid .tim {
	color: #666;
	margin-top: 5px
}

.livelist>ul>li .mid .oth>img {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	margin-right: 10px;
	vertical-align: middle
}

.livelist>ul>li .mid .oth>b {
	font-size: 14px;
	color: #666;
	font-weight: 400;
	vertical-align: middle
}

.livelist>ul>li .mid .oth>span.p {
	color: #d55
}

.livelist>ul>li .mid .oth>span.p del {
	color: #999;
	margin-left: 10px;
	font-size: 14px
}

.livelist>ul>li .mid .oth>span.f {
	display: inline-block;
	color: #419f45;
	background-color: #eee;
	border: 1px solid #ddd;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	padding: 2px 5px
}

.livelist>ul>li .mid .tag {
	display: inline-block;
	background: url(../../images/livelist/bg_tag.png) left center no-repeat;
	width: 65px;
	height: 24px;
	line-height: 24px;
	vertical-align: middle;
	box-sizing: border-box;
	color: #fff;
	margin-left: 8px;
	padding-left: 5px;
	text-align: center;
	font-size: 14px
}

.livelist>ul>li .rig {
	position: absolute
}

.livelist>ul.block {
	margin: 0 -1.25% -30px
}

.livelist>ul.block>li {
	float: left;
	width: 30.83%;
	margin: 0 1.25% 30px;
	overflow: hidden
}

.livelist>ul.block>li .img {
	width: 100%;
	height: 220px;
	margin-bottom: 5px
}

.livelist>ul.block>li .img img {
	width: 100%;
	height: 220px;
	display: block
}

.livelist>ul.block>li .mid .til .tag {
	display: none
}

.livelist>ul.block>li .mid .tim {
	height: 24px;
	line-height: 24px
}

.livelist>ul.block>li .mid .tim.l {
	display: none
}

.livelist>ul.block>li .mid .oth {
	margin-top: 10px
}

.livelist>ul.block>li .mid .oth>span {
	float: right
}

.livelist>ul.block>li .mid .oth>span.p {
	margin-top: 5px;
	font-size: 18px
}

.livelist>ul.block>li .mid .oth>span.f {
	font-size: 16px
}

.livelist>ul.block>li .mid .oth>span.f i {
	margin-right: 5px
}

.livelist>ul.block>li .mid .oth>span del {
	display: none
}

.livelist>ul.block>li .rig {
	width: 100%;
	height: 100%;
	top: 100%;
	left: 0;
	background-color: rgba(255, 255, 255, .8);
	-ms-transition: top .618s;
	-webkit-transition: top .618s;
	-moz-transition: top .618s;
	transition: top .618s
}

.livelist>ul.block>li .rig .b {
	height: 310px;
	padding: 40px 50px;
	box-sizing: border-box;
	font-size: 16px
}

.livelist>ul.block>li .rig .b>a {
	font-size: 14px;
	display: block;
	margin-top: 15px;
	color: #2679bd
}

.livelist>ul.block>li .rig .b>a:hover {
	color: #00478b
}

.livelist>ul.block>li .rig>a {
	display: block;
	text-align: center;
	height: 50px;
	font-size: 18px;
	padding: 12px 0;
	box-sizing: border-box
}

.livelist>ul.block>li .rig .l, .livelist>ul.block>li .rig .yuy {
	display: none
}

.livelist>ul.block>li:hover .rig {
	top: 0
}

.livelist>ul.line {
	background-color: #fff
}

.livelist>ul.line>li {
	zoom: 1;
	padding: 25px
}

.livelist>ul.line>li:after {
	content: " ";
	clear: both;
	display: table
}

.livelist>ul.line>li .img {
	float: left;
	width: 180px;
	height: 120px;
	margin-bottom: 5px;
	text-align: center
}

.livelist>ul.line>li .img img {
	max-width: 100%;
	max-height: 100%;
	display: inline-block
}

.livelist>ul.line>li .mid {
	zoom: 1;
	margin-left: 200px;
	margin-right: 150px
}

.livelist>ul.line>li .mid:after {
	content: " ";
	clear: both;
	display: table
}

.livelist>ul.line>li .mid .til {
	font-size: 18px;
	padding-right: 65px;
	position: relative;
	float: left
}

.livelist>ul.line>li .mid .til .tag {
	position: absolute;
	top: 0;
	right: 0
}

.livelist>ul.line>li .mid .tim {
	float: left;
	width: 100%;
	color: #999;
	line-height: 1.6em;
	height: 3.2em;
	overflow: hidden;
	display: -webkit-box;
	word-break: break-all;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical
}

.livelist>ul.line>li .mid .tim.b {
	display: none
}

.livelist>ul.line>li .mid .oth {
	float: left;
	margin-top: 13px
}

.livelist>ul.line>li .mid .oth>b {
	margin-right: 30px
}

.livelist>ul.line>li .mid .oth>b.zhib {
	color: #999
}

.livelist>ul.line>li .mid .oth>span {
	vertical-align: middle
}

.livelist>ul.line>li .mid .oth>span.p {
	font-size: 24px;
	line-height: 1.2
}

.livelist>ul.line>li .mid .oth>span.f {
	font-size: 14px
}

.livelist>ul.line>li .mid .oth>span.f i {
	margin-right: 3px
}

.livelist>ul.line>li .mid .oth>span.zhib {
	color: #999
}

.livelist>ul.line>li .mid .oth>span.zhib>img {
	vertical-align: middle;
	margin-right: 5px
}

.livelist>ul.line>li .rig {
	width: 120px;
	right: 25px;
	top: 25px;
	text-align: center
}

.livelist>ul.line>li .rig .b {
	display: none
}

.livelist>ul.line>li .rig .l span {
	color: #d55;
	font-size: 16px
}

.livelist>ul.line>li .rig .l span>i {
	margin-right: 5px;
	font-size: 12px
}

.livelist>ul.line>li .rig .yuy {
	margin-top: 5px;
	color: #999
}

.livelist>ul.line>li .rig .yuy>span {
	color: #d55
}

.livelist>ul.line>li .rig>a {
	margin-top: 38px;
	width: 4em
}

.livelist>ul.line>li .rig p+a {
	margin-top: 10px
}

.livelist>ul.line>li:hover {
	background-color: #f4f5f9
}

.btnO {
    display: inline-block;
    border: none;
    padding: 10px 28px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    color: #FFF;
    background-color: #f5a623;
}


.coursenull {
  text-align: center;
  padding: 75px 0 100px 0;
  border: 1px solid #eee;
  margin-bottom: 15px;
  background-color: #F9FAFB;
}
.coursenull p {
  margin: 20px 0 5px 0;
}
.coursenull a {
  font-size: 14px;
  color: #3f7cb2;
}
.coursenull a span {
  color: #a6a7a9;
  margin-left: 5px;
  font-size: 18px;
  vertical-align: 17%;
}