.mobile{display: none;}
.pc{display: block;}
#header{ height:82px;position:fixed;top:0; z-index:100;width:100%; background:url(../img/header_BG.png) center top repeat-x;}
#header .logo{width:70px; float:left; margin:20px 0}
#header .menu{ float:left;width:1060px; margin:25px auto; text-align:center;}
#header .menu a{ font-weight:bold;width:100px;padding:25px 40px;text-align:center;text-decoration:none;font-size:14px;}
#header .menu a:hover{ color:#aaa;}
#header .menu .active{ color:#aaa;}

#header .language{width:70px; float:right; margin:25px 0; text-align:right;border-bottom:0;padding: 0;}
@media (max-width: 1024px) {
	.mobile{display: block;}
    .pc{display: none;}
	#header {height: 50px;}
	#header .logo {width: 50px;float: left;margin: 12px 0;}
	.language{border-bottom: solid 1px rgba(0,0,0,0.2);width: 100%;padding: 0 20px;}
	.language a{width: auto;float: left;border-bottom:0;padding: 0;}
}



#index_block{ margin:5% auto; text-align:center;}
#index_block .subtitle{ font-size:18px; font-weight: 600;text-transform:uppercase}
#index_block .subtitle span{padding:0 12px; font-size:30px; color:#82181d; font-family:Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";}
#index_block .grid{ margin:5% 0}
#index_block .title{width:130px; margin:0 auto; padding-bottom:30px;}

@media (max-width: 1024px){
	#index_block .subtitle {font-size: 13px;}
	#index_block .title{width:25%}
}

#footer{ background:#f2f2f2;padding:5% 0 20px 0;}
#footer .link h4{font-size: 16px;margin-bottom: 10px;}
#footer .link li{float: left;width: 20%;line-height: 2.5;}
#footer .link li a{width: 100%;    width: 100%;clear: both;float: left;font-size: 16px;margin-left: 12px;}
#footer .link li a:hover{ color:#82181d}
#footer .copyright{ text-align:center; color:#CCC;padding-top: 100px;}
.mobilepane{display: none;}
@media (max-width: 1024px){
	.mobile_head{padding: 15px 20px;font-weight: 700;font-size: 15px;text-align: center; }
    .mobile_body{margin-bottom: 10px;}
    .mobile_body li{line-height: 2.5;text-align: center;}
    .menu_line{border-bottom: solid 1px rgba(0,0,0,0.3);width: 100%;height: 1px;clear: both;}
}
.link{display: none;}
#footer {background: #f2f2f2;padding:20px 0;}
#footer .copyright {padding-top: 10px; }

.details{width: 1200px;margin: 0 auto;margin-bottom: 100px;line-height: 1.8;font-size: 16px;}
.detail_bg{width: 100%;}
@media (max-width: 1024px){
	.details{width: 100%;font-size: 12px;}
}

/*服务页面*/

#service_slide{width:100%; background:url(../Upload/index/service_bg.jpg); padding:140px 0 50px 0;}
#service_slide .box_title h3{ color:#FFF;}
#service_slide{ margin-top:85px;}
#service_fadein .server_box{padding:100px 0;}
#service_fadein .fix{ padding:0 0 0 0;}
.server_box .box1,.server_box .box2{float:left;position:relative;}
.server_box .box1{width:50%;}
.server_box .box2{width:40%;}
.server_box .txtbox1{float:right;margin-top:60px;}
.server_box .txtbox2{margin-top:100px; color:#000;}
.server_box .txtbox3{float:right;margin-top:80px;}
.server_box .txtbox3 img{width: 200px;}
.server_box .txtbox4{color:#FFF;margin-top: 30px;}
.server_box .box1 h1,.server_box .box2 h1{ font-weight:normal; padding-bottom:10px; line-height:1;}
.server_box .box1 div:after,.server_box .box2 div:after{ clear:both;}
.server_box .box2 h4,.server_box .box2 h4{ font-weight:normal;clear:both; padding-bottom:10px;}
.server_box .box1 p,.server_box .box2 p{ font-size:14px; margin-bottom:8px;text-align: justify;}
#hash3 .box1 img{width: 400px;}
#hash2{padding: 100px 0;}
#hash1{padding: 50px 0;}
@media (max-width: 1024px){
		#hash2{padding: 0px 0;}
	
}


@media screen and (max-width: 800px){
	#hash1{padding:0;}
	.server_box .box1 h1, .server_box .box2 h1 {
   font-size: 18px;font-weight: 700;}
	.server_box .box1{width:100%;}
	.server_box .box2{width:100%;}
	.server_box .txtbox1{padding-right:0;}
	.server_box .txtbox2{margin-top:0px; color:#000; margin-bottom:40px;}
	.server_box .txtbox3{float:right;margin-top:80px;padding-right:20%;}
	.server_box .txtbox4{margin-top:0px; color:#FFF; margin-bottom:40px;}
	#hash4 .box1 img{margin-top: 20px;}
	#hash3 .box1{text-align: center;}
	#hash3 .box1 img {width: 80%;margin: 0 auto;}
}


/*联系我们*/
.contacts_content{width: 100%;margin: 60px auto;background: #ffffff;padding: 80px 50px;    position: relative;}
.contacts_content h1{text-align: center;margin-bottom: 60px;}
.input {border-radius: 5px;vertical-align: middle;line-height: 20px;
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    font-size: 12px;
    
}
.input_txt{width: 100%float: left;}
.input_btn{background: #821a1f;color: #fff;cursor: pointer;padding: 10px 50px;border-radius: 5px;color: #fff;}
.input_btn:hover{opacity: 0.8;}
.bgimg{position: absolute;top:80px}
.fineline {
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #ccc;
    float: left;
    z-index: 10;
}
.show_name {
    position: relative;
    font-size: 12px;
    top: -11px;
    text-align: center;
    background: #FFF;
    margin: 0 auto;
    z-index: 11;
    padding: 0 35px;
    font-weight: 700;
}
.line_name {
    margin: 60px 0 50px 0;
    text-align: center;
}
.form_input{width: 48.5%;margin-right: 3%;float: left;}
.form_input label{float: left;line-height: 40px;position: absolute;margin-left: 10px;color: #ccc;}
.form_input:nth-child(2n){margin-right: 0;}
@media (max-width: 1024px){
	.form_input{width: 100%;margin-right: 0%;}
		.contacts_content{width: 100%;margin: 20px auto;padding: 50px 20px;}
		.bgimg{top:50px}
		.line_name {margin: 20px 0;}
		.show_name {padding: 0;}
	
}

.case_detail{ margin-top:120px; margin-bottom:80px; background:#FFF; overflow:hidden;}

.case_detail .info{ margin-top:4em; padding:0 5%; margin-bottom:4em;overflow:hidden}
.case_detail .info h1{ font-weight:normal; margin-bottom:200px}
.case_detail .info .logo{ max-width:250px; max-height:200px; margin-bottom:40px;}
.case_detail .info article{line-height:2.2; font-size:14px;letter-spacing:1px; clear:both;width:100%;}
.case_detail .info article a{ border-bottom:1px dashed #000; padding-bottom:2px}

.case_detail h2{padding:3em 5% 4em 5%; clear:both; overflow:hidden; font-size:20px; font-weight:normal;}

.case_detail .desktop_a{}
.case_detail .desktop_a img{ display:block}
.case_detail .desktop_b{ background:#EEE; padding:8em 0}
.case_detail .desktop_b img{ padding:0 5%;display:block}
.case_detail .desktop_c{ background:#FFF; padding:8em 0}
.case_detail .desktop_c img{ padding:0 5%;display:block}



.case_detail .phone_a{ padding:8em 0}
.case_detail .phone_a ul{ clear:both;width:80%;overflow:hidden; margin:0 auto}
.case_detail .phone_a li{width:27%; float:left; margin-right:9.5%;}
.case_detail .phone_a li img{ border-radius:35px; border:5px solid #000;box-shadow: 0px 2px 5px rgba(0,0,0,0.5);}
.case_detail .phone_a li:nth-child(3n+0){ margin-right:0;}

.case_detail .phone_b{ padding:8em 0}
.case_detail .phone_b ul{ clear:both;width:66%;overflow:hidden; margin:0 auto}
.case_detail .phone_b li{width:34%; float:left; margin-right:32%;}
.case_detail .phone_b li img{ border-radius:35px; border:5px solid #000;box-shadow: 0px 2px 5px rgba(0,0,0,0.5);}
.case_detail .phone_b li:nth-child(2n+0){ margin-right:0;}

.case_detail .phone_c{ padding:8em 0}
.case_detail .phone_c ul{ clear:both;width:66%;overflow:hidden; margin:0 auto}
.case_detail .phone_c li{width:34%; float:left; margin-right:32%;}
.case_detail .phone_c li img{ border-radius:35px; border:5px solid #000;box-shadow: 0px 2px 5px rgba(0,0,0,0.5);}
.case_detail .phone_c li:nth-child(2n+0){ margin-right:0;}

.case_detail .phone_c li:nth-child(2){ margin-top:20em}


@media (max-width: 1024px){
	.case_detail .info h1{margin-bottom:100px; font-size:24px;}
	.case_detail .info .logo{ max-width:200px; max-height:200px;}
	.case_detail .info article{line-height:2; font-size:13px; text-align:inherit}
	.case_detail h2{padding:2em 5% 2em 5%;}
	.case_detail .desktop_b{padding:4em 0 0 0}
	.case_detail .desktop_b img{ padding:0; }
	.case_detail .desktop_c{padding:4em 0 0 0}
	.case_detail .desktop_c img{ padding:0;}
	
	.case_detail .phone_a{ padding:4em 0}
	.case_detail .phone_a ul{width:60%; margin:0 auto;}
	.case_detail .phone_a li{width:100%; margin-right:0%; margin-bottom:0}
	
	.case_detail .phone_b{ padding:4em 0}
	.case_detail .phone_b ul{width:60%; margin:0 auto;}
	.case_detail .phone_b li{width:100%; margin-right:0%; margin-bottom:0}
	
	.case_detail .phone_c{ padding:4em 0}
	.case_detail .phone_c ul{width:60%; margin:0 auto;}
	.case_detail .phone_c li{width:100%; margin-right:0%; margin-bottom:0; margin-top:0}
	.case_detail .phone_c li:nth-child(2){ margin-top:0}


}

.l-3{ margin: 30px 0; clear: both;}
.l-3 li{width:33.333%; height: auto; float: left;position: relative;z-index: 1; background: #000;cursor: pointer;}
.l-3 li figcaption{ border: 2px solid rgba(206,56,59,0);opacity: 0; width:100%; top: 0; left: 0; z-index: 2;position: absolute; padding: 0.5em 2em 2em 1em; }
.l-3 li figcaption h2 {opacity:0;}
.l-3 li figcaption p{opacity: 1; color: #FFF;margin-top:-9%;letter-spacing: 1px;
	font-size: 68.5%;
	font-size: 14px;-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: opacity 0.5s, transform 0.5s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);}
.l-3 li a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.l-3 li figcaption::before {
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

.l-3 li figcaption::before{
	position: absolute;pointer-events: none;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
	transition: opacity 0.5s, transform 0.5s;
}
.l-3 li:hover figcaption::before{opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}
.l-3 li:hover figcaption h2{transition-delay: 0.3s;-moz-transition-delay: 0.3s; /* Firefox 4 */-webkit-transition-delay: 0.3s; /* Safari 和 Chrome */-o-transition-delay: 0.3s;opacity: 1}
.l-3 li {background: #000;}
.l-3 li:hover figcaption{opacity: 1;-webkit-transition: opacity 0.5s;}
.l-3 li:hover>img{opacity: 0.6}

@media (max-width: 1024px){
	.l-3 li{width:50%;}
	.l-3 li figcaption,.l-3 li figcaption h2,.l-3 li figcaption p{opacity: 1}
	.l-3 li figcaption::before {opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);}
}
@media (max-width: 500px){
	.l-3 li{width:100%;}
}