/******************************/
/* CSS Reset */
/******************************/
.page {
	width:1000px;
	margin:0 auto;
}
.mobile-header {
	display:none;
	border-bottom:#FFF;
}
.mobile-header.bg-color {
	border-bottom-color:#0092D8;
	background:#0092D8;
}
.mobile-header .logo {
	color:#333;
	padding-left:40px;
}
.mobile-fixed {
	display:none;
}

/******************************/
/* Common style */
/******************************/

.home-title b {
	font-size:36px;
}
.home-title i {
	display:block;
	color:#CCC;
	padding-left:160px;
}

/******************************/

.slides li, .slides li .page {
	position:relative;
	height:720px;
	background-position:center 0;
	background-repeat:no-repeat;
	background-size:auto 100%;
}
.banner, .banner .page {
	height:320px;
	background-position:center 0;
	background-repeat:no-repeat;
	background-size:auto 100%;
}
.slides-info {
	position:absolute;
	top:20%;
	left:20%;
	width:50%;
	line-height:1.5;
	color:#FFF;
	text-align:left;
}
.slides-info .title {
	font-size:32px;
	font-weight:100;
}

/******************************/

.guide {
	color:#666;
	font-size:14px;
	padding:10px;
	background:#F1F1F1;
}
.guide a {
	color:#0A50A1;
}

/******************************/

.main-box .left {
	float:left;
	margin-right:320px;
}
.main-box .right {
	float:right;
	width:300px;
	margin-left:-100%;
}

/******************************/

.contact-item {
	margin:40px 0;
	padding:20px;
	border-left:1px solid #E6E6E6;
}
.contact-item .title {
	font-size:20px;
}
.contact-item ul {
	display:block;
	margin-top:20px;
}
.contact-item li {
	position:relative;
	line-height:28px;
	padding-left:3em;
}
.contact-item li label {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:3em;
	color:#666;
	text-align:right;
}
.contact-item .weixin-code {
	max-width:136px;
	margin-top:15px;
	text-align:center;
}
.contact-item .weixin-code .pic {
	padding:5px;
	border:1px solid #E6E6E6;
}
.contact-item .weixin-code .title {
	display:block;
	color:#999;
	font-size:14px;
}

/******************************/
/* Header style */
/******************************/

.header {
	position:relative;
	z-index:999;
	box-shadow:0 10px 10px RGBA(0, 0, 0, 0.1);
	background:#FFF;
}
.header .page {
	height:85px;
}
.header .logo {
	float:left;
	padding-top:16px;
	height:52px;
	line-height:52px;
}
.header .logo .pic {
	float:left;
	width:55px;
}
.header .logo .title {
	float:left;
	color:#000;
	font-size:21px;
	margin-left:10px;
}
.header .logo .title .info {
	color:#999;
	font-size:14px;
	margin-left:4px;
}
.header .logo .title .info i {
	margin-right:4px;
}

/******************************/

.header .nav{
	float:right;
	padding-top:30px;
}
.header .nav li {
	float:left;
	padding:0 5px;
}
.header .nav li.line {
	color:#DDD;
}
.header .nav li a {
	color:#0A50A1;
	font-size:18px;
}
.header .nav li a:hover {
	color:#E44535;
}
.header .nav li.on a {
	color:#999;
	font-weight:100;
}

/******************************/
/* Can-do style */
/******************************/

.can-do {
	padding:40px 15px 70px 15px;
	border-bottom:1px solid #EEE;
	background:#F9F9F9;
}
.can-do .main {
	max-width:880px;
	margin-top:30px;
}
.can-do .main p {
	line-height:28px;
	margin-top:28px;
}
.can-do .main p i {
	color:#090;
	font-size:18px;
	font-weight:700;
}
.can-do .iso p {
	float:left;
	width:27.33%;
	color:#666;
	text-align:center;
	margin:30px 3% 0 3%;
}
.can-do .iso p i {
	display:block;
	padding:10px;
	margin-bottom:10px;
	border:1px solid #EEE;
}

/******************************/
/* Can-item style */
/******************************/

.can-item{
	background:#25272B;
	box-shadow:0 10px 10px RGBA(0, 0, 0, 0.1);
}
.can-item .page{
	position:relative;
	padding:60px 0 80px 0;
	background:#25272b;
}
.can-item .line, .can-item .line p{
	height:6px;
	line-height:0;
	font-size:0;
	background:url(../images/fore/item-line.png) repeat-x center 0;
}

/******************************/

.can-item ul{
	display:block;
	text-align:center;
}
.can-item li{
	float:left;
	width:25%;
	height:220px;
	color:#808080;
	vertical-align:top;
}
.can-item li .pic {
	width:90px;
	margin:0 auto;
}
.can-item li .title{
	color:#FFF;
	font-size:18px;
	margin-top:12px;
}
.can-item li .info{
	font-size:14px;
	margin-top:10px;
}

/******************************/

.can-item .btn{
	position:absolute;
	right:0;
	bottom:0;
	display:block;
	width:240px;
	height:40px;
	line-height:40px;
	color:#FFF;
	text-align:center;
	border-radius:10px 10px 0 0;
	background:#DC880A;
}
.can-item .btn:hover{
	text-decoration:none;
	background:#F60;
}

/******************************/
/* Product-item style */
/******************************/

.product-item {
	padding:50px 15px;
}
.product-item .title {
	position:relative;
	color:#000;
	font-size:28px;
	margin:40px 0 20px 0;
	padding-left:28px;
}
.product-item .title:before {
	content:'';
	position:absolute;
	top:50%;
	left:0;
	display:block;
	width:12px;
	height:12px;
	margin-top:-6px;
	border:1px solid #CCC;
	transform:rotate(45deg);
}
.product-item .pic {
	margin:30px 0;
}
.product-item .pic img {
	float:left;
	width:30%;
	padding:10px 1%;
	margin-right:-1px;
	border:1px solid #EEE;
	background:#FFF;
}
.product-item .info {
	max-width:880px;
	line-height:28px;
	text-indent:2em;
	margin:20px 0;
}

/******************************/
/* Jobs style */
/******************************/

.jobs {
	line-height:28px;
	padding:50px 15px;
}
.jobs .p {
	margin:15px 0;
}
.jobs .title {
	line-height:1.5;
	font-size:36px;
}
.jobs .dl-title {
	color:#C60;
	font-size:18px;
	margin:24px 0 8px 0;
}
.jobs .dd-title {
	color:#090;
	font-size:18px;
}

/******************************/
/* Service-item style */
/******************************/

.service-ours, .service-ours .page {
	color:#DDD;
	background:#25272B;
}
.service-ours .page {
	padding:40px 0;
}
.service-left {
	float:left;
	width:60%;
}
.service-right {
	float:right;
	width:40%;
}

/******************************/

.service-item li {
	position:relative;
	padding-left:5em;
}
.service-item li label {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:5em;
	text-align:right;
}
.service-item li i a {
	color:#FFF;
}

/******************************/

.service-logo .pic {
	float:left;
	width:60px;
	opacity:0.3;
	margin-left:10px;
}
.service-logo .title {
	float:left;
	font-size:24px;
	opacity:0.5;
	margin:10px 0 0 10px;
}
.service-item {
	line-height:1.8;
	font-weight:100;
	margin:20px 0 0 80px;
}

/******************************/

.service-nav {
	text-align:center;
	margin-top:19px;
}
.service-nav a {
	color:#9AB5E4;
	font-weight:100;
}
.service-nav a:hover {
	color:#F90;
	text-decoration:underline;
}
.service-nav span {
	font-weight:100;
	margin:0 6px;
	opacity:0.2;
}

/******************************/

.service-qq label {
	display:inline-block;
	line-height:28px;
	vertical-align:top;
}
.service-weixin {
	width:90px;
	text-align:center;
	font-weight:100;
	margin:40px auto;
}
.service-weixin .pic {
	width:90px;
	margin:0 auto;
	background:#FFF;
}
.service-weixin .info {
	color:#999;
	font-size:14px;
	white-space:nowrap;
	margin:10px 0;
}

/******************************/

.qq {
    overflow: hidden;
	display:inline-block;
	*display:inline;
	*zoom:1;
    font-size: 0;
    height: 21px;
	margin-top:4px;
	margin-right:4px;
}
.qq span {
    display: inline-block;
    height: 21px;
    overflow: hidden;
    padding-left: 30px;
    position: relative;
}
.qq b {
    background-color: #FFF;
    background-position: center 2px;
    background-repeat: no-repeat;
    display: block;
    height: 21px;
    left: 0;
    position: absolute;
    top: 0;
    width: 30px;
}
.qq a {
    background-color: #5985D3;
    color: #FFF !important;
    float: left;
    font-size: 12px;
    height: 21px;
    line-height: 21px;
    padding: 0 8px;
    text-decoration: none;
}
.qq a:hover {
    color: #FF0 !important;
    text-decoration: none;
}

/******************************/
/* Contact style */
/******************************/

.contact-ours {
	margin:40px 20px;
}
.contact-ours .title {
	font-size:28px;
	margin-bottom:20px;
}
.contact-ours li {
	position:relative;
	line-height:32px;
	padding-left:9em;
}
.contact-ours li label {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	display:block;
	width:8em;
	color:#666;
	text-align:right;
}
.contact-ours li .qq b {
	background-color:#EEE;
}
.contact-ours .pic {
	max-width:640px;
	margin:20px 4em 20px 8em;
	padding:1px;
	border:1px solid #E6E6E6;
}

/******************************/
/* Footer style */
/******************************/

.footer, .footer .page {
	background:#181818;
}
.footer .page {
	line-height:1.618;
	color:#999 !important;
	font-size:14px;
	text-align:center;
	padding:12px 0;
}
.footer .nav {
	color:#404040;
	margin-bottom:5px;
}
.footer .nav a {
	display:inline-block;
	color:#EEE;
	padding:0 4px;
}
.footer .nav a:hover {
	color:#F90;
}
.footer .record a {
	color:#999;
}

/******************************/
/* 产品案例 */
/******************************/

.case-item {
	margin-top:50px;
}
.case-item .name {
	font-size:36px;
	margin-bottom:20px;
}
.case-item li {
	float:left;
	width:47%;
	text-align:center;
	font-size:18px;
	margin:0 3% 15px 0;
}
.case-item li .title {
	padding:10px 0;
	background:#F6F6F6;
}

/******************************/
/* 响应式设置 */
/******************************/

/*	响应式设置：pja
	屏幕大于1440		page=1200;
	屏幕大于1024		page=1000;
	屏幕800-1024		page=800;
	屏幕640-800		page=640（Phone_Mode）;
	屏幕400-640		page=400（Phone_Mode）;
	屏幕小于400		page=320（Phone_Mode）;
*/
/******************************/

@media screen and (min-width: 1401px) {
	.page {width:1200px;}
	.can-do .main {margin:30px auto 0 auto;}
	.product-item .info {margin:20px auto;}
	.product-item .title {margin-left:60px;}
}

@media screen and (min-width: 1014px) and (max-width: 1400px) {
	.page {width:1000px;}
}

@media screen and (min-width: 721px) and (max-width: 1013px) {
	.page {width:auto;}
	.header .logo {margin-left:6px;}
	.header .logo .title {line-height:30px; font-size:18px;}
	.header .logo .title .info {display:block; line-height:16px; font-size:14px;}
	.header .nav {font-size:15px; margin-right:6px;}
	.slides li, .slides li .page {height:390px;}
	.can-do {padding-bottom:50px;}
	.can-item .page {padding-bottom:40px;}
	.can-item li .pic {width:30%;}
	.can-item li .title {font-size:16px;}
	.service-left {float:none; width:100%;}
	.service-right {float:none; width:100%;}
	.service-nav {text-align:left; margin-left:80px;}
	.service-weixin {margin:20px 0 0 80px;}
	
	.banner, .banner .page {height:240px;}
	.main-box .left {margin:0; float:none;}
	.main-box .right {margin:0; float:none; width:auto; border:0; border-top:1px solid #E6E6E6;}
	
	.case-item {margin:25px 15px 0 15px;}
}

@media screen and (min-width: 0) and (max-width: 720px) {
	.page {width:auto;}
	.footer{display:none;}
	.header{display:none;}
	.mobile-header {display:block;}
	.mobile-fixed {display:block; height:48px;}
	.slides li, .slides li .page {height:245px;}
	.slides-info {left:10%; width:80%;}
	.home-title b {font-size:32px;}
	.home-title i {font-size:14px; padding-left:140px;}
	.can-do {padding:20px 15px;}
	.can-do .main p {line-height:24px; margin-top:15px;}
	.can-do .iso p {float:none; width:auto; margin:15px;}
	.can-item .page {padding-bottom:20px;}
	.can-item li {width:50%;}
	.can-item li .pic {width:60px;}
	.service-ours {font-size:14px;}
	.service-left {float:none; width:100%;}
	.service-right {float:none; width:100%;}
	.service-nav {display:none;}
	.service-weixin {margin:20px 0 0 80px; padding-left:5em;}
	
	.banner, .banner .page{height:200px;}
	.main-box .left {margin:0; float:none;}
	.main-box .right {margin:0; float:none; width:auto;}
	.guide {display:none;}
	.jobs {padding:20px 15px;}
	.jobs .title {font-size:24px;}
	.jobs .dl-title {margin:12px 0 8px 0;}
	.contact-item {margin:0; border:0; border-top:1px solid #E6E6E6;}
	
	.contact-ours {margin:25px 15px;}
	.contact-ours .title {margin-bottom:10px; font-size:24px;}
	.contact-ours li {padding-left:5em;}
	.contact-ours li label {width:5em;}
	.contact-ours .pic {margin:15px 0}
	.contact-ours li i {display:block;}
	.contact-ours li i em {display:none;}
	
	.case-item {margin:15px 0 0 15px;}
	.case-item li {font-size:16px;}
	.case-item .name {font-size:24px; margin-bottom:8px;}
	
}

@media screen and (min-width: 0) and (max-width: 420px) {
	.slides li, .slides li .page {height:190px;}
	.slides-info .title {font-size:18px;}
	.slides-info .info {font-size:14px;}
	.home-title b {font-size:24px;}
	.home-title i {font-size:12px; padding-left:100px;}
	.can-do .main {margin-top:10px;}
	.can-item .page {padding-top:40px;}
	.can-item li {height:200px;}
	.can-item li .pic {width:50px;}
	.can-item li .title {font-size:14px;}
	.can-item li .info {font-size:12px;}
	.can-item .btn {width:100%;}
	.can-item .line, .can-item .line p {display:none;}
	.service-ours .page {padding:30px 0;}
	.service-logo .pic {float:none; text-align:center; margin:0 auto;}
	.service-logo .title {float:none; text-align:center; margin:10px 15px 15px 0; font-size:20px;}
	.service-item {margin:20px 15px; padding:20px 5px; font-weight:normal; border-top:1px solid #404040; border-bottom:1px solid #404040;}
	.service-item li i {display:block; margin-bottom:10px;}
	.service-item li i em {display:none;}
	.service-item li i a {display:inline-block; padding:0 8px 0 24px; border-radius:2px; background:url(../images/icon-phone-white.png) #090 no-repeat 5px 50%; background-size:15px auto;}
	.product-item {padding:30px 15px;}
	.product-item .title {font-size:20px; margin:20px 0;}
	.service-weixin {margin:0 auto; padding:0; font-weight:normal;}
	
	.banner, .banner .page{height:120px;}
	.contact-ours .title {margin-bottom:15px; font-size:20px;}
	.contact-ours li {padding-left:5em; font-size:14px;}
	.contact-ours li i {margin-bottom:10px;}
	.contact-ours li i a {display:inline-block; color:#FFF; padding:0 8px 0 24px; border-radius:2px; background:url(../images/icon-phone-white.png) #090 no-repeat 5px 50%; background-size:15px auto;}
	
}