/* about-us
   ========================================================================== */
.about-us-panel{
  background-color: rgba(78, 167, 247, 0.1);
}
.ahout-title{
  border-bottom: 6px solid #4ea7f7;
  padding: 9px 16px 9px 0;
  color: #333333;
  font-size: 20px;
  line-height: 1;
  display: inline-block;
}
.ahout-us-main{
  justify-content: space-between;
  margin-top: 78px;
}
.ahout-us-main-desc > p{
  width: 476px;
  white-space: pre-wrap;
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
}
.ahout-us-main > img{
  width: 399px;
  margin-top: 44px;
  vertical-align: top;
}

/* banner
   ========================================================================== */
.banner.about-us-banner{
}
.banner.about-us-banner .banner-info{
  text-align: center;
  width: 100%;
  animation: swiper .4s;
  animation-fill-mode: forwards;
}
@keyframes swiper{
  from { transform: translateY(0);}
  to { transform: translateY(15px);}
}
@-webkit-keyframes swiper{
  from { -webkit-transform: translateY(0);}
  to { -webkit-transform: translateY(15px);}
}




/* about-history
   ========================================================================== */
   .about-history{
     background: url('../images/shanghai_bg.png') no-repeat;
     background-position: center bottom;
   }
   .about-history-line{
     width: 1042px;
     height: 2px;
     background: #4ea7f7;
     position: relative;
     margin: 300px 0 208px;
     margin-left: -21px;
   }
   .about-history-dot{
     position: absolute;
     top: 50%;
     transform: translateY(-50%) translateX(-50%);
     -webkit-transform: translateY(-50%) translateX(-50%);
     width: 16px;
     height: 16px;
     background-color: #f6c313;
     border: solid 2px #4ea7f7;
     border-radius: 50%;
   }
   .about-history-dot:nth-of-type(1){left: 173px;}
   .about-history-dot:nth-of-type(2){left: 347px;}
   .about-history-dot:nth-of-type(3){left: 520px;}
   .about-history-dot:nth-of-type(4){left: 694px;}
   .about-history-dot:nth-of-type(5){left: 868px;}
   .about-history--panel{
    width: 279px;
    background-color: #ffffff;
    box-shadow: 0px 2px 12px 0px 
      rgba(120, 120, 120, 0.22);
    border-radius: 9px;
    position: absolute;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    min-height: 184px;
    opacity: 0;
   }
   .about-history--panel:nth-of-type(1){left: 173px;top: 24px;}
   .about-history--panel:nth-of-type(2){left: 347px;bottom: 24px;}
   .about-history--panel:nth-of-type(3){left: 520px;top: 24px;}
   .about-history--panel:nth-of-type(4){left: 694px;bottom: 24px;}
   .about-history--panel:nth-of-type(5){left: 868px;top: 24px;}
   .about-history--panel:nth-of-type(1)::after,
   .about-history--panel:nth-of-type(3)::after,
   .about-history--panel:nth-of-type(5)::after{
     content: '';
     position: absolute;
     left: 50%;
     top: -20px;
     transform: translateX(-50%);
     -webkit-transform: translateX(-50%);
     border: 10px solid transparent;
     border-bottom-color: #4ea7f7;
     border-bottom-width: 14px;
   }
   .about-history--panel:nth-of-type(1).active,
   .about-history--panel:nth-of-type(3).active,
   .about-history--panel:nth-of-type(5).active{
     animation: btoC .4s ease-in-out;
     animation-fill-mode: forwards;
   }
   .about-history--panel:nth-of-type(2).active,
   .about-history--panel:nth-of-type(4).active{
    animation: ttoC .4s ease-in-out;
    animation-fill-mode: forwards;
   }
   .about-history--panel:nth-of-type(1).active{
    animation-delay:0s;
    -webkit-animation-delay:0s;
   }
   .about-history--panel:nth-of-type(2).active{
    animation-delay:.2s;
    -webkit-animation-delay:.2s;
   }
   .about-history--panel:nth-of-type(3).active{
    animation-delay:.4s;
    -webkit-animation-delay:.4s;
   }
   .about-history--panel:nth-of-type(4).active{
    animation-delay:.6s;
    -webkit-animation-delay:.6s;
   }
   .about-history--panel:nth-of-type(5).active{
    animation-delay:.8s;
    -webkit-animation-delay:.8s;
   }
   @keyframes btoC{
    from { transform: translateX(-50%) translateY(40px);opacity: 0;}
    to { transform: translateX(-50%) translateY(0);opacity: 1;}
  }
  @keyframes ttoC{
    from { transform: translateX(-50%) translateY(-40px);opacity: 0;}
    to { transform: translateX(-50%) translateY(0);opacity: 1;}
  }


   .about-history--panel:nth-of-type(2)::after,
   .about-history--panel:nth-of-type(4)::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: -22px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    border: 10px solid transparent;
    border-top-color: #4ea7f7;
    border-bottom-width: 14px;
   }
   .about-history--panel .full-year{
    background-color: #4ea7f7;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    border-radius: 9px 9px 0 0;
   }
   .about-history--panel:nth-of-type(2) .full-year,
   .about-history--panel:nth-of-type(4) .full-year{
     border-radius: 0 0 9px 9px;
   }
   .about-history--panel .about-history-detail{
     padding: 16px;
   }
   .about-history-detail .about-history-detail-ls{
     padding-left: 21px;
     position: relative;
     margin: 7px 0;
   }
   .about-history-detail .about-history-detail-ls::after{
    content: '';
    position: absolute;
    left: 0;
    width: 10px;
    height: 2px;
    background: #4ea7f7;
    top: 10px;
    margin-top: -1px;
  }
  .about-history-line-small{
    display: none;
  }