.unlock-body-con{position:absolute;width:400px;height:100px;left:50%;top:50%;margin-left:-200px;margin-top:-200px;-webkit-transform-origin:center center;transform-origin:center center;z-index:10}.unlock-body-con .unlock-avator-con{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-box-sizing:border-box;box-sizing:border-box;width:100px;height:100px;border-radius:50%;overflow:hidden;border:2px solid #fff;cursor:pointer;-webkit-transition:all .5s;transition:all .5s;z-index:12;-webkit-box-shadow:0 0 10px 2px hsla(0,0%,100%,.3);box-shadow:0 0 10px 2px hsla(0,0%,100%,.3)}.unlock-body-con .unlock-avator-con .unlock-avator-img{width:100%;height:100%;display:block;z-index:7}.unlock-body-con .unlock-avator-con .unlock-avator-cover{width:100%;height:100%;background:rgba(0,0,0,.6);z-index:11600;position:absolute;left:0;top:0;opacity:0;-webkit-transition:opacity .2s;transition:opacity .2s;color:#fff}.unlock-body-con .unlock-avator-con .unlock-avator-cover span{display:block;margin:20px auto 5px;text-align:center}.unlock-body-con .unlock-avator-con .unlock-avator-cover p{text-align:center;font-size:16px;font-weight:500}.unlock-body-con .unlock-avator-con:hover .unlock-avator-cover{opacity:1;-webkit-transition:opacity .2s;transition:opacity .2s}.unlock-body-con .unlock-avator-under-back{position:absolute;left:50%;top:50%;-webkit-transform:translate(-45px,-50%);transform:translate(-45px,-50%);-webkit-box-sizing:border-box;box-sizing:border-box;width:100px;height:100px;border-radius:50%;background:#667aa6;-webkit-transition:all .5s;transition:all .5s;z-index:5}.unlock-body-con .unlock-input-con{position:absolute;height:70px;width:350px;top:15px;right:0}.unlock-body-con .unlock-input-con .unlock-input-overflow-con{position:absolute;width:100%;height:100%;left:0;top:0;overflow:hidden}.unlock-body-con .unlock-input-con .unlock-input-overflow-con .unlock-overflow-body{position:absolute;top:0;right:0;width:100%;height:100%;-webkit-transition:all .5s ease .5s;transition:all .5s ease .5s}.unlock-body-con .unlock-input-con .unlock-input-overflow-con .unlock-overflow-body .unlock-input{float:left;display:block;-webkit-box-sizing:content-box;box-sizing:content-box;height:22px;width:230px;font-size:18px;outline:none;padding:11px 0 11px 30px;border:2px solid #e2ddde;margin-top:10px}.unlock-body-con .unlock-input-con .unlock-input-overflow-con .unlock-overflow-body .unlock-btn{float:left;display:block;font-size:20px;padding:7px 30px;cursor:pointer;border-radius:0 25px 25px 0;border:2px solid #e2ddde;border-left:none;background:#2d8cf0;outline:none;-webkit-transition:all .2s;transition:all .2s;margin-top:10px}.unlock-body-con .unlock-input-con .unlock-input-overflow-con .unlock-overflow-body .unlock-btn:hover{background:#5cadff;-webkit-box-shadow:0 0 10px 3px hsla(0,0%,100%,.2);box-shadow:0 0 10px 3px hsla(0,0%,100%,.2)}.unlock-body-con .unlock-input-con .unlock-input-overflow-con .unlock-overflow-body .click-unlock-btn{background:#2b85e4!important}.unlock-body-con .unlock-locking-tip-con{width:100px;height:30px;text-align:center;position:absolute;left:50%;margin-left:-50px;bottom:-80px;color:#fff;font-size:18px}@-webkit-keyframes unlock-in{0%{-webkit-transform:scale(0);transform:scale(0)}80%{-webkit-transform:scale(0);transform:scale(0)}88%{-webkit-transform:scale(1.3);transform:scale(1.3)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes unlock-in{0%{-webkit-transform:scale(0);transform:scale(0)}80%{-webkit-transform:scale(0);transform:scale(0)}88%{-webkit-transform:scale(1.3);transform:scale(1.3)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes unlock-out{0%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(0);transform:scale(0)}}@keyframes unlock-out{0%{-webkit-transform:scale(1);transform:scale(1)}60%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(0);transform:scale(0)}}.show-unlock-enter-active{-webkit-animation:unlock-in 1.4s ease;animation:unlock-in 1.4s ease}.show-unlock-leave-to{opacity:0}.show-unlock-leave-active{-webkit-transition:opacity .2s;transition:opacity .2s}#body,.unlock-con{width:100%;height:100%}#body{background:radial-gradient(200% 100% at bottom center,#0070aa,#0b2570,#000035,#000);background:radial-gradient(220% 105% at top center,#000 10%,#000035 40%,#0b2570 65%,#0070aa);background-attachment:fixed;overflow:hidden}@-webkit-keyframes rotate{0%{-webkit-transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(0);transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(0)}to{-webkit-transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(-1turn);transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(-1turn)}}@keyframes rotate{0%{-webkit-transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(0);transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(0)}to{-webkit-transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(-1turn);transform:perspective(400px) rotate(20deg) rotateX(-40deg) rotateY(-1turn)}}.lock-background-stars{-webkit-transform:perspective(500px);transform:perspective(500px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:absolute;bottom:0;-webkit-perspective-origin:50% 100%;perspective-origin:50% 100%;left:50%;-webkit-animation:rotate 90s linear infinite;animation:rotate 90s linear infinite}.lock-background-star{width:2px;height:2px;background:#f7f7b6;position:absolute;top:0;left:0;-webkit-transform-origin:0 0 -300px;transform-origin:0 0 -300px;-webkit-transform:translateZ(-300px);transform:translateZ(-300px);-webkit-backface-visibility:hidden;backface-visibility:hidden}