#sectcheck { position: relative; display: flex; justify-content: center; align-items: center;  }

#sectcheck .wrap-left, #sectcheck .wrap-right { flex:1; height:100% }
#sectcheck .wrap-left  { position: relative; background-color: #1B1240; }
#sectcheck .wrap-right { position: relative;  background-color: #EFEFEF; }
#sectcheck .wrap-right .gradient {
    position: absolute; width: 100%; height: 200px; top: 0; left: 0; z-index: 2;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0));
}


#sectcheck .cont {
    position: absolute; display: inline-block; top:55%; transform: translateY(-50%);
    border: 0px solid red; transition: all 0.5s ease 0s;
}
#sectcheck .cont img { transition: all 0.3s ease 0s; }
#sectcheck .wrap-left .cont  { width: 625px; height:614px; right:-50px; opacity: 0; }
#sectcheck .wrap-right .cont { width: 625px; height:682px; left: -50px; opacity: 0; }

#sectcheck.on .wrap-left .cont {  animation: lcont 0.7s ease-in-out both 0.3s; }
#sectcheck.on .wrap-right .cont {  animation: rcont 0.7s ease-in-out both 0.5s; }

#sectcheck .cont .duck > div { font-size: 0.875rem; padding: 5px 10px 0  }
#sectcheck .wrap-left .cont .duck > div { color:#fff !important }
#sectcheck .wrap-right .cont .duck > div { color:#141414 !important  }

@keyframes lcont {
    from {  }
    to { opacity: 1; right:100px }
}

@keyframes rcont {
    from { opacity: 0; }
    to { opacity: 1; left:100px }
}

@media (max-width: 1600px) or (max-height: 900px) {
    #sectcheck .wrap-left .cont, #sectcheck .wrap-right .cont { width:500px; }
    #sectcheck .wrap-left .cont {  right: 50px !important }
    #sectcheck .wrap-right .cont { left : 50px !important }
}
@media (max-height: 900px) {
    #sectcheck .wrap-left .cont, #sectcheck .wrap-right .cont { top:65% }
}