/*애니메이션*/
@keyframes scale {
  0% {transform: scale(1);}
  50% {transform: scale(1.2);}
  100% {transform: scale(1);}
}
@-webkit-keyframes scale {
  0% {transform: scale(1);}
  50% {transform: scale(1.2);}
  100% {transform: scale(1);}
}

@keyframes scroll-x{
  from{transform: translateX(var(--scroll-start));}
  to{transform: translateX(var(--scroll-end));}
}
@-webkit-keyframes scroll-x{
  from{transform: translateX(var(--scroll-start));}
  to{transform: translateX(var(--scroll-end));}
}

@keyframes fadeUp {
  0%{transform:translateY(80px); opacity: 0;}
  100%{transform:translateY(0); opacity: 1;}
}
@-webkit-keyframes fadeUp {
  0%{transform:translateY(80px); opacity: 0;}
  100%{transform:translateY(0); opacity: 1;}
}

@keyframes fadeInUp{
  0% {transform: translateY(50px);opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}
@-webkit-keyframes fadeInUp{
  0% {transform: translateY(50px);opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}

@keyframes fadeInUp2{
  0% {transform: translateY(50px);opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}
@-webkit-keyframes fadeInUp2{
  0% {transform: translateY(50px);opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}

@keyframes fadeRight{
  0% {transform: translateX(0);opacity: 0; width: 0; right: 90%;}
  100% {transform: translateX(0);opacity: 1; width: 100%; right: -42%}
}
@-webkit-keyframes fadeRight{
  0% {transform: translateX(0);opacity: 0; width: 0; right: 90%;}
  100% {transform: translateX(0);opacity: 1; width: 100%; right: -42%}
}

@keyframes fadeInScale {
  0% {transform: scale(0.5);opacity: 0;}
  100% {transform: scale(1);opacity: 1;}
}
@-webkit-keyframes fadeInScale {
  0% {transform: scale(0.5);opacity: 0;}
  100% {transform: scale(1);opacity: 1;}
}


/*----------반응형 ----------------------*/
@media (max-width:1920px) {
  @keyframes fadeRight{
    0% {transform: translateX(0);opacity: 0; width: 0; right: 90%;}
    100% {transform: translateX(0);opacity: 1; width: 100%; right: -55%}
  }
}

@media (max-width:768px) {
  @keyframes fadeRight {
    0% {transform: translateX(0);opacity: 0;width: 0;right: 90%;}
    100% {transform: translateX(0);opacity: 1;width: 100%;right: 0; }

  }
}