.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/hcopilot_aigc/banner.png') no-repeat center; text-align:left; background-size: 90rem 33.75rem; background-color: #00121C; } .banner-product-title { color:#ffffff; font-weight:500; font-size:2.625rem; } .banner-product-txt { width:41.8125rem; color:#ffffff; font-size:1.125rem; font-weight:400; line-height:2rem; margin-top:1.0625rem; } /* core鏍稿績 */ .core-container { background-color:#f5f7fa; padding:4.375rem 0 5.625rem 0; overflow:hidden; } .core-box { margin-top:1.875rem; z-index:1; width: 66.25rem; height: 35rem; padding: 1.875rem 5rem; box-sizing: border-box; background:rgba(255,255,255); box-shadow:0.3125rem 0.3125rem 1.25rem rgba(26,39,59,0.1); border-radius:1.25rem; } .core-img { width:100%; height:100%; } /* 鏍稿績鍔熻兘 */ .ability-container { background-color:#ffffff; padding:4.375rem 0 7.5rem; } .card-content1 ul { display:flex; margin-top:1.8125rem; justify-content:space-between; width:75rem; } .vertical-icon-box { margin-top:0 !important; } .vertical-icon-box p { width:16.25rem; } /* //hover涓婄Щ0.625rem */ .vertical-icon-box:hover .icon-box { transform:translateY(-0.625rem); } /* 鍦烘櫙 */ .application-container { text-align:left; padding:4.375rem 0 0; } .challange-content { margin-top: 3.125rem; z-index:1; justify-content: flex-start; } .challange-tags { margin-top:0; display:block; } .challange-tag { box-sizing: border-box; width: 14.375rem; height: 6.4375rem; background: rgba(255,255,255); border-radius: .625rem; margin:1.5rem 1.0625rem 0 0; padding: 2rem .75rem 1.75rem 1.5rem } .challange-tag-subtitle { color: #090F21; font-size: 1rem; line-height: 1.6875rem; } .challange-tag-title { font-size: 1rem; line-height: 1.6875rem; } .challange-tag-active{ position: relative; width: 15.4375rem; height: 6.4375rem; margin-right: 0; background: linear-gradient(93deg, #8AE0FF 0%, #40BAE2 100%); box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.1); border-radius: .625rem 0rem 0rem .625rem; } .challange-tag-active .challange-tag-subtitle,.challange-tag-active .challange-tag-title{ color: #ffffff; } .challange-tag-active::after{ position: absolute; right: 0; top: 2.375rem; content: ''; width: .6875rem; height: 1.1875rem; background: url('../img/pageimage/hcopilot_aigc/active-more.svg'); background-size: 100% 100%; } .content-right{ position: relative; width: auto; height: auto; box-shadow: none; background: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } .content-right img{ width: 38.5rem; height: 34.375rem; position: absolute; z-index: -1; top: -2.875rem; left: 21.3125rem; } .senoria-content { display: block; width: 48.5625rem; height: 31.25rem; padding: 3.5rem 0 0 3.25rem; box-sizing: border-box; background: rgba(255,255,255); opacity: 0.9; border-radius: 1.25rem 1.25rem 0rem 0rem; } .senoria-title { font-size:1.5rem; font-weight:400; line-height: 2rem; color:#090F21; } .blue-senoria-tit{ font-size: 1.125rem; font-weight: 400; line-height: 2rem; color: #28ABC3; } .senoria-list{ position: relative; width: 25rem; margin-top: 1.5625rem; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: rgba(9,15,33,0.5); margin-left: 1.25rem; } .senoria-list::before{ position: absolute; left: -1.25rem; top: .3125rem; content: ''; width: .875rem; height: .875rem; background: url('../img/pageimage/hcopilot_aigc/list-icon.svg'); background-size: 100% 100%; } /* 搴旂敤鍦烘櫙 */ .app-container{ /* height: 55.1875rem; */ padding: 3.125rem 0 0; box-sizing: border-box; background: #ffffff; } .app-container-bg{ position: absolute; top: 0; width: 100%; height: 52.0625rem; background: url('../img/pageimage/hcopilot_aigc/app-bg.png') no-repeat bottom; background-size: 100% 100%; background-color: #ffffff; } .app-p{ z-index: 1; margin-top: .625rem; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: rgba(9,15,33,0.5); } .app-content{ z-index: 1; width: 75rem; margin: 0 auto; margin-top: -0.625rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .app-box{ margin-top: 3.125rem; width: 23.125rem; height: 14.25rem; background: rgba(255,255,255); border-radius: 1.25rem; } .app-box img{ width: 23.125rem; height: 10.625rem; } .app-con{ display: flex; margin: .875rem 1.75rem; justify-content: space-between; } .app-box-title{ /* margin: 1.25rem 0 0 1.75rem; */ font-size: 1.125rem; font-weight: 400; line-height: 1.9375rem; color: #090F21; } .app-box-tag{ width: 5rem; height: 1.375rem; border: .0625rem solid rgba(9,15,33,0.2); border-radius: .3125rem; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: rgba(9,15,33,0.5); } .app-box-more{ width: 19.625rem; text-align: left; margin: 0 auto; font-size: .875rem; font-weight: 400; line-height: 1.5rem; color: rgba(9,15,33,0.5); opacity: 0; } .app-box:nth-child(6),.app-box:nth-child(4),.app-box:nth-child(5){ margin-bottom: 120px; } .app-box:nth-child(6):hover,.app-box:nth-child(4):hover,.app-box:nth-child(5):hover{ margin-bottom: 50px; } .app-box:hover{ height: 21.875rem; box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.06); transition: all 0.5s; } .app-box:hover .app-box-more{ opacity: 1; transition: all 0.6s; } /* 澶у湥AI */ .dasheng-container{ position: relative; overflow: hidden; height: 79.6875rem; background: linear-gradient(0deg, rgba(85,202,255,0) 0%, rgb(85, 202, 255,0.86) 55%, rgb(85, 202, 255,0.86) 100%); } .dasheng-top{ height: 37.5rem; background: url('../img/pageimage/hcopilot_aigc/dasheng-top.png') no-repeat; background-position: bottom; background-size: 100% 13.8125rem; } .dasheng-top-img{ position: absolute; bottom: 0; width: 100%; height: 13.8125rem; } .dasheng-bottom-img{ height: 1.5625rem; width: 100%; } .dasheng-bottom-img img{ width: 100%; height: 100%; } .dasheng-top-content{ width: 75rem; margin: 0 auto; padding-top: 8rem; box-sizing: border-box; position: relative; } .dasheng-title{ font-size: 2.25rem; font-weight: bold; line-height: 3.125rem; color: #FFFFFF; margin-top: .625rem; } .dasheng-txt{ margin-top: .5rem; font-size: .875rem; font-weight: 400; line-height: 1.875rem; color: #FFFFFF; text-shadow: 0rem .1875rem .375rem #1AC6FA; } .dasheng-txt-brown{ font-size: 1.25rem; font-weight: 400; line-height: 1.875rem; color: #FDFDBC; text-shadow: 0rem .1875rem .375rem #1AC6FA; } .banner-content-digitizing { position: absolute; top: 8rem; right: 2.6875rem; z-index: 97; padding: 0.9375rem; box-sizing: border-box; } .banner-play { width: 5.625rem; height: 5.625rem; position: absolute; top: 16.375rem; right: 18.8125rem; z-index: 99; background: url(../../static/img/index-page/banner-play.svg) no-repeat; background-size: 100% 100%; } .banner-play:hover { background: url(../../static/img/index-page/banner-play-hover.svg) no-repeat; background-size: 100% 100%; } .digitizing-video { width: 36rem; height: 20.25rem; position: relative; z-index: 99; } .banner-content-digitizing .banner-bg-top { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(255,255,255); box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.1); opacity: 0.8; border-radius: 1.75rem; } .dasheng-line{ position: absolute; top: 0; margin-left: 1.0625rem; width: .3125rem; height: 40.625rem; background: linear-gradient(360deg, rgba(255,255,255,0.6) 0%, #FFFFFF 100%); opacity: 1; } .map-circle { position: absolute; top: 7.6875rem; left: -0.5rem; width: 1.375rem; height: 1.375rem; background: rgba(255,255,255); box-shadow: 0rem 0rem 1.25rem rgba(26,198,250,0.3); border-radius: 50%; } .map-circle::after { content: ''; display: block; position: absolute; left: -0.5rem; top: -0.5rem; border-radius: 50%; width: 2.375rem; height: 2.375rem; background: rgba(255,255,255,0.2); border-radius: 50%; } .dasheng-bottom-content{ width: 71.25rem; height: 40.625rem; margin: 0rem 0 0 3.6875rem; padding-top: 4.8125rem; box-sizing: border-box; display: flex; } .bottom-title-no{ width: 7.75rem; margin-top: 2.375rem; font-size: 1.875rem; font-weight: 500; line-height: 3.1875rem; color: #FFFFFF; } .arrow_no{ display: inline-block; margin: .75rem .625rem; width: 2.9375rem; height: .375rem; background: url('../img/index-page/white-arrow.svg') no-repeat; background-size: 100% 100%; } .bottom-tit{ font-size: 1.5rem; font-weight: bold; line-height: 2.5625rem; color: #FFFFFF; } .bottom-box{ position: relative; margin-left: 2.1875rem; width: 61.375rem; height: 23.75rem; background-color: rgba(255,255,255); box-shadow: .3125rem .3125rem 1.25rem rgba(26,39,59,0.1); border-radius: 1.25rem; background-image: url('../img/pageimage/hcopilot_aigc/bottom-bg.svg'); background-repeat: no-repeat; background-size: 18.75rem 21.8125rem; background-position: left bottom; } .bottom-tit-icon{ width: 12.5rem; height: 3.75rem; margin: 4.3125rem 0 2.3125rem 4.4375rem; } .box-tit{ font-size: 1.125rem; font-weight: 500; line-height: 1.9375rem; color: #090F21; margin-left: 4.6875rem; } .box-tit-blue{ font-size: 1.5rem; color: #28ABC3; } .bottom-box-content1{ position: absolute; left: 21.8125rem; top: 6.6875rem; width: 36.375rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .box-tag{ width: 11.25rem; height: 2.5rem; background: linear-gradient(180deg, rgba(138,224,255,0.2) 0%, rgba(64,186,226,0.1) 100%); border-radius: 1.3125rem; font-size: 1.125rem; font-weight: 500; line-height: 2.5rem; color: #090F21; margin-bottom: 3.3125rem; text-align: center; } .bottom-box-content3{ width: 37.25rem; left: 20.125rem; top: 2.375rem; } .bottom-box-content3 .box-tag{ background: linear-gradient(180deg, rgb(138, 224, 255,0.14) 0%, rgb(64, 186, 226,0.14) 100%); /* opacity: 0.14; */ border-radius: .625rem; margin-bottom: .5rem; } .box-tag-gray{ background: rgba(245,247,250)!important; font-size: .875rem; font-weight: 400; } .bottom-box-content2{ position: absolute; left: 20.125rem; top: 1.9375rem; } .bottom-box-content2-tit{ margin-left: 6.375rem; width: 30.75rem; display: flex; justify-content: space-between; } .content2-tit{ font-size: 1.125rem; font-weight: 500; line-height: 1.9375rem; color: #090F21; } .content2-tit img{ display: block; transform: translateX(-50%); margin-left: 50%; width: 1.875rem; height: 1.875rem; } .box-tag-wrap{ margin-top: .25rem; width: 39.3125rem; display: flex; flex-wrap: wrap; justify-content: space-between; } .box-tag-blue{ font-size: 1rem; font-weight: 500; display: flex; justify-content: center; align-items: center; color: #090F21; width: 3.5625rem; height: 3.75rem; background: linear-gradient(180deg, rgb(138, 224, 255,0.14) 0%, rgb(64, 186, 226,0.14) 100%); border-radius: .625rem; } .box-tag-wrap .box-tag{ width: 11.25rem; height: 3.75rem; background: rgba(245,247,250); opacity: 1; border-radius: .625rem; /* display: flex; justify-content: center; align-items: center; */ padding: .75rem 0 0 1.25rem; text-align: left; box-sizing: border-box; line-height: normal; font-size: .75rem; font-weight: 400; color: rgba(9,15,33,0.5); margin-bottom: .5rem; } .box-tag-wrap .box-tag>p{ position: relative; } .box-tag-wrap .box-tag>p::before{ position: absolute; left: -0.6875rem; top: .375rem; content: ''; width: .5rem; height: .5625rem; background: url('../img/pageimage/aptitude_honor/important-icon.svg'); background-size: 100% 100%; } .dasheng-bottom{ position: relative; width: 75rem; margin: 0 auto; height: 40.625rem; overflow: hidden; } #train{ position: absolute; top: 34.125rem; width: 161.25rem; height: 3.75rem; transform: translateX(37.5rem); -webkit-transform: translateX(37.5rem); -moz-transform: translateX(37.5rem); -ms-transform: translateX(37.5rem); -o-transform: translateX(37.5rem); transition: all 2s; -webkit-transition: all 2s; -moz-transition: all 2s; -ms-transition: all 2s; -o-transition: all 2s; }