.captcha-wrapper {position:fixed;z-index:50;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;}
.captcha-wrapper .captcha-box {background-color:#fff;padding:.5rem;transition:.3s;}
.captcha-box .captcha-canvas-box {width:100%;height:155px;background-color:#fff;position:relative;overflow:hidden;}
.captcha-box .captcha-canvas-box canvas.captcha-bg-img {width:100%;height:100%;}
.captcha-box .captcha-canvas-box canvas.captcha-bg-slider {width:22.14%;height:100%;}
.captcha-box .captcha-refresh {position:absolute;right:.5rem;top:.5rem;color:#eee;text-shadow:0 0 .5rem #000;cursor:pointer;transition:.3s;z-index:1;}
.captcha-box .captcha-canvas-box .captcha-bg-slider {position: absolute;left: 0;top: 0;}
.captcha-box .captcha-slider {margin-top:.5rem;height:2.5rem;position:relative;}
.captcha-box .captcha-slide-area {position: absolute;left: 0;top: 0;width:100%;height: 100%;}
.captcha-box .captcha-slider-text 
{
    position: absolute;
    left: 0;top: 0;width: 100%;height: 100%;line-height: 2.5rem;
    text-align: center;color: #444;
    background-color:#ddd;cursor: default;
    user-select:none;border-radius:.5rem;
}
.captcha-box .captcha-slider-icon {
    position: absolute;
    left: 0;top: 0;
    height: 100%;
    text-align: center;
    border-radius:.5rem;
    background-color:#fff;
    width: 2.5rem;line-height: 2.5rem;font-size:1.5rem;
    box-shadow:0 0 .5rem rgba(0,0,0,.5);
    cursor: pointer;user-select:none;
}

.captcha-box .captcha-slider-icon:hover {color: #fff;background: #978778;}
.captcha-box .captcha-slider-icon.moving {color: #fff;background: #978778;}
.captcha-wrapper .captcha-suc 
{
    position:absolute;z-index:2;display:none;
    left:0;top:0;width:100%;height:100%;
    background-color:#fff;color:#0a0;flex-direction:column;
    align-items:center;justify-content:center;
}
.captcha-wrapper .captcha-suc i {font-size:2rem;margin-bottom:.5rem;}