.play { width: 1200px; height: auto; margin: 50px auto 0; margin-bottom: 64px; background: #999; font: 12px Arial; }

.big_pic { width: 1200px; height: 564px; overflow: hidden; background: #222; position: relative; }
.big_pic li { width: 1200px; height: 564px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0;}

.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; opacity: 0; z-index:3000; }

.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; left: 74px; line-height: 60px; bottom: 0;  z-index: 3000; color: #ccc; font-size: 18px; color: #fff; }

.big_pic .bg { width: 100%; height: 60px; background: #000;  opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 100%; height: 122px; position: relative;  overflow: hidden; }
.small_pic ul { height: 122px; position: absolute; top: 0; left: 0; }
.small_pic li { width: 200px; height: 122px; float: left; padding-right: 10px; cursor: pointer; 
                 filter: grayscale(100%);
 }
.small_pic img { width: 200px; height: 122px; }