.lui-single-file-b{
    width: 280px;
    height: 320px;
        >.box{
            width: 100%;
            height: 100%;
            text-align: center;
            background-size: 280px 320px;
            transition: all .5s;
            position: relative;
            &:hover{
                &:hover{
                    >.img-hover{
                        height: 320px;
                    }
                }
            }
            >.title{
                font-size: 16px;
                letter-spacing: 0px;
                color: #000000;
                height: 70px;
                padding: 31px 0px 16px;
                width: 68%;
                margin: auto;
            }
            >.key-word{
                font-size: 14px;
                letter-spacing: 0px;
                margin-bottom: 133px;
                padding: 0 15px;
                >span{
                    width: 106px;
                    display: inline-block;
                    &:first-child{
                        text-align: right;
                    }
                    &:last-child{
                        text-align: left;
                    }
                }
                .ant-divider-vertical {
                    margin: 0 8px;
                    height: 1.3em;
                    top: -0.3em;
                    color: #dddddd;
                }
            }
            >.brief-introduction{
                font-family: MicrosoftYaHei;
                font-size: 15px;
                line-height: 24px;
                letter-spacing: 0px;
                color: #000000;
                margin-bottom: 20px;
                padding: 0 15px;
            }
            >.num{
                width: 100%;
                height: 48px;
                color: white;
                line-height: 48px;
                padding: 0 15px;
                .divide-line{
                    color: white;
                }
                .iconfont{
                    display: inline-block;
                    // margin-right: 6px;
                }
            }
            >.triangle{
                $border-w: 30px;
                position: absolute;
                right: -8px;
                top: -3px;
                z-index: 10;
                height: 0;
                width: 0;
                border-right: $border-w solid white;
                border-bottom: $border-w solid transparent;
                border-left: $border-w solid transparent;
                border-top: $border-w solid white;
            }
            >.icon-close-o{
                position: absolute;
                right: -0;
                top: -0;
                z-index: 13;
                color: #b2b2b2;
                display: none;
                font-size: 18px;
            }
            >.img-hover{
                position: absolute;
                top: 0;
                z-index: 10;
                width: 100%;
                height: 0px;
                transition: all .5s;
                overflow: hidden;
                background:rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                >.btn{
                    display: inline-block;
                    width: 87px;
                    height: 37px;
                    background-color: #ffffff;
                    border-radius: 2px;
                    border: solid 1px #ffffff;
                    line-height: 26px;
                    color: $primary-color;
                    font-size: 14px;
                    outline: none;
                    cursor: pointer;
                    text-align: center;
                    line-height: 35px;
                    margin: 6px;
                }
            }
        }
        >.word{
            background-image: url('#{$dir}/format_word.png');
            .key-word{
                color: $word-color;
            }
        }
        >.ppt{
            background-image: url('#{$dir}/format_ppt.png');
            .key-word{
                color: $ppt-color;
            }
        }
        >.zip{
            background-image: url('#{$dir}/format_zip.png');
            .key-word{
                color: $zip-color;
            }
        }
        >.excel{
            background-image: url('#{$dir}/format_excel.png');
            .key-word{
                color: $excel-color;
            }
        }
        >.pdf{
            background-image: url('#{$dir}/format_pdf.png');
            .key-word{
                color: $pdf-color;
            }
        }
}