@charset "UTF-8";
/*
 * custom.css
 * ---------------------------------------------------------------------------
 * 퍼블리셔가 SCSS로 컴파일해 관리하는 파일(common.css 등)을 직접 수정하면
 * 재컴파일 시 충돌/유실이 발생하므로, 개발 측 추가/수정 스타일은 이 파일에 모아
 * 관리한다. (common.css 이후에 로드되어 필요 시 오버라이드 가능)
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
 * 교육과정 메뉴 '무료수강 100%' 툴팁
 * 상단 헤더 네비게이션의 교육과정 좌측 상단에 말풍선(툴팁) 노출.
 * =========================================================================== */
header .head_bot .gnb_inner nav .depth1 > li.course-menu {
  position: relative;
}
header .head_bot .gnb_inner nav .depth1 > li.course-menu .free-tip {
  position: absolute;
  left: 0.6rem;
  bottom: calc(100% + 0.7rem);
  z-index: 20;
  display: block;
  width: max-content;
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  background: linear-gradient(90deg, #832CBD 0%, #5838E6 100%);
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 0.4rem 1rem rgba(88, 56, 230, 0.3);
  pointer-events: none;
  -webkit-text-stroke: 0;
  animation: freeTipFloat 1.6s ease-in-out infinite alternate;
}
header .head_bot .gnb_inner nav .depth1 > li.course-menu .free-tip::after {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-top: 0.7rem solid #6438d9;
}
@keyframes freeTipFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-0.4rem);
  }
}
/* 사이트맵(전체메뉴)에서는 무료수강 툴팁을 노출하지 않음 */
#wrap .sitemap .site_navi .free-tip {
  display: none;
}

/* ===========================================================================
 * 교육과정 목록 페이지(/home/content/offline/all) subTit '전액무료 0원' 툴팁
 * subTit 의 교육과정(h1) 텍스트 위에 말풍선 노출.
 * (.subTit 는 overflow:hidden 이지만 상단 패딩 영역 안이라 잘리지 않음)
 * =========================================================================== */
.subHeader .subTit h1.course-title {
  position: relative;
  overflow: visible;
}
.subHeader .subTit h1.course-title .free-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.8rem);
  z-index: 30;
  display: block;
  width: max-content;
  padding: 0.5rem 1.1rem;
  border-radius: 0.6rem;
  background: linear-gradient(90deg, #832CBD 0%, #5838E6 100%);
  color: #ffffff;
  font-family: "Pretendard", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 0.4rem 1rem rgba(88, 56, 230, 0.3);
  pointer-events: none;
  animation: freeTipFloat 1.6s ease-in-out infinite alternate;
}
.subHeader .subTit h1.course-title .free-tip::after {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-top: 0.7rem solid #6438d9;
}

/* ===========================================================================
 * 콘텐츠 상세 페이지(/home/content/offline/detail) 썸네일 '전액무료 0원' 툴팁
 * m_thumb 우측 상단에 말풍선 노출. (m_thumb 는 overflow:hidden 이므로
 * 모서리 안쪽에 배치해 잘리지 않도록 함)
 * =========================================================================== */
main .m_inner .m_thumb .free-tip {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 20;
  display: block;
  width: max-content;
  padding: 0.6rem 1.2rem;
  border-radius: 0.6rem;
  background: linear-gradient(90deg, #832CBD 0%, #5838E6 100%);
  color: #ffffff;
  font-family: "Pretendard", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
  pointer-events: none;
  animation: freeTipFloat 1.6s ease-in-out infinite alternate;
}
main .m_inner .m_thumb .free-tip::after {
  content: "";
  position: absolute;
  right: 1.6rem;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 0.6rem solid transparent;
  border-right: 0.6rem solid transparent;
  border-top: 0.7rem solid #6438d9;
}