/*  
    LOGIN

*/



main::after { display: none; }

article.login { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; padding: 4rem 0 0 0; width: 100%; height: 100%; }
article.login section { width: 64%; }
article.login section input { padding: 0 0.25rem; width: 100%; height: 3rem; font-size: 1rem; font-variation-settings: 'wght' 500; color: var(--color-black); text-align: center; border-bottom: 1px solid var(--color-gray); transition: background-color 0.5s ease, border-color 0.5s ease; }
article.login section input:focus { background-color: rgba(245, 245, 245, 1); border-color: var(--color-black); }
article.login section input:nth-of-type(2) { margin: 0.5rem auto 2rem; }


article.login section.login { padding: 15vh 0 0 0; background: no-repeat 50% 0 / auto 3.25rem url('/assets/img/sys_img_logo_c.svg'); animation: start 0.5s ease 1 forwards; }
article.login section.login button { width: 100%; height: 3rem; font-size: 1.1rem; font-variation-settings: 'wght' 700; color: rgba(255, 255, 255, 1); box-sizing: border-box; background: var(--color-btn); transition: color 0.5s ease, background-color 0.5s ease; }
article.login section.login button.enable { color: rgba(255, 255, 255, 1); background-color: var(--color-black); }
article.login section.login h6 { margin: 4rem auto 0; width: 100%; font-size: 0.9rem; font-variation-settings: 'wght' 300; color: var(--color-gray); text-align: center; }
@keyframes start {
    0%      { opacity: 0; transform: translateY(3rem); background-size: auto 0.1rem; }
    100%    { opacity: 1; transform: translateY(0); background-size: auto 3.25rem; }
}



article.login section.free { margin: 1rem auto 0; height: 5rem; overflow: hidden; animation: expand 1s ease 1 forwards; }
article.login section.free a { display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 100%; height: 4rem; font-size: 1.2rem; font-variation-settings: 'wght' 700; color: rgba(255, 255, 255, 1); animation: colorful 12s linear infinite alternate; }
@keyframes expand {
    0%      { opacity: 0; clip-path: polygon(49% 0, 51% 0, 51% 100%, 49% 100%); }
    45%     { opacity: 0; clip-path: polygon(49% 0, 51% 0, 51% 100%, 49% 100%); }
    100%    { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes colorful {
    0%      { font-variation-settings: 'wght' 700; background-color: rgba(200, 11, 11, 1); letter-spacing: 0; }
    25%     { font-variation-settings: 'wght' 900; background-color: rgb(200, 115, 11); letter-spacing: 0.1rem; }
    50%     { font-variation-settings: 'wght' 700; background-color: rgb(11, 200, 52); letter-spacing: 0; }
    75%     { font-variation-settings: 'wght' 900; background-color: rgb(96, 11, 200); letter-spacing: 0.1rem; }
    100%    { font-variation-settings: 'wght' 700; background-color: rgb(200, 11, 146); letter-spacing: 0; }
}





/*  PC VERSION  */
@media (min-width: 800px) {
    article.login section { width: 28rem; }
}