/*媒体查询--移动端*/
@media screen and (max-width: 768px){
  .navigation {
    margin: 20px auto 0;
  }
  .hint {
    animation:myfirst 1s infinite ;
    -moz-animation:myfirst 1s infinite ; /* Firefox */
    -webkit-animation:myfirst 1s infinite ; /* Safari and Chrome */
    -o-animation:myfirst 1s infinite ; /* Opera */
  }
  .hint .img {
    width: 22px !important;
    height: 10px !important;
    margin: 0 auto;
    background: url('../images/sliding.png') no-repeat;
    background-size: contain;
  }
  @keyframes myfirst
  {
    100%   {bottom: 25px;}
    0% {bottom: 20px;}
  }

  @-moz-keyframes myfirst /* Firefox */
  {
    100%   {bottom: 25px;}
    0% {bottom: 20px;}
  }

  @-webkit-keyframes myfirst /* Safari and Chrome */
  {
    100%   {bottom: 25px;}
    0% {bottom: 20px;}
  }

  @-o-keyframes myfirst /* Opera */
  {
    100%   {bottom: 25px;}
    0% {bottom: 20px;}
  }
  .hidden {
    display: none;
  }
  .show {
    display: block;
  }
  .head {
    line-height: 25px;
    position: absolute;
    top: 0%;
    left: 10%;
  }
  .head img {
    width: 25px;
    height: 25px;
    margin-right: 5px;
  }
  .head span {
    font-size: 15px;
    letter-spacing: 1px;
  }
  .setting_img1 {
    background: url('../images/mobile_bg_img1.jpg') no-repeat;
    overflow: hidden;
  }
  .setting_img2 {
    background: url('../images/mobile_bg_img2.jpg') no-repeat;
    overflow: hidden;
  }
  .setting_img3 {
    background: url('../images/mobile_bg_img3.jpg') no-repeat;
    overflow: hidden;
  }
  .setting_img4 {
    background: url('../images/mobile_bg_img4.jpg') no-repeat;
    overflow: hidden;
  }
  .setting_img5 {
    background: url('../images/mobile_bg_img5.jpg') no-repeat;
  }
  .link {
    position: absolute;
    right: 10%;
    top: 0%;
  }
  .link-button {
    border: 1px #fff solid;
    border-radius: 25vw;
  }
  .link-button a {
    line-height: 7vw;
    letter-spacing: 0;
    padding: 0 3vw 0 8vw;
    font-size: 3.5vw;
    display: block;
    position: relative;
    z-index: 3;
  }

  /*第一页*/
  .img1 {
    width: 65%;
    height: 100%;
    top: 35%;
    bottom: -20%;
    background: url('../images/img2.png') no-repeat;
    background-size: contain;
    display: none;
    left: 0;
  }
  .text_img2 {
    display: none;
    width: 54vw;
    height: 18.67vw;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 8%;
  }
  .mobile-button{
    width: 65%;
    height: 13vw;
    line-height: 13vw;
    font-size: 5vw;
    border: 1px #fff solid;
    border-radius: 25vw;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 0;
    display: none;
  }
  .apple-two, .android-two {
    width: 65%;
    height: 13vw;
    line-height: 13vw;
    font-size: 5vw;
    border: 1px #fff solid;
    border-radius: 25vw;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 20%;
    display: none;
  }
  .mobile-iphone {
    width: 55%;
    height: 55%;
    background: url('../images/iphone.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 20%;
    left: 18%;
    display: inline-block;
  }
  .mobile-andorid {
    width: 55%;
    height: 55%;
    background: url('../images/android.png') no-repeat;
    background-size: contain;
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 14%;
  }
  .mobile-button a, .apple-two a, .android-two a {
    display: block;
    text-align: center;
    text-indent: 30px;
    letter-spacing: 1px;
    z-index: 9;
    position: relative;
  }

  /*第二页*/
  .mobile-model {
    width: 100%;
    display: none;
  }
  .character {
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 67%;
    left: 0;
    right: 0;
    text-align: center;
    display: none;
    letter-spacing: 1px;
  }
  .character h6 {
    font-size: 20px;
    text-align: center;
  }
  .character p {
    padding-top: 20px;
    font-size: 13px;
    text-align: left;
  }
  .download-button {
    height: 22px;
    line-height: 17px;
    border: 1px #fff solid;
    border-radius: 12px;
    position: absolute;
    top: 3%;
    right: 25px;
    z-index: 3;
    text-indent: 6%;
    padding: 0 3% 0 2%;
  }
  .icon-iphone {
    width: 30%;
    height: 55%;
    display: inline-block;
    background: url('../images/iphone.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 17%;
    left: 13%;
  }
  .icon-android {
    width: 30%;
    height: 55%;
    display: inline-block;
    background: url('../images/android.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 15%;
    left: 13%;
  }
  .download-button a {
    font-size: 3vw;
    letter-spacing: 0;
  }

  /*第三页*/
  .mobile-bookreview {
    width: 100%;
    display: none;
  }
  .location-review, .location-reviews {
    position: absolute;
    top: 73%;
    left: 0;
    right: 0;
    margin: 0 auto;
    letter-spacing: 1px;
    display: none;
  }
  .interact {
    text-align: center;
    font-size: 20px;
    padding: 0 0 5px 0;
  }
  .zero {
    text-align: center;
    font-size: 13px;
  }

  /*第四页*/
  .mobile-books {
    width: 100%;
    display: none;
    /* margin: 0 auto; */
  }

  /*第五页*/
  .mobile-img {
    width: 60%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 28%;
    display: none;
  }
  .mobile-download {
    width: 50%;
    height: 11vw;
    line-height: 11vw;
    font-size: 16px;
    border: 1px #fff solid;
    border-radius: 25px;
    margin: 0 auto;
    letter-spacing: 1px;
    text-align: left;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25%;
    text-indent: 18%;
  }
  .mobile-download i {
    position: absolute;
    top: 20%;
  }
  .copyright2 {
    text-align: center;
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    letter-spacing: 1px;
    z-index: 33;
    display: none;
  }
  .copyright2 h6 {
    font-size: 11px;
    padding-bottom: 5px;
  }
  .copyright2 p {
    font-size: 8px;
  }

  /*效果*/
  .add {
    opacity: 0;
  }
  /*右上方按钮*/
  .fadein {
    animation: fadeIn 0.7s;
  }
  @keyframes fadeIn {
    from   { opacity: 0; }
    to     { opacity: 1; }
  } 
  .fadeout {
    animation: fadeout 0.7s;
  }
  @keyframes fadeout {
    from    { opacity: 1; }
    to      { opacity: 0; }
  }
  /*第一页*/
  .graphic {
    display: block;
    animation: mobile 1s;
  }
  @keyframes mobile {
    from { opacity: 0;right: -60%; }
    to   { opacity: 1;right: 0; }
  }

  .gestures {
    display: block;
    animation: moves 0.9s;
  }
  @keyframes moves {
    from {  opacity: 0;left: -40%; }
    to   { opacity: 1;left: 0; }
  }

  .apple-one, .android-one {
    display: block;
    animation: put 0.8s;
  }
  @keyframes put {
    from {  opacity: 0;bottom: -40%; }
    to   { opacity: 1;bottom: 0; }
  }
  /*第一页*/

  /*第二页*/
  .stretch { /*与第三页、第四页文字共用*/
    display: block !important;
    animation: change 0.4s;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
  }
  @keyframes change {
    from {
      opacity: 0;
      -webkit-transform: scale(1.5,1.5);
      -moz-transform: scale(1.5,1.5);
      -o-transform: scale(1.5,1.5);
      transform: scale(1.5,1.5);
    }
    to   {
      opacity: 1;
      -webkit-transform: scale(1,1);
      -moz-transform: scale(1,1);
      -o-transform: scale(1,1);
      transform: scale(1,1);
    }
  }
  /*第二页*/


  /* 第三页 */
  .picture { /*与第四页共用*/
    display: block;
    animation: print 1s;
  }
  @keyframes print {
    from {
      opacity: 0;
      width: 0;
      transform: translate(0, 0);
    }
    to   {
      opacity: 1;
      width: 100%;
      transform: translate(0, 0);
    }
  }
  /* 第三页 */

  /*第五页*/
  .reading {
    display: block;
    animation: readingimg 1s;
  }
  @keyframes readingimg {
    from {
      opacity: 0;
      width: 0;
      top: 0;
      transform: translate(0, 0) scale(1.5,1.5,0);
    }
    to   {
      opacity: 1;
      width: 60%;
      top: 28%;
      transform: translate(0, 0) scale(1.5,1.5,0);
    }
  }

  .record {
    display: block;
    animation: recordText 1s;
  }
  @keyframes recordText {
    from {  opacity: 0;left: -60%; }
    to   { opacity: 1;left: 0; }
  }
  /*第五页*/

  .twoButton {
    display: block;
    animation: two 1s;
  }
  @keyframes two {
    from {  opacity: 0;right: -90%; }
    to   { opacity: 1;right: 0; }
  }

  /* iPhone下载提示框 */
  .content {
    width: inherit !important;
    margin: 0 8vw !important;
  }
  .content p {
    margin: 39px 0 41px !important;
    font-size: 16px !important;
    font-weight: 500;
  }
  .content a {
    width: 170px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 16px !important;
    margin: 0 auto 20px !important;
  }

  /* Android引导页 */
  .addStyle {
    background: none !important;
    top: 60px !important;
  }
  .remind p {
    color: #fff;
    font-size: 18px;
    margin: 0 auto !important;
    letter-spacing: 0;
  }
  .orange {
    font-size: 16px;
    letter-spacing: 0;
    margin: 35px 0 30px;
  }
  .orange span {
    color: #FF8041;
  }
  .guide {
    height: 95px;
    background: url('../images/guide.png') no-repeat;
    background-size: 100%;
  }
  .guidance {
    width: 34px;
    height: 86px;
    position: fixed;
    top: 30px;
    right: 23px;
    background: url('../images/guidance.png') no-repeat;
    background-size: 100%;
    z-index: 9999;
  }
}