﻿.menu-box {
    height: 5rem;
    margin-bottom: 1rem;
}

.menu-box-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: 1rem !important;
    font-weight: bold !important;
    color: #fff !important;
    border-radius: 1.2rem;
    cursor: pointer;
}

.menu-box-item>a>h2 {
    font-size: 1rem !important;
    font-weight: bold !important;
    color: #fff !important;
    margin: inherit !important;
}

.top-swiper {
    height: 25rem !important;
}

.top-swiper-item {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 100%;

    /*margin-right:2rem;*/
}

.top-swiper-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.actor-index-box {
    display: flex;
    margin-right: 0.5rem;
    height: 24rem !important;
    width: 100%;
    position: relative;
    padding: 0 !important;
}

.actor-index-box-img {
    /*filter: opacity(80%);*/
    border-radius: 1rem;
    width: 100%;
    height: 100%;
}

.actor-index-box-img:hover {
    cursor: pointer;
    filter: opacity(100%);
}

.actor-index-box-name {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    height: 3.5rem;
    font-size: 1.2rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: hidden;
}

.swiper-slide-prev {
    opacity: 0.4;
}

.swiper-slide-prev:hover {
    opacity: 1;
}

.swiper-slide-next {
    opacity: 0.4;
}

.swiper-slide-next:hover {
    opacity: 1
}

@media (min-width:1921px) {
    .top-swiper {
        height: 28rem !important;
    }


    .actor-index-box {
        display: flex;
        height: 28rem !important;
        position: relative;
    }
}

@media (max-width:1920px) {
    .top-swiper {
        height: 24rem !important;
    }

    .actor-index-box {
        display: flex;
        height: 25rem !important;
        position: relative;
    }
}

@media (max-width:1600px) {
    .top-swiper {
        height: 22rem !important;
    }

    .actor-index-box {
        display: flex;
        height: 22rem !important;
        position: relative;
    }
}

@media (max-width:1400px) {
    .top-swiper {
        height: 20rem !important;
    }

    .actor-index-box {
        display: flex;
        height: 16rem !important;
        position: relative;
    }
}

@media (max-width:1200px) {
    .top-swiper {
        height: 18rem !important;
    }

    .actor-index-box {
        display: flex;
        height: 18rem !important;
        position: relative;
    }
}

@media (max-width:900px) {
    .top-swiper {
        height: 22rem !important;
    }

    .actor-index-box {
        display: flex;
        height: 20rem !important;
        position: relative;
    }
}

@media (max-width:768px) {
    .top-swiper {
        height: 20rem !important;
    }
}

@media (max-width:576px) {
    .top-swiper {
        height: 18rem !important;
    }
}

@media (max-width:420px) {
    .top-swiper {
        height: 18rem !important;
    }
}



.movie-box-default {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 1rem;
}

.movie-box-default img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}