@charset "utf-8";

body { position: relative; min-width: 1400px; background-color: #F6FBFF; }

/* 重置 */
.wrap { position: static; }
#header { display: none; }
#top { position: relative; z-index: 3; }
#footer { font-weight: 400; }

/* row ---------------------------------------------------- */
.row { min-width: 1400px; clear: both; padding: 50px 0; }
.container { max-width: 1400px; margin: 0 auto; }
.content-manage { font-size: 16px; font-weight: 400; text-align: left; line-height: 2; background:  url(../img/banner.jpg) no-repeat center top; min-height: 800px;}


/* 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;}
.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 { min-width: 1400px; position: relative; clear: both; height: 640px; }
.banner .con { position: absolute; left: 0; top: 50%;  transform: translateY(-50%); width: 100%; color: #fff; text-align: center; }
.banner .con .title { font-size: 92px; font-weight: bold; display: flex; align-items: center; justify-content: center; line-height: 1.5; letter-spacing: 0.2em; animation: moveLeft 1.5s ease; margin-bottom: 20px; text-shadow: 0px 3px 18px rgba(0, 14, 47, 0.35); }
.banner .con .intro { display: block; font-size: 18px; letter-spacing: 0.2em; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); line-height: 2; font-weight: 300; animation: moveLeft 2s ease; }
.banner .container { position: relative; height: 100%; }


/* manage-content----------------------------------------------- */
.box-default>.hd h3 { position: relative; font-weight: 700; padding-top: 60px; justify-content: center; font-size: 40px; line-height: 2; color: #0972E7; display: flex; align-items: center;}
.box-default>.hd h3::before,
.box-default>.hd h3::after { content: ""; width: 400px; height: 20px; border-radius: 40px;  opacity: 0.2;}
.box-default>.hd h3::after { background: linear-gradient(90deg, #A3D4FF 0%, rgba(33, 86, 216, 0) 66.5%); margin-left: 20px; }
.box-default>.hd h3::before { background: linear-gradient(270deg, #A3D4FF 0%, rgba(33, 86, 216, 0) 66.5%); margin-right: 20px; }
.box-default>.hd h3 span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 120px; line-height: 1; font-family: 思源黑体; z-index: -1;
    background: linear-gradient(180deg, #B9D6FF 0%, rgba(185, 214, 255, 0) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}


/* row-about ----------- */
.row-about { padding-block: 0; }
.row-about .container { padding-bottom: 73px;  background: url(../img/shadow.png) no-repeat center bottom;}
.box-about { padding: 10px; box-sizing: border-box; border:1px solid rgba(255, 255, 255, 0.2); border-radius: 15px; background-color: rgba(255, 255, 255, 0.3); }
.box-about .bd { padding: 30px 40px; line-height: 2; border-radius: 15px; background-color: #fff;}
.box-about .bd p { text-indent: 2em; margin-bottom: 18px; line-height: 2; font-size: 20px;  }
.box-about .bd p:last-child { margin-bottom: 0; }


/* row-advantage ----------- */
.row-advantage { position: relative; padding-bottom: 60px; padding-top: 20px; }
.row-advantage::before { content:""; display: block; width: 100%; height: 200px; background-color: #EFF5FF; position: absolute; bottom: 0; left: 0; min-width: 1400px; }
.row-advantage .container { position: relative; z-index: 1; display: flex; justify-content: space-between; box-sizing: border-box; overflow: hidden; padding-block: 10px; }
.row-advantage .hd { display: flex; align-items: center; justify-content: center; line-height: 1; padding-block: 15px 25px; }
.row-advantage .hd h3 { font-size: 32px; font-weight: 700; }


/* box-chart */
.box-chart { margin-right: 120px; }
.box-chart .hd h3 { color: #1956C8;  }
.box-chart .bd { position: relative; }
.box-chart .bd .svg { position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%,-50%); width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }
.box-chart .bd .svg svg { transition: 0.5s; }
.box-chart .bd .svg:hover svg { scale: 1.2; }
.box-chart .pic { position: relative; width: 300px; height: 454px; padding: 10px; background-color: #fff; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); }
.box-chart .pic img { width: 300px; height: 454px; display: block; position: absolute; top: 10px; left: 10px;   }

#overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 1000; }
#largeImage { max-width: 100%; height: 100%; width: auto; }
#closeBtn { position: absolute; top: 40px; right: 40px; width: 70px; height:70px; font-size: 24px; cursor: pointer; outline: none; border: none; border-radius: 100%; }
#closeBtn:hover { background: #1956C8; color: #fff; }


/* box-backdrop */
.box-backdrop { flex: 1 0 0%; position: relative; min-width: 0; background-color: #dbe3f5; border-radius: 220px 20px 0px 0px; }
.box-backdrop::before { display: block; content: ""; position: absolute; bottom: 10px; left: -10px; width: 100%; height: 100%; border-radius: 220px 20px 0px 0px; z-index: -1; background: linear-gradient(256.07deg, #294FBF 7.77%, #0863CD 99.63%); }
.box-backdrop .hd { padding-block: 45px; }
.box-backdrop .hd .svg { width: 48px; height: 48px; margin-right: 15px; background-color: #fff; border-radius: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.box-backdrop .hd h3 { color: #fff; }
.box-backdrop .bd { padding-inline: 80px; color: #fff; }
.box-backdrop .bd::before { display: block; content: ""; background: url(../img/watermark.png) no-repeat; width: 320px; height: 320px; position: absolute; right: 0; bottom: 0; }
.box-backdrop .bd p { margin-bottom: 18px; text-indent: 2em; }

/* box-advantage */
.box-advantage .bd { margin-bottom: 60px; }
.box-advantage .bd ul { display: flex; justify-content: space-between; }
.box-advantage .bd li { width: 23%; }
.box-advantage .bd .in-li { transition: 0.5s; border-radius: 20px; box-sizing: border-box; height: 630px; width: 100%; padding: 40px 30px 30px; background-color: #fff;}
.box-advantage .bd .pic { margin-bottom: 30px; }
.box-advantage .bd .title { font-size: 24px; line-height: 30px; font-weight: 400; text-align: center; color: #000; margin-bottom: 30px; }
.box-advantage .bd .intro { color: #666; text-align: justify; }
.box-advantage .bd .intro p { text-indent: 2em; margin-bottom: 18px; color: #666; }
.box-advantage .bd li.on { z-index: 1; }
.box-advantage .bd li.on .in-li { box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.1); padding-top: 10px; }

/* row-lightspot ----------- */
.row-lightspot { padding-bottom: 0; background-color: #F6FBFF;}
.row-lightspot .container { overflow: hidden; padding-inline: 10px; box-sizing: border-box; }

/* box-lightspot */
.box-lightspot .bd li { padding-block: 50px 40px; }
.box-lightspot .bd li .container { display: flex; align-items: center; justify-content: space-between; }
.box-lightspot .bd li:nth-child(odd) .container .con { padding-left: 20px; }
.box-lightspot .bd li:nth-child(even) { background-color: #fff; }
.box-lightspot .bd li:nth-child(even) .container .con { padding-right: 20px; }
.box-lightspot .pic { width: 721px; box-sizing: border-box; text-align: center; }
.box-lightspot .pic img { max-width: 100%; height: 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) */
 }
.box-lightspot .bd li:last-child { background: url(../img/bg-02.jpg) no-repeat center bottom; background-size: cover; }
.box-lightspot .con { flex: 1 0 0%; min-width: 0; }
.box-lightspot .title {  margin-bottom: 40px; display: flex; align-items: center; }
.box-lightspot .title .svg { width: 50px; display: flex; align-items: center; justify-content: center; margin-right: 20px; height: 50px; border-radius: 14px; background: linear-gradient(180deg, #006DFF 0%, #3F91FF 100%); box-shadow: 0px 5px 10px rgba(0, 28, 58, 0.15);}
.box-lightspot .title h3 { font-weight: bold; font-size: 24px; color: #3B3A3A; flex: 1 0 0%; min-width: 0; }
.box-lightspot .intro { text-align: justify; padding-left: 45px; }
.box-lightspot .intro p { margin-bottom: 18px; color: #666; background: url(../img/dot.png) no-repeat left 6px; padding-left: 25px; }
.box-lightspot .intro p:last-child { margin-bottom: 0; }


/* row-list ----------- */
.row-list { padding-top: 0; padding-bottom: 70px; background: linear-gradient(270deg, #CAD9FF 0%, #E4FAFF 100%); }

/* box-list */
.box-list>.hd { background: url(../img/bg-03.jpg) no-repeat center; background-size: cover; height: 200px; box-sizing: border-box; padding-top: 20px; margin-bottom: 60px; }
.box-list>.hd h3 { color: #fff; }


/* box-list-in */
.box-list-in { padding: 40px 30px; background-color: #fff; border-radius: 20px; box-shadow: 0px 0px 10px rgba(0, 27, 89, 0.08); margin-bottom: 30px; display: flex;justify-content: space-between;}
.box-list-in .pic { width: 100px; height: 100px; margin-right: 40px; background-color: #FAFAFA; border-radius: 100%; position: relative;}
.box-list-in .pic svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.box-list-in .con { flex: 1 0 0%; min-width: 0; }
.box-list-in .title { font-size: 24px; line-height: 1.5; margin-bottom: 20px; font-weight: 400; color: #004695;}
.box-list-in .intro { color: #666; }
.box-list-in .intro p { line-height: 2; margin-bottom: 18px; box-sizing: border-box; text-align: justify; position: relative; padding-left: 16px; transition: 0.5s; }
.box-list-in .intro p::before { content: ""; width: 5px; height: 5px; background-color: #666; border-radius: 100%; position: absolute; left: 0; top: 14px; transition: 0.5s; }
.box-list-in .intro p:hover { color: #195681; }
.box-list-in .intro p:hover::before { background-color: #195681; }
.box-list-in:last-child,
.box-list-in .intro p:last-child { margin-bottom: 0; }


/* js-tab */
.js-tab .hd { border-bottom: 1px solid #eee; }
.js-tab .hd ul { display: flex; justify-content: space-between; }
.js-tab .hd li { width: 25%; text-align: center; line-height: 76px; font-size: 20px; font-weight: 400; cursor: pointer; position: relative; }
.js-tab .hd li span { display: inline-block; }
.js-tab .hd li::after { display: block; content: ""; position: absolute; bottom: -3px; left: 50%; transform: scale(0); margin-left: -50px; width: 100px; transition: 0.5s; height: 5px; border-radius: 10px; background: linear-gradient(90deg, #0070FF 0%, #6AB9FF 100%);}
.js-tab .hd li.on span { color: #167fff; }
.js-tab .hd li.on::after { transform: scale(1); }
.js-tab .bd {background: url(../img/intro-bg.png) no-repeat center top;border-top: 1px solid #fff;padding-top: 30px;transition: all 1s;}
.js-tab .bd .title-01 { padding-left: 10px; padding-right: 10px; }
.js-tab .bd .title-01::before { display: none; }

/* row-relevance ----------- */
#technicalSupport .row { width: 1400px; margin: 0 auto; padding: 0;}
.rowTi h2 { color: #0972E7; }

.lxss .row { padding: 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; }
}



@keyframes path {
    0% {
        stroke-dashoffset: 220;
    }

    100% {
        stroke-dashoffset: 0;
    }
}