.wrap{margin:0 0;width:100%;padding-top:58%;overflow:hidden;position:relative;text-align:left;direction:ltr;}
.mockup{position:absolute;top:0;-webkit-transform-origin:0 0;transform-origin:0 0;}
.mockup::after{content:'';position:absolute;background:rgba(0,0,0,0.1);top:0;left:0;width:100%;height:100%;pointer-events:none;}
.mockup__img{display:block;width:1350px;}
.screen,
.mobile{position:absolute;overflow:hidden;z-index:-100;outline:1px solid transparent;-webkit-transform-origin:0px 0px 0px;transform-origin:0px 0px 0px;}
.screen{width:350px;height:400px;top:170px;left:80px;-webkit-transform:matrix3d(1.420865, -0.01943, 0, -0.000106,
-0.083205, 0.824819, 0, -0.000056,
0, 0, 1, 0,
571, 36, 0, 1);transform-origin:0px 0px 0px;transform-origin:0px 0px 0px;transform:matrix3d(1.420865, -0.01943, 0, -0.000106,
-0.083205, 0.824819, 0, -0.000056,
0, 0, 1, 0,
571, 36, 0, 1);transform-origin:0px 0px 0px;}
.mobile{width:320px;height:480px;top:850px;left:525px;-webkit-transform:matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);transform:matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);}
.slideshow{padding:0;margin:0;width:100%;height:100%;list-style-type:none;}
.slideshow__item{width:100%;height:100%;position:absolute;overflow:hidden;pointer-events:none;z-index:1;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
.slideshow__item.current{pointer-events:auto;z-index:100;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);}
.slideshow img{width:100%;height:100%;}
.slideshow__item.in--next{-webkit-animation:inNext 0.5s forwards ease-in-out;animation:inNext 0.5s forwards ease-in-out;}
.slideshow__item.out--next{-webkit-animation:outNext 0.5s forwards ease-in-out;animation:outNext 0.5s forwards ease-in-out;}
.slideshow__item.in--prev{-webkit-animation:inPrev 0.5s forwards ease-in-out;animation:inPrev 0.5s forwards ease-in-out;}
.slideshow__item.out--prev{-webkit-animation:outPrev 0.5s forwards ease-in-out;animation:outPrev 0.5s forwards ease-in-out;}
@-webkit-keyframes inPrev{0%{-webkit-transform:translate3d(-30%, 0, 0);transform:translate3d(-30%, 0, 0);}
100%{-webkit-transform:none;transform:none;}
}
@keyframes inPrev{0%{-webkit-transform:translate3d(-30%, 0, 0);transform:translate3d(-30%, 0, 0);}
100%{-webkit-transform:none;transform:none;}
}
@-webkit-keyframes inNext{0%{-webkit-transform:translate3d(30%, 0, 0);transform:translate3d(30%, 0, 0);}
100%{-webkit-transform:none;transform:none;}
}
@keyframes inNext{0%{-webkit-transform:translate3d(30%, 0, 0);transform:translate3d(30%, 0, 0);}
100%{-webkit-transform:none;transform:none;}
}
@-webkit-keyframes outPrev{100%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}
}
@keyframes outPrev{100%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}
}
@-webkit-keyframes outNext{100%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
}
@keyframes outNext{100%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
}