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

/*基本*/
body{ margin:0; padding:0; background: linear-gradient(90deg,#000000 0%, #000 20%, #000 80%,#000 100%);  }

/*全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; -webkit-tap-highlight-color: transparent}

/*區塊_all*/
.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);}
.Area1220 { margin:0 auto; width:1220px;}
.Area1300 { margin:0 auto; width:1300px;}
.Area960 { margin:0 auto; width:960px;}
	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area1300 { width: 100%}
		.Area960 { width:100%;}
		/*區塊_切割*/
		.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 0% 0%; padding:0; width:50%; list-style: none;}
		.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 0% 0% ; padding:0; width:33.33%; list-style: none;}
		.Area_4bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_4bn a { float:left; margin:0 0% 0% ; padding:0; width:25%; 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;}
		.Area_4bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_4bn_nopadding a { float:left; margin:0; padding:0; width:25%; list-style: none;}
	}

/*預設清單樣式*/
.Area .list_00 ul {display:inline-block; margin:0; padding:0;}
.Area .list_00 li {list-style:none;float:left;overflow: hidden;}
	@media screen and (max-width:767px){
		.WRAPPER { padding-bottom:0px; min-width: inherit; min-height:100vh; overflow: hidden;   }
		.WRAPPER img {  width:100%;  height:auto;}
	}

.Area_bottom{ margin-bottom: 80px!important; }
@media screen and (max-width:767px){
  .Area_bottom{ margin-bottom: 5vw!important; }
  .PD_layout{ width: 96%; }
}

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


/*PC背景*/
.Area_bgtop {position: absolute;}
.Area_bgtop_1 {width: 100%;
	min-width: 1220px;
	height: 1031px;
	background: url(pc_top.jpg?t=1781143830405) no-repeat center top;
   /* background-size: cover;*/
	position: absolute;
	top: -116px;
	left: 50%;
	transform: translateX(-50%);
	/* transform: scale(1.2); */
	will-change: transform;
	z-index: -2;
}
.Area_bgtop_2 {width: 100%;
	min-width: 1220px;
	height: 1090px;
	background: url(pc_top2.png?t=1781143830405) no-repeat center top;
   /* background-size: cover;*/
	position: absolute;
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	/* transform: scale(1.2); */
	will-change: transform;
	z-index: -2;
}


@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=1781143830405) repeat-y center top;
		/*mix-blend-mode: color-dodge;*/
	}
	
}

	@media screen and (max-width:767px) {
		.deco_bg {
			position: absolute;
			z-index: -1;
			top: 150vw;
			width: 100%;
			height: 100%;
			background: url(m_deco_bg.png?t=1781143830405) repeat-y center top;
			/*mix-blend-mode: color-dodge;*/
		}	
}

/*MB背景*/
.mbg01{ z-index:-1; position:absolute;top:-5vw; width:100%; height:141vw;  background: url(mbg_01.jpg?t=1781143830405)center 100% / 100% no-repeat scroll;}	
.mbg02{ z-index:0; position:absolute;top:12vw; width:100%; height:141vw;  background: url(mbg_02.png?t=1781143830405)center 100% / 100% no-repeat scroll;}	
/*版頭*/
.Area-top {height:909px;}
.Area-top .momologo { z-index:; position: absolute;top:12px; left:0px;}
@media screen and (max-width:767px){
	.Area-top {height:117vw; margin-bottom: 11vw;}
	.Area-top .momologo {top: 2vw;
        left: 2vw;
        width: 20vw;}
	a:hover{background-size: 45%}
	/*提醒我按鈕*/
	a.mo_remind_btn { z-index:10; position: absolute; right: 0; top:103vw; width: 17%;}	  
}



/*副標*/
.top-subtitle{
	width: 70%;
    margin: -1% auto 0;
	background: url(subtitle-bg.png?t=1781143830405) no-repeat center center;
	background-size:90% ;
	
	.PD_layout{
		width: 90%;
		overflow: hidden;
		ul.PD_wrapper{
			grid-gap: unset;
			padding: 0;
		}
	}
}

@media screen and (max-width:767px){
	.top-subtitle { position: relative; top:0; left:0%;width: 100%;
        margin: 0 auto ; background-size: contain;}
	.top-subtitle .box_2 .subtitle_swiper { left:55%; transform: translateX(-50%); }
	.top-subtitle .box_2 .subtitle_swiper li .PD_img { list-style: none; width:90%;}
	.top-subtitle .sub-bg{
		top: 3vw;left:2vw;
		width: 100%;margin: 0 auto ;
	}
}

.top-title {
	position: relative;
	z-index: 3;
	filter: drop-shadow(5px 5px 5px #111a4f);}
	.main{
		position: relative;
		margin: 0 auto;
	}
	.title-light {
		mix-blend-mode: screen;
		position: absolute;
	}

	.logo{
		position: relative;
		margin: 0 auto;
	}



.main{
	opacity: 0;
	transform: translateY(-50px);
	animation: titleDropIn 0.5s cubic-bezier(.22,.61,.36,1) forwards;
  }
  
  @keyframes titleDropIn{
	0%{
	  opacity: 0;
	  transform: translateY(-50px);
	}
	60%{
	  opacity: 1;
	}
	100%{
	  opacity: 1;
	  transform: translateY(0);
	}
  }

@media screen and (max-width:767px){
	.top-title .logo {height: 4vw;}
}

.coming{
	width: auto;
	position: absolute;
	filter: drop-shadow(2px 2px 5px #570b0b8e)
}

.date{
	position: absolute;
	left:69%;
	top: 45%;
	filter: drop-shadow(2px 2px 5px #570b0b8e)
}

.star{
	position: absolute;
	filter: drop-shadow(5px 5px 5px #570b0b8e)
}
.countdown,.ad-text{
	width: auto;
	position: absolute;
	left: 0;
	filter: drop-shadow(2px 2px 5px #570b0b8e)
}

/*top*/
@media screen and (min-width:768px){
	.top-main {
		top:0px;
	}
	.main{
		width:80%;
	}
	.main img{
		width: 100%;
	}
	.t
	.title-light {
		top: -25%;
	}
	.logo{
		width: 100%;
		bottom: -2%;
		margin-top: 2%;
		padding: 1% 0 0%;
	}

	.logo img{
		width: 70%;
	}
	.coming {
		left: 0;
		bottom: 7%;
	}	
	.countdown{
		left: 28.5%;
		bottom: 0px; 
	}
	.ad-text{
		top: 804px;
	}
	.star{
		right: 0;
		bottom: -73px;
	}
}

@media screen and (max-width:767px){
	.top-main {
		height: 100%;
	}
	.main{
		width: 100vw;
		.title-light {
			top: -4vw;
			left: 0vw;
			width: 100vw;
		}
	}	

	.logo{
        width: 96vw;
        padding: 0% 0 0%;
	} 
	.coming {        
		right: unset;
		top: unset;
		bottom: 0vw;
		left: 4vw;
		width: 33vw;
	}		  
	.ad-text{
		top: 112vw;
		width: 66vw;
	}
	.countdown{
        left: 15.5vw;
        bottom: 5vw;
	}     
	.star{
		width: 52vw;
		right: 0;
		bottom: -13.5vw;
	}
	.date{
		width: 20vw;
		top: 59vw;
		left:70vw ;
	}
}

/*版頭輪播*/
.main-pd {
	display:block;
	position: absolute;
    top: 358px;
    right: 0px;
	z-index: 3;
	margin: 0 auto;
    width: 150%;
	height: 650px;
	overflow: hidden;
	ul.PD_wrapper{
		grid-gap: 0;
	}
	.PD_into{display: none;}
	/*.PD_into{
		position: absolute;
		right: 0px;
		top: 70px;
		width: 45%;
		height: 230px;
		background: linear-gradient(90deg,#0a144a 30%,#05081800 70%);



		justify-content: center;
		h3{
			position: relative;
			top: unset;
			order: 2;
			font-size: 30px;
			font-weight: 500;
			line-height: 1.5em;
			color: #fff;
		}
		h4{
			position: relative;
			top: unset;
			order: 1;
			font-weight: 800;
			font-size: 32px;
			margin: 0;
		}
		p{
			position: relative;
			top: unset;
			order: 3;
			line-height: 1.5em;
			b, .Price, .money, small{
				color: #ffd2a2;
				background: unset;
				-webkit-text-fill-color: unset;
			}
		}
	}*/
	.PD_img{
		/* bottom: -20%; */
		width: 570px;
		position: absolute;
		right: 215px;
		z-index: 2;
		filter: drop-shadow(5px 5px 10px #001247)
	}

}

@media screen and (max-width:767px){
	.main-pd {
        width:180vw;
        height:60vw;
        top:56vw;
        left:9vw;
		transform: translateX(-50%);
		z-index: unset;
		.PD_layout[data-pd-col-phone="4"]{
			.PD_into{display:none ;
			/*.PD_into{
				width: 160vw;
				height: 25vw;
				left: 117vw;
				top: 12.5vw;
				background: linear-gradient(90deg,#222b7d 20%,#05081800 50%);
				h3 {
					line-height: 6vw;
					min-height: 6vw;
					span{
						font-size: 4.2vw;
					}


					
				}
				h4 span{
					font-size: 4vw;
				}
				.oPrice{
					line-height: 1.5em;
					font-size: 3vw;
				}
				span.Price{
					font-size: 6vw;
				}*/
			}
			.PD_img{
				left: 88vw;
				top: -5vw;
				width: 75vw;
				filter: drop-shadow(.5vw .5vw .8vw #440b0b69)
			}
		}

	}  

	
}

.main-title {
	display: inline-block;
	animation: titleSparkle 2.2s ease-in-out infinite;
  }
  
  .main-title img {
	display: block;
	width: 100%;
  }
  
  @keyframes titleSparkle {
	0% {
	  opacity: 1;
	  filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));
	}
	20% {
	  opacity: 1;
	  filter: brightness(1.35) drop-shadow(0 0 10px rgba(85, 96, 255, 0.75));
	}
	28% {
	  opacity: 1;
	  filter: brightness(1.1) drop-shadow(0 0 4px rgba(48, 62, 187, 0.35));
	}
	100% {
	  opacity: 1;
	  filter: brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0));
	}
  }

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

.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);
	}
}


.title { margin: 0 auto; margin-bottom:28px;   }


/*區標(線上入稿)*/

.box_txt{ position: relative; margin: 0 auto; width: 100%;}
.box_txt .PD_layout .PD_into{display:none ;}
.box_txt .PD_layout .PD_img{display:block !important ;width: 80%;margin:0 auto ;}
/*.box_txt::before {content:"";position: absolute;display:block;top:-10%;left: 0;width: 100%;height: 100%;pointer-events:none;background: url("m_box_txt_bg.png?t=1781143830405") center top/100% no-repeat scroll;}*/
.box_txt .PD_layout .PD h3 {color:#1e69bd;font-size: 3.5em;line-height: 1.9em;font-style: italic;font-weight: 700;font-family:"Century Gothic","Noto Sans TC";}





.box_txt .box_title_deco1{ position: absolute; left: 16.6%; top:8%; width: 10%; height: auto; animation: disk 3s infinite; } 


.box_txt .PD_layout{  width: 100%; }
.box_txt li:hover{ transform: none!important; }
.box_txt a{ pointer-events: none;}
.box_txt h3 span{ overflow: visible!important;}

/*漸層文字*/
.gradient-text {
	
	background: linear-gradient(180deg, #FFF,#FFF, #8f8fff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 2px 6px rgba(0,0,0,0.15);
  
  }
  

@media screen and (max-width:767px){
  .box_txt {margin: 0 auto 2vw  -14vw; width: 130%;}
  .box_txt::before{ top:0; }
  .box_txt .PD_layout .PD h3 {font-size: 1.8em;line-height: 2.2em;}
  .box_txt .PD_layout .PD h4 {font-size: 1.8em;line-height: 2.2em;}

}

/*區標(小小標)*/
.title-line {
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0.1em;
	width:300px ;
	margin:0 auto ;
  }
  
  .title-line::before,
  .title-line::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #fff;
	opacity: 0.7; /* 視覺可調 */
  }
  
  .title-line::before {
	margin-right: 16px;
  }
  
  .title-line::after {
	margin-left: 16px;
  }
  .title-line .PD_layout .PD h3 {
    padding: 0;
    max-height: 1.9em;
	font-size: 36px;
    font-weight: 700;
    line-height: 1.9em;
    color: #FFF;
}

@media screen and (max-width:767px){
	.title-line {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  letter-spacing: 0.1em;
	  width: 50%;
	  max-width: 35vw;
	  margin: 0 auto;
	}
  
	.title-line::before,
	.title-line::after {
	  content: '';
	  flex: 1;
	  min-width: 30px;
	  height: 1.5px;
	  background: #fff;
	  opacity: 0.7;
	}
  
	.title-line::before {
	  margin-right: 1vw;
	}
  
	.title-line::after {
	  margin-left: 1vw;
	}
  
	.title-line .PD_layout .PD h3 {
	  padding: 0;
	  max-height: 1.3em;
	  font-size: 1.3em;
	  font-weight: 700;
	  line-height: 1.3em;
	  color: #FFF;
	  white-space: nowrap; /* 防止斷行把線擠掉 */
	}
  }

@keyframes disk{
	0%{  transform:rotateY(180deg); }
	30%{  transform:rotateZ(0); }
	100%{  transform:rotateZ(0); }
	
}


.Area-top::after{
	content: "";
	display: block;
	/*background: url(danji-border-pc.png?t=1781143830405) no-repeat center center;*/
	height: 230px;
	width: 100vw;
    bottom: -180px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	@media screen and (max-width:767px){
		height: 15vw;
		bottom: -22vw;
		background-size: cover;
		#agree_more3 .agreeArea .txtArea .PD_wrapper{
			width: 90%;
			margin: 0 auto;
			padding: 5vw 0 ;
		}
	}
  }

  .Area-danji::before{
	content: "";
	display: block;
	background: url(danji-bg.png?t=1781143830405) #21080b no-repeat center center;
	background-size: cover;
	filter: brightness(0.4);
	height: 100%;
	width: 100vw;
	top: 0;
	left: 50%;
	transform-origin: center;
	transform: translateX(-50%) rotateZ(180deg);
	position: absolute;
	z-index: -1;
	@media screen and (max-width:767px){
		top: 7vw;
		background-size: cover;
	}
  }

  .Area-danji::after{
	content: "";
	display: block;
	background: url(danji-border-pc.png?t=1781143830405) no-repeat center center;
	height: 130px;
	width: 100vw;
    bottom: -50px;
	left: 50%;
	transform-origin: center;
	transform: translateX(-50%) rotateZ(180deg);
	position: absolute;
	@media screen and (max-width:767px){
		height: 15vw;
		background-size: cover;
	}
  }

  .Area-danji{
	padding: 170px 0 190px;
	@media screen and (max-width:767px){
		padding: 20vw 0 10vw;
	}
	.PD_layout{
		@media screen and (max-width:767px){
			margin-top: 4vw;
		}
		
		ul{
			padding: 0;
		}
	}
  }

  @media screen and (min-width:768px){
	.Area_danji .danji_box ul li .content{
		right: 65%;
		top: 181px;
	  }
  }

  @media screen and (max-width:767px){
	.Area_danji .danji_box ul li .content{
		left: 27vw;
	  }
}




/*優惠活動*/	
.Area_strategy .PD_layout {
	width: 960px;
	margin: 0 auto;
	box-sizing: border-box;
  }
  
  .Area_strategy .PD_layout .PD_wrapper {
	width:100% ;
	display: grid;
	/*grid-template-columns: repeat(4, 1fr);  /* 每排 4 欄 */
	gap: 10px;
	padding: 0;
	margin: 0 auto;
	list-style: none;
  }
  
  /* 防止外部樣式影響li寬度（像 slider 可能寫死 width） */
  .Area_strategy .PD_layout .PD_wrapper > .PD_slide {
	width: auto !important;
  }
  
  .Area_strategy .PD_layout .PD_wrapper > .PD_slide .PD_img img {
	width: 100%;
	height: auto;
	display: block;
  }
  
  @media (max-width: 767px) {
	.Area_strategy { width: 100%; }
	.Area_strategy .PD_layout { width: 108%; }
  }
 


/*輪播BN*/

.Area_BN  {margin: 0 auto;width:1100px ;min-height:220px ;display:block  !important;z-index: 9999 !important;}
  
@media screen and (max-width: 767px) {
  .Area_BN  {margin: 0 auto;width:100%;padding: 0vw 0 0 0;min-height:20vw ;}

}

  /*品類特搜*/	
  .Area_category .PD_layout {
	width: 960px;
	margin: 0 auto;
	box-sizing: border-box;
  }
  
  .Area_category .PD_layout .PD_wrapper {
	width:90% ;
	display: grid;
	/*grid-template-columns: repeat(4, 1fr);  /* 每排 4 欄 */
	gap: 5px;
	padding: 0;
	margin: 0 auto;
	list-style: none;
  }
  
  /* 防止外部樣式影響li寬度（像 slider 可能寫死 width） */
  .Area_category .PD_layout .PD_wrapper > .PD_slide {
	width: auto !important;
  }
  
  .Area_category .PD_layout .PD_wrapper > .PD_slide .PD_img img {
	width: 100%;
	height: auto;
	display: block;
  }
  
  @media (max-width: 767px) {
	.Area_category { width: 100%; }
	.Area_category .PD_layout { width: 96%; }
  }
  


/*閃光*/				  
.brightness-play { -webkit-animation:brightness-play 3s infinite ;
	animation:brightness-play 3s infinite ;}
@-webkit-keyframes brightness-play {
0% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
92% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
94% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(120%); 
filter:brightness(200%);
}
96% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
98% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(120%); 
filter:brightness(120%);
}
100% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/1500/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
}
@keyframes brightness-play {
0% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
92% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
94% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(120%); 
filter:brightness(120%);
}
96% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
98% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(120%); 
filter:brightness(120%);
}
100% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
}


/* Area-brand 主打品 */
.Area-brand{
	padding-top: 0px;
	.box{
		position: relative;
		margin-bottom: 60px;
		filter: drop-shadow(0px 5px 10px #333);
		@media screen and (max-width:767px){
			margin-bottom: 4vw;
			padding: 0 0vw;
		}
		.PD_layout{
			position: absolute;
            top: 450px;
            left: 50%;
            transform: translateX(-50%);
            width: 95%;
			@media screen and (max-width:767px){
				top: 42vw;
			}
		}
		.box_youtube{
			height: auto;
			position: absolute;
			bottom: 440px;
			left: 50%;
			transform: translateX(-50%);
			@media screen and (max-width:767px){
				bottom: 46vw;
			}
			iframe{
				@media screen and (max-width:767px){
					aspect-ratio: 16/9;
					width: 88vw;
					height: 48vw;
				}
			}

		}
	}
}

/* Area-main 年度爆品 */
/*.AreaBg{
	background: url(main-bg.png?t=1781143830406) no-repeat center center;
	background-size: cover;
	padding: 160px 0 200px;
	@media screen and (max-width:767px){
		background: url(main-bg-m.png?t=1781143830406) no-repeat center center;
		background-size: cover;
		padding: 12vw 0 16vw;
	}
}*/
.Area-main{
	margin:0 auto ;
	.PD_layout.PD_layout-D1_02{
		background: none;
		padding: 0;
		ul{
			background: none;
			gap: 20px;
			padding: 0;
			@media screen and (max-width:767px){
				padding: 0 2vw;
				gap: 2vw;
			}
			li{
				border: none;
				background: linear-gradient(#2b3181 40%, #dedede 60%, #ededed 80%,#b5b5b5 100%);
				border-radius: 4px;
				@media screen and (max-width:767px){
					border-radius: .5vw;
				}
				.PD:hover{
					h4{
						color: unset;
					}

				}
				.PD_img{
					padding: .5em;
					@media screen and (max-width:767px){
						padding: 1vw;
					}
				}
				.PD_into{
					h3{
						color: #3833bf;
						background: none;
						line-height: 1.2;
					}
				}
			}
			li:hover{
				filter: brightness(1.2);
				transition: 1s;
			}
		}
	}
}


/*線上作圖*/
.Area-mainPD {height: auto; z-index:30; }
.Area-mainPD .box_all {  padding: 0 ; /*background: url("Area_PDbottom.png?t=1781143830406") center bottom/ 100% no-repeat scroll;*/}



/* 外層延伸背景 */
.Area-mainPD .box_all{
	width: 100%;
	position: relative;
  
	background:
	  url("Area-mainPD_bg_top.png?t=1781143830406") no-repeat center -39px,
	  url("Area-mainPD_bg_bottom.png?t=1781143830406") no-repeat center calc(100% - -48px), /* 往上 20px */
	  #ffeab2; /* ✅ 放這裡才會滿版 */
  
	background-size:
	  100% auto,
	  100% auto,
	  auto;

  padding-top: 0px;   /* ↓ 往上拉（原本太下面） */
  padding-bottom: 0px;
  box-sizing: border-box;

  }
  
  /* 中間內容 */
  .Area-mainPD .box_all .bg_con{
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
  
	/* ❌ 這裡不要再放背景色 */
	background: transparent;
  }
  
  
@media screen and (max-width:767px){
.Area-mainPD {width: 100%; height:auto; padding: 0;background:none; }
.Area-mainPD .PD_layout .PD_slide:hover { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }


/* 外層延伸背景 */
.Area-mainPD .box_all{
	width: 100%;
	position: relative;
  
	background:
	  url("Area-mainPD_bg_top.png?t=1781143830406") no-repeat center -4vw,
	  url("Area-mainPD_bg_bottom.png?t=1781143830406") no-repeat center calc(100% - -4.5vw), /* 往上 20px */
	  #ffeab2; /* ✅ 放這裡才會滿版 */
  
	background-size:
	  100% auto,
	  100% auto,
	  auto;

  padding-top: 0px;   /* ↓ 往上拉（原本太下面） */
  padding-bottom: 0px;
  box-sizing: border-box;

  }
  
  /* 中間內容 */
  .Area-mainPD .box_all .bg_con{
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 2;
  
	/* ❌ 這裡不要再放背景色 */
	background: transparent;
  }


}

/*作圖區*/
.Area-mainPD .PD_layout.layout_item .PD p b { /*font-weight: 500;*/ color: #f5301e;}	
.Area-mainPD .PD_layout.layout_item .PD_slide .PD p del {color: #000;/*font-size: 0.7em;*/}
.Area-mainPD .PD_layout.layout_item .PD p .money, .Area-mainPD .PD_layout.layout_item .PD p .Price {color: #3e6bd2;font-weight: 800;}
@media screen and (max-width:767px){
.Area-mainPD .PD_layout.layout_item .PD p b { display: none;}
.Area-mainPD .PD_layout.layout_item .PD p .Area-mainPD .PD_layout.layout_item .PD p .Price { font-size: 7vw; }
.Area-mainPD .PD_layout.layout_item .PD p .money { font-size: 4vw; }
}

@media screen and (min-width:768px){
.Area-mainPD .PD_layout.layout_item {margin: 1% 0% 0;}
.Area-mainPD .PD_layout.layout_item .PD_slide:hover {transform:translateY(-6px);}
.Area-mainPD .PD_layout.layout_item .PD_slide:hover { box-shadow:unset;}
.Area-mainPD .PD_layout.layout_item .PD_slide {height:450px;padding:0;margin: 0;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD_into {width: 80%;margin: 0 auto;position: absolute;left: 50px;top: 25px;text-align:center;font-size: 0.7em;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD_into {width: 80%;margin: 0 auto;position: absolute;left:50px;top: 25px;text-align:center;font-size: 0.7em;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD_img img {width: 67%;margin: 15% 0 0 0;box-shadow: unset;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD_img img {width: 67%;margin: 15% 0 0 0;box-shadow: unset;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD_into h3 {padding: 0;max-height: 1.7em;font-weight: 600;font-size: 2.2em;line-height: 1.7em;font-family: "Noto Sans CJK SC";color: #000;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD_into h4 {font-size: 1.8em;color: #000;/*transform: rotate3d(25, 55, 1, 357deg);*/margin-bottom:0em;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD p {width: 70%;margin: 0 auto;padding: 2% 0 0;height: auto;line-height: 1.5em;font-size: 2em;border-radius: 2em;/*transform: rotate3d(25, 55, 1, 354deg)*//* background-color: #0e52c1; */}
.Area-mainPD .PD_layout.layout_item .PD_slide .PD .PD_logo img{display: none;}
/*.Area-mainPD .PD_layout.layout_item .PD_slide .PD .PD_logo img{width: 45%;height: auto;}*/
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD .PD_logo {position: absolute;top: 145px;left: -20px;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD .PD_logo {position: absolute;top: 145px;left: -20px;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD_into h3 { padding: 0; max-height: 1.7em; font-weight: 600;font-size: 2.5em; line-height: 1.9em; font-family: "Noto Sans CJK SC"; color:#000;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD_into h4 { font-size: 1.8em; color: #000;/*transform: rotate3d(35, -60, -2, 343deg);*/}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD p {width: 70%;margin: 0 auto;padding: 2% 0 0;height: auto;line-height: 1.5em;font-size: 2em;border-radius: 2em;/*transform: rotate3d(25, 55, 1, 354deg)*/}
.Area-mainPD .PD_layout.layout_item .PD p .Price { font-size: 1.7em;text-align: left;}

.Area-mainPD .PD_layout.layout_item li:nth-of-type(odd){ background: url("layout_itembg2.png?t=1781143830406") center top / 85% no-repeat scroll;}	
.Area-mainPD .PD_layout.layout_item li:nth-of-type(even){background: url("layout_itembg2.png?t=1781143830406") center top / 85% no-repeat scroll;}	
}
@media screen and (max-width:767px){
.Area-mainPD .PD_layout.layout_item { width: 100%;position: relative; z-index: 50; }
.Area-mainPD .PD_layout.layout_item ul {padding: 0% 0 1%;margin:0% auto;}
.Area-mainPD .PD_layout.layout_item ul li {width: 100%;}
.Area-mainPD .PD_layout.layout_item .PD_slide .PD_img {margin-bottom: 0;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD_into {position: absolute;margin: 0 auto;top: 1.8vw;width: 90%;transform: translateX(6%);text-align:center;display: block;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD_into {position: absolute;margin: 0 auto;top: 1.8vw;width: 90%;transform: translateX(6%);text-align:center; display: block;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD_img img {width: 76%;margin: 11vw 0 0 0;box-shadow: unset;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD_img img {width: 76%; margin: 11vw 0 0 0; box-shadow: unset;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD_into h3 {color:#000;line-height: 1.0em;font-size:1.2em ;font-weight:600 ; margin-bottom:0em;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD_into h4 {color:#000; margin-bottom:0em;}
.Area-mainPD .PD_layout.layout_item .PD_slide .PD .PD_logo img{width: 25%;height: auto;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD .PD_logo {display: none;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD .PD_logo {display: none;}
/*.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD .PD_logo {position: absolute;top: 20.5vw;left: 2vw;transform: translateX(-38%);}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD .PD_logo { position: absolute;top:22.5vw;left: 2vw;transform: translateX(-38%);}*/
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(odd) .PD p {padding: 0 0 0;line-height: 1.2em;color:#3e6bd2;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD p { padding: 0 0 0 ;line-height: 1.2em; color:#3e6bd2;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD_into h3 {color:#000;line-height: 1.0em;font-size:1.2em ;font-weight:600 ; margin-bottom:0em;}
.Area-mainPD .PD_layout.layout_item .PD_slide:nth-of-type(even) .PD_into h4 { color: #000; margin-bottom:0em;}
.Area-mainPD .PD_layout.layout_item .PD p .Price {text-align: left;}
.Area-mainPD .PD_layout.layout_item li:nth-of-type(odd){height: 55vw;background: url("layout_itembg2.png?t=1781143830406") center top / 100% no-repeat scroll;}	
.Area-mainPD .PD_layout.layout_item li:nth-of-type(even){height: 55vw;background: url("layout_itembg2.png?t=1781143830406") center top / 100% no-repeat scroll;}

}



/* Area_topitem 副打品 */
.Area_topitem{
	.PD_layout{
		margin-bottom: 0px;
	}
}


/*頁籤*/ 
.Area_topitem.NavArea {display:block!important} 
.Area_topitem.NavArea .Nav ul {text-align: center;}
.Area_topitem.NavArea .Nav li a {padding: 0 2em;}
.Area_topitem.Nav_box {width:960px!important;margin:0 auto;}   
.Area_topitem.tab_swiper {overflow-y:clip!important}  
.Area_topitem.NavArea_tabbar_page {padding-bottom: 17px;width: 81%;margin: 65px auto 1px;}  
.Area_topitem.content_swiper {width: 100%;margin: 0 auto;overflow:hidden;height: 100%;}  
.Area_topitem.page .layout_text .PD .PD_into h3 span {display: inline}

/* 外框置中基準 */
.Area_topitem .NavArea .Nav_box{
	position: relative;
	text-align: center;
	
  }
  
  /* 選單區改成可置中 */
  .Area_topitem .NavArea .Nav{
	width: calc(100% - 44px);
	margin: 0 auto;
	text-align: center;
  }
  
  /* 讓 ul 當成整組內容置中 */
  .Area_topitem.NavArea .Nav ul{
	display: inline-block;
	padding: 0;
	margin: 0 auto;
	white-space: nowrap;
  }
  
  /* li維持橫排 */
  .Area_topitem.NavArea .Nav li,
  .Area_topitem .NavArea .Nav li > span,
  .Area_topitem .NavArea .Nav li > b{
	display: inline-block;
	float: none;
	vertical-align: top;
  }

@media screen and (max-width:767px){
	.Area_topitem.NavArea .Nav li a {padding: 0 0.5em;}
	.Area_topitem.Nav_box {width: 100%!important;margin: auto;}  
	  }


/*Phone錨點*/
.Area_floorPD_NavArea_tabbar {
	margin: 1vw auto 5vw ;

  }
  .Area_floorPD_NavArea_tabbar.cate-fixed {
	width: 100%;
  }
  .Area_floorPD_NavArea_tabbar .Nav_box {
	border-radius: 8px;
	-webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
			box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
			width: 960px;margin:0 auto ;
  }
  .Area_floorPD_NavArea_tabbar .Nav li {
	overflow: visible;
  }
  .Area_floorPD_NavArea_tabbar.cate-fixed .Nav_box {
	border-radius: 0;
	background-color: rgba(255, 255, 255, 1);
	-webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
			box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2);
  }

  @media screen and (max-width:767px){
	.Area_floorPD_NavArea_tabbar {
		margin: 1vw auto 5vw ;
		width: 94%;
	  }
	  .
  }




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

/* 有背景的邊界 */
.AreaBg.Areabottom{
	margin:120px auto;
	@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;}
}


/*黏人精*/
.Area_hammerAD { z-index: 9999; position: fixed; bottom: 0; right: 0;}
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto; position: absolute; top: 0; left: 0;}
.Area_hammerAD .closeButton a { display: block; cursor: pointer; position: absolute; width: 20px; height: 20px; border-radius: 50%; font: bold 20px/1em "Century Gothic"; color: #FFF; text-align: center; background-color: rgba(0%,0%,0%,0.5); text-decoration: none; z-index: 2;}
.Area_hammerAD .Ahammer_text { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 90%; color: #000; font-family: "Century Gothic","Noto Sans CJK TC"; font-weight: 700;}
.Area_hammerAD .Ahammer_black .img_0, .Area_hammerAD .img_1 { filter: brightness(0%);}
.Area_hammerAD .Ahammer_black .img_1 { filter: none;}
.Area_hammerAD .Ahammer_black .Ahammer_text { color: #fff;}
@media screen and (min-width:768px){
  .Area_hammerAD { position: fixed; z-index: 9999; left: 50%; right: auto; bottom: 250px; display: block; width: 210px; height: 200px; transform: translateX(618px) translate3d(0,200px,0);}
  .Area_hammerAD .closeButton a { top: 0; right: 0;}
  .Area_hammerAD .Ahammer_text { font-size: 2.3em; line-height: 1em; height: 1em; top: 40px;}
}
@media screen and (max-width:767px){
  .Area_hammerAD { display: block; width: 26%; transform: translate3d(0px, -215px, 0px) !important;}
  .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
  .Area_hammerAD .Ahammer_text { font-size: 1.5em; line-height: 1.5em; height: 1.5em; top: 3.6vw;}
}


/*選單外掛*/
/*.NavArea{width: 680px;margin:0 auto ;}
.NavArea .Nav_box {border-radius:10px ;margin:0 auto ;}
.NavArea .Nav {margin:0 auto ;}
.NavArea.cate-fixed .Nav_box {width:680px;}
@media screen and (max-width:767px){
	.NavArea{width: 94%;margin:0 auto ;}
	.NavArea .Nav {margin:0 auto ;}
	.NavArea .Nav ul {margin:0 auto ;}s
}*/