*{box-sizing:border-box;font-family:consolas;margin:0;padding:0}body{background:#f8f8f8;justify-content:center;min-height:100vh}.scan,body.scan{align-items:center;display:flex}.scan{flex-direction:column;position:relative}.scan .qrcode{background:url(/images/QR_Code01.png?dca1d8a3939dc88eb3cd6117ac0beeea);background-size:400px;height:400px;position:relative;width:400px}.scan .qrcode:before{-webkit-animation:animate 4s ease-in-out infinite;animation:animate 4s ease-in-out infinite;background:url(/images/QR_Code02.png?e6d7e7e17ef605c594045b125d891f0d);background-size:400px;content:"";height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}@-webkit-keyframes animate{0%,to{height:20px}50%{height:calc(100% - 20px)}}@keyframes animate{0%,to{height:20px}50%{height:calc(100% - 20px)}}.scan .qrcode:after{-webkit-animation:animate_line 4s ease-in-out infinite;animation:animate_line 4s ease-in-out infinite;background:#35fd5c;content:"";filter:drop-shadow(0 0 20px #35fd5c) drop-shadow(0 0 60px #35fd5c);height:2px;inset:20px;position:absolute;width:calc(100% - 40px)}@-webkit-keyframes animate_line{0%,to{top:20px}50%{top:calc(100% - 20px)}}@keyframes animate_line{0%,to{top:20px}50%{top:calc(100% - 20px)}}.border{-webkit-animation:animate_text .5s linear infinite;animation:animate_text .5s linear infinite;background:url(/images/border.png?4cc6dfdd18c8c16bfba4dd88038aa533);background-repeat:no-repeat;background-size:400px;inset:0;position:absolute}@-webkit-keyframes animate_text{0%,to{opacity:0}50%{opacity:1}}@keyframes animate_text{0%,to{opacity:0}50%{opacity:1}}.scan h3{-webkit-animation:animate_text .5s steps(1) infinite;animation:animate_text .5s steps(1) infinite;color:#fff;filter:drop-shadow(0 0 20px #fff) drop-shadow(0 0 60px #fff);font-size:2em;letter-spacing:2px;margin-top:20px;text-transform:uppercase}