@charset "UTF-8";

/* *******************************************************************
	전체강의 (강의 리스트 메인 스타일 복사)
******************************************************************* */
.keyword-area {
	margin: 0 0 30px;
    display: flex;
    justify-content: space-between;
}
.keyword-area ul {
	display: flex;
	gap: 10px;
}
.keyword-area ul li {
	line-height: 1;
}
.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;
}
.keyword-area ul li a:hover {
	background-color: #e7e7e7;
}
.keyword-area ul li.active a {
	color: #fff;
	border: 1px solid #000;
	background-color: #000;
}

.keyword-area ul.color-label li a {
    border-radius: 6px;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
}

/*추천*/
.keyword-area ul li.blue-label.active a,
.keyword-area ul li.blue-label a:hover {
    background-color: #0064ff;
    border: 1px solid #0064ff;
    color: #fff;
}
/*인기*/
.keyword-area ul li.red-label.active a,
.keyword-area ul li.red-label a:hover {
    background-color: #FF3636;
    border: 1px solid #FF3636;
    color: #fff;
}
/*신규*/
.keyword-area ul li.green-label.active a,
.keyword-area ul li.green-label a:hover{
    background-color: #14C847;
    border: 1px solid #14C847;
    color: #fff;
}
/*강의 리스트*/
.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 {
	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);
}
/*패키지 라벨*/
span.package-label {
    margin-right: 8px;
    background-color: #fd3637;
    color: #fff;
}
/*리스트페이지 라벨*/
.lecture-list-area span.package-label {
    position: absolute;
    padding: 7px 12px 5px 12px;
    font-size: 15px;
    border-radius: 10px 0px 5px 0px;
    z-index: 999;
}
/*세부페이지 라벨*/
.view-bottom-area span.package-label {
    padding: 6px 8px 4px 8px;
    margin-top:-4px;
    font-size: 16px;
    line-height: 1.2;
    border-radius: 3px;
}
/* 오픈 예정 썸네일 준비중 */
.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 .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.5;
}
.lecture-list-area li a .sub-title {
	display: flex;
    align-items: flex-end;
	gap: 5px;
	color: #97999B;
	font-size: 13px;
    font-weight: 700;
}
.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;
}
.lecture-list-area li a .sub-title .profile svg {
    color: #c3c3c3;
    padding: 2px;
    width: 25px;
    height: 25px;
    border-radius: 50px;
    border: 1px solid #c3c3c3;
}

/* *******************************************************************
	전체강의 > 강의 세부 페이지 (재생페이지)
******************************************************************* */
.article.vimeo-iframe-area {
    flex-grow: 100;
}

/* 비메오 영상 */
.view-area {
    width: 100%;
    height: 572px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background-color: #000;
}
.view-area iframe {
    width: 100%;
    height: 100%;
}

/* 하단의 강의 정보 */
.view-bottom-area {
    display: flex;
    justify-content: space-between;
    padding-top: 45px;
}

/* 왼쪽 */
.view-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 60%;
}
.view-info .keyword {
    font-size: 15px;
    color: #14C847;
}
.view-info .title-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.view-info .title-area .title {
    display: flex;
    align-items: center;
    font-size: 27px;
    font-weight: 800;
}

.view-info .title-area .icon-area .btn-copy-link svg {
    width: 34px;
    height: 35px;
    background-color: #f3f3f3;
    border-radius: 50px;
    padding: 6px;
    border: 1px solid #e1e1e1;
    color: #444;
}
.view-info .title-area .icon-area a:hover {
    color: #FD343A;
}
.btn-copy-link {

}
.view-info .profile-area {
    display: flex;
    gap: 10px;
}
.view-info .profile-area .profile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.view-info .profile-area .profile svg {
    color: #999999;
    padding: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50px;
    border: 1px solid #999999;
}
.view-info .profile-area .name {
    color: #999;
    font-size: 16px;
    line-height: 2;
}
.view-info .profile-area .name > br {
    display: none;
}
/* 오른쪽 */
.view-price {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 240px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.view-price .top-area {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 30px;
}
.view-price .price {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 26px;
}
.view-price .price .discount {
    color: #FF3636;
}
.view-price .price .price-detail {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}
.view-price .price .cost {
    font-size: 19px;
    color: #97999B;
}
.view-price .price .result {
    color: #333;
    font-weight: 800;
}
.view-price .btn-area {
    background-color: #FF3636;
    border-radius: 5px;
}
.view-price .btn-area a {
    display: block;
    padding: 10px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
}

/* 하단 강의 정보 */
.sub-info {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    padding: 20px 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background: #FAFAFA;
}
.sub-info div:not(.divline) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color:#97999B;
}
.sub-info div .feather {
    width: 18px;
}
.sub-info div span {
    display: inline-block;
    padding-top: 3px;
    font-size: 15px;
    font-weight: 600;
}
.sub-info div.divline {
    width: 1px;
    height: 15px;
    background-color: #dfdfdf;
}

/* *******************************************************************
   하단 탭 > 강의구성
******************************************************************* */
.view-tab-area .table-responsive {
    border: 1px solid #777;
    border-radius: 5px;
    /*box-shadow: 0px 0px 6px 1px #efefef;*/
}
.view-tab-area .table-responsive table.grid {
    width: 100%;
    border: none !important;
}
.view-bottom-area .table-responsive table.grid thead th {
    display: none;
}
.view-tab-area .table-responsive .grid tr {
    border-top:none;
    padding: 15px 0;
}
.view-tab-area .table-responsive table.grid tr td {
    padding: 15px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}
.view-tab-area .table-responsive table.grid tr td > svg,
.view-tab-area .table-responsive table.grid tr td ul li svg {
    width: 17px;
    vertical-align: middle;
    margin-top: -4px;
    margin-right: 3px;
}
.view-tab-area .table-responsive table.grid tr td span {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    word-break: break-all;
    vertical-align: middle;
    text-overflow: ellipsis;
}
/*세부강의*/
.view-tab-area .table-responsive table.grid tr td ul {
    margin-left: 20px;
    margin-top: 12px;
}
.view-tab-area .table-responsive table.grid tr td ul li {
    display: flex;
    justify-content: space-between;
    line-height: 1.9;
    font-size: 14px;
    color: #8b8b8b;
}

.view-tab-area .table-responsive .grid tr:last-child td {
    border-bottom: none;
}
.view-tab-area .table-responsive table.grid tr td:first-child > span {
    width: 450px;
    font-size: 16px;
    font-weight: 700;
}


.article .section .preview-label {
    position: absolute;
    width: 100%;
    left: 15px;
    top: 15px;
}
.article .section .preview-label p {
    display: inline-block;
    margin:0 !important;
    padding: 10px 40px;
    color: #fff;
    border-radius: 10px;
    background-color: #ff2626;
    font-size: 18px;
    font-weight: 900;
}