.ani[class*="fade"] { --opacity: 0; }
.ani[class*="show"] { --opacity: 1; }
/* s : spped / d : delay / t : translate */
/* spped */
.ani[class*="-s0"] { --s-level: 0; }
.ani[class*="-s05"] { --s-level: 0.5; }
.ani[class*="-s1"] { --s-level: 1; }
.ani[class*="-s2"] { --s-level: 2; }
.ani[class*="-s3"] { --s-level: 3; }
.ani[class*="-s4"] { --s-level: 4; }
.ani[class*="-s5"] { --s-level: 5; }
/* delay */
.ani[class*="-d0"] { --d-level: 0; }
.ani[class*="-d05"] { --d-level: 0.5; }
.ani[class*="-d1"] { --d-level: 1; }
.ani[class*="-d2"] { --d-level: 1.25; }
.ani[class*="-d3"] { --d-level: 1.5; }
.ani[class*="-d4"] { --d-level: 1.75; }
.ani[class*="-d5"] { --d-level: 2; }
.ani[class*="-d6"] { --d-level: 2.25; }
.ani[class*="-d7"] { --d-level: 2.5; }
.ani[class*="-d8"] { --d-level: 2.75; }
.ani[class*="-d9"] { --d-level: 3; /* translate */}
.ani[class*="-d12"] { --d-level: 3.75; }
.ani[class*="-d24"] { --d-level: 4.75; }
.ani[class*="-d34"] { --d-level: 5.75; }
.ani[class*="-d44"] { --d-level: 6.75; }
.ani[class*="-t0"] { --t-level: 0; }
.ani[class*="-t05"] { --t-level: 0.5; }
.ani[class*="-t1"] { --t-level: 1; }
.ani[class*="-t2"] { --t-level: 2; }
.ani[class*="-t3"] { --t-level: 3; }
.ani[class*="-t4"] { --t-level: 4; }
.ani[class*="-t5"] { --t-level: 5; }
.ani[class*="-tx2"] { --t-level: 20; }
.ani[class*="-tx3"] { --t-level: 30; }
/* timing-function */
.ani[class*="-ease"] { --timing-function: ease; }
.ani[class*="-ease-in"] { --timing-function: ease-in; }
.ani[class*="-ease-out"] { --timing-function: ease-out; }
.ani[class*="-ease-in-out"] { --timing-function: ease-in-out; }
.ani[class*="-linear"] { --timing-function: linear; }
/* extension */
/* 아래 -> 위 */
.ani[class*="-upper"] { --translateX: 0; --translateY: var(--translate); }
/* 위 -> 아래 */
.ani[class*="-under"] { --translateX: 0; --translateY: calc(var(--translate) * -1); }
/* 좌측 -> 우측 */
.ani[class*="-left"] { --translateX: calc(var(--translate) * -1); --translateY: 0; }
/* 우측 -> 좌측 */
.ani[class*="-right"] { --translateX: var(--translate); --translateY: 0; }
/* 크기 */
/* 증가 */
.ani[class*="-scale"][class*="-up"] { --scale: 0.5; }
/* 감소 */
.ani[class*="-scale"][class*="-down"] { --scale: 1.5; }
/* animation */
.ani.custom { --opacity-0: 0; --opacity-100: 1; --transform-0: translate(0, 0); --transform-100: translate(0, 0); --opacity: 0; animation: ani-custom var(--duration) var(--timing-function) var(--delay) forwards; /* active */}
.ani.active { opacity: 1; }
.ani.active[class*="fade"] { --translate: 0; --scale: 1; --opacity: 1; filter: blur(0px); }
.ani.active[class*="show"] { --translate: 0; --scale: 1; }

/* 애니메이션 */
.ani { --opacity: 0; /* 등급 (해당 숫자만큼 곱함) */
    --s-level: 4; --d-level: 0; --t-level: 4; /* 위치값 */
    --value: 25px; /* 트랜지션 기본 속도 */
    --duration-second: 0.25s; --delay-second: 0.25s; /* 트랜지션 계산 */
    --duration: calc(var(--duration-second) * var(--s-level)); --delay: 0; /* 트랜지션 프로퍼티 */
    --property: opacity, transform, scale, translate, filter; /* 트랜지션 효과 */
    --timing-function: ease; /* transform */
    --translate: calc(var(--value) * var(--t-level)); --scale: 1; /* default */
    opacity: var(--opacity); transition-duration: var(--duration); transition-delay: var(--delay); transition-property: var(--property); transition-timing-function: var(--timing-function); translate: var(--translateX) var(--translateY); scale: var(--scale); }
.ani.active { --delay: calc(var(--delay-second) * var(--d-level)); }