@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;}

.logo-box { display: none;}
#headerChannel{ position:relative; width:100%; height: 867px; background: #4372FE url(../img/bg-banner.jpg) no-repeat center bottom; background-size: cover; }
#headerChannel::before { position: absolute; content: ''; left: 0; right: 0; bottom: -1px; height: 108px; background: url(../img/bg-arc.png) repeat-x 0 bottom; background-size: auto 100%; animation: banner 40s linear infinite; }
#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:34px;background: none; border: 1px solid #fff; border-radius: 18px;line-height: 34px;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: #1067DB;}

#headerChannel .row { height: 100%; }
#headerChannel .con { position: absolute; left: 10px; top: 359px; right: 10px; line-height: 1.3; color: #fff; text-align: center; }
#headerChannel .con h1 { font-size: 100px; text-shadow: 0 0 18px rgba(44, 73, 203, 0.7); font-weight: bold; }
#headerChannel .pics { position: absolute; left: -130px; bottom: -50px; }
@media screen and (max-height: 1500px) {
    #headerChannel .pics { left: 0; }
}
#headerChannel .pics > div { background-size: contain; }
#headerChannel .p-01 { display: block; width: 468px; height: 420px; background: url(../img/pic-01.png) no-repeat; }

.rowGroup { padding: 42px 0; }
.rowBox > .hd { position: relative; text-align: center; line-height: 1; font-size: 0; margin-bottom: 60px; }
.rowBox > .hd h3 { position: relative; z-index: 1; display: inline-block; vertical-align: top; font-size: 40px; line-height: 55px; font-weight: bold; color: #2C64D7; }
.rowBox > .hd h3 .line { position: absolute; z-index: -1; content: ''; width: 100px; height: 12px; bottom: 0; left: 0; right: 0; margin: auto; background: #DDEAFE; border-radius: 500px; }
.rowBox > .hd h3::before,
.rowBox > .hd h3::after { position: absolute; content: ''; top: 7px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(26.57deg, rgba(255, 255, 255, 0) 5.56%, #2B4ECB 88.89%); opacity: 0.4; }
.rowBox > .hd h3::before { right: 100%; margin-right: 50px; }
.rowBox > .hd h3::after { left: 100%; margin-left: 50px; }
.rowBox > .hd h3 span::before,
.rowBox > .hd h3 span::after { position: absolute; z-index: 1; content: ''; top: 16px; width: 7px; height: 35px; border-radius: 500px; background: linear-gradient(180deg, #547BFB 0%, #81C9FF 100%); }
.rowBox > .hd h3 span::before { transform-origin: right top; right: 100%; margin-right: 54px; transform: matrix(0.94, 0.34, -0.47, 0.88, 0, 0); box-shadow: -18px 6px #6aa1fd, -36px 12px #6aa1fd; }
.rowBox > .hd h3 span::after { transform-origin: left top; left: 100%; margin-left: 60px; transform: matrix(-0.94, 0.34, 0.47, 0.88, 0, 0); box-shadow: -18px 6px #6aa1fd, -36px 12px #6aa1fd; }

#about { padding-top: 80px; }


/* 产品概述 */
.aboutList li { position: relative; margin-top: 30px; flex: 1 0 100%; }
.aboutList li:first-of-type { margin-top: 0; }
.aboutList .item { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 35px 50px; background: #fff; box-shadow: 0 0 15px 0 #D4E3FF; border-radius: 30px; }
.aboutList .con { position: relative; flex: 1 0 0%; }
.aboutList .pic { order: 1; }
.aboutList .pic span { position: relative; display: block; }
.aboutList .pic span::before { display: block; content: ''; width: 390px; height: 222px; background: url(../img/pic-02.png) no-repeat center center; background-size: contain; }
.aboutList .intro { font-size: 16px; color: #333; line-height: 2; text-align: justify; text-indent: 2em; }
.aboutList .intro p { position: relative; margin-bottom: 0.6em; }
.aboutList .intro p:last-of-type { margin-bottom: 0; }

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

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

/* 产品优势 */
#advantage { position: relative; z-index: 1; padding-bottom: 140px; }
#advantage::before { position: absolute; content: ''; left: 0; top: 0; bottom: -100px; width: 100%; background: url("data:image/svg+xml,%3Csvg width='1919' height='801' viewBox='0 0 1919 801' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.5' d='M1670.04 73.0202C1740.88 33.4092 1867.53 7.8355 1922 0V798.229C1911.11 802.73 1858.18 805.031 1733.63 778.223C1577.94 744.714 1560.7 668.201 1383.03 643.194C1164.83 612.484 1196.44 725.709 1016.39 683.697C836.332 641.686 843.159 589.577 713.919 562.155C579.647 533.666 496.884 612.262 363 582C203.137 545.865 68.5797 428.118 6.77926 360.099C-55.0212 292.081 322.912 172.048 442.354 133.037C561.795 94.026 820.882 25.0069 1016.39 37.0102C1211.89 49.0135 1318.85 128.536 1403.83 149.041C1488.8 169.547 1581.5 122.534 1670.04 73.0202Z' fill='url(%23paint0_linear_602_902)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_602_902' x1='258.735' y1='208.558' x2='1918.88' y2='62.7344' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F1F6FF'/%3E%3Cstop offset='1' stop-color='%23C8E6FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") no-repeat right bottom; background-size: 100% auto; }
.advantageList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 50px 55px; }
.advantageList li { position: relative; top: 0; flex: 1 0 430px; padding: 30px; box-sizing: border-box; border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 0 15px 0 #D4E3FF; perspective: 1000px; }
.advantageList .con { position: relative; }
.advantageList .title { font-size: 24px; font-weight: bold; line-height: 34px; text-align: left; }
.advantageList .title::before { float: left; margin-right: 20px; width: 32px; height: 32px; content: ''; background: url(../img/icons-advantage.png) no-repeat 0 0; background-size: auto 96px; }
.advantageList .intro { position: relative; margin-top: 20px; font-size: 16px; color: #333; line-height: 32px; text-indent: 2em; text-align: justify; }
.advantageList .intro p { margin-bottom: 1.1em; }
.advantageList .intro p:last-of-type { margin-bottom: 0; }

.advantageList .li2 .title::before { background-position: -32px 0; }
.advantageList .li3 .title::before { background-position: -64px 0; }
.advantageList .li4 .title::before { background-position: -96px 0; }
.advantageList .li5 .title::before { background-position: -128px 0; }


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

.advantageList li:hover { top: -10px; box-shadow: 0 10px 15px rgba(7, 68, 126, 0.15); background: #2C64D7; }
.advantageList li:hover .title::before { animation: icon 1.4s ease 1; }
.advantageList li:hover .title { color: #fff; }
.advantageList li:hover .intro { color: #fff; }

.advantageList .li1:hover .title::before { background-position: 0 -64px; }
.advantageList .li2:hover .title::before { background-position: -32px -64px; }
.advantageList .li3:hover .title::before { background-position: -64px -64px; }
.advantageList .li4:hover .title::before { background-position: -96px -64px; }
.advantageList .li5:hover .title::before { background-position: -128px -64px; }

/* 功能清单 */
.functionList { display: flex; flex-wrap: wrap; gap: 40px; }
.functionList li { position: relative; flex: 1 0 680px; }
.functionList li:first-of-type { margin-top: 0; }
.functionList .con { position: relative; height: 100%; background: linear-gradient(180deg, #EAEEFF 2.81%, #FFFFFF 22.24%); box-shadow: 0 0 15px 0 #D4E3FF; border-radius: 20px; overflow: hidden; }
.functionList .title { position: relative; z-index: 1; padding: 0 40px; font-weight: bold; font-size: 24px; line-height: 80px; color: #fff; background: url(../img/bg-hd.png) no-repeat right center; background-size: auto 100%; }
.functionList .title::before { position: absolute; z-index: -1; content: ''; left: 0; top: 0; right: 140px; bottom: 0; background: linear-gradient(90deg, #507AFE 0%, #78affe 100%); }
.functionList .intro { padding: 26px 40px; font-size: 16px; color: #333; line-height: 2; text-align: justify; }
.functionList .intro p { position: relative; padding-left: 16px; margin-bottom: 0.6em; }
.functionList .intro p:last-of-type { margin-bottom: 0; }
.functionList .intro p::before { position: absolute; left: 0; top: 13px; content: ''; width: 6px; height: 6px; background: #80A2FB; border-radius: 50%; }

.functionList .li3 { flex-basis: 100%; }
.functionList .li3 .intro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.functionList .li3 .intro p { flex: 0 0 44%; margin-bottom: 0; }

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

.functionList li:hover .con { transform: translateY(-15px); }

/* 底部通用 */
.lxss a,
.lxss a.sq { background-color: #507AFE; }
.lxss a:hover,
.lxss a.sq:hover { background-color: #2C64D7; }


/* 动画 */
@keyframes banner {
    0% {
        background-position: 0 bottom;
    }
    100% {
        background-position: -1920px bottom;
    }
}
@keyframes icon {
    0% {
        transform: scale(3);
        opacity: 0;
    }
    30% {
        transform: scale(1);
        opacity: 1;
    }
    40% {
        transform: scale3d(1, 1, 1);
    }
    45%, 50% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg);
    }
    60%, 70%, 80%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
    }
    65%, 75%, 85% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}


@keyframes tada {
    0% {
        transform: scale3d(1, 1, 1);
    }
    10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
    }
    40%, 60%, 80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
}