.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/smart_store/banner-bg.png') no-repeat center; background-size:100% 100%; text-align:left; } .banner-product-title { color:#ffffff; font-weight:500; font-size:2.625rem; } .banner-product-txt { width: 30.875rem; color:#ffffff; font-size:0.875rem; font-weight:400; line-height:2rem; margin-top:1.0625rem; } /* core鏍稿績 */ .core-container { background-color:#ffffff; padding:4.375rem 0 5.125rem 0; overflow:hidden; } .core-box { margin-top:2.5rem; z-index:1; width:58.9375rem; height:31.6875rem; padding:2.5rem 4.9375rem; background: rgba(255,255,255); box-shadow: 0rem .375rem 1.25rem rgba(10,44,115,0.08); border-radius: 1.875rem; } .core-img { width:100%; height:100%; } /* 浜у搧鐗硅壊 */ .feature-container{ padding:4.875rem 0 6.875rem; } .feature-content{ width: 75rem; margin: 0 auto; display: flex; justify-content: space-between; z-index: 1; } .feature-box-pro{ margin-top: 2.5rem; width: 23.75rem; } .feature-box-pro-img{ width: 23.75rem; height: 15.875rem; border-radius:20px ; overflow: hidden; } .feature-box-pro-img img{ width: 100%; height: 100%; } .feature-box-pro-img img:hover{ transform:scale(1.1,1.1); transition:all .5s; -webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); } .feature-box-tit{ width: 22.5rem; margin: 0 auto; font-size: 1.125rem; font-weight: 400; color: #090F21; margin: 2.5rem 0 1.125rem; } .feature-box-para{ width: 22.5rem; margin: 0 auto; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: rgba(9,15,33,0.5); } /* 鏍稿績浼樺娍 */ .values-container { background-color: #ffffff; padding:4.375rem 0 7.5rem; } .value-core-box { display:flex; position:relative; margin-top:2.9375rem; z-index:1; width:75rem; height:25rem; background:rgba(255,255,255); box-shadow:0rem 0.375rem 1.25rem rgba(10,44,115,0.08); border-radius:1.25rem; } .value-box { width:30rem; background:url('../img/pageimage/digital_onekeeper/value-box-bg.png') right bottom no-repeat; background-size:27.4375rem 11.8125rem; } .value-img { position:absolute; right:0; top:0; width:45rem; height:25rem; } .value-box-title { font-size:1.75rem; font-weight:500; line-height:3rem; color:#090f21; } .values-container .mobile-tag-p { width:20.25rem; margin-top:.8125rem; font-size:0.875rem; font-weight:400; line-height:1.5rem; color:rgba(9,15,33,0.5); } .value-box-para { text-align:left; margin:5.375rem 0 0 3.8125rem; } .value-line { position:absolute; right:33.75rem; width:0.125rem; height:25rem; background:rgba(255,255,255); opacity:0.45; } .value-tag-index { display:flex; margin:8.75rem 0 0 0rem; z-index:1; } .value-index-circle { position:relative; width:1.0625rem; height:1.0625rem; background:rgba(255,255,255); border-radius:50%; opacity:0.5; margin-bottom:2rem; } .value-tag-name-active .value-index-circle { opacity:1; } .value-tag-name-active .value-index-circle::after { width:3.6875rem; height:3.6875rem; content:''; display:block; position:absolute; left:-1.3125rem; top:-1.3125rem; box-shadow:inset #ffffff 0 0 0.3125rem; border-radius:50%; animation:loopzoom 2s ease-out 0s infinite; } .value-tag-name-active .value-index-circle::before { width:2.0625rem; height:2.0625rem; content:''; display:block; position:absolute; left:-0.5rem; top:-0.5rem; box-shadow:inset #ffffff 0 0 0.3125rem; border-radius:50%; animation:loopzoom 2s ease-out 0s infinite; } .value-tag-name { margin-top:1.25rem; display:flex; flex-direction:column; align-items:center; width:11.25rem; height:6.875rem; font-size:1.125rem; font-weight:400; line-height:1.9375rem; color:#ffffff; } /* 鐑偣娲炲療 */ .news-box{ background-color: #F5F7FA; }