/*ÈÕÀú*/
.gearDate {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  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: #F0F0F0;
  border: 1px solid #a5a5a5;
  border-radius: 5px;
  color: #363837;
  margin: 0;
  height: auto;
  width: 90%;
  max-width: 600px;
  position: absolute;
  left: 50%;
  top: 12%;
  z-index: 9902;
  overflow: hidden;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
.slideInUp {
  animation: slideInUp 0.3s ease-in;
  -webkit-animation: slideInUp 0.3s ease-in;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(-50%, -100%, 0);
    transform: translate3d(-50%, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}
.date_roll {
  display: -webkit-box;
  width: 100%;
  height: auto;
  overflow: hidden;
  font-weight: bold;
  background-color: transparent;
  -webkit-mask: -webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0));
}
.date_roll > div {
  font-size: 2.3em;
  height: 6em;
  float: left;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  -webkit-box-flex: 2;
}
.date_roll_mask {
  padding: 0 2em;
  -webkit-mask: -webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0));
}
.date_grid {
  position: relative;
  top: 2em;
  width: 100%;
  height: 2em;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 0;
  background-color: #E8E8E8;
  border-top: 1px solid #d4d4d4;
  border-bottom: 1px solid #d4d4d4;
}
.date_grid > div {
  color: #000;
  position: absolute;
  right: 0;
  top: 0;
  font-size: .8em;
  line-height: 2.5em;
}
.date_info_box {
  color: #000;
  font-size: 1.8em;
  padding: .6em 1em;
  text-align: center;
  border-bottom: 1px solid #d4d4d4;
  font-weight: 700;
}
.date_class_box {
  text-align: center;
  padding: 1em 2em;
}
.date_class {
  display: inline-block;
  font-size: 1.4em;
  width: 40%;
  padding: .4em 0;
  text-align: center;
  color: #ca101b;
  border: 1px solid #ca101b;
  cursor: pointer;
}
.date_class_box .date_class:first-child {
  border-top-left-radius: .2em;
  border-bottom-left-radius: 0.2em;
}
.date_class_box .date_class:last-child {
  border-top-right-radius: .2em;
  border-bottom-right-radius: 0.2em;
}
.date_class_box .active {
  background-color: #ca101b;
  color: #ffffff;
}
.date_btn_box {
  overflow: hidden;
  position: relative;
  border-top: 1px solid #d4d4d4;
}
.date_btn {
  color: #000;
  font-size: 1.6em;
  line-height: 1em;
  text-align: center;
  padding: .8em 1em;
  cursor: pointer;
  float: left;
  width: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.date_btn:first-child {
  border-right: 1px solid #d4d4d4;
}
.gear {
  float: left;
  position: absolute;
  z-index: 9902;
  width: 5.5em;
  margin-top: -6em;
  cursor: pointer;
}
.date_roll > div .gear {
  width: 100%;
}
.tooth {
  height: 2em;
  line-height: 2em;
  text-align: center;
}


.footer{font-size:0.23rem;padding:0.3rem}





.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}


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

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

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

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}