@charset "UTF-8";
/* animation */
@-webkit-keyframes moveRight {
  from {opacity: 0; transform: translateX(-100px);}
  to {opacity: 1; transform: translateX(0px);}
}
@keyframes moveRight {
  from {opacity: 0; transform: translateX(-100px);}
  to {opacity: 1; transform: translateX(0px);}
}
@-webkit-keyframes moveLeft {
  from {opacity: 0; transform: translateX(150px);}
  to {opacity: 1; transform: translateX(0px);}
}
@keyframes moveLeft {
  from {opacity: 0; transform: translateX(150px);}
  to {opacity: 1; transform: translateX(0px);}
}
@-webkit-keyframes moveTop {
  from {opacity: 0; transform: translateY(80px);}
  to {opacity: 1; transform: translateX(0px);}
}
@keyframes moveTop {
  from {opacity: 0; transform: translateY(80px);}
  to {opacity: 1; transform: translateX(0px);}
}
@-webkit-keyframes moveBottom {
  from {opacity: 0; transform: translateY(-150px);}
  to {opacity: 1; transform: translateX(0px);}
}
@keyframes moveBottom {
  from {opacity: 0; transform: translateY(-150px);}
  to {opacity: 1; transform: translateX(0px);}
}
@-webkit-keyframes clickMoveRight {
  from {opacity: 0; transform: translateX(-100px);}
  to {opacity: 1; transform: translateX(0px);}
}
@keyframes clickMoveRight {
  from {opacity: 0; transform: translateX(-100px);}
  to {opacity: 1; transform: translateX(0px);}
}
@-webkit-keyframes clickMoveTop {
  from {opacity: 0; transform: translateY(80px);}
  to {opacity: 1; transform: translateX(0px);}
}
@keyframes clickMoveTop {
  from {opacity: 0; transform: translateY(80px);}
  to {opacity: 1; transform: translateX(0px);}
}
@-webkit-keyframes clickMoveLeft {
  from {opacity: 0; transform: translateX(150px);}
  to {opacity: 1; transform: translateX(0px);}
}
@keyframes clickMoveLeft {
  from {opacity: 0; transform: translateX(150px);}
  to {opacity: 1; transform: translateX(0px);}
}
.whoWeAre.ani .contentInner div:nth-child(2) h3 {
  -webkit-animation: moveRight 1.5s ease;
  animation: moveRight 1.5s ease;
}
.whoWeAre.ani .contentInner div:nth-child(2) p {
  -webkit-animation: moveRight 2s ease;
  animation: moveRight 2s ease;
}
.whoWeAre#click .contentInner div:nth-child(2) h3 {
  -webkit-animation: clickMoveRight 1.5s ease;
  animation: clickMoveRight 1.5s ease;
}
.whoWeAre#click .contentInner div:nth-child(2) p {
  -webkit-animation: clickMoveRight 2s ease;
  animation: clickMoveRight 2s ease;
}
.introduction.ani {
  -webkit-animation: moveTop 2s ease;
  animation: moveTop 2s ease;
}
#click .introduction{
  -webkit-animation: clickMoveTop 2s ease;
  animation: clickMoveTop 2s ease;
}
.service.ani div:nth-child(1) {
  -webkit-animation: moveTop 2s ease;
  animation: moveTop 2s ease;
}
.service.ani div:nth-child(2) {
  -webkit-animation: moveTop 2.3s ease;
  animation: moveTop 2.3s ease;
}
.service.ani div:nth-child(3) {
  -webkit-animation: moveTop 2.6s ease;
  animation: moveTop 2.6s ease;
}
.service.ani div:nth-child(4) {
  -webkit-animation: moveTop 2.9s ease;
  animation: moveTop 2.9s ease;
}
.service.ani div:nth-child(5) {
  -webkit-animation: moveTop 3.2s ease;
  animation: moveTop 3.2s ease;
}
#click .service div:nth-child(1) {
  -webkit-animation: clickMoveTop 2s ease;
  animation: clickMoveTop 2s ease;
}
#click .service div:nth-child(2) {
  -webkit-animation: clickMoveTop 2.3s ease;
  animation: clickMoveTop 2.3s ease;
}
#click .service div:nth-child(3) {
  -webkit-animation: clickMoveTop 2.6s ease;
  animation: clickMoveTop 2.6s ease;
}
#click .service div:nth-child(4) {
  -webkit-animation: clickMoveTop 2.9s ease;
  animation: clickMoveTop 2.9s ease;
}
#click .service div:nth-child(5) {
  -webkit-animation: clickMoveTop 3.2s ease;
  animation: clickMoveTop 3.2s ease;
}
.application.ani h4{
  -webkit-animation: moveTop 1.5s ease;
  animation: moveTop 1.5s ease;
}
.application.ani div:nth-of-type(2) p {
  -webkit-animation: moveTop 2s ease 0.1s;
  animation: moveTop 2s ease 0.1s;
}
#click .application h4{
  -webkit-animation: clickMoveTop 1.5s ease;
  animation: clickMoveTop 1.5s ease;
}
#click .application div:nth-of-type(2) p {
  -webkit-animation: clickMoveTop 2s ease 0.1s;
  animation: clickMoveTop 2s ease 0.1s;
}
.doorlock.ani{
  -webkit-animation: moveTop 2.5s ease;
  animation: moveTop 2.5s ease;
}
.access.ani{
  -webkit-animation: moveTop 3s ease;
  animation: moveTop 3s ease;
}
.mimiclinic.ani{
  -webkit-animation: moveTop 2.5s ease;
  animation: moveTop 2.5s ease;
}
.galleryan.ani{
  -webkit-animation: moveTop 2.5s ease;
  animation: moveTop 2.5s ease;
}
.yurimsolution.ani{
  -webkit-animation: moveTop 2.5s ease;
  animation: moveTop 2.5s ease;
}
.myconect.ani{
  -webkit-animation: moveTop 2.5s ease;
  animation: moveTop 2.5s ease;
}
#click .doorlock{
  -webkit-animation: clickMoveTop 2.5s ease;
  animation: clickMoveTop 2.5s ease;
}
#click .access{
  -webkit-animation: clickMoveTop 3s ease;
  animation: clickMoveTop 3s ease;
}
#click .mimiclinic{
  -webkit-animation: clickMoveTop 2.5s ease;
  animation: clickMoveTop 2.5s ease;
}
#click .galleryan{
  -webkit-animation: clickMoveTop 2.5s ease;
  animation: clickMoveTop 2.5s ease;
}
#click .yurimsolution{
  -webkit-animation: clickMoveTop 2.5s ease;
  animation: clickMoveTop 2.5s ease;
}
#click .myconect{
  -webkit-animation: clickMoveTop 2.5s ease;
  animation: clickMoveTop 2.5s ease;
}
.holychannel.ani {
  -webkit-animation: moveLeft 1.5s ease;
  animation: moveLeft 1.5s ease;
}
.dispenser.ani {
  -webkit-animation: moveRight 2s ease 0.1s;
  animation: moveRight 2s ease 0.1s;
}
.bluetena.ani {
  -webkit-animation: moveLeft 1.5s ease;
  animation: moveLeft 1.5s ease;
}
.cozythere.ani {
  -webkit-animation: moveRight 2s ease 0.1s;
  animation: moveRight 2s ease 0.1s;
}
#click .holychannel {
  -webkit-animation: clickMoveLeft 1.5s ease;
  animation: clickMoveLeft 1.5s ease;
}
#click .dispenser {
  -webkit-animation: clickMoveRight 2s ease 0.1s;
  animation: clickMoveRight 2s ease 0.1s;
}
#click .bluetena {
  -webkit-animation: clickMoveLeft 1.5s ease;
  animation: clickMoveLeft 1.5s ease;
}
#click .cozythere {
  -webkit-animation: clickMoveRight 2s ease 0.1s;
  animation: clickMoveRight 2s ease 0.1s;
}
.office.ani {
  opacity: 1;
  -webkit-animation: moveTop 2s ease;
  animation: moveTop 2s ease;
}
.getInTuchForm.ani {
  opacity: 1;
  -webkit-animation: moveTop 2s ease 0.1s;
  animation: moveTop 2s ease 0.1s;
}
#click .office {
  opacity: 1;
  -webkit-animation: clickMoveTop 2s ease;
  animation: clickMoveTop 2s ease;
}
#click .getInTuchForm {
  opacity: 1;
  -webkit-animation: clickMoveTop 2s ease 0.1s;
  animation: clickMoveTop 2s ease 0.1s;
}
@media screen and (min-width:1024px){
  .whoWeAre.ani .contentInner div:nth-child(2) h3 {
    -webkit-animation: none 0 ease;
    animation: none 0 ease;
  }
  .whoWeAre.ani .contentInner div:nth-child(2) h3 span:first-child {
    -webkit-animation: moveRight 1.5s ease;
    animation: moveRight 1.5s ease;
  }
  .whoWeAre.ani .contentInner div:nth-child(2) h3 span:nth-child(2) {
    -webkit-animation: moveRight 1.8s ease;
    animation: moveRight 1.8s ease;
  }
  .whoWeAre.ani .contentInner div:nth-child(2) a {
    -webkit-animation: moveRight 2.5s ease;
    animation: moveRight 2.5s ease;
  }
  #click .contentInner div:nth-child(2) h3 {
    -webkit-animation: none 0 ease;
    animation: none 0 ease;
  }
  #click .contentInner div:nth-child(2) h3 span:first-child {
    -webkit-animation: clickMoveRight 1.5s ease;
    animation: clickMoveRight 1.5s ease;
  }
  #click .contentInner div:nth-child(2) h3 span:nth-child(2) {
    -webkit-animation: clickMoveRight 1.8s ease;
    animation: clickMoveRight 1.8s ease;
  }
  #click .contentInner div:nth-child(2) a {
    -webkit-animation: clickMoveRight 2.5s ease;
    animation: clickMoveRight 2.5s ease;
  }
}
/* holychannel */
@-webkit-keyframes holychannel_phone320 {
  0% {right:-20px}
  30% {right:-20px}
  35% {right:90px}
  45% {right:90px}
  50% {right:150px}
  60% {right:150px}
  75% {right:-20px}
  80% {right:-20px}
  85% {right:35px}
  100% {right:35px}
}
@keyframes holychannel_phone320 {
  0% {right:-20px}
  30% {right:-20px}
  35% {right:90px}
  45% {right:90px}
  50% {right:150px}
  60% {right:150px}
  75% {right:-20px}
  80% {right:-20px}
  85% {right:35px}
  100% {right:35px}
}
@-webkit-keyframes holychannel_phoneView320 {
  0% {right:10px}
  30% {right:10px}
  35% {right:-100px}
  45% {right:-100px}
  50% {right:-160px}
  60% {right:-160px}
  75% {right:10px}
  80% {right:10px}
  85% {right:-45px}
  100% {right:-45px}
}
@keyframes holychannel_phoneView320 {
  0% {right:10px}
  30% {right:10px}
  35% {right:-100px}
  45% {right:-100px}
  50% {right:-160px}
  60% {right:-160px}
  75% {right:10px}
  80% {right:10px}
  85% {right:-45px}
  100% {right:-45px}
}
@-webkit-keyframes holychannel_phone360 {
  0% {right:-20px}
  30% {right:-20px}
  35% {right:100px}
  45% {right:100px}
  50% {right:170px}
  60% {right:170px}
  75% {right:-20px}
  80% {right:-20px}
  85% {right:40px}
  100% {right:40px}
}
@keyframes holychannel_phone360 {
  0% {right:-20px}
  30% {right:-20px}
  35% {right:100px}
  45% {right:100px}
  50% {right:170px}
  60% {right:170px}
  75% {right:-20px}
  80% {right:-20px}
  85% {right:40px}
  100% {right:40px}
}
@-webkit-keyframes holychannel_phoneView360 {
  0% {right:10px}
  30% {right:10px}
  35% {right:-110px}
  45% {right:-110px}
  50% {right:-180px}
  60% {right:-180px}
  75% {right:10px}
  80% {right:10px}
  85% {right:-50px}
  100% {right:-50px}
}
@keyframes holychannel_phoneView360 {
  0% {right:10px}
  30% {right:10px}
  35% {right:-110px}
  45% {right:-110px}
  50% {right:-180px}
  60% {right:-180px}
  75% {right:10px}
  80% {right:10px}
  85% {right:-50px}
  100% {right:-50px}
}
@-webkit-keyframes holychannel_phone1280 {
  0% {right:-45px}
  30% {right:-45px}
  35% {right: 165px}
  45% {right: 165px}
  50% {right: 260px}
  60% {right: 260px}
  75% {right:-45px}
  80% {right:-45px}
  85% {right:50px}
  100% {right:50px}
}
@keyframes holychannel_phone1280 {
  0% {right:-45px}
  30% {right:-45px}
  35% {right: 165px}
  45% {right: 165px}
  50% {right: 260px}
  60% {right: 260px}
  75% {right:-45px}
  80% {right:-45px}
  85% {right:50px}
  100% {right:50px}
}
@-webkit-keyframes holychannel_phoneView1280 {
  0% {right:20px}
  30% {right:20px}
  35% {right:-190px}
  45% {right:-190px}
  50% {right:-285px}
  60% {right:-285px}
  75% {right:20px}
  80% {right:20px}
  85% {right:-75px}
  100% {right:-75px}
}
@keyframes holychannel_phoneView1280 {
  0% {right:20px}
  30% {right:20px}
  35% {right:-190px}
  45% {right:-190px}
  50% {right:-285px}
  60% {right:-285px}
  75% {right:20px}
  80% {right:20px}
  85% {right:-75px}
  100% {right:-75px}
}
@-webkit-keyframes holychannel_dotNavFirst {
  0% {background: #ABABAB;}
  49% {background: #ABABAB;}
  50% {background: #720000;}
  59% {background: #720000;}
  60% {background: #ABABAB;}
}
@keyframes holychannel_dotNavFirst {
  0% {background: #ABABAB;}
  51% {background: #ABABAB;}
  52% {background: #720000;}
  59% {background: #720000;}
  60% {background: #ABABAB;}
}
@-webkit-keyframes holychannel_dotNavSecond {
  0% {background: #ABABAB;}
  34% {background: #ABABAB;}
  35% {background: #720000;}
  49% {background: #720000;}
  50% {background: #ABABAB;}
  59% {background: #ABABAB;}
  60% {background: #720000;}
  61% {background: #ABABAB;}
}
@keyframes holychannel_dotNavSecond {
  0% {background: #ABABAB;}
  34% {background: #ABABAB;}
  35% {background: #720000;}
  49% {background: #720000;}
  50% {background: #ABABAB;}
  59% {background: #ABABAB;}
  60% {background: #720000;}
  63% {background: #720000;}
  64% {background: #ABABAB;}
}
@-webkit-keyframes holychannel_dotNavThird {
  0% {background: #ABABAB;}
  30% {background: #ABABAB;}
  31% {background: #720000;}
  32% {background: #ABABAB;}
  63% {background: #ABABAB;}
  64% {background: #720000;}
  68% {background: #720000;}
  69% {background: #ABABAB;}
  79% {background: #ABABAB;}
  80% {background: #720000;}
}
@keyframes holychannel_dotNavThird {
  0% {background: #ABABAB;}
  30% {background: #ABABAB;}
  31% {background: #720000;}
  32% {background: #ABABAB;}
  63% {background: #ABABAB;}
  64% {background: #720000;}
  68% {background: #720000;}
  69% {background: #ABABAB;}
  79% {background: #ABABAB;}
  80% {background: #720000;}
}
@-webkit-keyframes holychannel_dotNavFourth {
  0% {background: #720000;}
  29% {background: #720000;}
  30% {background: #ABABAB;}
  72% {background: #ABABAB;}
  73% {background: #720000;}
  79% {background: #720000;}
  80% {background: #ABABAB;}
}
@keyframes holychannel_dotNavFourth {
  0% {background: #720000;}
  29% {background: #720000;}
  30% {background: #ABABAB;}
  72% {background: #ABABAB;}
  73% {background: #720000;}
  79% {background: #720000;}
  80% {background: #ABABAB;}
}
.holychannel.ani .phone {
  animation: holychannel_phone320 8s;
  right: 35px;
}
.holychannel.ani .phoneView img {
  animation: holychannel_phoneView320 8s;
  right: -45px;
}
.holychannel.ani .phone .dotNav li:nth-child(1){
  animation: holychannel_dotNavFirst 8s;
}
.holychannel.ani .phone .dotNav li:nth-child(2){
  animation: holychannel_dotNavSecond 8s;
}
.holychannel.ani .phone .dotNav li:nth-child(3){
  animation: holychannel_dotNavThird 8s;
}
.holychannel.ani .phone .dotNav li:nth-child(4){
  animation: holychannel_dotNavFourth 8s;
}
/* 360분기 */
@media screen and (min-width:360px){
  .holychannel.ani .phone {
    animation: holychannel_phone360 8s;
    right: 40px;
  }
  .holychannel.ani .phoneView img {
    animation: holychannel_phoneView360 8s;
    right: -50px;
  }
}
/* 1280분기 */
@media screen and (min-width:1280px){
  .holychannel.ani .phone {
    animation: holychannel_phone1280 8s;
    right: 50px;
  }
  .holychannel.ani .phoneView img {
    animation: holychannel_phoneView1280 8s;
    right: -75px;
  }
}
/* what we do - computer background */
.wheel1{
  opacity:0;
}
.wheel2 {
  opacity:0;
}
#slash polygon, #circle circle, #circle path, #compasses {
  opacity:0;
}
#yellowRect1, #yellowRect2, #yellowRect3 {
  opacity:0;
}
#orangeDot1, #orangeDot2, #orangeDot3,#orangeRect1, #orangeRect2 {
  opacity:0;
}
#click .computerImage {
  animation: clickMoveTop 3.5s;
}
.computerImage.ani {
  animation: moveTop 3.5s;
}
.computerImage.svgAni .wheel1 {
  animation: rotate 15s;
  transform-origin: 5.5% 8%;
  opacity:1;
}
.computerImage.svgAni .wheel2 {
  animation: rotateTwo 15s;
  transform-origin: 9.8% 31.8%;
  opacity:1;
}
.computerImage.svgAni #slash polygon {
  animation: slashAni 6s;
  opacity:1;
}
.computerImage.svgAni #circle circle {
  animation: circleAni 6s;
  opacity:1;
}
.computerImage.svgAni #circle path {
  animation: circlePathAni 6s;
  opacity:1;
}
.computerImage.svgAni #compasses {
  animation: compassesAni 12s;
  transform-origin: 24% 60%;
  opacity:1;
}
.computerImage.svgAni #yellowRect1 {
  animation: widthAni1 3.5s;
  animation-iteration-count: 5;
  opacity:1;
}
.computerImage.svgAni #yellowRect2 {
  animation: widthAni2 3.5s;
  animation-iteration-count: 5;
  opacity:1;
}
.computerImage.svgAni #yellowRect3 {
  animation: widthAni3 3s;
  animation-iteration-count: 5;
  opacity:1;
}
.computerImage.svgAni #orangeDot1 {
  animation: orangeDotAni1 2.5s;
  animation-iteration-count: 5;
  opacity:1;
}
.computerImage.svgAni #orangeDot2 {
  animation: orangeDotAni2 2.5s;
  animation-iteration-count: 5;
  opacity:1;
}
.computerImage.svgAni #orangeDot3 {
  animation: orangeDotAni3 3s;
  animation-iteration-count: 5;
  opacity:1;
}
.computerImage.svgAni #orangeRect1 {
  animation: orangeRectAni1 2.5s;
  animation-iteration-count: 5;
  opacity:1;
}
.computerImage.svgAni #orangeRect2 {
  animation: orangeRectAni2 3s;
  animation-iteration-count: 5;
  opacity:1;
}
@-webkit-keyframes rotate {
  0% {transform: scale(0)}
  1% {transform: scale(1.2)}
  2% {transform: scale(0.7)}
  3% {transform: scale(1.1)}
  4% {transform: scale(0.9)}
  5% {transform: scale(1)}
  10% {transform: rotate(90deg)}
  15% {transform: rotate(270deg)}
  30% {transform: rotate(10deg)}
  40% {transform: rotate(5deg)}
  55% {transform: rotate(360deg)}
  60% {transform: rotate(90deg)}
  75% {transform: rotate(270deg)}
  80% {transform: rotate(10deg)}
  90% {transform: rotate(5deg)}
  100% {transform: rotate(360deg)}
}
@keyframes rotate {
  0% {transform: scale(0)}
  1% {transform: scale(1.2)}
  2% {transform: scale(0.7)}
  3% {transform: scale(1.1)}
  4% {transform: scale(0.9)}
  5% {transform: scale(1)}
  10% {transform: rotate(90deg)}
  15% {transform: rotate(270deg)}
  30% {transform: rotate(10deg)}
  40% {transform: rotate(5deg)}
  55% {transform: rotate(360deg)}
  60% {transform: rotate(90deg)}
  75% {transform: rotate(270deg)}
  80% {transform: rotate(10deg)}
  90% {transform: rotate(5deg)}
  100% {transform: rotate(360deg)}
}
@keyframes rotateTwo {
  0% {transform: scale(0)}
  6% {transform: scale(1.2)}
  7% {transform: scale(0.7)}
  8% {transform: scale(1.1)}
  9% {transform: scale(0.9)}
  10% {transform: scale(1)}
  30% {transform: rotate(-180deg)}
  35% {transform: rotate(-10deg)}
  45% {transform: rotate(10deg)}
  60% {transform: rotate(-360deg)}
  65% {transform: rotate(-180deg)}
  75% {transform: rotate(-10deg)}
  90% {transform: rotate(10deg)}
  100% {transform: rotate(-360deg)}
}
@keyframes slashAni {
  0% {transform: scale(0)}
  10% {transform: scale(0)}
  11% {transform: scale(1.2)}
  12% {transform: scale(0.7)}
  13% {transform: scale(1.1)}
  14% {transform: scale(0.9)}
  15% {transform: scale(1)}
}
@keyframes circleAni {
  0% {transform: scale(0)}
  16% {transform: scale(0)}
  17% {transform: scale(1.2)}
  18% {transform: scale(0.7)}
  19% {transform: scale(1.1)}
  20% {transform: scale(0.9)}
  21% {transform: scale(1)}
}
@keyframes circlePathAni {
  0% {opacity:0}
  23% {opacity:0}
  30% {opacity:1}
}
@keyframes compassesAni {
  0% {transform: scale(0) translateX(25px)}
  21% {transform: scale(0) translateX(25px)}
  22% {transform: scale(1.2) translateX(25px)}
  23% {transform: scale(0.7) translateX(25px)}
  24% {transform: scale(1.1) translateX(25px)}
  25% {transform: scale(0.9) translateX(25px)}
  26% {transform: scale(1) translateX(25px)}
  51% {transform: rotateY(450deg) translateX(25px)}
  61% {transform: rotateY(-450deg) translateX(25px)}
}
@keyframes widthAni1 {
  0% {width:0}
  15% {width:0}
  70% {width:95.486631px;}
  100% {width:95.486631px;}
}
@keyframes widthAni2 {
  0% {width:0}
  50% {width:0}
  100% {width:16.2395722px;}
}
@keyframes widthAni3 {
  0% {width:0}
  40% {width:0}
  100% {width:102.314439px;}
}
@keyframes orangeDotAni1 {
  0% {opacity:0}
  11% {opacity:0}
  20% {opacity:1}
  40% {opacity:0}
  50% {opacity:1}
  70% {opacity:0}
  80% {opacity:1}
  95% {opacity:0}
  100% {opacity:1}
}
@keyframes orangeDotAni2 {
  0% {opacity:0}
  20% {opacity:0}
  30% {opacity:1}
  45% {opacity:0}
  55% {opacity:1}
  68% {opacity:0}
  75% {opacity:1}
  93% {opacity:0}
  100% {opacity:1}
}
@keyframes orangeDotAni3 {
  0% {opacity:0}
  15% {opacity:0}
  25% {opacity:1}
  30% {opacity:0}
  45% {opacity:1}
  60% {opacity:0}
  70% {opacity:1}
  90% {opacity:0}
  100% {opacity:1}
}
@keyframes orangeRectAni1 {
  0% {width:0}
  50% {width:0}
  100% {width:64.2994652px;}
}
@keyframes orangeRectAni2 {
  0% {width:0}
  40% {width:0}
  100% {width:64.2994652px;}
}
/* who we are animation */
@keyframes fall {
  0% {
    transform: translate(51.4px,-500px)
  }
  50% {
    transform: translate(51.4px,61.9px)
  }
  51% {
    transform: translate(54.4px,58.9px)
  }
  52% {
    transform: translate(51.4px,61.9px)
  }
  53% {
    transform: translate(47.4px,64.9px)
  }
  54% {
    transform: translate(51.4px,61.9px)
  }
  55% {
    transform: translate(54.4px,58.9px)
  }
  56% {
    transform: translate(51.4px,61.9px)
  }
  57% {
    transform: translate(47.4px,64.9px)
  }
  58% {
    transform: translate(51.4px,61.9px)
  }
  59% {
    transform: translate(54.4px,58.9px)
  }
  60% {
    transform: translate(51.4px,61.9px)
  }
  61% {
    transform: translate(47.4px,64.9px)
  }
  100% {transform: translate(51.4px,61.9px)}
}
@keyframes dustRightAni1 {
  0% {opacity:0;}
  80% {
    opacity:0.7;
    transform: translate(10px,-10px)
  }
  /* 50% {transform: translate(8px,-12px)}
  60% {transform: translate(11px,-15px)}
  70% {transform: translate(9px,-18px)}
  80% {transform: translate(11px,-21px)}
  90% {transform: translate(8px,-25px)} */
  100% {opacity:0;transform: translate(10px,-10px)}
}
@keyframes dustRightAni2 {
  0% {opacity:0;}
  80% {
    opacity:0.7;
    transform: translate(10px,-10px)
  }
  100% {opacity:0;transform: translate(10px,-10px)}
}
@keyframes dustRightAni3 {
  0% {opacity:0;}
  80% {
    opacity:0.7;
    transform: translate(10px,-10px)
  }
  100% {opacity:0;transform: translate(10px,-10px)}
}
@keyframes dustRightAni4 {
  0% {opacity:0;}
  80% {
    opacity:0.7;
  }
  100% {opacity:0;transform: translate(10px,-10px)}
}
@keyframes dustLeftAni1 {
  0% {opacity:0;}
  80% {
    opacity:0.7;
    transform: translate(-10px,-10px)
  }
  /* 50% {transform: translate(8px,-12px)}
  60% {transform: translate(11px,-15px)}
  70% {transform: translate(9px,-18px)}
  80% {transform: translate(11px,-21px)}
  90% {transform: translate(8px,-25px)} */
  100% {opacity:0;transform: translate(-10px,-10px)}
}
@keyframes dustLeftAni2 {
  0% {opacity:0;}
  80% {
    opacity:0.7;
    transform: translate(0px,-10px)
  }
  100% {opacity:0;transform: translate(0px,-10px)}
}
@keyframes dustLeftAni3 {
  0% {opacity:0;}
  80% {
    opacity:0.7;
    transform: translate(-10px,-10px)
  }
  100% {opacity:0;transform: translate(-10px,-10px)}
}
@keyframes crackAni {
  0% {
    opacity:0
  }
  100% {opacity:1}
}
@keyframes crackLineAni {
  0% {
    stroke-dashoffset: 0;
  }
  100% {stroke-dashoffset: 1000;}
}
@keyframes orangeLineAni1 {
  0% {opacity:0; transform: translateY(45px)}
  30% {opacity:0.3;}
  75% {opacity:0.3; transform: translateY(0px)}
  100% {opacity: 0}
}
@keyframes orangeLineAni2 {
  0% {opacity:1; transform: translateY(50px)}
  75% {transform: translateY(-10px)}
  100% {opacity: 0}
}
@keyframes orangeLineAni3 {
  0% {opacity:0; transform: translateY(160px)}
  80% {opacity: 1;}
  90% {transform: translateY(60px)}
  100% {opacity: 0}
}
@keyframes orangeLineAni4 {
  0% {opacity:0;transform: translateY(120px)}
  50% {opacity:1;}
  100% {opacity: 0; transform: translateY(0px)}
}
@keyframes orangeShape1 {
  0% {opacity:0.3; transform: translateY(40px)}
  75% {transform: translateY(0px)}
  100% {opacity: 0}
}
@keyframes orangeShape2 {
  0% {opacity:0;transform: translateY(130px)}
  20% {transform: translateY(130px)}
  30% {opacity:0.3;}
  100% {opacity: 0; transform: translateY(30px)}
}
@keyframes orangeShape3 {
  0% {opacity:0.3; transform: translateY(50px)}
  100% {opacity: 0; transform: translateY(0px)}
}
@keyframes orangeShape4 {
  0% {opacity:0; transform: translateY(80px)}
  80% {opacity:0.3; transform: translateY(0px)}
  100% {opacity: 0}
}
@keyframes manArmLeftAni {
  0% {transform: rotate(0deg) translate(14.736957px, 33.438670px)}
  60% {transform: rotate(-12deg) translate(14.736957px, 33.438670px)}
  100% {transform: rotate(0deg) translate(14.736957px, 33.438670px)}
}
@keyframes manArmRightAni {
  0% {transform: rotate(0deg) translate(0.000000px, 22.667173px)}
  30% {transform: rotate(-5deg) translate(0.000000px, 22.667173px)}
  60% {transform: rotate(5deg) translate(0.000000px, 22.667173px)}
  100% {transform: rotate(0deg) translate(0.000000px, 22.667173px)}
}
@keyframes manFaceAni {
  0% {transform: rotate(0deg) translate(31.687561px, 0.000000px)}
  50% {transform: rotate(7deg) translate(31.687561px, 0.000000px)}
  100% {transform: rotate(0deg) translate(31.687561px, 0.000000px)}
}
@keyframes leafAni1 {
  0% {transform: rotate(0deg) translate(58.095984px, 0.000000px)}
  50% {transform: rotate(2deg) translate(58.095984px, 0.000000px)}
  100% {transform: rotate(0deg) translate(58.095984px, 0.000000px)}
}
@keyframes leafAni2 {
  0% {transform: rotate(0deg) translate(58.270000px, 71.893682px)}
  50% {transform: rotate(-1deg) translate(58.270000px, 71.893682px)}
  100% {transform: rotate(0deg) translate(58.270000px, 71.893682px)}
}
@keyframes leafAni3 {
  0% {transform: rotate(0deg) translate(19.301364px, 34.442323px)}
  50% {transform: rotate(-1deg) translate(19.301364px, 34.442323px)}
  100% {transform: rotate(0deg) translate(19.301364px, 34.442323px)}
}
@keyframes leafAni4 {
  0% {transform: rotate(0deg) translate(33.821904px, 97.821036px)}
  50% {transform: rotate(2deg) translate(33.821904px, 97.821036px)}
  100% {transform: rotate(0deg) translate(33.821904px, 97.821036px)}
}
/* <!-- animation --> */
/* .whoWeAre.ani #H {
  animation: fall 1s;
} */
.whoWeAre.ani #crack {
  animation: crackAni 3s;
}
/* <!-- dust animation --> */
.whoWeAre.ani .dustRight1 {
  animation: dustRightAni1 3s;
  transform-origin: 0% 0%;
  opacity:0;
}
.whoWeAre.ani .dustRight2 {
  animation: dustRightAni2 3s;
  transform-origin: 0% 0%;
  opacity:0;
}
.whoWeAre.ani .dustRight3 {
  animation: dustRightAni3 3s;
  opacity:0;
}
.whoWeAre.ani .dustRight4 {
  animation: dustRightAni4 3s;
  opacity:0;
}
.whoWeAre.ani .dustLeft1 {
  animation: dustLeftAni1 3s;
  transform-origin: 0% 0%;
  opacity:0;
}
.whoWeAre.ani .dustLeft2 {
  animation: dustLeftAni2 3s;
  transform-origin: 0% 0%;
  opacity:0;
}
.whoWeAre.ani .dustLeft3 {
  animation: dustLeftAni3 3s;
  opacity:0;
}
/* <!-- line animation --> */
.whoWeAre.ani .orangeLine1 {
  -webkit-animation: orangeLineAni1 3s infinite;
  animation: orangeLineAni1 3s infinite;
}
.whoWeAre.ani .orangeLine2 {
  animation: orangeLineAni2 5s infinite;
}
.whoWeAre.ani .orangeLine3 {
  animation: orangeLineAni3 3s infinite;
}
.whoWeAre.ani .orangeLine4 {
  animation: orangeLineAni4 4s infinite;
}
/* <!-- shape animation --> */
.whoWeAre.ani .orangeShape1 {
  animation: orangeShape1 6s infinite;
}
.whoWeAre.ani .orangeShape2 {
  animation: orangeShape2 6s infinite;
}
.whoWeAre.ani .orangeShape3 {
  animation: orangeShape3 6s infinite;
}
.whoWeAre.ani .orangeShape4 {
  animation: orangeShape4 6s infinite;
}
/* <!-- man animation --> */
.whoWeAre.ani #manArmLeft {
  animation: manArmLeftAni 5s;
  animation-iteration-count: infinite;
  transform-origin: 12% 7%;
}
.whoWeAre.ani #manArmRight {
  animation: manArmRightAni 5s;
  animation-iteration-count: infinite;
  transform-origin: 7% 8%;
}
.whoWeAre.ani #manFace {
  animation: manFaceAni 5s;
  animation-iteration-count: infinite;
  transform-origin: 8% 5%;
}
.whoWeAre.ani #leaf1 {
  animation: leafAni1 3s;
  animation-iteration-count: infinite;
  transform-origin: 9% -2%;
}
.whoWeAre.ani #leaf2 {
  animation: leafAni2 4s;
  animation-iteration-count: infinite;
  transform-origin: 7% -2%;
}
.whoWeAre.ani #leaf3 {
  animation: leafAni3 3s;
  animation-iteration-count: infinite;
  transform-origin: 7% 0%;
}
.whoWeAre.ani #leaf4 {
  animation: leafAni4 4s;
  animation-iteration-count: infinite;
  transform-origin: 11% 3%;
}
/* clients - mobile woman */
#womanArm {
  animation: womanArmAni 5s;
  animation-iteration-count: infinite;
  transform-origin: 51% 60%;
}
#womanFace {
  animation: womanFaceAni 5s;
  animation-iteration-count: infinite;
  transform-origin: 51% 60%;
}
@keyframes womanArmAni {
  0% {transform: rotate(0deg)}
  40% {transform: rotate(-30deg)}
  100% {transform: rotate(0deg)}
}
@keyframes womanFaceAni {
  0% {transform: rotate(0deg) translate(82.810000px, 68.228377px)}
  50% {transform: rotate(-5deg) translate(82.810000px, 68.228377px)}
  100% {transform: rotate(0deg) translate(82.810000px, 68.228377px)}
}