@charset "utf-8";

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-size: 0.875rem;
    background-color: #181818;
    font-family: HelveticaNeue-Light, AppleSDGothicNeo-Light, "Noto Sans", "Malgun Gothic", "맑은 고딕", sans-serif;
    font-weight: 400;
    color: #b6b6b6;
}

input, button, select, textarea {
    outline: 0;
    margin: 0;
    padding: 0;
    font-family: HelveticaNeue-Light, AppleSDGothicNeo-Light, "Noto Sans", "Malgun Gothic", "맑은 고딕", sans-serif;
    font-weight: 400;
    -webkit-border-radius: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

#login {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    & .login-header {
        padding-bottom: 55px;
    }

    & .login-content {
        width: 300px;
        max-width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        & .form-row {
            width: 100%;
            height: 46px;
            max-height: 100%;
            background-color: #363636;
            margin-bottom: 15px;
            & .input-text {
                padding-left: 15px;
                width: 100%;
                height: 100%;
                color: #e2e2e2;
            }
        }
        & .option-row {
            display: flex;
            align-items: center;
            padding:5px 0 15px 0;
            & .auto-login {
                flex:1;
                & .checkbox {
                    position: relative;
                    cursor: pointer;
                    & input {
                        position: absolute;
                        cursor: pointer;
                        opacity: 0;
                        -webkit-transition: all 0.3s;
                        transition: all 0.3s;
                    }
                    & input + span {
                        border-radius: 2px;
                        -webkit-transition: all 0.3s;
                        transition: all 0.3s;
                        &:after {
                            background-size: contain;
                            position: absolute;
                            top: 52%;
                            left: 50%;
                            -webkit-transform: translate(-50%, -50%) scale(0);
                            transform: translate(-50%, -50%) scale(0);
                            content: 'O';
                            font-size: 0.8rem;
                            color: #1351f9;
                        }
                        position: relative;
                        top: -2px;
                        background: #363636;
                        content: '';
                        display: inline-block;
                        margin: 0 0.5em 0 0;
                        padding: 0;
                        vertical-align: middle;
                        width: 1.4em;
                        height: 1.4em;
                        -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                    }
                    & input:checked + span {
                        &:after {
                            -webkit-transform: translate(-50%, -50%) scale(1) !important;
                            transform: translate(-50%, -50%) scale(1) !important;
                            color: #fff;
                        }
                        border-color: #1351f9;
                        background-color: #1351f9;
                    }

                }
            }
            & a {
                color:#fff;
            }
        }
        & .submit {
            & .btn-submit {
                width: 100%;
                background-color: #1348d5;
                height: 50px;
                text-align: center;
                color: white;
                font-size: 15px;
            }
        }
    }
}

#register {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    & .register-header {
        padding-bottom: 55px;
    }
    & .register-content {
        width: 300px;
        max-width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;

        & .form-row {
            width: 100%;
            height: 46px;
            max-height: 100%;
            background-color: #363636;
            margin-bottom: 15px;
            & .input-text {
                padding-left: 15px;
                width: 100%;
                height: 100%;
                color: #e2e2e2;
            }
        }
        & .captcha {
            padding:10px 0;
            text-align:center;
        }
        & .submit {
            & .btn-submit {
                width: 100%;
                background-color: #1348d5;
                height: 50px;
                text-align: center;
                color: white;
                font-size: 15px;
            }
        }
    }
}