body {
    margin               : 0px;
    background           : url("../images/dsj_bg.png") no-repeat;
    background-size      : 100% 100%;
    background-attachment: fixed;
    color                : #31D5EC;
}

.dsj-title {
    background     : url("../images/dsj_title.png") no-repeat;
    background-size: 100%;
    width          : 65%;
    /* height         : 11vh; */
    height: 100px;
    margin         : 0 auto;
    position       : relative;
}

.title-fl,
.title-fr {
    position: absolute;
    color   : #197DB1;

    font-weight: bold;
    margin-top : 30px;

}

.title-fl {
    left: -25%;

}

.title-fr {
    right     : -25%;
    margin-top: 15px;
}

.title-fl li,
.title-fr li {
    float       : left;
    margin-right: .625rem
        /* 10/16 */
    ;
    text-align: center;
}

.title-fr li {
    margin-right: 20px;
}

.title-fr li p {
    font-size: 20px
        /* 18/16 */
    ;
    margin-bottom: .625rem
        /* 10/16 */
    ;
}

.title-fr li p img {
    width: 30px;
}

.title-fr li:first-child p {
    margin-bottom: .5rem
        /* 8/16 */
    ;
}

.dsj-content {
    margin: 0 1rem;
}

.dsj-content {
    display        : flex;
    justify-content: space-between;
    /* min-width   :1316px; */
}

.left-content,
.right-content {
    width: 29%;
}

.center-content {
    width: 39%;
}

.l-c-0sh {

    height       : 28px;
    margin-bottom: 10px;
    position     : relative;
    padding      : 20px 4%;
}

.c-timeitle {
    position: absolute;
    display : flex;
    left    : 5px;
    top     : 5px;
    z-index : 999;
}

.c-timeitle li {
    font-weight     : bold;
    margin-right    : 20px;
    padding         : 5px 15px;

}

.c-timeitle li a {
    color: #02D1F8;
}

.c-timeitle li a.active {
    color: #fff;
}

.l-c-first {
    background   : url(../images/平台情况.png) left top/100% 175px no-repeat;
    height       : 175px;
    margin-bottom: 20px;
    position     : relative;
    padding      : 20px 4%;
}

.l-c-second {
    background   : url(../images/部门概况.png) left top/100% 300px no-repeat;
    height       : 300px;
    margin-bottom: 20px;
    position     : relative;
    padding      : 20px 4%;
}

.l-c-third {
    background   : url(../images/部门概况.png) left top/100% 370px no-repeat;
    height       : 370px;
    margin-bottom: 20px;
    position     : relative;
    padding      : 20px 4%;
}

/*.l-c-fourth {
    background   : url(../images/部门概况.png) left top/100% 250px no-repeat;
    height       : 250px;
    margin-bottom: 20px;
    position     : relative;
    padding      : 20px 4%;
}*/

.center-content {
    background   : url(../images/center_bg.png) left top/100% 935px no-repeat;
    height       : 935px;
    margin-bottom: 20px;
    position     : relative;
    padding      : 40px 1%;
}

.r-c-first {
    background   : url(../images/sqjc_bg.png) left top/100% 220px no-repeat;
    height       : 220px;
    margin-bottom: 20px;
    position     : relative;
    padding      : 20px 4%;
}

.r-c-second {
    background   : url(../images/szjc_bg.png) left top/100% 260px no-repeat;
    height       : 260px;
    margin-bottom: 20px;
    position     : relative;
    padding      : 20px 4%;
}

.r-c-third {
    background   : url(../images/shjc_bg.png) left top/100% 410px no-repeat;
    height       : 410px;
    margin-bottom: 20px;
    position     : relative;
    padding      : 20px 4%;
}

/*.r-c-fourth {
    background   : url(../images/jtsz_bg.png) left top/100% 165px no-repeat;
    height       : 165px;
    margin-bottom: 20px;
    position     : relative;
    padding      : 20px 4%;
}*/

.c-subtitle {
    position   : absolute;
    font-weight: bold;
    top        : -5px;
    left       : 0px;
    background : url(../images/title_active_bg.png) left top/100% 35px no-repeat;
    padding    : 6px 20px;
    height     : 35px;
}

.select-click {
    position        : absolute;
    top             : -5px;
    left            : 179px;
    font-weight     : bold;
    color           : #fff;
    background-color: transparent;
    border          : none;
    background      : url(../images/title_bg.png) left top/100% 35px no-repeat;
    height          : 35px;
    padding         : 6px 15px;
    cursor          : pointer;
}

.jtsz {
    font-size: 14px;
}

.jtsz>p {
    margin: 15px 0 25px;
}

.jtsz>ul {
    display       : inline-block;
    vertical-align: middle;
    margin-left   : .625rem
        /* 10/16 */
    ;
}

.jtsz>ul li {
    margin-bottom: 10px;
}

.jtsz>ul li:last-child {
    margin: 0;
}

.l-c-second .cr-subtitle,
.l-c-second .cl-subtitle {
    position   : absolute;
    font-weight: bold;
    top        : -3px;
    cursor     : pointer;
    background : url(../images/title_active_bg.png) left top/100% 35px no-repeat;
    padding    : 6px 20px;
    color      : #fff;
}

.l-c-second .cr-subtitle {
    right: 20%;

}

.l-c-second .cl-subtitle {
    left: 20%;
}

.l-c-second>p.active {
    background: url(../images/title_bg.png ) left top/100% 35px no-repeat;
    color     : #31D5EC;
}

.charts-unit {
    position: absolute;
    left    : 30px;
    top     : 40px;

}

.charts-select {
    position: absolute;
    right   : 40px;
    top     : 40px;
    z-index : 999;
}

.charts-select .btn {
    background-color: #2E65FD;
    color           : #fff;
    border-radius   : 3px;
    padding         : 2px 8px;
}

.center-bottom .charts-select {
    top: 0px;
}

.content-click {
    position: absolute;
    display : flex;
    left    : 40px;
    top     : 40px;
    z-index : 999;
}

.content-click li {
    font-weight     : bold;
    margin-right    : 30px;
    background-color: #1151C7;
    padding         : 5px 15px;

}

.content-click li a {
    color: #fff;
}

.content-click li a.active {
    color: #02D1F8;
}

.mapBg {
    background   : url(../images/map_bg.png) left top/100% 600px no-repeat;
    height       : 600px;
    margin-bottom: 20px;
    position     : relative;
    border       : 1px solid #16416F;
}

.center-bottom {
    position: relative;
}

.r-c-first {
    position: relative;
}

.pie-count {
    position   : absolute;
    left       : 50%;
    transform  : translateX(-50%);
    top        : 52%;
    font-size  : 18px;
    font-weight: bold;
    font-family: '微软雅黑';
}

.pie-count1 {
    position   : absolute;
    left       : 50%;
    transform  : translateX(-50%);
    top        : 52%;
    font-size  : 18px;
    font-weight: bold;
    font-family: '微软雅黑';
}

.searchPanner .areaSelect {
    display: inline-block;
}

@media screen and (max-width:1920px) {

    .c-subtitle,
    .cr-subtitle,
    .cl-subtitle,
    .select-click {
        font-size      : 14px;
        padding        : 5px 13px !important;
        height         : 32px !important;
        background-size: 100% 32px !important;
    }

    .select-click {
        left: 165px;
    }
}

@media screen and (max-width:1140px) {
    .searchPanner {
        display: block !important;
    }

    .yearSearch,
    .proStatus {
        display   : inline-block;
        margin-top: 20px;
    }
}

@media screen and (max-width:1708px) {
    .select-click {
        left: 144px;
    }
}

@media screen and (max-width:1518px) {

    .c-subtitle,
    .cr-subtitle,
    .cl-subtitle {
        font-size      : 13px;
        padding        : 7px 13px !important;
        height         : 32px !important;
        background-size: 100% 32px !important;
    }

    .select-click {
        font-size      : 12px;
        padding        : 5px 7px !important;
        height         : 26px !important;
        background-size: 100% 26px !important;
        left           : 135px;
        top            : 0px;
    }

    .jtsz>ul {
        margin-left: -5px;
    }
}

@media screen and (max-width:1366px) {
    .l-c-first .c-subtitle {
        font-size      : 12px;
        padding        : 7px 6px !important;
        height         : 30px !important;
        background-size: 100% 30px !important;
    }

    .select-click {

        left: 114px;

    }

    .pie-count {
        left     : 42.5%;
        transform: none;
    }

    .jtsz {
        font-size: .75rem
            /* 12/16 */
        ;
    }

    .jtsz>ul {
        margin-left: -2px;
    }

    .title-fl,
    .title-fr {
        font-size: .875rem
            /* 14/16 */
        ;
    }

}

@media screen and (max-width:1365px) {
    body {
        overflow-x: hidden;
    }

    .center-content {
        position: absolute;
        top     : -960px;
    }

    .dsj-title {
        background: url(../images/dsj_mobile_title.png) top/100% no-repeat;
        height    : 149px;
        margin    : 120px auto 0;

    }

    .dsj-content {
        display : block;
        position: relative;
    }

    .left-content {
        margin-top: 910px;

    }

    .left-content,
    .right-content,
    .center-content {
        width: 100%;

    }

    .title-fl,
    .title-fr {
        top      : -45%;
        margin   : 0;
        font-size: 12px;
    }

    .title-fl {
        top: -23%;
    }

    .title-fr li p {
        font-size: .875rem
            /* 14/16 */
        ;
    }

    .title-fl {
        left: 2%;
    }

    .title-fr {
        right: 2%;
    }

    .title-fr li:first-child {
        transform: translateY(-7px);
    }

    .jtsz {
        font-size: .875rem
            /* 14/16 */
        ;
    }

    .jtsz>ul {
        margin-left: .625rem
            /* 10/16 */
        ;
    }

    .pie-count {
        left     : 48%;
        transform: none;

    }
}

@media screen and (max-width:610px) {
    .dsj-title {
        width: 80%;
    }

    .modal-dialog {
        max-width: 530px !important;

    }
}

@media screen and (max-width:580px) {
    .content-click li {
        font-size   : 14px;
        margin-right: 10px;
    }

    .dsj-title {
        width: 100%;
    }

    .left-content {
        margin-top: 740px;
    }

    .center-bottom>p {
        font-size: .875rem
            /* 14/16 */
        ;
    }

    .charts-select {
        right: 8px;
    }

    .jtsz>ul {
        font-size: .75rem
            /* 12/16 */
        ;
    }

    .select-click {
        font-size: .75rem
            /* 12/16 */
        ;
    }

    /* #scMap{
        height: 60% !important;
    } */
    .mapBg {
        background: url(../images/map_bg.png) left top/100% 420px no-repeat;
        height    : 420px;

    }

    .center-content {
        background: url(../images/center_bg.png) left top/100% 750px no-repeat;
        height    : 750px;
    }

    .center-content {
        top: -775px;
    }

    #areaSelect select {
        width       : 6em !important;
        margin-right: 11px !important;
    }

    .modal-dialog {
        max-width: 500px !important;

    }
}

@media screen and (max-width:450px) {
    .left-content {
        margin-top: 710px;
    }

    .jtsz>ul {
        margin-left: -3px !important;
    }

    .jtsz>img {
        width: 33px;
    }

    .modal-dialog {
        max-width: 400px !important;

    }
}

@media screen and (max-width:410px) {
    .left-content {
        margin-top: 700px;
    }
}

@media screen and (max-width:388px) {
    #areaSelect select {
        width: 5em;
    }
}

/* 弹框*/
.modal-dialog {
    margin: 12rem auto;
    width : auto;
}

.modal-title {
    display: inline-block;
}

.sjModal .modal-dialog {
    max-width: 930px;
}

.processModal .modal-dialog {
    max-width: 931px;
}

.processModal .modal-body img {
    width: 100%;
}

.modal-body {
    max-height: 540px;
    overflow-y: auto;
}

.modal-header {
    border: none;
}

.sjModal .modal-content,
.processModal .modal-content {
    background     : url("../images/dialog_bg1.png") no-repeat;
    background-size: 100% 100%;
    color          : #fff;
    border         : none;
}

.sjModal .modal-content,
.processModal .modal-content {
    padding-bottom: 10px;
}

.htable {
    width    : 100%;
    border   : 0;
    font-size: 14px;
}

.htable th {
    height       : 42px;
    line-height  : 42px;
    padding      : 0 5px;
    background   : #0F1D56;
    color        : #fff;
    font-weight  : normal;
    white-space  : nowrap;
    text-overflow: ellipsis;
    overflow     : hidden;
    text-align   : center;
}

.htable th.nobr {
    border-right: none;
}

.htable td {
    height       : 42px;
    line-height  : 42px;
    padding      : 0 5px;
    white-space  : nowrap;
    text-overflow: ellipsis;
    overflow     : hidden;
    max-width    : 200px;
    text-align   : center;
}

.htable a,
.htable a:visited,
.htable a:hover {
    color          : inherit;
    cursor         : pointer;
    text-decoration: none;
}

.htable tr:nth-child(odd) {
    background: #202A5B;
}

.htable tr:nth-child(even) {
    background: #0C174D;
}

.htable a.ablue {
    color          : #000;
    background     : #89ECFF;
    padding        : 4px 10px;
    border-radius  : 3px;
    text-decoration: none;
}

.htable tr:hover {
    background: #00458c;
}

.searchPanner {
    display   : flex;
    margin-top: 30px;
}

#areaSelect select,
.yearSearch select,
.proStatus select {
    width           : 10em;
    padding         : 5px;
    border-radius   : 3px;
    background-color: #2E65FD;
    color           : #fff;
    border-color    : #2E65FD;
    margin-right    : 15px;
}

.table_empty {
    margin    : 20px auto;
    text-align: center;
    font-size : 14px;
}

#hotProTop10::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
#hotProTop10::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: #0D184D;
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent);
}

#hotProTop10::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #0D184D;
    border-radius: 10px;
}

body::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

body::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: #0D184D;
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent);
}

body::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
}

#myModal3 .modal-header {
    padding: 15px 15px 0;
}

.page {
    height     : 34px;
    line-height: 34px;
    margin     : 10px 0 0px;
    text-align : center;
    color      : #31D5EC;
}

.page input {
    display       : inline-block;
    height        : 24px;
    margin-top    : -3px;
    line-height   : 24px;
    border-radius : 3px;
    border        : 1px solid #606266;
    vertical-align: middle;
    outline       : none;
    margin        : 0 2px;
    padding-left  : 7px;
}

.page b {
    font-weight : 400;
    margin-left : 3px;
    margin-right: 3px;
}

.page span {
    margin-left : 10px;
    margin-right: 10px;
    color       : #606266;
    display     : inline-block;
    font-size   : 12px;
}

.page font,
.page a {
    min-width    : 30px;
    height       : 28px;
    margin       : 0 2px;
    line-height  : 28px;
    font-weight  : 700;
    display      : inline-block;
    text-align   : center;
    border-radius: 3px;
    cursor       : pointer;
}

.page a {
    background-color: #f4f4f5;
    color           : #606266;
}

.page font {
    background-color: #31D5EC;
    color           : #fff;
}

.alarmBox {
    background: url(../images/alarm_bg.png) left top/100% 36px no-repeat;
    height    : 36px;
    width     : 136px;
    padding: 3px 0 0 15px;
    margin-top: 30px;
    display: none;
}
.alarmBox img {
    cursor: pointer;
}