/*체크아이콘*/
.animated-check {
    /* height: 1.2em;
    width: 1.2em*/
}

    .animated-check path {
        fill: none;
        stroke: #ffffff;
        stroke-width: 1.5px;
        stroke-dasharray: 23;
        stroke-dashoffset: 23;
        animation: draw 0.35s linear forwards;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.MyCheck {
    font-size: 1.85rem !important
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}
/*로딩*/
.container {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    filter: url('#goo');
    animation: rotate-move 2s ease-in-out infinite;
}

.dot {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.dot-3 {
    background-color: #f74d75;
    animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}

.dot-2 {
    background-color: #10beae;
    animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}

.dot-1 {
    background-color: #ffe386;
    animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}

@keyframes dot-3-move {
    20% {
        transform: scale(1)
    }

    45% {
        transform: translateY(-18px) scale(.35)
    }

    60% {
        transform: translateY(-90px) scale(.35)
    }

    80% {
        transform: translateY(-90px) scale(.35)
    }

    100% {
        transform: translateY(0px) scale(1)
    }
}

@keyframes dot-2-move {
    20% {
        transform: scale(1)
    }

    45% {
        transform: translate(-16px, 12px) scale(.35)
    }

    60% {
        transform: translate(-80px, 60px) scale(.35)
    }

    80% {
        transform: translate(-80px, 60px) scale(.35)
    }

    100% {
        transform: translateY(0px) scale(1)
    }
}

@keyframes dot-1-move {
    20% {
        transform: scale(1)
    }

    45% {
        transform: translate(16px, 12px) scale(.35)
    }

    60% {
        transform: translate(80px, 60px) scale(.35)
    }

    80% {
        transform: translate(80px, 60px) scale(.35)
    }

    100% {
        transform: translateY(0px) scale(1)
    }
}

@keyframes rotate-move {
    55% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    80% {
        transform: translate(-50%, -50%) rotate(360deg)
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes index {
    0%, 100% {
        z-index: 3
    }

    33.3% {
        z-index: 2
    }

    66.6% {
        z-index: 1
    }
}

/*마이 애니*/
@keyframes shake {
    0% {
        transform: translate(0, 0);
        transform-origin: bottom center;
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translate(-10px, 0);
    }

    20%, 40%, 60%, 80%, 100% {
        transform: translate(10px, 0);
    }
}

.shake-icon {
    animation: shake 0.8s ease-in-out infinite;
}


@keyframes pulse {
    from {
        transform: scale(0.75);
    }

    to {
        transform: scale(1.1);
    }
}

.pulse {
    animation: pulse 1s infinite ease-in-out alternate;
}
@keyframes toRight {
    5%, 15% {
        transform: scaleX(-1) translateX(-1px);
        opacity: 1;
    }

    0%, 10%, 25%, 100% {
        transform: scaleX(-1) translateX(0px);
        opacity: 0.8
    }
}

.toRight {
    animation: toRight 3s infinite ease-in-out alternate;
}
@keyframes toLeft {
    5%, 15% {
        transform: translateX(1px);
        opacity: 1;
    }

    0%, 10%, 25%, 100% {
        transform: translateX(0px);
        opacity: 0.8
    }
}

.toLeft {
    animation: toLeft 3s infinite ease-in-out alternate;
}

.swing {
    transform-origin: top center;
    animation: swing 2s ease infinite;
}

@keyframes swing {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.wobble {
    animation: wobble 2s ease infinite;
}

@keyframes wobble {
    0% {
        transform: translateX(0%);
    }

    15% {
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        transform: translateX(-5%) rotate(-1deg);
    }

    100% {
        transform: translateX(0%);
    }
}