@-webkit-keyframes button-arrow {
    0% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }

    25% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity:0
    }

    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity:0
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }
}

@keyframes button-arrow {
    0% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }

    25% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity:0
    }

    50% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity:0
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }
}

@-webkit-keyframes button-link {
    0% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }

    25% {
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
        opacity:0
    }

    50% {
        -webkit-transform: translate(-50%, 50%);
        transform: translate(-50%, 50%);
        opacity:0
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }
}

@keyframes button-link {
    0% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }

    25% {
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%);
        opacity:0
    }

    50% {
        -webkit-transform: translate(-50%, 50%);
        transform: translate(-50%, 50%);
        opacity:0
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }
}

@-webkit-keyframes button-up {
    0% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }

    25% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity:0
    }

    50% {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity:0
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }
}

@keyframes button-up {
    0% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }

    25% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity:0
    }

    50% {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity:0
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }
}

@-webkit-keyframes button-down {
    0% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }

    25% {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity:0
    }

    50% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity:0
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }
}

@keyframes button-down {
    0% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }

    25% {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity:0
    }

    50% {
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        opacity:0
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity:1
    }
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotateY(0deg);
        transform:rotateY(0deg)
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform:rotateY(360deg)
    }
}

@keyframes loading {
    0% {
        -webkit-transform: rotateY(0deg);
        transform:rotateY(0deg)
    }

    100% {
        -webkit-transform: rotateY(360deg);
        transform:rotateY(360deg)
    }
}

@-webkit-keyframes stop {
    100% {
        -webkit-transform: rotateY(360deg);
        transform:rotateY(360deg)
    }
}

@keyframes stop {
    100% {
        -webkit-transform: rotateY(360deg);
        transform:rotateY(360deg)
    }
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 100%;
    background-color:#FFB5B4
}

.loader_inner {
    width: 100%;
    height: 100%;
    position:relative
}

.loader_inner_img {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0;
    width: auto;
    transform: translateX(-50%) translateY(-50%);
    /* 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
    width: 100%;
}

@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
}