@charset "utf-8";

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


#header { display: none;}
#headerChannel{ position:relative; width:100%; height: 760px; background:url(../img/bg-banner.jpg) repeat-x center top; background-size: cover; }
#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:36px;background: #144AA8; box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.16); border-radius: 18px;line-height: 36px;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: #144AA8;}

#headerChannel .con { position: absolute; left: 90px; top: 268px; right: 600px; line-height: 1.3; color: #fff; text-align: left; }
#headerChannel .con h1 { font-size: 100px; font-weight: bold; }
#headerChannel .con h3 { margin-top: 30px; font-size: 18px; }
#headerChannel .pics { position: absolute; right: 90px; top: 200px; width: 523px; height: 540px; }
#headerChannel .pics > div { background-size: contain; }
#headerChannel .p-01 { position: absolute; left: 14px; top: 114px; width: 88px; height: 179px; background: url(../img/pic-01.png) no-repeat; }
#headerChannel .p-02 { position: absolute; right: 0; top: 0; width: 370px; height: 427px; background: url(../img/pic-02.png) no-repeat; }
#headerChannel .p-03 { position: absolute; left: 0; bottom: 20px; width: 310px; height: 283px; background: url(../img/pic-03.png) no-repeat; }
#headerChannel .p-04 { position: absolute; right: 56px; bottom: 0; width: 138px; height: 154px; background: url(../img/pic-04.png) no-repeat; }

.rowGroup { padding: 60px 0; }
.rowBox > .hd { text-align: center; margin-bottom: 50px; }
.rowBox > .hd h3 { font-size: 32px; line-height: 40px; font-weight: bold; color: #1A68D1; }


/* 层面要求 */
#requirement { background:url(../img/bg-01.jpg) repeat-x center center; background-size: cover; }
#requirement .rowBox > .bd { position: relative; overflow: hidden; }
#requirement .boxPic { width: 359px; height: 295px; margin: 20px auto 90px; background: url(../img/pic-05.png) no-repeat center center; background-size: contain; }
#requirement .boxIntro { text-align: center; font-size: 16px; color: #666; line-height: 2; }
.requirementList { position: absolute; left: 45px; right: 45px; top: 0; }
.requirementList li { position: absolute; border: 1px solid #eee; border-radius: 20px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.03); padding: 30px; background: #fff; box-sizing: border-box; transition: all ease 0.6s; }
.requirementList .intro { font-size: 16px; line-height: 2; text-indent: 2em; text-align: justify; }

.requirementList .li1 { left: 10px; top: 40px; width: 480px; }
.requirementList .li2 { left: 0; top: 220px; width: 440px; }
.requirementList .li3 { right: 0; top: 140px; width: 450px; }

.requirementList li:hover { background: #1A68D1; border-color: #1A68D1; color: #fff; }



/* 统一身份认证介绍 */
.featuresList { padding: 70px 0; }
.featuresList li { position: relative; margin-top: 60px; }
.featuresList li:first-of-type { margin-top: 0; }

.featuresList .title { text-align: center; font-size: 0; line-height: 1; }
.featuresList .title span { position: relative; z-index: 1; display: inline-block; vertical-align: top; padding: 0 120px; line-height: 128px; text-align: center; color: #fff; font-size: 40px; font-weight: bold; perspective: 100px; }
.featuresList .title span::before { display: inline-block; vertical-align: top; width: 32px; height: 36px; margin: 48px 25px 0 0; content: ''; background: url(../img/icon-01.png) no-repeat 0 0; background-size: auto 100%; }
.featuresList .title span::after { position: absolute; z-index: -1; content: ''; left: 0; top: -15px; right: 0; bottom: 0; background: linear-gradient(90deg, #579FFF 0%, #1268DC 100%); border-radius: 10px 10px 0 0; transform-origin: center bottom; transform: rotateX(8deg); }

.featuresList .con { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 30px 30px; border-radius: 20px; box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.03); background: #fff; border: 1px solid #eee; }
.featuresList .pic span { position: relative; display: block; width: 350px; height: 270px; background: url(../img/icons-features.png) no-repeat 0 0; background-size: auto 100%; animation: float 4s infinite; }
.featuresList .intro { flex: 1 0 0%; padding: 0 20px; position: relative; font-size: 16px; color: #333; line-height: 2; text-align: justify; text-indent: 2em; }
.featuresList .intro p { margin-bottom: 1.25em; }
.featuresList .intro p:last-of-type { margin-bottom: 0; }

.featuresList .li3 .title span,
.featuresList .li4 .title span { perspective: 180px; }

.featuresList .li2 .pic span { background-position: -350px 0; }
.featuresList .li3 .pic span { background-position: -700px 0; }
.featuresList .li4 .pic span { background-position: -1050px 0; }
.featuresList .li5 .pic span { background-position: -1400px 0; }
.featuresList .li6 .pic span { background-position: -1750px 0; }

.featuresList li:nth-of-type(odd) .pic { order: 1; }

.featuresList .item,
.featuresList .title span::before,
.featuresList .intro { transition: all ease 0.5s; }

.featuresList li:hover .title span::before { animation: icon 0.8s ease 1; }
.featuresList li:hover .item { transform: translateY(-15px); }


/* 底部通用 */
.rowTi h2 {color: #1A68D1;}
.techSupportList li a:hover { background-color: #2B79E0; }
.lxss a,
.lxss a.sq { background-color: #2B79E0; }
.lxss a:hover,
.lxss a.sq:hover { background-color: #1A68D1; }

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
        animation-timing-function: ease-in-out;
    }
    50% {
        transform: translateY(10px);
        animation-timing-function: ease-in-out;
    }
}

@keyframes icon {
    0% {
        transform: scale(3);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}