@charset "utf-8";






#video{margin: 0 auto; padding: 140px 0;}
#video .title{text-align: left;}
#video .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#video .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#video .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#video .lists{margin: 0 auto; padding: 50px 0;}
#video .lists>ul{margin:  0 auto;}
#video .lists>ul>li{display:inline-block; float: left; width: 48%; margin-bottom: 2%; }
#video .lists>ul>li:nth-child(even){float: right;}
#video .lists>ul>li>a{ position: relative; display: block;overflow: hidden;}
#video .lists>ul>li>a>.img{ position: relative; overflow: hidden; transition: all .35s;}
#video .lists>ul>li>a>.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: 9rem; content: '\e651'; transition: all .35s;}
#video .lists>ul>li>a>.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 .lists>ul>li>a>.img img{ max-width: 100%; max-height: 100%; width: 100%;height: auto; transition: all .8s;}
#video .lists>ul>li>a>.box{ text-align: center; padding: 25px; transition: all .35s;}
#video .lists>ul>li>a>.box>.title{ text-align: center; font-size: 1.8rem; color: #676767; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#video .lists>ul>li>a>.box>.sub{ font-size: 1.6rem; color: #676767; overflow: hidden;text-overflow:ellipsis;white-space: nowrap; transition: all .35s;}
#video .lists>ul>li>a:hover .img>img{transform: scale(1.03);}
#video .lists>ul>li>a:hover .img:before{opacity: 0;}
#video .lists>ul>li>a:hover .box>.title{color: #002fa7;}
#video .lists>ul>li>a:hover .box>.sub{color: #002fa7;}

#play{ display: none; position: fixed;z-index: 10200; left: 0;top: 0; width: 100%;height: 100%; background: rgba(0,0,0,.8);}
#play>.box{position: absolute;z-index: 10; left: 50%;top:50%; width: 960px;transform: translate(-50%,-50%); transition: all .35s;}
#play>.box>.close{ text-align: center; padding-top: 20px;}
#play>.box>.close>i{ display: inline-block; font-size: 1.8rem; color: #fff; cursor:pointer; width: 42px;height: 42px; line-height: 42px; border-radius: 100%; border: 1px solid #fff; transition: all .35s;}
#play>.box>.media{ width: 100%;height:540px; margin: 0 auto; transition: all .35s;}
#play.show{display: block;}
#play>.box>.close i:hover{transform: rotate(180deg);}


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

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

    #video .lists>ul>li>a:before{opacity: 1;}
    #video .lists>ul>li>a>.box>.title{font-size: 1.6rem; }
    #video .lists>ul>li>a>.box>.sub{ font-size: 1.3rem;}

    #video .lists>ul>li>a>.img:after{font-size: 7rem;}


}


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


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



}


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

    #video{padding: 80px 0;}

    #video .lists>ul>li{display:block; float: none; width: 100%; margin-bottom: 20px;}
    #video .lists>ul>li:nth-child(even){float: none;}
    #video .lists>ul>li>a>.box{ opacity: 1; }
    #video .lists>ul>li>a>.box>.title{ font-size: 1.8rem; }

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

}

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

    #video .title>h3{ font-size: 2rem; padding-bottom: 10px;}
    #video .title>p{ font-size: 1.4rem; padding-top: 5px;}

    #video .lists>ul>li>a>.box>.title{ font-size: 1.4rem; }
    #video .lists>ul>li>a>.box>.sub{ font-size: 1.2rem; }

    #video .lists>ul>li>a>.img:after{font-size: 5rem;}
    #play>.box>.media{height:360px; }

}




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

    #video {padding: 50px 0;}
    #play>.box>.media{height:240px; }
    #play>.box>.close>i{ width: 36px;height:36px; line-height: 36px; }
}