.transitionIn {
    -webkit-animation: expand 4s;
}
  
@keyframes transitionIn {
    from {
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    to {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }

  .rotate { 
    animation: rotation 8s infinite linear;
    transform-origin: 50% 50%;
  }
  @keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
  }
/* img.tn-left.animate__animated.animate__fadeInUp.transitionIn {
    position: absolute;
    bottom: 19px;
    left: -3px;
    height: 88vh;
}
img.tn-right.animate__animated.animate__fadeInUp.transitionIn {
    position: absolute;
    bottom: 19px;
    right: -3px;
    height: 88vh;
} */

.animte_polygon {
  transition: clip-path 2s;
  clip-path: polygon(0 0, 100% 0, 100% 5%, 0 15%);
}
.animte_polygon_full_2 {
  transition: clip-path 2s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.animte_polygon_full_3 {
  transition: clip-path 3s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.animte_polygon_full_4 {
  transition: clip-path 4s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.line-mation {
  position: relative;
}
.line-mation .line-1 {
  width: 0;
  height: 100%;
  position: absolute;
  top: -33%;
  left: 12%;
  border-left: 1px solid #e0c882;
  transform: rotate(72deg);
  display: none;
}
.line-mation .line-2 {
  width: 0;
  height: 100%;
  position: absolute;
  bottom: -33%;
  right: 12%;
  border-right: 1px solid #e0c882;
  transform: rotate(72deg);
  display: none;
}
.line-mation:hover .line-2, .line-mation:hover .line-1{
  display: block;
}
.line-run-left {
  transition: clip-path 1s;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.line-run-full {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
.line-run-right {
  transition: clip-path 1s;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}