@charset "utf-8";
.topbanner{ height:100%; padding:0px; margin:0px; overflow:hidden;}

.topnav{ display:none;}


.header{ position:fixed; top:0; z-index:5; width:100%;}
.header .logo{  margin-left:2%; }
.header .nav{  margin-right:2%; }

.header .nav ul li a{ font-weight:100; color:#FFF}
.header .nav ul li a:hover{ color:#fff;}


.header.notwo .nav ul li a:hover{ color:#2C8BE9;}


.banbg{
	background: ;
    position: absolute;
    width: 100%;
    height: 100%; z-index:2}
.picbanner{ height:100%; position:absolute; z-index:4; width:100%; top:0px; }

.picbanner i{ height:1px; width:100%; background:url(../videopic/line.png) no-repeat center; position:absolute; bottom:55px;}



.picbanner .picbanner_1,.picbanner .picbanner_2,.picbanner .picbanner_3{ position: absolute; height:100%; width:100%;}

.picbanner li{ width:100%; text-align: center; position:absolute;}
/*.picbanner .picbanner_1_1{ background:url(videopic/b1.png) no-repeat center; width:100%; height:411px; text-indent:-10000px; top:50%; margin-top:-235px;}*/
.picbanner .picbanner_1_1{ width:100%; height:411px; text-indent:-10000px; top:50%; margin-top:-315px; opacity:0;}

/*.picbanner .picbanner_1 .picbanner_1_1{ background:url(../images/b1.png) no-repeat center; }
.picbanner .picbanner_2 .picbanner_1_1{ background:url(../images/b2.png) no-repeat center;}
.picbanner .picbanner_3 .picbanner_1_1{ background:url(../images/b3.png) no-repeat center;}*/

/*.picbanner .picbanner_1_2{top:50%; margin-top:220px; font-size:16px; color:#FFF; letter-spacing:15px;}*/
.picbanner .picbanner_1_2{top:50%; left:18%; margin-top:300px; font-size:16px; color:#FFF; letter-spacing:15px; opacity:0;}



.anan { width:285px; position:absolute; left:50%; margin-left:-142px; bottom:40px;}
/*.anan li{ float:left; width:15px; height:15px; margin-left:30px; margin-right:30px; display:block; position:static; border-radius:50%; -webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in;padding:6px; cursor:pointer}
.anan li:hover{background: rgba(255, 255, 255, 0.13);}
.anan li:before{ display:block; width:15px; height:15px; background:#fff; content: " ";display: block;  border-radius:12px;}*/



.anan li {
    
    width: 33px;
    height: 33px;
    cursor: pointer; float:left; margin-left:30px; margin-right:30px; display:inline-block; position:static;
}


.anan li span {
    display: block;
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #fff;
    margin: 12px auto;
    z-index: 2;
    opacity: 0.7;
    -webkit-opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
    transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -webkit-transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -moz-transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -ms-transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
}

.anan li:hover span,.anan li.on span {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}


.anan li span:before {
    width: 16px;
    height: 16px;
    position: absolute;
    content: '';
    left: -5px;
    top: -5px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 1px solid #fff;
    transition: all .6s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -webkit-transition: all .6s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -moz-transition: all .6s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -ms-transition: all .6s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
}

.anan li:hover span:before,.anan li.no span:before {
    transform: scale(1.8,1.8);
    -webkit-transform: scale(1.8,1.8);
    -moz-transform: scale(1.8,1.8);
    -ms-transform: scale(1.8,1.8);
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
   
}




.anan li span:after {
    position: absolute;
    content: '';
    left: -4px;
    top: -4px;
    z-index: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    background-color: #fff;
    transform: scale(0.3,0.3);
    -webkit-transform: scale(0.3,0.3);
    -moz-transform: scale(0.3,0.3);
    -ms-transform: scale(0.3,0.3);
    transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -webkit-transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -moz-transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -ms-transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
}

.anan li:hover span:after,.anan .no span:after{
    opacity: 0.3;
    -webkit-opacity: 0.3;
    -moz-opacity: 0.3;
    filter: alpha(opacity=30);
    left: -4px;
    top: -4px;
    transform: scale(1.5,1.5);
    -webkit-transform: scale(1.5,1.5);
    -moz-transform: scale(1.5,1.5);
    -ms-transform: scale(1.5,1.5);
    z-index: 0;
}





.header,.header .logo,.header .nav,.header .logo img {
    transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -webkit-transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -moz-transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
    -ms-transition: all .4s cubic-bezier(0.45,0.55,0.55,0.45) 0s;
}

.header.no {
	background: rgba(0, 0, 0, 0.34);
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}

.header.no .logo{ height:70px;}
.header.no .logo img{ margin-top:0px;}

.header.no .nav {
    padding-top: 13px;
}



.header.notwo {
	background: #fff;
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
}



.header.notwo .logo{ height:70px; background:url(../images/logothree.png) no-repeat 0px 0px}
.header.notwo .logo img{ margin-top:0px; opacity:0;}
.header.notwo .nav {
    padding-top: 13px;
}
.header.notwo .nav a{ color: #333}


.sbanimte {
    position: absolute;
    left: 50%;
    margin-left: -15px;
    bottom: 132px;
    width: 20px;
    height: 31px;
    background: url(../videopic/sbbg.png) no-repeat center center;
    z-index: 3;
}
.sbanimte span {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.sbanimte img {
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: 6px;
    opacity: 1;
    animation: aimtea 1s cubic-bezier(0.45,0.45,0.45,0.45) 0s infinite alternate;
    -webkit-animation: aimtea 1s cubic-bezier(0.45,0.45,0.45,0.45) 0s infinite alternate;
}
@keyframes aimtea
{ 
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.325, 0.225, 0.335, 1.000);
  } 
  20%{
	  opacity:0.5;
	   top:8px;
	  }
  40%{
	  opacity:0.8;
	   top:10px;
	  }
  60%{
	  opacity:1;
	   top:12px;
	  }
  80%{
	  opacity:0.8;
	   top:14px;
	  }
  to{
	  opacity:0.5;
	   top:16px;
	 }
}
@-webkit-keyframes aimtea
{ 
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.325, 0.225, 0.335, 1.000);
  } 
  20%{
	  opacity:0.5;
	   top:8px;
	  }
  40%{
	  opacity:1;
	   top:10px;
	  }
  60%{
	  opacity:0.5;
	   top:12px;
	  }
  80%{
	  opacity:1;
	   top:14px;
	  }
  to{
	  opacity:0.5;
	   top:16px;
	 }  
}


.caseshead{ text-align:center;padding-top:130px; height:632px;}
.caseshead h1{ color: #2F2F2F; font-weight:100; margin-bottom:20px; margin-top:-30px; font-size:40px;}
.websx{ width:100%; margin:0 auto; padding-bottom: 30px;
    border-bottom: 1px solid #EFEFEF; font-size:14px; margin-top:30px;}
.websx a{display: inline-block;
    width: 102px;
    height: 28px;
    border: 1px solid #9D9D9D;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    border-radius: 5px;
    color: #5D5D5D;}
.websx span{    margin-left: 20px;
    color: #8C8C8C;}

.websx .goto{ margin-left:4%}
.websx .goto:hover{ background:#000; color:#FFF; border:1px solid #000}
.websx .postion{ float:right; margin-right:4%;  color: #8C8C8C;}
.websx .postion a{ border:none; width:auto; color: #8C8C8C;}
.fxbtn{ float:right; text-align:right; border:none;}
.fxbtn a{display: inline-block;
    margin-left: 18px;
    opacity: 0.7;
    vertical-align: bottom; width:29px; height:31px; border:none}
.websx .bdshare-button-style1-24 a:hover{opacity:1}

.fxbtn .bds_tsina{ background:url(../videopic/sina-icon.png) no-repeat}
.bds_tsina{background-position: 0px 0px!important;}

.fxbtn .bds_tsina{ background:url(../videopic/sina-icon.png) no-repeat}
.bds_tsina{background-position: 0px 0px!important;}

.fxbtn .bds_weixin{ background:url(../videopic/weixin-icon.png) no-repeat}
.bds_weixin{background-position: 0px 0px!important;}

.fxbtn .bds_tqq{ background:url(../videopic/qq-icon.png) no-repeat}
.bds_tqq{background-position: 0px 0px!important;}

.websx .bdshare-button-style1-24 a, .websx .bdshare-button-style1-24 .bds_more{ margin:0px; padding:0px; margin-right:20px; width:29px; height:31px; float:none;     margin-bottom: 30px; display:block}

.bdshare-button-style1-24{position: absolute;
    top: 290px;
    left: 50%;
    margin-left:-430px;}






#xys{background:url(../html5/bg_bg01.jpg) top center no-repeat; height:750px; width:100%; position:relative; overflow:hidden; }

#xys .zdzd{ position:absolute; top:50px;}
#xys h1{ text-align:center; color:#FFF; font-weight:100; font-size:50px; margin-top:150px;}
#xys .text2{ text-align:center; font-size:16px; color:#FFF; margin-top:10px;}
#xys .zixun{ height:50px; text-align:center; margin-top:20px; position:absolute; z-index:5; width:100%; top:248px;}
#xys .zixun a{ display:inline-block;     border-radius: 3px; background:#FFF; color:#787878; width:150px; margin-left:10px; margin-right:10px; height:35px; line-height:35px; font-size:14px;}
#xys .zixun a:hover{ background:#2C8BE9; color:#FFF}
#xys .img1{ position:absolute; left:50%; margin-left:-164px; bottom:-20px; z-index:4}


.section1,.section2,.section3 ,.section4,.section5{ text-align:center; padding-top:40px;}
.section1 h2,.section2 h2,.section3 h2,.section4 h2,.section5 h2 {
    font-size: 36px;
    line-height: 62px;
    color: #62636d; padding-top:30px; display:block;
}
.section1 h2:after,.section2 h2:after,.section3 h2:after,.section4 h2:after,.section5 h2:after {
    display: block;
    content: "";
    width: 36px;
    height: 3px;
    background: #79b5ff;
    margin:20px auto 32px;
}
.section1 .shumin,.section2 .shumin,.section3 .shumin,.section4 .shumin,.section5 .shumin{ text-align:center; color:#5B5B5B; font-size:14px;}

.hdp{ height:530px; width:100%; position:relative; margin-top:50px;}
.hdp .hdp_1{ position:absolute; left:50%; width:723px; margin-left:-480px; background:url(../html5/img02.png) no-repeat; height:501px;}
.hdp .hdp_2{ position:absolute; left:50%; width:297px; margin-left:190px; background:url(../html5/img03.png) no-repeat; height: 419px; top: 82px;}
.hdp .hdp_3{ position:absolute; left:50%; width:142px; margin-left:130px; background:url(../html5/img04.png) no-repeat; height:290px; top: 240px;}
.hdp .hdpkj{ overflow:hidden}


.hdp .hdp_1 .hdpkj{background: #F00;
    width: 681px;
    height: 455px;
    margin-left: 21px;
    margin-top: 24px; }
.hdp .hdp_1 ul li{ width: 681px;
    height: 455px;}
	

.hdp .hdp_2 .hdpkj{background: #F00;
    width: 262px;
    height: 382px;
        margin-left: 17px;
    margin-top: 19px; }
.hdp .hdp_2 ul li{width: 262px;
    height: 382px;}
	
	
.hdp .hdp_3 .hdpkj{background: #F00;
    width: 129px;
    height: 230px;
    margin-left: 6px;
    margin-top: 27px;}
.hdp .hdp_3 ul li{width: 129px;
    height: 230px;}
	
	
.hdp  .hdp_1_1{ background:#000}
.hdp  .hdp_1_2{ background: #0F0}
.hdp  .hdp_1_3{ background: #F0F}
.section1 .hdp_btn{ padding-top:50px; padding-bottom:50px; margin:0 auto; width:90px;}
.section1 .hdp_btn li{ float:left; width:10px; height:10px; border-radius:50%; background:#B2B2B2; cursor:pointer; margin-left:10px; margin-right:10px;}
.section1 .hdp_btn .hover,.section1 .hdp_btn li：hover{ background:#F00; }


.section2{ background:url(../html5/bg_bg03.jpg) center top no-repeat; width:100%; height:597px; margin-top:20px;}
.section2 h2,.section2 .shumin{color:#FFF}
.section2 h2:after { background:#FFF}

.section2 .section2_1{width: 1100px;
    height: 431px;
    margin: 0 auto;  position:relative}
.section2 .secbg{left: 0; bottom:0px;
    width: 1100px;
    height: 373px; position:absolute}
.section2 .section2_1_bg{background: url(../html5/bg_bg04.png) no-repeat left center;}
.section2 .section2_2_bg{background: url(../html5/bg_bg05.png) no-repeat left center;}
.section2 .section2_3_bg{background: url(../html5/bg_bg06.png) no-repeat left center;}

.section2 .section2_1 .dd{ position:absolute;}
.section2 .section2_1 .dd1{top: 283px; left: 170px;}
.section2 .section2_1 .dd2{top: 100px;
    left: 323px;}
.section2 .section2_1 .dd3{top: 228px;
    left: 326px;}
.section2 .section2_1 .dd4{top: 335px;
    left: 130px;}

.section2 .section2_1 .dd5{top: 230px;
    left: 484px;}
.section2 .section2_1 .dd6{top: 194px;
    left: 529px;}
.section2 .section2_1 .dd7{top: 276px;
    left: 883px;}

.section2 .section2_1 .dd8{    top: 337px;
    left: 898px;}

.section2 .section2_1 .dd span{ position:relative; font-size:14px; color:#FFF}
.section2 .section2_1 .dd span:after{content: "";border-radius:50%;background:#FFF; display:block; width:10px; height:10px; position:absolute; left: 97px;
    top: 5px;}

.section2 .section2_1 .dd span:before{content: ""; border-radius:50%;background: rgba(255, 255, 255, 0.8); display:block; width:10px; height:10px;    
	animation: aimte 1s infinite ;
    -webkit-animation: aimte 1s  infinite ;
	
	 position:absolute; top:5px; left:97px; opacity:0;}

.section2 .section2_1 .dd4 span:before,.section2 .section2_1 .dd4 span:after{left: 138px;}

.section2 .section2_1 .dd6 span:before,.section2 .section2_1 .dd6 span:after{left: 186px;}

.section2 .section2_1 .dd5 span:before,.section2 .section2_1 .dd5 span:after{left: 182px;}

.section2 .section2_1 .dd7 span:before,.section2 .section2_1 .dd7 span:after,.section2 .section2_1 .dd8 span:before,.section2 .section2_1 .dd8 span:after{left:-30px;}


@keyframes aimte
{ 
  from, 20%, 40%, 60%, 80%{

  } 
  20%{
	opacity:1;
	    transform: scale(0.8,0.8);
    -webkit-transform: scale(0.8,0.8);
    -moz-transform: scale(0.8,0.8);
    -ms-transform: scale(0.8,0.8);
	  }
  40%{
	opacity:0.5;
	    transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    -moz-transform: scale(1.2,1.2);
    -ms-transform: scale(1.2,1.2);
	  }
  60%{
	opacity:1;
	    transform: scale(1.6,1.6);
    -webkit-transform: scale(1.6,1.6);
    -moz-transform: scale(1.6,1.6);
    -ms-transform: scale(1.6,1.6);
	  }
  80%{
	opacity:0.5;
	    transform: scale(2,2);
    -webkit-transform: scale(2,2);
    -moz-transform: scale(2,2);
    -ms-transform: scale(2,2);
	  }
  to{
	 opacity:0; 
		    transform: scale(3,3);
    -webkit-transform: scale(3,3);
    -moz-transform: scale(3,3);
    -ms-transform: scale(3,3);

	 }
}
@-webkit-keyframes aimte
{ 
 
}
.section3{ background:#f1f1f1}
.section3_1{ width:1106px; margin:0 auto; position: relative; height:500px;}
.section3_1 .section3_1_1{ width:100%; background:url(../html5/bg_bg07.png) no-repeat; position:absolute; height:133px; top:200px;}
.section3_1 .section3_btn{    width: 68px;
    height: 150px;
    line-height: 2;
    color: #8f8f95;
    text-align: center; position:absolute; font-size:14px; z-index:3
    }
.section3_1 .section3_btn .section3_btn_1{
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #fff;
    margin: 12px 29px;     position: relative;     }



.section3_1 .section3_btn .section3_btn_1:after {
    content: "";
    position: absolute;
    left: -5px;
    top: -5px;
    z-index:-1;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: #0098ef;
    opacity: 0.3;
}


.section3_1 .cur .section3_btn_1:after {animation: Circle 1.2s infinite linear;}


@keyframes Circle{
	0%{
		transform: scale(0.5);
		opacity: 0;
	}
	50%{
		transform: scale(1);
		opacity: 0.3;
	}
	100%{
		transform: scale(0.5);
		opacity: 0;		
	}
}


.section3_1 .section3_btn .section3_btn_2{width: 68px;
    height: 68px;
    border-radius: 34px;
    background: #fff;
    margin: 12px 0; position:relative; float:left; -webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in;

}

.section3_1 .section3_btn .section3_btn_2:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 68px;
    height: 68px;
}

.section3_1 .section3_btn1 .section3_btn_2:after {
    background: url("../html5/bg_sign06.png") no-repeat;
}

.section3_1 .section3_btn2 .section3_btn_2:after {
    background: url("../html5/bg_sign07.png") no-repeat;
}

.section3_1 .section3_btn3 .section3_btn_2:after {
    background: url("../html5/bg_sign09.png") no-repeat;
}

.section3_1 .section3_btn4 .section3_btn_2:after {
    background: url("../html5/bg_sign08.png") no-repeat;
}

.section3_1 .section3_btn5 .section3_btn_2:after {
    background: url("../html5/bg_sign10.png") no-repeat;
}

.section3_1 .section3_btn6 .section3_btn_2:after {
    background: url("../html5/bg_sign11.png") no-repeat;
}

.section3_1 .section3_btn7 .section3_btn_2:after {
    background: url("../html5/bg_sign12.png") no-repeat;
}

.section3_1 .section3_btn8 .section3_btn_2:after {
    background: url("../html5/bg_sign13.png") no-repeat;
}




.section3_1 .cur .section3_btn_2{ background:#2C8BE9}
.section3_1 .cur .section3_btn_2:after{    background-position: 0px -68px;}
.section3_1 .cur p{ color:#2C8BE9}

.section3_1 .section3_btn1{ top:261px; left:0px;}
.section3_1 .section3_btn2{top: 154px;
    left: 154px;}
.section3_1 .section3_btn3{ top: 225px;
    left: 310px;}
.section3_1 .section3_btn4{top: 119px;
    left: 460px;}
.section3_1 .section3_btn5{    top: 168px;
    left: 615px;}
.section3_1 .section3_btn6{top: 152px;
    left: 749px;}
.section3_1 .section3_btn7{ top: 252px;
    left: 890px;}
.section3_1 .section3_btn8{top: 163px;
    left: 1030px;}


.section4 {background: #f5f6f7; padding-bottom:90px}
.section4 ul{ width:1200px;     height: 230px; margin:0 auto; padding-top:50px;}
.section4 li{ position:relative; height:220px; width:220px;  background:#FFF; border-radius:50%; float:left; -webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in; cursor:pointer}
.section4 li span{ position:absolute; text-align:center; display:block;  -webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}
.section4 .tc1{ font-size:25px; top:41px; width:100%}
.section4 .tc2{    font-size: 40px;
    color: #2C8BE9;
    text-align: center;
    width: 100%;
    top: 81px; 
}
.section4 .tc2 em{font-size: 14px; font-style: inherit;}

.section4 .tc3{padding: 36px;
    top:111px;
    font-size: 14px; }
.section4 li a{display: block;
    font-size: 30px;
    position: absolute;
    width: 100%;
    text-align: center;
    padding-top: 76px;
    height: 143px;}	
.section4 li a em{ display:block;font-size:20px; font-style: inherit;}	

.section4 .tcb{    margin-left: 115px;
    margin-right:45px;}
.section4 .tcc{margin-left:45px;
    margin-right: 115px;}

.section4 .tcd{ background:#2C8BE9}
.section4 .tcd a{ color:#FFF}

.section4 li:hover{ margin-top:-20px;}

.section4 li:hover .tc2{ font-size:30px; top:87px; color:#000}
.section4 li:hover .tc3{ font-size:16px; top:100px; color: #2C8BE9;}
.section4 li:hover .tc1{ font-size:30px; color: #2C8BE9;}

.section4 li:after{ opacity:0;content: "";
    position: absolute;
    left: -5px;
    
    width:220px;
    height:59px; background:url(../html5/afterbg.png) no-repeat; position:absolute;top:200px;     background-size: 19em;  -webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}
	
.section4 li:hover:after{top:260px; opacity:0.8; }


.section4 li:before{content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    width: 220px;
    height: 220px;
    background:#fff;
    border-radius: 50%; -webkit-transition:all 0.5s ease-in;-moz-transition:all 0.5s ease-in;-o-transition:all 0.5s ease-in;transition:all 0.5s ease-in;}

.section4 .tcd:before{content: "";  background:#2C8BE9; width:220px; height:220px;}

.section4 li:hover:before{opacity:0; transform: scale(1.2,1.2);}


.section5 .section5_cases{ width:100%; overflow:hidden}
.section5 .section5_cases li{ width:25%; height:auto; float:left; position:relative; overflow:hidden}
.section5 .section5_cases li a{ display:block; width:100%; height:100%;}
.section5 .section5_cases li a:before{content: ""; background: rgba(0, 0, 0, 0.51); width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:2}
.section5 .section5_cases li img{ width:100%; height:auto; -webkit-transition:all 5s ease-in;-moz-transition:all 5s ease-in;-o-transition:all 5s ease-in;transition:all 5s ease-in;}
.section5 .section5_cases li p{ height:40px; line-height:40px; font-size:16px; position:absolute; bottom:-40px; width:100%; text-align:center;-webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in; background: rgba(0, 0, 0, 0.51); color:#FFF}


.section5 .section5_cases li:hover img{transform: scale(1.3,1.3);}
.section5 .section5_cases li:hover a:before{ background: rgba(0, 0, 0, 0);}
.section5 .section5_cases li:hover p{ bottom:0px;}

.section5 .section5_nav {    width: 474px;
    margin: 0 auto;
    height: 40px;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 40px;}
.section5 .section5_nav li{text-align: center;
    width: 197px;
    height: 40px;
    line-height: 40px;
    float: left;
    background: #F5F6F7;
    border-radius: 26px;
    font-size: 14px;
    margin-left: 20px;
    margin-right: 20px; cursor:pointer; -webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in;}
.section5 .section5_nav li.hover,.section5 .section5_nav li:hover{ background:#2C8BE9; color:#FFF;}
.section5 .client_table{ width:1100px; margin:0 auto;}
.section5 .client_table table {border-width: 1px;border-color: #ccc;border-collapse: collapse;}

.section5 .client_table table td {border-width: 1px;border-style: solid;border-color: #ccc;background-color: #ffffff;}
.client_table span{ display:block; width:219px; height:128px; background:url(../html5/client_more.jpg) no-repeat}
.client_table span:hover{  background:url(../html5/client_moreho.jpg) no-repeat }

.section5 .more{ width:200px; height:40px;  margin:0 auto; margin-top:40px; margin-bottom:40px; }
.section5 .more a{ display:block; background:#F5F6F7; color:#4E4E4E; border-radius:5px;width:100%; height:100%; line-height:40px; font-size:14px;}
.section5 .more a:hover{ background:#2C8BE9; color:#FFF;}


.confooter{ width:100%; background:url(../html5/footerbg.jpg) no-repeat center top; height:500px;}
.confooter .confooter_1{ height: auto;
    overflow: hidden;
    padding-bottom: 30px;
    padding-top: 90px;
    text-align: center; margin: 0 auto;
    max-width: 1100px;}
.confooter .confooter_1 span{color: #FFF;
    font-size: 36px; padding-bottom: 12px;
    border-bottom: 1px solid #b6b9bf;}

.confooter .confooter_1 span b{background: url(../html5/top_enline.jpg) no-repeat bottom;
    padding-bottom: 14px;}

.confooter_ask {padding: 62px 0 60px;
    color: #6f6f6f;
    font-size: 14px;}

.confooter ul{    width: 1200px; margin:0 auto; overflow:hidden}
.confooter ul li{ float: left;
    margin-right: 57px;
    display: inline;
    width: 230px;
    height: 120px;
    background: rgba(0, 0, 0, 0.54); -webkit-transition:all 0.3s ease-in;-moz-transition:all 0.3s ease-in;-o-transition:all 0.3s ease-in;transition:all 0.3s ease-in;
}

.confooter ul li:hover{ background: rgb(44, 139, 233);}
.confooter ul li a{display: block;}

.confooter li img, .contact_icon {
    width: 72px;
    height: 54px;
    margin: 18px 0 12px 79px;
    display: block;
}

.confooter ul li span{color: #e0e0e0;
    font-size: 14px;
    text-align: center; display:block}

.contact_icon1 {
    background: url(../html5/contact_Cicon1.png) no-repeat;
}
.contact_icon2 {
    background: url(../html5/contact_Cicon2.png) no-repeat;
}
.contact_icon3 {
    background: url(../html5/contact_Cicon3.png) no-repeat;
}

.contact_icon4 {
    background: url(../html5/contact_Cicon4.png) no-repeat;
}
.confooter_2{ background:#212121; text-align:center; height:40px; line-height:40px; color:#fff; font-family:"Microsoft YaHei";}