@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* 공통 css 시작 */
.serveTitleArea > div,
.contentBox,
.tab-menu,
.locationArea02 { max-width: 1260px; margin: 0 auto; padding: 0 20px; }

button { height: auto; line-height: 1.4em; }
h3 { font-size: 1.17em; line-height: 1.5em; font-weight: 600; }

@media (max-width: 991px) {
    .serveTitleArea > div,
	.contentBox,
	.tab-menu,
	.locationArea02 { max-width: 970px; }
}

.contentBox { padding: 100px 20px; font-size: 20px; }

.replyComm { overflow: hidden; background: #f4f4f4; border: 1px solid #000; padding: 20px; margin-bottom: 30px; }

.replyComm > div {
	margin-bottom: 10px;
	font-size: 16px;
}

.replyComm .commentList li {
	padding: 20px;
	list-style: none;
	border: 1px solid #ddd;
	background: #fff;
}

.replyComm .commentList li:not(:last-of-type) {
	margin-bottom: 20px;
}

.replyComm .commentList li div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.replyComm .commentList li p {
	clear: both;
	line-height: 18px;
	font-size: 16px;
	margin-bottom: 10px;
}


.contentTitle {
	text-align: center;
	font-size: 36px;
	position: relative;
	opacity: 0;
	margin-bottom: 70px;
	font-weight: 700;
}

p.pointList {
	position: relative;
    display: inline-block;
	padding-left: 26px;
	line-height: 30px;
	color: #f99725 !important;
	font-size: 18px;
}

p.pointList:before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 20px;
	height: 22px;
	background-image: url('../../img/sub/checkIcon01.png');
	background-size: cover;
}

.mob_col { display: none; }

/* 공통 css 끝 */

/* 국민내일배움카드제도, k디지털역량훈련제도 - 사업목적 시작 */

.purposeArea {
	text-align: center;
	position: relative;
}

@keyframes scaleAnimate {
	0% {
		transform: scale(1);
		opacity: 1;
	}

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

	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.bg {
	animation-name: scaleAnimate;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
	transform-origin: 50% 50%;

	margin-bottom: 30px;
}

.purposeMotionCard {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);

}

.purposeMotionCard {
	animation: motion 2.5s linear 0s infinite;
	margin-top: 0;
}

@keyframes motion {
	0% {
		margin-top: 0px;
	}

	20% {
		margin-top: 10px;
	}

	40% {
		margin-top: 0px;
	}

	60% {
		margin-top: 10px;
	}

	80% {
		margin-top: 0px;
	}

	100% {
		margin-top: 0px;
	}
}

.purposeArea p {
	color: #555555;
}

/* 국민내일배움카드제도, k디지털역량훈련제도 - 사업목적 끝*/

/*  k디지털역량훈련제도 - 사업목적 시작 */


.lineas {
	stroke-width: 2px;
}

.pulso {
	opacity: 0.5;
	fill: none;
	stroke: #88ffff;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 8 212;
	animation: pulse 1.5s linear infinite;
}

.pulso2 {
	opacity: 1;
	fill: none;
	stroke: #88ffff;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 3 217;
	animation: pulse 1.5s linear infinite;
}

.borde {
	animation: brillo 1.5s ease infinite;
}

#laptop {
	animation: levitar 1.5s ease-in-out alternate infinite;
}

.nodos ellipse {
	rx: 3.2px;
	ry: 1.84px;
}

@keyframes pulse {
	0% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: 220;
	}
}

@keyframes brillo {
	0% {
		opacity: 0.2;
	}

	50% {
		opacity: 0.75;
	}

	100% {
		opacity: 0.2;
	}
}

@keyframes levitar {
	0% {
		transform: translateY(0px);
	}

	100% {
		transform: translateY(-6px);
	}
}

.purposeArea svg { width: 630px; height: 440px; } 

/*  k디지털역량훈련제도 - 사업목적 끝 */


/* 국민내일배움카드제도, k디지털 - 지원대상 시작*/
.targetArea {
	color: #fff;
	background-color: #256ea8;
}

.targetArea h2 {
	line-height: 42px;
}

.targetArea h2 span {
	font-size: 28px;
	font-weight: 500;
}

/* 국민내일배움카드제도, k디지털 - 지원대상 끝 */

/* 국민내일배움카드제도 - 지원대상 시작 */
.targetListArea ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.targetListArea ul li {
	background-color: #fff;
	box-shadow: 0px 3px 5px #003660;
	padding: 7px 20px;
	border-radius: 50px;
	color: #256ea8;
	font-size: 17px;

}

.test_obj01 {
	position: relative;
	transition: all ease 0.6s;
	opacity: 0;
	transform: translate3d(0, 70%, 0);
}

.test_obj02 {
	position: relative;
	opacity: 0;
	transition: all ease 0.8s;
	transform: translate3d(0, 70%, 0);
}

.test_obj03 {
	position: relative;
	opacity: 0;
	transition: all ease 1s;
	transform: translate3d(0, 70%, 0);
}

.test_obj04 {
	position: relative;
	opacity: 0;
	transition: all ease 1.2s;
	transform: translate3d(0, 70%, 0);
}

.test_obj04 {
	position: relative;
	opacity: 0;
	transition: all ease 1.4s;
	transform: translate3d(0, 70%, 0);
}

.test_obj05 {
	position: relative;
	opacity: 0;
	transition: all ease 1.6s;
	transform: translate3d(0, 70%, 0);
}

.test_obj06 {
	position: relative;
	opacity: 0;
	transition: all ease 1.8s;
	transform: translate3d(0, 70%, 0);
}

.test_obj07 {
	position: relative;
	opacity: 0;
	transition: all ease 2s;
	transform: translate3d(0, 70%, 0);
}

.test_obj08 {
	position: relative;
	opacity: 0;
	transition: all ease 2.2s;
	transform: translate3d(0, 70%, 0);
}

/* 국민내일배움카드제도 - 지원대상 끝 */

/* k디지털 - 지원대상 시작*/
.digitalTarget ul {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	align-items: center;
	gap: 50px;

	text-align: center;
}

.digitalTarget ul li:first-of-type {
	min-width: 440px;
}

.digitalTarget ul li img {
	margin-bottom: 20px;
	vertical-align: top;
}

.digitalTarget ul li h3 {
	text-align: center;
	font-size: 22px;
}


.fadeInLeft01 {
	opacity: 0;
	transition-delay: 0.3s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);

}

.fadeInLeft02 {
	opacity: 0;
	transition-delay: 0.48s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);
}

.fadeInLeft03 {
	opacity: 0;
	transition-delay: 0.66s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);

}

/* k디지털 - 지원대상 끝*/




/* 국민내일배움카드제도 - 훈련비 지원 시작 */
.trainingFeeContent {
	position: relative;
}

.trainingFeeList li {
	color: #555555;
}

.fee01 {
	opacity: 0;
	transition-delay: 0.5s;
	transition-duration: 1.8s;
	transform: translateX(-30px);
}

.fee02 {
	opacity: 0;
	transition-delay: 1s;
	transition-duration: 1.8s;
	transform: translateX(-30px);
}

.fee03 {
	opacity: 0;
	transition-delay: 1.5s;
	transition-duration: 1.8s;
	transform: translateX(-30px);
}

.fee04 {
	opacity: 0;
	transition-delay: 2s;
	transition-duration: 1.8s;
	transform: translateX(-30px);
}

.trainingFeeContent ul li:not(:last-of-type) {
	margin-bottom: 35px;
}

.trainingFeeContent ul li span {
	font-weight: 600;
	font-size: 28px;
	color: #000;
}

.trainingFeeContent img {
	width: 260px;
}

.coin {
	margin: auto;
	position: absolute;
	top: 15px;
	right: 20px;
	height: 260px;
	width: 260px;
}

.coin .front {
	position: absolute;
}


.coin .shadow {
	width: 100%;
	height: 20px;
	background: rgba(0, 0, 0, 0.4);
	left: 0;
	bottom: -50px;
	border-radius: 50%;
	z-index: -1;
	margin-top: 275px;
	animation: swift 1.5s infinite ease;
}

@keyframes swift {
	0% {
		opacity: 0.8;
	}

	50% {
		opacity: 0.4;
		transform: scale(0.8);
	}

	100% {
		opacity: 0.8;
	}
}

.jump {
	animation: jump 1.5s infinite ease;
}

@keyframes jump {
	0% {
		top: 0;
	}

	50% {
		top: -40px;
	}

	100% {
		top: 0;
	}
}

/* 국민내일배움카드제도 - 훈련비 지원 끝 */

/* 국민내일배움카드제도 - 훈련과정찾기 시작 */
.traningSearchArea {
	position: relative;
	text-align: center;
}

.traningSearchArea h2 {
	margin-bottom: 30px;
}

.traningSearchArea p {
	color: #555555;
	margin-bottom: 70px;
}

/* laptop */

.laptop {
	margin: 0 auto 70px auto;
	text-align: center;
    width: 90%;
	max-width: 880px;
	height: 500px;
	border: 12px #303030 solid;
	border-radius: 20px;
	position: relative;
}

.laptop:before {
	content: '';
	display: block;
	position: absolute;
	width: 100px;
	left: 50%;
	bottom: -28px;
	transform: translateX(-50%);
	height: 8px;
	background: #797979;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	z-index: 1;
}

.laptop:after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
    width: 100%;
	max-width: 1000px;
	height: 20px;
	background: #303030;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

.laptop .content {
	height: 476px;
	margin-bottom: 20px;
	background: #fff;
	color: #2980b9;
	overflow-y: hidden;
	border-radius: 20px;
}

.laptop .content ul img {
	width: 100%;
}

.laptopAnimate {
	animation: laptop 6s cubic-bezier(0.250, 0.150, 0.250, 1.050) infinite;
}

@keyframes laptop {
	20% {
		transform: translateY(0%);
	}

	40%,
	60% {
		transform: translateY(-56%);
	}

	100% {
		transform: translateY(0%);
	}
}


.traningSearchArea button {
	border-radius: 50px;
	color: #256ea8;
	padding: 8px 40px;
	border: 2px solid #256ea8;
	font-size: 20px;
	font-weight: 500;
	background-color: #fff;
	transition: all ease 0.35s;
}

.traningSearchArea button:hover {
	color: #fff;
	background-color: #256ea8;
}

/* 국민내일배움카드제도 - 훈련과정찾기 끝 */

/* 국민내일배움카드제도 - 진행절차 시작 */
.procedureArea {
	background-color: #f4f4f4;
	margin-bottom: 0px;
}

.contentBox ol.procedureList {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: nowrap;

	list-style: none;
	text-align: center;
	margin-bottom: 40px;
}

.procedureList {
	background-color: #f4f4f4;
}

.procedureList > li {
	position: relative;
	padding: 25px 6px;
	border: 3px solid #ddd;
	box-shadow: 0px 0px 2px #cbcbcb;
	border-radius: 10px;
	width: calc(20% - 30px);
	background-color: #fff;
}

.procedureList li:not(:last-of-type)::before {
	content: "";
	display: block;
	position: absolute;
	right: -38px;
	top: 50%;
	transform: translateY(calc(50% - 24px));
	width: 28px;
	height: 28px;
	background-image: url('../../img/sub/listArrowIcon.png');
	background-size: cover;
}

.procedureList li h4 { margin-bottom: 25px; font-size: 20px; font-weight: 800; line-height: 1.5em; color: #256ea8; }

.procedureList li div.iconBox {
	width: 80px;
	height: 80px;
	margin: 0 auto 15px auto;
	border-radius: 50px;
}

.procedureList li div.iconBox img {
	width: auto;
	height: auto;
	max-width: 40px;
}

.procedureList li div.color01 {
	background-color: #00378a;
}

.procedureList li div.color02 {
	background-color: #ffd519;
}

.procedureList li div.color03 {
	background-color: #009d75;
}

.procedureList li div.color04 {
	background-color: #1c99d7;
}

.procedureList li div.color05 {
	background-color: #f99725;
}

.procedureList li p {
	color: #707070;
}

/* k디지털 진행절차 시작*/
.procedureList02 li {
	position: relative;
	padding: 30px 10px;
	border: 3px solid #ddd;
	border-radius: 10px;
	box-shadow: 0px 0px 8px #cbcbcb;
	width: calc(24% - 30px);
	background-color: #fff;
}

.procedureList02 li:not(:last-of-type)::before {
	content: "";
	display: block;
	position: absolute;
	right: -50px;
	top: 50%;
	transform: translateY(calc(50% - 24px));
	width: 32px;
	height: 32px;
	background-image: url('../../img/sub/listArrowIcon.png');
	background-size: cover;
}

.procedureList02 li div.iconBox {
	width: 120px;
	height: 120px;
	margin: 0 auto 15px auto;
	border-radius: 50px;
}

.procedureList02 li div.iconBox img {
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 0;
}

/* k디지털 진행절차 끝 */

.up01 { transition: all ease 0.5s; opacity: 0; transform: scale(0.8); }
.up02 { transition: all ease 1s; opacity: 0; transform: scale(0.8); }
.up03 { transition: all ease 1.5s; opacity: 0; transform: scale(0.8); }
.up04 { transition: all ease 2s; opacity: 0; transform: scale(0.8); }
.up05 { transition: all ease 2.5s; opacity: 0; transform: scale(0.8);}


.procedureInner p {
	color: #555555;
	margin-bottom: 10px;
}

/* 국민내일배움카드제도 - 진행절차 끝 */


/* 교육이용안내 시작 */
.identityList ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 30px;

	margin-bottom: 30px;
}

.identityList ul li {
	position: relative;
}

.identityList ul li::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-color: #ffe6a1;
	/* background-color: #b4fa94; */
	z-index: -1;
}

.fadedown01 {
	opacity: 0;
	transition-delay: 0.35s;
	transition-duration: 2s;
	transform: translateY(-30px);
}

.fadedown02 {
	opacity: 0;
	transition-delay: 0.55s;
	transition-duration: 1.8s;
	transform: translateY(-30px);
}

.fadedown03 {
	opacity: 0;
	transition-delay: 0.85s;
	transition-duration: 1.8s;
	transform: translateY(-30px);
}

.identityArea01 h2 {
	margin-bottom: 30px;
}

.identityArea01 p {
	color: #555555;
	margin-bottom: 5px;
}

.motpArea { display: flex; flex-direction: column; justify-content: center; align-items: center; }

.motpArea p.pointList { margin: 0 auto; }

.motpArea img {	margin-bottom: 30px; animation: shake 3s linear infinite; }


@keyframes shake {
	5% {
		transform: translateY(-3px)
	}

	10%,
	20%,
	30%,
	40% {
		transform: translateY(-5px) rotate(2deg)
	}

	15%,
	25%,
	35%,
	45% {
		transform: translateY(-5px) rotate(-2deg)
	}

	50%,
	100% {
		transform: translateY(0px)
	}
}


.identityArea02 {
	color: #fff;
	background-color: #256ea8;
}

.identityArea02 h2 {
	margin-bottom: 20px;
}

.identityContent ul {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 100px;
}

.identityContent ul li {
	text-align: center;
}

.identityContent ul li img { max-width: 230px; margin-bottom: 20px; }

.identityContent ul li h3 {
	font-size: 22px;
}

.identityContentH ul li h3 {
	height: 178px;
}

.identityContent ul li h3 span {
	font-weight: 500;
	font-size: 20px;
}

.identity02 .progress {
	box-shadow: 0px 4px 10px #003660;
}

.progress {
	width: 230px;
	height: 230px;
	border-radius: 100%;
	margin-bottom: 20px;
}

.percentage {
	text-anchor: middle;
	fill: #73c7f3;
	font-size: 50px;
	font-weight: bold;
}

.subtext {
	text-anchor: middle;
	fill: #73c7f3;
	font-size: 30px;
	font-family: sans-serif;
	font-weight: bold;
}

.clock {
	font-size: 200px;
	/* margin-bottom: 10px; */
	padding-bottom: 45px;
}

.clock::after {
	display: block;
	content: '🕛';
	animation-name: clock;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes clock {
	8.333% {
		content: '🕐';
	}

	16.666% {
		content: '🕑';
	}

	25% {
		content: '🕒';
	}

	33.333% {
		content: '🕓';
	}

	41.666% {
		content: '🕔';
	}

	50% {
		content: '🕕';
	}

	58.333% {
		content: '🕖';
	}

	66.666% {
		content: '🕗';
	}

	75% {
		content: '🕘 ';
	}

	83.333% {
		content: '🕙';
	}

	91.666% {
		content: '🕚';
	}
}

.identity01 {
	opacity: 0;
	transition-delay: 0.35s;
	transition-duration: 1.8s;
	transform: scale(0.8);
}

.identity02 {
	opacity: 0;
	transition-delay: 0.7s;
	transition-duration: 1.8s;
	transform: scale(0.8);
}

.identity03 {
	opacity: 0;
	transition-delay: 0.95s;
	transition-duration: 1.8s;
	transform: scale(0.8);
}

.windowArea {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	gap: 30px;

	margin-bottom: 100px;
}

.windowArea img {
	max-width: 380px;
}

.windowArea ul li h3 { margin-bottom: 30px; font-size: 22px; font-weight: 600; color: #555; }

.windowArea ul li h3 span {
	font-size: 26px;
	color: #0077d5;
}

.windowArea ul li p {
	font-size: 18px;
	margin-bottom: 5px;
}

.fadeInLeft04 {	opacity: 0;	transition-delay: 0.66s; transition-duration: 2s; transform: translate3d(-30px, 0, 0); }

.fadeInLeft05 {
	opacity: 0;
	transition-delay: 0.84s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);

}

.pcEduArea {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	gap: 30px;
}

.pcEduArea ul li h3 span {
	font-size: 26px;
	color: #0077d5;
}


.standardArea {
	background-color: #f4f4f4;
}

.bar-container {
	position: relative;
	background-color: #cccccc;
	height: 42px;
}

.progress-title {
	position: relative;
	padding-left: 10px;
	font-size: 26px;
	margin-bottom: 8px;
}

.progress-title02 {
	position: relative;
	padding-left: 10px;
	font-size: 26px;
	margin-bottom: 8px;
}

.progress-percentage {
	position: absolute;
	left: 20px;
	top: 3px;
	color: #fff;
	font-size: 22px;
}

.progressBox {
	margin-bottom: 30px;
}

.progress-bar {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	width: 100%;
	height: 42px;
	background-color: transparent;
	animation: progress-animation 1s ease-in forwards;
}

.progress-bar::-webkit-progress-bar {
	background-color: transparent;
}

.progress-title::after {
	content: attr(data-value) "% 이상";
	position: absolute;
	right: 5px;
}

.progress-title02::after {
	content: attr(data-value) "점 이상";
	position: absolute;
	right: 5px;
}

.round .progress-bar,
.round .bar-container {
	border-radius: 50px;
}

.round .progress-bar::-webkit-progress-bar {
	border-radius: 50px;
}

.round .progress-bar::-webkit-progress-value {
	border-radius: 50px;
}

.round .progress-bar::-moz-progress-bar {
	border-radius: 50px;
}

.gradient-color .progress-bar {
	color: linear-gradient(90deg, #00a6d8, #007fd3);
}

.gradient-color .progress-bar::-webkit-progress-value {
	background-image: linear-gradient(90deg, #00a6d8, #007fd3);
}

.gradient-color .progress-bar::-moz-progress-bar {
	background-image: linear-gradient(90deg, #00a6d8, #007fd3);
}

.test_obj10 {
	position: relative;
	opacity: 0;
	transition-delay: 0.28s;
	transition-duration: 2s;
	transform: translate3d(0, 70%, 0);
}

.test_obj11 {
	position: relative;
	opacity: 0;
	transition-delay: 0.35s;
	transition-duration: 2s;
	transform: translate3d(0, 70%, 0);

	margin-bottom: 150px;
}

.titlePoint {
	position: relative;
	z-index: 0;
}

.titlePoint::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-color: #ffe6a1;
	z-index: -1;
}

.testList {
	display: flex;
	justify-content: space-between;
	text-align: center;
	margin-bottom: 150px;
}

.testList p {
	color: #555;
}

.testList .progress {
	box-shadow: 0px 4px 10px #a5a5a5;
}



.numberlist ol li {
	position: relative;
	display: block;
	padding: 2px 30px 2px 60px;
	background: #FFF;
	text-decoration: none;
	border-radius: 50px;
	height: 50px;
	line-height: 50px;
	box-shadow: 0px 4px 10px #a5a5a5;
	transition-duration: 1s;
	cursor: default;
}

.numberlist ol li:not(:last-of-type) {
	margin-bottom: 20px;
}

.numberlist ol li:hover {
	background: #256ea8;
	color: #fff;
	text-decoration: none;
}

.numberlist ol li:before {
	position: absolute;
	left: 0;
	top: 0;
	height: 50px;
	width: 50px;
	line-height: 35px;
	border: 7px solid #fff;
	text-align: center;
	font-weight: bold;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	color: #ffffff;
}

.numberlist ol li:first-of-type::before {
	content: '1';
	background: #73c7f3;
}

.numberlist ol li:nth-of-type(2)::before {
	content: '2';
	background: #56b7eb;
}

.numberlist ol li:nth-of-type(3)::before {
	content: '3';
	background: #42aae2;
}

.numberlist ol li:nth-of-type(4)::before {
	content: '4';
	background: #389ed4;
}

.numberlist ol li:nth-of-type(5)::before {
	content: '5';
	background: #2390ca;
}


.reassessmentArea {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 30px;

	margin-bottom: 100px;
}

.reassessmentArea div h2,
.retakeArea div h2 {
	font-size: 36px;
	margin-bottom: 20px;
}

.reassessmentArea div p,
.retakeArea div p {
	margin-bottom: 10px;
	color: #555;
}

.retakeArea {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 30px;

	text-align: right;
}

.retakeArea h3 {
	margin-top: 30px;
	margin-bottom: 10px;
}

.retakeList {
	font-size: 18px;
	color: #555;
}

.retakeList span {
	position: relative;
	padding-left: 24px;
	line-height: 30px;
	color: #f99725 !important;
	font-size: 18px;

	margin-left: 20px;
}

.retakeList span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 22px;
	background-image: url('../../img/sub/checkIcon01.png');
	background-size: cover;
}

.fadeInLeft06 {
	opacity: 0;
	transition-delay: 1s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);

}



.completionCheckArea {
	color: #fff;
	background-color: #3abee5;
}

.completionCheckArea h2.contentTitle {
	margin-bottom: 30px;
}

.completionCheckArea .contentBox > p {
	text-align: center;
	margin-bottom: 70px;
}

.completionCheckInner {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;

	margin-bottom: 120px;
}

.noticeBox h3 {
	margin-bottom: 10px;
    font-weight: 800;
}

.noticeBox h3 span {
	position: relative;
	z-index: 0;
}

.noticeBox h3 span::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-color: #005fb0;
	z-index: -1;
}

.noticeBox p.pointList02 {
	margin: 0 auto;
	width: 800px;
	position: relative;
	padding-left: 26px;
	line-height: 30px;
	color: #fffa65 !important;
	font-size: 18px;
}

p.pointList02:before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 20px;
	height: 22px;
	background-image: url('../../img/sub/checkIcon02.png');
	background-size: cover;
}


.reviewList ul {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 70px;
	text-align: center;
}

.reviewList ul li img {
	margin-bottom: 20px;
}

.penaltyArea h2 {
	margin-bottom: 30px;
}

.penaltyArea p:not(.pointList) {
	text-align: center;
	color: #555555;
	margin-bottom: 5px;
}
.penaltyArea div { text-align: center; }

.penaltyTable {
	width: 100%;
	border-collapse: collapse;
	margin: 30px 0 20px 0;
	line-height: 28px;
	text-align: center;
}

.penaltyTable th,
.penaltyTable td {
	padding: 20px;
	background-color: #eeeeee;
    text-align: center;
}

.penaltyTable th:not(.tableBorderRL) {
	border: 2px solid #fff;
}

.penaltyTable td {
	border: 2px solid #fff;
}

.penaltyTableBg {
	background-color: #256ea8 !important;
	color: #fff;
}

.penaltyTable th:not(.penaltyTableBg) {
	color: #256ea8;
	font-size: 22px;
}

.penaltyTableBg td {
	color: #fff;
	border-right: 1px solid #fff;
}

.tableBorderPoint {
	border: 5px solid #004c8a !important;
	box-shadow: 0px 3px 5px #303030;
}

.remoteProcedure ul {
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	align-items: center;
	gap: 50px;

	text-align: center;
	margin-top: 70px;
}

.remoteProcedure ul li:first-of-type {
	min-width: 300px;
}

.remoteProcedure ul li img {
	margin-bottom: 20px;
	vertical-align: top;
}

.remoteProcedure ul li h3 {
	text-align: center;
	font-size: 22px;
}



.dataArea {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.dataArea ul li:not(:last-of-type) {
	margin-bottom: 20px;
}

.dataArea ul li h3 span {
	position: relative;
}

.dataArea ul li h3 span::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-color: #ffe6a1;
	z-index: -1;
}

.satisfactionArea {
	background-color: #f4f4f4;
}

.satisfactionArea .dataArea {
	text-align: right;
}

/* 교육이용안내 끝*/


/* 직업훈련생계비대부사업 시작 */
.conditionBgArea {
	background-color: #f7fbff;
}

.conditionBgArea02 {
	background-color: #f4f4f4;
}

.conditionArea ul li h3 {
	display: inline-block;
	position: relative;
	font-size: 22px;
	line-height: 22px;
	margin-bottom: 18px;
}

.conditionArea ul li h3::after {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 30px;
	background: #256ea8;
	right: -12px;
	top: 0;
}

.conditionArea ul li ol {
	margin: 20px 0;
}

.conditionArea ul li ol li {
	background-color: #fff;
	padding: 12px 20px;
	border-radius: 10px;
	box-shadow: 0px 3px 8px #d4d4d4;
}

.conditionBgArea ol li {
	box-shadow: 0px 3px 8px #c7d9eb !important;
}

.conditionArea ul li ol li:not(:last-of-type) {
	margin-bottom: 20px;
}

p.pointList03 {
	position: relative;
	padding-left: 26px;
	line-height: 30px;
	color: #fff;
	font-size: 18px;
	color: #000 !important;
}

p.pointList03:before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 20px;
	height: 22px;
	background-image: url('../../img/sub/checkIcon03.png');
	background-size: cover;
}

p.pointList03 span {
	font-weight: 600;
	color: #256ea8 !important;
}

.conditionArea ul li p {
	color: #555;
}

.conditionArea ul > li:not(:last-of-type) {
	margin-bottom: 60px;
}

.conditionArea .buttonArea {
	margin: 0 auto;
	text-align: center;
}

.conditionArea .buttonArea button {
	border-radius: 50px;
	color: #256ea8;
	padding: 8px 40px;
	border: 2px solid #256ea8;
	font-size: 20px;
	font-weight: 500;
	background-color: #fff;
	transition: all ease 0.35s;
	margin-top: 70px;
}

.conditionArea button:hover {
	color: #fff;
	background-color: #256ea8;
}

.conditionArea a {
	color: #256ea8;
}

.conditionArea a:hover {
	color: #00a0e3;
}

.conditionProgress {
	margin-top: 140px;
	margin-bottom: 70px;
	height: 250px;
}


.progress_inner,
.progress_inner__step:before {
	position: absolute;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	margin: auto;
}

.progress_inner__bar--set,
.progress_inner__bar {
	height: 6px;
	left: 10%;
	background: repeating-linear-gradient(45deg, #1ea4ec, #1ea4ec 4px, #1f8bc5 4px, #1f8bc5 10px);
	transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
	border-radius: 6px;
	width: 0;
	position: relative;
	z-index: -1;
}

.progress_inner__step:before {
	width: 35px;
	height: 35px;
	color: #70afd0;
	background: white;
	line-height: 35px;
	border: 3px solid #a6cde2;
	top: 3px;
	border-radius: 100%;
	transition: all 0.4s;
	cursor: pointer;
	pointer-events: none;
}

.progress_inner__step {
	width: 25%;
	font-size: 16px;
	transition: all 0.4s;
	float: left;
	text-align: center;
	position: relative;
}

.progress_inner__step label {
	font-size: 18px;
	padding-top: 50px;
	top: -20px;
	display: block;
	position: relative;
	cursor: pointer;
}

.progress_inner__step:hover {
	color: #cecece;
}

.progress_inner__step:hover:before {
	color: white;
	background: #1ea4ec;
}

.progress_inner {
	width: 815px;
}

.progress_inner__step:hover:before {
	color: white;
	background: #1ea4ec;
}

.progress_inner #step-5:checked + div {
	width: 100%;
}

.progress_inner #step-5:checked + div + div + div > .tab:nth-of-type(5) {
	opacity: 1;
	top: 0;
}

.progress_inner #step-5:checked + div + div + div + div {
	right: 10%;
}

.progress_inner #step-4:checked + input + div {
	width: 80%;
}

.progress_inner #step-4:checked + input + div + div + div > .tab:nth-of-type(4) {
	opacity: 1;
	top: 0;
}

.progress_inner #step-4:checked + input + div + div + div + div {
	right: 30%;
}

.progress_inner #step-3:checked + input + input + div {
	width: 50%;
}

.progress_inner #step-3:checked + input + input + div + div + div > .tab:nth-of-type(3) {
	opacity: 1;
	top: 0;
}

.progress_inner #step-3:checked + input + input + div + div + div + div {
	right: 50%;
}

.progress_inner #step-2:checked + input + input + input + div {
	width: 25%;
}

.progress_inner #step-2:checked + input + input + input + div + div + div > .tab:nth-of-type(2) {
	opacity: 1;
	top: 0;
}

.progress_inner #step-2:checked + input + input + input + div + div + div + div {
	right: 70%;
}

.progress_inner #step-1:checked + input + input + input + input + div {
	width: 0%;
}

.progress_inner #step-1:checked + input + input + input + input + div + div + div > .tab:nth-of-type(1) {
	opacity: 1;
	top: 0;
}

.progress_inner #step-1:checked + input + input + input + input + div + div + div + div {
	right: 90%;
}

.progress_inner__step:nth-of-type(1):before {
	content: "1";
}

.progress_inner__step:nth-of-type(2):before {
	content: "2";
}

.progress_inner__step:nth-of-type(3):before {
	content: "3";
}

.progress_inner__step:nth-of-type(4):before {
	content: "4";
}

.progress_inner__bar--set {
	width: 80%;
	top: -6px;
	background: #70afd0;
	position: relative;
	z-index: -2;
}

.progress_inner__tabs .tab {
	opacity: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 40px;
	text-align: center;
	margin-top: 120px;
	box-shadow: 0px 3px 8px #c7d9eb;
	padding: 30px;
	background: white;
	border-radius: 10px;
	transition: all 0.2s;
	min-width: 763px;
	min-height: 250px;


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

.progress_inner__tabs .tab ul {
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 0;
	vertical-align: top;
	gap: 40px;
}

.progress_inner__tabs .tab h1 {
	font-size: 26px;
	display: block;
	margin-bottom: 20px;
	width: 100%;
}

.progress_inner__tabs .tab p {
	font-weight: 400;
	opacity: 0.8;
}


.progress_inner input[type=radio] {
	display: none;
}




.steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.step {
	position: relative;
	z-index: -1;
	padding: 10px;
	width: 280px;
	height: 140px;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0px 3px 8px #d4d4d4;
	border: 5px solid #a6cde2;
	padding-top: 25px;
}

.step::before {
	position: absolute;
	width: 40px;
	height: 40px;
	left: -20px;
	top: -20px;
	color: #ffffff;
	background: #256ea8;
	line-height: 40px;
	border: 3px solid #a6cde2;
	border-radius: 100%;
}

.step01::before {
	content: '01';
}

.step02::before {
	content: '02';
}

.step03::before {
	content: '03';
}

.step04::before {
	content: '04';
}

.step05::before {
	content: '05';
}

.step06::before {
	content: '06';
}

.step07::before {
	content: '07';
}

.step08::before {
	content: '08';
}

.step09::before {
	content: '09';
}

.step10::before {
	content: '10';
}

.step11::before {
	content: '11';
}

.step h3 {
	color: #256ea8;
	font-size: 20px;
	width: 100%;

}

.step h3 span {
	font-size: 16px;
	color: #909090;
}

.step p {
	font-size: 16px;
}

.step-color01 {
	animation: cambioColor 1s 2s linear forwards;
	-webkit-animation: cambioColor 1s 2s linear;
}

.step-color02 {
	animation: cambioColor 1s 4s linear;
	-webkit-animation: cambioColor 1s 4s linear;
}

.step-color03 {
	animation: cambioColor 1s linear;
	-webkit-animation: cambioColor 1s linear;
}

.step-color04 {
	animation: cambioColor 1s linear;
	-webkit-animation: cambioColor 1s linear;
}

@-webkit-keyframes cambioColor {
	0% {
		background-color: #f4f4f4;
		background-position-x: 99%;
		background-color: #0075FF;
		animation-fill-mode: forwards;
	}

	100% {
		background-position-x: 0%;
		background-image: linear-gradient(to right, #0075FF 50%, #f4f4f4 50%);
		background-color: #0075FF;
		animation-fill-mode: forwards;
	}
}

@keyframes cambioColor {
	0% {
		background-color: #f4f4f4;
		background-position-x: 99%;
		animation-fill-mode: forwards;
	}

	100% {
		background-color: #0075FF;
		background-image: linear-gradient(to right, #0075FF 50%, #f4f4f4 50%);
		background-position-x: 0%;
		animation-fill-mode: forwards;
	}
}



.fadeInLeft07 {
	opacity: 0;
	transition-delay: 0.84s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);

}

.fadeInLeft08 {
	opacity: 0;
	transition-delay: 1.02s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);

}

.fadeInLeft09 {
	opacity: 0;
	transition-delay: 1.2s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);

}

.fadeInLeft10 {
	opacity: 0;
	transition-delay: 1.38s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);

}

.fadeInLeft11 {
	opacity: 0;
	transition-delay: 1.56s;
	transition-duration: 2s;
	transform: translate3d(-30px, 0, 0);

}

/* 직업훈련생계비대부사업 끝 */


/* 국민취업지원제도 시작 */
.employmentArea ul {
	text-align: center;

	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.employmentArea ul li {
	min-width: 300px;
}

.employmentArea ul li img {
	margin-bottom: 30px;
}


.operatingArea {
	background-color: #256ea8;
	color: #ffffff;
}

.operating01 {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 30px;
	margin-bottom: 70px;
}

.operating01 h3,
.operating02 h3 {
	margin-bottom: 20px;
}

.operating02 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 70px;
}



.categoryArea ul {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 40px;
}

.categoryArea ul li {
	position: relative;
	z-index: -1;
	text-align: center;
	flex-basis: 500px;
	padding: 40px 20px 30px;
	border-radius: 10px;
	border: 3px solid #ddd;
	box-shadow: 0px 0px 8px #cbcbcb;
}

.categoryArea ul li h3 {
	margin-bottom: 20px;
}

.categoryArea ul li h3 span {
	color: #0077d5;
}

.categoryArea ul li p {
	font-size: 18px;
	margin-bottom: 15px;
}

.category01::before,
.category02::before {
	position: absolute;
	top: -20px;
	left: 50%;
	transform: translateX(-50%);

	background-color: #256ea8;
	color: #fff;
	box-shadow: 0px 0px 8px #cbcbcb;
	border: 3px solid #004c8a;
	border-radius: 50px;
	padding: 5px 40px;
}

.category01 p.pointList:before {
	left: 15px;
}

.category01::before {
	content: 'I유형';
}

.category02::before {
	content: 'II유형';
}

.categoryArea ul li p {
	color: #555;
}


.employmentProcedureArea {
	background-color: #f4f4f4;
}

.employmentProcedureInner div ul li h3 {
	margin-bottom: 10px;
	font-size: 28px;
}

.employmentProcedureInner div ul li p {
	line-height: 32px;
}

.employmentProcedureInner div {
	position: relative;
	color: #fff;
	padding: 30px 50px;
	border-radius: 20px;
}

.employmentProcedureInner div::before {
	position: absolute;
	content: "";
	left: -26px;
	top: 35px;
	display: block;
	width: 59px;
	height: 70px;
	background-size: cover;
}

.employmentProcedureInner div:not(:last-of-type) {
	margin-bottom: 70px;
}

.employmentProcedureInner div:first-of-type {
	background-color: #256ea8;
}

.employmentProcedureInner div:first-of-type::before {
	background-image: url('../../img/sub/num01.png');
}

.employmentProcedureInner div:nth-of-type(2) {
	background-color: #4e84d6;
}

.employmentProcedureInner div:nth-of-type(2)::before {
	background-image: url('../../img/sub/num02.png');
}

.employmentProcedureInner div:nth-of-type(3) {
	background-color: #4776bd;
}

.employmentProcedureInner div:nth-of-type(3)::before {
	background-image: url('../../img/sub/num03.png');
}

.employmentProcedureInner div:nth-of-type(4) {
	background-color: #52a9db;
}

.employmentProcedureInner div:nth-of-type(4)::before {
	background-image: url('../../img/sub/num04.png');
}

.employmentProcedureInner div:nth-of-type(5) {
	background-color: #5dc6cf;
}

.employmentProcedureInner div:nth-of-type(5)::before {
	background-image: url('../../img/sub/num05.png');
}

.employmentProcedureInner div:nth-of-type(6) {
	background-color: #33955f;
}

.employmentProcedureInner div:nth-of-type(6)::before {
	background-image: url('../../img/sub/num06.png');
}

.employmentProcedureInner div:nth-of-type(7) {
	background-color: #aad35f;
}

.employmentProcedureInner div:nth-of-type(7)::before {
	background-image: url('../../img/sub/num07.png');
}

.up06 {
	transition: all ease 2.5s;
	opacity: 0;
	transform: scale(0.8);
}

.up07 {
	transition: all ease 2.5s;
	opacity: 0;
	transform: scale(0.8);
}

/* 국민취업지원제도 끝 */


/* 부정행위금지안내 시작 */
.cheatingArea01 h2 { margin-bottom: 30px; }
.cheatingArea01 div { text-align: center; }

.cheatingArea01 ul { display: flex; justify-content: center; align-items: flex-start; flex-wrap: nowrap; gap: 140px; margin-bottom: 40px; text-align: center; }

.cheatingArea01 p {
	text-align: center;
	color: #555555;
	margin-bottom: 30px;
}

.cheatingArea01 ul li img {
	margin-bottom: 10px;
}

.cheatingArea01 ul li h3 {
	margin-bottom: 5px;
}

.cheatingArea01 ul li p {
	position: relative;
}

.cheatingArea01 ul li p::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-color: #ffe6a1;
	/* background-color: #b4fa94; */
	z-index: -1;
}


.cheatingArea02 {
	background-color: #256ea8;
	color: #ffffff;
}

.cheatingArea02 h2 {
	margin-bottom: 30px;
}

.cheatingArea02 p {
	text-align: center;
	margin-bottom: 40px;
}

.cheatingArea02 div div.cheatingArea02Inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.cheatingArea02 ul li {
	position: relative;
	padding: 5px 30px 5px 25px;
	width: 100%;
	border: 2px solid #ffb015;
	border-radius: 15px;
	background-color: #fff;
	line-height: 40px;
	color: #256ea8;
	font-size: 18px;
	min-width: 866px;
}

.cheatingArea02 ul li:not(:last-of-type) {
	margin-bottom: 20px;
}

.cheatingArea02 ul li::before {
	position: absolute;
	content: '';
	background-image: url('../../img/sub/chatingCheck01.png');
	background-repeat: no-repeat;
	left: -15px;
	top: -15px;
	width: 35px;
	height: 35px;
}


.cheatingArea03 h2 {
	margin-bottom: 30px;
}

.cheatingArea03 p {
	text-align: center;
	margin-bottom: 40px;
}

.cheatingArea03Inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.cheatingArea03 ul li {
	position: relative;
	padding: 5px 30px 5px 25px;
	width: 100%;
	border: 2px solid #ffb015;
	border-radius: 15px;
	background-color: #fff;
	line-height: 40px;
	font-size: 18px;
}

.cheatingArea03 ul li:not(:last-of-type) {
	margin-bottom: 20px;
}

.cheatingArea03 ul li::before {
	position: absolute;
	content: '';
	background-image: url('../../img/sub/chatingCheck01.png');
	background-repeat: no-repeat;
	left: -15px;
	top: -15px;
	width: 35px;
	height: 35px;
}

.cheatingArea04 {
	background-color: #f4f4f4;
}

.cheatingArea04 {
	text-align: center;
}

.cheatingArea04 ul {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 140px;
}

.cheatingArea04 ul li {
	min-width: 375px;
}

.cheatingArea04 ul li img {
	margin-bottom: 20px;
}



.cheatingArea05 h2 {
	margin-bottom: 30px;
}

.cheatingArea05 p {
	text-align: center;
	margin-bottom: 40px;
}

.cheatingArea05Inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.cheatingArea05 ul li {
	position: relative;
	padding: 5px 30px 5px 25px;
	width: 100%;
	border: 2px solid #376edc;
	border-radius: 15px;
	background-color: #fff;
	line-height: 40px;
	font-size: 18px;
	min-width: 866px;
}

.cheatingArea05 ul li:not(:last-of-type) {
	margin-bottom: 20px;
}

.cheatingArea05 ul li::before {
	position: absolute;
	content: '';
	background-image: url('../../img/sub/chatingCheck02.png');
	background-repeat: no-repeat;
	left: -15px;
	top: -15px;
	width: 35px;
	height: 35px;
}
/* 부정행위금지안내 끝 */

/* 학습가이드 탭 시작 */
/* 상단 tab 시작 */
.top_bar_fix {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	z-index: 10;
	background-color: #fff;
}

.top_fix {
	border-bottom: 1px solid #DFE0E2;
	
}

.tab-menu ul {
	text-align: center;
	display: flex;
	justify-content: space-between;
}

.eduTabStyle ul li {
	flex-basis: 20%;
	display: inline-block;
}

.digitalTabStyle ul li {
	flex-basis: 50%;
	display: inline-block;
}

.introduceTabStyle ul li {
	flex-basis: 14%;
	display: inline-block;
}

.totalTabStyle ul li {
	flex-basis: 25%;
	display: inline-block;
	border-bottom: 1px solid #ddd;
}

.tab-menu ul li a {
	color: #979797;
	display: flex;
	width: 100%;
	height: 60px;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 17px;
	font-weight: 400;
}

.eduTabStyle ul li a.active-a {
	color: #7ec952;
	font-weight: 600;
	border-bottom: 4px solid #7ec952;
}

.digitalTabStyle ul li a.active-a {
	color: #000D77;
	font-weight: 600;
	border-bottom: 4px solid #000D77;
}

.introduceTabStyle ul li a.active-a {
	color: #008087;
	font-weight: 600;
	border-bottom: 4px solid #008087;
}

.totalTabStyle ul li a.active-a {
	color: #256ea8;
	font-weight: 600;
	border-bottom: 4px solid #256ea8;
}

.tab {
	display: none;
}

.tab-active {
	display: block;
}


/* 상단 tab 끝 */


/* tabInner 시작 */
.tab-menu02 ul {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f4f4f4;
	border-radius: 50px;
	padding: 12px 20px;
	
}

.tab-menu02 ul li {
	display: inline-block;
}

.flex01 {
	width: 1000px;
	margin: 0 auto;
}

.flex01 li {
	flex-basis: 20%;
}

.flex02 {
	width: 1220px;
	margin: 0 auto 50px auto;
}

.flex02 li {
	flex-basis: 14.3%;
}

.flex03 {
	width: 800px;
	margin: 0 auto 50px auto;
}

.flex03 li {
	flex-basis: 25%;
}

.tab-menu02 ul li:not(:last-of-type) {
	border-right: 1px solid #cacaca;
}

.tab-menu02 ul li a {
	color: #979797;
	text-align: center;
	font-size: 18px;
}

.tab-menu02 ul li a.active-a02 {
	color: #000;
	font-weight: 600;
}

.tab02 {
	display: none;
}

.tab-active02 {
	display: block;
}

.tab10 {
	display: none;
}

.tab-active10 {
	display: block;
}

.tab20 {
	display: none;
}

.tab-active20 {
	display: block;
}

/* tabInner 끝 */



.tabtitleArea {
	text-align: center;
}

.greenPoint {
	position: relative;
	font-size: 22px;
	line-height: 22px;
	margin-bottom: 18px;
	display: inline-block;
}

.greenPoint::after {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 30px;
	background: #7ec952;
	right: -12px;
	top: 0;
}

.bluePoint {
	position: relative;
	font-size: 22px;
	line-height: 22px;
	margin-bottom: 18px;
	display: inline-block;
}

.bluePoint::after {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 30px;
	background: #0684B3;
	right: -12px;
	top: 0;
}

/* 학습가이드 탭 끝 */

/* 결제창 이전 시작 */
.paymentWrap {
	padding-top: 0;
}

.paymentArea {
	margin-bottom: 70px;
}

.paymentArea h3 {
	font-size: 22px;
	margin-bottom: 15px;
}

.paymentArea ul {
	padding: 30px 0;
	border-top: 2px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.paymentArea ul li {
	display: flex;
	align-items: center;
}

.paymentArea ul li:not(:last-of-type) {
	margin-bottom: 35px;
}

.paymentArea ul li h4 {
	min-width: 120px;
	font-size: 16px;
}

.paymentArea ul li p {
	font-size: 16px;
}

.paymentArea input[type="checkbox"],
.paymentArea input[type="radio"] {
	min-width: 20px;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	accent-color: #256ea8;
}

.paymentArea input[type="checkbox"] {
	margin-right: 10px;
}

.paymentArea input[type="radio"] {
	margin-right: 2px;
}

.paymentArea label {
	font-size: 16px;
}

.paymentArea label.redColor,
.paymentArea p.redColor {
	color: #f73400;

	font-weight: 500;
}

.paymentPoint {
	position: relative;
}

.paymentPoint::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-color: #ffe6a1;
	z-index: -1;
}

.paymentArea input {
	padding: 10px;
	
	font-size: 16px;
	border: 1px solid #cecece;
	border-radius: 5px;
	color: #555555;
}

.paymentArea select {
	font-size: 15px;
	height: 46px;
	border-radius: 5px;
	padding: 0px 10px;
}

/* 결제창 이전 끝 */

/* 국민내일배움카드 - 훈련과정 소개 및 수강신청 시작 */
.lectureSearchArea {
	border: 2px solid #256ea8;
	margin-bottom: 60px;
}

.lectureSearchTitle {
	width: 100%;
	background-color: #256ea8;
	padding: 6px 20px 8px 20px;
	

}

.lectureSearchTitle h2 {
	color: #ffffff;
	font-size: 20px;
	font-weight: 500;
}

.lectureSearchForm {
	padding: 30px 0px;
	
}

.lectureSearchBox {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	margin-bottom: 20px;
	margin-left: 20px;
}

.lectureSearchForm {
	background-color: #fff;
}

.lectureSearchForm .innerTitleWrap {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;

	min-width: 145px;
}

.lectureSearchForm .innerTitleWrap div {
	line-height: 22px;
}

.lectureSearchForm .innerTitleWrap h3 {
	font-size: 18px;
	font-weight: 500;
	padding-bottom: 4px;
}

.lectureOption {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
}

.lectureOption li label {
	text-align: center;
	display: inline-block;
	width: 90px;
	border: 1px solid #ddd;
	padding: 8px 10px;
	background-color: #fff;
	font-size: 15px;
}

.lectureOption li input[type="radio"]:checked + label {
	background-color: #555555;
	color: #fff;
}

.lectureOption li input[type="text"]#lectureTitle {
	border: 1px solid #555555;
	height: 38px;
	padding: 0px 10px;
	
	width: 510px;
}


.lectureSearchBtn {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 30px;

	margin-top: 30px;
}

.lectureSearchBtn button {
	border-radius: 5px;
	padding: 8px 0px;
	width: 200px;
	font-size: 16px;
	font-weight: 500;
}

.lectureSearchBtn button img {
	margin-right: 5px;
	width: auto;
	height: 24px;
}

.searchBtn01 {
	background-color: #fff;
	border: 2px solid #256ea8;
	color: #256ea8;
}

.searchBtn01:hover {
	background-color: #fff;
	border: 2px solid #00a0e3;
	color: #00a0e3;
}

.searchBtn02 {
	background-color: #256ea8;
	border: 2px solid #256ea8;
	color: #fff;
}

.searchBtn02:hover {
	background-color: #00a0e3;
	border: 2px solid #00a0e3;

}

.hoverImg {
	display: none;
}

.searchBtn01:hover .hoverImg {
	display: inline-block;
}

.searchBtn01:hover .showImg {
	display: none;
}


.choiceList ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	margin-bottom: 10px;
	gap: 20px;
}

.choiceList ul li label {
	font-size: 16px;
	padding-left: 22px;
	color: #555555;
}

.choiceList li input[type="radio"]:checked + label {
	background: url('../../img/edu/choiceCheck.png')no-repeat 0px 5px;
	background-size: 20px;
	font-weight: 500;
}


.introduceList {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 25px;
	border: 2px solid #d5dfe8;
	border-radius: 12px;
	padding: 30px;
	
	background-color: #fff;
}

.introduceList:not(:last-of-type) {
	margin-bottom: 40px;
}

.introduceList:hover {
	border: 2px solid #000;
	box-shadow: 0px 4px 12px #aabbcb;
	transition: all linear 0.4s;
	cursor: pointer;
}

.introduceContent {
	width: 79%;
}

.introduceListTop {
	display: flex;
	flex-wrap: nowrap;
	gap: 15px;
}

.introduceListTop li p.unemployed {
	background-color: #00a0e3;
	color: #fff;
	padding: 6px 15px;
	
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.introduceListTop li p.employee {
	background-color: #6fbf4a;
	color: #fff;
	padding: 6px 15px;
	
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.introduceListTop li p.mobile {
	background-color: #2a26d6;
	color: #fff;
	padding: 6px 15px;
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.introduceListTop li p.pc {
	background-color: #a8a8a8;
	color: #fff;
	padding: 6px 15px;
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.introduceListTop li p.book {
	background-color: #ef8d00;
	color: #fff;
	padding: 6px 15px;
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.introduceListTop li p.notbook {
	background-color: #555555;
	color: #fff;
	padding: 6px 15px;
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.introduceListTop li p.eachBook {
	background-color: #e6da07e6;
	color: #fff;
	padding: 6px 15px;
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.introduceContent li h3 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;

	font-size: 24px;
	width: 100%;
	line-height: 55px;
	border-bottom: 2px solid #1c1c1c;
	margin-bottom: 20px;
}

/*240807 수정*/
.introduceInnerBox {
	position: relative;
}

.introduceInnerBox > a {
	position: absolute;
	top: 20px;
	right: 180px;
	z-index: 999;
}

.introduceInner01 {
	margin-bottom: 15px;
}

.introduceInner02 {
	font-size: 20px;
}

.unemployedColor {
	color: #00a0e3;
}

.employeeColor {
	color: #6fbf4a;
}

.introduceInner02 > ul.introduceInner02_1 {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}


.introduceInner02 > ul.introduceInner02_2 {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 10px;
}

.introduceInner02 > ul.introduceInner02_2 li ul {
	display: flex;
	flex-wrap: wrap;
}

.introduceInner02 > ul.introduceInner02_2 li ul li {
	flex-basis: 48%;
	margin-bottom: 5px;
}

.introduceInner02 > ul.introduceInner02_2 li ul li p span {
	color: #555;
	padding-right: 5px;
	min-width: 168px;
	display: inline-block;
}

.introduceInner02 > ul li p.borderTitle01 {
	border: 1px solid #00a0e3;
	min-width: 100px;
	text-align: center;
	font-size: 18px;
}

.introduceInner02 > ul.introduceInner02_1 li p.borderTitle01 {
	padding: 5px 0px;
}

.introduceInner02 > ul.introduceInner02_2 li p.borderTitle01 {
	padding: 18px 0px;
}

.introduceInner02 > ul li p.borderTitle02 {
	border: 1px solid #6fbf4a;
	min-width: 100px;
	text-align: center;
	font-size: 18px;
}

.introduceInner02 > ul.introduceInner02_1 li p.borderTitle02 {
	padding: 5px 0px;
}

.introduceInner02 > ul.introduceInner02_2 li p.borderTitle02 {
	padding: 18px 0px;
}

#booktooltip {
	position: relative;
}

#booktooltip:before {
	content: '학습자가 개별 구매하거나\A 학습자료를 파일 형태로 제공\A *과정 상세페이지 확인 필수';
	white-space: pre;
	font-size: 16px;
	font-weight: 500;
	display: block;
	background: rgba(0, 0, 0, 0.75);
	border: 2px solid #000;
	color: #ffffff;
	padding: 15px;
	position: absolute;
	left: 52%;
	bottom: -100px;
	margin-left: -100px;
	width: 176px;
	letter-spacing: -1px;
	height: 67px;
	border-radius: 10px;
	opacity: 0;
	transition: .25s ease-in-out;
	line-height: 22px;
}

#booktooltip:after {
	content: '';
	display: block;
	position: absolute;
	left: 42%;
	height: 0;
	width: 0;
	bottom: -4px;
	border-bottom: 12px solid rgba(0, 0, 0, 0.8);
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	transition: .25s ease-in-out;
	opacity: 0;
}

#booktooltip:hover:before {
	opacity: 1;
	bottom: -113px;
}

#booktooltip:hover:after {
	opacity: 1;
	bottom: -14px;
}



#booktooltip02 {
	position: relative;
}

#booktooltip02:before {
	content: '학습자가 개별 구매하거나\A 학습자료를 파일 형태로 제공\A *과정 상세페이지 확인 필수';
	white-space: pre;
	font-size: 15.5px;
	font-weight: 500;
	display: block;
	background: rgba(0, 0, 0, 0.75);
	border: 2px solid #000;
	color: #ffffff;
	padding: 15px;
	position: absolute;
	left: 52%;
	bottom: -100px;
	margin-left: -100px;
	width: 176px;
	letter-spacing: -1.01px;
	height: 67px;
	border-radius: 10px;
	opacity: 0;
	transition: .25s ease-in-out;
}

#booktooltip02:after {
	content: '';
	display: block;
	position: absolute;
	left: 42%;
	height: 0;
	width: 0;
	bottom: -5px;
	border-bottom: 12px solid rgba(0, 0, 0, 0.8);
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	transition: .25s ease-in-out;
	opacity: 0;
}

#booktooltip02:hover:before {
	opacity: 1;
	bottom: -114px;
}

#booktooltip02:hover:after {
	opacity: 1;
	bottom: -15px;
}

.th_style {
	width: 9%;
}

/* 국민내일배움카드 - 훈련과정 소개 및 수강신청 끝 */


/* 국민내일배움카드 - 훈련과정 소개 및 수강신청 _ 자세히보기 시작 */
.lectureInfoWrap {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	/*gap: 50px;*/
	gap: 125px;
}

.lectureLeftArea > img {
	width: 512px;
	height: 405px;
	object-fit: cover;
	border-radius: 20px;
	margin-bottom: 20px;
	border: 1px solid #ddd
}

.lectureInfoArrow ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 20px;
}

.lectureInfoArrow ul li {
	flex-basis: 49%;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
}

.lectureInfoArrow ul li:first-of-type {
	border-right: 1px solid #dddddd;
}

.lectureInfoArrow ul li a img {
	margin-right: 5px;
	width: auto;
	height: 35px;
}

.lectureLeftContent {
	margin-bottom: 50px;
}

.lectureLeftContent ul li p {
	font-size: 16px;
}

.lectureLeftContent ul li p span {
	color: #f99725;
	font-weight: 500;
}

.lectureLeftContent ul li:not(:last-of-type) {
	margin-bottom: 5px;
}

/*240807 수정 시작*/
.lectureLeftArea .infoBox {
	height: 384px;
	overflow-y: auto;
}

/*240807 수정 끝*/

.lectureRightArea .introduceListTop {
	margin-bottom: 10px;
}

.lectureRightArea > h3 {
	line-height: 30px;
	width: 580px;
	margin-bottom: 20px;
}

.lectureRightbox {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px 20px;
	margin-bottom: 30px;

	display: flex;
	align-items: flex-start;
}

.lectureRightbox ul {
	padding: 20px 0;
	flex-basis: 48%;
}

.lectureRightbox ul:not(:last-of-type) {
	border-right: 1px solid #ddd;
	margin-right: 20px;
}

.lectureRightbox ul li h4 {
	min-width: 140px;
}


.lectureRightbox ul li p {
	font-size: 16px;
	color: #555555;
}


.lectureRightbox02 {
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 10px 20px;
	margin-bottom: 30px;

}

.lectureRightbox02 > ul {
	padding: 20px 0;
}

.lectureRightbox02 > ul:not(:last-of-type) {
	border-bottom: 1px solid #ddd;
}

.lectureRightbox02 > ul li h3 {
	font-size: 20px;
	margin-bottom: 15px;
}

.lectureRightbox02 > ul li h4 {
	font-size: 18px;
	color: #555555;
	margin-bottom: 10px;
}


.lectureRightbox02 > ul li p {
	font-size: 16px;
	color: #000;
	font-weight: 600;
}


.contributionArea li {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.contributionArea li:not(:last-of-type) {
	margin-bottom: 15px;
}

.contributionArea li p {
	text-align: right;
	color: #555555;
	font-weight: 500;
}

.contributionArea li div label {
	position: relative;
	padding-left: 30px;
	font-size: 16px;
	font-weight: 500;
	color: #555555;

}

.contributionArea li div label::before {
	position: absolute;
	content: '';
	border: 6px solid #dddddd;
	border-radius: 30px;
	width: 8px;
	height: 8px;
	left: 0;
	top: 3px;
}

.contributionArea li div input[type="radio"]:checked + label::before {
	position: absolute;
	content: '';
	border: 6px solid #256ea8;
	border-radius: 30px;
	width: 8px;
	height: 8px;
	left: 0;
	top: 3px;
}

.periodArea {
	width: 100%;
	height: 50px;
	border-radius: 8px;
	padding: 0 10px;
	border: 1px solid #bdbdbd;
}

.totalPrice {
	margin-bottom: 30px;
}

.totalPrice > ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.totalPrice > ul:not(:last-of-type) {
	margin-bottom: 10px;
}

.totalPrice > ul li p {
	font-size: 18px;
	color: #555555;
}

.totalLine {
	border-top: 2px solid #000;
	padding-top: 15px;
}

.totalLine p {
	font-size: 20px !important;
	font-weight: 600;
	color: #000 !important;
}

.totalLine h2 {
	color: #256ea8;
}

.lectureBtnArea {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	margin-bottom: 8px;
}

.lectureBtnArea button {
	width: 49%;
	height: 52px;
	font-size: 17px;
	font-weight: 500;
}

.lectureBtnArea button.lectureLineBtn {
	border: 2px solid #256ea8;
	border-radius: 8px;
	background-color: #fff;
	color: #256ea8;
}

.lectureBtnArea button.lectureLineBtn:hover {
	border: 2px solid #00a0e3;
	border-radius: 8px;
	background-color: #fff;
	color: #00a0e3;
}

.lectureBtnArea button.lectureFillBtn {
	border: 2px solid #256ea8;
	border-radius: 8px;
	background-color: #256ea8;
	color: #fff;
}

.lectureBtnArea button.lectureFillBtn:hover {
	border: 2px solid #00a0e3;
	border-radius: 8px;
	background-color: #00a0e3;
	color: #fff;
}

button.hrdBtn {
	width: 100%;
	height: 52px;
	font-size: 17px;
	font-weight: 500;
	border: 2px solid #ef8d00;
	border-radius: 8px;
	background-color: #ef8d00;
	color: #fff;
}

button.hrdBtn:hover {
	border: 2px solid #fda223;
	border-radius: 8px;
	background-color: #fda223;
	color: #fff;
}


.infoBoxArea {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;

	/*240807 수정*/
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.infoBox {
	flex-basis: 48%;
	border: 1px solid #ddd;
	padding: 20px;
	border-radius: 15px;
}

.infoBox h3 {
	font-size: 16px;
	font-weight: 500;
	display: inline-block;
	color: #fff;
	padding: 5px 15px;
	border-radius: 5px;
	margin-bottom: 10px;
}

.infoBox h3.lectureColor {
	background-color: #00c9b7;
}

.infoBox h3.bookColor {
	background-color: #ef8d00;
}

.infoBox ul li:not(:last-of-type) {
	margin-bottom: 10px;
}

.infoBox ul li p {
	font-size: 16px;
	color: #555555;
}

.infoContentBox {
	height: 280px;
	overflow-y: scroll;

	/*240807 수정*/
	height: auto;
	overflow-y: auto;
}

.padL {
	padding-left: 18px;
}

.infoBookArea {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
}

.infoBookArea ul li h4 {
	font-size: 16px;
}

.lectureInnerWrap div ul li:not(:last-of-type) {
	margin-bottom: 8px;
}

.lectureInnerWrap div ul li p {
	font-size: 16px;
}

.innerBox:not(:last-of-type) {
	margin-bottom: 60px;
}

.innerBox ul:not(:last-of-type) {
	margin-bottom: 20px;
}

.infoTitle {
	position: relative;
	/*z-index: 1;*/
	display: inline-block;
	font-size: 20px;
	margin-bottom: 12px;
}

.infoTitle::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-color: #ffe6a1;
	z-index: -1;
}

.innerBox ul li p {
	color: #555555;
}

.innerBox ul li p span {
	color: #000000;
	font-weight: 500;

}

.completionTable1 {
	width: 100%;
	border-collapse: collapse;
	line-height: 28px;
	border-top: 2px solid #000;
	font-size: 16px;
}

.completionTable1:not(:last-of-type) {
	margin-bottom: 60px;
}

.completionTable1 tr th {
	color: #256ea8;
	background-color: #f4f4f4;
}

.completionTable1 th,
.completionTable1 td {
	padding: 12px;
	border: 1px solid #ddd;

}

.completionTable {
	width: 100%;
	border-collapse: collapse;
	line-height: 28px;
	border-top: 2px solid #000;
	font-size: 16px;
	text-align: center;

}

.completionTable:not(:last-of-type) {
	margin-bottom: 60px;
}

.completionTable tr th {
	color: #256ea8;
	background-color: #f4f4f4;
}

.completionTable th,
.completionTable td {
	padding: 12px;
	border: 1px solid #ddd;

}

.sameWidthTable01 {
	width: 300px;
}

.sameWidthTable02 {
	width: 50%;
}

.sameWidthTable03 {
	width: 15%;
}

.boldStyle {
	font-weight: 600;
}

.professorArea {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 30px;
}

.professorArea > ul > li:not(:last-of-type) {
	margin-bottom: 30px !important;
}


.speacialArea h3 {
	background: url('../../img/edu/special.png')no-repeat left center;
	line-height: 45px;
	color: #fff;
	padding-left: 30px;
	font-size: 20px;
	margin-bottom: 10px;

	/*240807 수정*/
	background: tomato;
	font-size: 16px;
	font-weight: 500;
	display: inline-block;
	color: #fff;
	padding: 5px 15px;
	border-radius: 5px;
	margin-bottom: 10px;
	line-height: inherit;
}

.speacialArea ul li p {
	font-size: 16px;
	background: url('../../img/edu/checkmark.png')no-repeat left center;
	background-size: 26px;
	padding-left: 32px;
	font-weight: 500;
}

.speacialArea ul li {
	border-bottom: 2px solid #ddd;
	padding-bottom: 5px;
}

.speacialArea ul li:not(:last-of-type) {
	margin-bottom: 20px;
}

/* 국민내일배움카드 - 훈련과정 소개 및 수강신청 _ 자세히보기 끝 */



/* 학습가이드 - 국민내일배움카드 시작 */
.eduGuideInner {
	padding-bottom: 70px;
	border-bottom: 1px dashed #d4d4d4;
	margin-bottom: 70px;
}

.blackListArea li {
	background-color: #f8f8f8;
	padding: 12px 20px;
	border-radius: 10px;
	box-shadow: 0px 3px 8px #d4d4d4;
	list-style: none;
}

.blackListArea li:not(:last-of-type) {
	margin-bottom: 20px;
}

.pointList03 {
	position: relative;
	padding-left: 26px;
	line-height: 30px;
	color: #fff;
	font-size: 18px;
	color: #000 !important;
}

.pointList03:before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 20px;
	height: 22px;
	background-image: url('../../img/sub/checkIcon03.png');
	background-size: cover;
}

.greenPointList span {
	font-weight: 600;
	color: #256ea8 !important;
}

.eduGuideBg01 {
	background-color: #f4f4f4;
}

.grayColor {
	color: #555;
}

.grayColor02 {
	color: #979797;
}

.orangeColor {
	color: #ff8d0a;
}

.eduGuideTable01,
.eduGuideTable02 {
	width: 100%;
	border-collapse: collapse;
	margin: 35px 0px;
	line-height: 28px;
	text-align: center;
	border-top: 1px solid #000;
	font-size: 18px;

}

.eduGuideTable01 tr th,
.eduGuideTable02 tr th {
    text-align: center;
	border-top: 2px solid #7ec952;
}

.eduGuideTable01 tr th {
	background-color: #e1f1d7;
}

.eduGuideTable01 th,
.eduGuideTable01 td {
	padding: 12px;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;

}

.eduGuideTable02 th {
	padding: 12px;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	background-color: #e1f1d7;
}

.eduGuideTable02 td {
	padding: 12px;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	background-color: #fff;
}

.arrowBtnArea {
	text-align: center;
}

.arrowBtn {
	border-radius: 50px;
	color: #7ec952;
	padding: 8px 40px;
	border: 2px solid #7ec952;
	font-size: 20px;
	font-weight: 500;
	background-color: #fff;
	transition: all ease 0.35s;
}

.arrowBtn:hover {
	color: #fff;
	background-color: #7ec952;
}

/* 학습가이드 - 직업심리검사 시작 */
.edutab01 {
	background: url('../../img/05_guide/edutabBg01.png')no-repeat center center;
	background-size: cover;
	border-radius: 50px;
	padding: 50px 60px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;

	margin-bottom: 70px;
}

.edutab01 h2 {
	font-size: 38px;
	line-height: 42px;
	margin-bottom: 30px;
}

.edutab01 h2 span {
	font-size: 28px;
}

.edutab01 p {
	font-size: 20px;
	line-height: 28px;
}

/* 학습가이드 - 직업심리검사 끝 */

/* 학습가이드 -  IATA (글로벌) 자격증 과정 시작 */
.questionTitleIcon {
	margin-bottom: 10px;
}

.questionTitle { margin-bottom: 70px; font-size: 28px; line-height: 1.3em; font-weight: 800; }

.questionTitle span {
	background-color: #ffd51780;
}

.IATAContentArea:first-of-type {
	margin-bottom: 100px;
}

.IATAContentArea h4 {
	text-align: center;
	font-size: 22px;
    font-weight: 800;
	margin-bottom: 30px;
	color: #fff;
}

.IATAContentTitleWrap {
	text-align: center;
	margin-bottom: 40px;
}

.IATAContentTitleWrap h3 {
	margin-bottom: 8px;
	font-size: 28px;
    font-weight: 800;
	background: linear-gradient(to right top, #0015ff, #6bb0ff);
	color: transparent;
	-webkit-background-clip: text;

}

.IATAContentTitleWrap p {
	color: #555555;
}

.IATABox {
	position: relative;
	border-radius: 8px;
	box-shadow: 0px 3px 8px #ddd;
	padding: 40px 30px;
}

.IATABox:not(:last-of-type) {
	margin-bottom: 30px;
}

.IATABox01 {
	background-color: #63b7e7;
}

.IATABox02 {
	background-color: #9fd8ec;
}

.IATABox03 {
	background-color: #7db1ea;
}

.IATABox01::after {
	position: absolute;
	left: 60px;
	bottom: -50px;
	content: '';
	width: 0px;
	height: 0px;
	border-top: 50px solid #63b7e7;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	z-index: 3;
}

.IATABox02::after {
	position: absolute;
	left: 60px;
	bottom: -50px;
	content: '';
	width: 0px;
	height: 0px;
	border-top: 50px solid #9fd8ec;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	z-index: 2;
}

.IATABoxList {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: 40px;

	text-align: center;
	font-size: 18px;
}

.IATABox02List ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 40px;
}

.IATABox02List ul li {
	flex-basis: 260px;
	height: 190px;
	border-radius: 8px;
	font-size: 18px;
}

.IATABox02List ul li h2 {
	font-size: 20px;
	padding: 51px 20px;
	text-align: center;
	color: #fff;
}

.cards {
	flex-basis: 260px;
	height: 190px;
	border-radius: 8px;
	cursor: pointer;
}

.fancy-card {
	width: 100%;
	display: block;
	position: relative;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
	transition: all 250ms ease-in;
	background-size: cover;
	background-position: center center;
}

.fancy-card .content .primary {
	text-transform: uppercase;
	width: 100%;
	height: 190px;
	transition: all 250ms ease-out 200ms;
	opacity: 1;
	transform: translate3d(0px, 0px, 1px);
}

.primary h2 {
	font-size: 20px;
	padding: 51px 20px;
	color: #fff;
}

.fancy-card .content .secondary {
	position: absolute;
	opacity: 0;
	top: 0px;
	left: 0px;
	transition: all 200ms linear 0ms;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	color: #000;
	font-weight: 500;
	border-radius: 8px;
	font-size: 18px;

	display: flex;
	flex-direction: column;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

.fancy-card .content .secondary p {
	font-size: 16px;
	padding: 5px 20px;
	border-radius: 50px;
	background-color: #fff;
}

.fancy-card:active .content .primary,
.fancy-card:hover .content .primary {
	opacity: 0;
	transform: translate3d(0px, 20px, 1px);
	transition: all 200ms linear 0ms;
}

.fancy-card:active .content .secondary,
.fancy-card:hover .content .secondary {
	opacity: 1;
	transform: translate3d(0px, 0px, 1px);
	transition: all 200ms linear 200ms;
}

.fancy-card:active .bg-overlay,
.fancy-card:hover .bg-overlay {
	background: rgba(0, 0, 0, 0.45);
}

.IATABoxList01 {
	background: url('../../img/sub/IATABoxList01.png')no-repeat center center;
	background-size: cover;
}

.IATABoxList02 {
	background: url('../../img/sub/IATABoxList02.png')no-repeat center center;
	background-size: cover;
}

.IATABoxList03 {
	background: url('../../img/sub/IATABoxList03.png')no-repeat center center;
	background-size: cover;
}

.IATABoxList04 {
	background: url('../../img/sub/IATABoxList04.png')no-repeat center center;
	background-size: cover;
}


.IATABox02List01 {
	background: url('../../img/sub/IATABox02List01.png')no-repeat center center;
	background-size: cover;
}

.IATABox02List02 {
	background: url('../../img/sub/IATABox02List02.png')no-repeat center center;
	background-size: cover;
}

.IATABox02List03 {
	margin-left: auto;

	background: url('../../img/sub/IATABox02List03.png')no-repeat center center;
	background-size: cover;
}



.IATABox03List01 {
	background: url('../../img/sub/IATABox03List01.png')no-repeat center center;
	background-size: cover;
}

.IATABox03List02 {
	background: url('../../img/sub/IATABox03List02.png')no-repeat center center;
	background-size: cover;
}

.IATABox03List03 {
	background: url('../../img/sub/IATABox03List03.png')no-repeat center center;
	background-size: cover;
}

.IATABox03List04 {
	background: url('../../img/sub/IATABox03List04.png')no-repeat center center;
	background-size: cover;
}


.IATAbenefitArea ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 30px;
}

.IATAbenefitArea ul li {
	flex-basis: 320px;
	padding: 40px 20px;
	text-align: center;
}

.IATAbenefitArea ul li h4 {
	color: #0015ff;
	font-size: 24px;
	margin-bottom: 10px;
}

.cabinList ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: stretch;

	text-align: center;
	margin-top: 30px;
}

.cabinList ul li {
	flex-basis: 270px;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 40px 20px;
	box-shadow: 0px 5px 12px #ddd;
}

.cabinList ul li:hover {
	box-shadow: 0px 5px 16px #979797;
	transition: all linear 0.3s;

}

.cabinList ul li:first-of-type {
	border: 3px solid #0075FF;
}

.cabinList ul li:nth-of-type(2) {
	border: 3px solid #00a2ff;
}

.cabinList ul li:nth-of-type(3) {
	border: 3px solid #00c3ff;
}

.cabinList ul li:nth-of-type(4) {
	border: 3px solid #00a4e6;
}

.cabinList ul li img {
	padding: 10px;
	border-radius: 20px;
	margin-bottom: 20px;
}

.cabinList ul li:first-of-type img {
	background-color: #0075FF;
}

.cabinList ul li:nth-of-type(2) img {
	background-color: #00a2ff;
}

.cabinList ul li:nth-of-type(3) img {
	background-color: #00c3ff;
}

.cabinList ul li:nth-of-type(4) img {
	background-color: #00a4e6;
}


.groundJobList ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 46px;

	text-align: center;
	margin-top: 30px;
}

.groundJobList ul li {
	flex-basis: 270px;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 40px 6px;
	box-shadow: 0px 5px 12px #ddd;
}

.groundJobList ul li:hover {
	box-shadow: 0px 5px 16px #969696;
	transition: all linear 0.3s;

}

.groundJobList ul li:first-of-type {
	border: 3px solid #0075FF;
}

.groundJobList ul li:nth-of-type(2) {
	border: 3px solid #00a2ff;
}

.groundJobList ul li:nth-of-type(3) {
	border: 3px solid #00c3ff;
}

.groundJobList ul li:nth-of-type(4) {
	border: 3px solid #00a4e6;
}

.groundJobList ul li:nth-of-type(5) {
	border: 3px solid #00a2ff;
}

.groundJobList ul li:nth-of-type(6) {
	border: 3px solid #00c3ff;
}

.groundJobList ul li:nth-of-type(7) {
	border: 3px solid #00a4e6;
}

.groundJobList ul li:nth-of-type(8) {
	border: 3px solid #00a4e6;
}

.groundJobList ul li img {
	padding: 10px;
	border-radius: 20px;
	margin-bottom: 20px;
}

.groundJobList ul li:first-of-type img {
	background-color: #0075FF;
}

.groundJobList ul li:nth-of-type(2) img {
	background-color: #00a2ff;
}

.groundJobList ul li:nth-of-type(3) img {
	background-color: #00c3ff;
}

.groundJobList ul li:nth-of-type(4) img {
	background-color: #00a4e6;
}

.groundJobList ul li:nth-of-type(5) img {
	background-color: #00a2ff;
}

.groundJobList ul li:nth-of-type(6) img {
	background-color: #00c3ff;
}

.groundJobList ul li:nth-of-type(7) img {
	background-color: #00a4e6;
}

.groundJobList ul li:nth-of-type(8) img {
	background-color: #00a4e6;
}



.DGRList ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;

	text-align: center;
	margin-top: 30px;
}

.DGRList ul li {
	flex-basis: 220px;
	letter-spacing: -1.2px;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 40px 15px;
	box-shadow: 0px 5px 12px #ddd;
}

.DGRList ul li:hover {
	box-shadow: 0px 5px 16px #969696;
	transition: all linear 0.3s;

}

.DGRList ul li:first-of-type {
	border: 3px solid #0075FF;
}

.DGRList ul li:nth-of-type(2) {
	border: 3px solid #00a2ff;
}

.DGRList ul li:nth-of-type(3) {
	border: 3px solid #00c3ff;
}

.DGRList ul li:nth-of-type(4) {
	border: 3px solid #00a4e6;
}

.DGRList ul li:nth-of-type(5) {
	border: 3px solid #00a2ff;
}

.DGRList ul li img {
	padding: 10px;
	border-radius: 20px;
	margin-bottom: 20px;
}

.DGRList ul li:first-of-type img {
	background-color: #0075FF;
}

.DGRList ul li:nth-of-type(2) img {
	background-color: #00a2ff;
}

.DGRList ul li:nth-of-type(3) img {
	background-color: #00c3ff;
}

.DGRList ul li:nth-of-type(4) img {
	background-color: #00a4e6;
}

.DGRList ul li:nth-of-type(5) img {
	background-color: #00a2ff;
}


p.pointList04 {
	position: relative;
	padding-left: 26px;
	line-height: 30px;
	color: #fff;
	font-size: 18px;
	color: #000 !important;
}

p.pointList04:before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 20px;
	height: 22px;
	background-image: url('../../img/sub/pointList04Icon.png');
	background-size: cover;
}

/* 학습가이드 -  IATA (글로벌) 자격증 과정 끝 */

/* 학습가이드 - 4차 산업혁명 파악하기 시작 */
.industryArea ul li {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}

.industryArea ul li:nth-of-type(2) {
	justify-content: flex-end;
}

.industryArea ul li:not(:last-of-type) {
	margin-bottom: 70px;
}

.industryArea ul li img {
	background-color: #00378a;
	padding: 30px;
	border-radius: 100px;
}

.industryArea ul li p {
	padding: 50px 20px;
}

.industryArea ul li p:first-of-type {
	border: 4px solid #0075FF;
}

.industryArea ul li p:nth-of-type(2) {
	border: 4px solid #0075FF;
}

.industryArea ul li p:nth-of-type(3) {
	border: 4px solid #0075FF;
}


.industryListArea {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
	margin-bottom: 70px;
}

.industryListArea li {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	color: #fff;
	justify-content: center;
	gap: 15px;


	flex-basis: 48%;
	padding: 20px;
	border-radius: 20px;

	cursor: pointer;
	position: relative;
	top: 0;
	transition: 0.2s ease;
	box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.4);
}

.industryListArea li a {
	color: #fff;
}

.industryListArea li a img {
	margin-right: 15px;
}

.industryListArea li:hover {
	top: -3px;
	box-shadow: 0 2px 10px rgb(0 0 0 / 8%);
}

.industryListArea li:first-of-type {
	background-color: #313b4b;
}

.industryListArea li:nth-of-type(2) {
	background-color: #004f75;
}



.changeWrap {
	
    padding: 0 0 0 60px;
}

.container01 {
    position: relative;
	background-color: #fff;
	border: 3px solid #256ea8;
	border-radius: 15px;
	height: 300px;
	width: 1000px;
    margin: 0 auto;
	display: block;
	-moz-box-shadow: 5px 5px 35px 0px #cbcbcb;
	-webkit-box-shadow: 5px 5px 35px 0px #cbcbcb;
	-o-box-shadow: 5px 5px 35px 0px #cbcbcb;
	box-shadow: 5px 5px 35px 0px #cbcbcb;
	overflow: hidden;
}

.container01 .wrapper .slide {
	height: 100%;
	width: 100%;
	padding: 30px;
	background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.container01 .wrapper .slide .slide-content h2 { position: relative; color: #256ea8; font-size: 1.5em; font-weight: 800; line-height: 28px; min-height: 70px; }

.container01 .wrapper .slide .slide-content h2 span {
	display: block;
	font-size: 18px;
	font-weight: 500;
	color: #555555;
}

.container01 .wrapper .slide .slide-content h2:before {
	content: "";
	opacity: 0;
	height: 0;
	background-color: #fff;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 5;
	transition: all 0.25s linear;
	-ms-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
}

.container01 .wrapper .slide .slide-content h2.active:before {
	content: "";
	opacity: 1;
	height: 100%;
}

.container01 .wrapper .slide .slide-content > p {
	position: relative;
	color: #555555;
	font-size: 17px;
	min-height: 60px;
	line-height: 28px;
}

.container01 .wrapper .slide .slide-content > p:before {
	content: "";
	opacity: 0;
	background-color: #fff;
	width: 100%;
	height: 0%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 5;
	transition: all 0.25s linear;
	-ms-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
}

.container01 .wrapper .slide .slide-content > p.active:before {
	content: "";
	opacity: 1;
	height: 100%;
}

.container01 .wrapper .slide .slide-content ul {
	position: relative;
	color: #da566f;
	font-size: 16px;
	font-weight: 600;

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

.container01 .wrapper .slide .slide-content ul:before {
	content: "";
	opacity: 0;
	background-color: #fff;
	width: 100%;
	height: 0%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 5;
	transition: all 0.25s linear;
	-ms-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
}

.container01 .wrapper .slide .slide-content ul.active:before {
	content: "";
	opacity: 1;
	height: 100%;
}

.container01 .wrapper .slide .slide-content a { color: #000; }

.container01 .wrapper .slide .slide-content .button {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	overflow: hidden;
	width: 100%;
	margin-top: 30px;
	transition: all 0.25s linear;
	-ms-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-webkit-transition: all 0.25s linear;
}

.container01 .wrapper .slide .slide-content ul li:not(:last-of-type) {
	margin-right: 20px;
}

.container01 .wrapper .slide .slide-content .button .inactive i {
	color: #ccc;
}

.container01 .wrapper .slide .slide-content .button .inactive i:hover {
	color: #ccc;
}

.container01 .wrapper .slide .slide-content .button i {
	font-size: 1.3em;
	cursor: pointer;
	color: #555;
	transition: all 0.3s;
	-ms-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
}

.container01 .wrapper .slide .slide-content .button i:hover {
	color: #000;
}

.change01 {
	background: url('../../img/01_product/change01.png')no-repeat right center;
}

.change02 {
	background: url('../../img/01_product/change02.png')no-repeat right center;
}

.change03 {
	background: url('../../img/01_product/change03.png')no-repeat right center;
}

.change04 {
	background: url('../../img/01_product/change04.png')no-repeat right center;
}

.change05 {
	background: url('../../img/01_product/change05.png')no-repeat right center;
}

/* 학습가이드 - 4차 산업혁명 파악하기 끝 */

/* 학습가이드 - 국민내일배움카드 끝 */




/* k디지털 학습가이드 - 메타버스 시작 */
.digitaltab01 {
	background: url('../../img/sub/digitaltabBg01.png')no-repeat center center;
	background-size: cover;

	height: 200px;
	border-radius: 50px;
	padding: 50px 60px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: flex-start;

	margin-bottom: 70px;
}

.digitaltab01 h2 {
	font-size: 38px;
	line-height: 42px;
	margin-bottom: 30px;
	width: 100%;
}

.digitaltab01 p {
	font-size: 20px;
	line-height: 28px;
}

.digitalVideoArea {
	background-color: #f4f4f4;
}

.digitalVideoInner {
	position: relative;
}

.play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
	height: 100px;
}

.play-btn__svg {
	transition: 1s;
	fill: #fff;
}

.play-btn:hover .play-btn__svg {
	fill: #f5f178;
}

.digitalGuideTable01 {
	width: 100%;
	border-collapse: collapse;
	line-height: 28px;
	text-align: center;
	border-top: 1px solid #000;
	font-size: 18px;

}

.digitalGuideTable01 tr th {
	background-color: #cee9f3;

}

.digitalGuideTable01 tr th,
.digitalGuideTable01 tr td {
	padding: 12px;
	border: 1px solid #ddd;

}

.digitalGuideTable01 tr th:first-of-type {
	border-left: none;
}

.digitalGuideTable01 tr td:last-of-type {
	border-right: none;
}


.digitaltab02 {
	background: url('../../img/sub/digitaltabBg02.png')no-repeat center top;
	background-size: cover;

	height: 200px;
	border-radius: 50px;
	padding: 50px 60px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: flex-start;

	margin-bottom: 70px;
}

.digitaltab02 h2 {
	font-size: 38px;
	line-height: 42px;
	margin-bottom: 30px;
	width: 100%;
}

.digitaltab02 p {
	font-size: 20px;
	line-height: 28px;
}

/* k디지털 학습가이드 - 메타버스 끝 */


/* 나의강의실 - 학습중과정 시작*/
.lectureBg {
	background-color: #f7fbff;
}

.speechArea {
	text-align: center;
	margin-bottom: 70px;
}

.speechArea p {
	line-height: 32px;
}

.speechArea p span {
	position: relative;
	z-index: 1;
}

.speechArea p span::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background-color: #ffe6a1;
	z-index: -1;
}

.learningList {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 25px;

	border: 2px solid #d5dfe8;
	border-radius: 12px;
	padding: 30px;
	background-color: #fff;
}

.learningList:not(:last-of-type) {
	margin-bottom: 40px;
}

.learningList:hover {
	border: 2px solid #000;
	box-shadow: 0px 4px 12px #aabbcb;
	transition: all linear 0.4s;
	cursor: pointer;
}

.learningList02 {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 25px;

	padding: 30px;
	border: 2px solid #d5dfe8;
	border-radius: 12px;
	background-color: #fff;

	position: relative;
}


.learningList02:not(:last-of-type) {
	margin-bottom: 40px;
}

.lectureImg {
	min-width: 210px;
	border-radius: 8px;
	overflow: hidden;
}

.lectureImg img {
	width: 100%;
	height: 170px;
	object-fit: cover;
}

.learningContent {
	width: 79%;
}

.learningListTop {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 15px;
	width: 100%;

	padding: 5px 0 20px 0;
	margin-bottom: 20px;
	border-bottom: 2px solid #1c1c1c;
}

.learningListTop li h3 {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.learningListTop li p.unemployed {
	background-color: #00a0e3;
	color: #fff;
	padding: 6px 15px;
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.learningListTop li p.employed {
	background-color: #6fbf4a;
	color: #fff;
	padding: 6px 15px;
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}


.lectureInnerTop {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 25px;

	margin-bottom: 70px;
}

.learningListTop02 {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 15px;

	padding-top: 5px;
	margin-bottom: 20px;
}

.learningListTop02 li p.unemployed {
	background-color: #00a0e3;
	color: #fff;
	padding: 6px 15px;
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.learningListTop02 li p.employed {
	background-color: #6fbf4a;
	color: #fff;
	padding: 6px 15px;
	font-size: 17px;
	border-radius: 50px;
	text-align: center;
	min-width: 83px;
	line-height: 20px;
}

.lectureViewBtn {
	min-width: 131px;
	background-color: #fff;
	border: 1px solid #979797;
	color: #555555;
	border-radius: 5px;
	font-size: 16px;
	padding: 4px 10px;
	vertical-align: text-top;
}

.lectureViewBtn:hover {
	border: 1px solid #000;
	color: #000;
}

.lectureViewBtn img {
	padding-bottom: 2.2px;
	padding-left: 3px;
}

.lectureDate {
	color: #979797;
	margin-left: 6px;
	margin-bottom: 38px;
}

.lectureDate span {
	color: #000;
	padding-right: 25px;
}

.remainingDate {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid #555555;
	border-radius: 8px;
	color: #979797;
	font-weight: 500;
	font-size: 20px;
	line-height: 20px;
}

.remainingDate span {
	color: #00a0e3;
	font-weight: 600;
	font-size: 22px;
	padding-left: 10px;
}

.lectureBox:not(:last-of-type) {
	margin-bottom: 70px;
}

.lectureBox h3 {
	font-size: 22px;
	margin-bottom: 20px;
}

.lectureInnerBox {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.lectureInnerBox .lectureInnerFlex:nth-child(odd) {
	min-width: 42%;
	margin-right: 70px;
}

.lectureInnerFlex {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;

	margin-bottom: 15px;
}

.lectureInnerTitle {
	min-width: 92px;
}

.blueTable {
	width: 100%;
	border-collapse: collapse;
	line-height: 28px;
	text-align: center;
	border-top: 1px solid #000;
	font-size: 18px;
}

.blueTable th,
.blueTable td {
	padding: 18px 20px;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
}

.blueTable th {
	border-top: 2px solid #256ea8;
	background-color: #eff8ff
}

.blueTable th img {
	cursor: pointer;
}

.tableBlueColor {
	color: #256ea8;
	font-weight: 500;
}

.tableOrangeColor {
	color: #ff8e0a;
	font-weight: 500;
}

.blueBtn {
	background-color: #2a74fb;
	color: #fff;
	border: none;
	padding: 8px 20px;
	font-size: 16px;
	border-radius: 5px;
}

.blueBtn:hover {
	background-color: #1054d3;
	transition: .32s ease-in-out;
}

.orangeBtn {
	background-color: #fba12a;
	color: #fff;
	border: none;
	padding: 8px 20px;
	font-size: 16px;
	border-radius: 5px;
}

.orangeBtn:hover {
	background-color: #dd8511;
	transition: .32s ease-in-out;
}

.greenBtn {
	background-color: #07e219;
	color: #fff;
	border: none;
	padding: 8px 20px;
	font-size: 16px;
	border-radius: 5px;
}

.greenBtn:hover {
	background-color: #05c014;
	transition: .32s ease-in-out;
}


.blueTable ul li p {
	flex-basis: 15.2%;
}

.grayTable {
	line-height: 28px;
	text-align: center;
	border-top: 1px solid #000;
	font-size: 18px;

	margin-bottom: 70px;
}

.blueTable .tableTop {
	border-top: 2px solid #256ea8;
	background-color: #eff8ff;
	font-weight: 500;
}

.grayTable .tableTop {
	border-top: 2px solid #000000;
	background-color: #f4f4f4;
	font-weight: 500;
}

.list_item {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: center;
	border-bottom: 1px solid #ddd;
}

.list_item p {
	padding: 15px 3px;
}

.list_item p.listNone {
	padding: 30px 0px;
	margin: 0 auto;
	color: #555555;
}


.list_itemNoteView p.listNoneView {
	padding: 30px 463px;
	margin: 0 auto;
	color: #555555;
}

.list_item p.listNone img {
	margin: 0 auto 8px auto;
	display: block;
	width: auto;
	height: auto;
	max-height: 50px;
}

.font17 {
	font-size: 17px;
}

.listCategory {
	display: block;
	flex-basis: 12%;
	text-align: center;
}

.listCategory02 {
	display: block;
	flex-basis: 15%;
	text-align: center;
	font-size: 16px;
}

.listTitle {
	flex-basis: 60%;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	padding: 0 0 0 25px !important;
}


.listTitle a {
	display: block;
}

.listDate {
	flex-basis: 20%;
	color: #222;
	text-align: center;
}

.eventDate {
	flex-basis: 20%;
	color: #00a0e3;
	text-align: center;
}

.listWriter {
	flex-basis: 10%;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	padding: 0 0 0 15px !important;
}

.listAttach {
	flex-basis: 10%;
	text-align: center;
}

.listAttach button {
	background-color: transparent;
	border: none;

}

.listLectureTitle {
	flex-basis: 50%;
}

/*.listLectureTitle {
   display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}*/

.listLectureTitle li {
	line-height: 20px;
}

.listLectureTitle li a {
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	padding: 0 0 0 15px !important;

}

.listLectureTitle02 {
	flex-basis: 75%;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	padding: 0 0 0 25px !important;
}

.listTime,
.listSignup {
	flex-basis: 15%;
	text-align: center;
}

.listNumber {
	flex-basis: 9%;
	text-align: center;
}

.listNumber,
.listPercent,
.listcount,
.listAnswer {
	flex-basis: 5%;
	text-align: center;
}

.listAnswer {
	flex-basis: 11%;
	text-align: center;
}

.listSignup button {
	background-color: #fff;
	border: 1px solid #00a0e3;
	color: #00a0e3;
	padding: 8px 20px;
	font-size: 16px;
	border-radius: 5px;
}

.listSignup button:hover {
	background-color: #00a0e3;
	color: #fff;
	transition: .32s ease-in-out;
}

#tooltip {
	position: relative;
}

#tooltip:before {
	content: '훈련 종료 후 합산 60점 미만 시 재평가 대상임';
	font-size: 16px;
	font-weight: 500;
	display: block;
	background: rgba(0, 64, 128, 0.75);
	border: 2px solid #256ea8;
	color: #ffffff;
	padding: 15px;
	position: absolute;
	left: 75%;
	bottom: -78px;
	margin-left: -100px;
	width: 140px;
	letter-spacing: -1.2px;
	height: 55px;
	border-radius: 10px;
	opacity: 0;
	transition: .25s ease-in-out;
}

#tooltip:after {
	content: '';
	display: block;
	position: absolute;
	left: 59%;
	height: 0;
	width: 0;
	bottom: 10px;
	border-bottom: 12px solid rgba(0, 64, 128, 0.8);
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	transition: .25s ease-in-out;
	opacity: 0;
}

#tooltip:hover:before {
	opacity: 1;
	bottom: -88px;
}

#tooltip:hover:after {
	opacity: 1;
	bottom: 0px;
}

.orientation button {
	border: none;
}

.lectureBoxTitle {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.lectureBoxTitle button {
	background-color: #00a0e3;
	border: none;
	border-radius: 50px;
	padding: 6px 20px;
	color: #fff;
	font-size: 16px;
}

.lectureBoxTitle button:hover {
	background-color: #0092d1;
}

.pagenation {
	margin-top: 30px;
}

.pagenation ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 35px;
}

.pagenation ul li a {
	color: #979797;
}

.pagenation ul li.active a {
	color: #000;
	font-weight: 500;
}

.speacialTable h3 {
	background: url('../../img/special.png')no-repeat left center;
	line-height: 45px;
	color: #fff;
	padding-left: 30px;
	font-size: 20px;
	margin-bottom: 10px;
}

.speacialTable ul li p {
	font-size: 18px;
	background: url('../../img/edu/checkmark.png')no-repeat left center;
	background-size: 26px;
	padding-left: 32px;
	font-weight: 500;
}

.redTable {
	line-height: 32px;
	text-align: center;
	border-top: 3px solid #d92e00;
	font-size: 18px;
	margin-bottom: 70px;
}

.orientationPopupWrap {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3000;
	width: 100%;
	height: 100%;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
}

.orientationPopup {
	position: relative;
	display: block;
	width: 1220px;
	background-color: #5f2b25;
	padding: 20px;
	border-radius: 20px;
}

.orientationPopup .orienContentArea {
	background-color: #fff;
	min-height: 692px;
	margin-bottom: 20px;
	padding: 35px 20px 5px 20px;
	overflow-y: scroll;
}

.popupTopArea {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.popupTopArea h3 {
	color: #fff;
	border: 1px solid #fff;
	padding: 5px 20px 8px 20px;
}

.popupTopArea ul {
	display: flex;
	align-items: center;
}

.popupTopArea ul li {
	display: inline-block;
}

.popupTopArea ul li:last-of-type {
	margin-left: 10px;
}

.popupTopArea ul li img {
	width: 40px;
}

.popupTopArea p {
	color: #fff;
}

.popupTopArea p span {
	font-size: 18px;
	color: #fffc74;
}

.popupOpen {
	display: -webkit-flex !important;
}

.orientationClose {
	cursor: pointer;
}

.tab-menu10 ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
}

.tab-menu10 ul li {
	width: 28px;
	height: 28px;
	line-height: 25px;

	text-align: center;
}

.tab-menu10 ul li a {
	display: block;
	border: 1px solid #fff;
	color: #fff;
}

.tab-menu10 ul li a.active-a10 {
	background-color: #fff;
	color: #5f2b25;
	font-weight: 600;
}

.tab10 .product_list {
	margin-bottom: 0px;
}

h4.lastH4 {
	text-align: center;
}

h4.lastH4 {
	padding: 0px 0 10px;
}

.orientationTitle {
	text-align: center;
	margin-bottom: 30px;
}

.orientationTitle img {
	margin-bottom: 10px;
}

.orientationTitle p span {
	color: #f20017;
	font-weight: 500;
}

.orienBox {
	text-align: center;
}

.orien02,
.orien03,
.orien04 {
	display: none;
}

.orienBtnArea {
	position: relative;
}

.orien04Finish {
	position: absolute;
	right: 0;
	top: -4px;
	border: 2px solid #fff;
	background-color: #ff7f00;
	width: 170px;
	height: 45px;
	border-radius: 5px;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
}

.orienBtnArea ul {
	display: flex;
	justify-content: center;
	gap: 30px;
	align-items: center;
	flex-wrap: nowrap;
}

.orienBtnArea ul li button {
	background-color: transparent;
	border-radius: 5px;
	padding: 2px;
}

.orienBtnArea ul li button:not(.orienNot) {
	border: 2px solid #ffffff;
}

.orienBtnArea ul li button.orienNot {
	opacity: 0.5;
	cursor: unset;
}

.orienBtnArea ul li button img {
	width: auto;
	height: auto;
	max-width: 28px;
}

.orienNot {
	border: 2px solid #eaeaea;
}

.orienBox:not(:last-of-type) {
	margin-bottom: 30px;
}

.orienBox p span {
	color: #f99725;
	font-weight: 500;
}

.orienBox ul li:not(:last-of-type) {
	margin-bottom: 10px;
}

.orienBox ul li p.padL {
	padding-left: 10px;
}

.orienTable {
	width: 100%;
	border-collapse: collapse;
	line-height: 28px;
	text-align: center;
	border-top: 2px solid #000;
	font-size: 16px;
	margin-top: 20px;
	margin-bottom: 5px;
}

.orienTable tr th {
	color: #000;
	background-color: #fff0c7;
}

.orienTable th,
.orienTable td {
	padding: 12px;
	border: 1px solid #ddd;

}

/* 나의강의실 - 학습중과정 끝*/

/* 나의강의실 - 종료된과정 시작*/
.orientationTitle {
	position: relative;
}

.scoreArea {
	position: absolute;
	right: 10px;
	top: -8px;
	width: 80px;
	padding: 10px 8px;
	border: 2px solid #ddd;
	border-radius: 5px;
	font-size: 18px;
}

.scoreArea h4 {
	border-bottom: 1px solid #ddd;
	padding-bottom: 5px;
}

.points {
	margin-bottom: 5px;
}

.points li {
	display: inline-block;
}

.points li p {
	color: #555555;
}

.points li:not(:last-of-type) {
	margin-right: 20px;
}

.points li p span {
	font-weight: 500;
	color: #256ea8;
}

.surveyBox02 {
	border-bottom: 2px dashed #dddddd;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.surveyBox02 h4 {
	position: relative;
	z-index: 1;
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 5px;
}

.surveyBox02 h4::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 45%;
	background-color: #a1deff;
	z-index: -1;
}

.surveyBox02 h3 {
	margin-bottom: 15px;
}

.answerBox {
	border: 2px solid #dddddd;
	padding: 20px 15px;
	border-radius: 8px;
	background-color: #fbfbfb;
}

.answerBox .attachmentArea {
	margin-bottom: 0px;
}

.answerBox h3 {
	border-bottom: 1px solid #dddddd;
	padding-bottom: 10px;
}

.answerBox:not(:last-of-type) {
	margin-bottom: 25px;
}

.surveyA {
	border-radius: 8px;
	margin-top: 10px;
	background-color: #eef7ff;
	border: 2px solid #b0c9e6;
	padding: 20px;
	font-size: 15px;
}

.surveyAtitle {
	font-weight: 500;
	border-bottom: 1px solid #000000;
	margin-bottom: 5px;
}

.surveyAtitle img {
	width: auto;
	height: auto;
	max-height: 20px;
	padding-bottom: 10px;
}

.answericonWrap {
	position: relative;
}

.rightIcon {
	position: absolute;
	left: -10px;
	top: -15px;

	width: auto;
	height: auto;
	max-height: 50px;
}

/* 나의강의실 - 종료된과정 끝*/

/* 나의강의실 - 강의 없을시 시작 */
.notLearningList {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 25px;

	border: 2px solid #d5dfe8;
	border-radius: 12px;
	padding: 30px;
	background-color: #fff;
}

.notLearningList {
	height: 234px;
}

.notLearningList p.listNone {
	padding: 30px 0px;
	margin: 0 auto;
	color: #555555;
}

.notLearningList p.listNone img {
	margin: 0 auto 8px auto;
	display: block;
	width: auto;
	height: auto;
	max-height: 50px;
}

/* 나의강의실 - 강의 없을시 끝 */

/* 과제제출 시작 */
.assignmentWrap,
.assignmentWrap02,
.surveyWrap,
.assignmentNoticeWrap,
.testWrap,
.testWrap1 {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3000;
	width: 100%;
	height: 100%;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
}

.assignmentPopup {
	position: relative;
	display: block;
	width: 1220px;
	background-color: #555555;
	padding: 20px;
	border-radius: 20px;
}

.popupTopArea p span {
	font-size: 18px;
	color: #fffc74;
}

.assignmentClose {
	cursor: pointer;
}

.tab-container {
	background-color: #fff;
	min-height: 620px;
	margin-bottom: 20px;
	padding: 35px 20px 5px 20px;
	font-size: 16px;
}

.assignmentPopup .tab-container {
	overflow-y: scroll;
	height: 520px;
}

.assignmentPopup .tab-container .product_list {
	margin-bottom: 30px;
	min-height: 0px;
}

.checkboxArea {
	text-align: center;
	border-top: 1px solid #ddd;
	padding-top: 20px;
	margin-bottom: 30px;
}

.checkboxArea input[type="checkbox"] {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin-right: 5px;
}

.checkboxArea label {
	font-size: 18px;
	font-weight: 500;
}

.popupBtnArea {
	text-align: center;
}

.popupBtnArea button:last-of-type {
	margin-left: 20px;
}

.assignmentOrange {
	border: 2px solid #fff;
	background-color: #ff7f00;
	width: 170px;
	height: 45px;
	border-radius: 5px;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
}

.assignmentOrange:hover {
	background-color: #fff;
	border: 2px solid #fff;
	color: #ff7f00;
	transition: .32s ease-in-out;
}

.assignmentGray {
	border: 2px solid #fff;
	background-color: #b9b9b9;
	width: 170px;
	height: 45px;
	border-radius: 5px;
	color: #fff;
	font-size: 20px;
	font-weight: 500;
}

.assignmentGray:hover {
	background-color: #fff;
	border: 2px solid #fff;
	color: #555555;
	transition: .32s ease-in-out;
}

.reportSubmit ul {
	display: flex;
	align-items: center;
}

.reportSubmit ul li {
	flex-basis: 100%;
	text-align: center;
}

/*.reportSubmit .product_list .reportArea .findFile ul .select a {
    background-color: #f4f4f4;
    display: block;
    line-height: 50px;

}*/



.reportSubmit ul li a {
	background-color: #f4f4f4;
	display: block;
	line-height: 50px;
	border-top: 2px solid #f4f4f4;
	border-right: 2px solid #f4f4f4;
	border-left: 2px solid #f4f4f4;
	border-bottom: 2px solid #333333;
}

.reportSubmit ul li a.active-a20 {
	font-weight: 500;
	background-color: #fff;
	border-top: 2px solid #333333;
	border-right: 2px solid #333333;
	border-left: 2px solid #333333;
	border-bottom: 2px solid #fff;
}

.reportArea {
	height: 280px;
	border-right: 2px solid #333333;
	border-bottom: 2px solid #333333;
	border-left: 2px solid #333333;

	padding: 35px 20px 20px 20px;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between
}

.findFile ul li {
	display: inline-block;
}

.findFile ul li:first-of-type {
	margin-right: 15px;
	border-right: 2px solid #333333;
	padding-right: 15px;
}

.findFile ul li button {
	padding: 8px 25px;
	background-color: #f4f4f4;
	border: 1px solid #333333;
}

.reportNotice {
	width: 100%;
	padding: 10px 20px;
	background-color: #e9e9e9;
}

.reportNotice ul li:not(:last-of-type) {
	margin-bottom: 5px;
}

.reportNotice ul li p span {
	font-weight: 600;
	color: #f20017;
}

.reportNotice h4 {
	color: #f20017;
}

.reportWriteArea {
	height: 280px;
	overflow-y: scroll;
	border-right: 2px solid #333333;
	border-bottom: 2px solid #333333;
	border-left: 2px solid #333333;
	padding: 20px;
}

.reportWriteArea h3 {
	margin-bottom: 10px;
}

.reportWriteArea textarea {
	margin-bottom: 20px;
	padding: 10px;
}

/* 과제제출 끝 */

/* 입과시본인인증 시작 */
.identityWrap {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3000;
	width: 100%;
	height: 100%;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.4);
}

.identityPopup {
	position: relative;
	display: block;
	width: 1220px;
	background-color: #555555;
	padding: 20px;
	border-radius: 20px;
}

.identityClose {
	cursor: pointer;
}

.identityPopup .tab-container {
	overflow-y: scroll;
	height: 520px;
}

.identityPopup .tab-container .product_list {
	margin-bottom: 50px;
	min-height: 0px;
}

.identityTopText {
	margin-bottom: 70px;
}

.identityTopText h3 {
	background: url('../../img/survey/identityTopTextImg.png')no-repeat center top;
	padding: 35px 0 0 10px;
	text-align: center;
}

.myCertify {
	border-top: 2px solid #ddd;
	border-radius: 5px;
	padding: 35px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.myCertify h3 {
	margin-right: 40px;
}

.myCertify ul li:not(:last-child) {
	margin-right: 30px;
}

.myCertify ul li {
	display: inline-block;
	text-align: center;
}

.myCertify ul li button {
	padding: 20px 30px;
	background-color: #ffffff;
	border-radius: 10px;
}

.myCertify ul li button:hover {
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4);
	font-weight: 500;
}

.myCertify ul li img {
	display: block;
	width: 100px;
	margin-bottom: 10px;
}

.myCertifyFinish {
	border-top: 2px solid #ddd;
	border-radius: 5px;
	padding: 35px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.myCertifyFinish h3 {
	margin-right: 40px;
}

.myCertifyFinish ul li p {
	min-width: 560px;
	color: #555555;
	text-align: center;
}

/* 입과시본인인증 끝 */

/* 설문조사 시작 */
.surveyClose {
	cursor: pointer;
}

.surveyBox:not(:last-of-type) {
	margin-bottom: 40px;
}

.surveyBox h4 {
	position: relative;
	z-index: 1;
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 5px;
}

.surveyBox h4::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 45%;
	background-color: #ffe6a1;
	z-index: -1;
}

.surveyBox h3 {
	margin-bottom: 15px;
}

.surveyQ li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.surveyQ li:not(:last-of-type) {
	margin-bottom: 10px;
}

.surveyQ li input[type="radio"] {
	width: 16px;
	height: 16px;
	accent-color: #256ea8;
}

.surveyQ li label {
	font-size: 16px;
	padding-bottom: 2px;
}

.surveyBox textarea {
	padding: 10px;
}

.surveyBtnArea {
	text-align: center;
}

.surveyBtnArea button:last-of-type {
	margin-left: 20px;
}

.assignmentNoticeWrap .tab-container .product_list {
	margin-bottom: 50px;
	min-height: 0px;
}

.assignmentNoticeWrap .checkboxArea {
	padding-top: 50px;
}

.contentsName {
	font-size: 18px;
}

/* 설문조사 끝 */

/* 최종평가 시작 */
.testClose {
	cursor: pointer;
}

.testTime {
	margin-bottom: 20px;
}

.testTime ul {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	background-color: #256ea8;
	padding: 5px 0px;
	color: #ffffff;
}

.testTime ul li h2 {
	font-size: 28px;
	color: #fff;
}

.testWrap .product_list .list {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 50px;
}


.testLeftArea {
	flex-basis: 300px;
}

.testLeftArea table {
	width: 100%;
	font-size: 15px;
	border-collapse: collapse;
	text-align: center;
}

.testLeftArea table th,
.testLeftArea table td {
	padding: 8px;
	border: 1px solid #ddd;
	width: 25%;
}

.testBtnArea {
	position: relative;
}

.testControlArea {
	position: absolute;
	right: 0;
	top: 0;
}

.testControlArea button:last-of-type {
	margin-left: 20px;
}

/* 최종평가 끝 */

/* 나의강의실 - 훈련신청현황 시작 */
.apphistoryContent {
	width: 100%;
}

.situation {
	text-align: right;
	min-width: 280px;
	margin-left: auto;
}

.situation p {
	color: #555555;
}

.situation p span.keepColor {
	color: #0075ff;
	font-weight: 500;
}

.situation p span.finishColor {
	color: #ff6c01;
	font-weight: 500;
}

.situation p span.cancelRequestColor {
	color: #ff0000;
	font-weight: 500;
}

.situation p span.cancelColor {
	color: #006eff;
	font-weight: 500;
}

.situation p span.reviewColor {
	color: #256ea8;
	font-weight: 500;
}

.situation p span.firstColor {
	color: #1bee05;
	font-weight: 500;
}

.blueLineBtn {
	min-width: 100px;
	background-color: #fff;
	border: 1px solid #005bff;
	color: #005bff;
	border-radius: 5px;
	padding: 5px 10px;
}

.blueLineBtn:hover {
	background-color: #005bff;
	border: 1px solid #005bff;
	color: #fff;
}

.orangeLineBtn {
	min-width: 100px;
	background-color: #fff;
	border: 1px solid #ff5e00;
	color: #ff5e00;
	border-radius: 5px;
	padding: 5px 10px;
}

.orangeLineBtn:hover {
	background-color: #ff5e00;
	border: 1px solid #ff5e00;
	color: #fff;
}

.purpleLineBtn {
	min-width: 100px;
	background-color: #fff;
	border: 1px solid #862990;
	color: #862990;
	border-radius: 5px;
	padding: 5px 10px;
}

.purpleLineBtn:hover {
	background-color: #862990;
	border: 1px solid #862990;
	color: #fff;
}

.paymentBtn {
	min-width: 100px;
	background-color: #256ea8;
	border: 1px solid #256ea8;
	color: #fff;
	border-radius: 5px;
	padding: 5px 10px;
}

.paymentBtn:hover {
	background-color: #00a0e3;
	border: 1px solid #00a0e3;
	color: #fff;
}

.lectureDeleteIcon {
	position: absolute;
	right: -10px;
	top: -10px;
	border: none;
	border-radius: 50px;

	background-color: transparent;
}

.fadeIn {
	opacity: 0;
	transition: 0.3s;
}

.learningList02:hover {
	border: 2px solid #000;
	box-shadow: 0px 4px 12px #aabbcb;
	transition: all linear 0.4s;
	/*cursor: pointer;*/
}

.apphistoryContent:hover + .fadeIn {
	opacity: 1;
	box-shadow: 0px 4px 8px #aabbcb;
}

.lectureDeleteIcon:hover {
	opacity: 1;
	box-shadow: 0px 4px 8px #aabbcb;
}

/* 나의강의실 - 훈련신청현황 끝 */

/* 나의강의실 - 나만의 학습노트 시작 */
.studyNoteArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	gap: 45px;
}

.studyNoteArea .noteBox {
	flex-basis: 30%;
	border: 1px solid #ddd;
	padding: 28px 25px;
	border-radius: 10px;
	box-shadow: 0px 2px 10px #cfcfcf;

}

.studyNoteArea .noteBox .noteInner h3 {
	font-size: 18px;
	margin-bottom: 12px;
}

.studyNoteArea .noteBox .noteInner textarea {
	overflow-y: scroll;
	height: 250px;
	width: 324px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	padding: 15px 10px;
	font-size: 16px;

}

.studyNoteArea .noteBox ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.studyNoteArea .noteBox ul li {
	flex-basis: 47%;
	text-align: center;
}

.studyNoteArea .noteBox ul li button {
	width: 100%;
	padding: 8px 0px;

}

.noteRetouch {
	background-color: #256ea8;
	border: 1px solid #256ea8;
	border-radius: 5px;
	color: #fff;
}

.noteRetouch:hover {
	background-color: #00a0e3;
	border: 1px solid #00a0e3;
	border-radius: 5px;
	color: #fff;
}

.noteDelete {
	background-color: #fff;
	border: 1px solid #979797;
	border-radius: 5px;
}

.noteDelete:hover {
	background-color: #ddd;
	border: 1px solid #979797;
	border-radius: 5px;
}

/* 나의강의실 - 나만의 학습노트 끝 */

/* 나의강의실 - 증명서 발급 시작 */
.certificateBox {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.certificateBoxL ul li {
	display: inline-block;
}

.certificateBoxR ul {
	display: flex;
	flex-wrap: nowrap;
	gap: 30px;
	text-align: center;
	align-items: stretch;
}

.certificateBoxR ul li {
	padding: 30px 18px 20px 18px;
	border-radius: 10px;
}

.certificateBoxR ul li:first-of-type {
	border: 1px solid #003aa7;
}

.certificateBoxR ul li:nth-of-type(2) {
	border: 1px solid #f55a00;
}

.certificateBoxR ul li:nth-of-type(3) {
	border: 1px solid #862990;
}

.certificateBoxR ul li p {
	margin-bottom: 30px;
}

/* 나의강의실 - 증명서 발급 끝 */


/* 서비스 이용약관 시작 */
.serviceTitle {
	text-align: center;
}

.serviceTitle h2 {
	position: relative;
	margin-bottom: 40px;
	display: inline-block;
}

.serviceTitle h2:after {
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	background-color: #256ea8;
	border-radius: 40px;
	top: 8px;
	right: -16px;
}

/* 서비스 이용약관 끝 */


/* 교육기관소개 - 한국이러닝협회 시작 */
.introduceBox {
	text-align: left;
}

.introduceBox ul li p {
	font-size: 18px;
	line-height: 32px;
}

.introduceBox ul li:not(:last-of-type) {
	margin-bottom: 30px;
}


.agencyArea {
	background-color: #f4f4f4;
}

.agencyArea h2 {
	margin-bottom: 20px;
}

.agencyArea h3 {
	font-size: 18px;
	line-height: 28px;
	margin-bottom: 18px;
}

.agencyArea h3 span {
	font-size: 22px;
	color: #0077d5;
}

.agencyArea p {
	text-align: center;
	margin-bottom: 70px;
}

.agencyArea ul {
	display: flex;
	justify-content: center;
	text-align: left;
}

.banner-slide-text {
	overflow: hidden;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 20px;
}

.banner-slide-content {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	transform: translateX(0%);
	animation: banner-slide-text 38s linear infinite;

}

.banner-slide-items {
	margin-left: 20px;
}

.banner-slide-items ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 20px;
}

.banner-slide-items ul li {
	display: inline-block;
	min-width: 300px;
	text-align: center;
	padding: 20px 15px;
	border-radius: 15px;
	border: 1px solid #ddd;
	background-color: #fff;
}

.banner-slide-items ul li img {
	width: auto;
	height: 38px;
}



@keyframes banner-slide-text {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(-50%);
	}
}


.banner-slide-text02 {
	overflow: hidden;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
}

.banner-slide-content02 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	transform: translateX(-50%);
	animation: banner-slide-text02 40s linear infinite;

}

.banner-slide-items02 {
	margin-left: 20px;
}

.banner-slide-items02 ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 20px;
}

.banner-slide-items02 ul li {
	display: inline-block;
	min-width: 300px;
	text-align: center;
	padding: 20px 15px;
	border-radius: 15px;
	border: 1px solid #ddd;
	background-color: #fff;
}

.banner-slide-items02 ul li img {
	width: auto;
	height: 38px;
}


@keyframes banner-slide-text02 {
	0% {
		transform: translateX(-50%);
	}

	100% {
		transform: translateX(0%);
	}
}

/* 교육기관소개 - 한국이러닝협회 끝 */


/* 교육기관소개 - 회장인사말 시작 */
.ceoTitle {
	text-align: center;
	margin-bottom: 50px;
}

.ceoArea ul {
	background: url('../../img/04_about/ceoBg.png') no-repeat right bottom;
}

.ceoArea ul li:not(:last-of-type) {
	margin-bottom: 30px;
}

.ceoArea ul li p {
	font-size: 18px;
	line-height: 32px;
	color: #000;
}

/* 교육기관소개 - 회장인사말 끝 */

/* 교육기관소개 - 찾아오시는길 시작 */
.mapArea {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-content: flex-start;
}

.mapContent > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 35px;
}

.mapContent > ul > li:nth-of-type(odd) {
	flex-basis: 38%;
}

.mapContent > ul > li:nth-of-type(even) {
	flex-basis: 54%;
}

.mapContent > ul > li img {
	margin-bottom: 15px;
}

.mapContent ul li h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.mapContent ul li p {
	color: #555555;
	font-size: 16px;
}

.mapContent > ul li ul.subbusArea {
	display: flex;
	flex-wrap: nowrap;
	gap: 15px;
}

.subStyle li {
	flex-basis: 47%;
}

.busStyle:not(:last-of-type) {
	margin-bottom: 20px;
}

.busStyle li:first-of-type {
	min-width: 80px;
}

.mapContent > ul li ul.subbusArea li:not(:last-of-type) {
	margin-bottom: 5px;
}

.sub02 {
	color: #00a84d !important;
	font-weight: 500;
}

.sub07 {
	color: #747f00 !important;
	font-weight: 500;
}

.busRed {
	color: #e71b1d;
	font-weight: 500;
}

.busGreen {
	color: #38cf42;
	font-weight: 500;
}

.busBlue {
	color: #058cf0;
	font-weight: 500;
}

/* 교육기관소개 - 찾아오시는길 끝 */


/* 교육기관소개 - 연혁 시작 */
#container {
	margin: 0 auto;
	text-align: center;
	position: relative;
}

#container::before { content: ''; position: absolute; top: 64px; left: 0; width: 100%; height: 3px; border-radius: 50px; background-color: #ddd; }

#container input {
	visibility: hidden;
}

#container input {
	float: left;
	margin: 0 auto;
}

#container label {
	position: relative;
	display: inline-block;
	min-width: 300px;
	font-weight: 500;
	font-size: 20px;
	color: #909090;
	margin-right: -6px;
}

#container label::before {
	position: absolute;
	content: '';
	width: 3px;
	height: 28px;
	border-radius: 30px;
	left: 50%;
	transform: translateX(-50%);
	bottom: -30px;
	background-color: #256ea8;
}

#container label::after {
	position: absolute;
	content: '';
	width: 12px;
	height: 12px;
	border-radius: 30px;
	left: 50%;
	transform: translateX(-50%);
	bottom: -40px;
	background-color: #256ea8;

}

#container input:checked + label {
	position: relative;
	font-size: 24px;
	color: #256ea8;
	font-weight: 600;
}

#container input:checked + label::after {
	position: absolute;
	content: '';
	width: 12px;
	height: 12px;
	border-radius: 30px;
	left: 50%;
	transform: translateX(-50%);
	bottom: -39px;
	background-color: #256ea8;
}

#content {
	clear: both;
	position: relative;
}

#content div#content-1,
#content div#content-2,
#content div#content-3 {
	opacity: 0;
	padding: 100px 0 0 0;
	transition: all linear 0.32s;

}

input#tab-1:checked #container {
	height: 3000px;
}

#container input#tab-1:checked ~ #content #content-2,
#container input#tab-1:checked ~ #content #content-3 {
	display: none;
}

#container input#tab-2:checked ~ #content #content-1,
#container input#tab-2:checked ~ #content #content-3 {
	display: none;
}

#container input#tab-3:checked ~ #content #content-1,
#container input#tab-3:checked ~ #content #content-2 {
	display: none;
}


#container input#tab-1:checked ~ #content #content-1,
#container input#tab-2:checked ~ #content #content-2,
#container input#tab-3:checked ~ #content #content-3 {
	opacity: 1;
	z-index: 5;
	width: 100%;
}

input.visible {
	visibility: visible !important;
}

.historyBox {
	text-align: left;
}

.historyBox:not(:last-of-type) {
	border-bottom: 1px solid #ddd;
	margin-bottom: 70px;
	padding-bottom: 70px;
}

.historyBox h3 {
	font-size: 32px;
	margin-bottom: 20px;
}

.historyContent:not(:last-of-type) {
	margin-bottom: 60px;
}

.historyContent li {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 80px;
}

.historyContent li h4 {
	min-width: 208px;
	font-size: 20px;
    font-weight: 600;
}

.historyContent li ul li:not(:last-of-type) {
	margin-bottom: 12px;
}

.historyContent li ul li p {
	color: #555;
	font-size: 18px;
	line-height: 30px;
}

.histroyDate {
	padding-right: 15px;
	color: #256ea8;
	font-weight: 500;
	display: inline-block;
	width: 100px;
}

/* .height01 {
	height: 1720px;
}

.height02 {
	height: 11070px;
}

.height03 {
	height: 8100px;
} */

/* 교육기관소개 - 연혁 끝 */

/* 교육기관소개 - 참여기관소개 시작*/
.companyWrap h2 {
	margin-bottom: 10px;
}

.companyWrap > p {
	text-align: center;
	color: #555555;
	margin-bottom: 70px;
}

.companyWrap .companyArea ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 33px;
}

.companyWrap .companyArea ul li {
	flex-basis: 280px;
	text-align: center;
	align-items: center;
}

.companyWrap .companyArea ul li div {
	border: 1px solid #ddd;
	min-height: 170px;
	padding-top: 65px;
	cursor: pointer;
	border-radius: 8px;
	margin-bottom: 10px;
}

.companyWrap .companyArea ul li div:hover {
	box-shadow: 0px 2px 8px #cecece;
	transition: all ease 0.35s;
}

.companyWrap .companyArea ul li img {
	width: auto;
	height: auto;
	max-height: 40px;
}

.companyWrap .companyArea ul li p {
	font-weight: 500;
}


.modalCompany {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3000;
	width: 100%;
	height: 100%;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.6);
}

.companyOpenStyle {
	display: -webkit-flex;
}

.modalCompanyInner {
	width: 1000px;
	min-height: 320px;
	background-color: #fff;
	background-color: #fff;
	border-radius: 8px;
	padding: 40px 40px 50px 40px;
}

.modalCompanyClose {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;

	margin-bottom: 40px;
}

.modalCompanyClose h3 {
	font-size: 24px;
	color: #256ea8;
}

.modalCompanyClose img {
	width: auto;
	height: 40px;
}

.modalCompanyContent ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 40px;
}

.modalCompanyContent ul li img {
	width: auto;
	height: auto;
	max-height: 40px;
}

.modalCompanyContent ul li:nth-of-type(2) {
	width: 720px;
	height: 250px;
	overflow-y: scroll;
	padding: 0 10px 0 0;
}

.modalCompanyContent ul li p {
	font-size: 18px;
}

.modalCompanyContent ul li p:not(:last-of-type) {
	margin-bottom: 20px;
}

/* 교육기관소개 - 참여기관소개 시작*/

/* 학습지원센터 - 공지사항 시작 */
.noticeboardArea {
	text-align: left;
	margin-bottom: 40px;
}

.noticeboardArea .boardTitle {
	border-top: 2px solid #000;
	border-bottom: 1px solid #ddd;
	padding: 18px 20px;
}

.noticeboardArea .boardTitle h3 {
	font-size: 20px;
}

.boardTitle h3 span {
	font-size: 20px;
	color: #256ea8;
	padding-right: 5px;
}

.noticeboardArea .boardInfo {
	padding: 18px 20px;
	border-bottom: 1px solid #ddd;
}



.noticeboardArea .boardInfo ul {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 60px;
}

.noticeboardArea .boardInfo ul li {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.noticeboardArea .boardInfo ul li p {
	font-size: 18px;
	line-height: 18px;
}

.boardContent {
	padding: 30px 20px;
	border-bottom: 1px solid #ddd;
}

.boardContent img {
	margin-bottom: 30px;
}

.boardContent p {
	font-size: 16px;
}

.boardContentBox {
	margin-bottom: 20px;
}

.attachmentArea {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 30px;

	margin-bottom: 40px;
}

.attachmentArea .attachFile {
	display: flex;
	flex-wrap: nowrap;
	gap: 15px;
	justify-content: flex-start;
	align-items: center;
}

.attachmentArea .attachFile img {
	width: auto;
	height: 28px;
	margin-right: 5px;
}

.attachmentArea .attachFile a {
	border: 1px solid #000;
	padding: 16px 15px 16px 50px;
	border-radius: 5px;
	font-size: 15px;
	transition: all ease 0.35s;
	background-image: url('../../img/bbs/attachFile.png');
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 25px;
	background-color: #ffffff;
}

.attachmentArea .attachFile:hover a {
	background-color: #256ea8;
	color: #ffffff;
	background-image: url('../../img/bbs/attachFileHover.png');
	background-repeat: no-repeat;
	background-position: 15px center;
	background-size: 25px;
}

.blueArrowBtn {
	border-radius: 50px;
	color: #256ea8;
	padding: 8px 40px;
	border: 2px solid #256ea8;
	font-size: 20px;
	font-weight: 500;
	background-color: #fff;
	transition: all ease 0.35s;
}

.blueArrowBtn:hover {
	color: #fff;
	background-color: #256ea8;
}

/* 학습지원센터 - 공지사항 끝 */

/* 학습지원센터 - 공지사항 작성하기 시작 */
.noticeTitle,
#noticeTitle {
	width: 78% !important;
}

.noticeCheck {
	width: 100px;
}

/* 학습지원센터 - 공지사항 작성하기 끝 */

/* 학습지원센터 - 1:1 상담 시작 */
.answerWait {
	background-color: #73a900;
	border: none;
	padding: 5px 10px;
	color: #ffffff;
	border-radius: 5px;
	min-width: 72px;

}

.answerFinish {
	background-color: #979797;
	border: none;
	padding: 5px 10px;
	color: #ffffff;
	border-radius: 5px;
	min-width: 72px;

}

.answerposting {
	background-color: #006eff;
	border: none;
	padding: 5px 10px;
	color: #ffffff;
	border-radius: 5px;
	min-width: 72px;

}

.listLectureTitle img.lockIcon {
	width: auto;
	height: 25px;
}

.inquiryBottomArea {
	position: relative;
}

.inquiryBtnArea {
	position: absolute;
	right: 0;
	top: -3px;

}

.inquiryBtn {
	background-color: #00a0e3;
	border: none;
	border-radius: 50px;
	padding: 8px 25px;
	color: #fff;
	font-size: 16px;
}

.inquiryBtn:hover {
	background-color: #0092d1;
}

.boardSearchArea {
	margin-bottom: 30px;
}

.boardSearchArea ul {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

#boardSearch {
	min-width: 260px;
	padding: 10px;
}

.boardSearchBtn {
	width: 44px;
	height: 44px;
	background-color: #256ea8;
	border: 1px solid #256ea8;
	border-radius: 0px 5px 5px 0px;
}

.boardSearchBtn img {
	width: auto;
	height: 30px;
}

.consultTitle,
#consultTitle,
#consultContent,
.consultContent {
	width: 100%;
}

.consultContent {
	height: 300px;
}

#consultContent {
	height: 100%;
}

.boardBothArea {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 30px;
}

.inquiryBlueBtn,
.listArrowBtn,
.listDeleteBtn {
	flex-basis: 49%;
}

.inquiryBlueBtn button,
.listArrowBtn button,
.listDeleteBtn button {
	width: 100%;
	padding: 13px 0px;
	font-size: 17px;
	border-radius: 8px;
}

.inquiryBlueBtn button {
	border: none;
	background-color: #256ea8;
	color: #fff;
	margin-bottom: 10px;
}

.inquiryBlueBtn button:hover {
	background-color: #00a0e3;
}

.listArrowBtn button {
	border: 1px solid #256ea8;
	background-color: #fff;
	color: #256ea8;
}

.listArrowBtn button:hover {
	border: 1px solid #00a0e3;
	color: #00a0e3;
}

.listDeleteBtn button {
	border: none;
	background-color: #ec9c3f;
	color: #fff;
	margin-bottom: 10px;
}

.listDeleteBtn button:hover {
	background-color: #ec9c3f;
}

.modalInfoWrap {
	display: inline-block;
	border: 1px solid #ddd;
	cursor: pointer;
	padding: 5px 20px 8px 20px;
	border-radius: 50px;
	box-shadow: 0px 4px 8px #cecece;
	margin-bottom: 30px;


	background-image: linear-gradient(to top right, #00a0e3, #256ea8);

	position: relative;
	top: 0;
	transition: 0.2s ease;
	box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.3);
}


.modalInfoWrap:hover {
	top: -1px;
	box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}

.modalInfoWrap h3 {
	color: #fff;
}

.modalInfoWrap img {
	vertical-align: text-bottom;
	margin-right: 10px;
}

#modalInfoShow {
	cursor: pointer;
}

.modalInfo {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3000;
	width: 100%;
	height: 100%;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	background: rgba(0, 0, 0, 0.6);
}

.modalInfoInner {
	width: 800px;
	background-color: #fff;
	background-color: #fff;
	border-radius: 8px;
	padding: 30px 25px 40px 25px;
}

.modalOpenStyle {
	display: -webkit-flex;
}

#modalInfoClose {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;

	margin-bottom: 20px;
}

#modalInfoClose h3 {
	font-size: 24px;
	color: #25b7d3;
}

#modalInfoClose img {
	width: auto;
	height: 40px;
}

.modalInfoContent ul li {
	font-size: 16px;
}

.modalInfoContent ul li:not(:last-of-type) {
	margin-bottom: 15px;
}

/* 학습지원센터 - 1:1 상담 끝*/

/* 훈련과정 탐색표 */
#modalInfoClose button.view_lt {
	width: 150px;
	height: 50px;
	border: 2px solid #256ea8;
	border-radius: 20px;
	font-size: 15px;
	background-color: #256ea8;
	color: #fff;
}

/* End */

/* faq 시작 */
.tableTop {
	border-top: 2px solid #000000;
	background-color: #f4f4f4;
	font-weight: 500;
}

.board_item {
	font-size: 18px;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #ddd;
	-webkit-box-align: center;
	align-items: center;
	padding: 15px 0px;
}

.board_header .b_title {
	font-size: 18px;
}

.board_header .b_cate {
	font-size: 18px;
}

.b_icon {
	min-width: 122px;
	text-align: center;
	flex-basis: 10%;
}

.b_cate {
	flex-basis: 15%;
	text-align: center;
}

.b_title {
	cursor: pointer;
	flex-basis: 72%;
	padding: 0 0 0 20px !important;
}

.faqlistWrap div.answer,
.faqlistWrap div.answer02,
.faqlistWrap div.answer03,
.faqlistWrap div.answer04,
.faqlistWrap div.answer05,
.faqlistWrap div.answer06,
.faqlistWrap div.answer07,
.faqlistWrap div.answer08 {
	color: #707070;
	background-color: #f6f6f6;
	display: none;
	font-size: 16px;
}

.faqlistWrap li.open .answer,
.faqlistWrap li.open02 .answer02,
.faqlistWrap li.open03 .answer03,
.faqlistWrap li.open04 .answer04,
.faqlistWrap li.open05 .answer05,
.faqlistWrap li.open06 .answer06,
.faqlistWrap li.open07 .answer07,
.faqlistWrap li.open08 .answer08 {
	display: flex;
	flex-wrap: nowrap;
	max-height: inherit;
	border-top: 1px solid #ddd;
	width: 100%;
	padding: 30px 0px;
	margin-top: 15px;
	gap: 20px;
}

.view-off {
	display: none;
}


.open,
.open02,
.open03,
.open04,
.open05,
.open06,
.open07,
.open08 {
	padding-bottom: 0;
}


.fileBtn {
	padding: 8px 25px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: linear-gradient(#f4f4f4, #ccc);
}

.fileBtn:hover {
	background: linear-gradient(#ededed, #b9b9b9);
}

/* faq 끝 */

/* 훈련생 수기 및 후기 시작 */
.bestIcon {
	width: auto;
	height: 32px;
}

.noticeCheck {
	width: 120px;
}


.commentArea {
	overflow: hidden;
	padding: 30px 20px;
	background: #f4f4f4;
}


form.commentWrite {
	border: 1px solid #000;
	padding: 20px;
	margin-bottom: 30px;

	background: #ffffff;
}

form.commentWrite > div {
	margin-bottom: 10px;
}

form.commentWrite > div h3 {
	font-size: 16px;
}

form.commentWrite > div input {
	height: 32px;
	padding: 0 5px;
	border: 1px solid #979797;
	color: #666;
	vertical-align: middle;
	margin-right: 32px;
}

.commentWriteInner {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
}

form.commentWrite textarea,
form.commentWrite button {
	height: 100px;
	vertical-align: middle;
	border: 1px solid #979797;
}

form.commentWrite textarea {
	flex-basis: 88%;
	border-right: none;
	padding: 10px;
}

form.commentWrite button.commentWriteBtn {
	flex-basis: 12%;
	background: #666666;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

ul.commentList li {
	padding: 20px;
	list-style: none;
	border: 1px solid #ddd;
	background: #fff;
}

ul.commentList li:not(:last-of-type) {
	margin-bottom: 20px;
}

ul.commentList li h3 {
	line-height: 18px;
	font-size: 16px;
}

ul.commentList li h3 {
	float: left;
	color: #555555;
}

ul.commentList li h3 span {
	margin-left: 8px;
	padding-left: 8px;
	border-left: 2px solid #ccc;
	color: #979797;
}

ul.commentList li p {
	clear: both;
	line-height: 18px;
	font-size: 16px;
	margin-bottom: 10px;
}

ul.commentList li h4 {
	font-size: 15px;
	font-weight: 500;
	color: #979797;
}

.commentTop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

#modifyBtn {
	color: #000;
	background: #fff;
	padding: 6px;
	font-size: 15px;
	font-weight: 500;
	border-radius: 5px;
	vertical-align: top;
	border: 1px solid #999;
}

#modifyBtn:hover {
	background: #f4f4f4;
}

ul.commentList li form > button:hover {
	background: #efefef;
}

ul.commentList div > div {
	margin-bottom: 10px;
}

ul.commentList div > div h1 {
	display: inline;
	font-size: 12px;
	padding-right: 8px;
}

ul.commentList div > div input {
	height: 32px;
	padding: 0 5px;
	border: 1px solid #999;
	color: #666;
	vertical-align: middle;
	margin-right: 32px;
}

ul.commentList div textarea,
ul.commentList div button.commentWriteBtn {
	height: 74px;
	vertical-align: middle;
	border: 1px solid #999;
}

ul.commentList div textarea {
	width: 90%;
	border-right: none;
	padding: 10px 5px;
}

ul.commentList div button {
	width: 10%;
	background: #565656;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
}


/* 훈련생 수기 및 후기 끝 */

/* 이벤트 시작 */
.eventIng {
	background-color: #73a900;
	border: none;
	padding: 5px 10px;
	color: #ffffff;
	border-radius: 5px;
	min-width: 72px;
}

.eventFinish {
	background-color: #979797;
	border: none;
	padding: 5px 10px;
	color: #ffffff;
	border-radius: 5px;
	min-width: 72px;

}

.answerposting {
	background-color: #006eff;
	border: none;
	padding: 5px 10px;
	color: #ffffff;
	border-radius: 5px;
	min-width: 72px;
	font-size: 13px;
}

/* 이벤트 끝 */



.useInner h4 {
	min-height: 58px;
}

.procedureList li:not(:first-of-type) h4 {
	line-height: 58px;
}

.procedureText {
	text-align: left;
	margin: 0 auto;
	line-height: 20px;
}

.procedureText li p {
	font-size: 16px;
	letter-spacing: -0.15px;
}

.eduUseNew {
	background-color: #e7f5ff;
	z-index: -2;
	position: relative;
}

.eduUseImg {
	margin-bottom: 30px;
}


/* 미래내일 일경험 시작 */
.huntArea .purposeArea {
	position: relative;
	height: 676px;
}

.huntArea .purposeArea .jumpTitle {
	margin-bottom: 362px;
}


.huntArea .purposeArea .fadeInLeft01 {
	width: 60%;
	display: block;
	margin: 0 auto;
}

.huntArea .purposeArea .jump {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 67%);
	width: 75%;
}

.huntArea .targetArea {
	background-image: linear-gradient(to top right, #8a73ba, #583a97);
}

.huntArea .digitalTarget > ul {
	flex-direction: column;
}

.huntArea .digitalTarget > ul li span {
	font-weight: 600;
	font-size: 28px;
	display: block;
}

.huntArea .digitalTarget .targetTit {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}

.huntArea .digitalTarget .targetTit > img {
	width: 76px;
	margin: 0 auto 20px auto;
}

.huntArea .digitalTarget .columnBox {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.huntArea .digitalTarget .fee02 p {
	font-size: 22px;
	font-weight: bold;
	line-height: 1.4;
}

.huntArea .trainingFeeArea {
	padding: 100px 20px 180px 20px;
}

.huntArea .trainingFeeArea ul > li {
	display: block;
	padding: 0 0 0 156px;
}

.huntArea .trainingFeeArea .coin {
	right: 230px;
	height: auto;
	width: 260px;
}

.huntArea .trainingFeeArea .coin .shadow {
	margin-top: 234px;
	margin-left: 78px;
}

.huntArea .trainingFeeContent img {
	width: 370px;
}

.huntArea .contentBox ol.procedureList {
	gap: 30px;
}

.huntArea .procedureList02 li {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.huntArea .procedureList02 li span {
	color: #256ea8;
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	display: block;
}

.huntArea .procedureList02 li p {
	font-size: 15px;
	line-height: 1.3;

	color: #f05650;
	font-weight: 500;
}

.huntArea .procedureList02 li:not(:last-of-type)::before {
	display: none;
}

.huntArea .procedureList02 li div.iconBox img {
	object-fit: contain;
}

/* 미래내일 일경험 끝 */


/* 인크루트 무료 서비스 시작 */
.incruitArea .incruitWrap {
	background-color: #e8eff9;
}

.incruitArea .purposeArea {
	position: relative;
	height: 764px;
}

.incruitArea .contentTitle {
	margin-bottom: 20px;
}

.incruitArea .contentBox > strong {
	display: block;
	margin-bottom: 16px
}

.incruitArea .purposeArea .fadeInLeft01 {
	width: 52%;
	display: block;
	margin: 0 auto 38px auto;
}

.incruitArea .targetArea {
	background: #e8eff9;
	color: inherit;
}

.incruitArea .targetArea .procedureList {
	background-color: #e8eff9;
}

.incruitArea .targetArea .digitalTarget .fadeInLeft01 {
	margin: 0 auto 36px auto;
	display: flex;
	width: 134px;
}


.incruitArea .targetArea .digitalTarget > a {
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;

	width: fit-content;
	text-align: center;
	background-color: #b9e0fd;
	border-radius: 10px;
	font-weight: bold;
	color: #3f5fa5;

	transition: .3s;
}

.incruitArea .targetArea .digitalTarget > a:hover {
	background-color: #a1caf1;
}

.incruitArea .targetArea .contentBox {
	padding: 66px 20px;
}

.incruitArea .digitalTarget ul {
	margin-bottom: 36px;
}

.incruitArea .trainingFeeArea .trainingFeeList > p {
	display: block;
	margin-bottom: 30px;

}

.incruitArea .trainingFeeArea .trainingFeeList > a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;
	width: fit-content;
	text-align: center;
	background-color: #b9e0fd;
	border-radius: 10px;
	font-weight: bold;
	color: #3f5fa5;
	transition: .3s;
}

.incruitArea .trainingFeeArea .trainingFeeList > a:hover {
	background-color: #a1caf1;
}

.incruitArea .procedureArea .contentBox > p {
	display: block;
	text-align: center;
	margin-bottom: 40px;
}

.incruitArea .procedureList02 li div.iconBox img {
	object-fit: contain;
}


.incruitArea .procedureArea .procedureInner > a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 20px;
	margin: 0 auto;
	width: 266px;
	text-align: center;
	background-color: #b9e0fd;
	border-radius: 10px;
	font-weight: bold;
	color: #3f5fa5;
	transition: .3s;
}

.incruitArea .procedureArea .procedureInner > a:hover {
	background-color: #a1caf1;
}

.incruitArea .targetArea .procedureList02 li {
	width: calc(32% - 30px);
}

/* 인크루트 무료 서비스 끝 */

/* 디지털 과정 소개 시작 */

.serveBox:not(:last-of-type), .serveBox02:not(:last-of-type) {
    margin-bottom: 45px;
}
.serveBox h3, .serveBox02 h3 {
    font-size: 30px;
}

.serveBox {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	overflow: hidden;
}

.serveBox:not(:last-of-type),
.serveBox02:not(:last-of-type) {
	margin-bottom: 150px;
}

.serveBox h3,
.serveBox02 h3 {
	font-size: 36px;
	color: #555555;
	min-width: 310px;
	padding-top: 20px;
	margin-bottom: 70px;
}

.serveBox02 h3 span {
	display: block;
	font-size: 16px;
	font-weight: 500;
	padding-top: 3px;
}

.serveBox_right {
	width: 100%;
}


.serveBox_right > div:hover {
	background-color: #f4f4f4;
}

.serveBox_right div ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 20px;
}

.serveBox_right div ul h4 {
	color: #3cd1b8;
	font-size: 22px;
}

.serveBox_right div ul p:not(.pointP) {
	color: #000000;
	font-size: 18px;
	line-height: 30px;
}

.pointP {
	font-size: 16px;
	color: #6e6e6e;
}

.pointP:not(:last-of-type) {
	margin-bottom: 2px;
}

.serveBox_right > div {
	border-bottom: 1px solid #dddddd;
	padding: 30px 10px;
	box-sizing: border-box;
}

.serveBox_right > div:first-of-type {
	border-top: 1px solid #dddddd;
}

.scroll_on {
	opacity: 0;
	transition: all 1s;
}

.scroll_on.active {
	opacity: 1 !important;
	transform: translate(0, 0) !important;
}

.scroll_on.type_bottom {
	transform: translate(0, 30px);
}

/*.procedureArea {
	 background: #FFFFFF;
	height: 420px;
	position: relative;
	box-shadow: 2px 5px 20px rgba(119, 119, 119, 0.5);
} */

.leftbox {
	float: left;
	top: -5%;
	left: 5%;
	position: absolute;
	width: 195px;
	height: 110%;
	box-shadow: 3px 3px 10px rgba(119, 119, 119, 0.5);
}

.procedureTitle a {
	list-style: none;
	background: #3cd1b8;
	height: 116px;
	padding: 20px;
	box-sizing: border-box;
	color: #FFFFFF;
	display: block;
	transition: all 0.3s ease-in-out;
}

.procedureTitle a.active {
	background-color: #2db49e;
}

.procedureTitle a:hover {
	color: #ffffff;
	transform: scale(1.05);
	cursor: pointer;
	background-color: #2db49e;
}

.procedureArea .rightbox {
	float: right;
	width: 75%;
	padding-top: 45px;
}

.procedureArea .rightbox h4 {
	font-size: 28px;
	margin-bottom: 20px;
}

.procedureArea .rightbox ul li {
	font-size: 18px;
	line-height: 34px;
}

.procedureArea .rightbox ul:not(:last-of-type) {
	margin-bottom: 20px;
}

.procedureArea .rightbox > div {
	transition: opacity 0.5s ease-in;
	position: absolute;
	width: 70%;
}

.procedureArea .rightbox .noshow {
	z-index: 9;
}

.procedureArea .rightbox > div {
	z-index: 10;
}

.procedureArea .rightbox > div a {
	color: #0015ff;
}

.procedureArea .rightbox img {
	position: absolute;
	right: 0;
	top: 0;
	width: auto;
	height: auto;
	max-height: 140px;
}

.noshow {
	opacity: 0;
}

#loader .ribble {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#loader .ribble .blobb01:not(:first-of-type) {
	background-color: #3cd1b8;
	-webkit-transition: 1s all ease-in-out;
	transition: 1s all ease-in-out;
	padding: 75px 2px 10px;
	box-sizing: border-box;
	border-radius: 10px;
	min-height: 200px;
	text-align: center;
}

#loader .ribble .blobb01:first-of-type {
	background-color: #3cd1b8;
	-webkit-transition: 1s all ease-in-out;
	transition: 1s all ease-in-out;
	padding: 40px 2px 10px;
	box-sizing: border-box;
	border-radius: 10px;
	min-height: 200px;
	text-align: center;

}

#loader .ribble .blobb02 {
	margin-right: 1.5px;
	background-color: #3cd1b8;
	-webkit-transition: 1s all ease-in-out;
	transition: 1s all ease-in-out;
	padding: 50px 2px 10px;
	box-sizing: border-box;
	border-radius: 10px;
	min-height: 200px;
	text-align: center;
}

#loader .ribble .blobb02 img {
	width: auto;
	height: auto;
	max-height: 50px;
	margin-bottom: 15px;
}

#loader .ribble .blobb01 {
	width: 18%;
}

#loader .ribble .blobb02 {
	width: 15%;
}

#loader .ribble .blobb.slowest {
	-webkit-animation: blobb 2s infinite;
	animation: blobb 2s infinite;
}

#loader .ribble .blobb:nth-child(2) {
	-webkit-animation-delay: 0.25s;
	animation-delay: 0.25s;
}

#loader .ribble .blobb:nth-child(3) {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

#loader .ribble .blobb:nth-child(4) {
	-webkit-animation-delay: 0.75s;
	animation-delay: 0.75s;
}

#loader .ribble .blobb:nth-child(5) {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

#loader .ribble .blobb:nth-child(6) {
	-webkit-animation-delay: 1.25s;
	animation-delay: 1.25s;
}

@-webkit-keyframes blobb {

	0%,
	25% {
		background: #3cd1b8;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		background-color: #2db49e;
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	100% {
		background-color: #3cd1b8;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes blobb {

	0%,
	25% {
		background: #3cd1b8;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		background-color: #2db49e;
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

	100% {
		background-color: #3cd1b8;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

}

#loader .ribble .blobb h4 {
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #ffffff;
	border: 2px solid #2db49e;
	color: #2db49e;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	text-align: center;
	line-height: 50px;
	margin: 0 auto;
}

#loader .ribble .blobb h5 {
	color: #000000;
	margin-top: 20px;
	font-size: 17px;
}

#loader .ribble .blobb p {
	color: #ffffff;
	text-align: center;
	font-size: 16px;
}

.arrowBtn02 {
	background-color: #fff;
	margin-top: 5px;
	color: #3cd1b8;
	padding: 7px 12px;
	display: inline-block;
	border-radius: 8px;
	font-size: 16px;
	min-width: 163px;
	font-weight: 500;
	transition: .32s ease-in-out;
}

.arrowBtn02 img {
	padding: 0 0 3px 5px;
	box-sizing: border-box;
}

.tableStyle01 {
	width: 100%;
	border-collapse: collapse;
	line-height: 28px;
	text-align: center;
	border-top: 2px solid #2db49e;
	font-size: 16px;
	margin-bottom: 10px;
}

.completionTable:not(:last-of-type) {
	margin-bottom: 60px;
}

.tableStyle01 tr th {
	color: #3cd1b8;
	background-color: #e5f7f4;
	font-size: 18px;
}

.tableStyle01 tr td {
	font-size: 16px;
}

.tableStyle01 th,
.tableStyle01 td {
	padding: 20px 8px;
	box-sizing: border-box;
	border: 1px solid #ddd;

}

.tableBox {
	font-size: 15px;
	line-height: 26px;
	color: #666666;
}

/* .arrowBtn {
	background-color: #3cd1b8;
	margin-top: 10px;
	color: #ffffff;
	padding: 7px 12px;
	display: inline-block;
	border-radius: 8px;
	font-size: 16px;
	min-width: 163px;
	transition: .32s ease-in-out;
}

.arrowBtn:hover {
	background-color: #2db49e;
}

.arrowBtn img {
	padding: 0 0 3px 5px;
	box-sizing: border-box;
} */

.mt_60 { margin-top: 60px; }

.mb_30 { margin-bottom: 30px; }
.mb_100 { margin-bottom: 100px; }
.mb_330 { margin-bottom: 330px; }

.pt_50 { padding-top: 50px; }
/* 디지털 과정 소개 끝 */
.root_daum_roughmap { width: 650px !important; }