@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 0 180px; 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_1014.jpg) repeat center top #be3939 ; pointer-events:none;}
.bg_top { z-index:-3; position: absolute; top:0; left:0; width:100%; height:100%; background: url(bg_top1014.png) no-repeat center top ; pointer-events:none; mix-blend-mode: overlay; }
.bg_bottom { z-index:-3; position: absolute; top:922px; left:0; width:100%; height:100%; background: url(bg_bottom1014.png) repeat center top ; pointer-events:none; }
@media screen and (max-width:767px){
	.bg {background-size: 200%; }
	.bg_top { background-position:-47vw 10vw; background-size:200%;  }
	.bg_bottom { display: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:762px; }
.Area_top .catch { z-index: 0; position:absolute; left:-390px; top:0px; width:2000px; height: auto;}
.Area_top .catch .smoke_backL { z-index: 0; position:absolute; left:237px; top:54px; animation-delay:0.2s; pointer-events:none;}
.Area_top .catch .smoke_backR { z-index: 0; position:absolute; left:1174px; top:107px; animation-delay:0s; pointer-events:none;}
.Area_top .catch .title_back { z-index: 0; position:absolute; left:588px; top:100px; animation-delay:0.4s; pointer-events:none;}
.Area_top .catch .table { z-index: 0; position:absolute; left:329px; top:308px; animation-delay:0s; pointer-events:none;}
.Area_top .catch .title_front { z-index: 0; position:absolute; left:818px; top:497px; animation-delay:1s; pointer-events:none; transform-origin:25% top;}
.Area_top .catch .smoke_frontL { z-index: 0; position:absolute; left:196px; top:476px; animation-delay:0.3s; pointer-events:none;}
.Area_top .catch .smoke_frontR { z-index: 0; position:absolute; left:1216px; top:471px; animation-delay:0.1s; pointer-events:none;}

.Area_top .catch .things { position:absolute; top:162px; left:395px; margin-left:0px; width:1211px; height:430px; background: url(area_top_things.png) no-repeat;
        -webkit-animation: things 0.6s steps(2) alternate infinite /*forwards*/; 
                animation: things 0.6s steps(2) alternate infinite /*forwards*/; 
        }
    @-webkit-keyframes things { 
       0% { background-position:    0px;}
       100% { background-position: -2422px; }
    }
    
    @keyframes things {
       0% { background-position:    0px; }
       100% { background-position: -2422px; }
    }

@media screen and (max-width:767px){
	/*Area_top*/
	.Area_top { height: 96vw }
	.Area_top .catch { z-index: 0; position:absolute; left:0px; top:0px; width:100%; height:auto;}
    .Area_top .catch .smoke_backL { left:10vw; top:24vw; width:50vw; z-index:9;}
    .Area_top .catch .smoke_backR { left:40vw; top:24vw; width:50vw; z-index:9;}
    .Area_top .catch .title_back { left:5vw; top:15vw; width:90vw; z-index:9;}
    .Area_top .catch .table { left:0vw; top:41vw; width:100vw; z-index:9;}
    .Area_top .catch .things { left:5vw; top:7vw; width:100vw; z-index:9;}
    .Area_top .catch .title_front { left:21vw; top:60vw; width:60vw; z-index:9; transform-origin:50% top;}
    .Area_top .catch .smoke_frontL { left:10vw; top:54vw; width:50vw; z-index:9;}
    .Area_top .catch .smoke_frontR { left:40vw; top:54vw; width:50vw; z-index:9;}

	.Area_top .catch .things { left:2vw; top:25vw; width:96vw; height:40vw;background: url(area_top_things-m.png) no-repeat; background-size:200%;  }
	   @keyframes things { 
       0% { background-position:    0;}
       100% { background-position: -192.1vw; }
	   }
	   @-webkit-keyframes things { 
       0% { background-position:    0;}
       100% { background-position: -192.1vw; }
	   }

}

/*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 20px; 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:10px 5px; 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:100%; height:auto; margin:2vw auto 0; padding:0;}
	.Area_btn ul { margin:0 0 0 3vw; 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:100%; left:0;}
	.Area_btn ul li { margin:1vw 1.2vw 2vw ; width:28vw;}
	.Area_btn ul li:nth-child(odd) { padding-top:0;}
	.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%);
	}
}

/*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%);

	}