.banner { position: relative; } .banner .swiper { width: 100%; /* height: 50vw; */ height: 840px; } .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .banner .video .video-wrap { width: 100%; height: 100%; } .cur_play::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, .15); } .banner-img{ position: absolute; width: 100%; height: 100%; z-index: 2; } .banner .video { width: 100%; height: 100%; position: relative; z-index: 1; } .banner .video.z-index{ z-index: 4; } .banner .video .close{ width: 45px; height: 45px; display: block; cursor: pointer; background: no-repeat center; position: absolute; right: 10px; top: 10px; } .banner .video video { width: 100%; height: 100%; display: block; object-fit: cover; position: absolute; } .banner .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .swiper-pagination { text-align: center; } .swiper-pagination-custom { bottom: 4.6875vw; } .swiper-pagination-customs { display: inline-block; margin: 0 10px; position: relative; cursor: pointer; } .swiper-pagination-customs::after { content: ""; display: block; width: 8px; height: 8px; background: #fff; border-radius: 100%; position: absolute; left: 6px; top: 6px; } .circle_process { position: relative; width: 20px; height: 20px; } .circle_process .wrapper { width: 10px; height: 20px; position: absolute; top: 0; overflow: hidden; } .circle_process .right { right: 0; } .circle_process .left { left: 0; } .circle_process .circle { width: 16px; height: 16px; border: 2px solid transparent; border-radius: 50%; position: absolute; top: 0; transform: rotate(-135deg); box-sizing: content-box } .swiper-pagination-customs-active .circle_process .rightcircle { border-top: 2px solid rgba(255, 255, 255, .2); border-right: 2px solid rgba(255, 255, 255, .2); border-left: 2px solid #fff; border-bottom: 2px solid #fff; right: 0; animation: circle_right 4s linear; } .swiper-pagination-customs-active .circle_process .leftcircle { border-bottom: 2px solid rgba(255, 255, 255, .2); border-left: 2px solid rgba(255, 255, 255, .2); border-top: 2px solid #fff; border-right: 2px solid #fff; left: 0; animation: circle_left 4s linear; } @keyframes circle_right { 0% { -webkit-transform: rotate(-135deg); } 50%, 100% { -webkit-transform: rotate(45deg); } } @keyframes circle_left { 0%, 50% { -webkit-transform: rotate(-135deg); } 100% { -webkit-transform: rotate(45deg); } } .swiper .container { position: absolute; color: #fff; text-align: left; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); transition: all .5s ease; ; z-index: 9; } .swiper .container .banner-txt { width: 46vw; max-width: 824px; } .video-txt p { margin-top: 15px; } .video-txt .video-play h2, .video-txt .video-play p { display: none; } .video-txt .video-play .btn-play{ display: none; } .swiper .container .banner-txt h2 { font-size: 44px; margin-bottom: 28px; font-size: calc(14px 1.5625vw); } .swiper .container .banner-txt p { line-height: 1.88; /* font-size: var(--size-18); */ font-size: 14px; color: rgba(255, 255, 255, .8); } .swiper .container .banner-txt .btn-more { margin-top: 2.5vw; margin-bottom: 3.72vw; line-height: calc(14px 2.6vw); } .swiper .container .banner-txt .btn-more::after { background: #fff; } .swiper .container .banner-txt .btn-more:hover::after { width: 100%; } .swiper .num-wrap dl { display: inline-block; color: #fff; margin-right: 60px; } .swiper .num-wrap dt { font-size: var(--size-18); } .swiper .num-wrap dd { font-size: calc(14px 3.4375vw); font-weight: bold; line-height: 1; margin-top: 12px; } .swiper .num-wrap dd i{ font-size: var(--size-36); } /* 解决方案 */ .section-solution-warp { /* padding-top: 6.1vw; padding-bottom: 1.33rem; */ padding-top: var(--size-60); padding-bottom: var(--size-60); } .swiper-solution-thumbs a, .swiper-case-thumbs a { font-size: calc(14px .41vw); padding-bottom: var(--size-18); } .swiper-case-thumbs, .swiper-solution-thumbs { /* border-bottom: 2px solid #e6e8eb; */ margin-bottom: 2.29vw; } .swiper-solution-thumbs::after, .swiper-case-thumbs::after{ content: ""; display: block; width: 100%; height: 2px; background-color: #e6e8eb; } .swiper-case-thumbs .swiper-slide, .swiper-solution-thumbs .swiper-slide { cursor: pointer; } .swiper-slide-thumb-active a { font-weight: 600; position: relative; } .swiper-slide-thumb-active a::after { content: ""; width: 100%; position: absolute; bottom: -2px; left: 0; height: 4px; background: #3f8ae1; } .swiper-pagination-bullet { width: calc(14px 2.03vw); height: 2px; background: #e8e8e8; border-radius: 0; opacity: 1; } .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #3f8ae1; } .solution-item { display: flex; /* align-items: center; */ align-items: stretch; background: #3f8ae1; color: #fff; /* box-shadow: 0 10px 20px red; */ box-shadow: 0 10px 20px rgba(13, 81, 197, .2); } .solution-item .img-con{ overflow: hidden; } .solution-item .img-con img{ height: 100%; max-width: initial; } @media (max-width: 992px) { .solution-item .img-con img{ height: auto; width: 100%; } } .solution-item .img-con, .solution-item .txt-con { width: 50%; } /* .solution-item .img-con{ position: absolute; left: 0; top: 0; } */ .solution-item .txt-con { padding: 2vw 5.2vw 2vw 2.8vw; height: 15rem; } /* .section-solution-warp .swiper-slide:nth-child(1) .txt-con{ padding-left: 1vw; padding-right: 1vw; } */ .solution-item .txt-con h2 { font-size: var(--size-36); margin-bottom: 1.04vw; } .solution-item .txt-con p { font-size: var(--size-16); line-height: 1.8; } .solution-item .ul_list { display: flex; flex-wrap: wrap; margin-top: 1.5625vw; margin-bottom: 2.55vw; } .solution-item .ul_list li { background: #3480d8; border: 1px solid rgba(186, 212, 255, 0.3); border-radius: 6px; font-size: var(--size-16); padding: 10px 15px; margin-right: .625vw; margin-top: .625vw; } .solution-item .ul_list li:last-child { margin-right: 0; } .solution-item .ul_list li img { margin-right: 9px; } .swiper-solution .swiper-pagination { position: static; margin-top: calc(14px 1.45vw); } .solution-item .btn-more { color: #0d51c5; } .section-solution-warp .swiper-solution-thumbs .swiper-wrapper{ justify-content: space-between; } /* 核心技术 */ .section-tech{ background-color: #f3f4f8; /* padding-bottom: 1.875vw; */ /* padding-bottom: 40px; */ padding-bottom: calc(14px 1.35vw); padding-top: var(--size-60); } .section-tech .com-title{ margin-bottom: calc(14px 2.08vw); } .section-tech .tech-top{ display: flex; justify-content: space-around; } .section-tech .tech-top .item { text-align: center; width: 20%; } .section-tech .tech-top .item .img img{ width: 180px; } .section-tech .tech-top .item h3{ display: inline-block; padding-left: 21px; color: #000; font-weight: 500; font-size: 22px; font-size: calc(14px .41vw); /* margin-top: 1.5625vw; */ /* margin-bottom: 1.5625vw; */ /* margin-top: 17px; */ margin-top: calc(6px .57vw); margin-bottom: calc(6px .36vw); background: no-repeat left center; } .section-tech .tech-top .item p{ text-align: left; font-size: var(--size-16); color: #666; line-height: 1.6; } .section-tech .tech-bottom{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-left: -.52vw; margin-right: -.52vw; margin-top: 22px; } .section-tech .tech-bottom .item{ display: flex; align-items: center; background-color: #fff; margin-bottom: 1.04vw; font-size: var(--size-18); color: #010101; padding: 25px; border-radius: 20px 0px 0px 0px; /* margin-left: 10px; */ margin-left: .52vw; margin-right: .52vw; width: calc(33.33% - 1.04vw); } .section-tech .tech-bottom .item .img{ width: 83px; height: 83px; background-color: rgba(23, 100, 231, .1); display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-right: 22px; position: relative; } .section-tech .tech-bottom .item .img span{ position: absolute; top: -15px; left: 50%; margin-left: -10px; padding: 4px 10px; font-size: calc(14px .312vw); color: #fff; background-color: #3f8ae1; display: block; border-radius: 20px; border: 2px solid #ffffff; } .section-tech .tech-bottom .item .txt p{ margin-top: 6px; font-size: 14px; } .section-tech .tech-bottom .item .txt{ width: calc(100% - 83px); } /* 客户案例 */ .section-case{ padding-bottom: var(--size-60); padding-top: var(--size-60); } .section-case .case-item{ display: flex; align-items: flex-start; } .section-case .case-item h2{ font-size: var(--size-24); margin-bottom: 1.14vw; margin-top: .625vw; } .section-case .case-item .txt-con, .section-case .case-item .img-con{ width: 50%; } .section-case .case-item .txt-con{ padding-right: 5.6vw; padding-left: calc(14px .32vw); } .section-case .case-item .txt-con p{ font-size: var(--size-16); color: #666; line-height: 1.6; margin-bottom: 1.5625vw; } .section-case .btn-more{ margin-top: 1.19vw; padding-left: 32px; padding-right: 32px; } .swiper-case-thumbs .swiper-slide a{ padding-left: 1.3vw; padding-right: 1.3vw; } /* 新闻报道 */ .news-section{ padding-bottom: var(--size-40); padding-top: var(--size-60); } .news-section .com-title{ margin-bottom: 1.979vw; } .news-section .col-md4 { width: 33.33%; float: left; } .news-section a { display: block; border: 1px solid #e5e5e5; color: #333; } .news-section .col-space30>* { padding: 1.09vw; } .news-section .row { margin-left: -1.09vw; margin-right: -1.09vw; } .news-section a img { width: 100%; transition: all .35s ease; } .news-section a .txt { /* padding: .66rem; */ padding: 25px 30px 40px 30px; } .news-section a h2 { font-size: 22px; height: 68px; line-height: 34px; overflow: hidden; margin-top: 1.04vw; } @media (max-width: 1600px) { .news-section a h2 { font-size: 18px; line-height: 28px; height: 56px; } .news-section a .txt { padding: .4rem; } } @media (max-width: 480px) { .news-section a h2 { line-height: 26px; height: 52px; } } .news-section a ul{ display: flex; align-items: center; justify-content: space-between; } .news-section a li { font-size: 14px; color: #666; text-align: center; display: inline-block; margin-right: 10px; line-height: 1; } .news-section a li:first-child{ background: #3f8ae1; width: 80px; font-size: 12px; line-height: 24px; color: #fff; } .news-section a:hover { color: #082da5; } .news-section a .img-con { overflow: hidden; /* height: 15.62vw; */ position: relative; height: 0; padding-top: 61%; } .news-section a .img-con img{ height: 100%; position: absolute; left: 0; bottom: 0; } .news-section a:hover img { transform: scale(1.1); } .section-case, .solution-section, .news-section { overflow: hidden; } @media (max-width: 768px) { .r-section .r-txt { padding: 0 .5rem; } } /* 合作伙伴 */ .section-partner-wrap{ background: #f3f4f8; padding-top: var(--size-60); padding-bottom: 2.6vw;; } .section-partner-wrap .com-title{ margin-bottom: 2.6vw } .section-partner-wrap ul { width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-start; } .section-partner-wrap li{ width: calc(20% - 1.04vw); height: calc(100px 2.5vw); background-color: #fff; display: flex; align-items: center; justify-content: center; margin: .52vw; box-shadow: 0 0 8px rgba(209, 209, 209, .35); } .section-partner-wrap li img{ max-width: 90%; } .section-partner-con{ position: relative; } .swiper-button-next, .swiper-button-prev{ box-shadow: 0px 0px 57px 0px rgb(0 0 0 / 10%); background-color: #fff; z-index: 9; width: 56px; height: 56px; border-radius: 50%; } .swiper-button-next{ right: 3.25vw; background: no-repeat center ; } .swiper-button-next:hover{ background: no-repeat center #0e62ec; } .swiper-button-prev{ left: 3.25vw; background: no-repeat center ; } .swiper-button-prev:hover{ background: no-repeat center #0e62ec; } .swiper-button-next::after, .swiper-button-prev::after{ display: none; } .section-partner-wrap .swiper-pagination{ position: static; margin-top: 2vw; display: none; } /* media */ @media (max-width: 1700px) { .solution-item .txt-con{ padding-right: 2.5vw; padding-left: 2.5vw; height: 15rem; } } @media (max-width: 1600px) { .section-tech .tech-top .item{ width: 22%; } } @media (max-width: 1440px) { .section-tech .tech-top .item .img img{ width: 150px; } .section-tech .tech-top .item{ width: 26%; } .section-case .case-item .txt-con{ padding-right: 3vw; } } @media (max-width: 1300px) { .swiper-button-prev{ left: 4px; } .swiper-button-next{ right: 4px; } } @media (max-width: 1200px) { .section-partner-wrap li{ width: calc(25% - 1.04vw); } .section-tech .tech-bottom .item .img{ width: 70px; height: 70px; } .section-tech .tech-bottom .item .img img{ transform: scale(.8); } } @media (max-width: 1024px) { .banner .swiper{ height: 70vh; } .section-partner-wrap li{ width: calc(33.33% - 1.04vw); } .section-tech .tech-top .item .img img{ max-width: 80%; } .swiper .container .banner-txt p { /* max-height: 56px; */ overflow: hidden; line-height: 1.6; } .news-section a h2 { font-size: 16px; line-height: 26px; } .section-case .case-item .txt-con{ padding-right: 2vw; } .section-case .swiper .swiper-slide{ justify-content: flex-start; } .section-tech .tech-bottom .item{ width: calc(50% - 1.04vw); } } @media (max-width: 992px) { .swiper .container .banner-txt { width: 100%; max-width: inherit; } .section-case .case-item, .solution-item{ display: block; } .section-case .case-item .txt-con, .section-case .case-item .img-con, .solution-item .img-con, .solution-item .txt-con{ width: 100%; } .section-case .case-item .txt-con{ padding-bottom: 1rem; } .solution-item .txt-con{ padding-top: 1rem; padding-bottom: 1rem; height: 11rem; } } @media (max-width: 768px) { .banner .swiper { height: 50vh; } .section-tech .tech-top .item{ width: 29%; } .section-partner-wrap li img{ max-width: 70%; } } @media (max-width: 540px) { .section-tech .tech-bottom, .section-tech .tech-top{ display: block; } .section-tech .tech-bottom .item{ width: 100%; margin-left: 0; margin-top: 8px; } .section-tech .tech-top .item{ width: 80%; margin: 5px auto; } .news-section .col-md4{ width: 100%; /* margin-top: 10px; */ } .news-section .col-md4:first-child{ margin-top: 0; } .section-partner-wrap li{ width: calc(50% - 1.04vw); } .section-tech .tech-top .item .img img{ width: 120px; } .section-partner-wrap .swiper-pagination{ display: block; } .section-partner-wrap .swiper-button-next, .section-partner-wrap .swiper-button-prev{ display: none; } .swiper .container .banner-txt h2{ margin-bottom: 10px; } } @media (max-width: 480px) { .banner .video .close{ background-size: 35px 35px; } .swiper-slide-thumb-active a::after{ height: 2px; } .circle_process, .swiper-pagination-customs::after{ transform: scale(.8); } .swiper .num-wrap dd{ margin-top: 8px; } .swiper-pagination-custom{ bottom: 10px; } .swiper .container .banner-txt br{ display: none; } /* .swiper .container .banner-txt .num-wrap{ margin-top: .5rem; } */ .video-txt p{ margin-top: 10px; } .swiper-solution-thumbs a, .swiper-case-thumbs a{ padding-bottom: 8px; } .solution-item .txt-con{ padding-top: .6rem; padding-bottom: .6rem; height: 22rem; } }