/*回TOP*/
#gotop { display: none; position:fixed; z-index:5; right:20px; bottom:30px;padding:10px 10px 3px 10px; border-radius:50px; font:12px/30px Verdana; text-align:center; color:#000;  background-color:rgba(255,255,255,0.7); cursor:pointer;
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
          transition: all 0.3s ease;}
#gotop:hover { padding-top:40px; background-color:#fff;} 
#gotop::before { content: ""; position:absolute; top:7px; left:18px; width: 0; height: 0; border: 4px solid #000; border-color: transparent transparent #000; }
	@media screen and (max-width:767px){
		#gotop { right:20px; bottom:65px; }
	}

/*雪花動畫*/ 
.flowerArea { 
	pointer-events: none; 
	width:100%;} 
	
.flowerArea .flowerbox_ { 
	z-index:-49; 
	position: fixed; 
	top:-200px; 
	background-size: 100%; 
	background-repeat: no-repeat;} 
	
.flowerArea .flowerbox_ img { 
	width: 100%; 
	height: auto;} 

.flowerArea .flowerbox_1 { 
	background-image: url(https://cdn.cybassets.com/s/files/16976/theme/55101/assets/img-event204_snow.png);} 
.flowerArea .flowerbox_2 { 
	background-image: url(https://cdn.cybassets.com/s/files/16976/theme/55101/assets/img-event204_snow.png);} 
.flowerArea .flowerbox_3 { 
	background-image: url(https://cdn.cybassets.com/s/files/16976/theme/55101/assets/img-event204_snow.png);} 
.flowerArea .flowerbox_4 { 
	background-image: url(https://cdn.cybassets.com/s/files/16976/theme/55101/assets/img-event204_snow.png);} 
/*
@media screen and (max-width:767px){ 
.flowerArea .flowerbox_ { z-index: 30;} 
} */

.flowerArea .flowerbox_ { 
   -webkit-transform-origin: 50% 100%; 
   transform-origin: 50% 100%; 
   -webkit-animation: snow-play 3s ease-in-out infinite alternate; 
   animation: snow-play 3s ease-in-out infinite alternate;} 
   
.flowerArea .flowerbox_2 { 
   -webkit-animation-delay:-1s; 
   animation-delay:-1s;}
   
.flowerArea .flowerbox_3 { 
   -webkit-animation-delay:-2s; 
   animation-delay:-2s;} 
   
.flowerArea .flowerbox_4 { 
   -webkit-animation-delay:-3s; 
   animation-delay:-3s;} 
   
@-webkit-keyframes snow-play { 
0% { -webkit-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);} 
50% { -webkit-transform:translateX(100%) rotate(20deg); transform:translateX(100%) rotate(20deg);} 
100% { -webkit-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);} 
} 
@keyframes snow-play { 
0% { -webkit-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);} 
50% { -webkit-transform:translateX(100%) rotate(20deg); transform:translateX(100%) rotate(20deg);} 
100% { -webkit-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg);} 
}

/*閃光*/
.thunder-play {
  -webkit-animation: thunder-play 4s infinite;
  animation: thunder-play 4s infinite;
}

@-webkit-keyframes thunder-play {
  0% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }

  95% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }

  97% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(200%);
    filter: brightness(200%);
  }

  98% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }

  99% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(200%);
    filter: brightness(200%);
  }

  100% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }
}

@keyframes thunder-play {
  0% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }

  92% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }

  94% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(200%);
    filter: brightness(200%);
  }

  96% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }

  98% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(200%);
    filter: brightness(200%);
  }

  100% {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter');
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
  }
}


/*飄動-上下*/
.float-play {
  -webkit-transform: translate(0, -10px);
  transform: translate(0, -10px);
  -webkit-animation: float-play 1.5s 1s infinite ease-in alternate;
  animation: float-play 1.5s 1s infinite ease-in alternate;
}

@-webkit-keyframes float-play {
  0% {
    -webkit-transform: translate(0, -10px);
  }

  100% {
    -webkit-transform: translate(0, 10px);
  }
}

@keyframes float-play {
  0% {
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px);
  }

  100% {
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
}

/*飄動-上下*/
.float.giveaway {
    position: absolute !important;
    animation: float-play-banner 1.5s 1s infinite ease-in alternate;
    z-index: 12;
    overflow: hidden;
    right: 308px;
    bottom: 158px;
}	

@-webkit-keyframes float-play-banner {
    0% {
        -webkit-transform: translate(0, -15px);
    }

    100% {
        -webkit-transform: translate(0, 15px);
    }
}

@keyframes float-play-banner {
    0% {
        transform: translate(0, -15px);
    }

    100% {
        transform: translate(0, 15px);
    }
}

/*浮動-上下*/
.uptodown-play { -webkit-animation:uptodown-play 1.5s infinite alternate;
				         animation:uptodown-play 1.5s infinite alternate;}
	@-webkit-keyframes uptodown-play { 
		0% { 
			-webkit-transform: translate(0,-10px);  
		} 
		100% { 
			-webkit-transform: translate(0,0);
		}
	}
	@keyframes uptodown-play { 
		0% { 
			transform: translate(0,-10px);  
		} 
		100% { 
			transform: translate(0,0);
		}
	}

/*浮動-下上*/
.downtoup-play { -webkit-animation:downtoup-play 1.5s infinite alternate;
				         animation:downtoup-play 1.5s infinite alternate;}
	@-webkit-keyframes downtoup-play { 
		0% { 
			-webkit-transform: translate(0,0);  
		} 
		100% { 
			-webkit-transform: translate(0,-10px);
		}
	}
	@keyframes downtoup-play { 
		0% { 
			transform: translate(0,0);  
		} 
		100% { 
			transform: translate(0,-10px);
		}
	}


/*轉轉3*/
.rotate3-play { -webkit-animation:rotate3-play 40s linear infinite ;
				       animation:rotate3-play 40s linear infinite ;}
	@keyframes rotate3-play {
	  100% { 
			transform: rotate(-180deg);
	  }
	}

/*背景飄上*/
.bgupup-play { -webkit-animation:bgupup-play 40s linear infinite ;
				       animation:bgupup-play 40s linear infinite ;}
	@keyframes bgupup-play {
	  100% { background-position: center -925px;
	  }
	}


/*心跳A*/
.heartbeat-play {-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name: heartbeat-play;  animation-name: heartbeat-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}
	@-webkit-keyframes heartbeat-play {   
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		}
	@keyframes heartbeat-play { 
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
	}

/*彈跳*/	
.bounce-play { -webkit-animation:bounce-play 3s linear infinite ;
				          animation:bounce-play 3s linear infinite ;}
	@-webkit-keyframes bounce-play {
	  0%, 5%, 12.5%, 20%, 25% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	  }
	
	  10% {
		-webkit-transform: translateY(-10%);
		transform: translateY(-10%);
	  }
	
	  15% {
		-webkit-transform: translateY(-5%);
		transform: translateY(-5%);
	  }
	}
	
	@keyframes bounce-play {
	  0%, 5%, 12.5%, 20%, 25% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	  }
	
	  10% {
		-webkit-transform: translateY(-10%);
		transform: translateY(-10%);
	  }
	
	  15% {
		-webkit-transform: translateY(-5%);
		transform: translateY(-5%);
	  }
	}

/*閃光1*/				  
.brightness1-play { -webkit-animation:brightness1-play 4s infinite ; animation:brightness1-play 4s infinite ;}
	@keyframes brightness1-play {
	  0% { 
		filter:brightness(100%);
	  }
	  92% { 
		filter:brightness(100%);
	  }
	  94% { 
		filter:brightness(200%);
	  }
	  96% { 
		filter:brightness(100%);
	  }
	  98% { 
		filter:brightness(200%);
	  }
	  100% { 
		filter:brightness(100%);
	  }
	}
	

/*==動畫==*/
.lefttoright{-webkit-animation-duration: 3s;  animation-duration: 3s;  -webkit-animation-name: lefttoright;  animation-name:lefttoright;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;  animation-timing-function: ease-in;}
@-webkit-keyframes lefttoright {
	 0% { transform: translate(0,0px); opacity:0  } 
	 25% { transform: translate(0,0px); opacity:0  } 
	 50%{opacity:1;filter:brightness(130%);}
	 75%{ transform: translate(-230px,0);opacity:0}
	 100%{ transform: translate(-230px,0);opacity:0}
}
@keyframes lefttoright { 
	 0% { transform: translate(0,0px); opacity:0  } 
	 25% { transform: translate(0,0px); opacity:0  } 
	 50%{opacity:1;filter:brightness(130%);}
	 75%{ transform: translate(-230px,0);opacity:0}
	 100%{ transform: translate(-230px,0);opacity:0}
}

.righttoleft{-webkit-animation-duration: 3s;  animation-duration: 3s;  -webkit-animation-name: righttoleft;  animation-name:righttoleft;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;  animation-timing-function: ease-in;}
@-webkit-keyframes righttoleft {
	 0% { transform: translate(0,0px); opacity:0  } 
	 25% { transform: translate(0,0px); opacity:0  } 
	 50%{opacity:1}
	 75%{ transform: translate(230px,0);opacity:0}
	 100%{ transform: translate(230px,0);opacity:0}
}
@keyframes righttoleft { 
	 0% { transform: translate(0,0px); opacity:0  } 
	 25% { transform: translate(0,0px); opacity:0  } 
	 50%{opacity:1}
	 75%{ transform: translate(230px,0);opacity:0}
	 100%{ transform: translate(230px,0);opacity:0}
}

/*微亮*/           
.minbright-play { -webkit-animation:minbright-play 3s linear infinite alternate; animation:minbright-play 3s linear infinite alternate ;}
        @-webkit-keyframes minbright-play {
          0% { filter:brightness(90%);  }
          100% { filter:brightness(120%);  }
        }
        @keyframes minbright-play {
          0% { filter:brightness(90%);  }
          100% { filter:brightness(120%);  }
        }
/*激亮*/           
.minbright-play1 { -webkit-animation:minbright-play1 1s linear infinite alternate; animation:minbright-play1 1s linear infinite alternate ;}
        @-webkit-keyframes minbright-play1 {
          0% { filter:brightness(120%);  }
          50% { filter:brightness(50%);}
          100% { filter:brightness(190%); }
        }
        @keyframes minbright-play1 {
          0% { filter:brightness(120%);  }
          50% { filter:brightness(50%);}
          100% { filter:brightness(190%); }
        }

/*閃光*/
.lightSweep { 
position: absolute; 
top: 0; 
left: 0; 
bottom: 0; 
right: 0; 
background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); 
overflow: hidden; 
z-index: 9; 
pointer-events: none;
  -webkit-filter: brightness(1.5);
  -webkit-mask-size: 300% 200%;
  -webkit-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  -webkit-transition: -webkit-mask-position;
  -webkit-animation-timing-function: linear;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-filter: brightness(1.5);
  -moz-mask-size: 300% 200%;
  -moz-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  -moz-transition: -webkit-mask-position;
  -moz-animation-timing-function: linear;
  -moz-transform: translate3d(0, 0, 0);
  -o-filter: brightness(1.5);
  -o-mask-size: 300% 200%;
  -o-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  -o-transition: -webkit-mask-position;
  -o-animation-timing-function: linear;
  -o-transform: translate3d(0, 0, 0);
  filter: brightness(1.5);
  mask-size: 300% 200%;
  mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  transition: -webkit-mask-position;
  animation-timing-function: linear;
  transform: translate3d(0, 0, 0);
  transition-duration: 3s;
  animation: move 2s ease-out infinite;
}

@keyframes move {
  from {
    -webkit-mask-position: 150% 0px;
    -moz-mask-position: 150% 0px;
    -o-mask-position: 150% 0px;
    mask-position: 150% 0px;
  }
  to {
    -webkit-mask-position: 0% 0px;
    -moz-mask-position: 0% 0px;
    -o-mask-position: 0% 0px;
    mask-position: 0% 0px;
  }
}

/*放大縮小*/
.zoominzoomout-play { -webkit-animation-duration: 0.7s;  animation-duration: 0.7s; animation-delay:-1s;  -webkit-animation-name: zoominzoomout-play;  animation-name: zoominzoomout-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;-webkit-animation-direction: alternate;animation-direction: alternate;}
	@-webkit-keyframes zoominzoomout-play {   
		0%  { -webkit-transform: scale(1); transform: scale(1);} 
		100%{ -webkit-transform: scale(0.95); transform: scale(0.95); }
		}
	@keyframes zoominzoomout-play { 
		0%  { -webkit-transform: scale(1); transform: scale(1); } 
		100%{ -webkit-transform: scale(0.95); transform: scale(0.95);}
	}
	
	
/*跳跳跳*/
.uptodown {
-webkit-animation:uptodown 0.8s infinite alternate;
animation:uptodown 0.8s infinite alternate;
}
@-webkit-keyframes uptodown { 

 0%    { 
 -webkit-transform: translate(0,0) ;
 }
 10%    { 
 -webkit-transform: translate(0,0) ;
 }
 15%    { 
 -webkit-transform: translate(0,-10px) ;
 }
 20%    { 
 -webkit-transform: translate(0,0) ;
 }
 100%  { 
 -webkit-transform: translate(0,0) ;
 }
	
}

@keyframes uptodown { 
 0%    { transform: translate(0,0) ;}
 10%    { transform: translate(0,0) ;}
 15%    { transform: translate(0,-10px) ;}
 20%    { transform: translate(0,0) ;}
 100%  { transform: translate(0,0) ;}
	
}

/*左右搖擺*/
.swing3{
 -webkit-animation:swing3 2s  infinite alternate;
  animation:swing3 2s  infinite alternate;}
@keyframes swing3 {
  20% {transform: rotate3d(0, 0, 1, -2deg);  }

  40% {transform: rotate3d(0, 0, 1, 1deg);  }

  60% {transform: rotate3d(0, 0, 1, -1deg); }

  80% {transform: rotate3d(0, 0, 1, 1deg);  }

  100% {transform: rotate3d(0, 0, 1, 0deg);}
}

/*按鈕浮動*/
.floatingCTA{
	animation-name: floatingCTA;
	-webkit-animation-name: floatingCTA;

	animation-duration: 5s;	
	-webkit-animation-duration: 5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floatingCTA {
	0% {
		transform: translateY(0%);	filter:brightness(100%)
	}
	50% {
		transform: translateY(10px);filter:brightness(120%)	
	}	
	100% {
		transform: translateY(0%);	filter:brightness(100%)
	}			


}

@-webkit-keyframes floating3 {
	0% {
		-webkit-transform: translateY(0%);filter:brightness(100%)	
	}
	50% {
		-webkit-transform: translateY(10px);filter:brightness(120%);
	}	
	100% {
		-webkit-transform: translateY(0%);	filter:brightness(100%)
	}

			
}