.research-outer{
padding: 2.4rem 1.6rem;
}
.research-title {
font-size: 2.1rem;
line-height: 145%;
font-weight: bold;
}
.research-alphabest {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.research-link{
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.research-link a{
text-decoration: none;
text-transform: uppercase;
height: 4rem;
width: 4rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #E2E6EE;
border-radius: 1.6rem;
}
.research-link a:hover{
text-decoration: underline !important;
}
.research-link a:last-child{
margin-right: 0;
}
.research-link a.all {
width: auto;
}
.research-link .btn {
border: 0;
background: transparent;
padding: 0 1.2rem;
font-size: 1.2rem;
color: var(--primary-color);
height: 3.2rem;
align-self: center;
}
.research-link .btn:hover {
text-decoration: underline !important;
}
.clear-btn .btn span{
margin: 0 !important;
}
.research-item{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
padding: 2.4rem;
text-decoration: none !important;
margin-top: 0.1rem;
}
.research-item:first-child{
margin-top: 0;
}
.research-text{
width: calc(100% - 22.4rem); }
.research-item:hover .research-text .h5 *{
text-decoration: underline !important;
}
.research-price{
width: 22.4rem;
text-align: right;
}
.research-attr{
display: flex;
flex-wrap: wrap;
}
.research-attr span{
display: block;
margin-right: 2.4rem;
font-size: 1.2rem;
line-height: 1.8rem;
color: #96A3BA
}
.research-attr span:last-child{
margin-right: 0;
}
.research-list + .pagination-list li.active a, 
.research-list + .pagination-list li:hover:not(:first-child,:last-child) a {
background: var(--primary-color) !important;
color: var(--white-color) !important;
}
.filter-btn .btn {
width: 100%;
padding: 0 2.2rem;
}
a.research-item.font-primary,
.research-item.font-primary .research-attr span{
color: var(--primary-color);
}
a.research-item.font-primary-100,
.research-item.font-primary-100 .research-attr span{
color: var(--primary-color-100);
}
a.research-item.font-primary-200,
.research-item.font-primary-200 .research-attr span{
color: var(--primary-color-200);
}
a.research-item.font-primary-300,
.research-item.font-primary-300 .research-attr span{
color: var(--primary-color-300);
}
a.research-item.font-secondary,
.research-item.font-secondary .research-attr span{
color: var(--secondary-color);
}
a.research-item.font-secondary-100,
.research-item.font-secondary-100 .research-attr span{
color: var(--secondary-color-100);
}
a.research-item.font-secondary-200,
.research-item.font-secondary-200 .research-attr span{
color: var(--secondary-color-200);
}
a.research-item.font-secondary-300,
.research-item.font-secondary-300 .research-attr span{
color: var(--secondary-color-300);
}
@media(min-width:1200px) and (max-width:1259.98px){
.research-text {
width: calc(100% - 19rem) !important;
}
.research-price {
width: 19rem !important;
} 
}
@media(min-width:992px) and (max-width:1199.98px){
.research-item {
padding: 1.6rem;
}
.research-price {
width: 19rem !important;
}
.research-text {
width: calc(100% - 19rem) mp !important;
padding-right: 1.6rem;
}
.filter-btn {
width: 20rem;
}
}
@media(min-width:768px) and (max-width:991.98px){
.research-item {
padding: 1.6rem;
}
.research-text {
width: 100% !important;
padding-right: 0;
}
.research-attr span {
margin-bottom: 0.5rem;
}
.research-price {
width: 100% !important;
text-align: left;
margin-top: 0.8rem;
}
.research-item .h5 *{
font-size: 2rem !important;
line-height: 2.3rem !important;
}
.filter-btn {
width: 100%;
margin-top: 2.4rem;
}
.search-input-box .search-input{
width: 100%;
}
.research-btn,
.research-btn .btn {
width: 100%;
}
.research-link a {
height: 3.2rem;
width: 3.2rem;
font-size: 1.4rem;
}
}
@media(max-width:767.98px){
.research-link {
width: 100%;
padding-right: 0;
}
.research-link a {
padding: 0.7rem;
}
.clear-btn {
margin-top: 1.2rem;
margin-left: 0.7rem;
}
.research-item { flex-wrap: wrap; }
.research-item:first-child {
margin-top: 0;
}
.research-text {
width: 100% !important;
padding-right: 0;
}
.research-attr span {
margin-bottom: 0.5rem;
}
.research-price {
width: 100% !important;
text-align: left;
margin-top: 1.6rem;
}
.research-btn,
.research-btn .btn {
width: 100%;
}
.research-item .h5 *{
font-size: 1.8rem !important;
line-height: 2.3rem !important;
}
.research-head {
margin-bottom: 1.6rem !important;
}
.filter-btn {
width: 100%;
margin-top: 2.4rem;
}
.research-outer {
margin: 0 -1.6rem;
}
}
body.showoffcanvas {
overflow: hidden;
}
body.showoffcanvas::after {
position: fixed;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
background: #000;
opacity: 0.5;
}
.offcanvas {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 39.3rem;
background: var(--white-color);
z-index: 9999;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
body.showoffcanvas .offcanvas {
right: 0;
}
.offcanvas-head {
padding: 0.8rem 1.6rem;
}
.offcanvas-close {
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
margin: 0 0 0 auto;
color: var(--primary-color);
display: flex;
flex-direction: column;
}
.offcanvas-body {
flex-grow: 1;
overflow: hidden;
overflow-y: auto;
padding: 1.6rem;
}
.offcanvas-head + .offcanvas-body {
padding-top: 0;
} 
.offcanvas-title .h5{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.offcanvas-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.offcanvas-top,
.offcanvas-text,
.offcanvas-collspase-info p{
font-size: 1.4rem;
line-height: 2.6rem;
}
.offcanvas-top p,
.offcanvas-text p {
margin: 0;
color: #96A3BA;
}
.offcanvas-collspase-item {
margin-bottom: 2.4rem;
}
.offcanvas-collspase-item:last-child {
margin-bottom: 0;
}
.offcanvas-collspase-info {
margin-top: 2.4rem;
}
.offcanvas-collspase-head {
position: relative;
width: 100%;
text-align: left;
padding: 0;
margin: 0;
background: transparent;
border: 0;
display: flex;
align-items: center;
font-family: 'Gentium Plus';
color: var(--primary-color);
font-weight: bold;
font-size: 1.8rem;
line-height: 145%;
padding-right: 3.2rem;
}
.offcanvas-collspase-head::after {
position: absolute;
content: "";
right: 0;
width: 2.4rem;
height: 2.4rem;
font-family: 'Material Symbols Outlined';
content: "\e5cf";
font-size: 2.4rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
transition: 0.2s ease;
}
.offcanvas-collspase-item.expand .offcanvas-collspase-head::after {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.offcanvas-collspase-body {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.3s ease;
transition: max-height 0.3s ease;
}
.no-transition .offcanvas-collspase-body {
transition: none !important;
}
.offcanvas-collspase-btn {
margin-top: 2.4rem;
}
.offcanvas-collspase-btn:has(.phone_show_button) > .btn {
border: 0 !important;
}
.offcanvas-collspase-btn .btn .phone_show a,
.offcanvas-collspase-btn a.btn.phone_show_button.active {
background: var(--primary-color) !important;
color: var(--white-color) !important;
border: 2px solid var(--primary-color) !important;
border-radius: 10rem !important;
}
.offcanvas-collspase-btn .btn .phone_show a:hover,
.offcanvas-collspase-btn a.btn.phone_show_button.active:hover {
background: transparent !important;
color: var(--primary-color) !important;
}
.offcanvas-collspase-btn .btn .phone_show a::before {
filter: brightness(0) invert(1);
}
.offcanvas-collspase-btn .btn .phone_show a:hover::before {
filter: initial;
}