#container{ width: 100%; min-height: calc(100% - 308px); }
.detail .head-box{ background-color: #fff; padding: 20px 0; }
.detail .head-box .type{ padding: 18px 0; border-bottom: 1px solid #eee; }
/*.detail .head-box .type:last-child{ border-bottom: none; }*/
.detail .head-box .type .type-title{ font-size: 14px; font-weight: bold; line-height: 20px; padding-right: 10px; }
.detail .head-box .type .type-number{ font-size: 14px; line-height: 20px; color: #f89b38; padding-right: 20px; }

.detail .head-box .type .type-name-box{ height: 20px; overflow: hidden; }
.detail .head-box .type .type-name{ float: left; font-size: 14px; line-height: 20px; margin-right: 20px; }
.detail .head-box .type .type-name:hover,
.detail .head-box .type .type-name.active{ color: #f89b38; }
.detail .head-box .type .slideUp{ font-size: 14px; line-height: 20px; color: #999; }
.detail .head-box .type .slideUp.active{ color: #f89b38; }
.detail .head-box .type .slideUp .iconfont{ font-size: 12px; line-height: 20px;}
.detail .head-box .type .nav{ position: relative; height: 40px; margin-right: 20px; }
.detail .head-box .type .nav .type-name{ margin-right: 0; }
.detail .head-box .type .nav .iconfont{ font-size: 12px; }
.detail .head-box .type .nav:hover,.detail .head-box .type .nav.active{ color: #f89b38; border-bottom: 1px solid #f89b38; }
.detail .head-box .type .sub-nav{ display: none; position: absolute; left: 0; top: 40px; width: 300px; }
.detail .head-box .type .sub-nav .type-name{ margin-right: 30px; line-height: 40px; }
.detail .head-box .mooclevel2bg{ display: none; padding-left: 70px; }
.detail .head-box .level2bg{ display: none; padding-left: 70px; }
.detail .head-box .level3bg{ display: none; padding-left: 70px; }

.detail .course-box{ padding: 30px 0; }
.detail .course-box .nav-box{ width: 100%; height: 40px; background-color: #fff; border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
.detail .course-box .h_search{ top: 10px; right: 10px; }
.detail .course-box .h_search input{ box-shadow: none; }
.detail .course-box .nav{ padding: 0 18px; line-height: 40px; font-size: 16px; }
.detail .course-box .nav.active,.detail .course-box .nav:hover{ background-color: #f89b38; color: #fff; }

.h_search.form-group{
    width:200px;
    height:24px;
    margin:0;
    display: inline-block;
    position: relative;
    top: 8px;
    right: 10px;
}
.h_search.form-group label{
    position: absolute;
}
.h_search.form-group input{
    width:200px;
    height:24px;
    line-height: 24px;
    border-radius:4px;
    margin: 0;
    background-color: #fff;
    border:1px solid #ccc;
    padding:0 35px 0 12px;
    color:#666;
    outline: none;
    text-align: left;
    font-size: 12px;
    /*position: absolute;*/
}
.h_search.form-group span.form-control-feedback{
    width:24px;
    height:22px;
    font-size: 12px;
    line-height: 22px;
    color:#000;
    cursor: pointer;
    position: absolute;
    top:1px;
    right: 0;
}
.h_search.has-success .form-control:focus{
    border-color: rgba(248,155,56,.3);
    -webkit-box-shadow: inset 0 1px 1px rgba(248, 155, 56, .075), 0 0 6px #f89b38;
    -moz-box-shadow: inset 0 1px 1px rgba(248, 155, 56, .075), 0 0 6px #f89b38;
    box-shadow: inset 0 1px 1px rgba(248, 155, 56, .075), 0 0 6px #f89b38;
}

.detail .course-box .item-box{ margin:  -10px; padding-bottom: 30px; }
.detail .course-box .item{ width: 280px; background-color: #fff; border: 1px solid transparent; box-shadow: 0 0 20px 0 rgba(114, 114, 114, 0.2);  border-radius: 4px; margin:12px; transition: all ease 300ms; }
.detail .course-box .item:hover{ transform: translate(0,-6px); border: 1px solid #f89b38; box-shadow:0 0 15px 0 rgba( 248, 155, 56, .8); }
.detail .course-box .item .item-img{ display: block; width: 100%; height: 162px; background-color: #ccc; }
.detail .course-box .item .item-img img{ width: 100%; height: 100%; }

.detail .course-box .item .item-name-box{ position: relative; display: block; width: 100%; height: 80px; }
.detail .course-box .item .item-name{ position: absolute; top: 50%; left: 0; transform: translate(0,-50%); width: 100%; max-height: 52px; padding: 0 30px; text-align: center; font-size: 18px; line-height: 26px;  -webkit-line-clamp: 2; }
.detail .course-box .item .item-name:hover{ color: #f89b38; }