.box ul li:nth-child(1) {
    background: #D06503;
}

.box ul li:nth-child(2) {
    background: #E9931A;
}

.box ul li:nth-child(3) {
    background: #1691BE;
}

.box ul li:nth-child(4) {
    background: #166BA2;
}

.box ul li:nth-child(5) {
    background: #1B3647;
}

.box ul li:nth-child(6) {
    background: #152836;
}
/*宽度大于800px*/
@media all and (min-width:800px) {
    .box {
        width: 965px;
        margin: 35px auto 0;
    }

    h1 {
        color: #89867E;
        text-align: center;
        font-weight: 500;
        margin-bottom: 65px;
    }

    .menu {
        display: none;
    }

    .box ul {
        display: flex;
        justify-content: flex-start;
    }

    .box ul li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 215px;
        color: #F0D8D8;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .box ul li:hover {
        color: #fff;
        height: 240px;
    }

    .box ul li:hover div {
        box-shadow: 0 0 0 0 rgba(255,255,255,0.2);
        -webkit-transition:all .4s ease;
        transition:all .4s ease;
    }

    .box ul li:last-child {
        display: none;
    }

    .box ul li div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        margin: 22px 0 45px 0;
        box-shadow: 0 0 0 30px transparent;
        -webkit-transition: all .6s ease;
        transition: all .6s ease;
    }
}

/*宽度为520px~799px*/
@media all and (min-width:520px) and (max-width: 799px){
    .box {
        width: 678px;
        margin: 35px auto 0;
    }

    h1 {
        color: #89867E;
        text-align: center;
        font-weight: 500;
        margin-bottom: 65px;
    }

    .menu {
        display: none;
    }

    .box ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .box ul li {
        width: 50%;
        height: 105px;
        display: flex;
        align-items: center;
        color: #F0D8D8;
        padding-left: 20px;
        box-sizing: border-box;
    }

    .box ul li:hover {
        color: #fff;
    }

    .box ul li:hover div {
        border: solid 4px rgba(255,255,255,0.1);
    }

    .box ul li:last-child {
        display: none;
    }

    .box ul li div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin: 0 95px 20px 0;
        box-sizing: border-box;
        background: rgba(255,255,255,0.1);
        -webkit-transition: all .5s;
        transition: all .5s;
    }
}

/*宽度小于519px*/
@media all and (max-width:520px){
    .box {
        width: 272px;
        margin: 35px auto 0;
    }

    h1 {
        color: #89867E;
        text-align: center;
        font-weight: 500;
        margin-bottom: 65px;
    }

    .menu {
        margin-bottom: 22px;
        cursor: pointer;
    }

    .box-ul {
        position: relative;
        display: none;
    }

    .box-ul-show {
        position: relative;
        display: block;
    }

    .box ul li:last-child {
        position: absolute;
        left: 0;
        top: 0;
        width: 8px;
        height: 342px;
        background: rgba(0,0,0,0.2);
    }

    .box ul li {
        width: 272px;
        height: 57px;
        display: flex;
        color: #F0D8D8;
        box-sizing: border-box;
    }

    .box ul li span {
        margin-top: 28px;
        font-size: 13px;
    }

    .box ul li div {
        margin: 17px 32px 0 24px;
    }
}