.vue-countdown-component{display:flex}@keyframes animate-flip-face{0%{transform:rotateX(-.01deg);opacity:1}50%{opacity:1}51%{opacity:0}to{transform:rotateX(-180deg);opacity:0}}@keyframes animate-flip-back{0%{transform:rotateX(180deg)}to{transform:rotateX(-.01deg)}}.vue-countdown-component.ie .base .base-b{clip:rect(15px,auto,auto,auto)}.vue-countdown-component.ie .face{clip:rect(auto,auto,15px,auto)}.vue-countdown-component.ie .back{clip:rect(15px,auto,auto,auto)}.vue-countdown-component.theme2 .time-box{min-width:20px}.vue-countdown-component.theme2 .time-box+.time-box{margin-left:1px}.vue-countdown-component .time-unit{padding:0 4px;color:#222;font-size:14px;line-height:30px;white-space:nowrap}.vue-countdown-component .time-box{position:relative;box-sizing:border-box;height:30px;min-width:28px;font-size:14px;text-align:center;background-color:#6c96e8;perspective:60px;border-radius:3px;padding:0 2px;color:#fff;line-height:30px}.vue-countdown-component .time-box:before{content:"";position:absolute;background:#a7c7ff;width:1px;height:6px;top:50%;left:-1px;margin-top:-3px;z-index:-1}.vue-countdown-component .time-box:after{content:"";position:absolute;background:#a7c7ff;width:1px;height:6px;top:50%;right:-1px;margin-top:-3px;z-index:-1}.vue-countdown-component .time-box+.time-box{margin-left:8px}.vue-countdown-component .time-box>div{overflow:hidden;animation-timing-function:linear;animation-duration:.4s;transform:rotateX(-.01deg);border-radius:3px}.vue-countdown-component .time-box>div.base{position:relative}.vue-countdown-component .time-box>div.base .base-b{position:absolute;left:0;bottom:0;border-radius:0 0 3px 3px;width:100%;height:100%;background-color:#709bf1;clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)}.vue-countdown-component .time-box>div.face{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#6c96e8;backface-visibility:visible;clip-path:polygon(0 0,100% 0,100% 50%,0 50%);z-index:2}.vue-countdown-component .time-box>div.face.anime{animation-name:animate-flip-face}.vue-countdown-component .time-box>div.back{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#709bf1;transform:rotateX(-180deg);backface-visibility:visible;clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)}.vue-countdown-component .time-box>div.back.anime{animation-name:animate-flip-back}