body {



	background-color: #eff5ff



}



.head-pic {



	width: 100%;



	height: 480px;



	background: url(../img/teaching-top-bg.jpg) no-repeat center center



}



.head-pic .topfont {



	width: 100%;



	padding-top: 179px;



	position: relative;



	text-align: center



}



.head-pic .topfont h4 {



	font-size: 48px;



	color: #fff;



	opacity: .3;



	text-align: center;



	font-weight: normal;



	font-family: htop;



	text-transform: uppercase;



}



.head-pic .topfont h3 {



	font-size: 38px;



	color: #fff;



	margin-bottom: 25px;



	text-align: center;



	font-weight: 400;



	position: absolute;



	width:100%;



	text-align:center;



	top: 197px



}



.head-pic p {



	width: 350px;



	line-height: 30px;



	max-height: 60px;



	overflow: hidden;



	margin: 0 auto;



	font-size: 16px;



	color: #fff;



	text-align: center;



	margin-top: 31px



}



.bg-wrap {



	width: 1200px;



	margin: 0 auto;



	padding-bottom: 77px



}



.wrap {



	width: 100%;



	max-width: 1180px;



	position: relative;



	top: -43px;



	overflow: hidden;



	margin: 0 auto



}



.wrap .left {



	width: 24%;



	float: left;



	overflow: hidden;



	max-width: 280px

}



.wrap .left>ul{}
.wrap .left>ul>li>strong {
    width: 4px;
    height: 100%;
    background: #4381e8;
    position: absolute;

    transition: all .5s;
    -webkit-transition: all .5s;
    z-index: 9;
    box-sizing: border-box;
    left:-1px;
}
.wrap .left>ul>li>i {
    position: relative;
    float: right;
    font-style: normal;
    padding-right: 20px;
    display: inline-block;
    width: 11px;
    height: 11px;
    background: url(../img/icon-arrow.png) no-repeat center center;
    margin-top: 24px;
    z-index: 10;
}

.wrap .left>ul>li{    background-color: #fff;
    border: 1px solid #eee;position: relative;
    margin-bottom: 20px;}
.wrap .left>ul>li>a{
    padding: 18px 0;
    width: 65%;    position: relative;
    z-index: 10;
    display: inline-block;
    padding-left: 10%;}

.wrap .left>ul>.hoverS strong {
    width: 70%;
}
.wrap .left>ul>.clickS strong {
    width: 101%;
}
.wrap .left>ul>.clickS>a,.wrap .left>ul>.hoverS>a {
    color: #fff;
}
.wrap .left>ul>.clickS i {
    background: url(../img/a-icon-aroow.png) no-repeat center center;
}
.wrap .left>ul>li>i.djcd{background: url(../img/icon-jia.png) no-repeat center center;}
.wrap .left>ul>.clickS i.djcd{background: url(../img/icon-close.png) no-repeat center center;}

.wrap .left>ul>li>ul{    position: relative;
    z-index: 10;text-align: center;width: 101%;
    background-color: #fff;}
.wrap .left>ul>li>ul a{    padding: 18px 0;
    display: block;
    border-top: 1px solid #eee;}  
.wrap .left>ul>li>ul a:hover{background-color: #4381e8;color:#fff;}   
.wrap .left>ul>li>ul a.active{background-color: #4381e8;color:#fff;}  

.wrap .right {



	width: 77%;



	float: right;



	background-color: #fff;



	border: 1px solid #eee;



	overflow: hidden;



	border-radius: 4px;



	max-width: 890px



}



.wrap .right header {



	width: 100%;



	overflow: hidden;



	border-bottom: 1px solid #e4e4e4;



	height: auto;



	max-width: 822px;



	margin: 17px auto;



	padding-bottom: 10px;



	margin-bottom: 30px



}



.wrap .right header div.r-head {



	line-height: 50px;



	overflow: hidden



}



.pagination {



    width: 100%;



    max-width: 780px;



    margin: 0 auto;



    overflow: hidden;



    margin-top: 40px;



    text-align: center;



    padding-bottom: 60px;



}



.pagination ul {



        width: 100%;



        text-align: left;



    }







.pagination ul li {



        border: 1px solid #c9c9c9;



        display: inline-block;



        margin-top: 20px;



        cursor: pointer;



        text-align: center;



        line-height: 23px;



        background-color: #f8f8f8;



        border-radius: 3px;



        margin-left: 5px



    }







.pagination a {



        display: block;



        font-size: 12px;



        color: #717171;



        width: 100%;



        height: 100%;



        width: 26px;



        height: 25px



    }







.pagination a.current {



    background-color: #ffbc2e;



    color: #fff;



    }







.pagination a.next_page {



        width: 52px



    }



.pagination a.pre_page {



        width: 52px



    }







.pagination a:hover {



    background-color: #ffbc2e;



    color: #fff;



}







.wrap .right header div.r-head span {



	float: left;



	font-size: 26px;



	color: #333;



	font-weight: 400



}



.wrap .right header div.r-head ul {



	float: right



}



.wrap .right header div.r-head ul li {



	display: inline-block;



	width: 26px;



	height: 26px;



	margin-left: 10px;



	border: 1px solid #f0f0f0;



	line-height: 26px;



	text-align: center



}



.wrap .right header div.r-head ul li a {



	color: #a7a7a7



}



.wrap .right header div.r-head ul .choice {



	background: #ffbc2e



}



.wrap .right header div.r-head ul .choice a {



	color: #fff



}



.wrap .right .page {



	width: 100%;



	overflow: hidden;



	max-width: 822px;



	margin: 30px auto;



	font-size: 14px



}



.wrap .right .page a {



	display: block;



	width: 28px;



	height: 28px;



	text-align: center;



	line-height: 28px;



	color: #999;



	border: 1px solid #f0f0f0;



	float: left;



	margin-left: 15px;



	cursor: pointer



}



.wrap .right .page a.prev {



	margin-left: 0



}



.wrap .right .page a.current {



	background-color: #ffbc2e;



	color: #fff



}



.wrap .right .page a.next:hover, .wrap .right .page a.prev:hover {



	background-color: #ffbc2e;



	color: #fff



}



.tab-right {



	width: 100%;



	max-width: 822px;



	margin: 0 auto



}



.tab-right .right-box {



	display: none;



	width: 100%;



	overflow: hidden;



	margin-top: 20px;



	box-sizing: border-box;



}



.tab-right .right-box .right-top {



	width: 100%;



	overflow: hidden



}



.tab-right .right-box .right-top .top-left {



	width: 47%;



	float: left;



	max-width: 380px;



	position:relative;



}



.tab-right .right-box .right-top .top-left .img {



	width: 100%;



	height: 238px;



	background-size: cover;



	background-position: center;



	background-repeat: no-repeat;



	border: 1px solid #e4e4e4



}



.tab-right .right-box .right-top .top-left .time-number {



	overflow: hidden;



	width: 100%;



	margin-top: 21px;



	margin-bottom: 8px;



	color: #ccc



}



.tab-right .right-box .right-top .top-left .time-number span {



	font-size: 12px;



	color: #999



}



.tab-right .right-box .right-top .top-left .time-number span.t {



	float: left;



	line-height: 21px



}



.tab-right .right-box .right-top .top-left .time-number span.t i {



	margin-top: 1px;



	font-size: 18px;



	padding-left: 0



}



.tab-right .right-box .right-top .top-left .time-number span.x {



	float: right;



	display: inline-block;



	line-height: 16px



}



.tab-right .right-box .right-top .top-left .time-number span.x1 i {



	font-size: 30px



}



.tab-right .right-box .right-top .top-left .time-number span.x2 i {



	font-size: 14px



}



.tab-right .right-box .right-top .top-left .time-number i {



	float: left;



	padding: 0 10px



}



.tab-right .right-box .right-top .top-left h4 {



	line-height: 30px;



	max-height: 60px;



	display: -webkit-box;



	-webkit-box-orient: vertical;



	-webkit-line-clamp: 2;



	overflow: hidden;



	font-size: 16px;



	color: #273055;



	font-weight: 400



}



.tab-right .right-box .right-top .top-right {



	width: 51%;



	float: right;



	overflow: hidden;



	max-width: 399px



}



.tab-right .right-box .right-top .top-right ul li {



	overflow: hidden;



	margin-bottom: 31px;



	position:relative;



}



.tab-right .right-box .right-top .top-right ul li .pic {



	width: 50%;



	margin-right: 20px;



	border: 1px solid #e4e4e4;



	background-size: cover;



	background-repeat: no-repeat;



	background-position: center;



	max-width: 200px;



	height: 148px;



	float: left



}



.tab-right .right-box .right-top .top-right ul li span.timer {



	color: #999;



	font-size: 12px;



	line-height: 23px;



	display: block;



	height: 23px



}



.tab-right .right-box .right-top .top-right ul li span.timer i {



	margin-right: 11px;



	float: left;



	font-size: 18px



}



.tab-right .right-box .right-top .top-right ul li h4 {



	line-height: 30px;



	max-height: 60px;



	display: -webkit-box;



	-webkit-box-orient: vertical;



	-webkit-line-clamp: 2;



	overflow: hidden;



	margin-top: 15px;



	font-size: 16px;



	color: #333;



	max-width: 150px;



	float: left;



	font-weight: 400



}



.tab-right .right-box .right-top .top-right ul li .icon {



	margin-top: 25px;



	float: left



}



.tab-right .right-box .right-top .top-right ul li .icon span {



	display: inline-block;



	font-size: 12px;



	color: #999;



	line-height: 16px



}



.tab-right .right-box .right-top .top-right ul li .icon i {



	float: left;



	margin: 0 5px;



	font-size: 14px



}



.tab-right .right-box .right-top .top-right ul li .icon i.i2 {



	font-size: 30px;



	margin-bottom: 5px;



	float: left



}



.tab-right .right-box .right-bottom {



	width: 100%;



	overflow: hidden



}



.tab-right .right-box .right-bottom ul li {



	width: 100%;



	float: left;



	border-bottom: 1px dashed #e7e7e7;



	padding: 30px 0



}



.tab-right .right-box .right-bottom ul li>a {



	display: block;



	overflow: hidden;



}



.tab-right .right-box .right-bottom ul li .pic {



	width: 32px;



	height: 80px;



	float: left;



	max-width: 110px;



	margin-left: 30px;



	background-size: cover;



	background-position: center;



	background-repeat: no-repeat;



	line-height: 25px



}



.tab-right .right-box .right-bottom ul li .pic i {



	color: #999



}



.tab-right .right-box .right-bottom ul li .width32 {



	width: 32px



}



.tab-right .right-box .right-bottom ul li .width110 {



	width: 110px;



	margin-right: 20px



}



.tab-right .right-box .right-bottom ul li .width90 {



	width: 92%!important



}



.tab-right .right-box .right-bottom ul li .paddingbottom {



	padding-bottom: 10px



}



.tab-right .right-box .right-bottom ul li .height50 {



	height: 50px



}



.tab-right .right-box .right-bottom ul li .pic{



	line-height:38px;



}



.tab-right .right-box .right-bottom ul li h4{



	line-height:35px;



}



.tab-right .right-box .right-bottom ul li .icon {



	margin-top: 42px;



	padding-right:30px;



}



.tab-right .right-box .right-bottom ul li .icon span {



	font-size: 12px;



	color: #999



}



.tab-right .right-box .right-bottom ul li .icon span.t {



	float: left;



	line-height: 21px



}



.tab-right .right-box .right-bottom ul li .icon span.t i {



	margin-top: 1px;



	font-size: 18px;



	padding-left: 0



}



.tab-right .right-box .right-bottom ul li .icon span.x {



	float: right;



	display: inline-block;



	line-height: 16px



}



.tab-right .right-box .right-bottom ul li .icon span.x1 i {



	font-size: 30px



}



.tab-right .right-box .right-bottom ul li .icon span.x2 {



	font-size: 12px;



	display: inline-block;



	width: 60px



}



.tab-right .right-box .right-bottom ul li .icon span.x2 i {



	font-size: 14px



}



.tab-right .right-box .right-bottom ul li .icon i {



	float: left;



	padding: 0 10px



}



.tab-right .right-box .right-bottom ul li h4 {



	width: width: calc( 100% - 160px);



	float: left;



	max-height: 30px;



	display: -webkit-box;



	-webkit-box-orient: vertical;



	-webkit-line-clamp: 1;



	overflow: hidden;



	font-size: 16px;



	color: #666;



	font-weight: 400



}



.tab-right .right-box .right-bottom ul li:last-child {



	border-bottom: 1px solid #e4e4e4



}



.tab-right .right-box .right-bottom ul li:hover {



	background-color: #f2f7ff



}

.tab-right .right-box .right-bottom ul li:hover h4{

	color:#333;

}

.tab-right .right-box .right-bottom ul li:hover .pic i {



	color: #ffbc2e



}



.tab-right .right-box .line {



	height: 1px;



	background-color: #e4e4e4;



	overflow: hidden;



	clear: both;



	width: 100%;



	margin-top: 28px



}







@media screen and (max-width: 1200px) {



	.bg-wrap{width:1024px;}



	.wrap .left{width:23%;}



	.wrap .right{width:75%;}



	.wrap .right header,.right-box{padding:0 20px;width:auto;}



	.tab-right .right-box .right-bottom ul li .icon{width: calc( 100% - 160px);}



}



@media screen and (max-width: 1080px) {



	.bg-wrap{width:990px;}



}



@media screen and (max-width: 992px) {



	.head-pic h3{font-size:30px;}



	.bg-wrap{width:100%;}



	.wrap .left{width:100%;    max-width: inherit;}



	.wrap .right{width:98% ;max-width: inherit;margin-right: calc(1% - 1px);    margin-top: 40px;}



	.wrap .left>ul>li{float:left;width:48%;margin:4px calc(1% - 1px);}



	.tab-right{max-width: none;overflow: hidden;}



	.tab-right .right-box{width:auto;}



	.tab-right .right-box .right-top .top-left{    max-width: 410px;}



	.tab-right .right-box .right-top .top-right{width:52%; max-width:none; }



}



@media screen and (max-width: 832px) {



	.tab-right .right-box .right-top .top-right ul li .pic{margin-right: 10px;}



	.tab-right .right-box .right-top .top-right ul li h4{max-width: 160px;}



}



@media only screen and (max-width:768px){



	.head-pic .topfont h3{



        top:187px;



        font-size:30px;



    }



    .head-pic .topfont h4{



        font-size:26px;



    }



}



@media screen and (max-width: 732px) {



	.tab-right .right-box .right-top .top-right ul li .pic{margin-right: 10px;}



	.tab-right .right-box .right-top .top-right ul li h4{max-width: 130px;}



	.tab-right .right-box .right-bottom ul li .pic{margin-left:0px;}



}







@media screen and (max-width: 658px) {



	.head-pic h3{font-size:26px;}



	.head-pic p{font-size:14px;}



	.tab-right .right-box .right-top .top-right ul li h4{font-size:14px;    line-height: 24px;}



	.tab-right .right-box .right-bottom ul li h4{font-size:14px; }



	.bg-wrap{padding-bottom: 30px;}



	.wrap .right{    margin-top: 30px;}



	.wrap .right header div.r-head span,.right-box h2{font-size:20px;}



	.wrap .left>ul>li span{    padding-left: 40px;}



	.right-box .page .zan{width:80px;height:80px;}



	.right-box .page span{width:120px;margin-top: 40px;}



	.tab-right .right-box .right-top .top-left{width:100%;max-width: none;}



	.tab-right .right-box .right-top .top-right{width:100%;margin-top:20px;}



	.tab-right .right-box .right-top .top-left h4{font-size:14px;line-height: 24px;}



	.tab-right .right-box{    padding: 0 10px;}



	.tab-right .right-box .right-bottom ul li .icon span.x2{width:60px;}











}



@media screen and (max-width: 460px) {

	.pagination{

		padding-bottom:20px;

		margin-top:0;

	}

	.wrap .right header{

		margin:0;

	}

	.tab-right .right-box .right-bottom ul li .pic{

		line-height:30px;

	}

	.tab-right .right-box .right-top .top-right ul li{

		margin-bottom:20px;

	}

	.tab-right .right-box .line{

		margin-top:0;

	}

	.tab-right .right-box .right-bottom ul li{

		padding: 10px 0;

	}

	.head-pic h3{font-size:20px;}



	.head-pic p{font-size:12px;}



	.bg-wrap{padding-bottom: 0px;}



	.wrap .right{    margin-top: 20px;}



	.wrap .right header div.r-head span,.right-box h2{font-size:16px;}



	.wrap .left>ul>li span{    padding-left: 30px;}



	.right-box .page .zan{width:60px;height:60px;    margin-left: -30px;}



	.right-box .page span{width:100px;margin-top: 40px;}



	.right-box .page .zan i {



	    font-size: 24px;



	    margin-top: 10px;



	}

	.tab-right .right-box .right-bottom ul li .icon{

		width:auto;

		margin-top:10px;

	}



	.tab-right .right-box .right-bottom ul li .icon span.x2{width:50px;}



	.tab-right .right-box .right-bottom ul li .icon i {float: left;padding: 0 5px;}



	.tab-right .right-box .right-bottom ul li h4 {float:none;margin-top:2px;line-height:30px;}



	.head-pic{



		height:350px;



	}



	.head-pic .topfont h3{



		font-size:24px;



		top:130px;



	}



	.head-pic .topfont h4{



		font-size:18px;



		width:80%;



		margin:0 auto;



	}



	.head-pic p{



		margin-top:20px;



	}



}



@media screen and (max-width: 400px) {



	.tab-right .right-box .right-bottom ul li .icon span.x{display: none;}



}