@charset "utf-8";

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

/*隱鑶*/
.for_pc {}
.for_phone, .for_m { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone, .for_m { display: inherit !important;}
	}


/*全BOX版面*/
.WRAPPER { position: relative;margin: 0 auto; padding: 0;	width:100%; min-width:1220px; overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;  display:inline-block;}
.WRAPPER .Area_top{position: relative; }
.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:1220px;}
	@media screen and (max-width:767px){
		.WRAPPER { padding-bottom:0px; margin:0 auto; display: block; min-width:100%; background-image:url(mb_bg.jpg?t=1774427151638); background-repeat:repeat-y; background-size:100%; }
		.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;  }
	}


.WRAPPER .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.WRAPPER .go_bt:hover { 
   filter:brightness(110%);
  -webkit-transform:translateY(10px);
     -moz-transform:translateY(10px);
      -ms-transform:translateY(10px);
       -o-transform:translateY(10px);
          transform:translateY(10px);}

/*滑過會亮*/	
.WRAPPER .go_bt3 {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.WRAPPER .go_bt3:hover { 
   filter:brightness(112%);
  -webkit-transform:translateY(-5px);
     -moz-transform:translateY(-5px);
      -ms-transform:translateY(-5px);
       -o-transform:translateY(-5px);
          transform:translateY(-5px);
		  }


.deco01{z-index:1;	animation: sway 5s infinite ease-in-out alternate;
			   -moz-transform-origin: top;
			    -ms-transform-origin: top;
				 -o-transform-origin: top;
  			-webkit-transform: scale(0.3);
			   -moz-transform: scale(0.3);
			    -ms-transform: scale(0.3);
				 -o-transform: scale(0.3);
				 transform-origin: -100% 0; }

.deco02{z-index:1;	 animation: sway 4.5s infinite ease-in-out alternate;
			   -moz-transform-origin: top;
			    -ms-transform-origin: top;
				 -o-transform-origin: top;
  			-webkit-transform: scale(0.3);
			   -moz-transform: scale(0.3);
			    -ms-transform: scale(0.3);
				 -o-transform: scale(0.3);
				 transform-origin: 110% 0; }


/*PC背景*/
@media screen and (min-width:767px){
  .bg_deco00 { z-index:-2; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:repeat-y; background-position:center top; }
	.bg_deco { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:no-repeat; background-position:center top; }
	.bgtop01 { z-index:-1; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop02 { z-index:-1; position:absolute; top:1000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop03 { z-index:-1; position:absolute; top:2000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop04 { z-index:-3; position:absolute; top:3000px; left:0; width:100%; min-width:1220px; height:100%; background-repeat:repeat-y; background-position:center top; }
	
}

/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; text-align:center;  }
.Area .box_bg{position:absolute;top:0;left: 0;z-index: 0;} 
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}

@media screen and (max-width:767px){
.Area960 { width: 100%;}
}

@media screen and (max-width:767px){
	.Area .go_bt:hover { 
		-webkit-transform:none;
		 -moz-transform:none;
			-ms-transform:none;
			 -o-transform:none;
				transform:none;}
	.Area1220 { width:100%;}
	.Area img{ width:100%;}
	.Area { position: relative;}

	/*區塊_切割*/
	.Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%;}
	.Area_2bn { width:96%; margin: 0 2%; padding:0; overflow:hidden;}
	.Area_2bn a { float:left; margin:0 1% 2%; padding:0; width:48%; }
	.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_3bn a { float:left; margin:0 1% 2% ; padding:0; width:31.3%; }
	.Area_1bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_1bn_nopadding a { position:relative; float:left; margin:0; padding:0; width:100%; }
	.Area_2bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_2bn_nopadding a { float:left; margin:0; padding:0; width:50%;}
	.Area_3bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_3bn_nopadding a { float:left; margin:0; padding:0; width:33.3%;}
	.Area_4bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
	.Area_4bn_nopadding a { float:left; margin:0; padding:0; width:25%; }	
	}



/*版頭*/
.Area_top {position:relative;width:1220px;height: 793px;}
.Area_top .title{position:absolute; top:140px; left:20px ; z-index:10; animation-delay: 0.1s;}
.Area_top .sub_01{position:absolute;top: 377px;left: 30px;z-index: 9;animation-delay: 0.2s;}
.Area_top .sub_02{position:absolute;top: 392px;left: 203px;z-index:9;animation-delay: 0.4s;}

	@media screen and (max-width:767px){
	 .Area_top { width:100%; height:115vw; background:url(mb_01.jpg?t=1774427151638) top center no-repeat ; background-size:100%; }
	 .Area_top .title{position:absolute;top: 2vw;left: 17.5vw;z-index:11;width: 68%;}
	 .Area_top .sub_01{position:absolute;top: 29vw;left: 19vw;z-index:2;width: 40%;}
	 .Area_top .sub_02{position:absolute;top: 28.5vw;left: 31vw;z-index:2;width: 52%;}
	}



	
/*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: #a25700;}                 
                    


/*活動訊息x3(線上入搞)*/
@media screen and (min-width:768px){
.Area_event { position: relative; height: 100%; margin-bottom: 80px;}
.Area_event .layout_event{top:0;}
.Area_event .layout_event ul {width:1040px;margin:0 auto; padding:65px; grid-gap: 0;/*background-image: url(pd_bg.png?t=1774427151638);background-repeat: repeat-y;background-size: 100%;background-position: center top*/;}
.Area_event .layout_event ul li {padding:0;margin:0 auto;}
.Area_event .layout_event ul li img {width:96%;}

}
@media screen and (max-width:767px){
.Area_event{margin-bottom: 6vw;}
.Area_event .layout_event{width:100%;margin:0;padding:0; /*background-image: url(mb_bg.jpg?t=1774427151638); background-size: 100%;background-repeat: repeat-y;*/}
.Area_event .layout_event ul {width:93%;margin:0 auto;padding:0;}
.Area_event .layout_event ul li {margin: 0;}
.Area_event .layout_event ul li img {width:100%;}
.Area_event .layout_event:nth-child(1) ul li{ margin: 0 0 0 0}
}



/*主打品(線上入搞)*/
@media screen and (min-width:768px){
.Area_btn {height:auto;margin-bottom: 80px;}
.Area_btn .PD_layout[data-pd-li*="BN"] .PD_into{width: 100%; padding-left: 0;position: absolute;left: -93px;top: 110px;z-index: 5}	
}
@media screen and (max-width:767px){
.Area_btn{margin-bottom: 10vw;}
.Area_btn  .PD_layout[data-pd-li*="BN"] .PD_into{width: 100%;padding-left: 0;position: absolute;left: -14.5vw;top: 13vw;z-index: 5}	
  }
	

/*Appletxt*/
.apple_txt{ position: relative;margin:30px auto; color:#000;font-size: 13px; text-align: center; }
	@media screen and (max-width:767px){
	.apple_txt{position: relative;margin:2%; color:#000; letter-spacing: -0.05em;}
	}

		
/**延遲載圖用**/
.mainArea .articleList * img.lazy {display:none;} 



/*---------NEW---------*/


/*回饋攻略*/
@media screen and (min-width:768px){
.Area01_all { padding-bottom: 30px; }
.Area01_all .PD_layout .PD img{ width:85%; }
}
@media screen and (max-width:767px){
  .Area01_all { width:100%; height:auto;padding-bottom: 2vw; }
  .Area01_all .PD_layout .PD img{ width:98%; }
  }


/*今日熱銷-輪播*/
@media screen and (min-width:768px){
  .Area_PD .Area_swiper_box {width:1220px; height:600px; margin-bottom:0; background-image: url(Area_4PD_bg.png?t=1774427151638);background-repeat: no-repeat;background-size: 100%;background-position: center top}
  .Area_PD .PD_layout ul {padding:160px 0 0 0!important;}
}
@media screen and (max-width:767px){
  .Area_PD .Area_swiper  { background:url(mb_04.png?t=1774427151638) top center repeat-y }
  .Area_PD .Area_swiper_box  { width: 100%;margin-bottom: 0;background-size: 100%; }


}


/*一帶二*/
@media screen and (min-width:768px){
	.Area_discount04 .title_txt {width: 65%!important ; padding-left: 120px;padding-right: 120px;top:-20px!important;}
	.Area_discount04  {height:100%; display: flex;flex-wrap: wrap;}
	.Area_discount04 .box {position:relative;margin-bottom:50px;width:95%;margin: 1px auto 38px auto;}	
	.Area_discount04 .b_box {/* background-color: #0000008c; *//* padding: 13px; */border-radius: 27px;width: 593px;margin: 8px;background: linear-gradient(45deg, #ac8661, #cfb08d, #af8964);}	
	.Area_discount04 .text02 {width: 90%;margin: auto;}	
	/**區標**/	
	.Area_discount04 .text {width: 63%;margin: 0px auto;}
	.Area_discount04 .text .PD_layout .PD_into{color: #fff;position: relative;}
	.Area_discount04 .text .PD_layout .PD_into .PD_logo{width: 33%;}  
	.Area_discount04 .text .PD_layout .PD_into h3{width: 100%;font-size: 1.5em;line-height: 1em;color: #000;text-align: center;}  
	.Area_discount04 .text .PD_layout .PD_into h5{font: bold 43px/56px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;margin-top: 24px;margin-left: 34px;margin-bottom: 32px;}  

	.Area_discount04 .text02 .PD_layout .PD_into{display: flex;flex-direction: row;margin-top: 0vw;margin-bottom: -4vw;}
	.Area_discount04 .text02 .PD_layout .PD_into .PD_logo{width: 39%;left: 0;top: 15px;position: relative;}  
	.Area_discount04 .text02 .PD_layout .PD_into h3{width: 65%;font-size: 35px;line-height: 2.2em;color: #292929;margin-top: 10px;}  
		/** 公版 **/	
		.Area_discount04 .b_box .box {position:relative;width: 91%;margin: 53px auto 22px auto;padding-bottom: 0px;}	
		.Area_discount04 .b_box .box .PD_layout ul{border-radius: 0;padding-top: 44px;}
		.Area_discount04 .b_box .box .PD_layout ul li{background-color: #fff;border-radius: 5px;}
	
}
@media screen and (max-width:767px){
	.Area_discount04  {}
	.Area_discount04 .box {position: relative;}
	.Area_discount04 .b_box {padding-top: 1vw;width: 95%;margin: 3vw auto;border-radius: 3vw;background: linear-gradient(45deg, #ac8661, #cfb08d, #af8964);}	
	/**區標**/	
	.Area_discount04 .text {padding-top: 0vw;width: 90%;margin: 0px auto -2vw auto;background: url(item_text_001.png?t=1774427151638)top center no-repeat;background-size: 100%;}
	.Area_discount04 .text .PD_layout .PD_into{color: #fff;position: relative;margin-top: -7vw;}
	.Area_discount04 .text .PD_layout .PD_into .PD_logo{width: 33%;}  
	.Area_discount04 .text .PD_layout .PD_into h3{width: 100%;font-size: 1.5em;line-height: 1em;color: #000;text-align: center;}  
	.Area_discount04 .text .PD_layout .PD_into h5{font: bold 6vw/6vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;margin-top: 10.5vw;margin-left: 2vw;margin-bottom: 0;}  

	.Area_discount04 .text02 .PD_layout .PD_into{display: flex;flex-direction: row;margin-top: 0vw;margin-bottom: -4vw;}
	.Area_discount04 .text02 .PD_layout .PD_into .PD_logo{width: 30%;margin-top: 1vw;top: 0.5vw;margin-left: 2vw;}  
	.Area_discount04 .text02 .PD_layout .PD_into h3{width: 65%;font-size: 23px;line-height: 2em;color: #272727;}  
		/** 公版 **/	
		.Area_discount04 .b_box .box {position: relative;width: 93%;margin: 2vw auto 8px;padding-bottom: 2vw;}
		.Area_discount04 .b_box .box .PD_layout ul{border-radius: 2vw;width: 100%;grid-gap: .3em;margin-top: 0vw;padding-top: 2vw;}
		.Area_discount04 .b_box .box .PD_layout ul li{border-radius: 2vw;/* border: 0.5vw solid #000; */background-color: white;}
		
}


/*區標間距*/
.Area .title_txt { top: -10px;width: 45%; z-index: 10;}
.Area_bottom { margin-bottom: 80px;}
@media screen and (max-width:767px){
  .Area .title_txt { top: -1vw;width: 65%;}
  .Area_bottom { margin-bottom: 6vw;}
}

/*BTN間距*/
@media screen and (min-width:768px){
.Area_btn .PD_layout.BTN3 { padding: 0% 20% }
.Area_btn .PD_layout.BTN2 { padding: 0% 30% }

}
@media screen and (max-width:767px){
.Area_btn .PD_layout.BTN3 { padding: 0% 5% }
.Area_btn .PD_layout.BTN2 { padding: 0% 20% }
}

/*小圓點微調*/
@media screen and (min-width:768px){
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {top:10px!important;}
}

@media screen and (max-width:767px){
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {top:2vw!important;}
}