/* by Adon , CSS Document */

.video{ float:left; width:100%; margin:5% 0;}
.video li{ float:left; width:49.5%;background:#f5f5f5; margin-bottom:1%;}
.video li .thumb{ position:relative; max-height:363px; overflow:hidden;}
.video li .thumb .pic{ display:block; width:100%;}
.video li .thumb .bg{ background:#000; opacity:0.2; -webkit-opacity:0.2; -moz-opacity:0.2; -ms-opacity:0.2; -o-opacity:0.2;width:100%; position:absolute; top:0; left:0; height:100%;}
.video li .thumb i{ position:absolute; z-index:2;top:50%;left:0; right:0; margin:-30px auto; text-align:center;}
.video li .item{ padding:5%;}
.video li .item span{ display:block; font-size:20px; color:#55504f;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.video li .item p{ display:block; font-size:15px; color:#797979; height:42px; overflow:hidden; margin-top:10px;}
.video li.l{ margin-right:0.5%;}
.video li.r{ margin-left:0.5%;}

@media (max-width:1024px){
.video li .item p{font-size:12px; height:53px;}
}
@media (max-width:768px){
.video li .item span{ font-size:16px;}
}
@media (max-width:640px){
.video li .item p{ height:auto;}    
.video li{ width:100%; margin-right:0 !important; margin-bottom:2%;margin-left:0 !important;}
}
@media (max-width:480px){
.video li .thumb i{ margin-top:-20px;}  
.video li .thumb i img{ width:40px;}    
.video li .item span{ font-size:15px;}  
.video{ margin:10% 0;}
}






.modal .modal-header{ border-bottom:none;}

.modal{text-align:center; width:100%; height:100%;}

.modal .modal-content{ width:100%; height:100%; position:absolute;margin:0 auto; left:0; right:0;top:50%;margin-top:-275px;max-width:800px; max-height:500px;}

.modal .modal-content video{ width:100%; height:100%; max-height:480px;}