/* CSS Document */

.indexa{ position:relative; width:100%; min-width:1200px; height:780px; min-height:780px;}
.iant{ position:absolute; top:0; left:50%; margin-left:-600px; width:1200px; height:0; z-index:7;}
.iatnav{ position:absolute; top:0; left:0; background:#09559a; width:200px; border-top:4px solid #d73228;}
.iant img{ margin:20px 0 10px 0;}
.iant ul{ padding:10px 0;}
.iant ul li{ text-align:center;}
.iant a{ display:inline-block; width:80%; margin:0 auto; line-height:40px; color:#fff; text-align:center;}
.iant a:hover{ background:#d73228;}
.iant .iatnava{ width:100%;}
.iant a.iatnava:hover{ background:none;}
.ianb{ position:absolute; bottom:0; left:0; width:100%; height:100px; background:#09559a; background:rgba(9,85,154,0.8); z-index:7;}
.ianb ul{}
.ianb li{ float:left; width:170px; width:calc(100%/7);width:-webkit-calc(100%/7);width:-moz-calc(100%/7); position:relative;}
.ianb a{ display:inline-block; width:100%; color:#fff; font-size:16px; line-height:100px; text-align:center;}
.ianb p{}
.ianb span{ display:inline-block; width:25px; height:32px; background-position:-42px 0; position:absolute; bottom:-10px; right:54px; z-index:8; display:none;}
.iabnch,.ianb li:hover{ background:#d73228; border-bottom:3px solid #09559a;}
.iabnch span{ display:block;}

.banner{ position:absolute; top:0; left:0; z-index:6; width:100%; height:100%; min-width:1200px;}
.ibanner,.iban,.ibanner-list{ width:100%; height:100%; overflow:hidden; position:absolute; top:0; left:0;}
.iban{}
.ibanner-list{ position:relative; z-index:3;}
.ibanimg{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:0; background-repeat:no-repeat; background-size:100% auto; background-size:cover; overflow:hidden;}
.ibanner-list .ibanner-ch{ z-index:5;}
.ibanner-list .ibanner-cb{ z-index:4;}
.ibanner-ul{ position:absolute; bottom:140px; left:0; width:100%; text-align:center; z-index:6; display:none;}
.ibanner-ul span{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#fff; margin:0 3px; cursor:pointer; transition:margin 0.27s linear;}
.ibanner-ul .ibanner-ch{ background:#00a0f0;}
@keyframes d-ban{
0%{ opacity:0; display:none;}
1%{ opacity:0; display:block;}
100%{ opacity:1; display:block;}
}
@-webkit-keyframes d-ban{
0%{ opacity:0; display:none;}
1%{ opacity:0; display:block;}
100%{ opacity:1; display:block;}
}
.banr{ width:600px; padding:40px 1000px 40px 70px; margin-left:-70px; position:absolute; top:40%; left:50%; background:#09559a; background:rgba(9,85,154,0.30); color:#fff;}
.banr h4{ font-size:30px;}
.banr span{ font-size:20px; display:inline-block; padding-bottom:10px; line-height:40px;}
.banr p{ font-size:16px;}

/*经典案例*/
.case{ width:100%; min-width:1200px; overflow:hidden;}
.case .page-width{ overflow:hidden;}
.caseT{ width:100%; overflow:hidden; height:100px;}
.caseT ul{ width:120%;}
.caseT li{ width:240px; margin-right:25px; height:46px; background:#000; position:relative; border-radius:23px; float:left; transition:background 0.27s ease-out;}
.caseT .caseTch,.caseT li:hover{ background:#eeb900;}
.caseT li a{ display:inline-block; width:100%; line-height:46px; color:#fff; text-align:center;}
.caseicon{ width:23px; height:31px; position:absolute; top:60px; left:50%; margin-left:-11px; display:none; background-position:-22px -122px;}
.caseT .caseTch .caseicon{ display:inline-block;}
.caseC{ width:1250px; padding-top:40px;}
.caseD{ float:left; width:381px; margin-right:28px; margin-bottom:30px; position:relative;}
.caseImg{ width:381px; height:254px; overflow:hidden; background-position:center; background-repeat:no-repeat; background-size:cover;}
.caseCt{ width:381px; height:96px; background:#e6e6e6;}
.caseCtc{ display:block; font-size:16px; line-height:24px; padding:24px 30px 24px 30px; position:relative; z-index:4; color:#000;}
.caseCtc span{ position:relative; display:block; height:24px; overflow:hidden; width:100%;}
.caseCred{ position:absolute; bottom:0; left:0; width:381px; height:96px; background:#d62018; z-index:1; opacity:0; filter:alpha(opacity=0);}
.caseClind{ position:absolute; top:10px; left:10px; width:361px; height:330px; z-index:3;}
.caseClind div{ position:absolute; background:#fff; z-index:3;}
.cla,.clb,.cle,.clf{ height:1px; width:0;}
.clc,.cld{ width:1px; height:0;}
.cla{ bottom:0; right:50%;}
.clb{ bottom:0; left:50%;}
.clc{ bottom:0; left:0;}
.cld{ bottom:0; right:0;}
.cle{ top:0; left:0;}
.clf{ top:0; right:0;}
.caseD:hover .caseCtc{ color:#fff;}
.caseD:hover .caseCred{ opacity:1; filter:alpha(opacity=100); width:401px; left:-10px; transition:opacity 0.27s ease-out,width 0.27s ease-out,left 0.27s ease-out;}
.caseD:hover .cla{ width:50%; animation:cla 1s linear;}
.caseD:hover .clb{ width:50%; animation:cla 1s linear;}
.caseD:hover .clc{ height:100%; animation:clc 1s linear;}
.caseD:hover .cld{ height:100%; animation:clc 1s linear;}
.caseD:hover .cle{ width:50%; animation:cle 1s linear;}
.caseD:hover .clf{ width:50%; animation:cle 1s linear;}
@keyframes cla{
0%{ width:0;}
25%{ width:50%;}
100%{ width:50%;}
}
@keyframes clc{
0%{ height:0;}
25%{ height:0;}
75%{ height:100%;}
100%{ height:100%;}
}
@keyframes cle{
0%{ width:0;}
75%{ width:0;}
100%{ width:50%;}
}
.caseMore{ text-align:center; height:31px; cursor:pointer; margin-bottom:40px;}
.caseMore span{ display:inline-block; width:23px; height:31px; background-position:-22px -122px;}

.caseindex{}
.caseindex .caseC{ display:none;}
.caseindex .caseCch{ display:block;}

/*企业资质*/
.indexT{ height:150px; width:510px; background-position:center; background-repeat:no-repeat; margin:40px auto;}
.indexT3{ background-image:url(../image/qyzz.png);}
.index3{ background:#f5d66b; min-width:1200px; position:relative; width:100%; overflow:hidden; padding-bottom:80px;}
.index3 .iLine{ border-bottom:1px solid #000;}
.iDiv3{ height:580px; position:relative;}
.iImg3{ width:1200px; margin:0 auto; overflow:hidden;}
.iDiv3 ul{ width:1000%; margin:108px 0 300px 0; height:252px;}
.iDiv3 li{ width:180px; height:252px; float:left; margin-right:24px; position:relative; cursor:pointer; overflow:hidden; z-index:9;}
.iDiv3 li p{ position:absolute; top:200%; left:0;}
.iDiv3 li img{ width:100%; display:block;}
.iDiv3 .iImg-ch{ z-index:11;}
.iL3,.iR3{ position:absolute; top:208px; width:44px; height:44px; border-radius:50%; background:#202020; z-index:11; cursor:pointer; opacity:0.5; filter:alpha(opacity=50); transition:opacity 0.27s ease-out;}
.iL3{ left:-54px;}
.iR3{ right:-54px;}
.iL3 span,.iR3 span{ display:inline-block; width:11px; height:21px; position:absolute; top:50%; left:50%; margin-top:-10px;}
.iL3 span{ background-position:-70px -1px; margin-left:-7px;}
.iR3 span{ background-position:-82px -1px; margin-left:-5px;}
.iL3:hover,.iR3:hover{ opacity:1; filter:alpha(opacity=100);}
.iImgM{ position:absolute; top:0; left:50%; margin-left:-205px; background:#000; z-index:12; transition:transform 0.27s ease-out;}
.iImgM img{ width:410px; display:inline-block; margin:2px;}
.indexD3{ text-align:center;}
.indexD3 span{ display:inline-block; height:50px; line-height:50px; border-top:1px solid #000; border-bottom:3px solid #000; margin:0 auto; margin-top:30px; font-size:18px; text-align:center;}
.iBg3{ position:absolute; bottom:0; left:0; width:100%; height:430px; background:url(../image/i3.png) center no-repeat; z-index:10;}

/*企业荣誉*/
.indexT4{ background-image:url(../image/qyry.png);}
.index4{ background:url(../image/index4.png) bottom no-repeat; min-width:1200px; min-height:1000px; position:relative; width:100%; overflow:hidden;}
.iDivC7{ position:relative; padding-top:164px;}
.iI7{ width:1048px; margin-left:50px; height:372px; position:relative;}
.iDiv7{ opacity:0; filter:alpha(opacity=0); position:absolute; top:0; left:0; z-index:1;}
.iDiv7 ul{ width:110%;}
.iDiv7 li{ float:left; width:250px; height:170px; overflow:hidden; margin:0 16px 16px 0;}
.iDiv7 li img{ width:252px;}
.iDiv7 li:nth-child(1){ margin-left:57px;}
.iL7,.iR7{ position:absolute; bottom:-110px; width:44px; height:44px; border-radius:50%; background:#202020; z-index:11; cursor:pointer; opacity:0.5; filter:alpha(opacity=50); transition:opacity 0.27s ease-out;}
.iL7{ right:70px;}
.iR7{ right:0;}
.iL7 span,.iR7 span{ display:inline-block; width:11px; height:21px; position:absolute; top:50%; left:50%; margin-top:-10px;}
.iL7 span{ background-position:-70px -1px; margin-left:-7px;}
.iR7 span{ background-position:-82px -1px; margin-left:-5px;}
.iL7:hover,.iR7:hover{ background:#000;}
.iDivch7{ opacity:1; filter:alpha(opacity=100); z-index:3;}
.iDivchc7{ z-index:2;}
.iDivch7 li:nth-child(1){ animation:il1 1.5s ease-out;}
.iDivch7 li:nth-child(2){ animation:il2 1.5s ease-out;}
.iDivch7 li:nth-child(3){ animation:il3 1.5s ease-out;}
.iDivch7 li:nth-child(4){ animation:il4 1.5s ease-out;}
.iDivch7 li:nth-child(5){ animation:il5 1.5s ease-out;}
.iDivch7 li:nth-child(6){ animation:il6 1.5s ease-out;}
.iDivch7 li:nth-child(7){ animation:il7 1.5s ease-out;}
.iDivch7 li:nth-child(8){ animation:il8 1.5s ease-out;}
@keyframes il1{
0%{ opacity:0; transform:translate(0,200px);}
50%{ opacity:1; transform:translate(0,0);}
100%{ opacity:1; transform:translate(0,0);}
}
@keyframes il2{
0%{ opacity:0; transform:translate(0,200px);}
5%{ opacity:0; transform:translate(0,200px);}
55%{ opacity:1; transform:translate(0,0);}
100%{ opacity:1; transform:translate(0,0);}
}
@keyframes il3{
0%{ opacity:0; transform:translate(0,200px);}
10%{ opacity:0; transform:translate(0,200px);}
60%{ opacity:1; transform:translate(0,0);}
100%{ opacity:1; transform:translate(0,0);}
}
@keyframes il4{
0%{ opacity:0; transform:translate(0,200px);}
15%{ opacity:0; transform:translate(0,200px);}
65%{ opacity:1; transform:translate(0,0);}
100%{ opacity:1; transform:translate(0,0);}
}
@keyframes il8{
0%{ opacity:0; transform:translate(0,200px);}
20%{ opacity:0; transform:translate(0,200px);}
70%{ opacity:1; transform:translate(0,0);}
100%{ opacity:1; transform:translate(0,0);}
}
@keyframes il7{
0%{ opacity:0; transform:translate(0,200px);}
25%{ opacity:0; transform:translate(0,200px);}
75%{ opacity:1; transform:translate(0,0);}
100%{ opacity:1; transform:translate(0,0);}
}
@keyframes il6{
0%{ opacity:0; transform:translate(0,200px);}
30%{ opacity:0; transform:translate(0,200px);}
80%{ opacity:1; transform:translate(0,0);}
100%{ opacity:1; transform:translate(0,0);}
}
@keyframes il5{
0%{ opacity:0; transform:translate(0,200px);}
35%{ opacity:0; transform:translate(0,200px);}
85%{ opacity:1; transform:translate(0,0);}
100%{ opacity:1; transform:translate(0,0);}
}