@charset "utf-8"; body{background-color: #fff;} .section-title{width: 100%;margin-bottom: 20px;text-align: center} .section-title h4{font-size:36px;color:#0a0b0d;padding: 0;text-transform: uppercase;position: relative;font-weight:600;margin-bottom:20px;} .section-title p{font-size: 18px;color:#495057;text-transform: uppercase;font-weight:400} .section-title h4:after{content: '';width:50px;height:4px;background-color:var(--color-3);position: absolute;top:-20px;left:50%;margin-left: -25px;} @media (max-width: 1440px) { .section-title h4{font-size:32px;} .section-title p{font-size: 14px;} } @media (max-width: 992px) { .section-title{width: 100%;margin-bottom:15px;text-align: center} .section-title h4{font-size:2.2rem;margin-bottom:5px;} .section-title p{font-size: 1.4rem;} .section-title h4:after{width:30px;height:2px;top:-15px;margin-left: -15px;} } .banner{width: 100%;height:450px;margin-top:65px} .index-banner {width: 100%;height:100%;} .index-banner .item { width: 100%; height:450px; display: block; overflow: hidden; position: relative; text-align: center; background-size: cover; background-position: center; background-repeat: no-repeat; outline: none; background-color:#e0edfb; } .index-banner .item .text { align-items: center; text-align: left; position: absolute; z-index: 9; width:1280px; height: 100%;left:50%;top:0;margin-left: -640px; padding:75px 0; } .index-banner .item h4 { font-size: 40px; line-height:50px; color: #222; margin-bottom:20px; font-weight:550; -webkit-animation: fadeOutInUp 1s both; animation: fadeOutInUp 1s both; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04); } .index-banner .item p { display: block; width: 80%; color: #222; font-size:18px; font-weight: 400; line-height: 32px; margin-bottom:60px; -webkit-animation: fadeOutInUp 1s both; animation: fadeOutInUp 1s both; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04); } .index-banner .item a.left{margin:0 auto 0 0;} .index-banner .item a.center{margin:0 auto;} .index-banner .item a.right{margin:0 0 0 auto;} .index-banner .item a{border: 1px solid transparent;color:#fff;font-size:14px;margin-right:10px;text-align: center;font-weight:400;display: inline-block;text-transform: uppercase; line-height:35px;border-radius:4px;background-color:var(--color-2);padding: 0 15px;box-shadow: 0 16px 32px -12px #0055ff4d;} .index-banner .item a i{font-size:1.4rem;margin-left:5px;font-weight:400;} .index-banner .item a:last-child{ cursor: pointer; -webkit-transition: background-color .2s; -moz-transition: background-color .2s; transition: background-color .2s; color: var(--color-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid #fff; background-color: rgba(255,255,255,.6); -webkit-box-shadow: 0 16px 32px -12px rgb(190 196 207 / 28%); box-shadow: 0 16px 32px -12px rgb(190 196 207 / 28%); } .index-banner .item a:last-child i{font-size: 1.8rem;} @media (max-width: 1440px) { .index-banner .item .text {width:1200px;margin-left: -600px;} } @media (max-width: 1280px) { .index-banner .item .text {width:100%;margin-left: 0;padding:70px 60px;left: 0} } @media (max-width: 991px) { .banner{width: 100%;height:55vh;margin-top: 60px;} .index-banner .item {background-image: none!important;height:55vh;width: 100%;} .index-banner .item .text {padding:10% 20px 0 20px;text-align: center;} .index-banner .item h4 {font-size: 2rem!important;margin-bottom:15px!important;line-height:2.2rem;letter-spacing: 0!important;} .index-banner .item p {font-size: 1.4rem!important;margin-bottom:30px!important;line-height:2.2rem;letter-spacing: 0!important;width:100%;} .index-banner .item a{font-size:1.4rem;margin-right: 10px;width:120px;line-height:35px;} .index-banner .item a i{font-size:1.2rem;margin-left:2px;} .index-banner .item a.left{margin:0 auto;} .index-banner .item a.right{margin:0 auto;} .index-banner .item .mobile{display: block;width: 100%;-webkit-animation: fadeOutInUp 0.2s both;animation: fadeOutInUp 0.2s both;} .index-banner .item .mobile img{width: 100%} } .index-banner .item.slick-active h4 {-webkit-animation: fadeInDown 0.6s both 0.2s;animation: fadeInDown 0.6s both 0.2s;} .index-banner .item.slick-active p {-webkit-animation: fadeInUp 1s both 0.6s;animation: fadeInUp 1s both 0.6s;} .index-banner .item.slick-active a {-webkit-animation: fadeInUp 1.4s both 1s;animation: fadeInUp 1.4s both 1s;} .index-banner .item.slick-active {-webkit-animation: fadeIn 1s both;animation: fadeIn 1s both;} .slick-slider { float: left; position: relative; display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list {position: relative;display: block;overflow: hidden;margin: 0;padding: 0;} .slick-list:focus {outline: none;} .slick-list.dragging {cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} .slick-track {position: relative;top: 0;left: 0;display: block;} .slick-track:before,.slick-track:after {display: table;content: '';} .slick-track:after {clear: both;} .slick-loading .slick-track {visibility: hidden;} .slick-slide {display: none;float: left;height: 100%;min-height: 1px;} .slick-slide.dragging img {pointer-events: none;} .slick-initialized .slick-slide {display: block;} .slick-loading .slick-slide {visibility: hidden;} .slick-vertical .slick-slide {display: block;height: auto;border: 1px solid transparent;} .index-banner .NextArrow,.index-banner .PrevArrow{ position: absolute; width: 50px; height: 50px; line-height: 50px; border: none; background:rgba(0,0,0,0.15); text-align: center; z-index: 999; outline: none; bottom: 50%; opacity: 0; transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; } .index-banner .NextArrow i,.index-banner .PrevArrow i{font-size:2.8rem;color:#fff;} .index-banner .PrevArrow{left:0;} .index-banner .NextArrow{right:0;transform: rotate(-180deg)} .index-banner .NextArrow:hover,.index-banner .PrevArrow:hover{opacity: 1;} .index-banner .NextArrow:hover i,.index-banner .PrevArrow:hover i{color: #fff} .index-banner .slick-dots {position: absolute;height:10px;bottom:100px;width:1280px;padding: 0;list-style-type: none;left: 50%;margin-left: -640px;text-align: left} .index-banner .slick-dots li button {display: none;} .index-banner .slick-dots li {width:10px;height:10px;background-color:rgba(255,255,255,0.6);border-radius: 50%} .index-banner .slick-dots li:last-child{margin-right: 0;} .index-banner .slick-dots li.slick-active {background-color:var(--color-3);} @media (max-width: 1440px) { .index-banner .slick-dots {width:1200px;margin-left: -600px;} } @media (max-width: 1280px) { .index-banner .slick-dots {width:100%;margin-left:0;padding: 0 60px;left: 0} } @media (max-width: 991px) { .index-banner .NextArrow,.index-banner .PrevArrow{opacity:0;} .index-banner .slick-dots {width:100%;left:0;bottom:80px;margin-left: 0;padding: 0 0 0 20px;text-align: left} .index-banner .slick-dots li {width:8px;height:8px;} .index-banner .item.slick-active .mobile {-webkit-animation: fadeInUp 1s both;animation: fadeInUp 1s both ;} .index-banner .item.slick-active {-webkit-animation: fadeIn 0.1s both;animation: fadeIn 0.1s both;} } .about-tj{width: 100%;position: relative;} .about-tj-ul{width: 100%;align-items: center;position: relative;top:-55px;z-index: 999;padding: 20px 20px; border-radius: 10px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1.5px solid #fff; background-color: rgba(255,255,255,.6); -webkit-box-shadow: 0 4px 33px rgb(190 196 207 / 28%); box-shadow: 0 4px 33px rgb(190 196 207 / 28%); } .about-tj-ul li{width:25%;text-align: center;border-right: 1px solid #e2e6f0;font-size:35px;font-weight: 300} .about-tj-ul li:last-child{border-right: none;} .about-tj-ul li h6{color:var(--color-3);margin-bottom:5px;} .about-tj-ul li h6 span{font-size: 35px;line-height:35px;font-weight: 600;display: inline-block;letter-spacing: -1px;} .about-tj-ul li h6 em{font-style: normal;font-size:14px;font-weight: 400;position: relative;top:-14px;color:#222;margin-left:5px} .about-tj-ul li p{font-size: 15px;line-height:25px;font-weight:500;color:#495057;} @media (max-width: 991px) { .about-tj-ul{margin-bottom:0;flex-wrap: wrap;padding: 10px 0;top:-50px;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);background-color: rgba(255,255,255,.5);} .about-tj-ul li{font-size: 2.5rem;padding:10px 0;border:none;width: 32%;margin-right: 2%;margin-bottom:1%} .about-tj-ul li:nth-child(3n){margin-right: 0;} .about-tj-ul li:nth-child(n+4){margin-bottom: 0} .about-tj-ul li h6 span{font-size:2.5rem;line-height:2.2rem;margin-bottom:0;} .about-tj-ul li h6 em{font-size: 1.4rem;top:-3px;margin-left:3px} .about-tj-ul li p{font-size:1.2rem;line-height:1.6rem;padding: 0 22px;font-weight: 400} } .pro{background-color: #fff;padding: 50px 0;} .pro-ul{width: 100%;padding:50px 0} .pro-ul li{width: 32%;background-color: #edf2ff;padding:60px 30px 60px 30px;border-radius: 10px;position: relative;} .pro-ul li .img{text-align: center;position: absolute;right: 0;top: -60px;width:45%} .pro-ul li .img img{width: auto;max-width: 100%;} .pro-ul li .info{width: 100%} .pro-ul li .info h6{font-size: 22px;font-weight: 550;margin-bottom: 10px;} .pro-ul li .info p{width: 100%;} .pro-ul li .info p a{display: block;font-size: 15px;line-height: 25px;font-weight: 400;color:#222;padding:5px 0 5px 15px;position: relative;} .pro-ul li .info p a:after{content:'';width: 8px;height: 8px;background-color: var(--color-2);position: absolute;left: 0;top:50%;margin-top: -4px;border-radius: 50%;} .pro-ul li .info p a:hover{color: var(--color-2);transform: translateX(5px);-webkit-transform: translateX(5px);} .pro-ul li:hover{transform: translateY(20px);-webkit-transform: translateY(20px);} .pro-ul li:hover .img{transform: translateY(-35px);-webkit-transform: translateY(-35px);} .pro-ul li a.more{width: 120px;line-height: 40px;background-color: #fff; border-radius: 5px;text-align: center;display: block;position: absolute;right:30px;bottom:30px; box-shadow: 0 16px 32px -5px rgba(51,102,204,0.2); background-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(20px);font-size: 14px; color:#495057; } .pro-ul li a.more:hover{width: 130px;} .pro-ul li a.more i{font-size: 1.4rem;} @media (max-width: 1440px) {} @media (max-width: 992px) { .pro{padding:0;} .pro-ul{padding:20px 0 0 0;flex-wrap: wrap;} .pro-ul li{width:100%;padding:40px 20px;margin-bottom:8%;} .pro-ul li .img{top: -40px;width:43%} .pro-ul li .info{width: 100%} .pro-ul li .info h6{font-size: 1.8rem;margin-bottom:10px;} .pro-ul li .info p a{font-size: 1.4rem;line-height:2.2rem;padding:2px 0 2px 12px;} .pro-ul li .info p a:after{width: 6px;height: 6px;margin-top: -3px;} .pro-ul li a.more{position:relative;right:unset;font-size: 1.4rem;margin: 0 0 0 auto;width: 110px;bottom: -20px} } .solution{padding:100px 0 50px 0;background-color:#f6f7fa;} .solution-list{width: 100%;padding: 20px 0 0 0;} .solution-ul{margin:10px 10px;} .solution-ul.mobile{display: none} .solution-ul li{padding:30px;margin-bottom:20px;min-height: 220px; border-radius: 10px; background-color: rgba(255,255,255,.6); -webkit-box-shadow: 0 12px 18px 2px rgb(204 204 204 / 17%); box-shadow: 0 12px 18px 2px rgb(204 204 204 / 17%); } .solution-ul li:hover{background-color: rgba(255,255,255,1);} .solution-ul li a{display: block;padding: 0;position: relative;outline: none;width: 100%} .solution-ul li a .ico{text-align: center;width: 100%;} .solution-ul li a .ico img{width:60px;margin:0 auto 10px auto;padding-bottom:20px;border-bottom: 2px solid var(--color-2);} .solution-ul li a .info{text-align: center;} .solution-ul li a .info h6{ margin-bottom: 10px; line-height: 28px; font-size: 20px; font-weight: 500; } .solution-ul li a .info p{ line-height: 22px; color: #848b99; font-size: 14px; font-weight: 400; } .solution-ul li:hover {transform: translateY(10px);-webkit-transform: translateY(10px); -webkit-box-shadow: 0 15px 18px 2px rgb(204 204 204 / 30%); box-shadow: 0 12px 18px 2px rgb(204 204 204 / 30%); } .solution-ul li:hover .ico img{transform: scale(0.9);-webkit-transform: scale(0.9);} .solution-ul li:hover .info h6{transform: scale(1.1);-webkit-transform: scale(1.1);font-weight: 550} .solution-list .NextArrow,.solution-list .PrevArrow{ position: absolute; width: 38px; height:38px;border-radius: 50%; line-height:38px; border: none;top:50%;margin-top: -19px; text-align: center; z-index: 999; outline: none; background-image:-webkit-linear-gradient(45deg, var(--color-2), var(--color-5)); background-image:linear-gradient(45deg, var(--color-2), var(--color-5)); box-shadow:0 16px 32px -5px rgba(36,72,246, 0.45); -webkit-box-shadow:0 16px 32px -5px rgba(36,72,246, 0.45); } .solution-list .NextArrow i,.solution-list .PrevArrow i{font-size:2rem;color:#fff;font-weight: 400;} .solution-list .NextArrow:hover i,.solution-list .PrevArrow:hover i{color:#fff;} .solution-list .NextArrow{right:-50px;} .solution-list .PrevArrow{left:-50px;} @media (max-width: 1440px) {} @media (max-width: 992px) { .solution{padding:50px 0 20px 0;} .solution-list{width: 100%;padding:0 0 10px 0;position: relative} .solution-list.pc{display: none} .solution-ul{margin: 10px;width: 100%} .solution-ul.mobile{display: block;margin: 0;} .solution-ul.mobile li{padding:20px 10px 10px 10px ;min-height:auto;width: auto;margin:10px 10px 30px 10px;} .solution-ul.mobile li a .ico img{width:auto;height:90px;} .solution-ul.mobile li a .info h6{margin-bottom: 5px;line-height: 2.5rem;font-size: 1.8rem;} .solution-ul.mobile li a .info p{line-height: 2rem;font-size: 1.4rem;min-height:50px;} .solution-ul .slick-dots {position: absolute;height:10px;bottom:10px;width:100%;padding: 0;list-style-type: none;left: 50%;margin-left: -50%;} .solution-ul .slick-dots li button {display: none;} .solution-ul .slick-dots li {width:8px;height:8px;background-color:rgba(0,0,0,0.1);border-radius: 50%;padding:0;margin: 0 4px;margin-bottom:0;min-height: 0;-webkit-box-shadow:none;box-shadow:none;} .solution-ul .slick-dots li:last-child{margin-right: 0;} .solution-ul .slick-dots li.slick-active {background-color:var(--color-3);} } /*news*/ .news{padding:100px 0 50px 0;background-color: #fff;} .news .nav-tabs{padding:10px 0;border-bottom:none;} .news .nav-tabs .nav-item{margin-right:2%;width:auto;} .news .nav-tabs .nav-item:last-child{margin-right: 0} .news .nav-tabs .nav-item a{font-size: 14px;color: #495057;font-weight: 400;border-radius: 5px;background-color: #f6f7fa;padding: 10px 20px;} .news .nav-tabs .nav-item a:hover,.news .nav-tabs>li.active>a,.news .nav-tabs>li.active>a:focus,.news .nav-tabs>li.active>a:hover{color:#fff;border-radius:5px;border: none;background-color: var(--color-2);box-shadow: 0 16px 32px -12px #0055ff4d;} .news .nav-tabs .nav-item a:after{display: none} .news .tab-content{padding-top:20px;min-height: 400px;} .news .news-cont{flex-wrap: wrap;padding:30px 0;border-bottom: 1px dashed #ddd;} .news .hot-news{width:550px;min-height:410px;display: flex;justify-content:center;align-items: center;flex-wrap: wrap} .news .hot-news a{display: block;width: 100%;transition: all 0.5s;} .news .hot-news a img{width: 100%;margin-bottom: 20px;border-radius: 8px;} .news .hot-news a:hover{transform:translateY(-10px);-webkit-transform:translateY(-10px)} .news .hot-news a h6{font-size: 18px;font-weight: 500;color:#212529;margin-bottom: 10px;} .news .hot-news a p{font-size: 14px;line-height: 25px;color: #868e96;font-weight: 400;margin-bottom: 10px} .news .hot-news a h6 span{color: #495057;float: right;font-size: 14px;} .news .hot-news .more{width: 110px;margin: 0 auto 0 0;background-color: #edf2ff;font-size: 14px;text-align: center;line-height: 35px;border-radius: 5px;color: #495057;display: block;} .news .hot-news .more:hover{background-color: var(--color-2);box-shadow: 0 16px 32px -12px #0055ff4d;color: #fff} .news .hot-news .no-date{width: 100%;height: 100%;background-color:#f8f9fa;text-align: center;border-radius: 8px;padding: 20px; display: flex;align-items: center;justify-content: center;flex-wrap: wrap} .news .hot-news .no-date img{width: auto;max-width: 100%;margin-bottom: 20px} .news .hot-news .no-date span{font-size: 18px;font-weight: 500;color:#5fb2ff;width: 100%;text-align: center;display: block} .news .news-list{width:calc(100% - 550px);padding-left: 5%} .news .news-list ul {width: 100%;} .news .news-list ul li{border-bottom: 1px dashed #eaeaea;padding-bottom:15px;margin-bottom:15px;cursor: pointer} .news .news-list ul li:hover{transform:translateY(-10px);-webkit-transform:translateY(-10px)} .news .news-list ul li:last-child{border-bottom: none;padding-bottom: 0;margin-bottom: 0} .news .news-list .time{ display: block;height:75px;border-radius: 5px;overflow: hidden; width: 80px;font-size: 14px;line-height:25px;color:#495057;text-align: center; background-color: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.5s; } .news .news-list .time span{font-size:35px;color: #FFF;background-color:var(--color-2);text-align: center;height:50px;display: block;line-height:50px;} .news .news-list ul li:hover .time{ box-shadow: 0 10px 25px rgba(0,0,0,0.15); -webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .news .news-list .content{width:calc(95% - 80px);margin-left:5%} .news .news-list .content a{font-weight:500;font-size:16px;color:#343a40;display: block;line-height:26px;margin-bottom:5px;overflow: hidden;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:1;} .news .news-list .content a:hover {color:var(--color-2);} .news .news-list .content p{font-size: 14px;line-height: 22px;color:#868e96;font-weight: 400;overflow: hidden;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;} @media (max-width: 992px) { .news {padding:30px 10px;background-color:#fff} .news .section-title{margin-top:30px} .news .nav-tabs{padding:0;-webkit-justify-content:space-between;justify-content: space-between;} .news .nav-tabs .nav-item{width: 32%;margin-right:0;} .news .nav-tabs .nav-item a{font-size: 1.4rem;font-weight:500;padding: 10px 0;display: block;text-align: center} .news .news-cont{padding:0;width: 100%;border-bottom: none;} .news .hot-news{width:100%!important;margin-right:0;margin-bottom:30px;min-height:auto;} .news .hot-news a img{margin-bottom:10px;} .news .hot-news a h6{font-size: 1.4rem;margin-bottom:5px;line-height: 2.2rem;} .news .hot-news a p{font-size: 1.4rem;line-height:2.2rem;margin-bottom: 20px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;} .news .hot-news a h6 span{float: unset;font-size: 1.4rem;width: 100%;} .news .hot-news .more{width: 120px;font-size: 1.4rem;line-height:35px;background-color: var(--color-2);box-shadow: 0 16px 32px -12px #0055ff4d;color: #fff} .news .news-list{width:100%!important;padding-left:0;padding-top: 20px;border-top: 1px dashed #ccc;} .news .news-list ul li{border-bottom: 1px dashed #ddd;} .news .news-list ul li:last-child{border-bottom: none;padding-bottom: 0;margin-bottom: 0} .news .news-list .time{height:70px;width: 70px;font-size: 1.2rem;line-height:2rem;} .news .news-list .time span{font-size:3rem;height:5rem;line-height:5rem;} .news .news-list .content{width:calc(95% - 70px);} .news .news-list .content a{font-size:1.4rem;line-height:2.2rem;} .news .news-list .content p{font-size: 1.4rem;line-height:2rem;} } /*nav-tabs*/ .nav-tabs{border: none;padding:10px 0;width: 100%;margin: 0 auto;border-bottom: 1px solid #eaeaea;} .nav-tabs .nav-item{margin-right:1%;width: 13.42%;border: none;cursor: pointer!important;} .nav-tabs .nav-item:last-child{margin-right: 0} .nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{;color: var(--color-2);border-radius:0;border: none;background-color: transparent} .nav-tabs .nav-item a{cursor: pointer!important;font-size:18px;text-align: center;font-weight: 500;color: #495057;border-radius: 0;border: none;position: relative} .nav-tabs .nav-item a i{font-size: 2.5rem;margin-right:2px;} .nav-tabs .nav-item a:after{content: '';width: 0;bottom: -10px;height: 4px;background-color: var(--color-2);position: absolute;left: 50%;margin-left: -25%;z-index: 9;transition: all 0.5s;-webkit-transition: all 0.5s;} .nav-tabs .nav-item a:hover{color: var(--color-2);background-color: transparent} .nav-tabs .nav-item a:hover:after,.nav-tabs>li.active a:after{width:50%} .tab-content{width: 100%;padding-top:20px;} @media (max-width: 1440px) { .nav-tabs .nav-item a{font-size:16px;} .nav-tabs .nav-item a i{font-size: 2.2rem;} } @media (max-width: 991px) { .nav-tabs{flex-wrap:nowrap;padding-top:0} .nav-tabs .nav-item{margin-right:0;width: 16.66%;padding: 0;} .nav-tabs .nav-item:last-child{margin-right: 0;} .nav-tabs .nav-item a{font-size:1.5rem;text-align: center;padding:0;} .nav-tabs .nav-item a span{display: block;} .nav-tabs .nav-item a i{font-size:2.2rem;display: block;color: #868e96} .nav-tabs .nav-item a:after{margin-left: -50%;height:3px;} .nav-tabs .nav-item a:hover:after,.nav-tabs>li.active a:after{width:100%;} .tab-content{padding-top:10px} } .brand-carousel{background-color:#fff;padding: 50px 0;} .brand-carousel .nav-tabs{margin:20px 0} .brand-carousel .tab-content{min-height:260px;} .brand-carousel .carousel-row-wrapper{height:100px;margin:0 auto;overflow-x:hidden;position:relative;width:1200px} .brand-carousel .carousel-row-wrapper .mask-left,.brand-carousel .carousel-row-wrapper .mask-right{height:100px;position:absolute;top:0;width:300px;z-index:10} .brand-carousel .carousel-row-wrapper .mask-left{background-image:linear-gradient(270deg,rgba(240,247,255,0) 0,#fff);left:0} .brand-carousel .carousel-row-wrapper .mask-right{background-image:linear-gradient(90deg,rgba(240,247,255,0) 0,#fff);right:0} .brand-carousel div[class^=carousel-row]{white-space:nowrap} .brand-carousel .carousel-row1{animation:move-to-left 70s linear infinite;display:flex} .brand-carousel .carousel-row2{animation:move-to-right 70s linear infinite;display:flex;flex-direction:row-reverse} .brand-carousel .carousel-row-wrapper li{ background-color:#fff;flex-shrink:0;height:60px;width:160px;margin:15px 15px;text-align:center; box-shadow: 0 6px 15px #00000014; border:1px solid rgba(0,0,0,.1); border-radius: 10px; transform: skew(-12deg); overflow: hidden; } .brand-carousel .carousel-row-wrapper li>img{ width:100%;padding: 10px; transform: skew(12deg); } .brand-carousel .carousel-row-wrapper li:first-child{margin-left:0} @media (max-width: 992px) { .brand-carousel{background-color:#fff;padding: 40px 0 40px 0;} .brand-carousel .nav-tabs{margin:15px 0 10px 0} .brand-carousel .tab-content{min-height:160px;} .brand-carousel .carousel-row-wrapper .mask-left,.brand-carousel .carousel-row-wrapper .mask-right{height:100%;width:100px;} .brand-carousel .carousel-row-wrapper{height:100%;width:100%!important;} .brand-carousel .carousel-row-wrapper li{height:38px;width:100px;margin:6px 6px; box-shadow:0 2px 6px rgba(0,0,0,0.05);border-radius:4px;border:1px solid #eee;} .brand-carousel .carousel-row-wrapper li>img{padding:6px;} } @keyframes move-to-left{ 0% { transform:translateZ(0) } to { transform:translate3d(-1100px,0,0) } } @keyframes move-to-right{ 0% { transform:translateZ(0) } to { transform:translate3d(1100px,0,0) } }