@charset 'UTF-8';
.countdown-container{width: 186px;height: 75px;background: url(../images/bkg-djs.png) center center no-repeat;position: relative;}
.data-statistics-item{width: 100%;margin: 0 auto;}

/*翻页动画*/
@-webkit-keyframes flipTop {
    0% {-webkit-transform: perspective(400px) rotateX(0deg); }
    100% {-webkit-transform: perspective(400px) rotateX(-90deg); } 
}

@-webkit-keyframes flipBottom {
    0% {-webkit-transform: perspective(400px) rotateX(90deg); }
    100% {-webkit-transform: perspective(400px) rotateX(0deg); } 
}

@-moz-keyframes flipTop {
    0% {-moz-transform: perspective(400px) rotateX(0deg); }
    100% {-moz-transform: perspective(400px) rotateX(-90deg); } 
}

@-moz-keyframes flipBottom {
    0% {-moz-transform: perspective(400px) rotateX(90deg); }
    100% {-moz-transform: perspective(400px) rotateX(0deg); } 
}

@-ms-keyframes flipTop {
    0% {-ms-transform: perspective(400px) rotateX(0deg); }
    100% {-ms-transform: perspective(400px) rotateX(-90deg); } 
}

@-ms-keyframes flipBottom {
    0% {-ms-transform: perspective(400px) rotateX(90deg); }
    100% {-ms-transform: perspective(400px) rotateX(0deg); } 
}

@keyframes flipTop {
    0% {transform: perspective(400px) rotateX(0deg); }
    100% {transform: perspective(400px) rotateX(-90deg); } 
}

@keyframes flipBottom {
    0% {transform: perspective(400px) rotateX(90deg); }
    100% {transform: perspective(400px) rotateX(0deg); } 
}

.data-statistics-body {color: #fff;font-family: "Helvetica Neue", Helvetica, sans-serif;font-weight: bold;line-height: 28px;height: 28px;  width: 100%; margin: 24px auto 0;text-align: center;font-size: 0;position: absolute;bottom: 2px;left: 0;}

.data-statistics-body .seperator {vertical-align: top;margin: 0 -20px;display: inline; }
.data-statistics-body .seconds,.data-statistics-body .minutes,.data-statistics-body .hours,.data-statistics-body .days {height: 100%;display: inline; }
.data-statistics-body .digit_set {border-radius: 5px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); */
    font-size: 20px;
    /* font-weight: bold; */
    /* border: 1px solid #111111; */
    color: #0062ba;
    width: 20px;height: 28px;display: inline-block;position: relative;margin: 0 1px;}

.data-statistics-body .digit {position: absolute;height: 100%;width: 100%;}
.data-statistics-body .digit > div {position: absolute;left: 0;overflow: hidden;height: 50%;width: 100%;
    /* width: 90px; */
    /* padding: 0 15px;  */
}
.data-statistics-body .digit > div.digit_top, .data-statistics-body .digit > div.shadow_top { width: 100%;background-color: #fff;border-bottom: 1px solid #fff;box-sizing: border-box;top: 0;z-index: 0;border-radius: 5px 5px 0 0; }
.data-statistics-body .digit > div.digit_top:before, .data-statistics-body .digit > div.shadow_top:before {content: "";
height: 100%;width: 100%;position: absolute;left: 0;top: 0; }
.data-statistics-body .digit > div.shadow_top {width: 100%;opacity: 0;-webkit-transition: opacity 0.3s ease-in; }
.data-statistics-body .digit > div.digit_bottom, .data-statistics-body .digit > div.shadow_bottom {background-color: #fff;bottom: 0;z-index: 0;border-radius: 0 0 5px 5px; }
.data-statistics-body .digit > div.digit_bottom .digit_wrap, .data-statistics-body .digit > div.shadow_bottom .digit_wrap {display: block;margin-top: -72%; }
.data-statistics-body .digit > div.digit_bottom:before, .data-statistics-body .digit > div.shadow_bottom:before {content: "";border-radius: 0 0 5px 5px;height: 100%;width: 100%;position: absolute;left: 0;top: 0; }
.digit_wrap{line-height: 28px; display: block; overflow: hidden;}
.data-statistics-body .digit > div.shadow_bottom {opacity: 0;-webkit-transition: opacity 0.3s ease-in; }
.data-statistics-body .digit.previous .digit_top,.data-statistics-body .digit.previous .shadow_top {opacity: 1;z-index: 2;
-webkit-transform-origin: 50% 100%;-webkit-animation: flipTop 0.3s ease-in both;-moz-transform-origin: 50% 100%;-moz-animation: flipTop 0.3s ease-in both;-ms-transform-origin: 50% 100%;-ms-animation: flipTop 0.3s ease-in both; transform-origin: 50% 100%;animation: flipTop 0.3s ease-in both;}
.data-statistics-body .digit.previous .digit_bottom,.data-statistics-body .digit.previous .shadow_bottom {z-index: 1;opacity: 1; }
.data-statistics-body .digit.active .digit_top {z-index: 1; }
.data-statistics-body .digit.active .digit_bottom {z-index: 2;-webkit-transform-origin: 50% 0%;-webkit-animation: flipBottom 0.3s 0.3s ease-out both;-moz-transform-origin: 50% 0%;-moz-animation: flipBottom 0.3s 0.3s ease-out both;-ms-transform-origin: 50% 0%;-ms-animation: flipBottom 0.3s 0.3s ease-out both;transform-origin: 50% 0%;animation: flipBottom 0.3s 0.3s ease-out both;width: 100%;}