/*初始化样式*/ html{margin:0;padding:0;border:0;} div,span,object,iframe,h1,h2,h3,h4,p,blockquote,pre,a,address,code,b,em,img, dl,dt,dd,ol,ul,li,fieldset,form,label,footer, header,hgroup,navs,section {margin:0;padding:0;border:0;} body{background:#fff;color:#333;position:relative;font:12px/1.5 Microsoft YaHei,arial,宋体,sans-serif;vertical-align:baseline;width:100%;overflow-x:hidden;} a{text-decoration:none;outline:none;} a:hover,a:active,a:focus{text-decoration:none;outline:none;} input{padding:0;margin:0;font-family:'Microsoft YaHei';} img{border:none;background:none;vertical-align:middle;} ul,ol,li{list-style-type:none;} select,input,img,select{vertical-align:middle;} table{border-collapse:collapse;border-spacing:0} table, th, td {vertical-align: middle} .clearfix:after{content: ".";display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;} .clearfix{zoom:1} .clearboth{height:0px;line-height:0px;overflow:hidden;clear:both;font-size:0px;} h1,h2{font-size:12px;font-weight:bold;} hr {border: 0;border-top:1px solid #ccc;height:0;} h3,h4{font-weight:normal;} /*----- Common css ------*/ .fl{float:left;} .fr{float:right;} .di{_display:inline;} .fwn{font-weight:normal;} .dib{*display:inline;_zoom:1;_display:inline;_font-size:0px;} .wh{max-width:1690px;margin:0 auto;padding:0 15px;} .wh1400{ max-width: 1430px; margin: 0 auto; padding: 0 15px; } .com-img{overflow:hidden;margin:0 auto;} .com-img img{ transition:all 0.8s; -webkit-transition:all 0.8s; -moz-transition:all 0.8s; -o-transition:all 0.8s;} .com-img:hover img{transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2);-ms-transform:scale(1.2);} .flex{display: flex;justify-content: space-between;flex-wrap: wrap;} .flexs{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .flex2 { display: flex; align-items: center; flex-wrap: wrap; } /*头部样式*/ .top2{ height: 98px; width: 100%; position: absolute; top: 0; left: 0; right:0; z-index: 9999; background: rgba(0,0,0,0.5) } .logo{float:left;line-height:98px;overflow:hidden;width:29.22%;} .logo img{width:100%;} .k2{font-size:16px;color:#fff;line-height:98px;height:98px;overflow: hidden;background: url(../images/tdh.png) no-repeat left;padding-left: 30px;} .k2 img{margin-right:5px;} .x-banner{position:relative;} /*热门搜索*/ .sou{margin: 15px 0;} .hotSearch{float:left;height:24px;line-height:24px;font-weight:normal;color:#0d0d0d;font-size:14px;} .hotSearch a{margin-right:6px;color:#0d0d0d;} #search-type{float: left;width:100px;height: 24px;border: 1px solid #c8c8c8;margin-right: 5px;} .lastli{width:21px;position:relative;margin-left:18px;cursor: pointer;} .so{height:98px;line-height:98px;} .so img { max-width:100%; } .ss { display: none; position: absolute; right: 0; top: 80px; width: 238px; padding: 20px; z-index: 999; background: #418d12; } .ss input { outline: none; line-height: 30px; width: 20%; background: none; border: 1px solid #fff; background: #fff; font-size: 13px; color: #418d12; float: left; } .ss #keyword { padding-left: 5px; line-height: 30px; width: 80%; background: none; border: 1px solid #fff; outline: none; font-size: 13px; color: #fff; float: left; } .ss #keyword:-webkit-autofill { -webkit-text-fill-color: #fff !important; transition: background-color 5000s ease-in-out 0s; } .ss #keyword::placeholder { color: #fff; } /* 导航样式 */ .x-menu{width:52%;float:right;} .x-menu > li { float: left; width:14.28%;text-align:center; } .x-menu > li:nth-of-type(1) .wena, .x-menu > li:nth-of-type(2) .wena, .x-menu > li:nth-of-type(4) .wena, .x-menu > li:nth-of-type(6) .wena, .x-menu > li:nth-of-type(7) .wena{ display: none!important; } .x-menu > li > a { display: block; font-size: 16px; color: #fff; line-height:98px; } .neuuagg .x-menu > li > a{ color: #333; } .x-menu > li:hover > a { color: #418d12 !important; } @media (max-width: 1200px){ .x-menu > li > a{ font-size: 14px; } } .wena { display: none; position: absolute; z-index: 99; width: 100%; left: 50%; top:98px; background: #fff; padding: 2vw 0; transform: translateX(-50%); box-shadow: 0 2px 5px rgba(0,0,0,0.075); } .x-sub-menu{ font-size: 0; } .x-sub-menu > li{ width: 16.666%; display: inline-block; } .x-sub-menu > li > a { display: block; line-height: 2em; font-size: 16px; color: #333; text-align: left; padding-top: 15px; position: relative; } .x-sub-menu > li > a:before{content: '';position: absolute;top: 0;left: 0;width: 30px;height: 1px;background: #000;transition: all .5s ease;-webkit-transition: all .5s ease;visibility: visible;} .x-sub-menu > li:hover > a:before{width: 50%;background: #418d12;} .x-sub-menu > li > a:hover { color: #418d12; } @media (max-width: 1024px){ .x-menu{width:60%;} .x-sub-menu > li > a{ font-size: 12px; } } .product_list1{margin-top:38px;} .product_list1 li{float:left;margin-right:57px;margin-bottom:28px;} .product_list1 li:nth-child(4n){margin-right:0;} .product_list1 li img{width:257px;height:293px;} .product_list1 li h3{text-align:center;font-weight:normal;color:#3f3f3f;font-size:20px;} .bxs{overflow:hidden;} /*主体样式*/ /*我们的服务*/ .index1{margin:62px 0 40px;} .wmfw{margin-left:1.75%;width:49.52%;} .wmfw h3{color:#333333;font-size:25px;font-weight:bold;} .wmfw .txt{color:#333333;font-size:16px;line-height:2.3;margin:25px 0 30px;} .wmfw a{font-weight:bold;color:#418d12;font-size:18px;} .wmfw a:hover{ font-size: 19px; transition: all 0.5s; } .index1 .num_list{ width:41.45%; display: flex; flex-wrap: wrap; } .num_list li{ width:28%; height:190px; background-size: contain; position: relative; text-align:center; display: flex; flex-direction: column; justify-content: center; z-index: 99; } .num_list li:before{ content:''; position: absolute; top:0px; left:0; width:100%; height:100%; background:url(../images/quan.png) no-repeat center; background-size: contain; -webkit-animation: spin 3s linear infinite; } .num_list li p.p1{ font-size:18px; color: #333333; line-height: 1;position:relative;z-index:999; } .num_list li p.p1 span{ font-size:40px; } .num_list li p.p2{ font-size: 18px; color: #808080; font-weight: 300;position:relative;z-index:999; } @-webkit-keyframes spin{ from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*5个行业*/ .jjfa-index .swiper-slide{position:relative;} .jjfa-index .swiper-slide .img img{width:100%;display:block;} .jjfa-index .swiper-slide .text2{ width:28%; color: #fff; position: absolute; top:20%; right:4.52%; z-index: 99; } .jjfa-index .swiper-slide .text2 h3{ font-size: 46px; margin-bottom:35px; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-right: 70px;font-weight:bold;height:62px; } .jjfa-index .swiper-slide h3 a{ display: block; position: absolute; right:0; top:0; -webkit-animation: Tmouse2 0.6s ease-in-out infinite alternate; -moz-animation: Tmouse2 0.6s ease-in-out infinite alternate; -o-animation: Tmouse2 0.6s ease-in-out infinite alternate; animation: Tmouse2 0.6s ease-in-out infinite alternate; } @-webkit-keyframes Tmouse2 { 0% { right:0; } 100% { right:10px; } } @-moz-keyframes Tmouse2 { 0% { right:0; } 100% { right:10px; } } @-o-keyframes Tmouse2 { 0% { right:0; } 100% { right:10px; } } @keyframes Tmouse2 { 0% { right:0; } 100% { right:10px; } } .jjfa-index .swiper-slide .text2 .txt{ display: block; color: #fff; position: relative; font-weight: 300; line-height:30px; font-size: 16px;height:90px;overflow:hidden; transition: all 0.6s ease-out; } .index2_ul{ border-left:1px solid #f0f0f0; /* display: flex; */ } .index2_ul li{ padding:30px 15px 30px; border-right:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; text-align: center; width: 19%; transition: all 0.4s ease-out; cursor: pointer;float:left; } .index2_ul li .img{ height: 54px; } .index2_ul li .img1{display:block;} .index2_ul li .img2{display:none;} .index2_ul li h3{ font-size: 22px; color: #333333; margin:12px 0 0px;font-weight:bold;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; } .index2_ul li p{ font-size: 14px; margin-top:7px; color: #555555;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; } .index2_ul li.on{ box-shadow: 10px 10px 20px #eee; width: 24%; } .index2_ul li.on h3{ color: #418d12; } .index2_ul li.on .img1{display:none;} .index2_ul li.on .img2{display:block;} .mores2{ display: flex; flex-wrap: wrap; justify-content: center; margin:40px auto 0; } .mores2 a{width:200px;margin:0 auto; display: inline-block; line-height: 50px; font-size:16px; color: #fff; background:#418d12; border-radius: 25px; text-align: center; position: relative; overflow: hidden; } .mores2 a:before { content: ""; position: absolute; display: block; transition: all .6s; width: 100%; height: 0; border-radius: 50%; left: 50%; top: 50%; padding-top: 100%; transform: translateX(-50%) translateY(-50%); -webkit-animation: wave 1.3s infinite; animation: wave 1.3s infinite; z-index: 1; } .mores2 a:hover{ text-decoration: underline; } @-webkit-keyframes wave{ 0%{ background:rgba(255,255,255,.8); transform:translateX(-50%) translateY(-50%) scale(0) } to{ background:transparent; transform:translateX(-50%) translateY(-50%) scale(1) } } @keyframes wave{ 0%{ background:rgba(0,0,0,.25); transform:translateX(-50%) translateY(-50%) scale(0) } to{ background:transparent; transform:translateX(-50%) translateY(-50%) scale(1) } } /* 箭头和数字 */ jjfa-index .swiper-wrapper{position: relative;} .jiantou { position: absolute; bottom:10%; right:4.52%; width:28%;height:40px; z-index: 999;border-bottom:1px solid rgba(255,255,255,.3); } .prev1 { background: url(../images/cc5d123300e61e0eaa35d917ba5b37c1aea3d97a.png) no-repeat top center; width: 8px; height: 15px;left:0;top:5px;position:absolute;z-index:9999;cursor: pointer; } .next1 { background: url(../images/8aa24e276e81aafab7f9c25a22dc207a8dfde02f.png) no-repeat top center; width:8px; height:15px;left:45px;top:5px;position:absolute;z-index:9999;cursor: pointer; } .jiantou .swiper-pagination1 { position: relative;text-align:right; font-size:16px; color: rgba(255, 255, 255, 0.6); } .jiantou .swiper-pagination1 .swiper-pagination-current { font-size:30px; color: #fff; } /*产品中心*/ .box3{margin:55px auto 64px;} .bt{text-align:center;} .bt h2{color:#418d12;font-size:35px;} .bt h3{color:#555555;font-size:16px;margin:15px 0 20px;} .prolist{text-align:center;} .prolist li{text-align:center;display:inline-block;line-height:42px;font-size:17px;cursor:pointer;margin:0 -2px;} .prolist li+li{background:url(../images/cc96bd1598c0c1dfee5c222eb7d7e9d3838bdb9d.png) no-repeat left center;} .prolist li a{color:#000000;display:block;padding:0 21px;} .prolist li.cur{} .prolist li.cur a{color:#fff;background:#418d12;} .proimg{display:none;margin-top:30px;margin-bottom:57px;} .proimg.clicked{display:block;} .proimg li{float:left;width:25%;position:relative;text-align:center;} .proimg li a{color: #fff;display: block;position: relative;} .proimg li .img{overflow:hidden;position: relative;} .proimg li .img img{width:100%;display:block;transition: all 0.3s ease-out;} .proimg li h3{line-height:45px;color:#fff;font-size:16px;background:rgba(0,0,0,.15);width:100%;position:absolute;left:0;bottom:0;height:45px;overflow:hidden;display:block;} .proimg li .det{width:100%;position:absolute;left:0;bottom:0;font-weight:normal;background:rgba(65,141,18,.6);height:100%;display:none;} .proimg li .nr{width:70%;margin:0 auto;display:flex;align-items: center;justify-content: center;flex-direction:column;height:100%; } .proimg li h2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#fff;font-size:24px;} .proimg li h4{color:#fff;font-size:16px;line-height:30px;margin:20px auto 30px;} .proimg li a:after{ content:''; position: absolute; left:20px; bottom:20px; width: 0; height: 1px; background:#fff; z-index:9; transition: all 0.4s ease-out; opacity: .3; } .proimg li a:before{ content:''; position: absolute; left:20px; top:20px; width: 0; height: 1px; background:#fff; z-index:9; transition: all 0.4s ease-out; opacity: .3; } .proimg li a .img:before{ content:''; position: absolute; left:20px; top:20px; width: 1px; height: 0; background:#fff; z-index:9; transition: all 0.4s ease-out; opacity: .3; } .proimg li a .img:after{ content:''; position: absolute; right:20px; top:20px; width: 1px; height: 0; background:#fff; z-index:9; transition: all 0.4s ease-out; opacity: .3; } .proimg li:hover .img img{ transform: scale(1.2); } .proimg li a:hover:before,.proimg li a:hover:after{ width: calc(100% - 40px); } .proimg li a:hover .img:before,.proimg li a:hover .img:after{ height: calc(100% - 40px); } .proimg li a:hover .det{display:block;} .proimg li a:hover h3{display:none;} /*关于我们*/ .box4{background:#f7f7f7;padding:52px 0 70px;} .ab{width:80%;margin:30px auto 25px;color:#000;font-size:17px;line-height:30px;text-align:center;} .add1{width:51.14%;} .add2{width:47.71%;} .add li{position:relative;overflow: hidden;} .add1 li{width:100%;} .add2 li{width:49%;} .add2 li:nth-child(n+3){margin-top:0.9vw;} .add li .img{overflow:hidden;} .add li .img img{width:100%;display:block;transition: all 0.4s ease-out;} .add li .det{position:absolute;left:6%;top:13%;z-index:999;} .add2 li .det{position:absolute;left:6%;top:18%;z-index:999;} .add li h2{color:#fff;font-size:23px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .add li h3{width:67px;height:2px;background:#fff;margin:16px 0;} .add li h4{color:#fff;font-size:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .add li:before{ content:''; position: absolute; left:0; bottom:-100%; width:100%; height:100%; background:rgba(65,141,18,.6); z-index:9; transition: all 0.4s ease-out; } .add li:hover .img img{transform: scale(1.2);} .add li:hover:before{bottom:0;} /*新闻资讯*/ .box5{margin:50px 0;} .newszz{margin-top:22px;} .tabzz{text-align:center;margin-bottom:35px;} .tabzz li{display:inline-block;width:103px;line-height:35px;margin:0 18px;font-size:16px;background:#eeeeee;cursor:pointer;} .tabzz li a{color:#333333;} .tabzz li.cur{background:#418d12;} .tabzz li.cur a{color:#fff;} .ttzz{ opacity: 0; visibility: hidden; overflow: hidden; height: 0px; } .ttzz.active{opacity:1;visibility:visible;height:100%;} .tabzz_content{position:relative;} .tabzz_content .swiper-wrapper{} .tabzz_content .swiper-wrapper li{} .tabzz_content .swiper-wrapper li .img img{width:100%;display:block;} .tabzz_content .swiper-wrapper li h2{color:#000000;font-size:17px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:19px 0 12px;} .tabzz_content .swiper-wrapper li h4{color:#666666;font-size:15px;overflow:hidden;line-height:30px;height:60px;} .tabzz_content .swiper-wrapper li .det{margin-top:9px;} .tabzz_content .swiper-wrapper li h3{color:#c4c4c4;font-size:13px;} .tabzz_content .swiper-wrapper li h5{color:#c4c4c4;font-size:13px;} .tabzz_content .swiper-wrapper li:hover h2{color:#418d12;} /*页面底部*/ .foot{background:#313131;} .foot .cont1{margin-bottom:25px;padding-top:42px;} .foot1{width:26.87%;} .flogo img{max-width:100%;} .lx{color:rgba(255,255,255,.6);font-size:15px;margin-top:25px;line-height:40px;} .lx a{color:rgba(255,255,255,.6);} .lx p{padding-left:34px;} .lx p:nth-child(1){background:url(../images/5e07809bd072cef3b931755b793eb2ec609f290f.png) no-repeat left center;} .lx p:nth-child(2){background:url(../images/5e95e991c9b6cf34d506d3d0e9041463e10cb020.png) no-repeat left center;} .lx p:nth-child(3){background:url(../images/18dcd18ae900447c518ac13484142bc04325bb1e.png) no-repeat left center;} .fadd{float:left;width:16.75%;margin-top:30px;margin-left:6.02%;} .fadd li{width:47%;text-align:center;} .fadd li img{width:100%;display:block;} .fadd li h3{color:#fff;opacity:.6;font-size:15px;margin-top:10px;} .f_nav{float:right;width:43.86%;margin-top:28px;} .f_nav dl{} .f_nav dt{margin-bottom:15px;font-size:17px;color:#fff;font-weight:normal;} .f_nav dd a{font-size:14px;line-height:30px;height:30px;overflow:hidden;color:rgba(255,255,255,.6);} .f_nav dd a:hover{color:#fff;} .foot .cont2{border-top:1px solid #6f6f6f;padding:12px 0;font-size:14px;line-height:30px;color:rgba(255,255,255,.6);} .foot .cont2 a{color:rgba(255,255,255,.6);} .footer33{height:50px;} /* 友情链接 */ .c-link { font-size: 14px; color:rgba(255,255,255,.6); line-height: 24px;margin-bottom:5px; } .c-link .con { display: flex; flex-wrap: wrap; position: relative; } .c-link span { cursor: pointer; display: block; } .c-link dd { width: calc(100% - 70px) } .c-link .sec { display: none; position: absolute; bottom: 100%; left: 0; background: rgba(255, 255, 255, .6); padding: 10px; min-width: 120px; z-index: 999; } .c-link a { color:rgba(255,255,255,.6); padding: 0 4px; font-size: 14px; line-height: 24px; } @media (max-width:1440px) { .num_list li p.p1 span{font-size:32px;} .num_list li p.p1{font-size:16px;} .num_list li p.p2{font-size:16px;} } @media (max-width:1024px) { .wmfw h3{font-size:20px;} .wmfw .txt{font-size:14px;line-height:26px;} .wmfw a{font-size:16px;} .num_list li p.p1 span{font-size:28px;} .num_list li p.p1{font-size:14px;} .num_list li p.p2{font-size:14px;} .jjfa-index .swiper-slide .text2 h3{font-size:32px;margin-bottom:0;} .jjfa-index .swiper-slide .text2 .txt{font-size:14px;line-height:25px;height:75px;} .jjfa-index .swiper-slide .text2 img{width:35px;height:35px;} .index2_ul li h3{font-size:18px;} .prolist li{font-size:15px;line-height:36px;} .proimg li h3{font-size:14px;line-height:40px;height:40px;} .proimg li h2{font-size:20px;} .proimg li h4{font-size:14px;margin:15px auto;height:25px;line-height:25px;overflow: hidden;} .bt h2{font-size:30px;} .bt h3{font-size:15px;} .ab{width:96%;margin:25px auto;font-size:15px;line-height:25px;} .add li h2{font-size:18px;} .add li h4{font-size:14px;} .add li h3{width:45px;height:1px;} .tabzz li{font-size:15px;} .tabzz_content .swiper-wrapper li h2{font-size:15px;} .tabzz_content .swiper-wrapper li h4{font-size:14px;line-height:25px;height:50px;} .fadd{display:none;} .foot1{width:38%;} .f_nav{width:58%;} .lx{font-size:14px;} } @media (max-width: 768px) { .xypg-right-content p img{max-width:100%!important;width:auto!important;height:auto!important;} .wmfw{width:100%;margin-left:0;} .index1 .num_list{width:100%;margin-top:20px;} .jjfa-index .swiper-slide .text2 h3{font-size:25px;} .index2_ul li h3{font-size:16px;} .jiantou .swiper-pagination1 .swiper-pagination-current{font-size:25px;} .jjfa-index .swiper-slide .text2 .txt{height:50px;} .jiantou{width:40%;} .jjfa-index .swiper-slide .text2{width:40%;} .index2_ul li p{display:none;} .index2_ul li .img img{width:30%;margin:0 auto;} .mores2 a{width:150px;line-height:43px;font-size:14px;} .proimg li{width:calc(50% - 10px);margin: 0 5px 10px 5px;} .add1{width:100%;} .add2{width:100%;margin-top:10px;} .add2 li:nth-child(n+3){margin-top:10px;} .copyright{width:100%;text-align:center;} .kk{width:100%;text-align:center;} .foot .cont2{line-height:24px;border-top:none;} .x-banner .owl-carousel .owl-dots button.owl-dot{width:25px;height:4px;} } @media (max-width:425px) { .index1 .num_list li{height:120px;} .index2_ul li{width:50%;padding:15px 5px;} .index2_ul li.on{width:50%;} .jjfa-index .swiper-slide .text2 .txt{display:none;} .jjfa-index .swiper-slide .text2 h3{font-size:16px;} .index2_ul li h3{margin:5px 0 0;font-size:14px;} .jiantou{height:31px;} .jiantou .swiper-pagination1 .swiper-pagination-current{font-size:20px;} .jiantou .swiper-pagination1{font-size:14px;} .jjfa-index .swiper-slide .text2 img{width:22px;height:22px;} .bt h2{font-size:25px;} .prolist li+li{background:none;font-size:14px;} .proimg li h2{font-size:16px;} .proimg li h4{display:none;} .proimg li h5 img{width:25px;height:25px;margin:0 auto;margin-top:16px;} .ab{font-size:14px;} .add li h2{font-size:16px;} .add li h4{font-size:14px;} .add li h3{margin:10px 0;} .add2 li:nth-child(n+2){margin-top:10px;} .add2 li{width:100%;} .tabzz li{width:25%;line-height:33px;margin:0 2%;} } @media (max-width:375px) { .index1 .num_list li{width:31%;} .num_list li p.p1 span{font-size:22px;} .jiantou{display:none;} } /*内页左侧样式*/ .page-product-inquiry a{color: #fff;} .xymob-left-close-btn .icon-close:before{font-size:0;} .prodescription{border:1px solid #e5e5e5;background:#f9f9f9;line-height:24px;padding:10px;margin-bottom:15px;text-indent:20px;} .right .content{padding-top:15px;overflow:hidden;line-height: 24px;} .xypg-right-content .content{margin-top:10px;} .page-product-inquiry a{color: #fff;} .n_banner{width:100%;margin:0 auto;} .n_banner img{width:100%;margin:0 auto;} .sitemp{line-height:31px;height:31px;overflow:hidden;padding-right:10px;background:url(../images/nav.png) no-repeat 0% 100%;} .sitemp h2{width:340px;float:left;line-height:31px;text-align:center;text-align:left;color:#000;font-size:14px;} .sitemp .site{width:380px;float:right;text-align:right;line-height:30px;} .sitemp .site a{color:#000;} .footer33{height:50px;} .xypg-right-content p img{ max-width:100%; height:auto !important;width:auto !important; } /* 手机页脚 */ .footer3 { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; height: 50px; background: #222; } .footer3 ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .footer3 ul li { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; color: #ffffff; line-height: 50px; font-size: 0; } .footer3 ul li a { display: block; color: #ffffff; } .footer3 ul li .iconfont { font-size: 14px; display: inline-block; vertical-align: middle; margin-right: 5px; } .footer3 ul li span { display: inline-block; vertical-align: middle; font-size: 14px; color: #ffffff; }