@charset "utf-8";
.gasipan {
    padding: 60px 0 0 !important;
}

/* 메인 게시판·추천강좌 영역 배경 */
.home-main-page .bg.gasipan {
	display: block;
	width: 100%;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	padding: 60px 0 0 !important;
	background-color: #f4f7fc;
	background-image: url(/files/images/main/bg_main1.png);
	background-repeat: no-repeat;
	padding-bottom: 60px !important;
}

.home-main-page .bg.gasipan > .section {
	position: relative;
	z-index: 1;
}

.home-main-page .bg.gasipan > .section::after {
	content: "";
	display: block;
	clear: both;
}

/* float·.bg 하단 padding 때문에 생기던 흰 띠 제거 → COURSES(파란) 섹션과 붙임 */
.home-main-page .bg.gasipan + .section.bg_blue {
	margin-top: 0 !important;
}


.home-main-page .gasipan .main_board .bbody {
  max-height: 366px;
	/* overflow-y: auto;
	overflow-x: hidden; */
  overflow: hidden;
}

.home-main-page .gasipan .main_board {
  padding-top: 20px;
  padding-bottom: 16px;
  border-radius: 12px;
}

.home-main-page .gasipan .sample-board-menu {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 16px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 4px;
	padding: 0 24px 0;
	border-bottom: 1px solid #e8ecf4;
}

.home-main-page .gasipan .sample-board-more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 0 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: #eef2fb;
	color: #3b6fd4;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.home-main-page .gasipan .sample-board-more::after {
	content: "→";
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
}

.home-main-page .gasipan .sample-board-more:hover {
	background: #e3ebff;
	color: #245fa8;
	box-shadow: 0 2px 8px rgba(36, 95, 168, 0.12);
}

.home-main-page .gasipan .sample-board-more[hidden] {
	display: none !important;
}

.home-main-page .gasipan .sample-board-menu-start {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 12px 28px;
	min-width: 0;
}

.home-main-page .gasipan .sample-board-title {
	margin: 0;
	padding-bottom: 10px;
	color: #1a2b4a;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	text-rendering: auto;
}

.home-main-page .gasipan .sample-board-tabs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.home-main-page .gasipan .sample-board-tabs > li {
	position: relative;
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 16px 12px;
	line-height: 1.35;
	font-size: 16px;
	font-weight: 700;
	color: #8a90a0;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	text-rendering: auto;
}

.home-main-page .gasipan .sample-board-tabs > li + li {
	padding-left: 18px;
}

.home-main-page .gasipan .sample-board-tabs > li + li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-60%);
	width: 1px;
	height: 14px;
	background: #d8dee8;
}

.home-main-page .gasipan .sample-board-menu .bmenus.active {
	color: #1f2533;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.home-main-page .gasipan .sample-board-menu .bmenus.active:after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 0;
	height: 3px;
	background: #2f5fd0;
	border-radius: 999px;
}


.home-main-page .gasipan .boxqna {
	padding: 0 0 4px;
}

.home-main-page .gasipan .boxqna .btext {
	margin: 0;
	padding: 10px 24px;
	width: 100%;
	box-sizing: border-box;
	transition: background-color 0.18s ease;
	cursor: pointer;
}

.home-main-page .gasipan .boxqna .btext:hover {
	background-color: #f0f8ff;
}

.home-main-page .gasipan .boxqna .btext + .btext {
	border-top: 1px dashed #e2e7f0;
}

.home-main-page .gasipan .boxqna ul {
	margin: 0;
	padding: 0;
}

.home-main-page .gasipan .boxqna ul li {
	list-style: none;
}

.home-main-page .gasipan .boxqna ul li:first-child {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	overflow: visible;
	white-space: normal;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.home-main-page .gasipan .boxqna .btext > ul {
	width: 100%;
}

/* contents.css / base.css 의 float·absolute·고정폭 덮어쓰기 (글쓴이·날짜 겹침 방지) */
.home-main-page .gasipan .boxqna .btext > ul > li:first-child > a.sample-qna-link,
.home-main-page .gasipan .boxqna .btext > ul > li:first-child > a {
	float: none !important;
	width: auto !important;
	max-width: 100%;
}

.home-main-page .gasipan .boxqna .btext > ul > li:first-child > span.no,
.home-main-page .gasipan .boxqna .btext > ul > li:first-child .no {
	float: none !important;
	width: auto !important;
}

.home-main-page .gasipan .boxqna .btext > ul > li:first-child > span.nick,
.home-main-page .gasipan .boxqna .btext > ul > li:first-child > span.date {
	float: none !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	left: auto !important;
	right: auto !important;
}

.home-main-page .gasipan .boxqna ul li:first-child .nick {
	margin-left: auto;
	min-width: 104px;
	max-width: 132px;
	margin-right: 20px;
	padding-right: 4px;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
}

.home-main-page .gasipan .boxqna ul li:first-child .date {
	flex: 0 0 auto;
	min-width: 86px;
	text-align: left;
}

@media screen and (min-width: 992px) {
	.home-main-page .gasipan .boxqna ul li:first-child .nick {
		min-width: 88px;
		max-width: 108px;
		margin-right: 8px;
	}

	.home-main-page .gasipan .boxqna ul li:first-child .date {
		min-width: 74px;
	}

	.home-main-page .gasipan .boxqna .sample-qna-link {
		flex: 1 1 0;
		min-width: 0;
	}

	.home-main-page .gasipan .boxqna .sample-qna-title {
		flex: 1 1 auto;
		max-width: none;
	}

	.home-main-page .gasipan .boxqna .sample-qna-title-text {
		max-width: 32ch;
		text-overflow: clip;
	}
}

.home-main-page .gasipan .boxqna .contents {
	display: none !important;
}

.home-main-page .gasipan .boxqna .no {
	flex: 0 0 auto;
	color: #7d8492;
	font-size: 13px;
	line-height: 1;
}

.home-main-page .gasipan .boxqna .sample-qna-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 1 1 auto;
	min-width: 0;
}

.home-main-page .gasipan .boxqna .sample-qna-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 4px 6px;
	border-radius: 999px;
	background: #dbeafe;
	border: 1px solid #bfdbfe;
	color: #3b82f6;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.home-main-page .gasipan .boxqna .sample-qna-badge.is-reply {
	background: #4e6ce7;
	border: 1px solid #2563eb;
	color: #ffffff;
}

.home-main-page .gasipan .boxqna .sample-qna-reply-arrow {
	flex: 0 0 auto;
	margin-right: 2px;
	color: #e53935;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
}

.home-main-page .gasipan .boxqna .sample-qna-link--reply {
	padding-left: 12px;
}

.home-main-page .gasipan .boxqna .sample-qna-link img {
	flex: 0 0 auto;
}

.home-main-page .gasipan .boxqna .sample-qna-link img[src*="blank_detph"],
.home-main-page .gasipan .boxqna .sample-qna-link img[src*="reply_icon"] {
	display: none !important;
}

.home-main-page .gasipan .boxqna .sample-qna-title {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	color: #5f6570;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.03em;
}

.home-main-page .gasipan .boxqna .sample-qna-title-text {
	display: inline-block;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	color: #5f6570;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}

/* 자물쇠·NEW — 제목 글자 바로 뒤 (flex 늘림으로 밀리지 않게) */
.home-main-page .gasipan .boxqna .sample-qna-title .lockIcon,
.home-main-page .gasipan .boxqna .sample-qna-title > img.lockIcon {
	flex: 0 0 auto;
	display: inline-block;
	width: auto !important;
	height: auto !important;
	margin: 0 0 0 2px;
	vertical-align: middle;
}

.home-main-page .gasipan .boxqna .sample-qna-icons {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	flex: 0 0 auto;
	margin-left: 0;
	gap: 4px;
}

.home-main-page .gasipan .boxqna .sample-qna-link:hover .sample-qna-title {
	color: #2f5fd0;
}

.home-main-page .gasipan .boxqna .sample-qna-title .newIcon,
.home-main-page .gasipan .boxqna .sample-qna-title .sample-qna-new {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	margin: 0 0 0 4px;
	vertical-align: middle;
}

.home-main-page .gasipan .boxqna .nick,
.home-main-page .gasipan .boxqna .date {
	flex: 0 0 auto;
	color: #6f7685;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	text-align: left;
}

.home-main-page .gasipan .boxnotice {
	padding: 0 0 4px;
}

.home-main-page .gasipan .boxnotice .btext {
	margin: 0;
	padding: 10px 24px;
	width: 100%;
	box-sizing: border-box;
	transition: background-color 0.18s ease;
	cursor: pointer;
}

.home-main-page .gasipan .boxnotice .btext:hover {
	background-color: #f0f4fa;
}

.home-main-page .gasipan .boxnotice .btext + .btext {
	border-top: 1px dashed #e2e7f0;
}

.home-main-page .gasipan .boxnotice ul {
	margin: 0;
	padding: 0;
}

.home-main-page .gasipan .boxnotice ul li {
	list-style: none;
}

.home-main-page .gasipan .boxnotice ul li:first-child {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
}

.home-main-page .gasipan .boxnotice .btext > ul {
	width: 100%;
}

/* contents.css float·고정폭 덮어쓰기 (글쓴이·날짜 겹침 방지) */
.home-main-page .gasipan .boxnotice .btext > ul > li:first-child > a,
.home-main-page .gasipan .boxnotice .btext > ul > li:first-child .sample-notice-link {
	float: none !important;
	width: auto !important;
	max-width: 100%;
}

.home-main-page .gasipan .boxnotice .btext > ul > li:first-child > span.no,
.home-main-page .gasipan .boxnotice .btext > ul > li:first-child .no {
	float: none !important;
	width: auto !important;
}

.home-main-page .gasipan .boxnotice .btext > ul > li:first-child > span.nick,
.home-main-page .gasipan .boxnotice .btext > ul > li:first-child > span.date,
.home-main-page .gasipan .boxnotice .btext > ul > li:first-child .nick,
.home-main-page .gasipan .boxnotice .btext > ul > li:first-child .date {
	float: none !important;
	position: static !important;
	width: auto !important;
	max-width: none !important;
	left: auto !important;
	right: auto !important;
}

.home-main-page .gasipan .boxnotice .contents {
	display: none !important;
}

.home-main-page .gasipan .boxnotice .sample-notice-no {
	flex: 0 0 auto;
	color: #7d8492;
	font-size: 13px;
	line-height: 1;
}

.home-main-page .gasipan .boxnotice .sample-notice-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.home-main-page .gasipan .boxnotice .sample-notice-title {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
	color: #5f6570;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.03em;
  margin-left: 10px;
}

.home-main-page .gasipan .boxnotice .sample-notice-title-text {
	display: block;
	flex: 1 1 0%;
	min-width: 0;
	color: #5f6570;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.home-main-page .gasipan .boxnotice .sample-notice-icons {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: 6px;
}

.home-main-page .gasipan .boxnotice .sample-notice-link:hover .sample-notice-title {
	color: #2f5fd0;
}

.home-main-page .gasipan .boxnotice .sample-notice-icons .lockIcon,
.home-main-page .gasipan .boxnotice .sample-notice-icons .newIcon {
	flex: 0 0 auto;
}

.home-main-page .gasipan .boxnotice .sample-notice-icons .newIcon {
	display: inline-flex;
	align-items: center;
}

.home-main-page .gasipan .boxnotice ul li:first-child .nick {
	flex: 0 0 auto;
	margin-left: auto;
	min-width: 48px;
	padding-left: 12px;
	color: #6f7685;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	text-align: right;
}

.home-main-page .gasipan .boxnotice ul li:first-child .date {
	flex: 0 0 auto;
	min-width: 88px;
	margin-left: 0;
	padding-left: 12px;
	color: #6f7685;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
	text-align: right;
}

.home-main-page .gasipan .sample-guide-panel {
	padding: 13px 18px 17px;
	border: 1px solid #e2e6ee;
	border-radius: 12px;
	background: #fff;
    border: 1px solid #d3d3d3;
    box-shadow: rgb(100 100 111 / 10%) 0px 5px 25px 0px;
	text-align: left;
}

.home-main-page .gasipan .sample-guide-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 14px;
	row-gap: 6px;
	padding-bottom: 8px;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
    justify-content: space-between;
}

.home-main-page .gasipan .sample-guide-head h2 {
	margin: 0;
	color: #2a2f3a;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
    padding-top: 2px;
}

.home-main-page .gasipan .sample-guide-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 0;
}

.home-main-page .gasipan .sample-guide-count {
	color: #6a7283;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.home-main-page .gasipan .sample-guide-count .sample-guide-current {
	color: #2f5fd0;
}

.home-main-page .gasipan .sample-guide-nav {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.home-main-page .gasipan .sample-guide-arrow {
	padding: 0;
	border: 0;
	background: transparent;
	color: #555c69;
	font-size: 0;
	font-weight: normal;
	line-height: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	min-height: 32px;
}

.home-main-page .gasipan .sample-guide-arrow .sample-guide-arrow-icon {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.home-main-page .gasipan .sample-guide-pause {
	padding: 0;
	border: 0;
	background: transparent;
	color: #555c69;
	font-size: 0;
	font-weight: normal;
	line-height: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* min-width: 32px; */
	min-height: 32px;
	position: relative;
}

.home-main-page .gasipan .sample-guide-pause .sample-guide-pause-icon {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.home-main-page .gasipan .sample-guide-pause .sample-guide-pause-icon--hidden {
	display: none;
}

.home-main-page .gasipan .sample-guide-arrow:hover {
	color: #2f5fd0;
}

.home-main-page .gasipan .sample-guide-pause:hover {
	color: #2f5fd0;
}

.home-main-page .gasipan .sample-guide-slider {
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

.home-main-page .gasipan .sample-guide-track {
	display: flex;
	transition: transform 0.35s ease;
	will-change: transform;
}

.home-main-page .gasipan .sample-guide-slide {
	flex: 0 0 100%;
	max-width: 100%;
}

.home-main-page .gasipan .sample-guide-card {
	display: block;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
}

/* 메인 추천강좌 슬라이드 카드 (main.html — 인라인 제거) */
.home-main-page .gasipan .sample-guide-card.main-guide-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 240px;
	padding: 30px 28px 24px;
	border-radius: 10px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	box-sizing: border-box;
}

.home-main-page .gasipan .sample-guide-card.main-guide-card:hover {
	color: #fff;
	text-decoration: none;
}

.home-main-page .gasipan .main-guide-card--pass {
	background: linear-gradient(135deg, #06a378 0%, #33439c 100%);
}

.home-main-page .gasipan .main-guide-card--pkg {
	background: linear-gradient(135deg, #af6901 0%, #35c8a7 100%);
}

@keyframes mainGuideSpotPulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.88;
	}
	50% {
		transform: scale(1.14);
		opacity: 1;
	}
}

.home-main-page .gasipan .main-guide-card__spot {
	position: absolute;
	right: -42px;
	top: -47px;
	width: 228px;
	height: 228px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
	transform-origin: center;
	animation: mainGuideSpotPulse 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
	.home-main-page .gasipan .main-guide-card__spot {
		animation: none;
	}
}

.home-main-page .gasipan .main-guide-card__copy {
	position: relative;
	z-index: 1;
	max-width: 58%;
	min-width: 0;
}

.home-main-page .gasipan .main-guide-card__heading {
	display: block;
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0em;
    color: #fff;
	width: 300px;
}

.home-main-page .gasipan .main-guide-card__text {
	margin: 0 0 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.92);
	word-break: keep-all;
}

.home-main-page .gasipan .main-guide-card__more {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
}

.home-main-page .gasipan .main-guide-card__aside {
	position: relative;
	z-index: 1;
	flex: 0 0 130px;
    height: 175px;
    margin-right: 9px;
}

.home-main-page .gasipan .main-guide-card__visual {
	position: absolute;
	right: 0;
	bottom: 0;
	max-width: 130px;
	max-height: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.home-main-page .gasipan .main-guide-card__ticket {
	position: absolute;
	right: 4px;
	bottom: 6px;
	width: 118px;
	height: 82px;
	padding: 16px 12px;
	border-radius: 18px;
	background: linear-gradient(135deg, #5a83ff 0%, #2644ff 100%);
	box-shadow: 0 16px 28px rgba(17, 27, 99, 0.28);
	transform: rotate(-14deg);
	box-sizing: border-box;
}

.home-main-page .gasipan .main-guide-card__ticket-hole {
	position: absolute;
	top: 33px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #4153cf;
}

.home-main-page .gasipan .main-guide-card__ticket-hole--l {
	left: -8px;
}

.home-main-page .gasipan .main-guide-card__ticket-hole--r {
	right: -8px;
}

.home-main-page .gasipan .main-guide-card__ticket-kicker {
	display: block;
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.8);
}

.home-main-page .gasipan .main-guide-card__ticket-name {
	display: block;
	margin-top: 10px;
	font-size: 25px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #fff;
}

.home-main-page .gasipan .main-guide-card__monitor {
	position: absolute;
	right: 10px;
	bottom: 18px;
	width: 118px;
	height: 72px;
	border-radius: 12px;
	background: #f7fbff;
	box-shadow: 0 14px 24px rgba(17, 109, 93, 0.22);
}

.home-main-page .gasipan .main-guide-card__monitor-base {
	position: absolute;
	left: 50%;
	bottom: -15px;
	width: 46px;
	height: 8px;
	margin-left: -23px;
	border-radius: 999px;
	background: rgba(247, 251, 255, 0.96);
}

.home-main-page .gasipan .main-guide-card__monitor-neck {
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 12px;
	height: 16px;
	margin-left: -6px;
	border-radius: 4px;
	background: rgba(247, 251, 255, 0.96);
}

.home-main-page .gasipan .main-guide-card__monitor-inner {
	position: absolute;
	left: 14px;
	right: 14px;
	top: 12px;
	bottom: 14px;
	border: 2px solid #dbe5ff;
	border-radius: 10px;
}

.home-main-page .gasipan .main-guide-card__chart {
	position: absolute;
	left: 14px;
	right: 18px;
	top: 20px;
	height: 26px;
	border-left: 3px solid transparent;
	border-bottom: 3px solid #ff6e9e;
	transform: skew(-26deg);
}

.home-main-page .gasipan .main-guide-card__chart-cap {
	position: absolute;
	right: 24px;
	top: 17px;
	width: 10px;
	height: 10px;
	border-top: 3px solid #ff6e9e;
	border-right: 3px solid #ff6e9e;
	transform: rotate(10deg);
}

.home-main-page .gasipan .sample-guide-banner {
	overflow: hidden;
	border-radius: 0;
	background: #eef7f6;
}

.home-main-page .gasipan .sample-guide-banner-top {
	position: relative;
	padding: 16px 20px 18px;
	background: linear-gradient(135deg, #0f4fd0 0%, #0d2b73 100%);
	color: #fff;
}

.home-main-page .gasipan .sample-guide-banner-top:after {
	content: "";
	position: absolute;
	right: -26px;
	top: -18px;
	width: 130px;
	height: 130px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.09);
	box-shadow:
		-42px 28px 0 rgba(255, 255, 255, 0.06),
		-92px 70px 0 rgba(255, 255, 255, 0.05);
}

.home-main-page .gasipan .sample-guide-banner-top strong {
	position: relative;
	z-index: 1;
	display: block;
	margin-bottom: 6px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.05em;
}

.home-main-page .gasipan .sample-guide-banner-top p {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.88);
}

.home-main-page .gasipan .sample-guide-banner-body {
	padding: 14px 18px 16px;
	background: #edf8f6;
}

.home-main-page .gasipan .sample-guide-banner-body ul {
	margin: 0;
	padding: 0;
}

.home-main-page .gasipan .sample-guide-banner-body li {
	position: relative;
	margin: 0;
	padding: 0 0 0 12px;
	list-style: none;
	color: #314256;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: -0.03em;
}

.home-main-page .gasipan .sample-guide-banner-body li + li {
	margin-top: 6px;
}

.home-main-page .gasipan .sample-guide-banner-body li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #ff7e31;
}

.home-main-page .gasipan .sample-guide-banner-body b {
	color: #ff6e1f;
}

.sample-mini-banner-list {
	display: flex;
	gap: 14px;
	margin-top: 0;
}

.sample-mini-banner-card {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
}

.sample-mini-banner-card + .sample-mini-banner-card:before {
	content: "";
	position: absolute;
	left: -7px;
	top: 12px;
	bottom: 0px;
	width: 1px;
	border-left: 1px dashed #d3d3d3;
}

.sample-mini-banner-icon {
	flex: 0 0 auto;
	width: 70px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* border: 1px solid #e3e7ef;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 22px rgba(31, 45, 61, 0.06); */
	color: #4d5fca;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.sample-mini-banner-icon svg {
	width: 30px;
	height: 30px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sample-mini-banner-text {
	min-width: 0;
	text-align: center;
}

.sample-mini-banner-text strong {
	display: block;
	margin-bottom: 0;
  color: #6a7999;
  font-size: 13px;
  font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

.sample-mini-banner-text p {
	display: none;
}

.sample-recommend-wrap {
	margin-top: 14px;
	padding: 0 16px 14px;
	border: 0;
	border-radius: 13px;
	background: #f3f7ff;
  border: 1px solid #d3d3d3;
  box-shadow: rgb(100 100 111 / 10%) 0px 5px 25px 0px;
}

/* list_four(추천강좌+4타일): contents.css float(li) 간섭 제거 — sample.css에서 이식 */
.home-main-page .gasipan .right_sec .list_four {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.home-main-page .gasipan .list_four > .sample-guide-panel {
	float: none;
	width: 100%;
	max-width: 100%;
	margin: 0;
	box-sizing: border-box;
}

.home-main-page .gasipan .list_four > .sample-detached-banner-list {
	float: none;
	width: 100%;
	max-width: 100%;
	clear: both;
	box-sizing: border-box;
}

.home-main-page .gasipan .list_four > li {
	float: none;
	width: auto;
	margin: 0;
}

/* base.css body * { font-family: Pretendard !important } 대응 */
.home-main-page .material-symbols-outlined,
.home-main-page .gasipan .material-symbols-outlined {
	font-family: 'Material Symbols Outlined' !important;
	font-weight: normal !important;
	font-style: normal !important;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

/* 고객센터 > Material Symbols */
.home-main-page .icon_ani.etc_color1--symbol,
.home-main-page .icon_ani.etc_color2--symbol,
.home-main-page .icon_ani.etc_color3--symbol,
.home-main-page .icon_ani.etc_color4--symbol {
	background-color: #fff !important;
	background-image: none !important;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.home-main-page .icon_ani.etc_color1--symbol:hover,
.home-main-page .icon_ani.etc_color2--symbol:hover,
.home-main-page .icon_ani.etc_color3--symbol:hover,
.home-main-page .icon_ani.etc_color4--symbol:hover {
	background-color: #edf4ff !important;
	background-image: none !important;
	border-color: #c5d9f5;
}

.home-main-page .icon_ani.etc_color1--symbol .etc-service-symbol,
.home-main-page .icon_ani.etc_color2--symbol .etc-service-symbol,
.home-main-page .icon_ani.etc_color3--symbol .etc-service-symbol,
.home-main-page .icon_ani.etc_color4--symbol .etc-service-symbol {
	position: absolute;
	left: 50%;
	top: 35%;
	transform: translate(-50%, calc(-50% + 10px));
	font-size: 42px;
	line-height: 1;
	color: #666666;
	font-family: 'Material Symbols Outlined' !important;
	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
	transition: color 0.25s ease;
	pointer-events: none;
}

.home-main-page .icon_ani.etc_color1--symbol:hover .etc-service-symbol,
.home-main-page .icon_ani.etc_color2--symbol:hover .etc-service-symbol,
.home-main-page .icon_ani.etc_color3--symbol:hover .etc-service-symbol,
.home-main-page .icon_ani.etc_color4--symbol:hover .etc-service-symbol {
	color: #0059ff;
}

/* 클린센터(verified_user) — 동일 크기로 보이도록만 살짝 확대 */
.home-main-page .icon_ani.etc_color2--symbol .etc-service-symbol {
	font-size: 48px;
	font-variation-settings: 'FILL' 0, 'wght' 220, 'GRAD' 0, 'opsz' 52;
}

.sample-detached-banner-list {
	display: flex;
	gap: 18px;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 18px;
}

.sample-detached-banner-card {
	flex: 1 1 0;
	max-width: 100%;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	min-height: 106px;
	padding: 14px 14px 14px;
	border-radius: 12px;
	background: #fff;
	text-align: center;
	border: 1px solid #d3d3d3;
	box-shadow: rgb(100 100 111 / 10%) 0px 5px 25px 0px;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition:
		box-shadow 0.25s ease,
		border-color 0.25s ease,
		background 0.25s ease;
}

.sample-detached-banner-card::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	height: 100%;
	background:
		radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.5) 0 9px, transparent 10px),
		radial-gradient(circle at 72% 8%, rgba(255, 255, 255, 0.35) 0 13px, transparent 14px),
		linear-gradient(180deg, #72d7ff 0%, #2f8fff 54%, #2563eb 100%);
	border-radius: 50% 50% 0 0 / 18% 18% 0 0;
	opacity: 0;
	transform: translateY(105%);
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.sample-detached-banner-card:hover,
.sample-detached-banner-card:focus-visible {
	transform: none;
	border-color: #69b7ff;
	background: #f8faff;
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

.sample-detached-banner-card:hover::before,
.sample-detached-banner-card:focus-visible::before {
	opacity: 1;
	transform: translateY(0);
}

.sample-detached-banner-card:focus-visible {
	outline: 2px solid #2f5fd0;
	outline-offset: 2px;
}

.sample-detached-banner-icon,
.sample-detached-banner-text {
	position: relative;
	z-index: 1;
}

.sample-detached-banner-icon {
	flex: 0 0 auto;
	width: 100%;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4d5fca;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.sample-detached-banner-icon svg {
	width: 28px;
	height: 28px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sample-detached-banner-icon .material-symbols-outlined {
	font-size: 32px;
	line-height: 1;
	font-weight: normal !important;
	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

.home-main-page .gasipan .sample-detached-banner-icon {
	height: auto;
	min-height: 44px;
}

.home-main-page .gasipan .sample-detached-banner-icon svg {
	width: 34px;
	height: 34px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition:
		transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
		color 0.35s ease,
		filter 0.35s ease;
}

.home-main-page .gasipan .sample-detached-banner-icon .material-symbols-outlined {
	font-size: 50px;
	line-height: 1;
	font-weight: normal !important;
	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
	transition:
		transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
		color 0.35s ease,
		filter 0.35s ease,
		font-variation-settings 0.4s ease;
}

.home-main-page .gasipan .sample-detached-banner-card--pass-story .sample-detached-banner-icon .material-symbols-outlined {
	font-size: 54px;
	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
}

.home-main-page .gasipan .sample-detached-banner-card:hover .sample-detached-banner-icon,
.home-main-page .gasipan .sample-detached-banner-card:focus-visible .sample-detached-banner-icon {
	color: #ffffff;
}

.home-main-page .gasipan .sample-detached-banner-card:hover .sample-detached-banner-icon svg,
.home-main-page .gasipan .sample-detached-banner-card:focus-visible .sample-detached-banner-icon svg {
	transform: scale(1.14) translateY(-6px);
	filter: drop-shadow(0 8px 16px rgba(37, 99, 235, 0.45));
}

.home-main-page .gasipan .sample-detached-banner-card:hover .sample-detached-banner-icon .material-symbols-outlined,
.home-main-page .gasipan .sample-detached-banner-card:focus-visible .sample-detached-banner-icon .material-symbols-outlined {
	transform: scale(1.14) translateY(-8px) rotate(-8deg);
	color: #ffffff;
	font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 48;
	filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.28));
	animation: sampleBannerIconPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-main-page .gasipan .sample-detached-banner-card:hover .sample-detached-banner-text strong,
.home-main-page .gasipan .sample-detached-banner-card:focus-visible .sample-detached-banner-text strong {
	color: #ffffff;
}

.sample-detached-banner-text {
	min-width: 0;
	text-align: center;
	margin-top: 12px;
}

.sample-detached-banner-text strong {
	display: block;
	color: #2b2f36;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.03em;
	word-break: keep-all;
	transition: color 0.35s ease;
}

@keyframes sampleBannerIconPop {
	0% {
		transform: scale(1) translateY(0) rotate(0);
	}
	35% {
		transform: scale(1.22) translateY(-10px) rotate(-12deg);
	}
	65% {
		transform: scale(1.1) translateY(-5px) rotate(4deg);
	}
	100% {
		transform: scale(1.14) translateY(-8px) rotate(-8deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-main-page .gasipan .sample-detached-banner-card:hover .sample-detached-banner-icon .material-symbols-outlined,
	.home-main-page .gasipan .sample-detached-banner-card:focus-visible .sample-detached-banner-icon .material-symbols-outlined {
		animation: none !important;
		transform: none;
	}
}

.sample-course-showcase {
	margin-top: 8px;
	max-width: 100%;
}

.sample-course-subtitle {
	margin: 10px 0 0;
	color: #7a8394;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

.sample-course-head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 12px;
}

.sample-course-intro {
	display: none;
}

.sample-course-intro strong {
	display: block;
	color: #171b24;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.05em;
	word-break: keep-all;
}

.sample-course-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 0;
	flex-shrink: 0;
}

.sample-course-more {
	display: none;
}

.sample-course-more:hover {
	text-decoration: none;
}

.sample-course-nav {
	width: 32px;
	height: 32px;
	border: 1px solid #d7dde8;
	border-radius: 50%;
	background: #fff;
	color: #1e2430;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sample-course-nav:hover {
	border-color: #b9c4d8;
	background: #f6f8fc;
}

.sample-course-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.sample-course-slider {
	overflow: hidden;
}

.sample-course-rail {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	padding: 2px 2px 6px;
	scroll-behavior: smooth;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.sample-course-rail::-webkit-scrollbar {
	display: none;
}

.sample-course-item {
	position: relative;
	flex: 0 0 calc((100% - 36px) / 3);
	min-width: calc((100% - 36px) / 3);
	display: flex;
	flex-direction: column;
	min-height: 164px;
	padding: 18px 20px 18px;
	border: 1px solid #e7ecf3;
	border-radius: 14px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	box-shadow: 0 4px 18px rgba(31, 45, 61, 0.06);
	overflow: hidden;
	scroll-snap-align: start;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	--sample-course-blob: rgba(218, 230, 255, 0.88);
	--sample-course-blob-soft: rgba(238, 244, 255, 0.95);
	--sample-course-dot: rgba(141, 176, 255, 0.8);
	--sample-course-line: rgba(204, 217, 246, 0.9);
}

.sample-course-item:hover {
	transform: translateY(-2px);
	border-color: #d7dfea;
	box-shadow: 0 8px 22px rgba(31, 45, 61, 0.08);
	text-decoration: none;
}

.sample-course-item:before {
	content: "";
	position: absolute;
	right: -18px;
	bottom: -22px;
	width: 220px;
	height: 138px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 42% 42%, var(--sample-course-blob-soft) 0 34%, var(--sample-course-blob) 35% 72%, rgba(255, 255, 255, 0) 73%);
	opacity: 0.95;
	z-index: 0;
}

.sample-course-item:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle, var(--sample-course-dot) 0 1.2px, transparent 1.3px) calc(100% - 56px) 34px / 8px 8px no-repeat,
		radial-gradient(circle, var(--sample-course-dot) 0 1.2px, transparent 1.3px) calc(100% - 48px) 34px / 8px 8px no-repeat,
		radial-gradient(circle, var(--sample-course-dot) 0 1.2px, transparent 1.3px) calc(100% - 40px) 34px / 8px 8px no-repeat,
		radial-gradient(circle, var(--sample-course-dot) 0 1.2px, transparent 1.3px) calc(100% - 56px) 42px / 8px 8px no-repeat,
		radial-gradient(circle, var(--sample-course-dot) 0 1.2px, transparent 1.3px) calc(100% - 48px) 42px / 8px 8px no-repeat,
		radial-gradient(circle, var(--sample-course-dot) 0 1.2px, transparent 1.3px) calc(100% - 40px) 42px / 8px 8px no-repeat,
		linear-gradient(var(--sample-course-line), var(--sample-course-line)) 34px calc(100% - 38px) / 1px 24px no-repeat,
		linear-gradient(var(--sample-course-line), var(--sample-course-line)) 34px calc(100% - 14px) / 24px 1px no-repeat;
	opacity: 0.6;
}

.sample-course-title {
	display: block;
	position: relative;
	z-index: 2;
	max-width: 56%;
	color: #171b24;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}

.sample-course-desc {
	display: block;
	position: relative;
	z-index: 2;
	max-width: 52%;
	margin-top: 8px;
	min-height: 40px;
	color: #666f80;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

.sample-course-link {
	display: inline-flex;
	align-items: center;
	position: relative;
	z-index: 3;
	margin-top: auto;
	color: #2f63d8;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.sample-course-link:after {
	content: "\2192";
	margin-left: 6px;
	font-size: 14px;
	font-weight: 700;
}

.sample-course-thumb {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	position: absolute;
	right: 20px;
	bottom: 14px;
	width: 122px;
	height: 88px;
	margin-top: 0;
	border-radius: 0;
	overflow: hidden;
	background: none;
	pointer-events: none;
	z-index: 2;
}

.sample-course-thumb img {
	display: none;
}

.sample-course-thumb:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 48% 52% 44% 56% / 44% 42% 58% 56%;
	background:
		radial-gradient(circle at 38% 38%, rgba(255, 255, 255, 0.92) 0 28%, rgba(255, 255, 255, 0) 29%),
		radial-gradient(circle at 52% 48%, var(--sample-course-blob-soft) 0 36%, var(--sample-course-blob) 37% 72%, rgba(255, 255, 255, 0) 73%);
	opacity: 0.92;
}

.sample-course-thumb:after {
	content: "";
	position: absolute;
	right: 12px;
	top: 10px;
	z-index: 1;
	width: 36px;
	height: 24px;
	background-image: radial-gradient(var(--sample-course-dot) 1.2px, transparent 1.2px);
	background-size: 8px 8px;
	opacity: 0.75;
}

.sample-course-item.theme-pass .sample-course-thumb {
	background: none;
}

.sample-course-item.theme-package .sample-course-thumb {
	background: none;
}

.sample-course-item.theme-basic .sample-course-thumb {
	background: none;
}

.sample-course-item.theme-major .sample-course-thumb {
	background: none;
}

.sample-course-item.theme-economy .sample-course-thumb {
	background: none;
}

.sample-course-item.theme-engineering .sample-course-thumb {
	background: none;
}

.sample-course-item.theme-pass {
	--sample-course-blob: rgba(214, 226, 255, 0.9);
	--sample-course-blob-soft: rgba(240, 245, 255, 0.96);
	--sample-course-dot: rgba(120, 154, 255, 0.78);
	--sample-course-line: rgba(200, 214, 247, 0.92);
}

.sample-course-item.theme-package {
	--sample-course-blob: rgba(214, 247, 245, 0.96);
	--sample-course-blob-soft: rgba(238, 255, 252, 0.98);
	--sample-course-dot: rgba(106, 214, 222, 0.72);
	--sample-course-line: rgba(199, 239, 236, 0.95);
}

.sample-course-item.theme-basic {
	--sample-course-blob: rgba(255, 226, 232, 0.92);
	--sample-course-blob-soft: rgba(255, 242, 245, 0.98);
	--sample-course-dot: rgba(255, 168, 185, 0.72);
	--sample-course-line: rgba(248, 215, 223, 0.92);
}

.sample-course-item.theme-major {
	--sample-course-blob: rgba(231, 240, 255, 0.94);
	--sample-course-blob-soft: rgba(246, 250, 255, 0.98);
	--sample-course-dot: rgba(158, 184, 255, 0.72);
	--sample-course-line: rgba(219, 229, 247, 0.95);
}

.sample-course-item.theme-economy {
	--sample-course-blob: rgba(220, 247, 244, 0.94);
	--sample-course-blob-soft: rgba(243, 255, 253, 0.98);
	--sample-course-dot: rgba(128, 225, 211, 0.72);
	--sample-course-line: rgba(211, 242, 237, 0.95);
}

.sample-course-item.theme-engineering {
	--sample-course-blob: rgba(255, 232, 228, 0.94);
	--sample-course-blob-soft: rgba(255, 244, 242, 0.98);
	--sample-course-dot: rgba(255, 176, 162, 0.72);
	--sample-course-line: rgba(246, 225, 220, 0.95);
}

.home-main-page .section.bg_blue,
.bg_blue {
	position: relative;
	margin-top: 0;
	background: linear-gradient(135deg, #3e77df 0%, #0043c9 52%, #2651ab 100%);
	overflow: hidden;
	max-width: 100%;
}

/* .home-main-page .section.bg_blue .section-best-subject {
	padding-top: 40px;
	padding-bottom: 40px;
} */

.bg_blue .sample-course-compare-wrap {
	margin: 0 auto;
	max-width: 1250px;
}

.sample-course-compare {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 22px;
	padding: 60px 34px 60px;
	border-radius: 22px;
	background: transparent;
	overflow: hidden;
}

.sample-course-compare:before {
	content: "";
	position: absolute;
	left: 170px;
    top: 54px;
	width: 96px;
	height: 72px;
	background-image: radial-gradient(rgba(102, 158, 255, 0.45) 1.4px, transparent 1.4px);
	background-size: 10px 10px;
	opacity: 0.9;
}

.sample-course-compare:after {
	content: "";
	position: absolute;
	left: 96px;
	bottom: -118px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(47, 104, 255, 0.35) 0 42%, rgba(33, 89, 242, 0.24) 43% 62%, rgba(255, 255, 255, 0) 63%);
}

.sample-course-compare-copy {
	position: relative;
	z-index: 1;
	flex: 0 0 226px;
	padding: 10px 4px 10px 0;
}

.sample-course-compare-copy em {
	display: block;
	margin-bottom: 12px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 11px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.18em;
}

.sample-course-compare-copy strong {
	display: block;
	color: #fff;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.sample-course-compare-line {
	position: relative;
	width: 72px;
	height: 3px;
	margin: 20px 0 18px;
	border-radius: 999px;
	background: rgba(142, 212, 255, 0.22);
	overflow: hidden;
}

.sample-course-compare-line::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 42%;
	height: 100%;
	border-radius: inherit;
	background: rgba(142, 212, 255, 0.95);
	transform: translateX(-120%);
	opacity: 0;
}

.section-best-subject.is-course-visible .sample-course-compare-line::after {
	animation: sampleCourseCopyLineSweep 2.4s ease-in-out infinite;
}

@keyframes sampleCourseCopyLineSweep {
	0% {
		transform: translateX(-120%);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	88% {
		opacity: 1;
	}
	100% {
		transform: translateX(320%);
		opacity: 0;
	}
}

.sample-course-compare-copy p {
	margin: 0;
	color: rgba(235, 242, 255, 0.84);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.bg_blue .sample-course-compare-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 22px;
	padding: 12px 22px;
	background: #1e5aa8;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
	letter-spacing: -0.02em;
	transition: background 0.2s ease, transform 0.15s ease;
	box-sizing: border-box;
}

.bg_blue .sample-course-compare-more:hover {
	background: #164a8e;
	color: #fff !important;
	text-decoration: none;
}

.sample-course-compare-grid {
	position: relative;
	z-index: 1;
	flex: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.sample-course-compare-card {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr auto;
	align-items: stretch;
	gap: 0 14px;
	padding: 0;
	overflow: hidden;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid rgba(226, 234, 248, 0.92);
	box-shadow: 0 10px 22px rgba(4, 34, 104, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	color: #182033;
	text-decoration: none;
}

.sample-course-compare-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 28px rgba(4, 34, 104, 0.18);
	text-decoration: none;
}

.sample-course-compare-icon {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: start;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin: 18px 0 18px 18px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.sample-course-compare-icon svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sample-course-compare-icon .material-symbols-outlined {
	font-family: 'Material Symbols Outlined' !important;
	font-size: 26px;
	line-height: 1;
	font-weight: normal !important;
	font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

.sample-course-compare-icon.is-pass {
	background: linear-gradient(135deg, #2a8cff 0%, #1f66ed 100%);
}

.sample-course-compare-icon.is-package {
	background: linear-gradient(135deg, #28cfb0 0%, #16a985 100%);
}

.sample-course-compare-icon.is-basic {
	background: linear-gradient(135deg, #ff7ca9 0%, #d7336b 100%);
}

.sample-course-compare-icon.is-major {
	background: linear-gradient(135deg, #7d5bff 0%, #5a3ee7 100%);
}

.sample-course-compare-icon.is-economy {
	background: linear-gradient(135deg, #6bcaf5 0%, #0082e9 100%);
}

.sample-course-compare-icon.is-engineering {
	background: linear-gradient(135deg, #ff9448 0%, #ff6d37 100%);
}

.sample-course-compare-body {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	padding: 18px 18px 10px 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sample-course-compare-title {
	display: block;
	color: #182033;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
	transition: color 0.2s ease;
}

.sample-course-compare-card:hover .sample-course-compare-title,
.sample-course-compare-card:focus-visible .sample-course-compare-title {
	color: #2563eb;
}

.sample-course-compare-card:hover:has(.sample-course-compare-icon.is-pass) .sample-course-compare-title,
.sample-course-compare-card:focus-visible:has(.sample-course-compare-icon.is-pass) .sample-course-compare-title {
	color: #1f66ed;
}

.sample-course-compare-card:hover:has(.sample-course-compare-icon.is-package) .sample-course-compare-title,
.sample-course-compare-card:focus-visible:has(.sample-course-compare-icon.is-package) .sample-course-compare-title {
	color: #16a985;
}

.sample-course-compare-card:hover:has(.sample-course-compare-icon.is-basic) .sample-course-compare-title,
.sample-course-compare-card:focus-visible:has(.sample-course-compare-icon.is-basic) .sample-course-compare-title {
	color: #d7336b;
}

.sample-course-compare-card:hover:has(.sample-course-compare-icon.is-major) .sample-course-compare-title,
.sample-course-compare-card:focus-visible:has(.sample-course-compare-icon.is-major) .sample-course-compare-title {
	color: #5a3ee7;
}

.sample-course-compare-card:hover:has(.sample-course-compare-icon.is-economy) .sample-course-compare-title,
.sample-course-compare-card:focus-visible:has(.sample-course-compare-icon.is-economy) .sample-course-compare-title {
	color: #0082e9;
}

.sample-course-compare-card:hover:has(.sample-course-compare-icon.is-engineering) .sample-course-compare-title,
.sample-course-compare-card:focus-visible:has(.sample-course-compare-icon.is-engineering) .sample-course-compare-title {
	color: #ff6d37;
}

.sample-course-compare-desc {
	display: -webkit-box;
	margin-top: 8px;
	/* min-height: calc(1.65em * 2); */
	color: #5f6878;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.03em;
	word-break: keep-all;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.sample-course-compare-morelink {
	grid-column: 1 / -1;
	grid-row: 2;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 18px 12px;
	font-size: 13px;
	font-weight: 700;
	color: #2563eb;
	letter-spacing: -0.02em;
	line-height: 1.2;
	background: #f0f4fa;
	border-top: 1px solid #e2e8f2;
	overflow: hidden;
}

/* 흰 영역 바로 아래 — 옆으로 이동하는 라인 */
.sample-course-compare-morelink::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 34%;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, #2563eb 48%, #60a5fa 52%, transparent);
	transform: translateX(-120%);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}

.section-best-subject.is-course-visible .sample-course-compare-morelink::before {
	animation: sampleCourseDividerSweep 2.8s ease-in-out infinite;
}

.section-best-subject.is-course-visible .sample-course-compare-card:nth-child(1) .sample-course-compare-morelink::before {
	animation-delay: 0s;
}

.section-best-subject.is-course-visible .sample-course-compare-card:nth-child(2) .sample-course-compare-morelink::before {
	animation-delay: 0.35s;
}

.section-best-subject.is-course-visible .sample-course-compare-card:nth-child(3) .sample-course-compare-morelink::before {
	animation-delay: 0.7s;
}

.section-best-subject.is-course-visible .sample-course-compare-card:nth-child(4) .sample-course-compare-morelink::before {
	animation-delay: 1.05s;
}

.section-best-subject.is-course-visible .sample-course-compare-card:nth-child(5) .sample-course-compare-morelink::before {
	animation-delay: 1.4s;
}

.section-best-subject.is-course-visible .sample-course-compare-card:nth-child(6) .sample-course-compare-morelink::before {
	animation-delay: 1.75s;
}

.sample-course-compare-card:has(.is-pass) .sample-course-compare-morelink::before {
	background: linear-gradient(90deg, transparent, #1f66ed 48%, #5b9fff 52%, transparent);
}

.sample-course-compare-card:has(.is-package) .sample-course-compare-morelink::before {
	background: linear-gradient(90deg, transparent, #16a985 48%, #4fd9b8 52%, transparent);
}

.sample-course-compare-card:has(.is-basic) .sample-course-compare-morelink::before {
	background: linear-gradient(90deg, transparent, #d7336b 48%, #ff8cb0 52%, transparent);
}

.sample-course-compare-card:has(.is-major) .sample-course-compare-morelink::before {
	background: linear-gradient(90deg, transparent, #5a3ee7 48%, #9b7fff 52%, transparent);
}

.sample-course-compare-card:has(.is-economy) .sample-course-compare-morelink::before {
	background: linear-gradient(90deg, transparent, #0082e9 48%, #5ec4ff 52%, transparent);
}

.sample-course-compare-card:has(.is-engineering) .sample-course-compare-morelink::before {
	background: linear-gradient(90deg, transparent, #ff6d37 48%, #ffb088 52%, transparent);
}

@keyframes sampleCourseDividerSweep {
	0% {
		transform: translateX(-120%);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(380%);
		opacity: 0;
	}
}

.sample-course-compare-morelink::after {
	content: "→";
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	margin-top: -2px;
}

.sample-course-compare-card:hover .sample-course-compare-morelink {
	color: #1d4ed8;
	background: #e8eef9;
}

.sample-course-compare-card:hover .sample-course-compare-morelink::before {
	animation-duration: 2s;
}

@media (prefers-reduced-motion: reduce) {
	.section-best-subject.is-course-visible .sample-course-compare-line::after,
	.section-best-subject.is-course-visible .sample-course-compare-morelink::before {
		animation: none !important;
		opacity: 1;
		transform: none;
	}

	.sample-course-compare-line::after {
		width: 32px;
		transform: none;
		opacity: 1;
	}

	.sample-course-compare-morelink::before {
		width: 100%;
		transform: none;
		opacity: 0.35;
		background: #c5d4ea;
	}
}

.sample-lecture-slider {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
}

.sample-lecture-track {
	display: flex;
	transition: transform 0.35s ease;
	will-change: transform;
}

.sample-lecture-slide {
	flex: 0 0 100%;
	max-width: 100%;
}

.sample-lecture-card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 210px;
	padding: 30px 28px;
	border-radius: 22px;
	overflow: hidden;
	color: #fff;
}

.sample-lecture-card.card-pass {
	background: linear-gradient(135deg, #404ca4 0%, #33439c 100%);
}

.sample-lecture-card.card-package {
	background: linear-gradient(135deg, #39b89b 0%, #35c8a7 100%);
}

.sample-lecture-card:before {
	content: "";
	position: absolute;
	right: -26px;
	top: -30px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}

.sample-lecture-copy {
	position: relative;
	z-index: 1;
	max-width: 58%;
}

.sample-lecture-copy strong {
	display: block;
	margin-bottom: 14px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

.sample-lecture-copy p {
	margin: 0 0 30px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -0.04em;
	color: rgba(255, 255, 255, 0.92);
	word-break: keep-all;
}

.sample-lecture-copy span {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.sample-lecture-visual {
	position: relative;
	z-index: 1;
	flex: 0 0 148px;
	height: 124px;
}

.sample-lecture-ticket {
	position: absolute;
	right: 4px;
	bottom: 6px;
	width: 118px;
	height: 82px;
	padding: 16px 12px;
	border-radius: 18px;
	background: linear-gradient(135deg, #5a83ff 0%, #2644ff 100%);
	box-shadow: 0 16px 28px rgba(17, 27, 99, 0.28);
	transform: rotate(-14deg);
}

.sample-lecture-ticket:before,
.sample-lecture-ticket:after {
	content: "";
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border-radius: 50%;
	background: #4153cf;
}

.sample-lecture-ticket:before {
	left: -8px;
}

.sample-lecture-ticket:after {
	right: -8px;
}

.sample-lecture-ticket em {
	display: block;
	font-style: normal;
	font-size: 9px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.8);
}

.sample-lecture-ticket b {
	display: block;
	margin-top: 10px;
	font-size: 25px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.05em;
}

.sample-lecture-monitor {
	position: absolute;
	right: 10px;
	bottom: 18px;
	width: 118px;
	height: 72px;
	border-radius: 12px;
	background: #f7fbff;
	box-shadow: 0 14px 24px rgba(17, 109, 93, 0.22);
}

.sample-lecture-monitor:before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -15px;
	width: 46px;
	height: 8px;
	margin-left: -23px;
	border-radius: 999px;
	background: rgba(247, 251, 255, 0.96);
}

.sample-lecture-monitor:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -9px;
	width: 12px;
	height: 16px;
	margin-left: -6px;
	border-radius: 4px;
	background: rgba(247, 251, 255, 0.96);
}

.sample-lecture-chart {
	position: absolute;
	left: 14px;
	right: 14px;
	top: 12px;
	bottom: 14px;
	border: 2px solid #dbe5ff;
	border-radius: 10px;
}

.sample-lecture-chart span {
	position: absolute;
	left: 14px;
	right: 18px;
	top: 20px;
	height: 26px;
	border-left: 3px solid transparent;
	border-bottom: 3px solid #ff6e9e;
	transform: skew(-26deg);
}

.sample-lecture-chart span:after {
	content: "";
	position: absolute;
	right: -4px;
	top: -3px;
	width: 10px;
	height: 10px;
	border-top: 3px solid #ff6e9e;
	border-right: 3px solid #ff6e9e;
	transform: rotate(10deg);
}

.sample-lecture-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 12px;
}

.sample-lecture-count {
	color: #697287;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.sample-lecture-count .sample-lecture-current {
	color: #2f5fd0;
}

.sample-lecture-arrow {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid #d9dfed;
	border-radius: 50%;
	background: #fff;
	color: #384052;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.sample-lecture-arrow:hover {
	border-color: #2f5fd0;
	color: #2f5fd0;
}

.sample-service-strip {
	background: #edf1fb;
	padding: 30px 0 28px;
}

.sample-service-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
}

.sample-service-panel {
	display: flex;
	align-items: center;
	gap: 34px;
}

.sample-service-copy {
	flex: 0 0 184px;
	max-width: 184px;
}

.sample-service-copy h2 {
	margin: 0 0 12px;
	color: #111;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.04em;
}

.sample-service-copy p {
	margin: 0;
	color: #6d7484;
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

.sample-service-grid {
	flex: 1;
}

.sample-service-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	margin: 0;
	padding: 0;
	gap: 18px;
}

.sample-service-item {
	flex: 0 0 92px;
	max-width: 92px;
	list-style: none;
}

.sample-service-item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	box-sizing: border-box;
	padding: 12px 8px 10px;
	background: #fff;
	border: 1px solid #dfe5f2;
	border-radius: 14px;
	box-shadow: 0 6px 18px rgba(31, 45, 61, 0.05);
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sample-service-item a:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(31, 45, 61, 0.1);
}

.sample-service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-bottom: 8px;
	color: #2f5fd0;
}

.sample-service-icon svg {
	width: 30px;
	height: 30px;
	stroke: currentColor;
}

.sample-service-label {
	color: #2f3136;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

.sample-service-label small {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #2f3136;
}

@media (max-width: 991px) {
	.sample-service-strip {
		padding: 28px 0 24px;
	}

	.sample-service-panel {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.sample-service-copy {
		max-width: 100%;
	}

	.sample-service-list {
		gap: 14px;
	}

	.home-main-page .gasipan .sample-board-menu {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
	}

	.home-main-page .gasipan .sample-board-menu-start {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.home-main-page .gasipan .sample-board-title {
		padding-bottom: 0;
		font-size: 26px;
	}

	.home-main-page .gasipan .sample-guide-panel {
		padding: 14px 14px 16px;
	}

	.home-main-page .gasipan .sample-guide-banner-top {
		padding: 14px 16px 16px;
	}

	.home-main-page .gasipan .sample-guide-banner-top strong {
		font-size: 20px;
	}

	.home-main-page .gasipan .sample-guide-banner-body {
		padding: 12px 14px 14px;
	}

	.home-main-page .gasipan .sample-guide-banner-body li {
		font-size: 12px;
	}

	.sample-mini-banner-list {
		flex-direction: column;
	}

	.sample-recommend-wrap {
		padding: 14px;
	}

	.sample-course-head {
		justify-content: flex-end;
		margin-bottom: 10px;
	}

	.sample-course-subtitle {
		margin-top: 8px;
		font-size: 13px;
	}

	.sample-course-intro strong {
		font-size: 24px;
	}

	.sample-course-actions {
		justify-content: flex-end;
	}

	.sample-course-item {
		flex: 0 0 84%;
		min-width: 84%;
		min-height: 156px;
		padding: 16px 16px 16px;
	}

	.sample-course-title {
		max-width: 58%;
		font-size: 15px;
	}

	.sample-course-desc {
		max-width: 56%;
		min-height: 34px;
		font-size: 12px;
	}

	.sample-course-link {
		font-size: 12px;
	}

	.sample-course-thumb {
		width: 156px;
		height: 98px;
	}

	.sample-course-thumb:before {
		width: 140px;
		height: 78px;
		border-radius: 58px 0 14px 0;
	}

	.sample-course-thumb:after {
		right: 18px;
		top: 12px;
		transform: scale(0.9);
		transform-origin: top right;
	}

	.sample-course-thumb img {
		width: 146px;
		height: 94px;
		transform: scale(1.28) translate(6px, 6px);
	}

	.sample-course-compare {
		flex-direction: column;
		padding: 22px 18px 18px;
		gap: 18px;
	}

	.sample-course-compare:before {
		left: auto;
		right: 18px;
		top: 14px;
		width: 76px;
		height: 52px;
	}

	.sample-course-compare:after {
		left: auto;
		right: -88px;
		bottom: -120px;
		width: 220px;
		height: 220px;
	}

	.sample-course-compare-copy {
		flex-basis: auto;
		padding: 0;
	}

	.sample-course-compare-copy strong {
		font-size: 23px;
	}

	.sample-course-compare-copy p {
		font-size: 12px;
		line-height: 1.7;
	}

	.sample-course-compare-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.sample-course-compare-icon {
		margin: 14px 0 14px 14px;
		width: 40px;
		height: 40px;
	}

	.sample-course-compare-body {
		padding: 14px 14px 8px 0;
	}

	.sample-course-compare-title {
		font-size: 16px;
	}

	.sample-course-compare-desc {
		font-size: 12px;
		margin-top: 8px;
		line-height: 1.6;
		min-height: calc(1.6em * 2);
	}

	.sample-course-compare-morelink {
		font-size: 12px;
		padding: 8px 14px 10px;
	}

	.sample-lecture-card {
		min-height: 190px;
		padding: 24px 22px;
	}

	.sample-lecture-copy {
		max-width: 64%;
	}

	.sample-lecture-copy strong {
		font-size: 24px;
	}

	.sample-lecture-copy p {
		font-size: 15px;
		margin-bottom: 24px;
	}

	.sample-lecture-visual {
		flex-basis: 118px;
		height: 104px;
	}
}

/* 가이드 시안: 연한 하늘색 + 소프트 카드(아이콘 박스·라인 아이콘) */
.home-main-page .sample-guide-soft.sample-guide-soft--draft {
	background: #edf6fc url("/files/images/bg_main2.png") center center / cover no-repeat;
	padding: 52px 0 58px;
}

.home-main-page .sample-guide-soft-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 4px;
	box-sizing: border-box;
}

.home-main-page .sample-guide-soft.sample-guide-soft--draft .sample-guide-hub-head {
	margin: 0 0 32px;
}

.home-main-page .sample-guide-soft-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	align-items: stretch;
}

.home-main-page .sample-guide-soft-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas:
		"soft-icon soft-title"
		"soft-icon soft-desc";
	column-gap: 14px;
	row-gap: 6px;
	align-items: start;
	padding: 16px 18px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.98);
	border: 1px solid rgba(226, 234, 248, 0.92);
	box-shadow: 0 10px 22px rgba(4, 34, 104, 0.12);
	text-decoration: none;
	transition:
		transform 0.14s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		box-shadow 0.14s ease,
		background 0.14s ease,
		border-color 0.14s ease;
	box-sizing: border-box;
	min-height: 0;
}

.home-main-page .sample-guide-soft-card:hover,
.home-main-page .sample-guide-soft-card:focus-visible {
	transform: translateY(-6px);
	background: linear-gradient(165deg, #ffffff 0%, #f3f7ff 55%, #e8efff 100%);
	border-color: #b8c8f0;
	box-shadow: 0px 8px 12px rgba(47, 95, 208, 0.18);
	text-decoration: none;
}

.home-main-page .theme-soft-blue.sample-guide-soft-card:hover,
.home-main-page .theme-soft-blue.sample-guide-soft-card:focus-visible {
	background: linear-gradient(165deg, #ffffff 0%, #eff6ff 100%);
	border-color: #93c5fd;
}

.home-main-page .theme-soft-blue.sample-guide-soft-card:hover .sample-guide-soft-title,
.home-main-page .theme-soft-blue.sample-guide-soft-card:focus-visible .sample-guide-soft-title {
	color: #3293ff;
}

.home-main-page .theme-soft-green.sample-guide-soft-card:hover,
.home-main-page .theme-soft-green.sample-guide-soft-card:focus-visible {
	background: linear-gradient(165deg, #ffffff 0%, #ecfdf5 100%);
	border-color: #b4dbcc;
}

.home-main-page .theme-soft-green.sample-guide-soft-card:hover .sample-guide-soft-title,
.home-main-page .theme-soft-green.sample-guide-soft-card:focus-visible .sample-guide-soft-title {
	color: #40896d;
}

.home-main-page .theme-soft-orange.sample-guide-soft-card:hover,
.home-main-page .theme-soft-orange.sample-guide-soft-card:focus-visible {
	background: linear-gradient(165deg, #ffffff 0%, #fff7ed 100%);
	border-color: #f5d8ba;
}

.home-main-page .theme-soft-orange.sample-guide-soft-card:hover .sample-guide-soft-title,
.home-main-page .theme-soft-orange.sample-guide-soft-card:focus-visible .sample-guide-soft-title {
	color: #dd8526;
}

.home-main-page .theme-soft-violet.sample-guide-soft-card:hover,
.home-main-page .theme-soft-violet.sample-guide-soft-card:focus-visible {
	background: linear-gradient(165deg, #ffffff 0%, #f5f3ff 100%);
	border-color: #d7cdff;
}

.home-main-page .theme-soft-violet.sample-guide-soft-card:hover .sample-guide-soft-title,
.home-main-page .theme-soft-violet.sample-guide-soft-card:focus-visible .sample-guide-soft-title {
	color: #6d28d9;
}

.home-main-page .sample-guide-soft-card:hover .sample-guide-soft-icon,
.home-main-page .sample-guide-soft-card:focus-visible .sample-guide-soft-icon {
	transform: scale(1.06);
}

.home-main-page .sample-guide-soft-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 12px;
	color: #4b5563;
	grid-area: soft-icon;
	align-self: start;
	transition: transform 0.14s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.home-main-page .sample-guide-soft-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.home-main-page .theme-soft-blue .sample-guide-soft-icon {
	background: #dbeafe;
}

.home-main-page .theme-soft-green .sample-guide-soft-icon {
	background: #d1fae5;
}

.home-main-page .theme-soft-orange .sample-guide-soft-icon {
	background: #ffedd5;
}

.home-main-page .theme-soft-violet .sample-guide-soft-icon {
	background: #ede9fe;
}

.home-main-page .theme-soft-cyan .sample-guide-soft-icon {
	background: #cffafe;
}

.home-main-page .theme-soft-slate .sample-guide-soft-icon {
	background: #e2e8f0;
}

.home-main-page .sample-guide-soft-title {
	display: block;
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	color: #182033;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
	grid-area: soft-title;
	min-width: 0;
	transition: color 0.14s ease;
}

.home-main-page .sample-guide-soft-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.65;
	color: #5f6878;
	font-weight: 500;
	letter-spacing: -0.03em;
	word-break: keep-all;
	grid-area: soft-desc;
	min-width: 0;
}

@media (max-width: 1024px) {
	.home-main-page .sample-guide-soft-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.home-main-page .sample-guide-soft-grid {
		grid-template-columns: 1fr;
	}
}

/* 가이드(GUIDE) 카드 섹션 */
.home-main-page .sample-guide-hub-wrap {
	background: #f4f8fe;
	padding: 56px 0 64px;
}

.home-main-page .sample-guide-hub {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 4px;
}

.home-main-page .sample-guide-hub-head {
	margin: 0 0 36px;
	text-align: left;
}

.home-main-page .sample-guide-hub-kicker {
	margin: 0 0 10px;
	color: #0055ff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.2;
}

.home-main-page .sample-guide-hub-title {
	margin: 0 0 12px;
	color: #000;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.045em;
	word-break: keep-all;
}

.home-main-page .sample-guide-hub-lead {
	margin: 0;
	max-width: 520px;
	color: #666;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

.home-main-page .sample-guide-hub-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

.home-main-page .sample-guide-hub-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-height: 0;
	padding: 22px 22px 18px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 2px 14px rgba(15, 23, 42, 0.06);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-main-page .sample-guide-hub-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
	text-decoration: none;
}

.home-main-page .sample-guide-hub-card-main {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

.home-main-page .sample-guide-hub-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	flex: 1;
}

.home-main-page .sample-guide-hub-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 0;
	border-radius: 12px;
}

.home-main-page .sample-guide-hub-icon svg,
.home-main-page .sample-guide-hub-icon svg * {
	fill: none;
	stroke: #4b5563;
	stroke-width: 1.65;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.home-main-page .sample-guide-hub-icon svg {
	width: 28px;
	height: 28px;
}

.home-main-page .sample-guide-hub-card-title {
	display: block;
	color: #000;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}

.home-main-page .sample-guide-hub-card-desc {
	display: block;
	margin-top: 8px;
	margin-bottom: 0;
	padding-bottom: 0;
	color: #666;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.62;
	letter-spacing: -0.02em;
	word-break: keep-all;
}

.home-main-page .sample-guide-hub-arrow {
	display: block;
	margin-top: 16px;
	align-self: flex-start;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
}

.home-main-page .sample-guide-hub-card.theme-guide-blue .sample-guide-hub-icon {
	background: #e8f1ff;
}

.home-main-page .sample-guide-hub-card.theme-guide-blue .sample-guide-hub-arrow {
	color: #0055ff;
}

.home-main-page .sample-guide-hub-card.theme-guide-green .sample-guide-hub-icon {
	background: #e4f6ee;
}

.home-main-page .sample-guide-hub-card.theme-guide-green .sample-guide-hub-arrow {
	color: #0d9f6e;
}

.home-main-page .sample-guide-hub-card.theme-guide-coral .sample-guide-hub-icon {
	background: #fff1e6;
}

.home-main-page .sample-guide-hub-card.theme-guide-coral .sample-guide-hub-arrow {
	color: #ea580c;
}

.home-main-page .sample-guide-hub-card.theme-guide-violet .sample-guide-hub-icon {
	background: #eee8ff;
}

.home-main-page .sample-guide-hub-card.theme-guide-violet .sample-guide-hub-arrow {
	color: #7c3aed;
}

@media (max-width: 1024px) {
	.home-main-page .sample-guide-hub-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.home-main-page .sample-guide-hub-title {
		font-size: 28px;
	}
}

@media (max-width: 640px) {
	.home-main-page .sample-guide-hub-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.home-main-page .sample-guide-hub-wrap {
		padding: 44px 0 48px;
	}

	.home-main-page .sample-guide-hub-head {
		margin-bottom: 28px;
	}

	.home-main-page .sample-guide-hub-title {
		font-size: 26px;
	}

	.home-main-page .sample-guide-hub-lead {
		font-size: 15px;
	}

	.home-main-page .sample-guide-hub-card {
		min-height: 0;
		padding: 22px 20px 20px;
	}

	.home-main-page .sample-review-ingang .sample-review-head.sample-guide-hub-head {
		margin-bottom: 12px;
	}
}

/* ------------------------------------------------------------------
   샘플 전용 상단 GNB (topmenu_sam.html + awsTopNebi 실제 메뉴)
   .sample-topnav-scope 내부만 덮어쓰므로 일반 topmenu.html 페이지에는 영향 없음
   ------------------------------------------------------------------ */

.sample-topnav-scope {
	position: relative;
	z-index: 12050;
}

/* 메가메뉴가 펼쳐질 때 아래 DOM(메인 배너 등)이 위에 올라와 호버가 끊기지 않도록 */
.home-main-page {
	position: relative;
	z-index: 0;
}

.sample-topnav-scope #header {
	overflow: visible;
}

@media (min-width: 835px) {
	.sample-topnav-scope #header .section {
		min-height: 100px;
		position: relative;
	}

	/* 로고: 헤더 가운데 (데스크톱만) */
	.sample-topnav-scope #header .section .top-logo {
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		/* width: 160px;
		min-width: 160px; */
		height: 100px;
		overflow: visible;
		margin: 0;
		float: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.sample-topnav-scope #header .section .top-logo img {
		display: block;
		width: 100% !important;
		height: auto !important;
		max-width: 160px !important;
		max-height: none !important;
		position: static;
		object-fit: contain;
	}
}

/* 모바일 헤더: 모바일 로고 가운데 · 햄버거 오른쪽 */
@media (max-width: 834px) {
	.sample-topnav-scope #header {
		position: relative;
		padding: 10px 0;
		min-height: 0;
		height: auto;
	}

	/* 데스크톱용 section(큰 로고·로그인·전체보기) 숨김 */
	.sample-topnav-scope #header .section {
		display: none !important;
		min-height: 0;
	}

	.sample-topnav-scope #header .section .top-logo {
		display: none !important;
	}

	.sample-topnav-scope #header > .max768.toggle:first-of-type {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 4px 52px 4px 52px;
		text-align: center;
	}

	.sample-topnav-scope #header .top-logo-m {
		width: 114px;
		max-width: 52vw;
		margin: 0 auto;
	}

	.sample-topnav-scope #header .top-logo-m img {
		display: block;
		width: 100%;
		height: auto;
	}

	.sample-topnav-scope #header > #navbar + .max768.toggle {
		position: absolute;
		top: 40%;
		left: auto;
		right: 5px;
		width: auto;
		transform: translateY(-50%);
		z-index: 12;
		margin: 0;
		padding: 0;
	}

	/* 모바일 메뉴 열림: 배경 딤 + 스크롤 잠금 */
	.sample-topnav-scope .sidenav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 99999998;
		background: rgba(0, 0, 0, 0.55);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, visibility 0.2s ease;
		touch-action: none;
		-webkit-tap-highlight-color: transparent;
	}

	.sample-topnav-scope .sidenav-backdrop.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.sample-topnav-scope #mySidenav.sidenav {
		left: auto;
		right: 0;
		border-right: none;
		border-left: 1px solid #e5e7eb;
		background: #fff;
		padding-top: 56px;
		overflow-x: hidden;
		overflow-y: auto;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
		-webkit-overflow-scrolling: touch;
	}

	.sample-topnav-scope #mySidenav .closebtn {
		top: 12px;
		right: 12px;
		width: 32px;
		height: 32px;
		display: block;
		font-size: 0;
		line-height: 0;
		text-decoration: none;
		background: transparent;
	}

	.sample-topnav-scope #mySidenav .closebtn img {
		display: none;
	}

	.sample-topnav-scope #mySidenav .closebtn::before,
	.sample-topnav-scope #mySidenav .closebtn::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 20px;
		height: 2px;
		background: #111827;
		border-radius: 1px;
	}

	.sample-topnav-scope #mySidenav .closebtn::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.sample-topnav-scope #mySidenav .closebtn::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.sample-topnav-scope #mySidenav #chk_mobile {
		display: flex;
		align-items: stretch;
		margin: 0 16px 12px;
		padding: 0;
		box-sizing: border-box;
	}

	.sample-topnav-scope #mySidenav .search_word {
		flex: 1 1 auto;
		float: none;
		width: auto;
		height: 44px;
		margin: 0;
		padding: 0 12px;
		border: 1px solid #d1d5db;
		border-right: 0;
		border-radius: 4px 0 0 4px;
		font-size: 14px;
		box-sizing: border-box;
	}

	.sample-topnav-scope #mySidenav .search_btn {
		flex: 0 0 20px;
		width: 18px;
		height: 18px;
		margin: 0;
		padding: 13px;
		border: 0;
		border-radius: 0 4px 4px 0;
		background: #245fa8;
		box-sizing: content-box;
	}

	.sample-topnav-scope #mySidenav .m-login {
		display: flex;
		gap: 8px;
		margin: 0 16px 16px;
		padding: 0;
		border: 0;
		background: transparent;
		flex-wrap: wrap;
	}

	.sample-topnav-scope #mySidenav .m-login > div {
		width: 100%;
		margin: 0 0 0;
		padding: 0;
		background: transparent;
		color: #111827;
		font-size: 14px;
		font-weight: 600;
	}

	.sample-topnav-scope #mySidenav .m-login > button {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: auto;
		height: 36px;
		margin: 0 !important;
		padding: 0 10px;
		border: 0;
		border-radius: 999px;
		background: #245fa8;
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		line-height: 1;
		text-align: center;
	}

	.sample-topnav-scope #mySidenav .m-login > button img {
		display: block;
		flex-shrink: 0;
		width: 16px;
		height: 16px;
		margin: 0;
		filter: brightness(0) invert(1);
	}

	.sample-topnav-scope #mySidenav > .dropdown-btn {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 10px 44px 10px 16px;
		border: 0;
		border-bottom: 1px solid #adbacb;
		border-radius: 0;
		background: #fff !important;
		color: #111827 !important;
		font-size: 16px;
		font-weight: 700;
		text-align: left;
		box-sizing: border-box;
	}

	.sample-topnav-scope #mySidenav > .dropdown-btn:hover,
	.sample-topnav-scope #mySidenav > .dropdown-btn.active {
		background: #fff !important;
		color: #245fa8 !important;
	}

	.sample-topnav-scope #mySidenav > .dropdown-btn > img {
		display: none;
	}

	.sample-topnav-scope #mySidenav > .dropdown-btn::after {
		content: "+";
		position: absolute;
		top: 50%;
		right: 16px;
		transform: translateY(-50%);
		font-size: 22px;
		font-weight: 400;
		line-height: 1;
		color: #245fa8;
	}

	.sample-topnav-scope #mySidenav > .dropdown-btn.active::after {
		content: "−";
	}

	.sample-topnav-scope #mySidenav .dropdown-container {
		display: none;
		margin: 0;
		padding: 4px 16px 12px;
		background: #f8fafc;
		border-bottom: 1px solid #245fa8;
	}

	.sample-topnav-scope #mySidenav .dropdown-container a {
		padding: 10px 0;
		font-size: 14px;
		font-weight: 500;
		color: #374151;
	}

	.sample-topnav-scope #mySidenav .dropdown-container a:hover,
	.sample-topnav-scope #mySidenav .dropdown-container a.focus {
		color: #245fa8;
		font-weight: 600;
	}

	.sample-topnav-scope #header .menu-icon {
		position: relative;
		top: auto;
		left: auto;
		display: inline-block;
		width: 24px;
		height: 16px;
		margin: 0 12px 0 0;
		padding: 0;
		font-size: 0;
		line-height: 0;
		color: transparent;
		background: transparent;
		border: 0;
		border-radius: 0;
		cursor: pointer;
	}

	.sample-topnav-scope #header .menu-icon::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 25px;
		height: 2px;
		margin-top: -1px;
		background: #6b7280;
		border-radius: 1px;
		box-shadow: 0 -7px 0 #6b7280, 0 7px 0 #6b7280;
	}

	/* 메인 비주얼(모바일): 이미지·텍스트 화면 너비에 맞춤 */
	.home-main-page {
		overflow-x: hidden;
	}

	.home-main-page > .max768 {
		width: 100%;
		max-width: 100vw;
		overflow: hidden;
	}

	.home-main-page .main-slide,
	.home-main-page .main-slide .swiper-container,
	.home-main-page .main-slide .height-700-responsive {
		width: 100% !important;
		max-width: 100vw !important;
		overflow: hidden !important;
	}

	.home-main-page .main-slide .swiper-container,
	.home-main-page .main-slide .height-700-responsive,
	.home-main-page .main-slide .swiper-slide,
	.home-main-page .main-slide .main-slide-link {
		height: clamp(155px, 36vw, 210px) !important;
		min-height: 0 !important;
	}

	.home-main-page .main-slide .swiper-slide,
	.home-main-page .main-slide .main-slide-link {
		width: 100% !important;
		overflow: hidden;
	}

	.home-main-page .main-slide .main-slide-image {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
	}

	.home-main-page .main-slide .swiper-slide > .container,
	.home-main-page .main-slide .main-slide-link > .container {
		left: 0;
		right: 0;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 16px !important;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.home-main-page .main-slide .container .row {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.home-main-page .main-slide .slider-content,
	.home-main-page .main-slide .col-lg-10,
	.home-main-page .main-slide .col-xl-8 {
		flex: 0 0 100%;
		max-width: 100% !important;
		width: 100% !important;
		padding: 0 !important;
		text-align: left !important;
		align-self: center !important;
	}

	.home-main-page .main-slide .display-lg-3 {
		font-size: clamp(22px, 6.2vw, 32px) !important;
		line-height: 1.2 !important;
	}

	.home-main-page .main-slide .main_tit_2022,
	.home-main-page .main-slide .main_tit_2022 > .mobile {
		font-size: clamp(20px, 5.8vw, 28px) !important;
		line-height: 1.25 !important;
		padding-left: 0 !important;
		max-width: 100%;
		word-break: keep-all;
		overflow-wrap: break-word;
		white-space: normal !important;
	}

	.home-main-page .main-slide .main_tit_2022 > .mobile > b,
	.home-main-page .main-slide .main_tit_2022 > .pc > b {
		font-size: clamp(22px, 6.2vw, 30px) !important;
		display: inline !important;
	}

	.home-main-page .main-slide .main_des_2022,
	.home-main-page .main-slide .main_des_2022 > .mobile,
	.home-main-page .main-slide .main_des_2022 > .pc {
		font-size: clamp(13px, 3.6vw, 16px) !important;
		line-height: 1.4 !important;
		padding-left: 0 !important;
		max-width: 100%;
		word-break: keep-all;
		white-space: normal !important;
	}

	.home-main-page .main-slide .section-pb {
		padding-bottom: 1rem !important;
	}
}

.sample-topnav-scope #navbar {
	position: relative;
	z-index: 12055;
	overflow: visible;
	background: #fff;
	border-top: 1px solid #e8ecf2;
	border-bottom: 1px solid #e8ecf2;
}

.sample-topnav-scope #navbar.sticky {
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
	overflow: visible;
}

.sample-topnav-scope #gnb_area {
	position: relative;
	z-index: 1;
	min-height: 56px;
	height: 56px;
	overflow: visible;
	/* 원메뉴: 1차 바 연한 블루그레이 (패널 닫혀 있을 때도 동일 톤) */
	background: #eef2f8;
	border: 0;
	/* 반응형: 넓이는 빠르게, 여백·글자는 살짝 길게 (배재고류 GNB 느낌) */
	--sample-gnb-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--sample-gnb-dur: 0.28s;
	--sample-gnb-dur-layout: 0.18s;
	/* 메가 펼침: 세로·가로·패딩 동일 타이밍 (다르면 한쪽만 툭 커짐) */
	--sample-gnb-expand-dur: 0.52s;
	--sample-gnb-expand-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sample-topnav-scope .gnbDiv {
	--sample-gnb-r1: 56px;
	/* 실제 메가 높이에 가깝게: 상한이 너무 크면 max-height 애니메이션 끝에서만 툭 열림 */
	--sample-gnb-panel-max: 980px;
	position: absolute;
	/* 뷰포트 전체 너비로 배경이 이어지도록 (중앙 정렬 래퍼 안에서도 좌우 끝까지) */
	left: 50%;
	right: auto;
	top: 0;
	width: 100vw;
	max-width: none;
	margin-left: 0;
	transform: translateX(-50%);
	z-index: 5;
	height: auto !important;
	max-height: var(--sample-gnb-r1) !important;
	/* 호버 전: 패널만 깔리는 느낌 제거 — #navbar 배경 위에 1차 링크만 */
	background: transparent;
	box-shadow: none;
	overflow: hidden;
	isolation: isolate;
	transition: max-height var(--sample-gnb-expand-dur) var(--sample-gnb-expand-ease), background-color calc(var(--sample-gnb-expand-dur) * 0.85) var(--sample-gnb-expand-ease), box-shadow calc(var(--sample-gnb-expand-dur) * 0.85) var(--sample-gnb-expand-ease);
}

.sample-topnav-scope #gnb_area:hover .gnbDiv,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv {
	max-height: var(--sample-gnb-panel-max) !important;
	/* 원메뉴: 1차 줄 톤 → 구분선 아래 흰 패널 */
	background: linear-gradient(
		180deg,
		#e9eff7 0,
		#e9eff7 var(--sample-gnb-r1),
		#fff var(--sample-gnb-r1),
		#fff 100%
	);
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

/* topMenu.js용 빈 .twoDep: 샘플에서는 시각적으로 제거(하단 선만 보이던 현상 방지) */
.sample-topnav-scope .gnbDiv .gnbWrap > .twoDep {
	height: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* 1차 메뉴 아래 가로선: 메가메뉴 펼침 시에만 */
.sample-topnav-scope .gnbDiv::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--sample-gnb-r1);
	height: 1px;
	background: #e8eaee;
	z-index: 8;
	pointer-events: none;
	opacity: 0;
	transition: opacity calc(var(--sample-gnb-expand-dur) * 0.55) var(--sample-gnb-expand-ease);
}

.sample-topnav-scope #gnb_area:hover .gnbDiv::before,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv::before {
	opacity: 1;
}

.sample-topnav-scope .gnbDiv .gnbWrap {
	position: relative;
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	padding: 0 10px;
	box-sizing: border-box;
	overflow: visible;
	transition: max-width var(--sample-gnb-expand-dur) var(--sample-gnb-expand-ease), padding var(--sample-gnb-expand-dur) var(--sample-gnb-expand-ease);
}

.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap {
	max-width: min(100vw - 24px, 1500px);
	padding: 0 clamp(16px, 2.4vw, 36px);
}

.sample-topnav-scope .gnbDiv .gnbWrap .gnb {
	max-width: none;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	min-height: 56px;
	height: auto;
}

.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	float: none;
	width: 100%;
	max-width: none;
	overflow: visible;
	box-sizing: border-box;
	gap: 0;
	position: relative;
	z-index: 1;
}

/* 칸 사이 세로선: 메가 펼침 시 — border 사용(::before는 2차 텍스트 왼쪽과 겹쳐 보일 수 있음) */
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li + li::before {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
}

.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li + li,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv .gnbWrap .gnb ul > li + li {
	border-left: 1px solid #dde3eb;
	box-sizing: border-box;
}

/* 메가 펼침 시 양끝 세로선 (허전함 방지) */
.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li:first-child,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv .gnbWrap .gnb ul > li:first-child {
	border-left: 1px solid #dde3eb;
}

.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li:last-child,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv .gnbWrap .gnb ul > li:last-child {
	border-right: 1px solid #dde3eb;
}

.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li {
	float: none;
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	text-align: center;
	position: relative;
	overflow: visible;
	border-right: 0;
	box-sizing: border-box;
}

.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li:last-child {
	border-right: 0;
}

/* common.css 오른쪽 세로선만 제거 (::before는 li+1 구분선용으로 유지) */
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li::after {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
}

/* 첫 칸 common ::before 비활성 (구분선은 li+li만) */
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li:first-child::before {
	content: none !important;
	display: none !important;
	opacity: 0 !important;
}


.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > a.oneDep {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 56px;
	line-height: 56px;
	padding: 0 2px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0;
	color: #27618b;
	border-radius: 6px 6px 0 0;
	position: relative;
	z-index: 7;
	border-bottom: 2px solid transparent;
	/* 긴 1차명(예: 수리통계+계량경제) 줄바꿈 시 2차 첫 줄과 겹침 방지 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: padding var(--sample-gnb-expand-dur) var(--sample-gnb-expand-ease), letter-spacing var(--sample-gnb-expand-dur) var(--sample-gnb-expand-ease), color 0.18s var(--sample-gnb-ease), font-weight 0.18s var(--sample-gnb-ease), background-color 0.2s var(--sample-gnb-ease), border-color 0.2s var(--sample-gnb-ease);
}

/* 현재 페이지(자기 링크)일 때만 하단 라인 */
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li.on > a.oneDep {
	border-bottom-color: #cfd8e6;
}

.sample-topnav-scope #gnb_area:not(:hover):not(:focus-within) .gnbDiv .gnbWrap .gnb ul > li.on > a.oneDep {
	border-bottom-color: #0a2650;
}

/* 메가 펼침 중 현재 섹션(li.on) 하단 라인 */
.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li.on > a.oneDep,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv .gnbWrap .gnb ul > li.on > a.oneDep {
	border-bottom-color: #fff;
}

.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li > a.oneDep {
	padding: 0 clamp(10px, 1.65vw, 12px);
	letter-spacing: 0;
}

/* 하단 라인은 border-bottom 전용 — ::after 밑줄 비활성 */
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > a.oneDep::after {
	content: none !important;
	display: none !important;
}

.gnbDiv .gnbWrap .twoDep {
	box-shadow: none !important;
}

/* 메가 닫힘: 호버·현재 섹션 칩 톤 */
.sample-topnav-scope #gnb_area:not(:hover):not(:focus-within) .gnbDiv .gnbWrap .gnb ul > li:hover > a.oneDep,
.sample-topnav-scope #gnb_area:not(:hover):not(:focus-within) .gnbDiv .gnbWrap .gnb ul > li.on > a.oneDep {
	color: #0a2650 !important;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.55);
}

/* 메가 펼침: 호버·현재 섹션 칩 */
.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li:hover > a.oneDep,
.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li.on > a.oneDep,
.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li:focus-within > a.oneDep,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv .gnbWrap .gnb ul > li:hover > a.oneDep,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv .gnbWrap .gnb ul > li.on > a.oneDep,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv .gnbWrap .gnb ul > li:focus-within > a.oneDep {
	color: #fff !important;
	font-weight: 600;
	background: #164c9c !important;
}

.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > p.twoDep {
	margin: 0;
	margin-top: 1px;
	padding: 18px 0 20px;
	text-align: left;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 5px;
	transition: padding var(--sample-gnb-expand-dur) var(--sample-gnb-expand-ease);
}

.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li > p.twoDep {
	padding: 10px 7px 20px;
}

.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > p.twoDep > a,
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > p.twoDep > a.disB {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 6px 6px;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: 0;
	color: #333 !important;
	text-align: left;
	border-radius: 4px;
	transition: background-color 0.18s var(--sample-gnb-ease), color 0.18s var(--sample-gnb-ease), padding var(--sample-gnb-expand-dur) var(--sample-gnb-expand-ease);
}

.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > p.twoDep > a.off:hover,
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > p.twoDep > a:hover {
	color: #164c9c !important;
	background: #dce5f5f0 !important;
	font-weight: 600;
}

.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > p.twoDep > a.on,
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > p.twoDep > a.on:hover,
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li > p.twoDep > a.on:focus {
	color: #fff !important;
	background: #0c4a9e !important;
	font-weight: 600;
}

/* 원메뉴: 호버/현재 페이지 열 2차 칸만 연한 블루 틴트 */
.sample-topnav-scope .gnbDiv .gnbWrap li.on > p.twoDep,
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li:hover > p.twoDep,
.sample-topnav-scope .gnbDiv .gnbWrap .gnb ul > li:focus-within > p.twoDep {
	background: #f0f5fb !important;
}

/* ========== 샘플: 수강후기(전기인강 합격수기형 카드 슬라이드) ========== */
.sample-review-ingang.section_pass_bg {
	position: relative;
	padding: 40px 0 44px;
	overflow: hidden;
	background: #eaf0f7 url("/files/images/bg_main3.png") center bottom / cover no-repeat;
	margin-top: -10px;
}

.sample-review-ingang.section_pass_bg::before,
.sample-review-ingang.section_pass_bg::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.22;
}

.sample-review-ingang.section_pass_bg::before {
	width: min(120vw, 1400px);
	height: min(120vw, 1400px);
	left: -25%;
	top: -55%;
	background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.88), rgba(245, 247, 250, 0) 62%);
}

.sample-review-ingang.section_pass_bg::after {
	width: min(100vw, 1100px);
	height: min(100vw, 1100px);
	right: -30%;
	bottom: -60%;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6), rgba(235, 240, 246, 0) 58%);
}

.home-main-page .sample-review-ingang .section-best-subject {
	position: relative;
	z-index: 1;
	padding: 0 !important;
	margin: 0;
}

.home-main-page .sample-review-ingang .sample-guide-hub.sample-review-hub {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 4px;
	display: block;
	box-sizing: border-box;
}

.home-main-page .sample-review-ingang .sample-review-stack {
	max-width: none;
	margin: 0;
	text-align: left;
}

.home-main-page .sample-review-ingang .sample-review-head.sample-guide-hub-head {
	margin: 0 0 12px;
	text-align: left;
}

.home-main-page .sample-review-ingang .sample-review-head .sample-guide-hub-kicker {
	text-transform: uppercase;
	margin: 0 0 5px;
}

.home-main-page .sample-review-ingang .sample-review-head .sample-guide-hub-title {
	margin: 0 0 6px;
}

.home-main-page .sample-review-ingang .sample-review-head .sample-guide-hub-lead {
	margin: 0;
	max-width: none;
}

.home-main-page .sample-review-ingang .sample-review-lead-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px 14px;
	flex-wrap: wrap;
}

.home-main-page .sample-review-ingang .sample-review-lead-row .sample-guide-hub-lead {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 520px;
	margin: 0;
}

.home-main-page .sample-review-ingang .sample-review-lead-row .review-swiper-nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 2px 0 0;
}

.home-main-page .sample-review-ingang .sample-review-stack .sample-review-more-btn {
	margin: 0 0 24px;
}

.home-main-page .sample-review-ingang .sample-review-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	background: #1e5aa8;
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 8px;
	letter-spacing: -0.02em;
	transition: background 0.2s ease, transform 0.15s ease;
	box-sizing: border-box;
}

.home-main-page .sample-review-ingang .sample-review-more-btn:hover {
	background: #164a8e;
	text-decoration: none;
	color: #fff !important;
}

.home-main-page .sample-review-ingang .sample-review-slider-wrap {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.home-main-page .sample-review-ingang .sample-review-swiper-shell {
	max-width: 100%;
	margin: 0;
	width: 100%;
	min-width: 0;
	position: relative;
	padding-bottom: 8px;
	text-align: left;
	box-sizing: border-box;
}

@media (max-width: 640px) {
	.home-main-page .sample-review-ingang .sample-review-lead-row {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 8px;
	}

	.home-main-page .sample-review-ingang .sample-review-lead-row .review-swiper-nav {
		justify-content: flex-end;
		margin-top: 0;
	}
}

@media (max-width: 991px) {
	.home-main-page .sample-review-ingang.section_pass_bg {
		padding: 32px 10px 40px;
	}

	.home-main-page .sample-review-ingang .sample-guide-hub.sample-review-hub {
		padding-left: 4px;
		padding-right: 4px;
	}

	.home-main-page .sample-review-ingang .sample-review-stack {
		max-width: 100%;
	}
}

.sample-review-ingang .sample-review-swiper.swiper-container {
	overflow: hidden;
	padding: 0 0 8px;
	box-sizing: border-box;
}

.sample-review-ingang .sample-review-slide {
	height: auto;
	display: flex;
	box-sizing: border-box;
}

.sample-review-ingang .sample-review-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	min-height: 0;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.98);
	border-radius: 14px;
	border: 1px solid rgba(226, 234, 248, 0.92);
	box-shadow: 0px 5px 13px rgba(4, 34, 104, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	padding: 6px 10px;
}

.sample-review-ingang .sample-review-card:hover {
	box-shadow: 0px 4px 18px  rgba(4, 34, 104, 0.18);
	transform: translateY(-2px);
}

.sample-review-ingang .sample-review-card__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	min-height: 188px;
	padding: 18px 18px 16px;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
	position: relative;
}

.sample-review-ingang .sample-review-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 16px;
}

.sample-review-ingang .sample-review-card__stars {
	font-size: 13px;
	letter-spacing: 1px;
	color: #f0b429;
	line-height: 1;
}

.sample-review-ingang .sample-review-card__medal {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sample-review-ingang .sample-review-card__medal img {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.sample-review-ingang .sample-review-card__medal--best img {
	width: 36px;
	height: 36px;
}

.sample-review-ingang .sample-review-card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: #182033;
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sample-review-ingang .sample-review-card__title .gasipan-board-title {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-sizing: border-box;
}

.sample-review-ingang .sample-review-card__excerpt {
	margin: 10px 0 0;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	width: 100%;
	box-sizing: border-box;
}

/* 아이콘 span과 분리: -webkit-line-clamp는 단일 텍스트 블록에만 안정적으로 동작 */
.sample-review-ingang .sample-review-card__excerpt-inner {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: -0.03em;
	color: #5f6878;
	overflow-wrap: break-word;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.65em * 4);
}

.sample-review-ingang .sample-review-card__icons {
	margin-left: 0;
	white-space: nowrap;
	vertical-align: middle;
}

.sample-review-ingang .sample-review-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(226, 234, 248, 0.92);
	font-size: 13px;
}

.sample-review-ingang .sample-review-card__author {
	font-weight:600;
	color: #2563eb;
}

.sample-review-ingang .sample-review-card__date {
	font-weight: 600;
	color: #6b7280;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.sample-review-ingang .sample-review-empty {
	padding: 40px 20px;
	text-align: center;
	color: #6b7280;
	font-size: 14px;
}

.sample-review-ingang .review-swiper-nav__btn {
	width: 42px;
	height: 30px;
    border-radius: 16px;
	border: 1px solid #d5deeb;
	background: #fff;
	color: #1e3a5c;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(15, 35, 70, 0.06);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sample-review-ingang .review-swiper-nav__btn:hover {
	background: #1e4d7b;
	border-color: #1e4d7b;
	color: #fff;
}

.sample-review-ingang .review-swiper-nav__icon {
	font-size: 22px;
	line-height: 1;
	margin-top: -2px;
}

@media (max-width: 991px) {
	/* 메인(.home-main-page): 가스판 1열·추천강좌 카드 모바일 레이아웃 */
	.home-main-page .bg.gasipan {
		padding-top: 16px !important;
		padding-bottom: 0 !important;
	}

	.home-main-page .gasipan .main_board .bbody {
		max-height: 260px;
	}

	.home-main-page .gasipan .section {
		overflow-x: hidden;
		padding-left: 4px;
		padding-right: 4px;
	}

	.home-main-page .gasipan .left_sec,
	.home-main-page .gasipan .right_sec,
	.home-main-page .gasipan .left_sec,
	.home-main-page .gasipan .right_sec {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.home-main-page .gasipan .right_sec {
		margin-top: 12px;
		display: flow-root;
	}

	.home-main-page .gasipan .right_sec .list_four {
		display: flex;
		flex-direction: column;
		margin-top: 16px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.home-main-page .gasipan .list_four > .sample-detached-banner-list {
		order: 1;
		margin-top: 0;
		margin-bottom: 16px;
	}

	.home-main-page .gasipan .list_four > .sample-guide-panel {
		order: 2;
	}

	.home-main-page .gasipan .sample-guide-panel {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.home-main-page .gasipan .sample-guide-slider {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* 추천강좌 카드: 세로 스택(column) 오버라이드는 티켓·텍스트 겹침으로 깨짐 → 가로(row) 유지, 패딩·글자만 축소 */
	.home-main-page .gasipan .sample-guide-card.main-guide-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		min-height: 176px;
		padding: 20px 16px 18px;
		overflow: hidden;
	}

	.home-main-page .gasipan .main-guide-card__copy {
		max-width: 58%;
		width: auto;
		min-width: 0;
		flex: 1 1 auto;
	}

	.home-main-page .gasipan .main-guide-card__heading {
		font-size: 22px;
		margin-bottom: 10px;
	}

	.home-main-page .gasipan .main-guide-card__text {
		font-size: 14px;
		margin-bottom: 16px;
	}

	.home-main-page .gasipan .main-guide-card__aside {
		flex: 0 0 120px;
		width: 120px;
		height: 102px;
		align-self: center;
	}

	.home-main-page .gasipan .boxqna ul li:first-child .date {
		min-width: 0;
		flex: 0 0 auto;
		font-size: 13px;
	}

	.home-main-page .gasipan .sample-board-tabs {
		width: 100%;
		margin: 0;
		justify-content: stretch;
		box-sizing: border-box;
	}

	.home-main-page .gasipan .sample-board-tabs > li {
		flex: 1 1 0;
		min-width: 0;
		text-align: center;
		padding-left: 6px;
		padding-right: 6px;
		box-sizing: border-box;
	}

	.home-main-page .gasipan .sample-board-tabs > li + li {
		padding-left: 6px;
	}

	.home-main-page .gasipan .sample-board-menu .bmenus.active:after {
		left: 6px;
		right: 6px;
	}

	.home-main-page .gasipan .list_four > .sample-detached-banner-list {
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 0;
		margin-bottom: 16px;
	}

	.home-main-page .gasipan .sample-detached-banner-card {
		flex: 1 1 calc(50% - 6px);
		min-width: calc(50% - 6px);
		max-width: calc(50% - 6px);
	}

	.home-main-page .gasipan .boxqna,
	.home-main-page .gasipan .boxnotice {
		padding-left: 2px;
		padding-right: 2px;
		box-sizing: border-box;
	}

	.home-main-page .gasipan .boxqna .btext,
	.home-main-page .gasipan .boxnotice .btext {
		padding-left: 4px;
		padding-right: 4px;
	}

	.home-main-page .gasipan .boxnotice .sample-notice-link {
		flex: 1 1 auto;
		min-width: 0;
		max-width: 100%;
	}

	.home-main-page .gasipan .boxnotice .sample-notice-title {
		flex: 1 1 auto;
		min-width: 0;
		max-width: none;
		margin-left: 4px;
	}

	.home-main-page .gasipan .boxnotice .sample-notice-title-text {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		max-width: 100%;
	}

	.home-main-page .gasipan .boxnotice ul li:first-child .nick {
		min-width: 44px;
		padding-left: 8px;
	}

	.home-main-page .gasipan .boxnotice ul li:first-child .date {
		min-width: 82px;
		padding-left: 8px;
	}
}

.gasipan .right_sec {
    width: 39%;
    margin-top: 0 !important;
}

.gasipan .left_sec {
    width: 56%;
    margin-right: 30px !important;
    float: left;
}

/* 큐스터디 FOCUS 배너 */
.home-main-page .long_banner.main {
	display: block;
	width: 100%;
	overflow: hidden;
	background-color: #024fb3;
	background-image: none;
	padding: 30px 0 0;
	box-sizing: border-box;
}

.home-main-page .long_banner.main.focus-banner-interactive {
	position: relative;
	isolation: isolate;
	padding: 36px 0 44px;
	background: linear-gradient(125deg, #024fb3 0%, #1a6fd4 42%, #024fb3 100%);
	background-size: 200% 200%;
	background-position: 0% 50%;
	animation: none;
}

.home-main-page .long_banner.main.focus-banner-interactive.is-visible {
	animation: focusBannerGradient 14s ease infinite;
}

@keyframes focusBannerGradient {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.home-main-page .focus-banner-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.home-main-page .focus-banner-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(48px);
	opacity: 0.45;
}

.home-main-page .focus-banner-orb--1 {
	width: 280px;
	height: 280px;
	top: -80px;
	left: -60px;
	background: rgba(120, 190, 255, 0.55);
	animation: focusOrbDrift1 11s ease-in-out infinite;
	animation-play-state: paused;
}

.home-main-page .focus-banner-orb--2 {
	width: 220px;
	height: 220px;
	right: 8%;
	bottom: -70px;
	background: rgba(255, 255, 255, 0.22);
	animation: focusOrbDrift2 9s ease-in-out infinite;
	animation-play-state: paused;
}

.home-main-page .focus-banner-orb--3 {
	width: 160px;
	height: 160px;
	top: 20%;
	right: 32%;
	background: rgba(0, 220, 255, 0.28);
	animation: focusOrbDrift3 13s ease-in-out infinite;
	animation-play-state: paused;
}

.home-main-page .focus-banner-interactive.is-visible .focus-banner-orb {
	animation-play-state: running;
}

@keyframes focusOrbDrift1 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(36px, 24px) scale(1.08); }
}

@keyframes focusOrbDrift2 {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-28px, -18px); }
}

@keyframes focusOrbDrift3 {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(20px, -26px) scale(1.12); }
}

.home-main-page .long_banner.main.focus-banner-interactive > .section {
	position: relative;
	z-index: 1;
}

.home-main-page .long_banner.main ul::after {
	content: "";
	display: block;
	clear: both;
}

/* 스크롤 등장 전 */
.home-main-page .focus-banner-interactive .focus-banner-label,
.home-main-page .focus-banner-interactive .focus-banner-headline,
.home-main-page .focus-banner-interactive .focus-banner-cta,
.home-main-page .focus-banner-interactive .focus-banner-visual {
	opacity: 0;
}

.home-main-page .focus-banner-interactive .focus-banner-label {
	transform: translateX(-32px);
}

.home-main-page .focus-banner-interactive .focus-banner-headline {
	transform: translateX(-24px);
}

.home-main-page .focus-banner-interactive .focus-banner-cta {
	transform: translateY(16px);
}

.home-main-page .focus-banner-interactive .focus-banner-visual {
	transform: translateX(40px) scale(0.94);
}

.home-main-page .focus-banner-interactive.is-visible .focus-banner-label {
	animation: focusBannerTxtIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.home-main-page .focus-banner-interactive.is-visible .focus-banner-headline {
	animation: focusBannerTxtIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

.home-main-page .focus-banner-interactive.is-visible .focus-banner-cta {
	animation: focusBannerTxtIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.24s forwards;
}

.home-main-page .focus-banner-interactive.is-visible .focus-banner-visual {
	animation: focusBannerImgIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes focusBannerTxtIn {
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes focusBannerImgIn {
	to {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
}

.home-main-page .focus-banner-img-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.home-main-page .focus-banner-img-inner {
	position: relative;
	display: inline-block;
	animation: none;
}

.home-main-page .focus-banner-interactive.is-visible .focus-banner-img-inner {
	animation: focusBannerFloat 5.5s ease-in-out 0.6s infinite;
}

@keyframes focusBannerFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

.home-main-page .focus-banner-img {
	display: block;
	width: 80%;
	max-width: 100%;
	margin-left: auto;
	filter: drop-shadow(0 18px 36px rgba(0, 30, 80, 0.35));
	transition: filter 0.35s ease, transform 0.35s ease;
}

.home-main-page .focus-banner-cta {
	position: relative;
	display: inline-block;
	overflow: visible;
}

.home-main-page .focus-banner-cta a {
	display: inline-block;
	position: relative;
	z-index: 1;
	background-color: transparent !important;
	transition: color 0.25s ease, letter-spacing 0.25s ease, transform 0.25s ease;
}

.home-main-page .focus-banner-cta a:hover,
.home-main-page .focus-banner-cta a:focus-visible {
	color: #ffffff !important;
	background-color: transparent !important;
	letter-spacing: 0.06em;
	transform: translateY(-1px);
}

/* 스크롤로 영역이 보이면 이미지 강조 */
.home-main-page .focus-banner-interactive.is-visible .focus-banner-img {
	animation: focusBannerImgGlow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

@keyframes focusBannerImgGlow {
	to {
		transform: scale(1.02);
		filter: drop-shadow(0 28px 52px rgba(0, 40, 100, 0.5));
	}
}

@media (max-width: 768px) {
	.home-main-page .long_banner.main.focus-banner-interactive {
		padding: 28px 10px 32px;
	}

	.home-main-page .focus-banner-img-wrap {
		transform: none;
	}

	.home-main-page .focus-banner-img-inner {
		animation: none;
	}

	.home-main-page .focus-banner-interactive.is-visible .focus-banner-img-inner {
		animation: focusBannerFloat 6.5s ease-in-out 0.6s infinite;
	}

	.home-main-page .focus-banner-img {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-main-page .long_banner.main.focus-banner-interactive,
	.home-main-page .focus-banner-orb,
	.home-main-page .focus-banner-img-inner {
		animation: none !important;
	}

	.home-main-page .focus-banner-interactive .focus-banner-label,
	.home-main-page .focus-banner-interactive .focus-banner-headline,
	.home-main-page .focus-banner-interactive .focus-banner-cta,
	.home-main-page .focus-banner-interactive .focus-banner-visual,
	.home-main-page .focus-banner-interactive.is-visible .focus-banner-label,
	.home-main-page .focus-banner-interactive.is-visible .focus-banner-headline,
	.home-main-page .focus-banner-interactive.is-visible .focus-banner-cta,
	.home-main-page .focus-banner-interactive.is-visible .focus-banner-visual {
		opacity: 1;
		transform: none;
		animation: none !important;
	}

	.home-main-page .focus-banner-img-wrap {
		transform: none;
		transition: none;
	}

	.home-main-page .focus-banner-interactive.is-visible .focus-banner-img {
		transform: none;
		animation: none !important;
	}
}

/* float 해제 후 GUIDE 섹션과 붙이기 */
.home-main-page .long_banner.main + .sample-guide-soft {
	margin-top: 0;
}