@charset "UTF-8";

/* 다이어그램 */
@keyframes animateDown01 { 
0% { opacity: 1; } 
7% { opacity: 1; } 
14% { opacity: 1; } 
21% { opacity: 1; } 
28% { opacity: 1; } 
35% { opacity: 1; } 
42% { opacity: 1; } 
49% { opacity: 1; } 
56% { opacity: 1; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown02 { 
0% { opacity: 0; } 
7% { opacity: 1; } 
14% { opacity: 1; } 
21% { opacity: 1; } 
28% { opacity: 1; } 
35% { opacity: 1; } 
42% { opacity: 1; } 
49% { opacity: 1; } 
56% { opacity: 1; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown03 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 1; } 
21% { opacity: 1; } 
28% { opacity: 1; } 
35% { opacity: 1; } 
42% { opacity: 1; } 
49% { opacity: 1; } 
56% { opacity: 1; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown04 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 1; } 
28% { opacity: 1; } 
35% { opacity: 1; } 
42% { opacity: 1; } 
49% { opacity: 1; } 
56% { opacity: 1; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown05 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 1; } 
35% { opacity: 1; } 
42% { opacity: 1; } 
49% { opacity: 1; } 
56% { opacity: 1; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown06 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 0; } 
35% { opacity: 1; } 
42% { opacity: 1; } 
49% { opacity: 1; } 
56% { opacity: 1; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown07 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 0; } 
35% { opacity: 0; } 
42% { opacity: 1; } 
49% { opacity: 1; } 
56% { opacity: 1; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown08 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 0; } 
35% { opacity: 0; } 
42% { opacity: 0; } 
49% { opacity: 1; } 
56% { opacity: 1; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown09 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 0; } 
35% { opacity: 0; } 
42% { opacity: 0; } 
49% { opacity: 0; } 
56% { opacity: 1; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown10 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 0; } 
35% { opacity: 0; } 
42% { opacity: 0; } 
49% { opacity: 0; } 
56% { opacity: 0; } 
63% { opacity: 1; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown11 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 0; } 
35% { opacity: 0; } 
42% { opacity: 0; } 
49% { opacity: 0; } 
56% { opacity: 0; } 
63% { opacity: 0; } 
70% { opacity: 1; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown12 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 0; } 
35% { opacity: 0; } 
42% { opacity: 0; } 
49% { opacity: 0; } 
56% { opacity: 0; } 
63% { opacity: 0; } 
70% { opacity: 0; } 
77% { opacity: 1; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown13 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 0; } 
35% { opacity: 0; } 
42% { opacity: 0; } 
49% { opacity: 0; } 
56% { opacity: 0; } 
63% { opacity: 0; } 
70% { opacity: 0; } 
77% { opacity: 0; } 
84% { opacity: 1; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 
@keyframes animateDown14 { 
0% { opacity: 0; } 
7% { opacity: 0; } 
14% { opacity: 0; } 
21% { opacity: 0; } 
28% { opacity: 0; } 
35% { opacity: 0; } 
42% { opacity: 0; } 
49% { opacity: 0; } 
56% { opacity: 0; } 
63% { opacity: 0; } 
70% { opacity: 0; } 
77% { opacity: 0; } 
84% { opacity: 0; } 
91% { opacity: 1; } 
100% { opacity: 1; } 
} 

/* 코드 */
@keyframes codeani01{
    0%{opacity: 1;}
    16%{opacity: 1;}
    33%{opacity: 1;}
    49%{opacity: 1;}
    65%{opacity: 1;}
    81%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes codeani02{
    0%{opacity: 0;}
    16%{opacity: 1;}
    33%{opacity: 1;}
    49%{opacity: 1;}
    65%{opacity: 1;}
    81%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes codeani03{
    0%{opacity: 0;}
    16%{opacity: 0;}
    33%{opacity: 1;}
    49%{opacity: 1;}
    65%{opacity: 1;}
    81%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes codeani04{
    0%{opacity: 0;}
    16%{opacity: 0;}
    33%{opacity: 0;}
    49%{opacity: 1;}
    65%{opacity: 1;}
    81%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes codeani05{
    0%{opacity: 0;}
    16%{opacity: 0;}
    33%{opacity: 0;}
    49%{opacity: 0;}
    65%{opacity: 1;}
    81%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes codeani06{
    0%{opacity: 0;}
    16%{opacity: 0;}
    33%{opacity: 0;}
    49%{opacity: 0;}
    65%{opacity: 0;}
    81%{opacity: 1;}
    100%{opacity: 1;}
}

/* 아이콘 */
@keyframes roboani01{
    0%{transform: translateY(0);}
    20%{transform: translateY(0);}
    40%{transform: translateY(0);}
    60%{transform: translateY(0);}
    80%{transform: translateY(0);}
    87%{transform: translateY(-20px);}
    100%{transform: translateY(0px);}
}
@keyframes roboani02{
    0%{opacity: 0;}
    20%{opacity: 1;}
    40%{opacity: 1;}
    60%{opacity: 1;}
    80%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes roboani03{
    0%{opacity: 0;}
    20%{opacity: 0;}
    40%{opacity: 1;}
    60%{opacity: 1;}
    80%{opacity: 1;}
    100%{opacity: 1;}
}
@keyframes roboani04{
    0%{opacity: 0;}
    20%{opacity: 0;}
    40%{opacity: 0;}
    60%{opacity: 1;}
    80%{opacity: 1;}
    100%{opacity: 1;}
}