body {
    font-family: Microsoft YaHei,Helvetica Neue,Helvetica,STHeiTi,Arial,sans-serif;
    position: relative;
    color: #4D4F53;
    line-height:24px;
}

a {
    color: #000000;
}

a:hover {
    color: #ff7473;
    text-decoration: none;
}

a:focus {
    color: #34314c;
    text-decoration: none;
}

/* -------- common -------- */
.path-nav {
    margin-top: 20px;
}

.path-nav .breadcrumb {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.path-nav .breadcrumb li {
    color: #989898;
}

/* ---------------- content-pages ---------------- */
.content-pages {
    margin-top: 2em;
}

.content-pages .pagination > .disabled > a, .content-pages .pagination > .disabled > a:hover, .content-pages .pagination > .disabled > a:focus {
    color: #989898;
    background-color: #ffffff;
    border-color: #f2f2f2;
}

.content-pages .pagination > li > a {
    color: #34314c;
    border: 1px solid #f2f2f2;
}

.content-pages .pagination > li > a:hover {
    background-color: #f2f2f2;
    border-color: #ddd;
}

.content-pages .pagination > .active > a, .content-pages .pagination > .active > a:hover, .content-pages .pagination > .active > a:focus {
    background-color: #47b8e0;
    border-color: #47b8e0;
}

.content-pages .pagination > .active > a {
    color: #ffffff;
}


.mod-title {
    border-bottom: 1px solid #eee;
    margin: 0 0 15px;
}

.mod-title h3 {
    display: inline-block;
    padding: 20px 0px 20px 42px;
    margin: 0 0 -2px 0;
    font-size: 20px;
    color: #333;
    line-height: 1;
    border-bottom: 2px solid #ffc952;
    background: url("../images/x-icon.png") no-repeat left 24px;
}


.item-thumb {
    margin: 10px 0;
    position: relative;
    background-color: #f2f2f2;
    overflow: hidden;
}

.item-thumb a {
    text-decoration: none;
}

.item-thumb:hover {
    background: #ffc952;
    color: #ffffff;
}

.item-thumb .item-imgbox {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    height: 150px;
    cursor: pointer;
    overflow: hidden;
}

.item-thumb .item-imgbox .plus {
    display: none;
}

.item-thumb .item-imgbox .shadow {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(33, 33, 33, 0.2);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.item-thumb:hover .item-imgbox .shadow {
    background: rgba(33, 33, 33, 0.5);
}

.item-thumb .item-conbox {
    padding: 12px 5px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -------- List -------- */

.list-main {
    background: #f7f7f7;
    overflow: hidden;
}

.list-banner {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 180px;
    width: 100%;
    position: relative;
    text-align: center;
    display: table;
}

.list-banner:before {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.5);
    content: '';
}

.list-banner h2 {
    font-size: 40px;
    font-weight: bold;
    position: relative;
    z-index: 3;
    color: #fff;
    letter-spacing: 8px;
    word-spacing: 8px;
    margin: 0;
    display: table-cell;
    vertical-align: middle;
}

.list-main .list-container {
    background: #ffffff;
    padding: 0;
    margin: 20px 0px 20px 0px;
    overflow: hidden;
}

.list-main .list-container .list-container-con {
    padding: 20px 20px 0;
    overflow: hidden;
}
.list-main .list-container .list-container-con .list-filter {
    margin: 0;
    overflow: hidden;
}
.list-main .list-container .list-container-con .list-filter dl {
    padding-left: 50px;
    margin: 0 0 20px 0;
    position: relative;
}
.list-main .list-container .list-container-con .list-filter dl dt {
    font-size: 14px;
    position: absolute;
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    left: 0px;
    top: 0;
    border-bottom: 1px solid #eee;
}
.list-main .list-container .list-container-con .list-filter dl dd {
    padding: 0 60px 0 15px;
    margin: 0;
    height: 40px;
    line-height: 40px;
    font-size: 0;
    overflow: hidden;
}
.list-main .list-container .list-container-con .list-filter dl dd a {
    font-size: 14px;
    width: 91px;
    height: 40px;
    overflow: hidden;
    display: inline-block;
    text-align: center;
}
.list-main .list-container .list-container-con .list-filter dl dd a:hover{
    color: #FBE308;
}
.list-main .list-container .list-container-con .list-filter dl dd a.on {
    color: #ffffff;
    background: #FBE308;
}
.list-main .list-container .list-container-con .list-catelist {
    margin: 0px 0 20px 0;
}

.list-main .list-container .list-container-con .list-catelist li {
    padding: 0 10px 0 0;
}

.list-main .list-container .list-container-con .list-catelist li a {
    font-size: 16px;
    padding: 8px 15px;
    color: #333333;
    background-color: #f2f2f2;
    display: block;
}

.list-main .list-container .list-container-con .list-catelist li a:hover {
    color: #ffffff;
    background-color: #FBE308;
}

.list-main .list-container .list-container-con .list-catelist li .am-active {
    color: #ffffff;
    background-color: #FBE308;
}

.list-container-con .media {
    margin-top: 0;
    padding: 20px 0;
    border-bottom: 1px solid #f2f2f2;
}

.list-container-con .media-left {
    padding-right: 20px;
}

.list-container-con .media-left .media-object {
    width: 246px;
    height: 152px;
}

.list-container-con .media .media-body .media-heading {
    font-size: 20px;
    margin-bottom: 15px;
}

.list-container-con .media .media-body .list-des {
    font-size: 14px;
    color: #989898;
    line-height: 1.8em;
}

.list-container-con .media .media-body .list-date {
    color: #989898;
    font-size: 12px;
}

.list-container-con .media .media-body .list-date a {
    color: #ff7473;
}

.list-container-con .list-item-thumb {
    overflow: hidden;
}

.list-container-con .list-item-thumb .item-thumb {
    margin: 0;
    position: relative;
    background-color: #f2f2f2;
    overflow: hidden;
}

.list-container-con .list-item-thumb .item-thumb .item-imgbox {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    height: 152px;
    cursor: pointer;
    overflow: hidden;
}

.list-container-con .list-item-thumb .item-thumb .item-imgbox .plus {
    display: none;
}

.item-thumb-video {
    background: #f0f0f0;
    display: block;
    width: 100%;
    position: relative;
}

.item-thumb-video img {
    width: 100%;
    height: 152px;
    vertical-align: top;
}

.vidBg, .vidTx {
    position: absolute;
    display: block;
}

.vidBg {
    background: url(../images/lisBg.png) repeat-x;
    _background: 0 0;
    height: 44px;
    bottom: 0;
    left: 0;
    width: 100%;
}

.vidTx {
    color: #fff;
    text-align: right;
    bottom: 4px;
    _bottom: 1px;
    right: 5px;
    font-size: 12px;
}

.vidacount {
    position: absolute;
    bottom: 3px;
    _bottom: 0;
    left: 7px;
    color: #fff;
    font-size: 12px;
}

.item-thumb-video-name {
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    word-wrap: break-word;
    margin: 8px 0 6px;
    font-size: 16px;
}

.item-thumb-video-info {
    color: #989898;
    font-size: 12px;
    margin-bottom: 20px;
}

/* -------- contents -------- */

.article-main {
    background: #f7f7f7;
    overflow: hidden;
}

.article-main .article-content {
    background: #ffffff;
    margin: 20px 0px 20px 0px;
    overflow: hidden;
}

.article-main .article-content .article-container-con {
    padding: 0px 40px 40px;
    overflow: hidden;
    color: #333333;
}

.article-container-con .article-title h1 {
    font-weight: bold;
    line-height: 1.8em;
    font-size: 28px;
    margin: 0 auto 20px;
    padding-top: 30px;
}

.article-container-con .article-title .article-tools {
    margin-bottom: 24px;
    font-size: 12px;
    color: #999;
    vertical-align: top;
}

.article-container-con .article-title .article-tools em {
    font-style: normal;
    display: inline-block;
    margin: 0 7px;
    line-height: 24px;
    font-size: 12px;
    vertical-align: middle;
    height: 24px;
}

.article-container-con .article {
    font-size: 16px;
    line-height: 30px;
    overflow: hidden;
}

.article-container-con .article p {
    height: auto;
    margin: 20px 0;
    overflow: visible;
    font: 16px/30px "Microsoft Yahei";
    word-break: break-all;
}

.article-container-con .article a {
    color: #ff7473;
    border-bottom: 1px dashed #ff7473;
}

.article-container-con .article img {
    display: block;
    vertical-align: middle;
    margin: 0 auto;
    max-width: 100%;
    border: none;
}

.previous-page {
    padding: 15px 0;
}

.previous-page p {
    color: #989898;
}

.article-tag {
    margin: 15px 0px;
}

.article-tag i {
    margin-right: 5px;
    font-size: 16px;
    color: rgb(202, 202, 202);
}

.article-tag a {
    color: #47b8e0;
}

.article-tag a:after {
    content: "/";
    padding-left: 5px;
    padding-right: 5px;
    color: #ccc;
}

.article-tag a:last-child:after {
    content: "";
}
.no-row{
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden
}

.main-preview-player {
    padding: 0px;
    background-color: #ffffff;
    overflow: hidden;
}
.video-js {
    width: 100%;
    height: 528px;
}
.video-dimensions {
    width: 100%;
}
.videoArea-leftWrap {
    position: relative;
    width: 840px;
    background-color: #1f1f1f;
    height: 528px;
    overflow: hidden;
}
.videoArea-rightWrap {
    position: relative;
    width: 300px;
    height: 528px;
    padding-right: 2px;
    padding-left: 15px;
    background-color: #1f1f1f;
    overflow: hidden;
}
.playList-title {
    padding: 12px 12px 13px 0px;
    border-bottom: 2px solid #272727;
}
.playList-title h2 {
    margin: 0;
    line-height: 24px;
    height: 24px;
    font-size: 14px;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.vjs-playlist-now-playing-text, .vjs-up-next-text {
    display: none;
}

.vjs-playlist-vertical {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

.videoList {
    color: #fff;
    list-style-type: none;
    height: 477px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.videoList .vjs-playlist-item-list {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none
}

.videoList .vjs-playlist-item-list .vjs-playlist-item {
    position: relative;
    float: left;
    border-right: 1px solid #1f1f1f;
    border-bottom: 1px solid #1f1f1f;
    font-size: 16px;
    font-family: "Arial";
}

.videoList .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-name {
    display: block;
    width: 43px;
    height: 43px;
    background-color: #383838;
    font-style: normal;
    color: #a9a9a9;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
    border: 2px solid #2f2f2f;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.videoList .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-name:hover {
    border: 2px solid #FBE308;
    background-color: #272728;
    color: #FBE308;
}

.videoList .vjs-playlist-item-list .vjs-selected .vjs-playlist-name {
    border: 2px solid #FBE308;
    background-color: #272728;
    color: #FBE308;
}

.vjs-playlist .vjs-selected {
    background-color: #141a21
}


/* -------- Footer -------- */
.footer{
    background-color: #34314c;
    padding: 3em 0;
    color: #a4a4a4;
    font-size: 12px;
}
.footer a{
    color: #c8c8c8;
    opacity: 0.7;
}
.footer a:hover{
    color: #ff7473;
}
.footer p{
    margin: 0;
}
.footer .copy-img{
    text-align: center;
    float: right;
}
.footer .copy-img li{
    padding:0 10px;
}
.footer .copy-img img {
    width: 100px;
}
.footer .copy-img p{
    margin-top: 3px;
}
@media screen and (max-width: 768px) {
    .article-banner {
        height: 140px;
    }

    .article-banner-blank {
        padding-top: 50px;
    }

    .path-nav .breadcrumb {
        margin: 10px 0;
    }

    .article-content, .list-container {
        padding: 0 1em;
        margin: 0;
    }

    .article-content h1 {
        font-size: 20px;
    }

    .article-tools {
        margin: 0;
    }

    .col-0-gutter {
        padding-left: 0;
        padding-right: 0;
    }

    .video-player-dimensions {
        width: 100%;
        height: 210px;
    }

    .list-main {
        background: #ffffff;
    }

    .list-main .list-container .list-container-con {
        padding: 0px 0px 0;
    }

    .list-main .list-container .list-container-con .list-catelist {
        margin: 0;
    }

    .list-main .list-container .list-container-con .list-catelist li {
        padding: 0 10px 0 0;
    }

    .list-main .list-container .list-container-con .list-catelist li a {
        padding: 6px 10px;
        margin-bottom: 10px;
        font-size: 13px;
        text-align: center;
    }

    .list-container-con .media {
        padding: 12px 0;
    }

    .list-container-con .media-left .media-object {
        width: 100px;
        height: 67px;
    }

    .list-container-con .media .media-body .media-heading {
        font-size: 17px;
        line-height: 24px;
        height: 48px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: -2px;
        margin-bottom: 5px;
    }
    .list-container-con .media .media-body h4 {
        font-weight: 400;
    }
    .list-container-con .media .media-body .list-date {
        margin: 0;
    }
    .article-main .article-content .article-container-con {
        padding: 0px 0px 20px;
    }
    .item-thumb-video img {
        height: 100px;
    }

    .main-preview-player {
        padding: 0px;
    }
    .no-row{
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 0;
        margin-bottom: 0;
    }
    .videoArea-leftWrap,.videoArea-rightWrap{
        width:100%;
        height: 210px;
    }
    .videoArea-rightWrap{
        height: 100%;
        background-color: #ffffff;
    }
    .playList-title h2 {
        color: #000;
        font-size:16px;
    }
    .playList-title {
        border-bottom: 1px solid #f2f2f2;
    }
    .videoList{
        height: 100%;
        overflow-x: auto;
    }
    .video-js {
        width: 100%;
        height: 210px;
    }
    .videoList .vjs-playlist-item-list .vjs-playlist-item {
        border-right: none;
        border-bottom:none;
    }
    .videoList .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-name {
        background-color: #f2f2f2;
        color: #000000;
        border: 2px solid #FFFFFF;
    }
    .videoList .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-name:hover,.videoList .vjs-playlist-item-list .vjs-selected .vjs-playlist-name {
        border: 2px solid #ffffff;
        background-color: #FBE308;
        color: #ffffff;
    }
}