@charset "utf-8";
/* 公共样式 */
.slideBox{}

/* 效果一 默认 居中 小点 轮换 */
#SuperSlide1{ width:100%; height:100%; overflow:hidden; position:relative;}
#SuperSlide1 .hd{ overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
#SuperSlide1 .hd ul{ overflow:hidden; zoom:1; float:left;  }
#SuperSlide1 .hd ul li { float: left; margin-right: 5px; width: 20px; height: 15px;line-height: 14px;
  text-align: center; background: #000; color:#FFF; cursor: pointer; border:solid 1px #EEE; border-radius: 2px;}
#SuperSlide1 .hd ul li a{ color:#FFF; text-decoration:none; }
#SuperSlide1 .hd ul li.on{ background: #f00; color: #fff; width:25px; }
#SuperSlide1 .hd ul li.on a{ color: #fff;}
#SuperSlide1 .bd{ position:relative; width:100%; z-index:0; height:100%;}
#SuperSlide1 .bd li{ width:100%; height:100%;display:block;}
#SuperSlide1 .bd li a{display:block; width:100%; height:100%;}
#SuperSlide1 .bd img{ width:100%; height:100%; }
#SuperSlide1 .prev, #SuperSlide1 .next { position: absolute; top:45%; margin-top: -25px; display: block; width:40px; height:60px;opacity: 0.5;}
#SuperSlide1 .prev {left:30px;background:url(prev.png) -118px -1px #006600 no-repeat; }
#SuperSlide1 .next{right:30px;background:url(prev.png) 2px -1px #006600 no-repeat; }
#SuperSlide1 .prev:hover, #SuperSlide1 .next:hover{opacity: 1;}

/* 手机版 效果一 */
#SuperSlide11{ width:100%; height:100%; overflow:hidden; position:relative;}
#SuperSlide11 .hd{ overflow:hidden; position:absolute; right:.3rem; bottom:.3rem; z-index:1; }
#SuperSlide11 .hd ul{ overflow:hidden; zoom:1; float:left;  }
#SuperSlide11 .hd ul li { float: left; margin-right: .2rem; width: .6rem; height: .5rem;line-height: .5rem;
  text-align: center; background: #000; color:#FFF; cursor: pointer; border:solid 1px #EEE; border-radius: 2px;}
#SuperSlide11 .hd ul li a{ color:#FFF; text-decoration:none; }
#SuperSlide11 .hd ul li.on{ background: #f00; color: #fff; width:.7rem; }
#SuperSlide11 .hd ul li.on a{ color: #fff;}
#SuperSlide11 .bd{ position:relative; width:100%; z-index:0; height:100%;}
#SuperSlide11 .bd li{ width:100%; height:100%;display:block;}
#SuperSlide11 .bd li a{display:block; width:100%; height:100%;}
#SuperSlide11 .bd img{ width:100%; height:100%; }
#SuperSlide11 .prev, #SuperSlide11 .next { position: absolute; top:45%; margin-top: -0.6rem; display: block; width:40px; height:60px;opacity: 0.5;}
#SuperSlide11 .prev {left:30px;background:url(prev.png) -118px -1px #006600 no-repeat; }
#SuperSlide11 .next{right:30px;background:url(prev.png) 2px -1px #006600 no-repeat; }
#SuperSlide11 .prev:hover, #SuperSlide1 .next:hover{opacity: 1;}

/* 效果二 居右 小方块 */
#SuperSlide2{ width:100%; height:100%; overflow:hidden; position:relative;}
#SuperSlide2 .hd{ height:15px; overflow:hidden; position:absolute; right:50%; bottom:0px; z-index:1; }
#SuperSlide2 .hd ul{ overflow:hidden; zoom:1; float:left;  }
#SuperSlide2 .hd ul li{ float:left; margin-right:5px;width: 7px;height: 7px;background: #393939;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px; cursor:pointer; }
#SuperSlide2 .hd ul li.on{ background:#f00; color:#fff; }
#SuperSlide2 .bd{ position:relative; width:100%; z-index:0; height:100%;}
#SuperSlide2 .bd li{ width:100%; height:100%;display:block;}
#SuperSlide2 .bd li a{display:block; width:100%; height:100%; }
#SuperSlide2 .bd img{ width:100%; height:100%; }
#SuperSlide2 .prev, #SuperSlide2 .next { position: absolute; top:45%; margin-top: -25px; display: block; width:40px; height:60px;opacity: 0.5;}
#SuperSlide2 .prev {left:30px;background:url(prev.png) -118px -1px #006600 no-repeat; }
#SuperSlide2 .next{right:30px;background:url(prev.png) 2px -1px #006600 no-repeat; }
#SuperSlide2 .prev:hover, #SuperSlide2 .next:hover{opacity: 1;}

/* 效果三 底部小横条 */
#SuperSlide3 {width:100%; height:auto; position:relative;background:#F2F2F2;}
#SuperSlide3 .hd{ height:5px; overflow:hidden; position:absolute; bottom:0; z-index:1; width:100%; }
#SuperSlide3 .hd ul{ overflow:hidden; zoom:1; width:100%; }
#SuperSlide3 .hd ul li{ width:33%;height:5px;background: #cccaca; display:block; float:left; cursor:pointer; }
#SuperSlide3 .hd ul li.on{background: #CC0000; width:34%; }
#SuperSlide3 .bd{ position:relative; width:100%; z-index:0; height:100%;}
#SuperSlide3 .bd li{ width:100%; height:100%;display:block;}
#SuperSlide3 .bd li a{display:block; width:100%;height:100%; }
#SuperSlide3 .bd img{ width:100%; height:100%; }
#SuperSlide3 .prev, #SuperSlide3 .next { position: absolute; top:45%; margin-top: -25px; display: block; width:40px; height:60px;opacity: 0.5;}
#SuperSlide3 .prev {left:30px;background:url(prev.png) -118px -1px #006600 no-repeat; }
#SuperSlide3 .next{right:30px;background:url(prev.png) 2px -1px #006600 no-repeat; }
#SuperSlide3 .prev:hover, #SuperSlide3 .next:hover{opacity: 1;}

/* 效果四 */
#SuperSlide4 {width:100%; height:auto; position:relative;background:#F2F2F2;}
#SuperSlide4 .bd{ position:relative; width:100%; z-index:0; height:100%;}
#SuperSlide4 .bd li{ width:100%; height:100%;display:block;}
#SuperSlide4 .bd li a{display:block; width:100%;height:100%; }
#SuperSlide4 .bd img{ width:100%; height:100%; }

/* 效果五 底部大横条 */
#SuperSlide5 {width:100%; height:auto; position:relative;background:#F2F2F2;}
#SuperSlide5 .hd{ height:30px; overflow:hidden; position:absolute; bottom:-30px; z-index:1; width:100%; }
#SuperSlide5 .hd ul{ overflow:hidden; zoom:1; width:100%; }
#SuperSlide5 .hd ul li{ width:20%;height:30px;background: #939393; display:block; float:left; cursor:pointer; }
#SuperSlide5 .hd ul li.on{background: #bd1920; }
#SuperSlide5 .bd{ position:relative; width:100%; z-index:0; height:100%;}
#SuperSlide5 .bd li{ width:100%; height:100%;display:block;}
#SuperSlide5 .bd li a{display:block; width:100%;height:100%; }
#SuperSlide5 .bd img{ width:100%; height:100%; }
#SuperSlide5 .prev, #SuperSlide3 .next { position: absolute; top:45%; margin-top: -25px; display: block; width:40px; height:60px;opacity: 0.5;}
#SuperSlide5 .prev {left:30px;background:url(prev.png) -118px -1px #006600 no-repeat; }
#SuperSlide5 .next{right:30px;background:url(prev.png) 2px -1px #006600 no-repeat; }
#SuperSlide5 .prev:hover, #SuperSlide3 .next:hover{opacity: 1;}