/* 공통 */
select,input {
	border:1px solid #dbdbdb;
	width: -webkit-fill-available;
	box-sizing: border-box;
	padding:8px 0 8px 5px;
	font-size:1rem;
}
input[type='text'] {
	border-radius:4px;
	padding:10px 5px;
	font-size:1rem;
}
input[type='text'].dark {
	background:rgba(0,0,0,0.2);
	border-radius:5px;
	border:1px solid rgba(255,255,255,0.3);
	color:#FFF;
	font-size:1rem;
}
textarea {
	background:transparent;
	border-radius:4px;
	border:1px solid rgba(0,0,0,0.2);
	width:100%;
	padding:5px;
	font-family:'Noto Sans KR','Lato','Malgun Gothic',dotum,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
select {
	-webkit-appearance: none;  /* 네이티브 외형 감추기 */
	-moz-appearance: none;
	appearance: none;
	background: url('../img/icon_select_arrowin.png') no-repeat right center;  /* 화살표 모양의 이미지 */
	border-radius:5px;
	box-sizing: border-box;
}
select:hover {
	border:1px solid rgba(0,0,0,0.5);
	transition: all 0.15s ease-in-out;
}





/* @@ 마우스오버시 label 제어 input */
/* form starting stylings ------------------------------- */
.login_input{ 
	position:relative; 
	margin-bottom:35px; 
}
.login_input input{
	font-size:18px;
	padding:10px 10px 10px 5px;
	display:block;
	border:none;
	border-bottom:1px solid #757575;
	background: transparent;
	font-weight: inherit;
	color:rgba(255,255,255,1);
	border-radius:0;
}
.login_input input:focus { outline:none; }

/* LABEL ======================================= */
.login_input label{
	color:#999; 
	font-size:13px;
	font-weight:normal;
	position:absolute;
	pointer-events:none;
	left:0;
	top:10px;
	transition:0.2s ease all; 
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
}

/* active state */
.login_input input:focus ~ label, .login_input input:valid ~ label{
  top:-20px;
  font-size:14px;
  color:#0db7ad;
}

/* BOTTOM BARS ================================= */
.login_input .bar 	{ position:relative; display:block; }
.login_input .bar:before, .login_input .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#0db7ad; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.login_input .bar:before {
  left:50%;
}
.login_input .bar:after {
  right:50%; 
}

/* active state */
.login_input input:focus ~ .bar:before, .login_input input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.login_input .highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.login_input input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.5s ease;
  -moz-animation:inputHighlighter 0.5s ease;
  animation:inputHighlighter 0.5s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
	to{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
	to{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
	to{ width:0; background:transparent; }
}

/* @@라디오박스 */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	input[type=checkbox],
	input[type=radio] {
		--active: #dd5555;
		--active-inner: #fff;
		--focus:1px rgb(175 175 175 / 30%);
		--border: #BBC1E1;
		--border-hover: #dd5555;
		--background: #fff;
		--disabled: #F6F8FF;
		--disabled-inner: #E1E6F9;
		-webkit-appearance: none;
		-moz-appearance: none;
		height: 21px;
		outline: none;
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin: 0;
		cursor: pointer;
		border: 1px solid var(--bc, var(--border));
		background: var(--b, var(--background));
		transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
	}
	input[type=checkbox]:after, input[type=radio]:after {
		content: "";
		display: block;
		left: 0;
		top: 0;
		position: absolute;
		transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
	}
	input[type=checkbox]:checked, input[type=radio]:checked {
		--b: var(--active);
		--bc: var(--active);
		--d-o: .3s;
		--d-t: .6s;
		--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
	}
	input[type=checkbox]:disabled, input[type=radio]:disabled {
		--b: var(--disabled);
		cursor: not-allowed;
		opacity: 0.9;
	}
	input[type=checkbox]:disabled:checked,	input[type=radio]:disabled:checked {
		--b: var(--disabled-inner);
		--bc: var(--border);
	}
	input[type=checkbox]:disabled + label, input[type=radio]:disabled + label {
		cursor: not-allowed;
	}
	input[type=checkbox]:hover:not(:checked):not(:disabled), input[type=radio]:hover:not(:checked):not(:disabled) {
		--bc: var(--border-hover);
	}
	input[type=checkbox]:focus, input[type=radio]:focus {
		box-shadow: 0 0 0 var(--focus);
	}
	input[type=checkbox]:not(.switch), input[type=radio]:not(.switch) {
		width: 21px;
	}
	input[type=checkbox]:not(.switch):after, input[type=radio]:not(.switch):after {
		opacity: var(--o, 0);
	}
	input[type=checkbox]:not(.switch):checked, input[type=radio]:not(.switch):checked {
		--o: 1;
	}
	input[type=checkbox] + label, input[type=radio] + label {
		font-size: 14px;
		line-height: 21px;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
	}

	input[type=checkbox]:not(.switch) {
		border-radius:3px;
	}
	input[type=checkbox]:not(.switch):after {
		width: 5px;
		height: 9px;
		border: 2px solid var(--active-inner);
		border-top: 0;
		border-left: 0;
		left: 6px;
		top: 3px;
		transform: rotate(var(--r, 20deg));
	}
	input[type=checkbox]:not(.switch):checked {
		--r: 43deg;
	}
	input[type=checkbox].switch {
		width: 38px;
		border-radius: 11px;
	}
	input[type=checkbox].switch:after {
		left: 2px;
		top: 2px;
		border-radius: 50%;
		width: 15px;
		height: 15px;
		background: var(--ab, var(--border));
		transform: translateX(var(--x, 0));
	}
	input[type=checkbox].switch:checked {
		--ab: var(--active-inner);
		--x: 17px;
	}
	input[type=checkbox].switch:disabled:not(:checked):after {
		opacity: 0.6;
	}
	input[type=radio] {
		border-radius: 50%;
	}
	input[type=radio]:after {
		width: 19px;
		height: 19px;
		border-radius: 50%;
		background: var(--active-inner);
		opacity: 0;
		transform: scale(var(--s, 0.7));
	}
	input[type=radio]:checked {
		--s: .5;
	}
}
/* @@input-box */
.input_text input[type='text']{
	padding: 15px 20px;
	background: #f2f4f5;
	border-radius: 4px;
	font-family:'Noto Sans KR','Lato','Malgun Gothic',dotum,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.input_textarea textarea{
	width:100%;
	padding: 15px 20px;
	background: #f2f4f5;
	border-radius: 4px;
	font-family:'Noto Sans KR','Lato','Malgun Gothic',dotum,'Helvetica Neue',Helvetica,Arial,sans-serif;
}