.press-write-off {
  &__slider-bg {
    position: absolute;
    left: 2rem;
    top: 2rem;
    width: 1.37rem;
    height: .52rem;
    transform-style: preserve-3d;
    transform: translate3D(0, 0, 0) scale(.06, .95);
    opacity: 0;
    transform-origin: .36% 50%;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/writeoff/slider-bg.png) no-repeat center/contain;

    &--ani {
      animation: bg_ani 1.44s steps(1) infinite;
    }

    &--ani-h {
      animation: bg_ani_h 1.32s steps(1) infinite;
    }
  }

  &__gesture-icon {
    position: absolute;
    left: 2rem;
    top: 2rem;
    width: 1.4rem;
    height: 1.62rem;
    transform-style: preserve-3d;
    transform: translate3D(0, 0, 0);
    opacity: 1;
    transform-origin: 50% 50%;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/writeoff/slider-gesture-v.png) no-repeat center/contain;

    &--ani {
      animation: gesture_ani 1.44s steps(1) infinite;
    }

    &--ani-h {
      animation: gesture_ani_h 1.32s steps(1) infinite;
    }
  }
}

@keyframes bg_ani {
  0% {
    transform: translate3D(0, 0, 0) scale(.05593125274725, .954327);
    opacity: 0;
  }

  2.78% {
    transform: translate3D(.0227rem, 0, 0) scale(.20572816571085, .954327);
    opacity: .05;
  }

  5.56% {
    transform: translate3D(.0455rem, 0, 0) scale(.35552507867445, .954327);
    opacity: .11;
  }

  8.33% {
    transform: translate3D(.0681rem, 0, 0) scale(.50532199163805, .954327);
    opacity: .16;
  }

  11.11% {
    transform: translate3D(.0907rem, 0, 0) scale(.65511890460165, .954327);
    opacity: .21;
  }

  13.89% {
    transform: translate3D(.1135rem, 0, 0) scale(.80491581756525, .954327);
    opacity: .27;
  }

  16.67% {
    transform: translate3D(.1362rem, 0, 0) scale(.95471273052886, .954327);
    opacity: .32;
  }

  19.44% {
    transform: translate3D(.0827rem, 0, 0) scale(1.09072552033985, .954326991453);
    opacity: .37;
  }

  22.22% {
    transform: translate3D(.0292rem, 0, 0) scale(1.22673831015085, .954326982906);
    opacity: .43;
  }

  25% {
    transform: translate3D(-.0242rem, 0, 0) scale(1.36275109996185, .954326974359);
    opacity: .48;
  }

  27.78% {
    transform: translate3D(-.0777rem, 0, 0) scale(1.49876388977285, .954326965812);
    opacity: .53;
  }

  30.56% {
    transform: translate3D(-.1312rem, 0, 0) scale(1.63477667958385, .954326957265);
    opacity: .59;
  }

  33.33% {
    transform: translate3D(-.1846rem, 0, 0) scale(1.77078946939485, .954326948718);
    opacity: .64;
  }

  36.11% {
    transform: translate3D(-.2381rem, 0, 0) scale(1.90680225920585, .954326940171);
    opacity: .69;
  }

  38.89% {
    transform: translate3D(-.2915rem, 0, 0) scale(2.04281504901685, .954326931624);
    opacity: .75;
  }

  41.67% {
    transform: translate3D(-.345rem, 0, 0) scale(2.17882783882785, .954326923077);
    opacity: .80;
  }

  44.44% {
    transform: translate3D(-.345rem, 0, 0) scale(2.17882783882785, .954326923077);
    opacity: .53;
  }

  47.22% {
    transform: translate3D(-.345rem, 0, 0) scale(2.17882783882785, .954326923077);
    opacity: .27;
  }

  50% {
    transform: translate3D(-.345rem, 0, 0) scale(2.17882783882785, .954326923077);
    opacity: 0;
  }

  100% {
    transform: translate3D(-.345rem, 0, 0) scale(2.17882783882785, .954326923077);
    opacity: 0;
  }
}

@keyframes gesture_ani {
  0% {
    transform: translate3D(0, 0, 0);
    opacity: 1;
  }

  2.78% {
    transform: translate3D(.2208rem, 0, 0);
    opacity: 1;
  }

  5.56% {
    transform: translate3D(.4416rem, 0, 0);
    opacity: 1;
  }

  8.33% {
    transform: translate3D(.6624rem, 0, 0);
    opacity: 1;
  }

  11.11% {
    transform: translate3D(.8832rem, 0, 0);
    opacity: 1;
  }

  13.89% {
    transform: translate3D(1.104rem, 0, 0);
    opacity: 1;
  }

  16.67% {
    transform: translate3D(1.2274rem, 0, 0);
    opacity: 1;
  }

  19.44% {
    transform: translate3D(1.3508rem, 0, 0);
    opacity: 1;
  }

  22.22% {
    transform: translate3D(1.4742rem, 0, 0);
    opacity: 1;
  }

  25% {
    transform: translate3D(1.5975rem, 0, 0);
    opacity: 1;
  }

  27.78% {
    transform: translate3D(1.7209rem, 0, 0);
    opacity: 1;
  }

  30.56% {
    transform: translate3D(1.8443rem, 0, 0);
    opacity: 1;
  }

  33.33% {
    transform: translate3D(1.9675rem, 0, 0);
    opacity: 1;
  }

  36.11% {
    transform: translate3D(2.091rem, 0, 0);
    opacity: 1;
  }

  38.89% {
    transform: translate3D(2.2144rem, 0, 0);
    opacity: 1;
  }

  41.67% {
    transform: translate3D(2.3378rem, 0, 0);
    opacity: 1;
  }

  44.44% {
    transform: translate3D(2.3378rem, 0, 0);
    opacity: .75;
  }

  47.22% {
    transform: translate3D(2.3378rem, 0, 0);
    opacity: .5;
  }

  50% {
    transform: translate3D(2.3378rem, 0, 0);
    opacity: .25;
  }

  52.78% {
    transform: translate3D(2.3378rem, 0, 0);
    opacity: 0;
  }

  100% {
    transform: translate3D(2.3378rem, 0, 0);
    opacity: 0;
  }
}

@keyframes gesture_ani_h {
  0% {
    transform: translate3D(0, 0, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  3.03% {
    transform: translate3D(0, .0801rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  6.06% {
    transform: translate3D(0, .16rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  9.09% {
    transform: translate3D(0, .24rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  12.12% {
    transform: translate3D(0, .3201rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  15.15% {
    transform: translate3D(0, .40rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  18.18% {
    transform: translate3D(0, .48rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  21.21% {
    transform: translate3D(0, .56rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  24.24% {
    transform: translate3D(0, .64rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  27.27% {
    transform: translate3D(0, .72rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  30.30% {
    transform: translate3D(0, .7999rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  33.33% {
    transform: translate3D(0, .8799rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  36.36% {
    transform: translate3D(0, .96rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  39.39% {
    transform: translate3D(0, 1.04rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  42.42% {
    transform: translate3D(0, 1.1199rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  45.45% {
    transform: translate3D(0, 1.20rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 1;
  }

  48.48% {
    transform: translate3D(0, 1.20rem, 0) scale(.78571428571429, .78571428571429);
    opacity: .50;
  }

  51.52% {
    transform: translate3D(0, 1.20rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 0;
  }

  100% {
    transform: translate3D(0, 1.20rem, 0) scale(.78571428571429, .78571428571429);
    opacity: 0;
  }
}

@keyframes bg_ani_h {
  0% {
    transform: rotate(90deg) scale(.08455882352941, .74038461538461);
    opacity: 0;
  }

  3.03% {
    transform: rotate(90deg) scale(.14779411764706, .74038461538461);
    opacity: .05;
  }

  6.06% {
    transform: rotate(90deg) scale(.21102941176471, .74038461538461);
    opacity: .11;
  }

  9.09% {
    transform: rotate(90deg) scale(.27426470588235, .74038461538461);
    opacity: .16;
  }

  12.12% {
    transform: rotate(90deg) scale(.3375, .74038461538461);
    opacity: .21;
  }

  15.15% {
    transform: rotate(90deg) scale(.40073529411765, .74038461538461);
    opacity: .27;
  }

  18.18% {
    transform: rotate(90deg) scale(.46397058823529, .74038461538461);
    opacity: .32;
  }

  21.21% {
    transform: rotate(90deg) scale(.52720588235294, .74038461538461);
    opacity: .37;
  }

  24.24% {
    transform: rotate(90deg) scale(.59044117647059, .74038461538461);
    opacity: .43;
  }

  27.27% {
    transform: rotate(90deg) scale(.65367647058824, .74038461538461);
    opacity: .48;
  }

  30.30% {
    transform: rotate(90deg) scale(.71691176470588, .74038461538461);
    opacity: .53;
  }

  33.33% {
    transform: rotate(90deg) scale(.78014705882353, .74038461538461);
    opacity: .59;
  }

  36.36% {
    transform: rotate(90deg) scale(.84338235294118, .74038461538461);
    opacity: .64;
  }

  39.39% {
    transform: rotate(90deg) scale(.90661764705882, .74038461538461);
    opacity: .69;
  }

  42.42% {
    transform: rotate(90deg) scale(.96985294117647, .74038461538461);
    opacity: .75;
  }

  45.45% {
    transform: rotate(90deg) scale(1.03308823529412, .74038461538461);
    opacity: .80;
  }

  48.48% {
    transform: rotate(90deg) scale(1.03308823529412, .74038461538461);
    opacity: .53;
  }

  51.52% {
    transform: rotate(90deg) scale(1.03308823529412, .74038461538461);
    opacity: .27;
  }

  54.55% {
    transform: rotate(90deg) scale(1.03308823529412, .74038461538461);
    opacity: 0;
  }

  100% {
    transform: rotate(90deg) scale(1.03308823529412, .74038461538461);
    opacity: 0;
  }
}