html{width:100%; height:100vh;}
body{width:100%; height:100vh;overflow:hidden;}

@keyframes AnimationName{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

/* input */
input{height:3rem; border:1px solid #ccc; padding:0.8rem; font-size:1rem; font-family:"NotoKr_R"; -webkit-appearance:none; -webkit-border-radius:0;}
input:focus{outline:none;}
input[type="text"]{width:100%;}
input::placeholder{color:#bbb; opacity:1; font-size:1rem; font-family:"NotoKr_R";}
input::-webkit-input-placeholder{color:#bbb; font-size:1rem; font-family:"NotoKr_R";}
input:-ms-input-placeholder{color:#bbb; font-size:1rem; font-family:"NotoKr_R";}
input:-mos-input-placeholder{color:#bbb; font-size:1rem; font-family:"NotoKr_R";}
input:disabled{border:0; background:#f7f7f7; color:#bbb; opacity:1;}
label.lab{display:inline-block; position:relative; padding-left:1.8rem; cursor:pointer; font-size:1rem;color:#222222;}
label.lab input[type="checkbox"],
label.lab input[type="radio"]{position:absolute; z-index:-1; opacity:0;}
label.lab div.lab_indicator{position:absolute; top:50%; left:0; transform:translateY(-50%); width:20px; height:20px; background:#e5e5e5;}
label.lab:hover input ~ div.lab_indicator,
label.lab input:focus ~ div.lab_indicator{background:#ccc;}
label.lab input:checked ~ div.lab_indicator{background:#901D37;}
label.lab input:disabled ~ div.lab_indicator{border:0; background:#f7f7f7; color:#bbb; pointer-events:none;}
label.lab div.lab_indicator:after{content:""; position:absolute; display:none;}
label.lab input:checked ~ div.lab_indicator:after{display:block;}
div.input_Twrap{position:relative;}
div.input_Twrap input ~ .fb:before,
div.input_Twrap input ~ .fb:after{content:""; position:absolute; top:0; left:0; width:0; height:2px; background:#901D37; transition:0.3s;}
div.input_Twrap input ~ .fb:after{top:auto; bottom:0; left:auto; right:0;}
div.input_Twrap input ~ .fb i:before,
div.input_Twrap input ~ .fb i:after{content:""; position:absolute; top:0; left:0; width:2px; height:0; background:#901D37; transition:0.4s;}
div.input_Twrap input ~ .fb i:after{left:auto; right:0; top:auto; bottom:0;}
div.input_Twrap input:focus ~ .fb:before,
div.input_Twrap input:focus ~ .fb:after{width:100%; transition:0.3s;}
div.input_Twrap input:focus ~ .fb i:before,
div.input_Twrap input:focus ~ .fb i:after{height:100%; transition:0.4s;}

/* input [checkbox] */
label.lab_check div.lab_indicator:after{left:8px; top:4px; width:3px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
label.lab_check input:disabled ~ div.lab_indicator:after{border-color:#7b7b7b;}

/* input [radio] */
label.lab_radio div.lab_indicator:after{left:8px; top:4px; width:3px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
label.lab_radio input:disabled ~ div.lab_indicator:after{border-color:#7b7b7b;}

/* select */
select{height:3rem; padding:0.8rem; font-size:1rem; font-family:"NotoKr_R"; padding-right:3rem; border:1px solid #ccc; -webkit-border-radius:0; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:url("../img/select_arrow.png") 100% center no-repeat; background-size:auto 20%;}
select::-ms-expand{display:none;}

div.login_wrap{width:100%; height:100%; }
div.login_wrap div.login-inner {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
div.login_wrap div.logo_wrap div.logo{width:100%; height:6rem; background:url("/nGsmart/img/teacher/login/logo2.png") center no-repeat;}
div.login_wrap div.login_b{padding:2rem;width:32rem;height:auto;margin:0 auto;text-align:center;background: #fff;box-shadow:0 5px 20px 0 rgba(0,0,0,0.2);border-radius: 10px;}
div.login_wrap div.login_b div.login{width:100%; height:auto; background:#fff;}
div.login_wrap div.login_b div.login ul li{width:100%; height:60px; padding:10px 0;border:1px solid #ddd;margin-bottom: 1rem;}
div.login_wrap div.login_b div.login ul li span{display:inline-block; padding:10px 0;}
div.login_wrap div.login_b div.login ul li input{display:inline-block; width:92%; height:100%; border:none; padding:0 5px;}
div.login_wrap div.login_b div.login ul li input::-webkit-input-placeholder{color:#aaa;}
div.login_wrap div.login_b div.login ul li input::-moz-placeholder{color:#aaa;}
div.login_wrap div.login_b div.login ul li input:-ms-input-placeholder{color:#aaa;}
div.login_wrap div.login_b div.login ul li input:-moz-placeholder{color:#aaa;}
div.login_wrap div.login_b div.check{width:100%; height:auto; margin:30px 0; color:#fff; letter-spacing:0.5px;}
div.login_wrap div.login_b a.login_btn{display:block; width:100%; height:3.75rem; line-height:3.75rem; background:#00863e; font-size:1.25rem; color:#fff;text-transform:uppercase;transition:0.3s; -webkit-transition:0.3s; -o-transition:0.3s; -ms-transition:0.3s; -moz-transition:0.3s;}
div.login_wrap div.login_b a.login_btn:hover{box-shadow:0 5px 15px rgba(0, 0, 0, 0.2);}
div.login_wrap div.login_b div.btn_02 a{display:inline-block;width:49%;height:3rem;line-height:3rem;margin-top:0.5rem;background: transparent;color: #444961;font-size:1rem;border: 1px solid #444961;}
div.login_wrap p.copy{width:100%; height:auto; text-align:center; color:rgba(255, 255, 255, 0.5); margin-top:3rem; font-size:0.8rem;}
div.login_wrap div.login-bg01{width:100%;height:100vh;background:#444961;z-index: -1;position: relative;}
/* div.login_wrap div.login-bg02{width:100%;height:100vh;background:url("/nGsmart/img/teacher/login/login_bg.jpg") center no-repeat;background-size: cover;position: absolute;top: 0;left: 0;z-index: -2;} */