*{margin:0;padding:0;}
body{ font-family: Arial, Helvetica,'微软雅黑';}
@font-face {
    font-family: "Mon";
    src: url("fonts/Montserrat-Regular.eot?v=1");
    src: url("fonts/Montserrat-Regular.eot?#iefix&v=1") format("embedded-opentype"),
        url("fonts/Montserrat-Regular.woff?v=1") format("woff"),
        url("fonts/Montserrat-Regular.ttf?v=1") format("truetype"),
        url("fonts/Montserrat-Regular.svg#Prompt-SemiBold") format("svg");
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: "MonBold";
    src: url("fonts/Montserrat-SemiBold.eot?v=1");
    src: url("fonts/Montserrat-SemiBold.eot?#iefix&v=1") format("embedded-opentype"),
        url("fonts/Montserrat-SemiBold.woff?v=1") format("woff"),
        url("fonts/Montserrat-SemiBold.ttf?v=1") format("truetype"),
        url("fonts/Montserrat-SemiBold.svg#Prompt-SemiBold") format("svg");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "Han";
    src: url("fonts/SourceHanSansSC-Regular.eot");
    src: url("fonts/SourceHanSansSC-Regular.eot?#iefix") format("embedded-opentype"),
        url("fonts/SourceHanSansSC-Regular.woff") format("woff"),
        url("fonts/SourceHanSansSC-Regular.ttf") format("truetype"),
        url("fonts/SourceHanSansSC-Regular.svg#SourceHanSansSC-Regular") format("svg");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "HanBold";
    src: url("fonts/SourceHanSansSC-Bold.eot");
    src: url("fonts/SourceHanSansSC-Bold.eot?#iefix") format("embedded-opentype"),
        url("fonts/SourceHanSansSC-Bold.woff") format("woff"),
        url("fonts/SourceHanSansSC-Bold.ttf") format("truetype"),
        url("fonts/SourceHanSansSC-Bold.svg#SourceHanSansSC-Bold") format("svg");
    font-style: normal;
    font-weight: normal;
}
.h1,.h2{width: 100%; max-width: 998px; margin:0 auto;font-family: 'MonBold','HanBold'; }
.h1{ 
    color:#ff6600; font-size: 22px; position: relative; padding-left: 32px  ; margin-bottom: 46px;
    box-sizing: border-box;
}
.h1 span{ font-size: 16px; position: absolute;top:5px;left:0; }
.h1 .h12{ font-family: 'MonBold'; color:#543f8d;padding-bottom: 4px; border-bottom: 2px solid #ff6600;top:2px;}
.h2{  font-size: 58px; color:#7e858c; }
.animation,.item {
    -webkit-transition: 0.4s ease all;
    -moz-transition: 0.4s ease all;
    -ms-transition: 0.4s ease all;
    -o-transition: 0.4s ease all;
    transition: 0.4s ease all;
}
.err{border:1px solid red;} 

body::-webkit-scrollbar,
textarea::-webkit-scrollbar,
section::-webkit-scrollbar,
iframe::-webkit-scrollbar {
    width: 8px;
    height: 12px;
    -webkit-border-radius: 12px;
}
body::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
section::-webkit-scrollbar-track {
    background: #F5F5F5;
}

body::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
section::-webkit-scrollbar-thumb{
    background: #6B747A;
    -webkit-border-radius: 12px;
}



html {
    font-family: sans-serif;
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
body,div,p,span,a {    -webkit-text-size-adjust: 100%;}
body {
    margin: 0;padding: 0;font-size: 16px; 
}

ul,li{ list-style: none;}
.hide{ display: none;}

.aInOut {
    animation: aInOut 1.6s infinite;
    -webkit-animation: aInOut 1.6s infinite;
}

@-webkit-keyframes aInOut {
    0% {opacity: 1;}
    50% {opacity: 0.4;}
    100% {opacity: 1;}
}

@keyframes aInOut {
    0% {opacity: 1;}
    50% {opacity: 0.4;}
    100% {opacity: 1;}
}
.xz{animation: xz 3s linear infinite ;}
@-webkit-keyframes xz {
  0% {-webkit-transform: rotate(0deg);} 
  25% {-webkit-transform:rotate(90deg);} 
  50% {-webkit-transform:rotate(180deg);} 
  75% {-webkit-transform:rotate(270deg);} 
  100% {-webkit-transform:rotate(360deg);} 
}
@keyframes xz {
  0% {transform: rotate(0deg);} 
  25% {transform:rotate(90deg);} 
  50% {transform:rotate(180deg);} 
  75% {transform:rotate(270deg);} 
  100% {transform:rotate(360deg);} 
}

.navplace {
    height: 135px; 
}
.nav {
    width: 100%;
    position: fixed;
    z-index: 9999;
    background: #fff;
    height: 120px; 
}
.wraper{width: 100%;max-width: 1440px; margin:0 auto; padding:0 120px 120px 120px; box-sizing: border-box;position: relative;   overflow-x: hidden;  }
.nav .wraper{
    padding: 35px 115px 88px 115px;  height: 52px;  box-sizing: border-box; overflow: hidden;
    
}
.why,.about,.cultrue,.server,.net{ width: 100%; }
.net{ overflow: hidden;}
.why .wraper,.about .wraper,.cultrue .wraper,.server .wraper,.net .wraper{max-width:998px ;padding:0; }

.menu-button{ background: url(../image/menu.png); width: 34px; height: 28px; float: right; margin-top: 30px; cursor: pointer;}

.nav .logo {
    background: url(../image/logo.svg) no-repeat;
    width: 225px;
    height: 62px;
    position: absolute;
    top: 35px;
    left: 115px;
}
.nav ul{ float: right; display: none; margin-top: 14px;}
.nav ul li{margin-right: 22px; width: 79px; overflow: hidden; cursor: pointer; position: relative;}
.nav ul li,.nav ul li.icon b{   display: inline-block;float: left; }
.nav ul li.icon b{width: 49px; height: 48px;} 
.nav ul li.icon1{background: url(../image/icon1.png) no-repeat;}
.nav ul li.icon2{background: url(../image/icon2.png) no-repeat;}
.nav ul li.icon3{background: url(../image/icon3.png) no-repeat;}
.nav a,.nav a:hover{ text-decoration: none;} 

.nav ul li.icon1 b{ background: url(../image/icon1on.png);}
.nav ul li.icon2 b{ background: url(../image/icon2on.png);}
.nav ul li.icon3 b{ background: url(../image/icon3on.png);}
.nav ul li b,.nav ul li span{  line-height: 48px; color:#656565; opacity: 0;}
.nav ul li span{ padding-left: 8px; position: absolute; left:56px;opacity: 0;}
.nav ul li:hover{ width: 128px; }
.nav ul li.cen,.nav ul li.cen:hover{width: 80px; line-height: 48px; padding-left: 42px;
     border-left: 2px solid #7e858c; }
.nav ul li.cen .b{ font-weight: bolder;}

.nav ul li.cen a:nth-child(1){margin-right: 10px;}
.en .nav ul li:nth-child(1):hover{ width: 150px;}
.nav ul li:hover b,.nav ul li:hover span{display: inline-block;opacity: 1}

.navplace{ height: 120px;}
.kvBox { height: 980px; max-width: 1440px;box-sizing: border-box;}
.kvBoxS{ height: 480px;}
.kvBox .v{ position: absolute;left:50%; margin-left: -678px; z-index: 10; top:-120px;}
.kvBox .r{ position: absolute;left:50%; margin-left: 153px;z-index: 10; top:-120px;}
.kvBoxS .v{ width: 388px;top:-40px; margin-left: -608px;}
.kvBoxS .r{  left:50%;margin-left:-192px;top:-80px;}
.kvBox .kv{ width: 1164px; position: absolute; left:50%;margin-left: -449px;top:0;z-index: 1;}

.kvBoxS .kv{ width: 1231px;margin-left: -532px; height: 300px;top:-60px;}
.kvBox .menu{ position: absolute; left: 50%; margin-left: -740px; top:35px; z-index: 20;}
.kvBox .menu li{ font-size: 21px;line-height: 44px; overflow: hidden;
    font-family: 'Mon','Han'; color:#FFF;margin-top: 5px; padding-left: 240px; position: relative;}
.kvBox .menu .item{height: 44px; }

.kvBox .menu li:nth-child(1){ z-index: 40;}
.kvBox .menu li:nth-child(2){ z-index: 30;}
.kvBox .menu li:nth-child(3){ z-index: 20;}
.kvBox .menu li:nth-child(4){ z-index: 10;}
.kvBox .menu .item:nth-child(1):hover,.kvBox .menu .item:nth-child(1).on{ height: 158px;}
.kvBox .menu .item:nth-child(2):hover,.kvBox .menu .item:nth-child(2).on{ height: 208px;}
.kvBox .menu .item:nth-child(3):hover,.kvBox .menu .item:nth-child(3).on{ height: 208px;}
.kvBox .menu li span{ font-family: 'Mon'; font-size: 16px; display: inline-block; margin-right: 10px;
    transform: translateY(-3px); -webkit-transform:translateY(-3px);}
.kvBox .menu li div{ position: absolute; top:0;left:0; opacity: 0.85; opacity: 0; }
.kvBox .menu li:hover{ overflow: visible;}
.kvBox .menu li:hover div{opacity: 1;}
.kvBox .menu .on{overflow: visible;}
.kvBox .menu .on div{opacity: 1;}
.kvBox .menu li div p{ background: url(../image/mbg.png?v=2) 105px 0 no-repeat; box-sizing: border-box;
    width: 583px; height: 43px; padding-left: 240px; color:#543f8d;  font-weight: bolder; 
    position: absolute; z-index: 20; cursor: pointer;
}
.en .kvBox .menu li div p{width: 643px; background: url(../image/mbg2.png) 105px 0 no-repeat;  }
.kvBox .menu li  ul{ width: 244px; box-sizing: border-box; padding:26px 0 0 52px;  display: block; position: absolute;left:228px;top:32px; z-index: 10;}
.kvBox .menu li  ul  li{width: 244px;  padding:3px 0 3px 0; margin:0;line-height: 30px; }
.en .kvBox .menu li  ul  li{line-height: 24px;  }
.kvBox .menu li  ul  li a{ color:#000;  text-decoration: none; font-size: 16px; 
    display: block; padding-left: 35px; position: relative; width: 100%; }
.kvBox .menu li  ul  li a b{ font-weight: normal;position: absolute;top:0;left:0;}


.kvBox .menu li ul { background: url(../image/sm2.png);height: 181px; }
.kvBox .menu li:nth-child(1) ul { background: url(../image/sm1.png);height: 127px; }

 .en .kvBox .menu li  ul{ width: 302px; background-size: 100% 100%;}  
 .en .kvBox .menu li  ul  li{ padding:5px 0 5px 0;}
 .en .kvBox .menu li  ul  li a{font-size: 15px;}
 .en .kvBox .menu li:nth-child(2) ul{height:200px; }
 .en .kvBox .menu .item:nth-child(2):hover{ height: 228px;}

.kvBox .h2{ height: 100px; position:absolute; top:322px; z-index: 100; color:#fff; left:50%;margin-left: -240px;}
.kvBox .h2:hover{ font-size: 42px;}
.kvBox .h2:hover p{ font-size: 78px;}
.kvBox .arr{ background: url(../image/arr1.png); width: 91px; height: 91px; 
    position: absolute; left:600px;top:50px; z-index: 30;
}
.kvBox .h2:hover .arr{ top:-30px;}
.kvBoxS .h2{top:105px;margin-left: -195px;}
.en .kvBox .h22{ font-size: 48px;margin-left: -390px; width: 1032px;}
.en .kvBox .h22 .arr{ left:860px;}
.en .kvBox .h2:hover{ font-size: 42px;}
.en .kvBox .h2:hover p{ font-size: 54px;}

.newsBox{ width: 536px; height: 154px;
     position: absolute; z-index: 300; top:588px;left:50%; margin-left: 50px;
      background: #d7e2e6;  transform: skewX(20deg); -webkit-transform:skewX(20deg);}
.newsBox .t{ width: 120px; height: 35px; background: #ff6600; position: absolute; top:20px;left:-46px;}
.newsBox .t b{ font-size: 14px; font-family: 'MonBold'; margin-left: 80px; color:#fff; padding-top: 10px; display: block;}
.newsBox .t span{ font-size: 18px; color:#543f8d; font-family: 'HanBold'; position: absolute;top:6px;left:134px; width: 160px;}
.newsBox .t b,.newsBox .t span,.newsBox .c{transform: skewX(-20deg); -webkit-transform:skewX(-20deg); }
.newsBox .c{font-family: 'Han'; 
    position: absolute;top:72px;left:50px; font-size: 14px;
}
.newsBox .c li{ padding-bottom: 10px;}
.newsBox .c li a{ text-decoration: none; color: #656565;}
.newsBox .c span{ display:inline-block; background: url(../image/arr2.png) top right; width: 32px; height: 10px;margin-right: 10px; }
.newsBox:hover .t{ width: 280px;left:-66px}
.en .newsBox:hover .t{ width: 320px;}
.newsBox:hover .t b{ margin-left: 100px; }
.newsBox:hover .t span{left:154px;color:#fff;}
.newsBox .c li:hover{margin-left: -5px;}
.newsBox .c li:hover span{ width: 42px;}
.newsBox .c li:hover a{ text-decoration: underline;}
.newsBox-placeholder{ background: url(../image/k0.png); width: 520px; height: 56px; position: absolute; top:660px;right: 4px; z-index: 999;}

.why{ position: relative; padding-top:50px; height:780px;}
.en .why{height:986px;}
.why .h2{ height: 100px; width: 988px; position: relative; z-index: 100; margin: 0; }
.why .h2:hover{ font-size: 42px;}
.why .h2:hover p{ font-size: 78px;}

.why .wraper{position: absolute; top:0;left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); overflow: visible;}
.why .bg{ height:370px; width: 100%; background: #f0f5fa;  }
.why .intro{ -moz-column-count:2; 
    -webkit-column-count:2;
    column-count:2;
    width: 590px;
    
    position: absolute; left:50%;top:254px; margin-left: -190px;
   
}
.why ul{ position: absolute; top:310px; left:50%;margin-left: -400px; z-index: 100;}
.why ul li{ width: 276px; margin-right: 36px; float: left; border-top:1px solid #ff6600; 
    padding-top: 22px;font-size: 22px; font-family: 'HanBold'; color:#543f8d;
}
.txts,.services-item div,.intro-content p,.service-area .i,.service-case .i,.service-case .c2,.about .intro,.cultrue .txt,
.feature-item div,.jsd,.intro-content,.feature-item .tedian p {
    font-size: 14px;line-height: 30px;color:#656565; font-family: 'Mon','Han';
}
.en .txts,.en .services-item div,.en .intro-content p,.en .service-area .i,.en .service-case .i,.en .service-case .c2,.en .about .intro,
.en .cultrue .txt,.en .feature-item div,.en .jsd,.en .intro-content,.feature-item .tedian p {
     font-family: 'Mon';line-height: 24px;
}



.why ul li div,.why .txt1{ padding-top: 40px; z-index: 100;}
.why .txt1{ width: 276px; position: absolute; left:50%;margin-left: 220px;top:86px;z-index: 100;}
.why .txt_0{ height: 120px;border-left: 1px solid #ff6600;position: absolute; top:260px; left:50%;margin-left: -392px; z-index: 200;}
.why .txt_1,.why .txt_2{ width: 272px;position: absolute;top:260px;left:50%; z-index: 200;}
.why .txt_1{  margin-left: -92px;}
.why .txt_2{  margin-left:229px; text-align: justify;}
.en .why .txt_2{ text-align: left;}

.service-area { width: 100%; max-width: 998px; margin:0 auto; height: 480px; position: relative; z-index: 1;}
.service-area .c{ margin-left: 100px; width: 580px; border-top: 1px solid #ff6600;}
.service-area .t{ line-height: 66px; font-size: 20px; color:#543f8d; font-family: 'HanBold';}
.service-area .i{padding-top: 55px;  position: relative;}
.service-area .i div{ width:275px; float: left; text-align: justify;}
.en .service-area .i div { text-align: left;}

.service-area .i div:nth-child(1){margin-right: 30px;}
.service-area .i div:nth-child(3){ position: absolute;left:610px;top:55px;}

.service-case{ width: 100%; overflow: hidden; position: relative; height: 1412px; z-index: 2;}
.en .service-case{ height: 1600px;}

.service-case .rightKuan{ background: url(../image/k8.png); width: 1037px; height: 953px; 
    position: absolute;left:50%;margin-left: -32px;top:110px;
}
.service-case .leftKuan{ background: url(../image/k4.png); width: 928px; height: 1124px; 
    position: absolute;top:620px;left:50%;margin-left: -820px; z-index: 99;}
.service-case .m{ height: 456px; width: 100%; background: #f0f5fa; position: absolute;top:400px;}
.service-case .m .client-name{ 
    position: absolute; top:120px;left:50%;margin-left: -225px; font-family: 'Han';
    font-size: 12px; line-height: 32px;
}
.service-case .m .client-img{ position: absolute; top:110px;left:50%;margin-left: -44px;}
.service-case .m2{ height: 388px; width: 100%; background: #f0f5fa; position: absolute;top:580px;}

.service-case .c{  width: 580px; border-top: 1px solid #ff6600; 
    position: absolute; top:526px; left:50%;margin-left: -90px;}
.service-case .t{ line-height: 66px; font-size: 20px; color:#543f8d; font-family: 'HanBold';}
.service-case .i{padding-top: 45px;}
.service-case .i div{ width:275px; float: left; text-align: justify;}
.service-case .c2{ position: absolute; top:900px;left:50%;margin-left: -398px; z-index: 999;}
.service-case .c2 .txt-1{ width: 248px; border-top: 1px solid #ff6600; line-height: 36px;
    color:#543f8d; font-family: 'HanBold'; font-size: 20px; padding-top: 18px;position: absolute; }
.service-case .c2 .txt-2,.service-case .c2 .txt-3{ 
     width: 272px;text-align: justify; position: absolute; top:80px;
}
.service-case .c2 .txt-2{left:314px;}
.service-case .c2 .txt-3{left: 622px;}
.en .service-case .t{ line-height: 32px; padding-top: 20px;}
.en .service-case .c2{ top:1040px;}
.en .service-case .c2 .txt-1{line-height: 30px;padding-top: 18px; top:80px;}
.en .service-case .i div, .en .service-case .c2 .txt-2, .en .service-case .c2 .txt-3{ line-height: 24px; text-align:left;}



.why .leftKuan{ background: url(../image/k1.png?v=1); width: 900px; height:510px;
     position: absolute; top:-12px;left:50%;margin-left: -980px; z-index: 1;
}
.hy-list{ width: 891px; height: 451px; position: absolute; left:50%; margin-left: -395px;} 
.hy-item{ position: absolute;width: 339px; height: 187px; font-size: 22px;font-family: 'HanBold'; color: #FFF; 
    padding: 12px 0 0 30px; box-sizing: border-box;}
.hy-item1{ background: url(../image/w1.png); top:36px;left:0; }
.hy-item2{ background: url(../image/w2.png); top:0;left:265px; }
.hy-item3{ background: url(../image/w3.png); top:36px;left:556px; }
.hy-item4{ background: url(../image/w4.png); top:265px;left:0; }
.hy-item5{ background: url(../image/w5.png); top:228px;left:265px; }
.hy-item6{ background: url(../image/w6.png);  top:265px;left:556px; }



.about{ position: relative; padding-top:45px; height:780px;}
.en .about{height:1080px;}
.about .h2{ height: 100px; position: relative; z-index: 100;}
.about .h2:hover{ font-size: 42px;}
.about .h2:hover p{ font-size: 78px;}
.about .wraper{position: absolute; top:0;left:50%; 
    transform: translateX(-50%); -webkit-transform: translateX(-50%); overflow:visible; z-index: 20; }

.about .bg{ height: 656px; width: 100%; background: #f0f5fa; position: absolute; z-index: 10;  }
.about .intro{ -moz-column-count:2; 
    -webkit-column-count:2;
    column-count:2;
    width: 590px;
  
    position: absolute; left:50%;top:254px; margin-left: -88px;
    z-index: 200;
}

.about .rightKuan1{ background: url(../image/k2.png?v=1); width: 1275px; height: 463px; 
    position: absolute; left:50%;margin-left:-206px; top:-180px}
.about .rightKuan2{ background: url(../image/k3.png); width: 632px; height: 190px;
     position: absolute; left:50%;margin-left:-65px; top:624px; z-index: 1;}

.txt{font-size: 12px; line-height: 30px; color:#656565;}
.en .txt{line-height: 26px;}
.cultrue{ height: 800px; position: relative;}
.en .cultrue{ height: 1000px;}
.cultrue .h1{ z-index: 200;top:52px;}
.cultrue .h2{ z-index: 200;margin-top:142px;}

.cultrue .bg{ height: 550px; background: #f0f5fa; width: 100%; position: absolute;top:80px;left:0; }
.cultrue .leftKuan{ background: url(../image/k9.png); width: 1185px; height: 853px; 
    position: absolute;left:50%;top:0; margin-left: -1035px; z-index: 20;}
.cultrue .rightKuan1{ background: url(../image/p1.png); width: 453px; height: 607px; position: absolute; top:-290px;right:0; z-index: 999;}
.cultrue .c1,.cultrue .c2{
    position: absolute; top:435px;left:50%;
    padding-left: 28px; width: 232px;border-left:2px solid #ea5514; height: 280px;}
.en .cultrue .c1,.en  .cultrue .c2{ height: 450px;}
.cultrue .c1{  margin-left: -175px; }
.cultrue .c2{  margin-left: 240px; }
.cultrue .c1 p{ position: relative; margin-bottom: 50px;}
.en .cultrue .c1 p{ margin-bottom: 90px;}
.cultrue .c2 p{ position: relative; margin-bottom: 20px;}

.cultrue .c1 span,.cultrue .c2 span{ font-size: 20px; font-family: 'HanBold';color:#533f8c;
    position: absolute;left:-140px; width: 100px; text-align: right;}
.en .cultrue .c1 span,.en .cultrue .c2 span{left:-180px;width: 140px;}
.netmap{ height: 1460px; position: relative;}
.netmap .c1{ width: 278px;position: absolute;top:84px; left:50%;margin-left:-394px;}
.netmap .map{ background: url(../image/map.png?v=1); width: 1075px; height: 1145px; 
    position: absolute;top:238px;left:50%;margin-left: -355px;
}
.netmap .tag{ width: 240px;height: 646px; border:1px solid #ea5514; 
    position: absolute;top:568px; left:50%;margin-left: -400px;}
    .netmap .tag div{ width: 100%; padding-top: 40px; text-align: center; margin-bottom: 10px;}
    .netmap .tag div img{margin:0 auto; display: block;}
    .netmap .tag div span{ font-size: 46px; font-family: "MonBold"; color:#543f8d;}
    .netmap .tag div p{ font-size: 20px; color:#7e858c;}

.cultrue .wraper,.netmap .wraper,.advantage .wraper,.credential .wraper,.storehouse .wraper,
.feature .wraper,.superiority  .wraper,.case .wraper,.news .wraper{position: absolute; top:0;left:50%; 
        transform: translateX(-50%); -webkit-transform: translateX(-50%); overflow:visible; z-index: 100;}

.advantage .h1,.credential .h1,.storehouse .h1,.feature .h1,.superiority .h1,.case .h1,.news .h1,.guestbook .h1,.contact .h1{ z-index: 200;}
.advantage .h2,.credential .h2{ padding:65px 0 0 180px;}
.storehouse .h2,.feature .h2,.superiority .h2,.case .h2{ padding:65px 0 0 0; z-index: 100; position: relative;}

.advantage{ height: 1340px; position: relative;}
.en .advantage{ height: 1890px;}
.advantage .bg{ height: 1040px; background: #f0f5fa; width: 100%; position: absolute;top:160px;left:0;z-index: 10; }
.advantage .leftKuan{ background: url(../image/k10.png); width: 1220px; height: 793px; 
    position: absolute;left:50%; margin-left: -1220px;top:-64px; z-index: 20;}
.advantage .rightKuan{ background: url(../image/k11.png); width: 1036px; height: 1471px; 
    position: absolute;left: 50%;margin-left: 90px; top:-240px;}
    .advantage .services-box{ margin-left: 220px;}
.en .advantage .rightKuan{ top:340px;}

.credential{height:930px; position: relative;}
.credential .bg{ height: 340px; background: #f0f5fa; width: 100%; position: absolute;top:190px;left:0;z-index: 10; }
.credential .leftKuan{ background: url(../image/k12.png); width: 1532px; height:384px; 
    position: absolute;left:50%; margin-left: -1232px;top:395px; z-index: 20;}
.credential .award{ position: absolute; top:190px; left:50%;margin-left: -418px; width: 640px;}
.credential .award li{ float: left;margin:30px 80px 0 0;}
.credential .txt1{ width: 276px; position: absolute; left:50%;margin-left: 227px; top:240px; text-align: justify; }
.en .credential .txt1{ text-align: left;}





    
.server{ position: relative; padding-top: 220px; height: 1080px;}
.en .server{ height: 1747px;}
.server .h2{ height: 100px; position: relative; z-index: 100;}
.server .h2:hover{ font-size: 42px;}
.server .h2:hover p{ font-size: 78px;}

.server .wraper{position: absolute; top:0;left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); overflow: visible;}
.server .bg{ height: 700px; width: 100%; background: #f0f5fa;  }
.server .leftKuan{ background: url(../image/k4.png); width: 928px; height: 1124px; 
    position: absolute;top:45px;left:-320px;
     z-index: 10;}
.services-box{ position: absolute; z-index: 100; left:79px;top:280px; width: 920px; }
.services-item{ font-family: 'MonBold','HanBold'; width: 270px; padding:15px; position: relative;
     display: inline-block;  height: 255px; margin-left: 5px; float: left; margin-bottom: 40px;text-align: justify;  }
.services-item-placeholder{ width: 270px;height: 255px; padding:15px;margin-left: 5px; float: left; margin-bottom: 40px; }
.services-item span{ font-size: 16px; color:#ff6600;}
.services-item p{ font-size: 22px; color:#543f8d; padding:18px 0 32px 0;}
.services-item:nth-child(4),.services-item:nth-child(5),.services-item:nth-child(6){height: 240px; margin-bottom: 10px;}
.services-item .k{ width: 310px; height: 285px;border:1px solid #543f8d; display: none; 
    position: absolute; top:-10px;left:-5px; 
}
.services-item:nth-child(4) .k,.services-item:nth-child(5) .k,.services-item:nth-child(6) .k{ height: 270px;}
.services-item:hover{ background: rgba(255,255,255,0.5);}
.services-item:hover .k{ display: block;}
.en .services-item{ text-align: left;height: 455px;}
.en .services-item p{ height: 86px;}
.en .advantage .services-item p{ height: 56px;}
.en .services-item div{ line-height: 25px;}
.en .services-item .k{height: 485px;}

.net{ position: relative; padding-top: 88px; height: 1000px;}
.net .h2{ height: 100px;}
.net .h2:hover{ font-size: 42px;}
.net .h2:hover p{ font-size: 78px;}
.en .net{ padding-top:150px}
.en .net .h2{ position: absolute; top:0;left:0;}

.net .wraper{position: absolute; top:0;left:50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); overflow: visible;}
.net .bg{ height: 676px; width: 100%; background: #f0f5fa; }
.wold-net{ width: 280px; border-top: 1px solid #fb8a3f; margin:188px 0 0 100px;}
.wold-net .h3{ font-family: 'HanBold'; font-size: 22px; color:#543f8d; padding:20px 0 30px 0; }

.en .wold-net{margin:388px 0 0 100px;}
.server-box{ background: url(../image/k5.png?v=1); 
    width:926px; height: 702px; 
    position: absolute; top:178px; left:568px; z-index: 10;
}
.en .server-box{top:248px;}



.ibg-box{ width: 549px; height: 336px; position: absolute; top:212px;left:30px; 
    transform: scale(0.65); -webkit-transform: scale(0.65);
}
.ibg{ background: url(../image/i0.png); width: 265px; height: 169px; position: absolute;}
.ibg1{ left: 143px; top:0;}
.ibg2{ left: 285px; top:84px;}
.ibg3{ left: 0; top:84px;}
.ibg4{ left: 139px; top:168px;}

.i1-box{ position: absolute; width: 205px; height: 215px; top:-2px;left:14px; z-index: 3;cursor: pointer;}
.i1-box div{width: 98px; height: 103px; position: absolute;}
.i1-1{ background: url(../image/i1_1.png); }
.i1-2,.i1-3,.i1-4{ background: url(../image/i1_2.png); }
.i1-5,.i1-6,.i1-7,.i1-8{ background: url(../image/i1_3.png); }
.i1-1{ left:0;top:28px;z-index:7 ;}
.i1-2{ left:53px;top:60px; z-index:8 ;}
.i1-3{ left:53px;top:0;z-index:5 ;}
.i1-4{ left:108px;top:28px;z-index:6 ;}
.i1-5{ left:0;top:80px;z-index:3 ;}
.i1-6{ left:53px;top:112px;z-index:4 ;}
.i1-7{ left:53px;top:52px;z-index:1 ;}
.i1-8{ left:108px;top:80px;z-index:2 ;}
.i1-box:hover .i1-1{ top:10px;}
.i1-box:hover .i1-2{ top:42px;transition-delay: 0.1s;}
.i1-box:hover .i1-3{ top:-18px; transition-delay: 0.2s;}
.i1-box:hover .i1-4{ top:10px; transition-delay: 0.25s;}
.i1-box:hover .i1-5{ top:62px; transition-delay: 0.1s;}
.i1-box:hover .i1-6{ top:94px;transition-delay: 0.2s;}
.i1-box:hover .i1-7{ top:34px; transition-delay: 0.25s;}
.i1-box:hover .i1-8{ top:62px; transition-delay: 0.3s;}

.i2-box{ position: absolute; left:165px;top:124px;z-index: 4; cursor: pointer;}
.i2-1{ background: url(../image/i2_1.png); width: 195px; height: 175px; position: absolute; left:0;top:0;}
.i2-2{ background: url(../image/i2_2.png); width: 195px; height: 175px; position: absolute; left:0;top:0;}
.i2-3{ background: url(../image/i2_3.png); width: 195px; height: 175px;position: absolute; left:0;top:0;}
.i2-box:hover .i2-1{ top:-18px;}
.i2-box:hover .i2-2{ top:-18px;; transition-delay: 0.1s;}
.i2-box:hover .i2-3{ top:-18px;; transition-delay: 0.2s;}

.i3-box{ position: absolute; left:164px; top:-110px;z-index: 1;cursor: pointer;}
.i3-1{ background: url(../image/i3_1.png); width: 194px; height: 172px;position: absolute; top:0; z-index: 2;}
.i3-2{ background: url(../image/i3_2.png); width: 194px; height: 173px;position: absolute; top:66px;z-index: 1;}
.i3-box:hover .i3-1{ top:-18px;}
.i3-box:hover .i3-2{ top:48px; transition-delay: 0.1s;}
.i4-box{ background: url(../image/i4.png); width: 195px; height: 183px; position: absolute; left:307px; top:24px; z-index: 2;cursor: pointer;}
.i4-box:hover{ top:9px;}

.bagua{ width: 601px; height: 599px; position: absolute; top:40px;}
.g1{ background: url(../image/a1.png); width: 243px; height: 121px; position: absolute;left:180px;top:0;}
.g2{ background: url(../image/a2.png); width: 223px; height: 223px; position: absolute;left:1px;top:0;}
.g3{ background: url(../image/a3.png); width: 121px; height: 245px; position: absolute;left:0;top:177px;}
.g4{ background: url(../image/a4.png); width: 223px; height: 223px; position: absolute;left:1px;top:377px;}
.g5{ background: url(../image/a5.png); width: 245px; height: 121px; position: absolute;left:177px;top:479px;}
.g6{ background: url(../image/a6.png); width: 223px; height: 223px; position: absolute;left:377px;top:377px;}
.g7{ background: url(../image/a7.png); width: 121px; height: 245px;position: absolute;left:481px;top:177px;}
.g8{ background: url(../image/a8.png); width: 224px; height: 223px; position: absolute;left:378px;top:-1px;}
.bagua div p{ text-align: center; color:#543f8d; font-family: 'HanBold'; padding-top: 8px;}
.bagua div p span{ display: block; font-size: 32px; font-family: 'MonBold'; line-height: 44px; font-weight: bolder;}
.bagua .g2 p,.bagua .g4 p,.bagua .g8 p{padding-top: 80px;padding-left: 35px;}
.bagua .g3 p{padding-top: 80px;}
.bagua .g5 p{padding-top: 10px;}
.bagua .g4 p, .bagua .g6 p{padding-top: 58px;}
.bagua .g6 p{ padding-right: 35px;}
.bagua .g7 p{ padding-top:60px;}
.bagua .g8 p{ padding-right:80px;}

.storehouse{ height: 1260px; position: relative;}
.storehouse .bg{ height: 560px; background: #f0f5fa; width: 100%; position: absolute;top:190px;left:0;z-index: 10; }
.storehouse .server-box{ background: url(../image/k5f.png?v=1);  top:248px; left:50%;margin-left: -920px;}
.storehouse .server-box .bagua{left:350px;}
.storehouse .server-box .ibg-box{left:380px;}
.storehouse .server-box2{ position: absolute; top:290px;left:50%;margin-left:40px;}
.storehouse .server-h3 .dg{ width: 72px; height: 96px; background:#ff6600;
    transform-origin: 0 0;-webkit-transform-origin: 0 0;
    transform: skewX(15deg); -webkit-transform:skewX(15deg);}
.storehouse .server-h3 span,.storehouse .server-h3 .txt1,.storehouse .server-h3 .txt2{ font-family: 'MonBold','HanBold';position: absolute; z-index: 10;}
.storehouse .server-h3 span{ color:#fff; position: absolute; font-size: 16px;left:40px;top:28px;}
.storehouse .server-h3 .txt1,.server-h3 .txt2{ color:#533f8c; width: 240px;}
.storehouse .server-h3 .txt1{  top:50px;left:40px; font-size: 32px;}
.storehouse .server-h3 .txt2{ top:100px;left:44px;font-size: 22px; }
.en .storehouse .server-h3 .txt2{ top:100px;left:44px;font-size: 20px; }
.storehouse .server-h3{ position: absolute; cursor: pointer;}
.storehouse .server-h3-1{left:24px;top:0;}
.storehouse .server-h3-2{left:318px;top:0;}
.storehouse .server-h3-3{left:24px;top:450px;}
.storehouse .server-h3-4{left:318px;top:450px;}
.en .storehouse .server-h3-3,.en .storehouse .server-h3-4{ top:500px;}
.storehouse .server-h3:hover .dg{width: 100px;  }
.storehouse .server-h3 .txt2_1{ padding:60px 0 0 20px;border-left: 1px solid #ea5514;
    position: absolute ;top:108px;left:28px; width: 200px;
}
.en .storehouse .server-h3 .txt2_1{ padding-top: 80px;}
.storehouse .server-h3:hover  .txt2 div{ padding:74px 0 0 20px;}


.feature{ height: 1660px; position: relative;}
.feature .bg{ height: 560px; background: #f0f5fa; width: 100%; position: absolute;top:500px;left:0;z-index: 10; }
.feature-item{ font-family: 'MonBold','HanBold'; width: 320px;  position: absolute; left:50%;}

.feature-item p,.feature-item div{width: 270px; }
.feature-item-placeholder{ width: 270px;height: 225px; padding:15px;margin-left: 5px; float: left; margin-bottom: 40px; }
.feature-item span{ font-size: 16px; color:#ff6600;}
.feature-item p{ font-size: 22px; color:#543f8d; padding:18px 0 32px 0;}

.feature-item div span{ display: block;color:#543f8d; font-weight: bolder; margin-top: 45px; }
.feature-item .tedian{ position: absolute; left:310px;top:55px; width: 276px;}

.feature-item .k{ width: 310px; height: 255px;border:1px solid #543f8d; display: none; 
   position: absolute; top:-10px;left:-5px; 
}
.feature-item0{ height: 120px; position: absolute; left: 50%; top:260px;margin-left: -396px; border:1px solid #ff6600;}
.feature-item1{top:260px;margin-left: -90px;}
.feature-item2{top:680px;margin-left: -396px;}
.feature-item3{top:1160px;margin-left: -90px;}
.en .feature{height: 2660px; }
.en .feature-item0,.en .feature-item1{ top:380px;}
.en .feature-item2{ top:888px;}
.en .feature-item3{ top:1860px;}
.en .feature-item p{ font-size: 18px;} 
.en .feature-item .tedian p{ width: 100%;text-align: left; font-weight: normal; font-size: 14px;}
.feature .rightKuan{ background: url(../image/k13.png); width: 728px; height: 1185px; 
    position: absolute;left:50%; top:20px;margin-left: 290px; z-index: 20;
}

.superiority{ height: 2060px; position: relative;}
.superiority .leftKuan{ background: url(../image/k4.png); width: 928px; height:1124px ; 
    position: absolute; left: 50%; top:-380px;margin-left: -928px; z-index: 20;}
.superiority .rightKuan{ background: url(../image/k14.png); width: 800px; height:757px ; 
        position: absolute; left: 50%; top:1130px;margin-left: 178px; z-index: 20;}
    
.superiority .bg{height: 756px; background: #f0f5fa; width: 100%; position: absolute;top:280px; z-index: 10;}      
.superiority .bg2{height: 428px; background: #f0f5fa; width: 100%; position: absolute;top:1420px; z-index: 10;}
.superiority .services-box{ left: 50%; margin-left: -398px;top:336px;}
.superiority .services-box .services-item-placeholder{ 
    height: 116px; border-left: 2px solid #ff6600; float: left;margin-top: 30px;
}
.superiority .services-box .services-item{ height: 360px; }
.superiority .services-box .services-item .k{height: 390px;}
.en .superiority{ height:2360px ;}
.en .superiority .services-box .services-item{ height: 460px; }
.en .superiority .services-box .services-item .k{height: 490px;}
.en .superiority .services-box .services-item p{ font-size: 18px; padding:8px 0;}
.en .superiority .bg2{top:1620px;height: 628px; }
.en .superiority .rightKuan{top:1330px; height:997px ; background-size: 100% 100%; }

.news{ height: 720px;position: relative}
.news .bg{height: 370px; background: #f0f5fa; width: 100%; position: absolute;top:234px; z-index: 10;}    
.news .leftKuan{ background: url(../image/k18.png); width: 825px; height: 517px;
    position: absolute;left:50%; margin-left: -1025px;top:-50px;
     z-index: 20;} 
.news  .pic{ background: url(../image/p4.png); width: 470px; height: 318px; position: absolute; top:82px;left:50%;
margin-left: -720px; z-index: 30;} 
.news ul{ width: 690px; position: absolute; left:50%;margin-left: -196px; top:80px; 
    border-top:2px solid #ff6600; padding-top: 32px;padding-bottom: 32px; border-bottom: 2px solid #9d9e9f ;
}
a{color:#656565; text-decoration: none;}
a:hover{ text-decoration:underline;}
.news ul li{ font-size: 14px;line-height: 38px; color:#656565;}

.news ul li b{margin-right: 14px; display: inline-block; font-weight: normal;}
.news ul li span{ float: right;}
.news .pagenation{ width: 690px; 
    position: absolute; left:50%;
    margin-left: -196px; top:536px;text-align: right;
   
}
.news .pagenation a{ font-size: 12px; text-decoration: none;color:#656565; margin-left:10px;}

.search{ height:1286px;position: relative}
.search .bg{height: 355px; background: #f0f5fa; width: 100%; position: absolute;top:234px; z-index: 10;}  
.search .rightKuan{ background: url(../image/k19.png); width: 1003px; height: 554px; 
    position: absolute; left:50%; margin-left: 88px; z-index: 20; top:90px;
} 

.search .l1,.search .l2{ position: relative;width: 988px; }
.search .l1{ height: 188px; border-bottom: 2px solid #a0a1a2; font-size: 58px;color:#ff6600;} 
.search .l1 div{ width: 328px; height: 126px;  line-height: 126px;
    background: #ff6600; display:inline-block; text-decoration: none;
    transform: skewX(20deg); -webkit-transform:skewX(20deg); margin-left: -75px;
}
.search .l1 div span{ transform: skewX(-20deg); -webkit-transform:skewX(-20deg); 
    display: block;width: 328px; text-align: center; color:#fff;}

.search .l2{ height: 148px; line-height: 148px; width: 988px; border-bottom: 2px solid #a0a1a2; font-size: 42px; color:#7e858c;} 
.search .wraper{ width: 1190px; position: absolute; left:50%;margin-left: -613px; z-index: 200;}
.search  .icon{width: 90px; height: 90px; border-radius: 90px; border:1px solid #7e858c;
display: block; position: absolute; top:26px;left:860px; z-index: 999;}
.search .icon b{  width: 44px; height: 1px; background: #7e858c;
    position: absolute; top:50%;left:50%;margin-left: -22px;}
.search .icon i{   background: url(../image/arr4.png); display: block; width:12px; height: 14px; background-size: 100% 100%;
        position: absolute; top:50%;right: -6px;margin-top: -7px;}
.en .search .l2{font-size: 28px;}


.guestbook{ height: 1526px;position: relative}
.guestbook .bg{height:735px; background: #f0f5fa; width: 100%; position: absolute;top:-88px; z-index: 10;}  
.guestbook .pic{background: url(../image/p5.png); width: 1149px; height: 353px; position: absolute; left:50%;margin-left:-603px;top:-425px ;z-index: 20;}
.guestbook .leftKuan{ background: url(../image/k20.png); width: 1050px; height: 444px; position: absolute; left:50%; z-index: 30;
margin-left: -1020px; top:-358px;}
.guestbook .form{ width: 790px; position: absolute; top:145px;left:50%;margin-left: -400px; z-index: 100;}
.guestbook .form span{ font-size: 16px; font-family: 'MonBold'; color: #ff6600; display: block;}
.guestbook .form P{ font-size: 22px; font-family: 'HanBold'; color:#543f8d;padding:20px 0 45px 0;}
.guestbook .form textarea{width: 100%; height: 158px; border:2px solid #dbddde; margin-bottom: 60px;}
.guestbook .form textarea[name=contact]{ height: 76px;}
.guestbook .form textarea.err{ border:2px solid red;}

.contact{ height: 560px;position: relative}
.contact .bg{height:376px; background: #f0f5fa; width: 100%; position: absolute;top:-124px; z-index: 10;}  
.contact .txt1{ position: absolute; top:66px;left:50%; margin-left:-396px; line-height: 40px; z-index: 100; font-size: 22px; font-family: 'Han'; COLOR:#7e858c;}
.contact .txt1 b{ color:#543f8d; display: block; line-height: 50px;}
.contact .txt2{ font-size: 14px;font-family: 'Han'; COLOR:#7e858c; position: absolute; left:50%; top:66px; z-index: 100;
    margin-left: 160px; line-height: 32px; width: 420px;}
.en .contact .txt2{ line-height: 28px;}
.contact .txt2 span{ font-weight: bolder; padding-right: 6px;}
.contact .txt3{ font-size: 22px;font-family: 'Han'; COLOR:#7e858c;
    position: absolute; left:50%; top:276px; margin-left: -396px;; z-index: 100;}
.contact .txt3 b{font-size: 58px;line-height: 86px; width: 400px;
     font-family: 'Han','MonBold'; display: block;}
.contact .rightKuan{ background: url(../image/k21.png) no-repeat; width: 848px; height: 715px;
     position: absolute;left:50%; z-index: 20;margin-left: 50px;top:-250px;}


.btnMore{ width: 348px; height: 50px;
    transform: skewX(20deg); -webkit-transform:skewX(20deg);
    background: #ff6600; display: block; text-decoration: none; color:#fff;
    position: absolute; 
}
.btnMore .c{
    transform: skewX(-20deg); -webkit-transform:skewX(-20deg); 
    font-size: 18px; padding-left: 67px;
    line-height: 50px;
 }
 .btnMore:hover { color:#002f78;text-decoration: none;}
 .btnMore .c .cicle{ 
    width: 90px; height: 90px; border-radius: 90px; border:1px solid #7e858c;
    position: absolute; left:200px;top:50%;margin-top: -45px;
}
.btnMore .c .cicle .line{ 
    width: 44px; height: 1px; background: #7e858c;
    position: absolute; top:50%;left:50%;margin-left: -22px;
}
.btnMore .c .cicle .line span{ 
    background: url(../image/arr4.png); display: block; width:12px; height: 14px; background-size: 100% 100%;
    position: absolute; top:50%;right: -6px;margin-top: -7px;
 }
.btnMore2{height: 76px; }
.btnMore2 .c{line-height: 27px; padding-top: 16px;}
.en .btnMore .c{padding-left: 44px;}
.why .btnMore{top:582px;left:50%;margin-left: 200px;}
.about .btnMore{top:532px; width: 308px;}
.about .btnMore .c .cicle{left:160px;}
.net .btnMore{top:888px;}
.server .btnMore{top:1180px; left:716px;}
.en .server .btnMore{top:1800px; }
.guestbook .btnMore{ width: 256px;}
.guestbook .btnMore .c .cicle{ left:136px;}
.guestbook .btnMore:hover{ width: 328px;}
.guestbook .btnMore:hover .c .cicle{left:170px;}
 .btnMore:hover{ width: 408px;}
 .btnMore:hover .c .cicle{width: 120px; height: 120px; border-radius: 120px;margin-top: -60px;left:230px;}
 .btnMore:hover .c .cicle .line{ width: 130px;margin-left: -92px;}
 .btnMore:hover .c .cicle .line span{  width:21px; height: 24px;margin-top: -13px;}
 .about .btnMore:hover{ width: 378px;}
 .about .btnMore:hover .c .cicle{left:200px;}
 


.caseShare{ position: relative; width: 100%;  }
.caseShare .leftKuan{ background: url(../image/k6.png); width: 720px; height: 580px; 
    position: absolute;top:70px;left:-150px; z-index: 100;}

.btnLeft,.btnRight{background: url(../image/arr3.png); width: 91px; height: 91px;
    position: absolute; top:485px;  z-index: 200; cursor: pointer;
}
.btnLeft{ left:40px; transform: scale(-1,1); -webkit-transform: scale(-1,1);}
.btnRight{left:1140px;}
.caseShare-box{ width: 7720px; margin-top: 60px;}
.caseShare-item{ width: 1175px; height: 625px; position: relative; float: left;}
.caseShare-item .intro{ background: url(../image/kuang.png); width: 382px; height: 542px; 
    position: absolute; top: 80px; right: 0;box-sizing: border-box; padding:32px 40px 0 76px;
    transform-origin: top right; -webkit-transform-origin: top right;background-size: 100% 100%;
    cursor: pointer;
}



.intro-title{ font-size: 22px;  color:#543f8d; font-family: 'HanBold'; height: 40px;}
.intro-en{ font-family: 'MonBold'; font-size: 58px; color:#7e858c; opacity: 0.5;writing-mode : tb;
    position: absolute;right:36px;top:10px;}
.intro-content{  color:#656565; padding-top: 20px;}
.intro-content span{ display: block; padding: 20px 0 5px;font-family: 'HanBold'; color:#ea5514; font-size: 14px;}
.caseShare-item .more{ display: block; width: 188px; height: 46px; text-align: center; line-height: 46px; font-family: 'HanBold'; color:#fff;
    transform: skewX(20deg); background: #ff6600; margin-top: 10px; opacity: 0;
    position: absolute; top:422px;right:126px;
 }
 .caseShare-item .more  div { transform: skewX(-20deg); }
.more-icon{ background: url(../image/arr3.png); width: 91px; height: 91px; position: absolute; bottom: 40px; right: -68px;}
.index .caseShare-item .intro:hover { width: 415px; height: 570px; }
.index .caseShare-item .intro:hover .more{ opacity: 1;}
.index .caseShare-item .intro:hover .intro-content{ font-size: 15px ;}
.en .caseShare-item .intro{ background: url(../image/kuang4.png);border-bottom: 2px solid #ff6600;
    padding:16px 40px 0 72px;}
.en .home .caseShare-item .intro{ background-size: 100% 100%;}
.en .intro-title{ line-height: 26px;}
.en .intro-content{ padding-top: 56px; }
.en .case-item .caseShare-item .intro .intro-content{line-height: 26px;}
.en .caseShare-item .more{top:482px;}

.case { height: 520px; position: relative;}
.case-item{ height: 820px; position: relative;}

.case-item5{ height: 640px;}
.case-item6{ height: 1040px;}
.case-item7{ height: 1100px;}
.case-item8{ height: 1100px;}
.case-item9{ height: 1200px;}
.case-item .caseShare-item{left:50%;margin-left: -432px; width: 382px;z-index: 100; }
.case-item .caseShare-item .intro{cursor: default; }
.case-item .caseShare-item .intro-en{ font-size: 88px; right: 20px;}
.case-item .caseShare-item .intro:hover { width: 382px; height: 542px; }

.case-item2 .caseShare-item .intro,.case-item2 .caseShare-item .intro:hover{ height: 617px; }
.case-item3 .caseShare-item .intro,.case-item3 .caseShare-item .intro:hover,
.case-item4 .caseShare-item .intro,.case-item4 .caseShare-item .intro:hover,
.case-item5 .caseShare-item .intro,.case-item5 .caseShare-item .intro:hover,
.case-item6 .caseShare-item .intro,.case-item6 .caseShare-item .intro:hover,
.case-item7 .caseShare-item .intro,.case-item7 .caseShare-item .intro:hover,
.case-item8 .caseShare-item .intro,.case-item8 .caseShare-item .intro:hover,
.case-item9 .caseShare-item .intro,.case-item9 .caseShare-item .intro:hover{background-size: cover; border-bottom: 2px solid #ea5514;}
.case-item3 .caseShare-item .intro,.case-item3 .caseShare-item .intro:hover{ height: 342px; }
.case-item4 .caseShare-item .intro,.case-item4 .caseShare-item .intro:hover,.case-item5 .caseShare-item .intro,.case-item5 .caseShare-item .intro:hover{ height: 422px; }
.case-item6 .caseShare-item .intro,.case-item6 .caseShare-item .intro:hover,
.case-item7 .caseShare-item .intro,.case-item7 .caseShare-item .intro:hover,
.case-item8 .caseShare-item .intro,.case-item8 .caseShare-item .intro:hover,
.case-item9 .caseShare-item .intro,.case-item9 .caseShare-item .intro:hover{ height: 456px;}
.case-item8 .pic{ 
    background: url(../image/case3.png); width:726px; height: 375px;  background-size: 100% 100%;
    position: absolute;left:50%; margin-left: -105px;top:-270px; z-index: 18;
}
.case-item9 .pic{ 
    background: url(../image/case4.png); width:856px; height: 375px;  background-size: 100% 100%;
    position: absolute;left:50%; margin-left: -500px;top:-320px; z-index: 18;
}
.en .case-item1{ height: 1020px;}
.en .case-item2{ height: 1020px;}
.en .case-item4{ height: 1020px;}
.en .case-item5{ height: 1020px;}
.en .case-item9{ height: 1560px;}

.en .case-item1 .caseShare-item .intro,.en .case-item1 .caseShare-item .intro:hover{ height: 610px; }
.en .case-item2 .caseShare-item .intro,.en .case-item2 .caseShare-item .intro:hover{ height: 790px; }
.en .case-item4 .caseShare-item .intro,.en .case-item4 .caseShare-item .intro:hover{ height: 550px; }
.en .case-item5 .caseShare-item .intro,.en .case-item5 .caseShare-item .intro:hover{ height: 470px; }
.en .case-item6 .caseShare-item .intro,.en .case-item6 .caseShare-item .intro:hover{ height: 650px; }
.en .case-item7 .caseShare-item .intro,.en .case-item7 .caseShare-item .intro:hover{ height: 560px; }


.case-item .caseShare-item .intro .intro-content{ line-height: 30px;}
.case-item .caseShare-item .intro .intro-num{ font-size: 16px; font-family: 'MonBold'; 
    position: absolute;top:0;left:0; color:#ff6600;top:16px; width: 36px; text-align: center;}
.case-item .caseShare-item .intro .intro-content span{font-size: 22px; margin-bottom: 40px;}
.en .case-item .caseShare-item .intro .intro-content span{margin-bottom: 10px;}
.case-item .caseShare-item .intro .intro-content2{ position: absolute; top:76px;left:456px; width: 482px; text-align: justify;}
.en .case-item .caseShare-item .intro .intro-content2{ line-height: 24px;top:56px; text-align: left;}
.case-item .bg{height: 448px; background: #f0f5fa; width: 100%; position: absolute;top:58px; z-index: 10;}  
.case-item .bg2{ height: 480px;top:520px;}
.case-item6 .bg{height: 576px;top:-110px;}
.case-item7 .bg{height: 526px;top:170px;}
.case-item8 .bg{height: 316px;top:30px;}
.case-item9 .bg{height: 316px;top:370px;}
.en .case-item6 .bg{ top:130px;}
.en .case-item9 .bg{ top:670px;}
.case-item .leftKuan1{ background: url(../image/k15.png); width: 920px; height: 580px; 
    position: absolute;left:50%; top:-178px; margin-left: -990px; z-index: 20;} 
.case-item .leftKuan2 { background: url(../image/k16.png); width: 937px; height: 1376px; 
        position: absolute;left:50%; top:-178px; margin-left: -1077px; z-index: 20;top:-709px;} 
.case-item .leftKuan3 { background: url(../image/k16.png); width: 937px; height: 788px; 
            position: absolute;left:50%; top:-178px; margin-left: -867px; z-index: 20;top:-430px;} 

.case-item .leftKuan4 { background: url(../image/k15t.png); width: 1550px; height:980px;background-size: 100% 100%;
           position: absolute;left:50%; top:-178px; margin-left: -1625px; z-index: 20;top:-430px;} 
    
.case-item .rightKuan1{ background: url(../image/k14.png); width: 800px; height: 757px;
     position: absolute;left:50%;margin-left: 184px; top:-10px; z-index: 20;}
.case-item .rightKuan2{ background: url(../image/k17.png); width: 832px; height: 750px;
     position: absolute;left:50%;margin-left: 190px; top:76px; z-index: 20;}
.case-item .rightKuan3{ background: url(../image/k14t.png); width: 800px; height: 757px;
        position: absolute;left:50%;margin-left: 184px; top:-180px; z-index: 20;}
     
.case-item .caseShare-item .intro .intro-content .jsd li{ position: relative;margin-left: 20px;padding-bottom: 10px;}
.case-item .caseShare-item .intro .intro-content .jsd b{margin-left: -20px; color:#533f8c; }
.case-item .caseShare-item .intro .intro-content .jsd span{ font-size: 12px; padding: 0;margin:0; position: absolute;left:-20px; color:#7e858c;}


.footer {background: #f0f5fa;color:#888888;padding: 44px 0 24px 0; overflow: hidden;}
.footer .wraper { padding:0 120px 0 120px; overflow: hidden;}
.footer .fl{ width: 328px; height: 210px; float: left; }
.footer .fl img{ width: 181px;}
.footer .fl p{  font-size: 14px; padding-top: 22px;}
.footer .fr{ float: right; display: flex; padding-bottom: 45px; position: relative;margin-right: -35px;}
.footer .fr .arr{ background: url(../image/arr5.png); width: 69px;height: 9px; position: absolute; bottom: 40px;right: 40px;}
.footer .fr div{ display: inline-block; width: 25%; margin: 0; padding:0;margin-right: 35px; }
.footer .fr div ul li { display: block; 
    width: 170px;
    list-style: none;
    font-size: 12px; line-height: 16px; padding:6px 0 6px;
    text-align: left;
}
.footer .fr p{ padding:35px 0 24px; font-size: 14px; display: block; font-weight: bolder;
    border-bottom: 1px solid #888888; margin-bottom: 20px;
}

.footer ul li a {color: #7e858c; text-decoration: none;}
.footer ul li a:hover{ text-decoration: underline; color:#5a458c;}
.footer .rhl{background: url(../image/rhl.png) ; background-size: 100% 100%; 
    width: 145px; height: 30px; margin-top: 90px;
     display: block;}
.footer .social{ margin-top: 90px; display: none; }
.footer .social a { display:inline-block;  width: 20px; height: 20px; margin-right: 30px; background: url(../image/social.png);}
.footer .social .instagram { background-position: -20px 0;}
.footer .social .twitter { background-position: -40px 0;}
.footer .social .vimeo { background-position: -60px 0;}
.footer  .clear {  border-top: 1px solid #d8d9da; font-size: 12px; line-height: 48px;}
.footer  .clear  a{ margin-left: 10px; text-decoration: none; color:#7e858c}
.footer  .clear  a:hover{ text-decoration: underline; color:#002f78;}


@media screen and (-webkit-max-device-pixel-ratio: 1.25) and (max-width:1380px){

}
@media screen and (-webkit-max-device-pixel-ratio: 1.25) and (max-width:1280px){
  
  
}
@media screen and (-webkit-max-device-pixel-ratio: 1.25)  and (max-width:1080px){
  

}


@media screen and (-webkit-max-device-pixel-ratio: 1.25) and (max-width:960px){

    .wraper {
        min-width: 960px;
    }
 
   

}

.top{ top:0;}
.right{ right:0;}
.left{ left: 0;}


.news-wraper{ width: 998px; margin:0 auto;min-height: 998px; color:#7e858c;}
.news-wraper .title,.news-wraper .info,.news-wraper .content,.prevnext{ width: 890px;}
.news-wraper .title{ font-size: 58px; line-height: 80px;}
.news-wraper .info{ font-size: 14px; line-height: 40px;margin-top: 20px;
     border-bottom: 1px solid #7e858c; }
.news-wraper .info span{ margin-right: 50px;}
.news-wraper .content{ font-size: 14px;padding:32px 0 32px 0;line-height: 32px;}
.prevnext{ border-top:1px solid #7e858c; padding-bottom: 156px;}
.prevnext p{ font-size: 14px; padding-top: 56px;}
.prevnext p span{margin-right: 30px;}

.tname{display: block; position: absolute; top:-120px;} 


.tipBox{ position:absolute; top:0; left:0; z-index:999999999; width:100%; height:100%;}
.tipBox .tip{ padding:20px 50px 20px 50px; color:#FFF; background:rgba(0,0,0,0.85); position:absolute; top:50%;  left:50%;transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); animation:tip 2s forwards; -webkit-animation:tip 2s forwards; display:block; border-radius:4px; }
@-webkit-keyframes tip {
  0%{ margin-top:100px; opacity:0;}
  20%,66%{ margin-top:0;opacity:1;}
  100%{  opacity:0;}
}
@keyframes tip {
  0%{ margin-top:100px; opacity:0;}
  20%,66%{ margin-top:0; opacity:1;}
  100%{  opacity:0;}
}
.alertBox{ position: fixed; top:0;left:0; background: rgba(0,0,0,.3); width: 100%; height: 100%;  z-index: 999999;}
.alertBox .msg{ background:#fff; width: 76%;max-width: 512px; border-radius: 16px; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.msgTitle { line-height: 16px; padding:32px 0 20px 0;  color:#000; text-align: center; width: 100%; ;}
.msgTitle p{ width: 84%; margin:0 auto;}
.msgTool{ display: flex;  border-top:1px solid #e5e5e5;}
.msgTool a{  line-height: 36px;padding-bottom:8px; border-right:1px solid #e5e5e5; color:#2f83e5; text-decoration: none; text-align: center;  } 
.msgTool a:last-child{ border-right: none;}
.msgTn2 a{width: 50%;}
.msgTn1 a{width: 100%;}

@media only screen and (max-width: 375px) {
  .alertBox {
    font-size: 0.8em !important;
  }
  .mp32{padding:8px;}
}

@media only screen and (min-width: 375px) and (max-width: 750px){
 
  .alertBox {
    font-size: 1.1em !important;
  }
  .tipBox .tip{font-size: 1.4em !important;}
  .mp32{padding:12px;}
}

@media only screen and (min-width: 750px) and (max-width: 960px) {

  .mp32{padding:16px;}
}
@media only screen and (min-width: 960px) {
 
}
@media only screen and (min-width: 375px) {
  .msgTitle {
    font-size:14px;line-height:24px;
    padding:24px 0 16px 0; 
  }
  .tipBox .tip{border-radius: 8px;}
  .alertBox .msg{border-radius: 13px;max-width: 380px; }
  .msgTool a{ line-height:36px; font-size:14px;}
  .tipBox .tip{font-size: 16px !important;}
}