@charset "UTF-8";

body {overflow-x: hidden;font-family: "Microsoft YaHei";}
ul {padding: 0;margin: 0;}
ul li {list-style: none;}
/*a {color: #fff;text-decoration: none;}
h1, h2, h3, h4, h5 {margin: 0;}
a:focus,a:hover {color: #23527c;text-decoration: none;}
a:focus {outline: none;outline-offset: -2px;}
P {margin-bottom: 0;}*/

.xyin-case-item .case-main-bot ul:after, {content: "";display: table;clear: both;}
.xyin-case-item .case-main-bot ul li h5, {text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}

/* xyin-case */
.xyin-case {padding: 70px 0;}
.xyin-case-sort {margin:0 auto; text-align:center}
.xyin-case-sort ul{display:inline-block; margin:0 auto; overflow:hidden}
.xyin-case-sort li {line-height: 48px; background: #fff;text-align: center; float: left;border:#dedede 1px solid;margin:3px;padding:0 18px;position: relative;height: 48px;/*width: calc(12.5% - 18px);*/overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }
.xyin-case-sort li a {padding: 0 15px;line-height: 48px;font-size: 16px;vertical-align: middle;color: #000000;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;  }
.xyin-case-sort li:hover, .xyin-case-sort li.on {background: #f39801;position: relative;color: #fff;cursor: pointer;}
.xyin-case-sort li:hover a, .xyin-case-sort li.on a {color: #fff;}
.xyin-case-item {overflow: hidden;padding: 0px;width: 100%;}
.xyin-case-item .case-main-top {background: #f5f5f5;display: table;margin-bottom: 20px;position: relative;float: left;width: 50%;}
.case_item{float: left;width: calc(32.1% - 11px);margin:10px 11px;position: relative; background-color:#000;}
.xyin-case-main{margin:10px -11px;}
/*.case_item h3{position: absolute;background: rgba(0,0,0,0.5);font:400 14px/43px "Microsoft Yahei";color: #fff;width: 100%;z-index: 9999;bottom: 0px;left:0px;padding-left:30px;}
.case_item h3 a{color: #fff;}*/
.xyin-case-main img{width: 100%;height: auto;}
.xyin-case-item .case-main-top .img {width: 100%;display: table-cell;vertical-align: middle;}

.case_item h3 {
    position: absolute;
    padding: 0 5%;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display:none;
    transition: all 0.5s ease-in-out;
    color: #fff; z-index:9999
}
.case_item a h3{color: #fff;}


.case_item a:hover h3 {display:block;}
.case_item a:hover img{opacity:0.4}



@media (max-width: 946px) {
	.case_item{float: left;width: calc(31.8% - 11px);
}
@media (max-width: 768px) {
.xyin-case-sort li {line-height: 40px; height: 40px; }
.xyin-case-sort li a {padding: 0 5px;line-height: 40px;  }

}