@font-face {
	font-family: Pretendard;
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	src: url(../font/PretendardVariable.woff2) format("woff2-variations");
}

html.lenis,
html.lenis body {
	height: auto;
}

::selection {
	/* background-color: #d4dcf5; */
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overflow: clip;
}

:root {
	--primary-color: #238bd7;
	--sub-color: #3572c1;
	--text-dark: #222222;
	--text-basic: #333333;
	--text-muted: #555555;
	--text-llight: #f0f6fe;
	--border-color: #e5e7eb;
	--bg-popover: #ffffff;
	--transition-speed: 0.25s;
	--transition1: all 0.4s ease;
	--side-padding: 14rem;
	--aurora-color1: rgba(99, 102, 241, 0.2);
	--aurora-color2: rgba(139, 92, 246, 0.2);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ol,
ul,
li {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

a {
	text-decoration: none;
	color: inherit;
}

html {
	font-size: 1px;
}

body {
	color: var(--text-basic);
	background-color: #fff;
	margin: 0;
	font-family:
		pretendard,
		나눔고딕,
		NanumGothic,
		Nanum Gothic,
		돋움,
		Dotum,
		Arial,
		sans-serif;
	line-height: 1.5;
	overflow-x: auto;
	overflow-y: scroll;
	font-size: 16rem;
}

/* 교육비 결제 */
.expense-intro {
	margin: 0 0 32rem;
	padding: 24rem 28rem;
	border-left: 4rem solid var(--primary-color);
	background: #f3f8fc;
}

.expense-intro strong {
	display: block;
	margin-bottom: 4rem;
	font-size: 21rem;
	color: var(--text-dark);
}

.expense-intro p,
.expense-notice {
	font-size: 14rem;
	color: var(--text-muted);
}

.expense-section {
	margin-top: 38rem;
}

.expense-section-head {
	display: flex;
	align-items: center;
	gap: 10rem;
	margin-bottom: 14rem;
}

.expense-section-head span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28rem;
	height: 28rem;
	border-radius: 50%;
	background: var(--primary-color);
	color: #fff;
	font-size: 12rem;
	font-weight: 700;
}

.expense-section-head h2 {
	font-size: 20rem;
	font-weight: 700;
	color: var(--text-dark);
}

.expense-table {
	width: 100%;
	margin: 0;
}

.expense-table th {
	width: 180rem;
	font-size: 15rem;
}

.expense-table td {
	padding: 11rem 14rem;
}

.expense-table select,
.expense-table input {
	width: min(100%, 570rem);
	min-height: 42rem;
	border: 1rem solid #cfd7df;
	border-radius: 2rem;
	padding: 0 12rem;
	background: #fff;
	font: inherit;
	font-size: 14rem;
}

.expense-agreements {
	margin-top: 12rem;
	border-top: 2rem solid #68717c;
	border-bottom: 1rem solid #d8dee5;
}

.expense-agree-all,
.expense-agree-item {
	display: flex;
	align-items: center;
	gap: 12rem;
	min-height: 56rem;
	padding: 12rem 16rem;
	border-bottom: 1rem solid #e5e9ed;
	font-size: 15rem;
}

.expense-agree-all {
	background: #f7f9fb;
	font-size: 16rem;
}

.expense-agree-item {
	flex-wrap: wrap;
}

.expense-agree-item label {
	flex: 1 1 auto;
}

.expense-detail-btn {
	border: 0;
	background: transparent;
	color: #1d6eac;
	font: inherit;
	font-size: 13rem;
	text-decoration: underline;
	cursor: pointer;
}

.expense-detail {
	display: none;
	flex-basis: 100%;
	margin-top: 4rem;
	padding: 16rem;
	background: #f8fafc;
	color: #53606c;
	font-size: 13rem;
	line-height: 1.75;
}

.expense-detail.open {
	display: block;
}

.expense-detail p + p {
	margin-top: 8rem;
}

.expense-submit-wrap {
	margin-top: 36rem;
	text-align: center;
}

.expense-submit,
.expense-modal-confirm,
.expense-result-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 176rem;
	min-height: 52rem;
	border: 0;
	border-radius: 2rem;
	background: var(--primary-color);
	color: #fff !important;
	font: inherit;
	font-size: 16rem;
	font-weight: 700;
	cursor: pointer;
}

.expense-submit:hover,
.expense-modal-confirm:hover,
.expense-result-link:hover {
	background: #1472b7;
}

.expense-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10001;
	align-items: center;
	justify-content: center;
	padding: 20rem;
	background: rgba(18, 31, 43, 0.62);
}

.expense-modal.show {
	display: flex;
}

.expense-modal-panel {
	position: relative;
	width: min(100%, 470rem);
	padding: 36rem;
	background: #fff;
	box-shadow: 0 18rem 60rem rgba(0, 0, 0, 0.25);
}

.expense-modal-close {
	position: absolute;
	top: 10rem;
	right: 14rem;
	border: 0;
	background: transparent;
	font-size: 28rem;
	line-height: 1;
	cursor: pointer;
}

.expense-modal-kicker,
.expense-result-status {
	margin-bottom: 6rem;
	color: var(--primary-color);
	font-size: 12rem;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.expense-modal h2 {
	font-size: 21rem;
	color: var(--text-dark);
}

#expense-modal-body {
	margin-top: 16rem;
	color: #59636d;
	font-size: 14rem;
	line-height: 1.7;
}

.expense-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8rem;
	margin-top: 28rem;
}

.expense-modal-cancel {
	min-width: 92rem;
	min-height: 44rem;
	border: 1rem solid #c8d0d8;
	background: #fff;
	font: inherit;
	font-size: 14rem;
	cursor: pointer;
}

.expense-modal-confirm {
	min-width: 92rem;
	min-height: 44rem;
	font-size: 14rem;
}

.expense-result {
	max-width: 680rem;
	margin: 40rem auto;
	padding: 46rem 42rem;
	border-top: 4rem solid var(--primary-color);
	background: #f8fafc;
	text-align: center;
}

.expense-result.is-fail {
	border-color: #c84646;
}

.expense-result.is-fail .expense-result-status {
	color: #c84646;
}

.expense-result h2 {
	font-size: 24rem;
	color: var(--text-dark);
}

.expense-result dl {
	margin: 28rem 0;
	border-top: 1rem solid #dce2e8;
	text-align: left;
}

.expense-result dl div {
	display: grid;
	grid-template-columns: 130rem 1fr;
	border-bottom: 1rem solid #dce2e8;
}

.expense-result dt,
.expense-result dd {
	padding: 12rem 14rem;
	font-size: 14rem;
}

.expense-result dt {
	background: #eef3f7;
	font-weight: 700;
}

/* @media (max-width: 767px) {
	.expense-intro {
		padding: 18rem;
	}
	.expense-table th {
		width: 105rem;
	}
	.expense-table th,
	.expense-table td {
		font-size: 13rem;
	}
	.expense-agree-all,
	.expense-agree-item {
		align-items: flex-start;
	}
	.expense-modal-panel {
		padding: 30rem 22rem;
	}
	.expense-result {
		padding: 34rem 18rem;
	}
	.expense-result dl div {
		grid-template-columns: 100rem 1fr;
	}
} */

form {
	display: inline;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

label {
	cursor: pointer;
}

a,
a:link,
a:visited {
	color: var(--text-basic);
	transition: color var(--transition-speed) ease;
}

a:hover {
	color: var(--primary-color);
}

a:active {
	color: #444;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

.break {
	page-break-before: always;
}

/* ==========================================================================
   초기세팅 끝
   ========================================================================== */

.d-flex {
	display: flex !important;
}

.con-start,
.justify-content-start {
	justify-content: flex-start !important;
}

.con-end,
.justify-content-end {
	justify-content: flex-end !important;
}

.con-center,
.justify-content-center {
	justify-content: center !important;
}

.item-center,
.align-items-center {
	align-items: center !important;
}

.item-start,
.align-items-start {
	-webkit-box-align: flex-start !important;
	-ms-flex-align: flex-start !important;
	align-items: flex-start !important;
}

.item-end,
.align-items-end {
	-webkit-box-align: flex-end !important;
	-ms-flex-align: flex-end !important;
	align-items: flex-end !important;
}

.item-stretch,
.align-items-stretch {
	align-items: stretch !important;
}

.con-btw,
.justify-content-space-between {
	-webkit-box-align: space-between !important;
	-ms-flex-align: space-between !important;
	justify-content: space-between !important;
}

.con-vert {
	flex-direction: column;
}

.con-row {
	flex-direction: row;
}

.con-rev {
	flex-direction: row-reverse;
}

.flex-wrap {
	flex-wrap: wrap;
}

.con-left {
	float: left;
}

.con-right {
	float: right;
}

.w5 {
	width: 5%;
	display: inline-block;
}

.w10 {
	width: 10%;
	display: inline-block;
}

.w15 {
	width: 15%;
	display: inline-block;
}

.w20 {
	width: 20%;
	display: inline-block;
}

.w25 {
	width: 25%;
	display: inline-block;
}

.w30 {
	width: 30%;
	display: inline-block;
}

.w40 {
	width: 40%;
	display: inline-block;
}

.w45 {
	width: 44%;
	display: inline-block;
}

.w50 {
	width: 50%;
	display: inline-block;
}

.w60 {
	width: 60%;
	display: inline-block;
}

.w70 {
	width: 70%;
	display: inline-block;
}

.w80 {
	width: 80%;
	display: inline-block;
}

.tour-thumb-box {
	margin: auto;
	width: 133rem;
	height: 103rem;
	padding: 4rem;
	border: 1px solid #ddd;
	background-color: #fff;
	margin-bottom: 5rem;
}

.tour-thumb-button {
	display: block;
	width: 100%;
	height: 93rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.tour-thumb-button img {
	width: 133px;
	height: 93px;
	object-fit: cover;
}

.tour-modal-open {
	overflow: hidden;
}

.tour-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 24px;
}

.tour-modal.is-open {
	display: flex;
}

.tour-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
}

.tour-modal__dialog {
	position: relative;
	z-index: 1;
	max-width: min(96vw, 1200px);
	max-height: 92vh;
	padding: 0px;

	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}

.tour-modal__image {
	display: block;
	max-width: 100%;
	max-height: calc(92vh - 68px);
	margin: 0 auto;
	object-fit: contain;
	border-radius: 13px;
}

.tour-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	padding: 4px 8px;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

/* @media (max-width: 1024px) {
	.tour-grid-table {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.tour-modal {
		padding: 12px;
	}

	.tour-modal__dialog {
		width: 100%;
		padding: 48px 10px 10px;
		border-radius: 12px;
	}

	.tour-modal__close {
		top: 10px;
		right: 10px;
	}
} */

.w90 {
	width: 90%;
	display: inline-block;
}

.w100 {
	width: 100%;
	display: inline-block;
}

.h50 {
	height: 50rem !important;
}

.h70 {
	height: 70rem !important;
}

.h100 {
	height: 100rem !important;
}

.h150 {
	height: 150rem !important;
}

.mt5 {
	margin-top: 5rem !important;
}

.mt10 {
	margin-top: 10rem !important;
}

.mt20 {
	margin-top: 20rem !important;
}

.mt30 {
	margin-top: 30rem !important;
}

.mt40 {
	margin-top: 40rem !important;
}

.mt50 {
	margin-top: 50rem !important;
}

.mt60 {
	margin-top: 60rem !important;
}

.mt70 {
	margin-top: 70rem !important;
}

.mt80 {
	margin-top: 80rem !important;
}

.mt90 {
	margin-top: 90rem !important;
}

.mt100 {
	margin-top: 100rem !important;
}

.mt130 {
	margin-top: 130rem !important;
}

.mb5 {
	margin-bottom: 5rem !important;
}

.mb0 {
	margin-bottom: 0 !important;
}

.mb10 {
	margin-bottom: 10rem !important;
}

.mb20 {
	margin-bottom: 20rem !important;
}

.mb30 {
	margin-bottom: 30rem !important;
}

.mb40 {
	margin-bottom: 40rem !important;
}

.mb50 {
	margin-bottom: 50rem !important;
}

.mb60 {
	margin-bottom: 60rem !important;
}

.mb80 {
	margin-bottom: 80rem !important;
}

.mb110 {
	margin-bottom: 110rem !important;
}

.mr5 {
	margin-right: 5rem !important;
}

.mr10 {
	margin-right: 10rem !important;
}

.mr20 {
	margin-right: 20rem !important;
}

.mr30 {
	margin-right: 30rem !important;
}

.mr40 {
	margin-right: 40rem;
}

.mr50 {
	margin-right: 50rem;
}

.mr100 {
	margin-right: 100rem;
}

.ml10 {
	margin-left: 10rem !important;
}

.ml20 {
	margin-left: 20rem !important;
}

.ml30 {
	margin-left: 30rem !important;
}

.ml40 {
	margin-left: 40rem;
}

.ml50 {
	margin-left: 50rem;
}

.pd0 {
	padding: 0 !important;
}

.pdt90 {
	padding-top: 90rem !important;
}

.pdt100 {
	padding-top: 100rem !important;
}

.pdt110 {
	padding-top: 110rem !important;
}

.pdb90 {
	padding-bottom: 90rem !important;
}

.pdb100 {
	padding-bottom: 100rem !important;
}

.pdb110 {
	padding-bottom: 110rem !important;
}

.pdb120 {
	padding-bottom: 120rem !important;
}

.pdb130 {
	padding-bottom: 130rem !important;
}

.pdb140 {
	padding-bottom: 140rem !important;
}

.pdb150 {
	padding-bottom: 150rem !important;
}

.pdb160 {
	padding-bottom: 160rem !important;
}

.pc-pt60 {
	padding-top: 60rem;
}

/* ==========================================================================
   기본 선언 끝
   ========================================================================== */

#wrap {
	position: relative;
	width: 100%;
}

.td-left {
	text-align: left !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.font-white {
	color: #fff !important;
}

/* ==========================================================================
   헤더 및 상단 내비게이션 레이아웃
   ========================================================================== */

.site-header {
	/* position: fixed;
	top: 0;
	left: 0; */
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid var(--border-color);
	/* z-index: 1010;
	transition: transform 0.3s ease-in-out; */
}

.header_sub {
	width: 100%;
	min-width: 1200px;
	height: 45px;
	border-bottom: 1px solid #dfdfdf;
}

.top_menu {
	height: 44px;
}
.top_menu li {
	float: left;
	height: 100%;
	border-right: 1px solid #e2e2e2;
	padding: 0px 25px;
}

.top_menu li a {
	display: inline-block;
	height: 100%;
	width: 100%;
	font-size: 14px;
	font-weight: 400;
	line-height: 44px;
}

.top_link li {
	padding: 0px 0px;
}
.top_link li:first-child {
	border-left: 1px solid #e2e2e2;
	width: 100px;
	background: url(/img/top_link.gif) no-repeat 0px 0px;
}
.top_link li:nth-child(2) {
	width: 85px;
	background: url(/img/top_link.gif) no-repeat -100px 0px;
}
.top_link li:nth-child(3) {
	width: 120px;
	background: url(/img/top_link.gif) no-repeat -185px 0px;
}
.top_link li:nth-child(4) {
	width: 91px;
	background: url(/img/top_link.gif) no-repeat -305px 0px;
}
.top_link li:nth-child(5) {
	width: 65px;
	background: url(/img/top_link1.png) no-repeat 20px 10px;
}
.top_link li:nth-child(6) {
	width: 165px;
	background: url(/img/top_link2.png) no-repeat 0px 0px;
}

.top_menu li:first-child {
	border-left: 1px solid #e2e2e2;
}

.top_menu li a.expense {
	color: #0b4c8f;
	font-weight: 600;
}

.wrap {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding: 0px;
	text-align: left;
}

.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 1200rem;
	margin: 0 auto;
	padding: 0 25rem;
	height: 100rem;
}

.logo {
	font-size: 22rem;
	font-weight: 900;
}

.logo-swiper-container {
	height: 52rem;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.logo span {
	color: var(--text-dark);
}

.logo span.text1 {
	font-size: 19rem;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.7rem;
}

.logo span.text2 {
	font-size: 12rem;
	font-weight: 600;
	line-height: 1;
}

.logo img {
	height: 43rem;
	display: block;
}

/* 대메뉴 리스트 */
.nav-list {
	display: flex;
	align-items: center;
	gap: 25rem;
	height: 100%;
}

.nav-item {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

.nav-item-sub {
	padding-left: 35rem;
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
}

/* 대메뉴 링크 스타일 */
a.nav-trigger {
	font-size: 21rem;
	font-weight: 600;
	padding: 30rem 25rem;
	height: 100%;
	display: flex;
	align-items: center;
	color: var(--text-dark);
	transition: color var(--transition-speed);
}

.nav-item:hover a.nav-trigger,
.nav-item.active a.nav-trigger {
	color: var(--primary-color) !important;
}

a.nav-trigger-sub {
	font-size: 15rem;
	font-weight: 600;
	padding: 30rem 10rem;
	color: var(--text-muted);
}

.mega-menu {
	position: absolute;
	top: 81rem;
	left: 50%;
	transform: translateX(-50%);

	/* [수정] 고정 가로폭 해제 및 자동 조절 설정 */
	width: max-content;
	/* 내부 컨텐츠의 최대 길이에 딱 맞게 가로폭 자동 조절 */
	min-width: 100rem;
	/* 메뉴가 너무 적을 때 지나치게 좁아지는 것 방지 */
	max-width: 90vw;
	/* 브라우저 화면을 벗어나지 않도록 최대 가로폭 제한 */

	background-color: var(--bg-popover);
	border: 1px solid var(--border-color);
	border-radius: 8rem;
	box-shadow: 0 10rem 25rem rgba(0, 0, 0, 0.1);
	padding: 20rem;

	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--transition-speed) ease,
		transform var(--transition-speed) ease;
	z-index: 1100;
}

/* 활성화 상태 (JS 연동) */
.nav-item.active .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(5rem);
}

/* 서브메뉴 내부 그리드 (2열 정렬) */
.mega-menu-inner {
	display: grid;
	/* [수정] 개수에 맞춰 열을 무조건 고정하지 않고, 컨텐츠 길이에 맞게 반응형 배치 */
	grid-template-columns: repeat(auto-fit, minmax(150rem, 1fr));
	gap: 1rem;

	/* 메뉴가 늘어날 때 정렬이 깨지지 않도록 정렬 기준 인라인 지정 */
	align-items: start;
}

/* 서브메뉴 개별 카드 블록 */
.mega-sub-item {
	display: flex;
	flex-direction: column;
	gap: 4rem;
	padding: 10rem;
	border-radius: 6rem;
	transition: background-color var(--transition-speed);

	/* [추가] 텍스트가 길어져도 카드가 찌그러지지 않고 자연스럽게 확보되도록 설정 */
	white-space: nowrap;
}

.mega-sub-item:hover {
	background-color: #f4f7fa;
}

.sub-title {
	font-size: 16rem;
	font-weight: 600;
	color: var(--text-dark);
}

.mega-sub-item:hover .sub-title {
	color: var(--primary-color);
}

.sub-desc {
	font-size: 12.5rem;
	font-weight: 500;
	color: var(--text-muted);
	line-height: 1.4;
	letter-spacing: -0.3rem;
}

/* ==========================================================================
   푸터 레이아웃 (Footer Styling)
   ========================================================================== */
.site-footer {
	background-color: #5e606b;
	color: var(--border-color);
	padding: 50rem 0;
	border-top: 1px solid #e4e4e4;
	font-size: 14.5rem;
	font-weight: 100;
}

.site-footer .inner {
	max-width: 1200rem;
	margin: 0 auto;
	padding: 0 0rem;
	display: flex;
	padding: 0 35rem;
	justify-content: space-between;
	align-items: flex-start;
}

.site-footer .left {
	display: flex;
	flex-direction: column;
	gap: 30rem;
}

.site-footer .link-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 25rem;
}

.site-footer .link {
	color: #ffffff;
	font-weight: 500;
	transition: color var(--transition-speed) ease;
	font-size: 16rem;
}

.site-footer .link:hover {
	color: #ffffff;
}

.site-footer .link.privacy {
	color: #ffffff;
	font-weight: 500;
}

.site-footer .info {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.site-footer .addr {
	display: flex;
	flex-wrap: wrap;
	gap: 16rem;
	color: #ffffff;
	line-height: 1.5;
	margin-bottom: 0;
	font-weight: 300;
}

.site-footer .addr span {
	position: relative;
}

.site-footer .copyright {
	font-size: 14rem;
	color: #ffffff;
	margin-top: 5rem;
	font-weight: 200;
}

.site-footer .right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10rem;
}

.site-footer .right img {
	width: 94rem;
}

.site-footer .family-wrap {
	position: relative;
}

.site-footer .sns-wrap {
	display: flex;
	gap: 12rem;
}

.site-footer .sns-box {
	display: inline-block;
	width: 38rem;
	height: 38rem;
	border-radius: 50%;
	background-color: #fff;
	background-size: 20rem;
	background-position: center;
	background-repeat: no-repeat;
	transition:
		background-color var(--transition-speed) ease,
		transform 0.2s ease;
}

.site-footer .sns-box:hover {
	background-color: #e9e9e9;
	/* transform: translateY(-2rem); */
}

.site-footer .sns-box.youtube {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444444'%3E%3Cpath d='M23.498 6.163a3.003 3.003 0 0 0-2.11-2.11C19.517 3.545 12 3.545 12 3.545s-7.516 0-9.387.507a3.003 3.003 0 0 0-2.11 2.11C0 8.033 0 12 0 12s0 3.967.502 5.837a3.003 3.003 0 0 0 2.11 2.11c1.871.507 9.387.507 9.387.507s7.517 0 9.387-.507a3.003 3.003 0 0 0 2.11-2.11C24 15.967 24 12 24 12s0-3.967-.502-5.837zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.site-footer .sns-box.insta {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444444'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z'/%3E%3C/svg%3E");
}

.site-footer .sns-box.linkedin {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444444'%3E%3Cpath d='M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z'/%3E%3C/svg%3E");
}

.hdhrdtv {
	background-color: #0b1127;
	overflow: hidden;
	/* 상단 및 하단 빛 효과 (Radial Gradient 중첩) */
	background-image:
        /* 상단 중앙 빛 */
		radial-gradient(
			ellipse 40% 20% at 50% 0%,
			rgba(110, 126, 189, 0.2) 0%,
			rgba(11, 17, 39, 0) 55%
		),
		/* 하단 중앙 빛 */
		radial-gradient(
				ellipse 40% 30% at 50% 100%,
				rgba(110, 126, 189, 0.2) 0%,
				rgba(11, 17, 39, 0) 55%
			);
}

.aurora-container {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: #000000;
}

/* 배경 레이어 */
.bg-layer {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* 펄스 배경 */
@keyframes pulse {
	0%,
	100% {
		opacity: 0.5;
		transform: scale(1);
	}

	50% {
		opacity: 0.7;
		transform: scale(1.05);
	}
}

.pulse-gradient {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image:
		radial-gradient(circle, var(--aurora-color1) 0%, transparent 80%),
		radial-gradient(circle, var(--aurora-color2) 0%, transparent 80%);
	background-size: 100% 100%;
	animation: pulse 8s infinite ease-in-out;
}

/* 컬러 블롭 (Blobs) */
.blobs-wrapper {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	opacity: 0;
}

.blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(64px);
}

.blob-1 {
	top: -25%;
	left: -25%;
	width: 50%;
	height: 50%;
	background-color: #9333ea;
	opacity: 0.4;
}

.blob-2 {
	bottom: -25%;
	right: -25%;
	width: 50%;
	height: 50%;
	background-color: #c026d3;
	opacity: 0.4;
}

.blob-3 {
	top: 33.33%;
	left: 33.33%;
	width: 33.33%;
	height: 33.33%;
	background-color: #4338ca;
	opacity: 0.3;
}

/* 반짝이는 별 컨테이너 */
.stars-container {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.star {
	position: absolute;
	width: 2px;
	height: 2px;
	background-color: #ffffff;
	border-radius: 50%;
	opacity: 0;
}

.tab-container {
	width: 100%;
}

/* 탭 버튼 영역 */
.tab-menu {
	display: flex;
	gap: 30rem;
	margin-bottom: 50rem;
}

.tab-btn {
	padding: 14rem 35rem;
	border-radius: 50rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background-color: rgba(255, 255, 255, 0.05);
	color: #ffffff;
	font-size: 16rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
}

/* 마우스 호버 효과 */
.tab-btn:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

/* 활성화된 탭 스타일 (이미지 디자인 적용) */
.tab-btn.active {
	background-color: #a100c2;
	border-color: #a100c2;
	box-shadow: 0 4rem 15rem rgba(161, 0, 194, 0.4);
}

/* 탭 콘텐츠 영역 */
.tab-content {
	display: none;
	padding: 0rem;
	width: 100%;
	max-width: 1200rem;
	background-color: rgba(15, 23, 42, 0.3);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-radius: 16rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	overflow: hidden;
}

/* 활성화된 콘텐츠만 표시 */
.tab-content.active {
	display: block;
}

/* 무한 세로 스크롤 래퍼 */
.job-ticker-wrapper {
	height: 540rem;
	overflow: hidden;
	position: relative;
}

.job-ticker-wrapper:hover .main-job-grid-container {
	animation-play-state: paused;
}

/* 무한 세로 스크롤 키프레임 (GPU 가속 translate3d 적용) */
@keyframes jobTickerScroll {
	0% {
		transform: translate3d(0, 0, 0);
	}

	100% {
		transform: translate3d(0, -50%, 0);
	}
}

.main-job-grid-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: #ffffff;
	will-change: transform;
	animation: jobTickerScroll 35s linear infinite;
}

/* 행 단위 그리드 및 마우스 호버 효과 */
.job-row {
	display: grid;
	grid-template-columns: 18% 18% 10% 15% 1fr;
	width: 100%;
	transition: background-color 0.25s ease;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	/* cursor: pointer; */
}

.job-row:hover {
	background-color: rgba(194, 0, 162, 0.25);
}

.job-row div img {
	max-width: 100%;
	max-height: 50rem;
	border-radius: 100rem;
}

.job-text-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0rem 0rem;
	font-size: 14rem;
	font-weight: 600;
	color: #222222;
	background: #fff;
	border-radius: 50rem;
	white-space: nowrap;
	text-align: center;
	width: 140rem;
	height: 50rem;
}

.job-row div {
	padding: 33rem 12rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18rem;
	font-weight: 500;
}

.job-row div:nth-child(1) {
	padding-left: 35rem;
}

.job-row div:nth-child(2),
.job-row div:nth-child(3) {
	font-size: 20rem;
	font-weight: 700;
}

.job-row div:nth-child(4) {
	color: #bbbbbb;
}

.job-row div:nth-child(5) {
	justify-content: flex-start;
	color: #d3daee;
	padding-right: 35rem;
}

/* ==========================================================================
   MOU 파트너쉽 3D Coverflow Swiper 스타일
   ========================================================================== */
.mou-coverflow-container {
	width: 100%;
	/* max-width: 1800rem; */
	position: relative;
	padding: 20rem 0;
	margin: 0 auto;
}

.mouCoverflowSwiper {
	width: 100%;
	/* max-width: 2362rem; */
	padding: 35rem 0 !important;
	overflow: visible;
}

.mouCoverflowSwiper .swiper-slide {
	width: 800rem !important;
	height: 500rem !important;
	border-radius: 24rem;
	/* overflow: hidden; */
	/* box-shadow: 0 12rem 10rem rgba(0, 0, 0, 0.1); */
	box-shadow: 0 10rem 30rem rgba(0, 0, 0, 0.3);
	opacity: 1;
	cursor: pointer;
}

.mouCoverflowSwiper .swiper-slide img {
	display: block;
	width: 800px;
	height: 100%;
	object-fit: cover;
	/* 브라우저에게 고품질 렌더링 알고리즘 강제 */
	image-rendering: -webkit-optimize-contrast;
	/* Safari/크롬 계열 대비 향상 */
	image-rendering: high-quality;
	/* 표준 고화질 렌더링 */

	/* transform 시 텍스처 깨짐 방지 */
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.mouCoverflowSwiper .swiper-slide-active .mou-slide-card {
	box-shadow: 0 10rem 25rem rgba(0, 0, 0, 0.4);
	opacity: 1;
	border: 2px solid rgba(255, 255, 255, 1);
}

.mou-slide-card {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 24rem;
	overflow: hidden;
}

.mou-slide-overlay {
	position: absolute;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 27%;
	background: rgba(71, 71, 71, 0.35);
	backdrop-filter: blur(3px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 35rem 40rem;
	color: #ffffff;
	pointer-events: none;
}

.mou-slide-overlay .mou-title {
	font-size: 27rem;
	font-weight: 800;
	margin-bottom: 4rem;
	letter-spacing: 0px;
	text-shadow: 0rem 2rem 4rem rgba(0, 0, 0, 0.5);
	opacity: 1;
	transform: translateY(0px);
	transition:
		opacity 0.4s ease 0.3s,
		transform 0.4s ease 0.3s;
}

.mou-slide-overlay .mou-sub {
	font-size: 17rem;
	font-weight: 700;
	text-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
	opacity: 1;
}

/* 하단 알약형 컨트롤러 < 1 / 14 > */
.mou-swiper-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0rem;
	background-color: #f2f2f4;
	padding: 18rem 30rem;
	border-radius: 50rem;
	width: fit-content;
	margin: 30rem auto 0;
	box-shadow: none;
}

.mou-swiper-controls button {
	background: none;
	border: none;
	color: #4a4a4a;
	cursor: pointer;
	padding: 0 10rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
}

.mou-swiper-controls button svg {
	width: 18rem;
	height: 18rem;
	display: block;
}

.mou-swiper-controls button:hover {
	color: #ff0080;
}

.tv-swiper-pagination,
.fac-swiper-pagination,
.mou-swiper-pagination {
	font-size: 18rem;
	font-weight: 700;
	color: #111111;
	letter-spacing: 0.5px;
	padding: 0 16rem;
	line-height: 1;
}

.tv-swiper-pagination .swiper-pagination-current,
.fac-swiper-pagination .swiper-pagination-current,
.mou-swiper-pagination .swiper-pagination-current {
	font-size: 20rem;
	color: #ff0080;
}

/* ==========================================================================
   학교 시설 안내 1600x630 스와이퍼 스타일 
   ========================================================================== */
.facility-swiper-container {
	width: 82vw !important;
	margin: 40rem auto 0;
	position: relative;
}

.facilitySwiper {
	width: 100%;
	border-radius: 24rem;
	overflow: hidden;
	box-shadow: 0 15rem 35rem rgba(0, 0, 0, 0.08);
}

.facilitySwiper .swiper-wrapper .swiper-slide {
	height: 630rem !important;
	width: 82vw !important;
}

/* 학교시설 하단 알약형 컨트롤러 < 1 / 3 > */
.tv-swiper-controls,
.facility-swiper-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0rem;
	background-color: #ffffff;
	padding: 18rem 30rem;
	border-radius: 50rem;
	width: fit-content;
	margin: 30rem auto 0;
	box-shadow: 0 4rem 15rem rgba(0, 0, 0, 0.05);
}

.tv-swiper-controls button,
.facility-swiper-controls button {
	background: none;
	border: none;
	color: #4a4a4a;
	cursor: pointer;
	padding: 0 10rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
}

.tv-swiper-controls button svg,
.facility-swiper-controls button svg {
	width: 18rem;
	height: 18rem;
	display: block;
}

.tv-swiper-controls button:hover,
.facility-swiper-controls button:hover {
	color: #ff0080;
}

.facility-fraction-pagination {
	font-size: 18rem;
	font-weight: 700;
	color: #111111;
	letter-spacing: 0.5px;
	padding: 0 16rem;
	line-height: 1;
}

.facility-slide-card {
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 24rem;
	overflow: hidden;
}

.facility-slide-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.65) 0%,
		rgba(0, 0, 0, 0.15) 35%,
		transparent 60%
	);
	pointer-events: none;
}

.facility-slide-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position: center; */
	display: block;
}

/* 학교시설 왼쪽 하단 텍스트 오버레이 (활성화 시 순차 모션) */
.facility-text-overlay {
	position: absolute;
	bottom: 50rem;
	left: 50rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14rem;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.4s ease 0.1s,
		visibility 0.4s ease 0.1s;
}

.swiper-slide-active .facility-text-overlay {
	opacity: 1;
	visibility: visible;
}

.facility-badge {
	display: inline-block;
	padding: 10rem 25rem;
	border-radius: 50rem;
	background-color: #a100c2;
	color: #ffffff;
	font-size: 15rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 3rem 10rem rgba(161, 0, 194, 0.4);
	opacity: 0;
	transform: translateY(15px);
	transition:
		opacity 0.4s ease 0.25s,
		transform 0.4s ease 0.25s;
}

.swiper-slide-active .facility-badge {
	opacity: 1;
	transform: translateY(0);
}

.facility-title {
	color: #ffffff;
	font-size: 32rem;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.7);
	opacity: 0;
	transform: translateY(15px);
	transition:
		opacity 0.4s ease 0.45s,
		transform 0.4s ease 0.45s;
}

.swiper-slide-active .facility-title {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   서브 레이아웃 
   ========================================================================== */

#contbody {
	position: relative;
	width: 100%;
}

#mainbody {
	position: relative;
	padding: 0rem 0 0rem;
	margin: 0 auto;
	transition: padding-top 0.2s ease;
}

#subbody {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 70rem;
	width: 1175rem;
	padding: 70rem 0 100rem;
	margin: 0 auto;
	transition: padding-top 0.2s ease;
}

.contenst {
	width: 905px;
	position: relative;
}

/* LNB (서브페이지 좌측 메뉴) - PC 전용 (모바일은 pc-only 클래스로 숨김) */

.lnb {
	align-items: flex-start;
	width: 200rem;
}

.lnb-group + .lnb-group {
	margin-top: 40rem;
}

.lnb-title {
	font-size: 28rem;
	font-weight: 500;
	/* color: var(--text-dark); */
	height: 57rem;
	padding-bottom: 0rem;
	margin-bottom: 0rem;
	position: relative;
}
.lnb-title .line_bg {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 3px;
	background: url(/proxy-img/image/common_n/lnb_bg.gif) no-repeat 0 0px;
}
.lnb-list .lnb-item {
	position: relative;
	line-height: 50px;
}

.lnb-list > .lnb-item > .lnb-link,
.lnb-list > .lnb-item > .lnb-item-head > .lnb-item-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16rem;
	color: #1a1a1a;
	padding: 0 0 0 15rem;
	transition: var(--transition1);
	text-align: left;
	background: none;
	line-height: 50px;
	border-bottom: 1px solid #ccc;
	font-weight: 500;
}

.lnb-item-head {
	display: flex;
	align-items: stretch;
}

.lnb-item-head button {
	border: none;
}
.lnb-list > .lnb-item > .lnb-item-head > .lnb-item-toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.lnb-link-text {
	flex: 1 1 auto;
}

.lnb-arrow {
	width: 8rem;
	height: 8rem;
	border: solid var(--text-muted);
	border-width: 0 2rem 2rem 0;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
	margin: 0 10rem 0 0;
}

.lnb-list > .lnb-item.is-open > .lnb-item-head .lnb-arrow {
	border-color: var(--primary-color);
	transform: rotate(-45deg);
}

.lnb-list > .lnb-item.active > .lnb-link .lnb-arrow {
	border-color: var(--primary-color);
	transform: rotate(-45deg);
}

.lnb-list > .lnb-item > .lnb-link:hover .lnb-arrow,
.lnb-list > .lnb-item > .lnb-item-head > .lnb-item-toggle:hover .lnb-arrow {
	border-color: var(--primary-color);
}

.lnb-list > .lnb-item > .lnb-link:hover,
.lnb-list > .lnb-item > .lnb-item-head > .lnb-item-toggle:hover {
	color: var(--primary-color);
	background-color: var(--text-llight);
}

.lnb-list > .lnb-item.active > .lnb-link,
.lnb-list > .lnb-item.active > .lnb-item-head > .lnb-item-toggle,
.lnb-list > .lnb-item.is-open > .lnb-item-head > .lnb-item-toggle {
	color: var(--primary-color);
	font-weight: 500;
	/* background-color: var(--text-llight); */
}

.lnb-sub-list {
	display: none;
	padding: 10rem 0;
	margin-top: 0rem;
	overflow: hidden;
	border-bottom: 1px solid #ccc;
}
.lnb-sub-item {
}
.lnb-sub-item a {
	display: block;
	border-bottom: 0px solid #d9d9d9;
	height: inherit;
	padding: 7px 0px 6px 20px;
	width: 180px;
	font-size: 14px;
	color: #666666;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: -1px;
}

.lnb-sub-item.active a {
	color: var(--primary-color);
	font-weight: 500;
	/* background-color: var(--text-llight); */
}

.cont_b {
	max-width: 1400rem;
	margin: 0 auto;
	min-height: 28vh;
}

.cont {
	margin: 0 auto;
	max-width: 100%;
}

.section-title {
	max-width: 905rem;
	width: 100%;
	height: 55rem;
	font-size: 29rem;
	font-weight: 600;
	color: var(--text-dark);
	line-height: 1.2;
	margin: 0 auto 50rem;
	border-bottom: 1px solid #d9d9d9;
}

.section-title.alone {
	/* margin: 0 auto 70rem; */
}

.section-title.alone2 {
	margin: 0 auto 140rem;
}

.gree-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}

p.i03 {
	font-size: 16rem;
	color: #4d4d4d;
	line-height: 25rem;
	font-weight: 500;
	padding-top: 0px;
	letter-spacing: -0px;
	text-align: justify;
	width: 100%;
	margin: 15rem 0;
}
p.i04 {
	font-size: 17rem;
	line-height: 28rem;
	font-weight: 600;
	padding: 30px 0px 0 0;
	float: right;
	margin: 0;
}
p.i04 img {
	vertical-align: middle;
	padding: 0 0 0 10px;
}
.intro_text {
	margin: 25px 0 5px 0;
}

.greet-left-box {
	font-size: 25rem;
	font-weight: 700;
	width: 300rem;
}

.greet-right-box {
	width: 700rem;
	font-size: 18.2rem;
	font-weight: 400;
	line-height: 1.6;
	text-align: justify;
	word-break: keep-all;
}

.greet-right-box img {
	margin: 0 0 0 40rem;
}

.cont-left-box {
	width: 300rem;
	font-size: 24rem;
	font-weight: 700;
}

.cont-right-box {
	width: 800rem;
	font-size: 18.2rem;
	font-weight: 400;
	line-height: 1.6;
	text-align: justify;
	word-break: keep-all;
}

.greet_img img {
	position: relative;
	margin: -200rem 0 100rem 0;
	width: 700rem;
	height: auto !important;
	align-self: flex-end;
}

.his_img img {
	position: relative;
	margin: -500rem 0 100rem 0;
	width: 700rem;
	height: auto !important;
	align-self: flex-end;
}

.map-left-box {
	width: 300rem;
	font-size: 24rem;
	font-weight: 700;
}

.map-mid-box {
	width: 300rem;
	font-size: 19rem;
	font-weight: 500;
}

.map-right-box {
	width: 600rem;
	font-size: 18.2rem;
	font-weight: 400;
	line-height: 1.6;
	text-align: justify;
	word-break: keep-all;
	overflow: hidden;
}

/* ==========================================================================
   인터랙티브 연혁 페이지 스타일 (Interactive Timeline Styling)
   ========================================================================== */

/* 상단 고정 네비게이션 탭 */
.history-sticky-nav {
	position: sticky;
	top: 0;
	/* 화면 맨 위에 고정 */
	z-index: 1000;
	/* 헤더 99999보다 높은 z-index로 덮어씌움 */
	background-color: #ffffff;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 50rem;
	width: 100%;
	height: 101rem;
}

.nav-inner {
	max-width: 1200rem;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
}

.nav-tab {
	flex: 1;
	max-width: 250rem;
	background: none;
	border: none;
	padding: 36.5rem 0;
	font-size: 22rem;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
	text-align: center;
	position: relative;
	transition: color 0.3s ease;
	font-family: pretendard;
	display: block;
	text-decoration: none !important;
}

.nav-tab::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 3rem;
	background-color: var(--primary-color);
	transition: width 0.3s ease;
}

.nav-tab:hover {
	color: var(--primary-color);
}

.nav-tab.active {
	color: var(--primary-color);
	font-weight: 700;
}

.nav-tab.active::after {
	width: 100%;
}

/* 타임라인 컨테이너 */
.timeline-container {
	position: relative;
	margin-bottom: 120rem;
}

.timeline-wrapper {
	position: relative;
	width: 100%;
}

/* 스크롤 진행선 (옅은 회색 백그라운드 선) */
.timeline-line {
	position: absolute;
	left: 350rem;
	/* 스티키 사이드바 가로폭 350rem에 정렬 */
	top: 20rem;
	bottom: 20rem;
	width: 3rem;
	background-color: #e2e8f0;
	z-index: 1;
}

/* 스크롤에 따라 차오르는 컬러 바 */
.timeline-fill {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0%;
	/* JS에서 동적 계산 */
	background-color: var(--primary-color);
	transition: height 0.1s ease-out;
}

/* 연도 구간 대역 섹션 */
.history-section {
	display: flex;
	position: relative;
	margin-bottom: 100rem;
}

.history-section:last-child {
	margin-bottom: 0;
}

/* 좌측 고정 사이드바 */
.section-sidebar {
	width: 350rem;
	flex-shrink: 0;
	position: relative;
	text-align: left;
	padding-right: 40rem;
}

/* 스티키 텍스트 (해당 년도가 스크롤될 때까지 화면에 고정) */
.sidebar-sticky {
	position: sticky;
	top: 130rem;
	/* 탭바 높이 70rem + 알파 */
	font-size: 45rem;
	font-weight: 500;
	color: var(--text-dark);
	letter-spacing: -0.5rem;
	transition: color 0.3s ease;
}

/* 우측 연혁 본문 영역 */
.section-content {
	width: 850rem;
	flex-shrink: 0;
	padding-left: 40rem;
	z-index: 2;
}

/* 개별 연도 로우 */
.history-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 60rem;
	position: relative;
	transition: transform 0.3s ease;
}

.history-row:last-child {
	margin-bottom: 0;
}

/* 연도 레이블 */
.history-row .year-label {
	width: 120rem;
	font-size: 23rem;
	font-weight: 800;
	color: var(--text-basic);
	/* 기본 비활성화 칼라 */
	position: relative;
	flex-shrink: 0;
	line-height: 1.2;
	transition: color 0.3s ease;
}

/* 개별 연도 포인트 도트 */
.history-row .year-dot {
	position: absolute;
	left: -44rem;
	/* timeline-line의 left 250rem에 맞춰 포인트 배치 */
	top: 10rem;
	width: 11rem;
	height: 11rem;
	border-radius: 50%;
	background-color: #ffffff;
	border: 3rem solid #cbd5e1;
	z-index: 3;
	transition:
		border-color 0.3s ease,
		background-color 0.3s ease,
		transform 0.3s ease;
}

/* 마우스 호버 및 스크롤 활성화(.on) 시 효과 */
.year-label {
	color: var(--primary-color);
}

.history-row.on .year-dot {
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	transform: scale(1.3);
	box-shadow: 0 0 8rem rgba(0, 86, 179, 0.5);
}

/* 연도별 세부 내용 리스트 */
.history-row .year-list {
	display: flex;
	flex-direction: column;
	gap: 12rem;
	padding-left: 20rem;
	width: 100%;
}

.history-row .year-list span {
	display: flex;
	align-items: baseline;
	font-size: 18rem;
	font-weight: 400;
	color: var(--text-basic);
	line-height: 1.5;
	word-break: keep-all;
}

.history-row .year-list span em {
	font-style: normal;
	font-weight: 700;
	color: var(--text-basic);
	margin-right: 12rem;
	font-size: 15rem;
	white-space: nowrap;
	padding: 2rem 8rem;
}

/* 스티키 고정 시 헤더 슬라이드 퇴장 */
.site-header.hide-header {
	transform: translateY(-100%);
}

.report-div {
	position: relative;
	top: 50rem;
	width: calc((100% - 32rem) / 3);
	opacity: 1;
	transition:
		top 0.7s ease,
		opacity 0.7s ease;
	margin-bottom: 40rem;
}

.report-div .img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 380rem;
	background: #f4f4f4;
}

.report-div img {
	width: 80%;
	box-shadow: 0 20rem 20rem 0 rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   선생님소개
   ========================================================================== */

.main-desc_team {
	margin: 0 auto 30rem;
	padding: 0 0 0 400rem;
	max-width: 1200rem;
	color: var(--text-basic);
	font-size: 22rem;
	line-height: 1.3;
	font-weight: 700;
}

.sub-desc_team {
	margin: 30rem 0 0 0;
	color: var(--text-basic);
	font-size: 17rem;
	font-weight: 500;
}

.main-desc_team.leftnopad {
	padding: 0;
}

.top-line2,
.top-line {
	border-top: 2px solid #333;
}

/* 카드 개별 요소 */
.card {
	display: flex;
	width: 245rem;
	flex-direction: column;
	flex-shrink: 0;
}

.image-box {
	position: relative;
	height: 326rem;
	width: 100%;
	overflow: hidden;
	border-radius: 10rem;
	background-color: #e3e3e3;
}

.member-img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	transition: filter 0.3s ease;
}

.info-box {
	padding: 12rem 0;
	backdrop-filter: blur(4rem);
	box-sizing: border-box;
}

.info-name {
	margin: 0;
	font-size: 18rem;
	font-weight: 800;
	color: #171717;
}

.info-role {
	margin: 0rem 0 0 0;
	font-size: 15rem;
	font-weight: 500;
	color: #525252;
}

.map-right-box .map-link {
	width: 600px;
	height: 350px;
	border: 1px solid var(--border-color);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.map-right-box .map-link img {
	max-width: 1209px;
	width: 1209px;
	height: 747px;
}

.map-link-desc {
	margin: 0 0 20rem 0;
	font-size: 15rem;
	color: var(--text-muted);
	line-height: 1.3;
}

.map-track-box {
	margin: 0rem 0 0 0;
	line-height: 1.4;
}

.map-track {
	font-size: 14rem;
	color: var(--text-basic);
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	min-height: 35rem;
	border: 1px solid #cfcfcf;
	border-radius: 5rem;
	width: 140rem;
	margin: 0 0 7rem 0;
	transition: all 0.2s ease;
}

.map-track:hover {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	color: #ffffff;
	cursor: pointer;
}

/* ==========================================================================
   교직원 카드 및 상세 모달 인터랙션 (Premium Aesthetics)
   ========================================================================== */

/* 카드 호버 효과 */
.card[data-teacher-id] {
	cursor: pointer;
}

.card[data-teacher-id] .member-img {
	transition: filter 0.3s ease;
}

.card[data-teacher-id]:hover .member-img {
	filter: brightness(0.95);
}

/* 모달 기본 컨테이너 */
.teacher-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.2s ease,
		visibility 0.2s ease;
}

.teacher-modal.show {
	opacity: 1;
	visibility: visible;
}

/* 모달 블러 오버레이 */
.modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(15, 23, 42, 0.45);
	/* 다크 슬레이트 톤 투명도 */
	backdrop-filter: blur(5px);
	/* 고급스러운 Glassmorphism */
	-webkit-backdrop-filter: blur(5px);
	transition: opacity 0.2s ease;
}

/* 모달 래퍼 및 정렬 */
.modal-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rem;
	box-sizing: border-box;
}

/* 모달 본체 */
.modal-content {
	background-color: #ffffff;
	border-radius: 20rem;
	width: 800rem;
	max-width: 100%;
	height: 620rem;
	/* 데스크톱 고정 높이 지정 */
	max-height: 85vh;
	/* 화면 크기에 맞추어 안전 높이 확보 */
	display: flex;
	flex-direction: column;
	box-shadow: 0 25rem 50rem -12rem rgba(0, 0, 0, 0.3);
	overflow: hidden;
	position: relative;
	transform: scale(0.94) translateY(10rem);
	transition:
		transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
		opacity 0.2s ease;
	z-index: 10;
}

.teacher-modal.show .modal-content {
	transform: scale(1) translateY(0);
}

/* 닫기 버튼 */
.modal-close-btn {
	position: absolute;
	top: 20rem;
	right: 25rem;
	background: none;
	border: none;
	font-size: 36rem;
	line-height: 1;
	font-weight: 300;
	color: #9ca3af;
	cursor: pointer;
	transition:
		color 0.2s ease,
		transform 0.2s ease;
	z-index: 12;
}

.modal-close-btn:hover {
	color: var(--text-dark);
	transform: rotate(90deg);
}

/* 모달 내부 구성 */
.modal-body {
	display: flex;
	gap: 45rem;
	padding: 45rem;
	flex: 1;
	min-height: 0;
	/* 자식이 부모 높이를 초과하지 않도록 제한 */
	box-sizing: border-box;
}

/* 좌측 프로필 이미지 */
.modal-left {
	width: 245rem;
	flex-shrink: 0;
}

.modal-img-container {
	width: 100%;
	aspect-ratio: 245 / 326;
	border-radius: 16rem;
	overflow: hidden;
	background-color: #f3f4f6;
	box-shadow: 0 4rem 15rem rgba(0, 0, 0, 0.08);
}

#modalTeacherImg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 우측 상세 정보 */
.modal-right {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	min-height: 0;
}

/* 이력 상세 내용이 들어가는 스크롤 영역 */
.modal-details-container {
	flex: 1;
	overflow-y: auto;
	/* 직책, 이름 하단의 상세 정보들만 스크롤되도록 설정 */
	min-height: 0;
	/* 스크롤 동작을 위한 flex 자식 제한 */
	padding-right: 15rem;
	/* 스크롤바가 글자를 가리지 않도록 여백 제공 */
}

/* 상세 정보 스크롤바 커스텀 (Premium Aesthetics) */
.modal-details-container::-webkit-scrollbar {
	width: 6rem;
}

.modal-details-container::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 10rem;
}

.modal-details-container::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 10rem;
	transition: background-color 0.2s ease;
}

.modal-details-container::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

.modal-label {
	display: inline-block;
	font-size: 14rem;
	font-weight: 700;
	color: var(--primary-color);
	letter-spacing: 1.5rem;
	margin-bottom: 6rem;
	background-color: rgba(20, 87, 175, 0.07);
	border: 1px solid #c5ceda;
	padding: 3rem 15rem;
	border-radius: 40rem;
	width: fit-content;
	letter-spacing: -0.3rem;
}

.modal-name {
	font-size: 30rem;
	font-weight: 800;
	color: var(--text-dark);
	margin: 0 0 25rem 0;
}

/* 정보 섹션 */
.modal-info-section {
	margin-bottom: 22rem;
}

.modal-info-section:last-child {
	margin-bottom: 0;
}

.section-subtitle {
	font-size: 16.5rem;
	font-weight: 700;
	color: var(--text-dark);
	margin: 0 0 10rem 0;
	position: relative;
	padding-left: 12rem;
}

.section-subtitle::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3rem;
	bottom: 3rem;
	width: 3.5rem;
	background-color: var(--primary-color);
	border-radius: 2rem;
}

.modal-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.modal-list li {
	font-size: 15rem;
	letter-spacing: -0.5rem;
	color: var(--text-basic);
	line-height: 1.55;
	position: relative;
	padding-left: 14rem;
}

/* .modal-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8.5rem;
    width: 4.5rem;
    height: 4.5rem;
    background-color: #94a3b8;
    border-radius: 50%;
} */

.modal-list li.no-data {
	color: #94a3b8;
	padding-left: 0;
}

.modal-list li.no-data::before {
	display: none;
}

/* 반응형 모바일 대응 */

/* ==========================================================================
   학점은행제
   ========================================================================== */

.academic-table {
	overflow-x: auto;
	margin-bottom: 20px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	width: 100%;
}

table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	font-size: 15rem;
	overflow-x: auto;
	border-bottom: none;
}

table th {
	background-color: var(--primary-color);
	color: white;
	font-weight: 500;
	padding: 14px 10px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
}

table tr:last-child td {
	border-bottom: none;
}

table th:last-child,
table td:last-child {
	border-right: none;
}

table th.hd-sub {
	background-color: var(--sub-color);
}

table td {
	padding: 14px 10px;
	border-bottom: 1px solid var(--border-color);
	background-color: #fff;
	color: var(--text-basic);
}

table td.no-right-border {
	border-right: none;
}

table td.no-bottom-border {
	border-bottom: none;
}

.highlight {
	font-weight: 600;
	color: var(--text-basic);
}

.table-note {
	background-color: var(--text-llight);
	font-size: 14rem;
	color: var(--text-basic);
	padding: 4px 8px;
	border-radius: 4px;
	display: inline-block;
	font-weight: 600;
}

.academic-cont h3 {
	font-size: 18rem;
	color: var(--text-basic);
	margin: 20px 0 10px 0;
	font-weight: 600;
}

.academic-cont h3:first-child {
	margin-top: 0;
}

.academic-cont ul {
	list-style: none;
	padding-left: 0;
}

.academic-cont li {
	position: relative;
	padding-left: 20rem;
	margin-bottom: 8rem;
	font-size: 16rem;
}

.academic-cont li::before {
	content: "•";
	color: var(--text-muted);
	font-weight: bold;
	position: absolute;
	left: 5rem;
}

.academic-cont .sub-text {
	font-size: 16.5rem;
	margin-top: -5rem;
	margin-bottom: 15rem;
	padding-left: 5rem;
}

.scholarship-table table tbody td {
	border-right: 1px solid var(--border-color);
}

.scholarship-table table tbody td:last-child {
	border-right: none;
}

.scholarship-table table tbody td.right-border {
	border-right: 1px solid var(--border-color);
}

.rule-section {
	width: 100%;
	margin-bottom: 30rem;
	padding-bottom: 20rem;
	border-bottom: 1px dashed var(--border-color);
}

.rule-section:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.rule-title {
	font-size: 19rem;
	font-weight: 700;
	color: var(--text-basic);
	margin-bottom: 12rem;
	display: flex;
	align-items: center;
	gap: 8rem;
}

.rule-title::before {
	content: "";
	display: inline-block;
	width: 4rem;
	height: 18rem;
	background-color: var(--secondary-color);
	border-radius: 2rem;
}

.rule-content {
	font-size: 16rem;
	color: var(--text-dark);
	padding-left: 12rem;
}

.rule-content p {
	margin-bottom: 6rem;
}

.rule-content ul {
	list-style-type: none;
	padding-left: 15rem;
	margin-top: 6rem;
	margin-bottom: 6rem;
}

.rule-content li {
	position: relative;
	padding-left: 10rem;
	margin-bottom: 4rem;
}

.rule-content li::before {
	content: "";
	position: absolute;
	left: 0;
	color: var(--secondary-color);
	font-weight: bold;
}

/* ==========================================================================
   취업정보
   ========================================================================== */
.job-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.employment-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: 16px;
	padding: 28px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* 마우스 호버 시 포인트 효과 */
.employment-card:hover {
	transform: translateY(-3px);
	border-color: var(--secondary-color);
	box-shadow: 0 12px 20px -8px rgba(14, 165, 233, 0.15);
}

/* 상단 취업률 수치 영역 */
.job-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16rem;
}

.rate-label {
	font-size: 14rem;
	font-weight: 700;
	color: var(--text-muted);
	border: 1px solid var(--border-color);
	background-color: #f4f4f5;
	padding: 4rem 12rem;
	border-radius: 30rem;
}

.rate-number {
	font-size: 58rem;
	font-weight: 900;
	color: var(--primary-color);
	line-height: 1;
	letter-spacing: -1px;
}

.rate-number span {
	font-size: 22rem;
	font-weight: 700;
	color: var(--sub-color);
	margin-left: 2rem;
}

/* 중간 과정명 영역 */
.card-body {
	margin-bottom: 20rem;
}

.course-tag {
	font-size: 13rem;
	color: var(--sub-color);
	font-weight: 700;
	display: inline-block;
	margin-bottom: 6rem;
	text-transform: uppercase;
}

.course-name {
	font-size: 18rem;
	font-weight: 700;
	color: var(--text-dark);
	line-height: 1.4;
	/* word-break: keep-all; */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 하단 교육 기간 영역 */
.card-footer {
	display: none !important;
	border-top: 1px solid var(--border-color);
	padding-top: 14rem;
	display: flex;
	align-items: center;
	gap: 6rem;
	font-size: 15rem;
	color: var(--text-muted);
}

.calendar-icon {
	color: var(--secondary-color);
	font-weight: bold;
}

.job-grid2 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.info-card {
	position: relative;
	height: 520px;
	/* 세로형 카드 높이 지정 */
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 30px 20px 20px 20px;
	background-color: var(--card-bg);
	background-size: cover;
	background-position: center;
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

/* 각 카드별 배경 이미지 예시 (원하는 이미지 URL로 대체 가능) */
.info-card:nth-child(1) {
	background-image: url("/img/vision_bg_01.jpg");
}

.info-card:nth-child(2) {
	background-image: url("/img/vision_bg_02.jpg");
}

.info-card:nth-child(3) {
	background-image: url("/img/vision_bg_03.jpg");
}

.info-card:nth-child(4) {
	background-image: url("/img/vision_bg_04.jpg");
}

.info-card:nth-child(5) {
	background-image: url("/img/vision_bg_05.jpg");
}

.info-card:nth-child(6) {
	background-image: url("/img/vision_bg_06.jpg");
}

.info-card:nth-child(7) {
	background-image: url("/img/vision_bg_07.jpg");
}

.info-card:nth-child(8) {
	background-image: url("/img/vision_bg_08.jpg");
}

/* 배경 이미지 위 텍스트 가독성을 위한 어두운 그라데이션 오버레이 */
.info-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.5) 30%,
		rgba(0, 0, 0, 0.2) 50%,
		rgba(0, 0, 0, 0.9) 100%
	);
	z-index: 1;
}

.info-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3);
}

/* 텍스트 내용들을 오버레이 위로 올림 */
.card-header {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.card-body,
.card-footer2 {
	position: relative;
	z-index: 2;
}

/* 상단 타이틀 스타일 */
.keyword-badge {
	font-size: 14rem;
	font-weight: 700;
	color: #eeeeee;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	margin-bottom: 5px;
	opacity: 0.9;
}

.main-title {
	font-size: 25rem;
	font-weight: 800;
	color: #fff;
	line-height: 1.3;
	word-break: keep-all;
}

.sub-text {
	display: block;
	font-size: 14rem;
	color: #787f8d;
	font-weight: normal;
	margin-top: 4px;
	font-weight: 600;
}

/* 본문 상세 스타일 정리 */
.card-body {
	margin-top: auto;
	/* 본문을 아래쪽으로 밀어내어 하단 버튼 위에 안착 */
	margin-bottom: 0px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.info-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.row-label {
	font-size: 13rem;
	font-weight: 800;
	padding: 1px 5px;
	border-radius: 4px;
	white-space: nowrap;
}

.label-core {
	background: rgba(59, 130, 246, 0.2);
	color: #93c5fd;
	border: 1px solid rgba(59, 130, 246, 0.4);
}

.label-strength {
	background: rgba(16, 185, 129, 0.2);
	color: #6ee7b7;
	border: 1px solid rgba(16, 185, 129, 0.4);
}

.label-caution {
	background: rgba(249, 115, 22, 0.2);
	color: #fdba74;
	border: 1px solid rgba(249, 115, 22, 0.4);
}

.row-text {
	color: #e5e7eb;
	font-size: 13rem;
	font-weight: 500;
	word-break: keep-all;
}

/* 이미지 속 하단 타원형 'Discover More' 버튼 스타일 */
.card-footer2 .btn-more {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--bg-popover);
	color: var(--text-basic);
	text-decoration: none;
	padding: 12px 20px;
	border-radius: 30px;
	font-size: 14rem;
	font-weight: 700;
	transition: background 0.2s;
}

.card-footer2 .btn-more:hover {
	background: #f3f4f6;
}

.modal-name2 {
	font-size: 30rem;
	font-weight: 800;
	color: var(--text-dark);
	margin: 0 0 5rem 0;
}

/* 취업전망 전용 모달 크기 재지정 */
.vision-modal-content {
	width: 800rem;
	height: 650rem;
}

/* Swiper 슬라이더 커스텀 스타일 */
.vision-swiper {
	width: 100%;
	padding: 10rem 0 50rem 0 !important;
	position: relative;
	overflow: hidden;
}

.vision-swiper .swiper-wrapper {
	align-items: stretch;
}

.vision-swiper .swiper-slide {
	height: 520rem !important;
	display: flex;
}

/* Swiper 좌우 네비게이션 버튼 커스텀 */
.vision-swiper-container .swiper-button-prev,
.vision-swiper-container .swiper-button-next {
	color: #ffffff;
	background-color: rgba(15, 23, 42, 0.6);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	transition:
		background-color 0.2s,
		transform 0.2s;
	z-index: 10;
	top: calc(330rem);
}

.vision-swiper-container .swiper-button-prev::after,
.vision-swiper-container .swiper-button-next::after {
	font-size: 16rem;
	font-weight: bold;
}

.vision-swiper-container .swiper-button-prev:hover,
.vision-swiper-container .swiper-button-next:hover {
	background-color: var(--primary-color);
	transform: scale(1.05);
}

.vision-swiper-container .swiper-button-prev {
	left: -22rem;
}

.vision-swiper-container .swiper-button-next {
	right: -22rem;
}

/* 페이지네이션 도트 스타일 */
.vision-swiper .swiper-pagination-bullet {
	background: #cbd5e1;
	opacity: 0.8;
	width: 10rem;
	height: 10rem;
	transition: all 0.3s ease;
}

.vision-swiper .swiper-pagination-bullet-active {
	background: var(--primary-color);
	opacity: 1;
	width: 24rem;
	border-radius: 5rem;
}

/* ==========================================================================
   원서접수 (Admission Apply Form) 프리미엄 스타일
   ========================================================================== */

.admission-tabs {
	background-color: #ffffff;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 50rem;
	width: 100%;
	height: 101rem;
}

.admission-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35rem;
	margin-top: 90rem;
}

/* 과정 카드 전용 포스터 스타일 (첨부 이미지 규격 피팅) */
.admission-card {
	position: relative;
	overflow: hidden;
	border-radius: 16rem;
	height: 520rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 25rem;
	box-shadow: 0 10rem 10rem rgba(0, 0, 0, 0.15);
	transition: all 0.35s ease;
	cursor: pointer;
	/* aspect-ratio: 19 / 27; */
}

.admission-card:hover .admission-content-wrap {
	transform: translateY(-10rem);
}

/* 1. 이미지 전체 커버 (자식 요소 border-radius 제거) */
.admission-img-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin-bottom: 0;
	border-radius: 0;
	overflow: visible;
	z-index: 1;
	background-color: #0f172a;
}

.admission-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease;
	backface-visibility: hidden;
}

.admission-card:hover .admission-img-wrap img {
	transform: scale(1.05);
}

/* 어두운 그라데이션 오버레이 (하단 텍스트 가독성) */
.admission-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.95) 0%,
		rgba(0, 0, 0, 0.5) 35%,
		rgba(0, 0, 0, 0.05) 75%
	);
	z-index: 2;
}

/* 2. 상단 뱃지 그룹 (좌측 상단) */
.admission-top-badges {
	position: relative;
	z-index: 3;
	display: flex;
	gap: 8rem;
	align-items: center;
}

.admission-top-badges .badge-custom,
.admission-top-badges .badge-red {
	color: #ffffff;
	font-size: 13.5rem;
	font-weight: 700;
	padding: 7rem 16rem;
	border-radius: 20rem;
	box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.15);
	letter-spacing: -0.3rem;
}

.admission-top-badges .badge-red {
	background-color: #c82929;
}

.admission-top-badges .badge-white {
	background-color: rgba(255, 255, 255, 0.7);
	color: #19202b;
	font-size: 13.5rem;
	font-weight: 700;
	padding: 7rem 16rem;
	border-radius: 20rem;
	backdrop-filter: blur(4rem);
	box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.1);
	letter-spacing: -0.3rem;
}

/* 3. 하단 텍스트 정보 영역 (좌측 하단) */
.admission-content-wrap {
	position: relative;
	z-index: 3;
	text-align: left;
	margin-top: auto;
	transition: transform 0.3s ease;
}

.admission-summary {
	font-size: 14rem;
	color: #ffffff;
	font-weight: 600;
	opacity: 0.95;
	margin-bottom: 6rem;
	letter-spacing: -0.3rem;
}

.admission-course-title {
	font-size: 22rem;
	font-weight: 800;
	color: #ffffff;
	line-height: 1.35;
	margin-bottom: 12rem;
	/* word-break: keep-all; */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.admission-info-date {
	font-size: 14rem;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	letter-spacing: -0.2rem;
}

/* 5. 교육기간 & 6. 본인부담금 정보 리스트 */
.admission-info-list {
	border-top: 1px dashed #e2e8f0;
	padding-top: 16rem;
	display: flex;
	flex-direction: column;
	gap: 8rem;
	margin-top: auto;
}

.admission-info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14rem;
	color: var(--text-muted);
}

.admission-info-item strong {
	color: var(--text-dark);
	font-weight: 600;
}

.admission-price {
	color: var(--primary-color);
	font-weight: 800;
	font-size: 15rem;
}

.admission-price.free {
	color: #10b981;
}

.admission-subsidy {
	font-size: 11.5rem;
	color: #71717a;
	text-align: right;
	margin-top: -4rem;
}

.admission-grid-det .admission-card {
	background: #ffffff;
	border: 1px solid var(--border-color);
	border-radius: 16rem;
	padding: 24rem;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-shadow: 0 4rem 15rem rgba(0, 0, 0, 0.02);
}

.admission-grid-det .admission-card::before {
	content: none !important;
	display: none !important;
}

.admission-grid-det .admission-img-wrap {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 10rem;
	position: relative;
	margin-bottom: 16rem;
	background-color: #f4f4f5;
}

.admission-grid-det .admission-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.admission-grid-det .admission-btn-group {
	display: flex;
	gap: 8rem;
	margin-bottom: 18rem;
}

.admission-grid-det .admission-btn-group .btn-apply {
	flex: 1;
	text-align: center;
	background-color: var(--primary-color);
	color: #ffffff !important;
	padding: 10rem 0;
	border-radius: 8rem;
	font-size: 14rem;
	font-weight: 700;
	transition: background-color 0.2s;
	text-decoration: none;
}

.admission-grid-det .admission-btn-group .btn-detail {
	flex: 1;
	text-align: center;
	border: 1px solid #aaaaaa;
	background-color: #ffffff;
	color: var(--text-dark) !important;
	padding: 10rem 0;
	border-radius: 8rem;
	font-size: 14rem;
	font-weight: 700;
	transition: all 0.2s;
	text-decoration: none;
}

.admission-grid-det .admission-btn-group .btn-apply:hover {
	background-color: #0d3972;
}

.admission-grid-det .admission-btn-group .btn-detail:hover {
	background-color: #f8fafc;
	border-color: var(--text-basic);
}

.admission-grid-det .admission-summary {
	font-size: 13.5rem;
	color: var(--sub-color);
	font-weight: 700;
	margin-bottom: 8rem;
	text-align: left;
	white-space: nowrap;
	overflow: none;
	text-overflow: ellipsis;
	height: 24rem;
	opacity: 1;
	letter-spacing: 0rem;
}

.admission-grid-det .admission-course-title {
	font-size: 20rem;
	font-weight: 800;
	color: var(--text-dark);
	line-height: 1.3;
	margin-bottom: 18rem;
	/* word-break: keep-all; */
	text-align: left;
	min-height: 52rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-clamp: 2;
	letter-spacing: -0.2rem;
}

.admission-grid-det .admission-info-list {
	border-top: 1px dashed #e2e8f0;
	padding-top: 16rem;
	display: flex;
	flex-direction: column;
	gap: 8rem;
	margin-top: auto;
}

.admission-grid-det .admission-info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14rem;
	color: var(--text-muted);
}

.admission-grid-det .admission-card:hover {
	transform: translateY(-0rem);
	border-color: var(--text-basic);
	box-shadow: 0 20rem 35rem rgba(20, 87, 175, 0.1);
}

/* ==========================================================================
   로그인 페이지 전용 스타일 (Login Page Styling)
   ========================================================================== */
.login-wrapper {
	width: 480rem;
	padding: 40rem;
	border: 1px solid var(--border-color);
	border-radius: 12rem;
	box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.03);
	background-color: #ffffff;
	text-align: center;
	margin-bottom: 80rem;
	margin-top: 40rem;
}

.login-title {
	font-size: 24rem;
	font-weight: 800;
	color: var(--text-dark);
	margin-bottom: 30rem;
}

.login-form-group {
	display: flex;
	flex-direction: column;
	gap: 16rem;
	margin-bottom: 20rem;
	text-align: left;
}

.login-input-wrap {
	display: flex;
	flex-direction: column;
	gap: 6rem;
}

.login-input-wrap label {
	font-size: 14.5rem;
	font-weight: 700;
	color: var(--text-dark);
}

.login-input {
	height: 48rem;
	padding: 10rem 16rem;
	font-size: 15rem;
	border: 1px solid var(--border-color);
	border-radius: 8rem;
	outline: none;
	background-color: #fafafa;
	transition: all 0.25s ease;
}

.login-input:focus {
	border-color: var(--primary-color);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(20, 87, 175, 0.1);
}

.login-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14rem;
	color: var(--text-muted);
	margin-bottom: 30rem;
}

.login-options label {
	display: flex;
	align-items: center;
	gap: 6rem;
	cursor: pointer;
}

.login-options input[type="checkbox"] {
	width: 16rem;
	height: 16rem;
	accent-color: var(--primary-color);
}

.login-options a {
	color: var(--sub-color);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s;
}

.login-options a:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

.btn-login-submit {
	width: 100%;
	height: 52rem;
	background-color: var(--primary-color);
	color: #ffffff;
	border: none;
	border-radius: 8rem;
	font-size: 16.5rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		background-color 0.2s,
		transform 0.1s;
}

.btn-login-submit:hover {
	background-color: #0d3972;
}

.btn-login-submit:active {
	transform: scale(0.98);
}

.login-signup-link {
	margin-top: 24rem;
	padding-top: 20rem;
	border-top: 1px solid #f4f4f5;
	font-size: 14.5rem;
	color: var(--text-muted);
}

.login-signup-link a {
	color: var(--sub-color);
	font-weight: 700;
	margin-left: 6rem;
	text-decoration: none;
	transition: color 0.2s;
}

.login-signup-link a:hover {
	color: var(--primary-color);
	text-decoration: underline;
}

/* ==========================================================================
   아이디/비밀번호 찾기 페이지 전용 스타일 (ID/PW Search Styling)
   ========================================================================== */
.search-wrapper {
	width: 500rem;
	padding: 40rem;
	border: 1px solid var(--border-color);
	border-radius: 12rem;
	box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.03);
	background-color: #ffffff;
	margin-bottom: 80rem;
	margin-top: 40rem;
}

.search-section {
	margin-bottom: 40rem;
	padding-bottom: 35rem;
	border-bottom: 1px solid #f4f4f5;
}

.search-section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.search-title {
	font-size: 20rem;
	font-weight: 800;
	color: var(--text-dark);
	margin-bottom: 20rem;
	text-align: left;
}

.search-form-group {
	display: flex;
	flex-direction: column;
	gap: 12rem;
	margin-bottom: 20rem;
	text-align: left;
}

.search-input-wrap {
	display: flex;
	flex-direction: column;
	gap: 6rem;
}

.search-input-wrap label {
	font-size: 14rem;
	font-weight: 700;
	color: var(--text-dark);
}

.search-input {
	height: 46rem;
	padding: 10rem 14rem;
	font-size: 14.5rem;
	border: 1px solid var(--border-color);
	border-radius: 8rem;
	outline: none;
	background-color: #fafafa;
	transition: all 0.25s ease;
}

.search-input:focus {
	border-color: var(--primary-color);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(20, 87, 175, 0.1);
}

.btn-search-id {
	width: 100%;
	height: 46rem;
	background-color: #ffffff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	border-radius: 8rem;
	font-size: 15rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-search-id:hover {
	background-color: rgba(20, 87, 175, 0.05);
	border-color: #0d3972;
	color: #0d3972;
}

.btn-search-pw {
	width: 100%;
	height: 46rem;
	background-color: var(--primary-color);
	border: none;
	color: #ffffff;
	border-radius: 8rem;
	font-size: 15rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s;
}

.btn-search-pw:hover {
	background-color: #0d3972;
}

/* ==========================================================================
   수강신청 페이지 전용 스타일 (Admission Apply Styling)
   ========================================================================== */
.apply-table-wrapper {
	width: 100%;
	margin-bottom: 40rem;
	border-top: 0px solid var(--primary-color);
	border-bottom: 0px solid var(--border-color);
}

.apply-form-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.apply-form-table th {
	background-color: #f8fafc;
	color: var(--text-dark);
	font-size: 15rem;
	font-weight: 700;
	padding: 16rem 20rem;
	text-align: left;
	border-bottom: 1px solid var(--border-color);
	vertical-align: middle;
}

.apply-form-table td {
	padding: 16rem 20rem;
	border-bottom: 1px solid var(--border-color);
	vertical-align: middle;
	background-color: #ffffff;
	text-align: left;
}

.apply-form-table .required {
	color: #ef4444;
	margin-left: 2rem;
}

.apply-form-table tr:last-child td {
	border-bottom: 1px solid var(--border-color);
}

/* 입력 필드 공통 */
.form-input,
.form-select {
	height: 46rem;
	padding: 10rem 14rem;
	font-size: 15rem;
	border: 1px solid var(--border-color);
	border-radius: 8rem;
	outline: none;
	background-color: #fafafa;
	transition: all 0.25s ease;
	box-sizing: border-box;
}

.form-input:focus,
.form-select:focus {
	border-color: var(--primary-color);
	background-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(20, 87, 175, 0.1);
}

.form-input[readonly],
.form-select[readonly] {
	background-color: #f1f3f5;
	color: #868e96;
	cursor: default;
}

/* 입력 필드 너비 유틸리티 */
.w-150 {
	width: 150rem !important;
}

.w-200 {
	width: 200rem !important;
}

.w-300 {
	width: 300rem !important;
}

.w-400 {
	width: 400rem !important;
}

.w-full {
	width: 100% !important;
}

/* 라디오 버튼 그룹 */
.radio-group {
	display: flex;
	gap: 20rem;
	align-items: center;
}

.radio-label {
	display: flex;
	align-items: center;
	gap: 8rem;
	font-size: 15rem;
	font-weight: 500;
	color: var(--text-basic);
	cursor: pointer;
}

.radio-label input[type="radio"] {
	width: 18rem;
	height: 18rem;
	accent-color: var(--primary-color);
	cursor: pointer;
}

/* 서브 버튼 (우편번호 검색 등) */
.btn-zip-code {
	height: 46rem;
	padding: 0 20rem;
	background-color: #ffffff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	font-size: 14.5rem;
	font-weight: 600;
	border-radius: 8rem;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}

.btn-zip-code:hover {
	border: 1px solid var(--text-basic);
	background-color: #f1f3f5;
	color: var(--text-dark);
}

/* 간격 조정 및 정렬 */
.g-10 {
	gap: 10rem;
}

.mb-10 {
	margin-bottom: 10rem;
}

/* 개인정보 동의 박스 */
.apply-agree-box {
	margin-top: 30rem;
	margin-bottom: 40rem;
	padding: 24rem;
	border: 1px solid var(--border-color);
	border-radius: 12rem;
	background-color: #f8fafc;
}

.agree-label {
	display: flex;
	align-items: center;
	gap: 10rem;
	font-size: 15rem;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 10rem;
	cursor: pointer;
}

.agree-label input[type="checkbox"] {
	width: 18rem;
	height: 18rem;
	accent-color: var(--primary-color);
	cursor: pointer;
}

.agree-desc {
	font-size: 13.5rem;
	color: var(--text-muted);
	line-height: 1.6;
	padding-left: 28rem;
}

/* 신청 버튼 영역 */
.apply-btn-wrapper {
	display: flex;
	justify-content: center;
	margin-bottom: 80rem;
}

.btn-apply-submit {
	width: 240rem;
	height: 54rem;
	background-color: var(--primary-color);
	color: #ffffff;
	border: none;
	border-radius: 8rem;
	font-size: 17rem;
	font-weight: 700;
	cursor: pointer;
	transition:
		background-color 0.2s,
		transform 0.1s;
	box-shadow: 0 4rem 12rem rgba(20, 87, 175, 0.2);
}

.btn-apply-submit:hover {
	background-color: #0d3972;
	transform: translateY(-0rem);
}

.btn-apply-submit:active {
	transform: translateY(0rem);
}

/* 반응형 테이블 디자인 */

/* ==========================================================================
   교육과정안내
   ========================================================================== */

.cont-title {
	font-size: 25rem;
	padding-bottom: 30rem;
	font-weight: 700;
}

.course-info-section {
	padding-top: 60rem;
	max-width: 1200rem;
	margin: 0 auto;
}

.course-info-item {
	margin-bottom: 30rem;
}

.course-info-item.w-full {
	width: 100%;
}

.course-info-item.mb-0 {
	margin-bottom: 0;
}

.course-info-sub-title {
	font-size: 19rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 10rem;
}

.course-info-desc {
	font-size: 17rem;
	color: var(--text-basic);
	line-height: 1.6;
}

.course-info-desc.mb-0 {
	margin-bottom: 0;
}

.course-info-desc.mb-10 {
	margin-bottom: 10rem;
}

.course-info-list {
	list-style: disc;
	padding-left: 20rem;
	font-size: 16rem;
	color: var(--text-muted);
	display: flex;
	flex-direction: column;
	gap: 6rem;
	margin-bottom: 0rem;
}

.course-info-list.mb-10 {
	margin-bottom: 10rem;
}

.course-info-list.gap-4 {
	gap: 4rem;
}

.course-info-list.f-135 {
	font-size: 15rem;
}

.course-info-tip-box {
	background-color: #f8fafc;
	border: 1px solid var(--border-color);
	border-radius: 8rem;
	padding: 20rem;
	line-height: 1.6;
}

.course-info-tip-title {
	color: var(--text-dark);
	display: block;
	margin-bottom: 6rem;
	font-size: 14.5rem;
}

.course-info-tip-desc {
	font-size: 15rem;
	color: var(--text-basic);
	margin-bottom: 8rem;
}

.course-info-tip-note {
	font-size: 14rem;
	color: var(--text-muted);
	display: block;
	line-height: 1.5;
	margin-bottom: 5rem;
}

.course-info-caution-text {
	font-size: 15rem;
	color: #ef4444;
	display: block;
	font-weight: 700;
	margin-bottom: 15rem;
}

.btn-course-link {
	display: inline-block;
	margin-left: 10rem;
	padding: 5rem 12rem;
	background-color: #ffffff;
	border: 1px solid #ccc;
	color: var(--text-basic);
	font-size: 13rem;
	font-weight: 700;
	border-radius: 8rem;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-course-link:hover {
	background-color: var(--sub-color);
	color: #ffffff;
	border: 1px solid var(--sub-color);
}

.course-info-steps {
	display: flex;
	flex-direction: column;
	gap: 25rem;
	width: 100%;
}

.course-info-step-item {
	border-left: 3px solid var(--primary-color);
	padding-left: 15rem;
}

.course-info-step-title {
	font-size: 18rem;
	color: var(--text-dark);
	display: block;
	margin-bottom: 6rem;
}

.course-info-step-desc {
	font-size: 16rem;
	color: var(--text-muted);
	display: block;
	line-height: 1.6;
}

.course-info-step-note {
	font-size: 13rem;
	color: var(--text-muted);
	font-weight: 500;
}

.btn-course-step-link {
	display: inline-block;
	margin-left: 5rem;
	padding: 2rem 8rem;
	border: 1px solid var(--border-color);
	border-radius: 4rem;
	font-size: 12rem;
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 700;
}

.btn-course-step-link:hover {
	background-color: #f1f5f9;
}

.course-info-step-warning {
	font-size: 13rem;
	color: #ef4444;
	font-weight: 700;
}

/* 공통 레이어 모달 */
.custom-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease;
}

.custom-modal-overlay.active {
	opacity: 1;
	visibility: visible;
}

.custom-modal-content {
	background-color: #fff;
	width: 90%;
	max-width: 420px;
	padding: 25px;
	border-radius: 8px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
	transform: scale(0.85);
	transition: transform 0.3s ease;
	text-align: center;
}

.custom-modal-overlay.active .custom-modal-content {
	transform: scale(1);
}

.custom-modal-header {
	font-size: 18px;
	font-weight: 600;
	color: #333;
	margin-bottom: 15px;
}

.custom-modal-body {
	font-size: 15px;
	color: #666;
	line-height: 1.6;
	margin-bottom: 20px;
}

.custom-modal-body .temp-password-box {
	background-color: #f8f9fa;
	border: 1px dashed #ced4da;
	padding: 10px;
	font-size: 20px;
	font-weight: 700;
	color: #d9534f;
	letter-spacing: 1px;
	margin: 15px 0;
	border-radius: 4px;
	user-select: all;
	/* 더블클릭 시 전체 선택 */
}

.custom-modal-footer {
	display: flex;
	justify-content: center;
}

.custom-modal-close-btn {
	background-color: #3f51b5;
	color: #fff;
	border: none;
	padding: 10rem 24rem;
	font-size: 14rem;
	font-weight: 600;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.custom-modal-close-btn:hover {
	background-color: #303f9f;
}

body.modal-open {
	overflow: hidden;
}

.curri-view-header {
	margin-top: -130rem;
	padding: 100rem 0 50rem;
	border-bottom: 1px solid #e6e6e6;
}

.curri_title {
	font-weight: 700;
	color: #444;
	letter-spacing: 0rem;
	font-size: 44rem;
	max-width: 1200rem;
	margin: 0 auto;
}

.curri_title-cate {
	font-weight: 500;
	color: #888;
	padding: 5rem 0rem;
	font-size: 17rem;
}

div.top_bar {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	font-size: 15rem;
	color: #444;
	font-weight: 400;
}

.hero-meta {
	display: flex;
	align-items: center;
	gap: 12rem;
	margin-bottom: 20rem;
	flex-wrap: wrap;
	max-width: 1200rem;
	margin: 0 auto;
	padding: 5rem 0;
}

.category-badge {
	color: var(--text-basic);
	padding: 6rem 14rem;
	border-radius: 50rem;
	font-size: 13.5rem;
	font-weight: 500;
	background-color: #efefef;
	border: 1px solid var(--border-color);
}

.state-badge {
	background-color: #3b82f6;
	color: #ffffff;
	padding: 6rem 14rem;
	border-radius: 50rem;
	font-size: 13.5rem;
	font-weight: 700;
}

.state-badge.state-모집중 {
	background-color: #10b981;
}

.state-badge.state-모집예정 {
	background-color: #f59e0b;
}

.state-badge.state-교육중 {
	background-color: #3b82f6;
}

.state-badge.state-수료 {
	background-color: #6b7280;
}

.hero-tags {
	gap: 15rem;
	font-size: 15rem;
	color: #797979;
	max-width: 1200rem;
	margin: 0 auto;
}

.hero-tags span {
	display: flex;
	align-items: center;
	gap: 5px;
}

.hero-tags span::before {
	content: "#";
	color: #6491db;
	font-weight: bold;
}

.course-view-container {
	max-width: 1200rem;
	margin: 60rem auto 80rem;
	padding: 0 0px;
	color: #1e293b;
	font-size: 16rem;
}

/* 2단 구성 */
.course-details-layout {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 40rem;
}

.section-headline {
	font-size: 22rem;
	font-weight: 700;
	margin-bottom: 24rem;
	padding-bottom: 12rem;
	border-bottom: 2px solid #e2e8f0;
	position: relative;
	color: #0f172a;
}

.section-headline::after {
	content: "";
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 100rem;
	height: 2px;
	background-color: #3b82f6;
}

/* 훈련목표 */
.summary-box {
	background-color: #f8fafc;
	padding: 24rem;
	border-radius: 12rem;
	font-size: 15rem;
	margin-bottom: 40rem;
	white-space: pre-wrap;
	line-height: 1.6;
}

/* 지원 혜택 테이블 스타일 */
.benefit-list {
	display: flex;
	flex-direction: column;
	gap: 16rem;
	margin-bottom: 45rem;
}

.benefit-item {
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12rem;
	padding: 20rem;
	display: grid;
	grid-template-columns: 150rem 1fr;
	gap: 20rem;
	align-items: center;
}

.benefit-title {
	font-weight: 700;
	color: #0f172a;
	font-size: 16rem;
	display: flex;
	align-items: center;
	gap: 8rem;
}

.benefit-title::before {
	content: "";
	display: inline-block;
	width: 6rem;
	height: 6rem;
	background-color: #3b82f6;
	border-radius: 50%;
}

.benefit-content {
	color: #475569;
	font-size: 15rem;
	line-height: 1.6;
	white-space: pre-wrap;
}

.curri-teach {
	display: grid;
	grid-template-columns: 175rem 1fr;
	gap: 20rem;
}

.curri-teach-img {
	width: 100%;
	max-width: 150rem;
}

.curri-teach-name {
	max-width: 150rem;
	text-align: center;
	font-size: 16rem;
	font-weight: 600;
	margin-top: 10rem;
}

.curri-teach-img img {
	border-radius: 10rem;
}

.curri-teach-con dt {
	font-size: 17rem;
	font-weight: 600;
}

.bottom-actions {
	margin-top: 50rem;
	border-top: 1px solid #e2e8f0;
	padding-top: 30rem;
	display: flex;
	justify-content: center;
}

.btn-list-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12rem 30rem;
	border: 1px solid #c6c6c6;
	background-color: #f5f5f5;
	color: #444;
	font-size: 15rem;
	font-weight: 500;
	border-radius: 4rem;
	transition: all 0.3s ease;
}

.btn-list-back:hover {
	border: 1px solid #666;
	color: #222;
	transition: all 0.3s ease;
}

.btn-action-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52rem;
	background-color: #1e3a8a;
	color: #ffffff;
	font-size: 16rem;
	font-weight: 700;
	border-radius: 10rem;
	text-decoration: none;
	transition:
		background-color 0.2s,
		transform 0.1s;
	border: none;
	cursor: pointer;
}

.btn-action-primary:hover {
	background-color: #1d4ed8;
}

.btn-action-primary:active {
	transform: scale(0.98);
}

a.btn-action-primary {
	color: #ffffff;
}

.btn-action-secondary {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50rem;
	background-color: #ffffff;
	border: 1.5px solid #cbd5e1;
	color: #475569;
	font-size: 16rem;
	font-weight: 700;
	border-radius: 10rem;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-action-secondary:hover {
	border-color: #94a3b8;
	background-color: #f8fafc;
	color: #1e293b;
}

.contact-info-box {
	margin-top: 20rem;
	border-top: 1px solid #f1f5f9;
	padding-top: 20rem;
}

.contact-phone {
	font-size: 22rem;
	font-weight: 800;
	color: #1e3a8a;
	display: flex;
	align-items: center;
	gap: 8rem;
	margin-top: 6rem;
}

/* 우측 사이드바 */
.sidebar-sticky {
	position: sticky;
	top: 120rem;
	display: flex;
	flex-direction: column;
	gap: 25rem;
}

.sidebar-card {
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16rem;
	padding: 24rem;
	box-shadow: 0 4rem 12rem rgba(0, 0, 0, 0.02);
}

.sidebar-image-wrap {
	border-radius: 12rem;
	overflow: hidden;
	border: 1px solid #e2e8f0;
	margin-bottom: 20rem;
	background-color: #f8fafc;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 4/3;
}

.sidebar-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sidebar-btn-group {
	display: flex;
	flex-direction: column;
	gap: 12rem;
}

.sidebar-info {
	margin-bottom: 20rem;
	font-size: 16rem;
	display: grid;
	grid-template-columns: 100rem 1fr;
}

.sidebar-info-title {
	font-size: 15rem;
	font-weight: 600;
	margin-bottom: 3rem;
	display: flex;
	align-items: center;
	gap: 5rem;
}

.sidebar-info-title::before {
	content: "";
	display: inline-block;
	width: 5rem;
	height: 5rem;
	background-color: #4e84db;
	border-radius: 50%;
}

.sidebar-info-body {
	font-size: 15rem;
	color: #64748b;
}

.page-content-main {
	max-width: initial;
	width: 100%;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.page-content-main-100 {
	max-width: 100%;
	margin: 0;
	position: relative;
	overflow: hidden;
	margin-top: 75rem;
}

.section-title-main {
	font-size: 45rem;
	font-weight: 800;
	color: #222222;
	text-align: center;
	margin-bottom: 10rem;
}

.section-title-sub {
	font-size: 19rem;
	font-weight: 400;
	color: #222222;
	text-align: center;
	margin-bottom: 0rem;
}

.section-title-main-left {
	font-size: 55rem;
	font-weight: 800;
	color: #222222;
	text-align: left;
	line-height: 1.2;
	margin-top: 10rem;
}

.bg-gradient {
	/* 베이스 검은색 배경 위에 좌상단 보라색, 우하단 블루 광원 레이어 배치 */
	background-color: #080810;
	background-image:
        /* 좌측 상단 딥 퍼플 광원 */
		radial-gradient(
			circle at 25% 30%,
			rgba(55, 30, 95, 0.75) 0%,
			rgba(20, 15, 35, 0.4) 40%,
			transparent 70%
		),
		/* 우측 하단 딥 블루 광원 */
		radial-gradient(
				circle at 80% 70%,
				rgba(25, 45, 95, 0.7) 0%,
				rgba(15, 20, 45, 0.3) 45%,
				transparent 75%
			);
}

.recruitingSwiper {
	max-width: 1600rem;
	margin: 0 auto;
	padding-left: 10rem !important;
	padding-right: 10rem !important;
	position: relative;
	overflow: hidden;
}

/* [추가] 양 끝 카드의 보더라인 및 그림자 잘림 방지 */
.recruitingSwiper .swiper-wrapper {
	padding: 0px 0px;
	/* 좌우 패딩을 균등하게 4px로 조절 */
	box-sizing: border-box;
}

/* [추가] 4개 이하 정지 상태일 때 마지막 카드의 불필요한 우측 마진을 없애 대칭 정렬 보정 */
.recruitingSwiper.recruiting-locked .swiper-slide:last-child {
	margin-right: 0 !important;
}

/* recruiting Swiper Arrows */
.recruitingSwiper .recruiting-next,
.recruitingSwiper .recruiting-prev {
	color: #475569;
	width: 44rem;
	height: 44rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 50%;
	box-shadow:
		0 4rem 6rem -1rem rgba(0, 0, 0, 0.05),
		0 2rem 4rem -1rem rgba(0, 0, 0, 0.03);
	transition: all 0.2s ease;
}

.recruitingSwiper .recruiting-next:after,
.recruitingSwiper .recruiting-prev:after {
	font-size: 16rem;
	font-weight: 800;
}

.recruitingSwiper .recruiting-next:hover,
.recruitingSwiper .recruiting-prev:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
	color: #1e293b;
}

.recruitingSwiper .recruiting-prev {
	left: 5rem;
}

.recruitingSwiper .recruiting-next {
	right: 5rem;
}

/* Swiper 4개 이하 Lock 걸렸을 때 화살표 숨김 */
.recruitingSwiper .swiper-button-lock {
	display: none !important;
}

.recruitingSwiper {
	/* 하단 스크롤바가 들어올 공간(padding-bottom)을 추가로 확보합니다 */
	padding-bottom: 40rem !important;
}

.recruitingSwiper .recruiting-scrollbar {
	position: absolute;
	bottom: 12rem;
	left: 70rem;
	/* 화살표 버튼 안쪽 여백에 맞춤 */
	width: calc(100% - 140rem);
	height: 3rem !important;
	background: #e2e8f0;
	/* 상태바 배경 트랙 색상 */
	border-radius: 10rem;
	opacity: 1 !important;
	/* 항상 노출 */
}

.recruitingSwiper .recruiting-scrollbar .swiper-scrollbar-drag {
	background: #2853ab;
	/* 실제 드래그할 핸들러 색상 */
	border-radius: 10rem;
	cursor: grab;
}

.recruitingSwiper .recruiting-scrollbar .swiper-scrollbar-drag:active {
	cursor: grabbing;
}

/* 4개 이하 잠금 시 및 Swiper 기본 lock 시 스크롤바 비노출 */
.recruitingSwiper.recruiting-locked .recruiting-scrollbar,
.recruitingSwiper .swiper-scrollbar-lock {
	display: none !important;
}

.main-pr {
	max-width: 1600rem;
	margin: 0 auto;
	height: 600rem;
	background: url(/img/main-pr.jpg) center top no-repeat;
	position: relative;
	padding-top: 105rem;
	padding-left: 25rem;
	box-sizing: border-box;
}

.main-pr .pr-title {
	font-size: 48rem;
	color: #ffffff;
	font-weight: 700;
	line-height: 1.2;
}

.main-pr .pr-title span {
	display: block;
	font-size: 24rem;
	color: #ffffff;
	font-weight: 600;
	margin-top: 30rem;
	line-height: 1.3;
}

.job-certi {
	display: grid;
	grid-template-columns: 4fr 2.5fr 2.5fr;
	gap: 40rem;
}

.section-title-main-left span {
	font-size: 21rem;
	color: #636363;
	font-weight: 400;
	display: block;
	line-height: 1.4;
	margin-top: 30rem;
}

.job-certi-card {
	background-color: #0e1b32;
	border-radius: 14rem;
	padding: 30rem;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.job-certi-card:hover {
	background-color: #112446;
	/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.68); */
}

.jobCertiSwiper-employment,
.jobCertiSwiper-license {
	width: 100%;
	height: 350rem;
	border-radius: 14rem;
	overflow: hidden;
}

.jobCertiSwiper-employment .job-certi-card,
.jobCertiSwiper-license .job-certi-card {
	height: 100%;
}

.job-certi-card-title {
	background-color: #2d394d;
	border-radius: 100rem;
	font-size: 20rem;
	font-weight: 700;
	color: #ffffff;
	max-width: 165rem;
	margin: 0 auto;
	text-align: center;
	padding: 6rem 0;
}

.job-certi-card-percent {
	font-size: 110rem;
	font-weight: 900;
	color: #fd8643;
	text-align: center;
	padding: 45rem 0 30rem 0;
	line-height: 1;
	letter-spacing: -3px;
}

.job-certi-card-percent-2 {
	color: #5eb9ff;
}

.job-certi-card-percent span {
	font-size: 70rem;
}

.job-certi-card-footer {
	max-width: 100%;
	border-top: 1px solid #283449;
	margin: 0 auto;
}

.job-certi-card-footer span:first-child {
	display: block;
	font-size: 19rem;
	color: #ffffff;
	font-weight: 700;
	margin: 25rem 0 10rem 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: center;
}

.job-certi-card-footer span:last-child {
	display: none !important;
	font-size: 16rem;
	color: #909193;
	font-weight: 500;
}

.news-cate {
	width: 100%;
	margin-top: 20rem;
}

.news-cate .tab-menu {
	display: flex;
	list-style: none;
	gap: 40px;
	padding-left: 0px;
}

.news-cate .tab-menu .tab-item {
	position: relative;
	padding: 15px 0;
}

.news-cate .tab-menu .tab-item a {
	text-decoration: none;
	color: #888888;
	font-size: 20rem;
	font-weight: 500;
	transition: color 0.2s ease;
}

.news-cate .tab-menu .tab-item a:hover {
	color: #222222;
}

.news-cate .tab-menu .tab-item.active a {
	color: #222222;
	font-weight: 800;
}

.news-cate .tab-menu .tab-item::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: 0;
	height: 2rem;
	background-color: var(--primary-color);
	transition: width 0.3s ease;
	transform: translateX(-50%);
}

.news-cate .tab-menu .tab-item.active::after {
	width: 100%;
}

.main-news {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 50rem;
	margin-top: 50rem;
}

.main-news.tab-content {
	display: none;
}

.main-news.tab-content.active {
	display: grid;
}

.news-card .news-card-img {
	width: 100%;
	aspect-ratio: 4 / 2.5;
	overflow: hidden;
	border-radius: 10rem;
	position: relative;
	margin-bottom: 25rem;
	background-color: #f4f4f5;
}

.news-card .news-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s ease;
}

.news-card:hover .news-card-img img {
	transform: scale(1.03);
}

.news-card .news-card-title {
	font-size: 19rem;
	color: #363636;
	font-weight: 600;
	margin-bottom: 10rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card .news-card-date {
	font-size: 16rem;
	color: #828282;
	font-weight: 400;
}

.partner-wrapper {
	max-width: 100%;
	margin: 0rem auto 0 auto;
	position: relative;
	overflow: hidden;
}

.partner-wrapper::before,
.partner-wrapper::after {
	content: "";
	position: absolute;
	top: 0;
	width: 150rem;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.partner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0rem 0;
}

.banner-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20rem;
	justify-content: center;
	width: 100%;
	max-width: 1320rem;
	padding: 0 20rem;
}

.partner-item {
	width: 200rem;
	height: 60rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	color: #334155;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: 0rem;
}

.partner-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-container {
	width: 100%;
	max-width: 1600rem;
	margin: 0 auto;
	padding: 40rem 20rem;
	text-align: center;
}

.cs-menu {
	display: flex;
	justify-content: center;
	gap: 20rem;
	list-style: none;
	margin-bottom: 15rem;
}

.cs-menu-item {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: #333333;
	font-size: 19rem;
	font-weight: 700;
}

.cs-phone {
	margin-bottom: 15rem;
}

.cs-phone a {
	text-decoration: none;
	color: #000000;
	font-size: 54rem;
	font-weight: 800;
	letter-spacing: -1rem;
}

.cs-info {
	color: #666666;
	font-size: 15rem;
	font-weight: 400;
	display: flex;
	justify-content: center;
	align-items: center;
}

.cs-info .divider {
	display: inline-block;
	width: 3rem;
	height: 3rem;
	background-color: #999999;
	border-radius: 50%;
	margin: 0 12rem;
}

.myinfo-wrapper {
	width: 560rem;
	padding: 40rem;
	border: 1px solid var(--border-color);
	border-radius: 12rem;
	box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.03);
	background-color: #ffffff;
	margin-bottom: 80rem;
}

/* 팝업 오픈 시 배경 스크롤 방지 */
html.popup-open,
body.popup-open {
	overflow: hidden !important;
	height: 100% !important;
	touch-action: none !important;
}

/* 팝업 레이어 오버레이 배경 및 컨테이너 스타일링 */
.integrated-popup-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(2rem);
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-box-container {
	width: 550rem;
	max-height: 734rem;
	background: rgba(255, 255, 255, 0.98);
	border-radius: 12rem;
	box-shadow: 0 25rem 55rem rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.popup-body-content {
	flex: 1;
	background-color: #fff;
	height: 680rem;
	/* 세로 규격 680rem 피팅 */
	max-height: 680rem;
	position: relative;
}

.popup-html-render {
	padding: 0rem;
	font-size: 14rem;
	line-height: 1.6;
	color: #334155;
}

.popup-html-render img {
	max-width: 100% !important;
	height: auto !important;
	display: block;
	margin: 0 auto;
}

.popup-link-wrapper {
	display: block;
	text-decoration: none;
	color: inherit;
}

.popup-swiper {
	width: 100%;
	height: 100%;
	position: relative;
}

.popup-nav-btn {
	width: 35rem !important;
	height: 35rem !important;
	background-color: rgba(30, 41, 59, 0.7);
	border-radius: 50%;
	color: #fff !important;
	transition: background-color 0.2s;
}

.popup-nav-btn:after {
	font-size: 14rem !important;
	font-weight: bold;
}

.popup-nav-btn:hover {
	background-color: rgba(30, 41, 59, 0.95);
}

/* .swiper-button-prev {
	left: 4rem !important;
}

.swiper-button-next {
	right: 4rem !important;
} */

.popup-swiper-controls-bar {
	position: absolute;
	bottom: 10rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 12rem;
	background: rgba(30, 41, 59, 0.5);
	backdrop-filter: blur(8rem);
	-webkit-backdrop-filter: blur(8rem);
	padding: 6rem 14rem;
	border-radius: 30rem;
}

.btn-autoplay-toggle {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20rem;
	height: 20rem;
	outline: none;
	transition: opacity 0.2s;
}

.btn-autoplay-toggle:hover {
	opacity: 0.8;
}

.popup-page-counter {
	font-size: 13rem;
	color: #e2e8f0;
	font-weight: 600;
	letter-spacing: 0.5rem;
	user-select: none;
}

.popup-footer-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12rem 20rem;
	background-color: #f8fafc;
	border-top: 1px solid #e2e8f0;
}

.today-hide-label {
	font-size: 14rem;
	font-weight: 500;
	color: #64748b;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6rem;
	user-select: none;
}

.popup-close-btn {
	background-color: #475569;
	color: #fff;
	border: none;
	padding: 6rem 16rem;
	font-size: 14rem;
	font-weight: 500;
	border-radius: 4rem;
	cursor: pointer;
	transition: background-color 0.2s;
}

.popup-close-btn:hover {
	background-color: #334155;
}

/* 모바일 반응형 대응 (중앙 정렬 및 오버레이 유지) */

.join-wrapper {
	width: 560rem;
	padding: 40rem;
	border: 1px solid var(--border-color);
	border-radius: 12rem;
	box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.03);
	background-color: #ffffff;
	margin-bottom: 80rem;
}

/* ==========================================
   입력창 + 버튼 가로 결합 그룹 (.input-btn-group)
   ========================================== */

/* PC 기본 스타일 */
.input-btn-group {
	display: flex;
	gap: 10rem;
	width: 100%;
	align-items: center;
}

.input-btn-group .form-input {
	flex: 1;
	min-width: 0;
	/* Flex 자식 찌그러짐 방지 치트키 */
	height: 48rem;
	padding: 10rem 16rem;
	font-size: 15rem;
	border: 1px solid var(--border-color);
	border-radius: 8rem;
	outline: none;
	background-color: #fafafa;
	transition:
		border-color 0.2s,
		background-color 0.2s;
}

.input-btn-group .form-input:focus {
	border-color: var(--primary-color);
	background-color: #ffffff;
}

.input-btn-group .btn-check {
	height: 48rem;
	padding: 0 20rem;
	background-color: #ffffff;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
	font-size: 14rem;
	font-weight: 700;
	border-radius: 8rem;
	cursor: pointer;
	white-space: nowrap;
	/* 중복확인 텍스트 줄바꿈 방지 */
	flex-shrink: 0;
	/* 모바일에서 버튼 폭 축소 방지 */
	transition: all 0.2s ease;
}

.input-btn-group .btn-check:hover {
	background-color: var(--primary-color);
	color: #ffffff;
}

/* ==========================================
   768px 미만 모바일 반응형
   ========================================== */

/* ==========================================================================
   (1024px 이하 )
   ========================================================================== */

/* 미디어 쿼리 헬퍼 클래스 */

/* ==========================================
   오시는 길 (/info/location) 1024px 이하 반응형
   ========================================== */

/* 768px 미만 (모바일): 한 줄에 2명 배치 */

/* ==========================================
   768px 미만 푸터 반응형 (모바일 최적화)
   ========================================== */

/* 모바일 햄버거 버튼 */
.btn-hamburger {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 26px;
	height: 19px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1020;
}

.btn-hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--text-dark);
	border-radius: 2px;
	transition: all 0.3s ease;
}

.btn-hamburger.active span:nth-child(1) {
	transform: translateY(8.5px) rotate(45deg);
}

.btn-hamburger.active span:nth-child(2) {
	opacity: 0;
}

.btn-hamburger.active span:nth-child(3) {
	transform: translateY(-8.5px) rotate(-45deg);
}

/* 모바일 네비게이션 드로어 & 오버레이 */
.mobile-navigation-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 2000;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0.3s;
}

.mobile-navigation-wrapper.active {
	pointer-events: auto;
	visibility: visible;
}

.mobile-nav-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.mobile-navigation-wrapper.active .mobile-nav-overlay {
	opacity: 1;
}

.mobile-nav-drawer {
	position: absolute;
	top: 0;
	right: -320px;
	width: 300px;
	max-width: 85vw;
	height: 100%;
	background-color: #ffffff;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
	display: flex;
	flex-direction: column;
	transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow-y: auto;
}

.mobile-navigation-wrapper.active .mobile-nav-drawer {
	right: 0;
}

/* 모바일 드로어 헤더 & 회원 영역 */
.mobile-nav-header {
	padding: 24px 20px;
	background-color: #f8fafc;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.mobile-user-area {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 80%;
}

.mobile-user-area .user-name {
	font-size: 15px;
	color: var(--text-dark);
}

.mobile-user-area .user-btns {
	display: flex;
	gap: 8px;
}

.mobile-user-area .m-btn {
	display: inline-block;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 4px;
	background-color: var(--primary-color);
	color: #fff !important;
	text-align: center;
}

.mobile-user-area .m-btn.outline {
	background-color: transparent;
	color: var(--primary-color) !important;
	border: 1px solid var(--primary-color);
}

.btn-close-nav {
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: #64748b;
	cursor: pointer;
	padding: 0;
}

/* 모바일 네비게이션 아코디언 메뉴 목록 */
.mobile-navigation {
	padding: 10px 0;
	flex: 1;
}

.m-nav-list {
	display: flex;
	flex-direction: column;
}

.m-nav-item {
	border-bottom: 1px solid #f1f5f9;
}

.m-nav-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.m-nav-title:hover,
.m-nav-item.active .m-nav-title {
	background-color: #f8fafc;
}

.m-nav-trigger {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-dark);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}

.m-nav-item.active .m-nav-trigger {
	color: var(--primary-color);
}

.m-arrow {
	width: 8px;
	height: 8px;
	border-right: 2px solid #94a3b8;
	border-bottom: 2px solid #94a3b8;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.m-nav-item.active .m-arrow {
	transform: rotate(-135deg);
	border-color: var(--primary-color);
}

.m-sub-list {
	display: none;
	background-color: #f8fafc;
	padding: 8px 0;
	border-top: 1px solid #f1f5f9;
}

.m-sub-list li a {
	display: block;
	padding: 10px 20px 10px 32px;
	font-size: 14px;
	font-weight: 500;
	color: #475569;
	transition: color 0.2s;
}

.m-sub-list li a:hover {
	color: var(--primary-color);
}

/* ==========================================
   과정 상세 페이지 (Course View) 1024px 이하 반응형
   ========================================== */

/* ==========================================
   취업현황 & 자격증 현황 (.job-grid) 반응형
   ========================================== */

/* 1. 1024px 이하 (태블릿): 한 줄에 2개씩 (2열 배치) */

/* 2. 768px 미만 (모바일): 한 줄에 1개씩 (1열 세로 배치) */

.mt110 {
	margin-top: 110rem;
}

.mt166 {
	margin-top: 166rem;
}

/* 576px 이하 소형 스마트폰에서는 하단 카드도 1열 세로 스택 */

/* ==========================================
   NEWS 섹션 1024px 이하 반응형 (탭 폰트 & 카드 2열 배치)
   ========================================== */

/* 480px 이하 극소형 스마트폰 화면 시 (필요 시 1열로 변경) */

/* 웹접근성 및 SEO 전용 숨김 텍스트 클래스 */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* 홈페이지 우측 하단 고정 플로팅 레이어 (배경색 #F6E340, 라운드 10rem) */
.fixed-bottom-right-layer {
	position: fixed;
	bottom: 30rem;
	right: 30rem;
	z-index: 9999;
	gap: 15rem;
}

.fixed-bottom-right-layer .fixed-bottom-002,
.fixed-bottom-right-layer .fixed-bottom-001 {
	background-color: #f6e340;
	border-radius: 100rem;
	padding: 11rem;
	box-shadow: 0 4rem 15rem rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
	width: 160rem;
	height: 40rem;
}

.fixed-bottom-right-layer .fixed-bottom-001 {
	background-color: #6c59f0;
}

.fixed-bottom-right-layer div:hover {
	transform: translateY(-3rem);
	box-shadow: 0 6rem 20rem rgba(0, 0, 0, 0.22);
}

.fixed-bottom-right-layer div a {
	font-size: 15rem;
	font-weight: 700;
	text-decoration: none;
	display: block;
	line-height: 1;
}

.fixed-bottom-right-layer div a:hover {
	color: #111111;
}

.fixed-bottom-right-layer div a img {
	width: 22rem;
	margin-right: 10rem;
}

.fixed-bottom-right-layer div a.btn-ai-camp:hover,
.fixed-bottom-right-layer div a.btn-ai-camp {
	color: #ffffff;
}

.fixed-bottom-right-layer div a span {
	font-size: 18rem;
	margin-right: 10rem;
}
.mobile-only {
	display: none !important;
}
/* ==========================================================================
   1. 데스크톱 기본 및 고해상도 분기 (@media min-width)
   ========================================================================== */

/* 1024px 이상 (기본 데스크톱) */
/* @media (min-width: 1024px) {
	html {
		font-size: 0.07vw;
	}

	.mobile-only {
		display: none !important;
	}
} */
html {
	font-size: 1px;
}
/* 1400px 이상 (대형 데스크톱) */
/* @media (min-width: 1400px) {
	html {
		font-size: 1px;
	}
} */

/* 기존 레거시 css 이동 */
table.view_title3 {
	border-top: 2px solid #57a3d8;
	border-left: 1px solid #b0d2e9;
	background: #57a3d8;
}
table.view_title3 td {
	background: #57a3d8;
	border-bottom: 1px solid #57a3d8;
	border-right: 1px solid #b0d2e9;
	text-align: center;
	font-weight: 500;
	font-size: 15px;
	color: #666;
	line-height: 16pt;
}
table.view_title3 td a {
	color: #fff;
	font-size: 16px;
	line-height: 16px;
}
table.view_title3 td.on {
	border-bottom: 1px solid #fff;
	background: #ffffff;
}

table.view_title3 td.off {
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #d3d3d3;
	background: #ffffff;
}

table.view_title3 td.on a {
	color: #555;
	font-weight: 700;
	font-size: 16px;
}
table.view_title3 td.this_nor {
	border-right: 0px solid #d3d3d3;
}

.intro_02 p {
	padding-top: 0px;
}
.intro_02 span.mid_hd {
	font-size: 24px;
	color: #315c7b;
	line-height: 22px;
	font-weight: 800;
	padding-top: 100px;
}
.intro_02 .intro_002 {
	padding-top: 40px;
}
.intro_02 .intro_002 p {
	font-size: 16px;
	line-height: 32px;
	font-weight: 400;
	padding-top: 0px;
	text-align: left;
	text-align: justify;
}
.intro_0211 {
	clear: both;
	display: block;
	height: 150px;
	width: 800px;
	border-bottom: 1px solid #e4e4e4;
	margin: 3rem auto;
}
.intro_0211 img,
.intro_0211 p {
	float: left;
	text-align: left;
}
.intro_0211 span {
	font-size: 19px;
	color: #3195cb;
	display: block;
	font-weight: 700;
	margin-bottom: 10px;
}
.intro_0211 p {
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
	width: 630px;
	margin: 16rem 0 16rem 20px;
	padding-top: 5px;
	text-align: justify;
}

.intro_02,
.intro_03,
.intro_04,
.intro_05 {
	clear: both;
	display: block;
	width: 100%;
	text-align: left;
	min-height: 570px;
}
.intro_05 p {
	font-size: 24px;
	color: #326095;
	line-height: 36px;
	font-weight: 400;
	margin: 0 0 20px 0;
	text-align: left;
}
.intro_05 img {
	display: block;
	margin-bottom: 50px;
}
.intro_03 span {
	font-size: 20px;
	color: #555;
	line-height: 30px;
	font-weight: 400;
	padding-top: 0px;
	text-align: left;
}
.intro_03 span.pres {
	font-size: 30px;
	color: #326095;
	line-height: 30px;
	font-weight: 400;
	padding-top: 0px;
	text-align: left;
}
.intro_03 p {
	font-size: 28px;
	color: #555;
	line-height: 30px;
	font-weight: 500;
	padding-top: 0px;
	text-align: left;
}
.intro_03 img {
	clear: both;
	display: block;
	margin-bottom: 30px;
}
.intro_04 p {
	font-size: 24px;
	color: #326095;
	line-height: 36px;
	font-weight: 500;
	margin: 0 0 20px 0;
	text-align: left;
}

p.int_hd {
	font-size: 24px;
	color: #315c7b;
	line-height: 22px;
	font-weight: 700;
}
p.history_hd {
	font-size: 24px;
	color: #326095;
	line-height: 36px;
	font-weight: 400;
	margin: 0 0 20px 0;
}

.history {
	display: block;
	width: 100%;
	margin: 0;
	border-top: 1px dashed #e4e4e4;
	clear: both;
}
.history div.h_text {
	width: 65%;
	float: left;
	margin: 18px 0;
	padding: 0;
}
.history div.year,
.history div.year2 {
	display: block;
	width: 30%;
	float: left;
	margin: 10px 0 0 0;
	text-align: center;
	vertical-align: middle;
	font-size: 23px;
	color: #54a12f;
	line-height: 50px;
	font-weight: 500;
	min-height: 30px;
	letter-spacing: -1px;
}
.history div.year2 {
	color: #ff6600;
}
.history2 div.his1,
.history div.his1 {
	line-height: 40px;
}
.history2 div.his2,
.history div.his2 {
	line-height: 66px;
}
.history div.his3 {
	line-height: 90px;
}
.history div.his4 {
	line-height: 110px;
}

.history div li {
	height: 24px;
	font-size: 15px;
	line-height: 24px;
	font-weight: 300;
}
.history div li span {
	color: #333;
	font-weight: 500;
	padding: 0 20px 0 0;
}

.history2 {
	display: block;
	width: 894px;
	margin: 0;
	border-top: 2px solid #57a3d8;
	clear: both;
	text-align: left;
}
.history2 div.year {
	display: block;
	clear: both;
	border-bottom: 1px solid #ccc;
}
.history2 div.year p.yy {
	display: block;
	width: 20%;
	float: left;
	margin: 23px 0 0 0;
	text-align: center;
	vertical-align: middle;
	font-size: 28px;
	color: #297bc2;
	line-height: 25px;
	font-weight: 500;
	min-height: 30px;
	letter-spacing: -1px;
}
.his_table {
	line-height: 20px;
}
.his_table tr th,
.his_table tr td {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	height: 25px;
}
.his_table tr td p {
	color: var(--text-basic);
}
.his_table tr:first-child th,
.his_table tr:first-child td {
	padding-top: 20px;
}
.his_table tr:last-child th,
.his_table tr:last-child td {
	padding-bottom: 20px;
}
.history2 div.h_text {
	width: 715px;
	float: left;
	margin: 0px 0;
	padding: 0;
}
.history2 div.his2 p.yy {
	margin: 25px 0 0 0;
}
.history2 div.ks {
	background: url(/img/ks.jpg) no-repeat 580px center;
	width: 79%;
}

.history2 div.ks2017 {
	background: url(/img/ks2017.jpg) no-repeat 580px center;
	width: 79%;
}
.history2 div.ks2023 {
	background: url(/img/ks2023.jpg) no-repeat 580px center;
	width: 79%;
}

.his_table tr td {
	background: url(/img/his_line.gif) repeat-y 1px top;
	border-bottom: none;
	padding: 0px;
}
.his_table tr td p {
	padding: 0 0 0 20px;
	background: url(/img/list_bg1.gif) no-repeat 0rem 14rem;
	font-size: 15px;
	font-weight: 400;
	margin: 0;
}
.his_table tr th {
	width: 9%;
	background-color: initial;
}
.history3 .his_table tr th {
	width: 1%;
}
.history3 .his_table tr td p {
	line-height: 20px;
	background: url(/img/list_bg1.gif) no-repeat 0rem 8px;
	padding: 2px 0 2px 20px;
}

.map_out {
	display: block;
}
.map_out .add p {
	font-size: 17px;
	color: #555;

	line-height: 30px;
	font-weight: 700;
}
.map_out .add span {
	display: block;
	background: url(/img/bult.gif) no-repeat 0px 5px;
	font-size: 16px;
	line-height: 23px;
	font-weight: 400;
	padding: 0 0 0 20px;
}
.map_out .traffic {
	display: block;
	clear: both;
}
.map_out .traffic p {
	font-size: 17px;
	color: #555;
	line-height: 30px;
	font-weight: 700;
}

.map_out .traffic .tr {
	background: url(/img/tr_sub.gif) no-repeat 0px 5px;
	padding: 0 0 0 100px;
	margin-bottom: 30px; /*width:270px; float:left;*/
}
.map_out .traffic .bus {
	background: url(/img/tr_bus.gif) no-repeat 0px 5px;
	padding: 0 0 0 100px; /*width:400px; float:left;*/
	margin-bottom: 30px;
}
.map_out .traffic .etc {
	background: url(/img/tr_etc.gif) no-repeat 0px 5px;
	padding: 0 0 0 100px; /*width:400px; float:left;*/
	margin-bottom: 20px;
}
.map_out .traffic .etc li.hd,
.map_out .traffic .bus li.hd,
.map_out .traffic .tr li.hd {
	font-size: 15px;
	color: #3987b3;

	line-height: 30px;
	font-weight: 700;
	height: 35px;
	background: none;
	padding: 0;
}
.map_out .traffic .etc li,
.map_out .traffic .bus li,
.map_out .traffic .tr li {
	background: url(/img/bult.gif) no-repeat 0px 5px;
	font-size: 15px;
	color: #555;
	line-height: 23px;
	font-weight: 400;
	padding: 0 0 0 20px;
	height: 22px;
}
p.situ_hd {
	border-bottom: 1px solid #999;
	width: 860px;
	margin: 0 auto;
	padding: 10px 0 5px 0;
	font-size: 19px;
	color: #315c7b;
	line-height: 22px;
	font-weight: 700;
	margin-bottom: 20px;
}
table.tour-grid-table td {
	border: none;
	padding: 0px;
}
.faci tbody td li {
	padding: 2px 0 2px 10px;
	text-align: left;
}
table.faci tr:last-child td {
	border-bottom: 1px solid var(--border-color);
}
.faci tbody td .btn_l {
	width: 80px;
	border: 1px solid #1591cd;
	text-align: left;
	margin: auto 0;
	font-weight: 500;
	font-size: 14px;
	background: #0f9ce0 url(/img/sub_n/arrow_02.gif) no-repeat 65px 9px;
	padding: 3px 0 3px 12px;
	margin: 0 0 0 45px;
	border-radius: 4rem;
}
.faci tbody td .btn_l a {
	color: #fff;
}
.li-tabs {
	width: 100%;
	margin: 35px 0 35px 0;
}
.li-tabs li.on {
	background: #1d4d91;
	border: 2px solid #1d4d91;
	font-size: 15px;
	font-weight: 400;
	color: #fff;
}
.li-tabs li {
	width: auto;
	height: 40px;
	background: #fff;
	border: 1px solid #bbb;
	display: block;
	box-sizing: border-box;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 400;
	color: #444;
	margin-left: 15px;
	padding: 0 0px;
}
.li-tabs li.on a {
	color: #fff;
}

.li-tabs li a {
	color: #444;
	padding: 9px 40px;
}
.flex-wrap {
	flex-wrap: wrap;
}
.pic_dummy4 {
	width: 130px;
	height: 200px;
	text-align: center;
	border-bottom: 0px solid #eee;
	display: inline-block;
	margin: 15px 38px 0px 0;
}
.pic_dummy4.nomargin {
	margin-right: 0;
}
.awrd img {
	border-radius: 5px;
	border: 1px solid #e5e5e5;
	height: 182rem;
	width: 130rem;
}
.page {
	display: block;
	width: 880px;
	margin: 0 auto;
	font-size: 15px;
	color: #555;
	line-height: 25px;
	font-weight: 300;
}
.page p {
	display: block;
	font-size: 27px;
	color: #326095;
	line-height: 18px;
	font-weight: 700;
	width: 900px;
	margin: 10px 0 50px 0;
}
.page2 .page2div {
	clear: both;
	display: block;
	padding: 40px 0 0 0;
}
.page2 .hd {
	width: 250px;
	border: 1px solid #739ed8;
	float: left;
	margin: 0px 0;
	font-size: 20px;
	color: #555;
	text-align: right;
	padding: 0 80px 0 0;
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	background: #fdfdfd url(/img/sub_n/art_bot.gif) no-repeat center center;
}
.page2 .step {
	width: 595px;
	border: 0px solid #dadada;
	background: #fff;
	float: left;
	margin: 0px 0;
	margin-left: 31px;
}
.page li {
	font-size: 16px;
	color: #333333;
	padding: 0 0 7px 25px;
	background: url(/img/page_dot.gif) no-repeat 16px 11px;
}
.page2 .step li {
	font-size: 15px;
	color: #333;
	padding: 2px 0 2px 25px;
	background: url(/img/page_dot.gif) no-repeat 16px 11px;
	font-weight: 400;
}
.tap_out2 td,
.view_title3 td {
	padding: 0;
}
.page li.hd {
	font-size: 17px;
	color: #328ac8;
	font-family: "Noto Sans KR";
	line-height: 25px;
	font-weight: 700;
	padding: 0 0 15px 20px;
	background: url(/img/page_hd2.gif) no-repeat 2px 6px;
	text-indent: 0px;
}
.page li.br {
	padding: 0 0 40px 25px;
}
.lecture_table {
	border-top: 2px solid #57a3d8;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin-top: 5px;
}
.lecture_table th {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	background: #f9f9f9;
	text-align: center;
	padding: 5px 0;
	color: #333333;
	font-weight: 600;
}
.lic_table td {
	text-align: center;
}
.lecture_table td {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	font-size: 14px;
	padding: 5px;
	text-align: center;
}
.t_li_type2 li b {
	color: #096dc3;
}
.t_li_type2 li {
	text-align: left;
}
.page3 li {
	padding: 0 0 0px 0px;
	background: none;
	text-align: justify;
	font-size: 15px;
	line-height: 21px;
	color: #333;
}
.com_banner {
	display: block;
	margin: 0 auto;
	width: 100%;
}
.com_banner li {
	width: 138px;
	float: left;
	height: 35px;
	text-align: center;
	color: #666;
	background: #dfdfdf;
	line-height: 35px;
	font-size: 15px;
	font-weight: 500;
	margin-right: 8px;
	margin-bottom: 7px;
}
.division {
	clear: both;
	display: block;
	background: url(/img/sub_n/divi_line.gif) repeat-x 0px 25px;
	padding: 50px 0;
}
.apply011 {
	width: 422px;
	float: left;
	display: inline-block;
}
.apply01 li.hd {
	font-size: 17px;
	color: #328ac8;
	font-family: "Noto Sans KR";
	line-height: 25px;
	font-weight: 700;
	padding: 0 0 15px 20px;
	background: url(/img/page_hd2.gif) no-repeat 2px 6px;
	text-indent: 0px;
}
.mgr40 {
	margin: 0 36px 0 0;
}
.apply01 p.hds {
	font-size: 17px;
	color: #328ac8;
	font-family: "Noto Sans KR";
	line-height: 25px;
	font-weight: 700;
	padding: 0 0 5px 20px;
	background: url(/img/page_hd2.gif) no-repeat 2px 6px;
	text-indent: 0px;
	margin: 0;
}

.job_011 {
	clear: both;
	display: block;
	font-size: 15px;
	color: #555;
	font-weight: 300;
}
.job_011_hd {
	margin: 0 auto;
	width: 320px;
	height: 50px;
}
.job_011_hd li {
	float: left;
	font-size: 28px;
	color: #555;
	line-height: 23px;
	font-weight: 300;
	text-align: center;
}
.job_011_hd li.out {
	font-size: 38px;
	color: #026dbd;
	line-height: 23px;
	font-weight: 900;
	width: 50px;
	text-align: center;
}
.job_011_hd li span.blue {
	font-size: 28px;
	color: #026dbd;
	font-weight: 300;
}
.job_011 p {
	clear: both;
	display: block;
	font-size: 20px;
	color: #444;
	font-weight: 400;
	text-align: center;
	margin: 20px 0;
	line-height: 23px;
	letter-spacing: 1px;
	height: 70px;
}
.job_011 p b {
	font-weight: 700;
	color: #222;
}
.job_011 p span.blue {
	color: #0e66b7;
	font-weight: 900;
}
.job_011_cont {
	clear: both;
	display: block;
	font-size: 16px;
	color: #555;
	font-weight: 300;
}
.job_011_cont li {
	float: left;
	color: #555;
	line-height: 23px;
	font-weight: 300;
	width: 210px;
	margin-right: 20px;
	border-bottom: 1px solid #aaa;
}
.job_011_cont li.last {
	margin-right: 0px;
}
.job_011_cont li p {
	margin: 0;
	padding: 0;
	height: auto;
}
.job_011_cont li p.chd {
	display: block;
	font-size: 17px;
	color: #fff;
	line-height: 40px;
	font-weight: 700;
	text-align: center;
	background: #363636;
	width: 100%;
	height: 40px;
}
.job_011_cont li p.chd1 {
	font-size: 15px;
	margin: 15px 0;
	color: #333;
	font-weight: 700;
	letter-spacing: -1px;
}
.job_011_cont li p.chd2 {
	font-size: 14px;
	letter-spacing: -0.5px;
	font-weight: 300;
	line-height: 20px;
	text-align: justify;
	color: #666;
	min-height: 200px;
}
.page4 li {
	background: none;
	padding: 0 0 15px 15px;
}
.page4 li span {
	font-weight: 700;
}
.page4 li.br {
	padding: 0 0 40px 15px;
}
.page4 li.dot {
	padding: 0 0 7px 25px;
	background: url(/img/page_dot.gif) no-repeat 16px 11px;
}
.job_03 {
	clear: both;
	display: block;
	font-size: 15px;
	color: #555;
	line-height: 23px;
	font-weight: 300;
}
.job_031 {
	border: 1px solid #bbd5ef;
	background: #f8fbfc;
	padding: 10px;
	margin-bottom: 20px;
}
.job_03 p {
	display: block;
	font-size: 21px;
	color: #326095;
	line-height: 18px;
	font-weight: 600;
	width: 900px;
	height: 50px;
}
.job_03 p.red {
	color: #de3a3a;
}
.job_03 li.hd {
	font-size: 16px;
	color: #328ac8;
	line-height: 25px;
	font-weight: 600;
	padding: 0 0 0 0px;
}
.job_03 li {
	font-size: 15px;
	color: #666;
	padding: 0 0 20px 12px;
}
.job_03 li.black {
	font-size: 15px;
	color: #333;
}

.gap {
	height: 25px;
	margin-top: 20xp;
	clear: both;
}
.gap p {
	height: 1px;
	display: block;
	background: #ddd;
}
.gap2 {
	height: 45px;
	margin-top: 20xp;
	clear: both;
	padding-top: 15px;
}
.gap2 p {
	height: 1px;
	display: block;
	background: #ddd;
}

.job_03 .btn {
	width: 340px;
	text-align: center;
	margin: 0 auto;
}
.job_03 .btn p {
	float: left;
	width: 160px;
	height: 40px;
	background: #30373f;
	font-size: 15px;
	color: #fff;
	margin: 0 10px 0 0;
	line-height: 40px;
}

.job_034 li {
	font-size: 15px;
	color: #666;
	padding: 0 0 20px 18px;
}

.job_03 .job_link {
	clear: both;
	display: block;
	width: 900px;
	border-bottom: 1px solid #ccc;
	height: 125px;
	margin-bottom: 30px;
}
.job_03 .site_img {
	float: left;
	margin-right: 30px;
}
.job_03 .site {
	float: left;
	width: 550px;
}
.job_03 .site li {
	padding: 0;
}
.job_03 .site_title {
	font-size: 18px;
	color: #2ba3c1;
	font-weight: 800;
	height: 31px;
}
.job_03 .site_url {
	font-size: 14px;
	color: #888;
	font-weight: 300;
	height: 27px;
}
.job_03 .site_script {
	font-size: 13px;
	color: #555;
	font-weight: 300;
	line-height: 19px;
}
.job_03 .site_go {
	float: left;
	width: 120px;
	padding-top: 54px;
}
.job_03 .site_go a {
	display: block;
	width: 98px;
	height: 40px;
	background: #91cb4d url(/img/sub_n/site_arr.gif) no-repeat 75px 15px;
	text-align: center;
	font-size: 15px;
	color: #fff;
	font-weight: 700;
	line-height: 40px;
	padding-right: 15px;
}
.page3 span {
	text-align: justify;
	display: block;
	width: 100%;
	margin: 0px 0 50px 0;
}
li.no img {
	margin-bottom: 10rem;
}
/* 교사소개 */
.t_out {
	display: block;
	margin: 20px 0;
	padding: 0;
	width: 100%;
	height: auto;
}
.t_out li {
	float: left;
	vertical-align: top;
}
.t_out li:first-child {
	width: 200px;
}
.t_out li:first-child div {
	width: 177px;
}

.t_out li:last-child {
	width: 700px;
}
.t_name {
	font-size: 19px;
	display: block;
	margin: 5px 0 0 0;
	width: 177px;
	text-align: center;
}
.t_table {
	border-top: 2px solid #222;
	border-bottom: 2px solid #222;
}
.t_table td {
	border-bottom: 1px solid #b5b5b5;
}
.t_table tr:last-child td {
	border-bottom: 0px solid #b5b5b5;
}
.t_table td.t_hd {
	text-align: center;
	font-size: 15px;
	background: #f7f7f7;
	width: 25%;
}
.t_table td.t_cont {
	text-align: left;
	padding: 10px;
	font-size: 13px;
}
.t_table td.t_hd0 {
	text-align: center;
	font-size: 21px;
	color: #003c83;
	padding: 10px 0;
}

.t_table td.relat {
	position: relative;
}
.hun {
	position: absolute;
	bottom: 0;
	right: 0;
}
.t_out li div img {
	border-radius: 5px;
}
.photoss {
	width: 890px;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	list-style: none;
	justify-content: space-between;
}
.photoss li {
	width: 440px;
	box-sizing: border-box;
	margin-bottom: 8px;
}
.photoss li.din3,
.photoss li.din3 img {
	width: 290px;
}
.photoss li img {
	border-radius: 3px;
}
.page li.nohd {
	background: none;
	text-indent: 0px;
	padding: 0px 0 25px 0px;
}
.page5 li {
	float: left;
	margin: 0 13px 10px 0;
}
.page5 li p {
	font-size: 15px;
	color: #444;
	text-align: center;
	font-weight: 400;
	width: 100%;
	margin: 4px 0 10px 0;
}
.page5 li img {
	border-radius: 4px;
}
.apply011 li.hd02 p {
	padding: 0 0 0px 0px;
	margin: 10px 0 15px 0;
	font-size: 21px;
	line-height: 23px;
	color: #444;
}
.apply011 li.hd02 p span {
	padding: 0 0 0px 0px;
	margin: 5px 0 0px 0;
	font-size: 15px;
	line-height: 23px;
	color: #4a87c0;
	font-weight: 500;
}
.apply011 li.hd02 {
	padding: 0 0 0px 0px;
	margin: 0 0 20px 0;
	background: none;
	text-align: justify;
	font-size: 15px;
	line-height: 24px;
	color: #666;
}

/* 퀵배너 위치 */
#common_r_banner {
	position: absolute;
	z-index: 10000;
	width: 72px;
	height: 379px;
	left: 50%;
	margin: 0 0 0 660px;
}

#wrap.wrapmain #common_r_banner {
	top: 850px;
}

#wrap.wrapsub #common_r_banner {
	top: 310px;
}

/* 퀵배너 내부 요소 */
#r_banner {
	float: right;
	padding: 0px;
	position: static;
	top: 22px;
}
.new_main_title {
	font-size: 38px;
	font-weight: 700;
	color: #fff;
	width: 100%;
	text-align: center;
	margin-bottom: 45px;
}
.new_main_title2 {
	font-size: 38px;
	font-weight: 800;
	color: #222;
	font-style: italic;
	text-shadow:
		-2px -2px 0 #fff,
		2px -2px 0 #fff,
		-2px 2px 0 #fff,
		2px 2px 0 #fff,
		0px 2px 5px rgba(0, 0, 0, 0.7);
}
.miban {
	gap: 15px;
}
.rel_videos {
	overflow: hidden;
	flex-wrap: wrap;
	gap: 15px;
	row-gap: 20px;
}
.miban a div {
	width: 390px;
	height: 250px;
	border-radius: 5px;
	transition: all 0.2s ease;
}
.miban a:hover div {
	transform: translateY(-5px);
	box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.3);
}
.rel_videos a div {
	overflow: hidden;
	width: 390px;
	height: 219px;
	border-radius: 5px;
	transition: all 0.2s ease;
	filter: saturate(80%);
}

.rel_videos a:hover div {
	box-shadow: inset 0 0 0 2px #f3d43c;
	filter: saturate(110%);
}
.rel_videos2 a:hover div {
	box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.7);
}
.rel_videos3 {
	row-gap: 0px;
}
.midboard li {
	float: left;
	width: 590px;
	margin-right: 20px;
}
.midboard li:last-child {
	margin-right: 0px;
}

.midboard li.ja1 {
	float: left;
	width: 290px;
	margin-right: 10px;
}
.midboard li.ja2 {
	float: left;
	width: 290px;
	margin-right: 20px;
}

.midboard li.apply_main {
	width: 300px;
}
.m_hd {
	color: #222;
	font-size: 30px;
	font-weight: 500;
}
.apply_main .m_hd,
.ja1 .m_hd {
	padding: 20rem 0;
}
.board_out {
	border: 1px solid #d7d7d8;
	height: 322px;
	background: #fff;
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
}
.board_out li.on_n {
	width: 290px;
	text-align: center;
	padding: 0;
	margin: 0;
}
.board_out li.on_n a {
	border-bottom: 0px solid #333;
	font-weight: 700;
	font-size: 18px;
}
.board_out ul {
	display: block;
	width: 100%;
	height: 52px;
	border-bottom: 1px solid #f0f0f0;
	margin: 0;
	padding: 0;
}
.lec_applys {
	height: 322px;
	background: #2890de;
	border: 0px solid #2890de;
	border-radius: 5px;
}
.lec_applys p {
	color: #fff;
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;
	padding: 15px 0 10px 10px;
	margin: 0;
}
.lec_applys .lec_apply_table {
	margin: 0 0 0 13px;
	width: 94%;
}
table.lec_apply_table th,
table.lec_apply_table td {
	background: inherit;
	padding: 0;
	border: 0;
	text-align: left;
}
.lec_applys .lec_apply_table input {
	height: 30px;
	border: 0px;
	color: #333;
	font-family: "Noto Sans KR";
	font-size: 14px;
	font-weight: 500;
	padding: 0 0 0 5px;
}
.lec_applys .lec_apply_table .lec_apply_cont {
	border: 0;
	width: 217px;
	height: 75px;
	color: #333;
	font-family: "Noto Sans KR";
	font-size: 14px;
	font-weight: 500;
	padding: 5px;
}
.lec_applys #btnCounseling {
	border: 0;
	padding: 0;
	outline: 0;
	width: 227px;
	height: 40px;
	background: #16588a;
	color: #fff;
	font-family: "Noto Sans KR";
	font-size: 16px;
	font-weight: 400;
}
.lec_applys #btnCounseling:hover {
	cursor: pointer;
	background: #003e6d;
}

.bot_cont {
	display: block;
	width: 100%;
	clear: both;
}
.bot_cont .b_notice {
	display: inline-block;
	float: left;
	width: 595px;
	margin-right: 10px;
	border: 0px solid red;
	background: #ffffff;
	height: 205px;
	padding: 10px 25px;
}
.bot_cont .b_notice p {
	color: #333;
	font-family: "Noto Sans KR";
	font-size: 20px;
	line-height: 50px;
	font-weight: 500;
	padding: 0;
	margin: 0;
	padding: 0 0 10px 0;
}
.bot_cont .b_notice p span {
	float: right;
	height: 20px;
}
.bot_cont .b_notice p span a {
	font-size: 13px;
	color: #222;
	line-height: 10px;
	font-weight: 300;
}

.bot_cont .job_news {
	display: block;
	border: none;
	margin: 0px 0 0 0px;
	height: 102px;
	width: 100%;
}
.bot_cont .job_news dd {
	padding: 0;
	margin: 0;
}
.bot_cont .job_news .news_photo {
	float: left;
	margin: 0 20px 0 0;
	height: 102px;
	width: 162px;
}
.bot_cont .job_news .news_title {
	float: left;
	width: 360px;
}
.bot_cont .job_news .news_title a {
	display: block;
	font-size: 20px;
	font-weight: 500;
	color: #000;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bot_cont .job_news .news_cont {
	float: left;
	width: 360px;
	margin-top: 15px;
}
.bot_cont .job_news .news_cont a {
	display: -webkit-box;
	font-size: 14px;
	font-weight: 400;
	color: #494949;
	line-height: 23px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.bot_cont .job_banner {
	display: inline-block;
	border: none;
	margin: 0px 0 0 0px;
	height: 102px;
	width: 100%;
}
.bot_cont .job_banner li {
	padding: 0 0px;
	margin: 0;
	float: left;
	width: 130px;
	height: 40px;
	border: 1px solid #dfdfdf;
	background: #fff;
	text-align: center;
	margin: 0 8px 10px 0;
}
.bot_cont .job_banner li:nth-child(3n) {
	margin-right: 0;
}
.bot_cont .job_banner li a {
	color: #555;
	font-family: "Noto Sans KR";
	font-size: 15px;
	line-height: 40px;
	font-weight: 500;
	display: inline-block;
	overflow: hidden;
	width: 130px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bot_cont .job_banner2 {
	display: block;
	border: none;
	margin: 0px 0 0 0px;
	height: 110px;
	width: 100%;
}
.bot_cont .job_banner2 li {
	padding: 0 0px;
	margin: 0;
	float: left;
	width: 130px;
	height: 95px;
	border: 1px solid #dfdfdf;
	background: #fff;
	text-align: center;
	margin: 3px 8px 7px 0;
	font-size: 13rem;
}
.bot_cont .job_banner2 li:nth-child(3n) {
	margin-right: 0;
}
.bot_cont .job_banner2 li a {
	color: #555;
	font-family: "Noto Sans KR";
	font-size: 15px;
	line-height: 10px;
	font-weight: 500;
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bot_cont .banners {
	float: left;
	width: 595px;
	margin-right: 0px;
	border: 0px solid red;
	background: #ffffff;
}
.bot_cont .banners .banner {
	float: left;
	width: 143px;
	height: 205px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}

.bot_cont .banners .banner00 {
	float: left;
	width: 130px;
	height: 205px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	cursor: pointer;
}
.bot_cont .banners div.banner01 {
	background: #166d8f;
}
.bot_cont .banners div.banner02 {
	background: #d45b66;
}
.bot_cont .banners div.banner03 {
	background: #ed8a33;
}

.bot_cont .banners .banner00:hover,
.bot_cont .banners .banner:hover {
	text-decoration: underline;
}

.bot_cont .banners .j-banner {
	float: left;
	width: 179px;
	height: 205px;
}
.m_lec {
	display: inline-block;
	float: left;
	width: 380px;
	margin: 0 0px 0 0;
	border: 0px solid red;
	background: none;
	height: 240px;
	padding: 0px 0px;
}
.m_lec1 {
	display: inline-block;
	float: right;
	width: 365px;
	margin: 0 0px 0 10px;
	border: 0px solid red;
	background: none;
	height: 240px;
	padding: 0px 0px;
}
.m_lec2 {
	display: inline-block;
	float: left;
	width: 412px;
	margin: 0px 23px 0 0;
	border: 0px solid red;
	background: none;
	height: 185px;
	padding: 0px 0px;
}
.bot_cont .m_lec p,
.bot_cont .m_lec1 p,
.bot_cont .m_lec2 p {
	color: #222;
	font-size: 24px;
	line-height: 20px;
	font-weight: 500;
	padding: 0 0 15px 0;
}
.bot_cont .m_lec p span,
.bot_cont .m_lec1 p span,
.bot_cont .m_lec2 p span {
	float: right;
	height: 20px;
}
.bot_cont .m_lec p span a,
.bot_cont .m_lec1 p span a,
.bot_cont .m_lec2 p span a {
	font-size: 13px;
	color: #222;
	line-height: 10px;
	font-weight: 300;
}

.m_lec p.m_hd2 {
	color: #222;
	font-size: 24px;
	line-height: 24px;
	font-weight: 500;
	padding: 0 0 0px 0;
	height: 40px;
}
.m_lec p.m_hd2 > button {
	margin-top: -5px;
	border-top-left-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	-moz-border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-bottom-right-radius: 3px;
}
.m_lec p.m_hd2 > button:hover {
	cursor: pointer;
}
.lec1_board li {
	display: flex;
	flex-direction: row;
	align-item: center;
	border-bottom: 1px solid #ccc;
	height: 33px;
}
.lec1_board li p.grad {
	color: #333;
	font-family: "Noto Sans KR";
	font-size: 16px;
	padding: 0;
	margin: 0;
	font-weight: 400;
	line-height: 16pt;
}
.lec1_board li p.grad:nth-child(1) {
	width: 70px;
	display: inline-block;
}
.lec1_board li p.grad:nth-child(2) {
	display: inline-block;
	width: 90px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lec1_board li p.grad:nth-child(3) {
	width: 220px;
	text-align: left;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lec1_board {
	display: block;
	width: 100%;
	height: 136px;
}
.mainEmploymentSwiper .main-employment-slide {
	height: 33px !important;
}
.boardline1,
.boardline {
	display: flex;
	flex-direction: row;
	align-item: center;
	border-bottom: 1px solid #ccc;
	height: 33px;
}
.boardline1:last-child,
.boardline:last-child {
	border-bottom: 0px solid #ccc;
}

.boardline li {
	color: #333;
	font-family: "Noto Sans KR";
	font-size: 16px;
}
.boardline li:nth-child(1) {
	width: 175px;
}
.boardline li:nth-child(2) {
	width: 150px;
}
.boardline li:nth-child(3) {
	width: 40px;
	text-align: right;
}
.job_main_t {
	width: 100%;
	text-align: center;
	color: #333;
	font-family: "Noto Sans KR";
	font-size: 17px;
	line-height: 40px;
	font-weight: 500;
	padding: 0;
	margin: 0;
	padding: 10px 0 10px 0;
}
.main_j_suc {
	margin: 0px 0 0 0;
}
.main_j_suc .gra_00 {
	height: 80px;
	width: 179px;
	text-align: center;
	overflow: hidden;
	position: relative;
	margin: 0px 0 0 0;
}
.main_j_suc .gra_01 {
	font-size: 16px;
	width: 179px;
	text-align: center;
	color: #2b83ba;
	font-weight: 500;
	margin: 0;
}
.main_j_suc .gra_02 {
	font-size: 14px;
	width: 179px;
	text-align: center;
	color: #666;
	font-weight: 500;
	line-height: 30px;
	margin: 0;
}
.main_j_suc .gra_02 a {
	display: block;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 140px;
	margin: 0 auto;
}
.main_j_suc .gra_02 a:hover {
	color: #111;
}
.apply_01_table {
	clear: both;
	display: block;
	border: 1px solid #a3a3a3;
	width: 900px;
	margin: 0 0 40px 0;
	min-height: 186px;
	overflow: hidden;
	height: auto;
}
.apply_01_table3 {
	border: 0px;
}
.apply_01_table li {
	float: left;
}
.apply_01_table li:first-child {
	margin-right: 40px;
}
.apply_01_table li:last-child {
	margin: 25px 0 0 0;
}
.apply_border {
	border: 1px solid #c3c3c3;
	padding: 20px 0 20px 30px;
}
.apply_01_table2 {
	display: block;
}
.apply_01_table2 td {
	font-size: 14px;
	color: #666;
	line-height: 28px;
	font-weight: 300;
	height: 28px;
	text-align: left;
}
.apply_01_table2 td.title {
	border-bottom: 1px solid #d9d9d9;
	padding: 0 0 5px 0;
}

.apply_01_table2 td div.wnfdla1 {
	width: 460px;
	display: inline-block; /*text-overflow:ellipsis; overflow:hidden;white-space:nowrap;*/
	font-size: 21px;
	color: #444;
	font-weight: 500;
	height: auto;
	border: 0px solid #333;
	line-height: 27px;
	letter-spacing: -1px;
	text-align: left;
}
div.classess,
.apply_01_table2 td div.classess {
	width: 55px;
	height: 36px;
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-right: 10px;
	vertical-align: top;
	margin-top: 6px;
	color: #fff;
	font-size: 16px;
	line-height: 16px;
	font-weight: 400;
	text-align: center;
	border-top-left-radius: 27px;
	-webkit-border-top-left-radius: 27px;
	-moz-border-top-left-radius: 27px;
	border-top-right-radius: 27px;
	-webkit-border-top-right-radius: 27px;
	-moz-border-top-right-radius: 27px;
	border-bottom-left-radius: 27px;
	-webkit-border-bottom-left-radius: 27px;
	-moz-border-bottom-left-radius: 27px;
	border-bottom-right-radius: 27px;
	-webkit-border-bottom-right-radius: 27px;
	-moz-border-bottom-right-radius: 27px;
	padding-top: 19px;
	margin: 22px auto 18px auto;
	margin-right: 10px;
}
div.classes,
.apply_01_table2 td div.classes {
	width: 60px;
	height: 25px;
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-right: 12px;
	vertical-align: top;
	margin-top: 6px;
	color: #fff;
	font-size: 14px;
	line-height: 25px;
	font-weight: 500;
	text-align: center;
	border-top-left-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	-moz-border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-bottom-right-radius: 3px;
}

li.A_class,
.apply_01_table2 td div.A_class {
	background: #b95c5c;
}
li.B_class,
.apply_01_table2 td div.B_class {
	background: #2e8cf2;
}
li.C_class,
.apply_01_table2 td div.C_class {
	background: #ffad00;
}
li.D_class,
.apply_01_table2 td div.E_class {
	background: #00aad0;
}
li.E_class,
.apply_01_table2 td div.E_class {
	background: #f89b10;
}

div.A_classc {
	background: #814040;
}
div.C_classc {
	background: #c68602;
}
div.D_classc {
	background: #007791;
}

.apply_01_table2 td.space1 {
	height: 10px;
}
.apply_01_table2 td span {
	color: #333;
	line-height: 18px;
	font-weight: 500;
}
.apply_01_table2 td span.wnfdla {
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 14px;
	line-height: 14px;
	font-weight: 300;
	padding-top: 0px;
}
.apply_01_table2 td.wnfdla3 {
	color: #666;
	line-height: 22px;
}
.apply_01_table2 td span.wnfdla2 {
	width: 500px;
	display: inline-block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 14px;
	color: #666;
	line-height: 14px;
	font-weight: 300;
	padding-top: 0px;
}
table.apply_01_table2 td {
	padding: 0px;
	border: none;
}

.class_btn {
	display: inline-block;
	font-weight: 400;
	color: #fff;
	text-align: center;
	background-color: #ddd;
	padding: 1px 7px 2px 7px;
	font-size: 14px;
	border-radius: 5px;
	outline: 0;
	line-height: 23px;
	margin: 0 8px 0 0;
	width: auto;
}
.class_A01 {
	background: #083fa9;
}
.class_A02 {
	background: #00b356;
}
.class_A03 {
	background: #ae8d73;
}
.class_A04 {
	background: #4cc4cc;
}
.class_B01 {
	background: #fb582a;
}
.class_C01 {
	background: #83ba0e;
}
.class_D01 {
	background: #208fdb;
}
.class_E01 {
	background: #dc9222;
}
.class_F01 {
	background: #944d4c;
}
.class_G01 {
	background: #fbb900;
}
#moreBtn {
	background: none;
	border: none;
	padding: 0;
	margin-top: 12px;
	cursor: pointer;
}
.apply_apply_btn {
	display: flex;
	clear: both;
	width: 100%;
	margin: 0 auto;
	height: 70px;
	background: #fff;
}
.apply_apply {
	display: block;
	border: 0px solid #003876;
	width: 196px;
	height: 55px;
	background: #2a6bb4;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	color: #fff !important;
	margin-right: 10px;
	border-radius: 5px;
}
a.apply_apply:hover {
	background: #153980;
	transition: all 0.2s ease;
}

.apply_apply2 {
	background: #444d58;
}
a.apply_apply2:hover {
	background: #222;
	transition: all 0.2s ease;
}
.new_mainclass {
	width: 100%;
	padding: 25px 0;
	border-bottom: 1px solid #e4e4e4;
	font-size: 25px;
	font-weight: 700;
}
.nm_class_name {
	line-height: 1.1;
	padding-top: 5px;
	width: 50px;
}
.class_name_de {
	padding: 0 0 0 40px;
	width: 1150px;
	position: relative;
}
.class_name_div {
	position: relative;
}
.class_name_div::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 18px;
	background-color: #c5c5c5;
}
.main_class_title {
	width: 800px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mc_date {
	padding-top: 3px;
	font-size: 17.5px;
	font-weight: 700;
}
.mc_date01 {
	color: #7c7c7c;
	margin-right: 30px;
}
.mc_date02 {
	color: #2a5489;
}
.main_apply_apply {
	display: block;
	border: 0px solid #003876;
	width: 100px;
	height: 35px;
	background: #2596ca;
	font-size: 15px;
	font-weight: 400;
	text-align: center;
	color: #fff !important;
	margin-right: 10px;
	border-radius: 5px;
}
.main_apply_apply1 {
	background: #444d58;
}
.nm_class_btn {
	display: inline-block;
	font-weight: 500;
	color: #fff;
	text-align: center;
	background-color: #ddd;
	padding: 2px 10px;
	font-size: 16px;
	border-radius: 4px;
	outline: 0;
	cursor: pointer;
}
.class_A01 {
	background: #083fa9;
}
.class_A02 {
	background: #00b356;
}
.class_A03 {
	background: #ae8d73;
}
.class_A04 {
	background: #4cc4cc;
}
.class_B01 {
	background: #fb582a;
}
.class_C01 {
	background: #83ba0e;
}
.class_D01 {
	background: #208fdb;
}
.class_E01 {
	background: #dc9222;
}
.class_F01 {
	background: #944d4c;
}
.class_G01 {
	background: #fbb900;
}
.apply_head {
	clear: both;
	display: block;
	text-align: center;
	font-size: 30px;
	color: #444;
	font-weight: 500;
	table-layout: fixed;
	margin: 30rem 0;
}
.apply_table {
	border-top: 2px solid #57a3d8;
	border-left: 1px solid #ccc;
	margin-top: 5px;
	width: 900px;
}
.apply_table {
	border-top: 2px solid #57a3d8;
	border-left: 1px solid #ccc;
	margin-top: 5px;
	width: 900px;
}
.apply_table th {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	font-size: 15px;
	font-weight: 500;
	background: #f6f6f6;
	text-align: center;
	padding: 5px 0;
	color: #000000;
}
.apply_table td {
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	font-size: 15px;
	padding: 5px 0 5px 10px;
	text-align: left;
	color: #444444;
}

table.apply_table tr:last-child td {
	border-bottom: 1px solid #ccc;
}
table.apply_table th:last-child,
table.apply_table td:last-child {
	border-right: 1px solid #ccc;
}
.apply_table td input:not([type="radio"]):not([type="checkbox"]) {
	border: 1px solid #ccc;
	height: 32px;
}
.apply_table td input[type="radio"],
.apply_table td input[type="checkbox"] {
	margin-right: 0rem;
}
.apply_table td label {
	margin-right: 15rem;
}
.apply_table th.in_hd {
	font-size: 17px;
	font-weight: 500;
	background: #e7e7e7;
	height: 34px;
}
.apply_table th.in_hd2 {
	font-size: 15px;
	font-weight: 300;
	background: #fff;
	text-align: center;
	line-height: 25px;
	color: #666;
	padding: 10px 0;
}
.apply_table td input.ip_txt0 {
	height: 13px;
}
.apply_table_vew td {
	height: 37px;
}
.down_btn {
	clear: both;
	display: block;
	margin: 0 auto;
	width: 530px;
}
.down_btn li {
	float: left;
	margin-top: 10px;
	margin-right: 30px;
	width: 250px;
	height: 30px;
	background: #4592c4;
	font-size: 14px;
}
.down_btn li.nom {
	margin-right: 0px;
}
.down_btn li.red {
	background: #d94949;
}
.down_btn li a {
	font-weight: 500;
	line-height: 30px;
	color: #fff;
}

.down_btn2 {
	clear: both;
	display: block;
	margin: 0 0 150px 0;
	width: 900px;
}
.down_btn2 li {
	float: left;
	margin-top: 10px;
	margin-right: 15px;
	width: 205px;
	height: 60px;
	font-size: 14px;
	padding: 0;
	text-align: center;
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	background: #4592c4;
}
.down_btn2 li.nom {
	margin-right: 0px;
	width: 240px;
}
.down_btn2 li.red {
	background: #d94949;
}
.down_btn2 li a {
	font-weight: 500;
	line-height: 60px;
	color: #fff;
	text-decoration: underline;
}
.job-listing-notice {
	font-size: 15px;
	font-weight: 300;
	background: #fff;
	text-align: center;
	line-height: 25px;
	color: #666;
	padding: 10px 0;
	width: 900px;
	border: 1px solid #cccccc;
	border-top: none;
}
.job-listing-notice a {
	display: block;
	margin: 10px auto;
	width: 240px;
	height: 60px;
	line-height: 60px;
	font-weight: bold;
	font-size: 18px;
	text-decoration: underline;
	padding: 0;
	text-align: center;
	border-radius: 5px;
	background: #d94949;
	color: #fff;
}
.job-listing-actions {
	padding: 20px;
}
.job-listing-actions a {
	display: block;
	font-size: 14px;
	padding: 5px 20px;
	text-align: center;
	border-radius: 5px;
	background: #fff;
	border: 1px solid #ccc;
	color: #333;
	font-weight: 500;
	margin-right: 10px;
}
.job-listing-actions button {
	display: block;
	font-size: 14px;
	padding: 5px 20px;
	text-align: center;
	border-radius: 5px;
	background: #4592c4;
	border: 1px solid #4592c4;
	color: #fff;
	font-weight: 500;
	margin-right: 10px;
	cursor: pointer;
}
.job-listing-actions button:hover {
	background: #2378af;
	border: 1px solid #2378af;
}
.job_notice {
	clear: both;
	display: block;
	width: 900px;
	height: 90px;
}
.job_notice p,
.job_notice img {
	float: left;
	margin-right: 17px;
}

.job_hd1 {
	margin: 0 0 0px 0;
	font-size: 21px;
	color: #d94949;
	font-weight: 500;
	width: 800px;
}
.job_hd2 {
	margin: 0 0 40px 0;
	font-size: 17px;
	color: #555;
	font-weight: 300;
	width: 800px;
}
.job_cate {
	border: 1px solid #bbd5ef;
	background: #f8fbfc;
	margin-bottom: 40px;
}
.job_cate label {
	margin-right: 10px;
}
.news_board {
	width: 100%;
	border-bottom: 1px solid #ccc;
	position: relative;
	padding: 25px 0 20px 0;
}
.bnews_01,
.bnews_02 {
	display: inline-block;
}
.bnews_01 {
	width: 73%;
	margin-left: 10px;
}
.bnews_02 {
	overflow: hidden;
	width: 200px;
	height: 150px;
	margin: 0px 0 0;
	padding: 0;
}
.bnews_title {
	overflow: hidden;
	display: block;
	font-size: 19px;
	margin: 5px 0;
	font-weight: 400;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
}
.bnews_cont {
	min-height: 73px;
	margin: 15px 0 10px 0;
	overflow: hidden;
	display: block;
	font-size: 15px;
	font-weight: 300 !important;
	color: #222;
	font-weight: 400;
}
.bnews_cont a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	text-overflow: ellipsis;
}
.bnews_date {
	color: #888;
	font-size: 13px;
	font-weight: 400 !important;
}
.bnews_date span {
	display: inline-block;
	padding-left: 12px;
	margin-left: 7px;
	background: url(/img/board/bg_tline.png) no-repeat 0 6px;
}
.news_board:first-child {
	border-top: 2px solid #426691;
}
.board_top_app {
	display: block;
	margin: 0 0 15px 0;
}
.board_top_app .job_rst {
	display: block;
	clear: both;
	margin-top: 40px;
	padding: 0;
	list-style: none;
}
.board_top_app .job_rst::after {
	content: "";
	display: block;
	clear: both;
}
.board_top_app .job_rst li {
	float: left;
	width: 215px;
	height: 220px;
	border: 1px solid #ccc;
	background: #fff;
	margin: 0 11px 20px 0;
	padding: 0;
	border-radius: 5px;
}
.board_top_app .job_rst li:nth-child(4n) {
	margin-right: 0;
}

.board_top_app .job_rst li p {
	width: 200px;
	margin: 0 auto;
	display: block;
	padding: 0;
	text-align: center;
}

.board_top_app .job_rst li div.gra_00 {
	height: 115px;
	text-align: center;
	overflow: hidden;
	position: relative;
}
.board_top_app .job_rst li div.off {
	background: url(/img/sub_n/gra_off2.gif) no-repeat 58px 10px;
}
.board_top_app .job_rst li div .cover {
	height: 115px;
	width: 160px;
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 28px;
}
.board_top_app .job_rst li div.on img.photo {
	height: 112px;
	margin-top: 6px;
}

.board_top_app .job_rst li p.gra_01 {
	font-size: 16px;
	color: #2b83ba;
	font-weight: 500;
	margin-top: 10px;
}
.board_top_app .job_rst li p.gra_02 {
	font-size: 14px;
	color: #666;
	font-weight: 500;
	line-height: 30px;
}
.board_top_app .job_rst li p.gra_03 {
	font-size: 13px;
	width: 200px;
	color: #888;
	font-weight: 400;
	line-height: 15px;
	text-align: justify;
	padding: 0 5px;
}
.board_top_app .job_rst li p.gra_03 a {
	color: #888;
}
.board_top_app .job_rst li:hover {
	border: 1px solid #57a3d8; /*cursor: pointer; */
}
.comm_top {
	clear: both;
	display: block;
	width: 900px;
	height: 150px;
}
.comm_top p {
	font-size: 29px;
	color: #0067b3;
	font-weight: 900;
	height: 25px;
	margin: 0 0 10px 0px;
	text-align: center;
}
.comm_top span {
	line-height: 45px;
	font-size: 17px;
	color: #555;
}
.comm_top p.text {
	font-size: 15px;
	color: #777;
	font-weight: 300;
	height: 25px;
	margin: 0;
	text-align: center;
}
.swiper-slide img {
	width: 100%;
	height: 560px;
	object-fit: cover;
	object-position: center;
}
.apply_3011 p {
	display: block;
	font-size: 25px;
	color: #326095;
	font-family: "Noto Sans KR";
	line-height: 18px;
	font-weight: 500;
	width: 900px;
	margin: 10px 0 30px 0;
}
.apply_61 {
	clear: both;
	display: block;
	width: 900px;
	border: 1px solid #e9e9e9;
	background: #f8f8f8;
	padding: 22px 20px;
	text-align: left;
	font-size: 17px;
	color: #444;
	line-height: 25px;
	margin: 0 0 30px 0;
}
.apply_61 li {
	display: inline-block;
	float: left;
	height: 40px;
	line-height: 40px;
}
.apply_61 li.btn_down {
	width: 240px;
	border: 1px solid #0366bf;
	text-align: center;
	margin: 0 0 0 20px;
	color: #888;
	font-weight: 700;
	font-size: 17px;
	background: #197ac8;
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
}
.apply_61 li.btn_down a {
	color: #fff;
}
.apply01 p.hd,
.apply01 li.hd {
	font-size: 17px;
	color: #328ac8;
	font-family: "Noto Sans KR";
	line-height: 25px;
	font-weight: 700;
	padding: 0 0 15px 20px;
	background: url(/img/page_hd2.gif) no-repeat 2px 6px;
	text-indent: 0px;
}

.apply01 p.hds {
	font-size: 17px;
	color: #328ac8;
	font-family: "Noto Sans KR";
	line-height: 25px;
	font-weight: 700;
	padding: 0 0 5px 20px;
	background: url(/img/page_hd2.gif) no-repeat 2px 6px;
	text-indent: 0px;
	margin: 0;
}

.apply01 li.hd22 {
	font-size: 17px;
	color: #328ac8;
	height: 25px;
	padding: 0 0 15px 20px;
}

.ap_001 {
	clear: both;
	display: block;
	border: 4px solid #ffc883;
	width: 900px;
	margin: 0 auto;
	height: 65px;
	background: #fff;
	font-size: 18px;
	line-height: 60px;
	font-weight: 500;
	text-align: center;
	padding: 0 0 0 0px;
	margin-bottom: 35px;
}
.ap_001 li {
	float: left;
	font-size: 17px;
	color: #4a4a4a;
	padding: 0 20px;
	background: none;
}
.joinBox1 {
	border: 1px solid #ccc;
	margin-top: 0px;
	font-family: "Noto Sans KR";
	line-height: 21px;
	font-weight: 300;
	color: #777;
	font-size: 14px;
}
.agree_apply {
	clear: both;
	display: block;
	border: 1px solid #ccc;
	background: #f8f8f8;
	border-top: 0px;
	width: 900px;
	text-align: center;
	line-height: 20px;
	font-weight: 300;
	color: #777;
	font-size: 14px;
	padding: 10px 0;
}
.agree_apply01 {
	clear: both;
	display: block;
	border: 0px solid #ccc;
	background: #fff;
	border-top: 0px;
	width: 900px;
	text-align: center;
	line-height: 20px;
	font-weight: 300;
	color: #555;
	font-size: 14px;
	padding: 10px 0;
}
.ap_001 label {
	margin-right: 35px;
}
.apply_table #curriCode {
	font-size: 15px;
	width: 95%;
	font-weight: 500;
	border: 1px solid #ccc;
	height: 32px;
}
.apply_table2 td select,
.apply_table2 td .input_w_cool {
	border: 1px solid #aaa;
	line-height: 21px;
	font-weight: 300;
	color: #555;
	font-size: 12px;
	height: 25px;
}
.apply_61 li.btn_down {
	width: 240px;
	border: 1px solid #0366bf;
	text-align: center;
	margin: 0 0 0 20px;
	color: #888;
	font-weight: 700;
	font-size: 17px;
	background: #197ac8;
	border-top-left-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	-moz-border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
}
button.apply_apply {
	cursor: pointer;
}
.apply_table10 td {
	text-align: center;
}
.apply_table10 td.left {
	text-align: left;
}
.apply_table11 td {
	border-right: none;
	height: 60px;
}