#banner {
position: relative;
z-index: 2;
width: 100%;
height: 335px;
overflow: hidden;
max-width: 1366px;
margin: 0 auto;
}
#banner .pics {
position: relative;
width: 100%;
height: 100%;
}
#banner .pics li {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
background: no-repeat center 0;
}
#banner .pics li a {
display: block;
width: 100%;
height: 100%;
}
#banner .g-wrap {
position: absolute;
left: 50%;
bottom: 0;
z-index: 2;
height: 30px;
overflow: hidden;
}
#banner .g-wrap .idxs {
float: left;
height: 100%;
}
#banner .g-wrap .idxs li.on {
background-color: #8f8d93;
border-color: #8f8d93;
}
#banner .g-wrap .idxs li {
float: left;
margin: 30px 7px 0 0;
width: 9px;
height: 9px;
border-radius: 13px;
border: 2px solid #fff;
cursor: pointer;
-ms-transition: background-color 1000ms, margin-top 500ms, border-color 1000ms;
transition: background-color 500ms, margin-top 500ms;
transition: background-color 1000ms, margin-top 500ms, border-color 1000ms;
-webkit-transition: background-color 1000ms, margin-top 500ms, border-color 1000ms;
-moz-transition: background-color 1000ms, margin-top 500ms, border-color 1000ms;
-o-transition: background-color 1000ms, margin-top 500ms, border-color 1000ms;
}
#banner .btns .prev {
	left: -50px;
}
#banner .btns .prev.on {
left: 120px;
}
#banner .btns .prev .off {
background: url(../images/prev.png) no-repeat 0 0;
}
#banner .btns a {
position: absolute;
top: 50%;
z-index: 4;
margin-top: -25px;
width: 50px;
height: 50px;
-ms-transition: left 400ms, right 400ms;
transition: left 400ms, right 400ms;
-webkit-transition: left 400ms, right 400ms;
-moz-transition: left 400ms, right 400ms;
-o-transition: left 400ms, right 400ms;
}
#banner .btns a span.off {
-webkit-opacity: 1;
opacity: 1;
display: block\9;
}
#banner .btns a span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-ms-transition: -ms-opacity 300ms;
transition: opacity 300ms;
-webkit-transition: -webkit-opacity 300ms;
-moz-transition: -moz-opacity 300ms;
-o-transition: -o-opacity 300ms;
cursor: pointer;
}
#banner .btns .prev .on {
background: url(../images/prev_on.png) no-repeat 0 0;
}
#banner .btns a span.on {
-webkit-opacity: 0;
opacity: 0;
display: none\9;
}
#banner .btns .next {
right: -50px;
}
#banner .btns .next.on {
right: 120px;
}
#banner .btns .next .off {
background: url(../images/next.png) no-repeat 0 0;
}
#banner .btns a span.off {
-webkit-opacity: 1;
opacity: 1;
display: block\9;
}
#banner .btns .next .on {
background: url(../images/next_on.png) no-repeat 0 0;
}
#banner .btns a {
position: absolute;
top: 50%;
z-index: 4;
margin-top: -25px;
width: 50px;
height: 50px;
-ms-transition: left 400ms, right 400ms;
transition: left 400ms, right 400ms;
-webkit-transition: left 400ms, right 400ms;
-moz-transition: left 400ms, right 400ms;
-o-transition: left 400ms, right 400ms;
}