@charset "UTF-8";
/* CSS Document */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 100%;
    background-color:#FFF;
}
.loader_inner {
    width: 100%;
    height: 100%;
    position:relative
}
.loader_inner_img {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0;
    margin-top: -44px;
    margin-left:-44px
}

@media screen and (max-width: 960px) {
    .loader_inner_img {
        margin-top: -40px;
        margin-left: -40px;
        -webkit-perspective: 158px;
        perspective:158px
    }
}

@media screen and (max-width: 600px) {
    .loader_inner_img {
        margin-top: -100px;
        margin-left: -100px;
        /* -webkit-perspective: 80px; */
        /* perspective:80px */
    }
}

.loader_inner_img_mark {
    display: inline-block;
    width: 87px;
    position: relative;
    -webkit-perspective: 174px;
    perspective:174px
}

@media screen and (max-width: 960px) {
    .loader_inner_img_mark {
        width: 79px
    }
}

@media screen and (max-width: 600px) {
    .loader_inner_img_mark {
        /* width: 40px; */
        width: 200px;
    }
}

.loader_inner_img_mark img {
    -webkit-animation-name: loading;
    animation-name: loading;
    -webkit-animation-duration: 1.6s;
    animation-duration: 1.6s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count:infinite
}
.loader_inner_img_type {
    display: inline-block;
    width: 263px;
    opacity: 0;
    -webkit-transform: translateX(-25%);
    transform:translateX(-25%)
}

@media screen and (max-width: 960px) {
    .loader_inner_img_type {
        width:241px
    }
}

@media screen and (max-width: 600px) {
    .loader_inner_img_type {
        width:120px;
    }
}

.loader.comp {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    transition:.4s 2.4s
}
.loader.comp .loader_inner_img {
    margin-left: -175px;
    transition:.8s 1.6s
}

@media screen and (max-width: 960px) {
    .loader.comp .loader_inner_img {
        margin-left:-160px
    }
}

@media screen and (max-width: 600px) {
    .loader.comp .loader_inner_img {
        margin-left:-80px
    }
}

.loader.comp .loader_inner_img_mark img {
    -webkit-animation-name: stop;
    animation-name: stop;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count:1
}
.loader.comp .loader_inner_img_type {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    transition: .8s 1.6s
}