.main {


        .box {
                margin-top: 12px;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: 329px;
                grid-gap: 9px;

                .item {
                        border: 1px solid #307BD3;
                        position: relative;

                        &:hover {
                                .messageBox {
                                        //height: 160px;
                                }
                        }

                        img {
                                width: 100%;
                                height: 100%;
                        }

                        .messageBox {
                                background-color: #fff;
                                transition: all 1s;
                                position: absolute;
                                overflow: hidden;
                                bottom: 0;
                                left: 32px;
                                right: 32px;
                                height: 60px;

                                img {
                                        width: 100%;
                                        height: 52px;
                                }

                                .font {
                                        padding-top: 12px;
                                        text-align: center;
                                }
                        }
                }
        }
}
.server-back{
        transition: all .2s;
        height: 329px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
}