.page-wrap img{}

/* html{font-family:'Ubuntu Mono' arial, sans-serif;background:#d1d1de;text-align:center;color:white;} */

.page-wrap{margin:0 auto;width:100%;max-width:100%;overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);}

.vfx-image-wrap{position:relative;display:inline-block;margin:0 auto;width:100%;cursor:ew-resize;}

.before-image{position:absolute;top:0;left:0;z-index:1;width:50%;overflow:hidden;height: 100%;}

.before-image::after{width:auto;content: 'Before';position: absolute;left: 1.5rem;top: 1rem;font-size: 20px;height: 38px;border-radius: 4px;line-height: 38px;color: #fff;text-align: center;    letter-spacing: 1.2px;}

.before-image img{max-width: none; height: 100%;}

.after-image{position:relative;top:0;left:0;z-index:0;}

.after-image::after{width:auto;content: 'After';position: absolute;right: 1.5rem;top: 1rem;font-size: 20px;height:38px;border-radius: 4px;line-height: 38px;color: #fff;text-align: center;    letter-spacing: 1.2px;}

.after-image img{width: 100%;}

.divider-bar{position:absolute;width:1px;left:50%;top:0px;bottom:-15px;height:100%;display:block;z-index:2;}

/* .divider-bar::after{width:49px;height: 49px;top:60%;left: -25px;background: url(../images/cons3_2.png) center no-repeat;content: "";position: absolute;background-size: 49px 49px;} */


.divider-bar p{position: absolute;width: 3px;right: -1px;height: 100%;top: 0;}

.divider-bar p .sp1{position: absolute;height: calc(50% - 20px);background: #fff;top: 0;width: 3px;right: 0;}

.divider-bar p .sp2{position: absolute;height: calc(50% - 20px);background: #fff;bottom: 0;width: 3px;right: 0;}

.divider-bar p s{width: 40px;height: 40px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 50%;border: 2px solid #fff;}

.divider-bar p s::after,.divider-bar p s::before{content: '';position: absolute;width: 10px;height: 10px;top: 50%;background: url(../product/an.png) center no-repeat;background-size: 100% 100%;transform-origin: 0 0;width: 14px;height: 14px;top: 50%;transform: translateY(-50%);}

.divider-bar p s::after{left: 80%;transform: rotate(180deg) translate(-50%,-50%);}

.page-wrap.act2{pointer-events: none;}

.page-wrap.act2 .before-image{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}

.page-wrap.act2 .divider-bar{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}

.page-wrap.act .before-image{width: 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}

.page-wrap.act .divider-bar{left: 0;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}


.yinc{-webkit-transition: all 0s ease; -moz-transition: all 0s ease; transition: all 0s ease;}

.yinc.act{-webkit-transition: all 0s ease; -moz-transition: all 0s ease; transition: all 0s ease;}

.yinc.act2{-webkit-transition: all 0s ease; -moz-transition: all 0s ease; transition: all 0s ease;}

.page-wrap.act2 .before-image{-webkit-transition: all 0s ease; -moz-transition: all 0s ease; transition: all 0s ease;}

.page-wrap.act2 .divider-bar{-webkit-transition: all 0s ease; -moz-transition: all 0s ease; transition: all 0s ease;}

.page-wrap.act .before-image{-webkit-transition: all 0s ease; -moz-transition: all 0s ease; transition: all 0s ease;}

.page-wrap.act .divider-bar{-webkit-transition: all 0s ease; -moz-transition: all 0s ease; transition: all 0s ease;}


.speci3 .before-image::after,.speci3 .after-image::after{font-size: 26px;top: 30px;}

.speci3 .before-image::after{left: 35px;}

.speci3 .after-image::after{right: 35px;}

@media screen and (max-width:1025px) {
    .page-wrap{display: block;border-radius: 14px;}

    .page-wrap.act{display: block;}

    .before-image::after,.after-image::after{width: 70px;height: 24px;line-height: 24px;font-size: 14px;}

    .after-image::after{right: 15px;top: 15px;}

    .before-image::after{left: 15px;top: 15px;}

    .divider-bar::after{width: 31px;height: 31px;left: -16px;background-size: 31px 31px;}
}