.banner {
    width: 100%;
    height: .5313rem;
    background: url(../images/home_banner_bg.png) no-repeat 0/100%;
    padding-bottom: .3rem;
}
.banner .text {
    font-size: .1458rem;
    color: #ffffff;
    margin-left: 1.3958rem;
    line-height: .5313rem;
}
.main {
    width: 7.1146rem;
    margin: 0 auto .2604rem;
}
.tabs {
    margin-top: .0833rem;
}
.tabs .tab-header {
    display: flex;
}
.tabs .tab-header .tab-title {
    width: 100%;
    font-size: .0938rem;
    font-weight: bold;
    color: #717171;
    text-align: center;
    padding: .1042rem 0 .0521rem;
    cursor: pointer;
    border-bottom: .0104rem solid #c4c4c4;
    position: relative;
}
.tabs .tab-header .active {
    color: #3096ff;
    border-color: #3096ff;
}
.tabs .tab-header .active::after {
    content: "";
    width: 0;
    height: 0;
    border-left: .04rem solid transparent;
    border-right: .04rem solid transparent;
    border-top: .05rem solid #3096ff;
    position: absolute;
    bottom: -0.05rem;
    left: 50%;
    margin-left: -0.05rem;
}
.tabs .tab-box .center-text {
    font-size: .0938rem;
    font-weight: bold;
    color: #0638a0;
    text-align: center;
    margin-top: .2083rem;
}
.tabs .tab-box .center-text .highlighted {
    color: #c33229;
}
.data-container {
    margin-bottom: .1563rem;
}
.data-container .data-item-head {
    width: 100%;
    height: .2604rem;
    border-bottom: 1px solid #c4c4c4;
    display: flex;
    align-items: center;
}
.data-container .data-item-head .data-item-title {
    font-size: .0938rem;
    font-weight: bold;
    color: #0638a0;
    padding-left: .3021rem;
    position: relative;

}
.data-container .data-item-head .data-item-title::before {
    content: "";
    width: .026rem;
    height: .1146rem;
    background: #0638a0;
    border-radius: .026rem;
    position: absolute;
    left: .1875rem;
    top: .0104rem;
}
.data-container .sub-title {
    font-size: .0938rem;
    margin: .0781rem .1563rem;
    color: #0638a0;
    position: relative;
    padding-left: .0833rem;
}
.data-container .sub-title::before {
    content: "";
    width: .0417rem;
    height: .0417rem;
    background: #0638a0;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: .0417rem;
}
.data-container .data-item-charts {
    display: flex;
    justify-content: space-around;
    margin: .1563rem 0;
}
.data-container .max-chart {
    margin: .1563rem 0;
}
.data-container .data-item-charts .table {
    margin: 0 .0521rem;
}
.data-container .item {
    display: flex;
}
.data-container .item.center {
    align-items: center;
}
.data-container .item .describe .text {
    font-size: .0833rem;
    margin-top: .0521rem;
}
.data-container .item .describe .max-text {
    font-size: .1042rem;
}
.data-container .item .describe .max-text .highlighted {
    color: #ff6a00;
}
.data-container .item .dashboard {
    width: .8594rem;
    height: .4271rem;
    background: url(../images/dashboard.png) no-repeat 0/ 100%;
    position: relative;
    /* margin: 0 auto; */
}
.data-container .item .dashboard .pointer {
    width: .5156rem;
    height: .0375rem;
    background: url(../images/Pointer.png) no-repeat 100% / 100%;
    position: absolute;
    bottom: 0;
    left: 0.1563rem;
}
.data-container .legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: .1042rem;
}
.data-container .legend .risk-bar-s {
    width: .2344rem;
    height: .0781rem;
    background: url(../images/risk_bar_s.png) no-repeat 100% / 100%;
    margin-right: .0521rem;
}
.data-container .item .risk-bar {
    width: .9063rem;
    height: .0781rem;
    background: url(../images/risk_bar.png) no-repeat 100% / 100%;
    position: relative;
}
.data-container .item .risk-bar .proportion {
    height: .0781rem;
    position: relative;
}
.data-container .item .risk-bar .proportion i {
    width: .0104rem;
    height: .0781rem;
    display: block;
    background: #7cc1ff;
    position: absolute;
    right: 0;
    top: 0;
}
.data-container .item .risk-bar .pointer {
    width: .0938rem;
    height: .151rem;
    background: url(../images/risk_bar_pointer.png) no-repeat 0/100%;
    background-position: 100% 0;
    position: absolute;
    top: -0.151rem;
    right: -0.0417rem;
}
.chart-table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: .0938rem;
    /* font-size: 18px; */
}
.chart-table td, .chart-table th {
    padding: .0677rem;
    font-weight: 500;
    text-align: left;
    text-wrap: nowrap;
}
.chart-table th:first-child,.chart-table td:first-child {
    padding-left: .3646rem;
    text-align: left;
}
.chart-table th {
    color: #a8d7ff;
    background: #002b82;
}
/* 新增修改 */
.chart-table tr:nth-child(odd):not(.insert-row) {
    background: #002b82;
    color: #ffffff;
}
.insert-row {
    border: 1px solid #eee;
}
.star-box {
    display: flex;
}
.star-box .star {
    width: .0625rem;
    height: .0573rem;
    background: url(../images/icon_star.png) no-repeat 0/100%;
    margin: 0 .0104rem;
}
.data-container .text-box {
    font-size: .0938rem;
    padding: .1563rem;
}
#main-1 {
    width: 100%;
    height: 2.0833rem;
}
#main-2,#main-3,#main-4,#main-5 {
    width: 100%;
    height: 2.0833rem;
}
#main-6 {
    width: 100%;
    height: 2.6042rem;
}
#main-7 , #main-8 {
    width: 100%;
    height: 2.0833rem;
}
#hexagon {
    width: 100%;
    height: 2.9167rem;
    background: url(../images/bg_color.png) no-repeat;
    background-size: 5.6979rem 1.1979rem;
    background-position: center .2604rem;
}
@media (max-width: 800px) {
    .banner .text {
        margin: 0;
        text-align: center;
    }
    .main {
        width: 100%;
    }
    .tabs .tab-header .tab-title {
        font-size: .1458rem;
    }
    .data-container .data-item-charts {
        flex-wrap: wrap;
    }
    .data-container .item {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: .3125rem;

    }
    .data-container .describe {
        width: 100%;
        text-align: center;
        margin-top: .1042rem;
        order: 2;
    }
    .data-container .item .describe .text {
        font-size: .125rem;
    }
    .data-container .item .describe .max-text {
        font-size: .1667rem;
    }
    .data-container .item .describe .max-text .highlighted {
        font-size: .1667rem;
    }
    .data-container .legend {
        padding: 0 .1563rem;
    }
    .data-container .item .dashboard {
        width: 1.2891rem;
        height: .6484rem;
    }
    .data-container .item .dashboard .pointer {
        width: .7734rem;
        height: .0563rem;
    }
    .data-container .item .risk-bar {
        width: 1.3594rem;
        height: .1172rem;
    }
    .tabs .tab-box .center-text {
        font-size: .1563rem;
    }
    .tabs .tab-box .center-text .highlighted {
        font-size: .1563rem;
    }
    .data-container {
        margin-top: .1563rem;
    }
    .data-container .data-item-head .data-item-title {
        font-size: .1354rem;
    }
    .data-container .data-item-head .data-item-title::before {
        top: .0365rem;
    }
    #main-1 {
        width: 3.75rem;
        height: 3.75rem;
    }
    #main-2,#main-3,#main-4,#main-5 {
        width: 100%;
        height: 3rem;
    }
    .max-chart {
        width: 100%;
        overflow: auto;
    }
    #hexagon {
        width: 800px;
        height: 400px;
        background-size: 640px 140px;
        background-position: center 60px;
    }
    .chart-table {
        font-size: .125rem;
    }
    .chart-table td, .chart-table th {
        text-wrap: inherit;
    }
    .data-container .sub-title {
        font-size: .1354rem;
        padding-left: 0;
    }
    .data-container .sub-title::before {
        content: none;
    }
}