.allStoryIndex4{
    margin: auto;
    align-items: center;
    grid-gap: 2rem;
    margin-top: 1rem;
    .swiper-slide{
        transform: unset !important;
        width: 7rem;
        .story{
            position: relative;
            width: 100%;
            text-align: center;
            background-size: cover;
            background-position: center;
            cursor: pointer;
            overflow: hidden;
            img,video{
                height: 4.5rem;
                width: 4.5rem;
                border-radius: 50%;
                object-fit: cover;
            }
            .video-container{
                display: grid;
            }
            .box{
                padding: .5rem;
                border-radius: 50%;
                border: 2px solid white;
                position: relative;
                .video-container,.pic{
                    padding: .5rem;
                    border-radius: 50%;
                    border: 2px solid $green;
                    box-shadow: 0 0 5px rgba(0,0,0,.4);
                }
                .name1{
                    position: absolute;
                    right: 0;
                    left: 0;
                    display: grid;
                    justify-content: center;
                    bottom: 0;
                    span{
                        color: white;
                        background: $green;
                        font-size: .6rem;
                        box-shadow: 0 5px 5px rgba(0,0,0,.2);
                        font-weight: 700;
                        padding: 1px 4px;
                        border-radius: 5px;
                    }
                }
            }
            .content{
                text-align: center;
                .name2{
                    font-size: .7rem;
                    font-weight: 500;
                    color: $text1;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                    margin-top: .5rem;
                }
            }
        }
        .showStory{
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            z-index: 4000;
            .show1 {
                width: 30%;
                margin: auto;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background: white;
                overflow: hidden;
                height: 75%;
                border-radius: 10px;
                .titleS{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: .5rem;
                    height: 4rem;
                    .profile{
                        display: flex;
                        gap: .5rem;
                        align-items: center;
                        .pic{
                            overflow: hidden;
                            border-radius: 50%;
                            img{
                                max-width: 5rem;
                                height: 3rem;
                                object-fit: contain;
                            }
                        }
                        .detail{
                            .name{
                                font-size: .9rem;
                                font-weight: 300;
                                color: black;
                            }
                            .city{
                                font-size: .8rem;
                                font-weight: 300;
                                color: $text2;
                            }
                        }
                    }
                    i{
                        display: grid;
                        align-items: center;
                        cursor: pointer;
                        svg{
                            width: 1.5rem;
                            height: 1.5rem;
                            fill: $text1;
                        }
                    }
                }
                .body{
                    height: calc(100% - 6.5rem);
                    .video-container,.pic{
                        height: 100%;
                    }
                    img,video{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .send{
                    display: grid;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    padding: .3rem .5rem;
                    text-align: center;
                    background: $green;
                    color: white;
                    font-size: 1rem;
                    font-weight: 300;
                    height: 2.5rem;
                }
            }
        }
    }
    .swiper{
        z-index: unset !important;
        width: 100%;
    }
    .swiper-button-next,.swiper-button-prev{
        padding: .5rem;
        background: white;
        width: 2.5rem;
        height: 2.5rem;
        top: 0;
        bottom: 0;
        margin-top: calc(200px - (var(--swiper-navigation-size)/ 2));
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,.3);
        &:before,&:after{
            font-size: 1rem;
            color: $green;
        }
    }
    .swiper-button-prev{
        right: .5rem !important;
    }
    .swiper-button-next{
        left: .5rem !important;
    }
    @media (max-width: 930px) {
        display: block;
        margin-bottom: 1rem;
        .left1{
            display: none;
        }
        .swiper-button-next,.swiper-button-prev{
            display: none;
        }
        .swiper-slide{
            .showStory{
                .show1 {
                    width: 98%;
                }
            }
        }
    }
}
