.left-slide {
    margin: 0;
}
.web-swiper .swiper-slide {
    position: relative;
}
.web-swiper .swiper-slide img.background {
    width: 100%;
}
.web-swiper .swiper-slide img.mockup {
    position: absolute;
}
@keyframes mockup1 {
    0% {
        opacity: 0;
        transform: translateX(-600px) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(20deg);
    }
}
@keyframes mockup2 {
    0% {
        opacity: 0;
        transform: translateX(-400px) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(-30deg);
    }
}
.web-swiper .swiper-slide img.chat {
    width: 300px;
    top: 5%;
    right: 5%;
    animation: mockup1 2s cubic-bezier(0, 0, 0, 1.01);
    transform: rotate(20deg);
}
.web-swiper .swiper-slide img.app {
    width: 340px;
    bottom: 5%;
    left: 5%;
    animation: mockup2 1.2s cubic-bezier(0, 0, 0, 1.01);
    transform: rotate(-30deg);
}
.web-swiper .swiper-slide .comment.emoji {
    margin-top: 285px;
}

/* 반응형 */
@media screen and (max-width: 1280px) {
    .web-swiper .swiper-slide img.chat {
        width: 240px;
    }
    .web-swiper .swiper-slide img.app {
        width: 270px;
    }
    .web-swiper .swiper-slide .comment.emoji {
        margin-top: 100px;
    }
}
@media screen and (max-width: 980px) {
    .web-swiper .swiper-slide img.chat {
        width: 200px;
        right: 10%;
    }
    .web-swiper .swiper-slide img.app {
        width: 240px;
        left: 10%;
    }
}
@media screen and (max-width: 680px) {
    .web-swiper .swiper-slide img.chat {
        width: 130px;
        top: 10%;
    }
    .web-swiper .swiper-slide img.app {
        width: 150px;
    }

}
@media screen and (max-width: 480px) {
    .web-swiper .swiper-slide img.chat {
        width: 100px;
        top: 10%;
    }
    .web-swiper .swiper-slide img.app {
        width: 120px;
    }
}