@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap");
@font-face {
  font-family: 'MElle HK';
  src: url("../fonts/MElleHK-Medium.woff2") format("woff2"), url("../fonts/MElleHK-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-style: normal;
}

html, body {
  width: 100%;
  color: #fff;
  background: #0bbfd7;
}

a {
  outline: 0;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
a * {
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
a:hover {
  color: #000;
}
a:visited {
  color: #000;
}
a:focus {
  outline: 0;
}

h1, h2, h3, h4, h5 {
  font-weight: 400;
  font-style: normal;
}

strong {
  /*@include text-shadow(0 0 0 #000);*/
}

img {
  max-width: 100%;
}

.desktop {
  display: block;
}

.mobile {
  display: none;
}

.container {
  /*height: 100vh;
  overflow-y: auto;*/
  /*-webkit-overflow-scrolling: touch;*/
}


/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.clearfix:after {
  clear: both;
}

@keyframes floating {
  0% {
    margin-top: -10%;
  }
  50% {
    margin-top: 0%;
  }
  100% {
    margin-top: -10%;
  }
}
@keyframes question-mark-animate-1 {
  30% {
    -moz-transform: scale(0.8) rotate(15deg);
    -ms-transform: scale(0.8) rotate(15deg);
    -webkit-transform: scale(0.8) rotate(15deg);
    transform: scale(0.8) rotate(15deg);
  }
  100% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    margin-top: -3%;
    margin-left: -20%;
  }
}
@keyframes question-mark-animate-1-rewind {
  0% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    margin-top: -3%;
    margin-left: -20%;
  }
  30% {
    -moz-transform: scale(0.8) rotate(15deg);
    -ms-transform: scale(0.8) rotate(15deg);
    -webkit-transform: scale(0.8) rotate(15deg);
    transform: scale(0.8) rotate(15deg);
  }
  100% {
    -moz-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes question-mark-animate-2 {
  0% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    margin-top: -3%;
    margin-left: -20%;
  }
  30% {
    -moz-transform: scale(0.6) rotate(-30deg);
    -ms-transform: scale(0.6) rotate(-30deg);
    -webkit-transform: scale(0.6) rotate(-30deg);
    transform: scale(0.6) rotate(-30deg);
  }
  100% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
    margin-top: 15%;
    margin-left: -365%;
  }
}
@keyframes question-mark-animate-2-rewind {
  0% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
    margin-top: 15%;
    margin-left: -365%;
  }
  100% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    margin-top: 10%;
    margin-left: -36%;
  }
}
@keyframes question-mark-animate-3 {
  0% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
    margin-top: 15%;
    margin-left: -365%;
  }
  30% {
    -moz-transform: scale(0.5) rotate(-180deg);
    -ms-transform: scale(0.5) rotate(-180deg);
    -webkit-transform: scale(0.5) rotate(-180deg);
    transform: scale(0.5) rotate(-180deg);
  }
  100% {
    -moz-transform: scale(0.9) rotate(-360deg);
    -ms-transform: scale(0.9) rotate(-360deg);
    -webkit-transform: scale(0.9) rotate(-360deg);
    transform: scale(0.9) rotate(-360deg);
    margin-top: -25%;
    margin-left: -10%;
  }
}
@keyframes question-mark-animate-3-rewind {
  0% {
    -moz-transform: scale(0.9) rotate(360deg);
    -ms-transform: scale(0.9) rotate(360deg);
    -webkit-transform: scale(0.9) rotate(360deg);
    transform: scale(0.9) rotate(360deg);
    margin-top: -25%;
    margin-left: -10%;
  }
  100% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
    margin-top: 15%;
    margin-left: -365%;
  }
}
@keyframes question-mark-animate-4 {
  0% {
    -moz-transform: scale(0.9) rotate(360deg);
    -ms-transform: scale(0.9) rotate(360deg);
    -webkit-transform: scale(0.9) rotate(360deg);
    transform: scale(0.9) rotate(360deg);
    margin-top: -25%;
    margin-left: -10%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
    margin-top: 60%;
    margin-left: -363%;
  }
}
@keyframes question-mark-animate-4-rewind {
  0% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
    margin-top: 60%;
    margin-left: -363%;
  }
  100% {
    -moz-transform: scale(0.9) rotate(360deg);
    -ms-transform: scale(0.9) rotate(360deg);
    -webkit-transform: scale(0.9) rotate(360deg);
    transform: scale(0.9) rotate(360deg);
    margin-top: -25%;
    margin-left: -10%;
  }
}
@keyframes question-mark-animate-5 {
  0% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
    margin-top: 60%;
    margin-left: -363%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(1.2) rotate(-10deg);
    -ms-transform: scale(1.2) rotate(-10deg);
    -webkit-transform: scale(1.2) rotate(-10deg);
    transform: scale(1.2) rotate(-10deg);
   margin-top: 60%;
    margin-left: -198%;
  }
}
@keyframes question-mark-animate-5-rewind {
  0% {
    -moz-transform: scale(1.3) rotate(-25deg);
    -ms-transform: scale(1.3) rotate(-25deg);
    -webkit-transform: scale(1.3) rotate(-25deg);
    transform: scale(1.3) rotate(-25deg);
   margin-top: 60%;
    margin-left: -198%;
  }
  100% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
   margin-top: 60%;
    margin-left: -198%;
  }
}
@keyframes question-mark-animate-5-rotate {
  0% {
    -moz-transform: scale(1.3) rotate(-10deg);
    -ms-transform: scale(1.3) rotate(-10deg);
    -webkit-transform: scale(1.3) rotate(-10deg);
    transform: scale(1.3) rotate(-10deg);
   margin-top: 60%;
    margin-left: -198%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(1.3) rotate(18deg);
    -ms-transform: scale(1.3) rotate(18deg);
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
        margin-top: 60%;
    margin-left: -198%;
  }
}
@keyframes question-mark-animate-5-rotate-back {
  0% {
    -moz-transform: scale(1.3) rotate(18deg);
    -ms-transform: scale(1.3) rotate(18deg);
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
    margin-top: 60%;
    margin-left: -220%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(1.3) rotate(-10deg);
    -ms-transform: scale(1.3) rotate(-10deg);
    -webkit-transform: scale(1.3) rotate(-10deg);
    transform: scale(1.3) rotate(-10deg);
    margin-top: 60%;
    margin-left: -220%;
  }
}
































/* new end */
/* mobile */
/*
@media only screen and (max-width: 767px) {

  // animate 1
  @keyframes question-mark-animate-1 {
    0% {  }
    30% {
      @include transform(scale(0.8) rotate(15deg));
    }
    100% {
      @include transform(scale(1) rotate(0deg));
      margin-top: -250%;
      margin-left: -35%;
    }
  }
  @keyframes question-mark-animate-1-rewind {
    0% {
      @include transform(scale(1) rotate(0deg));
      margin-top: -250%;
      margin-left: -35%;
    }
    30% {
      @include transform(scale(0.8) rotate(15deg));
    }
    100% {
      @include transform(none);
    }
  }

  // animate 2
  @keyframes question-mark-animate-2 {
    0% {
      @include transform(scale(1) rotate(0deg));
      margin-top: -250%;
      margin-left: -35%;
    }
    30% {
      @include transform(scale(0.6) rotate(-30deg));
    }
    100% {
      @include transform(scale(0.7) rotate(-20deg));
      margin-top: -300%;
      margin-left: -365%;
    }
  }
  @keyframes question-mark-animate-2-rewind {
    0% {
      @include transform(scale(0.7) rotate(-20deg));
      margin-top: -300%;
      margin-left: -365%;
    }
    30% {
      //@include transform(scale(0.6) rotate(-30deg));
    }
    100% {
      @include transform(scale(1) rotate(0deg));
      margin-top: -250%;
      margin-left: -35%;
    }
  }

  // animate 3
  @keyframes question-mark-animate-3 {
    0% {
      @include transform(scale(0.7) rotate(-20deg));
      margin-top: -300%;
      margin-left: -365%;
    }
    30% {
      @include transform(scale(0.5) rotate(-180deg));
    }
    100% {
      @include transform(scale(0.9) rotate(-360deg));
      margin-top: -25%;
      margin-left:-10%;
    }
  }
  @keyframes question-mark-animate-3-rewind {
    0% {
      @include transform(scale(0.9) rotate(360deg));
      margin-top: -25%;
      margin-left:-10%;
    }
    30% {
      //@include transform(scale(0.6) rotate(-30deg));
    }
    100% {
      @include transform(scale(0.7) rotate(-20deg));
      margin-top: -300%;
      margin-left: -365%;
    }
  }

  // animate 4
  @keyframes question-mark-animate-4 {
    0% {
      @include transform(scale(0.9) rotate(360deg));
      margin-top: -25%;
      margin-left:-10%;
    }
    100% {
      @include transform(scale(0.95) rotate(-25deg));
      margin-top: 60%;
      margin-left:-315%;
    }
  }
  @keyframes question-mark-animate-4-rewind {
    0% {
      @include transform(scale(0.95) rotate(-25deg));
      margin-top: 60%;
      margin-left:-315%;
    }
    30% {
      //@include transform(scale(0.6) rotate(-30deg));
    }
    100% {
      @include transform(scale(0.9) rotate(360deg));
      margin-top: -25%;
      margin-left:-10%;
    }
  }

  // animate 5
  @keyframes question-mark-animate-5 {
    0% {
      @include transform(scale(0.95) rotate(-25deg));
      margin-top: 60%;
      margin-left:-315%;
    }
    100% {
      @include transform(scale(1.2) rotate(-10deg));
      margin-top: 90%;
      margin-left: -180%;
    }
  }
  @keyframes question-mark-animate-5-rewind {
    0% {
      @include transform(scale(1.3) rotate(-25deg));
      margin-top: 90%;
      margin-left: -180%;
    }
    30% {
      //@include transform(scale(0.6) rotate(-30deg));
    }
    100% {
      @include transform(scale(0.95) rotate(-25deg));
      margin-top: 60%;
      margin-left:-315%;
    }
  }
  @keyframes question-mark-animate-5-rotate {
    0% {
      @include transform(scale(1.3) rotate(-10deg));
      margin-top: 90%;
      margin-left: -180%;
    }
    100% {
      @include transform(scale(1.3) rotate(18deg));
      margin-top: 90%;
      margin-left: -180%;
    }
  }
  @keyframes question-mark-animate-5-rotate-back {
    0% {
      @include transform(scale(1.3) rotate(18deg));
      margin-top: 90%;
      margin-left: -180%;
    }
    100% {
      @include transform(scale(1.3) rotate(-10deg));
      margin-top: 90%;
      margin-left: -180%;
    }
  }

}*/

.page-home {
  position: relative;
  font-size: 30px;
  overflow: hidden;
}
.page-home.ref {
  background: url(../Full-Page.jpg);
}
.page-home .back-to-top {
  position: fixed;
  right: 30px;
  bottom: 70px;
  width: 50px;
  height: 50px;
  background: url(../images/back-to-top.svg) no-repeat center;
  z-index: 99999;
}
.page-home .scrollmagic-pin-spacer {
  z-index: 10;
}
.page-home .question-mark-wrap {
  /*position: fixed;
  z-index: 999;
  right: 20px;
  top: 20px;*/
  z-index: 9;
}
.page-home .question-mark-wrap .question-mark {
  position: absolute;
  /*background: url(../images/question-mark.png) no-repeat center;
  background-size: contain;*/
  width: 33vh;
  height: 53vh;
  /*right: 1.5%;
  top: 8vh;*/
  right: 3vw;
  top: 15vh;
  /*right: 12vw;
  top: 26vh;*/
  z-index: 100;
  transform: rotate(10deg);
  transition: transform 0.3s ease-in-out 0s;
}
.page-home .question-mark-wrap .question-mark .hand {
  position: absolute;
  background: url(../images/hand.png) no-repeat;
  background-size: contain;
  width: 320%;
  height: 320%;
  /*top: -50%;
  right: 135%;*/
  /*right: 255%;
  top: -10%;*/
  right: 305%;
  top: -23%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.page-home .question-mark-wrap .question-mark .hand.active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  visibility: visible;
  /*left: -15%;*/
  /*right: 300%;*/
  /*right: 26%;*/
  /*right: 225%;
  top: -3%;*/
  right: 240%;
  top: -23%;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-1 {
  position: absolute;
  /*top: 60%;*/
  /*left: 50%;*/
  left: -151%;
  top: 100%;
  display: flex;
  font-size: 85px;
  width: 75vw;
    font-weight: 700;
  -moz-transform: translate(-50%, -50%) rotate(-10deg);
  -ms-transform: translate(-50%, -50%) rotate(-10deg);
  -webkit-transform: translate(-50%, -50%) rotate(-10deg);
  transform: translate(-50%, -50%) rotate(-10deg);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-1.active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  visibility: visible;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-1 .text {
  width: 50%;
  text-shadow: 20px 20px 30px rgba(0, 0, 0, 0.5);
}
.page-home .question-mark-wrap .question-mark .question-mark-text-1 .text:first-child {
  padding-right: 10%;
  text-align: right;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-1 .text:last-child {
  text-align: left;
  padding-left: 10%;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 {
  position: absolute;
  /*top: 60%;*/
  /*left: 50%;*/
  /*top: 55%;
  left: -155%;*/
  top: 23%;
  left: -177%;
  font-size: 90px;
  width: 75vw;
  z-index: 100;
  text-align: center;
  text-shadow: 20px 20px 30px rgba(0, 0, 0, 0.5);
  /*@include transform(translate(-50%, -50%) rotate(-10deg));*/
  -moz-transform: translate(-45%, 30%) rotate(-10deg);
  -ms-transform: translate(-45%, 30%) rotate(-10deg);
  -webkit-transform: translate(-45%, 30%) rotate(-10deg);
  transform: translate(-45%, 30%) rotate(-10deg);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
    font-weight: 700;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2.active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  visibility: visible;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 strong {
  display: block;
    font-weight: 700!important;
  font-size: 130px;
  font-weight: normal;
  margin-top: 10px;
}
.page-home .question-mark-wrap .question-mark span {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/question-mark.png) no-repeat center;
  background-size: contain;
  transform-origin: 50% 90%;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.page-home .question-mark-wrap .question-mark span.stop-floating {
  animation: none;
}
.page-home .question-mark-wrap .question-mark span.active {
  animation: question-mark-animate-5-rotate 1s forwards !important;
}
.page-home .question-mark-wrap .question-mark span.remove-active {
  animation: question-mark-animate-5-rotate-back 1s forwards !important;
}
.page-home .question-mark-wrap .question-mark.animate-1 span {
  animation: question-mark-animate-1 1.5s forwards;
}
.page-home .question-mark-wrap .question-mark.animate-1-rewind span {
  animation: question-mark-animate-1-rewind 1.5s forwards;
}
.page-home .question-mark-wrap .question-mark.animate-2 span {
  animation: question-mark-animate-2 1.5s forwards;
}
.page-home .question-mark-wrap .question-mark.animate-2-rewind span {
  animation: question-mark-animate-2-rewind 1.5s forwards;
}
.page-home .question-mark-wrap .question-mark.animate-3 span {
  animation: question-mark-animate-3 1.5s forwards;
}
.page-home .question-mark-wrap .question-mark.animate-3-rewind span {
  animation: question-mark-animate-3-rewind 1.5s forwards;
}
.page-home .question-mark-wrap .question-mark.animate-4 span {
  animation: question-mark-animate-4 1.5s forwards;
}
.page-home .question-mark-wrap .question-mark.animate-4-rewind span {
  animation: question-mark-animate-4-rewind 1.5s forwards;
}
.page-home .question-mark-wrap .question-mark.animate-5 span {
  animation: question-mark-animate-5 1.5s forwards;
}
.page-home .question-mark-wrap .question-mark.animate-5-rewind span {
  animation: question-mark-animate-5-rewind 1.5s forwards;
}
.page-home .banner {
  position: relative;
  height: 100vh;
  background: #255886;
  background: linear-gradient(74deg, #255886 0%, #4ba5b9 27.57%, #54b7c5 50.38%, #70d0da 73.79%, #b9eaf3 100%);
}
.page-home .banner .banner-items-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}
.page-home .banner .banner-items-wrap .banner-items {
  position: relative;
}
.page-home .banner .banner-item {
  position: absolute;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
}
.page-home .banner .logo {
  left: 2.5%;
  top: 5.2%;
}
.page-home .banner .logo-lang {
  left: 2.5%;
  top: 5.2%;
  display: flex;
  z-index: 9999;
}
.page-home .banner .logo-lang .logo {
  width: 150px;
  height: 60px;
  background: url(../images/logo-en.svg) no-repeat center;
  background-size: contain;
}
.page-home .banner .logo-lang .lang-wrap {
  border-left: 1px solid #002e6c;
  padding: 0 40px;
  margin: 0 40px;
}
.page-home .banner .logo-lang .lang-wrap .lang {
  width: 60px;
  line-height: 60px;
  color: #fff;
  background: #002e6c;
  display: block;
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
  text-decoration: none;
}
.page-home .banner .banner-text {
  text-shadow: 20px 20px 30px rgba(0, 0, 0, 0.5);
}
.page-home .banner .text-1 {
  top: 29%;
  left: 6%;
  font-size: 40px;
  z-index: 30;
  width: 90%;
}
.page-home .banner .text-2 {
  top: 37%;
    left: 6%;
    font-size: 90px;
    line-height: 125%;
    z-index: 30;
    width: 60%;
    font-weight: 700;
}
.page-home .banner .question-mark-top {
  top: -9%;
  left: 26%;
  width: 18%;
  height: 45%;
  background-image: url(../images/header-item-1.png);
}
.page-home .banner .question-mark-bottom {
  /*top: 70%;*/
  bottom: -15vw;
  left: 22%;
  width: 30%;
  height: 64%;
  background-image: url(../images/header-item-2.png);
  background-position: left bottom;
}
.page-home .banner .gold-bg {
  top: 5.5%;
  right: 1.8%;
  width: 44.5%;
  padding-top: 44.5%;
  background-image: url(../images/header-item-4.png);
}
.page-home .banner .people {
  bottom: 0;
  right: -0.8%;
  width: 48.5%;
  padding-top: 48.5%;
  background-image: url(../images/header-item-3.png);
  background-position: left bottom;
  z-index: 10;
}
.page-home .banner .graphic {
  top: 7%;
  right: -1%;
  width: 56.5%;
  padding-top: 48.5%;
  background-image: url(../images/header-item-5.png);
  background-position: left bottom;
}
.page-home .banner .action-btn {
  display: block;
  bottom: 12%;
  left: 6.5%;
  padding: 0 5%;
  font-size: 40px;
  color: #fff;
  line-height: 250%;
  text-decoration: none;
  background: #002e6c;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  z-index: 100;
    font-weight: 700;
}
.page-home .page-section {
  position: relative;
  /*padding: 35vh 8% 10vh;*/
  padding: 0 8% 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.page-home .page-section.section-4 {
  z-index: 999;
}
.page-home .page-section .description {
  width: 50%;
  font-size: 35px;
  text-shadow: 20px 20px 30px rgba(0, 0, 0, 0.5);
}
.page-home .page-section .description .title {
  font-size: 60px;
    font-weight: 700;
}
.page-home .page-section .description .percentage {
  font-family: 'Rubik', sans-serif;
  font-weight: bold;
  font-size: 300%;
}
.page-home .page-section .description .percentage .number {
  font-size: 250%;
  line-height: 100%;
}
.page-home .page-section .description sup {
  font-family: 'Rubik', sans-serif;
  font-weight: bold;
  font-size: 65%;
}
.page-home .page-section .image {
  width: 50%;
  padding: 0 1%;
  text-align: center;
}
.page-home .gradient-bg {
  background: linear-gradient(180deg, #0bbfd7 0%, #002e6c 50%);
}
.page-home .final-section {
  position: relative;
  text-align: center;
  height: 100vh;
  width: 100%;
  /*overflow: hidden;*/
}
.page-home .slider-section {
  text-align: center;
  margin-top: 10vh;
  position: relative;
  z-index: 999;
}
.page-home .slider-section .section-title {
  font-size: 45px;
  text-shadow: 20px 20px 30px rgba(0, 0, 0, 0.5);
}
.page-home .slider-section .section-title span {
  font-size: 60px;
}
.page-home .slider-section .slick-track {
  display: flex !important;
}
.page-home .slider-section .slick-slide {
  height: inherit !important;
}
.page-home .slider-section .slick-dots {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 50px 0;
  padding: 0;
  position: relative;
  z-index: 999;
}
.page-home .slider-section .slick-dots li {
  background: #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
  width: 20px;
  height: 20px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin: 0 20px;
  padding: 0;
  cursor: pointer;
}
.page-home .slider-section .slick-dots li.slick-active {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
.page-home .slider-section .slick-dots li button {
  display: none;
}
.page-home .slider-section .slider-wrap {
  overflow: hidden;
}
.page-home .slider-section .slider {
  /*width: 350vw;
  display: flex;
  padding-left: 25vw;
  padding-right: 25vw;*/
}
.page-home .slider-section .slide-item {
  width: 50vw;
  height: 100%;
  padding-top: 150px;
  cursor: pointer;
}
.page-home .slider-section .slide-item .slide-box {
  position: relative;
  padding: 180px 5% 5%;
  border-radius: 30px;
  background: #fff;
  margin: 0 30px;
  height: 100%;
  -moz-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
}
.page-home .slider-section .slide-item .slide-box:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 500px;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: auto 60%;
  -moz-transform: translateY(-60%);
  -ms-transform: translateY(-60%);
  -webkit-transform: translateY(-60%);
  transform: translateY(-60%);
}
.page-home .slider-section .slide-item .slide-box .slide-title {
  font-size: 30px;
  color: #fff;
  line-height: 200%;
  background: #002e6c;
  border-radius: 100px;
}
.page-home .slider-section .slide-item .slide-box .list {
  color: #002e6c;
  font-size: 20px;
  text-align: left;
}
.page-home .slider-section .slide-item .slide-box .list ul {
  list-style: none;
  margin: 30px 0 0 0;
  padding: 0;
}
.page-home .slider-section .slide-item .slide-box .list ul li {
  position: relative;
  padding: 10px 0 30px 60px;
  margin-bottom: 20px;
}
.page-home .slider-section .slide-item .slide-box .list ul li:before {
  content: '';
  position: absolute;
  background: url(../images/tick.svg) no-repeat;
  width: 40px;
  height: 40px;
  left: 0;
  top: 2px;
}
.page-home .slider-section .slide-item .slide-box .list ul li:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 60px);
  border-bottom: 1px solid #c1c1c1;
}
.page-home .slider-section .slide-item .slide-box .list ul li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}
.page-home .slider-section .slide-item .slide-box .list ul li:last-child:after {
  display: none;
}
.page-home .slider-section .slide-item.slide-1 .slide-box:before {
  background-image: url(../images/slice-1.png);
}
.page-home .slider-section .slide-item.slide-2 .slide-box:before {
  background-image: url(../images/slice-2.png);
}
.page-home .slider-section .slide-item.slide-3 .slide-box:before {
  background-image: url(../images/slice-3.png);
}
.page-home .slider-section .slide-item.slide-4 .slide-box:before {
  background-image: url(../images/slice-4.png);
}
.page-home .slider-section .slide-item.slide-5 .slide-box:before {
  background-image: url(../images/slice-5.png);
}
.page-home .slider-section .slide-item.slide-6 .slide-box:before {
  background-image: url(../images/slice-6.png);
}
.page-home .know-more-section {
  text-align: center;
  margin: 200px 0;
  padding: 0 15%;
  font-size: 20px;
  line-height: 150%;
}
.page-home .know-more-section .section-title {
  font-size: 60px;
  margin-bottom: 50px;
}
.page-home .know-more-section .know-more-now {
  font-size: 40px;
  margin: 20px 0 80px 0;
  line-height: 100%;
}
.page-home .know-more-section .download-btn-wrap {
  display: flex;
  justify-content: center;
}
.page-home .know-more-section .download-btn-wrap .download-btn {
  display: inline-block;
  font-size: 30px;
  color: #fff;
  background: #00b9f2;
  line-height: 350%;
  text-decoration: none;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  margin: 0 40px;
  padding: 0 50px;
}
.page-home .resource-section {
  width: 80%;
  margin: 0 auto 100px;
  font-size: 14px;
}
.page-home .footer-bar {
  display: flex;
  padding: 0 3%;
  background: #a9a9a9;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: center;
}
.page-home .footer-bar .footer-logo {
  flex: 1;
  position: relative;
}
.page-home .footer-bar .footer-logo a {
  position: absolute;
  width: 30%;
  height: 60%;
  top: 15%;
  background: url(../images/footer-logo.svg) no-repeat;
  background-size: contain;
}
.page-home .footer-bar .footer-menu {
  font-size: 14px;
  text-align: right;
  padding: 30px 0;
}
.page-home .footer-bar .footer-menu a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

@media only screen and (min-width: 1800px) {
  .page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    position: absolute;
    /* top: 60%; */
    /* left: 50%; */
     top: 20%;
    left: -202%;
    font-size: 80px;
    width: 75vw;
    z-index: 100;
    text-align: center;
    text-shadow: 20px 20px 30px rgba(0, 0, 0, 0.5);
    -moz-transform: translate(-45%, 30%) rotate(-10deg);
    -ms-transform: translate(-45%, 30%) rotate(-10deg);
    -webkit-transform: translate(-45%, 30%) rotate(-10deg);
    transform: translate(-45%, 30%) rotate(-10deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.page-home .question-mark-wrap .question-mark .hand {
  position: absolute;
  background: url(../images/hand.png) no-repeat;
  background-size: contain;
  width: 390%;
  height: 390%;
  right: 305%;
  top: -23%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.page-home .question-mark-wrap .question-mark .hand.active {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    visibility: visible;
    /* left: -15%; */
    /* right: 300%; */
    /* right: 26%; */
    right: 253%;
    top: -36%;
    width: 370%;
    height: 370%;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    position: absolute;
    /* top: 60%; */
    /* left: 50%; */
    left: -170%;
    top: 100%;
    display: flex;
    font-size: 100px;
    width: 75vw;
    -moz-transform: translate(-50%, -50%) rotate(-10deg);
    -ms-transform: translate(-50%, -50%) rotate(-10deg);
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
    transform: translate(-50%, -50%) rotate(-10deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
@keyframes question-mark-animate-5 {
  0% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
    margin-top: 60%;
    margin-left: -363%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(1.2) rotate(-10deg);
    -ms-transform: scale(1.2) rotate(-10deg);
    -webkit-transform: scale(1.2) rotate(-10deg);
    transform: scale(1.2) rotate(-10deg);
margin-top: 60%;
    margin-left: -216%;
  }
}
@keyframes question-mark-animate-5-rewind {
  0% {
    -moz-transform: scale(1.3) rotate(-25deg);
    -ms-transform: scale(1.3) rotate(-25deg);
    -webkit-transform: scale(1.3) rotate(-25deg);
    transform: scale(1.3) rotate(-25deg);
   margin-top: 60%;
    margin-left: -198%;
  }
  100% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
margin-top: 60%;
    margin-left: -216%;
  }
}
@keyframes question-mark-animate-5-rotate {
  0% {
    -moz-transform: scale(1.3) rotate(-10deg);
    -ms-transform: scale(1.3) rotate(-10deg);
    -webkit-transform: scale(1.3) rotate(-10deg);
    transform: scale(1.3) rotate(-10deg);
  margin-top: 60%;
    margin-left: -216%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(1.3) rotate(18deg);
    -ms-transform: scale(1.3) rotate(18deg);
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
       margin-top: 60%;
    margin-left: -216%;
  }
}
@keyframes question-mark-animate-5-rotate-back {
  0% {
    -moz-transform: scale(1.3) rotate(18deg);
    -ms-transform: scale(1.3) rotate(18deg);
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
    margin-top: 60%;
    margin-left: -216%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(1.3) rotate(-10deg);
    -ms-transform: scale(1.3) rotate(-10deg);
    -webkit-transform: scale(1.3) rotate(-10deg);
    transform: scale(1.3) rotate(-10deg);
    margin-top: 60%;
    margin-left: -216%;
  }
}
}

@media only screen and (min-width: 1790px) {
.page-home .question-mark-wrap .question-mark .hand {
  position: absolute;
  background: url(../images/hand.png) no-repeat;
  background-size: contain;
  width: 340%;
  height: 340%;
  /*top: -50%;
  right: 135%;*/
  /*right: 255%;
  top: -10%;*/
  right: 305%;
  top: -23%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
}

@media only screen and (min-width: 1750px) {
.page-home .question-mark-wrap .question-mark .hand {
  position: absolute;
  background: url(../images/hand.png) no-repeat;
  background-size: contain;
  width: 330%;
  height: 330%;
  /*top: -50%;
  right: 135%;*/
  /*right: 255%;
  top: -10%;*/
  right: 305%;
  top: -23%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
}




/* ------------------------------------------- 1599px ------------------------------------------- */
@media only screen and (max-width: 1599px) {
  .page-home .question-mark-wrap .question-mark .question-mark-text-1.active{

    left: -152%!important;
    top: 111%!important;

  }

  .page-home .question-mark-wrap .question-mark .question-mark-text-1{

    left: -152%!important;
    top: 111%!important;

  }

  .page-home .question-mark-wrap .question-mark .hand.active {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    visibility: visible;
    /* left: -15%; */
    /* right: 300%; */
    /* right: 26%; */
    right: 240% !important;
    top: -1% !important;
  }

  .page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    font-size: 70px;
    top: 66% !important;
    left: -173% !important;
  }

  .page-home .banner .people {
    bottom: 0;
    right: -4.8%;
       width: 45.5%;
    padding-top: 45.5%;
    background-image: url(../images/header-item-3.png);
    background-position: left bottom;
    z-index: 10;
}
  .page-home .banner .gold-bg{
   top: 15.5%;
    width: 42.5%;
    padding-top: 64.5%;
  }
  .page-home .banner .graphic {
    top: 52%;
right: -1%;
    width: 66.5%;
    padding-top: 50.5%;
}
  .page-home .question-mark-wrap .question-mark {
    width: 20vw;
    height: 33vw;
    right: -3vw;
    top: 8vh;
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    font-size: 50px;
    /*top: 65%;*/
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    font-size: 70px;
    top: 50%;
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-2 strong {
    font-size: 75px;
  }
  .page-home .banner .text-1 {
    font-size: 30px;
    top: 28%;
  }
  .page-home .banner .text-2 {
        font-size: 70px;
    top: 36%;

  }
  .page-home .banner .action-btn {
    font-size: 40px;
    border-radius: 81px;
  }
  .page-home .page-section .description {
    font-size: 28px;
  }
  .page-home .page-section .description .title {
    font-size: 40px;
  }
  .page-home .slider-section .section-title {
    font-size: 35px;
  }
  .page-home .slider-section .section-title span {
    font-size: 50px;
  }
  .page-home .slider-section .slide-item .slide-box .slide-title {
    font-size: 25px;
  }
  .page-home .slider-section .slide-item .slide-box .list {
    font-size: 20px;
  }
  .page-home .know-more-section {
    font-size: 20px;
  }
  .page-home .know-more-section .section-title {
    font-size: 70px;
  }
  .page-home .know-more-section .know-more-now {
    font-size: 30px;
  }
  .page-home .know-more-section .download-btn-wrap .download-btn {
  font-size: 20px;
    margin: 0 30px;
    padding: 0 40px;
  }
  @keyframes question-mark-animate-1 {
  30% {
    -moz-transform: scale(0.8) rotate(15deg);
    -ms-transform: scale(0.8) rotate(15deg);
    -webkit-transform: scale(0.8) rotate(15deg);
    transform: scale(0.8) rotate(15deg);
  }
  100% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
        margin-top: 20%;
    margin-left: -36%;
  }
}
@keyframes question-mark-animate-1-rewind {
  0% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
        margin-top: 20%;
    margin-left: -36%;
  }
  30% {
    -moz-transform: scale(0.8) rotate(15deg);
    -ms-transform: scale(0.8) rotate(15deg);
    -webkit-transform: scale(0.8) rotate(15deg);
    transform: scale(0.8) rotate(15deg);
  }
  100% {
    -moz-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes question-mark-animate-2 {
  0% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
       margin-top: 20%;
    margin-left: -36%;
  }
  30% {
    -moz-transform: scale(0.6) rotate(-30deg);
    -ms-transform: scale(0.6) rotate(-30deg);
    -webkit-transform: scale(0.6) rotate(-30deg);
    transform: scale(0.6) rotate(-30deg);
  }
  100% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
    margin-top: 42%;
    margin-left: -341%;
  }
}
@keyframes question-mark-animate-2-rewind {
  0% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
    margin-top: 42%;
    margin-left: -341%;
  }
  100% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
    margin-top: 10%;
    margin-left: -36%;
  }
}
@keyframes question-mark-animate-3 {
  0% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
    margin-top: 42%;
    margin-left: -341%;
  }
  30% {
    -moz-transform: scale(0.5) rotate(-180deg);
    -ms-transform: scale(0.5) rotate(-180deg);
    -webkit-transform: scale(0.5) rotate(-180deg);
    transform: scale(0.5) rotate(-180deg);
  }
  100% {
    -moz-transform: scale(0.9) rotate(-360deg);
    -ms-transform: scale(0.9) rotate(-360deg);
    -webkit-transform: scale(0.9) rotate(-360deg);
    transform: scale(0.9) rotate(-360deg);
    margin-top: 11%;
    margin-left: -30%;
  }
}
@keyframes question-mark-animate-3-rewind {
  0% {
    -moz-transform: scale(0.9) rotate(360deg);
    -ms-transform: scale(0.9) rotate(360deg);
    -webkit-transform: scale(0.9) rotate(360deg);
    transform: scale(0.9) rotate(360deg);
    margin-top: 11%;
    margin-left: -30%;
  }
  100% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
    margin-top: 42%;
    margin-left: -341%;
  }
}
@keyframes question-mark-animate-4 {
  0% {
    -moz-transform: scale(0.9) rotate(360deg);
    -ms-transform: scale(0.9) rotate(360deg);
    -webkit-transform: scale(0.9) rotate(360deg);
    transform: scale(0.9) rotate(360deg);
    margin-top: 11%;
    margin-left: -30%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
        margin-top: 102%;
    margin-left: -307%;
  }
}
@keyframes question-mark-animate-4-rewind {
  0% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
        margin-top: 102%;
    margin-left: -307%;
  }
  100% {
    -moz-transform: scale(0.9) rotate(360deg);
    -ms-transform: scale(0.9) rotate(360deg);
    -webkit-transform: scale(0.9) rotate(360deg);
    transform: scale(0.9) rotate(360deg);
    margin-top: 11%;
    margin-left: -30%;
  }
}
    @keyframes question-mark-animate-5 {
    0% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
          margin-top: 102%;
    margin-left: -307%;
    }
    /* 50% {
       @include transform(scale(0.6) rotate(130deg));
       margin-top: 0%;
       margin-left:-205%;
     }*/
    100% {
      -moz-transform: scale(1.2) rotate(-10deg);
      -ms-transform: scale(1.2) rotate(-10deg);
      -webkit-transform: scale(1.2) rotate(-10deg);
      transform: scale(1.2) rotate(-10deg);
      margin-top: 90%;
      margin-left: -194%;
    }
  }
  @keyframes question-mark-animate-5-rewind {
    0% {
      -moz-transform: scale(1.3) rotate(-25deg);
      -ms-transform: scale(1.3) rotate(-25deg);
      -webkit-transform: scale(1.3) rotate(-25deg);
      transform: scale(1.3) rotate(-25deg);
      margin-top: 90%;
      margin-left: -194%;
    }
    100% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
         margin-top: 102%;
    margin-left: -307%;
    }
  }
  @keyframes question-mark-animate-5-rotate {
    0% {
      -moz-transform: scale(1.3) rotate(-10deg);
      -ms-transform: scale(1.3) rotate(-10deg);
      -webkit-transform: scale(1.3) rotate(-10deg);
      transform: scale(1.3) rotate(-10deg);
      margin-top: 90%;
      margin-left: -194%;
    }
    /* 50% {
       @include transform(scale(0.6) rotate(130deg));
       margin-top: 0%;
       margin-left:-205%;
     }*/
    100% {
      -moz-transform: scale(1.3) rotate(18deg);
      -ms-transform: scale(1.3) rotate(18deg);
      -webkit-transform: scale(1.3) rotate(18deg);
      transform: scale(1.3) rotate(18deg);
      margin-top: 90%;
      margin-left: -194%;
    }
  }
  @keyframes question-mark-animate-5-rotate-back {
    0% {
      -moz-transform: scale(1.3) rotate(18deg);
      -ms-transform: scale(1.3) rotate(18deg);
      -webkit-transform: scale(1.3) rotate(18deg);
      transform: scale(1.3) rotate(18deg);
      margin-top: 90%;
      margin-left: -194%;
    }
    /* 50% {
       @include transform(scale(0.6) rotate(130deg));
       margin-top: 0%;
       margin-left:-205%;
     }*/
    100% {
      -moz-transform: scale(1.3) rotate(-10deg);
      -ms-transform: scale(1.3) rotate(-10deg);
      -webkit-transform: scale(1.3) rotate(-10deg);
      transform: scale(1.3) rotate(-10deg);
      margin-top: 90%;
      margin-left: -194%;
    }
  }
}



/* ------------------------------------------- 1410px ------------------------------------------- */
@media only screen and (max-width: 1410px) {
  .page-home .banner .gold-bg {
    top: 29.5%;
    width: 42.5%;
    padding-top: 64.5%;
}
.page-home .banner .text-1 {
      font-size: 40px;
    top: 21%;
}
.page-home .banner .text-2 {
    font-size: 70px;
    top: 32%;
}
.page-home .banner .graphic {
    top: 10%;
    right: -1%;
    width: 45.5%;
    padding-top: 50.5%;
}
  }




/* ------------------------------------------- 1200px ------------------------------------------- */
@media only screen and (max-width: 1200px) {
.page-home .banner .text-1 {
    font-size: 30px;
    top: 28%;
}
.page-home .banner .text-2 {
    font-size: 50px;
    top: 35%;
}
.page-home .banner .gold-bg {
    top: 41.5%;
    width: 42.5%;
    padding-top: 64.5%;
}
.page-home .banner .graphic {
    top: 21%;
    right: -1%;
    width: 45.5%;
    padding-top: 50.5%;
}
  }




/* ------------------------------------------- 1024px ------------------------------------------- */
@media only screen and (max-width: 1024px) {
  .page-home .banner .text-2 {
    font-size: 68px;
    top: 27%;
    width: 80%;
}
  .page-home .banner .text-2 {
    font-size: 68px;
    top: 27%;
}
  .page-home .banner .text-1 {
    font-size: 40px;
    top: 20%;
}
  .page-home .banner .gold-bg {
    top: 41.5%;
    width: 59.5%;
    padding-top: 64.5%;
}
  .page-home .banner .graphic {
    top: 32%;
    right: -5%;
    width: 70.5%;
    padding-top: 68.5%;
}
  .page-home .banner .people {
    bottom: 0;
    right: -10.8%;
    width: 70.5%;
    padding-top: 70.5%;
    background-image: url(../images/header-item-3.png);
    background-position: left bottom;
    z-index: 10;
}
.page-home .page-section .description .title {
    font-size: 55px;
}
.page-home .slider-section .slide-item .slide-box .slide-title {
    font-size: 22px;
}
.page-home .slider-section .slide-item .slide-box .list {
    font-size: 18px;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2{
  top: 132% !important;
    left: -148% !important;
}
  .page-home .question-mark-wrap .question-mark .question-mark-text-2.active{
        top: 132% !important;
    left: -148% !important;
  }
.page-home .question-mark-wrap .question-mark .hand {
    right: 514%!important;
    top: 83%!important;
}
.page-home .question-mark-wrap .question-mark .hand.active {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);


    right: 214% !important;
    top: 83% !important;
}

.page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    position: absolute;
    /* top: 60%; */
    /* left: 50%; */
       left: -124%!important;
    top: 194%!important;
    display: flex;
    font-size: 50px;
    width: 75vw;
    -moz-transform: translate(-50%, -50%) rotate(-10deg);
    -ms-transform: translate(-50%, -50%) rotate(-10deg);
    -webkit-transform: translate(-50%, -50%) rotate(-10deg);
    transform: translate(-50%, -50%) rotate(-10deg);
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

 .page-home .question-mark-wrap .question-mark .question-mark-text-1.active{

       left: -124%!important;
    top: 194%!important;
  }

.page-home .page-section .description .percentage {

    font-size: 250%;
}

@keyframes question-mark-animate-1 {
  30% {
    -moz-transform: scale(0.8) rotate(15deg);
    -ms-transform: scale(0.8) rotate(15deg);
    -webkit-transform: scale(0.8) rotate(15deg);
    transform: scale(0.8) rotate(15deg);
  }
  100% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
        margin-top: 124%;
    margin-left: -30%;
  }
}
@keyframes question-mark-animate-1-rewind {
  0% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
        margin-top: 124%;
    margin-left: -30%;
  }
  30% {
    -moz-transform: scale(0.8) rotate(15deg);
    -ms-transform: scale(0.8) rotate(15deg);
    -webkit-transform: scale(0.8) rotate(15deg);
    transform: scale(0.8) rotate(15deg);
  }
  100% {
    -moz-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes question-mark-animate-2 {
  0% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
        margin-top: 124%;
    margin-left: -30%;
  }
  30% {
    -moz-transform: scale(0.6) rotate(-30deg);
    -ms-transform: scale(0.6) rotate(-30deg);
    -webkit-transform: scale(0.6) rotate(-30deg);
    transform: scale(0.6) rotate(-30deg);
  }
  100% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
    margin-top: 160%;
    margin-left: -311%;
  }
}
@keyframes question-mark-animate-2-rewind {
  0% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
     margin-top: 160%;
    margin-left: -311%;
  }
  100% {
    -moz-transform: scale(1) rotate(0deg);
    -ms-transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
   margin-top: 124%;
    margin-left: -30%;
  }
}
@keyframes question-mark-animate-3 {
  0% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
     margin-top: 160%;
    margin-left: -311%;
  }
  30% {
    -moz-transform: scale(0.5) rotate(-180deg);
    -ms-transform: scale(0.5) rotate(-180deg);
    -webkit-transform: scale(0.5) rotate(-180deg);
    transform: scale(0.5) rotate(-180deg);
  }
  100% {
    -moz-transform: scale(0.9) rotate(-360deg);
    -ms-transform: scale(0.9) rotate(-360deg);
    -webkit-transform: scale(0.9) rotate(-360deg);
    transform: scale(0.9) rotate(-360deg);
        margin-top: 125%;
    margin-left: -10%;
  }
}
@keyframes question-mark-animate-3-rewind {
  0% {
    -moz-transform: scale(0.9) rotate(360deg);
    -ms-transform: scale(0.9) rotate(360deg);
    -webkit-transform: scale(0.9) rotate(360deg);
    transform: scale(0.9) rotate(360deg);
    margin-top: 125%;
    margin-left: -10%;
  }
  100% {
    -moz-transform: scale(0.7) rotate(-20deg);
    -ms-transform: scale(0.7) rotate(-20deg);
    -webkit-transform: scale(0.7) rotate(-20deg);
    transform: scale(0.7) rotate(-20deg);
     margin-top: 160%;
    margin-left: -311%;
  }
}
@keyframes question-mark-animate-4 {
  0% {
    -moz-transform: scale(0.9) rotate(360deg);
    -ms-transform: scale(0.9) rotate(360deg);
    -webkit-transform: scale(0.9) rotate(360deg);
    transform: scale(0.9) rotate(360deg);
    margin-top: 125%;
    margin-left: -10%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
    margin-top: 230%;
    margin-left: -300%;
  }
}
@keyframes question-mark-animate-4-rewind {
  0% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
    margin-top: 230%;
    margin-left: -300%;
  }
  100% {
    -moz-transform: scale(0.9) rotate(360deg);
    -ms-transform: scale(0.9) rotate(360deg);
    -webkit-transform: scale(0.9) rotate(360deg);
    transform: scale(0.9) rotate(360deg);
    margin-top: 125%;
    margin-left: -10%;
  }
}
@keyframes question-mark-animate-5 {
  0% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
    margin-top: 230%;
    margin-left: -300%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(1.2) rotate(-10deg);
    -ms-transform: scale(1.2) rotate(-10deg);
    -webkit-transform: scale(1.2) rotate(-10deg);
    transform: scale(1.2) rotate(-10deg);
    margin-top: 230%;
    margin-left: -171%;
  }
}
@keyframes question-mark-animate-5-rewind {
  0% {
    -moz-transform: scale(1.3) rotate(-25deg);
    -ms-transform: scale(1.3) rotate(-25deg);
    -webkit-transform: scale(1.3) rotate(-25deg);
    transform: scale(1.3) rotate(-25deg);
    margin-top: 230%;
    margin-left: -171%;
  }
  100% {
    -moz-transform: scale(0.95) rotate(-25deg);
    -ms-transform: scale(0.95) rotate(-25deg);
    -webkit-transform: scale(0.95) rotate(-25deg);
    transform: scale(0.95) rotate(-25deg);
  margin-top: 230%;
    margin-left: -300%;
  }
}
@keyframes question-mark-animate-5-rotate {
  0% {
    -moz-transform: scale(1.3) rotate(-10deg);
    -ms-transform: scale(1.3) rotate(-10deg);
    -webkit-transform: scale(1.3) rotate(-10deg);
    transform: scale(1.3) rotate(-10deg);
     margin-top: 230%;
    margin-left: -171%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(1.3) rotate(18deg);
    -ms-transform: scale(1.3) rotate(18deg);
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
    margin-top: 230%;
    margin-left: -171%;
  }
}
@keyframes question-mark-animate-5-rotate-back {
  0% {
    -moz-transform: scale(1.3) rotate(18deg);
    -ms-transform: scale(1.3) rotate(18deg);
    -webkit-transform: scale(1.3) rotate(18deg);
    transform: scale(1.3) rotate(18deg);
  margin-top: 230%;
    margin-left: -171%;
  }
  /* 50% {
     @include transform(scale(0.6) rotate(130deg));
     margin-top: 0%;
     margin-left:-205%;
   }*/
  100% {
    -moz-transform: scale(1.3) rotate(-10deg);
    -ms-transform: scale(1.3) rotate(-10deg);
    -webkit-transform: scale(1.3) rotate(-10deg);
    transform: scale(1.3) rotate(-10deg);
    margin-top: 230%;
    margin-left: -171%;
  }
}
}











/* ------------------------------------------- 991px ------------------------------------------- */
@media only screen and (max-width: 991px) {
  @keyframes question-mark-animate-1 {
    30% {
      -moz-transform: scale(0.8) rotate(15deg);
      -ms-transform: scale(0.8) rotate(15deg);
      -webkit-transform: scale(0.8) rotate(15deg);
      transform: scale(0.8) rotate(15deg);
    }
    100% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      margin-top: 172%;
      margin-left: -29%;
    }
  }
  @keyframes question-mark-animate-1-rewind {
    0% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
          margin-top: 172%;
    margin-left: -29%;
    }
    30% {
      -moz-transform: scale(0.8) rotate(15deg);
      -ms-transform: scale(0.8) rotate(15deg);
      -webkit-transform: scale(0.8) rotate(15deg);
      transform: scale(0.8) rotate(15deg);
    }
    100% {
      -moz-transform: none;
      -ms-transform: none;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes question-mark-animate-2 {
    0% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      margin-top: 172%;
      margin-left: -29%;
    }
    30% {
      -moz-transform: scale(0.6) rotate(-30deg);
      -ms-transform: scale(0.6) rotate(-30deg);
      -webkit-transform: scale(0.6) rotate(-30deg);
      transform: scale(0.6) rotate(-30deg);
    }
    100% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
      margin-top: 218%;
      margin-left: -474%;
    }
  }
  @keyframes question-mark-animate-2-rewind {
    0% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
          margin-top: 218%;
    margin-left: -474%;
    }
    100% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      margin-top: 173%;
      margin-left: -25%;
    }
  }
  @keyframes question-mark-animate-3 {
    0% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
      margin-top: 218%;
      margin-left: -474%;
    }
    30% {
      -moz-transform: scale(0.5) rotate(-180deg);
      -ms-transform: scale(0.5) rotate(-180deg);
      -webkit-transform: scale(0.5) rotate(-180deg);
      transform: scale(0.5) rotate(-180deg);
    }
    100% {
      -moz-transform: scale(0.9) rotate(-360deg);
      -ms-transform: scale(0.9) rotate(-360deg);
      -webkit-transform: scale(0.9) rotate(-360deg);
      transform: scale(0.9) rotate(-360deg);
      margin-top: 156%;
      margin-left: -35%;
    }
  }
  @keyframes question-mark-animate-3-rewind {
    0% {
      -moz-transform: scale(0.9) rotate(360deg);
      -ms-transform: scale(0.9) rotate(360deg);
      -webkit-transform: scale(0.9) rotate(360deg);
      transform: scale(0.9) rotate(360deg);
          margin-top: 156%;
    margin-left: -35%;
    }
    100% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
      margin-top: 221%;
      margin-left: -472%;
    }
  }
  @keyframes question-mark-animate-4 {
    0% {
      -moz-transform: scale(0.9) rotate(360deg);
      -ms-transform: scale(0.9) rotate(360deg);
      -webkit-transform: scale(0.9) rotate(360deg);
      transform: scale(0.9) rotate(360deg);
      margin-top: 158%;
    margin-left: -26%;
    }
    /* 50% {
       @include transform(scale(0.6) rotate(130deg));
       margin-top: 0%;
       margin-left:-205%;
     }*/
    100% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
      margin-top: 277%;
      margin-left: -468%;
    }
  }
  @keyframes question-mark-animate-4-rewind {
    0% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
         margin-top: 277%;
    margin-left: -468%;
    }
    100% {
      -moz-transform: scale(0.9) rotate(360deg);
      -ms-transform: scale(0.9) rotate(360deg);
      -webkit-transform: scale(0.9) rotate(360deg);
      transform: scale(0.9) rotate(360deg);
      margin-top: 158%;
      margin-left: -26%;
    }
  }
  @keyframes question-mark-animate-5 {
    0% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
          margin-top: 277%;
    margin-left: -468%;
    }
    /* 50% {
       @include transform(scale(0.6) rotate(130deg));
       margin-top: 0%;
       margin-left:-205%;
     }*/
    100% {
      -moz-transform: scale(1.2) rotate(-10deg);
      -ms-transform: scale(1.2) rotate(-10deg);
      -webkit-transform: scale(1.2) rotate(-10deg);
      transform: scale(1.2) rotate(-10deg);
      margin-top: 209%;
      margin-left: -265%;
      width: 143%;
      height: 143%;
    }
  }
  @keyframes question-mark-animate-5-rewind {
    0% {
      -moz-transform: scale(1.3) rotate(-25deg);
      -ms-transform: scale(1.3) rotate(-25deg);
      -webkit-transform: scale(1.3) rotate(-25deg);
      transform: scale(1.3) rotate(-25deg);
          margin-top: 277%;
    margin-left: -468%;
      width: 143%;
      height: 143%;
    }
    100% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
      margin-top: 221%;
      margin-left: -474%;
    }
  }
  @keyframes question-mark-animate-5-rotate {
    0% {
      -moz-transform: scale(1.3) rotate(-10deg);
      -ms-transform: scale(1.3) rotate(-10deg);
      -webkit-transform: scale(1.3) rotate(-10deg);
      transform: scale(1.3) rotate(-10deg);
      margin-top: 209%;
      margin-left: -265%;
      width: 143%;
      height: 143%;
    }
    /* 50% {
       @include transform(scale(0.6) rotate(130deg));
       margin-top: 0%;
       margin-left:-205%;
     }*/
    100% {
      -moz-transform: scale(1.3) rotate(18deg);
      -ms-transform: scale(1.3) rotate(18deg);
      -webkit-transform: scale(1.3) rotate(18deg);
      transform: scale(1.3) rotate(18deg);
      margin-top: 209%;
      margin-left: -265%;
      width: 143%;
      height: 143%;
    }
  }
  @keyframes question-mark-animate-5-rotate-back {
    0% {
      -moz-transform: scale(1.3) rotate(18deg);
      -ms-transform: scale(1.3) rotate(18deg);
      -webkit-transform: scale(1.3) rotate(18deg);
      transform: scale(1.3) rotate(18deg);
      margin-top: 209%;
      margin-left: -265%;
      width: 143%;
      height: 143%;
    }
    /* 50% {
       @include transform(scale(0.6) rotate(130deg));
       margin-top: 0%;
       margin-left:-205%;
     }*/
    100% {
      -moz-transform: scale(1.3) rotate(-10deg);
      -ms-transform: scale(1.3) rotate(-10deg);
      -webkit-transform: scale(1.3) rotate(-10deg);
      transform: scale(1.3) rotate(-10deg);
      margin-top: 209%;
      margin-left: -265%;
      width: 143%;
      height: 143%;
    }
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    position: absolute;
    left: -207% !important;
    top: 199% !important;
    display: flex;
    font-size: 100px;
    width: 75vw;
  }

  .page-home .question-mark-wrap .question-mark .hand {
    position: absolute;
    background: url(../images/hand.png) no-repeat;
    background-size: contain;
    width: 320%;
    height: 320%;
    right: 505% !important;
    top: 53% !important;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
  }

  .page-home .question-mark-wrap .question-mark .hand.active {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    visibility: visible;
    /* left: -15%; */
    /* right: 300%; */
    /* right: 26%; */
    right: 278% !important;
    top: 42% !important;
    width: 490%;
    height: 490%;
  }

  .page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    font-size: 70px;
    top: 130% !important;
    left: -253% !important;
    font-size: 80px;
  }

  .page-home .question-mark-wrap .question-mark .question-mark-text-2 strong {
    font-size: 58px !important;
  }

  
  .page-home {
    /*.banner{

      height: 100%;
      padding-top: 0%;

      .banner-inner{
        height: 100vh;
        position: relative;
      }
    }*/
  }
  .page-home .banner {
    padding-top: 0;
  }
  .page-home .banner .banner-inner {
    height: 100vh;
  }
  .page-home .banner .text-1 {
    font-size: 25px;
    top: 20%;
  }
  .page-home .banner .text-2 {
    font-size: 50px;
    top: 26%;
  }
  .page-home .banner .action-btn {
    font-size: 30px;
    bottom: 25%;
  }
  .page-home .banner .gold-bg {
       top: 43%;
    right: 15px;
    width: 64.5%;
    padding-top: 64.5%;
  }
  .page-home .banner .graphic {
      top: 3%;
    right: -4%;
    width: 70%;
    padding-top: 95%;
  }
  .page-home .banner .people {
   right: -12%;
    width: 80%;
    padding-top: 80%;
  }
  .page-home .banner .question-mark-bottom {
    left: 10%;
  }
  .page-home .question-mark-wrap .question-mark {
    width: 15vw;
    height: 26vw;
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    font-size: 40px;
    top: 56%;
        left: -207%!important;
    top: 194%!important;
  }
   .page-home .question-mark-wrap .question-mark .question-mark-text-1.active{

       left: -207%!important;
    top: 194%!important;
  }

  .page-home .question-mark-wrap .question-mark .question-mark-text-2.active {
    top: 125% !important;
    left: -249% !important;
}

  
  .page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    top: 125% !important;
    left: -249% !important;
    font-size: 50px;
    top: 48%;
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-2 span {
    font-size: 90px;
  }
  .page-home .page-section {
    /*padding: 25vh 8% 5vh;*/
    padding: 15vh 8% 15vh;
  }
  .page-home .page-section .description {
    font-size: 18px;
  }
  .page-home .page-section .description .title {
    font-size: 40px;
  }
  .page-home .final-section {
    height: 50vh;
  }
  .page-home .slider-section {
    margin-top: 50vh;
  }
  .page-home .slider-section .section-title {
    font-size: 25px;
  }
  .page-home .slider-section .section-title span {
    font-size: 40px;
  }
  .page-home .slider-section .slide-item {
    width: 65vw;
    padding-top: 90px;
  }
  .page-home .slider-section .slide-item .slide-box {
    padding: 150px 5% 5%;
  }
  .page-home .slider-section .slide-item .slide-box:before {
    height: 400px;
  }
  .page-home .slider-section .slide-item .slide-box .slide-title {
    font-size: 20px;
  }
  .page-home .slider-section .slide-item .slide-box .list {
    font-size: 18px;
  }
  .page-home .know-more-section {
    font-size: 20px;
    margin: 150px 0;
  }
  .page-home .know-more-section .section-title {
    font-size: 50px;
    margin-bottom: 35px;
  }
  .page-home .know-more-section .know-more-now {
    font-size: 30px;
    margin: 30px 0 80px 0;
  }
  .page-home .know-more-section .download-btn-wrap .download-btn {
    font-size: 20px;
    margin: 0px 10px;
    padding: 0 15px;
    line-height: 300%;
  }
}








/* ------------------------------------------- 767px ------------------------------------------- */
@media only screen and (max-width: 767px) {

  .page-home .question-mark-wrap .question-mark .question-mark-text-2 strong {
    font-size: 60px !important;
  }

  .page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    font-size: 50px;
    top: 143% !important;
    left: -140% !important;
    font-size: 80px;
  }

  .page-home .question-mark-wrap .question-mark .hand.active {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    visibility: visible;
    /* left: -15%; */
    /* right: 300%; */
    /* right: 26%; */
    right: 190% !important;
    top: 109% !important;
    width: 356%;
    height: 356%;
  }

  .page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    position: absolute;
    left: -105% !important;
    top: 230% !important;
    display: flex;
    font-size: 100px;
    width: 75vw;
  }
   .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }
  .page-home .back-to-top {
    right: 15px;
    bottom: 15px;
    width: 30px;
    height: 30px;
  }
  .page-home .question-mark-wrap .question-mark {
    width: 20vw;
    height: 35vw;
    top: 23vh;
    /*top: 55vh;*/
    /*right: 5vw;*/
    right: 0vw;
  }
  .page-home .question-mark-wrap .question-mark .hand {
    right: 250%;
    top: 118%;
  }
  .page-home .question-mark-wrap .question-mark .hand.active {
        right: 204%!important;
    top: 3%!important;
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    font-size: 25px;
    /*top: 110%;*/
    top: 230%;
    left: -105%;
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    font-size: 50px;
    /*top: 45%;
    left: -150%;*/
    top: 150%!important;
    left: -130%!important;
  }
.page-home .question-mark-wrap .question-mark .question-mark-text-1.active {
    left: -122%!important;
    top: 124%!important;
}

.page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    left: -122%!important;
    top: 124%!important;
}
  .page-home .question-mark-wrap .question-mark .question-mark-text-2{
   top: 41%!important;
    left: -138%!important;
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-2.active{
    top: 41%!important;
    left: -138%!important;
  }
  .page-home .question-mark-wrap .question-mark .question-mark-text-2 strong {
    font-size: 35px;
  }
  .page-home .banner {
    padding-top: 0;
  }
  .page-home .banner .banner-inner {
    height: 100vh;
  }
  .page-home .banner .logo-lang .logo {
    width: 140px;
    height: 50px;
  }
  .page-home .banner .logo-lang .lang-wrap {
        padding: 0 19px;
    margin: 0 8px;
  }
  .page-home .banner .logo-lang .lang-wrap .lang {
   width: 54px;
    font-size: 18px;
    line-height: 54px;
  }
  .page-home .banner .text-1 {
    font-size: 24px;
    top: 20%;
  }
  .page-home .banner .text-2 {
        width: 80%;
    font-size: 50px;
    top: 26%;
  }
  .page-home .banner .action-btn {
       font-size: 20px;
    bottom: 20%;
  }
  .page-home .banner .logo {
    left: 20px;
    top: 20px;
    width: 20%;
  }
  .page-home .banner .gold-bg {
    top: 49%;
    right: 15px;
    width: 58.5%;
    padding-top: 64.5%;
  }
  .page-home .banner .graphic {
       top: 9%;
    right: 0%;
    width: 70%;
    padding-top: 95%;
  }
  .page-home .banner .people {
    right: -6%;
    width: 70%;
    padding-top: 70%;
  }
  .page-home .banner .question-mark-bottom {
    left: 10%;
  }
  .page-home .page-section {
    /*padding: 15vh 8% 1vh;*/
    padding: 0 8% 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .page-home .page-section.section-1, .page-home .page-section.section-3 {
    flex-direction: column-reverse;
  }
  .page-home .page-section .description {
    font-size: 20px;
    width: 100%;
    text-align: center;
  }
  .page-home .page-section .description .title {
    font-size: 25px;
  }
  .page-home .page-section .description .percentage {
    font-size: 200%;
  }
  .page-home .page-section .image {
    width: 100%;
    margin-bottom: 20px;
  }
 
  .page-home .slider-section .section-title {
    font-size: 20px;
    width: 80%;
    /* text-align: center; */
    margin: auto;
  }
  .page-home .slider-section .section-title span {
    font-size: 32px;
  }
  .page-home .slider-section .slider-wrap {
    overflow: hidden;
  }
  .page-home .slider-section .slider {
    /*width: 600vw;
    display: flex;
    padding-left: 0vw;
    padding-right: 0vw;*/
  }
  .page-home .slider-section .slide-item {
    width: 100vw;
    padding-top: 50px;
  }
  .page-home .slider-section .slide-item .slide-box {
    padding: 100px 5% 5%;
  }
  .page-home .slider-section .slide-item .slide-box:before {
    height: 230px;
  }
  .page-home .slider-section .slide-item .slide-box .slide-title {
    font-size: 20px;
    line-height: 100%;
    padding: 10px 10px;
  }
  .page-home .slider-section .slide-item .slide-box .list {
    font-size: 16px;
  }
  .page-home .slider-section .slide-item .slide-box .list ul {
    margin: 10px 0 0 0;
  }
  .page-home .slider-section .slide-item .slide-box .list ul li {
    padding: 10px 0 15px 40px;
  }
  .page-home .slider-section .slide-item .slide-box .list ul li:before {
    width: 25px;
    height: 25px;
    top: 7px;
  }
  .page-home .slider-section .slide-item .slide-box .list ul li:after {
    width: calc(100% - 40px);
  }
  .page-home .slider-section .slick-dots {
    margin: 30px 0;
  }
  .page-home .slider-section .slick-dots li {
    width: 20px;
    height: 20px;
    margin: 0 10px;
  }
  .page-home .know-more-section {
    font-size: 16px;
    margin: 130px 0;
    padding: 0 10%;
  }
  .page-home .know-more-section .section-title {
    font-size: 32px;
    margin-bottom: 20px;
  }
  .page-home .know-more-section .know-more-now {
    font-size: 20px;
    margin: 30px 0 40px 0;
  }
  .page-home .know-more-section .download-btn-wrap {
    display: initial;
}
.page-home .know-more-section .download-btn-wrap .download-btn {
    font-size: 20px;
    margin: 10px 7px;
    padding: 0 32px;
    line-height: 280%;
}
  .page-home .resource-section {
    font-size: 12px;
  }
  .page-home .footer-bar {
    display: block;
  }
  .page-home .footer-bar .footer-logo {
    height: 100px;
  }
  .page-home .footer-bar .footer-logo .logo {
    left: 50%;
    top: 40%;
    margin-left: -15%;
  }
  .page-home .footer-bar .footer-menu {
    text-align: center;
  }
  @keyframes question-mark-animate-1 {
    30% {
      -moz-transform: scale(0.8) rotate(15deg);
      -ms-transform: scale(0.8) rotate(15deg);
      -webkit-transform: scale(0.8) rotate(15deg);
      transform: scale(0.8) rotate(15deg);
    }
    100% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      margin-top: 172%;
      margin-left: -29%;
    }
  }
  @keyframes question-mark-animate-1-rewind {
    0% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
     margin-top: 172%;
      margin-left: -29%;
    }
    30% {
      -moz-transform: scale(0.8) rotate(15deg);
      -ms-transform: scale(0.8) rotate(15deg);
      -webkit-transform: scale(0.8) rotate(15deg);
      transform: scale(0.8) rotate(15deg);
    }
    100% {
      -moz-transform: none;
      -ms-transform: none;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes question-mark-animate-2 {
    0% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
          margin-top: 173%;
    margin-left: -25%;
    }
    30% {
      -moz-transform: scale(0.6) rotate(-30deg);
      -ms-transform: scale(0.6) rotate(-30deg);
      -webkit-transform: scale(0.6) rotate(-30deg);
      transform: scale(0.6) rotate(-30deg);
    }
    100% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
     margin-top: 37%;
    margin-left: -240%;
    }
  }
  @keyframes question-mark-animate-2-rewind {
    0% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
       margin-top: 37%;
    margin-left: -240%;
    }
    100% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      margin-top: 173%;
      margin-left: -25%;
    }
  }
  @keyframes question-mark-animate-3 {
    0% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
      margin-top: 43%;
    margin-left: -197%;
    }
    30% {
      -moz-transform: scale(0.5) rotate(-180deg);
      -ms-transform: scale(0.5) rotate(-180deg);
      -webkit-transform: scale(0.5) rotate(-180deg);
      transform: scale(0.5) rotate(-180deg);
    }
    100% {
      -moz-transform: scale(0.9) rotate(-360deg);
      -ms-transform: scale(0.9) rotate(-360deg);
      -webkit-transform: scale(0.9) rotate(-360deg);
      transform: scale(0.9) rotate(-360deg);
      margin-top: 75%;
      margin-left: -35%;
    }
  }
  @keyframes question-mark-animate-3-rewind {
    0% {
      -moz-transform: scale(0.9) rotate(360deg);
      -ms-transform: scale(0.9) rotate(360deg);
      -webkit-transform: scale(0.9) rotate(360deg);
      transform: scale(0.9) rotate(360deg);
      margin-top: -25%;
      margin-left: -10%;
    }
    100% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
      margin-top: 43%;
      margin-left: -197%;
    }
  }
  @keyframes question-mark-animate-4 {
    0% {
      -moz-transform: scale(0.9) rotate(360deg);
      -ms-transform: scale(0.9) rotate(360deg);
      -webkit-transform: scale(0.9) rotate(360deg);
      transform: scale(0.9) rotate(360deg);
      margin-top: 103%;
    margin-left: -26%;
    }
    /* 50% {
       @include transform(scale(0.6) rotate(130deg));
       margin-top: 0%;
       margin-left:-205%;
     }*/
    100% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
      margin-top: -13%;
    margin-left: -285%;
    }
  }
  @keyframes question-mark-animate-4-rewind {
    0% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
         margin-top: -13%;
    margin-left: -285%;
    }
    100% {
      -moz-transform: scale(0.9) rotate(360deg);
      -ms-transform: scale(0.9) rotate(360deg);
      -webkit-transform: scale(0.9) rotate(360deg);
      transform: scale(0.9) rotate(360deg);
      margin-top: 103%;
      margin-left: -26%;
    }
  }
  @keyframes question-mark-animate-5 {
    0% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
      margin-top: 60%;
      margin-left: -315%;
    }
    100% {
      -moz-transform: scale(1.2) rotate(-10deg);
      -ms-transform: scale(1.2) rotate(-10deg);
      -webkit-transform: scale(1.2) rotate(-10deg);
      transform: scale(1.2) rotate(-10deg);
         margin-top: 110%;
    margin-left: -163%;
    }
  }
  @keyframes question-mark-animate-5-rewind {
    0% {
      -moz-transform: scale(1.3) rotate(-25deg);
      -ms-transform: scale(1.3) rotate(-25deg);
      -webkit-transform: scale(1.3) rotate(-25deg);
      transform: scale(1.3) rotate(-25deg);
         margin-top: 110%;
    margin-left: -163%;
    }
    100% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
      margin-top: 60%;
      margin-left: -315%;
    }
  }
  @keyframes question-mark-animate-5-rotate {
    0% {
      -moz-transform: scale(1.3) rotate(-10deg);
      -ms-transform: scale(1.3) rotate(-10deg);
      -webkit-transform: scale(1.3) rotate(-10deg);
      transform: scale(1.3) rotate(-10deg);
          margin-top: 110%;
    margin-left: -163%;
    }
    100% {
      -moz-transform: scale(1.3) rotate(18deg);
      -ms-transform: scale(1.3) rotate(18deg);
      -webkit-transform: scale(1.3) rotate(18deg);
      transform: scale(1.3) rotate(18deg);
          margin-top: 110%;
    margin-left: -163%;
    }
  }
  @keyframes question-mark-animate-5-rotate-back {
    0% {
      -moz-transform: scale(1.3) rotate(18deg);
      -ms-transform: scale(1.3) rotate(18deg);
      -webkit-transform: scale(1.3) rotate(18deg);
      transform: scale(1.3) rotate(18deg);
          margin-top: 110%;
    margin-left: -163%;
    }
    100% {
      -moz-transform: scale(1.3) rotate(-10deg);
      -ms-transform: scale(1.3) rotate(-10deg);
      -webkit-transform: scale(1.3) rotate(-10deg);
      transform: scale(1.3) rotate(-10deg);
          margin-top: 110%;
    margin-left: -163%;
    }
  }
}

/* ------------------------------------------- 599px ------------------------------------------- */
@media only screen and (max-width: 599px) {
  .page-home .question-mark-wrap .question-mark .question-mark-text-2.active {
    top: 58%!important;
    left: -154%!important;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    top: 58%!important;
    left: -154%!important;
}
  .page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    font-size: 22px;
    /* top: 110%; */
    top: 230%;
    left: -105%;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 strong {
    font-size: 40px !important;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    font-size: 37px;

}
}

/* ------------------------------------------- 537px ------------------------------------------- */
@media only screen and (max-width: 537px) {

.page-home .banner .text-1 {
    font-size: 20px;
    top: 20%;
}
.page-home .banner .text-2 {
    font-size: 40px;
    top: 26%;
}
.page-home .banner .graphic {
    top: 37%;
    right: 0%;
    width: 70%;
    padding-top: 95%;
}
.page-home .banner .gold-bg {
    top: 63%;
    right: 15px;
    width: 58.5%;
    padding-top: 64.5%;
}
}






/* ------------------------------------------- 393px ------------------------------------------- */
@media only screen and (max-width: 393px) {

.page-home .question-mark-wrap .question-mark .question-mark-text-1 {
     left: -116%!important;
    top: 126%!important;
}

.page-home .question-mark-wrap .question-mark .question-mark-text-1.active {
     left: -116%!important;
    top: 126%!important;
}

.page-home .banner .text-1 {
     font-size: 20px;
    top: 20%;
    width: 80%;
}
.page-home .banner .text-2 {
       font-size: 35px;
    top: 29%;
    width: 80%;
}
.page-home .banner .gold-bg {
    top: 72%;
    right: 15px;
    width: 58.5%;
    padding-top: 64.5%;
}
.page-home .banner .graphic {
    top: 54%;
    right: 0%;
    width: 70%;
    padding-top: 95%;
}
.page-home .banner .action-btn {
   font-size: 20px;
    bottom: 35%;
}
  .page-home .question-mark-wrap .question-mark .question-mark-text-2.active {
    top: 58%!important;
    left: -154%!important;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    top: 58%!important;
    left: -154%!important;
}
  .page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    font-size: 18px;
    /* top: 110%; */
    top: 230%;
    left: -105%;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 strong {
    font-size: 30px !important;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    font-size: 25px;

}
}










/* ------------------------------------------- 375px ------------------------------------------- */
@media only screen and (max-width: 375px) {
  .page-home .question-mark-wrap .question-mark .question-mark-text-2.active {
       top: 111%!important;
    left: -133%!important;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 {
        top: 111%!important;
    left: -133%!important;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-1.active {
    left: -102%!important;
    top: 178%!important;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-1 {
    left: -102%!important;
    top: 178%!important;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 strong {
    font-size: 30px !important;
}
.page-home .question-mark-wrap .question-mark .question-mark-text-2 {
    font-size: 25px;

}
  @keyframes question-mark-animate-1 {
    30% {
      -moz-transform: scale(0.8) rotate(15deg);
      -ms-transform: scale(0.8) rotate(15deg);
      -webkit-transform: scale(0.8) rotate(15deg);
      transform: scale(0.8) rotate(15deg);
    }
    100% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      margin-top: 172%;
      margin-left: -29%;
    }
  }
  @keyframes question-mark-animate-1-rewind {
    0% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      margin-top: 172%;
      margin-left: -20%;
    }
    30% {
      -moz-transform: scale(0.8) rotate(15deg);
      -ms-transform: scale(0.8) rotate(15deg);
      -webkit-transform: scale(0.8) rotate(15deg);
      transform: scale(0.8) rotate(15deg);
    }
    100% {
      -moz-transform: none;
      -ms-transform: none;
      -webkit-transform: none;
      transform: none;
    }
  }
  @keyframes question-mark-animate-2 {
    0% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      margin-top: -3%;
      margin-left: -20%;
    }
    30% {
      -moz-transform: scale(0.6) rotate(-30deg);
      -ms-transform: scale(0.6) rotate(-30deg);
      -webkit-transform: scale(0.6) rotate(-30deg);
      transform: scale(0.6) rotate(-30deg);
    }
    100% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
      margin-top: 15%;
      margin-left: -175px;
    }
  }
  @keyframes question-mark-animate-2-rewind {
    0% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
      margin-top: 15%;
      margin-left: -175px;
    }
    100% {
      -moz-transform: scale(1) rotate(0deg);
      -ms-transform: scale(1) rotate(0deg);
      -webkit-transform: scale(1) rotate(0deg);
      transform: scale(1) rotate(0deg);
      margin-top: 173%;
      margin-left: -25%;
    }
  }
  @keyframes question-mark-animate-3 {
    0% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
      margin-top: 15%;
      margin-left: -175px;
    }
    30% {
      -moz-transform: scale(0.5) rotate(-180deg);
      -ms-transform: scale(0.5) rotate(-180deg);
      -webkit-transform: scale(0.5) rotate(-180deg);
      transform: scale(0.5) rotate(-180deg);
    }
    100% {
      -moz-transform: scale(0.9) rotate(-360deg);
      -ms-transform: scale(0.9) rotate(-360deg);
      -webkit-transform: scale(0.9) rotate(-360deg);
      transform: scale(0.9) rotate(-360deg);
      margin-top: 75%;
      margin-left: -35%;
    }
  }
  @keyframes question-mark-animate-3-rewind {
    0% {
      -moz-transform: scale(0.9) rotate(360deg);
      -ms-transform: scale(0.9) rotate(360deg);
      -webkit-transform: scale(0.9) rotate(360deg);
      transform: scale(0.9) rotate(360deg);
      margin-top: -25%;
      margin-left: -10%;
    }
    100% {
      -moz-transform: scale(0.7) rotate(-20deg);
      -ms-transform: scale(0.7) rotate(-20deg);
      -webkit-transform: scale(0.7) rotate(-20deg);
      transform: scale(0.7) rotate(-20deg);
      margin-top: 43%;
      margin-left: -197%;
    }
  }
  @keyframes question-mark-animate-4 {
    0% {
      -moz-transform: scale(0.9) rotate(360deg);
      -ms-transform: scale(0.9) rotate(360deg);
      -webkit-transform: scale(0.9) rotate(360deg);
      transform: scale(0.9) rotate(360deg);
       margin-top: 75%;
      margin-left: -35%;
    }
    /* 50% {
       @include transform(scale(0.6) rotate(130deg));
       margin-top: 0%;
       margin-left:-205%;
     }*/
    100% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
      margin-top: -30%;
      margin-left: -312%;
    }
  }
  @keyframes question-mark-animate-4-rewind {
    0% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
      margin-top: 43%;
      margin-left: -197%;
    }
    100% {
      -moz-transform: scale(0.9) rotate(360deg);
      -ms-transform: scale(0.9) rotate(360deg);
      -webkit-transform: scale(0.9) rotate(360deg);
      transform: scale(0.9) rotate(360deg);
      margin-top: 103%;
      margin-left: -26%;
    }
  }
    @keyframes question-mark-animate-5 {
    0% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
      margin-top: 60%;
      margin-left: -315%;
    }
    100% {
      -moz-transform: scale(1.2) rotate(-10deg);
      -ms-transform: scale(1.2) rotate(-10deg);
      -webkit-transform: scale(1.2) rotate(-10deg);
      transform: scale(1.2) rotate(-10deg);
             margin-top: 209%;
    margin-left: -145%;
    }
  }
  @keyframes question-mark-animate-5-rewind {
    0% {
      -moz-transform: scale(1.3) rotate(-25deg);
      -ms-transform: scale(1.3) rotate(-25deg);
      -webkit-transform: scale(1.3) rotate(-25deg);
      transform: scale(1.3) rotate(-25deg);
             margin-top: 209%;
    margin-left: -145%;
    }
    100% {
      -moz-transform: scale(0.95) rotate(-25deg);
      -ms-transform: scale(0.95) rotate(-25deg);
      -webkit-transform: scale(0.95) rotate(-25deg);
      transform: scale(0.95) rotate(-25deg);
      margin-top: 60%;
      margin-left: -315%;
    }
  }
  @keyframes question-mark-animate-5-rotate {
    0% {
      -moz-transform: scale(1.3) rotate(-10deg);
      -ms-transform: scale(1.3) rotate(-10deg);
      -webkit-transform: scale(1.3) rotate(-10deg);
      transform: scale(1.3) rotate(-10deg);
             margin-top: 209%;
    margin-left: -145%;
    }
    100% {
      -moz-transform: scale(1.3) rotate(18deg);
      -ms-transform: scale(1.3) rotate(18deg);
      -webkit-transform: scale(1.3) rotate(18deg);
      transform: scale(1.3) rotate(18deg);
          margin-top: 209%;
    margin-left: -145%;
    }
  }
  @keyframes question-mark-animate-5-rotate-back {
    0% {
      -moz-transform: scale(1.3) rotate(18deg);
      -ms-transform: scale(1.3) rotate(18deg);
      -webkit-transform: scale(1.3) rotate(18deg);
      transform: scale(1.3) rotate(18deg);
              margin-top: 209%;
    margin-left: -145%;
    }
    100% {
      -moz-transform: scale(1.3) rotate(-10deg);
      -ms-transform: scale(1.3) rotate(-10deg);
      -webkit-transform: scale(1.3) rotate(-10deg);
      transform: scale(1.3) rotate(-10deg);
             margin-top: 209%;
    margin-left: -145%;
    }
  }


  .page-home .question-mark-wrap .question-mark .hand.active {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    visibility: visible;
    /* left: -15%; */
    /* right: 300%; */
    /* right: 26%; */
    right: 184% !important;
    top: 59% !important;
    width: 356%;
    height: 356%;
  }


}