.filter-outer {
padding: 3.2rem 0;
}
.search-box{
position: relative;
max-width: 75.9rem;
margin-bottom: 1.6rem;
}
.search-box .form-control{
padding-right: 4.8rem;
}
.search-box .btn-search a.material-symbols-outlined{
text-decoration: none;
}
.btn-search{
position: absolute;
right: 0;
height: 4rem;
width: 4rem;
top: 0.4rem;
right: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--white-color);
outline: none !important;
padding: 0;
border: 0;
}
.filter-list-outer{
display: flex;
flex-wrap: wrap;
}
.filter-list{
width: calc(100% - 22.1rem);
display: flex;
flex-wrap: wrap;
}
.filter-item{
width: 33.33%;
padding-right: 1.6rem;
}
.filter-btn{
width: 22.1rem;
}
.filter-btn .btn {
width: 100%;
padding: 0 2.2rem;
}
.filter-select {
position: relative;
width: 100%;
background: var(--white-color);
color: var(--primary-color);
}
.filter-select .filter-selectBtn {
background: var(--white-color);
font-size: 1.6rem;
padding: 1.2rem 4.8rem 1.2rem 1.6rem;
line-height: 2.4rem;
border: 1px solid #e3ecf8;
border-radius: 0.4rem;
box-sizing: border-box;
width: 100%;
cursor: pointer;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.filter-select .filter-selectBtn:after {
position: absolute;
font-family: 'Material Symbols Outlined';
content: "\e5cf";
height: 4rem;
width: 4rem;
top: 0.4rem;
right: 0.8rem;
font-size: 2.4rem;
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s ease;
}
.filter-select .filter-selectBtn.toggle {
border-radius: 0.4rem 0.4rem 0 0;
}
.filter-select .filter-selectBtn.toggle:after {
transform: rotate(-180deg);
}
.filter-select .filter-selectDropdown {
position: absolute;
top: 100%;
width: 100%;
border-radius: 0 0 0.4rem 0.4rem;
max-height: 25rem;
overflow: hidden;
overflow-y: auto;
background: var(--white-color);
border: 1px solid #e3ecf8;
border-top: 0;
z-index: 1;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
transform-origin: top center;
visibility: hidden;
transition: 0.2s ease;
}
.filter-select .filter-selectDropdown .filterOption {
padding: 1rem 1.6rem;
box-sizing: border-box;
cursor: pointer;
line-height: 2.4rem;
font-size: 1.6rem;
}
.filter-select .filter-selectDropdown .filterOption:hover {
background: #f8f8f8;
}
.filter-select .filter-selectDropdown.toggle {
visibility: visible;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
@media(min-width:1200px) and (max-width:1259.98px){
.search-box {
max-width: 70.8rem;
}
}
@media(min-width:992px) and (max-width:1199.98px){
.search-box {
max-width: 62.5rem;
}
.filter-list {
width: calc(100% - 20rem);
}
.filter-item {
padding-right: 0.8rem;
}
.filter-btn {
width: 20rem;
}
.search-box .form-control {
font-size: 1.6rem;
line-height: 2.6rem;
}
}
@media(min-width:768px) and (max-width:991.98px){
.filter-outer{
padding-bottom: 0;
}
.search-box {
margin-bottom: 2.4rem;
}
.filter-list {
width: 100%;
}
.filter-item {
width: 100%;
padding-right: 0;
margin-bottom: 2.4rem;
}
.filter-btn {
width: 100%;
}
}
@media(max-width:767.98px){
.filter-outer{
padding-bottom: 0;
}
.search-box {
margin-bottom: 2.4rem;
}
.filter-list {
width: 100%;
}
.filter-item {
width: 100%;
padding-right: 0;
margin-bottom: 2.4rem;
}
.filter-btn {
width: 100%;
}
}