/*s:banner common*/
.banner-box { position: relative; overflow: hidden; width: 100%; color: #000; background-color: #fff;height:600px;}
.banner-box .hw-btn-warp{margin-left: -10px;margin-right:-10px;}
.banner-box.banner-while .pre-btn{color: #fff;}
.banner-box.banner-while .next-btn{color: #fff;}
.banner-box.banner-while .banner-print{color: #fff;}
.banner-box .tc{ text-align: center;}
.banner-box .tl{text-align: left;}
.banner-box .tr{text-align: right;}
.banner-box .banner-list { position: relative; width: 100%; height: 100%; }
.banner-box .banner-img {position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%;left:-100%}
.banner-box .banner-img.pre { z-index: 5; left: -100%; }
.banner-box .banner-img.next { z-index: 5; left: 100%; }
.banner-box .banner-img.on {z-index: 6;left:0;}
.banner-box .banner-img img {width: 100%;}
.banner-box .banner-img .bannerImg img {min-height: 100%;}
.banner-box .banner-img .banner-bg img {min-height: 100%;}
.banner-box .banner-img.banner-while-font{ color: #fff; }
.banner-box .banner-img.banner-gray-font{ color: #000; }
.banner-box .pre-btn .iconfont,.banner-box .next-btn .iconfont {font-size: 60px;line-height: 1;opacity: .5;}
.banner-box .pre-btn, .banner-box .next-btn {position: absolute;top: 50%;z-index: 6;margin-top: -24px;color: inherit;-moz-transition:opacity .5s ease-in-out;-o-transition:opacity .5s ease-in-out;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out}
.banner-box .pre-btn {left:60px;}
.banner-box .next-btn {right:60px}
.banner-box .next-btn {right:60px}
.banner-box .cistern{padding-left:120px;padding-right:120px}
.banner-box .banner-print {position: absolute;z-index: 6;bottom: 30px;left: 0;width: 100%;padding-bottom: 10px;text-align: center;}
.banner-box .banner-print span {display: inline-block;width: 10px;border-radius: 50%;height: 10px;margin: 0 5px;cursor: pointer;background-color: rgba(0, 0, 0, .4);}
.banner-box .banner-print span.on {background-color: rgba(0, 0, 0, .6);}
.banner-box.banner-while .banner-print span {background-color: rgba(255, 255, 255, .4);}
.banner-box.banner-while .banner-print span.on { background-color: rgba(255, 255, 255, .8); }

@media (max-width:1200px) {
    .banner-box .pre-btn {left:30px;}
    .banner-box .next-btn {right: 30px;}
    .banner-box .cistern{padding-left:90px;padding-right:90px}
}

@media (max-width:768px) {
    .banner-box .pre-btn {display: none}
    .banner-box .next-btn {display: none}
    .banner-box .cistern{padding-left: 15px;padding-right: 15px;}
    .banner-box .banner-img.banner-while-font{ color: #fff; }
    .banner-box .banner-img.banner-gray-font { color: #000; }
    .banner-box .banner-print {bottom: 26px;}
}
@media (max-width:540px) {
    .banner-box .banner-print {bottom: 6px;}
}

@media (min-width:992px) {
    .banner-box .pre-btn:hover .iconfont, .banner-box .next-btn:hover .iconfont{ opacity: 1; }
    .banner-box .pl-per-15{padding-left:15%}
    .banner-box .pl-per-30{padding-left:30%}
    .banner-box .pl-per-40{padding-left:40%}
    .banner-box .pl-per-50{padding-left:50%}
    .banner-box .pl-per-60{padding-left:60%}
    .banner-box .pl-per-70{padding-left:70%}
    .banner-box .pr-per-15{padding-right:15%}
    .banner-box .pr-per-30{padding-right:30%}
    .banner-box .pr-per-40{padding-right:40%}
    .banner-box .pr-per-50{padding-right:50%}
    .banner-box .pr-per-60{padding-right:60%}
    .banner-box .pr-per-70{padding-right:70%}
}
/*e:banner common*/