/*reset*/
q:before, q:after{content: ''}
ins, s, u, del{text-decoration: none}
input{padding-top: 0;padding-bottom: 0}
em, cite{font-style: normal}
em{color: #c00}
.gclearfix:after{display: block;visibility: hidden;clear: both;height: 0;content: ''}
.gclearfix{zoom: 1}
/*mian*/
.top-vrank{overflow:hidden;width:1100px; height:460px;margin:0px auto;position:relative;background:#FFF;padding:15px;padding-bottom:0;}
.top-vrank .mod-hd:before,.top-vrank .mod-hd:after{content:"";display:table}
.top-vrank .mod-hd:after{clear:both}
.top-vrank .mod-hd{*zoom:1;margin-bottom:12px; width:1100px; margin:0 auto;}
.top-vrank .mod-bd{margin-top:20px;}
.top-vrank h3{font-size:12px;float:left;color:#bbbccd;margin-right:20px;margin-top:3px}
.top-vrank .tabs{font-size:15px; margin:0 auto; width:600px;}
.top-vrank .tabs li{width:150px;height:40px;float:left;text-align:center;line-height:40px;background-position:0 -72px}
.top-vrank .tabs a{color:#000;}
.top-vrank .tabs a:hover{color:#CCC;text-decoration:none}
.top-vrank .tabs .active{background:#F00; }
.top-vrank .tabs .active a{color:#FFF;}
.top-vrank .more{position: absolute;top:17px;right: 17px;font-size:12px;}
.top-vrank .more a{color:#a5a5b5}
.top-vrank .more a:hover{color:#5db538;text-decoration:none}
.top-vrank .mod-bd .views{position:relative;width:1100px;height:350px;overflow:hidden;-webkit-perspective:1500px;-moz-perspective:1500px;perspective:1500px;-webkit-perspective-origin:50% 50%;-moz-perspective-origin:50% 50%;perspective-origin:50% 50%}
.top-vrank .views .view-item{position:absolute;left:0;top:0;z-index:1;background:#FFF;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-animation:fadeout .3s ease-in forwards;-moz-animation:fadeout .3s ease-in forwards;animation:fadeout .3s ease-in forwards}
.top-vrank .views .active{-webkit-animation:fadein .5s ease forwards;-moz-animation:fadein .5s ease forwards;animation:fadein .5s ease forwards;z-index:2}
.top-vrank .views .first{-webkit-animation:none;-moz-animation:none;animation:none;z-index:2;background:#443f4c}
@-webkit-keyframes fadeout{from{-webkit-transform:translate3d(0,0,0);opacity:1}to{-webkit-transform:translate3d(0,0,-300px);opacity:0}}@-moz-keyframes fadeout{from{-moz-transform:translate3d(0,0,0);opacity:1}to{-moz-transform:translate3d(0,0,-300px);opacity:0}}@keyframes fadeout{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(0,0,-300px);opacity:0}}@-webkit-keyframes fadein{from{-webkit-transform:translate3d(-100%,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@-moz-keyframes fadein{from{-moz-transform:translate3d(-100%,0,0)}to{-moz-transform:translate3d(0,0,0)}}@keyframes fadein{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
.top-vrank .view-list{width:1100px}
.top-vrank .view-list li{position:relative;width:260px; height:170px;font-size:12px;text-align:center;float:left;margin-right:15px;z-index:1;overflow:hidden}
.top-vrank .view-list li a{text-decoration:none;color:#888999}
.top-vrank .view-list li a:hover{color:#5db538}
.top-vrank .view-list li img{width:270px;height:160px;border-radius:4px;box-shadow:0 1px 3px #222}
.top-vrank .view-list li .mask{width:290px;height:170px;position:absolute;top:86px;left:92px;z-index:3;background:url(http://p8.qhimg.com/t0129d4cce7a885cf2e.png) no-repeat 0 0;-webkit-transition:.1s left,0.2s .1s top;-moz-transition:.1s left,0.2s .1s top;-ms-transition:.1s left,0.2s .1s top;-o-transition:.1s left,0.2s .1s top;transition:.1s left,0.2s .1s top;pointer-events:none}
.top-vrank .view-list li:hover .mask{left:0;top:0}
.top-vrank .view-list li .name{display:block;width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:7px 0 14px}