@charset "utf-8";
.mobile-wrap{
	padding-bottom: 20px;
}
.main{
    position: relative;
    z-index: 0;
}
.page-title{padding: 15px 0;}
.page-title h1{font-size: 30px; font-weight: normal;}
.video-box{background-color: #333; padding-top:50px ;}
.video-box .mainBox{background-color: #555;}
.video-box .video-con {width: 880px; float: left; position: relative;}
.video-box .video-con video{ width: 880px; height: 495px; background-color: #000; display: block;}
.video-box .video-con.open{width: 1200px;}
.video-box .video-con.open video{}
.video-box .video-con .big-btn{background: url(../img/icon-02.png); cursor: pointer; width: 24px; height: 56px; position: absolute; right: -24px; top: 230px;}
.video-box .video-con.open .video{width: 1200px; height: 675px !important;}
.video-box .video-con.open video{width: 1200px; height: 675px !important;}
.video-box .video-list.open{display: none;}
.video-box .video-con .sim-btn{top: 325px; cursor: pointer; background: url(../img/icon-02x.png);}
.video-box .prism-player .prism-big-play-btn{left:50% !important; cursor: pointer; bottom: 50% !important; margin: 0 0 -32px -32px;}

.video-box .video-list{width: 285px; float: right; padding: 10px 0 0; }
.video-box .video-list .video-list-title{font-size: 20px; height: 38px; overflow: hidden; color: #fff;}
.video-box .video-list .mySwiper-01{position: relative; height: 447px; overflow: hidden;}
.video-box .video-list .list{overflow: hidden; padding: 6px 0 10px 0;}
.video-box .video-list .list .pic{ float: left; margin-right: 12px;}
.video-box .video-list .list .pic img{width: 150px; display: block; border-radius: 6px; background-position: center; background-size: cover;}
.video-box .video-list .list .title{ padding: 5px 16px 0 0;}
.video-box .video-list .list .title h2{ font-size: 14px; font-weight: normal; color: #fff; line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; text-overflow:ellipsis;}
.video-box .operation{margin: 0 auto; padding: 25px 320px 15px 0; position: relative; width: 1200px; color: #fff; height: 80px;}
.video-box .operation.open{padding: 25px 0 15px 0;}
.video-box .operation span{width: 30px; margin-right: 1px; display: inline-block; vertical-align: middle; background: url(../img/icon-04.png) no-repeat center center; height: 30px;}
.video-box .operation i{font-style: normal; display: inline-block; vertical-align: middle;}
.video-box .operation .shoucang,.video-box .operation .zan,.video-box .operation .fenxiang{float: left; margin-right: 50px;}
.video-box .operation .shoucang.on span{background-image: url(../img/icon-10.png);}
.video-box .operation .zan span{background-image: url(../img/icon-03.png);}
.video-box .operation .zan.on span{background-image: url(../img/icon-11.png);}
.video-box .operation .fenxiang span{background-image: url(../img/icon-05.png); background-position: 0 1px;}
.video-box .operation .bofang{float: right;}
.video-box .operation .bofang span{background-image: url(../img/icon-06.png);}


.share-box{position: absolute; display: none; z-index: 999; padding: 20px; top: 65px; left: 200px; width: 400px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); background-color: #fff; border-radius: 15px;}
.share-box::before{width: 20px; height: 20px; background-color: #fff; content: ""; transform: rotate(-45deg); position: absolute; top: -5px; left: 30px;}
.share-box .share-title{
	display: inline-block;
	vertical-align: middle;
	color: #000;
}
.share-box .btn-box{
	display: inline-block;
	vertical-align: middle;
}
.share-box .btn-box a{width: 41px; height: 41px; display: inline-block; margin-right: 10px;}
.share-box .button_weixin{ background: url(../img/icon-weixin.png);}
.share-box .button_weibo{ background: url(../img/icon-weibo.png);}
.share-box .button_f{ background: url(../img/icon-f.png);}
.share-box .button_t{ background: url(../img/icon-t.png);}
.share-box .qr-box{
	padding: 15px 0 0 60px;
}
.share-box .qr-box div{
	color: #000;
	display: inline-block;
	vertical-align: middle;
}
.share-box .qr-box .view{
	border: 1px solid #0F9A08;
	padding: 8px;
	border-radius: 10px;
}
.share-box .qr-box .view canvas{
	display: block;
	width: 90px !important;
	height: 90px !important;
}

.detail{margin-top: 50px;}
.detail .left-box{float: left; width: 750px;}
.detail .left-box .xd-box-02{}
.detail .left-box .xd-box-02 img{display: block; width: 100%;}
.detail .left-box .videocontent{ }
.detail .left-box .videocontent h2{ color: #F38484; font-size: 24px; font-weight: bold; border-bottom: 1px solid #f1f1f1; margin-top: 40px;  padding-bottom: 12px; margin-bottom: 20px;}
.detail .left-box .videocontent a{display: block; margin: 10px 0;}
.detail .left-box .videocontent a:hover{color: #F38484;}

.detail .right-box{width: 404px; float: right;}
.detail .right-box .courses-info{background-color: #f8f8f8; padding: 34px;}
.detail .right-box .courses-info .pic{margin-bottom: 15px;}
/* .detail .right-box .courses-info .pic img{width: 100%; display: block; background-position: center; background-size: cover;} */
.detail .right-box .courses-info .pic img{width: 50%; display: block; margin: 0 auto; background-position: center; background-size: cover;}
.detail .right-box .courses-info .con .l{font-size: 16px; padding: 10px 0;}
.detail .right-box .courses-info .con .l span{color: #333;}
.detail .right-box .courses-info .con .l span:first-child{color: #666;}
.detail .right-box .courses-info .con{font-size: 16px; line-height: 1.6em;word-break: break-word;}
.detail .right-box .recommend{background-color: #f8f8f8; padding: 34px 20px; margin-top: 30px;}
.detail .right-box .recommend .recommend-t{border-left: 5px solid #F38484; padding-left: 10px; height: 24px;}
.detail .right-box .recommend .recommend-t h2{font-size: 24px; font-weight: normal; line-height: 1em;}
.detail .right-box .recommend .list{padding: 20px 0; border-bottom: 1px solid #dbdbdb;}
.detail .right-box .recommend .list a{display: block; overflow: hidden;}
.detail .right-box .recommend .list .pic{float: left; margin-right: 10px; position: relative;}
.detail .right-box .recommend .list .pic .time{font-size: 10px; color: #555; background-color: rgba(255,255,255,.8); position: absolute; top: 10px; left: 10px; padding: 0 5px; line-height: 1.6em; border-radius: 20px;}
.detail .right-box .recommend .list .pic img{width: 195px; border-radius: 8px; display: block; background-position: center; background-size: cover;}
.detail .right-box .recommend .list .con{padding: 0; float: right; width: 155px;}
.detail .right-box .recommend .list .con .title{ height: 100px;}
.detail .right-box .recommend .list .con .title h2{padding: 5px 0; font-size: 14px; font-weight: normal;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; text-overflow:ellipsis;}
.detail .right-box .recommend .list .con .l-i{background: url(../img/icon-07.png) no-repeat left center; padding-left: 25px; color: #666; font-size: 12px;}


@media screen and (max-width: 768px) {
	.mobile-wrap{
		background: none;
		padding-bottom: .2rem;
	}
	
	.page-title{padding: 15px .25rem !important;}
	.page-title h1{font-size: .32rem; font-weight: normal;}
	.video-box{background-color: #fff; padding-top:0px ;}
	.video-box .mainBox{background-color: #fff;}
	.video-box .video-con {width: 100%; float: none; position: relative;}
	.video-box .video-con video{ width: 100%; height: auto; background-color: #000; display: block;}
	.video-box .video-con.open video{}
	.video-box .video-con .big-btn{display: none;}
	.video-box .video-list.open{display: none;}
	.video-box .video-con .sim-btn{display: none;}
	.video-box .prism-player .prism-big-play-btn{left:50% !important; bottom: 50% !important; margin: 0 0 -32px -32px;}
	
	.video-box .video-list{width: 100%; float: none; padding: .1rem .25rem 0; display: none;}
	.video-box .video-list .video-list-title{font-size: 20px; height: auto; overflow: hidden; color: #000;}
	.video-box .video-list .mySwiper-01{position: relative; height: 447px; overflow: hidden;}
	.video-box .video-list .list{overflow: hidden; padding: 6px 0 10px 0;}
	.video-box .video-list .list .pic{ float: left; margin-right: 12px;}
	.video-box .video-list .list .pic img{width: 150px; display: block; border-radius: 6px; background-position: center; background-size: cover;}
	.video-box .video-list .list .title{ padding: 5px 16px 0 0;}
	.video-box .video-list .list .title h2{ font-size: 14px; font-weight: normal; color: #fff; line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; text-overflow:ellipsis;}
	
	.video-box .operation{margin: 0 auto; padding: .25rem; width: 100%; color: #888; overflow: hidden; display:none;}
	.video-box .operation span{width: 30px; margin-right: 1px; display: inline-block; vertical-align: middle; background: url(../img/icon-04m.png) no-repeat center center; height: 30px;}
	.video-box .operation i{font-style: normal; display: inline-block; vertical-align: middle; font-size: .26rem;}
	.video-box .operation .shoucang,.video-box .operation .zan,.video-box .operation .fenxiang{float: left; margin-right: .3rem;}
	.video-box .operation .shoucang span{ background-size: .4rem;}
	.video-box .operation .shoucang.on span{background-image: url(../img/icon-10m.png);}
	.video-box .operation .zan span{background-image: url(../img/icon-03m.png); background-size: .4rem;}
	.video-box .operation .zan.on span{background-image: url(../img/icon-11m.png);}
	.video-box .operation .fenxiang{display: none;}
	.video-box .operation .fenxiang span{background-image: url(../img/icon-05m.png); background-position: center center; background-size: .28rem;}
	.video-box .operation .bofang{float: right;}
	.video-box .operation .bofang span{background-image: url(../img/icon-06m.png);  background-size: .4rem;}
	
	.detail{margin-top: 0rem;}
	.detail .left-box{float: none; width: 100%;}
	.detail .left-box .xc-box-02{display: none;}
	.detail .left-box .xc-box-02 img{display: block; width: 100%;}
	.detail .left-box .videocontent{ padding: 0 .25rem .25rem;}
	.detail .left-box .videocontent h2{ color: #F38484; font-size: .32rem; font-weight: bold; border-bottom: 1px solid #f1f1f1; margin-top: .4rem;  padding-bottom: .12rem; margin-bottom: .2rem;}
	.detail .left-box .videocontent a{display: block; margin: 10px 0;}
	.detail .left-box .videocontent a:hover{color: #F38484;}
	
	.detail .right-box{width: 100%; float: none;}
	.detail .right-box .courses-info{background-color: #ffebeb; padding: .25rem; display:none;}
	.detail .right-box .courses-info .pic{margin-bottom: .2rem;}
	.detail .right-box .courses-info .pic img{width: 60%; display: block; margin:0 auto; background-position: center; background-size: cover;}
	.detail .right-box .courses-info .con .l{font-size: .28rem; padding: .1rem 0;}
	.detail .right-box .courses-info .con .l span{color: #333;}
	.detail .right-box .courses-info .con .l span:first-child{color: #666;}
	
	.detail .right-box .recommend{background-color: #fff; padding: .34rem .25rem; margin-top: .3rem;}
	.detail .right-box .recommend .recommend-t{border-left: 5px solid #F38484; padding-left: 10px; height: .32rem; margin-bottom: .2rem;}
	.detail .right-box .recommend .recommend-t h2{font-size: .32rem; font-weight: normal; line-height: 1em;}
	.detail .right-box .recommend .list-box{margin: 0 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
	.detail .right-box .recommend .list-box .list{float: none; margin: 0; border: 0; padding: 0; width: 3.4rem; border-radius: .1rem; margin-bottom: .2rem; box-shadow: 0 0 5px rgba(0,0,0,0.1); display:block !important;}
	.detail .right-box .recommend .list-box .list a{display: block;}
	.detail .right-box .recommend .list .pic{float: none; margin-right: 0; position: relative;}
	.detail .right-box .recommend .list .pic .time{font-size: 10px; color: #555; background-color: rgba(255,255,255,.8); position: absolute; top: 10px; left: 10px; padding: 0 5px; line-height: 1.6em; border-radius: 20px;}
	.detail .right-box .recommend .list .pic img{width: 100%; border-radius: .1rem; display: block; background-position: center; background-size: cover;}
	.detail .right-box .recommend .list .con{padding: 0; float: right; width: 100%;}
	.detail .right-box .recommend .list .con .title{ height: auto;}
	.detail .right-box .recommend .list .con .title h2{padding: .2rem; font-size: .28rem; font-weight: normal;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; text-overflow:ellipsis;}
	.detail .right-box .recommend .list .con .l-i{display: none;}
	
}