.tab-slider-list{
position: relative;
padding-right: 4.6rem;
}
.tab-slider-list ul{
margin-top: 0;
}
.tab-slider-list li{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 2.4rem 0 2.4rem 1.9rem;
border-left: 0.3rem solid transparent;
cursor: pointer;
min-height: 8.8rem;
margin-bottom: 0.2rem;
}
.tab-slider-list li:last-child{
margin-bottom: 0;
}
.tab-slider-list li.active{
background: var(--white-color);
border-left-color: var(--primary-color-100);
}
.tab-slider-list li.active .h4{
width: calc(100% - 4rem);
padding-right: 0.8rem;
}
.tab-slider-list li span{
height: 4rem;
width: 4rem;
display: none;
align-items: center;
justify-content: center;
}
.tab-slider-list li.active span{
display: flex;
}
.tab-slider-outer .tns-outer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.tab-slider-img{
position: relative;
padding-bottom: 0.8rem;
}
.tab-slider-img:after{
position: absolute;
content: '';
height: 0.8rem;
right: 0;
left: 0;
bottom: 0;
background: -webkit-linear-gradient(to right, #1473E6 20%,#00A3E0 20%, #00A3E0 40%, #FED300 40%, #FED300 60%, #FF6720 60%, #FF6720 80%, #D6001C 80%);
background: -ms-linear-gradient(to right, #1473E6 20%,#00A3E0 20%, #00A3E0 40%, #FED300 40%, #FED300 60%, #FF6720 60%, #FF6720 80%, #D6001C 80%);
background: linear-gradient(to right, #1473E6 20%,#00A3E0 20%, #00A3E0 40%, #FED300 40%, #FED300 60%, #FF6720 60%, #FF6720 80%, #D6001C 80%);
}
.tab-slider-img img{
height: 30.7rem;
object-fit: cover;
}
.tab-slider-info p{
margin: 0;
}
.tab-slider-info .btn {
padding-left: 0 !important;
height: 3.2rem !important;
font-size: 1.2rem !important;
line-height: 1.8rem !important;
margin-top: 0.8rem !important;
}
.tab-slider-outer .tns-nav {
margin-top: 2.4rem;
display: inline-flex;
align-items: center;
}
.tab-slider-outer .tns-nav button {
height: 0.53rem;
width: 0.53rem;
margin: 0.4rem;
border-radius: 50%;
border: 0 !important;
padding: 0 !important;
outline: none !important;
background: var(--primary-color-300) !important;
cursor: pointer;
}
.tab-slider-outer .tns-nav button.tns-nav-active {
background: var(--primary-color) !important;
border-radius: 10rem;
width: 2.856rem;
}
.tab-slider-outer .tns-ovh + button {
order: 1;
margin-top: 2.4rem;
margin-left: 2.8rem;
background: transparent;
padding: 0;
border: 0;
outline: none !important;
color: var(--primary-color);
width: 1.45rem;
user-select: none;
height: 24px;
}
@media(min-width:1200px) and (max-width:1259px){
.tab-slider-list {
padding-right: 2.4rem;
}
.tab-slider-list li {
padding: 2rem 0 2rem 1.9rem;
}
.tab-slider-img img {
height: 29.1rem;
}
}
@media(min-width:992px) and (max-width:1199px){
.tab-slider-list {
padding-right: 0;
}
.tab-slider-list li {
padding: 2.2rem 0 2.2rem 1.9rem;
}
.tab-slider-img img {
height: 25.6rem;
}
}
@media(min-width:768px) and (max-width:991px){
.tab-slider-list {
padding-right: 0;
}
.tab-slider-list li {
padding: 1rem 1rem 1rem 1.9rem;
min-height: 9rem;
}
.tab-slider-list li .h4 * {
font-size: 1.8rem !important;
line-height: 2.3rem !important;
}
.tab-slider-img img {
height: 21rem;
}
.tab-slider-img {
padding-bottom: 0.54rem;
}
.tab-slider-img:after {
height: 0.54rem;
}
.tab-slider-img img {
height: auto;
}
.tab-slider-info p{
font-size: 1.4rem;
line-height: 2.3rem;
}
}
@media(max-width:767px){
.tab-slider-list {
padding-right: 0;
}
.tab-slider-list li {
padding: 1rem 1rem 1rem 1.9rem;
min-height: 9.4rem;
margin-bottom: 2.4rem;
display: none;
}
.tab-slider-list li.active{
display: flex;
}
.tab-slider-list li.active span {
display: none;
}
.tab-slider-list li.active .h4 {
width: 100%;
padding-right: 0;
}
.tab-slider-list li .h4 * {
font-size: 1.8rem !important;
line-height: 2.3rem !important;
}
.tab-slider-img {
padding-bottom: 0.54rem;
}
.tab-slider-img:after {
height: 0.54rem;
}
.tab-slider-img img {
height: auto;
}
.tab-slider-info p{
font-size: 1.4rem;
line-height: 2.3rem;
}
.tab-slider-list li:last-child{
margin-bottom: 2.4rem;
}
}