@keyframes move-dot1{0%{transform:translateX(-50%) translateY(-50%)}20%{transform:translateX(-50%) translateY(30%)}to{transform:translateX(-50%) translateY(30%)}}@keyframes move-dot2{0%{transform:translateX(-50%) translateY(-50%)}15%{transform:translateX(-50%) translateY(-10%)}30%{transform:translateX(-10%) translateY(-10%)}to{transform:translateX(-10%) translateY(-10%)}}@keyframes pop-out{0%{transform:translate(-50%,-50%) scale(0);opacity:.5}50%{transform:translate(-50%,-200%) scale(1);opacity:1}to{transform:translate(-50%,-200%) scale(1);opacity:0}}.animation-example{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:70vmin;width:70vmin;z-index:50}.animation-example .circle{display:flex;justify-content:center;align-items:center;color:#fff;font-size:.8rem;font-weight:700;text-align:center;position:relative}.animation-example>.item{position:absolute;top:0;left:50%;height:50%;width:50%;transform:translateX(-50%);transform-origin:50% 100%;pointer-events:none}.animation-example>.item:nth-child(2){transform:translateX(-50%) rotate(90deg)}.animation-example>.item:nth-child(3){transform:translateX(-50%) rotate(180deg)}.animation-example>.item:nth-child(4){transform:translateX(-50%) rotate(270deg)}.animation-example>.item>.line{height:100%;width:calc(50% + 1px);border-right:2px dashed #e51f24}.animation-example>.item>.dot{top:10%;height:100%;width:100%;animation:move-dot1 5.5s linear infinite}.animation-example>.item>.dot,.animation-example>.item>.dot:after{position:absolute;left:50%;transform:translateX(-50%) translateY(-50%)}.animation-example>.item>.dot:after{content:"";top:50%;height:5%;width:5%;background:#fff;border:2px solid #e51f24;border-radius:50%}.animation-example>.item>.circle{position:absolute;top:0;left:50%;transform:translateX(-50%);height:20%;width:20%;border-radius:50%;background:#e51f24}.animation-example>.item.-type2{top:0;left:0;transform:none;transform-origin:100% 100%}.animation-example>.item.-type2:nth-child(5){transform:scaleX(-100%)}.animation-example>.item.-type2:nth-child(6){transform:scaleX(-100%) scaleY(-100%)}.animation-example>.item.-type2:nth-child(7){transform:scaleY(-100%)}.animation-example>.item.-type2>.line{position:absolute;top:30%;left:calc(30% - 1px);width:70%;height:40%;border-right:none;border-left:2px dashed #e51f24;border-bottom:2px dashed #e51f24}.animation-example>.item.-type2>.dot{top:30%;left:30%;animation:move-dot2 4s linear infinite}.animation-example>.item.-type2>.circle{top:30%;left:30%;transform:translateX(-50%) translateY(-50%)}.animation-example>.item:first-of-type>.dot{animation-delay:0}.animation-example>.item:nth-of-type(7)>.dot{animation-delay:.5s}.animation-example>.item:nth-of-type(2)>.dot{animation-delay:1s}.animation-example>.item:nth-of-type(6)>.dot{animation-delay:1.5s}.animation-example>.item:nth-of-type(3)>.dot{animation-delay:2s}.animation-example>.item:nth-of-type(5)>.dot{animation-delay:2.5s}.animation-example>.item:nth-of-type(4)>.dot{animation-delay:3s}.animation-example>.item:nth-of-type(8)>.dot{animation-delay:3.5s}.animation-example>.center{height:50%;width:50%}.animation-example>.center,.animation-example>.center>.circle{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.animation-example>.center>.circle{border-radius:50%}.animation-example>.center>.circle:first-child{height:100%;width:100%;background:#fff;box-shadow:0 0 3vmin rgba(0,0,0,.1)}.animation-example>.center>.circle:nth-child(2){height:80%;width:80%;border:2px solid #e51f24}.animation-example>.center>.circle:nth-child(3){height:50%;width:50%;background:#e51f24;color:#fff;font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center;text-align:center}.animation-example .circle .emerge-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);height:10px;width:10px;background-color:#fff;border:2px solid #e51f24;border-radius:50%;animation:pop-out 1.5s ease-in-out infinite;z-index:2}.sub-branch{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;z-index:10}.sub-line{width:2px;height:20px;border-left:2px dashed #e51f24}.sub-circle{width:40px;height:40px;background-color:#e51f24;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}