@charset "utf-8";

/* frame */
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: 600px; background: url(../img/bg-banner.jpg) no-repeat center bottom; background-size: cover; }
#headerChannel::before { position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 26px; background: url(../img/bg-01.png) repeat-x left bottom -2px; animation: banner 1.2s linear infinite reverse; }
#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: #109C6F;}

#headerChannel .con { position: absolute; left: 0; top: 247px; right: 650px; 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: 155px; width: 500px; height: 386px; }
#headerChannel .pics > div { background-size: contain; }
#headerChannel .p-01 { position: absolute; z-index: 2; left: 49px; top: 29px; width: 104px; height: 77px; background: url(../img/pic-01.png) no-repeat; }
#headerChannel .p-02 { position: absolute; z-index: 2; left: 0; top: 60px; width: 137px; height: 280px; background: url(../img/pic-02.png) no-repeat; }
#headerChannel .p-03 { position: absolute; z-index: 1; left: 72px; top: 29px; width: 296px; height: 313px; background: url(../img/pic-03.png) no-repeat; }
#headerChannel .p-04 { position: absolute; z-index: 1; left: 147px; top: 157px; width: 73px; height: 229px; background: url(../img/pic-04.png) no-repeat; }
#headerChannel .p-05 { position: absolute; right: 132px; bottom: 7px; width: 81px; height: 51px; background: url(../img/pic-05.png) no-repeat; }
#headerChannel .p-06 { position: absolute; right: 0; top: 0; width: 299px; height: 264px; background: url(../img/pic-06.png) no-repeat; }


.rowTitle { margin: 30px 0 70px; text-align: center; font-size: 36px; color: #0E9B6F; line-height: 1.4; font-weight: normal; }

.rowBox { margin-top: 66px; }
.rowBox > .hd { text-align: center; font-size: 0; line-height: 1; margin-bottom: 55px; }
.rowBox > .hd h3 { position: relative; padding: 0 38px 0 43px; display: inline-block; vertical-align: top; font-size: 40px; font-weight: bold; color: #333; line-height: 50px; }
.rowBox > .hd h3 span { display: block; }
.rowBox > .hd h3::before { position: absolute; width: 24px; height: 24px; content: ''; left: 0; bottom: 0; background: linear-gradient(180deg, #FBBADE 0%, #FDD29E 100%); border-radius: 50%; }
.rowBox > .hd h3::after { position: absolute; content: ''; right: 2px; top: 0; width: 20px; height: 20px; background: linear-gradient(180deg, #A4D9F7 0%, #ACA2E4 100%);border-radius: 50%; }
.rowBox > .hd h3 span::after { position: absolute; z-index: 1; content: ''; right: 0; top: 0; width: 10px; height: 10px; background: linear-gradient(180deg, #FBBADE 0%, #FDD29E 100%); border-radius: 50%; }

/* 产品亮点 */
.featuresList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 39px; }
.featuresList li { position: relative; top: 0; flex: 1 0 440px; padding: 40px; box-sizing: border-box; border-radius: 10px; background: #F6FCF8; overflow:hidden; perspective: 1000px; }
.featuresList .pic { position: relative; margin: 0 auto; width: 100px; }
.featuresList .pic span { position: relative; display: block; width: 100%; height: 100px; }
.featuresList .pic span::before { display: block; content: ''; width: 100%; height: 100%; background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); border-radius: 50%; }
.featuresList .pic span::after { position: absolute; left: 0; top: 0; display: block; content: ''; width: 100%; height: 100%; background: url(../img/icons-features.png) no-repeat 0 0; background-size: auto 300px; }
.featuresList .con { position: relative; padding: 45px 0 0; }
.featuresList .title { font-size: 24px; font-weight: bold; line-height: 42px; text-align: center; color: #333; }
.featuresList .intro { position: relative; margin-top: 20px; font-size: 16px; color: #666; 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 span::after { background-position: -100px 0; }
.featuresList .li3 .pic span::after { background-position: -200px 0; }
.featuresList .li4 .pic span::after { background-position: -300px 0; }
.featuresList .li5 .pic span::after { background-position: -400px 0; }

.featuresList .li4 .intro,
.featuresList .li5 .intro { text-align: center; text-indent: 0; }

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

.featuresList li:hover { top: -10px; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); background: linear-gradient(180deg, #4fb97a, #58b97f); }
.featuresList li:hover .pic span { animation: bgIcon 0.4s ease 1;  }
.featuresList li:hover .pic span::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%); }
.featuresList li:hover .pic span::after { animation: icon 0.7s ease 1 0.4s; }
.featuresList li:hover .title { color: #fff; }
.featuresList li:hover .intro { color: #fff; }


/* .featuresList .li1:hover { background: linear-gradient(180deg, #5c9aff, #74a9ff); }
.featuresList .li2:hover { background: linear-gradient(180deg, #4ed48f, #57c78d); }
.featuresList .li3:hover { background: linear-gradient(180deg, #f1b016, #eeb124); }
.featuresList .li4:hover { background: linear-gradient(180deg, #4bc1e2, #5ac1dd); }
.featuresList .li5:hover { background: linear-gradient(180deg, #FD6B6B, #fc7c7c); } */

.featuresList .li1:hover .pic span::after { background-position: 0 -200px; }
.featuresList .li2:hover .pic span::after { background-position: -100px -200px; }
.featuresList .li3:hover .pic span::after { background-position: -200px -200px; }
.featuresList .li4:hover .pic span::after { background-position: -300px -200px; }
.featuresList .li5:hover .pic span::after { background-position: -400px -200px; }

/* 功能清单 */
.functionList { margin: 0 -20px; }
.functionList::after { display: table; content: ''; clear: both; }
.functionList li { float: left; position: relative; width: 440px; margin: 20px; }
.functionList li::after { position: absolute; content: ''; width: 90px; left: 0; right: 0; margin: auto; top: 0; background: #FD6B6B; height: 5px; border-radius: 0 0 3px 3px; box-shadow: 0px 4px 10px 0px rgba(253, 107, 107, 0.25); }
.functionList .con { position: relative; padding: 44px 32px 30px; }
.functionList .con::before,
.functionList .con::after { position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid #f1f1f1; }

.functionList .con::before { left: -40px; right: -40px; border-left: none; border-right: none; }
.functionList .con::after { top: -40px; bottom: -40px; border-top: none; border-bottom: none; }

.functionList .number { position: absolute; left: 35px; top: 18px; line-height: 1.15; font-size: 40px; color: #e4e4e4; font-weight: bold; }
.functionList .number span { display: block; }
.functionList .title { position: relative; z-index: 1; text-align: center; font-size: 24px; line-height: 32px; font-weight: bold; }
.functionList .title span { display: block; }
.functionList .intro { position: relative; z-index: 1; margin-top: 40px; text-align: justify; font-size: 16px; line-height: 32px; color: #666; text-indent: 2em; }
.functionList .intro p { margin-bottom: 1.1em; }
.functionList .intro p:last-of-type { margin-bottom: 0; }

.functionList .li3 { float: right; }
.functionList .li6 { width: 920px; }

.functionList .li1 .con,
.functionList .li2 .con { height: 300px; }
.functionList .li3 .con { height: 1045px; }
.functionList .li4 .con,
.functionList .li5 .con { height: 331px; }

.functionList .li2::after { background: #fd8f6a; box-shadow: 0px 4px 10px 0px rgba(253, 143, 106, 0.25); }
.functionList .li3::after { background: #fddb60; box-shadow: 0px 4px 10px 0px rgba(253, 219, 96, 0.25); }
.functionList .li4::after { background: #29e09c; box-shadow: 0px 4px 10px 0px rgba(41, 224, 156, 0.25); }
.functionList .li5::after { background: #5caaf0; box-shadow: 0px 4px 10px 0px rgba(92, 170, 240, 0.25); }
.functionList .li6::after { background: #a179e4; box-shadow: 0px 4px 10px 0px rgba(161, 121, 228, 0.25); }

.functionList .title span,
.functionList .intro p,
.functionList .number span { transition: all ease 0.7s; }



.functionList li:hover .title span,
.functionList li:hover .intro p { transform: translateY(-10px); }
.functionList li:hover .number span { animation: flip 0.8s ease 1; }


/* 底部通用 */
#technicalSupport { margin-top: 30px; padding-bottom: 0; background: #fff; text-align: center; }
#technicalSupport .rowTi { height: 50px; line-height: 50px; position: relative; display: inline-block; vertical-align: top; padding: 0 38px 0 43px; }
#technicalSupport .rowTi::before { position: absolute; width: 24px; height: 24px; content: ''; left: 0; bottom: 0; background: linear-gradient(180deg, #FBBADE 0%, #FDD29E 100%); border-radius: 50%; }
#technicalSupport .rowTi::after { position: absolute; content: ''; right: 2px; top: 0; width: 20px; height: 20px; background: linear-gradient(180deg, #A4D9F7 0%, #ACA2E4 100%);border-radius: 50%; }
#technicalSupport .rowTi h2 { position: relative; z-index: 1; }
#technicalSupport .rowTi h2::before{ position: absolute; content: ''; right: -38px; top: 0; width: 10px; height: 10px; background: linear-gradient(180deg, #FBBADE 0%, #FDD29E 100%); border-radius: 50%; }
.techSupportList li a { background-color: #F8F9FA; }
.techSupportList li a:hover { background-color: #4FB97A; }
.lxss a,
.lxss a.sq { background-color: #139D6F; }


/* 动画 */
@keyframes banner {
    0% {
        background-position: 0 bottom;
    }
    100% {
        background-position: -20px bottom;
    }
}
@keyframes bgIcon {
    0% {
        transform: scale(3);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


@keyframes icon {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}