@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: #004943;
	background-position:top center;
	background-attachment: scroll;margin:0;
}
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: 38px;
	background-color: #fff2c7;
	line-height: 38px;
	margin: 0 auto;
	display: block;
	position: relative;
	z-index: 999;
}

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

.sidebar{
    position: fixed;
    right: 20px;
    top:15%;
    z-index: 999999;
    display: block;
    background-color: #fbedae;
    opacity: 0.8;
    border-radius: 80px;
    padding: 30px 15px;
    border:1px solid #000;
   	-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.7)); 
  box-shadow:  rgba(255,255,255,1)  0px 2px 1px 0px  inset; 	
}


.sidebar ul li{
	width: 110px;
	padding:10px 0;
	margin-bottom: 2px;
	line-height: 17px;
	border-bottom:1px solid #000;
}

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

}


.sidebar ul li a{
		display: block;   
    color: #000;
    font-size: 15px;
    position: relative;
    -webkit-transition: .3s;
    transition: .3s;
    text-align: center;
    font-weight: bold;
}

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

.sidebar ul li a:hover{
	color: #ff0000;
   position: relative;
   right: 0px;
   -webkit-transition: .3s;
   transition: .3s;
}


#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: 520px;
  animation: scroll 1s linear infinite;
}


.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: #033337;
			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: 520px;
		  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: 250px;
  left:200px;
  z-index:2;
}


.kv_slogan0{
	position: absolute;
	display: block;
  top: 100px;
  left: 410px;
}

.kv_slogan1{
	position: absolute;
	display: block;
  top: 60px;
  left: 250px;
  z-index: 10;
}


.kv_slogan2{
	position: absolute;
	display: block;
	top: 130px;
  left: 370px;
  animation-delay: 0.2s;
  z-index:9999;
}


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


.kv_day img:hover, .kv_slogan0 img:hover,.kv_slogan1 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_img01{
	position: absolute;
	margin-top: 250px;
  left: -50px;
  animation-delay: 0.5s;
	z-index: -1;

}

.kv_img02{
	position: absolute;
	margin-top: 650px;
  left: -20px;
  animation-delay: 0.5s;
	z-index: -1;
}

.kv_img03{
	position: absolute;
	margin-top: 650px;
  right: -150px;
  animation-delay: 0.5s;
	z-index: -1;

}

.kv_img04{
	position: absolute;
	margin-top: 250px;
  right: -20px;
  animation-delay: 0.5s;
	z-index: -1;
}


.kv_img01 img , .kv_img02 img , .kv_img03 img , .kv_img04 img{
  animation: self-rotate 30s linear infinite;	
}

	@keyframes self-rotate {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(720deg);
			}
		}



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

.tip01{
	float: left;
	margin-top: 40px;
}

.tip02{
	float: left;
	margin-top: 10px;
}

.tip03{
	float: left;
	margin-top: -10px;
}

.arrow01{
	position: absolute;
	z-index: 9999;
	top:780px;
	left: 575px; 	
}

.arrow01 img{
	animation: downtoup-play 0.5s linear infinite alternate;  	
}

.arrow02{
	position: absolute;
	z-index: 1;
	top: 755px;
  left: 530px;x; 	
}

.arrow02 img{
	animation: downtoup-play 0.5s linear infinite alternate;  	
}

.arrow03{
	position: absolute;
	z-index: 1;
  top: 730px;
  left: 820px;	
}

.arrow03 img{
	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: 48%;
  left: -5%;
  z-index: -9999;
  animation: wave 0.8s linear infinite; 
}

.kv_right{
	position: absolute;
  top: 48%;
  right: -5%;
  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;
}

.content_01{
  width: 1200px;
  margin: 0 auto;
  display: table;
  /*background: url(../images/con01_bg.png) no-repeat;*/
  background-position: top center;	
  position: relative;
  margin-bottom: 50px;
  margin-top: 30px;
}


.content_01 ul{
	display: block;
	padding:0;
	margin:10px 0 0 40px;
}

.content_01 li{
	width: 558px;
	height: 517px;
	float: left;
	margin-left: 5px;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;		
}

/*coupon*/
.coupon{
	width:500px;
	height:auto;
	margin:0 auto;
	z-index: 999;
	display: block;
}

.coupon_copy01{
	position:absolute;
	z-index: 999;
	cursor: pointer;
}


.codebtn{
	background:none;
	border:none;
	line-height: 40px;
	outline: none;
	height: 37px;
	line-height: 37px;
	display: inline-block;
	margin:685px 0 0 420px;
	position: absolute;
	vertical-align: bottom;	
}

.con01btn{
	position: absolute;
	margin: 350px 0 0 870px;
	animation: click 0.3s linear infinite alternate;
	z-index: 999;
}

.con01btn:hover {
	background:none;
	border:none;
	outline: none;
	-webkit-filter: hue-rotate(330deg);
	cursor: pointer;	
}

.con01_img{
		position: absolute;
	display: block;
	z-index: 1;
}


.copy{
	margin:-10px;
	margin-top:1px;
	cursor: pointer; 
}

.codebg{
	width:180px;
	height:40px;
	font-size:23px;
	color:#000;
	border: none;
	text-align:center;
	outline: none;
	line-height: 37px;
	position: absolute;
  margin:680px 0 0 230px;
  background-color: transparent;
  font-weight: bolder;
}


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

/*coupon end*/

.content_02{
  width: 1200px;
  margin: 0 auto;
  display: table;
 /* background: url(../images/con02_bg.png) no-repeat;*/
  background-position: top center;	
  position: relative;
}

.content_02 ul{
	margin:270px 0 0 58px;
}

.content_02 li{
	float: left;
	margin:10px 0 0 0px;
}

.content_02 li a:hover{
	float: left;
	transition: 0.3s; 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
	/*box-shadow:0 2px 0 rgba(0,0,0,0.2);	*/
  	-webkit-transform:scale(0.98);
    -moz-transform:scale(0.98);
    -ms-transform:scale(0.98);
    -o-transform:scale(0.98);
    transform:scale(0.98);	
	/*-webkit-filter: hue-rotate(330deg);    	*/
}

.content_02 img:hover , .content_02-1 img:hover{
	transition: 0.3s; 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
	/*box-shadow:0 2px 0 rgba(0,0,0,0.2);	*/
  	-webkit-transform:scale(0.98);
    -moz-transform:scale(0.98);
    -ms-transform:scale(0.98);
    -o-transform:scale(0.98);
    transform:scale(0.98);	
	/*-webkit-filter: hue-rotate(330deg);    	*/
}

.con01_pop{
	display: block;
	position: absolute;
	top:275px;
	left: 730px;
	z-index: 5;
	animation: heartBeat 1s 1s linear infinite
}


@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        filter: brightness(100%)
    }

    40% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        filter: brightness(100%)
    }

    60% {
        -webkit-transform: scale(1);
        transform: scale(1);
        filter: brightness(100%)
    }

    80% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
        filter: brightness(100%)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        filter: brightness(100%)
    }
}

.con02_pop01{
	display: block;
	position: absolute;
	top:460px;
	right: 50px;
	z-index: 5;
	animation: wave 0.4s linear infinite alternate;
}


.con02_pop02{
	display: block;
	position: absolute;
	top:920px;
	right: 50px;
	z-index: 5;
	animation: wave 0.4s linear infinite alternate;
}


.con02_btn{
	display: block;
	position: absolute;
	z-index: 999;
	top: 1115px;
	margin-left:450px;
}

.con02_btn:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
	/*box-shadow:0 2px 0 rgba(0,0,0,0.2);	*/
  	-webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);	

}



.go01{
	display: block;
	position: absolute;
	margin-top: 97px;
	margin-left: 295px;
	animation: click 0.4s linear infinite alternate;
}

.go02{
	display: block;
	position: absolute;
	margin-top: 350px;
	margin-left: 110px;
	animation: click 0.4s linear infinite alternate;
}


.go03{
	display: block;
	position: absolute;
	margin-top: 340px;
	margin-left: 493px;
	animation: click 0.4s linear infinite alternate;
}


.go04{
	display: block;
	position: absolute;
	margin-top: 490px;
	margin-left: 315px;
	animation: click 0.4s linear infinite alternate;
}

.go01:hover , .go02:hover , .go03:hover , .go04:hover{
	-webkit-filter:hue-rotate(120deg);
	/*box-shadow:0 2px 0 rgba(0,0,0,0.2);	*/
  	-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_02-1{
	display: block;
	margin:30px auto 0 auto; 
	padding:0; 
	width:1200px;
}

.content_02-1 img{
	margin:20px auto; 		
}


.content_03{
	display: block;
	position: relative;
	margin:0px auto 0px auto; 
	padding:0; 
	width:1200px;
	height: 538px;
  background-position: top center;		
 	background-image: url(../images/con04_bg.png); 
	/*-webkit-filter: drop-shadow(5px 5px 5px rgba(255,255,255,100));	*/	
}

.content_03 ul{
	display: block;
	padding:0; 
	padding: 190px 0 0 70px;
}

.content_03 li{
	float: left;
	position: relative;
	z-index: 555px;
	padding: 0px 18px 0 0;
}

.content_03 li:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
	/*box-shadow:0 2px 0 rgba(0,0,0,0.2);	*/
  	-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_03 li.title01{
	position: absolute;
	top: 0px;
	left: 0px;
}

.content_03 .link{
	z-index: 99999;
  width: 70%;
  position: absolute;
  margin: 0 auto;
  display: block;
  margin-left: 100px;
}

.content_03-2{
	width: 1200px;
	height: 780px;
	margin: 0 auto;
	position: relative;
	background-image: url(../images/prod_bg.png);
	background-repeat: no-repeat;
	background-position:top center;
	display: table;
	margin-top:10px;
	padding-left: 0px;
}

.content_03-2  ul.prod_01{
	float: left;
	margin-left: 310px;
}

.content_03-2 .prod_01 li{
	width: 272px;
	float: left;
	margin: 25px 0 10px 10px;
}

.content_03-2 ul.prod_02{
	float: left;
	margin-left: 30px;
}

.content_03-2 .prod_02 li{
	width: 272px;
	float: left;
	margin: 35px 0 10px 10px;
}


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

.content_04{
	display: block;
	margin:0 auto 40px auto; 
	padding:0; 
	width:1200px;
	height: 1230px;
	position: relative;
	background-image: url(../images/prod_bg.png) ;	
}

.content_04 ul{
	display: block;
	position: relative;
	margin:20px auto 0 50px; 	
	padding-top: 170px;
}

.content_04 li{
	display: block;
	position: relative;
	float: left;
	margin:15px 0 10px 15px;
}

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


.content_05{
	display: block;
	margin:50px auto 20px auto; 
	padding:0; 
	width:1200px;
	position: relative;
}

.btn_a{
	display: block;
	position: absolute;
	margin:0 auto;
    top: 1620px;
    left: 500px;
	z-index: 999;	
}


.btn_b{
	display: block;
	position: absolute;
	margin:0 auto;
    top: 815px;
    left: 350px;
	z-index: 999;	
}

.btn_c{
	display: block;
	position: absolute;
	margin:0 auto;
	top: 1025px;
  left: 240px;
	z-index: 999;	
}

.btn_d{
	display: block;
	position: absolute;
	margin:0 auto;	
  top: 1207px;
  left: 590px;
	z-index: 999;	
}

.btn_e{
	display: block;
	position: absolute;
	margin:0 auto;
  top: 1565px;
  left: 655px;
	z-index: 999;	
}

.btn_f{
	display: block;
	position: absolute;
	margin:0 auto;
  top: 1602px;
  left: 355px;
	z-index: 999;	
}

.btn_a img:hover ,.btn_b img:hover ,.btn_c img:hover, .btn_d img:hover , .btn_e img:hover, .btn_f img:hover{
	transition: 0.3s;
	-webkit-transform:translateX(3px); 
	transform:translateX(3px);
		cursor:pointer;	
} 


.btn_go{
	display: block;
	position: absolute;
	margin:0 auto;
	margin-top: 240px;
	margin-left:880px;
	z-index: 999;
	animation: click .3s linear infinite alternate;
}

.btn_rule{
	display: block;
	position: absolute;
	margin:0 auto;
	margin-top: 500px;
	margin-left:800px;
	z-index: 999;
}

.btn_2020:hover , .btn_go:hover ,.btn_rule:hover ,
.tip01 img:hover ,.tip02 img:hover ,.tip03 img:hover{
	-webkit-filter:hue-rotate(320deg);
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
	/*box-shadow:0 2px 0 rgba(0,0,0,0.2);	*/
  	-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 img{
	display: block;
	margin:0px auto; 
	padding:0; 
	/*-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));*/
}


.more_logo{
  width: 1200px;
  height: 540px;
  margin: 0 auto;
  display: table;
  position: relative;
  /*background: url(../images/shop_bg.png) no-repeat;*/
  background-position: top center;
}


.more_logo ul{
	margin: 0 auto;
	display: block;
	margin:10px 0px 40px 35px;
}

.more_logo li{
	float: left;
	margin: 5px 0px 0px 0px;
}
.more_logo li:hover{
	-webkit-filter:brightness(100%); 
	transition: 0.3s;
	transform:translateY(2px);
	-webkit-transform:translateY(2px);
	-moz-transform:translateY(2px);
	-ms-transform:translateY(2px);
	-o-transform:translateY(2px)	
}

.shop_btn{
	display: block;
	position: absolute;
	top:460px;
	left: 440px;
}

.shop_btn:hover{
	transition: 0.3s;
	-webkit-filter:brightness(110%); 
	-webkit-transform:translateY(-3px); 
	transform:translateY(-3px); 
	/*box-shadow:0 2px 0 rgba(0,0,0,0.2);	*/
  	-webkit-transform:scale(0.95);
    -moz-transform:scale(0.95);
    -ms-transform:scale(0.95);
    -o-transform:scale(0.95);
    transform:scale(0.95);	

}




/*------------------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 50px 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: #fff;
	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.95;
}

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

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

.footer li a{
	width: 200px;
	display: block;
	text-align: center;
  background-color: #fff;
  border-radius: 20px;
  color: #000000;
  font-size: 17px;
  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: #00263c;	
}

.footer .join_m a{
	display: none;
}


.footer_m{
	display: none;
}

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


		.kv_img01{
			display: none;	
		}

		.kv_img02{
			display: none;
		}

		.kv_img03{
			display: none;
		}

		.kv_img04{
			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;
		}


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

		.social span{
			display: block;
			color: #fff;
			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: 100%;
			margin:0 auto;
		}

		.footer_m li{
			display: table;
			width: 32%;
			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.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:675px}
50%{top:670px}
100%{top:675px}
}

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

@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(100%)}
40%{filter:brightness(115%)}
80%{filter:brightness(100%)}
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 updown2{
  0% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  50% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  100% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }	
}	



@keyframes updown3 {
  25% {transform: translateY(8px);}
  50%, 100% {transform: translateY(px);}
  75% {transform: translateY(-8px);}		
}	


@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: fixed;
  left: 50px;
  top: 138px;
  z-index: -1;
 }

.kv_firework_b{
  position: fixed;
	top: 50px;
  left: 400px;
  z-index: -1;
}

.kv_firework_c{
  position: fixed;
	top: 450px;
  left: 400px;
  z-index: -1;
}

.kv_firework_d{
  position: fixed;
	top: 130px;
  right: 450px;
  z-index: -1;
}


.kv_firework_e{
  position: fixed;
	top: 500px;
  right: 300px;
  z-index: -1;
}

.kv_firework_f{
  position: fixed;
	top: 200px;
  right: 150px;
  z-index: -1;
}

.kv_firework_g{
  position: fixed;
	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;  
 }
 }



	@media screen and (min-width: 768px) and (max-width: 1024px){
			/*煙火*/
		.kv_firework_a {
		  position: fixed;
		  left: 50px;
		  top: 138px;
		  z-index: -1;
		 }

		.kv_firework_b{
		  position: fixed;
			top: 50px;
		  left: 40px;
		  z-index: -1;
		}

		.kv_firework_c{
		  position: fixed;
			top: 550px;
		  left: 100px;
		  z-index: -1;
		}

		.kv_firework_d{
		  position: fixed;
			top: 130px;
		  right: 50px;
		  z-index: -1;
		}


		.kv_firework_e{
		  position: fixed;
			top: 500px;
		  right: 30px;
		  z-index: -1;
		}

		.kv_firework_f{
		  position: fixed;
			top: 200px;
		  right: 150px;
		  z-index: -1;
		}

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