@charset "utf-8";

/*------------ video ------------*/

.video-list .item .box{

    max-width: 400px;

    margin: 0 auto 40px;

    padding: 0 0 10px;

    position: relative;

}

.video-list .box .cover{

    font-size: 0;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    height: 100%;

    z-index:30;

}

.video-list .pic{

    position: relative;

    transition: all .2s;

}

.video-list .pic img{

    position: relative;

    z-index: 10;

}

.video-list .item .text span{

    display: none;

}

.video-list .item .name{

    font-weight: bold;

    margin: 15px 0 5px;

    color: #9CA3AF;

}

.video-list.type2 .item .name{

    text-align: center;

}

.video-list .item .box:hover .name{

    color: #00A896;

}

.video-list.type1 .pic:before,

.video-list.type2 .pic:before{

    content: "";

    background: url(../../../images/layout01-1/common/video/hover.png) 50% 60% no-repeat rgba(204, 204, 204, 0.83);

    display: block;

    position: absolute;

    z-index: 11;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    opacity: 0;

    transition: all 0.3s;

}

.video-list.type1 .box:hover .pic:before,

.video-list.type2 .box:hover .pic:before{

    background-position: 50% 50%;

    opacity: 1;

}

/*------------ detail ------------*/

.video-detail{

    border-bottom: 1px dashed #ccc;

    padding-bottom: 40px;

}

.video-header{

    text-align: center;

    border-bottom: 1px dashed #ccc;

    padding-bottom: 5px;

    margin-bottom: 25px;

}

.video-header .video-title{

    max-width: 1300px;

    margin: 10px auto 10px;

    color: #FFFFFF;

    font-size: 18px;

    font-weight: bold;

    line-height: 1.5;

    display: inline-block;

}

.video-box{

    background: #f5f5f5;

    margin:0 auto 25px;

}

.video-box .cont{

    max-width:840px;

    margin: auto;

}

/*.content-title:before{

    display: none;

}

.content-title{

    float: none;

    text-align: center;

    padding: 5px 0 5px 0px;

    font-size: 30px;

}*/

/*------------ rwd ------------*/

@media screen and (max-width:1000px){

    .content-title{

        display: none;

    }

}

/*------------ rwd ------------*/

@media screen and (max-width:767px){

    .video-title{

        margin:auto;

    }

    .video-box{

        padding: 0px;

    }

}

@media screen and (max-width:480px){

    .video-list{

        margin: 0;

    }

}