.face-detection-wrapper{min-height:calc(100% - 60px);padding:30px;background:#f0f0f0;display:-webkit-box;display:-ms-flexbox;display:flex}.face-detection-wrapper .left-portrait{width:400px;height:580px;background:#fff}.face-detection-wrapper .left-portrait .video-box{position:relative;width:400px;height:580px;border-radius:10px}.face-detection-wrapper .left-portrait .scanner-video{width:400px;height:580px;-o-object-fit:cover;object-fit:cover}.face-detection-wrapper .left-portrait .qr-scanner{position:relative;height:580px;width:400px;margin:0 auto;background:url(../../assets/img/default_avatar3.24690a70.png) no-repeat;background-position-y:25%;background-position-x:center}.face-detection-wrapper .left-portrait .qr-scanner .box{width:266px;height:266px;position:absolute;top:67px;left:0;right:0;margin:0 auto;overflow:hidden;border:.1rem solid rgba(0,255,51,.2)}.face-detection-wrapper .left-portrait .qr-scanner .line{position:absolute;top:0;height:calc(100% - 2px);width:100%;background:-webkit-gradient(linear,left top,left bottom,color-stop(43%,rgba(0,255,51,0)),color-stop(211%,#0097ff));background:linear-gradient(180deg,rgba(0,255,51,0) 43%,#0097ff 211%);border-bottom:3px solid #0097ff;-webkit-transform:translateY(-100%);transform:translateY(-100%);-webkit-animation:radar-beam 2s infinite;animation:radar-beam 2s infinite;-webkit-animation-timing-function:cubic-bezier(.53,0,.43,.99);animation-timing-function:cubic-bezier(.53,0,.43,.99);-webkit-animation-delay:1.4s;animation-delay:1.4s}.face-detection-wrapper .left-portrait .qr-scanner .angle:after,.face-detection-wrapper .left-portrait .qr-scanner .angle:before,.face-detection-wrapper .left-portrait .qr-scanner .box:after,.face-detection-wrapper .left-portrait .qr-scanner .box:before{content:"";display:block;position:absolute;width:50px;height:50px;border:.2rem solid transparent}.face-detection-wrapper .left-portrait .qr-scanner .box:after,.face-detection-wrapper .left-portrait .qr-scanner .box:before{top:0;border-top-color:#0097ff}.face-detection-wrapper .left-portrait .qr-scanner .angle:after,.face-detection-wrapper .left-portrait .qr-scanner .angle:before{bottom:0;border-bottom-color:#0097ff}.face-detection-wrapper .left-portrait .qr-scanner .angle:before,.face-detection-wrapper .left-portrait .qr-scanner .box:before{left:0;border-left-color:#0097ff}.face-detection-wrapper .left-portrait .qr-scanner .angle:after,.face-detection-wrapper .left-portrait .qr-scanner .box:after{right:0;border-right-color:#0097ff}@-webkit-keyframes radar-beam{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes radar-beam{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.face-detection-wrapper .right-info{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:25px}.face-detection-wrapper .right-info .left-btn{right:100px;width:120px}.face-detection-wrapper .right-info .back-btn,.face-detection-wrapper .right-info .left-btn{position:absolute;top:-10px;height:50px;font-size:18px;color:#fff;line-height:50px;text-align:center;background:#0097ff;border-radius:10px;cursor:pointer}.face-detection-wrapper .right-info .back-btn{right:0;width:80px}.face-detection-wrapper .head-bar{font-size:22px;color:#333;padding-bottom:26px}.face-detection-wrapper .head-bar .sp-title{font-size:22px;color:#666}.face-detection-wrapper .head-bar i{font-size:20px;margin:0 14px}.face-detection-wrapper .success-btn{width:280px;height:80px;margin-top:36px;line-height:80px;color:#fff;font-size:26px;text-align:center;background:#0dc65b;border-radius:10px;cursor:pointer}.face-detection-wrapper .success-btn i{font-size:26px;vertical-align:-1px}.face-detection-wrapper .result-verification{margin:26px 0 35px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.face-detection-wrapper .result-verification .p-tip{margin-left:15px;color:#000;font-size:20px}.face-detection-wrapper .result-verification .p-tip i{font-size:22px}.face-detection-wrapper .result-verification .p-tip .sp-text{color:#0097ff;cursor:pointer;text-decoration:underline}.face-detection-wrapper .manual-btn .tip-btn{cursor:pointer}.face-detection-wrapper .manual-btn .error{margin-left:15px}.face-detection-wrapper .tip-btn{width:280px;height:80px;border-radius:10px;line-height:80px;font-size:26px;color:#fff;text-align:center;cursor:pointer}.face-detection-wrapper .tip-btn i{font-size:26px;vertical-align:-1px}.face-detection-wrapper .success{margin-left:15px;background:#0dc65b}.face-detection-wrapper .error{background:#d34b5e}.face-detection-wrapper .primary{background:#0097ff}.face-detection-wrapper .user-info{display:-webkit-box;display:-ms-flexbox;display:flex;padding-top:35px;border-top:1px solid #ccc}.face-detection-wrapper .user-info .user-avatar{width:280px;height:372px;background:#fff;border:1px solid #ccc;border-radius:10px;line-height:370px;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.face-detection-wrapper .user-info .user-avatar i{color:#e0e0e0;font-size:184px}.face-detection-wrapper .user-info .user-info-text{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:25px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:justify;align-content:space-between}.face-detection-wrapper .user-info .user-info-text .info-grid{width:100%;height:70px;padding:0 25px;line-height:68px;font-size:22px;color:#212121;background:#fff;border:1px solid #ccc;border-radius:10px;-webkit-box-sizing:border-box;box-sizing:border-box}.face-detection-wrapper .user-info .user-info-text .grid-7{width:calc(70% - 25px);margin-right:25px}.face-detection-wrapper .user-info .user-info-text .grid-3{width:30%}.face-detection-wrapper .user-info .user-info-text .title{color:#666}