@charset "utf-8";

/* *******************************************************************
	공통 (아이콘 등)
******************************************************************* */
#container {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.inner-wrap .section-title p.red-label {
	border: 1px solid #FF3636;
	color: #FF3636;
}
.inner-wrap .section-title p.green-label {
	border: 1px solid #14C847;
	color: #14C847;
}
.inner-wrap .section-title p.blue-label {
	border: 1px solid #0064ff;
	color: #0064ff;
}
.inner-wrap .section-title p {
	display: inline;
	padding: 5px 8px 3px;
	border-radius: 50px;
	font-size: 11px;
	font-weight: 700;
}
/*패키지 라벨*/
span.package-label {
	position: absolute;
	margin-right: 8px;
	padding: 11px 12px 9px 12px;
	font-size: 15px;
	border-radius: 10px 0px 5px 0px;
	z-index: 99;
	background-color: #fd3637;
	color: #fff;
}
.main-lecture-area span.package-label {
	padding: 13px 15px 11px 15px;
	font-size: 19px;
}
/*게시판 내용 공통 사항*/
.boards-area .board-con ul > li .text,.boards-area .board-con ul > li .text *,.conference-area .new-area .new-area-text,.conference-area .new-area .new-area-text * {
	color: #777;
	text-align: left;
	font-size: 15px;
	font-weight: 500;
}
.boards-area .board-con ul > li .text img {
	max-width: 180px!important;
	height: auto !important;
	margin-top: -22px;
}
.boards-area .board-con ul > li .text br,.conference-area .new-area .new-area-text br{
	display: none;
}
.title-area {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
}
.title-area .lecture-more {
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 3px;
	color: #999;
}
.title-area .lecture-more svg {
	width: 20px;
}
.title-area .lecture-more span {
	padding-top: 3px;
}
	/* *******************************************************************
        main-col1 : 메인 배너, 공지사항 게시판
    ******************************************************************* */
.main-col1 {

}
.main-col1 .main-col1-bg {
	width:100%;
	height: 260px;
	position: absolute;
	top: 375px;
	background-color: #FAFAFA;
	z-index: -999;
}
.main-col1 > .inner-wrap {
	flex-direction: column;
}
/*메인 강의 2개 썸네일*/
.main-lecture-area {
	display: flex;
	gap: 24px;
}
.main-lecture-area li {
	width: 668px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.2);
	transition: all 0.45s;
}
.main-lecture-area li:hover {
	box-shadow: 0px 2px 12px 4px rgba(0, 0, 0, 0.45);
}
.main-lecture-area li > a {
	display: block;
	overflow: hidden;
}
.main-lecture-area li > a > img {
	width: 100%;
	height: auto;
	transition: all 0.45s;
}
.main-lecture-area li > a:hover > img {
	transform: scale(1.05,1.05);
}

/* 공지사항 - bxslider */
.main-notice-area {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	position: relative;
	padding: 50px 0;
}
.main-notice-area h2 {
	padding-top: 5px;
	font-size: 20px;
	font-weight: 800;
}
.main-notice-area .bx-wrapper .bx-viewport {
	background: transparent;
}

/*공지사항 타이틀 + 날짜*/
.main-notice-area .notice-bd-area {
	width: 80%;
}
.main-notice-area .notice-bd-area li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	height: 30px;
}
.main-notice-area .notice-bd-area li a {
	display: flex;
	align-items: center;
	padding-top: 3px;
	font-size: 16px;
}
.main-notice-area .notice-bd-area li a::before {
	content: "";
	display: block;
	width: 5px;
	height: 5px;
	margin-right: 20px;
	margin-top: -2px;
	background-color: #9321E4;
}
.main-notice-area .notice-bd-area li .date {
	display: inline-block;
	padding-top: 3px;
	font-size: 13px;
	color: #666
}
/* bx 슬라이더 버튼*/
.main-notice-area .bx-btn-area {
	display: flex;
	gap: 30px;
}

.main-notice-area .bx-btn-area .board-more {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	color: #fff;
	border-radius: 3px;
	background-color: #9321E4;
}
.main-notice-area .bx-btn-area .board-more:hover {
	background-color: #D71A23;
}
.main-notice-area .bx-btn-area .board-more .feather {
	width: 19px;
	height: 19px;
}
.controls-arrow a {
	display: block;
	width: 14px;
	height: 14px;
	color: #ccc;
	outline: none;
}
.controls-arrow a:hover {
	color: #9321E4;
}

.inner-wrap .section-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.inner-wrap .section-title h2 {
	font-size: 25px;
	font-weight: 800;
}

/*키워드 리스트*/
.inner-wrap .keyword-area .nav-tabs {
	border-bottom: 0;
}
.inner-wrap .keyword-area .nav-tabs::before,
.inner-wrap .keyword-area .nav-tabs::after {
	display: none;
}
.inner-wrap .keyword-area ul {
	display: flex;
	gap: 10px;
}
.inner-wrap .keyword-area ul li {
	line-height: 1;
}
.inner-wrap .keyword-area ul li a {
	display: inline-block;
	padding: 12px 20px 10px;
	line-height: 1.3;
	font-size: 15px;
	color: #555;
	border: 1px solid #eee;
	border-radius: 6px;
	background-color: #f5f5f6;
}
.inner-wrap .keyword-area ul li a:hover {
	background-color: #e7e7e7 !important;
}
.inner-wrap .keyword-area ul li.active a {
	color: #fff !important;;
	border: 1px solid #000 !important;;
	background-color: #000 !important;
}

/*강의 리스트*/
.lecture-list-area {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 30px 2.6%;

}
.lecture-list-area li {
	display: flex;
	align-items: stretch;
	width: 23%;
}
.lecture-list-area li a {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	transition: 0.5s;
}
.lecture-list-area li a:hover {
	box-shadow: 0px 2px 12px 4px rgba(0, 0, 0, 0.17);
}
.lecture-list-area li a .thm-area {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.lecture-list-area li a .thm-area img {
	width: 100%;
	height: auto;
	transition: all 0.45s;
}
.lecture-list-area li a:hover .thm-area img {
	transform: scale(1.05,1.05);
}

/* 오픈 예정 썸네일 준비중 */
.lecture-list-area li.ready a .thm-area {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
}
.lecture-list-area li.ready a .thm-area img {
	filter: brightness(40%);
}
.lecture-list-area li.ready a .thm-area span {
	position: absolute;
	font-size: 21px;
	color: #fff;
}

/* 프로필 영역 */
.lecture-list-area li a .profile {
	display: block;
}
.lecture-list-area li a .profile img {
	width: 100%;
	padding: 3px;
}
.lecture-list-area li a .info-area {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	min-height: 115px;
	padding: 15px;
}
.lecture-list-area li a .info-area .title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	align-self: stretch;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 17px;
	line-height: 1.3;

}
.lecture-list-area li a .sub-title {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #97999B;
	font-size: 13px;
}
.lecture-list-area li a .sub-title .name > br {
	display: none;
}
.lecture-list-area li a .sub-title .keyword {

}
.lecture-list-area li a .sub-title .keyword::after {
	content: "ㅣ";
	margin: 0 3px 0 7px;
	font-weight: 100;
}
.lecture-list-area li a .sub-title .profile {
	display: flex;
	align-items: center;
	width: 25px;
	height: 25px;
	border-radius: 50px;
	border: 1px solid #dfdfdf;
	overflow: hidden;
}

/* *******************************************************************
    main-col2 : 인기강의
******************************************************************* */
.main-col2 {
	padding: 50px 0 70px;
	background-color: #FAFAFA;

}

.main-col2 .inner-wrap {
	flex-direction: column;
	gap: 30px;
}
.main-col2 .inner-wrap .keyword-area ul li a {
	background-color: #fff;
}
/* *******************************************************************
    main-col3 : 신규강의
******************************************************************* */
.main-col3 {
	padding-bottom: 70px;
}
.main-col3 .inner-wrap {
	flex-direction: column;
	gap: 30px;
}

/* *******************************************************************
    main-col4 : 추천강의
******************************************************************* */
.main-col4 {

}
.main-col4 .inner-wrap {
	flex-direction: column;
	gap: 30px;
}