/*
*Description:   Plugin CSS
*Author:    toyean|捷闪站长网
*Version:   1.1(2020-11-30)
*/
body { background:#1c202c; }
@font-face {
    font-family: 'iconfont';
    src: url('fonts/iconfont.eot');
    src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/iconfont.woff2') format('woff2'),
    url('fonts/iconfont.woff') format('woff'),
    url('fonts/iconfont.ttf') format('truetype'),
    url('fonts/iconfont.svg#iconfont') format('svg');
    font-weight:normal;
    font-style:normal;
}
.lock { margin:auto; background:0 0; }
.patt-holder { -ms-touch-action:none; }
.patt-wrap { margin:auto; cursor:pointer; overflow:hidden; position:relative; }
.patt-wrap li, .patt-wrap ul{ margin:0; padding:0; list-style:none; }
.patt-wrap li { transition:all .1s ease-in-out 0s; }
.patt-circ { float:left; border:3px solid #353f58; box-sizing:border-box; position:relative; -moz-box-sizing:border-box; }
.patt-circ.hovered { border:3px solid #090; border-color:#ddd; background:rgba(255, 255, 255, .2); }
.patt-error .patt-circ.hovered { border:3px solid #ba1b26; border-color:rgba(243, 66, 53, .8); background:rgba(243, 66, 53, .4); }
.patt-error .patt-lines { background:rgba(243, 66, 53, .5); }
.patt-success .patt-circ.hovered { background:rgba(75, 174, 79, .4); border-color:rgba(75, 174, 79, .8); }
.patt-success .patt-lines { background:rgba(75, 174, 79, .5); }
.patt-hidden .patt-circ.hovered { border:0; }
.patt-dots, .patt-lines { height:10px; border-radius:5px; position:absolute; transition:background .1s ease-in-out 0s; }
.patt-dots { width:10px; margin-top:-5px; margin-left:-5px; background:rgba(255, 255, 255, .8); top:50%; left:50%; }
.patt-circ:nth-child(1),.patt-circ:nth-child(2),.patt-circ:nth-child(3) { -webkit-animation:fadeInUp .4s; animation:fadeInUp .4s; }
.patt-circ:nth-child(4),.patt-circ:nth-child(5),.patt-circ:nth-child(6) { -webkit-animation:fadeInUp .6s; animation:fadeInUp .6s; }
.patt-circ:nth-child(7),.patt-circ:nth-child(8),.patt-circ:nth-child(9) { -webkit-animation:fadeInUp .8s; animation:fadeInUp .8s; }
.patt-lines { background:rgba(255, 255, 255, .4); transform-origin:5px 5px; -ms-transform-origin:5px 5px; -webkit-transform-origin:5px 5px; }
.patt-hidden .patt-lines { display:none; }
.lock-wrap { min-width:310px; margin:auto; border:1px solid #353f58; border-radius:5px; background:#212737; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:10; }
.lock-wrap .lock-title { margin-top:30px; font-size:16px; color:#5b6580; text-align:center; text-shadow:0 1px 1px rgba(0, 0, 0, .5); line-height:32px; }
.lock-wrap .lock-title:before { content:"\e666"; font-size:24px; color:#353f58; font-family:iconfont; display:block; }
.lock-wrap .lock-success { color:#4bae4f; }
.lock-wrap .lock-failure { color:#f34235; }
.ui-info { margin:0 0 20px; font-size:16px; color:#999; text-align:center; }
.lock-logo { width:158px; }
canvas { display:block; }
.waves { position:absolute; left:0; top:0; right:0; bottom:0; }
.waves:before { content:""; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; }