/*

어쩔 수 없이 중복되는 코드들이 있음..

*/

.selBox--com{width: fit-content;}
.selBox--com input[type="text"], .selBox--com input[type="search"]{border: none;}

.selBox--com .liSel{width:100%; height:100%; position: relative;}
.selBox--com .liSel *{box-sizing: border-box; }

.selBox--com .liSel__btn {
  white-space: nowrap; 
  color: var(--clr_black_mn); 
  background: var(--clr_smWhite); border: var(--mix_brdr_btrDkr);
  display: flex; align-items: center; justify-content: space-between; 
  outline: none; letter-spacing: -0.5px;
}

.selBox--com .liSel__btn--arrow{
  transform:rotate(180deg);
  display: flex; align-items: center; justify-content: center;
  margin-top: 3px;
}
.selBox--com.active .liSel__btn--arrow{transform:rotate(0deg);}

.selBox--com .liSel__btn--arrow img{width: 100%; height: 100%; object-fit: cover;}

.selBox--com .liSel__opt {
  position: absolute; left: 0; z-index: 100;
  max-height: 0px;
  background:#fff; border-radius: 9px;
  color: var(--clr_black_mn); list-style-type: none; 
  overflow: hidden;
}

.selBox--com.active .liSel__opt { max-height: fit-content;}

.selBox--com.active .liSel__opt {
  border: var(--mix_brdr_btrDkr);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.08);
}
.liSel__optLi {
  color: var(--clr_black_mn); white-space: nowrap;
  display: flex; align-items: center;
  cursor: pointer; letter-spacing: -0.5px;
}
@-moz-document url-prefix() {
  /* firefox 브라우져 css 별도 적용 */
  .selBox--com.active .liSel__optWrap{
    scrollbar-color: rgba(0, 0, 0, 0.5) transparent; /* 스크롤바 색상 (thumb, track) */
    scrollbar-width: thin; /* 스크롤바 너비 (auto, thin, none) */
  }
}
.selBox--com.active .liSel__optWrap::-webkit-scrollbar{width: 2px;}
.selBox--com.active .liSel__optWrap::-webkit-scrollbar-track {
  background: var(--mix_clr_dkr);
}
.selBox--com.active .liSel__optWrap::-webkit-scrollbar-thumb {
  background-color: var(--clr_black_ex);
}

/* ---------------푸터 적용--------------- */
.selBox--fs{min-width: 128px; height: fit-content;}
.selBox--fs .liSel__btn {
  width: fit-content;
  height:30px;
  font-size: 13px; font-weight: 400;
  gap: 10px;
  padding: 7px 15.7px;
  border-radius: 20px;
}
.selBox--fs .liSel__btn--arrow{width: 12px; height: 5px;}
.selBox--fs .liSel__opt {
  width: fit-content; top: 32px;
  box-shadow: 0px 2px 5px 0px rgb(0 0 0 / 8%);
}
.selBox--fs.active .liSel__opt{
  padding: 2px 15px;/* 그림자 때문에 보여질 때 padding이 있음 */}
.selBox--fs .liSel__optLi {
  font-size: 13px; font-weight:500; letter-spacing: -0.322px;
  border-bottom: var(--mix_brdr_btrDkr); height: 43px;
}
.selBox--fs .liSel__optLi:last-child{border-bottom: unset;}
/* ------------------------------------------------------------- */


/* ---------------과정 검색 적용--------------- */
/* crsSrch1 */
/* 데스크탑 css 설정해야함 */
.selBox--crsSrch1{width: 100%; height: fit-content; }
.selBox--crsSrch1 .liSel__btn{width: 100%; height: 38px; padding: 0 12px; border-radius: 9px;}
.selBox--crsSrch1 .liSel__btn p{
  font-size: 12px; font-weight: 700; line-height: 14px; color: var(--clr_black_mn);
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%;
  text-align: left;
}
.selBox--crsSrch1 .liSel__btn--big p{font-size: 14px; line-height: 16px;}
.selBox--crsSrch1 .liSel__btn--arrow{width: 17px; height: 8px;}
.selBox--crsSrch1 .liSel__opt{
  top: 40px; width: 100%; 
}
.selBox--crsSrch1.active .liSel__opt{padding: 8px 12px 8px 20px;}
.selBox--crsSrch1.active .liSel__optWrap{overflow-y: auto; max-height: 308px; overflow-x: hidden;}

.selBox--crsSrch1 .liSel__optLi{
  font-size: 14px; font-weight: 400; line-height: 16px; color: var(--clr_black_mn);
  padding: 10px 0; padding-right: 8px; box-sizing: border-box;
  text-align: left; width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.selBox--crsSrch1 .liSel__optLi.selected,
.selBox--crsSrch1.active .liSel__optLi:hover{color: var(--clr_blue);}

/* crsSrch2 */
.selBox--crsSrch2{width: calc(50% - 9px); max-width: 435px; height: fit-content; }
.selBox--crsSrch2 .liSel__btn{
  width: 100%; height: 56px; 
  padding: 0 20px; border-radius: 9px;
}
.selBox--crsSrch2 .liSel__btn p{
  font-weight: 700; line-height: 21px; color: var(--clr_black_mn); 
  text-align: left; width: calc(100% - 21px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selBox--crsSrch2 .liSel__btn p span{
  font-weight: 400; line-height: 16px; color: var(--clr_black_ex); margin-left: 12px;
}
.selBox--crsSrch2 .liSel__btn--arrow{width: 21px;}
.selBox--crsSrch2 .liSel__opt{top: 58px; width: 100%;}
.selBox--crsSrch2.active .liSel__opt{padding: 8px 12px 8px 20px;}
.selBox--crsSrch2.active .liSel__optWrap{overflow-y: auto; max-height: 308px; overflow-x: hidden;}

.selBox--crsSrch2 .liSel__optLi{
  font-size: 18px; font-weight: 400; line-height: 21px; color: var(--clr_black_mn);
  padding: 10px 0; padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.selBox--crsSrch2 .liSel__optLi.selected,
.selBox--crsSrch2.active .liSel__optLi:hover{color: var(--clr_blue);}
/* ------------------------------------------------------------- */

/* ---------------과정 상세 적용--------------- */
.selBox--crsDtlCom{
  width: 100%; height: fit-content;
}
.selBox--crsDtlCom .liSel__btn--flex{display: flex; align-items: flex-end; gap: 12px;}
.selBox--crsDtlCom .liSel__btn--flex {width: calc(100% - 27px);}
.selBox--crsDtlCom .liSel__btn--flex p{
  width: fit-content !important; max-width: calc(100% - 108px);
}
.selBox--crsDtlCom .liSel__btn{width: 100%; height: 38px; padding: 0 12px; border-radius: 9px;}
.selBox--crsDtlCom .liSel__btn p{
  font-size: clamp(14px, 1.3vw, 16px); font-weight: 700; line-height: clamp(16px, 1.5vw, 19px); color: var(--clr_black_mn);
  margin-top: 2px;
  width: calc(100% - 17px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.selBox--crsDtlCom .liSel__btn a{
  font-size: 14px; font-weight: 400; line-height: 16px; color: var(--clr_black_ex); text-decoration: underline; cursor: pointer;
}
.selBox--crsDtlCom .liSel__btn--arrow{width: 14px; height: auto;}
.selBox--crsDtlCom .liSel__opt{top: 40px; width: 100%;}
.selBox--crsDtlCom.active .liSel__opt{padding: 10px 12px 10px 20px;}
.selBox--crsDtlCom.active .liSel__optWrap{overflow-y: auto; max-height: 308px; overflow-x: hidden;}

.selBox--crsDtlCom .liSel__optLi{
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: clamp(16px, 1.5vw, 19px);
  font-weight: 400; color: var(--clr_black_mn);
  padding: 10px 0;
}

.selBox--crsDtlCom .liSel__optLi.selected,
.selBox--crsDtlCom.active .liSel__optLi:hover{color: var(--clr_blue);}
.selBox--crsDtlCom .liSel__optLi label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selBox--crsDtlCom .liSel__optLi input[type="radio"]{
  width: 16px; height: 16px;
  border-radius: 50px; border: 1px solid #d9d9d9;
  margin-right: 10px; margin-top: -3px; 
  appearance: none;
}
.selBox--crsDtlCom .liSel__optLi input[type="radio"]:checked{
  background-color: var(--clr_blue);
  box-shadow: inset 0 0 0px 2px #fff;
  border: 0.6px solid var(--clr_blue);
}
/* ------------------------------------------------------------- */

/* ---------------회원가입 적용--------------- */
.selBox--signUp{ width: 100%; height: fit-content;}
.selBox--signUp .liSel__btn{
  width: 100%; height: 38px; border-radius: 9px;
}
.selBox--signUp .liSel__btn p{
  font-size: 14px; font-weight: 700; line-height: 21px; color: var(--clr_black_mn); 
  text-align: left; width: 100%; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selBox--signUp .liSel__btn p span{
  font-weight: 400; line-height: 16px; color: var(--clr_black_ex); margin-left: 12px;
}

.selBox--signUp .liSel__opt{top: 40px; width: 100%;}
.selBox--signUp.active .liSel__opt{padding: 10px 12px 10px 20px;}
.selBox--signUp.active .liSel__optWrap{overflow-y: auto; max-height: 308px; overflow-x: hidden;}

.selBox--signUp .liSel__optLi{
  font-size: 14px; font-weight: 400; line-height: 16px; color: var(--clr_black_mn);
  padding: 10px 0; padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.selBox--signUp .liSel__optLi.selected,
.selBox--signUp.active .liSel__optLi:hover{color: var(--clr_blue);}
/* ------------------------------------------------------------- */

/* --------------- 마이페이지 --------------- */
/* 나의정보 */
.selBox--myInfo{ width: 100%; max-width: 300px; height: fit-content;}
.selBox--myInfo .liSel__btn{
  width: 100%; height: 38px; border-radius: 9px;
}
.selBox--myInfo .liSel__btn p{
  font-size: 14px; font-weight: 700; line-height: 21px; color: var(--clr_black_mn); 
  text-align: left; width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selBox--myInfo .liSel__btn p span{
  font-weight: 400; line-height: 16px; color: var(--clr_black_ex); margin-left: 12px;
}

.selBox--myInfo .liSel__opt{top: 40px; width: 100%;}
.selBox--myInfo.active .liSel__opt{padding: 8px 12px 8px 20px;}
.selBox--myInfo.active .liSel__optWrap{overflow-y: auto; max-height: 308px; overflow-x: hidden;}

.selBox--myInfo .liSel__optLi{
  font-size: 14px; font-weight: 400; line-height: 16px; color: var(--clr_black_mn);
  padding: 10px 0; padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.selBox--myInfo .liSel__optLi.selected,
.selBox--myInfo.active .liSel__optLi:hover{color: var(--clr_blue);}
/* ------------------------------------------------------------- */

/* --------------- 학습 Q&A --------------- */
.selBox--classOrd{ width: 100%; max-width: 120px; height: fit-content;}
.selBox--classOrd .liSel__btn{
  width: 100%; height: 38px; border-radius: 9px;
}
.selBox--classOrd .liSel__btn p{
  font-size: 14px; font-weight: 700; line-height: 21px; color: var(--clr_black_mn); 
  text-align: left; width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selBox--classOrd .liSel__btn p span{
  font-weight: 400; line-height: 16px; color: var(--clr_black_ex); margin-left: 12px;
}

.selBox--classOrd .liSel__opt{top: 40px; width: 100%;}
.selBox--classOrd.active .liSel__opt{padding: 8px 12px 8px 20px;}
.selBox--classOrd.active .liSel__optWrap{overflow-y: auto; max-height: 308px; overflow-x: hidden;}

.selBox--classOrd .liSel__optLi{
  font-size: 14px; font-weight: 400; line-height: 16px; color: var(--clr_black_mn);
  padding: 10px 0; padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.selBox--classOrd .liSel__optLi.selected,
.selBox--classOrd.active .liSel__optLi:hover{color: var(--clr_blue);}
/* ------------------------------------------------------------- */

/* --------------- 이용약관, 개인정보처리방침, 환불규정 --------------- */
.selBox--pol{}
.selBox--pol{width: 100%; max-width: 320px; height: fit-content;}
.selBox--pol .liSel__btn{
  background-color: var(--clr_smWhite);
  width: 100%; height: 36px; border-radius: 9px;
}
.selBox--pol .liSel__btn p{
  font-size: 13px; font-weight: 700; line-height: 15px; color: var(--clr_black_mn); 
  text-align: left; width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selBox--pol .liSel__opt{top: 38px; width: 100%;}
.selBox--pol.active .liSel__opt{padding: 8px 12px 8px 20px;}
.selBox--pol.active .liSel__optWrap{overflow-y: auto; max-height: 308px; overflow-x: hidden;}

.selBox--pol .liSel__optLi{
  font-size: 13px; font-weight: 400; line-height: 16px; color: var(--clr_black_mn);
  padding: 8px 0; padding-right: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.selBox--pol .liSel__optLi.selected,
.selBox--pol.active .liSel__optLi:hover{color: var(--clr_blue);}
/* ------------------------------------------------------------- */

/* ---------- 스마트폰용 스타일 ---------- */
@media (max-width: 768px) {
  /* 푸터 적용 */
	.selBox--fs .liSel__btn{
    font-size: 10px; line-height: 11px;
    padding: 7px 11px 6px 11px; height: 24px;
  }
  .selBox--fs .liSel__optLi{font-size: 10px; line-height: 11px; height: 32px;}
  .selBox--fs.active .liSel__opt {
    padding: 1px 11px;/* 그림자 때문에 보여질 때 padding이 있음 */
  }

  /* 회원가입 적용 */
  .selBox--signUp .liSel__btn{padding: 0 12px;}
  .selBox--signUp .liSel__btn--arrow{width: 12px;}

  /* 마이페이지 적용 */
  /* 나의정보 */
  .selBox--myInfo .liSel__btn{padding: 0 12px;}
  .selBox--myInfo .liSel__btn--arrow{width: 12px;}

  /* 학습 Q&A 적용 */
  .selBox--classOrd{max-width: 100px;}
  .selBox--classOrd .liSel__btn{padding: 0 12px;}
  .selBox--classOrd .liSel__btn--arrow{width: 12px;}

  /* 이용약관, 개인정보처리방침, 환불규정 */
  .selBox--pol{max-width: 265px;}
  .selBox--pol .liSel__btn{padding: 0 12px;}
  .selBox--pol .liSel__btn--arrow{width: 12px;} 


}


/* ----------- 태블릿용 스타일 ----------- */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 회원가입 적용 */
  .selBox--signUp .liSel__btn{padding: 0 15px;}
  .selBox--signUp .liSel__btn--arrow{width: 15px;}

  /* 마이페이지 적용 */
  /* 나의정보 */
  .selBox--myInfo .liSel__btn{padding: 0 15px;}
  .selBox--myInfo .liSel__btn--arrow{width: 15px;}

  /* 학습 Q&A 적용 */
  .selBox--classOrd .liSel__btn{padding: 0 15px;}
  .selBox--classOrd .liSel__btn--arrow{width: 15px;}

  /* 이용약관, 개인정보처리방침, 환불규정 */
  /* .selBox--pol{width: 124px;} */
  .selBox--pol .liSel__btn{padding: 0 15px;}
  .selBox--pol .liSel__btn--arrow{width: 15px;}
  .selBox--pol .liSel__btn p{font-size: 14px;}
  .selBox--pol .liSel__optLi{font-size: 14px;}
}


/* ---------- 데스크탑용 스타일 ---------- */
@media (min-width: 1024px) {
  /* 과정 검색 적용 */
  .selBox--crsSrch1 .liSel__btn{background-color: #fff;}
  .selBox--crsSrch1 .liSel__btn p{
    font-size: 14px; font-weight: 400; line-height: 16px; color: var(--clr_black_ex);
  }
  .selBox--crsSrch1 .liSel__btn--big p{font-size: 16px; font-weight: 700; line-height: 19px; color: var(--clr_black_mn);}
  .selBox--crsSrch1 .liSel__optLi{font-size: 16px; line-height: 19px;}
  
  .selBox--crsSrch2 .liSel__btn p{font-size: 16px; height: 40px; line-height: 41px;}
  .selBox--crsSrch2 .liSel__btn p span{font-size: 14px;}

  /* 과정 상세 적용 */
  .selBox--crsDtlCom .liSel__btn{height: 46px; padding: 0 20px;}
  .selBox--crsDtlCom .liSel__btn--arrow{width: 17px; height: auto;}
  .selBox--crsDtlCom .liSel__opt{top: 48px;}

  /* 회원가입 적용 */
  .selBox--signUp .liSel__btn{height: 46px; padding: 0 20px;}
  .selBox--signUp .liSel__btn p{font-size: 16px; height: 40px; line-height: 41px;}
  .selBox--signUp .liSel__btn--big p{font-size: 16px; font-weight: 700; line-height: 19px; color: var(--clr_black_mn);}
  .selBox--signUp .liSel__opt{top: 48px;}
  .selBox--signUp .liSel__optLi{font-size: 16px; line-height: 19px;}
  .selBox--signUp .liSel__btn--arrow{width: 19px;}

  /* 마이페이지 적용 */
  /* 나의정보 */
  .selBox--myInfo .liSel__btn{height: 40px; padding: 0 20px;}
  .selBox--myInfo .liSel__btn p{font-size: 16px; height: 40px; line-height: 41px;}
  .selBox--myInfo .liSel__btn--big p{font-size: 16px; font-weight: 700; line-height: 19px; color: var(--clr_black_mn);}
  .selBox--myInfo .liSel__opt{top: 42px;}
  .selBox--myInfo .liSel__optLi{font-size: 16px; line-height: 19px;}
  .selBox--myInfo .liSel__btn--arrow{width: 19px;}

  /* 학습 Q&A 적용 */
  .selBox--classOrd .liSel__btn{height: 40px; padding: 0 20px;}
  .selBox--classOrd .liSel__btn p{font-size: 16px; height: 40px; line-height: 41px;}
  .selBox--classOrd .liSel__btn--big p{font-size: 16px; font-weight: 700; line-height: 19px; color: var(--clr_black_mn);}
  .selBox--classOrd .liSel__opt{top: 42px;}
  .selBox--classOrd .liSel__optLi{font-size: 16px; line-height: 19px;}
  .selBox--classOrd .liSel__btn--arrow{width: 19px;}

  /* 이용약관, 개인정보처리방침, 환불규정 */
  /* .selBox--pol{width: 146px;} */
  .selBox--pol .liSel__btn{height: 43px; padding: 0 20px;}
  .selBox--pol .liSel__btn p{font-size: 16px; height: 40px; line-height: 41px;}
  .selBox--pol .liSel__btn--big p{font-size: 16px; font-weight: 700; line-height: 19px; color: var(--clr_black_mn);}
  .selBox--pol .liSel__opt{top: 45px;}
  .selBox--pol .liSel__optLi{font-size: 16px; line-height: 19px;}
  .selBox--pol .liSel__btn--arrow{width: 19px;}
}

@media (min-width: 1200px) {
  .selBox--crsSrch2 .liSel__btn p{font-size: 18px;}
}
@media (min-width: 1300px) {

}