@charset "utf-8";
/* CSS Document */

/*基本*/
body{ margin:0; padding:0; background-color:#0f6ca6;}
br { display:none !important;}


/*全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_top-1 { z-index:-2; position: absolute; top:0; left:0; width:100%; height:100%; background: no-repeat center top;  pointer-events:none; animation-delay:0.5s;}
.bg_bot-1 { z-index:-3; position: absolute; top:0; left:0; width:100%; height:100%; background: repeat center 825px;  pointer-events:none; animation-delay:0.5s;}
.bg_m { display:none; background:none;}
	@media screen and (max-width:767px){
		.bg_top-1 { display:none; background:none !important; background-image:none !important;}
		.bg_bot-1 { display:none; background:none !important; background-image:none !important;}
		.bg_m { display:inherit; z-index:-3; position: absolute; top:44px; left:0; width:100%; height:1000px; 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;} 
.Area .go_bt {
  -webkit-transition: all 0.35s ease;
     -moz-transition: all 0.35s ease;
      -ms-transition: all 0.35s ease;
       -o-transition: all 0.35s ease;
          transition: all 0.35s ease;}
.Area .go_bt:hover {
  -webkit-transform:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Area_detail img:nth-child(1) { }
.Area_detail img:nth-child(2) { display:none;}
.detail_title { margin: 80px auto 0;}
.Area1 { margin:0 auto 5%; height:1025px}
.Area2 {height:1475px}
.Area3 {height:1642px}
.Area4 {height:1549px}
.Area4 a { display:none;}
.Area5 {height:598px}
	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		.Area_detail img:nth-child(1) { display:none;}
		.Area_detail img:nth-child(2) { display:block;}
		.detail_title { margin:0 auto;}
		.Area1 { margin:0 auto; height:222vw}
		.Area2 { height:195vw}
		.Area3 { height:370vw}
		.Area4 { height:285vw}
		.Area4 a { display:block;}
		.Area4 a img { display:block !important;}
		.Area5 { height:94vw}
	}

/*版頭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:700px; }
.Area_title .titlebox { z-index: 0; position:absolute; left:0px; top:0px; width:1220px; height: auto;}
	.title1 { z-index: 0; position:absolute; left:836px; top:89px; animation-delay:0.2s; pointer-events:none;}
	.title2 { z-index: 0; position:absolute; left:46px; top:88px; animation-delay:0.6s; pointer-events:none;}

@media screen and (max-width:767px){
		.Area_title { height: 125vw }
		.Area_title .titlebox { left:0; top:0vw; width:100%; height:100%; overflow:hidden; animation-delay:0.4s;}
			.title1 { left:2%; top:6vw; width:44%;  }
			.title2 { left:48%; top:3vw; width:48%;  }
		}



/*版頭輪播*/
.pc_toppd_box{position: absolute; left:51px; top: 102px; }		
.pc_toppd_swiper { position:relative; z-index:1; /*width:0px; height:0px;*/ padding:0 !important;}
.pc_toppd_swiper a{ width:842px; height:548px; }
.pc_toppd_swiper img{ position:absolute; width:489px; height:548px; top:0; right:0;  }
.pc_toppd_swiper img:nth-child(2){ position:absolute; left:0; right:inherit; top:inherit; bottom:40px; width:386px; height:auto;   }
		@media screen and (max-width:767px){
			.pc_toppd_box{top:41vw; left:0%; width:100%; height:auto; overflow:hidden;} 		
			.pc_toppd_swiper { width:100%; height:100%; top: 0%;  left:0%;}	
			.pc_toppd_swiper a{ width:100%; height:80vw; }
			.pc_toppd_swiper img{left:38%; bottom:0; width:60%; height:auto;   }
			.pc_toppd_swiper img:nth-child(2){left:7%; bottom:0; width:60%;   }
		}

/*版頭輪播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_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; }
}

/*mo卡10%輪播*/
.Area_momocard {width:1220px; height:450px;position:relative; margin:0 auto 50px; box-sizing:border-box;   padding: 170px 0 0px; background: url(pc_momocard_bg.png) center top no-repeat;}
.Area_momocard .card_swiper{ width:1220px; position: relative;  top:0px; left:0px; z-index:6;}
.Area_momocard .card_swiper img{ width:100%; }
.Area_momocard .mo_card{ position:absolute;top: 70px;right:0px;}
.Area_momocard .card_swiper img { transition-duration:0.3s;}
.Area_momocard .card_swiper img: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_momocard .card_swiper ul { display:inline-block; margin:0 auto; padding:0;}
.Area_momocard .card_swiper ul li a { position:relative;}
.Area_momocard .card_swiper ul li a img {  transition-duration: 0.2s; width:100%;}
.Area_momocard .card_swiper ul li { float:left; margin:5px 2px; transition-duration: 0.5s;}
.Area_momocard .card_swiper 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%);
}

@media screen and (max-width:767px){
	.Area_momocard { width:100%;height: 110vw; padding:0 0 0 0; margin:10vw auto; background-repeat: no-repeat; background-size:90%;}
	.Area_momocard .mo_card{ position: absolute;top: 1vw; right:0; width:26%;  height: auto; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5)); -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));}
	.Area_momocard .card_swiper{ width:90%; position:absolute;    top:24vw; left: 5%; z-index:6;}
	.Area_momocard .card_swiper img{ width:100%; }
	.Area_momocard .card_swiper ul { margin:0vw auto 0; padding:0; width:100%;}
	.Area_momocard .card_swiper ul li a { position:relative;}
	.Area_momocard .card_swiper ul li a img {  transition-duration: 0.2s;}
	.Area_momocard .card_swiper ul li { margin:2vw 1% 0vw ; width:31.3%;}
	.Area_momocard .card_swiper 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%);
	}
		}


/*輪播bn*/					
.Area_bn_swiper { height: auto;}
.pc_bn_box{  padding:10px 0 80px;}
		@media screen and (max-width:767px){
			.Area_bn_swiper { height:52vw; padding: 0 0 5vw;}	
			.pc_bn_swiper {width: 91%; margin:0 auto; height:52vw;}	
			.pc_bn_box{  padding:0;}
			
		}


/*必敗區背景*/
.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; }
}


.Area_bonus{ height:706px;}

@media screen and (max-width:767px){
			.Area_bonus { height:100%; margin-bottom:10%;}			
		}



/*品牌logo*/
.Area_brand_logo { height:650px;}
.Area_brand_logo  ul {margin:0 auto; width:100%; padding:0; overflow:hidden; margin:-497px 14px 0 30px ;}
.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:0; position:relative;width:1220px;height:620px; top:0px;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 auto 10vw; width:100%; padding:0; box-sizing:border-box; top: auto; left: auto;}
	.Area_brand_logo ul {margin:0;  overflow:hidden; margin-left:0px;  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; }	
	.brand_logo_bg {width:100%;height:14vw; top:0; background-size:90%;}
		}
			

/*按鈕*/
.Area_btn_top {position: relative; margin:0px auto 80px; height:100px; 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: auto;}
.Area_btn_top ul li { float:left; margin:0 5px; transition-duration: 0.5s;}
.Area_btn_top 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%);
}
@media screen and (max-width:767px){
	.Area_btn_top { position:relative; left:0; top:0; width:100%; height:32vw; margin:0 auto; padding:0; background-size:100%; }
	.Area_btn_top ul { margin:0 auto; padding:0; width:90%;}
	.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 { margin:0 1% 2vw  ; width:31.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 100px; padding:0; text-align: center; background:url(area3_title.png) center top no-repeat;}
.Area_btn ul { display: inline-block;margin:140px auto 0; padding:0; width:1220px;background:#6a0000;}
.Area_btn ul li a { position:relative; }
.Area_btn ul li a img {  transition-duration: 0.5s; width:100%; height:100%;}
.Area_btn ul li { float:left; margin:20px 20px 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:0vw auto 10vw; padding:16vw 0 0; height:132vw; background-size:70%; }
	.Area_btn ul { margin:4% auto 0; padding:0 0 54%; display:inline-block; -webkit-display:inline-block; width:94%;}
	.Area_btn ul li a { position:relative; font-size:4.5vw; width:100%;}
	.Area_btn ul li a img {  transition-duration: 0.2s;  width: 100%;}
	.Area_btn ul li:nth-child(odd) a img:nth-child(2) { position:absolute; left:0%; top:42vw;}
	.Area_btn ul li:nth-child(even) a img:nth-child(2) { position:absolute; left:0; top:42vw;}
	.Area_btn ul li { margin:5%; width:90%; height:64vw;}
	.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 80px; 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;}
.Area_btn2 ul li { float:left; margin:0 auto; transition-duration: 0.5s;}
.Area_btn2 .more { position:absolute;top: 70px;right:0px;}

/*純文字版
.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 {  height:30vw; margin:0vw auto; padding:0; }
	.Area_btn2 ul { margin:0vw auto; padding:0; display:inline-block; -webkit-display:inline-block;  background-size:90%; width:80%;}
	.Area_btn2 ul li a { position:relative; font-size:4.5vw; width:100%;}
	.Area_btn2 ul li a img {  transition-duration: 0.2s; height:auto;}
	.Area_btn2 ul li { margin:0vw auto; width:100%; }
	.Area_btn2 ul li:nth-child(even) { margin-top:0;}
	.Area_btn2 .more { position:absolute;top: 1vw; right:0; width:26%;  height: auto; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5)); -webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.5));}
	
	
	/*純文字版*/
	.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%);

	}

	
