@charset "utf-8";


#video{margin: 0 auto; padding: 100px 0;}

#video .display{margin: 0 auto;}
#video .display .lists{margin: 0 auto;}
#video .display .lists>ul{margin: 0 auto;}
#video .display .lists>ul>li{display: block;float: left;width:31.33%; margin-right: 3%; margin-bottom: 3%; position: relative; box-sizing: border-box; transition: all .35s; }
#video .display .lists>ul>li:nth-child(3n){margin-right: 0;}
#video .display .lists>ul>li>a{display: block;position: relative;}
#video .display .lists>ul>li .img{ position: relative; width: 100%; overflow: hidden; border-radius: 10px; background: #fff;  border: 1px solid #eee;}
#video .display .lists>ul>li .img:after{position: absolute; z-index: 50; left: 50%; top:50%; color: #fff; transform: translate(-50%,-50%); font-family: iconfont; font-weight: 100; font-size: 7rem; content: '\e672'; transition: all .35s;}
#video .display .lists>ul>li .img:before{position: absolute;z-index: 10; left:0;top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); content: '';transition: all .35s;}
#video .display .lists>ul>li .img>img{ width:100%; height:auto; transition: all .8s;}
#video .display .lists>ul>li .title{font-size:1.6rem; color: #333; text-align: center;  padding-top: 20px; padding-bottom: 0; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; transition: all .35s;}
#video .display .lists>ul>li:hover .img{box-shadow: 4px 3px 20px rgba(0,0,0,.16);}
#video .display .lists>ul>li:hover .img>img{transform: scale(1.05);}
#video .display .lists>ul>li:hover .img:after{ font-size: 6rem;}
#video .display .lists>ul>li:hover .img:before{opacity: .5; background: rgba(7,88,171,.8); }
#video .display .lists>ul>li:hover .title{ color: #0758ab;}


#play{ display: none; position: fixed;z-index: 10200; left: 0;top: 0; width: 100%;height: 100%; background: rgba(0,0,0,.8);}
#play>.content{position: absolute;z-index: 10; left: 50%;top:50%; width: 960px;transform: translate(-50%,-50%); text-align: center; transition: all .35s;}
#play>.content>.title{ font-size: 1.8rem; color: #fff; text-align: center;margin: 0 auto; padding-bottom: 15px;}
#play>.content>.close{ display: inline-flex; align-content: center; align-items: center; justify-content: center; color: #fff; text-align: center;  margin: 20px auto 0 auto; cursor: pointer; transition: all .35s;}
#play>.content>.close>i{ display: inline-block; font-size: 2.4rem; color: #fff; background: #0758ab; cursor:pointer; width: 40px;height: 40px; line-height: 40px; border-radius: 100%; transition: all .35s;}
#play>.content>.close>span{display: inline-block; font-size: 1.6rem; width: 0;overflow: hidden; transition: all .35s;}
#play>.content>.media{ width: 100%;height:540px; margin: 0 auto; border-radius: 10px;overflow: hidden; box-shadow: 5px 10px 20px rgba(0,0,0,.56); transition: all .35s;}
#play>.content>.media>iframe{ width: 100%;height: 100%; border: 0;margin: 0 auto;}
#play>.content>.close:hover{background: #0758ab; border-radius: 40px; padding: 0 10px;}
#play>.content>.close:hover  span{width: auto;}
#play.show{display: block;}


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



    #video .display .lists>ul>li{width:48%; margin-right: 0; }
    #video .display .lists>ul>li:nth-child(3n){margin-right: 0;}
    #video .display .lists>ul>li:nth-child(even){float: right;}

    #video .display .lists>ul>li .title{font-size:1.4rem;}


}


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




    #play>.content{width: 86%;}
    #play>.content>.media{height:480px; }



}


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

    #play>.content>.media{height:400px; }
    #play>.content>.close>i{ font-size: 1.6rem; width: 46px;height: 46px; line-height: 46px; }


}


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

    #video{ padding: 50px 0;}

    #video .display .lists>ul>li .title{font-size:1.2rem;}
    #video .display .lists>ul>li .img:after{font-size: 5.6rem;}

    #play{ background: rgba(0,0,0,.9);}
    #play>.content>.media{height:360px; }
    #play>.content>.close>i{ font-size: 2rem; width: 32px;height: 32px; line-height: 32px;}
    #play>.content>.close>span{ font-size: 1.4rem;}



}


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


    #video .display .lists>ul>li{float: none;width:100%;  margin-bottom: 20px; }
    #video .display .lists>ul>li:nth-child(even){float: none;}
    #video .display .lists>ul>li .img{ height: auto;}


    #play>.content>.media{height:240px; }
    #play>.content>.close>i{ width: 36px;height:36px; line-height: 36px; }


}