/* input, select, button, a {
  touch-action: manipulation;
} */
 body{position:relative;}

.allSrch_sec.sec--comPd{padding: 78px 0 40px; position: relative; letter-spacing: -0.5px;}
.allSrch_sec .secComTxt__sub{color: var(--clr_blue);}

/* ---------검색 리스트--------- */
/* 필터버튼 */
.subComWrap:has(.allCrsLst__srch){position: unset;}
.allSrchBtn{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; line-height: 14px; color: var(--clr_black_mn);
  border: var(--mix_brdr_btrDkr); border-radius: 20px;
  width: 59px; height: 20px;
}
.allSrchCrsLstWrap{position: unset;}
.allSrchLstGrpBox {
  display: none;
  background-color: rgb(0 0 0 / 50%);
  width: 100vw; height: 100%;
  position: fixed; top: 0; left: 0; z-index: 300;
}
.allSrchLstGrpBox.srchLstOn{display: block;}

#draggable{
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 87%;
  background: #fff;
  border-radius: 12px 12px 0 0;
  cursor: grab;
  transition: transform 0.2s ease-out;
}
#draggable.dismiss{transform: translateY(100%);}
#draggable:active{cursor: grabbing;}
#draggable::after{
  content: '';
  width: 60px; height: 5px;
  background-color: var(--clr_black_ex); border-radius: 10px;
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  z-index: 2;
}
#draggable::before {
  content: '';
  width: 100%; height: 30px;
  position: absolute; top: 0; left: 0;
  background-image: linear-gradient(180deg, #ffffff 60%, transparent);
  z-index: 1;
}
.draggable--ovScrl{
  height: 100%;
  height: calc(100% - 68px);
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge */
  padding-bottom: 30px;
}
.draggable--ovScrl::-webkit-scrollbar{
  width: 0; height: 0; display: none; /* Chrome, Safari */
}
.allSrchLstGrp{
  width: 91.5%; margin: 0 auto; margin-bottom: 24px;
  display: flex; flex-direction: column; align-items: flex-start;
  row-gap: 24px;
}
/* .allSrchLstGrp:last-child{margin-bottom:150px;} */
.allSrchLstGrpBox__tit{
  font-size: 17px; font-weight: 700; line-height: 20px; color: var(--clr_black_mn);
  padding-bottom: 12px; padding-left: 4.25%; border-bottom: var(--mix_brdr_btrDkr);
  box-sizing: border-box; margin-bottom: 20px; margin-top: 55px;
}
.allSrchLstCont{width: 100%;}
.allSrchLstCont__tit{
  font-size: 14px; font-weight: 700; line-height: 16px; color: var(--clr_black_mn);  margin-bottom: 12px;
}
.allSrchLstCont__item{display: flex; flex-direction: column;}
.itemComTxt{
  font-size: 14px; font-weight: 400; line-height: 16px; color: var(--clr_black_ex);
}

/* input 유형 */
.allSrchLstCont__item--input:has(.educCost){
  display: flex; align-items: center; justify-content: center;
  flex-direction: row; gap: 11px;
}
.allSrchLstCont__item--input input{
  background-color: #fff; border:var(--mix_clr_dkr);
  border-radius: 9px; height: 36px; padding: 0 12px;
  display: flex; align-items: center;
  font-size: 14px; font-weight: 400; line-height: 16px; color: var(--clr_black_mn);
}
.allSrchLstCont__item--input .educCostWrap{position: relative; width: 100%;}
.allSrchLstCont__item--input .educCostWrap::after{
  content: '원';
  position: absolute; top: 50%; right:12px; transform: translateY(-50%);
  font-size: 12px; font-weight: 400; line-height: 14px; color: var(--clr_black_ex);
}
.allSrchLstCont__item--input .educCost{
  text-align: right; padding-right: 28px; width: 100%;
  border: var(--mix_brdr_btrDkr);
  font-size: 14px; font-weight: 400; line-height: 16px; color: var(--clr_black_mn);
}
.allSrchLstCont__item--input .educCostTxt{
  font-size: 17px; font-weight: 700; line-height: 20px; color: var(--clr_black_mn);
}

/* checkbox 유형 */
.allSrchLstCont__item--check label{
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px;
  cursor: pointer;
  padding-top: 6px; padding-bottom: 10px;
}
.allSrchLstCont__item--check label:first-child{
  padding-top: unset;
}
.allSrchLstCont__item--check label:last-child{
  padding-bottom: unset;
}
.allSrchLstCont__item--check input[type="checkbox"]{
  appearance: none;
  width: 16px; height: 16px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.allSrchLstCont__item--check input[type="checkbox"]:checked {
  background-color: var(--clr_blue);
  border: var(--brdr_blue);
  background-image: url('/assets/img/com/check.svg');
  background-position: center;
  background-repeat: no-repeat;
}
.allSrchLstCont__item--check input[type="checkbox"]:checked + .itemComTxt{color: var(--clr_blue); font-weight: 700;}

/* allSrchLstCont__item--checkGrp */
.allSrchLstCont__item--checkGrp:has(.itemComTxt--checkGrp) label{margin-top: 25px;}
.allSrchLstCont__item--checkGrp:has(.itemComTxt--checkGrp) label:first-child{ margin-top: unset;}
.itemComTxt--checkGrp{margin: 4px; margin-left: 18px; font-size: 13px; line-height: 19px; position: relative; padding-left: 10px;}
.itemComTxt--checkGrp::before{
  content: "-";
  position: absolute; left: 0; top: calc(50% - 1px); 
  transform: translateY(-50%);
  color: inherit;
}

/* a tag 유형 */
.allSrchLstCont__item--mov a{
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
}
.allSrchLstCont__item--mov a:hover .itemComTxt{color: var(--clr_black_mn); font-weight: 700;}
.allSrchLstCont__item--mov a:hover .movAngl img{
  filter: brightness(0) saturate(100%) invert(1%) sepia(20%) saturate(297%) hue-rotate(314deg) brightness(94%) contrast(84%);
}
.allSrchLstCont__item--mov .movAngl{
  width: 6px; height: 12px; display: flex;
}
.allSrchLstCont__item--mov .movAngl img{
  filter: brightness(0) saturate(100%) invert(60%) sepia(12%) saturate(26%) hue-rotate(10deg) brightness(88%) contrast(89%);
}

/* 모바일 -> 초기화, 결과보기 버튼 */
.allSrchLstGrpBox__btn{
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px 16px; box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.06); border-top:var(--mix_brdr_btrDkr);
  position: fixed; bottom: 0; left: 0; z-index: 1000;
  width: 100%; height: 68px;
}
.allSrchLstGrpBox__btn button{
  height: 44px; width: 50%; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 400; line-height: 20px;
  cursor: pointer;
}
.allSrchLstGrpBox__btn button:first-child{
  color: var(--clr_black_ex);
  background-color:#fff; border:var(--mix_brdr_btrDkr);
}
.allSrchLstGrpBox__btn button:last-child{
  color: #fff;
  background-color:var(--clr_blue);
}

/* ---------과정 리스트(검색)--------- */
.allCrsLstGrpBox{flex: 1;}
/* 셀렉트 */
.allCrsLst__slct{align-items: center; gap: 24px; display: none;}
.allCrsLst__slct:not(:has(.selBox--crsSrch2)){margin-bottom:unset;}
/* 검색 */
.allCrsLst__srch{
  width: 91.5%; height: 38px;
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
}
.allCrsLst__srchIpt{
  width: 100%; height: 100%;
  border: var(--brdr_blue); background-color:#fff; color: var(--clr_black_mn);
  padding: 0 45px 0 15px; box-sizing: border-box; border-radius: 9px;
}
.allCrsLst__srchIpt::placeholder{color: var(--clr_black_ex);}
.allCrsLst__srchBtn{
  fill: var(--clr_blue);
  width: 20px; height: 20px;
  position: absolute; top: 50%; right: 15px;
  transform: translateY(-50%);
}
.allCrsLst__srchBtn img{width: 100%; height: 100%; object-fit: cover; }

/* ---------과정 리스트(과정)--------- */
.allCrsLstGrp{display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 20px; margin-bottom: 40px;}
.allCrsLstGrp:has(.allCrsLstGrp--none){
  display: flex; align-items: center; justify-content: center;
}
.allCrsLstGrp--none{
  /* padding-top: 110px; padding-bottom: 54px; */
  height: 504px;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
}

.allCrsLstCont{
  width: auto; min-height: 296px; border-radius: 9px; overflow: hidden;
  background-color: var(--clr_smWhite); border: 1px solid var(--mix_brdr_btrDkr);
  display: flex; flex-direction: column;
}
.allCrsLstCont__thImg{aspect-ratio: 16 / 10; width: 100%; max-width: 846px; overflow: hidden;}
.allCrsLstCont__thImg img{width: 100%; height: 100%;}

.allCrsLstCont__dtl{padding: 6px 8px; flex: 1;}

.allCrsLstCont__dtlTit{
  font-size: 14px; font-weight: 700; line-height: 20px; color: var(--clr_black_mn);
  height: 38px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.allCrsLstCont__dtlTxt{display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;}
.allCrsLstCont__dtlTxt:last-child{margin-bottom: 0px !important;}

.dtlTxt__cate{
  font-size: 10px; font-weight: 400; line-height: 11px; color: var(--clr_black_ex);
}
.dtlTxt__cost{
  font-size: 16px; font-weight: 700; line-height: 19px; color: var(--clr_black_mn);font-variant-numeric: tabular-nums lining-nums;font-feature-settings: "tnum" 1, "lnum" 1;
}
.dtlTxt__cost span{font-size: 13px; line-height: 15px;}
.dtlTxt__cost--blue{color: var(--clr_blue);}
.dtlTxt__ifo{
  font-size: 10px; font-weight: 700; line-height: 19px; color: var(--clr_black_mn);
}
.allCrsLstCont__dtlTxt:has(.dtlTxt__stim){
  padding: 10px 8px 10px 8px;
  border-top: 1px solid var(--mix_clr_btr);
}
.dtlTxt__stim{
  font-size: 10px; font-weight: 400; color: var(--clr_black_ex);
  display: flex; align-items: center; gap: 4px;
}
.dtlTxt__stim__img{width: 10px; height: 10px; display: flex;}
.dtlTxt__stim__img img{width: 100%; height: 100%; object-fit: cover;}

.dtlTxt__rvw{
  display: flex; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 400; color: var(--clr_black_ex);
}
.dtlTxt__rvw__img{width: 9px; height: 8px; display: flex; margin-right: 0.7px;}
.dtlTxt__rvw--bold{font-weight: 700; color: var(--clr_black_mn);}

.dtlTxt__stim img,
.dtlTxt__rvw img{width: 100%; height: 100%; object-fit: cover;}


/* ---------- 스마트폰용 스타일 ---------- */
@media (max-width: 767px) {
  .allCrsLstGrp--none{height: 404px;}
  /* ---------검색 리스트--------- */
  .allCrsLst__srchIpt{font-size: 12px;}
  .allCrsLst__srchIpt::placeholder{font-size: 12px;}

  /* ---------과정 리스트(과정)--------- */
  /* .allCrsLstCont__thImg{max-height: 160px;} */
  /* .allCrsLstCont__thImg img{min-height: 100px;} */
  .dtlTxt__cost--txt{font-size: 14px;}
}

/* ----------- 태블릿용 스타일 ----------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .allSrch_sec.sec--comPd{padding: 108px 0 30px;}
  /* ---------검색 리스트--------- */
  .allCrsLst__srch{top: 40px;}
  .allCrsLst__srchIpt{font-size: 14px;}
  .allCrsLst__srchIpt::placeholder{font-size: 14px;}
  .allSrchBtn{font-size: 14px; width: 62px; height: 24px;}

  /* ---------과정 리스트(과정)--------- */
  .allCrsLstGrp{grid-template-columns: repeat(3, 1fr); column-gap: 12px;}
  .allCrsLstCont{border-radius: 15px;}
  /* .allCrsLstCont__thImg{height: 140px;} */
  .allCrsLstCont__dtl{padding: 8px;}
  .allCrsLstCont__dtlTit{font-size: 15px; height: 40px;}
  .allCrsLstCont__dtlTxt:has(.dtlTxt__stim){padding: 8px;}
  .dtlTxt__cate,.dtlTxt__stim{font-size: 12px;}
  .dtlTxt__cost{ font-size: 16px; line-height: 20px;}
  .dtlTxt__cost span{font-size: 12px;}
  .dtlTxt__cost--txt{font-size: 15px;}
  .dtlTxt__ifo{ font-size: 12px; line-height: 16px;}
  .dtlTxt__stim__img{width: 12px; height: 12px;}
  .dtlTxt__rvw__img{width: 10.65px; height: 11.97px;}
  .dtlTxt__rvw{font-size: 12px;}
}

@media (min-width: 960px) {
  .allCrsLstGrp{grid-template-columns: repeat(4, 1fr);}
}

/* ---------- 데스크탑용 스타일 ---------- */
@media (min-width: 1024px) {
  html{overflow: auto !important;}
  .allSrch_sec.sec--comPd{padding: 80px 0;}

  /* ---------검색 리스트--------- */
  .resetBtn{display: flex; align-items: center; gap: 3px;}
  .allSrchBtn{display: none;}
  .allSrchCrsLstWrap{position: relative; display: flex; align-items:flex-start; gap: 18px;}

  .allSrchLstGrpBox {
    display: block;
    background-color: unset;
    width: 220px; height: auto;
    position: unset; top: unset; left: unset; z-index: unset;
  }
  #draggable{
    position: unset; left: unset; bottom: unset;
    width: 100%; height: auto;
    background-color: unset;
    border-radius: unset; cursor: unset;
    transition: none;
  }
  #draggable::after,
  #draggable::before{content:none;}
  .draggable--ovScrl{overflow-y: unset;}
  .allSrchLstGrpBox__tit{display:none;}
  .allSrchLstGrp{
    width: 100%; row-gap: 30px;
    background-color: var(--clr_smWhite);
    border: var(--mix_clr_dkr); border-radius: 18px;
    margin-bottom: 16px; padding: 20px; box-sizing: border-box;
  }
  .allSrchLstGrp:last-child{margin-bottom: unset;}
  .allSrchLstCont:last-child{margin-bottom:unset;}
  .allSrchLstCont__tit{font-size: 16px; line-height: 21px; }
  .allSrchLstCont__item:not(:last-child){margin-bottom: 12px;}
  .itemComTxt{line-height: 19px;}

  /* input 유형 */
  .allSrchLstCont__item--input:has(.educCost){flex-direction: column; gap: unset;}
  .allSrchLstCont__item--input .educCost{font-size: 18px; line-height: 21px; padding-right: 32px;}
  .allSrchLstCont__item--input .educCostTxt{font-size: 18px; font-weight: 21px;}
  .allSrchLstCont__item--input .educCostWrap::after{font-size: 16px; line-height: 19px;}

  /* checkbox 유형 */
  .allSrchLstCont__item--check input[type="checkbox"]{margin-top: 2px;}

  /* 모바일 -> 초기화, 결과보기 버튼 */
  .allSrchLstGrpBox__btn{display: none;}

  /* ---------과정 리스트(검색)--------- */
  .allCrsLst__slct{display: flex; gap: 18px; margin-bottom: 20px;}
  .allCrsLst__srch{
    width: 100%; height: 46px; margin-bottom: 30px;
    position: relative; left:unset; top: 0; transform: unset;
  }
  .allCrsLst__srchIpt{padding: 0 55px 0 20px; font-size: 16px;}
  .allCrsLst__srchIpt::placeholder{font-size: 16px;}
  .allCrsLst__srchBtn{width: 24px; height: 24px; right: 20px;}

  /* ---------과정 리스트(과정)--------- */
  .allCrsLstGrp{grid-template-columns: repeat(3, 1fr); column-gap: 18px; row-gap: 25px; margin-bottom: 96px;}
  .allCrsLstCont{min-width: 220px; height: auto; border-radius: 18px;}
  /* .allCrsLstCont__thImg{height: 176px;} */

  .allCrsLstCont__dtl{padding: 8px 10px;}
  .allCrsLstCont__dtlTit{font-size: 16px; line-height: 22px; margin-bottom: 12px; height: 45px;}

  .allCrsLstCont__dtlTxt:has(.dtlTxt__stim){padding: 8px 10px;}
  .dtlTxt__cate{ font-size: 13px; line-height: 16px;}
  .dtlTxt__cost{ font-size: 20px; line-height: 26px;}
  .dtlTxt__cost span{font-size: 16px; line-height: 21px;}
  .dtlTxt__cost--txt{font-size: 18px;}
  .dtlTxt__ifo{ font-size: 15px; line-height: 26px;}

  .dtlTxt__stim{font-size: 13px; gap: 6px;}
  .dtlTxt__stim__img{width: 16px; height: 16px;}
  .dtlTxt__rvw{font-size: 15px;}
  .dtlTxt__rvw__img{width: 13px; height: auto; margin-right: 2px;}
}

/* @media (min-width: 1080px) {.allCrsLst__srchIpt::placeholder{text-indent: -10px;}} */

@media (min-width: 1200px) {
  /* ---------검색 리스트--------- */
  .allSrchCrsLstWrap{gap: 24px;}
  .allSrchLstGrpBox{width: 282px;}
  .allSrchLstGrp{margin-bottom: 20px;}
  .allSrchLstCont__tit{font-size: 18px;}
  .allSrchLstCont__item--check label{gap: 12px; padding-bottom: 10px;}
  .itemComTxt{font-size: 16px;}
  .allSrchLstCont__item--check input[type="checkbox"]{margin-top: 2px;}
  .itemComTxt--checkGrp{margin:5px; margin-left: 16px; font-size: 15px; padding-left: 12px;}

  /* ---------과정 리스트(검색)--------- */
  .allCrsLst__slct{gap: 24px;}

  /* ---------과정 리스트(과정)--------- */
  .allCrsLst__srch{margin-bottom: 40px;}
  .allCrsLstGrp{column-gap: 24px; row-gap: 40px;}
  .allCrsLstCont{width: 282px; min-height: 456px;}
  .allCrsLstCont__dtl{padding: 12px 14px;}
  .allCrsLstCont__dtlTit{font-size: 18px; line-height: 24px;}
  .allCrsLstCont__dtlTxt:has(.dtlTxt__stim){padding: 12px 14px;}
  .dtlTxt__cate{ font-size: 14px;}
  .dtlTxt__cost span{font-size: 18px;}
  .dtlTxt__cost--txt{font-size: 20px;}
  .dtlTxt__ifo{ font-size: 16px;}
  .dtlTxt__stim{font-size: 14px;}
  .dtlTxt__stim__img{width: 18px; height: 18px;}
  .dtlTxt__rvw{font-size: 16px;}
  .dtlTxt__rvw__img{width: 16px; height: 15px;}
}