﻿#video {
    font-size: 12px;
    overflow-x: hidden;
    min-height: 700px;
}


.tag-list-wrp {
    padding-bottom: 8px;
}

    .tag-list-wrp .title {
        padding: 10px 0 20px;
    }

.clearfix {
    zoom: 1;
}

    .clearfix:after, .clearfix:before {
        content: "";
        display: table;
    }

.tag-list-wrp .title .icon {
    background: url(../images/base_icons.png) -83px -1492px no-repeat;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.tag-list-wrp .title .name {
    font-size: 18px;
    line-height: 24px;
    color: #222;
    vertical-align: middle;
}

.tag-list-wrp .title .small {
    color: #99a2aa;
    margin-left: 20px;
    margin-bottom: 2px;
    display: inline-block;
    vertical-align: bottom;
}

.clearfix:after {
    clear: both;
    overflow: hidden;
}


.tag-list-cnt {
    overflow: hidden;
    transition: max-height .5s;
    max-height: 68px;
    position: relative;
}

.tag-list {
    overflow: hidden;
    margin-right: -10px;
}

ol, ul {
    list-style: none;
}

.tag-list li.tag-item.on {
    background-color: #00a1d6 !important;
    color: #fff !important;
    border-color: #00a1d6 !important;
}

.tag-list li.tag-item {
    display: inline-block;
    float: left;
    position: relative;
    border: 1px solid #e5e9ef;
    border-radius: 12px;
    background-color: #fff;
    height: 22px;
    margin: 5px 10px 5px 0;
    cursor: pointer;
}


    .tag-list li.tag-item.on .tag-a, .tag-list li.tag-item.on .tag-a:hover {
        color: #fff;
    }

    .tag-list li.tag-item .tag-a {
        display: block;
        line-height: 22px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: #222;
        padding: 0 10px;
    }

a, a:hover, ins {
    text-decoration: none;
}

a {
    transition: color .2s;
}


/*最新动态*/
.bili-wrapper .l-con {
    float: left;
    width: 900px;
}

.video-floor-m .dynamic-title {
    padding-right: 20px;
}

    .video-floor-m .dynamic-title .title {
        float: left;
    }

        .video-floor-m .dynamic-title .title .icon {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADL0lEQVRIS8WVS2gTURSGz52ZPIqm9pHEBKpWbMUKaktVKm5ciNqNj0UXXamIxWIVF+pOqBs3LtyoUOsbHysVXHRhFRFXPmgRtaAWqdS22jTNY5KZycy998hNa5gk02gV8SySEP5zvnPO/e8MgX8c5B/XhzkBjbeN+moJQ0/ay56XaqLpqrpaw4WjHw4Q1UnnCNhzP90XqvK0MoYwOKksfdVORp2St3SjUtmgGSZD/JKkm94dqnhdqHMEtD3UR4IVrmVCnNKYdWOHx+0E2HErOVJZ5l6W0E2YUI3zg53BIyUBzT3oClXrZxRgdYurvLtdygx/Kk7Hkmn6TDes2M8CiqTU+Re4thMCMJnKsEjaPE65t3+oy/feDslNsPOecS5cKR9TZovaRRwBkjEGnGHRIIgAXxMacEQQOhNxaNzwbPl21BcR4hzgQH8GvR7ZsYCaYECt4uJCrJkMImkjL8/g+GKgw9+SA4jVtDQws7A64wBq3Lnzn9qJpAEmY3mpFNF6edCfPbfsBBtv4vINteyzXWWaCGmVAXLIji5CKrBE2mIwlcrvXugo5+xlR0ApAoh9ilXoGs9bSUQzBnTmOl3hxjs+j7JAcMTOxxJ69rswDM4zAx0Bbw6wthdrmsLmqOgaHFYdSVmPHu/1bRcJm6/FTgXL3N1qhkqaRZ3cC6rFUm87g74coKEHw43+zLijGgDsgKwGkazrjfR6ibxfJiDZ88RA0Yw1/bErVP3ngNmKay5Ot/rc2GcHGAxBpdbUp8PhwF8B1lyKb/WAddctSX47IGZSoMh/HyAcNJkyHz7dV75LFFpxIbpkkcwfuGWpudBVBuOgUmFZLA1gHEEcoG4xMCiDFGNX3mCgsxGi1z0StMtEPCDyQ7hp2qSzHikA1FzGqnolHhUpnANY4sMWDIEhIFcIcTkZQRRPWAxozrIFAGhDuWVblErFjc1lrNz/YoVxiwKz3QcEGB4+HKrPHbL4sb4n8sUtS0t/WdEmEB2LzosuG+LZT13hk3mAlT1Tq8oJ9ilEqpXI3G+6mWsAoDMO6YJnECJGkMC9lEaOfz8RSucB5tP5fLT/76U/ny5LaX8AcvC/KNvyygMAAAAASUVORK5CYII=) no-repeat;
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }

        .video-floor-m .dynamic-title .title .name {
            font-size: 18px;
            line-height: 24px;
            color: #222;
            vertical-align: middle;
        }


.clearfix:after {
    clear: both;
    overflow: hidden;
}

.video-floor-m .dynamic-title .read-push:hover {
    background-color: #ccd0d7;
}

.video-floor-m .dynamic-title .read-push {
    float: right;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #ccd0d7;
    border-radius: 4px;
    height: 22px;
    padding: 0 10px;
    transition: all .2s;
}

    .video-floor-m .dynamic-title .read-push:hover .icon_read {
        transform: rotate(1turn);
    }

    .video-floor-m .dynamic-title .read-push .icon_read {
        display: inline-block;
        width: 12px;
        height: 13px;
        vertical-align: top;
        transition: all .5s;
        margin-top: 5px;
        background-position: -475px -89px;
    }

.bili-icon, .icon {
    display: inline-block;
    background-image: url(../images/base_icons.png);
}


.video-floor-m .dynamic-title .read-push .info {
    display: inline-block;
    vertical-align: top;
    line-height: 22px;
    margin-left: 5px;
}

.video-floor-m .storey-box {
    clear: both;
    /* padding: 20px 0 15px; */
}

    .video-floor-m .storey-box .v-list {
        overflow: hidden;
        height: 200px;
    }

    .video-floor-m .storey-box .spread-module {
        float: left;
        margin: 0 20px 20px 0;
    }

.spread-module {
    position: relative;
    width: 200px;
    height: 148px;
    font-size: 12px;
    overflow: hidden;
    /* border: solid; */
}

.spread-module_new {
    width: 280px;
    height: 248px;
}

.spread-module a {
    text-decoration: none;
}

a, a:hover, ins {
    text-decoration: none;
}

a {
    transition: color .2s;
}

.spread-module .pic {
    position: relative;
    width: 200px;
    height: 130px;
    display: block;
    overflow: hidden;
    text-align: center;
    border-radius: 4px;
}

.spread-module_new .pic {
    width: 280px;
    height: 165px;
}


.lazy-img {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABHCAMAAAB4UkqjAAAAh1BMVEUAAADd3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d0UCIZXAAAALHRSTlMAoJDx4OYL/DcGF+6+JNi4ycSIT2k6LPeWfRzTVPXPszEQrV0hpo12cEZAZFpRNIQAAAJVSURBVFjD7dbZcpswGIbhHwwSi81q8Ib33fnu//oatRIpmliDhQ/aaZ+TKInnjVgkhb4RJMhP9Fzo8PiD+vEA+JPnqS0+1dRHBJhibAzh2HNeekxP9Z8XBSMZM6SmRBYx65QeM6XsY3rKPqanLGMWqeDmOh0b/Io9+YHi3gKtdExgLznSlyjFMGnUphIMlcgY22C4DSPBxTu4IrXDe+yI6IDWbPSqGVoHoohDyip6XZVB4hFN1TgPyUaYQ5rSWQ0nZGcC6UyJukKypa4yIXX3HLLlqCdHX++HLRfS/9bbWvvHLSLNR3N6tRXdFwdxejekiYF4fDnWYa/WqSm2PqRCSy0hrbP5RxAaW8141N17tVbZ+S1fFYbWFF2+1lqg62BoBdAsqWOLroWhxTh+M8vmWuuaxp1WaWjRSn43yl35sHTLUjxiaWlqnYE4LZoJme3v13MibqepFZRL6otV5V+/Hv+xVvi+FsvZG1qh/LQ7uFXnF/HlwcEfYlDktW2r5EARUiXWc1xRWAC8tGwxsdJ9dcRnYrddMdtrjDZyAy3kXrSJ7O89u8zEZAIKxBRnFzbonWD3ZkfCrrmzP+6979nicjAnW3NZ4OS1R6GtVBa8drTek539up3NAgMvcv51WNZQitCiFBZQaqIMSrx1XrWNoWTy/w1r+hk+xjuMSVjGGC6WZ3S1xlDriqTKxzB+Ra3I4bDHne62drqmied57QR9z0D94dHnOEmvJ/pWAMm4ovL2TTcJ5cRyMlHrbkdG5c/5r82fYqt+K/iR89m2JrP9PEZyI80PsPxVT0P3FAEAAAAASUVORK5CYII=) 50% no-repeat;
    ;;;;;;;/* width: 100%; */;;;;;;;
    ;/* height: 100%; */;
    display: inline-block;
}

.spread-module .pic img {
    margin: 0 auto;
    outline: 0;
}

.lazy-img img {
    display: block;
    width: 100%;
    height: 100%;
}

fieldset, img {
    border: none;
    vertical-align: middle;
}


.spread-module .pic .medal {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 24px;
    pointer-events: none;
}

.bili-icon, .icon {
    display: inline-block;
    background-image: url(../images/base_icons.png);
}


.cover-preview-module {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity .3s;
}

    .cover-preview-module .progress-bar {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 10px;
        border-color: #000;
        border-style: solid;
        border-width: 4px 8px;
        background: #444;
        box-sizing: border-box;
    }

        .cover-preview-module .progress-bar span {
            display: block;
            background: #fff;
            height: 2px;
        }

.spread-module .pic .mask-video {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    transition: opacity .3s;
}

.danmu-module {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all .3s;
    pointer-events: none;
}

.spread-module .pic .dur {
    opacity: 0;
    position: absolute;
    bottom: 2px;
    left: 6px;
    color: #fff;
    height: 12px;
    line-height: 12px;
    padding: 0 5px 1px 0;
    transition: all .3s;
}

.spread-module .pic .w-later {
    display: none;
}

.watch-later-trigger {
    display: none;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 6px;
    bottom: 4px;
    cursor: pointer;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAABT0lEQ…HyYYxBKXU9+p5Grybg4m1Hk9Bar4Ee4JC0JWeixOhprdffE/1yRW/TLMYAAAAASUVORK5CYII=);
}

.spread-module .t {
    padding-top: 3px;
    /* height: 12px;
    line-height: 12px;*/
    /* transition: all .2s linear; */
    /* color: #222; */
    /* word-wrap: break-word; */
    /* word-break: break-all; */
    /* overflow: hidden; */
    text-align: left;
}

.spread-module .num {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 20px;
    line-height: 20px;
    color: #99a2aa;
    background-color: #fff;
    transition: all .3s;
    font-size: 0;
}

    .spread-module .num span {
        line-height: 12px;
        height: 14px;
        display: inline-block;
        width: 50%;
        overflow: hidden;
        font-size: 12px;
        vertical-align: bottom;
    }


    .spread-module .num .play .icon {
        background-position: -282px -90px;
    }

    .spread-module .num i {
        display: inline-block;
        width: 12px;
        height: 12px;
        vertical-align: top;
        margin-right: 5px;
    }

.bili-icon, .icon {
    display: inline-block;
    background-image: url(../images/base_icons.png);
}

.spread-module:hover .num {
    bottom: -20px
}

.spread-module:hover .mask-video {
    opacity: 1
}

.spread-module:hover .dur {
    opacity: 1;
}

.spread-module:hover .pic .dur {
    opacity: 1;
}

.spread-module .pic .dur {
    opacity: 0;
    position: absolute;
    bottom: 2px;
    left: 6px;
    color: #fff;
    height: 12px;
    line-height: 12px;
    padding: 0 5px 1px 0;
    transition: all .3s;
}

.spread-module .pic:hover .w-later {
    display: block;
}

.spread-module .pic .w-later {
    display: none;
}

.watch-later-trigger {
    display: none;
    width: 22px;
    height: 22px;
    position: absolute;
    right: 6px;
    bottom: 4px;
    cursor: pointer;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABRUlEQVQ4T72ToUsEQRTGv+84FhYslgPDcS68KSImg4pYDP4BBg2CBs0Wgxi0GgwaFRGryWqxCMoVi5h2ZtHjsFyxCCsLd092cWHDnXen4MDMwLz3/ZiZ9z7iezSbTT+O4ymSfn7WbVfV2Pf9p2q1GqdxpotzbkVVj1T1luTrTwAAAYAlktsickVr7QSAa8/zZmq12nsfcRZ2zk2q6h2A+RRwAODNGHM+iDjPsdbuAvBSwBmAC2NMvQhotVojlUrloxfUOTfX6XTWMwDJUxF5LCaHYfhSKpXWROS+GySKoul2u73VE2CtVQDpPC6Xy3tBEHwWQYMCco0juVq85b8Bfv+EYT/xUkQehimjtXZWVTfSKuwDSIwxh0M20qaqjjFvS5ILIvI8CKTRaIwmSVInuVw004mq3vQzk6qOk1wkuZOZ6a92/gLn/+fe4lWxBgAAAABJRU5ErkJggg==) no-repeat 5px 7px;
}

/*视频列表*/
.video-list {
    padding-right: 20px;
    margin-bottom: 30px;
    min-width: 400px;
}


    .video-list .vl-hd {
        height: 47px;
        border-bottom: 1px solid #e5e9ef;
        position: relative;
    }

        .video-list .vl-hd .left {
            float: left;
        }

        .video-list .vl-hd .tab-list {
            display: inline-block;
            vertical-align: middle;
        }


        .video-list .vl-hd .order-tab li.on {
            color: #00a1d6;
            height: 46px;
            border-bottom: 2px solid #00a1d6;
        }

        .video-list .vl-hd .tab-list li {
            float: left;
            height: 48px;
            line-height: 48px;
            margin-right: 20px;
            cursor: pointer;
            color: #222;
            text-align: center;
            font-size: 14px;
        }

        .video-list .vl-hd .right {
            float: right;
            padding: 8px 0;
        }

        .video-list .vl-hd .type-tab li.origin {
            margin-left: 16px;
            margin-right: 0;
        }

        .video-list .vl-hd .type-tab li.on {
            color: #00a1d6;
        }

        .video-list .vl-hd .type-tab li.all {
            margin: 0;
        }

        .video-list .vl-hd .type-tab li {
            padding: 0;
            margin-left: 0;
            height: 20px;
            line-height: 20px;
            transition: .2s;
            transition-property: border,color;
            border-radius: 4px;
            font-size: 12px;
        }

        .video-list .vl-hd .right {
            float: right;
            padding: 8px 0;
        }

        .video-list .vl-hd .s-line {
            display: inline-block;
            border-left: 1px solid #e5e9ef;
            height: 12px;
            line-height: 12px;
            margin-top: 11px;
            vertical-align: top;
            margin-left: 15px;
            margin-right: 5px;
        }


        .video-list .vl-hd .display-tab li.mod-1 {
            background-position: -270px -847px;
        }

        .video-list .vl-hd .display-tab li.mod-2 {
            background-position: -270px -911px;
        }


        .video-list .vl-hd .display-tab li.mod-3 {
            background-position: -270px -975px;
        }

        .video-list .vl-hd .display-tab li.mod-1.on {
            background-position: -334px -847px;
        }

        .video-list .vl-hd .display-tab li.mod-2.on {
            background-position: -334px -911px;
        }

        .video-list .vl-hd .display-tab li.mod-3.on {
            background-position: -334px -975px;
        }

        .video-list .vl-hd .display-tab li {
            height: 32px;
            line-height: 32px;
            padding: 0;
            background: url(../images/base_icons.png) no-repeat;
            width: 34px;
            border-radius: 0;
            margin: 0;
            transition: none;
        }

/*列表主体*/
.vd-list-cnt {
    clear: both;
    overflow: hidden;
}

.mod-1 li {
    padding-top: 20px;
    clear: both;
}

.mod-1 .l {
    float: left;
    margin-right: 20px;
}


.mod-1 .r {
    float: left;
    position: relative;
    width: 700px;
    border-bottom: 1px solid #e5e9ef;
    padding-bottom: 20px;
}

    .mod-1 .r .title:hover {
        color: #00a1d6;
    }

    .mod-1 .r .title {
        text-overflow: ellipsis;
        height: 20px;
        line-height: 16px;
        font-size: 14px;
        white-space: nowrap;
        margin-right: 220px;
        max-height: 40px;
        display: block;
        overflow: hidden;
        color: #222;
        word-wrap: break-word;
        word-break: break-all;
    }

    .mod-1 .r .v-desc {
        color: #99a2aa;
        word-wrap: break-word;
        word-break: break-all;
        padding-top: 14px;
        margin-bottom: 14px;
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        clear: both;
    }


    .mod-1 .r .v-info {
        line-height: 12px;
    }


        .mod-1 .r .v-info .v-info-i {
            color: #99a2aa;
            float: left;
            width: 70px;
            height: 12px;
            line-height: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


            .mod-1 .r .v-info .v-info-i i {
                vertical-align: top;
                margin-right: 5px;
            }


.b-icon {
    display: inline-block;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    background: url(../images/base_icons.png) no-repeat;
}

    .b-icon.b-icon-v-play {
        background-position: -282px -90px;
    }

    .b-icon.b-icon-v-dm {
        background-position: -282px -218px;
    }

    .b-icon.b-icon-v-fav {
        background-position: -282px -346px;
    }

.mod-1 .r .up-info {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 12px;
    height: 16px;
}


    .mod-1 .r .up-info .v-author {
        display: inline-block;
        vertical-align: top;
        color: #99a2aa;
        max-width: 100px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 16px;
    }

    .mod-1 .r .up-info .v-date {
        display: inline-block;
        vertical-align: top;
        color: #b8c0cc;
        border-left: 1px solid #ddd;
        padding-left: 10px;
        margin-left: 10px;
    }

.vd-list-cnt .spread-module .num, .vd-list-cnt .spread-module .t {
    display: none;
}

/*右侧排名*/
.bili-wrapper .r-con {
    width: 260px;
    float: right;
}

.sec-rank {
    overflow: hidden;
}

    .sec-rank .rank-head {
        height: 24px;
        line-height: 24px;
    }

        .sec-rank .rank-head h3 {
            float: left;
            font-size: 18px;
            font-weight: 400;
        }

    .sec-rank .rank-list-wrap {
        width: 200%;
        overflow: hidden;
        zoom: 1;
        transition: all .2s linear;
    }

        .sec-rank .rank-list-wrap .rank-list {
            padding-bottom: 15px;
            width: 50%;
            float: left;
            padding-top: 20px;
            position: relative;
        }


            .sec-rank .rank-list-wrap .rank-list .rank-item {
                overflow: visible;
            }

.rank-list .rank-item.first {
    margin-top: 0;
    margin-bottom: 15px;
}

.rank-list .rank-item {
    position: relative;
    padding-left: 25px;
    margin-top: 20px;
    overflow: hidden;
}

    .rank-list .rank-item.highlight .ri-num {
        background: #dc0e1c;
    }

    .rank-list .rank-item .ri-num {
        position: absolute;
        color: #fff;
        height: 18px;
        line-height: 18px;
        top: 0;
        left: 0;
        font-size: 12px;
        min-width: 12px;
        text-align: center;
        background-color: #b8c0cc;
        border-radius: 4px;
        padding: 0 3px;
        font-weight: bolder;
        font-style: normal;
    }

    .rank-list .rank-item .ri-info-wrap {
        position: relative;
        display: block;
        cursor: pointer;
    }

.sec-rank .rank-list-wrap .rank-list .show-detail:first-child .ri-info-wrap .ri-preview, .sec-rank .rank-list-wrap .rank-list .show-detail:hover .ri-info-wrap .ri-preview, .sec-rank .rank-list-wrap .rank-list .show-detail:nth-child(2) .ri-info-wrap .ri-preview, .sec-rank .rank-list-wrap .rank-list .show-detail:nth-child(3) .ri-info-wrap .ri-preview {
    display: block;
}

.sec-rank .rank-list-wrap .rank-list .show-detail .ri-info-wrap .ri-preview {
    display: none;
}

.rank-list .rank-item.show-detail .ri-preview {
    display: block;
}

.rank-list .rank-item .ri-preview {
    margin-right: 5px;
    width: 80px;
    height: 50px;
    float: left;
    display: none;
    border-radius: 4px;
    overflow: hidden;
}

.rank-list .rank-item .ri-detail {
    float: left;
}


.sec-rank .rank-list-wrap .rank-list .rank-item.show-detail .ri-detail .ri-title {
    margin-top: 0;
}

.sec-rank .rank-list-wrap .rank-list .show-detail:first-child .ri-info-wrap .ri-title, .sec-rank .rank-list-wrap .rank-list .show-detail:hover .ri-info-wrap .ri-title, .sec-rank .rank-list-wrap .rank-list .show-detail:nth-child(2) .ri-info-wrap .ri-title, .sec-rank .rank-list-wrap .rank-list .show-detail:nth-child(3) .ri-info-wrap .ri-title {
    width: 150px;
    height: 52px;
}

.sec-rank .rank-list-wrap .rank-list .show-detail .ri-info-wrap .ri-title {
    width: 100%;
    height: auto;
}

.rank-list .rank-item.show-detail .ri-detail .ri-title {
    height: 52px;
    line-height: 18px;
    margin-top: -3px;
    width: 150px;
    padding: 0;
}

.rank-list .rank-item .ri-detail .ri-title {
    line-height: 18px;
    height: 18px;
    overflow: hidden;
    color: #222;
}

.rank-list .rank-item .ri-detail {
    float: left;
}


    .rank-list .rank-item .ri-detail .ri-title {
        line-height: 18px;
        height: 18px;
        overflow: hidden;
        color: #222;
    }






.mod-1 li {
    padding-top: 20px;
    clear: both
}

.mod-1 .l {
    float: left;
    margin-right: 20px
}

    .mod-1 .l .spread-module {
        height: 130px;
    }

.mod-1 .r {
    float: left;
    position: relative;
    width: 657px;
    border-bottom: 1px solid #e5e9ef;
    padding-bottom: 20px;
}

    .mod-1 .r .title {
        text-overflow: ellipsis;
        height: 20px;
        line-height: 16px;
        font-size: 14px;
        white-space: nowrap;
        margin-right: 220px;
        max-height: 40px;
        display: block;
        overflow: hidden;
        color: #222;
        word-wrap: break-word;
        word-break: break-all
    }

        .mod-1 .r .title:hover {
            color: #00a1d6
        }

    .mod-1 .r .v-desc {
        color: #99a2aa;
        word-wrap: break-word;
        word-break: break-all;
        padding-top: 14px;
        margin-bottom: 14px;
        overflow: hidden;
        line-height: 20px;
        height: 40px;
        clear: both
    }

    .mod-1 .r .v-info {
        line-height: 12px
    }

        .mod-1 .r .v-info .v-info-i {
            color: #99a2aa;
            float: left;
            width: 70px;
            height: 12px;
            line-height: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

            .mod-1 .r .v-info .v-info-i i {
                vertical-align: top;
                margin-right: 5px
            }

    .mod-1 .r .up-info {
        position: absolute;
        right: 0;
        top: 0;
        line-height: 12px;
        height: 16px
    }

        .mod-1 .r .up-info .v-author {
            display: inline-block;
            vertical-align: top;
            color: #99a2aa;
            max-width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 16px
        }

            .mod-1 .r .up-info .v-author:hover {
                color: #00a1d6
            }

        .mod-1 .r .up-info .v-date {
            display: inline-block;
            vertical-align: top;
            color: #b8c0cc;
            border-left: 1px solid #ddd;
            padding-left: 10px;
            margin-left: 10px
        }

@media screen and (max-width: 1400px) {
    .mod-1 li .r {
        width: 520px
    }
}

.mod-2 {
    margin-right: -42px
}

    .mod-2 li {
        float: left;
        width: 50%;
        border-bottom: 1px solid #e5e9ef
    }

        .mod-2 li .l-item {
            height: 133px;
            padding: 20px 20px 20px 0;
            margin-right: 20px;
            border-right: 1px solid #e5e9ef
        }

        .mod-2 li .l {
            float: left;
            height: 100px;
            margin-right: 20px;
            padding-top: 0
        }

        .mod-2 li .r {
            float: left;
            width: 240px
        }

            .mod-2 li .r .title {
                max-height: 40px;
                line-height: 20px;
                display: block;
                overflow: hidden;
                color: #222;
                font-size: 12px;
                word-wrap: break-word;
                word-break: break-all
            }

                .mod-2 li .r .title:hover {
                    color: #00a1d6
                }

            .mod-2 li .r .v-desc {
                color: #99a2aa;
                word-wrap: break-word;
                word-break: break-all;
                padding-top: 14px;
                margin-bottom: 14px;
                overflow: hidden;
                line-height: 20px;
                height: 40px;
                clear: both
            }

            .mod-2 li .r .v-info {
                float: right
            }

                .mod-2 li .r .v-info .v-info-i {
                    color: #99a2aa;
                    float: left;
                    width: 70px;
                    height: 12px;
                    line-height: 12px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis
                }

                    .mod-2 li .r .v-info .v-info-i i {
                        vertical-align: top;
                        margin-right: 5px
                    }

            .mod-2 li .r .up-info {
                float: left;
                line-height: 12px
            }

                .mod-2 li .r .up-info .v-author {
                    display: inline-block;
                    vertical-align: top;
                    color: #99a2aa;
                    max-width: 100px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    height: 16px
                }

                    .mod-2 li .r .up-info .v-author:hover {
                        color: #00a1d6
                    }

@media screen and (max-width: 1400px) {
    .mod-2 .spread-module, .mod-2 .spread-module .pic {
        width: 114px;
        height: 70px
    }

    .mod-2 li .r {
        width: 196px
    }

        .mod-2 li .r .up-info .v-author, .mod-2 li .r .v-info .v-info-i {
            width: 65px
        }
}

.mod-3 {
    margin-right: -20px
}

    .mod-3 li {
        float: left;
        padding-top: 20px;
        padding-right: 20px
    }

    .mod-3 .l-item {
        height: 212px;
        width: 158px;
        border: 1px solid #e5e9ef;
        border-radius: 4px;
        overflow: hidden
    }

    .mod-3 .l .spread-module {
        height: 100px;
        margin: -1px 0 6px -1px
    }

    .mod-3 .r {
        float: none;
        padding: 0 10px
    }

        .mod-3 .r .title {
            display: inline-block;
            height: 40px;
            line-height: 20px;
            overflow: hidden;
            color: #222;
            font-size: 12px;
            word-wrap: break-word;
            word-break: break-all
        }

            .mod-3 .r .title:hover {
                color: #00a1d6
            }

        .mod-3 .r .v-info {
            line-height: 12px;
            padding-top: 12px
        }

            .mod-3 .r .v-info .v-info-i {
                color: #99a2aa;
                display: inline-block;
                width: 69px;
                height: 12px;
                line-height: 12px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis
            }

                .mod-3 .r .v-info .v-info-i i {
                    vertical-align: top;
                    margin-right: 5px
                }

        .mod-3 .r .up-info {
            margin-top: 12px
        }

            .mod-3 .r .up-info .v-author {
                display: inline-block;
                vertical-align: top;
                color: #99a2aa;
                max-width: 100px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                height: 16px
            }

                .mod-3 .r .up-info .v-author:hover {
                    color: #00a1d6
                }


.title1 {
    font-size: 16px;
    font-weight: bold;
    height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow text-overflow: ellipsis;
    width: 266px;
    text-overflow: ellipsis;
    height: 21px;
    font-family: 黑体;
}

.intro1 {
    height: 36px;
    width: 266px;
    line-height: 18px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #727272;
}.date1 {
    color: #727272;
}