.flip-item .flip{position:relative;width:32px;height:40px;font-size:28px;font-weight:700;border-radius:0}.flip-item .flip .item{list-style:none;z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;perspective:200px;transition:opacity .3s}.flip-item .flip .item.active,.flip-item .flip .item:first-child{z-index:2}.flip-item .flip .item .down,.flip-item .flip .item .up{z-index:1;position:absolute;left:0;width:100%;height:50%;overflow:hidden}.flip-item .flip .item .up{transform-origin:50% 100%;top:0}.flip-item .flip .item .down{transform-origin:50% 0;bottom:0;transition:opacity .3s}.flip-item .flip .item .inn{position:absolute;left:0;z-index:1;width:32px;height:40px;text-align:center;background:url(/images/contract/ic_date_bg.png);background-repeat:no-repeat;background-position:50%;background-size:100% 100%;color:#fff;font-size:28px;font-weight:600}.flip-item .flip .item .up .inn{top:0}.flip-item .flip .item .down .inn{bottom:0}.flip-item.play .item.before{z-index:3}.flip-item.play .item.active{animation:asd .5s linear .5s both;z-index:2}.flip-item.play .item.before .up{z-index:2;animation:turn-up .5s linear both}.flip-item.play .item.active .down{z-index:2;animation:turn-down .5s linear .5s both}@keyframes turn-down{0%{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}@keyframes turn-up{0%{transform:rotateX(0deg)}to{transform:rotateX(-90deg)}}@keyframes asd{0%{z-index:2}5%{z-index:4}to{z-index:4}}