.index_box{
    width: 100%;
    height: 100%;
    padding: 0.6rem 1.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.index_title{
    width: 100%;
    height: 0.6rem;
    background: linear-gradient(90deg,rgba(146,149,255,1) 0%,rgba(64,158,254,1) 100%);
    box-shadow: 0px 3px 20px rgba(64,158,254,0.16);
    border-radius: 0.06rem;
    font-size: 0.2rem;
    text-align: center;
    line-height: 0.6rem;
    margin: 0.2rem 0rem;
    color: white;
}
.index_content{
    width: 100%;
    height: 87%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.index_content_left{
    width: 49%;
    height: 100%;
    background-color: white;
    border-radius: 0.1rem;
    box-shadow:0px 3px 20px rgba(64,158,254,0.16);
    font-size: 0.16rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.index_content_left>span:first-child{
    margin: 0.1rem 0rem;
    color: #F99615;
}
.index_content_left_table{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.index_content_left_table table{
    width: 100%;
    border-collapse: collapse;
}
.index_content_left_table table tr th{
    width: 25%;
    height: 0.4rem;
    background-color: #67A6E6;
    color: white;
    line-height: 0.4rem;
    border-right: 1px solid white;
    font-weight: 300;
}
.index_content_left_table table tr td{
    text-align: center;
    font-size: 0.14rem;
    height: 0.4rem;
    line-height: 0.4rem;
}
.index_content_left_table table tr:nth-child(2){
    background-color: #FFF2D9;
}
.index_content_left_table table tr:nth-child(3){
    background-color: #E8FBFF;
}
.index_content_left_table table tr:nth-child(4){
    background-color: #FFF1EC;
}
.ranking_icon{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-right: 0.25rem;
    box-sizing: border-box;
}
.down_icon{
    position: absolute;
    right: 0.1rem;
    top: 50%;
    transform: translateY(-50%);
}
.end_text{
    width: 100%;
    text-align: left;
    font-size: 0.12rem;
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
}
.index_content_right{
    width: 49%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.icr_img_box{
    height: 45%;
    overflow-y: auto;
}
.icr_img_box ul{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0.14rem;
}
.icr_img_box ul li{
    width: 49%;
    position: relative;
}
.icr_img_li{
    margin-bottom: 0.1rem;
}
.icr_img{
    width: 100%;
}
.icr_img_text{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-sizing: border-box;
}
.icr_img_text>span:nth-child(2){
    font-size: 0.48rem;
    text-align: center;
}
.icr_img_text>span:nth-child(2) span{
    font-size: 0.16rem;
}
.icr_img_title{
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 14%;
    left: 8%;
    transform: translateY(-50%);
    line-height: 0.12rem;
}
.icr_img_title>div{
    width: 4px;
    height: 0.12rem;
    border-radius: 0.02rem;
    background-color: white;
    margin-right: 0.1rem;
}
.icr_img_logo{
    position: absolute;
    top: 57%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.icr_img_icon{
    width: 0.3rem;
    height: 0.3rem;
    position: absolute;
    bottom: 0.1rem;
    left: 10%;
    transform: translateX(-50%);
}
.sales_cavans_box{
    width: 100%;
    height: 55%;
    background-color: white;
    box-shadow: 0px 3px 20px rgba(64,158,254,0.16);
    border-radius: 0.1rem;
    padding: 0.2rem 0.2rem;
    box-sizing: border-box;
    position: relative;
}
.canvas_box{
    width: 100%;
    height: 100%;
    margin-top: -0.4rem;
}
.chartjs-size-monitor{
    width: 100%;
    height: 100%;
}
#sales_cavans{
    width: auto;
    height: 300px;
}
/* ------------------------------------- */
.settion_alert_box{
    display: none;
}
.settion_alert_bg{
    background-color: black;
    opacity: 0.4;
    position: fixed;
    top: 0%;
    left: 0%;
    bottom: 0%;
    right: 0%;
    z-index: 20;
}
.settion_alert_content{
    width: 6rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 30;
    background-color: white;
    border-radius: 0.1rem;
}
.settion_alert_title{
    width: 100%;
    height: 0.4rem;
    border-top-left-radius: 0.1rem;
    border-top-right-radius: 0.1rem;
    background:linear-gradient(90deg,rgba(146,149,255,1) 0%,rgba(64,158,254,1) 100%);
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 0.14rem;
    padding: 0rem 0.2rem;
    box-sizing: border-box;
}
.close_icon{
    cursor: pointer;
}
.settion_alert_select{
    padding: 0.2rem 0.6rem;
    font-size: 0.14rem;
}
.settion_switch ul{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.settion_switch ul li{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.settion_switch ul li span{
    margin-right: 0.1rem;
}
.settion_switch ul li input[type='checkbox'].switch{
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 40px;
    height: 20px;
    background: #ccc;
    border-radius: 10px;
    transition: border-color .3s, background-color .3s;
}
.settion_switch ul li input[type='checkbox'].switch::after {
    content: '';
    display: inline-block;
    width: 0.2rem;
    height:0.2rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0, 0, 2px, #CCCCCC;
    transition:.4s;
    top: 0px;
    position: absolute;
    left: 1px;
}
.settion_switch ul li input[type='checkbox'].switch:checked {
    background: #409EFE;
}
.settion_switch ul li input[type='checkbox'].switch:checked::after {
    content: '';
    position: absolute;
    left: 48%;
    top: 0px;
}
.settion_select{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 0.2rem;
}
.settion_select select{
    width: 1.9rem;
    height: 0.3rem;
    border: 1px solid #eeeeee;
    border-radius: 0.04rem;
    margin-right: 0.2rem;
}
.settion_select select:last-child{
    margin-right: 0rem!important;
}
@media screen and (max-width: 1440px) {
    .index_content{
        height: 85%!important;
    }
}