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

@keyframes circle{
  from {
	  transform:rotate(0);

  }
  50%{
	    transform:rotate(180deg);
	  }

  to {
  transform:rotate(360deg);

  }
}

@keyframes circle2{
  from {
	  transform:rotate(0);

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

  to {
  transform:rotate(-360deg);

  }
}


@keyframes cc{
  from {
	     transform: scale(1);
		 margin-left:30px;
		 margin-top:30px;

  }
  70%{
	     transform: scale(1.1);
		 margin-left:0px;
		 margin-top:0px;
	  }

  to {
	     transform: scale(1);
		 margin-left:30px;
		 margin-top:30px;

  }
}




@keyframes hand_left{
	
	 from {
transform-origin:right bottom;
transform:rotate(-30deg);

  }
  70%{
transform-origin:right bottom;
transform:rotate(-0deg);
	  }

  to {
transform-origin:right bottom;
transform:rotate(-30deg);

  }
}


@keyframes hand_right{
	
from {
transform-origin:left bottom;
transform:rotate(20deg);

  }

  
  40% {
transform-origin:left bottom;
transform:rotate(0deg);
  }

  to {
transform-origin:left bottom;
transform:rotate(20deg);

  }
}


@keyframes foot_left{
	
from {
transform-origin:left top;
transform:rotate(20deg);

  }

  
  60% {
transform-origin:left top;
transform:rotate(0deg);
  }

  to {
transform-origin:left top;
transform:rotate(20deg);

  }
}


@keyframes foot_left2{
	
from {
transform-origin:right top;
transform:rotate(5deg);

  }

  
  60% {
transform-origin:right top;
transform:rotate(-10deg);
  }

  to {
transform-origin:right top;
transform:rotate(5deg);

  }
}


@keyframes foot_right{
	
from {
transform-origin:left center;
transform:rotate(60deg);

  }

  
  60% {
transform-origin:left center;
transform:rotate(15deg);
  }

  to {
transform-origin:left center;
transform:rotate(60deg);

  }
}

@keyframes foot_right2{
	
from {
transform-origin:left top;
transform:rotate(0deg);

  }

  
  60% {
transform-origin:left top;
transform:rotate(10deg);
  }

  to {
transform-origin:left top;
transform:rotate(0deg);

  }
}



@keyframes jump{
	
from {
transform:rotate(15deg);
	top: 55%;

  }

  
  60% {
transform:rotate(0deg);
top: 50%;
  }

  to {
transform:rotate(15deg);
	top: 55%;

  }
}








body {
	background-color: #4ab8d1;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family:"微軟正黑體",Arial;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

html {
  font-size: 62.5% !important;
}
@media screen and (max-width: 980px) {



  html {
    font-size: 58% !important;
  }
}
@media screen and (max-width: 480px) {
  html {
    font-size: 61% !important;
  }
}









img{
	width:100%;
	height:auto;
	}

#main {
	height: 100%;
	min-height: 85vh;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
}


#main .action1{
	width: 60%;
	height: auto;
	pointer-events: none;
	position: relative;
	overflow: hidden;
}



@media screen and (max-width: 768px) {
#main .action1{
	width: 80%;
	
}

}
@media screen and (max-width: 480px) {
#main .action1{
	width: 100%;

}
}








#main .action1 .a ,#main .action1 .b,#main .action1 .b1,#main .action1 .b2,#main .action1 .b3,#main .action1 .a1,#main .action1 .c{
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;

}

#main .action1 .a {
z-index:200;
	-webkit-animation: circle 15s both cubic-bezier(0, 0, 1, 1);
    animation: circle 15s both cubic-bezier(0, 0, 1, 1);
	 animation-iteration-count: infinite;


}


#main .action1 .c {
z-index:190;
	-webkit-animation: cc 5s both ease-in-out;
    animation: cc 5s both ease-in-out;
	 animation-iteration-count: infinite;


}


#main .action1 .a1 {
z-index:205;
}



#main .action1 .b {
z-index:100;
opacity:0.8;
	-webkit-animation: circle2 15s both cubic-bezier(0, 0, 1, 1);
    animation: circle2 15s both cubic-bezier(0, 0, 1, 1);
	 animation-iteration-count: infinite;
}
#main .action1 .b1 {
z-index:99;
opacity:0.8;
	-webkit-animation: circle 12s both cubic-bezier(0, 0, 1, 1);
    animation: circle 12s both cubic-bezier(0, 0, 1, 1);
	 animation-iteration-count: infinite;
}

#main .action1 .b2 {
z-index:98;
opacity:0.8;
	-webkit-animation: circle2 15s both cubic-bezier(0, 0, 1, 1);
    animation: circle2 15s both cubic-bezier(0, 0, 1, 1);
	 animation-iteration-count: infinite;
}

#main .action1 .b3 {
z-index:97;
opacity:0.8;
	-webkit-animation: circle 12s both cubic-bezier(0, 0, 1, 1);
    animation: circle 12s both cubic-bezier(0, 0, 1, 1);
	 animation-iteration-count: infinite;
}
#main .action1 .textpart {
	width: 64%;
	position: absolute;
	left: 18%;
	top: 30%;
	z-index: 400;
}

.kids1 {
	width: 12%;
	position: absolute;
	left: 35%;
	z-index:350;
			-webkit-animation: jump 1.5s both ease-in-out;
    animation:jump 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}



.kids2 {
	width: 12%;
	position: absolute;
	right: 35%;
	z-index:350;
		-webkit-animation: jump 1.5s both ease-in-out;
    animation:jump 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
	 animation-delay:1s;
}

.kids2 .hand_left {
	width: 55%;
	position: absolute;
	    right: 58%;
    top: 44%;
	z-index:-1;
		-webkit-animation: hand_left 1.5s both ease-in-out;
    animation: hand_left 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}


.kids2 .hand_right {
	width: 55%;
	position: absolute;
	    left: 60%;
    top: 44%;
	z-index:-1;
		-webkit-animation: hand_right 1.5s both ease-in-out;
    animation: hand_right 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}



.kids1 .hand_left {
	width: 50%;
	position: absolute;
	    right: 70%;
    top: 38%;
	z-index:349;
		-webkit-animation: hand_left 1.5s both ease-in-out;
    animation: hand_left 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}

.kids1 .hand_right {
	width: 55.7%;
	position: absolute;
	    left: 45%;
    top: 53%;
    z-index: -1;
			-webkit-animation: hand_right 1.5s both ease-in-out;
    animation: hand_right 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}


.kids2 .foot_left {
	width: 40%;
	position: absolute;
	 right: 52%;
    top: 92%;
    z-index: -1;
	-webkit-animation: foot_left2 1.5s both ease-in-out;
    animation: foot_left2 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}

.kids2 .foot_right {
	width: 40%;
	position: absolute;
	left: 52%;
    top: 92%;
    z-index: -1;
	-webkit-animation: foot_right2 1.5s both ease-in-out;
    animation: foot_right2 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}



.kids1 .foot_left {
	width: 35.8%;
	position: absolute;
	 right: 28%;
    top: 88%;
    z-index: -1;
	-webkit-animation: foot_left 1.5s both ease-in-out;
    animation: foot_left 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}

.kids1 .foot_right {
	width: 66%;
	position: absolute;
	      left: 45%;
    top: 82%;
    z-index: -1;
	-webkit-animation: foot_right 1.5s both ease-in-out;
    animation: foot_right 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}

.kids2 .hair_left {
	width: 35%;
	position: absolute;
	 right: 79%;
    bottom: 88%;
    z-index: -1;
	-webkit-animation: hand_left 1.5s both ease-in-out;
    animation: hand_left 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}

.kids2 .hair_right {
	width: 35%;
	position: absolute;
	      left: 80%;
    bottom: 85%;
    z-index: -1;
	-webkit-animation: hand_right 1.5s both ease-in-out;
    animation: hand_right 1.5s both ease-in-out;
	 animation-iteration-count: infinite;
}
#main .action1 .enter {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 3.6rem;
	line-height: 48px;
	font-weight: bold;
	color: #FFF;
	position: absolute;
	z-index: 500;
	right: 0%;
	width:100%;
	bottom: 20%;
	pointer-events: auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content:center;
}

#main .action1 .enter a{
	color: #FFF;
	font-family: "微軟正黑體", Arial;
	font-size: 2.4rem;
	line-height: 30px;
	margin-right: 10px;
	margin-left: 10px;
	
	padding-right: 15px;
	padding-left: 15px;
	padding-top: 5px;
	padding-bottom: 5px;
	display:table;
	text-align:center;
	border-radius:15px;
}

#main .action1 .enter p{
	
font-size: 1.4rem;
line-height: 30px;
	
margin: 0;
}
#main .action1 .enter a:first-child{
	background-color:#C00;
}
#main .action1 .enter a:nth-child(2){
	background-color: #06F;
}

#main .action1 .enter a:nth-child(3){
	background-color: #FC0;
}


#main .action1 .enter a:hover{
	color: #FFC;
}




.infomation {
	font-size: 1.4rem;
	line-height: 24px;
	color: #FFF;
		-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: rgba(74,184,209,0.8);
	height: 50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.infomation>div {
	max-width: 1600px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	font-family: "微軟正黑體", Arial;
	text-align: center;
}
.logo {
	position: absolute;
	left: 0px;
	top: 0px;
	width:20%;
	max-width:180px;
	z-index:500;
	margin:20px;
}
@media screen and (max-width: 768px) {
#main .action1 .enter a {
	font-size: 2.0rem;
	line-height: 30px;
}
#main .action1 .enter {
    bottom: 10%;
}
}
@media screen and (max-width: 480px) {
#main .action1 .enter a{
	font-size: 1.6rem;
	line-height: 22px;
}
#main .action1 .enter {
    bottom: 0%;
}

.logo {
	width:25%;
	margin:10px;
}
}