/*
 ===============================
 * @authro      : kis2
 * @created     : 2018-05-26
 * @content     : 
 ===============================
 */
@charset "UTF-8";

.wrap{width:1100px;clear: both;margin:0 auto; position:relative;}


/*
* banner kis2
*/





/* product */
.product{
	position: relative;
	width: 100%;
	max-width:1100px;
	margin: 10px auto;
}




@media only screen and (max-width:1199px) {
.product{width:1000px; }
}

.product .row{

	margin-bottom: 0px;
}

.product .tab-content{
	display: block;

}

/* product不占空间隐藏css */
.product .tab-content>.tab-pane{
	display: block;
	height: 0;
	overflow: hidden;
}
.product .tab-content>.active{
	display: block;
	height: auto;
	overflow: inherit;
}

.product .swiper-slide img{
	width: 100%;
	transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -ms-transform: scale(1.0);
    -ms-transition: transform 1s cubic-bezier(0,1,0.5,1);
    -webkit-transition: transform 1s cubic-bezier(0,1,0.5,1);
    transition: transform 1s cubic-bezier(0,1,0.5,1);
}
.product .swiper-slide:hover .product .swiper-slide img{
	transform: scale(1.1);
}



.product .swiper-slide{
	overflow: hidden; width:270px; height:270px; position:relative;}

.tab-content .swiper-button-next.swiper-button-disabled, .tab-content .swiper-button-prev.swiper-button-disabled{
	    cursor: pointer;
		pointer-events: auto;
}
.tab-pane .swiper-button-next,.tab-pane .swiper-button-prev{
	display:  none;
}

.product .swiper-container-android .swiper-slide, .product .swiper-wrapper{
	/*transform: inherit !important;*/
}



/*产品类别*/

.clearfix:after {
	height: 0
}


.animate {
	transition: all 0.5s cubic-bezier(0.25, 0, 0, 1);
	-webkit-transition: all 0.5s cubic-bezier(0.25, 0, 0, 1);
}




.pro_list_litt{height:200px; margin:10px;  text-align:center; width:250px;transition:all 0.2s linear; background:#fff;opacity: 1; }
.pro_list_litt img{ max-width:100%; max-height:100%;}
.pro_list_li_spantt{height: auto; display:inline-block; vertical-align:middle; }


.cell .mask {
 width:250px;
	 height:250px;
	 background:#fff;
	 	padding:10px;
}

.cell .mask .thum {
	width: 250px;
	height: 200px;

	

}



.cell .mask .name {
	width: 100%;
	height: auto;
	line-height: 30px;
	text-align: center;
	color: #333;
	text-align: center;
	position: absolute;
	left: 0;
	top: 83%;
	font-weight: normal;
	font-size: 15px;
}




.cell:hover .mask {
	-webkit-transform: scale(1.02);
	opacity: 1;

	
}
.cell:hover .mask .name{
	-webkit-transform: scale(1.02);
	opacity: 1;

	
}



.swiper-button-next,.swiper-button-prev{
	width: 50px;
	height: 50px;
	background-image: none;
	background-color: #999;
	font-size: 35px;
	border-radius:50%;
	color: #fff;
	text-align: center;
}

.swiper-button-next:hover,.swiper-button-prev:hover{

	background-color: #D92429;

}








.weizhia{right: -55px;}
.weizhib{left: -55px;}




@media only screen and (max-width:1100px) {
.weizhia{right: 0px;}
.weizhib{left: 0px;}
}


.swiper-button-next:before{
	position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    transform: translate(-50%,-50%) rotate(-45deg);
    -ms-transform: translate(-50%,-50%) rotate(-45deg);
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    border: 1px solid #fff;
    content: "";
    z-index: 9;
    border-width: 0 2px 2px 0;
}
.swiper-button-prev:before{
	position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    transform: translate(-50%,-50%) rotate(-45deg);
    -ms-transform: translate(-50%,-50%) rotate(-45deg);
    -webkit-transform: translate(-50%,-50%) rotate(-45deg);
    border: 1px solid #fff;
    content: "";
    border-width: 2px 0 0 2px;
}







.project-cover{
	position: absolute;
    width: 100%;
    height: 100%;
    max-height: 400px;
    margin-top: 0;
    overflow: hidden;
    z-index: 2;
    cursor: pointer;
    opacity: 0;
    transition: opacity .4s ease-out;
}

.card-header, .card-body{
	position: relative;
	height: 100%;
    margin: 0 auto;
    padding: 0;
    transition: margin .4s ease-out;
    text-align: center;
    overflow: hidden;
}

.card-body p{
	position: relative;
    display: block;
    z-index: 2;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    transition: opacity .4s ease-out,margin-top .4s ease-out;
    letter-spacing: 1px;
}

a:hover .project-cover{
 	opacity: 1;
 }


.about_dibu_box{	position: relative;
  	width: 100%;
  	overflow: hidden;
	margin-left:-1%;}
.about_dibu_box ul li{ 
   width:24%;
	 float:left;	

	 margin:1% 0 0 1%;}
	 .about_dibu_box ul li p{ font-size:13px; text-align:left; width:100%; line-height:24px;}


 /* core */
.core{
  	position: relative;
  	width: 100%;
  	overflow: hidden;
	margin-left:-1%;


	
 }
.core .col-md-3{
	height: 100%;
 	padding: 0;
	 width:24%;
	 float:left;	
	 overflow:hidden;
	 position:relative;
	 margin:1% 0 0 1%;
	  
 }

.core .project-cover{
    padding: 0 ;
    top: 0;
    opacity: 1;
    transition: opacity .4s ease-out,background .4s ease-out;
}
.core .card-header{

    top: 50%;
    transform: translateY(-50%);
	 
 }
.core img{
 width: 100%;
    height: auto;
    z-index: 1;
    border: 0;
	

 }
 .core .card-header img{
 	width: 60px;
    background: none;
    margin-top: 40px;
	height:auto;
 }
 .core .card-header h3{
 	font-size: 14px;
	 color:#fff;
	 font-weight:normal;
	 width:100%; height:40px; line-height:40px; background:rgba(0,0,0,.4); position:absolute; bottom:0;
 }
 
.core .card-body img{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	display: block;
    width: 75px;
    background: none;
    padding-bottom: 40px;
    transition: all .35s ease-out;
    opacity: 0;
}


.core .aa{
 background:rgba(244,104,85,.8);
}
.core a:hover .aa{
 background:rgba(255,255,255,0);
}


.core .bb{
 background:rgba(241,173,66,.8);
}
.core a:hover .bb{
 background:rgba(255,255,255,0);
}



.core .cc{
 background:rgba(171,216,70,.8);
}
.core a:hover .cc{
 background:rgba(255,255,255,0);
}



.core .dd{
 background:rgba(105,218,170,.8);
}
.core a:hover .dd{
 background:rgba(255,255,255,0);
}

.core a:hover .project-cover .card-body img{
	opacity: 0;
	left: 50%;
	transform: translateX(-50%);
	 background:rgba(255,255,255,.2);
}
.core .project-cover:hover .card-header{
	opacity: 0;
}
.core .project-cover:hover .card-header p{
	opacity: 0;
}


@media (max-width: 1199px) {

.card-header, .card-body{

	height: 1000%;

}

 .core .card-header h3{
 	font-size: 14px;
 }
}