.aboutBanner {
  height  : 100vh;
  position: relative;
}

.aboutBanner .--bg {
  width   : 100%;
  height  : 100%;
  position: relative;
}

.aboutBanner .--bg::after {
  content   : "";
  background: linear-gradient(180deg, rgba(32, 41, 58, 0.8) 0%, rgba(32, 41, 58, 0) 16.86%), linear-gradient(0deg, rgba(32, 41, 58, 0.9) 0%, rgba(32, 41, 58, 0) 44.7%);
  top       : 0;
  position  : absolute;
  left      : 0;
  width     : 100%;
  height    : 100%;
}

.aboutBanner .--bg img {
  width             : 100%;
  height            : 100%;
  -o-object-fit     : cover;
  object-fit        : cover;
  -o-object-position: bottom;
  object-position   : bottom;
}

.aboutBanner .--content {
  position: absolute;
  bottom  : 40px;
  width   : 100%;
}

.aboutBanner .--title {
  color         : #fff;
  font-weight   : 600;
  text-transform: uppercase;
  position      : relative;
  width         : -moz-max-content;
  width         : max-content;
  max-width     : 300px;
  line-height   : 1;
}

.aboutBanner .--title::after {
  content      : "";
  position     : absolute;
  bottom       : 6px;
  left         : calc(100% + 12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  width        : 100px;
}

@media (max-width: 769px) {
  .aboutBanner {
    height: 500px;
  }
}

.aboutIntro {
  padding: 80px 0;
}

.aboutIntro .--left {
  width : 100%;
  height: 100%;
}

.aboutIntro .--left img {
  width        : calc(100% - 80px);
  height       : 100%;
  min-height   : 600px;
  -o-object-fit: cover;
  object-fit   : cover;
}

.aboutIntro .--content {
  padding-left: 132px;
  font-size   : 16px;
  font-weight : 600;
  margin      : 32px 0 20px;
  position    : relative;
}

.aboutIntro .--content::after {
  content      : "";
  position     : absolute;
  left         : 0px;
  top          : 10px;
  border-bottom: 2px solid var(--color-1);
  width        : 108px;
}

.aboutIntro .--des {
  padding-left      : 132px;
  overflow          : hidden;
  text-overflow     : ellipsis;
  line-height       : 22px;
  -webkit-line-clamp: 6;
  display           : -webkit-box;
  -webkit-box-orient: vertical;
}

.aboutIntro .--viewdetail {
  font-weight   : 600;
  margin-left   : 132px;
  margin-top    : 20px;
  text-transform: uppercase;
  display       : flex;
  color         : var(--color-1);
}

.aboutIntro .--viewdetail:hover::after {
  border: 1px solid var(--color-1);
}

.aboutIntro .--year {
  display    : flex;
  align-items: end;
  margin-top : 40px;
}

.aboutIntro .--year .--number {
  font-size   : 96px;
  font-weight : 700;
  margin-right: 8px;
  line-height : 1;
  color       : var(--color-1);
}

.aboutIntro .--year .--txt {
  padding-bottom: 16px;
}

.aboutIntro .--year span {
  color         : rgba(28, 28, 28, 0.6);
  text-transform: uppercase;
}

.aboutIntro .--year .--specialized {
  font-size     : 20px;
  margin-top    : 8px;
  font-weight   : 700;
  text-transform: uppercase;
  line-height   : 1;
  margin-bottom : 0;
}

@media (max-width: 769px) {
  .aboutIntro {
    padding: 60px 0;
  }

  .aboutIntro .--left {
    display: none;
  }

  .aboutIntro .segTitle {
    position     : relative;
    margin-bottom: 40px;
  }

  .aboutIntro .segTitle::after {
    content      : "";
    position     : absolute;
    top          : calc(100% + 8px);
    border-bottom: 1px solid var(--color-1);
    left         : 0;
    width        : 110px;
  }

  .aboutIntro .--img {
    width  : 100%;
    display: block !important;
  }

  .aboutIntro .--img img {
    width        : 100%;
    height       : auto;
    -o-object-fit: contain;
    object-fit   : contain;
  }

  .aboutIntro .--content {
    padding-left: 0;
    margin-top  : 24px 0 20px;
  }

  .aboutIntro .--content::after {
    display: none;
  }

  .aboutIntro .--des {
    padding-left: 0;
  }

  .aboutIntro .--viewdetail {
    margin-left: 0;
  }

  .aboutIntro .--year {
    margin-top: 24px;
  }

  .aboutIntro .--year .--number {
    font-size   : 86px;
    margin-right: 1rem;
  }

  .aboutIntro .--year .--specialized {
    font-size  : 16px;
    line-height: normal;
  }
}

.aboutHistory {
  padding : 80px 0;
  position: relative;
  color   : #fff;
}

.aboutHistory .--bg {
  position: absolute;
  left    : 0;
  width   : 100%;
  bottom  : 0;
  height  : 100%;
  z-index : -1;
}

.aboutHistory .--bg::after {
  content   : "";
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(63deg, #1a2130 33.29%, rgba(26, 33, 48, 0) 100%);
}

.aboutHistory .--bg img {
  width        : 100%;
  height       : 100%;
  -o-object-fit: cover;
  object-fit   : cover;
}

.aboutHistory .--des {
  width      : 500px;
  align-items: center;
}

.aboutHistory .--des .--number {
  font-size   : 80px;
  line-height : 1;
  margin-right: 12px;
  font-weight : 600;
}

.aboutHistory .--des article {
  text-align: justify;
}

.aboutHistory .--history {
  position  : relative;
  margin-top: 120px;
}

.aboutHistory .--history::after {
  content      : "";
  border-bottom: 1px dashed #fff;
  top          : 52.5px;
  width        : 100%;
  z-index      : -1;
  position     : absolute;
  left         : 0;
}

.aboutHistory .--history .arrow {
  position       : absolute;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 105px;
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  pointer-events : none;
  color          : #000;
}

.aboutHistory .--history .arrow .--arrow {
  width          : 44px;
  height         : 44px;
  background     : #fff;
  cursor         : pointer;
  display        : flex;
  pointer-events : auto;
  align-items    : center;
  justify-content: center;
}

.aboutHistory .--listHistory {
  display        : flex;
  justify-content: space-between;
  position       : relative;
}

.aboutHistory .--listHistory .--item {
  cursor: pointer;
}

.aboutHistory .--listHistory .--item.active {
  margin-top: -52px;
  width     : 400px;
}

.aboutHistory .--listHistory .--item.active .--img {
  margin  : auto;
  position: relative;
  z-index : 1;
  width   : 130px;
  height  : 130px;
}

.aboutHistory .--listHistory .--item.active .--img .--year {
  font-size: 28px;
}

.aboutHistory .--listHistory .--item.active .--img::after {
  background: #fff;
}

.aboutHistory .--listHistory .--item .--img {
  width        : 105px;
  height       : 105px;
  border       : 6px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  overflow     : hidden;
  position     : relative;
  background   : #fff;
}

.aboutHistory .--listHistory .--item .--img img {
  width        : 100%;
  height       : 100%;
  -o-object-fit: cover;
  object-fit   : cover;
}

.aboutHistory .--listHistory .--item .--img .--year {
  position   : absolute;
  z-index    : 1;
  top        : 50%;
  color      : #000;
  font-size  : 20px;
  text-shadow: 0 0 10px #fff;
  font-weight: 600;
  left       : 50%;
  transform  : translate(-50%, -50%);
}

.aboutHistory .--listHistory .--item .--txt {
  position  : relative;
  padding   : 82px 32px 32px;
  margin-top: -52px;
}

.aboutHistory .--listHistory .--item .--txt::before {
  content   : "";
  position  : absolute;
  top       : -10px;
  left      : -10px;
  width     : calc(100% + 20px);
  height    : 100%;
  border    : 1px solid rgba(255, 255, 255, 0.16);
  z-index   : -1;
  background: #1a2130;
}

.aboutHistory .--listHistory .--item .--image {
  position: absolute;
  left    : 0;
  top     : 0;
  width   : 100%;
  height  : 100%;
}

.aboutHistory .--listHistory .--item .--image::after {
  content   : "";
  position  : absolute;
  background: var(--color-1);
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
}

.aboutHistory .--listHistory .--item .--image img {
  width        : 100%;
  height       : 100%;
  -o-object-fit: cover;
  object-fit   : cover;
}

.aboutHistory .--listHistory .--item .--des {
  width   : 100%;
  position: relative;
  z-index : 1;
}

@media (max-width: 769px) {
  .aboutHistory {
    padding: 60px 0;
  }

  .aboutHistory .--content {
    flex-flow  : column;
    align-items: flex-start !important;
    gap        : 24px;
  }

  .aboutHistory .--des {
    width: 100%;
  }

  .aboutHistory .--des .--number {
    font-size: 50px;
  }

  .aboutHistory .--listHistory {
    display: none !important;
  }

  .aboutHistory .--listHistory.mobi {
    display: flex !important;
  }

  .aboutHistory .--listHistory .--item.active {
    width: 100%;
  }

  .aboutHistory .--listHistory .--item.active .--img {
    width : 90px;
    height: 90px;
  }

  .aboutHistory .--listHistory .--item.active .--img .--year {
    font-size: 18px;
  }

  .aboutHistory .--listHistory .--item .--txt {
    width  : calc(100% - 60px);
    margin : -40px auto 0;
    padding: 50px 16px 16px;
  }

  .aboutHistory .--history {
    margin-top: 80px;
  }

  .aboutHistory .--history .arrow .--arrow {
    width : 32px;
    height: 32px;
  }
}

.aboutValue {
  position: relative;
  padding : 80px 0;
}

.aboutValue .--bg {
  position: absolute;
  left    : 0;
  width   : 100%;
  bottom  : 0;
  height  : 100%;
  z-index : -1;
}

.aboutValue .--bg::after {
  content   : "";
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(63deg, #1a2130 33.29%, rgba(26, 33, 48, 0) 100%);
}

.aboutValue .--bg img {
  width        : 100%;
  height       : 100%;
  -o-object-fit: cover;
  object-fit   : cover;
}

.aboutValue .--top {
  display      : flex;
  gap          : 100px;
  margin-bottom: 80px;
}

.aboutValue .--top .--item {
  color: #fff;
}

.aboutValue .--top .--item:first-child {
  width: 460px;
}

.aboutValue .--top .--item:last-child {
  width: 460px;
}

.aboutValue .--top .--item .--des {
  opacity: 0.8;
}

.aboutValue .--top .--name {
  font-size    : 32px;
  font-weight  : 600;
  margin-bottom: 24px;
}

.aboutValue .segTitle {
  color        : #fff;
  margin-bottom: 44px;
}

.aboutValue .--listValue {
  display              : grid;
  gap                  : 8px;
  grid-template-columns: repeat(4, 1fr);
}

.aboutValue .--listValue .--itemValue {
  border                 : 1px solid rgba(255, 255, 255, 0.2);
  background             : rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter        : blur(2px);
  overflow               : hidden;
  height                 : 200px;
  display                : flex;
  flex-flow              : column;
  justify-content        : center;
  align-items            : center;
  padding                : 0 32px;
}

.aboutValue .--listValue .--itemValue.active .--txt {
  top: 0;
}

.aboutValue .--listValue .--itemValue img {
  opacity      : 0.4;
  width        : 48px;
  height       : 48px;
  -o-object-fit: contain;
  object-fit   : contain;
  margin-bottom: 12px;
}

.aboutValue .--listValue .--name {
  font-size    : 18px;
  font-style   : normal;
  font-weight  : 600;
  color        : #fff;
  margin-bottom: 0;
}

.aboutValue .--listValue .--txt {
  position       : absolute;
  top            : 100%;
  background     : var(--color-1);
  width          : 100%;
  height         : 100%;
  transition     : all 0.5s ease;
  padding        : 0 32px;
  text-align     : center;
  display        : flex;
  left           : 0;
  flex-flow      : column;
  justify-content: center;
}

.aboutValue .--listValue .--txt .--des {
  color     : rgba(255, 255, 255, 0.8);
  margin-top: 12px;
  font-size : 15px;
}

@media (max-width: 769px) {
  .aboutValue {
    padding: 60px 0;
  }

  .aboutValue .--top {
    flex-flow    : column;
    gap          : 44px;
    margin-bottom: 60px;
  }

  .aboutValue .--top .--name {
    margin-bottom: 12px;
  }

  .aboutValue .--top .--item {
    width: 100% !important;
  }

  .aboutValue .--listValue {
    display  : flex;
    flex-flow: column;
  }

  .aboutValue .--listValue .--name {
    display: none;
  }

  .aboutValue .--listValue img {
    display: none;
  }

  .aboutValue .--listValue .--itemValue {
    padding: 0;
    height : auto;
  }

  .aboutValue .--listValue .--txt {
    position: relative;
    top     : unset;
    left    : unset;
    padding : 32px 40px;
  }

  .aboutValue .--listValue .--txt .--name {
    display: block;
  }
}

.aboutAgency {
  padding   : 80px 0;
  overflow  : hidden;
  background: #f5f5f5;
}

.aboutAgency .--top {
  margin-bottom: 44px;
}

.aboutAgency .slick-list {
  margin-top: -32px;
}

.aboutAgency .slick-track {
  padding-top: 32px;
}

.aboutAgency .--listAgency {
  width: 100vw;
}

.aboutAgency .itemAgency {
  margin-right: 24px;
  width       : 400px;
  border      : 1px solid #fff;
  transition  : all 0.3s ease;
}

.aboutAgency .itemAgency.slick-current {
  background: var(--color-1);
  border    : 1px solid var(--color-1);
}

.aboutAgency .itemAgency.slick-current .--number {
  color: rgba(255, 255, 255, 0.2);
}

.aboutAgency .itemAgency.slick-current .--name {
  color: #fff;
}

.aboutAgency .itemAgency.slick-current .--name a {
  color: #fff;
}

.aboutAgency .itemAgency:hover {
  border: 1px solid var(--color-1);
}

.aboutAgency .--bot {
  margin-top: 40px;
}

.aboutAgency .arrow {
  display     : flex;
  gap         : 10px;
  margin-right: 32px;
}

.aboutAgency .arrow .--arrow {
  width          : 80px;
  height         : 80px;
  display        : flex;
  align-items    : center;
  cursor         : pointer;
  background     : #f8f8f8;
  justify-content: center;
  border         : 1px solid #e8e8e8;
}

.aboutAgency .arrow img {
  width: 40px;
}

@media (max-width: 769px) {
  .aboutAgency {
    padding: 60px 0;
  }

  .aboutAgency .--top {
    margin-bottom: 24px;
  }

  .aboutAgency .--viewall {
    border-radius: 50px;
    display      : none;
    margin-top   : 32px;
    width        : -moz-max-content;
    width        : max-content;
    margin       : 32px auto 0;
  }

  .aboutAgency .--viewall.mobi {
    display: flex !important;
  }

  .aboutAgency .itemAgency {
    width       : 320px;
    margin-right: 12px;
  }

  .aboutAgency .progress {
    display: none;
  }
}

.aboutPartner {
  padding-bottom: 80px;
  background    : #f5f5f5;
}

.aboutPartner .segTitle {
  text-align   : center;
  margin-bottom: 32px;
}

.aboutPartner .slick-list {
  margin: 0 -10px;
}

.aboutPartner .itemLogo {
  border         : 1px solid #e8e8e8;
  background     : #fff;
  margin         : 0 10px;
  height         : 100px;
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.aboutPartner .itemLogo a {
  display        : flex;
  justify-content: center;
  align-items    : center;
  width          : 100%;
  height         : 100%;
}

.aboutPartner .itemLogo img {
  max-width    : 80%;
  max-height   : 80px;
  -o-object-fit: contain;
  object-fit   : contain;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .aboutPartner {
    padding-bottom: 60px;
  }
}

@media (max-width: 769px) {
  .aboutPartner {
    padding-bottom: 60px;
  }
}

.itemAgency {
  box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.06);
}

.itemAgency .--number {
  font-weight: 700;
  font-size  : 100px;
  text-align : right;
  line-height: 75px;
  color      : rgba(0, 0, 0, 0.2);
}

.itemAgency .--txt {
  padding: 16px 12px;
  height : 170px;
}

.itemAgency .--name {
  gap  : 28px;
  color: #000;
}

.itemAgency .--name .--title {
  overflow          : hidden;
  text-transform    : uppercase;
  text-overflow     : ellipsis;
  line-height       : 30px;
  font-size         : 20px;
  -webkit-line-clamp: 2;
  font-weight       : 500;
  display           : -webkit-box;
  margin-bottom     : 0;
  -webkit-box-orient: vertical;
}

.itemAgency .--img {
  width : 100%;
  height: 230px;
}

.itemAgency .--img img {
  width             : 100%;
  height            : 100%;
  -o-object-fit     : cover;
  object-fit        : cover;
  -o-object-position: bottom;
  object-position   : bottom;
}

@media (max-width: 769px) {
  .itemAgency .--img {
    height: 190px;
  }
}

.progress {
  display          : block;
  width            : 100%;
  height           : 5px;
  border-radius    : 10px;
  overflow         : hidden;
  background-color : #e8e8e8;
  background-image : linear-gradient(to right, var(--color-1), var(--color-1));
  background-repeat: no-repeat;
  background-size  : 0 100%;
  transition       : background-size 0.4s ease-in-out;
  margin-top       : 60px;
}

/*# sourceMappingURL=about.css.map */