.aaa-0 {
    width: 900px;
    padding: 0 0 100px 0;
    margin: 0 auto;
}

.aaa-0 .hhh {
    display: flex;
    color: #595757
}

.aaa-0 .hhh .l {
    width: 2px;
    background: #f0831a
}

.aaa-0 .hhh .r {
    padding: 0 0 0 10px
}

.aaa-0 .hhh .r .en {
    font-size: 16px;
    font-family: Times
}

.aaa-0 .hhh .r .cn {
    font-size: 20px;
    font-weight: bold
}

.aaa-0 .list {
    padding: 60px 0 0 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.aaa-0 .list li {
    text-align: center;
    position: relative;
    outline: 1px solid #ddd;
    width: 285px;
    height: 200px;
    margin: 0 0 22.5px 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: reverse;
    align-content: center
}

.aaa-0 .list li .icon {
    width: 100%;
    position: relative;
    z-index: 4
}

.aaa-0 .list li .icon img {
    height: 50px;
    width: auto;
    vertical-align: top
}

.aaa-0 .list li .hidd {
    position: absolute;
    z-index: 3;
    left: 0;
    opacity: 0;
    top: 52px;
    width: 100%
}

.aaa-0 .list li .hidd img {
    height: 50px;
    width: auto;
    vertical-align: top
}

.aaa-0 .list li .t0 {
    width: 100%;
    font-size: 15px;
    color: #555;
    padding: 7px 0 0 0
}

.aaa-0 .list li .t1 {
    width: 100%;
    font-size: 12px;
    color: #555
}

.aaa-0 .list li:hover {
    background: #2a92c6
}

.aaa-0 .list li:hover .t0 {
    color: #fefefe
}

.aaa-0 .list li:hover .t1 {
    color: #eee
}

.aaa-0 .list li:hover .icon {
    z-index: 1;
    opacity: 0
}

.aaa-0 .list li:hover .hidd {
    opacity: 1
}

@media screen and (max-width: 650px) {
    .aaa-0 {
        width: 90%;
        padding: 50px 0 50px 0
    }

    .aaa-0 .hhh {
        display: flex;
        color: #595757
    }

    .aaa-0 .hhh .l {
        width: 2px;
        background: #f0831a
    }

    .aaa-0 .hhh .r {
        padding: 0 0 0 10px
    }

    .aaa-0 .hhh .r .en {
        font-size: 16px;
        font-family: Times
    }

    .aaa-0 .hhh .r .cn {
        font-size: 20px;
        font-weight: bold
    }

    .aaa-0 .list {
        padding: 50px 0 0 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap
    }

    .aaa-0 .list li {
        text-align: center;
        position: relative;
        outline: 1px solid #ddd;
        width: 31%;
        height: auto;
        padding: 20px 0;
        margin: 0 0 22.5px 0;
        display: flex;
        flex-wrap: wrap;
        flex-direction: reverse;
        align-content: center
    }

    .aaa-0 .list li .icon {
        width: 100%;
        position: relative;
        z-index: 4
    }

    .aaa-0 .list li .icon img {
        height: 50px;
        width: auto;
        vertical-align: top
    }

    .aaa-0 .list li .hidd {
        position: absolute;
        z-index: 3;
        left: 0;
        opacity: 0;
        top: 20px;
        width: 100%
    }

    .aaa-0 .list li .hidd img {
        height: 50px;
        width: auto;
        vertical-align: top
    }

    .aaa-0 .list li .t0 {
        width: 100%;
        font-size: 14px;
        color: #555;
        padding: 7px 0 0 0
    }

    .aaa-0 .list li .t1 {
        width: 100%;
        font-size: 12px;
        transform: scale(0.8);
        color: #555;
        height: 40px
    }

    .aaa-0 .list li:hover {
        background: #2a92c6
    }

    .aaa-0 .list li:hover .t0 {
        color: #fefefe
    }

    .aaa-0 .list li:hover .t1 {
        color: #eee
    }

    .aaa-0 .list li:hover .icon {
        z-index: 1;
        opacity: 0
    }

    .aaa-0 .list li:hover .hidd {
        opacity: 1
    }
}