@charset "utf-8";
.container { position: relative; width: 100%; }
.section { position: relative; }
.section1 { background:url(bg1.jpg) no-repeat center; }
.section2 { background:url(bg2.jpg) no-repeat center; }
.section3 { background:url(bg3.jpg) no-repeat center; }
.section4 { background:url(bg4.jpg) no-repeat center; }
.section5 { background:url(bg5.jpg) no-repeat center; }

.w-a { width: 1200px;height: 700px;position: absolute;left:50%;margin-left:-600px;top:50%;margin-top:-350px; }
.w-a-a { text-align: center; }
.p2.active .w-a-a { webkit-animation: fadeInDown 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInDown 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99); }

.w-a-a p { font-size: 33px;color:#464d5a;height: 32px;line-height: 32px;background: url(aa1.png) no-repeat center; }
.w-a-a span { display: block; width: 100px;margin: 8px auto; font-size: 18px;color: #464d5a;text-transform: uppercase;padding-bottom:8px;border-bottom:3px solid #464d5a; }
.w-a-b { margin-top:30px; }
.w-a-c { padding: 66px 0; float: left; width: 640px; z-index: 10;position: relative; }
.p2.active .w-a-c {     webkit-animation: fadeInLeft 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInLeft 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.w-a-d { position: relative; box-sizing: border-box; padding: 80px 0 0 110px; height: 532px;width: 640px;float: right;margin-left:-80px;background: url(aa2.png) no-repeat left center;}
.p2.active .w-a-d {     webkit-animation: fadeInRight 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInRight 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.w-a-d h3 { font-size: 33px; color: #464d5a;font-weight: normal; }
.w-a-d h2 { font-size: 41px; color: #464d5a;font-weight: normal; }
.w-a-d p { font-size: 16px; color: #464d5a; line-height: 38px; }
.w-a-e {bottom:80px; font-size: 20px;color: #fff;font-weight: bold;width: 278px;text-align: center;line-height: 54px;position: absolute;left:150px; }
.w-a-b .hd { text-align: center; width: 1200px;margin: 20px auto 0;height: 20px; }
.w-a-b .hd li { margin: 0 8px;cursor: pointer; display: inline-block; width: 14px;height: 14px;box-sizing: border-box; background: #e50015; font-size: 0;border-radius: 7px;}
.w-a-b .hd li:hover, .w-a-b .hd li.on { border:2px solid #e50015;background: #fff; }

.w-b { height: 620px; position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -310px; }
.p3.active .w-b {-webkit-animation: zoomIn 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: zoomIn 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.w-b-g { float: left;width: 200px;height: 620px; }
.w-b-a .lo {position: relative; display: block; text-align: center;}
.w-b-a .lo:after { content:'';width: 40px;height: 3px;background: #fff;position: absolute;left:50%;margin-left:-20px;bottom:-10px; }
.w-b-a .lo i { display: block;font-size: 30px; line-height: 30px; color:#fff; }
.w-b-a .lo span { display: block;font-size: 14px;text-transform: uppercase;font-family: "Arial";color:#fff;line-height: 25px; }
.w-b-a { background: rgba(0,0,0,0.8); text-align: center;box-sizing: border-box; padding-top:40px; }
.w-b-a ul { margin-top: 30px; }
.w-b-a li { height: 60px; }
.w-b-a li a { font-size: 18px;color: #fff; }
.w-b-a li a span { display: block; font-size: 12px;font-family: "Arial";text-transform: uppercase; }
.w-b-a .con { width: 100px; height: 40px;line-height: 38px;box-sizing: border-box;border:1px dashed #fff;text-align: center;margin: 20px auto;font-size: 12px;color: #fff; }
.w-b-a .con img { vertical-align: middle; }
/*.w-b-b img { -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray; }*/
.w-b-b a.pic2 { display: block;width: 100%;height: 100%; }
.w-b-b a.pic { display: none; }


.w-b-b:hover a.pic2 { display:none; }
.w-b-b:hover a.pic { display:block; width: 100%;height: 100%; }



/*.w-b-b:hover img { -webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-ms-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);filter: gray; }*/
.w-b-b { position: relative; }
.w-b-b a.t {font-size: 12px;color: #fff; box-sizing: border-box;padding-top:45px; display: block;width: 124px;height: 125px;text-align: center;position: absolute;left:50%;margin-left:-62px;bottom:50px;background: url(b5.png) no-repeat center; }
.w-b-b a.t  span { font-size: 12px;color: #fff;display: block;text-transform: uppercase; }
.w-b-b:hover a.t { color: #040302; background: url(b6.png) no-repeat center; }
.w-b-b:hover a.t span { color: #040302; }

.w-c {width: 1200px;position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -280px; height: 560px; }
.p4.active .w-c {-webkit-animation: zoomIn 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: zoomIn 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);}
.w-c .parHd { width: 100%;height: 40px;box-shadow: 4px 4px 4px #eee; background: #2d2f32; }
.w-c .parHd li { position: relative; float: left;width: 150px;text-align: center;height: 40px;line-height: 40px;font-size: 14px;color: #e4050b;cursor: pointer; }
.w-c .parHd li:after { content:'';width: 2px;height: 16px;position: absolute;right:0;top:50%;margin-top:-8px;background: #e4050b; }
.w-c .parHd li.on,.w-c parHd li:hover { color: #fff; }
.w-c .parBd { margin-top:40px; }
.w-c .parBd li { float: left; width: 380px;margin-right:30px; }
.w-c .parBd .slideBox { position: relative; }
.w-c-a { width: 100%;background: #fff;height: 125px;margin-top:12px;padding:20px 15px 0;box-sizing: border-box; }
.w-c-a a.t { font-size: 16px;color: #e51818;font-weight: bold; display: block;padding-bottom:5px; }
.w-c-a p { font-size: 15px;color: #444445;line-height: 25px; }
.w-c .parBd .slideBox .more {font-size: 16px;color: #fff;margin: 30px auto 0; display: block;width: 100px;height: 30px;line-height: 30px;text-align: center;background: #e4050b; }
.w-c .parBd .slideBox .sPrev { left:500px; background: url(prev1.png) no-repeat center; position: absolute;bottom:0px;display: block;width: 30px;height: 30px; }
.w-c .parBd .slideBox .sNext { right:500px; background: url(next1.png) no-repeat center; position: absolute;bottom:0px;display: block;width: 30px;height: 30px; }
.w-c .parBd li:hover .w-c-a { background: #e40810; }
.w-c .parBd li:hover .w-c-a a.t,.w-c .parBd li:hover .w-c-a p { color: #fff; }

.w-d { position: absolute; left: 50%; margin-left: -600px; top: 50%; margin-top: -330px;height: 660px; }
.w-d-a { text-align: center; }
.p5.active .w-d-a { webkit-animation: fadeInDown 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInDown 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.w-d-a p { font-size: 33px;color:#464d5a;height: 32px;line-height: 32px;background: url(aa1.png) no-repeat center; }
.w-d-a span { display: block; width: 120px;margin: 8px auto; font-size: 18px;color: #464d5a;text-transform: uppercase;padding-bottom:8px;border-bottom:3px solid #464d5a; }
.w-d-b { background: #323233; width: 100%;box-sizing: border-box; padding: 16px 40px; margin-top:20px;  }
.w-d-c { float: left; width: 695px;}
.w-d-d { padding-left:28px; float: left; width: 420px;height: 516px;box-sizing: border-box;background: url(d2.png) no-repeat 27px center;box-sizing: border-box; }
.w-d-d h2 { font-size: 20px;color: #fff;padding: 170px 0 0 0; margin-bottom:25px; }
.w-d-d li { width: 300px; font-size: 15px;color: #fff;line-height: 30px; }
.w-d-d li em { display: inline-block;width: 75px; }
.w-d-d li:first-child span { float: left; height: 60px;line-height: 30px; }
.w-d-d li:first-child i { float: left; line-height: 30px;width: 220px; }
.w-d-e {text-align: center;line-height: 52px;margin-top:15px; width: 188px;height: 54px;box-sizing: border-box; border:1px dashed #fff;font-size: 16px;color:#fff; }
.w-d-e img { vertical-align: middle;display: inline-block;margin-right:12px; }
.p5.active .w-d-d {     webkit-animation: fadeInLeft 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInLeft 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.p5.active .w-d-c {     webkit-animation: fadeInRight 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99);animation: fadeInRight 2.0s 0s cubic-bezier(0.4, 0.01, 0.165, 0.99); }