/*-------------< ꕥ 과정 상세페이지(배너) 공통 css 영역 ꕥ >-------------*/

/*--배너 영역-- */
.bannerBox{
  width: 100%; max-width:1080px; height: auto; min-height: 125px; margin: 0 auto; padding: 10px;
  background-repeat: no-repeat; background-color: #2297F4;
  background-size: cover;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}

/* 인기강의배너 */
.best_bannerBox{ background-image: url(/assets/img/banner/bestlist_banner.png); background-position: left; }

/* 추천강의배너 */
.recomend_bannerBox{ background-image: url(/assets/img/banner/recomendlist_banner.png); background-position: left;}

/* 신규강의배너 */
.new_bannerBox{ background-image: url(/assets/img/banner/newlist_banner.png); background-position: right;}

/* 무료강의배너 */
.free_bannerBox{ background-image: url(/assets/img/banner/freelist_banner.png); background-position: right;}

.bannerBoxInner{ word-break: keep-all; margin: 0 auto;}

.bannerBoxInner_h1{font-size: 22px; font-weight: bold; line-height: 28px; color: #fff;} 
.bannerBoxInner_h2{font-size: 26px; font-weight: bold; line-height: 34px; color: #FFF548;}


/* 인기강의배너 h1,h2 구분 적용 */
.bannerBoxInner_h1--best{font-size: 18px !important; line-height:22px !important;}
.bannerBoxInner_h2--best{font-size: 22px !important; line-height:30px !important;}


@media all and (min-width:480px) {
  /* 배너영역 */
  .bannerBox{height: 135px;}
  .bannerBoxInner_h1{ font-size: 24px; line-height: 32px;}
  .bannerBoxInner_h2{ font-size: 28px; line-height: 34px;}

  .bannerBoxInner_h1--best{font-size: 20px !important; line-height:28px !important;}
  .bannerBoxInner_h2--best{font-size: 24px !important; line-height:32px !important;}
  /* -- */
}

@media all and (min-width:540px) {
  /* 배너영역 */
  .bannerBox{height: 150px;}
  .bannerBoxInner_h1{ font-size: 26px; line-height: 32px;}
  .bannerBoxInner_h2{ font-size: 30px; line-height: 38px;}

  .bannerBoxInner_h1--best{font-size: 24px !important; line-height:28px !important;}
  .bannerBoxInner_h2--best{font-size: 26px !important; line-height:36px !important;}
  /* --- */
}


@media all and (min-width:768px) {
  /* 배너영역 */
  .bannerBox{height: 165px;}
  .bannerBoxInner_h1{ font-size: 28px;}
  .bannerBoxInner_h2{ font-size: 34px; line-height: 44px;}

  .bannerBoxInner_h1--best{font-size: 26px !important;}
  .bannerBoxInner_h2--best{font-size: 30px !important; line-height:46px !important;}
  /* --------------------------------------------------- */
}

@media all and (min-width:960px) {
  /* 배너영역 */
  .bannerBox{height: 180px;}
  .bannerBoxInner_h1{ font-size: 30px;}
  .bannerBoxInner_h2{ font-size: 35px; line-height: 50px;}

  .bannerBoxInner_h1--best{font-size: 28px !important;}
  .bannerBoxInner_h2--best{font-size: 34px !important; line-height:50px !important;}
  /* --- */
}

@media all and (min-width:1080px) {
  /* ----배너 영역-----*/
  .bannerBox{height: 200px;}
  .best_bannerBox .bannerBoxInner,
  .recomend_bannerBox .bannerBoxInner{text-align: left;}
  .new_bannerBox .bannerBoxInner{text-align: right;}
  .free_bannerBox .bannerBoxInner{text-align: center;}
  .bannerBoxInner{width: 60%;}
  /* -- */
}