/* 翻页样式 */

.dataStatistics {
    color: #fff;
    font-family: "ft-digital", Helvetica, sans-serif;
    line-height: 32px;
    height: 32px;
    padding: 2px 0;
    margin: 0 auto;
}

.dataStatistics.color-white {
    color: #fff;
}

.dataStatistics.color-blue {
    color: #00daef;
}

.dataStatistics.color-yellow {
    color: #ffc400;
}

.dataStatistics.color-green {
    color: #00e676;
}

.dataStatistics .digit_comma {
    width: 6px;
    height: 32px;
    display: inline-block;
    margin: 0 1px;
    font-family: cursive;
    vertical-align: top;
    line-height: 36px;
    font-size: 18px;
    color: #1b75ff;
}

.dataStatistics .seperator {
    vertical-align: top;
    margin: 0 -20px;
    display: inline;
}

.dataStatistics .seconds,
.dataStatistics .minutes,
.dataStatistics .hours,
.dataStatistics .days {
    height: 100%;
    display: inline;
}

.dataStatistics .digit_set {
    /*font-family: arial;*/
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    width: 24px;
    height: 32px;
    display: inline-block;
    position: relative;
    margin: 0 2px;
}

.dataStatistics .digit {
    position: absolute;
    height: 100%;
}

.dataStatistics .digit > div {
    position: absolute;
    left: 0;
    overflow: hidden;
    height: 50%;
    width: 24px;
}

.dataStatistics .digit > div.digit_top,
.dataStatistics .digit > div.shadow_top {
    width: 24px;
    /*background-color: #1b75ff;*/
    background: -moz-linear-gradient(top, #1b75ff 0%, #adcdff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b75ff), color-stop(100%,#adcdff));
    background: -webkit-linear-gradient(top, #1b75ff 0%,#adcdff 100%);
    background: -o-linear-gradient(top, #1b75ff 0%,#adcdff 100%);
    background: -ms-linear-gradient(top, #1b75ff 0%,#adcdff 100%);
    background: linear-gradient(to bottom, #1b75ff 0%,#adcdff 100%);
    /*border-bottom: 1px solid #1b75ff;*/
    box-sizing: border-box;
    top: 0;
    z-index: 0;
    /*border-radius: 0 0 6px 6px;*/
}

.dataStatistics .digit > div.digit_top:before,
.dataStatistics .digit > div.shadow_top:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.dataStatistics .digit > div.shadow_top {
    width: 24px;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in;
}

.dataStatistics .digit > div.digit_bottom,
.dataStatistics .digit > div.shadow_bottom {
    background-color: #1b75ff;
    bottom: 0;
    z-index: 0;
    /*border-radius: 6px 6px 0 0;*/
}

.dataStatistics .digit > div.digit_bottom .digit_wrap,
.dataStatistics .digit > div.shadow_bottom .digit_wrap {
    display: block;
    margin-top: -16px;
}

.dataStatistics .digit > div.digit_bottom:before,
.dataStatistics .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: 32px;
    display: block;
    overflow: hidden;
    font-size: 24px;
    text-align: center;
}

.dataStatistics .digit > div.shadow_bottom {
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-in;
}

.dataStatistics .digit.previous .digit_top,
.dataStatistics .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;
}

.dataStatistics .digit.previous .digit_bottom,
.dataStatistics .digit.previous .shadow_bottom {
    z-index: 1;
    opacity: 1;
}

.dataStatistics .digit.active .digit_top {
    z-index: 1;
}

.dataStatistics .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;
}

.dataStatistics.numbigger .digit_set {
    width: 40px;
    margin: 0 6px;
}

.dataStatistics.numbigger .digit > div.digit_top {
    width: 40px;
}

.dataStatistics.numbigger .digit > div.shadow_top {
    width: 40px;
}

.dataStatistics.numbigger .digit > div {
    width: 40px;
}


/*翻页动画*/

@-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);
    }
}

/*led字体*/

@font-face {
    font-family: "ft-digital";
    src: url('ME25096D.ttf');
    /* IE9*/
}

.ft-digital {
    font-family: "ft-digital" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}