@charset "UTF-8";

.loading {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #24b3dc;
}

.loading::after {
    content: "Loading";
    font-size: 2rem;
    color: #ccc;
    font-weight: 700;
    font-family: "Neuton", serif;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.loading::before {
    content: "";
    width: 10px;
    height: 4px;
    border-radius: 4px;
    background-color: #ccc;
    display: block;
    position: absolute;
    top: calc(50% + 20px);
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: kf_loading 2s linear 0s infinite both;
    animation: kf_loading 2s linear 0s infinite both;
}

@-webkit-keyframes kf_loading {
    0% {
        -webkit-transform: translate(calc(-50% - 40px), -50%);
        transform: translate(calc(-50% - 40px), -50%);
        opacity: 0;
    }

    30%,
    70% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(calc(-50% + 40px), -50%);
        transform: translate(calc(-50% + 40px), -50%);
        opacity: 0;
    }
}

@keyframes kf_loading {
    0% {
        -webkit-transform: translate(calc(-50% - 40px), -50%);
        transform: translate(calc(-50% - 40px), -50%);
        opacity: 0;
    }

    30%,
    70% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(calc(-50% + 40px), -50%);
        transform: translate(calc(-50% + 40px), -50%);
        opacity: 0;
    }
}

.ani-throught {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.ani-throught.act::after {
    animation: ani-throughtBar 0.8s linear 0s 1 both;
}

.ani-throught.f-ani.act::after {
    animation: ani-throughtBar 0.5s linear 0s 1 both;
}

.ani-throught.f-ani {
    transition-delay: 0s !important;
}

.ani-throught.act .ani-throught-inside {
    opacity: 1;
}

.ani-throught .right {
    margin-left: auto;
}

.ani-throught.gray::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #333333;
    transform-origin: center left;
    transform: translateX(-10%) scaleX(0);
}

.ani-throught::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #EE7800;
    transform-origin: center left;
    transform: translateX(-10%) scaleX(0);
}

.ani-throught .ani-throught-inside {
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}

/** animation base **/

.ani.fade-in,
.ani.fade-in-up {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.ani.fade-in-down {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
}

.ani.fade-in-left {
    -webkit-transform: translateX(-40px);
    transform: translateX(-40px);
}

.ani.fade-in-right {
    -webkit-transform: translateX(40px);
    transform: translateX(40px);
}

.ani.fade-in,
.ani.fade-in-up,
.ani.fade-in-down,
.ani.fade-in-left,
.ani.fade-in-right {
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.ani.fade-in.animated,
.ani.fade-in-up.animated,
.ani.fade-in-down.animated,
.ani.fade-in-left.animated,
.ani.fade-in-right.animated {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}


/** animation line bar **/

.ani.line-bar {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.ani.line-bar>.ani-line-bar-inside {
    opacity: 0;
    -webkit-transition: all 0.5s ease 0.3s;
    transition: all 0.5s ease 0.3s;
}

.ani.line-bar::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #c81243;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    -webkit-transform: translateX(-10%) scaleX(0);
    transform: translateX(-10%) scaleX(0);
}

.ani.line-bar.animated::after {
    -webkit-animation: kf_line_bar 0.8s linear 0s 1 both;
    animation: kf_line_bar 0.8s linear 0s 1 both;
}

.ani.line-bar.animated>.ani-line-bar-inside {
    opacity: 1;
}

@-webkit-keyframes kf_line_bar {
    0% {
        -webkit-transform-origin: center left;
        transform-origin: center left;
        -webkit-transform: translateX(-10%) scaleX(0);
        transform: translateX(-10%) scaleX(0);
    }

    35%,
    65% {
        -webkit-transform: translateX(0) scaleX(1);
        transform: translateX(0) scaleX(1);
    }

    66% {
        -webkit-transform-origin: center right;
        transform-origin: center right;
    }

    100% {
        -webkit-transform: translateX(10%) scaleX(0);
        transform: translateX(10%) scaleX(0);
    }
}

@keyframes kf_line_bar {
    0% {
        -webkit-transform-origin: center left;
        transform-origin: center left;
        -webkit-transform: translateX(-10%) scaleX(0);
        transform: translateX(-10%) scaleX(0);
    }

    35%,
    65% {
        -webkit-transform: translateX(0) scaleX(1);
        transform: translateX(0) scaleX(1);
    }

    66% {
        -webkit-transform-origin: center right;
        transform-origin: center right;
    }

    100% {
        -webkit-transform: translateX(10%) scaleX(0);
        transform: translateX(10%) scaleX(0);
    }
}


/** zoom **/

.ani.zoom-in,
.ani.zoom-out {
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.ani.zoom-in {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
}

.ani.zoom-out {
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
}

.ani.zoom-in.animated,
.ani.zoom-out.animated {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


/** image **/

.ani.aimg {
    position: relative;
}

.ani.aimg>* {
    opacity: 0;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.ani.aimg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background-color: #EE7800;
    -webkit-animation-delay: inherit;
    animation-delay: inherit;
    z-index: 1;
}

.ani.aimg--red::after {
    background-color: #f24d74;
}

.ani.aimg--green::after {
    background-color: #35bf74;
}

.ani.aimg--blue::after {
    background-color: #52a5e7;
}

.ani.aimg--yellow::after {
    background-color: #f9d05d;
}

.ani.aimg.animated::after {
    -webkit-animation-name: kf_aimg;
    animation-name: kf_aimg;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}

.ani.aimg.animated>* {
    -webkit-animation-name: kf_aimg_img;
    animation-name: kf_aimg_img;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    /* animation: kf_aimg_img 0.3s ease 0.9s both; */
}

@-webkit-keyframes kf_aimg {
    0% {
        width: 10%;
        height: 0;
        left: 0;
    }

    35% {
        width: 10%;
        height: 100%;
        left: 0;
    }

    65% {
        width: 100%;
        height: 100%;
        left: 0;
    }

    100% {
        width: 0%;
        left: 100%;
    }
}

@keyframes kf_aimg {
    0% {
        width: 10%;
        height: 0;
        left: 0;
    }

    35% {
        width: 10%;
        height: 100%;
        left: 0;
    }

    65% {
        width: 100%;
        height: 100%;
        left: 0;
    }

    100% {
        width: 0%;
        left: 100%;
    }
}

@-webkit-keyframes kf_aimg_img {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes kf_aimg_img {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes ani-throughtBar {
    0% {
        transform: translateX(-10%) scaleX(0);
    }

    35%,
    65% {
        transform: translateX(0) scaleX(1);
    }

    100% {
        transform: translateX(110%) scaleX(1);
    }
}

.ani.fade-text-left {
    overflow: hidden;
    display: inline-block;
    opacity: 0;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    transform: translateX(-100%);
}

.ani.fade-text-left.animated {
    opacity: 1;
    transform: translateX(0);
}

.ani.fade-text-left span {
    opacity: 0;
    display: inline-block;
    transform: translateX(100%);
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
}

.ani.fade-text-left.animated span {
    transform: translateX(0);
    opacity: 1;
}