.BookShoWindow img{max-width:100%}


.duanl11 img{max-width: 100%;margin:0 a;}

/*公司简介*/

.about{max-width: 1200px;margin: 0 auto;padding:2%}
.about_w{    width: 1200px;  margin: 0 auto;  overflow: hidden; text-align: center;}

@media only screen and (min-width: 300px) and (max-width: 1200px){
.about_w{width:96%;}
}


.about_nr h2 {
   font-size: 24px;
    font-weight: normal;
    text-align: center;
    color: #fff;
    background: #0684bf;
    float: left;
    margin: 0 3%;
    padding: 0 10%;
    line-height: 45px;
    margin-bottom: 20px;
}



.about_nr>p{font-size: 16px;color: #666;line-height: 30px;max-width: 1200px;margin:30px auto 0}
.about_nr p.ind{text-indent: 2em;padding: 0 1%}
.about h3 img{width:100%;height: 100%}
.about h3 {width:100%;margin-top:30px;}
.about_bg{background: #004da0;width:100%;}
.about_bg h2{color:#fff}
.about_bg p{color: #fff;}

.company_nr{padding: 30px 0;}


.pager{width:100%;overflow:hidden;padding:30px 0px 40px 0px;text-align:center;}
.pager li{float:left;border: none;}
.pager a{ display:inline-block; height:28px; line-height:28px; padding:0 8px; border:1px #e0e0e0 solid; margin:0 3px; font-size:14px; color:#666}
.pager a:hover{ color:#fff; border:1px #005fbb  solid; background:#005fbb ;}
.pager .sel{ color:#fff; border:1px #005fbb  solid; background:#005fbb ;}
.pager a.pager_on{ color:#fff; border:1px #005fbb  solid; background:#005fbb ;}
/*产品展示*/

.container{overflow: hidden}
.grid {overflow: hidden;
	position: relative;
	margin: 30px auto;
	padding: 1em 0 0em;
	max-width: 1200px;
	list-style: none;
	text-align: center;
}

.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin:10px 1%;
/*	min-width: 320px;
	max-width: 480px;
	
	width: 48%;
	background: red;*/
	text-align: center;

    width: calc(100%/4 - 2%);
    max-height: 360px;
    background: #000;    
}



.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity:1;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}


/***** Lily *****/


figure.effect-lily img {
	max-width: none;
	width: -webkit-calc(100% + 50px);
	width: calc(100% + 50px);

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-40px,0, 0);
	transform: translate3d(-40px,0,0);height:240px;    opacity: 0.9;
}

figure.effect-lily figcaption {
	text-align: left;
}

figure.effect-lily figcaption > div {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em 0.9em;
	width: 100%;
	height: 50%;
}

figure.effect-lily h2,
figure.effect-lily p {
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-lily h2 {color:#fff;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-lily p {
	color: rgba(255,255,255,0.8);
	opacity: 0;
	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
	transition: opacity 0.2s, transform 0.35s;width:71%;
}

figure.effect-lily:hover img{opacity: 0.5;}

	

figure.effect-lily:hover p {opacity: 1;}
figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transition-duration: 0.35s;
	transition-duration: 0.35s;margin-top:10px;line-height: 22px;
}

/*---------------*/
/***** Sadie *****/
/*---------------*/

figure.effect-sadie figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	color: #484c61;
	-webkit-transition: -webkit-transform 0.35s, color 0.35s;
	transition: transform 0.35s, color 0.35s;
	-webkit-transform: translate3d(0,-50%,0);
	transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 2em;
	width: 100%;
	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
	color: #fff;
	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

@media(max-width:1100px){figure.effect-lily p {width:65%} figure.effect-lily h2{width:70%;} figure.effect-lily figcaption > div{bottom:50px;}}
@media(max-width:1000px){.grid figure{  width: calc(100%/3 - 2%)}}
@media(max-width:800px){.grid figure{  width: calc(100%/2 - 2%)}}
@media(max-width:650px) and (min-width:320px){.grid figure{  width: calc(100%/1 - 2%)}    }


/*页码*/
.NumberBox{

	margin:70px 0;

	text-align: center;

}

.NumberBox a{

	display: inline-block;

	width: 32px;

	height: 32px;

	border: 1px solid #ddd;

	text-align: center;

	line-height: 32px;

	font-size: 16px;

	color: #787878;

	margin: 0 3px;

}

.NumberBox a.a1{

	font-size: 16px;

	width: 72px;

}

.NumberBox span{

	display: inline-block;

	width: 32px;

	height: 32px;

	border: 1px solid #005bac;

	text-align: center;

	line-height: 32px;

	font-size: 16px;

	color: #fff;

	background: #005bac;

	cursor: pointer;

	margin: 0 3px;

}

@media(max-width:600px){.NumberBox{

	margin:30px 0;

	text-align: center;

}

.NumberBox a{

	display: inline-block;

	width: 32px;

	height: 32px;

	border: 1px solid #ddd;

	text-align: center;

	line-height: 32px;

	font-size: 16px;

	color: #787878;

	margin: 0 3px;

}

.NumberBox a.a1{

	font-size: 16px;

	width: 72px;

}

.NumberBox span{

	display: inline-block;

	width: 32px;

	height: 32px;

	border: 1px solid #005bac;

	text-align: center;

	line-height: 32px;

	font-size: 16px;

	color: #fff;

	background: #005bac;

	cursor: pointer;

	margin: 0 3px;

    }


.NumberBox a.a1 {
    width: 52px;
    line-height: 32px;
    height: 32px;
    font-size: 12px;
}
}



/*产品详细页面*/
.product_xx{width:100%}
.BookShoWindow{max-width: 1200px;margin: 0px auto 50px;}

.BookShoWindow h2{ width: 100%;display: block;text-align: center;font-size: 24px;font-weight: normal;}

.BookShoWindow .time{

	

	line-height: 38px;

	border-left: none;

	border-right: none;

	margin-top: 20px;

	text-align: center;

	font-size: 14px;

	color: #999;

}

.BookShoWindow>img{
max-width:100%;
	display: block;

	margin: 20px auto;

	

}

.ChangePage{overflow: hidden;

	border-top: 1px  solid #ddd;

	margin-top: 60px;

	padding-top: 20px;

}
@media(max-width:600px){.ChangePage{margin-top:30px;}}
.ChangePage ul{

	float: left;

	width: 100%;

}

.ChangePage ul li{padding:0 1%;

	color: #888;

	font-size: 16px;

	line-height: 30px;

}

.ChangePage ul li a{

	color: #888;

}
.ChangePage ul li a:hover{color:#666;transition: color .5s}
.ChangePage p{

	float: right;

	font-size: 16px;

	color: #888;

	width: 50%;

	text-align: right;

	margin-top: 20px;

}

.ChangePage p a{

	display: inline-block;

	margin: 0 3px;

}


@media screen and (max-width: 1200px){
.BookShoWindow {
    width: 100%;
  
}
.BookShoWindow {
    max-width: 1200px;
    margin: 0px auto 50px;
    margin-top: 70px;
}}


@media screen and (max-width: 600px){
.BookShoWindow {
    margin-top: 40px;
    }}

/*nr页面*/

.BookShoWindow .duanl{    font-size: 16px;padding: 0 1%;
    color: #666;
    line-height: 30px;
    margin-top: 30px;text-indent: 30px;min-height: 200px;}


/*新闻*/
.NewCenterList_box{padding: 30px 0}
.NewCenterList{overflow: hidden;

	max-width: 1200px;

	margin: 60px auto 30px;

	

}

.NewCenterList .NewPage{
float: left;
width:calc(100%/3 - 4%);
margin: 0 1%;
    padding: 1% 1%;
margin-top: 20px;
background: #f4f4f4;
}


.NewCenterList .NewPage p.time{

	
	background: url(../images/time.png) no-repeat left center;

	padding-left: 25px;

	line-height: 40px;

	transition: all .5s;

	height: 40px;

}

.NewCenterList .NewPage .pics img{

	display: block;
/*height: 200px;*/
	width: 100%;

}

.NewCenterList .NewPage h3{

	margin-top: 20px;

	font-size: 18px;

	line-height: 24px;

	/*display: -webkit-box;

	-webkit-box-orient: vertical;

	-webkit-line-clamp: 2;*/


}

.NewCenterList .NewPage h3 a{display: block;

	height: 24px	;	line-height: 24px;width: 100%; transition: all .5s;color:#333;font-weight: 600;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;


}

.NewCenterList .NewPage p{

	font-size: 16px;

	color: #999;
height: 100px;
	line-height: 24px;

	transition: all .5s;



}
.NewCenterList .NewPage .dl{margin-top:20px;border-top:1px solid #e0e0e0;padding-top: 20px;  	line-height: 24px; width:100%;height:100px;
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;}

.NewPage:hover h3 a{color:#fff;}
.NewPage:hover .time{color:#fff}
.NewPage:hover p{color:#b9d3fe;}
.NewCenterList .NewPage:hover{background:rgb(0, 77, 160);border-radius: 4px;transition: all .5s;}

@media screen and (max-width: 1000px){.NewCenterList .NewPage{width:calc(100%/2 - 4%)} }	

	


@media screen and (max-width: 600px){.NewCenterList .NewPage{width:calc(100%/1 - 4%)} }
