@charset "utf-8";

/* --------------------------------------------------- */
/* LCUX-19562 : 과정상세 HTML 템플릿용 신규 가이드           */
/* - '.course_template' 클래스 기준으로 동작               */
/* --------------------------------------------------- */

/* 공통 */
.course_template h4 + * {margin-top:20px !important;}


/* 헤드라인 */
.course_template .headline p {line-height:28px;font-size:18px;color:#222;}
.course_template .headline .tags {display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px;margin-top:21px;}
.course_template .headline .tags span {display:inline-block;height:46px;line-height:44px;font-size:18px;color:#fe6b01;font-weight:normal;letter-spacing:-.25px;background-color:#fff;border:1px solid #fe6b01;border-radius:23px;padding:0 24px;}


/* 타이틀 */
.course_template h4 {line-height:45px;font-size:30px;color:#000;font-weight:bold;letter-spacing:-.3px;margin-top:60px;}
.course_template h4[class*="icon-"] {position:relative;padding-left:46px;}
.course_template h4[class*="icon-"]:before {content:'';position:absolute;top:0;left:0;width:36px;height:45px;background-size:contain;background-position:center;background-repeat:no-repeat;}

.course_template h4.icon-chart:before {background-image:url(https://static.multicampus.com/de_common/mulcam/course/template/images/icon_subtitle_chart.svg);}
.course_template h4.icon-bookmark:before {background-image:url(https://static.multicampus.com/de_common/mulcam/course/template/images/icon_subtitle_bookmark.svg);}
.course_template h4.icon-trophy:before {background-image:url(https://static.multicampus.com/de_common/mulcam/course/template/images/icon_subtitle_trophy.svg);}
.course_template h4.icon-person:before {background-image:url(https://static.multicampus.com/de_common/mulcam/course/template/images/icon_subtitle_person.svg);}
.course_template h4.icon-index:before {background-image:url(https://static.multicampus.com/de_common/mulcam/course/template/images/icon_subtitle_index.svg);}
.course_template h4.icon-review:before {background-image:url(https://static.multicampus.com/de_common/mulcam/course/template/images/icon_subtitle_review.svg);}
.course_template h4.icon-related:before {background-image:url(https://static.multicampus.com/de_common/mulcam/course/template/images/icon_subtitle_related.svg);}


/* 박스 */
.course_template section .box {background-color:#fff;border:1px solid #ccc;border-radius:10px;padding:34px;margin-top:17px;}
.course_template section .box p {line-height:34px;font-size:18px;color:#000;margin-top:6px;}
.course_template section .box p.title {position:relative;line-height:30px;font-size:24px;font-weight:bold;padding-left:30px;}
.course_template section .box p.title:before {content:'';position:absolute;top:4px;left:0;width:22px;height:22px;background-image:url(https://static.multicampus.com/de_common/mulcam/course/template/images/icon_check_orange.svg);background-size:contain;background-position:center;background-repeat:no-repeat;}
.course_template section .box p.title + p {margin-top:17px;}


/* 순서형 목록 */
.course_template ul.num {margin-top:0;}
.course_template ul.num li {position:relative;list-style:none;line-height:28px;font-size:18px;color:#000;font-weight:normal;letter-spacing:-.3px;word-break:keep-all;padding-left:25px;}
.course_template ul.num li + li {margin-top:9px;}
.course_template ul.num li:after {display:none;}
.course_template ul.num li:before {content:'';position:absolute;top:0;left:0;color:#fe6b01;}
.course_template ul.num li:nth-child(1):before {content:'①';}
.course_template ul.num li:nth-child(2):before {content:'②';}
.course_template ul.num li:nth-child(3):before {content:'③';}
.course_template ul.num li:nth-child(4):before {content:'④';}
.course_template ul.num li:nth-child(5):before {content:'⑤';}
.course_template ul.num li:nth-child(6):before {content:'⑥';}
.course_template ul.num li:nth-child(7):before {content:'⑦';}
.course_template ul.num li:nth-child(8):before {content:'⑧';}
.course_template ul.num li:nth-child(9):before {content:'⑨';}
.course_template ul.num li:nth-child(10):before {content:'⑩';}
.course_template ul.num li:nth-child(11):before {content:'⑪';}
.course_template ul.num li:nth-child(12):before {content:'⑫';}
.course_template ul.num li:nth-child(13):before {content:'⑬';}
.course_template ul.num li:nth-child(14):before {content:'⑭';}
.course_template ul.num li:nth-child(15):before {content:'⑮';}
.course_template ul.num li:nth-child(16):before {content:'⑯';}
.course_template ul.num li:nth-child(17):before {content:'⑰';}
.course_template ul.num li:nth-child(18):before {content:'⑱';}
.course_template ul.num li:nth-child(19):before {content:'⑲';}
.course_template ul.num li:nth-child(20):before {content:'⑳';}


/* 카드형 목록 */
.course_template ul.card {display:grid;grid-template-columns:repeat(2, 1fr);gap:20px;background-color:transparent;border:0;border-radius:0;padding:0;margin:0;}
.course_template ul.card li {display:flex;align-items:center;justify-content:center;line-height:28px;font-size:18px;color:#000;font-weight:normal;text-align:center;letter-spacing:-.3px;word-break:keep-all;background-color:#f2f2f2;border-radius:10px;padding:30px 40px;}
.course_template ul.card li:after {display:none;}



@media (--mobile-viewport) {

  /* 공통 */
  .course_template h4 + * {margin-top:16px !important;}


  /* 헤드라인 */
  .course_template .headline p {line-height:26px;font-size:16px;}
  .course_template .headline .tags {gap:8px;margin-top:20px;}
  .course_template .headline .tags span {height:36px;line-height:34px;font-size:14px;border-radius:18px;padding:0 16px;}


  /* 타이틀 */
  .course_template h4 {line-height:33px;font-size:22px;margin-top:40px;}
  .course_template h4[class*="icon-"] {padding-left:32px;}
  .course_template h4[class*="icon-"]:before {width:26px;height:33px;}


  /* 박스 */
  .course_template section .box {padding:24px 20px;margin-top:14px;}
  .course_template section .box p {line-height:22px;font-size:14px;}
  .course_template section .box p.title {line-height:24px;font-size:16px;padding-left:24px;}
  .course_template section .box p.title:before {top:3px;width:18px;height:18px;}


  /* 순서형 목록 */
  .course_template ul.num li {line-height:22px;font-size:14px;padding-left:20px;}
  .course_template ul.num li + li {margin-top:14px;}


  /* 카드형 목록 */
  .course_template ul.card {display:flex;flex-direction:column;gap:10px;}
  .course_template ul.card li {line-height:24px;font-size:14px;padding:20px;}

}