@charset "gb2312";
/* CSS Document */
* html, _html {  background-attachment: fixed; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img { border: medium none; margin: 0; padding: 0; font-weight: normal; }
body, button, input, select, textarea { font: 12px/1.5 "Microsoft YaHei", Geneva, sans-serif, tahoma, Srial, helvetica, sans-serif; }
article, aside, dialog, footer, header, section, footer, nav, figure, menu { display: block; border: medium none; margin: 0; padding: 0; font-weight: normal; }
h1, h2, h3, h4, h5, h6 { line-height: 100%; }
body { background: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga', 'kern'; }
em, b, i, s { font-style: normal; font-weight: normal; text-transform: none; font-style: normal; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
ul, ol { list-style: none; }
a { text-decoration: none; }
a:hover { text-decoration: none!important; }
p { text-align: justify; text-justify: inter-ideograph; white-space: normal; }
img { border: 0px; vertical-align: middle; display: block; }
table { border-collapse: collapse; border-spacing: 0; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; overflow: hidden; }
.clearfix { zoom: 1; }
.fl { float: left; }
.fr { float: right; }
.re { position: relative; }
.ab { position: absolute }
.wrap { position: relative; width: 1200px; margin: 0 auto; color: #4c5a65; }
.wrap h3 { font-size: 48px; position: relative; }
.bannerTxt, .linkBtn em, .wrap h3:after, .picScroll-left .hd a:before, .front dt, .prevB:before, .nextB:before, .box8 ul li p:before { background: url("../images/icon.png")no-repeat -11px -506px; }
.linkBtn { width: 265px; height: 68px; display: block; position: absolute; top: 437px; left: 164px; background: #ff6005; border-radius: 50px; overflow: hidden; }
.linkBtn em { width: 118px; height: 30px; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-position: -12px -9px; z-index: 10; }
.linkBtn:before { border-radius: 50px; content: ""; position: absolute; width: 100%; height: 100%; opacity: 0; background: #db4e02; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); -webkit-transform: scale3d(0.7, 1, 1); transform: scale3d(0.7, 1, 1); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; left: 0; top: 0; }
.linkBtn:hover:before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
/*banner*/
.banner { width: 100%; height: 718px; background: url("../images/banner1.jpg")no-repeat center top, url("../images/banner2.jpg")no-repeat center bottom; }
.bannerCon { width: 597px; height: 597px; border-radius: 50%; background: rgba(24, 37, 93, .6); position: absolute; top: 30px; left: 183px; position: relative; -webkit-transition: all 0.3s; -webkit-transform: scale(0); transition: all 0.3s; transform: scale(0); }
.bannerTxt { width: 472px; height: 239px; position: absolute; left: 65px; top: 38px; opacity: 0; -webkit-transition: all 0.3s; -webkit-transition-delay: 1s; transition: all 0.3s; transition-delay: 1s; }
.bannerCon .linkBtn { top: 687px; opacity: 0; -webkit-transition: all 0.3s; -webkit-transition-delay: 1s; transition: all 0.3s; transition-delay: 1s; }
.banner .bannerCon.on { -webkit-transform: scale(1);transform: scale(1); }
.banner .bannerCon.on .bannerTxt { top: 138px; opacity: 1; }
.banner .bannerCon.on .linkBtn { top: 437px; opacity: 1; }
/*box1*/
.box1 { height: 720px; }
.box1Pic { float: left; width: 578px; height: 679px; padding-top: 41px; }
.box1Txt { width: 557px; padding-top: 145px; float: right; }
.box1Txt h3 { color: #1255a7; width: 195px; margin-bottom: 30px; }
.wrap h3:before, .wrap h3:after { content: ""; position: absolute; height: 46px; width: 2px; background: #1255a7; top: 4px; right: -12px; }
.wrap h3:after { width: 107px; height: 35px; background: url("../images/icon.png")no-repeat -13px -50px transparent; top: 10px; right: -133px; }
.box1Txt span { display: block; line-height: 36px; padding-left: 25px; font-size: 20px; position: relative; }
.box1Txt span:nth-of-type(6) { margin-bottom: 20px; }
.box1Txt span:before, .box1Txt span:after { position: absolute; width: 8px; height: 8px; background: #4c5a65; border-radius: 50%; content: ""; top: 15px; left: 6px; }
.box1Txt span:after { width: 14px; height: 14px; border: 1px solid #4c5a65; background: none; top: 11px; left: 2px; transition: all 0.3s; opacity: 0; }
.box1Txt span:hover:after { opacity: 1; }
.box1Txt p { font-size: 16px; color: #70777c; }
/*box2*/
.box2 { height: 800px; background: #1255a7; }
.box2 h3 { color: #fff; width: 240px; margin: 100px 0 55px 345px; }
.box2 h3:before, .box4 h3:before, .box6 h3:before, .box8 h3:before { background: #fff; }
.box2 h3:after { background-position: -13px -189px; width: 247px; height: 35px; right: -268px; }
.picScroll-left { width: 1200px; height: 405px; position: relative; }
.picScroll-left .bd { width: 1200px; height: 405px; overflow: hidden; }
.picScroll-left .bd li { width: 260px; height: 405px; float: left; margin-right: 53px; }
.picScroll-left .bd li img { width: 100%; }
.picScroll-left .bd li:last-child { margin-right: 0; }
.picScroll-left .bd li .box2Txt { width: 100%; height: 189px; border-radius: 0 0 10px 10px; background: #fff; padding: 0 24px; }
.picScroll-left .bd li .box2Txt h4 { text-align: center; line-height: 72px; font-size: 26px; color: #56595b; }
.picScroll-left .bd li .box2Txt p { color: #686c6f; line-height: 20px; font-size: 14px; }
.picScroll-left .hd { width: 78px; height: 28px; position: absolute; bottom: -34px; right: -1px; }
.picScroll-left .hd a { display: block; float: left; margin-right: 1px; background: #98caec; width: 38px; height: 100%; position: relative; }
.picScroll-left .hd a:hover { background: #009bdf; }
.picScroll-left .hd a:before { width: 12px; height: 14px; background-position: -366px -28px; z-index: 10; top: 7px; left: 11px; content: ""; position: absolute; }
.picScroll-left .hd .prev:before { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
.box2 .linkBtn { top: 658px; left: 471px; }
.box2 .linkBtn em { background-position: -142px -140px; }
/*box3*/
.box3 { height: 800px; }
.box3 h3 { width: 432px; color: #1255a7; margin: 95px 0 145px 424px; }
.box3 h3:after, .box4 h3:after { background-position: -358px -242px; width: 323px; height: 35px; right: -344px; }
.box3 .box3Pic { width: 677px; height: 800px; left: -167px; top: 0; position: absolute; z-index: -1; }
.box3 .box3Txt { width: 595px; height: 295px; position: relative; background: #eee; margin-left: 515px; box-shadow: 0 0 12px rgba(194,194,194,.6); }
.box3 .box3Txt .hd { width: 100%; height: 126px; position: absolute; left: 0; top: -82px; }
.box3 .box3Txt .hd li { width: 126px; height: 126px; overflow: hidden; border-radius: 50%; margin: 0 35px; float: left; background: url("../images/box3_2.jpg")no-repeat center; border: 1px solid #fff; box-shadow: 0 0 0 63px rgba(81,100,183,.6) inset; transition: all 0.3s; }
.box3 .box3Txt .hd li.on { box-shadow: 0 0 0 0 rgba(81,100,183,.6) inset; }
.box3 .box3Txt .hd li:nth-of-type(2) { background: url("../images/box3_3.jpg")no-repeat center; }
.box3 .box3Txt .hd li:nth-of-type(3) { background: url("../images/box3_4.jpg")no-repeat center; }
.box3 .box3Txt .bd, .box3 .box3Txt .bd li { width: 595px; height: 295px; overflow: hidden; }
.box3 .box3Txt .bd li p { font-size: 16px; line-height: 24px; padding-left: 40px; }
.box3 .box3Txt .bd li p:nth-of-type(1) { margin-top: 75px; }
.box3 .box3Txt .bd li p span { font-size: 17px; font-weight: 600; }
.box3 .box3Txt .linkBtn { width: 156px; height: 40px; top: 224px; left: 220px; }
.box3 .box3Txt .linkBtn em { width: 72px; height: 18px; background-position: -152px -108px; }
.box3 .info { width: 100%; position: absolute; left: 0; top: 645px; height: 155px; z-index: 20; }
.box3 .info li { width: 296px; height: 155px; float: left; margin-right: 5px; cursor: pointer; }
.box3 .info li:last-child { margin-right: 0; }
.flipper { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; perspective: 800px; }
.front, .back { background: #f7af0f; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; backface-visibility: hidden; }
.front dt { width: 66px; height: 66px; background-position: -475px -409px; float: left; margin: 45px 10px 0 30px; float: left; }
.box3 .info li:nth-of-type(2) .flipper .front dt { background-position: -562px -409px; }
.box3 .info li:nth-of-type(3) .flipper .front dt { background-position: -648px -409px; }
.box3 .info li:nth-of-type(4) .flipper .front dt { background-position: -732px -409px; }
.box3 .info li:nth-of-type(4) .flipper .back { padding-top: 25px; }
.front dd { width: 165px; float: left; padding-top: 40px; font-size: 24px; line-height: 36px; color: #fff; }
.back { padding: 35px 30px 0; font-size: 16px; color: #fff; }
.front { z-index: 1; }
.back { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }
.box3 .info li:hover .front { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); z-index: 0; }
.box3 .info li:hover .back { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); z-index: 1; }
/*box4*/
.box4 { height: 720px; background: #4c48a2; }
.box4 h3 { width: 340px; margin: 95px 0 50px 250px; color: #fff; }
.box4 h3:after { background-position: -10px -243px; }
.box4 .anli, .box4 .anli li { width: 723px; height: 315px; position: relative; margin: 0 auto; }
.box4 .anli .bd{height: 315px; overflow:hidden;} 
.prevB, .nextB { width: 75px; height: 75px; border-radius: 50%; background: rgba(32, 50, 129, .6); position: absolute; top: 120px; transition: all 0.3s; }
.prevB:hover, .nextB:hover { background: rgba(32, 50, 129, .8); }
.prevB { left: -165px; }
.nextB { right: -165px; }
.prevB:before, .nextB:before { position: absolute; width: 27px; height: 51px; content: ""; background-position: -438px -12px; z-index: 10; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.prevB:before { -webkit-transform: translate(-50%, -50%) rotate(-180deg); transform: translate(-50%, -50%) rotate(-180deg); }
.box4 .linkBtn, .box8 .linkBtn { background-color: transparent; border: 2px solid #fff; top: 563px; left: 470px; }
.box4 .linkBtn:hover, .box8 .linkBtn:hover { border-color: #ff6005; }
.box4 .linkBtn:after, .box8 .linkBtn:after { background: #ff6005; }
/*box5*/
.box5 { height: 720px; }
.box5 h3 { width: 195px; margin: 95px 0 55px 450px; color: #1255a7; }
.box5 h3:after { background-position: -13px -297px; width: 500px; height: 35px; right: -530px; }
.box5 .box5Pic { width: 437px; height: 701px; position: absolute; top: 19px; left: -50px; z-index: 10; }
.box5 p { font-size: 16px; color: #70777c; width: 777px; margin: 0 0 40px 424px; }
.box5 ul { width: 693px; height: 214px; margin-left: 467px; }
.box5 ul li { width: 328px; height: 214px; float: left; margin-right: 37px; }
.box5 ul li:last-child { margin-right: 0; }
.box5 .linkBtn { top: 570px; left: 682px; }
.box5 .linkBtn em { background-position: -13px -99px; }
/*box6*/
.box6 { height: 450px; background: url("../images/box6bg.jpg"); overflow: hidden; }
.box6 h3 { width: 193px; color: #fff; margin: 75px 0 34px 328px; }
.box6 h3:after { width: 323px; height: 35px; background-position: -12px -347px; right: -345px; }
.box6 p { font-size: 16px; color: #fff; margin-bottom: 35px; }
/*box7*/
.box7 { height: 789px; }
.box7 h3 { width: 198px; margin: 95px 0 25px 312px; color: #1255a7; }
.box7 h3:after { width: 359px; height: 35px; background-position: -11px -400px; right: -383px; }
.box7 p { font-size: 16px; color: #70777c; margin-bottom: 40px; }
.box7 dl { padding-left: 42px; }
.box7 dl dt { width: 558px; height: 450px; float: left; position: relative; background: url("../images/box7_1.jpg")no-repeat center; }
.box7 dl dt .linkBtn { left: 0; top: 383px; }
.box7 dl dd { float: right; width: 556px; position: relative; }
.box7 dl dd:before { content: ""; position: absolute; height: 533px; width: 2px; top: 0; left: 32px; background: #5988da; }
.box7 dl dd p { height: 66px; line-height: 66px; padding-left: 182px; margin-bottom: 30px; position: relative; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; }
.box7 dl dd p.on { padding-left: 82px; opacity: 1; }
.box7 dl dd p:nth-of-type(3) { line-height: 32px; }
.box7 dl dd p:before { content: attr(data-text); position: absolute; background: #5988da; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; font-size: 23px; text-align: center; line-height: 66px; left: 0; top: 0; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: scale(0); transform: scale(0) }
.box7 dl dd p.on:before { -webkit-transform: scale(1); transform: scale(1) }
/*box8*/
.box8 { height: 800px; background: url("../images/box8bg.jpg"); }
.box8 h3 { width: 288px; margin: 75px 0 55px 300px; color: #fff; }
.box8 h3:after { width: 287px; height: 35px; background-position: -13px -452px; right: -310px; }
.box8 ul { width: 1200px; height: 440px; }
.box8 ul li { width: 358px; height: 440px; border-radius: 9px; background: #fff; float: left; margin-right: 63px; padding: 55px 0 0 18px; }
.box8 ul li:last-child { margin-right: 0; }
.box8 ul li p { font-size: 14px; color: #56595b; position: relative; }
.box8 ul li p:nth-of-type(1) { width: 197px; border: 1px solid #cbcbcb; border-radius: 7px; padding: 5px 10px; margin-left: 70px; background: #eee; }
.box8 ul li p:nth-of-type(2) { padding: 12px; border-radius: 7px; border: 1px solid #5dc5f4; background: #c8e2fa; width: 246px; margin-top: 50px; }
.box8 ul li p:before { width: 128px; height: 66px; background-position: -381px -95px; content: ""; position: absolute; top: -26px; left: -80px; }
.box8 ul li p:nth-of-type(2):before { width: 128px; height: 66px; background-position: -537px -96px; left: 200px; }
.box8 ul li p:after { position: absolute; content: ""; width: 6px; height: 6px; background: url("../images/box8_2.jpg")no-repeat center; top: 10px; left: -6px; }
.box8 ul li p:nth-of-type(2):after { background: url("../images/box8_3.jpg")no-repeat center; left: 244px; }
.box8 ul li:nth-of-type(2) p:nth-of-type(1), .box8 ul li:nth-of-type(3) p:nth-of-type(1) { width: 250px; }
.box8 .linkBtn { top: 663px; }