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


#sub-container .gasipan .main_board .bbody {
  max-height: 330px;
	/* overflow-y: auto;
	overflow-x: hidden; */
  overflow: hidden;
}

#sub-container .gasipan .main_board {
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 12px;
}

#sub-container .gasipan .sample-board-menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px 24px;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 4px;
	padding: 0 24px 0;
	border-bottom: 1px solid #e8ecf4;
}

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

#sub-container .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;
}

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

#sub-container .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;
}

#sub-container .gasipan .sample-board-tabs > li + li {
	padding-left: 18px;
}

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

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

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


#sub-container .gasipan .boxqna {
	padding: 0 24px 4px;
}

#sub-container .gasipan .boxqna .btext {
	margin: 0;
}

#sub-container .gasipan .boxqna .btext + .btext {
	border-top: 1px dashed #e2e7f0;
}

#sub-container .gasipan .boxqna ul {
	margin: 0;
	padding: 0;
}

#sub-container .gasipan .boxqna ul li {
	list-style: none;
}

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

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

#sub-container .gasipan .boxqna .btext > ul > li:first-child > span.no,
#sub-container .gasipan .boxqna .btext > ul > li:first-child .no {
	float: none !important;
	width: auto !important;
}

#sub-container .gasipan .boxqna .btext > ul > li:first-child > span.nick,
#sub-container .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;
}

#sub-container .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;
}

#sub-container .gasipan .boxqna ul li:first-child .date {
	flex: 0 0 auto;
	min-width: 86px;
	text-align: left;
}

#sub-container .gasipan .boxqna .contents {
	display: none !important;
}

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

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

#sub-container .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;
}

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

#sub-container .gasipan .boxqna .sample-qna-link img {
	flex: 0 0 auto;
}

#sub-container .gasipan .boxqna .sample-qna-title {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
	color: #2e3442;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.03em;
}

#sub-container .gasipan .boxqna .sample-qna-title-text {
	display: block;
	flex: 1 1 0%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#sub-container .gasipan .boxqna .sample-qna-icons {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
  margin-left: 6px;
}

#sub-container .gasipan .boxqna .sample-qna-link:hover .sample-qna-title {
	color: #2f5fd0;
}

#sub-container .gasipan .boxqna .sample-qna-icons .lockIcon,
#sub-container .gasipan .boxqna .sample-qna-icons .newIcon {
	flex: 0 0 auto;
}

#sub-container .gasipan .boxqna .sample-qna-icons .newIcon {
	display: inline-flex;
	align-items: center;
}

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

#sub-container .gasipan .boxnotice {
	padding: 0 24px 4px;
}

#sub-container .gasipan .boxnotice .btext {
	margin: 0;
}

#sub-container .gasipan .boxnotice .btext + .btext {
	border-top: 1px dashed #e2e7f0;
}

#sub-container .gasipan .boxnotice ul {
	margin: 0;
	padding: 0;
}

#sub-container .gasipan .boxnotice ul li {
	list-style: none;
}

#sub-container .gasipan .boxnotice ul li:first-child {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
}

#sub-container .gasipan .boxnotice .contents {
	display: none !important;
}

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

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

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

#sub-container .gasipan .boxnotice .sample-notice-title-text {
	display: block;
	flex: 1 1 0%;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

#sub-container .gasipan .boxnotice .sample-notice-link:hover .sample-notice-title {
	color: #2f5fd0;
}

#sub-container .gasipan .boxnotice .sample-notice-icons .lockIcon,
#sub-container .gasipan .boxnotice .sample-notice-icons .newIcon {
	flex: 0 0 auto;
}

#sub-container .gasipan .boxnotice .sample-notice-icons .newIcon {
	display: inline-flex;
	align-items: center;
}

#sub-container .gasipan .boxnotice .nick {
	display: none !important;
}

#sub-container .gasipan .boxnotice .date {
	flex: 0 0 auto;
	margin-left: 4px;
	color: #6f7685;
	font-size: 14px;
	line-height: 1.4;
	white-space: nowrap;
}

#sub-container .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;
}

#sub-container .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;
}

#sub-container .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;
}

#sub-container .gasipan .sample-guide-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 0;
}

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

#sub-container .gasipan .sample-guide-count .sample-guide-current {
	color: #2f5fd0;
}

#sub-container .gasipan .sample-guide-nav {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

#sub-container .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;
}

#sub-container .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;
}

#sub-container .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;
}

#sub-container .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;
}

#sub-container .gasipan .sample-guide-pause .sample-guide-pause-icon--hidden {
	display: none;
}

#sub-container .gasipan .sample-guide-arrow:hover {
	color: #2f5fd0;
}

#sub-container .gasipan .sample-guide-pause:hover {
	color: #2f5fd0;
}

#sub-container .gasipan .sample-guide-slider {
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

#sub-container .gasipan .sample-guide-track {
	display: flex;
	transition: transform 0.35s ease;
	will-change: transform;
}

#sub-container .gasipan .sample-guide-slide {
	flex: 0 0 100%;
	max-width: 100%;
}

#sub-container .gasipan .sample-guide-card {
	display: block;
	padding: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
}

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

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

#sub-container .gasipan .main-guide-card--pass {
	background: linear-gradient(135deg, #404ca4 0%, #33439c 100%);
}

#sub-container .gasipan .main-guide-card--pkg {
	background: linear-gradient(135deg, #39b89b 0%, #35c8a7 100%);
}

#sub-container .gasipan .main-guide-card__spot {
	position: absolute;
	right: -26px;
	top: -30px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

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

#sub-container .gasipan .main-guide-card__heading {
	display: block;
	margin: 0 0 14px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: #fff;
}

#sub-container .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;
}

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

#sub-container .gasipan .main-guide-card__aside {
	position: relative;
	z-index: 1;
	flex: 0 0 148px;
	height: 110px;
}

#sub-container .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;
}

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

#sub-container .gasipan .main-guide-card__ticket-hole--l {
	left: -8px;
}

#sub-container .gasipan .main-guide-card__ticket-hole--r {
	right: -8px;
}

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

#sub-container .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;
}

#sub-container .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);
}

#sub-container .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);
}

#sub-container .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);
}

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

#sub-container .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);
}

#sub-container .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);
}

#sub-container .gasipan .sample-guide-banner {
	overflow: hidden;
	border-radius: 0;
	background: #eef7f6;
}

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

#sub-container .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);
}

#sub-container .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;
}

#sub-container .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);
}

#sub-container .gasipan .sample-guide-banner-body {
	padding: 14px 18px 16px;
	background: #edf8f6;
}

#sub-container .gasipan .sample-guide-banner-body ul {
	margin: 0;
	padding: 0;
}

#sub-container .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;
}

#sub-container .gasipan .sample-guide-banner-body li + li {
	margin-top: 6px;
}

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

#sub-container .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;
}

.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%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	min-height: 106px;
	padding: 18px 16px 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: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sample-detached-banner-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15, 35, 70, 0.14);
	border-color: #c5d0e8;
}

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

.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;
}

#sub-container .gasipan .sample-detached-banner-icon {
	height: auto;
	min-height: 44px;
}

#sub-container .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: color 0.2s ease;
}

#sub-container .gasipan .sample-detached-banner-card:hover .sample-detached-banner-icon {
	color: #2f5fd0;
}

#sub-container .gasipan .sample-detached-banner-card:hover .sample-detached-banner-text strong {
	color: #1e293b;
}

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

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

.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);
}

.bg_blue {
	position: relative;
    /* margin-top: 34px; */
    /* background: linear-gradient(135deg, #0e5ceb 0%, #0043c9 52%, #003ab2 100%); */
	background: linear-gradient(135deg, #3e77df 0%, #0043c9 52%, #2651ab 100%);
    overflow: hidden;
    max-width: 100%;
}

.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: 700;
	line-height: 1.3;
	letter-spacing: -0.05em;
	word-break: keep-all;
}

.sample-course-compare-line {
	width: 32px;
	height: 3px;
	margin: 20px 0 18px;
	border-radius: 999px;
	background: rgba(142, 212, 255, 0.95);
}

.sample-course-compare-copy p {
	margin: 0;
	color: rgba(235, 242, 255, 0.84);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: -0.03em;
	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: 12px;
}

.sample-course-compare-card {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
	padding: 18px 18px 16px;
	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 {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0;
	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.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 {
	flex: 1;
	min-width: 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;
}

.sample-course-compare-desc {
	display: block;
	margin-top: 8px;
	color: #5f6878;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.65;
	letter-spacing: -0.03em;
	word-break: keep-all;
}

.sample-course-compare-morelink {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #2563eb;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

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

.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;
	}

	#sub-container .gasipan .sample-board-menu {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
	}

	#sub-container .gasipan .sample-board-menu-start {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	#sub-container .gasipan .sample-board-title {
		padding-bottom: 0;
		font-size: 26px;
	}

	#sub-container .gasipan .sample-guide-panel {
		padding: 14px 14px 16px;
	}

	#sub-container .gasipan .sample-guide-banner-top {
		padding: 14px 16px 16px;
	}

	#sub-container .gasipan .sample-guide-banner-top strong {
		font-size: 20px;
	}

	#sub-container .gasipan .sample-guide-banner-body {
		padding: 12px 14px 14px;
	}

	#sub-container .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-card {
		padding: 16px 16px 14px;
	}

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

	.sample-course-compare-desc {
		font-size: 12px;
		margin-top: 8px;
		line-height: 1.6;
	}

	.sample-course-compare-morelink {
		font-size: 12px;
		margin-top: 8px;
	}

	.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;
	}
}

/* 가이드 시안: 연한 하늘색 + 소프트 카드(아이콘 박스·라인 아이콘) */
#sub-container .sample-guide-soft.sample-guide-soft--draft {
	background: linear-gradient(180deg, #edf6fc 0%, #e6f0f9 100%);
	padding: 52px 0 58px;
}

#sub-container .sample-guide-soft-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 4px;
	box-sizing: border-box;
}

#sub-container .sample-guide-soft.sample-guide-soft--draft .sample-guide-hub-head {
	margin: 0 0 32px;
}

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

#sub-container .sample-guide-soft-card {
	display: block;
	padding: 18px 18px 16px;
	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.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
	min-height: 0;
}

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

#sub-container .sample-guide-soft-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 16px;
	border-radius: 12px;
	color: #4b5563;
}

#sub-container .sample-guide-soft-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

#sub-container .theme-soft-blue .sample-guide-soft-icon {
	background: #dbeafe;
}

#sub-container .theme-soft-green .sample-guide-soft-icon {
	background: #d1fae5;
}

#sub-container .theme-soft-orange .sample-guide-soft-icon {
	background: #ffedd5;
}

#sub-container .theme-soft-violet .sample-guide-soft-icon {
	background: #ede9fe;
}

#sub-container .theme-soft-cyan .sample-guide-soft-icon {
	background: #cffafe;
}

#sub-container .theme-soft-slate .sample-guide-soft-icon {
	background: #e2e8f0;
}

#sub-container .sample-guide-soft-title {
	display: block;
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 800;
	color: #182033;
	line-height: 1.35;
	letter-spacing: -0.04em;
	word-break: keep-all;
}

#sub-container .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;
}

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

@media (max-width: 560px) {
	#sub-container .sample-guide-soft-grid {
		grid-template-columns: 1fr;
	}
}

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

#sub-container .sample-guide-hub {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 4px;
}

#sub-container .sample-guide-hub-head {
	margin: 0 0 36px;
	text-align: left;
}

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

#sub-container .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;
}

#sub-container .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;
}

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

#sub-container .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;
}

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

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

#sub-container .sample-guide-hub-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	flex: 1;
}

#sub-container .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;
}

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

#sub-container .sample-guide-hub-icon svg {
	width: 28px;
	height: 28px;
}

#sub-container .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;
}

#sub-container .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;
}

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

#sub-container .sample-guide-hub-card.theme-guide-blue .sample-guide-hub-icon {
	background: #e8f1ff;
}

#sub-container .sample-guide-hub-card.theme-guide-blue .sample-guide-hub-arrow {
	color: #0055ff;
}

#sub-container .sample-guide-hub-card.theme-guide-green .sample-guide-hub-icon {
	background: #e4f6ee;
}

#sub-container .sample-guide-hub-card.theme-guide-green .sample-guide-hub-arrow {
	color: #0d9f6e;
}

#sub-container .sample-guide-hub-card.theme-guide-coral .sample-guide-hub-icon {
	background: #fff1e6;
}

#sub-container .sample-guide-hub-card.theme-guide-coral .sample-guide-hub-arrow {
	color: #ea580c;
}

#sub-container .sample-guide-hub-card.theme-guide-violet .sample-guide-hub-icon {
	background: #eee8ff;
}

#sub-container .sample-guide-hub-card.theme-guide-violet .sample-guide-hub-arrow {
	color: #7c3aed;
}

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

	#sub-container .sample-guide-hub-title {
		font-size: 28px;
	}
}

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

	#sub-container .sample-guide-hub-wrap {
		padding: 44px 0 48px;
	}

	#sub-container .sample-guide-hub-head {
		margin-bottom: 28px;
	}

	#sub-container .sample-guide-hub-title {
		font-size: 26px;
	}

	#sub-container .sample-guide-hub-lead {
		font-size: 15px;
	}

	#sub-container .sample-guide-hub-card {
		min-height: 0;
		padding: 22px 20px 20px;
	}

	#sub-container .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;
}

.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 .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 #cfd8e6;
	/* 긴 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 #gnb_area:not(:hover):not(:focus-within) .gnbDiv .gnbWrap .gnb ul > li.on > a.oneDep {
	border-bottom-color: #0a2650;
}

.sample-topnav-scope #gnb_area:hover .gnbDiv .gnbWrap .gnb ul > li:not(.on):not(:hover) > a.oneDep,
.sample-topnav-scope #gnb_area:focus-within .gnbDiv .gnbWrap .gnb ul > li:not(.on):not(:focus-within) > a.oneDep {
	border-bottom-color: rgba(10, 38, 80, 0.22);
}

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

/* 메가 펼침 중에도 현재 섹션(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: 2px solid #fff !important;
}

.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: #f5f7fa;
	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%);
}

#sub-container .sample-review-ingang .section-best-subject {
	position: relative;
	z-index: 1;
	padding: 0 !important;
	margin: 0;
}

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

#sub-container .sample-review-ingang .sample-review-stack {
	max-width: none;
	margin: 0;
	text-align: left;
}

#sub-container .sample-review-ingang .sample-review-head.sample-guide-hub-head {
	margin: 0 0 12px;
	text-align: left;
}

#sub-container .sample-review-ingang .sample-review-head .sample-guide-hub-kicker {
	text-transform: uppercase;
	margin: 0 0 5px;
}

#sub-container .sample-review-ingang .sample-review-head .sample-guide-hub-title {
	margin: 0 0 6px;
}

#sub-container .sample-review-ingang .sample-review-head .sample-guide-hub-lead {
	margin: 0;
	max-width: none;
}

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

#sub-container .sample-review-ingang .sample-review-lead-row .sample-guide-hub-lead {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 520px;
	margin: 0;
}

#sub-container .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;
}

#sub-container .sample-review-ingang .sample-review-stack .sample-review-more-btn {
	margin: 0 0 24px;
}

#sub-container .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;
}

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

#sub-container .sample-review-ingang .sample-review-slider-wrap {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

#sub-container .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) {
	#sub-container .sample-review-ingang .sample-review-lead-row {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 8px;
	}

	#sub-container .sample-review-ingang .sample-review-lead-row .review-swiper-nav {
		justify-content: flex-end;
		margin-top: 0;
	}
}

@media (max-width: 991px) {
	#sub-container .sample-review-ingang.section_pass_bg {
		padding: 32px 0 40px;
	}

	#sub-container .sample-review-ingang .sample-guide-hub.sample-review-hub {
		padding-left: 4px;
		padding-right: 4px;
	}

	#sub-container .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;
}

.sample-review-ingang .sample-review-card:hover {
	box-shadow: 0 14px 28px 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__best {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #fff;
	background: linear-gradient(135deg, #f472b6, #ec4899);
	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 svg {
	display: block;
}

.sample-review-ingang .sample-review-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.04em;
	color: #182033;
	word-break: keep-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.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: 13px;
	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: 700;
	color: #2563eb;
}

.sample-review-ingang .sample-review-card__views {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 600;
	color: #6b7280;
	font-variant-numeric: tabular-nums;
}

.sample-review-ingang .sample-review-card__views-icon {
	display: block;
	flex-shrink: 0;
	opacity: 0.75;
}

.sample-review-ingang .sample-review-card__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.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) {
	/* sample.html 등: #sub-container에 sample-page 없을 때도 가스판 1열·추천강좌 카드 정상 표시 */
	#sub-container.sample-page .gasipan .section,
	.home-main-page #sub-container .gasipan .section {
		overflow-x: hidden;
	}

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

	#sub-container.sample-page .gasipan .right_sec,
	.home-main-page #sub-container .gasipan .right_sec {
		margin-top: 48px;
		display: flow-root;
	}

	#sub-container.sample-page .gasipan .right_sec .list_four,
	.home-main-page #sub-container .gasipan .right_sec .list_four {
		margin-top: 16px;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

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

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

	/* 추천강좌 카드: 세로 스택(column) 오버라이드는 티켓·텍스트 겹침으로 깨짐 → 가로(row) 유지, 패딩·글자만 축소 */
	#sub-container.sample-page .gasipan .sample-guide-card.main-guide-card,
	.home-main-page #sub-container .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;
	}

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

	#sub-container.sample-page .gasipan .main-guide-card__heading,
	.home-main-page #sub-container .gasipan .main-guide-card__heading {
		font-size: 22px;
		margin-bottom: 10px;
	}

	#sub-container.sample-page .gasipan .main-guide-card__text,
	.home-main-page #sub-container .gasipan .main-guide-card__text {
		font-size: 14px;
		margin-bottom: 16px;
	}

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

	#sub-container.sample-page .gasipan .boxqna ul li:first-child .date,
	.home-main-page #sub-container .gasipan .boxqna ul li:first-child .date {
		min-width: 0;
		flex: 0 0 auto;
		font-size: 11px;
	}
}

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

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