@charset "utf-8";

body { position: relative; min-width: 1400px; background:#e9e8ed url(../img/bg.jpg) no-repeat center fixed; background-size: cover; }

/* 重置 */
.wrap { position: static; }
#header { display: none; }
#top { position: relative; z-index: 3; }
#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; padding: 50px 0; }
.container { max-width: 1400px; margin: 0 auto; }
.content-manage { font-size: 16px; font-weight: 400; text-align: left; line-height: 2; }


/* 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: 945px; }
.banner svg { position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.banner .con { position: absolute; left: 0; top: 42%; transform: translateY(-50%); width: 665px; color: #fff; }
.banner .con .title { font-size: 80px; font-weight: bold; line-height: 1.5; animation: moveLeft 2s ease; margin-bottom: 20px;}
.banner .con .title span { padding: 0 10px; }
.banner .con .intro { display: block; font-size: 18px; line-height: 2; font-weight: 300; animation: moveLeft 3s ease;  }
.banner .con .intro p { text-indent: 2em; }
.banner .pic { position: absolute; width: 583px; height: 583px; right: 0; bottom: 168px; opacity: 0; }
.banner .pic p { position: absolute; font-weight: 400; }
.banner .pic p 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) */
 }
.banner .pic p.cloud { right: 67px; top: 0; width: 98px;}
.banner .pic p.freepik { right: 0; top: 71px; z-index: 3; width: 242px; }
.banner .pic p.group { left: 0; top: 3px; width: 396px; } 
.banner .container { position: relative; height: 100%; }

/* box-default */
.box-default>.hd { margin-bottom: 50px; text-align: center; }
.box-default>.hd h3 { position: relative; text-align: center; font-weight: 700; font-size: 40px; line-height: 2.3; display: inline-block;
    background: linear-gradient(90deg, #216693 0%, #0A1F2D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.box-default>.hd h3::after {  background-color: #8da8bb; width: 45px; height: 5px; display: block; content: ""; margin: 0 auto; }

/* manage-content----------------------------------------------- */
.title-bar { text-align: center; padding-bottom: 30px; }
.title-bar h3 { position: relative; text-align: center; font-weight: 700; font-size: 40px; line-height: 2.3; display: inline-block;
    background: linear-gradient(90deg, #E14FAD 0%, #F9D423 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}


/* box-pic ----------------------------- */
.box-pic { display: flex; align-items: center; justify-content: space-between;}

/* box-focus */
.box-focus { width: 600px; height: 500px; position: relative; padding: 0 50px; }
.box-focus .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: transparent; text-align: center; line-height: 50px; transition: 0.5s; }
.box-focus .arrow::after { display: block; content: "\E844"; font-family: "font-webicon"; font-size: 40px; color: #9C9C9C; }
.box-focus .arrow:hover { background: linear-gradient(90deg, #E14FAD 0%, #F9D423 100%); }
.box-focus .prev { left: 0; }
.box-focus .next { right: 0; }
.box-focus .next::after { content: "\E845"; }
.box-focus .arrow:hover::after { color: #fff; }
.box-focus .bd { background-color: #F3F3F3; border-radius: 30px; }
.box-focus .bd li { position: relative; height: 500px; width: 600px; }
.box-focus .bd .pic { text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.box-focus .bd img { max-height: 279px; max-width: 510px; box-shadow: 0px 12px 24.7px 17px rgba(0, 0, 0, 0.1); border-radius: 10px; 
      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-focus .bd .title { bottom: 56px; text-align: center; left: 50%; transform: translateX(-50%); position: absolute; z-index: 1; font-size: 14px; height: 38px; }
.box-focus .bd .title span { display: inline-block; padding: 0 20px; white-space: nowrap; background-color: #DE3C19; border-radius: 7px; color: #fff; line-height: 38px; height: 38px; }
.box-focus .bd .title::before { display: block; content: ""; width: 0; height: 0; border: 7px solid transparent; border-bottom: 7px solid #DE3C19; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);}

/* box-intro */
.box-intro { min-width: 0; flex: 1 0 0%; }
.box-intro .hd { margin-bottom: 40px; display: flex; align-items: center; position: relative; }
.box-intro .hd::after { display: block; content: "\E823"; font-family: "font-webicon"; font-size: 55px; line-height: 1; width: 75px; text-align: center; height: 74px; line-height: 74px; color: #fff; position: absolute; top: 0; left: 0; }
.box-intro .hd svg { margin-right: 15px; }
.box-intro .hd h3 { font-size: 24px; font-weight: 400; }
.row-about .intro p,
.box-intro .bd p { margin-bottom: 18px; line-height: 2; text-indent: 2em; color: #666; text-align: justify; }

/* row-about ----------------------------- */
.row-about .box-pic .pic { width: 650px; margin-right: 50px; }
.row-about .box-pic .pic img { max-width: 100%; height: auto;}
.row-about .intro { flex: 1 0 0%; min-width: 0; }



/* row-order ------------------------------- */
.row-order { background-color: #fff; padding-top: 20px; }
.row-order .box-intro { padding-right: 50px; }
.row-order .box-intro .hd::after { content: "\E820"; }
.row-order .box-focus .bd .li1 img { box-shadow: none; border-radius: 0; max-height: 432px;}
.row-order .box-focus .bd .li1 .title-1 { bottom: 225px; }
.row-order .box-focus .bd .li1 .title-2 { bottom: 390px; left: 70%; }
.row-order .box-focus .bd .li1 .title-2::before { border: 7px solid transparent; border-top: 7px solid #DE3C19; top: 100%; left: 50%; transform: translate(-50%,0); }


/* row-btn ------------------------------- */
.row-btn .box-intro { padding-left: 50px; }
.row-btn .box-intro .hd::after { content: "\E821"; }
.row-btn .box-focus .bd { background-color: rgba(255, 255, 255, 0.5); }
.row-btn .box-focus .bd .li1 img { box-shadow: none; border-radius: 0; max-height: 432px;}
.row-btn .box-focus .bd li .title { bottom: 44px; }
.row-btn .box-focus .bd .li2 .title { bottom: 275px; left: 62%; }
.row-btn .box-focus .bd .li2 .title::before { border: 7px solid transparent; border-left: 7px solid #DE3C19; top: 50%; transform: translate(0,-50%); left: 100%;  }


/* row-modes ----------------------------- */
.row-modes { background: #fff url(../img/row-bg.jpg) no-repeat center bottom; }
.row-modes .box-intro { padding-right: 50px; }


/* box-list */
.box-list { display: flex; justify-content: space-between; padding-top: 90px; }
.box-list h3 { font-weight: 400; font-size: 18px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; line-height: 30px; }
.box-list h3::before { content: "\E815"; font-family: "font-webicon"; font-size: 40px; font-weight: 400;
    background: linear-gradient(90deg, #e150ac 0%, #f9d324 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
 }
.box-list .li2 h3::before { content: "\E816"; }
.box-list .li3 h3::before { content: "\E817"; }
.box-list .li4 h3::before { content: "\E818"; }
.box-list .li5 h3::before { content: "\E819"; }
.box-list li { position: relative; width: 25%; box-sizing: border-box; padding: 0 30px; }
.box-list li::after { position: absolute; display: block; content: ""; right: 0; top: 0; height: 100%; width: 1px; background-color: #E6E6E6;}
.box-list li:last-child::after { display: none; }
.box-list li p { text-indent: 2em; text-align: justify; color: #666; }


/* row-list ----------------------------- */

/* box-loop */
.box-loop { display: flex; justify-content: space-between; flex-wrap: wrap;}
.box-loop-in { width: 49%; margin-bottom: 30px; }
.box-loop-in { box-sizing: border-box; padding: 25px; background-color: #fff; border-radius: 20px; }
.box-loop-in .hd { margin-bottom: 20px; }
.box-loop-in .hd h3 { position: relative; height: 68px; font-weight: 400; font-size: 24px; display: flex; align-items: center; }
.box-loop-in .hd h3 i { position: relative; z-index: 1; }
.box-loop-in .hd h3 i::before { display: block; width: 56px; height: 56px; z-index: 1; content: "\E824"; background: linear-gradient(90deg, #E14FAD 0%, #F9D423 100%); font-family: "font-webicon"; font-size: 40px; color: #fff; margin-right: 15px;  border-radius: 56px; text-align: center; line-height: 56px; }
.box-loop-in .bd p { line-height: 2; margin-bottom: 18px; text-indent: 2em; color: #666; text-align: justify; }


/* 图标 */
.box-loop-in:nth-child(2) .hd h3 i::before { content: "\E825"; }
.box-loop-in:nth-child(3) .hd h3 i::before { content: "\E826"; }
.box-loop-in:nth-child(4) .hd h3 i::before { content: "\E827"; }
.box-loop-in:nth-child(5) .hd h3 i::before { content: "\E828"; }
.box-loop-in:nth-child(6) .hd h3 i::before { content: "\E829"; }
.box-loop-in:nth-child(7) .hd h3 i::before { content: "\E830"; }
.box-loop-in:nth-child(8) .hd h3 i::before { content: "\E831"; }
.box-loop-in:nth-child(9) .hd h3 i::before { content: "\E832"; }
.box-loop-in:nth-child(10) .hd h3 i::before { content: "\E833"; }
.box-loop-in:nth-child(11) .hd h3 i::before { content: "\E834"; }
.box-loop-in:nth-child(12) .hd h3 i::before { content: "\E835"; }
.box-loop-in:nth-child(13) .hd h3 i::before { content: "\E836"; }
.box-loop-in:nth-child(14) .hd h3 i::before { content: "\E837"; }
.box-loop-in:nth-child(15) .hd h3 i::before { content: "\E838"; }
.box-loop-in:nth-child(16) .hd h3 i::before { content: "\E839"; }
.box-loop-in:nth-child(17) .hd h3 i::before { content: "\E840"; }
.box-loop-in:nth-child(18) .hd h3 i::before { content: "\E841"; }
.box-loop-in:nth-child(19) .hd h3 i::before { content: "\E842"; }
.box-loop-in:nth-child(20) .hd h3 i::before { content: "\E843"; }




/* row-relevance ----------- */
#technicalSupport .row { width: 1400px; margin: 0 auto; 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; }
}