@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: 930px; 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; top: 360px; right: 540px; line-height: 1.375; color: #fff; text-align: left; }
#headerChannel .con h1 { font-size: 80px; font-weight: bold; }
#headerChannel .con h3 { margin-top: 30px; font-size: 51px; letter-spacing: 0.2em; }
#headerChannel .pics > div::before { background-size: contain; display: block; content: ''; width: 100%; height: 100%;  }
#headerChannel .p-01 { position: absolute; right: 70px; top: 420px; width: 377px; height: 427px; perspective: 500px; }
#headerChannel .p-01::before { background: url(../img/pic-01.png) no-repeat; animation: floating 5s ease infinite; }
#headerChannel .p-02 { position: absolute; right: 210px; top: 400px; width: 955px; height: 500px; }
#headerChannel .p-02::before { background: url(../img/pic-02.png) no-repeat; }

.rowGroup { padding: 30px 0; }
.rowBox > .hd { position: relative; text-align: center; line-height: 1; font-size: 0; margin-bottom: 50px; }
.rowBox > .hd h3 { position: relative; display: inline-block; vertical-align: top; padding-bottom: 10px; font-size: 40px; line-height: 60px; font-weight: bold; color: #1A43D3; }
.rowBox > .hd h3 .line { position: absolute; content: ''; width: 160px; height: 1px; bottom: 0; left: 0; right: 0; margin: auto; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #285CE2 50%, rgba(255, 255, 255, 0) 100%); }
.rowBox > .hd h3 span::before,
.rowBox > .hd h3::before { position: absolute; content: ''; top: 35px; width: 15px; height: 15px; border-radius: 2px; background: linear-gradient(35deg, #1F4BE4 10%, rgba(31, 75, 228, 0.2) 90%); opacity: 0.4; }
.rowBox > .hd h3 span::before { right: 100%; margin-right: 50px; }
.rowBox > .hd h3::before { left: 100%; margin-left: 50px; transform: rotate(-90deg); }
.rowBox > .hd h3 span::after,
.rowBox > .hd h3::after { position: absolute; content: ''; top: 15px; width: 25px; height: 25px; border-radius: 2px; background: linear-gradient(135deg, #5687FF 10%, #204DE5 90%); opacity: 0.7; }
.rowBox > .hd h3 span::after { right: 100%; margin-right: 59px; }
.rowBox > .hd h3::after { left: 100%; margin-left: 59px; transform: rotate(-90deg); }
.rowBox > .hd .intro { margin-top: 40px; text-align: center; font-size: 18px; line-height: 2; color: #333; }

/* 研发背景 */
#devbg { background: linear-gradient(180deg, #d6e8ff 0%, #fff 50%, #fff 100%); }
#devbg .boxIntro { margin-top: 30px; text-align: left; font-size: 16px; color: #333; line-height: 2; text-indent: 2em; text-align: justify; }
#devbg .boxIntro:first-child { margin-top: 0; }
.devbgList { margin-top: 30px; }
.devbgList li { margin-top: 20px; }
.devbgList li:first-child { margin-top: 0; }
.devbgList .con { display: flex; border-radius: 20px; background: #F1F5FF; overflow: hidden; }
.devbgList .title { padding: 9px 40px; line-height: 50px; font-size: 22px; font-weight: bold; color: #fff; background: linear-gradient(306.03deg, #4F84FF, #244DE0); }
.devbgList .number { display: inline-block; vertical-align: top; margin-right: 20px; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 22px; border-radius: 50%; font-weight: bold; color: #fff; background: linear-gradient(180deg, #FFD3A5, #EF9476); }
.devbgList .intro { flex: 1 0 0%; padding: 18px 40px; font-size: 16px; line-height: 2; text-align: justify; }

.devbgList .number,
.devbgList .con { transition: all ease 0.6s; }
.devbgList li:hover .con { transform: translateX(-10px); box-shadow: 0 4px 0 rgba(0, 13, 73, 0.1); }
.devbgList li:hover .number { transform: scale(1.1); }


/* 产品简介 */
.aboutList::before { display: table; content: ''; clear: both; }
.aboutList li { margin-top: 40px; }
.aboutList .item { display: flex; align-items: flex-start; gap: 80px; padding: 0 44px 0 30px; border-radius: 20px; background: linear-gradient(35deg, #4C81FD, #264FE1); }
.aboutList .pic span { margin-top: -25px; display: block; width: 363px; height: 249px; background: url(../img/pic-03.png) no-repeat 0 0; background-size: contain; }
.aboutList .intro { flex: 1 0 0%; margin-top: -30px; padding: 40px; background: #fff; border-radius: 20px; font-size: 16px; color: #333; line-height: 2; text-align: justify; text-indent: 2em; box-shadow: 0px 0px 20px rgba(54, 100, 237, 0.15); }
.aboutList li:hover .con { animation: bounce 1.2s linear; }

.aboutList .item,
.aboutList .pic span { transition: all ease 0.6s; }
.aboutList li:hover .pic span { transform: scale(1.05); }
.aboutList li:hover .item { transform: translateY(-10px); }

/* 产品优势 */
.advantageList { display: flex; flex-wrap: wrap; gap: 40px; }
.advantageList li { flex: 1 0 680px; }
.advantageList .item { position: relative; z-index: 1; border-radius: 10px; height: 100%; background: #FCFDFF url(../img/bg-01.png) no-repeat right 50px bottom; box-shadow: 0px 0px 15px rgba(26, 67, 211, 0.15); padding: 40px 45px; overflow: hidden; box-sizing: border-box; }
.advantageList .item::before { position: absolute; content: ''; z-index: -1; left: 0; top: 0; width: 100px; height: 100px; background: linear-gradient(135deg, #FFD3A5 50%, #EF9476 100%); border-radius: 50%; transition: all ease 0.8s; transform: translate(-50%, -50%); transform-origin: left top; }
.advantageList .title { line-height: 32px; font-size: 24px; font-weight: bold; }
.advantageList .number { position: absolute; left: 11px; top: 11px; line-height: 1; text-align: center; font-size: 16px; font-weight: bold; color: #fff; }
.advantageList .intro { margin-top: 20px; font-size: 16px; line-height: 2; text-indent: 2em; text-align: justify; }

.advantageList .title,
.advantageList .intro { transition: all ease 0.5s; }

.advantageList li:hover .title,
.advantageList li:hover .intro { color: #fff; }
.advantageList li:hover .item::before { width: 1500px; height: 1500px; }

/* ---------------------------------- 信创适配 ---------------------------------- */
#xcsp { margin-top: 50px; padding: 70px 0; background: url(../img/bg-02.jpg) no-repeat center center; background-size: cover; }
#xcsp .rowBox > .bd .more { margin-top: 30px; font-size: 14px; line-height: 2; text-align: center; color: #999; }
#xcsp .rowBox > .bd .more .red { color: #C7000B; }
#xcsp .rowBox > .bd .more a { color: #6D6D6D; text-decoration: underline; }
#xcsp .boxIntro { margin-top: 30px; text-align: left; font-size: 16px; color: #333; line-height: 2; text-indent: 2em; text-align: justify; }
#xcsp .boxIntro:first-child { margin-top: 0; }

.xcspList { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 25px; }
.xcspList li { position: relative; flex: 1 0 260px; }
.xcspList .con { padding: 15px 10px; background: #fff; border: 1px solid #D5DFF9; border-radius: 10px; box-sizing: border-box; }
.xcspList .title { margin-top: 10px; font-size: 16px; line-height: 2; font-weight: bold; text-align: center; color: #333; }
.xcspList .pic { position: relative; height: 0; overflow: hidden; padding-bottom: 142.74%; }
.xcspList .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.xcspList .con,
.xcspList .pic img { transition: all ease 0.6s; }
.xcspList li:hover .con { transform: translateY(-10px); }

/* ---------------------------------- 安全性 ---------------------------------- */
#solutionSafety { padding: 70px 0; background: url(../img/bg-03.jpg) no-repeat center bottom; background-size: cover; }
#solutionSafety .rowBox > .hd .intro { font-size: 16px; }
#solutionSafety .more { margin-top: 28px; }
#solutionSafety .more a { color: #fff; }
#solutionSafety .more a::before { border: none; background: linear-gradient(90deg, #7699F0 0%, #5786E4 100%); }
#solutionSafety .more a:hover::before { transform: rotateY(180deg); background: linear-gradient(90deg, #7699F0 0%, #5786E4 100%); }

#solutionSafety .item .title { font-size: 22px; font-weight: bold; line-height: 32px; text-align: center; color: #333; }
#solutionSafety .item .intro { margin-top: 24px; font-size: 16px; color: #666; text-align: center; line-height: 32px; }
#solutionSafety .item .pic { margin-top: 30px; }
#solutionSafety .item .pic img { width: 100%; height: auto; }

#otherSafety { padding: 90px 0 50px; }
.othersList { margin-top: -40px; column-count: 2; column-gap: 40px; }
.othersList li { display: inline-block; vertical-align: top; margin-top: 40px; width: 680px; break-inside: avoid; }
.othersList .item { position: relative; z-index: 1; border-radius: 10px; background: #FCFDFF url(../img/bg-04.png) no-repeat right 50px top; box-shadow: 0px 0px 15px rgba(26, 67, 211, 0.15); padding: 40px; overflow: hidden; box-sizing: border-box; text-align: center; }
.othersList .title { position: relative; display: inline-block; vertical-align: top; line-height: 76px; font-size: 40px; font-weight: bold; text-align: center; }
.othersList .title::before,
.othersList .title::after { position: absolute; content: ''; top: 30px; right: 100%; width: 6px; height: 6px; background: #D0DCFE; border-radius: 50%; box-shadow: -12px 0 #D0DCFE, -24px 0 #D0DCFE, -36px 0 #D0DCFE, 0 11px #D0DCFE, -12px 11px #D0DCFE, -24px 11px #D0DCFE, -36px 11px #D0DCFE; }
.othersList .title::after { right: auto; left: 100%; margin-left: 36px; }
.othersList .title span { display: block; padding: 0 20px; }
.othersList .title span::before { display: inline-block; vertical-align: top; margin-right: 20px; content: ''; width: 76px; height: 76px; background: url(../img/icons-other.png) no-repeat 0 0; background-size: auto 100%; }
.othersList .intro { margin-top: 20px; font-size: 16px; line-height: 2; text-align: justify; }
.othersList .intro p { position: relative; padding-left: 16px; margin-bottom: 0.6em; }
.othersList .intro p:last-of-type { margin-bottom: 0; }
.othersList .intro p::before { position: absolute; left: 0; top: 13px; content: ''; width: 6px; height: 6px; background: #80A2FB; border-radius: 50%; }

.othersList .li3 .item { height: 370px; }
.othersList .li4 .item { height: 392px; }

.othersList .li2 .title span::before { background-position: -76px 0; }
.othersList .li3 .title span::before { background-position: -152px 0; }
.othersList .li4 .title span::before { background-position: -228px 0; }

.othersList .item,
.othersList .title span::before,
.othersList .intro { transition: all ease 0.5s; }

.othersList li:hover .title span::before { animation: icon 0.8s ease 1; }
.othersList li:hover .item { transform: translateY(-15px); }


/* 功能清单 */
.featuresList { display: flex; flex-wrap: wrap; gap: 40px; }
.featuresList li { position: relative; flex: 1 0 100%; }
.featuresList li:first-of-type { margin-top: 0; }
.featuresList .item { display: flex; justify-content: space-between; align-items: center; gap: 5%; padding: 40px 50px; background: linear-gradient(180deg, #EAEEFF 2.81%, #FFFFFF 22.24%); box-shadow: 0px 0px 25px rgba(159, 184, 235, 0.2); border-radius: 20px; }
.featuresList .title { font-weight: bold; font-size: 32px; line-height: 1; }
.featuresList .con { position: relative; flex: 1 0 0%; }
.featuresList .pic span { position: relative; display: block; }
.featuresList .pic span::before { display: block; content: ''; width: 220px; height: 220px; background: url(../img/icons-features.png) no-repeat 0 0; background-size: auto 100%; animation: float 4s infinite; }
.featuresList .intro { margin-top: 25px; font-size: 16px; color: #333; 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: #80A2FB; border-radius: 50%; }

.featuresList .li4,
.featuresList .li5 { flex-basis: 680px; }

.featuresList .li2 .pic span::before { background-position: -220px 0; }
.featuresList .li3 .pic span::before { background-position: -440px 0; }
.featuresList .li4 .pic span::before { background-position: -660px 0; }
.featuresList .li5 .pic span::before { background-position: -880px 0; }
.featuresList .li6 .pic span::before { background-position: -1100px 0; }
.featuresList .li7 .pic span::before { background-position: -1320px 0; }

.featuresList li:nth-of-type(1) .pic,
.featuresList li:nth-of-type(3) .pic,
.featuresList li:nth-of-type(6) .pic { order: 1; }

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

.featuresList li:hover .item { transform: translateY(-15px); }
.featuresList li:hover .pic span { transform: scale(1.1); }


/* 底部通用 */
.lxss a,
.lxss a.sq { background-color: #4F84FF; }
.lxss a:hover,
.lxss a.sq:hover { background-color: #244DE0; }

/* 动画库 */
@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;
    }
}