/* ========== section-content 進場效果 ========== */

.hide {
  opacity: 0;
  filter: blur(10px);
  transition: all 1.8s cubic-bezier(0, 1.1, 1, 1.02);
}

.fadeIn {
  opacity: 1;
  filter: blur(0px);
}


@keyframes hue {
  0% {
    filter: hue-rotate(0deg);
  }
  66% {
    filter: hue-rotate(-20deg);
  }
  100% {
    filter: hue-rotate(105deg) saturate(80%);
  }
}

@keyframes blur {
  0% {
    opacity: 0;
    filter: blur(20px);
  }
  66% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes scaled {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}

@keyframes floating {
  0% {
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
  }
  50% {
    -webkit-transform: translatey(-0.3em);
    transform: translatey(-0.3em);
  }
  100% {
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
  }
}

@keyframes floating2 {
  0% {
    -webkit-transform: translatey(0px);
    transform: translatey(0px);
  }
  100% {
    -webkit-transform: translatey(-0.2em);
    transform: translatey(-0.2em);
  }
}

@keyframes floating_role {
  0% {
    transform: translatey(0px);
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
  }
  50% {
    transform: translatey(-0.5em);
    filter: drop-shadow(0px 0px 80px rgba(255, 255, 255, 1)) brightness(1.04);
  }
  100% {
    transform: translatey(0px);
    filter: drop-shadow(0px 0px 0px rgba(255, 255, 255, 0));
  }
}


@keyframes glow {
  0% {
    filter: drop-shadow(0 0 0em rgba(241, 224, 198, 0));
  }
  50% {
    filter: drop-shadow(0 0 0.8em rgba(255, 221, 171, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 0em rgba(241, 224, 198, 0));
  }
}


@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


@keyframes floatOut_R {
  0% {
    filter: hue-rotate(90deg);
    transform: scale(0.2) translate(-250%, 0%) rotate(0);
    opacity: 0;
  }
  50% {
    filter: hue-rotate(-30deg);
    transform: scale(0.9) scaleY(-1) translate(10%, 10%) rotate(90deg);
    opacity: .9;
  }
  100% {
     filter: hue-rotate(-120deg);
    transform: scale(0.4) scaleY(-1) translate(500%, 300%) rotate(420deg);
    opacity: 0;
  }
}

@keyframes floatOut_L {
  0% {
    filter: hue-rotate(0deg);
    transform: scale(0.2) translate(200%, 0%) rotate(0);
    opacity: 0;
  }
  33% {
    filter: hue-rotate(60deg);
    transform: scale(0.8) translate(-10%, 10%) rotate(-200deg);
    opacity: .8;
  }
  100% {
     filter: hue-rotate(270deg);
    transform: scale(0.2) translate(-1000%, 300%) rotate(-1000deg);
    opacity: 0;
  }
}


@keyframes floatOut_L2 {
  0% {
    filter: hue-rotate(0deg), blur(10px);
    transform: scale(0.2) translate(0%, 0%) rotate(30deg);
    opacity: 0;
  }
  50% {
    filter: hue-rotate(-30deg), blur(10px);
    transform: scale(0.5) scaleY(-1) translate(-10%, 10%) rotate(0deg);
    opacity: 1;
  }
  100% {
    filter: hue-rotate(-120deg), blur(500px);
    transform: scale(2) scaleY(-1) translate(-300%, 300%) rotate(-720deg);
    opacity: 0;
  }
}


@keyframes GfloatOut_R {
  0% {
    filter: hue-rotate(0deg), blur(200px);
    transform: scale(0.2) translate(0%, 0%) rotate(-30deg);
    opacity: 0;
  }
  50% {
    filter: hue-rotate(-30deg), blur(100px);
    transform: scale(0.44) translate(10%, 10%);
    opacity: .9;
  }
  100% {
    filter: hue-rotate(-120deg), blur(800px);
    transform: scale(3) translate(250%, 300%) rotate(720deg);
    opacity: 0;
  }
}


@keyframes GfloatOut_L {
  0% {
    filter: hue-rotate(0deg), blur(200px);
    transform: scale(0.2) translate(20%, 10%) rotate(30deg);
    opacity: 0;
  }
  50% {
    filter: hue-rotate(-30deg), blur(100px);
    transform: scale(0.4) translate(-10%, 30%) rotate(0deg);
    opacity: .9;
  }
  100% {
    filter: hue-rotate(-120deg), blur(800px);
    transform: scale(4) translate(-300%, 250%) rotate(-720deg);
    opacity: 0;
  }
}


@keyframes wink {
  0%, 14%{
    background: url(../img/role3.png) no-repeat;
    background-size: 100%;
  }
 
  3%, 9%{
    background: url(../img/role2.png) no-repeat;
    background-size: 100%;
  }

  6%{
    background: url(../img/role1.png) no-repeat;
    background-size: 100%;
  }

  100%{
    background: url(../img/role3.png) no-repeat;
    background-size: 100%;
  }
}


@keyframes skin-sticker {
  0%, 50% {
    background: url(../img/skinG.png) no-repeat;
    background-size: contain;
  }

  100% {
    background: url(../img/skinB.png) no-repeat;
    background-size: contain;
  }
}