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

/* 일반과정에만 포함 */
.searchBox-courList{
	display: flex;	justify-content: end;
	width: 100%;	margin: 0 auto;	
  margin-bottom: 20px; margin-top: 20px;
}
@media all and (min-width:640px) {.searchBox-courList .searchInputBox{width: auto;}}
/* -------------------------------------------------------------------------- */

/* 과정 리스트 공통 */
.courListSec{padding-bottom:100px; min-height: calc(100vh - 122px);}

/* css 코드 IT 와 다름 */
.pagination:not(:has(ul)){margin-bottom: 0;}
/* -- */

.courselist {
  width: 100%; min-width: 260px;
  margin: 0px auto; margin-top: 60px; max-width: 400px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-row-gap: 15px; grid-column-gap: 12px;
}
.courselist_li {
  width: auto;
  display: flex; justify-content: space-between; align-items: center;
  border-radius: 7px;
  box-shadow: 
    0px 0px 3px 0px rgb(0 0 0 / 6%),
    0px 0px 2px 0px rgb(0 0 0 / 17%),
    2px 2px 2px 1px rgb(0 0 0 / 4%);
  background-color: #fdfdfd;
  overflow: hidden;
}
.courselist_li a{display: block; width: 100%;}
.liInnerBox { width: 100%; margin: 0 auto;}
.liInnerBox_img {
  width: 100%; 
  position: relative;
  background-color:#dfdfdf; overflow: hidden;
}
.liInnerBox_img img{width: 100%; height: 100%; object-fit: cover; transition: ease 0.2s;}
.courselist_li:hover .liInnerBox_img img{transform: scale(1.02); transition: ease 0.15s;}


.liInnerBox_text {margin: 8px;}
.liInnerBox_text .titlebox {
  min-height:38px;
  font-size: 14px; color: #404040; 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
  line-height: 18px;
}
.courselist_li:hover .titlebox {color: #2297F4;}

.liInnerBox_text .pricebox{width: 100%; box-sizing: border-box; margin-top:5px; text-align: right;}
.liInnerBox_text .pricebox .krwSpan{
  margin-left: 3px;
  width: 14px;
  display: inline-block;
  font-size: 15px;
}
.liInnerBox_text .pricebox > h5 {color: #A2A092;text-decoration: line-through; margin-bottom: 3px; font-size: 12px;}
.liInnerBox_text .pricebox .saleSpan {color: #FF6913; font-weight: bold; font-size:12px;}
.liInnerBox_text .pricebox > p {display: inline-block; margin-left: 6px; color: #101010; font-weight: bold; font-size:14px; width: fit-content;}
body:not(:has(.free_bannerBox)) .liInnerBox_text .pricebox .saleSpan{display: block;}
/* -------------------------------------------------------------------------- */

@media all and (min-width:400px) {
  body:not(:has(.free_bannerBox)) .liInnerBox_text .pricebox .saleSpan{display: inline;}
}

@media all and (min-width:480px) {
  .courselist {grid-row-gap: 25px; grid-column-gap: 20px; max-width: 420px;}
  .liInnerBox_img {height: 140px;}
  .liInnerBox_text .pricebox{margin-top: 12px;}
  .liInnerBox_text .pricebox > h5{font-size: 14px; margin-bottom: 8px;}
  .liInnerBox_text .pricebox .saleSpan{font-size: 13px;}
  .liInnerBox_text .pricebox > p{font-size: 16px;}/* 반응형 확인 잘 해야 함 */
}

@media all and (min-width:540px) {
  .courselist { max-width: 450px; grid-template-columns: repeat(2,1fr);}
  .liInnerBox_img {height: 150px;}
}

@media all and (min-width:640px) { .courselist {margin-top: 70px;}}

@media all and (min-width:768px) {
  .courselist {width: 95%; max-width: 740px; grid-template-columns: repeat(3, 1fr); grid-column-gap: 25px;}
  .liInnerBox_text{margin: 12px;}
  .liInnerBox_text .pricebox .saleSpan{font-size: 14px;}
}

@media all and (min-width:1040px) {
  .courselist {
    max-width: unset; margin-top: 60px;
    grid-row-gap: 30px; grid-column-gap: 30px; grid-template-columns: repeat(4, 1fr);
  }
}

@media all and (min-width:1080px) {
  .courListSec{padding-bottom:150px;}
  .courselist {grid-column-gap: 35px;}
  .liInnerBox_img {height: 150px;}
  .liInnerBox_text .titlebox{font-size: 15px; line-height: 19px;}
}
/* -------------------------------------------------------------------------- */
/* K-디지털 기초역량훈련이란? *//* 현재는 사용 안 하는 코드 */
/* .kdtJoinBox{ display: none;}

@media all and (min-width:768px) {
  .kdtJoinBox{display: none;}
  .kdtJoinBox{
    display: block;  position:absolute; top:-54px; left:19px; z-index:10;
    padding: 7px 20px 7px 27px;
    border: 2px solid #6198db; box-shadow: 4px 4px 2px 1px #8b8b8b38;
    border-radius: 26px; background-color: white;
  }
  .kdtJoinBox a{ font-size:14px; font-weight:700; letter-spacing:0.8px; cursor: pointer; }
  .kdtJoinBox a:hover{ color:#0471cd;}
  .kdtJoinBox .quesImg{
    width: 45px; height: 45px;
    position: absolute; top: -17px; left: -21px;
    transform: rotate(326deg);
  }
  .kdtJoinBox .quesImg img{ width: 100%; object-fit: cover;}
  .kdtJoinBox .quesImg:before{
    content: '';
    position: absolute; z-index: -1;
    width: 46px; height: 43px;
    border-radius: 53%; background-color: white;
  }
}

@media all and (min-width:1040px) {
  .kdtJoinBox {top: -60px; left: 29px; padding:10px 20px 10px 27px; }
  .kdtJoinBox a{font-size:16px;}
}

@media all and (min-width:1080px) {.kdtJoinBox { top: -60px; left: 20px; }}

@media all and (min-width:1700px) {
  .kdtJoinBox {top: 10px; left: -276px; padding: 10px 24px 9px 32px;}
  .kdtJoinBox .quesImg { width: 50px; height: 50px; }
  .kdtJoinBox .quesImg:before{ width: 53px; height: 44px;}
}

@media all and (min-width:1800px) {
  .kdtJoinBox { top:10px; left:-334px; padding: 14px 25px 14px 45px; }
  .kdtJoinBox a{ font-size:18px;}
  .kdtJoinBox .quesImg{ width: 60px; height: 60px;}
  .kdtJoinBox .quesImg:before{ width: 63px; height: 50px; }
} */