@charset "utf-8";

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

#video .theme{ margin: 0 auto;}
#video .theme>.title{display: block; text-align: left; margin: 0 auto;}
#video .theme>.title>h3{ position: relative; padding-bottom: 20px; display: block; font-size: 3.2rem; color: #333;}
#video .theme>.intro{ width: 70%; margin: 0 auto; padding: 30px 0; text-align: center;font-size: 1.6rem; color: rgba(255,255,255,.5); line-height: 2.4rem;}

#video .container{margin: 0 auto; padding: 50px 0;}
#video .container>.lists{margin: 0 auto;}
#video .container>.lists>ul{margin: 0 auto;}
#video .container>.lists>ul>li{ position: relative; z-index: 10; display: block; float: left; width: 31.33%; margin-right: 3%; margin-bottom: 3%; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.1); overflow: hidden; box-sizing: border-box; transition: all .35s;}
#video .container>.lists>ul>li:nth-child(3n){ margin-right: 0;}
#video .container>.lists>ul>li>a{ position:relative; display:block; background:#fff;box-sizing:border-box;}
#video .container>.lists>ul>li>a:after{position:absolute;z-index:2;left:0;bottom:0; display: flex; align-items: center;align-content: center; justify-content: center; width:100%;height:100%; opacity:0; color: #c10020; text-shadow: 0 2px 10px rgba(0,0,0,.5); text-align: center; font-family: iconfont; font-size: 7rem; content:'\e6f7'; transition:all .35s;}
#video .container>.lists>ul>li>a:before{position:absolute;z-index:1;left:0;bottom:0; width:100%;height:100%; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8));content:''; transition:all .35s;}
#video .container>.lists>ul>li .img{margin:0 auto;overflow:hidden;}
#video .container>.lists>ul>li .img>img{width:100%;height:auto; transition:all 1s;}
#video .container>.lists>ul>li .title{ position:absolute; z-index:99; left:20px;bottom:0; text-align:left;padding:30px 20px; color:#fff; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#video .container>.lists>ul>li .title>i{display: inline-block; vertical-align: middle; margin-right: 10px; font-size: 3rem;}
#video .container>.lists>ul>li .title>span{display: inline-block; vertical-align: middle; font-size: 2rem;}
#video .container>.lists>ul>li:hover{ box-shadow:0 0 15px rgba(0,0,0,.1);}
#video .container>.lists>ul>li:hover a:after{opacity:1;}
#video .container>.lists>ul>li:hover a:before{background-image: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.8));}
#video .container>.lists>ul>li:hover .title{transform:translateY(-8px);}
#video .container>.lists>ul>li:hover .title i{display: none;}
#video .container>.lists>ul>li:hover .img>img{transform:scale(1.1);}


.layui-layer-iframe{ width: 62% !important; height: 70% !important;}


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


    .layui-layer-iframe{ width: 80% !important; height: 70% !important;}

}

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

    #video .theme>.title>h3 {font-size: 2.8rem;}

    #video .container>.lists>ul>li>a:after{font-size: 6rem;}
    #video .container>.lists>ul>li .title>span{font-size: 1.8rem;}



}

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

    .layui-layer-iframe{ width: 90% !important; height: 45% !important;}

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

}


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

    #video .theme>.title>h3 { font-size: 2.4rem;}

}



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

    #video .wrap{padding: 50px 0;}

    #video .theme>.title>h3 { font-size: 2rem;}

    #video .container>.lists>ul>li{ float: none; width: 100%; }
    #video .container>.lists>ul>li:nth-child(even){ float: none;}
    #video .container>.lists>ul>li a>.title>span{ font-size: 1.6rem;}

}