@charset "utf-8";
/* CSS Document */
.tabPanel ul{ }
.tabPanel ul li{font-size:16px; line-height:37px; width:116px; height:38px; margin:0 5px; display:inline-block; color:#bbbbbb;text-transform:Capitalize; cursor:pointer;}
.tabPanel .hit{ font-size:16px; line-height:37px; display:inline-block; color:#fbfbfb; background:url(../images/al_natbg.png) center center no-repeat;}
.panes{ position:relative; width:100%;}
.pane{ display:none; position:relative; width:100%;} 
.pane, .panes{animation:pane 0.5s linear 0s alternate both;
-webkit-animation:pane 0.5s linear 0s alternate both;
-moz-animation:pane 0.5s linear 0s alternate both;
-o-animation:pane 0.5s linear 0s alternate both; }
@keyframes pane
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; left:30%;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; left:0%;}}
@-webkit-keyframes pane
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; left:30%;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; left:0%;}}
@-moz-keyframes pane
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; left:30%;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; left:0%;}}
@-o-keyframes pane
{0% {filter:alpha(opacity=0.6); -moz-opacity:60; opacity:60; left:30%;} 100%{filter:alpha(opacity=100); -moz-opacity:1; opacity:1; left:0%;}}



#workbox {
	position: relative;
	width: 100%;
	height: 100%;
}
#workbox .workshow {
	float: left;
	display: block; overflow:hidden;
	width: 20%; position:relative;
	cursor: pointer;

}

#workbox .workshow:before{
	 box-sizing: border-box;
	position: absolute;
	/*background: url(../images/view.png) no-repeat center;*/
    content: '';
    right: 30px;
    left: 30px;
    top:30px;
    bottom: 150px;
    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;
}

.workshow a {
	display: block;
	background: #fff; 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);
}

.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:-120px; 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;}