@charset "UTF-8";

#wrapper {height:100vh; background-image:url(/images/Login/back.svg); background-repeat:no-repeat; background-position:center bottom; background-size:cover;}
#wrapper > #header {height:74px; background-color:var(--color-main); background-repeat:no-repeat; background-position:34.6px center; background-size:277.5px;}

#wrapper > #main > #login-box {position:relative; box-sizing:border-box; width:508px; height:585px; margin:188px auto 0; padding:99px 40px 50px; background-color:rgba(255,255,255,0.5); border-radius:30px; box-shadow:0 10px 30px 0 rgba(102,112,223,0.24);}
#login-box > .login-box-icon {position:absolute; z-index:1; top:-55px; left:calc(50% - 55px); width:110px; height:110px; background-color:#fff; border-radius:55px; box-shadow:0 3px 6px 0 rgba(0,0,0,0.16); background-image:url(/images/logo/logo.png); background-repeat:no-repeat; background-position:center center; background-size:50px;}
#login-box > h2 {text-align:center; line-height:27px; font-size:23px; font-weight:500; color:#9e9e9e;}
#login-box > h1 {margin:6px 0 55px; text-align:center; line-height:57px; font-size:39px; font-weight:500; color:#656565;}
#login-box > .login-box-input {position:relative; height:49px; margin-bottom:22px; border-bottom:solid 1px #d8d8d8;}
#login-box > .login-box-input > div {position:absolute; z-index:1; top:9px; left:3px; width:30px; height:30px; background-repeat:no-repeat; background-position:center center; background-size:contain;}
#login-box > .login-box-input.login-box-id > div {background-image:url(/images/Login/icon-id.svg);}
#login-box > .login-box-input.login-box-password > div {background-image:url(/images/Login/icon-password.svg);}
#login-box > .login-box-input > input {box-sizing:border-box; width:100%; height:100%; padding-left:42px; line-height:27px; font-size:18px;}
#login-box > .login-box-option {display:flex; justify-content:space-between; align-items:center; height:24px;}
#login-box > .login-box-option > label {display:flex; align-items:center;}
#login-box > .login-box-option > label > input {box-sizing:border-box; width:22px; height:22px; border:solid 1px #808080; border-radius:4px; background-repeat:no-repeat; background-position:center center; background-size:contain;}
#login-box > .login-box-option > label > input:checked {border:unset; background-image:url(/images/Login/icon-checked.svg);}
#login-box > .login-box-option > label > div {margin-left:6px; line-height:24px; color:#808080;}
#login-box > .login-box-option > button {color:var(--color-sub); text-decoration:underline; text-underline-offset:4px;}
#login-box > .login-box-submit {position:absolute; right:40px; bottom:50px; left:40px; background-color:var(--color-main); border-radius:8px; line-height:64px; color:#fff;}