@charset "UTF-8";
@import url("../iconfont/iconfont.css");
@import url("../layui/css/layui.css");
@import url("swiper.min.css");
@font-face {
  font-family: 'pinyin';
  src: url("../typeface/pingyin.ttf"); }

* {
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  -o-user-select: none;
  user-select: none;
  box-sizing: border-box; }

input[type="text"] {
  -webkit-user-select: text; }

input::-webkit-input-placeholder {
  color: #ccc; }

input::moz-input-placeholder {
  color: #ccc; }

input:ms-input-placeholder {
  color: #ccc; }

select {
  -webkit-user-select: text; }

html {
  background: url(../images/bg-b.png) center bottom no-repeat, linear-gradient(180deg, #108BFF 0%, #39B8FF 100%);
  min-height: 100%; }

body {
  font-family: Arial,sans-serif;
  font-size: 18px;
  line-height: 1.5;
  padding-bottom: 112px;
  background-image: url(../images/bg-t.png), url(../images/bg-tr.png);
  background-position: center top,right top;
  background-repeat: no-repeat;
  color: #333; }

.wrapper {
  position: relative; }

ul, li, ol {
  list-style: none; }

i, em {
  font-style: normal; }

img {
  border: none;
  margin: 0px;
  padding: 0px;
  max-width: 100%; }

a {
  text-decoration: none;
  color: #333; }

a:hover {
  text-decoration: none;
  color: #333; }

/*clear*/
.cl:after {
  content: " ";
  width: 0;
  height: 0;
  clear: both;
  display: block;
  visibility: hidden;
  font-size: 0; }

/*flost style*/
.l {
  float: left; }

.r {
  float: right; }

.wp {
  width: 1180px;
  margin: 0 auto; }

.h-left {
  position: relative;
  flex: 1; }
  .h-left a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center; }
  .h-left .line {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.32);
    margin: 8px 12px; }
  .h-left .logoText {
    font-size: 26px;
    color: #fff;
    font-family: "標楷體", "STKaiti", "KaiTi";
    position: relative; }
    .h-left .logoText .ltInner {
      border-radius: 8px;
      position: absolute;
      z-index: 99;
      padding: 8px 12px;
      top: 0;
      width: 132px; }
    .h-left .logoText .ltitem {
      height: 44px;
      line-height: 44px;
      position: relative; }
    .h-left .logoText .ltSub {
      display: none;
      margin-top: 4px; }
    .h-left .logoText .ltButton {
      cursor: pointer; }
    .h-left .logoText .icfont {
      font-size: 24px;
      margin-left: 4px; }
  .h-left .logoTextClick .ltInner {
    color: #1E92FF;
    background: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
    background: #fff; }
  .h-left .logoTextClick .ltSub {
    display: block; }

.container {
  min-height: 660px;
  position: relative; }

.header {
  height: 112px;
  position: relative; }
  .header .wp {
    position: relative;
    align-items: flex-start; }

.login-wrap .header .wp {
  width: 960px; }

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center; }

.space-between {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

.justify-center {
  -webkit-box-pack: justify;
  -webkit-justify-content: center;
  justify-content: center; }

.justify-right {
  -webkit-box-pack: justify;
  -webkit-justify-content: flex-end;
  justify-content: flex-end; }

.layout {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto; }

.column {
  display: flex;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between; }

.stretch {
  align-items: stretch; }

/*头部模块*/
.tool-mod {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px; }
  .tool-mod .btn {
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 16px; }
    .tool-mod .btn a {
      color: #fff;
      font-size: 16px; }
  .tool-mod .backpthweb .icfont {
    font-size: 24px; }
  .tool-mod .backpthweb a {
    padding: 0 16px; }
  .tool-mod .topUser {
    border-left: 1px solid rgba(255, 255, 255, 0.4); }
    .tool-mod .topUser ul {
      padding: 0 16px; }

/* zch 20260301 demo版本增加 “立即購買”按鈕 */
.header .buyTips a{
    height: 40px;
    line-height: 40px;
    margin-right: 5px; 
    color: #f3f8f7;
    font-size: 24px; }

  
  
/*footer*/
.footer {
  position: relative;
  margin-top: 32px;
  text-align: center;
  color: #fff; }
  .footer a {
    text-decoration: none;
    color: #ffffff;
    padding: 0 4px;
    font-size: 16px; }

/*顶部导航*/
.menu-wrap {
  position: absolute;
  top: 22px;
  right: 50%;
  width: 424px;
  margin-right: -310px; }
  .menu-wrap .item {
    width: 240px;
    border-radius: 16px 16px 0 0;
    text-align: center;
    margin: 0 12px; }
    .menu-wrap .item:first-child {
      width: 180px; }
    .menu-wrap .item a {
      color: #fff;
      display: block;
      padding: 8px 0; }
    .menu-wrap .item b {
      display: block;
      font-size: 24px; }
    .menu-wrap .item span {
      display: block;
      font-size: 14px; }
  .menu-wrap .active {
    background: linear-gradient(to bottom, rgba(252, 251, 231, 0.16) 0%, rgba(255, 255, 255, 0) 100%);
    font-weight: bold; }
  .menu-wrap .backItem {
    margin-left: 40px;
    margin-top: 14px;
    float: right; }
    .menu-wrap .backItem a {
      display: block;
      width: 164px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      font-size: 20px; }
    .menu-wrap .backItem .icfont {
      font-size: 32px;
      width: 32px;
      height: 32px;
      float: left;
      line-height: 32px;
      margin: 4px 4px 4px 16px; }

.container {
  background: #fff;
  border-radius: 24px;
  padding: 24px; }

/*登录*/
.login-wrapper .header {
  width: 960px; }
  .login-wrapper .header .tool-mod {
    border: none; }
    .login-wrapper .header .tool-mod .btn {
      margin-right: 20px; }
      .login-wrapper .header .tool-mod .btn .link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.24);
        font-size: 18px;
        color: #fff; }
        .login-wrapper .header .tool-mod .btn .link .icfont {
          margin-right: 4px;
          font-size: 20px; }
    .login-wrapper .header .tool-mod .lang {
      position: relative;
      overflow: hidden;
      background: #fff;
      border-radius: 18px;
      padding: 2px; }
      .login-wrapper .header .tool-mod .lang li {
        float: left; }
        .login-wrapper .header .tool-mod .lang li a {
          width: 48px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          font-size: 18px;
          display: block;
          border-radius: 16px; }
      .login-wrapper .header .tool-mod .lang .active a {
        background: #1E92FF;
        color: #fff; }

.login-wrapper .loginMain {
  width: 992px;
  height: 606px;
  margin: 0 auto;
  background: url(../images/logmainbg.png) no-repeat; }

.login-wrapper .info-content {
  width: 360px;
  margin: 64px 0 0 72px; }
  .login-wrapper .info-content h3 {
    font-size: 28px;
    color: #1C4459;
    font-weight: bold;
    text-align: center;
    line-height: 1.6; }
  .login-wrapper .info-content .cont {
    margin-top: 16px; }
    .login-wrapper .info-content .cont p {
      padding: 8px 0;
      font-size: 18px;
      color: #1C4459;
      text-indent: 2em;
      line-height: 1.8; }

.login-wrapper .login-content {
  background: #fff;
  width: 340px;
  height: 460px;
  border: 6px solid #FDD444;
  border-radius: 24px;
  margin: 64px 80px 0 0; }
  .login-wrapper .login-content .tit {
    padding-top: 32px;
    text-align: center;
    font-size: 22px; }
  .login-wrapper .login-content .form {
    margin: 40px 40px 0; }
    .login-wrapper .login-content .form .item {
      padding-top: 24px; }
      .login-wrapper .login-content .form .item:first-child {
        padding: 0; }
      .login-wrapper .login-content .form .item label {
        font-size: 18px;
        padding: 0 8px; }
      .login-wrapper .login-content .form .item .item-input {
        background: #F7FCFF;
        height: 48px;
        border-radius: 8px;
        padding: 0 16px;
        margin-top: 12px; }
        .login-wrapper .login-content .form .item .item-input input {
          display: block;
          height: 48px;
          border: none;
          font-size: 18px;
          width: 100%;
          background: transparent;
          user-select: text;
          -webkit-user-select: text; }
    .login-wrapper .login-content .form .btnLogin {
      margin-top: 32px; }
      .login-wrapper .login-content .form .btnLogin a {
        height: 48px;
        display: block;
        line-height: 48px;
        background: #FF7246;
        border-radius: 8px;
        text-align: center;
        font-size: 18px;
        color: #fff; }
    .login-wrapper .login-content .form .forget {
      margin-top: 12px;
      position: relative;
      overflow: hidden; }

.home-wrapper .container {
  background: #FEF3E2;
  border-radius: 24px;
  padding: 16px;
  min-height: auto; }
  .home-wrapper .container .row-box {
    background: #fff;
    border-radius: 16px; }
  .home-wrapper .container .row-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 12px; }
    .home-wrapper .container .row-top .row-box {
      text-align: center;
      padding: 24px 24px 36px; }
      .home-wrapper .container .row-top .row-box .number {
        color: #666;
        margin-top: 20px;
        font-size: 18px; }
      .home-wrapper .container .row-top .row-box .mastertit {
        font-family: 'Noto Serif SC',serif;
        font-size: 28px;
        font-weight: 900; }
      .home-wrapper .container .row-top .row-box .subtit {
        font-size: 24px;
        position: relative; }
        .home-wrapper .container .row-top .row-box .subtit i {
          width: 16px;
          height: 1px;
          background: #87BF0E;
          opacity: .6;
          margin: 0 4px; }
      .home-wrapper .container .row-top .row-box .link {
        width: 222px;
        height: 48px;
        font-size: 20px;
        margin: 24px auto 0;
        border-radius: 24px; }
        .home-wrapper .container .row-top .row-box .link a {
          display: block;
          line-height: 48px;
          text-align: center;
          color: #fff;
          font-weight: 600; }
      .home-wrapper .container .row-top .row-box:nth-child(1) .mastertit, .home-wrapper .container .row-top .row-box:nth-child(1) .subtit {
        color: #FF7B01; }
      .home-wrapper .container .row-top .row-box:nth-child(1) .link {
        background: #FF7B01; }
      .home-wrapper .container .row-top .row-box:nth-child(2) .mastertit, .home-wrapper .container .row-top .row-box:nth-child(2) .subtit {
        color: #87BF0E; }
      .home-wrapper .container .row-top .row-box:nth-child(2) .link {
        background: #87BF0E; }
      .home-wrapper .container .row-top .row-box:nth-child(3) .mastertit, .home-wrapper .container .row-top .row-box:nth-child(3) .subtit {
        color: #3E86FF; }
      .home-wrapper .container .row-top .row-box:nth-child(3) .link {
        background: #3E86FF; }
  .home-wrapper .container .row-bot {
    margin-top: 12px; }
    .home-wrapper .container .row-bot .row-box {
      padding: 8px 32px; }
      .home-wrapper .container .row-bot .row-box .con {
        margin-left: 24px; }
        .home-wrapper .container .row-bot .row-box .con .mastertit {
          font-family: 'Noto Serif SC',serif;
          font-size: 30px;
          font-weight: 900; }
        .home-wrapper .container .row-bot .row-box .con .subtit {
          font-size: 20px;
          color: #454545;
          margin-left: 16px; }

.letterMenu {
  height: 64px;
  border-radius: 24px 24px 0 0;
  background: #FFD85F; }
  .letterMenu .item {
    flex: 1;
    margin-top: -7px;
    text-align: center;
    position: relative; }
    .letterMenu .item a {
      width: 286px;
      display: block;
      height: 71px;
      margin: 0 auto; }
    .letterMenu .item .tag, .letterMenu .item .name {
      display: block; }
    .letterMenu .item .tag {
      font-size: 16px;
      padding-top: 12px; }
    .letterMenu .item .name {
      font-size: 24px;
      line-height: 1.2; }
  .letterMenu .active a {
    background: url(../images/letteronbg.png) no-repeat center top; }
  .letterMenu .active .tag, .letterMenu .active .name {
    font-weight: bold;
    color: #fff; }
  .letterMenu .active .tag {
    padding-top: 8px; }
  .letterMenu .onClock {
    opacity: .48; }
    .letterMenu .onClock::after {
      content: "";
      width: 100%;
      height: 72px;
      background-image: url(../images/icon_suo.png);
      background-size: 40px 40px;
      background-repeat: no-repeat;
      background-position: 72% 55%;
      border-radius: 6px;
      position: absolute;
      top: -1px;
      left: -1px;
      z-index: 9;
      opacity: .72; }

.noRead_pop_wrap {
  border-radius: 24px !important; }
  .noRead_pop_wrap .layui-layer-content {
    padding: 32px 36px 12px;
    font-size: 24px; }
    .noRead_pop_wrap .layui-layer-content .tips {
      font-size: 24px; }
  .noRead_pop_wrap .layui-layer-btn {
    padding: 0 24px 24px; }
    .noRead_pop_wrap .layui-layer-btn a {
      line-height: 40px;
      height: 40px;
      display: block;
      border-radius: 8px;
      margin-top: 12px; }

.letterMain {
  padding: 24px; }

.letter-wrapper .container, .pinyin-wrapper .container {
  background: #FFF8EE;
  border-radius: 24px;
  padding: 0;
  min-height: 667px; }

.playaudio {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  text-align: center;
  line-height: 48px;
  cursor: pointer; }
  .playaudio .icfont {
    font-size: 32px; }

.playaudio.playing .icfont::before {
  content: "\e68b"; }

.container-all .title .tit {
  font-size: 24px;
  font-weight: bold; }

.container-all .title .btn-audio {
  background: #FF7246;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  display: block;
  text-align: center;
  margin-left: 8px;
  cursor: pointer; }
  .container-all .title .btn-audio .icfont {
    color: #fff;
    font-size: 24px; }

.container-all .title .btn-audio.playing .icfont::before {
  content: "\e68b"; }

.container-all .opt-buttons .btn {
  height: 48px;
  border-radius: 16px;
  background: #C6E8F8;
  padding: 0 16px;
  font-size: 20px;
  line-height: 48px;
  color: #0F76A6;
  cursor: pointer; }
  .container-all .opt-buttons .btn .icfont {
    font-size: 24px; }

.container-all .opt-buttons .btn + .btn {
  margin-left: 16px; }

.container-all .letterall-table {
  margin-top: 16px; }
  .container-all .letterall-table .tablerow {
    border-radius: 16px;
    position: relative; }
    .container-all .letterall-table .tablerow .name {
      width: 112px;
      text-align: center;
      padding: 12px 0; }
      .container-all .letterall-table .tablerow .name b {
        display: block;
        font-size: 36px;
        font-weight: bold;
        margin: 0 24px;
        line-height: 1.2; }
      .container-all .letterall-table .tablerow .name span {
        display: block;
        font-size: 16px; }
    .container-all .letterall-table .tablerow .tablemain {
      flex: 1;
      padding: 12px 56px 12px 24px;
      margin: 2px;
      border-radius: 48px 112px 16px 48px; }
      .container-all .letterall-table .tablerow .tablemain .letterzm {
        font-size: 36px;
        font-family: "pinyin";
        border-bottom: 1px solid #5FDEBD;
        position: relative;
        text-align: center;
        margin-top: -1px; }
        .container-all .letterall-table .tablerow .tablemain .letterzm .word {
          position: relative;
          z-index: 5;
          display: block; }
      .container-all .letterall-table .tablerow .tablemain .letterzmOn {
        color: #009870; }
    .container-all .letterall-table .tablerow .playaudio {
      position: absolute;
      width: 48px;
      height: 48px;
      border-radius: 24px;
      top: 12px;
      right: 12px;
      text-align: center;
      line-height: 48px;
      cursor: pointer; }
      .container-all .letterall-table .tablerow .playaudio .icfont {
        color: #fff;
        font-size: 32px; }
  .container-all .letterall-table .tablerow + .tablerow {
    margin-top: 16px; }
  .container-all .letterall-table .table-sm {
    background: #78F6D5; }
    .container-all .letterall-table .table-sm .name {
      color: #009870; }
    .container-all .letterall-table .table-sm .tablemain {
      background: #EFFFFB; }
      .container-all .letterall-table .table-sm .tablemain .letterzm .word {
        width: 100px;
        height: 72px;
        line-height: 70px; }
      .container-all .letterall-table .table-sm .tablemain .letterzm-f::after, .container-all .letterall-table .table-sm .tablemain .letterzm-h::after, .container-all .letterall-table .table-sm .tablemain .letterzm-r::after, .container-all .letterall-table .table-sm .tablemain .letterzm-s::after, .container-all .letterall-table .table-sm .tablemain .letterzm-x::after {
        content: "";
        width: 100px;
        height: 72px;
        display: inline-block; }
      .container-all .letterall-table .table-sm .tablemain .letterzm-j::before {
        content: "";
        width: 100px;
        height: 72px;
        display: inline-block; }
      .container-all .letterall-table .table-sm .tablemain .letterzm-zh, .container-all .letterall-table .table-sm .tablemain .letterzm-ch, .container-all .letterall-table .table-sm .tablemain .letterzm-sh, .container-all .letterall-table .table-sm .tablemain .letterzm-r, .container-all .letterall-table .table-sm .tablemain .letterzm-z, .container-all .letterall-table .table-sm .tablemain .letterzm-c, .container-all .letterall-table .table-sm .tablemain .letterzm-s {
        border: none; }
    .container-all .letterall-table .table-sm .playaudio {
      background: #53DEBA; }
  .container-all .letterall-table .table-ym {
    background: #93EB8B; }
    .container-all .letterall-table .table-ym .name {
      color: #289F1E; }
    .container-all .letterall-table .table-ym .tablemain {
      background: #EFFFFB; }
      .container-all .letterall-table .table-ym .tablemain .letterzm .word {
        width: 225px;
        height: 56px;
        line-height: 56px; }
      .container-all .letterall-table .table-ym .tablemain .letterzm-ua::after, .container-all .letterall-table .table-ym .tablemain .letterzm-o::after, .container-all .letterall-table .table-ym .tablemain .letterzm-uo::after, .container-all .letterall-table .table-ym .tablemain .letterzm-ie::after, .container-all .letterall-table .table-ym .tablemain .letterzm-ai::after, .container-all .letterall-table .table-ym .tablemain .letterzm-uai::after,
      .container-all .letterall-table .table-ym .tablemain .letterzm-ei::after, .container-all .letterall-table .table-ym .tablemain .letterzm-uei::after, .container-all .letterall-table .table-ym .tablemain .letterzm-iao::after, .container-all .letterall-table .table-ym .tablemain .letterzm-iao::after, .container-all .letterall-table .table-ym .tablemain .letterzm-uang::after, .container-all .letterall-table .table-ym .tablemain .letterzm-ueng::after {
        content: "";
        width: 225px;
        height: 56px;
        display: inline-block; }
      .container-all .letterall-table .table-ym .tablemain .letterzm-iao::after, .container-all .letterall-table .table-ym .tablemain .letterzm-iou::after {
        content: "";
        width: 450px;
        height: 56px;
        display: inline-block; }
      .container-all .letterall-table .table-ym .tablemain .letterzm-i::before {
        content: "";
        width: 225px;
        height: 72px;
        display: inline-block; }
      .container-all .letterall-table .table-ym .tablemain .letterzm-ong, .container-all .letterall-table .table-ym .tablemain .letterzm-iong {
        border: none; }
    .container-all .letterall-table .table-ym .playaudio {
      background: #73DA6A; }

.playAudioCom {
  position: absolute;
  opacity: 0; }

.popup-wrapper .title .tit {
  font-size: 28px;
  font-weight: bold; }

.popup-wrapper .title .close a {
  text-align: center;
  display: block;
  color: #FF7246;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #FF7246; }

.popup-wrapper .title .close .icfont {
  line-height: 38px;
  font-size: 24px; }

.popup-wrapper .content {
  margin-top: 16px; }

.container-sm .letterzm .inner, .container-ym .letterzm .inner {
  margin: 12px;
  width: 184px;
  border: 2px solid #45DA81;
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  position: relative; }

.container-sm .letterzm .word, .container-ym .letterzm .word {
  flex: 1;
  font-size: 36px;
  font-family: "pinyin";
  height: 88px;
  position: relative;
  text-align: center; }
  .container-sm .letterzm .word::after, .container-sm .letterzm .word::before, .container-ym .letterzm .word::after, .container-ym .letterzm .word::before {
    content: "";
    position: absolute;
    left: 0;
    height: 0px;
    width: 100%; }
  .container-sm .letterzm .word::after, .container-ym .letterzm .word::after {
    border-top: 1px dashed #87EED3;
    top: 29px; }
  .container-sm .letterzm .word::before, .container-ym .letterzm .word::before {
    border-bottom: 1px dashed #87EED3;
    bottom: 29px; }
  .container-sm .letterzm .word span, .container-ym .letterzm .word span {
    position: relative;
    z-index: 9;
    display: block;
    height: 88px;
    padding: 0 1px; }
    .container-sm .letterzm .word span:hover::after, .container-ym .letterzm .word span:hover::after {
      content: "\e684";
      font-family: "icfont" !important;
      position: absolute;
      top: 2px;
      right: 4px;
      font-size: 20px;
      line-height: 24px;
      width: 24px;
      height: 24px;
      text-align: center;
      color: #FF7246;
      background: #fff;
      border-radius: 12px; }
  .container-sm .letterzm .word .lowercase, .container-ym .letterzm .word .lowercase {
    font-size: 56px;
    line-height: 78px; }

.container-sm .letterzm .wside, .container-ym .letterzm .wside {
  width: 56px;
  border-left: 1px solid #76E7A3;
  color: #04672C; }
  .container-sm .letterzm .wside .zhuyin, .container-sm .letterzm .wside .hanzi, .container-ym .letterzm .wside .zhuyin, .container-ym .letterzm .wside .hanzi {
    height: 44px;
    text-align: center;
    line-height: 44px;
    font-size: 24px; }
  .container-sm .letterzm .wside .zhuyin, .container-ym .letterzm .wside .zhuyin {
    font-family: "標楷體", "STKaiti", "KaiTi"; }
  .container-sm .letterzm .wside .hanzi, .container-ym .letterzm .wside .hanzi {
    border-top: 1px solid #76E7A3; }
    .container-sm .letterzm .wside .hanzi:hover::after, .container-ym .letterzm .wside .hanzi:hover::after {
      content: "\e690";
      font-family: "icfont" !important;
      position: absolute;
      bottom: -4px;
      right: -4px;
      font-size: 18px;
      line-height: 24px;
      width: 24px;
      height: 24px;
      text-align: center;
      color: #FF7246;
      background: #fff;
      border-radius: 12px; }

.container-sm .letterzmOn, .container-ym .letterzmOn {
  color: #009870; }
  .container-sm .letterzmOn .inner, .container-ym .letterzmOn .inner {
    background: #45DA81; }
    .container-sm .letterzmOn .inner::after, .container-ym .letterzmOn .inner::after {
      content: '\e684';
      font-family: "icfont" !important;
      width: 32px;
      height: 32px;
      background: #FF7246;
      color: #fff;
      font-size: 24px;
      position: absolute;
      top: 50%;
      margin-top: -16px;
      margin-left: -16px;
      border-radius: 16px;
      text-align: center;
      line-height: 32px; }
  .container-sm .letterzmOn .word, .container-ym .letterzmOn .word {
    color: #fff; }
    .container-sm .letterzmOn .word span:hover::after, .container-ym .letterzmOn .word span:hover::after {
      display: none; }
  .container-sm .letterzmOn .wside, .container-ym .letterzmOn .wside {
    color: #fff; }

.container-sm .letterzm-ɡ, .container-sm .letterzm-j, .container-sm .letterzm-z, .container-ym .letterzm-ɡ, .container-ym .letterzm-j, .container-ym .letterzm-z {
  margin-left: 110px; }

.container-sm .letterzm-hard .inner, .container-ym .letterzm-hard .inner {
  background: #FF8282;
  border: 2px solid #FF8282; }

.container-sm .letterzm-hard .word::after, .container-ym .letterzm-hard .word::after {
  border-top: 1px dashed #FFF8EE; }

.container-sm .letterzm-hard .word::before, .container-ym .letterzm-hard .word::before {
  border-bottom: 1px dashed rgba(255, 248, 238, 0.6); }

.container-sm .letterzm-hard .word span, .container-ym .letterzm-hard .word span {
  color: #fff; }

.container-sm .letterzm-hard .wside, .container-ym .letterzm-hard .wside {
  border-left: 1px solid rgba(255, 248, 238, 0.6);
  color: #fff; }
  .container-sm .letterzm-hard .wside .hanzi, .container-ym .letterzm-hard .wside .hanzi {
    border-top: 1px solid rgba(255, 248, 238, 0.6); }

.letterzmOn {
  color: #009870; }

.container-ym .tablemain {
  border: 1px solid #F6E1C9;
  border-radius: 16px;
  width: 842px;
  position: relative;
  overflow: hidden; }

.container-ym .letterzm {
  border-left: 1px solid #F6E1C9;
  border-bottom: 1px solid #F6E1C9;
  margin-left: -1px; }
  .container-ym .letterzm .inner {
    margin: 12px 13px; }
  .container-ym .letterzm .wside .zhuyin, .container-ym .letterzm .wside .hanzi {
    font-size: 22px; }

.container-ym .letterzm-i::before {
  content: '';
  width: 209px;
  display: block;
  height: 116px;
  border-right: 1px solid #F6E1C9; }

.container-ym .letterzm-ua::after, .container-ym .letterzm-o::after, .container-ym .letterzm-uo::after, .container-ym .letterzm-ie::after, .container-ym .letterzm-ai::after, .container-ym .letterzm-uai::after,
.container-ym .letterzm-ei::after, .container-ym .letterzm-uei::after, .container-ym .letterzm-iao::after, .container-ym .letterzm-iao::after, .container-ym .letterzm-uang::after, .container-ym .letterzm-ueng::after {
  content: '';
  width: 210px;
  display: block;
  height: 116px;
  border-left: 1px solid #F6E1C9;
  margin-left: -1px; }

.container-ym .letterzm-iao::after, .container-ym .letterzm-iou::after, .container-ym .letterzm-iong::after {
  content: '';
  width: 210px;
  display: block;
  height: 116px;
  border-left: 1px solid #F6E1C9;
  border-right: 1px solid #F6E1C9;
  margin-left: -1px;
  margin-right: 209px; }

.container-ym .hardmain .title .tit {
  font-size: 24px;
  font-weight: bold; }

.container-ym .hardmain .title .fullbtn {
  font-size: 16px;
  color: #1E92FF;
  width: 160px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  justify-content: center;
  cursor: pointer; }
  .container-ym .hardmain .title .fullbtn .icfont {
    font-size: 24px;
    margin-right: 4px; }

.container-ym .hardmain .box-row {
  background: #fff;
  border-radius: 16px;
  margin-top: 12px; }
  .container-ym .hardmain .box-row .larray {
    width: 64px;
    border-radius: 16px 0 96px 16px;
    background: #FFF1C6;
    position: relative; }
    .container-ym .hardmain .box-row .larray .num {
      font-size: 32px;
      font-weight: bold;
      color: #FF9A23;
      text-align: center;
      margin-top: 16px; }
    .container-ym .hardmain .box-row .larray .playaudio {
      background: #FF9A23;
      width: 36px;
      height: 36px;
      border-radius: 18px;
      text-align: center;
      line-height: 36px;
      bottom: 16px;
      right: -8px;
      position: absolute; }
      .container-ym .hardmain .box-row .larray .playaudio .icfont {
        font-size: 24px;
        color: #fff; }
  .container-ym .hardmain .box-row .rmain {
    flex: 1;
    padding: 8px 24px 4px 24px; }
    .container-ym .hardmain .box-row .rmain .title {
      font-size: 16px;
      color: #F98F14; }
    .container-ym .hardmain .box-row .rmain .listTable {
      margin-top: 4px; }
  .container-ym .hardmain .box-row .itemCol {
    margin-right: 16px; }
    .container-ym .hardmain .box-row .itemCol .letternd {
      margin-bottom: 12px; }
    .container-ym .hardmain .box-row .itemCol .letternd + .letternd {
      margin-left: -1px; }
    .container-ym .hardmain .box-row .itemCol .word {
      font-size: 40px;
      font-family: "pinyin";
      border: 1px solid #4ABAED;
      height: 56px;
      position: relative;
      background: #E7F6FF;
      min-width: 112px;
      text-align: center;
      cursor: pointer; }
      .container-ym .hardmain .box-row .itemCol .word::after, .container-ym .hardmain .box-row .itemCol .word::before {
        content: "";
        position: absolute;
        left: 0;
        height: 0px;
        width: 100%; }
      .container-ym .hardmain .box-row .itemCol .word::after {
        border-top: 1px dashed rgba(74, 186, 237, 0.6);
        top: 16px; }
      .container-ym .hardmain .box-row .itemCol .word::before {
        border-bottom: 1px dashed rgba(74, 186, 237, 0.6);
        bottom: 16px; }
      .container-ym .hardmain .box-row .itemCol .word span {
        position: relative;
        z-index: 9;
        display: block;
        height: 56px;
        padding: 0 12px; }
        .container-ym .hardmain .box-row .itemCol .word span:hover::after {
          content: "\e684";
          font-family: "icfont" !important;
          position: absolute;
          top: 2px;
          right: 4px;
          font-size: 20px;
          line-height: 24px;
          width: 24px;
          height: 24px;
          text-align: center;
          color: #FF7246;
          background: #fff;
          border-radius: 12px; }
      .container-ym .hardmain .box-row .itemCol .word .lowercase {
        line-height: 47px; }
    .container-ym .hardmain .box-row .itemCol .wside {
      text-align: center;
      margin-top: 4px;
      font-size: 20px; }
  .container-ym .hardmain .box-row .itemColOr .word {
    background: #FFEDE7;
    border: 1px solid #FFA182;
    color: #FF7246; }
    .container-ym .hardmain .box-row .itemColOr .word::after {
      border-top: 1px dashed #FFA182; }
    .container-ym .hardmain .box-row .itemColOr .word::before {
      border-bottom: 1px dashed #FFA182; }
  .container-ym .hardmain .box-row .itemColOr .word.letterzmOn {
    color: #ff0000; }

.container-ym .hardmainFull .tableHard {
  align-items: flex-start; }
  .container-ym .hardmainFull .tableHard .box-row-o {
    width: calc(50% - 6px); }

.container-ym .letterzm-eng .wside .hanzi, .container-ym .letterzm-ong .wside .hanzi {
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px; }

.letter-wrapper .container-alphaber, .letter-wrapper .container-treeTables {
  background: #fff;
  padding: 24px; }

.container-alphaber .title .tit, .container-treeTables .title .tit {
  font-size: 28px;
  font-weight: bold; }

.container-alphaber .title .close, .container-treeTables .title .close {
  text-align: center;
  display: block;
  color: #FF7246;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid #FF7246;
  cursor: pointer; }
  .container-alphaber .title .close .icfont, .container-treeTables .title .close .icfont {
    line-height: 38px;
    font-size: 24px; }

.container-alphaber .content, .container-treeTables .content {
  margin-top: 16px; }

.container-alphaber .wordtable, .alphabet-wrappers .wordtable {
  background: #EFFFFB;
  border-radius: 16px;
  padding: 0 22px 24px; }
  .container-alphaber .wordtable .letterzm, .alphabet-wrappers .wordtable .letterzm {
    width: 136px;
    text-align: center;
    margin-top: 24px; }
    .container-alphaber .wordtable .letterzm .word, .alphabet-wrappers .wordtable .letterzm .word {
      font-size: 36px;
      font-family: "pinyin";
      border-top: 1px solid #45DA81;
      border-bottom: 1px solid #45DA81;
      height: 64px;
      position: relative; }
      .container-alphaber .wordtable .letterzm .word::after, .container-alphaber .wordtable .letterzm .word::before, .alphabet-wrappers .wordtable .letterzm .word::after, .alphabet-wrappers .wordtable .letterzm .word::before {
        content: "";
        position: absolute;
        left: 0;
        height: 0px;
        width: 100%; }
      .container-alphaber .wordtable .letterzm .word::after, .alphabet-wrappers .wordtable .letterzm .word::after {
        border-top: 1px dashed #87EED3;
        top: 18px; }
      .container-alphaber .wordtable .letterzm .word::before, .alphabet-wrappers .wordtable .letterzm .word::before {
        border-bottom: 1px dashed #87EED3;
        bottom: 18px; }
      .container-alphaber .wordtable .letterzm .word span, .alphabet-wrappers .wordtable .letterzm .word span {
        position: relative;
        z-index: 9;
        display: block;
        height: 64px;
        padding: 0 1px; }
      .container-alphaber .wordtable .letterzm .word .upcase, .alphabet-wrappers .wordtable .letterzm .word .upcase {
        font-size: 62px;
        line-height: 48px; }
      .container-alphaber .wordtable .letterzm .word .lowercase, .alphabet-wrappers .wordtable .letterzm .word .lowercase {
        font-size: 50px;
        line-height: 56px; }
    .container-alphaber .wordtable .letterzm .zhuyin, .alphabet-wrappers .wordtable .letterzm .zhuyin {
      font-size: 24px;
      margin-top: 8px;
      font-family: "標楷體", "STKaiti", "KaiTi"; }
  .container-alphaber .wordtable .letterzm-v .word, .alphabet-wrappers .wordtable .letterzm-v .word {
    font-size: 36px;
    font-family: Arial; }
  .container-alphaber .wordtable .letterzm-v .zhuyin, .alphabet-wrappers .wordtable .letterzm-v .zhuyin {
    position: relative;
    font-size: 0; }
    .container-alphaber .wordtable .letterzm-v .zhuyin::after, .alphabet-wrappers .wordtable .letterzm-v .zhuyin::after {
      content: "\e6c0";
      font-family: "icfont" !important;
      font-size: 22px;
      line-height: 36px; }

.container-alphaber .info, .alphabet-wrappers .info {
  margin-top: 16px; }

.letterzm-v .zhuyin {
  position: relative;
  font-size: 0 !important; }
  .letterzm-v .zhuyin::after {
    content: "\e6c0";
    font-family: "icfont" !important;
    font-size: 22px;
    line-height: 36px; }

.playdiv {
  height: 40px;
  border-radius: 20px;
  background: linear-gradient(to bottom, #70D3FF, #0EB0F6);
  padding-right: 16px;
  color: #fff;
  cursor: pointer;
  width: 110px; }
  .playdiv .playaudio {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background: #FDCC34;
    border-radius: 16px;
    margin: 0 8px; }
    .playdiv .playaudio .icfont {
      font-size: 24px;
      color: #fff; }

.explainTree-wrapper .content, .container-treeTables .content {
  background: #FFF8EE;
  border-radius: 16px;
  padding: 24px 16px;
  align-items: flex-start; }
  .explainTree-wrapper .content .treeTable, .container-treeTables .content .treeTable {
    flex: 1; }
  .explainTree-wrapper .content .textInfo, .container-treeTables .content .textInfo {
    width: 436px;
    margin-left: 24px;
    position: relative; }
    .explainTree-wrapper .content .textInfo .playdiv, .container-treeTables .content .textInfo .playdiv {
      position: absolute;
      top: -40px; }
    .explainTree-wrapper .content .textInfo p, .container-treeTables .content .textInfo p {
      font-size: 16px;
      line-height: 1.5;
      text-indent: 2em;
      margin-top: 8px;
      border-radius: 8px;
      padding: 8px 12px; }
    .explainTree-wrapper .content .textInfo .active, .container-treeTables .content .textInfo .active {
      background: #DDF5FF; }
  .explainTree-wrapper .content .tableMain, .container-treeTables .content .tableMain {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #fff; }
    .explainTree-wrapper .content .tableMain .tabTit, .container-treeTables .content .tableMain .tabTit {
      font-size: 20px;
      font-weight: bold; }
    .explainTree-wrapper .content .tableMain .tableCon, .container-treeTables .content .tableMain .tableCon {
      margin-top: 12px; }
      .explainTree-wrapper .content .tableMain .tableCon p, .container-treeTables .content .tableMain .tableCon p {
        font-size: 16px;
        line-height: 1.5; }
      .explainTree-wrapper .content .tableMain .tableCon p + p, .container-treeTables .content .tableMain .tableCon p + p {
        margin-top: 8px; }
      .explainTree-wrapper .content .tableMain .tableCon .letterzm, .container-treeTables .content .tableMain .tableCon .letterzm {
        width: 60px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 8px;
        margin: 4px;
        color: #fff; }
  .explainTree-wrapper .content .tableSM, .explainTree-wrapper .content .tableYM, .container-treeTables .content .tableSM, .container-treeTables .content .tableYM {
    padding: 16px 12px; }
  .explainTree-wrapper .content .tableSM .tabTit, .container-treeTables .content .tableSM .tabTit {
    color: #2FCAA2;
    padding: 0 4px; }
  .explainTree-wrapper .content .tableSM .tableCon .letterzm, .container-treeTables .content .tableSM .tableCon .letterzm {
    background: #2FCAA2; }
  .explainTree-wrapper .content .tableYM .tabTit, .container-treeTables .content .tableYM .tabTit {
    color: #24B8D9;
    padding: 0 4px; }
  .explainTree-wrapper .content .tableYM .tableCon .letterzm, .container-treeTables .content .tableYM .tableCon .letterzm {
    background: #24B8D9; }
  .explainTree-wrapper .content .tableSD .tabTit, .container-treeTables .content .tableSD .tabTit {
    color: #FF9446;
    padding: 0 4px; }
  .explainTree-wrapper .content .tableSD .tableCon .letterzm, .container-treeTables .content .tableSD .tableCon .letterzm {
    background: #FF9446;
    width: 143px;
    height: 44px; }
    .explainTree-wrapper .content .tableSD .tableCon .letterzm .icfont, .container-treeTables .content .tableSD .tableCon .letterzm .icfont {
      height: 44px;
      line-height: 44px;
      font-size: 24px; }
  .explainTree-wrapper .content .tableLS .tabTit, .container-treeTables .content .tableLS .tabTit {
    color: #467AFF;
    padding: 0 4px; }
  .explainTree-wrapper .content .tableActive, .container-treeTables .content .tableActive {
    animation: flicker 1s 3;
    border: 1px solid #108BFF;
    background: #DDF5FF; }
  .explainTree-wrapper .content .tableMain + .tableMain, .container-treeTables .content .tableMain + .tableMain {
    margin-top: 16px; }

.explainTree-wrapper .contentFixed .textInfo .playdiv, .container-treeTables .contentFixed .textInfo .playdiv {
  position: fixed;
  top: 0; }

.explainTree-wrapper .orderButton, .container-treeTables .orderButton {
  margin-top: 16px; }
  .explainTree-wrapper .orderButton .button, .container-treeTables .orderButton .button {
    height: 48px;
    border-radius: 24px;
    padding: 0 24px;
    background: #C9EBFF;
    font-size: 20px;
    font-size: 500;
    color: #147FBD; }
    .explainTree-wrapper .orderButton .button .icfont, .container-treeTables .orderButton .button .icfont {
      font-size: 32px; }

@keyframes flicker {
  0% {
    border: 1px solid #108BFF;
    background: #DDF5FF; }
  50% {
    border: 1px solid #fff;
    background: #fff; }
  100% {
    border: 1px solid #108BFF;
    background: #DDF5FF; } }

.pinyinScheme-wrapper .box-row {
  padding: 0 8px;
  margin-top: 48px; }
  .pinyinScheme-wrapper .box-row .title {
    font-size: 28px;
    font-weight: bold;
    color: #04AD47; }

.pinyinScheme-wrapper .box-row + .box-row {
  margin-top: 48px; }

.pinyinScheme-wrapper .wordtable {
  margin: 12px 0; }

.pinyinScheme-wrapper .wordtableAll .letterzm, .pinyinScheme-wrapper .wordtableSM .letterzm {
  width: 124px;
  text-align: center;
  margin-bottom: 12px; }
  .pinyinScheme-wrapper .wordtableAll .letterzm .word, .pinyinScheme-wrapper .wordtableSM .letterzm .word {
    font-size: 36px;
    font-family: "pinyin";
    border-top: 1px solid #45DA81;
    border-bottom: 1px solid #45DA81;
    height: 64px;
    position: relative; }
    .pinyinScheme-wrapper .wordtableAll .letterzm .word::after, .pinyinScheme-wrapper .wordtableAll .letterzm .word::before, .pinyinScheme-wrapper .wordtableSM .letterzm .word::after, .pinyinScheme-wrapper .wordtableSM .letterzm .word::before {
      content: "";
      position: absolute;
      left: 0;
      height: 0px;
      width: 100%; }
    .pinyinScheme-wrapper .wordtableAll .letterzm .word::after, .pinyinScheme-wrapper .wordtableSM .letterzm .word::after {
      border-top: 1px dashed #87EED3;
      top: 19px; }
    .pinyinScheme-wrapper .wordtableAll .letterzm .word::before, .pinyinScheme-wrapper .wordtableSM .letterzm .word::before {
      border-bottom: 1px dashed #87EED3;
      bottom: 19px; }
    .pinyinScheme-wrapper .wordtableAll .letterzm .word span, .pinyinScheme-wrapper .wordtableSM .letterzm .word span {
      position: relative;
      z-index: 9;
      display: block;
      height: 64px;
      padding: 0 1px; }
    .pinyinScheme-wrapper .wordtableAll .letterzm .word .upcase, .pinyinScheme-wrapper .wordtableSM .letterzm .word .upcase {
      font-size: 60px;
      line-height: 48px; }
    .pinyinScheme-wrapper .wordtableAll .letterzm .word .lowercase, .pinyinScheme-wrapper .wordtableSM .letterzm .word .lowercase {
      font-size: 48px;
      line-height: 54px; }
  .pinyinScheme-wrapper .wordtableAll .letterzm .bot, .pinyinScheme-wrapper .wordtableSM .letterzm .bot {
    margin-top: 0; }
  .pinyinScheme-wrapper .wordtableAll .letterzm .zhuyin, .pinyinScheme-wrapper .wordtableAll .letterzm .hanzi, .pinyinScheme-wrapper .wordtableSM .letterzm .zhuyin, .pinyinScheme-wrapper .wordtableSM .letterzm .hanzi {
    font-size: 24px;
    font-family: "標楷體", "STKaiti", "KaiTi"; }
  .pinyinScheme-wrapper .wordtableAll .letterzm .hanzi, .pinyinScheme-wrapper .wordtableSM .letterzm .hanzi {
    margin-left: 4px;
    font-size: 24px;
    font-family: 'NSimSun'; }

.pinyinScheme-wrapper .wordtableAll .letterzm-v .word, .pinyinScheme-wrapper .wordtableSM .letterzm-v .word {
  font-size: 36px;
  font-family: Arial; }

.pinyinScheme-wrapper .wordtableSM .letterzm-f, .pinyinScheme-wrapper .wordtableSM .letterzm-h, .pinyinScheme-wrapper .wordtableSM .letterzm-x, .pinyinScheme-wrapper .wordtableSM .letterzm-r, .pinyinScheme-wrapper .wordtableSM .letterzm-s {
  width: 248px; }
  .pinyinScheme-wrapper .wordtableSM .letterzm-f .word, .pinyinScheme-wrapper .wordtableSM .letterzm-f .bot, .pinyinScheme-wrapper .wordtableSM .letterzm-h .word, .pinyinScheme-wrapper .wordtableSM .letterzm-h .bot, .pinyinScheme-wrapper .wordtableSM .letterzm-x .word, .pinyinScheme-wrapper .wordtableSM .letterzm-x .bot, .pinyinScheme-wrapper .wordtableSM .letterzm-r .word, .pinyinScheme-wrapper .wordtableSM .letterzm-r .bot, .pinyinScheme-wrapper .wordtableSM .letterzm-s .word, .pinyinScheme-wrapper .wordtableSM .letterzm-s .bot {
    padding-right: 124px; }

.pinyinScheme-wrapper .wordtableSM .letterzm-j {
  width: 248px; }
  .pinyinScheme-wrapper .wordtableSM .letterzm-j .word, .pinyinScheme-wrapper .wordtableSM .letterzm-j .bot {
    padding-left: 124px; }

.pinyinScheme-wrapper .wordtableYM {
  border: 1px solid #45DA81;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  margin-right: 2px; }
  .pinyinScheme-wrapper .wordtableYM .letterzm {
    border-top: 1px solid #45DA81;
    border-left: 1px solid #45DA81;
    margin-left: -1px;
    margin-top: -1px; }
    .pinyinScheme-wrapper .wordtableYM .letterzm .inner {
      flex: 1;
      width: 278px; }
    .pinyinScheme-wrapper .wordtableYM .letterzm .word {
      font-size: 48px;
      font-family: "pinyin";
      height: 72px;
      line-height: 64px; }
    .pinyinScheme-wrapper .wordtableYM .letterzm .bot {
      margin-left: 16px; }
    .pinyinScheme-wrapper .wordtableYM .letterzm .zhuyin {
      font-size: 22px;
      font-family: "標楷體", "STKaiti", "KaiTi";
      line-height: 1; }
    .pinyinScheme-wrapper .wordtableYM .letterzm .hanzi {
      margin-top: 2px;
      font-size: 22px;
      font-family: 'NSimSun';
      line-height: 1; }
  .pinyinScheme-wrapper .wordtableYM .letterzm-ua, .pinyinScheme-wrapper .wordtableYM .letterzm-o, .pinyinScheme-wrapper .wordtableYM .letterzm-uo, .pinyinScheme-wrapper .wordtableYM .letterzm-ie, .pinyinScheme-wrapper .wordtableYM .letterzm-ai, .pinyinScheme-wrapper .wordtableYM .letterzm-uai,
  .pinyinScheme-wrapper .wordtableYM .letterzm-ei, .pinyinScheme-wrapper .wordtableYM .letterzm-uei, .pinyinScheme-wrapper .wordtableYM .letterzm-iao, .pinyinScheme-wrapper .wordtableYM .letterzm-iao, .pinyinScheme-wrapper .wordtableYM .letterzm-uang, .pinyinScheme-wrapper .wordtableYM .letterzm-ueng {
    width: 557px; }
    .pinyinScheme-wrapper .wordtableYM .letterzm-ua .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-o .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-uo .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-ie .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-ai .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-uai .inner,
    .pinyinScheme-wrapper .wordtableYM .letterzm-ei .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-uei .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-iao .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-iao .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-uang .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-ueng .inner {
      width: 278px; }
    .pinyinScheme-wrapper .wordtableYM .letterzm-ua::after, .pinyinScheme-wrapper .wordtableYM .letterzm-o::after, .pinyinScheme-wrapper .wordtableYM .letterzm-uo::after, .pinyinScheme-wrapper .wordtableYM .letterzm-ie::after, .pinyinScheme-wrapper .wordtableYM .letterzm-ai::after, .pinyinScheme-wrapper .wordtableYM .letterzm-uai::after,
    .pinyinScheme-wrapper .wordtableYM .letterzm-ei::after, .pinyinScheme-wrapper .wordtableYM .letterzm-uei::after, .pinyinScheme-wrapper .wordtableYM .letterzm-iao::after, .pinyinScheme-wrapper .wordtableYM .letterzm-iao::after, .pinyinScheme-wrapper .wordtableYM .letterzm-uang::after, .pinyinScheme-wrapper .wordtableYM .letterzm-ueng::after {
      content: '';
      width: 278px;
      height: 72px;
      display: inline-block;
      border-left: 1px solid #45DA81; }
  .pinyinScheme-wrapper .wordtableYM .letterzm-iao, .pinyinScheme-wrapper .wordtableYM .letterzm-iou, .pinyinScheme-wrapper .wordtableYM .letterzm-iong {
    width: 835px; }
    .pinyinScheme-wrapper .wordtableYM .letterzm-iao .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-iou .inner, .pinyinScheme-wrapper .wordtableYM .letterzm-iong .inner {
      width: 277px;
      flex: none; }
    .pinyinScheme-wrapper .wordtableYM .letterzm-iao::after, .pinyinScheme-wrapper .wordtableYM .letterzm-iou::after, .pinyinScheme-wrapper .wordtableYM .letterzm-iong::after {
      content: '';
      width: 277px;
      height: 72px;
      display: inline-block;
      border-left: 1px solid #45DA81;
      border-right: 1px solid #45DA81;
      margin-right: 278px; }
  .pinyinScheme-wrapper .wordtableYM .letterzm-i {
    width: 557px; }
    .pinyinScheme-wrapper .wordtableYM .letterzm-i .inner {
      width: 278px; }
    .pinyinScheme-wrapper .wordtableYM .letterzm-i::before {
      content: '';
      width: 277px;
      height: 72px;
      display: inline-block;
      border-right: 1px solid #45DA81; }

.pinyinScheme-wrapper .wordtableSD {
  border: 1px solid #45DA81;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  margin-top: 12px; }
  .pinyinScheme-wrapper .wordtableSD .letterzm {
    text-align: center;
    padding: 12px;
    min-height: 64px;
    line-height: 40px;
    font-size: 24px; }
    .pinyinScheme-wrapper .wordtableSD .letterzm .hz {
      font-size: 24px; }
    .pinyinScheme-wrapper .wordtableSD .letterzm .py {
      font-size: 32px;
      font-family: "pinyin";
      margin-right: 8px; }
    .pinyinScheme-wrapper .wordtableSD .letterzm .icfont {
      font-size: 28px; }
  .pinyinScheme-wrapper .wordtableSD .table-row + .table-row {
    border-top: 1px solid #45DA81; }
  .pinyinScheme-wrapper .wordtableSD .letterzm + .letterzm {
    border-left: 1px solid #45DA81; }

.pinyinScheme-wrapper .wordtableSD1 .letterzm {
  width: 25%; }

.pinyinScheme-wrapper .wordtableSD2 .letterzm {
  width: 20%;
  height: 64px; }

.pinyinScheme-wrapper .wordtableSD + .info {
  margin-top: 32px; }

.letterMain {
  align-items: flex-start; }
  .letterMain .middleMain {
    flex: 1; }
  .letterMain .sideMain {
    margin-left: 24px;
    width: 260px; }
    .letterMain .sideMain .toolWrap {
      width: 260px; }
  .letterMain .toolModule + .practiceBtn {
    margin-top: 16px; }
  .letterMain .practiceBtn {
    background: #FFE2B5;
    border-radius: 16px;
    border: 1px solid #F2CC90;
    cursor: pointer; }
    .letterMain .practiceBtn a {
      display: block;
      padding: 0 16px;
      font-size: 20px;
      color: #CA8727;
      height: 48px;
      line-height: 48px; }
  .letterMain .orderLink {
    margin-top: 16px; }
    .letterMain .orderLink .item {
      background: linear-gradient(to bottom, #A5E9FF, #99E0FF);
      border-radius: 16px;
      border: 1px solid #74D3FD; }
      .letterMain .orderLink .item .btn {
        padding: 0 16px;
        height: 48px;
        display: flex;
        align-items: center;
        font-size: 20px; }

.formSwitch {
  position: relative;
  height: 20px;
  line-height: 20px;
  width: 40px;
  border-radius: 20px;
  cursor: pointer;
  background-color: #ddd;
  -webkit-transition: .1s linear;
  transition: .1s linear; }
  .formSwitch i {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    background-color: #fff;
    -webkit-transition: .1s linear;
    transition: .1s linear; }

.formSwitchOn {
  background-color: #FF7246; }
  .formSwitchOn i {
    left: 100%;
    margin-left: -18px; }

.rec_main {
  position: absolute;
  width: 240px;
  z-index: 5;
  top: 48px;
  left: -16px; }
  .rec_main .rec_mainBox {
    border: 2px solid #FF7246;
    border-radius: 16px 0 16px 16px;
    background: #fff;
    position: relative;
    padding-top: 24px;
    padding-bottom: 16px; }
    .rec_main .rec_mainBox::after {
      content: "";
      width: 10px;
      height: 10px;
      border-width: 2px 2px 0 0;
      border-color: #FF7246;
      border-style: solid;
      transform: rotate(-45deg);
      position: absolute;
      top: -7px;
      right: 22px;
      background: #fff; }
    .rec_main .rec_mainBox .explain_btn {
      position: absolute;
      border-radius: 16px;
      border: 1px solid #FF7246;
      color: #FF7246;
      cursor: pointer;
      right: 16px;
      top: 16px; }
      .rec_main .rec_mainBox .explain_btn .icfont {
        height: 24px;
        width: 24px;
        font-size: 24px;
        line-height: 24px;
        text-align: center;
        display: block; }
  .rec_main .curr_py {
    text-align: center; }
    .rec_main .curr_py .py_label {
      font-size: 16px; }
    .rec_main .curr_py .py_word {
      font-size: 24px;
      font-weight: bold;
      padding: 0 12px; }
  .rec_main .recwave {
    height: 24px;
    margin: 16px 32px 8px; }
  .rec_main .reclogBox {
    position: relative; }
  .rec_main .reclogNote {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 32px;
    line-height: 32px; }
  .rec_main .reclog {
    text-align: center;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-weight: bold;
    font-size: 20px; }
  .rec_main .rec_btns {
    width: 98px;
    height: 98px;
    border-radius: 42px;
    background: rgba(30, 146, 255, 0.04);
    margin: 8px auto 0;
    position: relative; }
    .rec_main .rec_btns button {
      width: 56px;
      height: 56px;
      border-radius: 24px;
      background: #1E92FF;
      border: none;
      position: absolute;
      top: 21px;
      left: 21px;
      z-index: 5;
      cursor: pointer; }
      .rec_main .rec_btns button .icfont {
        color: #fff;
        font-size: 32px; }
    .rec_main .rec_btns::after {
      content: "";
      width: 76px;
      height: 76px;
      border-radius: 32px;
      background: rgba(30, 146, 255, 0.16);
      position: absolute;
      top: 11px;
      left: 11px;
      z-index: 1; }
  .rec_main .recPlayerBox {
    padding: 12px 16px; }
  .rec_main .recPlayerBox .recModItem {
    position: relative;
    overflow: hidden;
    height: 48px;
    padding: 10px 0; }
    .rec_main .recPlayerBox .recModItem .label {
      font-size: 16px; }
  .rec_main .recPlayerBox .recModItem + .recModItem {
    border-top: 1px solid #E5E5E5; }
  .rec_main .recPlayerBox .pBtn {
    margin-left: 0;
    float: none; }
  .rec_main .recPlayerBox .review .playbtn {
    padding: 0 8px;
    color: #FF7246;
    font-size: 16px; }
  .rec_main .closeRec {
    width: 36px;
    height: 36px;
    margin: 12px auto 0;
    background: #fff;
    border: 2px solid #FF7246;
    border-radius: 18px;
    cursor: pointer; }
    .rec_main .closeRec .icfont {
      width: 32px;
      height: 32px;
      display: block;
      font-size: 24px;
      color: #707070;
      line-height: 32px;
      text-align: center; }

.hidden {
  display: none; }

.toolModule {
  background: #fff;
  border-radius: 16px;
  padding: 8px 16px;
  border: 2px solid #FDEDDC; }
  .toolModule .menuItem {
    position: relative;
    height: 48px;
    padding: 10px 0;
    border-bottom: 1px solid #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .toolModule .menuItem:last-child {
      border: none; }
    .toolModule .menuItem .label {
      flex: 1;
      font-size: 18px;
      height: 24px;
      margin: 2px; }
      .toolModule .menuItem .label .icfont {
        width: 24px;
        height: 24px;
        float: left;
        margin-right: 4px;
        font-size: 24px;
        line-height: 1; }
    .toolModule .menuItem .cont {
      display: flex;
      align-items: center;
      justify-content: right; }
    .toolModule .menuItem .btn {
      border: 1px solid #FF7246;
      border-radius: 16px;
      cursor: pointer; }
      .toolModule .menuItem .btn .icfont {
        font-size: 26px;
        width: 28px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        color: #FF7246;
        display: block; }
    .toolModule .menuItem .btn + .btn {
      margin-left: 12px; }
    .toolModule .menuItem .formSwitch {
      margin-top: 4px; }
    .toolModule .menuItem .soundbtn.active {
      background: #FF7246; }
      .toolModule .menuItem .soundbtn.active .icfont {
        color: #fff; }
    .toolModule .menuItem .playbtn.playing {
      background: #FF7246; }
      .toolModule .menuItem .playbtn.playing .icfont {
        color: #fff; }
        .toolModule .menuItem .playbtn.playing .icfont::before {
          content: "\e68b"; }
  .toolModule .cursor {
    cursor: pointer; }
  .toolModule .rec_main {
    width: 258px; }

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 8px; }

/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px; }

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); }

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4); }

.popupLayer {
  position: absolute;
  top: 88px;
  bottom: 24px;
  right: 24px;
  width: 260px;
  z-index: 999;
  display: none; }
  .popupLayer .popwrapper {
    border: 2px solid #FDEDDC;
    background: #fff;
    border-radius: 16px;
    height: 640px; }
  .popupLayer .popTitle {
    height: 48px;
    background: #FFF2EC;
    border-radius: 16px 16px 0 0;
    position: relative;
    overflow: hidden;
    padding: 0 40px 0 16px;
    background: linear-gradient(to bottom, #FEF09F, #FFC352); }
    .popupLayer .popTitle .title {
      line-height: 48px;
      font-size: 20px;
      font-weight: bold;
      color: #000; }
    .popupLayer .popTitle .close {
      position: absolute;
      width: 28px;
      height: 28px;
      font-size: 24px;
      text-align: center;
      line-height: 29px;
      color: #FF7246;
      cursor: pointer;
      top: 12px;
      right: 12px;
      background: #fff;
      border-radius: 16px;
      padding-left: 1px; }
  .popupLayer .popContent {
    line-height: 1.8;
    overflow-y: auto;
    height: calc(100% - 48px); }
  .popupLayer .playdiv {
    margin: 16px;
    width: 110px; }
  .popupLayer .popMain {
    padding: 0 16px 24px; }
    .popupLayer .popMain p {
      text-indent: 2em; }

.popupLayerFont .popContent {
  padding: 16px; }

.popupLayerFont .popWord {
  font-size: 36px;
  font-family: "pinyin";
  height: 148px;
  position: relative;
  border-radius: 16px;
  background: #E2FFEE;
  border: 2px solid #45DA81;
  text-align: center;
  cursor: pointer; }
  .popupLayerFont .popWord::after, .popupLayerFont .popWord::before {
    content: "";
    position: absolute;
    left: 0;
    height: 0px;
    width: 100%; }
  .popupLayerFont .popWord::after {
    border-top: 1px dashed #87EED3;
    top: 49px; }
  .popupLayerFont .popWord::before {
    border-bottom: 1px dashed #87EED3;
    bottom: 49px; }
  .popupLayerFont .popWord span {
    position: relative;
    z-index: 9;
    display: block;
    height: 148px;
    padding: 0 1px;
    font-size: 88px;
    line-height: 130px; }
    .popupLayerFont .popWord span:hover::after {
      content: "\e684";
      font-family: "icfont" !important;
      position: absolute;
      top: 12px;
      right: 12px;
      font-size: 20px;
      line-height: 24px;
      width: 24px;
      height: 24px;
      text-align: center;
      color: #fff;
      background: #FF7246;
      border-radius: 12px; }

.popupLayerFont .popWord + .popWord {
  margin-top: 16px;
  background: #FFF1ED;
  border: 2px solid #FF7246; }
  .popupLayerFont .popWord + .popWord::after {
    border-top: 1px dashed #FF7246; }
  .popupLayerFont .popWord + .popWord::before {
    border-bottom: 1px dashed #FF7246; }

.explain_layer .popTitle {
  height: 72px; }
  .explain_layer .popTitle .title {
    padding: 8px 0;
    line-height: 1.5; }

.explain_layer .popContent {
  height: calc(100% - 72px); }

.containerFixed .toolWrap {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: 306px; }

.containerFixed .popupLayer {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: 306px; }

.container-pymethod.containerFixed .toolWrap {
  margin-left: 186px; }

.container-pymethod.containerFixed .popupLayer {
  margin-left: 186px; }

.container-pymethod .letterMain {
  padding-top: 32px;
  padding-bottom: 32px; }

.container-pymethod .sideMain {
  width: 380px; }
  .container-pymethod .sideMain .toolWrap {
    width: 380px; }

.container-pymethod .toolModule {
  border: none;
  background: none;
  padding: 0; }
  .container-pymethod .toolModule .menuItem {
    border: none;
    background: linear-gradient(to bottom, #A5E9FF, #99E0FF);
    border-radius: 24px;
    padding: 0 24px; }
  .container-pymethod .toolModule .menuItem + .menuItem {
    margin-top: 12px; }

.container-pymethod .practiceBtn {
  border-radius: 24px; }
  .container-pymethod .practiceBtn a {
    padding: 0 24px; }

.container-pymethod .popupLayerExplain, .container-pymethod .popupLayerPylist {
  width: 380px; }
  .container-pymethod .popupLayerExplain .popwrapper, .container-pymethod .popupLayerPylist .popwrapper {
    height: 638px; }

.container-pymethod .tablemain .letterzm {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #41D1C0;
  margin: 0 24px 36px;
  position: relative;
  width: 316px;
  text-align: center; }
  .container-pymethod .tablemain .letterzm .playaudio {
    background: #FF7246;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 70px;
    left: -18px;
    z-index: 5; }
    .container-pymethod .tablemain .letterzm .playaudio .icfont {
      color: #fff;
      font-size: 24px;
      width: 36px;
      height: 36px;
      line-height: 36px;
      display: block; }
  .container-pymethod .tablemain .letterzm .top, .container-pymethod .tablemain .letterzm .pindu {
    cursor: pointer; }
    .container-pymethod .tablemain .letterzm .top:hover::after, .container-pymethod .tablemain .letterzm .pindu:hover::after {
      content: "\e684";
      font-family: "icfont" !important;
      position: absolute;
      right: 8px;
      font-size: 20px;
      line-height: 24px;
      width: 24px;
      height: 24px;
      text-align: center;
      border-radius: 12px; }
  .container-pymethod .tablemain .letterzm .top {
    height: 88px;
    text-align: center;
    position: relative; }
    .container-pymethod .tablemain .letterzm .top .word {
      font-family: "pinyin";
      font-size: 48px; }
    .container-pymethod .tablemain .letterzm .top .hanzi {
      font-size: 36px;
      margin-left: 4px; }
    .container-pymethod .tablemain .letterzm .top:hover::after {
      color: #fff;
      top: 8px;
      background: #41D1C0; }
  .container-pymethod .tablemain .letterzm .pindu {
    background: #41D1C0;
    border-radius: 0 36px 12px 12px;
    height: 48px;
    line-height: 48px;
    font-size: 28px;
    font-family: "pinyin";
    color: #fff; }
    .container-pymethod .tablemain .letterzm .pindu:hover::after {
      color: #41D1C0;
      bottom: 8px;
      background: #fff; }

.container-pymethod .pagination {
  padding: 24px 0 32px; }
  .container-pymethod .pagination .btn {
    width: 128px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    margin: 0 12px;
    text-align: center;
    line-height: 40px; }
  .container-pymethod .pagination .btnPre, .container-pymethod .pagination .btnNext {
    cursor: pointer; }

.popupLayerPylist .popMain {
  padding: 16px 14px 16px; }

.popupLayerPylist .row .letterzm {
  width: 112px;
  margin: 0 2px 4px;
  height: 34px;
  border-radius: 8px;
  color: #fff;
  line-height: 34px;
  background: #41D1C0;
  cursor: pointer; }

.popupLayerPylist .row:nth-child(1) .letterzm, .popupLayerPylist .row:nth-child(2) .letterzm {
  background: #41D1C0; }

.popupLayerPylist .row:nth-child(3) .letterzm, .popupLayerPylist .row:nth-child(4) .letterzm {
  background: #9492FF; }

.popupLayerPylist .row:nth-child(5) .letterzm, .popupLayerPylist .row:nth-child(6) .letterzm {
  background: #FF8D8D; }

.popupLayerPylist .row + .row {
  margin-top: 16px; }

.container-fourTones .letterMain {
  min-height: 690px; }

.container-fourTones .tableMenu {
  margin: 12px 22px 0; }
  .container-fourTones .tableMenu .item {
    width: 130px;
    height: 48px;
    border-radius: 8px;
    font-size: 24px;
    background: #FFE2B5;
    text-align: center;
    line-height: 48px;
    margin: 0 2px;
    cursor: pointer; }
  .container-fourTones .tableMenu .active {
    background: #FF782D;
    color: #fff; }

.container-fourTones .tablemain, .container-fourTones .tableDemoList {
  padding-bottom: 16px;
  margin: 0 22px; }
  .container-fourTones .tablemain .row .item, .container-fourTones .tableDemoList .row .item {
    border-radius: 8px;
    background: #fff;
    width: 150px;
    margin: 2px;
    padding: 24px 12px;
    text-align: center; }
    .container-fourTones .tablemain .row .item:nth-child(1), .container-fourTones .tableDemoList .row .item:nth-child(1) {
      width: 182px;
      font-size: 20px;
      color: #FF7246; }
    .container-fourTones .tablemain .row .item .icfont, .container-fourTones .tableDemoList .row .item .icfont {
      font-size: 24px; }
    .container-fourTones .tablemain .row .item .iconzs, .container-fourTones .tableDemoList .row .item .iconzs {
      font-size: 48px; }
    .container-fourTones .tablemain .row .item .playaudio, .container-fourTones .tableDemoList .row .item .playaudio {
      background: rgba(255, 114, 70, 0.16);
      width: 32px;
      height: 32px;
      border-radius: 16px;
      margin: 0 auto; }
      .container-fourTones .tablemain .row .item .playaudio .icfont, .container-fourTones .tableDemoList .row .item .playaudio .icfont {
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        display: block;
        font-size: 20px;
        color: #FF7246; }
    .container-fourTones .tablemain .row .item .word + .playaudio, .container-fourTones .tablemain .row .item .hz + .playaudio, .container-fourTones .tableDemoList .row .item .word + .playaudio, .container-fourTones .tableDemoList .row .item .hz + .playaudio {
      margin: 0 0 0 8px; }
    .container-fourTones .tablemain .row .item .name, .container-fourTones .tableDemoList .row .item .name {
      font-size: 28px; }
      .container-fourTones .tablemain .row .item .name span, .container-fourTones .tableDemoList .row .item .name span {
        display: block;
        font-size: 18px; }
    .container-fourTones .tablemain .row .item .word, .container-fourTones .tableDemoList .row .item .word {
      font-family: "pinyin";
      font-size: 36px; }
    .container-fourTones .tablemain .row .item .hz, .container-fourTones .tableDemoList .row .item .hz {
      font-size: 32px; }

.container-fourTones .tablemain {
  margin-top: 24px; }

.container-fourTones .tableDemoList .fsTitle {
  margin-top: 16px;
  background: #FF7246;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  border-radius: 12px;
  height: 48px;
  line-height: 48px;
  text-align: center; }

.container-fourTones .tableDemoList .fourTable {
  margin-top: 24px; }
  .container-fourTones .tableDemoList .fourTable .item .playaudio {
    display: block;
    margin: 0 auto !important; }

.box-comment {
  background: #FFF8EE;
  border-radius: 16px;
  padding: 16px; }
  .box-comment .title {
    font-size: 24px;
    font-weight: bold;
    color: #FF7246; }
  .box-comment .comment {
    margin-top: 12px;
    line-height: 1.6; }
    .box-comment .comment p {
      text-indent: 2em;
      padding: 4px 0; }
  .box-comment .formSwitch {
    background-color: #FF7246; }
  .box-comment .formSwitchOn {
    background-color: #ddd; }

.container-pyRule .letterMain {
  background: #fff; }

.container-pyRule .title {
  font-size: 24px;
  font-weight: bold;
  color: #FF7246; }

.container-pyRule .content {
  margin-top: 16px; }

.container-pyRule .box-lists {
  margin-top: 32px; }
  .container-pyRule .box-lists .con-diaohao {
    background: #D1FFE4;
    border-radius: 16px;
    padding: 16px; }
    .container-pyRule .box-lists .con-diaohao .tit {
      text-align: center;
      font-size: 28px;
      color: #008053;
      font-weight: bold; }
    .container-pyRule .box-lists .con-diaohao .tableMain {
      margin-top: 12px; }
    .container-pyRule .box-lists .con-diaohao .con-tips {
      margin-top: 24px;
      color: #008053; }
    .container-pyRule .box-lists .con-diaohao .row-display .item {
      width: 264px;
      margin: 2px;
      border-radius: 8px;
      background: #fff;
      text-align: center;
      font-size: 20px;
      padding: 16px; }
      .container-pyRule .box-lists .con-diaohao .row-display .item .icfont {
        font-size: 24px; }
      .container-pyRule .box-lists .con-diaohao .row-display .item .word .hz {
        font-size: 24px; }
      .container-pyRule .box-lists .con-diaohao .row-display .item .word .py {
        font-family: "pinyin";
        font-size: 28px;
        margin-left: 4px; }
    .container-pyRule .box-lists .con-diaohao .row-display + .row-display {
      margin-top: 4px; }
  .container-pyRule .box-lists .con-diaohaoList {
    margin-top: 12px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    border: 1px solid #65BCFF; }
    .container-pyRule .box-lists .con-diaohaoList .row:first-child .item {
      border-top: none; }
    .container-pyRule .box-lists .con-diaohaoList .item {
      padding: 16px 12px;
      border-top: 1px solid #65BCFF;
      border-left: 1px solid #65BCFF; }
      .container-pyRule .box-lists .con-diaohaoList .item:nth-child(1) {
        width: 215px;
        text-align: center;
        border-left: none; }
        .container-pyRule .box-lists .con-diaohaoList .item:nth-child(1) .col {
          font-family: "pinyin";
          font-size: 24px; }
          .container-pyRule .box-lists .con-diaohaoList .item:nth-child(1) .col::after {
            content: "、"; }
          .container-pyRule .box-lists .con-diaohaoList .item:nth-child(1) .col:last-child::after {
            content: ""; }
      .container-pyRule .box-lists .con-diaohaoList .item:nth-child(2) {
        width: 296px; }
      .container-pyRule .box-lists .con-diaohaoList .item:nth-child(3) {
        width: 296px; }
      .container-pyRule .box-lists .con-diaohaoList .item:nth-child(4) {
        flex: 296px; }
        .container-pyRule .box-lists .con-diaohaoList .item:nth-child(4) .col + .col {
          margin-top: 16px; }
  .container-pyRule .box-lists .con-botTips {
    margin-top: 12px;
    border-radius: 16px;
    padding: 16px;
    line-height: 1.6;
    background: #B4DEFF; }

.search-key {
  position: relative;
  z-index: 99; }
  .search-key .input-row {
    border: 2px solid #FF7246;
    position: relative;
    overflow: hidden;
    z-index: 5; }
    .search-key .input-row .input {
      flex: 1;
      background: none;
      border: none;
      padding: 0 20px; }
    .search-key .input-row .input::-webkit-input-placeholder {
      /* WebKit, Blink, Edge */
      color: #ccc; }
    .search-key .input-row .input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: #ccc; }
    .search-key .input-row .input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: #ccc; }
    .search-key .input-row .input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: #ccc; }
    .search-key .input-row .btn-submit {
      background: #FF7246;
      border: none;
      cursor: pointer; }
      .search-key .input-row .btn-submit .icfont {
        font-size: 24px;
        font-weight: 700;
        color: #fff; }
    .search-key .input-row .btn-key {
      background: none;
      border: none;
      font-size: 18px;
      color: #FF7246;
      margin-right: 16px;
      cursor: pointer; }
      .search-key .input-row .btn-key .ic-jianpan {
        width: 24px;
        height: 24px;
        background: url(../images/jianpan.png) no-repeat center center;
        margin-right: 4px;
        line-height: 24px; }
  .search-key .keypad-row {
    display: none;
    position: absolute;
    border: 2px solid #FF7246;
    padding: 44px 30px 24px;
    width: 100%;
    background: #fff;
    border-radius: 22px;
    top: 0;
    left: 0;
    z-index: 1; }
    .search-key .keypad-row ul {
      margin-top: 24px; }
    .search-key .keypad-row li {
      width: 56px;
      height: 36px;
      border-radius: 4px;
      line-height: 36px;
      text-align: center;
      margin: 2px;
      cursor: pointer;
      font-size: 22px; }
    .search-key .keypad-row .shengmu li {
      background: rgba(255, 114, 70, 0.12);
      color: #FF7246; }
    .search-key .keypad-row .yunmu li {
      background: rgba(156, 203, 56, 0.12);
      color: #9CCB38; }
    .search-key .keypad-row .buttons li {
      background: rgba(30, 146, 255, 0.12);
      color: #1E92FF; }
    .search-key .keypad-row .buttons .keystow {
      font-size: 16px; }
    .search-key .keypad-row .shengdiao li {
      font-size: 32px;
      line-height: 56px; }
    .search-key .keypad-row .diaohaosm {
      margin-left: 12px;
      font-size: 16px; }

.search-m .input-row {
  height: 44px;
  border-radius: 24px; }
  .search-m .input-row .btn-submit {
    width: 44px;
    height: 44px;
    border-radius: 0 0 0 22px; }

.search-m .keypad-row {
  border-radius: 22px; }

.syllable-wrapper .searchBox .search-key {
  flex: 1; }

.syllable-wrapper .searchBox .btnExplain {
  background: #9CCB38;
  width: 220px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  color: #fff;
  margin-left: 12px;
  text-align: center;
  cursor: pointer; }

.syllable-wrapper .yinjieTab {
  background: #65BCFF;
  padding: 2px;
  border-radius: 24px;
  margin-top: 24px; }
  .syllable-wrapper .yinjieTab .item {
    width: 25%;
    height: 44px;
    font-size: 20px;
    text-align: center;
    line-height: 44px;
    color: #fff;
    cursor: pointer; }
    .syllable-wrapper .yinjieTab .item .icfont {
      margin-right: 4px; }
  .syllable-wrapper .yinjieTab .active {
    color: #0994FF;
    background: #fff;
    border-radius: 22px;
    font-weight: bold; }

.syllable-wrapper .wordtable .boxTable {
  margin-top: 16px;
  border: 2px solid #65BCFF;
  border-radius: 16px;
  position: relative; }
  .syllable-wrapper .wordtable .boxTable .col {
    width: 89px;
    height: 32px;
    border-top: 1px solid #65BCFF;
    border-left: 1px solid #65BCFF;
    text-align: center;
    line-height: 32px;
    font-family: "pinyin";
    font-size: 18px;
    position: relative; }
    .syllable-wrapper .wordtable .boxTable .col .yj {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 32px; }
    .syllable-wrapper .wordtable .boxTable .col .showDe {
      position: absolute;
      background: #0091FF;
      padding: 12px 12px 12px 32px;
      border-radius: 0 16px 16px 16px;
      z-index: 9;
      height: 107px;
      bottom: -107px;
      left: 0;
      color: #fff; }
      .syllable-wrapper .wordtable .boxTable .col .showDe .close {
        position: absolute;
        left: 0;
        top: 0;
        width: 24px;
        height: 24px;
        color: #fff; }
      .syllable-wrapper .wordtable .boxTable .col .showDe .showTable {
        border: 1px solid #fff; }
        .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row .s_col {
          padding: 4px;
          text-align: center;
          height: 40px; }
          .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row .s_col:nth-child(1), .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row .s_col:nth-child(2) {
            width: 72px;
            border-right: 1px solid #fff; }
          .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row .s_col:nth-child(3) {
            width: 330px; }
            .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row .s_col:nth-child(3) .itemcol {
              margin: 0 12px; }
            .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row .s_col:nth-child(3) .itemcolOn {
              color: #FFD85F; }
        .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row:first-child .s_col {
          font-size: 16px; }
        .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row:last-child {
          border-top: 1px solid #fff; }
          .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row:last-child .s_col:nth-child(1), .syllable-wrapper .wordtable .boxTable .col .showDe .showTable .s_row:last-child .s_col:nth-child(2) {
            font-size: 20px;
            font-family: "pinyin"; }
  .syllable-wrapper .wordtable .boxTable .col-sm {
    border-left: none;
    width: 66px;
    background: rgba(101, 188, 255, 0.24);
    color: #0073CC; }
  .syllable-wrapper .wordtable .boxTable .col.over {
    background: rgba(101, 188, 255, 0.48); }
  .syllable-wrapper .wordtable .boxTable .colyj {
    cursor: pointer; }
  .syllable-wrapper .wordtable .boxTable .col.active {
    background: #fff; }
    .syllable-wrapper .wordtable .boxTable .col.active .btnDe {
      display: block;
      background: #0091FF;
      width: 24px;
      height: 24px;
      position: absolute;
      top: 50%;
      right: -12px;
      margin-top: -12px;
      z-index: 9;
      border-radius: 12px;
      line-height: 24px; }
      .syllable-wrapper .wordtable .boxTable .col.active .btnDe .icfont {
        color: #fff;
        font-size: 16px; }
  .syllable-wrapper .wordtable .boxTable .row-header {
    background: rgba(101, 188, 255, 0.24);
    border-radius: 16px 16px 0 0;
    position: relative; }
    .syllable-wrapper .wordtable .boxTable .row-header .col-sm {
      background: none;
      font-size: 16px;
      color: #000;
      padding: 0 4px; }
    .syllable-wrapper .wordtable .boxTable .row-header .col {
      color: #0073CC; }
  .syllable-wrapper .wordtable .boxTable .row-21 .col-sm {
    font-size: 16px;
    border-radius: 0 0 0 16px; }
  .syllable-wrapper .wordtable .boxTable .row-h:nth-child(1) .col {
    border-top: none; }
  .syllable-wrapper .wordtable .boxTable .row-h:nth-child(1) .col-sm {
    text-align: right; }
  .syllable-wrapper .wordtable .boxTable .row-h:nth-child(2) .col-sm {
    text-align: left;
    border-top: none; }
    .syllable-wrapper .wordtable .boxTable .row-h:nth-child(2) .col-sm::after {
      content: "";
      background: #65BCFF;
      height: 1px;
      width: 86px;
      position: absolute;
      left: -8px;
      top: 0;
      transform: rotate(45deg); }
  .syllable-wrapper .wordtable .boxTable .row-h .col-all {
    width: auto;
    flex: 1; }
  .syllable-wrapper .wordtable .boxTable .row.over {
    background: rgba(101, 188, 255, 0.48); }

.syllable-wrapper .wordtable .boxTable-0 .col-7 .showDe, .syllable-wrapper .wordtable .boxTable-0 .col-8 .showDe, .syllable-wrapper .wordtable .boxTable-0 .col-9 .showDe, .syllable-wrapper .wordtable .boxTable-0 .col-10 .showDe, .syllable-wrapper .wordtable .boxTable-0 .col-11 .showDe {
  right: 0;
  left: auto;
  padding: 12px 32px 12px 12px;
  border-radius: 16px 0 16px 16px; }
  .syllable-wrapper .wordtable .boxTable-0 .col-7 .showDe .close, .syllable-wrapper .wordtable .boxTable-0 .col-8 .showDe .close, .syllable-wrapper .wordtable .boxTable-0 .col-9 .showDe .close, .syllable-wrapper .wordtable .boxTable-0 .col-10 .showDe .close, .syllable-wrapper .wordtable .boxTable-0 .col-11 .showDe .close {
    right: 0;
    left: auto; }

.syllable-wrapper .wordtable .boxTable-1 .col-7 .showDe, .syllable-wrapper .wordtable .boxTable-1 .col-8 .showDe, .syllable-wrapper .wordtable .boxTable-1 .col-9 .showDe {
  right: 0;
  left: auto;
  padding: 12px 32px 12px 12px;
  border-radius: 16px 0 16px 16px; }
  .syllable-wrapper .wordtable .boxTable-1 .col-7 .showDe .close, .syllable-wrapper .wordtable .boxTable-1 .col-8 .showDe .close, .syllable-wrapper .wordtable .boxTable-1 .col-9 .showDe .close {
    right: 0;
    left: auto; }

.syllable-wrapper .wordtable .boxTable-2 .row-h:first-child .col:last-child {
  width: 332px;
  flex: inherit;
  border-left: 2px solid #65BCFF; }

.syllable-wrapper .wordtable .boxTable-2 .col {
  width: 83px; }

.syllable-wrapper .wordtable .boxTable-2 .col-1, .syllable-wrapper .wordtable .boxTable-2 .col-sm {
  width: 66px; }

.syllable-wrapper .wordtable .boxTable-2 .col-9 {
  border-left: 2px solid #65BCFF; }

.syllable-wrapper .wordtable .boxTable-2 .col-9, .syllable-wrapper .wordtable .boxTable-2 .col-10, .syllable-wrapper .wordtable .boxTable-2 .col-11, .syllable-wrapper .wordtable .boxTable-2 .col-12 {
  background: rgba(219, 255, 0, 0.04); }

.syllable-wrapper .wordtable .boxTable-2 .col-7 .showDe, .syllable-wrapper .wordtable .boxTable-2 .col-8 .showDe, .syllable-wrapper .wordtable .boxTable-2 .col-9 .showDe, .syllable-wrapper .wordtable .boxTable-2 .col-10 .showDe, .syllable-wrapper .wordtable .boxTable-2 .col-11 .showDe, .syllable-wrapper .wordtable .boxTable-2 .col-12 .showDe {
  right: 0;
  left: auto;
  padding: 12px 32px 12px 12px;
  border-radius: 16px 0 16px 16px; }
  .syllable-wrapper .wordtable .boxTable-2 .col-7 .showDe .close, .syllable-wrapper .wordtable .boxTable-2 .col-8 .showDe .close, .syllable-wrapper .wordtable .boxTable-2 .col-9 .showDe .close, .syllable-wrapper .wordtable .boxTable-2 .col-10 .showDe .close, .syllable-wrapper .wordtable .boxTable-2 .col-11 .showDe .close, .syllable-wrapper .wordtable .boxTable-2 .col-12 .showDe .close {
    right: 0;
    left: auto; }

.syllable-wrapper .wordtable .boxTable-1 {
  margin-right: 172px; }

.syllable-wrapper .searchResult, .syllable-wrapper .explainOrally {
  margin: 24px; }
  .syllable-wrapper .searchResult .backlist, .syllable-wrapper .explainOrally .backlist {
    cursor: pointer; }

.syllable-wrapper .searchResult .resultTable {
  margin-top: 16px;
  border: 1px solid #000; }
  .syllable-wrapper .searchResult .resultTable .col {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    width: 25%;
    padding: 0 16px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 32px;
    cursor: pointer; }
    .syllable-wrapper .searchResult .resultTable .col:nth-child(2), .syllable-wrapper .searchResult .resultTable .col:nth-child(3), .syllable-wrapper .searchResult .resultTable .col:nth-child(4) {
      font-size: 32px;
      font-family: "pinyin"; }
    .syllable-wrapper .searchResult .resultTable .col:nth-child(5) {
      font-size: 24px; }
    .syllable-wrapper .searchResult .resultTable .col .icfont {
      font-size: 24px; }
  .syllable-wrapper .searchResult .resultTable .row:first-child .col {
    font-size: 20px;
    border-top: none;
    padding: 0 16px;
    height: 54px;
    line-height: 54px; }
  .syllable-wrapper .searchResult .resultTable .row .col:first-child {
    border-left: none; }

.syllable-wrapper .searchResult .resultNone {
  color: #FF7246;
  padding: 64px 24px;
  text-align: center; }

.syllable-wrapper .searchResult .paronym {
  margin-top: 36px; }
  .syllable-wrapper .searchResult .paronym .ty_tit {
    font-size: 22px;
    font-weight: bold; }
  .syllable-wrapper .searchResult .paronym .ty_content {
    margin-top: 16px;
    border: 1px solid #000; }
    .syllable-wrapper .searchResult .paronym .ty_content .col {
      border-left: 1px solid #000;
      border-top: 1px solid #000;
      width: 16%;
      padding: 0 16px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 32px;
      cursor: pointer; }
      .syllable-wrapper .searchResult .paronym .ty_content .col:nth-child(1) {
        font-family: "pinyin"; }
      .syllable-wrapper .searchResult .paronym .ty_content .col:first-child {
        width: 20%; }
    .syllable-wrapper .searchResult .paronym .ty_content .row:first-child .col {
      border-top: none; }
    .syllable-wrapper .searchResult .paronym .ty_content .row .col:first-child {
      border-left: none; }

.syllable-wrapper .explainOrally .explainBox {
  margin-top: 24px; }
  .syllable-wrapper .explainOrally .explainBox .ex_title {
    font-size: 24px;
    font-weight: bold; }
  .syllable-wrapper .explainOrally .explainBox .ex_content {
    margin-top: 12px;
    line-height: 1.8; }
    .syllable-wrapper .explainOrally .explainBox .ex_content p {
      text-indent: 2em;
      padding: 3px 0; }

.practiceList-wrap .container {
  background: #FFF8EE;
  border-radius: 24px;
  padding: 48px 40px;
  min-height: initial; }
  .practiceList-wrap .container .item {
    border: 1px solid #ccc;
    background: #FAFAFA;
    border-radius: 12px;
    width: 510px;
    padding: 48px 16px;
    text-align: center;
    margin: 16px;
    position: relative;
    cursor: pointer; }
    .practiceList-wrap .container .item .tag {
      opacity: .8; }
    .practiceList-wrap .container .item .name {
      font-size: 28px;
      font-weight: bold;
      margin-top: 4px; }
    .practiceList-wrap .container .item .done {
      position: absolute;
      left: 0;
      top: 0;
      background: #10B848;
      border-radius: 6px 0 16px 0;
      height: 24px;
      padding: 0 10px 0 8px;
      line-height: 24px;
      font-size: 12px;
      color: #fff;
      display: none; }
    .practiceList-wrap .container .item .py {
      font-size: 20px; }
      .practiceList-wrap .container .item .py .col {
        padding: 0 12px; }
  .practiceList-wrap .container .active {
    color: #10B848;
    background: rgba(16, 184, 72, 0.16);
    border: 1px solid rgba(16, 184, 72, 0.64); }
    .practiceList-wrap .container .active a {
      color: #10B848; }
    .practiceList-wrap .container .active .done {
      display: block; }

#reviewPop {
  background: #FFF8EE;
  border-radius: 12px; }
  #reviewPop .title {
    font-size: 24px; }
  #reviewPop .reviewPY {
    text-align: center;
    padding: 32px 0; }
    #reviewPop .reviewPY .num {
      font-weight: lighter; }
    #reviewPop .reviewPY .col1 {
      color: #FF7246;
      font-size: 32px;
      font-weight: bold;
      padding: 0 16px;
      position: relative; }
      #reviewPop .reviewPY .col1:first-child::after {
        content: "";
        width: 1px;
        height: 20px;
        background: #ccc;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -10px; }
  #reviewPop .allFraction {
    position: relative;
    width: 200px;
    margin: 0 auto; }
    #reviewPop .allFraction .block {
      position: absolute;
      width: 200px;
      height: 100px;
      overflow: hidden;
      margin: 0 auto; }
      #reviewPop .allFraction .block .progress {
        position: absolute;
        width: 200px;
        height: 200px;
        border-left: 16px solid #2FCAA2;
        border-top: 16px solid #2FCAA2;
        border-right: 16px solid rgba(47, 202, 162, 0.16);
        border-bottom: 16px solid rgba(47, 202, 162, 0.16);
        border-radius: 50%;
        transform-origin: 50%;
        box-sizing: border-box; }
    #reviewPop .allFraction .fraction {
      padding-top: 28px;
      color: #2FCAA2; }
    #reviewPop .allFraction .tit {
      margin-top: -16px; }
  #reviewPop .orderFraction {
    margin-top: 24px; }
    #reviewPop .orderFraction .item {
      margin: 0 32px; }
    #reviewPop .orderFraction .num {
      color: #24B8D9;
      font-size: 32px; }

.explain-wrapper .title .tit {
  font-size: 28px;
  font-weight: bold; }

.explain-wrapper .content {
  margin-top: 16px;
  line-height: 1.8; }

.explain-wrap .container {
  background: #fff;
  border-radius: 16px;
  min-height: 560px;
  font-size: 18px;
  padding: 0;
  font-family: "microsoft yahei", "Helvetica Neue", Helvetica, Arial, sans-serif; }

.explain-wrap .title {
  padding: 24px 32px 0;
  box-sizing: border-box; }
  .explain-wrap .title .tit {
    font-size: 24px;
    font-weight: bold; }
  .explain-wrap .title .close {
    border: 1px solid #FF7246;
    text-align: center;
    display: block;
    color: #FF7246;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer; }
    .explain-wrap .title .close .icfont {
      line-height: 40px;
      font-size: 24px; }

.explain-wrap .recontent {
  line-height: 1.8;
  margin: 24px;
  align-items: flex-start;
  border-radius: 16px; }

.explain-wrap .ex-side {
  width: 248px;
  padding: 0 0 0 8px; }
  .explain-wrap .ex-side .inner {
    width: 248px;
    height: 100%;
    overflow-y: auto; }
  .explain-wrap .ex-side .item {
    padding: 8px 0; }
    .explain-wrap .ex-side .item .name {
      font-weight: bold;
      font-size: 20px;
      cursor: pointer; }
      .explain-wrap .ex-side .item .name:hover {
        color: #1E92FF; }
    .explain-wrap .ex-side .item .sub {
      cursor: pointer;
      padding: 6px 0; }
    .explain-wrap .ex-side .item .sname:hover, .explain-wrap .ex-side .item .ssub:hover {
      color: #1E92FF; }
    .explain-wrap .ex-side .item .sname, .explain-wrap .ex-side .item .name {
      align-items: flex-start; }
      .explain-wrap .ex-side .item .sname .text, .explain-wrap .ex-side .item .name .text {
        flex: 1;
        line-height: 1.4; }
      .explain-wrap .ex-side .item .sname .showbtn, .explain-wrap .ex-side .item .name .showbtn {
        margin-left: 12px;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        border-radius: 16px;
        color: #999;
        background: #f7f7f7; }
        .explain-wrap .ex-side .item .sname .showbtn .icfont, .explain-wrap .ex-side .item .name .showbtn .icfont {
          font-size: 16px; }
          .explain-wrap .ex-side .item .sname .showbtn .icfont:before, .explain-wrap .ex-side .item .name .showbtn .icfont:before {
            content: "\e691"; }
        .explain-wrap .ex-side .item .sname .showbtn:hover, .explain-wrap .ex-side .item .name .showbtn:hover {
          background: rgba(30, 146, 255, 0.12);
          color: #1E92FF; }
    .explain-wrap .ex-side .item .name .showbtn {
      margin-top: 8px; }
    .explain-wrap .ex-side .item .subs {
      padding-top: 8px; }
    .explain-wrap .ex-side .item .ssubs {
      margin-left: 3em;
      display: none; }
      .explain-wrap .ex-side .item .ssubs .ssub {
        padding: 2px 0; }
  .explain-wrap .ex-side .item-active .name {
    color: #1E92FF; }
    .explain-wrap .ex-side .item-active .name .showbtn {
      background: #1E92FF;
      color: #fff; }
      .explain-wrap .ex-side .item-active .name .showbtn .icfont:before {
        content: "\e695"; }
  .explain-wrap .ex-side .item-active .subs {
    display: block; }
  .explain-wrap .ex-side .sub.active .sname .showbtn {
    background: #1E92FF;
    color: #fff; }
    .explain-wrap .ex-side .sub.active .sname .showbtn .icfont:before {
      content: "\e695"; }
  .explain-wrap .ex-side .sub.active .ssubs {
    display: block; }

.explain-wrap .contentFixed .inner {
  position: fixed;
  top: 0;
  z-index: 5; }

.explain-wrap .ex-content {
  width: 842px;
  margin-left: 16px;
  background: #fff;
  padding: 8px 0 16px 24px;
  border-radius: 0 8px 8px 0;
  border-left: 1px solid #e5e5e5;
  flex: 1; }

.explain-wrap .ex-box .b-tit {
  background: #fff;
  position: relative;
  z-index: 9;
  width: 842px; }
  .explain-wrap .ex-box .b-tit .binner {
    font-size: 24px;
    color: #1E92FF;
    font-weight: bold;
    padding: 4px 16px;
    background: rgba(30, 146, 255, 0.08);
    border-radius: 12px 12px 12px 0; }

.explain-wrap .ex-box .s-tit {
  font-weight: bold;
  font-size: 22px;
  padding-bottom: 12px; }

.explain-wrap .ex-box .b-info {
  margin-top: 12px; }

.explain-wrap .ex-box .b-box {
  margin-top: 16px;
  padding: 12px 12px 16px;
  border-radius: 12px;
  background: rgba(30, 146, 255, 0.06); }
  .explain-wrap .ex-box .b-box .s-tit + .s-con {
    border-top: 1px dashed rgba(30, 146, 255, 0.4);
    padding: 16px 12px 0; }
  .explain-wrap .ex-box .b-box .s-con {
    padding: 0 12px; }
  .explain-wrap .ex-box .b-box .s-con + .s-con {
    margin-top: 40px; }

.explain-wrap .ex-box p + p {
  padding-top: 12px; }

.explain-wrap .ex-box ul {
  padding-left: 2em;
  padding-bottom: 16px; }

.explain-wrap .ex-box li + li {
  padding-top: 12px; }

.explain-wrap .ex-box img {
  display: block;
  margin-top: 4px;
  margin-bottom: 12px;
  max-width: 100%;
  border-radius: 12px; }

.explain-wrap .ex-box .fontsize20 {
  font-size: 20px; }

.explain-wrap .ex-box .color-r {
  color: #FF7246; }

.explain-wrap .ex-box .color-b {
  color: #1E92FF; }

.explain-wrap .active .b-tit {
  position: fixed;
  top: 0; }

.explain-wrap .ex-box + .ex-box {
  margin-top: 32px; }

.explain-wrap .box-active {
  display: block; }