@charset "utf-8";
/*Works*/
#works_body { margin:auto; width:100%;}

#works_tool { position:relative; z-index:100;}
#works_tool .tools { position:fixed; z-index:10; left:0; top:0; width:100%; height:60px; border-bottom:1px solid #E4E4E4; background:rgba(255,255,255,.9); -webkit-transition:top .5s;}
#works_tool .tools.hide { top:-62px;}
#works_tool .tools .box { margin:auto; padding:0 50px;}
#works_tool .tools .box .logo { float:left;}
#works_tool .tools .box .btn { float:right;}
#works_tool .tools .box .btn a { display:inline-block; width:60px; height:60px; background:url(images/tool_gobtn.png);}
#works_tool .tools .box .btn a:hover { background-color:#4C4C4C;}
#works_tool .tools .box .btn a.goleft { background-position:0 0;}
#works_tool .tools .box .btn a.goright { background-position:-60px 0;}
#works_tool .tools .box .btn a.goclose { background-position:-120px 0; border-left:1px solid #E4E4E4;}
#works_tool .tools .box .btn a.goleft:hover { background-position:0 -60px;}
#works_tool .tools .box .btn a.goright:hover { background-position:-60px -60px;}
#works_tool .tools .box .btn a.goclose:hover { background-position:-120px -60px;}
#works_tool .zenith_logo { position:fixed; right:60px; top:30px; background:#ffffff; box-shadow:1px 1px 0 rgba(0,0,0,.5); -webkit-transition:top .5s;}
#works_tool .zenith_logo.hide { top:-100px;}
#works_tool .gowork { position:absolute; top:300px;}
#works_tool .gowork a { display:block; width:100px; height:180px; background:url(images/tool_gobtn2.png) no-repeat 0 center;}
#works_tool .gowork a div { position:absolute; width:0; height:180px; background-size:cover; background-position:center; box-shadow:0 0 20px rgba(0,0,0,.5); -webkit-transition:width .3s;}
#works_tool .gowork a:hover div {width:200px;}
#works_tool .left { left:0;}
#works_tool .right { right:0;}
#works_tool .right a { background-position:-100px center;}
#works_tool .left a div { left:0;}
#works_tool .right a div { right:0;}

#works_top { position:relative;}
#works_top .ico_mouse { position:absolute; bottom:30px; width:100%;}
#works_top .ico_mouse .ico_down { margin:auto; padding-bottom:40px; width:28px; height:52px; background:url(images/ico_mousedown.png) no-repeat center 60px; -webkit-animation: ico_mouse .7s forwards infinite; -moz-animation: ico_mouse .7s forwards infinite; cursor:pointer;}
@-webkit-keyframes ico_mouse{
	0% { background-position: center 60px;}
	75% { background-position: center 80px;}
	100% { background-position: center 60px;}
}
#works_top .img { line-height:10px;}
#works_top .img img { width:100%;}

#works_info { padding:70px 0;}
#works_info .box { margin:auto; width:1000px; text-align:justify;}
#works_info .box .left { }
#works_info .box .right { width:700px;}
#works_info .box .works_logo { padding:0 0 70px;}
#works_info .box .btn_look { padding:0 0 10px;}
#works_info .box .btn_look a { display:inline-block; padding:0 40px 0 80px; border-radius:8px; background:#000000 url(images/info_look_btn1.png) no-repeat 30px center; color:#FFFFFF; font:18px/56px "Microsoft YaHei"; -webkit-transition:background .5s;  -moz-transition:background .5s;}
#works_info .box .btn_look a:hover { background-color:#990000;}
#works_info .box .info_txt { padding:0 0 80px; font:16px/34px "Microsoft YaHei";}
#works_info .box .info_link { }
#works_info .box .info_link .item { position:relative; display:inline-block; margin-right:-10px; width:140px; height:140px; cursor:pointer;}
#works_info .box .info_link .item div{ position:absolute;}
#works_info .box .info_link .item div.bg{ left:20px; top:20px; width:68.5%; height:68.5%; border:1px solid #FFFFFF; -webkit-transform:rotate(45deg); -webkit-transition: background .5s;}
#works_info .box .info_link .item div.txt{ padding:50px 0; width:134px; height:40px; text-align:center; font:bold 14px/40px "Microsoft YaHei"; -webkit-transition: color .5s;}
#works_info .box .info_link .item:hover { -webkit-animation:info_link_item .5s forwards;}
#works_info .box .info_link .item:hover div.bg { background:#333333;}
#works_info .box .info_link .item:hover div.txt { color:#FFFFFF;}

@-webkit-keyframes info_link_item{
	0% { -webkit-transform:rotateY(0deg);}
	50% { -webkit-transform:rotateY(90deg);}
	100% { -webkit-transform:rotateY(0deg);}
}

#img_box {}
#img_box .img { line-height:1px;}
#img_box .img img { width:100%;}
#img_box .tit { margin:auto; width:900px; font:40px/86px "Microsoft YaHei";}
#img_box .con { margin:auto; width:900px; font:17px/34px "Microsoft YaHei";}