@charset "utf-8";
/* CSS Document */
#barner{width:100%;height:500px;overflow:hidden;position:relative;margin-top:86px;}
#barner .list{width:100%;height:100%;position:absolute;}
#barner .list .barner_1{background:url(../images/b1.jpg);}
#barner .list .barner_2{background:url(../images/b2.jpg);}
#barner .list .barner_3{background:url(../images/b3.jpg);}
#barner .list .barner_4{background:url(../images/b4.jpg);}
#barner .list .barner{width:100%;height:100%;background-repeat:no-repeat; background-position: center center;position:absolute;}
#barner .list .barner .font{min-width:960px;max-width:1136px;height:100%;margin:0 auto;}
#barner .list .barner .font img{margin-top:145px;margin-left:50px; animation:move 1s;}
#barner ul.btn{position:absolute;bottom:20px;left:50%;}
#barner ul.btn li{width:12px;height:12px;background:#fff;border-radius:6px;float:left;margin-left:5px;opacity:.6;filter:alpha(opacity=60);cursor:pointer;}
#barner ul.btn li.choose{opacity:1;filter:alpha(opacity=100);}

@keyframes move{
	from{margin-left:300px;opacity:0;filter:alpha(opacity=0);}
	to{margin-left:50px;opacity:1;filter:alpha(opacity=100);}	
}


#show{min-width:960px;max-width:1136px;margin:30px auto 0; }
#show h2{width:646px;height:80px;line-height:80px;margin:0 auto;text-align:center;font-weight:400;font-size:44px;color:#494b4c;border-bottom:1px solid #d5dbe2;position:relative;}
#show h2 span{font-family:opensans;font-size:30px;font-weight:700;margin-left:20px;}
#show h2 b{position:absolute;display:block;width:240px;height:1px;background:#2e4059;left:50%;margin-left:-120px;bottom:-1px;}
#show h3.sub_title{text-align:center;font-size:16px;color:#787e84;font-weight:400;line-height:56px;margin-bottom:20px;}
#show ul{position:relative;height:282px;margin-top:40px;}
#show ul li{width:252px;height:282px;background:url(../images/bg.png) no-repeat;position:absolute;top:0;transition:all 500ms;}
#show ul li img.move{position:absolute;right:16px;top:16px; transition:all 500ms;} 
#show ul li.left{left:0;margin-left:50px;}
#show ul li.middle{left:50%;margin-left:-126px;}
#show ul li.right{right:0;margin-right:50px;}
#show ul li .logo{background-repeat:no-repeat;}
#show ul li b{display:block;width:30px;height:2px;background:#f23535;position:absolute;left:50%;margin-left:-15px;bottom:40px;}
#show ul li a.link_to{display:block;width:120px;height:34px;line-height:34px;background:#fff; border-radius:3px;text-align:center;color:#f23535;position:absolute;left:50%;margin-left:-60px;top:64%;font-size:16px;display:none;animation:downToUp .3s}
#show ul li h4{font-weight:400;font-size:24px;color:#494b4c;position:absolute;text-align:center;width:100%;top:44%;}
#show ul li p{width:100%;position:absolute;text-align:center;font-size:14px;color:#787e84;top:60%;line-height:24px;}
#show ul li.nm1 .logo{width:124px;height:31px;background:url(../images/img1.png); background-position:0 0;position:absolute;left:50%;margin-left:-62px;top:76px;}
#show ul li.nm2 .logo{width:65px;height:59px;background:url(../images/img2.png); background-position:0 0;position:absolute;left:50%;margin-left:-32px;top:46px;}
#show ul li.nm3 .logo{width:50px;height:59px;background:url(../images/img3.png); background-position:0 0;position:absolute;left:50%;margin-left:-15px;top:44px;}
#show ul li.nm4 .logo{width:59px;height:54px;background:url(../images/img4.png); background-position:0 0;position:absolute;left:50%;margin-left:-29px;top:50px;}
#show ul li.nm5 .logo{width:50px;height:61px;background:url(../images/img5.png); background-position:0 0;position:absolute;left:50%;margin-left:-29px;top:54px;}
#show ul li.nm6 .logo{width:105px;height:35px;background:url(../images/img6.png); background-position:0 0;position:absolute;left:50%;margin-left:-52px;top:70px;}




#show ul li:hover{background:url(../images/bg1.png) no-repeat;}
#show ul li:hover img.move{right:0;top:0;}
#show ul li:hover h4{color:#fff;}
#show ul li:hover p{display:none;}
#show ul li:hover a.link_to{display:block;}
#show ul li.nm1:hover .logo{background-position:0 31px;}
#show ul li.nm2:hover .logo{background-position:0 59px;}
#show ul li.nm3:hover .logo{background-position:0 59px;}
#show ul li.nm4:hover .logo{background-position:0 54px;}
#show ul li.nm5:hover .logo{background-position:0 61px;}
#show ul li.nm6:hover .logo{background-position:0 35px;}

@keyframes downToUp{
	from{top:80%;opacity:0;filter:alpha(opacity=0);}
	to{top:64%;opacity:1;filter:alpha(opacity=100);}	
}

#solution{width:100%;}
#solution .title{width:100%;height:260px;background:url(../images/bg.jpg) no-repeat center center fixed;margin-top:60px;padding-top:80px;margin-bottom:50px;}
#solution .title h2{width:646px;height:80px;line-height:80px;margin:0 auto;text-align:center;font-weight:400;font-size:44px;color:#fff;border-bottom:1px solid #7b848b;position:relative;transition: all .5s;}
#solution .title h2 span{font-family:opensans;font-size:30px;font-weight:700;margin-left:20px;}
#solution .title h2 b{position:absolute;display:block;width:240px;height:1px;background:#fff;left:50%;margin-left:-120px;bottom:-1px;}
#solution .title h3.sub_title{text-align:center;font-size:16px;color:#fff;font-weight:400;line-height:56px;margin-bottom:20px;}
#solution .content1{min-width:960px;max-width:1136px;margin:0 auto;position:relative;height:300px;margin-top:20px;}
#solution .content1 li{position:absolute;top:0;width:316px;height:300px;}
#solution .content1 li.left{left:0;margin-left:20px;}
#solution .content1 li.right{right:0;margin-right:20px;}
#solution .content1 li.middle{left:50%;margin-left:-158px;}
#solution .content1 li i.icon{font-family:"iconfont" !important;font-style:normal;font-size:38px;color:#f23535;display:block;text-align:center;position:relative;}
#solution .content1 li h3{text-align:center;font-weight:400;color:#494b4c;font-size:20px;line-height:70px;}
#solution .content1 li p{font-size:14px;color:#787e84;line-height:24px;text-align:center; }
#solution .content1 li:hover i.icon{ animation:skip .3s;}


@keyframes skip{
	0%{top:0;}
	49%{top:-50px;opacity:.2;}	
	50%{top:15px;opacity:.2;}
	100%{top:0;opacity:1;}	
}
#data{width:100%;height:300px;background:#f5dada; transition:background 1.5s;}
#data .content2{min-width:960px;max-width:1136px;margin:30px auto 0;}
#data .content2 li{width:24%;display:inline-block;text-align:center;}
#data .content2 li div{width:210px;height:210px;background:#fff;border-radius:50%;display:inline-block;border:2px solid #f5dada;margin-top:43px;transition:all .5s;}
#data .content2 li div i.i_font{font-family:"iconfont" !important;font-style:normal;color:#f23535;font-size:40px;position:relative;top:40px;}
#data .content2 li div:hover i.i_font{animation:skip1 .3s;}
@keyframes skip1{
	0%{top:40px;}
	49%{top:0;opacity:.2;}	
	50%{top:55px;opacity:.2;}
	100%{top:40px;opacity:1;}	
}
#data .content2 li div h4{position:relative;top:48px;font-size:36px;color:#f23535;font-weight:400;width:100%;text-align:center;}
#data .content2 li div p{position:relative;top:55px;font-size:16px;color:#494b4c;width:100%;text-align:center;}
#data .content2 li div:hover{border-color:#f23535;box-shadow:0 0 0 6px #f67272;}


div.fixed{position:fixed;right:40px;top:50%;border:1px solid rgba(0,0,0,.1);border-radius:20px;}
div.fixed a{display:block;width:8px;height:8px;border-radius:4px;background:#d0d3d9;margin:8px;position:relative;}
div.fixed a:hover{background:#f23535;}
div.fixed a:hover div{display:block;}
div.fixed a.choose{background:#f23535;}
div.fixed a div{position:absolute;width:60px;height:60px;background:#f23535;border-radius:3px;left:-68px;top:-26px;display:none;}
div.fixed a div img{position:absolute;right:-5px;margin-top:25px;}
div.fixed a div i.font_i{font-family:"iconfont" !important;font-style:normal;display:block;margin-top:3px;font-size:26px;color:#fff;text-align:center;}
div.fixed a div p{color:#fff;font-size:12px;text-align:center;line-height:26px;}

#solution .title:hover #video{transform: scale(1.5);}
#solution .title:hover h2{font-size: 26px;margin-top:35px;height:60px;line-height:60px;}
#video{text-align: center;display: block;transition: all .5s;}
#videoBox{position: fixed;left: 0;top: 0;z-index: 1100;width: 100%;height: 100%;background-color: rgba(0,0,0,.8);line-height: 100%;display: none;}
#videoBox .close{position: absolute;top:30px;right: 30px;}
#videoBox video{position: absolute;left: 25%;margin-top:100px;z-index: 6;}
#videoBox .closes{position: absolute;left: 0;top:0;width: 100%;height: 100%;z-index: 2;}