@charset "UTF-8";
.dot-wave,.dot-wave2{
    background-color:transparent;
}

.dot{
    position:absolute;
    width:2px;
    height:2px;
    border-radius:50%;
    background:#000;
}

.circle-wave{
    overflow:visible;
}

.circle-wave::before,
.circle-wave::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    height:100%;
    transform:translate(-50%,-50%) scale(0);
    border:4px solid rgb(220,220,220);
    border-radius:50%;
    opacity:0;
    animation:ripple 5s ease-out infinite;
}

.circle-wave::after{
    animation-delay:2.5s;
}

@keyframes ripple{
    0%{
        transform:translate(-50%,-50%) scale(0.5);
        opacity:0;
    }
    10%{
        opacity:1;
    }
    100%{
        transform:translate(-50%,-50%) scale(1);
        opacity:0;
    }
}

.appear-line{
    position:relative;
    display:inline-block;
}

.appear-line::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:#000;
    transform:scaleX(0);
    transform-origin:center;
    animation:appearLine .6s ease-out forwards;
}
.appear-line.left-story{
    position:absolute;
}
.appear-line.left-story::after{
    height:1px;
    transform-origin:0% center;
    animation:appearLine 0.5s ease-out 0.5s forwards;
}

@keyframes appearLine{
    from{
        transform:scaleX(0);
    }
    to{
        transform:scaleX(1);
    }
}

.rect-picture{
    animation:rectRotate .5s ease forwards;
    animation-delay:1s;
}

.rect-fill{
    animation:rectFillMove .5s ease forwards;
    animation-delay:1.5s;
}

.rect-border{
    animation:rectBorderMove .5s ease forwards;
    animation-delay:1.5s;
}

.rect-fill > div{
    opacity:0;
    animation:rectContent 1s ease forwards;
    animation-delay:1.5s;
}

@keyframes rectRotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(25deg);
        opacity:1;
    }
}

@keyframes rectFillMove{
    from{
        top:0;
        left:0;
    }
    to{
        top:-6%;
        left:6%;
    }
}

@keyframes rectBorderMove{
    from{
        top:0;
        left:0;
        opacity:0;
    }
    to{
        top:6%;
        left:-6%;
        opacity:1;
    }
}

@keyframes rectContent{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}