* {
  padding: 0;
  margin: 0;
  list-style: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
body {
  -webkit-touch-callout: none;
  /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;
  /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;
  /* prevent copy paste, to allow, change 'none' to 'text' */
  font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 12px;
}
@font-face {
  font-family: 'SFUI';
  src: url('../lib/fonts/SFUI-Display-Medium.otf');
}
@font-face {
  font-family: 'xdpft_sm';
  src: url('../lib/fonts/xdpft_sm.otf');
}
html,
body {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  background-color: #1892DE;
}
button {
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}
button:active,
button:focus {
  outline: none;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.loading {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin: -100px;
  opacity: 0;
  visibility: hidden;
}
.loading.show {
  opacity: 1;
  visibility: visible;
}
.completAllStage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: #1892DE;
  opacity: 0;
  visibility: hidden;
  transition: all 0.38s;
  -webkit-transition: all 0.38s;
}
.completAllStage.show {
  opacity: 1;
  visibility: visible;
}
.completAllStage .cup {
  background-image: url(../img/trophy@3x.png);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 144px;
  height: 240px;
  position: relative;
  margin: 10% auto 0 auto;
}
.completAllStage .cup .start1 {
  background-image: url(../img/complteStar1@3x.png);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 68px;
  height: 68px;
  position: absolute;
  top: 0;
  left: 0;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.completAllStage .cup .start2 {
  width: 12px;
  height: 12px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  border: solid 3px #F6AF1E;
  top: 70px;
  left: 10px;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.completAllStage .cup .start3 {
  background-image: url(../img/complteStar2@3x.png);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
  position: absolute;
  bottom: 50px;
  right: 34px;
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
}
.completAllStage p {
  font-size: 24px;
  text-align: center;
  color: #E0E0E0;
  margin-top: 20px;
}
.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
}
.modal.show {
  opacity: 1;
  visibility: visible;
}
.modal img {
  width: 128px;
  height: auto;
  margin: 110px auto 0 auto;
  display: block;
}
.modal p {
  font-size: 22px;
  text-align: center;
  padding: 30px 0 54px 0;
  color: #fff;
}
.modal button {
  width: 90%;
  height: 50px;
  font-size: 22px;
  margin: 16px auto;
  display: block;
  border: none;
  border-radius: 14px;
  background-color: #fff;
}
.modal button.yes,
.modal button.ok {
  color: #84A2D6;
}
.modal button.cancle {
  color: #9BCEDC;
}
.page {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  z-index: 0;
  transition: transform 0.38s;
  -webkit-transition: -webkit-transform 0.38s;
  background-color: #1892DE;
  overflow: hidden;
}
.page.show {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}
.page .toolBar {
  height: 40px;
  width: 100%;
  position: relative;
  background-color: #1892DE;
  margin-bottom: 10px;
}
.page .toolBar button {
  margin-top: 8px;
}
.page .toolBar button.left {
  float: left;
}
.page .toolBar button.right {
  float: right;
}
@media (min-width: 355px) and (max-width: 394px) {
  .page .toolBar {
    height: 47px !important;
  }
  .page .toolBar h1 {
    line-height: 47px !important;
  }
  .page .toolBar button {
    margin-top: 12px !important;
  }
  .page .toolBar .levelStateBar,
  .page .toolBar .levelTimeBar {
    top: 11px !important;
  }
  #levelSelecter .levelList {
    top: 60px !important;
  }
  #inLevel .levelTableWrapper {
    height: calc(100% - 229px) !important;
  }
  #inLevel .inputKeyBoard.show {
    height: 159px !important;
  }
  #ranking .rankingInfo {
    top: 60px !important;
  }
}
@media (min-width: 394px) and (max-width: 740px) {
  .page .toolBar {
    height: 52px !important;
  }
  .page .toolBar h1 {
    line-height: 52px !important;
  }
  .page .toolBar button {
    margin-top: 15px !important;
  }
  .page .toolBar .levelStateBar,
  .page .toolBar .levelTimeBar {
    margin-top: 5px;
  }
  #levelSelecter .levelList {
    top: 65px !important;
  }
  #inLevel .levelTableWrapper {
    height: calc(100% - 250px) !important;
  }
  #inLevel .inputKeyBoard.show {
    height: 176px !important;
  }
  #ranking .rankingInfo {
    top: 65px !important;
  }
}
@media (min-width: 1004px) and (max-width: 1440px) {
  .modal button {
    width: 30% !important;
  }
  .page .toolBar {
    height: 45px !important;
  }
  .page .toolBar button {
    margin-top: 0 !important;
    border-top: solid 10px #1892de !important;
    border-bottom: solid 10px #1892de !important;
    height: 44px !important;
  }
  #rule .ruleTitle {
    width: 40% !important;
  }
  #rule .ruleContent {
    width: 40% !important;
    margin: 10px auto !important;
  }
  #rule button.OK {
    width: 40% !important;
    margin: 0 auto !important;
    display: block;
  }
  #levelSelecter .levelList .row .levelItem {
    margin-left: 48px !important;
    margin-right: 48px !important;
  }
  #inLevel .toolBar .levelStateBar,
  #inLevel .toolBar .levelTimeBar {
    width: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    left: 50% !important;
  }
  #inLevel .levelTableWrapper {
    width: calc(50% - 10px) !important;
    float: left;
    margin-left: 5px !important;
    height: calc(100% - 76px) !important;
  }
  #inLevel .levelTableWrapper .levelTable li {
    font-size: 24px !important;
  }
  #inLevel .inputKeyBoard.pad {
    display: flex !important;
    display: -webkit-flex !important;
  }
  #inLevel .inputKeyBoard.pad .delWrapper {
    flex: 1 !important;
    -webkit-flex: 1 !important;
  }
  #inLevel .inputKeyBoard.pad .btn {
    font-size: 50px;
  }
  #inLevel .inputKeyBoard.pad a.btn.next {
    font-size: 40px;
  }
  #inLevel .inputKeyBoard.pad a.btn.plusMinus {
    font-size: 40px;
  }
  #inLevel .inputKeyBoard.pad a.btn.start {
    font-size: 40px;
  }
  #inLevel .inputKeyBoard.pad a.btn.finish {
    font-size: 40px;
  }
  #inLevel .inputKeyBoard.phone {
    display: none !important;
  }
  #inLevel .scribblingPad {
    width: calc(50% - 10px);
    height: calc(100% - 380px);
    float: right;
    margin: 5px 5px 10px 0;
    position: relative;
    border-radius: 5px;
    background-color: #2AA1EB;
  }
  #inLevel .scribblingPad.show {
    display: block;
  }
  #inLevel .scribblingPad #scribblingPad {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  #inLevel .currentLevelResult.show {
    float: right;
    width: calc(50% - 10px);
    height: calc(100% - 176px) !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
  }
  #inLevel .currentLevelResult.show .currentLevelScore {
    position: static;
    width: 122px;
    height: 0;
    padding: 140px 0 0 0;
    text-align: center;
    background-image: url('../img/icon-star-big@3x.png'), none !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 84px auto 60px auto;
    color: #ffcb39;
    font-size: 60px;
  }
  #inLevel .currentLevelResult.show h1 {
    font-size: 26px;
  }
  #inLevel .currentLevelResult.show h2 {
    font-size: 17px;
  }
  #inLevel .currentLevelResult.show .rightPercent {
    display: none;
  }
  #inLevel .retry,
  #inLevel .nextLevel {
    width: calc(50% - 10px) !important;
    height: 76px !important;
    margin-right: 5px !important;
    float: right;
    margin-top: 20px !important;
  }
  #inLevel .inputKeyBoard.show {
    width: calc(50% - 10px);
    height: 296px !important;
  }
}
#gradeSelecter .toolBar .home {
  background-image: url('../img/backlinearrow@3x.png');
  background-size: contain;
  border: none;
  width: 56px;
  height: 24px;
}
#gradeSelecter .toolBar .score {
  background-image: url('../img/left－line@2x.png'), url('../img/mid-line@2x.png'), url('../img/right-line@2x.png');
  background-size: contain, calc(100% - 18px) 100%, contain;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left, 6px, right;
  border: none;
  width: 70px;
  height: 24px;
  color: #fff;
  margin-right: 5px;
  text-align: center;
}
#gradeSelecter .gradePop {
  height: 73px;
  width: 98px;
  margin: 50px auto 0 auto;
  padding: 25px;
  background-image: url('../img/gradePop.png');
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
}
#gradeSelecter .gradePop .iconfont {
  font-size: 30px;
  text-align: center;
}
#gradeSelecter .gradePop .icon-plus {
  display: none;
  color: #1892DE;
  -webkit-animation-delay: 0.38s;
  animation-delay: 0.38s;
}
#gradeSelecter .gradePop .icon-subtraction {
  display: none;
  color: #50E3C2;
  animation-delay: 0.76s;
  -webkit-animation-delay: 0.76s;
}
#gradeSelecter .gradePop .icon-multiplication {
  display: none;
  color: #FF9152;
  animation-delay: 1.14s;
  -webkit-animation-delay: 1.14s;
}
#gradeSelecter .gradePop .icon-division {
  display: none;
  color: #F37F70;
  animation-delay: 1.52s;
  -webkit-animation-delay: 1.52s;
}
#gradeSelecter .gradePop .icon-suan {
  color: #1892DE;
  flex: 1;
  -webkit-flex: 1;
  font-size: 48px;
  animation-delay: 0.38s;
  animation-duration: 2s;
  -wekbit-animation-delay: 0.38s;
  -webkit-animation-duration: 2s;
}
#gradeSelecter .gradePop .icon-shu {
  color: #FF9152;
  flex: 1;
  -webkit-flex: 1;
  font-size: 48px;
  animation-delay: 0.76s;
  animation-duration: 2s;
  -webkit-animation-delay: 0.76s;
  -webkit-animation-duration: 2s;
}
#gradeSelecter .gradeCardWrap {
  height: 300px;
  position: relative;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
}
#gradeSelecter .gradeCardWrap .gradeSwiper {
  width: 620px;
  height: 330px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard {
  width: 200px;
  height: 240px;
  background-color: #fff;
  margin: 60px auto 0 auto;
  border-radius: 8px;
  text-align: center;
  transform: translateZ(0) scale(0.8);
  -webkit-transform: translateZ(0) scale(0.8);
  transition: transform 0.38s;
  -webkit-transition: -webkit-transform 0.38s;
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard.swiper-slide-active {
  transform: translateZ(0) scale(1);
  -webkit-transform: translateZ(0) scale(1);
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard .character {
  position: absolute;
  width: 85px;
  height: 70px;
  top: -53px;
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard .character img {
  height: 100%;
  width: auto;
  margin-left: 22px;
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard h1 {
  margin-top: 44px;
  font-size: 18px;
  color: #9B9B9B;
  font-weight: normal;
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard h2 {
  font-size: 18px;
  font-weight: normal;
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard .description {
  font-size: 12px;
  color: #4A4A4A;
  line-height: 28px;
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard .start {
  margin-top: 40px;
  width: 122px;
  height: 36px;
  border-radius: 18px;
  font-size: 20px;
  border: none;
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard .start.enable {
  background-color: #E76531;
  color: #fff;
}
#gradeSelecter .gradeCardWrap .gradeSwiper .gradeCard .start.disable {
  background-color: #CACACA;
  color: #9B9B9B;
}
#gradeSelecter .gradeCardWrap.show {
  opacity: 1;
}
#levelSelecter .toolBar .backPage {
  background-image: url('../img/backline@3x.png');
  background-size: contain;
  border: none;
  width: 56px;
  height: 24px;
}
#levelSelecter .toolBar h1 {
  line-height: 40px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  position: absolute;
  left: 60px;
  right: 60px;
  top: 0;
}
#levelSelecter .toolBar .score {
  background-image: url('../img/left－line@2x.png'), url('../img/mid-line@2x.png'), url('../img/right-line@2x.png'), url('../img/icon-star@3x.png');
  background-size: contain, calc(100% - 18px) 100%, contain, 10px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left, 6px, right, 6px center;
  border: none;
  width: 70px;
  height: 24px;
  color: #fff;
  margin-right: 5px;
  text-align: left;
  padding-left: 18px;
}
#levelSelecter .levelList {
  position: absolute;
  width: 100%;
  top: 40px;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
#levelSelecter .levelList .row {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}
#levelSelecter .levelList .row .levelItem {
  width: 75px;
  height: 140px;
  margin-left: 18px;
  margin-right: 18px;
  padding-top: 20px;
}
#levelSelecter .levelList .row .levelItem .levelNum {
  width: 75px;
  height: 75px;
  background-size: contain;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  background-repeat: no-repeat;
}
#levelSelecter .levelList .row .levelItem .levelNum.enable {
  background-image: url('../img/levelItemBgEnable.png');
}
#levelSelecter .levelList .row .levelItem .levelNum.disable {
  background-image: url('../img/levelItemBgDisable.png');
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper {
  -webkit-transition: transform 0.38s;
  transition: transform 0.38s;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num1 {
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num1 .eyes {
  position: absolute;
  top: 6px;
  left: 10px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num1 .eyes .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num2 {
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num2 .eyes:nth-child(1) {
  position: absolute;
  top: 30px;
  left: 1px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num2 .eyes:nth-child(1) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num2 .eyes:nth-child(2) {
  position: absolute;
  top: 30px;
  left: 14px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num2 .eyes:nth-child(2) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num3 {
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num3 .eyes:nth-child(1) {
  position: absolute;
  top: 6px;
  left: 1px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num3 .eyes:nth-child(1) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num3 .eyes:nth-child(2) {
  position: absolute;
  top: 3px;
  left: 9px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num3 .eyes:nth-child(2) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num3 .eyes:nth-child(3) {
  position: absolute;
  top: 10px;
  left: 15px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num3 .eyes:nth-child(3) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num4 {
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num4 .eyes:nth-child(1) {
  position: absolute;
  top: 5px;
  left: -1px;
  width: 7px;
  height: 7px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num4 .eyes:nth-child(1) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num4 .eyes:nth-child(2) {
  position: absolute;
  top: 3px;
  left: 13px;
  width: 7px;
  height: 7px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num4 .eyes:nth-child(2) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num4 .eyes:nth-child(3) {
  position: absolute;
  top: 20px;
  left: -1px;
  width: 7px;
  height: 7px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num4 .eyes:nth-child(3) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num4 .eyes:nth-child(4) {
  position: absolute;
  top: 20px;
  left: 13px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num4 .eyes:nth-child(4) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 {
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(1) {
  position: absolute;
  top: 4px;
  left: 0px;
  width: 7px;
  height: 7px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(1) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(2) {
  position: absolute;
  top: 3px;
  left: 13px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(2) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(3) {
  position: absolute;
  top: 14px;
  left: 0px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(3) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(4) {
  position: absolute;
  top: 21px;
  left: 17px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(4) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(5) {
  position: absolute;
  top: 29px;
  left: 0px;
  width: 7px;
  height: 7px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num5 .eyes:nth-child(5) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 {
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(1) {
  position: absolute;
  top: 6px;
  left: 16px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(1) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(2) {
  position: absolute;
  top: 22px;
  left: 0px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(2) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(3) {
  position: absolute;
  top: 22px;
  left: 17px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(3) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(4) {
  position: absolute;
  top: 30px;
  left: 4px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(4) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(5) {
  position: absolute;
  top: 30px;
  left: 15px;
  width: 7px;
  height: 7px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(5) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(6) {
  position: absolute;
  top: 17px;
  left: 10px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num6 .eyes:nth-child(6) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 {
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(1) {
  position: absolute;
  top: 5px;
  left: -1px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(1) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(2) {
  position: absolute;
  top: 5px;
  left: 15px;
  width: 8px;
  height: 8px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(2) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(3) {
  position: absolute;
  top: 12px;
  left: 14px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(3) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(4) {
  position: absolute;
  top: 16px;
  left: 13px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(4) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(5) {
  position: absolute;
  top: 21px;
  left: 10px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(5) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(6) {
  position: absolute;
  top: 27px;
  left: 8px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(6) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(7) {
  position: absolute;
  top: 32px;
  left: 6px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num7 .eyes:nth-child(7) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 {
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(1) {
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(1) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(2) {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 7px;
  height: 7px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(2) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(3) {
  position: absolute;
  top: 9px;
  left: 17px;
  width: 7px;
  height: 7px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(3) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(4) {
  position: absolute;
  top: 18px;
  left: 9px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(4) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(5) {
  position: absolute;
  top: 22px;
  left: -2px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(5) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(6) {
  position: absolute;
  top: 22px;
  left: 18px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(6) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(7) {
  position: absolute;
  top: 31px;
  left: 2px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(7) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(8) {
  position: absolute;
  top: 32px;
  left: 14px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num8 .eyes:nth-child(8) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 2px;
  border-radius: 50%;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 {
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(1) {
  position: absolute;
  top: 16px;
  left: 14px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(1) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 1px;
  border-radius: 2px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(2) {
  position: absolute;
  top: 19px;
  left: 8px;
  width: 5px;
  height: 5px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(2) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 1px;
  border-radius: 2px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(3) {
  position: absolute;
  top: 17px;
  left: 3px;
  width: 4px;
  height: 4px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(3) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 1px;
  border-radius: 2px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(4) {
  position: absolute;
  top: 11px;
  left: 1px;
  width: 4px;
  height: 4px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(4) .eyesBall {
  position: absolute;
  width: 3px;
  height: 3px;
  bottom: 0;
  left: 1px;
  border-radius: 2px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(5) {
  position: absolute;
  top: 5px;
  left: 3px;
  width: 4px;
  height: 4px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(5) .eyesBall {
  position: absolute;
  width: 2px;
  height: 2px;
  bottom: 0;
  left: 1px;
  border-radius: 2px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(6) {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 4px;
  height: 4px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(6) .eyesBall {
  position: absolute;
  width: 2px;
  height: 2px;
  bottom: 0;
  left: 1px;
  border-radius: 2px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(7) {
  position: absolute;
  top: 4px;
  left: 13px;
  width: 5px;
  height: 5px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(7) .eyesBall {
  position: absolute;
  width: 3px;
  height: 3px;
  bottom: 0;
  left: 1px;
  border-radius: 2px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(8) {
  position: absolute;
  top: 9px;
  left: 16px;
  width: 6px;
  height: 6px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(8) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 1px;
  border-radius: 2px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(9) {
  position: absolute;
  top: 32px;
  left: 7px;
  width: 7px;
  height: 7px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .num9 .eyes:nth-child(9) .eyesBall {
  position: absolute;
  width: 4px;
  height: 4px;
  bottom: 0;
  left: 1px;
  border-radius: 2px;
}
#levelSelecter .levelList .row .levelItem .levelNum .levelNumWrapper .eyes {
  animation-name: eyesRoll;
  animation-duration: 12s;
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  animation-iteration-count: infinite;
}
@keyframes eyesRoll {
  0% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  50% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  100% {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
#levelSelecter .levelList .row .levelItem .levelNum.enable:hover .levelNumWrapper {
  transform: scale(1.4);
  -webkit-transform: scale(1.4);
}
#levelSelecter .levelList .row .levelItem .levelNum span {
  display: inline-block;
  width: auto;
  height: 37px;
  position: relative;
}
#levelSelecter .levelList .row .levelItem .levelNum span i {
  font-size: 37px;
  margin-left: -7px;
  margin-right: -7px;
}
#levelSelecter .levelList .row .levelItem .levelNum span img {
  width: auto;
  height: 100%;
}
#levelSelecter .levelList .row .levelItem .levelName {
  font-size: 14px;
  color: #fff;
  text-align: center;
}
#levelSelecter .levelList .row .levelItem .scoreProcess {
  position: relative;
  width: 75px;
  height: 12px;
  overflow: hidden;
  margin-top: 5px;
}
#levelSelecter .levelList .row .levelItem .scoreProcess:before {
  position: absolute;
  width: 75px;
  height: 12px;
  top: 0;
  left: 0;
  content: '';
  display: block;
  z-index: 10;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 18px, #1892DE 18px, #1892DE 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 38px, #1892DE 38px, #1892DE 40px, rgba(0, 0, 0, 0) 40px, rgba(0, 0, 0, 0) 58px, #1892DE 58px, #1892DE 60px, rgba(0, 0, 0, 0) 60px, rgba(0, 0, 0, 0) 78px);
}
#levelSelecter .levelList .row .levelItem .scoreProcess .scoreProcessContent {
  position: absolute;
  width: 75px;
  height: 20px;
  right: 0;
  top: 0;
  background-color: #FFCB39;
  transform-origin: top right;
  transform: rotate(-8deg);
  -webkit-transform-origin: top right;
  -webkit-transform: rotate(-8deg);
  overflow: hidden;
}
#levelSelecter .levelList .row .levelItem .scoreProcess .scoreProcessContent .scoreProcessBar {
  position: absolute;
  height: 20px;
  right: 0;
  top: 0;
  background-color: #118BD7;
  transform-origin: top right;
  transform: rotate(8deg);
  -webkit-transform-origin: top right;
  -webkit-transform: rotate(8deg);
}
#inLevel .toolBar {
  -webkit-filter: drop-shadow(#0280CE 0px 1px 0px);
}
#inLevel .toolBar:before {
  content: '';
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  left: -13px;
  bottom: -8px;
  background: #1892DE;
  border-radius: 50%;
}
#inLevel .toolBar:after {
  content: '';
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  right: -13px;
  bottom: -8px;
  background: #1892DE;
  border-radius: 50%;
}
#inLevel .toolBar .backPage {
  background-image: url('../img/back@3x.png');
  background-size: contain;
  border: none;
  width: 56px;
  height: 24px;
}
#inLevel .toolBar .levelStateBar,
#inLevel .toolBar .levelTimeBar {
  position: absolute;
  left: 83px;
  right: 96px;
  top: 8px;
  height: 24px;
  line-height: 24px;
  border-radius: 12px;
  border: solid 1px #1B688E;
  text-align: center;
  background-color: #1075AD;
  font-size: 17px;
  font-family: 'SFUI';
}
#inLevel .toolBar .levelStateBar .levelIndex,
#inLevel .toolBar .levelTimeBar .levelIndex {
  width: 20px;
  height: 20px;
  background-color: #fff;
  color: #1075AD;
  display: inline-block;
  border-radius: 50%;
  line-height: 20px;
  float: right;
  margin-top: 2px;
  margin-right: 2px;
  font-size: 14px;
}
#inLevel .toolBar .levelStateBar {
  color: #78BBD8;
}
#inLevel .toolBar .levelTimeBar {
  color: #fff;
}
#inLevel .toolBar .score {
  background-image: url('../img/icon-star@3x.png'), url('../img/left@2x.png'), url('../img/mid@2x.png'), url('../img/right@2x.png');
  background-size: 10px, contain, calc(100% - 18px) 100%, contain;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 6px center, left, 6px, right;
  border: none;
  width: 70px;
  height: 24px;
  color: #fff;
  margin-right: 5px;
  text-align: left;
  padding-left: 18px;
}
#inLevel .levelTableWrapper {
  width: calc(100% - 16px);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
  margin-top: 5px;
  height: calc(100% - 200px);
  position: relative;
}
#inLevel .levelTableWrapper.disable .levelTable {
  opacity: 0.75;
}
#inLevel .levelTableWrapper .levelOperatorTip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  transform: scale(1);
  -webkit-transform: scale(1);
  transform-origin: top left;
  -webkit-transform-origin: top left;
  opacity: 1;
  transition: all 1s;
  -webkit-transition: all 1s;
  text-align: center;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  -webkit-flex-direction: column;
}
#inLevel .levelTableWrapper .levelOperatorTip i {
  width: 140px;
  height: 140px;
  margin: -100px auto 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#inLevel .levelTableWrapper .levelOperatorTip i.plus {
  background-image: url('../img/plus@3x.png');
}
#inLevel .levelTableWrapper .levelOperatorTip i.subtraction {
  background-image: url('../img/subtraction@3x.png');
}
#inLevel .levelTableWrapper .levelOperatorTip i.multiplication {
  background-image: url('../img/multiplication@3x.png');
}
#inLevel .levelTableWrapper .levelOperatorTip i.division {
  background-image: url('../img/division@3x.png');
}
#inLevel .levelTableWrapper .levelOperatorTip.hide {
  transform: scale(0);
  -webkit-transform: scale(0);
  opacity: 0;
}
#inLevel .levelTableWrapper .levelOperatorTip .iconfont {
  color: #E76531;
  font-size: 96px;
}
#inLevel .levelTableWrapper .levelTable {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 8px;
  overflow: hidden;
  z-index: 10;
  background-color: #1892DE;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
#inLevel .levelTableWrapper .levelTable .operator {
  width: 49px;
  height: 39px;
  margin-top: 1px;
  margin-left: 1px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  color: #ED612B;
  text-align: center;
  line-height: 40px;
  font-size: 18px;
  font-weight: bolder;
}
#inLevel .levelTableWrapper .levelTable .operator.active {
  color: #fff;
  background-color: #ED612B;
}
#inLevel .levelTableWrapper .levelTable .xList {
  position: absolute;
  top: 0;
  left: 50px;
  right: 0;
  height: 40px;
  overflow: hidden;
}
#inLevel .levelTableWrapper .levelTable .xList li {
  width: 49px;
  height: 39px;
  margin-top: 1px;
  margin-left: 1px;
  line-height: 40px;
  float: left;
  list-style: none;
  text-align: center;
  background-color: #fff;
  color: #ED612B;
  font-size: 18px;
  font-weight: bolder;
}
#inLevel .levelTableWrapper .levelTable .xList li.active {
  font-size: 24px;
  background-color: #ED612B;
  color: #fff;
}
#inLevel .levelTableWrapper .levelTable .yList {
  position: absolute;
  top: 40px;
  left: 0;
  width: 50px;
  bottom: 0;
  overflow: hidden;
}
#inLevel .levelTableWrapper .levelTable .yList li {
  list-style: none;
  width: 49px;
  height: 39px;
  margin-top: 1px;
  margin-left: 1px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  color: #ED612B;
  font-size: 18px;
  font-weight: bolder;
}
#inLevel .levelTableWrapper .levelTable .yList li.active {
  font-size: 24px;
  background-color: #ED612B;
  color: #fff;
}
#inLevel .levelTableWrapper .levelTable .answer {
  position: absolute;
  top: 40px;
  left: 50px;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
#inLevel .levelTableWrapper .levelTable .answer .answerContent .answerCell {
  list-style: none;
  width: 49px;
  height: 39px;
  margin-top: 1px;
  margin-left: 1px;
  text-align: center;
  line-height: 40px;
  background-color: #fff;
  float: left;
  color: #083C5A;
  font-size: 16px;
  position: relative;
}
#inLevel .levelTableWrapper .levelTable .answer .answerContent .answerCell.active {
  background-color: #FFF7E9;
  box-shadow: inset #8B9CB0 0 0 0 1px;
}
#inLevel .levelTableWrapper .levelTable .answer .answerContent .answerCell.right:after {
  content: "\e606";
  position: absolute;
  right: 7px;
  bottom: 7px;
  color: #299AEF;
  font-size: 12px;
  height: 12px;
  line-height: 12px;
}
#inLevel .levelTableWrapper .levelTable .answer .answerContent .answerCell.wrong:after {
  content: "\e604";
  position: absolute;
  right: 7px;
  bottom: 7px;
  color: #ED612B;
  font-size: 12px;
  height: 12px;
  line-height: 12px;
}
#inLevel .currentLevelResult {
  opacity: 0;
  visibility: hidden;
  height: 0px;
  transition: height 1s;
  -webkit-transition: height 1s;
  width: calc(100% - 13px);
  background-color: #fff;
  border-radius: 8px;
  margin: 0 auto;
  position: relative;
  color: #999;
  overflow: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
#inLevel .currentLevelResult .currentLevelScore {
  position: absolute;
  width: 58px;
  height: 53px;
  top: 0;
  left: 0;
  line-height: 37px;
  padding-left: 25px;
  color: #fff;
  font-size: 18px;
  background-image: url('../img/icon-star@3x.png'), radial-gradient(70px 60px at 10px 10px, #999 0px, #999 40px, transparent 41px, transparent 60px);
  background-size: 16px, cover;
  background-repeat: no-repeat;
  background-position: 5px 10px, center;
}
#inLevel .currentLevelResult .rightPercent {
  position: absolute;
  width: 50px;
  height: 40px;
  bottom: 0;
  right: 0;
  color: #fff;
  line-height: 40px;
  text-align: center;
  background-image: radial-gradient(80px 60px at 41px 31px, #999 0px, #999 40px, transparent 41px, transparent 60px);
}
#inLevel .currentLevelResult .rightPercent span {
  font-size: 18px;
}
#inLevel .currentLevelResult h1 {
  text-align: center;
  padding-top: 8px;
  font-size: 22px;
}
#inLevel .currentLevelResult h2 {
  text-align: center;
  font-size: 14px;
}
#inLevel .currentLevelResult h3 {
  text-align: center;
  font-size: 14px;
  color: rgba(217, 142, 150, 0.65);
}
#inLevel .currentLevelResult.show {
  opacity: 1;
  margin: 2px auto;
  visibility: visible;
  height: 85px;
}
#inLevel .currentLevelResult.noPass .currentLevelScore {
  background-image: url('../img/icon-star@3x.png'), radial-gradient(70px 60px at 10px 10px, #D6828C 0px, #D6828C 40px, transparent 41px, transparent 60px);
}
#inLevel .currentLevelResult.noPass .rightPercent {
  background-image: radial-gradient(80px 60px at 41px 31px, #D6828C 0px, #D6828C 40px, transparent 41px, transparent 60px);
}
#inLevel .currentLevelResult.noPass h1 {
  color: #D6828C;
}
#inLevel .currentLevelResult.noPass h2 {
  color: #D6828C;
}
#inLevel .currentLevelResult.pass .currentLevelScore {
  background-image: url('../img/icon-star@3x.png'), radial-gradient(70px 60px at 10px 10px, #84A2D6 0px, #84A2D6 40px, transparent 41px, transparent 60px);
}
#inLevel .currentLevelResult.pass .rightPercent {
  background-image: radial-gradient(80px 60px at 41px 31px, #84A2D6 0px, #84A2D6 40px, transparent 41px, transparent 60px);
}
#inLevel .currentLevelResult.pass h1 {
  color: #84A2D6;
}
#inLevel .currentLevelResult.pass h2 {
  color: #84A2D6;
}
#inLevel .scribblingPad {
  display: none;
}
#inLevel .inputKeyBoard {
  width: calc(100% - 13px);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  display: -webkit-flex;
  flex: 1;
  -webkit-flex: 1;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  height: 0;
  opacity: 0;
  visibility: hidden;
  transition: height 1s;
  -webkit-transition: height 1s;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
#inLevel .inputKeyBoard.pad {
  display: none;
}
#inLevel .inputKeyBoard.phone {
  display: flex;
  display: -webkit-flex;
}
#inLevel .inputKeyBoard .btn {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: #F7F7F7;
  border: none;
  border-radius: 2px;
  font-size: 30px;
  color: #5095E3;
  box-shadow: inset #DFDDDC 0 -2px 0 0, inset rgba(255, 255, 255, 0.5) 0 0 0 1px;
  font-family: 'SFUI';
  display: flex;
  display: -webkit-flex;
  text-align: center;
  justify-content: center;
  -webkit-justify-content: center;
  flex-direction: column;
  -webkit-flex-direction: column;
}
#inLevel .inputKeyBoard .btn i {
  font-size: 23px;
}
#inLevel .inputKeyBoard .btn.active,
#inLevel .inputKeyBoard .btn:active,
#inLevel .inputKeyBoard .btn:focus {
  background-color: #116FAA;
}
#inLevel .inputKeyBoard a.btn.start {
  color: #fff;
  font-size: 20px;
  background-color: #E76531;
  box-shadow: rgba(0, 22, 35, 0.3) 0 5px 8px 0, inset #B2522E 0 -4px 0 0, inset rgba(255, 133, 86, 0.5) 0 0 0 1px !important;
  left: 2px;
  right: 0px;
}
#inLevel .inputKeyBoard a.btn.start span {
  position: relative;
  top: -2px;
}
#inLevel .inputKeyBoard a.btn.plusMinus {
  font-size: 20px;
}
#inLevel .inputKeyBoard a.btn.next {
  font-size: 20px;
}
#inLevel .inputKeyBoard a.btn.finish {
  font-size: 20px;
}
#inLevel .inputKeyBoard a.btn.del i {
  font-size: 30px;
}
#inLevel .inputKeyBoard.disable .btn {
  opacity: 0.75;
  box-shadow: none !important;
}
#inLevel .inputKeyBoard.disable .btn.active,
#inLevel .inputKeyBoard.disable .btn:active,
#inLevel .inputKeyBoard.disable .btn:focus {
  background-color: #f7f7f7;
}
#inLevel .inputKeyBoard.disable .btn.start {
  opacity: 1;
}
#inLevel .inputKeyBoard.show {
  opacity: 1;
  visibility: visible;
  height: 136px;
}
#inLevel .inputKeyBoard .row {
  display: flex;
  display: -webkit-flex;
  flex: 1;
  -webkit-flex: 1;
  justify-content: space-around;
  -webkit-justify-content: space-around;
}
#inLevel .inputKeyBoard .row:first-child .itemWrapper:first-child .btn {
  border-radius: 8px 2px 2px 2px;
}
#inLevel .inputKeyBoard .row:first-child .itemWrapper:last-child .btn {
  border-radius: 2px 8px 2px 2px;
}
#inLevel .inputKeyBoard .row:last-child .itemWrapper:first-child .btn {
  border-radius: 2px 2px 2px 8px;
}
#inLevel .inputKeyBoard .row:last-child .itemWrapper:last-child .btn {
  border-radius: 2px 2px 8px 2px;
}
#inLevel .inputKeyBoard .row .itemWrapper {
  flex: 1;
  -webkit-flex: 1;
  position: relative;
}
#inLevel .inputKeyBoard .row .itemWrapper.delWrapper {
  flex: 2;
  -webkit-flex: 2;
}
#inLevel .inputKeyBoard .row .itemWrapper.nextWrapper {
  flex: 2;
  -webkit-flex: 2;
}
#inLevel .inputKeyBoard .row .itemWrapper.startWrapper {
  flex: 2;
  -webkit-flex: 2;
}
#inLevel .inputKeyBoard .row .itemWrapper.finishWrapper {
  flex: 2;
  -webkit-flex: 2;
}
#inLevel .retry {
  width: calc(100% - 13px);
  height: 50px;
  text-align: center;
  color: #D6828C;
  border-radius: 14px;
  font-size: 22px;
  background-color: #fff;
  border: none;
  margin: 0 auto;
  display: block;
}
#inLevel .nextLevel {
  width: calc(100% - 13px);
  height: 50px;
  text-align: center;
  color: #84A2D6;
  border-radius: 14px;
  font-size: 22px;
  background-color: #fff;
  border: none;
  margin: 0 auto;
  display: block;
}
#ranking .toolBar {
  -webkit-filter: drop-shadow(#0280CE 0px 1px 0px);
}
#ranking .toolBar:before {
  content: '';
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  left: -13px;
  bottom: -8px;
  background: #1892DE;
  border-radius: 50%;
}
#ranking .toolBar:after {
  content: '';
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  right: -13px;
  bottom: -8px;
  background: #1892DE;
  border-radius: 50%;
}
#ranking .toolBar .backPage {
  background-image: url('../img/backarrow@3x.png');
  background-size: contain;
  border: none;
  width: 56px;
  height: 24px;
}
#ranking .toolBar .rule {
  background-image: url('../img/left@2x.png'), url('../img/mid@2x.png'), url('../img/right@2x.png');
  background-size: contain, calc( 100% - 18px ) 100%, contain;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left, 6px, right;
  border: none;
  width: 60px;
  height: 24px;
  color: #fff;
  margin-right: 5px;
}
#ranking .rankingInfo {
  width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 53px;
  bottom: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#ranking .rankingInfo .rankWrapper {
  width: 95%;
  margin: 0 auto;
}
#ranking .rankingInfo .rankWrapper .index {
  background-color: #FFCB39;
  height: 68px;
  color: #B58629;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  border-radius: 0 0 20px 0;
  position: relative;
}
#ranking .rankingInfo .rankWrapper .index:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  right: -10px;
  background-image: radial-gradient(10px at 10px 10px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 10px, #FFCB39 10px, #FFCB39 10px, #FFCB39 100px);
}
#ranking .rankingInfo .rankWrapper .index span:first-child {
  position: relative;
  font-size: 40px;
  bottom: 4px;
}
#ranking .rankingInfo .rankWrapper .index span:last-child {
  position: relative;
  bottom: 6px;
}
#ranking .rankingInfo .rankWrapper .info {
  padding-left: 20px;
}
#ranking .rankingInfo .rankWrapper .info .name {
  font-size: 18px;
  color: #083C5A;
  padding-top: 5px;
}
#ranking .rankingInfo .rankWrapper .info .levelInfo {
  color: #C8C8C8;
  line-height: 14px;
  margin: 2px 0 5px 0;
}
#ranking .rankingInfo .rankWrapper .info .totalScore {
  padding-left: 18px;
  color: #B58629;
  background-image: url('../img/icon_star_yellow@3x.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}
#ranking .rankingInfo .rankWrapper .myData {
  width: 100%;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.06) 0 5px 10px;
  border-radius: 8px 10px 10px 10px;
  margin-bottom: 18px;
  overflow: hidden;
}
#ranking .rankingInfo .rankWrapper .myData .myDataInfo {
  display: flex;
  display: -webkit-flex;
  position: relative;
}
#ranking .rankingInfo .rankWrapper .myData .myDataInfo .showChart {
  position: absolute;
  right: 0;
  width: 68px;
  text-align: center;
  line-height: 73px;
}
#ranking .rankingInfo .rankWrapper .myData .myDataInfo .showChart i {
  display: inline-block;
  transition: transform 0.38s;
  transform: translateZ(0) rotate(0deg);
  -webkit-transition: -webkit-transform 0.38s;
  -webkit-transform: translateZ(0) rotate(0deg);
  color: #B58629;
}
#ranking .rankingInfo .rankWrapper .myData .myDataInfo .showChart i.show {
  transform: translateZ(0) rotate(-180deg);
  -webkit-transform: translateZ(0) rotate(-180deg);
}
#ranking .rankingInfo .rankWrapper .myData .myDataChart {
  height: 0;
  transition: height 0.38s;
  -webkit-transition: height 0.38s;
}
#ranking .rankingInfo .rankWrapper .myData .myDataChart.show {
  height: 200px;
}
#ranking .rankingInfo .rankWrapper .myData .myDataChart .title {
  width: 100%;
  height: 50px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
}
#ranking .rankingInfo .rankWrapper .myData .myDataChart .title .titleItem {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  font-size: 12px;
}
#ranking .rankingInfo .rankWrapper .myData .myDataChart .title .titleItem span {
  flex: 1;
  -webkit-flex: 1;
  text-align: center;
  line-height: 25px;
  color: #ADADAD;
}
#ranking .rankingInfo .rankWrapper .myData .myDataChart .title .titleItem span.number {
  color: #84A2D6;
  font-size: 16px;
}
#ranking .rankingInfo .rankWrapper .myData .myDataChart .charts {
  width: 100%;
  height: 150px;
}
#ranking .rankingInfo .rankWrapper .rankingList .single {
  width: 100%;
  height: 73px;
  background-color: #fff;
  border-radius: 8px 10px 10px 10px;
  margin-bottom: 4px;
  overflow: hidden;
  display: flex;
  display: -webkit-flex;
  position: relative;
}
#ranking .rankingInfo .rankWrapper .rankingList .single:nth-child(1) .medal {
  background-image: url('../img/1th@3x.png');
}
#ranking .rankingInfo .rankWrapper .rankingList .single:nth-child(2) .medal {
  background-image: url('../img/2th@3x.png');
}
#ranking .rankingInfo .rankWrapper .rankingList .single:nth-child(3) .medal {
  background-image: url('../img/3th@3x.png');
}
#ranking .rankingInfo .rankWrapper .rankingList .medal {
  width: 26px;
  height: 34px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -17px;
}
#rule .toolBar .backPage {
  background-image: url('../img/backarrow@3x.png');
  background-size: contain;
  border: none;
  width: 56px;
  height: 24px;
}
#rule .ruleTitle {
  width: calc(100% - 24px);
  height: 90px;
  margin: 13px auto 0 auto;
  background-color: #fff;
  border-radius: 8px;
  position: relative;
  box-shadow: inset #F6F6F6 0 -12px 0 0;
}
#rule .ruleTitle h1 {
  padding: 25px 0 0 20px;
  font-size: 28px;
  color: #84A2D6;
}
#rule .ruleTitle .character {
  position: absolute;
  right: 0;
  top: 10px;
  width: 140px;
  height: 56px;
  background-image: url('../img/grade1_smile.png'), url('../img/grade2_smile.png'), url('../img/grade3_smile.png');
  background-repeat: no-repeat;
  background-size: 50px auto;
  background-position: 0px 20px, 40px 0px, 80px 5px;
}
#rule .ruleTitle .character .podium {
  position: absolute;
  width: 40px;
  background-color: #F6F6F6;
  bottom: -20px;
}
#rule .ruleTitle .character .podium:nth-child(1) {
  left: 0;
  height: 20px;
}
#rule .ruleTitle .character .podium:nth-child(2) {
  left: 40px;
  height: 40px;
}
#rule .ruleTitle .character .podium:nth-child(3) {
  left: 80px;
  height: 30px;
}
#rule .ruleContent {
  width: calc(100% - 24px);
  height: calc(100% - 230px);
  margin: 10px 12px;
  background-color: #fff;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: center;
  -webkit-justify-content: center;
}
#rule .ruleContent ul li {
  font-size: 16px;
  line-height: 68px;
  background-image: url('../img/icon_star_yellow@3x.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 30px;
  margin-left: 40px;
  padding-left: 40px;
}
#rule button.OK {
  width: calc(100% - 24px);
  height: 50px;
  border-radius: 15px;
  color: #84A2D6;
  font-size: 22px;
  border: none;
  margin: 0 12px;
  background-color: #fff;
  box-shadow: 1px 2px 0px 0px rgba(102, 202, 215, 0.5);
}
#rule button.OK:active {
  background-color: #84A2D6;
  color: #fff;
}