.background-image-index[data-v-0e2f0477] {
    width: 100%;
    height: 35vh;
    position: relative;
    z-index: 0
}

.index-video[data-v-0e2f0477] {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-bottom: 1px solid var(--azure)
}

.background-image-index[data-v-0e2f0477]:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .1);
    content: "";
    z-index: 1
}

.background-image-index .transformCenter[data-v-0e2f0477] {
    z-index: 2
}

.ais-SearchBox-input[data-v-0e2f0477] {
    margin-top: -2vh;
    padding: 0 14px;
    height: 40px;
    width: 250px;
    outline: 0;
    border: 2px solid var(--lightGreen);
    border-right: 0;
    border-radius: 40px 0 0 40px;
    color: var(--white);
    background: transparent
}

.ais-SearchBox-input[data-v-0e2f0477]::-webkit-input-placeholder {
    color: var(--azure)
}

.ais-SearchBox-submit[data-v-0e2f0477] {
    margin-top: -2vh;
    height: 40px;
    width: 50px;
    border: 2px solid var(--lightGreen);
    border-left: 0;
    border-radius: 0 40px 40px 0;
    cursor: pointer
}

.space-sort[data-v-0e2f0477] {
    display: flex;
    flex-wrap: wrap;
    margin-top: -50px
}

.sort-item[data-v-0e2f0477] {
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--black);
    font-weight: 700;
    background: hsla(0, 0%, 100%, .8);
    box-shadow: 0 0 10px hsla(0, 0%, 45.5%, .08);
    height: 80px;
    width: calc(25% - 20px);
    margin: 10px;
    display: flex;
    transition: all .3s
}

.sort-item[data-v-0e2f0477]:hover {
    transform: translateY(-6px)
}

.sort-item-sub[data-v-0e2f0477] {
    position: relative;
    width: calc(100% - 60px);
    height: 100%
}

.sort-name[data-v-0e2f0477] {
    font-weight: 700;
    font-size: 20px;
    margin-top: 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.sort-name[data-v-0e2f0477]:after {
    top: 30px;
    width: 45px;
    left: 0;
    height: 2px;
    background: var(--azure);
    content: "";
    border-radius: 1px;
    position: absolute
}

.space-label[data-v-0e2f0477] {
    padding: 5px 10px;
    display: flex;
    flex-wrap: wrap
}

.isActive[data-v-0e2f0477] {
    animation: scale 2.5s ease-in-out infinite
}

.sort-article-first[data-v-0e2f0477] {
    margin: 40px 10px 20px;
    display: flex;
    justify-content: space-between;
    color: var(--greyFont);
    border-bottom: 1px dashed var(--lightGray);
    padding-bottom: 5px
}

.post-recommend-container[data-v-0e2f0477] {
    display: flex;
    flex-wrap: wrap
}

.post-big[data-v-0e2f0477] {
    width: calc(40% - 20px);
    margin: 10px
}

.recommend-small[data-v-0e2f0477] {
    width: calc(60.60606% - 10px)
}

.space-recommend-post[data-v-0e2f0477] {
    width: calc(33.33333% - 20px);
    margin: 10px
}

.space-post[data-v-0e2f0477] {
    width: calc(20% - 20px);
    margin: 10px
}

.pagination-wrap[data-v-0e2f0477] {
    display: flex;
    justify-content: center;
    margin: 20px 0 30px
}

@media screen and (max-width:1000px) {
    .post-big[data-v-0e2f0477] {
        width: calc(50% - 20px);
        margin: 10px
    }

    .recommend-small[data-v-0e2f0477] {
        width: calc(50% - 10px)
    }

    .space-recommend-post[data-v-0e2f0477] {
        width: calc(50% - 20px)
    }

    .space-post[data-v-0e2f0477] {
        width: calc(25% - 20px)
    }
}

@media screen and (max-width:850px) {
    .sort-item[data-v-0e2f0477] {
        width: calc(50% - 20px)
    }
}

@media screen and (max-width:750px) {
    .post-big[data-v-0e2f0477] {
        width: calc(60.60606% - 20px);
        margin: 10px
    }

    .recommend-small[data-v-0e2f0477] {
        width: calc(40% - 10px)
    }

    .space-recommend-post[data-v-0e2f0477] {
        width: calc(100% - 20px)
    }

    .space-post[data-v-0e2f0477] {
        width: calc(33.33333% - 20px)
    }
}

@media screen and (max-width:500px) {
    .post-big[data-v-0e2f0477] {
        width: calc(100% - 20px)
    }

    .space-post[data-v-0e2f0477] {
        width: calc(50% - 20px)
    }
}