/* CSS Document */
@-webkit-keyframes twinkle {
    0%{ line-height:60px;   }
    100%{   line-height:90px; color:rgba(160,160,160,0.1);  }
}
@-moz-keyframes twinkle {
    0%{ line-height:60px;   }
    100%{   line-height:90px; color:rgba(160,160,160,0.1);  }
}
@-ms-keyframes twinkle {
    0%{ line-height:60px;   }
    100%{   line-height:90px; color:rgba(160,160,160,0.1);  }
}
@-o-keyframes twinkle {
    0%{ line-height:60px;   }
    100%{   line-height:90px; color:rgba(160,160,160,0.1);  }
}


/* 手机版css******************************************************************/
@media screen and (max-width: 600px){

/*业务架构*/ 
.business{ width:100%; height:770px; margin:0 auto;}
.business-head{ width:100%; height:84px; text-align:center; }
.business-title{ font-size:20px; padding:22px 0 0 0; }
.business-info{ line-height:20px; font-size:12px; }
.business-content{ width:100%;}
.business-content ul{ width:100%; height:680px;}
.business-content ul a{ display:block; position:relative; }
.business-content ul a:before{ content:''; display:block; width:100%; height:100%; position:absolute; -webkit-transition:0.5s; background:rgba(0,0,0,0.1); }
.business-content ul a:hover:before{background:rgba(253,155,0,0.8); }
.business-content ul li{width:100%; height:170px; float:left;} 
.business-content ul li .text{width:100%; height:50px; position:absolute; top:20%; text-align:center; color:#fff; font-size:20px; line-height:50px;}
.business-content ul li .text span{ display:block; line-height:40px; font-size:14px; text-transform:uppercase;}
.business-content ul li .text span:before{content:''; display:block; width:40px; height:1px; -webkit-transition:0.5s; background:#fff; margin:0 auto;}
.business-content ul li:hover .text span:before{width:120px;}
.business-content ul li .image{ width:100%; height:170px; -webkit-transition:0.5s; background-position:center center; background-size:100% auto; }
.business-content ul li:hover .image{ background-size:110% auto; }

/* 5D+科技呈现模式 */ 
.mode{ width:100%; height:820px; margin:0 auto; }
.mode-head{ width:100%; height:84px; text-align:center; }
.mode-title{ font-size:20px; padding:14px 0 0 0; }
.mode-info{ line-height:22px; font-size:12px; }
.mode-content{ width:100%; height:720px; }
.mode-content ul{ width:100%; height:100%;  background:url(../images/mode-back.jpg) center center; background-size:auto 100%;}
.mode-content ul a{ display:block; position:relative;}
.mode-content ul li{width:50%; height:240px; float:left; border:1px #fff solid; border-top:none; border-left:none; -webkit-transition:1s; background:rgba(0,0,0,0.4); } 
.mode-content ul li:hover{ background:rgba(253,155,0,0.8); }
.mode-content ul li .text{width:100%; height:60px; position:absolute; top:30px; text-align:center; color:#fff; font-size:18px; line-height:26px;}
.mode-content ul li .text span{ display:block; font-size:12px; font-weight:bold; color:rgba(255,255,255,0.8); text-transform:uppercase; position:relative; }
.mode-content ul li .text span:after{content:''; display:block; width:40px; height:1px; top:40px; left:50%; position:absolute; -webkit-transition:0.5s; background:#fff; margin:0 0 0 -20px;}
.mode-content ul li:hover .text span:after{width:80px; margin:0 0 0 -40px;}
.mode-content ul li .info{ width:100%; height:100px; position:absolute; top:110px; padding:0 22px; font-size:12px; line-height:20px; color:#fff; text-align:center; }


/*主营项目*/ 
.project-box {width:100%; height:720px; position:relative; }
.project { margin:0 auto; width:100%; height:100%; overflow:hidden; position:relative;}
.project-head{ width:auto; height:80px; text-align:center; }
.project-title{ font-size:20px; padding:10px 0 0 0; }
.project-info{ line-height:24px; font-size:12px; }
.project-content{display:none;}
.project-content-m { height:560px; width:100%; }
.project-content-m ul { height:100%; width:100%; }
.project-content-m li { width:48%; height:auto; float:left; margin:0 0 6px 6px; background:#f0f0f0; text-align:center; }	
.project-content-m li img { width:80%; height:auto; border:#acacac 4px solid; margin:24px 0 0 0;  }	
.project-content-m li p { text-align:center; line-height:30px; color:#546672; margin:0 0 12px 0; font-size:14px; }
.project-content-more{ width:100%; height:60px;text-align:center; position:relative; }
.project-content-more a{ line-height:60px; font-size:32px; color:rgba(0,0,0,0.2); position:absolute; top:-2px; left:50%; margin:0 0 0 -14px;
animation:twinkle 1s infinite;
animation-direction:alternate;
}
.project-box .left-arrow,.right-arrow{ display:none;}

}


/* ipad版css*************************************************************************************************************/
@media screen and (min-width: 600px) and (max-width: 1024px){

/*业务架构*/ 
.business{ width:100%; height:auto; margin:0 auto;}
.business-head{ width:100%; height:100px; text-align:center; }
.business-title{ font-size:24px; padding:24px 0 0 0; }
.business-info{ line-height:30px; font-size:14px; }
.business-content{ width:100%;}
.business-content ul{ width:100%; height:300px;}
.business-content ul a{ display:block; position:relative; }
.business-content ul a:before{ content:''; display:block; width:100%; height:100%; position:absolute; -webkit-transition:0.5s; background:rgba(0,0,0,0.1); }
.business-content ul a:hover:before{background:rgba(253,155,0,0.8); }
.business-content ul li{width:25%; height:100%; float:left;} 
.business-content ul li .text{width:100%; height:50px; position:absolute; top:32%; text-align:center; color:#fff; font-size:20px; line-height:50px;}
.business-content ul li .text span{ display:block; line-height:40px; font-size:14px; text-transform:uppercase;}
.business-content ul li .text span:before{content:''; display:block; width:40px; height:1px; -webkit-transition:0.5s; background:#fff; margin:0 auto;}
.business-content ul li:hover .text span:before{width:120px;}
.business-content ul li .image{ width:100%; height:280px; -webkit-transition:0.5s; background-position:center center; background-size:auto 100%; }
.business-content ul li:hover .image{ background-size:110% auto; }

/* 5D+科技呈现模式 */ 
.mode{ width:100%; height:820px; margin:0 auto; }
.mode-head{ width:100%; height:100px; text-align:center; }
.mode-title{ font-size:24px; padding:20px 0 0 0; }
.mode-info{ line-height:30px; font-size:14px; }
.mode-content{ width:100%; height:720px; }
.mode-content ul{ width:100%; height:100%;  background:url(../images/mode-back.jpg) center center; background-size:auto 100%;}
.mode-content ul a{ display:block; position:relative;}
.mode-content ul li{width:50%; height:240px; float:left; border:1px #fff solid; border-top:none; border-left:none; -webkit-transition:1s; background:rgba(0,0,0,0.4); } 
.mode-content ul li:hover{ background:rgba(253,155,0,0.8); }
.mode-content ul li .text{width:100%; height:60px; position:absolute; top:50px; text-align:center; color:#fff; font-size:20px; line-height:30px;}
.mode-content ul li .text span{ display:block; font-size:14px; font-weight:bold; color:rgba(255,255,255,0.8); text-transform:uppercase; position:relative; }
.mode-content ul li .text span:after{content:''; display:block; width:40px; height:1px; top:40px; left:50%; position:absolute; -webkit-transition:0.5s; background:#fff; margin:0 0 0 -20px;}
.mode-content ul li:hover .text span:after{width:80px; margin:0 0 0 -40px;}
.mode-content ul li .info{ width:100%; height:100px; position:absolute; top:136px; padding:0 60px; font-size:14px; line-height:24px; color:#fff; text-align:center; }


/*主营项目*/ 
.project-box {width:100%; height:520px; position:relative; }
.project { margin:0 auto; width:100%; height:100%; overflow:hidden; position:relative;}
.project-head{ width:auto; height:100px; text-align:center; }
.project-title{ font-size:24px; padding:24px 0 0 0; }
.project-info{ line-height:30px; font-size:14px; }
.project-content{display:none;}
.project-content-m { height:310px; width:100%; }
.project-content-m ul { height:100%; width:100%; }
.project-content-m li { width:23%; height:auto; float:left; margin:0 0 12px 12px; background:#f0f0f0; text-align:center; }	
.project-content-m li img { width:80%; height:auto; border:#acacac 4px solid; margin:30px 0 0 0;  }	
.project-content-m li p { text-align:center; line-height:40px; color:#546672; margin:0 0 20px 0; }
.project-content-more{ width:200px; height:60px; margin:0 auto; text-align:center;}
.project-content-more a{ line-height:60px; font-size:50px; color:rgba(0,0,0,0.2);
-webkit-animation:twinkle 1s infinite;	
-moz-animation:twinkle 1s infinite;	
-ms-animation:twinkle 1s infinite;	
-o-animation:twinkle 1s infinite;	
animation-direction:alternate;
}
.project-box .left-arrow,.right-arrow{ display:none;}

}


/*电脑端css**********************************************************************************************************/
@media screen and (min-width: 1024px){

/*业务架构*/
.business{ width:1920px; height:800px; margin:0 auto;}
.business-head{ width:100%; height:200px; text-align:center; }
.business-title{ font-size:34px; padding:60px 0 0 0; }
.business-info{ line-height:30px; }
.business-content{ width:100%;}
.business-content ul{ width:100%; height:600px;}
.business-content ul a{ display:block; position:relative; }
.business-content ul a:before{ content:''; display:block; width:100%; height:100%; position:absolute; -webkit-transition:0.5s; background:rgba(0,0,0,0.1); }
.business-content ul a:hover:before{background:rgba(253,155,0,0.8); }
.business-content ul li{width:25%; height:100%; float:left;} 
.business-content ul li .text{width:100%; height:100px; position:absolute; top:40%; text-align:center; color:#fff; font-size:28px; line-height:60px;}
.business-content ul li .text span{ display:block; line-height:40px; font-size:18px; text-transform:uppercase;}
.business-content ul li .text span:before{content:''; display:block; width:40px; height:2px; -webkit-transition:0.5s; background:#fff; margin:0 auto;}
.business-content ul li:hover .text span:before{width:120px;}
.business-content ul li .image{ width:100%; height:600px; -webkit-transition:0.5s; background-position:center center; background-size:100% auto; }
.business-content ul li:hover .image{ background-size:110% auto; }

/* 5D+科技呈现模式 */
.mode{ width:1920px; height:900px; margin:0 auto; }
.mode-head{ width:100%; height:200px; text-align:center; }
.mode-title{ font-size:34px; padding:60px 0 0 0; }
.mode-info{ line-height:30px; }
.mode-content{ width:100%; height:700px; }
.mode-content ul{ width:100%; height:100%;  background:url(../images/mode-back.jpg) center top; background-size:100% auto;}
.mode-content ul a{ display:block; position:relative;}
.mode-content ul li{width:640px; height:350px; float:left; border:1px #fff solid; border-top:none; border-left:none; -webkit-transition:1s; background:rgba(0,0,0,0.4); } 
.mode-content ul li:hover{ background:rgba(253,155,0,0.8); }
.mode-content ul li .text{width:100%; height:100px; position:absolute; top:90px; text-align:center; color:#fff; font-size:26px; line-height:36px;}
.mode-content ul li .text span{ display:block; font-size:16px; font-weight:bold; color:rgba(255,255,255,0.8); text-transform:uppercase; position:relative; }
.mode-content ul li .text span:after{content:''; display:block; width:40px; height:2px; top:60px; left:50%; position:absolute; -webkit-transition:0.5s; background:#fff; margin:0 0 0 -20px;}
.mode-content ul li:hover .text span:after{width:80px; margin:0 0 0 -40px;}
.mode-content ul li .info{ width:100%; height:100px; position:absolute; top:220px; padding:0 80px 0 80px; font-size:14px; line-height:24px; color:#fff; text-align:center; }


/*主营项目*/ 
.project-box {width:100%; height:660px; position:relative;}
.project { margin:0 auto; width:1920px; height:100%; overflow:hidden; position:relative;}
.project-head{ width:auto; height:200px; text-align:center; }
.project-title{ font-size:34px; padding:60px 0 0 0; }
.project-info{ line-height:30px; }
.project-content { height:460px; }
.project-content li { width:300px; height:auto; float:left; margin:0 10px;  text-align:center; background:#f0f0f0; -webkit-transition:0.5s; }	
.project-content li:hover { box-shadow:2px 2px 10px #dfdfdf; background:#fff; }		
.project-content li img { width:220px; height:auto; border:#acacac 4px solid; margin:30px 0 0 0;  }	
.project-content li p { text-align:center; line-height:40px; color:#546672; margin:0 0 20px 0; }
.project-box .arrow{position:absolute; font-size:60px; color:rgba(0,0,0,0); }	
.project-box:hover .arrow{ position:absolute; font-size:60px; color:rgba(0,0,0,0.6);}	
.project-box .left-arrow{ display:none; bottom:240px; left:100px; }
.project-box .right-arrow{bottom:240px; right:100px;}


}