*{
    padding:0;
    margin:3px;
}
body{
    margin:0;
    padding:0;
    background:#e5e7e8;
}
.slide{
    width:640px;
    height:480px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
.slide input{
    position:fixed;
    bottom:10px;
}
#img1{
    left:20px;
}
#img2{
    left:40px;
}
#img3{
    left:60px;
}
#img4{
    left:80px;
}
.images{
    width:3200px;
    height:480px;
    display:flex;
}
.image{
    width:640px;
    height:480px;
    transition: 0.8s linear;
}
.image img{
    height:100%;
}
#img1:checked ~ .first{
    margin-left:0;
}
#img2:checked ~ .first{
    margin-left:-640px;
}
#img3:checked ~ .first{
    margin-left:-1280px;
}
#img4:checked ~ .first{
    margin-left:-1920px;
}
a{
    text-decoration:none;
    color:#6c98c6;  
}
.header{
    width:100%;
    height:100px;
}
.c,.b{
    font:500 80px'';
    line-height:90px;
    outline-width: medium;
    position:absolute;
    color:#004888;
    top:0;
    transition: .4s;
}
.c{
    clip-path: inset(49% 0 0% 0);
}
.b{
    clip-path: inset(0% 0 49% 0);
}
.a:hover .b,.a:hover .c{
    top:calc(var(--i)*0.5px);   
}
.a:hover .d{
    opacity:1;
}
.d{
    text-decoration:none;
    color:#7B6D96;
    font:400 25px'';
    line-height:90px;
    opacity: 0;
    transition: .3s;
}
li{
    list-style:none;  
}