/* common start */ @font-face {font-family: "思源黑体";src: url("/static/font/SourceHanSansCN-Regular.otf");} * {margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;} html {overflow-x: hidden;} body, button, input, select, textarea {font: 90% "思源黑体";color: #4d4d4d;} body {min-height: 100%;} input, select, textarea {font-size: 100%;} table {border-collapse: collapse;border-spacing: 0;table-layout:fixed;} ol, ul {list-style: none;} h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: 500;} a {color: #333333;text-decoration: none; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; } a:hover {text-decoration: none;} .clearfix:before, .clearfix:after {content: "";display: table;} .clearfix:after {clear: both;overflow: hidden;} .clearfix {zoom: 1;} .fl {float: left;} .fr {float: right;} .main {width: 1718px;margin: 0 auto;max-width: 96%;} .main2 {width: 1400px;margin: 0 auto;max-width: 96%;} .main3 {width: 1095px;margin: 0 auto;max-width: 96%;} .ellipsis {overflow:hidden;text-overflow:ellipsis;white-space: nowrap;} .ellipsis2 {overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;} .ellipsis3 {overflow:hidden;text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:3;} .transform {width: 100%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);} .db {display: block;height: auto;} /* common end */ .header {border-top: 2px solid #0055b4;background: #fff;position: relative;} .header .logo {padding: 40px 0;font-size: 0;} .header .m-logo {display: none;font-size: 0;width: 50%;} .header .m-logo img {height: 40px;} .header .nav {margin-top: 45px;} .header .nav-btn {display: none;} .headerH {display: none;} .nav-btn {display: block;transition: all .3s ease-out;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);border-radius: 3px;cursor: pointer;display: block;height: 40px;line-height: 40px;outline-style: none;pointer-events: all;position: relative;text-align: center;width: 40px;z-index: 1020;top: 0;} .nav-btn-icon {-webkit-transform: rotate(0deg);cursor: pointer;display: inline-block;height: 14px;position: relative;transform: rotate(0deg);transition: .5s ease-in-out;width: 22px;} .nav-btn-icon span {background-color: #007aff;border-radius: 2px;display: block;height: 2px;left: 0;opacity: 1;position: absolute;transform: rotate(0deg);transition: .25s ease-in-out;width: 100%;-webkit-transform: rotate(0deg);} .nav-btn-icon span:first-child {-webkit-transform-origin: left center;top: 0;transform-origin: left center;} .nav-btn-icon span:nth-child(2) {-webkit-transform-origin: left center;top: 6px;transform-origin: left center;} .nav-btn-icon span:nth-child(3) {-webkit-transform-origin: left center;top: 12px;transform-origin: left center;} .nav-open .nav-btn-icon span:first-child{-webkit-transform: rotate(45deg);left: 3px;top: 0;transform: rotate(45deg);} .nav-open .nav-btn-icon span:nth-child(2){opacity: 0;width: 0;} .nav-open .nav-btn-icon span:nth-child(3){-webkit-transform: rotate(-45deg);left: 3px;top: 16px;transform: rotate(-45deg);} .header .nav li {float: left;margin-left: 30px;height: 75px;line-height: 75px;position: relative;} .header .nav li::before {content: '';position: absolute;height: 2px;width: 0;background: #c20000;transition: all .3s;left: 50%;bottom: 0;transform: translateX(-50%);} .header .nav li a {color: #747474;font-size: 16px;font-weight: bold;} .header .nav li:hover a {color: #c20000;} .header .nav li:hover::before {width: 100%;} .header .tel {background: url("../image/telBg.png") no-repeat left center;height: 45px;line-height: 45px;position: absolute;right: 0;top: 0;padding: 0 100px 0 40px;color: #fff;} .header .tel span {line-height: 45px;display: inline-block;vertical-align: top;padding-left: 40px;margin-left: 15px;position: relative;} .header .tel span i {display: block;width: 30px;height: 30px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);} .header .tel span.tel1 i{background: url("../image/tel1.png") no-repeat left center;background-size: cover;} .header .tel span.tel2 i{background: url("../image/tel2.png") no-repeat left center;background-size: cover;} .banner {width: 100%;} .banner img {display: block;width: 100%;} .comt {color: #252525;text-align: center;} .comt .bt {font-weight: bold;padding: 60px 0 0;font-size: 46px;color: #000;} .comt .st {font-size: 16px;color: #8a8a8a;} .footer {width: 100%;background: #343435;} .footerBg {background: url("../image/footerBg.png") no-repeat center;background-size: cover;} .footerContact {padding: 80px 0;text-align: center;} .footerContact .Btit {font-weight: bold;color: #fff;font-size: 48px;margin-bottom: 30px;} .footerContactInfo {width: 850px;margin: 0 auto;color: #fff;} .footerContactInfo ul {display: flex;} .footerContactInfo ul li {flex: 1;align-items: center;justify-content: center;border: 1px solid #fff;padding: 40px;} .footerContactInfo ul li:last-child {margin-left: -1px;} .footerContactInfo ul li i {display: block;margin: 0 auto 10px;width: 50px;height: 50px;} .footerContactInfo ul li:first-child i {background: url("../image/ficon1.png") no-repeat center;background-size: cover;} .footerContactInfo ul li:last-child i {background: url("../image/ficon2.png") no-repeat center;background-size: cover;} .footerContactInfo .tit {font-size: 24px;margin-bottom: 20px;} .footerContactInfo .brief {font-size: 16px;line-height: 25px;height: 50px;} .footerInfo {background: rgba(0,0,0,0.85);padding: 50px 0;} .footerBg2 .footerInfo {background: #343435;} .footerEwm {text-align: center;} .footerEwm img {width: 220px;height: 220px;display: block;} .footerEwm p {color: #cbcccc;font-size: 15px;margin-top: 10px;} .footerInfotxt {margin-top: 30px;} .footerNav {border-bottom: 1px solid #5a5958;line-height: 55px;margin-bottom: 15px;} .footerNav li {float: left;margin-right: 50px;} .footerNav li:last-child {margin-right: 0;} .footerNav li a {color: #fff;} .footerNav li a:hover, .footerInfotxt p a:hover {color: #c20000;} .footerInfotxt {color: #fff;} .footerInfotxt p {margin-top: 10px;} .footerInfotxt p span, .footerInfotxt p a {display: inline-block;margin-right: 15px;} .footerInfotxt p a {color: #fff;} .service {background: #eeeeee;padding: 30px 0 100px;} .serviceList {margin-top: 50px;} .serviceList li {transition: 0.5s;width: 298px;height: 610px;float: left;margin-right: 10px;position: relative;overflow: hidden;} .serviceList li.service1 {background: url("../image/s1.png") no-repeat center;background-size: cover;} .serviceList li.service2 {background: url("../image/s2.png") no-repeat center;background-size: cover;} .serviceList li.service3 {background: url("../image/s3.png") no-repeat center;background-size: cover;} .serviceList li.service4 {background: url("../image/s4.png") no-repeat center;background-size: cover;margin-right: 0;} .serviceList li.active {width: calc(100% - 924px);} .serviceList li.service1.active {background: url("../image/s1.png") no-repeat center;background-size: cover;} .serviceList li.service2.active {background: url("../image/s2_1.png") no-repeat center;background-size: cover;} .serviceList li.service3.active {background: url("../image/s3_1.png") no-repeat center;background-size: cover;} .serviceList li.service4.active {background: url("../image/s4_1.png") no-repeat center;background-size: cover;} .serviceList li .mask {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);color: #fff;transition: 0.5s;} .serviceList li .mask .txt {padding: 20px;width: 100%;position: absolute;top: 50%;left: 0;transform: translateY(-50%);} .serviceList .icon {width: 55px;height: 55px;display: block;} .serviceList .mask .icon {margin: 10px auto;} .service1 .icon {background: url("../image/sicon1.png") no-repeat center;background-size: 90%;} .service2 .icon {background: url("../image/sicon2.png") no-repeat center;background-size: 90%;} .service3 .icon {background: url("../image/sicon3.png") no-repeat center;background-size: 90%;} .service4 .icon {background: url("../image/sicon4.png") no-repeat center;background-size: 90%;} .serviceList .bt {font-size: 24px;color: #fff;} .serviceList .mask .bt {text-align: center;} .serviceList li.active .mask {top: -40px;opacity: 0;} .serviceList li .info {position: absolute;left: 0;bottom: -40px;width: 100%;height: 100%;background: url("../image/stBg.png") no-repeat center bottom;opacity: 0;transition: 0.3s;} .serviceList li.active .info {bottom: 0;opacity: 1;} .serviceList li .infoTxt {padding: 50px;position: absolute;left: 0;bottom: 0;width: 100%;text-align: left;} .serviceList li .infoTxt .bt {margin: 20px 0;} .serviceList li .infoTxt .brief {color: #fff;font-size: 16px;line-height: 25px;height: 50px;overflow: hidden;} @media screen and (max-width:1405px) { .header .logo {padding: 30px 0;} .header .logo img {height: 30px;} .header .tel {height: 35px;line-height: 35px;} .header .tel span {line-height: 35px;} .header .nav {margin-top: 35px;} .header .nav li {height: 55px;line-height: 55px;} .header .nav li {margin-left: 20px;} } @media screen and (max-width:1300px) { .serviceList li {height: 550px;width: calc((100% - 430px) / 3);} .serviceList li.active {width: 400px;} } @media screen and (max-width:1200px) { .header .logo img {height: 25px;} .header .nav li {margin-left: 15px;} .header .nav li a {font-size: 14px;} .header .nav li {height: 50px;line-height: 50px;} .comt .bt {padding: 40px 0 0;font-size: 30px;} .serviceList .bt {font-size: 22px;} } @media screen and (max-width:1110px) { .footerNav {display: none;} .footerxx P:first-child {display: none;} .footerEwm img {width: 150px;height: 150px;} } @media screen and (max-width:1015px) { .header {padding: 10px;height: 60px;z-index: 2;position: fixed;width: 100%;} .headerH {display: block;height: 60px;opacity: 0;} .header .logo, .header .tel {display: none;} .header .m-logo, .header .nav-btn {display: block;} .header .nav {margin-top: 0;} .header .nav ul {width: 100%;height: 100%;overflow: hidden;position: absolute;left: 0;top: 0;background: rgba(255, 255, 255, 1);transition: all .3s;opacity: 0;z-index: -2;padding: 0 10px;} .header.nav-open ul {top: 58px;height: auto;opacity: 1;visibility: visible;z-index: 99999;} .header .nav ul li {width: 100%;margin-left: 0;} .header .nav li a {height: 35px;line-height: 35px;} .comt .bt {padding: 30px 0 0;font-size: 24px;} .footerContact .Btit {font-size: 24px;} } @media screen and (max-width:992px){ .serviceList .bt {font-size: 20px;} .serviceList li .infoTxt .brief {font-size: 14px;} .serviceList li .mask .txt {padding: 10px;} } @media screen and (max-width:860px) { .service {padding: 30px 0 0} .service .main {width: 100%;max-width: 100%;} .serviceList li {height: 400px;width: calc((100% - 315px) / 3);margin-right: 5px;} .serviceList li.active {width: 300px;} .footerInfo {padding: 30px 0;} .footerContactInfo {width: 100%;} .footerContactInfo .tit {font-size: 20px;} .footerEwm img {width: 100px;height: 100px;} } @media screen and (max-width:768px){ .serviceList li {height: 300px;margin-bottom: 5px;} .serviceList li .mask {display: none;} .serviceList li, .serviceList li.active {width: 100%;} .serviceList li.service1 {background: url("../image/s1.png") no-repeat center;background-size: cover;} .serviceList li.service2 {background: url("../image/s2_1.png") no-repeat center;background-size: cover;} .serviceList li.service3 {background: url("../image/s3_1.png") no-repeat center;background-size: cover;} .serviceList li.service4 {background: url("../image/s4_1.png") no-repeat center;background-size: cover;} .serviceList li .info {opacity: 1;bottom: 0;} .serviceList li .infoTxt {padding: 50px 20px;} .serviceList .icon {width: 40px;height: 40px;} .serviceList li .infoTxt .bt {margin: 10px 0;} .footerInfo {padding: 20px 0;} .footerContact {padding: 40px 0;} .footerContactInfo .tit {font-size: 18px;} .footerContactInfo ul li {padding: 10px;} .footerContactInfo .brief {font-size: 14px;} .footerInfotxt {width: calc(100% - 120px);margin-top: 15px;} } @media screen and (max-width:580px) { .header .m-logo img {height: 25px;margin-top: 7px;} .footerInfotxt {margin-top: 0;} }