﻿
* { padding: 0px; margin: 0px; }
html, body, ul, li { padding: 0px; margin: 0px; }
ul, li { list-style-type: none; }
body { font-size: 12px; font-family: "Microsoft YaHei", SimSun,Microsoft YaHei; line-height: 20px; background: rgb(255, 255, 255); color: rgb(51, 51, 51); }
a { color: rgb(102, 102, 102); text-decoration: none; }
a:visited { color: rgb(102, 102, 102); }
a:hover, a:active, a:focus { color: rgb(255, 132, 0); text-decoration: none; }





.banner { overflow: hidden; width: 1920px; height: 600px; position: relative; }
.banner .preBtn { left: 50%; top: 50%; width: 74px; height: 74px; margin-top: -37px; margin-left: -690px; background-color: rgba(0, 0, 0, 0.3); z-index: 7; display: none; }
.banner .preBtn i { display: block; width: 28px; height: 51px; margin-left: 24px; margin-top: 13px; background: url("../images/iconnew.png") 0px 0px no-repeat; }
.banner .nextBtn { right: 50%; top: 50%; width: 74px; height: 74px; margin-top: -37px; margin-right: -690px; background-color: rgba(0, 0, 0, 0.3); z-index: 7; display: none; }
.banner .nextBtn i { display: block; width: 28px; height: 51px; margin-left: 24px; margin-top: 13px; background: url("../images/iconnew.png") -32px 0px no-repeat; }
.banner .preBtn:hover, .banner .nextBtn:hover { background-color: rgba(0, 0, 0, 0.4); }




.banner .hd { bottom: 10px; height: 35px; overflow: hidden; position: absolute; left: 40.3%; z-index: 1; } 



.banner .hd ul { float: left; overflow: hidden; }
.banner .hd ul li { background: rgba(255, 0, 0, 0.2); cursor: pointer; float: left; height: 8px; margin-right: 10px; position: relative; width: 50px; border-radius: 20px; border: 2px solid #b394ac;}
.banner .hd ul li.on::after { content: ""; display: block; width: 50px; background-color: #790335; color: rgb(255, 255, 255); height: 8px; animation: opacity 1s ease 0s 1 normal none running; position: absolute; top: 0px; left: 0px; border-radius: 20px; }
.banner .bd { height: 100%; position: relative; z-index: 0; }
.banner .bd ul { width: 100%; }
.banner .bd ul li { width: 100%; height: 600px; }
.banner .bd ul li a { display: block; width: 100%; height: 600px; }
.banner .bd ul li a.ban1 { background: url("../images/banner1.jpg") center 0px no-repeat; }
.banner .bd ul li a.ban2 { background: url("../images/banner2.jpg") center 0px no-repeat; }
.banner .bd ul li a.ban3 { background: url("../images/banner3.jpg") center 0px no-repeat; }
.banner .bd ul li a.ban4 { background: url("../images/banner4.jpg") center 0px no-repeat; }
.banner .bd ul li a.ban5 { background: url("../images/banner5.jpg") center 0px no-repeat; }
.banner .bd ul li a.ban6 { background: url("../images/banner6.jpg") center 0px no-repeat; }




@keyframes opacity{0%{ width:0}100%{ width:50px}}
@-webkit-keyframes opacity{0%{ width:0}100%{ width:50px}}











