/* s: keyframes */
@keyframes flipme {
    0% {
      transform: rotateY(-30deg) rotateX(0deg);
    }
    50% {
      transform: rotateY(0deg) rotateX(10deg);
    }
    100% {
      transform: rotateY(-30deg) rotateX(0deg);
    }
  
  }
  
@keyframes sub-bg-active {
    0% {transform:scale(1.2);}
    100% {transform:scale(1.0);}
}
@keyframes sub-bg-active2 {
    0% {transform:scale(1.0);}
    100% {transform:scale(1.2);}
}
@keyframes sub-bg-active3 {
    0% {transform:scale(1.3);}
    100% {transform:scale(1.0);}
}

@-webkit-keyframes bgFull {
    0% {height:100px;}
    100% {height:442px;}
}

@keyframes bgFull {
    0% {height:100px;}
    100% {height:442px;}
}


@keyframes clipPathLeft {
    0% {
        clip-path: polygon(30% 44%, 65% 44%, 65% 63%, 30% 63%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes clipPathDown {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }
    10% {
        clip-path: polygon(0 0, 100% 0, 100% 78%, 0 36%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}
/* @keyframes fadeUpAni {
    0% {
        opacity:0;
        transform:translate3d(0,100%,0);
    }
    100% {
        opacity:1;
        transform:translate3d(0,0%,0);
    }
} */
@keyframes opacityAni {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}


@keyframes letterspacingTxt{
    0% {
        opacity:0;
        letter-spacing:5px;
    }
    100% {
        opacity:1;
        letter-spacing:0px;
    }
}

@keyframes fadeUp{
    0% {
        opacity:0;
        transform:translate3d(0,50px,0);
    }
    100% {
        opacity:1;
        transform:translate3d(0,0px,0);
    }
}

@keyframes fadeUp2{
    0% {
        opacity:0;
        transform:translate3d(-50%,0%,0);
    }
    100% {
        opacity:1;
        transform:translate3d(-50%,-50%,0);
    }
}

@keyframes fadeLeft{
    0% {
        opacity:0;
        transform:translate3d(100px,0px,0);
    }
    100% {
        opacity:1;
        transform:translate3d(0,0px,0);
    }
}

@keyframes fadeLeft2{
    0% {
        opacity:0;
        transform:translate3d(30%,0px,0);
    }
    100% {
        opacity:1;
        transform:translate3d(0,0px,0);
    }
}
  
@keyframes opacityAni{
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@keyframes opacityAni2{
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

@keyframes opacityAni3{
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
        transform: scale(0);
    }
}

@-webkit-keyframes showImg1{
    0%{ clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);}
    100%{clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);}
}
@-webkit-keyframes showImg3{
    0%{ clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
    100%{clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }
}

@-webkit-keyframes scale1{
    0%{transform:scale(1.7);}
    100%{transform:scale(1);}
}
@-webkit-keyframes scale2{
    0%{transform:scale(0.4);}
    100%{transform:scale(1);}
}

@keyframes spacing {
    0% {
        opacity: 0;
    }
    80% {
        letter-spacing: 1vw;
        opacity: 0.8;
    }
    100% {
        letter-spacing: 1vw;
        opacity: 0.2;
    }
}

@keyframes spacing_img {
    0% {
        /* width: 60%; */
        transform:scaleX(0.8) translate3d(0,60px,0);
    }
    80% {
        /* transform: translate3d(0,30px,0); */
    }
    100% {
        /* width: 100%; */
        transform:scaleX(1) translate3d(0,0,0);
    }
}

@keyframes solutionShow {
    100% {
        padding: 0;
        opacity: 1;
    }
}

@keyframes fadeImg {
    0% {
        scale:1.5;opacity: 0; transform: translateY(20px);
    }
    100% {
        scale:1;opacity: 1; transform: translateY(0px);
    }
}

@keyframes letterSpacingAni {
    0% {
        letter-spacing: 10px;opacity: 0; transform: translateY(20px);
    }
    100% {
        letter-spacing: 0px;opacity: 1; transform: translateY(0px);
    }
}

@keyframes fadeUpAni {
    0% {
        opacity: 0; transform: translateY(30px);
    }
    100% {
        opacity: 1; transform: translateY(0px);
    }
}
@keyframes fadeUpAniToDown {
    0% {
        opacity: 1; transform: translateY(0px);
    }
    100% {
        opacity: 0; transform: translateY(30px);
    }
}

@keyframes fadeDownAni {
    0% {
        opacity: 0; transform: translateY(-90px);
    }
    100% {
        opacity: 1; transform: translateY(0px);
    }
}

@keyframes fadeLeftAni {
    0% {
        opacity: 0; transform: translate3d(50px,0,0);
    }
    100% {
        opacity: 1; transform: translate3d(0px,0,0);
    }
}

@keyframes fadeLeftAni2 {
    0% {
        opacity: 0; transform: translate3d(10%,0,0);
    }
    100% {
        opacity: 1; transform: translate3d(0px,0,0);
    }
}
@keyframes fadeRightAni {
    0% {
        opacity: 0; transform: translate3d(-50px,0,0);
    }
    100% {
        opacity: 1; transform: translate3d(0px,0,0);
    }
}
  
@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}

@keyframes scrollImage {
    0%{padding-top: 0px}
    50%{padding-top: 30px}
    100%{padding-top: 0px}
}

@keyframes quickScaleDown {
    0% {
      transform: scale(1);
    }
    99.9% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
}

  /* e: keyframes */