.model-list {
    font-size: 0;
    position: relative
}

    .model-list .model-item {
        margin-top: 44px;
        width: 200px;
        height: 473px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

        .model-list .model-item .bg {
            position: absolute;
            left: 0;
            top: 0
        }

        .model-list .model-item.fully {
            background-image: url(/html/images/yewu1.png)
        }

        .model-list .model-item.fast {
            background-image: url(/html/images/yewu2.png)
        }

        .model-list .model-item.quality {
            background-image: url(/html/images/yewu3.png)
        }

        .model-list .model-item.coast {
            background-image: url(/html/images/yewu4.png)
        }

        .model-list .model-item.support {
            background-image: url(/html/images/yewu5.png)
        }

        .model-list .model-item.active, .model-list .model-item:hover {
            width: 399px
        }

            .model-list .model-item.active.fully, .model-list .model-item:hover.fully {
                background-image: url(/html/images/kancha_hover.jpg)
            }

            .model-list .model-item.active.fast, .model-list .model-item:hover.fast {
                background-image: url(/html/images/shigong_hover.jpg)
            }

            .model-list .model-item.active.quality, .model-list .model-item:hover.quality {
                background-image: url(/html/images/xinnengyuan_hover.jpg)
            }

            .model-list .model-item.active.coast, .model-list .model-item:hover.coast {
                background-image: url(/html/images/caigou_hover.jpg)
            }

            .model-list .model-item.active.support, .model-list .model-item:hover.support {
                background-image: url(/html/images/jinshu_hover.jpg)
            }

            .model-list .model-item.active .icon, .model-list .model-item:hover .icon {
                width: 60px;
                height: 60px;
                margin-top: 64px
            }

            .model-list .model-item.active .title, .model-list .model-item:hover .title {
                font-size: 20px;
                margin-top: 16px;
                margin-bottom: 40px
            }

            .model-list .model-item.active .desc, .model-list .model-item:hover .desc {
                display: block;
                width: 100px;
                margin: 0 auto;
                font-size: 16px;
                color: #fff;
                line-height: 1.5em;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                border: solid 1px #ffffff;
                border-radius: 20px;
                margin-top: 10px;
                height: 35px;
                line-height: 35px;
            }

        .model-list .model-item .icon {
            width: 40px;
            height: 40px;
            margin-top: 131px
        }

        .model-list .model-item .title {
            font-weight: 700;
            font-size: 16px;
            color: #fff;
            margin-top: 20px
        }

        .model-list .model-item .desc {
            display: none
        }