@charset "utf-8";

/***************animation**********************/
.fadeIn {
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	-ms-transition: all 1s ease;
}

.fadeIn[data-emergence=hidden] {
	opacity: 0;
}

.fadeIn[data-emergence=visible] {
	opacity: 1;
}
.fadeInUp {
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	-ms-transition: all 1s 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;
	-ms-transition: all 1s ease;
}

.fadeInRight_2 {
	-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: 2.5s;
	-webkit-animation-delay: 2.5s;
}

.fadeInRight_3 {
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	animation-delay: 5s;
	-webkit-animation-delay: 5s;
}

.fadeInRight[data-emergence=hidden],
.fadeInRight_2[data-emergence=hidden],
.fadeInRight_3[data-emergence=hidden] {
	opacity: 0;
	-webkit-transform: translateX(100px);
	-moz-transform: translateX(100px);
	-ms-transform: translateX(100px);
	-o-transform: translateX(100px);
	transform:  translateX(100px);}

.fadeInRight[data-emergence=visible],
.fadeInRight_2[data-emergence=visible],
.fadeInRight_3[data-emergence=visible] {
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0)
}

.fadeInLeft {
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease
}

.fadeInLeft_2 {
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	animation-delay:2.5s;
	-webkit-animation-delay: 2.5s;
}

.fadeInLeft_3 {
	-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: 5s;
	-webkit-animation-delay: 5s;
}

.fadeInLeft[data-emergence=hidden],
.fadeInLeft_2[data-emergence=hidden],
.fadeInLeft_3[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],
.fadeInLeft_2[data-emergence=visible],
.fadeInLeft_3[data-emergence=visible] {
	opacity: 1;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0)
}

.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_2 {
	-webkit-transition: all 2s ease;
	-o-transition: all 2s ease;
	-moz-transition: all 2s ease;
	transition: all 2s ease;
	-ms-transition: all 2s ease;
}
.fadeInDown_3 {
	-webkit-transition: all 3s ease;
	-o-transition: all 3s ease;
	-moz-transition: all 3s ease;
	transition: all 3s ease;
	-ms-transition: all 3s ease;
}
.fadeInDown[data-emergence=hidden],
.fadeInDown_2[data-emergence=hidden],
.fadeInDown_3[data-emergence=hidden]  {
	opacity: 0;
	-webkit-transform: translateY(-100px);
	-moz-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	transform: translateY(-100px)
}
.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(-100px);
	-moz-transform: translateY(-100px);
	-ms-transform: translateY(-100px);
	-o-transform: translateY(-100px);
	transform: translateY(-100px)
}
[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)
}
@media (max-width: 810px) {
	.fadeInRight[data-emergence=hidden],
	.fadeInRight_2[data-emergence=hidden],
	.fadeInRight_3[data-emergence=hidden] {
		opacity: 0;
		-webkit-transform: translateX(40px);
		-moz-transform: translateX(40px);
		-ms-transform: translateX(40px);
		-o-transform: translateX(40px);
		transform: translateX(40px);
	}
  }
  @media (max-width:610px) {
	.fadeInRight[data-emergence=hidden],
	.fadeInRight_2[data-emergence=hidden],
	.fadeInRight_3[data-emergence=hidden] {
		opacity: 0;
		-webkit-transform: translateX(30px);
		-moz-transform: translateX(30px);
		-ms-transform: translateX(30px);
		-o-transform: translateX(30px);
		transform: translateX(30px);
	}
  }
  @media (max-width:500px) {
	.fadeInRight[data-emergence=hidden],
	.fadeInRight_2[data-emergence=hidden],
	.fadeInRight_3[data-emergence=hidden] {
		opacity: 0;
		-webkit-transform: translateX(20px);
		-moz-transform: translateX(20px);
		-ms-transform: translateX(20px);
		-o-transform: translateX(20px);
		transform: translateX(20px);
}
  }
  @media (max-width:320px) {
	.fadeInRight[data-emergence=hidden],
	.fadeInRight_2[data-emergence=hidden],
	.fadeInRight_3[data-emergence=hidden] {
		opacity: 0;
		-webkit-transform: translateX(-50px);
		-moz-transform: translateX(-50px);
		-ms-transform: translateX(-50px);
		-o-transform: translateX(-50px);
		transform: translateX(-50px);
	}
  }
  @-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 buttonRoll {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50%,
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@keyframes buttonRoll {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50%,
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
	  -webkit-transform: translateY(0);
	  transform: translateY(0);
	}
  
	40% {
	  -webkit-transform: translateY(-30px);
	  transform: translateY(-30px);
	}
  
	60% {
	  -webkit-transform: translateY(-15px);
	  transform: translateY(-15px);
	}
  }
  
  @keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
	  -webkit-transform: translateY(0);
	  -ms-transform: translateY(0);
	  transform: translateY(0);
	}
  
	40% {
	  -webkit-transform: translateY(-30px);
	  -ms-transform: translateY(-30px);
	  transform: translateY(-30px);
	}
  
	60% {
	  -webkit-transform: translateY(-15px);
	  -ms-transform: translateY(-15px);
	  transform: translateY(-15px);
	}
  }
  
  .bounce {
	-webkit-animation-name: bounce;
	animation-name: bounce;
  }
  
  @-webkit-keyframes flash {
	0%, 50%, 100% {
	  opacity: 1;
	}
  
	25%, 75% {
	  opacity: 0;
	}
  }
  
  @keyframes flash {
	0%, 50%, 100% {
	  opacity: 1;
	}
  
	25%, 75% {
	  opacity: 0;
	}
  }
  
  .flash {
	-webkit-animation-name: flash;
	animation-name: flash;
  }

  @-webkit-keyframes img_shine {
	0% {
	  opacity: 0.5;
	}
  
	100% {
	  opacity: 0;
	}
  }
  
  @keyframes img_shine {
	0% {
	  opacity: 0.5;
	}
  
	100% {
	  opacity: 0;
	}
  }
  
  @-webkit-keyframes colorText {
	0% {
	  background-position: 0 50%;
	}
  
	50% {
	  background-position: 100% 50%;
	}
  
	100% {
	  background-position: 0 50%;
	}
  }
  
  @keyframes colorText {
	0% {
	  background-position: 0 50%;
	}
  
	50% {
	  background-position: 100% 50%;
	}
  
	100% {
	  background-position: 0 50%;
	}
  }

  @keyframes tit {

	0% {
	  -webkit-transform: translateY(2px);
	  transform: translateY(2px);
	  -webkit-transform: scale(0.8);
	  transform: scale(0.8);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: translateY(0);
	  transform: translateY(0);
	  -webkit-transform: scale(1);
	  transform: scale(1);
	  opacity: 1;
	}
  }
  
  @-webkit-keyframes tit {
  
	0% {
	  -webkit-transform: translateY(2px);
	  transform: translateY(2px);
	  -webkit-transform: scale(0.8);
	  transform: scale(0.8);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: translateY(0);
	  transform: translateY(0);
	  -webkit-transform: scale(1);
	  transform: scale(1);
	  opacity: 1;
	}
  }
  
.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: .7s;
	-webkit-animation-delay: .7s;
}
.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);
}

/* 掃光 */
  	@keyframes shinye {
      	0% {
          	transform: translateX(-150%) skewX(-205deg);
          	opacity: 1;
      	}

      	80% {
          	transform: translateX(200%) skewX(-205deg);
          	opacity: 1;
      	}

      	100% {
          	transform: translateX(200%) skewX(-205deg);
          	opacity: 0;
      	}
  	}
  	/* .className{
		content: '';
		background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
	  	background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
	  	background: linear-gradient(-45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 25%, white 50%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
	  	position: absolute;
	  	top: -50%;
	  	left: 0;
	  	width: 100%;
	  	height: 300%;
	  	-webkit-transition: 1s;
	  	-o-transition: 1s;
	  	transition: 1s;
	  	-webkit-animation: shinye 5s ease infinite;
	  	animation: shinye 5s ease infinite;
	} */

/* 由大縮小動態 */
	.scale[data-emergence=hidden] {
	    /* transform: scale(1.2, 1); */
	    transform: scale(1.5, 1.2);
	    opacity: 0;
	}
	.scale[data-emergence=visible] {
	    /* -webkit-transform: scale(1);
	    transform: scale(1); */
	    transform: scale(1);
	    opacity: 1;
	}
	.scale {
	    -webkit-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    transition: all 1s ease;
	}

/* 文字模糊動態 */
	@-webkit-keyframes animateBlur {
		from {
			opacity: 0;
			filter: blur(10px);
			letter-spacing: 0.3em;
		}
		to {
			opacity: 1;
			filter: blur(0px);
			letter-spacing: 0;
		}
	}
	@keyframes animateBlur {
		from {
			opacity: 0;
			filter: blur(10px);
			letter-spacing: 0.3em;
		}
		to {
			opacity: 1;
			filter: blur(0px);
			letter-spacing: 0;
		}
	}
	.animateBlur_An{
		opacity: 0;
	}
	.animateBlur_An[data-emergence=visible],
	[data-emergence=visible] .animateBlur_An{
		-webkit-animation: animateBlur 2s ease both;
    	animation: animateBlur 2s ease both;
	}

/*********emergence delay style********/
	.delay-1s[data-emergence=visible],
	.delay-1[data-emergence=visible],
	[data-emergence=visible] .delay-1s,
	[data-emergence=visible] .delay-1 {
	    transition-delay: .5s;
	}
	.delay-2s[data-emergence=visible],
	.delay-2[data-emergence=visible],
	[data-emergence=visible] .delay-2s,
	[data-emergence=visible] .delay-2 {
	    transition-delay: 1s;
	}
	.delay-3s[data-emergence=visible],
	.delay-3[data-emergence=visible],
	[data-emergence=visible] .delay-3s,
	[data-emergence=visible] .delay-3 {
	    transition-delay: 1.5s;
	}
	.delay-4s[data-emergence=visible],
	.delay-4[data-emergence=visible],
	[data-emergence=visible] .delay-4s,
	[data-emergence=visible] .delay-4 {
	    transition-delay: 2s;
	}
	.delay-5s[data-emergence=visible],
	.delay-5[data-emergence=visible],
	[data-emergence=visible] .delay-5s,
	[data-emergence=visible] .delay-5 {
	    transition-delay: 2.5s;
	}
	.delay-6s[data-emergence=visible],
	.delay-6[data-emergence=visible],
	[data-emergence=visible] .delay-6s,
	[data-emergence=visible] .delay-6 {
	    transition-delay: 3s;
	}
	.delay-7s[data-emergence=visible],
	.delay-7[data-emergence=visible],
	[data-emergence=visible] .delay-7s,
	[data-emergence=visible] .delay-7 {
	    transition-delay: 3.5s;
	}
	.delay-8s[data-emergence=visible],
	.delay-8[data-emergence=visible],
	[data-emergence=visible] .delay-8s,
	[data-emergence=visible] .delay-8 {
	    transition-delay: 4s;
	}
	.delay-9s[data-emergence=visible],
	.delay-9[data-emergence=visible],
	[data-emergence=visible] .delay-9s,
	[data-emergence=visible] .delay-9 {
	    transition-delay: 4.5s;
	}
	.delay-10s[data-emergence=visible],
	.delay-10[data-emergence=visible],
	[data-emergence=visible] .delay-10s,
	[data-emergence=visible] .delay-10 {
	    transition-delay: 5s;
	}