﻿@charset "utf-8";

body { position: relative; min-width: 1400px; }

/* 重置 */
.wrap { position: static; }
/*#header { display: none; }*/
#footer { font-weight: 400; }
@font-face { font-family: 'font-webicon'; src: url('../font-webicon/iconfont.eot'); src: url('../font-webicon/iconfont.woff2') format('woff2'), url('../font-webicon/iconfont.woff') format('woff'), url('../font-webicon/iconfont.ttf') format('truetype'); }

/* row ---------------------------------------------------- */
.row { min-width: 1400px; clear: both;  }
.container { max-width: 1400px; margin: 0 auto; overflow: hidden; }
.content-manage { font-size: 16px; font-weight: 400; background-color: #fff; }

/* btn-more */
.btn-more-kzzd,
.btn-more { display: inline-block; color:#6e8cd7; transition: all 0.5s; vertical-align: top; line-height: 32px; border-radius: 10px; padding: 0 20px 0 15px; text-decoration: underline;/*background: linear-gradient(90deg, rgba(166, 174, 238, 1) 0%, rgba(117, 148, 230, 1) 100%);*/}
.btn-more-kzzd::before,
.btn-more::before { display: inline-block; content: "\E794"; font-family: "font-webicon"; font-size: 28px; margin-right: 5px; vertical-align: top; }
.btn-more-kzzd:hover,
.btn-more:hover { background: linear-gradient(0deg, rgba(166, 174, 238, 1) 0%, rgba(117, 148, 230, 1) 100%); color: #fff;  text-decoration: none;}

/* 弹窗 */
.pop-up-kzzd,
.pop-up { position: fixed; display: none; width: 900px; padding: 30px 35px; border-radius: 30px; box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.2); background-color: #fff; left: 50%; top: 50%; transform: translate(-50%, -50%);  z-index: 99; }
.pop-title { line-height: 40px; height: 40px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pop-title h3 { font-weight: bold; text-indent: 0; font-size: 20px; line-height: 1.5; padding-right: 20px; min-width: 0; flex: 1 0 0%; }
.pop-title .close { cursor: pointer; text-indent: 0; width: 30px; height: 30px; text-align: center; line-height: 28px; border: 1px solid #848282; border-radius: 100%; box-sizing: border-box; transition: all 0.5s;}
.pop-title .close::before { font-family: "font-webicon"; font-size: 20px; display: block; content: "\E800"; font-weight: 500; color: inherit;}
.pop-title .close:hover { transform: rotate(360deg); color: #353f8f; border-color: #353f8f; }
.pop-up .list li { text-indent: 2em;}
.pop-up .list li::before { display: none; }

.pop-up-kzzd.on { display: block; }
.body-up::after { display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; opacity: 0.5; z-index: 9; }

/* title-bar */
.title-bar { text-align: center; font-size: 40px; margin-bottom: 50px; position: relative; font-weight: bold; line-height: 1.1; display: flex; justify-content: center; align-items: center; }
.title-bar i { content: ""; width: 150px; height: 8px; position: relative; }
.title-bar i.line-left { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(236, 238, 255, 1) 100%); }
.title-bar i.line-right { background: linear-gradient(90deg, rgba(236, 238, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); }
.title-bar i::before { content: "\E796"; color: #353f8f; font-family: "font-webicon"; font-size: 18px; display: block; position: absolute; top: 50%; transform: translateY(-50%); }
.title-bar i.line-left::before { right: -8px; }
.title-bar i.line-right::before { left: -8px; }
.title-bar span { padding: 0 25px; color: #353F8F; }


/* manage-header----------------------------------------------- */
.manage-header { position: relative; }

/* logo-box */
.logo-box { position: absolute; top: 41px; left: 0; width: 100%; min-width: 1400px; z-index: 2; }
.logo-box .container { display: flex; align-items: center; justify-content: space-between; height: 50px;  overflow: visible;}
.logo-box .logo { animation: moveTop 2s ease; display: block; height: 50px;}
.logo-box .logo img { max-height: 50px; width: auto;
	image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
 }

/* links */
.links { display: flex; min-width: 0; animation: moveTop 2s ease; }
.links a { padding: 0 24px; transition: 0.5s; display: block; font-weight: 400; line-height: 36px; box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.16); margin-left: 10px; color: #fff; background-color: rgba(0, 0, 0, 0.37); border-radius: 40px; float: left;}
.links a:hover { background-color: rgba(0, 0, 0, 0.5);  }

/* 大图 */
.banner { position: relative; min-width: 1400px; overflow: hidden; text-align: center; clear: both; z-index: 1; background: url(../img/banner.jpg) no-repeat center; height: 760px; background-size: auto 760px;}
.banner .pic img { width: 100%; height: auto; }
.banner .con { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center; width: 1200px; }
.banner .con .title { font-size: 90px; font-weight: bold; line-height: 1.5; letter-spacing: 20px; text-shadow: 1px 6px 10px rgba(30, 41, 147, 0.61); margin-bottom: 20px; }
.banner .con .title a { color: inherit; }
.banner .con .intro { display: block; font-size: 18px; line-height: 2; font-weight: 300; }
.banner .con .intro .p1{ font-size:32px; text-shadow: 1px 6px 10px  rgba(30, 41, 147, 0.61); }
.banner .con .intro .p2{ background-color: rgba(37, 58, 161, 0.6); border-radius: 10px; margin: 30px auto;  padding: 12px 50px;  color: #fffa96;  display: inline-block;position: relative;}


/* manage-content----------------------------------------------- */
.manage-content {  }

/* row-about ----------- */
.row-about { padding: 0;}
.row-about .container { overflow: visible; }

/* box-about */
.box-about { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.box-about .intro { width: 600px; line-height: 2.2; font-size: 18px; text-indent: 2em; text-align: justify; }
.box-about .pic { width: 451px; }
.box-about .title {  flex: 1 0 0%; min-width: 0; position: relative; }
.box-about .title::before { width: 1px; height: 130px; background-color: #e5e5e5; display: block; content: ""; position: absolute; top: -78px; left: 50%; transform: translateY(-50%); }
.box-about .title::after { display: block; content: ""; width: 11px; height: 11px; background-color: #d9d9d9; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); border-radius: 100%; }
.box-about .title h3 { font-size: 40px; font-weight: bold; color: #353F8F; width: 50px; text-align: center; line-height: 1.2; margin: 0 auto; }

/* box-num */
.box-num { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
.box-num>li { width: 220px; height: 220px; }
.box-num .title { width: 100%; height: 100%; cursor: pointer; box-sizing: border-box; padding: 65px 0; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; flex-wrap: wrap; overflow: hidden; }
.box-num .title::before { background: url(../img/circle.png) no-repeat center; position: absolute; top: 0; left: 0; display: block; content: ""; width: 100%; height: 100%; animation: circle 10s linear infinite; }
.box-num .title h3 { font-weight: bold; font-size: 40px; color: #B1322E; line-height: 40px; width: 100%; }
.box-num .title span.name { line-height: 1; }
.box-num .inner { padding: 25px 100px; display: none; align-items: center; justify-content: space-between; width: 1200px; left: 0; top: 100%; position: absolute; min-height: 100px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(241, 244, 255, 1) 100%); box-shadow: 0px 0px 18px  rgba(22, 52, 104, 0.17); }
.box-num .inner>h3 { width: 200px; border-right: 1px solid #F1E6E6; padding-right: 20px; margin-right: 50px; display: flex; flex-wrap: wrap; justify-content: center; text-align: center;}
.box-num .inner>h3 .num { font-size: 40px; font-weight: bold; color: #B1322E; width: 100%; margin-bottom: 15px; }
.box-num .inner>h3 .name { font-weight: normal; font-size: 16px; }
.box-num .inner .intro { flex: 1 0 0%; min-width: 0; line-height: 32px; text-indent: 2em; }
.box-num .inner .intro a { text-indent: 0; margin-right: 10px; }
.box-num svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.box-num li svg g path { transition: 0.5s; }
.box-num li.on svg g path{ stroke: #B1322E; }
.box-num li.on .inner { display: flex; animation: moveTop1 0.5s ease; z-index: 3; }


/* row-cols-1 */
.row-cols-1 {background: url(../img/row-cols-bg.jpg) no-repeat center top;background-size: 100% 100%;padding-bottom: 0;padding-top: 50px;}
.row-cols-1 .title-bar { margin-bottom: 20px; }
.row-cols-1 .container { max-width: 1200px; }

.in-list li { border-radius: 5px; font-size: 15px; line-height: 30px; height: 30px; text-align: center; border: 1px solid #E0E6F2; background-color: #fff; color: #3562B3;}

/* box-block */
.box-block { margin-bottom: 15px; }
.box-block .hd { line-height: 50px; height: 50px; text-align: center; background-color: #2060D1; border-radius: 10px; position: relative; }
.box-block .hd h3 { font-weight: bold; font-size: 18px; color: #fff;}
.box-block .bd { border: 1px solid #E3E9F3; padding: 15px; border-radius: 10px; }
.box-block .in-list { display: flex; gap: 6px; flex-wrap: wrap; }
.box-col-1,
.box-col-3 { display: flex; justify-content: space-between; gap: 50px; }
.box-col-1 { margin-bottom: 15px; }
.box-col-1 .in-box { flex-shrink: 0; flex: 1; position: relative; padding: 20px; box-sizing: border-box; position: relative;  }
.box-col-1 .in-box i::before,
.box-col-1 .in-box i::after { display: block; content: ""; position: absolute; }
.box-col-1 .in-box i::before { z-index: 1; bottom: 0; left: 0; background: linear-gradient(90deg, #EFF5FF 0%, #EFF5FF 89.59%, #DEEAFF 99.92%); border-radius: 30px; height: 380px; width: 100%; }
.box-col-1 .in-box i::after { z-index: 0; width: 69px; height: 170px; background: url(../img/col-arrow.png) no-repeat; right: -48px; top: 60%; transform: translateY(-50%);}
.box-col-1 .in-box-last i::after { display: none; }
.box-col-1 .box-block { z-index: 2; position: relative; margin-bottom: 0;}
.box-col-1 .box-block .bd { padding: 0; border: none; }
.box-col-2 { position: relative; z-index: 2; }
.box-col-2 .in-list li { min-width: 159px; }
.box-col-3 { gap: 30px; }
.box-col-3 .box-block { flex: 1; }
.box-col-3 .in-list li { flex: auto; min-width: 130px; }
.box-col-1 .in-box:nth-child(1) { z-index: 3; }
.box-col-1 .in-box:nth-child(2) { z-index: 2; }
.box-col-1 .in-box:nth-child(3) { z-index: 1; }
.box-block .intro { position: absolute; font-size: 14px; line-height: 1.8; display: none; text-align: left; top: 50px; border-radius: 10px; box-sizing: border-box; left: 0; width: 100%; background-color: rgba(32, 96, 209, 0.8); height: auto; padding: 15px 20px; line-height: 2;}
.box-block .intro p { text-indent: 2em; color: #fff; text-align: justify; }

/* in-box */
.in-box .title { margin: 0 auto 15px; zoom: 0.7; display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; text-align: center; border-radius: 100%; position: relative; z-index: 3; box-shadow: 0px 0px 15px #81A2E5; background: linear-gradient(90deg, #2060D1 0%, #5670E7 100%); }
.in-box .title img { height: auto; }
.in-box .box-block .in-list { gap: 0; justify-content: space-between; margin-top: 4px;}
.in-box .box-block .in-list li { width: 48%; margin-top: 6px; }

/* row-advantage ----------- */
.row-advantage {background: url(../img/advantage.jpg) no-repeat center top;background-size: cover;min-height: 625px;padding-top: 50px;}
.row-advantage .container { overflow: visible; }

/* box-advantage */
.box-advantage .hd { height: 50px; line-height: 50px; background-color: #EEF0F8; border-radius: 50px; overflow: hidden; width: 1200px; margin: 0 auto 90px; }
.box-advantage .hd ul { display: flex; justify-content: space-between; }
.box-advantage .hd li { padding: 0 50px; font-size: 18px; color: #353F8F; cursor: pointer; font-weight: bold; }
.box-advantage .hd li.on { background-color: #B1322E; color: #fff; border-radius: 50px; }
.box-advantage .inner { display: flex; align-items: center; justify-content: space-between; width: 1200px; margin: 0 auto; min-height: 320px; }
.box-advantage .inner .pic { width: 400px; margin-right: 100px; text-align: center; }
.box-advantage .inner .pic img { max-width: 100%; height: auto; }
.box-advantage .inner .intro { min-width: 0; flex: 1 0 0%; padding-right: 20px; }
.box-advantage .inner .intro p { text-indent: 2em; line-height: 2; margin-bottom: 18px; }

/* row-lightspot ----------- */
.row-lightspot {padding-top: 50px;}

/* box-lightspot */
.box-lightspot { position: relative; margin-bottom: 10px; padding-top: 40px; }
.box-lightspot .hd { position: absolute; top: 0; left: 0; width: 360px; background-color: #3A6AC0; border-radius: 0 50px 50px 0; z-index: 2; }
.box-lightspot .hd h3 { display: flex; align-items: center; font-weight: bold; font-size: 18px; color: #fff; line-height: 30px; padding: 20px 40px; }
.box-lightspot>.bd { display: flex; align-items: center; justify-content: space-between; background-color: #F8F9FF; border-radius: 5px; padding: 10px 150px; }
.box-lightspot>.bd .intro { text-indent: 2em; min-width: 0; flex: 1 0 0%; line-height: 2; }
.box-lightspot>.bd .pic,
.box-lightspot>.bd .foucs-pic { padding-left: 50px; width: 400px; text-align: right;  }
.box-lightspot:nth-child(2n)>.bd .pic { padding-right: 50px; padding-left: 0; text-align: left; }
.box-lightspot:nth-child(2n) .hd { left: auto; right: 0; border-radius: 50px 0 0 50px;}
.box-lightspot-focus>.bd { padding-right: 80px; }
.box-lightspot-focus:nth-child(2n)>.bd { padding-left: 80px; margin-right: 50px; }

/* foucs-pic */
.box-lightspot>.bd .foucs-pic { padding: 0 70px; margin-left: 50px; width: 380px; }
.foucs-pic { position: relative; }
.foucs-pic .arrow { position: absolute; top: 50%; transform: translateY(-50%); }
.foucs-pic .arrow::before { display: block; content: "\E801"; font-family: "font-webicon"; font-size: 60px; color: #D6D8E8; transition: 0.5s; }
.foucs-pic .arrow:hover::before { color: #3A6AC0; }
.foucs-pic .prev { left: 0; }
.foucs-pic .next { right: 0; }
.foucs-pic .prev::before { content: "\E802"; }
.foucs-pic .in-bd img { max-width: 100%; height: auto; }


.box-lightspot:nth-child(2n)>.bd .foucs-pic  { width: 420px; margin-left: 0; margin-right: 50px;}

/* row-feature ----------- */
.row-feature { padding-top: 50px; }
.row-feature .animated { animation-fill-mode: backwards; }

/* feature-title */
.feature-title { position: relative; margin-bottom: 30px; background: url(../img/feature-bg.jpg) no-repeat center top; width: 100%; min-width: 1400px; min-height: 345px; background-size: 100% auto; }
.feature-title .title-bar { transform: translate(-50%,-50%); position: absolute; left: 50%; top: 50%;}
.feature-title .title-bar,
.feature-title .title-bar i::before,
.feature-title .title-bar span { color: #fff; }

/* list */
.list li { line-height: 32px; margin-bottom: 10px; box-sizing: border-box; text-align: justify; }
.list li::before { display: inline-block; vertical-align: top; margin-right: 10px; content: ""; width: 6px; height: 6px; background-color: #ACB7D6; border-radius: 100%; position: relative; top: 12px; }
.list .bg::after { display: block; content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; opacity: 0.5; z-index: 9; }
.body-bg { position: relative; }


/* extend */
.extend { grid-template-columns: repeat(2, 1fr); display: grid; grid-gap: 10px; font-weight: 400; }
.extend li { padding: 9px 20px; height:auto; text-align:left; background-color: #fbfbfb; font-size: 14px;}
.extend li h3{ line-height:2; font-size:18px;font-weight: bold;}
.extend li em { padding: 0 6px; }
.extend li h3,
.extend li p { text-indent: 0; }
.extend li span { white-space: nowrap; }
.extend li p { line-height: 1.8; }
.extend li::before { display: none; }

/* inner */
.inner>h3 { font-weight: bold; font-size: 18px; line-height: 30px; margin-bottom: 10px; }

/* box-feature */
.box-feature { margin-bottom: 20px; }
.box-feature .hd { border-bottom: 1px solid #e5e5e5; margin-bottom: 18px; }
.box-feature .hd h3 { font-size: 24px; font-weight: bold; display: flex; height: 26px; padding: 20px 0; align-items:center;}
.box-feature .hd h3::before { width: 26px; content: '\E781'; font-family: "font-webicon"; text-align: center; font-weight: 100; transition: 0.5s; height: 26px; background-color: #219FE6; border-radius: 100%; margin-right: 10px; line-height: 26px; color: #fff; }
.box-feature .hd h3.ico-02::before { content: '\E782'; }
.box-feature .hd h3.ico-03::before { content: '\E783'; }
.box-feature .hd h3.ico-04::before { content: '\E784'; }
.box-feature .hd h3.ico-05::before { content: '\E785'; }
.box-feature .hd h3.ico-06::before { content: '\E786'; }
.box-feature .hd h3.ico-07::before { content: '\E787'; }
.box-feature .hd h3.ico-08::before { content: '\E788'; }
.box-feature .hd h3.ico-09::before { content: '\E789'; }
.box-feature .hd h3.ico-10::before { content: '\E790'; }
.box-feature .hd h3.ico-11::before { content: '\E791'; }
.box-feature .hd h3.ico-12::before { content: '\E792'; }
.box-feature .hd h3.ico-13::before { content: '\E793'; }
.inner-right .box-feature { margin-bottom: 32px; }


/* box-feature-length */
.box-feature-length .list { display: flex; justify-content: space-between; flex-wrap: wrap; }
.box-feature-length .bd>.list>li { width: 48%; }



/* box-loop -------*/
.box-loop { display: flex; justify-content: space-between; }
.box-loop .inner-left,
.box-loop .inner-right { width: 48%; }
.box-loop.bd .inner { margin-bottom: 30px; }
.box-loop.bd .inner-left .inner { margin-bottom: 120px; }
.box-loop.bd .inner-left .inner:last-child { margin-bottom: 30px; }


/* row-relevance ----------- */
.rowTi { text-align: center; display: flex; align-items: center; justify-content: center; margin-bottom: 50px; }
.rowTi::before,
.rowTi::after { content: ""; width: 150px; height: 8px;  }
.rowTi::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(236, 238, 255, 1) 100%); }
.rowTi::after { background: linear-gradient(90deg, rgba(236, 238, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); }
.rowTi h2 { font-weight: bold; font-size: 40px; color: #353F8F; line-height: 1.1; position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.rowTi h2::before { margin-right: 25px; margin-left: -10px;}
.rowTi h2::before,
.rowTi h2::after { content: "\E796"; font-family: "font-webicon"; font-size: 18px;  }
.rowTi h2::after { margin-left: 25px; margin-right: -10px; }
#technicalSupport .row { width: 1400px; margin: 0 auto; padding: 0;}
#technicalSupport{padding: 50px 0;}


/* keyframes------------------ */
@keyframes moveLeft
{
    0%{
        opacity: 0;
        transform: translateX(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveRight
{
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveTop
{
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveTop1
{
    0%{
        opacity: 0;
        transform: translateY(-20%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes moveBottom
{
    0%{
        opacity: 0;
        transform: translateY(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

/* 旋转 */
@keyframes circle{
    50%{transform: rotate(180deg)}
}


@media (min-width:1440px) {
    body { overflow-x: hidden; }
}
