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

body {
   overflow-x:hidden;
}
footer {
	width:100%;
	background:#171313;
	background-image: url(http://sick-game.com/img/footer_bg.jpg);
}
#bg{
	position:fixed;
	top:0px;
	z-index:-10;

}
#bg_god{
	position:absolute;
	background-image: url(http://sick-game.com/img/bg_bg.png);
	background-repeat: repeat-x;
	width:100%;
	height: 847px;
	top:-60px;
	z-index:-20;
}



#bg_light{
	position:absolute;
	top:0px;
	z-index:-5;
	width:100%;
	opacity:0.2;
}
#bg_big_cloud{
	position:fixed;
	top:0px;
	z-index:9;
	width:100%;
}
#bg_big_black{
	position:fixed;
	top:0px;
	z-index:10;
	width:100%;
}
#logo{
	position:inherit;
	top:70px;
	width:100%;
}
#logo_nomal{
	position:inherit;
	top:20px;
	width:100%;
}
#ga_icon{
	position:inherit;
	top:40px;
	width:100%;
}
#cloud1{
	margin-top:100px;
	margin-left:-350px;
	width:100%;
	z-index:-5;
}
#cloud2{
	margin-top:300px;
	margin-left:-500px;
	width:100%;
	z-index:-6;
}
#cloud3{
	margin-top:100px;
	margin-left:300px;
	width:100%;
	z-index:-7;
}
#cloud4{
	margin-top:330px;
	margin-left:400px;
	width:100%;
	z-index:-8;
}
#cloud5{
	margin-top:-130px;
	margin-left:-500px;
	width:100%;
	z-index:10;
}
#cloud6{
	position:absolute;
	top:70px;
	left: 50%;
	margin-left: -469px;
	z-index:-10;
}
#cloud7{

	margin-top:70px;
	margin-left: -110px;
	z-index:-2;
}
#cloud8{
	position:absolute;
	margin-top:70px;
	margin-left:600px;
	left: 50%;
	z-index:-2;
	/*position:inherit;
	margin-top:70px;
	right:0px;
	margin-right:600px;
	z-index:-3;*/
}
#shadow{
	position:fixed;
	top:0px;
	left: 0px;
	z-index:10;
}
#shadow2{
	position:fixed;
	top:0px;
	right: 0px;	
	z-index:10;
	-moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
}
#ga_icon2{
	position:inherit;
	margin-top:80px;
}
#sorry{
	position:inherit;
	top:60px;
}
#pic7{
	top:160px;
}
#QRcode{
	color: #2da8ef;
	position:inherit;
	font-weight: 800;
	font-size:1.2em;
	top:90px;
}
.dialog{
	width:100%;

	height:80px;
	font-family:"微軟正黑體";
	font-size:1.2em;
}

.greenDialog {
  position:absolute;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#c9ef85), to(#89d044));
  background:-moz-linear-gradient(#c9ef85, #89d044);
  background:-o-linear-gradient(#c9ef85, #89d044);
  background:linear-gradient(#c9ef85, #89d044);
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
  right:50px;
  box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  -moz-box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  -webkit-box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  
  
}

.greenDialog p {font-size:1.25em;}
.greenDialog:before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:30px;
  right:-7px;
  height:30px;
  border-right:20px solid #b9e774;
  background:#b9e774;
  -webkit-border-bottom-right-radius:80px 80px;
  -moz-border-radius-bottomright:80px 80px;
  border-bottom-right-radius:80px 80px;
  -webkit-transform:translate(0, -2px);
  -moz-transform:translate(0, -2px);
  -ms-transform:translate(0, -2px);
  -o-transform:translate(0, -2px);
  transform:translate(0, -2px); 
  box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);
  -moz-box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);
  -webkit-box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);

  
}
.greenDialog:after {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:43px;
  right:-42px;
  width:40px;
  height:20px;
  background:#2e2538;
  -webkit-border-bottom-right-radius:50px 50px;
  -moz-border-radius-bottomright:50px 50px;
  border-bottom-right-radius:50px 50px;
  -webkit-transform:translate(-30px, -2px);
  -moz-transform:translate(-30px, -2px);
  -ms-transform:translate(-30px, -2px);
  -o-transform:translate(-30px, -2px);
  transform:translate(-30px, -2px);
}


.whiteDialog {
  position:absolute;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c;
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9fafa), to(#dbdddf));
  background:-moz-linear-gradient(#f9fafa, #dbdddf);
  background:-o-linear-gradient(#f9fafa, #dbdddf);
  background:linear-gradient(#f9fafa, #dbdddf);
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
  left:30px;
  margin-left:0px;
  box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  -moz-box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
  -webkit-box-shadow:0px 2px 0px rgba(0%,0%,0%,0.7);
}
.whiteDialog p {font-size:1.25em;}
.whiteDialog:before {
  content:"";
  position:absolute;
  z-index:-1;
  bottom:30px;
  left:-7px;
  height:30px;
  border-left:20px solid #f3f4f5;
  background:#f3f4f5;
  -webkit-border-bottom-left-radius:80px 80px;
  -moz-border-radius-bottomleft:80px 80px;
  border-bottom-left-radius:80px 80px;
  -webkit-transform:translate(0, -2px);
  -moz-transform:translate(0, -2px);
  -ms-transform:translate(0, -2px);
  -o-transform:translate(0, -2px);
  transform:translate(0, -2px); 
  box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);
  -moz-box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);
  -webkit-box-shadow:0px 1px 2px rgba(0%,0%,0%,0.7);

  
}
.whiteDialog:after {
 content:"";
  position:absolute;
  z-index:-1;
  bottom:43px;
  left:20px;
  width:40px;
  height:20px;
  background:#2e2538;
  -webkit-border-bottom-left-radius:50px 50px;
  -moz-border-radius-bottomleft:50px 50px;
  border-bottom-left-radius:50px 50px;
  -webkit-transform:translate(-30px, -2px);
  -moz-transform:translate(-30px, -2px);
  -ms-transform:translate(-30px, -2px);
  -o-transform:translate(-30px, -2px);
  transform:translate(-30px, -2px);
}
#cont{
	position:inherit;
	top:100px;
	
	width:100%;
}
#mail_{
	position:inherit;
	margin-left:-310px;
	padding-top: 50px;
	max-width:600px;

}
label{
	font:"微軟正黑體";
	color:#FFF;
}

#big_cloudOut{
	animation: cloudOut 4s  forwards;
	-moz-animation: cloudOut 4s  forwards;	/* Firefox */
	-webkit-animation: cloudOut 4s  forwards;	/* Safari 和 Chrome */
	-o-animation: cloudOut 4s  forwards;	/* Opera */
	/*-webkit-animation-fill-mode:forwards;*/
}

@keyframes cloudOut
{
	0%   {margin-top:0px; opacity:100}
	10%   {margin-top:0px; opacity:10}
	100% {margin-top:0px; opacity:0}
}

@-webkit-keyframes cloudOut
{
	0%   {margin-top:0px; opacity:100}
	10%   {margin-top:0px; opacity:10}
	100% {margin-top:0px; opacity:0}
}
@-moz-keyframes cloudOut
{
	0%   {margin-top:0px; opacity:100}
	10%   {margin-top:0px; opacity:10}
	100% {margin-top:0px; opacity:0}
}
@-o-keyframes cloudOut
{
	0%   {margin-top:0px; opacity:100}
	10%   {margin-top:0px; opacity:10}
	100% {margin-top:0px; opacity:0}
}
#big_blackOut{
	animation: blackOut 3s  forwards;
	-moz-animation: blackOut 3s  forwards;	/* Firefox */
	-webkit-animation: blackOut 3s  forwards;	/* Safari 和 Chrome */
	-o-animation: blackOut 3s  forwards;	/* Opera */
	/*-webkit-animation-fill-mode:forwards;*/
}

@keyframes blackOut
{
	0%   {margin-top:0px; opacity:100}
	10%   {margin-top:0px; opacity:10}
	100% {margin-top:0px; opacity:0}
}

@-webkit-keyframes blackOut
{
	0%   {margin-top:0px; opacity:100}
	10%   {margin-top:0px; opacity:10}
	100% {margin-top:0px; opacity:0}
}
@-moz-keyframes blackOut
{
	0%   {margin-top:0px; opacity:100}
	10%   {margin-top:0px; opacity:10}
	100% {margin-top:0px; opacity:0}
}
@-o-keyframes blackOut
{
	0%   {margin-top:0px; opacity:100}
	10%   {margin-top:0px; opacity:10}
	100% {margin-top:0px; opacity:0}
}

#drop_tip{
	position:fixed;
	color:#F00;
	left:50%;
	bottom:20px;
	margin-left:-53px;
	z-index: 8;
	animation: rollOn 3s infinite;
	-moz-animation: rollOn 3s infinite;	/* Firefox */
	-webkit-animation: rollOn 3s infinite;	/* Safari 和 Chrome */
	-o-animation: rollOn 3s infinite;	/* Opera */
	/*-webkit-animation-fill-mode:forwards;*/
}

@keyframes rollOn
{
	0%   {margin-top:20px; opacity:0}
	50% {margin-top:0px; opacity:100}
	100% {margin-top:0px; opacity:0}
}

@-webkit-keyframes rollOn
{
	0%   {margin-top:20px; opacity:0}
	50% {margin-top:0px; opacity:100}
	100% {margin-top:0px; opacity:0}
}
@-moz-keyframes rollOn
{
	0%   {margin-top:20px; opacity:0}
	50% {margin-top:0px; opacity:100}
	100% {margin-top:0px; opacity:0}
}
@-o-keyframes rollOn
{
	0%   {margin-top:20px; opacity:0}
	50% {margin-top:0px; opacity:100}
	100% {margin-top:0px; opacity:0}
}
#feet_ani{
	position:relative;
	margin-top:-345px;
	animation: feet_ani2 6s infinite;
	-moz-animation: feet_ani2 6s infinite;	/* Firefox */
	-webkit-animation: feet_ani2 6s infinite;	/* Safari 和 Chrome */
	-o-animation: feet_ani2 6s infinite;	/* Opera */
	/*-webkit-animation-fill-mode:forwards;*/
}
#feet_god_ani{
	position:absolute;
	top:500px;
	left: 40%;
	z-index: -30;
	animation: feet_ani2 6s infinite;
	-moz-animation: feet_ani2 6s infinite;	/* Firefox */
	-webkit-animation: feet_ani2 6s infinite;	/* Safari 和 Chrome */
	-o-animation: feet_ani2 6s infinite;	/* Opera */
	/*-webkit-animation-fill-mode:forwards;*/
}

#feet_ani2{
	position:relative;
	margin-top:-425px;
	animation: feet_ani2 6s infinite;
	-moz-animation: feet_ani2 6s infinite;	/* Firefox */
	-webkit-animation: feet_ani2 6s infinite;	/* Safari 和 Chrome */
	-o-animation: feet_ani2 6s infinite;	/* Opera */
	/*-webkit-animation-fill-mode:forwards;*/
}

@keyframes feet_ani2
{
	0%   {margin-left:0px; -webkit-transform: rotate(0deg) }
	50% {margin-left:10px; -webkit-transform: rotate(10deg) }
	100% {margin-left:0px; -webkit-transform: rotate(0deg) }
}
@-webkit-keyframes feet_ani2
{
	0%   {margin-left:0px; -webkit-transform: rotate(5deg) }
	50% {margin-left:10px; -webkit-transform: rotate(-5deg) }
	100% {margin-left:0px; -webkit-transform: rotate(5deg) }
}
@-moz-keyframes feet_ani2
{
	0%   {margin-left:0px; -webkit-transform: rotate(0deg) }
	50% {margin-left:10px; -webkit-transform: rotate(10deg) }
	100% {margin-left:0px; -webkit-transform: rotate(0deg) }
}
@-o-keyframes feet_ani2
{
	0%   {margin-left:0px; -webkit-transform: rotate(0deg) }
	50% {margin-left:10px; -webkit-transform: rotate(10deg) }
	100% {margin-left:0px; -webkit-transform: rotate(0deg) }
}
#blackTop{
	position:fixed;
	z-index:9999;
	background:#000;
	width:100%;
	height:100%;
}

#social{
	position:absolute; 
	left: -35px;
	width: 100%;
	padding:10px; 
	margin:10px; 
	height:30px;
}
#photowall{
	position:absolute; 
}