.modal-wrap{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.7);
    z-index: 110;
    display: none;
}
.modal-wrap.is-active{
    display: block;
}
.modal{
    background-color: #fff;
    padding: 2%;
}
.swiper-container{
    width: 100%;
    overflow: hidden;
}
.swiper-wrap{
    position: relative;
    max-width: 1200px;
    display: none;
    z-index: 120;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.swiper-button-next{
    right: -30px;
}
.swiper-button-prev{
    left: -30px;
}
@media screen and (max-width: 769px){
    .modal{
       padding: 5%; 
    }
    .swiper-wrap{
        max-width: 100%;
        padding: 6.7% 4% 0;
    }
    .swiper-button-next{
        right: 0px;
    }
    .swiper-button-prev{
        left: 0px;
    }
}