body { color: #555; } .fl { float: left; } .fr { float: right; } /** *** header **/ .top { max-width: 1200px; height: 100px; margin: auto; position: relative; } .top-logo { float: left; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .top-logo > a { display: inline-block; text-align: left; } .top-logo img { width: 205px; height: 64px; } .top-logo .slogan { display: inline-block; text-align: left; float: right; margin: 8px 0 0 20px; } .top-logo .slogan > a { display: inline-block; text-align: left; line-height: 24px; } .top-logo .slogan h4 { text-align: left; } .top-tel { padding-left: 48px; float: right; position: absolute; top: 50%; right: 80px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-family: Arial; font-weight: bold; color: #ee7907; line-height: 24px; } .top-tel ::before { content: ""; background: url(../images/tel-top.png) no-repeat; width: 40px; height: 40px; background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .top-tel h3:last-child { letter-spacing: 0.2px; } .top-ewm { width: 74px; height: 64px; overflow: hidden; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .top-ewm img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .common-nav { position: relative; height: 60px; } .common-nav > ul { max-width: 1200px; margin: auto; display: -moz-box; display: -webkit-box; } .common-nav > ul > li { font-size: 18px; font-weight: 400; text-align: center; float: left; width: 12.5%; position: relative; } .common-nav > ul > li:hover .dropdown { opacity: 1; position: absolute; top: 20px; left: 0; right: 0; margin: auto; transform: translateY(40px); -webkit-transform: translateY(40px); -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; z-index: 999; } .common-nav > ul > li > a { display: block; height: 60px; line-height: 60px; color: #ffffff; -webkit-transition: transform 0.5s; -ms-transition: transform 0.5s; transition: transform 0.5s; } .common-nav > ul > li > a::after { content: attr(data-hover); color: #ee7907; opacity: 0; -webkit-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } .common-nav > ul li > a span { opacity: 1; display: block; pointer-events: none; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .common-nav > ul li > a span.active { color: #ee7907; } .common-nav > ul > li:hover > a span { opacity: 0; } .common-nav > ul > li:hover > a { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .common-nav > ul > li:hover > a::after { opacity: 1; } .common-nav > ul > li > .dropdown { opacity: 0; position: absolute; top: 60px; left: 0; right: 0; margin: auto; width: 150px; z-index: -1; } .common-nav .dropdown > ul li { background: transparent; } .common-nav .dropdown > ul li > a { display: block; line-height: 48px; height: 48px; color: #ffffff; } .common-nav .dropdown > ul li:hover { background: #e3efff; -webkit-transition: width 0.5s; -ms-transition: width 0.5s; transition: width 0.5s; } .common-nav .dropdown > ul li:hover > a { color: #0e3080; } /** *** banner **/ .banner { height: 804px; position: relative; z-index: 996; } .banner .banner-container { height: 804px; width: 100%; } .banner .banner-pagination { bottom: 80px; } .banner img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .arrow-left { background: url(../images/prev.png) no-repeat left top; position: absolute; left: 10px; top: 50%; margin-top: -15px; width: 33px; height: 64px; z-index: 99; } .arrow-right { background: url(../images/next.png) no-repeat left bottom; position: absolute; right: 10px; top: 50%; margin-top: -15px; width: 33px; height: 64px; z-index: 99; } .content-slide { padding: 20px; color: #ffffff; } .title { font-size: 25px; margin-bottom: 10px; } .pagination { position: absolute; left: 0; text-align: center; bottom: 5px; width: 100%; z-index: 99; } .swiper-pagination-switch { display: inline-block; width: 20px; height: 3px; border-radius: 10px; background: #e3efff; margin: 0 3px; cursor: pointer; } .swiper-active-switch { background: #0e3080; width: 30px; height: 3px; } /** *** adver1 **/ .adver { position: relative; height: 200px; } .adver .adv-box { width: 1200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .adver img { display: block; margin: 0 auto; max-width: 100%; height: auto; } .adver .adv-tel { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); overflow: hidden; } .adver .adv-tel > div { position: relative; padding-left: 56px; color: #ffffff; } .adver .adv-tel > div::before { content: ""; background: url(../images/index-tel-icon.png) no-repeat; background-size: cover; width: 50px; height: 50px; position: absolute; left: 0; } .adver .adv-tel > div p { font-size: 20px; } .adver .adv-tel > div h4 { font-size: 30px; font-weight: bold; font-family: "Impact"; } .adver .adv-tel button { margin-top: 12px; font-size: 18px; color: #ffffff; padding: 16px; background: #ee7907; border-radius: 4px; } /** *** keywords **/ .keywords { margin: auto; border-bottom: 3px solid #0e3080; overflow: hidden; } .keywords .item { width: 25%; max-height: 136px; padding: 40px 0; float: left; text-align: center; position: relative; color: #666666; } .keywords .item > h4 { font-size: 30px; font-weight: bold; line-height: 40px; color: #333333; } .keywords .item:before { content: ''; width: 100%; position: absolute; top: 0; left: 0; width: 0; height: 140px; background: #0e3080; z-index: -1; opacity: 0; } .keywords .item:hover, .keywords .item:hover h4 { color: #ffffff; } .keywords .item:hover:before { width: 100%; opacity: 1; box-sizing: border-box; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .keywords .item > p { font-size: 16px; line-height: 20px; } .title { max-width: 1200px; padding: 80px 0 50px; margin: auto; } .title h4 { font-size: 36px; font-weight: bold; text-align: center; color: #333333; line-height: 52px; margin-bottom: 8px; } .title p { font-size: 18px; text-align: center; line-height: 28px; color: #666; text-transform: uppercase; } .title a:hover { color: #0e3080; } .content { max-width: 1200px; margin: auto; } /** *** solution **/ .solution { padding-bottom: 80px; } .solution .tab { text-align: center; display: flex; } .solution .tab .item { font-size: 20px; padding: 15px 15px; background: #E9E6ED; display: inline-flex; margin-right: 10px; color: #0e3080; position: relative; z-index: 1; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; flex: 1; align-items: center; justify-content: center; } .solution .tab .item:hover { background: #0e3080; color: #ffffff; cursor: pointer; } .solution .tab .item:last-child { margin-right: 0; } .solution .tab .item.cur { background: #0e3080; color: #ffffff; opacity: 1; box-sizing: border-box; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .solution .tab-con { padding: 30px 0 70px 0; overflow: hidden; } .solution .tab-con > div { display: none; } .solution .tab-con > div.on { display: block; transition: all 0.3s; } .solution .tab-con .pic { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; position: relative; width: 600px; height: 400px; margin-right: 64px; } .solution .tab-con .pic img { max-width: 100%; position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .solution .tab-con .pic::after { content: ""; width: 120px; height: 120px; background: #E3EFFF; position: absolute; right: -20px; bottom: -20px; z-index: -1; } .solution .tab-con .text { width: 516px; position: relative; transition: 0.3s; } .solution .tab-con .text .tit { margin-top: 12px; } .solution .tab-con .text .con { font-size: 16px; line-height: 30px; color: #666666; margin-top: 8%; margin-bottom: 40px; max-height: 268px; overflow: hidden; transition: 0.3s; } .solution .tab-con .text .con > p { padding-bottom: 24px; transition: 0.3s; white-space: pre-line; line-height: 1.5; } .solution .tab-con .text:hover .tit, .solution .tab-con .text:hover .con, .solution .tab-con .details { color: #0e3080; } .solution .tab-con .text:hover { padding-left: 8px; } .solution .index-case { margin-bottom: 50px; position: relative; } .solution .index-case .cases-container { width: 100%; height: 260px; } .solution .index-case .arrow-left { top: 50%; left: -72px; } .solution .index-case .arrow-right { top: 50%; right: -72px; } .solution .index-case h5 { font-size: 30px; font-weight: 700; text-align: center; color: #333333; line-height: 66px; } .solution .index-case .index-case-con { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .solution .index-case .cases-container1, .solution .index-case .cases-container2, .solution .index-case .cases-container3, .solution .index-case .cases-container4, .solution .index-case .cases-container5, .solution .index-case .cases-container6 { width: 100%; } .solution .index-case .swiper-slide { width: 300px; } .solution .index-case .index-case-con .item { width: 285px; margin: 0 2%; padding-bottom: 14px; } .solution .index-case .index-case-con .text { padding: 16px 0; text-align: center; font-size: 16px; color: #666666; border-bottom: 1px solid #e3efff; overflow: hidden; /*超出部分隐藏*/ text-overflow: ellipsis; /* 超出部分显示省略号 */ white-space: nowrap; /*规定段落中的文本不进行换行 */ position: relative; transition: 0.6s; } .solution .index-case .index-case-con .text:before { content: ""; width: 100%; height: 1px; background: #0e3080; position: absolute; left: 0; bottom: 0; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .solution .index-case .index-case-con .item:hover .text::before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; } .solution .index-case .index-case-con .item:hover .text { color: #0e3080; } .solution .index-case .index-case-con .pic { width: 285px; height: 190px; overflow: hidden; } .solution .index-case .index-case-con .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } /** *** product **/ .index-product { background: url(../images/pro-bg.jpg) no-repeat; background-size: cover; height: 868px; padding-bottom: 80px; position: relative; } .index-product .content { position: relative; } .index-product .product-container { height: 668px; } .index-product .arrow-left { top: 50%; left: -72px; } .index-product .arrow-right { top: 50%; right: -72px; } .index-product .item { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; background: #ffffff; margin: 20px 0; margin-right: 32px; } .index-product .item:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .index-product .item .pic { width: 479px; height: 352px; margin: auto; padding: 22px 40px; } .index-product .item .pic img { max-width: 100%; } .index-product .item .text { overflow: hidden; } .index-product .item .text .pro-tit { background: #0e3080; color: #ffffff; display: inline-block; padding: 40px; float: left; } .index-product .item .text .pro-tit > h5 { display: inline-block; width: 50px; position: relative; font-size: 24px; line-height: 30px; padding-bottom: 20px; } .index-product .item .text .pro-tit > h5::after { content: ""; width: 24px; height: 2px; background: #ffffff; position: absolute; left: 0; bottom: 0; } .index-product .item .text .pro-tit > p { font-size: 10px; padding-top: 20px; color: #ffffff; } .index-product .item .text .pro-characteristics { padding: 30px 0; color: #333; float: right; width: 356px; margin: 0 40px; position: relative; transition: 0.3s; } .index-product .item .text .pro-characteristics > h6 { font-size: 18px; padding-bottom: 24px; } .index-product .item .text .pro-desc > p { font-size: 14px; line-height: 24px; } .index-product .item .text .pro-desc { height: 72px; overflow: hidden; text-overflow: ellipsis; transition: 0.3s; } .index-product .item .pro-characteristics:hover .pro-desc { margin-left: 8px; } /** *** why **/ .why .item { float: left; width: 285px; height: 180px; background-size: cover; text-align: center; position: relative; margin-bottom: 60px; margin-right: 16px; transition: all 0.3s; } .why .item:hover { box-shadow: 0 0 8px rgba(14, 48, 128, 0.2); } .why .item:nth-child(4n) { margin-right: 0; } .why .item:nth-child(1) { background: url(../images/why-bg1.png) no-repeat; } .why .item:nth-child(2) { background: url(../images/why-bg2.png) no-repeat; } .why .item:nth-child(3) { background: url(../images/why-bg3.png) no-repeat; } .why .item:nth-child(4) { background: url(../images/why-bg4.png) no-repeat; } .why .item:nth-child(5) { background: url(../images/why-bg5.png) no-repeat; } .why .item:nth-child(6) { background: url(../images/why-bg6.png) no-repeat; } .why .item:nth-child(7) { background: url(../images/why-bg7.png) no-repeat; } .why .item .pic { width: 80px; height: 80px; position: absolute; top: -39px; left: 0; right: 0; margin: auto; background: #F6FAFF; border: 2px solid #E5F0FF; border-radius: 50%; } .why .item .pic img { max-width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .why .item .text { padding: 60px 42px 0; } .why .item .text h5 { display: inline-block; font-size: 18px; line-height: 30px; color: #0e3080; } .why .item .text p { font-size: 14px; line-height: 20px; color: #666; text-align: center; } .why .zx { width: 285px; height: 180px; background: url(../images/why-bg8.png) no-repeat; background-size: cover; } .why .zx .text h5 { font-size: 20px; font-weight: 400; text-align: center; color: #0e3080; } .why .zx .text .zx-btn { margin-top: 18px; display: inline-block; text-align: center; width: 180px; height: 50px; background: #ee7907; font-size: 18px; font-weight: 700; color: #ffffff; line-height: 50px; } /** *** cooperation **/ .cooperation { background: #f6faff; padding-bottom: 80px; } .cooperation .content { position: relative; } .cooperation .cooperation-container { height: 400px; } .cooperation .arrow-left { top: 50%; left: -72px; } .cooperation .arrow-right { top: 50%; right: -72px; } .cooperation .cooperation-pagination { bottom: -40px; } .cooperation .pic { width: 600px; height: 400px; overflow: hidden; display: initial; } .cooperation .pic img { max-width: 100%; transition: 0.3s; } .cooperation .pic:hover img { transform: scale(1.1); } .cooperation .item { overflow: hidden; } .cooperation .item .text { display: inline-block; overflow: hidden; background: #ffffff; width: 596px; height: 400px; transition: 0.3s; } .cooperation .item .text:hover { margin-left: 4px; } .cooperation .item .text .tit { margin: 40px; } .cooperation .item .text .item { font-size: 16px; color: #666666; padding: 0 40px; margin-top: 10px; overflow: hidden; line-height: 30px; } .cooperation .item .text i { display: inline-block; background: url(../images/cooperation-bg.png) no-repeat; width: 94px; height: 30px; background-size: cover; font-size: 16px; line-height: 30px; color: #ffffff; text-align: center; margin-right: 16px; float: left; font-style: normal; } .cooperation .item .text p { display: inline-block; max-width: 384px; text-align: left; line-height: auto; } /** *** steps **/ .steps { position: relative; padding: 80px 0; } .steps .item { display: inline-block; background: url(../images/steps-bg.png) no-repeat; width: 149px; height: 210px; background-size: cover; text-align: center; transition: all 0.3s; position: relative; } .steps .item img { padding-top: 32%; } .steps .item img:nth-child(1) { width: 64px; height: 54px; } .steps .item img:nth-child(2) { width: 64px; height: 52px; } .steps .item img:nth-child(3) { width: 62px; height: 64px; } .steps .item img:nth-child(4) { width: 64px; height: 58px; } .steps .item img:nth-child(5) { width: 64px; height: 53px; } .steps .item img:nth-child(6) { width: 60px; height: 60px; } .steps .item h5 { font-size: 18px; line-height: 28px; color: #333; padding: 12px 0 4px; } .steps .item p { font-size: 12px; line-height: 12px; color: #999999; text-transform: uppercase; } .steps .item:hover { transform: scale(1.1); } .steps i { background: url(../images/steps-right.png) no-repeat; width: 10px; height: 20px; background-size: cover; display: inline-block; margin: 0 1.8%; } /** *** huoban **/ .huoban { padding-bottom: 80px; position: relative; } .huoban .content { position: relative; padding-bottom: 40px; } .huoban .arrow-left { top: 32%; left: -72px; } .huoban .arrow-right { top: 32%; right: -72px; } .huoban .huoban-container { height: 150px; position: relative; } .huoban .huoban-container .arrow-left, .huoban .huoban-container .arrow-right { top: 40%; } .huoban .item-box { overflow: hidden; margin: 2% 0; } .huoban .item { width: 18.82%; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; float: left; text-align: center; border: 1px solid #dddddd; margin: 0 0.5%; overflow: hidden; } .huoban .item img { margin: auto; max-width: 100%; } /** *** news **/ .index-news { background: #F9F9F9; padding-bottom: 80px; } .index-news .tab { text-align: center; overflow: hidden; padding-bottom: 30px; } .index-news .tab .item { display: inline-block; margin: 0 20px; background: #E9E6ED; color: #0e3080; padding: 14px 54px; font-size: 20px; cursor: pointer; } .index-news .tab .item:hover { background: #0e3080; color: #ffffff; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .index-news .tab .item.cur { background: #0e3080; color: #ffffff; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .index-news .tab-con { background: #ffffff; padding: 40px; margin-bottom: 50px; } .index-news .tab-con > div { display: none; overflow: hidden; } .index-news .tab-con > div.on { display: block; transition: all 0.3s; } .index-news .recommend { width: 520px; margin-right: 38px; display: inline-block; } .index-news .recommend .pic { height: 347px; overflow: hidden; } .index-news .recommend .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: 0.3s; } .index-news .recommend .pic:hover img { transform: scale(1.1); } .index-news .recommend .text { position: relative; transition: 0.3s; } .index-news .recommend .text > h6 { font-size: 18px; line-height: 60px; } .index-news .recommend .text .text-con { font-size: 14px; line-height: 24px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ overflow: hidden; margin-bottom: 8px; text-overflow: ellipsis; } .index-news .recommend .text .time { font-size: 16px; color: #999; line-height: 33px; } .index-news .recommend .text .details { line-height: 33px; } .index-news .recommend:hover .text { margin-left: 4px; } .index-news .recommend:hover .text > h6, .index-news .recommend:hover .text .text-con, .index-news .recommend:hover .text .time { color: #0e3080; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .index-news .recommend:hover > p { color: #0e3080; } .index-news .index-news-list { width: 556px; display: inline-block; } .index-news .index-news-list .item { padding: 20px 0; border-bottom: 1px solid #e3efff; transition: 0.3s; overflow: hidden; } .index-news .index-news-list .item:first-child { padding: 0 0 20px 0; } .index-news .index-news-list .item:last-child { border-bottom: none; padding: 20px 0 0 0; } .index-news .index-news-list .item:hover .text { margin-left: 8px; } .index-news .index-news-list .item:hover .text > h6, .index-news .index-news-list .item:hover .text > p { color: #0e3080; -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; } .index-news .index-news-list .item .time { width: 90px; height: 90px; border: 1px solid #e3efff; text-align: center; } .index-news .index-news-list .item .time h4 { font-size: 30px; line-height: 30px; color: #0e3080; font-weight: 400; text-align: center; padding-top: 24px; } .index-news .index-news-list .item .time p { font-size: 14px; font-weight: 400; text-align: center; color: #0e3080; line-height: 24px; padding-bottom: 24px; } .index-news .index-news-list .item .text { width: 82%; transition: 0.3s; } .index-news .index-news-list .item .text h6 { font-size: 18px; font-weight: 400; text-align: left; color: #333333; line-height: 34px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; padding-left: 22px; } .index-news .index-news-list .item .text p { padding-left: 22px; font-size: 14px; font-weight: 400; text-align: left; color: #666666; line-height: 24px; display: -webkit-box; word-break: break-all; /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ -webkit-line-clamp: 2; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; } .more { display: block; font-size: 16px; width: 136px; line-height: 48px; color: #ffffff !important; background: #0e3080; text-align: center; margin: auto; padding-right: 44px; position: relative; transition: 0.3s; } .more::after { content: "+"; background: #E3EFFF; color: #0e3080; width: 44px; height: 44px; position: absolute; right: 2px; top: 0; bottom: 0; margin: auto; } .more:hover { background: #E3EFFF; color: #0e3080 !important; } /** *** about **/ .about .content { overflow: hidden; padding-bottom: 80px; } .about .content .pic { display: inline-block; width: 600px; height: 371px; overflow: hidden; float: left; } .about .content .pic a { display: inline-block; } .about .content .pic img { max-width: 100%; transition: 0.3s; } .about .content .pic:hover img { transform: scale(1.1); } .about .content .text { display: inline-block; width: 558px; margin-left: 40px; font-size: 14px; color: #333333; line-height: 24px; position: relative; } .about .content .text a { display: inline-block; } .about .content .text a:hover { color: #0e3080; } .about .content .text p { padding-top: 12px; } .about .content .shortcut { display: inline-block; width: 558px; margin-left: 40px; margin-top: 34px; } .about .content .shortcut-con { border: 2px solid #E3EFFF; padding: 20px; overflow: hidden; } .about .content .shortcut-con .item { padding-bottom: 10px; } .about .content .shortcut-con .item:last-child { padding-bottom: 0; } .about .content .shortcut-con .item p { font-size: 14px; color: #0e3080; display: inline; } .about .content .shortcut-con .item a { font-size: 14px; color: #333; position: relative; padding: 0 16px; } .about .content .shortcut-con .item a::after { content: "|"; position: absolute; right: 0; } .about .content .shortcut-con .item a:last-child::after { content: ""; position: absolute; right: 0; } .about .content .shortcut-con .item a:hover { color: #0e3080; } .details { position: absolute; right: 0; color: #0e3080; font-weight: 400; padding: 0 !important; bottom: 0; } .tit { font-size: 18px; line-height: 20px; position: relative; padding-left: 16px; margin-bottom: 20px; } .tit::before { content: ""; width: 8px; height: 10px; background: #E3EFFF; position: absolute; top: 0; left: 0; } .tit::after { content: ""; width: 8px; height: 10px; background: #0e3080; position: absolute; bottom: 0; left: 0; } /** *** right nav **/ .new_right_nav { display: block; width: 58px; height: 273px; position: fixed; top: 40%; right: 0; z-index: 99; } .new_right_menu { display: block; width: 170px; height: 58px; margin-bottom: 10px; background-color: #0e3080; border-radius: 4px 0 0 4px; font-size: 0px; color: #ffffff; line-height: 58px; position: relative; cursor: pointer; } .new_right_menu span { display: inline-block; float: left; width: 28px; height: 28px; /*margin-left: 12px;*/ position: absolute; left: 12px; top: 15px; overflow: hidden; } .new_right_menu span img { display: block; width: 100%; height: 100%; } .new_right_menu_in { display: inline-block; width: 130px; float: right; text-align: right; font-size: 14px; padding-right: 8px; } /*.new_right_menu:hover{ background-color: #9d2932; }*/ .new_right_menu_ewm { display: none; width: 100px; height: 100px; border-radius: 10px; background-color: #0e3080; padding: 5px; position: absolute; top: -24px; left: -120px; overflow: hidden; } .new_right_menu_ewm img { border-radius: 8px; max-width: 100%; } /** *** footer **/ footer { background: #000; } .foot-nav { max-width: 1200px; margin: auto; overflow: hidden; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .foot-nav > ul { padding-top: 80px; display: -moz-box; display: -webkit-box; } .foot-nav > ul > li { float: left; width: 20%; position: relative; color: #ffffff; transition: 0.3s; } .foot-nav > ul > li .dropdown { padding-top: 13px; } .foot-nav > ul > li .dropdown > ul > li > a { display: inline-block; line-height: 30px; color: rgba(255, 255, 255, 0.5); transition: 0.3s; font-size: 16px; } .foot-nav > ul > li .dropdown > ul > li:hover a { color: #ffffff; margin-left: 4px; } .foot-nav > ul > li > div > h4 { font-size: 18px; line-height: 26px; } .foot-nav > ul > li > div > p { font-size: 14px; text-transform: uppercase; } .foot-contact { max-width: 1200px; margin: auto; padding: 40px 0; overflow: hidden; } .foot-contact .foot-logo { width: 160px; height: 50px; float: left; } .foot-contact .foot-logo img { max-width: 100%; } .foot-contact .foot-tel { position: relative; float: left; color: #ffffff; margin-left: 80px; padding-left: 64px; } .foot-contact .foot-tel::before { content: ""; background: url(../images/foot-tel.png) no-repeat; width: 50px; height: 50px; background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; } .foot-contact .foot-tel h4 { font-size: 24px; font-weight: 400; text-align: left; color: #ffffff; line-height: 24px; padding-bottom: 10px; } .foot-contact .foot-tel p { font-size: 14px; font-weight: 400; text-align: left; color: #ffffff; line-height: 14px; } .foot-contact .foot-ewm { float: right; position: relative; height: 100px; } .foot-contact .foot-ewm img { max-width: 100px; } .foot-contact .foot-ewm p { float: right; font-size: 14px; font-weight: 400; text-align: left; color: #ffffff; line-height: 20px; padding-left: 20px; margin-top: 12%; } .foot-contact .foot-ewm .other-contact { position: absolute; left: 120px; bottom: 20%; } .foot-contact .foot-ewm .other-contact a { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: 0; margin-right: 10px; padding: 0 0 5px 20px; } .foot-links { max-width: 1200px; margin: auto; color: rgba(255, 255, 255, 0.5); font-size: 14px; } .foot-links p { display: inline-block; } .foot-links .links-qq img { width: 18px; height: 20px; background: url(../images/links-qq.png) no-repeat; background-size: cover; margin-top: 4px; } .foot-links a { font-size: 14px; line-height: 30px; color: rgba(255, 255, 255, 0.5); margin: 0 8px; position: relative; } .foot-links a:hover { color: #ffffff; } .foot-copyright { max-width: 1200px; margin: auto; padding: 36px 0 80px; color: rgba(255, 255, 255, 0.5); font-size: 14px; } .foot-copyright p { display: inline; } .foot-copyright p:last-child { float: right; } .foot-copyright a { color: rgba(255, 255, 255, 0.5); } .foot-copyright a:hover { color: #ffffff; } /** *** 内页样式 **/ .inside-banner { position: relative; overflow: hidden; } .inside-banner img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .crumbsbox { max-width: 1200px; margin: auto; line-height: 80px; height: 80px; background: #ffffff; position: relative; z-index: 1; } .crumbsbox .crumbs { position: relative; padding-left: 20px; } .crumbsbox .crumbs::before { content: ""; background: url(../images/crumbs-home.png) no-repeat; width: 16px; height: 16px; background-size: cover; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; color: #333333; } .crumbsbox .crumbs a { font-size: 16px; position: relative; margin: 0 8px; color: #333333; } .crumbsbox .crumbs a:hover { color: #0e3080; } .crumbsbox .categroy .item { float: left; margin: 0 8px; padding: 0 8px; position: relative; transition: 0.6s; } .crumbsbox .categroy .item a { font-size: 18px; line-height: 40px; display: inline-block; } .crumbsbox .categroy .item:before { content: ""; width: 100%; height: 2px; background: #19306d; position: absolute; left: 0; bottom: 0; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .crumbsbox .categroy .item:hover::before, .crumbsbox .categroy .item.cur::before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; } .crumbsbox .categroy .item:hover a, .crumbsbox .categroy .item.cur a { color: #0e3080; } .crumbsbox .search input { background: #f5f5f5; width: 216px; line-height: 40px; padding: 0 12px; margin-right: -4px; } .crumbsbox .search button { background: #0e3080; width: 40px; height: 40px; } .news-list { max-width: 1200px; margin: 40px auto; } .news-list .item { background: #ffffff; padding: 30px; margin-bottom: 20px; position: relative; } .news-list .item .pic { width: 300px; height: 200px; overflow: hidden; } .news-list .item .pic img { max-width: 100%; } .news-list .item .con { margin: 38px 0; width: 60%; border-right: 1px dotted #999999; } .news-list .item .con .desc { line-height: 1.5; margin: 24px 0; display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .news-list .item .time { width: 150px; position: absolute; top: 50%; right: 30px; transform: translateY(-50%); text-align: center; } .news-list .item:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition: all 0.5s; } .news-list .item:hover h4, .news-list .item:hover p, .news-list .item:hover h2 { color: #0e3080; transition: all 0.5s; } .news-list .item:hover .con { border-right: 1px dotted #0e3080; } .pages { max-width: 1200px; margin: 40px auto; text-align: center; } .pages a { font-size: 16px; padding: 8px 16px; background: #ffffff; display: inline-block; margin: 0 8px; border: 1px solid #dddddd; } .pages a:hover { background: #0e3080; color: #ffffff; } .pages a.cur { background: #0e3080; color: #ffffff; } .news-show { max-width: 1080px; margin: 40px auto; padding: 60px; background: #ffffff; } .news-show .news-tit { text-align: center; padding-bottom: 24px; border-bottom: 1px solid #f5f5f5; } .news-show .news-tit h4 { line-height: 1.5; } .news-show .news-tit > div { margin: auto; color: #999; } .news-show .news-tit > div p { display: inline-block; margin: 16px; color: #999; } .news-show .news-con { text-align: center; margin-top: 20px; } .news-show .news-con p { line-height: 1.5; text-align: left; color: #333; font-size: 16px; } .news-show .news-con img { margin: 24px auto; } .news-show .share-box { border: 1px dotted #999999; padding: 8px 24px; margin-top: 40px; } .news-show .article-label { line-height: 52px; } .news-show .article-label p { margin-right: 16px; position: relative; padding-left: 24px; } .news-show .article-label p::after { content: ""; background: url(../images/lable.png) no-repeat; width: 16px; height: 16px; background-size: cover; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; } .news-show .article-label a { display: inline-block; line-height: 24px; } .news-show .article-label .lable { background: #f8f7fa; border-radius: 4px; padding: 0 8px; margin: 0 8px; color: #0e3080; } .news-show .article-label a:hover.lable { background: #0e3080; color: #ffffff; } .news-show .share span { display: inline-block; line-height: 52px; margin-right: 16px; } .news-show .share .share-icon { width: 40px; height: 40px; padding: 0; } .news-show .relevant .tit { overflow: hidden; } .news-show .relevant .tit a { color: #999999; } .news-show .relevant .item { width: 31.8%; margin: 0 8px; } .news-show .relevant .item:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.16); } .news-show .relevant .item:last-child { margin-right: none; } .news-show .relevant .item .pic { width: 100%; height: 227px; } .news-show .relevant .item .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .news-show .relevant .item .text { padding: 30px 8px; } .news-show .relevant .item .text .desc { padding: 14px 0; line-height: 1.5; } .page { max-width: 1200px; margin: 40px auto; text-align: center; } .page a { font-size: 16px; padding: 8px 16px; background: #ffffff; display: inline-block; } .page a:hover { color: #0e3080; } .page a.cur { background: #0e3080; color: #ffffff; } .ny-title { max-width: 1200px; margin: auto; text-align: center; } .ny-title h2 { display: block; font-size: 36px; line-height: 52px; text-align: center; } .ny-title p { display: block; font-size: 18px; line-height: 46px; text-align: center; } .map img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .contact { max-width: 1200px; margin: 40px auto; } .contact .left { width: 540px; } .contact .left .item { padding: 40px 0; border-bottom: 1px solid #e6e6e6; } .contact .left .item:last-child { border-bottom: none; } .contact .left .item h4 { font-size: 24px; line-height: 32px; padding-bottom: 20px; } .contact .left .item h4 img { margin-right: 8px; width: 32px; height: 32px; } .contact .left .item p { font-size: 16px; color: #333333; } .contact .right { width: 600px; } .contact .right .item h4 { padding: 40px 0 20px; font-size: 24px; line-height: 32px; padding-bottom: 20px; } .contact .right .item h4 img { margin-right: 8px; width: 32px; height: 32px; } .contact .right .item input { width: 242px; height: 50px; border: 1px solid #e6e6e6; padding: 0 24px; margin-bottom: 20px; } .contact .right .item textarea { width: 552px; height: 112px; padding: 24px; border: 1px solid #e6e6e6; margin-bottom: 40px; } .contact .right .tj-btn { background: #0e3080; color: #ffffff; font-size: 18px; font-weight: bold; width: 180px; height: 50px; line-height: 50px; } .case-con { max-width: 1200px; margin: 40px auto; } .case-con .item { position: relative; background: #ffffff; margin-right: 30px; margin-bottom: 24px; } .case-con .item:nth-child(3n) { margin-right: 0; } .case-con .item:hover .con-boxbg { opacity: 1; transition: all 0.5s; } .case-con .item .pic { width: 380px; height: 253px; } .case-con .item .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .case-con .item .text { height: 60px; line-height: 60px; text-align: center; } .case-con .item .con-boxbg { opacity: 0; width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; background: rgba(0, 0, 0, 0.64); } .case-con .item .con-box { width: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .case-con .item .con-box .desc { margin: 28px 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.5; } .case-con .item .con-box .detail { border: 1px solid #ffffff; width: 140px; height: 34px; line-height: 34px; margin: auto; } .solution-intro { max-width: 1200px; margin: 80px auto; } .solution-intro .solution-tit { text-align: center; padding-bottom: 48px; } .solution-intro .solution-con .pic { width: 800px; height: 480px; } .solution-intro .solution-con .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .solution-intro .solution-con .text { width: 400px; } .solution-intro .solution-con .principle { background: #0e3080; color: #ffffff; padding: 40px; height: 190px; } .solution-intro .solution-con .principle h4 { font-size: 20px; line-height: 32px; } .solution-intro .solution-con .principle p { font-size: 12px; letter-spacing: 3px; text-transform: Uppercase; } .solution-intro .solution-con .principle > div > p { margin-top: 16px; margin-right: 16px; float: left; width: 45%; font-size: 16px; } .solution-intro .solution-con .principle > div > p > i { width: 18px; height: 18px; line-height: 18px; border-radius: 50%; display: inline-block; background: #ffffff; color: #0e3080; text-align: center; font-style: normal; padding-left: 2px; margin-right: 6px; } .solution-intro .solution-con .introduction { background: #eae7ee; height: 210px; position: relative; } .solution-intro .solution-con .introduction p { width: 330px; line-height: 1.5; font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-indent: 32px; } .solution-benefits { background: url(../images/solution-benefitsbg.jpg) no-repeat; background-size: cover; height: 476px; text-align: center; } .solution-benefits .solution-tit { padding: 80px 0 56px; } .solution-benefits .benefits-con { max-width: 1200px; position: relative; margin: auto; } .solution-benefits .benefits-con .benefits-container { height: 306px; } .solution-benefits .benefits-con .arrow-left { top: 50%; left: -80px; } .solution-benefits .benefits-con .arrow-right { top: 50%; right: -80px; } .solution-benefits .benefits-con .item { height: 263px; width: 198px; text-align: center; padding: 43px; transition: 0.3s; } .solution-benefits .benefits-con .item .pic img { width: 64px; height: 64px; } .solution-benefits .benefits-con .item .pic .img2 { display: none; } .solution-benefits .benefits-con .item h4 { padding: 20px 0; color: #ffffff; position: relative; } .solution-benefits .benefits-con .item h4::after { content: ""; width: 18px; height: 2px; background: #ffffff; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; } .solution-benefits .benefits-con .item p { width: 214px; line-height: 1.5; color: #ffffff; padding-top: 20px; text-align: left; font-size: 16px; } .solution-benefits .benefits-con .item:hover { background: #ffffff; border-radius: 8px 8px 0 0; } .solution-benefits .benefits-con .item:hover .pic .img2 { display: inline-block; } .solution-benefits .benefits-con .item:hover .pic .img1 { display: none; } .solution-benefits .benefits-con .item:hover h4, .solution-benefits .benefits-con .item:hover p { color: #0e3080; } .solution-benefits .benefits-con .item:hover h4::after { background: #0e3080; } .solution-product { max-width: 1200px; margin: 80px auto; /*模拟对角线*/ } .solution-product .solution-tit { text-align: center; padding-bottom: 56px; } .solution-product .solution-tit p { margin-top: 16px; font-size: 18px; color: #666666; text-transform: uppercase; } .solution-product table { border-collapse: collapse; border: 1px #cccccc solid; width: 100%; margin: 0 auto; color: #555; } .solution-product th { border: 1px #cccccc solid; text-align: center; line-height: 30px; background: #ffffff; height: 80px; font-size: 18px; } .solution-product td { border: 1px #cccccc solid; text-align: center; line-height: 30px; background: #ffffff; padding: 16px; font-size: 18px; } .solution-product th { background: #f5f5f5; } .solution-product tr:nth-child(odd) td { background: #f5f5f5; } .solution-product tr td:first-child { width: 168px; } .solution-product .out { position: relative; } .solution-product .out::after { content: ""; width: 212px; height: 1px; background: #cccccc; position: absolute; top: 0px; left: -6px; transform: rotate(21deg); } .solution-product b { font-weight: normal; font-style: normal; display: block; position: absolute; top: -32px; right: 40px; } .solution-product em { font-style: normal; display: block; position: absolute; bottom: -32px; left: 40px; } .solution-process { background: url(../images/solution-processbg.jpg) no-repeat; background-size: cover; height: 633px; text-align: center; } .solution-process .solution-tit { padding: 80px 0 56px; } .solution-process .solution-tit p { margin-top: 16px; font-size: 18px; text-transform: uppercase; } .solution-process .process-con { max-width: 1200px; position: relative; margin: auto; } .solution-process .process-con .item { background: url(../images/process-itembg.png) no-repeat; background-size: cover; display: inline-block; width: 177px; height: 166px; margin-bottom: 28px; position: relative; } .solution-process .process-con .item-con { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; } .solution-process .process-con .item-con > img { height: 40px; overflow: hidden; margin-bottom: 8px; } .solution-process .process-con .item-con > p { padding-top: 8px; } .solution-process .process-con .item-con p:nth-child(2) { font-size: 18px; } .solution-message { background: #0e3080; height: 320px; text-align: center; } .solution-message .con { max-width: 1200px; margin: 0 auto; } .solution-message .con .top { padding-top: 72px; padding-bottom: 32px; } .solution-message .con .tel, .solution-message .con .text { display: inline-block; text-align: left; position: relative; color: #ffffff; } .solution-message .con .tel { padding-left: 90px; padding-right: 48px; border-right: 1px solid #ffffff; } .solution-message .con .tel::before { content: ""; background: url(../images/tel2-icon.png) no-repeat; width: 82px; height: 82px; background-size: cover; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; } .solution-message .con .tel h3 { font-size: 32px; font-weight: bold; color: #fff; } .solution-message .con .tel h2 { font-size: 48px; font-weight: bold; color: #fff; } .solution-message .con .text { padding-left: 48px; } .solution-message .con .text p { font-size: 36px; line-height: 1.2; color: #fff; } .solution-message .con .from .item { margin-left: 8px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; /*去掉下边距*/ } .solution-message .con .from .item p, .solution-message .con .from .item input { color: #ffffff; line-height: 40px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; min-height: 40px; /*去掉下边距*/ font-size: 16px; } .solution-message .con .from .item input { color: #333333; margin-left: 8px; background: #ffffff; padding: 0 12px; border-radius: 4px; } .solution-message .con .tj-btn { background: #ee7907; color: #ffffff; line-height: 40px; font-size: 18px; font-weight: bold; padding: 0 52px; border-radius: 4px; margin-left: 40px; } .solution-recommend { max-width: 1200px; margin: 80px auto; } .solution-recommend .solution-tit { text-align: center; padding-bottom: 56px; } .solution-recommend .solution-tit p { margin-top: 16px; font-size: 18px; color: #666666; text-transform: uppercase; } .solution-recommend .recommend-con { max-width: 1200px; position: relative; margin: auto; } .solution-recommend .recommend-con .recommend-container { height: 246px; } .solution-recommend .recommend-con .arrow-left { top: 50%; left: -80px; } .solution-recommend .recommend-con .arrow-right { top: 50%; right: -80px; } .solution-recommend .recommend-con .item .pic { width: 285px; height: 190px; overflow: hidden; } .solution-recommend .recommend-con .item .pic img { max-width: 100%; } .solution-recommend .recommend-con .item .text { width: 285px; padding: 16px 0; text-align: center; border-bottom: 1px solid #E5F0FF; position: relative; font-size: 16px; } .solution-recommend .recommend-con .item .text:before { content: ""; width: 100%; height: 1px; background: #19306d; position: absolute; left: 0; bottom: 0; transform-origin: 100%; -webkit-transform-origin: 100%; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: -webkit-transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform: scaleX(0); -webkit-transform: scaleX(0); visibility: hidden\9; } .solution-recommend .recommend-con .item .text p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .solution-recommend .recommend-con .item:hover .text::before { transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1); transform-origin: 0; -webkit-transform-origin: 0; visibility: visible\9; } .solution-recommend .recommend-con .item:hover .text { color: #0e3080; } .join-1 { background: #0e3080; } .join-1 .adv { padding: 82px 0; text-align: center; color: #ffffff; } .join-1 .adv > p { font-size: 30px; line-height: 46px; } .join-box { max-width: 1200px; margin: 0 auto; } .join-2 { height: 583px; background: url(../images/join-bg1.jpg) no-repeat; background-size: cover; } .join-tit { text-align: center; padding: 80px 0 45px; font-weight: bold; } .join-tit h3 { font-size: 36px; font-weight: bold; } .join-tit p { padding-top: 16px; font-size: 24px; } .join-con { position: relative; } .join-con table { width: 100%; border-collapse: separate; border-spacing: 1px 1px; color: #555; } .join-con tr { height: 60px; line-height: 60px; } .join-con th, .join-con td { text-align: center; width: 25%; background: #ffffff; padding: 8px 12px; } .join-con th { font-size: 20px; } .join-con td { font-size: 16px; line-height: 1.5; } .join-3 { padding-bottom: 80px; } .join-3 .arrow-left { top: 50%; left: -80px; } .join-3 .arrow-right { top: 50%; right: -80px; } .join-3 .join3-container { height: 460px; } .join-3 .join3-container .pk-tit { width: 100%; text-align: center; margin-bottom: 30px; } .join-3 .join3-container .pk-tit i { font-size: 36px; font-weight: bold; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .join-3 .join3-container .pk-tit p { font-size: 18px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; position: relative; } .join-3 .join3-container .pk-tit p::after { content: ""; width: 100%; height: 10px; background: #e3efff; position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; z-index: -1; } .join-3 .join3-container .item { width: 49%; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; position: relative; } .join-3 .join3-container .item .pic { width: 285px; height: 200px; overflow: hidden; } .join-3 .join3-container .item .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .join-3 .join3-container .item .icon { width: 40px; height: 40px; border-radius: 50%; position: absolute; top: 180px; left: 0; right: 0; margin: auto; text-align: center; z-index: 999; } .join-3 .join3-container .item .icon > img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .join-3 .join3-container .item .text { width: 285px; height: 133px; background: #f9f9f9; border-radius: 0 0 16px 16px; position: relative; } .join-3 .join3-container .item .text p { width: 220px; line-height: 1.5; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; display: -webkit-box; word-break: break-all; overflow: hidden; text-overflow: ellipsis; } .join-4 { background: #f9f9f9; padding-bottom: 80px; } .join-4 .item:nth-child(2n) { text-align: right; } .join-4 .item .pic { width: 600px; height: 400px; } .join-4 .item .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .join-4 .item .text { position: relative; width: 600px; height: 400px; background: #ffffff; } .join-4 .item .text-box { width: 500px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; color: #333333; line-height: 1.5; } .join-4 .item .text-box h4 { font-size: 30px; font-weight: bold; color: #0e3080; padding-bottom: 24px; } .join-4 .item .text-box p { padding: 8px 0; line-height: 40px; } .join-5 { padding-bottom: 80px; } .join-5 .arrow-left { top: 50%; left: -80px; } .join-5 .arrow-right { top: 50%; right: -80px; } .join-5 .join5-container { height: 460px; } .join-5 .join5-container .item { position: relative; display: inline-block; } .join-5 .join5-container .pic { width: 580px; height: 387px; } .join-5 .join5-container .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .join-5 .join5-container .text { font-size: 18px; color: #ffffff; position: absolute; bottom: 0; background: rgba(51, 51, 51, 0.5); width: 580px; height: 60px; line-height: 60px; text-align: center; } .join-6 { background: url(../images/join-bg2.jpg) no-repeat; background-size: cover; padding-bottom: 80px; } .join-6 .arrow-left { top: 50%; left: -80px; } .join-6 .arrow-right { top: 50%; right: -80px; } .join-6 .join6-container { height: 300px; } .join-6 .join6-container .item { position: relative; width: 33%; display: inline-block; } .join-6 .join6-container .pic { width: 380px; height: 254px; } .join-6 .join6-container .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .join-6 .join6-container .text { font-size: 18px; color: #ffffff; position: absolute; bottom: 0; background: rgba(51, 51, 51, 0.5); width: 380px; height: 60px; line-height: 60px; text-align: center; } .join-7 { font-size: 0; padding-bottom: 80px; } .join-7 .item { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; background-size: cover; width: 400px; height: 300px; position: relative; } .join-7 .item .item-box { width: 320px; color: #ffffff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; line-height: 1.5; text-align: center; } .join-7 .item h4 { font-size: 30px; font-weight: bold; } .join-7 .item p { padding-top: 16px; text-align: left; } .join-7 .item:nth-child(1) { background: url(../images/join-processbg1.jpg) no-repeat; } .join-7 .item:nth-child(2) { background: url(../images/join-processbg2.jpg) no-repeat; } .join-7 .item:nth-child(3) { background: url(../images/join-processbg3.jpg) no-repeat; } .join-7 .item:nth-child(4) { background: url(../images/join-processbg4.jpg) no-repeat; } .join-7 .item:nth-child(5) { background: url(../images/join-processbg5.jpg) no-repeat; } .join-7 .item:nth-child(6) { background: url(../images/join-processbg6.jpg) no-repeat; } .join-7 .item:nth-child(2n) .item-box { color: #0e3080; } .join-8 { background: url(../images/join-contactbg.jpg) no-repeat; height: 314px; background-size: cover; font-size: 0; } .join-8 .item { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; width: 25%; height: 314px; position: relative; } .join-8 .item .item-box { width: 100%; color: #ffffff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; line-height: 1.5; text-align: center; border-right: 1px solid rgba(230, 230, 230, 0.2); } .join-8 .item .pic { padding-bottom: 16px; overflow: hidden; width: 100px; height: 100px; margin: auto; } .join-8 .item .pic img { max-width: 100%; } .about-2 { background: url(../images/about-bg1.jpg) no-repeat; background-size: cover; width: 100%; padding-bottom: 80px; } .about-2 .title h4 { color: #ffffff; } .about-2 .title p { color: #ffffff; opacity: 0.72; } .about-2 .content { font-size: 0; } .about-2 .content .item { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; position: relative; margin-bottom: 20px; } .about-2 .content .item .text { background: #0e3080; color: #ffffff; font-size: 14px; width: 160px; height: 148px; text-align: center; position: absolute; bottom: -20px; left: 0; right: 0; margin: auto; } .about-2 .content .item .text-box { width: 144px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .about-2 .content .item .text-tit { position: relative; } .about-2 .content .item .text-tit::after { content: ""; width: 24px; height: 2px; background: #ffffff; position: absolute; left: 0; right: 0; bottom: 0; margin: auto; } .about-2 .content .item .text-tit h4 { font-size: 18px; } .about-2 .content .item .text-tit p { font-size: 12px; padding: 4px 0 8px; text-transform: uppercase; } .about-2 .content .item .con { padding-top: 8px; line-height: 1.5; } .about-2 .content .item:nth-child(2n) { margin-top: 20px; margin-bottom: 0; position: relative; } .about-2 .content .item:nth-child(2n) .text { top: -188px; bottom: 0; left: 0; right: 0; margin: auto; } .about-3 { padding-bottom: 80px; } .about-3 .text { position: relative; padding-top: 44px; height: auto; overflow: hidden; } .about-3 .text::before { content: ""; background: url(../images/aircraft-icon.png) no-repeat; background-size: cover; width: 44px; height: 38px; position: absolute; top: 0; left: 0; right: 0; margin: auto; } .about-3 .text::after { content: ""; width: 1px; height: 100%; background: #999999; position: absolute; top: 44px; left: 0; right: 0; margin: auto; z-index: 0; } .about-3 .text .item { text-align: right; position: relative; margin-right: 60%; width: 40%; } .about-3 .text .item h4 { font-size: 32px; font-weight: bold; } .about-3 .text .item p { font-size: 16px; color: #666666; padding: 8px 0; } .about-3 .text .item::before { content: ""; background: url(../images/point-icon.png) no-repeat; background-size: cover; width: 20px; height: 20px; position: absolute; top: 0; bottom: 0; right: -27%; margin: auto 0; z-index: 1; } .about-3 .text .item::after { content: "······"; width: 20px; height: 20px; position: absolute; top: 8%; bottom: 0; right: -12%; margin: auto; color: #999999; } .about-3 .text .item:nth-child(2n) { text-align: left; margin-left: 60%; } .about-3 .text .item:nth-child(2n)::before { content: ""; background: url(../images/point-icon.png) no-repeat; background-size: cover; width: 20px; height: 20px; position: absolute; top: 0; bottom: 0; right: 0; left: -150%; margin: auto; z-index: 1; } .about-3 .text .item:nth-child(2n)::after { content: "······"; width: 20px; height: 20px; position: absolute; top: 8%; bottom: 0; right: 0; left: -128%; margin: auto; color: #999999; } .about-3 .about-scrollbar::-webkit-scrollbar { width: 0; } .about-4 { padding-bottom: 80px; } .about-4 .content { position: relative; font-size: 0; } .about-4 .content .arrow-left { background: url(../images/prev.png) no-repeat left top; position: absolute; left: -64px; top: 40%; margin-top: -15px; width: 33px; height: 64px; z-index: 99; } .about-4 .content .arrow-right { background: url(../images/next.png) no-repeat left bottom; position: absolute; right: -64px; top: 40%; margin-top: -15px; width: 33px; height: 64px; z-index: 99; } .about-4 .content .item { width: 380px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin-left: 16px; } .about-4 .content .item:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.16); } .about-4 .content .pic { width: 100%; height: 580px; } .about-4 .content .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .about-4 .content .text { font-size: 16px; padding: 24px 0; height: 148px; } .about-4 .content .text h4 { font-size: 30px; padding: 0 40px; color: #0e3080; } .about-4 .content .text h4 small { font-size: 18px; } .about-4 .content .text .con { padding: 12px 40px; } .about-4 .content .text .con > p { position: relative; padding-left: 12px; line-height: 1.5; } .about-4 .content .text .con > p::before { content: ""; width: 4px; height: 4px; background: #999999; border-radius: 50%; position: absolute; top: 10px; left: 0; } .about-4 .team-container { height: 764px; padding-bottom: 40px; } .about-5 { background: url(../images/about-bg2.jpg) no-repeat; background-size: cover; padding-bottom: 80px; } .about-5 .content { text-align: center; } .about-5 .item { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: 0 4px 24px; } .about-5 .item .pic { width: 285px; height: 190px; } .about-5 .item .pic img { position: static; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .about-5 .item .text { font-size: 18px; color: #666666; padding: 12px 0; } .about-6 { padding-bottom: 80px; } .about-6 .content { text-align: center; position: relative; padding-bottom: 24px; } .about-6 .arrow-left { background: url(../images/prev.png) no-repeat left top; position: absolute; left: -64px; top: 60%; margin-top: -15px; width: 33px; height: 64px; z-index: 99; } .about-6 .arrow-right { background: url(../images/next.png) no-repeat left bottom; position: absolute; right: -64px; top: 60%; margin-top: -15px; width: 33px; height: 64px; z-index: 99; } .about-6 .item { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; margin: 0 4px 24px; } .about-6 .item .pic { width: 285px; height: 340px; display: flex; justify-content: center; align-items: center; } .about-6 .item .pic img { position: static; display: block; max-width: 100%; max-height: 100%; } .about-6 .honor-container { height: 400px; padding-bottom: 40px; } .pro-show1 { max-width: 1200px; margin: 40px auto 0; overflow: hidden; } .pro-show1 .left, .pro-show1 .right { display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .pro-show1 .view .swiper-container { width: 600px; height: 382px; } .pro-show1 .preview { width: 100%; margin-top: 10px; position: relative; } .pro-show1 .preview .swiper-container { width: 600px; height: 88px; } .pro-show1 .preview .swiper-wrapper { width: 100% !important; } .pro-show1 .preview .swiper-slide { width: 135px; height: 86px; border: 1px solid #999999; position: relative; margin-left: 16px; } .pro-show1 .preview .swiper-slide:first-child { margin: 0; } .pro-show1 .preview img { position: absolute; height: 80%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .pro-show1 .preview .active-nav { padding: 0; border: 1px solid #0e3080; } .pro-show1 .right { margin-left: 80px; width: 516px; } .pro-show1 .pro-tit .tit-lt { background: #0e3080; color: #ffffff; width: 128px; height: 172px; position: relative; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .pro-show1 .pro-tit .tit-lt .con { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .pro-show1 .pro-tit .tit-lt .con h4 { font-size: 24px; line-height: 30px; position: relative; padding-bottom: 8px; } .pro-show1 .pro-tit .tit-lt .con h4::after { content: ""; width: 24px; height: 2px; background: #ffffff; position: absolute; left: 10px; bottom: 0; } .pro-show1 .pro-tit .tit-lt .con p { padding-top: 24px; font-size: 10px; font-weight: bold; } .pro-show1 .pro-tit .tit-rt { margin-left: 40px; width: 64%; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .pro-show1 .pro-tit .tit-rt p { position: relative; padding-left: 16px; font-size: 18px; line-height: 30px; } .pro-show1 .pro-tit .tit-rt p::after { content: ""; width: 4px; height: 4px; background: #555555; border-radius: 50%; position: absolute; top: 12px; left: 0; } .pro-show1 .pro-desc { padding: 32px 0; font-size: 18px; height: 172px; } .pro-show1 .pro-desc .desc-tit { padding-bottom: 12px; } .pro-show1 .pro-desc .desc-con { text-indent: 36px; } .pro-show1 .pro-desc p { line-height: 1.5; } .pro-show1 .pro-tel { overflow: hidden; } .pro-show1 .pro-tel > div { position: relative; padding-left: 56px; color: #ee7907; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .pro-show1 .pro-tel > div::before { content: ""; background: url(../images/pro-tel.png) no-repeat; background-size: cover; width: 50px; height: 50px; position: absolute; left: 0; } .pro-show1 .pro-tel > div p { font-size: 20px; } .pro-show1 .pro-tel > div h4 { font-size: 30px; font-weight: bold; font-family: "Impact"; } .pro-show1 .pro-tel button { margin-left: 26px; font-size: 18px; color: #ffffff; padding: 16px 38px; background: #ee7907; border-radius: 4px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; } .pro-show2 { padding: 80px 0; max-width: 1200px; margin: auto; /*模拟对角线*/ } .pro-show2 .table-tit { text-align: center; font-size: 36px; color: #666666; padding-bottom: 56px; } .pro-show2 table { border-collapse: collapse; border: 1px #cccccc solid; width: 100%; margin: 0 auto; } .pro-show2 th, .pro-show2 td { border: 1px #cccccc solid; text-align: center; line-height: 30px; background: #ffffff; height: 80px; font-size: 18px; } .pro-show2 th { background: #f5f5f5; } .pro-show2 tr:nth-child(even) td { background: #f5f5f5; } .pro-show2 tr td:first-child { width: 200px; } .pro-show2 .out { position: relative; } .pro-show2 .out::after { content: ""; width: 212px; height: 1px; background: #cccccc; position: absolute; top: 0px; left: -6px; transform: rotate(21deg); } .pro-show2 b { font-weight: normal; font-style: normal; display: block; position: absolute; top: -32px; right: 40px; } .pro-show2 em { font-style: normal; display: block; position: absolute; bottom: -32px; left: 40px; } .pro-show2 .proname { font-size: 24px; } .fadeup { -webkit-animation: fadeInUp 1s 0s both; animation: fadeInUp 1s 0s both; } .fadeup strong { font-weight: 700; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 2rem, 0); transform: translate3d(0, 2rem, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 2rem, 0); transform: translate3d(0, 2rem, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .pagecover { position: fixed; top: 0; left: 100%; right: 0; bottom: 0; background: #222428; z-index: 10005; overflow: hidden; transition: transform 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; } .pagecover.show { left: 0; } .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #222428; z-index: 10005; overflow: hidden; transition: transform 0.8s ease 0.5s; -moz-transition: all 0.8s ease 0.5s; -ms-transition: all 0.8s ease 0.5s; -o-transition: all 0.8s ease 0.5s; -webkit-transition: all 0.8s ease 0.5s; opacity: 1; } .preloader.hid { opacity: 0; z-index: -1; } .scene.hid { opacity: 1; filter: alpha(opacity=0); } .scene { width: 100%; height: 100%; -webkit-perspective: 600; perspective: 600; display: flex; align-items: center; justify-content: center; transition: transform 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; } .scene svg { width: 160px; height: 160px; } /*# sourceMappingURL=./style.css.map */