.contain { width:100%; height:100%; background:#ffffff; } /* banner */ .banner-product { margin-top:0; height:33.75rem; padding:8.75rem 0 0; background:url("../../static/img/pageimage/digital_technology/banner-bg.png") no-repeat center; background-size:100% 100%; text-align:left; } .banner-product-title { margin-top:0.875rem; color:#ffffff; font-weight:500; font-size:2.625rem; } .banner-product-txt { color:#FFFFFF; width:50rem; height:5.8125rem; font-size:0.875rem; font-weight:400; line-height:2rem; margin-top:1.25rem; } /* 鎸戞垬 */ .challange-container { padding:5rem 0 5.625rem; /* background:url('../img/pageimage/digital_technology/challenge-bg.png') left bottom no-repeat; */ background-size:100%; /* background-color:#ffffff; */ text-align:left; } .challange-container h2 { text-indent:0rem; } .challange-content { z-index:1; width:75rem; margin:0 auto; display:flex; justify-content:space-between; } .challange-p { margin-top:1.5rem; width:20.25rem; font-size:1.125rem; font-weight:400; line-height:1.9375rem; color:#090F21; } .challange-tags { margin-top:3.5625rem; display:flex; } .challange-tag:first-child { margin-left:0; } .challange-tag { color:rgba(9,15,33,0.5); padding:0.625rem 1.4375rem; margin-left:0.375rem; width:4.5rem; height:2.375rem; transition:all 0.5s; } .challange-tag-active { color:#090F21; background:rgba(255,255,255); box-shadow:0.3125rem 0.3125rem 1.25rem rgba(26,39,59,0.1); border-radius:0.375rem; transition:all 0.5s; } .challange-tag-title { color:rgba(9,15,33,0.5); font-size:0.875rem; font-weight:400; line-height:0.875rem; } .challange-tag-subtitle { font-size:1.125rem; font-weight:400; line-height:1.9375rem; } .content-right { display:flex; width:44.3125rem; height:18.6875rem; background:rgba(255,255,255); box-shadow:0.3125rem 0.3125rem 1.25rem rgba(26,39,59,0.1); border-radius:1.25rem; transition:all 0.5s; } .content-right img { width:16.25rem; height:18.6875rem; } .challenge-para { margin:0 3rem 0 1.3125rem; display:flex; flex-direction:column; justify-content:center; } .challenge-para .challange-tag-title { line-height:1.5rem; color:rgba(9,15,33,0.5); } .challenge-para .challange-tag-subtitle { margin-top:2.5rem; margin-bottom:1.125rem; line-height:1.125rem; color:#090F21; } /* 閫傚簲 */ .from-container{ background:url('../img/pageimage/digital_technology/from-bg.png') bottom right; background-size:100% 100%; background-color:#ffffff; padding:4.375rem 0 5.625rem 0; } .from-box{ width: 75rem; margin: 0 auto; margin-top: 4.25rem; display: flex; justify-content: space-between; } .from-content-left{ margin-top: 3.8125rem; width: 17.4375rem; text-align: left; } .from-content-left:first-child{ margin-top: 0; } .from-con-tit{ text-align: left; font-weight: 400; font-size: 1.125rem; color: #090F21; margin-bottom: .9375rem; } .from-con-txt{ text-align: left; font-weight: 400; font-size: .875rem; color: rgba(9,15,33,0.5); line-height: 1.5rem; } .from-img{ width: 53.125rem; height: 31.875rem; } /* 琛屽姩璺嚎 */ .action-container { background:url('../img/pageimage/digital_technology/action-bg.png') bottom right; background-size:100% 100%; background-color:#F5F7FA; padding:4.375rem 0 5.625rem 0; } .action-container .swiper-container { width:auto; overflow:initial; } .action-container .swiper-wrapper { width:75rem; margin:0 auto; } .action-container .swiper-slide { display:flex; } .action-container .swiper-slide:last-child .action-card:nth-child(2) { margin-right:0; } .action-container .swiper-slide:last-child .action-card:nth-child(1) { width:14.25rem; margin-right:6.0625rem; } .action-card { width:12.5rem; margin-right:8.125rem; text-align:left; } .action-card-line { position:absolute; top:3.3125rem; width:118.75rem; height:0.5rem; background:#FFFFFF; margin-left:-1.25rem; } .action-icon { margin:1.6875rem 0 2.9375rem 3.125rem; padding:0.5625rem; width:2.625rem; height:2.625rem; background:#ffffff; box-shadow:0rem 0.375rem 1.25rem rgba(10,44,115,0.08); border-radius:0.875rem; transition:all 0.5s; } .action-icon img { width:100%; height:100%; } .action-card-title { font-size:1.125rem; font-weight:400; line-height:1.125rem; color:#090F21; } .txt-line { margin:0.5rem 0; width:11.375rem; height:0.0625rem; background:rgba(228,234,242); } .action-card-sub { margin-top:1.8125rem; height:6.5rem; } .action-card-txt { font-size:0.875rem; font-weight:400; line-height:1.5rem; color:#090F21; } .action-card-txt>span { color:rgba(9,15,33,0.5); } /* core鏍稿績 */ .core-container { background-color:#F5F7FA; padding:4.375rem 0 5.625rem 0; overflow:hidden; } .core-p { z-index:1; font-size:0.875rem; font-weight:400; line-height:1.5rem; color:rgba(9,15,33,0.5); margin:0.875rem 0 1.5rem 0; } .core-box { z-index:1; width:56.25rem; height:23.625rem; padding:1.5625rem 2.4375rem; background:rgba(255,255,255); box-shadow:0.3125rem 0.3125rem 1.25rem rgba(26,39,59,0.1); opacity:1; border-radius:1.25rem; } .core-img { width:56.25rem; height:23.625rem; } /* 鑳藉姏浣撶郴 */ .ability-container { background-color:#ffffff; padding-bottom:5.625rem; } .tag-box { margin-top:0.875rem; display:flex; width:36.125rem; justify-content:space-between; } .tag { width:10.375rem; height:2rem; background:#F5F7FA; opacity:1; border-radius:0.625rem; } .tag span { font-size:0.875rem; font-weight:400; line-height:2rem; color:rgba(9,15,33,0.5); } .ability-container ul { margin-top:2.5rem; display:flex; } .swiper-container { width:75rem; overflow:hidden; padding-bottom:3rem; } .swiper-slide { width:auto; } .swiper-pagination-fraction,.swiper-pagination-custom,.swiper-container-horizontal>.swiper-pagination-bullets { bottom:0rem; } /* 鎶€鏈祴鑳 */ .technology-box-slide>.swiper-slide:first-child .technology-box:first-child:hover { background:url('../img/pageimage/digital_technology/HZERO-bg.png') #2169DA; background-size:100% 100%; } .technology-box-slide>.swiper-slide:first-child .technology-box:nth-child(2):hover { background:url('../img/pageimage/digital_technology/JeeStar-bg.png'),linear-gradient(180deg,#EA9954 0%,#D68341 100%); background-size:100% 100%; } .technology-box-slide>.swiper-slide:nth-child(2) .technology-box:first-child:hover { background:url('../img/pageimage/digital_technology/WittyFlow-bg.png'),linear-gradient(180deg,#70CFF2 0%,#2CC3DE 100%); background-size:100% 100%; } .technology-box-slide>.swiper-slide:nth-child(2) .technology-box:nth-child(2):hover { background:url('../img/pageimage/digital_technology/OneKeeper-bg.png') #1C3ADB; /* opacity:0.77; */ background-size:100% 100%; } .technology-box-slide>.swiper-slide:nth-child(3) .technology-box:first-child:hover { background:url('../img/pageimage/digital_technology/Hippius-bg.png'),linear-gradient(180deg,#69B9FF 0%,#0087FF 100%); background-size:100% 100%; } .technology-box-slide>.swiper-slide:nth-child(3) .technology-box:nth-child(2):hover { background:url('../img/pageimage/digital_technology/kingpass-bg.png') #008AEA; background-size:100% 100%; } .technology-box-slide>.swiper-slide:nth-child(4) .technology-box:first-child:hover { background:url('../img/pageimage/digital_technology/aPaaS-bg.png'),linear-gradient(180deg,#0086E4 0%,#0068E3 100%); background-size:100% 100%; } .technology-box-slide>.swiper-slide:nth-child(4) .technology-box:nth-child(2):hover { background:url('../img/pageimage/digital_technology/hdsp-bg.png') #439BFF; background-size:100% 100%; } .technology-box-slide>.swiper-slide:nth-child(5) .technology-box:first-child:hover { background:url('../img/pageimage/digital_technology/meta-bg.png') #3085EC; background-size:100% 100%; } .technology-box-slide>.swiper-slide:nth-child(5) .technology-box:nth-child(2):hover { background:url('../img/pageimage/digital_technology/aigc-bg.png'); background-size:100% 100%; } .technology-box-slide>.swiper-slide:nth-child(5) .technology-box:first-child .box-subtit{ width: 15.625rem; } /* .technology-box-slide>.swiper-slide:nth-child(5) .technology-box:nth-child(2) { display: none; } */ .technology-box:hover .box-content,.technology-box:hover .box-more a,.technology-box:hover .box-p ,.technology-box:hover .box-subtit{ color:#FFFFFF; } .technology-container .swiper-slide { margin-top:2.9375rem; } .technology-container .swiper-container { padding-bottom:4.25rem; width:auto; overflow:initial; } .technology-box-slide { width:75rem; margin:0 auto; } .technology-boxes { height:26.3125rem; display:flex; flex-direction:column; justify-content:space-between; } .technology-box { width:19.5625rem; height:7.375rem; background:rgba(255,255,255); box-shadow:0.3125rem 0.3125rem 1.25rem rgba(26,39,59,0.06); border-radius:0.625rem; padding:2.3125rem 1.6875rem 2rem 2.5rem; } .box-content { width:100%; display:flex; align-items:center; color:#090F21; } .img-box { width:2.625rem; height:2.625rem; background:#F2F7FD; border-radius:0.875rem; padding:0.5625rem 0.5625rem; } .img-box img { width:2.625rem; height:2.625rem; } .box-tit { width:100%; font-size:0.875rem; font-weight:400; line-height:1.5rem; margin-left:0.75rem; } .box-subtit { float: left; color: #090F21; text-align:left; font-size:1.375rem; font-weight:400; line-height:2.3125rem; } .box-more { width:100%; display:flex; justify-content:space-between; align-items:center; } .box-more a { font-size:0.75rem; font-weight:400; line-height:1.25rem; color:#090F21; display:flex; align-items:center; } .box-more>a>div { margin-left:0.375rem; margin-top:0.1875rem; } .box-p { margin-top:0.6875rem; text-align:left; width:19.5625rem; height:2.9375rem; font-size:0.875rem; font-weight:400; line-height:1.5rem; color:rgba(9,15,33,0.5); } /* 鎺ㄨ崘 */ .mode-container { background-color:#ffffff; padding:4.375rem 0 5.625rem; } .mode-container .core-p { margin-bottom:2.5rem; } .mode-container .core-img { width:75rem; height:351.0.3125rem; } .mode-container .plant-line { margin-bottom:3.25rem; } .mode-container .line-txt { top:13.8125rem; } .mode-container .plant-circle { background:#E9F4F5; border:0px; width:0.875rem; height:0.875rem; } .mode-container .plant-circle-last { background:url("../img/pageimage/digital_technology/mode-more.svg"); background-size:100% 100%; } /* 鏋勫缓 */ .plant-container { padding:4.375rem 0 5.625rem; } .plant-content { z-index:1; } .plant-line { margin-top:1.25rem; margin-bottom:3.5625rem; position:relative; z-index:1; width:73.875rem; height:0.0625rem; background:linear-gradient(to right,transparent 0%,transparent 50%,#707070 50%,#707070 100%); background-size:0.625rem 0.0625rem; background-repeat:repeat-x; } .plant-circle { position:absolute; top:-0.4375rem; width:0.75rem; height:0.75rem; background:rgba(255,255,255); border:.0625rem solid #0A0F20; border-radius:50%; } .plant-circle-last { width:0.875rem; height:0.875rem; position:absolute; top:-0.4375rem; right:-1.25rem; background:url("../img/pageimage/digital_technology/plat-more.svg"); background-size:0.875rem 0.875rem; } .line-txt { width:73.875rem; position:absolute; top:12.4375rem; display:flex; justify-content:space-between; } .line-txt>div { width:14.375rem; text-align:center; } .line-txt-title { font-size:1.125rem; font-weight:400; line-height:1.9375rem; color:#090F21; } .line-txt-sub-p { font-size:0.875rem; font-weight:400; line-height:1.5rem; color:rgba(9,15,33,0.5); margin-top:0.75rem; } .plant-container .core-p { margin-bottom:2.5rem; } .plant-container .core-box { padding:1.8125rem 3.125rem 1.0625rem; width:68.75rem; height:27.5rem; } .plant-container .core-box .core-img { width:100%; height:100%; }