/*
Theme Name: April
Theme URI: 
Author: TN
Author URI: 
Description: Template April
Version: 1.0
*/
@font-face {
  font-family: Demi;
  src: url("./fonts/Marsek-Demi.ttf");
  font-weight: normal; }
@font-face {
  font-family: Nexa;
  src: url("./fonts/SVN-NexaBold.ttf");
  font-weight: normal; }
@font-face {
  font-family: NexaBook;
  src: url("./fonts/SVN-NexaBook.ttf");
  font-weight: normal; }
@font-face {
  font-family: NexaHeavy;
  src: url("./fonts/SVN-NexaHeavy.ttf");
  font-weight: normal; }
@font-face {
  font-family: NexaLight;
  src: url("./fonts/SVN-NexaLight.ttf");
  font-weight: normal; }
@font-face {
  font-family: Gotham;
  src: url("./fonts/Gotham.otf");
  font-weight: normal; }
@font-face {
  font-family: GothamThin;
  src: url("./fonts/Gotham-Thin.otf");
  font-weight: normal; }
@font-face {
  font-family: GothamUltra;
  src: url("./fonts/Gotham-Ultra.otf");
  font-weight: normal; }
@font-face {
  font-family: Hanzel;
  src: url("./fonts/Hanzel.ttf");
  font-weight: normal; }
@font-face {
  font-family: FontAwesome;
  src: url(./fonts/fa-regular-400.ttf);
  font-weight: normal; }
#sec_bg {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: -1;
  background-color: #77d2d7; }

#menu_canvas {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

header {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 99; }
  header .col {
    padding: 4vh 0;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    header .col .nav-group {
      align-items: center; }
  header.white .search-icon {
    color: #fff;
    transition: color 1.5s; }

.logo-group {
  height: 6vh;
  width: 6vh;
  position: relative; }
  .logo-group .logo {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    display: block;
    width: 100%; }
    .logo-group .logo img {
      max-height: 6vh; }

.recruit-icon {
  position: relative;
  color: #77d2d7;
  font-family: "Nexa", "Arial", Helvetica, "sans-serif";
  font-size: 1vw;
  text-decoration: none !important;
  transition: color .5s;
  overflow: hidden;
  display: block; }
  .recruit-icon span {
    display: block;
    transition: transform .5s;
    transform: translateX(100%);
    font-size: 2vw;
    color: #77d2d7;
    line-height: 2vw;
    width: 14vw;
    text-align: right; }
  .recruit-icon:after {
    color: #fff;
    content: attr(data-content);
    position: absolute;
    top: 0;
    right: 0;
    transition: all .3s;
    background-color: #77d2d7;
    width: 10vw;
    text-align: right;
    height: 100%;
    padding: 0 .9vw;
    line-height: 2vw;
    white-space: nowrap; }
  .recruit-icon.bh span {
    color: #fff; }
  .recruit-icon.bh:after {
    color: #77d2d7;
    background-color: #fff; }
  .recruit-icon.bh:hover span {
    color: #fff; }
  .recruit-icon.gh span {
    color: #000; }
  .recruit-icon.gh:after {
    color: #000;
    background-color: #fff; }
  .recruit-icon.gh:hover span {
    color: #000; }
  .recruit-icon.spec span {
    color: #000; }
  .recruit-icon.spec:after {
    color: #fff;
    background-color: #77d2d7; }
  .recruit-icon.spec:hover span {
    color: #000; }
  .recruit-icon:hover span {
    transform: translateY(0%); }
  .recruit-icon:hover:after {
    width: 0;
    padding: 0; }

.menu-icon {
  overflow: hidden;
  position: relative;
  display: block;
  width: 3vw; }
  .menu-icon .menu-line {
    height: .2vw;
    border-radius: .2vw;
    transition: background-color 1.5s;
    margin-bottom: .9vw;
    border-radius: 40px;
    display: block;
    transform-origin: left; }
    .menu-icon .menu-line.fl {
      width: 80%;
      background-color: #77d2d7;
      transition: all .3s;
      transition-delay: .6s; }
    .menu-icon .menu-line.ml {
      width: 40%;
      background-color: #000;
      transition: all .5s; }
    .menu-icon .menu-line.ll {
      width: 60%;
      background-color: #77d2d7;
      margin-bottom: 0;
      transition: all .3s;
      transition-delay: .6s; }
  .menu-icon .menu-txt {
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    color: #000;
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    font-size: 1vw;
    text-decoration: none !important;
    padding-bottom: .3vw;
    transform: translateX(-100%);
    transition: all .3s; }
  .menu-icon:hover .menu-line.fl {
    transform: scaleX(0.7); }
  .menu-icon:hover .menu-line.ml {
    transform: translateX(-100%); }
  .menu-icon:hover .menu-line.ll {
    transform: scaleX(0.7); }
  .menu-icon:hover .menu-txt {
    transform: translateX(0%); }
  .menu-icon.gh .menu-line.fl {
    background-color: #fff; }
  .menu-icon.gh .menu-line.ml {
    background-color: #000; }
  .menu-icon.gh .menu-line.ll {
    background-color: #fff; }
  .menu-icon.gh .menu-txt {
    color: #000; }
  .menu-icon.bh .menu-line.fl {
    background-color: #fff; }
  .menu-icon.bh .menu-line.ml {
    background-color: #77d2d7; }
  .menu-icon.bh .menu-line.ll {
    background-color: #fff; }
  .menu-icon.bh .menu-txt {
    color: #77d2d7; }

.menu-group {
  position: absolute;
  transform: rotate(90deg);
  transform-origin: right top;
  top: 130%;
  right: 0; }

.contact-group {
  z-index: 99;
  position: fixed;
  bottom: 4vh; }
  .contact-group.btm-contact {
    right: 8.33333%;
    color: #000;
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    font-size: 1vw;
    line-height: 1.6vw;
    transition: color 1s; }
    .contact-group.btm-contact span {
      color: #77d2d7; }
    .contact-group.btm-contact.bh {
      color: #fff; }
      .contact-group.btm-contact.bh span {
        color: #77d2d7; }
    .contact-group.btm-contact.gh {
      color: #fff; }
      .contact-group.btm-contact.gh span {
        color: #000; }
  .contact-group.btm-social {
    left: 8.33333%;
    display: flex; }
    .contact-group.btm-social.bh a {
      color: #77d2d7; }
      .contact-group.btm-social.bh a .social-bf span, .contact-group.btm-social.bh a .social-nor span {
        color: #fff; }
    .contact-group.btm-social.gh a {
      color: #fff; }
      .contact-group.btm-social.gh a .social-bf span, .contact-group.btm-social.gh a .social-nor span {
        color: #000; }
      .contact-group.btm-social.gh a:hover {
        color: #fff; }
    .contact-group.btm-social a {
      color: #77d2d7;
      font-family: "Nexa", "Arial", Helvetica, "sans-serif";
      font-size: 1vw;
      line-height: 1.6vw;
      margin-right: 1vh;
      position: relative;
      text-decoration: none !important;
      transition: color .5s;
      overflow: hidden;
      display: inline-block; }
      .contact-group.btm-social a .social-bf, .contact-group.btm-social a .social-nor {
        transition: transform .3s; }
        .contact-group.btm-social a .social-bf span, .contact-group.btm-social a .social-nor span {
          color: #000; }
      .contact-group.btm-social a .social-bf {
        content: attr(data-content);
        position: absolute;
        top: 100%;
        color: inherit;
        transition: transform .3s;
        left: 0; }
      .contact-group.btm-social a:hover {
        color: #77d2d7; }
        .contact-group.btm-social a:hover .social-nor {
          transform: translateY(-100%); }
        .contact-group.btm-social a:hover .social-bf {
          transform: translateY(-100%); }

.btm-contact > div {
  display: inline-block; }
.btm-contact .languages {
  margin-right: 20px; }
  .btm-contact .languages a {
    color: #77d2d7;
    display: inline-block;
    text-align: center;
    width: 25px;
    height: 25px;
    text-decoration: none;
    line-height: 25px;
    text-transform: uppercase; }
    .btm-contact .languages a.active {
      background-color: #77d2d7;
      color: #fff;
      border-radius: 50%; }
.btm-contact.bh .languages a {
  color: #77d2d7; }
  .btm-contact.bh .languages a.active {
    background-color: #77d2d7;
    color: #fff; }
.btm-contact.gh .languages a {
  color: #000; }
  .btm-contact.gh .languages a.active {
    background-color: #fff;
    color: #000; }

.dhead, .ghead {
  visibility: hidden; }

.timeline {
  position: absolute;
  right: 7.8%;
  top: 50%;
  z-index: 9;
  transform: translateY(-50%); }
  .timeline ul {
    padding: 0;
    margin: 0;
    list-style: none; }
    .timeline ul li {
      margin-bottom: 4vh; }
      .timeline ul li:last-child {
        margin-bottom: 0; }
      .timeline ul li a {
        color: #000;
        font-family: "Nexa", "Arial", Helvetica, "sans-serif";
        font-size: .8vw;
        line-height: 1.6vw;
        transition: color 1s;
        display: flex;
        writing-mode: vertical-rl;
        align-items: center;
        text-decoration: none;
        cursor: pointer; }
        .timeline ul li a span {
          padding-top: .5vh;
          height: 0;
          text-indent: -9999px; }
        .timeline ul li a:before {
          display: inline-block;
          content: "";
          width: .9vw;
          height: .9vw;
          background-color: transparent;
          border-radius: 50%;
          border: 0.15vw solid #77d2d7; }
      .timeline ul li.active a {
        pointer-events: none;
        padding-top: .5vh; }
        .timeline ul li.active a span {
          height: auto;
          text-indent: inherit; }
        .timeline ul li.active a:before {
          background-color: #77d2d7; }
  .timeline.gh ul li a:before {
    border: .15vw solid #fff; }
  .timeline.gh ul li.active a:before {
    background-color: #fff; }
  .timeline.bh ul li a {
    color: #fff; }

.menu-board {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #001923;
  display: flex;
  align-items: center;
  visibility: hidden; }
  .menu-board .close-menu {
    position: absolute;
    right: 7.5%;
    top: 5%;
    cursor: pointer; }
    .menu-board .close-menu img {
      width: 2vw; }
  .menu-board .menu-lc {
    width: 50%;
    float: left; }
    .menu-board .menu-lc ul li {
      list-style: none; }
      .menu-board .menu-lc ul li a {
        display: inline-block;
        text-decoration: none;
        font-family: "GothamThin", "Arial", Helvetica, "sans-serif";
        color: #77d2d7;
        font-size: 2.8vw;
        line-height: 4.4vw;
        position: relative;
        padding: 0 1vw;
        margin-bottom: 1vh;
        overflow: hidden;
        cursor: pointer; }
        .menu-board .menu-lc ul li a:after {
          content: "";
          background: linear-gradient(to right, transparent, #7c76e3, #6651e8, #ff5ab8, #faac4f);
          position: absolute;
          top: 50%;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          left: 0;
          display: block;
          width: 0;
          height: 110%;
          z-index: -1; }
        .menu-board .menu-lc ul li a:hover {
          color: #fff;
          font-family: "Gotham", "Arial", Helvetica, "sans-serif"; }
          .menu-board .menu-lc ul li a:hover:after {
            -webkit-animation-name: hover-animation;
            animation-name: hover-animation;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out; }
  .menu-board .menu-rc {
    width: 50%;
    float: right;
    padding-top: 1.5vh; }
    .menu-board .menu-rc .menu-detail {
      margin-bottom: 3vh; }
      .menu-board .menu-rc .menu-detail h5 {
        font-family: "Nexa", "Arial", Helvetica, "sans-serif";
        text-transform: uppercase;
        color: #fff;
        font-size: 1.4vw;
        margin: 0;
        font-weight: 700; }
      .menu-board .menu-rc .menu-detail p {
        font-family: "Gotham", "Arial", Helvetica, "sans-serif";
        color: #77d2d7;
        margin: 0;
        font-size: 1vw; }
      .menu-board .menu-rc .menu-detail a.id {
        font-family: "Gotham", "Arial", Helvetica, "sans-serif";
        color: #77d2d7;
        margin: 0;
        font-size: 1vw;
        display: inline-block;
        text-decoration: none;
        position: relative; }
        .menu-board .menu-rc .menu-detail a.id span {
          background-color: #001923;
          padding: 0 .2vw; }
        .menu-board .menu-rc .menu-detail a.id:before {
          content: "";
          border: 1px solid #77d2d7;
          position: absolute;
          width: 100%;
          z-index: -1;
          height: 50%;
          bottom: -0.2vw;
          left: 0; }
        .menu-board .menu-rc .menu-detail a.id i {
          color: #fff; }
    .menu-board .menu-rc .menu-detail-l h5 {
      font-family: "Nexa", "Arial", Helvetica, "sans-serif";
      color: #fff;
      font-size: 1.9vw;
      margin: 0;
      text-transform: uppercase;
      font-weight: 700; }
    .menu-board .menu-rc .menu-detail-l a {
      font-family: "Gotham", "Arial", Helvetica, "sans-serif";
      color: #77d2d7;
      margin: 0;
      font-size: 2.2vw;
      position: relative;
      display: inline-block;
      overflow: hidden;
      padding-right: 2vw;
      text-decoration: none;
      cursor: pointer; }
      .menu-board .menu-rc .menu-detail-l a:after {
        content: "";
        background: linear-gradient(to right, transparent, #7c76e3, #6651e8, #ff5ab8, #faac4f);
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        display: block;
        width: 0;
        height: 110%;
        z-index: -1; }
      .menu-board .menu-rc .menu-detail-l a:hover {
        color: #fff;
        font-family: "Gotham", "Arial", Helvetica, "sans-serif"; }
        .menu-board .menu-rc .menu-detail-l a:hover:after {
          -webkit-animation-name: hover-animation;
          animation-name: hover-animation;
          -webkit-animation-duration: 1s;
          animation-duration: 1s;
          -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out; }

@-webkit-keyframes hover-animation {
  50% {
    width: 100%; }
  100% {
    left: 100%; } }
@keyframes hover-animation {
  50% {
    width: 100%; }
  100% {
    left: 100%; } }
.recruit-head {
  padding-top: 4vh;
  height: 14vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 8.333333%; }
  .recruit-head .recruit-logo {
    width: 6vh;
    height: 6vh; }
    .recruit-head .recruit-logo img {
      max-height: 6vh; }
  .recruit-head .close-recruit {
    font-size: "Nexa", "Arial", Helvetica, "sans-serif";
    color: #000;
    display: flex;
    align-items: center;
    cursor: pointer; }
    .recruit-head .close-recruit i {
      color: #77d2d7;
      display: inline-block;
      width: 2.4vw;
      height: 2.4vw;
      border-radius: 50%;
      border: .14vw solid #000;
      font-size: 2.2vw;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1vw; }

.recruit-board {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: flex-start;
  visibility: hidden; }
  .recruit-board .recruit-inner {
    position: relative;
    height: 100%;
    width: 100%; }

.recruit-content {
  height: calc(100vh - 14vh - 18.8vh); }
  .recruit-content h2.re-title {
    position: relative;
    font-family: "GothamUltra", "Arial", Helvetica, "sans-serif";
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #7c76e3, #ff58bc, #77d2d7);
    font-size: 4vw;
    line-height: inherit;
    text-transform: uppercase;
    display: inline-block;
    padding-bottom: 2vh;
    margin-bottom: 4vh; }
    .recruit-content h2.re-title.en-re-title {
      font-size: 3vw; }
    .recruit-content h2.re-title:after {
      position: absolute;
      content: "";
      height: .5vh;
      width: 13%;
      left: 0;
      bottom: 0;
      background-color: #77d2d7; }
  .recruit-content .re-lc {
    width: 33.33333%;
    float: left; }
    .recruit-content .re-lc .re-group {
      margin-bottom: 3vh; }
      .recruit-content .re-lc .re-group h5 {
        font-family: "Nexa", "Arial", Helvetica, "sans-serif";
        text-transform: uppercase;
        color: #000;
        margin-bottom: 0;
        font-size: 1.2vw; }
      .recruit-content .re-lc .re-group ul {
        list-style: none;
        padding: 0;
        margin: 0; }
        .recruit-content .re-lc .re-group ul li a {
          font-size: 1.2vw;
          line-height: 1.4vw;
          font-family: "NexaLight", "Arial", Helvetica, "sans-serif";
          color: #000;
          text-decoration: none; }
  .recruit-content .re-rc {
    width: 32%;
    float: right; }
    .recruit-content .re-rc p {
      font-size: 1.2vw;
      line-height: 1.4vw;
      font-family: "NexaLight", "Arial", Helvetica, "sans-serif";
      color: #000;
      margin-bottom: 0; }
      .recruit-content .re-rc p span {
        color: #77d2d7; }

.recruit-footer {
  position: relative;
  height: 18.8vh;
  background-image: linear-gradient(to left, #7c76e3, #ff58bc, #77d2d7);
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 16.666667%; }
  .recruit-footer a.ab-pp {
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    color: #fff !important;
    font-size: 2vw;
    text-decoration: none !important;
    cursor: pointer; }
  .recruit-footer aside.line {
    position: absolute;
    width: 0;
    height: .4vh;
    left: -16.666667%;
    background-color: #fff;
    top: 51%;
    transition: width .5s;
    pointer-events: none; }
    .recruit-footer aside.line.active {
      width: 116.666667%; }

.recruit-sign {
  position: absolute;
  bottom: -62%;
  right: 12%;
  height: 59.6vh; }

.intro p {
  color: #fff; }

#notice_popup {
  position: fixed;
  z-index: 99999;
  width: 50%;
  height: auto;
  left: 25%;
  top: 15%;
  border-radius: 40px/24px;
  box-shadow: 0 0 42px 12px #000; }
  #notice_popup.en-popup .np-content {
    height: 12.2vw;
    padding: 0 4.5vw; }
    #notice_popup.en-popup .np-content p {
      margin-bottom: 10px;
      font-size: .9vw; }
  #notice_popup img {
    max-width: 100%; }
  #notice_popup .np-content {
    padding: 0 5.8vw;
    text-align: center;
    transition: .5s all;
    height: 11vw;
    overflow: hidden;
    font-family: "NexaBook", "Arial", Helvetica, "sans-serif"; }
    #notice_popup .np-content.hide {
      height: 0;
      transition: .5s all; }
    #notice_popup .np-content p {
      margin: 0;
      font-size: 1.1vw;
      line-height: 1.4vw; }
      #notice_popup .np-content p strong {
        font-family: "Nexa", "Arial", Helvetica, "sans-serif"; }
  #notice_popup .np-read-more {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: #000;
    background-color: #fff;
    border-radius: 40px/24px; }
    #notice_popup .np-read-more a {
      cursor: pointer;
      display: block;
      color: #000;
      text-decoration: none;
      font-weight: 700;
      height: 3vw;
      line-height: 3vw; }
  #notice_popup .close-np-btn {
    position: absolute;
    right: 2vw;
    top: 1.4vw;
    cursor: pointer; }
    #notice_popup .close-np-btn img {
      width: 1.5vw; }

.dark-home {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0; }
  .dark-home .dhbg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0.8;
    background-image: radial-gradient(circle at 50% 50%, #111 -30%, #111 -10%, #000 80%);
    background-size: 100% 100%; }
  .dark-home .row {
    height: 100%; }
    .dark-home .row .col {
      width: 100%;
      height: 100%; }

#press_group {
  position: absolute;
  height: 8vh;
  width: 8vh;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 4vh;
  display: flex;
  justify-content: center;
  align-items: center; }
  #press_group .press_group_i {
    position: relative;
    width: 8vh;
    height: 8vh;
    margin: 0 auto; }
    #press_group .press_group_i #pnh {
      font-family: "GothamThin", "Arial", Helvetica, "sans-serif";
      font-weight: 300;
      display: block;
      transition: all .5s;
      cursor: pointer;
      color: #fff;
      line-height: 6.5vh;
      font-size: 4vh;
      text-align: center;
      width: 8vh;
      height: 8vh;
      border-radius: 50%;
      border: .7vh solid #fff;
      background-color: transparent; }
      #press_group .press_group_i #pnh:hover {
        color: #000;
        background-color: #fff; }
    #press_group .press_group_i .pnh_text {
      font-family: "Gotham", "Arial", Helvetica, "sans-serif";
      text-transform: uppercase;
      color: #fff;
      font-weight: 700;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
      #press_group .press_group_i .pnh_text.pnh_bf {
        right: 100%;
        margin-right: 1vw; }
      #press_group .press_group_i .pnh_text.pnh_af {
        left: 100%;
        margin-left: 1vw; }

.contact-col {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center; }
  .contact-col .contact-col-title h1 {
    color: #fff;
    font-family: "NexaHeavy", "Arial", Helvetica, "sans-serif";
    font-size: 13vw;
    line-height: 13vw;
    text-transform: uppercase;
    margin-bottom: 26px; }
  .contact-col .contact-col-title h5 {
    color: #fff;
    font-family: "NexaLight", "Arial", Helvetica, "sans-serif";
    font-size: 2vw;
    line-height: 0;
    opacity: .7;
    font-weight: 300;
    letter-spacing: .4vw; }
  .contact-col .contact-col-title h6 {
    color: #fff;
    font-family: "NexaLight", "Arial", Helvetica, "sans-serif";
    font-size: 2vw;
    line-height: 0;
    opacity: .7;
    font-weight: 300;
    margin-top: 10px; }

#home_progressbar {
  height: .5vh;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0; }
  #home_progressbar .home_pg_i {
    height: 100%;
    width: 100%;
    position: relative; }
    #home_progressbar .home_pg_i .home_pg_b {
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      width: 0%;
      background-color: #fff; }

.leaf-group .leaf-icon {
  position: absolute;
  opacity: .3; }
  .leaf-group .leaf-icon.leaf-1 {
    height: 20vh;
    top: 0;
    left: 0; }
  .leaf-group .leaf-icon.leaf-2 {
    height: 13.6vh;
    top: 21.6vh;
    left: 13vw; }
  .leaf-group .leaf-icon.leaf-3 {
    height: 12.8vh;
    top: 44.6vh;
    left: 8.1vw; }
  .leaf-group .leaf-icon.leaf-4 {
    height: 40vh;
    bottom: 0;
    left: 0; }
  .leaf-group .leaf-icon.leaf-5 {
    height: 18.3vh;
    bottom: 5.1vh;
    left: 30.1vw; }
  .leaf-group .leaf-icon.leaf-6 {
    height: 18.7vh;
    top: 14.4vh;
    right: 2.7vw; }
  .leaf-group .leaf-icon.leaf-7 {
    height: 14vh;
    right: 11.1vw;
    top: 48.1vh; }
  .leaf-group .leaf-icon.leaf-8 {
    height: 30.5vh;
    bottom: 0;
    right: 0; }

.top-sign {
  height: 100vh;
  position: relative;
  z-index: 2;
  display: flex; }
  .top-sign .lg_bg {
    position: absolute;
    height: 172.4vh;
    top: -38vh;
    display: block;
    margin: 0 auto;
    left: 0;
    right: 0;
    visibility: hidden; }
  .top-sign .sign-icon {
    position: relative;
    height: 48vh;
    display: block;
    margin: auto;
    visibility: hidden; }

.middle-sign {
  background-color: #49c3c9;
  background-size: 100% 100%;
  height: 100vh;
  position: relative;
  z-index: 1; }
  .middle-sign .ms-inner {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .middle-sign .ms-inner .ms-text {
      color: #fff;
      z-index: 2; }
      .middle-sign .ms-inner .ms-text h5 {
        font-family: "Nexa", "Arial", Helvetica, "sans-serif";
        font-size: 3vw;
        margin-bottom: 5vh; }

.ms {
  position: absolute;
  bottom: 90%;
  height: 100vh;
  width: 100%;
  left: 0;
  right: 0; }
  .ms .ms-inner {
    position: relative;
    height: 100%;
    width: 100%; }

.ms-text {
  position: absolute;
  bottom: 0;
  left: 0px;
  right: 0px;
  margin: 0px auto;
  color: #fff;
  z-index: 2; }
  .ms-text .ms-text-group {
    width: 100%;
    height: 10vh;
    padding-top: 4vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; }
    .ms-text .ms-text-group h5 {
      position: absolute;
      bottom: 140%;
      left: 0;
      right: 0;
      font-family: "Nexa", "Arial", Helvetica, "sans-serif";
      font-size: .75vw;
      margin: 0 auto; }
    .ms-text .ms-text-group .bhst {
      font-family: "NexaHeavy", "Arial", Helvetica, "sans-serif";
      color: #fff;
      font-size: 1.8vw;
      font-weight: normal;
      margin: 0; }
      .ms-text .ms-text-group .bhst .sub-bhst {
        text-transform: none;
        position: absolute;
        bottom: 90%;
        left: 0;
        right: 0;
        font-family: "NexaBook", "Arial", Helvetica, "sans-serif";
        font-size: .75vw;
        margin: 0 auto;
        -webkit-text-fill-color: #fff; }

.about-icon {
  position: absolute; }
  .about-icon.ac1-icon {
    height: 10vh;
    top: 28.8vh;
    left: 27.5vw; }
  .about-icon.ac2-icon {
    height: 42.1vh;
    bottom: 11.6vh;
    right: 0; }
  .about-icon.at1-icon {
    height: 21.1vh;
    top: 8vh;
    left: 3.6vw; }
  .about-icon.at2-icon {
    height: 9vh;
    top: 18.8vh;
    right: 42.3vw; }
  .about-icon.at3-icon {
    height: 13.2vh;
    top: 22.9vh;
    right: 13.6vw; }
  .about-icon.at4-icon {
    height: 9.4vh;
    bottom: 8vh;
    left: 34.9vw; }
  .about-icon.at5-icon {
    height: 23.8vh;
    bottom: -7.5vh;
    right: 26.9vw; }
  .about-icon.bc1-icon {
    height: 12.7vh;
    top: 0vh;
    left: 4.6vw; }
  .about-icon.bc2-icon {
    height: 60vh;
    bottom: 6.3vh;
    left: 0; }
  .about-icon.bt1-icon {
    height: 23.5vh;
    top: 24.4vh;
    left: 33.9vw; }
  .about-icon.bt2-icon {
    height: 43.4vh;
    bottom: 39.8vh;
    right: 0vw; }

.bottom-sign {
  background-size: 100% 100%;
  height: 100vh;
  position: relative; }
  .bottom-sign .bg_bs {
    background-image: url("./images/bg_bs.png");
    height: 100vh;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: 100% 100%;
    z-index: 1; }
  .bottom-sign .bg_gra {
    background-image: linear-gradient(to Top, #fff 10%, #49c3c9);
    height: 100vh;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0; }
  .bottom-sign .bs-inner {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; }
    .bottom-sign .bs-inner .bs-text {
      z-index: 2;
      text-align: center; }
      .bottom-sign .bs-inner .bs-text p {
        font-size: 4.4vw;
        line-height: 4.1vw;
        font-family: "NexaBook", "Arial", Helvetica, "sans-serif";
        color: #49c3c9; }
        .bottom-sign .bs-inner .bs-text p:last-child {
          color: #ff6f91;
          font-weight: 700; }

.section {
  position: relative;
  text-align: center;
  overflow: hidden;
  -moz-overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100vh; }

#pVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  opacity: .2; }

.icon-group {
  position: relative;
  margin-left: -5vw;
  display: flex;
  justify-content: center; }
  .icon-group .people-title {
    position: absolute;
    color: #fff;
    bottom: -4%;
    right: 6%;
    font-size: 3vw;
    font-family: "Demi", "Arial", Helvetica, "sans-serif"; }
    .icon-group .people-title span {
      color: #77d2d7; }

.icon-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: -1;
  visibility: hidden;
  pointer-events: none; }

.icon-title {
  position: absolute;
  font-family: "Demi", "Arial", Helvetica, "sans-serif";
  color: #fff;
  pointer-events: none;
  z-index: 3;
  visibility: hidden; }
  .icon-title.art-it {
    top: 4.5vw;
    left: 97%;
    font-size: 19vw;
    line-height: 16vw; }
  .icon-title.copy-it {
    top: 4vw;
    left: 97%;
    font-size: 10.5vw;
    line-height: 9vw; }
  .icon-title.acc-it {
    top: 6vw;
    right: 84%;
    font-size: 7.5vw;
    line-height: 7vw; }
  .icon-title.plan-it {
    top: 7.5vw;
    right: 92%;
    font-size: 5.5vw;
    line-height: 6vw; }
  .icon-title.code-it {
    top: 7.5vw;
    right: 107%;
    font-size: 10.8vw;
    line-height: 9vw; }

.icon-subtitle {
  position: absolute;
  font-family: "Demi", "Arial", Helvetica, "sans-serif";
  color: #fff;
  pointer-events: none;
  z-index: 3;
  visibility: hidden; }
  .icon-subtitle.art-is {
    top: 22vw;
    left: 100%;
    font-size: 2.5vw;
    line-height: 3vw;
    z-index: 3;
    letter-spacing: 4.2vw; }
  .icon-subtitle.copy-is {
    top: 14.5vw;
    left: 101%;
    font-size: 3vw;
    line-height: 3vw;
    z-index: 3;
    letter-spacing: 3.7vw; }
  .icon-subtitle.acc-is {
    left: 82%;
    line-height: 7vw;
    font-size: 6.5vw;
    top: 17vw; }
  .icon-subtitle.code-is {
    right: 114%;
    line-height: 1.1vw;
    font-size: 1.1vw;
    top: 18vw; }

@-webkit-keyframes hover-odd {
  80% {
    width: 67%;
    right: 33%;
    left: 0; }
  100% {
    right: 33%;
    left: 67%;
    width: 0; } }
@keyframes hover-odd {
  80% {
    width: 67%;
    right: 33%;
    left: 0; }
  100% {
    right: 33%;
    left: 67%;
    width: 0; } }
@-webkit-keyframes hover-even {
  80% {
    width: 67%;
    right: 0;
    left: 33%; }
  100% {
    right: 0;
    left: 100%;
    width: 0; } }
@keyframes hover-even {
  80% {
    width: 67%;
    right: 0;
    left: 33%; }
  100% {
    right: 0;
    left: 100%;
    width: 0; } }
.icon-home {
  position: relative;
  cursor: pointer;
  display: inline-block;
  margin-right: -4.1vw; }
  .icon-home.odd:hover {
    z-index: 2 !important; }
    .icon-home.odd:hover .after-effect {
      -webkit-animation-name: hover-odd;
      animation-name: hover-odd;
      -webkit-animation-duration: 1.3s;
      animation-duration: 1.3s; }
  .icon-home.even:hover {
    z-index: 2 !important; }
    .icon-home.even:hover .after-effect {
      -webkit-animation-name: hover-even;
      animation-name: hover-even;
      -webkit-animation-duration: 1.3s;
      animation-duration: 1.3s; }
  .icon-home .after-effect {
    content: "";
    position: absolute;
    background-image: linear-gradient(to Right, transparent, #7c76e3, #6651e8, #ff5ab8, #faac4f);
    height: 1.1vh;
    width: 0; }
  .icon-home.hover {
    z-index: 2; }
  .icon-home.odd .after-effect {
    top: 92%;
    left: 0; }
  .icon-home.even {
    margin-top: 8vh;
    margin-left: -2vw; }
    .icon-home.even .after-effect {
      left: 33%;
      bottom: 103%; }
  .icon-home img {
    width: 17.6vw; }

.sec-art h2.about-title {
  font-size: 34vw; }
.sec-art h3.about-subtitle {
  letter-spacing: 7.4vw;
  font-size: 4.8vw; }
  .sec-art h3.about-subtitle span {
    margin-right: -5vw; }

.sec-coder h2.about-title {
  font-size: 21vw; }
.sec-coder h3.about-subtitle {
  font-size: 2.17vw; }

.sec-planner h2.about-title {
  font-size: 15.5vw; }
.sec-planner h3.about-subtitle {
  font-size: 1.57vw; }
  .sec-planner h3.about-subtitle span i {
    margin-right: .3vw; }

.sec-copy h2.about-title {
  font-size: 27vw; }
.sec-copy h3.about-subtitle {
  font-size: 7vw; }
  .sec-copy h3.about-subtitle span {
    letter-spacing: 10.8vw;
    margin-right: -12vw; }

.sec-account h2.about-title {
  font-size: 14vw; }

.about-text h2.about-title {
  font-family: "Demi", "Arial", Helvetica, "sans-serif";
  color: #333;
  margin: 0;
  line-height: 1; }
.about-text h3.about-subtitle {
  line-height: 1;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap; }
  .about-text h3.about-subtitle span {
    text-align: left;
    display: inline-block;
    font-family: "Demi", "Arial", Helvetica, "sans-serif";
    color: #333;
    line-height: 1; }

.img-group {
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 100%; }
  .img-group .art-img {
    height: 111.2vh; }
  .img-group .code-img {
    height: 91.4vh; }
  .img-group .plan-img {
    height: 100vh; }
  .img-group .head-plan-img {
    position: absolute;
    margin: 0 auto;
    bottom: 146%;
    height: 57.8vh;
    margin-left: .4vh;
    visibility: hidden; }
  .img-group .copy-img {
    position: relative;
    height: 100vh;
    width: 93.7vh;
    background-image: url("./images/copy.png");
    background-size: 100% 100%; }
    .img-group .copy-img .small-sword {
      visibility: hidden;
      height: 38vh;
      position: absolute;
      top: 23%;
      left: -9%; }
  .img-group .acc-img {
    height: 100vh; }

.nav {
  position: absolute;
  bottom: 1%;
  display: block;
  width: 100%; }
  .nav .scrollP {
    cursor: pointer; }
  .nav .col {
    display: flex;
    align-items: flex-end; }
  .nav img {
    width: 10vh; }

.nav-group {
  display: flex; }
  .nav-group .nav-go-back {
    display: flex;
    align-items: center;
    color: #000;
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    font-size: 1vw;
    text-decoration: none;
    transition: color .5s; }
    .nav-group .nav-go-back img {
      margin-right: 1vw;
      width: 2vw; }
    .nav-group .nav-go-back i {
      font-size: 1.4vw;
      margin-right: .5vw; }
    .nav-group .nav-go-back.wgb {
      color: #fff; }
  .nav-group .nav-single-go-back {
    text-align: right;
    color: #000; }
    .nav-group .nav-single-go-back i {
      border-radius: 50%;
      font-size: 1.4vw;
      margin-right: 1.5vw;
      border: 2px solid #000;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 29px;
      color: #77d2d7; }

.search-icon {
  color: #000;
  font-size: 2vw;
  transition: color 1.5s; }

.about-content {
  text-align: left;
  position: relative;
  z-index: 2; }
  .about-content h2 {
    font-family: "Demi", "Arial", Helvetica, "sans-serif";
    background: -webkit-linear-gradient(left, #2f66e4, #a86ff6, #f68494);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.9vw;
    margin-bottom: 10px;
    float: left; }
  .about-content h4 {
    clear: both;
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    margin-bottom: 20px; }
  .about-content p {
    font-family: "Nexa", "Arial", Helvetica, "sans-serif"; }
  .about-content.art-content h2 {
    font-size: 2.9vw;
    background-image: -webkit-linear-gradient(left, #2f66e4, #a86ff6, #f68494); }
  .about-content.art-content h4 {
    font-size: 1.25vw;
    padding-right: 90px; }
  .about-content.art-content p {
    font-size: .85vw;
    padding-right: 40px; }
  .about-content.code-content h2 {
    font-size: 2.9vw;
    background-image: -webkit-linear-gradient(left, #c859f2, #4b67db, #76ccff); }
  .about-content.code-content h4 {
    font-size: 1.25vw;
    padding-right: 60px; }
  .about-content.code-content p {
    font-size: .85vw;
    padding-right: 20px; }
  .about-content.plan-content h2 {
    font-size: 2.9vw;
    background-image: -webkit-linear-gradient(left, #d5185f, #7239b1, #ff9700); }
  .about-content.plan-content h4 {
    font-size: 1.5vw;
    padding-right: 6vw; }
  .about-content.plan-content p {
    font-size: .85vw;
    padding-right: 80px; }
  .about-content.copy-content h2 {
    font-size: 2.9vw;
    background-image: -webkit-linear-gradient(left, #7c76e3, #ff58bc, #fffc00); }
  .about-content.copy-content h4 {
    font-size: 1.5vw;
    padding-right: 6vw; }
  .about-content.copy-content p {
    font-size: .85vw;
    padding-right: 80px; }
  .about-content.acc-content h2 {
    font-size: 2.9vw;
    background-image: -webkit-linear-gradient(left, #c859f2, #4b67db, #76ccff); }
  .about-content.acc-content h4 {
    font-size: 1.5vw;
    padding-right: 6vw; }
  .about-content.acc-content p {
    font-size: .85vw;
    padding-right: 80px; }

.sec2-polygon {
  visibility: hidden; }

.art-left-blow, .art-right-blow {
  visibility: hidden; }

.lighter-icon {
  position: absolute;
  bottom: 24vh;
  left: 22%;
  height: 7vh; }

.right-blow {
  position: absolute;
  height: 100vh;
  width: 71vw;
  top: 0;
  bottom: 0;
  right: 0; }
  .right-blow.code-right-blow {
    width: 79vw; }
  .right-blow.plan-right-blow {
    width: 79vw; }
  .right-blow.copy-right-blow {
    width: 58.3vw; }
  .right-blow.acc-right-blow {
    width: 66.66vw; }

.plan-right-blow2 {
  position: absolute;
  height: 38.33vh;
  width: 68.66vw;
  bottom: 0;
  right: 0; }

.left-blow {
  position: absolute;
  height: 50vh;
  width: 8vw;
  bottom: 0;
  left: 0;
  visibility: visible; }
  .left-blow.code-left-blow {
    width: 10vw; }
  .left-blow.plan-left-blow {
    bottom: auto;
    top: 0;
    width: 7.9; }
  .left-blow.copy-left-blow {
    height: 15.6vh;
    width: 10vw; }
  .left-blow.acc-left-blow {
    height: 20vh;
    width: 10vw; }

.gif1-icon {
  position: absolute;
  left: -28%;
  top: 39%;
  height: 32vh; }

.gif2-icon {
  position: absolute;
  right: -22%;
  top: 27%;
  height: 42vh; }

.gif3-icon {
  position: absolute;
  left: -38%;
  top: 4%;
  height: 60vh; }

.gif4-icon {
  position: absolute;
  left: 40%;
  top: 52%;
  height: 43vh; }

.gif5-icon {
  position: absolute;
  left: 23%;
  top: 8%;
  height: 20vh; }

.gif9-icon {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
  width: 71vw; }

.gif6-icon {
  position: absolute;
  left: 24%;
  top: 2%;
  height: 65vh; }

.gif7-icon {
  position: absolute;
  left: -1%;
  top: 4%;
  height: 58vh; }

.smoke1-icon {
  position: absolute;
  left: -13%;
  top: 51%;
  height: 22vh; }

.smoke2-icon {
  position: absolute;
  left: 60%;
  top: 37%;
  height: 29.7vh; }

.ai-icon {
  position: absolute;
  left: 57%;
  top: 45%;
  height: 21vh; }

.ps-icon {
  position: absolute;
  left: -25%;
  top: 53%;
  height: 16vh; }

.about-inner-img.art2-img {
  position: absolute;
  height: 100vh;
  width: 68.5vh;
  left: 0;
  top: 0; }
.about-inner-img.code2-img {
  position: absolute;
  height: 80vh;
  width: 102.9vh;
  left: 0;
  top: 0; }
.about-inner-img.plan2-img {
  position: absolute;
  height: 90vh;
  width: 66.2vh;
  left: 0;
  top: 0; }
.about-inner-img.copy2-img {
  position: absolute;
  height: 73.3vh;
  width: 49.1vh;
  left: 0;
  top: 0; }
.about-inner-img.acc2-img {
  height: 100vh;
  margin-right: -28%; }

.art-img-group {
  position: relative;
  height: 100vh;
  width: 68.5vh;
  margin-left: 25%; }

.code-img-group {
  position: relative;
  height: 80vh;
  width: 102.9vh;
  margin: 0 auto; }

.plan-img-group {
  position: relative;
  height: 90vh;
  width: 66.2vh;
  margin: 0 auto; }

.copy-img-group {
  position: relative;
  height: 73.3vh;
  width: 49.1vh;
  margin-left: 20%;
  transform: translate(0%, 18.2%) matrix(1, 0, 0, 1, 0, 0); }

.tri1-icon {
  transform: rotate(162deg);
  position: absolute;
  left: 56%;
  top: 28%;
  height: 5.8vh; }

.tri2-icon {
  position: absolute;
  left: 27%;
  top: 32%;
  height: 4.8vh;
  /* width: 8%; */
  transform: rotate(-16deg); }

.tri3-icon {
  position: absolute;
  left: 56%;
  top: 41%;
  height: 5.1vh;
  transform: rotate(-16deg); }

.tri4-icon {
  position: absolute;
  left: 56%;
  top: 46%;
  height: 4.8vh;
  transform: rotate(136deg); }

.a-icon {
  position: absolute;
  left: 24%;
  top: 36%;
  height: 20vh; }

.r-icon {
  position: absolute;
  left: 45%;
  top: 40%;
  height: 11vh; }

.t-icon {
  position: absolute;
  left: 45%;
  top: 25%;
  height: 12vh; }

.mushroom1-icon {
  position: absolute;
  left: 30%;
  top: 18%;
  height: 8.7vh;
  transform: rotate(-46deg); }

.mushroom2-icon {
  position: absolute;
  left: 45%;
  top: 18%;
  height: 7.8vh;
  transform: rotate(-26deg); }

.star1-icon {
  position: absolute;
  left: 57%;
  top: 42%;
  height: 4.4vh; }

.star2-icon {
  position: absolute;
  left: 24%;
  top: 48%;
  height: 3vh; }

.star3-icon {
  position: absolute;
  left: 58%;
  top: 40%;
  height: 2.8vh; }

.star4-icon {
  position: absolute;
  left: 38%;
  top: 56%;
  width: 2%; }

.heart1-icon {
  position: absolute;
  left: 25%;
  top: 74%;
  width: 3%;
  transform: rotate(-10deg) rotateY(180deg); }

.heart2-icon {
  position: absolute;
  left: 26%;
  top: 28%;
  height: 2.7vh;
  transform: rotate(-7deg); }

.fireworks {
  visibility: hidden; }

.fireworks1-icon {
  position: absolute;
  left: -10%;
  top: 27%;
  height: 14vh; }

.fireworks2-icon {
  position: absolute;
  left: 10%;
  top: 42%;
  /* width: 18%; */
  height: 7vh;
  transform: rotate(-43deg); }

.fireworks3-icon {
  position: absolute;
  left: 62%;
  top: 25%;
  height: 10.5vh;
  transform: rotate(0); }

.fireworks4-icon {
  position: absolute;
  left: 63%;
  top: 48%;
  height: 6.2vh;
  transform: rotate(8deg); }

.wave-code {
  position: absolute;
  top: 1%;
  margin-left: 16.6%;
  background-size: 100% 100%;
  height: 80vh;
  width: 68.7vh;
  visibility: hidden; }

.code-mask {
  visibility: hidden; }

.code-animal {
  position: absolute;
  top: 1%;
  left: 16.6%;
  height: 80vh;
  width: 68.7vh; }

.code-1w1s {
  position: absolute;
  top: 12%;
  height: 72vh; }
  .code-1w1s.w-icon {
    left: 9.5%; }
  .code-1w1s.s-icon {
    left: 49%; }

.code-light {
  visibility: hidden; }

.left-light {
  position: absolute;
  width: 20vh;
  height: 20vh;
  left: 31.5vh;
  top: 22vh;
  background: rgba(181, 46, 255, 0.3);
  border-radius: 50%; }
  .left-light .small-light {
    position: absolute;
    width: 9.3vh;
    height: 13vh;
    left: 3.3vh;
    top: 4.5vh;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 59%;
    transform: rotate(-12deg); }

.right-light {
  position: absolute;
  width: 20vh;
  height: 20vh;
  left: 58.5vh;
  top: 22vh;
  background-color: rgba(181, 46, 255, 0.3);
  border-radius: 50%; }
  .right-light .small-light {
    position: absolute;
    width: 9.3vh;
    height: 13vh;
    left: 3.3vh;
    top: 4.5vh;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 59%;
    transform: rotate(12deg); }

.wlogo-icon {
  position: absolute;
  height: 13.5vh;
  top: 48%;
  left: 40%; }

.compass-icon {
  position: absolute;
  height: 100vh;
  width: 100vh;
  top: 0;
  left: -25%; }

.circle-icon {
  position: absolute;
  height: 49vh;
  top: 29.3%;
  left: 15%; }

.copy-hand {
  position: absolute;
  height: 42.48vh;
  bottom: 0;
  transform-origin: bottom;
  left: 75%; }

.copy-hat {
  position: absolute;
  height: 28.34vh;
  z-index: 2;
  top: -5%;
  left: 27%; }

.b-hat {
  position: absolute;
  visibility: hidden; }
  .b-hat.b-hat1 {
    height: 10.64vh;
    top: -8%;
    left: 45%; }
  .b-hat.b-hat2 {
    height: 21.33vh;
    top: 3%;
    left: 26%; }

.eye-close {
  position: absolute;
  height: 3.1vh;
  visibility: hidden; }
  .eye-close.l-eye-c {
    top: 20%;
    left: 55%; }
  .eye-close.r-eye-c {
    top: 20%;
    left: 74%; }

.eye-icon {
  position: absolute;
  height: 1.8vh; }
  .eye-icon.l-eye-b {
    top: 21.5%;
    left: 60%; }
  .eye-icon.r-eye-b {
    top: 21.5%;
    left: 77.8%; }

.sword-icon {
  position: absolute;
  height: 59.7vh;
  top: -37%;
  width: 81.6vh;
  right: 88%;
  background: url("./images/sword-icon.png");
  background-size: 81.6vh 59.7vh;
  background-position: bottom right;
  visibility: hidden; }

.spotlight-icon {
  position: absolute;
  height: 96vh;
  width: 108vh;
  float: right;
  top: -74%;
  right: 65%;
  background: url("./images/spotlight.png");
  background-size: 108vh 96vh;
  background-position: bottom right;
  visibility: hidden; }

.money-icon {
  position: absolute;
  left: 50%;
  top: 50vh; }
  .money-icon.money1-icon {
    height: 30.3vh; }
  .money-icon.money2-icon {
    height: 14.3vh; }
  .money-icon.money3-icon {
    height: 15.6vh; }
  .money-icon.money4-icon {
    height: 28.3vh; }

.butterfly-icon {
  position: absolute;
  left: 50%;
  top: 50vh;
  background-image: url("./images/butterflies.png");
  background-repeat: no-repeat;
  background-size: 300% 300%; }
  .butterfly-icon.butterfly1-icon {
    background-position: 0% 0%;
    top: 14.4vh;
    height: 16.3vh;
    width: 16.3vh;
    left: 58%; }
  .butterfly-icon.butterfly2-icon {
    background-position: 0% 50%;
    top: 42.1vh;
    height: 7.2vh;
    width: 7.2vh;
    left: 55%; }
  .butterfly-icon.butterfly3-icon {
    background-position: 0% 100%;
    top: 59.4vh;
    height: 10.1vh;
    width: 10.1vh;
    left: 53%; }
  .butterfly-icon.butterfly4-icon {
    background-position: 0% 0%;
    top: 42.9vh;
    height: 5.9vh;
    width: 5.9vh;
    right: 15%;
    left: auto; }
  .butterfly-icon.butterfly5-icon {
    background-position: 0% 50%;
    top: 64.9vh;
    height: 5.9vh;
    width: 5.9vh;
    right: 3%;
    left: auto; }

.flower-icon {
  position: absolute; }
  .flower-icon.flower1-icon {
    right: 0;
    bottom: 0;
    height: 83vh; }
  .flower-icon.flower2-icon {
    right: 0;
    bottom: 0;
    height: 30.8vh; }
  .flower-icon.flower3-icon {
    left: 47%;
    bottom: 0;
    height: 55.1vh; }
  .flower-icon.flower4-icon {
    left: 54%;
    bottom: 10vh;
    height: 27.3vh; }

.lotus {
  position: absolute; }
  .lotus.lotus1 {
    right: 43%;
    bottom: 0;
    height: 19.5vh; }
  .lotus.lotus2 {
    right: 35%;
    bottom: -1%;
    height: 12.8vh; }
  .lotus.lotus3 {
    right: 28%;
    bottom: 0;
    height: 11.4vh; }
  .lotus.lotus4 {
    right: 12%;
    bottom: 0;
    height: 17.7vh; }
  .lotus.lotus5 {
    right: 13%;
    bottom: 0;
    height: 10vh; }
  .lotus.lotus6 {
    right: 0;
    bottom: 0;
    height: 30.8vh; }

.pol-col {
  position: relative;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0;
  height: 100%;
  position: relative;
  border-right: 1px solid #ddd; }
  .pol-col.folded {
    background-image: url(./images/pol3d-bg.jpg); }
  .pol-col .mask {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8);
    top: 0;
    left: 0;
    width: 0;
    z-index: 2;
    bottom: 0;
    height: 100%; }

.pol3d {
  -webkit-transform: translate3d(0, 0, 0);
  width: 80%;
  position: absolute;
  margin: 0 auto;
  display: block;
  left: 0;
  right: 0;
  z-index: 1; }

.pol3d-title {
  width: 100%;
  position: relative;
  z-index: 2; }
  .pol3d-title .pol3d-number {
    font-family: "Demi", "Arial", Helvetica, "sans-serif";
    display: block;
    font-size: 3vw;
    text-align: center;
    color: #fff; }
  .pol3d-title .pol3d-text {
    position: relative;
    font-weight: 700;
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    text-align: center;
    display: block;
    width: 100%; }
    .pol3d-title .pol3d-text .rb {
      position: absolute;
      bottom: 0%;
      width: 0;
      height: 2vh;
      background: #ff0000;
      z-index: -1; }
    .pol3d-title .pol3d-text span {
      position: relative;
      display: block;
      font-size: 4vh;
      line-height: 4.8vh;
      margin-bottom: .6vh; }
  .pol3d-title .pol3d-content {
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    font-family: "NexaBook", "Arial", Helvetica, "sans-serif";
    color: #fff;
    font-size: 1.3vw;
    visibility: hidden;
    padding: 0 10%; }

.service-vm-btn {
  color: #fff;
  cursor: pointer;
  text-decoration: underline !important; }

.pol-popup {
  background-position: bottom center;
  background-size: 100% auto;
  background-color: #fff;
  visibility: hidden;
  opacity: 0;
  display: none;
  position: fixed;
  z-index: 99999;
  width: 40%;
  height: auto;
  left: 30%;
  top: 15%;
  border-radius: 40px/24px;
  box-shadow: 0 0 42px 12px #ddd;
  transition: all .5s;
  padding: 50px 30px 30px;
  font-family: "NexaBook", "Arial", Helvetica, "sans-serif"; }
  .pol-popup h5 {
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #ff0000; }
  .pol-popup.show {
    opacity: 1;
    visibility: visible;
    display: block; }
  .pol-popup .close-pol-btn {
    position: absolute;
    right: 2vw;
    top: 1.4vw;
    cursor: pointer; }
    .pol-popup .close-pol-btn img {
      width: 1.5vw; }

.service_cover .f-cover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.8); }
.service_cover .m-cover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background-color: rgba(176, 239, 242, 0.8); }
.service_cover .l-cover {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  width: 0;
  background-color: rgba(73, 195, 201, 0.9); }

.client-list {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 25%; }
  .client-list .client-list-inner {
    width: 100%;
    position: relative;
    padding-bottom: 20%;
    border-left: 1px solid #ddd;
    height: 80vh;
    margin-top: 20vh; }

.current-client {
  margin-bottom: 2vh; }

.old-client:last-child {
  border-bottom: 1px solid #ddd; }

.current-client, .old-client {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-bottom: 2vh; }
  .current-client .client-item, .old-client .client-item {
    width: 16.6%;
    float: left; }
    .current-client .client-item img, .old-client .client-item img {
      max-width: 100%; }
    .current-client .client-item:hover img, .old-client .client-item:hover img {
      filter: none; }

.clients-inner {
  height: 100%;
  width: 100%; }
  .clients-inner .row {
    height: 100%;
    width: 100%; }
    .clients-inner .row .col {
      height: 100%;
      width: 100%; }

.client-title {
  font-family: "NexaHeavy", "Arial", Helvetica, "sans-serif";
  font-weight: 700;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: absolute;
  top: 30%;
  left: -6%;
  color: #77d2d7;
  font-size: 6vw;
  line-height: 5vw; }
  .client-title.en-ct {
    top: 43%;
    left: -22%;
    font-size: 4vw;
    line-height: 4vw;
    text-align: left; }
  .client-title span {
    color: #ff6f91; }

.service-text-group {
  position: relative; }

.service-drap {
  position: absolute;
  width: 100%;
  height: 100%; }

#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%; }

#youtubewrap {
  margin-bottom: 1rem; }

.leaf-video {
  position: absolute !important;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.videoWrapper, #youtubewrap, .leaf-video {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0; }

.videoWrapper iframe, #youtubewrap iframe, .leaf-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

.videoWrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.service-text {
  z-index: 2;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  perspective: 2000px; }
  .service-text .service-text-inner h5 {
    font-family: "NexaBook", "Arial", Helvetica, "sans-serif";
    font-size: 2.3vw;
    line-height: 2.3vw;
    color: #fff;
    margin-top: .3vw;
    margin-right: -1vw; }
    .service-text .service-text-inner h5 span.h_line {
      height: .2vw;
      width: 2.7vw;
      background: #ffff;
      display: inline-block;
      margin: 0 1vw 0 1vw; }
    .service-text .service-text-inner h5 span:last-child {
      font-family: "Nexa", "Arial", Helvetica, "sans-serif"; }
  .service-text .service-text-inner h3 {
    position: relative;
    font-family: "NexaHeavy", "Arial", Helvetica, "sans-serif";
    font-size: 6vw;
    line-height: 5vw;
    color: #fff;
    -webkit-transform: translate3d(0, 0, 0);
    justify-content: center;
    display: flex;
    margin-bottom: 0; }
  .service-text .service-text-inner p {
    font-family: "NexaBook", "Arial", Helvetica, "sans-serif";
    font-size: 2.3vw;
    line-height: 2.3vw;
    margin-bottom: 0;
    color: #fff; }
    .service-text .service-text-inner p.lp {
      font-family: "Nexa", "Arial", Helvetica, "sans-serif";
      font-size: 1.7vw;
      line-height: 1.7vw; }
  .service-text .service-text-inner .b_line {
    margin-bottom: 2vw;
    height: 0;
    margin-top: 2vw;
    display: flex;
    vertical-align: top;
    align-items: flex-end;
    justify-content: center; }
    .service-text .service-text-inner .b_line span {
      color: #fff;
      background-color: #fff;
      width: .8vw;
      height: .2vw; }
  .service-text .service-text-inner .hand-icon {
    width: 3.5vw;
    margin-top: 6vh; }

.con-scroll {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto; }

.con-text {
  font-family: "Nexa", "Arial", Helvetica, "sans-serif";
  color: #000;
  text-transform: uppercase;
  margin-bottom: 1vh;
  animation: context 1s linear infinite;
  font-size: .8vw; }

@keyframes context {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translateY(20%); }
  0% {
    transform: translate(0, 0); } }
.con-lines {
  display: block;
  height: 2vh;
  cursor: pointer;
  text-align: center;
  margin: 0 auto; }
  .con-lines .con-line {
    display: inline-block;
    margin: 0 .25vw;
    height: 100%;
    width: 3px;
    background-color: #fff;
    animation: conline 1s linear infinite;
    transform-origin: bottom center; }

@keyframes conline {
  0% {
    transform: scaleY(1); }
  50% {
    transform: scaleY(1.2); }
  100% {
    transform: scaleY(1); } }
.gpol-group {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0; }
  .gpol-group .gpol-inner {
    position: relative;
    height: 100%;
    width: 100%; }
  .gpol-group .history-icon {
    position: absolute; }
    .gpol-group .history-icon.hc1-icon {
      height: 10.96vh;
      top: 23.11vh;
      left: 8.2%; }
    .gpol-group .history-icon.hc2-icon {
      height: 6.2vh;
      bottom: 7.7vh;
      left: 37.6%; }
    .gpol-group .history-icon.hc3-icon {
      height: 22.9vh;
      bottom: 0;
      left: 54%; }
    .gpol-group .history-icon.ht1-icon {
      height: 28.11vh;
      top: 61vh;
      left: 7%; }
    .gpol-group .history-icon.ht2-icon {
      height: 9.1vh;
      top: 5.4vh;
      left: 30.8%; }
    .gpol-group .history-icon.ht3-icon {
      height: 23.3vh;
      top: 0;
      left: 58.4%; }
    .gpol-group .history-icon.ht4-icon {
      height: 13vh;
      top: 34vh;
      right: 8%; }
    .gpol-group .history-icon.ht5-icon {
      height: 28.44vh;
      bottom: 4.7vh;
      right: 10%; }

.sd_cover .sd-f-cover {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 0;
  background-color: rgba(73, 195, 201, 0.8);
  z-index: 5; }
.sd_cover .sd-l-cover {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 5; }

#service_content {
  position: relative;
  height: 100vh;
  width: 100%;
  display: block;
  background-size: 100% 100%;
  background-repeat: no-repeat; }

.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
  color: #fff; }
  .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.8); }
    .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
      opacity: 1; }
  .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
    opacity: .25; }
  .slick-prev:before, .slick-next:before {
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: 0; }
  .slick-prev:before {
    content: "\f104"; }

[dir='rtl'] .slick-prev {
  right: 0;
  left: auto; }
  [dir='rtl'] .slick-prev:before {
    content: "\f104"; }

.slick-next {
  right: 0; }
  .slick-next:before {
    content: "\f105"; }

[dir='rtl'] .slick-next {
  right: auto;
  left: 0; }
  [dir='rtl'] .slick-next:before {
    content: "\f105"; }

.slick-dotted.slick-slider {
  margin-bottom: 0; }

.slick-dots {
  position: absolute;
  bottom: 0;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  right: 0; }
  .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    line-height: 20px; }
    .slick-dots li button {
      font-size: 0;
      width: 6px;
      height: 6px;
      cursor: pointer;
      border-radius: 50%;
      outline: none;
      background: transparent;
      border: 2px solid #000;
      vertical-align: middle; }
    .slick-dots li.slick-active button {
      background: #000;
      border: 2px solid #000; }

#external-buttons {
  position: absolute;
  right: 7vw;
  bottom: 19vh; }
  #external-buttons:before {
    position: absolute;
    content: "OUR VALUES _";
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    top: -9vh;
    display: inline-block;
    left: -7vw;
    width: 200px;
    transform: rotate(90deg); }
  #external-buttons a {
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    cursor: pointer;
    line-height: 20px;
    display: block;
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10vh 0; }
    #external-buttons a span {
      display: block;
      text-indent: -9999px;
      font-size: 0;
      width: 12px;
      height: 12px;
      cursor: pointer;
      border-radius: 50%;
      outline: none;
      background: transparent;
      vertical-align: middle; }
    #external-buttons a.active span {
      background-color: #ff0000; }

.hover-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.our-value-slider .slick-dots {
  right: 7vw;
  bottom: 19vh; }
  .our-value-slider .slick-dots:before {
    position: absolute;
    content: "OUR VALUES _";
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    top: -9vh;
    display: inline-block;
    left: -7vw;
    width: 200px;
    transform: rotate(90deg); }
  .our-value-slider .slick-dots li {
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10vh 0; }
    .our-value-slider .slick-dots li button {
      margin: 4px;
      width: 12px;
      height: 12px;
      border: none; }
    .our-value-slider .slick-dots li.slick-active button {
      background: #ff0000; }

.value-inner, .value-outer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.value-inner {
  z-index: -1;
  visibility: hidden; }

.value-outer {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  perspective: 2000px; }
  .value-outer .vl-line-group {
    position: absolute;
    width: 100%;
    height: 100%; }
  .value-outer .vl-line {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none; }
  .value-outer aside {
    position: absolute;
    background-color: #ddd; }
    .value-outer aside.vl-line-v {
      width: 1px;
      top: 14vh;
      bottom: 12vh;
      left: 9%; }
    .value-outer aside.vl-line-h {
      height: 1px;
      width: 100%;
      left: 0;
      bottom: 12vh; }

.value-outer-wrap {
  position: relative;
  width: 100%; }

.big-values-group {
  width: 100%;
  position: absolute;
  height: 200vh;
  top: 0;
  left: 0;
  background-size: 100% 100%;
  z-index: -1; }
  .big-values-group .bbg-values-inner {
    width: 100%;
    height: 100%;
    position: relative; }
    .big-values-group .bbg-values-inner .bbg-values {
      position: absolute;
      height: 24vh;
      width: 20.333%;
      top: 44vh;
      left: 0;
      right: 0;
      margin: 0 auto;
      background-size: 100%; }
      .big-values-group .bbg-values-inner .bbg-values .bbg-vl-animal {
        position: relative;
        width: 100%;
        height: 100%; }
        .big-values-group .bbg-values-inner .bbg-values .bbg-vl-animal img {
          position: absolute;
          height: 33.7vh;
          top: 50%;
          left: 0;
          right: 0;
          margin: 0 auto;
          transform: translateY(-50%);
          visibility: hidden; }

.big-values-slider {
  visibility: hidden; }

.values-group {
  width: 100%;
  position: absolute;
  bottom: 32vh;
  left: 0;
  z-index: 1; }

.go-btn {
  position: relative;
  cursor: pointer;
  outline: none;
  font-family: "Nexa", "Arial", Helvetica, "sans-serif";
  font-size: 2vw;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }
  .go-btn:hover span {
    visibility: hidden;
    opacity: 0; }
  .go-btn:hover:after {
    visibility: visible; }
  .go-btn:after {
    position: absolute;
    content: "";
    background-size: 100% 100%;
    width: 2vw;
    height: 3.4vw;
    bottom: 0;
    visibility: hidden; }
  .go-btn.prev-btn:after {
    background-image: url("./images/pre-btn-vl.png");
    left: 50%;
    text-transform: translateX(-50%); }
  .go-btn.next-btn:after {
    background-image: url("./images/next-btn-vl.png");
    right: 50%;
    text-transform: translateX(-50%); }
  .go-btn.go-0 {
    background-image: linear-gradient(to left, #76f0fb, #ffaec9); }
  .go-btn.go-1 {
    background-image: linear-gradient(to left, #cc77f0, #84f2d2); }
  .go-btn.go-2 {
    background-image: linear-gradient(to left, #2159d7 0%, #d75ffa 40%, #e8e05a 60%, #ff3737 100%); }
  .go-btn img {
    width: 2vw; }

.back-btn {
  outline: none;
  font-family: "Gotham", "Arial", Helvetica, "sans-serif";
  color: #000 !important;
  border-bottom: 0.3vh solid #77d2d7;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-size: 1vw; }

.characters {
  position: absolute;
  top: 0;
  left: 0; }

.character-title {
  position: relative;
  z-index: 1;
  font-family: "Nexa", "Arial", Helvetica, "sans-serif";
  font-size: 5.6vw;
  display: inline-block;
  text-decoration: none;
  margin-top: 15vh;
  color: #77d2d7;
  opacity: .4; }

.read-more-vl {
  position: absolute;
  outline: none;
  font-family: "Gotham", "Arial", Helvetica, "sans-serif";
  color: #000 !important;
  border-bottom: .3vh solid #77d2d7;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  bottom: 3vh;
  z-index: 1;
  font-size: .8vw;
  visibility: hidden; }

.isSplit {
  display: inline; }
  .isSplit.has-red {
    cursor: pointer;
    text-decoration: none; }
    .isSplit.has-red:hover .letter-measure, .isSplit.has-red.active .letter-measure {
      cursor: pointer;
      color: #ff0000; }

.letter-measure {
  font-family: "Nexa", "Arial", Helvetica, "sans-serif";
  display: inline-block;
  width: 1.95vw;
  height: 9.1vh;
  color: #ddd;
  font-size: 1.6vw; }

.first-line .letter-measure {
  width: 3.25vw; }

.values-group-bg {
  width: 100%;
  position: absolute;
  bottom: 32vh;
  left: 0;
  z-index: -1; }
  .values-group-bg .value-ani-i {
    width: 100%;
    height: 24vh;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer; }
    .values-group-bg .value-ani-i .bg-vl {
      position: absolute;
      height: 100%;
      width: 100%;
      left: 0;
      top: 0; }
    .values-group-bg .value-ani-i.value-bra .bg-vl {
      background-image: linear-gradient(to left, #76f0fb, #ffaec9); }
    .values-group-bg .value-ani-i.value-ori .bg-vl {
      background-image: linear-gradient(to left, #cc77f0, #84f2d2); }
    .values-group-bg .value-ani-i.value-int .bg-vl {
      background-image: linear-gradient(to left, #2159d7 0%, #d75ffa 40%, #e8e05a 60%, #ff3737 100%); }

.value-col .value-col-i {
  width: 100%;
  height: 24vh;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 1; }
  .value-col .value-col-i img {
    height: 33.7vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .value-col .value-col-i h5 {
    margin: 0;
    width: 100%;
    z-index: 1;
    color: #fff;
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    font-size: 3vw;
    line-height: 0; }
  .value-col .value-col-i:after {
    content: "";
    position: absolute;
    background-color: #fff;
    width: 0%;
    height: .3vw;
    top: 50%; }
  .value-col .value-col-i:hover:after {
    animation: hover-val .25s ease-in-out 0s forwards; }

@keyframes hover-val {
  80% {
    width: 67%; }
  100% {
    width: 100%; } }
.big-values-slider {
  height: 100vh; }
  .big-values-slider .value-item {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow-y: scroll; }
    .big-values-slider .value-item::-webkit-scrollbar {
      display: none; }
    .big-values-slider .value-item .top-value {
      height: 200vh;
      width: 100%; }
      .big-values-slider .value-item .top-value.bv-bra .head-vl .bv-title {
        font-size: 22vw; }
      .big-values-slider .value-item .top-value.bv-bra .content-vl p {
        font-size: 3.1vw; }
      .big-values-slider .value-item .top-value.bv-ori .head-vl .bv-title {
        font-size: 18vw; }
      .big-values-slider .value-item .top-value.bv-ori .content-vl p {
        font-size: 2.9vw; }
      .big-values-slider .value-item .top-value.bv-ori .content-vl.en-vl p {
        font-size: 2.6vw; }
      .big-values-slider .value-item .top-value.bv-int .head-vl .bv-title {
        font-size: 21.3vw; }
      .big-values-slider .value-item .top-value.bv-int .content-vl p {
        font-size: 3.1vw; }
      .big-values-slider .value-item .top-value.bv-int .content-vl.en-vl p {
        font-size: 2.6vw;
        line-height: 3.6vw; }
      .big-values-slider .value-item .top-value .head-vl {
        height: 90vh;
        width: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center; }
        .big-values-slider .value-item .top-value .head-vl .bv-title {
          color: #fff;
          font-size: 20vw;
          font-family: "Nexa", "Arial", Helvetica, "sans-serif";
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-image: linear-gradient(to top, transparent 0%, #fff 50%); }
        .big-values-slider .value-item .top-value .head-vl img {
          height: 80vh;
          position: absolute;
          left: 0;
          right: 0;
          margin: 0 auto; }
      .big-values-slider .value-item .top-value .content-vl {
        height: 91vh;
        width: 100%;
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 0 16.66667%; }
        .big-values-slider .value-item .top-value .content-vl p {
          font-family: "Nexa", "Arial", Helvetica, "sans-serif";
          color: #fff;
          font-size: 3.1vw;
          line-height: 4.1vw;
          text-align: justify; }
        .big-values-slider .value-item .top-value .content-vl .people-ntt {
          display: block;
          margin: 0 auto;
          width: 16vw;
          position: absolute;
          bottom: 13%;
          left: 0;
          right: 0; }
      .big-values-slider .value-item .top-value .footer-vl {
        height: 19vh;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8.33333%; }
    .big-values-slider .value-item .bottom-value {
      height: 100vh; }
      .big-values-slider .value-item .bottom-value .value-content {
        font-size: 3vw; }

@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }
.pol3d.rotating.pol3d-1 {
  -webkit-animation: rotating 20s linear infinite;
  -moz-animation: rotating 20s linear infinite;
  -ms-animation: rotating 20s linear infinite;
  -o-animation: rotating 20s linear infinite;
  animation: rotating 20s linear infinite; }
.pol3d.rotating.pol3d-2 {
  -webkit-animation: rotating 12s linear infinite;
  -moz-animation: rotating 12s linear infinite;
  -ms-animation: rotating 12s linear infinite;
  -o-animation: rotating 12s linear infinite;
  animation: rotating 12s linear infinite; }
.pol3d.rotating.pol3d-3 {
  -webkit-animation: rotating 22s linear infinite;
  -moz-animation: rotating 22s linear infinite;
  -ms-animation: rotating 22s linear infinite;
  -o-animation: rotating 22s linear infinite;
  animation: rotating 22s linear infinite; }

.pol-col:hover .pol3d.rotating {
  bottom: 10vh; }

.value {
  height: 100%;
  width: 100%; }
  .value.disabled {
    pointer-events: none; }

.wave {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  background-position: left top; }

.value-text-group.disabled {
  pointer-events: none; }
.value-text-group.group-1 h5 {
  left: 25vw;
  top: 25vh;
  font-size: 1.6vw;
  line-height: 1.6vw; }
.value-text-group.group-1 h2 {
  font-size: 16vw;
  line-height: 16vw;
  top: 26.5vh;
  left: 6vw; }
  .value-text-group.group-1 h2 span.b {
    color: #49c3c9; }
  .value-text-group.group-1 h2 span.h-r {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #49c3c9 0%, #49c3c9 26%, #fff 10%, #fff 100%); }
  .value-text-group.group-1 h2 span.v {
    margin-left: -2vw; }
.value-text-group.group-1 h4 {
  left: 7vw;
  font-size: 16vw;
  line-height: 16vw;
  top: 26.5vh; }
  .value-text-group.group-1 h4 span.v {
    margin-left: -2vw; }
.value-text-group.group-2 h5 {
  left: 25vw;
  bottom: 22vh;
  font-size: 1.6vw;
  line-height: 1.6vw; }
.value-text-group.group-2 .title-top h2 {
  font-size: 14.5vw;
  line-height: 14.5vw;
  top: 17.5vh;
  left: 6vw;
  letter-spacing: -.8vw; }
  .value-text-group.group-2 .title-top h2 span.h-r {
    background-image: linear-gradient(to right, #49c3c9 0%, #49c3c9 42%, #fff 10%, #fff 100%); }
  .value-text-group.group-2 .title-top h2 span.v {
    margin-left: -2vw; }
.value-text-group.group-2 .title-top h4 {
  left: 7.2vw;
  font-size: 14.5vw;
  line-height: 14.5vw;
  top: 17.5vh;
  letter-spacing: -.8vw; }
.value-text-group.group-2 .title-bottom h2 {
  font-size: 16.7vw;
  line-height: 16.7vw;
  top: 41.5vh;
  left: 6vw;
  letter-spacing: -.8vw; }
  .value-text-group.group-2 .title-bottom h2 span.h-r {
    background-image: linear-gradient(to right, #49c3c9 0%, #49c3c9 32%, #fff 10%, #fff 100%); }
.value-text-group.group-2 .title-bottom h4 {
  left: 7.2vw;
  font-size: 16.7vw;
  line-height: 16.7vw;
  top: 41.5vh;
  letter-spacing: -.8vw; }
.value-text-group.group-3 h5 {
  left: 28vw;
  bottom: 43vh;
  font-size: 1.6vw;
  line-height: 1.6vw; }
.value-text-group.group-3 h2 {
  font-size: 10.5vw;
  line-height: 10.5vw;
  top: 32vh;
  left: 6vw; }
  .value-text-group.group-3 h2 span.h-r {
    background-image: linear-gradient(to right, #49c3c9 0%, #49c3c9 58%, #fff 10%, #fff 100%); }
.value-text-group.group-3 h4 {
  left: 7vw;
  font-size: 10.5vw;
  line-height: 10.5vw;
  top: 32vh; }
.value-text-group h5 {
  font-family: "Nexa", "Arial", Helvetica, "sans-serif";
  position: absolute; }
.value-text-group h2 {
  font-family: "Demi", "Arial", Helvetica, "sans-serif";
  z-index: 2;
  display: flex;
  justify-content: left;
  position: absolute; }
  .value-text-group h2 span {
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 2; }
    .value-text-group h2 span.b {
      color: #49c3c9; }
    .value-text-group h2 span.h-r {
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
.value-text-group h4 {
  font-family: "Demi", "Arial", Helvetica, "sans-serif";
  position: absolute;
  z-index: 1; }
  .value-text-group h4 span {
    color: #9fdcdf;
    display: inline-block;
    position: relative;
    z-index: 1; }

.animal {
  z-index: 3; }

.brave {
  height: 94vh;
  width: 28.7vw;
  position: absolute;
  right: 8vw;
  bottom: -23px; }

.original {
  height: 88vh;
  width: 24.5vw;
  position: absolute;
  right: 12.5vw;
  bottom: 4vh; }

.integrity {
  height: 88vh;
  width: 23.3vw;
  position: absolute;
  right: 14vw;
  bottom: -2px; }

.svgwave {
  position: absolute; }

.work-gallery {
  position: absolute;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  z-index: 2; }
  .work-gallery .gallery-list {
    width: 100%;
    height: 60%;
    margin-bottom: 10vh; }
    .work-gallery .gallery-list .gallery-list-inner {
      width: 60vw;
      height: 100%;
      float: right; }
      .work-gallery .gallery-list .gallery-list-inner .gallery-row {
        height: 100%;
        width: 100%;
        padding-left: 16.666667%;
        padding-top: 4vh;
        padding-bottom: 4vh; }
        .work-gallery .gallery-list .gallery-list-inner .gallery-row .gallery-col {
          float: right;
          padding: 0;
          width: 75%;
          height: 100%; }
      .work-gallery .gallery-list .gallery-list-inner .album-slideshow {
        width: 100%;
        height: 100%;
        position: relative;
        margin-left: -12%; }
        .work-gallery .gallery-list .gallery-list-inner .album-slideshow a.img-slideshow {
          position: absolute;
          display: none;
          height: 100%;
          display: block;
          margin: 0 auto;
          visibility: hidden;
          cursor: pointer;
          width: 100%; }
          .work-gallery .gallery-list .gallery-list-inner .album-slideshow a.img-slideshow.show {
            visibility: visible; }
          .work-gallery .gallery-list .gallery-list-inner .album-slideshow a.img-slideshow img {
            display: block;
            margin: .5vw;
            width: 100%;
            box-shadow: 0 0 63px #eee; }
        .work-gallery .gallery-list .gallery-list-inner .album-slideshow .seemore-slideshow {
          position: absolute;
          right: 0;
          left: 43%;
          top: 115%;
          cursor: pointer;
          font-family: "Gotham", "Arial", Helvetica, "sans-serif";
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 2vh;
          color: #000;
          font-size: .8vw; }
          .work-gallery .gallery-list .gallery-list-inner .album-slideshow .seemore-slideshow .campain {
            font-family: "GothamUltra", "Arial", Helvetica, "sans-serif";
            text-transform: uppercase; }
          .work-gallery .gallery-list .gallery-list-inner .album-slideshow .seemore-slideshow img {
            margin-left: 3vw;
            transform: rotate(180deg); }
          .work-gallery .gallery-list .gallery-list-inner .album-slideshow .seemore-slideshow i {
            color: #000;
            width: 6vh;
            height: 6vh;
            border-radius: 50%;
            border: .15vw solid #fff;
            font-size: 6vh;
            line-height: 6vh;
            margin-left: .2vh;
            display: flex;
            align-items: center;
            justify-content: center; }

/* Make it move */
.our-work-text {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: flex-end;
  z-index: 1; }
  .our-work-text.work-top {
    bottom: calc(100% - 9.8vh); }
    .our-work-text.work-top .our-work-char {
      line-height: 12vw;
      background-image: linear-gradient(to right, #49c3c9, #a8e2e5); }
  .our-work-text.work-bottom {
    top: calc(100% - 9.8vh); }
    .our-work-text.work-bottom .our-work-char {
      line-height: 9vw;
      background-image: linear-gradient(to right, #a8e2e5, #49c3c9); }
  .our-work-text .our-work-char {
    font-size: 15vw;
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    text-transform: uppercase;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

.our-work {
  position: relative;
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100%; }

.work-inner-bg {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: #77d2d7;
  background-image: radial-gradient(circle at 92% 104%, #fffc00 -10%, #f76d83 14%, transparent 26%);
  background-size: 100% 100%;
  right: 100%; }

.work-inner-wbg {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
  right: 100%; }

.work-inner {
  position: absolute;
  height: 100vh;
  width: 100vw;
  right: 100%;
  visibility: hidden; }
  .work-inner .work-inner_wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow: hidden; }

.work-slide-title {
  font-family: "NexaHeavy", "Arial", Helvetica, "sans-serif";
  color: #000;
  white-space: pre-wrap;
  text-transform: uppercase;
  font-size: 2vw;
  margin-bottom: 0;
  text-align: left;
  margin-left: 16.66667%;
  margin-bottom: 1vh; }

.work-item-title {
  text-align: right; }
  .work-item-title a {
    font-family: "NexaLight", "Arial", Helvetica, "sans-serif";
    color: #000;
    font-size: 1.5vw;
    font-weight: 300;
    margin-top: 1vh;
    text-decoration: none;
    display: block; }

.work-item-meta {
  font-family: "Nexa", "Arial", Helvetica, "sans-serif";
  color: #cacaca;
  font-size: 1vw;
  margin-top: -.8vh; }

.view-post {
  position: absolute;
  bottom: 5vh;
  left: 0;
  overflow: hidden; }
  .view-post span {
    position: relative;
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    text-transform: uppercase;
    color: #fff !important;
    background-color: #77d2d7;
    display: inline-block;
    padding: .5vw 2vw;
    text-decoration: none;
    transition: transform .5s;
    margin-bottom: 1%;
    font-size: 1vw; }
    .view-post span:after {
      content: attr(data-vp);
      font-family: "Nexa", "Arial", Helvetica, "sans-serif";
      position: absolute;
      top: 103%;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #77d2d7;
      padding: .5vw 2vw;
      font-size: 1vw; }
  .view-post:hover span {
    transform: translateY(-100%); }

.our-work-thumbs {
  overflow: hidden;
  margin-right: 14%; }
  .our-work-thumbs #our-work-drag {
    width: 100%;
    height: 100%;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(10, 24vw);
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    direction: rtl; }
  .our-work-thumbs .col-thumb {
    float: right;
    transition: all .5s;
    width: 24vw;
    margin-bottom: 2vh; }
    .our-work-thumbs .col-thumb.is_hovered .t-title, .our-work-thumbs .col-thumb:hover .t-title {
      visibility: visible; }

.our-work-thumbs .slick-slide {
  float: right; }

.t-thumb {
  position: relative; }
  .t-thumb a.t-thumb-l {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .t-thumb img {
    width: 100%;
    height: auto; }

.our-work-inners {
  height: 100%;
  overflow: hidden; }

.t-title {
  visibility: hidden;
  text-align: left; }
  .t-title h5 {
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    text-transform: uppercase;
    font-size: .9vw;
    color: #000;
    white-space: nowrap;
    margin-bottom: 0;
    margin-right: 1vw;
    margin-top: .5vh; }
  .t-title h3 {
    font-size: .9vw;
    margin-bottom: 0; }
    .t-title h3 a {
      font-family: "NexaLight", "Arial", Helvetica, "sans-serif";
      font-size: .9vw;
      color: #000;
      white-space: nowrap;
      text-decoration: none; }

.our-work-title ul {
  list-style: none;
  margin-bottom: 0;
  margin-right: 4vw; }
  .our-work-title ul li.our-work-li {
    font-family: "GothamUltra", "Arial", Helvetica, "sans-serif";
    color: #004159;
    font-size: 4.5vw;
    line-height: 5.5vw;
    text-transform: uppercase;
    text-align: right;
    position: relative;
    cursor: pointer;
    background: -webkit-linear-gradient(left, #7c76e3, #ff58bc, #61e5ec);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
    .our-work-title ul li.our-work-li:nth-child(2) {
      opacity: .8; }
    .our-work-title ul li.our-work-li:nth-child(3) {
      opacity: .6; }
    .our-work-title ul li.our-work-li:nth-child(4) {
      opacity: .4; }
    .our-work-title ul li.our-work-li:nth-child(5) {
      opacity: .2; }
    .our-work-title ul li.our-work-li:hover {
      background: transparent;
      -webkit-text-fill-color: inherit;
      opacity: 1; }

.back-to-outer-slide {
  position: absolute;
  bottom: 10vh;
  right: 7.3vw;
  height: 3vh;
  display: inline-flex;
  align-items: center; }
  .back-to-outer-slide .btos {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    font-family: "Nexa", "Arial", Helvetica, "sans-serif";
    color: #000;
    font-size: 1vw;
    text-decoration: none;
    font-weight: 700; }
    .back-to-outer-slide .btos i {
      color: #000;
      display: inline-block;
      width: 3vw;
      height: 3vw;
      border-radius: 50%;
      border: .15vw solid #fff;
      font-size: 3vw;
      text-align: center;
      line-height: 3vw;
      margin-right: 1.2vw;
      display: flex;
      justify-content: center;
      align-items: center; }

.our-work-footer {
  position: absolute;
  bottom: 4vh;
  width: 100%; }

.our-work-credentials {
  position: absolute;
  bottom: 4vh;
  right: 25%;
  z-index: 3; }
  .our-work-credentials a {
    color: #77d2d7; }
    .our-work-credentials a i {
      color: #000; }

.btt {
  position: absolute;
  bottom: 11vh;
  width: 4vw;
  right: 7.33333%;
  animation: btt 1s linear infinite;
  cursor: pointer; }
  .btt img {
    max-width: 100%; }

@keyframes btt {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translateY(-50%); } }
.our-wf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0; }

.our-wf-l {
  float: left; }
  .our-wf-l a {
    color: #fff; }
@keyframes marquee {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(-100%, 0); } }
.our-wf-r {
  float: right; }
  .our-wf-r ul {
    margin: 0; }
    .our-wf-r ul li {
      list-style: none;
      display: inline;
      color: #77d2d7;
      margin-left: 1vw; }
      .our-wf-r ul li i {
        width: 2vw;
        height: 2vw;
        border-radius: 50%;
        line-height: 2vw;
        color: #000;
        border: 1px solid #000; }

.work-slide {
  height: 60%;
  width: 100%;
  margin-top: 10vh; }
  .work-slide .work-slide-item .wsi-row {
    display: flex;
    padding-left: 16.666667%; }
    .work-slide .work-slide-item .wsi-row .wsi-col {
      text-align: left;
      float: left; }
  .work-slide .work-slide-item .wsi-l {
    position: relative;
    width: 25%;
    padding: .5vh 0; }
    .work-slide .work-slide-item .wsi-l.ondrag {
      transition: .5s all;
      visibility: hidden;
      margin-right: -25%; }
  .work-slide .work-slide-item .wsi-r {
    width: 75%;
    position: relative; }
    .work-slide .work-slide-item .wsi-r .work-item-img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%; }
    .work-slide .work-slide-item .wsi-r img {
      width: 100%;
      background-color: #fff; }

#swi_control {
  position: absolute;
  bottom: 2vh;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 2; }
  #swi_control #swi_slide .swi-bg {
    left: 0; }
  #swi_control #swi_thumb .swi-bg {
    right: 0; }
  #swi_control #swi_slide, #swi_control #swi_thumb {
    position: relative;
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    margin: 0 3vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }
    #swi_control #swi_slide .swi-bg, #swi_control #swi_thumb .swi-bg {
      position: absolute;
      top: 0;
      width: 3vw;
      height: 3vw;
      border-radius: 50%; }
    #swi_control #swi_slide i.swi-icon, #swi_control #swi_thumb i.swi-icon {
      width: 2.1vw;
      height: 1.4vw;
      background-size: 100% 100%;
      z-index: 1; }
    #swi_control #swi_slide.active .swi-bg, #swi_control #swi_thumb.active .swi-bg {
      background-color: #77d2d7; }
  #swi_control #swi_slide i.swi-icon {
    background-image: url("./images/wslide-icon.svg"); }
  #swi_control #swi_slide.active i.swi-icon {
    background-image: url("./images/wslide-wicon.svg"); }
  #swi_control #swi_thumb i.swi-icon {
    background-image: url("./images/wthumb-icon.svg"); }
  #swi_control #swi_thumb.active i.swi-icon {
    background-image: url("./images/wthumb-wicon.svg"); }

#dragbar {
  position: absolute;
  bottom: 12vh;
  left: 20vw;
  width: 60vw;
  height: 2vh; }
  #dragbar .dragbar-inner {
    position: relative;
    width: 52vw;
    height: 100%; }

.dragbar_dot {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center; }
  .dragbar_dot:before, .dragbar_dot:after {
    content: "";
    position: absolute;
    height: .5vw;
    width: .5vw;
    background-color: #000;
    border-radius: 50%;
    background-image: url("./images/slide-dot-icon.png");
    background-repeat: no-repeat;
    background-size: 100% 100%; }
  .dragbar_dot:before {
    left: -.8vw;
    top: .5vh; }
  .dragbar_dot:after {
    right: -.8vw;
    top: .5vh; }
  .dragbar_dot .dragbar-line {
    border-bottom: 1px solid #ddd;
    width: 100%; }

.l-dragger {
  background-color: #fff;
  width: 8vw;
  height: .5vh;
  float: right;
  line-height: 1vh;
  text-align: center;
  padding: 0 .2vw;
  z-index: 1;
  position: relative;
  margin: .75vh 0; }
  .l-dragger .l-dragger-inner {
    background-color: #77d2d7;
    position: relative;
    display: block;
    width: 100%;
    height: 100%; }

#progressbar {
  position: absolute;
  top: 15vh;
  left: 20vw;
  width: 60vw;
  height: 2vh; }
  #progressbar .progressbar-inner {
    position: relative;
    width: 56vw;
    height: 100%; }

.progress_dot {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center; }
  .progress_dot:before, .progress_dot:after {
    content: "";
    position: absolute;
    height: .5vw;
    width: .5vw;
    background-color: #000;
    border-radius: 50%;
    background-image: url("./images/slide-dot-icon.png");
    background-repeat: no-repeat;
    background-size: 100% 100%; }
  .progress_dot:before {
    left: -.8vw;
    top: .5vh; }
  .progress_dot:after {
    right: -.8vw;
    top: .5vh; }
  .progress_dot .progress-line {
    border-bottom: 1px solid #ddd;
    width: 100%; }

.dragger {
  background-color: #fff;
  width: 4vw;
  height: 2vh;
  float: right;
  line-height: 2vh;
  text-align: center;
  padding: 0 .5vw;
  z-index: 1;
  position: relative; }
  .dragger .dragger-inner {
    background-color: #77d2d7;
    position: relative; }
    .dragger .dragger-inner .progressDragger {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0;
      background-color: #000;
      z-index: 1; }
    .dragger .dragger-inner span {
      position: relative;
      font-size: .8vw;
      color: #fff;
      display: block;
      font-family: "Nexa", "Arial", Helvetica, "sans-serif";
      z-index: 2; }

.page-title {
  font-size: 4vw;
  font-family: "Nexa", "Arial", Helvetica, "sans-serif";
  position: relative;
  padding-bottom: 3vh;
  margin-bottom: 3vh; }
  .page-title:after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    height: .6vh;
    width: 7vw;
    background-color: #000; }

.page-content-head {
  margin-top: 20vh;
  margin-bottom: 10vh; }

.page-content-footer img {
  width: 100%; }

.page-content p {
  font-family: "Nexa", "Arial", Helvetica, "sans-serif";
  font-size: 1.2vw; }

.page-infomation {
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding-top: 1vh; }
  .page-infomation ul {
    list-style: none; }
    .page-infomation ul li h5 {
      margin-bottom: 0; }

.clearfix {
  clear: both; }

.news-item {
  padding: 0 30px 60px; }
  .news-item:hover .news-thumb .mask {
    opacity: 1;
    visibility: visible; }
  .news-item:hover .news-txt {
    background-color: #77d2d7; }
    .news-item:hover .news-txt p {
      color: #fff; }
    .news-item:hover .news-txt .news-meta span.news-read a {
      color: #fff; }
    .news-item:hover .news-txt .news-meta span.news-time {
      font-size: 14px;
      color: #000;
      display: block; }

.news-thumb {
  position: relative; }
  .news-thumb .mask {
    transition: .3s all;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(132deg, rgba(247, 109, 131, 0.4) 24%, rgba(255, 252, 0, 0.4) 84%, rgba(73, 195, 201, 0.4) 163%); }
    .news-thumb .mask h3 {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      text-transform: uppercase;
      align-items: center;
      padding: 0 20px; }
      .news-thumb .mask h3 a {
        color: #fff;
        font-size: 22px;
        text-decoration: none; }

.news-txt {
  padding: 20px;
  background-color: #fff;
  transition: .5s all; }
  .news-txt p {
    text-align: left;
    color: #333;
    font-size: 14px;
    margin-bottom: 20px; }
  .news-txt .news-meta {
    display: flex;
    justify-content: space-between; }
    .news-txt .news-meta span {
      display: block;
      font-size: 14px;
      height: 24px; }
      .news-txt .news-meta span.news-read {
        border-bottom: 2px solid #fff; }
        .news-txt .news-meta span.news-read a {
          text-transform: uppercase;
          text-decoration: none;
          color: #333;
          font-size: 14px;
          font-weight: 700; }
      .news-txt .news-meta span.news-time {
        font-size: 14px;
        color: #000;
        display: block; }

.main-search .input-group {
  border-bottom: 1px solid #fff; }
  .main-search .input-group .form-control {
    padding-bottom: 0;
    padding-top: 0;
    background: transparent;
    border: none;
    color: #fff;
    box-shadow: none; }
  .main-search .input-group .btn-submit {
    background: transparent;
    color: #fff; }

.single-content {
  margin-top: 30px;
  overflow-y: scroll;
  height: calc(100vh - 100px);
  padding-right: 60px; }

.single-meta {
  position: relative;
  margin: 40px 0;
  text-align: right; }
  .single-meta:before {
    content: "";
    position: absolute;
    width: 16%;
    height: 2px;
    left: 0;
    top: 14px;
    background-color: #000; }

.single-content::-webkit-scrollbar-track {
  background-color: #fff; }

.single-content::-webkit-scrollbar {
  width: 5px;
  border-radius: 10px;
  background-color: #77d2d7; }

.single-content::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #77d2d7; }

.single-slider .gallery_single img {
  max-width: 100%; }
.single-slider .slick-prev, .single-slider .slick-next {
  font-weight: 900;
  background: #fff;
  color: #000;
  font-family: 'Font Awesome 5 Pro'; }
  .single-slider .slick-prev:hover, .single-slider .slick-prev:focus, .single-slider .slick-next:hover, .single-slider .slick-next:focus {
    background: #fff; }
    .single-slider .slick-prev:hover:before, .single-slider .slick-prev:focus:before, .single-slider .slick-next:hover:before, .single-slider .slick-next:focus:before {
      opacity: 1; }
  .single-slider .slick-prev.slick-disabled:before, .single-slider .slick-next.slick-disabled:before {
    opacity: .25; }
  .single-slider .slick-prev:before, .single-slider .slick-next:before {
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  .single-slider .slick-prev:after, .single-slider .slick-next:after {
    font-weight: 900; }
.single-slider .slick-prev {
  left: auto;
  right: 0;
  transform: translateY(50%); }
  .single-slider .slick-prev:before {
    content: "\f0d9"; }
.single-slider .slick-next {
  right: 0;
  transform: translateY(-50%) !important; }
  .single-slider .slick-next:before {
    content: "\f0da"; }

@media only screen and (min-width: 1600px) {
  .brave {
    width: auto;
    right: 5vw; }

  .original {
    width: auto;
    right: 9.5vw; }

  .integrity {
    width: auto;
    right: 11vw; }

  .letter-measure {
    width: 2vw; } }
.audio-group {
  display: flex;
  align-items: flex-end;
  transform: translateY(-70%);
  z-index: -1;
  position: relative; }
  .audio-group .audio-canvas {
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
    padding-right: 80px; }
  .audio-group .play {
    border: none;
    outline: none;
    background: transparent; }
    .audio-group .play img {
      outline: none;
      cursor: pointer;
      width: 2vh; }
  .audio-group audio {
    display: none;
    visibility: hidden; }

#overlay {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: black;
  transition: 1s 0.4s; }

#progress {
  height: 1px;
  background: #fff;
  position: absolute;
  width: 0;
  top: 50%; }

#progstat {
  font-size: 0.7em;
  letter-spacing: 3px;
  position: absolute;
  top: 50%;
  margin-top: -40px;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: "Demi", "Arial", Helvetica, "sans-serif"; }

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