@keyframes spread { 0% { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @-webkit-keyframes spread { 0% { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @-moz-keyframes spread { 0% { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @-o-keyframes spread { 0% { transform: scale(0); -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 100% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } @keyframes pronamei { 0% { top: -18px; } 50% { top: -25px; } 100% { top: -18px; } } @-webkit-keyframes pronamei { 0% { top: -18px; } 50% { top: -25px; } 100% { top: -18px; } } .w { width: 1200px; margin: 0 auto; } /* header */ .header-box { position: relative; width: 100%; height: 1079px; background: url(../imgs/bg.png) no-repeat center center; background-size: cover; } .header-top { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 11; width: 1200px; height: 60px; display: flex; justify-content: space-between; align-items: center; } .header-left { display: flex; align-items: center; } .header-left img { width: 40px; } .header-left h1 { font-size: 18px; font-family: MicrosoftYaHei; font-weight: 400; color: #FFFFFF; letter-spacing: 2px; margin-left: 10px; } .header-right { display: flex; align-items: center; } .header-right a { font-size: 18px; font-family: MicrosoftYaHei; color: #FFFFFF; letter-spacing: 1px; margin-left: 41px; } .header-right a:hover { color: #bacbf8; } .header-content { display: flex; flex-direction: column; justify-content: center; height: 100%; } .banner-content { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; } .banner-title { position: relative; display: flex; align-items: flex-end; width: fit-content; } .banner-title h1 { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 700; font-size: 56px; line-height: 61px; color: #FFFFFF; margin-right: 30px; } .banner-title > span { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 700; font-size: 34px; line-height: 31px; color: #EEEFFF; border-left: 2px solid #CBB3FF; padding-left: 24px; padding-top: 8px; box-sizing: border-box; } .banner-label { position: absolute; right: -100px; top: -14px; animation: pronamei 1s infinite both; -webkit-animation: pronamei 1s infinite both; -moz-animation: pronamei 1s infinite both; -o-animation: pronamei 1s infinite both; } .banner-label span { position: absolute; left: 13px; top: 6px; font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 700; font-size: 17.1429px; color: #FFFFFF; } .banner-left ul { margin-top: 46px; margin-bottom: 72px; } .banner-left ul li { display: flex; align-items: center; margin-bottom: 20px; } .banner-left ul li:last-child { margin-bottom: 0; } .banner-left ul li h2 { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 700; font-size: 22px; line-height: 32px; color: #FFFFFF; opacity: 0.9; margin-left: 14px; margin-right: 14px; } .banner-left ul li p { font-family: 'Source Han Sans CN'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 36px; color: #FFFFFF; opacity: 0.9; margin-left: 14px; } .banner-left a { display: flex; justify-content: center; align-items: center; width: 323px; height: 74px; background: #FFFFFF; border-radius: 14px; } .banner-left a span { font-family: 'Source Han Sans CN'; font-style: normal; font-weight: 500; font-size: 24px; color: #585FFF; margin: 0 21px; } .banner-left a:hover { box-shadow: 0px 0px 12px 4px #7b81ec; } .sys { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 24px; letter-spacing: 0.155em; color: #E7EDFF; margin-top: 16px; margin-bottom: 9px; } .num { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 24px; letter-spacing: 0.1em; color: #E7EDFF; } .num span { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 700; font-size: 25px; line-height: 34px; letter-spacing: 0.1em; color: #E7EDFF; margin: 0 8px; } .update-time-box { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 400; font-size: 18px; line-height: 24px; letter-spacing: 0.1em; color: #E7EDFF; margin-top: 9px; } .banner-right { padding: 26px; background: rgba(255, 255, 255, 0.2); border-radius: 56px; } .banner-right video { width: 630px; border-radius: 30px; } .banner-bottom ul { display: flex; align-items: center; justify-content: space-between; margin-top: 99px; } .banner-bottom ul li { display: flex; flex-direction: column; align-items: center; } .banner-bottom ul li h3 { font-family: 'Source Han Sans CN'; font-style: normal; font-weight: 500; font-size: 18px; line-height: 27px; text-align: center; color: #EFEEFF; margin-top: 25px; } /* hidden-header */ .hidden-header-box { display: none; width: 100%; height: 60px; background-color: #FFFFFF; position: fixed; top: 0; left: 0; z-index: 999; border-bottom: 1px solid #ddd; } .hidden-header-box .header-top .header-left h1 { font-size: 18px; font-family: MicrosoftYaHei; font-weight: 400; color: #000000; letter-spacing: 2px; } .hidden-header-box .header-top .header-right a { font-size: 18px; font-family: MicrosoftYaHei; color: #000000; letter-spacing: 1px; } .hidden-header-box .header-top .header-right a:hover { color: #5a75be; } /* 功能介绍 */ .func-box { width: 100%; background: #FBFCFD; padding: 80px 0; } .common-title { position: relative; font-family: 'Source Han Sans CN'; font-style: normal; font-weight: 700; font-size: 38px; line-height: 57px; color: #363D42; text-align: center; } .common-title img { position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); } .func-box ul { display: flex; justify-content: space-between; } .func-box ul.func-ul1 { margin-top: 80px; margin-bottom: 50px; } .func-box ul li { display: flex; flex-direction: column; align-items: center; width: 220px; height: 300px; background: #FBFCFD; box-shadow: 0px 0px 40px 6px rgba(235, 238, 248, 0.75); border-radius: 20px; padding-top: 46px; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } .func-box ul li h2 { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 26px; color: #494C53; margin-top: 25px; margin-bottom: 17px; } .func-box ul li p { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px; text-align: center; color: #778086; } .func-box ul li:hover h2 { margin-top: 5px; } /* 产品亮点 */ .advantage-box { width: 100%; padding-top: 80px; padding-bottom: 100px; background: #F8FAFF; } .advantage-item { display: flex; align-items: center; justify-content: space-between; } .advantage-item1 { margin-top: 90px; margin-bottom: 120px; } .advantage-item2 .advantage-text { display: flex; flex-direction: column; align-items: flex-end; } .advantage-text h2 { position: relative; font-family: 'Source Han Sans CN'; font-style: normal; font-weight: 700; font-size: 40px; line-height: 60px; letter-spacing: 0.1em; color: #494C53; } .advantage-text-left h2 img { position: absolute; left: 0; top: -27px; } .advantage-text-right h2 { text-align: right; } .advantage-text-right h2 img { position: absolute; right: 0; top: -27px; } .advantage-text-left p { width: 435px; } .advantage-text-right p { width: 448px; } .advantage-text p { font-family: 'Source Han Sans CN'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: 0.04em; color: #778086; margin-top: 19px; margin-bottom: 42px; } .advantage-text a { display: flex; justify-content: center; align-items: center; width: 206px; height: 59px; background: linear-gradient(0deg, #507EFF 3.39%, #7443FF 100%); border-radius: 10px; font-family: 'Source Han Sans CN'; font-style: normal; font-weight: 400; font-size: 24px; color: #FFFFFF; } .advantage-text a:hover { background: linear-gradient(0deg, #7443FF 3.39%, #507EFF 100%); } .advantage-text a img { margin-left: 20px; } /* 应用场景 */ .scen-box { width: 100%; padding: 80px 0; box-sizing: border-box; } .scen-box ul { display: flex; justify-content: space-between; } .scen-box ul.scen-ul1 { margin-top: 80px; margin-bottom: 50px; } .scen-box ul li { position: relative; width: 380px; height: 319px; border-radius: 20px; overflow: hidden; } .scen-text { position: absolute; left: 0; bottom: 0; width: 100%; height: 70px; line-height: 70px; background: rgba(35, 58, 102, .7); border-radius: 0px 0px 20px 20px; } .scen-text img { position: absolute; left: 24px; top: -20px; } .scen-text span { display: block; text-align: center; font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 400; font-size: 20px; color: #FFFFFF; } /* 评价 */ .assess-box { width: 100%; height: 800px; background: #ebf0fc; padding-top: 59px; box-sizing: border-box; } .assess-content { width: 1200px; margin: 0 auto; margin-top: 66px; } .assess-content ul:nth-child(1) li { display: none; width: 100%; height: 307px; box-sizing: border-box; background: #FFFFFF; border-radius: 30px; position: relative; z-index: 10; text-align: center; padding-top: 48px; } .assess-star h1 { font-size: 26px; font-weight: 700; color: #2D2856; margin-bottom: 24px; } .assess-content ul:nth-child(1) li span { display: block; width: 1000px; height: 1px; background: #EDF0F3; border-radius: 0px 0px 0px 0px; margin: 40px auto 0 auto; } .assess-content ul:nth-child(1) li p { font-size: 18px; font-weight: 400; color: #666473; margin-top: 44px; } .assess-content ul:nth-child(1) li i { display: block; width: 40px; height: 40px; background: #FFFFFF; border-radius: 2px 2px 2px 2px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); position: absolute; bottom: -20px; } .left1 { left: 82px; } .left2 { left: 293px; } .left3 { left: 495px; } .left4 { left: 686px; } .left5 { left: 874px; } .left6 { left: 1073px; } .assess-content ul:nth-child(1) li:first-child { display: block; } .assess-content ul:nth-child(2) { display: flex; align-items: center; justify-content: space-around; margin-top: 63px; } .assess-content ul:nth-child(2) li { display: flex; flex-direction: column; align-items: center; } .assess-content ul:nth-child(2) li:hover { cursor: pointer; } .assess-content ul:nth-child(2) li img { width: 76px; height: 76px; } .assess-content ul:nth-child(2) li p { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 400; font-size: 18px; color: rgba(0, 0, 0, 0.5); margin-top: 17px; margin-bottom: 11px; } .assess-content ul:nth-child(2) li h2 { font-family: 'Microsoft YaHei'; font-style: normal; font-weight: 400; font-size: 20px; color: #000000; } /* footer */ .footer-box { width: 100%; height: 40px; background: #000; display: flex; align-items: center; justify-content: center; } .footer-box span { font-size: 14px; color: #888; } .footer-box span a { font-size: 14px; color: #888; } .footer-box i { width: 1px; height: 12px; background-color: #888; margin: 0 30px; } /** 使用场景 **/ .titleh2 { width: 100%; font-family: 'Microsoft YaHei UI'; font-style: normal; font-weight: 700; font-size: 38px; line-height: 48px; text-align: center; color: #161F2D; margin-top: 92px; } /* 使用场景 */ .pdf-imgscra { height: 682px; background: #F7F8FA; overflow: hidden; position: relative; } .imgscraList { width: 1200px; margin: 72px auto 0 auto; display: flex; justify-content: space-between; align-items: center; } .imgscraItmes { width: 278px; height: 362px; background: #FFFFFF; box-shadow: 0 8px 30px rgba(12, 68, 152, 0.08); border-radius: 16px; position: relative; overflow: hidden; } .imgscraItmes>img { display: block; width: 278px; height: 180px; margin: 0 auto; } .imgscraItmes>h3 { width: 100%; font-family: 'Microsoft YaHei UI'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 28px; text-align: center; color: #161F2D; margin-top: 20px; } .imgscraItmes>p { width: 100%; font-family: 'Microsoft YaHei UI'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 24px; text-align: center; color: rgba(115, 126, 144, 0.8); box-sizing: border-box; padding: 0 26px; margin-top: 12px; } /* 小于1200 */ @media screen and (max-width: 1280px) { .pdf-imgscra { height: 1092px; } .imgscraList { width: 992px; flex-wrap: wrap; } .imgscraItmes { width: 294px; height: 362px; margin-bottom: 48px; } .imgscraItmes>img { width: 294px; } .imgscraItmes>p { padding: 0 35px; } } /* 移动 */ @media screen and (max-width: 1000px) { .pdf-imgscra { height: 1032px; } .imgscraList { width: 750px; margin: 64px auto 0 auto; justify-content: center; } .imgscraItmes { width: 340px; margin: 0 14px 32px 14px; } .imgscraItmes>img { width: 340px; } .imgscraItmes>p { padding: 0 28px; } }