*{margin:0;padding:0;box-sizing:border-box}html{width:100%;height:100%}body{background:#fff}.transform-area{overflow:hidden!important;display:flex;width:100%;min-height:100vh;align-items:center;justify-content:center;background:linear-gradient(to top right,#8e1f54,#2a70ac)}.transform-area .transform-svg{position:relative;width:222px;height:60px}.transform-area .transform-svg .twotip{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;transform:rotateY(-180deg);opacity:0}.transform-area .transform-svg .ub{display:flex;align-items:center;justify-content:space-between;width:222px;height:60px}.transform-area .transform-svg .ub .ub-1{width:52px}.transform-area .transform-svg .ub .ub-2{width:156px;height:32px;overflow:hidden;position:relative;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.transform-area .transform-svg .ub .ub-2 img{position:absolute;top:0;right:0;bottom:0;margin:auto}.transform-area_active{animation:inFade 1s forwards;transition:opacity 1s ease;animation-delay:2s}.transform-area_active .transform-svg{animation:toTop 1s forwards;animation-delay:2s}.transform-area_active .transform-svg .twotip{animation:logoTo .4s forwards;animation-delay:1s}.transform-area_active .transform-svg .ub .ub-1 .ub-1-wrapp{animation:ub1 1s forwards}.transform-area_active .transform-svg .ub .ub-1 .ub-1-wrapp img{animation:logoFrom .4s forwards;animation-delay:1s}.transform-area_active .transform-svg .ub .ub-2{animation:ub2 1s forwards;animation-delay:90ms}.transform-area_active .transform-svg .ub .ub-2 img{animation:ub2Img 1s forwards}@keyframes inFade{to{visibility:hidden;opacity:0;z-index:-100}}@keyframes toTop{to{transform:translateY(-200%);opacity:0}}@keyframes ub1{to{transform:translateX(85px)}}@keyframes ub2{to{width:90px}}@keyframes ub2Img{to{transform:translateX(-90px)}}@keyframes logoFrom{to{transform:rotateY(-180deg);opacity:0}}@keyframes logoTo{to{transform:rotateY(0deg);z-index:10;opacity:1}}