@charset "utf-8";
/* CSS Document */

/*手機標*/
@media screen and (max-width: 767px) {
	.Area_logo {filter:none;}
}

/*版頭動畫控制*/
.an_load {}
.an_load.an_paused  { -webkit-animation-play-state:paused  !important; -moz-animation-play-state:paused  !important; -ms-animation-play-state:paused  !important; -o-animation-play-state:paused  !important; animation-play-state:paused  !important;}
.an_load.an_running { -webkit-animation-play-state:running !important; -moz-animation-play-state:running !important; -ms-animation-play-state:running !important; -o-animation-play-state:running !important; animation-play-state:running !important;}


.floatBox .dateArea ul{transform: translate(30px, 10px);}
.floatBox .dateArea li{width: 20%;}
.floatBox .title{color: #a9dcff;    border-bottom: 2px solid #a9dcff}
.floatBox .title3{ color:#fff;}
.floatBox .dateArea > div{ border: none;}
@media screen and (max-width: 767px) {
	#ref_voteBox .floatBox{  width: 90%; margin: 0 auto;}
	.floatBox .box_card .btn {z-index: 1; position: relative; margin: 3% auto;width: 85%; left: 0}
	
}

.Area_top .sunn {position: absolute;top: 60%;left: -20px; width: 20%;}
svg {color:#fff;}
svg #sun {
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-name: rotate;
  transform-origin: 50% 50%;
}
svg line {
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 11px;
  stroke-dashoffset: 4px;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0;
  animation-iteration-count: infinite;
}
svg .even line {
  animation-name: pulse;
  color:#fff;
}
svg .even line:nth-child(1) {
  animation-delay: 0.3s;
}
svg .even line:nth-child(2) {
  animation-delay: 0.2s;
}
svg .even line:nth-child(3) {
  animation-delay: 0.4s;
}


svg .odd line {
  animation-name: pulse-rev;
  stroke-dashoffset: 11px;
	color:#fff;
}
svg .odd line:nth-child(1) {
  animation-delay: 0.1s;
}
svg .odd line:nth-child(2) {
  animation-delay: 0.2s;
}
svg .odd line:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes pulse {
  0% {
    stroke-dashoffset: 0px;
  }
  50% {
    stroke-dashoffset: 6px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse-rev {
  0% {
    stroke-dashoffset: 6px;
  }
  50% {
    stroke-dashoffset: 0px;
  }
  100% {
    stroke-dashoffset: 6px;
  }
}

/*轉轉3*/	


.rotate3-play { -webkit-animation:rotate3-play 2s linear infinite ;
				        animation:rotate3-play 2s linear infinite ;
				-webkit-animation-timing-function: ease;
						animation-timing-function: ease;}	
											
	@keyframes rotate3-play {
	  100% { 
			transform: rotate(360deg);
	  }
	}

.rotate2-play { -webkit-animation:rotate3-play 3s linear infinite ;
				        animation:rotate3-play 3s linear infinite ;
				-webkit-animation-timing-function: ease;
						animation-timing-function: ease;}	
											
	@keyframes rotate2-play {
	  100% { 
			transform: rotate(-360deg);
	  }
	}

/*斜線來回*/

.go1 { -webkit-animation:go1 8s linear infinite ;
			   animation:go1 8s linear infinite ;}	
	}
@-webkit-keyframes go1{
	  0%  {opacity:0;-webkit-transform:none;transform:none}
	  10%  {opacity:1;-webkit-transform:translate(-600px, 600px);transform:translate(-600px, 600px)}
	 90%  {opacity:1;-webkit-transform:translate(-600px, 600px);transform:translate(-600px, 600px)}
	 100%  {opacity:0;-webkit-transform:translate(-400px, 600px);transform:translate(-400px, 600px)}
}
@keyframes go1{
	  0%  {opacity:0;-webkit-transform:none;transform:none}
	  10%  {opacity:1;-webkit-transform:translate(-600px, 600px);transform:translate(-600px, 600px)}
	 90%  {opacity:1;-webkit-transform:translate(-600px, 600px);transform:translate(-600px, 600px)}
	 100%  {opacity:0;-webkit-transform:translate(-400px, 600px);transform:translate(-400px, 600px)}
}

.go2 { -webkit-animation:go2 8s linear infinite ;
			   animation:go2 8s linear infinite ;}	
	}
@-webkit-keyframes go2{
	  0%  { opacity:0;-webkit-transform:none;transform:none}
	  15%  { opacity:1;-webkit-transform:translate(600px,0px);transform:translate(600px,0px)}
     85%  {opacity:1;-webkit-transform:translate(600px,0px));transform:translate(600px,0px)}
	 100%  {opacity:0;-webkit-transform:translate(-1300px, 0px);transform:translate(-1300px,0px)}
}

@keyframes go2{
	  0%  { opacity:0;-webkit-transform:opacity:0;none;opacity:0;transform:none}
	  15%  { opacity:1;-webkit-transform:translate(600px,0px);transform:translate(600px,0px)}
     85%  {opacity:1;-webkit-transform:translate(600px,0px));transform:translate(600px,0px)}
	 100%  {opacity:0;-webkit-transform:translate(-1300px, 0px); transform:translate(-1300px,0px)}
}

.go3 { -webkit-animation:go3 8s linear infinite ;
			   animation:go3 8s linear infinite ;}	
	}
@-webkit-keyframes go3{
	  0%  { -webkit-transform:none;transform:none}
	  50%  { -webkit-transform: translate3d(0,-120px,0)}
     100%  {-webkit-transform: translate3d(0,0,0)}
}
@keyframes go3{
	  0%  { -webkit-transform:none;transform:none}
	  50%  { -webkit-transform: translate3d(0,-120px,0)}
     100%  {-webkit-transform: translate3d(0,0,0)}
}


.go4 { 
		-mos-animation-name: go4 6s linear infinite ;
		-ms-animation-name: go4 6s linear infinite ;
		-o-animation-name: go4 6s linear infinite ;	
		-webkit-animation:go4 6s linear infinite ;
	}
@-webkit-keyframes go4{
	  0%  { -webkit-transform:none;transform:none}
	  50%  { -webkit-transform: translate3d(0,-140px,0)}
     100%  {-webkit-transform: translate3d(0,0,0)}
}
@keyframes go4{
	  0%  { -webkit-transform:none;transform:none}
	  50%  { -webkit-transform: translate3d(0,-140px,0)}
     100%  {-webkit-transform: translate3d(0,0,0)}
}


.go5 { -webkit-animation:go5 6s linear infinite ;
			   animation:go5 6s linear infinite ;}	
	}
@-webkit-keyframes go5{
	  0%  {opacity:0;-webkit-transform:none;transform:none}
	  15%  {opacity:1;-webkit-transform:translate(-560%, 560%);transform:translate(-560%, 560%)}
	 90%  {opacity:1;-webkit-transform:translate(-560%, 560%);transform:translate(-560%, 560%)}
	 100%  {opacity:0;-webkit-transform:translate(-160%, 560%);transform:translate(-160%, 560%)}
}
@keyframes go5{
	  0%  {opacity:0;-webkit-transform:none;transform:none}
	  15%  {opacity:1;-webkit-transform:translate(-560%, 560%);transform:translate(-560%, 560%)}
	 90%  {opacity:1;-webkit-transform:translate(-560%, 560%);transform:translate(-560%, 560%)}
	 100%  {opacity:0;-webkit-transform:translate(-160%, 560%);transform:translate(-160%, 560%)}
}

.go6 { 
		-mos-animation-name: go6 6s linear infinite ;
		-ms-animation-name:  go6 6s linear infinite ;
		-o-animation-name:   go6 6s linear infinite ;	
		-webkit-animation:   go6 6s linear infinite ;
	}
@-webkit-keyframes g6{
	  0%  { -webkit-transform:none;transform:none}
	  50%  { -webkit-transform: translate3d(0,-300%,0)}
     100%  {-webkit-transform: translate3d(0,0,0)}
}
@keyframes go6{
	  0%  { -webkit-transform:none;transform:none}
	  50%  { -webkit-transform: translate3d(0,-300%,0)}
     100%  {-webkit-transform: translate3d(0,0,0)}
}

.go7 { -webkit-animation:go7 6s linear infinite ;
			   animation:go7 6s linear infinite ;}	
	}
@-webkit-keyframes go7{
	  0%  { opacity:0;-webkit-transform:none;transform:none}
	  15%  { opacity:1;-webkit-transform:translate(300%,0%);transform:translate(300%,0%)}
     85%  {opacity:1;-webkit-transform:translate(300%,0%);transform:translate(300%,0%)}
	 100%  {opacity:0;-webkit-transform:translate(-300%,0%);transform:translate(-300%,0%)}
}

@keyframes go7{
	  0%  { opacity:0;-webkit-transform:none;transform:none}
	  15%  { opacity:1;-webkit-transform:translate(300%,0%);transform:translate(300%,0%)}
     85%  {opacity:1;-webkit-transform:translate(300%,0%);transform:translate(300%,0%)}
	 100%  {opacity:0;-webkit-transform:translate(-300%,0%);transform:translate(-300%,0%)}}

/*bee-play2*/
.bee-play2 { transition: transform 0.1s;}
.bee-play2 img{ transform-origin: center bottom;
		-webkit-animation:bee-play2 8s ease infinite;
		-mos-animation:   bee-play2 8s ease infinite;
		-ms-animation:    bee-play2 8s ease infinite;
		-o-animation:     bee-play2 8s ease infinite;}

		@-webkit-keyframes bee-play2 { 
			0%   { opacity:0.5;	-webkit-transform:scaleY(3);}  
			10%  { opacity:1;	-webkit-transform:scaleY(2);} 
			40%  { opacity:0.5;	-webkit-transform:scaleY(10);} 
			60%  { opacity:1;	-webkit-transform:scaleY(1);} 
			80% { opacity:0.5;	-webkit-transform:scaleY(2);} 
			100% { opacity:0.5;	-webkit-transform:scaleY(8);} 
		}
		@keyframes bee-play2 { 
			0%   { opacity:0.5;	-webkit-transform:scaleY(3);}  
			10%  { opacity:1;	-webkit-transform:scaleY(2);} 
			40%  { opacity:0.5;	-webkit-transform:scaleY(10);} 
			60%  { opacity:1;	-webkit-transform:scaleY(1);} 
			80% { opacity:0.5;	-webkit-transform:scaleY(2);} 
			100% { opacity:0.5;	-webkit-transform:scaleY(8);} 
		}

/*bee-play*/
.bee-play { transition: transform 0.1s;}
.bee-play img{ transform-origin: center bottom;
		-webkit-animation:bee-play 8s ease infinite;
		-mos-animation:bee-play 8s ease infinite;
		-ms-animation:bee-play 8s ease infinite;
		-o-animation:bee-play 8s ease infinite;}

		@-webkit-keyframes bee-play { 
			0%   { opacity:1;	-webkit-transform:scaleY(1);}  
			10%  { opacity:0.5;	-webkit-transform:scaleY(3);} 
			40%  { opacity:1;	-webkit-transform:scaleY(0.5);} 
			60%  { opacity:0.3;	-webkit-transform:scaleY(14);} 
			80% { opacity:0.5;	-webkit-transform:scaleY(5);} 
			100% { opacity:1;	-webkit-transform:scaleY(1);} 
		}
		@keyframes bee-play { 
			0%   { opacity:1;	-webkit-transform:scaleY(1);}  
			10%  { opacity:0.5;	-webkit-transform:scaleY(3);} 
			40%  { opacity:1;	-webkit-transform:scaleY(0.5);} 
			60%  { opacity:0.3;	-webkit-transform:scaleY(14);} 
			80% { opacity:0.5;	-webkit-transform:scaleY(5);} 
			100% { opacity:1;	-webkit-transform:scaleY(1);} 
		}
.uptodown {-webkit-animation:uptodown 7s linear infinite ;  animation:uptodown 7s linear infinite ; }
@-webkit-keyframes uptodown { 0% { opacity:0;transform: translate(0,0);  } 100%{ opacity:1;transform: translate(0,-500px);}}
@keyframes uptodown { 0% { opacity:0;transform: translate(0,0);  } 100%{ opacity:1;transform: translate(0,-500px);}}

.downtoup  {-webkit-animation:downtoup 7s linear infinite ;  animation:downtoup 7s linear infinite ; }
@-webkit-keyframes downtoup { 0% { opacity:0.7;transform: translate(0,-300px);  } 100%{ opacity:0;transform: translate(0,0);}}
@keyframes downtoup { 0% { opacity:0.7;transform: translate(0,-300px);  } 100%{ opacity:0;transform: translate(0,0);}}

.lefttoup  {-webkit-animation:lefttoup 7s linear infinite ;  animation:lefttoup 7s linear infinite ; }
@-webkit-keyframes lefttoup { 0% { opacity:0.7;transform: translate(-300px,0);  } 100%{ opacity:0;transform: translate(0,0);}}
@keyframes lefttoup { 0% { opacity:0.7;transform: translate(-300px,0);  } 100%{ opacity:0;transform: translate(0,0);}}

/*fadeInUp*/
.fadeInUp{
	animation-name:fadeInUp;
	-webkit-animation-name:fadeInUp;
	
	animation-duration: 3s;	
	-webkit-animation-duration: 6s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
}

@-webkit-keyframes fadeInUp{
	0%{opacity:0;-webkit-transform:none;transform:none}
	50%{opacity:0;-webkit-transform:translate3d(0,0.10%,0);transform:translate3d(0,10%,0)}
	100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{
	0%{opacity:0;-webkit-transform:none;transform:none}
	50%{opacity:0;-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}
	100%{opacity:1;-webkit-transform:none;transform:none}
}
/*fadeInUp2*/
.fadeInUp2{
	animation-name:fadeInUp2;
	-webkit-animation-name:fadeInUp2;
	animation-duration: 5s;	
	-webkit-animation-duration: 1s;
	
	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	}
@-webkit-keyframes fadeInUp2{
	0%{opacity:0;-webkit-transform:none;transform:none}
	10%{opacity:0;-webkit-transform:translate3d(5%,0,0);transform:translate3d(5%,0,0)}
	100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp2{
	0%{opacity:0;-webkit-transform:none;transform:none}
	10%{opacity:0;-webkit-transform:translate3d(5%,0,0);transform:translate3d(5%,0,0)}
	100%{opacity:1;-webkit-transform:none;transform:none}
}
/*
==============================================
fadeInUp4
==============================================
*/

.fadeInUp4{
	animation-name:fadeInUp4;
	-webkit-animation-name:fadeInUp4;
	
	animation-duration: 3s;	
	-webkit-animation-duration: 5s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
	}

@-webkit-keyframes fadeInUp4{
	0%{
		opacity:0;-webkit-transform:none;transform:none
		}
	50%{
		opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)
		}
	100%{
		opacity:1;-webkit-transform:none;transform:none
		}
}
@keyframes fadeInUp4{
	0%{
		opacity:0;-webkit-transform:none;transform:none
		}
	50%{
		opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)
		}
	100%{
		opacity:1;-webkit-transform:none;transform:none
		}
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
