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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica}
map :focus{outline:none ; }
a{text-decoration:none; }
body{min-width:100%;background-repeat:no-repeat;
	background-image: url(../images/index_bg.jpg);
	background-color: #ff8a60;
	background-position:top center;
	background-attachment: scroll;margin:0;overflow-x: hidden;}
}
img{display:block;border:0;}
ol,ul,li{list-style:none}
.clearfix::after{clear:both;display:block;height:0;visibility:hidden}
.clearfix{display:inline-block}
html[xmlns] .clearfix{display:block}

a, a:hover,.hover {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.topbar{
	width: 100%;
	height: 34px;
	background-color: #2a1f7d;
	line-height: 34px;
	margin: 0 auto;
	display: block;
	position: relative;
	z-index: 99;
	border-bottom: 1px solid #2a1f7d;
}

.topbar h2{
	color: #fff;
	font-size: 15px;
	text-align: center;
	font-weight: normal;
	letter-spacing: 1px;
}

.sidebar{
    position: fixed;
    right: 20px;
    top:8%;
    z-index: 999999;
    display: block;
    background-color: #2d4baa;
    opacity: 1;
    border-radius: 30px;
    border:3px solid #fff;
    padding:40px 0 20px 0;
}


.sidebar ul li:last-child{
	border-bottom:0px dotted #000;
}


.sidebar ul li a{
		width: 120px;
		display: block;
		padding:10px 10px;
		line-height: 17px;
		border-bottom:1px dotted #fff;	
		display: block;   
    color: #fff;
    font-size: 15px;
    position: relative;
    -webkit-transition: .3s;
    transition: .3s;
    text-align: center;
    font-weight: bold;
}


.sidebar ul li a:hover{
	 color: #2d4baa;
   position: relative;
   right: 0px;
   background-color: #fff;
}


.sidebar .top img {
		display: block;  
		margin: 0 auto;
    text-align: center;
    margin-top: 10px;
}

#gotop{
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    position: fixed;
    right: 15px;
    bottom:10%;
    right: 2%;
    background-color: #78290a;
    z-index: 15;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;	
}

#gotop p{
    padding-top: 18px;
    color: #fff;
    line-height: 1;
}


	@media screen and (min-width: 768px) and (max-width: 1024px){

	body{width:108%;}

		.topbar{
			width: 115%;
			height: 38px;
			line-height: 38px;
			margin: 0 auto;
		}

		#gotop , .sidebar{
			display: none;
		}

	}


.wrap{
	width:100%; 
	min-width:1200px; 

}



.light{
	width: 100%;
	position: absolute;
	z-index: 5;
	top: -3px;
	overflow: hidden;
}

.money{position:absolute;top:0;left:-320px;z-index:10; display:block;}	

.arrow{
  display: block;
  position: absolute;
  left: 560px;
  animation: scroll 1s linear infinite;
  z-index: 99;
}


.balloon01{
	position: absolute;
  top: 130px;
  left: -26%;
	overflow:visible;  
	animation: uptodown 8s linear infinite; 	
}

.balloon02{
	position: absolute;
  top: 130px;
  left: 3%;
	overflow:visible;  
	animation: uptodown 8s linear infinite; 	
}

.balloon03{
	position: absolute;
  top: 130px;
  right: -26%;
	overflow:visible;  
	animation: uptodown 8s linear infinite; 	
}

.balloon04{
	position: absolute;
  top: 130px;
  right: 5%;
	overflow:visible;  
	animation: uptodown 8s linear infinite; 	
}




	@media screen and (min-width: 768px) and (max-width: 1024px){

		body{min-width:100%;background-repeat:no-repeat;
			background-image: url(../images/index_mbg.jpg);
			background-color: ##ff8a60;
			background-position:top center;
			background-attachment: scroll;margin:0;
		}


		.light{
			display: none;
		}

		.money{
			display: none;
		}

		/*.wrap{
			max-width: 100%;
		  margin: 0 auto;
		  background: url(../images/kv_bg.jpg) repeat-y;
		  background-position:top center;
		  background-attachment: fixed;
		}*/

		.arrow{
		  display: block;
		  position: absolute;
		  left: 560px;
		  animation: scroll 1s linear infinite;
		}

		.balloon01 , .balloon03{
			display: none;
		}
	}


.kv{
	max-width: 100%;
  height: auto;
	margin: 0 auto;
	position: relative;
}

.kv_content{
	width: 100%;
	margin: 0 auto;
	width:1200px;
	height:880px; 
	background-repeat:no-repeat;
	position: relative;
}

/*--kv img--*/

.logo {
	position: absolute;
	display: block;
  top: 0px;
  left: 0px;
 }

 .kv_day{
	position: absolute;
	display: block;
  top: 40px;
  right: 0px;
  z-index: 1;
}


.kv_slogan0{
	position: absolute;
	display: block;
  top: 0px;
  left: 410px;
  z-index: -1;
}

.kv_slogan1{
  position: absolute;
  display: block;
  top: 120px;
  left:220px;
}


.kv_slogan2{
	position: absolute;
	display: block;
  top: 30px;
  left: 330px;
  animation-delay: 0.2s;
  z-index:99;
}


.kv_slogan3{
	position: absolute;
	display: block;
  top: 100px;
  right: 100px;
  animation-delay: 0.1s; 
}


.kv_day img:hover, .kv_slogan0 img:hover,.kv_slogan2 img:hover,.kv_slogan3 img:hover{
-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;		
	-webkit-transform: translateY(-2px); scale(1);filter:brightness(115%);
	-moz-transform: translateY(-2px); scale(1);filter:brightness(115%);
	-ms-transform: translateY(-2px); scale(1);filter:brightness(115%);
	-o-transform: translateY(-2px); scale(1);filter:brightness(115%);
	transform: translateY(-2px); scale(1);filter:brightness(115%);
}

.kv_stage{
	position: absolute;
	margin-top: 460px;
	left: 120px;
  animation-delay: 0.5s;
	z-index: 1;
  /*animation: bounce-down 4s -.20s linear infinite;*/
}

.kv_stagem{
	display: none;
}

.kv_img01{
	position: absolute;
	top: 8%;
	left: -15%;
	z-index: -9999;
	animation: updown2 1.5s linear infinite;  
}

.kv_img02{
	position:absolute;
	top: 16%;
	left: 3%;
	animation: updown2 1s linear infinite;  
}

.kv_img03{
	position: absolute;
	top: 18%;
	right: 6%;
	animation: updown2-1 1s linear infinite;  
}

.kv_img04{
	position: absolute;
	top: 8%;
	right: -10%;
	animation: updown2-1 1.5s linear infinite;  
}

.kv_img05{
	position: absolute;
	top: 30%;
	right: -8%;
	animation: updown2-1 3s linear infinite;  
}

.kv_img06{
	position: absolute;
	top: 55%;
	right: -20%;
	animation: updown2-1 2.8s linear infinite;  
}




@keyframes updown2{
  0% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
  50% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }
  100% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }	
}	

@keyframes updown2-1{
  0% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
  50% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }
  100% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }	
}	


@keyframes updown3{
  0% {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  50% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  100% {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }	
}	



@keyframes cloudmove {
0%{transform:translate(20px,0px)}
40%{transform:translate(-20px,0px)}
60%{transform:translate(20px,0px)}
80%{transform:translate(-20px,0px)}
100%{transform:translate(20px,0px)}
}	

@keyframes cloudmove2 {
0%{transform:translate(-20px,0px)}
40%{transform:translate(20px,0px)}
60%{transform:translate(-20px,0px)}
80%{transform:translate(20px,0px)}
100%{transform:translate(-20px,0px)}
}	

.kv_bling{
	position: absolute;
	margin-top: 50px;
  left: 140px; 
}


.kv_ball{
	position: absolute;
	display: block;
	width: 1200px;
	margin: 0 auto;
}


.kv_ball ul{
	position: absolute;
	display: block;
	margin: 0 auto;	
	top: 540px;
	left: 180px;
}

.kv_ball li{
	float: left;
	margin-left:10px;
	animation: downtoup-play 0.5s linear infinite alternate; 	
}

.downtoup-play { 
	-webkit-animation:downtoup-play 0.5s infinite alternate;
	animation:downtoup-play 0.5s infinite alternate;

}

	@-webkit-keyframes downtoup-play { 
		0% { 
			-webkit-transform: translate(0,0);  
		} 
		100% { 
			-webkit-transform: translate(0,-8px);
		}
	
	}

.kv_left{
	position: absolute;
  top: 30%;
  left: -30%;
  z-index: -9999;
  /*animation: wave 0.8s linear infinite;*/ 
}

.kv_right{
	position: absolute;
  top: 30%;
  right: -26%;
  z-index: -9999;
  /*animation: wave2 0.8s linear infinite; */  
}

/*--kv img end--*/

.content{
	max-width: 1200px;
	height: auto;
	margin: 0 auto;
	position: relative;
	padding-top: 40px;
}

.linefriend{
  width: 1200px;
  height: 688px;
  background-image: url(../images/con02_bg.png);
  margin: 0 auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 50px;
  position: relative;
}

.linefriend ul{
	position: relative;
	margin:530px 0 0 100px;
}

.linefriend li{
	width: 33%;
	float: left;
	margin-left: 0px;
	animation: click2 0.4s linear infinite alternate;		
}

.linefriend li a img:hover{
	transition: 0.3s;
	-webkit-filter:brightness(100%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
}

.linefriend  .btn01{
	display: block;
	position: absolute;
	margin:415px 0 0 170px;
	animation: click2 0.4s linear infinite alternate;	
}

.linefriend  .btn01:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.linefriend  .btn02{
	display: block;
	position: absolute;
	margin:415px 0 0 630px;
  animation: click2 0.4s linear infinite alternate;		
}

.linefriend  .btn02:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.zingala{
  width: 1200px;
  height: 730px;
  background-image: url(../images/con03_zingala.png);
  margin: 0 auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 50px;
  position: relative;
}

.zingala .btn01{
	display: block;
	position: absolute;
	margin:620px 0 0 515px;
	/*animation: click2 0.4s linear infinite alternate;	*/
}

.zingala .btn01:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.mydayline{
  width: 1200px;
  height: 1780px;
  background-image: url(../images/con04_bg.png);
  margin: 0 auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 0px;
  position: relative;	
}

.con03_yahoorakuten{
  width: 1150px;
  height: 585px;
  background-image: url(../images/con04_yahoorakuten_bg.png);
  margin:480px 0 0 20px;
  display: table;  
}

.mydayline  ul.more {
	display: block;
	margin:480px 0 0 280px;
}

.mydayline ul.more li{
	float: left;
	margin-left: 20px;
}

.mydayline ul.more li:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}



.mydayline  ul.more2 {
	display: block;
	margin:555px 0 0 370px;
}

.mydayline ul.more2 li{
	float: left;
	margin-left: 20px;
}

.mydayline ul.more2 li:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}


.con03_yahoo{
	display: block;
	position: absolute;
	top: 530px;
	left: 300px;
}

.con03_rakuten{
	display: block;
	position: absolute;
	top: 530px;
	left: 620px;
}

.con03_btn{
	display: block;
	position: absolute;
	top: 915px;
	left: 490px;
}


.con04_mercaribg{
  width: 1150px;
  height: 660px;
  background-image: url(../images/con04_mercari_bg.png);
  margin:20px 0 0 20px;
  display: table;  
}

.con04_mercari{
	display: block;
	position: absolute;
	top: 1155px;
	left: 200px;
}

.con04_btn01{
	display: block;
	position: absolute;
	top: 1895px;
	left: 380px;	
}

.con04_btn02{
	display: block;
	position: absolute;
	top: 1895px;
	left: 615px;	
}

.con03_yahoo img:hover ,.con03_rakuten img:hover ,.con04_mercari img:hover,.con03_btn img:hover ,.con04_btn01 img:hover ,.con04_btn02 img:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.servicefee{
  width: 1200px;
  height: 783px;
  background-image: url(../images/con02_servicefee0229.png);
  margin: 0 auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 50px;
  position: relative;
}

.servicefee .tip{
		width: 125px;
		height: 125px;
    position: absolute;
    margin-top: 270px;
    margin-left: 1010px;
    z-index: 2;
    animation: click 0.4s linear infinite alternate;	
}

.servicefee .btn01{
	display: block;
	position: absolute;
	margin:625px 0 0 220px;
}

.servicefee .btn01:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.servicefee .btn02{
	display: block;
	position: absolute;
	margin:625px 0 0 780px;
}

.servicefee .btn02:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.content_01{
  width: 1200px;
  margin: 0 auto;
  display: table;
  margin-top: 30px;
  margin-bottom: 50px;
}

.content_01 .title{
	width: 1200px;
	display: block;
	margin:0 auto;
}

.content_01 .title img{
	margin:0 auto;
}


.content_01 ul.row01{  
  margin: 0 auto;
  display: table; 
  margin-top: 20px;
  margin-left: 8px;   
}

.content_01  .row01 li{
	float: left;
	margin-left: 6px;	
}

.content_01 .row01 li a{
}

.row01 li:hover,.row02 li:hover {
	transition: 0.3s; 
	-webkit-transform: translateY(-4px); scale(1);filter:brightness(110%);
	-moz-transform: translateY(-4px); scale(1);filter:brightness(110%);
	-ms-transform: translateY(-4px); scale(1);filter:brightness(110%);
	-o-transform: translateY(-4px); scale(1);filter:brightness(110%);
	transform: translateY(-4px); scale(1);filter:brightness(110%);    
}

.content_01 li.tip01 {
		width: 76px;
		height: 82px;
    position: absolute;
    margin-top: 140px;
    margin-left: 870px;
    z-index: 2;
    animation: click 0.4s linear infinite alternate;
}

.content_01 li.tip02 {
		width: 79px;
		height: 76px;
    position: absolute;
    margin-top: 90px;
    margin-left: 1130px;
    z-index: 2;
    animation: click 0.4s linear infinite alternate;
}


/*coupon*/
.content_04{
  width: 1200px;
  height: 865px;
  background-image: url(../images/con04_9discount.png);
  margin: 0 auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 50px;
  position: relative;
}


.content_04 .con04_01{
	display: block;
	position: absolute;
	margin-top: 750px;
	margin-left: 490px;
}


.con04_01:hover ,.con04_02:hover ,.con04_03:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -ms-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95);
}


.content_02{
  width: 1200px;
  height: 1110px;
  background-image: url(../images/con05_rakuten.png);
  margin: 0 auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 30px;
 	position: relative; 
}

.content_02 ul{
	display: block;
	position: absolute;
	float: left;
	margin-top:730px;
	margin-left: 30px;
}

.content_02 li{
	float: left;
	margin-left: 20px;
}

.content_02 li:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -ms-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95);	
}

.content_02 .btn{
	display: block;
	position: absolute;
	margin-top: 1000px;
	margin-left: 490px;
}

.content_02 .btn:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -ms-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95);
}

.content_03{
  width: 1200px;
  height: 610px;
  background-image: url(../images/con06_jp99_20240502.png);
  margin: 0 auto;
  display: table;
  margin-bottom: 30px;
 	position: relative; 
}

.content_03 ul{
	display: block;
	position: absolute;
	margin:490px 0 0 520px;
}

.content_03 li{
	float: left;
	margin-left: 210px;
}

.content_03 li:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -ms-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95);	
}

.con02_jp99more1122{
	display: block;
	position: absolute;
  animation: click2 0.5s linear infinite alternate;
  top:205px;
  left: 510px;	
}


.content_03-1{
  width: 1200px;
  height: 667px;
  margin: 0 auto;
  display: table;
  margin-bottom: 0px;
 	position: relative; 
}



.content_05{
  width: 1200px;
  height: 550px;
  background-image: url(../images/con05_bg.png);
  margin: 0 auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 20px;
 	position: relative; 
}


.content_05 ul.row01{  
  margin: 0 auto;
  display: table; 
  margin-left: 40px;
}

.content_05  .row01 li{
	float: left;
	margin:200px 0 20px 10px;
}

.content_05 ul.row02{  
  margin: 0 auto;
  display: table; 
  margin:230px 0 0 480px;
}

.content_05  .row02 li{
	float: left;
	margin:20px 0 0 15px;
}

.content_05 .title{
	display: block;
	margin:0 auto;
	position: absolute;
	margin:70px 0 0 530px;
}


.content_05 .btn{
	width: 532px;
	height: 119px;
	display: block;
	margin:0 auto;
	margin-top: 40px;
  animation: click 0.5s linear infinite alternate;	
}



.content_05 .phone{
	display: block;
	position: absolute;
	margin:40px;
	z-index: -1;
}

.content_05 .qrcode{
	display: block;
	position: absolute;
	margin:130px 0 0 170px;
	z-index: 1;
  animation: click 0.5s linear infinite alternate;		
}


.content_05 .qrcode:hover , .title:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -ms-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95);	
}

.content_06{
  width: 1200px;
  height: auto;
  /*background-image: url(../images/prod_bg.png);*/
  margin: 0 auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 30px;
 	position: relative; 
}


.content_06 ul{
  height: auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 20px;
  margin-left: 10px;
}

.content_06 li{
	float: left;
	margin:10px 0 0 0px;
	padding-left: 0px;
}


.content_06 .prod_img{
	display: block;
	position: relative;
}

.content_06 ul.more{
	display: block;
	margin-left: 15px;
	position: absolute;
	margin-top: -90px;
}

.content_06 ul.more li{
	float: left;
	padding-left: 0px;	
}

.content_06 ul.more li:hover{
	transition: 0.3s;
	-webkit-filter:brightness(120%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -ms-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95);
}


.content_06 .logo01{
	position: absolute;
	margin:36px 0 0 360px;
}


.content_06 .logo02{
	position: absolute;
	margin:36px 0 0 400px;
}


.content_06 .logo03{
	position: absolute;
	margin:25px 0 0 380px;
}


.content_06 .logo01 img:hover , .content_06 .logo02 img:hover ,.content_06 .logo03 img:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.98);
  -moz-transform:scale(0.98);
  -ms-transform:scale(0.98);
  -o-transform:scale(0.98);
  transform:scale(0.98);
}


.content_06 .title img{
	margin: 0 auto;
	display: block;
	padding-bottom: 20px;
}

.content_06 .title:hover{
	transition: 0s;
	-webkit-filter:brightness(100%); 
	-webkit-transform:translateY(0px); 
	transform:translateY(0px); 
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);
}




.category{
  width: 1200px;
  height: 412px;
  background-image: url(../images/category_bg.png);
  margin: 0 auto;
  display: table;
  margin-top: 0px;
  margin-bottom: 20px;
 	position: relative; 	
}

.category .title img{
	margin: 0 auto;
	display: block;
}


.category ul{
	display: block;
	float: left;
	margin-top: 20px;
	margin-left: 200px;
	margin-bottom: 10px;
}

.category li{
	display: block;
	float: left;	
}

.category li:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -ms-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95);		
}


.shop{
	width: 1200px;
	height: 300px;
	display: block;
	margin: 0 auto;
}

.shop .title img{
	margin: 0 auto;
	display: block;
	padding-top:10px;	
}

.shop .title:hover{
	transition: 0.3s;
	-webkit-filter:brightness(100%); 
	-webkit-transform:translateY(-0px); 
	transform:translateY(-0px); 
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -ms-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1);		
}

.shop .more{
	position: absolute;
	display: block;
	margin:-96px 0 0 750px;
}

.shop .more img{
}

.shop .more img:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.90);
  -moz-transform:scale(0.90);
  -ms-transform:scale(0.90);
  -o-transform:scale(0.90);
  transform:scale(0.90);		
}


.shop ul{
	display: block;
	float: left;
	margin-top: 20px;
	margin-left: 20px;
}

.shop li{
	display: block;
	float: left;	
	margin:0px 0 0px 5px;
}

.shop li:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -ms-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95);		
}



/*---------活動辦法--------*/

.event{
	width: 1200px;
	margin:0 auto;
	display: table;
}

.event .text {
	margin:0 auto;
	display: block;
}


.event .text img{
	margin:0 auto;
	display: block;
	margin-top: 50px;
}


.event .btn_a{
	display: block;
	position: absolute;
	z-index: 9;
  margin-top: 512px;
  margin-left: 1020px;
}

.event .btn_a:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.event .btn_b{
	display: block;
	position: absolute;
	z-index: 9;
	margin-top: 716px;
	margin-left: 300px;
}

.event .btn_b:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.event .btn_c{
	display: block;
	position: absolute;
	z-index: 9;
	margin-top: 750px;
	margin-left: 415px;
}

.event .btn_c:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}


.event .btn_d{
	display: block;
	position: absolute;
	z-index: 9;
  margin-top: 678px;
  margin-left: 300px;
}

.event .btn_d:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}


/*----------注意事項-----------*/

.notice{
	width: 1200px;
	margin:0 auto;
	display: table;
}

.notice .text {
	margin:0 auto;
	display: block;
}


.notice .text img{
	margin:0 auto;
	display: block;
	margin-top: 10px;
}

.notice .btn_a{
	display: block;
	position: absolute;
	z-index: 9;
  margin-top: 490px;
  margin-left: 560px;
}

.notice .btn_a:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}


.notice .btn_b{
	display: block;
	position: absolute;
	z-index: 9;
  margin-top: 603px;
  margin-left: 530px;
}

.notice .btn_b:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.notice .btn_c{
	display: block;
	position: absolute;
	z-index: 9;
	margin-top: 790px;
  margin-left: 640px;
}

.notice .btn_c:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}

.notice .btn_d{
	display: block;
	position: absolute;
	z-index: 9;
  margin-top: 833px;
  margin-left: 345px;
}

.notice .btn_d:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateX(3px); 
	transform:translateX(3px); 
}


/*------------------SOCIAL ICON---------------*/

.content_social{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	background-repeat: repeat;
}

.content_social .content{
	width: 1200px;
	height: auto;
	margin:0 auto;
}

.content_social ul{
	width: 1200px;
	margin: 0 auto;
	display: table;
}

.content_social li{
	display: table;
	float: left;
	cursor:pointer;
	padding: 30px 0 20px 0;
}


.social{
	display: table;
	margin:0 auto;
}

.social ul{

}

.social li{
	width:33.333%;
}

.social li img{
	margin: 0 auto;
	display: block;
	/*-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));	*/
		/*-webkit-filter: drop-shadow(3px 3px 0px rgba(255,255,255,100));*/
}

.social li img:hover{
	transition: 0.3s;
	transform:translateY(2px);
	-webkit-transform:translateY(2px);
	-moz-transform:translateY(2px);
	-ms-transform:translateY(2px);
	-o-transform:translateY(2px)	
}

.social a{
	display: block;
	text-align: center;
	margin:40px auto 110px auto; 
/*text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff,
2px 2px 2px white;*/

}

.social span:hover{
	transition: 0.3s;		
}

.social span{
	display: block;
	color: #000;
	font-size:18px;
	font-weight: bold;
	line-height: 50px;
	padding: 5px 10px;
	border-radius: 20px;
	/*border:3px solid #fff;*/
}



/*------------------FOOTER ICON---------------*/

.footer{
	width: 100%;
	height: 56px;
	background: #000000;
	bottom: 0;
	position:fixed;
	z-index: 99999;
	opacity: 0.9;
}

.footer ul{
	width: 1200px;
	margin:0 auto;
}

.footer li{
	display: table;
	width: 20%;
	float: left;
}

.footer li a{
	width: 220px;
	display: block;
	text-align: center;
  background-color: #fff;
  border-radius: 20px;
  color: #000000;
  font-size: 18px;
  height: 30px;
  line-height: 30px;
  position: relative;
  -webkit-transition: .3s;
  transition: .3s;
  margin: 10px auto;
  font-weight: bold;
	opacity: 1;
}


.footer li a:hover{
  background-color: #fff7bb;  
  border-radius: 20px;
  color: #000000;	
}

.footer .join_m a{
	display: none;
}


.footer_m{
	display: none;
}

	@media screen and (min-width: 768px) and (max-width: 1024px){


		.kv_stage{
			position: absolute;
			margin-top: 350px;
			left: 630px;
		  animation-delay: 0.5s;
			z-index: 1;
		  /*animation: bounce-down 4s -.20s linear infinite;*/
		  display: none;
		}

		.kv_stagem{
			position: absolute;
			margin-top: 500px;
			left: 170px;
		  animation-delay: 0.5s;
			z-index: 1;
			display: block;
		}

		.kv_left{
			display: none;
		}

		.kv_right{
			display: none;
		}


		.kv_img01{
			display: none;
		}

		.kv_img02{
			display: none;			
		}

		.kv_img03{
			display: none;
		}

		.kv_img04{
			display: none;		
		}

		.kv_img05{
			display: none;
		}

		.kv_img06{
			display: none;
		}

		.kv_content{
			width: 100%;
			margin: 0 auto;
			width:1200px;
			height:900px; 
			background-repeat:no-repeat;
			position: relative;
		}


		.kv_left{
			position: absolute;
		  top: 60%;
		  left: 0%;
		  z-index: -9999;
		}

		.kv_right{
			position: absolute;
		  top: 60%;
			right:0px;
		  z-index: -9999;
		}

		.content_social li{
			padding: 30px 0 60px 0; 
		}

		.social a{
			display: block;
			text-align: center;
			margin:20px auto 80px auto; 
		}

		.social span{
			display: block;
			color: #000;
			font-size:24px;
			font-weight: bold;
			line-height: 50px;
			padding: 5px 10px;
			border-radius: 20px;
			/*border:2px solid #fff;*/
		}



		.footer{
			display: none;
		}


		.footer_m{
			width: 100%;
			height: 100px;
			background: #000000;
			bottom: 0;
			position:fixed;
			z-index: 9999;
			opacity: 0.95;
			display: block;
		}

		.footer_m ul{
			width: 105%;
			margin:0 auto;
		}

		.footer_m li{
			display: table;
			width: 19%;
			float: left;
			border-right: 2px solid #fff;
		}

		.footer_m li:last-child { border-right:none; } 

		.footer_m li a{
			width: 100%;
		    display: block;
		    text-align: center;
		    border-radius: 0px;
		    background: #000000;
		    color: #fff;
		    font-size: 36px;
		    height: 100px;
		    line-height: 100px;
		    position: relative;
		    -webkit-transition: .3s;
		    transition: .3s;
		    margin: 0px auto;
		    font-weight: bold;
		    opacity: 1;
		    letter-spacing: 0em;
		}





	}




/*------------------ANIMATION---------------*/

@keyframes click {
0% { transform: scale(1); }
100% {transform: scale(0.9);}
}

@keyframes click2 {
0% { transform: scale(1); }
100% {transform: scale(0.95);}
}


@keyframes wave {
  0% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  50% {
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  100% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }	
}	

@keyframes wave2 {
  0% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  50% {
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }	
}	

.brightness-play{
	-webkit-animation:brightness2-play 2s -.10s linear infinite;
	animation:brightness2-play 2s -.10s linear infinite;
}

@keyframes scroll{0%{top:760px}
50%{top:770px}
100%{top:760px}
}

	@media screen and (min-width: 768px) and (max-width: 1024px){
		@keyframes scroll{0%{top:760px}
		50%{top:770px}
		100%{top:760px}
		}
	}

@keyframes brightness2-play{
0%{filter:brightness(110%)}
10%{filter:brightness(100%)}
20%{filter:brightness(110%)}
40%{filter:brightness(100%)}
60%{filter:brightness(110%)}
80%{filter:brightness(100%)}
100%{filter:brightness(110%)}
}



.brightness-bg{
	-webkit-animation:brightness2-bg 2s -.40s linear infinite;
	animation:brightness2-bg 2s -.40s linear infinite;
}

@keyframes brightness2-bg{
0%{filter:brightness(115%)}
20%{filter:brightness(95%)}
40%{filter:brightness(115%)}
80%{filter:brightness(95%)}
100%{filter:brightness(115%)}
}


.uptodown{-webkit-animation-duration:3s;animation-duration:3s;
	-webkit-animation-name:uptodown;animation-name:uptodown;
	-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;animation-direction:alternate}


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


.uptodown2{-webkit-animation-duration:3s;animation-duration:3s;
	-webkit-animation-name:uptodown2;animation-name:uptodown2;
	-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;animation-direction:alternate}


@keyframes uptodown2{
	0%{transform:translate(0,20px)}
	50%{transform:translate(0,0px)}
	100%{transform:translate(0,20px)}
}


.updown{
	animation-name: updown;
  -webkit-animation-name: updown;
  animation-duration: 8s;
  -webkit-animation-duration: 8s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;}

@keyframes updown {
  0% {
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
  }
  50% {
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg);
  }
  100% {
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
  }
}	



@keyframes shallot_01{
	0%,100%{transform: translate(0%,0%) rotate(0deg) skew(0deg,0deg);opacity:1;}
	25%{transform: translate(0%,0%) rotate(0deg) skew(3deg,0deg) ;opacity:1;}
	75%{transform: translate(0%,0%) rotate(0deg) skew(-3deg,0deg) ;opacity:1;}
}
@keyframes shallot_02{
	0%,100%{transform: translate(0%,0%) rotate(0deg) skew(0deg,0deg);opacity:1;}
	25%{transform: translate(0%,0%) rotate(0deg) skew(-3deg,0deg) ;opacity:1;}
	75%{transform: translate(0%,0%) rotate(0deg) skew(3deg,0deg) ;opacity:1;}
}

@keyframes jumpjump {
  0% {
    transform: scale(0.8, 1.1) translate(0, -1000px);
  }
  85% {
    transform: scale(1.1, 0.9) translate(0, 30px);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

@keyframes area_truck_figure {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(0);
  }
  75% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes jumpjump_shake {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -8%);
  }
  50% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  60% {
    transform: scale(0.95, 1.05) translate(0%, -3%);
  }
  70% {
    transform: scale(1.05, 0.95) translate(0%, 3%);
  }
  80% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}

.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);}
	}

@keyframes slogan1fadeIn {
0% {
 opacity: 0;
 filter: blur(5px) brightness(300%);
 transform: scale(1);
} 
40% {
 opacity: 0;
 filter: blur(2px) brightness(150%);
 transform: scale(1);
}
60% {
 opacity: 1;
 filter: blur(2px) brightness(300%);
 transform: scale(1.1);
}
 100% {
 opacity: 1;
 filter: blur(0px) brightness(100%);
 transform: scale(1);
}
}
	

	/*背景閃亮*/
@keyframes brightness {
  0% {
    filter: brightness(95%);
  }
  5% {
    filter: brightness(120%)
  }
  15% {
    filter: brightness(90%)
  }
  25% {
    filter: brightness(130%)
  }
  30% {
    filter: brightness(110%)
  }
  100% {
    filter: brightness(95%)
  }
}


/*煙火*/
.kv_firework_a {
  position: absolute;
  left: 260px;
  top: 155px;
  z-index: -1;
 }

.kv_firework_b{
  position: absolute;
	top: 380px;
  left: 400px;
  z-index: -1;
}

.kv_firework_c{
  position: absolute;
	top: 360px;
  left: 200px;
  z-index: -1;
}

.kv_firework_d{
  position: absolute;
  top: 300px;
  right: 400px;
  z-index: -1;
}


.kv_firework_e{
  position: absolute;
  top: 70px;
  right: 300px;
  z-index: -1;
}

.kv_firework_f{
  position: absolute;
  top: 250px;
  right: 220px;
  z-index: -1;
}

.kv_firework_g{
  position: absolute;
	top: 300px;
  right: 380px;
  z-index: -1;
}




.kv_firework_a{
 animation-name: kv_firework_a;
 -webkit-animation-name: kv_firework_a; 
 animation-duration: 3s; 
 -webkit-animation-duration: 3s;
 animation-timing-function: ease-out; 
 -webkit-animation-timing-function: ease-out;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;  
/* visibility: visible !important; */
}

@keyframes kv_firework_a {
  0% {
  opacity: 0.0;  
 }
 50% {
  transform: scale(0);
  opacity: 0; 
 }
 60% {
  transform: scale(0.9);
  opacity: 1; 
 }
 95% {
  transform: scale(1.8); 
 } 
  100% {
  transform: /*scale(1)*/translateY(10%);
  opacity: 0.0;  
 }
}


.kv_firework_b{
 animation-name: kv_firework_b;
 -webkit-animation-name: kv_firework_b; 
 animation-duration: 3s; 
 -webkit-animation-duration: 3;
 animation-timing-function: ease-out; 
 -webkit-animation-timing-function: ease-out;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;  
/* visibility: visible !important; */
}


@keyframes kv_firework_b {
 0% {
  transform: scale(0);
  opacity: 0; 
 }
 10% {
  transform: scale(0.7);
  opacity: 1; 
 }
 45% {
  transform: scale(1.3); 
 } 
 50% {
  transform: /*scale(1)*/translateY(10%);
  opacity: 0.0;  
 }
 100% {
  opacity: 0.0;  
 }
 }




.kv_firework_c{
 animation-name: kv_firework_c;
 -webkit-animation-name: kv_firework_c; 
 animation-duration: 3s; 
 -webkit-animation-duration: 3;
 animation-timing-function: ease-out; 
 -webkit-animation-timing-function: ease-out;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;  
/* visibility: visible !important; */
}


@keyframes kv_firework_c {
  0% {
  opacity: 0.0;  
 }
 30% {
  transform: scale(0);
  opacity: 0; 
 }
 40% {
  transform: scale(0.8);
  opacity: 1; 
 }
 95% {
  transform: scale(1.8); 
 } 
  100% {
  transform: /*scale(1)*/translateY(10%);
  opacity: 0.0;  
 }
 }

 .kv_firework_d{
 animation-name: kv_firework_d;
 -webkit-animation-name: kv_firework_d; 
 animation-duration: 3s; 
 -webkit-animation-duration: 3s;
 animation-timing-function: ease-out; 
 -webkit-animation-timing-function: ease-out;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;  
/* visibility: visible !important; */

}
@keyframes kv_firework_d {
 0% {
  transform: scale(0);
  opacity: 0; 
 }
 10% {
  transform: scale(0.7);
  opacity: 1; 
 }
 45% {
  transform: scale(1.3); 
 } 
 50% {
  transform: /*scale(1)*/translateY(10%);
  opacity: 0.0;  
 }
 100% {
  opacity: 0.0;  
 }
 }



.kv_firework_e{
 animation-name: kv_firework_e;
 -webkit-animation-name: kv_firework_e; 
 animation-duration: 3s; 
 -webkit-animation-duration: 3;
 animation-timing-function: ease-out; 
 -webkit-animation-timing-function: ease-out;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;  
/* visibility: visible !important; */
}
@keyframes kv_firework_e {
 0% {
  transform: scale(0);
  opacity: 0; 
 }
 10% {
  transform: scale(0.7);
  opacity: 1; 
 }
 45% {
  transform: scale(1.3); 
 } 
 50% {
  transform: /*scale(1)*/translateY(10%);
  opacity: 0.0;  
 }
 100% {
  opacity: 0.0;  
 }
 }



 .kv_firework_f{
 animation-name: kv_firework_f;
 -webkit-animation-name: kv_firework_f; 
 animation-duration: 3s; 
 -webkit-animation-duration: 3;
 animation-timing-function: ease-out; 
 -webkit-animation-timing-function: ease-out;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;  
/* visibility: visible !important; */
}
@keyframes kv_firework_f {
  0% {
  opacity: 0.0;  
 }
 50% {
  transform: scale(0);
  opacity: 0; 
 }
 60% {
  transform: scale(0.9);
  opacity: 1; 
 }
 95% {
  transform: scale(1.8); 
 } 
  100% {
  transform: /*scale(1)*/translateY(10%);
  opacity: 0.0;  
 }
}

.kv_firework_g{
 animation-name: kv_firework_g;
 -webkit-animation-name: kv_firework_g; 
 animation-duration: 3s; 
 -webkit-animation-duration: 3;
 animation-timing-function: ease-out; 
 -webkit-animation-timing-function: ease-out;
 animation-iteration-count: infinite;
 -webkit-animation-iteration-count: infinite;  
/* visibility: visible !important; */
}
@keyframes kv_firework_g {
  0% {
  opacity: 0.0;  
 }
 30% {
  transform: scale(0);
  opacity: 0; 
 }
 40% {
  transform: scale(0.8);
  opacity: 1; 
 }
 95% {
  transform: scale(1.8); 
 } 
  100% {
  transform: /*scale(1)*/translateY(10%);
  opacity: 0.0;  
 }
 }


/*閃光*/
.lightSweep {  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: 5s;
  animation: move 3s 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;
  }
}