@charset "utf-8";

/*案例*/
.layui-container02{position:relative;margin:0 auto;padding:0 15px;box-sizing:border-box;max-width: 1780px;}
.layui-row:after,.layui-row:before{content:'';display:block;clear:both}
.layui-col-xs12{position:relative;display:block;box-sizing:border-box;float:left;width:100%}

.container02{overflow:hidden;background: #f7f7f8;}

.container02 .title{text-align:center;margin-bottom: 4rem;margin-top: 6rem;}
.container02 .title h2{ font-size:3rem; color:#ee7019; font-weight:bold;}
.container02 .title h4{ font-size:1.6rem; color:#504f54; margin:1.25rem 0 1.25rem}

.container02 .slider-nav{max-width: 650px;margin: 0 auto;margin-bottom: 3.875rem; text-align:center;}
.container02 .slider-nav .miso-slide h5{display:inline-block;padding: 0 1.875rem;height: 2.87rem;line-height: 2.875rem;-moz-border-radius: 3px;-webkit-border-radius:3px;border-radius: 3px;cursor:pointer;background: #fff;}
.container02 .slider-nav h5{font-size:1rem;color: #333; height: 38px;}
.container02 .slider-nav .miso-slide.miso-current h5{background: #ee7019;color: #fff;}
.container02 ul.ul{ font-size:0; text-align:center; overflow:hidden; margin:0;padding:0;}
.container02 ul.ul li{display:inline-block; *display:inline; *zoom:1;float:left;width: 20%;text-align:center;}
.container02 ul.ul li a{ display:block; width:100%; height:100%; position:relative; background:#000; overflow:hidden}
.container02 ul.ul li a .img,.container02 ul.ul li a .img img{ width:100%; overflow:hidden; position:relative;}
.container02 ul.ul li a .img img{ -moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.container02 ul.ul li a .img:after{ content:""; position:absolute; right:0; top:0; width:100%; height:100%; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4C000000', endColorstr='#4C000000');background:rgba(0,0,0,0.3); -moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
:root .container02 ul.ul li a .img:after{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00000000', endColorstr='#00000000');}/*for IE9*/ 
:root .container02 ul.ul li a .img:after{filter:none;}/*for IE9*/
.container02 ul.ul li a .con{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden}
.container02 ul.ul li a .con h3, .container02 ul.ul li a .con h3 img{position:relative;-moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.container02 ul.ul li a .con h3 img{ max-width:80%; margin-top: 30px;}
.container02 ul.ul li a .con h5{ height:0; overflow:hidden; position:relative; -moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.container02 ul.ul li a .con h5 span{ display:inline-block; font-size:2rem; color:#fff; margin:0 0.5rem}
.container02 ul.ul li a .con h4{ height:0; -moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
.container02 ul.ul li a .con:before{ content:""; position:absolute; right:0; top:0; width:0; height:100%; filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#D8D4042C', endColorstr='#D8D4042C');background:rgba(238,112,25,0.85); -moz-transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;-ms-transition: all 0.6s ease-in-out;transition: all 0.6s ease-in-out;}
:root .container02 ul.ul li a .con:before{filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#00D4042C', endColorstr='#00D4042C');}/*for IE9*/ 
:root .container02 ul.ul li a .con:before{filter:none;}/*for IE9*/
.container02 ul.ul li:nth-child(21){ display:none}
.table_cell h5{margin-top: 110px;}
.layui-img-responsive{height: 250px; width: auto;}

#Staff{width:1140px;margin:40px auto 0;} 
#Staff h1{ text-align:center; font-size:28px; font-weight:bold; padding-bottom:40px; } 
#Staff ul{background-color:#F1F1F1; padding:20px 20px 0;} 
#Staff ul li{ float:left; width:353px; margin-right:20px; margin-bottom:20px; padding:20px; background-color:#FFFFFF; border-right:solid 1px #D9D9D9; border-bottom:solid 1px #D9D9D9;list-style-type:none;} 
#Staff ul li:nth-child(3n){margin-right:0; float: right;}
#Staff ul li dl{} 
#Staff ul li dl dt{ width:109px; height:109px; float:left;} 
#Staff ul li dl dt img{ width:109px; height:109pxs;border:0px;} 
#Staff ul li dl dd{float:right; width:150px; font-size:12px;} 
#Staff ul li dl dd span{ text-align:left;line-height:30px; font-size:18px; font-weight:bold; display:block;} 
#Staff ul li dl dd p{text-align:right;} 

.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}

@media(min-width: 768px){
	
	.container02 ul.ul li:hover a .img:after{ left:0; width:0}
	.container02 ul.ul li:hover a .con:before{ left:0; width:100%}
	
	.container02 ul.ul li:hover a .con h4{ height:1.875rem}
	.container02 ul.ul li:hover a .con h5{ height:2rem}

}

@media(max-width: 1420px){
	.table_cell h5{margin-top: 80px;}
	.container02 ul.ul li a .con h3 img{ margin-top: 10px;}
	.layui-img-responsive{height: 180px; width: auto;}
	
}

@media(max-width: 1200px){
	.container02 ul.ul li{ width:33.333333%}
	.container02 ul.ul li:nth-child(21){ display:block !important}
	
}

@media(max-width: 768px){
	
	.container02 ul.ul li{width: 33.33333%;}
	.container02 ul.ul li a .con h3 img{ max-width:60%; max-height:3.5rem}
	.container02 .title{ margin-bottom:3rem}
	.container02 .slider-for ul li{ width:100%;}
	.container02 .slider-nav .miso-slide h5{ padding:0; display:block}
	.container02 .slider-for ul li .box .fl .dot img{ height:3.5rem}
	.layui-img-responsive {
    height: 100px;
    width: auto;
}
	
}