.wrap { width: 1400px; margin: 0 auto; } .layout { padding-top: 100px; overflow: hidden; } .header { background: #fff; padding: 22px 0; height: 100px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; position: relative; position: fixed; z-index: 111; left: 0; right: 0; top: 0; box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.2); } .header .logo { float: left; } .header .logo a { display: block; } .header .rt { float: right; } .header .rt .naver { float: left; margin-right: 20px; } .header .rt .naver li { float: left; width: 130px; text-align: center; } .header .rt .naver li h3 { position: relative; } .header .rt .naver li a { font-size: 16px; line-height: 50px; color: #000000; display: block; } .header .rt .naver li h3::before { content: ""; position: absolute; right: 0; top: 50%; z-index: 1; background: #636363; width: 1px; height: 12px; margin-top: -6px; } .header .rt .seach { float: left; border: 1px solid rgba(255, 255, 255, 0); border-radius: 30px; cursor: pointer; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; position: relative; } .header .rt .seach .t1 { width: 0; height: 42px; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-size: 18px; color: #000; background: none; position: absolute; right: 100%; top: 5px; z-index: 1; background: #f0f2f5; border: none; border-radius: 4px; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .header .rt .seach .btn { width: 30px; height: 48px; cursor: pointer; background: url(../images/a4.png) no-repeat center; border: none; border-radius: initial; display: block; } .header .rt .seach:hover .t1 { width: 800px; padding: 0 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .header .rt .ch { float: right; background: url(../images/a5.png) no-repeat left center; padding-left: 33px; margin-left: 10px; position: relative; z-index: 111; } .header .lags { position: relative; } .header .lags h3 { cursor: pointer; } .header .lags h3 span { font-size: 16px; line-height: 50px; color: #000; padding-right: 30px; background: url(../images/a6.png) no-repeat right center; display: inline-block; } .header .lags .ndl { position: absolute; top: 80%; left: -36px; right: -36px; z-index: 1; background: #fff; border-radius: 4px; width: 100px; padding: 5px 0 0; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 0 10px 0 rgba(80, 80, 80, 0.2); display: none; } .header .lags .ndl dd { font-size: 18px; line-height: 1.7; color: #202944; text-align: center; margin-bottom: 5px; cursor: pointer; } .header .lags .ndl dd:hover { color: #00a2e9; } .header .lags:hover .ndl { display: block; } .banner { height: 360px; } .banner .wrap { position: relative; height: 100%; } .banner .txt { position: absolute; left: 100px; top: 50%; z-index: 1; transform: translateY(-50%); -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); /* Firefox */ -webkit-transform: translateY(-50%); /* Safari 和 Chrome */ -o-transform: translateY(-50%); } .banner .txt h2 { font-size: 30px; line-height: 54px; color: #ffffff; position: relative; } .banner .txt h3 { font-size: 16px; line-height: 1.7; color: #fff; margin-top: 16px; } .banner .txt h2::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; z-index: 1; width: 53px; height: 3px; background: #fff; } .crumbs { border-bottom: 1px solid #efefef; } .crumbs .qmpad { display: flex; justify-content: space-between; align-items: center; } .crumbs h2 { font-size: 0; } .crumbs h2 a { display: inline-block; margin-right: 40px; } .crumbs h2 i { position: relative; display: block; font-size: 14px; line-height: 66px; color: #000000; } .qmpad { padding: 0 100px; } .crumbs h2 i::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0 auto; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; width: 0; height: 2px; background: #24a9ea; } .crumbs h2 i.on::before, .crumbs h2 i:hover::before { width: 100%; } .crumbs h2 i.on, .crumbs h2 i:hover { color: #24a9ea; } .crumbs dl { font-size: 0; } .crumbs dd { display: inline-block; } .crumbs dt { font-size: 14px; line-height: 66px; color: #b9b9b9; padding-left: 24px; background: url(../images/b1.png) no-repeat left center; display: inline-block; } .crumbs dd span, .crumbs dd a { font-size: 14px; line-height: 66px; color: #b9b9b9; display: block; } .crumbs dd a:hover, .crumbs dd.on a { color: #000000; } .crumbs dd span { margin: 0 8px; } .footer { background: #02296e; padding: 34px 0 56px; } .footer .hd .lt { float: left; } .footer .hd .rt { float: right; } .footer .hd .lt li { float: left; margin-right: 44px; } .footer .hd .lt dd a, .footer .hd .lt li a { font-size: 14px; line-height: 1.7; color: #fff; display: block; } .footer .hd .lt dd { float: left; margin-right: 20px; } .footer .hd .lt p { font-size: 14px; line-height: 1.7; color: #fff; margin-top: 8px; } .footer .hd .lt ul { margin-bottom: 34px; } .footer .hd .rt li { float: left; margin-right: 30px; } .footer .hd .rt li:last-child { margin-right: 0; } .footer .hd .rt li .pic { width: 86px; height: 86px; overflow: hidden; } .footer .hd .rt li .pic img { width: 100%; height: 100%; display: block; object-fit: cover; } .footer .hd .rt li h4 { font-size: 14px; line-height: 1.7; color: #fff; text-align: center; margin-top: 8px; } .footer .bd { border-top: 1px solid rgba(255, 255, 255, 0.2); margin-top: 24px; display: flex; justify-content: space-between; align-items: center; padding-top: 8px; } .footer .bd a { font-size: 14px; line-height: 1.7; color: #fff; display: block; } .tit { text-align: center; } .tit h2 { font-size: 32px; line-height: 1.8; color: #000000; position: relative; } .tit h2::before { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; z-index: 1; width: 77px; height: 4px; background: #00a2e9; margin: 0 auto; } .habout { padding: 40px 0 70px; } .habout .bd { margin-top: 58px; } .habout .bd .pic { float: right; width: calc(100% - 550px); } .habout .bd .text { float: left; width: 510px; } .habout .bd .text h1 { font-size: 24px; line-height: 1.7; color: #00a2e9; margin-bottom: 15px; } .habout .bd .text .del { font-size: 16px; line-height: 1.8; color: #525252; } .habout .bd .text .tdl { margin-top: 36px; } .habout .bd .text .tdl dl { display: flex; justify-content: space-between; align-items: center; } .habout .bd .text .tdl dd { width: 33%; } .habout .bd .text .tdl dd:nth-child(2) { width: 39%; } .habout .bd .text .tdl dd:nth-child(3) { text-align: right; width: 28%; } .habout .bd .text .tdl h4 { font-size: 48px; line-height: 1.7; color: #333333; font-weight: bold; } .habout .bd .text .tdl h6 { font-size: 14px; line-height: 1.7; color: #8f8b88; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .about .hd { padding: 40px 0; } .about .hd .swiperp { margin-top: 54px; position: relative; overflow: hidden; padding-bottom: 65px; } .about .hd .swiperp li { height: 250px; border-radius: 6px; overflow: hidden; } .about .hd .swiperp li img { width: 100%; height: 100%; display: block; object-fit: cover; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .about .hd .swiperp .spans { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; text-align: center; } .about .hd .swiperp .spans span { width: 14px; height: 8px; background: #e2e2e2; border-radius: 4px; opacity: 1; } .about .hd .swiperp .spans .swiper-pagination-bullet-active { background: #00a2e9; width: 34px; } .about .bd { padding: 48px 0 0; } .about .bd ul { margin-top: 50px; } .about .bd li { float: left; width: calc((100% - 66px)/3); margin-right: 32px; border-radius: 16px; background: #fff; box-shadow: 0 5px 10px 0 #dedede; padding: 14px 30px 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .about .bd li:nth-child(3n) { margin-right: 0; } .about .bd li .ico { height: 56px; } .about .bd li .ico img { height: 100%; display: block; object-fit: cover; margin: 0 auto; } .about .bd li h3 { font-size: 24px; line-height: 1.7; color: #00a2e9; margin: 7px 0; text-align: center; } .about .bd li p { font-size: 14px; line-height: 22px; height: 66px; overflow: hidden; color: #525252; } .about .ft { padding: 70px 0 160px; } .about .ft .ovs { padding: 0 50px; position: relative; margin-top: 110px; } .about .ft .ovs .ryswiper { overflow: hidden; } .about .ft .ovs .ryswiper img { max-width: 100%; display: block; margin: 0 auto; } .about .ft .ovs .prev, .about .ft .ovs .next { position: absolute; left: 0; top: 50%; z-index: 1; background: url(../images/a11.png) no-repeat center; width: 36px; height: 36px; cursor: pointer; margin-top: -18px; } .about .ft .ovs .next { transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */ -o-transform: rotate(180deg); left: auto; right: 0; } .product { padding: 70px 0; } .product .list li { margin-bottom: 64px; margin-right: 45px; background: #fff; box-shadow: 0 5px 10px 0 #ececec; border: 1px solid #ececec; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; float: left; margin-bottom: 64px; width: calc((100% - 92px)/3); } .product .list li:nth-child(3n) { margin-right: 0; } .product .list li a { display: block; } .product .list li .pic { background: #f0f0f0; position: relative; height: 260px; overflow: hidden; } .product .list li .pic img { width: 100%; height: 100%; display: block; margin: 0 auto; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .product .list li :hover .pic img{ transform:scale(1.1); -ms-transform:scale(1.1); /* IE 9 */ -moz-transform:scale(1.1); /* Firefox */ -webkit-transform:scale(1.1); /* Safari 和 Chrome */ -o-transform:scale(1.1); } .product .list li h5 { font-size: 18px; line-height: 64px; color: #0a0a0a; text-align: center; } .pages { padding-top: 10px; } .pages dl { font-size: 0; text-align: center; } .pages dd { display: inline-block; margin: 0 18px; font-size: 14px; line-height: 1.7; color: #000000; } .pages dd a { font-size: 14px; line-height: 1.7; color: #000000; display: block; } .pages dd a:hover, .pages dd.on a { color: #00a2e9; } .productdel { padding: 50px 0 140px; } .productdel .hd h1 { font-size: 24px; line-height: 2; color: #00a2e9; position: relative; } .productdel .hd h1::before { content: ""; position: absolute; left: 0; bottom: -6px; z-index: 1; width: 77px; height: 4px; background: #00a2e9; } .productdel .hd ul { margin-top: 50px; display: flex; flex-wrap: wrap; } .productdel .hd ul::after{ display: none; } .productdel .hd li { float: left; margin-right: 36px; border: 1px solid #ededed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: calc((100% - 50px)/3); margin: 0 24px 45px 0; box-shadow: 0 0 10px 0 rgba(80, 80, 80, 0.2); background: #fff; } .productdel .hd li:nth-child(3n){ margin-right: 0; } .productdel .hd li .pic { height: 270px; overflow: hidden; background: #f0f0f0; position: relative; } .productdel .hd li .pic img { width: 100%; height: 100%;object-fit: cover; display: block; margin: 0 auto; } .productdel .hd li .text { padding: 18px 26px 35px 16px; } .productdel .hd li h2 { font-size: 20px; line-height: 1.7; color: #00a2e9; margin-bottom: 14px; } .productdel .hd li p { font-size: 16px; line-height: 1.8; color: #747474; } .productdel .bd { margin-top: 90px; } .productdel .bd .tix { border-bottom: 1px solid #e5e5e5; padding-left: 40px; background: url(../images/qm2.png) no-repeat left center; font-size: 18px; line-height: 56px; color: #000000; } .productdel .bd .dels { padding-top: 10px; } .productdel .bd .dels h6 { font-size: 16px; line-height: 1.7; color: #747474; } .productdel .bd .dels h3 { font-size: 16px; line-height: 1.7; color: #000; margin-bottom: 5px; } .productdel .bd .dels p { font-size: 16px; line-height: 1.8; color: #747474; } .case { padding: 70px 0; } .case li { float: left; margin-bottom: 64px; width: calc((100% - 92px)/3); margin-right: 45px; background: #fff; box-shadow: 0 5px 10px 0 #ececec; border: 1px solid #ececec; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .case li:nth-child(3n) { margin-right: 0; } .case li h3 { font-size: 18px; line-height: 86px; color: #000000; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } .case li .pic { height: 226px; overflow: hidden; } .case li .pic img { width: 100%; height: 100%; display: block; object-fit: cover; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .news { padding: 80px 0 40px; } .news li { margin-bottom: 30px; box-shadow: 0 0 10px 0 rgba(80, 80, 80, 0.2); background: #fff; padding: 25px; } .news li:first-child { padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin-bottom: 45px; } .news li:first-child a { display: flex; justify-content: space-between; align-items: center; } .news li .pic { display: none; width: 610px; overflow: hidden; } .news li .pic img { width: 100%; height: 100%; display: block; object-fit: cover; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .news li:first-child .pic { display: block; } .news li:first-child .text { width: calc(100% - 645px); padding-right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .news li .text h2 { font-size: 18px; line-height: 1.7; color: #000000; margin-bottom: 8px; } .news li .text p { font-size: 14px; line-height: 24px; height: 48px; color: #4e4e4e; margin-bottom: 18px; overflow: hidden; } .news li .text i { float: left; display: block; font-size: 14px; line-height: 1.7; color: #b9b9b9; } .news li .text span { display: block; font-size: 14px; line-height: 1.7; color: #b7b7b8; background: url(../images/qm3.png) no-repeat left center; padding-left: 30px; float: right; } .news li:first-child .text i, .news li:first-child .text span { float: none; } .news li:first-child .text i { margin-bottom: 26px; } .news li .text { transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .newsdel { padding: 40px 0 140px; } .newsdel .hd { border-bottom: 2px solid #b9b9b9; text-align: center; padding-bottom: 12px; } .newsdel .hd h1 { font-size: 24px; line-height: 1.7; color: #00a2e9; margin-bottom: 12px; } .newsdel .hd h6 { font-size: 14px; line-height: 1.7; color: #b9b9b9; } .newsdel .dels { font-size: 16px; line-height: 1.8; color: #4e4e4e; padding: 15px 0 54px; } .newsdel .ftx { border-top: 1px solid #b9b9b9; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; } .newsdel .ftx a { display: block; font-size: 14px; line-height: 1.7; color: #000000; width: 48%; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .newsdel .ftx a:nth-child(2) { text-align: right; } .contact .hd { padding: 44px 0 74px; } .contact .hd li { float: left; width: calc((100% - 66px)/3); margin-right: 32px; box-shadow: 0 0 10px 0 rgba(80, 80, 80, 0.2); background: #fff; padding: 46px 0 0; height: 206px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; position: relative; top: 0; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .contact .hd li:hover { top: -10px; } .contact .hd li:nth-child(3n) { margin-right: 0; padding: 24px 0 0; } .contact .hd ul { margin-top: 50px; } .contact .hd li .ico { height: 60px; } .contact .hd li .ico img { height: 100%; display: block; object-fit: contain; margin: 0 auto; } .contact .hd li h5 { font-size: 16px; line-height: 1.7; color: #000000; text-align: center; margin: 10px 0; } .contact .hd li h6 { font-size: 20px; line-height: 1.7; color: #5b5b5b; text-align: center; } .contact .hd li:nth-child(3) h6 { font-size: 18px; } .anchorBL { display: none !important; } .map { height: 590px; } .contact .bd { padding: 50px 0 75px; } .contact .bd .pic { margin-top: 50px; } .contact .bd h5 { font-size: 20px; line-height: 1.7; color: #1c2e51; margin: 15px 0 0; } .contact .bd h2 { font-size: 36px; line-height: 1.4; color: #1c2e51; } .contact .bd ul { margin-top: 20px; } .contact .bd li { float: left; width: 280px; margin-right: 20px; } .contact .bd li:nth-child(3) { margin-right: 0; width: calc(100% - 602px); } .contact .bd li .txt { border: 1px solid #e2e2e2; height: 46px; padding: 0 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 14px; color: #000000; } .contact .bd li dd { float: left; width: calc((100% - 30px)/3); margin-right: 14px; } .contact .bd li dd:nth-child(3) { margin-right: 0; } .contact .bd li dd .t2 { border: 1px solid #e2e2e2; height: 46px; padding: 0 30px 0 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 14px; color: #000000; background: url(../images/e9.png) no-repeat right 12px center; } .contact .bd .t1 { border: 1px solid #e2e2e2; height: 115px; padding: 8px 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; resize: none; box-sizing: border-box; width: 100%; font-size: 14px; color: #000000; line-height: 1.7; margin-top: 12px; } .contact .bd h6 { font-size: 14px; line-height: 1.7; color: #ababab; padding-left: 14px; margin: 15px 0 30px; } .contact .bd .btn { width: 200px; height: 50px; line-height: 50px; border: none; border-radius: 4px; text-align: center; font-size: 18px; color: #fff; display: block; background: #00a2e9; } .contact .ft { padding: 50px 0 80px; background-size: cover !important; } .contact .ft ul { margin-top: 70px; } .contact .ft li { float: left; width: calc((100% - 32px)/2); margin-bottom: 40px; box-shadow: 0 0 10px 0 rgba(80, 80, 80, 0.2); background: #fff; padding: 30px 70px 40px 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;cursor: pointer; } .contact .ft li:nth-child(2n) { float: right; } .contact .ft li h3 { font-size: 20px; line-height: 1.7; color: #1c2e51; } .contact .ft li h4 { font-size: 16px; line-height: 1.7; color: #5b5b5b; margin: 10px 0 15px; } .contact .ft li h4 i { padding-left: 24px; background: url(../images/qm5.png) no-repeat left center; margin-right: 16px; } .contact .ft li h4 i:last-child { margin-right: 0; } .contact .ft li h5 { font-size: 16px; line-height: 1.7; color: #5b5b5b; margin-bottom: 10px; } .contact .ft li .del { font-size: 14px; line-height: 24px; height: 72px; color: #848484; overflow: hidden; } .hmap { margin: 10px 0; } .hcase { padding: 90px 0 60px; } .tit h4 { font-size: 18px; line-height: 1.7; color: #929191; text-align: center; margin-top: 20px; } .hcase .uls { margin-top: 70px; } .hcase .uls ul { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding-bottom: 24px; } .hcase .uls li { margin-bottom: 34px; width: calc((100% - 62px)/3); margin-right: 30px; height: 300px; overflow: hidden; position: relative; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .hcase .uls li:nth-child(5), .hcase .uls li:nth-child(2) { margin-right: 0; } .hcase .uls li:nth-child(1) { width: calc(100% - 30px - ((100% - 62px)/3)); } .hcase .uls li img { width: 100%; height: 100%; display: block; object-fit: cover; } .hcase .uls li .mk { position: absolute; left: 0; right: 0; z-index: 1; bottom: -110%; background: rgba(0, 165, 242, 0.8); top: 100%; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; height: 100%; } .hcase .uls li:hover .mk { bottom: 0; top: 0; } .hcase .uls li .mk h3 { position: absolute; left: 0; right: 0; top: 50%; z-index: 1; transform: translateY(-50%); -ms-transform: translateY(-50%); /* IE 9 */ -moz-transform: translateY(-50%); /* Firefox */ -webkit-transform: translateY(-50%); /* Safari 和 Chrome */ -o-transform: translateY(-50%); font-size: 26px; line-height: 1.7; color: #fff; text-align: center; } .more { margin: 0 auto; width: 134px; height: 42px; border: 1px solid #929191; border-radius: 4px; text-align: center; } .more a { display: block; font-size: 14px; line-height: 42px; color: #929191; } .hnews { padding: 60px 0; } .hnews .neswiper { margin-top: 40px; overflow: hidden; margin-bottom: 60px; position: relative; } .hnews .neswiper li a { display: block; } .hnews .neswiper li .pic { height: 410px; overflow: hidden; } .hnews .neswiper li img { width: 100%; height: 100%; display: block; object-fit: cover; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .hnews .neswiper li .txt h3 { font-size: 18px; line-height: 1.7; color: #000000; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hnews .neswiper li .txt { background: #f5f5f5; padding: 8px 16px 16px; } .hnews .neswiper li .txt h6 { font-size: 14px; line-height: 1.7; color: #8c8c8c; margin-top: 14px; } .hnews .neswiper .prev, .hnews .neswiper .next { background: url(../images/qm6.png) no-repeat center; width: 64px; height: 64px; border-radius: 50%; position: absolute; left: 30px; top: 50%; z-index: 234; margin-top: -32px; cursor: pointer; } .hnews .neswiper .next { transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */ -o-transform: rotate(180deg); left: auto; right: 30px; } .hporduct { padding: 60px 0 50px; } .hporduct ul { margin-top: 40px; margin-bottom: 54px; } .hporduct li { float: left; width: calc((100% - 98px)/4); margin-right: 32px; border: 1px solid #ececec; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; background: #fff; } .hporduct li:nth-child(4n) { margin-right: 0; } .hporduct li a { display: block; } .hporduct li .pic { background: #f0f0f0; height: 230px; position: relative; overflow: hidden; } .hporduct li .pic img { position: absolute; left: 0; right: 0; top: 50%; z-index: 1; width: 100%; height: 100%; transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); max-width: 100%; max-height: 100%; display: block; margin: 0 auto; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .hporduct li .tx { padding: 16px 15px; } .hporduct li .tx h4 { font-size: 14px; line-height: 1.7; color: #d1d1d1; } .hporduct li h3 { font-size: 16px; line-height: 1.7; color: #0a0a0a; margin-bottom: 26px; } .habout .qmswpic { float: right; width: calc(100% - 640px); overflow: hidden; position: relative; } .habout .bd .text1 { width: 600px; } .habout .qmswpic li { height: 522px; } .habout .qmswpic li img { width: 100%; height: 100%; display: block; object-fit: cover; } .habout .qmswpic .prev, .habout .qmswpic .next { position: absolute; right: 30px; top: 50%; z-index: 1; background: url(../images/a12.png) no-repeat center; width: 35px; height: 35px; cursor: pointer; margin-top: -18px; } .habout .qmswpic .prev{ transform: rotate(180deg); right: auto; left: 30px; } .gongg { border-bottom: 1px solid #efefef; } .gongg .wrap { display: flex; justify-content: space-between; align-items: center; } .gongg .h2 { font-size: 16px; line-height: 60px; color: #000000; padding-left: 28px; background: url(../images/a8.png) no-repeat left center; width: 106px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .gongg .h2::before { content: ""; position: absolute; right: 0; top: 50%; z-index: 1; width: 2px; height: 16px; background: #696969; margin-top: -7px; } .gongg .swipers { width: calc(100% - 120px); height: 60px; overflow: hidden; } .gongg .swipers .swiper-wrapper { /* transition-timing-function: linear !important; */ } .gongg .swipers h3 { font-size: 16px; line-height: 60px; color: #929191; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gongg .swipers i { font-size: 14px; line-height: 60px; color: #b9b9b9; } .gongg .swipers a { display: flex; justify-content: space-between; align-items: center; } .hbanner { height: 650px; position: relative; } .hbanner li .wrap { height: 100%; position: relative; } .hbanner .spans { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 1; text-align: center; } .hbanner .spans span { width: 12px; height: 12px; background: none; border: 1px solid #00a2e9; opacity: 1; margin: 0 17px !important; } .hbanner .spans .swiper-pagination-bullet-active { background: #00a2e9; } .hbanner .txt { position: absolute; left: 0; top: 30%; z-index: 1; } .hbanner .txt h4 { font-size: 28px; line-height: 40px; color: #fff; } .hbanner .txt h2 { font-size: 38px; line-height: 1.7; color: #fff; } .hbanner .txt .btn { width: 135px; line-height: 44px; border-radius: 4px; background: #126dee; font-size: 16px; color: #fff; text-align: center; display: block; margin-top: 20px; } .qmnli { position: absolute; left: 0; right: 0; top: 100%; background: rgba(0, 0, 0, 0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; z-index: 15; display: none; text-align: center; } .qmnli dl { font-size: 0; text-align: center; } .qmnli dd { display: inline-block; position: relative; margin: 0 20px; } .header .rt .naver li .qmnli dd a { font-size: 14px; line-height: 66px; color: #000000; } .qmnli dd::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; width: 0; height: 2px; background: #24a9ea; margin: 0 auto; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .qmnli dd:hover::before { width: 100%; } .header .rt .naver li .qmnli dd a:hover { color: #24a9ea; } .fixe { position: fixed; right: 0; top: 40%; z-index: 23; } .fixe li { margin-bottom: 5px; width: 45px; border-radius: 4px; background: #00a2e9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .fixe li a { font-size: 16px; line-height: 1.2; color: #fff; } .fixe li:nth-child(1) { height: auto; } .fixe li img { margin: 0 auto; display: block; } .fixe li.n2{ position: relative;transition:all 0.3s; -ms-transition:all 0.3s; /* IE 9 */ -moz-transition:all 0.3s; /* Firefox */ -webkit-transition:all 0.3s; /* Safari 和 Chrome */ -o-transition:all 0.3s; } .fixe li.n2 .ton{ position: absolute; top: 0;z-index: 1; right: -300px; opacity: 0; transition:all 0.3s; -ms-transition:all 0.3s; /* IE 9 */ -moz-transition:all 0.3s; /* Firefox */ -webkit-transition:all 0.3s; /* Safari 和 Chrome */ -o-transition:all 0.3s; background: #00a2e9; padding:0 20px;border-radius: 4px; bottom: 0;display: flex;align-items: center; } .fixe li.n2 p{ font-size:16px ; line-height: 45px; color: #fff; } .fixe li.n2:hover .ton{ right: 100%;opacity: 1; } .mask { position: fixed; left: 0; right: 0; top: 0; z-index: 223; bottom: 0; background: rgba(0, 0, 0, 0.5); display: none; } .qmtanchua { position: fixed; left: 0; right: 0; top: 10%; z-index: 224; width: 645px; background: #fff; border-radius: 14px; margin: 0 auto; overflow: hidden; display: none; } .qmtanchua .ts { display: flex; justify-content: space-between; align-items: center; background: #2a3837; height: 92px; } .qmtanchua .ts .logo { padding-left: 40px; } .qmtanchua .ts .gb { background: url(../images/a3.png) no-repeat center; width: 40px; height: 40px; margin-right: 24px; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; cursor: pointer; } .qmtanchua .ts .gb:hover { transform: rotate(180deg); -ms-transform: rotate(180deg); /* IE 9 */ -moz-transform: rotate(180deg); /* Firefox */ -webkit-transform: rotate(180deg); /* Safari 和 Chrome */ -o-transform: rotate(180deg); } .qmtanchua .box { padding: 20px 40px 40px; } .qmtanchua .box h5 { font-size: 20px; line-height: 1.7; color: #1c2e51; margin: 15px 0 0; } .qmtanchua .box h2 { font-size: 36px; line-height: 1.4; color: #1c2e51; } .qmtanchua .box ul { margin-top: 70px; } .qmtanchua .box li { float: left; width: calc((100% - 22px)/2); } .qmtanchua .box li:nth-child(2) { float: right; } .qmtanchua .box li .txt { border: 1px solid #e2e2e2; height: 46px; padding: 0 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; font-size: 14px; color: #000000; } .qmtanchua .box .t1 { border: 1px solid #e2e2e2; height: 115px; padding: 8px 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; resize: none; box-sizing: border-box; width: 100%; font-size: 14px; color: #000000; line-height: 1.7; margin-top: 12px; } .qmtanchua .box h6 { font-size: 14px; line-height: 1.7; color: #ababab; padding-left: 14px; margin: 12px 0 16px; } .qmtanchua .box .btn { width: 100%; height: 50px; line-height: 50px; border: none; border-radius: 4px; text-align: center; font-size: 18px; color: #fff; display: block; background: #00a2e9; cursor: pointer; } .about .hd .swiperp li img:hover { transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); /* Firefox */ -webkit-transform: scale(1.1); /* Safari 和 Chrome */ -o-transform: scale(1.1); } .about .bd li { position: relative; top: 0; transition: all 0.3s; -ms-transition: all 0.3s; /* IE 9 */ -moz-transition: all 0.3s; /* Firefox */ -webkit-transition: all 0.3s; /* Safari 和 Chrome */ -o-transition: all 0.3s; } .about .bd li:hover { top: -8px; } .hbanner a{ display: block; height: 100%; position: relative; } .about .ft .ovs .prev:hover, .about .ft .ovs .next:hover { background: url(../images/a11-1.png) no-repeat center; } .habout .qmswpic .prev:hover, .habout .qmswpic .next:hover { background: url(../images/a12_1.png) no-repeat center; } .product .list li:hover h5, .news li:hover h2, .case li:hover h3, .hnews .neswiper li:hover .txt h3, .hporduct li:hover .tx h4, .gongg .swipers a:hover h3, .gongg .swipers a:hover i, .header .rt .naver li a:hover { color: #00a2e9; } .contact .bd .btn { cursor: pointer; } .contact .bd .btn:hover, .hbanner .txt a:hover { background: #0b5dd1; } .more:hover { background: #126dee; border-color: #126dee; } .more:hover a { color: #fff; } .hporduct li:hover .pic img { transform: translateY(-50%) scale(1.1); -ms-transform: translateY(-50%) scale(1.1); /* IE 9 */ -moz-transform: translateY(-50%) scale(1.1); /* Firefox */ -webkit-transform: translateY(-50%) scale(1.1); /* Safari 和 Chrome */ -o-transform: translateY(-50%) scale(1.1); } .news li:hover .pic img, .case li:hover .pic img, .hnews .neswiper li:hover img { transform: scale(1.1); -ms-transform: scale(1.1); /* IE 9 */ -moz-transform: scale(1.1); /* Firefox */ -webkit-transform: scale(1.1); /* Safari 和 Chrome */ -o-transform: scale(1.1); } .joinwarp { width: 800px; padding: 50px 40px; border-radius: 10px; background-color: #fff; position: fixed; left: 0;right: 0; top: 20%; z-index: 226; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box;margin: 0 auto;display: none; } .joinwarp .jclose { display: block; width: 56px; height: 56px; position: absolute; right: -25px; top: -25px; font-size: 0; cursor: pointer; border-radius: 50%; background-color: #fff; background-image: url(../images/jclose.png); background-size: cover; background-repeat: no-repeat; -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.07); } .joinwarp .tit { border-bottom: 1px solid #e5e5e5; padding-bottom: 5px; } .joinwarp .tit .h2 { float: left; font-size: 24px; color: #333; } .joinwarp .tit .tips { font-size: 12px; color: #8c8c8c; margin-top: 8px; float: right; } .joinwarp .tit .tips span { background: url(../images/join_tips.png) left center no-repeat; padding-left: 17px; margin-right: 20px; } .joinwarp .tmain { margin: 30px 0px; font-size: 14px; color: #737373; max-height: 450px; overflow: auto; word-wrap: break-word;font-size: 14px;cursor: pointer; } .joinwarp .joupbtns { border-top: 1px solid #e5e5e5; padding-top: 30px; } .joinwarp .joupbtns .upbtn { width: 160px; height: 45px; line-height: 45px; margin-right: 10px; text-align: center; color: #fff; background-color: #0b5dd1; border-radius: 5px;display: block;cursor: pointer; } .joinwarp .joupbtns .upbtn:hover { background-color: #126dee; } .contact .ft li:hover h3{ color: #00a2e9; }