@charset "utf-8";
@import 'https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i';
/* CSS Document */

img {
	vertical-align: top;
	width: 100%;
	height: auto;
}

input,button,select,textarea{outline:none}
 *:focus { outline: none; }

iframe[name='google_conversion_frame'] { 
    height: 0 !important;
    width: 0 !important; 
    line-height: 0 !important; 
    font-size: 0 !important;
    margin-top: -13px;
    float: left;
}

html {
	margin:0;
	padding:0;
}

body {
	margin: 0;
	padding: 0;
	text-align: center;
	position: relative;
	font-family:Roboto, sans-serif, Arial,"Microsoft Yahei";
	background-color: #000;
}

.top_box {
	position: absolute;
	text-align: center;
	font-size: 0;
	padding: 20px 0;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
}

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

.top_box .top_btn {
	margin: 0 0.75%;
	position: relative;
	width: 100%;
	max-width: 14.3%;
	display: inline-block;
}

.top_box .top_btn a {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-indent: -9999px;
}

.top_box .join a:hover {
	background-image:url(images/top_btn_join_ov.jpg);
	background-size: 100% 100%;
}

.top_box .buy a:hover {
	background-image: url(images/top_btn_buy_ov.jpg);
	background-size: 100% 100%;
}

.mv {
	width: 100%;
	max-width: 1920px;
	height: auto;
	margin: 0 auto;
}

.mv img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.go_box {
	text-align: center;
	font-size: 0;
	padding: 0;
	width: 100%;
}

.go_box img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.go_box .go_btn {
	margin: 0;
	position: relative;
	width: 100%;
	max-width: 16.66%;
	display: inline-block;
}

.go_box .go_btn a {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-indent: -9999px;
	background-size: 100% 100%;
}

.go_box .go01 a:hover {
	background-image:url(images/go_01_ov.jpg);
}

.go_box .go02 a:hover {
	background-image:url(images/go_02_ov.jpg);
}

.go_box .go03 a:hover {
	background-image:url(images/go_03_ov.jpg);
}

.go_box .go04 a:hover {
	background-image:url(images/go_04_ov.jpg);
}

.go_box .go05 a:hover {
	background-image:url(images/go_05_ov.jpg);
}

.go_box .go06 a:hover {
	background-image:url(images/go_06_ov.jpg);
}

.event01 {
	position: relative;
}

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

.event01 .event01_bg img {
	width: 100%;
	height: auto;
}


.event01 .fly_pig {
	width: 100%;
	max-width: 15.6%;
	position: relative;
	
}

.event01 .fly_pig img {
	width: 100%;
	height: auto;
}

.event01 .fly_pig01 {
	position: absolute;
	top: 16%;
	left: 2.5%;
	animation:5s infinite fly_pig01;
}

.event01 .fly_pig .get {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

@keyframes fly_pig01 {
    0% {
        top: 16%;
    }
	
    50% {
        top: 15%;
    }
	
    100% {
        top: 16%;
    }
}

.event01 .fly_pig .shadow {
	width: 100%;
	display: block;
	position: absolute;
	left: 0;
	bottom: -8%;
}

.event01 .fly_pig .shadow img {
	width: 100%;
	max-width: 100%;
	opacity: 1;
	animation:5s infinite shadow;
}

@keyframes shadow {
    0% {
        max-width: 70%;
		opacity: 1;
    }
	
    50% {
        max-width: 100%;
		opacity: 0.5;
    }
	
    100% {
        max-width: 70%;
		opacity: 1;
    }
}

.event01 .fly_pig02 {
	position: absolute;
	top: 29.4%;
	left: 18.7%;
	animation:6s infinite fly_pig02;
}

@keyframes fly_pig02 {
    0% {
        top: 29.4%;
    }
	
    50% {
        top: 28.4%;
    }
	
    100% {
        top: 29.4%;
    }
}

.event01 .fly_pig03 {
	position: absolute;
	top: 20.4%;
	right: 18.7%;
	animation:6s infinite fly_pig03;
}

@keyframes fly_pig03 {
    0% {
        top: 20.4%;
    }
	
    50% {
        top: 19.4%;
    }
	
    100% {
        top: 20.4%;
    }
}

.event01 .fly_pig04 {
	position: absolute;
	top: 29.4%;
	right: 2.5%;
	animation:6s infinite fly_pig04;
}

@keyframes fly_pig04 {
    0% {
        top: 29.4%;
    }
	
    50% {
        top: 28.4%;
    }
	
    100% {
        top: 29.4%;
    }
}

.money_pig {
	position: absolute;
	top: 36.9%;
	left: 35.1%;
	width: 100%;
	max-width: 31.3%;
}

.m_points {
	position: absolute;
	top: 30%;
	left: 47.9%;
	width: 100%;
	max-width: 4.3%;
	z-index: 2;
	animation:2s infinite m_points;
	opacity: 1;
    transition:All 0.4s ease-in-out;  
    -webkit-transition:All 0.4s ease-in-out;  
    -moz-transition:All 0.4s ease-in-out;  
    -o-transition:All 0.4s ease-in-out;  
}

@keyframes m_points {
    0% {
        top: 30%;
		opacity: 1;
		transform:rotate(0deg);  
    }
	
    33.3% {
        top: 36%;
		opacity: 0;
    }
	
    66.6% {
		opacity: 1;
		z-index: 4;
    }
	
    100% {
        top: 58%;
		opacity: 0;
		transform:rotate(360deg);  
    }
}

.mask {
	position: absolute;
	top: 38.9%;
	left: 47%;	
	width: 100%;
	max-width: 6.3%;
	z-index: 3;
}

.event_btn {
	margin: 0;
	display: inline-block;
	top: 76.4%;
	position: absolute;	
	width: 100%;
	max-width: 13.2%;
	z-index: 3;
}

.event_btn img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.event_btn a {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-indent: -9999px;
	background-size: 100% 100%;
}

.gas_btn {
	left: 36.1%;
}

.gas_btn a:hover {
	background-image:url(images/gas_btn_ov.png);
}

.share_btn {
	right: 36.1%;
}

.share_btn a:hover {
	background-image:url(images/share_btn_ov.png);
}

.event02 {
	position: relative;
	width: 100%;
}

.event02 .chat {
	position: absolute;
	left: 11%;
	top: 48.2%;
	width: 41.6%;
	z-index: 1;
	animation:2s infinite chat;
}

@keyframes chat {
    0% {
        top: 48.2%;
    }
	
    50% {
        top: 48.7%;
    }
	
    100% {
        top: 48.2%;
    }
}

.event03 {
	width: 100%;
	background-color: #ffe1e7;
	position: relative;
}

.event03 .title {
	width: 100%;
}

.event03 .tab {
	width: 100%;
	background-color: #e4c1c8;
}

.event03 .tab ul {
	margin: 0;
	padding: 0;
	font-size: 0;
}

.event03 .tab ul li {
	max-width:16.4%;
	display: inline-block;
	cursor: pointer;
}

.event03 h3 {
	margin: 30px auto 20px auto;
	font-size: 30px;
	color: #de5d78; 
	width: 100%;
	max-width: 900px;
}

.event03 h4 {
	margin: 20px auto 10px auto;
	padding: 0 15px;
	font-size: 22px;
	color: #ec7a92; 
	width: 100%;
	max-width: 900px;
	box-sizing: border-box;
	text-align: left;
}

.event03 p {
	margin: 0 auto;
	padding: 0 15px;
	font-size: 20px;
	color: #000;
	width: 100%;
	max-width: 900px;
	text-align: left;
	line-height: 150%;
	box-sizing: border-box;
}

.event03 .gift_box {
	margin: 30px -0.5% 0 -0.5%;
	font-size: 0;
	width: 100%;
	overflow: hidden;
}

.event03 .gift_box .gift {
	width: 100%;
	max-width: 14.5%;
	height: auto;
	display: inline-block;
	margin: 0 0.5% 15px 0.5%;
}

.event03 .event03_btn {
	position: relative;
	margin: 40px 0;
	display: inline-block;
	width: 100%;
	max-width: 13.1%;
}

.event03 .event03_btn a {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-indent: -9999px;
	background-size: 100% 100%;
}

.event03 .event03_btn a:hover {
	background-image: url(images/event3_btn_ov.png);
}

.event03 .more_btn {
	position: relative;
	margin: 40px 0;
	display: inline-block;
	width: 100%;
	max-width: 13.1%;
}

.event03 .more_btn a {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-indent: -9999px;
	background-size: 100% 100%;
}

.event03 .more_btn a:hover {
	background-image: url(images/more_btn_ov.png);
}

.event04 {
	position: relative;
}

.event04 .registration_btn {
	margin: 0;
	display: inline-block;
	position: absolute;	
	width: 100%;
	max-width: 13.2%;
	z-index: 0;
	top: 90.5%;
	left: 43.4%;
}

.event04 .registration_btn a {
	position: absolute;
	font-size: 0;
	text-indent: -9999px;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 2;
	left: 0;
	top: 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.event04 .registration_btn a:hover {
	background-image: url(images/registration_btn_ov.png);
}

.event05 {
	position: relative;
	width: 100%;
}

.event05 .lucky_roulette {
	position: absolute;
	top: 38.6%;
	left: 0%;
	z-index: 2;
	width: 100%;
	max-height: 900px;
	overflow: hidden;
}

.event05 .lucky_roulette img {
    -webkit-animation: rotating 60s linear infinite;
    -moz-animation: rotating 60s linear infinite;
    -ms-animation: rotating 60s linear infinite;
    -o-animation: rotating 60s linear infinite;
    animation: rotating 60s linear infinite;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.event05 .arrow {
	position: absolute;
	top: 38.6%;
	left: 0;
	z-index: 3;
	width: 100%;
	max-height: 900px;
	overflow: hidden;
}

.event05 .run_pig {
	position: absolute;
	top: 38.6%;
	left: 6.1%;
	z-index: 3;
}

@keyframes lucky_roulette {	
    0% {
        transform:rotate(0deg);
    }
	
    100% {
        transform:rotate(360deg);
    }	
}

.event05 .note {
	position: absolute;
	bottom: 0%;
	left: 0%;
	z-index: 3;
}

.event05 .event_btn {
	margin: 0;
	display: inline-block;
	top: 30.4%;
	position: absolute;	
	width: 100%;
	max-width: 13.2%;
	z-index: 3;
}

.event05 .event_btn img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.event05 .event_btn a {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-indent: -9999px;
	background-size: 100% 100%;
}

.event05 .go_btn {
	left: 36.1%;
}

.event05 .go_btn a:hover {
	background-image:url(images/go_btn_ov.png);
}

.event05 .no_btn {
	right: 36.1%;
}

.event05 .no_btn a:hover {
	background-image:url(images/no_btn_ov.png);
}

.event05 .run_pig {
    position: absolute;
    top: 4.5%;
    left: 76%;
    transform: rotate(37.5deg);
    width: 100%;
    max-width: 14.6%;
}

.red_envelope_pig {
	position: fixed;
	top: 25%;
	right: 10px;
	width: 100%;
	max-width: 80px;
	z-index: 9;
	animation:2s infinite red_envelope_pig;
}

@keyframes red_envelope_pig {
    0% {
        top: 25%;
    }
	
    50% {
        top: 25.5%;
    }
	
    100% {
        top: 25%;
    }
}

.close_btn {
	position: absolute;
	top: 102%;
	left: 2%;
	width: 100%;
	max-width: 80px;
	z-index: 9;
	cursor: pointer;
}

.notice {
	margin: 0;
	padding: 30px 40px;
	clear: both;
	color: #333333;
	background-color: #bebebe;
	box-sizing: border-box;
	position: relative;
    z-index: 3;
	overflow: hidden;
}

.notice h3 {
	margin: 0 auto 20px auto;
	padding: 0;
	font-family:Roboto, "微軟正黑體";
	font-weight: normal;
	font-size: 30px;
	text-align: left;
	color: #666666;
	max-width: 1280px;
}

.notice ul {
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	max-width: 1280px;

}

.notice li {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 14px;
	list-style:decimal;
	line-height: 150%;
	text-align: left;
	font-family:Verdana, "微軟正黑體";
}

.notice li a {
	margin: 0 5px;
	text-decoration: underline;
	color: #333333;
}

/*copyright開始*/

#copyright {
	padding:0;
	width:100%;
	background:#000;
	display:inline-block;
	clear: both;
}

#copyright img {
	margin:0;
	padding:0;
	line-height:0;
	width:112px;
	height:60px;
	display:inline-block;
	vertical-align: middle;
}

#copyright p {
	font-size:13px;
	margin:0;
	padding:0;
	color:#FFF;
	line-height:58px;
	display:inline-block;
}

/*copyright結束*/


/*Facebook Button開始*/

.fb_bg {
	position: relative;
	padding: 15px 0;
	width: 100%;
	background-color: #202020;
	clear: both;
}

.fb {
  	margin: 0 auto;
  	padding: 0 15px;
  	width: 100%;
  	max-width: 445px;
  	box-sizing: border-box;
}

.fb .box {
	width: 100%;
    background-color: #4267b2 !important;
    padding: 5px 0;
    max-width: 410px;
    margin: 0;
    border-radius: 6px;
}

.fb .box:hover {
    background-color: #4a70be !important;
}

.fb p {
    display: inline-block;
    vertical-align: top;
    line-height: 21px;
    margin: 0;
    padding: 0;
    color: #fff;
	font-size:13px;
}

.fb p img {
    margin: 0 5px 0 0;
    vertical-align: middle;
	width: inherit;
}

.fb p a {
    color: #fff;
	text-decoration: none;
}

.fb p a:hover {
    text-decoration: none;
}

/*Facebook Button結束*/

#gotop {
	display:none;
	position:fixed;
	right:15px;
	bottom:70px;
	background-color:rgba(155, 155, 155, 0.4);
	font-family:Verdana, "新細明體";
	font-size:15px;
	color:#000;
	margin:0;
	padding:8px 15px;
	border-radius:4px;
	cursor:pointer;
	z-index:999;
}

#gotop:hover {
	background-color:rgba(180, 180, 180, 0.4);
}

@media screen and (max-width:1140px) {

.top_box .top_btn {
	max-width: 20%;
}

.top_box {
	position: inherit;
	padding: 10px 0;
	background-color: #881b1b;
}

.go_box .go_btn {
	max-width: 33.3%;
}

.event03 .gift_box .gift {
	max-width: 28%;
}

.event03 .event03_btn {
	margin: 0px 0 20px 0;
}

.notice {
	padding: 30px 0 30px 20px;
}

.notice h3 {
	margin: 0 auto 10px auto;
	font-size: 22px;
}

.event05 .run_pig {
    top: 3%;
}

}

@media screen and (max-width:750px) {

.top_box {
	padding: 10px 0;
}

.top_box .top_btn {
	max-width: 25%;
}

.event03 .tab ul li {
	max-width:25%;
}

.event03 h3 {
	font-size: 22px;
}

.event03 h4 {
	font-size: 18px;
}

.event03 p {
	font-size: 15px;
}

.event03 .event03_btn {
    max-width: 25%;
}

.event03 .more_btn {
	max-width: 25%;
}

#copyright {
	padding: 0;
}
	
#copyright img {
    margin: 0 auto;
    text-align: center;
    display: block;
}
	
#copyright p {
    margin: 0 0 15px 0;
    display: block;
    line-height: 100%;
}
	
}


@media screen and (max-width:500px) {

.event01 .fly_pig .shadow {
    bottom: -14%;
}

.red_envelope_pig {
    max-width: 50px;
}

}