.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/erp_enterprise/banner-bg.png') no-repeat center; background-size: 100% 100%; text-align: left; } .banner-product-content{ position: relative; } .banner-product-title { display: flex; margin-top:0.875rem; color:#ffffff; font-weight:500; font-size:2.625rem; } .bannertit-icon-box{ width: 3.125rem; height: 3.125rem; box-sizing: border-box; padding: .3125rem .75rem; background: #FFFFFF; border-radius: .625rem; margin-right: .875rem; } .bannertit-icon-box img{ width: 100%; height: 100%; } .banner-product-txt { color:#ffffff; width:50rem; font-size:0.875rem; font-weight:400; line-height:2rem; margin-top:1.25rem; } .banner-btn { width: 8.75rem; height: 2.5rem; display: block; background-color: transparent; border: .0625rem solid #ffffff; font-size: 1rem; font-weight: 400; color: #FFFFFF; position: absolute; top: 10.3125rem; left: 0; } /* nav */ .c2m-nav { position: relative; z-index: 11; width:100%; height:4rem; background:#ffffff; box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.06); } .c2m-nav-fixed { position:fixed; top:0; left:0; z-index:999; transition:all 0.5s; } .c2m-tabs { width:75rem; margin:0 auto; display:flex; justify-content:space-around; } .c2m-nav-tab { text-align:center; width:auto; font-size:1.125rem; font-weight:400; line-height:4rem; color:rgba(9,15,33,0.5); } .c2m-nav-tab a { text-decoration:none; color:rgba(9,15,33,0.5); } .c2m-nav-tab a:hover,.c2m-nav-tab-active a { font-weight:400; color:#090f21; } .c2m-nav-tab .case-icon-active { margin-left:0; margin-top:-0.125rem; } /* 鏍稿績浼樺娍 */ .ability-container { background-color:#ffffff; padding:5.625rem 0 7.5rem; } .card-content1 ul { display:flex; margin-top:3.125rem; justify-content:space-between; width:75rem; } .card-content1 ul .vertical-icon-box{ width: 16.25rem; } .card-content1 ul .vertical-icon-box h2{ margin-top: .75rem; } /* 鏈嶅姟鑳藉姏 */ .container-df{ z-index: 1; display: flex; width: 75rem; margin: 0 auto; justify-content: space-between; } .service-icon-box,.area-icon-box{ width: 2.625rem; height: 2.625rem; padding: .5625rem; background: rgba(255,255,255); box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.1); border-radius: .875rem; margin-right: .5625rem; transition:all 0.5s ; } .service-icon-box img,.area-icon-box img{ width: 100%; height: 100%; } .service-icon-tit{ display: flex; font-size: 1.5rem; font-weight: 500; line-height: 2.5625rem; color: #090F21; align-items: center; } .service-icon-p{ width: 21.25rem; text-align: left; margin-top: 1.375rem; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: rgba(9,15,33,0.5); } .service-container{ padding: 5.1875rem 0 5.125rem 0; } .service-container .content-left{ margin-top: 4.375rem; } .service-tags{ display: flex; margin-left: 1.375rem; margin-top: 1rem; } .service-tag::before{ position: absolute; left: -1.375rem; top: .25rem; display: block; content: ''; width: .875rem; height: .875rem; border-radius: .25rem; } .service-tag:nth-child(1):before{ background: rgba(33,163,221,0.1); border: 1px solid #21A3DD; } .service-tag:nth-child(2):before{ background: rgba(109,191,175,0.1); border: .0625rem solid #6DBFAF; } .service-tag:nth-child(3):before{ background: rgba(167,167,216,0.1); border: .0625rem solid #A7A7D8; } .service-tag{ position: relative; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: #090F21; margin-right: 3.5rem; } .service-container .service-img{ width: 50.0625rem; height: 27.4375rem; } /* 鎸戞垬 */ .challenge-container{ padding: 3.375rem 0 2.5625rem 0; } .challenge-container .content-left{ text-align: left; margin-top: 4.75rem; } .challenge-container .service-img{ width: 42.0625rem; height: 32.8125rem; } /* 鍦板尯鐗硅壊鏈嶅姟 */ .region-container{ height: 29.5rem; background-color: #FFFFFF; padding: 4.75rem 0 3.75rem 0; background: url('../img/pageimage/erp_enterprise/region-bg.png') no-repeat; background-position: bottom right; background-size: 47rem 26.5625rem; } .region-container .content-left{ text-align: left; margin-top: 2.5625rem; } .region-container .service-icon-p{ margin-top: 2.5rem } .region-container .server-content-right{ margin-top: 6.5rem; } .region-container .service-img{ width: 42.0625rem; height: 32.8125rem; } /* 涓氬姟鑳藉姏 */ .capacity-container { padding:5.625rem 0 0; background-color:#ffffff; } .capacity-content { width:100%; max-width: 1920px; text-align:left; } .capacity-container .product-tip{ margin-top: 0; align-items:flex-start; } .product-tip:nth-child(odd) .separateRight{ height: 28.75rem; padding:5.625rem 7.5rem 0 0; box-sizing: border-box; background: url('../img/pageimage/erp_enterprise/capa-right-bg.png') no-repeat; background-position: right bottom; background-size: 32.8125rem 18.75rem; } .product-tip:nth-child(even) .separateLeft{ height: 28.75rem; padding:5.625rem 0 0 7.5rem; box-sizing: border-box; background: url('../img/pageimage/erp_enterprise/capa-left-bg.png') no-repeat; background-position: left bottom; background-size: 32.8125rem 18.75rem; } .capacity-box { box-sizing: border-box; position: relative; width: 40rem; height: 25rem; background:rgba(255,255,255); box-shadow: 0rem .375rem 1.25rem rgba(10,44,115,0.1); } .separateLeft .capacity-box{ border-radius: 0rem 6.25rem 6.25rem 0rem; padding: 5.625rem 0 0 7.125rem; } .separateRight .capacity-box{ border-radius: 6.25rem 0rem 0rem 6.25rem; padding: 5.625rem 0 0 5rem; } .capacity-box::after{ display: block; content: ''; background: url('../img/pageimage/erp_enterprise/capacity-box-back.svg') no-repeat; background-size: 100% 100%; width: 6.6875rem; height: 8.9375rem; position: absolute; top: 3.125rem; right: -2.5rem; z-index: -1; } .separateRight .capacity-box::after{ left: -2.5rem; right: auto; } .service-list-p{ margin-top: .8125rem; width: 27.5rem; display: flex; justify-content: space-between; font-size: .75rem; font-weight: 400; line-height: 1.5rem; color: #090F21; } /* 椋庨櫓 */ .risk-container { padding:4.375rem 0 7.1875rem; background-color:#ffffff; } .risk-content { width:75rem; display:flex; justify-content:space-between; z-index:1; margin-top: 4.625rem; } .risk-tit { font-size: 1.75rem; font-weight: 500; line-height: 2.5rem; color: #090F21; position:absolute; top:9.375rem; left:50%; transform:translateX(-50%); } .risk-row { z-index:2; position:relative; } .risk-row:nth-child(2) .title-df { flex-direction:row-reverse; } .risk-row:nth-child(2) .risk-box-icon { margin:0 0 0 1.25rem; } .risk-row:nth-child(2) .risk-box-p { width:20rem; } .title-df { display:flex; } .risk-box-icon { width:2.125rem; height:2.125rem; padding:0.8125rem; background:rgba(255,255,255); box-shadow:0rem 0.375rem 1.25rem rgba(10,44,115,0.08); border-radius:0.875rem; transition:all 0.5s; margin-right:1.25rem; } .risk-box-icon img { width:100%; height:100%; } .risk-box-title { font-size:1.375rem; font-weight:400; color:#090f21; } .risk-box-p { margin-top:.9375rem; width:20.25rem; font-size:0.875rem; font-weight:400; line-height:1.5rem; color:rgba(9,15,33,0.5); } .risk-bg-1 { position:absolute; top:8.4375rem; left:50%; transform:translateX(-50%); width: 16.625rem; height: 16.0625rem; background: linear-gradient(180deg, #8AE0FF 0%, #40BAE2 100%); border-radius: 50%; opacity: 0.1; } .risk-bg-2 { position:absolute; left:50%; transform:translateX(-50%); top:5rem; width: 22.75rem; height: 22.875rem; background: linear-gradient(180deg, #8AE0FF 0%, #40BAE2 100%); border-radius: 50%; opacity: 0.08; z-index:-1; } .risk-bg-3 { position:absolute; left:50%; transform:translateX(-50%); top:1.1875rem; width: 30.625rem; height: 30.625rem; background: linear-gradient(180deg, #8AE0FF 0%, #40BAE2 100%); border-radius: 50%; opacity: 0.06; z-index:-2; } /* 鏈嶅姟鐗硅壊 */ .server-content-right { position: relative; width: 37.5rem; } .produce-tip3-img{ position: relative; height: 100%; } .produce-tip-box{ width: 10rem; height: 10rem; background: rgba(255,255,255); box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.1); border-radius: 50%; opacity: 1; text-align: center; position: absolute; transition:all 0.5s ; } .produce-tip-box:hover{ background: #28ABC3; transform: scale(1.2); } .produce-tip-box:hover p,.produce-tip-box:hover .box-blue-subtit{ color: #ffffff; } .produce-tip-box p{ font-size: 1.375rem; font-weight: 400; line-height: 10rem; color: #090F21; } .product-bg2,.product-bg3,.product-bg4{ width:13.875rem; height:13.875rem; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) ; } .product-bg2{ z-index:-1; background: url('../img/pageimage/company_introduction/product-bg2.svg'); background-size: 100% 100%; animation: circle01 3s ease-out 2s infinite; -webkit-animation: circle01 3s ease-out 2s infinite; } .product-bg3{ z-index:-2; background: url('../img/pageimage/company_introduction/product-bg3.svg'); background-size: 100% 100%; animation: circle0 3s ease-out 2s infinite; -webkit-animation: circle0 3s ease-out 2s infinite; } .product-bg4{ opacity: 0; z-index:-3; background: url('../img/pageimage/company_introduction/product-bg4.svg'); background-size: 100% 100%; animation: circle1 3s ease-out 2s infinite; -webkit-animation: circle1 3s ease-out 2s infinite; } @keyframes circle01{ 0%{ width: 11.875rem; height: 11.875rem; } 100% { width: 13.25rem; height: 13.25rem; } } @keyframes circle0 { 100% { width: 28.375rem; height: 28.375rem; } } @keyframes circle1 { 50%{ opacity: 0; width: 18.75rem; height: 18.75rem; } 100% { opacity: 1; width: 29.625rem; height: 29.625rem; } } /* 鍖楃編鍦板尯 */ .customer-container h2,.feature-container h2,.area-container h2{ letter-spacing: .375rem; color: rgba(9, 15, 33, 0.5); } .customer-container { padding:4.375rem 0 7.5rem; } .customer-container .card-content { width:75rem; margin:0 auto; z-index:1; margin-top:3.125rem; } .customer-line { margin: 0 auto; margin-top: -6.1875rem; width: 62.5rem; height: .625rem; background: linear-gradient(90deg, #8AE0FF 0%, #40BAE2 100%); } .customer-iconboxes{ position: relative; height: 12.125rem; margin-top: .375rem; } .customer-iconbox{ position: absolute; top: 2.5rem; width: 6.25rem; height: 6.25rem; padding: 1.8125rem; box-sizing: border-box; background: rgba(255,255,255); box-shadow: 0rem .375rem 1.25rem rgba(10,44,115,0.08); border-radius: 50%; transition:all 0.5s ; -webkit-transition:all 0.5s ; -moz-transition:all 0.5s ; -ms-transition:all 0.5s ; -o-transition:all 0.5s ; } /* .customer-iconbox:nth-child(odd){ } */ /* .customer-iconbox:nth-child(even){ top: 4.8125rem; } */ .customer-iconbox img{ width: 2.625rem; height: 2.625rem; } .customer-boxes { width: 65.25rem; display:flex; justify-content:space-between; } .customer-box { box-sizing: border-box; text-align:left; padding:1.875rem 1.5rem 0; position:relative; width: 20.5rem; height: 8.5rem; background: rgba(255,255,255); box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.1); opacity: 0.9; border-radius: .625rem; transition:all 0.5s ; -webkit-transition:all 0.5s ; -moz-transition:all 0.5s ; -ms-transition:all 0.5s ; -o-transition:all 0.5s ; } .customer-box-title { font-size:1.125rem; font-weight:400; color:#090f21; } .customer-box-subTitle { margin-top:.375rem; font-size:0.875rem; font-weight:400; line-height:1.5rem; color:rgba(9,15,33,0.5); } .customer-boxes:first-child .customer-box::after { content:''; display:inline-block; border:.75rem solid transparent; border-top-color:rgba(255,255,255,0.9); border-top-width:1.25rem; position:absolute; bottom:-2rem; } .customer-boxes:nth-child(4) .customer-box::after { content:''; display:inline-block; border:.75rem solid transparent; border-bottom-color:rgba(255,255,255,0.9); border-bottom-width:1.25rem; position:absolute; top:-2rem; } .customer-boxes:first-child .customer-box:first-child::after { left:4.9375rem; } .customer-boxes:first-child .customer-box:nth-child(2)::after { left:8.0625rem; } .customer-boxes:first-child .customer-box:nth-child(3)::after { left:11.1875rem; } .customer-boxes:nth-child(4) .customer-box:first-child::after { left:7.9375rem; } .customer-boxes:nth-child(4) .customer-box:nth-child(2)::after { left:11.0625rem; } .customer-boxes:nth-child(4) .customer-box:nth-child(3)::after { left:14.1875rem; } .customer-boxes:nth-child(4){ margin-left: 9.75rem; margin-top: 5.5625rem; } /* 涓轰粈涔 */ .why-container { padding:4.375rem 0 5.625rem; background: url('../img/pageimage/erp_enterprise/why-bg.png'); background-size: 100% 100%; } .why-container h1{ font-size: 2.375rem; } .why-content .swiper-slide:nth-child(3) .technology-boxes { margin-right:0; } .why-box-slide { display:flex; width:75rem; margin:0 auto; } .why-box-slide .swiper-slide{ width: auto; } .technology-boxes { margin-top:2.125rem; height:26.3125rem; display:flex; flex-direction:column; justify-content:space-between; margin-right:1.875rem; } .technology-box { width: 23.75rem; height: 11.6875rem; background: rgba(255,255,255); box-shadow: 0.3125rem 0.3125rem 1.25rem rgb(26 39 59 / 6%); border-radius: 0.625rem; padding: 2.1875rem 1.6875rem 1.8125rem 2.375rem; box-sizing: border-box; transition:all 0.5s; } .technology-box:hover { transform:scale(1.1); transition:all 0.5s; } .box-content { width:100%; display:flex; align-items:center; color:#090F21; } .img-box { display: none; } .box-tit { width:100%; font-size:0.875rem; font-weight:400; line-height:1.5rem; margin-left:0; } .box-subtit { text-align:left; font-size: 1.25rem; font-weight: 400; line-height: 2.125rem; } .box-blue-subtit { color: #28ABC3; } .box-more { display:none; } .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); } /* 娆ф床 */ .feature-container { padding:4rem 0 8.375rem; background-color:#ffffff; } .feature-content { width:75rem; display:flex; justify-content:space-between; z-index:1; } .feature-tit { position:absolute; top:50%; left:50%; transform:translateX(-50%); } .feature-row { text-align: left; z-index:2; position:relative; } .feature-row:nth-child(2) .feature-box-p{ /* width: 16.875rem; */ } .feature-box-content{ margin-top: 4.375rem; } .feature-box-icon { display: inline-block; width:.875rem; height:.875rem; margin-right: 1.3125rem; } .feature-box-title { font-size: 1.125rem; font-weight: 400; color: #090F21; } .feature-box-p { margin-top:.9375rem; margin-left: 2.375rem; width:20.25rem; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: rgba(9,15,33,0.5); } .feature-bg-1 { position:absolute; top:11.875rem; left:50%; transform:translateX(-50%); width: 22.25rem; height: 22.25rem; background: rgba(255,255,255); box-shadow: 0rem .375rem 2.5rem rgba(10,44,115,0.06); border-radius: 50%; } .feature-bg-2 { position:absolute; left:50%; transform:translateX(-50%); top:4.5rem; width: 36.5rem; height: 36.5rem; background: rgba(255,255,255); box-shadow: 0rem .375rem 2.5rem rgba(10,44,115,0.06); border-radius: 50%; opacity: 1; z-index:-1; } .feature-bg-3 { position:absolute; left:50%; transform:translateX(-50%); top:-9.375rem; width: 64.125rem; height: 64.125rem; background: rgba(255,255,255); box-shadow: 0rem .375rem 3.75rem rgba(10,44,115,0.04); border-radius: 50%; opacity: 0.76; z-index:-2; } /* 涓滃崡浜 */ .area-container{ padding: 4.375rem 0 9rem; text-align: left; } .area-icon-tit{ display: flex; font-size: 1.125rem; font-weight: 400; line-height: 1.9375rem; color: #090F21; } .area-icon-tit .area-icon-box{ margin-right: 1.875rem; } .area-icon-p{ margin-left: 5.625rem; margin-top: -1.5625rem; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: rgba(9,15,33,0.5); } .area-container .area-bg2{ width: 15.9375rem; height: 15.9375rem; background: rgba(255,255,255); box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.1); border-radius: 50%; position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) ; z-index:-1; } .area-container .produce-tip-box{ width: 6.25rem; height: 6.0625rem; background: rgba(255,255,255); box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.1); border-radius: .25rem; } .area-container .area-box-p{ width: 5.4375rem; height: 1.4375rem; margin: 0 auto; display: flex; justify-content: space-between; font-size: .875rem; font-weight: 400; color: #090F21; } .area-box-p .orange-dot{ margin-right: 0; } .area-container .produce-tip-box img{ width: 6.5625rem; height: 4.6875rem; } .area-p{ text-align: center; margin-top: 5.0625rem; font-size: 1.125rem; font-weight: 400; line-height: 1.625rem; color: #090F21; } .area-tag{ display: flex; align-items: center; justify-content: center; text-align: center; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: rgba(9,15,33,0.5); } .blue-dot{ display: inline-block; width: .5rem; height: .5rem; background: linear-gradient(180deg, #8AE0FF 0%, #40BAE2 100%); border-radius: 50%; margin-right: .4375rem; } .orange-dot{ display: inline-block; width: .5rem; height: .5rem; background: linear-gradient(180deg, #FFCB33 0%, #FFA109 100%); border-radius: 50%; margin-right: .4375rem; } /* 閿氱偣 */ #NorthAmerica,#Europe,#SoutheastAsia{ position: absolute; top: -8.125rem; }