// 나중에 사용자 관리자 로그인 분리

.user-wrap{
    width: 100%;
    height: 100%;

    .main-wrap{
        width: 100%;
        height: 100%;

        .login-page{
            width: 100%;
            height: 100%;

           >div{
            width: 100%;
            height: 100%;
            @include flex-layout(flex, stretch,);

            .background-img{
                width: 50%;
                height: 100%;
                background-image: url(#{$url}/page/background.jpg);
                background-position: bottom right 10%;
                background-size: auto 100%;
                position: relative;

                p{
                    font-size: var(--tk-fz-heading-md);
                    color: #0b4dd1;
                    font-weight: 700;
                    position: absolute;
                    top: 5rem;
                    left: 5rem;
                    // animation: bounce 1.5s infinite ease-in-out;
                }
            }

            .login-wrap{
                width: 50%;
                height: 100%;
                @include flex-layout(flex, center, center, column);
                
                .login{
                    width: 500px;

                    .login-title{
                        font-size: var(--tk-fz-title-xxlg);
                        font-weight: 700;
                        text-align: center;
                        margin-bottom: 5rem;
                    }

                    .form-group{
                        margin-bottom: 2rem;

                        label{
                            font-weight: 700;
                        }
                    }
    
                    button{
                        width: 100%;
            
                        &.user-btn{
                            margin-bottom: 5rem;
                        }
                    }

                    .input-group{
                        justify-content: center;
                    }
                }
            }
           }
        }
    }
}


// @keyframes bounce {
//     0%, 100% {
//         transform: translateY(0);
//     }
//     50% {
//         transform: translateY(-10px);
//     }
// }