/*------------------------------------------------------------------------------
  animation
------------------------------------------------------------------------------*/
@-webkit-keyframes startFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

@media not print {
    .anm {
        opacity: 0;
    }

    .anm.is-animated {
        -webkit-animation: fadeIn 0s forwards;
        animation: fadeIn 0.5s forwards;
    }

    .anm-up {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }

    .anm-up.is-animated {
        -webkit-animation: fadeInUp 0.5s forwards;
        animation: fadeInUp 0.5s forwards;
    }

    .anm-flow {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    .anm-flow.is-animated {
        -webkit-animation: fadeInDown 0.5s forwards;
        animation: fadeInDown 0.5s forwards;
        animation-delay: 0.6s;
    }

    @media screen and (min-width: 1000px) {
        .anm-flow {
            opacity: 0;
            -webkit-transform: translateX(-30px);
            transform: translateX(-30px);
        }

        .anm-flow.is-animated {
            -webkit-animation: fadeInRight 0.5s forwards;
            animation: fadeInRight 0.5s forwards;
        }
    }

    .anm-left {
        opacity: 0;
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
    }

    .anm-left.is-animated {
        -webkit-animation: fadeInLeft 0.5s forwards;
        animation: fadeInLeft 0.5s forwards;
    }

    .anm-right {
        opacity: 0;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
    }

    .anm-right.is-animated {
        -webkit-animation: fadeInRight 1.0s forwards;
        animation: fadeInRight 1.0s forwards;
    }
}

.anm-list>* {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
}

.anm-list>*.is-animated {
    -webkit-animation: fadeInUp 1.0s forwards;
    animation: fadeInUp 1.0s forwards;
}

.anm-list-fast>* {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
}

.anm-list-fast>*.is-animated {
    -webkit-animation: fadeInUp 0.8s forwards;
    animation: fadeInUp 0.8s forwards;
}

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

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }

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

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }

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

@keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }

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

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
        transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    }

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

@keyframes fadeInLeftFast {
    0% {
        opacity: 0;
        -webkit-transform: translateX(30px);
        transform: translateX(30px);
        -webkit-transition-timing-function: cubic-bezier(0, 0.2, 0.1, 0.5);
        transition-timing-function: cubic-bezier(0, 0.2, 0.1, 0.5);
    }

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

@keyframes hideop {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      display:none;
    }
}

@keyframes showop {
    0% {
      opacity: 0;
      display:none;
    }

    100% {
      opacity: 1;
    }
}

.dalBtn {
    position: fixed;
    z-index: 8;
}

.dalBtn.reShow {
    animation: showop 0.3s linear 0s;
    animation-fill-mode: forwards;
}


.dalBtn.hide {
    animation: hideop 0.3s linear 0s;
    animation-fill-mode: forwards;
    pointer-events: none;
}

/* /animation */