/* layout ---------- */
.page-login > div#__nuxt{display:table; width:100%; height:100%; padding-top:30px; padding-bottom:30px}


.page-login > div#__nuxt::before{content:''; display:block; width:100%; height:100%; position:fixed; top:0; bottom:0; left:0; right:0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 70%)}
.page-login main{display:table-cell; vertical-align:middle; margin:0 auto; position:relative}


.bg-img{position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1}
.bg-img .bg{background:no-repeat center / cover; position:fixed; top:0; left:0; width:100%; height:100%}
.bg-img .bg01{background-image:url('/images/visual_login_01@2x.jpg')}
.bg-img .bg02{background-image:url('/images/visual_login_02@2x.jpg')}
.bg-img .bg03{background-image:url('/images/visual_login_03@2x.jpg')}



.login-wrap{padding:20px; margin:0 auto; max-width:514px}
@media(min-width:576px){
  .page-login > div#__nuxt::before{background:rgba(255,255,255,0.5)}
  .login-wrap{background-color:#FFF; border-radius:var(--unit-300); padding:50px; box-shadow:0 4px 30px rgba(0, 0, 0, 0.05)}
}


/* language ---------- */
.btn-lang-login{position:relative; margin-bottom:16px; text-align:right}
.btn-lang-login .lang-text{font-size:13px; color:#777; padding:7px 7px 7px 12px; gap:0; height:38px; border-radius:6px; border:0; box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07)}
.btn-lang-login .lang-text .ico{opacity:0.7}
/* list */
.btn-lang-login .lang-list{position:absolute; top:44px; right:0; padding:10px 0; width:160px; background:#FFF; box-shadow:0 1px 8px rgba(0,0,0,0.1); list-style:none; border-radius:10px; transition:all 0.1s ease-in; z-index:1; min-width:120px; max-width:280px}
.btn-lang-login .lang-list li a{display:block; padding:6px 15px; text-decoration:none; font-size:13px; color:#777; text-align:left}
.btn-lang-login .lang-list li:hover a{color:var(--color-primary)}
/* active */
.btn-lang-login .lang-text.active .ico::before{transform:rotate(180deg)}
/* .btn-lang-login .lang-text.active .lang-list{display:block} */


/* form ---------- */
.login-form{text-align:center}
.login-form .login-title{font-size:22px; font-weight:600; line-height:1.3; display:flex; flex-direction:column; align-items:center; gap:4px}
.login-form .login-title::before{content:''; display:block; width:56px; height:56px; border-radius:8px; background:url('/images/logo.png') no-repeat center / contain; animation:rotating 4s linear infinite}
@keyframes rotating {
  from {transform: rotate(0deg) }
  to {transform: rotate(360deg) }
}

.login-form form{margin-top:24px}
.login-form form .input{margin-bottom:10px; height:54px; background-color:#FFF; box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07)}
.login-form .input .ico{position:absolute}
.login-form .input-field{height:100%}
.id-check{margin-top:16px}
.id-check .form-check-label .cb-label{font-size:15px}
.id-check .form-check-label .cb-label::after{display:none}
.id-check .form-check-input[type=checkbox]+.form-check-label .check-ico{border-radius:50%}
.input-alert{text-align:left; font-size:14px; color:var(--color-emphasis); margin-top:8px}
.btn-login{margin-top:16px; width:100%; height:54px}

/* link */
.login-link{margin-top:20px; font-size:0}
.login-link a{color:var(--color-gray); font-size:13px; padding:2px 10px; display:inline-block; position:relative}
.login-link a:hover{color:var(--color-gray-dark)}

/* copy */
.copy{font-size:12px; line-height:1.7; color:#BBB; margin-top:24px}
.copy .link{padding:2px 0}
.copy .link a:not(:last-child){margin-right:10px}
.copy .link a:hover{color:var(--color-gray-light)}

@media(min-width:576px){
  .login-form{margin-top:0}
  .login-form .login-title{font-size:26px}
  .login-form .login-title::before{width:64px; height:64px}
  .login-form form .input{box-shadow:0 0 0 1px rgba(0, 0, 0, 0.1)}
}