* {
    font-family: '微软雅黑';
    font-size: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer a {
    text-decoration: none;
    color: #cccccc;
    font-size: 14px;
    transition: all .2s;
    opacity: .9;
}

.footer a:hover {
    opacity: .5;
}

.footer {
    background: rgb(70, 77, 85);
    width: 100%;
}


.footer>div {
    transition: all .2s;
    position: relative;
    margin: 0 auto;
    width: 95%;
    max-width: 1400px;
    display: flex;
    padding: 49px 0 43px;
}

.footer section {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.footer section:first-of-type {
    flex: 2;
}

.footer section p {
    color: white;
    margin-bottom: 18px;
}

.footer section ul {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    max-height: 215px;
    flex-wrap: wrap;
}

.footer section li {
    transition: all .2s;
    line-height: 29px;
    color: white;
    opacity: .9;
}


.footer img {
    transition: all .2s;
    margin: 15px 0 5px;
    width: 110px;
    height: 110px;
}

.footer>aside {
    width: 100%;
    background: rgb(46, 51, 55);
}

.footer>aside>div {
    width: 95%;
    margin: 0 auto;
    max-width: 1400px;
    padding: 14px 0 15px;
}

.footer>aside>div>p {
    font-size: 12px;
    line-height: 19px;
    color: #cccccc;
}

.footer span a {
    font-size: 12px;
}

.footer>div>section>ul>a {
    white-space: nowrap;
}

.footer>div>section>ul>a:hover {
    opacity: .9 !important;
}


@media screen and (max-width:1100px) {
    .footer section:first-of-type {
        flex: 1;
        overflow: hidden;
    }

    .footer section:first-of-type ul {
        flex-wrap: nowrap;
    }
}

@media screen and (max-width:768px) {

    .footer li,
    .footer section p {
        display: none;
    }

    .footer>div {
        padding: 100px 0 100px;
    }

    .footer img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: 15px;
    }

    .footer a {
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
    }

    .footer span a {
        position: static;
        transform: none;
        font-size: 12px;
    }

    .footer p>a {
        position: static;
        transform: none;
        font-size: 12px;
    }
}