@charset "utf-8";
/*基本*/
body{ margin: 0; padding: 0;}

/*全BOX版面*/
.WRAPPER { position: relative; display: block; margin: 0 auto; padding: 0; width: 100%;  min-width: 1220px; overflow: hidden; font-family: "微軟正黑體","Microsoft JhengHei",Helvetica; background:#ccf9fd;
background-size: contain;background-attachment: fixed;background-position: center;}
.WRAPPER img { border: 0; vertical-align: top;width: 100%;  height: auto;}
.WRAPPER a { text-decoration: none;}
@media screen and (max-width:767px){
  .WRAPPER { min-width: inherit; padding-bottom: 10vw;background: #ccf9fd;background-size: contain;background-attachment: fixed;background-position: center; }
  .WRAPPER img {  width: 100%;  height: auto;}
}


/*PC背景*/
@media screen and (min-width:767px){
  .bg_deco00 { z-index:19; position:absolute; top:820px; left:0; width:100%; min-width:1220px; height:100%; background-repeat:repeat-y; background-position:center top; pointer-events:none;}
	.bgtop01 { z-index:-10; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:1100px; background-repeat:no-repeat; background-position:center top; }
	.bgtop02 {z-index:-10;position:absolute;top: 787px;left:0;width:100%;min-width:1220px;height:450px;background-repeat:no-repeat;background-position:center top;border: 3px solid #000000;transform: skew(0deg, -2deg);}
	.bgtop_repeat { z-index:-30; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:repeat-y; background-position:center top; pointer-events:none;}
	.bgtop_fixed { z-index:-50; position:fixed; top:0; left:0; width:100%; min-width:1220px; height:100%; background-repeat:no-repeat; background-position:center top; pointer-events:none;}
}

/*mb背景*/
@media screen and ( max-width:767px) {
.m_bg01 { z-index:0; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:repeat-y; background-position:center top; background-size:100%; }	
.bgtop02 {z-index:0; position:absolute;top:0;left:0;width:99%;height:100%;background-repeat:repeat-y;background-position:center top;background-size:100%;border: 2px solid #000000;transform: skew(0deg, -3deg);}	

}


  /*區塊_all*/
  .Area1220 {margin:0 auto;width:1220px;}
  .Area960 { margin:0 auto; width:960px;}
  .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.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;}
  .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);}
			
			
  .WRAPPER .go_bt1 {
	-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_bt1:hover { 
	-webkit-transform:translateY(-10px);
	   -moz-transform:translateY(-10px);
		-ms-transform:translateY(-10px);
		 -o-transform:translateY(-10px);
			transform:translateY(-10px);}
			
  
			
	  @media screen and (max-width:767px){
		  .Area1220 { width:100%;}
		  .Area960 { width:100%;}
		  .Area .go_bt:hover {  
			  -webkit-transform:none;
			  -moz-transform:none;
			  -ms-transform:none;
			  -o-transform:none;
			  transform:none;}
  
	  }


/*LOGO CSS*/
.momologo { z-index:2; position: absolute; top: 15px; left:15px;}
.momologo a { display:block; width:140px; height:21px;}
.momologo a svg { width:140px; height:21px; }
.momologo a path { fill:#EA27C2; }
.momologo-pink  a path { fill:#EA27C2; }/*LOGO 桃紅色*/
.momologo-white a path { fill:#ffffff; }/*LOGO 白色*/
  @media screen and (max-width:767px){
      .momologo { display:none;}
  }
  /*登記贈品文案顏色*/
.Area_danji .danji_box ul li .activityText .gifts span { color: #a54571;}  

  .Area_swiper_box{
	padding: 0;
	.PD_layout li{
		background: none;
	  }
  }

/* 區標 */
.box_title{
	margin-bottom: 4vw;
	a{
		pointer-events: none;
	}

	@media screen and (min-width: 768px) {
		margin-bottom: 40px;
	}
  }

/* 版頭區塊 Area_title */
.Area_title {
	height: 121vw;
	position: relative;
	z-index: 20;
	@media screen and (min-width: 768px) {
		height: 752px;
	}
  
	/* 背景元素 */
	.mb_01 {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  z-index: 0;
	}
  
	.toptitle {
		position: absolute;
		z-index: 10;
		width: 90vw;
		left: 4vw;
		top: 4vw;
		a{
			pointer-events: none;
		}
		@media screen and (min-width: 768px) {
            width: 800px;
            left: 200px;
            top: 52px;
		}
  
	}
  

	.subtitle {
	  position: absolute;
	  top: 30vw;
	  left: 24vw;
	  width: 52vw; 
	  margin: 0 auto;
	  z-index: 10;
	  overflow: visible;
	  padding: 2vw 4vw;
	  box-sizing: border-box;
	  @media screen and (min-width: 768px) {
		  top: 288px;
		  left: 369px;
		  width: 455px;
		  padding: 18px 34px;
		}
		.Area_swiper a{
		  pointer-events: none;

	  }
	  .sub_bg {
		position: absolute;
		top: 0;
		left: 0;
		margin: 0 auto;
		width: 100%;
	  }
	}

	.date{
		position: absolute;
		top: 19vw;
		left: 4vw;
		width: 20vw;
		overflow: hidden;
		z-index: 13;
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		a{
			pointer-events: none;

		}

		@media screen and (min-width: 768px) {
			top: 265px;
            left: 853px;
            width: 156px;
		}
	}
  
	.toppd{
		position: absolute;
		top: 42vw;
		left: 3vw;
		width: 94vw;
		z-index: 12;
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		@media screen and (min-width: 768px) {
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            top: 443px;
            left: 133px;
            width: 900px;
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
		}
		.PD_layout-CSSBG_01{
			ul{
				li::after{
					content: none;
				}
			}
			li{
				padding: 2vw;
				@media screen and (min-width: 768px) {
					padding: 20px;
				}
				.PD{
					position: relative;
					a{
						display: flex;
						flex-direction:row;
					}
					.PD_img{
						margin: 0 auto;
						width: 50%;
						padding: 0;
					}
					.PD_into{
						width: 42%;
						padding-top: 23vw;
						@media screen and (min-width: 768px) {
							padding-top: 165px;
						}
						h3{
							color: #212121;
							font-size: 1.2rem;
							@media screen and (min-width: 768px) {
								font-size: 1.6rem;

							}
						}
						h4{
							@media screen and (min-width: 768px) {
								font-size: 1.3rem;

							}
						}
						p span{
							color: #ff67af;
							@media screen and (min-width: 768px) {
								font-size: 2rem;

							}
						}
					}
				}
			}
		}
	}


	/* 背景deco */
	.toppd-bg01{
		position: absolute;
		top: 46vw;
		left: 4vw;
		width: 56vw;
		z-index: 2;
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		@media screen and (min-width: 768px) {
            top: 449px;
            left: 258px;
            width: 402px;
		}
	}
	.toppd-bg02{
		position: absolute;
        top: 57vw;
        left: 45vw;
        width: 51vw;
		z-index: 1;
		@media screen and (min-width: 768px) {
            top: 481px;
            left: 565px;
            width: 380px;
		}
	}
	.Area-title-bg01{
		position: absolute;
		top: -15vw;
        left: 6vw;
        width: 22vw;
		z-index: 2;
		@media screen and (min-width: 768px) {
            top: -85px;
            left: 195px;
            width: 161px;
		}
	}
	.Area-title-bg02{
		position: absolute;
        top: 23vw;
        left: -17vw;
        width: 25vw;
		z-index: 1;
		@media screen and (min-width: 768px) {
			top: 233px;
            left: -6px;
            width: 194px;
		}
	}
	.Area-title-bg03{
		position: absolute;
		top: 79vw;
		left: -12vw;
		width: 16vw;
		z-index: 2;
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		@media screen and (min-width: 768px) {
            top: 245px;
            left:1041px;
            width: 163px;
		}
	}
	.Area-title-bg04{
		position: absolute;
        top: 21vw;
        left: 90vw;
        width: 19vw;
		z-index: 1;
		@media screen and (min-width: 768px) {
			top: 513px;
            left: 44px;
            width: 100px;
		}
	}
	.Area-title-bg05{
		display: none;
		position: absolute;
		@media screen and (min-width: 768px) {
			display: block;
			top: -56px;
            left: -345px;
            width: 278px;
		}
	}
	.Area-title-bg06{
		display: none;
		position: absolute;
		@media screen and (min-width: 768px) {
			display: block;
			top: 365px;
            left: 1446px;
            width: 204px;
            transform: rotateZ(246deg);
		}
	}
	.Area-title-bg07{
		display: none;
		position: absolute;
		@media screen and (min-width: 768px) {
			display: block;
			top: 408px;
            left: -278px;
            width: 175px;
            transform: rotateZ(260deg);
		}
	}
	.Area-title-bg08{
		display: none;
		position: absolute;
		@media screen and (min-width: 768px) {
			display: block;
            top: 68px;
            left: 1343px;
            width: 200px;
            transform: rotateZ(260deg);
		}
	}
	.Area-title-bg09{
		display: none;
		position: absolute;
		@media screen and (min-width: 768px) {
			display: block;
			top: 543px;
            left: 1181px;
            width: 135px;
            transform: rotateZ(198deg);
		}
	}
  }

.Area_hot{
	margin: 0 auto;
	padding: 1vw 0;
	width: 96%;
	@media screen and (min-width: 768px) {
		padding: 20px 0;
		width: 960px;
	}
	
	.box_title{
		background: url(area_hot_bg.png?t=1788342848258) no-repeat;
		background-size: cover;
		margin: 0;
	}
	
	.box{
		background: #ffaad2;
		border-radius: 0 0 3vw 3vw;
		padding:2vw 0 1vw;
		@media screen and (min-width: 768px) {
			border-radius: 0 0 20px 20px;
			padding:20px 0 12px;
		
		}

	}

	.PD_layout-CSSBG_01{
		ul{
			gap: 2vw;
			padding: 0 2vw;
			@media screen and (min-width: 768px) {
				gap: 12px;
				padding: 0 20px;
			}
			li::after{
				content: none;
			}
		}
		li{
			background: #fff;
			padding: 2vw 1.6vw;
			border-radius: 3vw;
			@media screen and (min-width: 768px) {
				padding: 12px;
				border-radius: 16px;
			}
			.PD{
				position: relative;
				.PD_img{
					margin: 0 auto;
					width: 90%;
					padding: 0;
				}
				.PD_into{
					h3{
						color: #212121;
						font-size: 1.2rem;
					}
					p{
						color: #ff67af;
					}
				}
			}
		}
	}
}

.Area_coupon{
	.time{
		width: 80%;
		margin: 0 auto;
		display: flex;
		gap: 2vw;
		margin-bottom: 2vw;

		@media screen and (min-width: 768px) {
			margin-bottom: 20px;
			width: 70%;
			gap: 20px;
			
		}

		.ts_ing{
			transform: scale(1.1);
		}
		
		.ts_end, .ts_pre{
			filter: grayscale(1);
		}

	}

	.box-coupon{
		.ts_ing{
			display: block;
		}
		
		.ts_end, .ts_pre{
			display: none;
		}
	}
}

.Area_strategy{
	.box{
		margin: 0 auto;
		width: 96%;
		margin-bottom: 3vw;
		.box_title{
			margin-bottom: 1vw;
		}
		.PD_layout{
			
			ul{
				gap: 2vw;
				&::after{
					content: none;
				}
			}
		}
	}
	.box_strategy{
		a{
			pointer-events: none;

		}

	}
}

.Area_theme{
	.box{
		width: 96%;
		margin: 0 auto;
	}
}

.Area_brand{
	.brand-group{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 4vw;
		@media screen and (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
		}
	}
	.box-brand{
		width: 96%;
		padding: 2vw 0;
		border-radius: 3vw;
		margin: 0 auto;
		background: #ffaad2;
		@media screen and (min-width: 768px) {
			width: 100%;
			padding: 12px 0;
			border-radius: 20px;
		}
		.brand-title{
			background: url(area_brand_title_bg.png?t=1788342848258) no-repeat;
			background-size: contain;
			background-position: center;
			margin-bottom: 2vw;
			@media screen and (min-width: 768px) {
				margin-bottom: 12px;
			}
			.PD_layout.PD_layout-D3_02{
				width: 78%;
				@media screen and (min-width: 768px) {
					width: 70%;
				}
				li{
					.PD_into{
						gap: 1.5vw;
						@media screen and (min-width: 768px) {
							gap: 12px;
						}
						.PD_logo{
							width: 30%;
							@media screen and (min-width: 768px) {
								width: 35%;
							}
							img{
								width: auto;
								max-height: 6vw;
    							max-width: 100%;
								@media screen and (min-width: 768px) {
									max-height: 27px;
								
								}
							}
						}
						h3{
							color: #212121;
							@media screen and (min-width: 768px) {
								font-size: 32px;
							}
						}
					}
				}
			}
		}
		.PD_layout {
			width: 96%;
			li{
				&:nth-child(2){
					border-right: none;
				}
			}
		}
	}
}

.Area_category{
	.box{
		width: 96%;
		margin: 0 auto;
	}
}

.Area_link{
	ul.PD_wrapper{
		width: 90%;
		gap: 1vw;
		@media screen and (min-width: 768px) {
			width: 80%;
			gap: 20px;

		}
	}
}

/* 間距 */
.Area_bottom { margin-bottom: 80px; }
@media screen and (max-width:767px){
  .Area_bottom {margin-bottom: 7vw;}
  .Area_top{ margin-top: 30vw; }
}

/*注意事項區*/
.edm_notice{position: relative; text-align:center; padding:10px 10px 15px 10px; color:#000; font:12px/18px Helvetica;}
.edm_notice .apple_notice{ position: relative; padding:10px 0px 10px 0px; }



/*隱鑶*/
.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;}
	}


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