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

/*基本*/
body{ margin:0; padding:0; background-color:#e6e5db;  }

	@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:0; left:0; width:100%; height:100%; background:#e6e5db; background-repeat:no-repeat;  pointer-events:none;}
.bg_01 { z-index:-3; position: absolute; top:0; left:0; width:100%; height:100%; background: no-repeat center top;  pointer-events:none; animation-delay:0.5s;}
.bg_01m { display: none; background:none;}

@media screen and (max-width:767px){
	.bg { display: none; background:none !important;}
	.bg_01 { display: none; background:none !important; }
	.bg_01m { position:absolute; display:inherit; top:44px; left:0; width:100%; height:100%; background: no-repeat center top; background-size:100%;   pointer-events:none; animation-delay:0.5s; }
	}



/*區塊_all*/
.Area { z-index:1; position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center }
.Area1220 { margin:0 auto; width:1220px;}
.Area1350 { margin:0 auto; width:1350px;}
.Area1410 { margin:0 auto; width:1410px;}
.Area960 { margin:0 auto; width:960px;}

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


/*Area_top*/
.Area_top { height:620px; }
.Area_top .titlebox { z-index: 0; position:absolute; left:0px; top:0px; width:1220px; height: auto;}
.Area_top .titlebox .title1 { z-index: 0; position:absolute; left:562px; top:123px; animation-delay:0.8s; pointer-events:none;}
.Area_top .titlebox .title2 { z-index: 0; position:absolute; left:562px; top:123px; animation-delay:1s; pointer-events:none;}
.Area_top .titlebox .title3 { z-index: 0; position:absolute; left:562px; top:123px; animation-delay:1.8s; pointer-events:none;}
.Area_top .titlebox .title-m { display:none; background:none;}
.Area_top .titlebox .title-m2 { display:none; background:none;}
.Area_top .titlebox .music1 { z-index: 0; position:absolute; left:143px; top:53px; animation-delay:0.5s; pointer-events:none;}
.Area_top .titlebox .music2 { z-index: 0; position:absolute; left:143px; top:53px; animation-delay:0.5s; pointer-events:none;}
@media screen and (max-width:767px){
	/*Area_top*/
		.Area_top { height: 78vw }
		.Area_top .titlebox { z-index: 0; position:absolute; left:0px; top:0px; width:100%; height:auto; }
		.Area_top .titlebox .title1 { display:none; background:none !important;}
		.Area_top .titlebox .title2 { display:none; background:none !important;}
		.Area_top .titlebox .title3 { display:none; background:none !important;}
		.Area_top .titlebox .title-m { display:inherit; position:absolute; left:40vw; top:3vw; width:60%; animation-delay:0.8s; pointer-events:none;}
		.Area_top .titlebox .title-m2 { display:inherit; position:absolute; left:40vw; top:41vw; width:65%; animation-delay:1s; pointer-events:none;}
		.Area_top .titlebox .music1 { display:none; background:none !important;}
		.Area_top .titlebox .music2 { display:none; background:none !important;}
		}


/*Area_top*/
.Area_title { width:1220px; }
.Area_title img {  }
@media screen and (max-width:767px){
		.Area_title { width:85%; }
		.Area_title img { width:100%; }
		}



/*按鈕*/
.Area_btn_top {position: relative; left:0; margin:0px auto 20px; padding:0 0 30px; text-align: center; overflow:hidden; }
.Area_btn_top ul { display:inline-block; margin:0 0 0 70px; padding:0;}
.Area_btn_top ul li a { position:relative;}
.Area_btn_top ul li a img {  transition-duration: 0.2s; width:100%;}
.Area_btn_top ul li { float:left; margin:0px 20px 0 0; transition-duration: 0.5s; width:46%;}
.Area_btn_top 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%);
}
@media screen and (max-width:767px){
	.Area_btn_top { width:94%; height:auto; margin:0 auto; padding:0; }
	.Area_btn_top ul { margin:0; padding:0;}
	.Area_btn_top ul li a { position:relative;}
	.Area_btn_top ul li a img {  transition-duration: 0.2s;}
	.Area_btn_top ul li { margin:0vw 0vw 6vw ; width:50%;}
	.Area_btn_top 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 {position: relative; left:0; margin:0px auto 40px; padding:0; text-align: center;  height:364px; background: no-repeat center top}
.Area_btn ul { display: inline-block;margin:0 auto; padding:0;}
.Area_btn ul li a { position:relative; }
.Area_btn ul li a img {  transition-duration: 0.2s; width:100%;}
.Area_btn ul li { float:left; margin:0; transition-duration: 0.5s;}
.Area_btn ul li:nth-child(odd) {  transform: translate(0px,39px);}
.Area_btn ul li:hover img { 
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 { text-shadow:0 1px 1px rgba(0,0,0,0.5); font-size:22px; line-height:24px; font-weight: bolder; font-family:"Century Gothic", "微軟正黑體", sans-serif; text-decoration:none; color:#fff; width:126px; padding:16px 0; }
.Area_btn ul li { background: linear-gradient(#ff298d,#e80266); border-radius:100px;}
*/

@media screen and (max-width:767px){
	.Area_btn { width:100%; height:auto; margin:-13vw auto 5vw; padding:0; background: none !important;}
	.Area_btn ul { margin:0vw 8vw; padding:0; display:inline-block; -webkit-display:inline-block;}
	.Area_btn ul li a { position:relative; font-size:4.5vw; width:100%;}
	.Area_btn ul li a img {  transition-duration: 0.2s;}
	.Area_btn ul li { margin:0 2vw 10vw; width:45%; height:auto;}
	.Area_btn ul li:nth-child(odd) {  transform: translate(0);}
	.Area_btn ul li:nth-child(even) {  transform: translate(0, 24vw); }
	.Area_btn ul li:hover img { 
		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 { font-size:4.5vw; width:100%;}
	*/
}



/*按鈕2*/
.Area_btn2 {position: relative; left:0; margin:40px auto; padding:0 0 40px; text-align: center; overflow:hidden; }
.Area_btn2 ul { display: inline-block;margin:0 auto; padding:0;}
.Area_btn2 ul li a { position:relative; }
.Area_btn2 ul li a img {  transition-duration: 0.2s; width:100%;}
.Area_btn2 ul li { width:101px; height:180px; float:left; margin:0px 8px; transition-duration: 0.5s; }

/*純文字版*/
.Area_btn2 ul li a  { display:block; width:100%; height:100%; }
.Area_btn2 ul li a span { text-shadow:0 1px 1px rgba(0,0,0,0.5); font-size:22px; line-height:24px; font-weight: bolder; font-family:"Century Gothic", "微軟正黑體", sans-serif; text-decoration:none; color:#fff; position:relative; display:block;top: 124px;  width: 50px;  margin: 0 auto; }
.Area_btn2 ul li { background:url(btn_bl.png) no-repeat center top; background-size:100%;}

.Area_btn2 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%);
}

@media screen and (max-width:767px){
	.Area_btn2 { width:94%; height:auto; margin:10vw auto 0; padding:0; background-size:100%;}
	.Area_btn2 ul { margin:0 auto; padding:0; display:inline-block; -webkit-display:inline-block;}
	.Area_btn2 ul li a { position:relative; font-size:4.5vw; width:100%;}
	.Area_btn2 ul li a img {  transition-duration: 0.2s;}
	.Area_btn2 ul li { margin:0vw 1%; width:18%; height:40vw;}
	.Area_btn2 ul li:nth-child(even) { margin-top:0;}
	/*純文字版*/
	.Area_btn2 ul li a span { font-size: 4.5vw;  width: 58%;  top: 20vw;  line-height: 5vw;}
	
	.Area_btn2 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%);
	}
}



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

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

	@media screen and (max-width: 736px) {
	.hover0:hover,.hover1:hover,.hover2,.hover3: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%);

	}