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

/*基本*/
body{ margin:0; padding:0;}

/*全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:"Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif; background: #59cfff;}
.WRAPPER img { width:100%;  height:auto;border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
	@media screen and (max-width:767px){
		.WRAPPER {min-width: inherit; min-height:100vh; overflow: hidden; }
		.WRAPPER img {  width:100%;  height:auto;}
	}

/*區塊_all*/
.Area { position: relative; margin: 0 auto; padding: 0; border-radius: 0; text-align: center; }
.Area a { 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);}
.Area1220 { margin: 0 auto; width: 1220px;}
.Area960 { margin: 0 auto; width: 960px;}
@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%;}
  .Area960 { width: 96%;}
  /*區塊_切割*/
  .Area_1bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_1bn a { float: left; margin: 0 0 2% 0; padding: 0; width: 100%; list-style: none;}
  .Area_2bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_2bn a { float: left; margin: 0 1% 2%; padding: 0; width: 48%; list-style: none;}
  .Area_3bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_3bn a { float: left; margin: 0 1% 2% ; padding: 0; width: 31.3%; list-style: none;}
  .Area_1bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_1bn_nopadding a { float: left; margin: 0; padding: 0; width: 100%; list-style: none;}
  .Area_2bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_2bn_nopadding a { float: left; margin: 0; padding: 0; width: 50%; list-style: none;}
  .Area_3bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_3bn_nopadding a { float: left; margin: 0; padding: 0; width: 33.3%; list-style: none;}
}

/*PC背景*/
@media screen and (min-width:768px){
.bg_fix {z-index: -47;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:-48; position:fixed;top:0;left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center bottom; pointer-events:none;}

}

@media screen and (max-width:767px){
.m_bg_fix {z-index: -40;position:absolute;top: 10vw;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}
.m_bg { z-index: -52; position: fixed; top:0; left: 0; width: 100%; height:100%; background-position: center bottom; background-repeat: repeat-y; pointer-events: none; background-size: 100%;}	

}

.deco_01 {
	z-index: 2;
	position: absolute;
	left: 1430px;
	top: -430px;
	pointer-events: none;
	mix-blend-mode: screen;
	width: 758px;
	@media screen and (max-width:767px){
		left: 54vw;
		top: -32vw;
		width: 78%;
	}
	img { 
		transform-origin: 58% 37%;
		/* mix-blend-mode: screen; */
	}
}

/* 版頭樣式 */
.Area_top{
  position: relative;
   height: 48vw;
   z-index: 3;
   @media screen and (min-width: 768px){
	   height: 513px;
   }


  .main-title{
	position: absolute;
	top: 15vw;
	left: 50%;
	transform: translateX(-50%);
	width: 85vw;
	z-index: 5;
	@media screen and (min-width: 768px){
	  width: 828px;
	  top: 171px;
	}
  }
  .main-sub{
	position: absolute;
	top: 34vw;
	left: 50%;
	transform: translateX(-50%);
	width: 62vw;
	z-index: 4;
	@media screen and (min-width: 768px){
		width: 550px;
		top: 355px;
	}
	.sub-bg{
		position: absolute;
		top: -3vw;
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
		width: 107%;
		@media screen and (min-width: 768px){
			top: -25px;
		}
	}
  }
  .main-date{
	position: absolute;
	top: 6vw;
	left: 50%;
	transform: translateX(-50%);
	width: 54vw;
	z-index: 3;
	@media screen and (min-width: 768px){
	  width: 452px;
	  top: 90px;
	}
  }
  .pd-img01{
	position: absolute;
	top: 22vw;
	left: 1vw;
	width: 17vw;
	z-index: 5;
	filter: drop-shadow(1px 1px 2px #00000050);
	@media screen and (min-width: 768px){
	  width: 200px;
	top: 209px;
	left: 83px;
	}
  }
  .pd-img02{
	position: absolute;
	top: 22vw;
	left: 78vw;
	width: 17vw;
	z-index: 5;
	filter: drop-shadow(1px 1px 2px #00000050);
	@media screen and (min-width: 768px){
	  width: 182px;
		top: 203px;
		left: 896px;
	}
  }
}

.Area_hot {
	position: relative;
	z-index: 4;
}

.area-bg{
	width: 100%;
	margin: 0 auto;
	background: url(m_Area_danji_repeat.png?t=1784104325695) repeat-y;
	position: relative;
	z-index: 4;
	margin-bottom: 10vw;
	@media screen and (min-width:768px){
		margin-bottom: 120px;
		width: 100%;
		background: url(Area_danji_repeat.png?t=1784104325695) repeat-y;
		background-position: center;
	}
      &::before{
		content: "";
		background: url(m_Area_danji_top.png?t=1784104325695) no-repeat;
		background-size: cover;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -12.6vw;
		display: block;
		width: 100%;
		height: 13vw;
        z-index: -1;
        @media screen and (min-width:768px){
				width: 2000px;
				background: url(Area_danji_top.png?t=1784104325695) no-repeat;
				height: 126px;
				top: -126px;
			}
		}
      &::after{
		content: "";
		background: url(m_Area_danji_end.png?t=1784104325695) no-repeat;
		background-size: cover;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10vw;
		display: block;
		width: 100%;
		height: 10vw;
        z-index: -1;
			@media screen and (min-width:768px){
				width: 2000px;
				background: url(Area_danji_end.png?t=1784104325695) no-repeat;
				bottom: -179px;
            	height: 179px;
			}
		}
}


.Area_famous{
	.box_title{
		margin-bottom: 12vw;
		@media screen and (min-width:768px){
			margin-bottom: 66px;
		}
	}
	.box{
		position: relative;
		border-radius: 0 1vw 4vw 4vw;
		padding: 2vw;
		background: #ffcf67;
		@media screen and (min-width:768px){
			border-radius: 0 20px 40px 40px;
			padding: 20px;
		}
		&::before{
			content: "";
			background: url(m_Area_famous_top.png?t=1784104325695) no-repeat;
			background-size: cover;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -12.6vw;
			display: block;
			width: 100%;
			height: 13vw;
			z-index: -1;
			@media screen and (min-width:768px){
					width: 961px;
					background: url(Area_famous_top.png?t=1784104325695) no-repeat;
					background-size: contain;
					height:137px;
					top: -79px;
				}
			}
	}
}

/* 文字區標 */
.box_title_text{
  margin-bottom: 1vw;
  @media screen and (min-width: 768px){
	margin-bottom: 40px;
  }
  .PD_layout.PD_layout-D3_01 .PD{
	.PD_img img{
	  width: 100%;
	}
	.PD_into{
	  h3{
		color: #fff;
		top: 46%;
	  }
	}
  }
}

.Area_logo{
	width: 80%;
	@media screen and (min-width: 768px){
		width: 660px;
	}
}


/* 區塊間距 */
.Area_bottom{
	margin-bottom: 6vw;
	@media screen and (min-width: 768px){
		margin-bottom: 60px;
	}
}


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

/* 調整BN間距 */
.PD_layout[data-pd-li="BN"]{
  ul{
	gap: 2vw;
	@media screen and (min-width: 768px){
	  gap: 20px;
	}
  }
}


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