.trans { transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .thover { transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .tform { transition: transform 0.5s ease-out; -webkit-transition: -webkit-transform 0.5s ease-out; -moz-transition: -moz-transform 0.5s ease-out; -o-transition: -o-transform 0.5s ease-out; -ms-transition: -ms-transform 0.5s ease-out; } .tformh { -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); -o-transform: rotateZ(360deg); -ms-transform: rotateZ(360deg); transform: rotateZ(360deg); } .title { height: 114px; padding-top: 80px; font-size: 25px; line-height: 54px; color: #282828; text-align: center; } .title p { height: 60px; font-size: 50px; font-weight: bold; line-height: 60px; } .title span { display: block; color: #999999; } .title2 { font-size: 38px; line-height: 50px; } .title2 p { height: 50px; } .title2 span { display: block; height: 18px; font-size: 12px; line-height: 18px; } /*-------------------------------------*/ .banner { height: 620px; width: 100%; position: relative; overflow: hidden; } .ban_img .content { color: #fff; position: relative; } .ban_img .ban-item { height: 620px; position: relative; cursor: pointer; } .ban_img .ban-item img { /*width: 1920px;*/ height: 620px; display: block; position: absolute; top: 0; left: 50%; margin-left: -960px; } .ban-item1 .ban-txt1 { position: absolute; top: 200px; z-index: 999; left: 65px; border: 2px solid #fff; font-size: 24px; padding: 0 20px; line-height: 37px; letter-spacing: 3px; } .ban-item1 .ban-txt2 { position: absolute; top: 262px; left: 65px; z-index: 999; height: 76px; font-family: Source Han Sans; font-size: 64px; line-height: 76px; } .ban-item1 .ban-txt3 { position: absolute; top: 347px; left: 65px; z-index: 999; height: 74px; font-size: 68px; font-weight: bold; line-height: 74px; } .ban-ban { position: absolute; z-index: 999; min-width: 142px; height: 42px; border-radius: 21px; text-align: center; font-size: 14px; line-height: 42px; background-color: #005baf; } .ban-ban a { display: block; color: #fff; } .ban-item2 .ban-txt1 { position: absolute; top: 221px; left: 27px; z-index: 999; height: 76px; font-size: 54px; font-weight: bold; letter-spacing: 3px; line-height: 76px; } .ban-item2 .ban-txt2 { position: absolute; top: 313px; left: 25px; font-size: 21px; z-index: 999; letter-spacing: 1px; } .ban-item2 .ban-ban { top: 376px; left: 26px; } .ban-item3 .ban-txt1 { position: absolute; top: 216px; left: 32px; z-index: 999; font-weight: bold; height: 76px; font-size: 54px; letter-spacing: 3px; line-height: 76px; } .ban-item3 .ban-txt2 { position: absolute; top: 313px; left: 28px; font-size: 21px; z-index: 999; letter-spacing: 1px; } .ban-item3 .ban-ban { top: 376px; left: 32px; } .ban-item4 .ban-txt1 { position: absolute; top: 204px; left: 42px; z-index: 999; height: 60px; font-size: 55px; line-height: 60px; letter-spacing: 3px; } .ban-item4 .ban-txt2 { position: absolute; top: 275px; left: 38px; height: 70px; z-index: 999; font-size: 59px; line-height: 70px; } .ban-item4 .ban-txt3 { position: absolute; top: 365px; z-index: 999; left: 40px; border: 2px solid #fff; font-size: 20px; padding: 0 4px; line-height: 39px; letter-spacing: 0px; } .ban_img li { height: 620px; position: relative; } .ban_img li img { width: 1920px; height: 620px; display: block; position: absolute; top: 0; left: 50%; margin-left: -960px; } .ban_nav { position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center; } .ban_nav li { display: inline-block; margin: 0 15px; width: 40px; height: 10px; background-color: #b0b0b0; cursor: pointer; border-radius: 5px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .ban_nav li.cur { width: 80px; background-color: #2580e6; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; } /*-------------------------------------*/ .specific { height: 365px; } .specific dl { margin-top: 100px; float: left; width: 25%; height: 146px; border-right: 1px solid #ebebeb; margin-right: -1px; text-align: center; color: #333; } .specific dl.sp-clear { border-right: 0; } .specific dl:hover { color: #174378; } .specific dl dt { padding-top: 18px; height: 60px; font-size: 24px; line-height: 24px; color: #174378; margin-bottom: 14px; } .specific dl dt span { color: #174378; font-size: 60px; font-family: arial; line-height: 60px; vertical-align: auto; } .specific dl dd { height: 30px; font-size: 18px; line-height: 30px; } /*-------------------------------------*/ .guide { height: 546px; padding-top: 162px; background-image: url('../images/guide-bg.jpg'); background-size: 1920px 704px; background-repeat: no-repeat; background-position: center top; } .guide .title2 { height: 76px; color: #333; border-bottom: 1px solid #ECECEC; margin-bottom: 18px; } .guide .title2 span { text-transform: uppercase; letter-spacing: 3px; color: #b3b3b3; } .guide-info { height: 320px; border-bottom: 1px solid #ECECEC; position: relative; margin-bottom: 34px; } .guide-fl { width: 447px; } .guide-txt { font-size: 16px; color: #666; line-height: 46px; } .guide-txt p { padding-left: 30px; background: url(../images/guide-icon.png) no-repeat left center; } .guide-fr { position: absolute; top: 0; right: -13px; } .guide-ul li { float: left; width: 15%; margin-right: 2%; } .guide-ul li img{ display:block; width: 100%; } .guide-ul li:nth-last-child(1) { margin-right: 0; } /*-------------------------------------*/ .product { height: 1280px; } .product .title { padding-top: 92px; margin-bottom: 48px; } .pro-fl { width: 23.5%; } .pro-title { height: 90px; background: #174378; text-align: center; color: #fff; } .pro-title p { padding-top: 18px; height: 32px; font-size: 24px; font-weight: bold; line-height: 32px; } .pro-title span { display: block; height: 24px; font-size: 14px; font-family: arial; line-height: 24px; text-transform: uppercase; background-image: url('../images/pro-icon4.png'); background-size: 101px 1px; background-repeat: no-repeat; background-position: center center; } .pro-link { height: auto; padding: 15px 16px 0; background-color: #f5f5f5; } .pro-link .pro-more, .pro-link p { height: 78px; background-image: url('../images/pic-icon3.png'); background-size: 21px 103px; background-repeat: no-repeat; background-position: 210px 30px; font-size: 18px; font-weight: bold; line-height: 77px; } .pro-link .pro-more a, .pro-link p a { display: block; color: #333; border-bottom: 1px solid #dbdbdb; padding-left: 20px; } .pro-link .pro-more:hover, .pro-link p:hover, .pro-link .pro-more.on, .pro-link p.on { background-position-y: -53px; background-color: #fff; padding: 0 10px; } .pro-link .pro-more:hover a, .pro-link p:hover a, .pro-link .pro-more.on a, .pro-link p.on a { color: #174378; padding-left: 10px; } .pro-link ul { background: #fff; padding: 14px 24px; font-size: 14px; line-height: 40px; color: #666; } .pro-link ul a { display: block; color: #666; } .pro-link ul li:hover a { color: #174378; } .pro-tel { height: 151px; padding-left: 83px; background-image: url('../images/pro-tel.jpg'); background-size: 282px 151px; background-repeat: no-repeat; background-position: center top; color: #fff; } .pro-tel span { display: block; height: 22px; font-size: 14px; line-height: 22px; padding-top: 46px; } .pro-tel p { height: 32px; font-family: arial; font-size: 28px; line-height: 32px; font-weight: bold; } .pro-fr { width: 75%; } .pro-nav { height: 45px; border-bottom: 1px solid #d9d9d9; font-size: 20px; line-height: 24px; font-weight: bold; color: #666; margin-bottom: 25px; } .pro-nav a { color: #666; } .pro-nav span { display: inline-block; height: 24px; padding-left: 48px; background-size: 28px 81px; background-repeat: no-repeat; background-position: 6px 3px; } .pro-nav span:hover, .pro-nav span.cur { background-position-y: -56px; color: #174378; cursor: pointer; } .pro-nav span:hover a, .pro-nav span.cur a { color: #174378; } .pro-list p { width: 26.7%; float: left; margin-right: 9.3%; text-align: center; border-bottom: 1px solid #dadada; margin-bottom: -1px; position: relative; z-index: 33; overflow: hidden; } .pro-list p img { width: 83%; display: block; box-sizing: border-box; border: 1px solid #dadada; width:240px; height:240px; } .pro-list p.pr-clear { margin-right: 0; } .pro-list p span { display: block; height: 56px; font-size: 16px; line-height: 56px; width:240px; color: #333; } .pro-list p:hover { border-color: #174378; } .pro-list p:hover img { border-color: #174378; } .pro-list p:hover span { color: #174378; } .pro-list p:hover i { top: 0; } .pro-list p i { width: 292px; height: 219px; display: block; position: absolute; top: -240px; left: 0; background-image: url('../images/pro-bg2.png'); background-size: 292px 219px; background-repeat: no-repeat; background-position: center top; } .pro-list .pro-icon1 { width: 100%; height: 1px; background-color: #dadada; margin-bottom: 27px; } /*-------------------------------------*/ .ban1 { height: 300px; background-image: url('../images/ban1.jpg'); background-size: 1920px 300px; background-repeat: no-repeat; background-position: center top; text-align: center; color: #fff; } .ban1 .title2 { padding-top: 88px; margin-bottom: 25px; } .ban1 .title2 span { height: 24px; font-family: arial; line-height: 24px; letter-spacing: 2px; color: #ffffff; opacity: 0.2; } .ban1-tel { height: 34px; } .ban1-tel span { display: inline-block; width: 140px; height: 30px; background-color: #174378; border-radius: 14px; text-align: center; vertical-align: bottom; } .ban1-tel span a { display: block; font-size: 14px; line-height: 30px; color: #fff; } .ban1-tel p { display: inline-block; margin-right: 32px; vertical-align: bottom; padding-left: 46px; font-size: 14px; line-height: 20px; background-image: url('../images/ban1-tel.png'); background-size: 34px 34px; background-repeat: no-repeat; background-position: left top; } .ban1-tel p em { font-size: 26px; line-height: 34px; font-weight: bold; } /*-------------------------------------*/ .ys { height: 1050px; } .ys .title { padding-top: 92px; margin-bottom: 54px; } .ys .ys-con { height: 750px; background-image: url('../images/ys-bg.png'); background-size: 1198px 493px; background-repeat: no-repeat; background-position: center 98px; } .ys .ys-img { text-align: center; padding-top: 58px; } .ys .ys-img img { max-width: 1200px; } .ys .ys-li { position: absolute; width: 370px; } .ys .ys-li p { padding-left: 48px; background: url(../images/ys-icon7.png) no-repeat 22px 10px; font-size: 14px; line-height: 28px; color: #4d4948; } .ys .ys-title { height: 100px; font-size: 24px; line-height: 36px; color: #333; padding-left: 94px; background-repeat: no-repeat; background-position: left top; } .ys .ys-li1 { top: 0; left: 0; } .ys .ys-li1 .ys-title { background-image: url(../images/ys-icon1.png); } .ys .ys-li2 { top: 0; right: 0; } .ys .ys-li2 .ys-title { background-image: url(../images/ys-icon2.png); } .ys .ys-li3 { top: 245px; left: 0; } .ys .ys-li3 .ys-title { background-image: url(../images/ys-icon3.png); } .ys .ys-li4 { top: 245px; right: 0; } .ys .ys-li4 .ys-title { background-image: url(../images/ys-icon4.png); } .ys .ys-li5 { top: 490px; left: 0; } .ys .ys-li5 .ys-title { background-image: url(../images/ys-icon5.png); } .ys .ys-li6 { top: 490px; right: 0; } .ys .ys-li6 .ys-title { background-image: url(../images/ys-icon6.png); } /*-------------------------------------*/ .title { padding-top: 20px; margin-bottom: 24px; height: 104px; text-align: center; } .title p { height: 54px; font-weight: bold; font-size: 48px; line-height: 54px; color: #3c3c3c; } .title span { display: block; height: 45px; font-size: 24px; line-height: 45px; color: #414141; } /*-------------------------------------*/ .case { padding-bottom: 50px; } .case-nav { height: 40px; font-size: 0; line-height: 0; text-align: center; margin-bottom: 25px; } .case-nav span { display: inline-block; height: 36px; margin: 0 11px; padding: 0 24px; font-size: 16px; line-height: 36px; color: #174378; border: solid 2px #005baf; border-radius: 20px; } .case-nav span a { display: block; color: #174378; } .case-nav span.cur, .case-nav span:hover { background-color: #174378; color: #fff; } .case-nav span.cur a, .case-nav span:hover a { color: #fff; } .case-ul { height: auto !important; } .case-con { position: relative; } .case-con .case-next { position: absolute; top: -65px; right: 50%; margin-right: -316px; width: 87px; height: 35px; background: url(../images/next-icon2.png) no-repeat left 10px; cursor: pointer; } .case-con .case-next:hover { background-position-y: -18px; } .case-con .case-prev { position: absolute; top: -65px; left: 50%; margin-left: -316px; width: 87px; height: 35px; background: url(../images/prev-icon2.png) no-repeat left 10px; cursor: pointer; } .case-con .case-prev:hover { background-position-y: -18px; } .case-con dl { width: 33.3%; float: left; } .case-con dl img { display: block; width: 100%; /*-webkit-filter: grayscale(100%);*/ /*-moz-filter: grayscale(100%);*/ /*-ms-filter: grayscale(100%);*/ /*-o-filter: grayscale(100%);*/ /*filter: grayscale(100%);*/ filter: gray; } .case-con dl:hover img { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%); filter: grayscale(0%); filter: gray; } .case-con dl:hover .case-link { background-color: #174378; } .case-con dl:hover .case-link a { color: #fff; } .case-con dd { position: relative; z-index: 33; margin: -120px 10.3% 0; background: rgba(0, 0, 0, 0.7); color: #fff; } .case-con .case-title { margin: 0 10%; height: 35px; margin-bottom: 8px; padding-top: 18px; font-size: 22px; line-height: 35px; overflow: hidden; } .case-con .case-title a { color: #fff; } .case-con .case-desc { margin: 0 10%; height: 44px; font-size: 14px; line-height: 22px; margin-bottom: 15px; overflow: hidden; } .case-con .case-link { padding: 0 10%; height: 66px; background-color: #f0f1f6; font-size: 16px; line-height: 66px; } .case-con .case-link a { display: block; color: #999999; background-image: url('../images/case-icon1.png'); background-size: 33px 102px; background-repeat: no-repeat; background-position: right 16px; } /*-------------------------------------*/ .cust { height: 688px; background-color: #f1f1f1; } .cust .title { padding-top: 92px; margin-bottom: 46px; } .cust li { width: 19.83%; float: left; border: solid 1px #e5e5e5; margin: 0 -1px -1px 0; } .cust li img { display: block; width: 100%; } /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ /*-------------------------------------*/ .news { height: 777px; } .news .title { padding-top: 92px; margin-bottom: 35px; } .news-more { height: 60px; border-bottom: 1px solid #ebebeb; font-size: 24px; line-height: 60px; color: #333333; position: relative; margin-bottom: 20px; } .news-more em a { color: #333333; } .news-more span { display: inline-block; float: right; width: 24px; height: 60px; background-image: url('../images/news-icon3.png'); background-size: 24px 24px; background-repeat: no-repeat; background-position: right center; } .news-more span a { display: block; width: 24px; height: 60px; } .dynamic { width: 46.66%; } .dynamic dl { height: 306px; margin-bottom: 14px; } .dynamic dl dt { margin-bottom: 10px; } .dynamic dl dt img { display: block; width: 100%; } .dynamic li { height: 32px; font-size: 14px; line-height: 30px; color: #333333; padding-left: 30px; background-image: url('../images/news-icon4.png'); background-size: 10px 10px; background-repeat: no-repeat; background-position: 4px center; } .dynamic li a { display: block; height: 32px; color: #333333; } .dynamic span { float: right; font-size: 14px; color: #aaaaaa; } .news-name { height: 36px; font-size: 18px; line-height: 36px; overflow: hidden; } .news-name span { float: right; color: #aaaaaa; } .news-name a { color: #333; } .news-desc { height: 48px; font-size: 14px; line-height: 24px; color: #666666; overflow: hidden; margin-bottom: 18px; } .news-link { width: 140px; height: 30px; font-size: 14px; line-height: 30px; background-color: #174378; border-radius: 14px; text-align: center; } .news-link a { color: #fff; display: block; } .faq { width: 46.66%; float: right; } .faq .news-more span { background-image: url('../images/news-icon2.png'); } .faq-con { font-size: 14px; line-height: 24px; color: #aaaaaa; } .faq-con dl { padding-left: 60px; margin-bottom: 26px; position: relative; background:url('/resource/images/6cf8ddda81224ba2bfbb4187e466a719_2.png') no-repeat 35px 10px; background-size: 15px; } .zx_pro{text-align:right; font-size:18px; font-weight:bold;} .zx_pro a{color:#016db6;} .zx_pro a:hover{ color:#666;} .faq-con dt { height: 36px; font-size: 18px; line-height: 36px; color: #666; margin-bottom: 8px; width: 500px; text-overflow: ellipsis; word-wrap: break-word; white-space: nowrap; overflow: hidden; } .faq-con dt a { color: #666; } .faq-con dd { padding-bottom: 23px; border-bottom: dashed 1px #ebebeb; } /*--------------------*/ .about { height: 608px; background-color: #f1f1f1; } .about .title { padding-top: 68px; margin-bottom: 35px; } .about-con { background-color: #fff; } .about-txt { width: 42%; padding: 53px 0 0 80px; } .about-title { height: 60px; margin-bottom: 18px; } .about-title p { height: 34px; font-size: 30px; font-weight: bold; color: #3c3c3c; line-height: 34px; } .about-title p a { color: #3c3c3c; } .about-title span { display: block; height: 20px; font-size: 12px; line-height: 20px; color: #bcbcbc; } .about-desc { height: 140px; font-size: 14px; line-height: 28px; color: #797979; margin-bottom: 22px; } .about-link { width: 140px; height: 30px; background-color: #174378; border-radius: 14px; font-size: 14px; line-height: 30px; text-align: center; } .about-link a { display: block; color: #fff; } .about-pic { width: 500px; } .about-pic img { display: block; width: 100%; } /*------------------------------------------*/ .show { height: 476px; } .show-nav { height: 38px; font-size: 18px; color: #ccc; padding-top: 100px; border-bottom: 1px solid #ebebeb; margin-bottom: 27px; } .show-nav em { float: right; width: 24px; } .show-nav em img { display: block; width: 24px; height: 24px; } .show-nav span { display: inline-block; text-align: center; color: #666; cursor: pointer; width: 130px; height: 20px; line-height: 20px; border-left: 3px solid #fff; margin-right: 1px; } .show-nav span a { color: #000000; } .show-nav span:hover, .show-nav span.cur { border-left-color: #174378; color: #174378; } .show-nav span:hover a, .show-nav span.cur a { color: #174378; } .show-con li { width: 24.5%; margin-right: 7px; float: left; } .show-con li img { width: 100%; display: block; } .show-con li span { display: block; height: 50px; font-size: 14px; line-height: 50px; color: #1d1d1d; text-align: center; } .show-arrows { width: 46px; height: 46px; top: 96px; cursor: pointer; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; } .show-arrows:hover { transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; background-position-x: -55px; } .show-prev { background-image: url('../images/prev-icon1.png'); background-size: 101px 46px; background-repeat: no-repeat; background-position: 0 0; left: -66px; } .show-next { right: -66px; background-image: url('../images/next-icon1.png'); background-size: 101px 46px; background-repeat: no-repeat; background-position: 0 0; } /*---------------------*/ .links { background-color: #242424; font-size: 13px; color: #6c6c6c; } .links a { color: #6c6c6c; margin-left: 15px; } /*---------------------*/