@charset "utf-8";


.wrap a {
    display:block;
    width:300px;
    height:500px;
    text-decoration:none;
    color:#000;
}
.wrap {
    width:300px;
    height:500px;
    position:relative;
    overflow:hidden;
    font-family:arial, sans-serif;
    border:0;
    /*margin:0 10px;*/
    float:left;
    display:inline;
    text-align:center
}
.wrap img {
    border:0;width:300px;
    height:500px;

}
.wrap i {
    display:block;
    width:300px;
    height:500px;
    position:absolute;
    left:0;
    top:384px;
    z-index:1;
    background:#000;
    filter: alpha(opacity=40);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    opacity:0.40;
    -webkit-transition: all 0.6s ease-in-out;
}
.wrap p {
    text-align:left;
    display:block;
    width:300px;
    height:500px;
    position:absolute;
    left:0;
    top:384px;
    z-index:1;
    background:#424858;
    font-size:12px;
    color:#fff;
    padding:0;
    margin:0;
    line-height:16px;
    -webkit-transition: all 0.6s ease-in-out;
    filter:alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}
.wrap p b {
    display:block;
    font-size:24px;
    color:#fff;
    text-align:center;
    margin-top: 20px;
    line-height:30px;
}
.wrap p span {
    display:block;
    padding:15px;
    font-size: 16px;
    line-height:20px;
    text-align: center;
}

.wrap a:hover {
    direction:ltr;
}
.wrap a:hover i {
    top:0;
}
.wrap a:hover p {
    top:0;
}
.clear {
    clear:left;
}
.xhx{width: 20px;height: 1px;background: #99a2ba;margin-top: 11px;}