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

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

	@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: fixed; top: 0px; left:0; width:100%; height:100%; background: url(bg_1203.jpg) repeat center top ; pointer-events:none;}
.bg_top { z-index:-3; position: absolute; top:0; left:0; width:100%; height:100%; background: url(bg_top1203.jpg) no-repeat center top -182px ; pointer-events:none; }
.bg_bot { z-index:-3; position: absolute; top: -500px; left:0; width:100%; height:100%; background: url(bg_bot1203.png) repeat center top ; pointer-events:none;}
@media screen and (max-width:767px){
	.bg { background:none;}
	.bg_top { background-size: 180%; background-position-y:44px;  }
	.bg_bot { background:none; 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;}
.Area1380 { margin:0 auto; width:1380px;}
.Area960 { margin:0 auto; width:960px;}

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


/*Area_top*/
.Area_top { height:840px; }
.Area_top .catch { z-index: 0; position:absolute; left:0px; top:0px; width:1220px; height: auto;}
.Area_top .catch .title { z-index: 0; position:absolute; left:243px; top:96px; animation-delay:0.5s; pointer-events:none;}
.Area_top .catch .subtitle { z-index: 0; position:absolute; left:91px; top:232px; animation-delay:0.5s;}
.Area_top .catch .dec1 { z-index: 0; position:absolute; left:933px; top:125px; animation-delay:0s; pointer-events:none;}
.Area_top .catch .dec2 { z-index: 0; position:absolute; left:894px; top:74px; animation-delay:0s; pointer-events:none;}
.Area_top .catch .dec3 { z-index: 0; position:absolute; left:231px; top:349px; animation-delay:0s; pointer-events:none;}

@media screen and (max-width:767px){
	/*Area_top*/
	.Area_top { height: 90vw }
	.Area_top .catch { z-index: 0; position:absolute; left:0px; top:0px; width:100%; height:auto;}
    .Area_top .catch .title { left:14vw; top:14vw; width:72%; z-index:9;}
    .Area_top .catch .subtitle { left:5vw; top:37vw; width:16%; z-index:9;}
	.Area_top .catch .dec1 { display:none; }
	.Area_top .catch .dec2 { display:none; }
	.Area_top .catch .dec3 { display:none; }
}

/*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:0 auto; padding:0 0 40px; text-align: center; overflow:hidden;  }
.Area_btn:nth-child(2) { background:url(Area_btn_bg.png) center top no-repeat; height:345px;}
.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 10px; transition-duration: 0.5s;}
.Area_btn:nth-child(2) ul li { margin:0px -10px;}
.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:0 auto; padding:0; top:0;}
	.Area_btn:nth-child(2) {background:url(Area_btn_bg-m.png) center top 18vw no-repeat;  background-size:100%; height: auto; padding:0 0 10%;}
	.Area_btn ul { margin:0 4%; padding:0;}
	.Area_btn:nth-child(2) ul { }
	.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:nth-child(2) ul li { margin:0 0 4vw ; width:33.3%;}
	.Area_btn:nth-child(2) ul li:nth-child(4) { margin:0 0 0 14vw}
	.Area_btn ul li { margin:0 ; width:50%;}
	.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%);

	}