.page_sub {margin-bottom:0px;padding:0px;border:0px;border-bottom_:2px solid #bbb;}

.works_class li, li.works_class {width:10.5%;padding-bottom:17%;position:relative;margin:0px;border:0px !important;padding-top:0px;padding-left:0px;padding-right:0px;background:#FFF418;text-align:center;}
.works_class li .div, li.works_class .div {display:block;position:absolute;left:0px;top:0px;width:100%;height:100%;text-decoration:none;}
.works_class li .div h2, li.works_class .div h2 {font-size:22px;line-height:160%;display:block;margin:30px 0px;}
.works_class li .div h5, li.works_class .div h5 {position:absolute;left:0px;bottom:0px;width:100%;padding:20px 0px;font-size:13px;color:#999;border-top:3px solid #fff;}
.works_class li .div .icon, li.works_class .div .icon {display:block;width:68px;height:68px;overflow:hidden;margin:auto;position:relative;z-index:1;}
.works_class li .div .icon img, li.works_class .div .icon img {display:block;position:absolute;left:0px;top:0px;width:100%;height:auto;}
.works_class li .div .icon img.hover, li.works_class .div .icon img.hover {z-index:2;top:auto;bottom:0px;opacity:0;*filter:Alpha(opacity=0);}

.works_class li:hover, li.works_class:hover, li.works_class.li_hover {background:#000;}
.works_class li:hover h2, li.works_class:hover h2, li.works_class.li_hover h2 {color:#fff;}
.works_class li:hover h5, li.works_class:hover h5, li.works_class.li_hover h5 {border-color:#000;}
.works_class li:hover .div .icon img, li.works_class:hover .div .icon img, li.works_class.li_hover .div .icon img {opacity:0;*filter:Alpha(opacity=0);}
.works_class li:hover .div .icon img.hover, li.works_class:hover .div .icon img.hover, li.works_class.li_hover .div .icon img.hover {opacity:1;*filter:Alpha(opacity=100);}


.works .list_image {margin:50px 0px;width:100%;background:#F2F2F2;}
.works ul {width:100%;}
.works ul li {width:25%;padding-bottom:20.75%;overflow:hidden;margin-right:0%;margin-bottom:0px;display:inline-block;*display:inline;*zoom:1; vertical-align:top;position:relative;}
.works ul li a, .works ul li img {display:block;position:absolute;left:0px;top:0px;width:100%;height:100%;text-decoration:none;}
.works ul li .hover, .works ul li .describe {opacity:0;*filter:Alpha(opacity=0);z-index:2;}
.works ul li .hover {background-color:#000;}
.works ul li .describe {z-index:3;font-size:17px;left:10%;top:auto;right:auto;bottom:0%;width:auto;height:auto;max-width:80%;line-height:180%;color:#fff;}
.works ul li .describe b {display:block;font-weight:normal;font-size:20px;}
.works ul li .describe b br {display:none;}
.works ul li .describe b hr {display:inline-block;*display:inline;*zoom:1;width:0px;height:0px;margin:10px 0px 3px 0px;border-bottom:3px solid #fff;}

.works ul li:hover .hover {opacity:0.8;*filter:Alpha(opacity=80);}
.works ul li:hover .describe {opacity:1;*filter:Alpha(opacity=100);bottom:15%;}
.works ul li:hover .describe hr {width:100%;width:80px;}

.works ul.max li {width:33.33%;padding-bottom:27.66%;}

.works .list_logo {background-color:#000;}
.works ul.logo li {width:25%;background-color:#000;}
.works ul.logo li .div {opacity:0;*filter:Alpha(opacity=0);z-index:3;}
.works ul.logo li .hover {opacity:1;*filter:Alpha(opacity=100);}
.works ul.logo li .hover img {visibility:visible !important;}
.works ul.logo li .describe {display:none;}
.works ul.logo li:hover .div {opacity:1;*filter:Alpha(opacity=100);}

.works ul.video li {background-color:#000;}
.works ul.video li .hover {background:url(../images/VideoPlay.png) center center no-repeat;background-size:auto 100%;}
.works ul.video li .describe {right:10%;text-align:center;}
.works ul.video li .describe hr {display:none;}
.works ul.video li:hover .hover {opacity:1;*filter:Alpha(opacity=100);background-color:rgba(0,0,0,0.8);}
.works ul.video li:hover .describe {bottom:12%;}

.works_detailed {}
.works_detailed .describe {background:#999;}
.works_detailed .describe .div {color:#fff;}
.works_detailed .describe .div span {display:block;}
.works_detailed .describe .title {font-size:40px;line-height:100%;margin-bottom:20px;}
.works_detailed .describe .subtitle {font-size:18px;margin-bottom:30px;}
.works_detailed .describe .content {font-size:15px;}
.works_detailed .describe .left {}
.works_detailed .describe .right {}
.works_detailed .describe .right hr {width:50px;margin:20px 0px;border-bottom:5px solid #fff;}

.works_detailed .content img {display:block;width:100%;}



.works_extend {padding:30px 40px 10px 40px;background:#f2f2f2;}
.works_extend li {width:30%;line-height:200%;color:#666;}
.works_extend li h4 {font-weight:bold;margin-bottom:10px;color:#000;}

.content_nav {text-align:center;}
.content_nav li {display:inline-block;*display:inline;*zoom:1;margin:0px 10px;}
.content_nav a {text-decoration:none;font-size:20px;line-height:100%;background:#f2f2f2;color:#000;padding:20px;}
.content_nav a:hover {background:#666;color:#fff;}