﻿@charset "utf-8";
/* CSS Document */
.bannerBox { height: 600px; position: relative; }
.pagination { position: absolute; z-index: 20; left: 50%; bottom: 10px; transform: translateX(-50%); }
.swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; margin-right: 8px; cursor: pointer; }
.swiper-visible-switch { opacity: 1; width: 20px; }
.bannerBox .swiper-pagination-switch { background: #fff; opacity: .5; }
.bannerBox .btn { width: 22px; height: 42px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 99; cursor: pointer; }
.bannerBox .prev { left: 10%; background: url("../images/prev.png") no-repeat; }
.bannerBox .next { right: 10%; background: url("../images/next.png") no-repeat; }

.bannerBox .swiper-wrapper .swiper-slide { overflow: hidden !important; width: 100%; }
.bannerBox .swiper-wrapper .swiper-slide img { width: 1920px; position: relative; left: 50%; margin-left: -960px; }

@media screen and (min-width: 1920px) {
    .bannerBox .swiper-wrapper .swiper-slide img { width: 100vw; height: auto; left: 0; margin-left: 0; }
}

.honorBox .btn, .teamBox .btn, .productPanel .btn { width: 100px; height: 400px; position: absolute; top: 0; z-index: 99; cursor: pointer; }
.honorBox .prev, .teamBox .prev, .productPanel .prev { left: 0; background: url("../images/prev.png") no-repeat center center rgba(124,154,235,0.2); border-radius: 12px 0 0 12px; }
.honorBox .next, .teamBox .next, .productPanel .next { right: 11px; background: url("../images/next.png") no-repeat center center rgba(124,154,235,0.2); border-radius: 0 12px 12px 0; }

.aboutPanel .aboutText { background: url("../images/bg_indexAbout.jpg") no-repeat center center; width: 1280px; height: 209px; text-align: center; position: relative; overflow: hidden; }
.aboutPanel .aboutText p { width: 1040px; margin: 70px auto 0; color: #fff; font-size: 18px; line-height: 36px; letter-spacing: 4px }

.advPanel .list { overflow: hidden; }
.advPanel .list ul { overflow: hidden; width: 1293px; margin-left: -13px; }
.advPanel .list li { width: 310px; height: 248px; position: relative; overflow: hidden; border-radius: 12px; float: left; margin-left: 13px; }
.advPanel .list li img { width: 310px; height: 248px; border-radius: 12px; }
.advPanel .list li p { width: 310px; height: 46px; line-height: 46px; text-align: center; font-size: 18px; letter-spacing: 4px; background: rgba(255,255,255,0.8); border-radius: 0 0 12px 12px; position: absolute; left: 0; bottom: 0; z-index: 2; }

.showModelPanel .modelTitle { text-align: center; }
.showModelPanel .modelTitle .List { display: inline-block; cursor: pointer; }
.showModelPanel .modelTitle .titleName { width: 184px; }
.showModelPanel .modelTitle .List.cur .titleName i { background: #ff2929; }
.showModelPanel .tabCon { overflow: hidden; width: 1280px; }
.showModelPanel .honorBox, .showModelPanel .teamBox, .productPanel .productBox { height: 426px; width: 1290px; }
.showModelPanel .honorBox .list, .showModelPanel .teamBox .list, .productPanel .list { width: 310px; height: 400px; border-radius: 12px; position: relative; overflow: hidden; }
.showModelPanel .honorBox .list img, .showModelPanel .teamBox .list img, .productPanel .list img { width: 310px; height: 400px; }
.showModelPanel .honorBox .list p, .showModelPanel .teamBox .list p, .productPanel .list p { width: 310px; height: 56px; line-height: 56px; text-align: center; font-size: 18px; letter-spacing: 4px; color: #fff; border-radius: 0 0 12px 12px; position: absolute; left: 0; bottom: 0; z-index: 2; }

.productBox .list { background: #fff }
.productBox .list img { width: 250px; height: 200px; margin-top: 100px; margin-left: 30px; }
.productBox .list p { color: #333; }

.productPanel { background: #e7e8eb; }
.productPanel .main { overflow: hidden; }
.productPanel .projectBox { height: 400px; width: 1290px; padding-bottom: 40px; }
.productPanel .projectBox .list, .productPanel .projectBox .list img, .productPanel .projectBox .list p { width: 400px; }


.serviceList { overflow: hidden; margin: 68px 0 58px; }
.serviceList ul { width: 1284px; margin-left: -2px; }
.serviceList li { float: left; width: 190px; text-align: center; padding: 12px; }
.serviceList li .icon { width: 102px; height: 102px; display: block; margin: 0 auto 40px; background: #d4d4d4; background: linear-gradient(-180deg, #f8f8f8 0%, #d3d3d3 98%); border-radius: 50%; box-shadow: 6px 6px 10px rgba(0,150,255,0.2); overflow: hidden; cursor: pointer; transition: all 0.5s; }
.serviceList li .icon i { display: block; width: 60px; height: 60px; margin: 21px; transition: all 0.5s; }
.serviceList li .icon i.i1 { background-position: 0 0; }
.serviceList li .icon i.i2 { background-position: -60px 0; }
.serviceList li .icon i.i3 { background-position: -120px 0; }
.serviceList li .icon i.i4 { background-position: 0 -60px; }
.serviceList li .icon i.i5 { background-position: -60px -60px; }
.serviceList li .icon i.i6 { background-position: -120px -60px; }
.serviceList li .icon:hover { margin-top: -6px; }
/* .serviceList li .icon:hover i{transform: rotate(30deg);} */
.serviceList li h2 { color: #2960ff; line-height: 40px; font-size: 18px; }
.serviceList li p { color: #454545; }


.newsPannel { background: url("../images/bg_indexNews.jpg") no-repeat center top; height: 1100px; }
.newsBox { overflow: hidden; padding-bottom: 20px; }
.newsBox .newsTitle, .icPanel .icTitle { height: 26px; line-height: 26px; margin-top: 14px; color: #2960ff; overflow: hidden; }
.newsBox .newsTitle i, .icPanel .icTitle i { background: #2960ff; display: inline-block; vertical-align: middle; padding: 4px; }
.newsBox .newsTitle .more, .icPanel .icTitle .more { float: right; color: #b3b3b3; }
.newsBox .newsTitle .more:hover,, .icPanel .icTitle .more:hover { color: #2960ff; }
.newsBox .newsTop { width: 546px; overflow: hidden; float: left; }
.newsBox .newsTop .img { width: 546px; height: 335px; margin: 26px 0 12px; }
.newsBox .newsTop h2 { height: 52px; line-height: 52px; padding: 0 110px 0 76px; width: 360px; position: relative; font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.newsBox .newsTop h2 em { width: 70px; height: 24px; line-height: 24px; text-align: center; background: #ff2323; color: #fff; font-size: 18px; position: absolute; left: 0; top: 14px; border-radius: 12px; }
.newsBox .newsTop h2 span { width: 100px; height: 24px; line-height: 24px; color: #c1c1c1; text-align: right; position: absolute; right: 0; top: 14px; }
.newsBox .newsList { float: right; width: 630px; max-height: 432px; overflow: hidden; }
.newsBox .newsList li { height: 72px; line-height: 72px; padding: 0 110px 0 0; width: 520px; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.newsBox .newsList span { width: 100px; height: 24px; line-height: 24px; color: #c1c1c1; text-align: right; position: absolute; right: 0; top: 24px; }


.icPanel .icTitle { margin: 30px 0; }
.icPanel .icList { overflow: hidden; }
.icPanel .icList ul { margin-left: -40px; width: 1320px; }
.icPanel .icList ul li { width: 410px; height: 88px; padding: 0 110px 0 100px; margin: 0 0 36px 40px; position: relative; float: left; }
.icPanel .icList ul li .icon { width: 84px; height: 88px; background: #2960ff; text-align: center; overflow: hidden; color: #fff; border-radius: 10px; position: absolute; left: 0; top: 0; }
.icPanel .icList ul li .icon i { background-position: 0 -120px; display: block; width: 40px; height: 40px; margin: 15px auto 0; }

.icPanel .icList ul li h2, .icPanel .icList ul li p { height: 36px; line-height: 36px; width: 400px; overflow: hidden; white-space: nowrap; font-size: 18px; text-overflow: ellipsis; }
.icPanel .icList ul li h2 { margin-top: 8px; font-weight: bold; color: #454545; }
.icPanel .icList ul li p { color: #454545; }
.icPanel .icList ul li span { width: 100px; height: 24px; line-height: 24px; color: #c1c1c1; text-align: right; position: absolute; right: 0; top: 6px; }
