.gearDate {font-family: PingFangSC-Medium, sans-serif;font-size: 10px;background-color: rgba(0, 0, 0, 0.3);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: #ffffff;border-top:1px solid #9D998E;color: #363837;margin: 0;height: auto;width:100%;position: absolute;left: 50%;bottom:0;z-index: 9902;overflow: hidden;-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);-moz-transform: translate(-50%,0);-o-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0)}
.slideInUp1 { animation: slideInUp1 .3s ease-in; -webkit-animation: slideInUp1 .3s ease-in; }
@-webkit-keyframes slideInUp1 {
    from { -webkit-transform: translate(-50%, 100%); transform: translate(-50%, 100%); -moz-transform: translate(-50%, 100%); -o-transform: translate(-50%, 100%); -ms-transform: translate(-50%, 100%); }
    to {-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);-moz-transform: translate(-50%,0);-o-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0)}
}
.date_roll {position: relative;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));display: -webkit-flex;display: flex;display: -webkit-box;display: -moz-box;display: -ms-flexbox;}
.date_roll>div{font-size:1.8em;height: 10em;float: left;background-color: transparent;position: relative;overflow: hidden;-webkit-flex-grow:1;-webkit-box-flex: 1.0;-moz-flex-grow: 1;-webkit-flex-grow: 1;flex-grow: 1;}
.date_roll>div:last-child{flex-grow: 3;-webkit-flex-grow:3;-webkit-box-flex: 3.0;-moz-flex-grow: 3;}

.date_roll_mask {-webkit-mask: -webkit-gradient(linear, 0% 50%, 0% 0%, from(#debb47), to(rgba(36, 142, 36, 0)));-webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0));}
.date_grid {position: relative;top: 4em;width: 100%;height: 2em;margin: 0;box-sizing: border-box;z-index: 0;background-color: #f6f6f6;border-top: 1px solid #F44C4C;border-bottom: 1px solid #F44C4C;}
.select_gird::before{content:'';position: absolute;left:0;border:0.4em solid transparent;border-left-color:#CA1A21;top:50%;margin-top:-0.4em;}
.date_info_box{color: #000;font-size: 1.8em;text-align: center;padding: .6em 1em;text-align: center;border-bottom: 1px solid #d4d4d4;}
.date_class_box{text-align: center;flex-grow: 2;-webkit-flex-grow:2;-webkit-box-flex: 2;-moz-flex-grow: 2  ;}
.date_class{display: inline-block;font-size: 1.4em;width:45%;padding:.4em 0;text-align: center;color: #CA1A21;border:1px solid #CA1A21;cursor: pointer;}
.date_class_top{display: flex;display:-webkit-box;align-items: center;-webkit-box-align: center;padding:0.5em 0;border-bottom:1px solid #F3F3F3;}
.date_class_box .date_class:first-child{border-top-left-radius: .2em;border-bottom-left-radius: .2em}
.date_class_box .date_class:last-child{border-top-right-radius: .2em;border-bottom-right-radius: .2em}
.date_class_box .active{background-color: #CA1A21;color: #fff}

.date_btn {color: #989898;font-size: 1.6em;padding:0.5em;text-align: center;cursor: pointer;float: left; -moz-box-sizing: border-box;  -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; flex-grow: 1;-webkit-flex-grow:1;-webkit-box-flex: 1;-moz-flex-grow: 1;}
.date_btn:first-child{cursor:pointer;-webkit-transform: translate3d(0,0,0);}
.date_btn:last-child{color:#CA1A21;cursor:pointer;-webkit-transform: translate3d(0,0,0);}
.gear {float: left;position: absolute;z-index: 9902;margin-top: -6em;cursor: pointer;}
.date_roll>div .gear {width: 100%}
.tooth {height: 2em;line-height: 2em;text-align: center;white-space: nowrap;}
.tooth_hh{height: 2em;line-height: 2em;text-align: center;white-space: nowrap;}
@media (min-width:320px) and (max-width:320px){
    .gearDate{font-size:8px;}
}
@media (min-width:1024px) and (max-width:1024px){
   .gearDate{font-size:16px;}
}