.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/channel_ecommerce/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-sub{ font-size: 1.25rem; font-weight: 400; margin-top:.5rem; /* line-height: 2rem; */ color: rgb(255, 255, 255,0.4); } .banner-product-txt { width: 36.25rem; color:#ffffff; font-size:0.875rem; font-weight:400; line-height:2rem; margin-top:.5rem; } /* aps */ .aps-tabs { width:62.5rem; padding-top:1.5625rem; margin:0 auto; display:flex; justify-content:center; } .aps-tab { /* width:6.25rem; margin-right:9.875rem; */ font-size:1.125rem; font-weight:400; color:rgba(9,15,33,0.5); z-index:1; } .aps-tab-active { color:#090f21; } .aps-tabs .case-icon-active { margin:0.875rem auto -0.125rem auto; } .aps-tab-line { width:75rem; height:0.125rem; background:#F5F7FA; } /* 鐗╂祦绠$悊 濂椾欢 kit */ .kit-part-content .aps-box:first-child .aps-img img{ object-fit: none; border-radius: .875rem; } .kit-part-content .aps-box:nth-child(4) .aps-home-tip-txt > div:first-child a{ margin-top: -2.5rem; display: inline-block; } .kit-container { padding:4.375rem 0 9.9375rem; background:#ffffff; } .kit-container .aps-tab { width: 15.625rem; text-align: center; margin-right: 0; } .aps-tab-active .tab-blue,.tool-title .tab-blue,.kit-container .aps-home-tip-txt .tab-blue { color:#28ABC3; } .kit-container .aps-box { position:relative; margin-top:2.375rem; width:75rem; height:24.75rem; } .kit-container .aps-img::before { position:absolute; top: 1.375rem; right: 1.8125rem; content:''; display:inline-block; width:3.625rem; height:0.75rem; background:url('../img/pageimage/c2m-produce/les-box-top.png'); background-size:100% 100%; } .kit-container .aps-box::before { position:absolute; bottom: -2.3125rem; left: 29.4375rem; content:''; display:inline-block; width:15rem; height:15rem; background:url('../img/pageimage/c2m-yiai/aps-img-back.svg'); background-size:100% 100%; z-index:0; } .tool-container .content-right::after,.kit-container .aps-box::after { position:absolute; top: 1.25rem; right: 1.125rem; content:''; display:inline-block; width:6.6875rem; height:8.4375rem; background:url('../img/pageimage/c2m-yiai/tool-box-back.svg'); background-size:100% 100%; z-index:0; } .aps-box { padding:0 1.25rem 0 3.75rem; display:flex; justify-content:space-between; } .kit-part-content .aps-box:first-child .aps-swiper-img img{ object-fit: cover; } .aps-box .swiper-container{ position: relative; z-index: 3; left: 1.5625rem; top: 3.25rem; } .aps-swiper-img{ position: relative; z-index: 3; left: -3.8125rem; top: 3.25rem; } .aps-box .swiper-container img,.aps-swiper-img img{ width: 40rem; height: 22.5rem; } .aps-box .swiper-slide{ left: 1.25rem; } .aps-box .swiper-progressbar .swiper-button-prev{ left: 3.4375rem; top: 11.875rem; } .aps-box .swiper-progressbar .swiper-button-next{ right: .4375rem; top: 11.875rem; } .aps-home-tip-txt { text-align:left; margin-top:5.9375rem; } .aps-home-tip-txt > div:first-child { height:1.5625rem; margin-bottom:1.5625rem; } .aps-home-tip-txt > div:first-child a { font-size:1.875rem; font-weight:500; line-height: 2.5rem; color:#090f21; } .aps-img { position:absolute; right: 1.3125rem; padding: 3.125rem 1.25rem 1.5rem; margin-right: 2.4375rem; width:40rem; height:22.5rem; z-index:1; background: rgba(255,255,255); box-shadow: 0px 6px 20px rgba(10,44,115,0.08); border-radius: .875rem; } .aps-img img { width:100%; height:100%; } .aps-sub-one{ width: 21.75rem; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: #090F21; } .sub-bold{ color: #090F21; } .aps-sub-para-p { margin-top: 1.125rem; width: 21.75rem; font-size:0.875rem; font-weight:400; line-height:1.75rem; color: rgba(9,15,33,0.5); } /* core鏍稿績 */ .core-container { background-color:#F5F7FA; padding:4.375rem 0 5.6875rem 0; overflow:hidden; } .core-box { margin-top:2.5rem; z-index:1; width:63.125rem; height:29.625rem; padding:2.8125rem; background: rgba(255,255,255); box-shadow: 0px 6px 20px rgba(10,44,115,0.08); border-radius: 1.875rem; } .core-img { width:100%; height:100%; } /* 鏍稿績鍔熻兘 */ .ability-container { background-color:#ffffff; padding:4.375rem 0 4.5625rem; } .card-content1 ul { display:flex; margin-top:1.8125rem; justify-content:space-between; width:75rem; } .card-content2 .vertical-icon-box:first-child { margin-top:2.5rem; } .card-content2 ul { display:flex; margin-top:2.875rem; justify-content:space-between; width:75rem; } .vertical-icon-box { width:16.25rem; } /* 鏍稿績浼樺娍 */ .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.9375rem; 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; } /*鑳藉姏浼樺娍*/ .cross-icon-box > .icon-content > h2 { margin-left:-0.6875rem; } .O2-advantage > img { position:absolute; } .O2-advantage .cross-icon-box:last-child { height:7.3125rem; }