.gearDate { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 10px; background-color: rgba(0, 0, 0, 0.45); display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9900; overflow: hidden; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.date_ctrl { vertical-align: middle; background-color: #fff; color: #000; margin: 0; height: auto; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 9901; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slideInUp { -webkit-animation: slideInUp .3s; animation: slideInUp .3s; }

@-webkit-keyframes slideInUp {
    from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@keyframes slideInUp {
    from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

.ym_roll,
.date_roll,
.datetime_roll,
.time_roll { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: auto; overflow: hidden; background-color: transparent; -webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 100%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0)); }

.ym_roll > div,
.date_roll > div,
.datetime_roll > div,
.time_roll > div { font-size: 1.9em; height: 10em; float: left; background-color: transparent; position: relative; overflow: hidden; -webkit-box-flex: 4; -webkit-flex: 4; -ms-flex: 4; flex: 4; }

.ym_roll > div .gear,
.date_roll > div .gear,
.datetime_roll > div .gear,
.time_roll > div .gear { width: 100%; float: left; position: absolute; z-index: 9902; margin-top: -4em; }

.date_roll_mask { width:92%; margin:0 auto; -webkit-mask: -webkit-gradient(linear, 0% 40%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0))); -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0)); padding: 0; }

.date_roll > div:nth-child(2) { -webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; }

.date_roll > div:nth-child(1),
.datetime_roll > div:nth-child(1) { -webkit-box-flex: 4; -webkit-flex: 4; -ms-flex: 4; flex: 4; }

.datetime_roll > div:first-child { -webkit-box-flex: 6; -webkit-flex: 6; -ms-flex: 6; flex: 6; }

.datetime_roll > div:last-child { -webkit-box-flex: 6; -webkit-flex: 6; -ms-flex: 6; flex: 6; }

.date_grid { position: relative; top: 4em; width: 100%; height: 2em; margin: 0; box-sizing: border-box; z-index: 0; border-top: 1px solid #a22224; border-bottom: 1px solid #a22224; }

.date_grid > div { color: #000; position: absolute; right: 0; top: 0; font-size: .8em; line-height: 2.5em; }

.date_roll > div:nth-child(3) .date_grid > div { left: 42%; }

.datetime_roll > div .date_grid > div { right: 0; }

.datetime_roll > div:first-child .date_grid > div { left: auto; right: 0%; }

.datetime_roll > div:last-child .date_grid > div { left: 50%; }

.time_roll > div:nth-child(1) .date_grid > div { right: 1em; }

.ym_roll > div:nth-child(1) .date_grid > div { right: .1em; }

.ym_roll > div .date_grid > div,
.time_roll > div .date_grid > div { right: 5em; }

.date_btn { color: #a22224; font-size: 1.6em; line-height: 1em; text-align: center; padding: .8em 1em; }

.date_btn_box:before,
.date_btn_box:after { content: ''; position: absolute; height: 1px; width: 100%; display: block; background-color: #fff; z-index: 15; -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }

.date_btn_box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; background-color: #fff; position: relative; }

.date_btn_box:before { left: 0; top: 0; -webkit-transform-origin: 50% 20%; transform-origin: 50% 20%; }

.date_btn_box:after { left: 0; bottom: 0; -webkit-transform-origin: 50% 70%; transform-origin: 50% 70%; }

.date_title { width:92%; margin:0 auto; border-bottom:1px solid #89312a; line-height:.66rem; padding-top:.25rem; }
.date_title label { display:block; float:left; text-align:center; font-size:1.9em; }
.date_title label:first-child { padding-left:22%; width:11.33%; }
.date_title label:nth-child(2) { padding-left:28%; width:5.33%; }
.date_title label:nth-child(3) { padding-left:22%; width:11.33%; }

.date_roll > div:nth-child(1) .gear { text-indent: 20%; }

.date_roll > div:nth-child(2) .gear { text-indent: -20%; }

.date_roll > div:nth-child(3) .gear { text-indent: -55%; }

.datetime_roll > div .gear { width: 100%; text-indent: -25%; }

.datetime_roll > div:first-child .gear { text-indent: -10%; }

.datetime_roll > div:last-child .gear { text-indent: -50%; }

.ym_roll > div .gear,
.time_roll > div .gear { width: 100%; text-indent: -70%; }

.ym_roll > div:nth-child(1) .gear,
.time_roll > div:nth-child(1) .gear { width: 100%; text-indent: 10%; }

.tooth { height: 2em; line-height: 2em; text-align: center; }