/* 리뉴얼 작업중 */
/* --------------공통-------------- */
/* bg, border padding 공통 */
 *{position: relative;}

.hrdItMain section{padding: 80px 0; letter-spacing: -0.5px; margin-top: 20px;}

.mainCrsSec--best,
.mainSbmGdSec{background-color: #fff;}

.mainCrsSec--new,
.mainNtCsSec{background-color:var(--clr_smWhite);}

.mainCrsSec--new .mnCrsCont__set,
.mnNtCont,
.mnCsCont__csIfo,
.mnCsCont__fstLinkA{background-color: #fff; border: var(--mix_brdr_btrDkr);}

.mainCrsSec--best .mnCrsCont__set,
.mnSbmGdCont__set{background-color: var(--clr_smWhite); border: var(--mix_brdr_btrDkr);}

.mnCrsCont__set,
.mnSbmGdCont__set,
.mnNtCont,
.mnCsCont__csIfo{ border-radius: 18px; overflow: hidden;}
/* -- */

.mainComWrap{width: 95%; max-width: 1200px; margin: 0 auto;}
.mnComCont{width: 100%; display: grid; grid-template-columns: repeat(4, 1fr);}
/* --------------------------------------------- */

/* 배너섹션 */
.mainBnrSec{padding: unset !important; height: 300px;}
.mainBnrSec--slideWrap{
  width: 95%; height: 100%; margin: 0 auto; 
  display: flex; align-items: center; justify-content: center; flex-direction: row; text-align: left;
}
.mainBnrSec--slide a{display: block; height: 100%;}
.mainBnrSec--slide img{height: 100%; object-fit: cover;}
.mainBnrSec--slide--color{background-color: #492FFF;}
.mainBnrSec__txtBox{
  /* background-color: rgb(0 255 243 / 14%); */
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.mainBnrSec__txtBox--wht .mainBnrSec__txtBox--tit ,
.mainBnrSec__txtBox--wht .mainBnrSec__txtBox--txt {color: #fff;}
.mainBnrSec__txtBox--wht .mainBnrSec__txtBox--btnTxt {background-color: #fff; color: #000;}
.mainBnrSec__txtBox--wht .mainBnrSec__txtBox--btnTxt span{filter: brightness(0) saturate(100%) invert(0%) sepia(2%) saturate(7467%) hue-rotate(191deg) brightness(97%) contrast(100%);} 
.mainBnrSec__txtBox--blk .mainBnrSec__txtBox--tit ,
.mainBnrSec__txtBox--blk .mainBnrSec__txtBox--txt {color: #000;}
.mainBnrSec__txtBox--blk .mainBnrSec__txtBox--btnTxt {background-color: #000; color: #fff;}
.mainBnrSec__txtBox--blk .mainBnrSec__txtBox--btnTxt span{filter: brightness(0) saturate(100%) invert(100%) sepia(9%) saturate(151%) hue-rotate(348deg) brightness(115%) contrast(100%);}

.mainBnrSec__txtBox--tit{
  font-size: 20px; font-weight: 700; line-height: 25px;
  word-break: keep-all; margin-bottom: 6px;
}
.mainBnrSec__txtBox--txt{font-size: 12px; font-weight: 400; line-height: 14px;  word-break: keep-all; margin-bottom: 12px;} 
.mainBnrSec__txtBox--btnTxt{
  padding: 4px 10px; box-sizing: border-box;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: fit-content; height: 19px;
  font-size: 10px; font-weight: 400; line-height: 11px;
}
.mainBnrSec__txtBox--btnTxt span{width: 5px; display: flex;}
.mainBnrSec__txtBox--btnTxt span img{width: 100%; height: 100%; object-fit: cover;}

.mainBnrSec__imgBox{
  /* background-color: rgb(81 255 97 / 11%); */
  display: flex; justify-content: flex-start; align-items: center;
}
.mainBnrSec__imgBox--img{width: auto; max-width:100%; height: auto; margin: 0 auto;}
.slidebtnGrp--mainBnrSec{
  position: absolute; left: 50%; bottom: 20px;
  z-index: 1; transform: translateX(-50%);
  width: 95%; max-width: 1200px;
}
.slidebtnGrp--mainBnrSecWrap{display: flex; align-items: center; justify-content: flex-end; gap: 6px;}
.mainBnrSec__btn--flex{display: flex; align-items: center;}
.mainBnrSec__btn{width: 30px; height: 32px; background-color: rgb(0 0 0 / 30%);}
.mainBnrSec__btn span{line-height: 13px; display: block;}
.mainBnrSec__btn--dtl{border-radius: 9px;}
.mainBnrSec__btn--nvg{width: 30px; height: 32px; background-color: rgb(0 0 0 / 30%);}
.mainBnrSec__btn--nvg img{filter: brightness(0) saturate(100%) invert(100%) sepia(3%) saturate(5%) hue-rotate(305deg) brightness(115%) contrast(100%);}
.mainBnrSec__btn--nvgL{border-radius: 9px 0 0 9px;}
.mainBnrSec__btn--nvgR{border-radius: 0 9px 9px 0;}
/* ---------------- */


/* BEST 추천 강의 & NEW 신규강의 공통 */
.mnCrsCont__set{cursor: pointer; display: flex; flex-direction: column;}
.mnCrsCont__img{width: 100%;}
.mnCrsCont__img img{ width: 100% ;  object-fit: cover;} 
.mnCrsCont__dtl{padding: 12px 14px; flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
.mnCrsCont__dtlTit{
  color: var(--clr_black_mn);
  font-weight: 700;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mnCrsCont__dtlIfo{color: var(--clr_black_ex); font-weight: 400;}
.mnCrsCont__dtlCost{
  color: var(--clr_black_mn);
  font-weight: 700; line-height: 25px; text-align: right;
}
.mnCrsCont__dtlCost span{font-size: 18px;}
.mnCrsCont__more{
  width: 180px; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--clr_black_ex); line-height: 19px; 
  border: 1px solid #888; border-radius: 30px;
  background-color: #fff;
  margin: 0 auto; margin-top: 60px;
  cursor: pointer;
}
.mnCrsCont__more span{width: 12px; height: 12px; line-height: 12px; margin-top: 1px;}
.mnCrsCont__more img{
  filter: brightness(0) saturate(100%) invert(52%) sepia(5%) saturate(0%) hue-rotate(142deg) brightness(103%) contrast(87%);
}
.mnCrsCont__more:hover{border: var(--brdr_blue);}
.mnCrsCont__more:hover img{
  filter: brightness(0) saturate(100%) invert(40%) sepia(92%) saturate(4379%) hue-rotate(198deg) brightness(104%) contrast(103%);
}
/* ---------------- */

/* BEST 추천강의 */
.mnCrsCont--best:not(:has(:nth-child(5))) {
  grid-template-rows: repeat(1, 1fr); row-gap: unset;/* 자식 4개 이하일 때 적용 */
}
.mainCrsSec--best .secComTxt__sub{color: var(--clr_dark_org);}
.mnCrsCont__dtl--best{background-color: var(--clr_smWhite);}
/* ---------------- */

/* NEW 신규강의 */
.mnCrsCont--new:not(:has(:nth-child(3))) {
  grid-template-rows: repeat(1, 1fr);/* 자식 2개 이하일 때 적용 */
}
.mnCrsCont__dtl--new{background-color: #fff;}
/* ---------------- */

/* 수강신청가이드 */
.mnSbmGdCont__set{
  height: 232px;
  display: flex; flex-direction: column; justify-content: flex-start;
  cursor: pointer;
}
.mnSbmGdCont__img img{width: 100%; object-fit: cover;}
.mnSbmGdCont__txtWrap{flex: 1; display: flex; flex-direction: column;}
.mnSbmGdCont__tit{ color: var(--clr_black_mn); font-weight: 700;}
.mnSbmGdCont__txt{ color: var(--clr_black_ex); font-weight: 400; flex: 1;}
.mnSbmGdCont__img--1nd{width: 26px; height: 20px; margin-bottom: 11px;}
.mnSbmGdCont__img--2nd{width: 23px; height: 20px; margin-bottom: 11px;}
.mnSbmGdCont__img--3nd{width: 22px; height: 25px; margin-bottom: 6px;}
.mnSbmGdCont__img--4nd{width: 30px; height: 24px; margin-bottom: 7px;}
.mnSbmGdCont__more{
  width: 32px; height: 32px; border-radius: 50px; background-color: #d9d9d9;
  display: flex; align-items: center; justify-content: center;
  margin-left: auto;
}
.mnSbmGdCont__more__img{width: 12px; height: 12px; display: flex; align-items: center; justify-content: center;}
.mnSbmGdCont__set:hover .mnSbmGdCont__more{background-color: var(--clr_black_sub);}
/* ---------------- */

/* 공지사항/고객센터 */
.mainComWrap--ntCs{
  display: flex; align-items: flex-start; justify-content: space-between;
  column-gap: 24px; flex-direction: row;
}
/* 공지사항 */
.mnNtGrp{
  display: flex; flex-direction: column; align-items: flex-start;
  width:60%; max-width: 700px;
}
.mnNtGrp__more{
  font-size: 16px; font-weight: 400; line-height: 19px;
  color:var(--clr_black_ex); white-space: nowrap;
  margin-right: 10px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.mnNtGrp__more__img{ width: 8px; height: 14px; display: flex;}
.mnNtGrp__more__img img{ height: 100%; width: 100%; object-fit: contain;}
.mnNtCont{ width: 100%; padding: 7.5px 30px;}
.mnNtCont__li{border-bottom: var(--mix_brdr_btrDkr);}
.mnNtCont__li:last-child{border-bottom: unset;}
.mnNtCont__li a{
  display: flex; align-items: center; justify-content: space-between;
  column-gap: 30px; cursor: pointer;
  padding: 20px 0; box-sizing: border-box;
  height: 62px;
}
.mnNtCont__liTit{
  color: var(--clr_black_mn);
  font-weight: 700;
  line-height: 22px; white-space: nowrap; text-overflow: ellipsis;  
  overflow: hidden;       
  width: 100%; max-width: 467px;             
}
.mnNtCont__liIfo{
  color: var(--clr_black_ex);
  font-weight: 400; line-height: 19px; white-space: nowrap;
}

/* 고객센터 */
.mnCsGrp{width: 40%; max-width: 476px;}
.mnCsCont{text-align: center;}
.mnCsCont__csIfo{
  width: 100%; height: 148px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  margin-bottom: 12px;
}
.mnCsCont__csIfoCall{
  color: var(--clr_blue);
  font-weight: 700; letter-spacing: -0.5px; margin-bottom: 12px;
}
.mnCsCont__csIfoTxt{ color: var(--clr_black_ex); font-weight: 400; margin-bottom:6px;}
.mnCsCont__csIfoTxt:last-child{margin-bottom: unset;}

.mnCsCont__fstLink{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;}
.mnCsCont__fstLinkA{border-radius: 9px; cursor: pointer; font-weight: 700; height: 48px; line-height: 48px;}
/* ---------------- */


/* ---------- 스마트폰용 스타일 ---------- */
  @media (max-width: 767px) {
  /* 공통 */
  .hrdItMain section{padding: 41px 0 40px;}
  .mainComWrap {width:91.5%;}
  .mnComCont{margin: 0 auto; grid-template-columns: repeat(2, 1fr); row-gap: 20px; column-gap: 12px;}
  .mnCrsCont__set,
  .mnSbmGdCont__set,
  .mnNtCont,
  .mnCsCont__csIfo{border-radius: 9px;}
  /* ---------------- */

  /* 배너 섹션 */
  .mainBnrSec--slideWrap{text-align: center; flex-direction: column;}
  .mainBnrSec__txtBox{
    width: 100%; height: 141px;
    /* width: 100%; height: 125px; */
    position: absolute; top: 0; z-index: 1;
    justify-content: flex-start; align-items: center;
    padding-top: 24px; box-sizing: border-box
  }
  .mainBnrSec__imgBox{
    width: 100%; height: 160px;
    /* width: 100%; height: 175px; */
    position: absolute; bottom: 0;
    align-items: flex-start; justify-content: center;
  }
  .mainBnrSec__imgBox--img{height: 100%;}
  .slidebtnGrp--mainBnrSec {right: 16px; bottom: 16px; left: unset; transform: unset; width: fit-content;}
  .mainBnrSec__btn--flex{display: none;}
  /* ---------------- */

  /* BEST 추천 강의 & NEW 신규강의 공통 */
  .mnCrsCont__more{
    font-size: 11px; line-height: 13px;
    margin-top: 30px; width: 130px; height: 29px;
  }
  .mnCrsCont__more span{width: 9px; height: 9px; display: flex; margin-top: 0;}
  /* .mnCrsCont__img{height: 55%; min-height: 99px; max-height: 160px;} */
  /* .mnCrsCont__img img{min-height: 99px;} */
  .mnCrsCont__dtl{padding:6px 8px 8px 8px;}
  .mnCrsCont__dtlTit{font-size: 14px; line-height: 20px; min-height: 40px; margin-bottom:4px;}
  .mnCrsCont__dtlIfo{font-size: 10px; line-height: 12px;}
  .mnCrsCont__dtlCost{font-size: 16px; line-height: 19px;}
  .mnCrsCont__dtlCost span{font-size: 13px; line-height: 15px;}

  /* BEST 추천강의 */
  .mnCrsCont--best:not(:has(:nth-child(3))) {
    grid-template-rows: repeat(1, 1fr); row-gap: unset;/* 자식 2개 이하일 때 적용 */
  }
  .mnCrsCont--best .mnCrsCont__set:nth-child(n+5){display: none;}

  /* NEW 신규강의 */
  .mnCrsCont--new .mnCrsCont__set:nth-child(n+5){display: none;}
  /* ---------------- */

  /* 수강신청가이드 */
  .mnSbmGdCont{grid-template-rows: repeat(auto-fit, minmax(0, 1fr));}
  .mnSbmGdCont__set{padding: 16.8px 6px 6px 12px; height: auto; min-height: 134px;}
  .mnSbmGdCont__tit{font-size: 14px; line-height: 15px; margin-bottom: 6px;}
  .mnSbmGdCont__txt{font-size: 12px; line-height: 15px; padding-right: 6px;}
  .mnSbmGdCont__moreWrap{flex: 1; display: flex; flex-direction: column; justify-content: end;}
  .mnSbmGdCont__more{width: 18px; height: 18px;}
  .mnSbmGdCont__more__img{width: 6px; height: 6px; }
  /* ---------------- */

  /* 공지사항/고객센터 */
  .mainComWrap--ntCs{flex-direction: column; row-gap: 41px;}

  /* 공지사항 */
  .mnNtGrp{width:100%; max-width: unset;}
  .mnNtGrp__more{font-size: 13px; line-height: 15px;}
  .mnNtCont{padding: 7.5px 12px;}
  .mnNtCont__li a{padding: 12px 0;}
  .mnNtCont__liTit{font-size: 14px; line-height: 16px;}
  .mnNtCont__liIfo{font-size: 14px; line-height: 16px;}

  /* 고객센터 */
  .mnCsGrp{width: 100%; max-width: unset;}
  .mnCsCont__csIfo{height: 102px; margin-bottom: 9px;}
  .mnCsCont__fstLink{gap: 8px;}
  .mnCsCont__csIfoCall{font-size: 26px; line-height: 30px; margin-bottom: 9px;}
  .mnCsCont__csIfoTxt{font-size: 12px; line-height: 13px;}
  .mnCsCont__fstLinkA{font-size: 14px; height: 33px; line-height: 33px;} 
  /* ---------------- */
}


/* ----------- 태블릿용 스타일 ----------- */

@media (min-width: 768px) and (max-width: 1023px) {
  /* 공통 */
  /* .mainComWrap{p width: 95%;} */
  .mnComCont{grid-template-columns: repeat(4, 1fr); column-gap: 12px;}
  .mnCrsCont__set,
  .mnSbmGdCont__set,
  .mnNtCont,
  .mnCsCont__csIfo{border-radius: 15px;}
  /* ---------------- */

  /* 배너 섹션 */
  .mainBnrSec__txtBox{width: 60%; height:100%;}
  .mainBnrSec__txtBox--tit{font-size: 28px; line-height: 36px; margin-bottom: 8px;}
  .mainBnrSec__txtBox--txt{font-size: 14px; margin-bottom: 24px; line-height: 21px;} 
  .mainBnrSec__txtBox--btnTxt{
    padding: 4px 10px; gap: 8px; height: 22px;
    font-size: 12px; 
  }
  .mainBnrSec__txtBox--btnTxt span{width: 5px; height: 9px; display: flex;}
  .mainBnrSec__imgBox{
    width: 40%; height: 100%; justify-content: center;
  }
  /* BEST 추천강의 & NEW 신규강의 공통 */
  .mnCrsCont__more{font-size: 14px;}
  .mnCrsCont__more img{margin-top: unset;}
  /* .mnCrsCont__img{height: 120px;}  */
  .mnCrsCont__dtl{padding: 8px;}
  .mnCrsCont__dtlTit{font-size: 14px; line-height: 20px; min-height: 40px;}
  .mnCrsCont__dtlIfo{font-size: 12px; line-height: 14px; margin-bottom: 5px;}
  .mnCrsCont__dtlCost{font-size: 18px;}

  /* BEST 추천강의 */
  .mnCrsCont--best{row-gap: 20px;}

  /* NEW 신규강의 */
  .mnCrsCont--new{grid-template-rows: repeat(1, 1fr); grid-auto-rows: 0; overflow: hidden; row-gap: unset;}

  
  /* 수강신청 가이드 */
  .mnSbmGdCont__set{padding: 16px 8px 8px 16px; height: auto; gap: 15px;}
  .mnSbmGdCont__tit{font-size: 18px; margin-bottom: 12px;}
  .mnSbmGdCont__txt{font-size: 14px; line-height: 19px; padding-right: 8px;}
  .mnSbmGdCont__img--1nd,
  .mnSbmGdCont__img--2nd,
  .mnSbmGdCont__img--3nd,
  .mnSbmGdCont__img--4nd{transform: scale(1.2);}
  /* ---------------- */

  /* 공지사항/고객센터 */
  /* 공지사항 */
  .mainComWrap--ntCs{column-gap: 12px;}
  .mnNtGrp__more{font-size: 14px; line-height: 17px;}
  .mnNtCont__liTit{font-size: 15px;}
  .mnNtCont__liIfo{font-size: 14px;}
  
  /* 고객센터 */
  .mnCsCont__csIfo{padding: 0 10px;}
  .mnCsCont__csIfoCall{font-size: 28px; line-height: 42px;}
  .mnCsCont__fstLinkA{font-size: 15px;}
  .mnCsCont__csIfoTxt{font-size: 14px; margin-bottom: 4px;}
  /* ---------------- */
}


/* ---------- 데스크탑용 스타일 ---------- */
@media (min-width: 1024px) {
  /* 공통 */
  .hrdItMain section{margin-top: unset;}
  .mnComCont{column-gap: 24px; row-gap: 40px;}

  /* 배너 섹션 */
  .mainBnrSec{height: 340px;}
  .mainBnrSec__txtBox{ width: 55%; height: 100%; }
  .mainBnrSec__txtBox--tit{font-size: 32px; line-height: 40.5px; margin-bottom: 12px;}
  .mainBnrSec__txtBox--txt{font-size: 16px; margin-bottom: 28px; line-height: 27px;} 
  .mainBnrSec__txtBox--btnTxt{
    padding: 6px 12px; gap: 9px;
    font-size: 14px; line-height: 18px;
    height: 30px;
  }
  .mainBnrSec__txtBox--btnTxt span{width: 8px; height: 14px;}
  .mainBnrSec__imgBox{width: 45%; height: 100%; }
  .mainBnrSec__imgBox--img{margin: unset;}

  /* BEST 추천 강의 & NEW 신규강의 공통 */
  /* .mnCrsCont__img{height: 150px;}  */
  .mnCrsCont__dtl{padding: 8px 10px;}
  .mnCrsCont__dtlTit{font-size: 16px; line-height: 22px; min-height: 40px;}
  .mnCrsCont__dtlCos{font-size: 20px;}
  .mnCrsCont__dtlIfo{font-size: 14px; line-height: 16px;}

  /* NEW 신규강의 */
  .mnCrsCont--new{grid-template-rows: repeat(1, 1fr); grid-auto-rows: 0; overflow: hidden; row-gap: unset;}

  /* 수강신청 가이드 */
  .mnSbmGdCont__set{padding: 25px 14px 12px 25px; justify-content: space-between;}
  .mnSbmGdCont__txtWrap{flex: none;}
  .mnSbmGdCont__tit{font-size: 20px; margin-bottom: 10px;}
  .mnSbmGdCont__txt{font-size: 14px; line-height: 19px; min-height: 63px;}
  .mnSbmGdCont__txt span{display: block; word-break: keep-all;}
  .mnSbmGdCont__img--1nd,
  .mnSbmGdCont__img--2nd,
  .mnSbmGdCont__img--3nd,
  .mnSbmGdCont__img--4nd{width: auto; height: auto; margin-bottom: unset;}

  /* 공지사항 */
  .mnNtCont__liTit{font-size: 16px;}
  .mnNtCont__liIfo{font-size: 14px;}

  /* 고객센터 */
  .mnCsCont__csIfoCall{font-size: 32px; line-height: 45px;}
  .mnCsCont__csIfoTxt{font-size: 15px; line-height: 16px;}
  .mnCsCont__fstLinkA{font-size: 16px;}
}

@media (min-width:1200px) {
  /* 배너 섹션 */
  .mainBnrSec__txtBox{ width: 590px;}
  .mainBnrSec__txtBox--tit{font-size: 38px; line-height: 46.5px; margin-bottom: 16px;}
  .mainBnrSec__txtBox--txt{font-size: 18px; margin-bottom: 32px;} 
  .mainBnrSec__txtBox--btnTxt{
    padding: 7.5px 15px; gap: 9px;
    font-size: 16px; line-height: 19px;
    height: 34px;
  }
  .mainBnrSec__imgBox{width: 610px;}
  .mainBnrSec__imgBox--img,
  .mainBnrSec__imgBox--img img{height: 100%;}

  /* BEST 추천 강의 & NEW 신규강의 공통 */
  /* .mnCrsCont__img{height: 176px;} */
  .mnCrsCont__dtl{padding: 12px 14px;}
  .mnCrsCont__dtlTit{font-size: 18px; line-height: 22.5px; min-height: 45px;}
  .mnCrsCont__dtlCost{font-size: 22px;}

  /* 수강신청 가이드 */
  .mnSbmGdCont__set{padding: 20px 14px 12px 30px;}
  .mnSbmGdCont__tit{font-size: 24px; margin-bottom: 12px;}
  .mnSbmGdCont__txt{font-size: 16px; line-height: 21px;}
  
  /* 공지사항 */
  .mnNtCont__liTit{font-size: 18px;}
  .mnNtCont__liIfo{font-size: 16px;}

  /* 고객센터 */
  .mnCsCont__csIfoCall{font-size: 38px;}
  .mnCsCont__csIfoTxt{font-size: 16px; line-height: 19px;}
  .mnCsCont__fstLinkA{font-size: 18px;}
}