.fade-up,
.fade-up-2,
.fade,
.fade-left,
.fade-right,
.zoomIn,
.zoom,
.fade-down,
.fade:not(.show),
.flipInY,
.flipInX,
.section3-title,
.section3-video-title,
.section3-video,
.section3-img-left,
.section3-img-right {
    opacity: 0;
}

.deley.deley-1.a-play {
    animation-delay: 0.15s;
}

.deley.deley-2.a-play {
    animation-delay: 0.25s;
}

.deley.deley-3.a-play {
    animation-delay: 0.35s;
}

.deley.deley-4.a-play {
    animation-delay: 0.45s;
}

.deley.deley-5.a-play {
    animation-delay: 0.55s;
}

.deley.deley-6.a-play {
    animation-delay: 0.65s;
}

.deley.deley-7.a-play {
    animation-delay: 0.75s;
}

.deley.deley-8.a-play {
    animation-delay: 0.85s;
}

.deley.deley-9.a-play {
    animation-delay: 0.95s;
}

.deley.deley-loading.a-play {
    animation-delay: 4.6s !important; 
}

.deley.deley-loading-1.a-play {
    animation-delay: 4.75s !important;
}

.deley.deley-loading-2.a-play {
    animation-delay: 4.9s !important;
}

.speed.speed-1.a-play {
    animation-duration: 1s;
}

.fade-up-2.a-play {
    animation: fadeInUp-2 1s ease 0s 1 forwards;
}

.fade-up.a-play {
    animation: fadeInUp .8s ease 0s 1 forwards;
}

.fade-down.a-play {
    animation: fadeInDown .8s ease 0s 1 forwards;
}

.fade.a-play {
    animation: fade .8s ease 0s 1 forwards;
}


.fade-left.a-play {
    animation: fade-left .8s ease 0s 1 forwards;
}

.fade-right.a-play {
    animation: fade-right .8s ease 0s 1 forwards;
}

.flipInX.a-play {
    animation: flipInX .8s ease 0s 1 forwards;
}

.zoomIn.a-play {
    animation: zoomIn .8s ease 0s 1 forwards;
}

.zoom.a-play {
    animation: zoomIn .85s forwards cubic-bezier(0.63, -0.28, 0.13, 1.55) 0s 1;
}

.arrowExpand.a-play {
    animation: arrowExpand 1.8s forwards cubic-bezier(0.5, 0.5, 0, 1);

    @media (max-width: 1024px) {
        animation: arrowExpandSp 1.8s forwards cubic-bezier(0.5, 0.5, 0, 1);
    }
}

.page-main.aplay .section3-video {
    animation: fadeInUp .8s ease .5s 1 forwards;
}

.page-main.aplay .section3-title {
    animation: fade .8s ease .5s 1 forwards;
}

.page-main.aplay .section3-video-title {
    animation: fade .8s ease .5s 1 forwards;
}

.page-main.aplay .section3-img-left {
    animation: fade-left .8s ease .5s 1 forwards;
}

.page-main.aplay .section3-img-right {
    animation: fade-right .8s ease .5s 1 forwards;
}


/* ====================================== */
.w-animate .about4-img-box {
    opacity                   : 0;
    transition-delay          : .3s;
    transition-duration       : .5s;
    transition-timing-function: linear;
}

.w-animate.active .about4-img-box {
    opacity: 1;
}

.w-animate .about4-img-box:after {
    top                       : 0;
    left                      : 0;
    transition-delay          : .6s;
    transition-duration       : .5s;
    transition-timing-function: ease;
}

.w-animate.active .about4-img-box:after {
    top : -30px;
    left: -30px;
}

@keyframes arrowExpand {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes arrowExpandSp {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}


@keyframes arrow-right {
    0% {
        -webkit-transform: translate3d(0px, 0, 0);
        transform        : translate3d(0px, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform        : translate3d(10px, 0, 0);
    }
}

@keyframes arrow-left {
    0% {
        -webkit-transform: translate3d(0px, 0, 0);
        transform        : translate3d(0px, 0, 0);
    }

    100% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform        : translate3d(-10px, 0, 0);
    }
}


@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp-2 {
    0% {
        opacity          : 0;
        -webkit-transform: translate3d(0, 30%, 0);
        transform        : translate3d(0, 30%, 0);
    }

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

@keyframes fadeInUp-2-kv {
    0% {
        opacity          : 0;
        -webkit-transform: translate3d(-50%, -30%, 0);
        transform        : translate3d(-50%, -30%, 0);
    }

    100% {
        opacity          : 1;
        -webkit-transform: translate3d(-50%, -43%, 0);
        transform        : translate3d(-50%, -43%, 0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity          : 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform        : translate3d(0, 50%, 0);
    }

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

@keyframes fadeInDown {
    0% {
        opacity          : 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform        : translate3d(0, -50%, 0);
    }

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

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

    100% {
        opacity: 1;
    }
}


@keyframes fade-left {
    0% {
        opacity          : 0;
        -webkit-transform: translate3d(100px, 0, 0);
        transform        : translate3d(100px, 0, 0);
    }

    100% {
        opacity          : 1;
        -webkit-transform: translate3d(0px, 0, 0);
        transform        : translate3d(0px, 0, 0);
    }
}

@keyframes fade-right {
    0% {
        opacity          : 0;
        -webkit-transform: translate3d(-100px, 0, 0);
        transform        : translate3d(-100px, 0, 0);
    }

    100% {
        opacity          : 1;
        -webkit-transform: translate3d(0px, 0, 0);
        transform        : translate3d(0px, 0, 0);
    }
}

@keyframes rotate1 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(30deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-30deg);
    }
}

@keyframes upDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(20px);
    }
}


@keyframes flipInX {
    0% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function        : ease-in;
        opacity                          : 0;
        -webkit-transform                : perspective(400px) rotateX(90deg);
        transform                        : perspective(400px) rotateX(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function        : ease-in;
        -webkit-transform                : perspective(400px) rotateX(-20deg);
        transform                        : perspective(400px) rotateX(-20deg)
    }

    60% {
        opacity          : 1;
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform        : perspective(400px) rotateX(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform        : perspective(400px) rotateX(-5deg)
    }

    to {
        opacity          : 1;
        -webkit-transform: perspective(400px);
        transform        : perspective(400px)
    }
}

@keyframes zoomIn {
    0% {
        opacity          : 0;
        -webkit-transform: scale3d(0.5, 0.5, 0.5);
        transform        : scale3d(0.5, 0.5, 0.5)
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity          : 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform        : scale3d(1, 1, 1)
    }
}

@keyframes zoomInKv {
    0% {
        opacity          : 0;
        transform: translate(-50%, -43%) scale(0.5) ;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity          : 1;
        transform: translate(-50%, -43%) scale(1);
    }
}

@keyframes flipInY {
    0% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function        : ease-in;
        opacity                          : 0;
        -webkit-transform                : perspective(400px) rotateY(90deg);
        transform                        : perspective(400px) rotateY(90deg)
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function        : ease-in;
        -webkit-transform                : perspective(400px) rotateY(-20deg);
        transform                        : perspective(400px) rotateY(-20deg)
    }

    60% {
        opacity          : 1;
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform        : perspective(400px) rotateY(10deg)
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform        : perspective(400px) rotateY(-5deg)
    }

    to {
        opacity          : 1;
        -webkit-transform: perspective(400px);
        transform        : perspective(400px)
    }
}



[data-aos^=zoom][data-aos="zoom-in-pop"] {
    opacity                   : 0;
    transform                 : scale(0.5);
    transition-property       : transform, opacity;
    transition-timing-function: cubic-bezier(0.63, -0.28, 0.13, 1.55) !important;
    transition-duration       : 0.8 !important;

    &.aos-animate {
        opacity  : 1;
        transform: scale(1);
    }
}

[data-aos="arrow-expand"] {

    width: 0 !important;
    height: 10px !important;;
    transition-timing-function:  cubic-bezier(0.5, 0.5, 0, 1) !important;
    transition-duration: 1.4s !important;


    &.aos-animate {
        width: 100% !important;
    }

    @media (max-width: 1024px) {
        width: 10px !important;
        height: 0% !important;

        &.aos-animate {
            height: 100% !important;
        }
    }
}


.kv {
    .main-img{
         &[data-aos]{
            transform: translate(-50%, -30%) ;
            &.aos-animate{
                transform: translate(-50%, -43%) ;
            }
        }
    }
}

.kv {
    .main-img.fade-up-2.a-play{
        animation: fadeInUp-2-kv 1s ease 0s 1 forwards;
    }
}