.tf-list-image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.tf-list-image .box-item {
position: relative;
-webkit-animation: slide-har 30s linear infinite;
animation: slide-har 30s linear infinite;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
}
.tf-list-image .box-item .item {
padding: 0 25px;
width: 250px;
}
.tf-list-image .box-item .item .image img {
width: 100%;
object-fit: cover;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.tf-list-image.hover-image .image img {
filter: grayscale(1);
}
.tf-list-image.hover-image .item:hover .image img {
filter: grayscale(0);
}
.tf-list-image.hover-stop:hover .box-item {
animation-play-state: paused;
}
.style-dark .tf-list-image .image {
border: 1px solid #FFFFFF1A;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.style-dark .tf-list-image .image:hover {
border-color: var(--theme-primary-rgba);
}
.style-dark .tf-list-image .image img {
max-width: 126px;
max-height: 82px;
}
.tf-list-image.swap-animation .box-item {
-webkit-animation: slide-har2 30s linear infinite;
animation: slide-har2 30s linear infinite;
}
.flash-content .image {
position: relative;
overflow: hidden;
}
.flash-content .image::after {
position: absolute;
top: 0;
left: -160%;
display: block;
content: "";
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
.flash-content:hover .image::after {
animation: shineFlash 2s alternate;
}
@keyframes shineFlash {
100% {
left: 125%;
}
}
.tf-list-image.style-text .box-item .item {
position: relative;
padding: 0px 45px;
width: max-content;
}
.tf-list-image.style-text .box-item .item::after {
content: '*';
font-size: 40px;
font-weight: 500;
color: #fff;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: block;
width: 10px;
height: 10px;
}
.tf-list-image.style-text  .item a {
font-size: 40px;
font-weight: 500;
line-height: 50px;
color: #fff;
position: relative;
}
.tf-list-image.style-text  .item a::after {
position: absolute;
content: "";
bottom: 0;
height: 1px;
width: 0;
left: auto;
right: 0;
-webkit-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
-o-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
background-color: currentColor;
}
.tf-list-image.style-text  .item a:hover::after {
width: 100%;
left: 0;
right: auto;
}
.tf-list-image.style-text {
background: var(--theme-primary-color);
transform: rotate(3.16deg);
padding: 16px 0;
} .tf-text-slider h1 {
font-size: 510px;
font-weight: 900;
background-repeat: repeat;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
-webkit-animation: BackgroundAnimatedVertical 100s linear infinite;
-moz-animation: BackgroundAnimatedVertical 100s linear infinite;
-ms-animation: BackgroundAnimatedVertical 100s linear infinite;
-o-animation: BackgroundAnimatedVertical 100s linear infinite;
animation: BackgroundAnimatedVertical 100s linear infinite;
}
@keyframes BackgroundAnimatedVertical {
0% {
background-position: 0% 50%;
}
100% {
background-position: -10000% 50%;
}
}
@keyframes slide-har {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
@keyframes slide-har2 {
0% {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@media only screen and (max-width: 1200px) {
.tf-text-slider h1 {
-webkit-animation: BackgroundAnimatedVertical 1000s linear infinite;
-moz-animation: BackgroundAnimatedVertical 1000s linear infinite;
-ms-animation: BackgroundAnimatedVertical 1000s linear infinite;
-o-animation: BackgroundAnimatedVertical 1000s linear infinite;
animation: BackgroundAnimatedVertical 1000s linear infinite;
}
}
@media only screen and (max-width: 991px) {
.tf-list-image.style-text .item a {
font-size: 25px;
line-height: 30px;
}
}
@media only screen and (max-width: 767px) {
.tf-list-image.style-text {
padding: 10px 0;
}
}