﻿.page_content .page_tt{ margin-bottom: 0.4rem;}
/* service_concept */
.service_concept{ padding-bottom: 0.6rem;}
.service_concept .name{ margin-bottom: 20px; line-height: 30px; text-align: center; color: #333; font-size: 18px;}
.service_concept .concept_txt{ margin-bottom: 0.2rem; text-align: center; color: #666; font-size: 14px; line-height: 30px;}
.service_concept .concept_box{ width: 100%;}
.service_concept .concept_box ul li{ position: relative; float: left; width: 33.2%; margin-right: 0.1%; cursor: pointer;}
.service_concept .concept_box ul li:last-child{ margin-right: 0;}
.service_concept .concept_box ul li .pic{ width: 100%;}
.service_concept .concept_box ul li .txt1{ position: absolute; left: 0; top: 0; width: 80%; height: 100%; padding: 0 10%; text-align: center; }
.service_concept .concept_box ul li .txt1 .tt{transition: 100ms;-webkit-transition: 100ms; 
position: relative; height: 0.7rem; line-height: 0.7rem; margin-bottom: 0.15rem; margin-top: 50%; color: #fff; font-size: 22px;}
.service_concept .concept_box ul li .txt{ position: absolute; left: 0; top: 0; width: 80%; height: 100%; padding: 0 10%; text-align: center; background: rgba(240, 131, 0, 0.5); opacity: 0;}
.service_concept .concept_box ul li .txt .tt{ 
	opacity: 0;
	transition: 600ms;-webkit-transition: 600ms; 
	transform: translateY(-120px);-webkit-transform: translateY(-120px);
position: relative; height: 0.7rem; line-height: 0.7rem; margin-bottom: 0.15rem; margin-top: 50%; color: #fff; font-size: 22px;}
.service_concept .concept_box ul li .txt .line{
	transition: 400ms;-webkit-transition: 400ms; 
	content: ''; width: 0; height: 4px; background: #fff; margin: 0 auto 0.2rem auto;}
.service_concept .concept_box ul li .txt .intros{ 
	opacity: 0;
	transition: 600ms;-webkit-transition: 600ms;
	transition-delay: 100ms;-webkit-transition-delay: 100ms;
	transform: translateY(120px);-webkit-transform: translateY(120px); 
	position: relative; left: 0; line-height: 20px; color: #fff; font-size: 14px;}
.service_concept .concept_box ul li a:hover .txt1{ opacity: 0;}
.service_concept .concept_box ul li a:hover .txt{opacity: 1;}
.service_concept .concept_box ul li a:hover .txt .tt{transform: translate(0);-webkit-transform: translate(0);opacity: 1;}
.service_concept .concept_box ul li a:hover .txt .line{ display: block;width: 20px; }
.service_concept .concept_box ul li a:hover .txt .intros{ transform: translate(0);-webkit-transform: translate(0);opacity: 1;}
/* service_features */
.service_features_bg{background:#f3f4f6 url(../images/service_features_bg.png) no-repeat center top;}
.service_features{ padding-bottom: 1.2rem;}
.service_features ul li{ float: left; margin-right: 0.2rem; width: 3.8rem; height: 2.7rem; padding: 0.4rem 0 0 0; background: #fff; border-radius: 0.1rem;}
.service_features ul li:last-child{ margin-right: 0;}
.service_features ul li .pic{ text-align: center; margin-bottom: 0.25rem;}
.service_features ul li h3{ text-align: center; font-size: 24px; color: #333; line-height: 40px;}
.service_features ul li .txt{ padding: 0 0.3rem;font-size: 14px; color: #999; line-height: 24px;}
.service_features ul li .txt_center{ text-align: center;}
/* service_network */
.service_network{ padding-bottom: 1.2rem;}
.service_network .pic{ width: 8.5rem; text-align: center;}
.service_network .pic img{ width: 100%; max-width: 6.1rem;}
.service_network .txt{ width: 6.5rem; background: #f6f7f9; padding: 0.6rem 0.5rem 1.2rem 0.5rem; }
.service_network .txt h3{ position: relative; height: 50px; color: #f08300; font-size: 24px;}
.service_network .txt h3::after{position: absolute; left: 0; bottom: 0; content: ''; width: 20px; height: 4px; background: #f08300;}
.service_network .txt p{ line-height: 36px; color: #666; font-size: 16px;}

/* contact */
.contact .box{ background: #f8f8f8; margin-bottom: 0.8rem;}
.contact .box .contact-txt{ width: 6.2rem; padding: 0.45rem 0.2rem 0.45rem 0.6rem;}
.contact .box .contact-txt .name{ margin-bottom: 0.55rem; line-height: 30px; color: #333; font-size: 24px;}
.contact .box .contact-txt li{ width: 100%; margin-bottom: 35px;}
.contact .box .contact-txt li .icon{ margin-right: 16px;}
.contact .box .contact-txt li .icon img{ height: 22px;}
.contact .box .contact-txt li .txt{ width: 5.6rem;}
.contact .box .contact-txt li .txt .tt{ font-weight: bold; margin-bottom: 5px; line-height: 22px; color: #333; font-size: 18px;}
.contact .box .contact-txt li .txt p{ line-height: 24px; color: #666; font-size: 16px;}
.contact .box .pic{ width: 9rem;}
.contact .box .pic img{ width: 100%;}

@media screen and ( max-width:1024px ){
	.page_nav ul{ float: none;}
	.service_concept .name,.service_concept .concept_txt{ padding: 0 0.3rem;}
	.service_concept .concept_box ul li{ float: none; width: 96%; margin:0 2% 0.3rem 2%;}
	.service_concept .concept_box ul li .txt .tt::after{ display: block; }
	.service_concept .concept_box ul li .txt .intros{ display: block;}
	.service_features{ padding: 0 0.3rem 0.4rem 0.3rem;}
	.service_features ul li{ float: none; width: auto; height: auto; margin: 0; margin-bottom: 0.3rem;padding: 0.4rem 0.3rem;}
	.service_network{ padding-bottom:0;}
	.service_network .pic{ float: none; width: auto; padding-bottom: 0.3rem;}
	.service_network .txt{ float: none; width: auto;}

	.contact .box{ padding: 0 0.3rem 0.3rem 0.3rem;}
	.contact .box .pic{ width: 100%; }
	.contact .box .contact-txt{ width: 100%; padding: 0.4rem 0;}
	.contact .box .contact-txt .name{ font-size: 20px;}
	.contact .box .contact-txt li .txt{ width: 90%;}
}

 




