/* banner img */
@keyframes zoomInImage {
  from {
    transform: scale3d(1, 1, 1);
    transition: 1s;
  }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
    transition: 1s;
  }
}

.zoomInImage {
  animation-name: zoomInImage;
}

@keyframes zoomOutImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
    transition: 1s;
  }
  to {
    transform: scale3d(1, 1, 1);
    transition: 1s;
  }
}

.zoomOutImage {
  animation-name: zoomOutImage;
  transition: 1s;
}

/* slick arrow */
@keyframes stroke {
  52% {
    transform: rotate(-180deg);
    stroke-dashoffset: 0;
  }
  52.1% {
    transform: rotate(-360deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(-180deg);
    stroke-dashoffset: 126;
  }
}

@keyframes test1 {
  52% {
    transform: rotate(-180deg);
    stroke-dashoffset: 0;
  }
  52.1% {
    transform: rotate(-360deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(-180deg);
    stroke-dashoffset: 378;
  }
}


@keyframes arrow {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  23% {
    transform: translateX(17px);
    opacity: 1;
  }
  24%,
  80% {
    transform: translateX(-22px);
    opacity: 0;
  }
  81% {
    opacity: 1;
    transform: translateX(-22px);
  }
}

@keyframes arrowUp {
  0%,
  100% {
    transform: rotate(-40deg) scaleX(1);
  }
  20%,
  80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}

@keyframes arrowDown {
  0%,
  100% {
    transform: rotate(40deg) scaleX(1);
  }
  20%,
  80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}


@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}

@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-3px);
            transform: translateY(-3px);
  }
}

.slide-top {
	-webkit-animation: slide-top 0.5s ease-in both;
  animation: slide-top 0.5s ease-in both;
}


@keyframes cp-fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-25px);
  }
  10% {
    transform: translateY(-25px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  35% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes cp-fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  10% {
    transform: translateY(25px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  35% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes cp-fadeIn {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.6;
  }
  35% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}