/* h2 ani css */ 
.copy_e{
  position: relative;
  white-space: nowrap;
  display: inline-block;    
  line-height: 1.3em;
}
.copy_e .copy{
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  font-size: 1em;
  font-weight: inherit;
  line-height: 1.3em;
  /* color: #222; */
  opacity: 0.2;
  overflow: hidden;
  white-space: nowrap;
  transition: width 1s ease-in-out ;
}
.copy_e.active .copy{width: 100%;opacity: 1;}
.copy_e br{
  display: none;
}
.copy_e .copy br{
  display: none;
}

/* 기본 상태 (공통 트랜지션) */
.fade-up,
.fade-left,
.fade-right {
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.8s ease-in-out;
}

/* 위에서 fade-up */
.fade-up {
  transform: translateY(60px);
}
.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/* 왼쪽에서 fade-left */
.fade-left {
  transform: translateX(-60px);
}
.fade-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* 오른쪽에서 fade-right */
.fade-right {
  transform: translateX(60px);
}
.fade-right.show {
  opacity: 1;
  transform: translateX(0);
}
.ripple-target{
  position: relative;
  overflow: hidden;
}

.ripple-target .ripple{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  z-index: 1;
}

.ripple-target > :not(.ripple){
  position: relative;
  z-index: 2;
}