﻿    
.prettycategory {
    width: 100%;
    margin-top: 10px;
}

    .prettycategory h3 {
        display: inline-block;
        font-size: 18px;
        font-weight: 300;
        color: #333;
        margin: 0;
        margin-right: 40px;
    }

    .prettycategory span {
        display: inline-block;
        cursor: pointer;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        padding: 0 20px;
        text-align: center;
        color: #666666;
        border-radius: 16px;
        margin: 0 12px 5px 0;
    }

        .prettycategory span.active {
            background-color: #007cff;
            color: #fff;
        }




.prettycourse {
    margin-top: 5px;
    padding: 0 0px;
}

    .prettycourse h3 {
        margin-bottom: 16px;
        margin-left: 0px;
        font-size: 28px;
    }

    .prettycourse .item:first-child, .prettycourse .item:nth-child(2), .prettycourse .item:nth-child(3), .prettycourse .item:nth-child(4), .prettycourse .item:nth-child(5), .prettycourse .item:nth-child(6) {
        display: block;
    }

    .prettycourse .item a {
        display: block;
        margin-bottom: 24px;
        -webkit-transition: margin-top .2s,padding-bottom .2s;
        transition: margin-top .2s,padding-bottom .2s;
    }


    .prettycourse a {
        text-decoration: none;
    }

    .prettycourse .item a .thumbnail {
        position: relative;
        overflow: hidden;
        margin-bottom: 0;
        -webkit-transition: -webkit-box-shadow 1s;
        transition: -webkit-box-shadow 1s;
        transition: box-shadow 1s;
        transition: box-shadow 1s,-webkit-box-shadow 1s;
        -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    }

        .prettycourse .item a .thumbnail:hover {
            -webkit-box-shadow: 0px 3px 5px 0px rgba(255, 102, 0, 0.5);
            -moz-box-shadow: 0px 3px 5px 0px rgba(255, 102, 0, 0.5);
            box-shadow: 0px 3px 5px 0px rgba(255, 102, 0, 0.5);
        }




    .prettycourse .item-image {
        padding-top: 56.25%;
        height: 0;
        overflow: hidden;
        position: relative;
    }

        .prettycourse .item-image .play {
            background: url(/Styles/images/ico_play.png) no-repeat;
            background-position: 0px 0px; /*对应小图标的坐标*/
            width: 60px;
            height: 60px;
            position: absolute;
            left: 50%;
            margin-left: -30px;
            top: 50%;
            margin-top: -30px;
        }

     

        .prettycourse .item-image span.time {
            position: absolute;
            right: 5px;
            bottom: 5px;
            background: rgba(0,0,0,0.5);
            border-radius: 40px;
            padding-left: 3px;
            color: #fff;
            padding-right: 3px;
            font-size: 12px;
        }

        .prettycourse .item-image span.lock {
            position: absolute;
            right: 5px;
            top: 5px;
        }

        .prettycourse .item-image > div {
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
        }

    .prettycourse .item-body {
        padding: 20px 12px 16px;
        height:135px;
    }

    .prettycourse .item-title {
        font-size: 16px;
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #333;
        font-weight: 500;
    }

    .prettycourse .item-desc {
        color: #666;
      text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp:3;
  -webkit-box-orient: vertical;
    }

    .prettycourse .item-footer {
        position: relative;
        color: #999;
        margin-bottom: 20px;
        height: inherit;
        overflow: hidden;
        zoom: 1;
    }

        .prettycourse .item-footer .item-footer-orgname-box {
            padding-left: 37px;
        }

        .prettycourse .item-footer .item-footer-count, .prettycourse .item-footer .item-footer-orgname-box {
            position: relative;
            float: left;
            text-overflow: ellipsis;
            word-break: keep-all;
            overflow: hidden;
            height: 20px;
            line-height: 20px;
        }

    .prettycourse .item-footer--avatar {
        position: absolute;
        left: 12px;
        top: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        overflow: hidden;
    }

        .prettycourse .item-footer--avatar img {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
        }

    .prettycourse .item-footer .item-footer-count {
        padding-left: 0;
        padding-right: 16px;
    }

    .prettycourse .item-footer .item-footer-count, .prettycourse .item-footer .item-footer-orgname-box {
        position: relative;
        float: left;
        text-overflow: ellipsis;
        word-break: keep-all;
        overflow: hidden;
        height: 20px;
        line-height: 20px;
    }


.news-category li {
    padding:8px 0 8px 0;
     border-right:4px solid #fff;
       margin-right:-20px;
}

    .news-category li a {
        font-size:16px;
        color:#666666;
    }

    .news-category li:hover,.news-category li.active {
        border-right:4px solid #007cff;
        margin-right:-20px;
    }