@charset "utf-8";
.mobile-wrap{
	padding-bottom: 20px;
}


.detail{margin-top: 30px;}
.detail .left-box{float: left; width: 750px;}
.detail .left-box .page-title{padding: 15px 0;}
.detail .left-box .page-title h1{font-size: 30px; text-align:center; font-weight: normal;}
.detail .left-box .page-title .detail-info{border-top: 1px solid #ccc; padding: 15px 0; margin-top: 30px; text-align: center;}
.detail .left-box .page-title .detail-info span{display: inline-block; margin: 0 10px; color: #666;}
.detail .left-box .xd-box-02{}
.detail .left-box .xd-box-02 img{display: block; width: 100%;}
.detail .left-box .detail-c{ padding: 30px;}

.detail .left-box .detail-c video{display: block; width: 100%; margin:0 auto 10px;}
.detail .left-box .detail-c img{display: block; max-width: 100%; margin:0 auto}
.detail .left-box .detail-c table{width: 100%;}
.detail .left-box .detail-c table td{padding: 10px;border: 1px solid #f1f1f1;}
.detail .left-box .detail-c p{line-height:1.8em; font-size:16px; margin-bottom:1em;}

.detail .right-box{width: 404px; float: right;}
.detail .right-box .courses-info{background-color: #f8f8f8; padding: 10px 22px 22px;}
.detail .right-box .courses-info .title{background: url(../img/icon-08.png) no-repeat 15px 0; height: 43px; position: relative; top: -20px; left: -22px;}
.detail .right-box .courses-info .list-box{}
.detail .right-box .courses-info .list-box .list{margin: 15px;float: left;}
.detail .right-box .courses-info .list-box .list a{display: block;}
.detail .right-box .courses-info .list-box .list img{display: block; width: 150px; height: 214px; box-shadow: 0 0 10px rgba(95,95,95,0.2);}
.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;}

a.btn,button.btn{display: inline-block !important;
    width: auto;
    min-width: 100px;
    height: 32px;
    font-size: 14px-;
    color: #000;
    margin: 0 2px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #ededed;
    background: #fafafa;
    border-radius: 5px;
}
a.btn:hover,button.btn:hover{
    background: #1c4cba;
}
.ls-listbox>div{text-align:center; padding:20px}

.xd-box-03{margin-top: 30px;}
.xd-box-03 img{display: block; width: 100%;}

@media screen and (max-width: 768px) {
	
	.mobile-wrap{
		background: none;
		padding-bottom: 0;
	}
	
	
	.detail{margin: .3rem 0;}
	.detail .left-box{float: none; width: 100%; padding: 0 .3rem;}
	.detail .left-box .page-title{padding: .1rem 0;}
	.detail .left-box .page-title h1{font-size: .4rem; font-weight: normal;}
	.detail .left-box .page-title .detail-info{border-top: 1px solid #ccc; padding: .2rem 0; margin-top: .3rem; text-align: left;}
	.detail .left-box .page-title .detail-info span{display: inline-block; margin: 0 .3rem 0 0; color: #666;}
	.detail .left-box .xd-box-02{display: none;}
	.detail .left-box .detail-c{ padding: 0; font-size: 16px;}
	.detail .left-box .detail-c img{display: block; max-width: 100%;}
	.detail .left-box .detail-c table{width: 100%;}
	.detail .left-box .detail-c table td{padding: 10px;}
	.detail .left-box .page-info {font-size: 14px; color: #888; margin: .4rem 0; padding:0;}
	
	.detail .right-box{width: 100%; float: none; display: none;}
	.detail .right-box .courses-info{background-color: #f8f8f8; padding: 10px 22px 22px;}
	.detail .right-box .courses-info .title{background: url(../img/icon-08.png) no-repeat 15px 0; height: 43px; position: relative; top: -20px; left: -22px;}
	.detail .right-box .courses-info .list-box{}
	.detail .right-box .courses-info .list-box .list{margin: 15px;float: left;}
	.detail .right-box .courses-info .list-box .list a{display: block;}
	.detail .right-box .courses-info .list-box .list img{display: block; width: 150px; height: 214px; box-shadow: 0 0 10px rgba(95,95,95,0.2);}
	.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;}
	
	.xd-box-03{margin-top: 30px;}
	.xd-box-03 img{display: block; width: 100%;}
}