@charset "utf-8";

/***************animation**********************/

.fadeIn {
	-webkit-transition: all .8s ease;
	-o-transition: all .8s ease;
	-moz-transition: all .8s ease;
	transition: all .8s ease;
	-ms-transition: all .8s ease;
}
.fadeIn[data-emergence=hidden] {
	opacity: 0;
}
.fadeIn[data-emergence=visible] {
	opacity: 1;
}
[data-emergence=hidden] .fadeIn{
	opacity: 0;
}
[data-emergence=visible] .fadeIn{
	opacity: 1;
}
.fadeIn[data-emergence=visible].delay-1s{
  	transition-delay: 0.3s;
}
.fadeIn[data-emergence=visible].delay-2s{
  	transition-delay: 0.6s;
}
.fadeIn[data-emergence=visible].delay-3s{
  	transition-delay: 0.9s;
}
.fadeIn[data-emergence=visible].delay-4s{
  	transition-delay: 1.2s;
}
.fadeIn[data-emergence=visible].delay-5s{
  	transition-delay: 1.5s;
}


.fadeInUp {
	-webkit-transition: all .8s ease;
	-o-transition: all .8s ease;
	-moz-transition: all .8s ease;
	transition: all .8s ease;
	-ms-transition: all .8s ease;
}
.fadeInUp[data-emergence=hidden] {
	opacity: 0;
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-ms-transform: translateY(100px);
	-o-transform: translateY(100px);
	transform: translateY(100px)
}
.fadeInUp[data-emergence=visible] {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0)
}
[data-emergence=hidden] .fadeInUp {
	opacity: 0;
	-webkit-transform: translateY(100px);
	-moz-transform: translateY(100px);
	-ms-transform: translateY(100px);
	-o-transform: translateY(100px);
	transform: translateY(100px)
}
[data-emergence=visible] .fadeInUp{
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0)
}


.fadeInRight {
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease
}
.fadeInRight[data-emergence=hidden]{
	opacity: 0;
	-webkit-transform: translateX(30px);
	-moz-transform: translateX(30px);
	-ms-transform: translateX(30px);
	-o-transform: translateX(30px);
	transform: translateX(30px);
}
.fadeInRight[data-emergence=visible]{
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0)
}
[data-emergence=hidden] .fadeInRight{
	opacity: 0;
	-webkit-transform: translateX(30px);
	-moz-transform: translateX(30px);
	-ms-transform: translateX(30px);
	-o-transform: translateX(30px);
	transform: translateX(30px);
}
[data-emergence=visible] .fadeInRight{
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0)
}
.fadeInRight[data-emergence=visible].delay-1s{
  	transition-delay: 0.3s;
}
.fadeInRight[data-emergence=visible].delay-2s{
  	transition-delay: 0.6s;
}
.fadeInRight[data-emergence=visible].delay-3s{
  	transition-delay: 0.9s;
}
.fadeInRight[data-emergence=visible].delay-4s{
  	transition-delay: 1.2s;
}
.fadeInRight[data-emergence=visible].delay-5s{
  	transition-delay: 1.5s;
}

.fadeInLeft {
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease
}
.fadeInLeft[data-emergence=hidden]{
	opacity: 0;
	-webkit-transform: translateX(-100px);
	-moz-transform: translateX(-100px);
	-ms-transform: translateX(-100px);
	-o-transform: translateX(-100px);
	transform: translateX(-100px)
}
.fadeInLeft[data-emergence=visible]{
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0)
}
[data-emergence=hidden] .fadeInLeft{
	opacity: 0;
	-webkit-transform: translateX(-100px);
	-moz-transform: translateX(-100px);
	-ms-transform: translateX(-100px);
	-o-transform: translateX(-100px);
	transform: translateX(-100px)
}
[data-emergence=visible] .fadeInLeft{
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0)
}
.fadeInLeft[data-emergence=visible].delay-1s{
  	transition-delay: 0.3s;
}
.fadeInLeft[data-emergence=visible].delay-2s{
  	transition-delay: 0.6s;
}
.fadeInLeft[data-emergence=visible].delay-3s{
  	transition-delay: 0.9s;
}
.fadeInLeft[data-emergence=visible].delay-4s{
  	transition-delay: 1.2s;
}
.fadeInLeft[data-emergence=visible].delay-5s{
  	transition-delay: 1.5s;
}
.fadeInDown {
	-webkit-transition: all .8s ease;
	-o-transition: all .8s ease;
	-moz-transition: all .8s ease;
	transition: all .8s ease;
	-ms-transition: all .8s ease;
}
.fadeInDown[data-emergence=hidden] {
	opacity: 0;
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px)
}
.fadeInDown[data-emergence=visible] {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0)
}
[data-emergence=hidden] .fadeInDown {
	opacity: 0;
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px);
	transform: translateY(-50px)
}
[data-emergence=visible] .fadeInDown {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0)
}



[data-emergence="hidden"].emergence-zoomIn {
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
[data-emergence="visible"].emergence-zoomIn {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}




@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
        transform: translateY(40px);
        -moz-transform: translateY(40px);
        -o-transform: translateY(40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
        transform: translateY(40px);
        -moz-transform: translateY(40px);
        -o-transform: translateY(40px);
	}
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

/* 背景兩張疊圖閃光動畫 */
	@-webkit-keyframes img_shine {
		0% {
		  	opacity: 0.5;
		}
	  
		100% {
		  	opacity: 0;
		}
  	}
  
  	@keyframes img_shine {
		0% {
		  	opacity: 0.5;
		}
	  
		100% {
		  	opacity: 0;
		}
  	}

/* 文字漸層動畫 */
	#loreal-compaign .color-text-2 {
	  	/* background: -webkit-linear-gradient(left, #010415 0%, #000745 24%, #010415 36%, #000745 46%, #010415 52%, #000745 58%, #000745 67%, #010415 100%); */
	  	background-size: 400% 400%;
	  	background-clip: text;
	  	-webkit-background-clip: -webkit-text;
	  	-webkit-background-clip: text;
	  	-webkit-text-fill-color: transparent;
	  	text-fill-color: transparent;
	  	-webkit-animation-name: colorText;
	  	animation-name: colorText;
	  	-webkit-animation-duration: 5s;
	  	animation-duration: 5s;
	  	-webkit-animation-timing-function: ease;
	  	animation-timing-function: ease;
	  	-webkit-animation-iteration-count: masked-light infinite;
	  	animation-iteration-count: infinite;
	}
	@-webkit-keyframes colorText {
	  	0% {
	      	background-position: 0 0;
	  	}
	  	100% {
	      	background-position: -100% 0;
	  	}
	}

  
.zoom_in{
	-webkit-transition: all 1.5s ease;
	-o-transition: all 1.5s ease;
	-moz-transition: all 1.5s ease;
	transition: all 1.5s ease;
	-ms-transition: all 1.5s ease;
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
}
.zoom_in[data-emergence=hidden] {
	opacity: 0;
	-webkit-transform: translateY(2px);
	transform: translateY(2px);
	-webkit-transform: scale(0.6);
	transform: scale(0.6);
}

.zoom_in[data-emergence=visible] {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transform: scale(1);
	transform: scale(1);
}

.fadeIn[data-emergence=visible].delay-1s{
  	transition-delay: 0.3s;
}
.fadeIn[data-emergence=visible].delay-2s{
  	transition-delay: 0.6s;
}
.fadeIn[data-emergence=visible].delay-3s{
  	transition-delay: 0.9s;
}
.fadeIn[data-emergence=visible].delay-4s{
  	transition-delay: 1.2s;
}
.fadeIn[data-emergence=visible].delay-5s{
  	transition-delay: 1.5s;
}

[data-emergence=visible] .fadeIn.delay-1s{
  	transition-delay: 0.3s;
}
[data-emergence=visible] .fadeIn.delay-2s{
  	transition-delay: 0.6s;
}
[data-emergence=visible] .fadeIn.delay-3s{
  	transition-delay: 0.9s;
}
[data-emergence=visible] .fadeIn.delay-4s{
  	transition-delay: 1.2s;
}
[data-emergence=visible] .fadeIn.delay-5s{
  	transition-delay: 1.5s;
}


.fadeInDown[data-emergence=visible].delay-1s{
  	transition-delay: 0.3s;
}
.fadeInDown[data-emergence=visible].delay-2s{
  	transition-delay: 0.6s;
}
.fadeInDown[data-emergence=visible].delay-3s{
  	transition-delay: 0.9s;
}
.fadeInDown[data-emergence=visible].delay-4s{
  	transition-delay: 1.2s;
}
.fadeInDown[data-emergence=visible].delay-5s{
  	transition-delay: 1.5s;
}

[data-emergence=visible] .fadeInDown.delay-1s{
  	transition-delay: 0.3s;
}
[data-emergence=visible] .fadeInDown.delay-2s{
  	transition-delay: 0.6s;
}
[data-emergence=visible] .fadeInDown.delay-3s{
  	transition-delay: 0.9s;
}
[data-emergence=visible] .fadeInDown.delay-4s{
  	transition-delay: 1.2s;
}
[data-emergence=visible] .fadeInDown.delay-5s{
  	transition-delay: 1.5s;
}


.fadeInUp[data-emergence=visible].delay-1s{
  	transition-delay: 0.3s;
}
.fadeInUp[data-emergence=visible].delay-2s{
  	transition-delay: 0.6s;
}
.fadeInUp[data-emergence=visible].delay-3s{
  	transition-delay: 0.9s;
}
.fadeInUp[data-emergence=visible].delay-4s{
  	transition-delay: 1.2s;
}
.fadeInUp[data-emergence=visible].delay-5s{
  	transition-delay: 1.5s;
}

[data-emergence=visible] .fadeInUp.delay-1s{
  	transition-delay: 0.3s;
}
[data-emergence=visible] .fadeInUp.delay-2s{
  	transition-delay: 0.6s;
}
[data-emergence=visible] .fadeInUp.delay-3s{
  	transition-delay: 0.9s;
}
[data-emergence=visible] .fadeInUp.delay-4s{
  	transition-delay: 1.2s;
}
[data-emergence=visible] .fadeInUp.delay-5s{
  	transition-delay: 1.5s;
}


.fadeInLeft[data-emergence=visible].delay-1s{
  	transition-delay: 0.3s;
}
.fadeInLeft[data-emergence=visible].delay-2s{
  	transition-delay: 0.6s;
}
.fadeInLeft[data-emergence=visible].delay-3s{
  	transition-delay: 0.9s;
}
.fadeInLeft[data-emergence=visible].delay-4s{
  	transition-delay: 1.2s;
}
.fadeInLeft[data-emergence=visible].delay-5s{
  	transition-delay: 1.5s;
}

[data-emergence=visible] .fadeInLeft.delay-1s{
  	transition-delay: 0.3s;
}
[data-emergence=visible] .fadeInLeft.delay-2s{
  	transition-delay: 0.6s;
}
[data-emergence=visible] .fadeInLeft.delay-3s{
  	transition-delay: 0.9s;
}
[data-emergence=visible] .fadeInLeft.delay-4s{
  	transition-delay: 1.2s;
}
[data-emergence=visible] .fadeInLeft.delay-5s{
  	transition-delay: 1.5s;
}


.fadeInRight[data-emergence=visible].delay-1s{
  	transition-delay: 0.3s;
}
.fadeInRight[data-emergence=visible].delay-2s{
  	transition-delay: 0.6s;
}
.fadeInRight[data-emergence=visible].delay-3s{
  	transition-delay: 0.9s;
}
.fadeInRight[data-emergence=visible].delay-4s{
  	transition-delay: 1.2s;
}
.fadeInRight[data-emergence=visible].delay-5s{
  	transition-delay: 1.5s;
}

[data-emergence=visible] .fadeInRight.delay-1s{
  	transition-delay: 0.3s;
}
[data-emergence=visible] .fadeInRight.delay-2s{
  	transition-delay: 0.6s;
}
[data-emergence=visible] .fadeInRight.delay-3s{
  	transition-delay: 0.9s;
}
[data-emergence=visible] .fadeInRight.delay-4s{
  	transition-delay: 1.2s;
}
[data-emergence=visible] .fadeInRight.delay-5s{
  	transition-delay: 1.5s;
}
















/* AOS動畫 */
	/* 純淡入動畫 */
	  	.onlyFadeInAnimate{
	    	opacity: 0;
	    	position: relative;
	  	}
	  	@-webkit-keyframes onlyFadeInAnimate {
	      	0% {
	          	opacity: 0;
	      	}
	      	100% {
	          	opacity: 1;
	      	}
	  	}
	  	@keyframes onlyFadeInAnimate {
	      	0%{
	          	opacity: 0;
	      	}
	      	100% {
	          	opacity: 1;
	      	}
	  	}
	  	.swiper-slide-active.aos-animate .onlyFadeInAnimate{
	      	animation: onlyFadeInAnimate 1.0s forwards;
	      	-webkit-animation: onlyFadeInAnimate 1.0s forwards;
	  	}



	/* 由右往左淡入動畫 */
  	.fadeInRightToLeftAnimate{
    	position: relative;
    	opacity: 0;
    	right: -6vw;
  	}
  	@-webkit-keyframes fadeInRightToLeftAnimate {
      	0% {
          	right: -3vw;
          	opacity: 0;
      	}
      	100% {
          	right: 0;
          	opacity: 1;
      	}
  	}
  	@keyframes fadeInRightToLeftAnimate {
      	0% {
          	right: -3vw;
          	opacity: 0;
      	}
      	100% {
          	right: 0;
          	opacity: 1;
      	}
  	}
  	.swiper-slide-active.aos-animate .fadeInRightToLeftAnimate{
      	animation: fadeInRightToLeftAnimate 1.0s forwards;
      	-webkit-animation: fadeInRightToLeftAnimate 1.0s forwards;
  	}

	.swiper-slide-active.aos-animate .delay-1s {
	  	-webkit-animation-delay: 0.5s;
	  	animation-delay: 0.5s;
	}
	.swiper-slide-active.aos-animate .delay-2s {
	  	-webkit-animation-delay: 0.7s;
	  	animation-delay: 0.7s;
	}
	.swiper-slide-active.aos-animate .delay-3s {
	  	-webkit-animation-delay: 0.9s;
	  	animation-delay: 0.9s;
	}