.realBoxContent{
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    padding:  16px;
    border:1px solid #5F5F5F;
    border-radius: 8px;
    .leftBox{
        width: 25%;
        .realTime{
            color: #fff;
            font-size: 0.8rem;
        }
        .leftOther{
            margin-top: 4px;
            .label{
                color: #fff;
                font-size: 0.8rem;
            }
            .value{
                color: #d1ab61;
                font-size: 0.8rem;
                display: inline-block;
                width: 50px;
                margin-right: 8px;
                text-align: right;
                transition: transform 0.3s ease-out;
            }
            .unit{
                color: #d1ab61;
                font-size: 0.8rem;
            }
        }
    }

    .middleBox{
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .realText{
            font-size: 2rem;
            color: #45aaf1;
            .unit{
                font-size: 20px;
            }
        }

        .yearRevenue{
            color: #fff;
            font-size: 0.8rem;
            margin-top: 2px;
            .value{
                color: #45aaf1;
            }
        }
    }

    .rightBox{
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .rightItem{
            .label{
                color: #fff;
                font-size: 0.8rem;
            }
            .value{
                color: #d1ab61;
                font-size: 0.8rem;
                display: inline-block;
                width: 50px;
                margin-right: 8px;
                text-align: right;
            }
            .unit{
                color: #d1ab61;
                font-size: 0.8rem;
            }
        }
    }
    
}