@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: #fff;
	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: #333333;
	line-height: 38px;
	margin: 0 auto;
	display: block;
	position: relative;
	z-index: 999;
}

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

.sidebar{
    position: fixed;
    right: 20px;
    top:20%;
    z-index: 999999;
    display: block;
    background-color: #333333;
    opacity: 0.8;
    /*border-radius: 80px;*/
    padding: 30px 15px;
	
}


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

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

}


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

.sidebar .service a{
	font-size: 16px;
	color: #fbff8c;
}

.sidebar .service a:hover{
	color: #ffe08c;
}


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

.sidebar ul li a:hover{
	color: #ffe08c;
   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: #fff;
			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_title{
  position: absolute;
  display: block;
  top: 180px;
  right:60px;
  z-index:2;
}


.kv_slogan0{
	position: absolute;
	display: block;
  top: 490px;
  left: 540px;
  animation-delay: 0.3s;  
}

.kv_slogan1{
	position: absolute;
	display: block;
	top: 80px;
  right: 460px;
  z-index: 10;
  animation: updown2 1s linear infinite;
}


.kv_logo{
	position: absolute;
	display: block;
    top: 100px;
    right: 250px;
  animation-delay: 0.2s;
  z-index:9999;
}


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


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

.kv_img01{
	position: absolute;
	margin-top: 420px;
  left: 160px;
  animation-delay: 0.5s;
	z-index: 9;
  animation:  shake 5s linear infinite;
}

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

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

.kv_img03{
	position: absolute;
	margin-top: 100px;
  right: -150px;
  animation-delay: 0.5s;
	z-index: -1;
	animation: cloudmove2 15s linear infinite;  
}

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

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

.arrow01{
	position: absolute;
	z-index: 9999;
	top:500px;
	right: 360px; 	
}

.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;
  height: 2510px;
  margin: 0 auto;
  display: table;
  /*background: url(../images/con01_bg.png) no-repeat;*/
  background-position: top center;	
  position: relative;
  margin-bottom: 10px;
  margin-top: 30px;
}

.con01_01 img:hover , .con01_02 img:hover ,.con01_03 img:hover ,
.con01_04 img:hover , .con01_05 img:hover ,.con01_06 img:hover, 
.con01_07 img:hover ,
.con01_08 img:hover , .con01_09 img:hover ,.con01_10 img:hover,
.con01_11 img:hover , .con01_12 img:hover ,.con01_13 img:hover,
.con01_14 img:hover{
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;		
	-webkit-transform:scale(.98); scale(1);filter:brightness(94%);
	-moz-transform: scale(.98); scale(1);filter:brightness(94%);
	-ms-transform: scale(.98); scale(1);filter:brightness(94%);
	-o-transform: scale(.98); scale(1);filter:brightness(94%);
	transform: scale(.98); scale(1);filter:brightness(94%);	
}

.con01_01{
	display: block;
	position: absolute;
	margin:20px 20px 0 15px;
}

.con01_02{
	display: block;
	position: absolute;
  margin:20px 20px 0 800px;
}

.con01_03{
	display: block;
	position: absolute;
	margin:355px 20px 0 15px;
}

.con01_04{
	display: block;
	position: absolute;
	margin:690px 20px 0 15px;
}

.con01_05{
	display: block;
	position: absolute;
	margin:690px 20px 0 408px;
}

.con01_06{
	display: block;
	position: absolute;
	margin:690px 20px 0 800px;
}

.con01_07{
	display: block;
	position: absolute;
	margin:1027px 20px 0 15px;
}

.con01_08{
	display: block;
	position: absolute;
	margin:1360px 20px 0 15px;
}

.con01_09{
	display: block;
	position: absolute;
	margin:1545px 20px 0 15px;
}

.con01_10{
	display: block;
	position: absolute;
	margin:1360px 20px 0 804px;
}

.con01_11{
	display: block;
	position: absolute;
	margin:1730px 20px 0 15px;
}

.con01_12{
	display: block;
	position: absolute;
	margin:1730px 20px 0 405px;
}

.con01_13{
	display: block;
	position: absolute;
	margin:2065px 20px 0 15px;
}

.con01_14{
	display: block;
	position: absolute;
	margin:2065px 20px 0 605px;
}

/*coupon end*/

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

.con02_01 img:hover , .con02_02 img:hover ,.con02_03 img:hover ,
.con02_04 img:hover , .con02_05 img:hover ,.con02_06 img:hover{
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;		
	-webkit-transform:scale(.98); scale(1);filter:brightness(94%);
	-moz-transform: scale(.98); scale(1);filter:brightness(94%);
	-ms-transform: scale(.98); scale(1);filter:brightness(94%);
	-o-transform: scale(.98); scale(1);filter:brightness(94%);
	transform: scale(.98); scale(1);filter:brightness(94%);	
}

.con02_01{
	display: block;
	position: absolute;
	margin:20px 20px 0 15px;
}

.con02_02{
	display: block;
	position: absolute;
	margin:530px 20px 0 15px;
}


.con02_03{
	display: block;
	position: absolute;
	margin:530px 20px 0 655px;
}

.con02_04{
	display: block;
	position: absolute;
	margin:1065px 20px 0 15px;
}

.con02_05{
	display: block;
	position: absolute;
	margin:1065px 20px 0 615px;
}




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

.content_02-1 ul{
	display: block;
	padding:0; 
	padding: 10px 0 0 40px;	
}

.content_02-1 li{
	float: left;
	position: relative;
	z-index: 5px;
	padding: 0px 0px 0 0;
}

.content_02-1 li: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.96);
    -moz-transform:scale(0.96);
    -ms-transform:scale(0.96);
    -o-transform:scale(0.96);
    transform:scale(0.96);	
}

.con04_social{
	width: 1200px;
	height: 314px;
	position: absolute;
	margin-top: 350px;
	background: url(../images/con04_social.png) no-repeat;
}

.con04_social ul{
	margin:100px 0 0 265px;
}
.con04_social li{
	float: left;
	padding-left: 30px;
}


.content_02-2{
	display: block;
	position: relative;
	margin:50px auto 0px auto; 
	padding:0; 
	width:1200px;	
}

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

.content_03  ul.step_a {
	display: block;
	padding:0;
	margin-top: 50px;
	margin-left: 70px;
}

.content_03  .step_a li{
	display: block;
	padding:0; 
	float: left;
	margin:0 0 0 40px;
}


.content_03  ul.step_b {
	display: block;
	padding:0;
	margin-top: 60px;
	margin-left: 220px;
}

.content_03  .step_b li{
	display: block;
	padding:0; 
	float: left;
	margin:0 0 0 40px;
}


.content_03 .next01{
	z-index: 99;
  position: absolute;
  margin: 0 auto;
  display: block;
  margin:170px 0 0 400px
}

.content_03 .next02{
	z-index: 99;
  position: absolute;
  margin: 0 auto;
  display: block;
  margin:170px 0 0 750px
}

.content_03 .next03{
	z-index: 99;
  position: absolute;
  margin: 0 auto;
  display: block;
  margin:530px 0 0 570px;
}

.content_03 .order img{
  display: block;
  padding:40px 0 0 0;
}


.content_03 .con03_no{
	position: absolute;
  display: block;
  margin:550px 0 0 38px;
}



.content_03-2{
	width: 1200px;
	height: 1305px;
	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:20px auto 0px auto; 
	padding:0; 
	width:1200px;
	height: 500px;
	position: relative;
}

.content_04 ul{
	margin:30px auto 0px 30px;
}

.content_04 li{
	float: left;
	margin:5px;
}

.content_04 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.96);
    -moz-transform:scale(0.96);
    -ms-transform:scale(0.96);
    -o-transform:scale(0.96);
    transform:scale(0.96);	
}

.content_04 .con04_text img{
	display: block;
	margin: 0 0 0 370px;
	padding-top: 10px;
}

.content_05{
	display: block;
	margin:60px auto 0px auto; 
	padding:0; 
	width:1200px;
	height: 700px;
	position: relative;
}

.content_05 .pop{
    position: absolute;
    display: block;
    z-index: 9;
    left: 790px;
    top: 175px;
}

.content_05 ul{
	margin:0px auto 0px 10px;
}

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

.content_05 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.96);
    -moz-transform:scale(0.96);
    -ms-transform:scale(0.96);
    -o-transform:scale(0.96);
    transform:scale(0.96);	
}


.content_06{
	display: block;
	margin:0px auto 0px auto; 
	padding:0; 
	width:1200px;
	height: 925px;
	position: relative;
	padding-top: 0px;
}

.content_06 .title{
	padding-bottom: 20px;
}

.content_06 ul{
	display: block;
	position: relative;
	margin:0 0 0 90px;
}

.content_06 li{
	float: left;
}

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


.btn_a{
	display: block;
	position: absolute;
	margin:0 auto;
  top: 490px;
  left: 340px;
	z-index: 99;	
	animation: click3 .4s linear infinite alternate;		
}

.btn_a1{
	display: block;
	position: absolute;
	margin:0 auto;
  top: 405px;
  left: 1010px;
	z-index: 99;	
}

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

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

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

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

.btn_f{
	display: block;
	position: absolute;
	margin:0 auto;
  top: 1205px;
  left: 435px;
	z-index: 999;
	animation: click3 .4s linear infinite alternate;		
}

.btn_g{
	display: block;
	position: absolute;
	margin:0 auto;
  top: 720px;
  left: 250px;
	z-index: 999;	
}

.btn_h{
	display: block;
	position: absolute;
	margin:0 auto;
  top: 320px;
  left: 340px;
	z-index: 99;		
	animation: click3 .4s linear infinite alternate;		
}


.btn_i{
	display: block;
	position: absolute;
	margin:0 auto;
  top: 460px;
  left: 340px;
	z-index: 99;
	animation: click3 .4s linear infinite alternate;				
}

.btn_j{
	display: block;
	position: absolute;
	margin:0 auto;
  top: 670px;
  left: 340px;
	z-index: 99;			
}
.btn_k{
	display: block;
	position: absolute;
	margin:0 auto;
	top: 445px;
  left: 235px;
	z-index: 99;				
}
.btn_l{
	display: block;
	position: absolute;
	margin:0 auto;
	top: 527px;
  left: 375px;
	z-index: 99;				
}

.btn_a1 img:hover ,.btn_a img:hover ,.btn_b img:hover ,.btn_c img:hover, .btn_d img:hover , 
.btn_e img:hover, .btn_g img:hover, .btn_h img:hover, .btn_i img:hover, 
.btn_j img:hover {
	transition: 0.4s;
	-webkit-transform:translateX(4px); 
	transform:translateX(4px);
	cursor:pointer;	
	-webkit-filter:brightness(140%); 	
} 

.btn_f img:hover{
	transition: 0.4s;
	cursor:pointer;	
	-webkit-filter:brightness(120%); 
}

.btn_k img:hover , .btn_l img:hover{
	transition: 0.4s;
	-webkit-transform:translateX(4px); 
	transform:translateX(4px);
	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_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: 750px;
  margin: 0 auto;
  display: table;
  position: relative;
  background: url(../images/shop_bg.png) no-repeat;
  background-position: top center;
  margin-bottom: 200px;
  margin-top: 100px;
}


.more_logo ul{
	margin: 0 auto;
	display: block;
	margin:330px 0px 20px 50px;
	float: left;
}

.more_logo li{
	margin: 10px 0px 0px 40px;
}
.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: #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: #333333;
	bottom: 0;
	position:fixed;
	z-index: 99999;
	opacity: 0.95;
}

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

.footer li{
	display: table;
	width: 49%;
	float: left;
	border-left: 1px solid #fff;
}

.footer li:first-child{
	border-left:0px solid #fff;
}

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



.footer li a:hover{ 
  color: #fff7bb;	
}

.footer .join_m a{
	display: none;
}


.footer_m{
	display: none;
}

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


		.kv_img01{
			display: block;
		}

		.kv_img02{
			display: none;
		}

		.kv_img03{
			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: #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: 102%;
			height: 100px;
			background: #333333;
			bottom: 0;
			position:fixed;
			z-index: 9999;
			opacity: 0.95;
			display: block;
		}

		.footer_m ul{
			margin:0 auto;
		}

		.footer_m li{
			display: table;
			width: 49%;
			float: left;
			border-left: 1px solid #fff;
		}

		.footer_m li:first-child{
			border-left:0px solid #538cb4;
		}

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





	}




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

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

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

@keyframes click3 {
0% { transform: scale(1); }
100% {transform: scale(0.97);}
}


@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 3s -.10s linear infinite;
	animation:brightness2-play 3s -.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{
	-webkit-animation:brightness0 2s -.10s linear infinite;
	animation:brightness0 2s -.10s linear infinite;
}


@keyframes brightness0{
0%{filter:brightness(100%)}
10%{filter:brightness(80%)}
20%{filter:brightness(100%)}
40%{filter:brightness(80%)}
60%{filter:brightness(100%)}
80%{filter:brightness(80%)}
100%{filter:brightness(100%)}
}


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