/* ----------SPACE---------- */
.space-sort {
    max-width: var(--page-maxwidth);
    padding: var(--page-padding);
    margin: 120px var(--page-margin) 30px;

    div {
        display: flex;
        gap: 20px;
        justify-content: space-between;
    }

    a {
        border: 1px solid #ddd;
        box-sizing: border-box;
        height: 50px;
        line-height: 1;
        min-width: 13.8%;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        color: #222;
        font-size: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all .3s ease-in-out;
    }

    a:first-child {
        min-width: 8.3%;
    }

    a:hover {
        background-color: #222;
        border: 1px solid #222;
        color: #fff;
    }

    a.active {
        background-color: #808080;
        border: 1px solid #808080;
        color: #fff;
    }
}

/*筛选区*/
.filter-box {
    padding: 0 var(--page-padding);
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #f5f5f5;

    dl {
        width: -webkit-fill-available;
        max-width: var(--page-maxwidth);
        padding: 20px var(--page-padding);
        margin: 0 var(--page-margin);
        display: flex;
        gap: 20px;
        align-items: flex-start;
        box-sizing: border-box;
        border-top: 1px solid #ddd;
    }

    dl:first-child {
        border: none;
    }


    dt {
        line-height: 50px;
        min-width: 8.3%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        color: #555;
        opacity: 0.6;
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all .3s ease-in-out;
    }

    dd {
        display: flex;
        gap: 20px;
        width: -webkit-fill-available;
        justify-content: flex-start;
    }

    dd div {
        line-height: 50px;
        min-width: 15.38%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
        flex-direction: column;
        color: #555;
        font-size: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all .3s ease-in-out;

        label {
            display: flex;
            align-items: center;
            gap: 7px;
            width: -webkit-fill-available;
        }

        input[type="checkbox"] {
            width: 26px;
            height: 26px;
            min-width: 26px;
            min-height: 26px;
        }

        span {}
    }

    dl.subsort dd div {
        box-sizing: border-box;
        border-right: 1px solid #ddd;
    }

    dl.subsort dd div:last-child {
        border: none;
    }

    dd div.enable {
        opacity: 1;
    }

    dd div.disable {
        opacity: 0.4;
    }
}

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

}

/*空间项目列表*/
.space-list {
    max-width: var(--page-maxwidth);
    padding: var(--page-padding);
    margin: 80px var(--page-margin);

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

    li {
        position: relative;

        .item {
            width: 100%;
            height: auto;
            overflow: hidden;
            border: 1px solid #ddd;
            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 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background: #808080;

            span {
                display: block;
                color: #fff;
                line-height: 40px;
                text-indent: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: calc(100% - 40px);
            }
        }

        .favorite,
        .favorited {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 40px;
            height: 40px;
            background: url(../imgs/ico_favorite_white.svg) no-repeat center center / auto 60%;
            border: none;
            outline: none;
            cursor: pointer;
            opacity: 0.5;
            transition: all .3s ease-in-out;
        }

        .favorite:hover {
            transform: scale(1.1);
            rotate: 72deg;
            opacity: 1;
        }

        .favorited {
            background-image: url(../imgs/ico_favorited.svg);
            rotate: 0deg;
            opacity: 1;
        }

        .favorited:hover {
            transform: scale(1.2);
        }
    }
}

/*空间项目详情*/
.space-info {
    max-width: var(--page-maxwidth);
    padding: 0 var(--page-padding);
    margin: 120px var(--page-margin);
    display: flex;
    gap: 40px;
    justify-content: space-between;

    /*主体内容*/
    .content {
        max-width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;

        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: 10px 0 20px;
            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;
            }
        }

        .param {
            display: flex;
            gap: 0;
            width: 100%;
            align-items: flex-start;
            flex-direction: column;
            justify-content: flex-end;

            li {
                width: 100%;
                height: 80px;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                box-sizing: border-box;
                border-bottom: 1px solid #ddd;
                align-content: center;
                align-items: center;
            }

            dt {
                width: 100px;
            }

            dd {}
        }

        .button-area {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            row-gap: 10px;
            height: -webkit-fill-available;
            border-bottom: 1px solid #ddd;
            width: 100%;
            height: 140px;
            align-items: center;
            align-content: center;
            justify-content: space-between;

            .view {
                cursor: pointer;
                width: 240px;
                line-height: 50px;
                height: 50px;
                color: #fff;
                font-size: 20px;
                background-color: #808080;
                display: flex;
                gap: 5px;
                align-items: center;
                justify-content: center;
                transition: all .3s ease-in-out;

                i {
                    display: block;
                    background: url(../imgs/ico_download_white.svg) no-repeat center center / auto 80%;
                    width: 30px;
                    height: 30px;
                    transition: all .3s ease-in-out;
                }
            }

            .view:hover {
                color: #fff;
                background-color: #222;

                i {
                    width: 25px;
                }
            }

            .favorite {
                cursor: pointer;
                width: 160px;
                line-height: 50px;
                height: 50px;
                color: #222;
                font-size: 20px;
                background-color: #f5f5f5;
                display: flex;
                gap: 5px;
                align-items: center;
                justify-content: center;
                transition: all .3s ease-in-out;

                i {
                    display: block;
                    background: url(../imgs/ico_favorite.svg) no-repeat center center / auto 80%;
                    width: 30px;
                    height: 30px;
                    opacity: 0.7;
                    transition: all .3s ease-in-out;
                }
            }

            .favorite:hover {
                color: #fff;
                background-color: #222;

                i {
                    background-image: url(../imgs/ico_favorite_white.svg);
                    opacity: 1;
                    transform: rotate(72deg);
                }
            }

            .favorited {
                cursor: pointer;
                width: 120px;
                line-height: 50px;
                color: #222;
                font-size: 20px;
                background-color: #f5f5f5;
                display: flex;
                gap: 5px;
                align-items: center;
                justify-content: center;
                transition: all .3s ease-in-out;

                i {
                    display: block;
                    background: url(../imgs/ico_favorited.svg) no-repeat center center / auto 80%;
                    width: 30px;
                    height: 30px;
                    transition: all .3s ease-in-out;
                }
            }

            .favorited:hover {
                background-color: #ffcc00;

                i {
                    background-image: url(../imgs/ico_favorite_white.svg);
                    transform: scale(1.3);
                }
            }
        }
    }

    /*封面图*/
    .cover {
        display: flex;
        max-width: 66.67%;
        height: 720px;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid #ddd;
        align-items: center;
        justify-content: center;

        img {
            height: 100%;
            width: auto;
        }
    }
}

/*效果图*/
.space-images {
    max-width: var(--page-maxwidth);
    padding: 0 var(--page-padding);
    margin: 80px var(--page-margin);
    display: flex;
    gap: 0;
    flex-direction: column;

    h3 {
        font-weight: 400;
        font-size: 22px;
        line-height: 40px;
        color: #222;
        display: flex;
        justify-content: flex-start;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        margin-bottom: 40px;
    }

    div {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    img {
        width: 100%;
        display: block;
    }
}



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



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

    .space-sort div,
    .filter-box dl,
    .filter-box dd {
        gap: 15px;
    }

    .space-list {
        ul {
            grid-gap: 10px;
            grid-template-columns: repeat(3, auto);
        }
    }
}



/*-----------------------------------1000-----------------------------------*/
@media screen and (max-width:1000px) {
    .space-sort {
        overflow-x: scroll;
        display: block;
        margin: 80px var(--page-margin) 30px;
    }

    .space-sort div {
        display: flex;
        justify-content: flex-start;
    }

    .space-sort div a {
        width: auto;
        min-width: auto;
        padding: 0 20px;
        display: block;
        overflow: unset;
    }

    .space-sort div a:first-child {
        min-width: auto;
    }

    .filter-box dl {
        overflow-x: scroll;
        display: block;
        padding: 20px var(--page-margin);
        margin: 0 auto;
    }

    .filter-box dd {
        width: max-content;
    }

    .filter-box dt {
        width: 100%;
    }

    .filter-box dd div {
        width: auto;
        min-width: 200px;
        padding-right: 10px;
    }

    /* .space-sort,
    .filter-box dl,
    .filter-box dd {
        gap: 10px;
    } */

    #search-space {

    }

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

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

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

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

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


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