body,html{min-height: 100%; height: 100%;}
.classifyPage{height: 100%; margin-top: 3.125rem; }
.courseTypeNav{position: relative; height: 2.9375rem; margin-top: 5.325rem;}
.courseTypeNav .toBeFixed{
  position: fixed; 
  width: 100%; 
  z-index: 1;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 640px;}
.selectType_box{position: relative; z-index: 1;
width: 100%;
/* overflow: hidden; */
overflow-x: auto;
}
.selectType{ 
  background: #FFF; 
   height: 2.8125rem; 
   line-height: 2.8125rem; 
   border-top: 1px solid #eee; 
   /* padding:0 0.625rem; */
    padding-left: 0; 
    border-bottom: 1px solid #eee;
  display: flex;
  width: 155%;
  }
.selectType li{
  /* border-right: 1px solid #eee;  */
  cursor: pointer;color: #333;
padding: 0 1.2rem;
float: left; }
.selectType li .title{position: relative; padding: 0 0.3125rem; height: 2.8125rem;}
.selectType li .title span{font-size: 0.875rem; display: inline-block; text-overflow:ellipsis; white-space:nowrap; overflow: hidden; width: 87%; text-align: center;}
.selectType li .title .icon-xiangxia{font-size: 12px; position: absolute; right: 5px; top: 2px;}
.selectType_content{position: fixed; width: 100%; background: #FFF; top: 8.0625rem; border-bottom: 1px solid #eee; box-shadow: 0 0 7px 3px rgba(0,0,0,.05); display: none;left: 0;right: 0;margin: auto;max-width: 640px;}
.selectType_content.show{display: block;}
.selectType_content ul{display: flex; flex-wrap: wrap;align-content: flex-start;}
.selectType_content ul li{flex:0 0 20%; text-align: center; height: 2.8125rem; line-height: 2.8125rem; font-size: 0.75rem; cursor: pointer; padding: 0 5px;}
.selectType_content ul li > a{color: #7d7d7d; display:block;}
.selectType_content ul li > a.active{color: #f01616;}

.course-box{padding-bottom: 1rem; padding-top: 0.5rem;}
.professionCourses-show li{padding:.9375rem; padding-bottom: 0;}
.professionCourses-show li a{display: flex; flex-flow:row nowrap; height: 100%;-webkit-box-direction:normal; -webkit-box-orient:horizontal; -ms-flex-flow:row nowrap; -moz-box-direction:normal;}
.professionCourses-show li a > div{flex:1;-webkit-box-flex:1;-ms-flex:1;}
.professionCourses-show li a .professionCourses-show-left{margin-right: .75rem; flex: 0 0 40%; position: relative;}
.livestatus{position: absolute; left: 0; top: 0; background: rgba(0,0,0,.3); font-size: 0.75rem; color: #FFF; padding: 0.1875rem;}
.dot{font-size: 0.625rem; color: #eb6100;}

.professionCourses-show li a .professionCourses-show-left img{width: 100%; }
.professionCourses-show li a .professionCourses-show-right{overflow: hidden; }
.professionCourses-show li a .professionCourses-show-right .course-Name{font-size: .9375rem; white-space: nowrap; overflow:hidden;text-overflow:ellipsis; color: #333;}
.multi-no-wrap{display: -webkit-box; text-overflow:ellipsis; -webkit-box-orient:vertical; }
.professionCourses-show li a .professionCourses-show-right .courseDescription{ color: #666; font-size: .75rem; height: 1.5rem; -webkit-line-clamp:2; line-height: 1.5rem; display: flex; overflow: hidden;}
.courseDescription > div{flex:1;-webkit-box-flex:1;-ms-flex:1; }
.status{color: #eb6100; font-size: 0.875rem; height: 1.75rem; -webkit-line-clamp:2; line-height: 1.75rem; word-break:break-all; word-wrap:break-word; overflow: hidden; margin-top: 0.1875rem; display: flex;}
.status span{overflow: hidden; height: 1.75rem;  flex:1;}
.status .icon-shijian{flex:0 0 15px; font-size: 0.75rem; }
.status .icon-shipinzhibo{flex:0 0 15px;font-size: 0.75rem;}
.status .timelong{color: #666;}
.statuslong .icon-shijian{color: #666;}
.status .play-living{ flex:0 0 20px; transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s; }
.status .play-living:before {
          content: "";
          background: url(../images/icon-play-active2.gif);
          width: 13px;
          display: inline-block;
          font-size: 0;
          text-indent: -9999em;
          vertical-align: -1px;
          height: 13px;
          margin-right: 4px;
        }
.status .play-living:before {
  background: url(../images/icon-play-active2.png) no-repeat;
  background: url(../images/icon-play2.gif) \9;
  vertical-align: -2px;
  margin-right: 1px;
}
@media screen and (min-width: 0px) {
 .status .play-living:before {
    background: url(../images/icon-play-active2.png) no-repeat;
    -webkit-animation: living 0.52s steps(1, start) infinite;
            animation: living 0.52s steps(1, start) infinite;
  }
}
@keyframes living {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -13px 0;
  }
  50% {
    background-position: -26px 0;
  }
  75% {
    background-position: -39px 0;
  }
}
@-webkit-keyframes living {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -13px 0;
  }
  50% {
    background-position: -26px 0;
  }
  75% {
    background-position: -39px 0;
  }
}
.professionCourses-show li a .professionCourses-show-right .countAndMoney {float: right; font-size: .75rem; color: #666;}
.professionCourses-show li a .professionCourses-show-right .countAndMoney .money{float: left; font-size: .75rem; color: #eb6100;}
.sum-people .icon-yonghu{font-size: 0.8125rem; display: inline-block;}
.empty-box{text-align: center; padding-top: 30%;}
.empty-img > img{width: 2.6875rem; height: 2.6875rem;}
.empty-text{font-size: 12px; color: #666; padding-top: 0.625rem;}