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

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

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

/* 調整公版 */
.PD_layout[data-pd-li=BN] ul{
	padding: 0;
}

/*PC背景*/
.Area_bgtop {position: absolute;}
.Area_bgtop_1 {
	width: 100%;
	min-width: 1220px;
	height: 1120px;
	background: url(pc_top.png?t=1755608753572) no-repeat center top;
    background-size: cover;
	z-index: 0;
}
.Area_bgtop_2 {
	position: fixed;
	bottom: 0;
	width: 100%;
	min-width: 1220px;
	height: 1120px;
	left: 50%;
	transform: translateX(-50%);
	background: url(pc_top02.png?t=1755608753572) no-repeat center top;
	z-index: -1;
}


@media screen and (min-width: 768px) {

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

/* 定位設定:插入class */
.absolute {
	position: absolute;
  }
  .fixed {
	position: fixed;
  }
  .relative {
	position: relative;
  }

/*MB背景*/
.mbg01{ 
	z-index:0; 
	position:absolute;
	top:0; 
	width:100%; 
	height:141vw;  
	background: url(mbg_01.png?t=1755608753572) 100% / 100% no-repeat scroll;
	z-index: 0;
}	

.mbg02{ 
	z-index:0; 
	position:fixed;
	bottom: 0;
	width:100%; 
	height:100vh;  
	background: url(mbg_02.png?t=1755608753572) 100% / 100% no-repeat;
	z-index: -1;
}	

/* 動畫 */
.stageShakeL {
	animation-name: stageShakeL;
	opacity: 1;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes stageShakeL {
	0% {
		transform: rotate(40deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
.stageShakeR {
	animation-name: stageShakeR;
	opacity: 1;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes stageShakeR {
	0% {
		transform: rotate(-40deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.skyShakeL {
	animation-name: skyShakeL;
	opacity: 1;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes skyShakeL {
	0% {
		transform: rotate(40deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
.skyShakeR {
	animation-name: skyShakeR;
	opacity: 1;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes skyShakeR {
	0% {
		transform: rotate(-40deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

/* 舞台燈 */
.Area-topLight{
	width: 100%;
	height: 925px;
	position: absolute;
}
.stageLight-L .stageShakeL {
	position: absolute;
	transform-origin: 0% 100%;
	mix-blend-mode: plus-lighter;
}
.stageLight-R .stageShakeR {
	position: absolute;
	transform-origin: 100% 100%;
	mix-blend-mode: plus-lighter;
}
.stageLight-L .skyShakeL {
	position: absolute;
	transform-origin: 0 0;
	mix-blend-mode: plus-lighter;
}
.stageLight-R .skyShakeR {
	position: absolute;
	transform-origin: 100% 0;
	mix-blend-mode: plus-lighter;
}
@media screen and (min-width: 767px) {
	/* 舞台燈 */
	.stageLight-L .stageShakeL,
	.stageLight-R .stageShakeR {
		top: 42.5%;
	}
	.stageLight-L .skyShakeL,
	.stageLight-R .skyShakeR {
		top: -5%;
	}
	.stageLight-L .skyShakeL {
		width: 580px;
		right: 61%;
		z-index: 1;
	}
	.stageLight-L .stageShakeL {
		width: 550px;
		right: 47%;
		animation-direction: alternate-reverse;
		z-index: 2;
	}
	.stageLight-R .skyShakeR {
		width: 580px;
		left: 61%;
		z-index: 2;
	}
	.stageLight-R .stageShakeR {
		width: 550px;
		left: 47%;
		animation-direction: alternate-reverse;
		z-index: 1;
	}
	.pd-deco {width: 932px;position:absolute; top: 100px;left: 50%;transform: translateX(-50%);mix-blend-mode: luminosity;z-index: 1;}
}
@media screen and (max-width: 767px) {
	/* 舞台燈 */
	.stageLight-L .stageShakeL,
	.stageLight-R .stageShakeR {
		top: 60vw;
		width: 76vw;
	}
	.stageLight-L .skyShakeL,
	.stageLight-R .skyShakeR {
		top: -2%;
		width: 76vw;
	}
	.stageLight-L .skyShakeL {
		left: -20vw;
		z-index: 1;
	}
	.stageLight-L .stageShakeL {
		left: -8vw;
		animation-delay: 0.5s;
		z-index: 2;
	}
	.stageLight-R .skyShakeR {
		left: 40vw;
		z-index: 2;
	}
	.stageLight-R .stageShakeR {
		left: 28vw;
		animation-delay: 0.5s;
		z-index: 1;
	}
	.pd-deco {width: 80vw;position:absolute; top:29vw;left: 50%;transform: translateX(-50%);mix-blend-mode: luminosity;}
}



/*版頭*/
.Area-top {height:950px;}
.Area-top .momologo { z-index:2; position: absolute;top:15px; left:0px;}
@media screen and (max-width:767px){
	.Area-top {height:104vw; margin-bottom: 11vw;}
	.Area-top .momologo {top: 2vw;
        left: 1vw;
        width: 16vw;}
	a:hover{background-size: 45%}
	/*提醒我按鈕*/
	a.mo_remind_btn { z-index:10; position: absolute; right: 0; top:103vw; width: 17%;}	  
}

.deco {
	mix-blend-mode: screen;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
  }

.Area-top .logo{
	left: 50%;
	transform: translateX(-50%);
    top: 50px;
	filter: drop-shadow(0px 10px 5px #001143);
}

.Area-top .main{
	left: 50%;
	transform: translateX(-50%);
	filter: drop-shadow(0px 10px 5px #001143);
}

.Area-top .top-subtitle{
	left: 50%;
	transform: translateX(-50%);
	.subtitle-bg{
		bottom: 8px;
		@media screen and (max-width: 767px) {
			bottom: 0;
		}
	}
}

.Area-top {
	min-height: 850px;
  }
  .Area-top .title-light {
	mix-blend-mode: screen;
	left: 50%;
	transform: translateX(-50%);
  }
  .Area-top .title_sub {
	z-index: 2;
  }
  .Area-top .title_sub .sub_bg {
	z-index: 1;
  }
  .Area-top .date {
	opacity: 0;
	transform: scale(0);
	z-index: 5;
  }
  .Area-top .date ul {
	padding: 0;
  }

  @media screen and (min-width: 768px) {
	.deco img {
		width: 900px;
		top: 32px;
		left: 51%;
		transform: translateX(-50%);
		z-index: 5;
	  }
	.Area-top .main {
	  width: 73%;
	  top: 133px;
	}
	.Area-top .top-subtitle{
		top: 312px;
	}
	.Area-top .title-light {
        top: -37px;
        left: 39.2%;
		width: 56%;
	}
	.Area-top .title_sub {
	  top: 190px;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 100%;
	}
	.Area-top .title_sub .sub_bg {
	  top: 20px;
	  width: 41%;
	  left: 50%;
	  transform: translateX(-50%);
	  z-index: 0;
	}
	.Area-top .title_sub img {
	  width: 40%;
	}
	.Area-top .date {
	  top: 360px;
	  right: 140px;
	  filter: drop-shadow(0px 10px 5px #001143);
	  /* width: 16%; */
	}
  

	.Area-top .stage {
	  top: 670px;
	  left: 50%;
	  width: 60%;
	  transform: translateX(-50%);
	}
	.Area-top .coming {
        top: 44px;
        width: 30%;
        right: 135px;
	}
  }
  
  @media screen and (max-width: 767px) {
	.deco img {
		top: 15vw;
		left: 50%;
		transform: translateX(-50%);
		width: 105vw;
	  }
	.Area-top {
	  min-height: 100vw;
	  z-index: 0;
	}
	/*提醒我按鈕*/
	a.mo_remind_btn {
	  z-index: 10;
	  right: 0;
	  top: 81vw;
	  width: 17%;
	}
	.Area-top .main {
	  top: 17vw;
	  width: 92vw;
	  filter: drop-shadow(0px 1vw 1vw #001143);
	}
	.Area-top .logo{
		top: 7vw;
		width: 36vw;
		filter: drop-shadow(0px 1vw 1vw #001143);
	}
	.Area-top .title-light {
	  top: 0.4vw;
	  left: -3.8vw;
	  width: 77vw;
	}
	.Area-top .title_sub {
	  top: 31vw;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 100%;
	}
	.Area-top .title_sub .sub_bg {
	  top: 2.5vw;
	  width: 59vw;
	  left: 50%;
	  transform: translateX(-50%);
	  z-index: 0;
	}
	.Area-top .title_sub img {
	  width: 62vw;
	}
	.Area-top .date {
	  top: 49vw;
	  right: 5vw;
	  width: 20vw;
	  filter: drop-shadow(0px 1vw 1vw #001143);
	}
	.Area-top .stage {
	  top: 96vw;
	  left: 50%;
	  width: 86vw;
	  transform: translateX(-50%);
	}
	.Area-top .coming {
        top: 7.7vw;
        width: 23vw;
        right: 5vw;
	}
  }

/*副標*/
.top-subtitle{
	width:50%;
}

@media screen and (max-width:767px){
	.top-subtitle { position: relative; top:36vw; width: 70vw;}
	.top-subtitle .box_2 .subtitle_swiper { left:50%; transform: translateX(-50%); }
	/* .top-subtitle .box_2 .subtitle_swiper li img { width: 52vw;} */
	.top-subtitle .sub-bg{
		top: 3vw;
		width: 50vw;
	}
}


/*版頭輪播*/
.main-pd {
	display:block;
	position: absolute;
	width: 45%;
	top: 440px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;

	.Area_swiper{
		li{
			background: none;
		}
	}
	
	.pd-swiper{
		filter: drop-shadow(0px 5px 5px #2d1e4965);
	}
}

@media screen and (max-width:767px){
	.main-pd {
		width: 55vw;
		top: 48vw;
		left: 50%;
		transform: translateX(-50%);
		z-index: unset;
		.pd-logo{
			top: -36vw;
			left: 0vw;
			width: 60vw;
		}
		.pd-swiper{
			width: 92vw;
			filter: drop-shadow(0px 5px 5px #2d1e4965);
		}
	}  
}


.countdown{
	position: absolute;
	bottom: -30px;
	right: 270px;
	@media screen and (max-width:767px){
		bottom: 7vw;
		right: unset;
		left: 50%;
		transform: translateX(-50%);
	}
}

.main-pd .swiper-container{
	overflow: unset;
}


 /** 倒數 **/
.TimerNick {width: fit-content;z-index:0; display: flex;gap: 8px;    align-items: center;
    justify-content: center;}
.TimerNick .FontStyle:first-child span {font-size:24px;}
.TimerNick .FontStyle {display:block;width:100%;font: bold 35px/38px Century Gothic;color: #212121;letter-spacing:-1px;background:transparent;margin: 0 1%;white-space:nowrap;}
.TimerNick span { padding-left:2px; font: bold 16px/38px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #212121;}
@media screen and (max-width:767px){
	.TimerNick {z-index:2;position: absolute;margin:0;width:100%;text-align:right;font-size:3vw;justify-content: center; filter: drop-shadow(0 .5vw .5vw #000000b4);}
	.TimerNick .FontStyle:first-child span {font-size:3.3vw;}
	.TimerNick .FontStyle {display:inline-block;margin: 0px 0 0 0.4vw;padding:0;border:0px;/*text-shadow:1px 1px 0px #fff;*/letter-spacing:-1px;text-align:right;background:transparent;width: auto;color: #fff;}
	.TimerNick span { padding-left:1vw; font: bold 4vw/11vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #fff;}
}

.shine-gif{
	width: 100%;
	position: absolute;
	top: 20px;
	left: 50px;
	-webkit-animation: shine-gif 3s linear infinite;
}
@media screen and (max-width:767px){
	.shine-gif{
		position: absolute;
		top: -9vw;
		left: 0;
		transform: translateX(-50%);
		-webkit-animation: shine-gif 3s linear infinite;
	}
}

@keyframes shine-gif {
	0%{
		transform: translateY(10px);
		opacity: 0;
	}
	50%{
		transform: translateY(20px);
		opacity: 1;
	}
	100%{
		transform: translateY(30px);
		opacity: 0;
	}
}

.shine-rotate{
	display: block;
	animation: shine-rotate 2s linear infinite;
	-webkit-animation: shine-rotate 5s linear infinite;
	animation-delay: 0s;
}

@keyframes shine-rotate {
	0%{
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
	}
	20%{
		transform: rotateY(10deg);
		-webkit-transform: rotateY(10deg);
	}
	40%{
		transform: rotateX(30deg);
		-webkit-transform: rotateX(30deg);
	}
	80%{
		transform: rotateY(-20deg);
		-webkit-transform: rotateY(-20deg);
	}
	100%{
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
	}
}

@-webkit-keyframes shine-rotate {
	0%{
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
	}
	20%{
		transform: rotateY(10deg);
		-webkit-transform: rotateY(10deg);
	}
	40%{
		transform: rotateX(30deg);
		-webkit-transform: rotateX(30deg);
	}
	80%{
		transform: rotateY(-20deg);
		-webkit-transform: rotateY(-20deg);
	}
	100%{
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
	}
}



/*Area-strategy 攻略*/
@media screen and (min-width:768px){
	.Area-strategy{position: relative;z-index: 5;}	 
	.Area-strategy .Area_BN{    margin-top: 20px;}	 
	.Area-strategy .strategy{ margin: 0 auto 20px;}	
}

@media screen and (max-width:767px){
	.Area-strategy{z-index: 3;}	
	.Area_danji{width: 96%;}
	.Area-strategy .strategy{width: 96%; margin: 0 auto;}	
	.Area-strategy .coupon{width: 96%; margin: 0 auto;}	
	.Area-strategy .Area_BN{    margin-top: 2vw;}	 			  
}

.Area-strategy .box02 { position:relative; margin:0 auto; box-sizing: border-box; justify-content: center; display: flex;margin-top: 20px;}
@media screen and (max-width:767px){ 
	.Area-strategy .box02 { position: relative;  width: 96%; gap:2vw; justify-content: flex-start; margin: 2vw auto 0; padding: 0;}
}


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

@media screen and (max-width:767px){
	.Area-danji .PD_layout,.Area-product .PD_layout{
		width: 96%;
	}

}

.title { margin: 0 auto; margin-bottom:28px; }
.js-Area_coupon {margin-top: 40px; }
.js-Area_coupon ul {padding: 0; margin: 0; }
.js-Area_coupon ul li{  text-decoration: none; list-style: none; }
@media screen and (max-width:767px){
	.title { margin: 0 auto; padding-bottom:4vw;   }
	.js-Area_coupon {margin-top: 4vw; width: 96%;}	 
}


.bg  { z-index:0; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:100%; pointer-events: none; }
@media screen and (max-width:767px){
	.bg  {  min-width:100%; }  
}

/*錨點*/
.Area-tag{
	padding: 60px 40px;
    box-sizing: border-box;
	.title{
		img{
			width: 100%;
		}
	}
}
.tag-main .box_all .box02 { 
	position:relative; 
	margin:0 auto; 
	box-sizing: border-box; 
	justify-content: center;     
	display: flex;
	gap: 20px;
}
@media screen and (max-width:767px){ 
	.Area-tag{
		padding: 4.5vw 3vw;
	}
	.tag-main .box_all .box02 { position: relative;  width: 96%; gap:2vw; justify-content: flex-start; margin: 0; padding: 0;margin: 0 auto;}
}





/*Area-main 主打品*/
@media screen and (min-width:768px){
	.Area-main {position: relative;  z-index: 1;}
}
@media screen and (max-width:767px){
	.Area-main {z-index:2;}
}

/*Area-minor 副打品*/
.Area-minor{padding-bottom: 20px;border-radius: 0 0 20px 20px;padding-top: 60px;}

@media screen and (max-width:767px){
	.Area-minor{padding-bottom: 20px;border-radius: 0 0 20px 20px;padding-top: 5vw;}
	.Area-minor .PD_layout ul {width: 96%;}	
}

.Area-home{
	.PD_layout{
		width: 70%;
	}
}


/* 區塊邊界 */
.Areabottom{
	margin-bottom: 60px;
	@media screen and (max-width:767px){
		margin-bottom: 4vw;
	}
}

/* 有背景的邊界 */
.AreaBg.Areabottom{
	margin:120px auto calc(120px + 60px);
	@media screen and (max-width:767px){
		margin: 8vw auto;
	}
}

/* mo卡回饋彈窗調整 */
#agree_more3 .agreeArea .txtArea .PD_wrapper{
	width: 80%;
	margin: 0 auto;
	padding: 40px 0 ;
}
@media screen and (max-width:767px){
	#agree_more3 .agreeArea .txtArea .PD_wrapper{
		width: 90%;
		margin: 0 auto;
		padding: 5vw 0 ;
	}
}

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

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