@charset 'UTF-8';
.slick-loading .slick-list{background:#fff url(ajax-loader.gif) center center no-repeat;}
@font-face{font-weight:400;font-style:normal;font-family:slick;src:url(fonts/slick.eot);src:url(fonts/slick.eot?#iefix) format('embedded-opentype'),url(fonts/slick.woff) format('woff'),url(fonts/slick.ttf) format('truetype'),url(fonts/slick.svg#slick) format('svg');}
.slick-arrow{width:50px;height:50px;position:absolute;top:50%;display:block;outline:0;border:none;background:0 0;color:transparent;font-size:0;line-height:0;cursor:pointer;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-ms-transform:translate(0,-50%); background-color: #000; border-radius: 100%; z-index: 10}
.slick-arrow:focus,
.slick-arrow:hover{outline:0;background:#eee;}
.slick-arrow:focus:before,
.slick-arrow:hover:before{opacity:1;}
.slick-arrow.slick-disabled:before{opacity:.25;}
.slick-arrow:before{ content: ''; position: absolute; margin:auto; width:40px; height:40px; left: 0; right: 0; top: 0; bottom: 0; background: no-repeat left center; transition: 0.5s}
.slick-prev{left:-25px;}
.slick-prev:before{background-image: url(slick-prev.png)}
.slick-next{right:-25px;}
.slick-next:before{background-image: url(slick-next.png)}
.slick-arrow:hover:before{ background-position: right center}

.slick-dots{position:absolute;bottom:-25px;display:block;margin:0;padding:0;width:100%;list-style:none;text-align:center;}
.slick-dots li{position:relative;display:inline-block;margin:0 5px;padding:0;height:20px;min-width:20px;cursor:pointer;}
.slick-dots li button{display:block;padding:5px;width:20px;height:20px;outline:0;border:0;background:0 0;color:transparent;font-size:0;line-height:0;cursor:pointer;}
.slick-dots li button:focus,
.slick-dots li button:hover{outline:0;}
.slick-dots li button:focus:before,
.slick-dots li button:hover:before{opacity:1;}
.slick-dots li button:before{position:absolute;top:0;left:0;width:20px;height:20px;color:#000;content:'•';text-align:center;font-size:6px;font-family:slick;line-height:20px;opacity:.25;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.slick-dots li.slick-active button:before{color:#000;opacity:.75;}

.item{ position: relative}
.item .pic{ position: relative}
.item video{ position: absolute; width: 100%; height: 100%; object-fit: cover}
.arrows_dots{ position: relative}

.line_slick[rel=absolute]{ position: absolute; left: 0; bottom:2%; }
.line_slick[rel=relative]{position: relative}
.line_slick{ width: 100%; height: 4px; background: #ddd;}
.line_slick i{ position: absolute; width: 0;height: 100%; background: #ff0000; transition: width 0.5s}



.home-ban .slick-dots{position: absolute; left: 0;width: 100%; bottom: calc(41 / 960 * 100%); text-align: center;z-index: 10;}
.home-ban .slick-dots li{border: none; width: 20px; height: 20px;}
.home-ban .slick-dots button{display: none}
.home-ban .slick-dots span { position:absolute; display:block; width:20px; height:20px; /*box-shadow:inset 0 0 0 2px #fff; */border-radius: 100px;}
.home-ban .slick-dots span:before{content: ''; position: absolute; width: 30%; height: 30%; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: #fff; border-radius: 100px;}
.home-ban .slick-dots i{ display:block; position: absolute; top: 0; z-index: 5;  width:10px; height:20px; margin: 0; padding: 0; overflow: hidden; font-style:normal;}   
.home-ban .slick-dots i:nth-child(1) {left: 0;}        
.home-ban .slick-dots i:nth-child(2) {right: 0;}
.home-ban .slick-dots i:before {position: absolute;content:''; margin: 0;  width:20px; height: 20px; border-radius: 50%; border:2px solid transparent;
 transform: rotate(135deg);}
.home-ban .slick-dots .slick-active i:nth-child(1):before { left: 0; border-top-color: #31c9b6; border-left-color:#31c9b6; animation: yl 4s linear ;animation-fill-mode:forwards}
.home-ban .slick-dots .slick-active i:nth-child(2):before { right: 0; border-bottom-color:#31c9b6; border-right-color:#31c9b6; animation: yr 4s linear ;animation-fill-mode:forwards;}
.home-ban .slick-dots .slick-active span:before{background:#31c9b6 }
@keyframes yr {
0% {transform: rotate(135deg);}
50%,
100% {transform: rotate(315deg);}
}

@keyframes yl {
0%,
50% {transform: rotate(135deg);}
100% {transform: rotate(315deg);}
}