@charset "utf-8";
/*-----------------------------------------------------header-----------------------------------------------------*/
.header { width: 100%; margin: 0 auto;  position: fixed; top: 0; z-index: 999;}
.header .nav-bar { width: 1200px; margin: 0 auto; overflow: hidden; }
/*.header .nav-bar .logo { width: 312px; height: 60px; display: block; margin-top:12px; background:url("../images/logo-white.png") no-repeat; }*/
.header .nav-bar .logo { width: 312px; height: 64px; margin-top:12px;}
.header .nav-bar .logo img.white { display:block; }
.header .nav-bar .logo img.blue { display:none; }
.header .nav-bar .logo a { display: inline-block; }
.header .nav-bar .logo a .txt { margin: 22px 0 0 12px;  padding:0 0 0 20px; position:relative; }
.header .nav-bar .logo a .txt::before { content: " ";  position: absolute; top: 0;  left: 0; width:1px;  height: 100%; background: rgba(255,255,255,0.5);  z-index: 2;  }
.header .nav-bar .logo a .txt p { font-size:15px; color:#fff; line-height:100%; font-style:italic;  }
.header .nav-bar .logo a .txt p:first-child { margin-bottom:10px; letter-spacing:2px; }
.nav { width: 838px; }
.nav ul.nav-ul { width: 100%; }
.nav li.nav-sub { position: relative; float: left; margin-left: 25.5px; }
.nav li.nav-sub a.tit { color: #fff; display: block; font-size: 15px; height: 94px; line-height:94px; padding: 0 2px; text-align: center; transition: color 0.5s ease 0s; }
.nav li.nav-sub a.tit:hover { color: #fff; }
.nav-line { background: #fff; bottom: 0; height: 2px; left: 0; width: 0; position: absolute; z-index: 99; }
.navigation-down { position: absolute; top: 0; left: 0px; width: 100%; }
.navigation-down .nav-down-menu { width: 100%; margin: 0; background: url("../images/bg_shadow.png") repeat; position: absolute; top: 94px; z-index: 999; }
.navigation-down .nav-down-menu .navigation-down-inner { margin: auto; width: 1200px; position: relative }
.navigation-down-inner ul { padding-left: 360px; }
.navigation-down-inner ul li { float: left; position:relative; padding:0 24px; background: url("../images/bg_line.png") no-repeat scroll right center;}
.navigation-down-inner ul li a {  color: #fff; display: inline-block; line-height: 50px; height:50px; text-align: center; font-size: 14px; }
.navigation-down-inner ul li a.last { background: none; }
.nav-line-d { background: #fff; bottom: 0; height: 1px; left: 0; width: 0; position: absolute; z-index: 99; }
.fixed-style { background: #fff; box-shadow:0px 0px 3px #ccc;-webkit-box-shadow:0px 0px 3px #ccc; animation: fadeIn 0.3s 0.1s ease both; -webkit-animation: fadeIn 0.3s 0.1s ease both; }
/*.fixed-style .nav-bar .logo { background:url("../images/logo.png") no-repeat;  animation: fadeIn 0.3s 0.1s ease both; -webkit-animation: fadeIn 0.3s 0.1s ease both;  }*/
.fixed-style .nav li.nav-sub a.tit { color:#666; animation: fadeIn 0.3s 0.1s ease both; -webkit-animation: fadeIn 0.3s 0.1s ease both; }
.fixed-style .nav li.nav-sub a.tit:hover {color:#1088d5;}
.fixed-style .nav-line { background: #1088d5; }
.fixed-style .nav-bar .logo img.white { display:none; }
.fixed-style .nav-bar .logo img.blue { display:block; }
.fixed-style .nav-bar .logo a .txt::before { background:#ccc;  }
.fixed-style .nav-bar .logo a .txt p { color:#333; }


/*-----------------------------------------------------banner-----------------------------------------------------*/
.banner { width: 100%; height: 800px; overflow: hidden; }
.animation { position: relative; width: 100%; height:800px; margin: 0 auto; overflow: hidden; background:#fff; }
.scroll-down { position: absolute; left : 50%; bottom:120px; width: 33px; height: 72px; margin-left: -17px; text-align: center; cursor: pointer; }
.scroll-down .por { position: relative; z-index:99;}
.scroll-down span.fi { width: 5px; height: 5px; background: url(../images/ico-down1.png) no-repeat; margin: 0 0 6px 14px; animation: scrollDown 1.5s infinite 1.6s; -webkit-animation: scrollDown 1.5s infinite 1.6s; }
.scroll-down span.se { width: 7px; height: 7px; background: url(../images/ico-down2.png) no-repeat; margin: 0 0 6px 13px; animation: scrollDown 1.5s infinite 1.4s; -webkit-animation: scrollDown 1.5s infinite 1.4s; }
.scroll-down span.th { width: 9px; height: 9px; background: url(../images/ico-down3.png) no-repeat; margin: 0 0 6px 12px; animation: scrollDown 1.5s infinite 1.2s; -webkit-animation: scrollDown 1.5s infinite 1.2s; }
.scroll-down span.fo { width: 33px; height: 33px; background: url(../images/ico-down4.png) no-repeat; animation: scrollDown 1.5s infinite 1s; -webkit-animation: scrollDown 1.5s infinite 1s; }
@keyframes scrollDown {
 0% {
 opacity: 1;
 top: 0;
}
 100% {
 opacity: 0;
 top: 10px
}
}
.layer { display:block; z-index:99;}
.layer-s {z-index:998!important; }
.pic1 { background: #0172d2; }
.pic2 { background: #1088d5; }
.pic3 { background: #42b36e url("../images/c-c.png") no-repeat; }
.pic4 { background: #36aef2 url("../images/d-d.png") no-repeat;}
.pic5 { background: #421aab url("../images/e-e.png") no-repeat; }
.pic6 { background: #42b36e url("../images/x-x.png") no-repeat; }
.pic618 { background: #42b36e url("../images/tm11.jpg") no-repeat; }
.picw { background: #000236 url("../images/w-w.png") no-repeat; }
.animation ul { width: 100%; position: absolute; left: 0; top: 0; z-index: 1; }
.animation ul li { width: 100%; height: 800px; position: absolute; top: 0; left: 0; display: none; }
.animation ul li:first-child { display: block; }
.animation ul li>div { width: 100%; height: 800px; display: block; background-position: top center; background-repeat: repeat; background-size: cover; }
.banner-btn { position: absolute; top: 50%; margin-top: -30px; width: 100%; z-index: 3; }
.banner-btn .w1000 { position: relative; }
.banner-btn a { position: absolute; width: 30px; height: 59px; z-index: 99; display: none; }
.banner-btn a.prev { background: url("../images/b_left.png"); left: 2%; }
.banner-btn a.next { background: url("../images/b_right.png"); right: 2%; }
.animation ol { z-index: 2; width: 100%; text-align: center; position: absolute; bottom: 20px; }
.animation ol li { width: 10px; height: 10px; margin: 0 4px; display: inline-block; text-align: center; border-radius: 100px; cursor: pointer; border: 1px solid #fff; background:url("../images/pli-dark.png") repeat;; }
.animation ol li.active { background: #fff; }
.animation ul li .wrap { position: relative; width: 1200px; height: 800px; margin: 0 auto; }
.animation ul li .wrap img { position: absolute; }

/*-----------------------------------------------------banner1-----------------------------------------------------*/
.cb .a-1 { left: 50%; margin-left: -740px; top: 600px; z-index: 9; }
.cb .a-1 { animation: fadeInUp 0.8s 0.2s ease both; -webkit-animation: fadeInUp 0.8s 0.2s ease both; }
.cb .a-2 { left: 50%; margin-left: -360px; top: 220px; z-index: 99; }
.cb .a-2 { animation: zoomInDown 1.2s 0.4s ease both; -webkit-animation: zoomInDown 1.2s 0.4s ease both; }
.cb .a-3 { left: 50%; margin-left: -280px; top: 500px; z-index: 99; }
.cb .a-3 { animation: flipInY 1s 1.5s ease both; -webkit-animation: flipInY 1s 1.5s ease both; }
.cb .a-4 { position: absolute; width: 1920px; height: 660px; z-index: 1; left: 50%; margin-left: -960px; top: 0; }
#canvas-particle {  height: 100%;  }
.cb .a-4 { animation: fadeIn 1s 1.5s ease both; -webkit-animation: fadeIn 1s 1.5s ease both; }

/*-----------------------------------------------------banner2-----------------------------------------------------*/
.cb .b-2 { left: 114px; bottom: 0; z-index: 99; }
.cb .b-2 { animation: zoomInDown 1s 0.2s ease both; -webkit-animation: zoomInDown 1s 0.2s ease both; }
.cb .b-4 { right: 248px; bottom: 0; z-index: 99; }
.cb .b-4 { animation: zoomInDown 1s 0.4s ease both; -webkit-animation: zoomInDown 1s 0.4s ease both; }
.cb .b-1 { left: 0; bottom: 0; z-index: 99; }
.cb .b-1 { animation: zoomInDown 1s 0.6s ease both; -webkit-animation: zoomInDown 1s 0.6s ease both; }
.cb .b-5 { right: 0; bottom: 0; z-index: 99; }
.cb .b-5 { animation: zoomInDown 1s 0.8s ease both; -webkit-animation: zoomInDown 1s 0.8s ease both; }
.cb .b-3 { left: 340px; bottom: 0; z-index: 99; }
.cb .b-3 { animation: zoomInDown 1s 1s ease both; -webkit-animation: zoomInDown 1s 1s ease both; }
.cb .b-b { left: 50%; margin-left: -960px; top: 260px; z-index: 1; }
.cb .b-b { animation: fadeIn 1s 1s ease both; -webkit-animation: fadeIn 1s 1s ease both; }
.cb .b-7 { left: 0px; top: 280px; z-index: 99; }
.cb .b-7 { animation: rotateInDownLeft 1s 1s ease both; -webkit-animation: rotateInDownLeft 1s 1s ease both; }
.cb .b-8 { left: 0px; top: 350px; z-index: 99; }
.cb .b-8 { animation: lightSpeedIn 1.2s 1.4s ease both; -webkit-animation: lightSpeedIn 1.2s 1.4s ease both; }
.cb .b-9 { left: 0px; top: 460px; z-index: 99; }
.cb .b-9 { animation: zoomInUp 1.5s 1.6s ease both; -webkit-animation: zoomInUp 1.5s 1.6s ease both; }
.cb .b-6 { right: 50px; top: 266px; z-index: 99; }
.cb .b-6 { animation: bounceInUp 1s 2s ease both; -webkit-animation: bounceInUp 1s 2s ease both; }
.cb .b-10 { left: 650px; top: 200px; z-index: 9; }
.cb .b-10 { animation: moveLeft 15s 2s infinite linear normal both; -webkit-animation: moveLeft 15s 2s infinite linear normal both; }
.cb .b-11 { right: 0px; top:300px; z-index: 9; }
.cb .b-11 { animation: moveRight 20s 2.4s infinite linear normal both; -webkit-animation: moveRight 20s 2.4s infinite linear normal both; }
.cb .b-12 { right: 0px; top: 400px; z-index: 9; }
.cb .b-12 { animation: moveLeft2 20s 2.8s infinite linear normal both; -webkit-animation: moveLeft2 20s 2.8s infinite linear normal both; }
.cb .b-13 { right: 0px; top: 520px; z-index: 9; }
.cb .b-13 { animation: moveLeft3 20s 2.4s infinite linear normal both; -webkit-animation: moveLeft3 20s 2.4s infinite linear normal both; }
.cb .b-14 { right: 0px; bottom: 56px; z-index: 9; }
.cb .b-14 { animation: moveRight2 15s 2.8s infinite linear normal both; -webkit-animation: moveRight2 15s 2.8s infinite linear normal both; }
.cb .b-15 { right: 0px; bottom: 40px; z-index: 9; }
.cb .b-15 { animation: moveRight3 15s 2.4s infinite linear normal both; -webkit-animation: moveRight3 15s 2.4s infinite linear normal both; }
.cb .b-16 { right: 0px; bottom: 30px; z-index: 9; }
.cb .b-16 { animation: moveLeft4 10s 2.8s infinite linear normal both; -webkit-animation: moveLeft4 10s 2.8s infinite linear normal both; }

/*-----------------------------------------------------banner3-----------------------------------------------------*/
.cb .c-c { left: 50%; margin-left: -960px; top: 0px; z-index: 1; }
.cb .c-c { animation: fadeIn 1s 0.2s ease both; -webkit-animation: fadeIn 1s 0.2s ease both; }
.cb .c-1 { left: 0; top: 340px; z-index: 99; }
.cb .c-1 { animation: zoomInDown 1s 0.2s ease both; -webkit-animation: zoomInDown 1s 0.2s ease both; }
.cb .c-2 { left: 70px; top: 278px; z-index: 99; }
.cb .c-2 { animation: bounceInLeft 1s 0.6s ease both; -webkit-animation: bounceInLeft 1s 0.6s ease both; }
.cb .c-3 { left: 450px; top: 340px; z-index: 99; }
.cb .c-3 { animation: bounceInRight 1s 1s ease both; -webkit-animation: bounceInRight 1s 1s ease both; }
.cb .c-4 { right: 180px; top: 280px; z-index: 99; }
.cb .c-4 { animation: rotateInDownRight 1s 1.4s ease both; -webkit-animation: rotateInDownRight 1s 1.4s ease both; }
.cb .c-5 { right: 0px; top: 350px; z-index: 99; }
.cb .c-5 { animation: lightSpeedIn 1.2s 1.2s ease both; -webkit-animation: lightSpeedIn 1.2s 1.6s ease both; }
.cb .c-6 { right: 292px; top: 460px; z-index: 99; }
.cb .c-6 { animation: zoomInUp 1.5s 1.6s ease both; -webkit-animation: zoomInUp 1.5s 1.6s ease both; }

/*-----------------------------------------------------banner4-----------------------------------------------------*/
.cb .d-d { left: 50%; margin-left: -960px; top: 0px; z-index: 1; }
.cb .d-d { animation: fadeIn 1s 0.2s ease both; -webkit-animation: fadeIn 1s 0.2s ease both; }
.cb .d-1 { left: 50%; margin-left: -275px; top: 200px; z-index: 99; }
.cb .d-1 { animation: zoomInDown 1s 0.2s ease both; -webkit-animation: zoomInDown 1s 0.2s ease both; }
.cb .d-2 { left: 50%; margin-left: -439px; top: 340px; z-index: 99; }
.cb .d-2 { animation: flipInY 1.2s 1s ease both; -webkit-animation: flipInY 1.2s 1s ease both; }
.cb .d-3 { left: 50%; margin-left: -75px; top: 520px; z-index: 99; }
.cb .d-3 { animation: bounceInUp 1s 1.2s ease both; -webkit-animation: bounceInUp 1s 1.2s ease both; }

/*-----------------------------------------------------banner5-----------------------------------------------------*/
.cb .e-e { left: 50%; margin-left: -960px; top: 0px; z-index: 1; }
.cb .e-e { animation: fadeIn 1s 0.2s ease both; -webkit-animation: fadeIn 1s 0.2s ease both; }
.cb .e-1 { left: 50%; margin-left: -268px; top: 200px; z-index: 99; }
.cb .e-1 { animation: rotateIn 1s 0.2s ease both; -webkit-animation: rotateIn 1s 0.2s ease both; }
.cb .e-2 { left: 50%; margin-left: -460px; top: 340px; z-index: 99; }
.cb .e-2 { animation: flipInX 1.2s 1s ease both; -webkit-animation: flipInX 1.2s 1s ease both; }
.cb .e-3 { left: 50%; margin-left: -75px; top: 520px; z-index: 99; }
.cb .e-3 { animation: bounceInUp 1s 1.2s ease both; -webkit-animation: bounceInUp 1s 1.2s ease both; }
.cb .e-4 { left: 50%; margin-left: -794px; top: 260px; z-index: 99; }
.cb .e-4 { animation: fadeIn 1s 0.4s ease both; -webkit-animation: fadeIn 1s 0.4s ease both; }
.cb .e-5 { left: 50%; margin-left: -800px; top: 100px; z-index: 9; }
.cb .e-5 { animation: fadeIn 1s 0.6s ease both; -webkit-animation: fadeIn 1s 0.6s ease both; }
.cb .e-stars { position: absolute; width: 1920px; height: 660px; z-index: 9; left: 50%; margin-left: -960px; top: 0; }
.cb .e-stars { animation: fadeIn 1s 1.5s ease both; -webkit-animation: fadeIn 1s 1.5s ease both; }

/*-----------------------------------------------------bannerOA-----------------------------------------------------*/
.cb .w-w { left: 50%; margin-left: -960px; top: 260px; z-index: 1; }
.cb .w-w { animation: fadeIn 0.5s 0.5s ease both; -webkit-animation: fadeIn 0.5s 0.5s ease both; }
.cb .w-7 { left: 0px; top: 280px; z-index: 99; }
.cb .w-7 { animation: rotateInDownLeft 0.5s 0.5s ease both; -webkit-animation: rotateInDownLeft 0.5s 0.5s ease both; }
.cb .w-8 { left: 0px; top: 350px; z-index: 99; }
.cb .w-8 { animation: lightSpeedIn 0.7s 0.9s ease both; -webkit-animation: lightSpeedIn 0.7s 0.9s ease both; }
.cb .w-9 { left: 0px; top: 460px; z-index: 99; }
.cb .w-9 { animation: zoomInUp 1s 1.1s ease both; -webkit-animation: zoomInUp 1s 1.1s ease both; }
.cb .w-6 { right: 50px; top: 266px; z-index: 99; }
.cb .w-6 { animation: bounceInUp 0.5s 1.8s ease both; -webkit-animation: bounceInUp 0.5s 1.8s ease both; }

/*-----------------------------------------------------政务banner-----------------------------------------------------*/
.cb .x-x { left: 50%; margin-left: -960px; top: 0px; z-index: 1; }
.cb .x-x { animation: fadeIn 1s 0.2s ease both; -webkit-animation: fadeIn 1s 0.2s ease both; }
.cb .x-1 { left: 40px; top: 270px; z-index: 99; }
.cb .x-1 { animation: zoomInDown 1s 0.2s ease both; -webkit-animation: zoomInDown 1s 0.2s ease both; }
.cb .x-2 { left: 70px; top: 278px; z-index: 99; }
.cb .x-2 { animation: bounceInLeft 1s 0.6s ease both; -webkit-animation: bounceInLeft 1s 0.6s ease both; }
.cb .x-3 { left: 450px; top: 340px; z-index: 99; }
.cb .x-3 { animation: bounceInRight 1s 1s ease both; -webkit-animation: bounceInRight 1s 1s ease both; }
.cb .x-4 { right: 202px; top: 280px; z-index: 99; }
.cb .x-4 { animation: rotateInDownRight 1s 1.4s ease both; -webkit-animation: rotateInDownRight 1s 1.4s ease both; }
.cb .x-5 { right: 5px; top: 350px; z-index: 99; }
.cb .x-5 { animation: lightSpeedIn 1.2s 1.2s ease both; -webkit-animation: lightSpeedIn 1.2s 1.6s ease both; }
.cb .x-6 { right: 292px; top: 460px; z-index: 99; }
.cb .x-6 { animation: zoomInUp 1.5s 1.6s ease both; -webkit-animation: zoomInUp 1.5s 1.6s ease both; }
#canv { width: 100%; height: 660px; }

/*-----------------------------------------------------notice-----------------------------------------------------*/
.notice { width: 100%; height: 40px; overflow: hidden; background: #fff08b; }
.notice-info { width: 1200px; height: 40px; margin: 0 auto; background: url("../images/ico-notice.png") left center no-repeat; }
.txtScroll-top { overflow: hidden; position: relative; width: 90%; float: left; }
.txtScroll-top .bd { padding-left: 40px; padding-top: 2px; }
.txtScroll-top .infoList li { height: 38px; line-height: 36px; }
.txtScroll-top .infoList li a { color: #ff7e00; line-height: 36px; }
.txtScroll-top .infoList li .title { float: left; }
.txtScroll-top .infoList li .date { float: left; padding-left: 20px; font-family:Arial;  line-height: 38px; }
.news-more { width: 5%; float: right; text-align: right; }
.news-more a { color: #ff7e00; line-height: 40px; }

/*-----------------------------------------------------product-----------------------------------------------------*/
.product { width: 100%;  padding-top:60px; background:#fff;}
.common-title { width: 1200px; margin: 0 auto; text-align:center; }
.common-title h1 { font-size:30px; font-weight:normal; color:#666;}
.common-title  p { font-size:14px; font-family:Arial; color:#ccc; text-transform:uppercase; padding:6px 0 2px 0;}
.common-title  span {font-size:16px;color:#666; }
.product-info { width: 1200px; margin: 0 auto;  padding:50px 0 80px 0;}
/*1*/
.pul {width:100%;}
.pul li {width:280px; height:260px; float:left;overflow:hidden; }
.pul li { background:#00cc99 url("../images/pli-dark.png") no-repeat; color:#fff;}
.pul li .plia { display:block; text-align:center; margin:36px 0 14px 0; color:#fff;}
.pul li .plia i { height:85px; display:block;}
.pul li .plia h3 {font-size:20px;  font-weight:normal; padding-top:18px;}
.pul li p.desc { width:212px; margin:0 auto; font-size:14px; line-height:180%;  padding-bottom:34px;}
.pul li.pli-1:hover { background:#00cc99  url("../images/pli-1-bg.jpg") no-repeat;  }
.pul li:hover i {animation:tada 1s 0s ease both; -webkit-animation:tada 1s 0s ease both;}
/*.pul li p.desc {animation:fadeIn 0.2s 0.2s ease both; -webkit-animation:fadeIn 0.2s 0.2s ease both;  }
.pul li:hover p.desc { animation:fadeOutDown 0.2s 0s ease both; -webkit-animation:fadeOutDown 0.2s 0s ease both;}
.pul li .btn-group {animation:fadeOutDown 0.2s 0s ease both; -webkit-animation:fadeOutDown 0.2s 0s ease both; }
.pul li:hover .btn-group {animation:fadeInUp 0.2s 0.2s ease both; -webkit-animation:fadeInUp 0.3s 0.2s ease both; }*/
.pul li .btn-g1 {margin-top:0;}
/*.pul li:hover .btn-g1 {margin-top:-72px;}*/
.btn-g1 { text-align:center;}
.btn-g1 a {display: inline-block; color:#fff; width:100px; height:32px; line-height:30px; font-size:14px;border-radius:4px; -webkit-border-radius:4px;border:1px solid #ccc; margin:0 8px; margin-bottom:10px;}
.btn-g1 a:hover { background:#fff; color:#666; border:1px solid #fff; }
.pul li, .pul .btn-group,.pul li p.desc, .btn-group a {transition:all 0.5s ease;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;}
/*2*/
.pul li.pli-2 { margin-left:26px; background:#1088d5 url("../images/pli-dark.png") no-repeat; }
.pul li.pli-2:hover { background:#1088d5  url("../images/pli-2-bg.jpg") no-repeat;  }
.pul li .btn-g2 {margin-top:0;}
/*.pul li:hover .btn-g2 {margin-top:-82px;}*/
.btn-g2 { text-align:center;}
.btn-g2 a {display: inline-block; color:#fff; width:100px; height:26px; line-height:26px; font-size:12px;border-radius:4px; -webkit-border-radius:4px;border:1px solid #ccc; margin:0 8px;  margin-bottom:10px;}
.btn-g2 a:hover { background:#fff; color:#666; border:1px solid #fff;}
/*3*/
.pul li.pli-3 { margin-left:26px; background:#f05a25 url("../images/pli-dark.png") no-repeat;}
.pul li.pli-3:hover { background:#f05a25  url("../images/pli-3-bg.jpg") no-repeat;  }
.pul li .btn-g3 {margin-top:0;}
/*.pul li:hover .btn-g3 {margin-top:-82px;}*/
.btn-g3 { text-align:center;}
.btn-g3 a {display: inline-block; color:#fff; width:120px; height:26px; line-height:26px; font-size:12px;border-radius:4px; -webkit-border-radius:4px;border:1px solid #ccc; margin:0 6px;  margin-bottom:10px;}
.btn-g3 a:hover { background:#fff; color:#666; border:1px solid #fff;}
/*4*/
.pul li.pli-4 { margin-left:27px; background:#10be51 url("../images/pli-dark.png") no-repeat;}
.pul li.pli-4:hover { background:#10be51  url("../images/pli-4-bg.jpg") no-repeat;  }
.pul li .btn-g4 {margin-top:0;}
/*.pul li:hover .btn-g4 {margin-top:-82px;}*/
.btn-g4 { text-align:center;}
.btn-g4 a {display: inline-block; color:#fff; width:74px; height:26px; line-height:26px; font-size:12px;border-radius:4px; -webkit-border-radius:4px;border:1px solid #ccc; margin:0 6px;  margin-bottom:10px;}
.btn-g4 a:hover { background:#fff; color:#666; border:1px solid #fff;}

/*-----------------------------------------------------case-----------------------------------------------------*/
.case { width: 100%;  padding:60px 0 80px 0; background:#f2f2f2;}
.case-info{ overflow:hidden; position:relative;  width:1230px; margin:0 auto; padding-top:50px; }
.case-info .hd{ overflow:hidden;  height:36px; background:#f4f4f4; margin-top:10px; }
.case-info .hd ol { text-align:center; }
.case-info .hd ol li {display:inline-block;background:#fff; margin:0 6px;}
.case-info .hd .prev ,.case-info .hd .next ,.case-info .hd .pro-more{ width:36px; height:36px; display:block; overflow:hidden;cursor:pointer; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;  }
.case-info .hd .prev { background: #fff url("../images/works_arr.png") no-repeat -4px -7px; }
.case-info .hd .prev:hover{background:#1088d5 url("../images/works_arr.png") no-repeat -56px -7px;}
.case-info .hd .next { background: #fff url("../images/works_arr.png") no-repeat -63px -57px;}
.case-info .hd .next:hover{background:#1088d5 url("../images/works_arr.png") no-repeat -10px -57px;}
.case-info .hd .pro-more { background: #fff url("../images/works_more.png") no-repeat center -57px;}
.case-info .hd .pro-more:hover {background:#1088d5 url("../images/works_more.png") no-repeat center -7px;}
.case-info .bd ul{ overflow:hidden; zoom:1;  margin:0 15px;}
.case-info .bd ul li { width:380px;  float:left; _display:inline; overflow:hidden; text-align:center;  margin-left:30px; margin-bottom:30px;}
.case-info .bd ul li .pic{ text-align:center; position:relative; width:380px; height:220px;  overflow:hidden;}
.case-info .bd ul li .pic .cate { position:absolute; top:160px; right:0; z-index:99;  height:30px; line-height:30px; background:url("../images/cate-bg.png") left top no-repeat; color:#fff; font-size:12px; text-align:right; padding:0 16px 0 20px;}
.case-info .bd ul li .pic img.pic-img { width:380px; height:220px; display:block; position:absolute; z-index:9; left:50%; margin-left:-190px; top:50%; margin-top:-110px;}
.child-image-icon { transform:scale(0);-webkit-transform:scale(0);transition-duration: .3s;-webkit-transition-duration:.3s; opacity:0; filter:alpha(opacity=0);  width:96px; height:96px;position:absolute;top:0px;left:0px;right:0px;bottom:0px;
margin:auto;background:url(../images/case-bg.png) no-repeat center center; z-index:99;}
.child-image-icon img { transform:scale(0);-webkit-transform:scale(0);transition-duration: .3s;-webkit-transition-duration:.3s;position:absolute;width:38px; height:38px;top:0px;left:0px;right:0px;bottom:0px;margin:auto;
opacity:0; filter:alpha(opacity=0);}
.case-info .bd ul li:hover .child-image-icon { transition-delay:.1s;-webkit-transition-delay:.1s;opacity:1;filter:alpha(opacity=100);  transform:scale(1);-webkit-transform:scale(1); }
.case-info .bd ul li:hover .child-image-icon img {transition-delay:.2s;-webkit-transition-delay:.2s; opacity:1;filter:alpha(opacity=100);  transform:scale(1);-webkit-transform:scale(1);}
.pic-img-bg { width:100%; height:100%;position:absolute; z-index:9; background:#000; opacity:0; filter:alpha(opacity=0); }
.case-info .bd ul li .info {width:100%; height:80px; overflow:hidden; background:#fff; position:relative;}
.case-info .tag {   float:left; text-align:left; color:#999;position:absolute; z-index:99; left:20px; top:12px; }
.case-info .title {   float:left;text-align:left; color:#333; font-size:16px; position:absolute; z-index:99; left:20px; top:40px;}
.case-info .label { float:left;text-align:left; position:absolute; z-index:99; right:20px; top:16px;  } 
.case-info .label i { height:18px;line-height:18px; font-style:normal; color:#999; margin-left:10px;}
.case-info .label i img { vertical-align:bottom;  }

/*-----------------------------------------------------advantage-----------------------------------------------------*/
.advantage { width: 100%;  padding:60px 0 40px 0; background:#fff;}
.ad_info { overflow:hidden;  width:1200px; margin:0 auto; padding-top:50px; }
.ad_info ul li { width:550px; height:90px; float:left; position:relative; margin-bottom:40px;}
.ad_info ul li i {width:90px; height:90px; position:absolute; top:0; left:0; z-index:9; border-radius:90px; -webkit-border-radius:90px;}
.ad_info ul li:hover i img  { animation: spinAround 2s linear infinite;}
.ad_info ul li .ad_i1 { background:#8d80ef; }
.ad_info ul li .ad_i2 { background:#ff4c88; }
.ad_info ul li .ad_i3 { background:#ffc147; }
.ad_info ul li .ad_i4 { background:#6aa4d0; }
.ad_info ul li .ad_i5 { background:#67aded; }
.ad_info ul li .ad_i6 { background:#ffa16e; }
.ad_info ul li .ad_i7 { background:#0dcc6d; }
.ad_info ul li .ad_i8 { background:#68c5b3; }
.ad_info ul li .ad_i9 { background:#8d80ef; }
.ad_info ul li .ad_i10 { background:#ff4c88; }
.ad_info ul li h1 { position:absolute; z-index:9; top:8px; left:112px; font-weight:normal; font-size:18px; color:#464646;}
.ad_info ul li p { position:absolute; z-index:9; top:38px; left:112px; line-height:24px; color:#999;}


/*-----------------------------------------------------about-----------------------------------------------------*/
.about { width: 100%;  padding:80px 0 100px 0; background: url("../images/body_bg.jpg") center top no-repeat; background-attachment:fixed;}
.about-title { width: 1200px; margin: 0 auto; text-align:center; color:#fff; }
.about-title p {font-size:24px; line-height:40px; color:#fff; }
.about-title p span { color:#ffc147; padding:0 6px; }
.about-txt { width:1200px; margin:0 auto;padding-top:40px;}
.about-txt p {width:100%; text-align:left;  color:#e2e2e2; line-height:26px;}
.about-num { width:1200px; margin:0 auto;padding-top:40px; }
.about-num ul { text-align:center;}
.about-num ul li { display:inline-block; margin:0 42px;}
.about-num ul li i { font-size:36px; color:#ffc147; }
.about-num ul li p { color:#fff; padding-top:4px;}


/*-----------------------------------------------------news-----------------------------------------------------*/
.news { width: 100%;  padding:60px 0 80px 0; background:#f2f2f2;}
.news-info { overflow:hidden;  width:1200px; margin:0 auto; padding-top:50px; }
.news-info .news-box {width:360px; float:left;}
.news-box1, .news-box2  {margin-right:60px;}
.news-title {width:100%; height:30px; padding-bottom:12px;  }
.news-title h1 { float:left; color:#333; font-weight:normal; font-size:18px;}
.news-title .news-more { float:right; color:#999;width:50px; display:inline-block;}
.news-title a:hover { color:#1088d5;}
.news-info .news-headline {width:360px; overflow:hidden; height:180px; position:relative;}
.news-info .news-headline p {width:100%; height:36px; line-height:36px; background:#1088d5; color:#fff; position:absolute; z-index:99; bottom:-36px; left:0; text-align:left; opacity:0; filter:alpha(opacity=0);} 
.news-info .news-headline p span { padding-left:16px;}
.news-box ul {width:330px; margin:0 auto; padding:18px 15px; background:#fff; }
.news-box ul li { color:#666; line-height:32px;  padding-left:12px; background:url("../images/news-dot.png") left center no-repeat; }
.news-box ul li a {color:#666;}
.news-box ul li a:hover  {color:#1088d5;}


/*-----------------------------------------------------partner-----------------------------------------------------*/
.partner { width: 100%;  padding:60px 0 80px 0; background:#fff;}
.partner-info {  width:1200px; margin:0 auto; padding-top:50px; }
.partner-info ul {width:1194px;border-top:1px solid #e1e1e1;border-left:1px solid #e1e1e1;}
.partner-info ul li { float:left;width:198px; height:122px; border-right:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1; transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;  }
.partner-info ul li:hover {box-shadow:0px 0px 20px #ccc;-webkit-box-shadow:0px 0px 20px #ccc;}
.partner-info ul li i {width:100%; height:100%; display:block;  transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out; }
.l1 { background:url(../images/ico-l1.png) center no-repeat;}
.l1:hover {background:url(../images/ico-l1-h.png) center no-repeat;}
.l2 { background:url(../images/ico-l2.png) center no-repeat;}
.l2:hover {background:url(../images/ico-l2-h.png) center no-repeat;}
.l3 { background:url(../images/ico-l3.png) center no-repeat;}
.l3:hover {background:url(../images/ico-l3-h.png) center no-repeat;}
.l4 { background:url(../images/ico-l4.png) center no-repeat;}
.l4:hover {background:url(../images/ico-l4-h.png) center no-repeat;}
.l5 { background:url(../images/ico-l5.png) center no-repeat;}
.l5:hover {background:url(../images/ico-l5-h.png) center no-repeat;}
.l6 { background:url(../images/ico-l6.png) center no-repeat;}
.l6:hover {background:url(../images/ico-l6-h.png) center no-repeat;}
.l7 { background:url(../images/ico-l7.png) center no-repeat;}
.l7:hover {background:url(../images/ico-l7-h.png) center no-repeat;}
.l8 { background:url(../images/ico-l8.png) center no-repeat;}
.l8:hover {background:url(../images/ico-l8-h.png) center no-repeat;}
.l9 { background:url(../images/ico-l9.png) center no-repeat;}
.l9:hover {background:url(../images/ico-l9-h.png) center no-repeat;}
.l10 { background:url(../images/ico-l10.png) center no-repeat;}
.l10:hover {background:url(../images/ico-l10-h.png) center no-repeat;}
.l11 { background:url(../images/ico-l11.png) center no-repeat;}
.l11:hover {background:url(../images/ico-l11-h.png) center no-repeat;}
.l12 { background:url(../images/ico-l12.png) center no-repeat;}
.l12:hover {background:url(../images/ico-l12-h.png) center no-repeat;}



/*-----------------------------------------------------kf-----------------------------------------------------*/
.side-pannel {position:fixed; width:50px; bottom:60px; right:20px; z-index:999; }
.side-bar>a {display:none; width:50px;height:50px;  position: relative; text-align: center; margin-bottom:10px;  cursor:pointer; float:left; border-radius:50%; background:#333;  
box-shadow:0 0 8px 0 rgba(0,0,0,.2);  -webkit-box-shadow:0 0 8px 0 rgba(0,0,0,.2); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;}
.side-bar>a:hover{ background:#222;}
.side-bar a.gotop:hover{ background:#222;}

.side-bar .dh{ width:50px;height:50px; position: relative; text-align: center; margin-bottom:10px;  display:block; cursor:pointer; float:left; display:block; border-radius:50%;  background:#333;  
box-shadow:0 0 8px 0 rgba(0,0,0,.2); transition:all .3s ease-out; }
.side-bar .dh:hover{ background:#222;}
.side-bar .dh i{ background:url(../images/side-01.png) no-repeat; width:23px; height:23px; display:block; margin:14px auto;}
.side-bar a.wx i{ background:url(../images/side-02.png) no-repeat; width:26px; height:22px; display:block; margin:14px auto;}
.side-bar a.gotop i{ background:url(../images/side-03.png) no-repeat; width:23px; height:13px; display:block; margin:17px auto;}
.side-bar .dh .hide{  width:226px;  position:absolute; left:-226px; top:-36px; z-index:9; }
.side-bar .dh .hied_con{ width:210px; background:#222; border-radius:4px; color:#fff;  padding:5px 0 15px 0;
box-shadow:0 0 8px 0 rgba(0,0,0,.2); -webkit-box-shadow:0 0 8px 0 rgba(0,0,0,.2); transition:width 0.3s ease-in-out; -webkit-transition:width 0.3s ease-in-out; display:none;}
.side-bar .dh:hover .hied_con{ display:block }
.side-bar .dh .hied_con:after { content:""; width:10px; height:10px; background:#222; position:absolute; right:11px; top:58px; transform:rotate(45deg);  -webkit-transform:rotate(45deg);}
.side-bar .dh .hide dl { width:180px; margin:0 auto; overflow:hidden; text-align:left; font-size:12px; margin-top:10px;}
.side-bar .dh .hide dl dt.title { margin-bottom:10px; font-size:14px;}
.side-bar .dh .hide dl dt.tel {margin-top:-6px;}
.side-bar .dh .hide dl dt a { color:#fff; font-family:Arial, sans-serif; font-size:18px; font-style:italic;  }
.side-bar .dh .hide dl dt a span {font-family:"微软雅黑";  font-style:normal; font-size:14px; padding-left:6px;}
 .theme-mask{z-index:10000;position:fixed; _position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.75;filter:alpha(opacity=75);-moz-opacity:0.75; display:none; }
.popover1{ width:360px; height:400px; z-index:100001; position:fixed; top:50%;left:50%; background:#fff; margin:-200px 0 0 -180px;   box-shadow:1px 1px 6px 3px rgba(0,0,0,.2); display:none; text-align:center;}
.popover1 dl { margin-top:60px; font-size:14px; color:#333; line-height:30px;}
.popover1 dl a { width:100px; height:36px; line-height:36px; background:#1088d5; color:#fff; display:inline-block; border-radius:4px; -webkit-border-radius:4px; font-size:14px; margin-top:10px; 
transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;}
.popover1 dl a:hover { background:#005ca1;}

/*-----------------------------------------------------初始化-----------------------------------------------------*/
.product .common-title, .pul li , .case .common-title, .case-info, .advantage .common-title, .ad_info ul li, .about-title , .about-txt, .about-num , .news .common-title, .news-box1, .news-box1, .news-box2, .news-box3,
.partner .common-title, .partner-info, .f-info , .f-copyright 
{opacity:0;filter:alpha(opacity=0);}

/*-----------------------------------------------------加载进度条-----------------------------------------------------*/
.fade { transition: all 300ms linear 700ms; -webkit-transition: all 300ms linear 700ms;  opacity: 1;  filter: alpha(opacity=100); }
.fade.out {opacity: 0;  filter: alpha(opacity=0); }