main .color_wrap,
main .login_wrap{
    width: 100%;
    height: 100vh;
}

.color_wrap{background: var(--c-light_b);}
.color_wrap .color{
    -webkit-animation-name : color;
    -webkit-animation-duration : .5s;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:both

}
.color_wrap .color1{background: var(--c-green); width: 60%; }
.color_wrap .color2{background: var(--c-black); width: 10%; animation-delay: .3s;}
.color_wrap .color3{background: var(--c-orange); width: 30%; animation-delay: .6s;}
@keyframes color{
    0%{height: 0;}
    100%{height: 100%;}
}

.login_wrap{
    position: relative;
    justify-content: center;
}
.login_wrap .logo{
    position: absolute;
    top: 10rem;
}
.login_wrap .copy{
    position: absolute;
    bottom: 6rem;
    color: var(--c-orange);
}
.login_wrap form{
    width: 40rem;
}
.login_wrap .tit{
    border-bottom: 4px solid var(--c-black);
    padding: 1rem 0;
    text-align: center;
}

.login_wrap .inp_wrap{
    padding: 2rem 0;
    gap: 1rem;
}

.find_wrap{
    padding: 1rem 0;
}

.find_wrap,
.find_wrap a{
    color: var(--c-grey);
}

.find_wrap a:hover{
    color: var(--c-green);
}

.modal_body p{
    margin-bottom: 5px;
}