@charset "UTF-8";

body { background:url('/$res/img/bg.jpg') center center no-repeat; background-size:cover; font-family:'Noto Sans Korean', san-serif; }

#ly-Layout { display:flex; flex-direction:column; align-items:center; justify-content:center; }

#ly-Login { width:100%; min-width:280px; max-width:420px; padding:40px; background-color:rgba(255, 255, 255, .75); border-radius:8px; transition:all ease .5s; transition-property:background; box-shadow:0 0 5px white; }
#ly-Login:focus-within,
#ly-Login:hover { background-color:white; }
#ly-Login h1 { margin-bottom:30px; text-align:center; }
#ly-Login h1:empty { display:none; }
#ly-Login h1 img { height:50px; }
#ly-Login fieldset { border:none; }
#ly-Login div.input input { width:100%; height:50px; padding-left:15px; padding-right:15px; color:black; font-weight:500; background-color:transparent; border:none; border-bottom:1px solid rgba(0, 0, 0, .1); transition:all ease .2s; transition-property:border, background; }
#ly-Login div.input input:focus { border-color:rgba(255, 0, 0, .2); background-color:rgba(0, 0, 0, .025);  }
#ly-Login p.error { margin-top:10px; color:red; font-size:.8125rem; }
#ly-Login p.error:empty { display:none; }
#ly-Login div.button { margin-top:30px; text-align:center; }
#ly-Login div.button div button { width:100%; height:50px; padding-left:20px; padding-right:20px; text-shadow:0 0 4px #000; background-color:transparent; cursor:pointer; transition:all ease .2s; transition-property:border, background, color; }
#ly-Login div.button div.login button { border:none; border-radius:4px; background-color:rgba(0, 0, 0, .35); font-size:1.125rem; font-weight:700; color:#fff; }
#ly-Login div.button div.login button:focus,
#ly-Login div.button div.login button:hover { border-color:rgba(181, 68, 66, .8); background-color:rgba(181, 68, 66, .8); color:#fff; }
#ly-Login + p.version { margin-top:15px; font-size:.8125rem; font-weight:700; color:rgba(0, 0, 0, .5); }