.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;
}
}