/*************************************************************************/ /*全局样式开始*/ /*************************************************************************/ @charset "utf-8"; *{margin:0;padding:0;outline:0;} body,html{color:#333;font:14px/30px "微软雅黑","Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;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", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;-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:#333;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;} a:hover{color:#0564b4;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:1280px;width:100%;} .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);} a:hover .bor_box::after,a:hover .bor_box::before{opacity:.7;-webkit-transform:scale(1);transform:scale(1);} @font-face { font-family: "quicksand"; src: url('../fonts/quicksand.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face{ font-family:"din"; src:url("../fonts/din-medium.woff") format("woff"), url("../fonts/din-medium.ttf") format("truetype"), url("../fonts/din-medium.eot") format("embedded-opentype"), url("../fonts/din-medium.svg") format("svg"); font-weight:normal; font-style:normal; } #header{ position: fixed; width:100%; height:120px; left:0; top:0; padding:0 5%; background:#fff;display: flex;justify-content:space-between ;align-items:center; z-index:99} #header{box-shadow: 0 0 15px 0 rgba(0,0,0,0.1); } #header .tsearch{ display:none} #header .logo img{ height:90px} #header .right .search{ height:40px; display:flex;justify-content:flex-end;align-items:center;} #header .right .search form{ display:flex;align-items:center;} #header .right .search .key{ border:1px solid #2172e0; line-height:30px; width:300px; text-indent:10px} #header .right .search .btn{ border:1px solid #2172e0;; line-height:30px; background:#2172e0; padding:0 20px; color:#fff;} #header .right .rbox{display: flex;justify-content:flex-end;align-items:center;gap:0 30px} #header .right .rbox .nav ul{display: flex;justify-content:space-between ;align-items:center;gap:0 30px} #header .right .rbox .nav ul li{ position:relative} #header .right .rbox .nav ul li h3 a{ color:#333; font-size:18px; font-weight:normal; line-height:80px; display:block; position:relative} #header .right .rbox .nav ul li h3 a::before{position:absolute;bottom:0;left:50%;content:'';height:2px; width:0; background:#fff;transition: all 0.5s; opacity:0} #header .right .rbox .nav ul li h3 i{ display:none} #header .right .rbox .nav ul li .sub{ display:none; position:absolute; left:50%; margin-left:-100px;; top:80px; background:rgba(113,113,113,.9); z-index:128;} #header .right .rbox .nav ul li .sub .item{ position:relative;display: flex; } #header .right .rbox .nav ul li .sub .item h4{width:200px;background:rgba(113,113,113,.2); } #header .right .rbox .nav ul li .sub .item h4 a{color:#fff; font-size:16px; display:block; padding:20px 10px; text-align:center; font-weight:normal} #header .right .rbox .nav ul li .sub .item h4 a{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;} #header .right .rbox .nav ul li .ssub{z-index:128;display:flex;} #header .right .rbox .nav ul li .ssub p a{color:#fff; font-size:16px; padding:20px 0px; text-align:left; font-weight:normal;white-space:nowrap; display:block;width:160px;} #header .right .rbox .nav ul li .ssub p a:hover{ background:#fff;color:#2279ea;} #header .right .rbox .nav ul li:hover h3 a{background:#fff; color:#2279ea;} #header .right .rbox .nav ul li:hover h3 a::before{ width:100%; opacity:1; left:0} #header .right .rbox .nav ul li.active h3 a{color:#207fff} #header .right .rbox .nav ul li.active h3 a::before{ width:100%; opacity:1; left:0} #header .right .rbox .nav ul li .sub .item:hover h4 a{ background:#fff;color:#2279ea;} #header .right .rbox .tel{ border-left:1px solid rgba(0,0,0,.1); padding-left:30px;display: flex;justify-content:space-between ;align-items:center;} #header .right .rbox .tel .icon{ border:2px solid #333; border-radius:60px; width:40px; height:40px; color:#333;display: flex;justify-content:center ;align-items:center; font-size:20px} #header .right .rbox .tel .text{ margin-left:20px;color:#333; font-size:16px; line-height:20px} #header .right .rbox .mnav{ display:none} #header .right .rbox .lan{position:relative;} #header .right .rbox .lan .btn{display:flex;justify-content:space-between;align-items:center;cursor:pointer;} #header .right .rbox .lan .btn span{font-size:16px;margin-left:10px;} #header .right .rbox .lan i{font-size:30px} #header .right .rbox .lan i:last-child{font-size:18px;margin-left:5px} #header .right .rbox .lan .list{display:none;position:absolute;top:50px;right:0;width:100%;background:#fff;z-index:9999;padding:10px;border:1px solid #eee; border-radius:10px} #header .right .rbox .lan .list a{display:block;text-align:center;font-size:14px;padding:5px 10px;border-bottom:1px solid rgba(255,255,255,.3);} #header .right .rbox .lan .list a:last-child{border-bottom:0} #banner{ width:100%; margin-top:120px;} #banner .focus{ position:relative; overflow:hidden} #banner .focus .swiper-slide img{ width:100%} .stitle{ text-align:center;} .stitle h2{ font-size:34px; font-weight:normal;} .stitle p{ font-size:16px; color:#999; margin-top:15px} #solution{ width:100%; padding-top:80px} #solution .listnav{ margin:50px auto 0;position:relative;} #solution .listnav .gallery-thumbs{position:relative; overflow:hidden;padding:0 0 40px; margin:0 10%} #solution .listnav .gallery-thumbs .swiper-slide{ text-align:center; position:relative; cursor:pointer; width:20%} #solution .listnav .gallery-thumbs .swiper-slide::after {content: "";position: absolute;margin-left: -15px;left: 50%;bottom: -40px;width: 30px;height: 22px;background-image: url(../images/tb53.png);background-size: 100% 100%; opacity:0} #solution .listnav .gallery-thumbs .swiper-slide .img img{ height:30px} #solution .listnav .gallery-thumbs .swiper-slide p{ margin-top:10px; font-size:16px} #solution .listnav .gallery-thumbs .swiper-slide p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;} #solution .listnav .gallery-thumbs .swiper-slide-thumb-active::after {opacity: 1;} #solution .listnav .gallery-thumbs .swiper-slide-thumb-active p{ color:#2172e0} #solution .listnav .gallery-thumbs .swiper-slide:hover p{ color:#2172e0} #solution .list .swiper-slide{ position:relative; height:600px; background-position:center center; background-repeat:no-repeat; background-size: cover;display: flex;justify-content:space-between ;align-items:center;} #solution .list .swiper-slide .text{ color:#fff} #solution .list .swiper-slide .text h6{ font-size:36px; font-weight:normal} #solution .list .swiper-slide .text p{ font-size:16px; margin-top:30px} #solution .list .swiper-slide .text a{ display:inline-block; background:#2172e0; color:#fff; padding:5px 20px; margin-top:40px} #product{ width:100%; padding:80px 0; background:url(../images/bg_product.jpg) no-repeat center center; background-size:cover} #product .tabs{display: flex;justify-content:center;align-items:center;gap:0 10px;; margin-top:30px} #product .tabs a{ background:#999; color:#fff; font-size:16px; padding:5px 20px;text-align:center} #product .tabs a.active{ background:#2172e0} #product .tabs a:hover{ background:#333} #product .listbox{ background:#fff; margin-top:20px; overflow:hidden} #product .listbox ul{display: flex;justify-content:space-between ;align-items:center;flex-wrap:wrap} #product .listbox ul li{ width:calc(100% / 3); border-bottom:1px solid #ddd; border-right:1px solid #ddd; position:relative; overflow:hidden; padding-bottom:20px} #product .listbox ul li .img{ padding:50px;text-align:center;;} #product .listbox ul li .img img{ max-width:80%; height:240px} #product .listbox ul li p{ text-align:center; font-size:18px; padding:0 20px; margin-top:10px} #product .listbox ul li p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;} #product .listbox ul li:nth-child(3n){ border-right:0} #product .listbox ul li:nth-child(n+4){ border-bottom:0} #product .listbox ul li .info{ position:absolute; opacity:0; left:0; top:50px; width:100%; height:100%; background:rgba(0,73,173,.9);display: flex;justify-content:center;align-items:center;} #product .listbox ul li .info .box{ padding:20px} #product .listbox ul li .info .box h3{ color:#fff; font-size:22px; font-weight:normal} #product .listbox ul li .info .box .text{ color:#fff; font-size:14px; line-height:26px; margin-top:20px} #product .listbox ul li:hover .info{ top:0; opacity:1} #product .listbox ul li:hover p{ opacity:0} #product .more{ margin-top:30px; text-align:center} #product .more a{ border:2px solid #2172e0; border-radius:40px; display:inline-block; line-height:40px; padding:0 30px; color:#2172e0} #product .more a i{ margin-left:10px} #video{ width:100%; padding:80px 0;} #video .list{ margin-top:30px} #video .list ul{display: flex;justify-content:flex-start ;align-items:flex-start; flex-wrap:wrap;gap:30px 20px} #video .list ul li{ width:calc((100% - 60px) /4)} #video .list ul li .img{ position:relative} #video .list ul li .img img{ width:100%} #video .list ul li .img .play{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5);display: flex;justify-content:center;align-items:center;} #video .list ul li .img .play i{ font-size:46px; color:#fff;transition:all 0.3s;} #video .list ul li:hover .img .play i{ font-size:56px} #video .list ul li p{ margin-top:10px} #video .more{ margin-top:30px; text-align:center} #video .more a{ border:2px solid #2172e0; border-radius:40px; display:inline-block; line-height:40px; padding:0 30px; color:#2172e0} #video .more a i{ margin-left:10px} #news{ width:100%; padding:80px 0; background:#f7f7f7} #news .list{display: flex;justify-content:space-between ;align-items:center; background:#fff; margin-top:30px;} #news .list .picnews{ width:48%; position:relative} #news .list .picnews .img{ height:450px;} #news .list .picnews .img img{width:100%;height:100%;object-fit:cover} #news .list .picnews .info{ position:absolute; left:0; bottom:0; background:rgba(0,0,0,.5); padding:10px 20px} #news .list .picnews .info h2{ font-size:20px; color:#fff; font-weight:normal} #news .list .picnews .info h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;} #news .list .picnews .info p{ color:#fff; line-height:24px} #news .list .picnews .info p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;} #news .list .listnews{ width:48%} #news .list .listnews ul{ padding:0 20px 0 0} #news .list .listnews ul li{ border-bottom:1px solid #eee; padding:10px 0} #news .list .listnews ul li:last-child{ border:0} #news .list .listnews ul li h2{ font-size:18px; font-weight:normal} #news .list .listnews ul li h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;} #news .list .listnews ul li p{ color:#666; line-height:26px; margin-top:10px} #news .list .listnews ul li p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;} #news .list .listnews ul li .time{display: flex;justify-content:space-between ;align-items:center;} #news .list .listnews ul li .time i{ color:#2172e0; font-size:20px} #news .list .listnews ul li .time time{ display:block; text-align:right; color:#999} #news .list .listnews ul li:hover .time i{ margin-left:20px} #hezuo{ width:100%; padding:80px 0;} #hezuo .list ul{display: flex;justify-content:flex-start ;align-items:center; margin-top:50px;flex-wrap:wrap; border-top:1px solid #eee; border-left:1px solid #eee} #hezuo .list ul li{ width:20%; border-bottom:1px solid #eee; border-right:1px solid #eee; padding:20px} #hezuo .list ul li img{ width:100%; max-height:80px} #about{ width:100%; padding:80px 0; background:#f7f7f7} #about .list{display: flex;justify-content:space-between ;align-items:center; margin-top:50px;} #about .list .img{ width:48%} #about .list .img img{ width:100%} #about .list .right{ width:48%} #about .list .right .logo img{ height:80px} #about .list .right .text{ line-height:1.9; margin-top:20px; font-size:16px} #footer{ width:100%; background:#0d0e11; padding:50px 0 20px} #footer .box{display: flex;justify-content:space-between ;align-items:flex-start;} #footer .box .icon p{ margin-bottom:10px} #footer .box .icon img{ border-radius:6px} #footer .box .link{display: flex;justify-content:flex-start ;align-items:flex-start;gap:0 60px} #footer .box .link .item h3{ font-size:18px; color:#e0e0e0; font-weight:normal; margin-bottom:10px} #footer .box .link .item p a{ color:#e0e0e0} #footer .box .tel h3{ font-size:18px; color:#e0e0e0; font-weight:normal; margin-bottom:10px} #footer .box .tel p{ font-size:26px; color:#e0e0e0; font-family:"din"; margin-bottom:10px} #footer .box .qrcode{ text-align:center} #footer .box .qrcode p{ color:#fff} #footer .flink{ margin-top:20px; padding-top:20px;display: flex; border-top:1px solid rgba(255,255,255,.05)} #footer .flink span{ color:#e0e0e0; font-weight:700;} #footer .flink a{ margin-right:10px; color:#e0e0e0} #copyright{ width:100%; background:#1b1d23} #copyright .wrap{display: flex;justify-content:space-between ;align-items:flex-start; padding:15px 0} #copyright .left{ color:#e0e0e0} #copyright .left a{ color:#e0e0e0} #copyright .left i{ margin:0 10px} #copyright .right a{ color:#e0e0e0; margin-left:10px} @media (max-width:1800px){ #header{ padding:0 20px} #header .right{gap:0 20px} #header .right .nav ul{gap:0 30px} #header .right .tel{ padding-left:20px;} } @media (max-width:1500px){ #header{ padding:0 10px} #header .logo img{ height:60px} #header .right{gap:0 10px} #header .right .nav ul{gap:0 15px} } @media (max-width:1300px){ #header .right .tel{ display:none} } @media (max-width:1250px){ #header .logo img{ height:50px} } @media (max-width:1100px){ #header .logo img{ height:36px} #header .right .nav ul li h3 a{ font-size:16px;} } @media (max-width:1000px){ #header .logo img{ height:30px} } @media (max-width:900px){ .wrap{ padding:0px} body,html{font-size:.23rem;line-height:.34rem} #header{padding:0 .2rem;height:1.3rem;flex-wrap:wrap;} #header .tsearch{ width:100%; border-bottom:1px solid #eee; padding:.05rem 0} #header .tsearch{ display:flex;justify-content:center;align-items:center;} #header .tsearch form{ display:flex;align-items:center;} #header .tsearch .key{ border:1px solid #2172e0; line-height:.3rem; width:2.2rem; text-indent:10px} #header .tsearch .btn{ border:1px solid #2172e0;; line-height:.3rem; background:#2172e0; padding:0 .2rem; color:#fff;} #header .logo img{height:.6rem} #header .right{justify-content:flex-end;} #header .right .search{ display:none} #header .right .rbox .mnav{position:relative;display:block;width:.34rem;height:.33rem;cursor:pointer;margin-left:.1rem} #header .right .rbox .mnav span{position:absolute;display:block;width:.34rem;height:.05rem;background:#2172e0;transition:all .5s;border-radius:.05rem} #header .right .rbox .mnav .s1{top:.05rem;} #header .right .rbox .mnav .s2{top:.15rem;width:.26rem;} #header .right .rbox .mnav .s3{top:.25rem;} #header .right .rbox .mnav.isopen .s1{top:.15rem;transform:rotate(45deg);} #header .right .rbox .mnav.isopen .s2{width:0;opacity:0;} #header .right .rbox .mnav.isopen .s3{top:.15rem;transform:rotate(-45deg);} #header .right .rbox .tel{ display:none} #header .right .rbox .nav{position:absolute;background:#fff;height:auto;min-height:100vh;width:100%;top:1.3rem;z-index:105;padding:.1rem .25rem 0;transform:translatex(100%);left:0;border-top:1px solid #eee;} #header .right .rbox .nav ul{display:block} #header .right .rbox .nav ul li{ width:100%;} #header .right .rbox .nav ul li h3{line-height:.7rem;height:.7rem;border-bottom:1px solid #eee;display: flex;justify-content:space-between ;align-items:center;} #header .right .rbox .nav ul li h3 a{line-height:.7rem;font-size:.24rem;padding:0; display:block; color:#333;display: flex;justify-content:space-between ;align-items:center;} #header .right .rbox .nav ul li h3 i{ display: block; color:#888; font-size:.28rem} #header .right .rbox .nav ul li .sub{display:none;position:inherit;left:0;width:auto;margin-left:0;top:0;background:#fff;border-radius:0;box-shadow:0 0 0} #header .right .rbox .nav ul li .sub .item h4 a{color:#68747f;border-bottom:1px solid #eee;line-height:.7rem;font-size:.24rem;padding:0 0 0 .2rem; text-align:left} #header .right .rbox .nav ul li .sub .item h4 a:hover{background:#fff;color:#68747f;font-weight:700} #header .right .rbox .nav ul li .sub .item .ssub{ display:none} #header .right .rbox .nav ul li.demo{margin-top:.2rem} #header .right .rbox .nav ul li.currclass{ background:#fff} #header .right .rbox .nav ul li:hover{ background:#fff} #header .right .rbox .nav.isopen{transform:translatex(0);} #header .right .rbox .nav ul li .sub .item:hover .ssub{ display:none} } @media (max-width:800px){ #banner{margin-top:1.3rem;} .stitle h2{ font-size:.34rem;;} .stitle p{ font-size:.22rem; margin-top:.2rem} #solution{padding-top:.5rem} #solution .listnav{ display:none} #solution .list{ margin-top:.3rem} #solution .list .swiper-slide{height:3rem; padding:.2rem} #solution .list .swiper-slide .text h6{ font-size:.4rem; line-height:1.5} #solution .list .swiper-slide .text p{ font-size:.24rem; margin-top:.3rem} #solution .list .swiper-slide .text a{ padding:.1rem .2rem; margin-top:.4rem} #product{ padding:.5rem .2rem; } #product .tabs{gap:.1rem .1rem;flex-wrap:wrap; margin-top:.3rem} #product .tabs a{ width:26.66%; font-size:.22rem; padding:.1rem .2rem;} #product .listbox{margin-top:.2rem;} #product .listbox ul li{ width:calc(100% / 2); padding:.2rem;} #product .listbox ul li .img{ padding:0rem} #product .listbox ul li .img img{ max-width:100%; height:2rem} #product .listbox ul li p{ text-align:center; font-size:.22rem; padding:.3rem 0 0} #product .listbox ul li:nth-child(3n){ border-right:1px solid #ddd} #product .listbox ul li:nth-child(2n){ border-right:0} #product .listbox ul li:nth-child(n+4){ border-bottom:1px solid #ddd} #product .listbox ul li .info{ display:none} #product .listbox ul li:hover p{ opacity:1} #video{padding:.5rem .2rem;} #video .list{ margin-top:.3rem} #video .list ul{gap:.2rem .2rem} #video .list ul li{width:calc((100% - .2rem) /2)} #video .list ul li .img img{ width:100%} #video .list ul li p{ margin-top:.2rem} #video .list ul li .img .play i{ font-size:.4rem;} #video .list ul li:hover .img .play i{ font-size:.5rem} #video .more{ margin-top:.3rem;} #video .more a{ border-radius:.5rem;line-height:.5rem; padding:0 .3rem;} #video .more a i{ margin-left:.1rem} #news{ padding:.5rem .2rem;} #news .list{display:block;margin-top:.3rem;} #news .list .picnews{ width:100%; position:relative} #news .list .picnews .img{ height:4.5rem;} #news .list .picnews .info{padding:.2rem} #news .list .picnews .info h2{ font-size:.26rem;} #news .list .picnews .info p{ line-height:.3rem; font-size:.22rem; margin-top:.1rem} #news .list .listnews{ width:100%; margin-top:.3rem; padding:.2rem} #news .list .listnews ul{ padding:0 0 0 0} #news .list .listnews ul li{ padding:.2rem 0} #news .list .listnews ul li h2{ font-size:.26rem;} #news .list .listnews ul li p{ line-height:.34rem; margin-top:.1rem; font-size:.22rem} #news .list .listnews ul li .time{ margin-top:.1rem} #news .list .listnews ul li .time i{ font-size:.3rem} #news .list .listnews ul li:hover .time i{ margin-left:.2rem} #hezuo{ width:100%; padding:.5rem .2rem;} #hezuo .list ul{margin-top:.3rem;} #hezuo .list ul li{ width:50%; padding:.2rem} #hezuo .list ul li img{max-height:1rem} #about{padding:.5rem .2rem;} #about .list{ margin-top:.3rem; display:block} #about .list .img{ width:100%} #about .list .img img{ width:100%} #about .list .right{ width:100%; margin-top:.3rem} #about .list .right .logo img{ height:1rem} #about .list .right .text{ line-height:1.9; margin-top:.2rem; font-size:.24rem} #footer{padding:.3rem .2rem} #footer .box{display: block} #footer .box .link{display:none} #footer .box .icon{ text-align:center} #footer .box .icon p{ margin-bottom:.1rem} #footer .box .tel{ text-align:center; margin-top:.2rem} #footer .box .tel h3{ font-size:.3rem; margin-bottom:.2rem} #footer .box .tel p{ font-size:.32rem; margin-bottom:.1rem} #footer .box .tel p a{ color:#fff} #footer .box .qrcode{ margin-top:.2rem;display:none} #footer .box .qrcode p{ color:#fff; margin-top:.2rem} #footer .flink{display:none} #copyright .wrap{display: block; padding:.2rem 0 1.5rem} #copyright .left{text-align:center} #copyright .left i{ display:block} #copyright .right{ display:none} } #nbanner{ width:100%;} #nbanner .wrap{ height:570px; padding-top:100px;display: flex;justify-content:center ;align-items:center} #nbanner .box{ width:100%} #nbanner .box h2{ font-size:32px; color:#fff} #nbanner .box p{ font-size:16px; color:#fff; margin-top:10px} #clist{ padding:20px 0; width:100%; border-bottom:1px solid #eee;display: flex;justify-content:center;align-items:center;gap:10px 30px} #clist a{font-size:16px; position:relative} #clist a::before{position:absolute;bottom:-20px;left:50%;content:'';height:2px; width:0; background:#207fff;transition: all 0.5s; opacity:0} #clist a:hover::before{ width:100%; opacity:1; left:0} #clist a.active{ font-weight:700} #clist a.active::before{ width:100%; opacity:1; left:0} #main{ width:100%; padding:50px 0} #main .title{ border-bottom:1px solid #eee; padding-bottom:20px;display: flex;justify-content:space-between ;align-items:center} #main .title h2{ font-size:28px; font-weight:normal;} #main .title .right{display: flex;align-items:center;gap:0 15px} #main .title .right a{position:relative} #main .title .right a::before{position:absolute;bottom:-20px;left:50%;content:'';height:2px; width:0; background:#207fff;transition: all 0.5s; opacity:0} #main .title .right a:hover::before{ width:100%; opacity:1; left:0} #main .title .right a.active{ font-weight:700;color:#207fff;} #main .title .right a.active::before{ width:100%; opacity:1; left:0} #main .contact{ margin-top:20px} #main .contact .zgs{display: flex;justify-content:space-between ;align-items:flex-start} #main .contact .zgs .left{ width:50%; font-size:16px; line-height:1.9} #main .contact .zgs .left h3{ color:#f30; margin-bottom:20px} #main .contact .zgs .left p i{ padding-left:2em} #main .contact .zgs .right{ width:50%} #main .contact .zgs .right iframe{ height:380px} #main .contact .fgs{ border-top:1px solid #eee; margin-top:30px; padding-top:30px;display: flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:30px} #main .contact .fgs .item{ border:1px solid #eee; padding:20px; width:calc((100% - 30px) / 2); height:180px;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.05);} #main .contact .fgs .item h3{font-size:18px; color:#207fff; margin-bottom:10px} #main .contact .fgs .item p{ line-height:30px; font-size:16px} #main .about{ margin-top:20px} #main .about .content{display: flex;justify-content:space-between ;align-items:flex-start} #main .about .content .left{ width:60%; font-size:16px; line-height:1.9} #main .about .content .right{ width:35%} #main .about .content .right img{ width:100%} #main .about .pic{ border-top:1px solid #eee; margin-top:30px; padding-top:30px;} #main .about .pic ul{ display: flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:20px} #main .about .pic ul li{ border:1px solid #eee; padding:10px; width:calc((100% - 60px) / 4);box-shadow:0px 0px 5px 0px rgba(0,0,0,0.05);} #main .about .pic ul li img{ width:100%} #main .culture{ margin-top:20px} #main .culture .content{display: flex;justify-content:flex-start;align-items:center} #main .culture .content .left{ width:48%; font-size:16px; line-height:1.9} #main .culture .content .right{ width:48%} #main .culture .content .right img{ width:100%} #main .news{ margin-top:20px} #main .news ul{display: flex;justify-content:flex-start;align-items:center;gap:30px 30px;flex-wrap:wrap} #main .news ul li{ width:calc((100% - 60px) / 3)} #main .news ul li .img img{ width:100%} #main .news ul li .info{ border:1px solid #eee; padding:20px; border-top:0} #main .news ul li .info time{ color:#999; display:block} #main .news ul li .info h2{ display:block; font-size:18px; font-weight:normal; margin-top:10px} #main .news ul li .info h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical} #main .news ul li .info p{ line-height:24px; color:#999; margin-top:10px} #main .news ul li .info p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical} #main .news_content{ margin-top:20px} #main .news_content h1{ text-align:center; font-size:24px; padding:30px 0;} #main .news_content .info{ text-align:center; color:#999; border-bottom:1px solid #eee; padding-bottom:10px} #main .news_content .info span{ margin:0 10px} #main .news_content .content{ padding:20px 0; font-size:16px; line-height:1.9} #main .news_content .content div, #main .news_content .content p, #main .news_content .content p span, #main .news_content .content span{text-wrap:normal!important} #main .news_content .content img{ max-width:1000px!important} #main .news_content .content video{width:1000px!important; height:auto!important} #main .news_content .uppage{border-top:1px solid #eee; padding-top:20px} #main .news_content .uppage p{ font-size:16px} #main .service{ padding:20px 0; font-size:16px; line-height:1.9} #main .service p{ padding-bottom:10px} #main .service img{ max-width:800px} #main .down{ margin-top:20px} #main .down ul{display: flex;justify-content:space-between;align-items:center;gap:0px 100px;flex-wrap:wrap} #main .down ul li{ width:calc((100% - 100px) / 2); border-bottom:1px solid #eee} #main .down ul li a{display: flex;justify-content:space-between; padding:15px 0} #main .down ul li a em{ font-size:16px} #main .down ul li a span{ background:#207fff; color:#fff; padding:0 10px; border-radius:60px} #main .solution{ margin-top:20px} #main .solution ul{display: flex;justify-content:flex-start;align-items:center;gap:30px 30px;flex-wrap:wrap} #main .solution ul li{ width:calc((100% - 60px) / 3)} #main .solution ul li .img img{ width:100%} #main .solution ul li .info h2{ display:block; font-size:18px; font-weight:normal; margin-top:20px} #main .solution ul li .info h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical} #main .video{ margin-top:20px} #main .video ul{display: flex;justify-content:flex-start ;align-items:flex-start; flex-wrap:wrap;gap:30px 30px} #main .video ul li{ width:calc((100% - 60px) /3)} #main .video ul li .img{ position:relative} #main .video ul li .img img{ width:100%} #main .video ul li .img .play{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5);display: flex;justify-content:center;align-items:center;} #main .video ul li .img .play i{ font-size:46px; color:#fff;transition:all 0.3s;} #main .video ul li:hover .img .play i{ font-size:56px} #main .video ul li p{ margin-top:10px} #main .clist{ margin-top:20px;display: flex;flex-wrap:wrap} #main .clist a{ border:1px solid #207fff; padding:3px 20px; color:#207fff; margin-right:10px; border-radius:4px} #main .clist a.active{ background:#207fff; color:#fff} #main .product{ margin-top:20px} #main .product ul{display: flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap; gap:30px 30px} #main .product ul li{ width:calc((100% - 90px) / 4); border:1px solid #eee} #main .product ul li .img{ padding:20px;display: flex;justify-content:center;align-items:center;} #main .product ul li .img img{max-width:100%; height:200px} #main .product ul li p{ background:#f7f7f7; padding:10px; text-align:center; line-height:24px;height:68px} #main .product ul li p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical} #main .procontent{ margin-top:20px} #main .procontent .info{display: flex;justify-content:space-between ;align-items:center;} #main .procontent .info .img{ border:1px solid #eee; padding:20px; width:40%;} #main .procontent .info .img .focus{ position:relative; overflow:hidden} #main .procontent .info .img img{ width:100%} #main .procontent .info .intro{ width:55%} #main .procontent .info .intro h1{ font-size:24px} #main .procontent .info .intro p{ color:#999; margin-top:10px; line-height:26px} #main .procontent .info .intro .tel{ color:#f60; font-size:18px; margin-top:10px} #main .procontent .info .intro .qrcode{ margin-top:30px} #main .procontent .info .intro .qrcode img{ width:150px} #main .procontent .view{ margin-top:50px;} #main .procontent .view .tabs{ background:#f2f2f2;display: flex;} #main .procontent .view .tabs a{ line-height:46px; padding:0 25px; font-size:16px} #main .procontent .view .tabs a.active{ background:#fff; color:#207fff; position:relative; font-weight:700} #main .procontent .view .tabs a.active::before{position:absolute;top:0;left:0;content:'';height:3px; width:100%; background:#207fff} #main .procontent .view .listbox{ overflow:hidden} #main .procontent .view .listbox .mycontent{ padding:20px 0; line-height:1.9; font-size:16px} #main .procontent .view .listbox .mycontent img{ max-width:100%!important} #main .procontent .view .listbox .mycontent video{width:100%!important; height:auto!important} #fenye{padding:50px 0 0;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.page-num-current{font-weight:700;color:#fff;background:#0082fe;border:1px solid #0082fe} #fenye a:hover{background:#0082fe;color:#fff;border:1px solid #0082fe} #fenye span{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee;background:#FFF} @media (max-width:800px){ .wrap{ padding:0px} body,html{font-size:.23rem;line-height:.34rem} #nbanner{ width:100%;} #nbanner .wrap{ height:5rem; padding:1rem .2rem 0;} #nbanner .box{text-align:center} #nbanner .box h2{ font-size:.4rem;} #nbanner .box p{ font-size:.22rem;margin-top:.2rem} #clist{ padding:.3rem 0; gap:.2rem .2rem; flex-wrap:wrap} #clist a{font-size:.24rem;} #clist a::before{bottom:-.03rem;} #main{ padding:.5rem .2rem} #main .title{padding-bottom:.2rem; display:block} #main .title h1{ font-size:.36rem;} #main .title .right{flex-wrap:wrap;gap:.1rem .2rem; margin-top:.3rem} #main .title .right a::before{bottom:-.05rem;} #main .contact{ margin-top:20px} #main .contact .zgs{display: block} #main .contact .zgs .left{ width:100%; font-size:.24rem; line-height:1.8} #main .contact .zgs .left h3{margin-bottom:.2rem} #main .contact .zgs .left p i{ padding-left:2em} #main .contact .zgs .right{ width:100%; margin-top:.5rem} #main .contact .zgs .right iframe{ height:4rem} #main .contact .fgs{margin-top:.3rem; padding-top:.3rem;gap:.3rem} #main .contact .fgs .item{ padding:.2rem; width:100%; height: auto;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.05);} #main .contact .fgs .item h3{ font-size:.24rem;margin-bottom:.1rem} #main .contact .fgs .item p{ line-height:1.8; font-size:.22rem} #main .about{ margin-top:.2rem} #main .about .content{display: block} #main .about .content .left{ width:100%; font-size:.24rem; line-height:1.8} #main .about .content .right{ width:100%} #main .about .content .right img{ margin-top:.3rem} #main .about .pic{margin-top:.3rem; padding-top:.3rem;} #main .about .pic ul{ gap:.2rem} #main .about .pic ul li{ padding:.1rem; width:calc((100% - .2rem) / 2);} #main .culture{ margin-top:.2rem} #main .culture .content{display: block} #main .culture .content .left{ width:100%; font-size:.24rem; line-height:1.8} #main .culture .content .right{ width:100%} #main .culture .content .right img{ margin-top:.3rem} #main .news{ margin-top:.2rem} #main .news ul{gap:.4rem 0;} #main .news ul li{ width:100%} #main .news ul li .info{padding:.2rem;} #main .news ul li .info h2{ font-size:.26rem;margin-top:.1rem; font-weight:700} #main .news ul li .info h2{-webkit-line-clamp:5;} #main .news ul li .info p{ line-height:.34rem;margin-top:.1rem} #main .news ul li .info p{-webkit-line-clamp:5;} #main .news_content{ margin-top:.2rem} #main .news_content h1{font-size:.3rem; padding:.3rem;} #main .news_content .info{ color:#999; border-bottom:1px solid #eee; padding-bottom:.1rem} #main .news_content .info span{ margin:0; display:none} #main .news_content .info span:nth-child(3){ display:block} #main .news_content .content{ padding:.2rem 0; font-size:.24rem; line-height:1.8} #main .news_content .content p{ padding-bottom:.1rem} #main .news_content .content img{ max-width:100%} #main .news_content .content video{width:100%!important; height:auto!important} #main .news_content .uppage{padding-top:.2rem} #main .news_content .uppage p{ font-size:.24rem} #main .service{ padding:.2rem 0; font-size:.24rem; line-height:1.8} #main .service p{ padding-bottom:.1rem} #main .service img{ max-width:100%} #main .down{ margin-top:.2rem} #main .down ul{display: block} #main .down ul li{ width:100%; border-bottom:1px solid #eee} #main .down ul li a{ padding:.2rem 0} #main .down ul li a em{ font-size:.24rem} #main .down ul li a em{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical} #main .down ul li a span{ background:#207fff; color:#fff; padding:.05rem .2rem; border-radius:60px; font-size:.2rem; width:1.3rem} #main .solution{ margin-top:.2rem} #main .solution ul{gap:.4rem 0;} #main .solution ul li{ width:100%} #main .solution ul li .info h2{ font-size:.26rem;margin-top:.2rem; font-weight:700} #main .solution ul li .info h2{-webkit-line-clamp:5;} #main .video{ margin-top:.2rem} #main .video ul{gap:.2rem .2rem} #main .video ul li{width:calc((100% - .2rem) /2)} #main .video ul li .img img{height:2rem} #main .video ul li p{ margin-top:.2rem} #main .video ul li .img .play i{ font-size:.4rem;} #main .video ul li:hover .img .play i{ font-size:.5rem} #main .clist{ margin-top:.3rem;display: flex;} #main .clist a{ padding:.05rem .3rem; margin-right:.2rem;} #main .product{margin-top:.3rem} #main .product ul{display: flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap; gap:.3rem .2rem} #main .product ul li{ width:calc((100% - .2rem) / 2)} #main .product ul li .img img{height:2rem} #main .product ul li p{ padding:.2rem .1rem; line-height:.36rem;height:.95rem} #main .procontent{ margin-top:.3rem} #main .procontent .info{display: block;} #main .procontent .info .img{ border:0; padding:0; width:100%} #main .procontent .info .img img{ width:100%} #main .procontent .info .intro{ width:100%; margin-top:.3rem; line-height:.4rem} #main .procontent .info .intro h1{ font-size:.3rem} #main .procontent .info .intro p{margin-top:.1rem; line-height:.34rem; font-size:.22rem} #main .procontent .info .intro .tel{font-size:.3rem; margin-top:.3rem; text-align:center} #main .procontent .info .intro .qrcode{ margin-top:.3rem; text-align:center} #main .procontent .info .intro .qrcode img{ width:2rem} #main .procontent .view{ margin-top:.5rem;} #main .procontent .view .tabs a{ line-height:.64rem; padding:0 0; width:33.33%; font-size:.24rem; text-align:center} #main .procontent .view .listbox .mycontent{ padding:.2rem 0; line-height:1.8; font-size:.24rem} #main .procontent .view .listbox .mycontent img{ max-width:100%!important} #main .procontent .view .listbox .mycontent video{width:100%!important; height:auto!important} #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 .page-num,#fenye .prev{ display:none} #fenye .page-num-current{ display:inline-block} } #kefu{ width:70px; position:fixed; right:5px; top:50%; z-index:9999;transform:translateY(-50%);} #kefu .item{ text-align:center; padding:12px 0; position:relative; cursor:pointer; background:#207fff; border-radius:6px; margin:2px 0} #kefu .item i{ font-size:28px; color:#fff} #kefu .item p{ color:#fff; line-height:14px; font-size:12px} #kefu .item .kf_ewm{ display:none; position:absolute; right:80px; top:0; background:#f8f8f8; padding:20px; border-radius:6px;} #kefu .item .kf_ewm img{ width:100px} #kefu .item .kf_phone{ display:none; position:absolute; right:80px; top:0; background:#f8f8f8; padding:20px;; border-radius:6px; font-size:18px; font-weight:bold; width:200px} #kefu .item:hover .kf_ewm{ display: block} #kefu .item:hover .kf_phone{ display: block} #kefu .item:hover{ background:#f60} #footnav{ width:100%; background:#207fff; position:fixed; left:0; bottom:0;z-index:999;display:none} #footnav ul{display: flex;justify-content:space-between ;align-items:center;} #footnav ul li{ width:25%; text-align:center; padding:.05rem 0} #footnav ul li i{ font-size:.33rem; color:#fff} #footnav ul li .icon{ height:.5rem;display: flex;justify-content:center;align-items:center;} #footnav ul li .icon img{ height:.5rem} #footnav ul li p{ color:#fff; font-size:.2rem} @media (max-width:800px){ #kefu{ display:none} #footnav{display:block} }