.teachers_content {
    width: 1200px;
    margin: 0 auto;
    .teacher_item {
        width: 289px;
        height: 350px;
        float: left;
        margin-right: 14.5px;
        margin-bottom: 30px;
        overflow: hidden;
        position: relative;
        background-color: #EFF5FF;
        &.maxHeight{
            height: 405px;
            .showBox, .hoverShow{
                height: 166px;
            }
            .hoverShow{
                bottom: -168px;
            }
        }
    }
    .teacher_item:nth-child(4n) {
        margin-right: 0;
    }
    .teacher_picture {
        width: 100%;
        &:hover~.showBox{
            display: none;
        }
        &:hover~.hoverShow{
            padding-top: 35px;
            width: 100%;
            bottom: 0;
            transition: all 0.6s;
            background-image:linear-gradient(90deg,#e4f4ff 0%,#c4d9ff 50.63%,#ffffff 100%);
            border:1px solid #ffffff;
            border-radius:4px;
            box-shadow:0px 0px 6px rgba(255, 255, 255, 0.73);
            color:#1140ff;
        }
    }
    .showBox {
        background-color: #466aff;
        color: white;
        .name{
            text-align: center;
        }
        .name,.introBox{
            opacity: 0.88;
        }
    }
    .showBox, .hoverShow{
        position: absolute;
        bottom: 0;
        height: 102px;
        padding: 4px 8px;
    }
    .hoverShow{
        // display: none;
        bottom: -102px;
        border:1px solid #ffffff;
    }
}
