@charset "utf-8";
/* CSS Document */
.hf_banner {100%; margin:0 auto; overflow: hidden;text-align:center;clear:both;position: relative;}
.hf_banner li a{display:block;width:1000px;margin:0 auto; cursor:pointer;}
.hf_banner ul li {float: left;width: 100%;}
.hf_banner .dots {position:  absolute; left: 0;bottom: 10px;width: 100%;text-align: center;}
.hf_banner .dots li {display: inline-block;width: 24px;height: 4px;background-color: #fff; margin: 0 4px;text-indent: -999em;border-radius: 2px;cursor: pointer;opacity: .4;-webkit-transition: background .5s, opacity .5s;-moz-transition: background .5s, opacity .5s;transition: background .5s, opacity .5s;}
.hf_banner .dots li.active {background: #00e0f4;opacity: 1;width: 24px;}
.hf_banner .arrow{display: block;width: 50px;height: 50px;position: absolute;top:50%;}

.hf_banner .prev{background: url(unslider/prev.png) left top no-repeat;left: -50px;-webkit-transition:left 300ms; transition:left 300ms;}
.hf_banner .prev:hover{background: url(unslider/prev_on.png) left top no-repeat;}

.hf_banner .next{background: url(unslider/next.png) left top no-repeat;right: -50px;-webkit-transition:right 300ms; transition:right 300ms;}
.hf_banner .next:hover{background: url(unslider/next_on.png) left top no-repeat;}
.hf_banner:hover .prev{left: 60px;}
.hf_banner:hover .next{right: 60px;}