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

/*基本*/
body{ margin:0; padding:0;  }

	@media screen and (max-width:767px){
	body { font-size:14px;}
	}
#edm{line-height:0}
#footer{display:none}
.AreaTitlemo{display:none}

/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}


/*全BOX版面*/
.WRAPPER { position: relative; display:block; margin: 0 auto; padding: 0; width:100%; min-width:1220px; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; overflow:hidden; }
.WRAPPER ul { margin:0; padding:0; list-style: none outside none;}
.WRAPPER img { border:0px; vertical-align:top }
.WRAPPER a { text-decoration:none }
		@media screen and (max-width:767px){
		.WRAPPER {  position:relative; display:inline-block; margin:0; padding:0; width:100%; min-width: inherit }
		.WRAPPER img {  width:100%;  height:auto;}
		.snowArea { display:none;}
	}
	
/*背景*/
.bg { z-index:-3; position: absolute; top:0; left:0; width:100%; height:100%; background: url(bg_1108.jpg) no-repeat center top #0a0b0e ; pointer-events:none;}
.bg_bottom1 { z-index:-3; position: absolute; top:544px; left:0; width:100%; height:100%; background: url(bg_bottom1-1108.png) repeat center top ; pointer-events:none; mix-blend-mode: lighten }
.bg_bottom2 { z-index:-3; position: absolute; top:2400px; left:0; width:100%; height:100%; background: url(bg_bottom2-1108.png) repeat center top ; pointer-events:none;mix-blend-mode: lighten }
@media screen and (max-width:767px){
	.bg { background: url(bg-m_1108.jpg) no-repeat center top #0a0b0e ; background-size:100%;}
	.bg_bottom1 { display:none; background:none;}
	.bg_bottom2 { display:none; background:none;}
	}



/*區塊_all*/
.Area { z-index:1; position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center }
/*.Area a { position:relative; display:inline-block;} */
.Area1220 { margin:0 auto; width:1220px;}
.Area1260 { margin:0 auto; width:1284px;}
.Area960 { margin:0 auto; width:960px;}

	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area1260 { width:100%;}
		.Area960 { margin:0 auto; width:100%;}		
	}


/*Area_top*/
.Area_top { height:618px; }
.Area_top .catch { z-index: 0; position:absolute; left:-390px; top:0px; width:2000px; height: auto;}
.Area_top .catch .title { z-index: 0; position:absolute; left:637px; top:0px; animation-delay:0.2s; pointer-events:none;}
.Area_top .catch .subtitle { z-index: 0; position:absolute; left:651px; top:293px; animation-delay:0.7s; }
.Area_top .catch .shine { z-index: 0; position:absolute; left:637px; top:0px; animation-delay:0.2s; pointer-events:none;}

@media screen and (max-width:767px){
	/*Area_top*/
	.Area_top { height: 76vw }
	.Area_top .catch { z-index: 0; position:absolute; left:0px; top:0px; width:100%; height:auto;}
    .Area_top .catch .title { left:10vw; top:5vw; width:80vw; z-index:10;}
    .Area_top .catch .subtitle { left:6vw; top:40vw; width:65vw; z-index:10;}
    .Area_top .catch .shine { left:10vw; top:5vw; width:80vw; z-index:10;}
}

/*Area_mid*/
.Area_mid {z-index: 0; height:786px; width:1220px;}
@media screen and (max-width:767px){
	.Area_mid { height: 210vw; width:100%; }
}

/*按鈕*/
.Area_btn {position: relative; width:1220px; height: auto; left:0; margin:0px auto; padding:0 0 30px; text-align: center; overflow:hidden; }
.Area_btn ul { display:inline-block; margin:0px 0px; padding:0;}
.Area_btn ul li a { position:relative;}
.Area_btn ul li a img {  transition-duration: 0.2s;}
.Area_btn ul li a img:nth-of-type(2) { position:absolute; width:auto; left:0;}
.Area_btn ul li { float:left; margin:0px -19px; transition-duration: 0.5s;}
.Area_btn ul li:nth-child(odd) { padding-top:0px;}
.Area_btn ul li:hover { 
animation: ease-in-out;
-webkit-transform: scale(0.95);filter:brightness(115%);
-moz-transform: scale(0.95);filter:brightness(115%);
-ms-transform: scale(0.95);filter:brightness(115%);
-o-transform: scale(0.95);filter:brightness(115%);
transform: scale(0.95);filter:brightness(115%);
}
.Area_btn ul li a img:nth-of-type(2):hover { 
animation: ease-in-out;
-webkit-transform: translateY(-10px) ;
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
@media screen and (max-width:767px){
	.Area_btn { width:96%; height:auto; margin:2vw auto 0; padding:0;}
	.Area_btn ul { margin:0 0 0 0; padding:0 0 5vw;}
	.Area_btn ul li a { position:relative;}
	.Area_btn ul li a img {  transition-duration: 0.2s;}
	.Area_btn ul li a img:nth-of-type(2) { position:absolute; width:100%; left:0;}
	.Area_btn ul li { margin:1vw 0 -8vw ; width:33.3%;}
	.Area_btn ul li:nth-child(odd) { padding-top:0;}
	.Area_btn ul li:nth-child(4) { margin-left:17%;}
	.Area_btn ul li:hover { 
		animation: ease-in-out;
		-webkit-transform: none;filter:brightness(100%);
		-moz-transform: none;filter:brightness(100%);
		-ms-transform: none;filter:brightness(100%);
		-o-transform: none;filter:brightness(100%);
		transform: none;filter:brightness(100%);
	}
	.Area_btn ul li a img:nth-of-type(2):hover { 
		animation: ease-in-out;
		-webkit-transform: none;filter:brightness(100%);
		-moz-transform: none;filter:brightness(100%);
		-ms-transform: none;filter:brightness(100%);
		-o-transform: none;filter:brightness(100%);
		transform: none;filter:brightness(100%);
	}
}

/*店家按鈕*/
.Area_brand {position: relative; width:1220px; height: auto; left:0; margin:0px auto 20px; padding:150px 0 30px; text-align: center; overflow:hidden; background:url(area_brand_title.png) center top no-repeat; }
.Area_brand ul { display:inline-block; margin:0px 0px; padding:0;}
.Area_brand ul li a { position:relative;}
.Area_brand ul li a img {  transition-duration: 0.2s;}
.Area_brand ul li a img:nth-of-type(2) { position:absolute; width:auto; left:0;}
.Area_brand ul li { float:left; margin:0px 24px 15px; transition-duration: 0.5s;}
.Area_brand ul li:nth-child(odd) { padding-top:0px;}
.Area_brand ul li:hover { 
animation: ease-in-out;
-webkit-transform: scale(0.95);filter:brightness(115%);
-moz-transform: scale(0.95);filter:brightness(115%);
-ms-transform: scale(0.95);filter:brightness(115%);
-o-transform: scale(0.95);filter:brightness(115%);
transform: scale(0.95);filter:brightness(115%);
}
.Area_brand ul li a img:nth-of-type(2):hover { 
animation: ease-in-out;
-webkit-transform: translateY(-10px) ;
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
@media screen and (max-width:767px){
	.Area_brand { width:100%; height:auto; margin:2vw auto 0; padding:0; background-size:100%;}
	.Area_brand ul { margin:20% 0 0 3vw; padding:0;}
	.Area_brand ul li a { position:relative;}
	.Area_brand ul li a img {  transition-duration: 0.2s;}
	.Area_brand ul li a img:nth-of-type(2) { position:absolute; width:100%; left:0;}
	.Area_brand ul li { margin:1vw 1.2vw 2vw ; width:46.5%;}
	.Area_brand ul li:nth-child(odd) { padding-top:0;}
	.Area_brand ul li:hover { 
		animation: ease-in-out;
		-webkit-transform: none;filter:brightness(100%);
		-moz-transform: none;filter:brightness(100%);
		-ms-transform: none;filter:brightness(100%);
		-o-transform: none;filter:brightness(100%);
		transform: none;filter:brightness(100%);
	}
	.Area_brand ul li a img:nth-of-type(2):hover { 
		animation: ease-in-out;
		-webkit-transform: none;filter:brightness(100%);
		-moz-transform: none;filter:brightness(100%);
		-ms-transform: none;filter:brightness(100%);
		-o-transform: none;filter:brightness(100%);
		transform: none;filter:brightness(100%);
	}
}


/*hover*/
.hover0 {transition-duration: 0.3s;}
.hover0:hover { 
animation: ease-in-out;
-webkit-transform: scale(1.02);filter:brightness(115%);
-moz-transform: scale(1.02);filter:brightness(115%);
-ms-transform: scale(1.02);filter:brightness(115%);
-o-transform: scale(1.02);filter:brightness(115%);
transform: scale(1.02);filter:brightness(115%);
}

/*hover1*/
.hover1 {transition-duration: 0.3s;}
.hover1:hover { 
animation: ease-in-out;
-webkit-transform: scale(1);filter:brightness(120%);
-moz-transform: scale(1);filter:brightness(120%);
-ms-transform: scale(1);filter:brightness(120%);
-o-transform: scale(1);filter:brightness(120%);
transform: scale(1);filter:brightness(120%);
}

/*hover2*/
.hover2 {transition-duration: 0.3s;}
.hover2:hover { 
animation: 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%);
}
	@media screen and (max-width: 736px) {
	.hover0:hover,.hover1:hover,.hover2:hover { 
		-webkit-transform: scale(1) translateY(0);filter:brightness(100%);
		-moz-transform: scale(1) translateY(0);filter:brightness(100%);
		-ms-transform: scale(1) translateY(0);filter:brightness(100%);
		-o-transform: scale(1) translateY(0);filter:brightness(100%);
		transform: scale(1) translateY(0);filter:brightness(100%);

	}