html, body, div, span, h1, p, ul, li { margin: 0; padding: 0; border: 0; vertical-align: baseline; }
*, :after, :before { -webkit-box-sizing: border-box; box-sizing: border-box; }
ul { list-style: none; }

/* grid */
html, body, .wrap {line-height: 1; }
.wrap {position: relative; margin: 0 auto;}
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }

/* typography */
body { font-weight: 400; font-size: 16px; line-height: 20px; font-family: 'Roboto', sans-serif; color: #333; }

/* countdown */
.timer-box { width: 100%; padding-top: 19px; background: transparent; }
  .timer-box ul { width: 285px;     display: flex;    justify-content: center;}
.timer { width: 285px; margin: 0 auto 5px; background: url('../img/bg_timer.png') no-repeat; }
  .timer li { 
    background: #53bad7;
    font-size: 40px;
    line-height: 40px;
    color: #f1efef;
    letter-spacing: 2px;
    position: relative;
    padding: 4px;
    border-radius: 5px;}
  .timer li + li:before { width: 10px; height: 41px; display: block; font-size: 40px; line-height: 35px; content: ':'; position: absolute; left: -11px; top: 0; }
.time-name { margin: 0 auto; color: white}
.time-name li {font-size: 12px; color: #000; text-align: center; }
.timer li + li, .time-name li + li { margin-left: 15px; }
.df_fdr_jc{
	text-align: center;
    
    flex-direction: row;
    justify-content: center;
}
.df{
	display: flex;
}
@media screen and (max-width: 380px){
  .timer li { 
    font-size: 25px;
   
}