@charset "utf-8";

.countdownHolder {
    position: relative;
    padding-left: 100px;
}

    .countdownHolder::before {
        /* display: block; */
        /* content: attr(data-content); */ /*"即日起至2018/12/31優惠倒數";*/
        /* font-weight: bold; */
        /* color: #555; */
        /* font-size: 20px; */
        /* letter-spacing: 2px; */
        /* margin-bottom: 12px; */
        position: relative;
        /* bottom: -5px; */
        /* right: 2px; */
    }

    .countdownHolder::after {
        content: "(天/時/分/秒)";
        font-weight: bold;
        color: #434343;
        font-size: 18px;
        letter-spacing: 2px;
        position: absolute;
        bottom: 30px;
        margin-left: 10px;
        display: block;
        top: 75%;
        left: 28%;
    }

.position {
    display: inline-block;
    height: 2em;
    overflow: hidden;
    position: relative;
    width: 1.4em;
}

.digit {
    position: relative;
    display: block;
    width: 1.2em;
    background-color: #444;
    border-radius: 0.2em;
    text-align: right;
    color: #fff;
    letter-spacing: 7px;
    font-size: 23px;
    line-height: 1.7;
}

    .digit.static {
        box-shadow: 1px 1px 1px rgba(4, 4, 4, 0.35);
        background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.5, #3A3A3A), color-stop(0.5, #444444) );
    }

/**
 * You can use these classes to hide parts
 * of the countdown that you don't need.
 */

.countDays {/* display:none !important; *//* position: absolute; *//* display: table; */}

.countDiv0 { /* display:none !important;*/
}

.countHours {
}

.countDiv1 {
}

.countMinutes {
}

.countDiv2 {
}

.countSeconds {
}


.countDiv {
    display: inline-block;
    width: 13px;
    height: 1.75em;
    position: relative;
}

    .countDiv:before,
    .countDiv:after {
        position: absolute;
        width: 5px;
        height: 5px;
        background-color: #444;
        border-radius: 50%;
        left: 50%;
        margin-left: -3px;
        top: 0.5em;
        content: '';
    }

    .countDiv:after {
        top: 0.9em;
    }

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 1430 < x <1669 時,顯示效果 ↓↓↓↓  */
@media (max-width: 1669px) and (min-width: 1430px) {

}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 1024 < x <1429 時,顯示效果 ↓↓↓↓  */
@media (max-width: 1429px) and (min-width: 1024px) {

}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 1023 < x <768 時,顯示效果 ↓↓↓↓  */
@media (max-width: 1023px) and (min-width: 768px) {
  
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 590 < x <767 時,顯示效果 ↓↓↓↓  */
@media (max-width: 767px) and (min-width: 590px) {
    
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 415 < x <589 時,顯示效果 ↓↓↓↓  */
@media (max-width: 589px) and (min-width: 415px) {
  
}


/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 375 < x <414 時,顯示效果 ↓↓↓↓  */
@media (max-width: 414px) and (min-width: 375px) {
  
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 360 < x <374 時,顯示效果 ↓↓↓↓  */
@media (max-width: 374px) and (min-width: 360px) {
    .countdownHolder {

    }


        .countdownHolder::before {

        }

        .countdownHolder::after {

        }

    .digit {
        font-size: 22px;
    }
}




/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <359 時,顯示效果 ↓↓↓↓  */
@media (min-width: 300px) {
.countdownHolder {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 7px;
}
.position {
    width: 1.35em;
}
.digit {
    width: 1.17em;
}
.countDiv {
    height: 1.65em;
}

}