@charset "UTF-8";

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
*/


@keyframes loadmask {
  0% {
    opacity: 1;
  }
  99% {
      opacity: 0;
      z-index: 10;
  }
  100% {
      opacity: 0;
      z-index: -100;
  }
}


/*************************************
 * Fade Animation
*************************************/
.fadeIn {
  opacity: 0;
}

.fadeIn.is-inview {
  animation: fadeIn 1.0s ease-out forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeInScale {
  transform: scale(1.1);
}

.is-inview .fadeInScale {
  animation: fadeInScale 0.8s ease-out forwards;
}

@keyframes fadeInScale {
  0% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1.0);
  }
}



/*************************************
 * Hover Animation
*************************************/
a {
  opacity: 1;
  transition: 0.3s;
}

a:hover {
  opacity: 0.7;
  transition: 0.3s;
}

.js-btnHover::after {
  scale: 1.0;
  transition: 0.3s;
}

.js-btnHover.is-hover::after {
  scale: 1.15;
  transition: 0.3s;
}

.js-postHover img {
  scale: 1.0;
  transition: 0.3s;
}

.js-postHover.is-hover img {
  scale: 1.05;
  transition: 0.3s;
}

.js-cvHover {
  opacity: 1;
  transition: 0.3s;
}

.js-cvHover.is-hover {
  opacity: 0.9;
  transition: 0.3s;
}

.js-ftBtnHover {
  opacity: 1;
  transition: 0.3s;
}

.js-ftBtnHover.is-hover {
  opacity: 0.7;
  transition: 0.3s;
}




/*************************************
 * visible Animation
*************************************/
header {
  transition: 0.8s;
}

.js-header-follow header {
  height: 110px;
  transition: 0.8s;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
@media screen and (max-width: 1080px) {
  .js-header-follow header {
    height: 70px;
    transition: 0.8s;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}

.js-header-follow header::before {
  opacity: 1 !important;
  /*background: var(--Linear, linear-gradient(101deg, #EAECE2 1.57%, #FFEEF3 102.08%)) !important;*/
  transition: 0.8s;
}

/*.js-header-follow header .l-header-logo img {
  filter: none !important;
}*/

.l-follow-cv {
  transition: 0.8s ease-in-out;
}

.l-follow-cv.is-hide {
  bottom: -200px;
  opacity: 0;
  transition: 0.9s ease-out;
}



/*************************************
 * Loop Animation (Footer & Harbs Gallery)
*************************************/
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes loop3 {
  0% {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes loop4 {
  0% {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(0);
  }
}