@charset "utf-8"; /* pxtovw 750:设计稿宽度 $px:元素在设计稿上的宽度 */ /** 首页页面 */ .home-page { width: 100%; overflow: hidden; /***********轮播banner应用展示*************/ /***********行业动态展示*************/ /***********不同行业/应用场景标签展示*************/ /***********行业定制化解决方案展示*************/ /** 移动端 */ /***********热门标签应用展示*************/ /***********企业宣传视频展示*************/ /***********合作伙伴展示*************/ } .home-page .banner-box { width: 100%; max-height: 700px; height: auto; position: relative; overflow: hidden; z-index: 1; } .home-page .banner-box .swiper-btn { width: 50px !important; height: 80px !important; background: rgba(0, 0, 0, 0.3); text-align: center; line-height: 80px !important; color: #fff !important; cursor: pointer; position: absolute !important; z-index: 1000; transition: opacity 0.3s ease; opacity: 0; } .home-page .banner-box .swiper-btn:after { font-family: swiper-icons; font-size: 12px; text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .home-page .banner-box .swiper-button-prev { left: 0; } .home-page .banner-box .swiper-button-next { right: 0; } .home-page .banner-box .swiper-btn-hover { opacity: 1 !important; } .home-page .industry-dynamic-box { width: 100%; height: 169px; min-height: 100px; position: relative; background: center center no-repeat; background-size: 1920px; margin-top: 40px; } .home-page .industry-dynamic-box .content-middle { width: 1200px; margin: 0 auto; padding-top: 30px; position: relative; } .home-page .industry-dynamic-box .content-middle .title { font-size: 18px; font-weight: 600; color: #0149bf; line-height: 25px; margin-bottom: 20px; } .home-page .industry-dynamic-box .content-middle .industry-dynamic-content { width: 500px; height: 27px; position: relative; left: 0; } .home-page .industry-dynamic-box .indicators { position: relative; display: flex; } .home-page .industry-dynamic-box .indicators .indicator-item { width: 105px; margin-top: 30px; height: 3px; background: #fff; transition: background 0.4s; } .home-page .industry-dynamic-box .indicators .indicator-active { background: #0e3092; } .home-page .industry-dynamic-box .swiper-btn { position: absolute; top: 10%; transform: translatey(-5%); -webkit-transform: translatey(-5%); -moz-transform: translatey(-5%); -ms-transform: translatey(-5%); -o-transform: translatey(-5%); } .home-page .industry-dynamic-box .swiper-navigation { width: 120px; position: absolute; right: 70px; top: 60px; } .home-page .industry-dynamic-box .swiper-btn { width: 40px; height: 40px; line-height: 35px; display: inline-block; cursor: pointer; color: #717171; background: #fff; text-align: center; border-radius: 8px; transition: all 0.4s; } .home-page .industry-dynamic-box .swiper-btn:after { font-family: swiper-icons; font-size: 12px; text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .home-page .industry-dynamic-box .swiper-button-next { background: #0149bf; color: #fff; } .home-page .scene-labels { width: 100%; background: no-repeat; background-position: right top 160px; background-size: 1700px 620px; /**** 标题 ****/ /**** 列表 ****/ /**** 更多 ****/ } .home-page .scene-labels .middle-content { max-width: 1200px; margin: 0 auto; min-height: 620px; padding: 40px 0; box-sizing: border-box; position: relative; } .home-page .scene-labels .title { margin-bottom: 20px; position: relative; } .home-page .scene-labels .title .main-title { color: #000000; font-weight: 600; } .home-page .scene-labels .title .sub-title { font-weight: 400; color: #717171; } .home-page .scene-labels .title .more { display: none; position: absolute; right: 0; top: 0; font-size: 14px; height: 40px; line-height: 40px; color: #717171; margin-right: 0; } .home-page .scene-labels .industry-list { min-height: 350px; margin-left: 0; margin-right: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; } .home-page .scene-labels .industry-list .industry-item { width: 276px; height: 292px; margin-right: 30px; margin-bottom: 22px; position: relative; cursor: pointer; } .home-page .scene-labels .industry-list .industry-item:nth-child(4n) { margin-right: 0; } .home-page .scene-labels .industry-list .industry-item:hover .item-img { transform: scale(1.1); transform-origin: right; } .home-page .scene-labels .industry-list .industry-item .item-content { width: 292px; height: 206px; padding: 30px 24px; box-sizing: border-box; background: #0149bf; } .home-page .scene-labels .industry-list .industry-item .item-content .item-title { height: 22px; font-size: 16px; font-weight: 500; color: #ffffff; line-height: 22px; margin-bottom: 9px; max-width: 100%; } .home-page .scene-labels .industry-list .industry-item .item-content .item-desc { height: 14px; font-size: 10px; font-weight: 400; color: rgba(255, 255, 255, 0.8); line-height: 14px; max-width: 100%; margin-bottom: 44px; } .home-page .scene-labels .industry-list .industry-item .item-img { width: 196px; height: 220px; position: absolute; top: 80px; right: -16px; transition: all 0.4s; } .home-page .scene-labels .industry-list .industry-item .click-view { width: 21px; height: 21px; margin-top: 9px; } .home-page .scene-labels .check-more { width: 54px; height: 35px; position: absolute; bottom: 20px; right: 0; text-align: center; cursor: pointer; } .home-page .scene-labels .check-more .text { display: inline-block; margin-bottom: 6px; font-weight: 700; } .home-page .scene-labels .check-more img { width: 54px; height: 8px; } .home-page .custom-solution-mobile { display: none; } .home-page .custom-solution { margin-top: 60px; padding-top: 40px; min-height: 766px; background: center center no-repeat; background-size: 1920px 914px; /**** 列表 ****/ } .home-page .custom-solution .middle-content { width: 1200px; margin: 0 auto; /**** 标题 ****/ } .home-page .custom-solution .middle-content .main-title { color: #ffffff; font-weight: 600; } .home-page .custom-solution .middle-content .sub-title { color: #ffffff; } .home-page .custom-solution .solutions { display: flex; margin: 52px auto 0; flex-wrap: wrap; } .home-page .custom-solution .solutions .solution-item { width: 344px; height: 298px; position: relative; margin-right: 74px; margin-bottom: 71px; } .home-page .custom-solution .solutions .solution-item:nth-child(1), .home-page .custom-solution .solutions .solution-item:nth-child(4) { margin-left: 20px; } .home-page .custom-solution .solutions .solution-item:nth-child(3n 3) { margin-right: 0; } .home-page .custom-solution .solutions .solution-item .white-bg { width: 206px; height: 178px; position: absolute; top: -19px; left: -20px; } .home-page .custom-solution .solutions .solution-item .solution-content:hover .main-img img { transform: scale(1.055); } .home-page .custom-solution .solutions .solution-item .solution-content { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .home-page .custom-solution .solutions .solution-item .solution-content .main-img { width: 100%; height: 358px; overflow: hidden; } .home-page .custom-solution .solutions .solution-item .solution-content .main-img img { transition: all 0.5s ease-in-out; width: 100%; height: 230px; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom { width: 100%; height: 68px; position: absolute; background: #fff; bottom: 0; left: 0; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg { width: 274px; height: 18px; position: absolute; top: 26px; left: 20px; z-index: 10; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg2 { width: 115px; height: 18px; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg3 { width: 280px; height: 20px; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg4 { width: 251px; height: 19px; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg5 { width: 229px; height: 20px; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg6 { width: 257px; height: 20px; } .home-page .custom-solution .solutions .solution-item .solution-content .item-bottom { height: 68px; width: 100%; position: absolute; z-index: 11; box-sizing: border-box; padding: 15px 20px; } .home-page .custom-solution .solutions .solution-item .solution-content .item-bottom .text-main { height: 22px; font-size: 16px; font-weight: 600; color: #000000; line-height: 22px; } .home-page .custom-solution .solutions .solution-item .solution-content .item-bottom .text-desc { height: 14px; font-size: 10px; font-weight: 400; color: #000000; line-height: 14px; margin-top: 2px; width: 270px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .home-page .hot-videos { margin-top: 20px; background: no-repeat; background-size: 1289px 360px; background-position: right top 180px; position: relative; display: flex; flex-direction: column; /** 标题 */ /** 标题文案 */ /** 更多 */ /** 视频列表 */ /** 更多 */ } .home-page .hot-videos .title-top { max-width: 1200px; margin: 0 auto; } .home-page .hot-videos .title { width: 1200px; display: flex; justify-content: flex-start; } .home-page .hot-videos .title .top-title-box .main-title { font-weight: 600; color: #000; } .home-page .hot-videos .title .top-title-box .sub-title { color: #717171; } .home-page .hot-videos .video-more { margin-top: 20px; display: none; } .home-page .hot-videos .video-box { width: 100%; margin-top: 34px; } .home-page .hot-videos .video-box .swiper { padding-top: 20px; padding-bottom: 20px; } .home-page .hot-videos .video-box .scale-hover { transition: all 0.3s ease; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .home-page .hot-videos .video-box .scale-hover:hover { transform: scale(1.2); z-index: 100; } .home-page .hot-videos .video-box .swiper-btn { width: 50px !important; height: 80px !important; background: rgba(0, 0, 0, 0.3); text-align: center; line-height: 80px !important; color: #fff !important; font-size: 33px !important; cursor: pointer; position: absolute !important; top: 50%; z-index: 1000; margin-top: -20px; transition: opacity 0.3s ease; opacity: 0; } .home-page .hot-videos .video-box .swiper-btn:after { font-family: swiper-icons; font-size: 12px; text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .home-page .hot-videos .video-box .swiper-button-prev { left: 0; } .home-page .hot-videos .video-box .swiper-button-next { right: 0; } .home-page .hot-videos .video-box .swiper-btn-hover { opacity: 1 !important; } .home-page .hot-videos .video-box .custom-video { background: url(/uploads/image/asupport/video-bg.png) no-repeat; background-size: 100% auto; position: relative; width: 100%; height: 100%; } .home-page .hot-videos .video-box .custom-video .mask { position: absolute; /* z-index: 99; */ z-index: 1; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 80px 80px; background-position: center center; } .home-page .hot-videos .video-box .custom-video .mask .title { width: 100%; text-align: center; font-size: 18px; font-weight: 800; color: #fff; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .home-page .hot-videos .video-box .custom-video .mask .title .sub-title { font-size: 10px; font-weight: 800; color: #fff; line-height: 14px; } .home-page .hot-videos .video-box .custom-video video { width: 100%; height: 100%; } .home-page .hot-videos .hot-video-more-box { width: 1200px; min-width: 1200px; margin: 0 auto 23px; display: flex; justify-content: right; } .home-page .hot-videos .hot-video-more-box .hot-video-more { width: 54px; height: 35px; text-align: center; cursor: pointer; } .home-page .hot-videos .hot-video-more-box .hot-video-more .text { display: inline-block; margin-bottom: 6px; font-weight: 700; } .home-page .hot-videos .hot-video-more-box .hot-video-more img { width: 54px; height: 8px; } .home-page .company-video { margin-top: 60px; height: 530px; position: relative; } .home-page .company-video .middle-box { width: 1200px; margin: 0 auto; position: relative; } .home-page .company-video .gray-bg { width: 64.11%; height: 0; border-bottom: 400px solid #ededed; border-left: 120px solid transparent; position: absolute; right: 0; top: 125px; z-index: 10; } .home-page .company-video .title { margin-left: 0; } .home-page .company-video .company-info { width: 446px; height: 354px; margin-top: 77px; background: #0149bf; margin-left: 0; padding: 80px 0 0 40px; margin-bottom: 40px; } .home-page .company-video .company-info .company-name { max-width: 300px; font-size: 16px; font-weight: 500; color: #ffffff; line-height: 22px; } .home-page .company-video .company-info .company-desc { margin-top: 22px; width: 269px; font-size: 14px; font-weight: 500; color: #ffffff; line-height: 20px; } .home-page .company-video .video { width: 824px; height: 477px; position: absolute; right: 0; bottom: 0; z-index: 11; } .home-page .company-video .video video { width: 100%; height: 100%; } .home-page .company-partner .bar { width: 100%; height: 81px; background: #0149bf; } .home-page .company-partner .company-partner-content { max-width: 1200px; margin: 0 auto 55px; } .home-page .company-partner .company-partner-content .img { width: 169px; height: 55px; background: no-repeat center center; background-size: 169px 55px; } .home-page .company-partner .company-partner-content .info { width: 1200px; margin-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; } .home-page .company-partner .company-partner-content .h3 { margin-top: 34px; font-size: 20px; font-weight: 600; color: #000; } .home-page .company-partner .company-partner-content .p { font-size: 12px; font-weight: 400; color: #717171; margin-top: 2px; } .home-page .company-partner .company-partner-content .company-partner-box { width: 960px; height: 134px; } .home-page .company-partner .company-partner-content .company-partner-box .swiper { height: 134px; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-slide-box { display: flex; width: 100%; height: 100px; justify-content: center; flex-wrap: wrap; } .home-page .company-partner .company-partner-content .company-partner-box .icon-box { transition: all 0.3s; cursor: pointer; margin-right: 18px; padding-top: 0; margin-top: 10px; width: 120px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; } .home-page .company-partner .company-partner-content .company-partner-box .icon-box:hover { transform: scale(1.085); box-shadow: 8px 6px 15px 3px rgba(172, 172, 172, 0.5); } .home-page .company-partner .company-partner-content .company-partner-box .icon-box img { max-width: 100%; width: 120px; height: 52px; object-fit: contain; display: inline-block; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-btn { width: 40px; height: 40px; line-height: 35px; display: inline-block; cursor: pointer; color: #ffffff; background: rgba(41, 30, 30, 0.2); text-align: center; border-radius: 40px; transition: all 0.4s; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; transition: opacity 0.3s ease; opacity: 0; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-btn:after { font-family: swiper-icons; font-size: 12px; text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-btn-hover { opacity: 1 !important; } @media screen and (max-width: 1366px) { .home-page .hot-videos { margin-top: 20px; background: no-repeat; background-size: 1289px 340px; background-position: right top 180px; position: relative; display: flex; flex-direction: column; } .home-page .hot-videos .title-top { max-width: 1200px; margin: 0 auto; } .home-page .hot-videos .title { width: 1200px; display: flex; justify-content: flex-start; } .home-page .hot-videos .title .top-title-box .main-title { color: #000; } .home-page .hot-videos .title .top-title-box .sub-title { color: #717171; } .home-page .hot-videos .video-more { margin-top: 20px; display: none; } .home-page .hot-videos .video-box { width: 100%; margin-top: 20px; } .home-page .hot-videos .hot-video-more-box { width: 1200px; min-width: 1200px; margin: 0 auto 10px; display: flex; justify-content: flex-end; } .home-page .hot-videos .hot-video-more-box .hot-video-more { width: 54px; height: 35px; text-align: center; cursor: pointer; } .home-page .hot-videos .hot-video-more-box .hot-video-more .text { display: inline-block; margin-bottom: 6px; font-weight: 700; } .home-page .hot-videos .hot-video-more-box .hot-video-more img { width: 54px; height: 8px; } } @media screen and (max-width: 1260px) { .home-page .industry-dynamic { width: 100%; height: 169px; min-height: 100px; position: relative; background: no-repeat; background-size: 1920px; margin-top: 40px; } .home-page .industry-dynamic .content-middle { margin: 0 auto; padding-top: 30px; position: relative; } .home-page .industry-dynamic .content-middle .title { margin-left: 18%; font-size: 30px; font-weight: 500; color: #0149bf; line-height: 42px; margin-bottom: 20px; } .home-page .industry-dynamic .content-middle .indicators { margin-left: 18%; display: flex; } .home-page .industry-dynamic .content-middle .indicators .indicator-item { width: 155px; margin-top: 24px; height: 5px; background: #fff; transition: background 0.4s; } .home-page .industry-dynamic .content-middle .indicators .indicator-item.indicator-active { background: #0e3092; } .home-page .industry-dynamic .content-middle:deep(.el-carousel__container) { margin-left: 16%; width: 500px; height: 27px; } .home-page .industry-dynamic .content-middle .ctrl-btn { position: absolute; top: 36px; right: 18.9%; } .home-page .industry-dynamic .content-middle .ctrl-btn .btn { width: 40px; height: 40px; line-height: 44px; display: inline-block; cursor: pointer; color: #717171; background: #fff; text-align: center; border-radius: 8px; transition: all 0.4s; } .home-page .industry-dynamic .content-middle .ctrl-btn .next-btn { margin-left: 20px; } } @media screen and (min-width: 1130px) and (max-width: 1440px) { .home-page .custom-solution .solutions { max-width: 1380px; } .home-page .custom-solution .solutions .solution-item { margin-right: 74px; } .home-page .company-video { margin-top: 60px; height: 526px; position: relative; } .home-page .company-video .middle-box { width: 1200px; margin: 0 auto; position: relative; } .home-page .company-video .gray-bg { width: 72.11%; height: 0; border-bottom: 400px solid #ededed; border-left: 120px solid transparent; position: absolute; right: 0; top: 125px; z-index: 10; } .home-page .company-video .title { margin-left: 0; } .home-page .company-video .company-info { width: 446px; height: 354px; margin-top: 77px; background: #0149bf; margin-left: 0; padding: 80px 0 0 40px; margin-bottom: 40px; } .home-page .company-video .company-info .company-name { max-width: 300px; font-size: 16px; font-weight: 500; color: #ffffff; line-height: 22px; } .home-page .company-video .company-info .company-desc { margin-top: 22px; width: 269px; font-size: 14px; font-weight: 500; color: #ffffff; line-height: 20px; } .home-page .company-video .video { width: 824px; height: 477px; background: rgba(0, 0, 0, 0.1); position: absolute; left: 379px; bottom: 0; z-index: 11; } .home-page .company-video .video video { width: 100%; height: 100%; } } @media screen and (max-width: 750px) { .home-page { /***********轮播banner应用展示*************/ /***********行业动态展示*************/ } .home-page .el-icon { --color: inherit; height: 1em; width: 1em; line-height: 1em; display: inline-flex; justify-content: center; align-items: center; position: relative; fill: currentcolor; color: var(--color); font-size: inherit; } .home-page .banner-box { height: auto; margin-top: 5.3333333333vw; } .home-page .industry-dynamic-box { height: 23.2vw; min-height: 23.2vw; background: no-repeat; background-size: 100% 100%; margin-top: 5.3333333333vw; font-size: 2.9333333333vw; } .home-page .industry-dynamic-box .content-middle { max-width: 100vw; padding-top: 15px; margin-left: 5.3333333333vw; } .home-page .industry-dynamic-box .content-middle .title { font-size: 3.2vw; font-weight: 500; color: #0149bf; line-height: 4.2666666667vw; margin-bottom: 1.3333333333vw; } .home-page .industry-dynamic-box .content-middle .indicators .indicator-item { width: 11.3333333333vw; margin-top: 4vw; height: 0.8vw; } .home-page .industry-dynamic-box .content-middle .swiper-navigation { width: 16vw; position: absolute; right: 16.2666666667vw; top: 9.3333333333vw; } .home-page .industry-dynamic-box .content-middle .swiper-btn { width: 4.2666666667vw; height: 4.2666666667vw; border-radius: 1.0666666667vw; line-height: 4.2666666667vw; } .home-page .industry-dynamic-box .content-middle .swiper-btn:after { font-size: 1.6vw; } .home-page .click-view { width: 4.2666666667vw; height: 4.2666666667vw; } .home-page .scene-labels { padding-top: 8vw; padding-bottom: 0; box-sizing: border-box; background: none; } .home-page .scene-labels .middle-content { max-width: 100vw; margin: 0 auto; min-height: auto; padding: 0; position: relative; } .home-page .scene-labels .title { margin-left: 5.3333333333vw; margin-bottom: 5.3333333333vw; position: relativ; } .home-page .scene-labels .title .main-title { font-weight: 500; } .home-page .scene-labels .title .more { height: 5.8666666667vw; position: absolute; right: 5.3333333333vw; top: 0vw; font-size: 2.9333333333vw; display: flex; align-items: center; } .home-page .scene-labels .industry-list { min-height: auto; max-width: 100vw; margin: 0 0 0 4.5333333333vw; justify-content: flex-start; background: no-repeat; background-position: right bottom; background-size: 100% 100%; } .home-page .scene-labels .industry-list .industry-item { width: 42.1333333333vw; height: 41.3333333333vw; margin-right: 5.3333333333vw; margin-bottom: 2.9333333333vw; } .home-page .scene-labels .industry-list .industry-item:hover { transform: scale(1); } .home-page .scene-labels .industry-list .industry-item .item-content { width: 42.1333333333vw; height: 31.4666666667vw; padding: 2.9333333333vw 0 0 2.4vw; } .home-page .scene-labels .industry-list .industry-item .item-content .item-title { height: 4.2666666667vw; font-size: 2.9333333333vw; line-height: 4.2666666667vw; margin-bottom: 1.3333333333vw; } .home-page .scene-labels .industry-list .industry-item .item-content .item-desc { height: 2.1333333333vw; font-size: 1.8666666667vw; line-height: 2.1333333333vw; margin-bottom: 5.6vw; color: #fff; opacity: 0.8; } .home-page .scene-labels .industry-list .industry-item .item-img { width: 26.6666666667vw; height: 30.6666666667vw; top: 11.2vw; right: 0; } .home-page .scene-labels .check-more { display: none; } .home-page .custom-solution-mobile { display: block; position: relative; } .home-page .custom-solution-mobile .points-container { margin-top: 5.8666666667vw; display: flex; justify-content: center; align-content: center; position: absolute; width: 100%; bottom: 4vw; left: 0; z-index: 100; } .home-page .custom-solution-mobile .points-container .point { width: 2.6666666667vw; height: 1.0666666667vw; margin-right: 1.3333333333vw; background-color: #ffffff; border-radius: 0.5333333333vw; transition: width 0.3s; } .home-page .custom-solution-mobile .points-container .point.active { width: 4.8vw; background-color: #0149bf; } .home-page .custom-solution-pc { display: none; } .home-page .custom-solution { margin-top: 8vw; padding-top: 5.3333333333vw; min-height: 169.6vw; background: center top no-repeat; background-size: 100% 100%; } .home-page .custom-solution .middle-content { max-width: 100vw; width: 100vw; } .home-page .custom-solution .title { margin-left: 5.3333333333vw; } .home-page .custom-solution .title .main-title { font-weight: 500; } .home-page .custom-solution .title .sub-title { color: #fff; opacity: 0.8; } .home-page .custom-solution .solutions { display: block; margin: 10.4vw 12vw 0 16.5333333333vw; flex-wrap: wrap; } .home-page .custom-solution .solutions .solution-item { width: 71.4666666667vw; height: 59.4666666667vw; position: relative; margin-right: 0 !important; margin-left: 0; margin-bottom: 15.2vw !important; } .home-page .custom-solution .solutions .solution-item:last-child { margin-right: 0; } .home-page .custom-solution .solutions .solution-item .white-bg { width: 43.2vw; height: 37.0666666667vw; top: -5.0666666667vw; left: -4.5333333333vw; } .home-page .custom-solution .solutions .solution-item .solution-content { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .home-page .custom-solution .solutions .solution-item .solution-content .main-img { width: 100%; height: 47.7333333333vw; } .home-page .custom-solution .solutions .solution-item .solution-content .main-img img { width: 100%; height: 100%; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom { width: 100%; height: 11.7333333333vw; position: absolute; background: #fff; bottom: 0; left: 0; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg { width: 57.2vw; height: 3.7333333333vw; position: absolute; top: 4vw; left: 4vw; z-index: 10; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg2 { width: 28.9333333333vw; height: 4.6666666667vw; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg3 { width: 56vw; height: 3.7333333333vw; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg4 { width: 54.9333333333vw; height: 4vw; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg5 { width: 50.1333333333vw; height: 4vw; } .home-page .custom-solution .solutions .solution-item .solution-content .solution-bottom .bottom-bg6 { width: 53.6vw; height: 4vw; } .home-page .custom-solution .solutions .solution-item .solution-content .item-bottom { height: 11.7333333333vw; width: 100%; box-sizing: border-box; padding: 1.8666666667vw 4vw; } .home-page .custom-solution .solutions .solution-item .solution-content .item-bottom .text-main { font-size: 3.2vw; font-weight: 500; height: 4.5333333333vw; line-height: 4.5333333333vw; } .home-page .custom-solution .solutions .solution-item .solution-content .item-bottom .text-desc { font-size: 2.4vw; margin-top: 0; height: 3.4666666667vw; line-height: 3.4666666667vw; color: #717171; width: 57.3333333333vw; } .home-page .custom-solution .solutions .solution-item .solution-content .item-bottom .click-view { margin-top: 2.1333333333vw; } .home-page .hot-videos { margin-top: 2.6666666667vw; padding-bottom: 5.3333333333vw; display: flex; flex-direction: column; } .home-page .hot-videos .title { width: 53.3333333333vw; margin-left: 5.3333333333vw; } .home-page .hot-videos .title .main-title { font-size: 4.2666666667vw; line-height: 5.8666666667vw; color: #000; font-weight: 500; } .home-page .hot-videos .title .sub-title { font-size: 2.1333333333vw; line-height: 2.9333333333vw; color: #717171; margin-top: 0; } .home-page .hot-videos .title-top { max-width: 100vw; width: 100vw; display: flex; justify-content: space-between; margin: 0; } .home-page .hot-videos .video-more { font-size: 3.4666666667vw !important; margin-top: 0vw; height: 4.5333333333vw; line-height: 4.5333333333vw; margin-right: 6.6666666667vw; color: #717171; display: flex; align-items: center; } .home-page .hot-videos .video-more .text { font-size: 2.9333333333vw; line-height: 4.8vw; margin-right: 0; } .home-page .hot-videos .video-box { width: 100%; margin-top: 2.6666666667vw; background: none; background: no-repeat; background-size: 100% 100%; background-position: right top 6.6666666667vw; } .home-page .hot-videos .video-box .swiper-slide { width: 80%; } .home-page .hot-videos .hot-video-more { display: none; } .home-page .company-video { margin: 5.3333333333vw 0; height: auto; display: block; background: right top 14.1333333333vw no-repeat; background-size: 52.2666666667vw 53.0666666667vw; } .home-page .company-video .gray-bg { display: none; } .home-page .company-video .middle-box { width: 100vw; max-width: 100vw; } .home-page .company-video .middle-box .title .main-title { font-weight: 500; } .home-page .company-video .title { margin-left: 5.3333333333vw; } .home-page .company-video .company-info { min-height: auto; width: 84.2666666667vw; height: auto; margin-top: 5.3333333333vw; margin-left: 0vw; margin-bottom: 0; background: #0149bf; padding: 5.3333333333vw 5.3333333333vw 7.4666666667vw; color: #ffffff; } .home-page .company-video .company-info .company-name { height: auto; font-size: 4vw; font-weight: 500; line-height: 5.6vw; margin-bottom: 5.3333333333vw; } .home-page .company-video .company-info .company-desc { width: 100%; height: auto; font-size: 3.2vw; line-height: 4.5333333333vw; font-weight: 500; } .home-page .company-video .video { width: 89.3333333333vw; height: 53.3333333333vw; margin: 0 auto; background: center center no-repeat; background-size: 89.3333333333vw 53.3333333333vw; position: static; top: auto; left: auto; margin-top: 5.3333333333vw; transform: translatex(0); } .home-page .company-video .video video { width: 100%; height: 100%; } .home-page .company-partner .bar { width: 100%; height: 5.8666666667vw; background: #0149bf; } .home-page .company-partner .company-partner-content { margin-bottom: 5.3333333333vw; } .home-page .company-partner .company-partner-content .img { margin-top: -0.3px; margin-left: 5.3333333333vw; width: 13.3333333333vw; height: 4.5333333333vw; background: no-repeat center center; background-size: 13.3333333333vw 4.5333333333vw; } .home-page .company-partner .company-partner-content .info { width: 100%; margin-top: 5.3333333333vw; display: flex; flex-direction: column; justify-content: flex-start; } .home-page .company-partner .company-partner-content .info .left { margin-left: 5.3333333333vw; text-align: left; } .home-page .company-partner .company-partner-content .info .left .h3 { margin-top: 0vw; font-size: 4.2666666667vw; font-weight: 500; } .home-page .company-partner .company-partner-content .info .left .p { font-size: 3.2vw; font-weight: 400; margin-bottom: 4.8vw; } .home-page .company-partner .company-partner-content .info .patners { background: #0149bf; width: 100%; height: auto; padding: 8vw 10.1333333333vw 4vw; } .home-page .company-partner .company-partner-content .info .patners .pc { display: none; } .home-page .company-partner .company-partner-content .info .patners .mobile { display: block; } .home-page .company-partner .company-partner-content .info .bottom-bg { display: block; width: 100%; height: 6.9333333333vw; background: no-repeat bottom right; background-size: 91.4666666667vw 6.9333333333vw; } .home-page .company-partner .company-partner-content .company-partner-box { height: auto; width: 100%; background: #0149bf; padding: 8vw 7.4666666667vw 4vw; } .home-page .company-partner .company-partner-content .company-partner-box .swiper { height: auto; --swiper-pagination-color: #ffffff; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-pagination { bottom: 0; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-slide-box { height: auto; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-slide-mobile { display: flex; width: 100%; justify-content: flex-start; flex-wrap: wrap; margin-left: 1.0666666667vw; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-slide-mobile .icon-box:nth-child(odd) { margin-right: 5.2vw; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-slide-mobile .icon-box { width: 37.3333333333vw; height: 23.4666666667vw; margin-bottom: 5.3333333333vw; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; } .home-page .company-partner .company-partner-content .company-partner-box .swiper-slide-mobile .icon-box img { max-width: 100%; height: 40px; display: inline-block; } }