[v-cloak] {
    display: none;
}

html,
body {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding: 0px;
    margin: 0;
    font-size: 16px;
    font-family: "微軟正黑體", "Microsoft JhengHei";
    -webkit-user-drag: none;
}

/* main {
    height: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.form-signin {
    width: 100%;
    max-width: 380px;
    padding: 15px 30px;
    margin: auto;
    background-color: white;
    border-radius: 10px;
} */

.eye {
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    right: 5px;
}

.fade-enter {
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s;
}
.fade-leave-to {
    opacity: 0;
}

header,
footer {
    height: 80px;
    width: 100vw;
    position: fixed;
    background: linear-gradient(277deg, #37819e, #000000, #0000c4);
    background-size: 600% 600%;
    -webkit-animation: w 20s ease infinite;
    -moz-animation: w 20s ease infinite;
    animation: w 50s ease infinite;
}

header {
    top: 0;
}

footer {
    bottom: 0;
}

@-webkit-keyframes w {
    0% {
        background-position: 0% 46%;
    }

    50% {
        background-position: 100% 55%;
    }

    100% {
        background-position: 0% 46%;
    }
}

@-moz-keyframes w {
    0% {
        background-position: 0% 46%;
    }

    50% {
        background-position: 100% 55%;
    }

    100% {
        background-position: 0% 46%;
    }
}

@keyframes w {
    0% {
        background-position: 0% 46%;
    }

    50% {
        background-position: 100% 55%;
    }

    100% {
        background-position: 0% 46%;
    }
}

main {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

aside {
    height: 90vh;
    width: 50vw;
    border-radius: 10px;
    /* text-align: center; */
    display: flex;
    align-items: center;
    margin-right: 30px;
}

aside img {
    border-radius: 5px;
    transform: scale(1, 1);
    transition: all 1s ease-out;
}

aside img:hover {
    transform: scale(1.05, 1.05);
}

article {
    /* background-color: white; */
    height: 694px;
    /* height: 90vh; */
    width: 50vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.login {
    height: 100%;
    width: 600px;
    background-color: white;
    border: black 5px solid;
    display: flex;
    align-items: center;
}

.badge {
    margin-bottom: 20px;
}

i {
    color: #808080;
    margin-right: 10px;
    /* display: flex; */
    /* margin: 1.5rem 1rem; */
}

.input_data {
    text-align: center;
    margin: 1.5rem auto;
}

/* login */
.field__input {
    --uiFieldPlaceholderColor: var(--fieldPlaceholderColor, #767676);
    background-color: transparent;
    border-radius: 0;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-family: inherit;
    font-size: inherit;
}

.field__input:focus::-webkit-input-placeholder {
    color: var(--uiFieldPlaceholderColor);
}

.field__input:focus::-moz-placeholder {
    color: var(--uiFieldPlaceholderColor);
}

.field {
    --uiFieldBorderWidth: var(--fieldBorderWidth, 2px);
    --uiFieldPaddingRight: var(--fieldPaddingRight, 1rem);
    --uiFieldPaddingLeft: var(--fieldPaddingLeft, 1rem);
    --uiFieldBorderColorActive: var(--fieldBorderColorActive, rgba(22, 22, 22, 1));
    display: var(--fieldDisplay, inline-flex);
    position: relative;
    font-size: var(--fieldFontSize, 1rem);
}

.field__input {
    box-sizing: border-box;
    width: var(--fieldWidth, 100%);
    height: var(--fieldHeight, 3rem);
    padding: var(--fieldPaddingTop, 1.25rem) var(--uiFieldPaddingRight) var(--fieldPaddingBottom, 0.5rem)
        var(--uiFieldPaddingLeft);
    border-bottom: var(--uiFieldBorderWidth) solid var(--fieldBorderColor, rgba(0, 0, 0, 0.25));
}

.field__input:focus {
    outline: none;
}

.field__input::-webkit-input-placeholder {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.field__input::-moz-placeholder {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.field__input:focus::-webkit-input-placeholder {
    opacity: 1;
    transition-delay: 0.2s;
}

.field__input:focus::-moz-placeholder {
    opacity: 1;
    transition-delay: 0.2s;
}

.field__label-wrap {
    box-sizing: border-box;
    pointer-events: none;
    cursor: text;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.field__label-wrap::after {
    content: "";
    box-sizing: border-box;
    width: 100%;
    height: 0;
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
}

.field__input:focus ~ .field__label-wrap::after {
    opacity: 1;
}

/* 提字 */
.field__label {
    position: absolute;
    left: var(--uiFieldPaddingLeft);
    top: calc(50% - 0.5em);
    line-height: 1;
    font-size: var(--fieldHintFontSize, inherit);
    transition: top 0.2s cubic-bezier(0.9, -0.15, 0.1, 1.15), opacity 0.2s ease-out, font-size 0.2s ease-out;
    will-change: bottom, opacity, font-size;
}

.field__input:focus ~ .field__label-wrap .field__label,
.field__input:not(:placeholder-shown) ~ .field__label-wrap .field__label {
    --fieldHintFontSize: var(--fieldHintFontSizeFocused, 0.75rem);
    top: var(--fieldHintTopHover, 0.25rem);
}

/* 線 */
.field_v2 .field__label-wrap {
    overflow: hidden;
}

.field_v2 .field__label-wrap::after {
    border-bottom: var(--uiFieldBorderWidth) solid var(--uiFieldBorderColorActive);
    transform: translate3d(-105%, 0, 0);
    will-change: transform, opacity;
    transition: transform 0.285s ease-out 0.2s, opacity 0.2s ease-out 0.2s;
}

.field_v2 .field__input:focus ~ .field__label-wrap::after {
    transform: translate3d(0, 0, 0);
    transition-delay: 0;
}

.field {
    --fieldBorderColor: #000000;
    --fieldBorderColorActive: #bb3d31;
    width: 220px;
}

.bbb {
    margin-top: 20px;
    width: 270px;
}

@media screen and (max-width: 768px) {
    html,
    body {
        background-color: #2a2a2a;
    }

    aside {
        display: none;
    }

    article {
        background-color: white;
        height: 90vh;
        width: 90vw;
        margin: auto;
        border-radius: 10px;
        text-align: center;
        display: flex;
        align-items: center;
    }

    .login {
        width: 100%;
        background-color: white;
        display: flex;
        align-items: center;
    }

    .field {
        width: 30%;
    }

    .bbb {
        margin-top: 20px;
        width: 40%;
    }

    /* main {
        display: block;
        background-color: transparent;
        width: 100vw;
    } */

    /* 
    .login {
        width: 100%;
        height: 90%;
    }

    .article {
        position: absolute;
        width: 80%;
        left: 10%;
    } */
}

@media screen and (max-width: 480px) {
    .login {
        padding-top: 0;
        /* padding-left: 1.5rem; */
        /* padding-right: 1.5rem; */
        display: flex;
        align-items: center;
    }

    .field {
        width: 65%;
    }

    .bbb {
        width: 80%;
    }
}