button,input,select {
    vertical-align: middle
}

.main-content,.content-box {
    overflow: hidden
}

header {
    background: #005fa9;
    border-bottom: 1px solid #f5f5f5
}

a,button {
    text-decoration: none
}

body,html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    font-size: 100%
}

* {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color: #333447;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8
}

h1 {
    font-size: 16px;
    font-weight: 500;
    color: #848484;
    margin: 10px
}

h2 {
    font-size: 14px;
    margin-top: 30px;
    margin-bottom: 0;
    font-weight: 500;
    color: #686868
}

ul {
    padding: 0;
    list-style: none;
    font-size: 14px
}

a {
    color: #0f74c1
}

a:hover {
    color: #34a0f3
}

footer p {
    color: #bfbfbf;
    margin: 20px 10px;
    font-size: 12px
}

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0
}

.content-box {
    background-color: #f5f5f5;
    margin: 15px 0 10px;
    padding: 18px 13px 13px
}

.calculate-year,.calculate-day,.calculate-button,.calculate-period {
    margin: 0;
    overflow: hidden;
    display: inline-block
}

.calculate-how-many,.calculate-since-until,.col-how-many-wk {
    display: none
}

.calculate-period {
    width: 25%;
    float: left;
    margin: 0 1% 0 0
}

.calculate-month {
    width: 35%;
    float: left;
    margin: 0 1%
}

.calculate-day {
    width: 12%;
    float: left;
    margin: 0 1%
}

.calculate-year {
    width: 22%;
    float: left;
    margin: 0 0 0 1%
}

.calculate-button {
    width: 100%;
    margin-top: 15px
}

#convert-form {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0
}

button,input {
    display: inline-block
}

input {
    border: 0 solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    height: 35px;
    text-align: center
}

select {
    box-shadow: none;
    border: 0 solid #ccc;
    border-radius: 4px;
    margin: 0;
    background-color: #fff;
    padding: 0 5px;
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    height: 35px;
    width: 100%
}

button {
    background-color: #0463ac;
    color: #fff;
    font-weight: 700;
    font-family: inherit;
    font-size: 16px;
    padding: 5px 10px;
    border: transparent;
    border-radius: 4px;
    text-align: center;
    zoom:1;white-space: nowrap;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 35px;
    width: 100%
}

button:hover {
    opacity: 0.8
}

.home-button {
    margin: 30px 0 15px
}

.web-logo {
    display: block;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 12px;
    float: left
}

.web-logo:hover {
    color: #fff
}

li {
    padding: 8px 0
}

#time {
    font-size: 32px;
    margin: 15px 0 15px 0;
    font-weight: 500;
    color: #dc3545;
    display: block
}

#date {
    font-size: 16px;
    color: #666;
    margin: 0 10px;
    display: block
}

.list-info {
    float: none;
    width: 100%;
    margin: 0
}

.content-box h2 {
    margin: 0 0 20px
}

.list-wrap {
    overflow: hidden
}

.foot-breadcrumb {
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 10px;
    font-size: 11px
}

.foot-breadcrumb li {
    float: left;
    margin-right: 5px;
    color: #000
}

.foot-breadcrumb li a {
    color: #666
}

.prev-info {
    text-align: center;
    margin: 10px 0
}

.next-btn {
    text-align: center;
    margin: 10px 0
}

.prev-next-info {
    clear: both;
    margin: 20px 0;
    display: inline-block;
    width: 100%
}

.col-w {
    float: left;
    width: 23%;
    margin-right: 1%
}

.col-h {
    float: left;
    width: 18%;
    margin-right: 1%
}

.col-t {
    float: left;
    width: 18%
}

.col-d {
    float: left;
    width: 38%;
    margin-right: 1%
}

#date-only {
    font-size: 24px;
    margin: 0 10px
}

.col-sh,.col-eh {
    float: left;
    width: 21%
}

.label {
    display: block;
    float: left;
    margin: 5px 10px
}

.col-btn {
    margin-top: 15px;
    display: inline-block;
    width: 100%
}

#hours {
    font-size: 36px;
    margin: 0 10px
}

#info {
    margin: 20px 0;
    padding: 20px 25px;
    background: #e1f0fc;
    font-size: 16px;
    font-weight: normal;
    color: #005fa9
}

#content-know {
    margin: 20px 0;
    padding: 20px 25px;
    background: #e1f0fc;
    font-size: 16px;
    font-weight: normal;
    color: #005fa9
}

.col-month-wk {
    width: 45%;
    float: left;
    margin: 0 1% 0 0
}

.col-day-wk {
    width: 19%;
    float: left;
    margin: 0 1%
}

.col-year-wk {
    width: 32%;
    float: left;
    margin: 0 0 0 1%
}

.col-dd {
    width: 35%;
    padding-left: 1%;
    float: left
}

.hide {
    display: none
}

.show {
    display: block
}

.ddg,.ddg0 {
    overflow: hidden
}

.ddg {
    min-height: 280px
}

.ddg0 {
    height: 100px
}

.ddg-1 {
    float: none;
    width: 100%
}

.search {
    background: url(/img/icons.png) no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    float: right;
    background-position-x: -32px;
    margin: 9px 13px
}

@media (min-width: 768px) {
    .main-content {
        width:100%;
        margin: 0 auto;
        padding: 0 15px
    }

    header {
        margin-bottom: 10px
    }

    .web-logo {
        margin: 12px 0
    }

    h1 {
        font-size: 24px;
        margin: 10px 0
    }

    h2 {
        font-size: 18px
    }

    .list-info {
        width: 100%;
        float: left
    }

    .calculate-period {
        width: 12%;
        float: left;
        margin: 0 1%
    }

    .calculate-month {
        width: 16%;
        float: left;
        margin: 0 1%
    }

    .calculate-day {
        width: 7%;
        float: left;
        margin: 0 1%
    }

    .calculate-year {
        width: 11%;
        float: left;
        margin: 0 1%
    }

    .calculate-how-many {
        width: 12%;
        float: left;
        padding: 10px 0;
        display: block
    }

    .calculate-since-until {
        width: 12%;
        float: left;
        padding: 10px 0 10px 10px;
        display: block
    }

    .calculate-button {
        width: 19%;
        float: left;
        margin: 0 0 0 1%
    }

    #time {
        font-size: 42px;
    }

    #date {
        font-size: 20px;
        margin: 0
    }

    .content-box {
        margin: 25px 0;
        padding: 30px 25px 26px
    }

    input,select,button {
        height: 45px
    }

    .list-wrap {
        margin: 10px 0
    }

    .foot-breadcrumb {
        padding: 10px 0;
        font-size: 14px
    }

    footer p {
        margin: 20px 0
    }

    ul {
        font-size: 16px
    }

    .prev-info {
        text-align: left;
        width: 50%;
        float: left
    }

    .next-btn {
        text-align: right;
        width: 50%;
        float: left
    }

    .prev-next-info {
        clear: both;
        margin-top: 30px
    }

    .col-w {
        float: left;
        width: 16%;
        margin-right: 1%
    }

    .col-h {
        float: left;
        width: 11%;
        margin-right: 1%
    }

    .col-t {
        float: left;
        width: 11%;
        margin-right: 1%
    }

    .col-d {
        float: left;
        width: 33%;
        margin-right: 1%;
        margin-top: 0
    }

    #date-only {
        font-size: 32px;
        margin: 0
    }

    .col-sh,.col-eh {
        width: 15%
    }

    .label {
        display: block;
        float: left;
        margin: 10px 20px
    }

    .col-btn {
        margin: 0 50px;
        width: 25%;
        float: left
    }

    #hours {
        font-size: 42px;
        margin: 0
    }

    .col-how-many-wk {
        width: 25%;
        float: left;
        padding: 10px 0;
        display: block
    }

    .col-month-wk {
        width: 20%;
        float: left;
        margin: 0 1%
    }

    .col-day-wk {
        width: 12%;
        float: left;
        margin: 0 1%
    }

    .col-year-wk {
        width: 15%;
        float: left;
        margin: 0 1%
    }

    .col-dd {
        width: 21%;
        padding-left: 2%
    }

    .show {
        display: none
    }

    .hide {
        display: block
    }

    .ddg-1 {
        width: 50%;
        float: left
    }

    .countdowndays {
        font-size: 30px;
        color: #005fa9;
    }
}