﻿*{
	margin:0;
	padding:0;}
body{
	font-size:14px;
	color:#333;
	font-family: "Microsoft YaHei New", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "Arial", "Helvetica", "SimHei", "STXihei", "sans-serif";}
a{
	text-decoration:none;}
a img{
	border:0;}
ul,ol,dl,li{
	list-style:none;}		

.process{
	padding:80px 0;
	background-color:#f9f9f9;
	box-sizing:border-box;}
.process div{
	box-sizing:border-box;}	
.process .title{
	text-align:center;}
.process .title h2{
	font-size:32px;
	margin-bottom:0;}	
.process .title span{
	text-transform:uppercase;
	color:#999;
	font-size:12px;}
.process .title p{
	width:60%;
	margin:5px auto;
	color:#666;}
.process .process_con{
	margin-top:0px;
	overflow:hidden;}	
.process .process_con ul li{
	background-color:#fff;
	overflow:hidden;}
.process .process_con ul li .col-sm-3{
	padding:0;}
.process .process_con ul li .col-sm-6{
	padding:0;}
.process .process_con ul li .text{
	text-align:center;
	padding-top:4%;
	cursor:pointer;}	
.process .process_con ul li .icon{
	width:100px;
	height:100px;
	margin:auto;
	background-image:url(../images/process_icon.png);
	background-repeat:no-repeat;
	cursor:pointer;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;}
.process .process_con ul li h3{
	margin:0 0 20px;}
.process .process_con ul li.li_1 .icon{
	background-position:0 0;}
.process .process_con ul li.li_2 .icon{
	background-position:-100px 0;}
.process .process_con ul li.li_3 .icon{
	background-position:-200px 0;}
.process .process_con ul li.li_4 .icon{
	background-position:-300px 0;}
.process .process_con ul li.li_5 .icon{
	background-position:-400px 0;}
.process .process_con ul li.li_6 .icon{
	background-position:-500px 0;}
.process .process_con ul li.li_7 .icon{
	background-position:-600px 0;}
.process .process_con ul li.li_8 .icon{
	background-position:-700px 0;}
.process .process_con ul li.li_1 .icon:hover{
	background-position:0 -100px;}
.process .process_con ul li.li_2 .icon:hover{
	background-position:-100px -100px;}
.process .process_con ul li.li_3 .icon:hover{
	background-position:-200px -100px;}
.process .process_con ul li.li_4 .icon:hover{
	background-position:-300px -100px;}
.process .process_con ul li.li_5 .icon:hover{
	background-position:-400px -100px;}
.process .process_con ul li.li_6 .icon:hover{
	background-position:-500px -100px;}
.process .process_con ul li.li_7 .icon:hover{
	background-position:-600px -100px;}
.process .process_con ul li.li_8 .icon:hover{
	background-position:-700px -100px;}
.process .process_con ul li p{
	width:90%;
	margin:9% auto 0;
	color:#666;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;}
.process .process_con ul li p:hover{
	-webkit-transform:translateY(-10px);
	-moz-transform:translateY(-10px);
	-o-transform:translateY(-10px);
	transform:translateY(-10px);}
.process .process_con ul li .img{
	overflow:hidden;
	cursor:pointer;}
.process .process_con ul li .img img{
	-webkit-transition:all 0.8s ease;
	-moz-transition:all 0.8s ease;
	-o-transition:all 0.8s ease;
	transition:all 0.8s ease;
    display: block;
    max-width: 100%;
    height: auto;}	
.process .process_con ul li .img img:hover{
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	-o-transform:scale(1.2);
	transform:scale(1.2);}
.visible-lg{
	display:none;}
@media (min-width: 1200px) {
	.col-sm-2, .col-sm-4, .col-sm-6{
	  position: relative;
	  min-height: 1px;
	  padding-right: 15px;
	  padding-left: 15px;}
	.visible-lg{
		display:block;}
}

@media (min-width: 768px) {
  .col-sm-2, .col-sm-4{
    float: left;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
}
@media (min-width:768px){
	.process .process_con ul li .box{
		 width: 16.66666667%;
		 height:100%;
		 float:left;
		 overflow:hidden;}
	.process .process_con ul li .text{
		 width: 33.33333334%;
		 float:left;}
	.process .process_con ul li .img{
		 width: 50%;
		 float:left;}
}
@media (max-width:1200px){
	.process .process_con ul li .text{
		width:50%;
		padding-top:2%;}
}	
@media (max-width:1024px){
	.process .process_con ul li .text{
		padding-top:0;}
	.process .process_con ul li p{
		margin:4% auto 0;}
}	
@media (max-width:768px){
	.process .title p{
		width:80%;}
	.process .process_con ul li .text{
		width:100%;
		padding-bottom:5%;}
	.process .process_con ul li .img{
		display:none;}
}
@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}	
@media (max-width:568px){
	.process .title p{
		width:90%;}
}	

/*animate*/
.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
}
