.wrap-shine{
  display:inline-block;
  width:460px;
  height:220px;
  position:relative;
  overflow:hidden;
}

@media(min-width:530px) {
  .wrap-shine{
    display:block;
    width: 460px;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
  }
}

@media(max-width:530px) {
  .wrap-shine{
    display:block;
    max-width: 100%;
    height:calc(100vw * 0.42);
    margin-bottom: 10px;
  }
}

@media(max-width:410px) {
  .wrap-shine{
    display: block;
    max-width: 100%;
    height: calc(100vw * 0.42);
  }
}

.wrap-shine img{
  position:absolute;top:0;left:0;height:100%;width:100%;
}
.wrap-shine:before{
  content:"";z-index:10;
  position:absolute;height:200%;width:200%;top:-200%;left:-200%;
  background:linear-gradient(transparent 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 100%);
    transition:all 2s;
    transform:rotate(-45deg);
    animation: shine 10s infinite forwards;
}

@keyframes shine{
  0%{top:-200%;left:-200%;}
  10%{top:-200%;left:-200%;}
  30%{left:100%;top:100%;}
  100%{left:100%;top:100%;}
  
}

/*
@keyframes shine{
  10% {
    opacity: 1;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
  }
  100% {
    opacity: 0;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
  }
} */