@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-1rem); }
  80% {
    transform: translateX(0.1rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(1rem); }
  80% {
    transform: translateX(-0.1rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(0.3rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes xuanzhuan {
  from {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: linear; }
  20% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -300deg);
    animation-timing-function: linear; }
  40% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -240deg);
    animation-timing-function: linear; }
  60% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -180deg);
    animation-timing-function: linear; }
  80% {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, -60deg);
    animation-timing-function: linear; }
  to {
    transform: perspective(400px) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    animation-timing-function: linear; } }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

li {
  list-style: none; }

input {
  outline: none;
  border: none; }

input[type=number] {
  -moz-appearance: textfield; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

html {
  font-size: 100px; }
  @media only screen and (max-width: 1680px) {
    html {
      font-size: 75px; } }
  @media only screen and (max-width: 1440px) {
    html {
      font-size: 70px; } }
  @media only screen and (max-width: 1366px) {
    html {
      font-size: 65px; } }
  @media only screen and (max-width: 1280px) {
    html {
      font-size: 60px; } }
  @media only screen and (max-width: 1175px) {
    html {
      font-size: 50px; } }
  @media only screen and (max-width: 480px) {
    html {
      font-size: 35px; } }

body {
  box-sizing: border-box; }

a {
  text-decoration: none;
  color: #4A4A4A; }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  /*font-size: 16px;*/
  line-height: 1.7;
  color: #4A4A4A; }

.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 99; }

.u-center-text {
  text-align: center; }

.u-margin-bottom-card-text-mini {
  margin-bottom: .21rem; }

.u-margin-bottom-medium {
  margin-bottom: .4rem; }

.u-margin-bottom-big {
  margin-bottom: .8rem; }

.u-margin-bottom-small {
  margin-bottom: .48rem; }

.u-margin-bottom-card-text {
  margin-bottom: .51rem; }

.u-margin-top-big {
  margin-top: 2.4rem; }
  @media only screen and (max-width: 480px) {
    .u-margin-top-big {
      margin-top: 1.2rem; } }

.u-margin-top-huge {
  margin-top: 2.6rem; }

.u-margin-top-huge-freeTrial {
  margin-top: 1.6rem; }

.u-margin-top-small {
  margin-top: .58rem; }

.u-margin-top-small-second {
  margin-top: .4rem; }

.u-margin-top-price-header {
  margin-top: 2.15rem; }

.u-margin-top-mine-title {
  margin-top: 1.2rem; }

.u-padding-small {
  padding: 0 1.6rem; }
  @media only screen and (max-width: 768px) {
    .u-padding-small {
      padding: 0 .1rem; } }
  @media only screen and (max-width: 480px) {
    .u-padding-small {
      padding: 0 .5rem; } }

.u-padding-big {
  padding: 0 2.4rem; }
  @media only screen and (max-width: 768px) {
    .u-padding-big {
      padding: 0 .1rem; } }
  @media only screen and (max-width: 480px) {
    .u-padding-big {
      padding: 0 .5rem; } }

.u-padding-big2 {
  padding: 0 2.6rem; }
  @media only screen and (max-width: 768px) {
    .u-padding-big2 {
      padding: 0 .1rem; } }
  @media only screen and (max-width: 480px) {
    .u-padding-big2 {
      padding: 0 .5rem; } }

.u-padding-mine {
  padding: 0 2.14rem; }
  @media only screen and (max-width: 768px) {
    .u-padding-mine {
      padding: 0 1rem; } }
  @media only screen and (max-width: 480px) {
    .u-padding-mine {
      padding: 0 .5rem; } }

.u-padding-top-bottom-small {
  padding: .47rem 0; }

.u-padding-card-mini {
  padding: .35rem; }
  @media only screen and (max-width: 768px) {
    .u-padding-card-mini {
      padding: .35rem .1rem; } }

.u-padding-left-small {
  padding-left: 1.6rem; }
  @media only screen and (max-width: 768px) {
    .u-padding-left-small {
      padding-left: 1rem; } }

.u-footer-padding-left {
  padding-left: 1.2rem; }
  @media only screen and (max-width: 768px) {
    .u-footer-padding-left {
      padding-left: 1rem; } }

.u-padding-left-big {
  padding-left: 2.1rem; }
  @media only screen and (max-width: 480px) {
    .u-padding-left-big {
      padding-left: .5rem; } }

.u-padding-pop-small {
  padding: .3rem; }

.index__bgUrl {
  background: url(../img/BG1.png);
  background-size: cover;
  background-position: center;
  height: 13.5rem; }

.price__bgUrl {
  background: url(../img/price-bg.png);
  background-size: cover;
  background-position: center;
  height: 19.5rem; }
  @media only screen and (max-width: 480px) {
    .price__bgUrl {
      height: 54rem;
      background-size: contain;
      background-position: inherit; } }

.mine__bgUrl {
  background: url(../img/mine-BG3.png);
  background-size: cover;
  background-position: center;
  height: 10.3rem; }
  @media only screen and (max-width: 768px) {
    .mine__bgUrl {
      background-position: right; } }

.login__bgUrl {
  background: url(../img/login-bg.png);
  background-size: cover;
  background-position: center;
  height: 100vh; }

.footer-bg{
	padding: .4rem 5rem .06rem 1.8rem;
    background: rgba(245,248,250,1);
    border-radius: 8rem;
    width: 94%;
    margin: auto;
    margin-bottom: .6rem;
}

.btn, .btn:link, .btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: .1rem .6rem;
  display: inline-block;
  border-radius: 1rem;
  transition: all .2s;
  position: relative;
  font-size: 0.24rem;
  border: none;
  cursor: pointer; }

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2); }
  .btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0; }

.btn:active, .btn:focus {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.2); }

.btn--white {
  background-color: #fff;
  color: #297BFF; }
  .btn--white::after {
    background-color: #fff; }

.btn--green {
  background-color: #297BFF;
  color: #fff; }
  .btn--green::after {
    background-color: #297BFF; }

.btn--blue {
  background: linear-gradient(138deg, #79beff 0%, #448aff 100%);
  color: #fff; }
  .btn--blue::after {
    background: linear-gradient(138deg, #79beff 0%, #448aff 100%); }

.btn--width {
  padding: 0 .3rem !important;
   padding: .06rem .36rem !important;}

.btn--width2 {
  padding: .2rem .6rem !important; }

.btn--radius {
  border-radius: .6rem !important; }

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s; }

.btn--animated {
  animation: moveInBottom .5s ease-out .75s;
  animation-fill-mode: backwards; }

.btn-text:link, .btn-text:visited {
  font-size: 0.16rem;
  color: #297BFF;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid #297BFF;
  padding: 3px;
  transition: all .2s; }

.btn-text:hover {
  background-color: #297BFF;
  color: #fff;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
  transform: translateY(-2px); }

.btn-text:active {
  box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.15);
  transform: translateY(0); }

.card-shadow {
  box-shadow: 0.08rem 0.16rem 0.37rem 0 rgba(0, 0, 0, 0.12);
  background: #fff;
  min-height: 6.48rem; }

.rowCourse-card {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .rowCourse-card > div {
    width: 28%; }
    @media only screen and (max-width: 480px) {
      .rowCourse-card > div {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row; }
        .rowCourse-card > div:not(:last-child) {
          margin-bottom: 1rem; } }
  .rowCourse-card-illustration {
    width: 2.85rem;
    height: 2.85rem;
    margin: .64rem auto;
    margin-left: .76rem;
    margin-right: .76rem;
    margin-bottom: .93rem; }
    .rowCourse-card-illustration > img {
      height: 2.85rem; }
    @media only screen and (max-width: 480px) {
      .rowCourse-card-illustration {
        margin-left: 0;
        margin-right: 0;
        margin: .64rem auto; } }
  .rowCourse-card-text {
    margin-bottom: .72rem; }
    .rowCourse-card-text h2 {
      color: #333333;
      font-size: 0.32rem; }
    .rowCourse-card-text p {
      padding: .35rem;
      font-size: 0.21rem; }
      @media only screen and (max-width: 480px) {
        .rowCourse-card-text p {
          padding: 0 2rem; } }

.price__class-card {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .price__class-card > dd {
    width: 30%;
    min-height: 11.5rem; }
    @media only screen and (max-width: 480px) {
      .price__class-card > dd {
        width: 100%;
        min-height: 13rem; }
        .price__class-card > dd:not(:last-child) {
          margin-bottom: 2rem; } }
    .price__class-card > dd .card-title > P {
      font-size: 0.21rem; }
    .price__class-card > dd .card-price {
      display: none;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center; }
      .price__class-card > dd .card-price-money {
        font-size: 0.64rem;
        font-weight: 500; }
        .price__class-card > dd .card-price-money--sup, .price__class-card > dd .card-price-money--sub {
          font-size: 0.24rem; }
    .price__class-card > dd .card-text-introduce:not(:last-child) {
      margin-bottom: .27rem; }
    .price__class-card > dd .card-text-introduce > li {
      font-size: 0.21rem; }
      .price__class-card > dd .card-text-introduce > li:not(:first-child) {
        line-height: 0.45rem; }
        @media only screen and (max-width: 480px) {
          .price__class-card > dd .card-text-introduce > li:not(:first-child) {
            line-height: .6rem; } }
    .price__class-card > dd .card-text-introduce .card--blue {
      color: #297BFF;
      font-weight: 500; }

.freeTrial {
  box-shadow: 0px 3px 45px 0px rgba(0, 0, 0, 0.12);
  height: 1.3rem;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; }
  .freeTrial-organization {
    width: calc((100% - 2.3rem)/2);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center; }
    .freeTrial-organization > input {
      background: url(../img/organization.png); }
  .freeTrial-contactWay {
    width: calc((100% - 2.3rem)/2);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center; }
    .freeTrial-contactWay > input {
      background: url(../img/phone.png); }
  .freeTrial-btn {
    width: 2.3rem;
    background: linear-gradient(138deg, #79beff 0%, #448aff 100%);
    color: #fff;
    line-height: 1.3rem;
    font-size: .29rem;
    text-align: center; }
  .freeTrial .ipt {
    width: 80%;
    padding-left: .6rem;
    outline: none;
    height: .5rem;
    font-size: .24rem;
    background-repeat: no-repeat;
    background-size: .4rem;
    background-position: 4% 50%;
    border: none;
    color: #297BFF; }

.login-btn {
  width: 2.3rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  -ms-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out; }
  .login-btn--blue {
    font-size: 0.29rem;
    color: #297BFF; }
/*  .login-btn:hover .login-btn-img {
    transform: rotate(60deg) scale(1.1);
    -webkit-transform: rotate(60deg) scale(1.1);
    -moz-transform: rotate(60deg) scale(1.1);
    -o-transform: rotate(60deg) scale(1.1);
    -ms-transform: rotate(60deg) scale(1.1); } */
  .login-btn-img {
    width: .53rem;
    height: .53rem;
    margin-left: .2rem; }
    .login-btn-img--finish {
      height: .53rem;
      display: flex;}
    @media only screen and (max-width: 480px) {
      .login-btn-img {
        display: none; } }

.freeTrial__box-title h2 {
  font-size: 0.5rem;
  color: #333333;
  font-weight: 500; }

.freeTrial__box-title p {
  font-size: 0.27rem; }

.freeTrial__form {
  width: 60%;
  margin: auto;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .freeTrial__form {
      width: 70%; } }
  @media only screen and (max-width: 480px) {
    .freeTrial__form {
      width: 96%; } }
  .freeTrial__form-bgUrl {
    width: 6.9rem;
    height: 6.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 290%;
    z-index: -1; }
    .freeTrial__form-bgUrl > img {
      height: 6.9rem; }

.pop__wrapper,
.pop__success {
 width: 5.4rem;
     height: 3.6rem;
     background-color: #fff;
     border-radius: .36rem;
     display: none;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 101; }
  @media only screen and (max-width: 1680px) {
    .pop__wrapper,
    .pop__success {
      width: 6.0rem;
      height: 3.2rem; } }
  @media only screen and (max-width: 1440px) {
    .pop__wrapper,
    .pop__success {
      width: 6.0rem;
      height: 3.2rem; } }
  @media only screen and (max-width: 1366px) {
    .pop__wrapper,
    .pop__success {
      width: 6.0rem;
      height: 3.2rem; } }
  @media only screen and (max-width: 1280px) {
    .pop__wrapper,
    .pop__success {
      width: 6.5rem;
      height: 3.6rem; } }
  @media only screen and (max-width: 1175px) {
    .pop__wrapper,
    .pop__success {
      width: 7.5rem;
      height: 4.0rem; } }
  @media only screen and (max-width: 480px) {
    .pop__wrapper,
    .pop__success {
      width: 8.0rem;
      height: 4.8rem; } }
  .pop__wrapper-info,
  .pop__success-info {
    font-size: 0.24rem; }
	.pop__wrapper-hint{
		font-size: 0.18rem;
	}
  .pop__wrapper-number,
  .pop__success-number {
    display: flex;
    justify-content: space-between;
    padding: .15rem .2rem; }
    .pop__wrapper-number > input[name='code[]'],
    .pop__success-number > input[name='code[]'] {
          height: 1.2rem;
          width: .8rem;
          background-color: #f5f5f5;
          text-align: center;
          font-size: 0.5rem;
          color: #333333;
          border-radius: 16px; }
  .pop__wrapper-noReceive,
  .pop__success-noReceive {
	color: #9d9d9d;
    font-weight: 400;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.16rem; }
  .pop__wrapper-cursor,
  .pop__success-cursor {
    font-style: normal;
    color: #297BFF;
    font-weight: 400;
    margin-left: .1rem;
    cursor: pointer; }
  .pop__wrapper .btn-custom,
  .pop__success .btn-custom {
    font-size: 0.18rem; }
  .pop__wrapper .success-verify,
  .pop__success .success-verify {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 100%; }
  .pop__wrapper-illustration,
  .pop__success-illustration {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    margin-top: .1rem; }

.pop__success {
  display: none; }

.footer__box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .footer__box-logo {
    width: 3.6rem;
    height: 0.84rem; }
    @media only screen and (max-width: 480px) {
      .footer__box-logo {
        width: 4rem;
        height: 1rem;
        margin-top: .5rem; } }
    .footer__box-logo a > img {
      height: .68rem; }
      @media only screen and (max-width: 480px) {
        .footer__box-logo > img {
          width: 100%;
          height: 100%;
          display: block; } }
  .footer__box-describe {
    margin-top: .6rem; }
    .footer__box-describe > p {
      color: #9B9B9B;
      font-size: 0.2rem; }
  .footer__box-dl > dd {
    line-height: .26rem; }
    .footer__box-dl > dd .footer__box-dl--title {
      font-size: 0.24rem;
      color: #333333;
      font-weight: 500; }
  .footer__box-dl > dd > a {
    color: #9B9B9B;
    font-size: 0.2rem; }

.put-on-records {
      font-size: 0.2rem;
      color: #9B9B9B;
      margin-bottom: .3rem;
      width: 120%; }

.row {
  max-width: 100%;
  margin: 0 auto; }
  .row:not(:last-child) {
    margin-bottom: 0.8rem; }
  .row::after {
    content: "";
    display: table;
    clear: both; }
  .row [class^="col-"] {
    float: left; }
    .row [class^="col-"]:not(:last-child) {
      margin-right: 0.65rem; }
  .row .col-1-of-2 {
    width: calc((100% - 0.65rem) / 2); }
  .row .col-1-of-3 {
    width: calc((100% - 2 * 0.65rem) / 3); }
  .row .col-2-of-3 {
    width: calc(2 * ((100% - 2 * 0.65rem) / 3) + 0.65rem); }
  .row .col-1-of-4 {
    width: calc((100% - 3 * 0.65rem) / 4); }
  .row .col-2-of-4 {
    width: calc(2 * ((100% - 3 * 0.65rem) / 4) + 0.65rem); }
  .row .col-3-of-4 {
    width: calc(3 * ((100% - 3 * 0.65rem) / 4) + 2 * 0.65rem); }

.header__text-box {
  width: 10.9rem;
  padding-top: 1.4rem; }
  @media only screen and (max-width: 768px) {
    .header__text-box {
      padding-top: 3rem; } }
  @media only screen and (max-width: 768px) and (max-width: 480px) {
    .header__text-box {
      padding-top: 1.5rem;
      width: 100%; } }
  .header__text-box .heading-primary--main {
    display: block;
    color: #333333;
    font-size: .5rem;
    font-weight: 500; }
  .header__text-box .heading-primary--sub {
    margin: .4rem 0 .8rem 0;
    display: block;
    font-size: .27rem;
    font-weight: 400;
    text-align: justify;
    text-align-last: left; }
    @media only screen and (max-width: 480px) {
      .header__text-box .heading-primary--sub {
        width: 90%; } }

.price__header-box-text--main {
  font-size: 0.5rem;
  font-weight: 500; }

.price__header-box-text--sub {
  font-size: 0.27rem;
  width: 8.6rem;
  margin: auto; }

.mine__heading-box--main {
  font-weight: 500;
  font-size: 0.56rem;
  color: #333333; }

.mine__heading-box--sub {
  width: 6.8rem;
  font-size: 0.27rem; }

.header__nav {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .header__nav-dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; }
    .header__nav-dl > dd {
      position: relative;
      text-align: center;
      line-height: 0.5rem;
      display: flex;
      justify-content: center;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center; }
      .header__nav-dl > dd > a {
        font-size: 0.24rem;
        line-height: 0.5rem;
        padding: .16rem;
        font-weight: 400; }
      .header__nav-dl > dd .nav-white {
        color: #fff; }
      .header__nav-dl > dd:not(:last-child) {
        margin-right: .6rem; }
    .header__nav-dl > dd:last-child {
      width: 2rem; }

.header__logo-box {
  width: 2.95rem;
  height: .8rem;
  display: block;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center; }

.header__logo {
  height: .57rem; }

.bgc-btn {
  background: #297BFF;
  border-radius: .5rem; }
  .bgc-btn > a {
    color: #fff; }

.index-i-blue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 100%;
  display: block;
  width: 90%;
  height: .05rem;
  background-color: #297BFF; }

.index-i-white {
  background-color: #fff; }

.active-weight > a {
  font-weight: 500 !important; }

.navigation__checkbox {
  display: none; }

.navigation__button {
  background-color: #fff;
  height: .7rem;
  width: .7rem;
  position: fixed;
  top: .6rem;
  right: .6rem;
  border-radius: 50%;
  z-index: 2000;
  box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer; }

.navigation__background {
  height: .6rem;
  width: .6rem;
  border-radius: 50%;
  position: fixed;
  top: .65rem;
  right: .65rem;
  background-image: radial-gradient(#297BFF, #fff);
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); }

.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  left: -5rem;
  z-index: 1500;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.navigation__list {
  position: absolute;
  top: 50%;
  left: 92%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%; }

.navigation__item {
  margin: .1rem; }

.navigation__link:link, .navigation__link:visited {
  display: inline-block;
  font-size: .5rem;
  font-weight: 300;
  padding: .1rem .2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-size: 220%;
  transition: all .4s; }
  .navigation__link:link span, .navigation__link:visited span {
    margin-right: .15rem;
    display: inline-block; }

.navigation__link:hover, .navigation__link:active {
  background-position: 100%;
  color: #297BFF;
  transform: translateX(0.1rem); }

.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(100); }

.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  width: 100%; }

.navigation__icon {
  position: relative;
  margin-top: .35rem; }
  .navigation__icon, .navigation__icon::before, .navigation__icon::after {
    width: .3rem;
    height: 2px;
    background-color: #333333;
    display: inline-block; }
  .navigation__icon::before, .navigation__icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all .2s; }
  .navigation__icon::before {
    top: -.08rem; }
  .navigation__icon::after {
    top: .08rem; }

.navigation__button:hover .navigation__icon::before {
  top: -.1rem; }

.navigation__button:hover .navigation__icon::after {
  top: .1rem; }

.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent; }

.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(135deg); }

.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-135deg); }

.liveLesson-text {
  width: 7.1rem; }
  @media only screen and (max-width: 480px) {
    .liveLesson-text {
      width: 100%; } }
  .liveLesson-text--title {
    color: #333333;
    font-size: 0.5rem;
    font-weight: 500;
    margin-bottom: .39rem; }
  .liveLesson-text--p {
    font-size: 0.27rem;
    font-weight: 400;
    line-height: 0.45rem;
    text-align: justify;
    text-align-last: left; }
    @media only screen and (max-width: 480px) {
      .liveLesson-text--p {
        width: 100%;
        line-height: .6rem;
        text-indent: 2em; } }

.liveLesson-logo-box {
  width: 8.5rem;
  height: 8.5rem; }
  @media only screen and (max-width: 768px) {
    .liveLesson-logo-box {
      width: 7rem;
      height: 7rem; } }

.liveLesson-logo {
  height: 8.5rem; }
  @media only screen and (max-width: 768px) {
    .liveLesson-logo {
      height: 7rem; } }

@media only screen and (max-width: 480px) {
  .multiTerminal-text {
    padding: 0 .5rem; } }

.multiTerminal-text--title {
  color: #333333;
  font-size: 0.5rem; }

.multiTerminal-text--narrate {
  width: 6.1rem;
  font-size: 0.27rem;
  line-height: 0.45rem; }
  @media only screen and (max-width: 480px) {
    .multiTerminal-text--narrate {
      width: 100%; } }

.multiTerminal-box {
  width: 100%;
  height: 4.8rem;
  background: linear-gradient(138deg, #79beff 0%, #448aff 100%);
  position: relative; }
  .multiTerminal-box--dl {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 45%;
    width: 60%; }
    @media only screen and (max-width: 980px) {
      .multiTerminal-box--dl {
        width: 70%; } }
    @media only screen and (max-width: 768px) {
      .multiTerminal-box--dl {
        width: 80%; } }
    @media only screen and (max-width: 480px) {
      .multiTerminal-box--dl {
        width: 90%; } }
    .multiTerminal-box--dl > dd {
      width: 50%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row; }
      .multiTerminal-box--dl > dd:nth-child(even) {
        display: flex;
        flex-direction: row-reverse; }
        .multiTerminal-box--dl > dd:nth-child(even) .dd-text > p {
          text-align: left; }
        .multiTerminal-box--dl > dd:nth-child(even) .dd-logo {
          margin-left: 0;
          margin-right: .27rem; }
      .multiTerminal-box--dl > dd:nth-child(-n+2) {
        margin-bottom: .77rem; }
      .multiTerminal-box--dl > dd .dd-text > p {
        font-size: .32rem;
        color: #fff;
        text-align: right; }
        .multiTerminal-box--dl > dd .dd-text > p:last-child {
          font-size: .21rem; }
      .multiTerminal-box--dl > dd .dd-logo {
        width: .74rem;
        height: .74rem;
        text-align: right;
        margin-left: .27rem;
        margin-top: .12rem; }
        .multiTerminal-box--dl > dd .dd-logo-img {
          height: .74rem; }
  .multiTerminal-box--phone {
    width: 4.1rem;
    height: 7.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
    @media only screen and (max-width: 768px) {
      .multiTerminal-box--phone {
        width: 3.5rem;
        height: 6.5rem; } }
    .multiTerminal-box--phone---logo {
      height: 7.8rem; }
      @media only screen and (max-width: 768px) {
        .multiTerminal-box--phone---logo {
          height: 6.5rem; } }

.rowCourse-title-top h2 {
  color: #333333;
  font-size: 0.5rem;
  font-weight: 500;
  margin-bottom: .39rem; }

.rowCourse-title-top p {
  font-size: 0.27rem;
  width: 8.7rem;
  margin: auto; }

.rowCourse-title-logo {
  width: 7.5rem;
  height: 7.5rem;
  margin: auto; }
  .rowCourse-title-logo--img {
    height: 7.5rem; }

.mine__aboutUs {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  @media only screen and (max-width: 480px) {
    .mine__aboutUs {
      line-height: .6rem;
      /*background-image: linear-gradient(
        to right bottom,
        rgba($color-white, 0.8),
        rgba($color-white, 0.8)),
        url(../img/mine-img2.png);
		@include bgUrl;
		background-position: right;*/ } }
  .mine__aboutUs-text {
    width: 8.7rem; }
    @media only screen and (max-width: 480px) {
      .mine__aboutUs-text {
        width: 100%; } }
    .mine__aboutUs-text--title {
      font-size: 0.5rem;
      color: #333333; }
    .mine__aboutUs-text--paragraph {
      font-size: 0.27rem;
      line-height: 0.45rem; }
      @media only screen and (max-width: 480px) {
        .mine__aboutUs-text--paragraph {
          line-height: .6rem; } }
  .mine__aboutUs-img {
    width: 5.6rem;
    height: 5.6rem; }
    .mine__aboutUs-img > img {
      height: 5.6rem; }

.mine__contactUs {
  display: flex;
  flex-direction: row-reverse;
  /*	@include respond-to(ios) {
		line-height: 6rem;

		background-image: linear-gradient(
        to right bottom,
        rgba($color-white, 0.8),
        rgba($color-white, 0.8)),

        url(../img/mine-img1.png);
		@include bgUrl;
		background-position: right;
	}*/ }
  .mine__contactUs-text {
    width: 6.5rem; }
    @media only screen and (max-width: 480px) {
      .mine__contactUs-text {
        width: 100%; } }
    .mine__contactUs-text--title {
      font-size: 0.5rem;
      color: #333333; }
    .mine__contactUs-text--paragraph {
      font-size: 0.27rem;
      line-height: .7rem;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row; }
      .mine__contactUs-text--paragraph .icon {
        width: .32rem;
        height: .32rem;
        display: block;
        margin-top: 0.05rem;
        margin-right: .1rem; }
        .mine__contactUs-text--paragraph .icon > img {
          height: .32rem; }

.section-liveLesson-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

@media only screen and (max-width: 480px) {
  .section-multiTerminal {
    margin-top: 1.5rem; } }

.section-rowCourse {
  min-height: 4rem; }

.section-freeTrial {
  min-height: 9.5rem; }

.price {
  min-height: 10rem; }

/*login*/
@media only screen and (max-width: 480px) {
  .login__bgUrl {
    background: url(../img/phone-bg.png);
    background-size: cover;
    background-position: center; } }

@media only screen and (max-width: 480px) {
  .login .header__text-box {
    width: auto; } }

@media only screen and (max-width: 480px) {
  .login .header__text-box .heading-primary--main, .login .header__text-box .heading-primary--sub {
    color: #fff; } }

@media only screen and (max-width: 480px) {
  .login .header__text-box .heading-primary--sub {
    width: 6.6rem; } }

@media only screen and (max-width: 480px) {
  .pc-display {
    display: none; } }

.phone__display {
  display: none; }
  @media only screen and (max-width: 480px) {
    .phone__display {
      display: block; } }

.phone__form {
  width: 8rem; }
  .phone__form > div {
    box-shadow: 0px 3px 45px 0px rgba(0, 0, 0, 0.12); }
  .phone__form .phone-text,
  .phone__form .phone-number {
    width: 100%;
    background-color: #fff;
    height: 1.2rem;
    padding-left: 1.2rem;
    margin-bottom: .4rem;
    background-image: url(../img/organization.png);
    background-repeat: no-repeat;
    background-size: .6rem;
    background-position: 4% 50%;
    color: #297BFF; }
  .phone__form .phone-number {
    background-image: url(../img/phone.png); }
  @media only screen and (max-width: 480px) {
    .phone__form .login-btn {
      width: 100%;
      background-color: #fff;
      height: 1.2rem;
      display: flex;
      justify-content: center;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center; } }
  @media only screen and (max-width: 480px) {
    .phone__form .login-btn--blue {
      font-size: .4rem; } }

.footer__box {
  margin-bottom: .8rem; }
  @media only screen and (max-width: 480px) {
    .footer__box-dl > dd {
      line-height: .6rem; } }


/* 页面信息 */
.words {
	position: fixed;
    width: 70px;
    height: 400px;
    top: 50%;
    right: -20px;
    margin-top: -200px;
    z-index: 15;
}
.words>div {
	width:228px;
	height:48px;
	text-align:center;
	border-radius:40px;
	margin:13px 0;
	display:flex;
	-webkit-align-items:center;
	align-items:center
}
.words>div>p {
	margin:0
}
.words .wordsTry {
	border-bottom:0
}
.telP {
	position:relative
}
.telN {
	display:none;
    width: 320px;
    height: 64px;
    font-size: 30px;
    line-height: 64px;
    position: absolute;
    top: -0.2em;
    left: -12em;
    background-color: #fff;
    box-shadow: -2px 2px 16px 6px rgba(181,190,214,0.53);
}
.code {
	display:none;
	width: auto;
	height: auto;
	font-size: 30px;
	line-height: 0;
	position: absolute;
	top: -4em;
	left: -24em;
	box-shadow: -2px 2px 16px 6px rgba(181,190,214,0.53);
	border-radius: 14px;
	overflow: hidden;
}
.code>img {
	width:22em!important;
	margin:auto!important;
	margin-left:auto
}
.code p {
	color:#333;
	font-size:24px
}
.qqcode {
	display:none;
	width: auto;
	height: auto;
	font-size: 30px;
	line-height: 0;
	position: absolute;
	top: -4em;
	left: -12em;
	box-shadow: -2px 2px 16px 6px rgba(181,190,214,0.53);
	border-radius: 14px;
	overflow: hidden;
}
.qqcode>img {
	width:288px!important;
	margin:auto!important;
	margin-left:auto
}
.qqcode p {
	color:#333;
	font-size:24px
}
.telN i {
	position:absolute;
	top:12px;
	left:135px;
	width:10px;
	display:block;
	border-left:10px solid #fff;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent
}
.words>div:hover {
	cursor:pointer;
	transition:.5s;
	transform:translateX(-138px) scale(1.02)
}
.words>div:before {
	content:"";
	display:table
}
.words>div p {
	color:#fff;
	font-size:18px;
	margin-left:12px
}
.words a {
	display:none;
	background-color:#dbdbdb;
	font-size:12px;
	text-align:center;
	color:#666
}
.words a i {
	margin-left:29px;
	width:6px;
	display:block;
	border-bottom:6px solid #666;
	border-left:6px solid transparent;
	border-right:6px solid transparent
}
.shangqiao {
	background:#7f9eb2
}
.telP {
	background:#2352e5
}
.wordsDemo {
	background:#4a89ed
}
.qqservice {
	background:#2352e5
}
.wordsTry {
	background:#4a89ed
}
.shangqiao img,.telP img,.wordsTry img,.wordsDemo img,.qqservice img {
	width:22px;
	height:auto;
	margin-left:20px
}
.wordsDemo p {
	margin-left:0
}
@media screen and (max-width:992px) {
	.words {
	display:none
}