.xiangqingk{ background: #343434;  width: 100%;}
.xiangqings{ width: 1260px;margin: 0 auto; padding: 20px 0;}
.xiangqings .xiaodaoru{ padding-left: 30px; color: #929292;}
.xiangqings .xiaodaoru span{ color: #fff; padding-bottom: 5px}
.xiangqings .zhutineik{ background: #000;padding: 30px 0 0 30px; overflow: hidden;}
.xiangqings .zhuleft{ width: 870px;float: left;}
.xiangqings .zhuleft .zhutitop{background: #4a4a4a;padding: 20px 10px; display: flex;}
.xiangqings .zhuleft .zhutitop .touxiangy{ border-radius: 50%; width: 70px; height: 70px; overflow: hidden;}
.xiangqings .zhuleft .zhutitop .touxiangy img{width: 70px;}
.xiangqings .zhuleft .zhutitop .biaotijiangshi{ color: #fff; padding-left: 10px; padding-top: 5px;}
.xiangqings .zhuleft .zhutitop .biaotijiangshi .shang {font-size: 25px;}
.xiangqings .zhuleft .zhutitop .biaotijiangshi .shang span{background: #fdd000; color: #000;border-radius: 5px; padding: 3px 15px;font-size: 13px;float: left; margin: 7px 10px 0 0;}
.xiangqings .zhuleft .zhutitop .biaotijiangshi .xiamian{font-size: 13px;padding: 5px 0;}
.xiangqings .zhuleft .zhutitop .biaotijiangshi .xiamian span{ color: #fdd000; margin: 0 5px;}
.xiangqings .fenxiangha{ margin-left: auto; padding-top: 15px;}
.xiangqings .fenxiangha span{float: left; color: #fff;font-size: 14px; margin-right: 10px;}
.xiangqings .fenxiangha i{ color: #bbbbbb;font-size: 20px; margin: 0 5px; cursor: pointer;}
.xiangqings .fenxiangha i:hover{color: #fdd000;}
.xiangqings .fenxiangha p{ color: #fff; padding-top:5px ;}
.xiangqings .fenxiangha p span{color: #fdd000;font-size: 13px; margin-right: 0px;}

.xiangqings .zhuleft .datupian img{ width: 870px; height: 500px;}
.xiangqings .zhuleft .biaoqian{ color: #4a4a4a; padding: 10px 0; position: relative;}

.xiangqings .zhuright{ width: 350px;float: right; text-align: left; }
.xiangqings .zhuright .diyitop{ padding: 0 30px 0 0;color: #fff;}
.xiangqings .zhuright .diyitop .btiti{font-size: 15px;}
.xiangqings .zhuright .diyitop .btiti span{color: #fdd000;}
.xiangqings .zhuright .diyitop .shijiankuang{border: 1px solid  #363636;border-radius: 3px; padding: 5px 0; margin-top: 10px; line-height: 30px; overflow: hidden;}
.xiangqings .zhuright .diyitop .shijiankuang span{font-size: 18px; margin: 0 5px;}
.xiangqings .zhuright .diyitop .baomingkuang{ margin-top: 15px;}
.xiangqings .zhuright .diyitop .baomingkuang a{ background: #ccc; text-align: center;color: #000;font-weight: bold;border-radius: 5px; display: block; padding: 10px 0;font-size: 18px;}
.xiangqings .zhuright .diyitop .guankantx{ color: #817f7f;font-size: 13px; padding: 10px 0 30px; border-bottom: 1px solid #434343}
.xiangqings .zhuright .xiangtuantj{ padding: 30px 0 0 30px;color: #fff;font-size: 14px; text-align: left;}
.xiangqings .zhuright .xiangtuannr{ height: 360px; overflow-y: auto;  margin-top: 10px;}
.xiangqings .zhuright .xiangtuannr .kechengli{ padding: 10px 30px; margin-top: 0px; cursor: pointer; overflow: hidden; clear: both;}
.xiangqings .zhuright .xiangtuannr .kechengli .kechengliimg{float: left; margin-right: 10px; width: 110px;}
.xiangqings .zhuright .xiangtuannr .kechengli .kechengliimg img{ width: 110px; height: 78px;}
.xiangqings .zhuright .xiangtuannr .kechengli .listnr{float: right; width: 160px;}
.xiangqings .zhuright .xiangtuannr .kechengli .listnr .baott{ padding-top: 10px; color: #fff;font-size: 13px;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;}
.xiangqings .zhuright .xiangtuannr .kechengli .listnr .kaibosj{ color: #898989;font-size: 12px; text-align: left; padding-top: 10px;}

.xiangqings .zhuright .xiangtuannr .kechengli:hover{ background: #4a4a4a;}


.xiangqings .zhuright .xiangtuannr::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
.xiangqings .zhuright .xiangtuannr::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
.xiangqings .zhuright .xiangtuannr::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);}
            
        
.part{ padding: 0px;}            
            
.kechegnmululi{font-size: 15px; color: #000; border-left: 2px solid #fdd000; padding-left: 5px;}           
.kechegnmululiul{ margin: 0px; padding: 0;border-top: 1px solid #cccccc; margin-top: 20px;}  
.kechegnmululiul li{ padding: 15px 10px; border-bottom: 1px solid #cccccc; color: #000;font-size: 14px; cursor: pointer;color:#878787;}     
.kechegnmululiul li i{font-size: 15px; color: #8c8c8c;}   
.kechegnmululiul li span{font-size:15px; color: #8c8c8c;float:right}
.kechegnmululiul li span.xuexi:before{ content: "免费试学";}
.kechegnmululiul li span.shoufei:before{ content: "开始学习";}
.kechegnmululiul li:hover,.kechegnmululiul li.huise{ background: #eaeaea;color:#000;}
.kechegnmululiul li:hover i,.kechegnmululiul li i.shixue{ color: #fdd000;}
.kechegnmululiul li.s{ color: #000;}
.kechegnmululiul li.s i{font-size: 15px; color: #fdd000;}  
.kechegnmululiul li.huise span.xuexi{background: #fdd000; color: #000;padding:5px;border-radius: 3px; margin-top: -5px;}
.kechegnmululiul li:hover span.shoufei{background: #ff0000; color: #fff;padding:5px;border-radius: 3px; margin-top: -5px;}
.kechegnmululiul li.huise span.xuexi:before{ content: "免费试学";}
.kechegnmululiul li:hover span.shoufei:before{ content: "开始学习";}


.sucaixiazai{background: #f2f2f2; font-size: 20px; padding: 30px}
.sucaixiazai i{ margin-left: 10px;}
.sucaixiazai span{float: right;}
.sucaixiazai a{ padding: 5px 30px; background: #fdd000; text-align: center; color: #000;border-radius: 5px;}

.zaixiangbiaoti{font-size: 20px;color: #fff;line-height: 1.5; text-align: left;}
.xiaotishi{ color: #666666;font-size: 12px;border-bottom: 1px  solid #666; padding: 20px 0 10px;text-align: left;}
.zaixianjiaojiage{ color: #fdd000;font-size: 25px; text-align: left; padding-top: 20PX;}
.zaixianjiaojiage i{font-size: 13px;}
.vipzhuanxixnag{font-size: 13px;color: #fdd000; padding-top: 5px; padding-bottom: 20px;border-bottom: 1px  solid #666;overflow:  hidden;}
.vipzhuanxixnag .biaoqian2{ padding: 2px 5px; background: #e6002d; color: #fff; float: left;border-radius: 3px;}
.vipzhuanxixnag .jiage2{color: #fdd000; padding-left: 5px;float: left;}
.vipzhuanxixnag .kaitong2{color: #e6002d; padding-left: 10px;float: left;}
.vipzhuanxixnag .kaitong2 a{color: #e6002d;}
.weixintishi{ clear: both; color: #666666; text-align: left; padding-top: 10px;}
.fenxianghas{font-size: 12px; color: #666; text-align: left; padding-top: 180px;}
.fenxianghas span{float: left; margin-right: 10px;}
.fenxianghas i{font-size: 20px; margin: 0 5px; cursor: pointer;}
.fenxianghas i:hover{color: #fdd000;}
.dxanniuha{ padding-top: 15px;}
.dxanniuha a{ padding: 10px 20px; background: #fdd000; font-weight: bold;color: #000; margin-right: 15px; text-align: center;font-size: 15px;border-radius: 5px;}
.dxanniuha a.shixue{ background: #e3e3e3; color: #e6002d;}


.piaofubiaoz{ position: absolute; background: rgba(0,0,0,.5); bottom: 0; width: 100%}
.xiangqings .zhuleft .datupian{ position: relative;}
.xiangqings .zhuleft .datupian .touxiangys{float: right; width: 30px; height:30px; overflow: hidden;border-radius: 50%; margin-top: 3px;}
.xiangqings .zhuleft .datupian .xibaoss{float: left; padding-left: 10px;}
.xiangqings .zhuleft .datupian .touxiangys img{width: 30px; height: auto;}
.xiangqings .zhuleft .datupian .xiamianjs{float: right; color: #fff; padding-top: 10px; padding-left: 10px; padding-right: 10px;}
.xiangqings .zhuleft .datupian .xiamianjs span{ margin: 0 5px;}
.xiangqings .zhuleft .datupian .xiamianjs i{color: #fdd000;}

.detail-bottom .details {
	width: 900px;float: left;
}
.kechengtuijianr{ width: 300px;float: right;}



.halouhaha {color: #fff;font-size: 14px; text-align: left; margin-top: -50px;}
.halouhaha .xiangtuantj{ color:#000; padding-left: 30px;}
.halouhaha .xiangtuannr{ margin-top: 10px;}
.halouhaha .xiangtuannr .kechengli{ padding: 10px 30px; margin-top: 0px; cursor: pointer; overflow: hidden; clear: both;}
.halouhaha .xiangtuannr .kechengli .kechengliimg{float: left; margin-right: 10px; width: 100px;}
.halouhaha .xiangtuannr .kechengli .kechengliimg img{ width: 100px; height: 70px;}
.halouhaha .xiangtuannr .kechengli .listnr{float: right; width: 130px;}
.halouhaha .xiangtuannr .kechengli .listnr .baott{ padding-top: 5px; color: #000;font-size: 13px;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;}
.halouhaha .xiangtuannr .kechengli .listnr .kaibosj{ color: #898989;font-size: 12px; text-align: left; padding-top: 5px;}
.halouhaha .xiangtuannr .kechengli .listnr .kaibosj .xxbiaoqian a{ background: #dadada; padding: 3px 5px; color: #2b2b2b; margin-right: 5px;font-size: 10px;}
.halouhaha .xiangtuannr .kechengli .listnr .kaibosj .jiagehaha{ color: #e6002d;font-size: 15px; padding-top: 7px;}


.halouhaha .xiangtuannr .kechengli:hover{ background: #e0e0e0;}

 .sec-kill {
    margin-top: 20px;
   
    background: linear-gradient(90deg,rgba(255,88,61,1),rgba(255,64,62,1));
    color: #fff;
    display: block;
    border-radius: 5px;
    padding: 10px 0;
}
 .status-box {
    text-align: center; padding: 0 30px; line-height: 1;
}      

.status-box .p0 {
    text-align: left;
    font-size: 14px;
    color: #ccc;
    margin-bottom: 15px;
}
.status-box .p1 {
    font-size: 14px;
    color: #ccc;
   
    padding: 0 0px 20px;
    border-bottom: 1px solid #3f3f3f;
    text-align: left;
}
.status-box .p1 span {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 0 4px;
}
 .sec-kill .l {
    padding-right: 16px;
    height: 100%;
    display: inline-block;
    border-right: 1px #fff dashed;
    text-align: left;
    vertical-align: top;
}
.sec-kill .r {
    padding-left: 16px;
    display: inline-block;
    text-align: left;
}
 .sec-kill .l .i2 {
    display: block;
    font-weight: 700;
    font-size: 26px;
    padding-bottom: 9px;
}
.sec-kill .l .i1 {
    display: block;
    text-decoration: line-through;font-size: 15px;
}
 .sec-kill .r {
    padding-left: 16px;
    display: inline-block;
    text-align: left;
}
 .sec-kill .r .i1 {
    display: block;
    margin-top: 15px;
    font-size: 14px;
    color: #ff403e;
    width: 100px;
    height: 20px;
    line-height: 20px;
    background: #fff;
    text-align: center;
    border-radius: 10px;
}
 .sec-kill .r .i2 {font-size: 15px;
	
}
.huifangbj{ background: #04af7b; text-align: center;color: #fff;font-weight: bold;border-radius: 5px; display: block; padding: 10px 0;font-size: 18px;}
.huifangbj a{ color: #fff;}
.guankantx{ color: #817f7f;font-size: 13px; padding: 10px 0 30px; border-bottom: 1px solid #434343}
.ui-dialog.pop-wrapper.pcMigration {
	border-radius: 2px;
	width: 866px;
	height: 528px;
	border: none;
	padding-bottom: 0
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid .ui-dialog-body .ui-dialog-content {
	width: 100%;
	margin-bottom: 0
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:first-child {
	height: 0
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:nth-child(2) {
	width: 100%;
	height: 397px;
	border-radius: 2px;
	color: #fff
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:nth-child(2) .partone {
	width: 100%;
	margin-bottom: 0;
	padding-top: 42px;
	height: 154px;
	text-align: center;
	background-image: linear-gradient(162deg, #ffb373, #e74b3b)
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:nth-child(2) .parttwo {
	height: 200px
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:nth-child(2) .parttwo .course-list li {
	display: inline-block;
	margin-left: 31px;
	margin-top: 37px
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:nth-child(2) .parttwo .course-list li h3 {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.14;
	color: #333;
	margin-top: 8px
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:nth-child(2) .parttwo .course-list li p {
	font-size: 14px;
	color: #666;
	margin-top: 8px
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:nth-child(2) .parttwo .course-list li:first-child {
	margin-left: 0
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:nth-child(2) .alert-head {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	color: #fff;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.13);
	margin-bottom: 27px
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr:nth-child(2) .alert-content {
	font-size: 16px;
	padding: 0 90px;
	font-weight: 600;
	line-height: 2.0;
	text-align: center;
	color: #fff;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.14)
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr .ui-dialog-button {
	text-align: center
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr .ui-dialog-button button {
	font-size: 14px;
	font-weight: 500;
	height: 36px;
	line-height: 36px;
	color: #fff;
	display: block;
	width: 185px;
	margin: 0 auto
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr .ui-dialog-button button:last-child {
	border: 1px solid #e3e4e5;
	background: #fff;
	color: #333;
	transition-duration: .3s;
	margin-top: 10px
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr .ui-dialog-button button:last-child:hover {
	color: #999;
	transition-duration: .3s
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr .ui-dialog-body {
	padding: 0
}

.ui-dialog.pop-wrapper.pcMigration .ui-dialog-grid tr .ui-dialog-footer {
	padding: 0
}

body {
	min-width: 1280px
}

span,
em,
i {
	display: inline-block;
	font-style: normal;
	position: relative;
	text-align: center
}

span.icon-message,
em.icon-message,
i.icon-message {
	position: initial
}

svg {
	display: inline-block;
	vertical-align: middle
}

.line-hide-1 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical
}

.line-hide-2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical
}

[class*=-center] {
	position: relative
}

.detail-1110 {
	width: 1110px;
	margin: 0 auto
}

.detail-center {
	display: none
}

.detail-center.show {
	display: block
}

.detail-center-880 {
	width: 880px
}

.height-auto {
	height: auto !important
}

.height-80 {
	height: 80px !important
}

.rotate-180,
.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .down-arrow,
.detail-bottom .detail .course-list-li h5 .arrow {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg)
}

.rotate-0,
.detail-bottom .detail .course-list-li h5.shrunk .arrow {
	transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-o-transform: rotate(0deg)
}

.dn {
	display: none
}

.db {
	display: block !important
}

.fixed {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	
}

.transition {
	transition: .3s ease;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-ms-transition: .3s ease;
	-o-transition: .3s ease
}

.line-hide-1 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical
}

main {
	display: block;
	min-width: 1200px; background: #efefef;
}

.bg-red {
	background: #e74b3b !important;
	color: #fff
}

.bg-red:hover {
	background: #cf4334 !important
}

.bg-grey {
	background-color: #999 !important;
	color: #fff;
	cursor: default !important
}

.bg-transparent {
	color: #333 !important;
	border: solid 0.5px #999999
}

.bg-transparent:hover {
	background: #f0f0f0
}

.bg-transparent-opcity:hover {
	background: rgba(240, 240, 240, 0.5)
}

.header-con {
	width: 1140px
}

.detail-header {
	width: 100%;
	background: #fff
}

.detail-header .crumbs-wrapper {
	width: 1180px;
	padding-top: 2px
}

.detail-header .lecture-head {
	width: 1200px;
	position: relative;
	margin: 0 auto
}

.detail-header .lecture-head.audiohead {
	margin-top: 30px;
	padding-bottom: 15px
}

.detail-header .lecture-head .banner {
	float: left
}

.detail-header .lecture-head .banner.video-banner {
	position: relative;
	color: #fff;
	width: 850px;
	margin-bottom: 20px;
	overflow: hidden
}

.detail-header .lecture-head .banner.video-banner .content-wrapper {
	width: 100%;
	height: 478px;
	position: relative;
	cursor: pointer
}

.detail-header .lecture-head .banner.video-banner .content-wrapper.cursor-default {
	cursor: default
}

.detail-header .lecture-head .banner.video-banner .content-wrapper .video-pre-btn {
	position: absolute;
	width: 80px;
	height: 80px;
	left: 50%;
	top: 50%;
	right: auto;
	bottom: auto;
	z-index: 1;
	margin-top: -20px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.detail-header .lecture-head .banner.video-banner .content-wrapper .banner-title {
	width: 227.2px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
	color: #fff;
	position: absolute;
	bottom: 20px;
	left: 20px;
	cursor: pointer
}

.detail-header .lecture-head .banner.video-banner .content-wrapper .J_banner_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.detail-header .lecture-head .banner.video-banner .content-wrapper .video-wrapper {
	visibility: hidden
}

.detail-header .lecture-head .banner.video-banner .content-wrapper .video-inline {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.detail-header .lecture-head .banner.video-banner .content-wrapper .video-inline.hide {
	visibility: hidden;
	opacity: 0
}

.detail-header .lecture-head .banner.video-banner .preview {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 104px;
	width: 100%;
	font-size: 0;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 12px 22px;
	opacity: 1;
	transition: .5s ease-out;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box
}

.detail-header .lecture-head .banner.video-banner .preview.hide {
	-webkit-transform: translateY(104px);
	-moz-transform: translateY(104px);
	-ms-transform: translateY(104px);
	transform: translateY(104px);
	opacity: 0
}

.detail-header .lecture-head .banner.video-banner .preview .per-img {
	width: 136px;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
	margin-right: 16px;
	position: relative;
	transition-duration: .3s;
	border: 1px solid rgba(240, 240, 240, 0.3)
}

.detail-header .lecture-head .banner.video-banner .preview .per-img:last-child {
	margin-right: 0
}

.detail-header .lecture-head .banner.video-banner .preview .per-img .banner-video-btn {
	width: 12px;
	height: 15px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto
}

.detail-header .lecture-head .banner.video-banner .preview .per-img .banner-tag {
	position: absolute;
	right: 8px;
	top: 8px;
	border: 1px solid #fff;
	width: 32px;
	height: 17px;
	line-height: 17px;
	text-align: center;
	font-size: 12px;
	background-color: rgba(0, 0, 0, 0.2);
	transition-duration: .15s;
	z-index: 111
}

.detail-header .lecture-head .banner.video-banner .preview .per-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer
}

.detail-header .lecture-head .banner.audio-banner {
	width: 292px;
	height: 260px;
	position: relative
}

.detail-header .lecture-head .banner.audio-banner .disk {
	width: 220px;
	height: 220px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	background-color: #1f1f1f;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 1
}

.detail-header .lecture-head .banner.audio-banner .banner-bg {
	width: 260px;
	height: 100%;
	border-radius: 10px;
	background-position: center;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	border-radius: 10px;
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
	background-size: cover
}

.detail-header .lecture-head .intro {
	background: #fff;
	float: left;
	margin-left: 30px;
	width: 320px
}

.detail-header .lecture-head .intro.audioprice {
	position: relative;
	width: 866px;
	min-height: 260px;
	margin-bottom: 40px;
	margin-left: 40px
}

.detail-header .lecture-head .intro.audioprice .main-block {
	min-height: auto;
	padding-bottom: 0;
	margin-bottom: 2px
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-title {
	margin-bottom: 20px;
	margin-top: 20px
}

.detail-header .lecture-head .intro.audioprice .main-block .course-team-info {
	padding-bottom: 10px
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-purchase-wrapper .price-container {
	position: absolute;
	right: 0;
	bottom: 75px
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-price-block {
	min-height: auto !important;
	margin-top: 4px
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-price-block .lecture-price-info {
	padding-bottom: 0;
	width: auto
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-price-block .lecture-price-info .dashline {
	display: none
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-price-block .lecture-price-info .pintuan-price {
	float: left;
	margin-right: 30px
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-price-block .lecture-price-info .pintuan-price li:first-child {
	width: auto;
	min-width: 0;
	margin-right: 5px
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-price-block .lecture-price-info .pintuan-price li .price-ground {
	font-size: 18px
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-price-block .lecture-price-info .pintuan-price li .price-ground em {
	font-size: 34px;
	font-weight: 500
}

.detail-header .lecture-head .intro.audioprice .main-block .lecture-price-block .lecture-price-info .info-title {
	padding-right: 10px
}

.detail-header .lecture-head .intro.audioprice .purchase-block {
	position: absolute;
	right: 0;
	bottom: 0
}

.detail-header .lecture-head .intro.audioprice .purchase-block .action-part {
	text-align: left;
	position: relative
}

.detail-header .lecture-head .intro.audioprice .purchase-block .action-part .btn-wrap {
	float: right
}

.detail-header .lecture-head .intro.audioprice .purchase-block .action-part .btn-wrap span {
	font-size: 16px;
	width: 140px
}

.detail-header .lecture-head .intro.audioprice .purchase-block .action-part .btn-wrap span:first-child {
	float: right;
	margin: 0 0 0 20px
}

.detail-header .lecture-head .intro.audioprice .purchase-block .action-part .audioprice {
	background: #fff;
	border: 1px solid #e74b3b;
	color: #e74b3b
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-title {
	clear: none
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-title.audioinfotitle {
	line-height: 40px !important;
	color: #999;
	float: left
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content {
	line-height: 40px;
	margin-right: 15px
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity {
	width: 300px;
	padding-left: 10px;
	margin-left: -5px;
	z-index: 10
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity em {
	color: #333;
	font-weight: 300
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .down-arrow {
	position: absolute;
	bottom: -29px;
	right: 34px;
	transform: rotateZ(180deg);
	transition: transform 0.5s
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .bl {
	opacity: 0;
	height: 0;
	margin-bottom: 0
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .bl:first-child {
	opacity: 1
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .bl .activity-title {
	vertical-align: middle;
	background: #fff;
	border: 1px solid #e74b3b;
	color: #e74b3b
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .bl .activity-content {
	width: 200px !important;
	text-align: left;
	white-space: nowrap;
	width: 198px;
	text-overflow: ellipsis;
	overflow: hidden;
	vertical-align: middle
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .bl.bl-only .activity-content {
	vertical-align: middle
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .bl.bl-only .activity-title {
	vertical-align: middle
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .lined {
	opacity: 0;
	height: 0
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .lined .activity-title {
	vertical-align: middle;
	background: #fff;
	border: 1px solid #e74b3b;
	color: #e74b3b
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity .lined .activity-content {
	vertical-align: middle
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity:hover {
	background: #FFF
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity:hover .bl {
	transition: 0.5s;
	opacity: 1;
	height: auto
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity:hover .down-arrow {
	transform: rotateZ(0deg);
	transition: transform 0.5s;
	bottom: -9px
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity:hover .activity-content {
	text-overflow: initial;
	white-space: normal;
	line-height: 16px
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity:hover .lined {
	height: auto;
	opacity: 1;
	transition: 0.5s
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .audioactivity:hover .lined .activity-content {
	display: inline-block;
	color: #333;
	font-weight: 300;
	width: 198px;
	text-align: left;
	vertical-align: middle
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .price-set {
	display: inline-block
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .price-set .price-ground {
	height: auto
}

.detail-header .lecture-head .intro.audioprice .lecture-price-info .info-content .countdown {
	display: inline-block;
	margin-left: 19px;
	margin-top: 0 !important
}

.detail-header .lecture-head .intro .main-block {
	min-height: 430px
}

.detail-header .lecture-head .intro h2.lecture-title {
	font-size: 24px;
	font-weight: bold;
	line-height: 1.5
}

.detail-header .lecture-head .intro .recommend {
	height: 28px;
	line-height: 28px;
	background-color: #fff5d3;
	display: block;
	color: #e74b3b;
	margin-bottom: 15px;
	padding-left: 14px
}

.detail-header .lecture-head .intro .recommend a {
	color: #e74b3b;
	margin-left: 10px
}

.detail-header .lecture-head .intro .recommend a:hover {
	color: #d52b1a
}

.detail-header .lecture-head .intro .recommend .icon-notice {
	margin-right: 10px
}

.detail-header .lecture-head .intro .course-team-info {
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 14px;
	margin-bottom: 14px
}

.detail-header .lecture-head .intro .course-team-info.audioprice {
	border-bottom: none
}

.detail-header .lecture-head .intro .course-team-info .course-team-avatar {
	float: left;
	width: 36px;
	height: 36px;
	margin-right: 10px
}

.detail-header .lecture-head .intro .course-team-info .course-team-avatar img {
	border-radius: 50%;
	width: 100%;
	height: 100%
}

.detail-header .lecture-head .intro .course-team-info .course-team-intro {
	float: left;
	width: 273px
}

.detail-header .lecture-head .intro .course-team-info .course-team-intro .course-team-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	color: #333
}

.detail-header .lecture-head .intro .course-team-info .course-team-intro .course-team-detail {
	font-size: 12px;
	font-weight: 300;
	color: #333;
	width: 100%
}

.detail-header .lecture-head .intro .course-team-info .course-team-intro .course-team-detail em {
	float: right
}

.detail-header .lecture-head .intro .course-team-info .course-team-intro .course-team-detail em i {
	margin-right: 6px;
	vertical-align: 1px
}

.detail-header .lecture-head .intro .classrooms {
	font-size: 0;
	margin-right: -16px
}

.detail-header .lecture-head .intro .classrooms .classroom {
	position: relative;
	display: inline-block;
	border: 1px solid #999;
	font-size: 14px;
	border-radius: 2px;
	max-width: 306px;
	height: 28px;
	padding: 0 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 28px;
	color: #4a4a4a;
	text-align: center;
	margin-right: 15px;
	margin-bottom: 14px;
	cursor: pointer;
	transition-duration: .15s
}

.detail-header .lecture-head .intro .classrooms .classroom:hover {
	border-color: #e74b3b;
	color: #e74b3b;
	transition-duration: .15s
}

.detail-header .lecture-head .intro .classrooms .classroom.cur {
	border-color: #e74b3b;
	color: #e74b3b;
	font-weight: bold
}

.detail-header .lecture-head .intro .classrooms .classroom.cur em {
	border-width: 0 0 20px 20px
}

.detail-header .lecture-head .intro .classrooms .classroom em {
	position: absolute;
	border-width: 0;
	border-style: solid;
	width: 0;
	height: 0;
	transition-duration: .2s;
	border-color: transparent transparent #e74b3b transparent;
	right: 0;
	bottom: 0
}

.detail-header .lecture-head .intro .classrooms .classroom span {
	position: absolute;
	right: 0;
	bottom: 0;
	line-height: 1
}

.detail-header .lecture-head .intro .classrooms .classroom span:before {
	font-size: 12px;
	color: #fff
}

.detail-header .lecture-head .intro .lecture-content-info {
	font-weight: 300;
	color: #333
}

.detail-header .lecture-head .intro .lecture-content-info p {
	margin-bottom: 4px
}

.detail-header .lecture-head .intro .lecture-content-info p.cur-dur {
	margin-top: 8px
}

.detail-header .lecture-head .intro .lecture-content-info.audioprice p {
	display: inline-block;
	margin-right: 40px
}

.detail-header .lecture-head .intro .lecture-price-block {
	margin-top: 14px
}

.detail-header .lecture-head .intro .lecture-price-block.normalversion:hover .lecture-price-info {
	position: absolute;
	z-index: 5
}

.detail-header .lecture-head .intro .lecture-price-block.normalversion:hover .lecture-price-info .info-content.huabei {
	height: 72px;
	transition-duration: .3s
}

.detail-header .lecture-head .intro .lecture-price-block.normalversion:hover .lecture-price-info .info-content.huabei .installment-content {
	opacity: 1;
	transition-duration: .15s
}

.detail-header .lecture-head .intro .lecture-price-block.normalversion:hover .lecture-price-info .info-content.huabei+.dashline {
	margin-top: 16px
}

.detail-header .lecture-head .intro .lecture-price-block.normalversion:hover .lecture-price-info .info-content .down-arrow {
	opacity: 0
}

.detail-header .lecture-head .intro .lecture-price-block.normalversion:hover .lecture-price-info .info-content .lined em.activity-content {
	display: inline-block;
	vertical-align: middle;
	color: #333;
	font-weight: 300;
	width: 165px;
	text-overflow: ellipsis;
	white-space: normal;
	overflow: hidden;
	text-align: left
}

.detail-header .lecture-head .intro .lecture-price-block.normalversion:hover .lecture-price-info .info-content .bl.lastone {
	margin-bottom: 0
}

.detail-header .lecture-head .intro .lecture-price-block.normalversion:hover .lecture-price-info .info-content .bl.bl-only .activity-title {
	vertical-align: top
}

.detail-header .lecture-head .intro .lecture-price-block.normalversion:hover .lecture-price-info .info-content .bl.bl-only em.activity-content {
	display: inline-block;
	vertical-align: middle;
	color: #333;
	font-weight: 300;
	width: 165px;
	text-overflow: ellipsis;
	white-space: normal;
	overflow: hidden;
	text-align: left
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info {
	background: #f7f7f7;
	padding: 14px;
	width: 292px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .service-block {
	margin-top: 12px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .service-block .activity-content {
	display: block !important;
	width: 250px !important;
	white-space: normal !important
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info.audioprice {
	background: #fff;
	padding-left: 0;
	padding-top: 0
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info.audioprice .service-block {
	margin-top: 5px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .pintuan-price li {
	display: inline-block
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .pintuan-price li .info-title {
	padding-right: 4px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .pintuan-price li .price-ground {
	margin-right: 0
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .pintuan-price li .price-ground em {
	font-size: 32px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .pintuan-price li:first-child {
	min-width: 125px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .pintuan-price li:last-child {
	position: relative;
	margin-left: 20px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .pintuan-price li:last-child .info-title {
	color: #666
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .pintuan-price li:last-child:after {
	content: "";
	position: absolute;
	width: 120%;
	height: 94%;
	background-color: rgba(231, 75, 59, 0.1);
	left: 50%;
	top: -7px;
	border-radius: 4px;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0)
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .pintuan-price.pirce-short li .price-ground em {
	font-size: 26px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .dashline {
	border-top: 1px dashed #e4e4e4;
	width: 100%;
	float: left;
	margin-bottom: 14px;
	margin-top: 10px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-title {
	float: left;
	clear: left;
	font-size: 12px;
	font-weight: 500;
	color: #999;
	padding-right: 14px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content {
	float: left;
	position: relative
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content.huabei .installment-content {
	opacity: 0
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .price-ground {
	height: 34px;
	text-align: right;
	color: #e74b3b;
	font-size: 12px;
	vertical-align: bottom
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .price-ground em {
	font-size: 34px;
	line-height: 34px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .price-ground em.free {
	font-size: 28px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content i {
	font-size: 12px;
	font-weight: 300;
	height: 16px;
	line-height: 16px;
	color: #999;
	text-align: right
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .J_op {
	margin-left: 8px;
	text-decoration: line-through
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .countdown {
	font-size: 12px;
	font-weight: 300;
	margin-top: 10px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .countdown .mins,
.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .countdown .sec {
	color: #e74b3b
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .countdown .countdown-over {
	display: none
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .activity-title {
	display: inline-block;
	vertical-align: top;
	max-width: 58px;
	height: 22px;
	opacity: 0.55;
	border-radius: 2px;
	border: solid 1px #e74b3b;
	background: #f7f7f7;
	color: #e74b3b;
	overflow: hidden;
	cursor: default
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .bl {
	margin-bottom: 10px
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .bl.lastone {
	margin-bottom: 0
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .bl.bl-only .activity-title {
	vertical-align: middle
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .bl.bl-only .activity-content {
	display: inline-block;
	vertical-align: -5px;
	color: #333;
	font-weight: 300;
	width: 165px;
	white-space: nowrap;
	text-align: left
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .bl .activity-content {
	display: inline-block;
	vertical-align: middle;
	color: #333;
	font-weight: 300;
	width: 198px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-align: left
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .lined .activity-content {
	display: none
}

.detail-header .lecture-head .intro .lecture-price-block .lecture-price-info .info-content .down-arrow {
	position: absolute;
	right: -13px;
	bottom: 6px;
	color: #666;
	font-size: 14px;
	transition-duration: .3s
}

.detail-header .lecture-head .intro .purchase-block {
	margin: 0 auto 20px
}

.detail-header .lecture-head .intro .purchase-block .action-part {
	text-align: center
}

.detail-header .lecture-head .intro .purchase-block .action-part a,
.detail-header .lecture-head .intro .purchase-block .action-part span {
	display: inline-block
}

.detail-header .lecture-head .intro .purchase-block .action-part .action-btn {
	width: 320px;
	height: 48px;
	border-radius: 100px;
	text-align: center;
	line-height: 48px;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer
}

.detail-header .lecture-head .intro .purchase-block .action-part .action-btn.audioprice {
	float: right;
	width: 136px;
	height: 46px;
	border-radius: 2px;
	line-height: 46px;
	font-size: 16px;
	color: #fff
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap {
	font-size: 0;
	position: relative
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap .extra-info {
	color: #999;
	position: absolute;
	top: -35px;
	left: 0;
	height: 20px;
	line-height: 20px;
	font-size: 12px
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap .extra-info.red {
	color: #e74b3b
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap .extra-info.red:hover {
	text-decoration: underline
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap span {
	display: inline-block;
	width: 150px;
	height: 48px;
	font-size: 20px;
	border-radius: 0;
	border: 1px solid #e74b3b;
	line-height: 48px;
	font-weight: bold;
	box-sizing: border-box;
	border-radius: 2px;
	cursor: pointer;
	transition: .15s ease-in-out
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap span:first-child {
	background-color: #fff !important;
	color: #e74b3b;
	margin-right: 20px
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap span:first-child:hover {
	color: #cf4334 !important;
	border-color: #cf4334
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap span:last-child {
	margin-right: 0
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap span:nth-child(2) {
	background-color: #e74b3b !important;
	color: #fff;
	margin-right: 0
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap span:nth-child(2):hover {
	background-color: #cf4334 !important
}

.detail-header .lecture-head .intro .purchase-block .action-part .btn-wrap span:nth-child(2).disabled {
	background-color: #999 !important;
	border: none;
	cursor: default
}

.detail-header .lecture-head .intro .intro-right-box-begin {
	line-height: 64px
}

.detail-header-v2 {
	position: relative;
	height: 350px;
	background-repeat: no-repeat;
	background-size: cover
}

.detail-header-v2 .mask {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.1)
}

.detail-header-v2 .detail-header-content {
	position: relative;
	width: 1200px;
	height: 100%;
	margin: 0 auto
}

.detail-header-v2 .detail-header-content .crumbs-wrapper .crumbs-list li a {
	color: #fff
}

.detail-header-v2 .detail-header-content .detail-info {
	position: absolute;
	left: 0;
	top: 50%;
	width: 850px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}

.detail-header-v2 .detail-header-content .lecture-title {
	font-size: 28px;
	color: #fff;
	font-weight: 500;
	max-height: 80px
}

.detail-header-v2 .detail-header-content .course-team-name {
	font-size: 20px;
	text-align: justify;
	color: #fff;
	font-weight: 300;
	margin-top: 10px
}

.detail-header-v2 .detail-header-content .course-team-detail {
	margin-top: 24px
}

.detail-header-v2 .detail-header-content .course-team-detail span {
	position: relative;
	font-size: 12px;
	color: #fff;
	font-weight: 300;
	line-height: 20px;
	vertical-align: middle;
	padding-left: 21px
}

.detail-header-v2 .detail-header-content .course-team-detail span.tags {
	font-size: 14px;
	margin-right: 30px;
	padding-left: 0
}

.detail-header-v2 .detail-header-content .course-team-detail span.tags .line {
	padding: 0 6px
}

.detail-header-v2 .detail-header-content .course-team-detail span.duration {
	margin-right: 10px
}

.detail-header-v2 .detail-header-content .course-team-detail span .svg-wrap:first-child {
	position: absolute;
	top: 50%;
	left: 0;
	width: 18px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}

.detail-header-v2 .detail-header-content .course-team-detail span .svg-wrap svg {
	display: block;
	width: 100%
}

.detail-header-v2 .detail-header-content .play-btn {
	width: 98px;
	height: 30px;
	border-radius: 16px;
	border: solid 1px #fff;
	font-size: 12px;
	line-height: 32px;
	text-align: justify;
	color: #fff;
	font-weight: 300;
	text-align: center;
	margin-top: 24px;
	cursor: pointer
}

.detail-header-v2 .detail-header-content .play-btn i:first-child {
	position: relative;
	margin-right: 6px;
	top: -1px
}

.detail-header-v2 .detail-header-content .progress-wrap {
	position: absolute;
	top: 50%;
	right: 0;
	width: 280px;
	border-radius: 4px;
	background-color: #fff;
	padding: 30px 20px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-status {
	font-size: 0
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-status span {
	display: inline-block;
	vertical-align: middle
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-status span.progress-percent {
	display: inline-block;
	vertical-align: middle;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
	color: #333
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-status span.progress-learned {
	font-size: 14px;
	letter-spacing: 1.5px;
	line-height: 1.29;
	color: #999;
	margin-left: 12px
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-bar {
	position: relative;
	height: 8px;
	border-radius: 24px;
	background-color: #f7f7f7;
	margin-top: 14px
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-bar i {
	height: 100%;
	position: absolute;
	border-radius: 24px;
	background-color: #007dff
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-last {
	font-size: 12px;
	color: #333;
	margin-top: 16px
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-btn {
	display: block;
	height: 48px;
	border-radius: 24px;
	font-size: 20px;
	color: #fff;
	letter-spacing: 1.5px;
	line-height: 48px;
	text-align: center;
	cursor: pointer;
	margin-top: 30px
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-btn.start-btn {
	background-color: #e74b3b;
	transition: .15s ease-in-out
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-btn.start-btn:hover {
	background-color: #cf4334
}

.detail-header-v2 .detail-header-content .progress-wrap .progress-btn.over-btn {
	background-color: #999;
	cursor: default
}

.nav-placeholder {
	height: 62px
}

.nav-placeholder .nav {
	color: #333333;
	font-size: 18px;
	text-align: center;
	line-height: 62px;
	height: 62px;
	
	width: 100%;
	background: none;
}

.nav-placeholder .nav .nav-center {
	width: 1200px;
	margin: auto; background: #fff;
}

.nav-placeholder .nav .nav-center .nav-left {
	width: 900px
}

.nav-placeholder .nav .nav-center .nav-left span {
	margin: 0 40px;
	position: relative;
	height: 100%;
	cursor: pointer;
	border-radius: 2px;
	font-weight: 300
}

.nav-placeholder .nav .nav-center .nav-left span .test-mark {
	width: 34px;
	height: 16px;
	line-height: 16px;
	position: absolute;
	right: -43px;
	top: 22px;
	background: #999;
	font-weight: bold
}

.nav-placeholder .nav .nav-center .nav-left .select {
	font-weight: bold;
	position: relative
}

.nav-placeholder .nav .nav-center .nav-left .select::after {
	content: "";
	display: inline-block;
	width: 72px;
	height: 4px;
	background-color: #fdd000;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -36px
}

.nav-placeholder .nav .nav-center .nav-btn-warp {
	position: absolute;
	top: -3px;
	right: 0px
}

.nav-placeholder .nav .nav-center .nav-btn-warp .nav-btn {
	color: #fff;
	line-height: 32px;
	height: 32px;
	padding: 0 21px;
	font-size: 12px;
	cursor: pointer;
	border-radius: 2px
}

.detail-bottom {
	width: 1200px;
	margin: 0 auto; background: #fff;
}

.detail-bottom .detail {
	padding-top: 20px;
	padding-bottom: 50px
}

.detail-bottom .detail .course-list-li {
	position: relative;
	overflow: hidden
}

.detail-bottom .detail .course-list-li h5.shrunk .arrow {
	transition-duration: .3s
}

.detail-bottom .detail .course-list-li h5 {
	line-height: 80px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
	cursor: pointer;
	padding-left: 3px
}

.detail-bottom .detail .course-list-li h5 .live-time {
	width: 61px;
	line-height: normal;
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	font-weight: 500;
	text-align: center
}

.detail-bottom .detail .course-list-li h5 .straightline {
	position: relative;
	height: 80px;
	width: 61px;
	display: inline-block;
	vertical-align: middle;
	font-size: 0
}

.detail-bottom .detail .course-list-li h5 .straightline .line {
	height: 80px;
	width: 1px;
	background-color: #eee;
	margin: 0 auto
}

.detail-bottom .detail .course-list-li h5 .straightline .icon-circle {
	height: 10px;
	width: 10px;
	background: #cbcbcb;
	border-radius: 50%;
	z-index: 1;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto
}

.detail-bottom .detail .course-list-li h5 .live-content {
	width: 80%;
	display: inline-block;
	vertical-align: middle
}

.detail-bottom .detail .course-list-li h5 .live-content a {
	color: #333
}

.detail-bottom .detail .course-list-li h5 .live-content div {
	line-height: 32px
}

.detail-bottom .detail .course-list-li h5 .live-content div.teacher {
	font-size: 14px;
	font-weight: normal;
	line-height: 1.14;
	color: #666
}

.detail-bottom .detail .course-list-li h5.light {
	color: #999
}

.detail-bottom .detail .course-list-li h5.light .live-content a {
	color: #999
}

.detail-bottom .detail .course-list-li h5.light .live-content div.teacher {
	color: #999
}

.detail-bottom .detail .course-list-li h5:hover {
	color: #e74b3b
}

.detail-bottom .detail .course-list-li h5:hover .live-content a {
	color: #e74b3b
}

.detail-bottom .detail .course-list-li h5:hover .live-content .teacher {
	color: #e74b3b
}

.detail-bottom .detail .course-list-li h5:hover span {
	color: #e74b3b
}

.detail-bottom .detail .course-list-li h5:hover.light {
	color: #999;
	cursor: default
}

.detail-bottom .detail .course-list-li h5:hover.light a {
	color: #999
}

.detail-bottom .detail .course-list-li h5 .lesson-title-icon {
	margin-right: 11px
}

.detail-bottom .detail .course-list-li h5 span {
	font-size: 14px;
	color: #999999;
	margin-left: 10px
}

.detail-bottom .detail .course-list-li h5 .arrow {
	float: right;
	margin-right: 10px;
	width: 25px;
	cursor: pointer;
	transition-duration: .3s
}

.detail-bottom .detail .course-list-li h5 .icon-circle {
	height: 10px;
	width: 10px;
	background: #cbcbcb;
	border-radius: 50%;
	margin-right: 30px;
	z-index: 1;
	position: relative
}

.detail-bottom .detail .course-list-li.live-class::after {
	display: none
}

.detail-bottom .detail .course-list-li.live-class h5 {
	line-height: 76px
}

.detail-bottom .detail .course-list-li.live-class:first-child .straightline .line {
	height: 40px;
	margin: 40px auto 0
}

.detail-bottom .detail .course-list-li.live-class:last-child .straightline .line {
	height: 40px;
	margin: 0 auto 40px
}

.detail-bottom .detail .course-list-li::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 100%;
	background: #eeeeee;
	position: absolute;
	top: 0;
	left: 7px
}

.detail-bottom .detail .course-list-li:first-child::after {
	top: 46px
}

.detail-bottom .detail .course-list-li:last-child::after {
	top: -26px
}

.detail-bottom .detail .course-list-li .course-list-sub {
	margin-left: 8px
}

.detail-bottom .detail .course-list-li .course-list-sub li {
	line-height: 50px;
	padding-left: 40px;
	font-size: 14px;
	font-weight: 300
}

.detail-bottom .detail .course-list-li .course-list-sub li a.lesson-href {
	color: #333
}

.detail-bottom .detail .course-list-li .course-list-sub li:hover {
	background: rgba(238, 238, 238, 0.3)
}

.detail-bottom .detail .course-list-li .course-list-sub li:hover .icon-player-hover {
	display: inline-block;
	margin-right: 6px;
	margin-top: 2px;
	vertical-align: middle
}

.detail-bottom .detail .course-list-li .course-list-sub li:hover .icon-player-hover svg {
	position: relative;
	top: -3px
}

.detail-bottom .detail .course-list-li .course-list-sub li:hover .icon-player {
	display: none
}

.detail-bottom .detail .course-list-li .course-list-sub li:hover a.lesson-href {
	color: #e74b3b
}

.detail-bottom .detail .course-list-li .course-list-sub li .icon-player {
	margin-right: 6px;
	margin-top: 2px;
	opacity: 1;
	vertical-align: middle
}

.detail-bottom .detail .course-list-li .course-list-sub li .icon-player svg {
	position: relative;
	top: -3px
}

.detail-bottom .detail .course-list-li .course-list-sub li .icon-player-hover {
	display: none
}

.detail-bottom .detail .course-list-li .course-list-sub li .lecture-title {
	width: 100%;
	float: left;
	text-align: left
}

.detail-bottom .detail .course-list-li .course-list-sub li .lesson-sub-title {
	display: inline-block;
	vertical-align: middle
}

.detail-bottom .detail .course-list-li .course-list-sub li .lesson-sub-title i {
	display: inline-block;
	vertical-align: middle;
	max-width: 540px
}

.detail-bottom .detail .course-list-li .course-list-sub li .lesson-sub-title i.title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.detail-bottom .detail .course-list-li .course-list-sub li .lesson-sub-title i.title.max100 {
	max-width: 580px
}

.detail-bottom .detail .course-list-li .course-list-sub li .lesson-sub-title i.title.light {
	color: #999
}

.detail-bottom .detail .course-list-li .course-list-sub li .lesson-sub-title i.duration {
	color: #999;
	padding-left: .1rem
}

.detail-bottom .detail .course-list-li .course-list-sub li .experiment-tag {
	font-size: 12px;
	background: #e74b3b;
	color: white;
	height: 20px;
	line-height: 20px;
	border-radius: 2px;
	padding: 0 4px
}

.detail-bottom .detail .course-list-li .course-list-sub li .lesson-duration {
	float: right;
	font-size: 14px;
	font-weight: 500;
	margin-right: 20px;
	line-height: 53px
}

.detail-bottom .detail .course-list-li .course-list-sub li .lesson-duration .no-upload {
	color: #999;
	font-weight: normal
}

.detail-bottom .detail .course-list-li .course-list-sub .go_buy,
.detail-bottom .detail .course-list-li .course-list-sub .course-start {
	color: #333333;
	cursor: pointer
}

.detail-bottom .detail .course-list-li .course-list-sub .go_buy:hover,
.detail-bottom .detail .course-list-li .course-list-sub .course-start:hover {
	color: #e74b3b
}

.detail-bottom .detail .course-list-li .course-list-sub .wait-start {
	cursor: default
}

.detail-bottom .detail .course-list-li .course-list-sub .wait-start a {
	cursor: default
}

.detail-bottom .detail .course-list-li .course-list-sub .wait-start:hover {
	color: #e74b3b
}

.detail-bottom .aside {
	float: left;
	width: 320px;
	margin-left: 30px;
	padding-bottom: 40px
}

.detail-bottom .aside .aside-item {
	background-color: #fff;
	padding: 30px 20px;
	margin-bottom: 30px
}

.detail-bottom .aside .aside-item:last-child {
	margin-bottom: 0
}

.detail-bottom .aside .aside-item.announce-content pre {
	font-size: 14px;
	color: #333;
	line-height: 1.83;
	font-weight: 300;
	margin-top: 0
}

.detail-bottom .aside .aside-item.announce-content img {
	display: block;
	width: 180px;
	margin: 0 auto
}

.detail-bottom .aside .aside-item.announce-content .teacher-wechat-enter {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 25px
}

.detail-bottom .aside .aside-item.announce-content .teacher-wechat-enter p {
	font-size: 12px;
	color: #333;
	margin-right: 14px
}

.detail-bottom .aside .aside-item.announce-content .teacher-wechat-enter .popup-btn {
	height: 24px;
	border-radius: 2px;
	text-align: center;
	line-height: 24px;
	background-color: #e74b3b;
	color: #fff;
	font-weight: normal;
	font-size: 12px;
	padding: 0 10px;
	transition: .3s ease;
	cursor: pointer
}

.detail-bottom .aside .aside-item.announce-content .teacher-wechat-enter .popup-btn:hover {
	background-color: #cf4334
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100000
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 335px;
	text-align: center;
	background-color: #fff;
	border-radius: 8px;
	padding: 24px 0;
	transform: translate(-50%, -54%);
	box-sizing: border-box
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container.copy-popup-container .copy-tip {
	font-size: 14px;
	color: #666;
	margin-top: 15px
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .title {
	font-size: 20px;
	color: #333
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .subtitle {
	font-size: 12px;
	color: #e74b3b;
	border-bottom: dashed 1px rgba(238, 238, 238, 0.5);
	padding-bottom: 20px;
	margin-top: 4px
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .qr-wrap {
	width: 120px;
	height: 120px;
	border: solid 1px #f0f0f0;
	padding: 5px;
	margin: 20px auto 0
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .qr-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .qr-tip {
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 2px;
	text-align: center;
	color: #666;
	margin: 20px auto 0
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .wechat-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 220px;
	height: 36px;
	border-radius: 2px;
	background-color: #eee;
	padding: 0 15px;
	margin: 20px auto 0;
	box-sizing: border-box
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .wechat-wrap p {
	font-size: 12px;
	line-height: 36px;
	color: #999
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .wechat-wrap p.wechat-id {
	max-width: 100px;
	letter-spacing: 2px;
	color: #666;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	margin-top: 32px
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap a,
.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap span {
	width: 140px;
	height: 40px;
	line-height: 40px;
	border-radius: 4px;
	border: solid 1px #e5e5e5;
	font-size: 14px;
	text-align: center;
	color: #333;
	box-sizing: border-box;
	transition: .3s ease;
	cursor: pointer
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap a.full-btn,
.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap span.full-btn {
	width: 100%
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap a.cancel-btn:hover,
.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap span.cancel-btn:hover {
	background-color: #f0f0f0
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap a.confirm-btn,
.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap span.confirm-btn {
	background-color: #e74b3b;
	color: #fff
}

.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap a.confirm-btn:hover,
.detail-bottom .aside .aside-item.announce-content .teacher-popup-layer .popup-container .btn-wrap span.confirm-btn:hover {
	background-color: #cf4334
}

.detail-bottom .aside .aside-item.related-list {
	padding: 20px 12px
}

.detail-bottom .aside .aside-item.related-list li {
	position: relative;
	margin-bottom: 20px
}

.detail-bottom .aside .aside-item.related-list li:last-child {
	margin-bottom: 0
}

.detail-bottom .aside .aside-item.related-list li .item-top {
	position: relative;
	width: 140px;
	height: 80px
}

.detail-bottom .aside .aside-item.related-list li .item-top a {
	display: block;
	height: 100%;
	overflow: hidden;
	background: #f0f0f0
}

.detail-bottom .aside .aside-item.related-list li .item-top a .cover {
	width: 100%;
	transition: 0.3s cubic-bezier(0, 1, 0.75, 1)
}

.detail-bottom .aside .aside-item.related-list li .item-top a .cover:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05)
}

.detail-bottom .aside .aside-item.related-list li .item-top a .tag {
	position: absolute;
	top: 16px;
	left: 16px;
	height: 24px;
	padding: 0 15px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	line-height: 24px;
	text-align: center;
	color: #ffffff
}

.detail-bottom .aside .aside-item.related-list li .item-top a .tag.tag-blue {
	background-color: rgba(48, 79, 254, 0.9);
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1), 0 0 30px 0 rgba(0, 0, 0, 0.05)
}

.detail-bottom .aside .aside-item.related-list li .item-top a .tag.tag-red {
	background-color: rgba(231, 75, 59, 0.9);
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1), 0 0 30px 0 rgba(0, 0, 0, 0.05)
}

.detail-bottom .aside .aside-item.related-list li .item-bottom {
	position: absolute;
	top: 50%;
	left: 150px;
	width: 146px;
	background-color: #fff;
	transform: translateY(-50%)
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .course-title {
	font-size: 14px;
	font-weight: 500;
	color: #333;
	line-height: 18px;
	max-height: 36px;
	transition: .15s ease-in-out
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .course-title:hover {
	color: #e74b3b
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .course-teacher {
	position: relative;
	font-size: 12px;
	font-weight: 300;
	color: #999;
	line-height: 16px;
	padding-top: 5px
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .course-teacher .left {
	display: flex;
	align-items: center;
	text-align: left
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .course-teacher .left.w80 {
	width: 80%
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .course-teacher .left span {
	position: relative;
	display: block;
	white-space: nowrap
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .course-teacher .left span.name i {
	display: block;
	max-width: 150px
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .course-teacher .left span.brief {
	padding-left: 14px
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .course-teacher .left span.brief:before {
	content: "";
	position: absolute;
	width: 1px;
	height: 12px;
	background-color: #f0f0f0;
	left: 6px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .price-wrap {
	padding-top: 5px
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .price-wrap .current-price {
	font-size: 12px;
	font-weight: 600;
	color: #e74b3b
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .price-wrap .current-price i {
	font-size: 16px
}

.detail-bottom .aside .aside-item.related-list li .item-bottom .price-wrap .origin-price {
	font-size: 12px;
	font-weight: 300;
	color: #999;
	text-decoration: line-through;
	padding-left: 2px
}

.detail-bottom .aside .aside-item.master img {
	display: block;
	width: 124px;
	height: 124px;
	border-radius: 50%;
	border: 1px solid #f0f0f0;
	margin: 0 auto
}

.detail-bottom .aside .aside-item.master .desc h3 {
	font-size: 20px;
	text-align: center;
	font-weight: 600;
	color: #4a4a4a;
	padding: 15px 0 0
}

.detail-bottom .aside .aside-item.master .desc span {
	font-size: 14px;
	padding-top: 8px
}

.detail-bottom .aside .aside-item.master .desc pre {
	font-size: 14px;
	line-height: 1.71;
	text-align: justify;
	color: #4a4a4a;
	font-weight: 300
}

.detail-bottom .aside .aside-item.master.et-2:nth-of-type(1) {
	margin-bottom: 0;
	padding-bottom: 0
}

.detail-bottom .aside .aside-item.master.et-2:nth-of-type(1) pre {
	margin-bottom: 0
}

.detail-bottom .aside .aside-item.master.et-2:nth-of-type(2) {
	padding-top: 30px
}

.detail-bottom .aside .aside-item.master.gt-2 {
	display: inline-block;
	vertical-align: top;
	width: 153px;
	padding: 30px 15px 26px;
	box-sizing: border-box;
	margin: 14px 0 0
}

.detail-bottom .aside .aside-item.master.gt-2 span {
	height: 20px
}

.detail-bottom .aside .aside-item.master.gt-2 pre {
	display: none
}

.detail-bottom .aside .aside-item.master.gt-2:nth-of-type(1),
.detail-bottom .aside .aside-item.master.gt-2:nth-of-type(2) {
	margin-top: 0
}

.detail-bottom .aside .aside-item.master.gt-2:nth-of-type(2n) {
	margin-left: 14px
}

.detail-bottom .aside .aside-item.list {
	padding-top: 20px
}

.detail-bottom .aside .aside-item.list .list-header {
	font-size: 0;
	border-bottom: 1px solid rgba(216, 216, 216, 0.5);
	text-align: center
}

.detail-bottom .aside .aside-item.list .list-header span {
	font-size: 16px;
	color: #333;
	cursor: pointer;
	padding-bottom: 8px;
	margin-right: 30px
}

.detail-bottom .aside .aside-item.list .list-header span:last-child {
	margin-right: 0
}

.detail-bottom .aside .aside-item.list .list-header span.selected {
	position: relative;
	font-weight: 600
}

.detail-bottom .aside .aside-item.list .list-header span.selected:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 20px;
	height: 4px;
	background-color: #e74b3b;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%)
}

.detail-bottom .aside .aside-item.list .list-content {
	margin-top: 20px
}

.detail-bottom .aside .aside-item.list .list-content ul li {
	display: flex;
	font-size: 0;
	line-height: 40px;
	margin-bottom: 20px
}

.detail-bottom .aside .aside-item.list .list-content ul li:last-child {
	margin-bottom: 0
}

.detail-bottom .aside .aside-item.list .list-content ul li>* {
	display: inline-block;
	vertical-align: middle
}

.detail-bottom .aside .aside-item.list .list-content ul li .number {
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: #333
}

.detail-bottom .aside .aside-item.list .list-content ul li a {
	cursor: default
}

.detail-bottom .aside .aside-item.list .list-content ul li a.avatar {
	margin-left: 16px
}

.detail-bottom .aside .aside-item.list .list-content ul li a.avatar img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%
}

.detail-bottom .aside .aside-item.list .list-content ul li a.name {
	margin-left: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden
}

.detail-bottom .aside .aside-item.list .list-content ul li .progress {
	font-size: 14px;
	color: #666;
	flex-grow: 1;
	display: flex;
	justify-content: flex-end;
	white-space: nowrap
}

.detail-bottom .aside .aside-item.list .list-content .list-empty {
	font-size: 12px;
	text-align: center;
	color: #999;
	padding-top: 10px
}

.detail-bottom .aside .aside-item.ad {
	padding: 0
}

.detail-bottom .aside .aside-item.ad a {
	display: block
}

.detail-bottom .aside .aside-item.ad img {
	width: 100%
}



.detail-bottom .detail-item .more-course {
	float: right;
	font-size: 14px;
	color: #333;
	margin-top: 8px;
	transition: .3s ease
}

.detail-bottom .detail-item .more-course:hover {
	color: #e74b3b
}

.detail-bottom .detail-item .course-comment-wrap {
	background-color: #fff;
	padding: 15px 70px
}

.detail-bottom .detail-item h2 {
	font-size: 24px;
	font-weight: 500;
	color: #333333;
	margin: 40px auto 20px
}

.detail-bottom .detail-item h2 span {
	font-size: 28px;
	font-weight: 300
}

.detail-bottom .detail-item .sub-face {
	width: 100%;
	background: #fff;
	display: block
}

.detail-bottom .detail-item .text {
	line-height: 1.8;
	color: #4a4a4a;
	background: #fff;
	padding: 30px 70px;
	font-size: 14px;
	font-weight: 300
}

.detail-bottom .detail-item .para {
	margin-top: 10px
}

.detail-bottom .detail-item .tutor-list .tutor {
	width: 410px;
	margin-bottom: 30px;
	background: #fff;
	float: left;
	margin-right: 30px
}

.detail-bottom .detail-item .tutor-list .tutor:nth-child(2n+2) {
	margin-right: 0
}

.detail-bottom .detail-item .tutor-list .tutor:last-child {
	margin-bottom: 0
}

.detail-bottom .detail-item .tutor-list .tutor img {
	float: left;
	width: 150px
}

.detail-bottom .detail-item .tutor-list .tutor .desc {
	margin-left: 170px;
	color: #4a4a4a
}

.detail-bottom .detail-item .tutor-list .tutor .desc h4 {
	margin: 20px 0 9px;
	color: #4a4a4a;
	font-size: 20px;
	font-weight: 600
}

.detail-bottom .detail-item .tutor-list .tutor .desc h4 span {
	font-size: 14px;
	font-weight: normal;
	color: #4a4a4a;
	margin-left: 15px
}

.detail-bottom .detail-item .tutor-list .tutor .desc pre,
.detail-bottom .detail-item .tutor-list .tutor .desc p {
	margin-right: 20px;
	line-height: 1.8;
	font-weight: 300
}

.detail-bottom .detail-item .tutor-list .master {
	height: 293px;
	background: #fff;
	padding-right: 22px;
	margin-bottom: 40px
}

.detail-bottom .detail-item .tutor-list .master img {
	float: left;
	width: 318px
}

.detail-bottom .detail-item .tutor-list .master .desc {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	vertical-align: top;
	display: inline-block;
	margin-left: 340px;
	display: block
}

.detail-bottom .detail-item .tutor-list .master .desc h3 {
	color: #4a4a4a;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2
}

.detail-bottom .detail-item .tutor-list .master .desc h3 span {
	display: inline;
	font-size: 14px;
	font-weight: normal;
	color: #4a4a4a;
	margin-left: 3px
}

.detail-bottom .detail-item .tutor-list .master .desc pre,
.detail-bottom .detail-item .tutor-list .master .desc p {
	font-size: 14px;
	line-height: 1.8;
	color: #4a4a4a;
	font-weight: 300
}

.detail-bottom .detail-item .content {
	padding: 20px 60px 20px;
	background: #fff
}

.detail-bottom .detail-item .content h4 {
	color: #4a4a4a;
	font-weight: normal;
	font-size: 20px;
	margin: 0px 0 12px
}

.detail-bottom .detail-item .content pre,
.detail-bottom .detail-item .content p {
	line-height: 1.8;
	color: #333333;
	padding-bottom: 23px;
	font-size: 14px;
	font-weight: 300
}

.detail-bottom .detail-item .content pre:last-child,
.detail-bottom .detail-item .content p:last-child {
	padding-bottom: 0
}

.detail-bottom .detail-item .content .overdue td {
	color: #ccc
}

.detail-bottom .detail-item .content .overdue td a {
	color: #ccc
}

.qa-list li {
	margin-bottom: 30px
}

.qa-list li:last-child {
	margin-bottom: 0
}

.qa-list li .q {
	font-size: 16px;
	font-weight: 500;
	color: #333333;
	margin-bottom: 18px
}

.qa-list li .q span {
	color: #e74b3b
}

.qa-list li .a {
	font-size: 14px;
	line-height: 1.8;
	color: #4a4a4a;
	font-weight: 300
}

.video-pre {
	width: 640px;
	display: block;
	margin: 25px auto 10px
}

.video-pre video {
	width: 100%
}

.video-pre .video-pre-ground {
	height: 360px;
	overflow: hidden;
	position: relative
}

.video-pre .video-pre-ground .video-pre-cover {
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-size: cover;
	background-position: center;
	z-index: 1
}

.video-pre .video-pre-title {
	text-align: center;
	margin-top: 14px;
	font-size: 14px
}

.test-mark {
	width: 60px;
	height: 20px;
	border-radius: 2px;
	background-color: #4990e2;
	margin-left: 15px;
	line-height: 20px;
	color: #fff;
	font-size: 12px
}

.fixed-side-btn {
	position: fixed;
	right: 20px;
	bottom: 120px;
	z-index: 100;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-ms-transition: 0.3s all;
	transition: 0.3s all
}

.fixed-side-btn img {
	width: 52px
}

.fixed-side-btn:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1)
}

.detail-1110 .detail-center-880 {
	display: inline-block
}

.detail-1110 .detail-center-880 .detail-item h2 {
	margin-top: 30px;
	padding-top: 10px
}

.detail-1110 .detail-center-880 .detail-item .content {
	padding: 30px
}

.detail-1110 .detail-center-880 .detail-item .content .img-wrap {
	margin: 20px 0
}

.detail-1110 .detail-center-880 .detail-item .content .img-wrap img {
	width: 394px
}

.detail-1110 .detail-center-880 .detail-item .content.limit-height .hover-list {
	max-height: 500px;
	overflow: hidden
}

.detail-1110 .detail-center-880 .detail-item .course-list-li .course-list-sub {
	position: relative;
	top: -25px
}

.detail-1110 .detail-center-880 .detail-item .course-list-li li {
	line-height: 30px;
	color: #333
}

.detail-1110 .detail-center-880 .detail-item .course-list-li li p {
	padding-bottom: 0
}

.detail-1110 .detail-center-880 .detail-item .course-list-li li:hover {
	background: #fff
}

.detail-1110 .detail-center-880 .detail-item .course-list-li h5 {
	line-height: normal
}

.detail-1110 .detail-center-880 .detail-item .course-list-li h5 em {
	width: 46px;
	margin-left: 9px
}

.detail-1110 .detail-center-880 .detail-item .course-list-li::after {
	left: 85px
}

.detail-1110 .detail-center-880 .detail-item .course-list-li:first-child::after {
	top: 16px
}

.detail-1110 .detail-center-880 .detail-item .comment-item {
	width: 274px;
	background: #fff;
	float: left;
	margin-right: 29px;
	margin-bottom: 30px;
	padding: 20px;
	font-size: 14px;
	color: #666;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box
}

.detail-1110 .detail-center-880 .detail-item .comment-item em {
	font-size: 40px;
	color: #999;
	font-family: "PingFang SC", "Microsoft YaHei", STHeiti, sans-serif
}

.detail-1110 .detail-center-880 .detail-item .comment-item p {
	height: 100px
}

.detail-1110 .detail-center-880 .detail-item .comment-item img {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	width: 58px;
	margin-top: 30px;
	margin-bottom: 10px
}

.detail-1110 .detail-center-880 .detail-item .comment-item h5 {
	font-size: 14px
}

.detail-1110 .detail-center-880 .detail-item .comment-item span {
	font-size: 12px;
	color: #999
}

.detail-1110 .detail-center-880 .detail-item .comment-item:nth-child(3n+1) {
	margin-right: 0
}

.detail-1110 .detail-center-880 .detail-item .hover-list li {
	height: 49px;
	line-height: 49px;
	color: #333;
	font-size: 14px;
	margin: 0 30px;
	border-bottom: 1px solid #f0f0f0;
	padding: 0 5px
}

.detail-1110 .detail-center-880 .detail-item .hover-list li:hover {
	background: #f0f0f0
}

.detail-1110 .detail-center-880 .detail-item .qrcode {
	text-align: center;
	font-size: 12px;
	color: #333;
	line-height: 20px
}

.detail-1110 .detail-center-880 .detail-item .qrcode img {
	width: 244px;
	margin-top: 90px
}

.detail-1110 .detail-center-880 .detail-item .ys {
	text-align: center;
	margin: 20px 0 50px
}

.detail-1110 .detail-center-880 .detail-item .ys img {
	width: 120px;
	margin-bottom: 14px
}

.detail-1110 .detail-center-880 .detail-item .ys span {
	width: 228px;
	vertical-align: top;
	margin: 0 21px;
	font-size: 12px;
	color: #333;
	font-weight: 300;
	text-align: center
}

.detail-1110 .detail-center-880 .detail-item .ys span em {
	text-align: left
}

.detail-1110 .detail-nav-list {
	width: 200px;
	float: left;
	margin-top: 40px;
	font-weight: 300
}

.detail-1110 .detail-nav-list a:hover {
	background: #f0f0f0
}

.detail-1110 .detail-nav-list a,
.detail-1110 .detail-nav-list li {
	height: 48px;
	line-height: 48px;
	background: #fff;
	text-align: center;
	border-bottom: 1px solid #f0f0f0;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	display: block
}

.detail-1110 .detail-nav-list a.select,
.detail-1110 .detail-nav-list li.select {
	font-weight: bold
}

.detail-1110 .detail-nav-list a:last-child,
.detail-1110 .detail-nav-list li:last-child {
	height: 80px;
	line-height: normal
}

.detail-1110 .detail-nav-list a:last-child span,
.detail-1110 .detail-nav-list li:last-child span {
	width: 160px;
	height: 40px;
	line-height: 40px;
	border-radius: 100px;
	background-color: #e74b3b;
	margin-top: 20px;
	color: #fff;
	transition: .3s ease
}

.detail-1110 .detail-nav-list a:last-child span:hover,
.detail-1110 .detail-nav-list li:last-child span:hover {
	background: #cf4334
}

.detail-1110 table {
	width: 100%;
	font-size: 14px;
	font-weight: 300
}

.detail-1110 table tr td {
	border-bottom: 1px solid #f0f0f0;
	height: 58px;
	color: #333;
	text-align: center
}

.detail-1110 table tr td em {
	color: #666;
	font-size: 12px
}

.detail-1110 table tr td a {
	color: #333
}

.detail-1110 table tr td a:hover {
	color: #000
}

.detail-1110 table tr:first-child {
	border-top: 1px solid #f0f0f0
}

.detail-1110 .fold {
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-top: 0px;
	cursor: pointer
}

.detail-1110 .fold:after {
	width: 0;
	height: 0;
	display: inline-block;
	content: '';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 6px solid #000
}

.detail-1110 .notice {
	padding: 20px 0
}

.detail-1110 .notice .r {
	margin-left: 70px;
	text-align: left
}

.detail-1110 .notice .l {
	position: absolute
}

.detail-1110 .table-content table,
.detail-1110 .limit-height table {
	height: 118px;
	overflow: hidden;
	display: block
}

.detail-1110 .table-content .fold:after,
.detail-1110 .limit-height .fold:after {
	width: 0;
	height: 0;
	display: inline-block;
	content: '';
	border-bottom: 6px solid transparent !important;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #000
}

.cultivate {
	text-align: center;
	font-size: 14px;
	margin-top: 100px;
	font-weight: 300
}

.cultivate h4 {
	font-size: 20px;
	color: #333;
	margin: 28px
}

.cultivate p {
	color: #666;
	line-height: 22px
}

.cultivate .btn {
	width: 140px;
	height: 50px;
	line-height: 50px;
	border-radius: 2px;
	background-color: #e74b3b;
	display: inline-block;
	color: #fff;
	margin-top: 33px;
	cursor: pointer
}

.cultivate .btn:hover {
	background-color: #cf4334
}

.black-layer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100000
}

.black-layer .popup-contanier {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.black-layer .popup-contanier a {
	display: block
}

.black-layer .popup-contanier img {
	width: 500px;
	cursor: pointer
}

.black-layer .popup-contanier .close {
	background: url("//oss-vmovier0.xpccdn.com/Uploads/Activity/2017-11-13/5a096e762dafd.png") no-repeat;
	background-size: cover;
	width: 20px;
	height: 20px;
	position: absolute;
	top: -22px;
	right: -22px;
	cursor: pointer
}

.sd-ad {
	height: 60px;
	width: 100%;
	background: url(../../../../oss-xpc0.xpccdn.com/Upload/boss/2017/12/285a44fe4203fb3.png);
	background-size: cover;
	position: absolute;
	bottom: 0;
	z-index: 1
}

.sd-ad .ad-center {
	position: relative;
	height: 100%
}

.sd-ad .ad-center img {
	height: 72px;
	position: absolute;
	bottom: 0;
	left: 0
}

.receive-success-toast {
	width: 140px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	color: #fff;
	opacity: 0.8;
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.8);
	position: fixed;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: none;
	font-size: 18px
}

.recovery-buy-special {
	margin-right: 11px
}

.recovery-buy-special::after {
	width: 0;
	height: 0
}

.installment {
	position: relative;
	font-weight: 300
}

.installment .installment-content {
	font-weight: 300;
	display: inline-block;
	position: absolute;
	left: -38px;
	top: 24px
}

.installment .installment-content .installment-tip {
	width: 323px;
	border-radius: 2px;
	font-size: 12px;
	color: #333;
	line-height: 1.4;
	text-align: left
}

.installment .installment-content .installment-tip em {
	height: 40px;
	border: 1px solid #999;
	width: 93px;
	padding-top: 10px;
	text-align: center;
	margin-right: 2px;
	vertical-align: bottom
}

.installment .installment-content .installment-tip em .installment-box {
	transform: scale(0.9)
}

.installment .installment-content .installment-tip em span {
	display: block;
	color: #999;
	text-decoration: none
}

.installment .installment-content .installment-tip .strangle {
	position: absolute;
	border: 8px solid rgba(0, 0, 0, 0);
	border-bottom: 8px solid rgba(0, 0, 0, 0.05);
	right: 181px;
	top: -16px;
	background-color: transparent;
	width: 0;
	height: 0
}

.installment .installment-content .installment-tip .strangle::after {
	position: absolute;
	right: -8px;
	top: -7px;
	border: 8px solid rgba(0, 0, 0, 0);
	border-bottom: 8px solid #ffffff;
	content: ''
}

.common-pop-wrapper {
	width: 300px;
	height: 256px;
	background: url(../../../img/sharecoupon-bg.pngg");
	background-size: contain;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 10004;
	transform: scale(1);
	-o-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transition-duration: .3s
}

.common-pop-wrapper.dn {
	display: block !important;
	transform: scale(0);
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transition-duration: .3s
}

.common-pop-wrapper .common-qrcode-wrapper {
	text-align: center
}

.common-pop-wrapper .common-qrcode-wrapper .common-share-qrcode {
	width: 89px;
	height: 89px;
	margin-top: 17px;
	margin-bottom: 17px
}

.common-pop-wrapper .common-head {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-align: center;
	color: #fff;
	line-height: 57px;
	padding-top: 2px
}

.common-pop-wrapper .common-info {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1.2px;
	text-align: center;
	color: #666
}

.common-pop-wrapper .icon-close {
	position: absolute;
	right: 15.8px;
	top: 15.8px;
	color: #FFF;
	font-size: 16px;
	cursor: pointer;
	font-weight: 300
}

.wholemask {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10003;
	background-color: rgba(0, 0, 0, 0.4)
}

.seven-btn {
	display: none
}

.sevenqrcode {
	text-align: center
}

.sevenqrcode img {
	margin: 125px auto 20px;
	display: block
}

.sevenqrcode h4 {
	font-size: 18px
}

.sevenqrcode p {
	margin: 50px 0 100px;
	color: #666
}

.vip-coupon {
	height: 36px;
	line-height: 36px;
	border-radius: 2px;
	background-image: linear-gradient(96deg, #e74b3b, rgba(231, 75, 59, 0.75));
	color: #ffcabd;
	margin: 20px 0;
	padding: 0 12px;
	cursor: pointer;
	font-size: 14px;
	color: #ffcabd;
	position: relative;
	max-width: 320px
}

.vip-coupon .vip-icon {
	display: inline-block;
	width: 26px;
	height: 26px;
	background: url(../../../../oss-xpc0.xpccdn.com/Upload/edu/2019/08/165d5614ec517cc.png) center no-repeat;
	background-size: 18px;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	vertical-align: middle;
	position: absolute;
	left: 10px;
	top: 5px
}

.vip-coupon .coupon-desc {
	width: 193px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	margin-left: 30px
}

.vip-coupon .coupon-btn {
	width: 72px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 2px;
	color: #ffffff;
	font-weight: 500;
	float: right;
	margin-top: 6px
}

.vip-general .coupon-btn.got {
	color: rgba(255, 255, 255, 0.5)
}

.vip-super {
	background-image: linear-gradient(96deg, #0f0f0f, #373737)
}

.vip-super .vip-icon {
	background-image: url(../../../../oss-xpc0.xpccdn.com/Upload/edu/2019/08/185d59343eb7368.png)
}

.vip-super .coupon-btn {
	background-image: linear-gradient(105deg, #ffcabd, #ffe7e0 50%, #ffcabd);
	color: #373737
}

.vip-super .coupon-btn.got {
	background: none;
	color: #666666
}

.vip-free {
	text-align: center
}

.vip-free.vip-free-audio {
	margin-right: 20px;
	display: inline-block
}

.vip-free.vip-free-audio p {
	position: absolute;
	left: 0;
	text-align: left;
	width: 200px
}

.vip-free div {
	width: 320px;
	height: 48px;
	line-height: 48px;
	border-radius: 24px;
	background-image: linear-gradient(98deg, #0f0f0f, #373737);
	margin-top: 16px;
	cursor: pointer
}

.vip-free div span {
	background-image: linear-gradient(98deg, #ffcabd, #ffe7e0 50%, #ffcabd);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 20px;
	font-weight: 600
}

.vip-free .free-btn-audio {
	width: 160px;
	height: 48px;
	line-height: 48px;
	border-radius: 2px;
	margin-top: 0
}

.vip-free .free-btn-audio span {
	font-size: 16px
}

.vip-free p {
	font-size: 12px;
	margin-top: 8px
}

.vip-free .disabled {
	background: #666666
}

.vip-free .disabled span {
	background: none;
	color: #999;
	-webkit-text-fill-color: #999
}