.card-box { padding-top:25px; text-align:center; } .card-box .title { font-size:30px; color:#005499; line-height:60px; position: relative; } .card-box .title:after { content:''; display:inline-block; position: absolute; bottom:0; left:50%; background:#ff9d00; width:60px; height:4px; margin-left:-30px; } .card-box > .des { padding-top:10px; width:646px; margin:auto; line-height:25px; font-size:14px; color:#4c4c4c; } .card-box .card-lump { min-width:1100px; padding:24px 0; font-size:0; letter-spacing: -3px; } .card-box .card-lump .item { position:relative; font-size:14px; letter-spacing: 0; display:inline-block; width:262px; height:362px; border:1px solid #d2d2d2; box-shadow:0 0 3px #d2d2d2; -webkit-box-shadow:0 0 3px #d2d2d2; margin:0 6px; } .card-box .card-lump .item.active, .card-box .card-lump .item:hover { border-color:#1875c9; } .card-box .card-lump .view-img { display:inline-block; width:100%; height:100%; overflow:hidden; z-index:0; } .card-box .card-lump .view-img img { width:100%; height:100%; } .card-box .card-lump .info { position:absolute; bottom:0; left:0; height:160px; width:100%; } .card-box .card-lump .info:before { position: absolute; content:''; display:inline-block; left:0; bottom:0; width:100%; height:100%; background-color:#fff; opacity: .8; } .card-box .card-lump p, .card-box .card-lump a { position:relative; z-index:1; } .card-box .card-lump .tag-name { font-size:16px; line-height:52px; color:#fa9e00; } .card-box .card-lump .des { width:196px; margin:auto; font-size:12px; line-height: 20px; } .card-box .card-lump .des a { color:#4d4d4d; } .card-box .card-lump .btns { /* text-align:cente */ margin-top:4px; } .card-box .card-lump .btn { display:inline-block; min-width:60px; height:30px; font-size:12px; color:#fff; font-family: PingFang; border-radius:0; } .card-box .card-lump .item.active .btn, .card-box .card-lump .item:hover .btn { background: #f8741b; background: linear-gradient(90deg, #fb7920, #e65c00); background: -webkit-linear-gradient(left, #fb7920, #e65c00); background: -moz-linear-gradient(left, #fb7920, #e65c00); background: -o-linear-gradient(left, #fb7920, #e65c00); } .question-bar { position: relative; width:100%; overflow:hidden; height: 583px; } .question-bar .title { display:block; height:80px; width:100%; box-shadow: 0 5px 5px #6c849a; -webkit-shadow:0 5px 5px #6c849a; background:#005499; text-align:center; color:#fff; line-height:80px; font-weight:bold; font-size:48px; } .question-bar .title span { color:#ffa305; font-size:58px; } .question-bar > img { width:1920px; position:relative; left:50%; margin-left:-960px; } .question-bar .question-des { position:absolute; top:195px; right:50%; margin-right:-462px; width:300px; } .question-bar .question-des p { line-height:32px; color:#4c4c4c; font-size:12px; } .question-bar .question-des p em { color:#ffa305; } .func-box .segment { padding-top:50px; /* padding-bottom:45px; */ text-align:center; } .func-box .segment-box { position:relative; width:906px; overflow:hidden; background:url("../../image/architecture/func-round-img.jpg") no-repeat center center; background-size:408px; margin:auto; margin-bottom:27px; } .func-box .container { width:100%; padding:0; } .func-box .container > div { overflow:hidden; margin-bottom:72px; } .func-box .container > div:first-child { margin-top:45px; } .func-box .container .margin106 { margin-bottom:106px; } .func-box .container .mb-45 { margin-bottom:45px; } .func-box .container .center { /* margin-bottom:72px; */ } .func-box .container .center { text-align:center; } .func-box .container .center .item { margin:0 52px; } .func-box .container .around .item { float:right; } .func-box .container .around .item:first-child { float:left; } .func-box .container .item { display:inline-block; text-align:left; position: relative; width:205px; padding:8px; } .func-box .container .item:before, .func-box .container .item:after { content:''; display:inline-block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; } .func-box .container .item:before { background:url("../../image/architecture/func-item-left.png") no-repeat left top; } .func-box .container .item:after { background:url("../../image/architecture/func-item-right.png") no-repeat right bottom; } .func-box .item p { position:relative; z-index:2; } .func-box .item .title { font-size:22px; color:#005499; line-height:44px; } .func-box .item .des { padding:4px 0; font-size:14px; color:#020202; line-height:24px; } .func-box .item .fixed-index { display:inline-block; width:26px; height:26px; text-align:center; line-height:26px; position: absolute; bottom:1px; right:1px; font-size:18px; font-family: PingFang; color:#fff; background:#005499; } .func-box .fixed-text { position:absolute; top:50%; left:50%; width:300px; height:300px; margin-top:-150px; margin-left:-150px; padding:64px 24px; text-align:center; } .func-box .fixed-text .title { font-size:26px; color:#000000; line-height:1.4; } .func-box .fixed-text .title .en { display:block; font-size:20px; } .func-box .fixed-text p { margin: 0 24px; padding: 10px 0; position: relative; padding-left: 88px; text-align: left; font-size: 24px; color: #000000; } .func-box .fixed-text p i { position:absolute; left:0; top:0; display:inline-block; font-size:110px; font-weight:bold; font-style:italic; line-height:1; color:#ff6100; } .func-box .fixed-text p .zh { font-size:38px; display:block; } .advantage-box .head { position:relative; width:100%; overflow:hidden; height:180px; text-align:center; font-size:0; letter-spacing: -3px; } .advantage-box .head > div { font-size:14px; letter-spacing: 0; width:50%; position:relative; z-index:2; display:inline-block; /* margin:0 33px; */ vertical-align: middle; /* overflow:hidden; */ } .advantage-box .head:before { content:''; display:block; width:1920px; height:180px; background:url("../../image/architecture/advantage-bar.jpg") no-repeat center center; background-size:100%; position:absolute; left:50%; margin-left:-960px; } .advantage-box .head .left { padding-top:24px; padding-left:40px; padding-right: 45px; text-align:right; } .advantage-box .head .right { padding-left:25px; text-align:left; /* width:auto; */ } .advantage-box .head .left .small { /* line-height:36px; */ text-align:right; font-style:italic; color:#fff; font-size:38px; line-height:1.2; } .advantage-box .head .left .title { font-size:40px; color:#fff; font-weight:bold; /* line-height:1; */ } .advantage-box .head .left .des { font-size:40px; color:#3e80b6; font-style:italic; } .advantage-box .head .right .title { /* display:inline-block; */ font-weight:bold; font-size:60px; float: left; color:#fff; margin-right:10px; } .advantage-box .head .right > div { display:inline-block; color:#fff; } .advantage-box .head .right .des { font-size:18px; } .advantage-box .head .right .small { font-size:24px; } .advantage-box .content { /* width:100%; */ } .advantage-box .item { overflow: hidden; min-height: 350px; padding-top:62px; position:relative; } .advantage-box .item:before { position:absolute; top:0; left:0; height:26px; width:100%; display:inline-block; content:''; background:url("../../image/architecture/advantage-left.jpg") no-repeat center center; background-size:100%; } .advantage-box .item:first-child:before { content:none; } .advantage-box .item.r:before { background:url("../../image/architecture/advantage-right.jpg") no-repeat center center; background-size:100%; } .advantage-box .item .view-img { width:480px; height:270px; overflow:hidden; float:right; } .advantage-box .item.r .view-img { float:left; } .advantage-box .item .view-img img { width:100%; height:100%; } .advantage-box .item .info { display:inline-block; padding-left:110px; width:550px; } .advantage-box .item .info .title { position: relative; height:78px; line-height:78px; color:#004f8f; font-size:30px; padding-left:10px; font-weight:bold; } .advantage-box .item .info .fixed-index { display:inline-block; position: absolute; left:-86px; width:86px; height:78px; top:0; background:url("../../image/architecture/advantage-icon-lump.png") no-repeat center center; background-size:86px; padding-left:25px; font-size:38px; color:#fff; font-weight:bold; } .advantage-box .item .info p { line-height:32px; font-size:16px; color:#4c4c4c; position: relative; padding-left:20px; } .advantage-box .item .info p:before { content:''; display:inline-block; width:10px; height:10px; position: absolute; top:50%; margin-top:-5px; left:0; border:1px solid #004f8f; border-radius:5px; } .case-box { padding-top:48px; padding-bottom:62px; position:relative; border-top:6px solid #195d95; background:url("../../image/architecture/case-back.jpg") repeat; } .case-box:before { display:inline-block; width:56px; height:56px; position:absolute; top:-31px; left:50%; margin-left:-28px; content:''; background:url("../../image/architecture/case-icon-arrow.png") no-repeat center center; background-size:56px; } .case-box .title { text-align:center; font-size:40px; color:#010101; font-weight:bold; margin-bottom:25px; } .case-box .title em { font-size:48px; color:#ffa200; } .case-box .title .des { display:block; font-size:26px; margin-top:5px; color:#333333; font-weight:normal; } .case-box .title .des i { display:inline-block; position:relative; } .case-box .title .des i:after, .case-box .title .des i:before { content:''; display:inline-block; width:32px; height:3px; position:absolute; top:50%; margin-top:-1.5px; left:-42px; background:#004f8f; } .case-box .title .des i:after { left:auto; right:-42px; } .case-box .show-lump { /* width:; */ height:600px; background-color:#fff; } .case-box .menu { display:inline-block; width:220px; } .case-box .menu > a { display:inline-block; width:100%; height:120px; border:1px solid #bfbfbf; border-top:0; line-height:118px; /* text-align:center; */ padding-left:40px; font-size:16px; color:#333; position:relative; background:#fff; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; vertical-align: top; } .case-box .menu > a.active { background:#004f8f; color:#fff; } .case-box .menu > a:before { position:absolute; top:0; left:0; width:40px; height:100%; content:''; display:inline-block; background:url("../../image/architecture/case-icon.jpg") no-repeat center center; background-size:22px; } .case-box .menu > a.active:before { background:url("../../image/architecture/case-icon-active.jpg") no-repeat center center; } .case-box .menu > a:first-child { border-top:1px solid #bfbfbf; } .case-box .cont { width:818px; float:right; height:600px; } .case-box .cont .view-img { width:100%; height:100%; overflow:hidden; padding:17px 0; padding-right:25px; display:none; } .case-box .cont .view-img.active { display:block; } .case-box .cont .view-img img { width:100%; height:100%; } .spirit-box { padding:36px; } .spirit-box .title { height:108px; line-height:108px; color:#808080; font-size:30px; text-align:center; } .spirit-box .title span { color:#005499; } .spirit-box .title em { color:#ffa200; } .spirit-box .spirit-text { padding-left:366px; background:url("../../image/architecture/spirit-img.jpg") no-repeat center left; min-height:420px; } .spirit-box .spirit-text .inner { position:relative; line-height:22px; color:#1a1a1a; font-size:16px; margin-bottom:36px; } .spirit-box .spirit-text .inner:before { content:''; display:inline-block; width:75px; height:70px; position:absolute; top:50%; left:-108px; margin-top:-35px; } .spirit-box .spirit-text .inner.z:before { background:url("../../image/architecture/spirit-icon-z.png") no-repeat center center; background-size:75px; } .spirit-box .spirit-text .inner.c:before { background:url("../../image/architecture/spirit-icon-c.png") no-repeat center center; background-size:75px; } .spirit-box .spirit-text .inner.j:before { background:url("../../image/architecture/spirit-icon-j.png") no-repeat center center; background-size:75px; } .spirit-box .spirit-text .inner.w:before { background:url("../../image/architecture/spirit-icon-w.png") no-repeat center center; background-size:75px; } .spirit-box .spirit-text .inner:first-child, .spirit-box .spirit-text .inner:last-child { margin-left:-75px; } .spirit-box .spirit-text span { font-size:18px; margin-bottom:19px; display:block; font-weight: bolder; } .contact-box { overflow:hidden; padding-bottom:68px; } .contact-box .wrap > div > .head { border-bottom:2px solid #c9c9c9; height:42px; /* overflow:hidden; */ line-height:40px; margin-bottom:22px; } .contact-box .wrap > div > .head .title { font-size:18px; color:#999999; display:inline-block; position:relative; } .contact-box .wrap > div > .head .title > span { color:#004f8f; } .contact-box .wrap > div > .head .title:after { position:absolute; bottom:-2px; left:0; content:''; display:inline-block; width:100%; height:0; border-bottom:3px solid #004f8f; } .contact-box .wrap > div > .head .more { font-size:12px; color:#999; float:right; } .contact-box .form-lump { display:inline-block; width:700px; } .form-lump .cont > form { overflow:hidden; } .form-lump .cont .view-img { display:inline-block; position:relative; width:400px; height:236px; overflow:hidden; } .form-lump .cont .view-img img { width:100%; height:100%; } .form-lump .cont .view-img .inner { position:absolute; top:56px; left:0; width:100%; text-align:center; } .form-lump .cont .view-img .inner .btn { line-height:56px; border:2px solid #fff; font-size:22px; color:#fff; padding:0 40px; min-width:170px; } .form-lump .cont .view-img .inner .des { line-height:56px; color:#fff; font-size:22px; } .form-lump .grid { width:248px; float:right; } .form-lump .grid .input-c { width:100%; height:45px; line-height:45px; margin-top:19px; background:#f2f2f2; font-size:16px; color:#4c4c4c; margin-bottom:0; } .form-lump .grid .input-c .label { font-size:14px; font-weight:normal; color:#4c4c4c; } .form-lump .grid .input-c input { background:none; width:190px; height:100%; float: right; } .form-lump .grid .input-c #code { width:80px; } .form-lump .grid .input-c .code-img { background:#fff; padding-left:20px; float:right; width:100px; height:45px; /* margin-left:10px; */ } .form-lump .grid .input-c .code-img img { width:100%; height:100%; } .form-lump .grid .input-c:first-child { margin-top:0; } .form-lump .grid .btns { overflow:hidden; background:none; } .form-lump .grid .btns input { width:auto; min-width:62px; padding:0 24px; font-size:16px; color:#fff; text-align:center; } .form-lump .grid .btns .submit { background:#004f8f; } .form-lump .grid .btns .reset { background:#999; } .form-lump .grid .btns input:first-child { float:left; } .contact-box .aptitude-lump { float:right; width:330px; } .aptitude-lump .aptitude-swiper { position:relative; width: 100%; height: 222px; overflow: hidden; } .aptitude-lump .bd, .aptitude-lump .swiper-wrapper .swiper-slide { position: relative; width: 100%; height: 100%; } .aptitude-lump .bd ul li { position: absolute; top:0; left:0; width: 100%; height: 100%; } .aptitude-lump .aptitude-swiper .view-img { width:222px; height:185px; display:block; margin:auto; box-shadow:0 2px 5px #999; -webkit-box-shadow:0 2px 5px #999; } .aptitude-lump .aptitude-swiper .view-img img { width:100%; height:100%; } .aptitude-lump .aptitude-swiper .des { margin-top:18px; text-align:center; font-size:12px; color:#999; } .aptitude-lump .aptitude-swiper .prev, .aptitude-lump .aptitude-swiper .next { display:inline-block; position:absolute; top:50%; width:38px; height:88px; margin-top:-44px; } .aptitude-lump .aptitude-swiper .prev { left:0; background:url("../../image/architecture/aptitude-btn-left.png") no-repeat center center; background-size:100%; } .aptitude-lump .aptitude-swiper .next { right:0; background:url("../../image/architecture/aptitude-btn-right.png") no-repeat center center; background-size:100%; }