@charset "utf-8";
.mobile-wrap{
	padding-bottom: 20px;
}
.tab{padding: 10px 20px;}
.tab a,
.tab div{display: inline-block; font-size: 16px; margin-right: 20px; position: relative;}
.tab a.on::before,
.tab div.on::before{content: ""; height: 2px; width: 100%; bottom: 0; position: absolute; left: 0; background-color: #ff7d7d;}
.tab  input{position: absolute;width: 100%; height: 100%; opacity: 0; cursor: pointer; top: 0; left: 0;}

.search-box{margin: 10px 0 20px; width: 750px; position: relative;}
.search-box input{width: 750px; border: 0; font-size: 18px; background: #fff url(../img/search-3.png) no-repeat 30px center; background-size:22px; border-radius: 34px; height: 54px; line-height: 54px; border: solid 1px #c1c1c1; padding-left: 80px;}
.search-box button{
	display: block;
	position: absolute;
	right: 8px;
	top: 7px;
	font-size: 18px;
	width:80px;
	height: 40px;
	line-height: 40px;
	background: #FF7D7D;
	color: #fff;
	background-size: 20px;
	border-radius:20px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}
.search-info{color: #888; padding-left: 20px; font-size: 16px;}

.detail{margin-top: 50px;}
.detail .left-box{float: left; width: 750px;}
.detail .left-box .list-box{margin-bottom: 20px;}
.list-box.list-01 .list{padding: 20px 0; border-bottom: 1px solid #dbdbdb;}
.list-box.list-01 .list a{display: block; overflow: hidden;}
.list-box.list-01 .list .pic{float: left; margin-right: 10px; position: relative;}
.list-box.list-01 .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;}
.list-box.list-01 .list .pic img{width: 310px; border-radius: 8px; display: block; background-position: center; background-size: cover;}
.list-box.list-01 .list .con{padding:10px 15px 10px 330px;}
.list-box.list-01 .list .con .title{ height: 150px;}
.list-box.list-01 .list .con .title h2{padding: 5px 0; font-size: 18px; font-weight: normal;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; text-overflow:ellipsis;}
.list-box.list-01 .list .con .l-i{background: url(../img/icon-07.png) no-repeat left center; padding-left: 25px; color: #666; font-size: 12px;}


.list-box.list-box-02 .list{border-bottom: 1px dashed #ccc;	padding: 20px 0px;	overflow: hidden;}
.list-box.list-box-02 .list a{display: block;}
.list-box.list-box-02 .list .pic{width:140px;}
.list-box.list-box-02 .list .pic img{display: block; width: 100%; border-radius:100%}
.list-box.list-box-02 .list .con{display: inline-block; vertical-align: middle; padding-left: 20px;}
.list-box.list-box-02 .list .con .title{font-size: 18px;}
.list-box.list-box-02 .list .con .sub-t{font-size: 18px;}

.list-box.list-box-03{margin: 0 0px;}
.list-box.list-box-03 .list{float: left; margin: 0 20px; width: 210px;  margin-bottom: 40px;}
.list-box.list-box-03 .list a{display: block;}
.list-box.list-box-03 .list .pic{position: relative;overflow: hidden; transition: all 0.2s ease-in-out;}
.list-box.list-box-03 .list .pic img{display: block; width: 210px; box-sizing: border-box; height: 300px; border: 1px solid #f1f1f1; transition: all 0.2s ease-in-out;}
.list-box.list-box-03 .list a:hover .pic img{border: 1px solid #ff7d7d;}
.list-box.list-box-03 .list .title{font-size: 16px; line-height: 20px;	color: #333; padding: 10px 0;}
.list-box.list-box-03 .list .title h2{font-size: 14px; font-weight: normal;}
.list-box.list-box-03 .list a:hover .title h2{color: #ff7d7d;}
.list-box.list-box-03 .list .list-info{display: flex; justify-content: space-between; align-items: center;}
.list-box.list-box-03 .list .list-info .star{color: #ef4a4b; font-size: 18px; margin: 0 -5px 0 -2px; display: inline-block;}
.list-box.list-box-03 .list .list-info .down{font-size: 12px; color: #888;}

/* 04 */
.list-box.list-box-04 .list{padding: 10px 0; position: relative;}
.list-box.list-box-04 .list a{display: block; overflow: hidden;}
.list-box.list-box-04 .list .title{}
.list-box.list-box-04 .list .title h2{padding: 0 200px 0 0; font-size: 16px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; text-overflow:ellipsis;}
.list-box.list-box-04 .list .sub-t{color: #888; position: absolute; right: 0; font-size: 12px; top: 14px;} 


.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;}

.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;
	}
	.tab{padding: 10px 20px;margin: .3rem;}
	.tab a,
	.tab div{display: inline-block; font-size: 16px; margin-right: 20px; position: relative;}
	.tab a.on::before,
	.tab div.on::before{content: ""; height: 2px; width: 100%; bottom: 0; position: absolute; left: 0; background-color: #ff7d7d;}
	.tab input{position: absolute;width: 100%; height: 100%; opacity: 0; cursor: pointer; top: 0; left: 0;}
	
	.search-box{margin: 10px .25rem 20px; width: 100%; position: relative;}
	.search-box input{ border: solid 1px #c1c1c1; padding-left: .7rem;width: calc(100% - .5rem); font-size: .28rem; background: #fff url(../img/search-3.png) no-repeat .3rem center; background-size: .45rem; border-radius: 34px; height: .9rem; line-height: .9rem; padding-left: .9rem;}
	.search-box button{opacity: 1;position: absolute; right: .6rem;top: .1rem;font-size: .32rem;width: 4em;height: .7rem;	line-height: .7rem;	background: #FF7D7D;	color: #fff;background-size: 20px;border-radius:20px;cursor: pointer;transition: all 0.2s ease-in-out;	}
	.search-box:hover button{display: block; opacity: 1;}
	.search-info{color: #888; padding-left: 20px; font-size: 16px;}

	
	.detail{margin-top: .3rem;}
	.detail .left-box{float: none; width: 100%;}
	.detail .left-box .list-box{margin-bottom: 20px;}

	.list-box.list-01{padding: .3rem .25rem; margin: 0 -1%;  display: flex; flex-wrap: wrap;}
	.list-box.list-01 .list{margin: 0 1.5% .2rem; width: 47%; padding: 0; border: 0;}
	.list-box.list-01 .list a{display: block; overflow: hidden;}
	.list-box.list-01 .list .pic{float: none; width: 100%; height: 2rem; position: relative; background-color: #ffffff; overflow: hidden; border-radius: .1rem; transition: all 0.2s ease-in-out;}
	.list-box.list-01 .list .pic img{display: block; width: 100%; height: 100%; background-size: cover; background-position: center; transition: all 0.2s ease-in-out;}
	.list-box.list-01 .list .pic .time{font-size: .2rem; color: #555; background-color: rgba(255,255,255,.8); position: absolute; top: .15rem; left: .15rem; padding: 0 .15rem; line-height: 2em; border-radius: 20px;}
	.list-box.list-01 .list .con{padding:0;}
	.list-box.list-01 .list .con .title{ height: auto; font-size: .28rem; line-height: .4rem;	color: #333; padding:0 .15rem;}
	.list-box.list-01 .list .con .title h2{font-size: .3rem; height: 3em; font-weight: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.list-box.list-01 .list .con .l-i{display: none;}
	
	
	.list-box.list-box-02 .list{border-bottom: 1px dashed #ccc; padding: .25rem; overflow: hidden;}
	.list-box.list-box-02 .list a{display: flex; align-items: center;}
	.list-box.list-box-02 .list .pic{transition: all 0.2s ease-in-out; width: 1.8rem; display: inline-block; position: relative; vertical-align: middle; z-index: 2; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3); border-radius: .2rem;}
	.list-box.list-box-02 .list .pic img{display: block; width: 100%; height: 1.8rem; object-fit: cover;}
	.list-box.list-box-02 .list .con{display: inline-block; vertical-align: middle; padding-left: .3rem;}
	.list-box.list-box-02 .list .con .title{font-size: .36rem;}
	.list-box.list-box-02 .list .con .sub-t{font-size: .28rem;}
	
	.list-box.list-box-03{margin: 0 -1%; padding: .3rem .25rem; display: flex; flex-wrap: wrap;}
	.list-box.list-box-03 .list{float: left; margin: 0 1.5%; width: 47%; margin-bottom: .4rem;}
	.list-box.list-box-03 .list a{display: block;}
	.list-box.list-box-03 .list .pic{position: relative;overflow: hidden; transition: all 0.2s ease-in-out;}
	.list-box.list-box-03 .list .pic img{display: block; width: 100%; box-sizing: border-box; height: 4.6rem; border: 1px solid #f1f1f1; transition: all 0.2s ease-in-out;}
	.list-box.list-box-03 .list a:hover .pic img{border: 1px solid #ff7d7d;}
	.list-box.list-box-03 .list .title{font-size: 16px; line-height: 20px;	color: #333; padding: 10px 0;}
	.list-box.list-box-03 .list .title h2{font-size: 14px; font-weight: normal;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.list-box.list-box-03 .list a:hover .title h2{color: #ff7d7d;}
	.list-box.list-box-03 .list .list-info{display: flex; justify-content: space-between; align-items: center;}
	.list-box.list-box-03 .list .list-info .star{color: #ef4a4b; font-size: 18px; margin: 0 -5px 0 -2px; display: inline-block;}
	.list-box.list-box-03 .list .list-info .down{font-size: 12px; color: #888;}
	
	/* 04 */
	.list-box.list-box-04{margin: .3rem;}
	.list-box.list-box-04 .list{padding: .1rem 0; position: relative;}
	.list-box.list-box-04 .list a{display: flex; overflow: hidden; align-items: center; justify-content: space-between;}
	.list-box.list-box-04 .list .title{ display: flex; flex: 1;}
	.list-box.list-box-04 .list .title h2{padding: 0 ;  font-size: 16px; font-weight: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; text-overflow:ellipsis;}
	.list-box.list-box-04 .list .sub-t{color: #888; position: relative; right: 0; font-size: 12px; top: 0;} 
	.list-box.list-box-04 .list:nth-child(5n){
        border-bottom:1px solid #ccc;
        padding-bottom:20px;
        margin-bottom:10px;
    }


	
	.detail .right-box{width: 404px; float: right; display: none;}
	.detail .right-box .courses-info{background-color: #ffebeb; 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: #ffebeb; 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%;}
	
}