.container {
	padding: 50px 25px 50px 265px;
}

.container .top_swiper {
	overflow-x: auto;
	margin-bottom: 55px;
}

.container .top_swiper::-webkit-scrollbar {
	display: none;
}

.container .top_swiper .title {
	color: var(--color-777);
	font-weight: 700;
	margin-bottom: 10px;
}

.container .top_swiper .swiper_wrap {
	width: 1100px;
	gap: 0 15px;
	align-items: center;
	display: flex;
}

.container .top_swiper .swiper_wrap .swiper-slide {
	height: 120px;
	background-color: #f3f3f3;
	border-radius: 8px;
	padding: 12px;
	cursor: pointer;
	gap: 0 12px;
	display: flex;
}

.container .top_swiper .swiper_wrap .swiper-slide a {
	width: 100%;
	display: flex;
}

.container .top_swiper .swiper_wrap .swiper-slide .txt {
	width: 100%;
	padding: 10px 12px;
}

.container .top_swiper .swiper_wrap .swiper-slide .thumb {
	width: 103px;
	height: 96px;
	flex-shrink: 0;
}

.container .top_swiper .swiper_wrap button {
	width: 20px;
	height: 20px;
	margin-top: 30px;
	flex-shrink: 0;
}

.container .top_swiper .swiper_wrap .prev_btn {
	transform: rotate(180deg);
}

.container .top_swiper.notice .swiper_wrap .swiper-slide .txt {
	overflow: hidden;
	height: 77px;
	line-height: 22px;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}

.container .top_swiper.coaching .swiper_wrap .swiper-slide .txt {
	gap: 5px 0;
	flex-flow: column;
	display: flex;
}

.container .top_swiper.coaching .swiper_wrap .swiper-slide .txt div {
	font-weight: 800;
}

.container .top_swiper.coaching .swiper_wrap .swiper-slide .txt .title {
	font-size: var(--lg-font-size);
	margin-bottom: 0;
}

.container .top_swiper.coaching .swiper_wrap .swiper-slide .txt .color {
	font-size: var(--md-font-size);
	color: var(--main-color);
}

.container .top_swiper.coaching .swiper_wrap .swiper-slide .txt .badges {
	gap: 0 4px;
}

.container .scroll .chapter {
	padding: 10px;
	align-items: center;
	display: flex;
}

.container .scroll .chapter .txt {
	width: fit-content;
	font-size: var(--lg-font-size);
	font-weight: 500;
	color: var(--color-777);
	flex-shrink: 0;
}

.container .scroll .chapter .line {
	width: 100%;
	height: 1px;
	background-color: var(--inp-border-color);
}

/* 강의 리스트 테이블 */
.container .scroll table tr td {
	transition: .2s linear color, .2s linear background-color;
}

.container .scroll table tr td:not(.empty) {
	cursor: pointer;
}

.container .scroll table tr td.text-left {
	overflow: hidden;
	color: var(--color-444);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.container .scroll table tr td.bold {
	font-weight: 700;
}

.container .scroll table tr td.video {
	color: var(--main-color);
}

.container .scroll table tr td.training {
	color: var(--training-color);
}

.container .scroll table td .download img:last-child {
	display: none;
}

.container .scroll table tr.lock td.text-left {
	color: var(--color-777);
}

.container .scroll table tr.active {
	background-color: var(--main-color-rgba15);
	cursor: pointer;
}

.container .scroll table tr.active td {
	color: var(--main-color);
}

.container .scroll table tr.active td .download img {
	display: none;
}

.container .scroll table tr.active td .download img:last-child {
	display: block;
}

.container .tab_contents .content .mission {
	gap: 0 15px;
	display: flex;
}

.container .tab_contents .content .mission .calendar_wrap {
	width: 370px;
	padding: 65px 20px 35px;
	background-color: #f7f7f7;
	flex-shrink: 0;
}

.container .tab_contents .content .mission .calendar_wrap .year {
	font-size: var(--lg-font-size);
	text-align: right;
	padding-right: 25px;
}

.container .tab_contents .content .mission .calendar_wrap .months {
	gap: 0 8px;
	justify-content: right;
	align-items: center;
	display: flex;
}

.container .tab_contents .content .mission .calendar_wrap .months button {
	width: 20px;
	background-color: transparent;
}

.container .tab_contents .content .mission .calendar_wrap .months span {
	font-size: 40px;
	font-weight: 200;
}

.container .tab_contents .content .mission .calendar_wrap .months .prev_btn img {
	transform: rotate(180deg);
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul {
	flex-flow: wrap;
	display: flex;
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li {
	position: relative;
	width: calc(100% / 7);
	aspect-ratio: auto 1 / 1;
	cursor: pointer;
	justify-content: center;
	align-items: center;
	display: flex;
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li div {
	z-index: 2;
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li > span {
	position: absolute;
	width: 100%;
	height: 100%;
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li > span span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	width: 18px;
	height: 4px;
	border-radius: 6px;
	background-color: var(--main-color);
	margin: auto;
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li span span:nth-child(1) {
	top: -12px;
	left: -12px;
	transform: rotate(45deg);
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li span span:nth-child(2) {
	top: -12px;
	right: -12px;
	transform: rotate(-45deg);
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li span span:nth-child(3) {
	bottom: -12px;
	left: -12px;
	transform: rotate(135deg);
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li span span:nth-child(4) {
	bottom: -12px;
	right: -12px;
	transform: rotate(-135deg);
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul.yoil li,
.container .tab_contents .content .mission .calendar_wrap .calendar ul li.future div {
	color: var(--color-gray);
	font-weight: 600;
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li.today {
	padding: 5px;
}

.container .tab_contents .content .mission .calendar_wrap .calendar ul li.today div {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	background-color: var(--main-color-rgba10);
	justify-content: center;
	align-items: center;
	display: flex;
}

.container .tab_contents .content .mission .calendar_wrap .info {
	justify-content: space-between;
	display: flex;
}

.container .tab_contents .content .mission .calendar_wrap .info .status {
	gap: 0 20px;
	display: flex;
}

.container .tab_contents .content .mission .calendar_wrap .info .status div {
	font-size: var(--sm-font-size);
	font-weight: 600;
	color: var(--color-777);
	gap: 0 7px;
	align-items: center;
	display: flex;
}

.container .tab_contents .content .mission .calendar_wrap .info .mission_day {
	font-size: var(--sm-font-size);
	font-weight: 600;
	text-align: right;
}

.container .tab_contents .content .mission .calendar_wrap .info .mission_day span {
	font-size: var(--md-font-size);
	font-weight: 800;
	color: var(--main-color);
	margin-left: 5px;
}

.container .tab_contents .content .mission ul.check_list {
	overflow-y: auto;
	width: 440px;
	height: inherit;
}

.container .tab_contents .content .mission ul.check_list li {
	padding: 20px;
	border-bottom: 1px solid var(--inp-border-color);
	gap: 0 12px;
	display: flex;
}

.container .tab_contents .content .mission ul.check_list li .check {
	top: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid var(--inp-border-color);
	background-color: #fff;
	flex-shrink: 0;
}

.container .tab_contents .content .mission ul.check_list li .check_content .title {
	font-size: var(--lg-font-size);
	font-weight: 700;
	margin-bottom: 5px;
}

.container .tab_contents .content .mission ul.check_list li .check_content .write_btn {
	font-size: var(--lg-font-size);
	font-weight: 600;
	text-decoration: underline;
	color: var(--main-color);
	margin-top: 15px;
}

.container .tab_contents .content .mission ul.check_list li.finish .check {
	background-color: var(--main-color);
	border: 0;
}

.container .tab_contents .content .mission ul.check_list li.finish .check_content * {
	text-decoration: line-through;
	color: var(--color-777);
}

.container .tab_contents .content .mission ul.check_list li.finish .check_content .write_btn {
	text-decoration: none;
	color: var(--color-gray);
}

.container .tab_contents .content .roadmap_images .images {
	overflow-x: auto;
	display: flex;
}

.container .tab_contents .content .roadmap_images .images img {
	max-width: unset;
	max-height: unset;
}

.container .tab_contents .content .roadmap_images .btns {
	margin-top: 15px;
	gap: 0 15px;
	display: flex;
}

.container .tab_contents .content .roadmap_images .btns button {
	width: 275px;
	height: 50px;
	font-size: var(--lg-font-size);
	font-weight: 700;
	background-color: var(--main-color);
	color: #fff;
	padding: 0 10px;
	flex-shrink: 0;
}

.container .tab_contents .content .roadmap_images > .btns {
	margin-top: 30px;
	gap: 30px 0;
	flex-flow: column;
	display: none;
}

.container .tab_contents .content .roadmap_images > .btns button {
	width: 100%;
	flex-shrink: 1;
}

.container .tab_contents .content .content_tab_wrap {
	overflow-x: auto;
	padding-bottom: 30px;
	margin-top: -15px;
}

.container .tab_contents .content .content_tab_wrap::-webkit-scrollbar {
	display: none;
}

.container .tab_contents .content .content_tab_wrap .content_tab {
	min-width: max-content;
	display: flex;
}

.container .tab_contents .content .content_tab_wrap .content_tab li {
	position: relative;
	padding: 10px 20px;
	text-align: center;
	font-weight: 500;
	color: var(--color-777);
	cursor: pointer;
	transition: .2s linear color;
}

.container .tab_contents .content .content_tab_wrap .content_tab li span {
	font-size: var(--lg-font-size);
	font-weight: 600;
	display: block;
}

.container .tab_contents .content .content_tab_wrap .content_tab li button {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -28px;
	width: fit-content;
	background-color: var(--color-444);
	font-size: var(--sm-font-size);
	font-weight: 600;
	color: #fff;
	padding: 5px 10px;
	margin: 0 auto;
	display: none;
}
.container .tab_contents .content .content_tab_wrap .content_tab li button:before {
	content: '';
	position: absolute;
	top: -2px;
	left: 0;
	right: 0;
	width: 6px;
	height: 6px;
	background-color: var(--color-444);
	margin: 0 auto;
	transform: rotate(45deg);
}

.container .tab_contents .content .content_tab_wrap .content_tab li.active {
	color: var(--main-color);
}

.container .tab_contents .content .content_tab_wrap .content_tab li.active button {
	display: block;
}

.container .tab_contents .content .content_content {
	max-width: 800px;
	display: none;
}

.container .tab_contents .content .content_content.active {
	display: block;
}

.container .tab_contents .content .expired .progress .percent {
	color: var(--disabled-color);
}

.container .tab_contents .content .expired .progress .bar,
.container .tab_contents .content .expired .scroll table tr td:not(.empty) {
	background-color: var(--disabled-color);
}

.container .tab_contents .content .coaching {
	max-width: 860px;
}

.container .tab_contents .content .coaching .wrap {
	overflow-x: auto;
}

.container .tab_contents .content .coaching .wrap > * {
	width: 860px;
}

.container .tab_contents .content .coaching table tr td {
	cursor: initial;
}

.container .tab_contents .content .coaching table tr td.text-left {
	overflow: hidden;
	max-height: 58px;
	color: var(--color-444);
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}

.container .tab_contents .content .coaching table tr td.normal {
	font-weight: 400;
}

.container .tab_contents .content .coaching table tr td a {
	text-decoration: underline;
	font-weight: 600;
}

.container .tab_contents .content .coaching table.board {
	margin-top: 50px;
}

.container .tab_contents .content .coaching .course_ticket {
	width: fit-content;
	max-width: 100%;
	background-color: #fafafa;
	padding: 25px;
	margin: -15px 0 15px;
}

.container .tab_contents .content .coaching .course_ticket .title {
	font-size: var(--lg-font-size);
	font-weight: 800;
	margin-bottom: 15px;
}

.container .tab_contents .content .coaching .course_ticket table {
	width: fit-content;
}

.container .tab_contents .content .coaching .course_ticket table tr * {
	padding: 0;
	font-size: var(--md-font-size);
	text-align: left;
}

.container .tab_contents .content .coaching .course_ticket table tr th {
	background-color: transparent;
	font-weight: 700;
	padding-bottom: 5px;
}

.container .tab_contents .content .coaching .course_ticket table tr td span {
	color: var(--main-color);
}

.container .detail {
	gap: 0 15px;
	display: flex;
}

.container .detail .intro {
	width: 100%;
}

.container .detail .intro iframe {
	margin-bottom: 50px;
}

.container .detail .intro iframe + .lecture_controls {
	margin-top: -50px;
}

.container .detail .intro .lecture_controls {
	width: calc(100% + 30px);
	margin: 0 0 30px -15px;
	display: none;
}

.container .detail .intro .lecture_controls .controls {
	width: 100%;
	display: flex;
}

.container .detail .intro .lecture_controls .controls button {
	width: 100%;
	height: 50px;
	font-weight: 600;
	padding: 0 15px;
	color: var(--color-444);
	transition: .2s linear all;
	gap: 0 15px;
	justify-content: center;
	align-items: center;
	display: flex;
}

.container .detail .intro .lecture_controls .controls button img {
	margin: 0;
}

.container .detail .intro .lecture_controls .controls button.active {
	background-color: var(--main-color);
	color: #fff;
}

.container .detail .intro .lecture_controls .controls .prev_btn img {
	transform: rotate(-180deg);
}

.container .detail .intro .lecture_controls .controls .list_btn {
	min-width: 160px;
}

.container .detail .intro .lecture_controls .lecture {
	position: relative;
	top: 0;
	max-width: unset;
	margin-top: 15px;
	display: none;
}

.container .detail .intro .lecture_controls .lecture .apply {
	display: none;
}

.container .detail .intro .explanation {
	margin-bottom: 50px;
}

.container .detail .intro .explanation .subject {
	font-size: 20px;
	font-weight: 700;
	margin: 10px 0;
}

.container .detail .intro .review {
	margin-top: 50px;
}

.container .detail .intro .review .count {
	font-size: var(--lg-font-size);
	font-weight: 600;
	margin-bottom: 10px;
}

.container .detail .intro .review .wrap {
	padding: 20px 15px;
}

.container .detail .intro .review .wrap,
.container .detail .intro .review .wrap ul {
	gap: 20px 0;
	flex-flow: column;
	display: flex;
}

.container .detail .intro .review .wrap ul li {
	position: relative;
}

.container .detail .intro .review .wrap ul li .textarea {
	max-width: 460px;
}

.container .detail .intro .review .wrap ul li .info {
	gap: 0 15px;
	display: flex;
}

.container .detail .intro .review .wrap ul li .info .name {
	font-weight: 700;
}

.container .detail .intro .review .wrap ul li .info span {
	color: var(--color-gray);
}

.container .detail .intro .review .wrap ul li .info .status {
	color: var(--main-color);
}

.container .detail .intro .review .wrap ul li .info .more_btn {
	position: absolute;
	right: 0;
	width: 20px;
	height: 20px;
}

.container .detail .intro .review .wrap ul li .info .more_box {
	position: absolute;
	top: 20px;
	right: 0;
	z-index: 1;
	padding: 15px 25px;
	border: 1px solid var(--color-gray);
	background-color: #fff;
	display: none;
}

.container .detail .intro .review .wrap ul li textarea,
.container .detail .intro .review .wrap ul li .txt {
	line-height: 22px;
	padding: 8px;
}

.container .detail .intro .review .wrap ul li textarea {
	overflow: hidden;
	padding-right: 65px;
	border: 0;
	border-bottom: 1px solid var(--inp-border-color);
	transition: .2s linear border-color;
}

.container .detail .intro .review .wrap ul li .txt p img {
	width: auto;
	display: inline-block;
}

.container .detail .intro .review .wrap ul li .action {
	position: absolute;
	right: 10px;
	bottom: 10px;
	gap: 0 5px;
	display: none;
}

.container .detail .intro .review .wrap ul li .action button {
	width: 20px;
	height: 20px;
}

.container .detail .intro .review .wrap ul li textarea:focus {
	border-color: var(--color-semi-black);
}

.container .detail .intro .review .wrap ul li textarea:focus + .action,
.container .detail .intro .review .wrap ul li .action:hover {
	display: flex;
}

.container .detail .intro .review .wrap ul.editor {
	margin-bottom: 20px;
}

.container .detail .intro .all_lang_txt {
	font-size: var(--lg-font-size);
	font-weight: 500;
	margin-bottom: 5px;
}

.container .detail .intro .all_lang_toggle {
	margin-bottom: 15px;
	display: flex;
}

.container .detail .intro .all_lang_toggle button {
	width: 40px;
	height: 28px;
	font-size: var(--lg-font-size);
	border: 1px solid var(--main-color);
	color: var(--main-color);
}

.container .detail .intro .all_lang_toggle button.active {
	font-weight: 600;
	background-color: var(--main-color);
	color: #fff;
}

.container .detail .intro .audio {
	gap: 15px 0;
	flex-flow: column;
	display: flex;
}

.container .detail .intro .audio > li {
	max-width: 570px;
	padding: 20px 10px;
	background-color: rgba(128, 128, 128, 0.05);
}

.container .detail .intro .audio > li .lang_toggle {
	margin-bottom: 10px;
	display: flex;
}

.container .detail .intro .audio > li .lang_toggle button {
	width: 36px;
	height: 22px;
	background-color: #fff;
	font-weight: 600;
	color: var(--color-777);
}

.container .detail .intro .audio > li .lang_toggle button.active {
	background-color: var(--color-gray);
	color: #fff;
}

.container .detail .intro .audio > li .lang {
	word-break: break-all;
	display: none;
}

.container .detail .intro .audio > li .lang.active {
	display: block;
}

.container .detail .intro .audio > li .lang * {
	font-size: 18px !important;
}

.container .detail .intro .audio > li .lang p {
	margin: 0 !important;
}

.container .detail .intro .audio > li .lang > span {
	color: var(--color-gray);
}

.container .detail .intro .audio > li audio {
	margin: 15px 0 10px;
	display: block;
}

.container .detail .intro .audio > li .recording,
.container .detail .intro .audio > li .recording > *:not([type='file']) {
	gap: 0 10px;
	align-items: center;
	display: flex;
}

.container .detail .intro .audio > li .recording {
	padding: 0 5px;
}

.container .detail .intro .audio > li .recording .btns,
.container .detail .intro .audio > li .recording .submission {
	flex-shrink: 0;
}

.container .detail .intro .audio > li .recording .btns button,
.container .detail .intro .audio > li .recording label {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--main-color);
	flex-shrink: 0;
}

.container .detail .intro .audio > li .recording .btns > *,
.container .detail .intro .audio > li .recording .txts .time {
	display: none;
}

.container .detail .intro .audio > li .recording .btns .record_btn {
	display: block;
}

.container .detail .intro .audio > li .recording .btns .icon {
	width: 40px;
	height: 40px;
	justify-content: center;
	align-items: center;
}

.container .detail .intro .audio > li .recording .txts {
	width: 100%;
}

.container .detail .intro .audio > li .recording .txts *,
.container .detail .intro .audio > li .recording .txt {
	line-height: 26px;
	font-size: var(--lg-font-size);
	font-weight: 500;
}

.container .detail .intro .audio > li .recording .placeholder {
	font-weight: 500;
	color: var(--color-gray);
}

.container .detail .intro .audio > li .recording .txt span {
	text-decoration: underline;
}

.container .detail .intro .audio > li .recording .submission {
	width: 160px;
	display: none;
}

.container .detail .intro .audio > li .recording .submission div {
	text-align: center;
	margin-bottom: 5px;
}

.container .detail .intro .audio > li .recording .submission button {
	width: 100%;
	height: 35px;
	font-weight: 600;
	background-color: var(--main-color);
	color: #fff;
}

.container .detail .intro .training > li .recording audio {
	display: none !important;
}

.container .detail .intro .directions {
	margin: 65px 0 30px;
}

.container .detail .intro .directions p img {
	margin: 0;
	display: inline-block;
}

.container .detail .intro .audio.training {
	margin-top: 80px;
}

.container .detail .download_btn {
	max-width: 275px;
	height: 50px;
	background-color: var(--main-color);
	font-size: var(--lg-font-size);
	font-weight: 700;
	color: #fff;
	justify-content: center;
	align-items: center;
	display: flex;
}

.container .detail .apply {
	margin-top: 50px;
	display: none;
}

.container .detail .apply .txt {
	font-size: var(--lg-font-size);
	font-weight: 700;
	color: var(--main-color);
	margin-bottom: 10px;
}

.container .detail .apply button {
	width: 100%;
	height: 50px;
	border: 1px solid var(--main-color);
	font-size: var(--lg-font-size);
	font-weight: 700;
	color: var(--main-color);
}

.container .detail .lecture {
	position: sticky;
	top: 25px;
	max-width: 375px;
	height: fit-content;
	flex-shrink: 0;
}

.container .detail .lecture .scroll table tr {
	cursor: pointer;
}

.container .detail .lecture .apply {
	display: block;
}