﻿.swiper-container {
  width: 100%;
  height: 770px;
  background:#f0f0f0;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.index_area{width:calc(100% - 70px);padding:50px 35px;position:relative;}
a.look_more{width:72px;height:72px;border-radius:50%;margin:35px auto 0;border:4px solid #ffcad6;color:#ffcad6;box-sizing: border-box;transition: all 0.4s;display:block;}
.index_area a.look_more i{width:50px;height:50px;font-size:36px;text-align:center;line-height:50px;display:block;margin:7px auto;font-weight:700;transition: all 0.4s;}
.index_area:nth-child(2n) a.look_more{border:4px solid #888;color:#888;}
.index_area a.look_more:hover{border-color:#ec3140;background:#ec3140;transition: all 0.4s;}
.index_area a.look_more:hover i{color:#fff;transition: all 0.4s;}
.area_head img.title_img{display:block;height:60px;margin:0 auto;}
.area_head{overflow:hidden;}
.area_head .title{line-height:180%;font-weight:700;font-size:2em;text-align:center;width:60%;display:block;border-bottom:1px solid #333;margin:0 auto;}
.area_head p{font-size:14px;color:#888;text-align:center;margin-top:10px;}
.area_head.blacks .title{color:#FFF;border-color:#FFF;}
.area_head.blacks p{color:#efefef;}

.area_ul { width: 1200px; margin: 0 auto; }
.sever ul{overflow:hidden;margin-top:-110px; position: relative;z-index: 99;}
.sever ul li{float:left;border:1px solid #dedede;width:calc(94%/4);border-radius: 10px; margin-right: 24px; box-sizing:border-box;padding:20px; margin-top:24px;background:#FFF; position: relative; }
.tp_center { width: 1200px; text-align: left; position: relative; }
.tp_pla1 { font-size: 66px; font-weight: bold; color: #ffffff; margin-bottom: 15px; }
.tp_pla2 { font-size: 20px; color: #fafafa; }
.tp_glob1 { position: absolute; top: -70%; right: 0; width: 360px; height: 360px; }
.tp_glob2 { position: absolute; top: -70%; right: 0; width: 360px; height: 360px; }
.sever ul li:nth-child(4n+4) {margin-right: 0;}
.sever ul li a{color:#333;display:block;width:100%;height:100%;}
.sever ul li i{display:block;width:40px;height:50px;line-height:50px;font-size:40px;float:left; color: #E50011; }
.sever ul li .sever_info{float:left;display:block;width:calc(100% - 80px);margin-left:10px;}
.sever ul li .sever_info h3{font-size:20px;line-height:30px;font-weight:700;}
.sever ul li .sever_info h4{font-size:14px;line-height:20px; height: 20px; color:#555;}
.sever ul li p{font-size:14px;color:#777;height:40px;line-height:20px;overflow:hidden;}
.sever ul li i.inlink{ position: absolute; top: 20px; right: 5px; width:40px;height:40px;color:#333;font-size:20px;float:right;line-height:40px;text-align:center;}
.sever ul li:hover{background:#ec3140;border-color:#ec3140;transition: all 0.4s;}
.sever ul li:hover i,.sever ul li:hover .sever_info h3,.sever ul li:hover .sever_info h4,.sever ul li:hover p,.sever ul li:hover b{color:#fff;transition: all 0.4s;}
.sever ul li:hover i.inlink{color:#ffffff;transition: all 0.4s;}

.client{background:#333;}
.client ul{ width: 1200px; margin: 0 auto; overflow:hidden;margin-top:35px;}
.client ul li{width:20%;box-sizing:border-box;padding:45px 12px;float:left;overflow:hidden;border-right:1px solid #888;border-bottom:1px solid #888;}
.client ul li:nth-child(5n+5){border-right: 0; }
.client ul li:nth-last-child(5){border-bottom: 0;}
.client ul li:nth-last-child(4){border-bottom: 0;}
.client ul li:nth-last-child(3){border-bottom: 0;}
.client ul li:nth-last-child(2){border-bottom: 0;}
.client ul li:nth-last-child(1){border-bottom: 0;}
.client ul li:hover{background:#ec3140;transition: all 0.4s;}
.client ul li img{width:60%;display:block;margin:0 auto;}
.client_infos{background:#FFF;width:760px;height:340px;position:fixed;left:50%;top:50%;margin:-190px 0 0 -380px;border-radius:5px;padding:40px;display:none;z-index:100;}
.black_plane{background:rgba(0,0,0,0.5);width:100%;height:100%;position:fixed;left:0;top:0;display:none;z-index:50;}
.client_infos .client_logo{display:block;float:left;width:35%;background:#ec3140;border-radius:5px;overflow:hidden; margin-top: -95px; border: 7px solid #efefef; box-sizing: border-box; }
.client_infos .client_logo img{width:80%;margin:15px auto;display:Block;}
.client_infos .con_info{float:right;width:62%;}
.client_infos .con_info h3{font-size:24px;color:#333;padding-bottom:10px;border-bottom:1px solid #dedede;}
.client_infos .con_info div{width:100%;font-size:14px;color:#888;line-height:30px;margin-top:10px;height:270px;overflow-y:auto;}
a.closed_tip{background:#ec3140;color:#FFF;font-size:16px;text-align:center;width:120px;height:42px;line-height:42px;border-radius:5px;margin:30px auto 0;display:block;}

.solution_index ul{ width: 1200px; overflow: hidden; margin: 0 auto; margin-top:30px;}
.solution_index ul li{width:calc(33.33% - 20px);margin-left:30px;float:left;border-radius: 10px;margin-bottom:30px;overflow:hidden;position:relative;}
.solution_index ul li:nth-child(3n+1){margin-left:0;}
.solution_index ul li img{width:100%;display:block;border-radius: 10px;}
.solution_index ul li .solu_title{overflow:hidden;box-sizing:border-box;border:1px solid #eee;border-top:0;padding:10px 20px;width:100%;}
.solution_index ul li .solu_title h4{font-size:20px;line-height:42px;}
.solution_index ul li .solu_title p{font-size:14px;color:#888;line-height:24px;height:48px;overflow:hidden;}
.solution_index ul li .black_em{position:absolute;top:-100%;left:0;width:100%;background:rgba(0,0,0,0.6);height:100%;overflow:hidden;z-index:10;}
.solution_index ul li:hover .black_em{ animation: black_me 0.3s ease;top:0; border-radius: 10px;}
@keyframes black_me {from{ top: -100%;}to{top: 0;}}
.solution_index ul li .black_em i,.solution_index ul li .black_em h4{position:absolute;display:none;color:#f0f0f0;z-index:12;}
.solution_index ul li .black_em i{top:-900px;display:block;margin:0 auto;font-size:55px;width:100%;text-align:center;}
.solution_index ul li .black_em h4{bottom:-900px;text-align:center;width:100%;font-size:24px;font-weight:700;}
.solution_index ul li .black_em h4 a{display:block;width:120px;height:42px;line-height:42px;color:#FFF;background:#ec3140;border-radius:2px;text-align:center;clear:both;overflow:hidden;margin:10px auto;font-size:16px;font-weight:300;}
.solution_index ul li:hover .black_em i{ animation-delay:0.5s;animation: bm_i 0.4s ease;top:70px;;display:block;}
.solution_index ul li:hover .black_em h4{ animation-delay:0.5s;animation: bm_h 0.4s ease;bottom:50px;display:block;}
@keyframes bm_i {from{ top: -900px;}to{top:70px;display:block;}}
@keyframes bm_h {from{bottom: -900px;}to{bottom:50px;display:block;}}

.case{background:#333;}
.case ul{overflow:hidden; margin: 0 auto; margin-top:35px; width: 1200px; }
.case ul li{width:25%;float:left;overflow:hidden;position:relative;}
.case ul li>img{width:100%;display:block;}
.case ul li .case_info{position:absolute;top:0;left:0;height:100%;width:100%;z-index:2;display:block;}
.case ul li .case_info .case_log{width:100%;position:absolute;z-index:5;top:50%;overflow:hidden;margin-top:-45px;transition: all 0.5s;}
.case ul li .case_info img{display:block;height:90px;margin:0 auto;}
.case ul li .case_info p{text-align:center;color:#FFF;height:0px;line-height:40px;font-size:14px;overflow:hidden;transition: all 0.5s;}
.case ul li .case_info em{width:100%;height:100%;display:block;position:absolute;z-index:-2;}
.case ul li .case_info em.c_red{top:-100%;z-index:-1;transition: all 0.5s;}
.case ul li .case_info em.c_black{top:0px;transition: all 0.5s;}
.case ul li .case_info .c_red{background:rgba(236,49,64,0.5);}
.case ul li .case_info .c_black{background:rgba(0,0,0,0.5);}
.case ul li .case_info:hover .c_red{top:0;transition: all 0.5s;}
.case ul li .case_info:hover .c_black{top:-100%;transition: all 0.5s;}
.case ul li .case_info:hover .case_log{margin-top:-65px;transition: all 0.5s;}
.case ul li .case_info:hover p{height:40px;mtransition: all 0.5s;}

.class_list{overflow:hidden;margin:30px auto 30px;display:flex; justify-content:center;}
.class_list li{width:120px;height:40px;line-height:40px;box-sizing: border-box;text-align:center;border:1px solid #333;color:#fff;font-size:14px;background:#333;float:left;margin-right:20px;}
.class_list li a{width:100%;height:40px;line-height:40px;text-align:center;color:#fff;font-size:14px;display:block;}
.class_list li.clcheck,.class_list li:hover{background:#ec3140;border-color:#ec3140;}
.class_list li:nth-last-child(1){margin-right:0;}
.news_list{width:1200px; margin: 0 auto; overflow: hidden; margin-top:30px;}
.news_list ul { width: 1200px; margin: 0 auto;}
.news_list li{float:left;margin-left:18px;margin-bottom:18px;width:calc(33.33% - 12px);overflow:hidden;border-radius: 10px;box-sizing: border-box;border:1px solid #dedede;padding:20px;position:relative;transition: all 0.4s;}
.news_list li:nth-child(3n+1){margin-left:0;}
.news_list li .linfo{float:left;width:60px;}
.news_list li .linfo i{font-size:32px;float:right;color:#999;margin-top:12px;transition: all 0.4s;}
.news_list li .linfo .times{width:60px;height:60px;text-align:right;overflow:hidden;color:#ec3140;transition: all 0.4s;}
.news_list li .linfo .times p{font-size:28px;height:28px;line-height:28px;margin-top:4px;}
.news_list li .linfo .times span{font-size:14px;height:14px;line-height:14px;}
.news_list li .rinfo{float:left;width:calc(100% - 80px);margin-left:20px;}
.news_list li .rinfo h3{height:60px;line-height:24px;font-size:18px;padding:6px 0;box-sizing: border-box;overflow:hidden;transition: all 0.4s;color:#333;}
.news_list li .rinfo p{font-size:14px;color:#999;margin-top:6px;line-height:28px;height:80px;overflow:hidden;}
.news_list li:hover{transition: all 0.4s;border-color:#ec3140;}
.news_list li:hover .rinfo h3{transition: all 0.4s;color:#ec3140;}
.news_list li:hover .rinfo p{transition: all 0.4s;color:#333;}
.news_list li:hover .linfo i{transition: all 0.4s;color:#ec3140;margin-top:46px;}
.news_list li:hover .linfo .times{transition: all 0.4s;color:#333;}

.contact{width:calc(100% - 90px);height:820px;background:url('../image/contact.jpg') no-repeat center bottom #333;background-size:100%;padding: 0 45px;overflow:hidden;}
.contact ul{overflow:hidden; width: 1200px; margin: 0 auto; margin-top:150px;}
.contact ul li{width:calc(25% - 18px);margin-left:24px;float:left;box-sizing: border-box;padding:30px 12px;background:rgba(255,255,255,0.2);color:#fff;text-align:center;cursor: pointer}
.contact ul li:hover{background:rgba(239,49,64,0.8);transition: all 0.4s;}
.contact ul li:nth-child(1){margin-left:0;}
.contact ul li i{font-size:46px;}
.contact ul li p{line-height:24px;margin-top:10px; height: 48px; }
.contact h2{text-align:center;font-size:32px;color:#FFF;font-weight:700;}
.contact .con_info{text-align:center;color:#999;font-size:14px;width:50%;border-top:1px solid #bbb;margin:10px auto;line-height:42px;}
.contact img.title_img{display:block;margin:80px auto 10px;height:60px;}

@media screen and (min-width:1440px) and (max-width:1680px){
    .sever ul li .sever_info h4{font-size:18px;}
    .bottom_nav a{width:calc(25% - 12px);margin-left:16px;font-size:14px;}
    footer ul li p{line-height:28px;font-size:14px;}
    .contact{height:760px;padding: 0 45px;}
}

@media screen and (min-width:1280px) and (max-width:1440px){
    .sever ul li .sever_info h4{font-size:14px;}
    .bottom_nav a{width:calc(25% - 9px);margin-left:12px;font-size:12px;}
    footer ul li p{line-height:28px;font-size:12px;}
    .contact{height:640px;padding: 0 45px;}
    .contact ul li i{font-size:40px;}
    .contact ul li p{font-size:14px;}
}

@media screen and (min-width:1100px) and (max-width:1280px){
	
	.sever ul{overflow:hidden;margin-top:20px; }
	.sever ul li{width:calc(50% - 20px);margin-left:40px;margin-top:30px;}
	.sever ul li:nth-child(2n+1){margin-left:0px}
	.sever ul li i{width:90px;height:90px;line-height:90px;font-size:80px;}
	.sever ul li .sever_info{width:calc(100% - 100px);}
	.sever ul li .sever_info h3{font-size:32px;line-height:42px;}
	.sever ul li .sever_info h4{font-size:24px;line-height:30px;}
	.sever ul li p{font-size:16px;line-height:32px;height:96px;}
	.sever ul li i.inlink{width:80px;height:56px;font-size:40px;float:right;line-height:56px;margin-top:20px;}
	
	.client ul { width: 100%;}
	.client ul li{width:33.33%;box-sizing:border-box;padding:45px 12px;float:left;overflow:hidden;border-right:1px solid #888;border-bottom:1px solid #888;}
	

	
	.case ul li{width:33.33%;float:left;overflow:hidden;position:relative;}
	
	.news_list ul { width: 100%;}
	.news_list{width:100%;float:left;overflow: hidden;margin-top:30px;}
	.news_list li{fmargin-left:24px;margin-bottom:24px;width:calc(50% - 24px);}
	.news_list li:nth-child(3n+1){margin-left:24px;}
	.news_list li:nth-child(2n+1){margin-left:0;}
	.news_list li .linfo{float:left;width:90px;}
	.news_list li .linfo .times{width:90px;height:64px;}
	.news_list li .linfo .times p{font-size:32px;height:32px;line-height:32px;margin-top:4px;}
	.news_list li .linfo .times span{font-size:18px;height:18px;line-height:18px;}
	.news_list li .rinfo{float:left;width:calc(100% - 110px);margin-left:20px;}
	.news_list li .rinfo h3{height:64px;line-height:32px;font-size:22px;padding:0;}
	
}

@media screen and (max-width:1100px){
	.swiper-container {
	  width: 100%;
	  height: 230px;
	  background:#f0f0f0;
	}
	.swiper-container .swiper-slide{background-size:250%!important;}
	.index_area{width:100%;padding:30px 0;}
	.area_head img.title_img{height:25px;}
	.area_head .title{font-size:1.2em;}
	.area_head p{font-size:12px;box-sizing: border-box;padding:0 10%;}
	
	.sever ul{ width: 94%; margin: 0 auto;overflow:hidden;margin-top:20px;border-bottom:1px solid #dedede;}
	.sever ul li{width:50%;margin:0;border-bottom:0;}
	.sever ul li:nth-child(2n){border-left:0;}
	.sever ul li i{width:40px;height:40px;line-height:40px;font-size:35px;clear:both;}
	.sever ul li .sever_info{width:100%;margin-left:0;}
	.sever ul li .sever_info h3{font-size:16px;line-height:24px;}
	.sever ul li .sever_info h4{font-size:12px;line-height:20px; height: 20px; }
	.sever ul li p{-webkit-box-orient: vertical;-webkit-line-clamp: 3;display:-webkit-box;overflow: hidden;font-size:12px;line-height:24px;height:72px;}
	.sever ul li i.inlink{width:50px;height:32px;font-size:22px;line-height:32px;right: 10px;border-radius:3px;}
	.index_area:nth-child(2n) a.look_more { width: 50px; height: 50px; }
	.index_area a.look_more i { font-size: 20px; width: 30px; height: 30px; line-height: 30px;}
	a.look_more { width: 50px; height: 50px; }
	
	.client ul { width: 100%; border-top: 1px solid #888;}
	.client{background:#333;}
	.client ul li{width:50%;box-sizing:border-box;padding:35px 12px; }
	.client ul li:nth-child(15){display:none;}
	.client ul li:nth-child(5n+5){border-right: 1px solid #888; }
	.client ul li:nth-last-child(5){border-bottom: 1px solid #888;}
	.client ul li:nth-last-child(4){border-bottom: 1px solid #888;}
	.client ul li:nth-last-child(3){border-bottom: 1px solid #888;}
	.client ul li:nth-last-child(2){border-bottom: 1px solid #888;}
	.client ul li:nth-last-child(1){border-bottom: 1px solid #888;}
	.client_infos{width:calc(80% - 40px);height:auto;left:10%;top:50%;margin:0 auto;border-radius:5px;padding:20px; transform: translate(0%,-50%); }
	.client_infos .client_logo{ margin-top: 0; width:100%;border-radius:5px;}
	.client_infos .client_logo img{width:50%;margin:20px auto;display:Block;}
	.client_infos .con_info{width:100%;margin-top:15px;}
	.client_infos .con_info h3{font-size:16px;text-align:center;}
	.client_infos .con_info div{width:100%;font-size:14px;color:#888;line-height:24px;margin-top:10px;height:260px;overflow-y:auto;}
	a.closed_tip{font-size:14px;text-align:center;width:80px;height:32px;line-height:32px;margin:20px auto 0;float:none;}
	
	.solution_index ul { width: 100%;}
	.solution_index ul li{width:calc(100% - 12px);margin-left:6px;float:none;margin-bottom:20px;}
	.solution_index ul li:nth-child(3n+1){margin-left:6px;}
	
	.case ul { width: 100%; }
	.case ul li{width:50%;float:left;overflow:hidden;position:relative;}
	.case ul li .case_info img{display:block;height:60px;margin:0 auto;}
	.case ul li .case_info .case_log{width:100%;position:absolute;z-index:5;top:50%;overflow:hidden;margin-top:-30px;transition: none;}
	.case ul li .case_info p{display:none;}
	.case ul li .case_info em.c_red{display:none;}
	.case ul li .case_info em.c_black{top:0px;transition: none;}
	.case ul li .case_info .c_black{background:rgba(0,0,0,0.5);}
	.case ul li .case_info:hover .c_black{top:0;transition: none;}
	.case ul li .case_info:hover .case_log{margin-top:-30px;transition: none;}
	.case ul li .case_info:hover p{height:0px;transition:none}
	
	.class_list{overflow:hidden;margin:30px auto 0;display:block;padding:0 6px;}
	.class_list li{width:calc(50% - 6px);height:40px;line-height:40px;box-sizing: border-box;text-align:center;border:1px solid #333;color:#fff;font-size:14px;background:#333;float:left;margin-right:12px;margin-bottom:12px;}
	.class_list li:nth-child(2n){margin-right:0;}
	.news_list ul { width: 100%;}
	.news_list { width: 100%; }
	.news_list li{margin-left:6px;margin-bottom:18px;width:calc(100% - 12px);}
	.news_list li:nth-child(3n+1){margin-left:6px;}
	
	.contact{width:calc(100% - 50px);padding: 0 25px;height:auto;background-size:420%;padding-bottom:35px;}
	.contact ul{overflow:hidden;margin-top:30px; width: 100%; }
	.contact ul li{width:100%;margin:0 auto 10px;padding:20px 15px;}
	.contact ul li p{ height: auto; }
	.contact .con_info{line-height:20px;width:75%;padding-top:10px;}
	.contact img.title_img{display:block;margin:36px auto 10px;height:50px;}
	
	.tp_center { width: 70%; }
	.tp_pla1 { font-size: 20px; }
	.tp_pla2 { font-size: 14px; }
	.tp_glob1 { width: 120px; height: 120px; }
	.tp_glob2 { width: 120px; height: 120px; }
	.container { width: 120px!important; height: 120px!important; }
	.swiper-slide { font-size: 6px; }
	.swi_back { width: 70%; }
}