/**不同分辨率案例展示 begin **/
#workbox {
	position: relative;
	z-index: 6;
	overflow: hidden;
	background: #ededed;
	padding:40px 30px;
	width: calc(100% + 1px) !important;
	margin-left: -1px;
}
#workbox .workshow {
	float: left;
	display: block;
	overflow: hidden;
	width: calc(20% - 1px);
	margin-left: 1px;
	margin-bottom: 25px;
	position: relative;
	cursor: pointer;
}
#workbox .workshow:before {
	box-sizing: border-box;
	position: absolute;
	content: '';
	right: 30px;
	left: 30px;
	top: 30px;
	bottom: 150px;
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	z-index: 4;
}
#workbox .workshow:hover:before {
	opacity: 1;
	top: 0;
	-webkit-transform: scale(1);
	transform: scale(1);
}
#workbox .opacity1 {
	opacity: 1;
}
.work-size {
	width: 50%;
}
 @media only screen and (max-width:768px) {
 #workbox .workshow, .work-size {
 width: 50%;
}
}
 @media only screen and (min-width:768px) {
 #workbox .workshow, .work-size {
 width: 33.33%;
}
}
 @media only screen and (min-width:1260px) {
 #workbox .workshow, .work-size {
 width: 25%;
}
}
 @media only screen and (min-width:1800px) {
 #workbox .workshow, .work-size {
 width: 20%;
}
}
 @media only screen and (min-width:2400px) {
 #workbox .workshow, .work-size {
 width: 16.66%;
}
}
.workshow a {
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
}
.workimg {
	display: block;
	margin: 0;
	width: 100%;
	transition: -webkit-transform 0.3s linear;
	transition: -moz-transform 0.3s linear;
	transition: transform 0.3s linear;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}
/*.work_img {display: block;}*/
.work-imgbox {
	overflow: hidden;
	display: block;
	position: relative;
}
#workbox .workshow .work-imgbox:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	z-index: 3;
	background: url(../images1/nal_hua.png) repeat;
	top: -100%;
	transition: opacity 0.35s;
	-webkit-transition: opacity 0.35s;
	opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	-webkit-opacity: 0;
	filter: alpha(opacity=0);
}
#workbox .workshow .woryan {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	z-index: 99;
	left: 0;
	top: 0;
	background: url(/skins/image/nal_yan.png) center top no-repeat;
	text-align: center;
}
#workbox .workshow .woryan {
	transition: -o-transform 0.6s cubic-bezier(1, .57, .78, 1.0);
	transition: -ms-transform 0.6s cubic-bezier(1, .57, .78, 1.0);
	transition: -webkit-transform 0.6s cubic-bezier(1, .57, .78, 1.0);
	transition: -moz-transform 0.6s cubic-bezier(1, .57, .78, 1.0);
	transition: transform 0.6s cubic-bezier(1, .57, .78, 1.0);
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	-webkit-opacity: 0;
	filter: alpha(opacity=0);
}
#workbox .workshow:hover .work-imgbox:before {
	top: 0;
	opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	-webkit-opacity: 1;
	filter: alpha(opacity=100);
}
#workbox .workshow:hover .workimg {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}
#workbox .workshow:hover .woryan {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	-webkit-opacity: 1;
	filter: alpha(opacity=100);
}
#workbox .worjsk {
	display: block;
	float: left;
	background-color: transparent !important;
}
/*#workbox .workshow .al_ewmk0{ width:32px; height:32px; float:right !important; position: absolute !important; top:20px; right:23px; z-index:9;}**/
#workbox .worjs {
	background: #fff;
	padding: 20px 23px 23px;
	overflow: hidden;
	position: relative;
}
#workbox .worjs0 {
	background: #fff !important;
	padding: 20px 23px 23px;
	overflow: hidden;
	position: relative;
}
#workbox .worjs1 {
	font-size: 16px;
	line-height: 28px;
	color: #474646;
	display: block;
	margin-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#workbox .worjs2 {
	font-size: 12px;
	line-height: 24px;
	color: #9a9999;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#workbox .workshow .al_ewmk {
	display: block;
	width: 32px;
	height: 32px;
	cursor: pointer;
	position: absolute;
	z-index: 999;
	overflow: hidden;
	background: url(../images1/alewm_qu2.png) center center no-repeat;
	float: left;
	bottom: 50px;
	right: 23px;
}
#workbox .workshow .al_ewm1 {
	position: relative;
	display: block;
	top: 0;
	left: 0;
}
#workbox .workshow .al_ewm2 {
	position: relative;
	display: block;
	top: 0px;
	left: 0;
}
#workbox .workshow .al_ewmk, #workbox .workshow .al_ewm1, #workbox .workshow .al_ewm2 {
	-o-transition: 0.6s cubic-bezier(1, .57, .78, 1.45);
	-webkit-transition: 0.6s cubic-bezier(1, .57, .78, 1.45);
	-ms-transition: 0.6s cubic-bezier(1, .57, .78, 1.45);
	-moz-transition: 0.6s cubic-bezier(1, .57, .78, 1.45);
	transition: 0.6s cubic-bezier(1, .57, .78, 1.45);
}
#workbox .workshow:hover .al_ewmk {
	background: url(../images1/alewm_qu.png) center center no-repeat;
}
#workbox .workshow:hover .al_ewmk .al_ewm1 {
	top: -32px !important;
}
#workbox .workshow:hover .al_ewmk .al_ewm2 {
	top: -32px !important;
}
#workbox .workshow i {
	display: block;
	top: 33%;
	position: relative;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
}
#workbox .workshow i em {
	display: inline-block;
	width: 50px;
	height: 65px;
	background-image: url(/skins/image/go.png);
	transform: scale(0.7, 0.7);
	-webkit-transform: scale(0.7, 0.7);
	-moz-transform: scale(0.7, 0.7);
	-o-transform: scale(0.7, 0.7);
}
#workbox .workshow i em {
	-ms-animation: sprite-animate-go 1.7s steps(51)infinite;
	animation: sprite-animate-go 1.7s steps(51)infinite;
	-o-animation: sprite-animate-go 1.7s steps(51)infinite;
	-moz-animation: sprite-animate-go 1.7s steps(51)infinite;
	-webkit-animation: sprite-animate-go 1.7s steps(51)infinite;
}
 @-webkit-keyframes sprite-animate-go {
 from {
 background-position: 0 0
}
to {
	background-position: -2550px 0
}
}
 @-moz-keyframes sprite-animate-go {
 from {
 background-position: 0 0
}
to {
	background-position: -2550px 0
}
}
 @-o-keyframes sprite-animate-go {
 from {
 background-position: 0 0
}
to {
	background-position: -2550px 0
}
}
 @keyframes sprite-animate-go {
 from {
 background-position: 0 0
}
to {
	background-position: -2550px 0
}
}
/**案例展示**/
.casebg {
	display: block;
	overflow: hidden;
	background: #FFF;
}
.ca_ti {
	text-align: center;
	display: block;
}
#workbox {
	position: relative;
	width: 100%;
	height: 100%;
}
#workbox .workshow {
	float: left;
	display: block;
	overflow: hidden;
	width: 20%;
	position: relative;
	cursor: pointer;
	box-shadow: 0 0 10px rgb(0 0 0 / 15%);
}
#workbox .workshow:before {
	box-sizing: border-box;
	position: relative;
	/*background: url(../images1/view.png) no-repeat center;*/
	content: '';
	right: 30px;
	left: 30px;
	top: 30px;
	bottom: 150px;
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	z-index: 4;
}
#workbox .workshow:hover:before {
	opacity: 1;
	top: 0;
	-webkit-transform: scale(1);
	transform: scale(1);
}
#workbox .opacity1 {
	opacity: 1;
}
.work-size {
	width: 50%;
}
 @media only screen and (max-width:768px) {
 #workbox .workshow, .work-size {
 width: calc(100% - 1px);
}
}
 @media only screen and (min-width:768px) {
 #workbox .workshow, .work-size {
 width: calc(33.33% - 1px);
}
}
 @media only screen and (min-width:1260px) {
 #workbox .workshow, .work-size {
 width: calc(25% - 1px);
}
}
 @media only screen and (min-width:1800px) {
 #workbox .workshow, .work-size {
 width: calc(20% - 1px);
}
}
 @media only screen and (min-width:2400px) {
 #workbox .workshow, .work-size {
 width: 16.66%;
}
}
.workshow a {
	display: block;
	overflow: hidden;
	text-decoration: none;
}
.workimg {
	display: block;
	margin: 0;
	width: 100%;
	transition: -webkit-transform 0.3s linear;
	transition: -moz-transform 0.3s linear;
	transition: transform 0.3s linear;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	transform: scale(1);
}
.work-imgbox img {
	font-size: 14px;
	color: #666;
}
.workinfo {
	color: #fff;
	transition: background-color 0.5s, color 0.5s, bottom 0.5s;
	-webkit-transition: background-color 0.5s, color 0.5s, bottom 0.5s;
	position: absolute;
	width: 100%;
	bottom: -70px;
	overflow: hidden;
	z-index: 3;
}
.workinfo h2 {
	text-transform: uppercase;
	/*样式全大写的*/
	font-weight: 400;
	padding: 16px 20px;
	font-size: 14px;
	line-height: 24px;
}
/*.work_img {display: block;}*/
.work-imgbox {
	overflow: hidden;
}
#workbox .workshow:hover .workinfo {
	background-image: none;
	bottom: 0;
	background-color: #000;
	color: #d5d5d5;
}
#workbox .workshow .work-imgbox:before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	z-index: 3;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	top: -100%;
	transition: opacity 0.35s;
	-webkit-transition: opacity 0.35s;
}
#workbox .workshow:hover .work-imgbox:before {
	opacity: 1;
	top: 0;
}
#workbox .workshow:hover .workimg {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	transform: scale(1.1);
}
.workshow .woim1 {
	position: absolute;
	left: -68px;
	top: 36%;
	margin-top: -34px;
	z-index: 4;
}
.workshow .woim2 {
	position: absolute;
	right: -34px;
	top: 36%;
	margin-top: -16px;
	z-index: 4;
}
.workshow .woim1, .workshow .woim2 {
	-webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
	-moz-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
	-o-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}
.workshow:hover .woim1 {
	left: 50%;
	margin-left: -34px;
}
.workshow:hover .woim2 {
	right: 50%;
	margin-right: -17px;
}
 @media (max-width: 767px) {
#workbox {
 padding: 10px 10px;
}
}