@charset "utf-8";
/* CSS Document */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.viewdiv {
    width: 100%;
    margin-top: 10px;
    float: left;
    /*border: 10px solid #fff;
    box-shadow: 1px 1px 2px #e6e6e6, -1px -1px 2px #e6e6e6;*/
}

    .viewdiv figure {
        margin: 0;
        position: relative;
    }

        .viewdiv figure img {
            max-width: 100%;
            display: block;
            position: relative;
            margin: 0 auto;
        }

    .viewdiv .thumb {
        overflow: hidden;
    }

    .viewdiv .mask {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        top: auto;
        bottom: 0;
        padding: 15px;
        background: rgba(0, 0, 0, 0.8);
        color: #FFF;
    }

     .viewdiv.view-tenth .mask {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        top: auto;
        bottom: 0;
        padding: 15px;
        background: rgba(0, 0, 0, 1);
        color: #FFF;
    }

    .viewdiv .h2 {
        margin: 0 0 5px;
        padding: 0 0 5px;
        color: #fff !important;
        font-size: 18px;
        line-height: 14px;
        text-decoration: none;
    }

    .viewdiv .mask p {
        /*font-size: 14px;*/
        margin-bottom: 5px;
        color:#ddd !important;
    }



/*view-tenth 默认 */

.view-tenth .link {
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    background: #ed4e6e;
    color: #fff;
    cursor: pointer;
    border: none;
    font-size: 14px;
}


.view-tenth figure {
    overflow: hidden;
}

    .view-tenth figure img {
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: -moz-transform 0.4s;
        transition: transform 0.4s;
    }

    .view-tenth figure:hover img {
        -webkit-transform: translateY(-50px);
        -moz-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
        transform: translateY(-50px);
    }

.view-tenth .mask {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

.view-tenth figure:hover .mask {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}
/*view-tenth 默认 */


/*view-tenthtop */

.view-tenthtop .link {
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    display: none;
    background: #ed4e6e;
    color: #fff;
    cursor: pointer;
    border: none;
    font-size: 14px;
}

.view-tenthtop figure {
    overflow: hidden;
}

    .view-tenthtop figure img {
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: -moz-transform 0.4s;
        transition: transform 0.4s;
    }

    .view-tenthtop figure:hover img {
        /*-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	transform: translateY(-50px);*/
    }

.view-tenthtop .mask {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    position: absolute;
    z-index: 20;
}

.view-tenthtop figure:hover .mask {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}

/*view-tenthtop  */



/*view-tenthleft */



.view-tenthleft .link {
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    display: none;
    background: #ed4e6e;
    color: #fff;
    cursor: pointer;
    border: none;
    font-size: 14px;
}

.view-tenthleft figure {
    overflow: hidden;
}

.view-tenthtop figure img {
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

.view-tenthleft .mask {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    position: absolute;
    z-index: 20;
}

.view-tenthleft figure:hover .mask {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}

/*view-tenthleft  */