*{
	margin:0;
	padding:0;
	border:0;
}

.login-body .login-container .login-card {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	float: left;
	width: 50%;
	height: 100vh;
	text-align: center;
	background-color: #fff
}

.login-body .login-container .login-card img {
	vertical-align: bottom;
	width: 71%
}

@media (max-width:1000px) {
	.login-body .login-container .login-card {
		display: none
	}
}

.login-body .login-container .login-info {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	float: right;
	width: 50%;
	height: 100vh;
	background-image: url(/assets/aionbook_theme/images/member/wave_login.png);
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100% 95%
}

@media (max-width:1000px) {
	.login-body .login-container .login-info {
		min-width: auto;
		width: 100%;
		background-image: none
	}
}

.login-box {
	width: 432px;
	padding: 48px;
	border-radius: 16px;
	opacity: 1;
	background: #fff;
	box-shadow: 0 0 20px rgba(19,24,48,.1)
}

.login-title {
	color: #00f;
	letter-spacing: 0;
	font: normal 700 32px/43px Roboto;
	letter-spacing:0;
	color: #2643ff;
	opacity: 1;
	margin-bottom: 32px
}

.login-title img {
	vertical-align: bottom;
	width: auto;
	height: 40px
}

.login-desc {
	margin-bottom: 32px;
	font: normal 500;
	letter-spacing: 0;
	color: #242e64;
	opacity: 1
}

#in-label {
	font-family: Noto Sans CJK KR
}

.btn {
	display: block;
	text-align: center;
	color: #fff;
	line-height: 1.5;
	width: auto;
	height: auto;
	border-style: none;
	background: #394dd1 0 0 no-repeat;
	border-radius: 4px;
	opacity: 1;
	vertical-align: middle;
}
.btn:active,.btn:focus {
	outline-color: #dcdfee
}

.btn-fill-accent {
	background:
	#394dd1;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff
}
.btn-fill-accent:hover:not([disabled]) {
	background: #293aba;
	box-shadow: 0 1px 4px 0 rgba(41,58,186,.2);
	color: #fff;
	cursor: pointer
}

.btn-fill-dark {
	background: #242e64;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff
}
.btn-fill-dark:hover:not([disabled]) {
	background: #5f6894;
	box-shadow: 0 1px 4px 0 rgba(19,24,48,.2);
	cursor: pointer
}
.btn-fill-dark:disabled {
	background: #dcdfee 0 0 no-repeat padding-box;
	color: #a2a7c1
}

.btn-fill-pink:disabled {
	background: #dcdfee;
	color: #a2a7c1
}
.btn-fill-pink:disabled,.btn-fill-pink:enabled {
	border-radius: 4px;
	width: 100%;
	padding: 11px 0;
	border: 1px solid transparent
}
.btn-fill-pink:enabled {
	background: #d63381;
	color: #fff
}
.btn-fill-pink:enabled:hover {
	background: #d2006b;
	cursor: pointer
}

.btn-fill-purple:disabled {
	background: #dcdfee;
	color: #a2a7c1
}
.btn-fill-purple:disabled,.btn-fill-purple:enabled {
	border-radius: 4px;
	width: 100%;
	padding: 11px 0;
	border: 1px solid transparent
}
.btn-fill-purple:enabled {
	background: #96005a;
	color: #fff
}
.btn-fill-purple:enabled:hover { 
	background: #3e002b;
	cursor: pointer
}

.btn-login {
	width: 100%;
	height: 48px;
	padding: 0 20px 0 16px;
	font-size: 1rem
}

.id-field,.password-field,.name-field {
	margin-bottom: 24px
}

.signup-button {
	display: block;
	width: 100%;
	text-align: center;
	font: normal normal 400 16px/1.5 Noto Sans CJK KR;
	letter-spacing: 0;
	color: #394dd1;
	opacity: 1;
	background: #fff;
	border: 1px solid #394dd1;
	border-radius: 4px;
	line-height: 48px;
	padding: 0 16px;
	font-size: 1rem
}

.form-label-group {
	position: relative;
	margin-bottom: 1rem
}
.form-label-group>input,.form-label-group>label {
	height: 3.125rem;
	padding: .75rem
}
.form-label-group>label {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	margin-bottom: 0;
	line-height: 1.5;
	color: #495057;
	pointer-events: none;
	cursor: text;
	border: 1px solid transparent;
	border-radius: .25rem;
	transition: all .1s ease-in-out
}
.form-label-group input::-webkit-input-placeholder { 
	color: transparent
}
.form-label-group input:-ms-input-placeholder {
	color: transparent
}
.form-label-group input::placeholder {
	color: transparent
}
.form-label-group:hover #in-label {
	color: #394dd1
}
.form-label-group input:not(:-ms-input-placeholder) {
	padding-top: 1.25rem;
	padding-bottom: .25rem
}
.form-label-group input:not(:placeholder-shown) {
	padding-top: 1.25rem;
	padding-bottom: .25rem
}
.form-label-group input:not(:-ms-input-placeholder)~label {
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: 12px;
	color: #777
}
.form-label-group input:not(:placeholder-shown)~label {
	padding-top: .25rem;
	padding-bottom: .25rem;
	font-size: 12px;
	color: #777
}

.input-self:read-only[read-only=false]:hover {
	border-bottom: 1px solid #394dd1;
	opacity: 1
}
.input-self:read-only[read-only=false]:focus {
	outline: none;
	background: #fff 0 0 no-repeat padding-box;
	border-radius: 4px;
	border-style: none;
	border-bottom: 1px solid #394dd1;
	opacity: 1
}
.input-self {
	padding: 12px 16px;
	background: #f5f6ff 0 0 no-repeat padding-box;
	border-radius: 4px;
	width: 100%;
	height: 48px;
	text-align: left;
	font: normal normal normal 16px/28px Noto Sans CJK KR;
	letter-spacing: 0;
	color: #242e64;
	opacity: 1;
	transition: all .2s ease-in-out;
	border-bottom: 1px solid #dcdfee
}
.input-self:enabled:hover {
	border-bottom: 1px solid #394dd1
}
.input-self:disabled:hover {
	cursor: not-allowed
}
.input-self::-webkit-input-placeholder {
	color:#9196b1
}
.input-self:-ms-input-placeholder {
	color:#9196b1
}
.input-self::placeholder {
	color:#9196b1
}

.chkIdPw div {
	color: #666666;
	font-size: 15px;
}

input[type="checkbox"].commonCheckbox {
	border: 1px solid #cccccc;
	width: 18px;
	height: 18px; 
  	background: #fff;
	/*-webkit-appearance:none;*/
	line-height: 25px;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: 0;
}
input[type="checkbox"].commonCheckbox:checked {
  background: #045FB4;
}
input[type="checkbox"].commonCheckbox:hover {
  filter: brightness(90%);
}
input[type="checkbox"].commonCheckbox:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
input[type="checkbox"].commonCheckbox:after {
  content: '';
  position: relative;
  left: 30%;
  top: 10%;
  width: 45%;
  height: 65%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}
input[type="checkbox"].commonCheckbox:checked:after {
  display: block;
}
input[type="checkbox"].commonCheckbox:disabled:after {
  border-color: #7b7b7b;
}

.commonRadio { display: inline-block; *display: inline; *zoom: 1; position: relative; padding-left: 25px; margin-right: 10px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* 기본 라디오 버튼 숨기기 */
.commonRadio input[type="radio"] { display: none; }
/* 선택되지 않은 라디오 버튼 스타일 꾸미기 */
.radio_on { width: 20px; height: 20px; background: #ddd; border-radius: 50%; position: absolute; top: 0; left: 0; }
/* 선택된 라디오 버튼 스타일 꾸미기 */
.commonRadio input[type="radio"]:checked + .radio_on { background: #f86480; }
.radio_on:after { content: ""; position: absolute; display: none; }
.commonRadio input[type="radio"]:checked + .radio_on:after { display: block; }
.radio_on:after { width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute; left: 5px; top: 5px; }

.commonInputtext {
	border-radius: 4px;
	height: 48px;
	padding-left: 10px;
}

.commonTextarea {
	border: solid 1px #cccccc; margin-top:15px; outline: none;
	border-radius: 4px;
}

.commonSelect {
	border-radius: 4px;
	height: 48px;
	padding-left: 10px;
}

@media screen and (min-width:0) and (max-width:600px) {
	.login-box {
		width: 100%;
		border: none}
}