/**
* 用来放一些页面公用的css
*/

/**
* 公用排版相关,typography，这类css去掉之后只会事关美丑，不会让布局乱掉
*/
  html{
    font-size:100%;
  }
  body{
    font-size:inherit;
    font-family: 'Microsoft YaHei','Helvetica Neue',Helvetica,'Nimbus Sans L',Arial,'Liberation Sans','PingFang SC','Hiragino Sans GB','Source Han Sans CN','Source Han Sans SC','Wenquanyi Micro Hei','WenQuanYi Zen Hei','ST Heiti',SimHei,'WenQuanYi Zen Hei Sharp',sans-serif !important;
  }
  li{
    list-style: none;
  }
  @media (min-width:1200px){
    h1 {
      font-weight:500 !important;
      font-size:44px !important;
    }
  }
  @media (max-width:1199px){
    h1 {
      font-weight:400 !important;
    }
  }
  /**
  * screen 内的排版
  */
    .screen {
      padding-bottom:0px;
    }
    .screen-title{
      position:absolute;
      left:0;
      right:0;
      z-index:90;
    }
    .screen h3{
      margin-top:1em;
      margin-bottom:1em;
    }
    
    .screen-title>p {
        color: #a3a3a3;
        text-align:center;
        max-width:40em;
        padding:0 1em 2em;
        margin-left:auto;
        margin-right:auto;
    }
    
    @media (min-width:768px){
      .screen h3{
        font-size:36px;
      }
      .screen-title>p{
        font-size:18px;
      }
    }
    @media (max-width:768px){
      .screen h3{
        font-size:32px;
      }
      .screen-title>p{
        font-size:17px;
      }
    }
    @media (max-width:500px) {
      .screen h3{
        font-size:26px;
      }
      .screen-title>p{
        font-size:16px;
      }
    }
    @media (max-width:350px) {
      h1{
        font-size:32px;
      }
      .screen h3{
        font-size:24px;
      }
      .screen-title>p{
        font-size:15px;
      }
    }
  /**
  * 背景为黑的元素专用的
  */
    .black-bg {
      background-color:#2e2829 ;
    }
    
    .black-bg h3{
      color:white;
    }
  
    .black-bg p{
      color:#837e7f;
    }
    
/**
* 公用布局相关
*/
  .screen .img-wrapper{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  
  .screen .img-wrapper img{
    max-width:100%;
  }
  
/**
* 公用动画效果
*/
  /**
  * 做遮罩动画会用到
  */
    .img-clipper {
      position:absolute;
      overflow:hidden;
    }
    /**
    * changecolor
    */
    @keyframes changecolor {
        0%   {color:black;}
        50%   {color:red;}
        100% {color:black;}
    }
    @-webkit-keyframes changecolor {
        0%   {color:black;font-size:36px;}
        50%   {color:red;font-size:40px;}
        100% {color:black;font-size:36px;}
    }
    
    .a-changecolor {
        color: black;
        -webkit-animation: changecolor 2s ease 0s 1 alternate; /* Chrome, Safari, Opera */
        animation: changecolor 2s ease 0s 1 alternate;
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }
  /**
  * 从上下左右各个方向淡入画面
  */
    @keyframes flyBottomIn {
        from   {top:80px;opacity:0;}
        to {top:0px;opacity:1;}
    }
    @-webkit-keyframes flyBottomIn {
        from   {top:80px;opacity:0;}
        to {top:0px;opacity:1;}
    }
    .a-flyBottomIn {
        position: relative;
        -webkit-animation: flyBottomIn 1s ease 0s 1 ; /* Chrome, Safari, Opera */
        animation: flyBottomIn 1s ease 0s 1 ;
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }
    @keyframes flyTopIn {
        from   {top:-80px;opacity:0;}
        to {top:0px;opacity:1;}
    }
    @-webkit-keyframes flyTopIn {
        from   {top:-80px;opacity:0;}
        to {top:0px;opacity:1;}
    }
    .a-flyTopIn {
        position: relative;
        -webkit-animation: flyTopIn 1s ease 0s 1 ; /* Chrome, Safari, Opera */
        animation: flyTopIn 1s ease 0s 1 ;
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }
    @keyframes flyRightIn {
        from   {left:80px;opacity:0;}
        to {left:0px;opacity:1;}
    }
    @-webkit-keyframes flyRightIn {
        from   {left:80px;opacity:0;}
        to {left:0px;opacity:1;}
    }
    .a-flyRightIn {
        position: relative;
        -webkit-animation: flyRightIn 1s ease 0s 1 ; /* Chrome, Safari, Opera */
        animation: flyRightIn 1s ease 0s 1 ;
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }
    @keyframes flyLeftIn {
        from   {left:-80px;opacity:0;}
        to {left:0px;opacity:1;}
    }
    @-webkit-keyframes flyLeftIn {
        from   {left:-80px;opacity:0;}
        to {left:0px;opacity:1;}
    }
    .a-flyLeftIn {
        position: relative;
        -webkit-animation: flyLeftIn 1s ease 0s 1 ; /* Chrome, Safari, Opera */
        animation: flyLeftIn 1s ease 0s 1 ;
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }
  
  /**
  * 弹跳式淡入画面
  */
    @keyframes bounceIn {
        0%   {width:100%;opacity:0;}
        25% {width:50%;opacity:0.25;}
        50%   {width:100%;opacity:0.5;}
        75% {width:85%;opacity:0.85;}
        100% {width:100%;opacity:1;}
    }
    @-webkit-keyframes bounceIn {
        0%   {width:100%;opacity:0;}
        25% {width:50%;opacity:0.25;}
        50%   {width:100%;opacity:0.5;}
        75% {width:85%;opacity:0.85;}
        100% {width:100%;opacity:1;}
    }
    .a-bounceIn {
        width: 100%;
        position: relative;
        -webkit-animation: bounceIn 1s ease 0s 1 alternate; /* Chrome, Safari, Opera */
        animation: bounceIn 1s ease 0s 1 alternate;
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }
  
  /**
  * 闪烁
  */
    @keyframes blink {
        0%   {width:99.9%;opacity:1;}
        100% {width:100%;opacity:0;}
    }
    @-webkit-keyframes blink {
        0%   {width:99.9%;opacity:1;}
        100% {width:100%;opacity:0;}
    }
    .a-blink {
        -webkit-animation: blink 0.5s ease 0s 2 ; /* Chrome, Safari, Opera */
        animation: blink 0.5s ease 0s 2 ;
        -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
        animation-play-state: paused;
    }

  /**
  * 弹出
  
    @keyframes popout {
        0%   {opacity:0;}
        100% {opacity:1;}
    }
    @-webkit-keyframes popout {
        0%   {opacity:0;}
        100% {opacity:1;}
    }
    .a-popout {
        -webkit-animation: popout 0.5s ease 0s  ; 
        animation: popout 0.5s ease 0s  ;
        -webkit-animation-play-state: paused; 
        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;
    }

/**
* 定义了一些可重用的组件，这些组件类似bootstrap中的navbar，tabs等组件
* 通过给特定结构的html简单的添加css class就可以在不同地方使用了，
* 一般来说这些组件是可以在不同项目中共享使用的，属于库类组件
*/
  /**
  * ul 元素加link-list class 配合bootstrap的col相关class形成一种横排的链接列表
  */
    ul.link-list {
      list-style:none;
      padding-left:0;
      text-align:center;
    }
    .link-list>li>a{
      text-decoration:none;
      color:inherit;
    }
  
/**
* 不同页面中重复用到的页面元素
*/
  /**
  * 页头相关样式，主要是对bootstrap navbar的一些修改 
  */
    .navbar{
      margin-bottom: 0;
    }
    .navbar-brand {
      line-height:60px;
      height:60px;
      padding:0;
    }
    .navbar-brand img{
      height:60px;
      width:197px;
      padding:5px 0;
    }
    .navbar-nav>li>a {
        line-height: 30px;
        font-size: 18px;
    }
    .navbar-nav>li {
        padding:0 2em;
    }
    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
        color: #ff2727;
        background-color: transparent;
        background-image:none;
        -webkit-box-shadow:none;
        box-shadow:none; 
        border-bottom: 2px solid #ff2727;
    }
    .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.open>a{
        background-color: transparent;
        background-image:none;
        -webkit-box-shadow:none;
        box-shadow:none; 
    }
    .navbar-inverse{
      border-radius:0; 
    }
  
  /**
  * 页脚相关样式
  */
    #footer {
        color: #837e7f;
        background: #40393a;
        padding-top:2em;
        padding-bottom:2em;
        width:100%;
    }
    #footer p{
      margin-bottom:1px;
    }
    #footer .link-list a {
        font-weight: 700;
    }
    #footer .row2{
      margin-top:3em;
    }
    #footer .qrcode .col1{
      margin-top:3em;
    }
    #footer .link-list>li{
      border-left:solid 1px #9ba9ba;
    }
    @media(max-width:767px){
      #footer {
        font-size:14px;
        padding-top:1em;
        padding-bottom:0em;
      }
      #footer .link-list>li {
        margin:0.5em 0;
        
      }
      #footer .row2{
        padding:3em 1em 2em;
      }
    }
    @media(min-width:768px){
      #footer .link-list>li {
        font-size:16px;
      }
    }