@charset "utf-8";

/*------------------------------------*\
	VENDOR - 무료상담신청 레이어 팝업
	- 공용 스크립트(/public/js/jeicommon.js)가 불러오는
	  /views/counsel/online.counsel.html 의 클래스입니다.
	  외부 마크업이므로 클래스 이름을 변경하지 마세요.
	- 공용 common.css 에서 필요한 스타일만 옮겨 왔습니다.
\*------------------------------------*/


/* 레이어 배경 / 컨테이너
   ------------------------------------ */
#mask {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	display: none;
	width: 100%;
	min-height: 100vh;
	background: #000;
	opacity: 0.5;
}

.counsel_layer_bg {
	opacity: 1;
}

.counsel_layer {
	position: fixed;
	top: 50% !important;
	left: 50% !important;
	z-index: 2003 !important;
	display: none;
	transform: translate(-50%, -50%) !important;
}

.pop_layer {
	height: auto;
}


/* 폼 영역
   ------------------------------------ */
.homepage {
	position: relative;
	font-family: var(--font-default);
}

.homepage p {
	margin-bottom: 9px;
	font-size: 12px;
}

.homepage p span {
	color: #e53543;
}

.homepage p img {
	margin-right: 7px;
	vertical-align: middle;
}

/* 명절 연휴 안내 문구 (online.counsel.html 에서 기간 한정으로 출력) */
.noti_vac {
	position: relative;
	top: -10px;
	left: 0;
	padding-left: 15px;
	color: var(--color-gray-1);
	font-size: 14px;
	line-height: 18px;
	text-align: left;
}

.noti_vac span:first-child {
	position: absolute;
	top: 0;
	left: 0;
}


/* 팝업 (20230927 리뉴얼)
   ------------------------------------ */
.pop_rnwl {
	position: relative;
	width: 678px;
	padding: 25px 68px 68px;
	border-radius: 40px;
	background: #fff;
}

.pop_rnwl .tit {
	margin-bottom: 20px;
	color: #1e1e1e;
	font-size: 24px;
	text-align: center;
}

/* 입력 요소 */
.pop_rnwl input[type="text"],
.pop_rnwl input[type="tel"],
.pop_rnwl select,
.pop_rnwl textarea {
	width: 100%;
	max-width: 404px;
	height: 47px;
	margin: 3px 0;
	padding-left: 10px;
	border: 1px solid rgb(0 0 0 / 12%);
	border-radius: 4px;
	font-size: 16px;
}

.pop_rnwl input[type="text"].size_s {
	width: 115px;
}

.pop_rnwl ::placeholder {
	font-size: 16px;
}

/* 라디오 */
label[class^="lbl_"] {
	position: relative;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
}

.lbl_radio {
	margin-right: 14px;
	padding-left: 25px;
}

.lbl_radio::before,
.lbl_radio::after {
	content: "";
	position: absolute;
	top: 50%;
	display: inline-block;
	margin-right: 10px;
	transform: translateY(-50%);
}

.lbl_radio::before {
	left: 4px;
	display: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--color-primary);
}

.lbl_radio::after {
	left: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #e0e0e0;
	border-radius: 50%;
}

.radio_wrap input[type="radio"] {
	display: none;
}

.radio_wrap input[type="radio"]:checked + .lbl_radio::before {
	display: block;
}

.radio_wrap input[type="radio"]:checked + .lbl_radio::after {
	border: 2px solid var(--color-primary);
}

/* 입력 항목 (제목 + 내용) */
.pop_rnwl .sub_tt {
	margin-bottom: 20px;
	padding-bottom: 5px;
	border-bottom: 1px solid #a7b5bc;
	font-size: 20px;
	line-height: 32px;
}

.pop_rnwl .info_wrap li {
	display: flex;
	margin-bottom: 10px;
}

.pop_rnwl .info_wrap li.radio_wrap {
	margin-bottom: 20px;
}

.pop_rnwl .info_wrap li .tt {
	width: 25%;
	padding-top: 16px;
	color: #1e1e1e;
	font-size: 16px;
	font-weight: 500;
}

.online_counsel_wrap.pop_rnwl .info_wrap li.radio_wrap .tt {
	padding-top: 2px;
}

.pop_rnwl .info_wrap li .tt.req::after {
	content: "*";
	display: inline-block;
	margin-left: 5px;
	color: var(--color-primary);
}

.pop_rnwl .info_wrap li .ct {
	position: relative;
	width: 75%;
	font-size: 16px;
}

.pop_rnwl .info_wrap li .ct textarea {
	height: 60px;
	padding-top: 10px;
	resize: vertical;
}

.pop_rnwl .info_desc {
	display: block;
	width: 100%;
	color: var(--color-primary);
	font-size: 12px;
	font-weight: 500;
	text-align: right;
}

/* 개인정보 수집 및 이용 */
.pop_rnwl .counsel_agree_wrap {
	padding: 20px 20px 10px;
	border-radius: 8px;
	background: #f4f7f9;
	cursor: pointer;
}

.pop_rnwl .counsel_agree_wrap h4 {
	display: flex;
	align-items: center;
	padding-bottom: 10px;
	color: #596369;
	font-size: 17px;
}

.pop_rnwl .counsel_agree_wrap h4 img {
	vertical-align: top;
}

.toggle_agree {
	margin-right: 0;
	margin-left: auto;
	padding-right: 20px;
	color: #596369;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.toggle_agree::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 10px;
	background: url("/public/images/common/ico_arrow.svg") no-repeat 50% 36% / 30px;
	transform: rotate(0);
	transform-origin: 50% 60%;
	transition: transform 0.4s;
}

.toggle_agree.open::after {
	transform: rotate(180deg);
}

/* 약관 스크롤 박스 (.toggle_agree 클릭 시 공용 스크립트가 표시) */
.scrollBoxWrap {
	height: 90px;
	border: 1px solid #eaeaea;
	border-radius: 5px;
	overflow-y: scroll;
}

.pop_rnwl .scrollBoxWrap {
	display: none;
	border: none;
}

.scrollBox {
	padding: 12px 15px;
	background: #fafafa;
	color: #858585;
	font-size: 13px;
	line-height: 17px;
}

.scrollBox h5 {
	margin-bottom: 5px;
	color: #666;
	font-size: 12px;
	font-weight: var(--fw-medium);
}

.scrollBox ul {
	margin-bottom: 8px;
}

.scrollBox ul li {
	font-size: 12px;
}

.scrollBox p {
	margin-bottom: 5px;
	font-size: 12px;
}

.pop_rnwl .scrollBox {
	background: none;
	color: #758188;
	font-size: 14px;
}

.pop_rnwl .scrollBox p,
.pop_rnwl .scrollBox ul li,
.pop_rnwl .scrollBox h5 {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.pop_rnwl .scrollBox .privacy_for_event {
	display: none;
}

/* 동의 체크박스 */
.pop_rnwl .agree_wrap {
	margin-top: 10px;
	color: #1e1e1e;
	font-size: 15px;
}

.agree_wrap input[type="checkbox"] {
	display: none;
}

.agree_wrap em {
	color: var(--color-primary);
}

.agree_wrap .lbl_chkbox {
	padding-left: 25px;
}

.agree_wrap .lbl_chkbox::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 19px;
	height: 19px;
	background: url("/public/images/common/ico_chkbox.svg") no-repeat center / cover;
	transform: translateY(-50%);
}

input[name="grmt12"]:checked + .lbl_chkbox::before {
	background-image: url("/public/images/common/ico_chkbox_active.svg");
}

/* 버튼 */
.btn_submit {
	display: inline-block;
	min-width: 300px;
	padding: 19px 33px 18px;
	border-radius: 50px;
	background: var(--color-primary);
	color: #fff;
	font-size: 20px;
	line-height: 24px;
	transition: background-color 0.3s;
}

.btn_submit:hover {
	background: var(--color-primary-hover);
}

.pop_close {
	position: absolute;
	top: 25px;
	right: 30px;
}


/* 반응형
   ------------------------------------ */
@media (height <= 900px) {
	.pop_rnwl {
		height: 90vh;
	}

	.pop_rnwl form {
		height: 100%;
	}

	.pop_rnwl .homepage {
		height: calc(100% - 60px);
		overflow-y: scroll;
	}
}

@media (width <= 767px) {
	.pop_layer {
		width: 100%;
		height: 100% !important;
	}

	.pop_rnwl {
		width: 100%;
		max-height: none;
		height: 100% !important;
		margin: 0;
		padding: 25px 20px !important;
		border-radius: 0 !important;
		overflow-y: scroll;
	}

	.pop_rnwl .tit {
		margin-bottom: 30px;
	}

	.pop_close {
		right: 20px;
	}

	.pop_rnwl input[type="text"],
	.pop_rnwl input[type="tel"],
	.pop_rnwl select,
	.pop_rnwl textarea {
		max-width: none;
	}

	.pop_rnwl input[type="text"][name="txtZip1"] {
		width: calc(100% - 136px);
		margin-right: 2px;
	}

	.pop_rnwl select {
		width: 100% !important;
		background: #fff;
		color: #555;
	}

	.pop_rnwl .info_wrap li {
		flex-wrap: wrap;
	}

	.pop_rnwl .info_wrap li .tt,
	.pop_rnwl .info_wrap li .ct {
		position: relative;
		width: 100%;
	}

	.pop_rnwl .info_wrap li .tt {
		padding-top: 5px;
	}

	.pop_rnwl .info_desc {
		position: absolute;
		right: 0;
		bottom: 102%;
		color: #a7b5bc;
	}

	.pop_rnwl .lbl_radio {
		display: block;
		width: 100%;
		margin-top: 8px;
	}

	.pop_rnwl .toggle_agree {
		padding-top: 2px;
		padding-right: 0;
	}

	.pop_rnwl .toggle_agree::after {
		margin-left: 3px;
		background-size: 20px;
	}

	.scrollBoxWrap {
		height: auto;
	}

	.pop_rnwl .scrollBox p,
	.pop_rnwl .scrollBox ul li,
	.pop_rnwl .scrollBox h5 {
		line-height: 1.2;
	}

	.pop_rnwl .agree_wrap {
		margin-bottom: 40px;
		padding: 0;
	}

	.pop_rnwl .agree_wrap label {
		font-size: 14px;
	}
}


/* 사이트 헤더 - 스크롤 시 그림자 (공용 스크립트에서 .shadow_on 부여)
   ------------------------------------ */
.site-header.shadow_on::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	height: 100%;
	background: #fff;
	box-shadow: 0 0 6px rgb(0 0 0 / 20%);
	transform: translateX(-50%);
}