.slick-slider { position: relative; display: block; -webkit-touch-callout: none; -ms-touch-action: pan-y; touch-action: pan-y; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; z-index: 1; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-slide:focus,.slick-list:focus { outline: none } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition-delay: 100ms; } .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 { -webkit-backface-visibility: hidden; display: none; float: left; height: 100%; min-height: 1px; } [dir = 'rtl'] .slick-slide { float: right; } .slick-slide .slick-loading img { display: none; } .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: 0px solid transparent; } .slick-arrow .slick-hidden { display: none; } .slick-arrow{z-index:100;position: absolute; top:50%; transform: translate(0,-50%); width:0.56rem; height:0.56rem;cursor: pointer; padding: 0;transition: all ease 0.3s;border-radius: 50%;background-color: #f4f6f9;color: #fff;display: flex;align-items: center;justify-content: center;border: 0;} .slick-arrow:after{content: "";left: 0;top: 0;width: 100%;height: 100%;background-size:auto;position: absolute;background-position: center center;background-repeat: no-repeat;} .slick-arrow i{display: none;} .slick-arrow:hover{background-color: #003c96;} .slick-disabled,.slick-disabled:hover,.slick-disabled:hover:after{opacity: 0.5;cursor: auto;} .slick-prev{left: 8px;} .slick-prev:after{background-image: url(../image/larr-g.png);} .slick-next{right: 8px;} .slick-next:after{background-image: url(../image/rarr-g.png);} .slick-arrow.slick-prev:hover:after{background-image: url(../image/larr-w.png);} .slick-arrow.slick-next:hover:after{background-image: url(../image/rarr-w.png);} .slick-dots{font-size: 0;text-align: center;padding-top: 0.2rem;} .slick-dots li {position: relative;display: inline-block;vertical-align: middle;width: 0.08rem;height: 0.08rem;cursor: pointer;margin-right: 0.14rem;} .slick-dots li:last-child{margin-right: 0;} .slick-dots li button{display: none;} .slick-dots li:after{width: 0.08rem;height: 0.08rem;left: 50%;top: 50%;position: absolute;background-color: #ddd;content: "";margin: -0.025rem 0 0 -0.025rem;border-radius: 50%;} .slick-dots .slick-active:after{background-color: #e77d20;} .state .dots{flex: 1;margin-right: 0.6rem;} .state .slick-dots{position: relative;height: 3.125vw;display: flex;align-items: center;padding-top: 0;justify-content: center;} .state .slick-dots li{flex: 1;height: 0.02rem;} .state .slick-dots li button{border-radius: 0;opacity: 0;} .state .slick-dots li:hover button{opacity: 1;} .state .slick-dots li:before{height: 0.02rem;background-image: linear-gradient(to right, #e57008 , #f5c013);left: 0;top: 50%;content: "";position: absolute;width: 0;transition: all 0.5s;transform: translateY(-50%);margin: -0.01rem 0 0 0;} .state .slick-dots li:after{display: none;} .state .slick-dots .slick-active:before{width: 100%;} .state .slick-dots:after{left: 0;top: 50%;transform: translateY(-50%);width: 100%;content: "";position: absolute;height: 0.02rem;background-color: #cecfd0;margin-top: -1px;z-index: -1;} .state .slick-arrow{position: static;transform: translateY(0);display: inline-block;vertical-align: middle;} .state .slick-prev{margin-right: 0.2rem;} @media ( max-width:1024px){ .slick-arrow{width: 30px !important;height: 30px !important;} .slick-prev{ left:0;} .slick-next{ right:0;} } .fade-out { opacity: 0; -webkit-transition: opacity 0.5s ease-out; transition: opacity 0.5s ease-out; } .fade-in { opacity: 1; -webkit-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; }