.babout { background: url(../images/pgabout.jpg) 50% 50% no-repeat; }

.ab_nav { text-align: center; margin: 40px 0 60px; }
.ab_nav a { display: inline-block; border: 1px solid #dcdcdc; border-radius: 4px; color: #666666; transition: all .2s; margin-right: 40px; font-size: 16px; width: 180px; height: 50px; line-height: 50px; }
.ab_nav a:hover, .ab_nav a.on { color: #ffffff; border-color: #ff3f3c; background: #ff3f3c; }
.ab_nav a:last-child { margin-right: 0; }

.video_box { width: 100%; height: 500px; }
.video_box .v_bg { width: 750px; height: 500px; float: left; background: url(../images/bg_tv.jpg) no-repeat; overflow: hidden; }
.video_box .v_bg embed { margin: 6px 0 0 17px; }
.video_box .v_other { width: 430px; height: 500px; float: right; }
.video_box .v_other h5 { color: #333333; font-size: 30px; margin-bottom: 40px; }
.video_box .v_other dl { width: 100%; height: 90px; margin-top: 35px; overflow: hidden; }
.video_box .v_other dl * { transition: all .2s; }
.video_box .v_other dl dt { width: 154px; border: 3px #ffffff solid; position: relative; height: 84px; float: left; }
.video_box .v_other dl dt img { width: 100%; height: 100%; }
.video_box .v_other dl dt span { display: block; position: absolute; bottom: 5px; right: 5px; color: #FFFFFF; background: rgba(0, 0, 0, 0.5); padding: 0 8px; border-radius: 4px; font-size: 12px; line-height: 23px; }
.video_box .v_other dl dd { float: right; width: 255px; color: #666666; position: relative; height: 100%; }
.video_box .v_other dl dd h6 { font-size: 16px; line-height: 24px; }
.video_box .v_other dl dd span { position: absolute; bottom: -6px; display: none; }
.video_box .v_other dl:hover dt, .video_box .v_other dl.on dt { border-color: #FF3F3C; }
.video_box .v_other dl:hover dd h6, .video_box .v_other dl:hover dd span, .video_box .v_other dl.on dd h6, .video_box .v_other dl.on dd span { color: #FF3F3C; }
.video_box .v_other dl.on dd span { display: block; }

.pics_nav { width: 100%; height: 60px; line-height: 60px; background: #f5f5f5; margin: 60px 0; }
.pics_nav .container * { float: left; }
.pics_nav h4 { font-size: 24px; color: #FF3F3C; transition: all .2s; }
.pics_nav ul { margin-left: 50px; }
.pics_nav ul li { width: 110px; text-align: center; font-size: 18px; color: #333333; cursor: pointer; }
.pics_nav ul li:hover, .pics_nav ul li.on { color: #FF3F3C; }
.pics_nav ul li:hover i, .pics_nav ul li.on i { color: #dcdcdc; }
.pics_nav .container i { float: right; font-style: normal; color: #dcdcdc; }
.pics_nav .container a { float: right; }

.pics_con { margin-bottom: 40px; border-bottom: 1px solid #dcdcdc; padding-bottom: 40px; }
.pics_con div { width: 100%; display: none; }
.pics_con div dl { width: 275px; float: left; text-align: center; margin-right: 30px; }
.pics_con div dl dt { width: 100%; height: 172px; overflow: hidden; }
.pics_con div dl dd { font-size: 16px; color: #333333; transition: all .2s; line-height: 44px; }
.pics_con div dl dd span { color: #999999; }
.pics_con div dl:last-child { margin-right: 0; }
.pics_con div dl:hover dd { color: #FF3F3C; }
.pics_con div.on { display: block; }

/*---------list page------------*/
.vis { overflow: visible; }

.v_list { width: 1168px; border: 1px solid #f5f5f5; padding: 15px 0 16px 20px; box-shadow: 0 0 3px 2px #ffffff; transition: all .2s; margin-bottom: 40px; }
.v_list h4 { font-size: 20px; color: #333333; height: 22px; line-height: 22px; padding-bottom: 10px; border-bottom: 1px #f5f5f5 solid; width: 1148px; transition: all .2s; }
.v_list h4 i { display: block; float: left; width: 28px; height: 22px; background: url(../images/icon_video2.png) no-repeat 4px 0; margin-right: 5px; }
.v_list h4 i.pro { background-position-x: -28px; }
.v_list h4 i.case { background-position-x: -63px; }
.v_list h4 i.play { background-position-x: -100px; }
.v_list .v_box { width: 100%; margin-top: 20px; height: 320px; }
.v_list .v_box dl { float: left; width: 200px; margin-right: 19px; margin-bottom: 14px; }
.v_list .v_box dl dt { width: 100%; position: relative; height: 112px; overflow: hidden; }
.v_list .v_box dl dt img { width: 100%; }
.v_list .v_box dl dt span { display: block; position: absolute; right: 3px; bottom: 3px; color: #ffffff; background: rgba(0, 0, 0, 0.5); border-radius: 4px; width: 56px; text-align: center; line-height: 24px; }
.v_list .v_box dl dt i { display: block; width: 100%; height: 100%; background: url(../images/icon_player.png) center center no-repeat; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; opacity: 0; transition: all .2s; }
.v_list .v_box dl dd p { font-size: 14px; color: #666666; line-height: 25px; transition: all .2s; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.v_list .v_box dl dd span { display: block; color: #999999; font-size: 12px; line-height: 12px; }
.v_list .v_box dl.big { width: 490px; height: 100%; }
.v_list .v_box dl.big dt { height: 275px; }
.v_list .v_box dl:hover dt i { opacity: 1; }
.v_list .v_box dl:hover dd p { color: #FF3F3C; }
.v_list:hover { box-shadow: 0px 0px 8px 2px #f5f5f5; }
.v_list:hover h4 { color: #ff3f3c; }

@media screen and (max-width: 1199px) { .babout { background: url(../images/pgabout_s.jpg) 50% 50% no-repeat; }
  .ab_nav a { margin-right: 10px; width: 170px; }
  .video_box { height: 625px; }
  .video_box .v_bg { margin: 0 auto; float: none; }
  .video_box .v_other { width: 100%; float: none; height: 100px; }
  .video_box .v_other h5 { display: none; }
  .video_box .v_other dl { width: 330px; float: left; }
  .video_box .v_other dl dd { width: 158px; }
  .pics_con div dl { width: 234px; margin-right: 18px; }
  .pics_con div dl dt { height: 146px; }
  /*---------list page------------*/
  .v_list { width: 968px; }
  .v_list h4 { width: 948px; }
  .v_list .v_box dl { margin-right: 26px; } }

/*# sourceMappingURL=video.css.map */