@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap&subset=korean');
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: 'Nanum Gothic', sans-serif;
  box-sizing: border-box;
}

body{
  min-height: 100vh;
  background-image: linear-gradient(120deg,#3498db,#8e44ad);
}

.login-form{
  width: 360px;
  background: #f1f1f1;
  height: 580px;
  padding: 80px 40px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.login-form h1{
  text-align: center;
  margin-bottom:35px;
}

.chkb{
  position: relative;
  margin: 30px 0;
}
.chkb label{
	font-size:18px;
	color:#adadad;
}
.chkb input[type=checkbox]{
	width:20px;
	height:20px;
	vertical-align:middle;
}

.txtb{
  border-bottom: 2px solid #adadad;
  position: relative;
  margin: 30px 0;
}

.txtb input{
  font-size: 15px;
  color: #333;
  border: none;
  width: 100%;
  outline: none;
  background: none;
  padding: 0 5px;
  height: 40px;
}

.txtb span::before{
  content: attr(data-placeholder);
  position: absolute;
  top: 50%;
  left: 5px;
  color: #adadad;
  transform: translateY(-50%);
  z-index: -1;
  transition: .5s;
}

.txtb span::after{
  	position: absolute;
  	content: '';
	left:0;
	bottom:-2px;
  	width: 0%;
  	height: 2px;
  	background: linear-gradient(120deg,#3498db,#8e44ad);
  	transition: .5s;
}

.focus + span::before{
	top: -5px;
}
.focus + span::after{
  width: 100%;
}

.logbtn{
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  background: linear-gradient(120deg,#3498db,#8e44ad,#3498db);
  background-size: 200%;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: .5s;
}

.logbtn:hover{
  background-position: right;
}

.bottom-text{
  margin-top: 60px;
  text-align: center;
  font-size: 13px;
}

.btnOAuth{width:100%;}

.chgUserArea{height:40px; line-height:40px;}
.chgUserArea ul{list-style:none;}
.chgUserArea ul:after{content:""; clear:both; display:none;}
.chgUserArea li{float:left; width:50%; list-style:none; text-align:center; border:1px solid #4489D3; color:#4489D3; cursor:pointer;}
.chgUserArea li.selected{background:#4489D3; color:#ffffff;}

.no_data{width:80%;}