/* PC - 인풋 css */
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 체크박스 */
.checks {

}
.checks input[type="checkbox"] {
	display: none;
}
.checks input[type="checkbox"] + label {
	position: relative;
	cursor: pointer;
	width: 18px;
	height: 18px;
}
.checks span {
	color: #fff; font-size: 1.4rem; margin-left: 1rem; vertical-align: middle;
}
.checks input[type="checkbox"] + label::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	vertical-align: middle;
}
.checks input[type="checkbox"] + label::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 5px;
	transform: rotate(-45deg) translateY(-20%);
	width: 7px;
	height: 0.3rem;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	opacity: 0;
}
/* 체크박스 - 흰배경 */
.checks.fill input[type="checkbox"] + label::before {
	background: #fff;
	border: 2px solid transparent;
}
.checks.fill input[type="checkbox"] + label:hover::before {
	border-color: #9e9e9e;
}
/* 체크박스 - 테두리 */
.checks.l_stroke input[type="checkbox"] + label::before {
	border: 2px solid #7786FD;
	background: rgba(255, 255, 255, 0.2);
	border-radius:0.3rem;
}
.checks.d_stroke input[type="checkbox"] + label::before {
	border: 2px solid #666;
}

.checks input[type="checkbox"]:checked + label::before {
	background: #7786FD;
	border-color: #7786FD;
}
.checks input[type="checkbox"]:checked + label::after {
	opacity: 1;
}

/* 체크박스 - 원형테두리 */
.checks.roune_l_stroke input[type="checkbox"] + label::before { width: 1.6rem; height: 1.6rem; }
.checks.roune_l_stroke input[type="checkbox"] + label::after { top: 0.8rem; left: 0.6rem; }
.checks.roune_l_stroke input[type="checkbox"] + label::before {	border: 2px solid #8d8d8d;	border-radius: 5rem; }
.checks.roune_l_stroke input[type="checkbox"]:checked + label::before {	background: #3f3f3f; }

/* radio */
.radio_wrap > input[type="radio"] { display: none; }
.radio_wrap > input[type="radio"] + label { position: relative; padding-left: 2.5rem; color: #FFF; font-size: 1.4rem; }
.radio_wrap > input[type="radio"] + label::before,
.radio_wrap > input[type="radio"] + label::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); box-sizing: border-box; background: rgba(252,252,252,0.2); }
.radio_wrap > input[type="radio"] + label::before { left: 0; width: 18px; height: 18px; border-radius: 100%; border: 2px solid #7786FD; }
.radio_wrap > input[type="radio"] + label::after { left: 0.47rem; width: 10px; height: 10px; border-radius: 100%; background: rgba(252,252,252,0.2); opacity: 0; }
.radio_wrap > input[type="radio"]:checked + label { color: #FFF; }
.radio_wrap > input[type="radio"]:checked + label::before { border: 6px solid #7786FD; }
.radio_wrap > input[type="radio"]:checked + label::after { opacity: 1; background: rgba(252,252,252,1); }
.radio_wrap > input[type="radio"]:disabled + label { color: #999; }
.radio_wrap > input[type="radio"]:disabled + label::before { background: #7786FD; border-color: #7786FD; }
.radio_wrap > input[type="radio"]:disabled + label::after { opacity: 0; }
.radio_wrap > input[type="radio"]:checked:disabled + label::before { background: #fff; border-color: #7786FD; }
.radio_wrap > input[type="radio"]:checked:disabled + label::after { opacity: 1; background: rgba(252,252,252,0.2); }

/* 기본 인풋 */
input[type="text"] {
	appearance: none; -webkit-appearance: none; width: 100% /*calc(100% - 44px)*/; height: 4.6rem; outline: none; color: #444; transition: all 0.3s;
	font-size: 1.6rem; padding: 0 22px; border-radius: 0.5rem; border: 1px solid #fff; background: rgba(255, 255, 255, 0.8); text-align: left;
}
input[type="password"] {
	appearance: none; -webkit-appearance: none; width: 100% /*calc(100% - 44px)*/; height: 4.6rem; outline: none; color: #fff; transition: all 0.3s;
	font-size: 1.6rem; padding: 0 22px; border-radius: 0.5rem; border: 1px solid #fff; background: rgba(255, 255, 255, 0.2); text-align: left;
}
input[type="number"] {
	appearance: none; -webkit-appearance: none; width: 100% /*calc(100% - 44px)*/; height: 4.6rem; outline: none; color: #444; transition: all 0.3s;
	font-size: 1.6rem; padding: 0 22px; border-radius: 0.5rem; border: 1px solid #fff; background: rgba(255, 255, 255, 0.8); -moz-appearance: textfield; text-align: right;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
div.login_wrap input[type="text"] { background: rgba(255, 255, 255, 0.2); color: #fff; }
textarea {
	appearance: none; -webkit-appearance: none; width: 100%; outline: none; color: #444; transition: all 0.3s; resize:none;
	font-size: 1.6rem; padding: 1.3rem; border-radius: 0.5rem; border: 1px solid #fff; background: rgba(255, 255, 255, 0.8);
}


input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
textarea:focus {
  border-color: #929EF5;
}
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="number"]:disabled,
textarea:disabled {
  background: rgba(255, 255, 255, 0.8);
}
input[type="text"]:read-only,
input[type="password"]:read-only,
input[type="tel"]:read-only,
input[type="date"]:read-only,
input[type="time"]:read-only,
input[type="number"]:read-only,
textarea:read-only {
  border-color: rgba(0,0,0,0); background: rgba(34, 34, 42, 1); color: #fff;
}
input[type="text"]:read-only:focus,
input[type="password"]:read-only:focus,
input[type="tel"]:read-only:focus,
input[type="date"]:read-only:focus,
input[type="time"]:read-only,
input[type="number"]:read-only:focus,
textarea:read-only:focus {
  box-shadow: none;
}
input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input[type="date"]::placeholder,
input[type="time"]::placeholder,
input[type="number"]::placeholder
textarea::placeholder {
  color: #444;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-transition: background-color 9999s ease-out;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.6) inset !important;
    -webkit-text-fill-color: #444 !important;
}

/* 토글2(체크박스) */
.switch_wrap { position: relative; width: 10.5rem; }
.switch_wrap > input[type="checkbox"] { display: none; }
.switch_wrap > input[type="checkbox"] + label { display: flex; align-items: center; color: #fff; font-size: 1.4rem; cursor: pointer; white-space: nowrap; }
.switch_wrap > input[type="checkbox"] + label > span.toggle_design {
	position: relative; flex: 0 0 10rem; height: 2.8rem; border-radius: 3rem; background: rgba(150,153,174,0.9); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); }
.switch_wrap > input[type="checkbox"] + label > span.toggle_design::before {
	content: ''; position: absolute; top: 50%; right: 4.4rem; transform: translateY(-50%); width: 5.5rem; height: 2.6rem;
	background: #5063F7; border: 1px solid rgba(119, 134, 253, 0.2); border-radius: 3rem; transition: right 0.3s; box-shadow: 0 0 0.4rem rgba(0,0,0,0.5); }
.switch_wrap > input[type="checkbox"]:checked + label > span.toggle_design { }
.switch_wrap > input[type="checkbox"]:checked + label > span.toggle_design::before { right: -0.3rem; }
.switch_wrap > label::after { content: attr(data-after); z-index: 10;
	position: absolute; top: 50%; left: 4.8rem; transform: translate(50%,-50%); color: #fff; font-size: 1.3rem; line-height: 1.2rem; white-space: nowrap; opacity: 0.8; }
.switch_wrap > label::before { content: attr(data-before); z-index: 10;
	position: absolute; top: 50%; left: 0rem; transform: translate(50%,-50%); color: #fff; font-size: 1.3rem; line-height: 1.2rem; white-space: nowrap; opacity: 1; }
.switch_wrap > input[type="checkbox"]:checked + label::after { opacity: 1; }
.switch_wrap > input[type="checkbox"]:checked + label::before { opacity: 0.8; }

/* 토글(체크박스) */
.toggle_wrap { position: relative; width: fit-content;}
.toggle_wrap > input[type="checkbox"] { display: none; }
.toggle_wrap > input[type="checkbox"] + label { display: flex; align-items: center; color: #fff; font-size: 1.4rem; cursor: pointer; white-space: nowrap; }
.toggle_wrap > input[type="checkbox"] + label > span.toggle_design {
	position: relative; flex: 0 0 3.2rem; height: 1.8rem; border-radius: 1.8rem; background: rgba(255, 255, 255, 0.2); border: 1px solid #7786FD; }
.toggle_wrap > input[type="checkbox"] + label > span.toggle_design::before {
  content: ''; position: absolute; top: 50%; right: 1.6rem; transform: translateY(-50%); width: 1.4rem; height: 1.4rem; background: #5063F7; border: 1px solid rgba(119, 134, 253, 0.2); border-radius: 100%;
  transition: right 0.3s; }
.toggle_wrap > input[type="checkbox"]:checked + label { /*color: #444;*/ }
.toggle_wrap > input[type="checkbox"]:checked + label > span.toggle_design { background: #5063F7; border-color: #7786FD; }
.toggle_wrap > input[type="checkbox"]:checked + label > span.toggle_design::before { right: 0.2rem; background: #fff; border-color: #fff;}
.toggle_wrap > label::after { content: attr(data-after); position: absolute; top: 50%; left: 3.5rem; transform: translate(50%,-50%); color: #fff; font-size: 1.6rem; line-height: 1.2rem; white-space: nowrap; }

/* wrap 아이콘 있는 인풋 */
div.wrap input[type="text"] { width: 100% /*calc(100% - 87px)*/; padding-left: 65px; }
div.wrap input[type="password"] { width: 100% /*calc(100% - 87px)*/; padding-left: 65px; }
div.wrap input[type="number"] { width: 100% /*calc(100% - 87px)*/; padding-left: 65px; }

/* 셀렉트박스 */
div.select_wrap { position: relative; }
div.select_wrap::before {
  content: ''; position: absolute; top: 50%; right: 3rem; transform: translateY(-50%) rotate(0); width: 2.2rem; height: 2.6rem; background: #fff;
  mask: url('../1_image/PC/04_icon/ico_down.svg') no-repeat center center; mask-size: cover;
  -webkit-mask: url('../1_image/PC/04_icon/ico_down.svg') no-repeat center center; -webkit-mask-size: cover; pointer-events: none;
}
div.select_wrap.active::before { transform: translateY(-50%) rotate(180deg); background: #929EF5; }
.select_wrap > input[type="text"] { cursor: default; width:  100% /*calc(100% - 87px)*/; padding-right: 65px; }
.select_wrap > input[type="text"]:read-only { border-color: rgba(255,255,255,0.8); color: #fff; }
/* 셀렉트 박스 디자인 */
ul.select_list {
	position: absolute; top: calc(100% + 0.5rem); left: 0; width: 100%; max-height: 20rem; outline: none; color: #676673;
	background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: 0.5rem; border: 1px solid #fff; box-shadow: 0 0 0.5rem rgba(0,0,0,0.6);
	overflow-x: hidden; overflow-y: overlay; display: none; z-index: 10;
}
ul.select_list > li.select_items { font-size: 1.6rem; line-height: 5.4rem; padding-left: 2rem; cursor: pointer; text-align: left; }
ul.select_list > li.select_items:hover { background: rgba(80, 99, 247, 0.4); color: #fff; }
ul.select_list > li.select_items.selected { background: rgba(80, 99, 247, 0.8); font-weight: 500; color: #fff; }
ul.select_list > li.select_items.disable { color: #BDBDBD; font-weight: 300; cursor: not-allowed; }
div.select_wrap.active > ul.select_list { display: block; }



/* PC - 인풋 css END */