@charset "utf-8";

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

.lxss { background: #f6faff; }

#header { display: none;}
#headerChannel{ position:relative; width:100%; height: 818px; background:#5697f8 url(../img/bg-banner.png) repeat-x center bottom -2px; animation: banner 30s 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 .con { position: absolute; left: 0; top: 326px; right: 700px; line-height: 1.3; color: #fff; text-align: center; }
#headerChannel .con h1 { font-size: 92px; font-weight: bold; }
#headerChannel .con h3 { margin-top: 15px; font-size: 18px; }
#headerChannel .pics { position: absolute; right: 150px; top: 154px; width: 501px; height: 507px; }
#headerChannel .pics > div { background-size: contain; }
#headerChannel .p-01 { position: absolute; left: 71px; bottom: 22px; width: 91px; height: 61px; background: url(../img/pic-01.png) no-repeat; }
#headerChannel .p-02 { position: absolute; right: 35px; bottom: 0; width: 76px; height: 122px; background: url(../img/pic-02.png) no-repeat; }
#headerChannel .p-03 { position: absolute; right: 0; top: 0; width: 221px; height: 298px; background: url(../img/pic-03.png) no-repeat; }
#headerChannel .p-04 { position: absolute; left: 0; top: 179px; width: 417px; height: 313px; background: url(../img/pic-04.png) no-repeat; }

.rowTitle { margin: 30px 0 70px; text-align: center; font-size: 36px; color: #1067DB; line-height: 1.4; font-weight: normal; }
.featuresList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 39px; }
.featuresList li { position: relative; top: 0; flex: 1 0 440px; padding: 30px 30px; box-sizing: border-box; border-radius: 20px; background: #fff; overflow:hidden; perspective: 1000px; }
.featuresList .pic { position: relative; margin: 0 auto; width: 120px; height: 120px; }
.featuresList .pic::before { display: block; content: ''; width: 100%; height: 100%; background: url(../img/icons.png) no-repeat 2px 9px; background-size: auto 299px; }
.featuresList .con { position: relative; padding: 45px 0 0; }
.featuresList .title { font-size: 36px; font-weight: bold; line-height: 48px; text-align: center; }
.featuresList .intro { position: relative; margin-top: 18px; font-size: 16px; color: #333; line-height: 32px; text-indent: 2em; text-align: justify; }
.featuresList .intro p { margin-bottom: 1.1em; }
.featuresList .intro p:last-of-type { margin-bottom: 0; }

.featuresList .li2 .pic::before { background-position: -173px 9px; }
.featuresList .li3 .pic::before { background-position: -335px 9px; }
.featuresList .li4 .pic::before { background-position: -499px 9px; }
.featuresList .li5 .pic::before { background-position: -666px 9px; }
.featuresList .li6 .pic::before { background-position: -832px 9px; }
.featuresList .li7 .pic::before { background-position: -998px 9px; }
.featuresList .li8 .pic::before { background-position: -1163px 9px; }
.featuresList .li9 .pic::before { background-position: -1328px 9px; }
.featuresList .li10 .pic::before { background-position: -1495px 9px; }
.featuresList .li11 .pic::before { background-position: -1658px 8px; }


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

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

.featuresList .li1:hover .pic::before { background-position: 2px -187px; }
.featuresList .li2:hover .pic::before { background-position: -173px -187px; }
.featuresList .li3:hover .pic::before { background-position: -335px -187px; }
.featuresList .li4:hover .pic::before { background-position: -499px -187px; }
.featuresList .li5:hover .pic::before { background-position: -666px -187px; }
.featuresList .li6:hover .pic::before { background-position: -832px -187px; }
.featuresList .li7:hover .pic::before { background-position: -998px -187px; }
.featuresList .li8:hover .pic::before { background-position: -1163px -187px; }
.featuresList .li9:hover .pic::before { background-position: -1328px -187px; }
.featuresList .li10:hover .pic::before { background-position: -1495px -187px; }
.featuresList .li11:hover .pic::before { background-position: -1658px -187px; }

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