@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {padding: 0; margin: 0; list-style: none; text-decoration: none; font-family: 'Noto Sans KR', sans-serif;}

nav > .nav_wrap > .menubar > ul > li > .dropdown_menu > a:hover {background-color: #2297F4; color: #fff; border-top: 1px solid #fff; border-bottom: 1px solid #fff;}

/* --------------페이저-------------- */
.pager_box{ padding: 30px 0 80px;}
.pager_box ul li{width: 35px; height: 35px; line-height: 33.5px; border-radius: 0;}
.pager_box ul li a{display: block; color: #2297F4;}
.pager_box ul li.on{border-color: #F7F5F8;}
.pager_box ul li:hover{border-color: #F7F5F8; }

/* -------------검색 추가------------ */
.searchBox{
	display: flex;	justify-content: end;
	max-width: 1050px; width: 100%;	margin: 0 auto;	padding:0  20px;
}
.searchInputBox{position: relative; height: 38px; min-width: 243px; width: 100%; margin-bottom: 10px;}
.searchInput{height: 100%; width: 100%; border-radius: 50px; background-color: #F7F7F7;	border: none; padding:12px;}
.searchInput::placeholder{font-size: 14px; color:#BFBFBF; padding-left: 16px;}
.searchInput:focus{outline: none !important;}
.searchBtn{
	position: absolute; top: 50%; right: 14px;
	transform: translateY(-50%);
	display: flex; align-items: center;
	cursor: pointer;
}
.searchIcon{fill: black; width: 18px; }
/* ----------------------------------------------------------------------------- */

/* -----------page css 시작------------ */
.detail_listpage {width: 100%; margin: 20px 0;}
.listpage_wrap {width: 100%; max-width: 1050px; margin: 0 auto;}

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

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

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

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

/* 무료강의배너 */
.free_bannerBox{ background-image: url(/index/img/newmain/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:28px !important;}
.bannerBoxInner_h2--best{font-size: 22px !important; line-height:30px !important;}


/* 강의 리스트 title */
.listpage_wrap .courTitle {width: 100%; text-align: center; margin: 30px 0;}
.listpage_wrap .courTitle_h1 {font-size: 26px; font-weight: 500;}
.listpage_wrap .courTitle_p {font-size: 26px; font-weight: bold;}
/* ------------------------------------------------------------------------------ */

/* ---------------일반과정(IT 사이트만 적용되는)------------------*/
.courSec-gener--com {width: 100%; box-sizing: border-box;}


/* 카테고리 선택 아이콘 영역 */
.courSec-gener--com > .wrap > .iconbox {position: relative; width: 100%; border: 1px solid #BFBFBF; border-radius: 10px; box-sizing: border-box;}
.courSec-gener--com > .wrap > .iconbox > p {position: absolute; top: -14px; left: 10px; background-color: #fff; width: fit-content; height: 30px; padding: 0 15px; text-align: center; font-size: 16px;}
.courSec-gener--com > .wrap > .iconbox > p > span {font-weight: 500; font-size: 18px;}
.courSec-gener--com .icon_wrapper {
	display: grid;
	grid-template-columns:1fr 1fr;
	grid-template-rows: 110px 110px 110px 110px 110px 110px 110px;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.courSec-gener--com .icon_wrapper a{cursor: pointer;}
.courSec-gener--com .icon_wrapper a > span {color: #000; font-size: 15px; font-weight: 500; cursor: pointer;}
.courSec-gener--com .icon_wrapper > div > a > div {height: 40px;}

/* 서브페이지에만 해당 */
.courSec-gener--sub{padding: 15px 0 30px;}
.courSec-gener--sub > .wrap { width: 100%; max-width: 1050px; margin: 0 auto; padding: 20px; box-sizing: border-box;}
.courSec-gener--sub > .wrap > .iconbox {padding: 30px 10px 15px 10px;}
/* ------- */

/* 과정 리스트 영역 */
.courSec-gener--sub > .wrap .contents {width: 100%; margin: 50px auto 20px; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 50px; column-gap: 10px;}
.courSec-gener--sub .box {margin-right: unset;}
.courSec-gener--sub .box > .imgbox {width: 100%; height: 110px; position: relative; display: flex; align-items: center; overflow: hidden; }
.courSec-gener--sub .box > .imgbox a{width: 100%; height: fit-content;}
.courSec-gener--sub .box > .imgbox > img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 15px; object-fit: cover;}
.courSec-gener--sub .box > .textbox {width: 100%; height: auto; margin: 8px 0 0;}
.courSec-gener--sub .box > .textbox > .titlebox {width: 100%; height: 55px;}
.courSec-gener--sub .box > .textbox > .titlebox > a {
  display: inline-block; font-size: 14px; color: #333; word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.courSec-gener--sub .box > .textbox > .titlebox > a:hover {color: #2297F4;}

.courSec-gener--sub .box > .textbox > .pricebox {width: 100%; box-sizing: border-box; text-align: end;}
.courSec-gener--sub .box > .textbox > .pricebox > .price > span {color: #FF6913; font-size: 15px; font-weight: bold;}
.courSec-gener--sub .box > .textbox > .pricebox > .price > p {display: inline-block; margin-left: 10px; color: #101010; font-size: 16px; font-weight: bold;}
.courSec-gener--sub .box > .textbox > .pricebox > .price > p > span {font-size: 16px;}
.courSec-gener--sub .box > .textbox > .pricebox > .price > h5 {color: #A2A092; text-decoration-line: line-through;}

.courSec-gener--sub > .wrap > .abtn {width: 100%; padding: 20px; box-sizing: border-box; text-align: center;}
.courSec-gener--sub > .wrap > .abtn > a {font-size: 16px; color: #000; font-weight: bold; border: 1px solid #B9B9B9; padding: 10px 40px; }
.courSec-gener--sub > .wrap > .abtn > a:hover {border: none; background-color: #2297F4; color: #fff;}
.courSec-gener--sub .contentsBox_infoTxt{
  background-color: #fdfdfdd4;
  box-shadow: 0px 0px 2px 0px rgb(0 0 0 / 25%), 1px 1px 6px -1px rgb(0 0 0 / 20%);
  width: fit-content;
  text-align: center;
  border-radius: 7px;
  font-weight: 500;
  font-size: 15px;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 50px;
  padding: 25px 45px;
}
/* ------------------------------------------------------------------------------ */

/* ------------- k-디지털기초역량훈련(100%환급과정) & 무료강의------------- */
.kdtJoinBox{ display: none;}  /* K-디지털 기초역량훈련이란? css */
.courSec-kdtFree{position:relative; margin-top: 60px;}
.courSec-kdtFree > .courselist {
  width: 100%; margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(1,1fr);
  grid-row-gap: 50px;
}
.courSec-kdtFree .courselist_li {width: auto; margin: 10px 0; display: flex; justify-content: space-between; align-items: center; overflow: hidden;}
.liInnerBox {max-width: 225px; margin: 0 auto;}
.liInnerBox_img {
  width: 100%; height: 144px;
  border-radius: 15px; overflow: hidden; position: relative;
}
.liInnerBox_img a {display: flex;justify-content: center; justify-items: center; height:100%; width: 100%;}

.liInnerBox_text {width: 100%; margin: 10px 0;}
.liInnerBox_text .titlebox {width: 100%; height: 50px;}
.liInnerBox_text .titlebox > a {display: inline-block; font-size: 15px; color: #333;  overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-break: keep-all; line-height: 20px;}
.liInnerBox_text .titlebox > a:hover {color: #2297F4;}

.liInnerBox_text .pricebox {width: 100%; box-sizing: border-box; margin-top:10px; text-align: right;}
.liInnerBox_text .price > span {color: #FF6913; font-weight: bold; font-size:15px;}
.liInnerBox_text .price > p {display: inline-block; margin-left: 10px; color: #101010; font-weight: bold; font-size:16px;}
.liInnerBox_text .price > p > span{color: #101010; font-size: 16px;}
.liInnerBox_text .price > h5 {color: #A2A092;text-decoration: line-through; }
/* -------------------------------------------------------------------------------------- */


@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;}
  /* -- */

  /* 일반과정 */
  .courSec-gener--sub > .wrap .contents { grid-template-columns: repeat(2, 1fr); row-gap: 60px; column-gap: 14px;}
  .courSec-gener--sub .box > .imgbox{height: 120px;}
  .courSec-gener--sub > .wrap > .iconbox{padding: 30px 10px 10px 10px;}
  .courSec-gener--com .icon_wrapper {
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows: 120px 120px 120px 120px 120px ;
  }

  /* k-디지털기초역량훈련(100%환급과정) & 무료강의 */
  .courSec-kdtFree > .courselist {grid-template-columns: repeat(2,1fr); }
}

@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;}
  /* --- */

  
  /* 일반과정 */
  .courSec-gener--sub > .wrap .contents{column-gap: 18px;}
  .courSec-gener--sub .box > .imgbox{height: 130px;}
  .courSec-gener--sub .box > .textbox > .pricebox > .price > span{font-size: 18px;}
  .courSec-gener--sub .box > .textbox > .pricebox > .price > p {font-size: 18px;}
  .courSec-gener--sub > .wrap > .iconbox{padding: 30px 10px 15px 10px;}
  .courSec-gener--com .icon_wrapper {
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-rows: 110px 110px 110px 110px;
  }

  /* k-디지털기초역량훈련(100%환급과정) & 무료강의 */
  .courSec-kdtFree > .courselist { width: 95%;  grid-template-columns: repeat(3,1fr);  grid-column-gap: 10px;  grid-row-gap: 10px; }
  .liInnerBox_img {height: 125px;}
}

@media all and (min-width:640px) {
  /* 검색 */
	.searchInputBox{width: auto;margin-bottom: 0;}

  /* 일반과정 */
  .courSec-gener--sub .slidebtn3{left: -2%;}
  .courSec-gener--sub .slidebtn4{right: -2%;}
  .courSec-gener--sub > .wrap .contents{grid-template-columns: repeat(3, 1fr); column-gap: 12px;}
  .courSec-gener--sub .box > .textbox > .titlebox{height: 60px;}
  /* --- */

  /* k-디지털기초역량훈련(100%환급과정) & 무료강의 */
  .courSec-kdtFree > .courselist {grid-column-gap: 15px;}
  .liInnerBox_img { height: 144px; }
}

@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;}
  /* --------------------------------------------------- */

  /* 일반과정 카테고리별 강의 아이콘 */
	.section4 > .wrap > .iconbox {position: relative; width: 100%; border: 1px solid #BFBFBF; border-radius: 10px; padding-top: 50px; padding-bottom: 30px; padding-right: 10px; padding-left: 10px; box-sizing: border-box;}
  .courSec-gener--sub > .wrap > .iconbox{padding: 30px 10px 25px 10px;}
	.courSec-gener--sub > .wrap > .iconbox > p {left: 6px; font-size: 18px;}
	.courSec-gener--com .icon_wrapper {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 100px 120px;
	}

  /* 과정 리스트 영역 */
  .courSec-gener--sub > .wrap .contents {width: 98%; grid-template-columns: repeat(4, 1fr); row-gap: 70px; column-gap: 12px;}
  .courSec-gener--sub .box > .imgbox {height: 150px; }
	.courSec-gener--sub .box > .textbox > .titlebox {height: 50px;}
  .courSec-gener--sub .box > .textbox > .pricebox { margin-top: 10px;}
  .courSec-gener--sub .box > .textbox > .pricebox > .price > span{font-size:18px;}
  .courSec-gener--sub .box > .textbox > .pricebox > .price > p{font-size: 18px;}
  /* ------------------------------------------------------- */

  /* k-디지털기초역량훈련(100%환급과정) & 무료강의 */
  .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: '';
    width: 46px;
    height: 43px;
    border-radius: 53%;
    background-color: white;
    position: absolute;
    z-index: -1;
  }
  .courSec-kdtFree > .courselist { grid-template-columns: repeat(4,1fr); grid-column-gap: 15px; }
  .liInnerBox_img {height: auto;}
}

@media all and (min-width:840px) {
  /* 일반과정 */
	.courSec-gener--sub > .wrap .contents {width: 95%; row-gap: 50px; column-gap: 15px;}
}

@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:1040px) {
  /* k-디지털기초역량훈련(100%환급과정) & 무료강의 */
  .listpage_wrap .courSec-kdtFree { margin-top: 90px;}
  .kdtJoinBox {top: -60px; left: 29px; padding:10px 20px 10px 27px; }
  .kdtJoinBox a{font-size:16px;}
}

@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%;}
  /* -- */

  
  /* 일반강의 */
  .courSec-gener--sub > .wrap > .abtn > a {padding: 20px 120px;}
  .courSec-gener--sub .slidebtn3{left: 0%;}
  .courSec-gener--sub .slidebtn4{right: 0%;}
  /* --- */

  /* k-디지털기초역량훈련(100%환급과정) & 무료강의 */
  .kdtJoinBox { top: -60px; left: 20px; }
  .courSec-kdtFree > .courselist { width: 100%; grid-column-gap: unset;}
  .courSec-kdtFree .courselist_li {cursor: pointer;}
  .liInnerBox_img {height: 145px;}
  .liInnerBox_text .titlebox > a{font-size: 16px; line-height: 22px;}
}

@media all and (min-width:1700px) {
  /* k-디지털기초역량훈련(100%환급과정) & 무료강의 */
  .kdtJoinBox {top: 10px; left: -276px; padding: 10px 24px 9px 32px;}
  .kdtJoinBox .quesImg { width: 50px; height: 50px; }
  .kdtJoinBox .quesImg:before{ width: 53px; height: 44px;}
  .courSec-kdtFree { margin-top: 45px;}
}

@media all and (min-width:1800px) {
  /* k-디지털기초역량훈련(100%환급과정) & 무료강의 */
  .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; }
}

.checkedSvgColor  {color:#000 !important;}
.categoryBox:hover span {color:#000 !important;}
.categoryBox:hover svg path {fill:#000;}