.container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.swiper-slide .bg-tiao-top {
    width: 100vw;
    position: absolute;
    left: 0;
    top: -4.47rem;
}

.swiper-slide .bg-tiao {
    width: 100vw;
    position: absolute;
    left: 0;
    bottom: -4.94rem;
}

.swiper-slide .tiao_animation {
    animation: tiao_top .6s ease;
    animation-fill-mode: forwards
}

@keyframes tiao_top {
    0% {
        top: -4.47rem;
    }

    100% {
        top: 0;
    }
}

.swiper-slide .tiao_animation_bottom {
    animation: tiao_bottom .6s ease;
    animation-fill-mode: forwards
}

@keyframes tiao_bottom {
    0% {
        bottom: -4.94rem;
    }

    100% {
        bottom: .8rem;
    }
}

.swiper-slide .container .menu {
    width: 1.04rem;
    height: 1.04rem;
    background-size: 100% 100%;
    margin: 15px 20px;
    transition: 1s ease all;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

.menu div {
    position: absolute;
    z-index: 99;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s ease all;
    background-size: 100% 100%;
}

.menu-border::after,
.menu-bg::after {
    content: "";
    width: 1.04rem;
    height: 1.04rem;
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: -1 !important;
    transition: 1s ease all;
}

.menu-border::after {
    border: 1px solid #FFD79F;
    transition: 0.3s;
}

.menu-bg::after {
    background-color: rgba(255, 215, 159, .3);
    transition: 0.3s;
}

.menu:hover::after {
    border: none;
    background-color: RGBA(4, 88, 93, .3);
    z-index: -1 !important;
    transition: 0.3s;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}

.info {
    left: 14px;
    top: 14px;
    opacity: 1;
}

.menu .middle {
    font-size: .24rem;
    opacity: 1;
    position: absolute;
}

.menu .special-font {
    font-size: .24rem;
    opacity: 0;
    font-family: 'specialSong' !important;
}

.menu:hover .middle {
    opacity: 0;
    font-family: 'middleSong' !important;
}

.menu:hover .special-font {
    opacity: 1;
}

.swiper-slide .box {
    position: relative;
    width: 12.66rem;
    height: 7.36rem;
    /* transform: scale(0); */
}

.swiper-slide .header {
    position: absolute;
    width: 100%;
    height: .71rem;
    background-color: #04585D;
    box-shadow: .10rem .10rem .10rem rgba(0, 0, 0, .4);
    left: 0;
    top: -.10rem;
    z-index: 98;
}

.swiper-slide .box .content {
    width: 12.66rem;
    height: 7.36rem;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.swiper-slide .box .content .rich {
    width: 12.66rem;
    height: 7.15rem;
    padding: .8rem .2rem 0;
}