锘?*************************************************************************/ /*鍏ㄥ眬鏍峰紡寮€濮?/ /*************************************************************************/ @charset "utf-8"; *{margin:0;padding:0;outline:0;} body,html{overflow-x:hidden;color:#534a45;font:14px/30px 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,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;} 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:#534a45;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;} a:hover{color:#2984c6;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:1400px;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);} @font-face { font-family: "quicksand"; src: url('../fonts/quicksand.ttf') format('truetype'); font-weight: normal; font-style: normal; } #header{ width:100%; position:fixed; left:0; top:0; z-index:999; border-bottom:1px solid rgba(255,255,255,.1)} #header .wrap{display: flex;justify-content:space-between ;align-items:center; height:100px} #header .logo .b{ display:none} #header .right{display: flex;justify-content:flex-start ;align-items:center;} #header .nav ul li{ float:left;margin-left:30px; position:relative;} #header .nav ul li h3{display: flex;justify-content:start ;align-items:center;} #header .nav ul li h3 a{ font-size:16px; color:#fff; font-weight:normal; line-height:100px; display: inline-table} #header .nav ul li h3 .mdown{ color:#fff; margin-left:5px} #header .nav ul li .sub{ display:none; position:absolute; left:0px; top:86px; background:#fff;; width:200px; padding:0px 0px;box-shadow: 0 6px 12px rgba(0,0,0,.175);} #header .nav ul li .sub a{ padding:0 20px; border-bottom:1px solid #eee; display:block; line-height:45px} #header .nav ul li .sub a:hover{ background:#2984c6; color:#fff} #header .tel{ color:#fff; font-size:24px; margin-left:50px} #header .tel span{ margin-left:10px; font-family:"quicksand"} #header.scroll{ background:#fff; border-bottom:1px solid #eee} #header.scroll .wrap{ height:70px} #header.scroll .logo .b{ display:block} #header.scroll .logo .w{ display:none} #header.scroll .nav ul h3 a{ color:#333} #header.scroll .nav ul li h3 .mdown{ color:#333;} #header.scroll .tel{ color:#333;} #header .mnav{ display:none} #banner{ position:relative} #banner .swiper-slide{ position:relative} #banner .swiper-slide img{ width:100%} #banner .swiper-slide .text{ position:absolute; left:0; top:0; width:100%; height:100%;display: flex;;align-items:center;justify-content:center; background:rgba(0,0,0,0)} #banner .swiper-slide .text .box{ text-align:center} #banner .swiper-slide .text .box h3{ font-size:46px; color:#fff} #banner .swiper-slide .text .box p{ font-size:28px; color:#fff; margin-top:30px; font-family:"quicksand"} .stitle{ width:100%;display: flex;justify-content:space-between ;align-items:center;padding-bottom:20px; border-bottom:1px solid #eee} .stitle h2{ font-size:28px;} .stitle span a{ font-size:16px; color:#999} .stitle span i{ margin-right:5px} .stitle.w h2{ color:#fff} .stitle.w span a{color:#fff} .stitle.w span i{color:#fff} #product{ width:100%; padding:60px 0; position:relative} #product .list{display: flex;justify-content:space-between ;align-items:start; padding:0 0%; margin-top:50px} #product .list .left{ width:72%; border:1px dashed #ddd; position:relative; padding:50px 30px; box-sizing:border-box} #product .list .title{ width:100%; text-align:center; position:absolute; left:0; top:-15px; z-index:10; font-size:30px;line-height:30px; color:#f60} #product .list .title span{ background:#fff; padding:0 10px} #product .list .listbox{display: flex;justify-content:space-between ;align-items:start;} #product .list .listbox .item{ background:#3d8bc4; padding:20px; text-align:center; border-radius:6px; width:30%} #product .list .listbox .item h3{ font-size:18px; font-weight:bold; margin-bottom:20px;color:#fff;} #product .list .listbox .item p{ display:block; background:#fff; margin-top:10px; border-radius:6px; line-height:40px; font-size:16px} #product .list .smalltitle{ background:#f60; text-align:center; line-height:40px; border-radius:6px; color:#fff; margin-top:20px; font-size:16px} #product .list .right{ width:26%; border:1px dashed #ddd; position:relative; padding:50px 30px} #product .list .right .listbox .item{width:100%} #product .list .listbox .item1 p{ line-height:115px} #product .list .listbox .item2 p{ line-height:calc(220px / 3)} #product .sclist{ padding:30px 0 50px} #product .tabs{ margin-top:30px} #product .tabs a{ float:left; width:calc((100% - 60px) / 4); background:#f0f4fb; position:relative; margin-right:20px} #product .tabs a:last-child{ margin-right:0} #product .tabs a{ padding:45px 50px;font-size:20px;color:#2984c6; font-weight:900; line-height:40px; text-align:center} #product .tabs a:hover { background:#2984c6;color:#fff} #about{ background:#f5f5f5; padding:60px 0} #about .list .top{ margin-top:10px} #about .list .top .about{ height:320px; padding:3% 4% 0;width:calc((100% - 40px) /3);background:#fff; position:relative} #about .list .top .about .t{ font-size:30px; font-weight:bold; position:relative} #about .list .top .about .t:before{content:"";width:30%;height:4px;position:absolute;bottom:-20px;background-color:#f60} #about .list .top .about .content{ margin-top:30px; font-size:16px} #about .list .top .about .more{ margin-top:20px} #about .list .top .about .more a{ background:#2984c6; color:#fff; padding:10px 30px} #about .list .top .about .more a:hover{ background:#f60} #about .list .top .about .more i{ margin-right:5px } #about .list .top .pic{ width:calc(100% - ((100% - 40px) /3) - 20px); height:320px; margin-right:0; position:relative} #about .list .top .pic .img{ height:100%; overflow:hidden} #about .list .top .pic .img img{width:100%;height:100%;object-fit:cover} #about .list .top .pic p{ position:absolute; width:100%; text-align:center; left:0; bottom:0; padding:50px 0 10px;color:#fff; font-size:16px;background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));} #about .list .other{ margin-top:20px; position:relative} #about .list .other .swiper-slide{ width:calc((100% - 40px) /3); height:280px; float:left; background:#fff; position:relative} #about .list .other .swiper-slide .img{ height:100%; overflow:hidden} #about .list .other .swiper-slide .img img{width:100%;height:100%;object-fit:cover} #about .list .other .swiper-slide p{ position:absolute; width:100%; text-align:center; left:0; bottom:0; padding:50px 0 10px;color:#fff; font-size:16px;background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));} #about .list .other .t_prev{ position:absolute; left:0; top:50%; margin-top:-40px; z-index:999; background:#f60; line-height:80px;height:80px; padding:0 10px; color:#fff} #about .list .other .t_next{ position:absolute; right:0; top:50%; margin-top:-40px; z-index:999; background:#f60; line-height:80px;height:80px; padding:0 10px; color:#fff} #news{ width:100%; padding:60px 0} #news .list ul li{ float:left; width:calc((100% - 40px) / 3); height:300px; margin-right:20px; margin-top:30px; 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:300px; 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{ font-size:15px; line-height:28px; 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} #news .list ul li:hover{} #news .list ul li:hover .info{ height:auto;background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,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:90px 0; background:url(../images/hezuo_bg.png) no-repeat center center; background-size:cover} #client .list{ background:#fff; overflow:hidden} #client .list ul li{ float:left; width:calc(100% / 5); text-align:center; padding:30px 0; border:1px solid #eee} #client .list ul li img{width:60%} #client .tabs a{ background:#fff;; line-height:30px; border-radius:30px; padding:0 15px; display:inline-block; margin-left:10px} #client .tabs a.active{ background:#2984c6; color:#fff} #client .tabs a:hover{ background:#f60; color:#fff} #footer{ width:100%; background:#f5f6f7} #footer .map{ padding:40px 0;} #footer .map .qrcode{ text-align:center} #footer .map .qrcode img{ width:120px} #footer .map .item{ margin-left:80px} #footer .map .item h2{ margin-bottom:20px} #footer .map .item h2 a{ font-size:16px; font-weight:normal} #footer .map .item p{ line-height:30px} #footer .map .item p a{ color:#666} #footer .map .item p a:hover{ color:#206cde} #footer .map .contact{ width:340px; text-align:right} #footer .map .contact p{ margin-top:10px;} #footer .map .contact p:nth-child(1){ margin-top:0px; color:#333; font-size:16px; } #footer .map .contact p:nth-child(3){ margin-top:40px; color:#333; font-size:16px;} #footer .map .contact p:nth-child(2){ margin-top:20px; color:#2984c6; font-size:40px; font-family:"quicksand"; font-weight:bold} #footer .map .contact p:nth-child(4){ color:#666} #footer .cor{ border-top:1px solid #eee; padding:20px 0; text-align:center} #footer .cor i{ padding:0 5px} #about2{ width:100%; padding:50px 0} #about2 .wrap{display: flex;justify-content:space-between ;align-items:center;} #about2 .text{ width:45%; margin-right:7%} #about2 .text h2{ font-size:28px} #about2 .text .content{ margin-top:20px; line-height:26px} #about2 .img{ width:45%} #about2 .img img{ width:100%} .sclist{} .sclist ul li{ float:left; width:22%; text-align:center; margin-right:4%} .sclist ul li:nth-child(4n){ margin-right:0} .sclist ul li .icon span{ width:120px; height:120px; border-radius:120px; border:2px solid #eee; display:block; margin:0 auto; padding:8px} .sclist ul li .icon span i{ width:100px; height:100px;border-radius:120px; background:#eee; display:block; margin:0 auto; line-height:100px; text-align:center; font-size:36px} .sclist ul li .info{ margin-top:20px} .sclist ul li .info h2{ font-size:16px; position:relative} .sclist ul li .info h2:before{content:"";width:10%;height:2px;position:absolute; left:45%;bottom:-10px;background-color:#2984c6;} .sclist ul li .info p{ line-height:24px; margin-top:40px; color:#999} .sclist ul li:hover .icon span, .sclist ul li:hover .icon span i{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;} .sclist ul li:hover .icon span{ border:2px solid #2984c6} .sclist ul li:hover .icon span i{ background:#2984c6; color:#fff} .sclist ul li:hover .info h2{ color:#2984c6} .sclist ul li:hover .info p{ color:#888} #service{ padding:30px 0} @media (max-width:1450px){ .wrap{ padding:0 3%} #header .nav ul li{margin-left:20px} #banner .swiper-slide .text{ padding:0 3%} } @media (max-width:1200px){ #header .nav ul li{margin-left:20px} #header .tel{ display:none} #product .list .tabs a .t{ padding:45px 0px 0;} } @media (max-width:900px){ body,html{ font-size:.21rem; line-height:.34rem} .wrap{ width:100%;padding:0} #header{ padding:0 .3rem} #header .wrap{height:.9rem} #header .logo img{ height:.4rem} #header .tel{ display:none} #header .mnav{position:relative;display:block;width:.34rem; height:.33rem;cursor:pointer; margin-left:.1rem} #header .mnav span{position:absolute;display:block;width:.34rem;height:.03rem;background:#fff;transition:all .5s;} #header .mnav .s1{top:.05rem;} #header .mnav .s2{top:.15rem;width:.26rem;} #header .mnav .s3{top:.25rem;} #header .mnav.isopen .s1{top:.15rem;transform:rotate(45deg);} #header .mnav.isopen .s2{width:0;opacity:0;} #header .mnav.isopen .s3{top:.15rem;transform:rotate(-45deg);} #header .nav{position: fixed;background:#fff;height: auto; min-height:100vh;width:100%;top:.71rem;z-index:105;padding:.1rem .5rem 0;transform:translatex(105%);left:0;} #header .nav ul li{padding:0;display: block;float: inherit;margin-right:0;margin-left:0; height:inherit} #header .nav ul li h3{ line-height:.7rem; height:.7rem; font-weight:normal;border-bottom:1px solid #eee;} #header .nav ul li h3{display: flex;justify-content:space-between ;align-items:center;} #header .nav ul li h3 a{font-size:.26rem;line-height:.7rem;display: inline-table;position:relative; padding:0; color:#333} #header .nav ul li h3 .mdown{ text-align:right; padding-left:10%;} #header .nav ul li h3 .mdown i{ text-align:right; font-size:.28rem; color:#999;-webkit-transition: all .3s;transition: all .3s;} #header .nav ul li:hover{ background: none;} #header .nav ul li:hover h3 i{-webkit-transform: rotate(-180deg);-ms-transform: rotate(-180deg);transform: rotate(-180deg);} #header .nav ul li.curr h3 a{ background:none; color:inherit} #header .nav ul li.on h3 a{ color:#2984c6;} #header .nav ul li .sub{ position: inherit; left:auto; top: auto; width:auto; margin:0; z-index:100; padding-left:.2rem;box-shadow: none} #header .nav ul li .sub dd{ padding:0} #header .nav ul li .sub dd a{ line-height:.7rem;; margin:0; border-bottom:1px solid #eee; color:#333} #header .nav ul li .sub dd a:first-child{ padding-top:0} #header .nav ul li .sub dd a:last-child{ padding-bottom:0} #header .nav ul li .sub dd a{ display:block; padding-left:0; border-left:0; font-size:.24rem; text-align: left;color:#68747f;} #header .nav ul li .sub dd a:hover{color:#2984c6; background:none} #header .nav.isopen{transform:translatex(0);} #header.scroll .wrap{height:.7rem} #header.scroll .mnav span{background:#333;} #header.scroll .logo .b{ display:block} #header.scroll .logo .w{ display:none} #header.scroll .nav ul h3 a{ color:#333} #banner .swiper-slide{height:5rem} #banner .swiper-slide img{width:100%;height:100%;object-fit:cover} #banner .swiper-slide .text .box{ padding:0 .3rem} #banner .swiper-slide .text .box h3{ font-size:.3rem; } #banner .swiper-slide .text .box p{ font-size:.24rem; margin-top:.2rem;} .stitle{ padding-bottom:.2rem; border-bottom:.01rem solid #eee} .stitle h2{ font-size:.3rem;} .stitle span a{ font-size:.22rem; color:#999} .stitle span i{ margin-right:.05rem} #product{padding:.6rem .3rem;} #product .list{display: block;margin-top:50px} #product .list .left{ width:100%; padding:.3rem;} #product .list .title{ top:-.15rem; font-size:.26rem;line-height:.3rem;} #product .list .title span{ background:#fff; padding:0 .1rem} #product .list .listbox .item{ padding:.2rem; width:32%;margin-top:.2rem} #product .list .listbox .item h3{ font-size:.24rem;margin-bottom:.2rem} #product .list .listbox .item p{ margin-top:.1rem; line-height:.3rem; font-size:.22rem; padding:.1rem 0} #product .list .smalltitle{ line-height:.5rem;margin-top:.2rem; font-size:.22rem} #product .list .right{ width:100%;padding:.3rem; margin-top:.8rem} #product .sclist{ padding:.3rem 0px} #product .tabs{ margin-top:.0rem} #product .tabs a{ float:left; width:calc((100% - .3rem) / 2);background:#f0f4fb; position:relative; margin-right:.3rem; margin-top:.2rem} #product .tabs a:nth-child(2n){ margin-right:0} #product .tabs a{ padding:.3rem .3rem;font-size:.24rem; font-weight:900; line-height:.4rem; text-align:center} #about{padding:.6rem .3rem} #about .list .top .about{ height:inherit; padding:.3rem .3rem .5rem;width:100%;float: inherit;} #about .list .top .about .t{ font-size:.26rem;} #about .list .top .about .info{ font-size:.22rem; margin-top:.2rem;} #about .list .top .about .info:before{height:.04rem;bottom:-.3rem;} #about .list .top .about .content{ margin-top:.6rem; font-size:.22rem; line-height:.34rem} #about .list .top .about .more{ margin-top:.3rem} #about .list .top .about .more a{ padding:.1rem .3rem; font-size:.22rem} #about .list .top .about .more i{ margin-right:.05rem } #about .list .top .pic{ width:100%; height: inherit; float: inherit;margin:.3rem 0 0;} #about .list .top .pic .img{ height:3rem;} #about .list .other{ margin-top:.2rem;} #about .list .other .swiper-slide{ width:50%; height:2.2rem;} #about .list .other .swiper-slide .img{ height:2.2rem; } #about .list .other .swiper-slide p{padding:.5rem 0 .1rem; font-size:.2rem;} #about .list .other .t_prev{ margin-top:-.5rem; line-height:1rem;height:1rem; padding:0 .1rem;} #about .list .other .t_next{margin-top:-.5rem; line-height:1rem;height:1rem; padding:0 .1rem;} #news{ width:100%; padding:.6rem .3rem} #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:.26rem} #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:.26rem; color:#333} #news .list ul li:hover .info p{ font-size:.2rem; 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(new-more.png) no-repeat left center; background-size:.9rem auto; padding-left:1rem; font-style:italic; color:#999} #client{padding:.9rem .3rem;} #client .list ul li{width:50%;} #client .stitle{ display:block} #client .tabs{ margin-top:.3rem; text-align:center} #client .tabs a{ background:#fff;; line-height:.4rem; border-radius:.4rem; padding:0 .05rem; display:inline-block; margin-left:.0rem; font-size:.2rem} #about2{ width:100%; padding:.3rem} #about2 .wrap{display: block} #about2 .text{ width:100%; margin-right:0} #about2 .text h2{ font-size:.26rem} #about2 .text .content{ margin-top:.22rem; line-height:.34rem} #about2 .img{ width:100%; margin-top:.3rem} #about2 .img img{ width:100%} #footer .map{ padding:.5rem .3rem;} #footer .map .qrcode{ text-align:center; width:100%; float:inherit} #footer .map .qrcode img{ width:120px} #footer .map .item{ display:none} #footer .map .contact{ text-align:center; width:100%; float:inherit; margin-top:.5rem} #footer .map .contact p{ margin-top:.2rem;} #footer .map .contact p:nth-child(1){ font-size:.21rem; } #footer .map .contact p:nth-child(3){ margin-top:.2rem; font-size:.21rem;} #footer .map .contact p:nth-child(2){ margin-top:.2rem; font-size:.4rem; } #footer .cor{padding:.2rem 0;font-size:.2rem; line-height:.3rem} #footer .cor i{ padding:0; display:block; } #service{ padding:.3rem} .sclist ul li{width:45%;margin-right:10%; margin-top:.3rem} .sclist ul li:nth-child(2n){ margin-right:0} .sclist ul li .icon span{ width:1.5rem; height:1.5rem; border-radius:1.5rem; border:.02rem solid #eee; padding:.08rem} .sclist ul li .icon span i{ width:1.3rem; height:1.3rem;border-radius:1.3rem; line-height:1.3rem; text-align:center; font-size:.44rem} .sclist ul li .info{ margin-top:.2rem} .sclist ul li .info h2{ font-size:.26rem; } .sclist ul li .info h2:before{content:"";width:10%;height:.02rem;position:absolute; left:45%;bottom:-.2rem;background-color:#2984c6;} .sclist ul li .info p{ line-height:.3rem; margin-top:.4rem; height:1.5rem; overflow:hidden} .sclist ul li .info p{word-break:break-all;text-overflow:ellipsis;-webkit-line-clamp:5;display:-webkit-box;-webkit-box-orient:vertical} .sclist ul li:hover .icon span{ border:.02rem solid #2984c6} .sclist ul li:hover .icon span i{ background:#2984c6; color:#fff} .sclist ul li:hover .info h2{ color:#2984c6} .sclist ul li:hover .info p{ color:#888} } .h_title{ text-align:center} .h_title h2{ font-size:30px; font-weight:700} .h_title p{ font-size:14px; margin-top:10px; color:#848484; text-transform:uppercase;font-family:"quicksand"} #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:#4160a4;border:1px solid #4160a4} #fenye a:hover{background:#4160a4;color:#fff;border:1px solid #4160a4} #fenye span{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee;background:#FFF} #nbanner{ background-size:cover; background-repeat:no-repeat; background-position:center center} #nbanner .wrap{height:500px;display:flex;align-items:center; } #nbanner .text{width:100%;text-align:center; margin-top:100px} #nbanner .text h2{ font-size:40px; font-weight: normal; color:#fff; display:block; letter-spacing:15px} #nbanner .text p{ color:#fff; font-size:24px; display:block; margin-top:20px; text-transform:uppercase;font-family:"quicksand"; letter-spacing:5px} #nmain{ width:100%;} #nmain .about{display:flex;justify-content:space-between;align-items:center; padding:50px 0} #nmain .about .text{ width:48%; font-size:16px} #nmain .about .img{ width:48%} #nmain .about .img img{ width:100%} #nmain .honnr {padding:50px 0; border-top:1px solid #eee} #nmain .honnr .swiper-container{display:flex;justify-content:space-between;align-items:center; margin-top:30px;} #nmain .honnr .swiper-slide{ width:15%} #nmain .honnr .swiper-slide img{ width:100%} #nmain .service{display:flex;justify-content:space-between;align-items:center; padding:50px 0} #nmain .service .text{ width:48%; font-size:16px} #nmain .service .img{ width:48%} #nmain .service .img img{ width:100%} #nmain .news{ padding:20px 0 50px} #nmain .news ul li{ border-bottom:1px solid #eee; padding:20px 0;display:flex;justify-content:space-between;align-items:center;} #nmain .news ul li a{ display:flex;justify-content:space-between;align-items:center;} #nmain .news ul li .img{ width:280px; height:180px; overflow:hidden} #nmain .news ul li .img img{width:100%;height:100%;object-fit:cover} #nmain .news ul li .info{ width:calc(100% - 280px); padding-left:40px} #nmain .news ul li .info h2{ font-size:20px; font-weight:normal} #nmain .news ul li .info p{ line-height:26px; margin-top:10px; color:#888} #nmain .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} #nmain .news ul li .info time{ display:block; margin-top:10px; color:#888} #nmain .newscontent{ padding:40px 0} #nmain .newscontent h1{ font-size:28px; padding:20px 0; text-align:center; font-weight:normal} #nmain .newscontent .info{ border-bottom:1px solid #eee; text-align:center; padding-bottom:10px} #nmain .newscontent .info span{ margin:0 10px; color:#999} #nmain .newscontent .mycontent{ padding:40px 0; line-height:200%; font-size:16px} #nmain .newscontent .mycontent img{ max-width:100%} #nmain .newscontent .mycontent p{ padding-bottom:10px} #nmain .newscontent .updown{ border-top:1px solid #eee; padding:20px 0 0} #nmain .newscontent .updown p{ font-size:16px} #nmain .newscontent .updown p a{ color:#94c93d} #nmain .product .pr_about{ padding:50px 0} #nmain .product .pr_about .content{ padding:40px 0; line-height:200%; font-size:16px} #nmain .product .pr_about .content img{ max-width:100%} #nmain .product .pr_case{ padding:50px 0; border-top:1px solid #eee} #nmain .product .pr_case .case_list{ margin-top:30px} #nmain .product .pr_case .case_list ul li{ float:left; width:calc((100% - 90px) / 4); margin-right:30px} #nmain .product .pr_case .case_list ul li:nth-child(4n){ margin-right:0} #nmain .product .pr_case .case_list ul li img{ width:100%} #nmain .product .pr_case .case_list ul li p{ text-align:center; margin-top:10px} #nmain .product .pr_client{ padding:50px 0; border-top:1px solid #eee} #nmain .product .pr_client .client_list ul li{ float:left; width:calc((100% - 100px) / 6); margin-right:20px; margin-top:30px; border:1px solid #eee; padding:10px 30px} #nmain .product .pr_client .client_list ul li:nth-child(6n){ margin-right:0} #nmain .product .pr_client .client_list ul li img{ width:100%} #nmain .customer .list{ padding:50px 0; border-top:1px solid #eee} #nmain .customer .list ul li{ float:left; width:calc((100% - 100px) / 6); margin-right:20px; margin-top:30px; border:1px solid #eee; padding:30px} #nmain .customer .list ul li:nth-child(6n){ margin-right:0} #nmain .customer .list ul li img{ width:100%} #nmain .job_content{ padding:40px 0; line-height:200%; font-size:16px} #nmain .job_content img{ max-width:100%} #nmain .contact{ padding:40px 0} #nmain .contact .mycontent{ font-size:18px; padding-bottom:40px; line-height:36px} #nmain .contact iframe{ height:400px} @media (max-width:800px){ body,html{ font-size:.23rem; line-height:.34rem} #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} .h_title h2{ font-size:.28rem;} .h_title p{ font-size:.18rem; margin-top:.05rem;} #nbanner .wrap{height:5rem;} #nbanner .text{margin-top:.9rem} #nbanner .text h2{ font-size:.4rem;letter-spacing:.05rem} #nbanner .text p{ font-size:.26rem;margin-top:.2rem;letter-spacing:.05rem} #nmain{ padding:0 .3rem;} #nmain .about{display: block; padding:.5rem 0} #nmain .about .text{ width:100%; font-size:.24rem; line-height:.4rem} #nmain .about .img{ width:100%; margin-top:.3rem} #nmain .honnr {padding:.5rem 0; border-top:1px solid #eee} #nmain .honnr ul{margin-top:0;flex-wrap:wrap;justify-content:flex-start;} #nmain .honnr ul li{ width:32%; margin-top:.3rem; margin-right:2%} #nmain .honnr ul li:nth-child(3n){ margin-right:0} #nmain .honnr ul li img{ width:100%} #nmain .service{display: block; padding:.5rem 0} #nmain .service .text{ width:100%; font-size:.24rem; line-height:.4rem} #nmain .service .img{ width:100%; margin-top:.3rem} #nmain .news{ padding:.2rem 0 .5rem} #nmain .news ul li{ border-bottom:.01rem solid #ddd; padding:.3rem 0;} #nmain .news ul li .img{ width:30%; height:1.2rem;} #nmain .news ul li .info{ width:70%; padding-left:.2rem} #nmain .news ul li .info h2{ font-size:.23rem;} #nmain .news ul li .info p{ display:none} #nmain .news ul li .info h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical} #nmain .news ul li .info time{ margin-top:.1rem;} #nmain .contact .formbox{ margin-top:.2rem} #nmain .contact .formbox .item{ float: inherit; width:100%; margin-top:.2rem} #nmain .contact .formbox .item.fr{ float:inherit; width:100%} #nmain .contact .formbox .item label{ font-size:.24rem} #nmain .contact .formbox .text{ width:100%; border:1px solid #ddd; line-height:.4rem; padding:.1rem 0; text-indent:.1rem; float:left; border-radius:0} #nmain .contact .formbox .item_textarea{ float:left; width:100%; margin-top:10px} #nmain .contact .formbox .item_textarea .textarea{ width:100%; border:1px solid #ddd; padding:10px; height:160px; float:left} #nmain .contact .formbox .button{ float:left; width:100%; margin-top:.1rem; } #nmain .contact .formbox .button .btn{ margin-top:.1rem; display:block; border:0; padding:.2rem 0; width:100%; text-align:center;font-size:.24rem} #nmain .product .pr_about{ padding:.5rem 0} #nmain .product .pr_about .content{ padding:.3rem 0;font-size:.24rem} #nmain .product .pr_case{ padding:.5rem 0;} #nmain .product .pr_case .case_list{ margin-top:0} #nmain .product .pr_case .case_list ul li{ float:left; width:calc((100% - .3rem) / 2); margin-right:.3rem; margin-top:.3rem} #nmain .product .pr_case .case_list ul li:nth-child(2n){ margin-right:0} #nmain .product .pr_case .case_list ul li p{ margin-top:.2rem} #nmain .product .pr_client{ padding:.5rem 0;} #nmain .product .pr_client .client_list ul li{ float:left; width:calc((100% - .6rem) / 3); margin-right:.3rem; margin-top:.3rem; padding:.1rem .3rem} #nmain .product .pr_client .client_list ul li:nth-child(3n){ margin-right:0} #nmain .customer .list{ padding:.5rem 0; border-top:1px solid #eee} #nmain .customer .list ul li{ float:left; width:calc((100% - .3rem) / 2); margin-right:.3rem; margin-top:.3rem; padding:.1rem .3rem} #nmain .customer .list ul li:nth-child(2n){ margin-right:0} #nmain .job_content{ padding:.3rem 0; font-size:.24rem} #nmain .contact{ padding:.3rem 0} #nmain .contact .mycontent{ font-size:.24rem; padding-bottom:.4rem; line-height:.44rem} #nmain .contact iframe{ height:4rem} }