.cont-b .nav{
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom:1px solid #eee;
}
.cont-b .nav ul{
  display: flex;
  flex-direction: row;
}
.cont-b .nav ul li a{
	color:#333;
}
.cont-b .nav ul li{
  padding: 5px 15px;
  border-right: 1px solid #ddd;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.cont-b .nav ul li:hover{
  background: #169bd5;
  color: #fff;
}
.cont-b .nav ul li:hover a{
  background: #169bd5;
  color: #fff;
}
.cont-b .nav ul li:last-child{
  border-right: none;
}
.cont-b .nav div {
  display: flex;
}
.cont-b .nav div input{
  border:1px solid #ddd;
  padding: 7px 20px;
  box-sizing: border-box;
}
.cont-b .nav div span{
  padding: 8px 20px;
  background:#169bd5;
  color: #fff;
}
.cont-b .cont-c ul{
  overflow: hidden;
  padding-right: 15px;
  padding-bottom: 15px;
}
.cont-b .cont-c ul li{
  float: left;
  width: 25%;
  box-sizing: border-box;
  padding: 15px 0 0 15px;
}
.cont-b .cont-c ul li .out{
  position: relative;
}
.cont-b .cont-c ul li .out:hover >.bg{
  display: flex;
}
.cont-b .cont-c ul li .out .bg{
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom: 0;
  background:rgba(0,0,0,.4);
  display:none;
  justify-content: center;
  align-items: center;
  height:145px;
  color: #fff;
}
.cont-b .cont-c ul li .out .bg a{
  padding: 5px 20px;
  background:#004eb3;
  border-radius: 4px;
  color: #fff;
}
.cont-b .cont-c ul li .out{
   border:1px solid #ddd;
   padding: 10px;
     box-sizing: border-box;
}
.cont-b .cont-c ul li .out div{
  position: relative;
  overflow: hidden;
}
.cont-b .cont-c ul li img{
  width: 100%;
  height: 130px
}
.cont-b .cont-c ul li .out div .icon-b{
 position: absolute;
    background: red;
    left: -30px;
    top: -10px;
    width: 88px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg);
    color: #fff;
}
.cont-b .cont-c ul li .out div .icon-c{
 position: absolute;
    background: #169bd5;
    left: -30px;
    top: -10px;
    width: 88px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    transform: rotate(315deg);
    color: #fff;
}
.cont-b .cont-c ul li .out div p{
  display: flex;
  justify-content: space-between;
}
.cont-b .cont-c ul li .out div p.tt{
  display: flex;
  justify-content: space-between;
   overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cont-b .cont-c ul li .out div p .cc{
  color: red;
}


.content{
  background: #fff;
}
.content .line{
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
.content .line span{
  position: relative;
  display: inline-block;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #cccccc
}
.content .line span i{
  position: absolute;
 height: 10px;
 left: 0;
 top: 0;
 border-radius: 5px;
 background: #169bd5
}
.content .left-l{
  /* width: 60%; */
  border-right: 1px solid #eee;
}
.content .left-l h3{
  font-size: 18px;
  padding: 20px 0;
}
.content .left-l img{
  width: 90%;
}
.content .left-l,.content .right-r{
  padding: 30px;
  box-sizing: border-box;
}
.content .left-l,.content .right-r a{
 color: #33A5CA;
}
.content .left-l p{
  display: flex;
  flex-direction: row;
  padding: 5px 0;
  font-size: 1.4rem;
}
.content .left-l p .red{
  color: red;
}
.content .right-r ul li{
	padding: 10px 0;
	display: flex;
	flex-direction: row;
	cursor: pointer;
	position:relative;
	font-size: 1.4rem;
}

.content .right-r ul li em{
    position: absolute;
    right: 0;
}
.content .right-r ul li:hover{
 color: red;
}
.content .right-r ul li i{
	padding-right: 26px;
	background: url(../img/u827.png) no-repeat;
	
	transform:rotate(-93deg);
-ms-transform:rotate(-93deg); 	/* IE 9 */
-moz-transform:rotate(-93deg);
    margin-top: -7px;
}
.buy{
	    box-shadow: none!important;
		background: #004EB3;
		padding: 0 10px;
    color: #fff;
    cursor: pointer;
	/* width: 120px; */
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border: none;
	    margin-left: 10px;
}

.coursePreview{}
.coursePreview .flexbox{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.coursePreview .poster{
  width: 38%;
  height: 200px;
}
.coursePreview .poster img{
  width: 100%;
}
.left-l-r{
  width: 60%;
}
.marginT15{
  margin-top: 15px;
}