@charset "utf-8";

/* pc背景 */
.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: 100%;
	background-repeat: no-repeat;
	background-position: center top;
	pointer-events: none;
}

.bg_repeat {
	z-index: -46;
	position: fixed;
	background: #9d1c20;
	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 {
	position: absolute;
	z-index: -1;
	top: 1500px;
	width: 100%;
	min-width: 1220px;
	height: 100%;
	background: url(bgdeco.png?t=1765959850237) repeat-y center top;
}

/* mb背景 */
@media screen and (max-width: 767px) {
	.mo_top {
		z-index: 1;
		position: absolute;
		top: 44px;
		left: 0;
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-position: center top;
		pointer-events: none;
		background-size: 100%;
	}
}


/*編輯按鈕移動*/
/* #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: #9d1c20}   

/*版頭*/
.Area_title{
	height: 704px;
	@media screen and (max-width: 767px){
		height: 130vw;
		top: -6vw;
	}
	.main-title{
		position: absolute;
		animation:fadeInDown_s 0.5s 0.4s ease-in forwards;
		opacity: 0;
		z-index: 7;
		/* pointer-events: none; */
	}
	.date {
		position:absolute;        
        width: 230px;
        top: 38px;
        left: 352px;
		@media screen and (max-width:767px){
            width: 24vw;
            top: 9.7vw;
            left: 19.9vw;
		}
	} 
	.brand {
		position:absolute;        
        width: 50px;
        top: 33px;
        left: 209px;
		@media screen and (max-width:767px){
            width: 5.6vw;
            top: 9vw;
            left: 4.9vw;
		}
	} 
	.title {
		position:absolute;        
        width: 740px;
        top: 126px;
        left: -50px;
		@media screen and (max-width:767px){
            width: 96vw;
            top: 14vw;
            left: 3vw;
		}
	}
	.title-light {
		position:absolute; 
        left: 68px;
        top: 209px;
        width: 68px;
		animation-delay:.8s;
		z-index: 5;
		mix-blend-mode: screen;
		@media screen and (max-width:767px){
            width: 12vw;
            top: 24.8vw;
            left: 16vw;
		}
	}	
	.subtitle {
		position:absolute;
        width: 586px;
        top: 446px;
        left: 42px;
        transform: rotate3d(1, 0.8, 1, -11deg);
		@media screen and (max-width:767px){
            width: 70vw;
            top: 56.1vw;
            left: 18vw;
		}
	}
	.main-pd {
		position:absolute;
        width: 617px;
        top: 177px;
        left: 606px;
		z-index: 6;
		@media screen and (max-width:767px){
			width: 88vw;
            top: 64.3vw;
            left: 5vw;
		}
	}

	.deco{
		position:absolute;
        width: 425px;
        top: 132px;
        left: 672px;
		z-index: 8;
		@media screen and (max-width:767px){
            width: 61vw;
            top: 56.3vw;
            left: 14vw;
		}
	}

}

/* 區標 */
.title{
	margin-bottom: 32px;
	@media screen and (max-width:767px){
		margin-bottom: 4vw;
	}
}

/* 區塊背景 */
.area-bg{
	padding: 40px 0;
	background: url(area-bg.jpg?t=1765959850237) top center repeat-y;
	background-size: contain;
	box-sizing: border-box;
	@media screen and (max-width:767px){
		padding: 8vw 0;
		background: url(mb-area-bg.jpg?t=1765959850237) top center repeat-y;
		background-size: contain;
	}
}

.Area_danjimo{
	.Area_danji{
		@media screen and (max-width:767px){
			width: 96%;
		}
	}
	.box{
		.PD_layout[data-pd-li="BN"]{
			ul{
				width: 80%;
				gap: 20px;
				@media screen and (max-width:767px){
					width: 92%;
					gap: 4vw;
					
				}
				li{
					filter: drop-shadow(1px 1px 4px #00000060);
					&:nth-child(2){
						transform: translateY(10px);
						@media screen and (max-width:767px){
							transform: translateY(2vw);
						}
					}
				}
			}
		}
	}
}

.Area_gift{
	.box{
		.PD_layout.PD_layout-D1_14{
			ul{
				/* width: 80%; */
				gap: 32px;
				@media screen and (max-width:767px){
					width: 96%;
					gap: 2vw;
				}
				.PD_img{
					border: 2px solid #5e8db7;
				}
				.PD_into{
					position: relative;
					background: unset;
					.PD_logo{
						width: 80%;
						height: 5.5em;
						background: #fff;
						padding: 8px 32px;
						border-radius: 100rem;
						border: 2px solid #5e8db7;
						@media screen and (max-width:767px){
							height: 2.5em;
							width: 90%;
							padding: 1.5vw 6vw;
						}
						img{
							box-shadow: unset;
						}
					}
					h3{
						font-size: 2.5rem;
						max-height: 1.7em;
						font-weight: 1000;
						color: #707070;
						@media screen and (max-width:767px){
							font-size: 4.5vw;
						}
					}
					h4{
						font-size: 2.2rem;
						font-weight: 600;
						color: #707070;
						@media screen and (max-width:767px){
							font-size: 4.2vw;
						}
					}
				}
			}
		}
	}
}

/* 作圖區 */
.PD_layout.PD_layout-CSSBG_01[data-pd-li=PDBN]{
	ul{
		gap: 28px;
		@media screen and (max-width:767px){
			gap: 3.5vw;
		}
		li{
			.PD_img{
				margin: 0 auto;
                width: 85%;
                margin-bottom: 3.5rem;
                padding-top: 5rem;
				@media screen and (max-width:767px){
					width: 85%;
					padding-top: 10vw;
					margin-bottom: 3vw;
				}
			}
			.PD_into{
				width: 80%;
				margin: 0 auto;
				h3{
					color: #450945;
					font-size: 2rem;
					@media screen and (max-width:767px){
						font-size: 3.7vw;
					}
				}
				h4{
					color: #450945;
					font-size: 1.5rem;
					@media screen and (max-width:767px){
						font-size: 4vw;
					}
				}
				p{
					font-size: 2rem;
					color: #cd7d15;
					@media screen and (max-width:767px){
						font-size: 3vw;
					}
					.oPrice{
						font-size: 1.5rem;
						@media screen and (max-width:767px){
							font-size: 2vw;
						}
					}
					.Price{
						color: #cd7d15;
						font-size: 3rem;
						@media screen and (max-width:767px){
							font-size: 5vw;
						}
					}
				}
			}
		}
		li::after {
			content: "";
			display: block;
			width: 100%;
			height: 0;
			padding-bottom: 163%;
			background-image: url(PD_layout-CSSBG_01.png?t=1765959850237);
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center top;
		}
	}

}

.Area_product{
	.box{
		.PD_layout{
			ul{
				@media screen and (max-width:767px){
					width: 96%;
				}
			}
		}
	}
}

.Area_logo{
	@media screen and (max-width:767px){
		width: 80%;
	}
	.PD_layout{
		ul{
			width: 60%;
			gap: 40px;
			@media screen and (max-width:767px){
				width: 90%;
				gap: 4vw;
			}
		}
	}
}

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