#codebk {
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
}

#codediv{
  width: 278px;
  height: 270px;
  margin-left: -139px;
  margin-top: -143px;
  top:50%;
  left:50%;
  position: absolute;
  background-color: white;
  padding-top: 9px;
}

#captcha {
  margin: 0 3.24%;
  width: 93.53%;
  height: 158.86px;

  /*--width: 400px;*/
  /*--height: 260px;*/
  --width: 260px;
  --height: 159px;
  --puzzle-width: 50px;
  --puzzle-height: 50px;
  --offset-left: var(--width) * -0.3;
  --moved: 0px;
  /*margin: auto;*/

  display: block;
  /*width: var(--width);*/
  /*height: var(--height);*/
  border-radius: 4px;
  /*background-image: url('/pages/vcode/vcode001.png');*/
  background-size: cover;
  background-position: center;
  position: relative;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, .3);
}

#captcha::before, #captcha::after {
  position: absolute;
  content: '';
  display: block;
  width: inherit;
  height: inherit;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  
  clip-path: inset(
    calc( (var(--height) - var(--puzzle-height)) / 2 ) /* 90px */
    var(--puzzle-width) /* 90px */
    calc( (var(--height) - var(--puzzle-height)) / 2 ) /* 90px */
    calc( var(--width) - var(--puzzle-width) * 2 ) /* 230px */
  );
  /*-webkit-clip-path: inset(*/
  /*  calc( (var(--height) - var(--puzzle-height)) / 2 ) !* 90px *!*/
  /*  var(--puzzle-width) !* 90px *!*/
  /*  calc( (var(--height) - var(--puzzle-height)) / 2 ) !* 90px *!*/
  /*  calc( var(--width) - var(--puzzle-width) * 2 ) !* 230px *!*/
  /*);*/
  /*-webkit-clip-path: inset(*/
  /*  calc( (var(--height) - var(--puzzle-height)) / 2 ) !* 90px *!*/
  /*  30px*/
  /*  calc( (var(--height) - var(--puzzle-height)) / 2 ) !* 90px *!*/
  /*  calc( var(--width) - var(--puzzle-width) * 2 ) !* 230px *!*/
  /*);*/
  -webkit-clip-path: polygon(80% 30%, 95% 50%, 80% 70%, 65% 50%);
  /*-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);*/

}

#captcha::after {
  transform: translatex(
    /*clamp(*/
    /*  calc( var(--width) * -0.7 ),*/
    /*  calc( (var(--width) * -0.7) + var(--moved) ),*/
    /*  calc( var(--puzzle-width) )*/
    /*)*/
    clamp(
      calc( var(--width) * -1 + 110px ),
      calc( (var(--width) * -1 + 110px) + var(--moved) ),
      calc( var(--puzzle-width) )
    )
  );
  transition: .25s all ease-in-out;
}

#captcha:active::after {
  transition: none;
}

#captcha::before {
  background-color: rgba(0, 0, 0, .6);
  background-blend-mode: multiply;
}

#handle {
  /*width: calc( var(--width) + var(--puzzle-width) * 2 );*/
  width: 258px;
  /*height: 30px;*/
  height: 30px;


  /*margin: 5.39% 3.24%;*/
  
  border-radius: 18px;
  background-color: #eee;
  position: absolute;
  bottom: -50px;
  /*left: calc( var(--puzzle-width) * 2 * -1 );*/
  box-shadow: inset 0px 0px 12px rgba(0, 0, 0, .2);
  border: 0.5px solid #ccc;
}

#ctl {
  display: block;
  /*width: var(--puzzle-width);*/
  width: 55px;
  /*height: inherit;*/
  height: 28px;
  border-radius: inherit;
  background-color: #fff;
  /*background-image: url('/pages/vcode/sprite.1.2.6.png');*/
  /*background-position-x: 0px;*/
  /*background-position-y: 10.8642%;*/
  /*background-repeat: no-repeat;*/
  /*background-size: 393.939%;*/
  box-shadow: inset 0px 0px 6px rgba(0, 0, 0, .25), 0px 2px 4px rgba(0, 0, 0, .3);
  position: absolute;
  cursor: move;
  transform: translatex(
    clamp(
      0px,
      var(--moved),
      calc( var(--width) + var(--puzzle-width) )
    )
  );
  
  transition: .25s all ease-in-out;
}

#captcha:active #ctl {
  transition: none;
  --moved: inherit;
}

#captcha.passed::before,
#captcha.passed::after,
#captcha.passed #handle {
  opacity: 0;
}