*{box-sizing: border-box;}
.srchBox--cplx,
.srchBox{
  display: flex; align-items: center;
  border: var(--brdr_blue); border-radius: 9px;
  width: 100%; max-width: 500px; height: 40px;
}
.srchBox{justify-content: space-between; margin-left: auto; margin-bottom: 30px;}


.srchBox--cplx input[type="text"], .srchBox--cplx input[type="search"],
.srchBox input[type="text"], .srchBox input[type="search"]{border: none;}

/* 내 강의실 별도 적용 */
.sec--classDetail .srchBox--cplx{margin-bottom: 30px;}
/* ------------- */


.srchBox--cplx .liSel{width: 80px;}

.srchBox--cplx .liSel__btn{
  color: var(--clr_black_ex);
  width: 100%; height: 100%; box-sizing: border-box;
  border: unset; background-color: unset;
  border-radius: 9px 0 0 9px;
  position: relative;
  gap: 10px; 
  padding: 0 15px;
  white-space: nowrap;
}
.srchBox--cplx .liSel__btn::after{
  content: '';
  width: 1px; height: 30px;
  background-color: var(--mix_clr_dkr); 
  position: absolute; top: 50%; right: 0; transform:translateY(-50%);
}
.srchBox--cplx .liSel__opt{top: 42px; width: calc(100% + 1px); margin-left: -1px; }
.srchBox--cplx .liSel__optWrap{padding: 3px 0;}
.srchBox--cplx .liSel__optLi{padding: 15px 0 ; justify-content: center; position: relative;}
.srchBox--cplx .liSel__optLi:first-child::after{content:none;}
.srchBox--cplx .liSel__optLi:after{
  content: ''; height: 1px;
  background-color: var(--mix_clr_btr);
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
}


.srchBox--cplx .liSel__btn--arrow img{filter: brightness(0) saturate(100%) invert(26%) sepia(18%) saturate(31%) hue-rotate(337deg) brightness(104%) contrast(78%);}

.srchBox--cplx .liSrch,
.srchBox{
  display: flex; align-items: center; justify-content: space-between;
  flex: 1;
   /* height:36px; line-height:36px; */
}
.srchBox--cplx .liSrch_ipt,
.srchBox .liSrch_ipt{
  /* flex: 1;  */
  width: 100%;
  color: var(--clr_black_mn); height: 36px; background-color: #fff;}
.srchBox--cplx .liSrch_ipt::placeholder,
.srchBox .liSrch_ipt::placeholder{color: var(--clr_black_ex);}

.srchBox--cplx .liSrch_btn,
.srchBox .liSrch_btn{
  width:auto; height:100%; 
  border-radius: 0 9px 9px 0; 
   box-sizing: border-box;
}
.srchBox--cplx .liSrch_btn--img,
.srchBox .liSrch_btn--img{width: 20px; height: 20px;}
.srchBox--cplx .liSrch_btn--img img,
.srchBox .liSrch_btn--img img{width: 100%; height: 100%; object-fit: cover;}


@media (max-width: 767px) {
  .srchBox{margin-bottom: 20px;}
  .srchBox--cplx,
  .srchBox{max-width: 400px; height: 38px;}
  .srchBox--cplx .liSel{width: 60px;}
  .srchBox--cplx .liSel__opt{top: 39px;}
  .srchBox--cplx .liSel__btn{padding: 0 10px;}
  .srchBox--cplx .liSel__btn--arrow{width: 10px;}
  .srchBox--cplx .liSel,
  .srchBox--cplx .liSel__btn,
  .srchBox--cplx .liSel__optLi{font-size: 12px;}
  .srchBox--cplx .liSel__btn::after{height: 26px;}
  .srchBox--cplx .liSel__optLi:after{width: calc(100% - 15px);}

  .srchBox--cplx .liSrch{height: 30px; line-height: 30px;}

  .srchBox--cplx .liSrch_ipt{padding-left: 10px; height: 28px;} 
  .srchBox .liSrch_ipt{padding-left: 5px; margin-left: 5px; height: 28px;}
  
  .srchBox--cplx .liSrch_ipt,
  .srchBox .liSrch_ipt,
  .srchBox--cplx .liSrch_ipt::placeholder,
  .srchBox .liSrch_ipt::placeholder{font-size: 12px;}

  .srchBox--cplx .liSrch_btn,
  .srchBox .liSrch_btn{padding: 0 10px 0 10px;}
}

@media (min-width: 768px) and (max-width: 1023px) {
  .srchBox--cplx .liSel,  
  .srchBox--cplx .liSel__btn,
  .srchBox--cplx .liSel__optLi{font-size: 14px;}
  .srchBox--cplx .liSel__optLi:after{width: calc(100% - 20px);}

  .srchBox--cplx .liSrch{height: 34px; line-height: 34px;}
  .srchBox--cplx .liSrch_btn,
  .srchBox .liSrch_btn{padding: 0 15px 0 10px;}
  
  .srchBox--cplx .liSrch_ipt{padding-left: 15px; height: 32px;} 
  .srchBox .liSrch_ipt{padding-left: 7.5px; margin-left: 7.5px; height: 32px;} 

  .srchBox--cplx .liSrch_ipt,
  .srchBox .liSrch_ipt,
  .srchBox--cplx .liSrch_ipt::placeholder,
  .srchBox .liSrch_ipt::placeholder{font-size: 14px;}
}


@media (min-width: 1024px) {
  .srchBox--cplx{height: 40px;}
  .srchBox--cplx .liSel__opt{top: 42px;}
  .srchBox--cplx .liSel{width: 90px;}
  .srchBox--cplx .liSel,
  .srchBox--cplx .liSel__btn,
  .srchBox--cplx .liSel__optLi{font-size: 16px;}
  .srchBox--cplx .liSel__optLi:after{width: calc(100% - 30px);}
  .srchBox--cplx .liSel__btn--arrow{width: 16px; height: 8px;}

  .srchBox--cplx .liSrch{height:38px; line-height:38px;}

  .srchBox--cplx .liSrch_ipt{padding-left:20px; height: 36px; }
  .srchBox .liSrch_ipt{padding-left:10px; margin-left: 10px; height: 36px; }

  .srchBox--cplx .liSrch_ipt,
  .srchBox .liSrch_ipt,
  .srchBox--cplx .liSrch_ipt::placeholder,
  .srchBox .liSrch_ipt::placeholder{font-size: 16px;}
  .srchBox--cplx .liSrch_btn,
  .srchBox .liSrch_btn{padding: 0 20px 0 15px;}
  .srchBox--cplx .liSrch_btn--img,
  .srchBox .liSrch_btn--img{width: 24px; height: 24px;}
}
/* @media (min-width: 1080px) {.srchBox--cplx .liSrch_ipt::placeholder,
.srchBox .liSrch_ipt::placeholder{text-indent: -10px;}} */