* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 200%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #A6CC2B;
    background-size: contain;

}

.container {
    width: 1400px;
    height: 160px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 50px;
}

.container .box {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    align-content: center;
    width: 80px;
    height: 140px;
    margin: 30px;
}



.container .box .img {
    width: 280px;
    /*图标白底的宽度*/
    height: auto;
    /*设置阴影黑色阴影，偏移的距离和大小*/
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
        /* 设置阴影白色阴影，偏移的距离和大小*/
        -5px -5px 20px rgba(255, 255, 255, 1);
    border-radius: 20px;
    display: flex;

    /*图标白底的颜色*/
    background-color: #efeeee;
    transition: box-shadow 0.5s ease-out;
    position: relative;
    cursor: pointer;
    padding-left: 10px;
    padding: 15px;


}







.container .box .img img {
    width: 60px;
    transition: width 0.2s ease-out;
}

.container .box p {
    color: black;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    font-family: STZhongsong;

}


.container .box .img:hover {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2),
        0px 0px 0px rgba(255, 255, 255, 0.8),
        inset 18px 18px 30px rgba(0, 0, 0, 0.1),
        inset -18px -18px 30px rgba(255, 255, 255, 1);
    transition: box-shadow 0.2s ease-out;
}

.container .box .img:hover img {
    width: 58px;
    transition: width 0.2s ease-out;
}

.line {
    width: 200px;
    height: 2px;
    background: white;
    margin: 10px 0px;
    text-align: center;
}

.biaoti {
    width: 200px;
    height: 20px;
    padding-top: 35px;
    font-size: 16px;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}