@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; 
**/
.banner {
  width: 100%;
  height: 560px;
  overflow: hidden;
  background: url("") no-repeat left center/auto 560px;
  position: relative; }

.banner-content {
  position: absolute;
  right: 131px;
  top: 131px;
  text-align: center;
  color: #fff; }
  .banner-content h1 {
    color: #fff;
    line-height: 55px;
    margin-bottom: 26px; }
  .banner-content a {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    margin-bottom: 26px;
    width: 290px;
    height: 50px;
    line-height: 50px; }
  .banner-content .play-video img {
    width: 40px;
    height: 40px;
    margin-right: 6px; }

.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: 100vh;
  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: red;
  font-size: 26px; }

.join {
  margin-top: 46px;
  width: 745px;
  margin: 0 auto;
  text-align: center;
  padding-top: 25px; }
  .join .title {
    margin-bottom: 19px; }
  .join input {
    width: 489px;
    height: 40px;
    border-radius: 20px;
    background-color: #EAEAEA;
    border: none;
    box-sizing: border-box;
    padding: 12px 20px;
    display: block;
    font-size: 1.4rem;
    margin-bottom: 21px;
    margin-left: auto;
    margin-right: auto;
    font-family: fontBook; }
  .join button {
    border: none;
    margin-bottom: 45px; }
  .join p {
    font-size: 1.6rem;
    text-align: left;
    color: #7E7E7E;
    line-height: 24px;
    font-family: fontBook;
    line-height: 24px; }
    .join p span {
      font-family: fontMedium; }

.learn-class {
  padding-top: 41px;
  box-sizing: border-box;
  margin-bottom: 165px; }
  .learn-class .title {
    margin-bottom: 49px;
    text-align: center;
    margin-top: 42px; }
  .learn-class .description {
    width: 79%;
    line-height: 24px;
    margin: 0 auto 33px auto; }
  .learn-class ul {
    background-color: #F9F9F9;
    padding: 59px 89px 97px 96px; }
  .learn-class li {
    background-color: #fff;
    margin-bottom: 12px;
    padding: 36px 63px;
    box-shadow: 0 2px 4px 0 #9b9b9b;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center; }
    .learn-class li img {
      width: 280px;
      height: 280px;
      margin-right: 92px; }
    .learn-class li h3 {
      line-height: 30px;
      color: #7B838A;
      margin-bottom: 31px; }
    .learn-class li p {
      margin-bottom: 26px; }
    .learn-class li a {
      background-color: transparent; }
  .learn-class .content {
    width: 568px; }