@charset "utf-8";
/* CSS Document */

.loading-box-bk {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5000;
    background: #ffffff;
    animation: fadeinctrl 2s ease;
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

@keyframes fadeinctrl {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);

    }

    80% {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    99% {
        opacity: 0;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
    }
}

.logo-show-front {
    width: 255px;
    position: absolute;
    left: 0;
    right: 0;
    top: 37%;
    margin: auto;
    z-index: 6000;
    animation: logoslide 1.5s ease;
}

.logo-show-front img {
    max-width: 255px;
    width: 100%;
    height: auto;
}

@keyframes logoslide {
    0% {
        opacity: 0;
        -webkit-transform: translate(0, -230px);
        -moz-transform: translate(0, -230px);
        -o-transform: translate(0, -230px);
        transform: translate(0, -230px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@media only screen and (max-width : 1440px) {
    .logo-show-front {
        width: 240px;
        top: 37%;
    }
}

@media only screen and (max-width : 414px) {
    .logo-show-front {
        width: 200px;
        top: 37%;
    }
}