@media(min-width:769px){
  .screen {
    padding-top:0px;
    padding-bottom:0px;
  }
}
@media(max-width:768px){
  .screen {
    padding-top:20px;
    padding-bottom:0px;
  }
}
/**
* 提示框相关
*/
  .screen .info {
    position:relative;
    float:left;
    background-color:#FFF;
    top:100px;
    border:dotted 2px #ccc;
    border-radius: 40px;
    color:#666666;
    -webkit-box-shadow: -3px 5px 18px rgba(0,0,0,.2);
    box-shadow: -3px 5px 18px rgba(0,0,0,.2);
    margin:0 auto ;
    text-align:left;
  }
  .screen .info h3{
    color:#000000;
  }
  .screen .info p{
    color:#666666;
  }
  
  @media(min-width:769px){
    .screen .info.right-side{
      -webkit-box-shadow: 3px 5px 18px rgba(0,0,0,.2);
      box-shadow: 3px 5px 18px rgba(0,0,0,.2);
    }
  }

  .screen .info .badge{
    color:#ff9b19;
    border:solid 1px #ff9b19;
    background-color:white;
  }
  
  .screen .info:after{
    content:'';
    position:absolute;
    right:-13px;top:40%; 
    width:25px; height:25px;
    background:inherit;
    border: dotted 2px #ccc;
    border-bottom: none;
    border-right: none;
    transform:rotate(135deg);
    /*box-shadow: -3px -6px 7px -1px rgba(0,0,0,.2);*/
  }
  
  .screen .info.right-side:after{
    right:auto;left:-13px;
    transform:rotate(-45deg);
  }
  
  .screen .info .badge{
    margin-left:1em;
  }
  
  /**
  * 手机时提示在图片上方, 箭头向下
  */
  @media(min-width:1200px){
    .screen .info {
      width:390px;
      padding:44px 0px 40px 80px;
      margin-left:136px;
    }
    .screen .info.right-side{
      margin-left:-30px;
    }
    .screen .info .badge{
      font-size:16px;
    }
    .screen .info h3{
      margin-top:0px;
      margin-bottom:15px;
    }
    .screen .info p{
      font-size:22px;
      margin-bottom:0;
    }
  }
  @media(max-width:1199px){
    .screen .info {
      width:300px;
      padding:0.5em 40px;
      height:186px;
      margin-left:100px;
    }
    .screen .info.right-side{
      margin-left:-10px;
    }
    .screen .info .badge{
      font-size:12px;
    }
    .screen .info h3{
      margin-top:20px;
      margin-bottom:10px;
    }
    .screen .info p{
      font-size:18px;
    }
  }
  @media(max-width:991px){
    .screen .info {
      width:270px;
      padding:0.5em 0px 0.5em 30px;
      height:150px;
      margin-left:30px;
    }
    .screen .info.right-side{
      margin-left:50px;
    }
    .screen .info .badge{
      font-size:12px;
    }
    .screen .info h3{
      margin-top:20px;
      margin-bottom:10px;
    }
    .screen .info p{
      font-size:18px;
    }
  }
  @media(max-width:768px){
    .screen {
      margin-bottom:30px;
      height:730px;
    }
    .screen .info {
      width:100%;
      margin-top:-20px;
      margin-bottom:20px;
      margin-left:0;
      padding:0 10px;
      height:auto;
      top:0px;
      border:none;
      border-radius: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
      text-align:center;
    }
    .screen .info.right-side{
      margin-left:0;
      top:-608px;
    }
    .screen .info h3{
      margin-top:20px;
      margin-bottom:10px;
    }
    .screen .info p{
      font-size:16px;
    }
    .screen .info:after{
      display:none;
      right:auto;bottom:-10px;top:auto;
      transform:rotate(225deg);
    }
    .screen .info.right-side:after{
      right:auto;bottom:-10px;top:auto;left:auto;
      transform:rotate(225deg);
    }
  }

/**
* 手机图片相关
*/
  .screen .img-wrapper{
    float:left;
    position:relative;
    height:608px;
    width:604px;
    margin-bottom:100px;
  }
  .screen img{
    position:absolute;
    left:148px;
  }
  .screen.even img{
    left:0px;
    margin-left:136px;
  }
  @media(max-width:1199px){
    .screen .img-wrapper{
      height:608px;
      width:500px;
    }
    .screen img.bg{
      max-width:2000%;
    }
    /**
    * 通过img的高度来自适应img-wrapper的宽度
    */
    .screen img.phone{
      max-height:100%;
    }
    .screen img{
      left:100px;
    }
    .screen.even img{
      margin-left:100px;
    }
  }
  @media(max-width:991px){
    .screen .img-wrapper{
      height:608px;
      width:350px;
    }
    .screen img.bg{
      max-width:2000%;
    }
    /**
    * 通过img的高度来自适应img-wrapper的宽度
    */
    .screen img.phone{
      max-height:100%;
    }
    .screen img{
      left:80px;
    }
    .screen.even img{
      margin-left:30px;
    }
  }
  @media(max-width:768px){
    .screen .img-wrapper{
      float:none;
      height:608px;
      width: 290px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom:0;
      top: 100px;
    }
    .screen img.bg{
      display:none;
    }
    /**
    * 通过img的高度来自适应img-wrapper的宽度
    */
    .screen img.phone{
      max-height:100%;
    }
    .screen img{
      left:0;
    }
    .screen.even img{
      margin-left:0;
    }
  }

/**
* 本页动效
*/
  /**
  * 滑屏动画
  */
    @keyframes slideToBottom {
        0%   {top:0px;}
        80%   {top:-385px;}
        100% {top:-335px;}
    }
    @-webkit-keyframes slideToBottom {
        0%   {top:0px;}
        80%   {top:-385px;}
        100% {top:-335px;}
    }
    .a-slideToBottom {
        top:-335px;
        -webkit-animation: slideToBottom 2s ease 0s 1 ; /* Chrome, Safari, Opera */
        animation: slideToBottom 2s ease 0s 1 ;
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }
  /**
  * 突出动画
  */
    @keyframes scaleOut {
        0%   {width:100%;top:0;opacity:1;}
        50%   {width:110%;top:-20px;opacity:1;}
        100% {width:100%;top:0;opacity:1;}
    }
    @-webkit-keyframes scaleOut {
        0%   {width:100%;top:0;opacity:1;}
        50%   {width:110%;top:-20px;opacity:1;}
        100% {width:100%;top:0;opacity:1;}
    }
    .a-scaleOut {
        width:100%;
        max-width:110% !important;
        left:auto;
        right:auto;
        top:0;
        opacity:0;
        -webkit-animation: scaleOut 3s ease 0s 1 ; /* Chrome, Safari, Opera */
        animation: scaleOut 3s ease 0s 1 ;
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }
  /**
  * 控制动效触发时机
  */
    .before-show{
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }
    .animated{
        -webkit-animation-play-state: running; /* Chrome, Safari, Opera */
        animation-play-state: running;
    }
    .before-show .gif{
      display:none;
    }

/**
* 第1屏相关
*/
  .screen1 {
    padding-top:108px;
  }
  @media(max-width:767px){
    .screen1 {
      padding-top:20px;
    }
  }
/**
* 第2屏相关
*/

  .screen2 .gif {
    z-index:10;
  }
  
/**
* 第3屏相关
*/
  .screen3 .img-clipper{
    position:absolute;
    z-index:10;
    height:450px;
    left:0;
    right:0;
    top:95px;
  }
  
  img.screen3-1 {
    position:relative;
    z-index:10;
  }
  .screen3-bg{
    z-index:5;
  }
/**
* 第4屏相关
*/

  .screen4 .gif {
    z-index:10;
  }
/**
* 第5屏相关
*/
  img.phone{
    border:1px solid #eeeeee
  }