@charset "utf-8";
/* CSS Document */

#video{ position:relative; width:100%; margin:0 auto; padding:120px 0 60px 0;}
#video>.title{ position:relative; width:86%; max-width:1300px; margin:0 auto; font-size: 30px;color: #333; text-align:center;font-weight: 600;}
#video>.title:after{position:absolute;z-index:3;left:50%;bottom:-10px; margin-left:-25px; width:50px;height:2px; background:#026ab5;content:'';}
#video>.container{width:86%; max-width:1300px;margin:0 auto; padding:40px 0;}

#video .search{position:relative; overflow:hidden; box-sizing:border-box; padding:10px 0 40px 0; margin:0 auto;}
#video .search>form{width:72%; max-width:600px; margin:0 auto; position:relative;}
#video .search>form input[type="text"]{outline: medium; height:58px; line-height:58px; width:100%; padding-left:23px; padding-right: 20px; border:none; font-size:16px; border-radius:50px; box-shadow:0 0 12px rgba(183, 183, 183, 0.33); color:#666; box-sizing:border-box; overflow:hidden;}
#video .search>form input::-webkit-input-placeholder{color:#ccc;}
#video .search button{width: 58px; height: 58px; background: url('../img/icon_go_gray.png') no-repeat center/26px 26px; border: 0 none; outline: none; position: absolute; right: 5px; top: 0; cursor: pointer;}



#video .list, #video .list>ul{margin:0 auto;padding:0;}
#video .list>ul>li{position:relative; display:block; float:left; width:32%; margin-right: 2%; margin-bottom:2%; box-sizing:border-box;background:#fff; box-shadow: 0 3px 5px rgba(0,0,0,.1); transition:all .35s;}
#video .list>ul>li:nth-child(3n){ margin-right:0;}
#video .list>ul>li>a{ position:relative; display:block; text-align:left; box-sizing:border-box; overflow: hidden;}
#video .list>ul>li>a>.img{ position: relative; text-align: left;}
#video .list>ul>li>a>.img:after{position: absolute;z-index: 1; left: 0 ;top: 0;width: 100%;height: 100%; opacity: 0; background: rgba(0,0,0,.6); content: ''; transition: all .35s;}
#video .list>ul>li>a>.img:before{position: absolute;z-index: 20; left: 50%; top: 50%; margin-left: -43px; margin-top: -30px; opacity: 0; text-align: center; font-size: 12px; color: #007aff; background: rgba(255,255,255,1);  width: 86px; height: 34px; line-height: 34px; border-radius: 30px; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 2px 6px rgba(0,0,0,.5); content: '播放视频'; transition: all .35s;}
#video .list>ul>li>a>.img img{width: 100%;height: auto;}
#video .list>ul>li>a>.tit{ padding: 20px; font-size:18px; color:#333; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition:all .35s;}
#video .list>ul>li>a>.time{padding:12px 20px; font-size:14px; color:#ccc; transition:all .35s;}

#video .list>ul>li:hover{background:#026ab5;transform:translateY(-3px);box-shadow:0 2px 10px rgba(0,0,0,.1);}
#video .list>ul>li:hover .tit{color:#fff;}
#video .list>ul>li:hover .time{color:rgba(255,255,255,.5); }
#video .list>ul>li:hover{box-shadow:0 2px 10px rgba(0,0,0,.1);}
#video .list>ul>li:hover .img:after{opacity: 1;}
#video .list>ul>li:hover .img:before{ margin-top: -17px; opacity: 1;}


#video .loadmore{ width:85%;max-width:1480px; padding:50px 0;margin:0 auto;text-align:center;}
#video .loadmore>a{display:inline-block; padding:12px 90px; font-size:18px; color:#1c73c5; border:1px solid #1c73c5; border-radius:50px; transition:all .35s;}
#video .loadmore>a:hover{ background:#1c73c5; border:1px solid #1c73c5; color:#fff;}


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

  #video .list>ul>li>a>.tit{font-size:17px;}

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

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

}

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

  #video .list>ul>li>a>.tit{font-size:16px;}

}


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

  #video{ padding:60px 0;}
  #video>.title{padding:10px 0; font-size:20px;}

  #video .list>ul>li{width:100%; float:none;}
  #video .list>ul>li:nth-child(even){ float:none;}



}