.scan,body.scan{align-items:center;display:flex}.scan{flex-direction:column;position:relative}.scan .qrcode{background:url(/images/scan/QR_Code01.png);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/scan/QR_Code02.png);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/scan/border.png);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:black;filter:drop-shadow(0 0 20px black) drop-shadow(0 0 60px black);font-size:2em;letter-spacing:2px;margin-top:20px;text-transform:uppercase}