/* CSS Document */
@charset "utf-8";

/*
    session
*/

/* 서브 페이지 첫 세션  */
.session1 {
	width: 100%;
	padding: 0 15px;
}
.session1 .session1_bg {
	border-radius: 30px 0 30px 30px;
	min-height: 140px;

	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.session_left .session1_bg h1,
.session_left .session1_bg small,
.session_left .session1_button {
	text-align: center !important;
}
.session_left .session1_button {
	display: flex;
	justify-content: center;
}
.session_left .session1_button a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-basis: 130px;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--k-color-white);
	text-decoration: none;
	border: 1px solid var(--k-color-white);
	border-radius: 20px;
	padding: 10px 20px;
}

#content {
	padding-top: 64px;
	min-height: calc(100vh - 320px);
}

@media (min-width: 576px) {
	#content {
		padding-top: 64px;
		min-height: calc(100vh - 317px);
	}
}
@media (min-width: 768px) {
	#content {
		padding-top: 64px;
		min-height: calc(100vh - 317px);
	}
}
@media (min-width: 992px) {
	#content {
		padding-top: 64px;
		min-height: calc(100vh - 304px);
	}
}

@media (min-width: 1200px) {
	.session_left .session1_bg h1,
	.session_left .session1_bg small,
	.session_left .session1_button {
		text-align: left !important;
	}
	.session_left .session1_button {
		display: flex;
		justify-content: flex-start;
	}
	.session_left .session1_button a {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-basis: 130px;
		gap: 10px;
		font-size: 14px;
		font-weight: 700;
		color: var(--k-color-white);
		text-decoration: none;
		border: 1px solid var(--k-color-white);
		border-radius: 20px;
		padding: 10px 20px;
	}

	#content {
		padding-top: 64px;
		min-height: calc(100vh - 268px);
	}
}
@media (min-width: 1400px) {
}

/* 
    mini 베너
*/
.mini_banner_box {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 180px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 10px;
	background-color: var(--k-mini-banner-bg);
	border-radius: 20px;
	padding: 20px;
}
.mini_banner_box .mini_banner_box_imgs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
.mini_banner_box .mini_banner_box_imgs ul {
	list-style: none;
	width: 400%;
	height: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	position: absolute;
	left: 0%;
	top: 0;
	transition: all 0.5s ease-in-out;
}
.mini_banner_box .mini_banner_box_imgs ul li {
	width: 100%;
	height: 100%;
}
.mini_banner_box .mini_banner_box_imgs ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.mini_banner_box .mini_banner_box_imgs ul li a img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
.mini_banner_box .class_info_arrow_box {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	position: relative;
	margin-top: 0;
}
.mini_banner_box .class_info_arrow_box .class_info_arrow_dot_box {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.mini_banner_box .class_info_arrow_box .class_info_arrow_dot_box ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.mini_banner_box .class_info_arrow_box .class_info_arrow_dot_box ul li {
	display: flex;
	align-items: center;
	justify-content: center;
}
.mini_banner_box .class_info_arrow_box .class_info_arrow_dot_box ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	background-color: transparent;
	border: 2px solid var(--k-color-white);
	color: var(--k-color-white);
	border-radius: 50%;
	overflow: hidden;
	text-decoration: none;
	font-size: 0;
}
.mini_banner_box .class_info_arrow_box .class_info_arrow_dot_box ul li.active a {
	background-color: var(--k-color-white);
}
.mini_banner_box .class_info_arrow_box .class_info_arrow_prev_box_img,
.mini_banner_box .class_info_arrow_box .class_info_arrow_next_box_img {
	position: relative;
	width: 30px;
	height: 30px;
}
.mini_banner_box .class_info_arrow_box .class_info_arrow_prev_box_img a,
.mini_banner_box .class_info_arrow_box .class_info_arrow_next_box_img a {
	position: absolute;
	top: -86px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	overflow: hidden;
	color: var(--k-color-white);
	text-decoration: none;
}
.mini_banner_box .class_info_arrow_box .class_info_arrow_prev_box_img a svg,
.mini_banner_box .class_info_arrow_box .class_info_arrow_next_box_img a svg {
	width: 32px;
	height: 32px;
	color: var(--k-color-white);
}
.mini_banner_box .class_info_arrow_box .class_info_arrow_prev_box_img a {
	left: 0;
}

.mini_banner_box .class_info_arrow_box .class_info_arrow_next_box_img a {
	right: 0;
}
@media (min-width: 576px) {
	.mini_banner_box {
		height: 180px;
	}
}
@media (min-width: 768px) {
	.mini_banner_box {
		height: 180px;
	}
}

@media (min-width: 992px) {
	.mini_banner_box {
		height: 180px;
	}
}

@media (min-width: 1200px) {
	.mini_banner_box {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 280px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 60px;
		margin-bottom: 10px;
		background-color: var(--k-mini-banner-bg);
		border-radius: 20px;
		padding: 20px;
	}
	.mini_banner_box .class_info_arrow_box {
		margin-top: -20px;
	}
	.mini_banner_box .class_info_arrow_box .class_info_arrow_prev_box_img a,
	.mini_banner_box .class_info_arrow_box .class_info_arrow_next_box_img a {
		top: -112px;
	}
}

@media (min-width: 1400px) {
}

/*
    class_month_box
*/
.class_month_box {
	position: relative;
	display: block;
	margin-top: 20px;
	padding-top: 38px;
}
.class_month_box .class_month_prev,
.class_month_box .class_month_next {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 50%;
}
.class_month_box .class_month_prev {
	left: 0;
	justify-content: flex-start;
}
.class_month_box .class_month_next {
	right: 0;
	justify-content: flex-end;
}
.class_month_box .class_month_prev a,
.class_month_box .class_month_next a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--k-color-white);
	text-decoration: none;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 14px;
	font-weight: 700;
}
.class_month_box .class_month_prev a svg,
.class_month_box .class_month_next a svg {
	width: 24px;
	height: 24px;
	color: var(--k-color-white);
}
.class_month_box .class_month_box_title {
	position: relative;
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	background-color: var(--k-color-white);
	color: var(--k-color-dark);
	border-radius: 20px 20px 0 0;
	padding: 20px;
	line-height: 1rem;
	font-size: 14px;
	font-weight: 700;
}
.class_month_box .class_month_box_title #class_year_title {
	margin: 0;
	color: var(--k-color-dark);
	font-size: 12px;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -10px;
}
.class_month_box .class_month_box_title #class_now_icon {
	position: absolute;
	top: 0;
	right: 7px;
}
.class_month_box .class_month_box_title h3 {
	margin: 0;
	padding: 0;
	font-size: 14px;
	text-align: center;
}
.class_month_box #class_live_icon {
	display: none;
}

@media (min-width: 576px) {
	.class_month_box {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		gap: 30px;
		margin-top: 10px;
		padding-top: 0;
	}
	.class_month_box .class_month_prev,
	.class_month_box .class_month_next {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		position: relative;
	}
	.class_month_box .class_month_prev a,
	.class_month_box .class_month_next a {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--k-color-white);
		text-decoration: none;
		gap: 10px;
		margin-bottom: 20px;
		font-size: 14px;
		font-weight: 700;
	}
	.class_month_box .class_month_prev a svg,
	.class_month_box .class_month_next a svg {
		width: 24px;
		height: 24px;
		color: var(--k-color-white);
	}
	.class_month_box .class_month_box_title {
		position: relative;
		width: 200px;
		background-color: var(--k-color-white);
		color: var(--k-color-dark);
		border-radius: 20px 20px 0 0;
		padding: 20px 20px 20px 20px;
		line-height: 1rem;
		font-size: 14px;
		font-weight: 700;
		margin: 0;
	}
	.class_month_box .class_month_box_title #class_year_title {
		margin: 0;
		color: var(--k-color-dark);
		font-size: 12px;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -10px;
	}
	.class_month_box .class_month_box_title #class_now_icon {
		position: absolute;
		top: 0;
		right: -30px;
	}
	.class_month_box .class_month_box_title h3 {
		margin: 0;
		padding: 0;
		font-size: 14px;
		text-align: center;
	}
	.class_month_box #class_live_icon {
		display: none;
	}
}
@media (min-width: 768px) {
	.class_month_box .class_month_box_title {
		position: relative;
		width: 230px;
		border-radius: 20px 20px 0 0;
		padding: 20px 30px 20px 30px;
		line-height: 1rem;
		font-size: 20px;
		font-weight: 700;
	}
	.class_month_box .class_month_box_title h3 {
		margin: 0;
		padding: 0;
		font-size: 16px;
		text-align: center;
	}
}

@media (min-width: 992px) {
	.class_month_box .class_month_box_title {
		position: relative;
		width: 250px;
		border-radius: 20px 20px 0 0;
		padding: 20px 50px 20px 50px;
		line-height: 1rem;
		font-size: 20px;
		font-weight: 700;
	}
	.class_month_box .class_month_box_title h3 {
		font-size: 18px;
	}
}

@media (min-width: 1200px) {
	.class_month_box {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: center;
		gap: 30px;
		margin-top: 50px;
	}
	.class_month_box .class_month_prev,
	.class_month_box .class_month_next {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.class_month_box .class_month_prev a,
	.class_month_box .class_month_next a {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--k-color-white);
		text-decoration: none;
		gap: 10px;
		margin-bottom: 20px;
		font-size: 20px;
		font-weight: 700;
	}
	.class_month_box .class_month_prev a svg,
	.class_month_box .class_month_next a svg {
		width: 24px;
		height: 24px;
		color: var(--k-color-white);
	}
	.class_month_box .class_month_box_title {
		position: relative;
		width: 300px;
		border-radius: 20px 20px 0 0;
		padding: 20px 50px 20px 50px;
		line-height: 1rem;
		font-size: 20px;
		font-weight: 700;
	}
	.class_month_box .class_month_box_title h3 {
		margin: 0;
		padding: 0;
	}
}

@media (min-width: 1400px) {
	.class_month_box .class_month_box_title {
		position: relative;
		width: 300px;
		border-radius: 20px 20px 0 0;
		padding: 20px 50px 20px 50px;
		line-height: 1rem;
		font-size: 20px;
		font-weight: 700;
	}
}

.session2 {
	width: 100%;
	padding: 20px 0px 20px 0px;
}
.session2_sub_box {
	width: 100%;
}

@media (min-width: 576px) {
	.session2 {
		width: 100%;
		padding: 54px 15px 50px 15px;
	}
}
@media (min-width: 768px) {
	.session2 {
		width: 100%;
		padding: 54px 15px 50px 15px;
	}
}

@media (min-width: 992px) {
	.session2 {
		width: 100%;
		padding: 54px 15px 50px 15px;
	}
}

@media (min-width: 1200px) {
	.session2 {
		width: 100%;
		padding: 54px 15px 50px 15px;
	}
}

@media (min-width: 1400px) {
	.session2 {
		width: 100%;
		padding: 54px 15px 50px 15px;
	}
}

/*
    방송강의
*/

.class_Popular_box {
	width: 100%;
	display: block;
	background-color: var(--k-class-Popularbox-bg);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 30px;
	background-image: url("/images/home/menu2/sub2_1/ranking_bg_xs.png");
	background-position: center top;
	background-repeat: no-repeat;
}
.class_Popular_box .class_Popular_box_title {
	width: 100%;
	text-align: center;
}
.class_Popular_box .class_Popular_box_title h3 {
	width: 100%;
	font-weight: 700;
	margin: 0;
	padding: 0 0 20px 0;
	line-height: 1rem;
	font-size: 20px;
}
.class_Popular_box .class_Popular_box_title h3 br {
	display: none;
}
.class_Popular_box .class_Popular_box_title h3 span {
	color: var(--k-color-deeppurple);
}

.class_Popular_box .class_Popular_box_list {
	width: 100%;
	flex-basis: 75%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}
.class_Popular_box .class_Popular_box_list #class_Popular_box_list {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.class_Popular_box .class_Popular_box_list #class_Popular_box_list li {
	width: 100%;
	flex-basis: 100%;
	margin-bottom: 20px;
}
.class_Popular_box .class_Popular_box_list #class_Popular_box_list li.top1 {
	margin-bottom: 20px;
}
.class_Popular_box .class_Popular_box_list #class_Popular_box_list li.dummy {
	flex-basis: 25%;
}

.class_Popular_box .class_Popular_box_list #class_Popular_box_list li a {
	display: block;
	text-decoration: none;
	position: relative;
	color: var(--k-color-dark);
}
.class_Popular_box .class_Popular_box_list #class_Popular_box_list li a .class_Popular_item_img {
	border-radius: 10px;
	overflow: hidden;
}
.class_Popular_box .class_Popular_box_list #class_Popular_box_list li a .class_Popular_item_title {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--k-color-dark);
	text-align: center;
}

.class_Popular_box .class_Popular_medal {
	position: absolute;
	top: -15px;
	right: -25px;
	width: 64px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.class_Popular_box .class_Popular_medal img {
	width: 64px;
	height: auto;
}
.class_box {
	width: 160px;
	margin: 0 auto;
}
.class_box img {
	width: 100%;
	height: auto;
}
@media (min-width: 576px) {
	.class_Popular_box {
		width: 100%;
		display: block;
		background-color: var(--k-class-Popularbox-bg);
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20px;
		padding: 20px;
		margin-bottom: 30px;
		background-image: url("/images/home/menu2/sub2_1/ranking_bg_xs.png");
		background-position: center top;
		background-repeat: no-repeat;
	}
	.class_Popular_box .class_Popular_box_title {
		width: 100%;
		text-align: center;
	}
	.class_Popular_box .class_Popular_box_title h3 {
		width: 100%;
		font-weight: 700;
		margin: 0;
		padding: 0 0 20px 0;
		line-height: 1rem;
		font-size: 20px;
	}
	.class_Popular_box .class_Popular_box_title h3 br {
		display: none;
	}
	.class_Popular_box .class_Popular_box_title h3 span {
		color: var(--k-color-deeppurple);
	}

	.class_Popular_box .class_Popular_box_list #class_Popular_box_list li a .class_Popular_item_title {
		font-size: 14px;
	}
}
@media (min-width: 768px) {
	.class_Popular_box {
		width: 100%;
		display: block;
		background-color: var(--k-class-Popularbox-bg);
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20px;
		padding: 20px;
		margin-bottom: 30px;
		background-image: url("/images/home/menu2/sub2_1/ranking_bg_xs.png");
		background-position: center top;
		background-repeat: no-repeat;
	}
	.class_Popular_box .class_Popular_box_title {
		width: 100%;
		text-align: center;
	}
	.class_Popular_box .class_Popular_box_title h3 {
		width: 100%;
		font-weight: 700;
		margin: 0;
		padding: 0 0 20px 0;
		line-height: 1rem;
		font-size: 20px;
	}
	.class_Popular_box .class_Popular_box_title h3 br {
		display: none;
	}
	.class_Popular_box .class_Popular_box_title h3 span {
		color: var(--k-color-deeppurple);
	}
	.class_Popular_box .class_Popular_box_list #class_Popular_box_list li {
		width: 100%;
		flex-basis: 33.33333333333333%;
		margin-bottom: 0;
	}
	.class_Popular_box .class_Popular_box_list #class_Popular_box_list li.dummy {
		flex-basis: 0;
		display: none;
	}
	.class_Popular_box .class_Popular_box_list #class_Popular_box_list li.top1 {
		margin-bottom: 0;
	}
}

@media (min-width: 992px) {
	.class_Popular_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		background-color: var(--k-class-Popularbox-bg);
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		border-radius: 20px;
		padding: 20px;
		margin-bottom: 30px;
		background-image: url("/images/home/menu2/sub2_1/ranking_bg_xl.png");
		background-position: left bottom;
		background-repeat: no-repeat;
	}
	.class_Popular_box .class_Popular_box_title {
		flex-basis: 25%;
		width: 100%;
		text-align: left;
	}
	.class_Popular_box .class_Popular_box_title h3 {
		width: 100%;
		font-weight: 700;
		line-height: 1.2;
		font-size: 30px;
	}
	.class_Popular_box .class_Popular_box_title h3 br {
		display: block;
	}
	.class_Popular_box .class_Popular_box_title h3 span {
		color: var(--k-color-deeppurple);
		margin-left: 0;
	}

	.class_Popular_box .class_Popular_box_list #class_Popular_box_list li {
		width: 100%;
		flex-basis: 33.33333333333333%;
	}
	.class_Popular_box .class_Popular_box_list #class_Popular_box_list li.dummy {
		flex-basis: 0;
	}
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/********************
    방송강의 목차
********************/

.class_Description_list {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
#class_Description_list {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}
#class_Description_list li {
	width: 100%;
}
#class_Description_list li .class_Description_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
#class_Description_list li .class_Description_box .class_Description_video_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	transform: var(--k-video-transform);
	height: 0;
	overflow: hidden;
}
#class_Description_list li .class_Description_box .class_Description_video_box.open {
	height: auto;
}

#class_Description_list li .class_Description_box .class_Description_video_box .class_Description_video {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--k-color-dark-light);
	transform: var(--k-video-transform);
}
#class_Description_list li .class_Description_box .class_Description_video_box .class_Description_video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#class_Description_list li .class_Description_box .class_Description_progress {
	width: 100%;
	height: 5px;
	background-color: var(--k-color-gray-light);
}
#class_Description_list li .class_Description_box .class_Description_progress .class_Description_progress_bar {
	width: 0%;
	height: 5px;
	background-color: var(--k-color-deeppurple);
}
#class_Description_list li .class_Description_box .class_Description_body {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px;
}
#class_Description_list li .class_Description_box .class_Description_body .class_Description_Number {
	flex-basis: 32px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#class_Description_list li .class_Description_box .class_Description_body .class_Description_Number span {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
	color: var(--k-color-dark-light);
	background-color: var(--k-color-white);
	border-radius: 50%;
	border: 1px solid var(--k-color-dark-light);
}

#class_Description_list li .class_Description_box .class_Description_body .class_Description_info {
	width: 100%;
	height: 100%;
}
#class_Description_list li .class_Description_box .class_Description_body .class_Description_info .class_Description_Title {
	width: 100%;
	height: 100%;
}
#class_Description_list li .class_Description_box .class_Description_body .class_Description_Play {
	flex-basis: 32px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
#class_Description_list li .class_Description_box .class_Description_body .class_Description_Play .class_Description_Play_button {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	background-color: var(--k-color-white);
	border: 1px solid var(--k-color-deeppurple);
}
#class_Description_list li .class_Description_box .class_Description_body .class_Description_Play .class_Description_Play_button svg {
	width: 16px;
	height: 16px;
	color: var(--k-color-deeppurple);
}

/********************
    class_list
********************/

.class_list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}
.class_list .class_list_header {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.class_list_header_category {
	display: block;
	width: 200px;
}
.class_list_header_category a {
	color: var(--k-color-dark);
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.class_list_header_category a div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}

.class_list_header_category a svg {
	width: 16px;
	height: 16px;
	color: var(--k-color-dark);
}

.class_list_header_sort {
	display: block;
	width: 100px;
	position: relative;
}
.class_list_header_sort a {
	color: var(--k-color-dark);
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.class_list_header_sort a div {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.class_list_header_sort a svg {
	width: 16px;
	height: 16px;
	color: var(--k-color-dark);
}

.class_list_sort_pop {
	display: none;
	position: absolute;
	top: 30px;
	right: 0;
	width: 200px;
	height: auto;
	background-color: var(--k-color-white);
	border-radius: 20px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	z-index: 1000;
}
.class_list_sort_pop.open {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.class_list_sort_pop .class_list_sorts {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 10px 20px;
}
.class_list_sort_pop .class_list_sorts ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
}
.class_list_sort_pop .class_list_sorts ul li {
	width: 100%;
}
.class_list_sort_pop .class_list_sorts ul li a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: var(--k-color-dark-light);
	font-size: 14px;
	font-weight: 400;
	padding: 10px;
	text-align: center;
	transition: var(--k-transition);
}
.class_list_sort_pop .class_list_sorts ul li a.selected {
	color: var(--k-color-dark);
	font-weight: 700; /* 선택된 텍스트를 진하게 표시 */
	background-color: rgba(102, 16, 242, 0.1); /* 선택된 배경색 추가 */
}

/********************
    수업 카테고리
********************/

.class_list_category_pop {
	display: none;
	position: absolute;
	top: 30px;
	left: -20px;
	width: 90vw;
	height: auto;
	margin: 0 auto;
	background-color: var(--k-color-white);
	border-radius: 20px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	z-index: 1000;
	padding: 20px;
}
.class_list_category_pop.open {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}
.class_list_category_pop .class_list_category_pop_header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.class_list_category_pop .class_list_category_pop_header .dummy {
	flex-shrink: 1;
	flex-basis: 0;
}
.class_list_category_pop .class_list_category_pop_header .class_list_category_pop_header_title {
	font-size: 16px;
	font-weight: 700;
	color: var(--k-color-dark);
	text-align: center;
}
.class_list_category_pop .class_list_category_pop_header .class_list_category_pop_header_close {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	cursor: pointer;
	flex-shrink: 1;
}
.class_list_category_pop .class_list_category_pop_header .class_list_category_pop_header_close svg {
	width: 16px;
	height: 16px;
	color: var(--k-color-dark);
}

.class_list_category_pop .class_list_category_pop_body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}
.class_list_category_pop .class_list_category_pop_body h5 {
	font-size: 16px;
	font-weight: 700;
	color: var(--k-color-dark);
	margin: 0;
	padding: 0;
	line-height: 1;
}
.class_list_category_pop .class_list_category_pop_body ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.class_list_category_pop .class_list_category_pop_body ul li {
	flex-basis: 33.33333333333333%;
	padding: 5px;
}
.class_list_category_pop .class_list_category_pop_body ul li a {
	display: block;
	text-decoration: none;
	color: var(--k-color-dark-light);
	font-size: 14px;
	font-weight: 400;
	transition: var(--k-transition);
	padding: 10px;
	border-radius: 20px;
	background-color: var(--k-color-white);
	border: 1px solid var(--k-color-dark-light);
	text-wrap: nowrap;
	text-align: center;
}
.class_list_category_pop .class_list_category_pop_body ul li a.selected {
	color: var(--k-color-deeppurple);
	border: 1px solid var(--k-color-deeppurple);
}
.class_list_category_pop .class_list_category_pop_body .cl_class_gread,
.class_list_category_pop .class_list_category_pop_body .cl_class_type,
.class_list_category_pop .class_list_category_pop_body .cl_class_teacher {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.class_list_category_pop .class_list_category_pop_footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	gap: 10px;
}
.class_list_category_pop .class_list_category_pop_footer .class_list_category_pop_footer_cancel {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
}
.class_list_category_pop .class_list_category_pop_footer .class_list_category_pop_footer_cancel a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	cursor: pointer;
}
.class_list_category_pop .class_list_category_pop_footer .class_list_category_pop_footer_cancel a svg {
	width: 16px;
	height: 16px;
	color: var(--k-color-dark);
}
.class_list_category_pop .class_list_category_pop_footer .class_list_category_pop_footer_cancel a span {
	font-size: 14px;
	font-weight: 400;
	color: var(--k-color-dark);
}
.class_list_category_pop .class_list_category_pop_footer button {
	width: 100%;
	background-color: var(--k-color-deeppurple);
	color: var(--k-color-white);
	border: none;
	border-radius: 20px;
	padding: 10px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

@media (min-width: 576px) {
	.class_list_category_pop {
		width: 380px;
		top: 30px;
		left: 0;
		padding: 20px;
	}
}
@media (min-width: 768px) {
}

@media (min-width: 992px) {
	.class_list_category_pop {
		display: none;
		position: absolute;
		top: 30px;
		left: 0;
		width: 380px;
		min-height: 200px;
		padding: 30px;
	}
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

.class_list .class-list {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
}

/* 강의 준비중 */
.class_list .class_list_none {
	flex-basis: 100% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.class_list .class_list_none .none_class {
	width: 300px;
	height: auto;
	margin: 0 auto;
	padding: 20px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: 300px;
}

.class_list .class_list_none img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.class_list .class-list .class-list-box {
	width: 100%;
	flex-wrap: wrap;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.class_list .class-list .class-list-box li {
	flex-basis: 100%;
	margin-bottom: 30px;
}
@media (min-width: 576px) {
	.class_list .class-list .class-list-box {
		width: 100%;
		flex-wrap: wrap;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	.class_list .class-list .class-list-box li {
		flex-basis: 50%;
		margin-bottom: 50px;
	}
}
@media (min-width: 768px) {
	.class_list .class-list .class-list-box li {
		flex-basis: 50%;
		margin-bottom: 50px;
	}
}
@media (min-width: 992px) {
	.class_list .class-list .class-list-box li {
		flex-basis: 33.33333333333333%;
		margin-bottom: 50px;
	}
}
@media (min-width: 1200px) {
	.class_list .class-list .class-list-box li {
		flex-basis: 25%;
		margin-bottom: 50px;
	}
}
@media (min-width: 1400px) {
}

/********************
    페이징
********************/
.class_list_pagination {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.class_list_pagination ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 5px;
}
.class_list_pagination ul li {
	display: flex;
	align-items: center;
	justify-content: center;
}
.class_list_pagination ul li.class_list_pagination_prev {
	margin-right: 5px;
}
.class_list_pagination ul li.class_list_pagination_next {
	margin-left: 5px;
}
.class_list_pagination ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-decoration: none;
	font-size: 12px;
	font-weight: 400;
	transition: var(--k-transition);
	background-color: transparent;
	color: var(--k-color-dark);
}
.class_list_pagination ul li a.selected {
	background-color: var(--k-color-deeppurple);
	color: var(--k-color-white);
}

@media (min-width: 576px) {
	.class_list_pagination ul {
		gap: 10px;
	}
	.class_list_pagination ul li.class_list_pagination_prev {
		margin-right: 5px;
	}
	.class_list_pagination ul li.class_list_pagination_next {
		margin-left: 5px;
	}
	.class_list_pagination ul li a {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}
}
@media (min-width: 768px) {
	.class_list_pagination ul {
		gap: 15px;
	}
	.class_list_pagination ul li.class_list_pagination_prev {
		margin-right: 15px;
	}
	.class_list_pagination ul li.class_list_pagination_next {
		margin-left: 15px;
	}
	.class_list_pagination ul li a {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}
}

@media (min-width: 992px) {
	.class_list_pagination ul {
		gap: 15px;
	}
	.class_list_pagination ul li.class_list_pagination_prev {
		margin-right: 15px;
	}
	.class_list_pagination ul li.class_list_pagination_next {
		margin-left: 15px;
	}
	.class_list_pagination ul li a {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}
}

@media (min-width: 1200px) {
	.class_list_pagination ul {
		gap: 15px;
	}
	.class_list_pagination ul li.class_list_pagination_prev {
		margin-right: 15px;
	}
	.class_list_pagination ul li.class_list_pagination_next {
		margin-left: 15px;
	}
	.class_list_pagination ul li a {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}
}

@media (min-width: 1400px) {
	.class_list_pagination ul {
		gap: 15px;
	}
	.class_list_pagination ul li.class_list_pagination_prev {
		margin-right: 15px;
	}
	.class_list_pagination ul li.class_list_pagination_next {
		margin-left: 15px;
	}
	.class_list_pagination ul li a {
		width: 30px;
		height: 30px;
		font-size: 14px;
	}
}

/***************************
 * 교재 리스트
 */
.class_list .book-list {
	width: 100%;
	min-height: 300px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.class_list .book-list #main-book-list {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.class_list .book-list #main-book-list li {
	margin-bottom: 30px;
}

/* 로그인 & 가입 */
.session1 .session1_bg.bg1 {
	background-image: url("/images/home/main_banners/login_sign/xs_login_banner.gif");
}
/* 장바구니 */
.session1 .session1_bg.bg2 {
	background-image: url("/images/home/main_banners/cart/xs_cart_banner.gif");
}
/* 결제 */
.session1 .session1_bg.bg3 {
	background-image: url("/images/home/main_banners/payment/xs_pay_banner.gif");
}
/* 검색 */
.session1 .session1_bg.bg4 {
	background-image: url("/images/home/main_banners/search/xs_search_banner.gif");
}
/* 수업 라이브 */
.session1 .session1_bg.bg5 {
	background-image: url("/images/home/main_banners/class_live/xs_liveclass_banner.gif");
}
/* 동영상 강의 */
.session1 .session1_bg.bg6 {
	background-image: url("/images/home/main_banners/class_video/xs_videoclass_banner.gif");
}
/* 교재 구매 */
.session1 .session1_bg.bg7 {
	background-image: url("/images/home/main_banners/books/xs_book_banner.gif");
}
/* 학습평가 */
.session1 .session1_bg.bg8 {
	background-image: url("/images/home/main_banners/test/xs_test_banner.gif");
}
/* note */
.session1 .session1_bg.bg9 {
	background-image: url("/images/home/main_banners/note/xs_note_banner.gif");
}
/* ai */
.session1 .session1_bg.bg10 {
	background-image: url("/images/home/main_banners/ai/xs_ai_banner.gif");
}
/* center */
.session1 .session1_bg.bg11 {
	background-image: url("/images/home/main_banners/center/xs_center_banner.gif");
}

@media (min-width: 576px) {
	.session1 .session1_bg.bg1 {
		background-image: url("/images/home/main_banners/login_sign/xs_login_banner.gif");
	}
	.session1 .session1_bg.bg2 {
		background-image: url("/images/home/main_banners/cart/xs_cart_banner.gif");
	}
	.session1 .session1_bg.bg3 {
		background-image: url("/images/home/main_banners/payment/xs_pay_banner.gif");
	}
	.session1 .session1_bg.bg4 {
		background-image: url("/images/home/main_banners/search/xs_search_banner.gif");
	}
	.session1 .session1_bg.bg5 {
		background-image: url("/images/home/main_banners/class_live/xs_liveclass_banner.gif");
	}
	.session1 .session1_bg.bg6 {
		background-image: url("/images/home/main_banners/class_video/xs_videoclass_banner.gif");
	}
	.session1 .session1_bg.bg7 {
		background-image: url("/images/home/main_banners/books/xs_book_banner.gif");
	}
	.session1 .session1_bg.bg8 {
		background-image: url("/images/home/main_banners/test/xs_test_banner.gif");
	}
	.session1 .session1_bg.bg9 {
		background-image: url("/images/home/main_banners/note/xs_note_banner.gif");
	}
	.session1 .session1_bg.bg10 {
		background-image: url("/images/home/main_banners/ai/xs_ai_banner.gif");
	}
	.session1 .session1_bg.bg11 {
		background-image: url("/images/home/main_banners/center/xs_center_banner.gif");
	}
}
@media (min-width: 768px) {
	.session1 .session1_bg.bg1 {
		background-image: url("/images/home/main_banners/login_sign/md_login_banner.gif");
	}
	.session1 .session1_bg.bg2 {
		background-image: url("/images/home/main_banners/cart/md_cart_banner.gif");
	}
	.session1 .session1_bg.bg3 {
		background-image: url("/images/home/main_banners/payment/md_pay_banner.gif");
	}
	.session1 .session1_bg.bg4 {
		background-image: url("/images/home/main_banners/search/md_search_banner.gif");
	}
	.session1 .session1_bg.bg5 {
		background-image: url("/images/home/main_banners/class_live/md_liveclass_banner.gif");
	}
	.session1 .session1_bg.bg6 {
		background-image: url("/images/home/main_banners/class_video/md_videoclass_banner.gif");
	}
	.session1 .session1_bg.bg7 {
		background-image: url("/images/home/main_banners/books/md_book_banner.gif");
	}
	.session1 .session1_bg.bg8 {
		background-image: url("/images/home/main_banners/test/md_test_banner.gif");
	}
	.session1 .session1_bg.bg9 {
		background-image: url("/images/home/main_banners/note/md_note_banner.gif");
	}
	.session1 .session1_bg.bg10 {
		background-image: url("/images/home/main_banners/ai/md_ai_banner.gif");
	}
	.session1 .session1_bg.bg11 {
		background-image: url("/images/home/main_banners/center/md_center_banner.gif");
	}
}

@media (min-width: 992px) {
	.session1 .session1_bg.bg1 {
		background-image: url("/images/home/main_banners/login_sign/md_login_banner.gif");
	}
	.session1 .session1_bg.bg2 {
		background-image: url("/images/home/main_banners/cart/md_cart_banner.gif");
	}
	.session1 .session1_bg.bg3 {
		background-image: url("/images/home/main_banners/payment/md_pay_banner.gif");
	}
	.session1 .session1_bg.bg4 {
		background-image: url("/images/home/main_banners/search/md_search_banner.gif");
	}
	.session1 .session1_bg.bg5 {
		background-image: url("/images/home/main_banners/class_live/lg_liveclass_banner.gif");
	}
	.session1 .session1_bg.bg6 {
		background-image: url("/images/home/main_banners/class_video/md_videoclass_banner.gif");
	}
	.session1 .session1_bg.bg7 {
		background-image: url("/images/home/main_banners/books/md_book_banner.gif");
	}
	.session1 .session1_bg.bg8 {
		background-image: url("/images/home/main_banners/test/md_test_banner.gif");
	}
	.session1 .session1_bg.bg9 {
		background-image: url("/images/home/main_banners/note/md_note_banner.gif");
	}
	.session1 .session1_bg.bg10 {
		background-image: url("/images/home/main_banners/ai/md_ai_banner.gif");
	}
	.session1 .session1_bg.bg11 {
		background-image: url("/images/home/main_banners/center/md_center_banner.gif");
	}
}

@media (min-width: 1200px) {
	.session1 .session1_bg.bg1 {
		background-image: url("/images/home/main_banners/login_sign/lg_login_banner.gif");
	}
	.session1 .session1_bg.bg2 {
		background-image: url("/images/home/main_banners/cart/lg_cart_banner.gif");
	}
	.session1 .session1_bg.bg3 {
		background-image: url("/images/home/main_banners/payment/lg_pay_banner.gif");
	}
	.session1 .session1_bg.bg4 {
		background-image: url("/images/home/main_banners/search/lg_search_banner.gif");
	}
	.session1 .session1_bg.bg5 {
		background-image: url("/images/home/main_banners/class_live/lg_liveclass_banner.gif");
	}
	.session1 .session1_bg.bg6 {
		background-image: url("/images/home/main_banners/class_video/lg_videoclass_banner.gif");
	}
	.session1 .session1_bg.bg7 {
		background-image: url("/images/home/main_banners/books/lg_book_banner.gif");
	}
	.session1 .session1_bg.bg8 {
		background-image: url("/images/home/main_banners/test/lg_test_banner.gif");
	}
	.session1 .session1_bg.bg9 {
		background-image: url("/images/home/main_banners/note/lg_note_banner.gif");
	}
	.session1 .session1_bg.bg10 {
		background-image: url("/images/home/main_banners/ai/lg_ai_banner.gif");
	}
	.session1 .session1_bg.bg11 {
		background-image: url("/images/home/main_banners/center/lg_center_banner.gif");
	}
}

@media (min-width: 1400px) {
	.session1 .session1_bg.bg1 {
		background-image: url("/images/home/main_banners/login_sign/xl_login_banner.gif");
	}
	.session1 .session1_bg.bg2 {
		background-image: url("/images/home/main_banners/cart/xl_cart_banner.gif");
	}
	.session1 .session1_bg.bg3 {
		background-image: url("/images/home/main_banners/payment/xl_pay_banner.gif");
	}
	.session1 .session1_bg.bg4 {
		background-image: url("/images/home/main_banners/search/xl_search_banner.gif");
	}
	.session1 .session1_bg.bg5 {
		background-image: url("/images/home/main_banners/class_live/xl_liveclass_banner.gif");
	}
	.session1 .session1_bg.bg6 {
		background-image: url("/images/home/main_banners/class_video/xl_videoclass_banner.gif");
	}
	.session1 .session1_bg.bg7 {
		background-image: url("/images/home/main_banners/books/xl_book_banner.gif");
	}
	.session1 .session1_bg.bg8 {
		background-image: url("/images/home/main_banners/test/xl_test_banner.gif");
	}
	.session1 .session1_bg.bg9 {
		background-image: url("/images/home/main_banners/note/xl_note_banner.gif");
	}
	.session1 .session1_bg.bg10 {
		background-image: url("/images/home/main_banners/ai/xl_ai_banner.gif");
	}
	.session1 .session1_bg.bg11 {
		background-image: url("/images/home/main_banners/center/xl_center_banner.gif");
	}
}

.session1 .session1_bg h1 {
	color: var(--k-color-white);
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 15px;
}
.session1 .session1_bg small {
	color: var(--k-color-white);
	font-size: 16px;
	font-weight: 400;
	display: block;
	text-align: center;
	margin-bottom: 15px;
}

.session1 .session1_sub {
	width: 100%;
	min-height: 120px;
	background-color: var(--k-bg-white);
	margin-top: 10px;
	padding: 20px 30px;
	border-radius: 20px;
	transition: var(--k-session1sub-transition);
	opacity: 0;
	overflow: hidden;
}

@media (min-width: 576px) {
	.session1 {
		padding: 0 15px;
	}
	.session1 .session1_bg {
		border-radius: 30px 0 30px 30px;
		background-color: var(--k-bg-blue);
	}

	.session1 .session1_bg h1 {
		font-size: 30px;
		margin-top: 50px;
		margin-bottom: 15px;
	}
	.session1 .session1_bg small {
		font-size: 16px;
		margin-bottom: 15px;
	}

	.session1 .session1_sub {
		width: 540px;
		padding: 30px;
		border-radius: 30px;
		margin-top: -10px;
		margin-left: auto;
		margin-right: auto;
		min-height: 450px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	}
}
@media (min-width: 768px) {
	.session1 {
		padding: 0 30px;
	}
	.session1 .session1_bg {
		border-radius: 30px 0 30px 30px;
		min-height: 240px;
	}

	.session1 .session1_bg h1 {
		font-size: 30px;
		margin-top: 50px;
		margin-bottom: 20px;
	}
	.session1 .session1_bg small {
		font-size: 16px;
		margin-bottom: 15px;
	}

	.session1 .session1_sub {
		width: 720px;
		padding: 40px;
		border-radius: 40px;
		margin-top: -90px;
		margin-left: auto;
		margin-right: auto;
		min-height: 450px;
	}
}
@media (min-width: 992px) {
	.session1 {
		padding: 0 30px;
	}
	.session1 .session1_bg {
		border-radius: 30px 0 30px 30px;
		min-height: 300px;
	}

	.session1 .session1_bg h1 {
		font-size: 40px;
		margin-top: 50px;
		margin-bottom: 20px;
	}
	.session1 .session1_bg small {
		font-size: 20px;
		margin-bottom: 20px;
	}
	.session1 .session1_sub {
		width: 800px;
		padding: 40px 50px;
		border-radius: 40px;
		margin-top: -130px;
		margin-left: auto;
		margin-right: auto;
		min-height: 450px;
	}
}
@media (min-width: 1200px) {
	.session1 {
		padding: 0 30px;
	}
	.session1 .session1_bg {
		border-radius: 30px 0 30px 30px;
		min-height: 400px;
	}
	.session1 .session1_bg h1 {
		font-size: 50px;
		margin-top: 60px;
		margin-bottom: 20px;
	}
	.session1 .session1_bg small {
		font-size: 20px;
		margin-bottom: 20px;
	}
	.session1 .session1_sub {
		width: 800px;
		padding: 40px 50px;
		border-radius: 40px;
		margin-top: -210px;
		margin-left: auto;
		margin-right: auto;
		min-height: 450px;
	}
}

@media (min-width: 1400px) {
	.session1 {
		padding: 0 30px;
	}
	.session1 .session1_bg {
		border-radius: 30px 0 30px 30px;
		min-height: 400px;
	}

	.session1 .session1_bg h1 {
		font-size: 50px;
		margin-top: 60px;
		margin-bottom: 20px;
	}
	.session1 .session1_bg small {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.session1 .session1_sub {
		width: 800px;
		padding: 40px 50px;
		border-radius: 40px;
		margin-top: -200px;
		margin-left: auto;
		margin-right: auto;
		min-height: 450px;
	}
}

/*
    회원가입
*/

#join_form h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--k-color-dark);
	margin-bottom: 20px;
}

#join_form.step1 #step1_img {
	display: inline-block;
}
#join_form.step1 #step2_img {
	display: none;
}
#join_form.step1 #step3_img {
	display: none;
}
#join_form.step1 #bt_join_step1 {
	display: block;
}
#join_form.step1 #bt_join_step2 {
	display: none;
}
#join_form.step1 #bt_join_step3 {
	display: none;
}

#join_form.step2 #step1_img {
	display: none;
}
#join_form.step2 #step2_img {
	display: inline-block;
}
#join_form.step2 #step3_img {
	display: none;
}

#join_form.step2 #bt_join_step1 {
	display: none;
}
#join_form.step2 #bt_join_step2 {
	display: block;
}
#join_form.step2 #bt_join_step3 {
	display: none;
}

#join_form.step3 #step1_img {
	display: none;
}
#join_form.step3 #step2_img {
	display: none;
}
#join_form.step3 #step3_img {
	display: inline-block;
}

/* test */
#join_form.step0 #join_form_step1,
#join_form.step0 #join_form_step2,
#join_form.step0 #join_form_step3 {
	display: block;
}

#join_form.step1 #join_form_step1 {
	display: block;
}
#join_form.step2 #join_form_step1 {
	display: none;
}
#join_form.step3 #join_form_step1 {
	display: none;
}

#join_form.step1 #join_form_step2 {
	display: none;
}
#join_form.step2 #join_form_step2 {
	display: block;
}
#join_form.step3 #join_form_step2 {
	display: none;
}

#join_form.step1 #join_form_step3 {
	display: none;
}
#join_form.step2 #join_form_step3 {
	display: none;
}
#join_form.step3 #join_form_step3 {
	display: block;
}

#join_form_step3 h2 {
	display: none;
}

#join_form_step3 p {
	font-size: 14px;
	font-weight: 400;
	color: var(--k-color-dark-light);
	margin-bottom: 0.3rem;
}

#join_form_step1 .scroll-y {
	max-height: 300px;
	overflow-y: auto;
	padding: 10px;
	border: 1px solid var(--k-line-gray);
}

/*****************************
    장바구니
*****************************/

.session1_sub.cart {
	padding: 0;
}
.cart_header {
	background-color: var(--k-bg-white);
}
.cart_header_container {
	padding: 20px 30px 10px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--k-line-gray);
}
.cart_header_container a {
	font-size: 14px;
	font-weight: 700;
	color: var(--k-color-dark);
	text-decoration: none;
}
.cart_header_container .cart_item_delete a {
	font-weight: normal;
	color: var(--k-color-dark-light);
}

.cart_body {
	padding: 30px 30px;
	background-color: var(--k-color-deeppurple-light);
}

.cart_body .cart_items {
}
#cart_items_list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

#cart_items_list li {
	padding: 10px 30px;
	background-color: var(--k-color-white);
	border-radius: 20px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
#cart_items_list li .cart_item_box {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
#cart_items_list li .cart_item_box .cart_item_box_header {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--k-line-gray);
	padding: 10px 0;
	margin-bottom: 10px;
}
#cart_items_list li .cart_item_box .cart_item_box_header .cart_item_box_type {
	font-size: 14px;
	font-weight: 700;
	color: var(--k-color-dark);
}
#cart_items_list li .cart_item_box .cart_item_box_body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
}
#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_img {
	flex-basis: 160px;
	height: 160px;
	overflow: hidden;
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
	width: 100%;
}
#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_img .cart_item_box_check {
	position: absolute;
	top: 0;
	left: 0;
}
#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}
#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_content {
	flex: 1;
	position: relative;
	width: 100%;
	padding: 0 30px;
}

.cart_item_box_delete {
	position: absolute;
	top: 0;
	right: 0;
}
.cart_item_box_delete a {
	display: block;
	color: var(--k-color-dark-light);
}
.cart_item_box_delete a:hover {
	color: var(--k-color-dark);
}
.cart_item_box_content_title {
	font-size: 16px;
	font-weight: 700;
	color: var(--k-color-dark);
	margin-bottom: 0.5rem;
}
.cart_item_box_content_text p {
	font-size: 14px;
	font-weight: 400;
	color: var(--k-color-dark-light);
	margin-bottom: 0.3rem;
}
.cart_item_box_content_price {
	font-size: 16px;
	font-weight: 700;
	color: var(--k-color-dark);
	text-align: right;
}
#cart_items_list li .cart_item_box .cart_item_box_footer {
	display: block;
	margin-top: 10px;
	padding: 15px 0;
	border-top: 1px solid var(--k-line-gray);
	text-align: center;
}
#cart_items_list li .cart_item_box .cart_item_box_footer span {
	font-size: 16px;
	font-weight: 400;
	color: var(--k-color-dark-light);
}
#cart_items_list li .cart_item_box .cart_item_box_footer span.price {
	font-weight: 700;
	color: var(--k-color-dark);
	margin: 0 15px;
}

.cart_footer {
	padding: 30px 50px 50px 50px;
}
.cart_footer h5 {
	font-size: 20px;
	font-weight: 700;
	color: var(--k-color-dark);
}
.cart_footer h5.price {
	color: var(--k-color-deeppurple);
}
.cart_footer dl {
	font-size: 16px;
	font-weight: 400;
	color: var(--k-color-dark-light);
	margin-bottom: 10px;
}

@media (min-width: 576px) {
	.cart_header_container {
		padding: 20px 50px 10px 50px;
	}
	.cart_body {
		padding: 30px 50px;
	}

	#cart_items_list li {
		padding: 10px 50px;
		border-radius: 20px;
	}
}
@media (min-width: 768px) {
	.cart_header_container {
		padding: 20px 50px 10px 50px;
	}
	.cart_body {
		padding: 30px 50px;
	}
	#cart_items_list li {
		padding: 10px 50px;
		border-radius: 20px;
	}

	#cart_items_list li .cart_item_box .cart_item_box_body {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 15px;
	}
	#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_img {
		flex-basis: 200px;
		height: 120px;
		overflow: hidden;
		position: relative;
		padding-left: 30px;
		padding-right: 0;
	}
	#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_img .cart_item_box_check {
		position: absolute;
		top: 0;
		left: 0;
	}
	#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 10px;
	}
	#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_content {
		flex: 1;
		position: relative;
		padding: 0;
	}
}

@media (min-width: 992px) {
	.cart_header_container {
		padding: 20px 50px 10px 50px;
	}
	.cart_body {
		padding: 30px 50px;
	}
	#cart_items_list li {
		padding: 10px 50px;
		border-radius: 20px;
	}

	#cart_items_list li .cart_item_box .cart_item_box_body {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 15px;
	}
	#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_img {
		flex-basis: 290px;
		height: 160px;
		overflow: hidden;
		position: relative;
		padding-left: 30px;
	}
	#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_img .cart_item_box_check {
		position: absolute;
		top: 0;
		left: 0;
	}
	#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 10px;
	}
	#cart_items_list li .cart_item_box .cart_item_box_body .cart_item_box_content {
		flex: 1;
		position: relative;
	}
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*****************************
    강의 찾기
*****************************/

.search_box {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 30px;
}
.search_box .search_query_box {
	display: flex;
	flex-direction: column;
}
.search_box .search_query_box h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--k-color-dark);
}
.search_box .search_query_box_list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 30px;
}
.search_box .search_query_box_list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.search_box .search_query_box_list ul li {
	flex-basis: 50%;
	flex-shrink: 1;
}

.search_box .search_query_box_list a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	background-color: var(--k-bg-light);
	border-radius: 10px;
	text-decoration: none;
	color: var(--k-color-dark);
	margin: 10px 5px;
	position: relative;
}
.search_box .search_query_box_list a > .state_icon {
	position: absolute;
	top: 10px;
	right: 10px;
}
.search_box .search_query_box_list a .state_icon .check_on {
	display: none;
}
.search_box .search_query_box_list a .state_icon .check_off {
	display: block;
}

.search_box .search_query_box_list a .search_query_item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
}
.search_box .search_query_box_list a.selected {
	border: 1px solid var(--k-color-deeppurple);
	background-color: var(--k-color-deeppurple-light);
}
.search_box .search_query_box_list a.selected .state_icon .check_on {
	display: block;
}
.search_box .search_query_box_list a.selected .state_icon .check_off {
	display: none;
}
#class_type a .search_query_item {
	flex-direction: column;
}
#class_type a .search_query_item .search_query_item_icon {
	margin: 0;
}
.search_result {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.search_result h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--k-color-dark);
	margin-bottom: 10px;
}

.search_result .state_icon {
	display: block;
	text-align: center;
	margin-bottom: 10px;
}
.search_result .state_icon img {
	width: 20px;
	height: 20px;
	margin: 0 auto;
}
.search_result .state_icon .check_on {
	display: none;
}
.search_result .state_icon .check_off {
	display: block;
}
.search_result .selected .state_icon .check_on {
	display: block;
}
.search_result .selected .state_icon .check_off {
	display: none;
}

.search_result .class-list-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.search_result .class-list-box li {
	flex-basis: 100%;
	flex-shrink: 1;
	margin-bottom: 20px;
}
.search_result .class-list-box li .class-box {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.search_result .class-list-box li.selected .class-box {
	border: 2px solid var(--k-color-deeppurple);
}

.search_result #main-book-list {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.search_result #main-book-list li {
	flex-basis: 100%;
	flex-shrink: 1;
	margin-bottom: 20px;
}

.search_result #main-book-list li.selected .book-list-box {
	border: 2px solid var(--k-color-deeppurple);
	overflow: hidden;
}

/* search_buttons */
.search_buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 10px;
	margin-top: 20px;
}
.search_buttons_left {
	flex-basis: 50%;
}
.search_buttons_right {
	flex-basis: 50%;
}

@media (min-width: 576px) {
	.search_box .search_query_box_list ul li {
		flex-basis: 50%;
	}
	.search_result .class-list-box li {
		flex-basis: 50%;
	}
	.search_result .class-list-box li .class-box {
		width: 100%;
	}
	.search_result #main-book-list li {
		flex-basis: 50%;
	}
}
@media (min-width: 768px) {
	.search_box .search_query_box_list ul li {
		flex-basis: 33.33333333333333%;
	}

	.search_result .class-list-box li {
		flex-basis: 50%;
	}
	.search_result #main-book-list li {
		flex-basis: 50%;
	}
}

@media (min-width: 992px) {
	.search_box .search_query_box_list ul li {
		flex-basis: 33.33333333333333%;
	}

	.search_result .class-list-box li {
		flex-basis: 33.33333333333333%;
	}
	.search_result #main-book-list li {
		flex-basis: 33.33333333333333%;
	}
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*****************************
    결제
*****************************/

.payment_box .payment_box_title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--k-line-gray);
	padding-bottom: 10px;
}
.payment_box .payment_box_title h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--k-color-dark);
}
.payment_box .payment_box_title .openCloseArrow {
	cursor: pointer;
}

.payment_box .payment_item_list_box {
	display: flex;
	flex-direction: column;
	margin-bottom: 20px;
}
.payment_box .payment_item_list_box #payment_item_list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.payment_box .payment_item_list_box #payment_item_list li {
	flex-basis: 100%;
	flex-shrink: 1;
}
.payment_box .payment_item_list_box #payment_item_list li .cart_item_box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 5px;
}
.payment_box .payment_item_list_box #payment_item_list li .cart_item_box .cart_item_box_header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.payment_box .payment_item_list_box #payment_item_list .cart_item_box_type {
	font-weight: 700;
	color: var(--k-color-dark);
	font-size: 14px;
}

.payment_box .payment_item_list_box #payment_item_list li .cart_item_box .cart_item_box_body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
	width: 100%;
}
.payment_box .payment_item_list_box #payment_item_list li .cart_item_box .cart_item_box_body .cart_item_box_img {
	flex-basis: 160px;
	width: 160px;
	height: 120px;
	flex-shrink: 1;
	flex-grow: 1;
	background-color: var(--k-bg-light);
}
.payment_box .payment_item_list_box #payment_item_list li .cart_item_box .cart_item_box_body .cart_item_box_img img {
	width: auto;
	height: auto;
	max-height: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	border: 1px solid var(--k-line-gray);
}
.payment_box .payment_item_list_box #payment_item_list li .cart_item_box .cart_item_box_body .cart_item_box_content {
	flex-basis: 100%;
	flex-shrink: 1;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.payment_box .payment_item_list_box #payment_item_list .cart_item_box_content .cart_item_box_content_title,
.payment_box .payment_item_list_box #payment_item_list .cart_item_box_content .cart_item_box_content_price,
.payment_box .payment_item_list_box #payment_item_list .cart_item_box_content .cart_item_box_content_count {
	width: 100%;
}
.payment_box .payment_item_list_box #payment_item_list .cart_item_box_content .cart_item_box_content_price {
	text-align: right;
}

.payment_method_list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.payment_method_list li {
	flex-basis: 50%;
}
.payment_method_list li label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	cursor: pointer;
	border: 1px solid var(--k-line-gray);
	border-radius: 10px;
	padding: 20px;
	margin: 5px;
}
.payment_method_list li label.selected {
	border: 1px solid var(--k-color-deeppurple);
	background-color: var(--k-color-deeppurple-light);
}

.payment_method_list li label input {
	display: none;
}
.payment_method_list li label img {
	display: block;
}
.payment_method_list li label span {
	display: block;
}

/*****************************
    방송 강의
*****************************/

/*
    강의 상세보기
*/
.section.class_detail {
	margin-top: 20px;
}
.section.class_detail .class_detail_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}
.section.class_detail .class_detail_box .class_detail_box_right {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}

.section.class_detail .class_detail_box .class_detail_box_left {
	flex-basis: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}

.class_detail_box_right #class_detail_right_fix {
	width: 100%;
	display: none;
	position: relative;
	padding: 30px;
	background-color: var(--k-bg-white);
	border-radius: 15px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.class_detail_center {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
	padding: 30px;
	background-color: var(--k-bg-white);
	border-radius: 15px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.class_detail_center .class_buy_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

@media (min-width: 576px) {
}
@media (min-width: 768px) {
}

@media (min-width: 992px) {
	.section.class_detail .class_detail_box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
	.section.class_detail .class_detail_box .class_detail_box_right {
		flex-basis: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
	.section.class_detail .class_detail_box .class_detail_box_left {
		flex-basis: 100%;
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
}

@media (min-width: 1200px) {
	.section.class_detail .class_detail_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 30px;
	}
	.section.class_detail .class_detail_box .class_detail_box_right {
		flex-basis: 360px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
	.section.class_detail .class_detail_box .class_detail_box_left {
		flex-basis: 750px;
		width: 750px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}

	.class_detail_box_right #class_detail_right_fix {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
		padding: 30px;
		background-color: var(--k-bg-white);
		border-radius: 15px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	}

	.class_detail_center {
		display: none;
	}
}

@media (min-width: 1400px) {
	.section.class_detail .class_detail_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 30px;
	}
	.section.class_detail .class_detail_box .class_detail_box_right {
		flex-basis: 360px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
	.section.class_detail .class_detail_box .class_detail_box_left {
		flex-basis: 906px;
		width: 906px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
}

.class_detail_box_right #class_detail_right_fix .class_buy_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.class_buy_box .class_buy_title {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 5px;
}
.class_buy_box .class_buy_title .class_type_info {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.class_buy_box .class_buy_title .class_type_info .class_type_info_icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.class_buy_box .class_buy_title .class_type_info .class_type_info_text {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	font-size: 14px;
	color: var(--k-color-dark-light);
}

.class_buy_box .class_buy_title .class_title {
	font-size: 18px;
	font-weight: 700;
	color: var(--k-color-dark);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.class_buy_box .class_buy_title .class_teacher_box {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	margin-bottom: 10px;
}
.class_buy_box .class_buy_title .class_teacher_box .class_teacher_img {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-basis: 20px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	overflow: hidden;
}
.class_buy_box .class_buy_title .class_teacher_box .class_teacher_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.class_buy_box .class_buy_title .class_teacher_box .class_teacher_name {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	font-size: 14px;
	color: var(--k-color-dark-light);
}

/* 수강평 */
.class_buy_box .class_buy_title .class_evaluation_box {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.class_buy_box .class_buy_title .class_evaluation_box .class_evaluation_score_box {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
}
.class_buy_box .class_buy_title .class_evaluation_box .class_evaluation_score_box .class_evaluation_score_icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.class_buy_box .class_buy_title .class_evaluation_box .class_evaluation_score_box .class_evaluation_score_icon i {
	font-size: 16px;
	color: #4e64ed;
}
.class_buy_box .class_buy_title .class_evaluation_box .class_evaluation_score_box .class_evaluation_score {
	font-size: 16px;
	color: #4e64ed;
}
.class_buy_box .class_buy_title .class_evaluation_box .class_evaluation_score_box .class_evaluation_score_text {
	font-size: 14px;
	color: var(--k-color-dark-light);
}

/* 수강기간 및 가격 */
.class_buy_box .class_buy_title .class_info_price {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
.class_buy_box .class_buy_title .class_info_price .class_info_period {
	font-size: 14px;
	color: var(--k-color-dark-light);
}
.class_buy_box .class_buy_title .class_info_price .class_info_price_text {
	font-size: 18px;
	font-weight: 700;
	color: var(--k-color-dark);
}

/* 강의 일정 */
.class_buy_box .class_info_date {
	width: 100%;
	border-top: 1px solid var(--k-line-gray);
	border-bottom: 1px solid var(--k-line-gray);
	padding: 10px 0;
}
.class_buy_box .class_info_date dl {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	width: 100%;
}
.class_buy_box .class_info_date dl dt {
	font-size: 14px;
	color: var(--k-color-dark-light);
	font-weight: 700;
}
.class_buy_box .class_info_date dl dd {
	font-size: 14px;
	color: var(--k-color-dark);
	margin: 0;
	padding: 0;
}

.class_buy_box2 {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}
.class_buy_box2 .class_option_select_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.class_buy_box2 .class_option_select_box form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.class_buy_box2 .class_option_select_box .class_option_select {
	width: 100%;
}

.class_buy_box2 .class_buy_price {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}
.class_buy_box2 .class_buy_price .class_buy_price_text {
	font-size: 18px;
	color: var(--k-color-dark);
}
.class_buy_box2 .class_buy_price .class_buy_price_price {
	font-size: 18px;
	font-weight: 700;
	color: #5350b7;
	text-align: right;
}

.class_buy_box2 .class_buy_btn_view {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.class_buy_box2 .class_buy_btn_view a {
	width: 100%;
}
.class_buy_box2 .class_buy_btns {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	display: none;
}
.class_buy_box2 .class_buy_btns .class_buy_btn {
	flex-basis: 100%;
	flex-shrink: 1;
	flex-grow: 1;
}
.class_buy_box2 .class_buy_btns .class_buy_btn a {
	width: 100%;
	font-size: 14px;
}

/*
    강의 맛보기 영상
*/
.section.class_detail .class_detail_box .class_detail_box_left .class_review_video_box {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 210px;
	padding: 0;
	background-color: #ecf2ff;
	border-radius: 15px;
	overflow: hidden;
	position: relative;
}
.class_review_video_box .class_review_videos {
	width: 100%;
	height: 100%;
	background-color: rgb(186, 142, 226);
}
.class_review_video_box .class_review_videos .class_review_video_content {
	width: 100%;
	height: 100%;
	background-color: rgb(131, 30, 224);
	text-align: center;
	position: relative;
}
.class_review_video_box .class_review_videos .class_review_video_content video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.class_review_video_box .class_review_videos .class_review_video_content .class_review_video_play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}
.class_review_video_box .class_review_videos .class_review_video_content .class_review_video_play svg {
	width: 64px;
	height: 64px;
	color: var(--k-color-white);
}
.class_review_video_box .class_review_video_per,
.class_review_video_box .class_review_video_next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: var(--k-color-white);
	padding: 10px;
	border-radius: 50%;
}
.class_review_video_box .class_review_video_per {
	left: 10px;
}
.class_review_video_box .class_review_video_next {
	right: 10px;
}

@media (min-width: 576px) {
	.section.class_detail .class_detail_box .class_detail_box_left .class_review_video_box {
		height: 300px;
	}
}
@media (min-width: 768px) {
	.section.class_detail .class_detail_box .class_detail_box_left .class_review_video_box {
		height: 380px;
	}
}

@media (min-width: 992px) {
	.section.class_detail .class_detail_box .class_detail_box_left .class_review_video_box {
		height: 500px;
	}
}

@media (min-width: 1200px) {
	.section.class_detail .class_detail_box .class_detail_box_left .class_review_video_box {
		height: 420px;
	}
}
@media (min-width: 1400px) {
	.section.class_detail .class_detail_box .class_detail_box_left .class_review_video_box {
		height: 500px;
	}
}

/*
    동영상 강의 안내
*/
.section.class_detail .class_detail_box .class_detail_box_left .class_video_view_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	border-radius: 15px;
	padding: 20px;
	background-color: var(--k-bg-white);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	background-image: url("/images/home/menu2/class_sub/box_bg_xs.png");
	background-position: left bottom;
	background-repeat: no-repeat;
}
.class_video_view_box .class_video_view_title {
	width: 100%;
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	font-size: 14px;
	color: var(--k-color-dark-light);
	padding-left: 0px;
}
.class_video_view_box .class_video_view_title h5 {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--k-color-dark);
	margin-bottom: 5px;
}
.class_video_view_box .class_video_view_title p {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}
.class_video_view_box .class_video_view_content {
	flex-basis: 64px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
.class_video_view_box .class_video_view_content .class_video_icon {
	flex-basis: 90px;
	background-color: var(--k-bg-light);
	border-radius: 10px;
	overflow: hidden;
}
.class_video_view_box .class_video_view_content .class_video_icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.class_video_view_box .class_video_view_content a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	color: var(--k-color-dark);
	text-decoration: none;
}
.class_video_view_box .class_video_view_content a b {
	font-size: 16px;
	font-weight: 700;
}
.class_video_view_box .class_video_view_content a span {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	color: var(--k-color-dark-light);
}
@media (min-width: 576px) {
	.section.class_detail .class_detail_box .class_detail_box_left .class_video_view_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 20px;
		background-image: url("/images/home/menu2/class_sub/box_bg_xs.png");
	}
	.class_video_view_box .class_video_view_title {
		width: 100%;
		flex-basis: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 14px;
		color: var(--k-color-dark-light);
		padding-left: 10px;
	}
	.class_video_view_box .class_video_view_title h5 {
		margin: 0;
		padding: 0;
		font-size: 16px;
		font-weight: 700;
		color: var(--k-color-dark);
		margin-bottom: 5px;
	}
	.class_video_view_box .class_video_view_title p {
		margin: 0;
		padding: 0;
		line-height: 1.4;
	}
	.class_video_view_box .class_video_view_content {
		flex-basis: 400px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
	}
}
@media (min-width: 768px) {
	.section.class_detail .class_detail_box .class_detail_box_left .class_video_view_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		border-radius: 15px;
		padding: 20px;
		background-color: var(--k-bg-white);
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		background-image: url("/images/home/menu2/class_sub/box_bg_lg.png");
		background-position: left bottom;
		background-repeat: no-repeat;
	}
	.class_video_view_box .class_video_view_title {
		width: 100%;
		flex-basis: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 14px;
		color: var(--k-color-dark-light);
		padding-left: 80px;
	}
	.class_video_view_box .class_video_view_title h5 {
		margin: 0;
		padding: 0;
		font-size: 16px;
		font-weight: 700;
		color: var(--k-color-dark);
		margin-bottom: 5px;
	}
	.class_video_view_box .class_video_view_title p {
		margin: 0;
		padding: 0;
		line-height: 1.4;
	}
	.class_video_view_box .class_video_view_content {
		flex-basis: 400px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
	}
}

@media (min-width: 992px) {
	.section.class_detail .class_detail_box .class_detail_box_left .class_video_view_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		border-radius: 15px;
		padding: 20px;
		background-color: var(--k-bg-white);
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		background-image: url("/images/home/menu2/class_sub/box_bg_lg.png");
		background-position: left bottom;
		background-repeat: no-repeat;
	}
	.class_video_view_box .class_video_view_title {
		width: 100%;
		flex-basis: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 14px;
		color: var(--k-color-dark-light);
		padding-left: 80px;
	}
	.class_video_view_box .class_video_view_title h5 {
		margin: 0;
		padding: 0;
		font-size: 16px;
		font-weight: 700;
		color: var(--k-color-dark);
		margin-bottom: 5px;
	}
	.class_video_view_box .class_video_view_title p {
		margin: 0;
		padding: 0;
		line-height: 1.4;
	}
	.class_video_view_box .class_video_view_content {
		flex-basis: 400px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
	}
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*
    강의 소개 박스
*/
.section.class_detail .class_detail_box .class_detail_box_left .class_Description_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: var(--k-bg-white);
	border-radius: 15px;
	padding: 0;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.class_Description_box #class_nav_box {
	width: 100%;
	margin: 0;
	padding: 0 5px;
	list-style: none;
	background-color: var(--k-bg-white);
	border-radius: 0;
}
.class_Description_box #class_nav_box .class_nav_list {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.class_Description_box #class_nav_box .class_nav_list li {
	flex-basis: 100%;
	flex-shrink: 1;
	flex-grow: 1;
}
.class_Description_box #class_nav_box .class_nav_list li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 15px 5px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--k-color-dark);
	text-decoration: none;
}
.class_Description_box #class_nav_box .class_nav_list li a.active {
	border-bottom: 2px solid var(--k-color-deeppurple);
}
.class_Description_box .class_Description_box_content {
	width: 100%;
	padding: 0 15px;
}

@media (min-width: 576px) {
	.class_Description_box #class_nav_box {
		width: 516px;
		padding: 0 30px;
	}
	.class_Description_box #class_nav_box .class_nav_list {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 5px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.class_Description_box #class_nav_box .class_nav_list li a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 15px 10px;
		text-align: center;
		font-size: 12px;
		font-weight: 700;
		color: var(--k-color-dark);
		text-decoration: none;
	}
	.class_Description_box .class_Description_box_content {
		padding: 0 15px;
	}
}
@media (min-width: 768px) {
	.class_Description_box #class_nav_box {
		width: 696px;
		padding: 0 30px;
	}
	.class_Description_box #class_nav_box .class_nav_list {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 30px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.class_Description_box #class_nav_box .class_nav_list li {
		flex-basis: 100%;
		flex-shrink: 1;
		flex-grow: 1;
	}
	.class_Description_box #class_nav_box .class_nav_list li a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 20px 15px;
		text-align: center;
		font-size: 14px;
		font-weight: 700;
		color: var(--k-color-dark);
		text-decoration: none;
	}

	.class_Description_box .class_Description_box_content {
		padding: 0 20px;
	}
}

@media (min-width: 992px) {
	.class_Description_box #class_nav_box {
		width: 936px;
	}

	.class_Description_box #class_nav_box .class_nav_list {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 30px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.class_Description_box #class_nav_box .class_nav_list li {
		flex-basis: 100%;
		flex-shrink: 1;
		flex-grow: 1;
	}
	.class_Description_box #class_nav_box .class_nav_list li a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 20px 15px;
		text-align: center;
		font-size: 14px;
		font-weight: 700;
		color: var(--k-color-dark);
		text-decoration: none;
	}
	.class_Description_box .class_Description_box_content {
		padding: 0 30px;
	}
}
@media (min-width: 1200px) {
	.class_Description_box #class_nav_box {
		width: 733px;
	}
	.class_Description_box .class_Description_box_content {
		padding: 0 50px;
	}
}
@media (min-width: 1400px) {
	.class_Description_box #class_nav_box {
		width: 906px;
	}
}

/*
    강의 소개
*/
.class_Description_box .class_info {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background-color: #eae0d6;
}
/* 강의 소개 설명 */
.class_Description_box .class_info #class_Description_class_info_box {
	width: 100%;
	padding: 15px 0;
}
.class_Description_box .class_teacher_box #class_Description_teacher_info_photo {
	width: 100%;
	min-height: 300px;
	padding: 50px 0;
}
.class_Description_box .class_teacher_box #class_Description_teacher_info_video {
	width: 100%;
	min-height: 200px;
	position: relative;
	padding: 50px 0;
}
.class_Description_box .class_teacher_box #class_Description_teacher_info_video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--k-bg-dark);
}
.class_Description_box .class_teacher_box #class_Description_teacher_info_video .teacher_info_video_play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}
.class_Description_box .class_teacher_box #class_Description_teacher_info_video .teacher_info_video_play svg {
	width: 64px;
	height: 64px;
	color: var(--k-color-white);
}

#class_Description_outline,
#class_Description_book,
#class_Description_teacher,
#class_Description_review {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}
@media (min-width: 576px) {
	.class_Description_box .class_info #class_Description_class_info_box {
		padding: 15px 0;
	}
	#class_Description_outline,
	#class_Description_book,
	#class_Description_teacher,
	#class_Description_review {
		width: 100%;
		padding-top: 50px;
		padding-bottom: 50px;
	}
}
@media (min-width: 768px) {
	.class_Description_box .class_info #class_Description_class_info_box {
		padding: 20px 0;
	}
	#class_Description_outline,
	#class_Description_book,
	#class_Description_teacher,
	#class_Description_review {
		width: 100%;
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

@media (min-width: 992px) {
	.class_Description_box .class_info #class_Description_class_info_box {
		padding: 30px 0;
	}

	#class_Description_outline,
	#class_Description_book,
	#class_Description_teacher,
	#class_Description_review {
		width: 100%;
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

@media (min-width: 1200px) {
	.class_Description_box .class_info #class_Description_class_info_box {
		padding: 50px 0;
	}

	#class_Description_outline,
	#class_Description_book,
	#class_Description_teacher,
	#class_Description_review {
		width: 100%;
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

#class_Description_outline,
#class_Description_book,
#class_Description_teacher {
	border-bottom: 1px solid #e0e0e6;
}

.class_Description_box_header {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
	margin-bottom: 20px;
	gap: 10px;
}
.class_Description_box_header h5 {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--k-color-dark);
}
.class_Description_box_header small {
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: var(--k-color-dark-light);
}
/*
    강의 목차
*/
#class_Description_outline .class_Description_box_body {
	border: 1px solid #e0e0e6;
	border-radius: 10px;
	padding: 20px;
}
#class_Description_list_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
#class_Description_list_table,
#class_Description_list_table thead,
#class_Description_list_table tbody,
#class_Description_list_table tr {
	display: block;
	width: 100%;
}
#class_Description_list_table th,
#class_Description_list_table td {
	display: inline-block;
	border-bottom: none;
}
#class_Description_list_table tbody tr + tr {
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-top: 1px solid #e0e0e6;
}
#class_Description_list_table thead {
	border-bottom: 1px solid #e0e0e6;
}

#class_Description_list_table .co_gang {
	text-align: left;
	width: 18%;
}
#class_Description_list_table .co_title {
	color: var(--k-color-dark);
	font-weight: 700;
	width: 80%;
}

#class_Description_list_table .co_date,
#class_Description_list_table .co_time {
	color: var(--k-color-dark-light);
	padding: 0 0.5rem;
}
#class_Description_list_table .co_date {
	margin-left: 18%;
}

@media (min-width: 576px) {
}
@media (min-width: 768px) {
	#class_Description_list_table {
		width: 100%;
		border-collapse: collapse;
		font-size: 14px;
	}
	#class_Description_list_table,
	#class_Description_list_table thead,
	#class_Description_list_table tbody {
		display: table;
		width: 100%;
	}
	#class_Description_list_table tr {
		display: table-row;
		width: 100%;
	}
	#class_Description_list_table th,
	#class_Description_list_table td {
		display: table-cell;
	}

	#class_Description_list_table tbody tr + tr {
		padding-bottom: 5px;
		margin-bottom: 5px;
		border-top: 1px solid #e0e0e6;
	}
	#class_Description_list_table thead {
		border-bottom: 1px solid #e0e0e6;
	}

	#class_Description_list_table .co_gang {
		text-align: left;
		width: auto;
	}
	#class_Description_list_table .co_title {
		color: var(--k-color-dark);
		font-weight: 700;
		width: auto;
	}
	#class_Description_list_table .co_date,
	#class_Description_list_table .co_time {
		color: var(--k-color-dark-light);
		padding: 0.5rem;
	}
	#class_Description_list_table .co_date {
		margin-left: 0;
	}
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*
    강의 교재
*/
#class_Description_book .class_Description_box_body {
}

#class_Description_teacher_info_video {
	width: 100%;
	height: 500px;
}

.recommend-book-list-box ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.recommend-book-list-box ul li {
	flex-basis: 33.333333%;
	padding: 10px;
}

/*
    강사 소개 강사 박스
*/
.teacher_profile_box {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
	margin-bottom: 20px;
}
.teacher_profile_box .teacher_profile_box_img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid #e0e0e6;
}
.teacher_profile_box .teacher_profile_box_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.teacher_profile_box .teacher_profile_box_info {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.teacher_profile_box .teacher_profile_box_info div {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
}
.teacher_profile_box .teacher_profile_box_info div b {
	font-size: 14px;
	font-weight: 700;
	color: var(--k-color-dark);
	flex-basis: 70px;
}
.teacher_profile_box .teacher_profile_box_info div span {
	font-size: 14px;
	color: var(--k-color-dark-light);
	flex-basis: 100%;
}

.teacher_profile_box_intro {
	padding: 30px;
	font-size: 14px;
	color: var(--k-color-dark-light);
	line-height: 1.6;
	border: 1px solid #e0e0e6;
	border-radius: 15px;
}

/*
    수강평
*/
#class_Description_review .class_Description_box_body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
}

/*
    수강평 점수
*/
.class_review_score_box {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	border: 1px solid #e0e0e6;
	border-radius: 15px;
	padding: 20px;
	margin-bottom: 20px;
}
.class_review_score_box .class_review_score_flex {
	flex-basis: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 30px;
}
.class_review_score_box .class_review_score_flex .class_review_score_box_icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	flex-basis: 200px;
}
.class_review_score_box .class_review_score_flex .class_review_score_box_icon .class_review_score_box_score {
	font-size: 30px;
	font-weight: 700;
	color: #4e64ed;
}
.class_review_score_box .class_review_score_flex .class_review_score_box_bar {
	width: 100%;
}
.class_review_score_box_bar_flex {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.class_review_score_box_bar_flex .scoreBars {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	width: 100%;
}
.class_review_score_box_bar_flex .scoreBars .scoreBars_bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
}
.class_review_score_box_bar_flex .scoreBars .scoreBars_bar .scoreBars_bar_score {
	flex-basis: 40px;
	font-size: 14px;
	color: var(--k-color-dark-light);
}
.class_review_score_box_bar_flex .scoreBars .scoreBars_bar .scoreBars_bar_bar {
	flex-basis: 100%;
}
.class_review_score_box_bar_flex .scoreBars .scoreBars_bar .scoreBars_bar_bar .scoreBars_bar_bg {
	width: 100%;
	height: 14px;
	background-color: #e0e0e6;
	border-radius: 10px;
	overflow: hidden;
}
.class_review_score_box_bar_flex .scoreBars .scoreBars_bar .scoreBars_bar_bar .scoreBars_bar_bg .scoreBars_bar_bg_bar {
	width: 75%;
	height: 100%;
	background-color: #4e64ed;
	border-radius: 10px;
}
.class_review_score_box_bar_flex .scoreBars .scoreBars_bar .scoreBars_bar_bar_count {
	flex-basis: 90px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.class_review_score_box_bar_flex .scoreBars .scoreBars_bar .scoreBars_bar_bar_count span {
	font-size: 14px;
	color: var(--k-color-dark-light);
}

/*
    수강평 리스트
*/
.class_review_list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.class_review_list .class_review_list_header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.class_review_list .class_review_list_header .class_review_list_header_left {
	flex-basis: 300px;
}
.class_review_list .class_review_list_header .class_review_list_header_left #review_orderBys {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
#review_orderBys li {
	flex-basis: 100%;
}
#review_orderBys li a {
	font-size: 14px;
	color: var(--k-color-dark-light);
	text-decoration: none;
}
#review_orderBys li a.active {
	color: #5350b7;
	font-weight: 700;
}

.class_review_list .class_review_list_header .class_review_list_header_right {
	flex-basis: 160px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
.class_review_list .class_review_list_header .class_review_list_header_right a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	font-size: 14px;
	color: #5350b7;
	text-decoration: none;
}

/* 리스트 */
.class_review_list .class_review_list_body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-bottom: 30px;
}

/* 리스트 아이템 */
.class_review_list .class_review_list_body .class_review_lists {
	width: 100%;
	border-top: 1px solid #e0e0e6;
}
.class_review_list .class_review_list_body .class_review_lists ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.class_review_list .class_review_list_body .class_review_lists ul li {
	width: 100%;
	padding: 20px 0;
	border-bottom: 1px solid #e0e0e6;
}
.class_review_list .class_review_list_body .class_review_lists ul li .class_review_item {
	width: 100%;
}
.class_review_list .class_review_list_body .class_review_lists ul li .class_review_item_header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.class_review_list .class_review_list_body .class_review_lists ul li .class_review_item_header .student_profile_box {
	flex-basis: 100px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.class_review_list .class_review_list_body .class_review_lists ul li .class_review_item_header .class_review_item_date {
	flex-basis: 100px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	font-size: 14px;
	color: var(--k-color-dark-light);
}

.class_review_item_body_star {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.class_review_item_body_star .class_review_item_body_star_icon,
.class_review_item_body_star .class_review_item_body_star_score {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
}

/*****************************
    학생 프로필 박스
*****************************/
.student_profile_box {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.student_profile_box .student_profile_box_img {
	flex-basis: 100px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	border-radius: 50%;
	overflow: hidden;
}
.student_profile_box .student_profile_box_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.student_profile_box .student_profile_box_info {
	flex-basis: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}

/*****************************
    마이페이지
*****************************/

.mypage {
	width: 100%;
}

.mypage .mypage-header {
	padding: 20px 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
	color: var(--k-color-white);
}
.mypage .mypage-header .mypage-header-box {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--k-color-white);
}
.mypage .mypage-header .mypage-header-box img {
	width: 18px;
	height: 18px;
}
.mypage .mypage-header .mypage-header-box h5 {
	font-size: 18px;
	font-weight: 600;
	color: var(--k-color-white);
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.mypage .mypage-header .mypage-header-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 15px;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-photo {
	flex-basis: 80px;
	width: 80px;
	height: 80px;
	position: relative;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-photo .mypage-avatar-box {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-photo .mypage-avatar-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-photo .mypage-avatar-select {
	width: 26px;
	height: 26px;
	position: absolute;
	bottom: 0;
	right: 0;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-photo .mypage-avatar-select .mypage-avatar-select-btn {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: var(--k-bg-light);
	border: 0;
	cursor: pointer;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-text {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-text .mypage-myinfo-text-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-text .mypage-myinfo-text-row .mypage-myinfo-name {
	font-size: 14px;
	font-weight: 400;
	color: var(--k-color-white);
	margin: 0;
	padding: 0;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-text .mypage-myinfo-text-row .mypage-myinfo-name #mypage-myinfo-name {
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	padding: 0;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-text .mypage-myinfo-text-row .mypage-myinfo-function {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-text .mypage-myinfo-text-row .mypage-myinfo-function li {
	padding: 6px 0;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-text .mypage-myinfo-text-row .mypage-myinfo-function li + li a {
	border-left: 1px solid var(--k-color-white);
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-text .mypage-myinfo-text-row .mypage-myinfo-function li a {
	font-size: 12px;
	font-weight: 400;
	color: var(--k-color-white);
	text-decoration: none;
	line-height: 1;
	padding: 0 10px;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-alert {
	background-color: #3a376e;
	border-radius: 15px;
	padding: 20px;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-alert .mypage-myinfo-alert-box {
	flex-basis: calc(33.333333% - 5px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-alert .mypage-myinfo-alert-box .mypage-myinfo-sub-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 400;
	color: var(--k-color-white);
	margin: 0;
	padding: 0;
}
.mypage .mypage-header .mypage-header-row .mypage-myinfo-box .mypage-myinfo-row .mypage-myinfo-alert .mypage-myinfo-alert-box .mypage-myinfo-sub-row #mypage-alert-count {
	font-size: 18px;
	font-weight: 600;
	margin-right: 5px;
}

@media (min-width: 576px) {
	.mypage .session1_bg {
		min-height: 140px;
	}
	.mypage .mypage-header .mypage-header-row {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
	}
}
@media (min-width: 768px) {
	.mypage .session1_bg {
		min-height: 240px;
	}

	.mypage .mypage-header {
		width: 700px;
		margin: 0 auto;
	}
	.mypage .mypage-header .mypage-header-row {
		gap: 10px;
	}
	.mypage .mypage-header .mypage-header-row .mypage-myinfo-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 15px;
	}
}
@media (min-width: 992px) {
	.mypage .session1_bg {
		min-height: 250px;
	}

	.mypage .mypage-header {
		width: 900px;
		margin: 0 auto;
	}
	.mypage .mypage-header .mypage-header-row {
		gap: 10px;
	}
	.mypage .mypage-header .mypage-header-row .mypage-myinfo-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 15px;
	}
}
@media (min-width: 1200px) {
	.mypage .session1_bg {
		min-height: 260px;
	}
	.mypage .mypage-header {
		width: 1100px;
		margin: 0 auto;
	}
	.mypage .mypage-header .mypage-header-row {
		gap: 10px;
	}
	.mypage .mypage-header .mypage-header-row .mypage-myinfo-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 15px;
	}
}
@media (min-width: 1400px) {
	.mypage .mypage-header {
		width: 1300px;
		margin: 0 auto;
	}
	.mypage .mypage-header .mypage-header-row {
		gap: 10px;
	}
	.mypage .mypage-header .mypage-header-row .mypage-myinfo-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 15px;
	}
}

.mypage .mypage-menu {
	margin: 10px 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 15px;
	border-radius: 15px;
	background-color: var(--k-color-white);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.mypage .mypage-menu .container {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 0;
}
.mypage .mypage-menu .mypage-menus {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.mypage .mypage-menu ul {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1px;
}
.mypage .mypage-menu ul li {
	flex-basis: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.mypage .mypage-menu ul li a {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px;
	text-decoration: none;
	color: var(--k-color-dark);
}
.mypage .mypage-menu ul li a.active {
	background-color: #f2f1ff;
	border-radius: 7px;
}
.mypage .mypage-menu ul li a .mypage-menu-icon {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.mypage .mypage-menu ul li a .mypage-menu-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	max-width: 40px;
}

.mypage .mypage-menu ul li a .mypage-menu-text {
	font-size: 10px;
	font-weight: 400;
	color: var(--k-color-dark);
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

@media (min-width: 576px) {
	.mypage .mypage-menu {
		width: 100%;
		margin: 20px 0 0 0;
	}
	.mypage .mypage-menu ul li a {
		gap: 8px;
	}
	.mypage .mypage-menu ul li a .mypage-menu-icon img {
		max-width: 50px;
	}
	.mypage .mypage-menu ul li a .mypage-menu-text {
		font-size: 14px;
	}
}
@media (min-width: 768px) {
	.mypage .mypage-menu {
		width: 700px;
		margin: -60px auto 0 auto;
	}
}

@media (min-width: 992px) {
	.mypage .mypage-menu {
		width: 700px;
		margin: -80px auto 0 auto;
	}
}

@media (min-width: 1200px) {
	.mypage .mypage-menu {
		width: 700px;
		margin: -80px auto 0 auto;
	}
}

@media (min-width: 1400px) {
	.mypage .mypage-menu {
		width: 700px;
		margin: -80px auto 0 auto;
	}
}

.mypage .mypage-sub {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.mypage #mypage-sub2,
.mypage #mypage-sub3,
.mypage #mypage-sub4,
.mypage #mypage-sub5 {
	display: none;
}
.mypage .mypage-sub .mypage-sub-title {
	width: 100%;
	padding: 20px 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	border-bottom: 1px solid #e0e0e6;
}
.mypage .mypage-sub .mypage-sub-title h5 {
	width: 100%;
	font-size: 18px;
	font-weight: 700;
	color: var(--k-color-dark);
	margin: 0;
	padding: 10px;
	text-align: center;
}
.mypage .mypage-sub .mypage-sub-title .mypage-sub-nav {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.mypage .mypage-sub .mypage-sub-title .mypage-sub-nav ul {
	width: 90%;
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.mypage .mypage-sub .mypage-sub-title .mypage-sub-nav ul li {
	flex-basis: 50%;
}
.mypage .mypage-sub .mypage-sub-title .mypage-sub-nav ul li a {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--k-color-dark);
	border-bottom: 3px solid transparent;
	padding: 5px 5px 10px 5px;
}
.mypage .mypage-sub .mypage-sub-title .mypage-sub-nav ul li a.active {
	border-bottom: 3px solid var(--k-color-deeppurple);
}
.mypage .mypage-sub .mypage-sub-title .mypage-sub-nav ul li a span {
	font-size: 12px;
	font-weight: 600;
	color: var(--k-color-dark);
}
.mypage .mypage-sub .mypage-sub-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 200px;
	padding: 20px;
}
.mypage .mypage-sub .mypage-sub-content-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.mypage .mypage-sub .mypage-sub-content-box .mypage-sub-content-title {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.mypage .mypage-sub .mypage-sub-content-box .mypage-sub-content-title svg {
	width: 20px;
	height: 20px;
	color: var(--k-color-deeppurple);
}
.mypage .mypage-sub .mypage-sub-content-box .mypage-sub-content-title h6 {
	font-size: 16px;
	font-weight: 600;
	color: var(--k-color-dark);
	margin: 0;
}
.mypage .mypage-sub .mypage-sub-content-box .class-schedule {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-year {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-year span {
	font-size: 14px;
	font-weight: 400;
	color: var(--k-color-dark-light);
}
.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-date {
	width: 300px;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 600;
	color: var(--k-color-dark);
}
.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-date .class-schedule-date-prev {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-date .class-schedule-date-month {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-date .class-schedule-date-next {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-list {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	font-size: 12px;
}

.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-list .class-schedule-list-header {
	width: 100%;
}

.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-list .class-schedule-list-body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-list .class-schedule-list-body ul {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.mypage .mypage-sub .mypage-sub-content-box .class-schedule .class-schedule-list .class-schedule-list-body ul li {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.class-schedule .class-schedule-list .class-schedule-list-item {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px solid #e0e0e6;
}
.class-schedule .class-schedule-list .class-schedule-list-item .list-date {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.class-schedule .class-schedule-list .class-schedule-list-item .list-time {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.class-schedule .class-schedule-list .class-schedule-list-item .list-subject {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.class-schedule .class-schedule-list .class-schedule-list-item .list-status {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

@media (min-width: 576px) {
	.mypage .session1_sub {
		margin-top: 20px;
		width: 100%;
	}
	.mypage .mypage-sub .mypage-sub-title .mypage-sub-nav ul li a span {
		font-size: 12px;
	}
}
@media (min-width: 768px) {
	.mypage .session1_sub {
		margin-top: 20px;
		width: 100%;
	}
	.mypage .mypage-sub .mypage-sub-title .mypage-sub-nav ul li a span {
		font-size: 14px;
	}
}

@media (min-width: 992px) {
	.mypage .session1_sub {
		margin-top: 20px;
		width: 800px;
	}
	.mypage .mypage-sub .mypage-sub-title .mypage-sub-nav ul li a span {
		font-size: 14px;
	}
}

@media (min-width: 1200px) {
	.mypage .session1_sub {
		margin-top: 20px;
		width: 1000px;
	}
}

@media (min-width: 1400px) {
	.mypage .session1_sub {
		margin-top: 20px;
		width: 1300px;
	}
}

/* 주문 내역 페이지 전용 스타일 */
.orders-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.orders-header {
	margin-bottom: 30px;
}

.orders-header h2 {
	color: #2c3e50;
	font-weight: 600;
	margin-bottom: 10px;
}

.orders-header p {
	color: #6c757d;
	margin: 0;
}

/* 필터 탭 */
.filter-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 30px;
	border-bottom: 2px solid #f8f9fa;
	overflow-x: auto;
	white-space: nowrap;
}

.filter-tab {
	padding: 12px 20px;
	background: none;
	border: none;
	color: #6c757d;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.filter-tab:hover {
	color: #495057;
}

.filter-tab.active {
	color: #6f42c1;
	border-bottom-color: #6f42c1;
}

/* 주문 카드 */
.order-card {
	background: white;
	border-radius: 15px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	margin-bottom: 20px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.order-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.order-card-header {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	padding: 20px;
	border-bottom: 1px solid #dee2e6;
}

.order-basic-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 15px;
}

.order-number {
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 5px;
}

.order-date {
	color: #6c757d;
	font-size: 14px;
}

.order-status {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.status-paid {
	background: #d4edda;
	color: #155724;
}

.status-cancelled {
	background: #f8d7da;
	color: #721c24;
}

.status-refunded {
	background: #fff3cd;
	color: #856404;
}

.order-card-body {
	padding: 20px;
}

.order-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	flex-wrap: wrap;
	gap: 10px;
}

.order-items-info {
	flex: 1;
}

.main-item {
	font-weight: 600;
	color: #2c3e50;
	margin-bottom: 5px;
}

.additional-items {
	color: #6c757d;
	font-size: 14px;
}

.order-amount {
	text-align: right;
}

.total-amount {
	font-size: 18px;
	font-weight: 700;
	color: #6f42c1;
}

.point-used {
	font-size: 12px;
	color: #28a745;
	margin-top: 2px;
}

.order-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 15px;
	border-top: 1px solid #e9ecef;
	flex-wrap: wrap;
	gap: 10px;
}

.payment-method {
	color: #6c757d;
	font-size: 14px;
}

.has-book-badge {
	background: #e3f2fd;
	color: #1565c0;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
}

.order-actions {
	display: flex;
	gap: 10px;
}

.btn-detail {
	padding: 8px 16px;
	background: #6f42c1;
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.3s ease;
}

.btn-detail:hover {
	background: #5a2d91;
}

/* 빈 상태 */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: #6c757d;
}

.empty-state i {
	font-size: 48px;
	margin-bottom: 20px;
	color: #dee2e6;
}

.empty-state h3 {
	font-size: 18px;
	margin-bottom: 10px;
	color: #495057;
}

.empty-state p {
	margin-bottom: 20px;
}

.btn-shopping {
	background: #6f42c1;
	color: white;
	padding: 12px 24px;
	border: none;
	border-radius: 8px;
	text-decoration: none;
	display: inline-block;
	transition: background 0.3s ease;
}

.btn-shopping:hover {
	background: #5a2d91;
	color: white;
}

/* 로딩 상태 */
.loading-state {
	text-align: center;
	padding: 40px;
	color: #6c757d;
}

.loading-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #6f42c1;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 10px;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* 페이지네이션 */
.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.pagination {
	display: flex;
	gap: 5px;
	align-items: center;
}

.pagination button {
	padding: 8px 12px;
	border: 1px solid #dee2e6;
	background: white;
	color: #6c757d;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.pagination button:hover:not(:disabled) {
	background: #f8f9fa;
	border-color: #adb5bd;
}

.pagination button.active {
	background: #6f42c1;
	border-color: #6f42c1;
	color: white;
}

.pagination button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
	.orders-container {
		padding: 15px;
	}

	.filter-tabs {
		padding-bottom: 10px;
	}

	.filter-tab {
		padding: 10px 15px;
		font-size: 14px;
	}

	.order-basic-info {
		flex-direction: column;
		align-items: flex-start;
	}

	.order-summary {
		flex-direction: column;
		align-items: flex-start;
	}

	.order-amount {
		text-align: left;
		width: 100%;
	}

	.order-meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.order-actions {
		width: 100%;
		justify-content: flex-end;
	}
}

@media (max-width: 480px) {
	.order-card-header,
	.order-card-body {
		padding: 15px;
	}

	.orders-header h2 {
		font-size: 20px;
	}

	.total-amount {
		font-size: 16px;
	}
}

/*****************************
    동영상 강의
*****************************/

/*****************************
    강사 소개 영상 페이지
*****************************/

/* 이달의 인기 강사 */
.teacher_month_list_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	margin-bottom: 20px;
	margin-top: 20px;
	padding: 20px;
	border-radius: 15px;
	background-color: var(--k-color-pupple-light);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	text-align: center;
}
.teacher_month_list_box .teacher_month_list_box_header {
	display: flex;
	width: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.teacher_month_list_box .teacher_month_list_box_header h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--k-color-dark);
}
.teacher_month_list_box .teacher_month_list_box_header h3 span {
	color: var(--k-color-deeppurple);
	margin-left: 5px;
}
.teacher_month_list_box ul {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.teacher_month_list_box ul li {
	flex-basis: calc(33.333333% - 10px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.teacher_month_list_box ul li a {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none;
	font-size: 9pt;
}
.teacher_month_list_box ul li a img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	object-position: top;
	border-radius: 50%;
	overflow: hidden;
}
.teacher_month_list_box ul li a .teacher_month_list_name {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 8pt;
	font-weight: normal;
	color: var(--k-color-white);
	background-color: var(--k-color-deeppurple);
	padding: 10px 10px;
	border-radius: 50px;
}

@media (min-width: 576px) {
	.teacher_month_list_box {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 10px;
	}
	.teacher_month_list_box ul {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 60px;
	}
	.teacher_month_list_box ul li {
		flex-basis: calc(33.333333%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.teacher_month_list_box ul li a img {
		width: 90px;
		height: 90px;
	}
}
@media (min-width: 768px) {
	.teacher_month_list_box {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 10px;
	}
	.teacher_month_list_box ul {
		gap: 70px;
	}
	.teacher_month_list_box ul li {
		flex-basis: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}

@media (min-width: 992px) {
	.teacher_month_list_box {
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 10px;
	}
	.teacher_month_list_box .teacher_month_list_box_header {
		flex-basis: 120px;
		text-align: left;
	}
	.teacher_month_list_box .teacher_month_list_box_header h3 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 7px;
	}
	.teacher_month_list_box .teacher_month_list_box_header h3 span {
		display: block;
	}

	.teacher_month_list_box ul {
		width: calc(100% - 120px);
		gap: 40px;
	}
	.teacher_month_list_box ul li {
		flex-basis: 20%;
	}
}

@media (min-width: 1200px) {
	.teacher_month_list_box {
		gap: 10px;
	}
}

@media (min-width: 1400px) {
}

/* 강사 목록 */
.teacher_list_box {
	width: 100%;
	margin-top: 7px;
}
.teacher_item_list {
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 15px;
}
.teacher_item_list li {
	width: 100%;
	flex-basis: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.teacher_item_list li .teacher_item_link {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	text-decoration: none;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	border: 1px solid #e0e0e6;
	color: var(--k-color-dark);
	background-color: var(--k-color-white);
}
.teacher_item_list li .teacher_item_link .teacher_item {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.teacher_item_list li .teacher_item_link .teacher_item img {
	max-width: 100%;
	height: auto;
	border-radius: 15px;
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie {
	border-radius: 15px;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	background-color: var(--k-color-gray-light);
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	opacity: 1;
	cursor: pointer;
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie .teacher-youtube-videos-box {
	position: relative;
	width: 100%;
	height: 100%;
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie .teacher-youtube-videos-box iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie:hover img {
	transition: opacity 1.5s ease-in-out;
	opacity: 0;
	width: 0;
	height: 0;
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-arounden;
	gap: 10px;
	padding: 10px 20px;
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_name {
	flex-basis: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_name .teacher_item_img {
	width: 30px;
	height: 30px;
	object-fit: cover;
	object-position: top;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 10px;
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_name .teacher_item_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType {
	width: 100px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
}
.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType span {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 400;
	color: var(--k-color-dark);
	padding: 7px 20px;
	border-radius: 50px;
	background-color: var(--k-color-gray-light);
}

/*
    강사 상세보기 모달
*/
#teacherDetailModal,
.teacher_detail_modal {
	background-color: transparent;
}
.teacherDetail-header {
	background-color: transparent;
	border: 0;
	padding: 0;
	position: relative;
	border-radius: 15px 15px 0 0;
	overflow: hidden;
}
.teacherDetail-header button {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 100;
	background-color: transparent;
	border: 0;
	padding: 0;
	width: 30px;
	height: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	color: var(--k-color-dark);
	font-size: 18px;
	font-weight: 700;
}

.teacherDetail-header .teacherDetail-header-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9; /* 유튜브 기본 비율 */
}
.teacherDetail-header .teacherDetail-header-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.teacherDetail-body {
	background-color: var(--k-color-white);
	border-radius: 0 0 15px 15px;
	overflow: hidden;
}

.teacher_detail_modal_content {
	padding: 20px;
}

.teacher_detail_modal_content_title {
	width: 100%;
}
.teacher_detail_modal_content_title h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--k-color-dark);
}
.teacher_profile_box_representative_class {
	width: 100%;
	padding-top: 20px;
}
.teacher_profile_box_representative_class h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--k-color-dark);
}

/*  추천강의  */
#representative_class_list {
	width: 100%;
}
#representative_class_list li {
	width: 100%;
	flex-basis: 100%;
}

#representative_class_list .class-box-body {
	height: auto !important;
}

.teacher_detail_modal_footer {
	background-color: transparent;
	border: 0;
	padding: 15px;
	text-align: center;
}

.teacher_detail_modal_button {
	background-color: transparent;
	border: 1px solid var(--k-color-white);
	color: var(--k-color-white);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 30px;
	border-radius: 50px;
	overflow: hidden;
}
.teacher_detail_modal_button:hover {
	background-color: var(--k-color-white);
	color: var(--k-color-dark);
}

@media (min-width: 576px) {
	.teacher_item_list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
	}
	.teacher_item_list li {
		width: 100%;
		flex-basis: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie {
		width: 100%;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content {
		gap: 10px;
		padding: 10px 20px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_name .teacher_item_img {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType {
		width: 100px;
		gap: 5px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType span {
		font-size: 12px;
		padding: 7px 20px;
	}
	#representative_class_list li {
		width: 33.333333%;
		flex-basis: 33.333333%;
	}
}
@media (min-width: 768px) {
	.teacher_item_list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
	}
	.teacher_item_list li {
		width: 100%;
		flex-basis: calc(50% - 15px);
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie {
		width: 100%;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content {
		gap: 10px;
		padding: 10px 20px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_name .teacher_item_img {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType {
		width: 100px;
		gap: 5px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType span {
		font-size: 12px;
		padding: 7px 20px;
	}
	#representative_class_list li {
		width: 33.333333%;
		flex-basis: 33.333333%;
	}
}

@media (min-width: 992px) {
	.teacher_item_list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
	}
	.teacher_item_list li {
		width: 100%;
		flex-basis: calc(50% - 15px);
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie {
		width: 100%;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content {
		gap: 10px;
		padding: 10px 20px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_name .teacher_item_img {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType {
		width: 100px;
		gap: 5px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType span {
		font-size: 12px;
		padding: 7px 20px;
	}
	#representative_class_list li {
		width: 33.333333%;
		flex-basis: 33.333333%;
	}
}

@media (min-width: 1200px) {
	.teacher_item_list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
	}
	.teacher_item_list li {
		flex-basis: calc(33.3333% - 15px);
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie {
		width: 100%;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content {
		gap: 10px;
		padding: 10px 20px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_name .teacher_item_img {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType {
		width: 100px;
		gap: 5px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType span {
		font-size: 12px;
		padding: 7px 20px;
	}

	#representative_class_list li {
		width: 33.333333%;
		flex-basis: 33.333333%;
	}
}

@media (min-width: 1400px) {
	.teacher_item_list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
	}
	.teacher_item_list li {
		flex-basis: calc(33.3333% - 15px);
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_movie {
		width: 100%;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content {
		gap: 10px;
		padding: 10px 20px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_name .teacher_item_img {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType {
		width: 100px;
		gap: 5px;
	}
	.teacher_item_list li .teacher_item_link .teacher_item .teacher_item_content .teacher_item_classType span {
		font-size: 12px;
		padding: 7px 20px;
	}

	#representative_class_list li {
		width: 33.333333%;
		flex-basis: 33.333333%;
	}
}

/*****************************
    수강평
*****************************/
.review_item_list {
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 15px;
	font-size: 12px;
}
.review_item_list li {
	width: 100%;
	flex-basis: 100%;
	flex-grow: 0;
	flex-shrink: 0;
}
.review_item_list li .review_item_box {
	background-color: var(--k-color-white);
	border-radius: 10px;
	overflow: hidden;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.review_item_list li .review_item_box .review_item_box_header {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 7px;
}
.review_item_list li .review_item_box .review_item_box_header .review_item_box_student {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
}
.review_item_list li .review_item_box .review_item_box_header .review_item_box_student .review_item_box_student_img {
	flex-basis: 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.review_item_list li .review_item_box .review_item_box_header .review_item_box_student .review_item_box_student_img img {
	width: 40px;
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}
.review_item_list li .review_item_box .review_item_box_header .review_item_box_student .review_item_box_student_info {
	color: var(--k-color-dark);
	flex-grow: 1;
}

.review_item_list li .review_item_box .review_item_box_header .review_item_box_star {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	color: var(--k-color-dark-light);
}

.review_item_list li .review_item_box .review_item_box_body {
	width: 100%;
	height: 120px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--k-line-gray) transparent;
}

.review_item_list li .review_item_box .review_item_box_body::-webkit-scrollbar {
	width: 6px;
}
.review_item_list li .review_item_box .review_item_box_body::-webkit-scrollbar-track {
	background: transparent;
}
.review_item_list li .review_item_box .review_item_box_body::-webkit-scrollbar-thumb {
	background-color: var(--k-line-gray);
	border-radius: 3px;
}
.review_item_list li .review_item_box .review_item_box_body .review_item_box_content {
	width: 100%;
	color: var(--k-color-dark-light);
}
.review_item_list li .review_item_box .review_item_box_footer {
	border-top: 1px solid var(--k-line-gray);
	padding-top: 5px;
	margin-top: 5px;
	width: 100%;
}
.review_item_list li .review_item_box .review_item_box_footer .review_item_box_classinfo {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
}
.review_item_list li .review_item_box .review_item_box_footer .review_item_box_classinfo .review_item_box_classinfo-img {
	flex-basis: 80px;
	flex-grow: 0;
	flex-shrink: 0;
}
.review_item_list li .review_item_box .review_item_box_footer .review_item_box_classinfo .review_item_box_classinfo-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: solid 1px var(--k-line-gray);
}
.review_item_list li .review_item_box .review_item_box_footer .review_item_box_classinfo .review_item_box_classinfo-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 5px;
	flex-grow: 1;
	font-size: 9pt;
	color: var(--k-color-dark-light);
}

@media (min-width: 576px) {
	.review_item_list {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 15px;
		font-size: 12px;
	}
	.review_item_list li {
		flex-basis: calc(50% - 15px);
		flex-grow: 0;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
}
@media (min-width: 768px) {
	.review_item_list {
		gap: 15px;
		font-size: 12px;
	}
	.review_item_list li {
		flex-basis: calc(50% - 15px);
	}
}

@media (min-width: 992px) {
	.review_item_list {
		gap: 15px;
		font-size: 12px;
	}
	.review_item_list li {
		flex-basis: calc(33.333333% - 15px);
	}
}

@media (min-width: 1200px) {
	.review_item_list {
		gap: 15px;
		font-size: 14px;
	}
	.review_item_list li {
		flex-basis: calc(25% - 15px);
	}
}

@media (min-width: 1400px) {
	.review_item_list {
		gap: 20px;
		font-size: 14px;
	}
	.review_item_list li {
		flex-basis: calc(25% - 20px);
	}
}

/*****************************
    게시판
*****************************/
/*  게시판 선택  */
.board_type_box {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.board_type_box #board_type_list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	border-radius: 50px;
	overflow: hidden;
	border: 1px solid var(--k-color-deeppurple);
}
.board_type_box #board_type_list li {
	flex-shrink: 1;
	flex-grow: 1;
}
.board_type_box #board_type_list li a {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 10px 15px;
	border-radius: 50px;
	overflow: hidden;
	text-decoration: none;
	color: var(--k-color-dark-light);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	transition: var(--k-transition);
}
.board_type_box #board_type_list li a.active {
	background-color: var(--k-color-deeppurple);
	color: var(--k-color-white);
}

/*  게시물 목록  */
.board_list_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.board_list_box #board_item_list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.board_list_box #board_item_list li {
	width: 100%;
	flex-basis: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 30px;
}
.board_list_box #board_item_list li a {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 0 15px;
	text-decoration: none;
}
.board_list_box #board_item_list li a .board_item {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	overflow: hidden;
	border: 1px solid #e0e0e6;
}
.board_list_box #board_item_list li a .board_item .board_item_img {
	height: 120px;
	width: 100%;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.board_list_box #board_item_list li a .board_item .board_item_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}
.board_list_box #board_item_list li a .board_item .board_item_content {
	width: 100%;
	padding: 15px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 7px;
	border-top: 1px solid #e0e0e6;
}
.board_list_box #board_item_list li a .board_item .board_item_content .board_item_type {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.board_item_type span {
	border: 1px solid var(--k-color-deeppurple);
	color: var(--k-color-deeppurple);
	font-size: 12px;
	font-weight: 400;
	padding: 3px 15px;
	border-radius: 30px;
}
.board_list_box #board_item_list li a .board_item .board_item_content .board_item_title {
	width: 100%;
}
.board_list_box #board_item_list li a .board_item .board_item_content .board_item_title h3 {
	font-size: 14px;
	font-weight: 700;
	color: var(--k-color-dark);
	margin: 0;
	padding: 0;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}
.board_list_box #board_item_list li a .board_item .board_item_content .board_item_date {
	color: var(--k-color-dark-light);
	font-size: 12px;
	font-weight: 400;
	margin-bottom: 10px;
}

@media (min-width: 576px) {
	.board_type_box #board_type_list li a.active {
		background-color: var(--k-color-deeppurple);
		color: var(--k-color-white);
	}

	.board_type_box {
		width: 100%;
		margin-bottom: 30px;
	}
	.board_list_box #board_item_list li {
		width: 50%;
		flex-basis: 50%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 30px;
	}
	.board_type_box #board_type_list li a {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 10px 30px;
		border-radius: 50px;
		overflow: hidden;
		text-decoration: none;
		color: var(--k-color-dark-light);
		font-size: 14px;
		font-weight: 700;
		text-align: center;
		transition: var(--k-transition);
	}
	.board_list_box #board_item_list li a .board_item .board_item_content {
		width: 100%;
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 7px;
		border-top: 1px solid #e0e0e6;
	}
	.board_list_box #board_item_list li a .board_item .board_item_content .board_item_date {
		margin-bottom: 10px;
	}
}
@media (min-width: 768px) {
	.board_list_box #board_item_list li {
		width: 33.3333%;
		flex-basis: 33.3333%;
		margin-bottom: 30px;
	}
}

@media (min-width: 992px) {
	.board_list_box #board_item_list li {
		width: 25%;
		flex-basis: 25%;
		margin-bottom: 30px;
	}
}

@media (min-width: 1200px) {
	.board_list_box #board_item_list li {
		width: 25%;
		flex-basis: 25%;
		margin-bottom: 30px;
	}
}

@media (min-width: 1400px) {
}

/*****************************
    페이징
*****************************/
.class_review_list .class_review_list_footer {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.class_detail_recommend_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
	margin-bottom: 20px;
	margin-top: 50px;
}
.class_detail_recommend_box .class_detail_recommend_header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.class_detail_recommend_box .class_detail_recommend_header h5 {
	font-size: 18px;
	font-weight: 700;
	color: var(--k-color-dark);
	flex-basis: 100%;
}
.class_detail_recommend_box .class_detail_recommend_header a {
	font-size: 14px;
	color: var(--k-color-dark-light);
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	flex-basis: 100px;
	text-decoration: none;
	text-align: right;
	padding-right: 10px;
}
.class_detail_recommend_box .class_detail_recommend_body {
	width: 100%;
}
@media (min-width: 576px) {
}
@media (min-width: 768px) {
}

@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}

/*****************************
    고객지원
*****************************/
.customer_center_banner_box1 {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 30px;
}
.customer_center_banner_box2 {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}
.customer_center_banner {
	width: 100%;
	align-items: center;
	background-color: var(--k-color-white);
	padding: 20px;
	border-radius: 20px;
	border: 1px solid #e0e0e6;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	text-align: left;
	text-decoration: none;
}
.customer_center_banner h5,
.customer_center_banner p {
	font-size: 16px;
	font-weight: 700;
	color: var(--k-color-dark);
	margin: 0;
	padding: 0;
	line-height: 1.2;
}
.customer_center_banner span {
	font-size: 14px;
	color: var(--k-color-dark-light);
	margin: 0;
	padding: 0;
	line-height: 1.2;
}
.customer_center_banner_box1 .customer_center_banner_1 {
	height: auto;
	background-image: url(/images/home/menu5/center_box01_xs.png);
	background-size: auto;
	background-position: 95% 50%;
	background-repeat: no-repeat;
}
.customer_center_banner_box1 .customer_center_banner_2 {
	height: auto;
	background-image: url(/images/home/menu5/center_box02_xs.png);
	background-size: auto;
	background-position: 95% 50%;
	background-repeat: no-repeat;
}
.customer_center_banner_box1 .customer_center_banner_3 {
	height: auto;
	background-image: url(/images/home/menu5/center_box03_xs.png);
	background-size: auto;
	background-position: 95% 50%;
	background-repeat: no-repeat;
}

@media (min-width: 576px) {
}
@media (min-width: 768px) {
	.customer_center_banner_box1 {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 20px;
		margin-bottom: 50px;
	}
	.customer_center_banner_box2 {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
	}

	.customer_center_banner {
		padding: 20px;
	}

	.customer_center_banner_box1 .customer_center_banner_1 {
		height: 195px;
		background-image: url(/images/home/menu5/center_box01_md.png);
		background-position: right bottom;
		background-size: 50%;
	}
	.customer_center_banner_box1 .customer_center_banner_2 {
		height: auto;
		background-image: url(/images/home/menu5/center_box02_md.png);
		background-position: right bottom;
		background-size: 38%;
	}
	.customer_center_banner_box1 .customer_center_banner_3 {
		height: auto;
		background-image: url(/images/home/menu5/center_box03_md.png);
		background-position: right bottom;
		background-size: 48%;
	}
	.customer_center_banner h5,
	.customer_center_banner p {
		font-size: 18px;
	}
	.customer_center_banner span {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	.customer_center_banner_box1 {
		gap: 20px;
		margin-bottom: 50px;
	}

	.customer_center_banner {
		padding: 30px;
	}

	.customer_center_banner_box1 .customer_center_banner_1 {
		height: 240px;
		background-image: url(/images/home/menu5/center_box01_xl.png);
		background-position: right bottom;
		background-size: 40%;
	}
	.customer_center_banner_box1 .customer_center_banner_2 {
		height: auto;
		background-image: url(/images/home/menu5/center_box02_xl.png);
		background-position: right bottom;
		background-size: 45%;
	}
	.customer_center_banner_box1 .customer_center_banner_3 {
		height: auto;
		background-image: url(/images/home/menu5/center_box03_xl.png);
		background-position: right bottom;
		background-size: 55%;
	}
	.customer_center_banner h5,
	.customer_center_banner p {
		font-size: 20px;
	}
	.customer_center_banner span {
		font-size: 18px;
	}
}
@media (min-width: 1200px) {
}
@media (min-width: 1400px) {
}

/*****************************
    에듀라이브 소개
*****************************/

.about-banners {
	width: 100%;
	height: 420px;
}

.about-banner {
	width: 100%;
	height: 100%;
	background-image: url(/images/home/menu1/about_broadcast/main_content_bg_md.png);
	background-size: 100%;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #eaeff2;
}
.about-banner-video {
	width: 100%;
	height: 100%;
	background-image: url(/images/home/menu1/about_video/main_content_bg_md.png);
	background-size: 100%;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #eaeff2;
}
.about-banner-live {
	width: 100%;
	height: 100%;
	background-image: url(/images/home/menu1/about_live/main_content_bg_md.png);
	background-size: 100%;
	background-position: center bottom;
	background-repeat: no-repeat;
	background-color: #f5f5f5;
}

.about-banner .about-banner-item-title,
.about-banner-video .about-banner-item-title,
.about-banner-live .about-banner-item-title {
	padding-top: 50px;
	text-align: center;
}
.about-banner .about-banner-item-title img,
.about-banner-video .about-banner-item-title img,
.about-banner-live .about-banner-item-title img {
	width: auto;
	height: auto;
}
.about-banner .about-banner-item-title img.md,
.about-banner-video .about-banner-item-title img.md,
.about-banner-live .about-banner-item-title img.md {
	width: 300px;
	height: auto;
	display: block;
	margin: 0 auto;
}
.about-banner .about-banner-item-title img.xl,
.about-banner-video .about-banner-item-title img.xl,
.about-banner-live .about-banner-item-title img.xl {
	display: none;
}

/* page 네비 */
.page-nav {
	width: 100%;
	background-color: #5350b7;
}
.page-nav-items {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.page-nav-items .page-nav-item {
	flex-basis: 33.333333%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.page-nav-items .page-nav-item a {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--k-color-white);
	font-size: 14px;
	text-align: center;
	padding: 10px 0;
	border-bottom: 2px solid transparent;
}

.page-nav-items .page-nav-item a.active {
	border-bottom: 2px solid var(--k-color-white);
}
.page-section {
	padding: 40px 0 0 0;
}
.session-full {
}

.session-deep-pupple {
	background-color: #7560e3;
}
.session-green {
	background-color: #30614e;
}
.session-green-light {
	background-color: #e1f2e0;
}
.session-pupple {
	background-color: var(--k-color-pupple-light);
}
.session-white {
	background-color: var(--k-color-white);
}
.session-pink {
	background-color: var(--k-color-pink-light);
}
.session-blue {
	background-color: #2c355c;
}

#broadcast_video {
	max-width: 800px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-section .session-title {
	display: block;
	font-size: 28px;
	text-align: center;
	margin-bottom: 10px;
	font-weight: 900;
}
.page-section .session-title b {
	color: #5350b7;
}
.page-section p.small {
	font-size: 14px;
	color: var(--k-color-dark-light);
	text-align: center;
	margin-bottom: 20px;
}

.session-blue .session-title {
	color: #fff;
}
.session-blue .session-title b {
	color: #d3d3ff;
}
.session-blue p.small {
	color: #e1e1e9;
}

.page-section .session-content {
	width: 100%;
	padding-bottom: 30px;
}

.page-section .session-content img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}

.page-section .session-content img.xs {
	display: block;
}
.page-section .session-content img.md {
	display: none;
}

@media (min-width: 576px) {
	.about-banners {
		height: 500px !important;
	}
	.about-banner,
	.about-banner-video,
	.about-banner-live {
		background-size: 480px;
	}
	.about-banner .about-banner-item-title,
	.about-banner-video .about-banner-item-title,
	.about-banner-live .about-banner-item-title {
		padding-top: 60px;
	}
	.about-banner .about-banner-item-title img.md,
	.about-banner-video .about-banner-item-title img.md,
	.about-banner-live .about-banner-item-title img.md {
		width: 320px;
	}

	.page-section .session-content img.xs {
		display: none;
	}
	.page-section .session-content img.md {
		display: block;
	}
}
@media (min-width: 768px) {
	.about-banners {
		height: 500px !important;
	}
	.about-banner,
	.about-banner-video,
	.about-banner-live {
		background-size: 500px;
	}
	.about-banner .about-banner-item-title img.md,
	.about-banner-video .about-banner-item-title img.md,
	.about-banner-live .about-banner-item-title img.md {
		width: 350px;
	}
	.page-section .session-title {
		font-size: 40px;
		margin-bottom: 20px;
	}
	.page-section p.small {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	.about-banners {
		width: 100%;
	}
	.about-banner {
		background-image: url(/images/home/menu1/about_broadcast/main_content_bg_xl.png);
		background-size: 800px;
		background-position: right bottom;
	}
	.about-banner-video {
		background-image: url(/images/home/menu1/about_video/main_content_bg_xl.png);
		background-size: 800px;
		background-position: right bottom;
	}

	.about-banner-live {
		background-image: url(/images/home/menu1/about_live/main_content_bg_xl.png);
		background-size: 800px;
		background-position: right bottom;
	}

	.about-banner .about-banner-item-title,
	.about-banner-video .about-banner-item-title,
	.about-banner-live .about-banner-item-title {
		padding-top: 100px;
	}
	.about-banner .about-banner-item-title img.md,
	.about-banner-video .about-banner-item-title img.md,
	.about-banner-live .about-banner-item-title img.md {
		display: none;
	}
	.about-banner .about-banner-item-title img.xl,
	.about-banner-video .about-banner-item-title img.xl,
	.about-banner-live .about-banner-item-title img.xl {
		display: block;
	}
}
@media (min-width: 1200px) {
	.about-banner {
		background-image: url(/images/home/menu1/about_broadcast/main_content_bg_xl.png);
		background-size: 900px;
	}
	.about-banner-video {
		background-image: url(/images/home/menu1/about_video/main_content_bg_xl.png);
		background-size: 900px;
	}
	.about-banner-live {
		background-image: url(/images/home/menu1/about_live/main_content_bg_xl.png);
		background-size: 900px;
	}
}
@media (min-width: 1400px) {
	.about-banner {
		background-image: url(/images/home/menu1/about_broadcast/main_content_bg_xl.png);
		background-size: 1000px;
	}
	.about-banner-video {
		background-image: url(/images/home/menu1/about_video/main_content_bg_xl.png);
		background-size: 1000px;
	}
	.about-banner-live {
		background-image: url(/images/home/menu1/about_live/main_content_bg_xl.png);
		background-size: 1000px;
	}
}

/*****************************
    회사소개
*****************************/
.company-banner {
	background-image: url(/images/home/menu1/company/main_content_bg_xs.png) !important;
	background-size: auto;
	background-position: center bottom;
	background-repeat: no-repeat;
}
.about-banner-item-title img.xs {
	display: block !important;
	margin: 0 auto;
}
.about-banner-item-title img.md {
	display: none !important;
}
.about-banner-item-title img.xl {
	display: none !important;
}

.greeting {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 20px;
	padding: 30px 20px;
	background-color: var(--k-color-white);
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.greeting-img {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.greeting-img img {
	width: auto !important;
	height: 100% !important;
	background-size: cover;
	background-position: left;
	background-repeat: no-repeat;
}
.greeting-content {
	width: 100%;
	height: 100%;
}
.greeting-content h5 {
	margin-bottom: 20px;
	background-color: #f0f0ff;
	font-size: 18px;
	text-align: center;
	display: inline-block;
}

.about_company_content3 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.about_company_content3 .about_company_content3_item {
	width: 100%;
	flex-basis: 180px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
.about_company_content3 .about_company_content3_item_title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: var(--k-color-white);
	margin: 0;
	padding: 0;
	line-height: 1.2;
	height: 100%;
	width: 100%;
	text-align: center;
}
.about_company_content3 .about_company_content3_item_1 {
	background-image: url(/images/home/menu1/company/content4_bg03_xs.png);
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}
.about_company_content3 .about_company_content3_item_2 {
	background-image: url(/images/home/menu1/company/content4_bg04_xs.png);
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}
.about_company_content3 .about_company_content3_item_3 {
	background-image: url(/images/home/menu1/company/content4_bg05_xs.png);
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}
.about_company_content3 .about_company_content3_item_4 {
	background-image: url(/images/home/menu1/company/content4_bg01_xs.png);
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}
.about_company_content3 .about_company_content3_item_5 {
	background-image: url(/images/home/menu1/company/content4_bg02_xs.png);
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;
}

@media (min-width: 576px) {
	.company-banner {
		background-image: url(/images/home/menu1/company/main_content_bg_xs.png) !important;
		background-size: auto;
		background-position: center bottom;
		background-repeat: no-repeat;
	}

	.about-banner-item-title img.xs {
		display: block !important;
		margin: 0 auto;
	}
	.about-banner-item-title img.md {
		display: none !important;
	}
	.about-banner-item-title img.xl {
		display: none !important;
	}

	.greeting-img img {
		width: 100% !important;
		height: auto !important;
		background-size: cover;
		background-position: left;
		background-repeat: no-repeat;
	}
	.about_company_content3 {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 10px;
	}
	.about_company_content3 .about_company_content3_item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		height: 165px;
	}
}
@media (min-width: 768px) {
	.company-banner {
		background-image: url(/images/home/menu1/company/main_content_bg_xs.png) !important;
		background-size: auto;
		background-position: center bottom;
		background-repeat: no-repeat;
	}

	.about-banner-item-title img.xs {
		display: none !important;
	}
	.about-banner-item-title img.md {
		display: block !important;
	}
	.about-banner-item-title img.xl {
		display: none !important;
	}

	.greeting {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
	}
	.greeting-img {
		flex-basis: 30%;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		background-image: url(/images/home/menu1/company/content1_01.png);
		background-position: left center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.greeting-img img {
		display: none !important;
	}
	.greeting-content {
		background-color: var(--k-color-white);
		width: 70%;
		height: 100%;
	}

	.about_company_content3 {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
	.about_company_content3 .about_company_content3_item {
		width: 100%;
		flex-basis: 225px;
		height: 225px;
	}
	.about_company_content3 .about_company_content3_item_title {
		font-size: 18px;
	}
	.about_company_content3 .about_company_content3_item_1 {
		background-image: url(/images/home/menu1/company/content4_bg03.png);
	}
	.about_company_content3 .about_company_content3_item_2 {
		background-image: url(/images/home/menu1/company/content4_bg04.png);
	}
	.about_company_content3 .about_company_content3_item_3 {
		background-image: url(/images/home/menu1/company/content4_bg05.png);
	}
	.about_company_content3 .about_company_content3_item_4 {
		background-image: url(/images/home/menu1/company/content4_bg01.png);
	}
	.about_company_content3 .about_company_content3_item_5 {
		background-image: url(/images/home/menu1/company/content4_bg02.png);
	}
}

@media (min-width: 992px) {
	.company-banner {
		background-image: url(/images/home/menu1/company/main_content_bg_md.png) !important;
		background-size: auto;
		background-position: right bottom;
		background-repeat: no-repeat;
	}
	.about-banner-item-title img.xs {
		display: none !important;
	}
	.about-banner-item-title img.md {
		display: block !important;
		margin: 0 auto 0 0 !important;
	}
	.about-banner-item-title img.xl {
		display: none !important;
	}

	.about_company_content3 {
		gap: 30px;
	}
	.about_company_content3 .about_company_content3_item {
		width: 100%;
		flex-basis: 292px;
		height: 292px;
	}
	.about_company_content3 .about_company_content3_item_title {
		font-size: 24px;
	}
}
@media (min-width: 1200px) {
	.company-banner {
		background-image: url(/images/home/menu1/company/main_content_bg_xl.png);
		background-size: auto;
		background-position: right bottom;
		background-repeat: no-repeat;
	}
	.about-banner-item-title img.xs {
		display: none !important;
	}
	.about-banner-item-title img.md {
		display: none !important;
	}
	.about-banner-item-title img.xl {
		display: block !important;
		margin: 0 auto 0 0 !important;
	}

	.about_company_content3 {
		gap: 40px;
	}

	.about_company_content3 .about_company_content3_item {
		width: 100%;
		flex-basis: 345px;
		height: 345px;
	}
	.about_company_content3 .about_company_content3_item_title {
		font-size: 24px;
	}
}
@media (min-width: 1400px) {
	.company-banner {
		background-image: url(/images/home/menu1/company/main_content_bg_xl.png);
		background-size: contain;
		background-position: right bottom;
		background-repeat: no-repeat;
	}
	.about-banner-item-title img.xs {
		display: none !important;
	}
	.about-banner-item-title img.md {
		display: none !important;
	}
	.about-banner-item-title img.xl {
		display: block !important;
		margin: 0 auto 0 0 !important;
	}

	.about_company_content3 .about_company_content3_item {
		width: 100%;
		flex-basis: 405px;
		height: 405px;
	}
	.about_company_content3 .about_company_content3_item_title {
		font-size: 30px;
	}
}

/*****************************
    이용약관
*****************************/
.session1_sub_box_content {
	width: 100%;
}
.session1_sub_box_content .session1_sub_box_content_title h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--k-color-dark);
	margin: 0 0 20px 0;
	padding: 0;
	line-height: 1.2;
	text-align: center;
	padding: 0 0 20px 0;
	border-bottom: 1px solid #e0e0e6;
}
.session1_sub_box_content_content {
	width: 100%;
	font-size: 16px;
	color: var(--k-color-dark-light);
	line-height: 1.2;
	text-align: justify;
}

/*****************************
    환불규정
*****************************/
@media (min-width: 576px) {
}
@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*****************************
    이메일무단 수집 거부
*****************************/

@media (min-width: 576px) {
}
@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*****************************
    개인정보 취급방침
*****************************/

@media (min-width: 576px) {
}
@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*****************************
    교재 구매
*****************************/

@media (min-width: 576px) {
}
@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*****************************
    온라인 강의
*****************************/

@media (min-width: 576px) {
}
@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*****************************
    진단 평가
*****************************/

#bt_introduction {
	width: 160px;
	flex-basis: 160px;
}
/* 조회 폼 */
#getTrialbankDataForm {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
}

/*  리스트 */
.loading_box,
.no_data_box {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 30px;
}
.loading_box .loading_box_item,
.no_data_box .no_data_box_item {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--k-color-dark-light);
	padding: 30px;
	border-radius: 10px;
	background-color: var(--k-color-white);
	border: 1px solid #e0e0e6;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.test_list_box_ul {
	list-style: none;
	padding: 0;
	margin: 20px 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.test_list_box_ul li {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.test_list_box_ul li .test_list_box_item {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: var(--k-color-white);
	border-radius: 10px;
	border: 1px solid #e0e0e6;
	padding: 20px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	gap: 10px;
}
.test_list_box_item .test_list_box_item_header {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.test_list_box_item .test_list_box_item_header .test_list_box_item_state {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.test_list_box_item .test_list_box_item_header .test_list_box_item_state span {
	font-size: 14px;
	font-weight: 700;
	color: var(--k-color-dark);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 50px;
	padding: 5px 10px;
}

/* 상태에 따른 상태 아이콘 */
/* 준비중 */
.Ready .test_list_box_item .test_list_box_item_header .test_list_box_item_state span {
	color: var(--k-color-dark-light);
	border: 1px solid var(--k-color-gray-light);
	background-color: var(--k-color-gray-light);
}
/* 진행중 */
.Testable .test_list_box_item .test_list_box_item_header .test_list_box_item_state span {
	color: var(--k-color-blue);
	border: 1px solid var(--k-color-blue);
	background-color: var(--k-color-white);
}
/* 종료 */
.Completion .test_list_box_item .test_list_box_item_header .test_list_box_item_state span {
	color: var(--k-color-dark-light);
	border: 1px solid var(--k-color-gray-light);
	background-color: var(--k-color-gray-light);
}
/* 결과 */
.Result .test_list_box_item .test_list_box_item_header .test_list_box_item_state span {
	color: var(--k-color-dark-light);
	border: 1px solid var(--k-color-gray-light);
	background-color: var(--k-color-gray-light);
}

.test_list_box_item .test_list_box_item_header .test_list_box_item_addtest {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.test_list_box_item .test_list_box_item_addtest a {
	display: flex;
	width: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0px;
	text-decoration: none;
	color: var(--k-color-white);
	font-size: 12px;
	font-weight: 700;
	background-color: var(--k-color-blue);
	padding: 8px 10px;
	border-radius: 50px;
}

.test_list_box_item .test_list_box_item_body {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.test_list_box_item .test_list_box_item_body .test_list_box_item_title {
	width: 100%;
	font-size: 18px;
	font-weight: 900;
	color: var(--k-color-dark);
	margin: 0;
	padding: 0;
}
.test_list_box_item .test_list_box_item_body .test_list_box_item_content {
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 3px;
}
.test_list_box_item .test_list_box_item_body .test_list_box_item_content_row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	font-size: 14px;
	color: var(--k-color-dark-light);
}
.test_list_box_item > .test_list_box_item_addtest {
	display: none;
}

/*   진단평가 소개 모달  */
#diagnosis_introduction_modal .modal-content,
#ai_evaluation_introduction_modal .modal-content {
	border-radius: 20px;
	overflow: hidden;
}
#diagnosis_introduction_modal .modal-body,
#ai_evaluation_introduction_modal .modal-body {
	padding: 0;
	position: relative;
}
#diagnosis_introduction_modal .btn-close,
#ai_evaluation_introduction_modal .btn-close {
	position: absolute;
	top: 10px;
	right: 10px;
}

@media (min-width: 576px) {
	.test_list_box_ul {
		margin: 20px 0;
		gap: 10px;
	}
	.test_list_box_ul li .test_list_box_item {
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
	.test_list_box_item .test_list_box_item_header {
		flex-basis: 50px;
		height: 100%;
		justify-content: center;
		gap: 0px;
	}
	.test_list_box_item .test_list_box_item_header .test_list_box_item_addtest {
		display: none;
	}
	.test_list_box_item .test_list_box_item_header .test_list_box_item_state {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.test_list_box_item .test_list_box_item_header .test_list_box_item_state span {
		font-size: 14px;
		font-weight: 700;
		width: 50px;
		height: 50px;
	}

	.test_list_box_item .test_list_box_item_body {
		flex-basis: calc(100% - 190px);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 10px;
	}
	.test_list_box_item > .test_list_box_item_addtest {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-basis: 100px;
		height: 100%;
	}
}
@media (min-width: 768px) {
}

@media (min-width: 992px) {
	.test_list_box_ul {
		margin: 20px 0;
		gap: 10px;
	}
	.test_list_box_ul li .test_list_box_item {
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 20px;
	}
	.test_list_box_item .test_list_box_item_header {
		flex-basis: 50px;
		height: 100%;
		justify-content: center;
		gap: 0px;
	}
	.test_list_box_item .test_list_box_item_header .test_list_box_item_addtest {
		display: none;
	}
	.test_list_box_item .test_list_box_item_header .test_list_box_item_state {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.test_list_box_item .test_list_box_item_header .test_list_box_item_state span {
		font-size: 14px;
		font-weight: 700;
		width: 50px;
		height: 50px;
	}

	.test_list_box_item .test_list_box_item_body {
		flex-basis: calc(100% - 190px);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}

	.test_list_box_item .test_list_box_item_body .test_list_box_item_content {
		width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 3px;
	}
	.test_list_box_item .test_list_box_item_body .test_list_box_item_content_row {
		flex-basis: 50%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 3px;
		font-size: 14px;
		color: var(--k-color-dark-light);
	}
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}

/*****************************
    영어 AI 평가
*****************************/
#bt_ai_history {
	width: 160px;
	flex-basis: 160px;
}

.ai .session2_sub_box_header .session2_sub_box_header_title {
	text-align: center;
}
.ai .session2_sub_box_header .session2_sub_box_header_title h3 {
	font-size: 18px;
}
.ai .session2_sub_box_header .session2_sub_box_header_title p {
	font-size: 14px;
}

.ai .ai_evaluation_form {
	margin-bottom: 20px;
}
.ai .ai_evaluation_form .ai_evaluation_img {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}
.ai .ai_evaluation_form .ai_evaluation_img img {
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.ai .ai_evaluation_form .ai_evaluation_img img.xs {
	display: flex;
}
.ai .ai_evaluation_form .ai_evaluation_button {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.ai .ai_evaluation_form .ai_evaluation_button #bt_ai_evaluation {
	text-decoration: none;
	color: var(--k-color-white);
	font-size: 14px;
	font-weight: 700;
	background-color: #ff7200;
	padding: 10px 20px;
	border-radius: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.ai .ai_evaluation_list {
	margin-bottom: 20px;
}
.ai .ai_evaluation_list .ai_evaluation_list_item_title {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.ai .ai_evaluation_list .ai_evaluation_list_item_title h4 {
	width: 200px;
	flex-basis: 200px;
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--k-color-dark);
}
.ai .ai_evaluation_list .ai_evaluation_list_item_title a {
	width: 100px;
	flex-basis: 100px;
	text-decoration: none;
	color: var(--k-color-dark-light);
	font-size: 14px;
	font-weight: 700;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}
.ai .ai_evaluation_list .ai_evaluation_list_item_title a svg {
	width: 16px;
	height: 16px;
}

.ai .ai_evaluation_list .ai_evaluation_list_item_content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
.ai #ai_evaluation_lists {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	list-style: none;
	gap: 10px;
	padding: 0;
	margin: 0 0 20px 0;
}
.ai #ai_evaluation_lists li {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
}
.ai #ai_evaluation_lists li .ai_evaluation_item_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 15px;
	background-color: var(--k-color-white);
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
}
.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row_item .levelbox {
	font-size: 12px;
	font-weight: 700;
	color: var(--k-color-blue);
	border: 1px solid var(--k-color-blue);
	border-radius: 50px;
	padding: 5px 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row_item .resultbox {
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background-color: var(--k-color-gray-light);
	color: var(--k-color-white);
	border-radius: 50px;
	padding: 5px 10px;
}
.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row_item .resultbox.completed {
	background-color: var(--k-color-blue);
}

.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 5px;
	margin: 0;
}
.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl dt {
	font-size: 14px;
	font-weight: 700;
	color: var(--k-color-dark);
	width: 100%;
	margin: 0;
}
.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl dd {
	font-size: 14px;
	font-weight: 400;
	color: var(--k-color-dark-light);
	width: 100%;
	margin: 0;
}

@media (min-width: 576px) {
	.ai .ai_evaluation_form .ai_evaluation_img img.xs {
		display: none;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.md {
		display: flex;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.lg {
		display: none;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.xl {
		display: none;
	}

	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 5px;
		margin: 0;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl dt {
		text-align: center;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl dd {
		text-align: center;
	}
}
@media (min-width: 768px) {
	.ai .ai_evaluation_form .ai_evaluation_img img.xs {
		display: none;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.md {
		display: flex;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.lg {
		display: none;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.xl {
		display: none;
	}

	.ai #ai_evaluation_lists li .ai_evaluation_item_box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 15px;
		background-color: var(--k-color-white);
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row_item .levelbox {
		font-size: 14px;
		font-weight: 700;
		color: var(--k-color-blue);
		border: 1px solid var(--k-color-blue);
		border-radius: 50px;
		padding: 5px 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row_item .resultbox {
		font-size: 14px;
		font-weight: 700;
		text-decoration: none;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 50px;
		padding: 5px 10px;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 5px;
		margin: 0;
		flex-shrink: 1;
		flex-grow: 1;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl dt {
		font-size: 14px;
		flex-shrink: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl dd {
		font-size: 14px;
		text-align: left;
		flex-shrink: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
}

@media (min-width: 992px) {
	.ai .ai_evaluation_form .ai_evaluation_img img.xs {
		display: none;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.md {
		display: none;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.lg {
		display: flex;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.xl {
		display: none;
	}

	.ai #ai_evaluation_lists li .ai_evaluation_item_box {
		width: 100%;
		height: 73px;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 15px;
		background-color: var(--k-color-white);
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row {
		width: 100%;
		flex-basis: 160px;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		font-size: 14px;
		height: 100%;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row + .ai_evaluation_item_box_row {
		flex-basis: calc(100% - 160px);
	}

	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 5px;
		margin: 0;
		flex-shrink: 1;
		flex-grow: 1;
		height: 100%;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl dt {
		font-size: 14px;
		flex-shrink: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 100%;
		flex-basis: 80px;
	}
	.ai #ai_evaluation_lists li .ai_evaluation_item_box .ai_evaluation_item_box_row dl dd {
		font-size: 14px;
		text-align: left;
		flex-shrink: 1;
		flex-basis: calc(100% - 80px);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		height: 100%;
	}
}

@media (min-width: 1200px) {
	.ai .ai_evaluation_form .ai_evaluation_img img.xs {
		display: none;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.md {
		display: none;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.lg {
		display: none;
	}
	.ai .ai_evaluation_form .ai_evaluation_img img.xl {
		display: flex;
	}
}

@media (min-width: 1400px) {
}

/*
    list_alert
*/
.list_alert {
	width: 100%;
	display: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	background-color: var(--k-color-white);
	border-radius: 10px;
	padding: 20px;
	margin: 20px 0;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.list_alert .list_alert_item {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.list_alert .list_alert_item svg {
	width: 20px;
	height: 20px;
	color: #ff7200;
}

/*
    check_message
*/
.check_message {
	background-color: var(--k-color-red);
	color: var(--k-color-deeppurple);
	padding: 7px 8px;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
}

/*
    chatBox
*/
.chatBox {
	background-color: var(--k-color-pink);
	color: var(--k-color-white);
	padding: 10px 20px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	margin-bottom: 20px;
}
.chatBox::after {
	content: "";
	position: absolute;
	bottom: -7px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 7px solid var(--k-color-pink);
}

/*
    openCloseArrow
*/
.openCloseArrow {
	font-size: 0.9rem;
	color: var(--k-color-dark-light);
}
.openCloseArrow svg {
	transition: var(--k-transition);
}
.openCloseArrow.open svg {
	transform: rotate(180deg);
}

.openCloseArrow.close svg {
	transform: rotate(0deg);
}

/*
    미디어 슬라이더 스타일
*/

.media-slider-container {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 15px;
}

.media-slider-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

.media-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
}

.media-slide.active {
	opacity: 1;
}

.media-video,
.media-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
}

.video-play-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	padding: 15px;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 10;
}

.video-play-overlay:hover {
	background: rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%) scale(1.1);
}

.video-play-overlay svg {
	color: white;
	display: block;
}

.media-title {
	position: absolute;
	bottom: 15px;
	left: 15px;
	right: 15px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	z-index: 5;
	text-align: center;
}

/* 네비게이션 버튼 스타일 개선 */
.class_review_video_per,
.class_review_video_next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	padding: 10px;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: center;
}

.class_review_video_per {
	left: 15px;
}

.class_review_video_next {
	right: 15px;
}

.class_review_video_per:hover,
.class_review_video_next:hover {
	background: rgba(0, 0, 0, 0.6);
	transform: translateY(-50%) scale(1.1);
}

.class_review_video_per svg,
.class_review_video_next svg {
	color: white;
}

/* 할인 가격 UI 스타일 */
.price_discount_box {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.discount_info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.discount_badge {
	background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
	color: white;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

.discount_remain {
	font-size: 12px;
	color: #e91e63;
	font-weight: 600;
	background: rgba(233, 30, 99, 0.1);
	padding: 2px 8px;
	border-radius: 10px;
}

.price_box {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.original_price {
	font-size: 14px;
	color: #999;
	text-decoration: line-through;
}

.discounted_price {
	font-size: 18px;
	font-weight: 700;
	color: #e91e63;
}

/* 구매 가격 할인 UI */
.discount_calc_box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 15px;
	background: #f8f9fa;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.calc_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}

.calc_item.discount .calc_value {
	color: #e91e63;
}

.calc_item.total {
	font-weight: 700;
	font-size: 16px;
	color: #333;
	border-top: 1px solid #dee2e6;
	padding-top: 8px;
	margin-top: 8px;
}

.calc_label {
	font-weight: 500;
}

.calc_value {
	font-weight: 600;
}

/* 반응형 스타일 */
@media (min-width: 768px) {
	.price_box {
		align-items: baseline;
	}

	.original_price {
		font-size: 16px;
	}

	.discounted_price {
		font-size: 22px;
	}

	.discount_calc_box {
		padding: 20px;
	}

	.calc_item {
		font-size: 16px;
	}

	.calc_item.total {
		font-size: 18px;
	}
}

@media (min-width: 992px) {
	.discounted_price {
		font-size: 24px;
	}
}

/* 포인트 관련 스타일 - 부트스트랩 5 최적화 */
.mypage-sub-content.p-0 {
	padding: 0 !important;
}

.point-summary-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	border-radius: 15px;
	padding: 20px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
}

.point-main-value {
	font-size: 2.2rem;
	font-weight: bold;
	color: #ffd700;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.point-main-label {
	font-size: 0.95rem;
	opacity: 0.9;
	margin-top: 5px;
}

.point-summary-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 15px;
}

.point-summary-item {
	text-align: center;
	padding: 12px 6px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.point-summary-item:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

.point-summary-item .value {
	font-size: 1rem;
	font-weight: bold;
	display: block;
	margin-bottom: 4px;
}

.point-summary-item .label {
	font-size: 0.75rem;
	opacity: 0.9;
}

/* 포인트 정보 카드 */
.point-info-card {
	background: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 12px;
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.point-info-card h6 {
	color: #495057;
	margin-bottom: 15px;
}

.point-info-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-grow: 1;
}

.point-info-item {
	display: flex;
	align-items: center;
	font-size: 0.85rem;
	color: #6c757d;
	line-height: 1.4;
}

.point-info-item i {
	width: 16px;
	flex-shrink: 0;
}

/* 포인트 내역 섹션 */
.point-history-section {
	background: white;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
}

.point-filter-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.point-filter-tab {
	padding: 8px 16px;
	border: 1px solid #ddd;
	background: white;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s;
	font-size: 0.9rem;
}

.point-filter-tab.active {
	background: #007bff;
	color: white;
	border-color: #007bff;
}

.point-history-item {
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 10px;
	background: white;
	transition: box-shadow 0.3s;
}

.point-history-item:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.point-balance {
	font-size: 0.85rem;
	color: #999;
	margin-top: 5px;
}

/* 포인트 내역 리스트 컨테이너 */
#point-history-list {
	flex-grow: 1;
	min-height: 300px;
}

.point-history-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.point-type {
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 500;
}

.point-type.earn {
	background: #d4edda;
	color: #155724;
}

.point-type.use {
	background: #f8d7da;
	color: #721c24;
}

.point-type.expire {
	background: #fff3cd;
	color: #856404;
}

.point-type.admin {
	background: #d1ecf1;
	color: #0c5460;
}

.point-amount {
	font-size: 1.1rem;
	font-weight: bold;
}

.point-amount.positive {
	color: #28a745;
}

.point-amount.negative {
	color: #dc3545;
}

.point-description {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 5px;
}

.point-date {
	color: #999;
	font-size: 0.8rem;
}

.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.pagination {
	display: flex;
	gap: 5px;
}

.pagination button {
	padding: 8px 12px;
	border: 1px solid #ddd;
	background: white;
	cursor: pointer;
	border-radius: 5px;
	transition: all 0.3s;
}

.pagination button:hover:not(:disabled) {
	background: #f8f9fa;
}

.pagination button.active {
	background: #007bff;
	color: white;
	border-color: #007bff;
}

.pagination button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.no-data {
	text-align: center;
	padding: 40px;
	color: #666;
}

.loading {
	text-align: center;
	padding: 40px;
	color: #666;
}

/* 부트스트랩 5 반응형 조정 */
@media (max-width: 991.98px) {
	.point-summary-card,
	.point-info-card,
	.point-history-section {
		margin-bottom: 1rem;
	}

	.point-main-value {
		font-size: 2rem;
	}

	.point-summary-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
		margin-top: 12px;
	}

	.point-summary-item {
		padding: 10px 4px;
	}

	.point-summary-item .value {
		font-size: 0.9rem;
	}

	.point-summary-item .label {
		font-size: 0.7rem;
	}
}

@media (max-width: 767.98px) {
	.container-fluid {
		padding-left: 15px;
		padding-right: 15px;
	}

	.point-summary-card,
	.point-info-card {
		padding: 15px;
	}

	.point-history-section {
		padding: 15px;
	}

	.point-main-value {
		font-size: 1.8rem;
	}

	.point-summary-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 4px;
		margin-top: 10px;
	}

	.point-summary-item {
		padding: 8px 3px;
	}

	.point-summary-item .value {
		font-size: 0.85rem;
	}

	.point-summary-item .label {
		font-size: 0.65rem;
	}

	.point-info-item {
		font-size: 0.8rem;
	}

	.point-filter-tabs {
		justify-content: center;
		flex-wrap: wrap;
	}

	.point-filter-tab {
		font-size: 0.85rem;
		padding: 6px 12px;
	}

	.point-history-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

@media (max-width: 575.98px) {
	.point-summary-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px;
	}

	.point-main-value {
		font-size: 1.6rem;
	}

	.point-filter-tabs {
		gap: 5px;
	}

	.point-filter-tab {
		font-size: 0.8rem;
		padding: 5px 10px;
	}
}





/***************************
마이페이지아바타 선택 모달
***************************/

#mypage-avatar-select-modal {
    color: #000;
}
.avatar-grid .avatar-item {
    cursor: pointer;
    transition: all 0.2s;
    border: 3px solid transparent;
    border-radius: 6px;
}
.avatar-grid .avatar-item:hover {
    transform: scale(1.05);
}
.avatar-grid .avatar-item.selected {
    border-color: #0d6efd;
}
.avatar-grid img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* 포인트 링크 호버 효과 */
.mypage-points-link:hover {
    transform: scale(1.05);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.mypage-points-link:hover .mypage-myinfo-sub-row span {
    color: #FFD700 !important;
}