/* ----------NEWS---------- */
.news-sort {
    max-width: var(--page-maxwidth);
    padding: var(--page-padding);
    margin: 120px var(--page-margin) 80px;

    div {
        display: flex;
        gap: 60px;
        justify-content: center;
    }

    a {
        box-sizing: border-box;
        height: 40px;
        line-height: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        font-size: 22px;
        transition: all .3s ease-in-out;
    }

    a:hover,
    a.active {
        color: #000;
        text-decoration: underline;
        text-underline-offset: 10px;
        text-decoration-thickness: 1px;
    }
}

/*SEARCH-BOX*/
#search-news {

}

/*案例项目列表*/
.news-list {
    max-width: var(--page-maxwidth);
    padding: var(--page-padding);
    margin: 80px var(--page-margin);

    ul {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, auto);
        flex-wrap: wrap;
        grid-gap: 40px;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
    }

    li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .item {
            max-width: 100%;
            height: auto;
            overflow: hidden;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                transition: all .3s ease-in-out;
            }
        }

        .item:hover img {
            transform: scale(1.1);
        }

        .topping {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            background: url(../imgs/ico_topping.svg) no-repeat center center / auto 100%;
        }

        .name {
            max-width: 100%;
            padding: 20px 0px;
            display: flex;
            gap: 10px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all .3s ease-in-out;

            dt {
                line-height: 40px;
                font-size: 24px;
                color:#222;
            }

            dd {
                line-height: 20px;
                font-size: 18px;
                font-weight: 300;
                color: #808080;
                height: 20px;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
        }
    }

    li:hover .name {
        background: #fff !important;
        color: #222 !important;
    }
}

/*案例项目详情*/
.news-info {
    max-width: var(--page-maxwidth);
    padding: 0 var(--page-padding);
    margin: 120px var(--page-margin);
    display: flex;
    gap: 40px;

    /*主体内容*/
    .content {
        /* max-width: 67%; */
        display: flex;
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;

        h1 {
            margin: 0;
            padding: 0;
            line-height: 40px;
            font-size: 36px;
            color: #222;
            font-weight: 400;
            text-align: left;
            height: auto;
            /* white-space: nowrap; */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tag {
            padding: 0px 0 80px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;

            em {
                height: 40px;
                line-height: 40px;
                border: 1px solid #ddd;
                border-radius: 40px;
                display: inline-block;
                font-size: 18px;
                font-weight: 300;
                font-style: normal;
                color: #222;
                padding: 0 20px;
                align-content: center;
            }
        }

        .resume {
            color: #222;
            font-size: 20px;
            font-weight: 300;
        }
    
        .datetime {
            padding: 40px 0 0;
            color: #808080;
            font-size: 20px;
            font-weight: 200;
        }
    }
}



/*-----------------------------------1600-----------------------------------*/
@media screen and (max-width:1600px) {}



/*-----------------------------------1300-----------------------------------*/
@media screen and (max-width:1300px) {

    .news-sort div {
        gap: 40px;
    }
}



/*-----------------------------------1000-----------------------------------*/
@media screen and (max-width:1000px) {
    .news-sort {

        a:hover,
        a.active {
            text-decoration: none;
        }
    }

    .news-sort div {
        gap: 20px;
    }

    .news-sort div a {
        width: auto;
        min-width: auto;
        padding: 0 20px;
    }

    #search-news {

    }

    .news-list {
        margin: 60px var(--page-margin);

        ul {
            grid-gap: 30px;
            grid-template-columns: repeat(2, auto);
        }
    }

    .news-info {
        flex-direction: column;
        margin: 80px var(--page-margin);
        gap: 20px;

        .content,
        .cover {
            /* max-width: 100%; */
            height: auto;

            img {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }
        }
    }
}


/*-----------------------------------500------------------------------------*/
@media screen and (max-width:500px) {
    .news-list {
        ul {
            grid-gap: 20px;
            grid-template-columns: repeat(1, auto);
        }
    }
}