body{ width: 100%; margin: 0 auto!important; font-family: Arial, 寰蒋闆呴粦, "Microsoft yahei", "Hiragino Sans GB", "鍐潚榛戜綋绠€浣撲腑鏂 w3", "Microsoft Yahei", "Hiragino Sans GB", "鍐潚榛戜綋绠€浣撲腑鏂 w3", STXihei, 鍗庢枃缁嗛粦, SimSun, 瀹嬩綋, Heiti, 榛戜綋, sans-serif; } .body{ width: 100%; margin: 0 auto; } .nav .active{ opacity: unset!important; } .cc-btn{ width: 164px; height: 42px; line-height: 42px; background: #00717C; font-size: 14px; color: #FFFFFF; border: none; } .cc-btn:hover{ color: #FFFFFF; opacity: 0.9; } body .layui-nav{ padding: 0; background-color: unset; } body .layui-nav .layui-nav-item a{ padding: 0; } body .layui-nav .layui-nav-more{ display: none; } body .layui-nav-child{ top: 38px; left: -8px; min-width: 72px; opacity: 0.2; background-color: rgba(0,0,0,0.2); border: 0 } .layui-nav .layui-nav-child a { color: #fff !important; } .layui-nav .layui-nav-child a:hover { background-color: rgba(0,0,0,.3) !important; } .top{ width: 100%; position: relative; } .top-image{ width: 100%; height: 100%; } .home-banner { width: 100%; height:800px; overflow:hidden; position:relative; margin:0 auto; } .home-banner h3{ position: absolute; top: 330px; left: 176px; font-size: 46px; color: #FFFFFF; line-height: 36px; } .home-banner img{ width: 120rem; height: 37.5rem; } /*杞挱*/ .m-carousel { position: relative; overflow: hidden } .m-carousel-list { overflow-y: hidden; width: 100%; height: 800px; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease } .m-carousel-list li { float: left; width: 100%; height: 100%; padding-bottom: 120px; overflow: hidden; text-align: center; background-repeat: no-repeat; background-position: center 0; background-size: auto 100%; position: relative; } .m-carousel-list li a { display: block; height: 100% } .m-carousel-list .m-carousel-title { position: absolute; font-size: 36px; color: #FFFFFF; line-height: 36px; left: 290px; top: 360px; } .m-carousel-list .m-carousel-note { opacity: 0.8; font-size: 20px; color: #FFFFFF; letter-spacing: 1.5px; line-height: 28px; position: absolute; left: 290px; top: 381px; } .m-carousel-list .m-carousel-btn { position: absolute; left: 290px; top: 453px; } .c-carousel-dot { position: absolute; bottom: 80px; left: 0; width: 100%; text-align: center } .c-carousel-dot span { display: inline-block; width: 50px; height: 2px; margin: 0 5px; border-radius: 0; background: #4d4d4d; background: hsla(0, 0%, 100%, .3); cursor: pointer; -webkit-transition: width .3s ease, background .3s ease; transition: width .3s ease, background .3s ease } .c-carousel-dot span:hover { background: #666; background: hsla(0, 0%, 100%, .4) } .c-carousel-dot span.active { width: 50px; background: #FFFFFF; cursor: default } .home-banner .next,.home-banner .prev { position: absolute; top: 388.7px; -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); z-index: 9; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; cursor: pointer; background: none; -webkit-transition: opacity .35s; -moz-transition: opacity .35s; transition: opacity .35s; } .home-banner .prev{ left: 167.4px; -webkit-transform: translate(0,-50%) rotate(180deg); -moz-transform: translate(0,-50%) rotate(180deg); -ms-transform: translate(0,-50%) rotate(180deg); transform: translate(0,-50%) rotate(180deg); } .home-banner .next{ left: 1253.8px } .home-banner .next i,.home-banner .prev i { position: absolute; width: 19.8px; height: 36.5px; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); display: block; opacity: .7; -webkit-transition: .2s; -moz-transition: .2s; transition: .2s; background: url('../images/hy-next.png'); } .home-banner .next:hover i,.home-banner .prev:hover i{opacity:1} .nav{ width: 100%; position: absolute; top: 28px; left: 0; } .top-container{ width: 100%; position: absolute; left: 0; top: 0; } .nav-container{ width: 1440px; margin-right: auto; margin-left: auto; position: relative; } .container{ width: 1172px; height: auto; margin-right: auto; margin-left: auto; position: relative; } .nav .left{ width: 30%; float: left; } .nav .left img { height: 24px; width: auto; } .nav .right{ width: 70%; float: right; text-align: center; } .nav .right ul{ float: right; } .nav .right ul li{ min-width: 56px; max-width: 90px; height: 28px; line-height: 28px; margin-left: 28px; float: left; color: #F5F5F5; font-size: 14px; } .nav .right .lang{ width: 131px; height: 28px; line-height: 28px; float: right; border-left: 1px solid #FFFFFF; margin-left: 28px; } .nav .right .lang span{ float: left; margin-left: 4px; color: #FFFFFF; opacity: 0.5; letter-spacing: 0.29px; font-size: 14px; } .nav .right .lang span:first-child{ margin-left: 20px; } .nav .right .lang img{ width: 28px; height: 28px; margin-left: 4px; float: left; opacity: 0.5; } .home-about{ width: 1082px; margin: 100px auto; display: flex; } .home-about img{ width: 543px; height: 606.8px; float: left; } .about-content{ width: 443px!important; margin: 135px 0 0 64px; float: left; text-align: left!important; } .history{ width: 1440px; margin: 0 auto; margin-top: 49px; overflow: hidden; } .history ul{ margin-left: 324px; display: inline-flex; } .history ul li{ width: 720px; height: 395px; float: left; margin-left: 60px; } .history ul li img{ width: 720px; height: 395px; } .history ul li:first-child{ margin-left:0; } .about-history .pre-left, .about-history .pre-right{ top: 400px!important; } .about-super{ width: 1440px; margin: 0 auto; padding: 75px 185px; position: relative; } .about-super h3{ height: 42px; line-height: 42px; font-size: 30px; color: #000000; } .super-banner{ width: 100%; margin: 45px auto 0; padding: 0 20px; display: flex; } .super-banner .next{ position: absolute; left: 120px; top: 350px; } .super-banner .prev img,.super-banner .next img{ width: 45px; height: 45px; } .super-banner .prev{ position: absolute; right: 120px; top: 370px; -webkit-transform: translate(0,-50%) rotate(180deg); -moz-transform: translate(0,-50%) rotate(180deg); -ms-transform: translate(0,-50%) rotate(180deg); transform: translate(0,-50%) rotate(180deg); } .super-banner ul{ width: 1082px; height: 444px; margin: 0 auto; } .super-banner ul li{ width: 334px; height: 441px; float: left; margin-left: 0; } .super-banner ul li:first-child{ margin-left: 0; } .super-banner li:hover{ border-bottom: 6px solid #00717C;; } .super-banner ul li img{ width: 334px; height: 349px; } .super-banner li h3{ margin:32px auto; opacity: 0.8; font-size: 20px; color: #000000; letter-spacing: 0; text-align: center; line-height: 29px; } /* 鑱旂郴鎴戜滑 */ .page-contact{ padding: 130px 360px; background: #FFFFFF; background: url("../images/contact-map.png") no-repeat; background-size: 100% 609px; background-position: left 787.3px; } .page-contact h3{ font-size: 28px; color: #000000; text-align: center; } .page-contact p{ font-size: 18px; color: #000000; margin-top: 47px; margin-bottom: 66px; text-align: center; } .page-contact span{ width: 100%; font-size: 18px; color: #4F4F4F; letter-spacing: 0.38px; margin-bottom: 24px; display: inline-block; } .page-contact input[type=text]{ border: 1px solid #616161; border-radius: 4px; width: 720px; height: 66px; line-height: 66px; margin-bottom: 47px; font-size: 16px; color: #000000; letter-spacing: 0; padding-left: 32px; } .page-contact input[type=checkbox]{ border: 1px solid #979797; border-radius: 2px; width: 18px; height: 18px; } body .page-contact .cell-right{ width: 18px; height: 18px; float: left; margin-right: 8px; } body .page-contact .cell-checkbox-icon:after{ font-size: 18px!important; } .page-contact textarea{ background: #FFFFFF; border: 1px solid #616161; border-radius: 4px; width: 720px; height: 306px; font-size: 16px; color: #000000; letter-spacing: 0; padding: 17px 32px; } .page-contact-foot{ width: 50rem; margin:0 auto; margin-top: 46px; margin-bottom: 220px; } .page-contact-foot .left{ width: 30%; float: left; } .page-contact button{ float: right; } /* 棣栭〉 */ .title{ width: 100%; max-height: 261px; text-align: center; } .title h3{ font-size: 30px; color: #000000; line-height: 42px; } .about-super h4,.title h4,.contact h4{ font-size: 14px; color: #000000; line-height: 28px; } .about-super h4 span,.contact h4 span{ width: 22px; height: 28px; border-bottom: 1px solid rgba(0,113,124,0.80); margin-right: 22px; display: inline-block; } .title h4 span{ opacity: 0.41; width: auto; height: 28px; border-bottom: 1px solid rgba(0,113,124,0.80); display: inline-block; padding-left: 10px; } .title p{ opacity: 0.8; font-size: 16px; color: rgba(0,0,0,0.80); text-align: justify; line-height: 32px; margin: 20px auto; } .title a{ display: block; text-align: center; } .title ul{ min-width: 300px; max-width: 100%; margin: 40px auto; display: inline-block; } .title ul li{ width: 50%; height: 25px; line-height: 14px; font-size: 20px; color: #000000; float: left; position: relative; } .title a{ opacity: 0.7; } .title .active{ font-weight: 700; } .title .active:after { content: ""; width: 41px; height: 3px; background-color: #00717C; position: absolute; left: 35%; bottom: 0; } .home-product{ width: 100%; background: rgba(0, 113,124, 0.05); padding: 100px 0 100px; display: block; position: relative; } .product{ width: 100%; height: 338px; overflow: hidden; } .product #cols li:hover{ box-shadow: 0px 4px 14px 6px rgba(0,0,0,0.05); } .home-product .pre-left,.home-product .pre-right{ width: 35.8px; height: 35.8px; background: url("../images/left.svg") no-repeat; background-position: -12px -10px; position: absolute; top: 500px; } .home-product .pre-left{ left: 216px; } .home-product .pre-right{ right: 216px; -webkit-transform: translate(0,-50%) rotate(180deg); -moz-transform: translate(0,-50%) rotate(180deg); -ms-transform: translate(0,-50%) rotate(180deg); transform: translate(0,-50%) rotate(180deg); display: none; } .product ul{ margin-left: 324px; display: inline-flex; } .product ul li{ width: 796px; height: 335px; float: left; margin-left: 60px; } .product ul li:first-child{ margin-left: 0; } .product img{ width: 495px; height: 435px; } .product .left{ width: 301px; height: 435px; float: left; background: #FFFFFF; padding: 48px 0 0 39px; } .product .left h2{ height: 27px; line-height: 27px; opacity: 0.8; font-size: 24px; color: #00717C; margin-bottom: 20px; } .product .left h3{ font-size: 22px; color: #000000; margin-bottom: 19px; } .product .left span{ width: 32px; height: 2px; opacity: 0.8; border: 2px solid #00717C; display: inline-block; margin-bottom: 28px; } .product .left p{ width: 235px; min-height: 64px; max-height: 126px; opacity: 0.7; overflow: hidden; margin-bottom: 20px; opacity: 0.8; font-size: 16px; color: rgba(0,0,0,0.80); text-align: justify; line-height: 32px; } .product .left a:hover{ font-weight: 400px; } .product .left em{ width: 50%; height: 32px; line-height: 29px; float: left; opacity: 0.52; font-size: 16px; color: #000000; letter-spacing: 0.33px; } .product .left .num{ opacity: 0.85; font-size: 26px; color: #000000; letter-spacing: 0.54px; } .product .left .tip{ position: relative; } .product .left .tip:after { content: ""; width: 32px; height: 1px; background-color: #00717C; position: absolute; left: 0; bottom: 0; } .product .right{ width: 495px; height: 435px; float: right; } .home-made{ width: 1148px; margin: 100px auto 100px; display: block; } .content{ width: 100%; display: flex; } .content ul{ width: 1148px; } .content ul li{ width: 369px; margin-right: 20px; float: left; } .content ul li:nth-child(3n){ margin-right: 0; } .content ul li img{ width: 369px; height: 396px; margin: 0 auto; } .content ul h3{ width: 314px; margin-top: 30px; margin-left: 26px; height: 30px; line-height: 30px; opacity: 0.5; font-size: 22px; color: #000000; } .content ul p{ width: 314px; margin-top: 10px; margin-left: 26px; opacity: 0.5; font-size: 16px; color: #000000; line-height: 24px; } .content ul li:hover{ background: #FFFFFF; box-shadow: 0 4px 14px 13px rgba(0,0,0,0.05); } .more{ width: 100%; margin: 60px auto; text-align: center; } .more a{ display: inline-block; } .home-contact{ width: 100%; background: rgba(242,248,248,1); padding: 100px 0; text-align: center; } .home-contact h3{ height: 40px; line-height: 40px; font-size: 28px; color: #000000; letter-spacing: 0; text-align: center; } .home-contact h3 span{ width: 147px; height: 40px; border-bottom: 2px solid #00717C; display: inline-block; margin-left: 44px; } .home-contact h3 span:first-child{ margin-left: 0; margin-right: 44px; } .home-contact p{ width: 100%; height: 20px; line-height: 20px; font-size: 14px; color: rgba(0,0,0,0.50); letter-spacing: 0.3px; text-align: center; margin-top: 5px; } .home-contact .contact{ width: 662px; margin: 40px auto; } .home-contact .contact input{ width: 318px; height: 61px; line-height: 61px; opacity: 0.5; font-size: 16px; color: #000000; letter-spacing: 0; background: #FFFFFF; border-radius: 6px; margin-left: 26px; border: none; float: left; padding-left: 32px; } .home-contact .contact input:first-child{ margin-left: 0; } .home-contact .contact textarea{ width: 100%; height: 238px; line-height: 16px; background: #FFFFFF; border-radius: 6px; opacity: 0.5; font-size: 16px; color: #000000; letter-spacing: 0; border: none; padding: 17px 32px; margin-top: 26px; } .home-contact button{ margin-left: 26px } .home-contact button:first-child{ margin-left: 0; } .home-contact .more{ margin-bottom: 0; } /* 鍏充簬鎴戜滑 */ .about-head{ width: 1082px; display: table; text-align: left; /* margin: 168px 225px 40px; */ margin: 0px auto 40px auto; } .about-head p{ width: 463px; float: left; font-size: 16px; color: rgba(0,0,0,0.80); letter-spacing: 0; text-align: justify; line-height: 32px; margin-right: 143px; } .about-page{ margin: 117px 0 0 64px; } .honorary{ width: 1261px; margin: 80px auto; } .honorary .about-content{ width: 662px!important; } .about-page .content{ font-size: 15px!important; color: #000000!important; letter-spacing: 0!important; line-height: 32px!important; margin: 0; } .honorary .content span{ width: 16px!important; height: 18px!important; border-bottom: 1px solid rgba(0,113,124,0.80); margin-right: 22px; display: inline-block; } .about-page p{ font-size: 16px; color: rgba(0,0,0,0.80); letter-spacing: 0; line-height: 32px; } .about-page .tit{ width: 100%; float: left; font-size: 20px; color: #00717C; line-height: 30px; } .about-page em{ width: 100%; float: left; font-size: 15px; color: rgba(0,0,0,0.80); line-height: 30px; margin-bottom: 20px; } /* 浜у搧涓績 */ .product-top{ margin: 50px 150px; display: flow-root; } .product-top .layui-input-block{ width: 270px; height: 54px; line-height: 54px; background: #FFFFFF; border: 2px solid #FFFFFF; float: right; } .product-top .layui-input, .layui-select, .layui-textarea{ border: none; opacity: 0.4; font-size: 24px; color: #000000; height: 54px; line-height: 54px; } .product-list{ width: 1140px; margin: 0 auto; } .product-list ul{ margin-bottom: 50px; display: inline-block; } .product-list li{ width: 270px; height: 350.1px; float: left; margin-right: 20px; background: #FFFFFF; margin-bottom: 20px; overflow: hidden; position: relative; } .product-list li:nth-child(4n){ margin-right: 0; } .product-list li img{ width: 270px; height: 277px; } .product-list li p{ font-size: 20px; color: #000000; height: 83px; line-height: 83px; width: 100%; overflow: hidden; text-align: center; } .product-list .active{ opacity: 0.9; background: #00717C; z-index: 20; } .product-list .active img{ height: 100%; opacity: 30%; } .product-list h3{ font-size: 26px; color: #FFFFFF; text-align: center; position: absolute; top: 192px; width: 100%; height: 37px; line-height: 37px; overflow: hidden; display: none; } .product-list span{ font-size: 14px; color: #FFFFFF; text-align: center; height: 60px; overflow: hidden; position: absolute; top: 250px; left: 12.5px; width: 245px; display: none; } .product-list .active span,.product-list .active h3{ display: block; } .product-foot{ width: 100%; display: block; text-align: center; margin-bottom: 112px; } /* 鍒堕€犱腑蹇 */ .made{ width: 1440px; margin: 0 auto; } .made-top{ width: 1200px; display: flow-root; margin: 140.8px auto 32px; background: url("../images/mades-bg.png") no-repeat; background-position: center; background-position-x: 239px; } .made-top h3{ width: auto; height: 45px; line-height: 45px; font-size: 32px; color: #4F4F4F; letter-spacing: 0.67px; overflow: hidden; float: left; background: #F5F5F5; padding-right: 5px; } .made-top .hd{ float: right; } .made-top .hd .next,.made-top .hd .prev{ width: 36px; height: 36px; border-radius: 18px; border: 2px solid #979797; display: inline-block; text-align: center; line-height: 34px; margin-right: 23px; color: #979797; } .made-top .hd .next:hover,.made-top .hd .prev:hover{ background: #00717C; box-shadow: 0 2px 10px 2px rgba(0,113,124,0.10); border: 2px solid #00717C; color: #FFFFFF; } .made-top .hd i{ font-size: 20px; } .made-banner{ width: 100%; margin: 0 121px; } .made-banner ul{ height: 236px; padding: 32px 0 16px; display: flex; } .made-banner li{ width: 282px; height: 236px; float: left; margin-left: 0px; text-align: center; } .made-banner li img{ width: 262px; height: 216px; display: inline-block; margin-top: 10px; } .made-banner li:hover{ background: url("../images/made-item-bg.png") no-repeat; background-position: right; background-size: 250px 233px; background-position-y: 0px; } .made-banner li img:hover{ } .made-banner li:first-child{ margin-left: 0; } .made-foot{ width: 1200px; margin: 60px auto; padding: 18px 31px; border-left:5px solid rgba(0,113,124,0.75); background: #FFFFFF; } .made-foot p{ letter-spacing: 1.55px; opacity: 0.8; font-size: 16px; color: rgba(0,0,0,0.80); text-align: justify; line-height: 32px; } /* 璇︽儏 */ .detail-top{ padding: 107px 90px; position: relative; background: #FFFFFF; display: flex; margin: 0 auto; width: 1440px; } .detail-top-banner{ width: 784px; height: 490px; display: flex; float: left; } .detail-top-banner img{ width: 597px; height: 442px; } body .hy-box{ left: 93px!important; } .hy-dot i.active{ background: #00717C; } .hy-prev:hover,.hy-next:hover{ background: #00717C; } .product-detail{ margin: 52px 67px; } .product-detail h3{ font-size: 30px; color: #000000; } .product-detail h4{ font-size: 14px; color: #000000; } .product-detail h4 span{ opacity: 0.41; } .product-detail p{ width: 342px; max-height: 305px; margin-top: 25px; opacity: 0.65; font-size: 16px; color: #000000; text-align: justify; line-height: 24px; overflow: hidden; } .product-content{ background: #F1F1F1; padding: 104px 159px; width: 1440px; margin: 0 auto; } .product-desc{ width: 335px; height: 470px; background: #FFFFFF; padding-top: 71px; float: left; } .product-desc h3{ font-size: 30px; color: #000000; margin: 0px 34.5px; } .product-desc h4{ font-size: 14px; color: #000000; margin: 0px 34.5px; } .product-desc h4 span{ opacity: 0.41; } .product-desc p{ margin: 24px 34.5px; opacity: 0.5; font-size: 16px; color: #000000; text-align: justify; line-height: 24px; } .desc-banner{ width: 737px; height: 470px; display: flex; overflow: hidden; float: left; margin-left: 50px; position: relative; } .desc-banner img{ width: 737px; height: 470px; } .Choicestel{ position: absolute; left: 19px; top: 396px; ont-family: PingFangSC-Regular; font-size: 36px; color: #FFFFFF; text-align: justify; height: 50px; line-height: 50px; overflow: hidden; } .Choicestel li{ display: none; } .Choicestel .on{ display: block; } .desc-banner .next,.desc-banner .prev{ width: 40px; height: 30px; line-height: 30px; color: #FFFFFF; background: #00717C; position: absolute; bottom: 0; left: 0; text-align: center; } .desc-banner .next i,.desc-banner .prev i{ font-size: 18px; } .desc-banner .prev{ left: 40px; } .desc-foot{ margin: 90px 0 0; display: inline-block; } .desc-foot li{ width: 215px; float: left; margin-left: 87px; } .desc-foot li:first-child{ margin-left: 0; } .desc-foot li img{ width: 46px; height: 42px; margin-bottom: 22px; } .desc-foot li p{ opacity: 0.5; font-size: 20px; color: #000000; } .other-product{ width: 90rem; margin: 0 auto; background: #FFFFFF; text-align: center; padding: 88px 0; } .other-product h3{ font-size: 30px; color: #000000; } .other-product h4{ opacity: 0.75; font-size: 14px; color: #000000; } .other-product p{ opacity: 0.65; font-size: 16px; color: #000000; text-align: center; line-height: 24px; padding: 0 430px; margin-top: 18px; } .other-product .made-banner{ width: 1313px; position: relative; margin: 0; padding: 68px 127px 12px; } .other-product .made-banner ul{ height: 344px; } .other-product .made-banner li{ margin-left: 28px; height: 344px; background: #FFFFFF; padding-top: 3px; width: 16.4375rem; } .other-product .made-banner li img{ width: 243px; margin: 0 10px; } .other-product .made-banner h3{ font-size: 20px; color: #000000; width: 100%; text-align: center; height: 28px; line-height: 28px; overflow: hidden; } .other-product .made-banner p{ opacity: 0.5; font-size: 14px; color: #000000; text-align: center; width: 220px; height: 40px; line-height: 20px; overflow: hidden; padding: 0; margin: 9px auto; background: #FFFFFF; z-index: 99; } .other-product .foots{ padding: 17px 0 5px; width: 243px; margin: 0 auto; background: #FFFFFF; } .other-product .active .foots{ box-shadow: 0 4px 14px 13px rgba(0,0,0,0.05); } .other-product .made-banner .active{ background: url("../images/other-bg.png") #FFFFFF no-repeat; background-position: right; background-size: 243px 320px; background-position-y: 13px; background-position-x: 20px; } .other-product .next,.other-product .prev{ width: 50px; height: 50px; background: #D8D8D8; border-radius: 25px; position: absolute; left: 60px; bottom: 188px; color: #FFFFFF; text-align: center; line-height: 50px; } .other-product .prev{ left: 1319px; } .other-product .next i,.other-product .prev i{ font-size: 18px; } .other-product .next:hover,.other-product .prev:hover{ background: #00717C; } /* 椤佃剼 */ .footer{ width: 100%; height: 576px; padding-top: 90px; background: url("../images/footer-bg.png") no-repeat; background-size: cover; position: relative; } .footer .nav-item{ width: 244px; height: 174px; float: left; } .footer .nav-item a{ color: rgba(255,255,255,0.80); } .footer .nav-foot ul,.footer .nav-item ul{ margin: 37px 19px 0; } .footer .nav-foot ul li,.footer .nav-item ul li{ height: 20px; line-height: 20px; font-size: 14px; color: rgba(255,255,255,0.80); letter-spacing: 1.4px; margin-bottom: 16px; } .footer .cont_tit{ height: 20px; line-height: 20px; font-size: 14px; color: #FFFFFF; letter-spacing: 1.17px; padding-left: 19px; position: relative; } .footer .cont_tit:before { width: 4px; height: 21px; background: rgba(55,175,181,1); border-radius: 1px; display: block; content: ""; position: absolute; left: 1px; top: 0; } .footer .nav-foot{ width: 100%; float: left; } .footer .nav-foot ul{ width: 265px; float: left; margin: 37px 0 0; } .footer .nav-foot .first{ margin: 37px 0 0 19px; } .footer .nav-foot ul:last-child{ width: 453px; } .footer .footer-logo{ position: absolute; top: 120px; left: 1031px; } .footer .footer-top{ position: absolute; top: 126px; left: 1177px; } .footer p{ width: 100%; opacity: 0.5; font-size: 12px; color: #FFFFFF; text-align: center; line-height: 14px; position: absolute; bottom: 30px; left: 0; } .footer a{ color: #FFFFFF; }