
/* ==================================================
   상담신청 모달
================================================== */

.f_modal {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:9999;

	display:flex;
	justify-content:center;
	align-items:center;
}

/* 반드시 .f_modal보다 아래 */
.f_modal.hidden {
	display:none;
}

.f_modal .bg {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.6);
}


/* ==================================================
   모달 본체
================================================== */

.f_modalBox {
	position:relative;
	z-index:1;

	width:100%;
	height:100%;
	box-sizing:border-box;

	background:#fff;
	overflow-y:auto;
	overflow-x:hidden;

	padding:20px 0 75px;

	-ms-overflow-style:none;
	-webkit-overflow-scrolling:touch;
}

.f_modalBox::-webkit-scrollbar {
	display:none;
}


/* ==================================================
   제목 / 닫기
================================================== */

.onotit {
	position:static !important;
	top:auto !important;
	left:auto !important;
	transform:none !important;

	margin:0 45px 12px 20px !important;
	padding:0 !important;

	font-size:20px;
	line-height:1.35;
	color:#2f4ec1;
}

.f_modalBox .closeBtn {
	display:block;
	position:absolute;
	top:20px;
	right:15px;
	z-index:10;

	font-style:normal;
	font-size:.95em;
	color:#646464;
	font-weight:bold;
	cursor:pointer;
}


/* ==================================================
   섹션 제목
================================================== */

.f-title {
	margin:12px 20px 7px;
	font-size:.95rem;
	font-weight:bold;
}


/* ==================================================
   질문 선택
================================================== */

.f_modalBox .list-box {
	padding:5px 20px;
	margin:0;
	border-bottom:8px solid #f3f4ff;
}

.f_modalBox .list-box li {
	position:relative;
	margin-bottom:5px;
	border-radius:8px;
	background:#ebf5ff;
}

.f_modalBox .list-box li:hover {
	cursor:pointer;
}

.list-box li label {
	display:inline-block;
	width:100%;
	box-sizing:border-box;

	padding:12px 20px;

	border:1px solid #ebf5ff;
	border-radius:8px;

	text-align:left;
	font-size:.9em;
}

/* 라디오 버튼 자체는 영역 전체 클릭용 */
.list-box li input[type="radio"] {
	position:absolute;
	inset:0;

	width:100%;
	height:100%;
	margin:0;

	opacity:0;
	cursor:pointer;
	z-index:2;

	-webkit-appearance:none;
	appearance:none;

	/* 아이폰 터치 순간 기본 효과 제거 */
	-webkit-tap-highlight-color:transparent;
	border:0;
	background:transparent;
	outline:none;
}

/* 기본 버튼 */
.list-box li label {
	position:relative;
	display:block;
	box-sizing:border-box;

	padding:12px 45px 12px 20px;

	background:#ebf5ff;
	border:1px solid #ebf5ff;
	border-radius:8px;

	transition:
		background .15s ease,
		border .15s ease,
		box-shadow .15s ease,
		transform .1s ease;
}


/* 기존 before 제거 */
.list-box li input[type="radio"] + label::before {
	display:none;
}


/* 선택 상태 */
.list-box li input[type="radio"]:checked + label {
	    background: #dde9f5;
	border:1px solid #0068ff;

	color:#0057d9;
	font-weight:700;

	/* 눌린 느낌 */
	box-shadow:
		inset 0 2px 4px rgba(0, 70, 180, .13),
		0 1px 2px rgba(0, 104, 255, .08);

	transform:translateY(1px);
}


/* 오른쪽 체크 아이콘 */
.list-box li input[type="radio"]:checked + label::after {
	content:"✓";

	position:absolute;
	right:17px;
	top:50%;
	transform:translateY(-50%);

	display:flex;
	align-items:center;
	justify-content:center;

	width:22px;
	height:22px;

	border-radius:50%;
	background:#0068ff;
	color:#fff;

	font-size:14px;
	font-weight:900;
	line-height:1;
}


/* PC 마우스 오버 */
@media (hover:hover) {

	.list-box li:hover label {
		border-color:#8abfff;
		background:#e3f0ff;
	}

	.list-box li:hover input[type="radio"]:checked + label {
		background:#dcecff;
		border-color:#0068ff;
	}
}
/* ==================================================
   직접 질문
================================================== */

.textarea-item {
	display:none;
	background:none !important;
}

.form-box {
	display:inline-block;
	position:relative;
	width:100%;
	border-radius:4px;
}

.form-box textarea {
	width:100%;
	box-sizing:border-box;

	padding:15px 20px;

	border:1px solid #e5e5e8;
	border-radius:4px;

	resize:none;

	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}


/* ==================================================
   전화 상담 안내
================================================== */

.time-slot {
	padding-top:5px !important;
}

.call_tip {
	margin:3px 0 5px;
	padding:0 10px;

	font-size:.8em;
	line-height:1.4;
}

.call_tip span {
	color:#a3a3a3;
}


/* ==================================================
   개인정보 입력
================================================== */

.write_input {
	padding:5px 20px;
	margin:0;
}

.write_input li {
	margin-bottom:5px;
}

.write_input .name {
	display:flex;
	gap:10px;
}

.write_input .name .le {
	width:100%;
	margin:0;
}

.write_input input,
.write_input select,
.write_input textarea {
	width:100%;
	height:50px;

	box-sizing:border-box;

	padding:8px 16px;

	border:0;
	border-radius:8px;

	background-color:#ebf5ff;

	font-family:'Pretendard','dotum',sans-serif;
	font-size:.9rem;
	color:#000;
}



.write_input select {
	padding-right:32px;

	background-image:url(https://www.embassyedu.com/promo/img/arw_d.png);
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:12px;

	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

.write_input textarea {
	padding-top:17px;
	resize:none;
}

.write_input input {
	-webkit-appearance:none;
}




/* 포커스 */

input[type=text],
input[type=password],
textarea {
	outline:none;

	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
}

input[type=text]:focus,
input[type=password]:focus,
textarea:focus,
select:focus {
	border:1px solid #558ab7 !important;

	-webkit-box-shadow:0 0 5px #9ed4ff;
	-moz-box-shadow:0 0 5px #9ed4ff;
	box-shadow:0 0 5px #9ed4ff;
}

textarea:focus,
button:focus,
input:focus {
	outline:none;
}


/* ==================================================
   전화번호
================================================== */

.call {
	display:flex;
	justify-content:space-between;
	gap:5px;
}

.write_input .call input,
.write_input .call select {
	width:33.333%;
	min-width:0;
}


/* ==================================================
   체크박스
================================================== */

.write_input input[type="checkbox"] {
	display:inline-block;

	width:15px;
	height:15px;

	padding:0;
	margin-right:5px;

	border:1px solid #999;
	border-radius:3px;

	vertical-align:top;

	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
}

.write_input input[type="checkbox"]:checked {
	border:0;

	background-image:url(https://www.embassyedu.com/promo/img/ch.gif);
	background-repeat:no-repeat;
	background-size:100%;
}


/* ==================================================
   개인정보 약관
================================================== */

.yac_ttxx {
	display:flex;
	justify-content:center;

	margin-top:10px;

	font-size:.85em;
	line-height:1.2rem;
	color:#000;
}

.yac_ttxx b {
	margin-left:5px;
	font-weight:400;
}

.yac_ttxx label:hover,
.yac_ttxx b:hover {
	cursor:pointer;
}

.yac_ttxx b:hover {
	color:#0068ff;
}

.yac_Btn_cl {
	display:none;
	color:#ff0000;
}

.yac_more {
	display:none;
	position:relative;
	z-index:1111;
	background:#fff;
}

.yac_tit {
	margin-top:5px;
	padding-bottom:5px;

	text-align:center;
	color:#2f4ec1;
	font-weight:bold;
	font-size:.9em;
}

.yac_box {
	display:flex;
}

.yac_box div {
	width:33.3%;
	padding:5px 0;

	text-align:center;
	background:#eee;
	font-size:14px;

	cursor:pointer;
}

.yac_box div:hover {
	background:#001eff;
}

.yac_con {
	height:100px;
	overflow:auto;

	margin:5px 0;
	border:1px solid #aaa;

	font-size:.85em;
}


/* ==================================================
   오류 메시지
================================================== */

.warning_tx {
	display:block;
	padding:0 20px;

	color:#f00;
	font-size:.7rem;
	font-weight:bold;
}

.warning_tx2 {
	padding:0 20px;

	color:#000;
	font-size:.65rem;
	font-weight:900;
}

#agree_error {
	text-align:center;
}

/* 필수 입력 오류 */
.write_input input.input-error,
.write_input select.input-error {
	border:2px solid #ff3b30 !important;
	background-color:#fff2f1 !important;
	box-shadow:0 0 0 2px rgba(255,59,48,.08);
}

/* 개인정보 동의 오류 */
.yac_ttxx.input-error input[type="checkbox"] {
	border:2px solid #ff3b30 !important;
	background-color:#fff2f1 !important;
	box-shadow:0 0 0 2px rgba(255,59,48,.12);
}

/* 기존 에러문구 */
.warning_tx,
#agree_error {
	color:#ff3b30;
	font-weight:bold;
}


/* ==================================================
   하단 신청 버튼
================================================== */

.modal-footer {
	position:absolute;
	left:0;
	bottom:0;

	width:100%;
	z-index:20;

	background:#fff;
}

.lastbtn {
	display:flex;
	width:100%;
}

.lastbtn input {
	width:100%;
	margin:0;

	padding:16px;

	border:0;
	border-radius:0;

	background:#0068ff;
	color:#fff;

	font-size:1em;
	font-weight:bold;
}


/* 기존 클래스 유지 */

.fotm_bTn {
	width:80%;
	height:48px;
	line-height:48px;

	display:block;

	margin:10px auto 30px;
	padding:0;

	border:0;
	border-radius:4px;

	background:#0005e0;
	color:#fff;

	font-family:'Pretendard';
	font-size:1.2rem;
	text-align:center;
}

.fotm_bTn:hover {
	cursor:pointer;
}

.fotm_bTn:hover p {
	background:#333;
	transition:.2s;
}


/* ==================================================
   모바일
================================================== */

/* ==================================================
   모바일
================================================== */

@media screen and (max-width:779px) {


	/* 전체 화면은 반투명 배경 */
	.f_modal {
		display:flex;
		align-items:flex-end;
		justify-content:center;

		width:100%;
		height:100%;

		background:rgba(0,0,0,.55);
		overflow:hidden;
	}

	/* hidden은 반드시 유지 */
	.f_modal.hidden {
		display:none;
	}

	/* 기존 배경 레이어 */
	.f_modal .bg {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;

		background:transparent;
	}

	/* 실제 흰색 팝업 */
	.f_modalBox {
		position:relative;
		z-index:2;

		width:100%;
		height:auto;
		max-height:90dvh;

		margin:0;
		padding:20px 0 0;

		background:#fff;

		overflow-y:auto;
		overflow-x:hidden;

		box-sizing:border-box;

		border-radius:15px 15px 0 0;
	}

	/* 제목 */
	.onotit {
		position:static !important;
		margin:0 50px 12px 20px !important;
		padding:0 !important;
	}

	/* 닫기 */
	.f_modalBox .closeBtn {
		position:absolute;
		top:20px;
		right:15px;
		z-index:10;
	}

	/* 신청 버튼은 내용 바로 아래 */
	.modal-footer {
		position:static;
		width:100%;
		margin:15px 0 0;
	}

	.lastbtn {
		width:100%;
	}

	.lastbtn input {
		display:block;
		width:100%;

		margin:0;
		padding:17px;

		border:0;
		border-radius:0;

		background:#0068ff;
		color:#fff;

		font-size:1em;
		font-weight:bold;
	}

}


/* ==================================================
   PC
================================================== */

@media screen and (min-width:780px) {

	#pc_top .fix_btn li {
		font-size:17px;
	}

	.fix_btn .form {
		width:230px;
		padding:0;
		margin:0;
	}

	.fix_btn .ono {
		width:230px;
		height:53px;
		line-height:53px;

		margin-left:5px;

		border-radius:2px;
	}

	.fix_btn .kaka_btn {
		display:flex;
		align-items:center;
		justify-content:flex-start;

		width:200px;
		height:55px;

		padding-left:40px;

		box-sizing:border-box;

		border:1px solid #ffe800;
		border-radius:3px;

		background-color:#ffe800;
		background-size:25px;
		background-position:10px center;
	}

	.fix_btn .kaka_btn:hover {
		border:1px dotted #271c94;
		transition:.3s;
	}


/* ==================================================
   PC 모달
================================================== */

@media screen and (min-width:780px) {

	.f_modalBox {
		position:relative;

		width:700px;
		height:auto;
		max-height:90vh;

		padding:20px 0 0;
		margin:0;

		background:#fff;
		border-radius:5px;

		overflow-y:auto;
		overflow-x:hidden;

		box-sizing:border-box;
	}

	/* 제목 */
	.onotit {
		position:static !important;
		margin:0 50px 12px !important;
		padding:0 !important;

		font-size:25px;
		line-height:1.3;
	}

	.f-title {
		margin-left:50px;
		margin-right:50px;
	}

	/* 질문 영역 */
	.f_modalBox .list-box {
		padding:10px 50px 5px;
	}

	/* 개인정보 입력 */
	.write_input {
		padding:5px 50px;
	}

	/* 닫기 버튼 */
	.f_modalBox .closeBtn {
		position:absolute;
		top:20px;
		right:20px;
		z-index:10;
	}

	.closeBtn:hover {
		opacity:.7;
	}

	/* ==================================================
	   하단 신청 버튼
	   absolute 제거 → 내용 바로 아래 배치
	================================================== */

	.modal-footer {
		position:static !important;

		width:100%;
		margin:15px 0 0;
		padding:0;

		background:#fff;
	}

	.lastbtn {
		display:flex;
		width:100%;
	}

	.lastbtn input {
		display:block;

		width:100%;
		margin:0;
		padding:17px;

		border:0;
		border-radius:0 0 5px 5px;

		background:#0068ff;
		color:#fff;

		font-size:1em;
		font-weight:bold;
	}

	.lastbtn input:hover {
		cursor:pointer;
		background:#000;
		transition:.2s;
	}


	/* ==================================================
	   기존 PC 하단 버튼
	================================================== */

	#pc_top .fix_btn li {
		font-size:17px;
	}

	.fix_btn .form {
		width:230px;
		padding:0;
		margin:0;
	}

	.fix_btn .ono {
		width:230px;
		height:53px;
		line-height:53px;

		margin-left:5px;
		border-radius:2px;
	}

	.fix_btn .kaka_btn {
		display:flex;
		align-items:center;
		justify-content:flex-start;

		width:200px;
		height:55px;

		padding-left:40px;

		box-sizing:border-box;

		border:1px solid #ffe800;
		border-radius:3px;

		background-color:#ffe800;
		background-size:25px;
		background-position:10px center;
	}

	.fix_btn .kaka_btn:hover {
		border:1px dotted #271c94;
		transition:.3s;
	}

	.jbFixed.fix_btn .ono {
		color:#fff;
		background:#000;
	}

	.fix_btn .ono:hover {
		cursor:pointer;
		border:1px dotted #271c94;
		color:#000;
		background:#fff;
		transition:.2s;
	}

}

