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

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


/*全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;background: url(page-bg.png?t=1764572281554) center bottom no-repeat,#130e12;}
.WRAPPER img { border:0px; vertical-align:top;width: 100%;height: auto;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}

.deco_bg {
	position: absolute;
	z-index: -1;
	top: 1500px;
	width: 100%;
	min-width: 1220px;
	height: 100%;
	background: url(bgdeco.png?t=1764572281554) repeat-y center top;
}

@media screen and (max-width:767px){
	.WRAPPER { padding-bottom:30px; min-width: inherit;  overflow: hidden;background: url(mb-page-bg.png?t=1764572281554) center bottom no-repeat;background-size: contain}
	.WRAPPER img {  width:100%;  height:auto;}
}

	/*區塊_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*/
.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;}
	} 

/*背景*/
@media screen and (min-width:768px){
.bg_00 { z-index:0; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}

.bg_01 { z-index:-40; position:absolute;top:0;left:0; width:100%; height:1200px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_02 { z-index:-40; position:absolute;top:1173px;left:0; width:100%; height:100%; background-repeat:repeat-y; background-position: center top; pointer-events:none;}
.bg_deco02 {z-index: -9;position:absolute;top: 134px;left: 0px;width:2000px;height:100%;background-position:center top;background-repeat:repeat-y;transition:0.5s linear;pointer-events:none;}
.bg_05 {z-index:-43;position:fixed;top: 0px;left:0;width:100%;height:100%;background-position:center 0px;background-repeat:repeat-y;transition:0.5s linear;pointer-events:none;}
.bg_repeat {z-index:-46;position:fixed;top: 0px;left:0;width:100%;height:100%;background-position:center 0px;background-repeat:repeat-y;transition:0.5s linear;pointer-events:none;}
.bg_deco { z-index:-30;position:fixed;top:0; left:0; width:100%; height:100%; background-position:center 0px; background-repeat:repeat-y; transition:0.5s linear; pointer-events:none;}
	
}
@media screen and (max-width: 767px){

}

/*區塊底*/
@media screen and (min-width:768px){
.Area_bottom01 {background:url(pc_bottom01.png?t=1764572281554)top center no-repeat;background-size:100%;padding-top:80px;margin-top:-22px;margin-bottom:50px;}
}
@media screen and (max-width: 767px){
.Area_bottom01 {background: #ffcc82;background-size:100%;padding-top:4vw;}
	.mo_top {z-index: 1;position:absolute;top: 44px;left:0;width:100%;height:132vw;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}	
}

/*版頭區*/
@media screen and (min-width:768px){
.Area_title {height: 1080px;}

.gold_leafe {
	position:absolute;
	width: 45px;               
	top: 569px;
	left: 684px;
	pointer-events:none;
	z-index: 10;
}
.gold_leafe02 {
	position:absolute;
	width: 67px;        
	top: 805px;
	right: 232px;
	pointer-events:none;
	z-index: 2;
}
.gold_leafe03 {
	position:absolute;        
	width: 49px;
	top: 745px;
	right: 323px;
	pointer-events:none;
	z-index: 2;
}
.gold_leafe04 {
	position:absolute;
	width: 40px;
	top: 463px;
	left: 560px;
	pointer-events:none;
	z-index: 2;
}
.gold_leafe05 {
	position:absolute;        
	width: 48px;
	top: 821px;
	left: 236px;
	pointer-events:none;
	z-index: 2;
}

.light {
	position:absolute;
	width: 594px;
	top: 425px;
	left: 316px;
	pointer-events:none;
	z-index: 10;
	mix-blend-mode: color-dodge;
	img{
		width: 80%;
	}
}
.light02 {
	position:absolute;
	width: 594px;
	top: -64px;
	left: 156px;
	pointer-events:none;
	z-index: 10;
	mix-blend-mode: color-dodge;
	img{
		width: 91%;
	}
}

}
@media screen and (max-width: 767px){

	.Area_title {height: 115vw;top: -6vw;}
	.gold_leafe {position:absolute;width: 4%;        top: 66.5vw;
        right: 38vw;pointer-events:none;z-index: 13;}
	.gold_leafe02 {position:absolute;width: 6%;top: 90vw;left: 83vw;pointer-events:none;z-index: 2;}
	.gold_leafe03 {position:absolute;width: 5%;        top: 84.5vw;
        right: 19vw;pointer-events:none;z-index: 2;}
	.gold_leafe04 {position:absolute;width: 5%;        top: 52.5vw;
        right: 48vw;pointer-events:none;z-index: 2;}
	.gold_leafe05 {position:absolute;width: 5%;        top: 93.5vw;
        right: 86vw;pointer-events:none;z-index: 2;}
	.light {position:absolute;width: 27%;top: 64.5vw;right: 41vw;pointer-events:none;z-index: 16;mix-blend-mode: color-dodge;}
	.light02 {position:absolute;width: 38%;top: 16.5vw;right: 55vw;pointer-events:none;z-index: 16;mix-blend-mode: color-dodge;}

}

/*編輯按鈕移動*/
#eWriterBtn_bt_B_000_05 { margin-left: 89px!important; margin-top: 60px!important; z-index: 99!important; }
#eWriterBtn_bt_B_000_06 { margin-left: 100px!important; margin-top: 220px!important; z-index: 99!important; }

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

/*副標輪播*/	
.Area_title  .main-subtitle {
	position:absolute;
	overflow: hidden;
	z-index: 8;
	li{
		background: unset;
	}
}

/*主標入稿*/
@media screen and (min-width:768px){
	/*品類標*/			
	.Area_title .category {
		position:absolute;        
		width: 488px;
        top: 86px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 7;
	}

	/*主標*/		
	.Area_title .main-title {
		position:absolute;        
        width: 840px;
		top: 130px;
        left: 50%;
		transform: translateX(-50%);
		z-index: 4;
	}

	/*副標輪播*/	
	.Area_title  .main-subtitle {
		position:absolute;
		width: 520px;        
        top: 291px;
        left: 50%;
		transform: translateX(-50%);
		z-index: 8;

		.sub-bg{
			position: absolute;
            top: -12px;
		}
	}

	/*pp_01*/		
	.Area_title .pp_01 {
		position:absolute;
        width: 349px;
        top: 411px;
        left: 448px;
		z-index: 7;
		margin: auto;
	}
	.Area_title .PD_slide:hover{
		transform:none;
	}
	/*pp_02*/		
	.Area_title .pp_02 {
		position:absolute;        
        width: 250px;
        top: 473px;
        left: 655px;
		z-index: 7;
		margin: auto;
	}

	/*pp_03*/		
	.Area_title .pp_03 {
		position:absolute;         
        width: 292px;
        top: 473px;
        left: 250px;
		z-index: 7;
		margin: auto;
	}

	/*舞台*/		
	.Area_title .main-stage {
		position:absolute;         
		width: 650px;
		top: 686px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 5;
		margin: auto;
	}

	/* date	 */
	.Area_title .date {
		position:absolute;        
        width: 300px;
        top: 333px;
        right: 137px;
		z-index: 7;
	} 

}

@media screen and (max-width:767px){
	/*品類標*/		
	.Area_title .category {
		position:absolute;        
        width: 65vw;
        top: 11vw;
		left: 50%;
		transform: translateX(-50%);
		z-index: 7;
	}

	/*主標*/		
	.Area_title .main-title {
		position:absolute;        
        width: 87vw;
        top: 18vw;
		left: 50%;
		transform: translateX(-50%);
		z-index: 4;
	}

	/*副標輪播*/	
	.Area_title  .main-subtitle {
		position:absolute;
        width: 58vw;
        top: 35.9vw;
		left: 50%;
		transform: translateX(-50%);
		overflow: hidden;
		z-index: 8;
		.sub-bg{
			position: absolute;
			top: -2vw;
		}
	}

	/*pp_01*/		
	.Area_title .pp_01 {
		position:absolute;
        width: 35vw;
        top: 47.7vw;
        left: 32vw;
		z-index: 7;
		margin: auto;
	}
	.Area_title .PD_slide:hover{
		transform:none;
	}
	/*pp_02*/		
	.Area_title .pp_02 {
		position:absolute;        
        width: 24vw;
        top: 54vw;
        left: 56vw;
		z-index: 7;
		margin: auto;
	}

	/*pp_03*/		
	.Area_title .pp_03 {
		position:absolute;         
        width: 29vw;
        top: 53vw;
        left: 13vw;
		z-index: 7;
		margin: auto;
	}

	/*舞台*/		
	.Area_title .main-stage {
		position:absolute;         
		width: 70vw;
        top: 78vw;
		left: 50%;
		transform: translateX(-50%);
		z-index: 5;
		margin: auto;
	}

	/* date	 */
	.Area_title .date {
		position:absolute;        
        width: 28vw;
        top: 39.7vw;
        right: 2vw;
		z-index: 7;
	} 	
	
}

.title{
	margin-bottom: 12px;
	@media screen and (max-width:767px){
		margin-bottom: 4vw;
	}
}

.Area_main{
	box-sizing: border-box;
	position: relative;
	z-index: 3;
	padding: 80px 40px;
	background: url(area-main-bg.png?t=1764572281554) center center no-repeat;
	background-size: 100% 100%;
	@media screen and (max-width:767px){
		padding: 9vw 2vw;
	}

	.box{
		position: relative;
		.img-deco{
			width: 20%;
			position: absolute;
			top: -48px;
			left: 24px;
			z-index: 5;
			filter: drop-shadow(2px 2px 12px #00000063);
			@media screen and (max-width:767px){
				width: 28vw;
				top: -6vw;
				left: 3vw;
				filter: drop-shadow(.5vw .5vw 2vw #00000063);
			}
		}
	}
	&::before{
		content: "";
		display: block;
		position: absolute;
		bottom: 20px;
		left: 60px;
		width: 358px;
		height: 121px;
		z-index: -1;
		background: url(area-main-deco.png?t=1764572281554) center center no-repeat;
		background-size: cover;
		@media screen and (max-width:767px){
            width: 44vw;
            height: 14vw;
            bottom: 3vw;
            left: 4vw;
		}
	}
	&:after{
		content: "";
		display: block;
		position: absolute;
		bottom: 20px;
		right: 60px;
		width: 95px;
		height: 95px;
		z-index: 5;
		background: url(area-bg-deco.png?t=1764572281554) center center no-repeat;
		background-size: cover;
		@media screen and (max-width:767px){
			width: 10vw;
			height: 10vw;
			bottom: 2vw;
			right: 8vw;
		}
	}

	.title{
		@media screen and (max-width:767px){
			margin-bottom: 1vw;
		}
	}
}

.Area_countdown{
	.time-countdown{
		padding: 4px 0;
		width: 50%;
		margin: -28px auto 20px;
		background: linear-gradient(90deg,#20287000 0%, #202870 40%,#202870 60%,#20287000 100%);
		@media screen and (max-width:767px){
			margin: -5vw auto 5vw;
			padding: 0;
			width: auto;
			.TimerNick{
				position: relative;
				top: unset;
				height: unset;
				display: flex;
				justify-content: center;
				white-space: nowrap;
				gap: 1vw;
				width: auto;
				padding: 0;
			}
		}
	}
}

.Area_danjimo{
	.Area_danji{
		@media screen and (max-width:767px){
			width: 96%;
		}
	}
	.box{
		.PD_layout[data-pd-li="BN"]{
			ul{
				padding: 0;
				gap: 32px;
				@media screen and (max-width:767px){
					gap: 2vw;
				}
			}
		}
	}
}

/* 作圖區 */
.PD_layout.PD_layout-CSSBG_01[data-pd-li=PDBN]{
	ul{
		gap: 0;
		@media screen and (max-width:767px){
			gap: 0;
		}
		li{
			.PD_img{
				padding: 0;
                margin: 86px auto 8px;
                width: 58%;
				@media screen and (max-width:767px){
                    width: 54%;
                    margin: 9vw auto 1vw;
				}
			}
			.PD_into{
				width: 80%;
				margin: 0 auto;
				h3{
					color: #fff;
					font-size: 1.8rem;
					@media screen and (max-width:767px){
						font-size: 3.7vw;
					}
				}
				h4{
					color: #fff;
					font-size: 1.3rem;
					@media screen and (max-width:767px){
						font-size: 4vw;
					}
				}
				p{
					font-size: 1.2rem;
					color: #ffc477;
					@media screen and (max-width:767px){
						font-size: 3vw;
					}
					.oPrice{
						color: #888888;
						font-size: 1.5rem;
						@media screen and (max-width:767px){
							font-size: 2vw;
						}
					}
					.Price{
						color: #ffc477;
						font-size: 2.5rem;
						@media screen and (max-width:767px){
							font-size: 5vw;
						}
					}
				}
			}
		}
		li::after {
			content: "";
			display: block;
			width: 100%;
			height: 0;
			padding-bottom: 136%;
			background-image: url(PD_layout-CSSBG_01.png?t=1764572281554);
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center top;
		}
	}

}




.Area_bag{
	.area-bg{
		position: relative;
		background: url(area-bg.jpg?t=1764572281554) center center no-repeat;
		padding: 40px 0;
		border-radius: 20px 20px 20px 180px;
		@media screen and (max-width:767px){
			padding: 4vw 0;
			border-radius: 0 0 0 25vw;
			background-size: cover;
		}
		&::after{
			content: "";
			display: block;
			position: absolute;
            bottom: -31px;
            right: 67px;
			width: 95px;
			height: 95px;
			background: url(area-bg-deco.png?t=1764572281554) center center no-repeat;
			background-size: cover;
			@media screen and (max-width:767px){
				bottom: -5vw;
				right: 6vw;
				width: 14vw;
				height: 14vw;
			}
		}
	}
	.box{
		display: flex;
		gap: 12px;
		margin: 0 16px 20px;
		@media screen and (max-width:767px){
			margin: 0 2vw 4vw;
			gap: 1vw;
		}
		.sub-title{
			flex:1;
			@media screen and (max-width:767px){
				flex: 1.5;
			}
			ul{
				padding: 0;
			}
		}
		.Area_swiper{
			flex: 8;
		}
	}
}

/* LOGO區標調整 */
.PD_layout.PD_layout-D3_02[data-pd-pdlogo][data-pd-pdimg=off]{
	margin-bottom: 20px;
	@media screen and (max-width:767px){
		margin-bottom: 4vw;
	}
	ul{
		padding: 0;
	}
	.PD_into{
		gap: 20px;
		@media screen and (max-width:767px){
			gap: 1.5vw;
		}
		.PD_logo{
			max-width: 200px;
			padding: 10px 36px;
			@media screen and (max-width:767px){
				padding: 1.4vw 3vw;
                max-width: 28vw;
			}
		}
		h3{
			overflow: visible;
			font-style: italic;
			text-align: left;
			width: auto;
		}
	}
}

.Area_brand{
	.box{
		margin-bottom: 40px;
		@media screen and (max-width:767px){
			margin-bottom: 8vw;
		}
	}
}

.Area_recommend{
	.box{
		background: linear-gradient(90deg,#000321 0%,#192065 40%,#192065 60%,#000321 100%);
		margin-bottom: 40px;
		padding: 32px 40px;
		border: 2px solid #6068b3;
		@media screen and (max-width:767px){
			padding: 6vw 4vw;
			border-top: 2px solid #6068b3;
			border-bottom: 2px solid #6068b3;
			border-left: unset;
			border-right: unset;
			margin-bottom: 7vw;
		}
		.PD_layout.PD_layout-D3_02{
			margin-bottom: 20px;
			@media screen and (max-width:767px){
				margin-bottom: 4vw;
			}
			ul{
				padding: 0;
			}
			.PD_into{
				gap: 20px;
				@media screen and (max-width:767px){
					gap: 1.5vw;
				}
				.PD_logo{
					max-width: 200px;
					padding: 10px 36px;
					@media screen and (max-width:767px){
						padding: 1.4vw 3vw;
						max-width: 28vw;
					}
				}
				h3{
					overflow: visible;
					font-style: italic;
					text-align: left;
					width: auto;
				}
			}
		}
    .PD_layout01 li{
      @media screen and (min-width:768px){
      width: 403.5px !important;
      }
    }
	}
}

.Area_logo{

	@media screen and (max-width:767px){
		width: 96%;
	}
	.PD_layout{
		width: 50%;
		@media screen and (max-width:767px){
			width: 70%;

		}
		ul{
			gap: 40px;
			@media screen and (max-width:767px){
				gap: 7vw;
			}
		}
	}
}

.Area_page{
	overflow: hidden;
}

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

.Area_bottom{
	margin-bottom: 60px;
	@media screen and (max-width:767px){
		margin-bottom: 12vw;
	}
}


/*版頭*/
.Area_top {}
.Area_top .momologo { z-index:10;position:absolute;top:15px;left:0px;}
	@media screen and (max-width:767px){
		.Area_top { height: auto;}
		.Area_top .momologo { display:none;}
	}

.lightSweep {position: absolute;background: none 0% 0% / auto repeat scroll padding-box border-box  rgba(0, 0, 0, 0); overflow: hidden; z-index:0; pointer-events: none;
	-webkit-filter: brightness(1.5);
	-webkit-mask-size: 300% 200%;
	-webkit-mask-image: -webkit-linear-gradient( 20deg, rgba(255, 255, 255, 0) 40%,rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 0) 60%);
	-webkit-transition: -webkit-mask-position;
	-webkit-animation-timing-function: linear;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-filter: brightness(1.5);
	-moz-mask-size: 300% 200%;
	-moz-mask-image: -webkit-linear-gradient(20deg,rgba(255, 255, 255, 0) 40%,rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
	-moz-transition: -webkit-mask-position;
	-moz-animation-timing-function: linear;
	-moz-transform: translate3d(0, 0, 0);
	-o-filter: brightness(1.5);
	-o-mask-size: 300% 200%;
	-o-mask-image: -webkit-linear-gradient(20deg, rgba(255, 255, 255, 0) 40%,rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 0) 60%);
	-o-transition: -webkit-mask-position;
	-o-animation-timing-function: linear;
	-o-transform: translate3d(0, 0, 0);
	filter: brightness(1.5);
	mask-size: 300% 200%;
	mask-image: -webkit-linear-gradient(20deg,rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 0) 60%);
	transition: -webkit-mask-position;
	animation-timing-function: linear;
	transform: translate3d(0, 0, 0);
	transition-duration: 3s;
	animation: move 3s ease-out infinite;
		z-index: 5 !important;
	}
	
	@keyframes move {
	from {
		-webkit-mask-position:0% 0px;
		-moz-mask-position: 0% 0px;
		-o-mask-position: 0% 0px;
		mask-position: 0% 0px;
	}
	to {
		-webkit-mask-position: 150% 0px;
		-moz-mask-position: 150% 0px;
		-o-mask-position: 150% 0px;
		mask-position: 150% 0px;
	}
	}


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