@charset "UTF-8";
/** 变量文件 **/
/**color**/
/** Main colors   -   Main Accent  **/
/** 深黄 主色 PC**/
/** 深绿 主色 PC**/
/** 深黄 主色 MOBLE**/
/** 深蓝 主色**/
/** 背景色 主色**/
/** Main colors  -  Secondary Accent  **/
/** 淡黄 **/
/** 绿色 **/
/** 淡蓝 **/
/** 亮红 **/
/** 紫红 **/
/** Typography colors  -  Main Accent  **/
/** 深灰 **/
/** Typography colors  -  Secondary Accent  **/
/** 浅灰 **/
/** other colors **/
/**  font-size-pc  **/
/**  font-size-mobile  **/
/** pc端宽度全局变量  **/
/**  PC端菜单栏高度  **/
/**  手机端菜单栏高度  **/
/** 函数文件 **/
/**按钮样式**/
/**  flex-direction: row | row-reverse | column | column-reverse; 
 	justify-content: flex-start | flex-end | center | space-between | space-around; 
 	    align-items: flex-start | flex-end | center | baseline | stretch;
      align-content: flex-start | flex-end | center | space-between | space-around | stretch; 
**/
body {
  background-color: #fff; }

/** mobile **/
.banner {
  width: 100%;
  /*height: 40.5625rem;*/
  /*background: url("/style/images/index-banner-m.png") no-repeat right center/auto 100%;*/
  position: relative; }

.banner-content {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 10rem;
  width: 16.25rem;
  text-align: center; }
  .banner-content h1 {
    color: #fff;
    line-height: 3.125rem;
    font-size: 2.5rem;
    margin-bottom: 7.1875rem;
    margin-left: 0.875rem; }
  .banner-content a {
    box-shadow: 0 0.125rem 0.375rem 0 rgba(155, 155, 155, 0.79);
    margin-bottom: 1.25rem; }
  .banner-content .play-video {
    font-size: 0.75rem;
    margin-left: 0.875rem;
    color: #fff; }
    .banner-content .play-video img {
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.375rem; }

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

.close {
  display: none; }

.maskVideo {
  position: fixed;
  width: 100%;
  height: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  display: none; }

.title {
  margin-bottom: 30px;
  text-align: center;
  color: #009241;
  font-size: 26px; }

.title-red {
  margin-bottom: 30px;
  text-align: center;
  color: #FF0000;
  font-size: 26px; }

.join {
  width: 18.75rem;
  margin: 0 auto;
  margin-top: 1.875rem;
  text-align: center; }
  .join .title {
    margin-bottom: 1.0rem;
    font-size: 1.125rem;
    line-height: 1.375rem; }
  .join input {
    width: 100%;
    height: 40px;
    border-radius: 20px;
    background-color: #EAEAEA;
    border: none;
    box-sizing: border-box;
    padding: 12px 20px;
    display: block;
    font-size: 0.625rem;
    margin-bottom: 21px;
    margin-left: auto;
    margin-right: auto;
    font-family: fontBook; }
  .join button {
    border: none;
    margin-bottom: 45px; }
  .join p {
    font-size: 0.875rem;
    text-align: left;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    color: #7E7E7E;
    line-height: 24px;
    font-family: fontBook;
    line-height: 24px;
    margin-bottom: 2.5rem; }

.learn-class {
  margin-bottom: 2.5rem; }
  .learn-class .title {
    padding: 1.25rem 0;
    text-align: center;
    box-sizing: border-box;
    background-color: #fff;
    font-size: 1.125rem; }
  .learn-class ul {
    background-color: #EAEAEA;
    padding: 1.25rem 1.0rem;
    box-sizing: border-box;
    padding-bottom: 3.0625rem; }
  .learn-class li {
    position: relative;
    margin-bottom: 1.0rem;
    color: #787878;
    text-align: center; }
    .learn-class li h3 {
      line-height: 1.375rem;
      margin-bottom: 1.875rem;
      text-align: left; }
    .learn-class li p {
      line-height: 1.25rem;
      margin-bottom: 1.875rem;
      text-align: left; }
    .learn-class li img {
      position: absolute; }
  .learn-class .content {
    width: 100%;
    height: 100%;
    padding: 3.125rem 3.375rem 2.5rem 3.375rem;
    box-sizing: border-box; }
  .learn-class li:nth-child(1) img {
    height: 8.125rem;
    width: auto;
    right: 0.625rem;
    top: 0; }
  .learn-class li:nth-child(2) img {
    height: 7.125rem;
    width: auto;
    top: 0.5rem;
    right: 0; }
  .learn-class li:nth-child(3) h3 {
    margin-bottom: 2.375rem; }
  .learn-class li:nth-child(3) img {
    height: 7rem;
    width: auto;
    top: 0.5rem;
    right: 0.75rem; }
  .learn-class li:nth-child(4) img {
    height: 6.625rem;
    width: auto;
    top: 0.625rem;
    right: 0.625rem; }