@charset "utf-8";

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

#headerChannel{ position:relative; width:100%; height: 400px; 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 2s linear infinite reverse; }
#headerChannel .row { height: 100%; }
#headerChannel .logo-box { display: none; }
#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: 54%; right: 10px; left: 10px; line-height: 1.3; color: #fff; text-align: center; }
#headerChannel .con h1 { font-size: 32px; font-weight: bold; }
#headerChannel .con h3 { margin-top: 15px; font-size: 16px; }
#headerChannel .pics { position: absolute; right: 50%; top: 65px; width: 500px; height: 386px; transform: scale(0.32) translateX(250px);transform-origin: right top;}
#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 { text-align: center; font-size: 18px; color: #0E9B6F; line-height: 1.4; font-weight: normal; }

.rowBox {padding-top: 20px;}
.rowBox > .hd { text-align: center; font-size: 0; line-height: 1; margin-bottom: 20px; }
.rowBox > .hd h3 {position: relative;padding: 0 24px 0 28px;display: inline-block;vertical-align: top;font-size: 24px;font-weight: bold;color: #333;line-height: 40px;}
.rowBox > .hd h3 span { display: block; }
.rowBox > .hd h3::before { position: absolute; width: 16px; height: 16px; 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: 12px; height: 12px; 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: 6px; height: 6px; background: linear-gradient(180deg, #FBBADE 0%, #FDD29E 100%); border-radius: 50%; }

/* 产品亮点 */
.featuresList { display: flex; flex-wrap: wrap; flex-direction: column; align-content: stretch; gap: 15px; }
.featuresList li { position: relative; top: 0; padding: 25px 20px; box-sizing: border-box; border-radius: 10px; background: #F6FCF8; overflow:hidden; perspective: 1000px; }
.featuresList .pic { position: relative; margin: 0 auto; width: 80px; }
.featuresList .pic span { position: relative; display: block; width: 100%; height: 80px; }
.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 240px; }
.featuresList .con { position: relative; padding: 15px 0 0; }
.featuresList .title {font-size: 20px;font-weight: bold;line-height: 32px;text-align: center;color: #333;}
.featuresList .intro { position: relative; margin-top: 12px; font-size: 14px; color: #666; line-height: 26px; 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: -80px 0; }
.featuresList .li3 .pic span::after { background-position: -160px 0; }
.featuresList .li4 .pic span::after { background-position: -240px 0; }
.featuresList .li5 .pic span::after { background-position: -320px 0; }


/* 功能清单 */
.functionList::after { display: table; content: ''; clear: both; }
.functionList li { position: relative; margin: 15px; }
.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: 35px 20px 20px; }
.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: -15px; right: -15px; border-left: none; border-right: none; }
.functionList .con::after { top: -15px; bottom: -15px; border-top: none; border-bottom: none; }

.functionList .number { position: absolute; left: 25px; top: 12px; line-height: 1.15; font-size: 30px; color: #e4e4e4; font-weight: bold; }
.functionList .number span { display: block; }
.functionList .title {position: relative;z-index: 1;text-align: center;font-size: 20px;line-height: 32px;font-weight: bold;color: #333;}
.functionList .title span { display: block; }
.functionList .intro { position: relative; z-index: 1; margin-top: 15px; text-align: justify; font-size: 14px; line-height: 28px; color: #666; text-indent: 2em; }
.functionList .intro p { margin-bottom: 1em; }
.functionList .intro p:last-of-type { margin-bottom: 0; }


.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); }



/* 底部通用 */
#technicalSupport {/* margin-top: 10px; */padding-bottom: 0;background: #fff;text-align: center;overflow: visible;}
#technicalSupport .rowTi { height: 40px; line-height: 40px; position: relative; display: inline-block; vertical-align: top; padding: 0 24px 0 28px; }
#technicalSupport .rowTi::before { position: absolute; width: 16px; height: 16px; 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: 12px; height: 12px; 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: -24px; top: 0; width: 6px; height: 6px; background: linear-gradient(180deg, #FBBADE 0%, #FDD29E 100%); border-radius: 50%; }
.techSupportList li a { background: #F8F9FA; }
.techSupportList li a:hover { background: #4FB97A; }
.lxss { background: none; margin: 0 -10px; }
.lxss a,
.lxss a.sq { background-color: #139D6F; }
.wfLink a { border-color: #4FB97A; color: #139D6F; box-shadow: 0 0 15px rgba(120, 234, 187, 0.3); }


/* 动画 */
@keyframes banner {
    0% {
        background-position: 0 bottom;
    }
    100% {
        background-position: -20px bottom;
    }
}