@charset "utf-8";
/* 랜딩페이지 공통 스타일 - 과정별로 주석 구분하여 추가 */

/*******************************************
	독학사 (/landing/haksa.jsp)
********************************************/
.haksa_lp {
	--hs-blue: #1683e8;
	--hs-sky: #1fb3f0;
	--hs-green: #2fb866;
	--hs-red: #f0444b;
	--hs-navy: #111827;
	--hs-text: #4b5563;
	--hs-sub: #8b95a5;
	--hs-line: #e5ecf4;
	--hs-bg: #f3f7fc;
	--hs-grad: linear-gradient(90deg, #1683e8 0%, #1fb3f0 45%, #2fb866 100%);
	clear: both;
	float: left;
	width: 100%;
	color: var(--hs-navy);
	font-family: 'NanumSquareNeo', 'Noto Sans KR', sans-serif;
	letter-spacing: -0.03em;
	word-break: keep-all;
	overflow-x: hidden; /* 화면 밖으로 나간 이미지로 가로 스크롤 생기지 않게 */
}
.haksa_lp * { box-sizing: border-box; }
.haksa_lp a { text-decoration: none; }

/* 공통 : 섹션 / 1100px 콘텐츠 영역 */
.haksa_lp .hs_section { position: relative; width: 100%; padding: 110px 0; overflow: hidden; }
.haksa_lp .hs_section.bg { background: var(--hs-bg); }
.haksa_lp .hs_inner { position: relative; z-index: 1; width: 1100px; margin: 0 auto; }

/* 공통 : 섹션 타이틀 */
.haksa_lp .hs_tit { text-align: center; margin-bottom: 50px; }
.haksa_lp .hs_tit .eng { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 800; letter-spacing: 0.2em; color: var(--hs-sky); }
.haksa_lp .hs_tit h3 { font-size: 38px; font-weight: 900; line-height: 1.35; color: var(--hs-navy); }
.haksa_lp .hs_tit p { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--hs-text); }
.haksa_lp .hs_point { color: var(--hs-blue); }
.haksa_lp .hs_point_g { color: var(--hs-green); }
.haksa_lp .hs_grad_txt {
	background: var(--hs-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* 공통 : 카드 / 아이콘 자리 (이미지로 교체 예정) */
.haksa_lp .hs_card {
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(30, 80, 140, 0.08);
}
.haksa_lp .hs_icon {
	display: block;
	width: 120px;
	height: 120px;
	margin: 0 auto;
	border-radius: 50%;
	background: linear-gradient(145deg, #e3f1ff 0%, #ffffff 100%);
	box-shadow: inset 0 0 0 1px #dcebfb;
	position: relative;
}
/* 동그라미 위 아이콘 (동그라미의 90% 크기) */
.haksa_lp .hs_icon:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	height: 90%;
	transform: translate(-50%, -50%);
	background: no-repeat center / contain;
}

/* 공통 : 버튼 */
.haksa_lp .hs_btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 60px;
	padding: 0 40px;
	border-radius: 30px;
	background: var(--hs-grad);
	box-shadow: 0 10px 24px rgba(22, 131, 232, 0.25);
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	transition: transform .2s, box-shadow .2s;
}
.haksa_lp .hs_btn:after { content: '\203A'; font-size: 26px; line-height: 1; margin-top: -3px; }
.haksa_lp .hs_btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(22, 131, 232, 0.32), 0 0 36px rgba(31, 179, 240, 0.55); }
/* 마우스를 올리면 버튼 둘레로 빛이 확 퍼지기 */
.haksa_lp .hs_btn:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	pointer-events: none;
}
.haksa_lp .hs_btn:hover:before { animation: hsBtnGlow 1.4s ease-out infinite; }
@keyframes hsBtnGlow {
	0% { box-shadow: 0 0 0 0 rgba(31, 179, 240, 0.55); }
	100% { box-shadow: 0 0 0 22px rgba(47, 184, 102, 0); }
}

/* 01. 비주얼 */
.haksa_lp .hs_visual {
	z-index: 2;
	overflow: visible;
	padding: 90px 0 0;
	background:
		radial-gradient(circle at 12% 20%, rgba(31, 179, 240, 0.18) 0, rgba(31, 179, 240, 0) 32%),
		radial-gradient(circle at 88% 15%, rgba(47, 184, 102, 0.16) 0, rgba(47, 184, 102, 0) 30%),
		radial-gradient(circle at 80% 85%, rgba(22, 131, 232, 0.12) 0, rgba(22, 131, 232, 0) 35%),
		linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
}
/* 학사모·책 이미지 : 1100px 영역 밖 오른쪽으로 걸치게 배치 */
.haksa_lp .hs_visual_img {
	position: absolute;
	top: 5px;
	right: -135px;
	width: 583px;
	pointer-events: none;
}
.haksa_lp .hs_visual_label { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--hs-text); }
.haksa_lp .hs_visual_label strong {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	background: #e3f1ff;
	font-weight: 800;
	color: var(--hs-blue);
}
.haksa_lp .hs_visual h2 { margin-top: 44px; font-size: 58px; font-weight: 900; line-height: 1.25; }
.haksa_lp .hs_visual_desc { margin-top: 36px; font-size: 18px; line-height: 1.65; color: var(--hs-text); }

.haksa_lp .hs_step { position: relative; z-index: 1; display: flex; gap: 24px; margin-top: 50px; }
.haksa_lp .hs_step_item { position: relative; flex: 1; padding: 32px 30px 30px; border-radius: 20px; overflow: hidden; }
.haksa_lp .hs_step_item:before,
.haksa_lp .hs_step_item:after {
	content: '';
	position: absolute;
	top: 24px;
	right: 40px;
	width: 120px;
	height: 120px;
}
.haksa_lp .hs_step_item:before { border-radius: 50%; background: rgba(255, 255, 255, 0.55); }
/* 동그라미 위 아이콘 */
.haksa_lp .hs_step_item:after { z-index: 2; background: no-repeat center / 108px auto; }
.haksa_lp .hs_step_item.blue:after { background-image: url('/images/landing/haksa/icon_step1.png'); }
.haksa_lp .hs_step_item.green:after { background-image: url('/images/landing/haksa/icon_step2.png'); }
.haksa_lp .hs_step_item.blue { background: linear-gradient(135deg, #e3f1ff 0%, #f3f9ff 100%); border: 1px solid #d3e7fb; }
.haksa_lp .hs_step_item.green { background: linear-gradient(135deg, #e2f6ea 0%, #f3fbf6 100%); border: 1px solid #ccebd8; }
.haksa_lp .hs_step_item .badge {
	position: relative;
	display: inline-block;
	padding: 5px 12px;
	border-radius: 14px;
	background: #fff;
	font-size: 13px;
	font-weight: 800;
}
.haksa_lp .hs_step_item.blue .badge { color: var(--hs-blue); }
.haksa_lp .hs_step_item.green .badge { color: var(--hs-green); }
.haksa_lp .hs_step_item h4 { position: relative; margin-top: 12px; font-size: 28px; font-weight: 900; }
.haksa_lp .hs_step_item .box {
	position: relative;
	z-index: 1;
	margin-top: 20px;
	padding: 18px 22px;
	border-radius: 14px;
	background: #fff;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hs-text);
}
.haksa_lp .hs_step_item .box strong { font-weight: 800; }
.haksa_lp .hs_step_item.blue .box strong { color: var(--hs-blue); }
.haksa_lp .hs_step_item.green .box strong { color: var(--hs-green); }

.haksa_lp .hs_visual_btn { margin-top: 40px; text-align: center; }
.haksa_lp .hs_visual_btn .hs_btn {
	justify-content: center;
	width: 620px;
	height: 72px;
	border-radius: 36px;
	font-size: 21px;
}

.haksa_lp .hs_about { display: flex; align-items: center; margin-top: 10px; padding: 40px 50px; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--hs-grad) border-box; box-shadow: 0 16px 40px rgba(22, 131, 232, 0.16); transform: translateY(50%); }
/* 독학사란? 박스가 아래 섹션 위로 절반 겹치므로 그만큼 위 여백 추가 */
.haksa_lp .hs_visual + .hs_section { padding-top: 200px; }
.haksa_lp .hs_about h4 { flex: 0 0 240px; font-size: 26px; font-weight: 900; }
.haksa_lp .hs_about .txt { flex: 1; padding-left: 50px; border-left: 1px solid var(--hs-line); font-size: 16px; line-height: 1.8; color: var(--hs-text); }
.haksa_lp .hs_about .txt .sub { display: block; margin-top: 6px; font-size: 14px; color: var(--hs-sub); }
.haksa_lp .hs_about .hs_mark { font-weight: 700; color: var(--hs-navy); background: linear-gradient(transparent 60%, rgba(31, 179, 240, 0.22) 60%); }

/* 02. 왜 독학사 */
.haksa_lp .hs_why_list { display: flex; gap: 20px; }
.haksa_lp .hs_why_list li { position: relative; flex: 1; padding: 44px 22px 36px; text-align: center; }
.haksa_lp .hs_why_list .num { position: absolute; top: 18px; left: 22px; font-size: 13px; font-weight: 800; color: #c3ccd8; }
.haksa_lp .hs_why_list li:nth-child(1) .hs_icon:after { background-image: url('/images/landing/haksa/icon_why1.png'); }
.haksa_lp .hs_why_list li:nth-child(2) .hs_icon:after { background-image: url('/images/landing/haksa/icon_why2.png'); }
.haksa_lp .hs_why_list li:nth-child(3) .hs_icon:after { background-image: url('/images/landing/haksa/icon_why3.png'); }
.haksa_lp .hs_why_list li:nth-child(4) .hs_icon:after { background-image: url('/images/landing/haksa/icon_why4.png'); }
.haksa_lp .hs_why_list h4 { margin-top: 24px; font-size: 19px; font-weight: 800; line-height: 1.45; }
.haksa_lp .hs_why_list p { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--hs-text); }
/* 카드에 마우스를 올리면 파란 글씨 아래 형광펜 밑줄이 왼쪽부터 그어지고, 떼면 다시 왼쪽으로 사라짐 */
.haksa_lp .hs_why_list .hs_point { background: linear-gradient(rgba(31, 179, 240, 0.22), rgba(31, 179, 240, 0.22)) no-repeat left bottom / 0 40%; padding: 0 4px; margin: 0 -4px; transition: background-size .4s ease-out; }
.haksa_lp .hs_why_list li:hover .hs_point { background-size: 100% 40%; }

/* 03. 1년 앞당기기 (학기 비교) */
.haksa_lp .hs_compare {
	display: grid;
	grid-template-columns: 190px 1fr 190px;
	align-items: center;
	gap: 0 18px;
	padding: 44px 40px;
}
.haksa_lp .hs_compare .label {
	padding: 12px 10px;
	border-radius: 12px;
	text-align: center;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
}
.haksa_lp .hs_compare .label span { display: block; font-size: 13px; font-weight: 700; }
.haksa_lp .hs_compare .label.normal { background: #fde4e6; color: var(--hs-red); }
.haksa_lp .hs_compare .label.best { background: #dcf5ea; color: #14a37f; }

/* 학기 막대 : 마지막 칸은 화살표 모양 */
.haksa_lp .hs_compare .track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; align-items: center; }
.haksa_lp .hs_compare .track > span {
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
}
.haksa_lp .hs_compare .track > span:first-child { border-radius: 10px 0 0 10px; }
.haksa_lp .hs_compare .track > span:last-of-type {
	padding-right: 12px;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}
.haksa_lp .hs_compare .track.normal > span { background: #fdecee; color: #5b4547; }
.haksa_lp .hs_compare .track.best > span { color: #fff; }
.haksa_lp .hs_compare .track.best > span:nth-child(1) { background: #74d6c4; }
.haksa_lp .hs_compare .track.best > span:nth-child(2) { background: #4fc8af; }
.haksa_lp .hs_compare .track.best > span:nth-child(3) { background: #2fb898; }
.haksa_lp .hs_compare .track.best > span:nth-child(4) { background: #14a37f; }

/* 학사 취득 결과 */
.haksa_lp .hs_compare .result { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 900; white-space: nowrap; }
.haksa_lp .hs_compare .result svg { flex: 0 0 30px; width: 30px; height: 30px; fill: currentColor; }
.haksa_lp .hs_compare .result.normal { color: var(--hs-red); }
.haksa_lp .hs_compare .result.best { grid-column: 5 / 8; padding-left: 14px; color: #14a37f; }

/* 최대 1년 더 소요 : 단독 진행 5~7학기 아래 구간 표시 */
.haksa_lp .hs_compare .gap { grid-column: 2; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; height: 64px; }
.haksa_lp .hs_compare .bracket {
	position: relative;
	grid-column: 5 / 8;
	height: 18px;
	margin-top: 6px;
	border: 2px dashed #f59ca0;
	border-top: 0;
	border-radius: 0 0 10px 10px;
}
.haksa_lp .hs_compare .bracket em {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 6px 14px;
	border: 1px solid #f7c4c6;
	border-radius: 20px;
	background: #fff;
	font-size: 14px;
	font-weight: 800;
	color: var(--hs-red);
	white-space: nowrap;
	animation: hsPulse 2s ease-out infinite;
}
/* 알약 둘레로 빨간 빛이 퍼졌다 사라지기 반복 */
@keyframes hsPulse {
	0% { box-shadow: 0 0 0 0 rgba(240, 68, 75, 0.35); }
	70% { box-shadow: 0 0 0 10px rgba(240, 68, 75, 0); }
	100% { box-shadow: 0 0 0 0 rgba(240, 68, 75, 0); }
}
.haksa_lp .hs_compare .label.best { grid-row: 3; grid-column: 1; }
.haksa_lp .hs_compare .track.best { grid-row: 3; grid-column: 2; }

.haksa_lp .hs_reason { margin-top: 60px; }
.haksa_lp .hs_reason li {
	--hs-c: 22, 131, 232;
	--hs-dot1: calc(100% - 300px) 72%;
	--hs-dot2: calc(100% - 85px) 18%;
	position: relative;
	display: flex;
	align-items: center;
	padding: 34px 44px;
	border-radius: 20px;
	border: 1px solid var(--hs-line);
	overflow: hidden;
	/* 이미지 뒤 동그라미 장식 : 작은 점 / 흰 빛 / 큰 원 */
	background:
		radial-gradient(circle at var(--hs-dot1), rgba(var(--hs-c), 0.16) 0, rgba(var(--hs-c), 0.16) 6px, rgba(var(--hs-c), 0) 7px),
		radial-gradient(circle at var(--hs-dot2), rgba(var(--hs-c), 0.10) 0, rgba(var(--hs-c), 0.10) 14px, rgba(var(--hs-c), 0) 15px),
		radial-gradient(circle at calc(100% - 150px) 50%, rgba(255, 255, 255, 0.95) 0, rgba(255, 255, 255, 0) 110px),
		radial-gradient(circle at calc(100% - 110px) 105%, rgba(var(--hs-c), 0.10) 0, rgba(var(--hs-c), 0.10) 105px, rgba(var(--hs-c), 0) 106px),
		var(--hs-bg);
}
.haksa_lp .hs_reason li:nth-child(2) { --hs-c: 47, 184, 102; --hs-dot1: calc(100% - 275px) 24%; --hs-dot2: calc(100% - 28px) 58%; }
.haksa_lp .hs_reason li:nth-child(odd) { overflow: visible; }
.haksa_lp .hs_reason li:nth-child(3) { --hs-dot1: calc(100% - 325px) 46%; --hs-dot2: calc(100% - 130px) 12%; }
.haksa_lp .hs_reason li + li { margin-top: 16px; }
.haksa_lp .hs_reason .tag {
	flex: 0 0 120px;
	padding: 7px 0;
	border-radius: 16px;
	background: #fff;
	text-align: center;
	font-size: 13px;
	font-weight: 900;
	color: var(--hs-blue);
}
.haksa_lp .hs_reason li:nth-child(2) .tag { color: var(--hs-green); }
.haksa_lp .hs_reason .cont { flex: 1; margin-left: 40px; padding-left: 40px; padding-right: 240px; border-left: 1px solid #d8e2ee; }
/* 오른쪽 일러스트 (215x130) : 카드 아래쪽 경계에 걸침 - 01·03은 밖으로 삐져나오고, 02는 박스 안으로 잘림 */
.haksa_lp .hs_reason li:after {
	content: '';
	position: absolute;
	bottom: -5px;
	right: 45px;
	width: 215px;
	height: 130px;
	background: no-repeat center bottom / contain;
	filter: drop-shadow(0 10px 14px rgba(30, 80, 140, 0.12));
}
.haksa_lp .hs_reason li:nth-child(1):after { background-image: url('/images/landing/haksa/img_reason1.png'); }
.haksa_lp .hs_reason li:nth-child(2):after { background-image: url('/images/landing/haksa/img_reason2.png'); }
.haksa_lp .hs_reason li:nth-child(3):after { background-image: url('/images/landing/haksa/img_reason3.png'); }
.haksa_lp .hs_reason h4 { font-size: 22px; font-weight: 900; }
.haksa_lp .hs_reason p { margin-top: 10px; font-size: 15px; line-height: 1.65; color: var(--hs-text); }

/* 04. 추천 대상 / 대표 과목 */
.haksa_lp .hs_target { display: flex; gap: 20px; }
.haksa_lp .hs_target li { flex: 1; padding: 36px 20px 34px; text-align: center; }
.haksa_lp .hs_target li:nth-child(1) .hs_icon:after { background-image: url('/images/landing/haksa/icon_target1.png'); }
.haksa_lp .hs_target li:nth-child(2) .hs_icon:after { background-image: url('/images/landing/haksa/icon_target2.png'); }
.haksa_lp .hs_target li:nth-child(3) .hs_icon:after { background-image: url('/images/landing/haksa/icon_target3.png'); }
.haksa_lp .hs_target li:nth-child(4) .hs_icon:after { background-image: url('/images/landing/haksa/icon_target4.png'); }
.haksa_lp .hs_target p { margin-top: 24px; font-size: 15px; font-weight: 700; line-height: 1.6; color: #374151; }

.haksa_lp .hs_subject_wrap { margin-top: 110px; }
.haksa_lp .hs_subject_wrap .hs_tit p { font-size: 13px; color: var(--hs-sub); }
.haksa_lp .hs_subject { display: flex; gap: 20px; }
.haksa_lp .hs_subject li { flex: 1; display: flex; align-items: center; gap: 28px; padding: 34px 36px; }
.haksa_lp .hs_subject .hs_icon { flex: 0 0 80px; width: 80px; height: 80px; margin: 0; }
.haksa_lp .hs_subject li:nth-child(1) .hs_icon:after { background-image: url('/images/landing/haksa/icon_subject1.png'); }
.haksa_lp .hs_subject li:nth-child(2) .hs_icon:after { background-image: url('/images/landing/haksa/icon_subject2.png'); }
.haksa_lp .hs_subject h4 { font-size: 18px; font-weight: 900; color: var(--hs-blue); }
.haksa_lp .hs_subject li.green h4 { color: var(--hs-green); }
.haksa_lp .hs_subject .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.haksa_lp .hs_subject .chips span {
	padding: 7px 14px;
	border-radius: 16px;
	background: #e3f1ff;
	font-size: 14px;
	color: #374151;
}
.haksa_lp .hs_subject li.green .chips span { background: #e2f6ea; }

/* 05. 이용 방법 */
.haksa_lp .hs_howto { display: flex; align-items: flex-start; justify-content: space-between; }
.haksa_lp .hs_howto li { position: relative; flex: 0 0 300px; text-align: center; }
.haksa_lp .hs_howto li + li:before {
	content: '\203A';
	position: absolute;
	top: 50%;
	margin-top: -48px;
	line-height: 1;
	left: -60px;
	font-size: 36px;
	color: #c3ccd8;
	animation: hsArrowMove 1.2s ease-in-out infinite;
}
@keyframes hsArrowMove {
	0%, 100% { transform: translateX(0); opacity: 0.5; }
	50% { transform: translateX(10px); opacity: 1; }
}
.haksa_lp .hs_howto li:nth-child(1) .hs_icon:after { background-image: url('/images/landing/haksa/icon_howto1.png'); }
.haksa_lp .hs_howto li:nth-child(2) .hs_icon:after { background-image: url('/images/landing/haksa/icon_howto2.png'); }
.haksa_lp .hs_howto li:nth-child(3) .hs_icon:after { background-image: url('/images/landing/haksa/icon_howto3.png'); }
/* 단계 영역에 마우스를 올리면 동그라미 둘레로 빛이 퍼지기 반복 (아이콘은 :after 사용 중이라 :before 사용) */
.haksa_lp .hs_howto .hs_icon:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	pointer-events: none;
}
.haksa_lp .hs_howto li:hover .hs_icon:before { animation: hsIconGlow 1.4s ease-out infinite; }
@keyframes hsIconGlow {
	0% { box-shadow: 0 0 0 0 rgba(31, 179, 240, 0.45); }
	100% { box-shadow: 0 0 0 24px rgba(31, 179, 240, 0); }
}
.haksa_lp .hs_howto .step { display: block; margin-top: 24px; font-size: 13px; font-weight: 900; color: var(--hs-sky); }
.haksa_lp .hs_howto h4 { margin-top: 8px; font-size: 19px; font-weight: 800; }
.haksa_lp .hs_howto p { margin-top: 12px; font-size: 14px; line-height: 1.65; color: var(--hs-text); }
/* 카드에 마우스를 올리면 아이콘과 글씨가 함께 살짝 떠오름 (화살표는 제자리) */
.haksa_lp .hs_howto li > * { transition: transform .4s ease-out; }
.haksa_lp .hs_howto li:hover > * { transform: translateY(-10px); }

/* 06. 자주 묻는 질문 */
.haksa_lp .hs_faq { border-top: 2px solid var(--hs-navy); }
.haksa_lp .hs_faq li { border-bottom: 1px solid var(--hs-line); }
.haksa_lp .hs_faq .q {
	position: relative;
	display: block;
	width: 100%;
	padding: 26px 60px 26px 30px;
	text-align: left;
	font-family: inherit;
	font-size: 17px;
	font-weight: 800;
	color: var(--hs-navy);
}
.haksa_lp .hs_faq .q:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 30px;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid #9aa4b2;
	border-bottom: 2px solid #9aa4b2;
	transform: rotate(45deg);
	transition: transform .3s;
}
.haksa_lp .hs_faq li.on .q:after { transform: translate(0, 5px) rotate(-135deg); }
.haksa_lp .hs_faq .q em,
.haksa_lp .hs_faq .a em { display: inline-block; width: 30px; font-weight: 900; }
.haksa_lp .hs_faq .q em { color: var(--hs-blue); }
.haksa_lp .hs_faq .a em { color: var(--hs-green); }
.haksa_lp .hs_faq .a { display: none; overflow: hidden; }
.haksa_lp .hs_faq .a_box {
	margin: 2px 20px 24px;
	padding: 22px 30px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(30, 80, 140, 0.06);
	font-size: 15px;
	line-height: 1.7;
	color: var(--hs-text);
}

/* 06-1. 안내사항 */
.haksa_lp .hs_notice {
	display: flex;
	align-items: center;
	margin-top: 60px;
	padding: 34px 50px;
	border: 1px solid #d8eaf8;
	border-radius: 20px;
	background: linear-gradient(90deg, #e6f3fd 0%, #f2f9fe 100%);
}
.haksa_lp .hs_notice .tit { display: flex; align-items: center; gap: 24px; flex: 0 0 260px; }
.haksa_lp .hs_notice .tit .hs_icon { flex: 0 0 80px; width: 80px; height: 80px; margin: 0; }
.haksa_lp .hs_notice .tit .hs_icon:after { background-image: url('/images/landing/haksa/icon_notice.png'); }
.haksa_lp .hs_notice h4 { font-size: 26px; font-weight: 900; color: #16244a; }
.haksa_lp .hs_notice ul { flex: 1; padding-left: 40px; border-left: 1px solid #c9dcec; }
.haksa_lp .hs_notice li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.9; color: #374151; }
.haksa_lp .hs_notice li:before {
	content: '';
	position: absolute;
	top: 12px;
	left: 2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--hs-blue);
}

/* 07. 하단 배너 : 왼쪽 문구 / 오른쪽 버튼 (학사모·책은 배경 이미지에 포함) */
/* 배너 높이(367px)의 절반만큼 위 FAQ 섹션 위로 겹쳐 올림 */
.haksa_lp .hs_faq_sec { padding-bottom: 294px; }
.haksa_lp .hs_banner_wrap {
	z-index: 2;
	display: flow-root;
	overflow: visible;
	padding: 0 0 110px;
	background:
		radial-gradient(circle at 8% 30%, rgba(47, 184, 102, 0.12) 0, rgba(47, 184, 102, 0) 30%),
		radial-gradient(circle at 92% 20%, rgba(31, 179, 240, 0.14) 0, rgba(31, 179, 240, 0) 30%),
		#f8fbfe;
}
.haksa_lp .hs_banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 367px; /* 배경 이미지 비율(2172x724)에 맞춤 */
	margin-top: -184px;
	padding: 50px 60px 50px 70px;
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 24px;
	background: #eaf6fb url('/images/landing/haksa/banner_bg.png') no-repeat center / cover;
	box-shadow: 0 14px 40px rgba(30, 80, 140, 0.08);
	overflow: hidden;
}
.haksa_lp .hs_banner h3 { font-size: 36px; font-weight: 900; line-height: 1.4; color: #16244a; }
.haksa_lp .hs_banner p { margin-top: 16px; font-size: 17px; line-height: 1.65; color: var(--hs-text); }
.haksa_lp .hs_banner .action {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	flex: 0 0 460px;
	align-self: stretch;
}
.haksa_lp .hs_banner .hs_btn { position: relative; z-index: 1; }

/* 카드에 마우스를 올리면 동그라미와 아이콘이 함께 둥둥 뜨기 (기존 transform 과 겹치지 않게 translate 사용)
   hs_float 는 스크립트가 붙이고, 마우스를 떼면 지금 동작을 끝까지 마친 뒤 제자리에서 멈춤 */
.haksa_lp .hs_step_item.hs_float:before,
.haksa_lp .hs_step_item.hs_float:after,
.haksa_lp .hs_float .hs_icon { animation: hsIconFloat 1.2s ease-in-out infinite; }
@keyframes hsIconFloat {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -8px; }
}

/* 스크롤 등장 애니메이션 : 스크립트가 hs_reveal 을 붙인 카드만 적용 (기존 transform 과 겹치지 않게 translate 사용) */
.haksa_lp .hs_reveal { opacity: 0; translate: 0 40px; transition: opacity .7s ease-out, translate .7s ease-out; }
.haksa_lp .hs_reveal.on { opacity: 1; translate: 0 0; }