@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{
	background:url(../images/bg.jpg) no-repeat;
	background-repeat:no-repeat;background-position:top center;
	background-attachment:scroll;background-color:#fff7f3;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}




/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}



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

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

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

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

		body{min-width:100%;background-repeat:no-repeat;
			background-image: url(../images/mbg.jpg);
			background-attachment:scroll;margin:0}

		#gotop , .sidebar{
			display: none;
		}

		.money{
			display: none;
		}



	}



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

	

		#gotop , .sidebar{
			display: none;
		}
		.kv_pic02{
			display: none;
		}
	.topbar{width:105%;}

}


.sidebar ul li a:hover{
   -webkit-filter: brightness(115%);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
	transform:scale(1.1);
}
}



.wrap{
	max-width: 100%;
  margin: 0 auto;
  height: auto;
}

.kv_content{
	width:1200px; 
	margin: 0 auto;
	height:940px;
	position: relative;
	margin-top: -20px;
}

.kv_title{
	position: absolute;
	z-index: 1;
	top:80px;
  left:320px;
}

.kv_title02{
   position: absolute;
   display: block;
   top: 150px;
   left: 70px;
   z-index: 999;
   cursor: pointer;
 }

 .kv_title03{
   position: absolute;
   display: block;
   top: 600px;
   left: 60px;
   z-index: 999;
   cursor: pointer;
 }

.kv_title img:hover,.kv_title2 img:hover,.kv_content-2 img:hover{
	-webkit-filter: brightness(105%);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;     
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;		
	-webkit-transform:translateY(-3px);
	-moz-transform:translateY(-3px);
	-ms-transform:translateY(-3px);
	-o-transform:translateY(-3px);
	transform:translateY(-3px);	
}
.kv_content-2{
	width:1001px; 
	margin: 0 auto;
	position: relative;
}

.kv_img01{
	position: absolute;
	margin-top: 130px;
  left: -120px;
  -webkit-animation: bounce-down 3s -.20s linear infinite;  
}

.kv_img02{
	position: absolute;
	margin-top: 100px;
  right: -100px;
  -webkit-animation: bounce-down 5s -.20s linear infinite;  
}


.kv_pic01{
	position: absolute;
	left:155px; 
	top:150px;
	animation-delay: 0.5s;
}
.kv_pic02{
	position: absolute;
	left:-70px;
	top:437px;
	animation-delay: 0.8s;
	cursor: pointer;
}

.kv_content-2 img:hover{
	cursor: pointer;
}

/**.discount img:hover,.kv_pic02 img:hover{
	cursor: pointer;
	-webkit-filter: brightness(115%);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-transform:scale(0.95);
	-moz-transform:scale(0.95);
	-ms-transform:scale(0.95);
	-o-transform:scale(0.95);
	transform:scale(0.95);
}**/
.bounce-down{
 -webkit-animation: bounce-down 0.9s -.20s linear infinite;
    animation: bounce-down 0.9s -.20s linear infinite;
}
.bounce-down2{
 -webkit-animation: bounce-down 0.3s -.20s linear infinite;
    animation: bounce-down 2.8s -.20s linear infinite;
}
.brightness-play {
    -webkit-animation: brightness2-play 3s -.20s linear infinite;
    animation: brightness2-play 3s -.20s linear infinite;
}

/*animation*/
@keyframes brightness2-play{
	0%{filter:brightness(100%);}
	88%{filter:brightness(100%);}
	91%{filter:brightness(110%);}
	94%{filter:brightness(100%);}
	97%{filter:brightness(110%);}
	100%{filter:brightness(100%);}
}
 @-webkit-keyframes bounce-down {
         25% {-webkit-transform: translateY(-8px);}
         50%, 100% {-webkit-transform: translateY(0);}
         75% {-webkit-transform: translateY(8px);}
        }

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


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

@keyframes scroll{0%{top:610px}
50%{top:620px}
100%{top:610px}
}


.content_00{
	width: 1200px; 
	margin: 0 auto;
	animation-delay:0.5s;
	margin-top: 80px; 
	position: relative;
}


.con00btn{
	position: absolute;
	top: 450px;
  left: 540px;
	animation: click 0.4s linear infinite alternate;
	z-index:9999;

}

.content_01{
	width: 1200px; 
	margin: 0 auto;
	animation-delay:0.5s;
	margin-top: 50px; 
	position: relative;
}


.con01btn{
	position: absolute;
	top: 600px;
  left: 457px;
	animation: click 0.4s linear infinite alternate;
	z-index:9999;

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

.coupon_copy01{
	position:absolute;
	margin:430px 0px 0 53px;
	z-index: 999;
	cursor: pointer;
}

.coupon_copy02{
	position:absolute;
	margin:430px 0px 0 384px;
	z-index: 999;
	cursor: pointer;
}

.coupon_copy03{
	position:absolute;
	margin:430px 0px 0 725px;
	z-index: 999;
	cursor: pointer;
}

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


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

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

.codebg{
	width:220px;
	height:30px;
	font-size:24px;
	color:#000;
	border: none;
	text-align:center;
	outline: none;
	line-height: 37px;
}


.coupon img:hover {
-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;		
	-webkit-transform: translateY(-5px); scale(1);filter:brightness(115%);
	-moz-transform: translateY(-5px); scale(1);filter:brightness(115%);
	-ms-transform: translateY(-5px); scale(1);filter:brightness(115%);
	-o-transform: translateY(-5px); scale(1);filter:brightness(115%);
	transform: translateY(-5px); scale(1);filter:brightness(115%);
}

.content_02{
	width: 1200px;
	margin: 0 auto;
	margin-top: 30px;
	animation-delay:0.5s;
    position: relative;
}

	
.con02btn-2:hover,.more:hover{-webkit-filter: brightness(105%);
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;     
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;		
	-webkit-transform:translateX(3px);
	-moz-transform:translateX(3px);
	-ms-transform:translateX(3px);
	-o-transform:translateX(3px);
	transform:translateX(3px);	
}
.content_03{
	width: 1200px;
	margin: 0 auto;
	animation-delay:0.5s;
	margin-top:40px;
    position: relative;
}

.con03btn:hover,.con02btn:hover{
-webkit-filter: brightness(120%);
		/* Firefox */ -webkit-transition:  0.5s; 
		/* Safari and Chrome */ -o-transition:  0.5s; 
		/* Opera */ 
		transition:  0.5s;}
.con02btn:hover,.con03btn img:hover,.con03btn02 img:hover,.con04 a:hover,.con05 a:hover{
-webkit-filter: brightness(115%);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-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_04,.content_06{
	width: 1004px;
	margin: 0 auto;
	animation-delay:0.5s;
}
.content_04{
	position: relative;
	margin-top: 100px;
}
.con04{
	position: absolute;
	top:255px;
	left:14px;
}
.content_04-1,.content_04-2{
	display: flex;
	flex-direction: row;
    z-index: 1;
}

.content_06{
	width: 1200px;
	margin-top:0px;
	position: relative;
}
.con06btn{
	display: block;
	position: absolute;
	top: 592px;
  left: 385px;
	cursor:pointer;  
}

.con06btn img:hover{
	-webkit-filter: brightness(120%);
	transform:translateY(2px);
	-webkit-transform:translateY(2px);
	-moz-transform:translateY(2px);
	-ms-transform:translateY(2px);
	-o-transform:translateY(2px);	 
}


.btn_more a{
	position: absolute;
	top: 470px;
	left:540px;
	z-index: 99;
	animation: click 0.4s linear infinite alternate;	
}


.btn_more a:hover{
	-webkit-filter: brightness(120%);
	transform:translateY(2px);
	-webkit-transform:translateY(2px);
	-moz-transform:translateY(2px);
	-ms-transform:translateY(2px);
	-o-transform:translateY(2px);	
}

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

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

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

.content_03-2  ul.prod_01{
	float: left;
	margin-top: 155px;
	margin-left: 50px;
}

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

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

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

.content_03-1 li img:hover,.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;
}





a,a:link,a:visited{color:red;text-decoration: none}
a:hover{color:red;text-decoration: none;}
/*------------------SOCIAL ICON---------------*/
.btn01 a{
	position: absolute;
	top: 170px;
	left:575px;
	display: block;
	background-color: #ed4955;
	color: #fff;
	padding:7px 28px;
	font-size: 20px;
	text-align: center;
	border-radius: 8px;
	letter-spacing: 0.1em;	
}

.btn02 a{
	position: absolute;
	top: 467px;
	left:280px;
	display: block;
	background-color: #ed4955;
	color: #fff;
	padding:7px 28px;
	font-size: 20px;
	text-align: center;
	border-radius: 8px;
	letter-spacing: 0.1em;	
}

.btn03 a{
  position: absolute;
  top: 290px;
  left: 565px;
  display: block;
  background-color: #ed4955;
  color: #fff;
  padding: 7px 28px;
  font-size: 20px;
  text-align: center;
  border-radius: 8px;
  letter-spacing: 0.1em;	
}

.btn01 a:hover , .btn02 a:hover , .btn03 a:hover{
	color: #fdffd6;
	background-color: #ff8a00;
}


#btn{width:1200px;margin:0 auto;padding-left:38px;padding-bottom:130px;padding-top:30px;}
#btn ul{
}

#btn li{
	width: 260px;
	height: 70px;
	float: left;
	margin-left: 24px;
}

#btn 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;
}


/*------------------FOOTER ICON---------------*/
.fa-chevron-circle-right{
	font-size: 20px;
	margin-left: 5px;
}
/* --footer---------------------------------------------------------------------------- */
		
#footer{background-color:#000;width:100%;height:71px;display:inline-block;bottom:0;float:left}
#footer ul{width:1000PX;height:71PX;margin:0 auto;}
#footer li{float:left}
#footer li a.f01{background:url(../images/footer01.png) no-repeat;width:250px;height:71px;display:block}
#footer li a.f01:hover{background-color:#f38023;-moz-transition:opacity .5s;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
#footer li a.f02{background:url(../images/footer02.png) no-repeat;width:250px;height:71px;display:block}
#footer li a.f02:hover{background-color:#f38023;-moz-transition:opacity .5s;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
#footer li a.f03{background:url(../images/footer03.png) no-repeat;width:250px;height:71px;display:block}
#footer li a.f03:hover{background-color:#f38023;-moz-transition:opacity .5s;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
#footer li a.f04{background:url(../images/footer04.png) no-repeat;width:250px;height:71px;display:block}
#footer li a.f04:hover{background-color:#f38023;-moz-transition:opacity .5s;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
#footer li a.f05{background:url(../images/footer05.png) no-repeat;width:250px;height:71px;display:block}
#footer li a.f05:hover{background-color:#f38023;-moz-transition:opacity .5s;-webkit-transition:.5s;-o-transition:.5s;transition:.5s}
		 


@media screen and (min-width: 768px) and (max-width: 1024px){
		#footer{
			width:125%
		}




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

@keyframes scroll{0%{top:590px}
50%{top:600px}
100%{top:590px}
}



	}


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

 @-webkit-keyframes bounce-down {
         25% {-webkit-transform: translateY(-5px);}
         50%, 100% {-webkit-transform: translateY(0);}
         75% {-webkit-transform: translateY(5px);}
        }

        @keyframes bounce-down {
         25% {transform: translateY(-5px);}
         50%, 100% {transform: translateY(0);}
         75% {transform: translateY(5px);}
        }
@-webkit-keyframes bounce-downtwo {
         25% {-webkit-transform: translateY(-15px);}
         50%, 100% {-webkit-transform: translateY(0);}
         75% {-webkit-transform: translateY(15px);}
        }

        @keyframes bounce-downtwo {
         25% {transform: translateY(-15px);}
         50%, 100% {transform: translateY(0);}
         75% {transform: translateY(15px);}
        }  

	@media screen and (min-width: 768px) and (max-width: 1024px){
		.footer{
			width:115%
		}