.jumbotron {
  background-color: #222;
  border-radius: 0;

  .text-center {
    color: #fff;
    font-size: 2.8em;
    font-weight: 200;
    letter-spacing: 2px;
    line-height: 1.8em;
    strong {
      font-weight: normal;
      color: #bfb199;
    }
  }
  .slogan-logo {
    text-align: center;
    color: #999;
    font-weight:  300;
    letter-spacing: 3px;
  }
}

.how-to-do {
  position: relative;

  // 四根指示线
  .y-sidebar {
    position: absolute;
    left: 50%;
    right: 50%;
    height: 60px;
    width: 1px;
    border-right: 2px solid #eee;
  }
  .x-sidebar {
    position: absolute;
    left: 25%;
    right: 25%;
    margin-top: 30px;
    height: 1px;
    width: 50%;
    border-top: 2px solid #eee;
  }
  .y-sidebar-left {
    position: absolute;
    left: 25%;
    margin-top: 30px;
    height: 60px;
    width: 1px;
    border-right: 2px solid #eee;
  }
  .y-sidebar-right {
    position: absolute;
    right: 25%;
    margin-top: 30px;
    height: 60px;
    width: 1px;
    border-right: 2px solid #eee;
  }

  .slogan-info {
    margin-top: 90px;
    text-align: center;
    h2 {
      font-weight: 600;
      letter-spacing: 2px;
    }
    p {
      color: #777;
      font-weight: normal;
      font-size: 14px;
    }
  }

  .img-info {
    margin-top: 100px;
    img {
      // width: 28%;
      height: auto;
      opacity: 0.5;
    }
    h3 {
      text-align: center;
      font-size: 20px;
      font-weight: normal ;
      letter-spacing: 2px;
    }
    p {
      text-align: center;
      color: #777;
      font-weight: normal;
      font-size: 14px;
    }
  }
}

.the-results-slogan {
  margin-top: 80px;
  background-color: #222;
  h6 {
    padding: 30px 15px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-weight:  300;
    letter-spacing: 2px;
    font-size: 16px;
    strong {
      font-weight: normal;
      color: #bfb199;
    }
  }
}

.the-results {
  h2 {
    margin-top: 100px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 2px;
  }
  .example {
    a {
      text-decoration: none;
      color: #333;
    }
    .example-box {
      transition: 0.3s;
      padding: 20px 20px;
      margin-top: 30px;
      background-color: #eee;
      h3 {
        span {
          font-size: 16px;
        }
      }
      .example-info {
        margin: 25px 0;
        font-size: 12px;
      }
      .example-description {
        margin: 25px 0 0;
        font-size: 12px;
        line-height: 20px;
        text-align: justify;
        overflow: hidden;
      }
    }
    .example-box:hover {
      background-color: #222;
      color: #fff;
      transition: 0.3s;
      box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.1);
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      h3 {
        color: #bfb199;
      }
    }
    @media screen and (min-width: 1600px){
      .example-box {
        height: 390px;
      }
      .example-description {
        height:155px;
      }
    }
    @media screen and (max-width: 1599px) and (min-width: 1200px){
      .example-box {
        height: 480px;
      }
      .example-description {
        height: 205px;
      }
    }
    @media screen and (max-width: 1199px){
      .example-box {
        height: 360px;
      }
      .example-description {
        height:130px;
      }
    }
  }
}

.about-holdle {
  h2 {
    margin-top: 100px;
    font-weight: 600;
    font-size: 22px;
    line-height: 35px;
    margin-bottom: 20px;
  }
  .you-get-box {
    margin: 25px 0;
    strong {
      font-size: 16px;
      color: #333;
    }
    p {
      text-align: justify;
      margin-top: 10px;
      line-height: 24px;
      color: #777;
      font-weight:  normal;

      font-size: 14px;
      strong {
        font-size: 14px;
        font-weight: bold;
      }
    }
    .you-get-left {
      img {
        width: 40px;
        height: auto;
      }
    }
    .user-said {
      margin-bottom: 30px;
      background-color: #f5f5f5;
      padding: 3px 15px;
    }
  }
  .auther-avatar {
    img {
      width: 400px;
      height: auto;
    }
  }
  .auther-info {
    h4 {
      margin-top: 0;
      color: #333;
    }
    a:hover {
      text-decoration: none;
    }
    p {
      text-align: justify;
      margin-top: 10px;
      line-height: 24px;
      color: #777;
      font-weight:  normal;

      font-size: 14px;
    }
  }
  .auther-description {
    margin-top: 30px;
    background-color: #222;
    padding: 25px 20px;
    p {
      text-align: justify;
      line-height: 26px;
      color: #fff;
      font-size: 14px;
    }
    strong {
      color: #bfb199;
    }
  }
}

.qa {
  .qa-holdle {
    h2 {
      margin-top: 100px;
      font-weight: 600;
      font-size: 22px;
      line-height: 35px;
      margin-bottom: 20px;
    }
    .you-qa-box {
      strong {
        font-size: 16px;
        color: #333;
      }
      p {
        text-align: justify;
        margin-top: 10px;
        line-height: 24px;
        color: #777;
        font-weight:  normal;
        font-size: 14px;
        strong {
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
    @media screen and (min-width: 1200px){
      .you-qa-box {
        p {
          padding-right: 35px;
        }
        margin: 25px 0;
      }
    }
    @media screen and (max-width: 1199px){
      .you-qa-box {
        padding: 0;
        margin: 45px 0;
      }
    }
  }
  .gekai {
    height: 50px;
  }
  .user-said {
    .user-said-box {
      background-color: #f9f9f9;
      margin: 25px 0;
      padding: 30px 0 0;
      min-height: 380px;
      img {
        width: 70px;
        height: auto;
      }
      h6 {
        text-align: center;
        font-size: 16px;
      }
      i {
        text-align: center;
        color: #777;
      }
      .user-said-description {
        padding: 5px 15px;
        margin-bottom: 80px;
        p {
          text-align: justify;
          margin-top: 10px;
          line-height: 24px;
          color: #666;
          font-weight:  normal;
          font-size: 14px;
        }
      }
    }
  }
}

.begin {
  margin-top: 20px;
  background-color: #222;
  height: 250px;
  // padding: 60px 0;
  a {
    .begin-box {
      margin-top: 70px;
      h4 {
        text-align: center;
        font-weight: normal;
        color: #fff;
        letter-spacing: 2px;
        font-size: 28px;
        transition: 0.3s;
      }
    }
  }
  a:hover {
    text-decoration: none;
    .begin-box {
      h4 {
        color: #bfb199;
        transition: 0.3s;
      }
    }
  }
  p {
    text-align: center;
    color: #999;
    font-weight:  300;
    letter-spacing: 3px;
    font-size: 14px;
  }
}





.new-info-modal-content {
  .new-info-modal {
    a {
      color: #222;
    }
    .new-info-modal-box {
      padding: 10px 0;
      transition: 0.3s;
      .new-info-img {
        img {
          width: 100%;
          height: auto;
          margin: 10px 0 15px;
        }
      }
      .new-info-content {
        h3 {
          font-size: 18px;
          font-weight: bolder;
          text-align: justify;
          margin: 5px 0 15px;
          line-height: 30px;
          i {
            font-size: 10px;
            color: #999;
            font-weight: lighter;
          }
        }
        p {
          text-align: justify;
        }
      }
    }
    .new-info-modal-box:hover {
      transition: 0.3s;
      background-color: #f9f9f9;
      box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.2);
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
    }
  }
}










/*  --- 响应式设置 ---  */
// pc端显示
@media screen and (min-width: 1400px){
  .slogan-box {
    h1 {
      margin-bottom: 10px;
      font-size: 3em;
      font-weight: 300;
      letter-spacing: 3px;
      strong {
        font-weight: normal;
        color: #bfb199;
      }
    }
  }
  .section-info {
    bottom: 20%;
    max-height: 550px;
    max-width: 750px;
    padding: 15px 30px;
    h2 {
      font-weight: normal;
      text-align: center;
      margin-bottom: 35px;
    }
    font-size: 16px;
    line-height: 30px;
  }
}
// ipad pro 竖屏优化
@media screen and (min-width: 960px) and (max-width: 1399px){
  .slogan-box {
    h1 {
      margin-bottom: 10px;
      font-family: "Futura";
      font-size: 88px;
    }
    p {
      font-size: 20px;
    }
  }
  .section-info {
    bottom: 15%;
    max-height: 550px;
    max-width: 750px;
    padding: 15px 30px;
    h2 {
      font-weight: normal;
      text-align: center;
      margin-bottom: 35px;
    }
    font-size: 16px;
    line-height: 30px;
  }
}
//针对 ipad air2 优化
@media screen and (min-width: 768px) and (max-width: 959px){
  .slogan-box {
    h1 {
      margin-bottom: 10px;
      font-family: "Futura";
      font-size: 88px;
    }
    p {
      font-size: 20px;
    }
  }
  .section-info {
    bottom: 15%;
    max-height: 550px;
    max-width: 650px;
    padding: 15px 30px;
    h2 {
      font-weight: normal;
      text-align: center;
      margin-bottom: 35px;
    }
    font-size: 14px;
    line-height: 26px;
  }
}
//针对 ipad air2 横屏优化
@media screen and (min-width: 960px) and (max-width: 1399px) and (orientation : landscape){
  .slogan-box {
    h1 {
      margin-bottom: 10px;
      font-family: "Futura";
      font-size: 88px;
    }
    p {
      font-size: 20px;
    }
  }
  .section-info {
    bottom: 15%;
    max-height: 550px;
    max-width: 750px;
    padding: 15px 30px;
    h2 {
      font-weight: normal;
      text-align: center;
      margin-bottom: 35px;
    }
    font-size: 14px;
    line-height: 26px;
  }
}
// 手机端
@media screen and (min-width: 280px) and (max-width: 767px){
  .slogan-box {
    h1 {
      margin-bottom: 10px;
      font-family: "Futura";
      font-size: 71px;
    }
    p {
      font-size: 16px;
    }
  }
  .section-info {
    bottom: 15%;
    max-height: 550px;
    max-width: 330px;
    padding: 15px 30px;
    h2 {
      font-weight: normal;
      text-align: center;
      margin-bottom: 25px;
      font-size: 25px;
      line-height: 40px;
    }
    font-size: 14px;
    line-height: 26px;
  }
}
