@charset "UTF-8";

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px
}

.row:before {
    display: table;
    content: " "
}

.clearfix {
    zoom: 1;
    display: block
}

    .clearfix:after, .row::after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
    }

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    position: relative;
    min-height: 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left
}

.columnSpacing0 .row {
    margin-left: 0;
    margin-right: 0
}

.columnSpacing0 .col-1, .columnSpacing0 .col-2, .columnSpacing0 .col-3, .columnSpacing0 .col-4, .columnSpacing0 .col-5, .columnSpacing0 .col-6, .columnSpacing0 .col-7, .columnSpacing0 .col-8, .columnSpacing0 .col-9, .columnSpacing0 .col-10, .columnSpacing0 .col-11, .columnSpacing0 .col-12 {
    padding-left: 0;
    padding-right: 0
}

.columnSpacing0 .sectionPanel {
    margin-bottom: 0
}

.columnSpacing5 .row {
    margin-left: -3px;
    margin-right: -2px
}

.columnSpacing5 .col-1, .columnSpacing5 .col-2, .columnSpacing5 .col-3, .columnSpacing5 .col-4, .columnSpacing5 .col-5, .columnSpacing5 .col-6, .columnSpacing5 .col-7, .columnSpacing5 .col-8, .columnSpacing5 .col-9, .columnSpacing5 .col-10, .columnSpacing5 .col-11, .columnSpacing5 .col-12 {
    padding-left: 3px;
    padding-right: 2px
}

.columnSpacing5 .sectionPanel {
    margin-bottom: 5px
}

.columnSpacing10 .row {
    margin-left: -5px;
    margin-right: -5px
}

.columnSpacing10 .col-1, .columnSpacing10 .col-2, .columnSpacing10 .col-3, .columnSpacing10 .col-4, .columnSpacing10 .col-5, .columnSpacing10 .col-6, .columnSpacing10 .col-7, .columnSpacing10 .col-8, .columnSpacing10 .col-9, .columnSpacing10 .col-10, .columnSpacing10 .col-11, .columnSpacing10 .col-12 {
    padding-left: 5px;
    padding-right: 5px
}

.columnSpacing10 .sectionPanel {
    margin-bottom: 10px
}

.columnSpacing15 .row {
    margin-left: -8px;
    margin-right: -7px
}

.columnSpacing15 .col-1, .columnSpacing15 .col-2, .columnSpacing15 .col-3, .columnSpacing15 .col-4, .columnSpacing15 .col-5, .columnSpacing15 .col-6, .columnSpacing15 .col-7, .columnSpacing15 .col-8, .columnSpacing15 .col-9, .columnSpacing15 .col-10, .columnSpacing15 .col-11, .columnSpacing15 .col-12 {
    padding-left: 8px;
    padding-right: 7px
}

.columnSpacing15 .sectionPanel {
    margin-bottom: 15px
}

.columnSpacing20 .row {
    margin-left: -10px;
    margin-right: -10px
}

.columnSpacing20 .col-1, .columnSpacing20 .col-2, .columnSpacing20 .col-3, .columnSpacing20 .col-4, .columnSpacing20 .col-5, .columnSpacing20 .col-6, .columnSpacing20 .col-7, .columnSpacing20 .col-8, .columnSpacing20 .col-9, .columnSpacing20 .col-10, .columnSpacing20 .col-11, .columnSpacing20 .col-12 {
    padding-left: 10px;
    padding-right: 10px
}

.columnSpacing20 .sectionPanel {
    margin-bottom: 20px
}

.columnSpacing25 .row {
    margin-left: -13px;
    margin-right: -12px
}

.columnSpacing25 .col-1, .columnSpacing25 .col-2, .columnSpacing25 .col-3, .columnSpacing25 .col-4, .columnSpacing25 .col-5, .columnSpacing25 .col-6, .columnSpacing25 .col-7, .columnSpacing25 .col-8, .columnSpacing25 .col-9, .columnSpacing25 .col-10, .columnSpacing25 .col-11, .columnSpacing25 .col-12 {
    padding-left: 13px;
    padding-right: 12px
}

.columnSpacing25 .sectionPanel {
    margin-bottom: 25px
}

.columnSpacing30 .row {
    margin-left: -15px;
    margin-right: -15px
}

.columnSpacing30 .col-1, .columnSpacing30 .col-2, .columnSpacing30 .col-3, .columnSpacing30 .col-4, .columnSpacing30 .col-5, .columnSpacing30 .col-6, .columnSpacing30 .col-7, .columnSpacing30 .col-8, .columnSpacing30 .col-9, .columnSpacing30 .col-10, .columnSpacing30 .col-11, .columnSpacing30 .col-12 {
    padding-left: 15px;
    padding-right: 15px
}

.columnSpacing30 .sectionPanel {
    margin-bottom: 30px
}

.sectionPanel {
    clear: both
}

.col-12 {
    width: 100%
}

.col-11 {
    width: 91.66666667%
}

.col-10 {
    width: 83.33333333%
}

.col-9 {
    width: 75%
}

.col-8 {
    width: 66.66666667%
}

.col-7 {
    width: 58.33333333%
}

.col-6 {
    width: 50%
}

.col-5 {
    width: 41.66666667%
}

.col-4 {
    width: 33.33333333%
}

.col-3 {
    width: 25%
}

.col-2 {
    width: 16.66666667%
}

.col-1 {
    width: 8.33333333%
}

.section-bigTitle {
    position: relative
}

    .section-bigTitle:after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        content: ""
    }

.section-bigTitleInnerArea {
    position: absolute;
    top: 12px;
    left: 15px;
    right: 105px;
    bottom: 15px;
    white-space: nowrap;
    overflow: hidden
}

.section-bigTitle-icon {
    width: 20px;
    height: 20px;
    display: block;
    float: left
}

.section-bigTitle-text {
    position: absolute;
    top: 0;
    left: 35px;
    right: 0;
    bottom: 0;
    font-size: 16px;
    display: block;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.section-header {
    position: relative
}

    .section-header:before {
        position: absolute;
        top: 15px;
        left: 8px;
        bottom: 15px;
        width: 3px;
        display: block;
        content: ""
    }

    .section-header:after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        content: ""
    }

    .section-header.section-header-card2:after {
        height: 0
    }

.section-header-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 15px;
    left: 15px
}

.section-header-tabs {
    position: absolute;
    left: 45px;
    right: 105px;
    font-size: 16px
}

    .section-header-tabs .showedTabs {
        float: left
    }

        .section-header-tabs .showedTabs li {
            position: relative;
            padding-right: 25px;
            float: left;
            cursor: pointer
        }

            .section-header-tabs .showedTabs li:last-child:before {
                display: none
            }

            .section-header-tabs .showedTabs li:before {
                content: "";
                display: block;
                position: absolute;
                right: 14px;
                top: 3px;
                z-index: 1;
                height: 17px;
                width: 1px;
                background-color: #ccc
            }

            .section-header-tabs .showedTabs li.current:after {
                /*content: "";*/
                display: block;
                position: absolute;
                right: 25px;
                left: 0;
                z-index: 1
            }

            .section-header-tabs .showedTabs li i {
                width: 20px;
                height: 20px;
                margin-right: 5px;
                float: left;
                display: block;
                text-align: center
            }

            .section-header-tabs .showedTabs li div {
                float: left;
                display: block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .section-header-tabs .showedTabs li div {
                max-width: 100%
            }

.totalNumber {
    position: relative
}

    .totalNumber sup {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: -5px;
        font-size: 12px
    }

.section-header-tabs .moreTabs {
    width: 20px;
    height: 20px;
    float: left;
    z-index: 52;
    position: relative
}

    .section-header-tabs .moreTabs .arrowMore {
        width: 16px;
        height: 16px;
        line-height: 16px;
        margin-top: 1px;
        margin-left: 1px;
        cursor: pointer;
        text-align: center;
        border-radius: 4px
    }

.moreListArea, .btnMoreListArea {
    position: absolute;
    width: 90px;
    height: auto;
    right: -35px;
    display: none;
    padding-top: 10px
}

.moreListArea {
    top: 16px
}

.btnMoreListArea {
    top: 18px
}

.moreList, .btnMoreList {
    padding: 5px 0
}

.section-header-tabs .moreTabs:hover .moreListArea, .section-header-button .sectionButton-Setting:hover .btnMoreListArea, .section-header-button .sectionButton-allInOne:hover .btnMoreListArea {
    display: block
}

.section-header-tabs .moreList::before, .btnMoreList::before {
    position: absolute;
    content: "";
    top: 5px;
    left: 50%;
    margin-left: -6px;
    width: 10px;
    height: 10px;
    display: block;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg)
}

.section-header-tabs .moreList li, .section-header-tabs .btnMoreList li, .section-header-button .moreList li, .section-header-button .btnMoreList li {
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    position: relative
}

.btnMoreList li {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

    .moreList li div, .btnMoreList li div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

    .btnMoreList li div {
        text-align: center
    }

    .moreList li:hover, .btnMoreList li:hover {
        cursor: pointer
    }

.section-header-tabs .moreList li {
    font-size: 12px
}

.section-header-tabs .moreList li {
    color: #666
}

.section-header.noIcon .section-header-tabs {
    left: 15px
}

.section-header.noIcon .section-header-icon {
    display: none
}

.section-header-button {
    width: 50px;
    height: 20px;
    position: absolute;
    right: 45px;
    z-index: 50;
    display: none
}

    .section-header-button .btnGroup {
        width: 20px;
        height: 20px;
        float: right;
        position: relative
    }

        .section-header-button .btnGroup:last-child {
            margin-right: 10px
        }

.section-header:hover .section-header-button, .section-bigTitle:hover .section-header-button {
    display: block
}

.isDesigner .section-header:hover .section-header-button, .isDesigner .section-bigTitle:hover .section-header-button {
    display: none
}

.section-header-button span {
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    opacity: .5
}

    .section-header-button span:hover {
        opacity: 1
    }

    .section-header-button span i {
        font-size: 12px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        display: inline-block;
        vertical-align: top;
        border-radius: inherit
    }

.section-header-more {
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    position: absolute;
    right: 15px;
    border-radius: 50%;
    opacity: .5
}

    .section-header-more:hover {
        opacity: 1
    }

.themeShow .section-header-more, .themeShow .section-header-aiSort {
    display: none;
    opacity: 0
}

.section-header-more i {
    font-size: 14px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    line-height: 18px;
    display: inline-block;
    vertical-align: top;
    border-radius: inherit
}

.section-header-aiSort {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 45px;
    cursor: pointer;
    z-index: 51;
    display: none
}

    .section-header-aiSort span {
        opacity: .5;
        font-size: 22px;
        width: 20px;
        height: 20px;
        vertical-align: top
    }

        .section-header-aiSort span.vp-AiSortOn:hover {
            opacity: 1
        }

        .section-header-aiSort span.vp-AiSortOff {
            color: #ccc
        }

.section-header.section-header-card1 {
    height: 60px;
    padding: 0;
    overflow: hidden
}

    .section-header.section-header-card1:hover {
        overflow-x: auto
    }

    .section-header.section-header-card1:after {
        height: 0
    }

.section-header-card1 ul {
    width: 100%;
    height: inherit
}

    .section-header-card1 ul li {
        width: 150px;
        height: inherit;
        float: left;
        cursor: pointer;
        position: relative
    }

        .section-header-card1 ul li:before {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: block;
            content: ""
        }

        .section-header-card1 ul li:after {
            content: "";
            position: absolute;
            right: 0;
            top: 10px;
            bottom: 10px;
            width: 1px;
            display: block
        }

        .section-header-card1 ul li:last-child:after, .section-header-card1 ul li.current:after {
            background-color: transparent
        }

        .section-header-card1 ul li .leftIcon {
            position: absolute;
            width: 50px;
            height: inherit;
            top: 0;
            left: 20px
        }

            .section-header-card1 ul li .leftIcon .circleArea {
                width: 42px;
                height: 42px;
                line-height: 38px;
                float: right;
                margin-top: 9px;
                margin-right: 5px;
                border-radius: 50%;
                position: relative;
                text-align: center
            }

            .section-header-card1 ul li .leftIcon .innerCircle {
                position: absolute;
                top: 4px;
                right: 4px;
                bottom: 4px;
                left: 4px;
                border-radius: 50%
            }

            .section-header-card1 ul li .leftIcon i {
                font-size: 20px;
                color: #fff
            }

        .section-header-card1 ul li .rightText {
            position: absolute;
            top: 5px;
            right: 10px;
            left: 70px;
            text-align: center
        }

            .section-header-card1 ul li .rightText .tabsNumber {
                color: #333;
                font-size: 20px
            }

            .section-header-card1 ul li .rightText .tabsName {
                font-size: 12px;
                color: #666
            }

        .section-header-card1 ul li.current, .section-header-card1 ul li:hover {
            background-color: #c2d7eb;
            background-color: rgba(194,215,235,0.2)
        }

.section-header.section-header-card2 {
    height: 70px;
    overflow: hidden;
    border-bottom-color: transparent
}

    .section-header.section-header-card2:hover {
        overflow-x: auto
    }

.section-header-card2 .tabCard {
    clear: both
}

    .section-header-card2 .tabCard:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
    }

    .section-header-card2 .tabCard li {
        width: 145px;
        float: left;
        margin-right: 10px
    }

.rhombus {
    position: absolute;
    top: 100%;
    left: 20px;
    margin-top: -2px;
    width: 0;
    height: 0;
    border-width: 10px 10px 0;
    border-style: solid;
    border-color: transparent transparent transparent;
    display: none
}

.section-header-card2 .tabCard li.current .rhombus {
    display: block
}

.section-header-card2 .tabCard li:last-child {
    margin-right: 0
}

.section-header-card2 .tabCard.oneRow li {
    height: 68px;
    border-radius: 6px;
    border: solid 1px transparent;
    color: #fff;
    position: relative;
    cursor: pointer
}

    .section-header-card2 .tabCard.oneRow li .leftTotalNum {
        width: 30%;
        height: 40px;
        line-height: 40px;
        margin-top: 17px;
        float: left;
        text-align: center;
        font-size: 22px;
        border-right: solid 1px #fff;
        border-right: solid 1px rgba(255,255,255,0.4)
    }

    .section-header-card2 .tabCard.oneRow li .rightName {
        width: 65%;
        height: 40px;
        text-indent: 10px;
        line-height: 40px;
        margin-top: 17px;
        float: left;
        font-size: 14px;
        text-align: center
    }

    .section-header-card2 .tabCard.oneRow li .fullBockName {
        width: 80%;
        height: 40px;
        line-height: 40px;
        margin-top: 17px;
        margin-left: 10%;
        font-size: 14px;
        text-align: center
    }

    .section-header-card2 .tabCard.oneRow li .bgIcon, .section-header-card2 .tabCard .firstTab li .bgIcon {
        position: absolute;
        right: -5px;
        bottom: -5px;
        width: 50px;
        height: 50px;
        text-align: right;
        opacity: .3
    }

        .section-header-card2 .tabCard.oneRow li .bgIcon i, .section-header-card2 .tabCard .firstTab li .bgIcon i {
            font-size: 50px;
            color: #fff
        }

.section-header-card2 .tabCard.twoRow li {
    height: 28px;
    border-radius: 6px;
    border: solid 1px transparent;
    color: #fff;
    position: relative;
    font-size: 14px;
    cursor: pointer
}

.section-header-card2 .tabCard.twoRow.firstRow li {
    margin-bottom: 10px
}

.section-header-card2 .tabCard.twoRow li .leftTotalNum {
    width: 30%;
    height: 20px;
    line-height: 20px;
    margin-top: 4px;
    float: left;
    text-align: center;
    font-size: 16px;
    position: relative
}

    .section-header-card2 .tabCard.twoRow li .leftTotalNum:after {
        content: "";
        position: absolute;
        right: 0;
        width: 1px;
        background-color: #fff;
        background-color: #fff;
        background-color: rgba(255,255,255,0.4)
    }

.section-header-card2 .tabCard.twoRow .firstTab li .leftTotalNum:after {
    top: 25%;
    bottom: 25%
}

.section-header-card2 .tabCard.twoRow .otherTab li .leftTotalNum:after {
    top: 10%;
    bottom: 10%
}

.section-header-card2 .tabCard.twoRow li .rightName {
    width: 65%;
    height: 20px;
    text-indent: 10px;
    line-height: 20px;
    margin-top: 4px;
    float: left;
    text-align: center
}

.section-header-card2 .tabCard.twoRow li .fullBockName {
    width: 80%;
    height: 20px;
    line-height: 20px;
    margin-top: 4px;
    margin-left: 10%;
    text-align: center
}

.section-header-card2 .tabCard.twoRow.oddCard .firstTab {
    float: left;
    margin-right: 10px
}

.section-header-card2 .tabCard.twoRow.oddCard .otherTab {
    float: left
}

.section-header-card2 .tabCard.twoRow.oddCard .firstTab li {
    height: 68px
}

.section-header-card2 .tabCard.twoRow.oddCard .firstRow li {
    margin-bottom: 10px
}

.section-header-card2 .tabCard.twoRow.oddCard ul {
    clear: both
}

.section-header-card2 .tabCard.twoRow.oddCard .firstTab li .fullBockName {
    height: 68px;
    line-height: 68px;
    margin-top: 0
}

.section-header-card2 .tabCard.twoRow.oddCard .firstTab li .leftTotalNum {
    height: 68px;
    line-height: 68px;
    margin-top: 0
}

.section-header-card2 .tabCard.twoRow.oddCard .firstTab li .rightName {
    height: 40px;
    line-height: 40px;
    margin-top: 13px;
    font-size: 14px
}

.section-header-card2 .evenCard {
    clear: both
}

    .section-header-card2 .evenCard li {
        width: 145px;
        float: left
    }

.section-header-button-4-hover {
    position: relative
}

    .section-header-button-4-hover .section-header-button {
        top: 0;
        right: 0
    }

.sectionPanel:hover .section-header-button-4-hover .section-header-button {
    display: block
}

.section-header-button-4-hover .sectionButton-Setting {
    background-color: #eee;
    background-color: rgba(0,0,0,0.2)
}

.section-header-button-4-hover .btnMoreListArea {
    right: 2px
}

    .section-header-button-4-hover .btnMoreListArea .btnMoreList::before {
        margin-left: 0;
        left: 75px
    }

.section-header.standard .total999 {
    padding-right: 8px;
    font-size: 14px;
    position: relative;
    line-height: normal
}

    .section-header.standard .total999 sup {
        position: absolute;
        top: 0;
        right: 0
    }

.section-header.section-header-card1 .total999, .section-header.section-header-card2 .total999 {
    font-size: 14px;
    position: relative;
    line-height: normal
}

.section-header.section-header-card1 sup, .section-header.section-header-card2 sup {
    position: absolute;
    top: -5px;
    right: -8px
}

.section-editArea {
    overflow: auto;
    display: none
}

.padding5 {
    padding: 5px
}

.padding10 {
    padding: 10px
}

.padding15 {
    padding: 15px
}

.padding10_15 {
    padding: 10px 15px
}

.padding20 {
    padding: 20px
}

.refreshAnotherData {
    height: 20px;
    line-height: 20px;
    padding-bottom: 15px;
    text-align: center;
    font-size: 14px;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none
}

    .refreshAnotherData span {
        cursor: pointer;
        color: #666
    }

        .refreshAnotherData span.vportal {
            color: #999;
            font-size: 16px
        }

.section-footer {
    height: 20px;
    padding: 15px;
    position: relative
}

.contentLoading {
    color: #888;
    font-size: 12px
}

.ellipsis-anim {
    display: inline-block;
    min-width: 2px;
    min-height: 2px;
    box-shadow: 2px 0 currentColor,6px 0 currentColor,10px 0 currentColor;
    -webkit-animation: ellipsis-anim 1s infinite step-start both;
    animation: ellipsis-anim 1s infinite step-start both;
    *zoom: expression(this.innerHTML ='...')
}

.autoScroll {
    overflow-x: hidden;
    overflow-y: hidden
}

    .autoScroll:hover {
        overflow-x: auto
    }

.autoScrollXandY {
    overflow-x: hidden;
    overflow-y: hidden
}

    .autoScrollXandY:hover {
        overflow: auto
    }

    .autoScroll::-webkit-scrollbar-track-piece, .autoScrollXandY::-webkit-scrollbar-track-piece {
        width: 8px;
        background-color: #f5f5f5;
        border-radius: 6px
    }

    .autoScroll::-webkit-scrollbar, .autoScrollXandY::-webkit-scrollbar {
        width: 8px;
        height: 8px
    }

    .autoScroll::-webkit-scrollbar-thumb, .autoScrollXandY::-webkit-scrollbar-thumb {
        height: 50px;
        background: #bec7d5;
        border-radius: 6px
    }

        .autoScroll::-webkit-scrollbar-thumb:hover, .autoScrollXandY::-webkit-scrollbar-thumb:hover {
            background: #91a0b5
        }

.section-body .slideBox {
    border-radius: inherit
}

.section-body.padding10_15 .slideBox {
    border-radius: 4px
}

.slideBox {
    overflow: hidden;
    width: 100%;
    position: relative
}

    .slideBox .slideImgs {
        position: absolute;
        left: 0;
        top: 0;
        height: inherit;
        border-radius: inherit;
        overflow: hidden
    }

        .slideBox .slideImgs li {
            position: relative;
            text-align: center;
            overflow: hidden;
            height: inherit;
            border-bottom: 0;
            border-radius: inherit
        }

            .slideBox .slideImgs li:nth-child(even) {
                background-color: #fff
            }

    .slideBox.pictureRotationBottom .slideTitles {
        display: none;
        background-image: url("/seeyon/portal/images/opacity/black50.png");
        width: 100%;
        height: 35px;
        line-height: 35px;
        text-align: left;
        font-size: 14px;
        position: absolute;
        bottom: 0;
        z-index: 2;
        color: #fff;
        overflow: hidden
    }

        .slideBox.pictureRotationBottom .slideTitles p {
            color: #fff;
            padding: 0 20px;
            text-align: left;
            font-size: 14px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden
        }

        .slideBox.pictureRotationBottom .slideTitles a {
            color: #fff;
            cursor: pointer;
            opacity: .9;
            filter: alpha(opacity=90)
        }

    .slideBox.pictureRotationLeft .slideTitles {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 150px;
        background-image: url("/seeyon/portal/images/opacity/black50.png");
        color: #fff;
        font-size: 14px;
        z-index: 2
    }

        .slideBox.pictureRotationLeft .slideTitles div {
            height: 33.3%;
            line-height: 25px;
            overflow-y: hidden;
            position: relative;
            cursor: pointer
        }

        .slideBox.pictureRotationLeft .slideTitles p {
            height: 75px;
            top: 50%;
            left: 20px;
            right: 10px;
            margin-top: -38px;
            position: absolute;
            overflow: hidden;
            display: block
        }

    .slideBox li a {
        color: #fff;
        cursor: pointer;
        display: block
    }

    .slideBox.pictureRotationLeft .slideTitles div.current {
        background-image: url("/seeyon/portal/images/opacity/black50.png")
    }

        .slideBox.pictureRotationLeft .slideTitles div.current:before {
            position: absolute;
            content: "";
            display: block;
            width: 5px;
            height: 100%;
            background-color: #2490f8
        }

    .slideBox .showPrev, .slideBox .showNext {
        display: none;
        position: absolute;
        cursor: pointer;
        width: 50px;
        background: #000;
        color: #fff;
        filter: alpha(opacity=30);
        opacity: .3;
        font-size: 22px;
        text-align: center
    }

        .slideBox .showPrev.pageBtnHorizontal, .slideBox .showNext.pageBtnHorizontal {
            top: 50%;
            margin-top: -25px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%
        }

        .slideBox .showPrev.pageBtnVertical, .slideBox .showNext.pageBtnVertical {
            left: 50%;
            margin-left: 50px;
            height: 30px;
            line-height: 30px
        }

        .slideBox .showPrev.pageBtnHorizontal {
            left: 30px
        }

        .slideBox .showNext.pageBtnHorizontal {
            right: 30px
        }

        .slideBox .showPrev.pageBtnVertical {
            top: 0
        }

        .slideBox .showNext.pageBtnVertical {
            bottom: 0
        }

        .slideBox .showPrev:hover, .slideBox .showNext:hover {
            filter: alpha(opacity=60);
            opacity: .6
        }

    .slideBox .slideNum {
        position: absolute;
        right: 6px;
        bottom: 8px;
        z-index: 3
    }

        .slideBox .slideNum span {
            width: 14px;
            height: 14px;
            display: inline-block;
            cursor: pointer;
            width: 8px;
            height: 8px;
            background-color: #fff;
            color: #fff;
            opacity: .3;
            filter: alpha(opacity=30);
            border-radius: 6px;
            margin: 0 6px;
            text-indent: -999em;
            text-align: left;
            color: #fff;
            font-family: "Verdana";
            transition: width .5s
        }

            .slideBox .slideNum span.active {
                opacity: 1;
                filter: alpha(opacity=100);
                background-color: #288def;
                width: 25px
            }

    .morePictureSection .morePhoto, .multiPictureSection .morePhoto, .pictureCardTemplete .morePhoto, .categoryPictureTitleAndBriefTemplete .morePhoto, .slideBox .morePhoto {
        width: 70px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        color: #fff;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 12px;
        z-index: 4;
        filter: alpha(opacity=20);
        background-color: #0e4266;
        opacity: 100;
        background-color: rgba(14,66,102,0.2);
        cursor: pointer;
        border-top-right-radius: inherit
    }

    .imgPlaceholer .close_slideImgs, .slideBox .close_slideImgs {
        position: absolute;
        left: 5px;
        top: 5px;
        font-size: 12px;
        z-index: 5;
        cursor: pointer;
        display: none;
        font-size: 16px;
        color: #fff
    }

        .imgPlaceholer .close_slideImgs:hover, .slideBox .close_slideImgs:hover {
            color: #288def
        }

.h300px {
    height: 300px
}

.h400px {
    height: 400px
}

.setImgDiv {
    position: relative
}

.removeImg {
    width: 16px;
    height: 16px;
    line-height: 14px;
    position: absolute;
    top: 2px;
    left: 2px;
    text-align: center;
    cursor: pointer;
    background-color: #429cc2;
    color: #fff;
    font-size: 14px;
    border-radius: 50%
}

.borderfillcolor {
    width: 24px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 4px;
    margin-left: 5px
}

.t_middle {
    vertical-align: middle
}

.only_table th {
    font-weight: bold
}

.only_table th, .only_table td {
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.only_table td {
    height: 35px !important;
    line-height: 20px !important;
    word-break: break-all
}

.float {
    float: left
}

.verport_chart {
    width: 30%;
    overflow: hidden;
    background-color: #ccc
}

.verport_table {
    width: 68%;
    margin-left: 15px
}

.verport_border {
    margin-top: 15px;
    overflow-x: inherit;
    overflow-y: inherit
}

    .verport_border .only_table {
        font-size: 12px
    }

.mg-select-control {
    position: relative;
    text-align: center;
    margin-bottom: 10px
}

    .mg-select-control .mg-select {
        width: 120px;
        margin-left: 6px;
        background-color: #fff;
        height: 28px;
        padding-left: 5px;
        border-radius: 4px;
        border: 1px solid #d4d4d4;
        font-size: 12px;
        color: #000;
        outline: 0;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background: url("../../images/reportTpl/arrow-down.png") no-repeat scroll right center transparent
    }

        .mg-select-control .mg-select:before {
            content: "\e61f";
            display: inline-block;
            width: 10px;
            height: 10px;
            position: relative;
            right: 5px
        }

    .mg-select-control select::-ms-expand {
        display: none
    }

    .mg-select-control span {
        font-size: 12px;
        color: #666;
        width: 72px;
        text-align: right;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

.penetrate_enable {
    color: #318ed9;
    cursor: pointer
}

.twoRowtextEllipsis {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.threeRowtextEllipsis {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.vp-xls2_16_color {
    color: #2fb266
}

.vp-WpsWord_color {
    color: #11b5d2
}

.vp-txt_16_color {
    color: #7e8eb4
}

.vp-pdf_16_color {
    color: #f86262
}

.vp-doc_16_color {
    color: #4a90e2
}

.vp-xls_16_color {
    color: #06d122
}

.formStatisticsGridDiv table th, .formStatisticsGridDiv table td {
    text-align: center
}

.formQueryResultDiv table th, .formQueryResultDiv table th {
    font-weight: bold;
    text-align: center
}

.signature_16, .meeting_inform_16, .specify_fallback_16, .meeting_join_16, .vp-meeting_join_16 {
    color: #4a9ff2
}

.vp-meeting_pause_16, .meeting_pause_16 {
    color: #fdaa3f
}

.statisticalCcope {
    background-color: #f5f5f5;
    text-align: center;
    font-size: 14px
}

.only_table .rankingTr1 .rankingIcon {
    background-color: #ff5b00
}

.only_table .rankingTr2 .rankingIcon {
    background-color: #ff8b00
}

.only_table .rankingTr3 .rankingIcon {
    background-color: #ff9e00
}

.only_table .rankingIcon {
    background: #8797a1;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    color: #fff;
    display: inline-block;
    line-height: 20px;
    font-size: 12px;
    text-align: center
}

.wfRankTemplete .wfRankTable {
    border: 0
}

    .wfRankTemplete .wfRankTable th {
        border-bottom: 1px solid #d2d2d2;
        border-right: 0;
        background: 0;
        text-align: left;
        color: #111
    }

        .wfRankTemplete .wfRankTable th.columnRowDiv {
            line-height: 35px !important
        }

    .wfRankTemplete .wfRankTable td {
        border-right: 0;
        text-align: left
    }

        .wfRankTemplete .wfRankTable td.statisticalCcope {
            text-align: center
        }

.fieldArea, .filterButtons {
    float: left;
    padding-left: 20px;
    cursor: pointer
}

    .fieldArea label {
        display: block;
        font-size: 12px;
        line-height: 24px;
        color: #666;
        overflow: hidden;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        white-space: nowrap
    }

    .fieldArea input[type='text'] {
        width: 140px;
        margin-top: 5px
    }

        .fieldArea input[type='text'].hasIcon {
            width: 120px
        }

    .fieldArea select.xiala {
        width: 150px
    }

    .fieldArea .vportal {
        font-size: 18px
    }

    .fieldArea .connectingLine {
        width: 20px;
        text-align: center;
        display: inline-block
    }

    .fieldArea .dateField {
        display: inline-block;
        width: 142px
    }

.filterButtons {
    height: 56px;
    line-height: 56px
}

    .filterButtons .common_button {
        vertical-align: bottom;
        outline: 0;
        cursor: pointer
    }

.filterButtons {
    width: 162px
}

.dbType_default {
    max-width: 142px
}

.dbType_TIMESTAMP {
    max-width: 396px
}

.pictureTitle .articel_title_span {
    max-height: 40px;
    height: 40px;
    overflow: hidden;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: top
}

.pictureTitle .articel_bottom {
    padding: 0;
    font-size: 12px;
    color: #999
}

.pictureTitleSimpleTemplete .articel_title_span {
    font-weight: normal
}

.pictureTitleSimpleTemplete .AlreadyRead .articel_title_span {
    font-weight: normal
}

.pictureTitle .AlreadyRead .articel_title_span {
    color: #999
}

.multiRowVariableColumn .col_first {
    width: 100%;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.column_box {
    overflow: auto
}

.column_table td {
    font-size: 14px
}

.column_table .articel_title {
    max-width: 100px
}

    .column_table .articel_title span {
        cursor: pointer
    }

    .column_table .articel_title.AlreadyRead span {
        font-weight: normal
    }

.column_table .articel_date {
    color: #999;
    font-size: 12px
}

.column_table .articel_other {
    color: #999;
    font-size: 12px
}

.articel_other_div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70px
}

.multiRowThreeColumnMaxWidth {
    max-width: 400px
}

.focusTag, .newTag {
    width: 34px;
    text-align: center;
    color: #fff;
    line-height: 18px;
    display: inline-block;
    font-size: 12px;
    border-radius: 2px
}

.focusTag {
    background: #ef8a39
}

.newTag {
    background: #288def
}

.topTag {
    color: red
}

.needInheritradius.categoryPictureTitleAndBriefTemplete {
    border-radius: inherit
}

.categoryPictureTitleAndBriefTemplete {
    position: relative
}

    .categoryPictureTitleAndBriefTemplete .autoScroll, .categoryPictureTitleAndBriefTemplete .categoryList_left_box {
        border-radius: inherit
    }

.categoryList_left_box {
    height: 278px;
    overflow: hidden;
    background-color: #fff
}

.categoryList_left span.categoryList_left_span {
    display: block;
    width: 177px;
    height: 69px;
    text-align: left;
    font-size: 14px;
    line-height: 68px;
    cursor: pointer
}

.categoryList_left i {
    margin: 0 10px 0 30px;
    font-size: 20px;
    display: inline-block;
    vertical-align: middle
}

.categoryList_left span.categoryList_left_span span {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 110px
}

.categoryList_left .categoryCurrent {
    background: #288def;
    color: #fff
}

.categoryList_left {
    float: left
}

.categoryList_left_content {
    float: right
}

    .categoryList_left_content img {
        margin-top: 15px
    }

    .categoryList_left_content .pictureTitleAndBrief {
        border-bottom: 0
    }

    .categoryList_left_content .articel_bottom {
        border-bottom: 1px solid #eef0f5
    }

.pictureTitleAndBrief .articel_bottom.two-record-bottom {
    padding: 10px 0 20px 0
}

.categoryList_left_content .articel_bottom .iconRight {
    text-align: right
}

    .categoryList_left_content .articel_bottom .iconRight span {
        cursor: pointer
    }

.categoryList_left_content .pictureTitleAndBrief .articel_title .articel_title_span {
    font-weight: bold
}

.categoryList_left_content .pictureTitleAndBrief .articel_title .AlreadyRead {
    font-weight: normal
}

.categoryList_left_content .pictureTitleAndBrief .articel_brief p {
    line-height: 20px;
    padding: 0;
    height: 40px;
    overflow: hidden;
    margin-bottom: 8px
}

.style_blue {
    border: 1px solid #288def
}

    .style_blue .categoryList_left span.categoryList_left_span {
        border-bottom: 1px solid #288def;
        border-right: 1px solid #288def;
        color: #288def
    }

        .style_blue .categoryList_left span.categoryList_left_span.categoryCurrent {
            background: #288def;
            color: #fff
        }

.style_red {
    border: 1px solid #d43e2a
}

    .style_red .categoryList_left span.categoryList_left_span {
        border-bottom: 1px solid #d43e2a;
        border-right: 1px solid #d43e2a;
        color: #d43e2a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

        .style_red .categoryList_left span.categoryList_left_span.categoryCurrent {
            background: #d43e2a;
            color: #fff
        }

.lastNoBorder {
    border-bottom: none !important
}

.noheaderBox .categoryList_left_box {
    height: 298px
}

.noheaderBox .categoryList_left span.categoryList_left_span {
    height: 74px;
    line-height: 74px
}

.noheaderBox .categoryList_left_content .pictureTitleAndBrief .articel_brief p {
    padding-top: 10px
}

.morePictureSection {
    position: relative;
    border-radius: inherit
}

    .morePictureSection ul {
        height: auto;
        overflow: hidden;
        margin-bottom: 20px
    }

        .morePictureSection ul:last-child {
            margin-bottom: 0
        }

        .morePictureSection ul li {
            height: 150px;
            float: left;
            margin: 0 20px 0 0;
            position: relative
        }

            .morePictureSection ul li:first-child {
                margin-left: 0
            }

            .morePictureSection ul li:last-child {
                margin-right: 0
            }

            .morePictureSection ul li a {
                display: block;
                cursor: pointer
            }

.morePictureImg {
    width: 100%;
    height: inherit;
    text-align: center
}

.morePictureTitle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35px;
    line-height: 35px;
    background-image: url("/seeyon/portal/images/opacity/black50.png");
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    text-align: left;
    padding: 0 10px;
    border-radius: 0 0 5px 5px
}

.messageReplyDiv {
    position: relative;
    _position: inherit;
    height: inherit
}

    .messageReplyDiv .replyDiv {
        position: absolute;
        z-index: 10;
        border: 1px #ccc solid;
        right: 0;
        bottom: 0;
        padding: 5px;
        background: #f7f7f7
    }

        .messageReplyDiv .replyDiv .header {
            height: 20px
        }

            .messageReplyDiv .replyDiv .header .title {
                float: left;
                margin-left: 5px;
                line-height: 20px;
                vertical-align: middle
            }

            .messageReplyDiv .replyDiv .header .close {
                float: right;
                background: url("/seeyon/common/skin/dist/images/leaveword/close.gif?V=V7_0_2018_06_30") no-repeat;
                height: 16px;
                width: 16px;
                cursor: pointer
            }

        .messageReplyDiv .replyDiv .content {
            padding: 0 5px
        }

            .messageReplyDiv .replyDiv .content .contentArea {
                width: 330px;
                height: 80px;
                border: 1px #afaea8 solid
            }

        .messageReplyDiv .replyDiv .footer {
            height: 30px;
            line-height: 30px;
            vertical-align: middle
        }

            .messageReplyDiv .replyDiv .footer .sentMessage {
                float: left;
                margin-left: 5px
            }

            .messageReplyDiv .replyDiv .footer .sentButton {
                float: right;
                margin-right: 5px;
                margin-top: 3px
            }

                .messageReplyDiv .replyDiv .footer .sentButton .sendAction {
                    border: 1px #ccc solid;
                    background: #f3f3f3;
                    line-height: 18px;
                    vertical-align: middle;
                    padding: 0 2px
                }

                .messageReplyDiv .replyDiv .footer .sentButton .fastBtn {
                    color: #666;
                    margin-right: 3px
                }

    .messageReplyDiv .sendAction {
        width: 50px;
        cursor: pointer
    }

    .messageReplyDiv .replyDivHidden {
        display: none;
        position: absolute;
        z-index: 10
    }

.leaveMessageContainer {
    height: inherit !important;
    overflow-y: hidden;
    overflow-x: hidden;
    border: 0 #ccc solid;
    z-index: 1;
    line-height: 20px
}

    .leaveMessageContainer:hover {
        overflow-y: auto
    }

    .leaveMessageContainer .messageDiv {
        font-size: 12px;
        padding-bottom: 5px;
        padding-top: 5px;
        border-bottom: 1px #ccc dashed
    }

    .leaveMessageContainer .messageDivHidden {
        font-size: 12px;
        padding-bottom: 5px;
        padding-top: 5px;
        border-bottom: 1px #ccc dashed;
        display: none
    }

    .leaveMessageContainer .messageDivFirst {
        padding-top: 0;
        font-size: 12px;
        padding-bottom: 5px;
        border-bottom: 1px #ccc dashed
    }

    .leaveMessageContainer .phtoImgTD {
        width: 50px;
        vertical-align: top
    }

    .leaveMessageContainer .phtoImg {
        height: 40px;
        width: 40px
    }

        .leaveMessageContainer .phtoImg img {
            border: 1px #dcdcdc solid
        }

    .leaveMessageContainer .messageContent {
        white-space: normal;
        word-break: break-all
    }

    .leaveMessageContainer .peopleName {
        color: #6eafd5
    }

        .leaveMessageContainer .peopleName .replySay {
            margin: 0 10px;
            color: #ccc
        }

    .leaveMessageContainer .peopleSay {
        margin: 0 20px
    }

    .leaveMessageContainer .peopleMessage {
        color: #666;
        line-height: 16px
    }

    .leaveMessageContainer .reply {
        color: #6eafd5;
        font-weight: bold;
        margin-right: 15px
    }

    .leaveMessageContainer .meaageTime {
        color: #999
    }

.fastLeaveMessageDiv {
    width: 450px;
    height: 100px;
    border: 1px #ccc solid;
    background: #f7f7f7;
    padding: 10px;
    position: relative
}

.leaveMessageContainer .phtoImg .radius {
    -moz-border-radius: 1000px;
    -khtml-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    border-radius: 1000px
}

.notice_fontSize_0 {
    font-size: 12px
}

.notice_fontSize_1 {
    font-size: 14px
}

.notice_fontSize_2 {
    font-size: 16px
}

.notice_fontSize_3 {
    font-size: 18px
}

.notice_fontSize_4 {
    font-size: 24px
}

.notice_fontStyle_0 {
    font-weight: normal
}

.notice_fontStyle_1 {
    font-weight: bolder
}

.notice_fontColor_0 {
    color: #4c6498
}

.notice_fontColor_1 {
    color: red
}

.notice_fontColor_2 {
    color: #ff7c03
}

.notice_fontColor_3 {
    color: #5c3d09
}

.notice_fontColor_4 {
    color: #ff0
}

.notice_fontColor_5 {
    color: #0f0
}

.notice_fontColor_6 {
    color: #00f
}

.notice_fontColor_7 {
    color: #f0f
}

.notice_fontColor_8 {
    color: #6e6e6e
}

.notice_fontColor_9 {
    color: #000
}

.sectionClass_noticeSection {
    font-size: 14px;
    line-height: normal;
    overflow: auto
}

.htmlTemplateSection {
    overflow: hidden
}

    .htmlTemplateSection:hover {
        overflow: auto
    }

    .htmlTemplateSection ul li {
        list-style: disc;
        list-style-position: inside
    }

    .htmlTemplateSection ol li {
        list-style: decimal;
        list-style-position: inside
    }

    .htmlTemplateSection ul li:nth-child(even) {
        background-color: transparent
    }

    .htmlTemplateSection strong {
        font-weight: bold
    }

    .htmlTemplateSection .portal_column_my {
        margin: 0 auto 0 auto;
        padding: 10px 0;
        font-family: "Microsoft YaHei";
        background: #99a6b0
    }

        .htmlTemplateSection .portal_column_my .list_item {
            float: left;
            margin-left: 20px;
            font-size: 12px;
            text-align: center;
            cursor: pointer
        }

            .htmlTemplateSection .portal_column_my .list_item .img_box {
                overflow: hidden;
                width: 60px;
                height: 60px;
                border-radius: 100px
            }

            .htmlTemplateSection .portal_column_my .list_item img {
                margin-top: -10px;
                margin-left: -5px;
                width: 72px
            }

        .htmlTemplateSection .portal_column_my .number {
            font-size: 22px;
            color: #fff;
            line-height: 1.5
        }

        .htmlTemplateSection .portal_column_my .text {
            font-size: 14px;
            color: #fff;
            line-height: 2
        }

.notice-show {
    position: absolute;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    right: 5px;
    top: 10px;
    z-index: 50;
    background-color: #2490f8;
    color: #fff
}

.messageReplyDiv .replyDiv {
    max-width: 335px;
    width: 95% !important
}

    .messageReplyDiv .replyDiv textarea {
        max-width: 334px;
        width: 100% !important
    }

.sectionClass_deeSection {
    overflow: hidden
}

    .sectionClass_deeSection:hover {
        overflow: hidden
    }

.chessBoardSection {
    width: 100%;
    height: auto
}

    .chessBoardSection .sectionArea {
        overflow-x: hidden;
        overflow-y: hidden
    }

        .chessBoardSection .sectionArea:hover {
            overflow-x: auto
        }

.chessboardtable {
    table-layout: fixed;
    float: left
}

.chessBoardSection .chessboardtable td {
    background: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
    font-size: 14px
}

.chessboardtable td a {
    cursor: pointer
}

    .chessboardtable td a b {
        font-weight: 600
    }

.chessboardtable .img_radius_50 {
    border-radius: 50%
}

.chessboardtable .img_radius_5 {
    border-radius: 5%
}

.hasImgIcon span.display_inline-block {
    vertical-align: middle
}

    .hasImgIcon span.display_inline-block img {
        vertical-align: top;
        margin-top: -2px
    }

.chessBoardSection .vp-official_statistics_16, .chessBoardSection .vp-posting_registration_thin_16, .chessBoardSection .vp-register_of_receipt_16, .chessBoardSection .vp-Reportform, .chessBoardSection .vp-infoTemplate_16, .chessBoardSection .vp-flow_template_16, .chessBoardSection .vp-format_template_16, .chessBoardSection .vp-form_temp_16, .chessBoardSection .vp-collaboration_16, .chessBoardSection .vp-search_16, .chessBoardSection .vp-statistics_16, .chessBoardSection .vp-icon_group, .vp-person_template_16 {
    color: #1f85ec
}

.chessBoardSection .vp-Reportform-follow, .chessBoardSection .vp-infoTemplate_16, .chessBoardSection .vp-lately_flow_template_16, .chessBoardSection .vp-lately_format_template_16, .chessBoardSection .vp-lately_text_type_template_16, .chessBoardSection .vp-recent_usage_statistics_16, .chessBoardSection .vp-lately_red_text_template_16 {
    color: #39d42b
}

.chessBoardSection .vp-red_text_template_16 {
    color: #fab715
}

.pictureTitleAndBrief {
    border-bottom: 1px solid #eef0f5;
    min-width: 270px
}

    .pictureTitleAndBrief.lastChild {
        border-bottom-color: transparent
    }

    .pictureTitleAndBrief .articel_title {
        font-size: 16px;
        line-height: 30px;
        color: #333;
        font-weight: bold
    }

        .pictureTitleAndBrief .articel_title.AlreadyRead {
            font-weight: normal
        }

        .pictureTitleAndBrief .articel_title .articel_title_span {
            color: #333;
            cursor: pointer
        }

    .pictureTitleAndBrief .articel_brief {
        font-size: 14px;
        color: #999
    }

        .pictureTitleAndBrief .articel_brief p {
            line-height: 24px;
            padding: 5px 0;
            height: 48px;
            overflow: hidden;
            margin-bottom: 21px
        }

    .pictureTitleAndBrief .articel_bottom {
        position: relative;
        padding: 10px 0;
        font-size: 12px;
        color: #999
    }

        .pictureTitleAndBrief .articel_bottom .iconRight {
            width: 100px;
            position: absolute;
            right: 0;
            top: 10px
        }

            .pictureTitleAndBrief .articel_bottom .iconRight i {
                margin-right: 5px;
                font-size: 18px
            }

            .pictureTitleAndBrief .articel_bottom .iconRight span:hover, .pictureTitleAndBrief .articel_bottom .iconRight span:hover i {
                color: #288def
            }

.pictureTitleAndBriefMaxWidth {
    max-width: 100px
}

.categoryList {
    margin: 5px 0 15px
}

.categoryList_top span {
    line-height: 30px;
    border-bottom: 3px solid transparent;
    display: inline-block;
    font-size: 14px;
    margin-right: 20px;
    cursor: pointer
}

.categoryList_top .categoryCurrent {
    border-bottom: 3px solid #3892ee
}

.pictureTitleAndBrief .articel_bottom .iconRight .vp-section-praised {
    color: #288def
}

.pictureCardTemplete {
    position: relative;
    border-radius: inherit
}

.pictureCardUl li {
    width: 245px;
    height: 335px;
    float: left;
    margin-right: 30px;
    background-color: #fff !important;
    border-radius: 4px;
    border: none !important
}

    .pictureCardUl li img {
        display: block;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0
    }

.cardBotttom {
    overflow: hidden;
    height: 165px;
    border: 1px solid #e0e0e0;
    border-top: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
}

.pictureCardUl .articel_title {
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    font-size: 16px;
    margin: 10px 10px 0;
    color: #333
}

    .pictureCardUl .articel_title.AlreadyRead {
        font-weight: normal
    }

.pictureCardUl .articel_brief {
    margin: 5px 10px 5px;
    color: #666;
    line-height: 20px;
    height: 40px
}

.pictureCardUl .articel_info {
    margin: 5px 10px 5px;
    font-size: 12px;
    color: #999
}

.interaction {
    border-top: 1px solid #e0e0e0;
    padding: 5px 0 4px;
    line-height: 30px;
    text-align: center;
    color: #eaecf3
}

    .interaction.margin_t_10 {
        margin-top: 10px
    }

    .interaction span {
        color: #999;
        display: inline-block;
        font-size: 14px;
        cursor: pointer;
        width: 117px
    }

        .interaction span i {
            margin-right: 5px;
            font-size: 18px
        }

            .interaction span i.vp-section-praised {
                color: #288def
            }

        .interaction span:hover i {
            color: #288def
        }

        .interaction span b {
            font-weight: normal
        }

.articel_title a {
    color: #333
}

.articel_brief a {
    color: #666
}

.bbsSectionCard .articel_title {
    margin-bottom: 0
}

.bbsSectionCard .articel_info {
    margin-top: 0;
    margin-bottom: 5px
}

    .bbsSectionCard .articel_info img {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: inline-block;
        vertical-align: middle
    }

.bbsSectionCard .cardBotttom {
    height: 175px
}

.lastReply {
    margin: 0 15px 10px;
    color: #666;
    line-height: 26px;
    height: 52px;
    font-size: 12px;
    background-color: #fcfcfc;
    border-radius: 4px
}

.noReply {
    text-align: center;
    line-height: 52px;
    color: #88b9c6
}

.nameAndReply {
    line-height: 18px;
    padding: 8px 10px 0;
    height: 36px;
    overflow: hidden
}

    .nameAndReply span {
        color: #288def;
        padding-right: 10px
    }

.goAndReply {
    background: url(../../images/bbs/goAndReply.png) no-repeat center center;
    width: 36px;
    height: 36px;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle
}

.nameAndReply .faceImg {
    display: inline
}

.multiRowVariableColumn {
    height: auto
}

.autoScroll {
    overflow-x: hidden;
    overflow-y: hidden
}

    .autoScroll:hover {
        overflow-x: auto
    }

.multiRowVariableColumn td {
    padding: 0
}

.multiRowVariableColumn .variableColumn {
    padding-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.multiRowVariableColumn .col_first {
    width: 100%;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.multiRowVariableColumn .titleText {
    cursor: pointer
}

.multiRowVariableColumn tr td:last-child {
    padding-right: 0
}

.multiRowVariableColumn .col_first .colDiv {
    min-width: 100px;
    font-size: 14px;
    cursor: default;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap
}

    .multiRowVariableColumn .col_first .colDiv.AlreadyRead {
        font-weight: normal;
        color: #999
    }

.columnRowDiv {
    overflow: hidden
}

#showPositionDiv {
    position: absolute;
    z-index: 500;
    padding: 5px;
    clear: both;
    width: 160px;
    border: 1px #d4d9e3 solid;
    display: none;
    background: #fff;
    border-radius: 4px
}

    #showPositionDiv .link_box {
        height: 30px;
        line-height: 30px
    }

        #showPositionDiv .link_box:hover {
            background-color: #eee
        }

    #showPositionDiv a {
        color: #999
    }

.variableColumnButton {
    padding: 0 7px;
    border: solid 1px #3498f9;
    color: #49a4ea;
    border-radius: 20px;
    height: 18px;
    line-height: 18px;
    cursor: pointer;
    font-size: 12px
}

    .variableColumnButton:hover {
        background-color: #49a4ea;
        color: #fff
    }

.vportal.vp-Stars, .vportal.vp-Halfstar {
    color: #ffb06b
}

.vportal.vp-noStars {
    color: #ccc
}

.ellipsis {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -moz-binding: url('ellipsis.xml#ellipsis')
}

.formQueryResultDiv table {
    min-width: 100%
}

.formQueryResultDiv td.erow {
    text-align: center
}

.iframeContentAreaBody {
    background-color: rgba(255,255,255,0.9);
    border: 0;
    overflow: auto;
    font-size: 12px;
    margin-top: 0;
    position: relative;
    height: 100%;
    border-radius: inherit
}

.weatherArea {
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    border-radius: inherit;
    overflow: hidden
}

.weatherBg1 {
    background-image: url(../../images/weather/weatherBg1.jpg)
}

.weatherBg2 {
    background-image: url(../../images/weather/weatherBg2.jpg)
}

.weatherBg0 {
    background: transparent
}

.weatherArea .iconDiv {
    width: 40px;
    height: 40px;
    line-height: 40px;
    vertical-align: middle
}

.weatherArea i {
    width: 40px;
    height: 40px;
    font-size: 40px;
    vertical-align: middle
}

.weatherArea .weatherText {
    vertical-align: middle;
    text-align: left;
    padding-left: 4px;
    line-height: 16px
}

    .weatherArea .weatherText b {
        font-size: 18px;
        line-height: 18px;
        font-weight: normal
    }

    .weatherArea .weatherText p {
        font-size: 12px;
        line-height: 18px
    }

        .weatherArea .weatherText p span {
            cursor: pointer
        }

            .weatherArea .weatherText p span.weatherTextInfo {
                cursor: default
            }

.weather {
    display: none;
    border-radius: inherit
}

.clockTemplete {
    position: relative;
    height: 200px;
    opacity: 0
}

    .clockTemplete .clock {
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 900px;
        text-align: center
    }

    .clockTemplete .digit {
        width: 22px;
        height: 34px;
        margin: 0 2px;
        position: relative;
        display: inline-block
    }

        .clockTemplete .digit .segment {
            background: #c00;
            border-radius: 5px;
            position: absolute;
            opacity: .06;
            transition: opacity .2s;
            -webkit-transition: opacity .2s;
            -ms-transition: opacity .2s;
            -moz-transition: opacity .2s;
            -o-transition: opacity .2s
        }

            .clockTemplete .digit .segment.on, .separator {
                opacity: 1;
                transition: opacity 0;
                -webkit-transition: opacity 0;
                -ms-transition: opacity 0;
                -moz-transition: opacity 0;
                -o-transition: opacity 0
            }

    .clockTemplete .separator {
        width: 4px;
        height: 5px;
        background: #c00;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        top: -9px
    }

    .clockTemplete .digit .segment:nth-child(1) {
        top: 0;
        left: 4px;
        right: 4px;
        height: 4px
    }

    .clockTemplete .digit .segment:nth-child(2) {
        top: 4px;
        right: 0;
        width: 4px;
        height: 12px
    }

    .clockTemplete .digit .segment:nth-child(3) {
        bottom: 4px;
        right: 0;
        width: 4px;
        height: 12px
    }

    .clockTemplete .digit .segment:nth-child(4) {
        bottom: 0;
        right: 4px;
        height: 4px;
        left: 4px
    }

    .clockTemplete .digit .segment:nth-child(5) {
        bottom: 4px;
        left: 0;
        width: 4px;
        height: 12px
    }

    .clockTemplete .digit .segment:nth-child(6) {
        top: 4px;
        left: 0;
        width: 4px;
        height: 12px
    }

    .clockTemplete .digit .segment:nth-child(7) {
        bottom: 15px;
        right: 4px;
        left: 4px;
        height: 4px
    }

.common-clock {
    height: 60px;
    display: none
}

    .common-clock .clock-hours-1, .common-clock .clock-minus-1, .common-clock .clock-second-1, .common-clock .clock-separator {
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        color: #333;
        float: left;
        margin: 0 3px
    }

    .common-clock .clock-separator {
        opacity: 0
    }

.bulTextList {
    position: relative;
    width: 100%;
    height: 50px
}

.bulScroll2 {
    border-radius: inherit
}

.bulTextList .listMiddle {
    position: absolute;
    top: 0;
    left: 5px;
    bottom: 0;
    right: 5px;
    background: #e32d15
}

.bulScroll2 .listMiddle {
    border-radius: inherit
}

.bulTextList .listMiddle .bulSliderDetail ul li {
    border: none !important;
    background-color: transparent
}

.bulTextList .listMiddle .bulTitle {
    position: absolute;
    width: 60px;
    height: 50px;
    left: 0;
    line-height: 50px;
    font-size: 26px;
    color: #ffd34c;
    text-align: center;
    z-index: 2
}

    .bulTextList .listMiddle .bulTitle .partBlack {
        position: absolute;
        width: 1px;
        top: 5px;
        bottom: 5px;
        right: 1px;
        background: rgba(0,0,0,.2)
    }

    .bulTextList .listMiddle .bulTitle .partWhite {
        position: absolute;
        width: 1px;
        top: 13px;
        bottom: 13px;
        right: 4px;
        background: rgba(255,255,255,.2)
    }

.bulTextList .listMiddle .bulContent {
    position: absolute;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #fff;
    text-align: left;
    z-index: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bulTextList .listMiddle .bulMore {
    position: absolute;
    width: 40px;
    height: 50px;
    right: 16px;
    line-height: 50px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    cursor: pointer
}

.bulTextList .listLeft {
    position: absolute;
    width: 10px;
    top: 0;
    left: 0;
    bottom: 0
}

    .bulTextList .listLeft .partTop {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        border-bottom-width: 5px;
        border-bottom-style: solid;
        border-left: 5px solid transparent;
        z-index: 2
    }

    .bulTextList .listLeft .partMiddle {
        position: absolute;
        width: 5px;
        left: 0;
        top: 5px;
        bottom: 5px;
        z-index: 2
    }

    .bulTextList .listLeft .partBottom {
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0;
        border-top-width: 5px;
        border-top-style: solid;
        border-left: 5px solid transparent;
        z-index: 2
    }

.bulTextList .listRight {
    position: absolute;
    width: 5px;
    top: 0;
    bottom: 0;
    right: 0
}

    .bulTextList .listRight .partTop {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        border-bottom-width: 5px;
        border-bottom-style: solid;
        border-right: 5px solid transparent;
        z-index: 2
    }

    .bulTextList .listRight .partMiddle {
        position: absolute;
        width: 5px;
        left: 0;
        top: 5px;
        bottom: 5px;
        z-index: 2
    }

    .bulTextList .listRight .partBottom {
        position: absolute;
        width: 0;
        height: 0;
        bottom: 0;
        border-top-width: 5px;
        border-top-style: solid;
        border-right: 5px solid transparent;
        z-index: 2
    }

.bulTextList .partTopOri {
    border-top-color: #e32d15
}

.bulTextList .partBottomOri {
    border-bottom-color: #e32d15
}

.bulTextList .partBackOri {
    background: #e32d15
}

.bulTextList .partTopShade {
    border-top-color: rgba(0,0,0,.2)
}

.bulTextList .partBottomShade {
    border-bottom-color: rgba(0,0,0,.2)
}

.bulTextList .partBackOri {
    background: #e32d15
}

.bulTextList .partBackShade {
    background: rgba(0,0,0,.2)
}

.bulSlider {
    position: absolute;
    height: 50px;
    left: 70px;
    right: 50px
}

    .bulSlider ul li:nth-child(even) {
        cursor: pointer
    }

.showTwoStyle ul li {
    float: left;
    width: 50% !important;
    position: relative
}

    .showTwoStyle ul li .showTwoStyle0 {
        width: auto !important;
        left: 0;
        right: 50px
    }

    .showTwoStyle ul li .showTwoStyle1 {
        width: auto !important;
        left: 50px;
        right: 0
    }

    .showTwoStyle ul li span {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.showSectionCard .articel_title {
    margin: 10px 0 0
}

.showSectionCard .interaction {
    border-top: 0;
    text-align: left;
    padding: 0
}

    .showSectionCard .interaction span {
        width: auto;
        padding-right: 20px;
        cursor: default
    }

        .showSectionCard .interaction span:hover i {
            color: #999
        }

.showSectionCard li img {
    display: block;
    border-bottom-right-radius: 4px !important;
    border-bottom-left-radius: 4px !important
}

.showSectionCardOnlyImg .articel_title, .showSectionCardOnlyImg .interaction {
    display: none
}

.showSectionCardOnlyImg li img {
    display: block;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px
}

.hidden {
    display: none
}

.only_table {
    border: 1px solid #d2d2d2;
    border-right: 0;
    font-size: 12px;
    min-width: 100%
}

.edit_table {
    border-bottom: 0
}

.only_table th {
    background: #b4ddf9;
    text-align: center;
    border-bottom: 1px solid #a6b4d2;
    border-right: 1px solid #a6b4d2;
    height: 30px;
    line-height: 30px;
    padding: 0 4px;
    text-align: left
}

.only_table td {
    border-right: 1px solid #d2d2d2;
    height: 30px;
    line-height: 30px;
    padding: 0 4px;
    text-align: left
}

.edit_table td {
    border-left: 0;
    border-bottom: 1px solid #d2d2d2;
    text-align: left
}

.only_table th div, .only_table td div {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.only_table th div {
    margin: 0 auto
}

.bigScreenDiv .only_table th {
    background: transparent
}

.bulTextList div.listMiddleNormal {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff
}

.bulTextList .listMiddle div.bulTitleNormal {
    color: #1f85ec
}

.bulTextList .listMiddle div.bulContentNormal {
    color: #8492af
}

.bulTextList .listMiddle .bulMoreNormal {
    color: #8492af
}

.bulTextList .listMiddle .bulContent span {
    cursor: pointer
}

.bulSlider.bulSliderNormal ul li:nth-child(even) {
    cursor: pointer
}

.bulTextList .listMiddle .bulTitle .partBlack {
    top: 13px;
    bottom: 13px;
    right: 5px
}

.showTwoStyle ul li {
    float: left;
    width: 50% !important;
    position: relative
}

    .showTwoStyle ul li .showTwoStyle0 {
        width: auto !important;
        left: 0;
        right: 50px
    }

    .showTwoStyle ul li .showTwoStyle1 {
        width: auto !important;
        left: 50px;
        right: 0
    }

    .showTwoStyle ul li span {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.multiRowVariableCol .col_first {
    width: 100%;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.col_first .columnRowDiv {
    position: relative
}

.multiRowVariableCol .col_first .columnRowDiv {
    font-weight: bold
}

.multiRowVariableCol .col_first .colDiv {
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap
}

    .multiRowVariableCol .col_first .colDiv.AlreadyRead {
        font-weight: normal;
        color: #111
    }

.setTopRow {
    width: 16px
}

    .setTopRow .setTop, .setTopRow .cancelTop {
        width: 16px;
        height: 16px;
        line-height: 16px;
        cursor: pointer;
        visibility: hidden
    }

tr:hover .setTop, tr:hover .cancelTop {
    visibility: visible
}

.setTopRow .setTop i, .setTopRow .cancelTop i {
    line-height: 16px;
    font-size: 14px
}

.setTopRow .setTop i {
    color: #4a9ff2
}

.setTopRow .cancelTop i {
    color: #999
}

.isTop {
    color: #4a9ff2;
    font-size: 14px;
    position: relative;
    top: -1px;
    font-weight: normal
}

.multiRowVariableColumn .vportal.form_text_16 {
    color: #59c63a
}

.multiRowVariableColumn .col_first .vp-ico16 {
    color: #8ed04b
}

    .multiRowVariableColumn .col_first .vp-ico16.important2_16, .multiRowVariableColumn .col_first .vp-ico16.important3_16, .multiRowVariableColumn .col_first .vp-ico16.important4_16, .multiRowVariableColumn .col_first .vp-ico16.important5_16 {
        color: red
    }

.multiRowVariableColumn .vp-section-attachment {
    color: #ef985e
}

.multiRowVariableColumn .col_first .vp-ico16.extended_red_16 {
    color: #ff6c00
}

.multiRowVariableColumn .col_first .vp-ico16.vp-attachment, .multiRowVariableColumn .col_first .vp-ico16.affix_16, .multiRowVariableColumn .col_first .vp-ico16.vp-section-attachment {
    color: #f4935c
}

.multiRowVariableColumn .col_first .vp-ico16.vp-signature_16, .multiRowVariableColumn .col_first .vp-ico16.signature_16 {
    color: #38adde
}

.multiRowVariableColumn .col_first .vp-ico16.vp-specify_fallback_16, .multiRowVariableColumn .col_first .vp-ico16.specify_fallback_16 {
    color: #ff6c00
}

.multiRowVariableColumn .col_first .vp-ico16.vp-extended_blue_16, .multiRowVariableColumn .col_first .vp-ico16.extended_blue_16 {
    color: #21ace7
}

.multiRowVariableColumn .col_first .vp-ico16.vp-extended_red_16, .multiRowVariableColumn .col_first .vp-ico16.extended_red_16 {
    color: #f66c3e
}

.multiRowVariableColumn .col_first .vp-ico16.vp-liuchengbianji {
    color: #ff6c00
}

.multiRowVariableColumn .col_first .vp-ico16.vp-flow3_16, .multiRowVariableColumn .col_first .vp-ico16.vp-flow1_16, .multiRowVariableColumn .col_first .vp-ico16.flow3_16, .multiRowVariableColumn .col_first .vp-ico16.flow1_16 {
    color: #449bc0
}

.multiRowVariableColumn .col_first .vp-ico16.vp-lately_flow_template_16, .multiRowVariableColumn .col_first .vp-ico16.lately_flow_template_16 {
    color: #3498da
}

.multiRowVariableColumn .col_first .vp-ico16.vp-important2_16, .multiRowVariableColumn .col_first .vp-ico16.important2_16, .multiRowVariableColumn .col_first .vp-ico16.vp-important3_16 {
    color: #fb3a36
}

.multiRowVariableColumn .col_first .vp-ico16.vp-task-milestone {
    color: #ff7905
}

.multiRowVariableColumn .col_first .vp-ico16.vp-task-risk, .multiRowVariableColumn .col_first .vp-ico16.vp-task-l-risk {
    color: #6cc4e9
}

.multiRowVariableColumn .col_first .vp-ico16.vp-task-m-risk {
    color: #fab715
}

.multiRowVariableColumn .col_first .vp-ico16.vp-task-h-risk {
    color: #fb3a36
}

.multiRowVariableColumn .col_first .vp-ico16.vp-collaboration_16, .multiRowVariableColumn .col_first .vp-ico16.vp-flow_template_16, .multiRowVariableColumn .col_first .vp-ico16.collaboration_16, .multiRowVariableColumn .col_first .vp-ico16.flow_template_16 {
    color: #377ef0
}

.multiRowVariableColumn .col_first .vp-ico16.vp-red_text_template_16, .multiRowVariableColumn .col_first .vp-ico16.vp-meeting_inform_16, .multiRowVariableColumn .col_first .vp-ico16.red_text_template_16, .multiRowVariableColumn .col_first .vp-ico16.meeting_inform_16 {
    color: #6dc82f
}

.multiRowVariableColumn .col_first .vp-ico16.vp-overduematters, .multiRowVariableColumn .col_first .vp-ico16.overduematters {
    color: #f66c3e
}

.multiRowVariableColumn .col_first .vp-ico16.vp-xls2_16, .multiRowVariableColumn .col_first .vp-ico16.xls2_16, .multiRowVariableColumn .col_first .vp-ico16.Office44_16, .multiRowVariableColumn .col_first .vp-ico16.office44_16, .multiRowVariableColumn .col_first .vp-ico16.officexls2_16 {
    color: #4bb36c
}

.multiRowVariableColumn .col_first .vp-ico16.vp-WpsWord, .multiRowVariableColumn .col_first .vp-ico16.WpsWord, .multiRowVariableColumn .col_first .vp-ico16.wps_16, .multiRowVariableColumn .col_first .vp-ico16.Office43_16, .multiRowVariableColumn .col_first .vp-ico16.office43_16, .multiRowVariableColumn .col_first .vp-ico16.officewps_16 {
    color: #36b6d0
}

.multiRowVariableColumn .col_first .vp-ico16.vp-txt_16, .multiRowVariableColumn .col_first .vp-ico16.txt_16, .multiRowVariableColumn .col_first .vp-ico16.officetxt_16 {
    color: #ffcd4a
}

.multiRowVariableColumn .col_first .vp-ico16.vp-pdf_16, .multiRowVariableColumn .col_first .vp-ico16.pdf_16, .multiRowVariableColumn .col_first .vp-ico16.Office45_16, .multiRowVariableColumn .col_first .vp-ico16.office45_16, .multiRowVariableColumn .col_first .vp-ico16.officepdf_16 {
    color: #f46065
}

.multiRowVariableColumn .col_first .vp-ico16.vp-doc_16, .multiRowVariableColumn .col_first .vp-ico16.officedoc_16, .multiRowVariableColumn .col_first .vp-ico16.doc_16, .multiRowVariableColumn .col_first .vp-ico16.Office41_16, .multiRowVariableColumn .col_first .vp-ico16.office41_16, .multiRowVariableColumn .col_first .vp-ico16.officedoc_16 {
    color: #3890de
}

.multiRowVariableColumn .col_first .vp-ico16.vp-xls_16, .multiRowVariableColumn .col_first .vp-ico16.xls_16, .multiRowVariableColumn .col_first .vp-ico16.Office42_16, .multiRowVariableColumn .col_first .vp-ico16.office42_16, .multiRowVariableColumn .col_first .vp-ico16.officexls_16 {
    color: #4bb36c
}

.dateCalender {
    user-select: none
}

.cal_head {
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    padding: 0 10px
}

    .cal_head .nowDayBig {
        font-size: 40px;
        font-family: "calenderFont";
        font-weight: 100;
        color: #96abbe;
        display: inline-block;
        text-align: center
    }

.cal_head_right {
    display: inline-block;
    vertical-align: middle;
    float: right;
    color: #535968;
    font-size: 14px
}

.cal_prev, .cal_next {
    cursor: pointer
}

.cal_date {
    display: inline-block;
    width: 100px;
    text-align: center
}

.dateCalender .week span {
    width: 28px;
    height: 28px;
    line-height: 28px;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer
}

.dateCalender span {
    color: #666
}

.dateCalender .week span.defaultCursor {
    cursor: default
}

.dateCalender .week span.hasEvent {
    position: relative
}

    .dateCalender .week span.hasEvent:before {
        content: ' ';
        display: inline-block;
        background-color: #53aaff;
        width: 4px;
        height: 4px;
        border-radius: 2px;
        position: absolute;
        right: 12px;
        bottom: -5px
    }

.dateCalender .selectedDay {
    color: #fff;
    background: #53aaff;
    font-size: 12px
}

.dateCalender table {
    color: #98a2ae;
    text-align: center
}

.dateCalender th {
    font-size: 14px;
    padding: 10px 0;
    text-align: center
}

.dateCalender td {
    padding: 5px 0;
    font-size: 14px
}

    .dateCalender td i.notThisM {
        font-style: normal;
        color: #dedede
    }

.dateCalender_switchView {
    width: 40px;
    height: 12px;
    margin: 10px auto;
    cursor: pointer;
    background-color: #e4eaee;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
    line-height: 12px;
    color: #b5bbc9
}

.scheduleListTab {
    padding-top: 12px;
    color: #53aaff;
    height: 24px;
    overflow: hidden
}

    .scheduleListTab span {
        float: left;
        display: inline-block;
        padding: 0 18px;
        margin-right: 12px;
        line-height: 22px;
        font-size: 12px;
        border: 1px solid #53aaff;
        border-radius: 12px;
        cursor: pointer
    }

.thisSelected {
    background-color: #53aaff;
    color: #fff
}

.scheduleListTab .tabMoreDiv {
    width: 30px;
    text-align: center;
    position: relative;
    display: none
}

    .scheduleListTab .tabMoreDiv div {
        position: absolute;
        display: none
    }

    .scheduleListTab .tabMoreDiv i {
        display: inline-block;
        width: 30px;
        height: 26px;
        text-align: center;
        line-height: 24px;
        font-size: 14px;
        color: #666
    }

    .scheduleListTab .tabMoreDiv:hover i {
        color: #53aaff
    }

.scheduleListTab.hasArrow .tabMoreDiv {
    display: inline-block
}

    .scheduleListTab.hasArrow .tabMoreDiv div {
        border: solid 1px #d4d9e3;
        background-color: #fff;
        box-shadow: 0 3px 7px 0 rgba(0,0,0,0.15);
        z-index: 2;
        min-width: 100px;
        position: absolute;
        right: 2px;
        top: 30px;
        padding: 5px;
        color: #666
    }

        .scheduleListTab.hasArrow .tabMoreDiv div::before {
            position: absolute;
            content: "";
            top: -9px;
            right: 3px;
            width: 15px;
            height: 15px;
            display: block;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            border-top: solid 1px #d4d9e3;
            border-right: solid 1px #d4d9e3;
            border-bottom: solid 1px #fff;
            border-left: solid 1px #fff;
            background-color: #fff
        }

        .scheduleListTab.hasArrow .tabMoreDiv div span {
            margin-right: 0;
            border-color: transparent;
            padding: 0;
            position: relative;
            border-radius: 0;
            display: block;
            width: 100%
        }

            .scheduleListTab.hasArrow .tabMoreDiv div span:hover {
                background-color: #53aaff;
                color: #fff !important
            }

    .scheduleListTab.hasArrow .tabMoreDiv:hover div {
        display: block
    }

.scheduleList {
    overflow: hidden
}

    .scheduleList:hover {
        overflow-y: auto
    }

    .scheduleList li {
        background: none !important;
        position: relative;
        border-bottom: 1px solid #efefef !important;
        padding: 14px 0 0;
        height: 44px
    }

.timeTag {
    position: absolute;
    left: 0;
    top: 14px;
    width: 46px;
    border-right: 2px solid #53aaff;
    height: 30px;
    text-align: center;
    line-height: 30px
}

    .timeTag span {
        display: block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden
    }

.titleAndInfo {
    padding-left: 56px
}

    .titleAndInfo p {
        line-height: 14px;
        height: 16px;
        overflow: hidden;
        font-size: 14px;
        padding-bottom: 2px;
        cursor: pointer
    }

    .titleAndInfo i {
        line-height: 14px;
        height: 14px;
        overflow: hidden;
        font-size: 12px;
        margin: 0;
        padding: 0;
        font-style: normal;
        display: block;
        color: #999
    }

.startToday .timeTag, .endToday .timeTag, .startAndEndToday .timeTag, .startAndEndTodayButShowName .timeTag {
    line-height: 14px
}

    .startToday .timeTag span:nth-child(even), .endToday .timeTag span:nth-child(even), .startAndEndToday .timeTag span:nth-child(even), .startAndEndTodayButShowName .timeTag span:nth-child(even) {
        color: #999
    }

.startAndEndToday .titleAndInfo p {
    line-height: 30px;
    height: 30px
}

.startAndEndToday .titleAndInfo i {
    display: none
}

.dateCalenderP1 {
    min-width: 210px;
    border-bottom: 1px solid #fafafa
}

.wideCalender .dateCalenderP1 {
    border-bottom: 0
}

.dateCalenderP2 {
    min-width: 210px
}

.wideCalender .dateCalenderP1 {
    float: left;
    padding-right: 15px;
    border-right: 1px solid #efefef;
    min-width: 100px
}

    .wideCalender .dateCalenderP1 .dateCalender {
        margin-top: 10px
    }

.wideCalender .dateCalenderP2 {
    min-width: 100px;
    float: right
}

    .wideCalender .dateCalenderP2 .scheduleListTab {
        border-top: 0
    }

.mIndicatorTitle {
    font-size: 16px;
    font-weight: bold;
    line-height: 20px
}

.mIndicatorMoreLink {
    font-size: 12px;
    color: #aaa;
    cursor: pointer
}

.indicatorTwocol ul {
    overflow: hidden
}

.indicatorTwocol li {
    width: 45%;
    float: left;
    padding: 0 2%;
    margin: 18px 0;
    text-align: center
}

    .indicatorTwocol li:nth-child(2n-1) {
        clear: both;
        border-right: solid 1px #cdd8dc
    }

    .indicatorTwocol li .subValue {
        font-size: 24px
    }

    .indicatorTwocol li .subName {
        font-size: 14px
    }

.indicatorOnecol li {
    padding: 0 10px;
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    clear: both
}

    .indicatorOnecol li:nth-child(2n-1) {
        background-color: #f1f1f1
    }

    .indicatorOnecol li .subValue {
        float: left;
        text-align: left
    }

    .indicatorOnecol li .subName {
        float: right;
        text-align: right
    }

    .indicatorOnecol li a {
        width: 100%;
        height: 30px;
        display: block;
        overflow: hidden
    }

.indicatorMainSub {
    height: auto;
    overflow: hidden
}

    .indicatorMainSub .mainInd {
        border-right: solid 1px #cdd8dc
    }

        .indicatorMainSub .mainInd p {
            padding: 0 10px;
            max-width: 150px;
            overflow: hidden
        }

    .indicatorMainSub ul {
        margin-left: 10px;
        height: auto;
        overflow: hidden
    }

        .indicatorMainSub ul li {
            width: 45%;
            float: left;
            margin: 18px 2%;
            text-align: center
        }

            .indicatorMainSub ul li:nth-child(2n-1) {
                clear: both
            }

    .indicatorMainSub .mainValue, .indicatorMainSub .subValue {
        font-size: 24px
    }

    .indicatorMainSub .mainName, .indicatorMainSub .subName {
        font-size: 14px
    }

.memorabilia-block {
    position: relative
}

    .memorabilia-block .memorabilia-show {
        position: absolute;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        right: 5px;
        top: 10px;
        z-index: 100;
        background-color: #2490f8;
        color: #fff
    }

.memorabilia-horizental {
    width: 100%;
    overflow: hidden
}

    .memorabilia-horizental:hover {
        overflow: auto
    }

    .memorabilia-horizental .memorabiliaDetail {
        overflow: hidden
    }

    .memorabilia-horizental .memorabilia-hor-item {
        position: relative;
        width: 150px;
        height: 170px;
        float: left
    }

        .memorabilia-horizental .memorabilia-hor-item .item-line {
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #fdab2c;
            left: 0;
            top: 49px;
            z-index: 10
        }

        .memorabilia-horizental .memorabilia-hor-item .item-detail {
            position: absolute;
            padding: 0 25px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 11
        }

            .memorabilia-horizental .memorabilia-hor-item .item-detail .item-time {
                width: 100%;
                text-align: center;
                font-size: 16px;
                color: #fdab2c;
                margin-top: 0;
                height: 26px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .memorabilia-horizental .memorabilia-hor-item .item-detail .item-dot {
                width: 5px;
                height: 5px;
                margin: 0 auto;
                border: 5px solid #fdab2c;
                border-radius: 100%;
                margin-top: 15px;
                background-color: #fff
            }

            .memorabilia-horizental .memorabilia-hor-item .item-detail .item-content {
                position: relative;
                width: 100%;
                font-size: 12px;
                color: #333;
                line-height: 20px;
                margin-top: 10px;
                max-height: 80px;
                word-break: break-all;
                text-align: center
            }

    .memorabilia-horizental .vportal {
        position: relative;
        float: left;
        display: block;
        margin-top: 40px;
        font-size: 22px
    }

.memorabilia-vertical-year {
    position: relative;
    overflow-y: hidden
}

    .memorabilia-vertical-year .memorabilia-vertical-year-contentDetail {
        position: absolute;
        left: 20px;
        right: 10px
    }

    .memorabilia-vertical-year:hover {
        overflow-y: auto
    }

    .memorabilia-vertical-year .memorabilia-vertical-year-detail {
        position: relative;
        border-left: 1px dashed #f5b64a;
        padding-top: 15px;
        padding-bottom: 10px;
        box-sizing: border-box;
        margin-top: 27px
    }

        .memorabilia-vertical-year .memorabilia-vertical-year-detail .node {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #f5b64a;
            border-radius: 100%;
            top: 0;
            left: -2px
        }

        .memorabilia-vertical-year .memorabilia-vertical-year-detail .node-year {
            position: absolute;
            top: -5px;
            left: 10px;
            font-size: 14px
        }

    .memorabilia-vertical-year .memorabilia-vertical-year-item {
        position: relative;
        height: 40px;
        margin: 15px 0;
        padding-left: 25px
    }

        .memorabilia-vertical-year .memorabilia-vertical-year-item .year-bubble {
            position: absolute;
            width: 25px;
            height: 25px;
            background-color: rgba(245,182,74,.3);
            color: #f5b64a;
            font-size: 14px;
            line-height: 25px;
            top: 0;
            left: -12px;
            z-index: 10;
            text-align: center;
            border-radius: 100%
        }

            .memorabilia-vertical-year .memorabilia-vertical-year-item .year-bubble .tag {
                position: absolute;
                border: 5px solid #f3f4f4;
                border-left-color: #59b5ff;
                width: 0;
                height: 0;
                right: -9px;
                top: 15px
            }

        .memorabilia-vertical-year .memorabilia-vertical-year-item .year-content {
            font-size: 14px;
            color: #333;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

            .memorabilia-vertical-year .memorabilia-vertical-year-item .year-content .year-time {
                font-size: 16px;
                color: #f5b64a;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .memorabilia-vertical-year .memorabilia-vertical-year-item .year-content .year-detail {
                font-size: 14px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

    .memorabilia-vertical-year .first-item {
        position: absolute;
        width: 100%
    }

        .memorabilia-vertical-year .first-item .vportal {
            position: absolute;
            font-size: 22px;
            color: #f5b64a;
            left: -7px
        }

        .memorabilia-vertical-year .first-item .first-item-detail {
            position: absolute;
            left: 25px;
            right: 25px
        }

            .memorabilia-vertical-year .first-item .first-item-detail .year-time {
                font-size: 16px;
                color: #f5b64a;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .memorabilia-vertical-year .first-item .first-item-detail .year-detail {
                font-size: 14px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

.rateProgress_box {
    position: relative;
    overflow: hidden;
    width: 76px;
    height: 6px;
    border: solid 1px #dedede;
    border-radius: 10px;
    box-shadow: inset 2px 2px 2px #efefef
}

    .rateProgress_box .rateProgress_red {
        position: absolute;
        top: -1px;
        left: 0;
        width: 18%;
        height: 8px;
        border-radius: 10px;
        background: #fc5a57
    }

    .rateProgress_box .rateProgress_blue {
        position: absolute;
        top: -1px;
        left: 0;
        width: 18%;
        height: 8px;
        border-radius: 10px;
        background: #42b3e5
    }

    .rateProgress_box .rateProgress_green {
        position: absolute;
        top: -1px;
        left: 0;
        width: 18%;
        height: 8px;
        border-radius: 10px;
        background: #41c400
    }

    .rateProgress_box .rateProgress_gray {
        position: absolute;
        top: -1px;
        left: 0;
        width: 18%;
        height: 8px;
        border-radius: 10px;
        background: #a5a6a7
    }

.myTaskTab {
    margin-bottom: 10px;
    color: #666;
    height: 26px;
    overflow: hidden
}

    .myTaskTab span {
        float: left;
        display: inline-block;
        min-width: 80px;
        border: 1px solid #ececec;
        border-left: 0;
        line-height: 24px;
        font-size: 12px;
        cursor: pointer;
        text-align: center
    }

        .myTaskTab span:first-child {
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            border-left: 1px solid #ececec
        }

        .myTaskTab span:last-of-type, .myTaskTab .tabMoreDiv:last-child {
            border-right: 1px solid #ececec;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px
        }

    .myTaskTab.hasArrow span:last-of-type {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .myTaskTab .thisSelected {
        border-color: #53aaff;
        background-color: #53aaff;
        color: #fff !important
    }

        .myTaskTab .thisSelected:first-child {
            border-color: #53aaff
        }

        .myTaskTab .thisSelected:last-of-type {
            border-color: #53aaff
        }

    .myTaskTab .tabMoreDiv {
        width: 30px;
        text-align: center;
        position: relative;
        border: 1px solid #ececec;
        border-left: 0;
        display: none
    }

        .myTaskTab .tabMoreDiv div {
            position: absolute;
            display: none
        }

        .myTaskTab .tabMoreDiv i {
            display: inline-block;
            width: 30px;
            height: 24px;
            text-align: center;
            line-height: 24px;
            font-size: 12px;
            color: #666
        }

        .myTaskTab .tabMoreDiv:hover i {
            color: #53aaff
        }

    .myTaskTab.hasArrow .tabMoreDiv {
        display: inline-block
    }

        .myTaskTab.hasArrow .tabMoreDiv div {
            border: solid 1px #d4d9e3;
            background-color: #fff;
            box-shadow: 0 3px 7px 0 rgba(0,0,0,0.15);
            z-index: 2;
            min-width: 100px;
            position: absolute;
            right: 2px;
            top: 30px;
            padding: 5px 0
        }

            .myTaskTab.hasArrow .tabMoreDiv div::before {
                position: absolute;
                content: "";
                top: -9px;
                right: 3px;
                width: 15px;
                height: 15px;
                display: block;
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                border-top: solid 1px #d4d9e3;
                border-right: solid 1px #d4d9e3;
                border-bottom: solid 1px #fff;
                border-left: solid 1px #fff;
                background-color: #fff
            }

            .myTaskTab.hasArrow .tabMoreDiv div span {
                margin-right: 0;
                border-color: transparent;
                padding: 0;
                position: relative;
                border-radius: 0;
                display: block;
                width: 100%;
                border: none !important
            }

                .myTaskTab.hasArrow .tabMoreDiv div span:hover {
                    background-color: #53aaff;
                    color: #fff !important
                }

        .myTaskTab.hasArrow .tabMoreDiv:hover div {
            display: block
        }

.taskListTemplate tr td.col_first {
    font-size: 14px
}

.taskListTemplate .dobuleLineTable tr {
    background-color: transparent !important;
    border-bottom: none !important
}

.dobuleLineTable .columnRowDiv, .dobuleLineTable td .columnRowDiv {
    height: 20px;
    line-height: 20px;
    padding-top: 10px
}

.dobuleLineTable .hasBottomBorder td {
    height: 22px;
    line-height: 22px;
    padding-bottom: 6px;
    padding-top: 0;
    border-bottom: 1px solid #efefef
}

    .dobuleLineTable .hasBottomBorder td.tableTDcommon {
        padding-bottom: 2px
    }

        .dobuleLineTable .hasBottomBorder td.tableTDcommon td {
            border-bottom: 0
        }

.stateMore {
    position: absolute;
    width: 100px;
    height: 100px;
    right: -40px;
    display: none;
    top: 25px;
    border: solid 1px #d4d9e3;
    background-color: #fff;
    box-shadow: 0 3px 7px 0 rgba(0,0,0,0.15);
    z-index: 2
}

    .stateMore::after {
        position: absolute;
        content: "";
        top: -16px;
        right: 0;
        width: 100%;
        height: 16px
    }

    .stateMore::before {
        position: absolute;
        content: "";
        top: -9px;
        right: 45px;
        width: 15px;
        height: 15px;
        display: block;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        border-top: solid 1px #d4d9e3;
        border-right: solid 1px #d4d9e3;
        border-bottom: solid 1px #fff;
        border-left: solid 1px #fff;
        background-color: #fff
    }

    .stateMore span {
        display: block;
        line-height: 25px;
        position: relative;
        color: #666 !important
    }

        .stateMore span i {
            color: #fff
        }

        .hasStateMore .stateMore span:hover, .stateMore span.stateSelected, .stateMore span.stateSelected[onclick]:hover {
            background-color: #53aaff;
            color: #fff !important
        }

            .hasStateMore .stateMore span:hover i {
                color: #53aaff
            }

.hasStateMore .stateMore span.stateSelected:hover i {
    color: #fff
}

.hasStateMore {
    position: relative
}

    .hasStateMore:hover .stateMore {
        display: block;
        text-align: center
    }

.showPostionTop .stateMore {
    bottom: 25px;
    top: auto
}

    .showPostionTop .stateMore::after {
        bottom: -11px;
        top: auto
    }

    .showPostionTop .stateMore::before {
        bottom: -9px;
        top: auto;
        transform: rotate(135deg)
    }

.multiRowVariableColumn .hasStateMoreTd {
    overflow: visible
}

    .multiRowVariableColumn .hasStateMoreTd a {
        color: #999
    }

input[type="text"].changeProgress {
    width: 22px;
    text-align: center;
    border-color: transparent;
    background-color: transparent;
    outline: 0;
    height: 20px;
    border-radius: 5px;
    color: #999;
    text-align: right
}

.rateNumber {
    color: #999
}

input[type="text"].changeProgress:hover {
    border-color: #53aaff;
    background-color: #fff;
    color: #53aaff;
    text-align: center
}

input[type="text"].nohover:hover {
    border-color: transparent;
    background-color: transparent;
    text-align: right;
    color: #999
}

.bannerSection {
    overflow: hidden
}

.bannerSectionText {
    padding: 0 10px
}

.msgHeader {
    height: 125px;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#1F9BF6',endColorStr='#52B5FC',gradientType='1');
    background: -webkit-linear-gradient(left,#1f9bf6,#52b5fc);
    background: -o-linear-gradient(right,#1f9bf6,#52b5fc);
    background: -moz-linear-gradient(right,#1f9bf6,#52b5fc);
    background: linear-gradient(to right,#1f9bf6,#52b5fc);
    margin-bottom: 15px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.section-header + .section-body.inheritTopRadius {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.inheritTopRadius {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.msgHeader:hover .section-header-button {
    display: block
}

.msgTitleAndMoreIcon {
    height: 44px;
    color: #fff;
    position: relative
}

    .msgTitleAndMoreIcon .titleName {
        line-height: 44px;
        padding-left: 20px;
        font-size: 16px
    }

    .msgColumn .section-header-button span, .msgTitleAndMoreIcon .section-header-more {
        border: solid 1px #fff;
        border: solid 1px rgba(255,255,255,0.3)
    }

.personInfo ul {
    padding-left: 30px;
    color: #fff
}

    .personInfo ul li {
        border: none !important
    }

        .personInfo ul li img {
            width: 50px;
            height: 50px;
            border: solid 2px rgba(255,255,255,0.8);
            border-radius: 50%;
            float: left
        }

        .personInfo ul li b {
            display: block;
            font-size: 16px;
            line-height: 20px;
            padding-top: 10px;
            padding-left: 65px
        }

        .personInfo ul li span {
            display: inline-block;
            font-size: 12px;
            line-height: 48px;
            padding-left: 0;
            width: 32px;
            height: 32px
        }

.personMerger ul li img {
    background-color: none;
    width: 44px;
    height: 44px;
    display: inline-block;
    margin-left: -10px
}

.imgEllipsis i {
    font-size: 32px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 5px
}

.msgContent {
    margin: 0;
    overflow: hidden
}

    .msgContent:hover {
        overflow: auto
    }

.msgLi {
    height: auto;
    padding: 16px 16px 25px 0;
    position: relative
}

    .msgLi .msgLine {
        background-color: #c7cfdb;
        position: absolute;
        left: 61px;
        top: 0;
        width: 1px;
        min-height: 51px;
        height: 100%;
        z-index: 2
    }

    .msgLi .msgSpot {
        height: 18px;
        width: 7px;
        position: absolute;
        left: 58px;
        top: 20px;
        margin-top: -9px;
        z-index: 3
    }

        .msgLi .msgSpot span {
            background-color: #c7cfdb;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle
        }

    .msgLi .msgInfo {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 55px
    }

    .msgLi .msgInfoM {
        position: absolute;
        left: 0;
        top: 18px;
        margin-top: -17px;
        width: 55px;
        text-align: center
    }

    .msgLi .msgInfo span {
        display: block;
        color: #535968;
        font-size: 12px
    }

    .msgLi .msgInfo i {
        display: block;
        font-style: normal;
        color: #999;
        font-size: 12px
    }

    .msgLi .msgTitle {
        padding-top: 0;
        margin-top: -16px;
        padding-left: 80px;
        position: relative;
        font-weight: normal;
        font-size: 12px;
        cursor: pointer
    }

    .msgLi.read .msgTitle {
        font-weight: normal;
        color: #666
    }

.msgTab {
    margin-bottom: 16px;
    height: 26px;
    overflow: hidden
}

.messageBottom .msgTab {
    margin-bottom: 10px
}

.msgTab span {
    float: left;
    display: inline-block;
    padding: 0 15px;
    margin-right: 12px;
    line-height: 22px;
    font-size: 12px;
    border: 1px solid #53aaff;
    border-radius: 12px;
    cursor: pointer;
    color: #53aaff
}

    .msgTab span b {
        font-weight: normal
    }

    .msgTab span.thisSelected, .msgTab.hasArrow .tabMoreDiv .tabMoreDivIn span.thisSelected {
        color: #fff
    }

.msgTab .tabMoreDiv {
    width: 30px;
    text-align: center;
    position: relative;
    display: none
}

    .msgTab .tabMoreDiv .tabMoreDivIn {
        position: absolute;
        display: none
    }

    .msgTab .tabMoreDiv i {
        display: inline-block;
        width: 30px;
        height: 26px;
        text-align: center;
        line-height: 24px;
        font-size: 14px;
        color: #666
    }

.msgTab.hasArrow .tabMoreDiv:hover i {
    color: #53aaff
}

.msgTab.hasArrow .tabMoreDiv {
    display: inline-block
}

    .msgTab.hasArrow .tabMoreDiv .tabMoreDivIn {
        z-index: 4;
        min-width: 120px;
        position: absolute;
        right: 2px;
        top: 30px;
        padding: 5px
    }

        .msgTab.hasArrow .tabMoreDiv .tabMoreDivIn::before {
            position: absolute;
            content: "";
            top: -9px;
            right: 3px;
            width: 15px;
            height: 15px;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            border-top: solid 1px #d4d9e3;
            border-right: solid 1px #d4d9e3;
            border-bottom: solid 1px #fff;
            border-left: solid 1px #fff;
            background-color: #fff
        }

    .msgTab.hasArrow .tabMoreDiv .tabMoreDivInC {
        overflow-x: hidden;
        overflow-y: auto;
        max-height: 220px;
        position: relative
    }

    .msgTab.hasArrow .tabMoreDiv .tabMoreDivIn span {
        margin-right: 0;
        border: 0;
        padding: 0;
        position: relative;
        border-radius: 0;
        display: block;
        width: 100%;
        text-align: left;
        color: #666
    }

        .msgTab.hasArrow .tabMoreDiv .tabMoreDivIn span:hover {
            background-color: #53aaff;
            color: #fff
        }

        .msgTab.hasArrow .tabMoreDiv .tabMoreDivIn span b {
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: keep-all;
            white-space: nowrap;
            display: inline-block;
            max-width: 70px;
            vertical-align: top
        }

    .msgTab.hasArrow .tabMoreDiv:hover .tabMoreDivIn {
        display: block
    }

.msgTab.hasArrow.showPostionTop .tabMoreDiv .tabMoreDivIn {
    bottom: 25px;
    top: auto
}

    .msgTab.hasArrow.showPostionTop .tabMoreDiv .tabMoreDivIn::before {
        bottom: -9px;
        top: auto;
        transform: rotate(135deg)
    }

.msgColumn .common_button_icon {
    color: #8690a5;
    max-width: none
}

    .msgColumn .common_button_icon, .msgColumn .common_button_icon:hover {
        background: transparent
    }

        .msgColumn .common_button_icon i {
            width: 20px
        }

            .msgColumn .common_button_icon i:before {
                font-size: 20px;
                vertical-align: middle
            }

.section-body.padding15 .msgMarkedAsReadP {
    padding-left: 0
}

.section-body .msgMarkedAsReadP {
    padding-left: 12px
}

.all-magnet {
    width: 100%
}

.magnet-icon {
    overflow: hidden
}

.magnet-type-1 {
    overflow: hidden
}

    .magnet-type-1 .item {
        position: relative;
        width: 70px;
        float: left;
        cursor: pointer;
        margin-bottom: 0;
        padding-top: 5px;
        padding-bottom: 5px
    }

        .magnet-type-1 .item .magnetNum {
            position: absolute;
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            right: 4px;
            top: 0;
            background: red;
            border-radius: 100%;
            border: solid 1px #fff;
            border: solid 1px #fff;
            display: none
        }

        .magnet-type-1 .item .magnet-icon {
            width: 44px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            margin-left: 11px;
            background: #000;
            border: solid 1px rgba(255,255,255,0.5);
            box-shadow: 0 5px 14px 0 rgba(150,161,172,0.24)
        }

            .magnet-type-1 .item .magnet-icon.type-1 {
                border-radius: 10px
            }

            .magnet-type-1 .item .magnet-icon.type-2 {
                border-radius: 100%;
                box-shadow: 0 5px 14px 0 rgba(150,161,172,0.24);
                border: solid 1px rgba(255,255,255,0.5)
            }

            .magnet-type-1 .item .magnet-icon .vportal {
                font-size: 24px;
                line-height: 46px;
                color: #fff
            }

        .magnet-type-1 .item.magnet-add-1 .magnet-icon .vportal {
            font-size: 20px;
            line-height: 46px;
            color: #9c9c9c
        }

        .magnet-type-1 .item .magnet-name {
            width: 58px;
            height: 16px;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 5px;
            margin-left: 5px;
            font-size: 12px;
            text-align: center
        }

.magnet-type-2 {
    overflow: hidden
}

    .magnet-type-2 .item {
        position: relative;
        width: 80px;
        height: 80px;
        background: #000;
        margin-right: 10px;
        float: left;
        cursor: pointer;
        margin-bottom: 10px;
        border: solid 1px rgba(255,255,255,0.5);
        box-shadow: 0 5px 14px 0 rgba(150,161,172,0.24)
    }

        .magnet-type-2 .item .magnetNum {
            position: absolute;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            right: 8px;
            top: 4px;
            background: red;
            border: solid 1px #fff;
            border-radius: 100%;
            display: none
        }

        .magnet-type-2 .item.type-1 {
            border-radius: 10px
        }

        .magnet-type-2 .item .magnet-icon .vportal {
            font-size: 30px;
            color: #fff
        }

        .magnet-type-2 .item .magnet-icon {
            width: 30px;
            text-align: center;
            font-size: 12px;
            height: 30px;
            color: #fff;
            margin: 15px 25px 5px 25px
        }

        .magnet-type-2 .item .magnet-name {
            width: 58px;
            height: 16px;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-top: 5px;
            margin-left: 11px;
            font-size: 12px;
            color: #fff;
            text-align: center
        }

.magnet-type-3 {
    width: 100%;
    overflow: hidden;
    min-width: 171px
}

    .magnet-type-3 .item {
        position: relative;
        min-width: 171px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        box-sizing: border-box;
        margin-right: 10px;
        margin-bottom: 10px;
        float: left;
        cursor: pointer;
        overflow: hidden;
        background-color: #fff;
        border: solid 1px rgba(255,255,255,0.5);
        box-shadow: 0 5px 14px 0 rgba(150,161,172,0.24)
    }

        .magnet-type-3 .item .magnet-icon {
            width: 20px;
            height: inherit;
            margin-left: 25px;
            float: left
        }

        .magnet-type-3 .item .vportal {
            font-size: 20px;
            margin-right: 5px;
            line-height: 40px
        }

        .magnet-type-3 .item .magnet-name {
            margin-left: 5px;
            float: left;
            font-size: 14px
        }

            .magnet-type-3 .item .magnet-name .d_name {
                display: block;
                width: 85px;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

            .magnet-type-3 .item .magnet-name .d_num {
                display: block;
                float: right
            }

        .magnet-type-3 .item.type-radius {
            border-radius: 6px
        }

        .magnet-type-3 .item.type-1 {
            background: #000
        }

            .magnet-type-3 .item.type-1 .vportal {
                color: #fff
            }

            .magnet-type-3 .item.type-1 .magnet-name {
                color: #fff
            }

        .magnet-type-3 .item.type-2 {
            border: 1px solid #2453b3
        }

            .magnet-type-3 .item.type-2 .vportal {
                color: #2453b3
            }

            .magnet-type-3 .item.type-2 .magnet-name {
                color: #2453b3
            }

.magnet-type-4 {
    width: 100%;
    overflow: hidden
}

    .magnet-type-4 .item {
        width: 150px;
        height: 64px;
        float: left;
        margin-right: 24px;
        margin-bottom: 18px;
        background-size: cover;
        cursor: pointer;
        border-radius: 4px
    }

        .magnet-type-4 .item .magnet-icon {
            width: 62px;
            height: 30px;
            margin-top: 17px;
            box-sizing: border-box;
            border-right: 1px solid #fff;
            text-align: center;
            font-size: 25px;
            float: left
        }

        .magnet-type-4 .item .magnet-num {
            width: 62px;
            height: 30px;
            margin-top: 17px;
            box-sizing: border-box;
            border-right: 1px solid #fff;
            text-align: center;
            font-size: 25px;
            float: left
        }

        .magnet-type-4 .item .magnet-name {
            width: 85px;
            height: 64px;
            line-height: 64px;
            text-align: center;
            float: left;
            font-size: 12px
        }

.magnet-type-5 {
    width: 100%;
    overflow: hidden
}

    .magnet-type-5 .item {
        width: 140px;
        height: 76px;
        line-height: 76px;
        text-align: center;
        box-sizing: border-box;
        margin-right: 10px;
        margin-bottom: 10px;
        float: left;
        cursor: pointer;
        overflow: hidden
    }

        .magnet-type-5 .item .magnet-icon {
            margin-left: 30px;
            float: left
        }

        .magnet-type-5 .item .vportal {
            font-size: 20px;
            margin-right: 5px;
            line-height: 76px
        }

        .magnet-type-5 .item .magnet-name {
            margin-left: 5px;
            float: left;
            font-size: 14px
        }

.magnet-type-6 {
    width: 100%;
    overflow: hidden;
    min-width: 150px
}

    .magnet-type-6 .item.small-item {
        position: relative;
        min-width: 150px;
        height: 64px;
        margin-right: 24px;
        margin-bottom: 14px;
        float: left;
        cursor: pointer;
        border: solid 1px rgba(255,255,255,0.5);
        box-shadow: 0 5px 14px 0 rgba(150,161,172,0.24)
    }

        .magnet-type-6 .item.small-item.type-radius {
            border-radius: 6px
        }

    .magnet-type-6 .item.big-item.type-radius {
        border-radius: 6px
    }

    .magnet-type-6 .item.small-item .magnet-icon {
        width: 36px;
        height: 36px;
        float: left;
        margin-left: 14px;
        border-radius: 100%;
        text-align: center;
        margin-top: 16px;
        background: rgba(0,0,0,.1)
    }

        .magnet-type-6 .item.small-item .magnet-icon .vportal {
            line-height: 36px;
            font-size: 22px
        }

    .magnet-type-6 .item.small-item .magnet-content {
        height: 64px;
        float: right;
        margin-right: 12px
    }

        .magnet-type-6 .item.small-item .magnet-content span {
            display: block;
            width: 70px;
            line-height: 20px;
            font-size: 12px;
            float: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .magnet-type-6 .item.small-item .magnet-content .magnet-num {
            margin-top: 8px;
            margin-right: 8px;
            font-size: 30px;
            text-align: right;
            line-height: 30px
        }

        .magnet-type-6 .item.small-item .magnet-content .magnet-name {
            margin-right: 8px;
            font-size: 12px;
            text-align: right;
            line-height: 12px
        }

    .magnet-type-6 .item.big-item {
        position: relative;
        width: 200px;
        height: 60px;
        line-height: 60px;
        margin-right: 24px;
        margin-bottom: 14px;
        float: left;
        cursor: pointer
    }

        .magnet-type-6 .item.big-item .magnet-icon {
            margin-left: 35px;
            float: left;
            height: 25px;
            width: 25px;
            margin-top: 17px;
            line-height: 25px
        }

            .magnet-type-6 .item.big-item .magnet-icon .vportal {
                font-size: 22px
            }

        .magnet-type-6 .item.big-item .magnet-name {
            margin-left: 5px;
            float: left;
            width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .magnet-type-6 .item.big-item.type_6_num .magnet-icon {
            margin-left: 18px
        }

        .magnet-type-6 .item.big-item .magnet-num {
            margin-right: 19px;
            float: right;
            font-size: 30px;
            line-height: 60px
        }

.magnet-type-9 {
    width: 100%;
    overflow: hidden
}

    .magnet-type-9 .item {
        width: 150px;
        height: 70px;
        line-height: 70px;
        float: left;
        margin-right: 24px;
        margin-bottom: 24px;
        background-size: cover;
        text-align: center;
        font-size: 14px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.magnet-type-10 {
    width: 100%;
    overflow: hidden
}

    .magnet-type-10 .item {
        position: relative;
        width: 150px;
        float: left;
        margin-right: 24px;
        margin-bottom: 18px;
        cursor: pointer;
        position: relative
    }

        .magnet-type-10 .item .magnet-image {
            width: 100%;
            height: 70px;
            background-size: cover
        }

    .magnet-type-10 .add-item {
        text-align: center;
        font-size: 40px;
        line-height: 70px;
        background-color: #e5e6e7
    }

    .magnet-type-10 .item .magnet-name {
        width: 100%;
        text-align: center;
        font-size: 14px;
        margin-top: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.magnet-type-11 {
    position: relative;
    overflow: hidden;
    box-sizing: border-box
}

    .magnet-type-11 .magnet-title {
        position: absolute;
        width: 64px;
        top: 0;
        bottom: 0;
        background: #2453b3;
        font-size: 14px;
        color: #fff;
        text-align: center;
        float: left
    }

        .magnet-type-11 .magnet-title .tag {
            position: absolute;
            border: 5px solid #f3f4f4;
            border-left-color: #2453b3;
            width: 0;
            height: 0;
            right: -9px
        }

    .magnet-type-11 .content {
        margin-left: 64px;
        overflow: hidden
    }

    .magnet-type-11.noGroup .content {
        margin-left: 0;
        overflow: hidden
    }

    .magnet-type-11 .item {
        position: relative;
        float: left;
        overflow: hidden;
        cursor: pointer;
        padding: 10px
    }

        .magnet-type-11 .item .magnetNum {
            position: absolute;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            right: 1px;
            top: 1px;
            background: red;
            border-radius: 100%;
            border: solid 1px #fff;
            display: none
        }

        .magnet-type-11 .item .magnet-icon {
            width: 20px;
            float: left
        }

            .magnet-type-11 .item .magnet-icon .vportal {
                font-size: 19px;
                color: #000
            }

        .magnet-type-11 .item .magnet-name {
            width: 60px;
            float: left;
            margin-left: 5px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .magnet-type-11 .item.type-1 {
            width: 60px;
            padding: 10px
        }

            .magnet-type-11 .item.type-1 .magnet-icon {
                width: 35px;
                text-align: center;
                height: 35px;
                margin-left: 10px;
                line-height: 35px
            }

                .magnet-type-11 .item.type-1 .magnet-icon .vportal {
                    font-size: 32px;
                    color: #000
                }

            .magnet-type-11 .item.type-1 .magnet-name {
                width: 60px;
                height: 15px;
                margin-top: 5px;
                margin-left: 0;
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center
            }

        .magnet-type-11 .item.type-2 {
            width: 90px;
            height: 20px;
            padding: 10px
        }

            .magnet-type-11 .item.type-2 .magnet-icon {
                float: left
            }

                .magnet-type-11 .item.type-2 .magnet-icon .vportal {
                    font-size: 18px;
                    color: #000
                }

            .magnet-type-11 .item.type-2 .magnet-name {
                width: 56px;
                float: left;
                margin-left: 5px;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center
            }

            .magnet-type-11 .item.type-2.type-2-add .magnet-name {
                margin-top: 35px
            }

            .magnet-type-11 .item.type-2 .magnet-name .magnet-vice-name {
                width: 100%;
                margin-top: 5px;
                font-size: 14px;
                color: #999;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: left
            }

.magnet-type-12-one {
    width: 100%
}

    .magnet-type-12-one .group-item {
        position: relative;
        padding: 12px 0;
        margin: 0 18px
    }

        .magnet-type-12-one .group-item .group-name {
            position: absolute;
            left: 0;
            top: 20px;
            bottom: 20px;
            width: 86px;
            font-size: 14px;
            color: #fff;
            background: #49a4ea;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: keep-all;
            white-space: nowrap
        }

            .magnet-type-12-one .group-item .group-name span {
                display: inline-block;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -8px;
                margin-left: -28px;
                max-width: 70px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

        .magnet-type-12-one .group-item .tag {
            position: absolute;
            border: 5px solid transparent;
            border-left-color: #49a4ea;
            width: 0;
            height: 0;
            left: 86px;
            top: 50%;
            margin-top: -5px
        }

        .magnet-type-12-one .group-item .group-block {
            margin-left: 100px;
            overflow: auto;
            margin-top: 15px
        }

.magnet-type-12-two {
    width: 100%
}

    .magnet-type-12-two .group-item {
        position: relative;
        padding: 10px 21px
    }

        .magnet-type-12-two .group-item .group-name {
            width: 100%;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #ddd;
            font-size: 14px;
            color: #6c6c6c;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

            .magnet-type-12-two .group-item .group-name .tag {
                display: none
            }

        .magnet-type-12-two .group-item .group-block {
            width: 100%;
            margin-top: 12px;
            overflow: hidden
        }

.magnet-type-7 {
    width: 100%;
    overflow: hidden
}

    .magnet-type-7 .item {
        position: relative;
        float: left
    }

    .magnet-type-7 .item-1 {
        width: 70px;
        padding-top: 10px
    }

    .magnet-type-7 .item-2 {
        width: 100px
    }

    .magnet-type-7 .item .type-icon-1 {
        position: relative;
        width: 44px;
        height: 44px;
        line-height: 44px;
        border-radius: 100%;
        margin: 0 auto;
        text-align: center;
        border: 1px solid #2453b3;
        background-color: #fff;
        cursor: pointer;
        box-shadow: 0 5px 14px 0 rgba(150,161,172,0.24)
    }

    .magnet-type-7 .item .type-icon-2 {
        position: relative;
        width: 70px;
        height: 70px;
        line-height: 70px;
        border-radius: 100%;
        margin: 15px auto 10px auto;
        text-align: center;
        border: 1px solid #ff6634;
        background-color: #fff;
        box-shadow: 0 5px 10px 0 rgba(150,161,172,0.2);
        cursor: pointer;
        overflow: hidden
    }

    .magnet-type-7 .item .type-icon-1 .vportal {
        font-size: 24px;
        color: #2453b3;
        line-height: 46px
    }

    .magnet-type-7 .item .type-icon-2 .vportal {
        font-size: 30px;
        color: #ff6634;
        line-height: 70px
    }

    .magnet-type-7 .item .type-name {
        width: 100%;
        height: 16px;
        text-align: center;
        margin-top: 5px
    }

        .magnet-type-7 .item .type-name span {
            display: inline-block;
            width: 60px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
        }

    .magnet-type-7 .magnetNum {
        position: absolute;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        right: 8px;
        top: 10px;
        background: red;
        border-radius: 100%;
        border: solid 1px #fff;
        border: solid 1px #fff;
        display: none
    }

    .magnet-type-1 .item .vportal, .magnet-type-2 .item .vportal, .magnet-type-3 .item .vportal, .magnet-type-6 .item .vportal, .magnet-type-7 .item .vportal, .magnet-type-11 .item .vportal, .magnet-type-11 .item .vportal {
        display: block
    }

.columnGroup {
    width: 100%;
    height: auto;
    clear: both;
    float: left
}

.columnScroll {
    overflow-x: auto;
    overflow-y: hidden
}

.columnGroup-avatar {
    width: 240px;
    margin-right: 20px;
    height: 100%;
    float: left;
    overflow: hidden
}

.cAvatar-left {
    width: 70px;
    height: 70px;
    margin-left: 20px;
    margin-right: 15px;
    float: left
}

    .cAvatar-left img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 50%;
        cursor: pointer
    }

.cAvatar-right {
    width: 135px;
    float: right;
    height: 70px;
    position: relative
}

    .cAvatar-right .name {
        margin-top: 15px;
        margin-bottom: 5px;
        font-size: 18px;
        color: #111
    }

    .cAvatar-right .postName {
        font-size: 14px;
        color: #999
    }

.columnGroup-weather {
    width: 160px;
    height: 100%;
    margin-left: 20px;
    float: left;
    overflow: hidden
}

    .columnGroup-weather .weatherArea {
        margin-top: 15px
    }

    .columnGroup-weather i {
        width: 40px;
        height: 40px;
        font-size: 40px;
        color: #2490f8
    }

    .columnGroup-weather .weatherText {
        color: #999
    }

.columnGroup-magnet {
    float: left
}

.multiPictureSection {
    position: relative;
    border-radius: inherit
}

.multiPicture_img1 {
    height: 320px;
    margin-right: 10px;
    position: relative
}

.multiPicture_smallImg {
    width: 250px;
    height: 150px;
    margin: 0 10px;
    position: relative
}

.multiPictureTitle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    background-image: url("/seeyon/portal/images/opacity/black50.png");
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    opacity: .9;
    filter: alpha(opacity=90);
    font-size: 14px;
    text-align: left
}

.multiPictureSection a {
    display: block;
    cursor: pointer;
    text-align: center
}

.multiPicture-3 .multiPicture_img2, .multiPicture-3 .multiPicture_img3 {
    margin-right: 0
}

.multiPicture-5 .multiPicture_img4, .multiPicture-5 .multiPicture_img5 {
    margin-right: 0
}

.multiPicture-7 .multiPicture_img6, .multiPicture-7 .multiPicture_img7 {
    margin-right: 0
}

.multiPicture-9 .multiPicture_img8, .multiPicture-9 .multiPicture_img9 {
    margin-right: 0
}

.multiPicture-min .multiPicture_img1 {
    margin-bottom: 20px;
    margin-right: 0
}

.multiPicture-min .multiPicture_img2 {
    display: inline-block;
    margin-left: 0
}

.multiPicture-min .multiPicture_img3 {
    display: inline-block;
    margin-right: 0
}

.multiPicture-noImg {
    line-height: 150px;
    text-align: center
}

.multiPicture_img1, .multiPicture_smallImg {
    border-radius: 4px;
    overflow: hidden
}

.oneImageAndListTemplete table tr {
    border-bottom: none !important
}

.imgRadius {
    border-radius: 4px
}

.oneImageAndTitle {
    height: 280px;
    overflow: hidden
}

    .oneImageAndTitle a {
        display: block;
        position: relative;
        color: #fff !important;
        font-size: 14px;
        opacity: .9;
        filter: alpha(opacity=90)
    }

        .oneImageAndTitle a:hover {
            color: #fff !important
        }

        .oneImageAndTitle a h4 {
            display: block;
            position: absolute;
            top: 280px;
            left: 0;
            width: 100%;
            height: 35px;
            line-height: 35px;
            margin-top: -35px;
            border-radius: 0 0 4px 4px;
            background-image: url(/seeyon/portal/images/opacity/black50.png)
        }

            .oneImageAndTitle a h4 b {
                text-align: center;
                padding: 0 10px;
                font-weight: normal
            }

.oneImageAndListMaxWidth {
    max-width: 100px;
    padding-right: 50px
}

.multiRowVariableColumn tr td:last-child.narrowColumn {
    padding-top: 5px
}

.narrowColumn .oneImageAndListMaxWidth {
    max-width: 50px;
    padding-right: 50px
}

.multiRowVariableColumn td.padding_l_20 {
    padding-left: 20px
}

.multiRowVariableColumn td.padding_l_5 {
    padding-left: 5px
}

.penetrate_enable div {
    color: #318ed9;
    cursor: pointer
}

.summaryList {
    color: #f5f5f5
}

.wfCope {
    line-height: 16px
}

.summary_div {
    float: left;
    width: 23.9%;
    height: 84px;
    margin: 10px 1% 0 0px;
    min-width: 100px
}

.doubleLine .summary_div {
    width: 48.9%;
    margin-right: 1%
}

.summaryList .summary_div01 {
    background-color: #00a4ff
}

.summaryList .summary_div02 {
    background-color: #12b7f5
}

.summaryList .summary_div03 {
    background-color: #00cbdc
}

.summaryList .summary_div04 {
    background-color: #2ad2c8
}

.summaryList .wf_title {
    margin: 15px 0 15px 12px
}

.summaryList .wf_content {
    margin: 0 0 0 12px;
    font-size: 22px;
    height: 30px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.units {
    font-size: 14px
}

.reportQuota-container {
    position: relative;
    overflow: hidden
}

    .reportQuota-container:hover {
        overflow: auto
    }

    .reportQuota-container .click-enable {
        cursor: pointer
    }

    .reportQuota-container .reportQuota-left {
        width: 180px;
        text-align: center;
        display: inline-block;
        vertical-align: middle;
        top: 50%;
        position: absolute;
        margin-top: -32px
    }

        .reportQuota-container .reportQuota-left .reportQuota-mainIndex {
            position: relative
        }

            .reportQuota-container .reportQuota-left .reportQuota-mainIndex .reportQuota-mainIndex-name {
                color: #777;
                font-size: 14px
            }

            .reportQuota-container .reportQuota-left .reportQuota-mainIndex .reportQuota-mainIndex-value {
                margin: 10px;
                font-size: 30px;
                color: #ff5654;
                font-weight: bold
            }

    .reportQuota-container .reportQuota-right {
        height: 100%;
        overflow: hidden
    }

        .reportQuota-container .reportQuota-right .reportQuota-chatsContainer {
            min-height: 100px;
            overflow: hidden
        }

    .reportQuota-container .reportQuota-up .reportQuota-chatsContainer {
        height: 110px
    }

    .reportQuota-container .reportQuota-down ul {
        position: relative;
        list-style: none;
        overflow: hidden;
        text-align: left;
        padding: 0;
        margin: 0
    }

        .reportQuota-container .reportQuota-down ul li {
            background-color: transparent !important;
            position: relative;
            display: inline-block;
            text-align: center;
            margin: 0 10px 10px 10px;
            height: 99px
        }

            .reportQuota-container .reportQuota-down ul li .reportQuota-index {
                position: relative;
                top: 50%;
                transform: translateY(-50%)
            }

            .reportQuota-container .reportQuota-down ul li:after {
                content: "";
                height: 70%;
                width: 1px;
                background-color: #f4f4f4;
                position: absolute;
                top: 10px;
                right: -10px
            }

            .reportQuota-container .reportQuota-down ul li:last-child:after {
                display: none
            }

.reportQuotaStyle2 .index-value, .reportQuotaStyle3 .index-value {
    color: #26a3ed;
    font-size: 16px
}

.reportQuotaStyle2 .index-name, .reportQuotaStyle3 .index-name {
    color: #666;
    font-size: 14px
}

.reportQuota-container .reportQuota-up.reportQuota-up-style3 {
    height: 110px
}

.reportQuota-container .reportQuota-up .reportQuota-mainIndex {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: center
}

    .reportQuota-container .reportQuota-up .reportQuota-mainIndex .reportQuota-mainIndex-name {
        margin-top: 10px;
        color: #666;
        font-size: 14px
    }

    .reportQuota-container .reportQuota-up .reportQuota-mainIndex .reportQuota-mainIndex-value {
        font-size: 22px;
        color: #ff6d68;
        font-weight: bold
    }

.section-body .reportQuotaStyle4 ul li:nth-child(even) {
    background: transparent
}

.reportQuotaStyle4 {
    overflow: auto
}

    .reportQuotaStyle4 li {
        width: 185px;
        height: 99px;
        margin: 0 10px 10px 10px;
        padding: 0 5px 0 10px;
        float: left;
        color: #fff
    }

    .reportQuotaStyle4 .index-value {
        text-align: left;
        font-size: 30px;
        line-height: 40px
    }

    .reportQuotaStyle4 .index-name {
        font-size: 14px;
        line-height: 35px;
        padding-top: 10px
    }

.section-body .reportQuotaStyle5 ul li:nth-child(even) {
    background: transparent
}

.reportQuotaStyle5 {
    overflow: auto
}

    .reportQuotaStyle5 li {
        border: 1px solid #ddd !important;
        border-radius: 5px;
        width: 128px;
        height: 98px;
        margin: 0 10px 10px 10px;
        float: left;
        padding: 0 5px 0 0;
        position: relative;
        background: #fff !important
    }

    .reportQuotaStyle5 .reportQuotaIcon {
        display: block;
        float: left;
        margin-top: 30px;
        margin-left: 10px;
        bottom: 20px;
        height: 48px;
        width: 48px
    }

    .reportQuotaStyle5 .index-value {
        color: #5abeef;
        font-size: 22px;
        padding-top: 20px;
        text-align: center
    }

    .reportQuotaStyle5 .index-name {
        color: #666;
        font-size: 14px;
        text-align: center
    }

.formStatistics {
    width: 100%
}

    .formStatistics .formStatisticsBlock {
        padding: 0 10px
    }

.formStatisticsBlock .formName {
    width: 100%;
    font-size: 14px;
    color: #333
}

.formStatisticsBlock .formContent {
    width: 100%;
    overflow: hidden;
    border-bottom: 1px solid #d4d4d4;
    margin-bottom: 8px
}

.formContent .formItemBlock {
    width: 25%;
    float: left;
    margin-top: 8px;
    margin-bottom: 8px;
    overflow: hidden
}

    .formContent .formItemBlock .formItemName {
        width: 30%;
        float: left;
        font-size: 12px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .formContent .formItemBlock .formItemContent {
        width: 65%;
        float: right;
        font-size: 12px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.formSlider {
    position: relative;
    width: 100%
}

    .formSlider ul {
        overflow: hidden
    }

        .formSlider ul li {
            overflow: hidden
        }

            .formSlider ul li .formSlideItem {
                width: 178px;
                float: left;
                margin-right: 10px;
                margin-bottom: 8px
            }

            .formSlider ul li .formLiItem {
                border: 1px solid #d4d4d4;
                height: auto;
                overflow: hidden
            }

            .formSlider ul li .formItemImg {
                width: 168px;
                height: 168px;
                margin: auto;
                margin-top: 5px;
                margin-bottom: 5px;
                background-size: cover
            }

                .formSlider ul li .formItemImg img {
                    width: 100%
                }

            .formSlider ul li .formItemText {
                font-size: 14px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 20px;
                margin: auto;
                margin-top: 5px;
                margin-bottom: 5px;
                width: 168px;
                float: left
            }

.formPicList .formPicListItem {
    width: 100%;
    overflow: hidden;
    margin-bottom: 7px
}

    .formPicList .formPicListItem .formPicListImg {
        width: 85px;
        float: left
    }

        .formPicList .formPicListItem .formPicListImg img {
            width: 85px;
            height: 85px
        }

    .formPicList .formPicListItem .formPicListDetail {
        float: left;
        margin-left: 10px;
        margin-top: 6px
    }

        .formPicList .formPicListItem .formPicListDetail .detailBlock {
            width: 100%;
            overflow: hidden;
            margin-top: 6px
        }

            .formPicList .formPicListItem .formPicListDetail .detailBlock .detailName {
                width: 40%;
                float: left;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 12px;
                color: #999
            }

            .formPicList .formPicListItem .formPicListDetail .detailBlock .detailContent {
                width: 55%;
                float: right;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 12px;
                color: #333
            }

        .formPicList .formPicListItem .formPicListDetail .detailBlock-1 {
            width: 50%;
            float: left
        }

            .formPicList .formPicListItem .formPicListDetail .detailBlock-1 .detailTitle {
                margin-top: 30px;
                font-size: 14px;
                color: #333
            }

            .formPicList .formPicListItem .formPicListDetail .detailBlock-1 .detailContent {
                margin-top: 10px;
                font-size: 14px;
                color: #333
            }

        .formPicList .formPicListItem .formPicListDetail .detailBlock-2 {
            width: 50%;
            height: 100px;
            line-height: 100px;
            float: left;
            font-size: 20px;
            color: red
        }

.rankingList .rankingNum {
    width: 90%;
    display: inline-block
}

.section-body ul.rankingStyle0 li:nth-child(even), .section-body ul.rankingStyle1 li:nth-child(even) {
    background: 0
}

    .section-body ul.rankingStyle0 li:nth-child(even).rankingLi2 {
        background: #dededd
    }

.rankingStyle0 .rankingLi1, .rankingStyle0 .rankingLi2, .rankingStyle0 .rankingLi3 {
    font-size: 16px;
    text-align: center;
    line-height: 30px
}

.rankingStyle0 .rankingLi1 {
    width: 41%;
    position: relative;
    margin: 0 auto;
    height: 124px;
    background: #1f85ec;
    color: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5)
}

.rankingStyle0 .rankingLi2 {
    width: 30%;
    float: left;
    height: 114px;
    margin-top: -114px;
    background: #00cfc7 !important;
    color: #fff
}

.rankingStyle0 .rankingLi3 {
    width: 30%;
    float: right;
    height: 104px;
    margin-top: -104px;
    background: #b07ff8;
    color: #fff
}

    .rankingStyle0 .rankingLi1 .rankingIcon, .rankingStyle0 .rankingLi2 .rankingIcon, .rankingStyle0 .rankingLi3 .rankingIcon {
        font-size: 32px;
        line-height: 32px;
        display: block;
        text-align: center;
        background: 0;
        width: auto;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px
    }

.rankingStyle0 .rankingLi1 .rankingTitle {
    margin-top: 12px
}

.rankingStyle0 .rankingLi3 .rankingTitle {
    margin-top: -10px
}

.rankingLi1 .rankingTitle, .rankingLi2 .rankingTitle, .rankingLi3 .rankingTitle {
    display: block;
    margin: 0 5px;
    font-size: 14px
}

.rankingLi1 .rankingNum, .rankingLi2 .rankingNum, .rankingLi3 .rankingNum {
    font-size: 14px
}

.rankingStyle2 {
    min-width: 240px
}

    .rankingStyle2 .rankingLi1, .rankingStyle2 .rankingLi2, .rankingStyle2 .rankingLi3 {
        font-size: 14px;
        text-align: center;
        line-height: 16px;
        color: #333;
        background-color: #f7f7f7 !important
    }

    .rankingStyle2 .rankingLi1 {
        width: 40%;
        position: relative;
        margin: 0 auto;
        height: 125px
    }

    .rankingStyle2 .rankingLi2 {
        width: 30%;
        float: left;
        height: 115px;
        margin-top: -115px
    }

    .rankingStyle2 .rankingLi3 {
        width: 30%;
        float: right;
        height: 115px;
        margin-top: -115px
    }

    .rankingStyle2 .rankingLi1 .rankingNum {
        color: #eeb121;
        margin-top: 5px
    }

    .rankingStyle2 .rankingLi2 .rankingNum {
        color: #8a949b;
        margin-top: 5px
    }

    .rankingStyle2 .rankingLi3 .rankingNum {
        color: #f68731;
        margin-top: 5px
    }

    .rankingStyle2 .rankingLi1 .margin_top_4, .rankingStyle2 .rankingLi2 .margin_top_4, .rankingStyle2 .rankingLi3 .margin_top_4 {
        margin-top: 4px
    }

.rankingList .rankingLiDefault {
    position: relative;
    border-bottom: 1px solid #d4d9e3;
    line-height: 30px;
    padding: 10px 0
}

    .rankingList .rankingLiDefault .rankingIcon {
        background: #8797a1;
        border-radius: 10px;
        width: 20px;
        height: 20px;
        color: #fff;
        display: inline-block;
        line-height: 20px;
        font-size: 12px;
        text-align: center
    }

    .rankingList .rankingLiDefault .rankingTitle {
        line-height: 30px;
        padding: 0 60px 0 30px;
        display: block
    }

.rankingStyle1 .rankingLi1 .rankingIcon {
    background: #ff5b00
}

.rankingStyle1 .rankingLi1 td {
    color: #ff5b00
}

.rankingStyle1 .rankingLi2 .rankingIcon {
    background: #ff8b00
}

.rankingStyle1 .rankingLi2 td {
    color: #ff8b00
}

.rankingStyle1 .rankingLi3 .rankingIcon {
    background: #ff9e00
}

.rankingStyle1 .rankingLi3 td {
    color: #ff9e00
}

.firstField {
    text-align: center
}

.rankingList tr th {
    text-align: right
}

    .rankingList tr th.rank_Num {
        text-align: left;
        font-size: 14px;
        color: #111
    }

.rankingList tr span, .rank_title {
    font-size: 14px
}

.rankingLiDefault .rank_title {
    color: #111
}

.rank_stats_item, .rank_stats_title_item {
    text-align: right;
    padding: 0 10px
}

    .rank_stats_item .text_overflow, .rank_group_item .text_overflow {
        display: inline-block;
        max-width: 220px;
        vertical-align: middle
    }

.notAccess {
    font-size: 12px
}

.parent_div {
    position: relative;
    overflow: hidden
}

.child_div {
    position: absolute;
    background: 0;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px
}

    .child_div span {
        font-size: 12px
    }

    .child_div .rank_span {
        color: #fb9464;
        font-size: 14px
    }

    .child_div .no_data {
        font-size: 14px
    }

body {
    padding: 0;
    border: 0;
    margin: 0;
    background: 0
}

.data_li {
    height: 90px;
    width: 144px;
    background-color: #f9f9f9;
    display: inline-block;
    border: 1px dashed #dbdbdb;
    border-radius: 15px;
    margin: 20px 15px 0 15px;
    float: left
}

.li_time {
    height: 55px;
    border-radius: 15px 15px 0 0;
    text-align: center;
    line-height: 55px;
    color: #FFF
}

.li_name {
    line-height: 35px;
    text-align: center;
    font-size: 12px;
    color: #666;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 5px;
    word-wrap: normal
}

.zyxt {
    background-color: #57c9ca
}

.mblc {
    background-color: #b8a3df
}

.jh {
    background-color: #5ab1ef
}

.hy {
    background-color: #f7a256
}

.xw {
    background-color: #d97a80
}

.dc {
    background-color: #8c99b2
}

.li_time .num_txt {
    font-size: 22px
}

.stadic_head_height {
    overflow: hidden;
    height: 0
}

.stadic_body_top_bottom {
    bottom: 0;
    top: 0;
    overflow: hidden
}

.taskMember th {
    background-color: #e4e4e4;
    font-weight: normal
}

.taskMember a:hover {
    color: #318ed9
}

.taskMember a {
    cursor: pointer;
    color: #318ed9
}

.stadic_head_height {
    overflow: hidden;
    height: 0
}

.stadic_body_top_bottom {
    bottom: 0;
    top: 0;
    overflow: hidden
}

.taskOverdue th {
    background-color: #e4e4e4;
    font-weight: normal
}

.taskOverdue a:hover {
    color: #318ed9
}

.taskOverdue a {
    cursor: pointer;
    color: #318ed9
}