﻿.video_wrap{background:url(../images/video.jpg) no-repeat center bottom; /*background-color: #fff;*/}
#video{max-width: 1200px; margin: auto; height:794px; color:#fff; position:relative; overflow:hidden;}
#video h1{text-align:center; font-size:33px;padding-top: 20px; /*color: #333;*/}
#video ul{width:100%; min-width:1180px; height:600px; position:absolute; top:94px; left:0;}
#video ul li{float:left; width:100%; height:600px; padding: 0px !important; margin: 0px !important; overflow: hidden;}
#video ul li figure{width:1200px; height:600px; background:#fff; overflow:hidden;}
#video ul li figure a{display:block;}
#video ul li figure figcaption{display:none; float:right; width:304px; height:600px; background:#fff; text-align:center; margin-right: 20px;}
#video ul li figure figcaption aside{font-size:20px;width:250px; padding:250px 0 25px; color:#7d7d7d; -webkit-animation:downIn 0.8s ease-out 0.15s both;}
#video ul li figure figcaption h2{width:250px;font-size:24px; margin:auto; position:relative; color:#000; -webkit-animation:downIn 0.8s ease-out 0.4s both;}
#video ul li figure figcaption h2:after{content:''; display:block; width:100px; height:1px; background:#000; position:absolute; bottom:-20px; left:50%; margin-left:-50px; -webkit-animation:widthIn 0.5s ease-out 1.2s both;}
#video ul li figure picture{float:left; width:876px; height:600px; position:relative; overflow:hidden;}
#video ul li figure picture > img{width:100%; -webkit-transition:0.6s; transition:0.6s;}
#video ul li figure a:hover picture > img{-webkit-transform:scale(1.08); transform:scale(1.08);}
#video ul li figure picture span{position:absolute; top:50%; left:50%; margin:-40px 0 0 -40px; width:80px; height:80px; background:rgba(255,255,255,0.5) url(../images/video_icon.png) no-repeat center center; border-radius:50%; opacity:0; -webkit-transform:scale(1.5); transform:scale(1.5); -webkit-transition:0.3s; transition:0.3s;}
#video ul li figure picture embed,#video ul li figure picture video{display:block;height:100%;width:100%;}
#video ul li figure a:hover picture span{opacity:1; -webkit-transform:scale(1); transform:scale(1);}

#video_ctrl{width:144px; height:35px; background:#404040; color:#fff; position:absolute; bottom:32px; left:50%; margin-left:-72px;}
#video_ctrl button{float:left; width:50px; height:35px; border:none; background:none; color:#fff; font-size:18px; -webkit-transition:0.3s; transition:0.3s;}
#video_ctrl button:active{background:#292929;}
#video_ctrl span{display:block; float:left; width:44px; height:35px; line-height:35px; text-align:center;}

@-webkit-keyframes downIn{
	0%{opacity:0; -webkit-transform:translateY(30px);}
	100%{opacity:1; -webkit-transform:translateY(0);}
}
@keyframes downIn{
	0%{opacity:0; transform:translateY(30px);}
	100%{opacity:1; transform:translateY(0);}
}

@-webkit-keyframes widthIn{
	0%{opacity:0; -webkit-transform:scale(2,1);}
	100%{opacity:1; -webkit-transform:scale(1,1);}
}
@keyframes widthIn{
	0%{opacity:0; transform:scale(2,1);}
	100%{opacity:1; transform:scale(1,1);}
}