@keyframes opacity_animation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes graph {
    0% { width: 0; }
    100% { width: 210px; }
}
@keyframes minute-hand {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(197deg); }
}

#graph_right{
    position: absolute;
    bottom: 46px;
    left: 334px;
    background: url("/english/images/recruit/special/graph_right.png") no-repeat 0% 100%;
    height: 296px;
    width:0px;
    z-index:0;
}
#graph_left{
    position: absolute;
    bottom: 46px;
    right: 330px;
    background: url("/english/images/recruit/special/graph_left.png") no-repeat 0% 0%;
    height: 296px;
    width:0px;
    z-index:0;
}
#howmany {
    opacity: 0;
}
.css-animation-10 #graph_right {
    animation: graph .7s ease .2s forwards;
}
.css-animation-10 #graph_left {
    animation: graph .7s ease 0s forwards;
}

.css-animation-10 #howmany {
    animation: opacity_animation .3s ease .7s forwards;
}


#overtime-01,
#overtime-02,
#overtime-03,
#overtime-04,
#clock-hover{
    opacity: 0;
}
.css-animation-04 #overtime-01 {
    animation: opacity_animation .1s ease 0s forwards;
}
.css-animation-04 #overtime-02 {
    animation: opacity_animation .1s ease .2s forwards;
}
.css-animation-04 #clock-hover {
    animation: opacity_animation .1s ease .6s forwards;
}
.css-animation-04 #overtime-03 {
    animation: opacity_animation .1s ease .6s forwards;
}
.css-animation-04 #overtime-04 {
    animation: opacity_animation .3s ease .7s forwards;
}

#minute-hand {
    transform: rotate(0deg);
}
.css-animation-04 #minute-hand {
    animation: minute-hand .4s ease .2s forwards;
}