@charset "UTF-8";

#free-course {overflow: hidden; background: #1b1b1b; padding: 50px 0 80px;}

#free-course .wrap:last-child{position: relative;}

#free-course h3 {text-align: center; font-size: 40px; line-height: 45px; font-weight: 500; color: #fff; padding-bottom: 30px;}

#free-course .swiper-container {margin-top: 0;}

#free-course .course-item {background-color: #252525;}

#free-course .course-item__thumbnail {width: 100%; aspect-ratio: 350 / 205; position: relative; overflow: hidden; cursor: pointer;}

#free-course .course-item__thumbnail::after {content: ''; display: block; width: 52px; height: 52px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: url('https://img.minervaacademy.co.kr/wowfa20/front/assets/img/main/contents/play.png') no-repeat center; background-size: contain;}

#free-course .course-item__image {width: 100%;}

#free-course .course-item__info {padding: 4% 3% 0;}

#free-course .course-item__title {color: #fff; font-weight: 300; font-size: 17px; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer;}
#free-course .course-item__subject {color: #9d9d9d; font-size: 14px; font-weight: 300; margin: 3% 0 0; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

#free-course .course-item__footer {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 3%; margin: 7% 0;}
#free-course .course-item__footer::before {content: '무료'; color: #fff; font-size: 11px; font-weight: 400; padding: 2% 4%; border-radius: 20px; background-color: #ee2028;}

#free-course .course-item__link {display: inline-block; width: 50%; color: #9d9d9d; font-size: 12px; font-weight: 300; text-align: right;}
#free-course .course-item__link::after {content: ''; display: inline-block; width: 4px; height: 8px; margin-left: 3%; background: url('https://img.minervaacademy.co.kr/wowfa20/front/assets/img/main/contents/arrow-2.png') no-repeat right; background-size: contain;}

/* 모달 배경 (주변 어둡게) */
.kollus-modal-overlay {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; align-items: center; justify-content: center;}

.kollus-modal-overlay.active {display: flex;}

/* 모달 본체 */
.kollus-modal-content {position: relative; width: 90%; max-width: 800px; background-color: #2b2b2b; padding: 20px 20px 24px 20px; box-sizing: border-box; box-shadow: 0 10px 30px rgba(0,0,0,0.5);}

.kollus-modal-header {display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;}
.kollus-header-text {color: #ffffff;}
.kollus-title {margin: 0 0 4px 0; font-size: 22px; font-weight: 600; letter-spacing: -0.5px;}
.kollus-subject {margin: 0; font-size: 15px; font-weight: 400; color: #b3b3b3;}

/* 모달 닫기 버튼 */
.kollus-close-btn {background: transparent; border: none; color: #ffffff; font-size: 46px; font-weight: 100; line-height: 0.6; padding: 0; cursor: pointer; transition: opacity 0.2s;}
.kollus-close-btn:hover {opacity: 0.7;}

/* 영상 영역 (16:9 비율 유지) */
#kollusIframeContainer {width: 100%; aspect-ratio: 16 / 9; background-color: #000;}
#kollusIframeContainer iframe {width: 100%; height: 100%; border: none; display: block;}

@media (hover: hover) and (pointer: fine) {
	#free-course .course-item__thumbnail:hover .course-item__image {filter: brightness(0.5); transform: scale3d(1.04, 1.04, 1.04); transition: all .15s linear;}
}

@media (max-width: 768px) {
	#free-course {padding: 0 0 40px 0;}

	#free-course h3 {font-size: 20px; line-height: 29px; padding-bottom: 20px;}

	#free-course .course-item__thumbnail::after {width: 32px; height: 32px;}

	#free-course .course-item__title {font-size: 14px;}
	#free-course .course-item__subject {font-size: 11px;}

	#free-course .course-item__footer {}
	#free-course .course-item__footer::before {font-size: 9px;}

	#free-course .course-item__link {font-size: 10px;}
	#free-course .course-item__link::after {width: 3px; height: 7px;}

	/* 모달 */
	.kollus-modal-content {width: 95%; padding: 16px 16px 20px 16px;}

	.kollus-title {font-size: 18px; margin-bottom: 2px;}
	.kollus-subject {font-size: 13px;}

	.kollus-close-btn {font-size: 38px; margin-top: -4px;}
}