.input-wrapper {
  position: relative;
}

@charset "UTF-8";
/**
 * 移动端应该需要rem
 * 到时候再看
 */
.captcha-wrapper__picture .red-point {
  position: absolute;
  color: #fff;
  background: #e02e24;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
}
.captcha-wrapper__picture .picture-img {
  position: relative;
}

.captcha-wrapper__slider .captcha-refresh {
  text-align: right;
}
.captcha-wrapper__slider .slider-img {
  position: relative;
}
.captcha-wrapper__slider .slider-img .slider-img-bg {
  width: 100%;
  height: 100%;
}
.captcha-wrapper__slider .slider-img .slider-item {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
}

.captcha-wrapper__slidermove .captcha-refresh {
  text-align: right;
}
.captcha-wrapper__slidermove .slidermove-img {
  position: relative;
}
.captcha-wrapper__slidermove .slidermove-img .slidermove-img-bg {
  width: 100%;
  height: 100%;
}

.captcha-wrapper__slidermove .slidermove-img .slidermove-img-block {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 51px;
}

.captcha-wrapper__slidermove .slidermove-img .slidermove-img-block .block-img {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}



.captcha-wrapper__smart {
  position: relative;
  height: 216px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.captcha-wrapper__smart .smart-place {
  align-items: center;
  justify-content: center;
}
.captcha-wrapper__smart .smart-img {
  width: 54px;
  height: 54px;
}

.captcha-wrapper__smart .smart-tip {
  height: 50px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8);
  line-height: 22px;
}

.captcha-wrapper__smart .smart-button {
  width: 250px;
  height: 45px;
}

.captcha-wrapper__rotateslider .captcha-refresh {
  text-align: right;
}

.captcha-wrapper__rotateslider .rotateslider-img {
  position: relative;
}
.captcha-wrapper__rotateslider .rotateslider-img .rotateslider-img-bg {
  width: 100%;
  height: 100%;
}

.captcha-wrapper__rotateslider .rotateslider-img .rotateslider-img-block {
  position: absolute;
  width: 102.2px;
  height: 102.2px;
  left: 50%;
  top: 50%;
  margin: -51.1px 0 0 -51.1px;
}
.captcha-wrapper__rotateslider .rotateslider-img .rotateslider-img-block .rotateslider-circle {
  left: 0;
  width: 100%;
}

.captcha-refresh img {
  width: 16px;
}

/**
 * 公用样式
 * 验证码图片大小固定
 * 主要控制 @msfe/captcha-prompt 中的样式(pc 和 mobile 各自写)
 * http://ui.corp.yiran.com/web/#/item/board/detail?pid=df114a0a-af67-4336-9bd9-2731517decd5&project_id=df114a0a-af67-4336-9bd9-2731517decd5&image_id=c919fac9-c913-431f-8ec4-0725d4a4e1c0&child=e916403a-7ac3-49bb-8e4a-33889789d17f
 */
 .captcha-wrapper .captcha-source {
  width: 272px;
  height: 130px;
  position: relative;
  overflow: hidden;
}

.captcha-wrapper .captcha-source img {
  width: 100%;
  height: 100%;
}

.captcha-wrapper .captcha-refresh {
  height: 32px;
  line-height: 32px;
}

.captcha-wrapper .captcha-refresh img {
  cursor: pointer;
}

.captcha-wrapper .picture-text {
  height: 21px;
}

.captcha-tips-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #F0F0F0;
  box-sizing: border-box;
}

.captcha-tips-wrapper--box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.captcha-tips-wrapper.captcha-tips-wrapper__loading .captcha-tips-wrapper__txt {
  display: block;
  top: 5px;
}

.captcha-tips-wrapper.captcha-tips-wrapper__success .captcha-tips-wrapper--box {
  white-space: nowrap;
}

.captcha-tips-wrapper.captcha-tips-wrapper__success .captcha-tips-wrapper__txt {
  margin-left: 5px;
}

.captcha-tips-wrapper.captcha-tips-wrapper__txtRefresh {
  height: 14px;
  top: 27px;
  font-size: 12px;
  color: #ff5454;
  background-color: transparent;
  text-align: left;
  display: block;
  line-height: 14px;
  margin-top: 4px;
}

.captcha-tips-wrapper.captcha-tips-wrapper__refresh {
  animation: mymove 1s infinite alternate;
  position: absolute;
  height: 28px;
  background-color: #FF5454;
  font-size: 12px;
  color: #fff;
  display: block;
  line-height: 28px;
  padding-left: 10px;
  top: unset;
}

.captcha-tips-wrapper__txt {
  font-size: 12px;
  color: #666;
  position: relative;
  top: -1px;
}


@keyframes mymove
{
  from {bottom: -28px;}
  to {bottom: 0px;}
}

.captcha-wrapper__gesture {
  margin-top: 10px;
}

.captcha-wrapper__gesture .gesture-text {
  margin-bottom: 12px;
  font-size: 14px;
  height: 14px;
  line-height: 14px;
  color: #000;
  opacity: .8;
}

.captcha-wrapper__gesture .captcha-refresh {
  height: 13px;
  line-height: 13px;
  margin-top: 11px;
}

.captcha-wrapper__picture .captcha-source {
  height: 136px;
}

.captcha-wrapper__picture .picture-text {
  max-width: 272px;
  margin: 8px 0 10px;
  font-size: 14px;
  line-height: 18px;
  height: auto;
}

.captcha-wrapper__picture .picture-text__blue {
  color: #2266AA;
}

.captcha-wrapper__picture .picture-text__red {
  color: #FF5454;
}

.captcha-wrapper__picture .picture-text__yellow {
  color: #FF7300;
}

.captcha-wrapper__picture .picture-text__green {
  color: #44BB00;
}

.captcha-wrapper__picture .picture-text__default {
  color: #333;
}

.captcha-wrapper__picture .captcha-refresh {
  height: 16px;
  line-height: 16px;
  margin-top: 8px;
}

.captcha-wrapper__slider {
  margin: 14px 0 10px;
}

.captcha-wrapper__slider .captcha-refresh {
  height: 36px;
  line-height: 36px;
}

.slide-handlebar {
  position: relative;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #999999;
  border-radius: 16px;
  background: #e8e8e8;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
}

.slide-handlebar .slide-button-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 16px;
}

.slide-handlebar .slide-button-wrapper.oops {
  background-color: rgba(224, 46, 36, 0.1);
  border: 1px solid rgba(224, 46, 36, 0.9);
  transition: padding 0.2s;
  transform: translateZ(0);
}

.slide-handlebar .slide-button-wrapper .slide-button {
  margin-top: -10px;
  width: 51px;
  height: 51px;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid #e8e8e8;
  z-index: 2;
  background-image: url(https://commimg.pddpic.com/mms_static/2019-05-22/9a574226-df81-47a4-82bf-142f8161ec8e.png);
  background-repeat: no-repeat;
  background-position: center center;
}

.slide-handlebar .slide-button-wrapper .slide-button.sliding {
  background-image: url(https://commimg.pddpic.com/mms_static/2019-05-22/945111b4-b6f3-4af7-a0b9-664c6d424a38.png);
}

.slide-handlebar .slide-button-wrapper .slide-button.disable {
  background-image: url(https://commimg.pddpic.com/mms_static/2019-05-22/186ffe17-8c73-475a-83e7-1ca898f8c3df.png);
  cursor: not-allowed;
}

.slide-handlebar .slide-bg {
  padding: 0 0.2rem 0 0.6rem;
  width: 100%;
  height: 0.45rem;
  user-select: none;
  z-index: 0;
}

.captcha-wrapper__slidermove {
  margin: 14px 0 10px;
}

.captcha-wrapper__slidermove .captcha-source {
  width: 100%;
  height: 136px;
}

.captcha-wrapper__slidermove .captcha-refresh {
  height: 36px;
  line-height: 36px;
}

.slidemove-handlebar {
  position: relative;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #999999;
  border-radius: 16px;
  background: #e8e8e8;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
}

.slidemove-handlebar .slidemove-button-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 16px;
}

.slidemove-handlebar .slidemove-button-wrapper.oops {
  background-color: rgba(224, 46, 36, 0.1);
  border: 1px solid rgba(224, 46, 36, 0.9);
  transition: padding 0.2s;
  transform: translateZ(0);
}

.slidemove-handlebar .slidemove-button-wrapper .slidemove-button {
  margin-top: -10px;
  width: 51px;
  height: 51px;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid #e8e8e8;
  z-index: 2;
  background-image: url(https://commimg.pddpic.com/mms_static/2019-05-22/9a574226-df81-47a4-82bf-142f8161ec8e.png);
  background-repeat: no-repeat;
  background-position: center center;
}

.slidemove-handlebar .slidemove-button-wrapper .slidemove-button.sliding {
  background-image: url(https://commimg.pddpic.com/mms_static/2019-05-22/945111b4-b6f3-4af7-a0b9-664c6d424a38.png);
}

.slidemove-handlebar .slidemove-button-wrapper .slidemove-button.disable {
  background-image: url(https://commimg.pddpic.com/mms_static/2019-05-22/186ffe17-8c73-475a-83e7-1ca898f8c3df.png);
  cursor: not-allowed;
}

.slidemove-handlebar .slidemove-bg {
  padding: 0 0.2rem 0 0.6rem;
  width: 100%;
  height: 0.45rem;
  user-select: none;
  z-index: 0;
}

.captcha-input-desktop input {
  text-align: center !important;
}

.captcha-wrapper__text {
  margin: 14px 0 10px;
}

.captcha-desktop-input--wrapper {
  height: 28px;
}

.captcha-desktop-input--wrapper .captcha-desktop-input {
  font-family: inherit;
  line-height: 1.15;
  overflow: visible;
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding: 0 8px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #dadada;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  transition: border 0.3s;
  outline: 0;
  margin: 0;
  display: table-cell;
  text-align: center;
}

.captcha-desktop-input--wrapper .captcha-desktop-input:focus {
  border-color: #1199ee !important;
}

.captcha-desktop-input--wrapper .captcha-desktop-input:hover {
  border-color: #adadad;
}

.captcha-desktop-input--wrapper .captcha-desktop-input__error {
  border: 1px #ff5454 solid;
}

.captcha-desktop-input--wrapper .captcha-desktop-input__error:focus {
  border-color: #ff5454 !important;
}

.captcha-desktop-input--wrapper .captcha-desktop-input__error:hover {
  border-color: #ff5454;
}

.captcha-input-desktop input {
  text-align: center !important;
}

.captcha-wrapper__sms {
  font-size: 14px;
  display: inline-block;
  color: rgba(0, 0, 0, 0.8);
  line-height: 21px;
}

.sms-text-desc {
  white-space: nowrap;
}

.captcha-desktop-sms-input--wrapper {
  margin-top: 12px;
  width: 330px;
}

.captcha-desktop-sms-input__button {
  margin-top: 20px;
  text-align: right;
}

.captcha-wrapper__sms .captcha-source {
  height: 60px;
}

.captcha-wrapper__smart {
  display: flex;
  height: 185px;
  justify-content: center;
  align-content: center;
  margin: 8px -8px 12px -8px;
}

.captcha-wrapper__smart .smart-place {
  width: 288px;
}
.captcha-wrapper__smart .smart-icon {
  text-align: center;
  height: 54px;
  margin-bottom: 16px;
}
.captcha-wrapper__smart .smart-tip {
  font-family: PingFangSC-Regular, Arial, sans-serif;
  font-size: 17px;
  color: #151516;
  text-align: center;
  line-height: 25px;
  font-weight: 400;
}
.captcha-wrapper__smart .smart-button {
  margin-top: 20px;
}

.captcha-wrapper__rotateslider {
  margin: -8px 0 10px;
}

.captcha-wrapper__rotateslider .captcha-refresh {
  height: 36px;
  line-height: 36px;
}

.captcha-wrapper__rotateslider .rotateslider-title {
  font-size: 16px;
  color: #333333;
  line-height: 16px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 16px;
}

.rotateslide-handlebar {
  position: relative;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #999999;
  border-radius: 16px;
  background: #e8e8e8;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.15);
}

.rotateslide-handlebar .slide-button-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 16px;
}

.rotateslide-handlebar .slide-button-wrapper.oops {
  background-color: rgba(224, 46, 36, 0.1);
  border: 1px solid rgba(224, 46, 36, 0.9);
  transition: padding 0.2s;
  transform: translateZ(0);
}

.rotateslide-handlebar .slide-button-wrapper .slide-button {
  margin-top: -10px;
  width: 51px;
  height: 51px;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid #e8e8e8;
  z-index: 2;
  background-image: url(https://commimg.pddpic.com/mms_static/2019-05-22/9a574226-df81-47a4-82bf-142f8161ec8e.png);
  background-repeat: no-repeat;
  background-position: center center;
}

.rotateslide-handlebar .slide-button-wrapper .slide-button.sliding {
  background-image: url(https://commimg.pddpic.com/mms_static/2019-05-22/945111b4-b6f3-4af7-a0b9-664c6d424a38.png);
}

.rotateslide-handlebar .slide-button-wrapper .slide-button.disable {
  background-image: url(https://commimg.pddpic.com/mms_static/2019-05-22/186ffe17-8c73-475a-83e7-1ca898f8c3df.png);
}

.rotateslide-handlebar .slide-button-wrapper {
  z-index: 2;
}

.captcha-wrapper__rotateslider .rotateslide-handlebar .slide-ani {
  position: absolute;
  left: 14px;
  top: 1px;
  width: 45px;
  height: 32px;
  z-index: 1;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABWBAMAAAD27E+nAAAAMFBMVEUGrAAgsQIitAwesw8ftQ4itREjtBIktRIjtREjtRAitA8jtREitQ8jtREktRAjtRJZ+0wtAAAAEHRSTlMBBxYMERsnNzMvICsjOz9DfIkOoAAAAhVJREFUWMOl2DFOAkEUBmC4wRAvgMYDbAIHWIkHICQ2HoBGChOIG6MFlVBSSrQysSFWFjQ0VFQ0QkFMXII9LAESIBB4voFdk5UV4/tf/+dn+YqZeSGecIQnxhM/5TniOeOpVCovzWYznU5f1GoP1czTSShoIjp9wFkdTnjh8024sQ2Xy+X74uNhQFhFdNhL63DqO5x2m3W4WHxVO+FwWGfdn33s/9kNznrNxULhzghujv1oft6EM75my7ox9zUn9jVblnVt/NG8+81lt5nnVgU2x/3fzLOV8oftnD/sOfu/2efs/mE6bNf/4exv7tj2uxI5b5u7WZmzbuYxZc7czNUtoXOHs45jCp252XHaQmdu7joDJXXmZicvddYf3Rc7c3gYlTpzmD7Fztw8lTs7RIbYeTikvNSZ0zSWOxPN5c5DIlPuTFSSOxON5M5EC8CZZoAzkZI7EyXFzjwlwJl6gDNNAGcaA860AJxpiTjPEOcV4rxGnNeIMyHOhDgT4rxGnFeI8wxxXiLOC8R5jDhPEOce4lxCnJOIswKcZ8D5zMyA8wg5n0vI+WwC5/McuYeNkXvYJXIPM4B72BS5b78h9+0ocN/uc07snAfeVQMFvKvaHBM7mxyTOreA97NtAu/nrE6JnN1nv9S5rkNC5xywJ/lQ4j2Jt96ROHuLJZHzlSHfh3nLNIGzu8bbbY785uxSVTOp3QXiFzWUEaEvh6MKAAAAAElFTkSuQmCC)
    no-repeat;
  background-size: contain;
  opacity: 0;
  -webkit-animation: slideAni 1.5s ease 0.4s infinite;
  animation: slideAni 1.5s ease 0.4s infinite;
}

@keyframes slideAni {
  0% {
    opacity: 0;
  }
  10%,
  60% {
    opacity: 1;
  }
  100% {
    left: 227px;
    opacity: 0;
  }
}