.img_wr {
    position: relative;
    overflow: hidden;
}
.animate_me.active .dim {
    animation: leftDim 1.2s cubic-bezier(.215, .61, .355, 1) forwards .3s;
}
.animate_me .img_wr .dim {
    width: 100%;
    height: 100%;
    background: #122C4F;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: opacity 0.5s;
}
.animate_me .dim {
    translate: none;
    rotate: none;
    scale: none;
    transform-origin: 100% 50%;
    transform: scale(0, 1);
}

@keyframes leftDim {
    0% {
        transform: scale(0, 1);
    }
    40% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1) translateX(-100%);
    }   
}   

/*  */
.right_img.animate_me .dim {
    transform-origin: 0% 50%;
}
.right_img.animate_me.active .dim {
    animation: rightDim 1.2s cubic-bezier(.215, .61, .355, 1) forwards .3s;
}
@keyframes rightDim {
    0% {
        transform: scale(0, 1);
    }
    40% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1) translateX(100%);
    }
}



/* copy_e */
.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: #000; */
    opacity: 0.2;
    overflow: hidden;
    white-space: nowrap;
    transition: width 1.5s ease-in-out ;
}
.copy_e.active .copy{width: 100%;opacity: 1;}
/*  */
.copy_e{color:rgba(67, 71, 72, 0.1);}
.copy_e .copy{color:rgba(67, 71, 72, 1);}
/*  */
.c1_tit .copy_e{color:rgba(255, 255, 255, 0);}
.c1_tit .copy_e .copy{color:rgba(255, 255, 255, 1);}
.c1_tit .copy_e i{color:rgba(37, 162, 126, 0);}
.c1_tit .copy_e .copy i{color:rgba(37, 162, 126, 1);}
.copy_e.d1 .copy{
    transition: width 1s ease-in-out 1s;
}