@charset "utf-8";

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

.fa { line-height: inherit; vertical-align: top; }

#header { display: none;}
#headerChannel{ position:relative; width:100%; height: 710px; background: url(../img/bg-banner.jpg) no-repeat center bottom; background-size: cover; overflow: hidden; }
#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 rgba(238, 238, 238, 0.3); 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: #2C6ED3; border-color: #2C6ED3; }

#headerChannel .bgs { position: absolute; left: 100%; top: 100%; width: 1000px; height: 500px; margin: -140px 0 0 -830px; transform-origin: center top; transform: rotate(-34deg); }
#headerChannel .bgs span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(244, 244, 244, 0.55); animation-name: bgBanner; }
#headerChannel .bgs span:nth-of-type(2) { top: 60px; }
#headerChannel .bgs span:nth-of-type(3) { top: 120px; }

#headerChannel .con { position: absolute; left: 0; top: 250px; right: 500px; line-height: 1.3; color: #fff; text-align: left; }
#headerChannel .con h1 { font-size: 80px; font-weight: bold; }
#headerChannel .con h3 { margin-top: 50px; font-size: 18px; }
#headerChannel .pics > div { background-size: contain; }
#headerChannel .pics { position: absolute; right: 38px; top: 152px; width: 442px; height: 424px; }
#headerChannel .p-01 { position: absolute; left: 41px; bottom: 75px; width: 53px; height: 58px; background: url(../img/pic-01.png) no-repeat; }
#headerChannel .p-02 { position: absolute; left: 133px; bottom: 0; width: 77px; height: 84px; background: url(../img/pic-02.png) no-repeat; }
#headerChannel .p-03 { position: absolute; right: 0; top: 0; width: 396px; height: 409px; background: url(../img/pic-03.png) no-repeat; }
#headerChannel .p-04 { position: absolute; right: 139px; top: 178px; width: 76px; height: 213px; background: url(../img/pic-04.png) no-repeat; }
#headerChannel .p-05 { position: absolute; left: 0; top: 51px; width: 131px; height: 181px; background: url(../img/pic-05.png) no-repeat; }


.rowBox { margin-top: 60px; }
.rowBox:first-of-type { margin-top: 0; }
.rowBox > .hd { position: relative; text-align: left; font-size: 0; line-height: 1; }
.rowBox > .hd h3 { position: relative; display: inline-block; vertical-align: top; min-width: 400px; font-size: 40px; font-weight: bold; line-height: 160px; color: #fff; background: linear-gradient(90deg, #306EF3 0%, #6893F1 100%); border-radius: 10px; text-align: center; }
.rowBox > .hd h3::before { position: absolute; left: 50px; top: -20px; content: ''; width: 74px; height: 51px; background: url(../img/icon-01.png) no-repeat center center; background-size: contain; }
 .rowBox > .hd h3 span { display: block; background: linear-gradient(180deg, #FFFFFF 50%, rgba(255, 255, 255, 0.8) 50%); -webkit-text-fill-color: transparent; -webkit-background-clip: text; }
 .rowBox > .bd { position: relative; margin-top: -20px; }
 .rowBox > .bd > .intro { background: #fff; border-radius: 20px; padding: 50px; font-size: 20px; line-height: 36px; text-indent: 2em; text-align: justify; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05); }
 .rowBox > .bd > .intro p { margin-bottom: 20px; }
 .rowBox > .bd > .intro p:last-of-type { margin-bottom: 0; }
 .rowBox > .bd > .pic { background: #fff; border-radius: 20px; padding: 50px; text-align: center; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05); }
 .rowBox > .bd > .pic img { max-width: 900px; height: auto; border: 1px solid #3B3B3B; border-radius: 10px; }

/* 产品优势列表 */
.advantagesList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.advantagesList li { position: relative; flex: 1 0 440px; padding: 40px; box-sizing: border-box; background: #fff; border-radius: 10px; }
.advantagesList .pic { position: relative; margin: 0 auto; width: 120px; height: 120px; }
.advantagesList .pic::after { position: relative; display: block; content: ''; width: 100%; height: 100%; background: url(../img/icons-cpys.png) no-repeat 0 0; background-size: auto 100%; }
.advantagesList .pic svg { position: absolute; left: 0; top: 0; }
.advantagesList .pic svg:nth-of-type(1) { padding: 13px 20px 13px 12px; }
.advantagesList .pic svg:nth-of-type(2) { padding: 17px 10px 10px 17px; }
.advantagesList .con { margin-top: 20px; }
.advantagesList .title { position: relative; font-size: 24px; color: #333; text-align: center; line-height: 36px;text-align: justify; }
.advantagesList .intro { margin-top: 20px; font-size: 16px; color: #666; line-height: 36px; text-indent: 2em; text-align: justify; }
.advantagesList .intro p { margin-bottom: 20px; }
.advantagesList .intro p:last-of-type { margin-bottom: 0; }

.advantagesList .li2 .pic::after { background-position: -120px 0; }
.advantagesList .li3 .pic::after { background-position: -240px 0; }
.advantagesList .li4 .pic::after { background-position: -360px 0; }
.advantagesList .li5 .pic::after { background-position: -480px 0; }

.advantagesList li,
.advantagesList .con,
.advantagesList .pic svg { transition: all ease 0.6s; }
.advantagesList li:hover .con { transform: translateY(10px); }
.advantagesList li:hover .pic svg:nth-of-type(1) { transform: rotate(120deg); }
.advantagesList li:hover .pic svg:nth-of-type(2) { transform: rotate(-120deg); }

/* 功能清单 */
#functions > .hd { text-align: right; }
.functionsList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; }
.functionsList li { flex: 1 0 100%; }
.functionsList .item { display: flex; flex-wrap: wrap; gap: 40px; background: #fff; border-radius: 20px; padding: 50px; height: 100%; box-sizing: border-box; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.05); }
.functionsList .con { flex: 1 0 0%; }
.functionsList .title span { display: inline-block; vertical-align: top; padding-top: 26px; font-size: 24px; line-height: 36px; color: #306EF3; font-weight: bold; }
.functionsList .title span::before { position: absolute; content: ''; left: 0; top: 0; width: 10px; height: 18px; background: #306EF3; transform-origin: left bottom; transform: skewX(-25deg); box-shadow: 14px 0 0 #E89933; }
.functionsList .intro { margin-top: 30px; line-height: 36px; font-size: 16px; text-align: justify; color: #666; }
.functionsList .intro p { position: relative; margin-bottom: 10px; padding-left: 22px; }
.functionsList .intro p:last-of-type { margin-bottom: 0; }
.functionsList .intro .fa { position: absolute; top: 12px; left: 0; width: 12px; height: 12px; font-size: 6px; vertical-align: middle; background: #AEC1EA; color: #fff; line-height: 12px; text-align: center; border-radius: 50%; }
.functionsList .intro .tips { margin-left: 22px; margin-bottom: 10px; background: #f9f9f9; border-radius: 10px; padding: 20px; border: 1px solid #eee; }
.functionsList .intro .tips p { padding-left: 0; margin-bottom: 0; text-indent: 2em; }

.functionsList .pics { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; }
.functionsList .pics > span { width: 500px; padding: 10px; border-radius: 10px; border: 1px solid #DEE8F2; background: #F7F9FC; }
.functionsList .pics img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 10px; }



.functionsList .li2 .pics { width: 500px; }
.functionsList .li2 .pics > span { width: auto; height: 440px; }

.functionsList .li3,
.functionsList .li4 { flex-basis: 685px; }

.functionsList .li3 .pics > span,
.functionsList .li4 .pics > span,
.functionsList .li5 .pics > span,
.functionsList .li6 .pics > span { width: auto; height: 400px; }


.functionsList .item,
.functionsList .title span,
.functionsList .title span::before { transition: all ease 0.4s; }

.functionsList li:hover .item { transform: translateX(-10px); }

/* 图片轮播 */
.picFocus { position: relative; width: 500px; height: 294px; border: 1px solid #DEE8F2; background: #F7F9FC; border-radius: 10px; }
.picFocus .bd { position: relative; height: 274px; margin: 10px; overflow: hidden; }
.picFocus .bd li { position: relative; }
.picFocus .bd li img { display: block; position: relative; width: 100%; height: 274px; border-radius: 10px; }
.picFocus .prev,
.picFocus .next { position: absolute; top: 50%; width: 30px; height: 60px; line-height: 58px; text-align: center; font-size: 18px; color: #ddd; transform: translateY(-50%); }
.picFocus .prev { right: 100%; border-radius: 4px 0 0 4px; }
.picFocus .next { left: 100%; border-radius: 0 4px 4px 0; }
.picFocus .prev:hover,
.picFocus .next:hover { background: #306EF3; color: #fff; }


/* 底部通用 */
#technicalSupport { margin-top: 80px; background: #fff; padding-bottom: 0; }
#technicalSupport .rowTi h2 { color: #306EF3; }
.techSupportList li a { background-color: #F8F9FA; border-color: #F8F9FA; box-shadow: none; }
.techSupportList li a:hover { background-color: #306EF3; border-color: #F8F9FA; }

.lxss a,
.lxss a:hover,
.lxss a.sq { background-color: #306EF3; }


/* 动画 */

@keyframes bgBanner {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}