html,body{overflow:hidden;width:100%;height:100%}html{font-family:ropa sans,sans-serif;font-size:16px;line-height:1.5}@media(max-width:640px){html{font-size:12px}}body{background-color:#3f51b5}.box{position:fixed;left:0;top:0;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;width:100%;height:100%;padding:0 10vw}@media(max-width:640px){.box{padding:0}}@media(orientation:portrait){.box{flex-direction:column;justify-content:center}}.logo{position:relative;flex-shrink:0;width:16rem;height:16rem;margin:4rem}@keyframes logo-back{0%{transform:rotate(0deg)}100%{transform:rotate(15deg)}}.logo-back{position:absolute;left:0;top:0;width:100%;height:100%;transform:rotate(15deg);animation:logo-back 2s cubic-bezier(.77,0,.175,1)}@keyframes logo-back-side{0%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}.logo-back-side{position:absolute;left:0;top:0;width:100%;height:100%}.logo-back-side:nth-child(1){transform:rotate(0deg)}.logo-back-side:nth-child(2){transform:rotate(90deg)}.logo-back-side:nth-child(3){transform:rotate(180deg)}.logo-back-side:nth-child(4){transform:rotate(270deg)}.logo-back-side::after{content:"";position:absolute;left:0;right:2px;top:0;border-top:2px solid rgba(255,255,255,.2);animation:logo-back-side 2s cubic-bezier(.77,0,.175,1)}@keyframes logo-text{0%{opacity:0}100%{opacity:1}}.logo-text{position:absolute;left:0;top:0;width:100%;height:100%;animation:logo-text 1s ease;animation-fill-mode:backwards;animation-delay:1s}.logo-text img{position:absolute;left:50%;top:50%;width:120%;transform:translate(-50%,-50%)}@keyframes nav{0%{opacity:0}100%{opacity:1}}.nav{margin-top:4rem;animation:nav 1s ease;animation-fill-mode:backwards;animation-delay:1s}.nav ul{display:flex;margin:0 -1rem;padding:0;list-style:none}.nav li{margin:0 1rem}.nav a{display:block;font-size:1.5rem;text-decoration:none;color:#fff}