@charset "utf-8";

@keyframes lure {
    0%{
        transform: rotateZ(0deg);
    }25%{
        transform: rotateZ(20deg);
    }50%{
        transform: rotateZ(0deg);
    }75%{
        transform: rotateZ(15deg);
    }100%{
        transform: rotateZ(0deg);
    }
}
@keyframes hirame {
    0%{
        transform: rotateZ(0deg);
    }10%{
        transform: rotateZ(10deg);
    }20%{
        transform: rotateZ(0deg);
    }30%{
        transform: rotateZ(10deg);
    }40%{
        transform: rotateZ(0deg);
    }50%{
        transform: rotateZ(10deg);
    }60%{
        transform: rotateZ(0deg);
    }70%{
        transform: rotateZ(8deg);
    }80%{
        transform: rotateZ(0deg);
    }90%{
        transform: rotateZ(8deg);
    }100%{
        transform: rotateZ(0deg);
    }
}

.progress {
    background-color: #00baff;
    background-image: url(/img/progressBg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: rgb(255, 255, 255);
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    overflow:hidden;
}

.progressBarBox {
    width: 60%;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progressBarBox:after {
    content: "";
    position: absolute;
    top: -100px;
    right: -70px;
    background-image: url(/img/lure_re.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    width: 100px;
    height: 39px;
    animation: lure 2s ease-out infinite both;
}

.progress_bar:after {
    content: "";
    position: absolute;
    top: -110px;
    right: 10px;
    background-image: url(/img/loading.png);
    width: 200px;
    height: 139px;
    animation: hirame 0.6s ease-out both;
}

.progress_bar {
    border-top: 0px solid rgb(160, 160, 160);
    display: inline-block;
    position: absolute;
    top: 65%;
    width: 0%;
}

.progress_text {
    font-family: “Menlo”, “Consolas”, monospace;
    font-size: 28px;
    font-weight: bold;
    margin-top: 10px;
    position: absolute;
    text-align: center;
    top: 70%;
    width: 100%;
}



.progress_complete .progress_bar {
    border-top-color: rgb(255, 255, 255);
}


@media (max-width: 750px) {

    .progressBarBox:after {
        top: -29vw;
        right: -4vw;
        width: 16vw;
        height: 6vw;
    }

    .progress_bar:after {
        top: -31vw;
        right: 8vw;
        width: 40vw;
        height: 28vw;
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
    }

}