/* =====================================================
 * 网站首页样式定义
 * 文件名：index.css
 * ===================================================== */

.product-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 235px 235px;
    grid-gap: 15px;
    padding: 15px;
}

    .product-list > a {
        background-color: #fbfcfd;
        border: 1px dotted #bac6d0;
        color: #7f7f7f;
    }

        .product-list > a:hover, .product-list > a:active, .product-list > a:focus {
            background-color: #ffffff;
            color: #3f3f3f;
            box-shadow: rgba(0,0,0,0.05) 0px 5px 10px;
        }

        .product-list > a > .title-picture {
            width: 100%;
            height: 135px;
            border: 1px dotted #bac6d0;
            background-color: #bac6d0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.85;
        }

        .product-list > a:hover > .title-picture, .product-list > a:active > .title-picture, .product-list > a:focus > .title-picture {
            opacity: 1;
        }

        .product-list > a > .article-title {
            margin: 5px 0px;
            text-align: center;
            font-weight: bolder;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .product-list > a > .text-content {
            width: 100%;
            padding: 0px 5px;
            height: 65px;
            overflow: hidden;
        }

.knowledge-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 135px 135px 135px 135px 135px 135px;
    grid-gap: 15px;
    padding: 15px;
}

    .knowledge-list > a {
        display: flex;
        background-color: #fbfcfd;
        border: 1px dotted #bac6d0;
        color: #7f7f7f;
    }

        .knowledge-list > a:hover, .knowledge-list > a:active, .knowledge-list > a:focus {
            background-color: #ffffff;
            color: #3f3f3f;
            box-shadow: rgba(0,0,0,0.05) 3px 3px 10px;
        }

        .knowledge-list > a > .title-picture {
            flex-shrink: 0;
            width: 185px;
            height: 135px;
            border: 1px solid #bac6d0;
            background-color: #bac6d0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.85;
        }

        .knowledge-list > a:hover > .title-picture, .knowledge-list > a:active > .title-picture, .knowledge-list > a:focus > .title-picture {
            opacity: 1;
        }