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

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



/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow:hidden; width:100%; min-width:1220px; text-align:left; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; }
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
.WRAPPER ul {margin: 0px;  padding: 0px;  list-style: none outside none;}
.Area li {list-style:none;float:left;overflow: hidden;}
	@media screen and (max-width:767px){
		.WRAPPER {min-width: inherit; min-height:100vh; overflow:visible;}
		.WRAPPER img {  width:100%;  height:auto;}
	}



/*背景*/
.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_02 { 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_03 { 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_04 { z-index:-3; position: absolute; top:1025px; left:0; width:100%; height:100%; background: repeat-y center top;  pointer-events:none; animation-delay:0.5s;}
.bg_05 { z-index:-4; position: absolute; top:0px; left:0; width:100%; height:100%; background: repeat-y center top;  pointer-events:none; animation-delay:0.5s;}
.bg_title { z-index:-3; position: absolute; top:341px; left:44px; width:100%; height:100%; background: no-repeat center top;  pointer-events:none; animation-delay:0.2s;}
.bg_f1 { z-index:-3; position: absolute; top:3720px; left:0; width:100%; height:100%; background: no-repeat center top;  pointer-events:none; animation-delay:0.5s;}
.bg_f2 { z-index:-3; position: absolute; top:5080px; left:0; width:100%; height:100%; background: no-repeat center top;  pointer-events:none; animation-delay:0.5s;}
.bg_f3 { z-index:-3; position: absolute; top:6430px; left:0; width:100%; height:100%; background: no-repeat center top;  pointer-events:none; animation-delay:0.5s;}
.bg_m { display:none; background:none;}
	@media screen and (max-width:767px){
		.bg_01 { display:none; background:none !important;}
		.bg_02 { display:none; background:none !important;}
		.bg_03 { display:none; background:none !important;}
		.bg_04 { display:none; background:none !important;}
		.bg_05 { display:none; background:none !important;}
		.bg_title { display:none; background:none !important;}
		.bg_f1 { display:none; background:none !important;}
		.bg_f2 { display:none; background:none !important;}
		.bg_f3 { display:none; background:none !important;}
		.bg_m { display:inherit; z-index:-3; position: absolute; top:44px; left:0; width:100%; height:100%; background: no-repeat center top;  pointer-events:none; animation-delay:0.5s; background-size:100%;}
	}

		

/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; display:block;} 
		  
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
	}

/*版頭LOGO-PC*/
.Area_top {}
.Area_top .momologo { z-index:99999; position: absolute;top: 15px; left:40px;}
.Area_top .momologo a { display:block; width:220px; height:80px; background: url(momo_logo.png) no-repeat;}
.Area_top .momologo a:hover{ background: url(momo_logo.png) no-repeat;}
	@media screen and (max-width:767px){
		.Area_top { height: auto;}
		.Area_top .momologo { display:none;}
	}
	

/*版頭區塊*/
.Area_title { height:1123px; }
.Area_title .titlebox { z-index: 0; position:absolute; left:0px; top:0px; width:1220px; height: auto;}
.Area_title .titlebox-m { z-index: 0; position:absolute; display:none;}
	.title1 { z-index: 0; position:absolute; left:-44px; top:314px; animation-delay:0.2s; pointer-events:none;}
	.title2 { z-index: 0; position:absolute; left:289px; top:0px; animation-delay:0.4s; pointer-events:none;}
	.title3 { z-index: 0; position:absolute; left:289px; top:0px; animation-delay:0.4s; pointer-events:none;}
	.title4 { z-index: 0; position:absolute; left:289px; top:0px; animation-delay:0.4s; pointer-events:none;}
	.title5 { z-index: 0; position:absolute; left:91px; top:6px; animation-delay:0.4s; pointer-events:none;}
	.title6 { z-index: 0; position:absolute; left:289px; top:0px; animation-delay:0.4s; pointer-events:none;}

@media screen and (max-width:767px){
		.Area_title { height: 140vw }
		.Area_title .titlebox { display:none !important; }
		.Area_title .titlebox-m { display:inherit; z-index: 0; position:absolute; left:0; top:0vw; width:100%; height:100%; overflow:hidden; animation-delay:0.4s; }
			.title1 { display:none !important; background:none !important; }
			.title2 {left:0; top:0vw; width:106%; }
			.title3 {left:19%; top:3vw; width:80%; }
			.title4 {left:8%; top:0vw; width:90%; }
			.title5 {left:-9%; top:0vw; width:34%; }
			.title6 {left:8%; top:0vw; width:90%; }
		}



/*版頭輪播*/
.pc_toppd_box{position: relative;top: 0px; right:0; width:308px; height:196px; }		
.pc_toppd_swiper { display:block; z-index:1;}
		@media screen and (max-width:767px){
			.pc_toppd_box{top:0; right:0; width:100%; height:auto;} 		
			.pc_toppd_swiper { height:100%; top: 0px;   left:0px;}	
		}

/*版頭輪播2*/
.pc_toppd_box2 {width:1220px;height:auto;position: absolute; margin:0 auto; box-sizing:border-box; padding:0; top:300px; left:0;  overflow:hidden; padding:1%}
.pc_toppd_box2 .pd_swiper{ position:relative; width:552px;height: auto; margin:0 auto; text-align:center; padding:0 334px;   }
.pc_toppd_box2 .pd_swiper img{  }
.pc_toppd_box2 .pd_swiper .swiper-slide-prev,.pc_toppd_box2 .pd_swiper .swiper-slide-next{ z-index:-1 }
.pc_toppd_box2 .pd_swiper .swiper-slide-active { z-index:99 }
@media screen and (max-width:767px){
	.pc_toppd_box2 {width:65%; height: auto; position: absolute; top:40vw; left:17%; padding:0;}	
	.pc_toppd_box2 .pd_swiper{ position:relative; width:100%; height:auto; margin:0 auto; padding:0;  }
	.pc_toppd_box2 .pd_swiper img{ width:100%;  }
}



/*登記區塊*/
.Area_danji { height:470px;}
.Area_danji .content1 {position: relative;left:323px;top:-48px;z-index:3;color:white; width:121px;}
.Area_danji .content2 {position: relative;left:231px;top:-48px;z-index:3;color:white; width:121px;}
		@media screen and (max-width:767px){
			.Area_danji { height:100%;}			
		}
.pc_danji_a { position:absolute;top:0px; background-position:center top; background-repeat:no-repeat; }



/*輪播區*/
.Area_swiper { height:353px;}
		@media screen and (max-width:767px){
			.Area_swiper { height:100%;}			
		}
.swiper_bn ul {}
.swiper_bn ul li {width:23%;overflow:visible;border-radius:15px;}


.banner_ww{ position: relative;top:0; left: -173px; display:inline-block; margin: 0 auto; margin-top: 20px; width: 100%;}
	.topbn{position: relative;top:0;left: -22px; margin: 0; padding: 0; width:68%; display: inline-block;border-radius: 51px;}
	.topbn img {width:100%;}
	.bank{ position: absolute; top:20px; right:0px; margin: 0; padding: 0; width: 383px;}

@media screen and (max-width:767px){
.topbn{ margin-left:0 !important;/*margin-top:3vw;*/ height:34vw;}
.topbn2{ margin-left:0 !important;/*margin-top:3vw;*/ height:13vw;}
.m_banner{width: 100%; position: relative;top:0; margin-left: -17vw;display: inline-block; margin-bottom:4vw;}
.topbn3{ width: 64%; margin-left:2vw !important;/*margin-top:3vw;*/ display: inline-block;position: relative;}
.m_bank{ width: 38%; position: absolute; top:-2px; right:0px; }
}



/*精選品牌輪播*/
.Area_momocard { width:1375px; height:730px; background:url(area2_title.png) center top no-repeat; }
		@media screen and (max-width:767px){
			.Area_momocard { width: 100%; height: auto;  display:inherit; height:20vw;background-image:url(area2_title.png); background-repeat:no-repeat; background-size:186%; background-position:center top;  padding:12vw 0 0; margin:5vw 0 100vw;  }			
		}
.Area_momocard .pc_momocard_swiper  { height: auto;padding: 150px 0 0 0; width:1220px;}
.Area_momocard .pc_momocard_swiper .swiper-slide:nth-child(even) {margin-top:0px;}
@media screen and (max-width:767px){
			.Area_momocard .pc_momocard_swiper { height:110vw;background-image:none;padding:0; margin:7% auto 0; width:100%;}	
			.Area_momocard .pc_momocard_swiper .swiper-slide:nth-child(even) {margin-top:0;}		
		}
.swiper-button-next:after, .swiper-button-prev:after {    background-color: #0000005c;    width: 100%; height: 100%;border-radius: 50%;}
.swiper-button-next, .swiper-button-prev { width: 50px !important;height: 50px !important;}
@media screen and (max-width:767px){
			.swiper-button-next:after, .swiper-button-prev:after {   width: 52%; height: 52%; font-size: 18pt !important;}
			.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: -2% !important;}
			.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: -2% !important;}
	
		}


/*必敗區背景*/
.Area_brand_bg { background:url(area3_title.png) center top no-repeat; padding:240px 0 0}
@media screen and (max-width:767px){
	.Area_brand_bg { background-size:90%; margin:0 auto; padding:10vw 0 0; }
}

/*大牌區背景*/
.Area_brand2_bg { background:url(area4_title.png) center top no-repeat; padding:180px 0 0}
@media screen and (max-width:767px){
	.Area_brand2_bg { background-size:90%; margin:6vw auto; padding:20vw 0 0; }
}


/*品牌logo*/
.Area_brand_logo { height: auto;}
.Area_brand_logo  ul {margin:0 auto; width:100%; padding:0; overflow:hidden; margin-left:34px;}
.Area_brand_logo  ul li { list-style:none; width:19%; display:inline-block; float:left; margin:0px 0px 0 0px ; padding:0px; box-sizing:border-box;  position:relative;}
.Area_brand_logo  ul li a { display:block; text-decoration:none;}
.Area_brand_logo  ul li a img{ width:100%; }
.brand_logo_bg { z-index:-10; position:relative;width:1220px;height:711px; top:37px;background-repeat:no-repeat;background-position:center top;pointer-events:none;background-image: url(brand_logo_bg.png);}

	@media screen and (max-width:767px){
	.Area_brand_logo { height:100%; position: relative; margin:0vw 0; width:100%; padding:0; box-sizing:border-box; top: auto; left: auto;}
	.Area_brand_logo ul {margin:0;  overflow:hidden; margin-left:0px; background-image:url(mbg.jpg); background-size:100%; }
	.Area_brand_logo ul li {list-style:none; display:inline-block; float:left; width:20%; margin:0; padding: 0; }
	.Area_brand_logo li a { display:block;  padding:0;text-decoration:none; box-sizing: border-box; }
	.Area_brand_logo li a img{ width:100%; margin:0; }	
		}
			

/*按鈕*/
.Area_btn_top {position: relative; left:0; margin:0px auto 40px; padding:0; text-align: center; overflow:hidden; }
.Area_btn_top ul { display:inline-block; margin:0 auto; 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 10px; transition-duration: 0.5s;}
.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:96%; 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 ; width:33.3%;}
	.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;}
.Area_btn ul { display: inline-block;margin:60px auto 0; 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 30px; transition-duration: 0.5s;}
.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 { 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:2vw auto; padding:0; }
	.Area_btn ul { margin:0vw auto; 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 1% 10vw; width:31%; height:auto;}
	.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; background:url(area3_title.png) no-repeat center top; }
.Area_btn2 ul { display: inline-block;margin:170px auto 0; 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 { float:left; margin:10px 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:90%; height:auto; margin:10vw auto 0; padding:0; background-size:100%;}
	.Area_btn2 ul { margin:25vw auto 0; 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% 4vw; width:31.3%; }
	.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%);

	}