.analytics{
    width:1000px;
    margin:auto;
}


.analytics .brandList {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6rem 0 0;
    padding: 0;
    list-style: none;

}

    .analytics .brandList li {
        flex: 1 1;
        min-width: calc(25% - 6rem);
        max-width: calc(25% - 6rem);
        margin: 6rem 6rem 0 0;
        display: block;
        text-align: center
    }

            .analytics .brandList li .txt {
                display: block;
                margin-top: 1.0rem;
                font-size: 20px;
                line-height: 1.25
            }

            .analytics .brandList li .imgWrap {
                display: block;
                overflow: hidden;
                position: relative;
                width: 20rem;
                height: 20rem;
                border-radius: 50%
            }

            .analytics .brandList li .img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 20rem;
                background: #f5f5f5 no-repeat 50% 50%/20rem auto;
                transition: all .4s
            }



            .analytics .brandList li .imgHover {
                position: absolute;
                top: 0;
                left: 100%;
                width: 100%;
                height: 20rem;
                background: no-repeat 50% 50%/auto 20rem;
                transition: all .4s
            }

            .analytics .brandList li:focus .imgHover, .analytics .brandList li:hover .imgHover {
                left: 0
            }




    .analytics .brandList li.brandItem1:focus .imgWrap .img, .analytics .brandList li.brandItem1:hover .imgWrap .img {
        background-image: none !important;
        background-color: #bace21
    }

    .analytics .brandList li.brandItem2:focus .imgWrap .img, .analytics .brandList li.brandItem2:hover .imgWrap .img {
        background-image: none !important;
        background-color: #40761e
    }

    .analytics .brandList li.brandItem3:focus .imgWrap .img, .analytics .brandList li.brandItem3:hover .imgWrap .img {
        background-image: none !important;
        background-color: #c9401d
    }

    .analytics .brandList li.brandItem4:focus .imgWrap .img, .analytics .brandList li.brandItem4:hover .imgWrap .img {
        background-image: none !important;
        background-color: #201d47
    }

    .analytics .brandList li.brandItem5:focus .imgWrap .img, .analytics .brandList li.brandItem5:hover .imgWrap .img {
        background-image: none !important;
        background-color: #9d8567
    }

    .analytics .brandList li.brandItem6:focus .imgWrap .img, .analytics .brandList li.brandItem6:hover .imgWrap .img {
        background-image: none !important;
        background-color: #ad3831
    }

    .analytics .brandList li.brandItem7:focus .imgWrap .img, .analytics .brandList li.brandItem7:hover .imgWrap .img {
        background-image: none !important;
        background-color: #f5f5f5
    }

    .analytics .brandList li.brandItem8:focus .imgWrap .img, .analytics .brandList li.brandItem8:hover .imgWrap .img {
        background-image: none !important;
        background-color: #ffcb21
    }

    .analytics .brandList li.brandItem9:focus .imgWrap .img, .analytics .brandList li.brandItem9:hover .imgWrap .img {
        background-image: none !important;
        background-color: #0d88d5
    }

    .analytics .brandList li.brandItem10:focus .imgWrap .img, .analytics .brandList li.brandItem10:hover .imgWrap .img {
        background-image: none !important;
        background-color: #1798d9
    }

    .analytics .brandList li.brandItem11:focus .imgWrap .img, .analytics .brandList li.brandItem11:hover .imgWrap .img {
        background-image: none !important;
        background-color: #bc9f60
    }

    .analytics .brandList li.brandItem12:focus .imgWrap .img, .analytics .brandList li.brandItem12:hover .imgWrap .img {
        background-image: none !important;
        background-color: #86b71a
    }

    .analytics .brandList li.brandItem13:focus .imgWrap .img, .analytics .brandList li.brandItem13:hover .imgWrap .img {
        background-image: none !important;
        background-color: #b72731
    }

    .analytics .brandList li.brandItem14:focus .imgWrap .img, .analytics .brandList li.brandItem14:hover .imgWrap .img {
        background-image: none !important;
        background-color: #9a632d
    }

    .analytics .brandList li.brandItem15:focus .imgWrap .img, .analytics .brandList li.brandItem15:hover .imgWrap .img {
        background-image: none !important;
        background-color: #582324
    }

    .analytics .brandList li.brandItem16:focus .imgWrap .img, .analytics .brandList li.brandItem16:hover .imgWrap .img {
        background-image: none !important;
        background-color: #f5e2b0
    }

    .analytics .brandList li.brandItem17:focus .imgWrap .img, .analytics .brandList li.brandItem17:hover .imgWrap .img {
        background-image: none !important;
        background-color: #be741f
    }

    .analytics .brandList li.brandItem18:focus .imgWrap .img, .analytics .brandList li.brandItem18:hover .imgWrap .img {
        background-image: none !important;
        background-color: #bc292d
    }

    .analytics .brandList li.brandItem19:focus .imgWrap .img, .analytics .brandList li.brandItem19:hover .imgWrap .img {
        background-image: none !important;
        background-color: #0a2c81
    }

    .analytics .brandList li.brandItem20:focus .imgWrap .img, .analytics .brandList li.brandItem20:hover .imgWrap .img {
        background-image: none !important;
        background-color: #384f26
    }