.bg-color{ background-color: #fff; } .nav-bar{ width: 100%; height: 72px; background-color: #fff; position: relative; } .nav-bar:before{ content: ''; position: absolute; top: 22px; right: 50%; margin-right: -1600px; width: 1000px; height: 50px; background-color: #d7241a; } .nav-bar .logo{ float: left; width: 192px; height: 72px; line-height: 72px; font-size: 0; text-align: center; background-color: #fff; } .nav-bar .logo img{ max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; } .nav-bar ul{ float: right; width: 940px; margin-top: 22px; height: 50px; background-color: #d7241a; display: flex; justify-content: flex-end; align-items: center; position: relative; } .nav-bar ul:before{ content: ''; display: block; width: 0; height: 0; border-width: 0px 30px 50px 30px; border-style: solid; border-color: transparent transparent transparent #d7241a; position: absolute; left: -60px; top: 0; transform: rotate(180deg); } .nav-bar ul li{ margin-left: 70px; } .nav-bar ul li a{ display: block; font-size: 16px; color: #fff; line-height: 50px; position: relative; transition: all 0.5s ease-in-out; } .nav-bar ul li a:before{ content: ''; position: absolute; top: 50%; left: -20px; width: 8px; height: 8px; border-radius: 50%; background-color: #fff; transform: translateY(-50%); opacity: 0; transition: all 0.5s ease-in-out; } .nav-bar ul li a:hover, .nav-bar ul li.active a{ font-weight: 700; } .nav-bar ul li a:hover:before, .nav-bar ul li.active a:before{ opacity: 1; } #main{ overflow: hidden; } /* 棣栭〉澶撮儴 */ #main .header-main{ background-color: #f5f5f5; position: relative; z-index: 1; } #main .header-main:before{ content: ''; position: absolute; bottom: 3px; right: 50%; width: 68px; height: 136px; margin-right: -700px; background-image: url(../images/header-main.png); background-position: center; background-repeat: no-repeat; z-index: -1; } #main .header-main .top{ height: 95px; } #main .header-main .top .logo{ float: left; width: 192px; height: 95px; line-height: 95px; font-size: 0; overflow: hidden; } #main .header-main .top .logo img{ max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; } #main .header-main .top .search{ float: right; margin-top: 36px; } #main .header-main .top .search .words{ float: left; width: 327px; height: 45px; line-height: 45px; padding: 0 12px; background: none; color: #666; font-size: 16px; border: 1px solid #666; border-radius: 0; border-right: none; box-sizing: border-box; } #main .header-main .top .search .words::-webkit-input-placeholder { color: #666; } #main .header-main .top .search .words:-moz-placeholder { color: #666; } #main .header-main .top .search .words::-moz-placeholder { color: #666; } #main .header-main .top .search .words:-ms-input-placeholder { color: #666; } #main .header-main .top .search .submit{ float: right; width: 65px; height: 45px; cursor: pointer; background-color: #d7241a; background-image: url(../images/search.png); background-repeat: no-repeat; background-position: center; } #main .header-main .menu{ height: 50px; position: relative; z-index: 2; } #main .header-main .menu:before{ content: ''; position: absolute; top: 0; left: 50%; margin-left: -1600px; width: 1000px; height: 100%; background-color: #d7241a; } #main .header-main .menu ul li{ float: left; line-height: 50px; width: 14.28%; position: relative; } #main .header-main .menu ul li a{ display: block; font-size: 16px; color: #003333; width:100%; text-align: center; transition: all 0.5s ease-in-out; } #main .header-main .menu ul li a:hover{ color: #d7241a; } #main .header-main .menu ul li.navcurrent a, #main .header-main .menu ul li.navcurrent a:hover{ color: #fff; font-weight: bold; position: relative; background-color: #d7241a; } #main .header-main .menu ul li.navcurrent a:before{ content: ''; position: absolute; top: 50%; left: 36px; width: 8px; height: 8px; transform: translateY(-50%); background-color: #fff; border-radius: 50%; } #main .header-main .menu ul li.navcurrent a:after{ content: ''; display: block; width: 0; height: 0; border-width: 50px 30px 0px 30px; border-style: solid; border-color: transparent transparent transparent #d7241a; position: absolute; right: -60px; top: 0; } /* 棣栭〉澶у浘 */ .banner{ width: 100%; margin: 0 auto; position: relative; overflow: hidden; z-index: 1; text-align: center; } .banner a{ display: block; } .banner img{ width: 100%; } .banner .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; background-color: #fff; margin: 0 5px; border-radius: 50%; opacity: 1; transition: all 0.5s ease-in-out; } .banner .swiper-pagination-bullet-active { width: 30px; opacity: 1; border-radius: 20px; } /* 鍏叡澶撮儴 */ #main .common{ text-align: center; line-height: 1; } #main .common h4{ color: #333; font-size: 26px; } #main .common .line{ margin: 10px 0; display: flex; justify-content: center; } #main .common .line i{ display: inline-block; margin: 0 4px; width: 9px; height: 9px; } #main .common .line i:nth-child(1){ background-color: #d7241a; } #main .common .line i:nth-child(2){ background-color: #e3443b; } #main .common .line i:nth-child(3){ background-color: #fb8983; } #main .common h4 span{ display: inline-block; width: 12px; height: 12px; border: 3px solid #d61e14; border-radius: 50%; margin: -6px 15px 0 15px; vertical-align: middle; } #main .common p{ color: #666; font-size: 16px; letter-spacing: 2px; } /* 棣栭〉浜у搧 */ #main .product-main{ padding: 100px 0; position: relative; z-index: 1; overflow: hidden; } #main .product-main .bg{ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: -1; display: flex; justify-content: flex-end; -webkit-animation: bgScroll 18s linear infinite; animation: bgScroll 18s linear infinite; } #main .product-main .bg img{ height: 100%; } @-webkit-keyframes bgScroll { from { -webkit-transform: translateX(0); transform: translateX(0) } to { -webkit-transform: translateX(1640px); transform: translateX(1640px) } } @keyframes bgScroll { from { -webkit-transform: translateX(0); transform: translateX(0) } to { -webkit-transform: translateX(1640px); transform: translateX(1640px) } } #main .product-main .top .common{ float: left; text-align: left; } #main .product-main .top .common .line{ justify-content: flex-start; } #main .product-main .top .common .line i:nth-child(1){ margin-left: 0; } #main .product-main .top .type{ float: right; margin-top: 30px; display: flex; justify-content: flex-end; } #main .product-main .top .type li{ margin-left: 12px; } #main .product-main .top .type li a{ display: block; width: 150px; height: 40px; line-height: 40px; text-align: center; color: #333; font-size: 14px; border: 1px solid #a0a0a0; }#main .product-main .top .type li.on a, #main .product-main .top .type li a:hover{ background-color: #d7241a; border-color: #d7241a; color: #fff; } #main .product-main .list{ margin: 40px 0; min-height: 362px; } #main .product-main .list ul{ margin: 0 -12px; } #main .product-main .list ul li{ float: left; width: 282px; margin: 0 12px; } #main .product-main .list ul li a{ display: block; } #main .product-main .list ul li a .img{ width: 280px; height: 280px; line-height: 280px; text-align: center; font-size: 0; overflow: hidden; background-color: #fff; border: 1px solid #d7d7d7; } #main .product-main .list ul li a .img img{ max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; } #main .product-main .list ul li a .box{ background-color: #f5f5f5; height: 80px; padding: 0 24px; position: relative; z-index: 1; } #main .product-main .list ul li a .box:before{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-color: #d7241a; z-index: -1; transition: all 0.3s ease-in-out; } #main .product-main .list ul li a .box .tit{ float: left; width: calc(100% - 30px); line-height: 80px; color: #333; font-size: 16px; } #main .product-main .list ul li a .box .icon{ float: right; width: 24px; height: 100%; background-image: url(../images/pro-icon.png); background-position: center; background-repeat: no-repeat; } #main .product-main .list ul li a:hover .img img{ transform: scale(1.1); } #main .product-main .list ul li a:hover .box:before{ height: 100%; } #main .product-main .list ul li a:hover .box .tit{ color: #fff; } #main .product-main .list ul li a:hover .box .icon{ background-image: url(../images/pro-icon1.png); } #main .product-main .pro-more{ display: block; width: 280px; height: 50px; line-height: 50px; text-align: center; color: #fff; font-size: 16px; margin: 0 auto 10px; background-color: #d7241a; position: relative; } #main .product-main .pro-more:before{ content: ''; position: absolute; border: #d7241a solid 4px; top: -16px; right: -16px; bottom: -16px; left: -16px; opacity: 0; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; } #main .product-main .pro-more:hover:before{ top: -8px; right: -8px; bottom: -8px; left: -8px; opacity: 1; } /* 娑插帇瑁呭鍏ぇ搴旂敤棰嗗煙 */ #main .lingyu-main{ background-image: url(../images/lingyubg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; padding: 90px 0; } #main .lingyu-main .list{ float: left; width: 338px; display: flex; flex-wrap: wrap; } #main .lingyu-main .list li{ width: 166px; height: 250px; background-color: #fff; margin-right: 6px; margin-bottom: 6px; display: flex; justify-content: center; flex-direction: column; } #main .lingyu-main .list li:nth-child(2n){ margin-right: 0; } #main .lingyu-main .list li .img{ height: 80px; line-height: 80px; text-align: center; font-size: 0; overflow: hidden; } #main .lingyu-main .list li .img img{ max-height: 100%; display: inline-block; vertical-align: middle; } #main .lingyu-main .list li .tit{ line-height: 1; text-align: center; color: #333; font-size: 16px; margin-top: 20px; } #main .lingyu-main .box{ float: left; width: 512px; margin: 0 6px; } #main .lingyu-main .box .con, #main .lingyu-main .box .contact{ height: 250px; margin-bottom: 6px; } #main .lingyu-main .box .con{ background-color: #fff; padding: 0 25px; position: relative; display: flex; justify-content: center; flex-direction: column; } #main .lingyu-main .box .con:before{ content: ''; position: absolute; bottom: 10px; right: 22px; width: 54px; height: 172px; background-image: url(../images/lingyu-1.png); background-position: center; background-repeat: no-repeat; } #main .lingyu-main .box .con .tit{ text-align: center; line-height: 1; font-weight: 700; color: #333; font-size: 28px; margin-bottom: 30px; } #main .lingyu-main .box .con .txt{ width: 390px; color: #333; font-size: 16px; line-height: 2.5; } #main .lingyu-main .box .contact{ padding: 0 28px; text-align: right; background-image: url(../images/lingyu-2.jpg); background-position: center; background-repeat: no-repeat; } #main .lingyu-main .box .contact p{ color: #333; font-size: 16px; line-height: 2; padding-top: 50px; margin-bottom: 10px; } #main .lingyu-main .box .contact .more{ display: inline-block; width: 206px; height: 45px; line-height: 45px; text-align: center; color: #fff; font-size: 16px; background-color: #d7241a; border-radius: 10px; } #main .lingyu-main .box .contact .more i{ display: inline-block; padding: 0 2px; } #main .lingyu-main .box .contact .more:hover{ border-radius: 0; } #main .lingyu-main .box .contact .more:hover i{ padding: 0 5px; } /* 瀹炵敤妗堜緥 */ #main .case-main{ background-color: #fff; padding-top: 100px; } #main .case-main .list{ margin-top: 30px; position: relative; } #main .case-main .list .swiper-slide a{ display: block; } #main .case-main .list .swiper-slide a .img{ height: 210px; border: 1px solid #c2c2c2; border-radius: 10px; overflow: hidden; } #main .case-main .list .swiper-slide a .img img{ width: 100%; height: 100%; object-fit: cover; } #main .case-main .list .swiper-slide a .tit{ padding: 0 10px; text-align: center; color: #666; font-size: 14px; line-height: 44px; } #main .case-main .list .swiper-slide a:hover .img{ border-radius: 0; } #main .case-main .list .swiper-slide a:hover .img img{ transform: scale(1.1); } #main .case-main .list .swiper-slide a:hover .tit{ color: #d7241a; } #main .case-main .list .case-prev, #main .case-main .list .case-next{ width: 42px; height: 42px; top: 90px; margin-top: 0; border-radius: 50%; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: auto; } #main .case-main .list .case-prev{ left: -21px; background-image: url(../images/case-left.png); } #main .case-main .list .case-next{ right: -21px; background-image: url(../images/case-right.png); } #main .case-main .list .case-prev:hover, #main .case-main .list .case-next:hover{ background-color: #d7241a; } #main .case-main .list .case-prev:hover{ background-image: url(../images/case-left1.png); } #main .case-main .list .case-next:hover{ background-image: url(../images/case-right1.png); } /* 鍏徃绠€浠 */ #main .company-main{ background-color: #fff; padding: 90px 0; position: relative; z-index: 1; overflow: hidden; } #main .company-main:before{ content: ''; position: absolute; bottom: -80px; right: -80px; width: 416px; height: 416px; background-image: url(../images/companybg.png); background-position: center; background-repeat: no-repeat; z-index: -1; -webkit-animation: rade 10s linear infinite; animation: rade 10s linear infinite; } @-webkit-keyframes rade { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rade { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #main .company-main .common{ margin-bottom: 30px; } #main .company-main .video{ float: left; width: 540px; height: 354px; position: relative; } #main .company-main .video .more{ display: block; position: absolute; bottom: 27px; right: -14px; width: 126px; height: 38px; line-height: 38px; text-align: center; color: #fff; font-size: 14px; background-color: #d7241a; } #main .company-main .video .more:hover{ background-color: #000; } #main .company-main .video img{ width: 100%; height: 100%; object-fit: cover; } #main .company-main .box{ float: right; width: 610px; } #main .company-main .box .content{ color: #333; font-size: 14px; line-height: 40px; text-indent: 2em; } #main .company-main .box .list{ margin-top: 20px; display: flex; justify-content: space-between; align-items: center; } #main .company-main .box .list li{ margin-left: auto; line-height: 1; color: #333; font-size: 14px; } #main .company-main .box .list li:first-child{ margin-left: 0; } #main .company-main .box .list li .tags .data-tags{ color: #d7241a; font-size: 28px; padding-right: 8px; } #main .company-main .box .list li .tit{ margin-top: 8px; } /* 鍥涘ぇ浼樺娍 */ #main .youshi-main{ background-color: #f5f5f5; padding: 90px 0; } #main .youshi-main .left{ float: left; } #main .youshi-main .right{ float: right; } #main .youshi-main .youshili{ margin-top: 30px; height: 350px; } #main .youshi-main .youshili .imgs{ width: 450px; height: 100%; position: relative; } #main .youshi-main .youshili .imgs .img{ position: absolute; border-radius: 50%; overflow: hidden; } #main .youshi-main .youshili .imgs .img.img1{ width: 350px; height: 350px; bottom: 0; background-color: #6bc9fc; } #main .youshi-main .youshili .imgs .img.img2{ width: 216px; height: 216px; bottom: 0; background-color: #fff; } #main .youshi-main .youshili .imgs.left .img.img1{ left: 0; } #main .youshi-main .youshili .imgs.left .img.img2{ right: 0; } #main .youshi-main .youshili .imgs.right .img.img1{ right: 0; } #main .youshi-main .youshili .imgs.right .img.img2{ left: 0; } #main .youshi-main .youshili .imgs .img img{ width: 100%; height: 100%; object-fit: cover; } #main .youshi-main .youshili .list{ width: 730px; height: 100%; display: flex; justify-content: center; flex-direction: column; } #main .youshi-main .youshili .list li{ margin-bottom: 40px; } #main .youshi-main .youshili .list li:last-child{ margin-bottom: 0; } #main .youshi-main .youshili .list li .img{ width: 85px; height: 70px; line-height: 70px; font-size: 0; } #main .youshi-main .youshili .list li .img img{ max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; } #main .youshi-main .youshili .list li .box{ width: calc(100% - 110px); color: #333; } #main .youshi-main .youshili .list li .box .tit{ font-size: 20px; font-weight: 700; line-height: 1; } #main .youshi-main .youshili .list li .box .tags{ text-transform: uppercase; font-size: 14px; line-height: 1; margin: 10px 0; } #main .youshi-main .youshili .list li .box .con{ font-size: 18px; line-height: 2; } /* 鏂伴椈璧勮 */ #main .news-main{ background-color: #fff; padding: 100px 0; } #main .news-main .common{ margin-bottom: 30px; } #main .news-main .show{ float: left; width: 590px; } #main .news-main .show a{ display: block; } #main .news-main .show a .img{ width: 100%; height: 340px; overflow: hidden; } #main .news-main .show a .img img{ width: 100%; height: 100%; object-fit: cover; } #main .news-main .show a .box{ background-color: #f5f5f5; padding: 20px 35px; } #main .news-main .show a .box .time{ float: left; width: 70px; color: #333; line-height: 1; } #main .news-main .show a .box .time .time1{ font-size: 24px; margin-bottom: 12px; } #main .news-main .show a .box .time .time2{ font-size: 14px; } #main .news-main .show a .box .txt{ float: right; width: calc(100% - 90px); color: #333; } #main .news-main .show a .box .txt .tit{ font-size: 18px; line-height: 1; margin-bottom: 10px; } #main .news-main .show a .box .txt .con{ font-size: 14px; line-height: 1.8; } #main .news-main .show a:hover .img img{ transform: scale(1.1); } #main .news-main .show a:hover .box .txt .tit{ color: #d7241a; padding-left: 10px; } #main .news-main .list{ float: right; width: 590px; } #main .news-main .list li{ position: relative; } #main .news-main .list li:after{ content: ''; position: absolute; top: 0; left: 100px; width: 1px; height: 100%; opacity: 1; background-color: #d1d1d1; transition: all 0.5s ease-in-out; } #main .news-main .list li a{ display: block; padding: 18px 25px; position: relative; z-index: 1; } #main .news-main .list li a:before{ content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #f5f5f5; transition: all 0.5s ease-in-out; z-index: -1; } #main .news-main .list li a .time{ float: left; width: 60px; color: #333; text-align: right; line-height: 1; } #main .news-main .list li a .time .time1{ font-size: 24px; margin-bottom: 12px; } #main .news-main .list li a .time .time2{ font-size: 14px; } #main .news-main .list li a .txt{ float: right; width: calc(100% - 90px); color: #333; } #main .news-main .list li a .txt .tit{ font-size: 18px; line-height: 1; margin-bottom: 10px; } #main .news-main .list li a .txt .con{ font-size: 14px; line-height: 1.8; } #main .news-main .list li:hover:after{ opacity: 0; } #main .news-main .list li:hover a:before{ width: 100%; } /* 缃戠珯搴曢儴 */ .footer{ background-color: #333; } .footer .nav{ border-bottom: 1px solid #fff; display: flex; justify-content: space-between; } .footer .nav li{ margin-left: auto; } .footer .nav li:first-child{ margin-left: 0; } .footer .nav li a{ display: block; color: #fff; font-size: 16px; line-height: 70px; transition: all 0.5s ease-in-out; } .footer .nav li a:hover, .footer .nav li.active a{ color: #d7241a; } .footer .box{ padding: 50px 0; display: flex; justify-content: space-between; align-items: center; } .footer .box .ewm{ width: 190px; height: 190px; line-height: 190px; text-align: center; font-size: 0; padding: 2px; background-color: #fff; } .footer .box .ewm img{ max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; } .footer .box .contact{ width: 360px; } .footer .box .contact li{ color: #fff; font-size: 14px; line-height: 1.5; padding: 10px 0; } .footer .box .footer-map{ width: 580px; } .footer .box .footer-map #dituFooter{ width: 100%; height: 220px; overflow: hidden; } .footer .box .footer-map #dituFooter .BMapLabel{ display: none !important; } .footer .bottom{ border-top: 1px solid #fff; padding: 20px 0; text-align: center; color: #fff; font-size: 14px; text-transform: uppercase; line-height: 2; display: flex; justify-content: space-between; align-items: center; } .footer .bottom a{ color: #fff; } .footer .bottom a:hover{ color: #d7241a; text-decoration: underline; } .footer .bottom a img{ display: inline-block; } .pro-sider{ float: left; width: 230px; } .pro-sider .in-title{ background: #d7241a; color: #fff; line-height: 62px; text-align: center; font-size: 18px; border-radius: 10px; margin-bottom: 5px; } .pro-sider .pro-sider-ul{ margin-bottom: 14px; background-color: #f5f5f5; border-radius: 10px; padding-bottom: 18px; overflow: hidden; } .pro-sider .pro-sider-ul .ul-li a.type{ display: block; box-sizing: border-box; padding-right: 24px; line-height: 48px; text-align: center; margin: 0 6px; color: #333; font-size: 16px; border-bottom: 1px dashed #b9b9b9; position: relative; } .pro-sider .pro-sider-ul .ul-li a.type:before{ content: ''; display: block; top: 50%; right: 15px; position: absolute; transform: translateY(-50%); border-width: 8px; border-color: #999; border-right-width: 0; border-style: dashed; border-left-style: solid; border-top-color: transparent; border-bottom-color: transparent; transition: all 0.5s ease-in-out; } .pro-sider .pro-sider-ul .ul-li:hover a.type:hover, .pro-sider .pro-sider-ul .ul-li a.type.active{ color: #d7241a; font-weight: 700; text-decoration: underline; } .pro-sider .pro-sider-ul .ul-li:hover a.type:before, .pro-sider .pro-sider-ul .ul-li a.type.active:before{ transform: rotate(90deg); margin-top: -8px; border-color: #d7241a; border-width: 8px; border-right-width: 0; border-style: dashed; border-left-style: solid; border-top-color: transparent; border-bottom-color: transparent; } .pro-sider .pro-sider-ul .ul-li .erji{ display: none; overflow: hidden; padding: 10px 0; border-bottom: 1px dashed #b9b9b9; } .pro-sider .pro-sider-ul .ul-li .erji a.goods{ display: block; height: 38px; box-sizing: border-box; padding: 0 20px; color: #666; text-align: center; font-size: 14px; line-height: 38px; } .pro-sider .pro-sider-ul .ul-li .erji a.goods:hover, .pro-sider .pro-sider-ul .ul-li .erji a.goods.active{ color: #fff; background-color: #999; } .pro-sider .contact-box{ background-color: #f5f5f5; padding: 20px; border-radius: 10px; overflow: hidden; } .pro-sider .contact-box img{ margin-bottom: 15px; width: 100%; } .pro-sider .contact-box p{ text-align: center; color: #333; font-size: 15px; line-height: 1; } .m-column-t{ position: relative; text-align: center; font-size: 0; } .m-column-t .center{ display: inline-block; font-size: 0; } .m-column-t .center h3{ color: #333; font-size: 30px; } .m-column-t .center p{ color: #d2d2d2; font-size: 30px; } .m-column-t span{ position: absolute; width: 415px; top: 50%; margin-top: -5px; height: 5px; border-bottom: 1px solid #d2d2d2; z-index: 1; } .m-column-t span.mcl{ left: 0; } .m-column-t span.mcl em{ float: right; } .m-column-t span.mcr{ right: 0; } .m-column-t span em{ display: block; height: 11px; border-left: 1px solid #d2d2d2; } .textLine{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .textLine3{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .textHidden{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .domHidden{ overflow: hidden; } .about-main{ padding: 20px 0 70px; min-height: 170px; } .about-main .ab-content{ float: right; width: 925px; } .about-main .ab-content .title{ line-height: 50px; } .about-main .ab-content .title a{ color: #333; padding: 0 5px; } .about-main .ab-content .title span.icon-home{ color: #535353; } .about-main .ab-content .title em{ color: #999; } .about-main .ab-content .ab-conBox{ overflow: hidden; background: #fff; min-height: 55px; padding: 30px 45px 40px; } .about-main .ab-content .ab-conBox .de-title{ text-align: center; font-size: 20px; color: #333; line-height: 25px; margin-bottom: 8px; } .about-main .ab-content .ab-conBox .sub-co{ font-size: 14px; color: #999; text-align: center; line-height: 18px; } .about-main .ab-content .ab-conBox .ab-detail{ overflow: hidden; margin-top: 30px; font-size: 14px; color: #777373; line-height: 25px; } .ab-sild{ float: left; width: 260px; } .ab-sild .title{ position: relative; height: 50px; text-align: center; background: #f3c04b; font-size: 16px; line-height: 50px; color: #fff; border-bottom: 1px solid #fff; } .ab-sild .title span{ position: absolute; height: 3px; width: 30px; top: 50%; margin-top: -3px; border-bottom: 1px solid #fff; } .ab-sild .title span em{ display: block; height: 7px; border-left: 1px solid #fff; } .ab-sild .title span.stl{ left: 35px; } .ab-sild .title span.stl em{ float: right; } .ab-sild .title span.str{ right: 35px; } .ab-sild .sild-cate{ background: #fff; margin-bottom: 20px; } .ab-sild .sild-cate .list{ overflow: hidden; } .ab-sild .sild-cate .list li{ position: relative; border-bottom: 1px solid #eee; height: 60px; line-height: 60px; } .ab-sild .sild-cate .list li a{ display: block; padding-right: 35px; font-size: 14px; color: #333; padding-left: 20px; } .ab-sild .sild-cate .list li:last-child{ border-bottom: none; } .ab-sild .sild-cate .list li:hover{ border-color: #f3c04b; background: #f3c04b; } .ab-sild .sild-cate .list li:hover a{ color: #fff; } .ab-sild .sild-cate .list li:hover:after{ color: #fff; } .ab-sild .sild-cate .list li:after{ font-weight: bold; right: 20px; top: 0; color: #999; position: absolute; content: "\e904"; font-family: 'icomoon' !important; } .ab-sild .sild-cont{ background: #fff; } .ab-sild .sild-cont .cont-list{ padding: 20px; } .ab-sild .sild-cont .cont-list ul li{ color: #333; padding: 5px 0; padding-left: 60px; font-size: 14px; } .ab-sild .sild-cont .cont-list ul li span{ width: 60px; margin-left: -60px; display: block; height: 20px; line-height: 20px; float: left; color: #666; } .pro-center{ background: #fff; padding-bottom: 25px; } .pro-center .pro-list{ overflow: hidden; padding: 25px 18px 10px; } .pro-center .pro-list ul li{ float: left; width: 200px; margin: 0 10px 20px; border: 1px solid #fff; } .pro-center .pro-list ul li:hover{ border-color: #f3c04b; } .pro-center .pro-list ul li .img{ overflow: hidden; width: 200px; height: 200px; line-height: 200px; text-align: center; font-size: 0; background: #eee; } .pro-center .pro-list ul li .img img{ display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; } .pro-center .pro-list ul li .title{ background: #f7f8fc; height: 40px; line-height: 40px; padding: 0 5px; text-align: center; font-size: 14px; font-weight: bold; color: #333; } .pro-center .pro-list ul li .title:hover{ color: #f3c04b; } .page{ font-size: 0; text-align: center; } .page .center{ display: inline-block; overflow: hidden; } .page .center .page-span{ float: left; font-size: 14px; color: #c3c3c3; line-height: 32px; margin-right: 30px; } .page .center .page-list{ float: left; overflow: hidden; } .page .center .page-list ul li{ float: left; width: auto; min-width: 30px; height: 32px; text-align: center; line-height: 30px; font-size: 14px; margin: 0 4px; padding: 0; border: none; background: transparent; } .page .center .page-list ul li a{ min-width: 20px; padding: 0 5px; border: 1px solid #eee; display: block; color: #333; border-radius: 4px; -webkit-border-radius: 4px; overflow: hidden; background: #fff; } .page .center .page-list ul li:hover a{ color: #f3c04b; } .page .center .page-list ul li.active a{ background: #f3c04b; color: #fff; } .news-center{ background: #fff; padding-bottom: 25px; } .news-center .new-list{ padding: 45px 45px 0px; } .news-center .new-list ul li{ margin-bottom: 35px; border-bottom: 1px solid #eee; } .news-center .new-list ul li a{ overflow: hidden; display: block; height: 90px; padding-bottom: 30px; } .news-center .new-list ul li a .img{ float: left; width: 130px; height: 90px; background: #eee; line-height: 90px; font-size: 0; text-align: center; } .news-center .new-list ul li a .img img{ display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; } .news-center .new-list ul li a .info{ float: right; width: 690px; } .news-center .new-list ul li a .info h3{ font-size: 14px; font-weight: bold; line-height: 24px; color: #333; } .news-center .new-list ul li a .info em{ display: block; font-size: 12px; color: #999; line-height: 16px; margin-bottom: 10px; } .news-center .new-list ul li a .info p{ font-size: 14px; line-height: 22px; color: #999; max-height: 44px; overflow: hidden; } .news-center .new-list ul li a:hover h3{ color: #f3c04b; } .message-c{ background: #fff; padding: 40px 50px; overflow: hidden; } .message-c .p{ font-size: 16px; line-height: 30px; color: #666; margin-bottom: 35px; } .message-c .from input{ display: block; height: 38px; line-height: 38px; padding: 0 5px; border: 1px solid #d2d2d2; margin-bottom: 10px; font-size: 14px; color: #333; } .message-c .from input[name=user], .message-c .from input[name=phone]{ width: 348px; } .message-c .from textarea{ font-size: 14px; color: #333; line-height: 20px; display: block; width: 728px; height: 130px; border: 1px solid #d2d2d2; padding: 5px; margin-bottom: 10px; } .message-c .from .code{ overflow: hidden; } .message-c .from .code input[name=code]{ width: 258px; float: left; } .message-c .from .code a{ display: block; float: left; width: 80px; height: 38px; padding: 1px 0; margin-left: 10px; } .message-c .from .code a img{ width: 80px; height: 38px; } .message-c .from .btn{ padding-top: 25px; } .message-c .from .btn a{ display: block; width: 362px; height: 40px; text-align: center; line-height: 40px; color: #fff; font-size: 16px; background: #8fa4de; } .message-c .from .btn a:hover{ background: #8397d0; } .contact-o{ background: #fff; overflow: hidden; padding: 40px 0; text-align: center; } .contact-o iframe{ width: 830px; height: 500px; margin: 0 auto; }