@charset "utf-8";

/* frame */
.wrap { overflow:hidden; }
a { transition:all 0.5s;}
body{min-width: 1400px;font-weight:400;background: #fff;}
.clear{clear: both;}
#content{zoom: 1;width: 100%;}
.row{width: 1400px; margin: auto; position: relative;}
.row:after { content:""; clear:both; display:block; overflow:hidden;}
 

#header { display: none;}
#headerChannel{ position:relative; width:100%; height: 808px; background:url(../img/bg-banner.jpg) repeat-x center bottom; background-size: cover; }
#headerChannel .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerChannel .logo img { height:100%; width:auto;}
#headerChannel .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerChannel .links a { height:36px;background: #144AA8; box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.16); border-radius: 18px;line-height: 36px;text-align: center;color: #fff;font-size: 16px; float:left; padding:0 1.5em;margin-left:10px;}
#headerChannel .links a:hover {background: linear-gradient(180deg, #FFFFFF 0%, #EEFCFF 100%); color: #144AA8;}

#headerChannel .con { position: absolute; z-index: 1; left: 15px; right: 15px; top: 350px; line-height: 1; color: #fff; text-align: center; }
#headerChannel .con h1 { margin-top: 56px; font-size: 92px; font-weight: bold; background: linear-gradient(180deg, #C3FDF8, #fff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
#headerChannel .con h1:first-child { margin-top: 0; }

.rowGroup { margin-bottom: 80px; }
.rowGroup:last-child { margin-bottom: 0; }
.rowBox > .hd { position: relative; text-align: center; line-height: 1; font-size: 0; margin-bottom: 80px; }
.rowBox > .hd h3 { position: relative; display: inline-block; vertical-align: top; padding: 0 70px; font-size: 40px; line-height: 70px; font-weight: bold; color: #014EFD; background: linear-gradient(270deg, #6EFAF2 0%, #E9FBB2 100%); border-radius: 500px; }

/* 产品概述 */
#about { margin-top: -35px; }
#about .rowBox > .hd { margin-bottom: 50px; }
#about .boxIntro { margin-top: 30px; text-align: left; font-size: 16px; color: #333; line-height: 2; text-indent: 2em; text-align: justify; }
#about .boxIntro:first-child { margin-top: 0; }



/* 产品优势 */
#advantage .rowBox > .bd { display: flex; align-items: center; }
#advantage .boxPic span { display: block; width: 500px; height: 458px; background: url(../img/pic-01.png) no-repeat center center; background-size: contain; animation: floating 5s ease infinite; }
.advantageList { position: relative; flex: 1 0 0; padding: 20px 0; box-shadow: 0px 0px 14px 0px rgba(16, 103, 219, 0.1); border-radius: 20px; }
.advantageList::before { position: absolute; z-index: 1; content: ''; left: -20px; top: -20px; bottom: -20px; width: 165px; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 10%, rgba(255, 255, 255, 0) 80%); }
.advantageList li { margin-top: 10px; }
.advantageList li:first { margin-top: 0; }
.advantageList .item { position: relative; z-index: 1; display: flex; gap: 30px; padding: 20px 30px 20px 100px; }
.advantageList li:nth-child(even) .item { background: #F4F9FF; }
.advantageList .number { width: 70px; height: 100px; background: url(../img/icons-number.png) no-repeat center -13px; background-size: 71px auto; align-self: center; font-size: 0; line-height: 999; overflow: hidden; }
.advantageList .con { flex: 1 0 0%; }
.advantageList .title { line-height: 32px; font-size: 24px; font-weight: bold; color: #1067DB; }
.advantageList .intro { margin-top: 10px; font-size: 16px; line-height: 2; text-indent: 2em; text-align: justify; color: #666; }

.advantageList .li2 .number { background-position: center -200px; }
.advantageList .li3 .number { background-position: center -390px; }

.advantageList .number,
.advantageList .con { transition: all ease 0.5s; }

.advantageList li:hover .number { animation: icon 0.8s ease 1; background-image: url(../img/icons-number-on.png); }
.advantageList li:hover .con { transform: translateX(10px); }


/* 功能清单 */
#features { position: relative; z-index: 1; overflow: hidden; margin-bottom: 0; padding-bottom: 30px; }
#features::before { position: absolute; z-index: -1; content: ''; left: -72%; right: -72%; top: 35px; height: 0; padding-bottom: 244%; background: linear-gradient(180deg, #0369FA 0%, #46A1FB 20%); border-radius: 50%; box-shadow: -400px 0 0 rgba(16, 103, 219, 0.1), 400px 0 0 rgba(16, 103, 219, 0.1); }
.featuresList { position: relative; z-index: 1; display: flex; gap: 16px; }
.featuresList::before { position: absolute; z-index: -1; content: ''; left: 0; right: 0; top: 121px; margin: auto; width: 1180px; height: 84px; background: url('data:image/svg+xml;utf8,<svg width="1180" height="84" viewBox="0 0 1180 84" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M590 0C817.65 0 1024.89 31.4753 1180 83.0015V84C1024.89 32.4737 817.65 0.998456 590 0.998456C362.35 0.99846 155.112 32.4737 0 84V83.0015C155.112 31.4753 362.35 3.44426e-06 590 0Z" fill="%2368F8F3"/></svg>') no-repeat center top; }
.featuresList li { position: relative; flex: 1 0 220px; }
.featuresList .item { border-radius: 20px; }
.featuresList .icon { position: relative; margin-bottom: 72px; }
.featuresList .icon::before { position: absolute; z-index: 1; content: ''; left: 0; right: 0; top: 100%; margin: 30px auto 0; width: 12px; height: 12px; background: #68F8F3; border-radius: 50%; }
.featuresList .icon span { position: relative; display: block; font-size: 0; line-height: 1; text-align: center; }
.featuresList .icon span::before { display: inline-block; vertical-align: top; content: ''; width: 88px; height: 88px; background: url(../img/icons-features.png) no-repeat 0 0; background-size: auto 100%; border-radius: 50%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 30px 0 rgba(255, 255, 255, 0.4) inset; }
.featuresList .con { position: relative; flex: 1 0 0%; padding: 30px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)); border-radius: 20px 20px 0 0; color: #fff; min-height: 530px; }
.featuresList .title { font-weight: bold; font-size: 24px; line-height: 1.33; text-align: center; }
.featuresList .intro { margin-top: 15px; font-size: 16px; color: #fff; line-height: 2; text-align: justify; }
.featuresList .intro p { position: relative; padding-left: 16px; margin-bottom: 0.6em; }
.featuresList .intro p:last-of-type { margin-bottom: 0; }
.featuresList .intro p::before { position: absolute; left: 0; top: 13px; content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; }

.featuresList .li1 .icon span::before { background-position: -352px 0; }
.featuresList .li2 .icon span::before { background-position: -176px 0; }
.featuresList .li3 .icon span::before { background-position: 0 0; }
.featuresList .li4 .icon span::before { background-position: -88px 0; }
.featuresList .li5 .icon span::before { background-position: -264px 0; }
.featuresList .li6 .icon span::before { background-position: -440px 0; }
.featuresList .li7 .icon span::before { background-position: -528px 0; }

.featuresList li:nth-of-type(1),
.featuresList li:nth-of-type(6) { margin-top: 80px; }
.featuresList li:nth-of-type(2),
.featuresList li:nth-of-type(5) { margin-top: 25px; }

.featuresList .icon span,
.featuresList .con,
.featuresList .title span::before,
.featuresList .intro { transition: all ease 0.6s; }

.featuresList li:hover .con { transform: translateY(-10px); background: linear-gradient(180deg, #0369FA, rgba(3, 105, 250, 0)); }
.featuresList li:hover .icon span { animation: bounce 1s ease 1; }


/* 底部通用 */
.lxss a,
.lxss a.sq { background-color: #1067DB; }
.lxss a:hover,
.lxss a.sq:hover { background-color: #014EFD; }

/* 动画库 */
@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: scale(1.03) translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
        animation-timing-function: ease-in-out;
    }
    50% {
        transform: translateY(10px);
        animation-timing-function: ease-in-out;
    }
}

@keyframes icon {
    0% {
        transform: scale(2.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}