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

/*基本*/
body{ margin:0; padding:0; background-color:#edeae1;}
	@media screen and (max-width:767px){
		body{ background-color:#edeae1;}
	}


/*全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; overflow: hidden; }
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
.Area ul {display:inline-block; padding:0; margin:0 auto;}
.Area li {list-style:none;float:left;overflow: hidden;}
	@media screen and (max-width:767px){
		.WRAPPER {min-width: inherit; min-height:100vh;}
		.WRAPPER img {  width:100%;  height:auto;}
	}



/*背景*/
.bg_top-re { z-index:-2; position: fixed; top:0; left:0; width:100%; height:100%; background: repeat center top;  pointer-events:none; animation-delay:0.5s;}
.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 { z-index:-3; position: fixed; top:0; left:0; width:100%; height:100%; background: no-repeat center 50%;  pointer-events:none; animation-delay:0.5s;}
.bg_top-m { display:none; background:none;}
	@media screen and (max-width:767px){
		.bg_top-re { display:none; background:none !important;}
		.bg_top-1 { display:none; background:none !important;}
		.bg_top-m { display:inherit; position: absolute; top:0; left:0; width:100%; height:100%;background: no-repeat center top; 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;}
.Area1290 { margin:0 auto; width:1290px;}
.Area960 { margin:0 auto; width:960px;}
.Area_img { margin:0vw auto 80px; position: relative;}
@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area1290 { width:100%;}
		.Area960 { width:96%;}
		.Area_img { width:90%; margin: 0 auto 8vw;}
	}

/*版頭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:690px; }
.Area_title .titlebox { z-index: 0; position:absolute; left:0px; top:0px; width:1220px; height: auto;}
.Area_title .titlebox .title1 { z-index: 0; position:absolute; left:188px; top:100px; animation-delay:0s; pointer-events:none;}
.Area_title .titlebox .title2 { z-index: 0; position:absolute; left:188px; top:100px; animation-delay:1.2s; pointer-events:none;}
.Area_title .titlebox .title3 { z-index: 0; position:absolute; left:188px; top:100px; animation-delay:0s; pointer-events:none;}
.Area_title .titlebox .title4 { z-index: 0; position:absolute; left:188px; top:100px; animation-delay:0.6s; pointer-events:none;}
.Area_title .titlebox .money1 { z-index: 0; position:absolute; left:663px; top:50px; animation-delay:0.6s; pointer-events:none;}
.Area_title .titlebox .money2 { z-index: 0; position:absolute; left:663px; top:50px; animation-delay:0.4s; pointer-events:none;}
@media screen and (max-width:767px){
		.Area_title { height: 106vw;  }
		.Area_title .titlebox { z-index: 0; position:absolute; left:0; top:0vw; width:100%; height:auto;}
		.Area_title .titlebox .title1 { width:80%; left:10%; top:7.5vw; z-index:2}
		.Area_title .titlebox .title2 { width:80%; left:10%; top:7.5vw; z-index:2; animation-delay:0.4s;}
		.Area_title .titlebox .title3 { width:80%; left:10%; top:7.5vw; z-index:2}
		.Area_title .titlebox .title4 { width:80%; left:10%; top:7.5vw; z-index:2}
		.Area_title .titlebox .money1 { display: none;}
		.Area_title .titlebox .money2 { display: none;}
}

    /*版頭按鈕*/
        @media screen and (min-width:768px){
          .Area_title .btn_more1 { position: absolute; top: 65px; right: 20px; width: 108px;}
          .Area_title .btn_more1 img { width: 100%; height: auto;}
          .Area_title .btn_more2 { position: absolute; top: 120px; right: 20px; width: 108px;}
          .Area_title .btn_more2 img { width: 100%; height: auto;}
        }
        @media screen and (max-width:767px){
          .Area_title .btn_more1 { position: fixed; top: 11vw; right: 0; width: 14%; z-index: 9999;}
          .Area_title .btn_more2 { position: fixed; top: 20vw; right: 0; width: 14%; z-index: 9999;}
       }

/*版頭輪播*/
.pc_toppd_box{position: absolute;top: 399px; left:427px; width:524px; height:390px; }		
.pc_toppd_swiper { display:block; z-index:1;}
		@media screen and (max-width:767px){
			.pc_toppd_box{top:51vw; left:3%; width:94%; height:auto;} 		
			.pc_toppd_swiper { height:100%; top: 0px;   left:0px;}	
		    
				
		}


/*bn輪播*/
.Area_swiper {position: relative;top: 0px; left:0px; height:150px; margin:0 auto 80px; }
.Area_swiper .swiper-slide img:nth-child(2) { display:none;}
.Area_swiper .pc_swiper_bn { padding:0 0 30px;}
		@media screen and (max-width:767px){
			.Area_swiper{top:0vw; left:0; width:94%;  height:54vw; margin:0 auto 8vw; overflow:hidden;} 		
			.Area_swiper .swiper-slide img:nth-child(1) { display:none;}
			.Area_swiper .swiper-slide img:nth-child(2) { display: block;}
			.Area_swiper .pc_swiper_bn { padding:0 0 5vw; height:50vw; overflow:hidden;}
		}



/*精選品牌輪播*/
.Area_momocard { padding:10px 0 0; height:830px; background:url(layout02_bg.png) center top no-repeat; margin:0 auto 40px}
.Area_momocard .momoareatitle { margin: -70px 0 25px -600px; height:87px;}
.Area_momocard .pc_momocard_swiper { width:960px; height: auto; padding:0 0 30px; margin:0 auto;}
.Area_momocard .pc_momocard_swiper .swiper-slide {}
@media screen and (max-width:767px){
			.Area_momocard { height:130vw; padding:0; margin:8vw auto; width:96%;  background:#ffde6e;  box-sizing:border-box; border: solid 3px rgba(70,59,57,1); border-radius:20px;}			
			.Area_momocard .momoareatitle { margin:-5vw auto 0; height:12vw; width:90%;}
			.Area_momocard .pc_momocard_swiper { height:110vw;background-image:none;padding:0; margin:12% auto 0 5%; width: 90%;left:0;}	
			.Area_momocard .pc_momocard_swiper .swiper-slide:nth-child(even) {margin-top:0;}		
		}


/*主打品背景*/
.Area_p_bg { background:url(Area_p_bg_re.png) center top repeat; margin:146px auto;}
.Area_p_bg:before { content: ""; display: block; z-index: 0; position: absolute;  top: -66px; height: 66px; width: 100%; background:url(Area_p_bg_top.png) center top no-repeat;}
.Area_p_bg:after { content: ""; display: block; z-index: 0; position: absolute;  bottom: -86px; height: 86px; width: 100%; background:url(Area_p_bg_bot.png) center bottom no-repeat;}
	@media screen and (max-width:767px){

.Area_p_bg { background-size:100%; margin:15vw auto; padding:1vw 0 0;}
.Area_p_bg:before {  background-size:100%;  top: -5.1vw; height: 20vw; }
.Area_p_bg:after {  background-size:100%;  bottom: -6.7vw; height:20vw; }

		}



/*品牌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; }	
		}
.open_area {background: center top no-repeat; overflow: hidden; margin: 0 auto 80px;}
@media screen and (max-width:767px){
	.open_area { background-size: 70%; margin: 0 auto 8vw;}
}


/*按鈕*/
.Area_btn_top {position: relative; left:0; margin:0px auto 80px; padding:180px 0 0px; height:600px; text-align: center; overflow:hidden; background: center top no-repeat; }
.Area_btn_top ul { display:inline-block; margin:0 auto; padding:0; width: 1200px; }
.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:10px; transition-duration: 0.3s;}
.Area_btn_top ul li: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:767px){
	.Area_btn_top { width:100%; height:190vw; margin:0 auto 20vw; padding:10vw 0 0; background-size:70%; }
	.Area_btn_top ul { margin:11vw auto 0; padding:0; width:87%}
	.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 auto 2vw ; width:100%;}
	.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 80px; padding:0; text-align: center; height:530px; background:center top no-repeat;}
.Area_btn ul { display: inline-block;margin:180px auto 0; padding:0;}
.Area_btn ul li a { position:relative; width:162px; height:44px; top:72%; left: 7.5%; transition-duration: 0.3s; }
.Area_btn ul li a img {  transition-duration: 0.2s; width:100%;}
.Area_btn ul li { float:left; margin:0 15px; transition-duration: 0.3s; width:580px; height:350px; background:center top no-repeat;}
.Area_btn ul li a: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%);
}

/*純文字版
.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:120vw; margin:8vw auto 8vw; padding:21vw 0 0; background-size: 70%; }
	.Area_btn ul { width:94%; margin:0 auto; padding:0; display:inline-block; }
	.Area_btn ul li a { position:relative; font-size:4.5vw; width:40%; top: 66%; height:15vw;}
	.Area_btn ul li a img {  transition-duration: 0.2s;}
	.Area_btn ul li { margin:0 1%; width:100%; background-size:100%; height:60vw;}
	.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 { font-size:4.5vw; width:100%;}
	*/
}



/*按鈕2*/
.Area_btn2 {position: relative; left:0; margin:0px auto 80px; padding:0; text-align: center; height:154px; background:center bottom no-repeat;}
.Area_btn2 ul { display: inline-block;margin:0px 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 { float:left; margin:0 10px; transition-duration: 0.3s;}
.Area_btn2 ul li: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%);
}

/*純文字版
.Area_btn2 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_btn2 ul li { background: linear-gradient(#ff298d,#e80266); border-radius:100px;}
*/

@media screen and (max-width:767px){
	.Area_btn2 { width:100%; height:20vw; margin:0 auto 4vw; padding:0; background-image:none !important; }
	.Area_btn2 ul { width:94%; margin:0 auto; float:inherit; display:inline-block;  background-size:90%;}
	.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:0 1%; width:48%; height:19vw;}
	.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%);
	}

	/*純文字版
	.Area_btn2 ul li a { font-size:4.5vw; width:100%;}
	*/
}
	
/*按鈕3*/
.Area_btn_p {position: relative; margin:0 auto 80px; padding:0; text-align: center; height: 123px; background: center top no-repeat; z-index: 9999;}
.Area_btn_p ul { display: inline-block;margin:0 auto; padding:0;}
.Area_btn_p ul li a { position:relative; }
.Area_btn_p ul li a img {  transition-duration: 0.2s; width:100%;}
.Area_btn_p ul li { float:left; margin:0 auto; transition-duration: 0.3s;}
.Area_btn_p ul li: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%);
}

/*純文字版
.Area_btn_p 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_p ul li { background: linear-gradient(#ff298d,#e80266); border-radius:100px;}
*/

@media screen and (max-width:767px){
	.Area_btn_p { position: fixed; width:100%; height:14vw; margin:0 auto; padding:0; background-size:90%;z-index: 9999;background: #ffb5a2; bottom: 0;box-shadow: 0 -4px 6px rgba(0,0,0,0.2); }
	.Area_btn_p ul { width:82%; margin:2vw auto 0; padding:0; display:inline-block;}
	.Area_btn_p ul li a { position:relative; font-size:4.5vw; width:100%;}
	.Area_btn_p ul li a img {  transition-duration: 0.2s;}
	.Area_btn_p ul li { margin:0 auto; width:100%; height:auto;}
	.Area_btn_p 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_p ul li a { font-size:4.5vw; width:100%;}
	*/
}

/*按鈕4*/
.Area_btn4 {position: relative; left:0; margin:0px auto 80px; padding:0; text-align: center; height:580px; background:center top no-repeat;}
.Area_btn4 ul { display: inline-block;margin:160px auto 0; padding:0; width:1206px }
.Area_btn4 ul li a { position:relative; }
.Area_btn4 ul li a img {  transition-duration: 0.2s; width:100%;}
.Area_btn4 ul li { float:left; margin:10px 5px; transition-duration: 0.3s; width:191px; height:191px}
.Area_btn4 ul li: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%);
}

/*純文字版
.Area_btn4 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_btn4 ul li { background: linear-gradient(#ff298d,#e80266); border-radius:100px;}
*/

@media screen and (max-width:767px){
	.Area_btn4 { width:100%; height:158vw; margin:0 auto 6vw; padding:0; background-size: 90%;}
	.Area_btn4 ul { width:90%; margin:20vw auto 0; padding:0; display:inline-block; -webkit-display:inline-block;}
	.Area_btn4 ul li a { position:relative; font-size:4.5vw; width:100%;}
	.Area_btn4 ul li a img {  transition-duration: 0.2s;}
	.Area_btn4 ul li { margin:0 auto 2.5%; width:33.3%; height:auto;}
	.Area_btn4 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_btn4 ul li a { font-size:4.5vw; width:100%;}
	*/
}
	
	

/*hover*/
.hover0 {transition-duration: 0.3s;}
.hover0: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%);
}

.Area .go_bt { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.Area .go_bt:hover { -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; filter:brightness(110%);}
  @media screen and (min-width:768px){
    .Area .go_bt:hover { -webkit-transform:translateY(-6px); -moz-transform:translateY(-6px); -ms-transform:translateY(-6px); -o-transform:translateY(-6px); transform:translateY(-6px);}
  }