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

/* 현재 1:1상담에 검색박스 있음 */
.comWrap-sub:has(.search_box) .sub_banner{margin-bottom: 30px;}
.search_box{
  margin: 0 auto; margin-bottom: 15px;
  display: flex; align-items: end; justify-content: center;
}
.listSearGroup, .listSearGroup--fAbox{
  display:flex; align-items:center;
  width:fit-content;
  box-sizing:border-box;
  background-color: #fff; border-radius: 4px;
  box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 11%);
  border: 1px solid #45a5f7;
}

/* 푸터에 사용된 a태그 박스 */
.listSearGroup--fAbox {
  font-size: 13px; font-weight:500; letter-spacing: 0.5px;
  padding: 2px 6px; color: #333;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
  height: 26px; line-height: 26px;
  width: 134px;
  border-radius: 3px;
}
.listSearGroup--fAbox .fAbox_txt{padding-top: 2px; }

.listSearGroup--fAbox .selBtn_arrow{
  padding-right: 0;
  transform: rotate(90deg);
  padding-left: 0 !important;
}
/* --- */

.listSearGroup.active{border-radius: 4px 4px 4px 0px;}
.listSelBox{
  position:relative;
  height: 30px; line-height: 30px;
  box-shadow: inset -1px 0px 0px 0px #badfff;
  min-width: 55px;
  width: auto;
}
.listSel{
  box-sizing: border-box; outline: none;
  letter-spacing: 0.5px !important; font-family: inherit;
  width:100%;
  height:100%;
  position:absolute; top:0; left:0;
}
.listSel * { box-sizing: border-box; }

span.selArrow {position: relative; width: 20px; height: 7px;}
.selArrow img{
  width: 100%;
  position: absolute; top: 50%; right: 0px;
  transform: translateY(-50%);
}
.listSel .selBtn {
  width: 100%;
  height:30px;
  font-size: 13px; font-weight: 400; 
  letter-spacing: 0.5px;
  white-space: nowrap; color: #989898; 
  background: transparent;
  padding:0px; padding:0px; padding-top:0; 
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.listSel .selBtn.on{color:black; letter-spacing: 0.5px;}
.listSel .selBtn span{padding-left:8px; padding-top: 1px;} 

.selBtn_arrow{
  transform:rotate(180deg);
  color:#65abe6;
  padding-left: 5px !important;
  padding-top: 0px !important;
  font-size: 8px;
}
.listSearGroup.active .selBtn_arrow{
  transform:rotate(0deg);
  padding-left: 0px !important;
  padding-right: 5px;
}
.listSel .sel_optionUl {
  position: absolute; top: 30px; left: 0; z-index:100;
  width: 100%;
  max-height: 0px;
  left: -0.8px;
  background:#fff; 
  padding:0; margin:0;
  overflow: hidden; list-style-type: none;
  border-radius: 1px 1px 4px 4px; box-sizing:border-box;  
}

/* firefox 브라우저 css 별도 적용 */
@-moz-document url-prefix() { 
	.listSel .sel_optionUl{width: calc(100% + 1px); left: -1px;}
}

/* Safari 브라우저 css 별도 적용 (Safari 에만 적용) */
@supports (-webkit-touch-callout: none) {
  /* Safari 전용 스타일 */
  .listSel .sel_optionUl{width: calc(100% + 1px) !important; left: -1px !important;}
}


.listSearGroup.active .sel_optionUl {
  max-height: 500px;  
  width: -webkit-fill-available;
  z-index: 100;
  box-shadow: 0.5px 2px 2px 0px rgb(0 0 0 / 15%), -0.5px 2px 2px 0px rgb(0 0 0 / 15%);
  border-right: 1px solid #45a5f7;
  border-left: 1px solid #45a5f7;
  border-bottom: 1px solid #45a5f7;
  border-top: 1px solid #badfff;
  background-color: #ffffff;
}

.listSel .sel_optionLi {
  font-size: 13px; font-weight:500; letter-spacing: 0.5px;
  padding: 0px 8px; color: #333;
  height: 35px;
  display: flex; align-items: center;
  cursor: pointer;
}
.sel_optionLi:first-child{padding-top:1px;}
.sel_optionLi:last-child{padding-bottom:1px;}
.listSel .sel_optionLi:hover {background: #f3f4f6;}

.listsearBox{
  height:30px; line-height:30px;
  display: flex; align-items: center;
}
.search_box form{float:unset !important;}
.selsearchInput{
  padding: unset !important;
  margin-right: unset !important;
  display: unset !important;
  float: unset !important;
}
.selsearchInput{
  width: 100% !important;
  height:100% !important;
  padding-left:8px !important; padding-right: 8px !important;
  background-color: inherit;
  font-size:14px !important; color:#000;
}

.listsearBox input::placeholder{font-size: 13px; color:#b8b8b8; font-weight: 400;}
.selsearchBtn{
  width:30px; height:30px; line-height: 12px;
  border-radius: 0 2px 2px 0; padding: 9px;
  background:#1e8ae5;
}
.selsearchBtn_icon{fill: #fff;}

/* 셀렉트 박스만 사용할 때(푸터에 사용됨) */
.search_box--fS {display: flex; justify-content: space-evenly; width:100%;}
.search_box--fS .listSearGroup{border-radius: 3px;}
.search_box--fS .listSearGroup.active{border-radius: 3px 3px 0 0;}
.search_box--fS .listSelBox{
  box-shadow: unset; width: 122px; min-width: 122px !important;
  height: 20px ; line-height: 20px;
}
.search_box--fS .listSel .sel_optionUl{top: 20px; left: -1px;}
.search_box--fS .listSearGroup.active .sel_optionUl{width: 124px !important;}
.search_box--fS .listSel .sel_optionLi{height: 24px; letter-spacing: -0.8px; padding: 0 6px;}
.search_box--fS .listSel .selBtn{gap:6px; height: 20px;} 
.search_box--fS .listSel .selBtn.on{letter-spacing: -0.8px;}
.search_box--fS .listSel .selBtn span{ padding-left: 6px !important; padding-top:1px;}
.search_box--fS .listSel .selBtn .selBtn_arrow{ padding-left: 6px !important;
}.search_box--fS .listSearGroup.active .selBtn_arrow{padding-left: 0 !important; padding-right: 6px;}
/* a 태그 박스는 상단에 작성됨 */




@media all and (min-width:540px){
  .comWrap-sub:has(.search_box) .sub_banner{margin-bottom: 40px;}
  .search_box{margin-bottom: 20px;}
  .selsearchInput{width: 300px !important;}
  .listSelBox {min-width: 65px;}
}
@media all and (min-width:768px){
  .listSearGroup{padding: 4px 0;}
  .selsearchInput{width: 340px !important;}
  .selsearchBtn{width:40px; height:40px; padding: 11px;}
  .listsearBox input::placeholder{font-size: 14px;}
  .listSelBox {min-width: 75px;}
  .listSel .selBtn{font-size: 14px;}
  .listSel .selBtn span{padding-left: 10px;}
  .selBtn_arrow{font-size: 10px; padding-left: 6px;}
  .listSearGroup.active .selBtn_arrow{padding-right: 6px;}
  .listSel .sel_optionUl{top: 34px; left:-1px;}
  .listSel .sel_optionLi{font-size: 14px; padding: 0 10px;}

  /* 푸터에 사용된 셀렉트 */
  .search_box--fS{flex-direction: column; gap: 3px; width: fit-content; margin: 0;}
  .search_box--fS .listSearGroup{padding: 2px 0;}
  .search_box--fS .listSelBox{width:132px; min-width:132px;}
  .search_box--fS .listSearGroup.active .sel_optionUl{width: 134px !important;}
  .search_box--fS .listSel .sel_optionUl{top: 22px;}
  .search_box--fS .listSel .selBtn span{padding-top:1px;}
  .listSearGroup--fAbox{padding: 4px 6px ; font-size:14px;}
  .listSearGroup--fAbox .fAbox_txt{padding-top: 1px; }
}

@media all and (min-width:1080px){
  .comWrap-sub:has(.search_box) .sub_banner{margin-bottom: 50px;}
  .search_box{justify-content: end;}
}