section.first {
  background: linear-gradient(rgba(63, 103, 179, 0.64), rgba(62, 87, 187, 0.21)), url(../images/about/first-bg.jpg) no-repeat bottom;
  background-size: cover; }

section.about .introduce-block {
  padding: 7.5rem 30px; }
  section.about .introduce-block h1 {
    color: #5A76C3; }
  section.about .introduce-block h3 {
    color: #5A76C3; }
  section.about .introduce-block p.fu-title {
    color: #5A76C3; }
section.about .icon-angle-right {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  background: url(../images/angle-right.svg) no-repeat center;
  background-size: contain; }
  section.about .icon-angle-right.blue {
    background: url(../images/angle-right-blue.svg) no-repeat center; }
section.about .vision {
  background: linear-gradient(rgba(241, 242, 255, 0.8), rgba(241, 242, 255, 0.8)), url(../images/about/vision-bg.jpg) no-repeat bottom;
  background-size: cover; }
  section.about .vision > div {
    padding: 11rem 45px; }
  section.about .vision h1 {
    font-size: 48px;
    font-weight: 500;
    color: #5A76C3; }
  section.about .vision p {
    font-size: 24px;
    line-height: 1.2;
    color: rgba(39, 61, 121, 0.5); }
section.about .media {
  background-color: rgba(0, 0, 0, 0.03); }
  section.about .media__wrapper {
    position: relative;
    padding: 80px 110px 0; }
    section.about .media__wrapper .prev-btn, section.about .media__wrapper .next-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      height: 48px;
      width: 48px;
      border-radius: 50%;
      text-align: center;
      box-shadow: 2px 2px 10px 3px rgba(0, 0, 0, 0.04); }
      section.about .media__wrapper .prev-btn:hover, section.about .media__wrapper .next-btn:hover {
        box-shadow: 2px 2px 10px 3px rgba(0, 0, 0, 0.1); }
    section.about .media__wrapper .prev-btn {
      left: 35px;
      background: url(../images/about/prev-btn.svg) no-repeat center;
      background-size: 16px 16px; }
    section.about .media__wrapper .next-btn {
      right: 35px;
      background: url(../images/about/next-btn.svg) no-repeat center;
      background-size: 16px 16px; }
  section.about .media__box {
    position: relative;
    top: 0;
    transition: all 0.3s ease;
    display: block;
    margin: 0 5px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 2px 2px 15px 5px rgba(0, 0, 0, 0.02); }
    section.about .media__box:hover {
      top: -6px;
      box-shadow: 0 2px 8px 4px #E9E9E9; }
    section.about .media__box:focus {
      text-decoration: none; }
    section.about .media__box .cover {
      display: inline-block;
      width: 100%;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      overflow: hidden; }
      section.about .media__box .cover img {
        width: 100%; }
    section.about .media__box .content {
      padding: 20px; }
      section.about .media__box .content .title {
        font-size: 16px;
        line-height: 1.5;
        color: #62646D;
        margin-bottom: 8px;
        height: 5rem;
        overflow: hidden; }
      section.about .media__box .content .desc {
        font-size: 12px;
        color: #9B9B9B;
        margin: 0;
        height: 4.2rem;
        overflow: hidden; }
    section.about .media__box .author {
      padding: 5px 20px 15px 20px;
      color: #9B9B9B;
      font-size: 11px; }
      section.about .media__box .author .time {
        float: right; }
section.about .joinus {
  display: block;
  padding: 7.5rem 0 5rem;
  text-align: center; }
  section.about .joinus .btn-primary-circle {
    font-size: 14px; }
  section.about .joinus img {
    max-width: 90%; }
section.about .culture-box {
  padding: 4.5rem 0; }
  section.about .culture-box .introduce-block {
    padding: 3rem 35px; }
    section.about .culture-box .introduce-block p.fu-title {
      margin: 10px 0 25px; }
section.about .blog-list {
  background: linear-gradient(rgba(0, 33, 183, 0.03), rgba(0, 33, 183, 0.03)), url(../images/about/blog-bg.png) no-repeat bottom;
  background-size: cover; }
  section.about .blog-list > div {
    padding: 12rem 45px; }
  section.about .blog-list ul li {
    padding: 15px 0; }
    section.about .blog-list ul li a {
      font-size: 24px;
      font-weight: 300;
      color: #62646D; }
    section.about .blog-list ul li span {
      font-weight: 300;
      color: rgba(98, 100, 109, 0.8); }
    section.about .blog-list ul li small {
      font-size: 18px;
      color: rgba(98, 100, 109, 0.8); }
    section.about .blog-list ul li:hover a, section.about .blog-list ul li:hover span, section.about .blog-list ul li:hover small {
      color: #2A86F3; }
section.about .members-list {
  position: relative;
  margin-left: -5px;
  margin-right: -5px;
  margin-top: 30px; }
  section.about .members-list > div {
    padding: 0; }
  section.about .members-list figure {
    padding: 5px;
    margin: 0;
    overflow: hidden;
    position: relative; }
    section.about .members-list figure img {
      position: relative; }
    section.about .members-list figure img + img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden; }
    section.about .members-list figure.hover img:not(:only-child) {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden; }
    section.about .members-list figure.hover img:not(:only-child) + img {
      position: relative;
      height: auto;
      opacity: 1;
      visibility: visible; }
    @media screen and (min-width: 768px) {
      section.about .members-list figure:hover img:not(:only-child) {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        visibility: hidden; }
      section.about .members-list figure:hover img:not(:only-child) + img {
        position: relative;
        height: auto;
        opacity: 1;
        visibility: visible; } }
  section.about .members-list__add {
    position: relative;
    margin: 5px;
    border: 3px dashed #5A76C3;
    cursor: pointer; }
    section.about .members-list__add img {
      opacity: 0; }
    section.about .members-list__add .center-child {
      position: absolute;
      top: 50%;
      left: 10%;
      transform: translateY(-50%);
      font-size: 22px;
      color: #5A76C3; }
    section.about .members-list__add:hover {
      border-color: #2A86F3; }
      section.about .members-list__add:hover .center-child {
        color: #2A86F3; }
section.about .team-img {
  max-width: 100%; }
section.about .joinus-email {
  margin-top: 20px; }
  section.about .joinus-email a {
    font-size: 18px;
    color: #2A86F3; }
section.about .departments-list {
  background: linear-gradient(rgba(90, 118, 195, 0.8), rgba(90, 118, 195, 0.8)), url(../images/about/jobs-bg.png) no-repeat center;
  background-size: auto 100%; }
  section.about .departments-list .nav {
    box-shadow: none; }
  section.about .departments-list .department-box {
    position: relative;
    top: 0;
    float: left;
    width: 140px;
    height: 140px;
    margin: 0 5px;
    margin-top: 10px;
    line-height: 1.3;
    border-radius: 4px;
    font-size: 24px;
    color: #5A76C3;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.7); }
    section.about .departments-list .department-box.active, section.about .departments-list .department-box:hover {
      top: -6px;
      background-color: white; }
    section.about .departments-list .department-box__name {
      position: absolute;
      top: 50%;
      left: 20px;
      right: 20px;
      transform: translateY(-50%); }
section.about .position-list {
  box-shadow: none; }
  section.about .position-list .nav-link {
    padding: 0;
    margin: 5px 40px 5px 0;
    color: #5A76C3;
    font-size: 20px;
    font-weight: 400; }
    section.about .position-list .nav-link::before {
      background-color: #3C88FF; }
    section.about .position-list .nav-link.active {
      color: #3C88FF;
      font-weight: 500; }
section.about .position {
  padding: 95px 0; }
  section.about .position__desc {
    padding: 20px 0 0;
    margin: 0; }
    section.about .position__desc:last-child {
      padding-top: 0; }
  section.about .position__content {
    padding: 20px 0; }
    section.about .position__content h2 {
      color: #629FFF;
      font-size: 24px; }
    section.about .position__content p {
      color: #62646D; }
section.about .members-media {
  display: flex;
  align-items: flex-start;
  padding: 25px 0; }
  section.about .members-media__cover {
    width: 100px;
    margin-right: 20px;
    border-radius: 5px;
    transition: transform 0.3s; }
    section.about .members-media__cover:hover {
      transform: scale(1.2); }
  section.about .members-media__content {
    max-width: 460px;
    -webkit-box-flex: 1;
    color: #62646D; }
@media (max-width: 991.98px) {
  section.about .media__wrapper {
    padding: 80px 20px 0; }
    section.about .media__wrapper .prev-btn, section.about .media__wrapper .next-btn {
      width: 30px;
      height: 30px; }
    section.about .media__wrapper .prev-btn {
      left: -20px; }
    section.about .media__wrapper .next-btn {
      right: -20px; }
  section.about .media__box {
    margin: 0; } }
@media (max-width: 767.98px) {
  section.about .introduce-block {
    padding: 3rem 20px; }
  section.about .icon-angle-right {
    width: 12px;
    height: 12px; }
  section.about .vision > div {
    padding: 5rem 30px; }
  section.about .vision h1 {
    font-size: 24px; }
  section.about .vision p {
    font-size: 16px; }
  section.about .media .prev-btn, section.about .media .next-btn, section.about .media .desc {
    display: none; }
  section.about .media__wrapper {
    padding: 20px 0 0; }
  section.about .media__box {
    position: relative;
    overflow: hidden;
    margin-top: 15px;
    padding-left: 120px; }
    section.about .media__box:hover {
      top: 0; }
    section.about .media__box .cover {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 120px;
      border-radius: 0; }
      section.about .media__box .cover img {
        width: 145px; }
    section.about .media__box .content {
      padding: 5px 15px 0; }
      section.about .media__box .content .title {
        margin-bottom: 0;
        font-size: 14px;
        height: 4.5rem; }
    section.about .media__box .author {
      padding: 5px 15px; }
  section.about .blog-list > div {
    padding: 2rem 30px; }
  section.about .blog-list ul li {
    padding: 5px 0; }
    section.about .blog-list ul li a {
      font-size: 16px; }
    section.about .blog-list ul li .icon-angle-right {
      margin-right: 10px; }
    section.about .blog-list ul li span {
      display: none; }
    section.about .blog-list ul li small {
      display: none;
      font-size: 14px; }
  section.about .culture-box {
    padding: 0; }
    section.about .culture-box .introduce-block {
      padding: 3rem 20px; }
  section.about .departments-list {
    text-align: center; }
    section.about .departments-list .department-box {
      width: 90px;
      height: 68px;
      font-size: 16px; }
      section.about .departments-list .department-box__name {
        left: 10px;
        right: 10px; }
  section.about .position__content h2 {
    font-size: 18px; }
  section.about .position-list .nav-link {
    font-size: 16px; } }