锘?*************************************************************************/ /*鍏ㄥ眬鏍峰紡寮€濮?/ /*************************************************************************/ @charset "utf-8"; *{margin:0;padding:0;outline:0;} body,html{overflow-x:hidden;color:#444;font:14px/30px 榛戜綋锛屽畫浣掻background:#fff;} blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;} input[type=text],input[type=submit],textarea,button{-webkit-border-radius:0;font-family:Microsoft Yahei,microsoft yahei,"寰蒋闆呴粦",arial;-webkit-appearance:none;} input:focus{outline:0;} textarea{resize:none;} h1,h2,h3,h4,h5,h6{font-style:normal;font-size:100%;} abbr,em,i,li,ol,ul{list-style-type:none;font-style:normal;} img{border:0;vertical-align:middle;} img{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor;} table{border-collapse:collapse;border-spacing:0;} .clearfix{display:block;zoom:1;} .clearfix:before{display:table;content:"";} .clearfix:after{clear:both;display:block;visibility:hidden;height:0;content:"";} * html .clearfix{height:1%;} *{box-sizing:border-box;} a{color:#444;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;} a:hover{color:#0071B3;text-decoration:none;} .hide,.none,ins{display:none;} .fl{float:left;display:inline-block;} .fr{float:right;display:inline-block;} .wrap{clear:both;display:block;margin:0 auto;max-width:1300px;width:100%; padding:0 0} .animate img{position:relative;opacity:1;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;transition:.5s all;-webkit-transform:scale(1,1) rotate(0);-ms-transition:.5s all;} a:hover .animate img{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);} .animate img:hover{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);} .tran,.tran a,a.tran,.tran img{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;} .rotate,.rotate2 img{-webkit-transition:all 0.8s;-moz-transition:all 0.8s;transition:all 0.8s;-ms-transition:all 0.8s;} a:hover .rotate,a:hover rotate2 img{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all 0.8s;-moz-transition:all 0.8s;transition:all 0.8s;-ms-transition:all 0.8s;} .bor_box::after,.bor_box::before{pointer-events:none;} .bor_box::after,.bor_box::before{position:absolute;top:20px;right:20px;bottom:20px;left:20px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;} .bor_box::before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);} .bor_box::after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);} #top{ width:100%; background:#0071B3; position: fixed; left:0; top:0; z-index:150} #top .wrap{ height:40px;display: flex;justify-content:space-between;align-items:center;} #top .text{ color:#fff} #top .tel{ color:#fff} #top .tel i{ margin-right:10px} #header{ width:100%; position:fixed; left:0; top:40px; z-index:150; background:#fff;border-bottom:1px solid #eee;} #header .wrap{ height:99px;display: flex;justify-content:space-between;align-items:center;} #header .logo img{ height:60px} #header .right{display: flex;justify-content:flex-end;align-items:center;} #header .right .nav ul{display: flex;justify-content:flex-end;align-items:center;} #header .right .nav ul li{ position:relative;} #header .right .nav ul li h3{ line-height:100px;text-align:center;} #header .right .nav ul li h3 span{ display:none} #header .right .nav ul li h3 a{font-size:18px; padding:0 20px; display:block; position:relative; font-weight:700} #header .right .nav ul li h3 a:before{position:absolute;content:"";left:50%;bottom:20px;width:0%;height:3px;transform:translateX(-50%);background:#0071B3;transition:all .3s; opacity:0} #header .right .nav ul li .sub{ display:none;position:absolute; left:-15px; top:100px; width:calc(100% + 30px); background:rgba(0,0,0,.7); z-index:88;box-shadow: 0 6px 12px rgba(0,0,0,.175);} #header .right .nav ul li .sub dl{} #header .right .nav ul li .sub dl a{ display:block; color:#fff; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.2); font-size:15px; text-align:center} #header .right .nav ul li .sub dl a:hover{ background:#0071B3;} #header .right .nav ul li.on h3 a{color:#0071B3; font-weight:700} #header .right .nav ul li.on h3 a:before{width:100%; opacity:1; } #header .right .nav ul li:hover h3 a{color:#0071B3; font-weight:700} #header .right .nav ul li:hover h3 a:before{width:calc(100% - 30px); opacity:1; } #header .right .nav ul li.currclass h3 a{color:#0071B3; } #header .right .nav ul li.currclass h3 a:before{width:calc(100% - 30px); opacity:1; } #header .right .mnav{ display:none} #header .right .lan{ position:relative; margin-left:30px} #header .right .lan .btn{display: flex;justify-content:space-between;align-items:center; cursor:pointer} #header .right .lan i{ line-height:100px; font-size:20px} #header .right .lan i:last-child{ color:#999; font-size:18px; margin-left:5px} #header .right .lan .list{ display:none; position:absolute; top:100px; right:0; background:#0071B3; z-index:99; border-radius:0 0 15px 15px; padding:10px;box-shadow: 0 6px 12px rgba(0,0,0,.175);width:100px;} #header .right .lan .list a{ display:block; text-align:center; font-size:14px; padding:5px 10px; border-bottom:1px solid rgba(255,255,255,.3); color:#fff} #header .right .lan .list a:last-child{ border-bottom:0} #header.scroll{ background:#fff; box-shadow: 0 1px 15px rgba(0,0,0,.05);} #banner{ width:100%; margin-top:140px} #banner .focus{ position:relative} #banner .focus .swiper-wrapper .swiper-slide{ height:800px; overflow:hidden} #banner .focus .swiper-wrapper .swiper-slide img{width:100%;height:100%;object-fit:cover} #banner .focus .swiper-slide{ position:relative} #banner .focus .swiper-slide .textbox{ width:100%; height:100%; position: absolute; left:0; top:0;display: flex;justify-content:center;align-items:center;} #banner .focus .swiper-slide .textbox .text{ } #banner .focus .swiper-slide .textbox .text .box{ background:rgba(0,0,0,.2); width:600px; padding:50px; border-radius:10px;float:right;} #banner .focus .swiper-slide .textbox .text h2{ font-size:36px; color:#fff; font-weight:normal; line-height:50px} #banner .focus .swiper-slide .textbox .text p{ font-size:16px; color:#fff;line-height:30px; margin:30px auto} #banner .focus .swiper-slide .textbox .text a{ display:inline-block; background:#0071B3; color:#fff;padding:5px 40px; border-radius:40px;} #banner .focus .swiper-slide .textbox .text i{ margin-left:10px} #banner .focus .swiper-pagination-bullet{margin:0 5px;vertical-align:middle;opacity:1;background:#0071B3;width:40px;height:4px;border-radius:0;} #banner .focus .swiper-pagination-bullet{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;} #banner .focus .swiper-pagination-bullet-active{background:#0071B3;width:40px;height:4px;opacity:1;border-radius:0;} #about{ width:100%; padding:50px 0} #about .wrap{ display: flex;justify-content:space-between;align-items:center; background:url(../images/about_bg.png) no-repeat right bottom} #about .img{ width:48%} #about .img img{ width:100%} #about .right{ width:48%;} #about .right .title h2{ font-size:34px; text-transform:uppercase; color:#0071B3; font-family:"din"} #about .right .title p{ font-size:20px; margin:20px 0 30px; color:#999; font-weight:700} #about .right .title em{ width:50px; background:#0071B3; height:3px; display:block; overflow:hidden;} #about .right .content{ margin-top:30px} #about .right .more{ margin-top:50px} #about .right .more a{ border:1px solid #eee; margin-right:20px; display:inline-block; padding:5px 30px; color:#0071B3; border-radius:40px;} #about .right .more a i{ margin-left:10px} #about .right .more a:hover{ border:1px solid #0071B3;color:#fff; background:#0071B3} #product{ width:100%; padding:50px 0} .htitle{ text-align:center} .htitle h2{ font-size:30px; color:#0071B3} .htitle em{ width:50px; background:#0071B3; height:3px; display:block; overflow:hidden; margin:20px auto 0} #product .clist{ text-align:center; margin-top:20px} #product .clist a{ margin:0 5px; border:1px solid #eee; background:#fff; ; font-size:15px; display:inline-block; padding:2px 20px;; border-radius:40px;} #product .clist a:hover{ border:1px solid #0071B3; background:#0071B3;color:#fff} #product .list{ margin-top:30px} #product .list ul{display: flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:30px} #product .list ul li{ width:calc((100% - 90px) / 4); position:relative; overflow:hidden} #product .list ul li .img{ width:100%; height:240px; overflow:hidden;} #product .list ul li .img img{width:100%;height:100%;object-fit:cover} #product .list ul li .info{ width:100%; height:100%; position:absolute; left:-100%; top:0;display: flex;justify-content:center;align-items:center;} #product .list ul li .info .box{ text-align:center;} #product .list ul li .info i{ font-size:28px; color:#fff} #product .list ul li .info p{ font-size:16px; color:#fff} #product .list ul li .info p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical} #product .list ul li:hover .info{ left:0} #jidi{ width:100%; background:#0071B3; padding:80px 0;background-image: linear-gradient(90deg, #0071B3, #02b4ee);} #jidi .wrap{ display: flex;justify-content:space-between;align-items:center;} #jidi .title{ width:300px} #jidi .title h2{ font-size:34px; text-transform:uppercase; color:#fff; font-family:"din"} #jidi .title p{ font-size:16px; margin:10px 0 10px; color:#fff; font-weight:700} #jidi .title em{ width:50px; background:#fff; height:3px; display:block; overflow:hidden;} #jidi .title .content{ color:#fff; line-height:24px; margin-top:20px} #jidi .piclist{ width:calc(100% - 320px)} #jidi .piclist .swiper-slide img{ width:100%} #news{ width:100%; padding:60px 0} #news .title{ width:100%;display: flex;justify-content:space-between ;align-items:center;padding-bottom:20px; border-bottom:1px solid #eee} #news .title h2{ font-size:28px; color:#0071B3} #news .title span a{ font-size:16px; color:#0071B3} #news .title span i{ margin-right:5px} #news .list{ margin-top:30px} #news .list ul{display: flex;justify-content:space-between ;align-items:center;gap:30px;flex-wrap:wrap} #news .list ul li{ width:calc((100% - 60px) / 3); height:280px;position:relative} #news .list ul li:nth-child(3n){ margin-right:0} #news .list ul li .img{ width:100%; height:100%; overflow:hidden;} #news .list ul li .img img{width:100%;height:100%;object-fit:cover} #news .list ul li .info{ width:100%; height:280px; position:absolute; left:0; bottom:0; background:#f9f9f9; z-index:99; padding:8%;} #news .list ul li .info .t{ font-size:18px} #news .list ul li .info p{ line-height:26px; margin-top:20px; color:#999} #news .list ul li .info .t{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical} #news .list ul li .info p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical} #news .list ul li .info .time{display: flex;justify-content:space-between ;align-items:center; position:absolute; left:0; bottom:0; width:100%; padding:10px 8%; border-top:1px solid #eee} #news .list ul li .info .time time{ color:#999} #news .list ul li .info .time i{ margin-right:5px} #news .list ul li .info .time span{ background:url(../images/new-more.png) no-repeat left center; padding-left:120px; font-style:italic; color:#999} #news .list ul li:hover{} #news .list ul li:hover .info{ height:auto;background: linear-gradient(to bottom, rgba(0,113,179,0), rgba(0,113,179,8)); padding-top:50px} #news .list ul li:hover .info .t{ color:#fff;-webkit-transition: all .3s;transition: all .3s;} #news .list ul li:hover .info p{ height:0; overflow:hidden;-webkit-transition: all .3s;transition: all .3s;} #news .list ul li:hover .time{ display:block; text-align:left; border-top:0;-webkit-transition: all .3s;transition: all .3s;} #news .list ul li:hover .time time{ display:none;-webkit-transition: all .3s;transition: all .3s;} #news .list ul li:hover .time span{ background:url(../images/view-more.png) no-repeat left center; padding-left:120px; color:#fff;-webkit-transition: all .3s;transition: all .3s;} #client{ width:100%; padding:60px 0; background:#f8f8f8} #client .list{ margin-top:30px} #client .list ul{display: flex;justify-content:fles-start ;align-items:center;gap:30px;flex-wrap:wrap} #client .list ul li{ width:calc((100% - 120px) / 5); text-align:center; background:#fff; padding:20px 0;box-shadow: 0 0 20px rgba(206,206,206,.3);} #client .list ul li img{ width:70%} #footer{ width:100%; background:url(../images/footer_bg.jpg) no-repeat center center; background-size:cover;} #footer .map{display: flex;justify-content:space-between;align-items:start; padding:80px 0} #footer .map .contact{ width:350px; border-right:1px solid rgba(255,255,255,.15)} #footer .map .contact .logo img{ height:60px} #footer .map .contact .tel{ color:#fff; margin-top:20px; font-size:24px;font-family:榛戜綋锛屽畫浣掻} #footer .map .contact .qrcode{ margin-top:20px;display: flex;justify-content:flex-start;align-items:start;} #footer .map .contact .qrcode .item { position:relative; width:50px;margin-right:20px} #footer .map .contact .qrcode .item i{ width:50px; height:50px; text-align:center; line-height:50px; background:#0071B3; border-radius:50px; display:block; color:#fff; font-size:18px} #footer .map .contact .qrcode .item em{display:none; padding: 5px; border-radius: 5px; position: absolute; left: 50%; transform: translateX(-50%);; width: 140px; top: 60px;} #footer .map .contact .qrcode .item em img{width: 100%;} #footer .map .contact .qrcode .item em::after{content: ''; position: absolute; left: 50%; top: -5px; border-left: 10px transparent solid; border-right: 10px transparent solid; border-bottom: 10px #FFF solid; transform: translateX(-50%);} #footer .map .link{display: flex;justify-content:flex-end;align-items:start;} #footer .map .link .item{ margin-left:100px} #footer .map .link .item h3{ font-size:16px; font-weight:700; margin-bottom:10px; color:#fff} #footer .map .link .item h3 a{ color:#fff} #footer .map .link .item a{ display:block; color:#8b9cb4} #footer .map .link .item a:hover{ color:#fff} #footer .copyright{ border-top:1px solid rgba(255,255,255,.1); padding:30px 0;display: flex;justify-content:space-between;align-items:center;} #footer .copyright .text, #footer .copyright .sitemap, #footer .copyright a{ color:#8b9cb4} #footer .copyright a:hover{ color:#fff} #footer .copyright .text i{ margin:0 10px} @media (max-width:1300px){ .wrap{ padding:0 20px} } @media (max-width:1100px){ #header .right .nav ul li h3 a{font-size:17px; padding:0 5px; display:block; position:relative; font-weight:normal} #footer .map .link .item{ margin-left:20px} #header .logo img{ height:50px} } @media (max-width:960px){ #header .right .nav ul li h3 a{font-size:17px; padding:0 5px; display:block; position:relative; font-weight:normal} #footer .map .link .item{ margin-left:20px} #header .logo img{ height:40px} } @media (max-width:900px){ body,html{ font-size:.22rem; line-height:.34rem} .wrap{ padding:0px} #top{ padding:0 .25rem} #top .wrap{ height:.44rem;} #top .text{ font-size:.2rem} #top .tel{ display:none} #header{ width:100%; padding:0 .25rem;top:.44rem;} #header .wrap{ height:1rem;} #header .logo img{ height:.6rem} #header .logo .txt{ display:none} #header .right .mnav{position:relative;display:block;width:.34rem; height:.33rem;cursor:pointer; margin-left:.1rem} #header .right .mnav span{position:absolute;display:block;width:.34rem;height:.03rem;background:#0071B3;transition:all .5s;} #header .right .mnav .s1{top:.05rem;} #header .right .mnav .s2{top:.15rem;width:.26rem;} #header .right .mnav .s3{top:.25rem;} #header .right .mnav.isopen .s1{top:.15rem;transform:rotate(45deg);} #header .right .mnav.isopen .s2{width:0;opacity:0;} #header .right .mnav.isopen .s3{top:.15rem;transform:rotate(-45deg);} #header .right .nav{position: absolute;background:#fff;height: auto; min-height:100vh;width:100%;top:1rem;z-index:105;padding:.1rem .25rem 0;transform:translatex(105%);left:0; border-top:1px solid #eee} #header .right .nav ul{ display:block} #header .right .nav ul li{ width:100%} #header .right .nav ul li h3{ line-height:.7rem; height:.7rem; font-weight:normal;border-bottom:1px solid #eee; text-align:left; position:relative; display:block} #header .right .nav ul li h3 a{font-size:.24rem;line-height:.7rem;display: block; padding:0; color:#333} #header .right .nav ul li h3 a:before{ display:none !important} #header .right .nav ul li h3 span{ padding-left:10%; position:absolute; right:0; top:0; display:block; opacity:.5;} #header .right .nav ul li h3 span i{ text-align:right; font-size:.24rem; color:#999;-webkit-transition: all .3s;transition: all .3s;} #header .right .nav ul li:hover h3{ background: none;} #header .right .nav ul li:hover h3 i{-webkit-transform: rotate(-180deg);-ms-transform: rotate(-180deg);transform: rotate(-180deg);} #header .right .nav ul li .sub{ position: inherit; left:auto; top: auto; width:auto; margin:0; z-index:100; padding-left:.2rem; background:#fff;box-shadow: 0 0 0 rgba(0,0,0,0);} #header .right .nav ul li .sub dl{ padding:0;} #header .right .nav ul li .sub dl a{ line-height:.7rem; padding:0; margin:0; border-bottom:1px solid #eee; color:#333} #header .right .nav ul li .sub dl a:first-child{ padding-top:0} #header .right .nav ul li .sub dl a:last-child{ padding-bottom:0} #header .right .nav ul li .sub dl a{ display:block; padding-left:0; border-left:0; font-size:.24rem; text-align: left;color:#68747f;} #header .right .nav ul li .sub dl a:hover{ background:none;} #header .right .nav.isopen{transform:translatex(0);} #header .right .lan{ position:relative; margin-left:0; margin-right:.2rem;} #header .right .lan .btn{ line-height:1rem} #header .right .lan .btn i{line-height: inherit; font-size:.28rem} #header .right .lan .btn i:last-child{ font-size:.22rem; margin-left:.05rem} #header .right .lan .list{ display:none; position:absolute; top:1rem; right:0;border-radius:0 0 .2rem .2rem; padding:.1rem;width:1.5rem} #header .right .lan .list a{ font-size:.2rem; padding:.1rem;} #header.scroll{ background:#fff; border-bottom:0.01rem solid #eee;box-shadow: 0 1px 15px rgba(0,0,0,.05);} #banner{ width:100%; margin-top:1.44rem} #banner .focus .swiper-wrapper .swiper-slide{ height:5rem;} #banner .focus .swiper-slide .textbox .text .box{ width:90%; margin:0 auto; padding:.5rem; border-radius:10px} #banner .focus .swiper-slide .textbox .text h2{ font-size:.3rem; line-height:.3rem; font-weight:700} #banner .focus .swiper-slide .textbox .text p{ font-size:.2rem; line-height:.3rem;margin:.2rem auto} #banner .focus .swiper-slide .textbox .text a{ padding:.08rem .4rem; border-radius:.5rem; font-size:.2rem} #banner .focus .swiper-slide .textbox .text i{ margin-left:.1rem} #banner .focus .swiper-button-next,#banner .focus .swiper-button-prev{ display:none} #about{ width:100%; padding:.5rem .25rem} #about .wrap{flex-direction:column-reverse} #about .img{ width:100%; margin-top:.3rem} #about .img img{ width:100%; border-radius:.04rem} #about .right{ width:100%;} #about .right .title{ text-align:center} #about .right .title h2{ font-size:.34rem; } #about .right .title p{ font-size:.24rem; margin:.1rem 0 .2rem;} #about .right .title em{ width:.5rem;height:.03rem; margin:0 auto} #about .right .content{ margin-top:.3rem; line-height:1.8; font-size:.22rem} #about .right .more{ margin-top:.3rem; text-align:center} #about .right .more a{ margin:0 .2rem;padding:.08rem .3rem;border-radius:.5rem;} #about .right .more a i{ margin-left:.1rem} #about .right .more a:hover{ border:1px solid #0071B3;color:#fff; background:#0071B3} #product{ padding:.5rem .25rem;} .htitle h2{ font-size:.34rem;} .htitle em{ width:.5rem; height:.03rem; margin:.2rem auto 0} #product .clist{ text-align:center; margin-top:.2rem} #product .clist a{ margin:0 .02rem; font-size:.22rem; padding:.04rem .2rem; border-radius:.5rem;} #product .list{ margin-top:.3rem} #product .list ul{gap:.25rem} #product .list ul li{ width:calc((100% - .25rem) / 2);} #product .list ul li .img{ height:2.5rem; } #product .list ul li:nth-child(n+7){ display:none} #product .list ul li .info{ background:rgba(0,113,179,.8); position: inherit; left:0; top:0;} #product .list ul li .info i{ display:none} #product .list ul li .info p{ font-size:.22rem; padding:.1rem} #jidi{ padding:.8rem .25rem;} #jidi .wrap{ display: block;} #jidi .title{ width:100%; text-align:center} #jidi .title h2{ font-size:.34rem; } #jidi .title p{ font-size:.24rem; margin:.1rem 0 .1rem;} #jidi .title em{ width:.5rem; height:.03rem; margin:0 auto} #jidi .title .content{ color:#fff; line-height:1.8; margin-top:.2rem; font-size:.22rem} #jidi .piclist{ width:100%; margin-top:.3rem} #jidi .piclist .swiper-slide img{ width:100%} #news{ width:100%; padding:.6rem .25rem} #news .title{ padding-bottom:.2rem; border-bottom:.01rem solid #eee} #news .title h2{ font-size:.3rem;} #news .title span a{ font-size:.22rem;} #news .title span i{ margin-right:.05rem} #news .list ul li{ float: inherit; width:100%; height:auto; margin-right: ; margin-top:.3rem} #news .list ul li:nth-child(n+4){ display:none} #news .list ul li .img{ width:100%; height:3rem;} #news .list ul li .info{ width:100%; height:auto; position: inherit;padding:.3rem .3rem 1rem;} #news .list ul li .info .t{ font-size:.24rem} #news .list ul li .info p{ font-size:.22rem; line-height:.34rem; margin-top:.2rem;} #news .list ul li .info .time{width:100%; padding:.2rem 8%; border-top:1px solid #eee; font-size:.21rem} #news .list ul li .info .time i{ margin-right:.05rem} #news .list ul li .info .time span{ background-size:.9rem auto; padding-left:1rem;} #news .list ul li:hover .info{ ; height:auto; position: inherit;padding:.3rem .3rem 1rem; background:#f9f9f9} #news .list ul li:hover .info .t{ font-size:.24rem; color:#333} #news .list ul li:hover .info p{ font-size:.22rem; line-height:.3rem; margin-top:.2rem; height:inherit} #news .list ul li:hover .info .time{display: flex;justify-content:space-between ;align-items:center; position:absolute; left:0; bottom:0; width:100%; padding:.2rem 8%; border-top:1px solid #eee} #news .list ul li:hover .info .time time{ color:#999; display:block;} #news .list ul li:hover .info .time span{ background:url(../images/new-more.png) no-repeat left center; background-size:.9rem auto; padding-left:1rem; font-style:italic; color:#999} #client{ padding:.6rem .25rem} #client .list{ margin-top:.3rem} #client .list ul{display: flex;justify-content:fles-start ;align-items:center;gap:.25rem;flex-wrap:wrap} #client .list ul li{ width:calc((100% - .5rem) / 3); text-align:center; background:#fff; padding:.2rem 0;box-shadow: 0 0 20px rgba(206,206,206,.3);} #client .list ul li img{ width:90%} #footer .map{display: block;padding:.5rem 0} #footer .map .contact{ width:100%; border-right:0; text-align:center} #footer .map .contact .logo img{ height:.6rem} #footer .map .contact .tel{ color:#fff; margin-top:.4rem; font-size:.34rem; } #footer .map .contact .tel a{ color:#fff} #footer .map .contact .qrcode{ display:none} #footer .map .link{display: none;} #footer .copyright{ padding:.3rem .25rem;display: block; text-align:center; font-size:.21rem} #footer .copyright .text i{ margin:0; display:block} } #nbanner{ background-repeat:no-repeat; background-position: center center; height:400px; margin-top:140px; background-size:cover} #fenye{padding:50px 0 0px;text-align:center;clear:both;} #fenye table{text-align:center;margin:0 auto} #fenye a{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee; background:#FFF} #fenye .prev,#fenye .next{width:52px;text-align:center} #fenye a.curr{font-weight:700;color:#fff;background:#0071B3;border:1px solid #0071B3} #fenye a:hover{background:#0071B3;color:#fff;border:1px solid #0071B3} #fenye span{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee;background:#FFF} #main{ padding:50px 0} #main .title{ border-bottom:1px solid #eee;display: flex;justify-content:space-between;align-items:center;} #main .title h2{font-size:30px; padding-bottom:20px; font-weight:normal} #main .title .weizhi{ color:#999} #main .title .weizhi a{ color:#999} #main .title .weizhi i{ margin:0 10px} #main .about{display: flex;justify-content:space-between;align-items:start; margin-top:50px} #main .about .text{ width:55%; font-size:16px; line-height:2} #main .about .text p{ margin-bottom:10px; text-indent:2em} #main .about .img{ width:40%} #main .about .img img{ width:100%} #main .content h1{ font-size:28px; padding:20px 0; text-align:center; font-weight:normal} #main .content .info{ border-bottom:1px solid #eee; text-align:center; padding-bottom:10px} #main .content .info span{ margin:0 10px; color:#999} #main .content .mycontent{ padding:40px 0; line-height:200%; font-size:16px} #main .content .mycontent img{ max-width:100%} #main .content .mycontent p{ padding-bottom:10px} #main .content .updown{ border-top:1px solid #eee; padding:20px 0 0} #main .content .updown p{} #main .content .updown p a{ color:#0071B3} #main .honnor{ margin-top:30px} #main .honnor ul{display: flex;justify-content:flex-start;align-items:start;flex-wrap:wrap; gap:30px} #main .honnor ul li{ width:calc((100% - 120px) / 5)} #main .honnor ul li .img img{ width:100%} #main .honnor ul li p{ text-align:center; margin-top:10px} #main .client{ margin-top:30px} #main .client ul{display: flex;justify-content:fles-start ;align-items:center;gap:30px;flex-wrap:wrap} #main .client ul li{ width:calc((100% - 120px) / 5); text-align:center; background:#fff; padding:20px 0;box-shadow: 0 0 20px rgba(206,206,206,.3);} #main .client ul li img{ width:70%} #main .client ul li p{ display:none} #main .news ul li{ padding:20px 0; border-bottom:1px solid #eee} #main .news ul li a{display: flex;justify-content:space-between;align-items:center;} #main .news ul li .img{ width:20%; height:180px; overflow:hidden} #main .news ul li .img img{ width:100%;height:100%;object-fit:cover} #main .news ul li .info{ width:75%} #main .news ul li .info .t{ font-size:16px; font-weight:700} #main .news ul li p{ margin-top:10px; line-height:24px; color:#999} #main .news ul li .info p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical} #main .news ul li .info .more{ color:#0071B3; margin-top:10px} #main .news ul li .info .more i{ margin-left:10px} #main .product{ margin-top:30px} #main .product ul{display: flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:50px 30px} #main .product ul li{ width:calc((100% - 90px) / 4); overflow:hidden} #main .product ul li .img{ width:100%; height:240px; overflow:hidden;} #main .product ul li .img img{width:100%;height:100%;object-fit:cover} #main .product ul li p{ text-align:center; margin-top:20px} #main .product ul li p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical} #main .product ul li:hover .info{ left:0} #main .tel{ margin-top:30px; text-align:center} #main .tel span{ margin:0 50px; font-size:20px} #main .tel span i{ margin-right:10px} #main .job{ margin-top:30px} #main .job ul{display: flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:50px 30px} #main .job ul li{ width:calc((100% - 90px) / 4); overflow:hidden} #main .job ul li .img{ width:100%; height:220px; overflow:hidden;} #main .job ul li .img img{width:100%;height:100%;object-fit:cover} #main .job ul li p{ text-align:center; margin-top:20px; border: 1px solid #eee;padding: 5px 30px;color: #0071B3; border-radius: 40px;} #main .job ul li p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical} #main .job ul li:hover .info{ left:0} #clist{ width:100%; border-bottom:1px solid #eee; background:#f9f9f9} #clist .wrap{ text-align:center} #clist a{ margin:0 20px; font-size:16px; position:relative; display: inline-block; line-height:60px} #clist a:before{position:absolute;content:"";left:50%;bottom:0px;width:0%;height:3px;transform:translateX(-50%);background:#0071B3;;transition:all .3s; opacity:0} #clist a.currclass:before{width:100%; opacity:1} #clist a:hover:before{width:100%; opacity:1} #main .contact{ padding:40px 0} #main .contact .mycontent{ font-size:18px; padding-bottom:40px; line-height:36px} #main .contact iframe{ height:400px} #main .service ul li{ padding:20px 0; border-bottom:1px solid #eee} #main .service ul li .t{ font-size:16px; font-weight:700} #main .service ul li p{ margin-top:10px; line-height:24px; color:#999} #main .service ul li p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical} #main .service ul li .more{ color:#0071B3; margin-top:10px} #main .service ul li .more i{ margin-left:10px} .annex{ border:1px dashed #ddd; margin:0 auto;} .annex td{ padding:5px 50px; font-size:14px} @media (max-width:900px){ body,html{ font-size:.22rem; line-height:.34rem} #nbanner{ height:3rem;; margin-top:1.44rem} #fenye{padding:.5rem 0 0px;} #fenye a{margin:0 .02rem;padding:.1rem .15rem} #fenye .prev,#fenye .next{width:.55rem;} #fenye span{margin:0 .02rem;padding:.1rem .15rem} #fenye .num,#fenye .prev{display:none} #main{ padding:.5rem .25rem} #main .title h2{font-size:.3rem; padding-bottom:.2rem;} #main .title .weizhi{ display:none} #main .about{display: block; margin-top:.3rem} #main .about .text{ width:100%; font-size:.22rem; line-height:1.8} #main .about .text p{ margin-bottom:.2rem; text-indent:0} #main .about .img{ width:100%} #main .honnor{ margin-top:.3rem} #main .honnor ul{display: flex;justify-content:flex-start;align-items:start;flex-wrap:wrap; gap:.25rem} #main .honnor ul li{ width:calc((100% - .25rem) / 2)} #main .honnor ul li p{ text-align:center; margin-top:.2rem} #main .content h1{ font-size:.3rem; padding:.25rem 0;} #main .content .info{ padding-bottom:.1rem} #main .content .info span{ margin:0 .1rem;} #main .content .info span+span+span{ display:none} #main .content .mycontent{ padding:.4rem 0; line-height:1.8; font-size:.24rem} #main .content .mycontent p{ padding-bottom:.1rem} #main .content .updown{ border-top:1px solid #eee; padding:.2rem 0 0} #main .content .updown p{ font-size:.22rem} #main .content .updown p a{ color:#94c93d} #main .client{ margin-top:.3rem} #main .client ul{display: flex;justify-content:fles-start ;align-items:center;gap:.25rem;flex-wrap:wrap} #main .client ul li{ width:calc((100% - .5rem) / 3); text-align:center; background:#fff; padding:.2rem 0;box-shadow: 0 0 20px rgba(206,206,206,.3);} #main .client ul li img{ width:90%} #clist{ padding:0} #clist a{ margin:0 .1rem; font-size:.22rem; position:relative; display: inline-block; line-height:.7rem} #main .product{ margin-top:.3rem} #main .product ul{gap:.5rem .25rem} #main .product ul li{ width:calc((100% - .25rem) / 2);} #main .product ul li .img{ width:100%; height:2.6rem; overflow:hidden;} #main .product ul li .info{ background:rgba(0,113,179,.8); position: inherit; left:0; top:0;} #main .product ul li .info i{ display:none} #main .product ul li .info p{ font-size:.22rem; padding:.1rem} #main .tel{ margin-top:.3rem;} #main .tel span{ margin:.1rem 0; font-size:.26rem; display:block} #main .tel span i{ margin-right:.1rem} #main .job{ margin-top:.3rem} #main .job ul{gap:.5rem .25rem} #main .job ul li{ width:calc((100% - .25rem) / 2);} #main .job ul li .img{ width:100%; height:2.6rem; overflow:hidden;} #main .job ul li .info{ background:rgba(0,113,179,.8); position: inherit; left:0; top:0;} #main .job ul li .info i{ display:none} #main .job ul li .info p{ font-size:.22rem; padding:.1rem} #main .contact{ padding:.3rem 0} #main .contact .mycontent{ font-size:.24rem; padding-bottom:.4rem; line-height:.44rem} #main .contact iframe{ height:4rem} #main .news{ margin-top:.3rem} #main .news ul li{ padding:.2rem 0;} #main .news ul li .img{ width:2rem; height:1.8rem;} #main .news ul li .info{width:calc(100% - 2.3rem)} #main .news ul li .info .t{ font-size:.24rem; font-weight: normal;} #main .news ul li .info .t{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical} #main .news ul li .info p{ display:none} #main .news ul li .info .more{ margin-top:.1rem; font-size:.2rem} #main .news ul li .info .more i{ margin-left:.1rem} #main .service{ margin-top:.3rem} #main .service ul li{ padding:.2rem 0;} #main .service ul li .t{ font-size:.24rem; font-weight: normal;} #main .service ul li .t{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical} #main .service ul li p{ display:none} #main .service ul li .more{ margin-top:.1rem; font-size:.2rem} #main .service ul li .more i{ margin-left:.1rem} .annex{ width:100%} .annex td{ padding:.1rem .2rem; font-size:.2rem} }